/* ============================================================
   LITTLE SKIES — tower-paper design system
   paper #FBF6E9 · ink #4A4238 · stamp #E2574C · skyink #2E7FA3
   brass #C9A24B · coral #FF6B6B · teal #2EC4B6 · amber #FFB84D
   violet #9B8CFF
   type: Fredoka (display) / Nunito (body) / IBM Plex Mono (strips)
   ============================================================ */
:root{
  --paper:#FBF6E9; --paper2:#F4ECD8; --ink:#4A4238; --ink2:#7A7062;
  --stamp:#E2574C; --skyink:#2E7FA3; --brass:#C9A24B; --good:#5FAE5A;
  --coral:#FF6B6B; --teal:#2EC4B6; --amber:#FFB84D; --violet:#9B8CFF;
  --shadow:0 8px 24px rgba(30,48,56,.16);
  --shadow-sm:0 3px 12px rgba(30,48,56,.12);
  --r:12px;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;overflow:hidden;background:#C6E2E8;
  font-family:'Nunito',system-ui,sans-serif;color:var(--ink);
  -webkit-user-select:none;user-select:none;touch-action:none;}
#c3d{position:fixed;inset:0;display:block;touch-action:none;}
button{font-family:inherit;color:inherit;border:none;background:none;cursor:pointer;padding:0;}
.mono{font-family:'IBM Plex Mono',monospace;}
.disp{font-family:'Fredoka',sans-serif;}

/* ---------- generic paper card ---------- */
.paper{background:rgba(253,251,246,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-radius:var(--r);box-shadow:var(--shadow-sm);border:1px solid rgba(74,66,56,.1);position:relative;}

/* ============================ HUD ============================ */
#hud{position:fixed;inset:0;pointer-events:none;z-index:20;}
#hud > *{pointer-events:auto;}
.hud-hide #hud{opacity:0;pointer-events:none;}
#hud{transition:opacity .3s;}

/* Distributed HUD: information stays at the top, tools hug the screen edges. */
#statusCluster{position:absolute;inset:0;pointer-events:none;
  transition:transform .28s cubic-bezier(.3,1.2,.35,1),opacity .2s;}
#statusCluster > *{pointer-events:auto;}
#hudDock{position:absolute;left:12px;top:50%;transform:translateY(-132px);
  padding:6px;display:flex;flex-direction:column;align-items:center;gap:4px;border-radius:16px;
  background:rgba(253,251,246,.91);box-shadow:0 7px 22px rgba(25,45,55,.2),inset 0 1px 0 #fff;
  transition:transform .28s cubic-bezier(.3,1.2,.35,1),opacity .2s;}
