/* Caster view: a fixed 1920x1080 broadcast stage, scaled to fit any screen (caster.html). Builds on game.css. */
body.caster { overflow: hidden; height: 100dvh; background: radial-gradient(90% 70% at 50% 0%, #0f3a4c 0, transparent 60%), radial-gradient(80% 60% at 50% 110%, #2a1450 0, transparent 60%), #030d13; }
#stage {
  --scale: .5;
  position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform: translate(-50%, -50%) scale(var(--scale)); transform-origin: 50% 50%;
  display: grid; grid-template-rows: 84px 1fr 196px; gap: 12px; padding: 12px 20px 16px; box-sizing: border-box;
  font-size: 18px; color: var(--text); overflow: hidden;
  background: linear-gradient(180deg, #ffffff06, transparent 30%), radial-gradient(60% 50% at 50% 45%, #0f3a4d55, transparent 70%);
}
.boot { margin: auto; font: 700 40px var(--display); color: var(--muted); grid-row: 1 / -1; }

/* ───────── top bar ───────── */
.cb-top { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 24px; padding: 0 22px; border-radius: 20px; background: linear-gradient(180deg, #10384aee, #082431ee); box-shadow: inset 0 0 0 1px #ffffff1a, 0 10px 30px #0008; }
.cb-brand { display: flex; align-items: center; gap: 14px; }
.cb-brand img { height: 58px; filter: drop-shadow(0 3px 4px #000a); }
.cb-brand span { display: grid; white-space: nowrap; font: 700 26px/1 var(--display); color: #fff; letter-spacing: .02em; }
.cb-brand small { font: 800 13px/1.4 var(--body); color: var(--gold); letter-spacing: .3em; text-transform: uppercase; }
.cb-room { display: flex; align-items: baseline; gap: 10px; padding: 8px 16px; border-radius: 12px; background: #00000040; box-shadow: inset 0 0 0 1px #ffffff14; }
.cb-room small { font: 800 13px var(--body); color: var(--muted); letter-spacing: .14em; text-transform: uppercase; }
.cb-room b { font: 700 30px/1 var(--display); color: var(--gold); letter-spacing: .12em; }
.cb-mid { display: flex; align-items: center; justify-content: center; gap: 22px; }
.cb-live { white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 14px; border-radius: 999px; background: linear-gradient(180deg, #ff4f6d, #c0182c); font: 900 20px/1 var(--body); letter-spacing: .14em; color: #fff; box-shadow: 0 0 22px #ff2a4a66; }
.cb-live i { width: 12px; height: 12px; border-radius: 50%; background: #fff; animation: cb-blink 1.2s infinite; }
.cb-live em { font-style: normal; font-weight: 700; font-size: 14px; letter-spacing: .06em; opacity: .9; padding-left: 6px; border-left: 1px solid #fff6; }
.cb-live.demo { background: linear-gradient(180deg, #ffcb3c, #f08c12); color: #3a1d00; box-shadow: 0 0 22px #ffb03355; }
.cb-live.demo i { background: #3a1d00; }
.cb-turn { white-space: nowrap; font: 700 30px/1 var(--display); color: #fff; letter-spacing: .04em; }
.cb-clock { min-width: 120px; padding: 6px 14px; border-radius: 10px; background: #00000055; font: 800 30px/1 var(--body); font-variant-numeric: tabular-nums; color: #fff; text-align: center; box-shadow: inset 0 0 0 1px #ffffff14; }
.cb-right { display: flex; align-items: center; gap: 18px; }
.cb-audience { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; font: 700 18px var(--body); color: var(--muted); }
.cb-audience .ico { width: 28px; height: 28px; color: var(--air); }
.cb-audience b { font: 900 26px/1 var(--body); color: #fff; }
.cb-status { padding: 6px 12px; border-radius: 10px; background: #ff9d1c33; color: var(--gold); font: 800 15px var(--body); animation: cb-blink 1.4s infinite; }
.cb-keys { max-width: 250px; font: 600 12.5px/1.35 var(--body); color: #9fbac2aa; text-align: right; }
.cb-lang { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 0; border-radius: 10px; background: #ffffff14; color: #fff; font: 800 16px var(--body); }
.cb-lang .ico { width: 20px; height: 20px; }

/* ───────── main: columns + board ───────── */
.cb-main { display: grid; grid-template-columns: 1fr 754px 1fr; gap: 20px; min-height: 0; }
.cb-col { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.cb-board-wrap { position: relative; width: 754px; height: 754px; align-self: center; }
.cb-board { width: 754px; padding: 7px; border-radius: 24px; }
.cb-board .tile small { font-size: 11px; }
.cb-board .board-pawn { width: 7.6%; }

/* player panel */
.cb-panel {
  --pc: #3fe0c4; position: relative; flex: 1; min-height: 0; display: grid; gap: 10px; padding: 14px 16px; border-radius: 20px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--pc) 16%, #0c2b38), #071c26 70%); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pc) 35%, transparent), 0 10px 26px #0009;
  transition: box-shadow .3s, transform .3s, filter .3s;
  grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; align-content: start;
}
.cb-panel.active { box-shadow: inset 0 0 0 3px var(--pc), 0 0 34px color-mix(in srgb, var(--pc) 55%, transparent), 0 10px 26px #0009; }
.cb-panel.role-target { box-shadow: inset 0 0 0 3px #ff4f6d, 0 0 26px #ff4f6d55, 0 10px 26px #0009; }
.cb-panel.out { filter: grayscale(.85) brightness(.7); }
.cb-panel.role-champion { box-shadow: inset 0 0 0 3px var(--gold), 0 0 40px #ffc53399, 0 10px 26px #0009; }
.cb-id { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; min-width: 0; }
.cb-avatar { width: 58px; }
.cb-avatar .pawn-body b { font-size: 13px; }
.cb-name { display: grid; gap: 4px; min-width: 0; }
.cb-name b { font: 700 30px/1.05 var(--display); color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-shadow: 0 2px 0 #0008; }
.cb-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.cb-role, .cb-bot { padding: 3px 9px; border-radius: 7px; font: 900 13px/1.2 var(--body); font-style: normal; letter-spacing: .1em; color: #04121a; background: var(--pc); }
.cb-bot { background: #ffffff1c; color: var(--muted); }
.cb-aim { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 7px; font: 800 13px/1.2 var(--body); font-style: normal; color: #fff; background: #00000055; box-shadow: inset 0 0 0 2px var(--tc); max-width: 220px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cb-aim .ico { width: 15px; height: 15px; flex: none; }
/* target arrows: a chevron on the board side of the attacker (pointing out) and of the target (pointing in) */
.cb-chevron { position: absolute; top: 50%; width: 30px; height: 64px; margin-top: -32px; display: none; z-index: 3; pointer-events: none; background: var(--ac); filter: drop-shadow(0 0 10px var(--ac)); }
.left .cb-chevron { right: -26px; } .right .cb-chevron { left: -26px; }
.left .aiming .cb-chevron, .right .aimed .cb-chevron { display: block; clip-path: polygon(0 0, 100% 50%, 0 100%, 30% 50%); animation: cb-nudge-r .9s ease-in-out infinite; }
.right .aiming .cb-chevron, .left .aimed .cb-chevron { display: block; clip-path: polygon(100% 0, 0 50%, 100% 100%, 70% 50%); animation: cb-nudge-l .9s ease-in-out infinite; }
.cb-panel.aimed .cb-chevron { background: #ff4f6d; filter: drop-shadow(0 0 12px #ff4f6d); }
.cb-panel.live.aimed .cb-chevron { animation-duration: .45s; }
.cb-recent { display: grid; gap: 6px; margin: 0; padding: 12px 14px; list-style: none; border-radius: 14px; background: #00000026; align-self: start; }
.cb-recent li { display: grid; grid-template-columns: 42px 1fr; gap: 8px; font: 600 16px/1.3 var(--body); color: #cfe0e6; }
.cb-recent li span { font: 800 13px/1.6 var(--body); color: var(--muted); }
.cb-recent li:first-child { color: #fff; }
.cb-recent li.tone-hit { color: #ffb3bf; } .cb-recent li.tone-block, .cb-recent li.tone-heal { color: #b9e6ff; }
.role-defending .cb-role, .cb-role.defending { background: #4fb4ff; }
.role-target .cb-role { background: #ff4f6d; color: #fff; }
.role-out .cb-role { background: #333; color: #aaa; }
.role-champion .cb-role { background: var(--gold); color: #3a1d00; }
.cb-life { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; }
.cb-hpnum { display: flex; align-items: baseline; gap: 6px; min-width: 128px; justify-content: flex-end; }
.cb-hpnum strong { font: 700 40px/1 var(--display); color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 3px 0 #000a; }
.cb-hpnum small { font: 800 12px var(--body); color: var(--muted); letter-spacing: .14em; }
.danger .cb-hpnum strong { color: #ff8a9a; animation: cb-blink 1s infinite; }
.cb-hp.hp-bar { height: 22px; border-radius: 9px; }
.cb-hp .hp-fill, .cb-hp .hp-ghost { border-radius: 9px; }
.cb-hand { display: flex; gap: 10px; align-items: start; justify-content: flex-start; min-height: 0; }
.cb-card { --w: 150px; position: relative; flex: none; width: var(--w); container-type: inline-size; filter: drop-shadow(0 6px 10px #000a); }
.cb-card.empty { aspect-ratio: 5 / 7; border-radius: 10px; border: 2px dashed #ffffff22; background: #00000025; filter: none; }
.cb-card .card-crown { top: -10%; }
/* Panel cards always use the compact face (title, art, power) so they stay readable from the sofa. */
.cb-col .cb-card .card-face { padding: 3.5cqw; }
.cb-col .cb-card :is(.cf-brand, .cf-rules, .cf-logo, .cf-kind) { display: none; }
.cb-col .cb-card .cf-bg { inset: 3.5cqw; }
.cb-col .cb-card .cf-title { top: 3.5cqw; left: 3.5cqw; right: 3.5cqw; height: 22cqw; }
.cb-col .cb-card .cf-title b { font-size: 13.5cqw; -webkit-text-stroke-width: .9cqw; }
.cb-col .cb-card .cf-art { top: 25.5cqw; bottom: 3.5cqw; left: 3.5cqw; right: 3.5cqw; }
.cb-col .cb-card .cf-badge { top: auto; bottom: 7cqw; left: 6cqw; width: 26cqw; height: 26cqw; padding: 3.5cqw; border-radius: 6cqw; }
.cb-col .cb-card .cf-power { bottom: 7cqw; left: 30cqw; right: 4cqw; justify-content: flex-end; }
.cb-col .cb-card .cf-power b { padding: 3cqw 4.5cqw; font-size: 12cqw; border-radius: 4.5cqw; }
.cb-col .cb-card .cf-power b + b { display: none; }
.cb-mini-stats { display: flex; gap: 18px; font: 800 18px var(--body); color: var(--muted); }
.cb-mini-stats span { display: inline-flex; align-items: center; gap: 6px; }
.cb-mini-stats .ico { width: 22px; height: 22px; }
.cb-mini-stats b { color: #fff; font-variant-numeric: tabular-nums; }

/* one panel per column (2 players): big cards */
.k1 .cb-panel { grid-template-rows: auto auto auto 1fr auto; padding: 20px; gap: 16px; }
.k1 .cb-card { --w: 160px; }
.k1 .cb-avatar { width: 76px; }
.k1 .cb-name b { font-size: 38px; }
.k1 .cb-hpnum strong { font-size: 54px; }
.k1 .cb-hp.hp-bar { height: 30px; }
.k1 .cb-mini-stats { align-self: end; justify-content: space-between; padding: 14px 18px; border-radius: 14px; background: #00000030; font-size: 22px; }
.k1 .cb-mini-stats .ico { width: 28px; height: 28px; }
/* two panels per column (3-4 players) */
.k2 .cb-card { --w: 146px; }
/* three panels per column (5-6 players): identity on top, cards beside the stats */
.k3 .cb-panel { grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr; gap: 8px 12px; padding: 10px 14px; }
.k3 .cb-id, .k3 .cb-life { grid-column: 1 / -1; }
.k3 .cb-hand { grid-column: 2; grid-row: 3; gap: 8px; }
.k3 .cb-mini-stats { grid-column: 1; grid-row: 3; flex-direction: column; gap: 6px; align-self: center; font-size: 17px; }
.k3 .cb-card { --w: 92px; }
.k3 .cb-avatar { width: 46px; }
.k3 .cb-name b { font-size: 26px; }
.k3 .cb-hpnum strong { font-size: 32px; }
.k3 .cb-panel .cb-id { grid-row: 1; } .k3 .cb-life { grid-row: 2; }
.k3 .cb-tags .cb-bot { display: none; }
.k3 .cb-hp.hp-bar { height: 16px; }

/* board centre */
.cb-board .board-center { padding: 18px; }
.cb-center { position: relative; z-index: 1; display: grid; justify-items: center; align-content: center; gap: 16px; width: 100%; height: 100%; }
.cb-center-head { display: grid; justify-items: center; gap: 6px; text-align: center; }
.cb-center-head .kicker { font-size: 16px; }
.cb-center-head strong { font: 700 40px/1 var(--display); text-shadow: 0 3px 0 #000a; max-width: 560px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-center-head .cb-role { font-size: 15px; padding: 4px 12px; background: var(--gold); }
.cb-center-head .cb-role.defending { background: #4fb4ff; }
.cb-center-body { display: flex; align-items: center; justify-content: center; gap: 34px; }
.cb-center-card { position: relative; display: grid; justify-items: center; gap: 10px; }
.cb-center-card .cb-card.big { --w: 214px; }
.cb-center-card small { font: 700 17px var(--body); color: #fff; text-shadow: 0 2px 0 #000; max-width: 300px; text-align: center; }
.cb-center-card small .ico { width: 18px; height: 18px; vertical-align: -3px; }
.cb-center-card .rays { position: absolute; inset: -40%; z-index: -1; opacity: 0; pointer-events: none; background: repeating-conic-gradient(from 0deg, #ffffff22 0 8deg, transparent 8deg 22deg); -webkit-mask: radial-gradient(circle, #000 20%, transparent 65%); mask: radial-gradient(circle, #000 20%, transparent 65%); }
.cb-center-card.rarity-legendary .rays { opacity: 1; background: repeating-conic-gradient(from 0deg, #ffd84a55 0 8deg, transparent 8deg 22deg); animation: spin 9s linear infinite; }
.cb-center-card.rarity-mystery .rays { opacity: 1; background: repeating-conic-gradient(from 0deg, #a774ff44 0 8deg, transparent 8deg 22deg); animation: spin 14s linear infinite; }
.cb-center-card.fresh .cb-card { animation: cb-pop .55s cubic-bezier(.2, 1.4, .4, 1) both; }
.cb-center-card.incoming .cb-card { filter: drop-shadow(0 0 18px #ff4f6d99) drop-shadow(0 6px 10px #000a); }
.cb-center .dice-tray { gap: 22px; }
.cb-center-win { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; text-align: center; }
.cb-center-win .kicker { font-size: 20px; }
.cb-center-win h2 { margin: 0; font: 700 56px/1 var(--display); color: var(--pc); text-shadow: 0 4px 0 #000a, 0 0 30px color-mix(in srgb, var(--pc) 60%, transparent); }
.cb-center-win p { margin: 0; font: 800 22px var(--body); color: #fff; }
.cb-center-win small { margin-top: 8px; font: 700 16px var(--body); color: var(--muted); }
.cb-persona { width: 200px; aspect-ratio: 740 / 731; }
.cb-summary { margin-top: 10px; border-collapse: collapse; font: 700 18px var(--body); background: #00000040; border-radius: 12px; overflow: hidden; }
.cb-summary th, .cb-summary td { padding: 6px 14px; text-align: right; font-variant-numeric: tabular-nums; }
.cb-summary thead th { color: var(--muted); }
.cb-summary thead .ico { width: 20px; height: 20px; }
.cb-summary tbody th { text-align: left; color: #fff; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-summary tbody tr:first-child td { color: var(--gold); }
.cb-persona .pawn-body.big { width: 60%; }


/* stats overlay (S) */
.cb-stats { position: absolute; inset: 70px 10px auto; z-index: 25; padding: 22px 24px 18px; border-radius: 22px; background: #05161fee; box-shadow: inset 0 0 0 1px #ffffff22, 0 20px 50px #000c; backdrop-filter: blur(6px); }
.cb-stats h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 700 30px/1 var(--display); color: var(--gold); }
.cb-stats h3 .ico { width: 28px; height: 28px; color: var(--gold); }
.cb-stats table { width: 100%; border-collapse: collapse; font: 700 18px var(--body); }
.cb-stats th, .cb-stats td { padding: 9px 8px; text-align: right; border-bottom: 1px solid #ffffff12; font-variant-numeric: tabular-nums; }
.cb-stats thead th { font: 800 12.5px/1.2 var(--body); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; vertical-align: bottom; }
.cb-stats tbody th { text-align: left; color: #fff; white-space: nowrap; max-width: 210px; overflow: hidden; text-overflow: ellipsis; }
.cb-stats td.top { color: var(--gold); }
.cb-stats tr.out { opacity: .55; }
.cb-dot { display: inline-block; width: 12px; height: 12px; margin-right: 8px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 8px var(--pc); }

/* ───────── bottom: feed + highlights ───────── */
.cb-bottom { display: grid; grid-template-columns: 1fr 760px; gap: 16px; min-height: 0; }
#stage.no-highlights .cb-bottom { grid-template-columns: 1fr; }
.cb-feed, .cb-highlights { position: relative; display: grid; grid-template-rows: auto 1fr; min-height: 0; padding: 12px 18px; border-radius: 18px; background: linear-gradient(180deg, #0c2b38ee, #061923ee); box-shadow: inset 0 0 0 1px #ffffff14, 0 10px 26px #0008; overflow: hidden; }
.cb-feed h3, .cb-highlights h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 800 14px var(--body); color: var(--gold); letter-spacing: .16em; text-transform: uppercase; }
.cb-feed h3 .ico, .cb-highlights h3 .ico { width: 20px; height: 20px; }
.cb-feed ol, .cb-highlights ol { margin: 0; padding: 0; list-style: none; min-height: 0; overflow: hidden; }
.cb-feed li { display: grid; grid-template-columns: 56px 10px 1fr; align-items: center; gap: 10px; height: 29px; font: 600 19px/1.2 var(--body); color: #dce9ee; white-space: nowrap; }
.cb-feed li > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.cb-feed li:first-child { color: #fff; font-weight: 700; }
.cb-feed li:nth-child(n+4) { opacity: .7; }
.cb-feed li i { width: 10px; height: 10px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 8px var(--pc); }
.cb-feed li b { color: var(--gold); font-weight: 900; }
.cb-who { font-style: normal; font-weight: 800; }
.cb-feed li.tone-hit b { color: #ff8a9a; }
.cb-feed li.tone-heal b, .cb-feed li.tone-block b { color: #8dd8ff; }
.cb-feed li.tone-win { color: var(--gold); }
.cb-t { font: 800 14px var(--body); color: var(--muted); font-variant-numeric: tabular-nums; }
.cb-feed li.fresh { animation: cb-slide .45s cubic-bezier(.2, 1.2, .4, 1) both; }
.cb-highlights ol { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 66px; gap: 8px; align-content: start; }
.cb-highlights li { --tone: var(--gold); display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 10px; padding: 6px 12px 6px 8px; border-radius: 12px; background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 26%, #0c2b38), #0a2230); box-shadow: inset 3px 0 0 var(--tone); min-width: 0; }
.cb-highlights li.tone-red { --tone: #ff4f6d; } .cb-highlights li.tone-blue { --tone: #4fb4ff; } .cb-highlights li.tone-purple { --tone: #b98bff; }
.cb-hl-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #00000040; }
.cb-hl-ico .ico { width: 28px; height: 28px; color: var(--tone); }
.cb-hl-main { display: grid; min-width: 0; }
.cb-hl-main strong { font: 700 20px/1.1 var(--display); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-hl-main > span { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; }
.cb-hl-main > span > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cb-hl-main time { flex: none; }
.cb-hl-main span { font: 600 15px/1.25 var(--body); color: #cfe0e6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-hl-main span b { color: var(--gold); }
.cb-hl-main .ico { width: 14px; height: 14px; vertical-align: -2px; }
.cb-highlights time { font: 800 12px var(--body); color: var(--muted); font-variant-numeric: tabular-nums; }
.cb-highlights li.fresh { animation: cb-pop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.cb-highlights li.cb-hl-empty { grid-column: 1 / -1; display: block; background: none; box-shadow: none; padding: 16px 4px; font: 600 17px var(--body); color: var(--muted); }

/* crowd reactions */
.cb-crowd { position: absolute; right: 30px; bottom: 220px; width: 380px; height: 360px; pointer-events: none; z-index: 30; }
.cb-cheer { position: absolute; left: var(--x); bottom: 0; padding: 8px 16px; border-radius: 999px; background: #ffffffee; color: #04121a; font: 900 20px var(--body); box-shadow: 0 6px 16px #0008; animation: cb-rise 2.5s ease-out forwards; white-space: nowrap; }
.cb-cheer.r-fire { background: linear-gradient(180deg, #ffd84a, #ff7a2e); }
.cb-cheer.r-wow { background: linear-gradient(180deg, #d9c4ff, #a774ff); }
.cb-cheer.r-oof { background: linear-gradient(180deg, #ffd0d8, #ff8a9a); }
.cb-cheer.r-gg { background: linear-gradient(180deg, #b7ffe8, #3fe0c4); }

/* ───────── waiting screen ───────── */
.cb-wait { grid-row: 2 / -1; display: grid; justify-items: center; align-content: center; gap: 24px; text-align: center; padding-bottom: 40px; }
.cb-wait-logo { width: 360px; filter: drop-shadow(0 10px 20px #000a); }
.cb-wait h1 { margin: 0; font: 700 64px/1.05 var(--display); color: #fff; text-shadow: 0 4px 0 #000a; }
.cb-wait p { margin: 0; max-width: 1100px; font: 600 26px/1.35 var(--body); color: var(--muted); }
.cb-code { display: grid; justify-items: center; gap: 10px; }
.cb-code small { font: 800 18px var(--body); color: var(--gold); letter-spacing: .3em; text-transform: uppercase; }
.cb-code b { display: flex; gap: 14px; }
.cb-code b span { display: grid; place-items: center; width: 120px; height: 150px; border-radius: 22px; background: linear-gradient(180deg, #1b5068, #0a2532); box-shadow: inset 0 0 0 2px #ffffff22, 0 12px 30px #000a; font: 700 100px/1 var(--display); color: var(--gold); text-shadow: 0 5px 0 #000a; }
.cb-roster { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 0; padding: 0; list-style: none; }
.cb-roster li { display: grid; grid-template-columns: 52px auto; grid-template-rows: auto auto; align-items: center; column-gap: 12px; padding: 10px 20px 10px 12px; border-radius: 16px; background: #0c2b38; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pc) 40%, transparent); text-align: left; }
.cb-roster li .pawn-body { grid-row: 1 / 3; width: 52px; }
.cb-roster li b { font: 700 26px/1 var(--display); color: #fff; }
.cb-roster li small { font: 800 14px var(--body); color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.cb-roster li.ready small { color: var(--green); }
.cb-roster li.away { opacity: .55; }
.cb-share { display: flex; align-items: center; gap: 12px; font-size: 20px !important; }
.cb-share .ico { width: 24px; height: 24px; color: var(--air); }
.cb-share code { padding: 8px 14px; border-radius: 10px; background: #00000055; color: #fff; font: 600 20px ui-monospace, Menlo, Consolas, monospace; user-select: all; -webkit-user-select: all; }
.cb-wait .btn { font-size: 24px; padding: 18px 34px; text-decoration: none; }

/* ───────── small screens (laptop at low zoom, phone landscape) ───────── */
body.compact .cb-keys, body.compact .cb-audience small { display: none; }
body.compact .cb-feed li { font-size: 24px; height: 36px; }
body.compact .cb-feed li:nth-child(n+5) { display: none; }
body.compact .cb-hl-main strong { font-size: 24px; }
body.compact .cb-hl-main span { font-size: 18px; }
body.compact .cb-highlights ol { grid-auto-rows: 72px; }
body.compact .cb-name b { font-size: 36px; }
body.compact .k3 .cb-name b { font-size: 30px; }
body.compact .cb-mini-stats { font-size: 22px; }
body.compact .cb-brand span small { display: none; }
.rotate-hint { display: none; }
body.portrait .rotate-hint { position: fixed; inset: auto 0 0; z-index: 90; display: grid; place-items: center; padding: 14px; background: #000c; color: #fff; font: 700 15px var(--body); }

@keyframes cb-blink { 50% { opacity: .35; } }
@keyframes cb-nudge-r { 50% { transform: translateX(8px); } }
@keyframes cb-nudge-l { 50% { transform: translateX(-8px); } }
@keyframes cb-slide { from { opacity: 0; transform: translateX(-30px); } }
@keyframes cb-pop { from { opacity: 0; transform: scale(.7); } }
@keyframes cb-rise { 0% { opacity: 0; transform: translateY(20px) scale(.8); } 15% { opacity: 1; transform: translateY(0) scale(1.05); } 100% { opacity: 0; transform: translateY(-300px) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .cb-live i, .cb-status, .danger .cb-hpnum strong, .cb-chevron, .cb-feed li.fresh, .cb-highlights li.fresh, .cb-center-card.fresh .cb-card, .cb-cheer { animation: none !important; }
  .cb-cheer { opacity: 0; }
}
.cb-card.cb-hidden { aspect-ratio: 5 / 7; border-radius: 10px; display: grid; place-items: center; background: radial-gradient(circle, #1f5b74, #08202b 70%); box-shadow: inset 0 0 0 2px #ffc53388; filter: none; } .cb-card.cb-hidden span { font: 700 40px/1 var(--display, sans-serif); color: #ffc533; }