:root{
  --sky1:#1b1340; --sky2:#3a2470; --ground:#2f9e5b; --ground2:#1f6f3f;
  --yellow:#ffd93d; --orange:#ff8a3d; --pink:#ff5fa2; --green:#4ade80; --red:#ff4d4d; --blue:#5ec8ff; --purple:#9b6bff;
  --card:rgba(255,255,255,.1); --ink:#fff;
  --safe-top: env(safe-area-inset-top,0px); --safe-bottom: env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
html{background:var(--sky1)}
html,body{margin:0;height:100%;overflow:hidden;background-color:transparent;color:var(--ink);font-family:"Fredoka","Trebuchet MS",sans-serif;touch-action:manipulation;overscroll-behavior:none}
button{font-family:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation}
.title-font{font-family:"Luckiest Guy","Arial Rounded MT Bold","Fredoka",sans-serif;letter-spacing:.03em}

/* ---------- screens ---------- */
.screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;padding:calc(var(--safe-top) + 10px) 14px calc(var(--safe-bottom) + 12px)}
.screen.active{display:flex}
.sky{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 120%, var(--sky2), var(--sky1) 65%);z-index:-2}
.stars{position:absolute;inset:0;z-index:-1;pointer-events:none}
.stars i{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;opacity:.8;animation:twinkle 2.4s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.7)}50%{opacity:1;transform:scale(1.3)}}
.moon{position:absolute;top:30px;right:8%;width:90px;height:90px;border-radius:50%;background:#fff7c2;box-shadow:0 0 50px 10px rgba(255,247,194,.35);z-index:-1}
body:not([data-screen="title"]):not([data-screen="win"]) .moon{display:none}
.moon:after{content:"";position:absolute;left:-18px;top:-6px;width:84px;height:84px;border-radius:50%;background:var(--sky1)}

/* ---------- buttons ---------- */
.big-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:76px;padding:14px 38px;border-radius:999px;font-size:clamp(24px,4vw,38px);font-family:"Luckiest Guy","Arial Rounded MT Bold","Fredoka",sans-serif;letter-spacing:.04em;color:#2a1a00;background:linear-gradient(#ffe86b,#ffb020);box-shadow:0 8px 0 #b56d00, 0 14px 24px rgba(0,0,0,.35);transition:transform .08s, box-shadow .08s}
.big-btn:active{transform:translateY(6px);box-shadow:0 2px 0 #b56d00, 0 6px 12px rgba(0,0,0,.35)}
.big-btn.secondary{background:linear-gradient(#b89cff,#7c4dff);color:#fff;box-shadow:0 8px 0 #4a23b8, 0 14px 24px rgba(0,0,0,.35)}
.big-btn.secondary:active{box-shadow:0 2px 0 #4a23b8, 0 6px 12px rgba(0,0,0,.35)}
.big-btn.green{background:linear-gradient(#8dffb0,#22c55e);color:#05351a;box-shadow:0 8px 0 #137a3a, 0 14px 24px rgba(0,0,0,.35)}
.big-btn.green:active{box-shadow:0 2px 0 #137a3a, 0 6px 12px rgba(0,0,0,.35)}
.big-btn[disabled]{opacity:.4;filter:grayscale(.6);transform:none}
.small-btn{padding:10px 18px;border-radius:999px;background:rgba(255,255,255,.14);font-weight:700;font-size:18px;border:2px solid rgba(255,255,255,.25)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.pop{animation:pop .5s cubic-bezier(.2,1.6,.4,1) both}
@keyframes pop{0%{transform:scale(0)}100%{transform:scale(1)}}

/* ---------- login ---------- */
#login .lg-title{font-size:clamp(34px,7vw,80px);margin:2vh 0 4px;color:var(--yellow);text-shadow:0 5px 0 #b56d00,0 0 30px rgba(255,217,61,.5)}
.tiles{flex:1;width:100%;min-height:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:10px 0;align-items:stretch}
.tile{background:var(--card);border:4px solid rgba(255,255,255,.2);border-radius:26px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;padding:12px 8px;cursor:pointer;transition:transform .12s;min-height:0}
.tile:active{transform:scale(.96)}
.tile .char{height:min(26vh,240px);max-width:90%;width:auto}
.tile .tname{font-family:"Luckiest Guy","Arial Rounded MT Bold","Fredoka",sans-serif;font-size:clamp(22px,3.6vw,38px);color:var(--yellow);text-shadow:0 3px 0 #000}
.tile .tinfo{font-size:clamp(13px,1.8vw,17px);font-weight:700;opacity:.85;text-align:center}
.tile.last{border-color:var(--yellow);box-shadow:0 0 30px rgba(255,217,61,.35)}
.whoami{font-size:clamp(16px,2.4vw,24px);font-weight:700;color:#ffd9ec;display:flex;gap:10px;align-items:center}
.whoami span{color:var(--yellow);font-family:"Luckiest Guy","Arial Rounded MT Bold","Fredoka",sans-serif;font-size:1.2em}
.whoami .switch{font-size:14px;opacity:.7;text-decoration:underline;padding:4px 6px}
#setup.solo .panel[data-p="1"]{display:none}
#setup.solo .chips,#setup.solo .plabel{display:none}
#setup.solo .card .char{height:min(42vh,380px)}
@media (orientation:portrait){ .tiles{grid-template-columns:repeat(2,1fr)} .tile .char{height:min(16vh,160px)} }

/* ---------- title ---------- */
#title .logo{font-size:clamp(46px,9vw,110px);line-height:.95;text-align:center;margin-top:2vh;color:var(--yellow);text-shadow:0 4px 0 #b56d00, 0 10px 0 rgba(0,0,0,.35), 0 0 30px rgba(255,217,61,.5);animation:wobble 3s ease-in-out infinite;transform-origin:50% 100%}
@keyframes wobble{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
#title .byline{font-size:clamp(18px,2.6vw,30px);font-weight:700;color:#ffd9ec;margin-top:6px;text-align:center}
#title .byline b{color:var(--pink)}
#title .hero{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:4vw;width:100%;min-height:0;position:relative}
#title .hero .char{height:min(34vh,340px);width:auto}
#title .tower-bg{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:100%;width:auto;opacity:.95;z-index:0}
#title .ground{position:absolute;left:-20px;right:-20px;bottom:0;height:14vh;background:linear-gradient(var(--ground),var(--ground2));border-radius:50% 50% 0 0/40px 40px 0 0;z-index:-1}
#titleChars{pointer-events:none;position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;width:100%;padding:0 2vw}
#titleChars .grp{display:flex;align-items:flex-end;gap:1vw}
#titleChars .grp .char{margin:0 -6px}
#title .tower-door rect{animation:doorglow 1.4s ease-in-out infinite alternate}
@keyframes doorglow{from{fill:#2a1a5e}to{fill:#ffb020}}
#title .menu{display:flex;flex-direction:column;gap:14px;align-items:center;padding:18px 0 6px}
#title .stat{font-size:18px;opacity:.85;font-weight:700}

/* ---------- character art ---------- */
.char{display:block;overflow:visible;filter:drop-shadow(0 10px 8px rgba(0,0,0,.45))}
.char .bob{animation:bob 2.2s ease-in-out infinite;transform-origin:50% 100%}
.char.ghost .bob{animation:float 2.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) scaleX(1)}50%{transform:translateY(-6px) scaleX(1.02)}}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-16px) rotate(2deg)}}
.char .spring-l{animation:springL 1.4s ease-in-out infinite;transform-origin:70px 140px}
.char .spring-r{animation:springR 1.4s ease-in-out infinite;transform-origin:150px 140px}
@keyframes springL{0%,100%{transform:rotate(0)}50%{transform:rotate(-14deg)}}
@keyframes springR{0%,100%{transform:rotate(0)}50%{transform:rotate(14deg)}}
.char .wing-l{animation:wingL 1s ease-in-out infinite;transform-origin:118px 122px}
.char .wing-r{animation:wingR 1s ease-in-out infinite;transform-origin:142px 122px}
@keyframes wingL{0%,100%{transform:rotate(0)}50%{transform:rotate(18deg)}}
@keyframes wingR{0%,100%{transform:rotate(0)}50%{transform:rotate(-18deg)}}
.char .blink{animation:blink 4s infinite;transform-origin:center;transform-box:fill-box}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.flip{transform:scaleX(-1)}

/* ---------- setup ---------- */
#setup h2{font-size:clamp(30px,5vw,54px);margin:0 0 8px;color:var(--yellow);text-shadow:0 4px 0 rgba(0,0,0,.4)}
#setup .panels{display:flex;gap:14px;width:100%;flex:1;min-height:0}
.panel{flex:1;background:var(--card);border:3px solid rgba(255,255,255,.18);border-radius:26px;padding:12px;display:flex;flex-direction:column;gap:10px;min-width:0}
.panel .plabel{font-family:"Luckiest Guy","Arial Rounded MT Bold","Fredoka",sans-serif;font-size:clamp(20px,3vw,30px);color:#fff;display:flex;align-items:center;gap:8px}
.panel .plabel .dot{width:18px;height:18px;border-radius:50%}
.panel[data-p="0"] .dot{background:var(--blue)}.panel[data-p="1"] .dot{background:var(--pink)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:flex;align-items:center;gap:6px;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.12);border:3px solid transparent;font-size:clamp(16px,2.2vw,22px);font-weight:700}
.chip.sel{background:#fff;color:#2a1a40;border-color:var(--yellow);box-shadow:0 0 0 4px rgba(255,217,61,.35)}
.chip.taken{opacity:.35}
.chip.cpu{background:linear-gradient(#8de3ff,#2b9fd6);color:#062a3d}
.chip.cpu.sel{background:#fff}
.diff{display:flex;gap:8px;align-items:center;font-weight:700;font-size:15px;opacity:.95}
.diff .chip{padding:6px 12px;font-size:15px}
.chip .edit{font-size:14px;opacity:.7;padding:2px 4px}
.chip input{font:inherit;width:110px;border-radius:8px;border:2px solid #ccc;padding:2px 6px;color:#222}
.cards{display:flex;gap:8px;flex:1;min-height:0}
.card{flex:1;background:rgba(0,0,0,.25);border:4px solid rgba(255,255,255,.15);border-radius:20px;padding:8px 4px 6px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;min-width:0;transition:transform .15s}
.card .char{height:min(34vh,300px);width:auto;max-width:100%}
.card .cname{font-family:"Luckiest Guy","Arial Rounded MT Bold","Fredoka",sans-serif;font-size:clamp(14px,2.2vw,22px);color:var(--yellow)}
.card .ctag{font-size:12px;opacity:.75;text-align:center;line-height:1.1}
.card.sel{border-color:var(--yellow);background:rgba(255,217,61,.18);transform:scale(1.04);box-shadow:0 0 30px rgba(255,217,61,.4)}
#setup .foot{display:flex;gap:14px;align-items:center;justify-content:center;padding-top:12px;flex-wrap:wrap}

/* ---------- battle ---------- */
#battle{padding:calc(var(--safe-top) + 8px) 10px calc(var(--safe-bottom) + 8px)}
.hud{display:flex;justify-content:space-between;width:100%;gap:10px;padding:0 54px}
.fighter-hud{flex:1;background:rgba(12,6,36,.8);border-radius:18px;padding:8px 14px;border:3px solid rgba(255,255,255,.15);min-width:0}
.fighter-hud.right{text-align:right}
.fighter-hud.turn{border-color:var(--yellow);box-shadow:0 0 24px rgba(255,217,61,.45)}
.fighter-hud .fname{font-family:"Luckiest Guy","Arial Rounded MT Bold","Fredoka",sans-serif;font-size:clamp(18px,3vw,30px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fighter-hud .fchar{font-size:clamp(12px,1.8vw,16px);opacity:.8;font-weight:700}
.hearts{display:flex;gap:3px;margin-top:4px;font-size:clamp(18px,3.2vw,30px);line-height:1}
.fighter-hud.right .hearts{justify-content:flex-end}
.hearts span{transition:transform .2s;display:inline-block}
.hearts span.lost{filter:grayscale(1) brightness(.5);transform:scale(.8)}
.hearts span.popd{animation:heartpop .5s ease both}
@keyframes heartpop{0%{transform:scale(1.6) rotate(20deg)}100%{transform:scale(.8)}}
.hearts span.healed{animation:heal .6s ease both}
@keyframes heal{0%{transform:scale(0)}60%{transform:scale(1.6)}100%{transform:scale(1)}}
.arena{position:relative;flex:1;width:100%;min-height:0;display:flex;align-items:flex-end;justify-content:space-around;padding:0 4vw 2vh;overflow:visible}
.arena .tower-bg{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:100%;width:auto;opacity:.9;z-index:-1}
.arena .ground{position:absolute;left:-20px;right:-20px;bottom:-6px;height:9vh;background:linear-gradient(var(--ground),var(--ground2));border-radius:50% 50% 0 0/40px 40px 0 0;z-index:-1}
.slot{position:relative;width:38%;display:flex;justify-content:center;align-items:flex-end;height:100%}
.slot .char{height:min(40vh,380px);max-width:100%;width:auto;transition:transform .25s}
.slot.left .char{transform:translateX(0)}
.slot.lunge-right .char{animation:lungeR .55s ease-in-out both}
.slot.lunge-left .char{animation:lungeL .55s ease-in-out both}
@keyframes lungeR{0%{transform:translateX(0)}45%{transform:translateX(42vw) scale(1.1) rotate(8deg)}100%{transform:translateX(0)}}
@keyframes lungeL{0%{transform:translateX(0)}45%{transform:translateX(-42vw) scale(1.1) rotate(-8deg)}100%{transform:translateX(0)}}
.slot.hit .char{animation:shake .5s ease both;filter:drop-shadow(0 0 18px #ff4d4d) brightness(1.4)}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-14px) rotate(-6deg)}40%{transform:translateX(14px) rotate(6deg)}60%{transform:translateX(-10px)}80%{transform:translateX(10px)}}
.slot.dodge .char{animation:dodge .6s ease both}
@keyframes dodge{0%{transform:translateY(0)}40%{transform:translateY(-120px) rotate(360deg)}100%{transform:translateY(0)}}
.slot.ko .char{animation:ko 1.2s ease forwards}
@keyframes ko{to{transform:rotate(90deg) translateY(30px);opacity:.35;filter:grayscale(1)}}
.slot.winner .char{animation:winjump .6s ease-in-out infinite}
@keyframes winjump{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-50px) rotate(5deg)}}
.slot.healglow .char{filter:drop-shadow(0 0 22px #4ade80) brightness(1.2)}
.float{position:absolute;left:50%;top:10%;transform:translateX(-50%);font-family:"Luckiest Guy","Arial Rounded MT Bold","Fredoka",sans-serif;font-size:clamp(38px,7vw,80px);color:#fff;text-shadow:0 4px 0 #000, 0 0 20px rgba(0,0,0,.6);animation:floatup 1.2s ease-out forwards;pointer-events:none;white-space:nowrap;z-index:5}
.float.dmg{color:var(--red)}.float.heal{color:var(--green)}.float.miss{color:var(--blue)}
@keyframes floatup{0%{opacity:0;transform:translate(-50%,30px) scale(.4)}20%{opacity:1;transform:translate(-50%,0) scale(1.2)}100%{opacity:0;transform:translate(-50%,-80px) scale(1)}}
.vs{position:absolute;left:50%;top:10%;transform:translate(-50%,-50%);font-family:"Luckiest Guy","Arial Rounded MT Bold","Fredoka",sans-serif;font-size:clamp(30px,6vw,70px);color:var(--orange);text-shadow:0 4px 0 #7a2d00;opacity:.9;pointer-events:none}
.turn-banner{width:100%;text-align:center;font-family:"Luckiest Guy","Arial Rounded MT Bold","Fredoka",sans-serif;font-size:clamp(22px,4vw,40px);color:var(--yellow);text-shadow:0 3px 0 rgba(0,0,0,.5);padding:6px 0 8px}
.moves{display:flex;gap:10px;width:100%;justify-content:center;flex-wrap:wrap}
.move{flex:1;min-width:130px;max-width:260px;min-height:84px;border-radius:22px;padding:8px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#fff;border:4px solid rgba(255,255,255,.25);box-shadow:0 8px 0 rgba(0,0,0,.35);transition:transform .08s}
.move:active{transform:translateY(5px);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.move .mname{font-family:"Luckiest Guy","Arial Rounded MT Bold","Fredoka",sans-serif;font-size:clamp(17px,2.6vw,26px);text-align:center;line-height:1}
.move .minfo{font-size:clamp(12px,1.7vw,16px);font-weight:700;opacity:.95}
.move.safe{background:linear-gradient(#42d392,#15935a)}
.move.power{background:linear-gradient(#ff7a7a,#d81e1e)}
.move.trick{background:linear-gradient(#78c6ff,#2b7fd6)}
.move.super{background:linear-gradient(#ffd93d,#ff6a00);color:#3a1600;border-color:#fff;animation:superpulse 1s ease-in-out infinite}
@keyframes superpulse{0%,100%{box-shadow:0 8px 0 rgba(0,0,0,.35),0 0 0 0 rgba(255,217,61,.7)}50%{box-shadow:0 8px 0 rgba(0,0,0,.35),0 0 0 14px rgba(255,217,61,0)}}
.moves.locked .move{pointer-events:none;opacity:.5}

/* timing overlay */
.overlay{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;background:rgba(10,5,30,.78);z-index:20;padding:20px;text-align:center}
.overlay.show{display:flex}
#timing .tlabel{font-family:"Luckiest Guy","Arial Rounded MT Bold","Fredoka",sans-serif;font-size:clamp(26px,5vw,56px);color:#fff;text-shadow:0 4px 0 #000;margin-bottom:12px}
#timing .tsub{font-size:clamp(18px,2.6vw,28px);font-weight:700;color:var(--yellow);margin-bottom:26px}
.bar{position:relative;width:min(86vw,900px);height:76px;border-radius:38px;overflow:hidden;border:5px solid #fff;box-shadow:0 10px 30px rgba(0,0,0,.6);background:#e04343}
.bar .zone{position:absolute;top:0;bottom:0}
.bar .zone.y{background:#ffd23d}.bar .zone.g{background:#38e07a;box-shadow:inset 0 0 20px rgba(255,255,255,.5)}
.bar .ptr{position:absolute;top:-6px;bottom:-6px;width:14px;margin-left:-7px;background:#fff;border-radius:7px;box-shadow:0 0 16px #fff,0 0 4px #000;left:0}
#timing .tap{margin-top:32px;font-family:"Luckiest Guy","Arial Rounded MT Bold","Fredoka",sans-serif;font-size:clamp(40px,8vw,90px);color:var(--yellow);text-shadow:0 5px 0 #b56d00;animation:tapbounce .5s ease-in-out infinite alternate}
@keyframes tapbounce{from{transform:scale(1)}to{transform:scale(1.12)}}
#timing .result{font-family:"Luckiest Guy","Arial Rounded MT Bold","Fredoka",sans-serif;font-size:clamp(44px,9vw,110px);text-shadow:0 6px 0 #000;display:none}
#timing.done .tap,#timing.done .tsub{display:none}#timing.done .result{display:block}
#timing .cpusub{display:none;margin-top:32px;font-family:"Luckiest Guy","Arial Rounded MT Bold","Fredoka",sans-serif;font-size:clamp(28px,5vw,56px);color:#8de3ff;text-shadow:0 4px 0 #000}
#timing.cpu .tap,#timing.cpu .tsub{display:none}#timing.cpu:not(.done) .cpusub{display:block}

/* pass overlay */
#pass .ptitle{font-family:"Luckiest Guy","Arial Rounded MT Bold","Fredoka",sans-serif;font-size:clamp(30px,6vw,64px);color:var(--yellow);text-shadow:0 5px 0 #b56d00}
#pass .psub{font-size:clamp(20px,3vw,32px);font-weight:700;margin:6px 0 18px}
#pass .arrow{font-size:clamp(50px,10vw,120px);animation:slide 1s ease-in-out infinite}
@keyframes slide{0%,100%{transform:translateX(-20px)}50%{transform:translateX(20px)}}
#pass .char{height:min(26vh,240px);width:auto;margin:6px 0 14px}

/* ---------- win / trophy hunt ---------- */
#win h1{font-family:"Luckiest Guy","Arial Rounded MT Bold","Fredoka",sans-serif;font-size:clamp(36px,7vw,80px);margin:0;color:var(--yellow);text-shadow:0 5px 0 #b56d00,0 0 30px rgba(255,217,61,.6);text-align:center;line-height:1}
#win .rule{font-size:clamp(18px,3vw,32px);font-weight:700;color:#ffd9ec;text-align:center;margin:6px 0 4px}
#win .rule i{font-style:normal;opacity:.7;font-size:.75em;display:block}
.hunt{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;min-height:0;position:relative}
.hunt svg{height:100%;width:auto;max-width:100%}
.hunt .win-btn{cursor:pointer}
.hunt .win-btn rect.shut{transition:opacity .25s}
.hunt .win-btn.open rect.shut{opacity:0}
.hunt .win-btn text{font-size:60px;opacity:0;transition:opacity .2s}
.hunt .win-btn.open text{opacity:1}
.hunt .win-btn.wrong text{animation:wiggle .6s ease}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-15deg)}75%{transform:rotate(15deg)}}
.hunt .win-btn.found text{animation:trophy 1s ease infinite alternate;transform-box:fill-box;transform-origin:center}
@keyframes trophy{from{transform:scale(1)}to{transform:scale(1.3)}}
#win .after{display:none;flex-direction:column;align-items:center;gap:12px;padding-top:10px}
#win.found .after{display:flex}
#win.found .hunt{flex:0 0 auto;height:30vh}
#win .tally{font-family:"Luckiest Guy","Arial Rounded MT Bold","Fredoka",sans-serif;font-size:clamp(24px,4.5vw,44px);color:#fff;text-shadow:0 3px 0 #000;text-align:center}
#win .tally b{color:var(--yellow)}

/* ---------- trophy room ---------- */
#room h1{font-family:"Luckiest Guy","Arial Rounded MT Bold","Fredoka",sans-serif;font-size:clamp(34px,6vw,70px);margin:0 0 6px;color:var(--yellow);text-shadow:0 5px 0 #b56d00}
#room .body{display:flex;gap:14px;width:100%;flex:1;min-height:0}
#room .shelf{flex:1.4;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;align-content:start;overflow:auto;padding:4px}
.tcard{background:var(--card);border:3px solid rgba(255,255,255,.18);border-radius:22px;padding:12px 14px}
.tcard .tn{font-family:"Luckiest Guy","Arial Rounded MT Bold","Fredoka",sans-serif;font-size:clamp(20px,3vw,30px)}
.tcard .tt{font-size:clamp(22px,3.6vw,36px);line-height:1.1;letter-spacing:-2px;word-break:break-all}
.tcard .ts{font-size:14px;opacity:.85;font-weight:700;margin-top:4px}
.tcard.champ{border-color:var(--yellow);box-shadow:0 0 24px rgba(255,217,61,.35)}
#room .towerbox{flex:1;background:rgba(0,0,0,.25);border-radius:22px;border:3px solid rgba(255,255,255,.15);display:flex;flex-direction:column;align-items:center;padding:10px;min-width:0}
#room .towerbox .tl{font-family:"Luckiest Guy","Arial Rounded MT Bold","Fredoka",sans-serif;font-size:clamp(16px,2.4vw,24px);color:var(--yellow);text-align:center}
#room .towerbox svg{flex:1;width:100%;min-height:0;max-width:360px}
#room .log{font-size:14px;font-weight:700;opacity:.9;max-width:100%;text-align:center;padding:6px 0 0;line-height:1.5}
#room .foot{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;padding-top:10px;align-items:center}
.tiny{font-size:13px;opacity:.5;padding:8px 12px;text-decoration:underline}

/* confetti */
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:30}
.confetti i{position:absolute;top:-20px;width:12px;height:18px;border-radius:3px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}

.sound-btn{position:absolute;top:calc(var(--safe-top) + 10px);right:14px;font-size:26px;z-index:40;background:rgba(0,0,0,.35);border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center}
.home-btn{position:absolute;top:calc(var(--safe-top) + 10px);left:14px;font-size:26px;z-index:40;background:rgba(0,0,0,.35);border-radius:50%;width:48px;height:48px;display:none;align-items:center;justify-content:center}
.home-btn.show{display:flex}
.hall-btn{position:absolute;top:calc(var(--safe-top) + 10px);left:70px;z-index:40;background:rgba(0,0,0,.35);border-radius:999px;height:48px;padding:0 16px;display:none;align-items:center;gap:6px;font-weight:700;font-size:17px}
.hall-btn.show{display:flex}

/* ---------- mansion ---------- */
#mansion h1,#ghosthunt h1,#meet h1{font-family:"Luckiest Guy","Arial Rounded MT Bold","Fredoka",sans-serif;font-size:clamp(28px,5.5vw,62px);margin:0 0 4px;color:var(--yellow);text-shadow:0 5px 0 #b56d00;text-align:center}
.sub{font-size:clamp(15px,2.2vw,22px);font-weight:700;color:#ffd9ec;text-align:center;margin-bottom:6px}
.hall{flex:1;width:100%;min-height:0;display:flex;align-items:center;justify-content:center}
.hall svg{max-height:100%;max-width:100%;height:auto;width:auto}
.door-btn{cursor:pointer}
.door-btn .doorpanel{transition:transform .2s;transform-box:fill-box;transform-origin:left center}
.door-btn:active .doorpanel{transform:scaleX(.85)}
.door-btn .sign{font-family:"Luckiest Guy","Arial Rounded MT Bold","Fredoka",sans-serif}
.bat{animation:batfly 9s linear infinite;transform-box:fill-box;transform-origin:center}
.tower-bg .bat{animation:batsmall 6s ease-in-out infinite alternate}
@keyframes batsmall{0%{transform:translate(0,0)}50%{transform:translate(260px,-40px) rotate(8deg)}100%{transform:translate(560px,10px)}}
@keyframes batfly{0%{transform:translate(-120px,20px)}25%{transform:translate(200px,-30px) rotate(10deg)}50%{transform:translate(500px,10px)}75%{transform:translate(800px,-40px) rotate(-10deg)}100%{transform:translate(1100px,20px)}}
.candle{animation:flick .35s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:bottom}
@keyframes flick{from{transform:scaleY(1) scaleX(1)}to{transform:scaleY(1.25) scaleX(.85)}}
.eyes{animation:eyes 5s ease-in-out infinite}
@keyframes eyes{0%,40%,100%{transform:translateX(0)}50%,90%{transform:translateX(7px)}}

/* hunters */
.hall{position:relative}
.hall-hunters{position:absolute;left:3%;bottom:6%;display:flex;align-items:flex-end;gap:0;cursor:pointer}
.hall-hunters .char{height:min(18vh,160px);width:auto;margin-right:-16px}
.hbubble{position:absolute;left:0;bottom:100%;margin-bottom:8px;background:#fff;color:#2a1a40;font-weight:700;font-size:clamp(13px,1.8vw,18px);padding:8px 12px;border-radius:14px;white-space:nowrap;box-shadow:0 6px 16px rgba(0,0,0,.4)}
.hbubble:after{content:"";position:absolute;left:30px;bottom:-9px;border:8px solid transparent;border-top-color:#fff;border-bottom:0}
.hh{position:absolute;bottom:0;width:13%;transform:translateX(-50%);cursor:pointer;touch-action:manipulation;z-index:3;transition:filter .2s}
.hh .char{filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.hh .hmeter{height:8px;border-radius:4px;background:rgba(0,0,0,.5);border:2px solid #fff;overflow:hidden;margin:2px 10% 4px}
.hh .hmeter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffd93d,#ff8a3d)}
.hh.ready .char{animation:hready .5s ease-in-out infinite alternate;filter:drop-shadow(0 0 16px #ffd93d) brightness(1.15)}
.hh.ready .hmeter i{background:#4ade80}
@keyframes hready{from{transform:translateY(0) scale(1)}to{transform:translateY(-8px) scale(1.06)}}
.hh.blast .beam{opacity:1!important}
.hh.blast .char{animation:hblast .6s ease both}
@keyframes hblast{0%{transform:scale(1)}30%{transform:scale(1.25) rotate(-6deg)}100%{transform:scale(1)}}
.hflash{position:absolute;inset:0;background:radial-gradient(circle at 50% 100%,rgba(255,240,150,.85),rgba(255,240,150,0) 70%);animation:hflash .5s ease-out forwards;pointer-events:none;z-index:4}
@keyframes hflash{from{opacity:1}to{opacity:0}}
.gfloat.hintro{font-size:clamp(18px,3.4vw,36px);color:#8de3ff;white-space:nowrap;animation-duration:2.2s}
.meet-char.hunters{width:34%}
.meet-char .hrow{display:flex;align-items:flex-end;justify-content:center}
.meet-char .hrow .char{height:min(28vh,260px);margin:0 -14px}
.meet-char.hunters.act .hrow .char{animation:meetact .7s ease both}

/* explore the mansion */
.exbar{display:flex;align-items:center;gap:12px;width:100%;max-width:1100px;padding:2px 60px 6px 150px;flex-wrap:wrap}
.exname{font-family:"Luckiest Guy","Arial Rounded MT Bold","Fredoka",sans-serif;font-size:clamp(20px,3.6vw,36px);color:var(--yellow);text-shadow:0 3px 0 #000;white-space:nowrap}
.exprog{display:flex;align-items:center;gap:8px;flex:1;min-width:140px}
.exprog .tbar{flex:1}.exprog .tbar i{background:linear-gradient(90deg,#8de3ff,#4ade80);width:0}
.exprog b{font-size:16px}
.exinv{display:flex;gap:4px;font-size:clamp(16px,2.4vw,24px);align-items:center;background:rgba(0,0,0,.35);border-radius:999px;padding:4px 10px}
.exinv span.dim{opacity:.22;filter:grayscale(1)}
.exinv .gcount{font-size:14px;font-weight:700;margin-left:4px;opacity:1}
.exroom{background:#2a1a5e}
.exroom.slide-l{animation:slideL .35s ease both}.exroom.slide-r{animation:slideR .35s ease both}.exroom.slide-u{animation:slideU .35s ease both}.exroom.slide-d{animation:slideD .35s ease both}
@keyframes slideL{from{transform:translateX(-40px);opacity:.3}to{transform:none;opacity:1}}
@keyframes slideR{from{transform:translateX(40px);opacity:.3}to{transform:none;opacity:1}}
@keyframes slideU{from{transform:translateY(-40px);opacity:.3}to{transform:none;opacity:1}}
@keyframes slideD{from{transform:translateY(40px);opacity:.3}to{transform:none;opacity:1}}
.spot{position:absolute;transform:translate(-50%,-50%);min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation;z-index:3}
.spot i{font-style:normal;font-size:clamp(18px,3vw,30px);animation:sparkle 1.4s ease-in-out infinite;filter:drop-shadow(0 0 6px #fff)}
.spot.silly i{opacity:.55;animation-duration:2.6s}
.spot.hint i{opacity:.7}.spot.hint i:before{content:"💬";position:absolute;font-size:.6em;margin-left:-.4em;margin-top:-.8em}
@keyframes sparkle{0%,100%{transform:scale(.8) rotate(0);opacity:.6}50%{transform:scale(1.3) rotate(20deg);opacity:1}}
.spot.bump{animation:bump .4s ease}
@keyframes bump{30%{transform:translate(-50%,-50%) scale(1.3) rotate(-8deg)}}
.spot.out{z-index:4}.spot.out i{display:none}
.spot.out .char{height:min(22vh,160px);width:auto;animation:ghpop .3s cubic-bezier(.2,1.6,.4,1) both}
.spot.busted .char{animation:ghbust .4s ease-out forwards}
.spot.got b{font-size:clamp(30px,6vw,60px);animation:floatup .9s ease-out forwards;display:block}
.exit{position:absolute;z-index:5;background:rgba(0,0,0,.5);border:3px solid #fff;border-radius:18px;padding:6px 12px;display:flex;flex-direction:column;align-items:center;gap:0;color:#fff;min-width:64px}
.exit span{font-size:clamp(22px,4vw,40px);line-height:1}
.exit small{font-size:11px;font-weight:700;opacity:.9;white-space:nowrap}
.exit:active{filter:brightness(1.3)}
.ex-left{left:1%;top:45%;transform:translateY(-50%)}.ex-right{right:1%;top:45%;transform:translateY(-50%)}
.ex-up{left:50%;top:1%;transform:translateX(-50%)}.ex-down{left:50%;bottom:1%;transform:translateX(-50%)}
.ex-secret{left:33%;top:52%;transform:translateX(-50%);border-color:var(--yellow);animation:superpulse 1s infinite}
.ex-secretback{left:1%;top:45%;transform:translateY(-50%)}
.excomp{position:absolute;right:1%;top:1%;z-index:2;cursor:pointer;touch-action:manipulation;display:flex;flex-direction:column;align-items:flex-end}
.excomp .char{height:min(15vh,120px);width:auto}
.excomp .hbubble{position:static;margin:4px 0 0;max-width:36vw;white-space:normal;font-size:clamp(12px,1.6vw,16px);order:2}
.excomp .hbubble:after{left:auto;right:30px;bottom:auto;top:-9px;border-top-color:transparent;border-bottom:8px solid #fff;border-top:0}
.extoast{position:absolute;left:50%;top:8%;transform:translateX(-50%);background:#fff;color:#2a1a40;font-weight:700;font-size:clamp(14px,2.2vw,22px);padding:10px 16px;border-radius:16px;max-width:80%;text-align:center;box-shadow:0 8px 20px rgba(0,0,0,.4);animation:toast 2.6s ease both;z-index:8;pointer-events:none}
.extoast.good{background:#ffd93d;color:#3a1600}.extoast.hint{background:#8de3ff;color:#062a3d}
@keyframes toast{0%{opacity:0;transform:translate(-50%,-10px) scale(.8)}10%,85%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0}}
.exdark{position:absolute;left:50%;top:40%;transform:translateX(-50%);color:#fff;font-weight:700;font-size:clamp(16px,2.6vw,26px);background:rgba(0,0,0,.6);padding:12px 18px;border-radius:14px;text-align:center;max-width:80%;z-index:3}
.mapgrid{display:grid;grid-template-columns:repeat(3,minmax(90px,160px));gap:8px;margin:10px 0 16px}
.mcell{background:rgba(255,255,255,.12);border:3px solid rgba(255,255,255,.2);border-radius:14px;padding:10px 6px;font-weight:700;font-size:clamp(11px,1.6vw,15px);text-align:center;min-height:48px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5)}
.mcell.seen{color:#fff;background:rgba(94,200,255,.25);border-color:#5ec8ff;cursor:pointer}
.mcell.here{background:#ffd93d;color:#3a1600;border-color:#fff}
.mcell.empty{background:none;border:0}

/* ghost hunt */
#ghosthunt .setup{display:flex;flex-direction:column;align-items:center;gap:14px;flex:1;justify-content:center}
#ghosthunt .setup .chips{justify-content:center}
#ghosthunt .play{display:none;flex:1;width:100%;min-height:0;flex-direction:column;align-items:center}
#ghosthunt.playing .setup{display:none}#ghosthunt.playing .play{display:flex}
.huntbar{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:1100px;gap:14px;padding:4px 6px}
.huntbar .score{font-family:"Luckiest Guy","Arial Rounded MT Bold","Fredoka",sans-serif;font-size:clamp(22px,4vw,40px);color:var(--yellow);text-shadow:0 3px 0 #000}
.tbar{flex:1;height:22px;border-radius:11px;background:rgba(0,0,0,.4);border:3px solid #fff;overflow:hidden}
.tbar i{display:block;height:100%;background:linear-gradient(90deg,#4ade80,#ffd93d,#ff4d4d);width:100%;transition:width .25s linear}
.roombox{position:relative;flex:1;width:100%;min-height:0;display:flex;align-items:center;justify-content:center}
.room{position:relative;aspect-ratio:9/5;max-width:100%;max-height:100%;width:100%;border-radius:18px;overflow:hidden;border:5px solid #fff;box-shadow:0 14px 40px rgba(0,0,0,.5);background:#2a1a5e}
.room svg.bg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.gh{position:absolute;width:11%;transform:translate(-50%,-100%);animation:ghpop .3s cubic-bezier(.2,1.6,.4,1) both;cursor:pointer;touch-action:manipulation}
.gh .char{filter:drop-shadow(0 6px 6px rgba(0,0,0,.5))}
.gh.gold .char{filter:drop-shadow(0 0 14px #ffd93d) sepia(1) saturate(4) hue-rotate(5deg) brightness(1.1)}
.gh.bust{animation:ghbust .35s ease-out forwards;pointer-events:none}
.gh.gone{animation:ghgone .3s ease-in forwards;pointer-events:none}
@keyframes ghpop{0%{transform:translate(-50%,-100%) scale(0)}100%{transform:translate(-50%,-100%) scale(1)}}
@keyframes ghbust{0%{transform:translate(-50%,-100%) scale(1.2) rotate(0)}100%{transform:translate(-50%,-140%) scale(0) rotate(360deg);opacity:0}}
@keyframes ghgone{to{transform:translate(-50%,-100%) scale(0);opacity:0}}
.gfloat{position:absolute;transform:translate(-50%,-100%);font-family:"Luckiest Guy","Arial Rounded MT Bold","Fredoka",sans-serif;font-size:clamp(22px,4vw,44px);color:#ffd93d;text-shadow:0 3px 0 #000;animation:floatup 1s ease-out forwards;pointer-events:none;z-index:5}
.countdown{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:"Luckiest Guy","Arial Rounded MT Bold","Fredoka",sans-serif;font-size:clamp(80px,20vw,220px);color:#fff;text-shadow:0 8px 0 #000;pointer-events:none;z-index:6}
#huntOver .big{font-family:"Luckiest Guy","Arial Rounded MT Bold","Fredoka",sans-serif;font-size:clamp(32px,7vw,76px);color:var(--yellow);text-shadow:0 5px 0 #b56d00}
#huntOver .mid{font-size:clamp(20px,3.5vw,36px);font-weight:700;margin:8px 0 20px}

/* meet the busters */
.meetrow{flex:1;width:100%;min-height:0;display:flex;align-items:flex-end;justify-content:space-around;padding:0 2vw 2vh;position:relative}
.meet-char{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;width:30%}
.meet-char .char{height:min(40vh,380px);max-width:100%;width:auto}
.meet-char{width:22%}
.meet-char .mname{font-family:"Luckiest Guy","Arial Rounded MT Bold","Fredoka",sans-serif;font-size:clamp(18px,3vw,30px);color:var(--yellow);text-shadow:0 3px 0 #000}
.meet-char .mtag{font-size:clamp(12px,1.8vw,16px);font-weight:700;opacity:.85;text-align:center}
.meet-char.act .char{animation:meetact .7s ease both}
@keyframes meetact{0%{transform:scale(1)}30%{transform:scale(1.25) rotate(-8deg)}60%{transform:scale(1.15) rotate(8deg)}100%{transform:scale(1)}}
.bubble{position:absolute;top:-6px;left:50%;transform:translateX(-50%);background:#fff;color:#2a1a40;font-weight:700;font-size:clamp(15px,2.4vw,24px);padding:10px 16px;border-radius:18px;white-space:nowrap;box-shadow:0 6px 16px rgba(0,0,0,.4);animation:pop .4s cubic-bezier(.2,1.6,.4,1) both;z-index:5}
.bubble:after{content:"";position:absolute;left:50%;bottom:-10px;margin-left:-8px;border:8px solid transparent;border-top-color:#fff;border-bottom:0}
@media (orientation:portrait){
  .meet-char .char{height:min(24vh,220px)}
  .roombox{align-items:flex-start}
}

@media (orientation:portrait){
  #setup .panels{flex-direction:column}
  .card .char{height:min(13vh,120px)}
  .slot .char{height:min(30vh,300px)}
  .arena .tower-bg{height:72%}
  .vs{top:4%}
  #room .body{flex-direction:column}
  #room .shelf{grid-template-columns:repeat(2,1fr)}
  #room .towerbox{flex:0 0 32vh}
  @keyframes lungeR{0%{transform:translateX(0)}45%{transform:translateX(34vw) scale(1.1) rotate(8deg)}100%{transform:translateX(0)}}
  @keyframes lungeL{0%{transform:translateX(0)}45%{transform:translateX(-34vw) scale(1.1) rotate(-8deg)}100%{transform:translateX(0)}}
}
@media (max-height:520px){
  .big-btn{min-height:58px;padding:8px 26px}
  #title .logo{margin-top:0}
}