#topLeft{position:absolute;left:12px;top:calc(10px + var(--safe-t));display:flex;align-items:center;gap:7px;min-width:0;}
#cashChip{display:flex;align-items:center;gap:8px;padding:7px 10px;min-width:120px;}
/* struck-metal coin: rim, milled edge, embossed glyph and a moving gloss */
.coin-ico{position:relative;flex:none;border-radius:50%;
  background:conic-gradient(from 210deg,#C9952F,#FFE9A8 18%,#E8B84B 38%,#B8862A 55%,#FFE193 74%,#D8A63C 88%,#C9952F);
  box-shadow:0 1.5px 3px rgba(120,80,0,.32), inset 0 0 0 1.5px rgba(255,238,190,.85),
             inset 0 -2px 3px rgba(120,70,0,.4), inset 0 2px 3px rgba(255,255,255,.5);}
.coin-ico::before{content:"$";position:absolute;inset:12%;border-radius:50%;
  background:radial-gradient(circle at 36% 28%,#FFF0C4,#EFC868 62%,#D9A63E);
  display:grid;place-items:center;font-family:'Fredoka';font-weight:700;color:#8A6210;
  text-shadow:0 1px 0 rgba(255,247,214,.9),0 -1px 0 rgba(120,80,10,.35);
  box-shadow:inset 0 1px 2px rgba(120,80,10,.35);}
.coin-ico::after{content:"";position:absolute;left:8%;top:6%;width:52%;height:34%;border-radius:50%;
  background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(255,255,255,0));
  transform:rotate(-22deg);pointer-events:none;}
#cashChip .coin{width:27px;height:27px;}
#cashChip .coin::before{font-size:13px;}
#cashChip.flash .coin{animation:coinspin .5s;}
@keyframes coinspin{50%{transform:rotateY(180deg) scale(1.12);}}
#cashVal{font-family:'Fredoka';font-weight:700;font-size:22px;letter-spacing:.3px;min-width:64px;}
#cashChip.flash{animation:cashflash .5s;}
@keyframes cashflash{30%{transform:scale(1.1);}}
#dayChip{display:flex;align-items:center;gap:7px;padding:6px 7px;font-weight:800;font-size:12px;color:var(--ink2);white-space:nowrap;}
#dayChip .sun{width:16px;height:16px;border-radius:50%;background:#FFD84D;box-shadow:0 0 0 3px rgba(255,216,77,.35);transition:background .8s, box-shadow .8s;}
#dayChip .sun.moon{background:#DCE7F5;box-shadow:0 0 0 3px rgba(180,200,235,.4);}
#dayChip b{color:var(--ink);}
.spd{width:34px;height:34px;border-radius:11px;background:var(--paper2);border:1px solid rgba(74,66,56,.14);
  box-shadow:0 1px 4px rgba(30,48,56,.12);display:grid;place-items:center;color:var(--ink2);transition:all .12s;}
.spd svg{width:15px;height:15px;fill:currentColor;}
.spd:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(74,66,56,.15);}
.spd.on{background:var(--skyink);border-color:#1F5E7C;color:#fff;box-shadow:0 2px 0 #1F5E7C;}

/* safety + rank */
#topRight{position:absolute;right:12px;top:calc(10px + var(--safe-t));display:flex;align-items:center;gap:6px;min-width:0;}
#starChip{display:flex;gap:3px;padding:7px 4px;}
.star{width:24px;height:24px;position:relative;transition:transform .3s;}
.star svg{width:100%;height:100%;fill:#F5C540;stroke:#C9952F;stroke-width:1.6;filter:drop-shadow(0 1.5px 0 rgba(0,0,0,.12));}
.star.off svg{fill:#E2DAC6;stroke:#B9AE95;}
.star.pop{animation:starpop .55s;}
@keyframes starpop{40%{transform:scale(1.4) rotate(18deg);}}
#lvlChip{display:flex;align-items:center;gap:7px;padding:4px 5px;}
#lvlRing{width:34px;height:34px;position:relative;}
#lvlRing svg{width:100%;height:100%;transform:rotate(-90deg);}
#lvlRing .bg{fill:none;stroke:#E5DCC5;stroke-width:4;}
#lvlRing .fg{fill:none;stroke:var(--skyink);stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset .5s;}
#lvlRing span{position:absolute;inset:0;display:grid;place-items:center;font-family:'Fredoka';font-weight:700;font-size:14px;}
#lvlChip small{font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--ink2);}
#lvlChip .lvlname{font-weight:800;font-size:12px;line-height:1.05;max-width:104px;}
#muteBtn{width:34px;height:34px;border-radius:50%;background:rgba(253,251,246,.92);border:1px solid rgba(74,66,56,.14);
  box-shadow:0 1px 4px rgba(30,48,56,.12);color:var(--ink2);display:grid;place-items:center;}
#muteBtn svg{width:16px;height:16px;fill:currentColor;}
/* ---------- flight strip rail ---------- */
#stripRail{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;
  gap:7px;padding:10px 8px 10px 14px;max-height:58vh;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;
  mask-image:linear-gradient(0deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
  transition:opacity .2s,transform .28s;}
#stripRail::-webkit-scrollbar{display:none;}
.strip{width:158px;min-width:158px;background:rgba(253,251,246,.94);border-radius:10px;box-shadow:var(--shadow-sm);
  border:1px solid rgba(74,66,56,.12);display:flex;align-items:stretch;overflow:hidden;
  transform:translateX(0);transition:transform .18s, opacity .3s, box-shadow .18s;
  animation:stripIn .4s cubic-bezier(.2,1.4,.4,1);cursor:pointer;position:relative;}
@keyframes stripIn{from{transform:translateX(180px) scale(.94);}to{transform:translateX(0) scale(1);}}
.strip.gone{opacity:0;transform:translateX(180px) !important;pointer-events:none;}
.strip:active{transform:scale(.97);}
.strip .tab{width:9px;flex:none;}
.strip .bd{flex:1;padding:5px 7px 5px 8px;min-width:0;}
.strip .cs{font-family:'IBM Plex Mono';font-weight:700;font-size:12px;letter-spacing:.02em;display:flex;justify-content:space-between;align-items:center;}
.strip .cs .st{width:8px;height:8px;border-radius:50%;background:#B9AE95;flex:none;}
.strip .st.inb{background:var(--skyink);}
.strip .st.lock{background:var(--good);box-shadow:0 0 0 3px rgba(95,174,90,.25);}
.strip .st.hold{background:var(--brass);}
.strip .st.warn{background:var(--stamp);animation:blink .6s infinite;}
@keyframes blink{50%{opacity:.25;}}
.strip .sub{display:flex;align-items:center;gap:5px;margin-top:3px;font-size:9.5px;font-weight:800;color:var(--ink2);letter-spacing:.06em;}
.strip .fuel{flex:1;height:5px;border-radius:3px;background:#E5DCC5;overflow:hidden;}
.strip .fuel i{display:block;height:100%;border-radius:3px;background:var(--good);transition:width .5s linear, background .4s;}
.strip.lowfuel .fuel i{background:var(--stamp);}
.strip.lowfuel{box-shadow:0 0 0 2px rgba(226,87,76,.45), var(--shadow-sm);}
.strip .holes{display:none;}
.strip .holes i{width:4px;height:4px;border-radius:50%;background:rgba(74,66,56,.16);}

/* ---------- build FAB + drawer ---------- */
#buildFab{position:absolute;right:14px;bottom:calc(15px + var(--safe-b));width:58px;height:58px;border-radius:19px;
  background:var(--brass);border:2.5px solid #A07E2E;box-shadow:0 3px 0 #A07E2E, 0 10px 22px rgba(30,48,56,.22);
  display:grid;place-items:center;color:#fff;transition:transform .15s;z-index:2;}
#buildFab:active{transform:translateY(2px);box-shadow:0 1px 0 #A07E2E;}
#buildFab svg{width:28px;height:28px;fill:#FFF6DE;filter:drop-shadow(0 1.5px 0 rgba(0,0,0,.18));}
#buildFab .bang{position:absolute;top:-5px;right:-5px;width:20px;height:20px;border-radius:50%;background:var(--stamp);
  border:2px solid #fff;display:none;place-items:center;color:#fff;font-family:'Fredoka';font-weight:700;font-size:12px;}
#buildFab.notif .bang{display:grid;animation:bangpop .5s;}
@keyframes bangpop{50%{transform:scale(1.5);}}

/* ---------- on-screen camera controls ---------- */
#camCtl{position:absolute;left:12px;top:50%;transform:translateY(4px);display:flex;flex-direction:column;gap:3px;padding:4px;border-radius:15px;}
.cam-btn{width:38px;height:38px;border-radius:11px;background:transparent;
  border:1px solid transparent;color:var(--ink2);
  display:grid;place-items:center;transition:transform .12s, background .12s;}
.cam-btn:hover{background:var(--paper2);border-color:rgba(74,66,56,.1);}
.cam-btn:active{transform:scale(.94);background:rgba(244,240,230,.95);}
.cam-btn svg{width:19px;height:19px;fill:currentColor;}

#drawer{position:fixed;inset:0;z-index:30;display:flex;align-items:flex-end;
  padding:20px 10px calc(10px + var(--safe-b));pointer-events:none;visibility:hidden;
  background:rgba(24,48,58,0);transition:background .25s,visibility 0s linear .34s;}
#drawer.open{pointer-events:auto;visibility:visible;background:rgba(24,48,58,.2);transition-delay:0s;}
#drawerCard{width:min(900px,100%);max-height:min(74dvh,640px);margin:0 auto;background:var(--paper);
  border-radius:20px 20px 16px 16px;box-shadow:0 -8px 30px rgba(30,48,56,.2), var(--shadow-sm);
  border:1px solid rgba(74,66,56,.12);overflow:hidden;position:relative;
  display:grid;grid-template-rows:auto auto minmax(0,1fr);
  transform:translateY(calc(100% + 32px));transition:transform .34s cubic-bezier(.3,1.2,.35,1);}
#drawer.open #drawerCard{transform:translateY(0);}
#drawerClip{display:none;}
#drawerHead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 16px 6px;}
#drawerHead>div{min-width:0;}
#drawerHead h2{margin:0;font-family:'Fredoka';font-weight:600;font-size:19px;letter-spacing:.02em;}
#drawerHead .sub{font-size:11px;font-weight:800;color:var(--ink2);letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#drawerClose{width:34px;height:34px;border-radius:50%;background:var(--paper2);border:2px solid rgba(74,66,56,.16);
  font-family:'Fredoka';font-size:16px;color:var(--ink2);flex:none;}
#shopTabs{display:flex;gap:6px;padding:8px 14px 6px;overflow-x:auto;scrollbar-width:none;}
#shopTabs::-webkit-scrollbar{display:none;}
.tab-btn{padding:7px 14px;border-radius:999px;font-weight:900;font-size:12px;letter-spacing:.04em;color:var(--ink2);
  background:var(--paper2);border:2px solid rgba(74,66,56,.12);transition:all .15s;white-space:nowrap;flex:none;}
.tab-btn.on{background:var(--skyink);border-color:#1F5E7C;color:#fff;box-shadow:0 2px 0 #1F5E7C;}
#shopScroll{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:stretch;gap:12px;
  overflow-y:auto;overscroll-behavior:contain;padding:12px 16px 18px;min-height:0;scrollbar-gutter:stable;}
.shop-card{min-width:0;background:#fff;border-radius:14px;border:2px solid rgba(74,66,56,.14);
  box-shadow:0 3px 0 rgba(74,66,56,.1);padding:9px 10px 10px;display:flex;flex-direction:column;gap:6px;position:relative;
  transition:transform .14s, box-shadow .14s;}
.shop-card:not(.locked):not(.owned):active{transform:translateY(2px);box-shadow:0 1px 0 rgba(74,66,56,.1);}
.shop-card .thumb{height:76px;border-radius:10px;background:linear-gradient(#DFF2F5,#CBE9EE 70%,#BFE3D5);display:grid;place-items:center;overflow:hidden;}
.shop-card .thumb img{width:100%;height:100%;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 4px 3px rgba(30,60,70,.2));}
.shop-card h3{margin:0;font-family:'Fredoka';font-weight:600;font-size:14px;line-height:1.1;}
.shop-card p{margin:0;font-size:10.5px;font-weight:700;color:var(--ink2);line-height:1.35;min-height:28px;flex:1;}
.shop-card .buy{display:flex;align-items:center;justify-content:center;gap:5px;padding:7px 0;border-radius:10px;
  background:var(--good);border:2px solid #479043;box-shadow:0 2.5px 0 #479043;color:#fff;font-family:'Fredoka';font-weight:600;font-size:14px;}
.shop-card .buy .c{width:15px;height:15px;}
.shop-card .buy .c::before{font-size:8px;}
.shop-card.broke .buy{background:#B9AE95;border-color:#96896F;box-shadow:0 2.5px 0 #96896F;opacity:.85;}
.shop-card.owned .buy{background:var(--paper2);border-color:rgba(74,66,56,.2);box-shadow:none;color:var(--ink2);}
.shop-card.locked{opacity:.92;}
.shop-card.locked .thumb{filter:saturate(.15) brightness(1.05);}
.shop-card .lock{position:absolute;inset:0;border-radius:14px;background:rgba(251,246,233,.55);display:grid;place-items:center;}
.shop-card .lock span{background:var(--ink);color:var(--paper);font-weight:900;font-size:10.5px;letter-spacing:.08em;
  padding:5px 11px;border-radius:999px;transform:rotate(-4deg);box-shadow:0 3px 8px rgba(0,0,0,.25);}
.shop-card .cnt{position:absolute;top:6px;right:6px;background:var(--skyink);color:#fff;font-family:'Fredoka';font-weight:600;
  font-size:11px;padding:2px 8px;border-radius:999px;border:2px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,.18);}

/* ---------- build/placement mode ---------- */
#placeBar{position:fixed;left:50%;bottom:calc(20px + var(--safe-b));transform:translateX(-50%) translateY(140px);
  display:flex;gap:10px;align-items:center;z-index:25;transition:transform .3s cubic-bezier(.3,1.2,.35,1);}
#placeBar.on{transform:translateX(-50%) translateY(0);}
body.placing #c3d{cursor:crosshair;}
body.placing #hudDock{transform:translateX(-130%);opacity:0;pointer-events:none;}
body.placing #stripRail{transform:translate(130%,-50%);opacity:0;pointer-events:none;}
body.placing #statusCluster,body.placing #camCtl,body.placing #buildFab{transform:translateY(130%);opacity:0;pointer-events:none;}
.pb-btn{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;color:#fff;font-family:'Fredoka';border:2.5px solid;}
.pb-btn svg{width:24px;height:24px;fill:currentColor;}
#pbOk{background:var(--good);border-color:#479043;box-shadow:0 4px 0 #479043;}
#pbNo{background:var(--stamp);border-color:#B23B32;box-shadow:0 4px 0 #B23B32;}
#pbRot{background:var(--skyink);border-color:#1F5E7C;box-shadow:0 4px 0 #1F5E7C;}
.pb-btn:active{transform:translateY(3px);box-shadow:0 1px 0 !important;}
.pb-btn:disabled{filter:saturate(.2) brightness(1.05);opacity:.55;box-shadow:none !important;}
#placeHint{position:fixed;left:50%;top:calc(14px + var(--safe-t));transform:translateX(-50%);z-index:25;
  width:max-content;max-width:calc(100vw - 28px);padding:9px 18px;font-weight:800;font-size:13px;line-height:1.35;
  text-align:center;display:none;pointer-events:none;}
#placeHint.on{display:block;animation:slipIn .35s cubic-bezier(.2,1.3,.4,1);}

/* ---------- toasts ---------- */
#toasts{position:fixed;top:calc(58px + var(--safe-t));left:50%;transform:translateX(-50%);display:flex;flex-direction:column;
  gap:8px;align-items:center;z-index:40;pointer-events:none;}
.toast{padding:9px 20px;font-weight:800;font-size:13.5px;white-space:nowrap;animation:slipIn .4s cubic-bezier(.2,1.3,.4,1);transition:opacity .4s, transform .4s;}
.toast.out{opacity:0;transform:translateY(-14px);}
.toast b{color:var(--skyink);}
.toast.bad b{color:var(--stamp);}
.toast.bad{border-color:rgba(226,87,76,.5);}
@keyframes slipIn{from{opacity:0;transform:translateY(-16px) rotate(-1deg);}to{opacity:1;transform:none;}}

/* ---------- combo ---------- */
#combo{position:fixed;top:34%;left:50%;transform:translate(-50%,-50%);z-index:15;pointer-events:none;
  font-family:'Fredoka';font-weight:700;color:#fff;text-align:center;opacity:0;}
#combo .big{font-size:29px;color:var(--ink);background:rgba(253,251,246,.94);padding:8px 22px;border-radius:999px;
  box-shadow:var(--shadow-sm);display:inline-block;letter-spacing:.02em;}
