/* =========================================================================
   Tetris Arena — styles (v2: refined design, split layouts, smaller boards)
   ========================================================================= */
:root {
  --bg0: #060812;
  --bg1: #0e1424;
  --panel: rgba(20, 26, 44, 0.66);
  --panel-2: rgba(28, 36, 60, 0.55);
  --panel-brd: rgba(120, 150, 220, 0.16);
  --ink: #eaf0fb;
  --ink-dim: #8791a9;
  --accent: #5ad1ff;
  --accent2: #b06bff;
  --hot: #ff3b6b;
  --good: #3ce88a;
  --shadow: 0 12px 44px rgba(0, 0, 0, 0.55);
  --glow: 0 0 22px rgba(90, 209, 255, 0.32);
  --glow-hot: 0 0 22px rgba(255, 59, 107, 0.32);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  overflow: hidden;
  font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 820px at 82% -12%, rgba(176, 107, 255, 0.16), transparent 60%),
    radial-gradient(1000px 720px at -12% 112%, rgba(90, 209, 255, 0.14), transparent 55%),
    linear-gradient(160deg, var(--bg1), var(--bg0));
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* subtle drifting particles + faint scanlines for depth */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,.22), transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.18), transparent),
    radial-gradient(1.5px 1.5px at 85% 20%, rgba(176,107,255,.4), transparent);
  opacity: .5; animation: drift 70s linear infinite;
}
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.04) 2px 3px);
  mix-blend-mode: overlay; opacity: .5;
}
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(-46px); } }

.screen { display: none; position: absolute; inset: 0; z-index: 2; }
.screen.active { display: flex; }

/* ============================ Menu ============================ */
#menu, #ai-setup, #online-setup {
  flex-direction: column; align-items: center; justify-content: center;
  gap: 26px; padding: 24px;
}
.logo { text-align: center; animation: pop .6s cubic-bezier(.2,.9,.3,1.3); }
.logo h1 {
  font-size: clamp(46px, 9vw, 96px); font-weight: 700; letter-spacing: 8px; line-height: 1;
  background: linear-gradient(90deg, #5ad1ff, #b06bff, #ff6ba8, #5ad1ff);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 30px rgba(120,150,255,.4));
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer { to { background-position: 300% 0; } }
.logo p { color: var(--ink-dim); letter-spacing: 6px; margin-top: 8px; font-size: 15px; text-transform: uppercase; }

.menu-btns { display: flex; flex-direction: column; gap: 15px; width: min(340px, 86vw); }
.btn {
  position: relative; border: 1px solid var(--panel-brd);
  background: var(--panel); backdrop-filter: blur(12px);
  color: var(--ink); font-family: inherit; font-size: 20px; font-weight: 600; letter-spacing: 2px;
  padding: 17px 22px; border-radius: 15px; cursor: pointer;
  transition: transform .15s, box-shadow .2s, border-color .2s, background .2s;
  display: flex; align-items: center; gap: 14px; justify-content: center; overflow: hidden;
}
.btn::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.08) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .5s;
}
.btn:hover::after { transform: translateX(120%); }
.btn .ico { font-size: 24px; }
.btn:hover { transform: translateY(-3px); box-shadow: var(--shadow), var(--glow); border-color: var(--accent); }
.btn:active { transform: translateY(-1px) scale(.99); }
.btn.primary { background: linear-gradient(135deg, rgba(90,209,255,.22), rgba(176,107,255,.22)); }
.btn.small { font-size: 15px; padding: 12px 18px; letter-spacing: 1px; }
.btn.ghost { background: rgba(255,255,255,.04); }

.setup-card {
  background: var(--panel); border: 1px solid var(--panel-brd); backdrop-filter: blur(14px);
  border-radius: 22px; padding: 30px; width: min(440px, 90vw); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 16px;
}
.setup-card h2 { text-align: center; font-size: 26px; letter-spacing: 2px; margin-bottom: 6px; }
.setup-card .sub { text-align: center; color: var(--ink-dim); font-size: 14px; margin-top: -8px; }
.diff-row { display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; gap: 10px; }
.field input {
  flex: 1; background: rgba(0,0,0,.3); border: 1px solid var(--panel-brd);
  color: var(--ink); border-radius: 12px; padding: 14px 16px; font-family: inherit;
  font-size: 18px; letter-spacing: 3px; text-transform: uppercase; text-align: center;
}
.field input:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow); }
.status { text-align: center; color: var(--accent); min-height: 20px; font-size: 14px; }
.code-box { display: none; text-align: center; background: rgba(0,0,0,.35);
  border: 1px dashed var(--accent); border-radius: 14px; padding: 16px; }
