@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Cinzel:wght@500;700;900&family=Noto+Sans+Thai:wght@400;500;600;700&family=Noto+Serif+Thai:wght@500;700;900&family=UnifrakturCook:wght@700&display=swap');
:root{color-scheme:dark;--paper:#f1e5cd;--muted:#9d9f9c;--line:#454644;--red:#ef795f;--bg:#151719;font-family:'Noto Sans Thai',system-ui,sans-serif;font-size:16px}*{box-sizing:border-box}body{margin:0;background:#151719;color:var(--paper);overflow:hidden}button,input{font:inherit}button{color:var(--paper);background:#2b2d2b;border:1px solid #55564f;padding:12px 16px;cursor:pointer;border-radius:3px;transition:background .15s,transform .15s}button:hover{background:#3c3f38;transform:translateY(-1px)}button:disabled{opacity:.4;cursor:default;transform:none}button:focus-visible,input:focus-visible{outline:2px solid var(--red);outline-offset:3px}button.primary{background:var(--red);color:#201e19;border-color:var(--red);font-weight:700}.primary:hover{background:#ff9d7e}.primary span{font:12px monospace;opacity:.6}input{width:100%;background:#111415;color:var(--paper);border:1px solid var(--line);padding:12px 14px;border-radius:3px}input::placeholder{color:#7f8582}h1,h2,p{margin:0}h2{font-size:30px;line-height:1.5;font-weight:600}p{line-height:1.75}small{font-size:12px;color:var(--muted)}[hidden]{display:none!important}canvas{position:fixed;inset:0;width:100%;height:100%;outline:none}.overlay{position:fixed;inset:0;display:grid;place-items:center;padding:26px;overflow:auto;background:radial-gradient(ellipse at 40% 45%,#222422dd,#101316fa);z-index:10}.setup{width:min(1200px,100%);margin:auto}.brand{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}.eyebrow{color:var(--red);letter-spacing:.24em;font:12px/1.5 monospace}.brand h1{font-family:Georgia,serif;font-size:clamp(50px,7vw,88px);font-weight:500;letter-spacing:-.065em;line-height:1.1}.brand h1 span{font:18px Georgia;vertical-align:top;display:inline-block;margin:14px 0 0 8px;color:var(--red)}.build{font:12px/1.8 monospace;text-align:right;letter-spacing:.12em;color:var(--muted)}.setup-grid{display:grid;grid-template-columns:1.7fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.selection{padding:22px 30px 24px 0;border-right:1px solid var(--line)}.entry{padding:26px 0 22px 32px}.entry h2{margin:10px 0;font-size:clamp(24px,2.5vw,34px)}.entry>p{color:var(--muted);font-size:14px;margin-bottom:16px}.entry label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}.entry>button{width:100%;margin-top:10px;text-align:left;display:flex;justify-content:space-between}.join{display:flex;gap:8px;margin-top:10px}.join input{text-transform:uppercase;min-width:0}.join button{white-space:nowrap}.section-label{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:16px}.section-label>span{font:12px monospace;letter-spacing:.12em;color:#c1c4bc}.heroes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:25px}.hero{position:relative;text-align:left;padding:0 10px 12px;background:#292b28;overflow:hidden;border:1px solid #4b4c47}.hero.selected{border-color:var(--red);background:#37332a;box-shadow:inset 0 -3px var(--red)}.portrait{height:165px;background-image:url('assets/heroes.png');background-repeat:no-repeat;background-size:400% 100%;background-position:var(--pos) center;filter:drop-shadow(0 7px 5px #0006);margin:8px -8px 4px}.hero span{display:block;color:var(--red);font:12px monospace;margin-bottom:5px}.hero b{font-size:13px;font-weight:500;white-space:nowrap}.worlds{display:grid;grid-template-columns:1fr 1fr;gap:10px}.world{text-align:left;position:relative;background:#222724;padding:13px 14px;border-left:3px solid var(--accent)}.world.selected{background:#3c3c31;border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.world b{display:block;font-size:14px;font-weight:600}.world small{display:block;font-size:10px;letter-spacing:.08em;margin-top:5px;color:var(--accent)}.setup footer{display:flex;justify-content:space-between;margin-top:16px;color:#90998e;font:11px monospace;letter-spacing:.06em}.controls{border-top:1px solid var(--line);padding-top:12px;margin-top:14px}.controls p{font-size:12px;color:var(--muted);line-height:2.1}kbd{font:11px monospace;color:var(--paper);border:1px solid #575b53;padding:3px 5px;border-radius:3px}.entry #home-status{font-size:12px;margin:10px 0 0;color:#c9b58f;min-height:20px}.dialog{background:#1b201fee;border:1px solid #6f7162;border-top:3px solid var(--red);padding:32px;width:min(780px,100%);box-shadow:0 30px 100px #0009}.dialog>p{margin:12px 0;color:var(--muted)}.dialog h2{margin:10px 0 16px}.codebar{display:flex;align-items:center;gap:16px;background:#111715;padding:16px;margin:15px 0}.codebar strong{font:28px monospace;letter-spacing:.12em;margin-right:auto;color:#efc884}#roster{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}.member{padding:15px;background:#30352f;border-top:3px solid var(--accent);overflow:hidden}.member b{font-size:14px;display:block;text-overflow:ellipsis;overflow:hidden}.member small{display:block;margin-top:8px}.actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}#hud{position:fixed;inset:0;pointer-events:none}.hud-top{display:flex;align-items:flex-start;justify-content:space-between;padding:20px 24px;background:linear-gradient(#0b1213bb,transparent);height:125px}.hud-brand{font:29px Georgia;letter-spacing:-1px}.hud-brand small{display:block;font:12px 'Noto Sans Thai';letter-spacing:0;margin-top:4px;color:#d1d2c8}.clock{position:absolute;left:50%;transform:translateX(-50%);text-align:center}.clock b{font:32px monospace;color:#f6e9ce}.clock span{display:block;font-size:12px;color:#b4bdae;margin-top:4px}.hud-right{display:flex;align-items:center;gap:10px;font:12px monospace}.hud-right button{pointer-events:auto;padding:8px 10px;background:#172020bb}#team{position:absolute;left:24px;top:106px;display:grid;gap:8px;width:170px}.mate{background:#142020c9;border-left:3px solid var(--accent);padding:8px 10px;font-size:12px}.mate span{display:block}.mini-bar{height:3px;background:#5f4945;margin-top:6px}.mini-bar i{height:100%;display:block;background:var(--accent)}.hud-bottom{position:absolute;bottom:34px;left:24px;right:24px;display:flex;align-items:end;justify-content:space-between;gap:20px}.player-vitals{width:190px;flex-shrink:0;background:#142020db;padding:12px;border:1px solid #4e5a4e}.player-vitals span{font:12px monospace}.health{height:8px;background:#59372d;margin:8px 0}.health i{display:block;height:100%;background:#f08263;transition:width .1s}#dash-label{color:#a8d5bd}.weapons{display:flex;gap:5px;pointer-events:auto}.weapon{position:relative;width:73px;height:75px;padding:9px 5px 6px;background:#172020df;border:1px solid #667162;text-align:center}.weapon.selected{border-color:#eacb8a;background:#444637;box-shadow:inset 0 -3px #eacb8a}.weapon kbd{position:absolute;left:4px;top:3px;font-size:10px;border:0;padding:0;color:#c7bd9f}.weapon svg{width:40px;height:31px;margin-top:6px;fill:none;stroke:#dccfad;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.weapon span{font-size:11px;display:block;margin-top:2px}.kills{width:125px;text-align:right;text-shadow:0 2px 6px #000}.kills b{font:28px monospace;display:block}.kills span{font:10px monospace;letter-spacing:.08em;color:#c0bcac}.xp-track{position:absolute;bottom:0;left:0;right:0;height:16px;background:#172220}.xp-track i{height:100%;display:block;background:#77b8ad;transition:width .12s}.xp-track span{position:absolute;top:0;left:50%;transform:translateX(-50%);font:11px/16px monospace;text-shadow:1px 1px #000;color:#fff}#bossbar{position:absolute;top:90px;left:30%;width:40%;text-align:center;color:#f09479;font-size:14px}#bossbar>div{height:8px;background:#49332f;margin-top:7px}#bossbar i{display:block;height:100%;background:#ef795f}#notice{position:absolute;left:50%;top:24%;transform:translateX(-50%);padding:12px 20px;background:#17201de8;border:1px solid #99916b;color:#ffe2a0;text-align:center;font-size:14px}.veil{background:#08100ac7;backdrop-filter:blur(3px)}.upgrades{width:min(900px,100%);text-align:center}#cards{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:24px}.card{text-align:left;min-height:235px;background:linear-gradient(130deg,#333b2f,#222a23);border:1px solid #72785f;padding:22px}.card strong{display:block;font:38px Georgia;color:#e5c485;margin-bottom:35px}.card b{display:block;font-size:18px;color:#f1dfb6}.card p{color:#aeb6a6;font-size:14px;margin-top:10px}.card small{display:block;margin-top:16px}.result{text-align:center}.result .actions{justify-content:center}.pause{max-height:90vh;overflow:auto}.pause h2{font-size:25px}.warning{font-size:13px;color:#efaa80!important}#weapon-guide{display:grid;grid-template-columns:1fr 1fr;gap:10px}#weapon-guide article{border:1px solid var(--line);padding:10px;font-size:14px}#weapon-guide small{display:block;margin-top:6px}#toast{position:fixed;z-index:30;top:18px;left:50%;transform:translateX(-50%);background:#e3c993;color:#252b22;padding:12px 22px;border-radius:3px;box-shadow:0 5px 25px #0006;font-size:14px}
@media(max-width:1000px){.overlay{padding:18px}.setup-grid{grid-template-columns:1.5fr 1fr}.selection{padding-right:18px}.entry{padding-left:18px}.portrait{height:130px}.hero b{font-size:11px}.player-vitals{width:155px}.weapon{width:60px}.kills{display:none}.hud-bottom{gap:12px}.setup footer{font-size:10px}}
@media(max-width:700px){.overlay{display:block}.setup-grid{grid-template-columns:1fr}.selection{border-right:0;padding-right:0}.entry{padding:16px 0}.brand{margin-bottom:14px}.entry h2{font-size:24px}.setup footer{flex-direction:column;gap:10px}.portrait{height:150px}.dialog{margin:auto;padding:22px}.hud-brand{font-size:21px}.hud-top{padding:12px}.clock b{font-size:24px}.hud-right span{display:none}.hud-bottom{left:10px;right:10px;bottom:28px;flex-wrap:wrap;justify-content:center}.player-vitals{width:160px}.weapons{width:100%;justify-content:center}.weapon{width:52px;height:65px}.weapon svg{width:30px;height:24px}.weapon span{font-size:10px}#team{left:12px;top:78px;width:130px}#cards{grid-template-columns:1fr}.card{min-height:130px}.card strong{margin-bottom:8px;float:right}#roster{grid-template-columns:1fr 1fr}.codebar{gap:8px;padding:10px}.codebar strong{font-size:23px}#bossbar{left:25%;width:50%;top:85px}}
.weapon.locked{opacity:.3;filter:grayscale(1)}.weapon.selected{border-color:#eacb8a;background:#444637;box-shadow:inset 0 -3px #eacb8a}.weapons{pointer-events:none}
.upgrade-panel{position:fixed;right:20px;top:132px;z-index:8;width:min(410px,calc(100vw - 40px));pointer-events:none}.upgrade-panel .dialog{width:100%;padding:17px 19px;background:#151d1bed;pointer-events:auto;border-top-color:#e8c486}.upgrade-panel h2{font-size:21px;margin:3px 0}.upgrade-panel p{font-size:12px;margin:3px 0}.upgrade-panel #cards{display:grid;grid-template-columns:1fr;gap:6px;margin-top:9px}.upgrade-panel .card{display:grid;grid-template-columns:38px 1fr;min-height:0;padding:8px 10px;gap:0 8px}.upgrade-panel .card strong{grid-row:1/4;font:27px Georgia;margin:0;align-self:center}.upgrade-panel .card b{font-size:13px}.upgrade-panel .card p{font-size:11px;margin:0;line-height:1.35}.upgrade-panel .card small{font-size:10px;margin:0}.upgrade-panel .card:hover{background:#48503d}
@media(max-width:700px){.upgrade-panel{top:105px;right:10px;width:min(350px,calc(100vw - 20px))}.upgrade-panel .dialog{padding:11px}.upgrade-panel .card{padding:5px 7px}.upgrade-panel .card p{display:none}}

/* Gothic ritual skin: carved stone, aged gold, blood-red wax and candlelight. */
:root{--paper:#f0e3c8;--muted:#c0ad99;--line:#6c5140;--red:#b84a45;--bg:#130f11}
body{background:#0f0b0e;color:var(--paper)}
button{background:linear-gradient(155deg,#392d2b,#211b1e);border:1px solid #796047;color:#f1e3c7;box-shadow:inset 0 1px #e8c78d22,0 3px 8px #0005;letter-spacing:.02em}
button:hover{background:linear-gradient(155deg,#58403a,#33272a);border-color:#c69a62}
button.primary{background:linear-gradient(135deg,#9f3738,#5d252d);border-color:#e3a86c;color:#fff0d5;text-shadow:0 1px #321418;box-shadow:inset 0 1px #f8d39d55,0 6px 22px #0008}
button.primary:hover{background:linear-gradient(135deg,#bd4f43,#76313a)}
button:focus-visible,input:focus-visible{outline-color:#e6bd79}
input{background:#110d10d9;border-color:#765b47;color:#f6e8d2}
#home{background:linear-gradient(90deg,#100c12c9,#140d11b5 48%,#0d0a0fd4),linear-gradient(0deg,#0d0a0bee,#0d0a0b22 72%),url('/assets/cathedral.webp') center/cover fixed}
#home .setup{position:relative;width:min(1240px,100%);padding:24px 28px;background:linear-gradient(140deg,#1a1519eb,#161014ef);border:1px solid #a47a4d;box-shadow:0 0 0 5px #0e0b0db8,0 0 0 6px #72513b,0 28px 90px #000d, inset 0 0 100px #4d211525;backdrop-filter:blur(8px)}
#home .setup:before,#home .setup:after{content:'◆';position:absolute;color:#d9b777;font:22px Georgia;text-shadow:0 0 12px #e9a65d;pointer-events:none}
#home .setup:before{left:-7px;top:-15px}#home .setup:after{right:-7px;bottom:-15px}
.brand{border-bottom:1px solid #a4774c;padding-bottom:13px;margin-bottom:10px}.brand h1{font-family:Georgia,serif;font-weight:700;letter-spacing:-.05em;color:#f4e2bf;text-shadow:0 2px #5e2228,0 0 25px #b6793970}.eyebrow{color:#d8aa73}.build{color:#d6bb98}
.setup-grid{border-top:0;border-bottom-color:#806044}.selection{border-right-color:#79563f}.section-label>span{color:#e0bb83}.section-label small{color:#c9ab87}
.entry>p,.controls p{color:#d4c1a8}.entry h2,.dialog h2{font-family:Georgia,'Noto Sans Thai',serif;color:#f2d8a4;text-shadow:0 0 16px #b46a4140}
.hero{background:linear-gradient(180deg,#2a2023,#160e13);border:1px solid #5e4539;box-shadow:inset 0 0 0 1px #d5a66a0c}.hero:hover{border-color:#b48b5e}.hero.selected{border-color:#e0bb79;background:linear-gradient(180deg,#392222,#211416);box-shadow:0 0 15px #ac533248,inset 0 -3px #c58f55}.hero .portrait{background-image:url('/assets/heroes-gothic.webp');filter:drop-shadow(0 8px 7px #000b);animation:portraitBreath 4.2s ease-in-out infinite}.hero:nth-child(2) .portrait{animation-delay:-1s}.hero:nth-child(3) .portrait{animation-delay:-2s}.hero:nth-child(4) .portrait{animation-delay:-3s}.hero span{color:#e4ac76}.hero b{color:#f6ddba}
.world{background:linear-gradient(120deg,#251b20,#1b151a);border-left-width:4px;box-shadow:inset 0 1px #f5d7a711}.world:hover{box-shadow:inset 0 0 24px var(--accent)}.world.selected{background:linear-gradient(120deg,#3f292a,#25201e);box-shadow:inset 0 0 0 1px var(--accent),0 0 13px #ad714c55}.world b{color:#f2d8b8}
.mode-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:11px 0 9px}.mode-row button{font:12px/1.3 Georgia,serif;letter-spacing:.08em;padding:10px}.mode-row button.active,.hud-right button.active{border-color:#d5aa6a;background:linear-gradient(145deg,#665036,#32261e);color:#ffe6ad;box-shadow:inset 0 0 12px #e9c47b24,0 0 12px #c6823850}
.controls{border-top-color:#72503e}.controls kbd{background:#201719;border-color:#9c724e;color:#e8c487}.setup footer{color:#c0a182}
.dialog{background:linear-gradient(150deg,#21191cfa,#120e12f7);border-color:#a1784e;border-top-color:#d5a971;box-shadow:0 35px 100px #000d,inset 0 0 70px #702d1b13}.codebar{background:#160f13;border:1px solid #6d4b37}.codebar strong{color:#f1c983}.member{background:#302222}.card{background:linear-gradient(135deg,#443124,#23191d);border-color:#8c694a}.card:hover{border-color:#e5bc76}.upgrades .eyebrow{color:#edbd78}
#hud{color:#f3e2c5}.hud-top{background:linear-gradient(#130d12ed,#130d1278 60%,transparent);border-top:3px solid #8b5b3b}.hud-brand{color:#f2dcad;text-shadow:0 2px #762d2d,0 0 13px #edb56b6b}.hud-brand small{color:#d6af82}.clock b{color:#f1d49d;text-shadow:0 0 12px #bf794888}.hud-right button{font:11px Georgia,serif;letter-spacing:.05em;white-space:nowrap;border-color:#795943;background:#24191ccf}.mate,.player-vitals,.weapon{background:linear-gradient(160deg,#24191ddd,#130e11e8);border-color:#7a5a41}.weapon.selected{border-color:#e7b96e;background:linear-gradient(160deg,#705037,#2c2020);box-shadow:inset 0 -3px #e7b96e,0 0 12px #b8753655}.weapon svg{stroke:#efd6a2}.health{background:#46252a}.health i{background:linear-gradient(90deg,#9d2835,#e68160)}.xp-track{background:#211417}.xp-track i{background:linear-gradient(90deg,#84704d,#e1c074)}#bossbar{color:#f0c194;text-shadow:0 2px #2f0b12}#bossbar>div{border:1px solid #be7951;background:#3b2025}#bossbar i{background:linear-gradient(90deg,#8d2937,#ed9164)}
.upgrade-panel .dialog{background:linear-gradient(140deg,#261b1ef2,#120f13f7);border-color:#ba8d5b}.upgrade-panel .card{border-color:#8c694a;background:linear-gradient(110deg,#453025,#23191e)}#toast{background:#dfbb7d;border:1px solid #fff0c2;color:#271516}
#flash{position:fixed;inset:0;z-index:7;pointer-events:none;opacity:0;mix-blend-mode:screen}
@keyframes portraitBreath{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.015)}}
@media(max-width:1000px){#home .setup{padding:16px}.hud-right{gap:5px}.hud-right button{padding:6px;font-size:10px}}
@media(max-width:700px){#home{background-attachment:scroll}#home .setup{padding:15px}.hud-right button{font-size:9px;padding:4px}.hud-right #music-toggle{font-size:0;width:28px;min-width:28px}.hud-right #music-toggle:before{content:'♫';font-size:16px}.hud-top{height:108px}.clock{top:42px}.clock b{font-size:20px}.mode-row{margin-top:13px}.hero .portrait{height:135px}}
.overlay:not(#home){background:radial-gradient(ellipse at 50% 20%,#382026ec,#100c11fb 78%)}
@media(prefers-reduced-motion:reduce){.hero .portrait{animation:none}#flash{display:none}button{transition:none}}

/* Low-frequency arcade celebration layer; never intercepts input. */
#arcade-lights{position:fixed;inset:0;z-index:7;pointer-events:none;opacity:0;mix-blend-mode:screen;background:repeating-linear-gradient(0deg,transparent 0 4px,#ffe7a40b 4px 5px),radial-gradient(ellipse at center,transparent 36%,var(--arcade-color,#e5ac5b) 130%);box-shadow:inset 0 0 90px 12px var(--arcade-color,#e5ac5b),inset 0 0 0 8px #f3c26d55}
#arcade-callout{position:fixed;z-index:9;left:50%;top:16%;transform:translateX(-50%);pointer-events:none;min-width:260px;padding:7px 26px;text-align:center;white-space:nowrap;color:#fff2c4;background:linear-gradient(90deg,transparent,#341923ee 17% 83%,transparent);border-top:2px solid #f2c373;border-bottom:2px solid #f2c373;font:900 clamp(25px,4vw,55px)/1.1 Georgia,serif;letter-spacing:.1em;text-shadow:0 0 9px #ffe8a0,3px 3px 0 #7a2431,0 0 28px #f19154;opacity:0}
#arcade-callout small{display:block;margin-top:3px;font:11px/1.3 monospace;letter-spacing:.28em;color:#f0b879;text-shadow:none}
@media(prefers-reduced-motion:reduce){#arcade-lights{display:none!important}#arcade-callout{transition:none;text-shadow:none}}

.dungeon-label{margin-top:20px;margin-bottom:10px}.dungeons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.dungeon{text-align:left;min-height:66px;padding:9px 11px;background:linear-gradient(125deg,#241a1d,#171419);border:1px solid #735940;border-left:3px solid #9b754c}
.dungeon b{display:block;font:600 13px/1.4 'Noto Sans Thai',system-ui,sans-serif;color:#f0d7a8}.dungeon small{display:block;margin-top:3px;font-size:10px;line-height:1.35;color:#b9a68e}
.dungeon.selected{border-color:#e9bf74;background:linear-gradient(125deg,#4b2d25,#21191d);box-shadow:inset 0 0 18px #b16a3a38}.dungeon:disabled{opacity:.55}
.account-box{border:1px solid #775640;background:linear-gradient(130deg,#261b1e,#171115);padding:12px;margin:12px 0 15px}.account-box small{color:#d9ac76;letter-spacing:.14em}
.auth-fields{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:7px 0}.auth-fields input{padding:8px 10px;font-size:12px;min-width:0}.auth-actions{display:flex;gap:6px;flex-wrap:wrap}.auth-actions button{padding:6px 9px;font-size:11px;background:#392720;border-color:#8b6546}.account-line{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:6px 0 10px}.account-line b{font-size:14px;color:#f5dfbd}.account-line span{font:12px monospace;color:#f0c77a}
.meta-dialog{width:min(850px,100%);max-height:90vh;overflow:auto}.meta-head{display:flex;align-items:start;justify-content:space-between;gap:15px}.meta-head button{padding:6px 11px}.meta-tabs{display:flex;gap:7px;margin:12px 0 15px;flex-wrap:wrap}.meta-tabs button{font-size:12px;padding:8px 12px}.meta-tabs button.active{border-color:#e6bc79;background:#5a382b}.meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.meta-card{border:1px solid #72543f;background:#261b20;padding:14px;min-height:104px}.meta-card b{display:block;color:#f0d5a5}.meta-card p{font-size:12px;color:#c2b2a0;margin:4px 0 9px}.meta-card button{padding:6px 10px;font-size:12px}.meta-card small{display:block;margin-top:6px}.meta-progress{height:6px;background:#4b3232;margin:10px 0 6px}.meta-progress i{display:block;height:100%;background:#d6a46e}.meta-empty{color:#c4b7a4;padding:20px;border:1px solid #72543f}#result-reward{color:#efc681;margin-top:10px}
@media(max-width:700px){.dungeons,.meta-grid,.auth-fields{grid-template-columns:1fr}.dungeon{min-height:52px}.account-box{margin-top:10px}.meta-dialog{margin:auto}.meta-tabs button{flex:1}}

/* ── Remaster: cultic dark fantasy. Blackletter, gilded iron, bone, old blood. ── */
:root{--paper:#eadcc4;--muted:#b9a58c;--line:#5b3f31;--red:#a3161f;--blood:#7a0c12;--blood-hi:#c42a2a;--gold:#c9a25f;--gold-hi:#f0d08a;--bone:#e9dcc0;--ink:#070405;
 --serif:'Cinzel','Noto Serif Thai',Georgia,serif;--thai:'Noto Serif Thai','Noto Sans Thai',serif;
 --corner:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M2 42V10l8-8h32' fill='none' stroke='%23c9a25f' stroke-width='2'/%3E%3Cpath d='M8 42V14l6-6h28' fill='none' stroke='%23c9a25f' stroke-opacity='.4'/%3E%3Cpath d='M2 2l9 9' stroke='%23c9a25f' stroke-width='1.5'/%3E%3Ccircle cx='6' cy='6' r='3.2' fill='%23a3161f' stroke='%23f0d08a' stroke-width='.8'/%3E%3Cpath d='M20 2l3 4 3-4M2 20l4 3-4 3' fill='none' stroke='%23c9a25f'/%3E%3C/svg%3E");
 --drips:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0h240v5c-7 0-8 4-9 11s-5 7-6 0-2-11-8-11h-34c-6 0-6 20-10 23s-5-18-10-23h-46c-5 0-5 11-7 12s-4-12-8-12H58c-7 0-7 30-12 32S41 5 34 5H18c-4 0-4 8-6 8S9 5 6 5H0z' fill='%23850f17'/%3E%3Cpath d='M0 0h240v3H0z' fill='%23b01e24'/%3E%3C/svg%3E");
 --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 font-family:var(--thai)}
body{background:var(--ink)}
body:after{content:'';position:fixed;inset:0;z-index:25;pointer-events:none;background:var(--grain);opacity:.22;mix-blend-mode:overlay}
h1,h2{font-family:var(--serif)}
.eyebrow,.section-label>span,.build,.setup footer,.hud-right,.kills span,.xp-track span,#upgrade-countdown{font-family:'Cinzel',Georgia,serif!important;letter-spacing:.22em}
.eyebrow{color:#d39b5e;font-size:11px;font-weight:700;text-shadow:0 0 10px #a3161f88}

/* Blackletter logo with dripping blood beneath. */
.logo{position:relative;display:inline-block;font-family:'UnifrakturCook','Cinzel',serif!important;font-weight:700;letter-spacing:.01em!important;color:var(--bone);
 background:linear-gradient(180deg,#fff4dc 0%,#e3cfa8 42%,#a98a5e 58%,#e8d3ab 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
 filter:drop-shadow(0 3px 0 #3d0508) drop-shadow(0 0 18px #a3161f99)}
.brand h1.logo{font-size:clamp(58px,8.4vw,112px);line-height:1;padding-bottom:18px;text-shadow:none}
.brand h1.logo:after{content:'';position:absolute;left:4%;right:6%;bottom:-6px;height:30px;background:var(--drips) center/100% 100% no-repeat;-webkit-text-fill-color:initial;filter:drop-shadow(0 2px 2px #000)}
.hud-brand .logo{font-size:34px;line-height:1}

/* Ornate gilded frames: filigree corners on every panel. */
#home .setup,.dialog,.upgrade-panel .dialog{position:relative;background:linear-gradient(160deg,#1a0f12f2,#0c0709f7 60%,#140a0cf5);border:1px solid #6e4c32;border-top:1px solid #6e4c32;
 box-shadow:0 0 0 4px #0a0507,0 0 0 5px #4a3222,inset 0 0 0 1px #c9a25f22,inset 0 0 120px #5a0a1030,0 40px 120px #000e}
#home .setup:before,#home .setup:after,.dialog:before,.dialog:after{content:'';position:absolute;width:44px;height:44px;background:var(--corner) center/contain no-repeat;pointer-events:none;color:transparent;text-shadow:none;font-size:0}
#home .setup:before,.dialog:before{left:-6px;top:-6px}
#home .setup:after,.dialog:after{right:-6px;bottom:-6px;transform:rotate(180deg)}
.upgrade-panel .dialog:before,.upgrade-panel .dialog:after{width:30px;height:30px}
#home{background:linear-gradient(90deg,#0a0507e0,#0e0609c0 50%,#0a0507e8),radial-gradient(ellipse at 50% 110%,#5a0a10aa,transparent 60%),url('/assets/cathedral.webp') center/cover fixed}
.brand{border-bottom:0;background:linear-gradient(90deg,transparent,#c9a25f66 20%,#c9a25f66 80%,transparent) bottom/100% 1px no-repeat;padding-bottom:16px}
.build{color:#b8946a;line-height:2}
.section-label>span{color:#d9b073;font-weight:700;font-size:11px}
.section-label{position:relative;padding-left:16px}.section-label:before{content:'✠';position:absolute;left:0;top:50%;transform:translateY(-55%);color:#c42a2a;font-size:13px;text-shadow:0 0 6px #ff3b2f88}
.entry h2,.dialog h2{font-family:var(--thai);font-weight:900;color:#f0dcb4;text-shadow:0 2px 0 #3d0508,0 0 22px #a3161f66}
.entry>p,.controls p{color:#bfa98d}

/* Buttons: carved iron; primary is a blood-wax seal. */
button{font-family:var(--serif);font-weight:700;letter-spacing:.06em;border-radius:1px;background:linear-gradient(180deg,#2a1a1a,#140b0d);border:1px solid #6b4a33;color:#e9d6b2;box-shadow:inset 0 1px #f0d08a1f,inset 0 -2px #00000080,0 2px 10px #0008}
button:hover{background:linear-gradient(180deg,#3d2220,#1c0e10);border-color:#c9a25f;color:#fff0cf;box-shadow:inset 0 1px #f0d08a33,0 0 14px #a3161f55}
button.primary{position:relative;background:radial-gradient(ellipse at 30% 0%,#d23a36,#8c1219 45%,#4a060b);border:1px solid #f0b46c;color:#fff1d6;text-shadow:0 1px 0 #2b0306,0 0 8px #ff6a4a77;box-shadow:inset 0 1px #ffd9a066,inset 0 -3px #2b030699,0 0 0 3px #0a0507,0 0 0 4px #7a4a2c,0 10px 30px #7a0c1288}
button.primary:hover{background:radial-gradient(ellipse at 30% 0%,#ef4d44,#a8161e 45%,#5a0a10);box-shadow:inset 0 1px #ffd9a088,0 0 0 3px #0a0507,0 0 0 4px #c9a25f,0 0 28px #c42a2acc}
.primary span{font-family:'Cinzel',serif;opacity:.75}
input{font-family:var(--thai);background:#0b0607e6;border:1px solid #5b3f31;border-radius:1px;box-shadow:inset 0 2px 8px #000c}
input:focus{border-color:#c9a25f;box-shadow:inset 0 2px 8px #000c,0 0 10px #a3161f66}
kbd,.controls kbd{font-family:'Cinzel',serif;background:#140a0c;border-color:#7a5636;color:#f0d08a;border-radius:1px}
.mode-row{grid-template-columns:repeat(3,1fr)}
.mode-row button.active,.hud-right button.active{border-color:#c9a25f;background:linear-gradient(180deg,#5a1a1a,#2a0b0e);color:#ffdfa0;box-shadow:inset 0 0 14px #ff5a3c33,0 0 12px #a3161f88}

/* Selection cards. */
.hero{background:radial-gradient(ellipse at 50% 30%,#2a1418,#0e0709 75%);border:1px solid #4a3024}
.hero:before{content:'';position:absolute;inset:4px;border:1px solid #c9a25f1c;pointer-events:none}
.hero.selected{border-color:#c9a25f;background:radial-gradient(ellipse at 50% 35%,#5a1418,#170809 75%);box-shadow:0 0 22px #a3161f77,inset 0 -3px #c42a2a}
.hero.selected .portrait{filter:drop-shadow(0 0 10px #ff4a3a66) drop-shadow(0 8px 7px #000)}
.hero b{font-family:var(--thai);font-weight:700}.hero span{font-family:'Cinzel',serif;color:#c42a2a;font-weight:900}
.world,.dungeon{background:linear-gradient(110deg,#1c0e11,#0f0809);border:1px solid #3e2a20;border-left:3px solid var(--accent,#9b754c)}
.world.selected,.dungeon.selected{background:linear-gradient(110deg,#3a1216,#140809);box-shadow:inset 0 0 0 1px var(--accent,#c9a25f),0 0 16px #a3161f55}
.world b,.dungeon b{font-family:var(--thai);font-weight:700}.world small{font-family:'Cinzel',serif;font-weight:700}
.account-box{background:linear-gradient(130deg,#1c0e11,#0d0708);border-color:#4f3626}

/* HUD. */
.hud-top{background:linear-gradient(#000000e6,#0a0406a0 55%,transparent);border-top:2px solid #7a0c12;box-shadow:inset 0 1px #c9a25f44}
.hud-brand small{font-family:var(--thai);color:#c99a6a}
.clock b{font-family:'Cinzel',serif;font-weight:900;color:#f0d08a;letter-spacing:.08em;text-shadow:0 2px 0 #3d0508,0 0 14px #a3161faa}
.clock span{font-family:'Cinzel',serif;font-weight:700;letter-spacing:.18em;color:#c99a6a;font-size:11px}
.hud-right button{font-family:'Cinzel',serif;background:#120a0bdd}
.mate,.player-vitals,.weapon{background:linear-gradient(170deg,#1e0f12ee,#0b0607f2);border:1px solid #5b3f31;box-shadow:inset 0 0 0 1px #c9a25f14,0 6px 20px #000a}
.player-vitals span{font-family:'Cinzel',serif;font-weight:700;letter-spacing:.06em}
.health{position:relative;height:13px;background:#1a0507;border:1px solid #7a5636;border-radius:7px;overflow:hidden;box-shadow:inset 0 2px 6px #000}
.health i{position:relative;background:linear-gradient(180deg,#e0453f,#8a0f17 55%,#4d050a);border-radius:6px;box-shadow:0 0 10px #c42a2a}
.health i:after{content:'';position:absolute;left:4px;right:4px;top:2px;height:3px;border-radius:3px;background:#ffd0c055}
.health:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 18%,#0007 18% calc(18% + 1px));pointer-events:none}
.mini-bar{height:4px;background:#2a0b0e}.mini-bar i{background:linear-gradient(90deg,#8a0f17,#e0453f)}
#dash-label{color:#d9b073}
.weapon{border-radius:1px}.weapon.selected{border-color:#c9a25f;background:radial-gradient(ellipse at 50% 100%,#6a1a1aee,#1a0b0def 70%);box-shadow:inset 0 -2px #c42a2a,0 0 14px #a3161f88}
.weapon span{font-family:var(--thai);font-weight:700}
.kills b{font-family:'Cinzel',serif;font-weight:900;color:#e0453f;text-shadow:0 2px 0 #2b0306,0 0 14px #c42a2a}
.xp-track{height:14px;background:#0a0506;border-top:1px solid #5b3f31}.xp-track i{background:linear-gradient(90deg,#5a3a1a,#c9a25f 70%,#ffe2a0);box-shadow:0 0 12px #c9a25f88}
.xp-track span{font-weight:700;font-size:10px;line-height:14px;text-shadow:0 1px 2px #000}
#bossbar{top:96px}
#boss-name{font-family:'UnifrakturCook','Noto Serif Thai',serif;font-size:26px;color:#ffcf9a;text-shadow:0 2px 0 #3d0508,0 0 18px #c42a2a}
#bossbar>div{position:relative;height:12px;background:#1a0507;border:1px solid #c9a25f;box-shadow:0 0 0 3px #0a0507,0 0 20px #a3161f88;overflow:visible}
#bossbar>div:before,#bossbar>div:after{content:'✠';position:absolute;top:50%;transform:translateY(-52%);color:#c9a25f;font-size:20px;text-shadow:0 0 8px #c42a2a}
#bossbar>div:before{left:-22px}#bossbar>div:after{right:-22px}
#bossbar i{background:linear-gradient(180deg,#ff5a4a,#a3161f 50%,#4d050a)}
#notice{font-family:var(--thai);background:#140809ee;border:1px solid #c42a2a;color:#ffd0a0;box-shadow:0 0 30px #a3161f88}
#toast{font-family:var(--thai);background:linear-gradient(180deg,#2a0b0e,#140608);border:1px solid #c9a25f;color:#f3dcb0;border-radius:1px;box-shadow:0 0 0 3px #0a0507,0 0 30px #a3161f88}

/* Upgrade choices as cursed tarot. */
.card{position:relative;background:linear-gradient(160deg,#2a1215,#0e0708);border:1px solid #6e4c32;box-shadow:inset 0 0 0 3px #0a0507,inset 0 0 0 4px #c9a25f33}
.card strong{color:#e0453f;text-shadow:0 0 12px #c42a2a}
.card b{font-family:var(--thai);font-weight:700;color:#f0d8a8}
.card:hover{background:linear-gradient(160deg,#4a1418,#14080a);border-color:#c9a25f;box-shadow:inset 0 0 0 3px #0a0507,inset 0 0 0 4px #c9a25f88,0 0 18px #a3161f77}
.upgrade-panel .card{background:linear-gradient(110deg,#2a1215,#0e0708)}
.upgrade-panel .card strong{font-family:'Cinzel',serif;width:34px;height:34px;display:grid;place-items:center;border:1px solid #c9a25f88;border-radius:50%;font-size:18px;background:radial-gradient(#3a0b0e,#0a0405)}

/* Arcade callout in blackletter. */
#arcade-callout{font-family:'UnifrakturCook','Cinzel',serif;background:linear-gradient(90deg,transparent,#2a0408ee 17% 83%,transparent);border-color:#c9a25f;text-shadow:0 0 10px #ff8a5a,3px 3px 0 #3d0508,0 0 30px #c42a2a}
#arcade-callout small{font-family:'Cinzel',serif}
.overlay:not(#home){background:radial-gradient(ellipse at 50% 20%,#3a0b10e8,#070304fb 75%)}

/* Low-health blood veil; pulses like a heartbeat when critical. */
#blood-veil{position:fixed;inset:0;z-index:6;pointer-events:none;opacity:0;transition:opacity .35s;
 background:radial-gradient(ellipse at 50% 50%,transparent 45%,#5a000a66 70%,#7a0010dd 100%);box-shadow:inset 0 0 120px 30px #4d0008}
#blood-veil.critical{animation:heartbeat 1s ease-in-out infinite}
@keyframes heartbeat{0%,100%{filter:brightness(1)}12%{filter:brightness(1.6)}24%{filter:brightness(1)}36%{filter:brightness(1.35)}}
@media(prefers-reduced-motion:reduce){#blood-veil.critical{animation:none}body:after{opacity:.12}}
@media(max-width:700px){.brand h1.logo{font-size:56px}.mode-row button{font-size:10px;padding:8px 4px}.hud-brand .logo{font-size:24px}.player-vitals{width:min(260px,100%)}#boss-name{font-size:18px}}
.build{letter-spacing:.14em!important;font-size:11px;white-space:nowrap}@media(max-width:700px){.build{display:none}}
#result.overlay{background:radial-gradient(ellipse at 50% 30%,#2a050acc,#070304e6 80%)}
canvas{touch-action:none;-webkit-user-select:none;user-select:none}canvas.aiming{cursor:none}

/* Gothicvania pixel art (CC0, ansimuz): crisp nearest-neighbour scaling everywhere. */
#home{background:linear-gradient(90deg,#0a0507cc,#0e060980 50%,#0a0507d0),linear-gradient(0deg,#0a0507ee,#0a050700 55%),url('/assets/gothicvania/home.png') center bottom/cover fixed;image-rendering:pixelated}

/* ── The Vault: armory, loadout, relics ── */
.meta-dialog{width:min(1080px,100%);max-height:92vh}
#meta-balance b{color:#f0c77a}
.meta-tabs{gap:6px}.meta-tabs button{font-family:var(--thai)}
.el-chart{font-size:12px;color:#bfa98d;margin:0 0 8px;padding:6px 10px;border:1px solid #3e2a20;background:#0e0809}
.el-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.el-chip{padding:5px 10px;font:600 12px var(--thai);border-color:color-mix(in srgb,var(--el) 45%,#3e2a20);background:#140b0d}
.el-chip small{color:#9c8a74;margin-left:4px}.el-chip.active{background:color-mix(in srgb,var(--el) 22%,#140b0d);border-color:var(--el);box-shadow:0 0 10px color-mix(in srgb,var(--el) 40%,transparent)}
.armory{display:grid;grid-template-columns:1fr 300px;gap:14px;align-items:start}
.arm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:6px;max-height:56vh;overflow:auto;padding-right:4px}
.arm-grid.small{grid-template-columns:repeat(auto-fill,minmax(70px,1fr));max-height:26vh;margin-bottom:12px}
.arm-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px 5px;min-height:84px;background:radial-gradient(ellipse at 50% 35%,color-mix(in srgb,var(--el,#c9a25f) 18%,#1a0d10),#0b0607 75%);border:1px solid #3e2a20;letter-spacing:0}
.arm-tile img{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 3px 3px #000)}
.arm-tile span{font:600 10px/1.25 var(--thai);text-align:center;color:#e9d6b2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.arm-tile.locked img{filter:grayscale(1) brightness(.35)}.arm-tile.locked span{color:#6f6458}
.arm-tile.ready{border-color:#c9a25f;animation:readyPulse 1.6s ease-in-out infinite}
.arm-tile.selected,.arm-tile.in-slot{border-color:var(--el,#c9a25f);box-shadow:inset 0 0 0 1px var(--el,#c9a25f),0 0 12px color-mix(in srgb,var(--el,#c9a25f) 45%,transparent)}
.arm-tile em{position:absolute;left:4px;top:3px;font:900 11px Cinzel,serif;color:#120a0b;background:#c9a25f;border-radius:50%;width:16px;height:16px;line-height:16px;font-style:normal}
.arm-tile u{position:absolute;right:5px;top:2px;text-decoration:none;color:#ffd36a;font:900 14px Cinzel,serif;text-shadow:0 0 6px #ff8a3a}
.el-badge{position:absolute;right:4px;bottom:22px;font-style:normal;font-size:12px;filter:drop-shadow(0 0 3px var(--el))}
.arm-detail{position:sticky;top:0;padding:14px;border:1px solid color-mix(in srgb,var(--el) 50%,#3e2a20);background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--el) 20%,#1a0d10),#0b0607 70%)}
.arm-detail>img{display:block;width:150px;height:110px;object-fit:contain;margin:0 auto 4px;filter:drop-shadow(0 6px 6px #000)}
.arm-detail h3{margin:2px 0 4px;font:900 22px var(--thai);color:#f0dcb4}.arm-detail p{font-size:12px;color:#bfa98d;margin:4px 0;line-height:1.5}
.arm-detail .el-line{color:var(--el);font-weight:700}
.stats{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:10px 0;font-size:12px}.stats dt{color:#9c8a74}.stats dd{margin:0;color:#f0dcb4;font-weight:600}
.mastery span{font:700 10px Cinzel,serif;letter-spacing:.08em;color:#d9b073}.mastery .meta-progress i{background:linear-gradient(90deg,#5a3a1a,#f0d08a)}
.reqs{list-style:none;padding:0;margin:10px 0;display:grid;gap:6px}.reqs li{font-size:12px;color:#d9a088}.reqs li.done{color:#a8d98a}.reqs small{color:#9c8a74}
.reqs .meta-progress{margin:3px 0}
.arm-detail .actions{margin-top:10px}.arm-detail .actions button{width:100%}
.hint{font-size:12px;color:#bfa98d;margin:0 0 10px}
.slots{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:8px}.slots.relics{grid-template-columns:repeat(2,1fr)}
.slot{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 6px;min-height:118px;background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--el,#5b3f31) 22%,#1a0d10),#0b0607 75%);border:1px solid #4a3024}
.slot b{font:900 13px Cinzel,serif;color:#c9a25f;align-self:flex-start}.slot img{width:56px;height:56px;object-fit:contain}.slot span{font:700 11px var(--thai);color:#f0dcb4;text-align:center}
.slot small{font-size:10px;color:#9c8a74;text-align:center}.slot.empty span{color:#6f6458}.slot.selected{border-color:#f0d08a;box-shadow:0 0 0 1px #f0d08a,0 0 16px #a3161f88}
.slot.relic{min-height:96px;flex-direction:column}
.slot-actions{margin:0 0 12px}.meta-dialog h4{font:700 12px Cinzel,var(--thai);letter-spacing:.1em;color:#d9b073;margin:12px 0 6px}
.relic-card{display:flex;gap:12px;align-items:center}.relic-card img{width:64px;height:64px;flex-shrink:0;filter:drop-shadow(0 4px 4px #000)}
.weapon img{display:block;width:34px;height:30px;object-fit:contain;margin:4px auto 0}.weapon .el-badge{bottom:18px;right:3px;font-size:10px}.weapon.empty{opacity:.25}
.world em{display:block;font:600 10px var(--thai);font-style:normal;margin-top:4px;color:#c9b08a}
#weapon-guide article{display:grid;grid-template-columns:30px 1fr;gap:0 8px;align-items:center}#weapon-guide article img{grid-row:1/3;width:28px;height:28px;object-fit:contain}
@keyframes readyPulse{50%{box-shadow:0 0 14px #c9a25f88}}
@media(max-width:800px){.armory{grid-template-columns:1fr}.arm-detail{position:static}.slots{grid-template-columns:repeat(3,1fr)}.arm-grid{max-height:40vh}}
@media(prefers-reduced-motion:reduce){.arm-tile.ready{animation:none}}
.meta-dialog{overflow-x:hidden}
.weapon{position:relative;overflow:hidden}.weapon .ammo{position:absolute;right:3px;top:2px;font:700 9px Cinzel,serif;color:#f0d08a;text-shadow:0 1px 2px #000}
.weapon.low .ammo{color:#ff6a4a}.weapon.reloading .ammo{color:#ffb070;animation:reloadBlink .5s steps(2) infinite}.weapon.reloading img{opacity:.45}
.weapon .reload-bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:linear-gradient(90deg,#a3161f,#f0d08a);font-style:normal}
@keyframes reloadBlink{50%{opacity:.35}}@media(prefers-reduced-motion:reduce){.weapon.reloading .ammo{animation:none}}

/* Hero kit: info on the home screen and the skill button in the HUD. */
.hero-info{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:-14px 0 22px}.hero-info div{border:1px solid #4a3024;background:linear-gradient(130deg,#1c0e11,#0d0708);padding:8px 10px}
.hero-info span{display:block;font:700 10px Cinzel,var(--thai);letter-spacing:.12em;color:#c42a2a}.hero-info b{display:block;font:700 14px var(--thai);color:#f0dcb4}.hero-info small{display:block;font-size:11px;color:#bfa98d;line-height:1.5}
.skill-button{position:relative;pointer-events:auto;width:92px;height:75px;padding:6px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:50% 50% 6px 6px;border:1px solid #6e4c32;background:radial-gradient(ellipse at 50% 30%,#3a1216,#0b0607 80%)}
.skill-button b{position:relative;z-index:1;font:700 11px var(--thai);line-height:1.2;text-align:center}.skill-button small{position:relative;z-index:1;font:700 10px Cinzel,serif;color:#d9b073}
.skill-button i{position:absolute;left:0;right:0;bottom:0;height:0;background:#000a;transition:height .1s}.skill-button kbd{position:absolute;left:6px;top:4px;z-index:1;font-size:9px;padding:1px 3px}
.skill-button.ready{border-color:#f0d08a;box-shadow:0 0 16px #c42a2a99,inset 0 0 12px #ff6a3a55}.skill-button.ready small{color:#ffe08a}.skill-button.active{border-color:#fff;box-shadow:0 0 22px #ffe08a}
@media(max-width:700px){.hero-info{grid-template-columns:1fr}.skill-button{width:72px;height:62px}}
.relic-tile .rarity{font:700 9px var(--thai);display:block}.relic-tile{border-color:color-mix(in srgb,var(--el) 55%,#3e2a20)}
.relic-lines{list-style:none;padding:0;margin:8px 0;display:grid;gap:4px}.relic-lines li{font-size:12px;color:#f0dcb4;padding:4px 8px;border-left:2px solid var(--el);background:#0e080966}
.relic-detail .actions{display:grid;gap:6px}
#result-reward .loot{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:8px}#result-reward .loot b{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border:1px solid;font:700 12px var(--thai);background:#0e0809}#result-reward .loot img{width:22px;height:22px}
.build-tag{font:700 10px Cinzel,monospace;letter-spacing:.12em;color:#9c8a74}#build-tag-pause{text-align:center;margin-top:6px}

/* ══ RETRO FRONT END — NES-style title, menus and select screens ══ */
@font-face{font-family:'Twemoji Country Flags';unicode-range:U+1F1E6-1F1FF,U+1F3F4,U+E0062-E0063,U+E0065,U+E0067,U+E006C,U+E006E,U+E0073-E0074,U+E0077,U+E007F;src:url('https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1/dist/TwemojiCountryFlags.woff2') format('woff2');font-display:swap}
.flag{font-family:'Twemoji Country Flags','Apple Color Emoji','Segoe UI Emoji',sans-serif;font-style:normal}
:root{--px:'Press Start 2P','Noto Sans Thai',monospace;--nes-red:#d82800;--nes-gold:#fcb800;--nes-ink:#0a0306}
#home.retro{display:block;padding:0;overflow:hidden;background:#000 url('/assets/gothicvania/home.png') center bottom/cover no-repeat;image-rendering:pixelated}
#home.retro:before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#000000d0,#00000060 40%,#000000e8);pointer-events:none}
#home .crt{position:absolute;inset:0;z-index:3;pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0 2px,#0006 2px 3px);mix-blend-mode:multiply}
#home .crt:after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 160px 40px #000}
#home .screen{position:absolute;inset:0;z-index:2;display:none;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:28px 18px;overflow:auto}
#home .screen.active{display:flex;animation:screenIn .25s steps(4)}
@keyframes screenIn{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
/* Title */
.title-logo{text-align:center}.title-logo .pre{display:block;font:12px var(--px);letter-spacing:.3em;color:var(--nes-gold);text-shadow:2px 2px 0 #500}
.title-logo .logo{font-size:clamp(64px,13vw,150px)!important;line-height:1;margin:10px 0}.title-logo .sub{display:block;font:14px var(--px);letter-spacing:.35em;color:#e8d8c0;text-shadow:3px 3px 0 #300}
.press-start{margin-top:40px;font:18px var(--px)!important;letter-spacing:.2em;color:#fff!important;background:none!important;border:0!important;box-shadow:none!important;animation:blink 1s steps(2) infinite;text-shadow:3px 3px 0 var(--nes-red)}
.press-start:hover,.press-start:focus{color:var(--nes-gold)!important}
@keyframes blink{50%{opacity:0}}
.title-foot{position:absolute;bottom:14px;font:9px var(--px);color:#9c8a74;letter-spacing:.1em}.title-foot a{color:#c9a25f}
/* Menus */
.menu-head{display:flex;flex-direction:column;align-items:center;gap:8px}.logo.small{font-size:clamp(44px,8vw,80px)!important;padding:0!important}
.menu-account{font:10px var(--px);color:#e8d8c0;display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}.menu-account .coins{color:var(--nes-gold)}.menu-account .place{color:#7fd4ff}.menu-account .guest{color:#9c8a74}
.menu{display:flex;flex-direction:column;gap:6px;min-width:min(380px,90vw)}
#home .menu-item{position:relative;display:block;width:100%;text-align:left;padding:12px 18px 12px 46px;font:13px/1.6 var(--px)!important;letter-spacing:.08em;color:#e8d8c0;background:#000a!important;border:3px solid #3a2a2a!important;border-radius:0;box-shadow:none!important;text-transform:uppercase;transition:none}
#home .menu-item b{font:inherit}
#home .menu-item:hover,#home .menu-item:focus-visible{color:#fff;border-color:var(--nes-gold)!important;background:#2a0006cc!important;outline:none;transform:none}
#home .menu-item:hover:before,#home .menu-item:focus-visible:before{content:'▶';position:absolute;left:14px;color:var(--nes-gold);animation:blink .6s steps(2) infinite}
#home .menu-item.primary{border-color:var(--nes-red)!important;color:#fff}
#home .menu-item.back{width:auto;min-width:200px;align-self:center;color:#c9b08a}
#home .menu-item:disabled{opacity:.35}
.menu-status{font:9px var(--px);color:#9c8a74;text-align:center;max-width:90vw;line-height:1.8}
.screen-title{font:22px var(--px)!important;color:var(--nes-gold)!important;text-shadow:3px 3px 0 #500!important;letter-spacing:.12em;text-align:center;margin:0!important}
#home .panel{width:min(1100px,96vw);padding:16px;background:#060203e8;border:4px solid #3a2a2a;box-shadow:0 0 0 4px #000,inset 0 0 0 2px #120608}
#home .section-label>span{font:10px var(--px);color:var(--nes-gold)}#home .section-label small{font-size:11px}
/* Select */
.select-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:14px;width:min(1100px,96vw)}.select-grid .panel{width:auto!important}
.select-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;width:min(1100px,96vw)}.select-actions .menu-item{width:auto!important;min-width:220px}
.select-actions .join{display:flex;gap:6px;margin:0}.select-actions .join input{width:130px;font:13px var(--px);text-transform:uppercase;background:#000;border:3px solid #3a2a2a;color:#fff;padding:10px}
#home .hero,#home .world,#home .dungeon{border-radius:0;border-width:3px}#home .hero:focus-visible,#home .world:focus-visible,#home .dungeon:focus-visible{outline:3px solid var(--nes-gold);outline-offset:2px}
.toggle{display:flex;align-items:center;gap:8px;font:10px var(--px);color:#e8d8c0;cursor:pointer;padding:8px 12px;border:3px dashed #3a2a2a}.toggle input{width:18px;height:18px;accent-color:var(--nes-red)}
/* Multiplayer list */
.servers{display:flex;flex-direction:column;gap:10px}.servers-head{display:flex;justify-content:space-between;align-items:center}.servers-head b{font:12px var(--px);color:var(--nes-gold)}.servers-head .menu-item{width:auto!important;padding:8px 14px 8px 36px!important;font-size:10px!important}
.server-list{display:grid;gap:6px;max-height:52vh;overflow:auto}.server-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 12px;border:3px solid #2a1a1a;background:#0e0608}
.server-row b{font:700 14px var(--thai);color:#f0dcb4}.server-row small{display:block;font-size:11px;color:#bfa98d;margin-top:2px}.server-row.playing{border-left-color:var(--nes-red)}.server-row.lobby{border-left-color:#5fc85a}
.server-row button{font:11px var(--px);padding:10px 14px;border-radius:0}.seats{display:flex;gap:3px;align-items:center;font:9px var(--px);color:#9c8a74;margin-top:4px}.seats i{font-style:normal;color:var(--accent,#5b3f31)}.seats i.free{color:#3a2a2a}
.servers-empty{font:10px/1.8 var(--px);color:#9c8a74;text-align:center;padding:18px}
/* Ranking */
.ranking-me{font:11px var(--px);color:#7fd4ff;margin-bottom:10px;text-align:center}.ranking-list{max-height:58vh;overflow:auto}
.ranking-list table{width:100%;border-collapse:collapse;font-size:13px}.ranking-list th{font:9px var(--px);color:var(--nes-gold);text-align:left;padding:8px;border-bottom:3px solid #3a2a2a;position:sticky;top:0;background:#060203}
.ranking-list td{padding:7px 8px;border-bottom:1px solid #1e1012;color:#e8d8c0}.ranking-list tr.top td:first-child{color:var(--nes-gold);font:12px var(--px)}.ranking-list tr.me td{background:#2a0006}
/* Tiers */
.tier{display:inline-block;font:8px/1 var(--px);padding:4px 6px;color:#000;background:var(--tier);border:2px solid #000;box-shadow:2px 2px 0 #000;vertical-align:middle;white-space:nowrap}
.rank{margin:6px 0 10px}.rank small{font:9px var(--px);color:#9c8a74}.rank .meta-progress{height:6px;margin:6px 0}
/* Settings */
.settings{display:flex;flex-direction:column;gap:8px;max-width:620px}.settings .controls{border-top:3px solid #2a1a1a;margin-top:6px;padding-top:10px}
/* Account */
#home .account-box{max-width:620px;margin:0}#home .account-box input{font:14px var(--thai);background:#000;border:3px solid #3a2a2a;border-radius:0}.login-required{font-size:12px;color:#e8c48a;margin-bottom:8px}
#home .auth-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px}#home .auth-actions .menu-item{font-size:10px!important;padding:10px 10px 10px 34px}
/* Game-side touches */
#lobby .dialog,.meta-dialog,#result .dialog,#pause .dialog{border-radius:0}
.privacy{font:10px var(--px);border-radius:0}.privacy.active{border-color:#5fc85a;color:#bff0b0}
#lobby h2,#result h2,#pause h2,.meta-dialog h2{font-family:var(--px)!important;font-size:18px!important;letter-spacing:.06em;line-height:1.6}
.exp{color:#7fd4ff}.rankup{display:block;margin-top:6px}
@media(max-width:800px){.select-grid{grid-template-columns:1fr}#home .menu-item{font-size:11px!important}.title-foot{font-size:7px}}
@media(prefers-reduced-motion:reduce){.press-start,#home .menu-item:before{animation:none}#home .screen.active{animation:none}}
#home .screen{overflow-x:hidden}
/* Film grain is a full-screen blend; keep it for menus only. */
body.playing:after{display:none}
#arcade-callout{border-color:var(--callout,#f2c373)}
#room-mode{font:10px var(--px);background:#000;color:#e8d8c0;border:2px solid #3a2a2a;padding:6px}

/* Chat and announcements */
.chat-box{position:absolute;left:16px;bottom:118px;width:min(360px,60vw);pointer-events:auto;opacity:.35;transition:opacity .3s}.chat-box.recent,.chat-box:hover,.chat-box:focus-within{opacity:1}
.chat-tabs{display:flex;gap:4px;align-items:center}.chat-tabs button{font:8px var(--px,monospace);padding:4px 6px;border-radius:0;background:#000a}.chat-tabs button.active{border-color:#fcb800;color:#fcb800}.chat-tabs small{font:8px var(--px,monospace);color:#9c8a74;margin-left:6px}
.chat-log{font-size:13px;line-height:1.45;max-height:160px;overflow:auto;padding:6px 8px;background:#000a;text-shadow:0 1px 2px #000}.chat-log p{margin:0 0 2px;word-break:break-word}.chat-log p.sys{color:#fcb800}.chat-log .muted{color:#9c8a74}
#chat-input{width:100%;margin-top:4px;font-size:13px;background:#000d;border:2px solid #fcb800;border-radius:0}
.chat-panel{display:flex;flex-direction:column;gap:8px}.chat-panel>b{font:12px var(--px,monospace);color:#fcb800}.chat-panel .chat-log{max-height:24vh;min-height:90px}
.lobby-chat{margin:10px 0}.lobby-chat .chat-log{max-height:140px}
#announce{position:fixed;z-index:40;top:10px;left:50%;transform:translateX(-50%);max-width:min(720px,94vw);padding:10px 40px 10px 14px;background:#120709f0;border:3px solid #fcb800;font-size:14px;color:#f0dcb4;box-shadow:0 0 0 3px #000,0 8px 30px #000}
#announce.warn{border-color:#d82800;background:#2a0006f0}#announce button{position:absolute;right:6px;top:6px;padding:2px 8px;font-size:12px;border-radius:0}
@media(max-width:700px){.chat-box{bottom:150px;width:70vw}}
.card.picked{border-color:#fcb800!important;box-shadow:0 0 0 3px #fcb800,0 0 24px #fcb800!important;animation:pickFlash .18s steps(2) 6}.card.passed{opacity:.3}
@keyframes pickFlash{50%{background:#5a3a00;filter:brightness(1.8)}}
.skill-button b{font-size:10px;line-height:1.15;max-width:84px;overflow-wrap:anywhere;text-align:center}
.last-run{display:flex;flex-direction:column;gap:4px;padding:10px 12px;margin:8px 0;border:3px solid #3a2a2a;background:#0e0608}.last-run b{font:11px var(--px,monospace)}.last-run b.win{color:#fcb800}.last-run b.lose{color:#d82800}.last-run small{color:#bfa98d}.last-run span{font-size:13px}.last-run em{font-style:normal;color:#9c8a74;font-size:11px}
.card{position:relative}.card-key{position:absolute;right:8px;top:8px;font:12px var(--px,monospace)!important;padding:4px 7px;background:#fcb800;color:#000;border:2px solid #000;box-shadow:2px 2px 0 #000}.card.chosen{border-color:#fcb800!important;filter:brightness(1.4)}
/* ── Responsive HUD: one source of truth for vitals, skill, relics, chat and the curse picker ── */
#hud{--hb-bottom:26px;--hb-h:78px}
#hud .hud-bottom{display:grid;grid-template-columns:auto minmax(200px,280px) auto;justify-content:center;align-items:end;gap:12px;left:16px;right:16px;bottom:var(--hb-bottom);flex-wrap:nowrap}
#hud .player-vitals{width:auto;min-width:0;padding:8px 12px}
#hud .player-vitals span{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hud .health{margin:6px 0}
#hud .weapons{width:auto;display:flex;gap:6px;justify-content:center;flex-wrap:nowrap}
#hud .weapon span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hud .kills{display:none}
#hud .chat-box{left:16px;bottom:calc(var(--hb-bottom) + var(--hb-h) + 14px);width:min(340px,30vw)}
#hud .chat-log{max-height:150px}
.upgrade-panel{max-height:calc(100dvh - 150px);overflow:auto}
.upgrade-panel .card .card-key{top:50%;transform:translateY(-50%)}
.upgrade-panel .card{padding-right:44px!important}
/* Tablet: skill and health on one row, the six relic slots on the row beneath. */
@media(max-width:1000px){
 #hud{--hb-h:150px}
 #hud .hud-bottom{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:8px;left:12px;right:12px}
 #hud .player-vitals{flex:0 1 320px}#hud .weapons{flex:0 0 100%}
 #hud .chat-box{width:min(320px,45vw)}#hud .chat-log{max-height:96px}
}
/* Phone: everything compact and full-width; the curse picker stretches edge to edge. */
@media(max-width:700px){
 #hud{--hb-bottom:20px;--hb-h:122px}
 #hud .hud-bottom{display:grid;grid-template-columns:58px 1fr;left:8px;right:8px;gap:6px}
 #hud .weapons{grid-column:1/-1}
 #hud .skill-button{width:58px;height:54px;padding:4px}
 #hud .skill-button b{font-size:8px;max-width:52px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal;letter-spacing:0}#hud .skill-button small{font-size:8px}#hud .skill-button kbd{display:none}
 #hud .player-vitals{padding:6px 9px;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
 #hud .player-vitals span{font-size:10px;letter-spacing:.03em}
 #hud .health{height:10px;margin:4px 0}
 #hud .weapons{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
 #hud .weapon{width:auto;height:56px;padding:6px 2px 3px}
 #hud .weapon img{width:26px;height:22px;margin-top:2px}#hud .weapon span{font-size:8px}#hud .weapon kbd{font-size:8px}
 #hud .chat-box{left:8px;width:calc(100vw - 16px);max-width:360px}
 #hud .chat-log{max-height:58px;font-size:11px;padding:4px 6px}#hud .chat-tabs small{display:none}
 #team{top:112px;width:112px}#team .mate{padding:5px 7px;font-size:10px}
 .upgrade-panel{left:8px;right:8px;top:112px;width:auto;max-height:calc(100dvh - 112px - 160px)}
 .upgrade-panel .dialog{padding:10px 10px 12px}.upgrade-panel h2{font-size:17px}
 .upgrade-panel .card{grid-template-columns:30px 1fr;padding:6px 40px 6px 8px!important}
 .upgrade-panel .card strong{width:28px;height:28px;font-size:16px}
 .upgrade-panel .card p{display:block;font-size:10px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .upgrade-panel .card .card-key{font-size:14px!important;padding:6px 9px}
}
/* Short landscape screens (phones on their side): squeeze vertical space hardest. */
@media(max-height:520px){
 #hud{--hb-bottom:16px;--hb-h:58px}
 #hud .hud-bottom{display:grid;grid-template-columns:auto minmax(150px,220px) auto;align-items:center;flex-wrap:nowrap}
 #hud .player-vitals{flex:none}#hud .weapons{grid-column:auto;flex:none}
 #hud .skill-button{width:58px;height:52px}#hud .skill-button kbd{display:none}
 #hud .weapons{display:flex}#hud .weapon{width:46px;height:52px;padding:5px 2px 2px}#hud .weapon img{width:24px;height:20px}#hud .weapon span{font-size:8px}
 #hud .chat-box{width:min(280px,34vw)}#hud .chat-log{max-height:44px;font-size:11px}#hud .chat-tabs small{display:none}
 #hud .player-vitals{padding:4px 8px}#hud .player-vitals span{font-size:9px}#hud .health{height:9px;margin:3px 0}
 .upgrade-panel{top:56px;right:8px;left:auto;width:min(380px,48vw);max-height:calc(100dvh - 56px - 84px)}
 .upgrade-panel .dialog{padding:8px 10px}.upgrade-panel .card{padding:4px 40px 4px 8px!important}
 .upgrade-panel h2,.upgrade-panel .eyebrow{display:none}.upgrade-panel .card p{display:none}
}

/* Lobby ready check */
.ready-tag{font:8px var(--px,monospace);padding:2px 5px;border:2px solid #000;background:#5a2a2a;color:#f0dcb4}.ready-tag.on{background:#5fc85a;color:#000}
#ready.active{background:#2c5a22;border-color:#5fc85a;color:#d8ffd0}

/* Equipped relics inside the vitals panel */
.hud-relics{display:flex;gap:6px;margin-top:5px;flex-wrap:wrap}.hud-relics .muted{font-size:10px;color:#9c8a74}
.hud-relic{display:flex;align-items:center;gap:4px;max-width:50%;padding:2px 6px 2px 2px;background:#0008;border:1px solid var(--el);box-shadow:0 0 6px color-mix(in srgb,var(--el) 45%,transparent)}
.hud-relic img{width:22px;height:22px;flex:none}.hud-relic em{font:normal 10px var(--thai,sans-serif);color:var(--el);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hud .player-vitals .hud-relic em{font-family:var(--thai,sans-serif);letter-spacing:0}
@media(max-width:700px){.hud-relics{margin-top:3px;gap:4px}.hud-relic{padding:1px}.hud-relic em{display:none}.hud-relic img{width:18px;height:18px}}
@media(max-height:520px){.hud-relic em{display:none}.hud-relic img{width:16px;height:16px}.hud-relics{margin-top:2px}}

/* Gift offer */
.gift-panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:9;width:min(460px,calc(100vw - 16px));max-height:calc(100dvh - 24px);overflow:auto}
.gift-panel .dialog{padding:16px;border:3px solid #fcb800;box-shadow:0 0 0 3px #000,0 0 40px #fcb80066}
.gift-head{display:flex;gap:12px;align-items:center;margin:6px 0}.gift-head img{width:72px;height:72px;flex:none}.gift-head h2{margin:0;font-size:20px}.gift-head p{margin:2px 0 0;font-size:12px;color:#d9c4a0}
.gift-warn{font-size:12px;color:#ff9a7a;margin:6px 0 10px}
#gift-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px}
.gift-slot{display:grid;grid-template-columns:auto 28px 1fr;grid-template-rows:auto auto;align-items:center;gap:0 6px;padding:6px 8px;text-align:left;border-radius:0}
.gift-slot kbd{grid-row:1/3;font:11px var(--px,monospace);background:#fcb800;color:#000;padding:3px 6px;border:2px solid #000}.gift-slot img{grid-row:1/3;width:28px;height:28px}
.gift-slot span{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gift-slot small{font-size:10px;color:#ff9a7a}
.gift-slot:hover{border-color:#fcb800;background:#3a1a10}
.gift-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px}.gift-foot small{color:#9c8a74;font-size:11px}
.weapon.gift{border-color:#fcb800!important;box-shadow:0 0 12px #fcb80088,inset 0 0 10px #fcb80044!important}
.gift-tag{position:absolute;right:2px;top:2px;font:normal 7px var(--px,monospace);background:#fcb800;color:#000;padding:1px 3px;z-index:2}
@media(max-width:700px){.gift-head img{width:52px;height:52px}.gift-head h2{font-size:16px}#gift-slots{grid-template-columns:repeat(2,1fr)}}

/* Online counter: top-right on menus, compact under the HUD buttons in a run */
.online-badge{position:fixed;z-index:30;right:12px;top:10px;display:flex;align-items:center;gap:8px;padding:6px 10px;background:#000c;border:2px solid #3a2a2a;font:9px var(--px,monospace);color:#f0dcb4;pointer-events:none}
.online-badge i{width:8px;height:8px;background:#5fc85a;box-shadow:0 0 8px #5fc85a;animation:onlineBlink 1.6s steps(2) infinite}.online-badge b{color:#5fc85a;font-weight:normal}.online-badge small{color:#9c8a74;font-size:8px}
@keyframes onlineBlink{50%{opacity:.35}}
body.playing .online-badge{top:auto;bottom:48px;right:8px;opacity:.75;padding:4px 7px}body.playing .online-badge small{display:none}
@media(max-width:700px){.online-badge{top:8px;right:8px}.online-badge small{display:none}body.playing .online-badge{bottom:auto;top:96px;right:6px}}
@media(prefers-reduced-motion:reduce){.online-badge i{animation:none}}

/* Discord link in the main menu */
#home a.menu-item.discord-link{display:block;text-decoration:none;color:#8ea1ff}#home a.menu-item.discord-link:hover,#home a.menu-item.discord-link:focus{color:#c3ccff}

/* Gift dialog v2: step 1 the gift, step 2 the weapon you give up */
.gift-panel{width:min(560px,calc(100vw - 16px))}
.gift-top h2{margin:2px 0 8px;font-size:22px}
.gift-step{display:flex;align-items:center;gap:8px;margin:10px 0 6px;font:9px var(--px,monospace);color:#fcb800;letter-spacing:.06em}.gift-step b{display:grid;place-items:center;width:20px;height:20px;background:#fcb800;color:#000;border:2px solid #000;font-weight:normal}
.gift-card{display:flex;gap:12px;align-items:center;padding:10px;border:2px solid var(--el);background:linear-gradient(110deg,color-mix(in srgb,var(--el) 22%,#0c0709),#0c0709 70%);box-shadow:0 0 20px color-mix(in srgb,var(--el) 40%,transparent)}
.gift-card img{width:84px;height:84px;flex:none}.gift-card h3{margin:0;font-size:20px}.gift-card p{margin:3px 0;font-size:12px;color:#d9c4a0}
.gift-tags em{display:inline-block;margin-right:4px;padding:1px 6px;font:normal 10px var(--thai,sans-serif);background:#fcb800;color:#000}
.gift-stats{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}.gift-stats span{display:flex;flex-direction:column;min-width:58px;padding:3px 6px;background:#0009;border:1px solid #3a2a2a}.gift-stats small{font-size:9px;color:#9c8a74}.gift-stats b{font-size:14px;color:#f0dcb4}
.gift-warn{margin:0 0 6px}
#gift-slots{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.gift-slot{grid-template-columns:auto 32px 1fr;grid-template-rows:auto auto auto;border:1px solid #5b3f31}.gift-slot img{grid-row:1/4;width:32px;height:32px}.gift-slot kbd{grid-row:1/4}
.gift-slot .gs-name{font-size:12px;font-weight:700}.gift-slot .gs-dps{font-size:10px;color:#9c8a74}.gift-slot .gs-act{font-size:10px;color:#ff9a7a;opacity:.6}
.gift-slot:hover,.gift-slot:focus{border-color:#d82800;background:#2a0a0a}.gift-slot:hover .gs-act,.gift-slot:focus .gs-act{opacity:1}.gift-slot:hover img,.gift-slot:focus img{filter:grayscale(1) brightness(.6)}
.gift-clock{display:flex;flex-direction:column;align-items:flex-end;gap:3px;min-width:140px}.gift-clock i{display:block;height:4px;background:#fcb800;align-self:stretch;transition:width .2s linear}
@media(max-width:700px){.gift-card img{width:56px;height:56px}.gift-card h3{font-size:16px}.gift-top h2{font-size:17px}#gift-slots{grid-template-columns:repeat(2,1fr)}.gift-stats span{min-width:50px}}
@media(max-height:520px){.gift-top h2,.gift-warn{display:none}.gift-card img{width:48px;height:48px}.gift-card p:not(.gift-tags){display:none}}
.gift-panel{overflow-x:hidden;z-index:35}.gift-panel .dialog{max-width:100%;box-sizing:border-box}
/* Lobby code bar and title footer wrap instead of overflowing on narrow screens */
.codebar{flex-wrap:wrap;row-gap:8px}.codebar .privacy{flex:1 1 140px;min-width:0}
.title-foot{width:max-content;text-align:center;max-width:calc(100vw - 24px);left:50%!important;transform:translateX(-50%)}