#combo .sm{font-size:12px;color:#fff;text-shadow:0 1px 3px rgba(30,48,56,.55);letter-spacing:.18em;font-weight:800;margin-top:7px;text-transform:uppercase;}
#combo.pop{animation:combopop .9s cubic-bezier(.2,1.4,.4,1);}
@keyframes combopop{0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-6deg);}
 18%{opacity:1;transform:translate(-50%,-50%) scale(1.14) rotate(2deg);}
 30%{transform:translate(-50%,-50%) scale(1);} 75%{opacity:1;} 100%{opacity:0;transform:translate(-50%,-62%) scale(.96);}}

/* ---------- modals ---------- */
.veil{position:fixed;inset:0;background:rgba(40,58,66,.45);backdrop-filter:blur(3px);z-index:50;
  display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .3s;padding:16px;}
.veil.on{opacity:1;pointer-events:auto;}
.modal{width:min(430px,94vw);max-height:86vh;overflow-y:auto;padding:22px 22px 20px;border-radius:18px;
  transform:scale(.94);transition:transform .35s cubic-bezier(.2,1.4,.4,1);}
.veil.on .modal{transform:scale(1);}
.modal h2{margin:0 0 2px;font-family:'Fredoka';font-weight:600;font-size:24px;}
.modal .kicker{font-size:10.5px;font-weight:900;letter-spacing:.16em;color:var(--ink2);margin-bottom:12px;}
.report-row{display:flex;justify-content:space-between;align-items:baseline;padding:7px 2px;border-bottom:2px dashed rgba(74,66,56,.14);font-weight:800;font-size:14px;}
.report-row span:last-child{font-family:'IBM Plex Mono';font-weight:700;}
.report-row.total{border-bottom:none;font-family:'Fredoka';font-size:17px;padding-top:12px;}
.report-row.total span:last-child{color:var(--good);font-size:20px;}
.stamp-mark{position:absolute;top:18px;right:16px;border:3px solid var(--good);color:var(--good);border-radius:8px;
  font-family:'Fredoka';font-weight:700;font-size:15px;letter-spacing:.14em;padding:4px 12px;transform:rotate(7deg) scale(0);
  opacity:.9;mix-blend-mode:multiply;}
