html,body{background:#14171d;height:100%;margin:0;overflow:hidden}#game{width:100%;height:100%;display:block}#ui{pointer-events:none;color:#f1e9dc;font-family:system-ui,sans-serif;position:fixed;inset:0}:root{--ink:#f3ead9;--ink-dim:#f3ead99e;--brass:#d9a75b;--brass-dim:#d9a75b73;--panel:#12100ed1;--panel-edge:#d9a75b59;--good:#9ed39a;--warn:#f0b36a;--bad:#ef6f62;--cold:#8fd0ff;--display:"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;--body:system-ui, -apple-system, "Segoe UI", sans-serif}#ui{font-family:var(--body);color:var(--ink);-webkit-user-select:none;user-select:none}#ui *{box-sizing:border-box}.hud{pointer-events:none;position:absolute;inset:0}.crosshair{background:#ffffffd9;border-radius:50%;width:6px;height:6px;margin:-3px 0 0 -3px;transition:transform .12s,background .12s;position:absolute;top:50%;left:50%;box-shadow:0 0 0 1.5px #00000073}.crosshair.active{background:var(--brass);transform:scale(1.6)}.prompt{text-shadow:0 1px 3px #000000e6;white-space:nowrap;opacity:0;align-items:center;gap:8px;font-size:15px;transition:opacity .12s;display:flex;position:absolute;top:calc(50% + 34px);left:50%;transform:translate(-50%)}.prompt.show{opacity:1}.key{border:1px solid var(--brass);min-width:22px;color:var(--brass);text-align:center;background:#0000008c;border-radius:4px;padding:2px 6px;font-size:12px;font-weight:600;display:inline-block}.caption{text-align:center;opacity:0;text-shadow:0 2px 12px #000000e6;transition:opacity 1.2s;position:absolute;top:18%;left:0;right:0}.caption.show{opacity:1;transition:opacity .6s}.caption .floor{letter-spacing:.32em;text-transform:uppercase;color:var(--brass);font-size:13px}.caption .title{font-family:var(--display);letter-spacing:.04em;margin-top:6px;font-size:44px}.toasts{flex-direction:column;align-items:center;gap:6px;display:flex;position:absolute;bottom:21%;left:50%;transform:translate(-50%)}.toast{border:1px solid var(--panel-edge);background:var(--panel);border-radius:6px;padding:7px 14px;font-size:14px;animation:.25s ease-out toast-in}.toast.good{color:var(--good);border-color:#9ed39a80}.toast.warn{color:var(--warn);border-color:#f0b36a80}.toast.out{opacity:0;transition:opacity .5s}@keyframes toast-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.vitals{width:260px;position:absolute;bottom:26px;left:28px}.bar{background:#00000073;border:1px solid #0009;border-radius:5px;height:10px;overflow:hidden}.bar>i{background:linear-gradient(90deg,#b8423a,#e2685a);width:100%;height:100%;transition:width .18s;display:block}.boss-bar{opacity:0;pointer-events:none;width:min(520px,100% - 32px);transition:opacity .4s;position:absolute;top:26px;left:50%;transform:translate(-50%)}.boss-bar.show{opacity:1}.boss-name{font-family:var(--serif,Georgia, serif);letter-spacing:.06em;text-align:center;color:var(--ink);text-shadow:0 1px 3px #000;margin-bottom:6px;font-size:18px}.boss-track{background:#00000080;border:1px solid #000000b3;border-radius:4px;height:8px;overflow:hidden}.boss-track>i{background:linear-gradient(90deg,#8a2a2a,#d0584a);height:100%;transition:width .2s;display:block}.buffs{flex-wrap:wrap;gap:6px;margin-bottom:6px;display:flex}.buff{color:var(--ink);text-shadow:0 1px 2px #000;background:#1e160c99;border:1px solid #ffd28c59;border-radius:3px;padding:2px 7px;font-size:11px}.buff>b{color:var(--ink-dim);margin-left:6px;font-weight:500}.bar-label{color:var(--ink-dim);text-shadow:0 1px 2px #000;margin-bottom:4px;font-size:12px}.pips{gap:5px;margin-top:6px;display:flex}.pips>i{background:var(--cold);border-radius:2px;width:22px;height:4px;box-shadow:0 0 6px #8fd0ff99}.pips>i.empty{box-shadow:none;background:#8fd0ff33}.fade{opacity:0;pointer-events:none;background:#050506;position:absolute;inset:0}.subtitle{text-align:center;opacity:0;background:#0000008c;border-radius:4px;max-width:70%;padding:6px 12px;font-size:15px;transition:opacity .3s;position:absolute;bottom:12%;left:50%;transform:translate(-50%)}.subtitle.show{opacity:1}.xp-column{flex-direction:column;align-items:flex-end;gap:2px;display:flex;position:absolute;top:44%;right:26%}.xp-drop{color:var(--brass);text-shadow:0 1px 3px #000000f2;font-size:14px;font-weight:600;animation:1.6s ease-out forwards xp-rise}@keyframes xp-rise{0%{opacity:0;transform:translateY(8px)}12%{opacity:1;transform:none}70%{opacity:1}to{opacity:0;transform:translateY(-36px)}}.banner{text-align:center;opacity:0;pointer-events:none;text-shadow:0 2px 14px #000000e6;position:absolute;top:33%;left:50%;transform:translate(-50%)}.banner.show{animation:3.2s ease-out forwards banner}@keyframes banner{0%{opacity:0;transform:translate(-50%)scale(.92)}10%{opacity:1;transform:translate(-50%)scale(1)}80%{opacity:1}to{opacity:0}}.banner-eyebrow{letter-spacing:.35em;text-transform:uppercase;color:var(--brass);font-size:12px}.banner-title{font-family:var(--display);margin-top:4px;font-size:38px}.pickups{flex-direction:column;gap:3px;display:flex;position:absolute;bottom:96px;left:28px}.pickup{color:var(--ink);text-shadow:0 1px 3px #000;font-size:13px;animation:.2s ease-out toast-in}.trip{border:1px solid var(--panel-edge);background:var(--panel);opacity:0;pointer-events:none;border-radius:8px;width:300px;padding:14px 16px;transition:opacity .6s,transform .6s;position:absolute;top:150px;right:26px;transform:translate(16px)}.trip.show{opacity:1;transform:none}.trip-eyebrow{font-family:var(--display);color:var(--brass);margin-bottom:8px;font-size:19px}.trip-line{margin-top:4px;font-size:13px;line-height:1.35}.trip-line.dim{color:var(--ink-dim)}.tracker{text-align:right;text-shadow:0 1px 3px #000000f2;max-width:300px;position:absolute;top:22px;right:26px}.tracker-label{letter-spacing:.3em;text-transform:uppercase;color:var(--brass);margin-top:8px;font-size:10px}.tracker-main{font-size:14px;line-height:1.35}.tracker-optional{color:var(--ink-dim);font-size:13px;line-height:1.35}.card{border:1px solid var(--panel-edge);background:#0e0c0be6;border-radius:12px;grid-template-columns:1.4fr 1fr;gap:28px;width:min(860px,94vw);max-height:86vh;padding:24px 28px;display:grid;position:absolute;top:50%;left:50%;overflow-y:auto;transform:translate(-50%,-50%);box-shadow:0 30px 80px #0009}.card-title{font-family:var(--display);font-size:26px}.card-sub{color:var(--ink-dim);margin-top:2px;font-size:12px}.card-label{letter-spacing:.3em;text-transform:uppercase;color:var(--brass);margin:16px 0 6px;font-size:10px}.card-text{font-size:14px;line-height:1.4}.card-text.dim{color:var(--ink-dim)}.pack-grid{grid-template-columns:repeat(6,1fr);gap:5px;display:grid}.slot{background:#ffffff08;border:1px solid #ffffff14;border-radius:5px;height:54px;padding:4px;position:relative;overflow:hidden}.slot-name{color:var(--ink);font-size:10px;line-height:1.2;display:block}.slot-count{color:var(--brass);font-size:12px;font-weight:700;position:absolute;bottom:3px;right:5px}.slot.kind-ore{border-color:#b8673a80}.slot.kind-fish{border-color:#78aad280}.slot.kind-food{border-color:#9ed39a80}.slot.kind-core{border-color:#9ef3ff99}.slot.kind-quest{border-color:#d9a75bcc}.slot.kind-herb{border-color:#78b46e80}.skill-row{grid-template-columns:1fr 30px;align-items:center;gap:2px 8px;margin-top:10px;font-size:14px;display:grid}.skill-level{text-align:right;color:var(--brass);font-weight:700}.skill-bar{background:#ffffff14;border-radius:2px;grid-column:span 2;height:4px;overflow:hidden}.skill-bar>i{background:var(--brass);height:100%;display:block}.skill-next{color:var(--ink-dim);grid-column:span 2;font-size:11px}.card-hint{color:var(--ink-dim);margin-top:22px;font-size:11px}.hurt-vignette{opacity:0;pointer-events:none;background:radial-gradient(#0000 55%,#96141ebf 100%);position:absolute;inset:0}.hotbar{gap:6px;display:flex;position:absolute;bottom:22px;left:50%;transform:translate(-50%)}.hot-slot{text-shadow:0 1px 2px #000;background:#0a0908a8;border:1px solid #ffffff24;border-radius:6px;width:96px;height:46px;padding:5px 7px;font-size:11px;position:relative}.hot-slot.empty{opacity:.35}.hot-slot.eating{border-color:var(--good);box-shadow:0 0 10px #9ed39a66}.hot-key{color:var(--brass);font-weight:700;position:absolute;top:3px;right:6px}.hot-name{max-width:70px;line-height:1.15;display:block}.hot-count{color:var(--ink-dim);position:absolute;bottom:4px;right:6px}.weapon-readout{color:var(--ink);text-shadow:0 1px 3px #000;font-size:14px;position:absolute;bottom:28px;right:28px}.splats{pointer-events:none;position:absolute;inset:0}.splat{color:#fff;text-align:center;background:#b3261e;border-radius:10px;min-width:26px;padding:2px 6px;font-size:13px;font-weight:700;animation:.8s ease-out forwards splat;position:absolute;transform:translate(-50%,-50%);box-shadow:0 1px 4px #0009}.splat.weak{color:#1a0f00;background:#e8a33a}.splat.blocked{background:#2d5d8a}@keyframes splat{0%{opacity:0;transform:translate(-50%,-30%)scale(.7)}15%{opacity:1;transform:translate(-50%,-50%)scale(1.1)}to{opacity:0;transform:translate(-50%,-140%)scale(1)}}.threats{width:0;height:0;position:absolute;top:50%;left:50%}.threat{filter:drop-shadow(0 0 6px #ff3d9acc);transform-origin:9px 9px;border-bottom:16px solid #ff3d9a;border-left:9px solid #0000;border-right:9px solid #0000;width:0;height:0;position:absolute;top:-9px;left:-9px}@media (max-width:1000px){.vitals{width:220px;top:20px;bottom:auto;left:18px}.hot-slot{width:84px}.weapon-readout{right:18px}}.menu{pointer-events:auto;background:radial-gradient(#08080a8c,#040406eb);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.menu.title-screen{background:linear-gradient(90deg,#040406e0 0%,#0404068c 45%,#04040600 75%);justify-content:flex-start;padding-left:9vw}.menu-box{border:1px solid var(--panel-edge);background:var(--panel);border-radius:10px;min-width:320px;max-width:460px;padding:28px 30px;box-shadow:0 20px 60px #0009}.title-box{box-shadow:none;background:0 0;border:none;padding:0}.eyebrow{letter-spacing:.4em;text-transform:uppercase;color:var(--brass);font-size:13px}.game-title{font-family:var(--display);letter-spacing:.02em;text-shadow:0 4px 30px #000c;margin:6px 0 4px;font-size:76px;font-weight:400;line-height:1}.tagline{font-family:var(--display);color:var(--ink-dim);margin:0 0 30px;font-size:18px;font-style:italic}.menu-heading{font-family:var(--display);margin:0 0 18px;font-size:30px;font-weight:400}.menu-list{flex-direction:column;gap:10px;margin-top:14px;display:flex}.btn{border:1px solid var(--brass-dim);color:var(--ink);font:500 15px var(--body);text-align:left;cursor:pointer;background:#ffffff08;border-radius:6px;padding:11px 18px;transition:background .15s,border-color .15s,transform .15s}.btn:hover{border-color:var(--brass);background:#d9a75b1f;transform:translate(3px)}.btn.primary{border-color:var(--brass);background:#d9a75b2e}.btn:disabled{opacity:.4;cursor:default;transform:none}.menu-hint{color:var(--ink-dim);margin:20px 0 0;font-size:12px}.settings-box{min-width:420px}.guide-box{min-width:520px;max-width:620px}.guide-tabs{flex-wrap:wrap;gap:4px;margin-bottom:14px;display:flex}.guide-list{max-height:46vh;margin-bottom:16px;overflow-y:auto}.guide-row{color:var(--ink-dim);border-bottom:1px solid #ffffff0d;grid-template-columns:34px 1fr;gap:10px;padding:6px 4px;font-size:14px;display:grid}.guide-row.done{color:var(--ink)}.guide-level{text-align:right;color:var(--brass);font-weight:700}.setting{border-bottom:1px solid #ffffff0f;grid-template-columns:1fr 150px 54px;align-items:center;gap:10px;padding:7px 0;font-size:14px;display:grid}.setting input[type=range]{width:100%;accent-color:var(--brass)}.setting input[type=checkbox]{width:18px;height:18px;accent-color:var(--brass);justify-self:start}.setting-value{color:var(--ink-dim);text-align:right;font-size:12px}.segmented{grid-column:span 2;gap:4px;display:flex}.seg{border:1px solid var(--brass-dim);color:var(--ink-dim);font:13px var(--body);text-transform:capitalize;cursor:pointer;background:0 0;border-radius:4px;flex:1;padding:5px 0}.seg.on{border-color:var(--brass);color:var(--ink);background:#d9a75b33}.panel-layer{pointer-events:auto;background:linear-gradient(90deg,#0000 30%,#0000008c);justify-content:flex-end;align-items:center;padding-right:6vw;display:flex;position:absolute;inset:0}.panel{border:1px solid var(--panel-edge);background:var(--panel);border-radius:10px;flex-direction:column;width:min(460px,92vw);max-height:84vh;display:flex;overflow:hidden;box-shadow:0 24px 70px #000000a6}.panel-head{border-bottom:1px solid #ffffff0f;padding:18px 22px 12px;position:relative}.panel-name{font-family:var(--display);font-size:26px}.panel-role{letter-spacing:.28em;text-transform:uppercase;color:var(--brass);margin-top:2px;font-size:11px}.panel-close{color:var(--ink-dim);cursor:pointer;background:0 0;border:none;font-size:22px;position:absolute;top:12px;right:14px}.panel-text{font-family:var(--display);padding:12px 22px 4px;font-size:16px;line-height:1.5}.panel-text p{margin:0 0 10px}.panel-rows{padding:6px 14px;overflow-y:auto}.panel-row{border-radius:6px;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:8px;display:grid}.panel-row:hover{background:#ffffff08}.panel-row.dim{opacity:.5}.row-title{font-size:14px}.row-detail{color:var(--ink-dim);white-space:pre-line;margin-top:2px;font-size:12px}.row-meta{color:var(--brass);white-space:nowrap;font-size:13px}.row-actions{gap:4px;display:flex}.btn.small{padding:5px 10px;font-size:12px}.btn.small:hover{transform:none}.panel-options{flex-direction:column;gap:6px;padding:10px 22px 6px;display:flex}.panel-footer{color:var(--ink-dim);border-top:1px solid #ffffff0f;padding:10px 22px 14px;font-size:12px}
