/* ===== Parkour Cat — pixel UI ===== */
:root{
  --line:#40263a;
  --gold:#ffcf4a;   --gold-d:#b9822a;
  --green:#8fce6a;  --green-d:#4f9a3f;
  --purple:#5b3f6e; --purple-d:#3a2748;
  --parch:#f6e4bd;  --parch-br:#d9bd86; --parch-tt:#7a4a2a;
  --heart:#ff5a7a;
  /* sprite data-URLs injected from JS */
  --spr-coin:none; --spr-gem:none; --spr-heart:none; --spr-heart-e:none;
  --spr-star:none; --spr-star-e:none; --spr-flag:none; --spr-cat:none;
  --backdrop:none;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; }
body{
  background:#1a1226;
  font-family:'Handjet',system-ui,sans-serif;
  color:var(--parch);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  -webkit-font-smoothing:none;
  user-select:none;
}
/* backdrop image (Higgsfield) behind the arcade cabinet */
body::before{
  content:""; position:fixed; inset:0;
  background:radial-gradient(120% 120% at 50% 30%, #2a1d3a 0%, #150e20 70%, #0c0812 100%);
  background-image:var(--backdrop);
  background-size:cover; background-position:center;
  image-rendering:pixelated;
  filter:brightness(.42) saturate(.9);
  z-index:-2;
}
body::after{
  content:""; position:fixed; inset:0;
  background:radial-gradient(110% 90% at 50% 45%, transparent 40%, rgba(8,5,14,.75) 100%);
  z-index:-1;
}

#app{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:16px; }
#stage{
  position:relative;
  width:min(96vw, calc(94vh * 16 / 9));
  aspect-ratio:16 / 9;
  border:6px solid var(--line);
  box-shadow:0 0 0 4px #6b4a33, 0 18px 0 0 rgba(0,0,0,.35), 0 0 60px rgba(0,0,0,.6);
  background:#20163a;
  image-rendering:pixelated;
  touch-action:manipulation;          /* kill 300ms tap delay / double-tap zoom on mobile */
}
#c{ touch-action:manipulation; }
#c{
  position:absolute; inset:0; width:100%; height:100%;
  image-rendering:pixelated; display:block;
  object-fit:contain;   /* W adapts to fill; contain avoids distortion at extreme aspect ratios */
}
#screens{ position:absolute; inset:0; pointer-events:none; }
/* only interactive controls capture clicks; play-area taps fall through to the canvas (jump) */
.btn, .node, .btn-icon, .seg button, .blk, .toggle, .parch-panel, .col{ pointer-events:auto; }
.overlay{ pointer-events:auto; }

/* ---- generic screen ---- */
.screen{
  position:absolute; inset:0;
  display:none;
  align-items:center; justify-content:center;
  text-align:center;
}
.screen.on{ display:flex; }
.overlay{ background:rgba(20,12,32,.62); backdrop-filter:blur(1px); }
.layer{ position:absolute; inset:0; display:none; pointer-events:none; }
.layer.on{ display:block; }

/* ---- CRT overlays ---- */
.fx{ position:absolute; inset:0; pointer-events:none; z-index:40; }
#scanlines{
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 4px);
  opacity:.5;
}
#vignette{ box-shadow:inset 0 0 60px 12px rgba(20,10,30,.55), inset 0 0 18px rgba(0,0,0,.4); }

