:root{
 --bg:#0e0b08;--panel:#2b231b;--panel2:#3b3025;--hi:#7a6650;--lo:#120d09;--ink:#ecdcb2;--dim:#a8957a;
 --acc:#f0b030;--good:#86d050;--bad:#e8563c;--warn:#f0b030;--cyan:#6cc8d0;
 box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:dark;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#0e0b08}}
:root[data-theme="dark"]{--bg:#0e0b08}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{background:var(--bg);color:var(--ink);font-family:'VT323',ui-monospace,Menlo,Consolas,monospace;font-size:18px;line-height:1.15;overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit}
.bevel{background:var(--panel) repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0 2px,rgba(0,0,0,.04) 2px 4px);border:3px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);box-shadow:inset 0 0 0 1px #000}
.btn{font-family:'Press Start 2P',monospace;font-size:9px;line-height:1.3;color:var(--ink);background:linear-gradient(#4c3d2e,#2f261d);border:2px solid;border-color:#86705a #140f0b #140f0b #86705a;padding:8px 9px;cursor:pointer;text-transform:none}
.btn:hover{background:linear-gradient(#5a4836,#382c21)}
.btn:active,.btn.on{border-color:#140f0b #86705a #86705a #140f0b;background:#241c15}
.btn.on{color:var(--acc)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.btn.big{font-size:12px;padding:12px 16px}
.btn.red{color:#ffb4a0}
#app{display:grid;height:100%;grid-template-columns:minmax(0,1fr) 250px;grid-template-rows:auto minmax(0,1fr) 70px}
#top{grid-column:1/3;display:flex;align-items:center;gap:8px;padding:4px 8px;flex-wrap:wrap}
#top .logo{font-family:'Press Start 2P',monospace;font-size:14px;color:var(--acc);text-shadow:2px 2px 0 #7a2a12,3px 3px 0 #000;letter-spacing:2px;margin-right:4px}
#res{display:flex;flex-wrap:wrap;gap:3px 10px;flex:1;min-width:0}
.res{display:inline-flex;align-items:center;gap:3px;font-size:20px;white-space:nowrap}
.res img{width:18px;height:18px;image-rendering:pixelated}
.res i{font-style:normal;font-size:15px}
.res i.p{color:var(--good)}.res i.n{color:var(--bad)}
.ctrl{display:flex;gap:3px;align-items:center}
.ctrl .btn{padding:6px 7px;font-size:8px}
#day{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--acc);margin-right:4px;white-space:nowrap}
#view{grid-column:1;grid-row:2;position:relative;overflow:hidden;background:#000;border:3px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo);touch-action:none}
#game{position:absolute;left:0;top:0;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none}
#hint{position:absolute;left:50%;top:8px;transform:translateX(-50%);display:none;gap:6px;align-items:center;background:rgba(20,14,10,.88);border:2px solid var(--acc);padding:5px 8px;font-size:18px;white-space:nowrap;z-index:3}
#hint.show{display:flex}
#side{grid-column:2;grid-row:2/4;display:flex;flex-direction:column;min-height:0;padding:6px;gap:6px}
#mini{width:100%;image-rendering:pixelated;border:2px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo);background:#000;cursor:crosshair;display:block}
.tabs{display:flex;gap:3px}.tabs .btn{flex:1;padding:7px 2px;font-size:8px}
#pane{flex:1;min-height:0;overflow:auto;padding:2px}
#log{grid-column:1;grid-row:3;padding:4px 10px;overflow:hidden;font-size:18px;display:flex;flex-direction:column-reverse}
#log div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#log div:first-child{color:#fff}
.good{color:var(--good)!important}.bad{color:var(--bad)!important}.warn{color:var(--warn)!important}
.bgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:5px}
.bb{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 2px 5px;background:linear-gradient(#3e3226,#271f17);border:2px solid;border-color:#86705a #140f0b #140f0b #86705a;cursor:pointer;min-height:96px}
.bb:active,.bb.on{border-color:#140f0b #86705a #86705a #140f0b;background:#1c1510}
.bb.na{opacity:.5}
.bb canvas{width:48px;height:48px;image-rendering:pixelated}
.bb .bn{font-family:'Press Start 2P',monospace;font-size:7px;text-align:center;line-height:1.3}
.bb .bc{font-size:16px;display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.bb .bc img,.cost img{width:12px;height:12px;image-rendering:pixelated;vertical-align:-1px}
.tools{display:flex;gap:4px}.tools .btn{flex:1}
h3{font-family:'Press Start 2P',monospace;font-size:10px;color:var(--acc);margin:4px 0 6px;line-height:1.4}
.dim{color:var(--dim)}
p{margin:4px 0}
.bar{height:7px;background:#000;border:1px solid #5a4a38;margin:3px 0 6px}
.bar>span{display:block;height:100%;background:var(--good)}
.row{display:flex;justify-content:space-between;gap:6px}
#info-btn{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
#goals{padding-left:0;list-style:none;margin:4px 0}
#goals li{padding:4px 0 4px 22px;position:relative;border-bottom:1px dashed #4a3c2e}
#goals li::before{content:'';position:absolute;left:3px;top:7px;width:10px;height:10px;border:2px solid var(--dim)}
#goals li.done{color:var(--dim);text-decoration:line-through}
#goals li.done::before{background:var(--good);border-color:var(--good)}
#goals li.cur{color:#fff}
#goals li.cur::before{border-color:var(--acc)}
#modal{position:fixed;inset:0;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;z-index:10;padding:12px}
#modal.show{display:flex}
#modalBox{max-width:560px;width:100%;max-height:90%;overflow:auto;padding:18px}
#modalBox h2{font-family:'Press Start 2P',monospace;font-size:14px;color:var(--acc);margin:0 0 10px;line-height:1.4}
.title{text-align:center}
.title .big-logo{font-family:'Press Start 2P',monospace;font-size:64px;color:var(--acc);letter-spacing:8px;text-shadow:4px 4px 0 #8a3414,8px 8px 0 #000;margin:10px 0 6px}
.title .big-logo.cradle{font-size:38px;letter-spacing:3px}
.title .sub{line-height:1.6;font-family:'Press Start 2P',monospace;font-size:10px;color:var(--cyan);margin-bottom:14px}
.title p{font-size:20px;max-width:46ch;margin:8px auto}
.title .btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.help li{margin:4px 0}
table.tr{width:100%;border-collapse:collapse;margin:8px 0}
table.tr td{padding:3px 4px;border-bottom:1px dashed #4a3c2e}
table.tr img{width:14px;height:14px;image-rendering:pixelated;vertical-align:-2px}
table.tr .btn{font-size:7px;padding:6px 5px;white-space:nowrap}
@media (max-width:760px){
 body{font-size:17px}
 #app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) 44px minmax(0,38%)}
 #side{grid-column:1;grid-row:4;padding:4px}
 #log{grid-row:3;font-size:16px;padding:2px 8px}
 #mini{display:none}
 #top{gap:4px;padding:3px 5px}
 #top .logo{font-size:11px}
 #res{order:2;flex-basis:100%;flex-wrap:nowrap;overflow-x:auto;gap:8px;scrollbar-width:none}
 .ctrl{margin-left:auto}.ctrl .btn{padding:6px 6px}
 .res{font-size:17px}.res img{width:14px;height:14px}.res i{display:none}
 .bgrid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
 .title .big-logo{font-size:44px}
 .title .big-logo.cradle{font-size:21px;letter-spacing:1px;text-shadow:2px 2px 0 #8a3414,4px 4px 0 #000}
 .title .sub{font-size:8px}
}
@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto}}