:root{--ink:#14233f;--sub:#4d5f82;--gold:#e8b94a;--gold2:#b9832a;--sky:#3f8fe6;--deep:#0f2a5c;--line:#d5e3f6;--main:#ff7a2f;--main2:#c94d12;
  font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic UI","Meiryo",system-ui,sans-serif;color:var(--ink)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#4aa3f5 linear-gradient(180deg,#2f86e6,#7cc2ff 55%,#dff2ff) fixed;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none}
body[data-sky=hashi]{background:#ff9d5c linear-gradient(180deg,#5b3d8f,#e8708a 38%,#ffb366 70%,#ffe2b0) fixed}
body[data-sky=yoru]{background:#0b1638 linear-gradient(180deg,#060b25,#14245a 50%,#3b3a85) fixed}
#cv{position:fixed;inset:0;width:100%;height:100%;display:block}
.scr{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:max(12px,env(safe-area-inset-top)) 16px max(12px,env(safe-area-inset-bottom));overflow:auto;touch-action:pan-y}
.scr.on{display:flex}
#hud.scr{padding:0;overflow:hidden;pointer-events:none;touch-action:none}
.pop{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(8,20,50,.55);backdrop-filter:blur(3px);z-index:20;overflow:auto;touch-action:pan-y}
.pop.on{display:flex;animation:fade .18s}
@keyframes fade{from{opacity:0}}
/* 枠：白いエナメルと金の縁（絵の部品が届いたら差し替え） */
.panel{position:relative;background:linear-gradient(180deg,rgba(16,46,104,.94),rgba(10,30,74,.96));color:#eef5ff;border-radius:22px;padding:20px 18px 16px;width:min(470px,100%);max-height:100%;overflow:auto;margin:auto;
  box-shadow:0 0 0 2px #fff7e0,0 0 0 5px var(--gold),0 0 0 7px var(--gold2),0 22px 50px -10px rgba(0,10,40,.7),inset 0 1px 0 rgba(255,255,255,.25)}
.panel::before{content:"";position:absolute;left:50%;top:-1px;width:26px;height:26px;transform:translate(-50%,-55%) rotate(45deg);background:linear-gradient(135deg,#bfe6ff,#3f8fe6 60%,#1d4fa8);box-shadow:0 0 0 3px var(--gold),0 0 12px #7cc8ff;border-radius:5px}
.panel h2{margin:4px 0 12px;font-size:21px;font-weight:900;text-align:center;letter-spacing:.08em;color:#fff;text-shadow:0 2px 0 #0b2457,0 0 14px rgba(124,200,255,.6)}
.note{margin:6px 0;font-size:12.5px;color:#b8cbea;line-height:1.55}
.f{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:800;width:100%;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4)}
input{font:inherit;font-size:16px;padding:9px 12px;border:2px solid rgba(255,255,255,.7);border-radius:12px;min-width:0;flex:1;background:rgba(255,255,255,.92);color:var(--ink)}
.btns{display:flex;flex-direction:column;gap:9px;margin-top:10px}
.btns.two{flex-direction:row}.btns.two>*{flex:1}
.row{display:flex;gap:6px}
/* ボタン（光る丸い札） */
.gbtn{position:relative;font:inherit;font-weight:900;font-size:17px;letter-spacing:.06em;border:0;border-radius:999px;padding:12px 20px;cursor:pointer;touch-action:manipulation;color:#fff;
  background:linear-gradient(180deg,#8fd0ff,#3f8fe6 52%,#2366c8);box-shadow:0 0 0 2px #fff6dc,0 0 0 4px var(--gold),0 5px 0 4px var(--gold2),0 10px 18px rgba(0,20,60,.35),inset 0 2px 0 rgba(255,255,255,.55);text-shadow:0 2px 0 rgba(10,40,100,.55);line-height:1.15}
.gbtn small{display:block;font-size:11px;font-weight:800;letter-spacing:.02em;opacity:.92;margin-top:2px}
.gbtn.main{background:linear-gradient(180deg,#ffc06a,#ff7a2f 52%,#e0521a);text-shadow:0 2px 0 rgba(120,40,0,.55)}
.gbtn.ghost{background:linear-gradient(180deg,#ffffff,#dfe9f7);color:#24406e;text-shadow:none}
.gbtn.sm{font-size:14px;padding:9px 14px}
.gbtn.wide{width:min(420px,100%)}
.gbtn:active{transform:translateY(3px);box-shadow:0 0 0 2px #fff6dc,0 0 0 4px var(--gold),0 2px 0 4px var(--gold2),inset 0 2px 0 rgba(255,255,255,.5)}
.gbtn:disabled{filter:grayscale(.6);opacity:.6}
.links{display:flex;justify-content:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.lnk{font:inherit;font-size:13px;font-weight:800;color:#fff;background:rgba(10,40,100,.35);border:0;border-radius:999px;padding:6px 12px;cursor:pointer;text-decoration:none;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.ib{width:42px;height:42px;border-radius:50%;border:0;background:linear-gradient(180deg,#fff,#dce8f8);font:900 15px system-ui;color:var(--deep);box-shadow:0 0 0 2px var(--gold),0 3px 8px rgba(0,0,0,.3);cursor:pointer}
/* タイトル */
.tl{width:min(460px,100%);text-align:center;margin:auto}
.logoWrap{position:relative;padding:28px 0 6px}
.emb{position:absolute;left:50%;top:0;width:250px;height:150px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(255,255,255,.75),rgba(255,255,255,0));pointer-events:none}
.emb.art{background:center/contain no-repeat;width:300px;height:300px;top:-60px}
.logo{position:relative;margin:0;font-size:min(17vw,76px);line-height:1;font-weight:900;letter-spacing:.02em}
.logo span{display:inline-block;color:#fff;-webkit-text-stroke:3px #0f3d8a;paint-order:stroke;text-shadow:0 5px 0 #0f3d8a,0 10px 20px rgba(0,30,90,.45)}
.logo span:nth-child(2){color:#ffd34d;-webkit-text-stroke:3px #a33d0b;text-shadow:0 5px 0 #a33d0b,0 10px 20px rgba(120,40,0,.4);transform:rotate(-5deg) translateY(4px)}
.tag{position:relative;margin:12px 0 18px;font-size:14px;font-weight:900;letter-spacing:.3em;color:#fff;text-shadow:0 2px 4px rgba(0,30,90,.55)}
.menu{display:flex;flex-direction:column;gap:14px;padding:0 6px}
.menu .gbtn{font-size:20px;padding:14px 20px}
#nowBox{margin-top:10px}
#nowList .gbtn{font-size:13px;padding:8px 12px}
/* キャラをえらぶ */
#select{align-items:stretch}
.selWrap{width:min(1100px,100%);margin:auto;display:flex;flex-direction:column;gap:10px;align-items:center}
.selTop{display:flex;align-items:center;gap:10px;width:100%}
.selTop h2{margin:0;flex:1;font-size:22px;font-weight:900;color:#fff;letter-spacing:.12em;text-shadow:0 2px 0 #0f3d8a,0 0 16px rgba(255,255,255,.5)}
.selStep{font-size:12px;font-weight:900;color:#fff;background:rgba(10,40,100,.45);padding:5px 10px;border-radius:999px}
.back{font-size:26px;line-height:1}
.selBody{display:flex;gap:14px;width:100%;align-items:stretch}
.selHero{flex:1.1;min-width:0;position:relative;border-radius:20px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.04));box-shadow:0 0 0 2px #fff6dc,0 0 0 4px var(--gold),0 14px 30px rgba(0,20,60,.35);display:flex;align-items:flex-end;min-height:300px}
.selHero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 35% 40%,var(--gc,#8b5cf6) 0%,transparent 62%);opacity:.55}
#heroCv{position:absolute;left:0;top:0;width:62%;height:100%}
.heroInfo{position:relative;margin-left:auto;width:48%;padding:14px 14px 16px;color:#fff;text-shadow:0 2px 3px rgba(0,0,0,.45)}
.hgrp{display:inline-block;font-size:12px;font-weight:900;padding:3px 10px;border-radius:999px;background:var(--gc);box-shadow:0 0 0 2px #fff}
.hname{font-size:36px;font-weight:900;letter-spacing:.06em;margin:6px 0 2px;-webkit-text-stroke:2px rgba(10,30,70,.8);paint-order:stroke}
.hcopy{font-size:13px;font-weight:800;opacity:.95}
.hsp{margin-top:10px;font-size:12.5px;line-height:1.5;background:rgba(10,30,70,.5);border-radius:12px;padding:8px 10px}
.hsp b{display:block;font-size:15px;color:#ffe08a}
.stats{margin-top:10px;display:grid;gap:5px}
.stats div{display:grid;grid-template-columns:4.5em 1fr;align-items:center;gap:8px;font-size:12px;font-weight:900}
.stats i{display:block;height:9px;border-radius:9px;background:rgba(255,255,255,.25);overflow:hidden}
.stats i::after{content:"";display:block;height:100%;width:var(--v);background:linear-gradient(90deg,#ffe08a,#ff9d3a);border-radius:9px}
.selGrid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-content:center}
.sc{position:relative;border:0;padding:0;border-radius:16px;overflow:hidden;cursor:pointer;aspect-ratio:3/4;background:linear-gradient(180deg,var(--gc),var(--gd));box-shadow:0 0 0 2px #fff6dc,0 0 0 4px var(--gold2),0 6px 12px rgba(0,20,60,.35);transition:transform .12s}
.sc canvas,.sc img{position:absolute;inset:0;width:100%;height:100%}
.sc span{position:absolute;left:0;right:0;bottom:0;padding:14px 4px 5px;font:900 14px/1 inherit;font-family:inherit;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);background:linear-gradient(180deg,transparent,rgba(5,15,40,.85))}
.sc.on{transform:translateY(-4px) scale(1.04);box-shadow:0 0 0 3px #fff,0 0 0 6px var(--gold),0 0 22px 6px rgba(255,220,120,.75)}
.sc.on::after{content:"";position:absolute;inset:0;border-radius:16px;box-shadow:inset 0 0 0 3px #fff}
#selOk{margin-top:4px}
@media (orientation:portrait),(max-width:700px){.selBody{flex-direction:column}.selHero{min-height:min(46vh,330px)}.selGrid{gap:8px}.sc span{font-size:12px}.hname{font-size:30px}}
@media (orientation:landscape) and (max-height:520px){#select{padding-top:6px;padding-bottom:6px}.selTop h2{font-size:17px}.selHero{min-height:0}.selGrid{grid-template-columns:repeat(4,1fr);gap:6px}.sc{aspect-ratio:1/1}.hname{font-size:26px}.hsp{font-size:11px;padding:6px 8px}.stats{display:none}.selWrap{gap:6px}#selOk{font-size:15px;padding:10px}}
/* ルール */
.rpanel{width:min(520px,100%)}
.stages{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px}
.stg{position:relative;border:0;padding:0;border-radius:12px;overflow:hidden;aspect-ratio:16/10;cursor:pointer;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.stg canvas{position:absolute;inset:0;width:100%;height:100%}
.stg span{position:absolute;left:0;right:0;bottom:0;font:900 12px/1 inherit;font-family:inherit;color:#fff;padding:12px 4px 5px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.6))}
.stg.on{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--gold),0 0 16px rgba(255,220,120,.8)}
.opt{display:flex;align-items:center;gap:8px;justify-content:space-between;margin:9px 0;flex-wrap:wrap}
.opt b{font-size:14px;color:#fff}
.opt span{font-size:13px;color:#dbe8ff;font-weight:800}
.seg{display:flex;background:rgba(0,10,40,.4);border-radius:12px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{font:inherit;font-size:13px;font-weight:900;border:0;background:none;padding:7px 11px;border-radius:9px;color:#b8cbea;cursor:pointer}
.seg button.on{background:linear-gradient(180deg,#fff,#dbe8fb);color:var(--deep);box-shadow:0 0 0 2px var(--gold)}
/* 待合 */
#lbList{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
#lbList li{display:flex;align-items:center;gap:8px;padding:6px;border-radius:14px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);min-width:0}
#lbList li canvas{width:52px;height:52px;flex:none;border-radius:10px;background:var(--gc,#345)}
#lbList li span{font-size:13px;font-weight:800;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff}
#lbList li small{display:block;font-size:11px;color:#b8cbea}
#lbList li.empty{opacity:.55;justify-content:center;font-size:12px;font-weight:800;color:#b8cbea;min-height:64px}
/* 試合：下の札（絵の部品が届いたら差し替え） */
#cards{position:absolute;left:50%;transform:translateX(-50%);bottom:max(10px,env(safe-area-inset-bottom));display:flex;gap:10px;pointer-events:none}
.card{position:relative;display:flex;align-items:center;gap:6px;padding:4px 12px 4px 4px;border-radius:999px 18px 18px 999px;min-width:132px;
  background:linear-gradient(180deg,rgba(18,48,108,.92),rgba(8,24,64,.92));box-shadow:0 0 0 2px #fff6dc,0 0 0 4px var(--c),0 6px 14px rgba(0,10,40,.45)}
.card .pt{position:relative;width:46px;height:46px;border-radius:50%;overflow:hidden;flex:none;background:linear-gradient(180deg,var(--gc),var(--gd));box-shadow:0 0 0 2px #fff}
.card .pt canvas,.card .pt img{width:100%;height:100%;display:block}
.card .pc{font-size:30px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;color:#fff;-webkit-text-stroke:2px #0b1d44;paint-order:stroke;letter-spacing:-.02em}
.card .pc small{font-size:15px;margin-left:1px}
.card .nm{font-size:11px;font-weight:900;color:#dbe8ff;max-width:84px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.card .st{display:flex;gap:3px;margin-top:2px}
.card .st i{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1.5px #fff}
.card.me::after{content:"あなた";position:absolute;top:-10px;left:50px;font-size:10px;font-weight:900;color:#fff;background:var(--c);padding:1px 7px;border-radius:999px;box-shadow:0 0 0 1.5px #fff}
.card.out{filter:grayscale(.9);opacity:.55}
.card.bump .pc{animation:bump .28s}
.card.ko{animation:shakeC .4s}
@keyframes bump{30%{transform:scale(1.4) rotate(-7deg)}}
@keyframes shakeC{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}}
#timer{position:absolute;top:max(8px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);font-size:24px;font-weight:900;color:#fff;-webkit-text-stroke:2px #0b1d44;paint-order:stroke;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,rgba(18,48,108,.75),rgba(8,24,64,.75));padding:2px 16px;border-radius:999px;box-shadow:0 0 0 2px var(--gold)}
#bMenu{position:absolute;top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));pointer-events:auto}
/* はじまりの顔ぶれと帯 */
#intro{position:absolute;inset:0;display:none;align-items:center;justify-content:center;pointer-events:none}
#intro.on{display:flex}
#vsRow{display:flex;gap:0;width:100%;height:min(46vh,300px);justify-content:center}
.vs{position:relative;flex:1;max-width:280px;overflow:hidden;transform:skewX(-10deg);margin:0 -2px;background:linear-gradient(180deg,var(--gc),var(--gd));box-shadow:0 0 0 3px #fff,0 0 0 6px var(--c);opacity:0;animation:vsIn .45s cubic-bezier(.2,1.4,.4,1) forwards}
.vs canvas,.vs img{position:absolute;left:-15%;top:0;width:130%;height:100%;transform:skewX(10deg)}
.vs b{position:absolute;left:0;right:0;bottom:0;transform:skewX(10deg);padding:18px 6px 8px;font-size:clamp(14px,3vw,24px);font-weight:900;color:#fff;text-align:center;background:linear-gradient(180deg,transparent,rgba(0,0,0,.7));-webkit-text-stroke:1px rgba(0,0,0,.5)}
.vs small{display:block;font-size:11px;opacity:.9}
@keyframes vsIn{from{opacity:0;transform:skewX(-10deg) translateY(40px)}to{opacity:1;transform:skewX(-10deg)}}
#intro.out .vs{animation:vsOut .35s forwards}
@keyframes vsOut{to{opacity:0;transform:skewX(-10deg) translateY(-30px)}}
#ribbon{position:absolute;left:0;right:0;top:50%;height:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
#ribbon span{display:none;position:relative;padding:.12em 1.2em .18em;font-size:min(16vw,110px);font-weight:900;line-height:1;color:#fff;letter-spacing:.06em;-webkit-text-stroke:5px #0f3d8a;paint-order:stroke;text-shadow:0 7px 0 #0f3d8a,0 0 40px rgba(124,200,255,.9)}
#ribbon span::before{content:"";position:absolute;left:-30vw;right:-30vw;top:22%;bottom:22%;z-index:-1;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85) 20%,rgba(190,230,255,.95) 50%,rgba(255,255,255,.85) 80%,transparent);box-shadow:0 0 0 0 transparent;transform:scaleX(0);animation:band .35s .05s forwards}
@keyframes band{to{transform:scaleX(1)}}
#ribbon span.on{display:block;animation:rib .5s cubic-bezier(.2,1.6,.4,1)}
#ribbon span.go{color:#ffd34d;-webkit-text-stroke-color:#a33d0b;text-shadow:0 7px 0 #a33d0b,0 0 50px rgba(255,200,80,1)}
#ribbon span.end{font-size:min(13vw,90px)}
@keyframes rib{0%{transform:scale(2.4);opacity:0}100%{transform:scale(1)}}
/* タッチの操作 */
#pad{display:none}
body.touch #pad{display:block}
#stickZone{position:absolute;left:0;bottom:0;width:48%;height:62%;pointer-events:auto;touch-action:none}
#stick{position:absolute;left:max(74px,calc(env(safe-area-inset-left) + 74px));bottom:max(74px,calc(env(safe-area-inset-bottom) + 68px));width:122px;height:122px;margin:-61px 0 0 -61px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.08),rgba(255,255,255,.22));box-shadow:0 0 0 3px rgba(255,255,255,.75) inset,0 0 0 2px rgba(232,185,74,.8)}
#stick.live{background:radial-gradient(circle,rgba(255,255,255,.15),rgba(255,255,255,.32))}
#stick i{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#dce8f8);box-shadow:0 0 0 2px var(--gold),0 4px 10px rgba(0,0,0,.3)}
.btn{position:absolute;pointer-events:auto;touch-action:none;border:0;border-radius:50%;font:900 13px inherit;font-family:inherit;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;text-shadow:0 1px 2px rgba(0,0,0,.45);
  box-shadow:0 0 0 2px #fff6dc,0 0 0 4px var(--gold),0 5px 0 3px rgba(0,0,0,.25),inset 0 3px 0 rgba(255,255,255,.45),inset 0 -6px 12px rgba(0,0,0,.18);opacity:.92}
.btn small{font-size:9px;font-weight:800;opacity:.92;margin-top:2px}
.btn.on{transform:scale(.9);opacity:1;filter:brightness(1.18)}
.bA{width:96px;height:96px;right:max(90px,calc(env(safe-area-inset-right) + 90px));bottom:max(30px,calc(env(safe-area-inset-bottom) + 24px));background:radial-gradient(circle at 40% 30%,#ffb27a,#ff6a2a 60%,#d84a12);font-size:16px}
.bB{width:70px;height:70px;right:max(194px,calc(env(safe-area-inset-right) + 194px));bottom:max(64px,calc(env(safe-area-inset-bottom) + 58px));background:radial-gradient(circle at 40% 30%,#c9b0ff,#8b5cf6 60%,#5b2fc4)}
.bJ{width:70px;height:70px;right:max(14px,calc(env(safe-area-inset-right) + 14px));bottom:max(120px,calc(env(safe-area-inset-bottom) + 114px));background:radial-gradient(circle at 40% 30%,#9fd6ff,#2f8fe8 60%,#1b5fb8)}
.bG{width:60px;height:60px;right:max(18px,calc(env(safe-area-inset-right) + 18px));bottom:max(26px,calc(env(safe-area-inset-bottom) + 20px));background:radial-gradient(circle at 40% 30%,#8ff0c8,#10b981 60%,#08835a);font-size:12px}
body.touch #cards{bottom:auto;top:max(56px,calc(env(safe-area-inset-top) + 52px))}
@media (orientation:landscape) and (max-height:520px){body.touch #cards{top:max(6px,env(safe-area-inset-top))}body.touch #timer{left:auto;right:max(12px,env(safe-area-inset-right));transform:none;top:max(10px,env(safe-area-inset-top));font-size:18px}.card{min-width:104px;padding:3px 8px 3px 3px}.card .pt{width:36px;height:36px}.card .pc{font-size:23px}.card .nm{max-width:60px}#stick{bottom:max(66px,calc(env(safe-area-inset-bottom) + 60px))}}
@media (max-width:440px){.card{min-width:0;padding:3px 6px 3px 3px;gap:3px;border-radius:999px 12px 12px 999px}.card .pt{width:30px;height:30px}.card .pc{font-size:19px}.card .pc small{font-size:11px}.card .nm{max-width:44px;font-size:9.5px}#cards{gap:5px}.card .st i{width:6px;height:6px}.card.me::after{left:26px;top:-9px;font-size:9px}}
@media (max-width:400px) and (orientation:portrait){.bB{width:64px;height:64px;right:max(150px,calc(env(safe-area-inset-right) + 150px));bottom:max(134px,calc(env(safe-area-inset-bottom) + 128px))}.bJ{bottom:max(152px,calc(env(safe-area-inset-bottom) + 146px))}}
/* 結果 */
#result{background:radial-gradient(circle at 30% 40%,rgba(255,255,255,.35),transparent 60%),linear-gradient(180deg,rgba(10,30,80,.55),rgba(10,30,80,.8))}
.rsWrap{width:min(860px,100%);margin:auto;display:flex;flex-direction:column;gap:12px}
.rsHero{position:relative;display:flex;align-items:center;min-height:240px;border-radius:22px;overflow:hidden;background:linear-gradient(120deg,var(--gc,#3f8fe6),var(--gd,#0f2a5c));box-shadow:0 0 0 2px #fff6dc,0 0 0 5px var(--gold),0 16px 34px rgba(0,10,40,.5)}
.rsHero::before{content:"";position:absolute;inset:-50%;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.14) 0 8deg,transparent 8deg 20deg);animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#rsCv{position:relative;width:46%;height:260px;flex:none}
.rsHead{position:relative;flex:1;padding:16px;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.5)}
#rsHead{font-size:clamp(30px,7vw,54px);font-weight:900;line-height:1.05;-webkit-text-stroke:2px rgba(10,20,60,.7);paint-order:stroke;animation:rib .6s cubic-bezier(.2,1.5,.4,1)}
#rsWho{margin-top:6px;font-size:15px;font-weight:900;opacity:.95}
#rsLine{margin:10px 0 0;font-size:14px;font-weight:800;line-height:1.5;background:rgba(0,0,0,.25);padding:8px 12px;border-radius:12px}
#rsList{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
#rsList li{display:flex;align-items:center;gap:10px;padding:6px 10px 6px 6px;border-radius:14px;background:linear-gradient(180deg,rgba(18,48,108,.92),rgba(8,24,64,.92));box-shadow:0 0 0 2px rgba(255,255,255,.25);font-size:14px;font-weight:800;color:#fff;animation:fade .4s backwards}
#rsList li.win{box-shadow:0 0 0 2px #fff6dc,0 0 0 4px var(--gold)}
#rsList li .rk{font-size:24px;font-weight:900;width:1.4em;text-align:center;color:#ffe08a;-webkit-text-stroke:1px #6b3f00}
#rsList li canvas{width:46px;height:46px;border-radius:50%;background:linear-gradient(180deg,var(--gc),var(--gd));box-shadow:0 0 0 2px #fff}
#rsList li small{color:#b8cbea}
#rsList li .k{margin-left:auto;font-size:11.5px;color:#cfe0fb;text-align:right;line-height:1.4}
@media (max-width:600px){.rsHero{flex-direction:column;min-height:0}#rsCv{width:100%;height:200px}#rsList{grid-template-columns:1fr}}
.help ul{margin:0;padding-left:18px;font-size:13.5px;line-height:1.6}
.help li{margin:4px 0}
.groups{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:10px}
.groups div{padding:8px;border-radius:12px;font-size:12px;line-height:1.45;color:#fff}
.groups b{display:block;font-size:13.5px}
.credit{text-align:right;font-size:11px}
#toast{position:fixed;left:50%;top:max(14px,env(safe-area-inset-top));transform:translate(-50%,-140%);opacity:0;background:rgba(8,24,64,.92);box-shadow:0 0 0 2px var(--gold);color:#fff;font-size:14px;font-weight:800;padding:10px 16px;border-radius:14px;transition:transform .25s;z-index:40;max-width:90vw;text-align:center}
#toast.on{transform:translate(-50%,0);opacity:1}
#net{position:fixed;right:10px;top:max(10px,env(safe-area-inset-top));display:none;background:rgba(34,49,79,.85);color:#fff;font-size:12px;font-weight:800;padding:6px 10px;border-radius:10px;z-index:30}
#net.on{display:block}
@media (orientation:landscape) and (max-height:520px){.tl{width:min(760px,100%);display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;align-items:center;text-align:center}.logoWrap{padding:6px 0}.logo{font-size:54px}.tag{margin:8px 0 0}.menu{gap:10px}.menu .gbtn{font-size:16px;padding:10px 14px}#nowBox,.links{grid-column:1/-1;margin-top:4px}.rpanel{width:min(720px,100%);padding:12px 16px}.rpanel h2{margin:0 0 6px}.stages{gap:6px}.stg{aspect-ratio:16/7}.rpanel .opt{display:inline-flex;width:calc(50% - 8px);margin:4px 0}}
/* 生成した画面の部品（art/ui_*.webp がある時） */
body.art .emb.art{background:var(--ui-emblem) center/contain no-repeat;width:min(92vw,420px);height:min(70vw,320px);top:-34px}
body.art .logoWrap{padding-top:min(22vw,96px)}
body.art .panel{background:var(--ui-panel) center/100% 100% no-repeat;border:26px solid transparent;border-image:var(--ui-panel) 30 fill / 26px stretch;box-shadow:0 20px 40px -12px rgba(0,20,60,.6);border-radius:0;padding:10px 6px 6px;color:#fff}
body.art .panel::before{display:none}
body.art .panel h2{color:#fff;text-shadow:0 2px 0 #0b3d8a,0 0 12px rgba(255,255,255,.6)}
body.art .note,body.art .opt span{color:#e6f1ff}
body.art .seg{background:rgba(5,30,80,.45)}
body.art .gbtn{border-style:solid;border-color:transparent;border-width:0 30px;border-image:var(--ui-btn-sub) 0 64 fill / 0 30px stretch;background:none;box-shadow:none;border-radius:0;padding:14px 4px 15px;filter:drop-shadow(0 6px 8px rgba(0,20,60,.35))}
body.art .gbtn.main{border-image-source:var(--ui-btn-main);border-image-slice:0 66 fill}
body.art .gbtn.ghost{border-image-source:var(--ui-btn-sub);color:#fff;text-shadow:0 2px 0 rgba(10,40,100,.55);filter:saturate(.35) brightness(1.15) drop-shadow(0 6px 8px rgba(0,20,60,.3))}
body.art .gbtn:active{transform:translateY(2px) scale(.98);box-shadow:none}
body.art .btn{background:var(--ui-round-blue) center/100% 100% no-repeat;box-shadow:none;opacity:.95;text-shadow:0 1px 3px rgba(0,0,0,.65),0 0 2px rgba(0,0,0,.6)}
body.art .bA{background-image:var(--ui-round-red)}
body.art .bB{filter:hue-rotate(48deg) saturate(1.1)}
body.art .bG{filter:hue-rotate(-62deg)}
body.art .bB.on{filter:hue-rotate(48deg) brightness(1.15)}body.art .bG.on{filter:hue-rotate(-62deg) brightness(1.15)}
body.art .sc{background:linear-gradient(180deg,var(--gc),var(--gd));box-shadow:0 6px 12px rgba(0,20,60,.35);border-radius:10px;overflow:visible}
body.art .sc canvas{inset:7% 8% 4% 8%;width:84%;height:89%;border-radius:4px}
body.art .sc::before{content:"";position:absolute;inset:-3% -2%;background:var(--ui-card) center/100% 100% no-repeat;z-index:1;pointer-events:none}
body.art .sc span{z-index:2;bottom:6%;left:8%;right:8%}
body.art .sc.on{box-shadow:0 0 22px 6px rgba(255,220,120,.85)}
body.art .sc.on::after{display:none}
body.art #ribbon span::before{left:-1.2em;right:-1.2em;top:-28%;bottom:-36%;background:var(--ui-ribbon) center/100% 100% no-repeat;transform:scaleX(0)}
body.art .card{background:var(--ui-plate) center/100% 100% no-repeat;box-shadow:none;border-radius:0;min-width:0;width:158px;height:64px;padding:0 10px 0 64px;filter:drop-shadow(0 4px 6px rgba(0,10,40,.4))}
body.art .card .pt{position:absolute;left:12px;top:9px;width:46px;height:46px;box-shadow:0 0 0 2px var(--c)}
body.art .card.me::after{left:66px;top:-8px}
@media (max-width:440px){body.art .card{width:88px;height:36px;padding:0 4px 0 36px}body.art .card .pt{left:7px;top:5px;width:26px;height:26px}body.art .card .pc{font-size:16px}body.art .card .nm{display:none}body.art .card.me::after{left:30px;top:-10px}}
@media (orientation:landscape) and (max-height:520px){body.art .card{width:124px;height:50px;padding-left:50px}body.art .card .pt{left:9px;top:7px;width:36px;height:36px}}
.heroInfo{background:linear-gradient(90deg,rgba(5,20,60,0),rgba(5,20,60,.72) 26%,rgba(5,20,60,.82));width:46%;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end;padding-left:26px}
#heroCv{width:66%}
.tag{margin-top:6px}
@media (max-width:440px){body.art .card{width:92px;height:38px}body.art .card .pt{width:28px;height:28px;top:5px}}
@media (orientation:landscape) and (max-height:520px){body.art .emb.art{width:300px;height:230px;top:-10px}body.art .logoWrap{padding-top:70px}body.art .logo{font-size:46px}.f{margin-top:2px}.stg{aspect-ratio:16/6}.rpanel .btns{margin-top:4px}}
@media (orientation:landscape) and (max-height:520px){#nameRow{grid-column:2;margin-top:0}.links{margin-top:0}.tl{gap:4px 18px}}
@media (max-width:384px){body.art .card{width:84px}} /* 11/9 夜: 360 の幅で4人の札が左右にはみ出す（4×92＋すき間＝383px）→ 84px に */