/* VS return controls. Keep the existing metal artwork and fit PC windows. */
body #vsLobby:not(.hide) #vsBack,
body #vsIntro:not(.hide) #vsIntroBack,
body #vsHud:not(.hide) #vsExit,
body #vsResult:not(.hide) #vsResultHome{
  position:fixed!important;left:12px!important;bottom:12px!important;top:auto!important;right:auto!important;
  display:flex!important;align-items:center;justify-content:center;pointer-events:auto!important;z-index:10!important;
  width:clamp(172px,15vw,220px)!important;height:clamp(48px,5.1vw,64px)!important;min-height:48px!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:0!important;transform:none!important;
  background:transparent url('./assets/ui/vs-lobby/ehome.webp?v=1') center/contain no-repeat!important;
  color:#f5f3ea!important;font:900 14px/1.2 'Yu Gothic','Meiryo',sans-serif!important;
  cursor:pointer!important;filter:drop-shadow(0 4px 8px #000b);
}
body #vsLobby:not(.hide) #vsBack img,
body #vsIntro:not(.hide) #vsIntroBack img,
body #vsHud:not(.hide) #vsExit img,
body #vsResult:not(.hide) #vsResultHome img{display:none!important}
body #vsLobby:not(.hide) #vsBack:hover,
body #vsIntro:not(.hide) #vsIntroBack:hover,
body #vsHud:not(.hide) #vsExit:hover,
body #vsResult:not(.hide) #vsResultHome:hover{filter:brightness(1.15) drop-shadow(0 4px 8px #000b)}
body #vsLobby:not(.hide) #vsBack:focus-visible,
body #vsIntro:not(.hide) #vsIntroBack:focus-visible,
body #vsHud:not(.hide) #vsExit:focus-visible,
body #vsResult:not(.hide) #vsResultHome:focus-visible{outline:3px solid #ffe4a0!important;outline-offset:3px!important}
/* A camera error may show both lobby and HUD. The lobby owns the one return button. */
body #vsLobby:not(.hide) ~ #vsHud #vsExit{display:none!important}
body #vsLobby[data-view="search"] #vsCancelSearch{
  position:fixed!important;left:50%!important;bottom:12px!important;top:auto!important;right:auto!important;
  width:clamp(212px,33.5vw,360px)!important;height:clamp(48px,6.3vw,72px)!important;min-height:48px!important;
  margin:0!important;transform:translateX(-50%)!important;pointer-events:auto!important;z-index:9!important;
}
/* Fit the existing entry card, chips and actions together, preserving their 16:9 positions. */
body #vsLobby.gpVeOn{
  --vs-entry-unit:min(1vw,1.7777778vh);
  --vs-entry-left:calc((100vw - 100 * var(--vs-entry-unit)) / 2);
  --vs-entry-top:calc((100vh - 56.25 * var(--vs-entry-unit)) / 2);
}
body #vsLobby.gpVeOn .gpVeLogo{left:calc(var(--vs-entry-left) + 1.2 * var(--vs-entry-unit));top:var(--vs-entry-top);width:calc(16.7 * var(--vs-entry-unit))}
body #vsLobby.gpVeOn .gpVeTitle{left:calc(var(--vs-entry-left) + 23.9 * var(--vs-entry-unit));top:calc(var(--vs-entry-top) + 2.4 * var(--vs-entry-unit));width:calc(54.4 * var(--vs-entry-unit))}
body #vsLobby.gpVeOn .gpVeCard{left:calc(var(--vs-entry-left) + 2.7 * var(--vs-entry-unit));top:calc(var(--vs-entry-top) + 15.25 * var(--vs-entry-unit));width:calc(20.9 * var(--vs-entry-unit));height:calc(24.8 * var(--vs-entry-unit))}
body #vsLobby.gpVeOn .gpVeName{font-size:clamp(12px,calc(2.7 * var(--vs-entry-unit)),42px)}
body #vsLobby.gpVeOn .gpVeCountry{font-size:clamp(10px,calc(1.3 * var(--vs-entry-unit)),20px)}
body #vsLobby.gpVeOn .gpVeRank{font-size:clamp(12px,calc(2 * var(--vs-entry-unit)),30px)}
body #vsLobby.gpVeOn .gpVeChip{left:calc(var(--vs-entry-left) + 77.2 * var(--vs-entry-unit));width:calc(21.5 * var(--vs-entry-unit))}
body #vsLobby.gpVeOn .gpVeChip.c1{top:calc(var(--vs-entry-top) + 17.9 * var(--vs-entry-unit))}
body #vsLobby.gpVeOn .gpVeChip.c2{top:calc(var(--vs-entry-top) + 25.1 * var(--vs-entry-unit))}
body #vsLobby.gpVeOn .gpVeChip.c3{top:calc(var(--vs-entry-top) + 32.3 * var(--vs-entry-unit))}
body #vsLobby.gpVeOn #vsFind{left:calc(var(--vs-entry-left) + 27.5 * var(--vs-entry-unit))!important;top:calc(var(--vs-entry-top) + 38.3 * var(--vs-entry-unit))!important;width:calc(44.3 * var(--vs-entry-unit))!important;height:calc(10.8 * var(--vs-entry-unit))!important}
body #vsLobby.gpVeOn #vsCreate{left:calc(var(--vs-entry-left) + 35 * var(--vs-entry-unit))!important;top:calc(var(--vs-entry-top) + 49.4 * var(--vs-entry-unit))!important;width:calc(30.2 * var(--vs-entry-unit))!important;height:calc(5.1 * var(--vs-entry-unit))!important}
body #vsLobby.gpVeOn #gpLookBtn{left:calc(var(--vs-entry-left) + 3.4 * var(--vs-entry-unit))!important;top:calc(var(--vs-entry-top) + 40.6 * var(--vs-entry-unit))!important;width:calc(19.5 * var(--vs-entry-unit))!important;height:calc(6.5 * var(--vs-entry-unit))!important}
/* Keep the result artwork in its original 16:9 arrangement, above the controls. */
body #vsResult{
  --vs-result-unit:min(1vw,1.7777778vh);
  --vs-result-left:calc((100vw - 100 * var(--vs-result-unit)) / 2);
  --vs-result-top:calc((100vh - 56.25 * var(--vs-result-unit)) / 2);
  --vs-result-feedback-top:calc(var(--vs-result-top) + 39.5 * var(--vs-result-unit));
  --vs-result-stats-height:max(28px,calc(4.2 * var(--vs-result-unit)));
}
body #vsResult::before{left:calc(var(--vs-result-left) + 2.8 * var(--vs-result-unit));top:var(--vs-result-top);width:calc(20 * var(--vs-result-unit));height:calc(10.5 * var(--vs-result-unit))}
body #vsResult::after{left:calc(var(--vs-result-left) + 2.4 * var(--vs-result-unit));top:calc(var(--vs-result-top) + 10.5 * var(--vs-result-unit));width:calc(24 * var(--vs-result-unit));height:calc(3.6 * var(--vs-result-unit))}
body #vsResult #vsResultTitle{left:calc(var(--vs-result-left) + 26.3 * var(--vs-result-unit))!important;top:calc(var(--vs-result-top) + 4.2 * var(--vs-result-unit))!important;width:calc(43.7 * var(--vs-result-unit))!important;height:calc(19.7 * var(--vs-result-unit))!important}
body #vsResult .vsResultSide{top:calc(var(--vs-result-top) + 24.5 * var(--vs-result-unit))!important;width:calc(39.5 * var(--vs-result-unit))!important;height:calc(14.4 * var(--vs-result-unit))!important}
body #vsResult #vsResultSide0{left:calc(var(--vs-result-left) + 4.2 * var(--vs-result-unit))!important}
body #vsResult #vsResultSide1{left:calc(var(--vs-result-left) + 55.6 * var(--vs-result-unit))!important}
body #vsResult #vsResultReason{top:calc(var(--vs-result-top) + 39 * var(--vs-result-unit))!important}
/* 結果の回数と次の動きは、HPの札とボタンの間でまとめて読む。 */
body #vsResult .gpStats{
  left:calc(var(--vs-result-left) + 10 * var(--vs-result-unit))!important;right:auto!important;
  top:var(--vs-result-feedback-top)!important;width:calc(80 * var(--vs-result-unit));height:var(--vs-result-stats-height)!important;
  font-size:clamp(20px,calc(2.6 * var(--vs-result-unit)),36px)!important;line-height:1.1!important;
}
body #vsResult .gpStats b{font-size:clamp(26px,calc(3.8 * var(--vs-result-unit)),54px)!important;line-height:1!important}
body #vsResult #vsResultNext{
  left:16px;right:16px;top:calc(var(--vs-result-feedback-top) + var(--vs-result-stats-height) + 8px);
  width:auto;margin:0;font-size:clamp(18px,calc(2 * var(--vs-result-unit)),28px);line-height:1.25;
  font-weight:800;white-space:normal;text-align:center;text-shadow:0 2px 4px #000,0 0 8px #000;
}
body #vsResult #vsResultScore{
  left:calc(var(--vs-result-left) + 43.7 * var(--vs-result-unit));top:calc(var(--vs-result-top) + 27 * var(--vs-result-unit));
  width:calc(11.9 * var(--vs-result-unit));font-size:clamp(9px,calc(1.1 * var(--vs-result-unit)),16px);
}
body #vsResultScore strong{font-size:clamp(24px,calc(4.1 * var(--vs-result-unit)),56px)}
@media(max-height:480px){
  body #vsResult{--vs-result-feedback-top:calc(var(--vs-result-top) + 35.6 * var(--vs-result-unit))}
  body #vsResult #vsResultTitle{top:calc(var(--vs-result-top) + .3 * var(--vs-result-unit))!important}
  body #vsResult .vsResultSide{top:calc(var(--vs-result-top) + 20.6 * var(--vs-result-unit))!important}
  body #vsResult #vsResultScore{top:calc(var(--vs-result-top) + 23.1 * var(--vs-result-unit))}
}
body #vsResult:not(.hide) #vsRematch,
body #vsResult:not(.hide) #vsNext{
  position:fixed!important;bottom:12px!important;top:auto!important;margin:0!important;
  pointer-events:auto!important;z-index:10!important;min-height:48px!important;
}
body #vsResult .vsResultPanel .vsResultActions #vsRematch{top:auto!important}
body #vsResult:not(.hide) #vsRematch{left:50%!important;right:auto!important;transform:translateX(-50%)!important;width:clamp(176px,calc(29.3 * var(--vs-result-unit)),420px)!important;height:clamp(48px,calc(7.5 * var(--vs-result-unit)),96px)!important}
body #vsResult:not(.hide) #vsNext{left:auto!important;right:12px!important;transform:none!important;width:clamp(140px,calc(23 * var(--vs-result-unit)),320px)!important;height:clamp(48px,calc(6.3 * var(--vs-result-unit)),80px)!important}
/* Notices have no actions; keep them clear of the return and result controls. */
body #vsNotice{top:12px!important;bottom:auto!important;box-sizing:border-box;max-height:calc(100vh - 108px);overflow:hidden;pointer-events:none}
/* A direct invitation must expose code entry instead of the WORLD search action. */
body #vsLobby[data-view="join"] #vsJoinForm:not(.hide){display:flex!important;flex-direction:column;gap:8px;width:min(480px,100%);margin:18px auto 0}
body #vsLobby[data-view="join"] #vsJoinForm>div{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:12px;align-items:center;margin:0}
body #vsLobby[data-view="join"] #vsCode{width:100%;max-width:none;min-width:0;min-height:48px}
body #vsLobby[data-view="join"] #vsJoin{width:200px;min-height:48px}
body #vsLobby[data-view="join"] #vsFind,
body #vsLobby[data-view="join"] #vsCreate,
body #vsLobby[data-view="join"] #vsChooseJoin,
body #vsLobby[data-view="join"] .gpVe,
body #vsLobby[data-view="join"] #gpLookBtn{display:none!important}
body #vsLobby[data-view="join"] .vsHeading,
body #vsLobby[data-view="join"] .vsIdentity,
body #vsLobby[data-view="join"] #vsCountryHint{position:static!important;left:auto!important}
/* Reserve the bottom return row before fitting the introduction's existing artwork. */
body #vsIntro{
  --vs-intro-unit:min(1vw,calc((100vh - 84px) / 56.25));
  --vs-intro-left:calc((100vw - 100 * var(--vs-intro-unit)) / 2);
  --vs-intro-top:calc((100vh - 84px - 56.25 * var(--vs-intro-unit)) / 2);
}
body #vsIntro .gpIntroMe,
body #vsIntro .gpIntroRival{top:var(--vs-intro-top)!important;width:calc(40 * var(--vs-intro-unit))!important;height:calc(36 * var(--vs-intro-unit))!important}
body #vsIntro .gpIntroMe{left:var(--vs-intro-left)!important;right:auto!important}
body #vsIntro .gpIntroRival{left:auto!important;right:var(--vs-intro-left)!important}
body #vsIntro.gpMeRight .gpIntroMe{left:auto!important;right:var(--vs-intro-left)!important}
body #vsIntro.gpMeRight .gpIntroRival{left:var(--vs-intro-left)!important;right:auto!important}
body #vsIntro .gpVsLogo{top:calc(var(--vs-intro-top) + var(--vs-intro-unit))!important;width:calc(22 * var(--vs-intro-unit))!important}
body #vsIntro::after{top:calc(var(--vs-intro-top) + 21.9375 * var(--vs-intro-unit));width:calc(33.5 * var(--vs-intro-unit));height:calc(21.5 * var(--vs-intro-unit))}
body #vsIntro .vsIntroSide{top:calc(var(--vs-intro-top) + 34.7 * var(--vs-intro-unit))!important;width:calc(36 * var(--vs-intro-unit))!important;height:calc(11.4 * var(--vs-intro-unit))!important;gap:calc(1.6 * var(--vs-intro-unit))!important;padding:0 calc(3 * var(--vs-intro-unit))!important}
body #vsIntro .vsIntroP0{left:var(--vs-intro-left)!important}
body #vsIntro .vsIntroP1{right:var(--vs-intro-left)!important;padding-left:calc(5 * var(--vs-intro-unit))!important}
body #vsIntro .vsIntroSide .vsFrame{width:calc(7.2 * var(--vs-intro-unit))!important;height:calc(4.8 * var(--vs-intro-unit))!important;margin:0!important}
body #vsIntro .vsIntroSide #vsIntroName0,
body #vsIntro .vsIntroSide #vsIntroName1{font-size:calc(3.2 * var(--vs-intro-unit))!important;padding:0 calc(.4 * var(--vs-intro-unit));min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body #vsIntro .vsIntroCenter{top:calc(var(--vs-intro-top) + 40 * var(--vs-intro-unit))!important}
body #vsIntro #vsIntroCount{font-size:calc(3 * var(--vs-intro-unit))!important}
body #vsIntro .gpRule{left:calc(var(--vs-intro-left) + 27.2 * var(--vs-intro-unit))!important;top:calc(var(--vs-intro-top) + 47.8 * var(--vs-intro-unit))!important;width:calc(45.5 * var(--vs-intro-unit))!important;height:calc(6 * var(--vs-intro-unit))!important}
/* The result card's contents must use the same scale as its outer metal plate. */
body #vsResult .vsResultCard #vsResultSide0,
body #vsResult .vsResultCard #vsResultSide1{padding:calc(2.2 * var(--vs-result-unit)) calc(3 * var(--vs-result-unit)) calc(1.8 * var(--vs-result-unit)) calc(3.6 * var(--vs-result-unit))!important;grid-template-columns:calc(8.5 * var(--vs-result-unit)) minmax(0,1fr)!important;column-gap:calc(1.8 * var(--vs-result-unit))!important;row-gap:calc(.3 * var(--vs-result-unit))!important}
body #vsResult .vsResultCard .vsResultSide .vsFrame{width:calc(7.4 * var(--vs-result-unit))!important;height:calc(4.9 * var(--vs-result-unit))!important}
body #vsResult .vsResultCard #vsResultSide0>span:last-of-type,
body #vsResult .vsResultCard #vsResultSide1>span:last-of-type{font-size:calc(4.2 * var(--vs-result-unit))!important;line-height:1!important;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body #vsResult .vsResultCard #vsResultSide0 .gpHp,
body #vsResult .vsResultCard #vsResultSide1 .gpHp{font-size:calc(1.9 * var(--vs-result-unit))!important;line-height:1.1!important}
body #vsResult .vsResultCard #vsResultSide0 .gpHp b,
body #vsResult .vsResultCard #vsResultSide1 .gpHp b{font-size:calc(2.8 * var(--vs-result-unit))!important;line-height:1.1!important}
body #vsResult .vsResultCard .vsResultSide .gpHp i{gap:calc(.25 * var(--vs-result-unit))!important;margin:calc(.4 * var(--vs-result-unit)) var(--vs-result-unit) 0!important}
body #vsResult .vsResultCard .vsResultSide .gpHp u{height:calc(1.2 * var(--vs-result-unit))!important}
/* The waiting-count plate must not sit behind the search-cancel button. */
body #vsLobby[data-view="search"] #vsSearch .gpVsCount{
  position:fixed!important;left:50%!important;right:auto!important;top:auto!important;
  bottom:calc(22px + clamp(48px,6.3vw,72px))!important;transform:translateX(-50%)!important;
  width:clamp(280px,37.7vw,560px)!important;max-width:calc(100vw - 48px);height:clamp(40px,5.1vw,76px)!important;margin:0!important;padding:0!important;
  display:flex!important;align-items:center;justify-content:center;gap:.2em;line-height:1.2;
  font-size:clamp(14px,1.9vw,28px);background:url('./assets/ui/vs-lobby/scount.webp?v=1') center/100% 100% no-repeat!important;border:0!important;box-shadow:none!important;
  pointer-events:none;z-index:9;text-shadow:0 2px 4px #000,0 0 8px #000;
}
body #vsLobby[data-view="search"] #vsSearch .gpVsCount b{font-size:clamp(20px,3vw,36px);margin:0 .15em}
/* 2026-11-09（ココミさん「VS で友だちとやるか CPU とやるか選べるように。選択画面をかっこよく」）：
   VS の入口を「世界の相手／友だちと／CPU と」の3枚の札を横に並べて選ぶ形にする。札の絵は Codex（image_gen）。
   ボタンの id と押した時の動き（versus.js）はそのまま。光らせず、金属の札だけ。 */
