:root { color-scheme: dark; --gold:#d7ae58; --pale:#ead9ab; --ink:#07100f; --red:#b8392e; --green:#7ca56c; }
* { box-sizing:border-box; }
html,body { margin:0; width:100%; height:100%; overflow:hidden; background:#050a09; font-family:Inter,system-ui,sans-serif; }
body { display:grid; place-items:center; }
#game-shell { position:relative; width:min(100vw,177.7778vh); height:min(100vh,56.25vw); aspect-ratio:16/9; overflow:hidden; background:#15241d; }
#game { display:block; width:100%; height:100%; image-rendering:auto; cursor:default; }
#game.custom-cursor { cursor:none; }
#game-shell::after { content:""; pointer-events:none; position:absolute; inset:0; box-shadow:inset 0 0 140px 34px rgba(0,0,0,.7); }
.hidden { display:none !important; }
.panel { color:#eee4ca; text-align:center; z-index:20; }
.screen { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px; background:radial-gradient(circle at 50% 43%,rgba(18,38,32,.55),rgba(3,8,8,.94) 70%); }
.screen::before,.modal::before { content:""; position:absolute; inset:18px; border:1px solid rgba(215,174,88,.28); pointer-events:none; }
.crest { display:grid; place-items:center; width:64px; height:64px; margin-bottom:18px; border:1px solid var(--gold); transform:rotate(45deg); color:var(--gold); font-size:28px; }
.crest::first-letter { transform:rotate(-45deg); }
.eyebrow { color:var(--gold); letter-spacing:.32em; font-size:11px; font-weight:800; margin:8px 0 12px; }
h1,h2,.brand,.wave-banner { font-family:Cinzel,Georgia,serif; }
h1 { margin:0; font-size:clamp(44px,7vw,94px); letter-spacing:.06em; line-height:.85; text-shadow:0 5px 22px #000; }
h1 span { color:var(--gold); font-size:.61em; letter-spacing:.22em; }
.lead { color:#bdb9a9; margin:24px 0 30px; font-family:Georgia,serif; font-style:italic; }
button { font:inherit; color:inherit; cursor:pointer; }
.primary { min-width:min(440px,85vw); padding:16px 28px 13px; border:1px solid #d7ae58; background:linear-gradient(#967234,#5b421d); box-shadow:inset 0 0 0 2px #171008,0 7px 22px #0008; font-family:Cinzel,serif; font-weight:900; letter-spacing:.16em; }
.primary:hover:not(:disabled) { filter:brightness(1.2); transform:translateY(-1px); }
.primary:disabled { filter:grayscale(.65); cursor:wait; }
.primary small { display:block; margin-top:7px; font-family:Inter,sans-serif; font-size:8px; letter-spacing:.12em; color:#e8d7ae; }
.primary.compact { min-width:260px; }
.secondary { display:block; margin:18px auto 0; background:none; border:0; color:#aaa391; font-size:11px; letter-spacing:.16em; }
.opk-note { position:absolute; bottom:30px; color:#65665f; font-size:9px; letter-spacing:.08em; }
.modal { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(860px,92vw); padding:42px; background:linear-gradient(145deg,rgba(12,23,21,.98),rgba(5,10,10,.98)); border:1px solid #665329; box-shadow:0 25px 90px #000; }
.modal h2 { margin:0 0 30px; color:#e8d59f; font-size:34px; letter-spacing:.08em; }
#hud { position:absolute; inset:0; pointer-events:none; z-index:10; color:#ede6d3; text-shadow:1px 2px 3px #000; }
.brand { position:absolute; top:24px; left:28px; font-size:16px; letter-spacing:.08em; color:#d7cba9; }
.brand span { display:block; color:var(--gold); font-size:8px; letter-spacing:.24em; }
.wave-card { position:absolute; top:20px; left:50%; transform:translateX(-50%); display:grid; grid-template-columns:auto auto; column-gap:8px; align-items:baseline; text-align:center; }
.wave-card small { color:#a9a28f; letter-spacing:.2em; font-size:8px; }.wave-card strong { font:700 24px Cinzel;color:var(--gold); }.wave-card span { grid-column:1/3;font:700 11px Cinzel;letter-spacing:.16em; }
.timer { position:absolute; top:72px; left:50%; transform:translateX(-50%); color:#c7c2b1;text-align:center }.timer small{display:block;font-size:6px;letter-spacing:.18em;color:#8c897f}.timer span{font:700 12px Georgia}
.remaining { position:absolute; right:112px; top:24px; text-align:right; }.remaining small{display:block;font-size:8px;letter-spacing:.16em;color:#aaa391}.remaining strong{font:700 22px Cinzel;color:#d8cfb7}
.kills { position:absolute; right:30px; top:24px; text-align:right; }.kills small{display:block;font-size:8px;letter-spacing:.16em;color:#aaa391}.kills strong{font:700 22px Cinzel;color:var(--gold)}
.gold { position:absolute;right:30px;top:78px;text-align:right}.gold small{font-size:8px;letter-spacing:.16em;color:#aaa391;margin-right:8px}.gold strong{font:700 16px Georgia;color:#e0ba5c}
.status-console{pointer-events:none;position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:min(510px,48vw);padding:7px 12px 6px;background:linear-gradient(#161c19e8,#070b0ae8);border:1px solid #514934;box-shadow:0 4px 14px #000}.resource,.xp-row{display:flex;align-items:center;gap:7px;height:13px;font-size:8px;letter-spacing:.06em}.resource>span{width:20px;font-weight:800}.resource>b{width:60px;color:#aaa697;font-size:8px}.resource .bar{flex:1;height:7px}.hp-line>span{color:#dc6255}.mp-line>span{color:#6495cf}.sp-line>span{color:#d2b663}.xp-row>span{width:42px;color:#d5b970}.xp-row .bar{flex:1;height:6px}.xp-row em{width:48px;color:#999487;font-style:normal}
.bar { position:relative; width:min(420px,52vw); height:9px; background:#0b0c0b; border:1px solid #4e4634; box-shadow:inset 0 1px 4px #000; }.bar i{display:block;height:100%;transition:width .2s}.bar.hp i{background:linear-gradient(90deg,#77261f,#cb493b)}.bar.xp i{background:linear-gradient(90deg,#476d7a,#79a8b1)}
.bar.mp i{background:linear-gradient(90deg,#294d78,#508bd0)}.bar.sp i{background:linear-gradient(90deg,#76602c,#c3a447)}
.icon-button { pointer-events:auto; position:absolute; right:24px; bottom:25px; width:38px;height:38px;border:1px solid #6e6042;background:#111b19aa;color:#cbb784; }
.shop-button{pointer-events:auto;position:absolute;left:25px;bottom:25px;height:38px;padding:0 13px;border:1px solid #6e6042;background:#111b19dd;color:#cbb784;font:700 10px Georgia;letter-spacing:.12em}.shop-button span{font-size:16px;margin-right:7px}.shop-button kbd{margin-left:10px;padding:2px 5px;border:1px solid #574d36;color:#81775f;font:8px Inter;background:#080d0c}
.inventory-button{pointer-events:auto;position:absolute;left:150px;bottom:25px;height:38px;padding:0 12px;border:1px solid #6e6042;background:#111b19dd;color:#cbb784;font:700 10px Georgia;letter-spacing:.12em}.inventory-button kbd,.ability-button kbd{margin-left:8px;padding:2px 4px;border:1px solid #574d36;color:#81775f;font:8px Inter;background:#080d0c}.ability-button{pointer-events:auto;position:absolute;bottom:25px;height:42px;padding:5px 10px;border:1px solid #6e6042;background:#111b19e8;color:#cbb784;text-align:left}.ability-button small{display:block;font:700 8px Georgia;letter-spacing:.1em}.ability-button b{font:700 10px Inter;color:#ddd2b3}.ability-button.critical{right:190px}.ability-button.merien{right:64px}.ability-button:disabled{filter:grayscale(1);opacity:.48}.ability-button.armed{border-color:#e2bc5c;box-shadow:0 0 18px #d99b3955}.ability-button.active{border-color:#68b9d0;box-shadow:0 0 20px #4cb9d088}
.potion-button{pointer-events:auto;position:absolute;right:320px;bottom:78px;height:46px;display:flex;align-items:center;gap:5px;padding:3px 8px 3px 3px;border:1px solid #6e6042;background:#111b19e8;color:#cbb784;text-align:left}.potion-button canvas{width:34px;height:38px;image-rendering:pixelated}.potion-button span{min-width:70px}.potion-button small{display:block;font:700 7px Georgia;letter-spacing:.08em}.potion-button b{font:700 12px Inter;color:#e6d8ba}.potion-button kbd{padding:2px 5px;border:1px solid #574d36;color:#81775f;font:8px Inter;background:#080d0c}.potion-button:disabled{filter:grayscale(1);opacity:.48}
#upgrade-screen{width:min(1180px,96vw);max-height:94%;overflow:auto;padding:26px}#upgrade-screen h2{margin-bottom:16px}.upgrade-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.upgrade { min-height:150px; padding:14px 12px; border:1px solid #665735; background:linear-gradient(#192723,#0b1312); text-align:left; transition:.15s; }.upgrade:hover{border-color:#d7ae58;transform:translateY(-2px);background:#1d302a}.upgrade.selected{border-color:#e4ba57;background:#253b32;box-shadow:inset 0 0 20px #d7ae582d,0 0 12px #d7ae5840}.upgrade .rune{font-size:24px;color:var(--gold)}.upgrade h3{font:700 14px Cinzel;color:#e6d39f;margin:9px 0 6px}.upgrade p{color:#aaa798;font-size:9px;line-height:1.4;margin:0}.upgrade small{display:block;color:#6f9e8b;margin-top:9px;font-size:8px;letter-spacing:.08em}.confirm-upgrade{display:block;margin:16px auto 0;padding:10px 20px}.confirm-upgrade:disabled{opacity:.42}
.wave-banner { position:absolute; z-index:15; left:50%; top:43%; transform:translate(-50%,-50%); text-align:center; text-shadow:0 4px 16px #000; animation:banner 2.5s both; pointer-events:none; }.wave-banner small{display:block;color:#b7a77b;font-size:12px;letter-spacing:.35em}.wave-banner strong{display:block;color:#f0dfad;font-size:48px;letter-spacing:.12em}.wave-banner span{font-family:Inter;color:#aaa99e;font-size:10px;letter-spacing:.16em}
@keyframes banner { 0%{opacity:0;transform:translate(-50%,-35%)} 15%,70%{opacity:1;transform:translate(-50%,-50%)} 100%{opacity:0;transform:translate(-50%,-65%)} }
.results { display:flex;justify-content:center;gap:60px;margin-bottom:30px}.results small{display:block;color:#898679;font-size:8px;letter-spacing:.16em}.results b{font:700 28px Cinzel;color:var(--gold)}
.shop{width:min(1120px,96vw);padding:35px 32px}.shop h2{margin-bottom:8px}.modal-close{position:absolute;right:17px;top:13px;border:0;background:none;color:#8e856e;font:30px Georgia}.shop-balance{color:#8e8979;font-size:9px;letter-spacing:.18em;margin:0 0 20px}.shop-balance strong{color:#e0ba5c;font:700 18px Georgia;margin-left:10px}.shop-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.shop-item{position:relative;padding:13px 10px;border:1px solid #4e4938;background:linear-gradient(#18241f,#0b1210);color:#c9c0a8;text-align:center}.shop-item.equipped{border-color:#9c8245;box-shadow:inset 0 0 18px #8b6b2425}.shop-item canvas{display:block;width:88px;height:64px;margin:0 auto 4px;image-rendering:pixelated}.shop-item h3{margin:3px 0 5px;font:700 14px Georgia;color:#e1d2ad}.shop-item p{height:30px;margin:0;color:#888679;font-size:9px;line-height:1.45}.item-stats{display:flex;justify-content:center;gap:11px;margin:10px 0;font-size:8px;color:#91a591}.buy-item{width:100%;padding:8px;border:1px solid #6e5a31;background:#503d1e;color:#e3cd92;font:700 9px Inter;letter-spacing:.1em}.buy-item:disabled{border-color:#34342e;background:#1b201d;color:#66675e}.shop-note{margin:15px 0 0;color:#66665f;font-size:8px;letter-spacing:.06em}
.inventory{width:640px;height:620px;padding:0;overflow:hidden}#inventory-art{display:block;width:320px;height:240px;margin:4px auto -8px;opacity:.8;image-rendering:pixelated}.inventory-content{position:relative;padding:0 34px 24px}.inventory-content h2{margin-bottom:12px}.equip-slots{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:10px}.equip-slots>div{padding:8px;border:1px solid #625538;background:#111a17cc}.equip-slots small{display:block;color:#7f7a6d;font-size:7px;letter-spacing:.15em}.equip-slots strong{color:#e1c984;font:700 13px Georgia}.bag-grid{display:grid;grid-template-columns:repeat(6,58px);justify-content:center;gap:5px;min-height:132px;padding:10px;border:1px solid #443e30;background:#070c0bc9}.bag-slot{position:relative;height:58px;border:1px solid #332f28;background:#0c1210}.bag-slot canvas{width:100%;height:100%;image-rendering:pixelated}.bag-slot span{position:absolute;left:2px;right:2px;bottom:2px;padding:2px;background:#000b;font-size:6px;color:#bbb49e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inventory-gold{color:#8d8879;font-size:8px;letter-spacing:.15em}.inventory-gold b{color:#e0ba5c;font-size:14px;margin-left:8px}
.error{position:absolute;z-index:40;bottom:20px;left:20px;right:20px;padding:14px;background:#421d19;border:1px solid #a64c41;color:#ffd5ce;font-size:12px;text-align:center}
@media (max-width:900px){.upgrade-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:650px){.upgrade-grid{grid-template-columns:repeat(2,1fr)}.upgrade{min-height:auto}.modal{padding:30px 22px;max-height:90vh;overflow:auto}.brand{display:none}.wave-banner strong{font-size:34px}.status-console{width:58vw;left:50%}.results{gap:25px}.shop-grid{grid-template-columns:repeat(2,1fr)}.shop-button{left:8px}.inventory-button{left:106px}.gold{right:14px}.ability-button{bottom:47px;transform:scale(.7);transform-origin:bottom right}.ability-button.critical{right:92px}.ability-button.merien{right:5px}.potion-button{right:176px;bottom:47px;transform:scale(.7);transform-origin:bottom right}.inventory{width:94vw}.bag-grid{grid-template-columns:repeat(4,58px)}}
@media (orientation:portrait) and (max-width:650px){.screen{padding:10px}.screen .crest,.screen .lead,.screen .opk-note{display:none}.screen .eyebrow{font-size:7px;margin:3px}.screen h1{font-size:26px;line-height:.9}.screen .primary{min-width:82vw;margin-top:8px;padding:8px 12px;font-size:9px}.screen .primary small{font-size:6px}.wave-banner{top:38%}.wave-banner strong{font-size:24px}.wave-banner small,.wave-banner span{font-size:6px}.status-console{bottom:3px}.shop-button,.inventory-button,.icon-button{bottom:4px;transform:scale(.72);transform-origin:bottom left}.inventory-button{left:85px}.potion-button{right:176px;bottom:4px}.icon-button{transform-origin:bottom right}}

.shop{width:min(1080px,97vw);padding:26px 25px}.shop-grid{grid-template-columns:repeat(6,1fr);gap:8px}.shop-item{padding:10px 8px}.shop-item h3{min-height:34px;margin-bottom:3px}.shop-item p{height:30px}.item-stats{margin:8px 0 4px}.bag-slot.equipped{border-color:#c19c4d;box-shadow:inset 0 0 12px #b78b3544}
@media (max-width:900px){.shop-grid{grid-template-columns:repeat(4,1fr)}.shop{max-height:92vh;overflow:auto}}
@media (max-width:650px){.shop-grid{grid-template-columns:repeat(2,1fr)}}