/* ═══ Versus Mode（2026-10-05） ═══
   本体の紙面（白・青・赤）とは別の「夜の競技場」。対戦の帯・ロビー・表彰だけを暗い面にして、
   問題を打つ欄は本体と同じ見た目のまま残す（打ち心地を変えない）。
   🚨 演出は pointer-events:none の層に置く。問題の欄の位置を動かす物は入れない。
   TARGETLET と GRAMMARLET で同じファイル。 */
.vs-root, .vs-picker, .vs-toast, .vs-fly, .vs-entry{
  --vs-bg:#0A0E1F; --vs-bg2:#151C3A; --vs-edge:#2A3466; --vs-ink:#F4F6FF; --vs-dim:#97A1C6;
  --vs-rope:#F5C04A; --vs-rope2:#B9852A; --vs-me:#33D6FF; --vs-foe:#FF4D6D; --vs-lime:#B6F23C;
}
.vs-root [hidden]{display:none !important}
.vs-lede{font-size:var(--fs-ja); font-weight:600; margin:0 0 14px}
.vs-codelabel{font-family:var(--mono); font-size:calc(12px * var(--proj)); color:var(--ink-soft)}

/* 入口のボタン（先生のロビーの右上・Live の一覧） */
.vs-entry{
  float:right; margin:0 0 8px 12px; padding:9px 16px 9px 14px; border:0; border-radius:4px; cursor:pointer;
  font:900 italic calc(14px * var(--proj))/1 var(--disp); letter-spacing:.08em; color:#fff;
  background:linear-gradient(104deg,var(--vs-bg) 0 58%,var(--vs-foe) 58% 100%);
  box-shadow:3px 3px 0 var(--vs-rope);
}
.vs-entry:hover{transform:translate(1px,1px); box-shadow:2px 2px 0 var(--vs-rope)}
.vs-entry:focus-visible{outline:3px solid var(--vs-me); outline-offset:3px}
.btn.vs-btn{background:var(--vs-foe); color:#fff}

/* ── 人のしるし ── */
.vs-av{
  position:relative; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 30% 25%,#2B3670,#131A38 70%); border:3px solid var(--vs-foe);
}
.vs-face{font-size:24px; line-height:1}
.vs-av.off{opacity:.38; filter:grayscale(1)}
.vs-score{
  position:absolute; right:-7px; bottom:-7px; min-width:22px; height:22px; padding:0 5px; border-radius:11px;
  display:grid; place-items:center; background:#fff; color:#0A0E1F; font:900 13px/1 var(--disp);
  box-shadow:0 0 0 2px var(--vs-bg);
}
.vs-streak{position:absolute; left:-10px; top:-9px; font:900 11px/1 var(--disp); color:#FFD9A0; white-space:nowrap}
.vs-hit{position:absolute; right:-8px; top:-9px; font-size:15px}
.vs-av.fire{box-shadow:0 0 0 3px rgba(255,160,40,.35), 0 0 18px 2px rgba(255,120,30,.7); animation:vsFire 1s ease-in-out infinite alternate}

/* ── 対戦の帯（綱引き） ── */
.vs-arena{
  position:sticky; top:0; z-index:5; overflow:hidden; padding:8px 12px 9px; border-radius:10px; color:var(--vs-ink);
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 10px,transparent 10px 20px),
    linear-gradient(180deg,var(--vs-bg2),var(--vs-bg));
  border:1px solid var(--vs-edge); border-top:4px solid var(--vs-rope);
  box-shadow:0 14px 26px -20px rgba(6,10,30,.9);
}
.vs-top{display:flex; align-items:center; gap:10px; min-height:34px}
.vs-goal{font:900 italic 13px/1 var(--disp); letter-spacing:.08em; color:var(--vs-rope)}
.vs-clock{font:800 15px/1 var(--mono); padding:4px 8px; border-radius:4px; background:rgba(255,255,255,.08)}
.vs-clock.hot{background:var(--vs-foe); animation:vsBlink .5s steps(2) infinite}
.vs-tray{margin-left:auto; display:flex; gap:6px}
.vs-ball{
  width:36px; height:36px; border-radius:50%; border:2px dashed rgba(255,255,255,.25); background:transparent;
  font-size:22px; line-height:1; padding:0; cursor:grab; touch-action:none;
}
.vs-ball:not(.none){border:0; background:rgba(255,160,40,.16); animation:vsBob 1.1s ease-in-out infinite}
.vs-rope{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; margin:6px 0 8px}
.vs-side{display:flex; gap:8px}
.vs-who{display:flex; flex-direction:column; align-items:center; gap:5px; width:50px}
.vs-nick{font:700 10px/1 var(--jp); color:var(--vs-dim); max-width:54px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.vs-side.mine .vs-av{border-color:var(--vs-me)}
.vs-side.mine .vs-nick{color:var(--vs-me)}
.vs-side.foes[data-n="3"]{gap:2px}
.vs-side.foes[data-n="3"] .vs-who{width:42px}
.vs-side.foes[data-n="3"] .vs-av{width:38px; height:38px}
.vs-side.foes[data-n="3"] .vs-face{font-size:20px}
.vs-track{position:relative; height:44px; min-width:60px}
.vs-line{
  position:absolute; left:-4px; right:-4px; top:50%; height:9px; margin-top:-5px; border-radius:5px;
  background:repeating-linear-gradient(118deg,var(--vs-rope) 0 7px,var(--vs-rope2) 7px 14px);
  box-shadow:0 2px 0 rgba(0,0,0,.45);
}
.vs-mid{position:absolute; left:50%; top:3px; bottom:3px; width:2px; margin-left:-1px; background:rgba(255,255,255,.4)}
.vs-knot{
  position:absolute; top:50%; width:24px; height:24px; margin:-12px 0 0 -12px; border-radius:50%;
  background:#fff; border:5px solid var(--vs-rope); transition:left .5s cubic-bezier(.2,1.5,.4,1), border-color .2s, box-shadow .2s;
}
.vs-knot[data-lead="me"]{border-color:var(--vs-me); box-shadow:0 0 16px 2px rgba(51,214,255,.8)}
.vs-knot[data-lead="foe"]{border-color:var(--vs-foe); box-shadow:0 0 16px 2px rgba(255,77,109,.8)}
.vs-timer{height:4px; border-radius:2px; background:rgba(255,255,255,.12); overflow:hidden}
.vs-timer i{display:block; height:100%; width:100%; background:linear-gradient(90deg,var(--vs-foe),var(--vs-rope))}
.vs-flash{position:absolute; inset:0; pointer-events:none; opacity:0}
.tug-me .vs-line{animation:vsTugL .5s cubic-bezier(.2,.9,.3,1)}
.tug-foe .vs-line{animation:vsTugR .5s cubic-bezier(.2,.9,.3,1)}
.tug-me .vs-flash{background:radial-gradient(120% 160% at 0% 50%,rgba(51,214,255,.75),transparent 60%); animation:vsFlash .55s ease-out}
.tug-foe .vs-flash{background:radial-gradient(120% 160% at 100% 50%,rgba(255,77,109,.7),transparent 60%); animation:vsFlash .55s ease-out}
.vs-flash.hit{background:rgba(255,77,109,.85); animation:vsFlash .7s ease-out}
/* だれかがミスして0に戻った時。綱が端から端へ振れるので、ここだけ強くする */
.slam-me .vs-knot, .slam-foe .vs-knot{transition:left .85s cubic-bezier(.12,1.9,.3,1), border-color .2s, box-shadow .2s}
.slam-me .vs-line{animation:vsSlamL .85s cubic-bezier(.2,.9,.3,1)}
.slam-foe .vs-line{animation:vsSlamR .85s cubic-bezier(.2,.9,.3,1)}
.slam-me .vs-flash{background:linear-gradient(90deg,rgba(51,214,255,.95),rgba(182,242,60,.55) 45%,transparent 85%); animation:vsFlash 1s ease-out}
.slam-foe .vs-flash{background:linear-gradient(270deg,rgba(255,77,109,.95),rgba(255,77,109,.4) 45%,transparent 85%); animation:vsFlash 1s ease-out}
.slam-me .vs-side.mine .vs-av{animation:vsCheer .85s ease-out}
.slam-foe .vs-side.mine .vs-av{animation:vsReel .6s ease-out}
.vs-pile{
  display:flex; align-items:center; gap:10px; margin-top:8px; padding:6px 8px 6px 12px; border-radius:6px;
  background:rgba(255,160,40,.16); border:1px solid rgba(255,160,40,.55); font:800 13px/1.2 var(--jp);
}
.vs-vote{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:8px; padding:7px 8px 7px 12px; border-radius:6px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.4); font:800 13px/1.35 var(--jp);
}
.vs-vote span{flex:1 1 180px}
.vs-votebtn{padding:8px 12px; border:0; border-radius:999px; background:#fff; color:#0A0E1F; font:900 13px/1 var(--jp); cursor:pointer}
.vs-votebtn.out{background:var(--vs-foe); color:#fff}
.vs-pilebtn{margin-left:auto; padding:7px 12px; border:0; border-radius:999px; background:#FF9F1C; color:#1A1000; font:900 13px/1 var(--jp); cursor:pointer}

/* ── 問題 ── */
.vs-q{padding-top:16px}
.vs-no{font:700 calc(12px * var(--proj))/1 var(--mono); color:var(--ink-soft); letter-spacing:.08em; margin-bottom:8px}
.vs-veil{display:inline-block; margin:0 0 10px; padding:6px 12px; border-radius:4px; font:800 calc(13px * var(--proj))/1.3 var(--jp); background:#2B1234; color:#FFD3DE}
.vs-veil.v2{background:#0A0E1F; color:#fff; box-shadow:inset 0 0 0 2px var(--vs-foe)}
.vs-nolen .blank input{border-bottom-style:dashed}
.vs-ans{font-family:var(--en); font-size:1.2em; color:var(--ink); letter-spacing:.02em}

/* ── ロビー ── */
.vs-seats{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:10px 0 18px}
.vs-seat{
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 6px 12px; border-radius:10px; min-width:0;
  background:linear-gradient(180deg,var(--vs-bg2),var(--vs-bg)); border:1px solid var(--vs-edge); color:var(--vs-ink);
}
.vs-seat.me{border-color:var(--vs-me); box-shadow:0 0 0 2px rgba(51,214,255,.25)}
.vs-seat.me .vs-av{border-color:var(--vs-me)}
.vs-seat.empty{background:transparent; border:2px dashed var(--rule-strong); color:var(--ink-soft); justify-content:center; min-height:104px}
.vs-seat.off{opacity:.55}
.vs-name{font:800 calc(13px * var(--proj))/1.2 var(--jp); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.vs-tag{font:800 10px/1 var(--jp); padding:3px 7px; border-radius:999px; background:var(--vs-rope); color:#1A1200}
.vs-cfg .cfgrow{margin-bottom:8px}
.vs-rule{line-height:1.7; margin-top:4px}
.vs-select{font:inherit; padding:7px 10px}

/* ── お邪魔ボールの相手えらび ── */
.vs-picker{position:fixed; inset:0; z-index:95; background:rgba(8,10,24,.78); touch-action:none; -webkit-user-select:none; user-select:none}
.vs-ask{position:absolute; left:12px; right:12px; top:14px; text-align:center; color:#fff; font:800 15px/1.4 var(--jp)}
.vs-targets{position:absolute; left:0; right:0; top:62px; display:flex; justify-content:center; align-items:flex-start; gap:16px}
.vs-target{
  width:96px; padding:12px 6px 10px; border-radius:50% 50% 22px 22px; border:3px solid var(--vs-foe); cursor:pointer;
  background:radial-gradient(circle at 30% 20%,#2B3670,#131A38 75%); color:#fff; transition:transform .12s, box-shadow .12s;
}
.vs-target:nth-child(2):not(:last-child){margin-top:26px}
.vs-target .vs-face{display:block; font-size:42px}
.vs-tname{display:block; margin-top:6px; font:800 12px/1.2 var(--jp); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.vs-target.aim{transform:scale(1.14); box-shadow:0 0 0 7px rgba(255,77,109,.4)}
.vs-target.full{opacity:.35}
.vs-drag{position:fixed; z-index:96; font-size:46px; line-height:1; transform:translate(-50%,-50%); pointer-events:none}
.vs-drag.rest{left:50%; top:300px; animation:vsBob 1s ease-in-out infinite}

/* ── 重ねるだけの演出（#fx の中） ── */
.vs-toast{
  position:absolute; left:50%; top:132px; transform:translateX(-50%); max-width:92vw; padding:9px 18px; border-radius:999px;
  font:900 15px/1.3 var(--jp); color:#fff; background:var(--vs-bg); border:2px solid var(--vs-rope); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; animation:vsToast 2.1s ease forwards;
}
.vs-toast.big{font-size:20px; border-color:#FF9F1C; box-shadow:0 0 24px rgba(255,140,30,.7)}
.vs-toast.ball{top:176px; border-color:#FF9F1C}
.vs-toast.hitme{top:176px; background:var(--vs-foe); border-color:#fff}
.vs-toast.swing{border-color:var(--vs-me); box-shadow:0 0 28px rgba(51,214,255,.85); color:#0A0E1F; background:linear-gradient(90deg,var(--vs-me),var(--vs-lime))}
.vs-toast.big{white-space:normal; text-align:center; line-height:1.35}
.vs-fly{position:absolute; font-size:28px; line-height:1; transform:translate(-50%,-50%); transition:left .5s cubic-bezier(.3,0,.2,1), top .5s cubic-bezier(.3,-.7,.6,1), transform .5s linear}
.vs-fly.go{transform:translate(-50%,-50%) rotate(540deg) scale(1.3)}

/* ── 結果 ── */
.vs-hero{
  position:relative; overflow:hidden; text-align:center; padding:22px 12px 20px; border-radius:12px; color:var(--vs-ink);
  background:linear-gradient(180deg,var(--vs-bg2),var(--vs-bg)); border:1px solid var(--vs-edge); border-top:4px solid var(--vs-rope);
}
.vs-rays{
  position:absolute; left:50%; top:46%; width:160vmax; height:160vmax; margin:-80vmax 0 0 -80vmax; pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(245,192,74,.16) 0 9deg,transparent 9deg 18deg); animation:vsSpin 22s linear infinite;
}
.vs-hero.mine .vs-rays{background:repeating-conic-gradient(from 0deg,rgba(51,214,255,.2) 0 9deg,transparent 9deg 18deg)}
.vs-crown{position:relative; font-size:34px; line-height:1; animation:vsDrop .7s cubic-bezier(.2,1.6,.4,1) both}
.vs-champ{position:relative; font-size:84px; line-height:1.05; animation:vsHop 1s ease-in-out infinite alternate; filter:drop-shadow(0 10px 14px rgba(0,0,0,.5))}
.vs-wintitle{position:relative; font:900 italic 34px/1 var(--disp); letter-spacing:.14em; color:var(--vs-rope); margin-top:6px}
.vs-winname{position:relative; font:800 20px/1.3 var(--jp); margin-top:6px}
.vs-podium{display:flex; justify-content:center; align-items:flex-end; gap:10px; margin:18px 0 6px}
.vs-step{display:flex; flex-direction:column; align-items:center; gap:6px; width:84px; min-width:0}
.vs-step .vs-av{background:radial-gradient(circle at 30% 25%,#2B3670,#131A38 70%); border-color:var(--rule-strong)}
.vs-step.me .vs-av{border-color:var(--vs-me)}
.vs-pname{font:800 calc(12px * var(--proj))/1.2 var(--jp); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.vs-block{width:100%; border-radius:6px 6px 0 0; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:4px; padding-top:8px; color:#fff; background:#3A4672}
.vs-block b{font:900 italic 24px/1 var(--disp)}
.vs-block span{font:800 12px/1 var(--jp)}
.vs-step.r1 .vs-block{height:104px; background:linear-gradient(180deg,#F5C04A,#B9852A); color:#1A1200}
.vs-step.r2 .vs-block{height:78px; background:linear-gradient(180deg,#C7D0E4,#7F8AA8); color:#0A0E1F}
.vs-step.r3 .vs-block{height:58px; background:linear-gradient(180deg,#D99A6C,#8E5A34)}
.vs-step.r4 .vs-block{height:44px}
.vs-review{margin-top:26px; border-top:3px solid var(--ink); padding-top:14px}
.vs-review h3{margin:0 0 10px; font:900 calc(18px * var(--proj))/1.2 var(--jp)}
.vs-rrow{display:grid; grid-template-columns:1.2fr 1fr auto; gap:6px 14px; align-items:baseline; padding:10px 0; border-bottom:1px solid var(--rule)}
.vs-rja{font-weight:600; line-height:1.5}
.vs-rans b{font:700 calc(19px * var(--proj))/1.2 var(--en); color:var(--navy)}
.vs-rfull{display:block; font-family:var(--en); color:var(--ink-soft); font-size:.9em; margin-top:2px}
.vs-rmeta{display:flex; flex-direction:column; align-items:flex-end; gap:4px}
.vs-rkind,.vs-rtag{font:800 calc(11px * var(--proj))/1 var(--jp); padding:4px 8px; border-radius:999px; white-space:nowrap}
.vs-rkind{background:var(--rule); color:var(--ink)}
.k-wrong .vs-rkind{background:var(--red); color:#fff}
.k-timeout .vs-rkind{background:var(--ink); color:var(--paper)}
.vs-rtag{border:1px solid var(--rule-strong); color:var(--ink-soft)}

@keyframes vsTugL{0%{transform:translateX(0)}30%{transform:translateX(-12px)}100%{transform:translateX(0)}}
@keyframes vsTugR{0%{transform:translateX(0)}30%{transform:translateX(12px)}100%{transform:translateX(0)}}
@keyframes vsFlash{0%{opacity:.95}100%{opacity:0}}
@keyframes vsSlamL{0%{transform:translateX(0)}18%{transform:translateX(-30px)}36%{transform:translateX(10px)}54%{transform:translateX(-14px)}72%{transform:translateX(4px)}100%{transform:translateX(0)}}
@keyframes vsSlamR{0%{transform:translateX(0)}18%{transform:translateX(30px)}36%{transform:translateX(-10px)}54%{transform:translateX(14px)}72%{transform:translateX(-4px)}100%{transform:translateX(0)}}
@keyframes vsCheer{0%{transform:scale(1)}30%{transform:scale(1.28) rotate(-8deg)}60%{transform:scale(1.12) rotate(6deg)}100%{transform:scale(1)}}
@keyframes vsReel{0%{transform:translateX(0)}25%{transform:translateX(9px) rotate(8deg)}50%{transform:translateX(-5px)}100%{transform:translateX(0)}}
@keyframes vsFire{from{transform:scale(1)}to{transform:scale(1.07)}}
@keyframes vsBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.vs-drag.rest{animation-name:vsBobC}
@keyframes vsBobC{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-62%)}}
@keyframes vsBlink{50%{opacity:.55}}
@keyframes vsToast{0%{opacity:0; transform:translate(-50%,10px) scale(.9)}12%{opacity:1; transform:translate(-50%,0) scale(1.04)}20%{transform:translate(-50%,0) scale(1)}80%{opacity:1}100%{opacity:0; transform:translate(-50%,-8px)}}
@keyframes vsSpin{to{transform:rotate(360deg)}}
@keyframes vsDrop{from{transform:translateY(-40px); opacity:0}to{transform:none; opacity:1}}
@keyframes vsHop{from{transform:translateY(0)}to{transform:translateY(-8px)}}

/* ロビーの頭: 左に番号、右上にQRコード */
.vs-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:6px}
.vs-headl{min-width:0}
.vs-qr{flex:none; width:168px; padding:8px 8px 6px; border-radius:8px; background:#fff; border:3px solid var(--vs-bg); text-align:center}
.vs-qr svg{display:block; width:100%; height:auto}
.vs-qrcap{display:block; margin-top:4px; font:800 11px/1.3 var(--jp); color:#0A0E1F}
/* 対戦の部屋では番号を投影しない＝ Live ほど大きくしない */
.vs-root .roomcode{font-size:clamp(40px,11vw,76px); padding:10px 18px; letter-spacing:.12em; display:inline-block}

@media (max-width:560px){
  /* スマホは縦が足りない。対戦中は行き来バーと副題をしまって、帯と問題に場所を空ける */
  html.vs-on .kk-family, html.vs-on .masthead .sub{display:none}
  .vs-seats{grid-template-columns:repeat(2,1fr)}
  .vs-qr{width:118px; padding:5px 5px 4px}
  .vs-qrcap{font-size:9.5px}
  .vs-root .roomcode{font-size:clamp(30px,9.5vw,44px); padding:8px 12px; letter-spacing:.08em}
  .vs-arena{margin:0 -4px; padding:6px 10px 8px}
  .vs-who{width:46px}
  .vs-rrow{grid-template-columns:1fr auto}
  .vs-rja{grid-column:1 / -1}
  .vs-step{width:72px}
  .vs-champ{font-size:68px}
  .vs-target{width:88px}
}
@media (prefers-reduced-motion:reduce){
  .vs-arena *, .vs-hero *, .vs-toast, .vs-ball, .vs-drag{animation:none !important; transition:none !important}
  .vs-toast{opacity:1}
}