:root {
  --stone1: #d9c69a; --stone2: #a8946a; --stone3: #8d7a52;
  --bronze: #4a3c22; --bronze2: #5b4a26; --amber: #ffb84d;
  --ink: #e8dcc0; --slab1: #2a2415; --slab2: #17130a;
  --panel: rgba(16, 21, 27, 0.9);
  --paper: #eef2f4;
  --muted: #98a8b0;
  --yuzu: #ffcf3f;
  --onsen: #2fd6c3;
  --ember: #ff7a45;
  --display: 'Baloo 2', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: #070905; margin: 0; }
body { font-family: var(--mono); color: var(--paper); -webkit-user-select: none; user-select: none; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#overlay { position: fixed; inset: 0; pointer-events: none; }
#overlay > * { pointer-events: auto; }

.editor {
  position: absolute; top: 14px; left: 14px; width: 268px; max-height: calc(100vh - 28px);
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 14px; background: var(--panel);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45); backdrop-filter: blur(7px);
}
.editor-head { padding: 14px 16px 10px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.editor-title { font-family: var(--display); font-weight: 800; font-size: 19px; color: var(--yuzu); letter-spacing: 1px; }
.editor-sub { font-size: 10px; color: var(--muted); margin-top: 2px; }
.editor-body { overflow-y: auto; padding: 6px; }

.sec { border-radius: 10px; margin: 6px 4px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06); }
.sec-head { display: flex; justify-content: space-between; align-items: center; padding: 9px 11px; cursor: pointer; }
.sec-title-wrap { display: flex; align-items: center; gap: 8px; }
.sec-title { font-family: var(--display); font-weight: 700; font-size: 13px; color: var(--paper); text-transform: uppercase; letter-spacing: 0.5px; }
.sec-key { font-size: 10px; color: var(--onsen); border: 1px solid rgba(47,214,195,0.35); border-radius: 5px; padding: 1px 5px; }
.sec-body { padding: 4px 11px 11px; display: flex; flex-direction: column; gap: 7px; }

.ctrl { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.ctrl-label { flex: 0 0 84px; color: var(--muted); }
.ctrl-range { flex: 1; accent-color: var(--yuzu); }
.ctrl-val { flex: 0 0 30px; text-align: right; color: var(--paper); }
.ctrl-num { width: 100%; background: rgba(0,0,0,0.3); color: var(--paper); border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; padding: 4px 6px; font-family: var(--mono); font-size: 11px; }
.ctrl-color { width: 38px; height: 22px; padding: 0; border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; background: none; }
.ctrl-toggle { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--paper); cursor: pointer; }
.ctrl-toggle input { accent-color: var(--onsen); }
.ctrl-btn { font-family: var(--mono); font-size: 11px; cursor: pointer; padding: 7px 10px; border-radius: 8px; color: var(--paper); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); transition: transform .1s, border-color .1s, background .1s; }
.ctrl-btn:hover { transform: translateY(-1px); border-color: var(--yuzu); background: rgba(255,207,63,0.08); }

.hintline { font-size: 10px; color: var(--muted); line-height: 1.5; }
.sel-name { font-family: var(--display); font-weight: 700; font-size: 13px; color: var(--ember); }
.sel-xyz { display: flex; gap: 6px; }
.sel-cell { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 10px; color: var(--muted); }
.sel-cell input { background: rgba(0,0,0,0.3); color: var(--paper); border: 1px solid rgba(255,255,255,0.12); border-radius: 5px; padding: 3px 4px; font-family: var(--mono); font-size: 10px; width: 100%; }

.help-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(7,10,14,0.55); backdrop-filter: blur(3px); }
.help-card { width: min(360px, 90vw); padding: 22px 24px; border-radius: 16px; background: var(--panel); border: 1px solid rgba(255,207,63,0.2); display: flex; flex-direction: column; gap: 8px; }
.help-title { font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--yuzu); margin-bottom: 4px; }
.help-row { display: flex; justify-content: space-between; font-size: 12px; }
.help-row .hk { color: var(--onsen); }
.help-row .hv { color: var(--muted); }

.stats { position: absolute; bottom: 14px; left: 14px; font-size: 11px; color: var(--paper); background: var(--panel); padding: 7px 12px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.1); }

