/* Shared look for the Tetris pages (single player and Arena versus). Dark, with gold
   frames to match the rest of the site. The board keeps a 1:2 shape at every size. */
:root {
  --gold: #ffd700;
  --gold-soft: rgba(255, 215, 0, .35);
  --ink: #eef1f8;
  --muted: #8d97ab;
  --panel: rgba(8, 10, 16, .92);
  --bg: #050608;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); }
body {
  font-family: 'Press Start 2P', ui-monospace, 'Courier New', monospace;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
button { font-family: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.tetris-app {
  height: 100%;
  height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  /* Side gutter of 16px at every width; the top clears the back link. */
  padding: 10px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  max-width: 980px;
  margin: 0 auto;
  /* The width each side box takes up beside the board, used to size the board. */
  --side-w: 64px;
}

/* Header: back link, title and sound toggle on one row, the score line under it. */
.top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px 10px;
  min-width: 0;
}
.top .back { position: static; justify-self: start; grid-row: 1; grid-column: 1; }
.top h1 {
  grid-row: 2;
  grid-column: 1 / -1;
  margin: 0;
  font-weight: 400;
  font-size: clamp(12px, 4vw, 20px);
  color: var(--gold);
  text-shadow: 0 0 14px rgba(255, 215, 0, .5), 2px 2px 0 #000;
  text-align: center;
  white-space: nowrap;
}
.top .hud { grid-row: 3; grid-column: 1 / -1; }
.sound {
  justify-self: end;
  grid-row: 1;
  grid-column: 3;
  min-width: 44px;
  min-height: 44px;
  background: #000;
  color: var(--gold);
  border: 2px solid var(--gold);
  font-size: 16px;
  cursor: pointer;
}
.sound:hover { background: var(--gold); color: #000; }

/* Score line across the top */
.hud {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 10px;
  color: var(--muted);
}
.hud .stat { text-align: center; min-width: 74px; }
.hud .stat small { display: block; font-size: 7px; margin-bottom: 4px; color: var(--muted); }
.hud .stat b { font-weight: 400; font-size: 12px; color: var(--gold); text-shadow: 0 0 10px rgba(255, 215, 0, .45); }
.hud .name { font-size: 8px; color: var(--ink); }

/* Main row: side boxes and the board */
.main {
  min-height: 0;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  justify-items: center;
}
.side { display: flex; flex-direction: column; gap: 10px; align-items: stretch; width: 100%; max-width: 150px; min-height: 0; }
.box {
  border: 2px solid var(--gold-soft);
  background: var(--panel);
  padding: 8px;
  font-size: 7px;
  color: var(--muted);
  text-align: center;
}
.box > span { display: block; margin-bottom: 6px; letter-spacing: 1px; }
.box canvas { display: block; width: 100%; height: 64px; }
.box.next canvas { height: clamp(130px, 28dvh, 260px); }

/* The board: the frame is 1:2, the canvas fills it. */
.stage {
  position: relative;
  /* The board is as wide as the row leaves room for beside the side boxes, or as tall as the
     screen allows, whichever is smaller, and twice as tall as it is wide. Older Safari ignores
     aspect-ratio and 100dvh, which left the board at zero width; each of those declarations
     is therefore preceded by a plain fallback that those browsers can use. */
  width: calc(100vw - 2 * var(--side-w) - 48px);
  width: min(calc(100vw - 2 * var(--side-w) - 48px), calc((100dvh - 290px) / 2));
  height: calc((100vw - 2 * var(--side-w) - 48px) * 2);
  height: calc(min(calc(100vw - 2 * var(--side-w) - 48px), calc((100dvh - 290px) / 2)) * 2);
  min-width: 160px;
  max-width: 100%;
  border: 3px solid var(--gold);
  background: #000;
  box-shadow: 0 0 22px rgba(255, 215, 0, .22), inset 0 0 26px rgba(0, 0, 0, .9);
}
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage .rows-canvas { width: 100%; height: 100%; }

/* Opponent well, versus only. It is narrower than your own board. */
.opp {
  height: 100%;
  min-height: 0;
  aspect-ratio: 1 / 2;
  max-width: 100%;
  border: 2px solid rgba(255, 255, 255, .25);
  background: #000;
  position: relative;
}
.opp canvas { width: 100%; height: 100%; display: block; }

/* Pause, game over and the lobby sit over the board */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px;
  background: rgba(0, 0, 0, .86);
  text-align: center;
  font-size: 9px;
  line-height: 1.8;
}
.overlay.show { display: flex; }
.overlay h2 { margin: 0; font-size: 13px; color: var(--gold); text-shadow: 0 0 14px rgba(255, 215, 0, .5); font-weight: 400; }
.overlay p { margin: 0; color: var(--muted); font-size: 8px; }
.overlay .winline { color: #7dff7d; }

.btn {
  min-height: 44px;
  padding: 10px 14px;
  background: #000;
  color: var(--gold);
  border: 2px solid var(--gold);
  cursor: pointer;
  font-size: 10px;
  letter-spacing: 1px;
}
.btn:hover:not(:disabled), .btn.down { background: var(--gold); color: #000; }
.btn:disabled { opacity: .4; cursor: default; }

.back {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  color: var(--gold);
  border: 2px solid var(--gold);
  background: #000;
  font-size: 9px;
  text-decoration: none;
}

/* Touch pad: two rows of chunky arcade keys. Each key shows its action and the key
   it is bound to, so the pad is also a guide for keyboard players. */
.pad {
  display: grid;
  gap: 8px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
}
.pad-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pad-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.key {
  --c: var(--gold);
  position: relative;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px;
  border: 3px solid var(--c);
  border-radius: 8px;
  background: linear-gradient(180deg, #1c2233 0%, #070911 100%);
  color: var(--ink);
  font-family: inherit;
  box-shadow: 0 5px 0 #000, 0 0 14px -4px var(--c);
  cursor: pointer;
  touch-action: none;
  transition: transform .05s, box-shadow .05s, background .05s;
}
.key .icon { font-size: 20px; line-height: 1; }
.key .cap { font-size: 9px; letter-spacing: 1px; }
.key .hint { font-size: 8px; color: var(--c); letter-spacing: 1px; min-height: 10px; }
.key.down, .key:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #000, 0 0 18px -2px var(--c);
  background: var(--c);
  color: #000;
}
.key.down .hint, .key:active .hint { color: #000; }
.key:disabled { opacity: .35; }
.key.left, .key.right { --c: #3cc7d6; }
.key.rotcw, .key.rotccw { --c: #ffd700; }
.key.soft { --c: #95c43d; }
.key.hard { --c: #ff5a4e; }
.key.hold { --c: #b889ff; }
.key.pause { --c: #8d97ab; }

/* Settings and controls panels, opened from the start, pause and lobby screens */
.overlay.settings { position: fixed; inset: 0; z-index: 60; justify-content: flex-start; overflow-y: auto; padding: 20px; background: #000; }
.settings-panel { width: min(100%, 460px); text-align: left; font-size: 8px; line-height: 1.6; display: flex; flex-direction: column; gap: 12px; }
.frame-back { display: block; text-align: center; color: var(--gold); text-decoration: none; background: #000; border: 3px solid var(--gold); box-shadow: 0 0 0 3px #000, 0 0 0 6px rgba(255, 215, 0, .35); padding: 12px 16px; font-size: 10px; margin-top: 8px; }
.frame-back:hover { background: var(--gold); color: #000; }
.settings-panel h2 { text-align: center; }
.settings-keys, .settings-look { margin-bottom: 14px; }
.settings-h { margin: 0 0 8px; font-size: 9px; font-weight: 400; color: var(--gold); letter-spacing: 1px; }
.keys-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.keys-preset, .keys-change { min-height: 36px; padding: 6px 8px; font-size: 8px; }
.keys-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255, 215, 0, .2); }
.keys-name { flex: 1; }
.keys-keys { color: var(--gold); min-width: 72px; text-align: right; }
.keys-status { color: var(--muted); margin: 8px 0 0; }
.settings-toggle { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; }
.settings-toggle input { width: 18px; height: 18px; accent-color: var(--gold); }

/* On phones the side boxes shrink, and the pad gets a little tighter. */
@media (max-width: 640px) {
  .main { gap: 8px; }
  .side { max-width: 90px; gap: 8px; }
  .box { padding: 6px; font-size: 6px; }
  .box canvas { height: 48px; }
  .box.next canvas { height: clamp(110px, 24dvh, 200px); }
  .key { min-height: 58px; }
  .key .icon { font-size: 17px; }
  .key .cap { font-size: 8px; }
  .hud { gap: 10px; font-size: 8px; }
  .hud .stat small { font-size: 6px; }
  .hud .stat b { font-size: 10px; }
}

/* Versus lobby: stake controls and the open-lobby list */
.lobby-blurb { font-size: 8px; color: var(--muted); line-height: 1.7; margin: 0 0 10px; }
.stake-row { display: flex; gap: 8px; margin-bottom: 10px; }
.seg-btn { flex: 1; min-height: 44px; padding: 8px 6px; background: #000; color: var(--muted); border: 2px solid #555; font-family: inherit; font-size: 8px; cursor: pointer; }
.seg-btn.on { background: var(--gold); color: #000; border-color: var(--gold); }
.bet-input { width: 100%; margin-bottom: 10px; padding: 10px; background: #000; color: var(--gold); border: 2px solid var(--gold); font-family: inherit; font-size: 10px; }
#lobby-rows { max-height: 180px; overflow-y: auto; }
#lobby-rows .lobby-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; margin-bottom: 6px; border: 2px solid rgba(255, 215, 0, .3); background: rgba(255, 215, 0, .05); font-size: 8px; }
#lobby-rows .lobby-row button { min-height: 36px; padding: 6px 10px; background: var(--gold); color: #000; border: 2px solid #000; font-family: inherit; font-size: 8px; cursor: pointer; }