:root{--cream:#f5f2e3;--ink:#28180c;--muted:#6f5d48;--boom:#45cd83;--boomInk:#1d7a4a;--bust:#d56a58;--bustInk:#a8402f;--ghost:#f9f4d7;--mist:#cfded9;--line:rgba(40,24,12,.12);--shadow:0 6px 20px rgba(60,40,20,.18),0 1px 3px rgba(60,40,20,.15);--amber:#e3a33b;--fs:1}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#cfded9;color:var(--ink);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
#world{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#world.placing{cursor:crosshair}
.hidden{display:none!important}
.muted{color:var(--muted);font-weight:500}
.small{font-size:12px}
.card{background:var(--cream);border-radius:14px;box-shadow:var(--shadow);padding:10px 12px}
.lbl{font-size:12px;font-weight:700;letter-spacing:.02em;margin-bottom:6px}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;margin-top:3px}
.pos{color:var(--boomInk);font-weight:700}.neg{color:var(--bustInk);font-weight:700}
.btn{font:600 14px Inter,system-ui,sans-serif;border:0;border-radius:999px;padding:10px 18px;cursor:pointer;color:var(--ink);background:#e8e1c8;transition:transform .12s,background .12s}
.btn:hover{transform:translateY(-1px);background:#ded5b6}.btn:active{transform:none}
.btn.primary{background:var(--ink);color:var(--cream)}.btn.primary:hover{background:#3d2a1a}
.btn.ghost{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(40,24,12,.3)}
.btn.sm{padding:5px 10px;font-size:12px;margin-top:8px;width:100%}
.btn.boom{background:var(--boom);color:#0f3b24}.btn.bust{background:var(--bust);color:#fff}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.link{background:none;border:0;font:600 12px Inter;color:var(--muted);cursor:pointer;text-decoration:underline}
button:focus-visible,input:focus-visible{outline:2.5px solid #4b6d88;outline-offset:2px}

#hud{position:fixed;inset:0;pointer-events:none}
#hud>*{pointer-events:auto}
#incomeCard{position:absolute;left:16px;top:16px;width:220px}
.bar{display:flex;height:10px;border-radius:6px;overflow:hidden;background:#e5dfc8}
.bar .inc{background:var(--boom);transition:width .4s}.bar .upk{background:var(--bust);transition:width .4s}
.nums{font-size:15px}
.banner{position:absolute;left:50%;top:16px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:10px 14px 10px 12px;border-radius:14px;color:#fff;box-shadow:var(--shadow);max-width:min(460px,calc(100vw - 560px));min-width:260px;animation:drop .35s ease-out}
.banner.bust{background:var(--bust)}.banner.boom{background:#2f9d63}
.banner b{display:block;font-size:16px}.banner span{font-size:13px}
.banner .ico{font-size:20px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;flex:none}
.banner .why{margin-left:auto;flex:none;width:26px;height:26px;border-radius:50%;border:0;background:rgba(255,255,255,.25);color:#fff;font-weight:800;cursor:pointer}
.explain{position:absolute;left:50%;top:84px;transform:translateX(-50%);background:var(--cream);border-radius:12px;padding:10px 14px;box-shadow:var(--shadow);max-width:420px;font-size:13px;line-height:1.45}
@keyframes drop{from{opacity:0;transform:translate(-50%,-14px)}to{opacity:1;transform:translate(-50%,0)}}
#nwCard{position:absolute;right:16px;top:16px;width:284px}
.nwbig{font:800 22px Inter;letter-spacing:-.01em}
#nwChart{width:260px;height:84px;display:block;margin-top:4px}
.legend{display:flex;gap:12px;font-size:11px;color:var(--muted);font-weight:600}.legend i{display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:5px;vertical-align:middle}
.lyou{background:var(--ink)}.lghost{background:repeating-linear-gradient(90deg,#8d7d61 0 4px,transparent 4px 7px)}
.toggle{font-size:11px;font-weight:600;color:var(--muted);display:inline-flex;align-items:center;gap:4px;cursor:pointer}
#miniCards{position:absolute;right:16px;top:190px;display:flex;gap:10px;width:284px}
.mini{flex:1;padding:8px 10px}
#pie{width:64px;height:64px;float:left;margin-right:6px}
.pieLegend{font-size:10px;line-height:1.35;color:var(--muted);font-weight:600;overflow:hidden}
.meter{height:10px;border-radius:6px;background:#e5dfc8;overflow:hidden;margin:8px 0 6px}.meter span{display:block;height:100%;width:0;background:#9bb3a2;transition:width .4s,background .4s}

#palette{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;max-width:calc(100vw - 32px)}
.tabs{display:flex;gap:4px;background:var(--cream);border-radius:12px 12px 0 0;padding:6px 6px 0;box-shadow:0 -2px 10px rgba(60,40,20,.08)}
.tab{font:700 13px Inter;border:0;background:transparent;padding:8px 14px;border-radius:9px 9px 0 0;cursor:pointer;color:var(--muted);position:relative}
.tab.on{background:#ebe5cf;color:var(--ink)}
.tab.locked{opacity:.5}.tab .lk{font-size:10px;font-weight:600;margin-left:4px}
.tab.risk{background:repeating-linear-gradient(135deg,#e9c341 0 6px,#2a2318 6px 12px);color:#fff;text-shadow:0 1px 2px #000}
.tab.risk.on{box-shadow:inset 0 0 0 3px #ebe5cf}
.items{display:flex;gap:8px;background:#ebe5cf;padding:10px;border-radius:14px;box-shadow:var(--shadow);overflow-x:auto;max-width:100%}
.item{width:104px;flex:none;border:0;background:var(--cream);border-radius:12px;padding:6px 6px 8px;cursor:pointer;text-align:center;font:600 12px Inter;color:var(--ink);position:relative;transition:transform .12s,box-shadow .12s}
.item:hover{transform:translateY(-2px)}
.item canvas{width:84px;height:60px;display:block;margin:0 auto}
.item .cost{display:block;font-weight:700;color:var(--muted);font-size:11px;margin-top:1px}
.item.sel{box-shadow:0 0 0 3px var(--ghost),0 0 16px 4px rgba(249,244,215,.9),inset 0 0 0 1.5px var(--ink)}
.item.cant .cost{color:var(--bustInk)}
.item.owned::after{content:'Built';position:absolute;top:5px;right:5px;font-size:9px;background:var(--ink);color:var(--cream);padding:2px 5px;border-radius:6px}
.item kbd{position:absolute;left:6px;top:5px;font:700 9px Inter;color:var(--muted)}

#timeCard{position:absolute;right:16px;bottom:16px;width:220px}
.year{display:flex;justify-content:space-between;align-items:baseline}.year span:first-child{font:800 22px Inter}
.qbar{height:4px;background:#e5dfc8;border-radius:3px;margin:6px 0 8px;overflow:hidden}.qbar span{display:block;height:100%;background:#8d7d61;width:0}
.speed{display:flex;gap:4px}
.sp{flex:1;border:0;border-radius:9px;background:#e8e1c8;padding:7px 0;font:700 11px Inter;cursor:pointer;color:var(--ink);letter-spacing:-.12em}
.sp.on{background:var(--ink);color:var(--cream)}
.brandMark{position:absolute;left:16px;bottom:16px;font:600 15px Fraunces,Georgia,serif;color:rgba(40,24,12,.7);background:rgba(245,242,227,.7);padding:6px 12px;border-radius:999px;pointer-events:none}
.brandMark b{font-family:Inter;font-weight:800;font-size:11px;letter-spacing:.14em;margin-left:2px}
#toasts{position:absolute;left:16px;top:250px;display:flex;flex-direction:column;gap:6px;width:240px;pointer-events:none}
.toast{background:var(--cream);border-radius:10px;padding:8px 11px;font-size:13px;box-shadow:var(--shadow);border-left:4px solid #8d7d61;animation:tin .3s ease-out;line-height:1.35}
.toast.bust{border-left-color:var(--bust)}.toast.boom{border-left-color:var(--boom)}.toast.tip{border-left-color:#4b6d88}
@keyframes tin{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

.bcard{position:absolute;width:300px;z-index:5;font-size:13px;line-height:1.4}
.bcard h3{margin:0 0 2px;font-size:16px}.bcard .tagl{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.bcard p{margin:6px 0;color:#4a3a2a}
.bcard .x{position:absolute;right:8px;top:6px;border:0;background:none;font-size:18px;cursor:pointer;color:var(--muted)}
.prod{border-top:1px solid var(--line);padding-top:8px;margin-top:8px}
.prod .row b{font-size:15px}
.btnrow{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}.btnrow .btn{padding:6px 10px;font-size:12px;flex:1}
.warnbox{background:repeating-linear-gradient(135deg,#fbf0c8 0 8px,#f5e6b0 8px 16px);border-radius:10px;padding:8px 10px;margin-top:8px;font-size:12px}
.chip{display:inline-block;font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;background:#e8e1c8;margin-left:6px;vertical-align:middle}
.chip.on{background:var(--boom);color:#0f3b24}

.screen{position:fixed;inset:0;display:grid;place-items:center;z-index:10;padding:16px}
.screen.dim{background:rgba(40,30,20,.35);backdrop-filter:blur(2px)}
#title{background:radial-gradient(ellipse at 50% 40%,rgba(230,245,225,0),rgba(230,245,225,.45) 75%)}
.titleCard{background:rgba(245,242,227,.96);border-radius:22px;box-shadow:var(--shadow);padding:36px 40px 26px;max-width:600px;width:100%;text-align:center;max-height:calc(100vh - 32px);overflow:auto}
.eyebrow{font:700 12px Inter;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.wordmark{font:800 64px/1 Fraunces,Georgia,serif;letter-spacing:-.02em;margin:10px 0 14px}
.wordmark span{font:800 22px Inter;letter-spacing:.24em;vertical-align:middle;background:var(--ink);color:var(--cream);padding:6px 10px 6px 14px;border-radius:10px;position:relative;top:-8px;margin-left:6px}
.tag{font-size:16px;line-height:1.55;color:#4a3a2a;margin:0 auto 20px;max-width:500px}
.titleBtns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.seedRow{margin-top:16px;font-size:12px;display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}
.seedRow input{width:80px;font:600 13px Inter;padding:5px 8px;border-radius:8px;border:1.5px solid rgba(40,24,12,.25);background:#fff;margin-left:6px}
.how{text-align:left;font-size:14px;line-height:1.5;margin-top:16px;background:#ebe5cf;border-radius:12px;padding:10px 16px}.how ol{padding-left:18px;margin:6px 0}
.disclaimer{font-size:11.5px;color:var(--muted);margin:20px 0 6px;line-height:1.45}
.credit{font-size:11px;color:var(--muted);font-weight:600}
.modalCard{max-width:460px;width:100%;padding:22px 24px;font-size:14px;line-height:1.5}
.modalCard h2{margin:0 0 8px;font-size:22px}
.modalCard .stripe{height:10px;border-radius:5px;background:repeating-linear-gradient(135deg,#e9c341 0 10px,#2a2318 10px 20px);margin-bottom:14px}
.modalCard .btnrow{margin-top:14px}
.endCard{max-width:880px;width:100%;padding:24px 28px;max-height:calc(100vh - 32px);overflow:auto}
.endCard h2{font:800 40px Fraunces,Georgia,serif;margin:0}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
.vs>div{background:#ebe5cf;border-radius:12px;padding:12px 14px}.vs .big{font:800 28px Inter}.vs .small{color:var(--muted)}
#endChart{width:100%;height:220px;display:block;background:#fbf9ef;border-radius:12px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.cols h4{margin:0 0 6px}.cols ul{margin:0;padding-left:18px;font-size:14px;line-height:1.5}
.helped h4{color:var(--boomInk)}.hurt h4{color:var(--bustInk)}
.endNote{font-size:13px;color:#4a3a2a;margin-top:14px;line-height:1.5}

@media (max-width:1100px){#nwCard,#miniCards{width:240px}#nwChart{width:216px}.banner{max-width:calc(100vw - 540px)}}
@media (max-width:860px){
  #incomeCard{width:180px;padding:8px 10px}#incomeCard .row.small,#loanBtn{display:none}
  #nwCard{width:180px;padding:8px 10px}#nwChart{width:156px;height:56px}.nwbig{font-size:17px}
  #miniCards{top:150px;width:180px;flex-direction:column;gap:6px}.mini{padding:6px 8px}
  .banner{top:auto;bottom:220px;max-width:calc(100vw - 32px);min-width:0}
  .explain{top:auto;bottom:290px}
  #timeCard{width:170px;bottom:auto;top:auto}
  #palette{bottom:12px}.item{width:84px}.item canvas{width:68px;height:48px}
  #timeCard{right:12px;bottom:auto;top:auto}
  .brandMark{display:none}
  .wordmark{font-size:44px}
}
@media (max-width:860px){#timeCard{position:absolute;left:12px;right:auto;top:auto;bottom:150px;width:180px}}
@media (max-width:520px){#miniCards{display:none}#incomeCard,#nwCard{width:calc(50vw - 20px)}#nwChart{width:100%}#incomeCard{left:12px;top:12px}#nwCard{right:12px;top:12px}.tab{padding:7px 9px;font-size:12px}.bcard{left:12px!important;right:12px;width:auto!important;top:auto!important;bottom:150px}.vs,.cols{grid-template-columns:1fr}.endCard h2{font-size:30px}#toasts{top:auto;bottom:250px;width:calc(100vw - 24px);left:12px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media (max-width:520px){
  .banner{top:118px;bottom:auto;left:12px;right:12px;transform:none;max-width:none;animation:none}
  .explain{top:186px;bottom:auto;left:12px;right:12px;transform:none;max-width:none}
  #toasts{top:auto;bottom:268px}
  #timeCard{left:12px;right:12px;width:auto;bottom:206px;display:flex;align-items:center;gap:10px;padding:8px 10px}
  #timeCard .qbar,#timeCard .row.small label{display:none}
  #timeCard .year{flex-direction:column;align-items:flex-start;gap:0}#timeCard .year span:first-child{font-size:17px}
  #timeCard .speed{flex:1}#timeCard .row.small{margin:0}
}

/* first-run walkthrough */
#tut{position:fixed;inset:0;z-index:60;pointer-events:none}
.tutSpot{position:fixed;border-radius:16px;box-shadow:0 0 0 3px var(--ghost),0 0 18px 6px rgba(249,244,215,.85),0 0 0 9999px rgba(40,24,12,.28);transition:all .25s ease}
.tutCard{position:fixed;pointer-events:auto;padding:14px 16px;transition:top .25s ease,left .25s ease}
.tutCard h3{margin:2px 0 6px;font-size:17px}.tutCard p{margin:0 0 10px;font-size:14px;line-height:1.45}
.tutStep{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.tutRow{display:flex;gap:8px;align-items:center}.tutRow .btn.sm{width:auto;margin:0}
.tutWait{flex:1;font-size:12px;font-weight:600;color:var(--boomInk);animation:tutPulse 1.4s ease-in-out infinite}
@keyframes tutPulse{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.tutSpot,.tutCard{transition:none}.tutWait{animation:none}}

/* arcade feedback */
#nwNum.tickUp{animation:nwUp .6s ease}#nwNum.tickDown{animation:nwDown .6s ease}
@keyframes nwUp{30%{color:var(--boomInk);transform:scale(1.06)}}@keyframes nwDown{30%{color:var(--bustInk);transform:scale(.97)}}
#nwNum{transform-origin:left center;display:inline-block}
body.flashBust::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:55;box-shadow:inset 0 0 120px 30px rgba(213,106,88,.55);animation:flashBust .7s ease-out forwards}
@keyframes flashBust{from{opacity:1}to{opacity:0}}
.banner:not(.hidden){animation:bannerIn .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes bannerIn{from{transform:translate(-50%,-30px) scale(.9);opacity:0}}
.item{transition:transform .12s,box-shadow .12s}.item:hover{transform:translateY(-3px)}.item:active{transform:translateY(1px) scale(.97)}
#muteBtn{margin-left:auto;margin-right:8px;font-size:14px;text-decoration:none}
@media (prefers-reduced-motion:reduce){#nwNum.tickUp,#nwNum.tickDown,.banner:not(.hidden),body.flashBust::after{animation:none}}
@media (max-width:520px){.banner:not(.hidden){animation:bannerInM .4s cubic-bezier(.2,1.4,.4,1)}}
@keyframes bannerInM{from{transform:translateY(-24px);opacity:0}}
#muteBtn{min-width:32px;min-height:32px}
#end:not(.hidden) .endCard{animation:endIn .55s cubic-bezier(.2,1.3,.4,1)}@keyframes endIn{from{transform:translateY(30px) scale(.94);opacity:0}}@media (prefers-reduced-motion:reduce){#end:not(.hidden) .endCard{animation:none}}
html,body{touch-action:manipulation}
#pie{width:46px;height:46px;margin-right:5px}.pieLegend{white-space:nowrap;overflow:visible;font-size:9.5px}

/* milestone goal line */
.goal{display:flex;align-items:center;gap:6px;margin-top:7px;padding:6px 8px;border-radius:9px;background:#efe9d4;font-size:12px;font-weight:600;line-height:1.25}
.goalStar{color:#d9a21b;font-size:13px}.goal #goalText{flex:1}.goalPips{font-size:11px;color:var(--muted);font-weight:700}
.goal.goalDone{animation:goalPop .7s ease}@keyframes goalPop{30%{background:#bff0d3;transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){.goal.goalDone{animation:none}}
/* phone: compact HUD so the map keeps most of the screen (measured by verify/mobile-audit.mjs) */
@media (max-width:520px){
  #incomeCard,#nwCard{padding:7px 9px;top:10px}
  #incomeCard .lbl,#incomeCard .bar,#incomeCard .row.small,#loanBtn{display:none}
  #incomeCard .row.nums{margin:0;font-size:14px}#incomeCard .row{font-size:12px}
  .goal{margin-top:5px;padding:4px 6px;font-size:11px}.goalPips{font-size:10px}
  #nwChart,#nwCard .legend{display:none}#nwCard .lbl{font-size:11px}.nwbig{font-size:20px}
  .tabs{padding:4px 4px 0}.tab{padding:5px 8px;font-size:11px}
  .items{padding:6px;gap:6px}.item{width:70px;padding:4px 4px 5px;font-size:10.5px}.item canvas{width:54px;height:38px}.item .cost{font-size:10px}
  #palette{bottom:8px}
  #timeCard{bottom:138px;padding:6px 9px}
  .banner{top:auto;bottom:250px;padding:7px 10px;gap:8px}.banner b{font-size:14px}.banner span{font-size:12px}.banner .ico{width:24px;height:24px;font-size:15px}
  .explain{top:auto;bottom:306px}
  #toasts{top:auto;bottom:196px}.toast{font-size:12px;padding:6px 9px}
  .bcard{bottom:138px}
}
@media (max-width:520px){.tab{white-space:nowrap}.tab small,.tab .lock{font-size:9px}}
/* phone held sideways (short screens): same compact HUD, laid out along the edges */
@media (max-height:500px) and (min-width:521px){
  #miniCards{display:none}
  #incomeCard,#nwCard{padding:6px 9px;top:8px;width:200px}#incomeCard{left:8px}#nwCard{right:8px}
  #incomeCard .lbl,#incomeCard .bar,#incomeCard .row.small,#loanBtn,#nwChart,#nwCard .legend{display:none}
  #incomeCard .row.nums{margin:0;font-size:13px}#incomeCard .row{font-size:12px}.goal{margin-top:4px;padding:3px 6px;font-size:11px}
  .nwbig{font-size:19px}#nwCard .lbl{font-size:11px}
  #palette{bottom:6px}.tabs{padding:3px 3px 0}.tab{padding:4px 7px;font-size:11px;white-space:nowrap}
  .items{padding:5px;gap:5px}.item{width:64px;padding:3px 3px 4px;font-size:10px}.item canvas{width:48px;height:32px}.item .cost{font-size:9.5px}
  #timeCard{left:auto;right:8px;top:auto;bottom:6px;width:auto;display:flex;align-items:center;gap:8px;padding:5px 8px}
  #timeCard .qbar,#timeCard .row.small label{display:none}#timeCard .year{flex-direction:column;gap:0}#timeCard .year span:first-child{font-size:15px}#timeCard .row.small{margin:0}
  #toasts{top:auto;bottom:8px;left:8px;width:220px}.toast{font-size:11.5px;padding:5px 8px}
  .banner{top:8px;padding:6px 10px;max-width:calc(100vw - 440px)}.banner b{font-size:13px}.banner span{font-size:11.5px}
  .explain{top:64px}
  .bcard{top:auto!important;bottom:8px;left:50%!important;transform:translateX(-50%)}
}
@media (max-height:500px) and (min-width:521px){
  #palette{left:8px;transform:none;align-items:flex-start;max-width:calc(100vw - 290px)}
  #toasts{bottom:auto;top:88px}
  .banner{width:calc(100vw - 436px);max-width:none;box-sizing:border-box}.banner b{display:inline;margin-right:6px}.banner .why{width:22px;height:22px}
}
@media (max-height:500px) and (min-width:521px){.banner{bottom:auto}}