.stamp-mark.bad{border-color:var(--stamp);color:var(--stamp);}
.veil.on .stamp-mark{animation:stampin .5s .45s cubic-bezier(.3,1.6,.4,1) forwards;}
@keyframes stampin{0%{transform:rotate(14deg) scale(2.2);opacity:0;}60%{opacity:.9;}100%{transform:rotate(7deg) scale(1);opacity:.9;}}
.btn{display:block;width:100%;padding:13px 0;margin-top:10px;border-radius:13px;font-family:'Fredoka';font-weight:600;
  font-size:16px;letter-spacing:.03em;color:#fff;background:var(--skyink);border:2.5px solid #1F5E7C;box-shadow:0 4px 0 #1F5E7C;transition:all .12s;}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #1F5E7C;}
.btn.warm{background:var(--brass);border-color:#A07E2E;box-shadow:0 4px 0 #A07E2E;}
.btn.warm:active{box-shadow:0 1px 0 #A07E2E;}
.btn.ghost{background:var(--paper2);border-color:rgba(74,66,56,.2);box-shadow:0 4px 0 rgba(74,66,56,.15);color:var(--ink2);}
.btn.ghost:active{box-shadow:0 1px 0 rgba(74,66,56,.15);}
.btn.danger{background:var(--stamp);border-color:#B23B32;box-shadow:0 4px 0 #B23B32;}

/* ---------- title screen ----------
   The menu now floats over a real, freshly generated island rendered live
   behind it — so the scrim is only dark enough to keep the type readable. */
#title{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;transition:opacity .6s;padding:20px;
  background:radial-gradient(ellipse 90% 70% at 50% 42%, rgba(20,42,52,.06) 0%, rgba(20,42,52,.30) 62%, rgba(16,36,46,.52) 100%);}
#title.gone{opacity:0;pointer-events:none;}
#titleCard{text-align:center;z-index:2;padding:24px 26px 22px;width:min(660px,94vw);
  background:rgba(251,246,233,.70);-webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);
  border:1.5px solid rgba(255,255,255,.55);border-radius:26px;
  box-shadow:0 22px 54px rgba(14,34,44,.34), inset 0 1px 0 rgba(255,255,255,.7);
  animation:titleIn .7s cubic-bezier(.2,1.25,.35,1) both;}
@keyframes titleIn{from{opacity:0;transform:translateY(18px) scale(.96);}to{opacity:1;transform:none;}}
#titleLogo{font-family:'Fredoka';font-weight:700;font-size:clamp(40px,10vw,62px);line-height:1;color:var(--ink);
  letter-spacing:.01em;text-shadow:0 2px 0 rgba(255,255,255,.7);}