html body #vsLobby.gpVeOn #vsFind,html body #vsLobby.gpVeOn #vsCreate,html body #vsLobby.gpVeOn>.vsCpuBtn{
  top:calc(var(--vs-entry-top) + 19.9 * var(--vs-entry-unit))!important;width:calc(19.5 * var(--vs-entry-unit))!important;height:calc(26 * var(--vs-entry-unit))!important;
  padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;font-size:0!important;color:transparent!important;
  background:center/contain no-repeat!important;transform:none!important;animation:none!important;transition:transform .15s,filter .15s}
html body #vsLobby.gpVeOn #vsFind img{display:none!important}
html body #vsLobby.gpVeOn #vsFind{left:calc(var(--vs-entry-left) + 28.5 * var(--vs-entry-unit))!important;background-image:url('./assets/ui/vs-lobby/card-world.webp?v=1')!important}
html body #vsLobby.gpVeOn #vsCreate{left:calc(var(--vs-entry-left) + 49.6 * var(--vs-entry-unit))!important;background-image:url('./assets/ui/vs-lobby/card-friend.webp?v=1')!important}
html body #vsLobby.gpVeOn>.vsCpuBtn{left:calc(var(--vs-entry-left) + 70.7 * var(--vs-entry-unit))!important;background-image:url('./assets/ui/vs-lobby/card-cpu.webp?v=1')!important}
html[lang="en"] body #vsLobby.gpVeOn #vsFind{background-image:url('./assets/ui/vs-lobby/card-world-en.webp?v=1')!important}
html[lang="en"] body #vsLobby.gpVeOn #vsCreate{background-image:url('./assets/ui/vs-lobby/card-friend-en.webp?v=1')!important}
html[lang="en"] body #vsLobby.gpVeOn>.vsCpuBtn{background-image:url('./assets/ui/vs-lobby/card-cpu-en.webp?v=1')!important}
html body #vsLobby.gpVeOn #vsFind:hover,html body #vsLobby.gpVeOn #vsCreate:hover,html body #vsLobby.gpVeOn>.vsCpuBtn:hover{transform:translateY(-.4vw)!important;filter:brightness(1.12)}
html body #vsLobby.gpVeOn #vsFind:focus-visible,html body #vsLobby.gpVeOn #vsCreate:focus-visible,html body #vsLobby.gpVeOn>.vsCpuBtn:focus-visible{outline:3px solid #ffe08a;outline-offset:3px}
/* 2026-11-10（ココミさん「対戦の待合せ画面がダサい。Codex で近未来の見本を作って、それを完全に再現」）：
   見本＝outputs\GOOPA最終審査\画面の見本\VS待合せ_近未来_2026-11-10\見本_PC.png（1920×1080）。部品（背景・札の枠・ルールの枠・VS）は Codex image_gen で見本から切り出した。
   見本の 1920×1080 の座標を、そのまま 16:9 の舞台（--r = 見本の1px）に置く */
