/* ============================================================
   SNAKE — Nokia-classic handheld game
   ============================================================ */
:root{
  --bg:#080c16;
  --bg-soft:#0d1424;
  --card:rgba(255,255,255,.045);
  --card-hi:rgba(255,255,255,.075);
  --border:rgba(255,255,255,.09);
  --border-strong:rgba(255,255,255,.18);
  --text:#e9edf7;
  --muted:#8b97b0;
  --green:#39d353;
  --green-deep:#0f7a2e;
  --red:#e2493f;
  --amber:#f2b200;
  --radius:16px;
  --radius-lg:22px;
  --shadow:0 12px 34px rgba(0,0,0,.45);
  --shadow-lg:0 24px 60px rgba(0,0,0,.55);
  --font-ar:'Cairo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-pixel:'Press Start 2P','Cairo',monospace;
  --font-retro:'VT323','Cairo',monospace;
  /* LCD palette (green default, overridden per theme) */
  --lcd-bg:#9bbc0f;
  --lcd-px:#0f380f;
  --lcd-mid:rgba(15,56,15,.16);
  --lcd-bar:#8ea90d;
  --lcd-shadow:#7d960b;
}
.lcd[data-theme="amber"]{
  --lcd-bg:#f2b200;
  --lcd-px:#3d2600;
  --lcd-mid:rgba(61,38,0,.18);
  --lcd-bar:#dda300;
  --lcd-shadow:#c08c00;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; }

body{
  min-height:100dvh;
  font-family:var(--font-ar);
  font-weight:600;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding:
    calc(env(safe-area-inset-top,0px) + .75rem)
    calc(env(safe-area-inset-right,0px) + .75rem)
    calc(env(safe-area-inset-bottom,0px) + 1.5rem)
    calc(env(safe-area-inset-left,0px) + .75rem);
}

.bg-glow{
  position:fixed; inset-inline:-20%; top:-30vh; height:75vh; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse at 50% 0%, rgba(57,211,83,.22), rgba(57,211,83,.05) 45%, transparent 70%);
}
.bg-grid{
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(ellipse at 50% 0%, #000 10%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%, #000 10%, transparent 75%);
}

/* ── Topbar ───────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  max-width:1180px; margin:0 auto .9rem;
  padding:.7rem 1rem;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:rgba(11,17,30,.75);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
}
.brand{ display:flex; align-items:center; gap:.6rem; }
.brand-dot{
  width:11px; height:11px; border-radius:3px; flex:none;
  background:var(--lcd-bg);
  box-shadow:0 0 12px rgba(57,211,83,.7);
  animation:blip 2.4s steps(1,end) infinite;
}
.brand-name{ font-family:var(--font-pixel); font-size:.95rem; letter-spacing:.06em; }
.brand-sub{ font-size:.78rem; color:var(--muted); font-weight:500; }
.topbar-actions{ display:flex; align-items:center; gap:.4rem; }

.icon-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  min-width:40px; height:40px; padding:0 .6rem;
  border:1px solid var(--border); border-radius:12px;
  background:var(--card); color:var(--text);
  font-family:var(--font-retro); font-size:1.05rem; letter-spacing:.04em;
  cursor:pointer; transition:transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.icon-btn svg{ width:19px; height:19px; }
.icon-btn:hover{ background:var(--card-hi); border-color:var(--border-strong); transform:translateY(-2px); }
.icon-btn:active{ transform:translateY(0) scale(.96); }
.icon-btn.is-off{ color:#5f6b83; }

/* ── Layout shell ─────────────────────────────────────── */
.layout{
  position:relative; z-index:1;
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1fr) 336px;
  gap:1.25rem; align-items:start;
}
.stage{ display:flex; justify-content:center; align-items:flex-start; }
.panel{ display:flex; flex-direction:column; gap:.8rem; }

