/* ------------------------------------------------------------------ fonts */
@font-face { font-family: "Nunito"; font-weight: 700; src: url("/static/vendor/fonts/nunito-700.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 800; src: url("/static/vendor/fonts/nunito-800.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 900; src: url("/static/vendor/fonts/nunito-900.woff2") format("woff2"); }

:root {
  --wii: #22b5ec;
  --wii-dark: #0b8fcb;
  --ink: #3b4b5e;
  --ink-soft: #7d8ea3;
  --panel: linear-gradient(180deg, #ffffff 0%, #f1f6fb 100%);
  --edge: #d3e1ee;
  --t0: #2f7cf6;
  --t1: #e8463c;
  --gold: #ffc531;
  --shadow: 0 6px 0 rgba(30, 70, 110, .12), 0 18px 40px rgba(10, 40, 80, .28);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  font-family: "Nunito", "Arial Rounded MT Bold", "Segoe UI", system-ui, sans-serif;
  font-weight: 800; color: var(--ink); background: #8fd0f5;
  user-select: none; -webkit-user-select: none;
}
#scene, #scene canvas { position: fixed; inset: 0; display: block; }
kbd {
  display: inline-block; min-width: 1.6em; padding: 0 .35em; border-radius: 6px;
  background: #fff; border: 2px solid var(--edge); border-bottom-width: 4px;
  font: inherit; font-size: .85em; color: var(--ink); text-align: center;
}

#vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,20,50,.28) 100%);
}
#flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 40; }
#flash.go { animation: flash .35s ease-out; }
@keyframes flash { from { opacity: .85; } to { opacity: 0; } }

/* --------------------------------------------------------------- screens */
.screen {
  position: fixed; inset: 0; z-index: 10;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.screen.active { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .45s ease; }
#hud { pointer-events: none; }
#hud.active { pointer-events: none; }

.panel {
  background: var(--panel); border: 3px solid var(--edge); border-radius: 26px;
  box-shadow: var(--shadow); padding: 22px 26px;
}
.panel h3 { margin: 0 0 14px; font-size: 21px; font-weight: 900; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.step {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(#5fd3ff, var(--wii-dark)); color: #fff; font-size: 17px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45);
}

.btn {
  font: inherit; font-weight: 900; font-size: 18px; color: var(--ink); cursor: pointer;
  padding: 12px 28px; border-radius: 999px; border: 3px solid var(--edge);
  background: linear-gradient(180deg, #fff, #e7eff7); position: relative; overflow: hidden;
  box-shadow: 0 4px 0 #c2d3e3, 0 8px 18px rgba(0,40,80,.15);
  transition: transform .15s cubic-bezier(.3,1.6,.6,1), box-shadow .15s;
}
.btn:hover { transform: translateY(-2px) scale(1.04); }
.btn:active { transform: translateY(2px) scale(.98); box-shadow: 0 1px 0 #c2d3e3; }
.btn.primary {
  color: #fff; border-color: #0d93cf;
  background: linear-gradient(180deg, #6bd6ff 0%, #22b5ec 50%, #0e9ad8 100%);
  box-shadow: 0 5px 0 #0a73a4, 0 10px 22px rgba(0,100,160,.35);
  text-shadow: 0 2px 0 rgba(0,70,110,.35);
}
.btn.primary::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: 3px; height: 45%;
  border-radius: 999px; background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,0));
}
.btn.big { font-size: 26px; padding: 16px 54px; }
.pill {
  background: rgba(255,255,255,.93); border: 3px solid var(--edge); border-radius: 999px;
  padding: 8px 20px; box-shadow: var(--shadow); font-weight: 900;
}

/* ----------------------------------------------------------------- title */
#title { display: grid; place-items: center; cursor: pointer;
  background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.15), rgba(0,40,90,.25)); }
.logo { text-align: center; transform: translateY(-4vh); animation: logo-in 1s cubic-bezier(.2,1.4,.4,1) both; }
.logo h1 {
  margin: 0; font-size: clamp(64px, 12vw, 168px); font-weight: 900; letter-spacing: .02em; color: #fff;
  text-shadow: 0 6px 0 var(--wii-dark), 0 10px 0 #0a6f9e, 0 18px 30px rgba(0,30,70,.45);
  -webkit-text-stroke: 3px var(--wii-dark); paint-order: stroke fill;
}
.logo-sub { margin: 8px 0 0; font-size: clamp(18px, 2.2vw, 30px); color: #fff; text-shadow: 0 3px 0 rgba(0,60,100,.5); }
.logo-ball {
  width: clamp(70px, 9vw, 120px); aspect-ratio: 1; margin: 0 auto -10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, #f4f1ea 45%, #d9d3c6 100%);
  box-shadow: 0 10px 24px rgba(0,30,70,.35), inset -6px -8px 0 rgba(0,0,0,.06);
  position: relative; animation: spin 6s linear infinite;
}
.logo-ball::before, .logo-ball::after {
  content: ""; position: absolute; top: 8%; bottom: 8%; width: 40%; border: 3px dashed #d8423a; border-radius: 50%;
}
.logo-ball::before { left: -18%; border-left-color: transparent; border-top-color: transparent; border-bottom-color: transparent; }
.logo-ball::after { right: -18%; border-right-color: transparent; border-top-color: transparent; border-bottom-color: transparent; }
.press {
  position: absolute; bottom: 12vh; left: 0; right: 0; text-align: center; font-size: 26px; color: #fff;
  text-shadow: 0 3px 0 rgba(0,60,100,.5); animation: blink 1.4s ease-in-out infinite;
}
@keyframes blink { 50% { opacity: .35; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes logo-in { from { transform: translateY(-30vh) scale(.6); opacity: 0; } }

/* ----------------------------------------------------------------- lobby */
#lobby { display: flex; flex-direction: column; padding: 2.5vh 3vw; gap: 2vh; background: rgba(210,235,250,.35); backdrop-filter: blur(2px); }
.lobby-head h2 {
  margin: 0; text-align: center; font-size: 40px; font-weight: 900; color: #fff;
  text-shadow: 0 4px 0 var(--wii-dark), 0 8px 18px rgba(0,40,80,.35);
}
.lobby-grid { flex: 1; display: grid; grid-template-columns: 1fr 1.35fr 1fr; gap: 2vw; min-height: 0; }
.lobby-grid .panel { overflow: auto; }
.qr { width: 190px; height: 190px; margin: 0 auto 10px; background: #fff; border-radius: 16px; padding: 10px; border: 3px solid var(--edge); display: grid; place-items: center; }
.qr svg { width: 100%; height: 100%; }
.qr.off { display: none; }
.url { text-align: center; font-size: 16px; color: var(--wii-dark); word-break: break-all; margin-bottom: 10px; }
.steps { margin: 0; padding-left: 22px; color: var(--ink-soft); font-size: 15px; line-height: 1.6; font-weight: 700; }
.steps b { color: var(--ink); }

.team-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.team-card { border-radius: 20px; padding: 12px; min-height: 170px; border: 3px solid; }
.team-card.t0 { border-color: #a9c9fb; background: linear-gradient(#eef5ff, #dce9ff); }
.team-card.t1 { border-color: #f7b4ae; background: linear-gradient(#fff1ef, #ffe0dc); }
.team-title { font-size: 19px; font-weight: 900; margin-bottom: 8px; }
.t0 .team-title { color: var(--t0); } .t1 .team-title { color: var(--t1); }
.team-title small { font-size: 13px; color: var(--ink-soft); margin-left: 4px; }
.slot-list { display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.bench { margin-top: 14px; display: flex; gap: 10px; align-items: flex-start; }
.bench-label { padding-top: 10px; color: var(--ink-soft); font-size: 15px; }
.bench .slot-list { flex: 1; flex-direction: row; flex-wrap: wrap; }
.hint { margin: 12px 0 0; font-size: 14px; color: var(--ink-soft); font-weight: 700; }
.cpu-slot {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px;
  background: rgba(255,255,255,.6); border: 2px dashed rgba(0,0,0,.12); color: var(--ink-soft); font-size: 16px;
}
.ctrl {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 14px;
  background: #fff; border: 2px solid var(--edge); box-shadow: 0 3px 0 rgba(0,40,80,.08); font-size: 16px;
}
.ctrl .dot { width: 10px; height: 10px; border-radius: 50%; background: #35d07f; flex: none; box-shadow: 0 0 0 3px rgba(53,208,127,.2); }
.ctrl .dot.off { background: #e05656; box-shadow: 0 0 0 3px rgba(224,86,86,.2); }
.ctrl .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctrl .meter { width: 46px; height: 10px; border-radius: 6px; background: #e7eef5; overflow: hidden; flex: none; }
.ctrl .meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #35d07f, #ffc531, #ff6b3d); transition: width .08s; }
.ctrl .cal { font-size: 12px; color: #d9822b; flex: none; }
.ctrl .cal.ok { color: #2fb36c; }
.ctrl .mv { font: inherit; font-size: 14px; border: 0; background: #edf3f9; color: var(--ink); width: 26px; height: 26px; border-radius: 8px; cursor: pointer; flex: none; }
.ctrl .mv:hover { background: var(--wii); color: #fff; }

.settings label { display: block; margin: 12px 0 6px; font-size: 15px; color: var(--ink-soft); }
.settings label span { float: right; color: var(--wii-dark); }
.seg { display: flex; background: #e9f0f7; border-radius: 999px; padding: 4px; gap: 4px; }
.seg button {
  flex: 1; font: inherit; font-weight: 900; font-size: 15px; color: var(--ink-soft); border: 0; padding: 9px 6px;
  background: transparent; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s, transform .15s;
}
.seg button:hover { color: var(--ink); }
.seg button.on { background: linear-gradient(#6bd6ff, #18a9e3); color: #fff; box-shadow: 0 3px 0 #0a73a4; }
input[type=range] { width: 100%; accent-color: var(--wii); }
.howto { margin-top: 16px; display: grid; gap: 10px; font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.howto b { display: block; color: var(--ink); font-size: 15px; }
.howto div { background: #f1f6fb; border-radius: 14px; padding: 10px 12px; }
.lobby-foot { display: flex; align-items: center; justify-content: center; gap: 20px; }
.or { color: #fff; font-size: 18px; text-shadow: 0 2px 0 rgba(0,60,100,.5); }

/* ------------------------------------------------------------------- HUD */
#scorebug {
  position: absolute; top: 22px; left: 22px; display: flex; align-items: stretch; gap: 0;
  background: var(--panel); border: 3px solid var(--edge); border-radius: 22px; box-shadow: var(--shadow); overflow: hidden;
  transform-origin: top left; animation: drop-in .6s cubic-bezier(.2,1.4,.4,1) both;
}
.sb-teams { padding: 8px 4px 8px 12px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.sb-row { display: flex; align-items: center; gap: 8px; font-size: 21px; height: 32px; }
.sb-row .chip { width: 14px; height: 26px; border-radius: 6px; }
.sb-row .name { width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-row .bat-ind { font-size: 13px; color: var(--wii); opacity: 0; }
.sb-row.batting .bat-ind { opacity: 1; }
.sb-row .runs {
  min-width: 42px; text-align: center; font-size: 25px; font-weight: 900; color: #fff; border-radius: 10px;
  background: linear-gradient(#55657a, #3b4b5e); padding: 0 6px;
}
.sb-row .runs.bump { animation: bump .5s cubic-bezier(.2,2,.4,1); }
.sb-side { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 12px; gap: 4px; border-left: 3px solid var(--edge); }
.inning { font-size: 22px; display: flex; align-items: center; gap: 2px; }
.inning .arrow { font-size: 13px; color: var(--wii); }
.diamond { position: relative; width: 42px; height: 34px; }
.diamond i { position: absolute; width: 13px; height: 13px; transform: rotate(45deg); background: #dfe7ef; border: 2px solid #c4d2df; border-radius: 2px; transition: background .25s; }
.diamond i[data-b="2"] { left: 14px; top: 1px; }
.diamond i[data-b="3"] { left: 2px; top: 13px; }
.diamond i[data-b="1"] { left: 26px; top: 13px; }
.diamond i.on { background: var(--gold); border-color: #e09a00; box-shadow: 0 0 8px rgba(255,197,49,.8); }
.sb-count { display: flex; flex-direction: column; justify-content: center; padding: 6px 14px; gap: 3px; border-left: 3px solid var(--edge); background: rgba(240,246,251,.8); }
.cnt { display: flex; align-items: center; gap: 5px; font-size: 14px; color: var(--ink-soft); }
.cnt span { width: 14px; }
.cnt i { width: 14px; height: 14px; border-radius: 50%; background: #dbe4ec; border: 2px solid #c6d3df; transition: background .2s, transform .2s; }
.balls i.on { background: #3fd07e; border-color: #23a95d; transform: scale(1.1); }
.strikes i.on { background: #ffbf2e; border-color: #e09a00; transform: scale(1.1); }
.outs i.on { background: #ff5a4a; border-color: #d23a2c; transform: scale(1.1); }

#pitch-info { position: absolute; top: 26px; right: 26px; display: flex; gap: 14px; font-size: 20px; opacity: 0; transform: translateY(-12px); transition: opacity .3s, transform .3s; }
#pitch-info.show { opacity: 1; transform: none; }
#pitch-info .pspeed { color: var(--wii-dark); }
#matchup { position: absolute; top: 140px; left: 22px; font-size: 16px; opacity: 0; transition: opacity .3s; }
#matchup.show { opacity: 1; }
#derby-hud { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); display: none; gap: 22px; font-size: 19px; }
#derby-hud b { color: var(--wii-dark); font-size: 23px; margin-left: 6px; }
body.derby #derby-hud { display: flex; }
body.derby #scorebug { display: none; }

#pitch-pick { position: absolute; bottom: 110px; left: 50%; transform: translateX(-50%); display: none; gap: 10px; }
#pitch-pick.show { display: flex; }
.pp { background: rgba(255,255,255,.92); border: 3px solid var(--edge); border-radius: 16px; padding: 8px 14px; font-size: 16px; display: flex; gap: 8px; align-items: center; transition: transform .15s; }
.pp.on { border-color: var(--wii); background: #e3f6ff; transform: translateY(-6px); box-shadow: 0 6px 0 rgba(10,115,164,.25); }

#timing {
  position: absolute; bottom: 104px; left: 50%; width: 420px; margin-left: -210px; text-align: center;
  background: rgba(255,255,255,.93); border: 3px solid var(--edge); border-radius: 22px; box-shadow: var(--shadow);
  padding: 10px 18px 12px; opacity: 0; transform: translateY(20px) scale(.95); transition: opacity .25s, transform .3s cubic-bezier(.2,1.5,.4,1);
}
#timing.show { opacity: 1; transform: none; }
.t-label { font-size: 22px; font-weight: 900; margin-bottom: 6px; }
.t-label.perfect { color: #e6a100; } .t-label.good { color: #23a95d; } .t-label.off { color: #e05656; }
.t-bar { position: relative; height: 22px; border-radius: 11px; background: linear-gradient(90deg, #ffd9d6, #eaf6ee 35%, #eaf6ee 65%, #ffd9d6); display: flex; justify-content: space-between; align-items: center; padding: 0 10px; font-size: 11px; color: var(--ink-soft); }
.t-bar .sweet { position: absolute; left: 44%; width: 12%; top: 0; bottom: 0; background: rgba(255,197,49,.55); border-radius: 4px; }
.t-mark { position: absolute; top: -5px; width: 6px; height: 32px; margin-left: -3px; border-radius: 3px; background: var(--ink); left: 50%; transition: left .35s cubic-bezier(.2,1.4,.4,1); box-shadow: 0 0 0 2px #fff; }
.t-stats { margin-top: 6px; font-size: 14px; color: var(--ink-soft); }

#hit-info { position: absolute; top: calc(36% - 70px); left: 50%; transform: translate(-50%, 0) scale(.8); font-size: 22px; opacity: 0; transition: opacity .3s, transform .4s cubic-bezier(.2,1.5,.4,1); }
#hit-info.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
#prompt { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); font-size: 20px; opacity: 0; transition: opacity .3s; white-space: nowrap; }
#prompt.show { opacity: 1; }
#ctrls { position: absolute; bottom: 30px; left: 22px; display: flex; flex-direction: column; gap: 8px; }
#ctrls .ctrl { font-size: 15px; }
#ctrls .role { font-size: 12px; color: #fff; background: var(--wii); padding: 1px 8px; border-radius: 999px; }
#help-keys { position: absolute; bottom: 8px; right: 14px; font-size: 13px; color: rgba(255,255,255,.85); text-shadow: 0 1px 2px rgba(0,0,0,.5); }

/* ---------------------------------------------------------------- calibration */
#calib-panel {
  position: absolute; top: 22px; left: 22px; width: 330px; padding: 16px 18px; display: none;
  background: var(--panel); border: 3px solid var(--edge); border-radius: 22px; box-shadow: var(--shadow);
}
body.calibrating #calib-panel { display: block; }
body.calibrating #scorebug, body.calibrating #matchup, body.calibrating #pitch-info { display: none; }
.cp-title { font-size: 20px; margin-bottom: 8px; }
.cp-title b { color: var(--wii-dark); }
.cp-steps { margin: 0; padding-left: 22px; font-size: 17px; line-height: 1.8; color: var(--ink-soft); }
.cp-steps li.now { color: var(--ink); font-weight: 900; }
.cp-steps li.done { color: #23a95d; }
.cp-steps li.done::marker { content: "\2713  "; }
.cp-steps span { color: var(--wii-dark); }
.cp-errs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cp-errs span { padding: 2px 9px; border-radius: 99px; background: #eef4f9; font-size: 14px; }
.cp-actions { display: flex; gap: 8px; margin-top: 12px; }
.cp-actions .btn { flex: 1; padding: 8px 10px; font-size: 15px; }
.pin { margin-top: 8px; font-size: 16px; color: var(--ink-soft); display: none; }
.pin.show { display: block; }
.pin b { font-size: 26px; color: var(--ink); letter-spacing: 3px; margin-left: 6px; }
.slot-list .ctrl { flex-wrap: wrap; row-gap: 6px; }
.slot-list .ctrl .nm { min-width: 60px; }
.ctrl .prof-row { flex-basis: 100%; display: flex; align-items: center; gap: 6px; padding-left: 18px; }
.ctrl .prof { font-size: 12px; padding: 1px 7px; border-radius: 99px; background: #eef4f9; color: var(--ink-soft); white-space: nowrap; }
.ctrl .prof.ok { background: #e3f6ea; color: #1d8a4b; }
.ctrl .calib-btn { font: inherit; font-size: 12px; border: 0; border-radius: 99px; padding: 2px 9px; cursor: pointer;
                   background: var(--wii); color: #fff; }
.lab-link { color: var(--wii-dark); }

/* ---------------------------------------------------------------- banner */
#banner { position: fixed; top: 36%; left: 0; right: 0; text-align: center; z-index: 30; pointer-events: none; opacity: 0; }
#banner .b-main {
  font-size: clamp(56px, 9vw, 130px); font-weight: 900; letter-spacing: .02em; color: #fff; line-height: 1;
  -webkit-text-stroke: 4px var(--bc, #0b8fcb); paint-order: stroke fill;
  text-shadow: 0 6px 0 var(--bc, #0b8fcb), 0 14px 26px rgba(0,30,70,.4);
}
#banner .b-sub { margin-top: 12px; font-size: clamp(20px, 2.4vw, 34px); color: #fff; text-shadow: 0 3px 0 rgba(0,40,80,.55); }
#banner.show { animation: banner 1.7s cubic-bezier(.2,1.2,.4,1) both; }
#banner.long { animation-duration: 3s; }
@keyframes banner {
  0% { opacity: 0; transform: scale(2.4); }
  14% { opacity: 1; transform: scale(.92); }
  22% { transform: scale(1.05); }
  30% { transform: scale(1); }
  82% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.9) translateY(-20px); }
}
#banner.k-strike, #banner.k-strikeout { --bc: #e08a00; }
#banner.k-ball, #banner.k-walk { --bc: #23a95d; }
#banner.k-out { --bc: #d23a2c; }
#banner.k-foul { --bc: #7d8ea3; }
#banner.k-hit { --bc: #0b8fcb; }
#banner.k-calib, #banner.k-calib_done { --bc: #0b8fcb; }
#banner.k-error { --bc: #8a5cf0; }
#banner.k-home_run .b-main {
  background: linear-gradient(180deg, #fff6c9 0%, #ffd23f 45%, #ff9d00 100%); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-stroke: 4px #b35d00; text-shadow: none; filter: drop-shadow(0 6px 0 #b35d00) drop-shadow(0 14px 20px rgba(0,0,0,.35));
}

/* ------------------------------------------------------------ intro card */
#intro-card { position: fixed; inset: 0; z-index: 25; pointer-events: none; display: grid; place-content: center; justify-items: center; opacity: 0; }
#intro-card.show { opacity: 1; }
.ribbon {
  width: 100vw; padding: 18px 0; text-align: center; transform: translateX(-110%);
  background: linear-gradient(180deg, #5fd3ff 0%, #22b5ec 55%, #0e95d2 100%);
  border-top: 5px solid #fff; border-bottom: 5px solid #fff; box-shadow: 0 10px 30px rgba(0,30,70,.35);
}
.ribbon-text { font-size: clamp(40px, 6vw, 86px); font-weight: 900; color: #fff; text-shadow: 0 5px 0 rgba(0,60,100,.4); letter-spacing: .03em; }
#intro-card.show .ribbon { animation: ribbon 2.8s cubic-bezier(.2,1,.3,1) both; }
@keyframes ribbon { 0% { transform: translateX(-110%); } 18% { transform: translateX(0); } 82% { transform: translateX(0); } 100% { transform: translateX(110%); } }
.intro-sub { margin-top: 16px; font-size: 30px; color: #fff; text-shadow: 0 3px 0 rgba(0,40,80,.6); opacity: 0; }
#intro-card.show .intro-sub { animation: fade-up 2.8s ease both; }
@keyframes fade-up { 0%, 15% { opacity: 0; transform: translateY(20px); } 25%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }

.linescore { border-collapse: separate; border-spacing: 0; background: var(--panel); border: 3px solid var(--edge); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); font-size: 18px; }
#intro-card .linescore { margin-top: 22px; opacity: 0; }
#intro-card.show .linescore.has { animation: fade-up 2.8s ease both; }
.linescore th, .linescore td { padding: 6px 12px; text-align: center; min-width: 38px; }
.linescore th { color: var(--ink-soft); font-size: 14px; background: #eef4fa; }
.linescore td.tn { text-align: left; min-width: 120px; }
.linescore td.r { background: #3b4b5e; color: #fff; font-weight: 900; }
.linescore tr + tr td { border-top: 2px solid var(--edge); }

/* --------------------------------------------------------- pause/results */
#pause, #results { display: grid; place-items: center; background: rgba(10,40,80,.35); backdrop-filter: blur(3px); }
.center-panel { display: flex; flex-direction: column; gap: 14px; align-items: stretch; min-width: 320px; text-align: center; }
.center-panel h2 { margin: 0 0 6px; font-size: 40px; font-weight: 900; }
.results-panel { text-align: center; min-width: 620px; animation: drop-in .6s cubic-bezier(.2,1.4,.4,1) both; }
.res-title { font-size: 56px; font-weight: 900; color: var(--wii-dark); line-height: 1.05; }
.res-sub { font-size: 26px; color: var(--ink-soft); margin: 6px 0 16px; }
.res-line { margin: 0 auto 16px; }
.res-stats { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px 20px; margin: 0 auto 20px; max-width: 520px; font-size: 18px; }
.res-stats .lbl { color: var(--ink-soft); font-size: 15px; align-self: center; }
.res-stats .v0 { text-align: right; color: var(--t0); } .res-stats .v1 { text-align: left; color: var(--t1); }
.res-stats .big { grid-column: 1 / -1; font-size: 30px; color: var(--ink); }
.res-buttons { display: flex; gap: 14px; justify-content: center; }
.results-panel .or { color: var(--ink-soft); text-shadow: none; margin-top: 12px; font-size: 16px; }

#offline { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 50; display: none; color: #d23a2c; }
#offline.show { display: block; }

@keyframes drop-in { from { transform: translateY(-40px) scale(.9); opacity: 0; } }
@keyframes bump { 50% { transform: scale(1.35); } }

@media (max-width: 1100px) {
  .lobby-grid { grid-template-columns: 1fr 1fr; }
  .lobby-grid .join { grid-column: 1 / -1; }
}

/* join steps: home Wi-Fi (self-signed certificate) vs a hosted site */
body.hosted .local-only, body:not(.hosted) .hosted-only { display: none; }