/* Layout: full-screen game canvas with chunky floating panels; one committed "inside the body at night" candy look */
:root{
  --night:#2a0f2a;
  --plum:#5b2357;
  --ink:#3a1838;
  --rose:#ff4f86;
  --rose-deep:#b8295a;
  --aqua:#2ec8c0;
  --aqua-deep:#1d8f89;
  --gold:#ffc23d;
  --gold-deep:#b9831a;
  --paper:#fff7fa;
  --blush:#ffd3df;
  --muted:#7a5274;
  --f-display:"Dela Gothic One","Hiragino Sans","Noto Sans JP",sans-serif;
  --f-body:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Noto Sans JP",sans-serif;
  color-scheme:dark;
}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--night);color:var(--paper);font-family:var(--f-body);overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#app{position:relative;height:100%;overflow:hidden;overflow:clip}
#game{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;overflow-y:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:24px}
.stack{margin-block:auto;width:100%;max-width:440px;display:grid;gap:16px}

/* buttons */
.btn{font-family:var(--f-display);font-size:1.15rem;border:0;border-radius:999px;padding:.8em 2.2em;background:var(--rose);color:#fff;box-shadow:0 5px 0 var(--rose-deep);cursor:pointer;transition:transform .08s,box-shadow .08s;justify-self:center}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--rose-deep)}
.btn:focus-visible,.card:focus-visible,.copy:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.btn.ghost{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);font-size:1rem}
.btn.ghost:active{transform:translateY(2px)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* title */
.title{text-align:center;justify-items:center;gap:14px}
.kicker{font-weight:900;letter-spacing:.18em;font-size:.82rem;color:var(--blush);margin:0}
.big{font-family:var(--f-display);font-size:clamp(3.6rem,19vw,6.6rem);line-height:1;margin:0;color:#fff;text-shadow:0 4px 0 var(--rose),0 9px 0 rgba(0,0,0,.28);letter-spacing:-.02em}
.big small{font-size:.5em;margin-inline:.04em}
.ribbon{font-family:var(--f-display);background:var(--gold);color:var(--ink);padding:.4em 1.2em;border-radius:999px;font-size:1.1rem;transform:rotate(-3deg);box-shadow:0 4px 0 var(--gold-deep);margin:4px 0 6px}
.lead{max-width:22em;line-height:1.9;color:#fbe3ea;font-size:.95rem;margin:0;text-wrap:balance}

/* select */
.h2{font-family:var(--f-display);color:#fff;font-size:1.55rem;text-align:center;margin:0;text-wrap:balance}
.sub{text-align:center;color:var(--blush);font-size:.88rem;margin:-8px 0 0}
.cards{display:grid;gap:12px}
.card{display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px;align-items:center;background:var(--paper);color:var(--ink);border:3px solid transparent;border-radius:20px;padding:12px 14px;text-align:left;font:inherit;cursor:pointer;box-shadow:0 5px 0 rgba(0,0,0,.28)}
.card{position:relative;transition:transform .2s,filter .2s}
.cards:has(.card[aria-pressed="true"]) .card[aria-pressed="false"]{transform:scale(.97);filter:saturate(.55) brightness(.8)}
.card[aria-pressed="true"]{box-shadow:0 5px 0 rgba(0,0,0,.28)}
/* the condom-ring frame: a translucent pink rubber rim that snaps onto the chosen card */
.card[aria-pressed="true"]::after{content:"";position:absolute;inset:-9px;border-radius:29px;pointer-events:none;
  border:7px solid rgba(255,176,204,.62);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),inset 0 3px 6px rgba(255,255,255,.55),0 0 0 2px rgba(232,110,160,.45),0 6px 18px rgba(255,120,170,.35);
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,190,215,.10) 40%,rgba(255,150,190,.12));
  -webkit-backdrop-filter:saturate(1.05);backdrop-filter:saturate(1.05)}
.card[aria-pressed="true"]::before{content:"";position:absolute;top:-6px;left:22px;right:22px;height:5px;border-radius:5px;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.9),rgba(255,255,255,0))}
.card.snap::after{animation:ringSnap .5s cubic-bezier(.2,1.7,.35,1)}
.card.snap{animation:cardJolt .32s ease-out}
@keyframes ringSnap{0%{transform:scale(1.16);opacity:0}35%{transform:scale(.96);opacity:1}60%{transform:scale(1.025)}80%{transform:scale(.995)}100%{transform:scale(1)}}
@keyframes cardJolt{0%{transform:scale(1)}30%{transform:scale(.965)}100%{transform:scale(1)}}
.snap-pop{position:absolute;right:8px;top:-18px;z-index:2;pointer-events:none;font-family:var(--f-display);font-weight:var(--w-display,400);font-size:1.25rem;color:#fff;
  -webkit-text-stroke:3px var(--rose-deep);paint-order:stroke fill;transform:rotate(8deg);animation:popUp .8s ease-out forwards}