/* ---- game mode HUD + end card ---- */
.game-hud { position: fixed; left: 0; right: 0; top: 0; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 7px; padding-top: 16px; z-index: 40; }
.gh-top { display: flex; align-items: baseline; gap: 10px; }
.gh-dist { font-family: var(--display, 'Baloo 2'), system-ui; font-weight: 800; font-size: 44px; color: #fff; text-shadow: 0 3px 14px rgba(0,0,0,.6), 0 1px 0 #c98a36; line-height: 1; }
.gh-dist i { font-style: normal; font-size: 20px; color: #ffce6b; margin-left: 3px; }
.gh-bar-wrap { width: min(340px, 60vw); height: 7px; border-radius: 99px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,206,107,.25); overflow: hidden; }
.gh-bar { height: 100%; width: 0%; border-radius: 99px; background: linear-gradient(90deg, #8db84a, #ffce6b); transition: width .2s linear; }
.gh-bar.gold { background: linear-gradient(90deg, #ffce6b, #ffe9b0); box-shadow: 0 0 12px rgba(255,206,107,.8); }
.gh-bar.red { background: linear-gradient(90deg, #d2452f, #ff8a5c); }
.gh-bar-wrap.boost { height: 9px; border-color: rgba(255,206,107,.6); animation: boostPulse .5s ease-in-out infinite alternate; }
.gh-bar-wrap.red { border-color: rgba(220,80,60,.6); width: min(260px, 50vw); }
@keyframes boostPulse { from { box-shadow: 0 0 4px rgba(255,206,107,.4); } to { box-shadow: 0 0 16px rgba(255,206,107,.9); } }
.gh-melon { font-family: 'JetBrains Mono', monospace; font-size: 15px; color: #e8e2d2; background: rgba(10,14,8,.55); border: 1px solid rgba(255,206,107,.2); border-radius: 99px; padding: 4px 14px 4px 8px; display: flex; align-items: center; gap: 7px; }
.gh-melon b { color: #fff; }
.melon-dot { width: 17px; height: 17px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 14 A 11 11 0 0 0 22 14 Z' fill='%232f7a2a'/%3E%3Cpath d='M3.6 14 A 9.4 9.4 0 0 0 20.4 14 Z' fill='%23bfe66f'/%3E%3Cpath d='M5 14 A 8 8 0 0 0 19 14 Z' fill='%23ff5a5a'/%3E%3Ccircle cx='9.5' cy='16.4' r='.85' fill='%23241307'/%3E%3Ccircle cx='13.4' cy='17.6' r='.85' fill='%23241307'/%3E%3Ccircle cx='15.8' cy='15.6' r='.85' fill='%23241307'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.gh-threat { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 4px; }
.gh-threat-label { font-family: var(--display, 'Baloo 2'), system-ui; font-weight: 800; font-size: 15px; letter-spacing: 2px; color: #ff8a5c; text-shadow: 0 2px 10px rgba(160,30,10,.8); animation: threatBlink .7s steps(2) infinite; }
@keyframes threatBlink { 50% { opacity: .45; } }
.threat-vignette { position: fixed; inset: 0; pointer-events: none; z-index: 35; box-shadow: inset 0 0 140px 50px rgba(170, 30, 10, .45); transition: opacity .4s ease; animation: vignettePulse 1s ease-in-out infinite alternate; }
@keyframes vignettePulse { from { box-shadow: inset 0 0 120px 40px rgba(170,30,10,.38); } to { box-shadow: inset 0 0 170px 64px rgba(170,30,10,.55); } }
.gh-hint { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(255,255,255,.55); }
.game-end { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(6,9,5,.45), rgba(4,6,3,.78)); backdrop-filter: blur(4px); animation: fadeIn .5s ease both; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes cardUp { from { opacity: 0; transform: translateY(26px) scale(.97); } }
.ge-card { background:
    radial-gradient(110% 60% at 50% -5%, rgba(255,170,60,.13), transparent 60%),
    linear-gradient(170deg, #2e2716, #15110a);
  border: 0; padding: 40px 54px 32px; text-align: center; color: var(--ink);
  clip-path: polygon(4% 2%, 96% 0%, 100% 12%, 99% 90%, 94% 100%, 5% 98%, 0% 88%, 1% 10%);
  box-shadow: inset 0 0 0 2px rgba(255,184,77,.32), inset 0 0 60px rgba(0,0,0,.5), 0 30px 80px rgba(0,0,0,.7);
  min-width: min(390px, 86vw); max-width: min(470px, 92vw); animation: cardUp .55s cubic-bezier(.2,.9,.3,1.2) both .15s; }
.ge-dist { font-family: var(--display, 'Baloo 2'), system-ui; font-weight: 800; font-size: 58px; color: #fff; line-height: 1; margin-top: 10px; text-shadow: 0 4px 18px rgba(0,0,0,.6); }
.ge-dist i { font-style: normal; font-size: 26px; color: #ffce6b; margin-left: 4px; }
.ge-title { font-family: var(--display, 'Baloo 2'), system-ui, sans-serif; font-weight: 800; font-size: 44px; letter-spacing: 2px; line-height: 1; }
.ge-title.win { color: #ffce6b; text-shadow: 0 0 26px rgba(255,206,107,.5), 0 3px 0 #8a5a16; }
.ge-title.lose { color: #ff6a4a; text-shadow: 0 0 26px rgba(220,60,30,.5), 0 3px 0 #6e1d0c; }
.ge-sub { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,212,121,.75); margin-top: 8px; }
.ge-btns { display: flex; gap: 12px; margin-top: 26px; justify-content: center; }
.ge-btn { font-family: var(--display, 'Baloo 2'), system-ui, sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 2px; color: #2a1d08;
  background: linear-gradient(175deg, var(--stone1), var(--stone2) 65%, var(--stone3)); border: 0; padding: 13px 24px; cursor: pointer;
  clip-path: polygon(4% 10%, 96% 0%, 100% 84%, 94% 100%, 5% 95%, 0% 20%);
  box-shadow: 0 5px 0 var(--bronze), 0 12px 22px rgba(0,0,0,.45); transition: transform .1s ease, box-shadow .12s ease; }
.ge-btn:hover { transform: translateY(-2px) rotate(-.5deg); box-shadow: 0 7px 0 var(--bronze), 0 16px 26px rgba(0,0,0,.5); }
.ge-btn:active { transform: translateY(0); box-shadow: 0 3px 0 var(--bronze), 0 8px 16px rgba(0,0,0,.45); }
.ge-btn.ghost { background: linear-gradient(172deg, #3b3320, #241e11); color: var(--ink);
  box-shadow: 0 5px 0 #141008, 0 12px 22px rgba(0,0,0,.4), inset 0 0 0 1.5px rgba(255,184,77,.3); }
.ge-btn.ghost:hover { box-shadow: 0 7px 0 #141008, 0 16px 26px rgba(0,0,0,.45), inset 0 0 0 1.5px rgba(255,184,77,.55); }

/* ---- game shell: loading, menu, intro, redesigned HUD ---- */
.shell { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.shell.menu { align-items: flex-start; justify-content: flex-start; padding: 6vh 0 0 6vw; }
.loading { background: radial-gradient(120% 120% at 50% 30%, #18230f 0%, #0b1107 55%, #050803 100%); opacity: 1; transition: opacity .45s ease; }
.loading.out { opacity: 0; pointer-events: none; } 100%{transform:translateX(330%)} }

.menu { background: linear-gradient(180deg, rgba(8,7,14,.30) 0%, rgba(8,7,14,.05) 45%, rgba(8,7,14,.55) 100%); }
.menu-title { font-family: var(--display, 'Baloo 2'), system-ui; font-weight: 800; font-size: clamp(46px, 7.5vw, 96px); letter-spacing: 3px; color: var(--ink); line-height: .94; transform: rotate(-2deg); transform-origin: left bottom; text-align: left;
  text-shadow: 0 3px 0 var(--bronze2), 0 6px 0 #2c2410, 0 14px 30px rgba(0,0,0,.8); }
.menu-title span { color: var(--amber); }
.menu-sub { font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 2px; color: rgba(255,255,255,.7); margin-top: 6px; text-transform: uppercase; }
.menu-btns { display: flex; flex-direction: column; gap: 18px; margin-top: 44px; width: 300px; align-items: flex-start; }
/* stepping stones: each slab staggers deeper into the jungle */
.menu-btns .menu-btn { width: 250px; position: relative; }
.menu-btns .menu-btn:nth-child(1) { transform: rotate(-1.6deg); }
.menu-btns .menu-btn:nth-child(2) { margin-left: 52px; transform: rotate(1.1deg); }
.menu-btns .menu-btn:nth-child(3) { margin-left: 14px; transform: rotate(-0.8deg); }
.menu-btns .menu-btn:nth-child(4) { margin-left: 66px; transform: rotate(1.4deg); }
.menu-btns .menu-btn:nth-child(5) { margin-left: 26px; transform: rotate(-1.2deg); }
.menu-btns .menu-btn:nth-child(6) { margin-left: 78px; transform: rotate(0.9deg); }
.menu-btns .menu-btn:hover { transform: translateY(-3px) rotate(0deg) scale(1.03); }
/* paw prints wandering between the stones */
.menu-btns .menu-btn:nth-child(even)::before {
  content: ''; position: absolute; left: -34px; top: 50%; width: 26px; height: 26px; transform: translateY(-50%) rotate(24deg); opacity: .5; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cellipse cx='13' cy='17' rx='6' ry='5' fill='%23d9c69a'/%3E%3Ccircle cx='6' cy='9' r='2.6' fill='%23d9c69a'/%3E%3Ccircle cx='12' cy='6.5' r='2.6' fill='%23d9c69a'/%3E%3Ccircle cx='18' cy='8.5' r='2.6' fill='%23d9c69a'/%3E%3C/svg%3E") center/contain no-repeat; }
.menu-btn { font-family: var(--display, 'Baloo 2'), system-ui; font-weight: 800; font-size: 16px; letter-spacing: 2.5px; color: #2a1d08;
  background: linear-gradient(175deg, var(--stone1), var(--stone2) 60%, var(--stone3)); border: 0; padding: 16px 28px; cursor: pointer;
  clip-path: polygon(3% 8%, 97% 0%, 100% 86%, 95% 100%, 4% 96%, 0% 18%);
  box-shadow: 0 7px 0 var(--bronze), 0 16px 30px rgba(0,0,0,.5);
  transition: transform .1s ease, box-shadow .12s ease; }
.menu-btn:hover { transform: translateY(-3px) rotate(-.6deg); box-shadow: 0 10px 0 var(--bronze), 0 20px 34px rgba(0,0,0,.55); }
.menu-btn:active { transform: translateY(0); box-shadow: 0 4px 0 var(--bronze), 0 10px 20px rgba(0,0,0,.5); }
.menu-btn.ghost { background: linear-gradient(172deg, #3b3320, #241e11); color: var(--ink);
  box-shadow: 0 6px 0 #141008, 0 14px 26px rgba(0,0,0,.45), inset 0 0 0 1.5px rgba(255,184,77,.3); }
.menu-btn.ghost:hover { box-shadow: 0 9px 0 #141008, 0 18px 30px rgba(0,0,0,.5), inset 0 0 0 1.5px rgba(255,184,77,.55); }
.menu-btn.ghost { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.22); box-shadow: none; backdrop-filter: blur(6px); }
.menu-btn.soon { opacity: .5; cursor: default; }
.menu-btn.soon:hover { filter: none; transform: none; }
.menu-foot { position: absolute; bottom: 16px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(255,255,255,.45); }

.intro-skip { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 55; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: rgba(255,255,255,.8); background: rgba(15,13,26,.4); padding: 6px 14px; border-radius: 20px; backdrop-filter: blur(4px); pointer-events: none; }

/* redesigned HUD */
.gh-top { display: flex; align-items: baseline; gap: 10px; }
.gh-dist { font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 800; font-size: 42px; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.gh-unit { font-family: 'JetBrains Mono', monospace; font-size: 14px; color: rgba(255,255,255,.7); }
.gh-melon { font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 700; font-size: 18px; color: #ff7b8a; background: rgba(15,13,26,.4); padding: 5px 14px; border-radius: 20px; backdrop-filter: blur(4px); }
.gh-melon b { color: #fff; }

/* credits */
.credits-panel { position: fixed; left: 0; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  background:
    radial-gradient(120% 50% at 30% -8%, rgba(255,170,60,.12), transparent 58%),
    repeating-conic-gradient(from 40deg at 0% 130%, rgba(0,0,0,.14) 0 6deg, transparent 6deg 12deg),
    linear-gradient(100deg, var(--slab2), var(--slab1) 55%, var(--slab2));
  border: 0; padding: 5vh 52px 4vh 30px; width: min(540px, 96vw); color: var(--ink);
  clip-path: polygon(0 0, 97% 0, 100% 7%, 99% 30%, 100% 52%, 98.8% 76%, 100% 93%, 96.5% 100%, 0 100%);
  box-shadow: inset -2px 0 0 rgba(255,184,77,.3), inset -40px 0 70px rgba(0,0,0,.45), 30px 0 80px rgba(0,0,0,.6);
  overflow-y: auto; overflow-x: hidden; animation: dockIn .4s cubic-bezier(.2,.9,.3,1.1) both; }
@keyframes dockIn { from { transform: translateX(-60px); opacity: 0; } }
.credits-panel::-webkit-scrollbar { width: 8px; }
.credits-panel::-webkit-scrollbar-thumb { background: var(--bronze); border-radius: 8px; }
@media (max-width: 700px) {
  .credits-panel { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: 62vh; padding: 26px 22px 22px;
    clip-path: polygon(0 8%, 5% 0, 28% 3%, 52% 0, 78% 3%, 96% 0, 100% 9%, 100% 100%, 0 100%);
    animation: sheetUp .35s ease both; }
  @keyframes sheetUp { from { transform: translateY(50px); opacity: 0; } }
}
.credits-panel > * { animation: riseIn .4s ease both; }
.credits-panel > *:nth-child(2) { animation-delay: .05s; } .credits-panel > *:nth-child(3) { animation-delay: .1s; }
.credits-panel > *:nth-child(4) { animation-delay: .15s; } .credits-panel > *:nth-child(5) { animation-delay: .2s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(12px); } }
.credits-title { position: relative; padding-bottom: 16px; color: var(--amber); text-shadow: 0 2px 0 var(--bronze2), 0 5px 12px rgba(0,0,0,.7); transform: rotate(-0.8deg); align-self: flex-start; text-align: left; }
.credits-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 200px; height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 10'%3E%3Cpath d='M0 5 h70 M150 5 h70 M80 5 l10 -4 l10 4 l10 -4 l10 4 l10 -4 l10 4' stroke='%23ffb84d' stroke-width='2' fill='none' opacity='.8'/%3E%3C/svg%3E") center/contain no-repeat; }
.credits-title { font-family: var(--display, 'Baloo 2'), system-ui; font-weight: 800; font-size: 30px; color: #ffce6b; letter-spacing: 2px; }
.credits-body { display: flex; flex-direction: column; gap: 6px; max-height: 44vh; overflow: auto; }
.credits-line { color: #e8e2d2; font-size: 14px; }
.credits-line b { color: #fff; margin-right: 8px; }
.credits-line i { opacity: .55; font-size: 12px; }
.credits-line.dim { opacity: .6; margin-top: 8px; font-size: 12px; }

/* settings */
.settings-body { display: flex; flex-direction: column; gap: 12px; min-width: min(380px, 76vw); }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.settings-label { color: #e8e2d2; font-size: 14px; }
.settings-row input[type=range] { flex: 1; max-width: 200px; accent-color: #ffce6b; }
.settings-row input[type=checkbox] { accent-color: #ffce6b; width: 18px; height: 18px; }

/* map select */
.map-list { display: flex; flex-direction: column; gap: 8px; min-width: min(420px, 80vw); }
.map-btn { display: flex; flex-direction: column; gap: 2px; text-align: left; background: rgba(255,255,255,.05); border: 1px solid rgba(255,206,107,.18); border-radius: 10px; padding: 10px 14px; color: #e8e2d2; cursor: pointer; font-family: inherit; }
.map-btn:hover { background: rgba(255,206,107,.1); }
.map-btn.sel { border-color: #ffce6b; background: rgba(255,206,107,.16); }
.map-btn b { color: #fff; font-size: 15px; }
.map-btn span { font-size: 12px; opacity: .75; }
.map-btn i { font-size: 11px; opacity: .5; font-style: normal; }
.diff-row { display: flex; gap: 10px; justify-content: center; }
.diff-btn { background: rgba(255,255,255,.06); border: 1px solid rgba(255,206,107,.2); border-radius: 8px; color: #e8e2d2; padding: 8px 16px; cursor: pointer; font-family: inherit; letter-spacing: 1px; }
.diff-btn.sel { border-color: #ffce6b; color: #ffce6b; background: rgba(255,206,107,.14); }

/* menu readability + title glow */
.menu-title { animation: titleBreathe 4s ease-in-out infinite alternate; }
@keyframes titleBreathe { from { text-shadow: 0 6px 30px rgba(0,0,0,.55), 0 2px 0 #c98a36; } to { text-shadow: 0 6px 44px rgba(255,206,107,.4), 0 2px 0 #c98a36; } }
.menu-sub { color: rgba(255,255,255,.78); font-style: italic; letter-spacing: 1px; }
.menu-foot { background: rgba(8,12,7,.5); border-radius: 99px; padding: 5px 16px; }
.intro-skip { font-family: 'JetBrains Mono', monospace; background: rgba(8,12,7,.6); border: 1px solid rgba(255,206,107,.2); border-radius: 99px; padding: 7px 18px; }

/* multiplayer */
.mp-form { display: flex; gap: 10px; }
.mp-input { background: rgba(255,255,255,.07); border: 1px solid rgba(255,206,107,.25); border-radius: 9px; color: #fff; padding: 10px 12px; font-family: 'JetBrains Mono', monospace; font-size: 14px; width: 160px; }
.mp-input.code { width: 90px; text-transform: uppercase; letter-spacing: 3px; text-align: center; }
.mp-input:focus { outline: none; border-color: #ffce6b; }
.mp-status { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: rgba(255,255,255,.65); }
.mp-lobby { display: flex; flex-direction: column; gap: 5px; min-width: 220px; }
.mp-player { background: rgba(255,255,255,.06); border-radius: 8px; padding: 6px 12px; color: #e8e2d2; font-size: 14px; }
.mp-player.you { border: 1px solid rgba(255,206,107,.45); color: #ffce6b; }
.ge-results { margin-top: 12px; display: flex; flex-direction: column; gap: 3px; font-family: 'JetBrains Mono', monospace; font-size: 13px; color: #e8e2d2; }
.ge-results .you { color: #ffce6b; }

/* live standings + placements */
.mp-standings { position: fixed; top: 80px; right: 18px; z-index: 41; display: flex; flex-direction: column; gap: 4px; background: rgba(8,12,7,.55); border: 1px solid rgba(255,206,107,.2); border-radius: 12px; padding: 10px 12px; backdrop-filter: blur(4px); pointer-events: none; }
.mp-stand-row { display: flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #e8e2d2; }
.mp-stand-row b { color: #ffce6b; width: 14px; }
.mp-stand-row span { margin-left: auto; opacity: .7; }
.mp-stand-row.you { color: #ffce6b; }
.ge-place { display: flex; align-items: center; gap: 10px; font-family: 'JetBrains Mono', monospace; font-size: 13px; color: #e8e2d2; padding: 4px 0; }
.ge-place b { width: 18px; color: rgba(255,255,255,.55); }
.ge-place.p1 b { color: #ffce6b; } .ge-place.p2 b { color: #cfd6dd; } .ge-place.p3 b { color: #d0945f; }
.ge-place i { margin-left: auto; font-style: normal; opacity: .65; font-size: 12px; }
.ge-place.you span { color: #ffce6b; }

/* multiplayer stepped flow */
.mp-view { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.mp-input.wide { width: 240px; text-align: center; }
.mp-hint { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: rgba(255,255,255,.6); text-align: center; max-width: 320px; line-height: 1.5; }
.mp-code-big { display: flex; gap: 10px; background: none; border: 0; padding: 4px; cursor: pointer; }
.mp-code-big u { text-decoration: none; font-family: var(--display, 'Baloo 2'), system-ui; font-weight: 800; font-size: 42px; line-height: 1; color: #2a1d08; padding: 13px 15px;
  background: linear-gradient(175deg, var(--stone1), var(--stone2) 65%, var(--stone3)); border: 0;
  clip-path: polygon(6% 4%, 96% 0%, 100% 90%, 92% 100%, 4% 97%, 0% 10%);
  box-shadow: 0 6px 0 var(--bronze), 0 14px 24px rgba(0,0,0,.5); text-shadow: 0 1px 0 rgba(255,255,255,.35); transition: transform .12s ease; }
.mp-code-big:hover u { transform: translateY(-3px); }
.mp-code-big u:nth-child(2) { transition-delay: .03s; } .mp-code-big u:nth-child(3) { transition-delay: .06s; } .mp-code-big u:nth-child(4) { transition-delay: .09s; }
.mp-count { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: #cdebb0; }
.menu-btn:disabled { opacity: .4; cursor: not-allowed; transform: none !important; box-shadow: 0 8px 24px rgba(0,0,0,.3) !important; }

/* powerup chips + achievements */
.gh-pow { display: flex; gap: 6px; justify-content: center; margin-top: 6px; }
.pow-chip { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1px; padding: 3px 10px; border-radius: 99px; text-transform: uppercase; }
.pow-chip.shield { color: #bfe2ff; background: rgba(110,193,255,.16); border: 1px solid rgba(110,193,255,.45); }
.pow-chip.magnet { color: #ffd9b0; background: rgba(255,157,60,.16); border: 1px solid rgba(255,157,60,.45); }
.achv-toast { position: fixed; top: 18px; right: 18px; z-index: 70; background: linear-gradient(165deg, rgba(18,26,12,.97), rgba(9,13,7,.97)); border: 1px solid rgba(255,206,107,.4); border-radius: 14px; padding: 12px 18px; display: flex; flex-direction: column; gap: 2px; color: #fff; font-family: var(--display, 'Baloo 2'), system-ui; font-size: 15px; transform: translateX(120%); transition: transform .4s cubic-bezier(.2,.9,.3,1.1); box-shadow: 0 14px 40px rgba(0,0,0,.5); }
.achv-toast.on { transform: translateX(0); }
.achv-toast b { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: #ffce6b; font-weight: 800; }
.achv-grid { display: grid; grid-template-columns: repeat(2, minmax(200px, 1fr)); gap: 10px; max-height: 46vh; overflow-y: auto; padding: 2px; }
.achv-card { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 11px 14px; opacity: .5; }
.achv-card .achv-medal { flex: 0 0 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 15px; color: rgba(232,220,192,.35);
  background: radial-gradient(circle at 35% 30%, #2e2716, #15110a); box-shadow: inset 0 2px 4px rgba(0,0,0,.7), inset 0 0 0 1.5px rgba(255,184,77,.18); border: 0; }
.achv-card.got { opacity: 1; border-color: rgba(255,206,107,.5); background: linear-gradient(110deg, rgba(255,206,107,.1), rgba(255,255,255,.02)); }
.achv-card.got .achv-medal { color: #2a1d08; background: linear-gradient(160deg, var(--stone1), var(--amber)); box-shadow: 0 3px 0 var(--bronze), 0 0 16px -2px rgba(255,184,77,.55), inset 0 1px 0 rgba(255,255,255,.5); }
.achv-card.got::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.14) 48%, transparent 62%); transform: translateX(-120%); animation: sheen 3.2s ease infinite; }
@keyframes sheen { 12% { transform: translateX(120%); } 100% { transform: translateX(120%); } }
.achv-body { display: flex; flex-direction: column; gap: 2px; }
.achv-card b { font-family: var(--display, 'Baloo 2'), system-ui; font-size: 14px; color: #fff; }
.achv-card.got b { color: #ffce6b; }
.achv-card span { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(255,255,255,.6); line-height: 1.45; }
.achv-bar { position: relative; width: min(420px, 76vw); height: 9px; border-radius: 99px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,206,107,.25); overflow: hidden; }
.achv-bar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ffce6b, #ffe9b0); box-shadow: 0 0 14px rgba(255,206,107,.6); transition: width .6s cubic-bezier(.2,.9,.3,1); }
.achv-bar-text { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 2px; color: rgba(255,233,176,.7); text-transform: uppercase; }

/* tutorial + leaderboards + mp mode */
.tut-prompt { position: fixed; top: 26vh; left: 50%; transform: translateX(-50%) rotate(-.6deg); z-index: 45; font-family: var(--display, 'Baloo 2'), system-ui; font-weight: 800; font-size: 25px; color: var(--ink); text-shadow: 0 2px 0 rgba(0,0,0,.6);
  background: linear-gradient(170deg, #2e2716ee, #15110aee); border: 0; padding: 14px 30px;
  clip-path: polygon(2% 8%, 98% 0%, 100% 84%, 96% 100%, 3% 94%, 0% 16%);
  box-shadow: inset 0 0 0 2px rgba(255,184,77,.3), 0 14px 30px rgba(0,0,0,.6); pointer-events: none; animation: fadeIn .3s ease both; white-space: nowrap; }
.lb-list { display: flex; flex-direction: column; gap: 4px; min-width: 320px; max-height: 38vh; overflow-y: auto; }
.lb-row { display: flex; align-items: center; gap: 12px; font-family: 'JetBrains Mono', monospace; font-size: 13px; color: #e8e2d2; padding: 7px 12px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid transparent; }
.lb-row b { flex: 0 0 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 11.5px; color: rgba(255,255,255,.5); background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12); }
.lb-row:nth-child(1) { background: linear-gradient(90deg, rgba(255,206,107,.16), rgba(255,255,255,.02)); border-color: rgba(255,206,107,.4); font-size: 14.5px; }
.lb-row:nth-child(1) b { color: #2a1d08; background: linear-gradient(160deg, #ffe19c, #ffb53f); border-color: #ffce6b; box-shadow: 0 0 12px -2px rgba(255,193,79,.6); }
.lb-row:nth-child(2) { background: linear-gradient(90deg, rgba(207,214,221,.12), rgba(255,255,255,.02)); border-color: rgba(207,214,221,.3); }
.lb-row:nth-child(2) b { color: #1d2126; background: linear-gradient(160deg, #e8edf2, #aab4bf); border-color: #cfd6dd; }
.lb-row:nth-child(3) { background: linear-gradient(90deg, rgba(208,148,95,.14), rgba(255,255,255,.02)); border-color: rgba(208,148,95,.35); }
.lb-row:nth-child(3) b { color: #241307; background: linear-gradient(160deg, #e2b288, #b97e4c); border-color: #d0945f; }
.lb-row i { margin-left: auto; font-style: normal; color: #ffce6b; }
.lb-row.you { outline: 1.5px solid rgba(255,206,107,.55); outline-offset: -1.5px; }
.lb-tab { font-size: 12px !important; padding: 8px 14px !important; letter-spacing: 1px !important; }
.menu-btn.mp-mode { font-size: 13px; padding: 10px 18px; opacity: .55; }
.menu-btn.mp-mode.on { opacity: 1; border-color: #ffce6b; background: rgba(255,206,107,.12); }

/* spectate */
.spec-banner { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 46; display: flex; align-items: center; gap: 14px; background: rgba(8,12,7,.7); border: 1px solid rgba(255,138,92,.45); border-radius: 99px; padding: 8px 10px 8px 20px; font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 1px; color: #ffb59a; backdrop-filter: blur(6px); }
.spec-btn { font-size: 11px !important; padding: 7px 14px !important; }
.mp-stand-row.dead { opacity: .45; }
.mp-stand-row.dead b { color: #ff8a5c; }


/* leaderboard names */
.lb-name-row { display: flex; align-items: center; gap: 10px; }
.lb-name-row span { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,233,176,.65); }
.mp-input.lb-name { width: 150px; text-align: center; }
.ge-name-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.ge-btn.ge-save { font-size: 11px; padding: 11px 16px; }


/* powerup callouts */
.pow-callout { position: fixed; top: 50%; right: 5vw; transform: translateY(-50%); z-index: 44; font-family: var(--display, 'Baloo 2'), system-ui; font-weight: 800; font-size: 30px; letter-spacing: 2.5px; text-align: right; pointer-events: none; animation: calloutPop .35s cubic-bezier(.2,1.4,.4,1) both; text-shadow: 0 4px 18px rgba(0,0,0,.7); }
@keyframes calloutPop { from { opacity: 0; transform: translateY(-50%) translateX(30px) scale(.7); } }
.pow-callout.c-shield { color: #9fd4ff; } .pow-callout.c-shieldpop { color: #ff9a8a; }
.pow-callout.c-magnet { color: #ffbf80; } .pow-callout.c-boost { color: #ffd98c; }


/* mural stagger inside the dock */
.credits-panel .map-btn { min-width: 0; width: 100%; }
.credits-panel .map-btn:nth-child(odd) { transform: rotate(-0.7deg); }
.credits-panel .map-btn:nth-child(even) { transform: rotate(0.6deg); margin-left: 10px; }
.credits-panel .map-btn:hover { transform: translateX(5px) rotate(0); }
.credits-panel .achv-grid { grid-template-columns: 1fr; width: 100%; }



/* combo + gold */
.gh-combo { position: fixed; top: 13vh; left: 50%; transform: translateX(-50%) rotate(-1.5deg); font-family: var(--display, 'Baloo 2'), system-ui; font-weight: 800; font-size: 24px; letter-spacing: 2px; color: var(--amber); text-shadow: 0 2px 0 var(--bronze2), 0 5px 16px rgba(0,0,0,.7); animation: comboPulse .9s ease infinite alternate; pointer-events: none; z-index: 42; }
@keyframes comboPulse { from { transform: translateX(-50%) rotate(-1.5deg) scale(1); } to { transform: translateX(-50%) rotate(-1.5deg) scale(1.08); } }
.pow-chip.gold { color: #ffd24d; border-color: rgba(255,210,77,.55); }
.pow-callout.c-gold { color: #ffd24d; } .pow-callout.c-combo { color: #ffe9a8; }


/* error toast */
.err-toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 90; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; letter-spacing: .5px; color: var(--ink); background: linear-gradient(170deg, #3a2417ee, #1c1009ee); padding: 12px 22px; clip-path: polygon(2% 10%, 98% 0%, 100% 82%, 96% 100%, 3% 92%, 0% 20%); box-shadow: inset 0 0 0 1.5px rgba(255,122,92,.4), 0 12px 28px rgba(0,0,0,.6); animation: fadeIn .25s ease both; pointer-events: none; }

/* quit confirmation */
.quit-wrap { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; background: rgba(5,4,2,.55); backdrop-filter: blur(3px); animation: fadeIn .2s ease both; }
.quit-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 40px 26px; color: var(--ink);
  background: radial-gradient(110% 60% at 50% -5%, rgba(255,170,60,.12), transparent 60%), linear-gradient(170deg, #2e2716, #15110a);
  clip-path: polygon(4% 4%, 96% 0%, 100% 14%, 98% 88%, 93% 100%, 6% 97%, 0% 86%, 2% 12%);
  box-shadow: inset 0 0 0 2px rgba(255,184,77,.32), 0 26px 70px rgba(0,0,0,.7); animation: cardUp .3s cubic-bezier(.2,.9,.3,1.15) both; }
.quit-title { font-family: var(--display, 'Baloo 2'), system-ui; font-weight: 800; font-size: 28px; color: var(--amber); text-shadow: 0 2px 0 var(--bronze2); transform: rotate(-0.8deg); }
.quit-sub { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: 1.5px; color: rgba(232,220,192,.6); text-transform: uppercase; }
.quit-row { display: flex; gap: 14px; margin-top: 14px; }

/* the confirm must always be clickable, whatever its ancestors say */
.quit-wrap { pointer-events: auto !important; }
.quit-wrap button { pointer-events: auto !important; }


/* endless loop seam */
.wrap-flash { position: fixed; inset: 0; z-index: 70; background: radial-gradient(circle at 50% 45%, rgba(255,245,220,.95), rgba(255,235,190,.7) 55%, rgba(255,225,160,.4)); opacity: 0; pointer-events: none; transition: opacity .35s ease; }


/* nothing inside the dock may outgrow it */
.credits-panel > * { max-width: 100%; box-sizing: border-box; }
.credits-panel .map-btn, .credits-panel .lb-row, .credits-panel .achv-card { width: 100%; min-width: 0; }


/* weather pebbles */
.diff-btn.w-clear { --dac: var(--amber); }
.diff-btn.w-sunny { --dac: #ffe27a; }
.diff-btn.w-rainy { --dac: #8fb6d9; }


/* build badge: quiet proof of what's running; turns red with the first error */
.build-badge { position: fixed; bottom: 8px; right: 10px; z-index: 99; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 1px; color: rgba(232,220,192,.4); pointer-events: none; }
.build-badge.err { color: #ffb3a6; background: rgba(40,10,5,.9); padding: 6px 10px; border-radius: 6px; pointer-events: auto; cursor: pointer; max-width: 60vw; }


/* lightning sheet: a soft cool wash over the whole frame, driven per strike */
.storm-flash { position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 12%, rgba(225,238,255,.85), rgba(190,215,255,.25) 55%, rgba(180,205,255,0) 80%); }


/* cinema mode: a clean frame and a director's bar */
body.cinema .shell, body.cinema .game-hud, body.cinema .pow-callout,
body.cinema .build-badge, body.cinema .err-toast, body.cinema .achv-toast,
body.cinema .game-end, body.cinema .intro-skip, body.cinema .quit-wrap { display: none !important; }
.cine-bar { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 200;
  display: flex; flex-direction: column; gap: 7px; align-items: center;
  background: rgba(10, 8, 16, .82); border: 1px solid rgba(232, 220, 192, .18); border-radius: 12px;
  padding: 10px 14px; font-family: 'JetBrains Mono', monospace; }
.cine-status { font-size: 10.5px; letter-spacing: 1px; color: rgba(232, 220, 192, .75); }
.cine-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 78vw; }
.cine-btn { font-family: inherit; font-size: 10px; letter-spacing: .8px; padding: 6px 9px;
  background: rgba(232, 220, 192, .08); color: #e8dcc0; border: 1px solid rgba(232, 220, 192, .25);
  border-radius: 7px; cursor: pointer; }
.cine-btn:hover { background: rgba(232, 220, 192, .18); }
.cine-btn:disabled { opacity: .4; cursor: default; }
.cine-dl { border-color: rgba(140, 220, 160, .5); color: #bfe8c8; }
.cine-stop { border-color: rgba(230, 140, 120, .5); color: #f0c0b2; }


/* ---- mobile port ---- */
.touch-pause { position: fixed; top: calc(10px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right));
  z-index: 70; width: 42px; height: 42px; border-radius: 12px; border: 1px solid rgba(232, 220, 192, .3);
  background: rgba(12, 10, 18, .62); color: #e8dcc0; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.touch-pause:active { background: rgba(232, 220, 192, .2); }
html, body { overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }

@media (max-width: 560px) {
  .shell.menu { align-items: center !important; justify-content: flex-start !important; padding: 5vh 3vw 0 3vw !important; }
  .ge-card, .quit-card, .credits-panel, .settings-body, .map-list, .lb-list, .mp-lobby, .mp-standings, .achv-grid {
    min-width: 0 !important; max-width: 94vw !important; width: 94vw !important; }
  .lb-list { max-height: 34vh; }
  .shell { width: 94vw !important; min-width: 0 !important; padding: 4vh 18px 3vh 18px !important; }
  .menu-title { font-size: clamp(26px, 9vw, 44px) !important; letter-spacing: 2px !important; }
  .menu-btns button, .diff-btn, .ge-btns button { min-height: 42px; }
  .gh-top { transform: scale(.88); transform-origin: top left; }
  .gh-hint { font-size: 9px; padding: 0 10px; text-align: center; }
  .pow-callout { right: 3vw !important; max-width: 38vw; font-size: 11px; }
  .quit-card { width: min(92vw, 360px) !important; }
  .game-end .ge-card { width: 94vw !important; }
  .credits-panel, .leaderboards, .achievements, .multiplayer { max-height: 76vh; overflow-y: auto; }
  .cine-bar { display: none; } /* the studio is a desktop room */
}
@media (max-height: 480px) and (orientation: landscape) {
  .shell { padding-top: 2vh !important; padding-bottom: 2vh !important; max-height: 92vh; overflow-y: auto; }
}


/* achievements: give each row room so title and description stop overlapping */
.achv-card { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 9px 14px; }
.achv-body { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; }
.achv-body b { line-height: 1.2; font-size: 14px; }
.achv-body span { line-height: 1.3; font-size: 11px; opacity: .7; white-space: normal; }
.achv-medal { flex: 0 0 auto; }

/* on the play.fun build, drop our HUD below their points bar so neither is blocked */
body.ogp-on .gh-top { top: 64px; }
/* their points bar (~64px) also overlaps the menu title and end screen, and with the
   top edge eaten the tall menu runs off the bottom. Reserve the bar height for those
   surfaces too and let the menu scroll so every sign stays reachable in the embed. */
body.ogp-on .shell.menu { padding-top: calc(76px + env(safe-area-inset-top)) !important; justify-content: flex-start !important; }
body.ogp-on .shell { overflow-y: auto; -webkit-overflow-scrolling: touch; }
body.ogp-on .game-end { align-items: flex-start; padding-top: calc(76px + env(safe-area-inset-top)); }
/* the menu sub-panels (first-visit onboarding, credits, leaderboards, achievements,
   multiplayer) are full-height docks (top:0;bottom:0). Inside play.fun the iframe is
   taller than the phone's visible area, so a full-height panel pushes its action buttons
   below the fold (pinch-and-drag to reach). In the embed, anchor them under the points
   bar and size to content so the buttons sit in the initially-visible region; long panels
   cap and scroll with one finger instead. */
body.ogp-on .credits-panel,
body.ogp-on .leaderboards,
body.ogp-on .achievements,
body.ogp-on .multiplayer {
  top: calc(72px + env(safe-area-inset-top)) !important;
  bottom: auto !important;
  height: auto !important;
  max-height: calc(100dvh - 92px - env(safe-area-inset-top)) !important;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}


/* graphics quality picker in settings */
.gfx-pick { display: flex; gap: 6px; }
.gfx-btn { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .8px; padding: 5px 10px;
  background: rgba(232,220,192,.07); color: #e8dcc0; border: 1px solid rgba(232,220,192,.25); border-radius: 6px; cursor: pointer; }
.gfx-btn.sel { background: var(--amber, #C9956B); color: #1a140c; border-color: var(--amber, #C9956B); }
.gfx-note { font-size: 10px; opacity: .6; margin-top: 6px; font-family: 'JetBrains Mono', monospace; }


/* ===== loading screen: dusk-jungle, animated ===== */
.shell.loading { position: fixed; inset: 0; overflow: hidden; background: #0a0d0a; display: flex; align-items: center; justify-content: center; }
.shell.loading.out { opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.ld-sky { position: absolute; inset: 0; background:
  radial-gradient(120% 80% at 50% 92%, #f3a14e 0%, #b5612e 14%, #5a3b46 34%, #243049 60%, #121a2e 100%); }
.ld-sun { position: absolute; left: 50%; bottom: 8%; width: 320px; height: 320px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255,213,140,.95) 0%, rgba(255,170,90,.5) 30%, rgba(255,150,80,0) 68%);
  filter: blur(2px); animation: ldSun 5s ease-in-out infinite; }
@keyframes ldSun { 0%,100% { transform: translateX(-50%) scale(1); opacity: .9; } 50% { transform: translateX(-50%) scale(1.07); opacity: 1; } }
.ld-fog { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,26,46,0) 40%, rgba(10,13,10,.55) 100%); }
.ld-canopy { position: absolute; left: -5%; width: 110%; bottom: 0; }
.ld-canopy path { fill: #0c1410; }
.ld-canopy-far { height: 46%; opacity: .65; filter: blur(1px); animation: ldDriftA 26s ease-in-out infinite; }
.ld-canopy-near { height: 34%; } 
.ld-canopy-near path { fill: #070b08; }
.ld-canopy-near { animation: ldDriftB 18s ease-in-out infinite; }
@keyframes ldDriftA { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-22px); } }
@keyframes ldDriftB { 0%,100% { transform: translateX(0); } 50% { transform: translateX(16px); } }
.ld-fireflies { position: absolute; inset: 0; pointer-events: none; }
.ld-fireflies i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #ffdf91;
  box-shadow: 0 0 8px 2px rgba(255,210,120,.8);
  left: calc(8% + (var(--n) * 10%)); top: calc(20% + (var(--n) * 7%) % 60%);
  animation: ldFly calc(6s + (var(--n) * 0.7s)) ease-in-out infinite; opacity: 0; }
@keyframes ldFly { 0% { transform: translate(0,0); opacity: 0; } 20% { opacity: .9; } 50% { transform: translate(18px,-26px); opacity: .7; } 80% { opacity: .5; } 100% { transform: translate(-10px,-44px); opacity: 0; } }
.ld-center { position: relative; z-index: 3; text-align: center; padding: 0 24px; }
.ld-capy { width: 120px; height: 90px; margin: 0 auto 6px; display: block; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); animation: ldBob 0.5s ease-in-out infinite; }
.ld-capy g { fill: #1c130c; }
.ld-capy .ld-legs rect { animation: ldStride .5s linear infinite; transform-origin: top center; }
.ld-capy .ld-legs rect:last-child { animation-delay: .25s; }
@keyframes ldBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes ldStride { 0%,100% { transform: rotate(16deg); } 50% { transform: rotate(-16deg); } }
.ld-prints { display: flex; gap: 10px; justify-content: center; height: 8px; margin-bottom: 10px; }
.ld-prints i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,206,107,.5); opacity: 0; animation: ldPrint 2s linear infinite; }
.ld-prints i:nth-child(2){animation-delay:.5s} .ld-prints i:nth-child(3){animation-delay:1s} .ld-prints i:nth-child(4){animation-delay:1.5s}
@keyframes ldPrint { 0% { opacity: 0; transform: scale(.5); } 20% { opacity: .8; } 100% { opacity: 0; transform: scale(1); } }
.ld-title { font-family: var(--display, 'Baloo 2'), system-ui; font-weight: 800; font-size: clamp(30px, 9vw, 54px); letter-spacing: 3px; line-height: 1;
  color: #fff3da; text-shadow: 0 2px 0 #7a4a1e, 0 0 26px rgba(255,190,90,.55); animation: ldTitleIn .8s cubic-bezier(.2,.9,.2,1) both; }
.ld-title em { color: #ffce6b; font-style: normal; text-shadow: 0 2px 0 #8a5210, 0 0 30px rgba(255,180,70,.8); }
@keyframes ldTitleIn { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.ld-tagline { margin-top: 8px; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,240,210,.6); animation: ldFadeIn 1.2s .3s both; }
@keyframes ldFadeIn { from { opacity: 0; } }
.ld-bar { position: relative; width: min(320px, 72vw); height: 10px; margin: 22px auto 0; border-radius: 20px;
  background: rgba(0,0,0,.45); border: 1px solid rgba(255,206,107,.25); overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,.6); }
.ld-fill { height: 100%; width: 0%; border-radius: 20px; background: linear-gradient(90deg, #ff9f5b, #ffce6b 60%, #fff0c2);
  box-shadow: 0 0 12px rgba(255,190,90,.7); transition: width .15s linear; }
.ld-shine { position: absolute; top: 0; left: 0; height: 100%; width: 40%; border-radius: 20px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); animation: ldShine 1.6s ease-in-out infinite; }
@keyframes ldShine { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }
.ld-row { display: flex; align-items: center; justify-content: space-between; width: min(320px, 72vw); margin: 10px auto 0;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; color: rgba(255,240,210,.75); }
.ld-pct { font-weight: 700; color: #ffce6b; }

/* play.fun embed: contain horizontal bleed and let leaderboard tabs wrap (v150) */
.shell { max-width: 100vw; box-sizing: border-box; overflow-x: hidden; }
.diff-row { display: flex; flex-wrap: wrap; gap: 6px; max-width: 100%; }
.diff-row .lb-tab { flex: 0 0 auto; }
.map-list, .lb-list { max-width: 100%; box-sizing: border-box; }