/* ── Phone shell (Nokia-ish) ──────────────────────────── */
.phone{
  position:relative; width:min(100%, 404px);
  padding:1rem 1.15rem 1.3rem;
  border-radius:44px;
  background:linear-gradient(160deg,#1b2539 0%, #131c2c 45%, #0d1524 100%);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -3px 0 rgba(0,0,0,.55);
  animation:fadeUp .55s ease both;
}
.phone-head{ display:flex; flex-direction:column; align-items:center; gap:.45rem; padding:.1rem 0 .75rem; }
.phone-speaker{
  width:66px; height:6px; border-radius:99px; background:rgba(0,0,0,.6);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.07);
}
.phone-brand{
  font-family:var(--font-pixel); font-size:.6rem; letter-spacing:.34em;
  color:#95a3be; padding-inline-start:.34em;
}
.lcd-wrap{
  padding:.8rem; border-radius:20px;
  background:linear-gradient(180deg,#080e1c,#0d1526);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:inset 0 3px 12px rgba(0,0,0,.8);
}
.phone-hint{ margin-top:.85rem; text-align:center; font-size:.78rem; color:#7c88a1; font-weight:500; }

/* ── LCD screen ───────────────────────────────────────── */
.lcd{
  position:relative; border-radius:12px; overflow:hidden;
  background:var(--lcd-bg);
  box-shadow:0 0 0 1px var(--lcd-shadow), inset 0 0 26px rgba(0,0,0,.2);
  transition:background .35s ease;
}
.lcd-bar{
  display:flex; align-items:center; gap:.3rem;
  padding:.32rem .5rem;
  background:var(--lcd-bar); border-bottom:2px solid var(--lcd-px);
  font-family:var(--font-pixel); font-size:.48rem; color:var(--lcd-px);
}
.lcd-k{ opacity:.75; letter-spacing:.05em; }
.lcd-v{ font-family:var(--font-retro); font-size:1rem; line-height:1; margin-inline-end:.45rem; }
.lcd-screen{ position:relative; aspect-ratio:1 / 1; }
canvas#board{
  display:block; width:100%; height:100%;
  image-rendering:pixelated; image-rendering:crisp-edges;
  touch-action:none; -webkit-user-select:none; user-select:none;
}
.scan{
  position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:multiply;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
}
.flash{ position:absolute; inset:0; background:var(--lcd-px); opacity:0; pointer-events:none; }
.flash.on{ animation:flashOut .3s ease-out; }

/* ── In-screen overlay (diegetic menu) ────────────────── */
.overlay{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.6rem;
  padding:1rem; text-align:center; color:var(--lcd-px);
  font-family:var(--font-retro); font-size:1.1rem; z-index:3;
}
.overlay.is-hidden{ display:none; }
.overlay::before{
  content:''; position:absolute; inset:0; background:var(--lcd-bg); opacity:.94; z-index:-1;
}
.ov-title{ font-family:var(--font-pixel); font-size:.82rem; line-height:1.7; }
.ov-big{ font-family:var(--font-retro); font-size:2.6rem; line-height:1; }
.ov-line{ font-size:1.05rem; }
.ov-badge{
  font-family:var(--font-pixel); font-size:.46rem; padding:.34rem .5rem;
  border:2px solid var(--lcd-px); animation:blink 1s steps(1,end) infinite;
}
.ov-btn{
  font-family:var(--font-pixel); font-size:.52rem; line-height:1.6;
  padding:.7rem .85rem; margin-top:.2rem; cursor:pointer;
  color:var(--lcd-bg); background:var(--lcd-px);
  border:2px solid var(--lcd-px); border-radius:5px;
  transition:transform .12s ease, filter .2s ease;
}
.ov-btn:hover{ transform:translateY(-2px); filter:brightness(1.12); }
.ov-btn:active{ transform:translateY(1px); }
.ov-hint{ font-size:.95rem; opacity:.85; }

/* ── Keypad & D-pad ───────────────────────────────────── */
.keypad{
  display:flex; align-items:center; justify-content:space-between;
  gap:.9rem; margin-top:1rem; padding-inline:.3rem;
}
.dpad{
  direction:ltr; display:grid; gap:6px;
  grid-template-columns:repeat(3, 50px);
  grid-template-rows:repeat(3, 50px);
}
.key{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem;
  font-family:var(--font-retro); font-size:1rem; color:#cfd8e8;
  border:1px solid rgba(255,255,255,.1); border-radius:15px;
  background:linear-gradient(180deg,#2b3549,#1a2334);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 3px 8px rgba(0,0,0,.4);
  cursor:pointer; user-select:none; -webkit-user-select:none;
  touch-action:manipulation;
  transition:transform .1s ease, filter .2s ease, box-shadow .2s ease;
}
.key svg{ width:20px; height:20px; }
.key:hover{ filter:brightness(1.15); }
.key:active, .key.pressed{ transform:translateY(2px); filter:brightness(.9); box-shadow:inset 0 2px 6px rgba(0,0,0,.6); }
.key-up{ grid-area:1 / 2; }
.key-left{ grid-area:2 / 1; }
.key-ok{ grid-area:2 / 2; }
.key-right{ grid-area:2 / 3; }
.key-down{ grid-area:3 / 2; }
.key-ok{
  color:#08120a; border-color:rgba(57,211,83,.55);
  background:linear-gradient(180deg,#5ae872,#1fae4b);
  box-shadow:0 0 18px rgba(57,211,83,.35), inset 0 1px 0 rgba(255,255,255,.4);
}
.key-ok svg{ width:22px; height:22px; }
.keypad-side{ display:flex; flex-direction:column; gap:.55rem; }
.key-fn{
  flex-direction:row; gap:.4rem; min-width:104px; height:40px;
  font-size:.95rem; padding:0 .7rem; border-radius:12px;
}
.key-fn svg{ width:16px; height:16px; }

/* ── Side panel ───────────────────────────────────────── */
.stats{ display:grid; grid-template-columns:repeat(3, 1fr); gap:.5rem; }
.stat{
  padding:.55rem .45rem; text-align:center;
  border:1px solid var(--border); border-radius:14px; background:var(--card);
  transition:transform .2s ease, border-color .2s ease;
}
.stat:hover{ transform:translateY(-2px); border-color:var(--border-strong); }
.stat-k{ display:block; font-size:.66rem; color:var(--muted); font-weight:600; }
.stat b{ display:block; font-family:var(--font-retro); font-size:1.7rem; line-height:1.15; }
.stat.is-hot{ border-color:rgba(57,211,83,.45); }
.stat.is-hot b{ color:var(--green); }

.card{
  padding:.85rem 1rem; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--card); box-shadow:var(--shadow);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  animation:fadeUp .5s ease both;
}
.card:nth-child(2){ animation-delay:.05s; }
.card:nth-child(3){ animation-delay:.1s; }
.card:nth-child(4){ animation-delay:.15s; }
.card-title{
  display:flex; align-items:center; gap:.5rem; margin-bottom:.65rem;
  font-size:.85rem; font-weight:800; color:#cdd6e6;
}
.card-title svg{ width:16px; height:16px; color:var(--green); flex:none; }

.seg{
  display:flex; gap:.22rem; padding:.22rem;
  border:1px solid var(--border); border-radius:999px; background:rgba(0,0,0,.28);
}
.seg button{
  flex:1; padding:.45rem .25rem; border:0; border-radius:999px;
  background:transparent; color:var(--muted);
  font-family:var(--font-ar); font-weight:700; font-size:.78rem;
  cursor:pointer; transition:all .2s ease;
}
.seg button:hover{ color:var(--text); }
.seg button.active{
  background:linear-gradient(135deg,#5ae872,#16a34a); color:#06130a;
  box-shadow:0 6px 18px rgba(34,197,94,.3);
}
.seg-mini button{ font-size:.72rem; padding:.34rem .2rem; }

/* ── Switches, runs, legend, CTA ──────────────────────── */
.switch{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.42rem 0; cursor:pointer;
}
.switch-label{ display:flex; align-items:center; gap:.5rem; font-size:.83rem; color:#c3cddf; font-weight:600; }
.switch-label svg{ width:16px; height:16px; color:var(--muted); flex:none; }
.track{
  position:relative; flex:none; width:44px; height:25px; border-radius:999px;
  background:rgba(255,255,255,.12); border:1px solid var(--border);
  transition:background .25s ease, border-color .25s ease;
}
.thumb{
  position:absolute; top:2px; inset-inline-start:2px; width:19px; height:19px;
  border-radius:50%; background:#e8edf7;
  transition:transform .25s cubic-bezier(.4,1.35,.6,1);
}
input:checked + .track{ background:linear-gradient(135deg,#5ae872,#16a34a); border-color:rgba(74,222,128,.5); }
input:checked + .track .thumb{ transform:translateX(19px); }
[dir="rtl"] input:checked + .track .thumb{ transform:translateX(-19px); }
input:focus-visible + .track{ box-shadow:0 0 0 3px rgba(57,211,83,.35); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

.theme-row{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding-top:.5rem; }
.theme-row .seg{ width:148px; }

.runs{ list-style:none; display:flex; flex-direction:column; gap:.4rem; }
.runs li{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.38rem .6rem; font-size:.8rem; color:#c3cddf;
  border:1px dashed var(--border); border-radius:10px;
}
.runs li b{ font-family:var(--font-retro); font-size:1.15rem; color:var(--green); }
.runs li span{ font-family:var(--font-retro); font-size:1rem; color:var(--muted); }
.runs .empty{ justify-content:center; color:var(--muted); font-size:.78rem; font-weight:500; }

.legend{ list-style:none; display:flex; flex-direction:column; gap:.45rem; font-size:.79rem; color:#b8c2d6; }
.legend li{ display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
.kbd{
  min-width:24px; text-align:center; padding:.08rem .34rem;
  font-family:var(--font-retro); font-size:.98rem; color:var(--text);
  border:1px solid var(--border-strong); border-bottom-width:2px;
  border-radius:6px; background:rgba(255,255,255,.06);
}

.cta{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%; padding:.9rem 1rem; border:0; border-radius:var(--radius);
  font-family:var(--font-ar); font-weight:800; font-size:1rem; cursor:pointer;
  color:#06130a; background:linear-gradient(135deg,#5ae872,#16a34a);
  box-shadow:0 10px 26px rgba(34,197,94,.3);
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.cta:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(34,197,94,.42); }
.cta:active{ transform:translateY(0) scale(.99); }
.cta svg{ width:18px; height:18px; }
.cta-ghost{
  background:transparent; color:var(--text); border:1.5px solid var(--border-strong);
  box-shadow:none; font-size:.88rem; padding:.68rem 1rem;
}
.cta-ghost:hover{ background:var(--card-hi); box-shadow:none; }

/* ── Footer ───────────────────────────────────────────── */
.footer{
  position:relative; z-index:1; max-width:1180px; margin:1.4rem auto .4rem;
  text-align:center; font-size:.75rem; color:#6f7b93; font-weight:500;
}

/* ── Toasts ───────────────────────────────────────────── */
.toasts{
  position:fixed; bottom:calc(env(safe-area-inset-bottom,0px) + 1rem);
  inset-inline-start:1rem; z-index:60;
  display:flex; flex-direction:column; gap:.45rem; pointer-events:none;
}
.toast{
  display:flex; align-items:center; gap:.5rem;
  padding:.6rem .9rem; border-radius:12px; font-size:.84rem; font-weight:700;
  background:rgba(9,14,25,.95); border:1px solid var(--border-strong);
  box-shadow:var(--shadow-lg); animation:toastIn .3s ease both;
}
.toast svg{ width:16px; height:16px; }
.toast.ok{ border-color:rgba(74,222,128,.4); color:#9ff0b6; }
.toast.warn{ border-color:rgba(242,178,0,.4); color:#ffd977; }
.toast.out{ animation:toastOut .3s ease both; }

/* ── Modal ────────────────────────────────────────────── */
.modal-root{ position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:1rem; }
.modal-root.is-hidden{ display:none; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(3,6,12,.72); backdrop-filter:blur(5px); animation:fadeIn .2s ease both; }
.modal{
  position:relative; z-index:1; width:min(100%, 480px); max-height:86dvh; overflow:auto;
  padding:1.4rem 1.5rem; border-radius:var(--radius-lg);
  background:linear-gradient(180deg,#111a2c,#0c1424);
  border:1px solid var(--border-strong); box-shadow:var(--shadow-lg);
  animation:fadeUp .3s ease both;
}

.modal h3{ display:flex; align-items:center; gap:.5rem; font-size:1.02rem; margin-bottom:.9rem; }
.modal h3 svg{ width:19px; height:19px; color:var(--green); flex:none; }
.modal-steps{ list-style:none; display:flex; flex-direction:column; gap:.65rem; }
.modal-steps li{ display:flex; gap:.7rem; font-size:.85rem; color:#c3cddf; font-weight:600; line-height:1.65; }
.modal-steps .num{
  flex:none; width:24px; height:24px; display:grid; place-items:center;
  border-radius:8px; background:rgba(57,211,83,.15); color:var(--green);
  font-family:var(--font-retro); font-size:1.05rem;
}
.modal-note{
  margin-top:1rem; padding-top:.8rem; border-top:1px solid var(--border);
  font-size:.78rem; color:var(--muted); font-weight:500; line-height:1.7;
}
.modal-actions{ display:flex; gap:.5rem; margin-top:1.1rem; }
.modal-actions .cta{ font-size:.86rem; padding:.7rem 1rem; }

/* ── Animations ───────────────────────────────────────── */
@keyframes blip{ 0%,58%{ opacity:1 } 59%,100%{ opacity:.35 } }
@keyframes blink{ 0%,49%{ opacity:1 } 50%,100%{ opacity:.25 } }
@keyframes flashOut{ from{ opacity:.5 } to{ opacity:0 } }
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }
@keyframes toastIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
@keyframes toastOut{ to{ opacity:0; transform:translateY(10px) } }
@keyframes shake{ 20%{ transform:translateX(-3px) } 40%{ transform:translateX(4px) } 60%{ transform:translateX(-3px) } 80%{ transform:translateX(2px) } }
.shake{ animation:shake .38s ease; }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width:980px){
  .layout{ grid-template-columns:minmax(0,1fr); }
  .stage{ order:1; }
  .panel{ order:2; }
}
@media (max-width:560px){
  body{ padding-inline:.55rem; }
  .topbar{ border-radius:14px; padding:.5rem .65rem; margin-bottom:.7rem; }
  .brand-sub{ display:none; }
  .phone{ width:100%; border-radius:34px; padding:.8rem .8rem 1rem; }
  .lcd-wrap{ padding:.6rem; border-radius:16px; }
  .dpad{ grid-template-columns:repeat(3, 47px); grid-template-rows:repeat(3, 47px); }
  .keypad{ gap:.6rem; }
  .runs li span{ display:none; }
  .toasts{ inset-inline:.6rem; }
}
@media (max-width:400px){
  .dpad{ grid-template-columns:repeat(3, 42px); grid-template-rows:repeat(3, 42px); }
  .key-fn span{ display:none; }
  .key-fn{ min-width:54px; }
  .key-fn svg{ width:18px; height:18px; }
}
@media (hover:none){
  .key:hover, .stat:hover, .card:hover{ filter:none; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}