.code-box .code { font-size: 40px; letter-spacing: 8px; font-weight: 700; color: var(--accent); text-shadow: var(--glow); }
.divider { text-align: center; color: var(--ink-dim); font-size: 13px; position: relative; }
.divider::before, .divider::after { content:''; position:absolute; top:50%; width:38%; height:1px; background: var(--panel-brd); }
.divider::before { left: 0; } .divider::after { right: 0; }

/* ============================ Game shell ============================ */
#game { flex-direction: column; }
.topbar {
  height: 52px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; border-bottom: 1px solid var(--panel-brd);
  background: rgba(8,11,20,.55); backdrop-filter: blur(8px); z-index: 5;
}
.topbar .title { font-weight: 700; letter-spacing: 3px; font-size: 17px;
  background: linear-gradient(90deg,#5ad1ff,#b06bff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.topbar .actions { display: flex; gap: 8px; }
.icon-btn {
  background: rgba(255,255,255,.05); border: 1px solid var(--panel-brd);
  color: var(--ink); border-radius: 10px; width: 38px; height: 38px; cursor: pointer;
  font-size: 17px; transition: .15s;
}
.icon-btn:hover { border-color: var(--accent); box-shadow: var(--glow); }

#play-area {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: clamp(8px, 2vw, 26px); padding: 12px; position: relative; min-height: 0;
}
#fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 20; }

/* player panel = rail + board + rail */
.p-panel { display: flex; align-items: center; gap: clamp(8px, 1.4vw, 18px); }
.rail { display: flex; flex-direction: column; gap: 10px; width: clamp(78px, 9vw, 116px); }
.panel {
  background: var(--panel); border: 1px solid var(--panel-brd);
  border-radius: 13px; padding: 11px; backdrop-filter: blur(10px);
}
.panel .label { font-size: 10px; letter-spacing: 2px; color: var(--ink-dim); text-transform: uppercase; margin-bottom: 7px; text-align: center; }
.hold-box, .next-box { width: 100%; aspect-ratio: 1.35; display: block; }
#next-list { display: flex; flex-direction: column; gap: 5px; }
.stats { display: flex; flex-direction: column; gap: 2px; }
.stat { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 2px; }
.stat.col { flex-direction: column; align-items: flex-start; gap: 0; }
.stat .k { font-size: 10px; color: var(--ink-dim); letter-spacing: 1px; text-transform: uppercase; }
.stat .v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat.col .v { font-size: 26px; }
.stat .v.accent { color: var(--accent); }

/* board */
.board-shell { position: relative; }
canvas.board {
  border-radius: 9px; background: rgba(0,0,0,.42); display: block;
  border: 1px solid var(--panel-brd);
  box-shadow: var(--shadow), inset 0 0 50px rgba(0,0,0,.55);
}
.board-shell.me canvas.board { box-shadow: var(--shadow), inset 0 0 50px rgba(0,0,0,.55), 0 0 0 1px rgba(90,209,255,.25), 0 0 26px rgba(90,209,255,.14); }
.board-shell.opp canvas.board { box-shadow: var(--shadow), inset 0 0 50px rgba(0,0,0,.55), 0 0 0 1px rgba(255,59,107,.22); }

/* name tags */
.p-name {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  font-size: 12px; letter-spacing: 3px; font-weight: 700; text-transform: uppercase;
  padding: 3px 12px; border-radius: 20px; z-index: 4; pointer-events: none;
  background: rgba(0,0,0,.4); backdrop-filter: blur(4px);
}
.p-name.me { color: var(--accent); border: 1px solid rgba(90,209,255,.4); }
.p-name.opp { color: var(--hot); border: 1px solid rgba(255,59,107,.4); }

/* opponent panel */
#opp-panel { flex-direction: column; gap: 8px; }
#opp-panel .board-shell.opp .p-name { display: none; }
.p-head { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.p-head .p-name { position: static; transform: none; }
.p-mini { font-size: 12px; color: var(--ink-dim); letter-spacing: .5px; }
.p-mini b { color: var(--ink); }
.opp-next { display: flex; gap: 4px; }
.opp-next .next-box { width: 30px; height: 22px; }

.vs-badge {
  font-size: clamp(20px, 3vw, 30px); font-weight: 800; letter-spacing: 3px; align-self: center;
  background: linear-gradient(135deg, var(--hot), var(--accent2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgba(176,107,255,.5)); animation: vspulse 2.4s ease-in-out infinite;
}
@keyframes vspulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} }

/* countdown */
#countdown {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  font-size: clamp(64px, 14vw, 160px); font-weight: 800; color: #fff;
  text-shadow: 0 0 40px var(--accent); z-index: 30; pointer-events: none;
  animation: cdpulse .9s ease-out infinite;
}
@keyframes cdpulse { 0%{transform:scale(.7);opacity:0} 30%{opacity:1} 100%{transform:scale(1.35);opacity:0} }

