:root{--void:#090b10;--gunmetal:#343d4b;--white:#f3f5f7;--steel:#8494a9;--silver:#c7d0dd;--panel:#090b10e0;--health:#c0392b;--hunger:#d39a3a;--thirst:#4f8fd0}*{box-sizing:border-box}html,body{background:var(--void);height:100%;color:var(--white);-webkit-user-select:none;user-select:none;margin:0;font:13px/1.35 ui-monospace,Cascadia Mono,Consolas,monospace;overflow:hidden}#game{image-rendering:pixelated;cursor:crosshair;position:fixed;inset:0 auto auto 0}#fx{pointer-events:none;position:fixed;inset:0 auto auto 0}#hurt{pointer-events:none;opacity:0;background:radial-gradient(#0000 45%,#c0392bbf 100%);position:fixed;inset:0}#ui{pointer-events:none;position:fixed;inset:0}#ui [hidden]{display:none!important}.vitals{background:var(--panel);border:1px solid var(--gunmetal);width:190px;padding:8px 10px;position:absolute;top:12px;left:12px}.bar{align-items:center;gap:8px;margin:3px 0;display:flex}.bar span{white-space:nowrap;width:52px;color:var(--steel);font-size:11px}.bar div{background:var(--gunmetal);flex:1;height:8px}.bar i{height:100%;display:block}.health{background:var(--health)}.hunger{background:var(--hunger)}.thirst{background:var(--thirst)}.xp{background:var(--silver)}#status{color:#ff8a7a;min-height:0;font-size:11px}#clock{background:var(--panel);border:1px solid var(--gunmetal);width:-moz-fit-content;width:fit-content;color:var(--silver);white-space:nowrap;margin:0 auto;padding:5px 12px;position:absolute;top:12px;left:0;right:0}#goal{background:var(--panel);border:1px solid var(--gunmetal);width:-moz-fit-content;width:fit-content;max-width:60vw;color:var(--white);text-align:center;margin:0 auto;padding:3px 10px;font-size:11px;position:absolute;top:44px;left:0;right:0}#goal.alarm{border-color:var(--health)}#map{border:1px solid var(--gunmetal);width:168px;height:168px;image-rendering:pixelated;opacity:.92;position:absolute;top:12px;right:12px}#bigmap{background:#090b1099;flex-direction:column;justify-content:center;align-items:center;gap:8px;display:flex;position:absolute;inset:0}#bigmap[hidden]{display:none}#bigmap canvas{border:1px solid var(--gunmetal);background:var(--void);width:min(84vh,92vw);height:min(84vh,92vw);image-rendering:pixelated}#bigmap p{color:var(--steel);margin:0;font-size:11px}#toasts{flex-direction:column;gap:3px;max-width:34vw;display:flex;position:absolute;bottom:12px;left:12px}#toasts div{background:var(--panel);border-left:2px solid var(--steel);color:var(--silver);padding:3px 8px}.bottom{flex-direction:column;align-items:center;gap:5px;width:-moz-fit-content;width:fit-content;margin:0 auto;display:flex;position:absolute;bottom:12px;left:0;right:0}#prompt{background:var(--panel);border:1px solid var(--steel);padding:3px 10px}#held{color:var(--silver);text-shadow:0 1px 0 var(--void)}#ability{color:var(--steel);text-shadow:0 1px 0 var(--void);font-size:11px}#ability.ready{color:var(--silver)}#ability.on{color:var(--white);font-weight:700}#hotbar{pointer-events:auto;gap:4px;display:flex}.slot{background:var(--panel);border:1px solid var(--gunmetal);cursor:pointer;place-items:center;width:40px;height:40px;display:grid;position:relative}.slot:hover{border-color:var(--steel)}.slot.hot{background:#343d4b8c}.slot.active{border-color:var(--white)}.slot i{display:block}.slot b{text-shadow:1px 0 0 var(--void), -1px 0 0 var(--void), 0 1px 0 var(--void), 0 -1px 0 var(--void);font-size:11px;font-weight:600;position:absolute;bottom:1px;right:3px}.slot u{color:var(--steel);font-size:10px;text-decoration:none;position:absolute;top:0;left:3px}.slot s{background:var(--silver);max-width:calc(100% - 4px);height:2px;position:absolute;bottom:2px;left:2px}.slot b.out{color:var(--steel)}.slot s.out{background:var(--gunmetal);width:calc(100% - 4px)!important}#ghost,#tip{z-index:5;pointer-events:none;position:fixed}#ghost{opacity:.85}#tip{background:var(--void);border:1px solid var(--steel);max-width:260px;color:var(--silver);white-space:pre-line;padding:5px 8px;font-size:11px}#tip:first-line{color:var(--white);font-size:12px}.help{color:var(--steel);text-shadow:0 1px 0 var(--void);text-align:right;max-width:30vw;font-size:11px;position:absolute;bottom:12px;right:12px}#panel{background:var(--panel);border:1px solid var(--gunmetal);pointer-events:auto;gap:30px;width:-moz-fit-content;width:fit-content;max-width:calc(100vw - 24px);height:-moz-fit-content;height:fit-content;max-height:78vh;margin:auto;padding:20px 24px;display:flex;position:absolute;inset:0 0 6vh;overflow-x:auto}#panel section{flex-direction:column;gap:8px;min-height:0;display:flex}#panel section+section{border-left:1px solid var(--gunmetal);padding-left:30px}#panel h2{letter-spacing:.12em;text-transform:uppercase;color:var(--steel);margin:0 0 6px;font-size:12px;font-weight:600}.worn{align-items:center;gap:10px;width:170px;display:flex}#panel h2.sub{margin-top:12px}#panel h2 strong{color:var(--white)}.perks{flex-wrap:wrap;gap:4px;width:200px;display:flex}.perk{border:1px solid var(--gunmetal);color:var(--steel);font:inherit;background:0 0;padding:1px 6px;font-size:11px}.perk.on{border-color:var(--silver);color:var(--white)}.perk.offer{border-style:dashed;border-color:var(--steel);color:var(--silver);cursor:pointer}.perk.offer:hover{border-style:solid;border-color:var(--white);color:var(--white)}.xpbar{background:var(--gunmetal);height:4px}.xpbar i{background:var(--silver);height:100%;display:block}.stats strong{color:var(--white);font-weight:600}.attr{height:20px;color:var(--silver);align-items:center;gap:8px;font-size:12px;display:flex}.attr>span:first-child{width:76px}.pips{gap:2px;display:flex}.pips b{border:1px solid var(--gunmetal);width:8px;height:8px}.pips b.on{background:var(--silver);border-color:var(--silver)}.plus,.mini,.choice button{border:1px solid var(--steel);color:var(--white);font:inherit;cursor:pointer;background:0 0}.plus:hover,.mini:hover,.choice button:hover{border-color:var(--white)}.plus{width:18px;height:18px;padding:0;line-height:1}.mini{letter-spacing:.08em;text-transform:uppercase;color:var(--silver);margin-left:8px;padding:0 6px;font-size:10px}.worn small,.recipe small,.card small{color:var(--steel);font-size:11px;display:block}.grid{grid-template-columns:repeat(6,40px);align-content:start;gap:6px;display:grid}.grid .slot.hot{margin-bottom:10px}.stats.hint{margin-top:12px;line-height:1.5}.stats{max-width:270px;color:var(--steel);margin:4px 0 0;font-size:11px}.recipes{flex-direction:column;gap:6px;width:270px;padding-right:6px;display:flex;overflow-y:auto}.recipe{border:1px solid var(--gunmetal);color:var(--white);font:inherit;text-align:left;cursor:pointer;background:0 0;align-items:center;gap:10px;padding:5px 8px;display:flex}.recipe:hover:not(:disabled){border-color:var(--white)}.recipe:disabled{opacity:.5;cursor:default}.recipe i{flex:none}.recipe em{color:#d98a7e;font-style:normal}.recipe em.ok{color:var(--silver)}#screen{pointer-events:auto;text-align:center;background:#090b10cc;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:24px;display:flex;position:absolute;inset:0}#screen h1{letter-spacing:.3em;margin:0;font-size:44px;font-weight:600}#screen h1.dead{color:var(--health)}#screen p{color:var(--silver);max-width:620px;margin:0}#screen>.choice{margin-top:14px}.hub .choice{pointer-events:auto;justify-content:center}#screen .seed{color:var(--steel);font-size:11px}.settings{background:var(--panel);border:1px solid var(--gunmetal);flex-direction:column;align-items:center;gap:10px;padding:18px 22px;display:flex}.settings h1{font-size:28px!important}.settings .vol{color:var(--silver);align-items:center;gap:10px;display:flex}.settings input[type=range]{width:180px;accent-color:var(--silver)}.binds{grid-template-columns:repeat(2,auto);gap:4px 18px;display:grid}.bind{color:var(--silver);justify-content:space-between;align-items:center;gap:12px;display:flex}.bind button{border:1px solid var(--gunmetal);min-width:110px;color:var(--white);font:inherit;cursor:pointer;background:0 0;padding:2px 8px}.bind button:hover{border-color:var(--white)}.bind button.go{background:var(--white);border-color:var(--white);color:var(--void)}.settings .choice{gap:8px;display:flex}.wheel{--r:min(230px, 32vh);width:calc(var(--r) * 2 + 120px);height:calc(var(--r) * 2 + 130px);flex:none;position:relative}.hub{padding:0 calc(var(--r) * .55);pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:8px;display:flex;position:absolute;inset:0}.hub h1{letter-spacing:.22em!important;font-size:clamp(20px,4.4vh,34px)!important}.hub p{font-size:12px}.card{left:calc(50% + var(--x) * var(--r));top:calc(50% + var(--y) * var(--r));background:var(--panel);border:1px solid var(--gunmetal);width:96px;color:var(--white);font:inherit;cursor:pointer;flex-direction:column;align-items:center;gap:2px;padding:8px 6px;transition:transform .12s;display:flex;position:absolute;transform:translate(-50%,-50%)}.card:hover{border-color:var(--white);transform:translate(-50%,-50%)scale(1.1)}.card canvas{width:72px;height:78px;image-rendering:pixelated}.card strong{letter-spacing:.08em;font-size:13px}.detail{background:var(--panel);border:1px solid var(--gunmetal);text-align:left;align-items:center;gap:36px;padding:24px 32px;display:flex}.detail canvas{width:192px;height:208px;image-rendering:pixelated}.sheet{flex-direction:column;gap:6px;width:290px;display:flex}.sheet h1{letter-spacing:.2em!important;font-size:30px!important}.sheet .skill{font-size:12px;margin:8px 0!important}.sheet .skill strong{color:var(--white);letter-spacing:.06em}.choice{gap:8px;display:flex}.choice button{padding:7px 14px}.choice .go{background:var(--white);border-color:var(--white);color:var(--void);font-weight:600}
