:root{--bg: #14161f;--bg2: #1c1f2b;--bg3: #242838;--fg: #d8dce8;--dim: #8a90a5;--accent: #e8c15a;--border: #343a50;--bevel-light: #4a5270;--bevel-dark: #0d0f16}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{height:100%}body{background:var(--bg);color:var(--fg);font-family:Cascadia Mono,Consolas,JetBrains Mono,ui-monospace,monospace;font-size:13px;line-height:1.45;overflow:hidden}#app{display:flex;flex-direction:column}#topbar{display:flex;align-items:center;gap:10px;padding:6px 10px;background:var(--bg2);border-bottom:2px solid var(--bevel-dark);box-shadow:inset 0 -2px 0 0 var(--border)}#title{font-family:VT323,monospace;font-size:22px;color:var(--accent);letter-spacing:1px;text-shadow:2px 2px 0 var(--bevel-dark)}#date{color:var(--dim)}.spacer{flex:1}#topbar select{background:var(--bg3);color:var(--fg);border:2px solid var(--bevel-dark);box-shadow:inset 1px 1px 0 0 var(--bevel-light);font-family:inherit;font-size:12px;padding:3px 6px}button{background:var(--bg3);color:var(--fg);border:none;box-shadow:inset -2px -2px 0 0 var(--bevel-dark),inset 2px 2px 0 0 var(--bevel-light);font-family:inherit;font-size:12px;padding:4px 10px;cursor:pointer}button:hover{color:var(--accent)}button:active{box-shadow:inset 2px 2px 0 0 var(--bevel-dark),inset -2px -2px 0 0 var(--bevel-light);transform:translate(1px,1px)}button.active{background:var(--accent);color:#1a1505}#btn-turn{background:var(--accent);color:#1a1505;font-weight:700;box-shadow:inset -2px -2px #8a6f1e,inset 2px 2px #f7e09a}#btn-turn:hover{background:#f5d47a;color:#1a1505}#btn-turn:active{box-shadow:inset 2px 2px #8a6f1e,inset -2px -2px #f7e09a}#main{flex:1;display:flex;min-height:0}#map-wrap{flex:1;background:#0b0d14;min-width:0;position:relative;overflow:hidden}#map{image-rendering:pixelated;cursor:pointer;position:absolute}#minimap{position:absolute;left:8px;bottom:8px;z-index:5;border:2px solid var(--bevel-dark);box-shadow:0 0 0 1px var(--border),2px 2px #00000080;background:#0b0d14;image-rendering:pixelated;cursor:pointer}#panel{width:380px;flex-shrink:0;overflow-y:auto;background:var(--bg2);border-left:2px solid var(--bevel-dark);box-shadow:inset 2px 0 0 0 var(--border);padding:10px}#panel>div:first-child{border-bottom:2px solid var(--bevel-dark);box-shadow:0 2px 0 0 var(--border);padding-bottom:10px;margin-bottom:10px}#panel h2{font-family:VT323,monospace;font-size:21px;color:var(--accent);letter-spacing:1px;margin-bottom:6px;text-shadow:1px 1px 0 var(--bevel-dark)}#panel h3{font-family:VT323,monospace;font-size:16px;color:var(--dim);margin:12px 0 4px;text-transform:uppercase;letter-spacing:2px;border-bottom:1px solid var(--border)}#panel h3:before{content:"▪ ";color:var(--accent)}#panel table{width:100%;border-collapse:collapse}#panel td,#panel th{text-align:right;padding:2px 4px;font-size:12px}#panel th{color:var(--dim);font-weight:400}#panel td:first-child,#panel th:first-child{text-align:left}#panel tr:hover td{background:#ffffff08}#panel input[type=range]{width:130px;accent-color:var(--accent);background:transparent}#panel select{background:var(--bg3);color:var(--fg);border:2px solid var(--bevel-dark);box-shadow:inset 1px 1px 0 0 var(--bevel-light);font-family:inherit;font-size:12px;padding:2px 4px}#panel canvas{width:100%;image-rendering:auto;background:var(--bg);border:2px solid var(--bevel-dark);box-shadow:inset 0 0 0 1px var(--border);margin-top:4px}#panel .hint{color:var(--dim);font-size:11px;margin-top:4px}#panel .good-grain{color:#d9c855}#panel .good-fiber{color:#c9d18a}#panel .good-gold{color:#e8d44a}#panel .good-wine{color:#c75b7a}#panel .good-wood{color:#a07a4f}#panel .good-ore{color:#9aa7b8}#panel .good-tools{color:#d98a55}#panel .good-cloth{color:#b06fd1}#panel .good-coal{color:#8a8a96}#panel .good-gems{color:#7adfff}#panel .good-spices{color:#d9842b}.sat-good{color:#7fce72}.sat-mid{color:#d9c855}.sat-bad{color:#e06c5b}.flow-in{color:#7fce72}.flow-out{color:#e0a05b}#banner{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#08090ebf;z-index:10}#banner.hidden{display:none}#banner-box{background:var(--bg2);border:2px solid var(--accent);box-shadow:0 0 0 2px var(--bevel-dark),4px 4px #0009;padding:24px 32px;max-width:420px;text-align:center}#banner-box h2{font-family:VT323,monospace;font-size:28px;color:var(--accent);letter-spacing:1px;margin-bottom:10px;text-shadow:2px 2px 0 var(--bevel-dark)}#banner-box p{color:var(--fg);font-size:13px;margin-bottom:16px;line-height:1.5}#banner-box.defeat{border-color:#e06c5b}#banner-box.defeat h2{color:#e06c5b}