/* ステージ表示（1920×1080 固定で設計し、画面サイズに合わせて縮尺する） */
:root {
  --navy: #0b0d24;
  --navy-2: #151832;
  --ink: #ffffff;
  --muted: #9ea3d6;
  --red: #ff3b47;
  --teal: #2ec5e0;
  --yellow: #f5e500;
  --term: #6dffb0;
  --heavy: "Dela Gothic One", "Hiragino Kaku Gothic StdN", sans-serif;
  --dot: "DotGothic16", monospace;
  --neon: "Train One", "Dela Gothic One", sans-serif;
  --body: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; color: var(--ink); font-family: var(--body); }

#stage {
  position: absolute; left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform: translate(-50%, -50%) scale(var(--s, .5));
  background: var(--navy);
  overflow: hidden;
}

/* ---------- 背景：オーロラ + グリッド ---------- */
.bg { position: absolute; inset: 0; }
.blob { position: absolute; width: 900px; height: 900px; border-radius: 50%; filter: blur(140px); opacity: .45; mix-blend-mode: screen; }
.b1 { background: var(--teal); left: -200px; top: -300px; animation: drift1 18s ease-in-out infinite alternate; }
.b2 { background: var(--red); right: -250px; top: 150px; animation: drift2 22s ease-in-out infinite alternate; }
.b3 { background: #5b3cff; left: 500px; bottom: -500px; animation: drift3 26s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(400px, 250px) scale(1.2); } }
@keyframes drift2 { to { transform: translate(-350px, -200px) scale(.85); } }
@keyframes drift3 { to { transform: translate(300px, -250px) scale(1.15); } }
.grid {
  position: absolute; inset: -100px;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gridmove 8s linear infinite;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
@keyframes gridmove { to { transform: translate(60px, 60px); } }

/* ---------- CRT（走査線とビネット） ---------- */
.crt { position: absolute; inset: 0; pointer-events: none; z-index: 50;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 4px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%);
  animation: flicker 4s steps(1) infinite;
}
@keyframes flicker { 0%, 100% { opacity: 1; } 47% { opacity: .9; } 48% { opacity: 1; } 82% { opacity: .94; } }

/* ---------- ヘッダー ---------- */
.top { position: absolute; left: 60px; right: 60px; top: 36px; height: 150px; display: flex; align-items: center; gap: 28px; z-index: 5; }
.logo { width: 150px; height: 150px; filter: drop-shadow(0 0 18px rgba(255,59,71,.45)); }
.heads { flex: 1; }
.kicker { font-family: var(--dot); font-size: 26px; color: var(--muted); letter-spacing: .12em; }
.headline { font-family: var(--heavy); font-size: 58px; line-height: 1.2; margin-top: 6px; text-shadow: 0 0 24px rgba(46,197,224,.55); }
.meters { display: flex; gap: 22px; }
.meter { min-width: 250px; padding: 14px 24px; border-radius: 18px; background: rgba(255,255,255,.07); border: 2px solid rgba(255,255,255,.15); text-align: center; backdrop-filter: blur(6px); }
.meter span { display: block; font-family: var(--dot); font-size: 22px; color: var(--muted); letter-spacing: .1em; }
.meter b { display: block; font-family: var(--heavy); font-weight: 400; font-size: 64px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.meter.hot b { color: var(--red); animation: hot .5s ease-in-out infinite alternate; }
@keyframes hot { to { text-shadow: 0 0 24px var(--red); transform: scale(1.06); } }

/* ---------- シーン切替 ---------- */
.scene { position: absolute; left: 0; right: 0; top: 210px; bottom: 0; opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s; }
.scene.on { opacity: 1; visibility: visible; }
body[data-scene="wait"] .meters, body[data-scene="result"] .meters { visibility: hidden; }

/* ---------- 待機 ---------- */
#scene-wait { display: flex; align-items: center; justify-content: center; gap: 110px; padding-bottom: 60px; }
.wait-copy { width: 900px; }
.wait-badge { display: inline-block; font-family: var(--dot); font-size: 30px; letter-spacing: .3em; padding: 6px 22px; border: 2px solid var(--term); color: var(--term); border-radius: 8px; animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }
.wait-copy h2 { font-family: var(--heavy); font-weight: 400; font-size: 120px; line-height: 1.15; margin-top: 26px; }
.wait-copy p { font-size: 32px; line-height: 1.7; margin-top: 30px; color: #dfe2ff; }
.wait-copy p b { color: var(--yellow); }
.teams-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; margin-top: 40px; }
.teams-mini div { font-size: 24px; padding-left: 16px; border-left: 8px solid var(--c); line-height: 1.4; }
.teams-mini b { font-family: var(--dot); font-weight: 400; color: var(--c); display: block; font-size: 22px; }
.qr-card { width: 560px; padding: 40px; border-radius: 36px; background: #fff; color: var(--navy-2); text-align: center; box-shadow: 0 0 0 10px rgba(255,255,255,.12), 0 0 80px rgba(46,197,224,.6); animation: float 4s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-14px) rotate(-1deg); } }
.qr svg { display: block; width: 100%; height: auto; }
.qr-url { font-family: var(--dot); font-size: 24px; margin-top: 18px; word-break: break-all; }
.qr-note { font-size: 22px; margin-top: 10px; color: #555a80; }

/* ---------- ライブ集計 ---------- */
.race { position: absolute; left: 40px; top: 20px; width: 1340px; height: 720px; }
.row { position: absolute; left: 0; top: 0; width: 100%; height: 160px; display: flex; align-items: center; gap: 22px; transition: transform .7s cubic-bezier(.34, 1.56, .64, 1); }
.rank { width: 92px; height: 92px; flex: none; border-radius: 50%; display: grid; place-items: center; font-family: var(--heavy); font-size: 46px; background: rgba(255,255,255,.1); border: 3px solid rgba(255,255,255,.25); }
.row[data-pos="0"] .rank { background: var(--yellow); color: var(--navy); border-color: #fff; box-shadow: 0 0 30px var(--yellow); }
.label { width: 300px; flex: none; }
.label .no { font-family: var(--heavy); font-size: 40px; color: var(--c); text-shadow: 0 0 18px var(--c); }
.label .ttl { font-size: 26px; font-weight: 700; margin-top: 4px; color: #dfe2ff; }
.track { position: relative; flex: 1; height: 88px; border-radius: 44px; background: rgba(255,255,255,.06); }
.fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; min-width: 88px; border-radius: 44px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 35%, transparent), var(--c)); box-shadow: 0 0 30px color-mix(in srgb, var(--c) 70%, transparent); }
.fill::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(110deg, rgba(255,255,255,.18) 0 18px, transparent 18px 40px); animation: stripes 1.2s linear infinite; mix-blend-mode: overlay; }
@keyframes stripes { to { background-position: 80px 0; } }
.face { position: absolute; right: -6px; top: 50%; width: 104px; height: 104px; margin-top: -52px; display: grid; place-items: center; font-size: 72px; border-radius: 50%; background: var(--navy-2); border: 4px solid var(--c); transform-origin: center; }
.num { width: 290px; flex: none; white-space: nowrap; text-align: right; font-family: var(--heavy); font-size: 84px; font-variant-numeric: tabular-nums; }
.num small { font-size: 32px; margin-left: 4px; color: var(--muted); }
.plus { position: absolute; font-family: var(--heavy); font-size: 46px; color: var(--yellow); text-shadow: 0 0 12px var(--yellow); pointer-events: none; z-index: 3; }

.side { position: absolute; right: 60px; top: 20px; width: 460px; height: 720px; display: flex; flex-direction: column; justify-content: center; }
.big-qr { padding: 34px 34px 30px; border-radius: 30px; background: #fff; color: var(--navy-2); text-align: center; box-shadow: 0 0 0 8px rgba(255,255,255,.12), 0 0 60px rgba(46,197,224,.5); }
.big-qr .qr { width: 340px; margin: 18px auto; }
.bq-head { font-family: var(--heavy); font-size: 46px; color: var(--red); }
.bq-foot { font-family: var(--heavy); font-size: 34px; }

.secret { position: absolute; left: 60px; width: 1300px; bottom: 34px; text-align: center; font-family: var(--heavy); font-size: 44px; padding: 14px; border-radius: 16px; background: var(--red); box-shadow: 0 0 40px var(--red); opacity: 0; transform: translateY(40px); transition: .5s; }
#scene-live.is-secret .secret { opacity: 1; transform: none; animation: hot .6s ease-in-out infinite alternate; }
#scene-live.is-secret .num { color: var(--yellow); font-family: var(--dot); }
#scene-live.is-secret .fill { background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.35)); box-shadow: none; }

/* ---------- 結果発表 ---------- */
.res-head { position: absolute; left: 0; right: 0; top: -10px; display: flex; justify-content: center; align-items: baseline; gap: 36px; transition: opacity .4s; }
#scene-result.has-winner .res-head { opacity: 0; }
.res-kicker { font-family: var(--neon); font-size: 80px; line-height: 1; color: #fff; text-shadow: 0 0 10px #fff, 0 0 30px var(--teal), 0 0 60px var(--teal); letter-spacing: .1em; }
.res-title { font-family: var(--heavy); font-size: 44px; color: #dfe2ff; }
.slots { position: absolute; left: 140px; right: 140px; top: 110px; display: grid; gap: 14px; }
.slot { position: relative; height: 136px; display: flex; align-items: center; gap: 30px; padding: 0 40px; border-radius: 26px; background: rgba(255,255,255,.07); border: 3px solid rgba(255,255,255,.18); overflow: hidden; transition: opacity .5s, filter .5s; }
.slot .bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 10%, transparent), color-mix(in srgb, var(--c) 45%, transparent)); z-index: 0; }
.slot > *:not(.bar) { position: relative; z-index: 1; }
.slot .rk { width: 190px; font-family: var(--heavy); font-size: 64px; }
.slot .rk small { font-size: 36px; }
.slot .who { flex: 1; min-width: 0; }
.slot .who .no { font-family: var(--heavy); font-size: 46px; color: var(--c, #fff); }
.slot .who .ttl { font-size: 30px; font-weight: 700; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot .vt { font-family: var(--heavy); font-size: 88px; white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 300px; text-align: right; }
.slot .vt small { font-size: 40px; margin-left: 6px; }
.slot.hidden .who .no, .slot.hidden .vt { font-family: var(--dot); color: var(--muted); }
.slot.revealed { border-color: var(--c); box-shadow: 0 0 40px color-mix(in srgb, var(--c) 50%, transparent); }
.slot.dim { opacity: .3; filter: grayscale(.6); }
.slot.spot { border-color: var(--yellow); animation: spot .35s ease-in-out infinite alternate; }
@keyframes spot { to { box-shadow: 0 0 70px var(--yellow); } }
.slot.winner { height: 184px; border-width: 5px; border-color: var(--yellow); box-shadow: 0 0 90px var(--yellow), inset 0 0 60px rgba(245,229,0,.25); }
.slot.winner .rk { color: var(--yellow); font-size: 84px; }
.slot.winner .who .no { font-size: 62px; }
.slot.winner .vt { font-size: 118px; color: var(--yellow); }
.gp { position: absolute; left: 0; right: 0; text-align: center; top: -24px; transform: scale(0); font-family: var(--neon); font-size: 104px; line-height: 1.1; white-space: nowrap; color: #fff; text-shadow: 0 0 10px #fff, 0 0 30px var(--yellow), 0 0 80px var(--red); }

/* ---------- オーバーレイ ---------- */
.overlay { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; pointer-events: none; opacity: 0; visibility: hidden; }
.overlay.on { opacity: 1; visibility: visible; }
.burst-text { font-family: var(--neon); font-size: 260px; line-height: .95; text-align: center; color: #fff; text-shadow: 0 0 20px #fff, 0 0 60px var(--red), 0 0 120px var(--red); }
#countdown { background: radial-gradient(circle, rgba(11,13,36,.15), rgba(11,13,36,.75)); }
.cd-num { font-family: var(--heavy); font-size: 520px; line-height: 1; color: var(--yellow); text-shadow: 0 0 60px var(--yellow), 0 0 140px var(--red); }
#flash { background: #fff; }
.timeup { font-family: var(--neon); font-size: 300px; color: #fff; text-shadow: 0 0 20px #fff, 0 0 80px var(--red); }

/* ---------- グリッチ文字 ---------- */
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; }
.glitch::before { color: var(--teal); transform: translate(-4px, 0); clip-path: inset(0 0 60% 0); animation: g1 2.4s infinite steps(1); mix-blend-mode: screen; }
.glitch::after { color: var(--red); transform: translate(4px, 0); clip-path: inset(55% 0 0 0); animation: g2 1.9s infinite steps(1); mix-blend-mode: screen; }
@keyframes g1 { 0%, 100% { clip-path: inset(0 0 60% 0); transform: translate(-4px); } 20% { clip-path: inset(20% 0 50% 0); transform: translate(-10px, 2px); } 40% { clip-path: inset(70% 0 5% 0); transform: translate(6px); } 60% { clip-path: inset(40% 0 30% 0); transform: translate(-3px, -2px); } }
@keyframes g2 { 0%, 100% { clip-path: inset(55% 0 0 0); transform: translate(4px); } 25% { clip-path: inset(10% 0 75% 0); transform: translate(10px, -2px); } 50% { clip-path: inset(80% 0 2% 0); transform: translate(-6px); } 75% { clip-path: inset(30% 0 45% 0); transform: translate(3px, 2px); } }

/* ---------- 起動ボタン ---------- */
.boot { position: absolute; inset: 0; z-index: 100; border: 0; background: rgba(0,0,0,.82); color: #fff; display: grid; place-content: center; gap: 18px; cursor: pointer; font-family: var(--body); }
.boot b { font-family: var(--heavy); font-weight: 400; font-size: 90px; }
.boot span { font-size: 32px; color: var(--muted); }
.boot.gone { display: none; }
#cam { position: absolute; inset: 0; }

/* 日本語を文節で折り返す（Chrome 119+） */
.headline, .teams-mini div, .label .ttl, .slot .who .ttl, .wait-copy p { word-break: auto-phrase; }

/* 結果発表：テーマ提供企業のロゴ */
.slot .co { flex: none; width: 250px; height: 92px; display: grid; place-items: center; border-radius: 14px; background: #fff; opacity: 0; transform: scale(.8); transition: opacity .5s .3s, transform .5s .3s cubic-bezier(.34, 1.56, .64, 1); }
.slot .co:empty { visibility: hidden; }
.slot.revealed .co { opacity: 1; transform: none; }
.slot .co img { max-width: 86%; max-height: 74%; object-fit: contain; }
.slot.winner .co { width: 300px; height: 120px; }
.slot .vt { min-width: 260px; }

/* 結果発表BGMのプレーヤー：画面外に置くと Chrome に止められるので、背景の後ろに隠す */
.rbgm { position: absolute; left: 0; top: 0; width: 200px; height: 200px; overflow: hidden; z-index: -1; opacity: .01; pointer-events: none; }

/* 締切後の「これから結果発表」 */
#scene-intro { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-bottom: 120px; }
body[data-scene="intro"] .meters { visibility: hidden; }
.intro-logo { width: 380px; filter: drop-shadow(0 0 30px rgba(255,59,71,.55)); }
#scene-intro.on .intro-logo { animation: introPop 1s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes introPop { from { transform: scale(.4) rotate(-8deg); opacity: 0; } }
.intro-k { font-family: var(--dot); font-size: 40px; color: var(--muted); letter-spacing: .2em; margin-top: 20px; }
.intro-t { font-family: var(--heavy); font-size: 150px; line-height: 1.15; margin-top: 10px; text-shadow: 0 0 40px rgba(245,229,0,.5); }
.intro-s { font-size: 44px; font-weight: 700; color: #dfe2ff; margin-top: 20px; }

/* ランキング表示：行が順に滑り込む（終わったら素の状態に戻すので、後の演出の transform とぶつからない） */
@keyframes slotIn { from { opacity: 0; transform: translateX(-80px); } }
.slot.enter { animation: slotIn .6s cubic-bezier(.34, 1.56, .64, 1) backwards; }