/* ---- pixel buttons ---- */
.btn{
  font-family:'Handjet'; font-weight:700;
  font-size:clamp(15px,2.5vw,27px); line-height:1;
  letter-spacing:.5px;
  color:var(--line);
  background:var(--gold);
  --lip:var(--gold-d);
  border:4px solid var(--line);
  padding:.5em .95em .55em;
  cursor:pointer;
  position:relative;
  box-shadow:0 6px 0 0 var(--lip), 0 6px 0 4px var(--line);
  transition:transform .04s, box-shadow .04s;
  text-transform:uppercase;
  image-rendering:pixelated;
}
.btn:active,.btn.press{ transform:translateY(6px); box-shadow:0 0 0 4px var(--line); }
.btn.gold{ background:var(--gold); --lip:var(--gold-d); }
.btn.green{ background:var(--green); --lip:var(--green-d); }
.btn.purple{ background:var(--purple); color:var(--parch); --lip:var(--purple-d); }
.btn.parch{ background:var(--parch); --lip:var(--parch-br); }
.btn.big{ font-size:clamp(20px,3.6vw,40px); padding:.5em 1.4em .55em; }
.btn:disabled{ opacity:.4; cursor:not-allowed; }

/* ---- icons via sprites ---- */
.ic{ display:inline-block; image-rendering:pixelated; background-repeat:no-repeat; background-size:contain; background-position:center; vertical-align:middle; }
.ic-coin{ width:1.1em;height:1.1em; background-image:var(--spr-coin); }
.ic-gem{  width:1.1em;height:1.1em; background-image:var(--spr-gem); }
.ic-star{ width:1em;height:1em; background-image:var(--spr-star); }
.ic-flag{ width:1.2em;height:1.2em; background-image:var(--spr-flag); }

/* ================= MENU ================= */
.menu-wrap{
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(6px,1.4vh,16px);
  padding:3% 4%;
}
.menu-hero{ display:contents; }   /* transparent on desktop -> body.web layout unchanged */
.logo{
  font-family:'Press Start 2P';
  font-size:clamp(18px,4.4vw,50px); line-height:1.1;
  color:var(--gold);
  text-shadow:4px 4px 0 var(--line), 8px 8px 0 rgba(0,0,0,.3);
  letter-spacing:1px;
}
.logo span{ color:#ff9bb4; margin-left:.4em; }
.menu-cat{
  width:clamp(96px,15vw,168px); aspect-ratio:24/20;
  background-image:var(--spr-cat);
  background-size:contain; background-repeat:no-repeat; background-position:center bottom;
  image-rendering:pixelated;
  animation:bob 1.5s ease-in-out infinite;
  filter:drop-shadow(0 6px 0 rgba(0,0,0,.28));
}
@keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7%) } }
.tagline{
  font-size:clamp(15px,2.3vw,26px); font-weight:600;
  color:var(--parch); text-shadow:2px 2px 0 var(--line);
}
.menu-btns{ display:flex; flex-direction:column; gap:clamp(10px,1.6vh,16px); align-items:center; margin-top:.4em; }
.menu-foot{
  position:absolute; top:14px; right:16px;
  display:flex; gap:14px; font-size:clamp(14px,1.9vw,22px); font-weight:600;
  color:var(--parch); text-shadow:1px 1px 0 var(--line);
}
.menu-foot .stat{ display:flex; align-items:center; gap:.3em; background:rgba(20,12,32,.5); border:3px solid var(--line); padding:.15em .5em; }
.hint{
  position:absolute; bottom:12px; left:0; right:0;
  font-size:clamp(12px,1.7vw,19px); color:#e9cfa0; opacity:.9;
  text-shadow:1px 1px 0 var(--line);
}

