/* Pixel beta: high-contrast violet stone, carved frames, sprite portraits. */
:root{--gold:#f0d29d;--muted:#b2aac7;--ink:#171528;--line:#534866;--heal:#92e7c2;--danger:#ef889a;color-scheme:dark}
html,body{background:#0e0d19;font-family:'Malgun Gothic','Apple SD Gothic Neo',system-ui,sans-serif;color:#eee8f6}#game{background:#221e36;touch-action:manipulation;border-left:2px solid #44364f;border-right:2px solid #44364f;box-shadow:0 0 100px #0009}#world{image-rendering:pixelated;touch-action:none}button{border:2px solid #766384;background:linear-gradient(#3f3553,#292339);border-radius:3px;box-shadow:inset 0 2px #ffffff0c,inset 0 -3px #100f2344;color:#f2e8f7;font-weight:700;transition:filter .1s}button:active{box-shadow:inset 0 3px #100d2244;transform:translateY(1px)}button:disabled{opacity:.42}.primary{background:linear-gradient(#efcd94,#d5a96f);border-color:#ffe0ab;box-shadow:inset 0 2px #fff2cf88,inset 0 -4px #8f603744;color:#322437}.quiet{background:#211d32aa;border-color:#4c405f;color:#c0b3d1}.danger{border-color:#a75b78;color:#ffb1bb}.title,.townName,.sectionhead h2,.loot h3{font-family:inherit;font-weight:900;letter-spacing:-1.4px}.title{font-size:37px;text-shadow:3px 3px #161322;line-height:1.35}.eyebrow{font-size:10px;letter-spacing:2.5px;color:#e2b9ec;font-weight:900}.subtitle{color:#c7bed5;font-size:12px;line-height:1.9}.titlebox{margin-top:7vh}.titlebox .title{font-size:42px;letter-spacing:-2px}.titlebox .subtitle{color:#d3c5df;text-shadow:0 2px #161122}.titlebox .divider{margin:22px 0}#screen{padding:calc(22px + env(safe-area-inset-top)) 22px calc(26px + env(safe-area-inset-bottom));background:linear-gradient(#1a172beb,#1b1834e8);scrollbar-color:#746184 #221c31;scrollbar-width:thin}#screen:has(.titlebox){background:linear-gradient(#1713298c,#171329d9 65%,#171329f5),url('assets/village-v5.webp') center center/cover;image-rendering:pixelated}#screen:has(.townName){background:linear-gradient(#1c182df5,#231d37f5)}.divider{background:linear-gradient(90deg,transparent,#b88fbc,transparent)}.titleParty{display:flex;align-items:flex-end;justify-content:center;height:135px;gap:0;margin:10px 0 6px}.portrait{display:inline-block;flex:none;width:78px;height:78px;background-image:url('assets/heroes-v5.webp');background-size:400% 400%;background-repeat:no-repeat;image-rendering:pixelated;vertical-align:middle}.portrait.tank{background-position:0 0}.portrait.dps{background-position:0 33.333%}.portrait.heal{background-position:0 66.666%}.titleParty .portrait{width:116px;height:116px;filter:drop-shadow(0 5px 0 #110d1d88)}.titleParty .dps{width:132px;height:132px;margin:0 -20px;z-index:1}.roles button{position:relative;min-height:113px;padding:16px 14px 16px 102px;background:linear-gradient(120deg,#3c3154,#242137);border-color:#68537d}.roles .portrait{position:absolute;left:8px;top:12px;width:84px;height:84px}.roles b{font-size:16px;color:#f1d5ac}.roles small{font-size:11px;line-height:1.8;color:#c7bcd7}.sectionhead{gap:7px;margin-bottom:18px}.sectionhead h2{font-size:22px}.sectionhead .back{font-size:20px;line-height:20px;padding:4px 11px}.balance{font-size:12px;white-space:nowrap;color:#eacb9c}.card{border:2px solid #594b6e;border-radius:3px;padding:15px;background:linear-gradient(120deg,#332a47,#242137);box-shadow:inset 0 2px #ffffff05;margin-bottom:12px}.card.selected{border-color:#e4ba87;box-shadow:inset 0 0 0 2px #efc79222}.card h3{color:#ead1a6;font-size:14px}.card p{color:#c5bad4;font-size:12px}.card small{color:#a89bbd}.card button{border-width:1px;border-radius:2px}.dialogue{background:#34283f;border:2px solid #655071;border-left:4px solid #d8b78a;border-radius:2px;color:#e3d0bd;font-family:inherit;line-height:1.9;font-size:12px}.smallPortrait{width:48px;height:48px;margin:-8px 4px -4px -6px}.townName{font-size:29px;margin:4px 0 14px}.townArt{height:185px;margin:8px -22px 17px;background:url('assets/village-v5.webp') center 24%/100% auto;image-rendering:pixelated;border-top:2px solid #5b4c78;border-bottom:3px solid #8c6f97;box-shadow:inset 0 -50px 40px #15112580}.townArt:before,.townArt:after{display:none}.townArt>span{top:11px;left:20px;font-size:9px;letter-spacing:2px;text-shadow:0 2px #18142a;color:#e9cef2}.campParty{display:flex;align-items:flex-end;justify-content:center;position:absolute;bottom:8px;left:0;right:0;gap:0}.campParty .portrait{width:90px;height:90px;margin:0 -6px;filter:drop-shadow(0 5px 0 #120e2777)}.townnav{gap:9px}.townnav button{background:linear-gradient(#382e4d,#292238);padding:14px 11px;border-color:#665275}.townnav b{font-size:13px;color:#ecd2af}.townnav small{font-size:10px;color:#b9a9cc}.badge{font-size:10px;color:#efd3a8}.notice{color:#aea0bf;font-size:11px;line-height:1.9}.help,.version,.homeLink{color:#b7a6cb}.skillgrid{gap:8px}.skillgrid .card{padding:11px}.skillgrid h3{font-size:12px;display:flex;align-items:center;gap:5px}.skillgrid p{font-size:10px;min-height:52px}.skillgrid button{font-size:10px;padding:8px 5px}.miniIcon{display:inline-flex;width:25px;height:25px;flex:none}.miniIcon svg{width:100%;height:100%;image-rendering:pixelated}.equips div{background:#302742;border:2px solid #5c4b6e;border-radius:2px}.tabs button{background:#292237;border-radius:2px}.tabs .active{border-color:#dfb989;color:#f0d4a3}.record{border-color:#51415f;color:#ddcee9}.resultstats div{border:2px solid #645171;border-radius:3px;background:#312740;color:#bbaacc}.resultstats b{color:#f4d49d}.endEmblem{color:#e7c494;text-shadow:3px 4px #160f25}.loot{border-color:#c19a74}
#hud{padding:calc(12px + env(safe-area-inset-top)) 14px 10px;background:linear-gradient(#161329f5,#19152ce8 75%,transparent);text-shadow:0 2px #120d22}.topline{letter-spacing:1px;font-size:11px;color:#f3d6a6}.hudButtons{display:flex;gap:6px;pointer-events:auto}.hudButtons button{font-size:14px;padding:4px 10px;min-width:32px;border:1px solid #847097;background:#302744;border-radius:2px}#soundBtn{color:#c9b7e1}.heroRow{margin-top:8px;font-size:11px}.health{height:17px;border:2px solid #736186;border-radius:2px;background:#201a30;box-shadow:0 2px #110e1e}.health i{background:linear-gradient(#a9edb3,#73b78d)}.health span{font-size:9px;line-height:13px;font-weight:700}.boss i{background:linear-gradient(#ef8b99,#b94e76)}#bossHud{color:#f7c0bf;font-size:10px;background:#221529a6;padding:4px 8px;border:1px solid #96536c;margin:8px 12px}.boss{height:8px;border-width:1px}#partyHud{margin-top:7px;gap:5px}#partyHud span{font-size:9px;border:1px solid #665579;border-radius:2px;background:#302641cc;padding:3px 6px;color:#d4c6e3}#objective{font-size:10px;margin-top:6px;color:#d3bdda}
#controls{height:184px;bottom:env(safe-area-inset-bottom);background:linear-gradient(transparent,#17112bd9 35%,#151024f5);border-top:0;transform:none!important;width:auto!important;left:0!important;touch-action:none}#joystick{width:112px;height:112px;left:22px;bottom:25px;border:2px solid #8f7ba578;background:#2c254c8c;box-shadow:inset 0 0 0 8px #17142744,0 3px #0e0b1d66}#joystick:before,#joystick:after{content:'';position:absolute;background:#a795bf23;pointer-events:none}#joystick:before{left:20px;right:20px;height:1px;top:53px}#joystick:after{top:20px;bottom:20px;width:1px;left:53px}#stick{width:42px;height:42px;left:33px;top:33px;background:linear-gradient(#ac9bc8,#70638f);border:2px solid #c7b7e3;box-shadow:inset 0 -5px #44345e66,0 4px #130e2755;z-index:1}#joystick small{color:#b8a6cb;bottom:-19px;font-size:9px}#skillButtons{right:16px;bottom:20px;grid-template-columns:repeat(2,66px);gap:8px}.skillBtn{width:66px;height:66px;border-radius:5px;border:2px solid #b3a0cd;background:linear-gradient(#483b62,#2d2543);box-shadow:inset 0 2px #b5a2cc33,inset 0 -4px #100d2244;overflow:visible;padding:3px 2px;user-select:none;-webkit-user-select:none}.skillBtn small{font-size:8px;font-weight:700;color:#e8dcf5;position:absolute;bottom:4px;left:0;right:0;text-shadow:0 1px #100b20}.skillIcon{position:absolute;left:15px;top:7px;width:32px;height:32px;filter:drop-shadow(0 2px #171027)}.skillIcon svg{width:100%;height:100%}.skillBtn kbd{position:absolute;top:2px;right:4px;font:8px system-ui;color:#c1afd5}.skillBtn .cooldown{border-radius:3px;inset:0;background:#171127d9;font-size:21px;color:#f2dcbb;text-shadow:0 2px #000;pointer-events:none}.skillBtn.bossSkill{border-color:#ca92a5;background:linear-gradient(#693a58,#392038)}.skillBtn.locked{opacity:.35}.skillBtn.aiming{border-color:#baffef;box-shadow:0 0 0 3px #abf2d955;background:#435e60}.skillBtn.fired{animation:skillFire .18s ease-out}@keyframes skillFire{0%{filter:brightness(2);transform:scale(.94)}100%{filter:brightness(1);transform:scale(1)}}#dodgeBtn{left:147px;bottom:29px;width:48px;height:48px;padding:0;border-radius:5px;border:2px solid #8badcb;background:linear-gradient(#34536b,#21394c);box-shadow:inset 0 -4px #0e223977;color:#d5edff;font-size:23px}#dodgeBtn strong{font-size:21px;line-height:24px}#dodgeBtn small{font-size:8px;line-height:11px}#toast{bottom:200px;border:2px solid #b494c3;background:#241a39f0;border-radius:3px;padding:9px 13px;font-size:11px;color:#f2dfbf;box-shadow:0 3px #120a2266}#landscape{background:#1c152bf7}
@media(max-width:370px){#skillButtons{grid-template-columns:repeat(2,60px);right:12px;gap:7px}.skillBtn{width:60px;height:62px}.skillIcon{left:12px}#joystick{left:16px;width:102px;height:102px}#stick{left:28px;top:28px}#dodgeBtn{left:127px;width:43px;height:43px}.roles button{padding-left:94px}.roles .portrait{width:78px;height:78px}.titleParty .portrait{width:103px;height:103px}}
@media(max-height:720px){.titlebox{margin-top:1vh}.titleParty{height:100px;margin:0}.titleParty .portrait{width:94px;height:94px}.titleParty .dps{width:108px;height:108px}.titlebox .title{font-size:34px}.titlebox .divider{margin:16px 0}.townArt{height:140px}.campParty .portrait{width:77px;height:77px}#controls{height:162px}#joystick{bottom:23px}#skillButtons{bottom:16px;grid-template-columns:repeat(2,60px);gap:7px}.skillBtn{width:60px;height:60px}.skillIcon{left:12px;top:5px}#dodgeBtn{bottom:26px}#screen{padding-top:17px}.townnav button{padding:11px}.title{font-size:30px}.roles button{min-height:102px}.version{margin-top:16px}.titlebox .help{margin-top:12px}#toast{bottom:180px}}