/* Tower Race — shell + screens. Sky/metal theme. */
:root{
  --sky:#9fd0ff; --metal:#c2ccd8; --metal-dark:#6f7c8c;
  --pink:#ff5fa2; --pink-dark:#c23b78; --purple:#9a6cff;
  --gold:#ffcf5c; --gold-dark:#d99b22; --ink:#22324a;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; height:100%; overflow:hidden; background:#0d2230;
  font-family:"Fredoka","Baloo 2","Comic Sans MS","Segoe UI",system-ui,sans-serif; color:var(--ink);
  user-select:none; -webkit-user-select:none; touch-action:manipulation; }
#stage{ position:fixed; inset:0; overflow:hidden; background:var(--sky); }
#game{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }

/* HUD */
#hud{ position:absolute; left:0; right:0; top:0; z-index:40; display:flex; justify-content:center; align-items:center;
  gap:10px; padding:52px 10px 6px; pointer-events:none; flex-wrap:wrap; }
#hud[hidden]{ display:none; }
.pill{ background:rgba(255,255,255,.9); border:3px solid var(--metal-dark); border-radius:999px; padding:3px 14px;
  font-weight:800; font-size:17px; color:var(--ink); box-shadow:0 3px 0 var(--metal-dark); display:flex; align-items:center; gap:5px; }

/* Screens */
.screen{ position:absolute; inset:0; z-index:100; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; padding:24px; text-align:center; }
.screen[hidden]{ display:none; }

/* Title */
#intro{ background:#bfe2ff url("./assets/title.webp") center top / cover no-repeat; }
#intro::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(10,40,75,.28) 0%, rgba(10,40,75,.05) 30%, rgba(10,40,75,.0) 55%, rgba(10,40,75,.28)); z-index:1; }
/* real title art replaces the old CSS tower decoration */
.tower-deco{ display:none; }
#title-text{ position:relative; z-index:2; margin-top:-4vh; }
#title-text .t1{ display:block; font-size:clamp(42px,13vw,92px); font-weight:800; color:#fff; letter-spacing:2px; line-height:.92;
  text-shadow:-3px 0 0 var(--pink-dark),3px 0 0 var(--pink-dark),0 -3px 0 var(--pink-dark),0 3px 0 var(--pink-dark),0 8px 18px rgba(0,0,0,.4); }
