:root{color-scheme:light;--ink: #3e2f1c;--ink-soft: #6b5340;--parchment: #f4e4c1;--parchment-dark: #e7d1a3;--wood: #8d6e63;--leaf: #4e7a3e;--moss: #1d2a1f;--gold: #c4783a;--shadow: rgba(30, 24, 16, .28);font-family:Nunito,Trebuchet MS,Segoe UI,sans-serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at top,#314a34,var(--moss) 55%);color:var(--ink)}#app{min-height:100vh;display:flex;flex-direction:column;padding:12px 16px 20px;gap:12px}.topbar{display:flex;justify-content:space-between;align-items:end;color:#f4e4c1}.eyebrow{margin:0;letter-spacing:.08em;text-transform:uppercase;font-size:11px;opacity:.8}h1{font-family:Fraunces,Georgia,serif;margin:0;font-size:28px}h2{font-family:Fraunces,Georgia,serif;margin:0 0 8px;font-size:16px}.status{margin:0;font-size:13px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:12px;align-items:start;flex:1}#game-root{width:100%;background:#243226;border-radius:16px;overflow:hidden;box-shadow:0 16px 40px var(--shadow);min-height:360px;aspect-ratio:30 / 18}#game-root canvas{display:block}#hud{display:flex;flex-direction:column;gap:10px}.panel{background:var(--parchment);border:2px solid #c8ad7a;border-radius:14px;padding:12px;box-shadow:0 8px 20px var(--shadow)}.hint{margin:0 0 8px;color:var(--ink-soft);font-size:12px}.skill-row{display:grid;grid-template-columns:92px 1fr 36px;gap:8px;align-items:center;margin-bottom:8px;font-size:13px}.xp-track{height:10px;background:var(--parchment-dark);border-radius:999px;overflow:hidden}.xp-fill{height:100%;width:0;background:var(--leaf)}.equip-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:13px}.equip-row button,#chat-form button,.gate-card button,.inventory-slot{font:inherit;cursor:pointer}.equip-row button,#chat-form button,.gate-card button{background:var(--gold);color:#fff8e7;border:0;border-radius:999px;padding:6px 12px;font-weight:800}.inventory-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.inventory-slot{aspect-ratio:1;border-radius:8px;border:1px solid #c8ad7a;background:#efe0b8;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;color:var(--ink);padding:2px}.inventory-slot .qty{font-weight:800}.chat-log{height:120px;overflow-y:auto;background:#efe0b8;border-radius:8px;padding:8px;font-size:12px;margin-bottom:8px}.chat-log p{margin:0 0 4px}#chat-form{display:flex;gap:6px}#chat-form input,.gate-card input{flex:1;border:1px solid #c8ad7a;border-radius:999px;padding:8px 12px;font:inherit;background:#fff8e7;color:var(--ink)}.gate{position:fixed;top:0;right:0;bottom:0;left:0;background:#121c14b8;display:grid;place-items:center;padding:20px;z-index:20}.gate[hidden]{display:none}.gate-card{width:min(420px,100%);background:var(--parchment);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 50px var(--shadow)}.gate-card label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:800}.toasts{position:fixed;right:24px;bottom:24px;display:flex;flex-direction:column;gap:8px;z-index:30;pointer-events:none}.toast{background:var(--parchment);color:var(--ink);border-radius:999px;padding:8px 14px;box-shadow:0 8px 18px var(--shadow);font-weight:800;font-size:13px}@media(max-width:960px){.layout{grid-template-columns:1fr}#hud{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}