:root{--ink:#0b0a08;--paper:#efe6d3;--paper-dim:#efe6d39e;--amber:#e5a24a;--amber-deep:#b8742a;--moss:#6f8a3d;--panel:#100e0bb8;--panel-edge:#efe6d324;--display:"Cinzel", "Palatino Linotype", "Book Antiqua", serif;--body:"Crimson Pro", Georgia, "Times New Roman", serif;--mono:"JetBrains Mono", "SFMono-Regular", Menlo, monospace}*{box-sizing:border-box}html,body{background:var(--ink);height:100%;color:var(--paper);font-family:var(--body);-webkit-font-smoothing:antialiased;margin:0;font-size:17px;overflow:hidden}#game{cursor:none;width:100vw;height:100vh;display:block;position:fixed;inset:0}.hidden{display:none!important}kbd{font-family:var(--mono);color:var(--paper);letter-spacing:.04em;background:#efe6d30f;border:1px solid #efe6d34d;border-bottom-width:2px;border-radius:4px;padding:.12em .5em;font-size:.72em}#hud{pointer-events:none;position:fixed;inset:0}#crosshair{mix-blend-mode:difference;width:22px;height:22px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#crosshair:before,#crosshair:after{content:"";background:#fff;position:absolute;top:50%;left:50%}#crosshair:before{width:2px;height:100%;transform:translate(-50%,-50%)}#crosshair:after{width:100%;height:2px;transform:translate(-50%,-50%)}#vignette{background:radial-gradient(#0000 55%,#00000059 100%);position:absolute;inset:0}#underwater{opacity:0;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);background:radial-gradient(#14466e2e 0%,#08244080 100%);transition:opacity .25s;position:absolute;inset:0}#underwater.visible{opacity:1}#hotbar{border:1px solid var(--panel-edge);background:linear-gradient(#14110db3,#080705d1);border-radius:8px;gap:4px;padding:6px;display:flex;position:absolute;bottom:22px;left:50%;transform:translate(-50%);box-shadow:0 12px 40px #00000073,inset 0 1px #ffffff0d}.slot{background:#00000059;border:1px solid #efe6d314;border-radius:5px;place-items:center;width:62px;height:62px;transition:transform .12s,border-color .12s;display:grid;position:relative}.slot canvas{filter:drop-shadow(0 3px 4px #0009);width:52px;height:52px}.slot .num{font-family:var(--mono);color:var(--paper-dim);font-size:10px;position:absolute;top:3px;left:5px}.slot.active{border-color:var(--amber);transform:translateY(-4px);box-shadow:0 0 0 1px #e5a24a80,0 0 22px #e5a24a59}#tooltip{font-family:var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--paper);text-shadow:0 2px 8px #000c;opacity:0;font-size:15px;transition:opacity .25s,transform .25s;position:absolute;bottom:106px;left:50%;transform:translate(-50%)translateY(6px)}#tooltip.visible{opacity:1;transform:translate(-50%)translateY(0)}#hint{color:var(--paper-dim);text-shadow:0 1px 4px #000c;font-size:14px;position:absolute;bottom:18px;right:18px}#debug{font-family:var(--mono);border-left:2px solid var(--amber);color:var(--paper);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#08070599;padding:10px 14px;font-size:12.5px;line-height:1.6;position:absolute;top:14px;left:14px}#debug b{color:var(--amber)}.panel{background:var(--panel);border:1px solid var(--panel-edge);-webkit-backdrop-filter:blur(14px)saturate(120%);backdrop-filter:blur(14px)saturate(120%);border-radius:10px;width:min(760px,92vw);max-height:84vh;padding:28px 30px 30px;animation:.25s ease-out rise;position:fixed;top:50%;left:50%;overflow:auto;transform:translate(-50%,-50%);box-shadow:0 30px 80px #0009}.panel h2{font-family:var(--display);letter-spacing:.08em;margin:0;font-size:26px;font-weight:500}.panel .sub{color:var(--paper-dim);margin:4px 0 20px;font-style:italic}#inventory-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;display:grid}.cell{appearance:none;color:var(--paper);cursor:pointer;font-family:var(--body);background:#0000004d;border:1px solid #efe6d31a;border-radius:6px;flex-direction:column;align-items:center;gap:6px;padding:10px 6px 8px;font-size:13px;transition:border-color .12s,background .12s,transform .12s;display:flex}.cell:hover{border-color:var(--amber);background:#e5a24a1a;transform:translateY(-2px)}.cell canvas{filter:drop-shadow(0 3px 4px #0009);width:52px;height:52px}#menu{background:linear-gradient(100deg, #08070540 0%, #0807058c 55%, #080705db 100%), var(--ink);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);cursor:default;grid-template-columns:minmax(0,1fr) minmax(360px,520px);display:grid;position:fixed;inset:0}#menu:before{content:"";pointer-events:none;opacity:.18;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");position:absolute;inset:0}.menu-inner{border-left:1px solid #efe6d314;flex-direction:column;grid-column:2;justify-content:center;gap:30px;padding:48px 56px 40px 40px;animation:.6s cubic-bezier(.2,.7,.2,1) rise;display:flex}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}.brand .eyebrow{font-family:var(--mono);letter-spacing:.32em;text-transform:uppercase;color:var(--amber);margin-bottom:10px;font-size:11px;display:block}.brand h1{font-family:var(--display);letter-spacing:.02em;background:linear-gradient(#fff6e6 0%,#e9d3a8 55%,#b98a4a 100%);color:#0000;filter:drop-shadow(0 6px 24px #e5a24a40);-webkit-background-clip:text;background-clip:text;margin:0;font-size:clamp(48px,6vw,72px);font-weight:700;line-height:.95}.brand .tagline{color:var(--paper-dim);margin-top:12px;font-size:18px;font-style:italic;display:block}.screen{flex-direction:column;gap:16px;display:flex}.field{flex-direction:column;flex:1;gap:6px;display:flex}.field span{font-family:var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--paper-dim);font-size:11px}.field input,.field select{appearance:none;font-family:var(--body);color:var(--paper);background:#00000059;border:1px solid #efe6d329;border-radius:6px;outline:none;padding:11px 14px;font-size:17px;transition:border-color .15s,box-shadow .15s}.field select{background-image:linear-gradient(45deg, transparent 50%, var(--paper-dim) 50%), linear-gradient(135deg, var(--paper-dim) 50%, transparent 50%);background-position:calc(100% - 20px),calc(100% - 14px);background-repeat:no-repeat;background-size:6px 6px,6px 6px}.field select option{background:#171310}.field input:focus,.field select:focus{border-color:var(--amber);box-shadow:0 0 0 3px #e5a24a2e}.row{gap:14px;display:flex}.actions{flex-direction:column;gap:10px;margin-top:6px;display:flex}button{appearance:none;cursor:pointer;font-family:var(--display);letter-spacing:.14em;text-transform:uppercase;border:1px solid #0000;border-radius:6px;padding:15px 18px;font-size:15px;font-weight:500;transition:transform .12s,box-shadow .15s,background .15s,border-color .15s}button:disabled{opacity:.4;cursor:not-allowed}button.primary{color:#1a1206;background:linear-gradient(180deg, #f3c471, var(--amber) 60%, var(--amber-deep));box-shadow:0 10px 30px #e5a24a47,inset 0 1px #ffffff59}button.primary:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 16px 40px #e5a24a66,inset 0 1px #ffffff59}button.secondary{color:var(--paper);background:#efe6d30d;border-color:#efe6d32e;font-size:13px}button.secondary:not(:disabled):hover{background:#efe6d31a;border-color:#efe6d366}button.secondary.danger:not(:disabled):hover{color:#f0b39e;border-color:#c9694a}.status{min-height:1.4em;color:var(--moss);font-size:14px;font-family:var(--mono);margin:0}.loading{flex-direction:column;gap:8px;margin-top:4px;display:flex}.loading .bar{background:#efe6d31a;border-radius:2px;height:4px;overflow:hidden}#loading-fill{background:linear-gradient(90deg, var(--amber-deep), var(--amber), #f6d79a);width:0%;height:100%;transition:width .2s ease-out;box-shadow:0 0 12px #e5a24a99}#loading-text{font-family:var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--paper-dim);font-size:11px}.controls{color:var(--paper-dim);border-top:1px solid #efe6d31a;grid-template-columns:1fr 1fr;gap:8px 18px;padding-top:22px;font-size:14px;display:grid}.controls div{align-items:center;gap:10px;display:flex}@media (max-width:820px){#menu{grid-template-columns:1fr}.menu-inner{border-left:none;grid-column:1;padding:32px 24px}.controls{display:none}}