#title-text .t2{ display:block; font-size:clamp(16px,4.4vw,26px); font-weight:700; color:#fff; margin-top:8px; text-shadow:0 2px 6px rgba(0,0,0,.5); }
.title-actions{ position:relative; z-index:2; }
.wood-btn{ font-family:inherit; font-weight:800; cursor:pointer; font-size:clamp(20px,5vw,28px); color:#5b3a17; padding:14px 38px; border:none; border-radius:18px;
  background:linear-gradient(#ffe39a,var(--gold)); box-shadow:0 6px 0 var(--gold-dark),0 10px 18px rgba(0,0,0,.3); transition:transform .08s ease, box-shadow .08s ease; }
.wood-btn:active{ transform:translateY(4px); box-shadow:0 2px 0 var(--gold-dark); }
.wood-btn:disabled{ filter:grayscale(.5) brightness(.95); cursor:default; }

/* Picker */
#select{ background:linear-gradient(160deg,#cfe6ff,#b6c8ff); }
#select h2{ font-size:clamp(24px,6vw,34px); color:var(--pink-dark); margin:0; text-shadow:0 2px 0 #fff; }
.sub-line{ color:#3a4a66; font-weight:700; margin-top:-8px; font-size:clamp(14px,3.6vw,18px); }
.cards{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.pcard{ width:clamp(96px,26vw,140px); background:#fff; border:4px solid #fff; border-radius:20px; padding:10px 8px 12px; cursor:pointer;
  box-shadow:0 6px 0 rgba(0,0,0,.12); transition:transform .1s ease, border-color .1s ease; }
.pcard img{ width:100%; height:120px; object-fit:contain; }
.pcard .nm{ font-weight:800; margin-top:4px; font-size:16px; color:var(--ink); }
.pcard.sel{ border-color:var(--pink); transform:translateY(-6px) scale(1.04); box-shadow:0 10px 0 rgba(255,95,162,.35); }

/* Game over */
#over{ background:rgba(12,30,60,.66); color:#fff; }
#over h2{ font-size:clamp(26px,8vw,44px); margin:0; text-shadow:0 3px 0 rgba(0,0,0,.3); }
#over .big{ font-size:clamp(44px,14vw,72px); font-weight:800; color:var(--gold); text-shadow:0 3px 0 var(--gold-dark); }
#over .sub{ font-size:18px; opacity:.95; }
.over-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.over-actions .wood-btn{ font-size:clamp(16px,4.4vw,22px); padding:12px 24px; }

/* Level map */
#map{ background:linear-gradient(160deg,#cfe6ff,#d7c4ff); justify-content:flex-start; overflow-y:auto; padding-top:64px; }
#map h2{ font-size:clamp(24px,6vw,34px); color:var(--pink-dark); margin:0; text-shadow:0 2px 0 #fff; }
.level-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; width:100%; max-width:640px; }
.level-node{ font-family:inherit; cursor:pointer; border:none; border-radius:18px; padding:12px 8px; color:var(--ink);
  background:#fff; box-shadow:0 5px 0 rgba(0,0,0,.14); display:flex; flex-direction:column; align-items:center; gap:2px;
  position:relative; transition:transform .08s ease; }
.level-node:active{ transform:translateY(3px); }
.level-node .ln-emoji{ font-size:34px; line-height:1; }
.level-node .ln-num{ font-weight:800; font-size:13px; color:var(--pink-dark); }
.level-node .ln-name{ font-weight:700; font-size:12px; color:#3a4a66; }
.level-node .ln-badge{ position:absolute; top:6px; right:8px; font-size:14px; }
.level-node.locked{ background:#dfe6ef; color:#9aa6b4; cursor:default; box-shadow:0 5px 0 rgba(0,0,0,.08); filter:grayscale(.5); }
.level-node.unlocked{ box-shadow:0 5px 0 var(--pink-dark); outline:3px solid var(--pink); animation:lnPulse 1.4s ease-in-out infinite; }
.level-node.done{ background:#eafae9; box-shadow:0 5px 0 #6fbf73; }
@keyframes lnPulse{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-3px);} }

/* MP intermission (shop-free results between levels) */
#interm{ background:rgba(12,30,60,.72); color:#fff; }
#interm h2{ font-size:clamp(24px,7vw,40px); margin:0; }
.interm-list{ list-style:none; padding:0; margin:6px 0; display:flex; flex-direction:column; gap:8px; min-width:220px; }
.interm-list li{ display:flex; align-items:center; gap:10px; justify-content:center; font-weight:800; font-size:18px;
  background:rgba(255,255,255,.12); border-radius:12px; padding:8px 14px; }

/* Toast (level-ups) */
#toast{ position:absolute; left:50%; top:30%; transform:translate(-50%,-50%); z-index:60; pointer-events:none;
  font-size:clamp(28px,8vw,52px); font-weight:800; color:#fff; opacity:0;
  text-shadow:0 3px 0 var(--pink-dark),0 0 24px rgba(255,220,120,.9); }
#toast.show{ animation:pop 1.3s ease-out forwards; }
@keyframes pop{ 0%{opacity:0;transform:translate(-50%,-50%) scale(.4);} 18%{opacity:1;transform:translate(-50%,-50%) scale(1.12);}
  78%{opacity:1;} 100%{opacity:0;transform:translate(-50%,-62%) scale(1);} }

/* Controls: LEFT/RIGHT pair bottom-left, big JUMP bottom-right */
#controls{ position:absolute; left:0; right:0; bottom:0; z-index:40;
  padding:14px 14px calc(16px + env(safe-area-inset-bottom));
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px; pointer-events:none; }
#controls[hidden]{ display:none; }
#controls > *{ pointer-events:auto; }
.move-pair{ display:flex; gap:14px; }
.bigb{ font-family:inherit; font-weight:900; cursor:pointer; border:none; padding:0;
  width:96px; height:96px; border-radius:26px; font-size:48px; color:#fff;
  display:flex; align-items:center; justify-content:center;
  touch-action:none; -webkit-user-select:none; user-select:none;
  transition:transform .06s ease, box-shadow .06s ease; }
.bigb.move{ background:linear-gradient(180deg,#7fb6ff 0%,#3f7fd6 100%);
  box-shadow:0 9px 0 #2a5fa6,0 12px 20px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.5); }
.bigb.move:active,.bigb.move.held{ transform:translateY(6px); box-shadow:0 3px 0 #2a5fa6,0 6px 12px rgba(0,0,0,.3); }
.bigb.jump{ width:120px; height:120px; border-radius:50%; font-size:30px; color:#5b3a17;
  background:radial-gradient(circle at 30% 30%, #fff6cf 0%, #ffd86a 45%, #d99b22 100%);
  box-shadow:0 9px 0 #a07212,0 12px 22px rgba(0,0,0,.35), inset 0 -6px 0 rgba(0,0,0,.1);
  display:flex; flex-direction:column; gap:2px; line-height:1; }
.bigb.jump .ico{ font-size:34px; } .bigb.jump .lbl{ font-size:15px; letter-spacing:1px; }
.bigb.jump:active,.bigb.jump.held{ transform:translateY(6px); box-shadow:0 2px 0 #a07212,0 6px 14px rgba(0,0,0,.3); }

@media (max-width:380px){
  .bigb{ width:82px; height:82px; font-size:40px; }
  .bigb.jump{ width:104px; height:104px; }
}

.game-version{ position:fixed; bottom:2px; right:4px; font-size:10px; opacity:.5; color:#fff; pointer-events:none; z-index:99999; text-shadow:0 1px 1px rgba(0,0,0,.5); }