:root{--gold:#f4c76b;--violet:#8b6cff;--cyan:#6fd6ff;--ink:#0a0718;--panel:rgba(16,11,36,.82);--line:rgba(244,199,107,.35);--text:#ece8fa;--mute:#a59fc4}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--ink);color:var(--text);font-family:Nunito,system-ui,sans-serif;user-select:none;-webkit-user-select:none;touch-action:none;overscroll-behavior:none}
canvas#cv{position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
h1,h2,h3{font-family:Cinzel,Georgia,serif;letter-spacing:.06em}

/* Telas */
.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,3vh,28px);padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));z-index:30;overflow:auto}
.screen.dim{background:rgba(5,3,14,.7);backdrop-filter:blur(5px)}
.title{text-align:center}
.title h1{font-size:clamp(64px,17vh,150px);font-weight:900;line-height:.95;letter-spacing:.2em;padding-left:.2em;background:linear-gradient(180deg,#fff6d8 10%,var(--gold) 45%,#a8691c 95%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 28px rgba(244,199,107,.45))}
.title p{font-family:Cinzel,serif;font-size:clamp(13px,2.6vh,22px);letter-spacing:.42em;color:#d9cffa;text-transform:uppercase;margin-top:.4em;text-shadow:0 0 18px rgba(139,108,255,.9)}
.menu{display:flex;flex-direction:column;gap:clamp(6px,1.4vh,12px);width:min(320px,80vw)}
.foot{color:var(--mute);font-size:12px;text-align:center;max-width:90vw}
.btn{position:relative;padding:clamp(8px,1.7vh,13px) 22px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,rgba(40,28,84,.85),rgba(18,12,42,.9));font-weight:700;font-size:clamp(14px,2.2vh,17px);letter-spacing:.05em;color:var(--text);transition:transform .12s,box-shadow .2s,border-color .2s;box-shadow:0 4px 18px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08)}
.btn:hover,.btn:focus-visible{border-color:var(--gold);box-shadow:0 0 22px rgba(244,199,107,.35),inset 0 1px 0 rgba(255,255,255,.12);transform:translateY(-1px);outline:0}
.btn:active{transform:translateY(1px) scale(.98)}
.btn.gold{background:linear-gradient(180deg,#f8d98f,#c98f2c);color:#2a1a05;border-color:#ffe9b3}
.btn.ghost{background:none;border-color:rgba(255,255,255,.18);box-shadow:none;color:var(--mute)}
.btn.danger{border-color:rgba(255,93,108,.5);color:#ffb3bb}
.btn.sm{padding:8px 14px;font-size:14px}
.btn.sel{border-color:var(--gold);box-shadow:0 0 18px rgba(244,199,107,.4);color:var(--gold)}
.panel{width:min(440px,94vw);max-height:96vh;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:clamp(16px,3.5vh,28px);border:1px solid var(--line);border-radius:18px;background:var(--panel);backdrop-filter:blur(10px);box-shadow:0 20px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.07);text-align:center}
.panel.wide{width:min(860px,96vw)}
.panel h2{color:var(--gold);font-size:clamp(18px,3.6vh,26px)}
.sub{color:var(--mute);font-size:13px}
.status{color:var(--cyan);font-size:14px;font-weight:700}
.err{color:#ff8f9c;font-size:13px;min-height:1em}
.or{color:var(--mute);font-size:12px;margin:2px 0}
.row{display:flex;gap:8px;justify-content:center}
.row .btn{flex:1}
input#coCode{flex:1.2;min-width:0;text-align:center;font:800 22px Nunito,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);background:rgba(0,0,0,.4);border:1px solid var(--line);border-radius:10px;padding:8px;outline:0;user-select:text;-webkit-user-select:text}
.code{font:900 clamp(34px,8vh,54px) Cinzel,serif;letter-spacing:.3em;padding-left:.3em;color:var(--gold);text-shadow:0 0 24px rgba(244,199,107,.6);user-select:text;-webkit-user-select:text}
.opt{display:flex;align-items:center;justify-content:space-between;gap:14px;font-weight:700;text-align:left;font-size:15px}
.opt input[type=range]{width:46%;accent-color:var(--gold)}
.opt input[type=checkbox]{width:22px;height:22px;accent-color:var(--gold)}
.opt select{background:#1a1238;color:var(--text);border:1px solid var(--line);border-radius:8px;padding:6px;font:inherit}
#charCards{display:flex;gap:14px;justify-content:center}
.card{flex:1;max-width:360px;padding:12px;border:1px solid rgba(255,255,255,.15);border-radius:14px;background:rgba(0,0,0,.3);cursor:pointer;transition:.2s;text-align:left;display:flex;gap:10px;align-items:center}
.card:hover{border-color:var(--c);box-shadow:0 0 30px color-mix(in srgb,var(--c) 40%,transparent);transform:translateY(-3px)}
.card canvas{width:96px;height:96px;flex:none;background:rgba(0,0,0,.3);border-radius:10px}
.card h3{color:var(--c);font-size:20px}
.card em{font-style:normal;color:var(--mute);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.card p{font-size:13px;margin-top:4px;color:#d6d0ee}
.card ul{list-style:none;font-size:12px;color:var(--mute);margin-top:4px}
.help{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;text-align:left;font-size:13.5px;line-height:1.55}
.help h3{color:var(--cyan);font-size:15px;margin-bottom:4px}
.help p{margin-bottom:5px;color:#d6d0ee}
kbd{display:inline-block;min-width:22px;text-align:center;padding:1px 6px;margin:0 2px;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;background:rgba(0,0,0,.4);font:700 12px Nunito,sans-serif;color:var(--gold)}
.end h1{font-size:64px;color:var(--gold);letter-spacing:.2em}

/* HUD */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10}
#hud button,#actions{pointer-events:auto}
#vig{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%)}
#hurt{position:absolute;inset:0;box-shadow:inset 0 0 120px 30px rgba(255,40,60,.55);opacity:0;transition:opacity .35s}
#hurt.on{opacity:1;transition:none}
#party{position:absolute;left:max(10px,env(safe-area-inset-left));top:max(8px,env(safe-area-inset-top));display:flex;flex-direction:column;gap:6px}
.pc{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;border-radius:26px 12px 12px 26px;background:rgba(10,7,24,.7);border:1px solid rgba(255,255,255,.1);min-width:178px;opacity:.82;transform-origin:left;transition:.2s}
.pc.me{opacity:1;border-color:var(--c);box-shadow:0 0 16px color-mix(in srgb,var(--c) 30%,transparent)}
.pc.down{filter:grayscale(1);opacity:.7}
.pc .av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:900 16px Cinzel,serif;color:#120a24;background:radial-gradient(circle at 35% 30%,#fff,var(--c) 60%)}
.pc .inf{flex:1}
.pc b{font-size:12px;letter-spacing:.06em;display:flex;justify-content:space-between}
.pc b span{color:var(--mute);font-weight:600}
.bar{height:8px;border-radius:5px;background:rgba(0,0,0,.6);overflow:hidden;margin-top:3px;border:1px solid rgba(255,255,255,.08)}
.bar i{display:block;height:100%;width:100%;border-radius:4px;background:linear-gradient(90deg,#ff5d6c,#ff9a7a);transition:width .15s}
.bar.mp{height:5px}.bar.mp i{background:linear-gradient(90deg,#4a7dff,#6fd6ff)}
.bar.xp{height:4px;width:74px}.bar.xp i{background:var(--gold)}
#topright{position:absolute;right:max(10px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top));display:flex;align-items:center;gap:10px}
#lvl{font-size:12px;color:var(--gold);text-align:right;text-shadow:0 1px 3px #000}
#room{font:800 12px Nunito;color:var(--cyan);padding:4px 8px;border:1px solid rgba(111,214,255,.4);border-radius:8px;background:rgba(10,7,24,.7)}
#btnPause{width:40px;height:40px;border-radius:50%;background:rgba(10,7,24,.7);border:1px solid var(--line);font-size:12px;color:var(--gold)}
#bossbar{position:absolute;left:50%;top:max(10px,env(safe-area-inset-top));transform:translateX(-50%);width:min(46vw,460px);text-align:center}
#bossbar span{font:700 clamp(12px,2.4vh,16px) Cinzel,serif;letter-spacing:.14em;color:#ffd9e2;text-shadow:0 0 12px #ff3d6e,0 1px 2px #000}
#bossbar .bar{height:10px;border-color:rgba(255,93,143,.5)}
#bossbar .bar i{background:linear-gradient(90deg,#8f1238,#ff5d8f)}
#banner{position:absolute;left:0;right:0;top:24%;text-align:center;opacity:0;transform:scale(.96);transition:opacity .8s,transform 1.6s}
#banner.on{opacity:1;transform:scale(1)}
#banner small{font:600 clamp(11px,2vh,15px) Cinzel,serif;letter-spacing:.5em;color:var(--mute);text-transform:uppercase}
#banner h2{font-size:clamp(26px,7vh,58px);color:var(--gold);text-shadow:0 0 30px rgba(244,199,107,.6),0 2px 4px #000}
#banner.boss h2{color:#ff7fa3;text-shadow:0 0 30px rgba(255,61,110,.8),0 2px 4px #000}
#toast{position:absolute;left:50%;top:16%;transform:translateX(-50%);max-width:86vw;padding:8px 18px;border-radius:20px;background:rgba(10,7,24,.82);border:1px solid var(--line);font-weight:700;font-size:clamp(12px,2.2vh,15px);text-align:center;opacity:0;transition:opacity .4s}
#toast.on{opacity:1}
#saved{position:absolute;left:max(12px,env(safe-area-inset-left));bottom:max(10px,env(safe-area-inset-bottom));font-size:12px;font-weight:700;color:var(--gold);opacity:0;transition:opacity .5s;text-shadow:0 1px 3px #000}
body.touch #saved{left:50%;transform:translateX(-50%)}
#saved.on{opacity:1}
#prompt{position:absolute;left:50%;bottom:18%;transform:translateX(-50%);padding:6px 14px;border-radius:10px;background:rgba(10,7,24,.82);border:1px solid var(--line);font-weight:700;font-size:14px;white-space:nowrap}
#joy{position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:2px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05)}
#joy i{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.7),rgba(139,108,255,.6))}
#actions{position:absolute;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(4,auto);gap:8px;align-items:end;justify-items:center}
.ab{--s:54px;position:relative;width:var(--s);height:var(--s);border-radius:50%;border:2px solid var(--c,var(--line));background:radial-gradient(circle at 35% 30%,rgba(60,44,120,.95),rgba(14,9,34,.95));display:grid;place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.5);color:var(--c,var(--gold));touch-action:none}
.ab svg{width:54%;height:54%}
.ab .cd{position:absolute;inset:0;border-radius:50%;background:linear-gradient(to top,rgba(0,0,0,.75) var(--p,0%),transparent var(--p,0%));pointer-events:none}
.ab kbd{position:absolute;right:-2px;bottom:-2px;font-size:10px;min-width:16px;padding:0 4px;background:#0a0718}
.ab.lock{filter:grayscale(1);opacity:.4}
.ab.nomp{border-color:#44506e;color:#6d7896}
.ab.on{background:radial-gradient(circle at 35% 30%,#f8d98f,#a8691c);color:#2a1a05}
.ab.big{--s:74px;grid-column:3/5;grid-row:2/4}
.ab.util{--s:44px}
.ab:active{transform:scale(.93)}
body:not(.touch) .ab.touchonly{display:none}
body.touch .ab kbd{display:none}
body:not(.touch) #actions{right:50%;transform:translateX(50%);grid-template-columns:repeat(6,auto);align-items:center}
body:not(.touch) .ab{--s:50px}
body:not(.touch) .ab.k1{order:1}body:not(.touch) .ab.k2{order:2}body:not(.touch) .ab.k3{order:3}body:not(.touch) .ab.util{order:5}


#signBox{position:fixed;left:50%;bottom:9%;transform:translateX(-50%);width:min(560px,90vw);padding:16px 20px;border-radius:14px;z-index:20;background:linear-gradient(180deg,rgba(46,40,58,.96),rgba(26,22,36,.96));border:1px solid var(--line);box-shadow:0 12px 40px rgba(0,0,0,.6);text-align:center}
#signBox p{font:600 clamp(14px,2.6vh,18px)/1.5 Cinzel,serif;color:#f1e7cf}
#signBox small{display:block;margin-top:8px;color:var(--mute);font-size:11px}

/* Cutscene */
#cut{position:fixed;inset:0;z-index:40;background:#000}
#cutbg{position:absolute;inset:0;width:100%;height:100%}
.lb{position:absolute;left:0;right:0;height:9vh;background:#000}
.lb.top{top:0}.lb.bot{bottom:0}
#cutSkip{position:absolute;right:16px;top:calc(9vh + 10px);padding:6px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.25);color:var(--mute);font-size:13px;background:rgba(0,0,0,.4)}
#cutbox{position:absolute;left:50%;bottom:calc(9vh + 14px);transform:translateX(-50%);width:min(820px,94vw);min-height:104px;display:flex;gap:14px;align-items:center;padding:14px 20px;border-radius:16px;background:rgba(8,5,20,.84);border:1px solid var(--line);backdrop-filter:blur(8px);cursor:pointer}
#cutPortrait{width:84px;height:84px;flex:none;border-radius:50%;background:radial-gradient(circle,rgba(139,108,255,.25),rgba(0,0,0,.5));border:1px solid var(--line)}
#cutbox .txt{flex:1;text-align:left}
#cutWho{display:block;font:700 15px Cinzel,serif;letter-spacing:.14em;margin-bottom:4px}
#cutText{font-size:clamp(14px,2.7vh,19px);line-height:1.5;min-height:3em}
#cutbox.narr #cutText{font-family:Cinzel,serif;text-align:center;font-style:italic;color:#e6def8}
#cutNext{align-self:flex-end;color:var(--gold);animation:bob 1s infinite}
@keyframes bob{50%{transform:translateY(4px)}}

#fade{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .45s;z-index:60}
#fade.on{opacity:1}
#rotate{display:none;position:fixed;inset:0;z-index:80;background:rgba(5,3,14,.94);place-items:center;text-align:center;font-size:54px;color:var(--gold)}
#rotate p{font-size:15px;color:var(--text);margin-top:8px}
@media (orientation:portrait) and (pointer:coarse){#rotate{display:grid}}
@media (max-height:430px){.title h1{font-size:54px}.pc{min-width:150px;transform:scale(.88)}.ab{--s:48px}.ab.big{--s:64px}.card ul{display:none}}
@media (max-width:640px){#charCards{flex-direction:column;align-items:center}}

/* ───── Reforma: pixel art, novo layout de toque, gamepad, escolha de final ───── */
:root{--ui:1}
canvas#cv,#cutbg,#cutPortrait,.card canvas,.pc .av{image-rendering:pixelated;image-rendering:crisp-edges}
.pc img.av{width:38px;height:38px;border-radius:8px;border:2px solid var(--c);background:#0c0818;object-fit:cover}
#cutPortrait{border-radius:10px;border:2px solid var(--line);background:#0c0818}
#frags{font:800 12px Nunito;color:var(--gold);text-shadow:0 1px 3px #000}
.field{width:100%;margin:6px 0 4px;text-align:center;font:700 14px Nunito,sans-serif;color:var(--text);background:rgba(0,0,0,.4);border:1px solid var(--line);border-radius:10px;padding:9px;outline:0;user-select:text;-webkit-user-select:text}
#coopChoose,#coopHost,#coopGuest,#choiceList{display:flex;flex-direction:column;gap:10px}
#choiceList .btn{display:flex;flex-direction:column;gap:3px;text-align:center}
#choiceList .btn small{font-weight:600;font-size:12px;opacity:.8;letter-spacing:0}
.btn.locked,.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}
#endList{list-style:none;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;font:700 15px Cinzel,serif;color:var(--mute)}
#endList li{padding:6px 14px;border:1px solid rgba(255,255,255,.15);border-radius:10px}
#endList li.got{color:var(--gold);border-color:var(--line)}
body.pad .btn:focus,body.pad .card:focus,body.pad input:focus,body.pad select:focus{outline:3px solid var(--gold);outline-offset:2px}
.card{outline:0}
.ab.on{background:radial-gradient(circle at 35% 30%,#f8d98f,#a8691c);color:#2a1a05}
/* botões de toque em arco, no canto */
body.touch #actions{display:block;width:calc(236px*var(--ui));height:calc(206px*var(--ui));right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));transform:none}
body.touch .ab{position:absolute;--s:calc(58px*var(--ui))}
body.touch .ab.big{--s:calc(88px*var(--ui));right:0;bottom:0}
body.touch .ab.k1{right:calc(102px*var(--ui));bottom:calc(2px*var(--ui))}
body.touch .ab.k2{right:calc(84px*var(--ui));bottom:calc(76px*var(--ui))}
body.touch .ab.k3{right:calc(8px*var(--ui));bottom:calc(104px*var(--ui))}
body.touch .ab.u-int{--s:calc(50px*var(--ui));right:calc(176px*var(--ui));bottom:calc(30px*var(--ui))}
body.touch .ab.u-swap{--s:calc(44px*var(--ui));right:calc(156px*var(--ui));bottom:calc(122px*var(--ui))}
body.touch .ab.u-stay{--s:calc(44px*var(--ui));right:calc(84px*var(--ui));bottom:calc(156px*var(--ui))}
body.touch.lefty #actions{right:auto;left:max(14px,env(safe-area-inset-left));transform:scaleX(-1)}
body.touch.lefty .ab{transform:scaleX(-1)}
body.touch #prompt{bottom:auto;top:26%}
@media (max-height:430px){body.touch .ab{--s:calc(52px*var(--ui))}body.touch .ab.big{--s:calc(80px*var(--ui))}}