#titleLogo em{font-style:normal;color:var(--skyink);}
#titleSub{font-weight:900;letter-spacing:.3em;font-size:11px;color:var(--ink);opacity:.7;margin:9px 0 4px;text-transform:uppercase;}
#isleRow{display:flex;align-items:center;justify-content:center;gap:8px;margin:10px 0 7px;}
#isleName{font-family:'IBM Plex Mono';font-weight:700;font-size:11.5px;letter-spacing:.09em;color:var(--ink2);
  background:rgba(255,255,255,.5);border:1.5px dashed rgba(74,66,56,.28);border-radius:999px;padding:5px 13px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px;}
#reroll{height:32px;flex:none;border-radius:999px;background:var(--paper2);border:2px solid rgba(74,66,56,.2);
  box-shadow:0 2.5px 0 rgba(74,66,56,.16);display:flex;align-items:center;gap:5px;padding:0 10px 0 8px;
  color:var(--ink2);font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;transition:transform .3s;}
#reroll svg{width:16px;height:16px;fill:currentColor;}
#reroll:active{transform:translateY(2px) rotate(180deg);box-shadow:0 .5px 0 rgba(74,66,56,.16);}
#reroll.spin{animation:rerollspin .55s cubic-bezier(.3,1.2,.4,1);}
@keyframes rerollspin{to{transform:rotate(360deg);}}
#mapKicker{font-size:9.5px;font-weight:900;letter-spacing:.17em;color:var(--ink2);margin:2px 0 2px;}
#mapHelp{margin:0 auto 9px;max-width:430px;color:var(--ink2);font-size:11px;font-weight:800;line-height:1.3;}
#mapSelect{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:12px;}
.map-option{min-width:0;padding:7px;border-radius:14px;background:rgba(255,255,255,.5);border:2px solid rgba(74,66,56,.13);
  box-shadow:0 2px 0 rgba(74,66,56,.11);text-align:left;transition:transform .14s,border-color .14s,background .14s,box-shadow .14s;}
