/* お客様のスマホ（index.html）。★白組の文字色は地の色ごとに確かめること（2026-09-27 に帯の文字が薄くなった） */
body{background:var(--night);color:var(--cream);overscroll-behavior:none;touch-action:manipulation;user-select:none;-webkit-user-select:none}
a{color:inherit}
.view{min-height:100dvh;display:flex;flex-direction:column;padding:max(14px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))}
body.t-red{background:var(--red);color:#fff}
body.t-white{background:var(--white);color:var(--ink)}
h1{font-size:25px;line-height:1.35;margin:8px 0 6px;font-weight:800}
.apptitle{font-size:34px;line-height:1.2;margin:10px 0 8px}
.apptitle small{display:block;font-size:15px;font-weight:700;opacity:.8;letter-spacing:.08em}
.sub{opacity:.85;font-size:15px;line-height:1.7;margin:0 0 14px}
.teams{display:grid;gap:14px;margin:auto 0}
.teams button{border-radius:22px;padding:26px 16px;font-size:26px;font-weight:800;display:flex;align-items:center;justify-content:space-between}
.teams .r{background:var(--red);color:#fff;box-shadow:0 6px 0 var(--red-deep)}
.teams .w{background:var(--white);color:var(--ink);box-shadow:0 6px 0 #d8cfbd}
.teams small{font-size:15px;font-weight:600;opacity:.85}
.teams em.cnt{font-style:normal;font-size:16px;font-weight:700;opacity:.85;margin-left:6px}
.teams button:disabled{opacity:.38;box-shadow:none}
.fine{font-size:12.5px;opacity:.75;line-height:1.7;margin-top:14px}
.center{margin:auto 0;text-align:center}
.big{font-size:60px;font-weight:900;letter-spacing:.04em;line-height:1.1}
.mid{font-size:19px;font-weight:700;line-height:1.6}
/* 受付（名前・キャラ・枕） */
.setup h2{font-size:15px;margin:16px 0 8px;opacity:.9}
.chars{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.chars button{background:rgba(255,255,255,.12);border-radius:12px;padding:4px 2px 2px;border:3px solid transparent;position:relative;color:inherit}
body.t-white .chars button,body.t-white .opt,body.t-white .eff,body.t-white .lv{background:rgba(43,41,67,.06)}
.chars img{width:100%;height:78px;object-fit:contain;display:block}
body.t-white .chars img{transform:scaleX(-1)}
.chars button.on{border-color:var(--marker);background:rgba(255,212,59,.25)}
.chars button:disabled{opacity:.35}
.chars button:disabled::after{content:"使用中";position:absolute;left:0;right:0;bottom:4px;font-size:11px;font-weight:800}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.opt{background:rgba(255,255,255,.12);border-radius:14px;padding:6px 4px;color:inherit;font-size:12.5px;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:2px;border:3px solid transparent}
.opt img{width:100%;height:54px;object-fit:contain}
.opt.on,.eff.on,.lv.on{border-color:var(--marker);background:rgba(255,212,59,.25)}
body.t-white .opt.on,body.t-white .eff.on,body.t-white .lv.on{background:rgba(255,212,59,.35)}
.effs{display:grid;gap:7px}
.eff{background:rgba(255,255,255,.12);border-radius:14px;padding:9px 13px;color:inherit;text-align:left;border:3px solid transparent}
.eff b{font-size:16px}.eff span{display:block;font-size:13px;opacity:.85;margin-top:1px}
input[type=text]{width:100%;font:inherit;font-size:18px;padding:12px 14px;border-radius:12px;border:2px solid rgba(0,0,0,.08);background:#fff;color:var(--ink)}
input[type=text]::placeholder{color:#9a9184;font-size:15px}
.row{display:flex;gap:10px;margin-top:16px}
.row button{flex:1;border-radius:999px;padding:16px 10px;font-weight:800;font-size:17px}
.ghost{background:transparent;color:inherit;border:2px solid currentColor !important;opacity:.9}
.solid{background:var(--marker);color:var(--ink);box-shadow:0 5px 0 #caa21e;border-radius:999px;padding:16px 10px;font-weight:800;font-size:17px;width:100%}
.solid.lg{font-size:26px;padding:18px 10px;letter-spacing:.1em}
.solid:disabled{opacity:.5;box-shadow:none}
.msg{min-height:1.4em;font-size:14px;font-weight:700;color:var(--marker);text-align:center;margin-top:6px}
body.t-white .msg{color:#a4541a}
/* 自分（キャラ＋持っている枕） */
.me{position:relative;width:128px;height:180px;margin:4px auto 2px}
.me .ch{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom}
.me .pl{position:absolute;width:40%;left:44%;top:40%;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
body.t-white .me{transform:scaleX(-1)}
.who{font-size:30px;font-weight:900;text-align:center;line-height:1.2}
.pinfo{font-size:14px;opacity:.9;text-align:center}
.panel{margin:14px 0 0;padding:14px;border-radius:18px;background:rgba(0,0,0,.18);text-align:center}
body.t-white .panel{background:rgba(43,41,67,.07)}
.panel h2{font-size:14px;margin:0 0 8px;opacity:.9;font-weight:700}
.panel .big{font-size:84px}
.note{font-size:13px;opacity:.85;line-height:1.6;margin:10px 0 0}
.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.lv{background:rgba(255,255,255,.12);border-radius:14px;padding:10px 4px;color:inherit;border:3px solid transparent;display:flex;flex-direction:column;gap:2px}
.lv b{font-size:17px}.lv span{font-size:11.5px;opacity:.85;line-height:1.35}
.links{margin-top:auto;padding-top:18px}
.links button{padding:10px 8px;font-size:14px}
.mystats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.mystats div{background:rgba(0,0,0,.18);border-radius:14px;padding:8px 4px;text-align:center}
body.t-white .mystats div{background:rgba(43,41,67,.08)}
.mystats b{display:block;font-size:30px;font-weight:900;line-height:1.1;font-variant-numeric:tabular-nums}
.mystats span{font-size:12.5px;opacity:.85}
.mystats.small{margin:10px 0 0}
.mystats.small b{font-size:20px}
.mystats .cap{grid-column:1/-1;background:none !important;padding:0;font-size:13px;opacity:.85}
.banner{margin:10px 0 0;padding:10px 14px;border-radius:14px;font-weight:800;font-size:16px;line-height:1.5;background:rgba(0,0,0,.18);text-align:center}
body.t-white .banner{background:rgba(43,41,67,.08)}
.banner.teacher,body.t-white .banner.teacher{background:#1b1a2e;color:var(--marker)}
.banner.good,body.t-white .banner.good{background:var(--marker);color:var(--ink)}
/* 試合 */
.bar{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:18px;gap:10px}
.bar .s{font-size:28px}
.bar .time{font-size:15px;opacity:.85;font-weight:700}
.lanewrap{margin:auto 0 0;padding-top:10px}
.lanecap{display:flex;justify-content:space-between;font-size:12.5px;opacity:.85;margin-bottom:4px}
.lane{position:relative;height:74px;border-radius:16px;background:rgba(0,0,0,.2);overflow:hidden}
body.t-white .lane{background:rgba(43,41,67,.1)}
.lane .dot{position:absolute;top:50%;transform:translate(-50%,-50%);border-radius:50%}
.lane .me2{width:46px;height:46px;background:var(--marker);box-shadow:0 0 0 4px rgba(255,255,255,.5);display:grid;place-content:center;font-weight:900;color:var(--ink);font-size:13px;z-index:3}
.lane .opp{width:22px;height:22px;background:rgba(255,255,255,.75);z-index:2}
body.t-red .lane .opp{background:#fff}
body.t-white .lane .opp{background:var(--red)}
.lane .inc{width:54px;height:54px;border:4px solid #ff3b30;background:rgba(255,59,48,.18);z-index:4}
body.t-white .lane .inc{border-color:#2b2943;background:rgba(43,41,67,.16)}
.lanenote{font-size:12.5px;opacity:.85;text-align:center;margin-top:6px;line-height:1.5}
.ctrl{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:10px;margin-top:14px}
.ctrl button{height:min(30vw,128px);border-radius:24px;font-size:22px;font-weight:900;background:rgba(255,255,255,.18);color:inherit;box-shadow:0 6px 0 rgba(0,0,0,.2)}
body.t-white .ctrl button{background:rgba(43,41,67,.1)}
.ctrl button.hold{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.2)}
.ctrl #bt{position:relative;background:var(--cream);color:var(--red);font-size:26px;overflow:hidden}
body.t-white .ctrl #bt{background:var(--night);color:var(--cream)}
.ctrl #bt .cd{position:absolute;inset:0;background:conic-gradient(rgba(0,0,0,.35) var(--p,0%),transparent 0);pointer-events:none}
.plus{position:fixed;font-size:30px;font-weight:900;pointer-events:none;background:rgba(27,26,46,.88);padding:2px 12px;border-radius:12px;animation:up .9s ease-out forwards;z-index:9}
@keyframes up{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-110px)}}
.sleep{position:fixed;inset:0;background:rgba(20,18,40,.94);color:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:5;text-align:center}
.sleep .z{font-size:60px;font-weight:900;letter-spacing:.3em;animation:zz 1.2s ease-in-out infinite}
@keyframes zz{50%{transform:translateY(-10px);opacity:.6}}
.net{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);font-size:12px;background:rgba(0,0,0,.55);color:#fff;padding:4px 10px;border-radius:999px;z-index:20}