/* ============================ Layout modes ============================ */
/* SOLO: only my panel, centered. Opponent + VS hidden (set by JS too). */
#play-area:not(.is-versus) #opp-panel,
#play-area:not(.is-versus) .vs-badge,
#play-area:not(.is-versus) .p-name.me { display: none; }

/* VERSUS desktop: player LEFT, opponent RIGHT */
#play-area.is-versus { flex-direction: row; }
#play-area.is-versus #me-panel  { order: 1; }
#play-area.is-versus .vs-badge  { order: 2; }
#play-area.is-versus #opp-panel { order: 3; }

/* toast */
#toast {
  position: fixed; top: 64px; left: 50%; transform: translateX(-50%) translateY(-20px);
  background: rgba(0,0,0,.72); border: 1px solid var(--accent); color: var(--ink);
  padding: 10px 22px; border-radius: 30px; font-weight: 600; letter-spacing: 1px;
  opacity: 0; transition: .3s; z-index: 40; box-shadow: var(--glow); pointer-events: none;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* modals */
.modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  background: rgba(4,6,12,.74); backdrop-filter: blur(6px); z-index: 50; }
.modal.show { display: flex; animation: fade .25s; }
@keyframes fade { from { opacity: 0; } }
.modal-card {
  background: var(--panel); border: 1px solid var(--panel-brd); backdrop-filter: blur(16px);
  border-radius: 22px; padding: 34px 40px; text-align: center; box-shadow: var(--shadow);
  min-width: 300px; animation: pop .35s cubic-bezier(.2,.9,.3,1.3);
}
.modal-card h2 { font-size: 40px; letter-spacing: 2px; margin-bottom: 8px; }
.modal-card .sub { color: var(--ink-dim); margin-bottom: 22px; font-size: 15px; }
.modal-card .row { display: flex; gap: 12px; justify-content: center; }
@keyframes pop { from { transform: scale(.8); opacity: 0; } }

/* desktop key hint (hidden on touch — gestures are used there) */
.hint { position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%);
  color: var(--ink-dim); font-size: 12px; letter-spacing: 1px; text-align: center; z-index: 3; }
@media (hover: none) and (pointer: coarse) { .hint { display: none; } }

/* the whole play area is the touch surface; stop native scroll/zoom while playing */
@media (pointer: coarse) {
  #play-area { touch-action: none; }
}

/* ============================ Mobile / narrow ============================ */
/* VERSUS mobile: stacked — opponent TOP, player BOTTOM */
@media (max-width: 820px) {
  #play-area.is-versus { flex-direction: column; gap: 6px; padding: 8px; }
  #play-area.is-versus #opp-panel { order: 1; }
  #play-area.is-versus .vs-badge  { order: 2; font-size: 18px; }
  #play-area.is-versus #me-panel  { order: 3; }

  /* trim rails on small screens so the board dominates */
  #play-area.is-versus #me-panel .rail { width: clamp(56px, 16vw, 80px); }
  #play-area.is-versus #me-panel .panel { padding: 7px; }
  #play-area.is-versus .stat.col .v { font-size: 20px; }
  #opp-panel .opp-next { display: none; }
}
@media (max-width: 520px) {
  /* keep only NEXT on the player rails in solo/versus to save space handled by JS sizing */
  .p-name { font-size: 10px; padding: 2px 9px; }
}