/* Territory Paint: the kit's shell in a harbour-blue coat. */
:root{
  --lacquer:#16324F;--lacquer-hi:#1E4166;--ink:#F6F4EE;--ink-soft:#C9D6E3;--ink-dim:#8FA6BD;
  --hair:rgba(190,215,240,.26);--brass:#FFB23F;--brass-lo:#E8892A;--brass-hi:#FFD58A;--jade:#3DBE7A;
  --me:#FF6B4A;
  color-scheme:dark;
}
body{background:radial-gradient(120% 90% at 50% 0%,#24507A 0%,#16324F 55%,#0F2338 100%);color:var(--ink)}
.title{font-family:var(--sans);font-weight:900;color:#FFF6E8;text-shadow:0 3px 0 #C2412A,0 8px 22px rgba(0,0,0,.45);letter-spacing:-.01em}
.pill{font-family:var(--sans);color:#3A1A08;background:linear-gradient(180deg,#FFD58A,#FFB23F 50%,#E8892A);box-shadow:0 1px 0 #fff8 inset,0 4px 0 #A85A12,0 8px 18px rgba(0,0,0,.35)}
.pill:active{box-shadow:0 1px 0 #fff8 inset,0 2px 0 #A85A12,0 4px 10px rgba(0,0,0,.3)}
.link{color:var(--brass-hi);font-weight:600;min-height:44px}
.jewel{background:rgba(255,255,255,.1);border:1px solid var(--hair);box-shadow:0 2px 8px rgba(0,0,0,.25)}
.jewel svg{stroke:#FFF6E8}
.veil{background:rgba(8,20,34,.6)}
.card{background:linear-gradient(180deg,#22476E,#1A3756);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:#FFF6E8}
.card .x{color:#FFF6E8;border-color:var(--hair)}
.card .x svg{stroke:#FFF6E8}
.row{background:rgba(255,255,255,.07);border-color:var(--hair);min-height:52px;color:var(--ink)}
.toggle{background:#3A5878;border-color:transparent}
.toggle[aria-pressed=true]{background:var(--jade)}
.toggle::after{background:#fff}
.stats b{font-family:var(--sans);color:#FFF6E8}
.note{color:var(--ink-soft)}
.toast{background:#22476E;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(140px,36vmin,250px);height:auto;filter:drop-shadow(0 8px 14px rgba(0,0,0,.35))}
.home .title{font-size:clamp(2.3em,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,.08);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,34vh,200px)}
  .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:.7em;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:.2em;line-height:1.1;min-width:0}
.hud-level{font-size:.85em;font-weight:700;color:var(--ink-soft);letter-spacing:.04em}
.hud-pct{font-size:1.25em;font-weight:900;color:#FFF6E8;font-variant-numeric:tabular-nums}
.meter{position:relative;width:min(16em,100%);height:.7em;border-radius:999px;background:rgba(255,255,255,.14);overflow:visible}
.meter i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:linear-gradient(90deg,#FF8A6B,var(--me));transition:width .35s cubic-bezier(.3,1.4,.5,1)}
.meter.done i{background:linear-gradient(90deg,#7BE3A6,var(--jade))}
.clock{min-width:2.8em;text-align:right;font-size:1.5em;font-weight:900;color:#FFF6E8;font-variant-numeric:tabular-nums}
.clock.hurry{color:#FF8A6B;animation:hurry 1s infinite}
@keyframes hurry{50%{transform:scale(1.12)}}
.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:#FFF6E8;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pad button.on{background:rgba(255,107,74,.5);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 score 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:7.4em;padding:max(.6em,env(safe-area-inset-top)) .4em .6em max(.6em,env(safe-area-inset-left))}
  .meter{width:100%}
  .hud-pct{font-size:1.05em}
  .clock{text-align:center}
  .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:#FFB23F;line-height:1.1}
.ranks{display:flex;flex-wrap:wrap;justify-content:center;gap:.3em .9em;margin:.3em 0 0;padding:0;list-style:none;font-weight:700}
.ranks li{display:flex;align-items:center;gap:.35em}
.ranks i{width:.9em;height:.9em;border-radius:.25em;display:inline-block}
.lv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.45em}
.lv{min-height:52px;border-radius:12px;border:1px solid var(--hair);background:rgba(255,255,255,.08);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-grid{grid-template-columns:repeat(6,1fr)}
  .lv{min-height:44px}
  .how{font-size:.9em}
}