@keyframes popUp{0%{opacity:0;transform:rotate(8deg) scale(.4)}20%{opacity:1;transform:rotate(8deg) scale(1.15)}70%{opacity:1;transform:rotate(8deg) translateY(-6px) scale(1)}100%{opacity:0;transform:rotate(8deg) translateY(-14px)}}
@media (prefers-reduced-motion:reduce){.card.snap::after,.card.snap,.snap-pop{animation:none}}
.card canvas{width:76px;height:76px;border-radius:16px;background:var(--plum);display:block}
.card .info{display:grid;gap:4px;min-width:0}
.nmrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nm{font-family:var(--f-display);font-size:1.3rem}
.kind{font-size:.72rem;font-weight:900;padding:.15em .7em;border-radius:99px;color:var(--ink)}
.stat{display:flex;align-items:center;gap:8px;font-size:.75rem;font-weight:700;color:var(--muted)}
.stat span{width:4.2em}
.pips{display:flex;gap:3px}
.pips i{width:14px;height:8px;border-radius:3px;background:#ecd9e3}
.pips i.on{background:var(--rose)}
.pips i.over{background:var(--gold);box-shadow:0 0 0 2px rgba(255,194,61,.35),0 0 8px rgba(255,194,61,.8);animation:overGlow 1.2s ease-in-out infinite}
@keyframes overGlow{50%{box-shadow:0 0 0 2px rgba(255,194,61,.55),0 0 12px rgba(255,194,61,1)}}
@media (prefers-reduced-motion:reduce){.pips i.over{animation:none}}
.desc{font-size:.82rem;line-height:1.6;color:var(--muted);margin:0}
.howto{background:rgba(255,255,255,.08);border-radius:16px;padding:12px 14px;display:grid;gap:6px;font-size:.85rem;line-height:1.6;color:#fbe3ea}
.howto b{color:#fff}
#sSelect{padding-bottom:0}
.go-bar{position:sticky;bottom:0;display:grid;justify-items:center;padding:18px 0 calc(18px + env(safe-area-inset-bottom,0px));margin-top:-4px;background:linear-gradient(to bottom,rgba(42,15,42,0),rgba(42,15,42,.92) 35%)}
.go-bar .btn{width:min(100%,320px);font-size:1.25rem;animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.go-bar .btn:active{animation:none}
@media (prefers-reduced-motion:reduce){.go-bar .btn{animation:none}}

/* HUD */
#hud{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px));padding-block:12px}
.panel-dark{background:rgba(30,8,30,.74);border-radius:18px;padding:10px 14px;color:#fff;display:grid;gap:8px;width:100%;max-width:520px;margin-inline:auto}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.zone{font-weight:900;font-size:.95rem}
.time{font-variant-numeric:tabular-nums;font-weight:700;font-size:.85rem;color:var(--blush)}
.rank{font-family:var(--f-display);font-size:1rem}
.rank small{font-family:var(--f-body);font-weight:700;font-size:.72rem;color:var(--blush);margin-right:4px}
.remain{font-size:.78rem;color:var(--blush);font-variant-numeric:tabular-nums}
.track{position:relative;height:12px;border-radius:99px;background:rgba(255,255,255,.18);margin-right:10px}
.track .dot{position:absolute;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#e9d6e2}
.track .me{width:14px;height:14px;margin:-7px 0 0 -7px;background:var(--aqua);border:2px solid #fff;z-index:2}
.track .goal{position:absolute;right:-10px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(255,194,61,.35)}
.stam-wrap{display:grid;gap:6px}
.stam-label{display:flex;justify-content:space-between;font-size:.78rem;font-weight:900}
.stam{height:14px;border-radius:99px;background:rgba(255,255,255,.2);overflow:hidden}
.stam i{display:block;height:100%;width:100%;background:var(--aqua);transition:background .2s}
.stam.tired i{background:#ff6b6b}
.hint{font-size:.78rem;color:#fbe3ea;text-align:center;margin:0}

#count{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-display);font-size:clamp(4rem,24vw,7rem);color:#fff;pointer-events:none;text-shadow:0 6px 0 var(--rose)}
#count .num{display:block;animation:numPop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes numPop{from{transform:scale(1.9);opacity:0}to{transform:scale(1);opacity:1}}
#count.go{background:radial-gradient(circle,rgba(255,30,60,.0) 30%,rgba(255,0,40,.55) 100%);animation:goFlash .7s ease-out forwards}
#count.go .num{color:#ff1f3d;font-size:clamp(4.4rem,26vw,8rem);letter-spacing:-.04em;-webkit-text-stroke:4px #fff;paint-order:stroke fill;
  text-shadow:0 0 18px rgba(255,40,70,.95),0 0 46px rgba(255,0,40,.8),0 8px 0 #5a0012;
  animation:goSlam .7s cubic-bezier(.15,1.8,.35,1) forwards}
@keyframes goSlam{0%{transform:scale(3.4) rotate(-14deg);opacity:0}18%{transform:scale(.92) rotate(-6deg);opacity:1}26%{transform:scale(1.08) rotate(-8deg) translateX(-6px)}34%{transform:scale(1) rotate(-6deg) translateX(6px)}42%{transform:scale(1.02) rotate(-6deg) translateX(-3px)}75%{transform:scale(1.02) rotate(-6deg);opacity:1}100%{transform:scale(1.5) rotate(-6deg);opacity:0}}
@keyframes goFlash{0%{background-color:rgba(255,255,255,.85)}12%{background-color:rgba(255,40,70,.35)}100%{background-color:rgba(255,40,70,0);opacity:0}}
@media (prefers-reduced-motion:reduce){#count .num,#count.go .num,#count.go{animation-duration:.01s}}
#toast{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 104px);transform:translate(-50%,8px);width:max-content;max-width:min(88vw,420px);background:rgba(255,247,250,.92);color:var(--ink);font-weight:900;font-size:.82rem;padding:7px 14px;border-radius:12px;text-align:center;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;box-shadow:0 4px 0 rgba(0,0,0,.28);line-height:1.55;text-wrap:balance}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* name entry */
#sName{justify-content:flex-end}
.name-card{background:var(--paper);color:var(--ink);border-radius:22px;padding:18px 18px 16px;width:100%;max-width:440px;display:grid;gap:8px;box-shadow:0 6px 0 rgba(0,0,0,.28);margin:0}
.name-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.name-time{font-family:var(--f-display);font-size:1.1rem;font-variant-numeric:tabular-nums}
.name-label{font-size:.8rem;font-weight:900;color:var(--muted)}
.name-input{font:inherit;font-size:1.15rem;font-weight:900;color:var(--ink);background:#fff;border:3px solid var(--ink);border-radius:14px;padding:.55em .7em;width:100%;box-sizing:border-box;color-scheme:light}
.name-input:focus{outline:none;border-color:var(--aqua);box-shadow:0 0 0 4px rgba(46,200,192,.25)}
.name-err{margin:0;min-height:1.2em;font-size:.8rem;font-weight:900;color:#d2143a}
.name-note{margin:0 0 4px;font-size:.8rem;line-height:1.6;color:var(--muted)}
.name-skip{font:inherit;font-size:.85rem;font-weight:700;background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;justify-self:center;padding:6px}
.name-skip:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* life timeline */
#sLife{justify-content:flex-end}
.life-card{background:var(--paper);color:var(--ink);border-radius:22px;padding:18px 18px 20px;width:100%;max-width:440px;display:grid;gap:8px;box-shadow:0 6px 0 rgba(0,0,0,.28)}
.life-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.wk{background:var(--rose);color:#fff;font-family:var(--f-display);border-radius:99px;padding:.2em .9em;font-size:.95rem}
.steps{display:flex;gap:5px}
.steps i{width:8px;height:8px;border-radius:50%;background:#ecd9e3}
.steps i.on{background:var(--rose)}
.life-title{font-family:var(--f-display);font-size:1.45rem;margin:2px 0 0;text-wrap:balance}
.size{font-weight:900;color:var(--plum);font-size:.92rem;margin:0}
.life-text{line-height:1.8;margin:0 0 6px;font-size:.95rem}

/* result screens */
.result{color:#fff;gap:18px}
.end-big{font-family:var(--f-display);font-size:clamp(2rem,10vw,2.8rem);margin:0;text-align:center;text-shadow:0 4px 0 var(--rose);text-wrap:balance}
.lines{display:grid;gap:10px}
.lines p{margin:0;line-height:1.9;font-size:1rem;color:#fbe3ea;text-wrap:pretty}
.lines p strong{color:#fff}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.stats div{background:rgba(255,255,255,.1);border-radius:14px;padding:10px 6px;text-align:center;display:grid;gap:2px}
.stats b{font-family:var(--f-display);font-size:1.15rem;font-variant-numeric:tabular-nums;color:#fff}
.stats span{font-size:.72rem;color:var(--blush);font-weight:700}
.fail-meta{margin:-6px 0 0;text-align:center;font-size:.85rem;font-weight:700;color:var(--blush);font-variant-numeric:tabular-nums}
.trivia{background:var(--paper);color:var(--ink);border-radius:20px;padding:16px 18px 14px;display:grid;gap:10px;box-shadow:0 5px 0 rgba(0,0,0,.28)}
.trivia-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.trivia-tag{font-family:var(--f-display);font-size:.9rem;background:var(--gold);color:var(--ink);padding:.2em .9em;border-radius:99px}
.trivia-no{font-weight:900;font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.trivia-text{margin:0;font-size:1.05rem;font-weight:700;line-height:1.85;text-wrap:pretty;min-height:3.7em}
.trivia-more{justify-self:end;font:inherit;font-size:.8rem;font-weight:900;border:2px solid var(--ink);background:transparent;color:var(--ink);border-radius:99px;padding:.3em 1em;cursor:pointer}
.trivia-more:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.help{background:var(--paper);color:var(--ink);border-radius:20px;padding:16px 18px;display:grid;gap:8px}
.help h3{font-family:var(--f-display);font-size:1.05rem;margin:0;font-weight:400}
.help p{margin:0;font-size:.85rem;line-height:1.7}
.dial{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dial .num{font-family:var(--f-display);font-size:1.5rem;letter-spacing:.02em;-webkit-user-select:all;user-select:all;font-variant-numeric:tabular-nums}
.dial-name{font-weight:900;font-size:.85rem;color:var(--plum)}
.copy{font:inherit;font-size:.78rem;font-weight:900;border:2px solid var(--ink);background:transparent;color:var(--ink);border-radius:99px;padding:.25em .9em;cursor:pointer}
.help a{color:var(--rose-deep);font-weight:900}
.fine{font-size:.75rem!important;color:var(--muted)}

.back-btn{position:absolute;top:max(12px,env(safe-area-inset-top,0px));left:max(12px,env(safe-area-inset-left,0px));z-index:5;display:flex;align-items:center;gap:4px;font:inherit;font-size:.82rem;font-weight:700;color:var(--paper);background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.35);border-radius:99px;padding:6px 12px 6px 8px;cursor:pointer}
.back-btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
#sSelect .stack{padding-top:36px}
/* title menu + drawer */
.menu-btn{position:absolute;top:max(12px,env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px));z-index:5;min-height:50px;padding:0 18px 0 14px;display:flex;align-items:center;gap:7px;color:#fff;background:var(--rose);border:0;border-radius:99px;box-shadow:0 4px 0 var(--rose-deep),0 0 0 3px rgba(255,255,255,.18);font-family:var(--f-display);font-weight:var(--w-display,400);font-size:1rem;cursor:pointer;transition:transform .08s,box-shadow .08s}
.menu-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--rose-deep)}
.menu-lbl{white-space:nowrap;max-width:9em;overflow:hidden;text-overflow:ellipsis}
.menu-btn:focus-visible,.drawer-x:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.drawer-veil{position:absolute;inset:0;background:rgba(20,4,18,.55);z-index:20}
.drawer{position:absolute;top:0;right:0;bottom:0;z-index:21;width:min(320px,82vw);background:var(--paper);color:var(--ink);box-shadow:-8px 0 0 rgba(0,0,0,.2);
  padding-top:max(16px,env(safe-area-inset-top,0px));padding-bottom:max(16px,env(safe-area-inset-bottom,0px));padding-left:20px;padding-right:max(20px,env(safe-area-inset-right,0px));
  display:flex;flex-direction:column;gap:18px;overflow-y:auto;animation:drawerIn .25s ease-out}
@keyframes drawerIn{from{transform:translateX(100%)}to{transform:none}}
.drawer-head{display:flex;justify-content:space-between;align-items:center}
.drawer-head h2{font-family:var(--f-display);font-weight:var(--w-display,400);font-size:1.4rem;margin:0}
.drawer-x{width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:99px;background:var(--blush);color:var(--ink);cursor:pointer}
.drawer-sec{display:grid;gap:8px}
.drawer-sec .btn{justify-self:stretch;font-size:1rem;padding:.7em 1em}
.drawer-stats{background:#f6e6ee;border-radius:16px;padding:12px 14px}
.face-sec{background:#f6e6ee;border-radius:16px;padding:12px 14px}
.face-row{display:flex;align-items:center;gap:14px}
#facePreview{width:96px;height:120px;border-radius:14px;flex:none}
.face-btns{display:grid;gap:6px;justify-items:start;min-width:0}
.face-pick{font-size:.92rem;padding:.6em 1.2em;cursor:pointer}
.face-adjust{display:grid;gap:4px;margin-top:4px}
.face-adjust label{font-size:.78rem;font-weight:900;color:var(--muted)}
.face-adjust input[type=range]{width:100%;accent-color:var(--rose)}
.face-adjust .btn{justify-self:stretch;font-size:1rem;padding:.6em 1em;margin-top:4px}
.face-note{margin:0;font-size:.74rem;line-height:1.55;color:var(--muted)}
.drawer .drawer-rank{justify-self:stretch;font-size:1rem;padding:.7em 1em;background:var(--gold);color:var(--ink);box-shadow:0 5px 0 var(--gold-deep)}
/* world ranking */
.rank-wrap{gap:14px}
.rank-env{margin:-6px 0 0;text-align:center;font-size:.78rem;font-weight:900;color:var(--ink);background:var(--gold);border-radius:99px;padding:.2em .9em;justify-self:center}
.rank-me{background:var(--paper);color:var(--ink);border-radius:20px;padding:14px 16px;display:grid;gap:4px;align-content:center;justify-items:center;text-align:center;box-shadow:0 5px 0 rgba(0,0,0,.28);min-height:3.2em}
.rank-me .big-rank{font-family:var(--f-display);font-weight:var(--w-display,400);font-size:1.7rem;line-height:1.2}
.rank-me .big-rank b{color:var(--rose-deep);font-weight:inherit}
.rank-me .sub{font-size:.85rem;font-weight:700;color:var(--muted)}
.rank-me .newbest{justify-self:center;font-family:var(--f-display);font-weight:var(--w-display,400);font-size:.85rem;background:var(--rose);color:#fff;border-radius:99px;padding:.15em .9em;animation:nbPop .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes nbPop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.rank-list{list-style:none;margin:0;padding:6px;background:var(--paper);color:var(--ink);border-radius:20px;display:grid;gap:2px;box-shadow:0 5px 0 rgba(0,0,0,.28);max-height:52vh;overflow-y:auto}
.rank-list li{display:grid;grid-template-columns:2.4em auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;font-size:.9rem}
.rank-list li.me{background:#ffe3ec;box-shadow:inset 0 0 0 2px var(--rose)}
.rank-list .no{font-family:var(--f-display);font-weight:var(--w-display,400);font-size:1rem;text-align:center;font-variant-numeric:tabular-nums}
.rank-list li:nth-child(1) .no{color:#c99212} .rank-list li:nth-child(2) .no{color:#8a8f99} .rank-list li:nth-child(3) .no{color:#b0703a}
.rank-list .chr{display:flex;align-items:center;gap:5px;font-size:.72rem;font-weight:900;color:var(--muted);white-space:nowrap}
.rank-list .chr i{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(0,0,0,.15)}
.rank-list .pn{font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-list .tm{font-family:var(--f-display);font-weight:var(--w-display,400);font-variant-numeric:tabular-nums}
.rank-list .msg{display:block;text-align:center;color:var(--muted);font-weight:700;padding:16px}
.rank-list .gap{display:block;text-align:center;color:var(--muted);padding:0;line-height:1;letter-spacing:.3em}
.drawer-stats div{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:.88rem;font-weight:700;color:var(--muted)}
.world-every{margin:-2px 0 6px;font-size:.78rem;font-weight:700;color:#e04f86}
.world-upd{margin:6px 0 0;font-size:.72rem;color:#8a6a86;text-align:right}
.world-upd:empty{display:none}
.stats-h{margin:0 0 4px;font-family:var(--f-display);font-weight:var(--w-display,400);font-size:1rem;color:var(--ink)}
.drawer-stats #drawerStats,.drawer-stats #worldStats{display:grid;grid-template-columns:minmax(0,1fr);gap:7px;width:100%}
#drawerStats>div,#worldStats>div{width:100%;box-sizing:border-box}
.world-stats{background:#fff4d6}
.world-stats .st-note{display:block;font-size:.8rem;font-weight:700;color:var(--muted)}
.drawer-stats .st-sep{border-top:1px dashed #d9bccb;margin:2px 0}
.drawer-stats b{font-family:var(--f-display);font-weight:var(--w-display,400);font-size:1.1rem;color:var(--ink);font-variant-numeric:tabular-nums}
.name-ok{color:#13806f!important}
@media (prefers-reduced-motion:reduce){.drawer{animation:none}}

/* language picker */
.lang-wrap{position:absolute;top:max(12px,env(safe-area-inset-top,0px));left:max(12px,env(safe-area-inset-left,0px));z-index:5}
.lang-btn{display:flex;align-items:center;gap:6px;font:inherit;font-size:.8rem;font-weight:700;color:var(--paper);background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.35);border-radius:99px;padding:6px 11px 6px 8px;cursor:pointer;min-height:44px}
.lang-btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.lang-btn[aria-expanded="true"]{background:rgba(255,255,255,.2)}
.lang-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:170px;background:var(--paper);border-radius:16px;padding:6px;box-shadow:0 6px 0 rgba(0,0,0,.28);display:grid;gap:2px}
.lang-menu button{font:inherit;font-size:.95rem;font-weight:700;color:var(--ink);background:none;border:0;border-radius:10px;padding:9px 12px;text-align:left;cursor:pointer;display:flex;justify-content:space-between;gap:12px}
.lang-menu button:hover,.lang-menu button:focus-visible{background:var(--blush);outline:none}
.lang-menu button[aria-checked="true"]{color:var(--rose-deep)}
.lang-menu button[aria-checked="true"]::after{content:"✓"}
/* per-language type */
html[data-lang="en"],html[data-lang="es"],html[data-lang="id"],html[data-lang="pt"]{--f-display:"Lilita One","Dela Gothic One",sans-serif;--f-body:"Nunito","Zen Maru Gothic",sans-serif}
html[data-lang="ru"]{--f-display:"Russo One","Dela Gothic One",sans-serif;--f-body:"Nunito","Zen Maru Gothic",sans-serif}
html[data-lang="zh-Hans"]{--f-display:"Noto Sans SC","Dela Gothic One",sans-serif;--f-body:"Noto Sans SC",sans-serif;--w-display:900}
html[data-lang="zh-Hant"]{--f-display:"Noto Sans TC","Dela Gothic One",sans-serif;--f-body:"Noto Sans TC",sans-serif;--w-display:900}
html[data-lang="ko"]{--f-display:"Black Han Sans","Dela Gothic One",sans-serif;--f-body:"Noto Sans KR",sans-serif}
.big,.ribbon,.btn,.h2,.nm,.rank,#count,.wk,.life-title,.end-big,.stats b,.trivia-tag,.name-time{font-weight:var(--w-display,400)}
html[data-lang="en"] .big,html[data-lang="es"] .big,html[data-lang="id"] .big,html[data-lang="ru"] .big,html[data-lang="pt"] .big{font-size:clamp(2.6rem,13vw,4.6rem);line-height:1.02}
.btn{max-width:100%;white-space:normal;line-height:1.25}
.row{flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){
  .btn,#toast{transition:none}
}

.btn.share-x{background:#111;box-shadow:0 5px 0 #000;display:inline-flex;align-items:center;gap:.5em}
.btn.share-x .x-logo{font-family:system-ui,sans-serif;font-weight:700}
.btn.share-x:disabled{opacity:.6}

/* update notice */
.upd-bar{position:absolute;z-index:60;left:50%;top:calc(env(safe-area-inset-top,0px) + 74px);transform:translateX(-50%);display:flex;align-items:center;gap:10px;width:max-content;max-width:calc(100% - 24px);background:#fff7fa;color:var(--ink);border-radius:999px;padding:7px 7px 7px 14px;box-shadow:0 5px 0 rgba(0,0,0,.3);font-weight:900;font-size:.86rem;animation:updIn .35s ease-out}
.upd-bar[hidden]{display:none}
.upd-dot{width:9px;height:9px;border-radius:50%;background:#ff4f86;box-shadow:0 0 0 0 rgba(255,79,134,.6);animation:updPulse 1.4s infinite;flex:none}
.upd-btn{font-family:var(--f-display);font-weight:var(--w-display,400);border:0;border-radius:999px;background:var(--rose);color:#fff;padding:.45em 1.1em;font-size:.86rem;box-shadow:0 3px 0 var(--rose-deep);cursor:pointer;flex:none}
.upd-btn:disabled{opacity:.7}
@keyframes updIn{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes updPulse{70%{box-shadow:0 0 0 8px rgba(255,79,134,0)}100%{box-shadow:0 0 0 0 rgba(255,79,134,0)}}
.app-ver{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;font-size:.78rem;color:#8a6a86;font-weight:700}
.ver-btn{border:0;border-radius:999px;background:transparent;color:var(--rose-deep);box-shadow:inset 0 0 0 2px var(--rose);font-weight:900;font-size:.8rem;padding:.45em 1em;cursor:pointer}
.ver-btn:disabled{opacity:.6}
.upd-msg{flex-basis:100%;margin:0;min-height:1em;font-size:.76rem}

/* ===== world ranking: fertilization show ===== */
#sRank{background:radial-gradient(120% 60% at 50% 0%,rgba(255,79,134,.28),transparent 60%)}
.rank-wrap{gap:16px;width:min(100%,460px);position:relative;z-index:1}
.rank-head{display:grid;justify-items:center;gap:4px;padding-top:4px}
.rank-ovum{position:relative;width:86px;height:86px;border-radius:50%;margin-bottom:2px;
  background:radial-gradient(circle at 38% 34%,#fffdf6 0 18%,#ffe6b0 45%,#ffc86b 75%,#e9a34a 100%);
  box-shadow:0 0 0 7px rgba(255,236,190,.28),0 0 0 15px rgba(255,236,190,.12),0 0 46px 10px rgba(255,200,120,.55);
  animation:ovumBeat 2.2s ease-in-out infinite}
.rank-ovum::after{content:"";position:absolute;left:44%;top:44%;width:24%;height:24%;border-radius:50%;background:rgba(220,140,80,.35)}
.rank-ovum .orb{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff}
.rank-ovum .orb::after{content:"";position:absolute;left:50%;top:9px;width:2px;height:18px;margin-left:-1px;background:linear-gradient(#fff,transparent);border-radius:2px}
.rank-ovum .o1{animation:orbit 3.2s linear infinite}
.rank-ovum .o2{animation:orbit 4.1s linear infinite -1.3s;transform-origin:center}
.rank-ovum .o3{animation:orbit 5s linear infinite -3s}
@keyframes orbit{from{transform:rotate(0deg) translateY(-62px) rotate(180deg)}to{transform:rotate(360deg) translateY(-62px) rotate(180deg)}}
@keyframes ovumBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.rank-title{font-size:1.9rem;letter-spacing:.02em;text-shadow:0 3px 0 var(--rose),0 7px 0 rgba(0,0,0,.28),0 0 22px rgba(255,79,134,.7);animation:titleIn .6s cubic-bezier(.2,1.5,.4,1)}
@keyframes titleIn{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.rank-tag{margin:0;font-size:.82rem;font-weight:900;color:var(--blush);text-align:center}

/* your place */
.rank-me{position:relative;overflow:hidden;border-radius:24px;padding:16px 16px 14px;gap:3px}
.rank-me.has{background:linear-gradient(160deg,#fff7fa,#ffe2ec);box-shadow:0 6px 0 rgba(0,0,0,.3),0 0 0 3px #ff8fb1;animation:meIn .55s cubic-bezier(.2,1.4,.4,1)}
.rank-me.gold{background:linear-gradient(160deg,#fff8e1,#ffe39a);box-shadow:0 6px 0 #9c6b10,0 0 0 3px #ffc23d,0 0 34px rgba(255,194,61,.75)}
.rank-me.podium-in{box-shadow:0 6px 0 rgba(0,0,0,.3),0 0 0 3px #ffc23d,0 0 24px rgba(255,194,61,.45)}
.rank-me.has::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent 0 70%,rgba(255,255,255,.75) 78%,transparent 86%);animation:shine 3.4s linear infinite;pointer-events:none;opacity:.55}
.rank-me>*{position:relative}
@keyframes shine{to{transform:rotate(360deg)}}
@keyframes meIn{from{transform:translateY(16px) scale(.92);opacity:0}to{transform:none;opacity:1}}
.rk-lead{font-size:.8rem;font-weight:900;color:var(--muted)}
.rank-me .big-rank{font-size:2.2rem;line-height:1.1}
.rank-me .big-rank .rk-num{display:inline-block;font-size:1.75em;color:var(--rose-deep);font-variant-numeric:tabular-nums;text-shadow:0 3px 0 rgba(184,41,90,.2);animation:numPop .5s 1s cubic-bezier(.2,1.8,.4,1) both}
.rank-me.gold .big-rank .rk-num{color:#c98a00;text-shadow:0 3px 0 #fff2c2,0 0 18px rgba(255,190,40,.8)}
@keyframes numPop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.rk-of{font-weight:900;font-size:.85rem;color:var(--muted)}
.rk-track{display:flex;align-items:center;gap:6px;width:100%;margin:8px 0 2px;font-size:.62rem;font-weight:900;color:var(--muted);--pct:0}
.rk-start{flex:none}
.rk-line{position:relative;flex:1;height:8px;border-radius:9px;background:rgba(122,82,116,.18)}
.rk-line i{position:absolute;inset:0 auto 0 0;width:0;border-radius:9px;background:linear-gradient(90deg,#ff9fbf,#ff4f86)}
.rk-runner{position:absolute;top:50%;left:0;transform:translate(-60%,-50%);line-height:0}
.rk-runner .sp-ico{display:block}
.rk-track.go .rk-line i{width:calc(var(--pct)*100%);transition:width 1.1s cubic-bezier(.3,.9,.3,1)}
.rk-track.go .rk-runner{left:calc(var(--pct)*100%);transition:left 1.1s cubic-bezier(.3,.9,.3,1)}
.rk-egg{flex:none;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 38% 34%,#fffdf6,#ffd27a 70%,#e9a34a);box-shadow:0 0 10px rgba(255,190,90,.9)}
.rank-me.gold .rk-egg{animation:eggHit .5s 1.1s ease-out 2}
@keyframes eggHit{50%{transform:scale(1.5);box-shadow:0 0 22px #ffcf5a}}
.rk-top{font-family:var(--f-display);font-weight:var(--w-display,400);font-size:1rem;color:#fff;background:var(--rose);border-radius:99px;padding:.2em 1em;margin:6px 0 7px;line-height:1.35;box-shadow:0 3px 0 var(--rose-deep);animation:nbPop .6s 1.1s cubic-bezier(.2,1.6,.4,1) both}
.rank-me.gold .rk-top{background:linear-gradient(90deg,#ffb300,#ff7a00);box-shadow:0 3px 0 #9c5a00}
.rank-me .newbest{background:#2ec8c0;box-shadow:0 3px 0 #17847e;animation-delay:1.3s;animation-fill-mode:both}

/* podium */
.podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:8px;padding:0 2px}
.pod{display:grid;justify-items:center;gap:3px;min-width:0;animation:podUp .6s cubic-bezier(.2,1.4,.4,1) both}
@keyframes podUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.pod-egg{position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#fffdf6,#ffe0a6 70%,#f0b25c);box-shadow:0 0 0 4px rgba(255,255,255,.25),0 0 18px rgba(255,200,120,.55)}
.pod.p1 .pod-egg{width:80px;height:80px;box-shadow:0 0 0 5px #ffc23d,0 0 30px rgba(255,194,61,.9);animation:ovumBeat 1.8s ease-in-out infinite}
.pod.p2 .pod-egg{box-shadow:0 0 0 4px #c9ced8,0 0 16px rgba(220,225,235,.6)}
.pod.p3 .pod-egg{box-shadow:0 0 0 4px #d08a4f,0 0 16px rgba(208,138,79,.55)}
.pod-egg .sp-ico{margin-top:18%}
.pod-egg .crown{position:absolute;top:-22px;font-size:26px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.3));animation:crownBob 1.6s ease-in-out infinite}
@keyframes crownBob{50%{transform:translateY(-4px) rotate(-6deg)}}
.pod-name{max-width:100%;font-weight:900;font-size:.85rem;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod.me .pod-name{color:#ffe08a}
.pod-time{font-family:var(--f-display);font-weight:var(--w-display,400);font-size:.85rem;color:var(--blush);font-variant-numeric:tabular-nums}
.pod-step{width:100%;display:grid;place-items:center;font-family:var(--f-display);font-weight:var(--w-display,400);color:#fff;border-radius:14px 14px 6px 6px;font-size:1.4rem;box-shadow:0 4px 0 rgba(0,0,0,.3)}
.pod.p1 .pod-step{height:74px;background:linear-gradient(#ffd34d,#e3a10f);font-size:1.9rem}
.pod.p2 .pod-step{height:54px;background:linear-gradient(#e3e7ee,#a3aab6)}
.pod.p3 .pod-step{height:40px;background:linear-gradient(#e8a46b,#b3692e)}
.pod.empty .pod-step{opacity:.25}

/* the rest */
.rank-list{position:relative;gap:4px;padding:8px;background:rgba(255,247,250,.96)}
.rank-list li{grid-template-columns:2.2em 26px minmax(0,1fr) auto;gap:8px;padding:6px 10px;background:#fff;box-shadow:0 2px 0 rgba(58,24,56,.08);animation:rowIn .45s ease-out both}
.rank-list li.gapr{background:none;box-shadow:none;padding:0}
@keyframes rowIn{from{transform:translateX(-24px);opacity:0}to{transform:none;opacity:1}}
.rank-list li.me{background:linear-gradient(90deg,#ffe3ec,#fff);box-shadow:inset 0 0 0 2px var(--rose),0 0 14px rgba(255,79,134,.45);animation:rowIn .45s ease-out both,meGlow 1.6s 1s ease-in-out infinite}
@keyframes meGlow{50%{box-shadow:inset 0 0 0 2px var(--rose),0 0 22px rgba(255,79,134,.75)}}
.rank-list li:nth-child(n) .no{color:var(--muted)}
.rank-list .ico{line-height:0;display:grid;place-items:center}
.rank-list .nmw{display:flex;align-items:baseline;gap:6px;min-width:0}
.rank-list .pn{min-width:0}
.rank-list .chr{font-size:.66rem;flex:none}
.rank-list .you{flex:none;font-size:.62rem;font-weight:900;color:#fff;background:var(--rose);border-radius:99px;padding:.05em .55em}

/* confetti */
.rank-fx{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:3}
.rank-fx .fx{position:absolute;top:-30px;animation:fxFall 2.6s cubic-bezier(.3,.6,.5,1) forwards;will-change:transform}
.rank-fx .fx-sp{width:10px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 6px rgba(255,255,255,.9)}
.rank-fx .fx-sp::after{content:"";position:absolute;left:4px;top:11px;width:2px;height:14px;background:linear-gradient(#fff,transparent);border-radius:2px}
@keyframes fxFall{0%{transform:translate(0,0) rotate(0);opacity:0}10%{opacity:1}100%{transform:translate(var(--dx),105vh) rotate(var(--rot));opacity:.9}}
@media (prefers-reduced-motion:reduce){.rank-ovum,.rank-ovum .orb,.rank-me.has::before,.pod.p1 .pod-egg,.crown,.rank-list li.me{animation:none}.rank-fx{display:none}}

/* replays */
.pod-watch{margin-top:2px;border:0;border-radius:99px;font-family:var(--f-display);font-weight:var(--w-display,400);font-size:.72rem;padding:.42em .8em;color:#3a1838;background:#fff;box-shadow:0 3px 0 rgba(0,0,0,.3);cursor:pointer;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.pod.p1 .pod-watch{background:#ffc23d;box-shadow:0 3px 0 #9c6b10}
.pod-watch:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.3)}
.pod-watch:disabled{opacity:.5;cursor:default}
.replay-bar{position:absolute;z-index:8;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 150px);transform:translateX(-50%);display:flex;align-items:center;gap:8px;max-width:calc(100% - 24px);background:rgba(20,6,22,.82);color:#fff;border:2px solid #ffc23d;border-radius:99px;padding:5px 5px 5px 8px;font-weight:900;font-size:.8rem;box-shadow:0 0 18px rgba(255,194,61,.45)}
.replay-bar[hidden]{display:none}
.rp-tag{flex:none;background:#ff4f86;color:#fff;border-radius:99px;padding:.15em .6em;font-size:.68rem;letter-spacing:.08em;animation:rpBlink 1.2s steps(2) infinite}
@keyframes rpBlink{50%{opacity:.45}}
.rp-info{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-close{flex:none;border:0;border-radius:99px;background:#fff;color:#3a1838;font-weight:900;font-size:.76rem;padding:.4em .9em;cursor:pointer}

/* HUD fades instead of popping out (no layer teardown over the canvas) */
#hud{transition:opacity .25s}
#hud[hidden]{display:flex!important;opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}

/* gold katakana joke readings over some ranks (19 = イク, 45 = シコ) */
.rank-list .no{position:relative}
.rank-list .no.has-pun{padding-top:.95em}
.rank-list .no .pun,.rk-pun{position:absolute;left:50%;transform:translateX(-50%);font-style:normal;white-space:nowrap;
  font-family:var(--f-display);font-weight:var(--w-display,400);letter-spacing:.06em;line-height:1;
  background:linear-gradient(180deg,#fff6c2 0%,#ffd34d 45%,#e09a12 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 #7a4a00) drop-shadow(0 0 4px rgba(255,200,60,.6))}
.rank-list .no .pun{top:-.25em;font-size:.85rem}
.rk-numw{position:relative;display:inline-block}
.rk-pun{top:-.62em;font-size:.62em;animation:punPop .5s 1.15s cubic-bezier(.2,1.8,.4,1) both}
@keyframes punPop{from{transform:translate(-50%,6px) scale(.3);opacity:0}to{transform:translateX(-50%);opacity:1}}
.rank-me .big-rank:has(.rk-pun){margin-top:.45em}

/* ===== online races ===== */
.mode-btns{display:grid;gap:12px;justify-items:center;width:100%}
.mode-btns .btn{width:min(100%,320px);padding-inline:1em;white-space:nowrap}
.btn.online-btn{background:linear-gradient(180deg,#ffd34d,#f2a90f);color:#3a1838;box-shadow:0 5px 0 #9c6b10;display:inline-flex;align-items:center;justify-content:center;gap:.5em}
.ol-dot{width:10px;height:10px;border-radius:50%;background:#ff2d6f;box-shadow:0 0 0 0 rgba(255,45,111,.7);animation:updPulse 1.3s infinite;flex:none}
.skill-sec{display:grid;gap:8px}
.skill-h{margin:6px 0 0;font-family:var(--f-display);font-weight:var(--w-display,400);font-size:1.05rem;color:#fff;text-align:center}
.skills{display:grid;gap:8px}
.skill-card{display:flex;align-items:center;gap:12px;text-align:left;border:0;border-radius:16px;padding:10px 14px;background:rgba(255,255,255,.1);color:#fff;font:inherit;cursor:pointer;box-shadow:inset 0 0 0 2px rgba(255,255,255,.15);transition:transform .12s,box-shadow .12s,background .12s}
.skill-card[aria-pressed="true"]{background:#fff7fa;color:var(--ink);box-shadow:inset 0 0 0 3px #ffc23d,0 0 16px rgba(255,194,61,.5);transform:scale(1.02)}
.sk-ic{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:20px}
.sk-ic.sk-shunsei{background:radial-gradient(circle,#fff3b8,#ffc23d 60%,#e08a00)}.sk-ic.sk-shunsei::after{content:"⚡"}
.sk-ic.sk-barrier{background:radial-gradient(circle at 35% 30%,#fff,#e8e4f2 55%,#b9b0d0)}.sk-ic.sk-barrier::after{content:"🛡"}
.sk-ic.sk-kyousei{background:radial-gradient(circle,#ffd3e4,#ff8fb8 60%,#e0477f)}.sk-ic.sk-kyousei::after{content:"🪞"}
.sk-tx{display:grid;gap:2px;min-width:0}
.sk-name{font-family:var(--f-display);font-weight:var(--w-display,400);font-size:1.1rem;line-height:1.5}
.sk-name rt{font-family:var(--f-body);font-size:.55em;font-weight:700;opacity:.8}
.sk-desc{font-size:.8rem;font-weight:700;opacity:.85}
.skill-btn{pointer-events:auto;position:absolute;right:12px;bottom:calc(100% + 10px);min-width:86px;height:86px;border-radius:50%;border:0;display:grid;place-items:center;align-content:center;gap:2px;
  font-family:var(--f-display);font-weight:var(--w-display,400);color:#3a1838;background:radial-gradient(circle at 35% 30%,#fff6c2,#ffc23d 60%,#e08a00);box-shadow:0 5px 0 #9c6b10,0 0 18px rgba(255,194,61,.6);cursor:pointer;touch-action:none}
.skill-btn b{font-size:1.15rem;line-height:1}
.skill-btn span{font-size:.62rem;font-family:var(--f-body);font-weight:900}
.skill-btn.ready{animation:skPulse 1.2s ease-in-out infinite}
.skill-btn.active{background:radial-gradient(circle at 35% 30%,#fff,#7ff0e8 60%,#17a39b);box-shadow:0 5px 0 #0f6d67,0 0 22px rgba(46,200,192,.8)}
.skill-btn.armed{background:radial-gradient(circle at 35% 30%,#fff,#f1eefa 60%,#b9b0d0);box-shadow:0 5px 0 #6d6589,0 0 18px rgba(255,255,255,.6)}
.skill-btn.used{background:#6b5266;color:#d9c6d4;box-shadow:0 3px 0 #3a2a37;opacity:.75}
@keyframes skPulse{50%{transform:scale(1.06)}}
#hud .panel-dark:last-child{position:relative}
.lobby{justify-content:space-between;padding-top:calc(env(safe-area-inset-top,0px) + 70px)}
.lobby-top,.lobby-bottom{display:grid;gap:6px;justify-items:center;text-align:center;width:min(100%,420px)}
.lobby-h{font-size:1.35rem;text-shadow:0 3px 0 var(--rose),0 0 18px rgba(255,79,134,.6)}
.lobby-count{margin:0;font-family:var(--f-display);font-weight:var(--w-display,400);font-size:2rem;color:#ffd34d;text-shadow:0 3px 0 #7a4a00}
.lobby-left{margin:0;font-family:var(--f-display);font-weight:var(--w-display,400);font-size:1.15rem;color:#fff}
.lobby-note{margin:0 0 6px;font-size:.78rem;font-weight:700;color:var(--blush)}
.online-res{gap:12px;width:min(100%,460px)}
.on-head{font-size:2rem}
.on-head.win{color:#ffd34d;text-shadow:0 3px 0 #7a4a00,0 0 20px rgba(255,200,60,.6)}
.on-head.lose{text-shadow:0 3px 0 #b8295a}
.on-sub{margin:-4px 0 0;text-align:center;font-weight:900;color:var(--blush)}
.on-list{max-height:none}
.on-list .tm.st{font-family:var(--f-body);font-size:.75rem;font-weight:900;color:var(--muted)}
.on-list li.gapr .gap{letter-spacing:0;font-size:.78rem;font-weight:700;padding:6px}
#hud .panel-dark{box-sizing:border-box}

/* ranking tabs + イクシコポイント */
.rank-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:rgba(0,0,0,.28);border-radius:99px;padding:4px}
.rank-tab{border:0;border-radius:99px;padding:.6em .4em;background:transparent;color:var(--blush);font-family:var(--f-display);font-weight:var(--w-display,400);font-size:.95rem;cursor:pointer}
.rank-tab[aria-selected="true"]{background:linear-gradient(180deg,#ffd34d,#f2a90f);color:#3a1838;box-shadow:0 3px 0 #9c6b10}
.pts-big{font-family:var(--f-display);font-weight:var(--w-display,400);font-size:1.5rem;color:#c98a00;text-shadow:0 2px 0 #fff2c2;margin:4px 0 2px}
.pod-wins{font-size:.72rem;font-weight:900;color:#fff;background:rgba(255,255,255,.18);border-radius:99px;padding:.2em .7em}
.pts-box{display:grid;justify-items:center;gap:3px;background:linear-gradient(160deg,#fff8e1,#ffe39a);color:#3a1838;border-radius:20px;padding:12px 14px;box-shadow:0 5px 0 #9c6b10,0 0 22px rgba(255,194,61,.5);text-align:center;animation:meIn .55s cubic-bezier(.2,1.4,.4,1)}
.pts-gain{font-family:var(--f-display);font-weight:var(--w-display,400);font-size:1.7rem;color:#c98a00;text-shadow:0 2px 0 #fff;animation:numPop .5s .3s cubic-bezier(.2,1.8,.4,1) both}
.pts-tot{font-weight:900;font-size:.9rem}
.pts-items{font-size:.74rem;font-weight:700;color:#7a5274}
.pts-chip{flex:none;font-size:.66rem;font-weight:900;color:#7a4a00;background:#ffe08a;border-radius:99px;padding:.05em .5em}

.rank-month{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:6px;background:rgba(255,255,255,.1);border-radius:16px;padding:6px}
.rank-month[hidden]{display:none}
.rm-arrow{height:40px;border:0;border-radius:12px;background:#fff7fa;color:var(--rose-deep);font-size:1rem;cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.3)}
.rm-arrow:disabled{opacity:.25;cursor:default}
.rm-mid{display:grid;justify-items:center;gap:2px}
.rm-mid b{font-family:var(--f-display);font-weight:var(--w-display,400);font-size:1.15rem;color:#fff}
.rm-state{font-size:.72rem;font-weight:900;color:var(--blush);background:rgba(0,0,0,.25);border-radius:99px;padding:.1em .7em}
.rm-state.live{color:#3a1838;background:#7ff0e8}
.rank-list li:has(.msg){display:block}

.streak-line{font-family:var(--f-display);font-weight:var(--w-display,400);font-size:1rem;border-radius:99px;padding:.2em 1em;animation:nbPop .6s .15s cubic-bezier(.2,1.6,.4,1) both}
.streak-line.up{color:#fff;background:linear-gradient(90deg,#ff7a00,#ff2d6f);box-shadow:0 3px 0 #9c2a3a,0 0 16px rgba(255,90,60,.7)}
.streak-line.keep{color:#3a1838;background:#7ff0e8;box-shadow:0 3px 0 #17847e}
.streak-line.lost{color:#fff;background:#6b5266;box-shadow:0 3px 0 #3a2a37}
.pts-chip.fire{background:linear-gradient(90deg,#ffb347,#ff5f6d);color:#fff}
.rank-me .newbest.stk{background:linear-gradient(90deg,#ff7a00,#ff2d6f);box-shadow:0 3px 0 #9c2a3a}

/* online select: steps + skill icons */
.sel-step{list-style:none;margin:0 auto;padding:6px 10px;display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.28);border-radius:99px;font-size:.78rem;font-weight:900;color:var(--blush)}
.sel-step li{display:flex;align-items:center;gap:4px}
.sel-step li b{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18);color:#fff;font-size:.72rem}
.sel-step li.on b{background:#ffc23d;color:#3a1838}
.sel-step .arrow{opacity:.6}
.skill-h{display:flex;align-items:center;justify-content:center;gap:8px}
.step-no{font-family:var(--f-body);font-size:.7rem;font-weight:900;color:#3a1838;background:#ffc23d;border-radius:99px;padding:.15em .7em}
.skill-sec{border-radius:20px;padding:10px 6px 6px;transition:background .3s}
.skill-sec.flash{animation:skFlash 1.4s ease-out}
@keyframes skFlash{0%,40%{background:rgba(255,194,61,.35);box-shadow:0 0 0 3px #ffc23d}100%{background:transparent;box-shadow:0 0 0 0 transparent}}
.sk-ic{width:46px;height:46px;flex:none;display:block;filter:drop-shadow(0 2px 0 rgba(0,0,0,.25))}
.sk-ic svg{width:100%;height:100%;display:block}
.sk-mini{width:30px;height:30px;display:block;margin-bottom:-2px}
.sk-mini svg{width:100%;height:100%;display:block}
.skill-btn{height:96px;min-width:96px}
.sel-summary{margin:0 0 8px;font-size:.8rem;font-weight:900;color:#fff;background:rgba(0,0,0,.35);border-radius:99px;padding:.3em 1em}
.go-bar .btn.to-skill{background:linear-gradient(180deg,#ffd34d,#f2a90f);color:#3a1838;box-shadow:0 5px 0 #9c6b10}
.skill-btn.release span{font-size:.7rem;color:#0f5f5a}

/* あいことば */
.aiko{width:min(100%,340px);display:grid;justify-items:center;margin-bottom:6px}
.aiko[hidden]{display:none}
.aiko-toggle{border:0;background:transparent;color:var(--blush);font:inherit;font-size:.78rem;font-weight:900;display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:99px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,211,223,.5)}
.aiko-toggle[hidden]{display:none}
.aiko-form{box-sizing:border-box;width:100%;display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.4);border:2px solid #ffc23d;border-radius:99px;padding:3px 4px 3px 12px}
.aiko-form[hidden]{display:none}
.aiko-ic{font-size:.9rem}
.aiko-in{flex:1;min-width:0;border:0;background:transparent;color:#fff;font:inherit;font-size:16px;font-weight:900;padding:6px 0;outline:none;color-scheme:dark}
.aiko-in::placeholder{color:rgba(255,211,223,.55);font-weight:700;font-size:.85rem}
.aiko-x{flex:none;width:30px;height:30px;border:0;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:.8rem;cursor:pointer}
.lobby-word{margin:2px 0 0;display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:900;color:var(--blush)}
.lobby-word b{font-size:1.1rem;color:#3a1838;background:#ffc23d;border-radius:99px;padding:.15em .9em;box-shadow:0 3px 0 #9c6b10}
.pts-items{white-space:pre-line}
.skill-card{position:relative}
.skill-card.snap{animation:cardJolt .32s ease-out}
.sk-pop{top:-14px;right:14px;color:#ffd3e4}

/* 称号 */
.ttl{display:inline-flex;align-items:center;gap:3px;font-size:.62rem;font-weight:900;border-radius:99px;padding:.08em .55em .08em .12em;white-space:nowrap;flex:none;max-width:100%;overflow:hidden;line-height:1.5}
.ttl b{overflow:hidden;text-overflow:ellipsis}
.ttl-ic{width:16px;height:16px;flex:none;display:block}.ttl-ic svg{width:100%;height:100%;display:block}
.ttl.big{font-size:.82rem}.ttl.big .ttl-ic{width:22px;height:22px}
.ttl.t-gold{background:linear-gradient(90deg,#fff1a8,#f2c04a);color:#5a3a00;box-shadow:0 0 8px rgba(255,200,60,.6)}
.ttl.t-silver{background:linear-gradient(90deg,#fff,#cfd5df);color:#2c3140}
.ttl.t-bronze{background:linear-gradient(90deg,#f9d7b5,#d9955a);color:#4a2a10}
.ttl.t-pink{background:#ffd3e4;color:#a8204f}
.ttl.t-fire{background:linear-gradient(90deg,#ffb347,#ff2d6f);color:#fff}
.ttl.t-acid{background:#e5d4ff;color:#5a2aa0}
.ttl.t-fail{background:#ece2ea;color:#5e4459}
.rank-list .nmw{flex-wrap:wrap;row-gap:2px}
.pod .ttl{font-size:.55rem;max-width:100%}
.ttl-sec{display:grid;gap:8px}
.ttl-cur{min-height:28px;display:flex;align-items:center}
.ttl-none{font-size:.8rem;font-weight:700;color:var(--muted)}
.drawer .ttl-open{justify-self:stretch;font-size:.95rem;padding:.65em 1em;background:linear-gradient(180deg,#ffd34d,#f2a90f);color:#3a1838;box-shadow:0 5px 0 #9c6b10}
.ttl-wrap{width:min(100%,460px);gap:10px}
.ttl-count{margin:-4px 0 0;text-align:center;color:var(--blush);font-weight:900}
.ttl-list{display:grid;gap:6px}
.ttl-cat{margin:10px 0 0;font-family:var(--f-display);font-weight:var(--w-display,400);font-size:1rem;color:#ffd34d}
.ttl-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;border-radius:16px;padding:8px 12px;background:#fff7fa;color:var(--ink);font:inherit;cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.25)}
.ttl-row.locked{background:rgba(255,255,255,.1);color:#d9c6d4;cursor:default;box-shadow:none}
.ttl-row.locked .ttl-big{filter:grayscale(1) brightness(.7);opacity:.6}
.ttl-row.on{box-shadow:inset 0 0 0 3px #ffc23d,0 0 14px rgba(255,194,61,.55)}
.ttl-row.off{justify-content:center;font-weight:900;font-size:.85rem;padding:10px}
.ttl-big{width:44px;height:44px;flex:none;display:block}.ttl-big svg{width:100%;height:100%;display:block}
.ttl-tx{display:grid;gap:1px;min-width:0;flex:1}
.ttl-tx b{font-family:var(--f-display);font-weight:var(--w-display,400);font-size:.98rem;line-height:1.3}
.ttl-cond{font-size:.72rem;font-weight:700;opacity:.8}
.ttl-st{flex:none;display:grid;justify-items:end;gap:2px;font-size:.72rem;font-weight:900;color:var(--rose-deep)}
.ttl-row.locked .ttl-st{color:#d9c6d4}
.ttl-bar{width:64px;height:6px;border-radius:6px;background:rgba(255,255,255,.2);overflow:hidden}.ttl-bar i{display:block;height:100%;background:#ff8fb1}
.ttl-num{font-size:.62rem}
.rm-king{grid-column:1/-1;margin:2px 0 0;text-align:center;font-size:.74rem;font-weight:900;color:#ffd34d}
.rm-king[hidden]{display:none}
.ttl-row.king{cursor:default;box-sizing:border-box}
.king-seasons{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.king-seasons:empty{display:none}
.king-chip{border:0;border-radius:99px;padding:.2em .7em;font:inherit;font-size:.7rem;font-weight:900;background:linear-gradient(90deg,#fff1a8,#f2c04a);color:#5a3a00;cursor:pointer;box-shadow:0 2px 0 #9c6b10}
.king-chip.on{box-shadow:inset 0 0 0 2px #ff2d6f,0 2px 0 #9c6b10}

/* 称号: shiny rares, visible locked silhouettes */
.ttl.t-rainbow{background:linear-gradient(90deg,#ffd3e4,#fff1a8,#c9f5e0,#cfe9ff,#ead6ff);background-size:300% 100%;color:#5a2a7a;animation:rbShift 3s linear infinite;box-shadow:0 0 10px rgba(255,180,230,.8)}
@keyframes rbShift{to{background-position:300% 0}}
.ttl.shine{position:relative;overflow:hidden}
.ttl.shine::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);animation:ttlShine 2.6s ease-in-out infinite}
.ttl-big{position:relative;border-radius:50%}
.ttl-big.shine::after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%);background-size:250% 100%;animation:ttlShine2 2.6s ease-in-out infinite;pointer-events:none}
@keyframes ttlShine{0%,55%{left:-60%}100%{left:130%}}
@keyframes ttlShine2{0%,55%{background-position:150% 0}100%{background-position:-60% 0}}
.ttl-row.got .ttl-big.shine{filter:drop-shadow(0 0 6px rgba(255,210,90,.7))}
.ttl-row.locked{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18)}
.ttl-row.locked .ttl-big{filter:none;opacity:1}
.ttl-row.locked .ttl-big svg{filter:grayscale(1) brightness(1.15) contrast(.9);opacity:.72}
.ttl-row.locked .ttl-big.shine::after{display:none}
.ttl-row.locked .ttl-tx b{color:#fff}
.ttl-row.near{box-shadow:inset 0 0 0 2px rgba(255,143,177,.7),0 0 12px rgba(255,79,134,.35)}
.ttl-row.near .ttl-bar i{background:linear-gradient(90deg,#ff8fb1,#ffd34d);animation:nearPulse 1.2s ease-in-out infinite}
@keyframes nearPulse{50%{filter:brightness(1.35)}}
.ttl-lock{position:absolute;right:-3px;bottom:-3px;width:18px;height:18px;border-radius:50%;background:#3a1838;box-shadow:0 0 0 2px #fff;filter:none}
.ttl-lock::before{content:"";position:absolute;left:5px;top:8px;width:8px;height:6px;border-radius:1.5px;background:#ffc23d}
.ttl-lock::after{content:"";position:absolute;left:6px;top:3.5px;width:6px;height:6px;border:1.6px solid #ffc23d;border-bottom:0;border-radius:4px 4px 0 0;box-sizing:border-box}
.ttl-row.locked .ttl-big .ttl-lock{opacity:1}
.ttl-key{display:inline-block;width:12px;height:12px;margin-right:3px;vertical-align:-2px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='7' cy='12' r='5' fill='none' stroke='%23ffc23d' stroke-width='3'/%3E%3Cpath d='M12 12h10M18 12v4M21 12v3' stroke='%23ffc23d' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E")}
.ttl-key.big{width:20px;height:20px;margin:0}
.ttl-row.locked .ttl-num{color:#ffd3df}
.ttl-bar{width:72px;height:7px;background:rgba(255,255,255,.22)}