*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;background:radial-gradient(ellipse at 35% 0,#35413a,#151d22 65%);color:#ede6d2;font:15px/1.45 system-ui,sans-serif;min-height:100vh}a{color:#e9cf94}button{color:#eae3cc;cursor:pointer;background:#2e3836;border:1px solid #77745f;padding:8px 11px;font:600 13px system-ui;border-radius:3px}button:disabled{cursor:default;opacity:.48}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid #f8d894;outline-offset:2px}header,main{width:min(1190px,96%);margin:auto}header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid #5a6051}header a{font-size:13px;text-decoration:none}header span{font-size:12px;color:#c2c6b2}h1,h2,h3{font-family:Georgia,serif;font-weight:500;margin:0;color:#f8dea7}h1{font-size:clamp(27px,3vw,43px);line-height:1.1}h2{font-size:20px}small,.hint{color:#bdc5b2;font-size:12px}.titlebar{display:flex;align-items:end;justify-content:space-between;gap:14px;margin:14px 0}.titlebar small{display:block;color:#d8bb86;letter-spacing:1px}.stats{font-size:15px;font-weight:650;white-space:nowrap}.layout{display:grid;grid-template-columns:minmax(0,1fr) 235px;gap:13px}.stage{position:relative;align-self:start;aspect-ratio:5/3;background:#1c2927;border:1px solid #9b8963;overflow:hidden}.stage canvas{display:block;width:100%;height:100%;image-rendering:pixelated;touch-action:manipulation}.side{align-self:start;display:grid;gap:9px}.card{background:#252e2e;border:1px solid #626452;padding:12px}.card p{margin:7px 0 10px}#tools,#actions{display:grid;gap:5px}.chosen,button:hover:not(:disabled){border-color:#e9c787;background:#46473a}.primary{background:linear-gradient(#e4c58c,#c4a36a);color:#241f18;border-color:#e2cb9d;width:100%}.bar{display:flex;align-items:center;gap:9px;justify-content:space-between;padding:8px 0;color:#d4dac7;font-size:13px}.pad-layer{position:absolute;inset:0;pointer-events:none}.pad-layer button{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;border:0;background:transparent;width:6%;min-width:24px;height:9%;min-height:24px}.pad-layer button:hover:not(:disabled){background:#d7c69422;border:1px solid #d7c694}.ending{position:absolute;inset:0;background:#10191dda;display:grid;align-content:center;justify-items:center;padding:18px;text-align:center}.ending p{margin:8px 0}.ending a{padding:7px}.ending h2{font-size:clamp(24px,4vw,40px)}.ending button{margin-top:8px}.ending div{display:flex;gap:12px;align-items:center}[hidden]{display:none!important}.pairs{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}#tools button{display:flex;align-items:center;gap:8px;text-align:left;padding:3px 8px}#tools canvas{width:30px;height:35px;image-rendering:pixelated}#tools b{margin-left:auto;color:#f1d394}#msg{min-height:1.3em}footer{padding:10px 0 16px;font-size:12px}footer a{text-decoration:underline}.fine{font-size:12px;color:#b7c1ad}.scene-action{display:block;width:100%;text-align:left}kbd{font:11px monospace;border:1px solid #6d7561;padding:2px 4px} @media(max-width:760px){.layout{grid-template-columns:1fr}.side{grid-template-columns:1fr 1fr}.titlebar{align-items:start}.stats{white-space:normal;font-size:12px}.card{padding:8px}.bar{font-size:12px}.ending{font-size:12px}.side h2{font-size:17px}}@media(max-width:415px){header span{font-size:10px}.titlebar h1{font-size:24px}.side{grid-template-columns:1fr 1fr;gap:5px}.stats{max-width:95px}button{font-size:11px;padding:6px}.card p{font-size:12px}#tools canvas{width:23px;height:28px}#tools button{gap:4px;padding:3px}}
