:root{--sea-deep:#0f2e38;--sea-mid:#173e4a;--marble:#ede4cb;--marble-dark:#d9cca8;--ink:#2b2622;--gold:#c9a227;--gold-bright:#e8c14a;--terracotta:#c1502e;--terracotta-dark:#a13d21;--olive:#6b7b3f;--olive-dark:#4a5d32}*{box-sizing:border-box}#errorFallback{text-align:center;height:100%;color:var(--marble);flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:24px;font-family:Crimson Text,serif;display:flex}#errorFallback pre{max-width:90%;color:var(--gold-bright);background:#00000040;border-radius:6px;padding:10px 14px;font-family:JetBrains Mono,monospace;overflow:auto}html,body{background:var(--sea-deep);height:100%;color:var(--ink);margin:0;padding:0;font-family:Crimson Text,serif;overflow:hidden}#root{height:100%}h1,h2,h3,.display{letter-spacing:.04em;font-family:Cinzel,serif}.mono{font-family:JetBrains Mono,monospace}#app{background:radial-gradient(ellipse at 30% -10%, #1c4a58 0%, var(--sea-deep) 60%);flex-direction:column;width:100vw;height:100vh;display:flex}#topbar{border-bottom:3px solid var(--gold);z-index:5;background:linear-gradient(#f2e9d0,#e0d3ab);flex-wrap:wrap;align-items:center;gap:14px;padding:8px 16px;display:flex;box-shadow:0 2px 10px #0006}#titleblock{align-items:center;gap:8px;margin-right:8px;display:flex}#titleblock .crest{font-size:22px}#titleblock h1{color:var(--terracotta-dark);text-transform:uppercase;margin:0;font-size:17px}.resbar{flex-wrap:wrap;flex:1;gap:6px;display:flex}.res-pill{background:var(--marble);border:1px solid var(--marble-dark);border-radius:14px;align-items:center;gap:5px;padding:3px 9px 3px 7px;font-size:13px;display:flex;box-shadow:inset 0 1px 2px #fff9}.res-pill .cap{color:#8a7d5c;font-size:10px}.res-pill.warn{border-color:var(--terracotta);background:#f3d3c8}#controls{align-items:center;gap:6px;display:flex}button{cursor:pointer;background:var(--terracotta);color:#fff;letter-spacing:.03em;box-shadow:0 2px 0 var(--terracotta-dark);border:none;border-radius:6px;padding:6px 12px;font-family:Cinzel,serif;font-size:12px}button:hover{filter:brightness(1.08)}button:active{box-shadow:0 1px 0 var(--terracotta-dark);transform:translateY(1px)}button.ghost{background:var(--marble);color:var(--ink);box-shadow:0 2px 0 var(--marble-dark)}button.small{padding:4px 8px;font-size:11px}button:disabled{opacity:.4;cursor:not-allowed}button.active-speed{background:var(--olive);box-shadow:0 2px 0 var(--olive-dark)}#main{flex:1;display:flex;overflow:hidden}#palette{border-right:3px solid var(--gold);background:linear-gradient(#173e4a,#0f2e38);flex-shrink:0;width:198px;padding:10px 8px;overflow-y:auto}#palette h3{color:var(--gold-bright);text-transform:uppercase;border-bottom:1px solid #c9a22766;margin:12px 0 6px;padding-bottom:3px;font-size:12px}#palette div:first-child h3{margin-top:0}.build-btn{text-align:left;width:100%;color:var(--marble);box-shadow:none;background:#ede4cb14;border:1px solid #c9a22759;border-radius:8px;align-items:center;gap:8px;margin-bottom:6px;padding:6px 8px;font-family:Crimson Text,serif;display:flex}.build-btn .icon{text-align:center;width:22px;font-size:19px}.build-btn .label{flex:1;line-height:1.15}.build-btn .label b{color:var(--gold-bright);font-family:Cinzel,serif;font-size:11.5px;display:block}.build-btn .label span{opacity:.85;font-size:11px}.build-btn:hover{background:#c9a22738}.build-btn.selected{background:var(--terracotta);border-color:var(--gold-bright)}.build-btn:disabled{opacity:.35}#canvasWrap{background:#0a2129;flex:1;justify-content:center;align-items:flex-start;padding:18px;display:flex;position:relative;overflow:auto}#canvasStack{line-height:0;position:relative}#gameCanvas{border:4px solid var(--gold);cursor:crosshair;background:#2e6e82;border-radius:4px;box-shadow:0 8px 30px #0009}#cartCanvas{pointer-events:none;position:absolute;top:4px;left:4px}#sidepanel{border-left:3px solid var(--gold);background:linear-gradient(#f2e9d0,#e5d8b3);flex-shrink:0;width:270px;padding:12px;overflow-y:auto}#sidepanel section{border:1px solid var(--marble-dark);background:#ffffff59;border-radius:8px;margin-bottom:16px;padding:10px}#sidepanel h3{color:var(--terracotta-dark);text-transform:uppercase;margin:0 0 8px;font-size:13px}#tileInfo .empty{color:#6b6355;font-size:12.5px;font-style:italic}#tileInfo .row{justify-content:space-between;margin:2px 0;font-size:12.5px;display:flex}.stat-line{justify-content:space-between;margin:3px 0;font-size:12.5px;display:flex}.happiness-bar-bg{background:#d9cca8;border-radius:8px;height:10px;margin-top:4px;overflow:hidden}.happiness-bar-fill{background:linear-gradient(90deg, var(--terracotta), var(--olive));height:100%;transition:width .4s}.coverage-bar-bg{background:#d9cca8;border-radius:8px;height:10px;margin-top:4px;overflow:hidden}.coverage-bar-fill{background:linear-gradient(90deg, var(--gold), var(--olive));height:100%;transition:width .4s}#milestoneList .m-item{background:#ffffff80;border-radius:6px;margin-bottom:4px;padding:5px 6px;font-size:12px}#milestoneList .m-item.done{opacity:.75;background:#6b7b3f59;text-decoration:line-through}.blessing-btn{text-align:left;background:var(--olive);width:100%;box-shadow:0 2px 0 var(--olive-dark);margin-bottom:6px}.blessing-btn small{opacity:.9;font-family:Crimson Text,serif;font-size:10.5px;display:block}#toastWrap{z-index:50;flex-direction:column;gap:8px;display:flex;position:fixed;top:70px;right:20px}.toast{background:var(--gold-bright);color:var(--ink);border:2px solid var(--gold);border-radius:8px;max-width:240px;padding:8px 14px;font-family:Cinzel,serif;font-size:12.5px;animation:.3s fadein,.5s 3.5s forwards fadeout;box-shadow:0 4px 14px #0006}@keyframes fadein{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes fadeout{to{opacity:0;transform:translateY(-8px)}}#tutorialOverlay{z-index:100;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0a2129b8;justify-content:center;align-items:center;padding:20px;animation:.25s fadein;display:flex;position:fixed;inset:0}.tutorial-card{border:3px solid var(--gold);text-align:center;width:100%;max-width:440px;color:var(--ink);background:linear-gradient(#f4ecd6,#e6d9b6);border-radius:12px;padding:26px 26px 18px;position:relative;box-shadow:0 18px 50px #0000008c}.tutorial-close{padding:2px 8px;position:absolute;top:10px;right:10px}.tutorial-icon{margin-bottom:6px;font-size:44px;line-height:1}.tutorial-card h2{color:var(--terracotta-dark);margin:4px 0 10px;font-size:19px}.tutorial-card p{max-width:36ch;margin:0 auto 16px;font-size:15px;line-height:1.5}.tutorial-dots{justify-content:center;gap:6px;margin-bottom:16px;display:flex}.tutorial-dot{background:var(--marble-dark);border-radius:50%;width:8px;height:8px}.tutorial-dot.active{background:var(--terracotta);transform:scale(1.2)}.tutorial-actions{justify-content:space-between;align-items:center;gap:8px;display:flex}.tutorial-nav{gap:8px;display:flex}::-webkit-scrollbar{width:9px}::-webkit-scrollbar-thumb{background:var(--gold);border-radius:6px}::-webkit-scrollbar-track{background:0 0}