.map-option:hover{transform:translateY(-2px);}
.map-option.on{background:#fff;border-color:var(--skyink);box-shadow:0 3px 0 #1F5E7C,0 6px 15px rgba(46,127,163,.17);}
.map-option canvas{display:block;width:100%;height:auto;aspect-ratio:55/26;border-radius:9px;
  background:linear-gradient(#d9f1f5,#c1e4eb);margin-bottom:5px;}
.map-option strong{display:block;font-family:'Fredoka';font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.map-option small{display:block;font-size:8.5px;font-weight:900;letter-spacing:.08em;color:var(--ink2);margin-top:1px;text-transform:uppercase;}
#titleBtns{display:grid;grid-template-columns:1.35fr 1fr;gap:8px;margin:0 auto;}
#titleBtns .btn{margin-top:0;}
#btnContinue{grid-column:1/-1;}
#titleFoot{position:absolute;bottom:calc(12px + var(--safe-b));font-size:10.5px;font-weight:800;
  color:rgba(255,255,255,.9);text-shadow:0 1px 4px rgba(20,40,50,.6);letter-spacing:.1em;z-index:2;}

/* ---------- tutorial ---------- */
#coach{position:fixed;left:14px;bottom:calc(14px + var(--safe-b));z-index:45;pointer-events:none;
  width:min(420px,calc(100vw - 28px));
  transform:translateX(calc(-100% - 28px));transition:transform .4s cubic-bezier(.25,1.3,.4,1);}
#coach.on{transform:translateX(0);}
#coachBub{padding:11px 15px;border-radius:15px;font-weight:800;font-size:13.5px;line-height:1.45;pointer-events:auto;text-align:left;}
#coachBub b{color:var(--skyink);}
#coachBub .nm{display:block;font-size:9.5px;letter-spacing:.14em;color:var(--brass);font-weight:900;margin-bottom:3px;}
#coachNext{margin-top:8px;display:inline-block;padding:6px 15px;border-radius:999px;background:var(--skyink);color:#fff;
  font-family:'Fredoka';font-weight:600;font-size:12.5px;border:2px solid #1F5E7C;box-shadow:0 2.5px 0 #1F5E7C;}
#coachNext:active{transform:translateY(2px);box-shadow:0 .5px 0 #1F5E7C;}

/* focus ping ring for strip taps etc. */
#leadCard{position:fixed;z-index:18;pointer-events:none;padding:5px 11px;font-weight:800;font-size:11.5px;opacity:0;transition:opacity .25s;white-space:nowrap;}
#leadCard.on{opacity:1;}
#leadCard .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;}

/* ---------- leaderboard ---------- */
.lb-row{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:2px dashed rgba(74,66,56,.12);font-weight:800;font-size:13.5px;}
.lb-row .rk{width:26px;font-family:'Fredoka';color:var(--ink2);}
.lb-row .flag{width:24px;font-size:17px;line-height:1;text-align:center;}
.lb-row .nm{flex:1;font-family:'IBM Plex Mono';font-weight:700;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;}
.lb-row .sc{font-family:'IBM Plex Mono';font-weight:700;color:var(--skyink);}
.lb-row.me{background:rgba(46,127,163,.1);border-radius:8px;}
#lbIdentity{margin:10px 0 5px;padding:8px 11px;border-radius:10px;background:rgba(46,127,163,.1);
  color:var(--skyink);font-family:'IBM Plex Mono';font-size:11.5px;font-weight:700;}
#lbNote{font-size:10.5px;font-weight:800;color:var(--ink2);line-height:1.4;}

@media (max-width:900px){
  #hudDock{left:6px;top:50%;transform:translateY(-118px);padding:5px;gap:3px;border-radius:15px;}
  #topLeft,#topRight{gap:3px;}
  #topLeft{left:6px;top:calc(6px + var(--safe-t));flex-direction:column;align-items:flex-start;}
  #topRight{right:6px;top:calc(6px + var(--safe-t));flex-direction:column;align-items:flex-end;}
  #cashChip{min-width:0;padding:5px 7px;}
  #cashChip .coin{width:22px;height:22px;}
  #cashVal{font-size:17px;min-width:48px;}
  #dayChip{padding:5px 7px;font-size:10px;gap:4px;}
  #dayChip .sun{display:none;}
  .spd{width:29px;height:31px;}
  .rankCopy{display:none;}
  #starChip{padding:4px 6px;gap:1px;}
  .star{width:18px;height:18px;}
  #lvlChip{padding:2px 5px;}
  #lvlRing{width:31px;height:31px;}
  #muteBtn{width:31px;height:31px;}
  #camCtl{left:6px;top:50%;padding:3px;}
  .cam-btn{width:34px;height:34px;}
  #buildFab{right:7px;bottom:calc(8px + var(--safe-b));width:48px;height:48px;border-radius:16px;}
  #buildFab svg{width:23px;height:23px;}
  #drawer{padding-left:6px;padding-right:6px;}
  #drawerCard{max-height:min(82dvh,680px);}
  #shopScroll{grid-template-columns:repeat(2,minmax(132px,1fr));gap:8px;padding:9px 10px 14px;}
  .shop-card{padding:8px;gap:5px;}
  .shop-card .thumb{height:66px;}
  #drawerHead{padding:13px 12px 4px;}
  #drawerHead .sub{font-size:9px;}
  #shopTabs{padding-left:10px;padding-right:10px;}
  #stripRail{right:0;top:52%;max-height:50vh;padding-right:5px;}
  .strip{width:132px;min-width:132px;}
  #coach{left:8px;bottom:calc(68px + var(--safe-b));width:min(400px,calc(100vw - 76px));min-width:0;}
  #title{padding:10px;}
  #titleCard{padding:18px 14px 16px;}
  #titleLogo{font-size:40px;}
  .map-option{padding:5px;}
  .map-option strong{font-size:10.5px;}
  .map-option small{font-size:7.5px;}
  .modal{padding:18px 16px 16px;}
}
@media (max-width:480px){
  #cashChip .coin,#clock{display:none;}
  #cashChip{padding-left:5px;}
  #cashVal{min-width:45px;}
  #dayChip{font-size:10.5px;}
  #buildFab{width:44px;height:44px;}
  #drawerCard{max-height:86dvh;}
  #titleBtns{grid-template-columns:1fr;}
  #btnContinue{grid-column:auto;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;transition-duration:.05s !important;}
}

/* ---------- runtime additions ---------- */
.coinfly{position:fixed;z-index:44;width:18px;height:18px;pointer-events:none;
  transition:left .62s cubic-bezier(.5,-0.1,.6,1), top .62s cubic-bezier(.3,.6,.4,1), transform .62s, opacity .62s;}
.coinfly::before{font-size:9px;}
.floaty{position:fixed;z-index:43;pointer-events:none;font-family:'Fredoka';font-weight:600;font-size:16px;color:#fff;
  text-shadow:0 1px 2px rgba(30,48,56,.6),0 0 8px rgba(30,48,56,.35);transform:translate(-50%,-50%);animation:floatup 1.25s ease-out forwards;}
@keyframes floatup{0%{opacity:0;transform:translate(-50%,-30%) scale(.6);}18%{opacity:1;transform:translate(-50%,-50%) scale(1.05);}
  100%{opacity:0;transform:translate(-50%,-190%) scale(1);}}
.toast.warm{border-color:rgba(201,162,75,.55);} .toast.warm b{color:var(--brass);}
#sumRows .row, #bkRows .row, #closedRows .row{display:flex;justify-content:space-between;align-items:center;padding:7px 2px;font-weight:800;font-size:13.5px;
  border-bottom:2px dashed rgba(74,66,56,.14);}