/* ================= LEVEL SELECT ================= */
.lv-head{
  position:absolute; top:12px; left:0; right:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Press Start 2P'; font-size:clamp(12px,2.2vw,24px);
  color:var(--gold); text-shadow:3px 3px 0 var(--line);
}
#s-levels .back{ position:absolute; top:12px; left:14px; }
.lv-map{ position:absolute; inset:0; }
.lv-map svg{ position:absolute; inset:0; width:100%; height:100%; }
.node{
  position:absolute; transform:translate(-50%,-50%);
  width:clamp(40px,6.4vw,72px); aspect-ratio:1;
  display:flex; align-items:center; justify-content:center;
  border:4px solid var(--line);
  background:#6b6472; color:var(--line);
  font-family:'Press Start 2P'; font-size:clamp(10px,1.7vw,18px);
  cursor:pointer;
  box-shadow:0 5px 0 0 rgba(0,0,0,.35), inset 0 0 0 3px rgba(255,255,255,.12);
  image-rendering:pixelated;
}
.node.locked{ background:#5a5563; color:#3a3540; cursor:not-allowed; }
.node.passed{ background:var(--green); box-shadow:0 5px 0 0 var(--green-d), inset 0 0 0 3px rgba(255,255,255,.18); }
.node.current{ background:var(--gold); box-shadow:0 5px 0 0 var(--gold-d), inset 0 0 0 3px rgba(255,255,255,.25); animation:pulse 1.1s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ filter:drop-shadow(0 0 0 var(--gold)) } 50%{ filter:drop-shadow(0 0 7px var(--gold)) } }
.node .lock{ width:52%; height:52%; position:relative; }
.node .lock::before{ content:""; position:absolute; left:18%; right:18%; bottom:0; height:52%; background:#3a3540; border:2px solid var(--line); }
.node .lock::after{ content:""; position:absolute; left:30%; right:30%; top:2%; height:46%; border:3px solid var(--line); border-bottom:none; border-radius:40% 40% 0 0; }
.node-stars{
  position:absolute; left:50%; top:-22%; transform:translateX(-50%);
  display:flex; gap:2px;
}
.node-stars .ic{ width:clamp(11px,1.6vw,18px); height:clamp(11px,1.6vw,18px); }

/* ================= HUD ================= */
#hud .hud-top{
  position:absolute; top:8px; left:10px; right:10px;
  display:flex; align-items:flex-start; justify-content:space-between;
}
.hud-left{ display:flex; flex-direction:column; gap:5px; }
.hearts{ display:flex; gap:3px; }
.hearts i{ width:clamp(16px,2.4vw,26px); height:clamp(15px,2.2vw,24px); background-image:var(--spr-heart); background-size:contain; background-repeat:no-repeat; image-rendering:pixelated; }
.hearts i.empty{ background-image:var(--spr-heart-e); }
.hud-coins{ display:flex; align-items:center; gap:4px; font-size:clamp(15px,2vw,24px); font-weight:700; color:#fff; text-shadow:2px 2px 0 var(--line); }
.hud-coins .ic{ width:1em; height:1em; }
.hud-combo{ font-family:'Press Start 2P'; font-size:clamp(9px,1.3vw,15px); color:var(--gold); text-shadow:1px 1px 0 var(--line); margin-left:5px; opacity:0; display:inline-block; }
.hud-combo.on{ opacity:1; }
.hud-combo.bump{ animation:combobump .3s ease-out; }
@keyframes combobump{ 0%{ transform:scale(1.6) } 100%{ transform:scale(1) } }
.hud-mid{ text-align:center; margin-top:2px; }
.hud-score{ font-family:'Press Start 2P'; font-size:clamp(12px,1.9vw,22px); color:#fff; text-shadow:2px 2px 0 var(--line); }
.hud-level{ font-size:clamp(13px,1.8vw,21px); font-weight:600; color:var(--gold); text-shadow:1px 1px 0 var(--line); margin-top:2px; }
.hud-right{ pointer-events:auto; }
.btn-icon{
  width:clamp(30px,4.2vw,46px); aspect-ratio:1; cursor:pointer;
  background:var(--purple); border:4px solid var(--line);
  box-shadow:0 4px 0 0 var(--purple-d), 0 4px 0 4px var(--line);
  display:flex; align-items:center; justify-content:center;
}
.btn-icon:active{ transform:translateY(4px); box-shadow:0 0 0 4px var(--line); }
.ic-pause{ display:flex; gap:4px; }
.ic-pause::before,.ic-pause::after{ content:""; width:clamp(5px,.8vw,8px); height:clamp(14px,2vw,22px); background:var(--parch); }
.hud-progress{
  position:absolute; top:44px; left:50%; transform:translateX(-50%);
  width:44%; height:clamp(10px,1.5vw,16px);
  border:3px solid var(--line); background:rgba(20,12,32,.55);
  display:flex; align-items:center;
}
.hud-progress .bar{ height:100%; width:0%; background:linear-gradient(180deg, var(--gold) 55%, var(--gold-d) 55%); }
.hud-progress .ic-flag{ position:absolute; right:-14px; top:50%; transform:translateY(-50%); width:clamp(14px,2vw,22px); height:clamp(16px,2.4vw,26px); }
.hud-hint{
  position:absolute; bottom:10px; left:0; right:0;
  font-size:clamp(12px,1.7vw,19px); color:#f4dfae; text-shadow:1px 1px 0 var(--line);
  transition:opacity .6s; opacity:.95;
}
.hud-hint.hide{ opacity:0; }
.hud-count{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Press Start 2P'; font-size:clamp(34px,7vw,84px);
  color:var(--gold); text-shadow:4px 4px 0 var(--line);
  pointer-events:none;
}
.hud-count span{ animation:pop .4s ease-out; display:block; }
@keyframes pop{ 0%{ transform:scale(.3); opacity:0 } 60%{ transform:scale(1.15) } 100%{ transform:scale(1); opacity:1 } }

/* ================= PAUSE / RESULTS ================= */
.panel-title{
  font-family:'Press Start 2P'; font-size:clamp(16px,3vw,34px);
  color:var(--gold); text-shadow:3px 3px 0 var(--line); margin-bottom:.7em;
}
.panel-title.bad{ color:#ff7a94; }
.col{ display:flex; flex-direction:column; align-items:center; gap:clamp(9px,1.5vh,15px); }
.row{ display:flex; gap:clamp(9px,1.4vw,15px); flex-wrap:wrap; justify-content:center; }
.stars-big{ display:flex; gap:clamp(6px,1.4vw,16px); margin-bottom:.4em; }
.stars-big .ic{ width:clamp(34px,6vw,64px); height:clamp(34px,6vw,64px); transform:scale(0); }
.stars-big .ic.show{ animation:starpop .45s cubic-bezier(.2,1.4,.5,1) forwards; }
@keyframes starpop{ to{ transform:scale(1) } }
.result-stats{ display:flex; flex-direction:column; gap:4px; font-size:clamp(16px,2.2vw,26px); font-weight:600; color:var(--parch); text-shadow:1px 1px 0 var(--line); margin-bottom:.3em; }
.result-stats b{ color:var(--gold); }
.result-stats .bonus{ color:var(--green); }
.result-hint{ font-size:clamp(13px,1.8vw,20px); font-weight:600; color:#f4dfae; opacity:.92; text-shadow:1px 1px 0 var(--line); margin-top:-.2em; }
.record-badge{ font-family:'Press Start 2P'; font-size:clamp(9px,1.5vw,15px); color:var(--line); background:var(--gold); border:3px solid var(--line); padding:.35em .6em; box-shadow:0 4px 0 0 var(--gold-d); animation:combobump .4s ease-out; }

/* ================= SETTINGS (parchment) ================= */
.parch-panel{
  width:min(84%,560px); max-height:88%;
  background:var(--parch);
  border:5px solid var(--parch-br);
  box-shadow:0 0 0 5px var(--line), 0 14px 0 0 rgba(0,0,0,.35);
  color:var(--parch-tt);
  padding:clamp(12px,2.4vw,24px);
  overflow:auto;
  text-align:left;
}
.parch-panel h2{
  font-family:'Press Start 2P'; font-size:clamp(13px,2.2vw,22px);
  text-align:center; color:var(--parch-tt); margin-bottom:.8em; letter-spacing:1px;
}
.set-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:clamp(7px,1.3vh,13px) 0; flex-wrap:wrap; }
.set-label{ font-size:clamp(15px,2vw,23px); font-weight:700; color:var(--parch-tt); }
.seg{ display:flex; border:3px solid var(--line); background:#e7cf9c; }
.seg button{
  font-family:'Handjet'; font-weight:700; font-size:clamp(13px,1.7vw,20px);
  padding:.28em .7em; border:none; border-right:3px solid var(--line);
  background:transparent; color:var(--parch-tt); cursor:pointer; line-height:1;
}
.seg button:last-child{ border-right:none; }
.seg button.sel{ background:var(--parch-tt); color:var(--parch); }
.blocks{ display:flex; gap:4px; }
.blocks .blk{
  width:clamp(16px,2.4vw,26px); height:clamp(18px,2.6vw,28px);
  border:3px solid var(--line); background:#e7cf9c; cursor:pointer;
}
.blocks .blk.on{ background:var(--parch-tt); }
.toggle{
  width:clamp(52px,7vw,72px); height:clamp(26px,3.6vw,36px);
  border:3px solid var(--line); background:#d8bf8a; cursor:pointer; position:relative;
}
.toggle .knob{ position:absolute; top:2px; left:2px; width:44%; height:calc(100% - 4px); background:var(--parch-tt); transition:left .1s; }
.toggle.on{ background:var(--green); }
.toggle.on .knob{ left:calc(56% - 2px); background:var(--parch); }
.set-controls{ font-size:clamp(13px,1.7vw,19px); font-weight:600; line-height:1.5; background:#efdcb0; border:3px dashed var(--parch-br); padding:.5em .7em; }
.set-foot{ display:flex; gap:10px; justify-content:space-between; margin-top:1em; flex-wrap:wrap; }
.hr{ height:3px; background:var(--parch-br); margin:.5em 0; }

/* ================= TELEGRAM MINI APP ================= */
html,body{ overscroll-behavior:none; }
#c{ touch-action:none; }
.menu-greet{ font-size:clamp(13px,1.9vw,20px); font-weight:700; color:var(--gold); text-shadow:1px 1px 0 var(--line); }

/* fill the whole Telegram viewport edge-to-edge (canvas width adapts so there's no distortion) */
body.tg #app{ padding:0; }
/* menu: pinned coins/record bar at top, hero content centered in the space below (can't collide) */
body.tg .menu-wrap{
  justify-content:flex-start; gap:clamp(3px,1vh,12px);
  padding-top:    calc(var(--tg-top, 0px) + 6px);
  padding-bottom: calc(var(--tg-bottom, 0px) + 6px);
  padding-left:   calc(var(--tg-left, 0px) + 4%);
  padding-right:  calc(var(--tg-right, 0px) + 4%);
}
body.tg .menu-hero{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  flex:1 1 auto; min-height:0; width:100%; gap:clamp(3px,1vh,12px);
}
body.tg .logo{ white-space:nowrap; }
body.tg .menu-cat{ width:clamp(60px,10vw,124px); max-height:23vh; }
body.tg .logo{ font-size:clamp(20px,4vw,44px); }
body.tg .tagline{ font-size:clamp(13px,2vw,22px); }
body.tg #stage{
  width:100vw;
  height:var(--tg-vh, 100vh);
  aspect-ratio:auto;
  border:none;
  box-shadow:none;
}
/* push DOM chrome clear of the Telegram header / hardware notch (summed insets) */
body.tg #hud .hud-top{ top: calc(6px + var(--tg-top, 0px)); left: calc(10px + var(--tg-left,0px)); right: calc(10px + var(--tg-right,0px)); }
body.tg .hud-score{ font-size:clamp(12px,1.7vw,20px); }
body.tg .hud-level{ font-size:clamp(11px,1.5vw,18px); margin-top:1px; }
body.tg .hud-progress{ top: calc(64px + var(--tg-top, 0px)); width:46%; }
body.tg #hud .hud-top{ gap:8px; }
body.tg .hud-left, body.tg .hud-right{ flex:0 0 auto; }
body.tg .hud-mid{ flex:1 1 auto; min-width:0; }
body.tg .hud-level{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
body.tg .hud-hint{ bottom: calc(10px + var(--tg-bottom, 0px)); }
/* ---- buttons: crisp integer 3D lip + 44px tap targets on phone ---- */
body.tg .btn{
  font-size:clamp(14px,2.3vw,22px); min-height:44px; line-height:1;
  padding:.2em .9em; display:inline-flex; align-items:center; justify-content:center;
  border-width:3px; box-shadow:0 4px 0 0 var(--lip), 0 4px 0 3px var(--line);
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
body.tg .btn.big{ font-size:clamp(17px,3vw,30px); min-height:50px; padding:.2em 1.1em; }
body.tg .btn:active, body.tg .btn.press{ transform:translateY(4px); box-shadow:0 0 0 3px var(--line); }
body.tg .btn-icon{ width:44px; height:44px; }
body.tg .menu-btns{ width:min(62vw,260px); gap:10px; }
body.tg .menu-btns .btn{ width:100%; }
/* coins/record: pinned in-flow top bar on phone -> can NEVER overlap the logo, any TG mode/aspect/inset */
body.tg .menu-foot{
  position:static; top:auto; right:auto; left:auto; margin:0 0 clamp(2px,1vh,8px);
  align-self:stretch; width:100%; justify-content:flex-end; gap:8px; flex-wrap:nowrap;
  font-size:clamp(12px,1.7vw,20px);
}
body.tg .menu-foot .stat{ white-space:nowrap; }
body.tg .hint{ bottom: calc(12px + var(--tg-bottom, 0px)); }
body.tg #s-levels .back{ top: calc(12px + var(--tg-top, 0px)); left: calc(14px + var(--tg-left,0px)); }
body.tg .lv-head{
  top:   calc(12px + var(--tg-top, 0px));
  left:  calc(var(--tg-left, 0px)  + 92px);
  right: calc(var(--tg-right, 0px) + 92px);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---- overlays (pause / results / settings): safe-area padded, scroll instead of clip, center when they fit ---- */
body.tg #s-pause, body.tg #s-results, body.tg #s-settings{
  pointer-events:auto;
  flex-direction:column; align-items:center; justify-content:flex-start;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-y;
  padding:
    calc(var(--tg-top,0px) + 8px) calc(var(--tg-right,0px) + 10px)
    calc(var(--tg-bottom,0px) + 8px) calc(var(--tg-left,0px) + 10px);
}
body.tg #s-pause > .col, body.tg #s-results > .col, body.tg #s-settings > .parch-panel{ margin:auto; }

/* pause: 2x2 equal-width grid, tidy edge */
body.tg #s-pause > .col{ display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; width:min(74vw,330px); padding-bottom:6px; }
body.tg #s-pause .panel-title{ grid-column:1 / -1; margin-bottom:.1em; text-align:center; }
body.tg #s-pause .btn{ width:100%; margin:0; }

/* results: compact, one even action row */
body.tg #s-results > .col{ width:min(94vw,540px); gap:clamp(4px,1.1vh,10px); padding-bottom:6px; }
body.tg #s-results .panel-title{ font-size:clamp(15px,2.7vw,26px); margin-bottom:.15em; }
body.tg #s-results .record-badge{ font-size:clamp(8px,1.4vw,13px); padding:.3em .5em; }
body.tg #s-results .stars-big{ gap:clamp(5px,1.1vw,10px); margin-bottom:.1em; }
body.tg #s-results .stars-big .ic{ width:clamp(26px,4vw,44px); height:clamp(26px,4vw,44px); }
body.tg #s-results .result-hint{ margin:0; }
body.tg #s-results .result-stats{ flex-direction:row; flex-wrap:wrap; justify-content:center; gap:1px 12px; font-size:clamp(12px,1.8vw,20px); margin-bottom:.1em; }
body.tg #s-results .row{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:8px; width:100%; }
body.tg #s-results .row .btn{ width:100%; }

/* ---- settings: pinned title + footer, only the 2-column body scrolls ---- */
body.tg .parch-panel{
  width:min(96vw,540px); max-height:100%;
  display:flex; flex-direction:column; overflow:hidden;
  padding:clamp(9px,1.8vw,16px);
}
body.tg .parch-panel h2{ font-size:clamp(13px,2vw,20px); margin-bottom:.4em; }
body.tg .set-body{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch; touch-action:pan-y; overscroll-behavior:contain;
  display:grid; grid-template-columns:1fr 1fr; align-content:start;
  gap:clamp(4px,1.1vh,9px) clamp(10px,2.2vw,20px); padding-right:4px;
}
body.tg .set-body .hr{ display:none; }
body.tg .set-body > .set-controls, body.tg .set-body > .set-row.wide{ grid-column:1 / -1; }
body.tg .set-row{ margin:0; min-width:0; flex-wrap:nowrap; gap:6px; }
body.tg .set-label{ font-size:clamp(12px,1.7vw,18px); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.tg .seg{ flex:0 0 auto; }
body.tg .seg button{ font-size:clamp(11px,1.5vw,16px); padding:.24em .46em; }
body.tg .set-controls{ font-size:clamp(11px,1.5vw,16px); line-height:1.35; padding:.35em .55em; }
body.tg .set-foot{ flex-wrap:nowrap; gap:8px; margin-top:.5em; padding-bottom:2px; }
body.tg .set-foot .btn{ flex:1 1 0; min-width:0; }

/* ---- level-select map: inset below header, size to short edge so nodes never collide ---- */
body.tg .lv-map{
  top: calc(var(--tg-top,0px) + 52px); bottom: calc(var(--tg-bottom,0px) + 8px);
  left: calc(var(--tg-left,0px) + 10px); right: calc(var(--tg-right,0px) + 10px);
}
body.tg .node{ width:clamp(30px,9vmin,52px); font-size:clamp(9px,3.2vmin,15px); }
body.tg .node-stars .ic{ width:clamp(8px,2.2vmin,13px); height:clamp(8px,2.2vmin,13px); }

/* ---- very short landscape phones ---- */
@media (max-height:430px){
  body.tg .menu-wrap{ gap:clamp(2px,.7vh,6px); }
  body.tg .menu-cat{ max-height:18vh; }
  body.tg .logo{ font-size:clamp(16px,3.2vw,30px); }
  body.tg .tagline{ font-size:clamp(11px,1.8vw,18px); }
  body.tg .menu-foot{ font-size:clamp(11px,1.5vw,15px); }
}
@media (max-height:380px){ body.tg .menu-greet{ display:none; } }
@media (max-height:350px){
  body.tg .menu-cat{ display:none; }   /* drop mascot before Play is clipped */
  body.tg .hint{ display:none; }
}

/* rotate-your-phone overlay — only touch devices in portrait */
#rotate{
  position:fixed; inset:0; z-index:100; display:none;
  flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:#0e0e12; color:var(--parch); text-align:center; padding:24px; cursor:pointer;
}
#rotate .rotate-txt{ font-family:'Handjet'; font-weight:700; font-size:clamp(18px,6vw,30px); text-shadow:2px 2px 0 var(--line); }
#rotate .rotate-hint{ font-family:'Handjet'; font-weight:600; font-size:clamp(13px,3.6vw,18px); color:#e9cfa0; opacity:.85; }
#rotate svg{ animation:rotdev 2.2s ease-in-out infinite; image-rendering:auto; }
@keyframes rotdev{ 0%,45%{ transform:rotate(0) } 70%,100%{ transform:rotate(-90deg) } }
@media (orientation:portrait) and (pointer:coarse){ #rotate{ display:flex; } }