/* Snake Arena: the kit's shell in a deep teal coat, a sandy arena. */
:root{
  --lacquer:#12303A;--lacquer-hi:#1B4250;--ink:#F4FAF7;--ink-soft:#C4DDD6;--ink-dim:#8FB3A9;
  --hair:rgba(180,240,220,.24);--brass:#FACC15;--brass-lo:#EAB308;--brass-hi:#FEF08A;--jade:#22C55E;
  color-scheme:dark;
}
body{background:radial-gradient(120% 90% at 50% 0%,#1D4B57 0%,#12303A 55%,#0B222A 100%);color:var(--ink)}
.title{font-family:var(--sans);font-weight:900;color:#FEF9C3;text-shadow:0 3px 0 #15803D,0 8px 22px rgba(0,0,0,.45);letter-spacing:-.01em}
.pill{font-family:var(--sans);color:#12303A;background:linear-gradient(180deg,#FEF08A,#FACC15 50%,#EAB308);box-shadow:0 1px 0 #fff8 inset,0 4px 0 #A16207,0 8px 18px rgba(0,0,0,.35)}
.pill:active{box-shadow:0 1px 0 #fff8 inset,0 2px 0 #A16207,0 4px 10px rgba(0,0,0,.3)}
.link{color:var(--brass);font-weight:600;min-height:44px}
.jewel{background:rgba(255,255,255,.08);border:1px solid var(--hair);box-shadow:0 2px 8px rgba(0,0,0,.25)}
.jewel svg{stroke:#FEF9C3}
.veil{background:rgba(6,20,26,.6)}
.card{background:linear-gradient(180deg,#1F4B58,#163845);border:1px solid var(--hair);box-shadow:0 20px 50px rgba(0,0,0,.45);color:var(--ink)}
.card h2{font-family:var(--sans);font-style:normal;font-weight:900;color:#FEF9C3}
.card .x{color:#FEF9C3;border-color:var(--hair)}
.card .x svg{stroke:#FEF9C3}
.row{background:rgba(255,255,255,.06);border-color:var(--hair);min-height:52px;color:var(--ink)}
.toggle{background:#2F5A66;border-color:transparent}
.toggle[aria-pressed=true]{background:var(--jade)}
.toggle::after{background:#fff}
.stats b{font-family:var(--sans);color:#FEF9C3}
.note{color:var(--ink-soft)}
.toast{background:#1F4B58;color:var(--ink)}
:focus-visible{outline:3px solid var(--brass);outline-offset:3px}

/* home */
.home{padding:1.2em;align-items:center;justify-content:center;gap:1.4em}
.brand{display:flex;flex-direction:column;align-items:center;gap:.5em}
.logo{width:clamp(150px,40vmin,280px);height:auto;filter:drop-shadow(0 8px 14px rgba(0,0,0,.35))}
.home .title{font-size:clamp(2.4em,9vmin,4.2em);text-align:center}
.menu{display:flex;flex-direction:column;align-items:stretch;gap:.8em;width:min(21em,100%)}
.menu .pill{display:flex;flex-direction:column;align-items:center;padding:.55em 1em;min-height:64px;font-size:1.3em}
.menu .pill small{font-size:.62em;font-weight:700;opacity:.85}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6em}
.soft{min-height:50px;border-radius:14px;border:1px solid var(--hair);background:rgba(255,255,255,.07);color:var(--ink);font-weight:700;font-size:.95em;padding:.4em .6em}
.soft:active{transform:translateY(1px)}
.soft:disabled,.pill:disabled{opacity:.5}
.lock a{color:var(--brass)}
@media (max-height:520px) and (min-aspect-ratio:5/4){
  .home{flex-direction:row;gap:2.4em}
  .logo{width:clamp(120px,36vh,210px)}
  .home .title{font-size:clamp(2em,11vh,3.4em)}
}

/* the game */
#game{display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);grid-template-areas:"bar" "felt" "pad";touch-action:none;-webkit-user-select:none;user-select:none}
.bar{grid-area:bar;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.6em;padding:max(.5em,env(safe-area-inset-top)) max(.8em,env(safe-area-inset-right)) .3em max(.8em,env(safe-area-inset-left))}
.hud{display:flex;flex-direction:column;align-items:center;gap:.25em;line-height:1.1;min-width:0}
.hud-level{font-size:.9em;font-weight:700;color:var(--ink-soft);letter-spacing:.02em;white-space:nowrap}
.hud-level b{color:#FEF9C3;font-variant-numeric:tabular-nums}
.goal{position:relative;width:min(15em,100%);height:1.7em;border-radius:999px;background:rgba(0,0,0,.3);border:1px solid var(--hair);overflow:hidden}
.goal i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#16A34A,#4ADE80);border-radius:999px;transition:width .25s}
.goal span{position:relative;display:block;text-align:center;font-weight:900;font-size:1em;line-height:1.7em;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);font-variant-numeric:tabular-nums}
.goal.pop{animation:pop .3s}
@keyframes pop{40%{transform:scale(1.08)}}
.lives{display:flex;gap:.3em;align-items:center;justify-content:flex-end;min-width:2.8em}
.lives i{width:1.25em;height:1.25em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21 3.5 12.6A5.2 5.2 0 0 1 12 6a5.2 5.2 0 0 1 8.5 6.6z' fill='%23F87171'/%3E%3C/svg%3E") center/contain no-repeat}
.lives i.gone{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21 3.5 12.6A5.2 5.2 0 0 1 12 6a5.2 5.2 0 0 1 8.5 6.6z' fill='%232F5A66'/%3E%3C/svg%3E")}
.felt{grid-area:felt;position:relative;min-height:0;margin:0 max(.4em,env(safe-area-inset-right)) max(.4em,env(safe-area-inset-bottom)) max(.4em,env(safe-area-inset-left))}
#board{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;-webkit-user-select:none;user-select:none;outline:none}

/* on-screen arrows (touch screens only): an upside-down T */
.pad{grid-area:pad;display:none;--k:min(66px,10vh);grid-template-columns:repeat(3,var(--k));grid-template-rows:repeat(2,var(--k));gap:6px;justify-content:center;align-content:center;
  padding:.2em 0 max(.6em,env(safe-area-inset-bottom))}
html.touch .pad{display:grid}
.pad button{border:1px solid var(--hair);border-radius:16px;background:rgba(255,255,255,.1);display:grid;place-items:center;padding:0;touch-action:none;-webkit-user-select:none;user-select:none}
.pad button svg{width:55%;height:55%;fill:none;stroke:#FEF9C3;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pad button.on{background:rgba(34,197,94,.45);transform:scale(.96)}
.key-up{grid-area:1/2}.key-left{grid-area:2/1}.key-down{grid-area:2/2}.key-right{grid-area:2/3}
html.touch .felt{margin-bottom:.2em}

/* a phone on its side: the bar down the left, arrows on the right */
@media (max-height:520px) and (min-aspect-ratio:1/1){
  #game{grid-template-rows:minmax(0,1fr);grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"bar felt pad"}
  .bar{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:.7em;width:8em;padding:max(.6em,env(safe-area-inset-top)) .4em .6em max(.6em,env(safe-area-inset-left))}
  .hud{width:100%}
  .hud-level{white-space:normal;text-align:center}
  .lives{justify-content:center;flex-wrap:wrap}
  .felt{margin:.4em .3em}
  .pad{--k:min(64px,24vh);padding:0 max(.6em,env(safe-area-inset-right)) 0 .2em}
}

/* cards */
.how{margin:0 0 .6em;padding-left:1.2em;display:flex;flex-direction:column;gap:.25em}
.big-score{text-align:center;font-size:2.4em;font-weight:900;margin:0;color:#FACC15;line-height:1.1}
.lv-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.45em}
.lv{min-height:52px;border-radius:12px;border:1px solid var(--hair);background:rgba(255,255,255,.07);color:var(--ink);font-weight:800;font-size:1.05em;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.2em 0;line-height:1.1}
.lv small{font-size:.62em;color:var(--ink-dim);font-weight:600}
.lv.cur{border-color:var(--brass);box-shadow:0 0 0 2px var(--brass) inset}
.lv:disabled{opacity:.4}
@media (max-height:520px){
  .card{padding:.9em 1.1em .8em}
  .card h2{margin-bottom:.35em;font-size:1.35em}
  .card .actions{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:.1em .5em;margin-top:.5em}
  .card .actions .pill{padding:.5em 1.6em}
  .big-score{font-size:1.8em}
  .lv{min-height:44px}
  .how{font-size:.9em}
}