#sumRows .row b, #bkRows .row b, #closedRows .row b{font-family:'IBM Plex Mono';color:var(--skyink);}
.closedCopy{font-weight:800;font-size:13px;line-height:1.5;color:var(--ink2);margin:4px 0 8px;}
#leadCard .lc-name{font-family:'Fredoka';font-weight:600;font-size:13px;}
#leadCard .lc-sub{font-size:10.5px;color:var(--ink2);margin-top:1px;}
#leadCard .lc-sub b{color:var(--skyink);}
#leadCard .lc-sell{margin-top:6px;padding:5px 12px;border-radius:999px;background:var(--stamp);border:2px solid #B23B32;
  box-shadow:0 2.5px 0 #B23B32;color:#fff;font-weight:900;font-size:11px;letter-spacing:.03em;}
#leadCard .lc-sell:active{transform:translateY(2px);box-shadow:0 .5px 0 #B23B32;}
.lb-empty{padding:22px 6px;text-align:center;font-weight:800;color:var(--ink2);font-size:12.5px;line-height:1.5;}
#placeHint .no{color:var(--stamp);}
#muteBtn.off svg{opacity:.35;}
.pb-btn:disabled{pointer-events:auto;}
#gearNote{display:none;}
#cashChip.debt .disp{color:var(--stamp);}
#cashChip.debt{animation:debtbob 1.1s ease-in-out infinite;}
@keyframes debtbob{50%{transform:rotate(-1.1deg) translateY(-2.5px);}}
.strip.mday{animation:mpulse .85s ease-in-out infinite;}
@keyframes mpulse{50%{box-shadow:0 0 0 3px rgba(226,87,76,.5);transform:translateX(-4px);}}
.confetto{position:fixed;top:-16px;z-index:46;width:9px;height:13px;border-radius:2px;pointer-events:none;
  box-shadow:0 1px 2px rgba(74,66,56,.25);animation:confall 1.9s cubic-bezier(.3,.35,.62,1) forwards;}
.confetto:nth-child(even){width:11px;height:8px;animation-duration:2.15s;}
@keyframes confall{0%{opacity:0;transform:translate(0,0) rotate(0deg) scaleY(1);}
  9%{opacity:1;}55%{transform:translate(calc(var(--dx,0px)*.6),52vh) rotate(340deg) scaleY(.55);}
  100%{opacity:.92;transform:translate(var(--dx,0px),109vh) rotate(640deg) scaleY(1);}}