html body #vsLobby[data-view="room"]{
  --r:calc(min(100vw,177.7778vh)/1920);--rx:calc((100vw - 1920*var(--r))/2);--ry:calc((100vh - 1080*var(--r))/2);
  background:#03070d url('./assets/ui/vs-room/bg.webp?v=1') center/cover no-repeat!important;padding:0!important;min-width:0!important;overflow:hidden!important}
html body #vsLobby[data-view="room"] .vsPanel{position:fixed!important;inset:0!important;width:auto!important;min-width:0!important;max-width:none!important;height:auto!important;padding:0!important;margin:0!important;border:0!important;background:none!important;box-shadow:none!important;transform:none!important}
html body #vsLobby[data-view="room"] .vsPanel::before,html body #vsLobby[data-view="room"] .vsPanel::after{display:none!important}
html body #vsLobby[data-view="room"] .vsHeading{position:static!important;margin:0!important}
html body #vsLobby[data-view="room"] .vsBrand{position:fixed!important;left:calc(var(--rx) + 790*var(--r))!important;top:calc(var(--ry) + 6*var(--r))!important;width:calc(340*var(--r))!important;height:auto!important;margin:0!important}
html body #vsLobby[data-view="room"] #vsTitle{position:fixed!important;left:var(--rx)!important;width:calc(1920*var(--r))!important;top:calc(var(--ry) + 96*var(--r))!important;margin:0!important;text-align:center;font-size:max(18px,calc(66*var(--r)))!important;line-height:1.1!important;font-weight:900!important;letter-spacing:.08em;color:#f4ecdc!important;text-shadow:0 calc(3*var(--r)) calc(8*var(--r)) #000c}
html body #vsLobby[data-view="room"] #vsLead{position:fixed!important;left:var(--rx)!important;width:calc(1920*var(--r))!important;top:calc(var(--ry) + 170*var(--r))!important;margin:0!important;text-align:center;font-size:max(11px,calc(28*var(--r)))!important;font-weight:800!important;letter-spacing:.06em;color:#e8ecf2!important;opacity:1!important}
html body #vsLobby[data-view="room"] #vsRoom,html body #vsLobby[data-view="room"] .vsSeats{position:static!important;display:block!important;margin:0!important;padding:0!important;border:0!important;background:none!important}
html body #vsLobby[data-view="room"] .vsSeat{position:fixed!important;top:calc(var(--ry) + 212*var(--r))!important;width:calc(730*var(--r))!important;height:calc(443*var(--r))!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:url('./assets/ui/vs-room/card-red.webp?v=1') center/100% 100% no-repeat!important;color:#fff;overflow:visible!important}
html body #vsLobby[data-view="room"] #vsSeat0{left:calc(var(--rx) + 150*var(--r))!important}
html body #vsLobby[data-view="room"] #vsSeat1{left:calc(var(--rx) + 1040*var(--r))!important;background-image:url('./assets/ui/vs-room/card-blue.webp?v=1')!important}
html body #vsLobby[data-view="room"] .vsSeat::before,html body #vsLobby[data-view="room"] .vsSeat::after{display:none!important}
html body #vsLobby[data-view="room"] .vsSeatTop{position:absolute!important;left:calc(72*var(--r));right:calc(48*var(--r));top:calc(30*var(--r));display:flex!important;justify-content:space-between;align-items:flex-start;margin:0!important;padding:0!important}
html body #vsLobby[data-view="room"] .vsSeatTop b{font:italic 900 max(13px,calc(44*var(--r)))/1 sans-serif!important;color:#ff9a5c!important;letter-spacing:.02em}
html body #vsLobby[data-view="room"] #vsSeat1 .vsSeatTop b{color:#6fd6ff!important}
html body #vsLobby[data-view="room"] .vsSeatRole{font-size:max(10px,calc(26*var(--r)))!important;font-weight:800;color:#eef1f5!important;opacity:1!important;margin-top:calc(8*var(--r))}
html body #vsLobby[data-view="room"] .vsFlagPlate{position:absolute!important;left:0;right:0;top:calc(72*var(--r));display:flex!important;flex-direction:column;align-items:center;margin:0!important;padding:0!important;background:none!important;border:0!important}
html body #vsLobby[data-view="room"] .vsSeatFlag{width:calc(94*var(--r))!important;height:calc(56*var(--r))!important;object-fit:cover;margin:0!important;box-shadow:0 0 0 1px #0006}
html body #vsLobby[data-view="room"] .vsSeatCountry{margin:calc(8*var(--r)) 0 0!important;font-size:max(11px,calc(34*var(--r)))!important;font-weight:900!important;letter-spacing:.04em;color:#f4f6f8!important}
html body #vsLobby[data-view="room"] .vsSeatName{position:absolute!important;left:calc(30*var(--r));right:calc(30*var(--r));top:calc(168*var(--r));margin:0!important;text-align:center;font-size:max(14px,calc(54*var(--r)))!important;line-height:1.15!important;font-weight:900!important;color:#f6f3ec!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body #vsLobby[data-view="room"] .vsSeatLocal{position:absolute!important;left:calc(120*var(--r));top:calc(226*var(--r));margin:0!important;font-size:max(9px,calc(25*var(--r)))!important;font-weight:700;color:#e2e6ea!important;opacity:1!important}
html body #vsLobby[data-view="room"] .vsPreview{position:absolute!important;left:calc(112*var(--r));top:calc(259*var(--r));width:calc(523*var(--r))!important;height:calc(101*var(--r))!important;max-height:none!important;aspect-ratio:auto!important;margin:0!important;background:#04070cdd!important;border:1px solid #ffffff2e!important;border-radius:calc(8*var(--r))}
html body #vsLobby[data-view="room"] .vsHand{top:50%!important;width:calc(106*var(--r));height:calc(62*var(--r));padding:0!important;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border:max(1px,calc(3*var(--r))) solid #5d6772!important;border-radius:calc(31*var(--r))!important;background:#070b11e6!important;color:#b8c0c8!important;font-size:max(9px,calc(27*var(--r)))!important;font-weight:800}
html body #vsLobby[data-view="room"] .vsHand.left{left:calc(122*var(--r))!important}
html body #vsLobby[data-view="room"] .vsHand.right{right:calc(122*var(--r))!important;left:auto!important}
html body #vsLobby[data-view="room"] .vsHand.seen{border-color:#43e44f!important;color:#8dff8a!important;box-shadow:0 0 calc(12*var(--r)) #39d64588!important}
html body #vsLobby[data-view="room"] .vsSeatStatus{position:absolute!important;left:0;right:0;top:calc(366*var(--r));margin:0!important;text-align:center;font-size:max(11px,calc(31*var(--r)))!important;font-weight:900!important;color:#f2f2f2!important;letter-spacing:.03em}
html body #vsLobby[data-view="room"] .vsDivider{position:fixed!important;left:calc(var(--rx) + 885*var(--r))!important;top:calc(var(--ry) + 358*var(--r))!important;width:calc(150*var(--r))!important;height:calc(128*var(--r))!important;margin:0!important;font-size:0!important;color:transparent!important;text-shadow:none!important;background:url('./assets/ui/vs-room/vs.webp?v=1') center/contain no-repeat!important}
html body #vsLobby[data-view="room"] #vsInvite{position:fixed!important;left:calc(var(--rx) + 1152*var(--r))!important;top:calc(var(--ry) + 471*var(--r))!important;width:calc(523*var(--r))!important;height:calc(101*var(--r))!important;box-sizing:border-box;margin:0!important;padding:0 calc(14*var(--r))!important;border:1px solid #6fd6ff66!important;border-radius:calc(8*var(--r));background:#04070cf0!important;display:flex;align-items:center;justify-content:space-around;gap:calc(10*var(--r));z-index:2}
html body #vsLobby[data-view="room"] #vsInvite.hide{display:none!important}
html body #vsLobby[data-view="room"] #vsRoomStep{position:fixed!important;left:var(--rx)!important;width:calc(1920*var(--r))!important;top:calc(var(--ry) + 656*var(--r))!important;margin:0!important;text-align:center;font-size:max(11px,calc(33*var(--r)))!important;font-weight:900!important;color:#f3f3f3!important;letter-spacing:.03em}
html body #vsLobby[data-view="room"] .vsLaunch{position:fixed!important;left:calc(var(--rx) + 700*var(--r))!important;top:calc(var(--ry) + 702*var(--r))!important;width:calc(520*var(--r))!important;height:calc(130*var(--r))!important;margin:0!important;display:flex!important;align-items:center;justify-content:center;gap:calc(12*var(--r))}
html body #vsLobby[data-view="room"] .vsLaunch .vsStart,html body #vsLobby[data-view="room"] .vsLaunch #vsReady{width:auto!important;height:auto!important;margin:0!important;padding:0!important;border:0!important;background:none!important}
html body #vsLobby[data-view="room"] .vsLaunch .vsStart img{height:calc(132*var(--r))!important;width:auto!important;max-width:none!important}
html body #vsLobby[data-view="room"] .vsLaunch #vsReady img{height:calc(118*var(--r))!important;width:auto!important;max-width:none!important}
html body #vsLobby[data-view="room"] #vsRoom .vsBattleRule{position:fixed!important;left:calc(var(--rx) + 320*var(--r))!important;top:calc(var(--ry) + 832*var(--r))!important;width:calc(1430*var(--r))!important;height:calc(220*var(--r))!important;max-width:none!important;box-sizing:border-box;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:url('./assets/ui/vs-room/rules-panel.webp?v=1') center/100% 100% no-repeat!important;color:#f2f0ea!important}
html body #vsLobby[data-view="room"] #vsRoom .vsBattleRule>b{position:absolute;left:0;top:0;bottom:0;width:27%;display:flex!important;align-items:center;justify-content:center;margin:0!important;font:italic 900 max(13px,calc(50*var(--r)))/1 sans-serif!important;letter-spacing:.03em;color:#f6c45a!important;text-shadow:0 0 calc(10*var(--r)) #f4a52f55}
html body #vsLobby[data-view="room"] #vsRoom .vsBattleRule ol,html body #vsLobby[data-view="room"] #vsRoom .vsBattleRule .vsShortRule{position:absolute;left:31%;right:3%;top:calc(24*var(--r));margin:0!important;padding:0 0 0 1.3em!important;font-size:max(10px,calc(29*var(--r)))!important;line-height:1.42!important;font-weight:700;white-space:nowrap}
html body #vsLobby[data-view="room"] #vsRoom .vsBattleRule .vsShortRule{padding-left:0!important;top:calc(52*var(--r))}
html body #vsLobby[data-view="room"] #vsRoom .vsBattleRule .vsCpuRule{position:absolute;left:31%;right:3.5%;bottom:calc(20*var(--r));margin:0!important;font-size:max(10px,calc(29*var(--r)))!important;padding-left:calc(6*var(--r))!important;line-height:1.3;font-weight:900;color:#5fe3ff!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body #vsLobby[data-view="room"] #vsRoom:not([data-cpu="1"]) .vsBattleRule ol{top:calc(48*var(--r))}
html body #vsLobby[data-view="room"] #vsRoom .vsBattleRule ol{padding-left:0!important;list-style:decimal inside!important}
html body #vsLobby[data-view="room"] #vsRoom .vsBattleRule li{overflow:hidden;text-overflow:ellipsis}
/* スマホ横など低い画面：ホームはルールの枠と重なるので、左上の空いた所へ */
@media (max-height:480px){html body #vsLobby[data-view="room"]:not(.hide) #vsBack{top:8px!important;bottom:auto!important;left:8px!important}}
/* 招待欄（友だちと・相手がまだいない時）は 2P の札のカメラ窓の所に収める。エラーは START の上に重ねて目立たせる（Codex の見直し） */
html body #vsLobby[data-view="room"] #vsInvite>div{min-width:0!important;text-align:center}
html body #vsLobby[data-view="room"] #vsInvite small{font-size:max(9px,calc(20*var(--r)))!important}
html body #vsLobby[data-view="room"] #vsRoomCode{font-size:max(14px,calc(44*var(--r)))!important;line-height:1.1!important}
html body #vsLobby[data-view="room"] #vsCopy{flex:0 0 auto;width:auto!important;min-width:0!important;margin:0!important;padding:0!important}
html body #vsLobby[data-view="room"] #vsCopy img{height:calc(72*var(--r))!important;width:auto!important;max-width:none!important}
html body #vsLobby[data-view="room"] #vsInviteLink{position:absolute;left:0;right:0;top:100%;width:100%!important;box-sizing:border-box;margin:calc(4*var(--r)) 0 0!important;font-size:max(10px,calc(20*var(--r)))!important}
html body #vsLobby[data-view="room"] #vsError:not(:empty){position:fixed!important;left:calc(var(--rx) + 460*var(--r))!important;width:calc(1000*var(--r))!important;top:calc(var(--ry) + 604*var(--r))!important;box-sizing:border-box;margin:0!important;padding:calc(8*var(--r)) calc(16*var(--r))!important;text-align:center;font-size:max(11px,calc(28*var(--r)))!important;font-weight:800;color:#ffd9d9!important;background:#3a0b10ee!important;border:1px solid #ff6b6b88;border-radius:calc(8*var(--r));z-index:5}
/* 2026-11-10（ココミさん「文字がそのまますぎ。挑戦者集結とかもかっこよく」）：
   題「挑戦者、集結。」と「VS のルール」は Codex image_gen で作った文字の絵に置きかえ、ほかの文字は Dela Gothic One（手元の字体）＋金属の色に */
html body #vsLobby[data-view="room"] .vsBrand{left:calc(var(--rx) + 830*var(--r))!important;top:calc(var(--ry) + 4*var(--r))!important;width:calc(260*var(--r))!important}
html body #vsLobby[data-view="room"] #vsTitle{top:calc(var(--ry) + 72*var(--r))!important;left:calc(var(--rx) + 360*var(--r))!important;width:calc(1200*var(--r))!important;height:calc(138*var(--r))!important;font-size:max(18px,calc(60*var(--r)))!important;line-height:calc(138*var(--r))!important;overflow:hidden;color:transparent!important;text-shadow:none!important;background:url('./assets/ui/vs-room/title-ja.webp?v=1') center/contain no-repeat;filter:drop-shadow(0 calc(4*var(--r)) calc(8*var(--r)) #000d)}
html[lang="en"] body #vsLobby[data-view="room"] #vsTitle{background-image:url('./assets/ui/vs-room/title-en.webp?v=1')}
html body #vsLobby[data-view="room"] #vsLead{opacity:0!important;pointer-events:none}
html body #vsLobby[data-view="room"] #vsRoom .vsBattleRule>b{color:transparent!important;text-shadow:none!important;background:url('./assets/ui/vs-room/rules-ja.webp?v=1') center/86% auto no-repeat}
html[lang="en"] body #vsLobby[data-view="room"] #vsRoom .vsBattleRule>b{background-image:url('./assets/ui/vs-room/rules-en.webp?v=1')}
html body #vsLobby[data-view="room"] :is(.vsSeatTop b,.vsSeatRole,.vsSeatCountry,.vsSeatName,.vsSeatLocal,.vsSeatStatus,.vsHand,#vsRoomStep,.vsCpuRule){font-family:'Dela Gothic One',sans-serif!important;font-weight:400!important}
html body #vsLobby[data-view="room"] :is(.vsSeatCountry,.vsSeatName,.vsSeatStatus,#vsRoomStep){background:linear-gradient(180deg,#ffffff 0%,#eef1f4 44%,#a7b0bb 52%,#dfe4ea 70%,#ffffff 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#eef1f4!important;text-shadow:none!important}
html body #vsLobby[data-view="room"] .vsSeatName{letter-spacing:.03em;filter:drop-shadow(0 calc(3*var(--r)) 0 #000) drop-shadow(0 0 calc(10*var(--r)) #ff6a2a99)}
html body #vsLobby[data-view="room"] #vsSeat1 .vsSeatName{filter:drop-shadow(0 calc(3*var(--r)) 0 #000) drop-shadow(0 0 calc(10*var(--r)) #2aa8ff99)}
html body #vsLobby[data-view="room"] :is(.vsSeatCountry,.vsSeatStatus,#vsRoomStep){letter-spacing:.06em;filter:drop-shadow(0 calc(2*var(--r)) 0 #000c)}
html body #vsLobby[data-view="room"] .vsSeatTop b{font-style:italic!important;font-size:max(14px,calc(50*var(--r)))!important;background:linear-gradient(180deg,#fff3c4 0%,#ffb347 45%,#ff5a1f 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 calc(2*var(--r)) 0 #000) drop-shadow(0 0 calc(8*var(--r)) #ff6a2acc)}
html body #vsLobby[data-view="room"] #vsSeat1 .vsSeatTop b{background-image:linear-gradient(180deg,#e6fbff 0%,#6fd6ff 45%,#1f7bff 100%);filter:drop-shadow(0 calc(2*var(--r)) 0 #000) drop-shadow(0 0 calc(8*var(--r)) #2aa8ffcc)}
html body #vsLobby[data-view="room"] .vsSeatRole{letter-spacing:.04em;color:#cfd6de!important}
html body #vsLobby[data-view="room"] .vsSeatLocal{letter-spacing:.06em;color:#c7ced6!important}
html body #vsLobby[data-view="room"] .vsHand{letter-spacing:.04em}
html body #vsLobby[data-view="room"] #vsRoom .vsBattleRule .vsCpuRule{letter-spacing:.03em;text-shadow:0 0 calc(8*var(--r)) #2ad0ff88}
html[lang="en"] body #vsLobby[data-view="room"] #vsRoom .vsBattleRule .vsCpuRule{font-size:max(9px,calc(26*var(--r)))!important;letter-spacing:.01em}
html[lang="en"] body #vsLobby[data-view="room"] .vsSeatName{font-size:max(13px,calc(48*var(--r)))!important}
/* 英語の CPU 名（CPU Thunder Blade など）が紹介画面の札で「CPU Th…」と切れるので、英語だけ2行まで小さめに */
html[lang="en"] body #vsIntro .vsIntroSide #vsIntroName0,html[lang="en"] body #vsIntro .vsIntroSide #vsIntroName1{font-size:min(2.5vw,3.6vh)!important;line-height:1.05!important;white-space:normal!important;overflow:hidden!important;text-overflow:clip!important;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;letter-spacing:.01em!important}
html body #vsLobby[data-view="room"] .vsSeatCountry{max-width:calc(640*var(--r));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}