/* スマッシュバトル！ 画面のかたち。スマホ縦は「上が試合・下が操作盤」、横長は試合の上に操作盤を重ねる */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#0a0f26;overflow:hidden;overscroll-behavior:none}
body{font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic UI","Meiryo",system-ui,sans-serif;color:#fff;-webkit-user-select:none;user-select:none;touch-action:none}
button{font:inherit;color:inherit;border:0;cursor:pointer;touch-action:manipulation}
.hide{display:none!important}
#app{position:fixed;inset:0;display:flex;flex-direction:column;--pad:0px}
#stageWrap{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:#0a0f26}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block}
/* ---- 画面（タイトルなど） ---- */
.scr{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;z-index:20;padding:max(10px,env(safe-area-inset-top)) 14px max(10px,env(safe-area-inset-bottom));overflow:auto;touch-action:pan-y}
.scr.on{display:flex}
#title{justify-content:center;gap:14px;background:radial-gradient(120% 90% at 50% 20%,rgba(20,30,90,.25),rgba(8,10,32,.86))}
#sel,#stg,#net,#result{background:linear-gradient(160deg,rgba(18,26,74,.97),rgba(9,12,38,.98))}
.logo{display:flex;flex-direction:column;align-items:center;line-height:.95;transform:rotate(-4deg) skewX(-6deg);filter:drop-shadow(0 8px 0 rgba(0,0,0,.35));animation:logoIn .7s cubic-bezier(.2,1.6,.4,1) both}
.logo span{font-weight:900;font-style:italic;letter-spacing:-.02em;-webkit-text-stroke:10px #10163a;paint-order:stroke fill}
.logo .l1{font-size:clamp(46px,13vw,104px);background:linear-gradient(180deg,#fff 20%,#ffe36b 55%,#ff8a1f);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:0;text-shadow:none;position:relative}
.logo .l2{font-size:clamp(54px,15.5vw,124px);background:linear-gradient(180deg,#fff 15%,#7fe0ff 50%,#2f6fff);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:0;margin-top:-.08em}
.logo span{filter:drop-shadow(3px 0 0 #10163a) drop-shadow(-3px 0 0 #10163a) drop-shadow(0 3px 0 #10163a) drop-shadow(0 -3px 0 #10163a)}
@keyframes logoIn{from{transform:rotate(-14deg) scale(2.2);opacity:0}}
.sub{margin:0;font-weight:800;font-size:clamp(13px,3.6vw,18px);color:#dfe8ff;text-shadow:0 2px 0 #10163a}
.menu{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(560px,100%)}
.mbtn{background:linear-gradient(180deg,#2a3a8f,#1a2462);border:3px solid #6f8cff;border-radius:16px;padding:12px 10px;display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:0 5px 0 #0c1238;transform:skewX(-5deg);transition:transform .08s,box-shadow .08s;min-height:58px;justify-content:center}
.mbtn b{font-size:clamp(15px,4.2vw,20px);font-weight:900}.mbtn small{font-size:12px;color:#c9d5ff;font-weight:700}
.mbtn.main{background:linear-gradient(180deg,#ffb52e,#f0660f);border-color:#fff1a8;grid-column:1/-1;min-height:74px}.mbtn.main b{font-size:clamp(20px,5.6vw,28px);text-shadow:0 2px 0 #7a2a00}.mbtn.main small{color:#fff3d0}
.mbtn:active,.go:active{transform:skewX(-5deg) translateY(4px);box-shadow:0 1px 0 #0c1238}
.tools{display:flex;gap:8px}.tbtn{background:rgba(10,14,50,.7);border:2px solid #4b5fb8;border-radius:999px;padding:8px 14px;font-weight:800;font-size:13px;min-height:40px}
.bar{width:100%;max-width:1000px;display:flex;align-items:center;gap:10px;margin-bottom:8px;flex:0 0 auto}
.bar h2{margin:0;font-size:clamp(18px,5vw,26px);font-weight:900;font-style:italic;text-shadow:0 3px 0 #0c1238}
.back{background:#1a2462;border:2px solid #6f8cff;border-radius:12px;padding:8px 14px;font-weight:800;min-height:44px}
.go{background:linear-gradient(180deg,#ffb52e,#f0660f);border:3px solid #fff1a8;border-radius:16px;padding:12px 26px;font-size:clamp(17px,4.8vw,22px);font-weight:900;box-shadow:0 5px 0 #7a2a00;transform:skewX(-5deg);text-shadow:0 2px 0 #7a2a00;min-height:54px}
.foot{flex:0 0 auto;padding:8px 0 2px;display:flex;justify-content:center;gap:8px;width:100%;max-width:1000px}.foot.row{flex-wrap:wrap}
/* ---- キャラ選び ---- */
.selBody{width:100%;max-width:1000px;display:grid;grid-template-columns:1fr;gap:8px;flex:0 0 auto}
#selGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cc{position:relative;background:linear-gradient(180deg,var(--c),var(--d));border:3px solid rgba(255,255,255,.35);border-radius:14px;padding:0;aspect-ratio:3/4;overflow:hidden;transform:skewX(-4deg);box-shadow:0 4px 0 #0c1238}
.cc canvas{position:absolute;inset:0;width:100%;height:100%}
.cc b{position:absolute;left:0;right:0;bottom:0;padding:3px 2px;background:rgba(8,10,32,.78);font-size:clamp(12px,3.4vw,17px);font-weight:900;text-align:center}
.cc.on{border-color:#fff;box-shadow:0 0 0 3px #ffd23f,0 6px 0 #0c1238;transform:skewX(-4deg) translateY(-3px)}
.cc.on::after{content:"1P";position:absolute;top:4px;left:4px;background:#ff4d5e;border-radius:8px;padding:1px 7px;font-weight:900;font-size:12px}
#selInfo{display:grid;grid-template-columns:118px 1fr;gap:10px;background:rgba(8,10,32,.6);border:2px solid #3d4da3;border-radius:14px;padding:8px 10px;align-items:center}
#selCv{width:118px;height:150px}
.inf h3{margin:0;font-size:22px;font-weight:900;font-style:italic}.inf p{margin:2px 0;font-size:13px;line-height:1.45;color:#dfe8ff}#infTag{color:#ffd23f;font-weight:900}
#infBars{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;font-size:12px;font-weight:800;align-items:center;margin-top:4px}
.bar5{display:flex;gap:3px}.bar5 i{width:100%;max-width:30px;height:8px;border-radius:3px;background:#27306a;transform:skewX(-16deg)}.bar5 i.f{background:linear-gradient(90deg,#ffd23f,#ff8a1f)}
#infSp{font-size:12px!important;color:#aebbf0!important}
#rules{width:100%;max-width:1000px;margin-top:8px;display:grid;gap:6px;flex:0 0 auto}
.rrow{display:grid;grid-template-columns:76px 1fr;gap:8px;align-items:center}.rrow label{font-weight:900;font-size:13px;color:#c9d5ff}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.op{background:#1a2462;border:2px solid #3d4da3;border-radius:10px;padding:7px 11px;font-weight:800;font-size:14px;min-height:40px;min-width:44px}
.op.on{background:#ffd23f;border-color:#fff;color:#2a1a00}
.slot{display:flex;align-items:center;gap:4px;background:#141b4e;border:2px solid var(--pc,#3d4da3);border-radius:10px;padding:3px 6px;font-weight:800;font-size:13px;min-height:40px}
.slot canvas{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.12)}.slot button{background:#2a3a8f;border-radius:8px;padding:5px 8px;min-height:32px;font-weight:800}
/* ---- ステージ選び ---- */
#stgGrid{width:100%;max-width:1000px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;flex:0 0 auto}
.sc{position:relative;border:3px solid rgba(255,255,255,.35);border-radius:14px;overflow:hidden;padding:0;aspect-ratio:16/9;box-shadow:0 4px 0 #0c1238;background:#111}
.sc canvas{position:absolute;inset:0;width:100%;height:100%}.sc b{position:absolute;left:0;bottom:0;right:0;padding:4px 8px;background:linear-gradient(0deg,rgba(8,10,32,.9),rgba(8,10,32,0));text-align:left;font-weight:900;font-size:clamp(13px,3.8vw,18px)}
.sc small{display:block;font-size:11px;color:#dfe8ff;font-weight:700}.sc.on{border-color:#fff;box-shadow:0 0 0 3px #ffd23f,0 6px 0 #0c1238}
.sc.rnd{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#2a3a8f,#7c4ddb);grid-column:1/-1;aspect-ratio:auto;min-height:52px;font-weight:900;font-size:16px}
/* ---- オンライン ---- */
.netBox{width:min(560px,100%);display:grid;gap:10px}.fld{display:grid;gap:4px;font-weight:800;font-size:13px}
input{font:inherit;font-weight:800;color:#fff;background:#0c1238;border:2px solid #3d4da3;border-radius:12px;padding:11px 12px;min-height:46px;width:100%;-webkit-user-select:text;user-select:text}
.codeRow{display:grid;grid-template-columns:1fr auto;gap:8px}.note{margin:0;font-size:12px;color:#aebbf0}
#lobList{display:grid;gap:6px}.lp{display:flex;align-items:center;gap:8px;background:#141b4e;border-left:6px solid var(--pc);border-radius:10px;padding:6px 10px;font-weight:800}.lp canvas{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.12)}
/* ---- 試合の表示 ---- */
#hud{position:absolute;inset:0;pointer-events:none;z-index:10}
#timer{position:absolute;top:max(6px,env(safe-area-inset-top));left:50%;transform:translateX(-50%) skewX(-8deg);background:rgba(8,10,32,.72);border:2px solid #6f8cff;border-radius:10px;padding:2px 14px;font-weight:900;font-style:italic;font-size:22px;min-width:74px;text-align:center}
#timer:empty{display:none}
.ibtn{position:absolute;top:max(6px,env(safe-area-inset-top));right:8px;width:44px;height:44px;border-radius:12px;background:rgba(8,10,32,.72);border:2px solid #6f8cff;font-weight:900;pointer-events:auto}
#panels{position:absolute;left:0;right:0;bottom:6px;display:flex;justify-content:center;gap:clamp(4px,1.6vw,18px);padding:0 6px}
.pn{position:relative;display:flex;align-items:center;gap:4px;background:linear-gradient(180deg,rgba(14,20,60,.86),rgba(6,8,28,.9));border:2.5px solid var(--pc);border-radius:12px;padding:3px 10px 3px 4px;transform:skewX(-7deg);min-width:0;box-shadow:0 3px 0 rgba(0,0,0,.4)}
.pn canvas{width:clamp(34px,9.6vw,54px);height:clamp(34px,9.6vw,54px);border-radius:50%;background:var(--pc);border:2px solid #fff;flex:0 0 auto}
.pn .nm{font-size:10px;font-weight:900;color:#dfe8ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:74px}
.pn .pc{font-weight:900;font-style:italic;font-size:clamp(22px,7vw,40px);line-height:1;text-shadow:2px 0 0 #000,-2px 0 0 #000,0 2px 0 #000,0 -2px 0 #000,0 4px 0 rgba(0,0,0,.5);display:inline-block;transform-origin:50% 80%}
.pn .pc small{font-size:.5em}.pn .stk{display:flex;gap:2px;height:9px}.pn .stk i{width:9px;height:9px;border-radius:50%;background:var(--pc);border:1.5px solid #fff}
.pn.hitA .pc{animation:pcHit .28s}.pn.dead{filter:grayscale(1) brightness(.6)}
@keyframes pcHit{0%{transform:scale(1.55) rotate(-6deg)}40%{transform:scale(.9) translate(3px,-2px)}70%{transform:translate(-2px,1px)}}
#big{position:absolute;left:0;right:0;top:34%;text-align:center;font-weight:900;font-style:italic;font-size:clamp(64px,20vw,170px);line-height:1;color:#fff;-webkit-text-stroke:0;text-shadow:5px 0 0 #10163a,-5px 0 0 #10163a,0 5px 0 #10163a,0 -5px 0 #10163a,0 12px 0 rgba(0,0,0,.4)}
#big span{display:inline-block;animation:bigIn .5s cubic-bezier(.2,1.7,.4,1) both;background:linear-gradient(180deg,#fff 20%,#ffe36b 55%,#ff8a1f);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(4px 0 0 #10163a) drop-shadow(-4px 0 0 #10163a) drop-shadow(0 4px 0 #10163a) drop-shadow(0 -4px 0 #10163a)}
#big span.sm{font-size:.5em}
@keyframes bigIn{from{transform:scale(3);opacity:0}}
#coach{position:absolute;left:50%;top:max(56px,calc(env(safe-area-inset-top) + 56px));transform:translateX(-50%);background:rgba(8,10,32,.82);border:2px solid #ffd23f;border-radius:12px;padding:6px 12px;font-size:13px;font-weight:800;line-height:1.5;max-width:94%;text-align:center}
#coach b{color:#ffd23f}
#coach.two{width:max-content;max-width:96vw;font-size:12px;line-height:1.9}
/* ---- 結果 ---- */
#result{justify-content:center;gap:10px}
.resTop{display:flex;align-items:center;gap:12px;width:min(640px,100%)}#resCv{width:clamp(120px,34vw,200px);height:clamp(150px,42vw,250px);flex:0 0 auto}
#resSub{margin:0;font-weight:900;color:#ffd23f;font-size:clamp(16px,4.6vw,24px);font-style:italic}#resWin{margin:0;font-size:clamp(28px,8.4vw,58px);font-weight:900;font-style:italic;line-height:1.05;text-shadow:0 4px 0 #0c1238}
#resRows{width:min(640px,100%);display:grid;gap:6px}
.rr{display:grid;grid-template-columns:34px 40px 1fr auto;gap:8px;align-items:center;background:#141b4e;border-left:6px solid var(--pc);border-radius:10px;padding:5px 10px;font-weight:800;transform:skewX(-4deg)}
.rr .rk{font-size:22px;font-weight:900;font-style:italic;color:#ffd23f}.rr canvas{width:40px;height:40px;border-radius:50%;background:var(--pc)}.rr small{display:block;color:#aebbf0;font-size:11px}.rr .st{font-size:12px;text-align:right;color:#dfe8ff;line-height:1.35}
/* ---- 重ねる窓 ---- */
.pop{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(4,6,22,.72);z-index:40;padding:12px;touch-action:pan-y}.pop.on{display:flex}
.card{background:linear-gradient(180deg,#1b2670,#0e1442);border:3px solid #6f8cff;border-radius:18px;padding:14px;width:min(420px,100%);max-height:100%;overflow:auto;display:grid;gap:8px}.card.wide{width:min(640px,100%)}
.card h2{margin:0;text-align:center;font-style:italic;font-weight:900}
.tabs{display:flex;gap:4px;flex-wrap:wrap}.tabs button{flex:1;background:#141b4e;border:2px solid #3d4da3;border-radius:10px;padding:8px 4px;font-weight:800;font-size:13px;min-height:40px}.tabs button.on{background:#ffd23f;color:#2a1a00;border-color:#fff}
#helpBody{font-size:14px;line-height:1.6;display:grid;gap:4px}#helpBody .hl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center}
kbd{display:inline-block;background:#fff;color:#10163a;border-radius:6px;padding:0 7px;font:900 13px/1.7 inherit;box-shadow:0 2px 0 #8a93c7;white-space:nowrap}
#toast{position:absolute;left:50%;bottom:20%;transform:translateX(-50%);background:rgba(8,10,32,.9);border:2px solid #6f8cff;border-radius:12px;padding:8px 14px;font-weight:800;z-index:60;opacity:0;transition:opacity .2s;pointer-events:none;max-width:90%}#toast.on{opacity:1}
/* ---- 操作盤（タッチ） ---- */
#pad{position:relative;flex:0 0 auto;height:min(270px,36vh);background:linear-gradient(180deg,#141b4e,#090c26);border-top:3px solid #3d4da3;z-index:30;touch-action:none}
#stickZone{position:absolute;left:0;top:0;bottom:0;width:46%}
#stick{position:absolute;left:50%;top:50%;width:124px;height:124px;margin:-62px 0 0 -62px;border-radius:50%;background:radial-gradient(circle,rgba(111,140,255,.25),rgba(111,140,255,.08));border:3px solid rgba(111,140,255,.7)}
#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,#9fb3ff 60%,#4b5fb8);box-shadow:0 4px 0 rgba(0,0,0,.4)}
.padhint{position:absolute;left:0;right:0;bottom:4px;text-align:center;font-size:10px;color:#7f8fd0;font-weight:800}
#btns{position:absolute;right:0;top:0;bottom:0;width:54%}
.pb{position:absolute;border-radius:50%;font-weight:900;font-size:11.5px;line-height:1.1;color:#fff;border:3px solid rgba(255,255,255,.75);box-shadow:0 4px 0 rgba(0,0,0,.45);touch-action:none}
.pb.dn{transform:translateY(3px) scale(.94);box-shadow:0 1px 0 rgba(0,0,0,.45);filter:brightness(1.3)}
.pa{width:78px;height:78px;right:62px;bottom:74px;background:radial-gradient(circle at 35% 30%,#ff8a8a,#e0283c);font-size:13px}
.pj{width:66px;height:66px;right:6px;bottom:8px;background:radial-gradient(circle at 35% 30%,#8fe39a,#1f9e55)}
.pbb{width:64px;height:64px;right:4px;bottom:124px;background:radial-gradient(circle at 35% 30%,#8fc4ff,#2463e0)}
.ps{width:62px;height:62px;right:78px;bottom:160px;background:radial-gradient(circle at 35% 30%,#ffd98a,#f08a12)}
.pg{width:62px;height:62px;right:80px;bottom:4px;background:radial-gradient(circle at 35% 30%,#d6b3ff,#7c4ddb)}
.pz{width:50px;height:50px;right:150px;bottom:104px;background:radial-gradient(circle at 35% 30%,#c9d5ff,#5a6690);font-size:10.5px}
/* 横長：操作盤を試合の上に重ねる */
@media (orientation:landscape){
  #pad{position:absolute;left:0;right:0;bottom:0;height:min(270px,70vh);background:none;border:0;pointer-events:none}
  #stickZone,#btns{pointer-events:auto}#stickZone{width:34%}#btns{width:36%}.pb{opacity:.82}#stick{opacity:.8}
  body.touch #panels{bottom:auto;top:max(6px,env(safe-area-inset-top));justify-content:flex-start;padding-left:8px;transform:scale(.78);transform-origin:0 0}
  body.touch #timer{top:auto;bottom:6px}
  .selBody{grid-template-columns:1.2fr 1fr}#selGrid{align-content:start}.cc{aspect-ratio:1/1.05}
  #stgGrid{grid-template-columns:repeat(4,1fr)}
  #rules{grid-template-columns:1fr 1fr;gap:6px 18px}
  .menu{grid-template-columns:repeat(4,1fr);width:min(900px,100%)}.mbtn.main{grid-column:auto;min-height:58px}.mbtn.main b{font-size:19px}
}
@media (orientation:landscape) and (max-height:520px){.logo .l1{font-size:44px}.logo .l2{font-size:54px}#title{gap:8px}.cc{aspect-ratio:1/.8}#selCv{height:110px}.sub{display:none}}
@media (max-width:380px){.rrow{grid-template-columns:62px 1fr}.op{padding:7px 9px;font-size:13px}.pn{padding-right:6px}}

.foot{position:sticky;bottom:0;z-index:2}
@media (max-width:600px){#panels.n4{gap:3px;padding:0 3px}#panels.n4 .pn,#panels.n3 .pn{padding:2px 6px 2px 3px;transform:skewX(-5deg)}#panels.n4 .pn canvas{width:28px;height:28px}#panels.n4 .pc{font-size:clamp(17px,5.3vw,26px)}#panels.n4 .nm{max-width:44px;font-size:9px}#panels.n4 .stk i{width:7px;height:7px}}

/* 観戦の一覧 */
#watchList{display:grid;gap:6px;margin-top:6px}.wr{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#141b4e;color:#fff;border:2px solid #2b3a9a;border-radius:10px;padding:8px 12px;font-weight:800;font-size:13px;cursor:pointer}.wr b{background:#ffd23f;color:#1a1440;border-radius:8px;padding:3px 10px}

/* 大きい画面（PC・横持ちのタブレット）：えらぶ画面と結果の中身を 画面に合わせて大きく */
@media (min-width:1200px) and (min-height:780px){
  #stg #stgGrid,#stg .foot,#result .resTop,#result #resRows,#result .foot{zoom:1.32}
  #sel,#stg{justify-content:flex-start;gap:14px}
}
@media (min-width:1500px) and (min-height:900px){
  #sel .selBody,#sel #rules,#sel .foot{zoom:1.25} #stg #stgGrid,#stg .foot,#result .resTop,#result #resRows,#result .foot{zoom:1.7}
}

/* 大きい画面：えらぶ画面と結果の 下の空きを うめる物（選んだキャラの大きな姿と技の見本・ステージの大きな見本・順位の台）。絵が届いたら 背景と板に置きかわる */
.fill{display:none}
@media (min-width:1200px) and (min-height:780px){
  #selShow.fill{display:grid;grid-template-columns:minmax(260px,1fr) 2fr;gap:18px;flex:1 1 auto;min-height:0;width:min(1100px,100%);align-items:stretch;background:rgba(8,12,44,.55);border:2px solid #2c3a8a;border-radius:18px;padding:10px 16px}
  #selBig{width:100%;height:100%;min-height:160px}
  #selMoves{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;align-content:center}
  #selMoves .mv{background:#141b4e;border:2px solid #3d4da3;border-radius:12px;padding:6px 8px;text-align:center;font-weight:800;font-size:13px}#selMoves .mv.on{border-color:#ffd23f;background:#23307a}#selMoves .mv small{display:block;color:#9fb3ff;font-size:11px}
  #stgBig.fill{display:block;flex:1 1 auto;min-height:0;aspect-ratio:16/9;max-width:min(1000px,96%);border:3px solid #6f8cff;border-radius:18px;box-shadow:0 6px 0 #0c1238}
  #resPod.fill{display:flex;align-items:flex-end;justify-content:center;gap:10px;height:230px;width:min(760px,100%)}
  #resPod .pod{display:flex;flex-direction:column;align-items:center;width:150px}#resPod .pod canvas{width:130px;height:140px}#resPod .pod i{display:block;width:100%;border-radius:10px 10px 0 0;background:linear-gradient(180deg,var(--pc),#141b4e);font-style:normal;font-weight:900;font-size:26px;text-align:center;color:#fff;text-shadow:0 2px 0 #0c1238}
  #result .resTop #resCv{display:none}
}

/* 11/11：結果は どの大きさでも 順位の台（勝った人の頭が切れていた 1 枚絵をやめる）。たて持ちのタブレットにも 下の見本を出す。スマホの最初の操作の帯は 試合の下がわへ */
#result .resTop #resCv{display:none}
#resPod.fill{display:flex;align-items:flex-end;justify-content:center;gap:8px;height:170px;width:min(560px,100%)}
#resPod .pod{display:flex;flex-direction:column;align-items:center;width:24%}#resPod .pod canvas{width:100%;height:120px}#resPod .pod i{display:block;width:100%;border-radius:10px 10px 0 0;background:linear-gradient(180deg,var(--pc),#141b4e);font-style:normal;font-weight:900;font-size:22px;text-align:center;color:#fff;text-shadow:0 2px 0 #0c1238}
@media (min-width:1200px) and (min-height:780px){#resPod.fill{height:230px;width:min(760px,100%)}#resPod .pod{width:150px}#resPod .pod canvas{width:130px;height:150px}#resPod .pod i{font-size:26px}}
@media (min-width:700px) and (min-height:900px) and (orientation:portrait){
  #selShow.fill{display:grid;grid-template-columns:1fr 1.5fr;gap:12px;flex:0 0 auto;height:118px;overflow:hidden;width:100%;align-items:stretch;background:rgba(8,12,44,.55);border:2px solid #2c3a8a;border-radius:18px;padding:6px 10px}
  #selBig{width:100%;height:100%;min-height:0}
  #selMoves{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;align-content:center}
  #selMoves .mv{background:#141b4e;border:2px solid #3d4da3;border-radius:10px;padding:2px 4px;text-align:center;font-weight:800;font-size:11px;line-height:1.25}#selMoves .mv.on{border-color:#ffd23f;background:#23307a}#selMoves .mv small{display:block;color:#9fb3ff;font-size:10px}
  #stgBig.fill{display:block;flex:0 1 auto;width:96%;aspect-ratio:16/9;border:3px solid #6f8cff;border-radius:18px;box-shadow:0 6px 0 #0c1238}
}
body.touch #coach{top:auto;bottom:74px}

@media (min-width:700px) and (min-height:900px) and (orientation:portrait){
  #result{gap:18px}#resPod.fill{height:330px;width:min(700px,96%)}#resPod .pod canvas{height:230px}#resPod .pod i{font-size:30px;min-height:40px}
  #result .resTop,#result #resRows,#result .foot{zoom:1.35}
}
/* ---- 11/11：スマホのたて持ち（キャラ選びを 1 画面に・結果の数の字・はじめの操作の帯は 上へ） ---- */
@media (max-width:480px) and (orientation:portrait){
  #sel .cc{aspect-ratio:1/1}#selInfo{grid-template-columns:84px 1fr;padding:6px 8px;gap:8px}#selCv{width:84px;height:104px}
  #sel .inf h3{font-size:18px}#sel .inf p{font-size:12px;line-height:1.35;margin:1px 0}#infBars{font-size:11px;gap:1px 8px;margin-top:2px}#infSp{font-size:11px!important}
  #rules{gap:4px;margin-top:6px}#sel .op{padding:5px 9px;font-size:13px}#sel .foot{padding-top:6px}
  .rr{grid-template-columns:30px 40px 1fr auto;padding:6px 8px}.rr .st{font-size:13.5px;line-height:1.4}.rr small{font-size:12px}
  body.touch #coach{top:max(8px,env(safe-area-inset-top));bottom:auto;left:8px;transform:none;max-width:calc(100% - 62px);font-size:12px;line-height:1.45;text-align:left;padding:5px 10px}
}
@media (max-width:380px) and (orientation:portrait){#selCv{height:84px}#sel .cc{aspect-ratio:1/.8}#sel .op{min-height:38px;padding:4px 8px}#sel .bar{padding-bottom:2px}}
.credit{margin:6px 0 0;font-size:12px;font-weight:700;color:#aebbf0;opacity:.9;text-align:center}
#coach.tut{font-size:17px;line-height:1.6;padding:8px 16px;max-width:92%}body.touch #coach.tut{font-size:14px}

/* 11/12：勝った人の 勝ちの立ち絵（届いた時だけ body.pwin）。全身が 入るように 縮める。台の上の 小さい人は そのまま */
#resBig{display:none}
body.pwin #result .resTop #resCv{display:block;width:clamp(90px,24vw,170px);height:clamp(120px,15vh,170px)}
#result .resTop>div{flex:1 1 auto;min-width:0}#resWin{word-break:keep-all}
@media (orientation:landscape){
  body.pwin #result .resTop #resCv{display:none}
  body.pwin #resBig{display:block;position:absolute;left:1vw;bottom:0;width:clamp(150px,calc(50vw - 440px),460px);aspect-ratio:.62;max-height:86vh;pointer-events:none;z-index:0}
  #result>*:not(#resBig){position:relative;z-index:1}
}