/* =====================================================================
   Record boards: plaques, whiteboard, club walls, Circle of Trust,
   race trophies, the Heavyweight belt, Royal Quadrant shields.
   Metal and wood are layered gradients (no images, no backdrop-filter).
   ===================================================================== */

/* ---------- menu entry ---------- */
.rec-btn{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:6px 18px 6px 12px; border-radius:999px; font-weight:700; font-size:16px; letter-spacing:.04em; color:#ffe7a3;
  background:linear-gradient(180deg, rgba(255,200,58,.22), rgba(255,200,58,.06)); border:1px solid rgba(255,200,58,.55); box-shadow:0 0 18px rgba(255,200,58,.18)}
.rec-btn svg{width:22px; height:22px}
.rec-btn:active{transform:scale(.96)}

/* ---------- screen ---------- */
#scr-records{grid-template-rows:auto auto minmax(0,1fr); gap:10px}
.rec-head{display:flex; align-items:center; gap:14px}
.rec-word{font-family:var(--num); font-size:26px; letter-spacing:.08em; background:linear-gradient(180deg,#fff7d0 0%,#ffd766 45%,#e09000 55%,#fff1b8 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 2px 0 rgba(0,0,0,.5))}
.rec-tabs{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 6px; scrollbar-width:none}
.rec-tabs::-webkit-scrollbar{display:none}
.rtab{flex:none; min-height:46px; padding:8px 18px; border-radius:999px; font-weight:700; font-size:16px; white-space:nowrap; color:#c9d6ff; background:rgba(120,160,255,.1); border:1px solid rgba(120,160,255,.28)}
.rtab.on{color:#1a1000; background:linear-gradient(180deg,#fff1b0,#ffc83a 60%,#e09000); border-color:#fff1b0; box-shadow:0 0 22px rgba(255,200,58,.45)}
.rec-stage{overflow:auto; border-radius:24px; -webkit-overflow-scrolling:touch}

.rs{--tint1:rgba(47,123,255,.22); --tint2:rgba(9,14,38,.9); min-height:100%; padding:18px 18px 28px; border-radius:24px; border:1px solid var(--edge);
  background:radial-gradient(ellipse at 50% 0%, var(--tint1), transparent 60%), linear-gradient(180deg, rgba(20,30,70,.6), var(--tint2))}
.rs-cricket{--tint1:rgba(46,230,120,.22); --tint2:rgba(3,20,14,.92)}
.rs-sniper{--tint1:rgba(170,190,160,.18); --tint2:rgba(10,14,12,.94)}
.rs-bermuda{--tint1:rgba(57,213,255,.25); --tint2:rgba(3,22,34,.94)}
.rs-archery{--tint1:rgba(120,220,90,.2); --tint2:rgba(14,20,8,.94)}
.rs-race{--tint1:rgba(255,150,80,.24); --tint2:rgba(26,10,34,.94)}
.rs-belt{--tint1:rgba(255,45,85,.28); --tint2:rgba(16,4,10,.95)}
.rs-royal{--tint1:rgba(169,139,255,.3); --tint2:rgba(14,6,34,.95)}
.rs-mech{--tint1:rgba(57,213,255,.26); --tint2:rgba(4,12,28,.95)}

.rs-banner{text-align:center; margin-bottom:16px}
.rs-title{margin:4px 0 0; font-family:var(--num); font-weight:400; font-size:clamp(34px, 5.4vw, 60px); letter-spacing:.05em; line-height:1;
  background:linear-gradient(180deg,#ffffff 0%,#dfe8ff 45%,#8fb0ff 55%,#ffffff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 4px 0 rgba(0,0,0,.45))}
.rs-cricket .rs-title{background-image:linear-gradient(180deg,#eafff0,#5dff9a 50%,#10a050 55%,#c8ffd8)}
.rs-archery .rs-title{background-image:linear-gradient(180deg,#f4ffe0,#9dff5a 50%,#3a8a10 55%,#e8ffc8)}
.rs-mech .rs-title{background-image:linear-gradient(180deg,#eefaff,#8fe4ff 45%,#2a7ab0 55%,#dff6ff)}
.rs-race .rs-title, .rs-royal .rs-title, .rs-belt .rs-title, .rs-bermuda .rs-title{background-image:linear-gradient(180deg,#fff7d0,#ffd766 45%,#e09000 55%,#fff1b8)}

.rs-boards{display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:22px; align-items:start; justify-items:center}
.rs-boards > *{width:100%; animation:recIn .55s cubic-bezier(.2,1.2,.4,1) both}
.rs-boards > *:nth-child(2){animation-delay:.08s} .rs-boards > *:nth-child(3){animation-delay:.16s} .rs-boards > *:nth-child(4){animation-delay:.24s}
@keyframes recIn{from{opacity:0; transform:translateY(26px) scale(.96)}}
.rs-countup, .rs-x01{grid-template-columns:minmax(280px, 1fr) minmax(0, 1.7fr)}
.rs-archery{grid-template-columns:repeat(2, minmax(0, 1fr))}
.rs-archery .cot{grid-column:1 / -1}
.rs-monsters{grid-template-columns:1fr}
.rs-bulls{grid-template-columns:repeat(4, minmax(0, 1fr))}
.rs-bigbull{grid-template-columns:repeat(2, minmax(0, 1fr))}

.plq-note{margin-top:8px; text-align:center; font-size:13px; font-weight:600; color:var(--muted)}
.plq-next{list-style:none; margin:10px auto 0; padding:0; width:100%; max-width:380px; display:flex; flex-direction:column; gap:6px}
.plq-next li{display:flex; align-items:center; gap:10px; padding:7px 14px 7px 7px; border-radius:999px; background:rgba(4,7,22,.5); border:1px solid rgba(140,175,255,.2); font-weight:700}
.plq-next em{width:28px; height:28px; display:grid; place-items:center; border-radius:50%; font-style:normal; font-family:var(--num); font-size:14px; color:#08102a; background:linear-gradient(145deg,#fff,#b8c4dc)}
.plq-next li:nth-child(2) em{background:linear-gradient(145deg,#ffe0c0,#c8743a)}
.plq-next span{margin-left:auto; font-family:var(--num); font-weight:400; color:#ffd766}

/* ---------- plaques ---------- */
.plq{display:flex; flex-direction:column; align-items:center}
.plq-body{--metal:linear-gradient(135deg,#6a3e00 0%,#ffd86a 22%,#fff4c0 32%,#d49a1a 50%,#ffe38a 68%,#8a5400 100%); --ink:#3a2200; --inset:linear-gradient(180deg,#140e04,#2a1c08); --val:linear-gradient(180deg,#fffdf0,#ffd766 55%,#e09000);
  position:relative; width:100%; max-width:380px; padding:18px 18px 20px; border-radius:18px; background:var(--metal); overflow:hidden;
  box-shadow:0 22px 44px rgba(0,0,0,.55), inset 0 2px 0 rgba(255,255,255,.65), inset 0 -4px 0 rgba(0,0,0,.35)}
.plq-steel .plq-body{--metal:linear-gradient(135deg,#5a6470 0%,#e8eef6 24%,#ffffff 32%,#9aa6b4 52%,#dfe6ee 70%,#4a5460 100%); --ink:#1a222c; --inset:linear-gradient(180deg,#0a0e14,#1a222c); --val:linear-gradient(180deg,#ffffff,#cfe0f0 55%,#7a90a8)}
.plq-brass .plq-body{--metal:linear-gradient(135deg,#4a2e08 0%,#c89a4a 24%,#f0d49a 32%,#a8742a 52%,#d8b070 70%,#5a3a10 100%); --ink:#2a1804; --inset:linear-gradient(180deg,#1a1006,#2e1e0c); --val:linear-gradient(180deg,#fff4da,#e8c07a 55%,#a8742a)}
.plq-wood .plq-body{--metal:repeating-linear-gradient(8deg, rgba(0,0,0,.08) 0 3px, transparent 3px 11px), linear-gradient(135deg,#5a3212,#a8703a 35%,#7a4a20 60%,#4a2a0e); --ink:#fff1d0;
  --inset:radial-gradient(ellipse at 50% 30%, #fff6dc, #e8cf9a); --val:linear-gradient(180deg,#5a3212,#2a1406)}
.plq-wood .plq-label span{text-shadow:0 2px 0 rgba(0,0,0,.6)}
.plq-wood .plq-name{color:#3a2006; text-shadow:none}
.plq-wood .plq-date{color:#6a4a20}
.plq-neon .plq-body{--metal:linear-gradient(180deg,#07140e,#03100a); --ink:#5dff9a; --inset:linear-gradient(180deg,#010805,#03120a); --val:linear-gradient(180deg,#eafff0,#5dff9a 60%,#10c060);
  border:2px solid #3cf07a; box-shadow:0 0 30px rgba(60,240,122,.45), inset 0 0 30px rgba(60,240,122,.15)}
.plq-neon .plq-label span{text-shadow:0 0 12px #3cf07a}
.plq-neon .scr{display:none}
.plq-label{text-align:center}
.plq-label span{font-family:var(--num); font-size:26px; letter-spacing:.08em; color:var(--ink); text-shadow:0 1px 0 rgba(255,255,255,.55)}
.plq-inset{margin-top:12px; padding:16px 12px 14px; border-radius:12px; background:var(--inset); text-align:center; box-shadow:inset 0 4px 12px rgba(0,0,0,.65), 0 1px 0 rgba(255,255,255,.45)}
.plq-val{font-family:var(--num); font-size:clamp(46px, 6.5vw, 74px); line-height:1.05; background:var(--val); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 3px 0 rgba(0,0,0,.35))}
.plq-name{margin-top:6px; font-family:var(--num); font-size:28px; letter-spacing:.06em; text-transform:uppercase; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.plq-date{margin-top:4px; font-size:13px; font-weight:600; color:rgba(255,255,255,.6)}
.scr{position:absolute; width:14px; height:14px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #fff, #b8b8b8 45%, #5a5a5a); box-shadow:0 1px 2px rgba(0,0,0,.5)}
.scr::after{content:""; position:absolute; left:2px; right:2px; top:6px; height:2px; background:rgba(0,0,0,.55); transform:rotate(35deg)}
.scr.s1{left:8px; top:8px} .scr.s2{right:8px; top:8px} .scr.s3{left:8px; bottom:8px} .scr.s4{right:8px; bottom:8px}
.plq-shine{position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.5) 50%, transparent 62%); transform:translateX(-130%); animation:plqShine 6s ease-in-out infinite}
.plq:nth-child(2) .plq-shine{animation-delay:1.5s} .plq:nth-child(3) .plq-shine{animation-delay:3s}
@keyframes plqShine{0%,70%{transform:translateX(-130%)} 100%{transform:translateX(130%)}}

/* ---------- whiteboard ---------- */
.wb{display:flex; flex-direction:column; align-items:center}
.wb-title{font-family:var(--num); font-size:clamp(24px, 3.4vw, 36px); letter-spacing:.04em; color:#46e85a; -webkit-text-stroke:2px #0a3a10; paint-order:stroke fill; text-shadow:0 4px 0 #0a3a10; margin-bottom:10px; text-align:center}
.wb-frame{width:100%; padding:12px 12px 0; border-radius:10px; background:linear-gradient(180deg,#f4f7fa,#9aa4b0 50%,#dfe5ec); box-shadow:0 20px 40px rgba(0,0,0,.5), inset 0 1px 0 #fff}
.wb-surface{border-radius:4px; padding:8px 10px 12px; overflow-x:auto;
  background:radial-gradient(ellipse at 22% 30%, rgba(40,80,160,.05), transparent 30%), radial-gradient(ellipse at 76% 70%, rgba(0,0,0,.04), transparent 35%), linear-gradient(135deg,#ffffff,#eef2f6 60%,#f8fafc);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.25)}
.wb-table{width:100%; border-collapse:collapse; table-layout:fixed; min-width:480px}
.wb-table th, .wb-table td{border-bottom:3px solid #1c1c1c; padding:6px 6px 4px; height:48px; vertical-align:middle}
.wb-table td, .wb-table thead th:not(.wb-lbl){border-left:3px solid #1c1c1c}
.wb-table thead th{height:40px; font-family:var(--num); font-weight:400; color:#1f4fd6; font-size:16px; text-align:left}
.wb-table col, .wb-lbl{width:34%}
.wb-lbl{font-family:var(--num); font-weight:400; font-size:clamp(15px, 1.9vw, 21px); color:#2fd04a; -webkit-text-stroke:1px #0b4a12; text-align:left; white-space:nowrap}
.wb-name{display:block; font-family:'Permanent Marker', 'Comic Sans MS', cursive; font-size:clamp(16px, 2vw, 22px); line-height:1.1; transform:rotate(-2deg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
td:nth-child(3) .wb-name{transform:rotate(1.5deg)} td:nth-child(4) .wb-name{transform:rotate(-1deg)}
.wb-v{display:block; font-family:'Permanent Marker', cursive; font-size:13px; color:#6a7280}
.wb-tray{position:relative; height:20px; margin:0 -12px; border-radius:0 0 10px 10px; background:linear-gradient(180deg,#c8d0d8,#7a8490); box-shadow:inset 0 2px 0 rgba(255,255,255,.7)}
.mk{position:absolute; top:-7px; width:64px; height:12px; border-radius:6px; background:linear-gradient(180deg,#fafafa,#cfcfcf)}
.mk::before{content:""; position:absolute; left:-2px; top:-1px; width:20px; height:14px; border-radius:6px 3px 3px 6px; background:var(--cap)}
.mk-b{--cap:#1f4fd6; left:22%} .mk-r{--cap:#d6282f; left:34%} .mk-k{--cap:#1b1b1b; left:46%}
.eraser{position:absolute; top:-13px; left:64%; width:70px; height:18px; border-radius:4px; background:linear-gradient(180deg,#2a2a2a 0 55%, #e8e8e8 55%)}

/* ---------- club walls ---------- */
.club{padding:18px; border-radius:18px; box-shadow:0 22px 44px rgba(0,0,0,.5)}
.club-brass{background:repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 2px, transparent 2px 9px), linear-gradient(180deg,#5a3418,#3a200c); border:3px solid #2a1606}
.club-plates{background:radial-gradient(circle at 20% 20%, rgba(255,255,255,.06) 0 2px, transparent 3px) 0 0/18px 18px, linear-gradient(180deg,#232a2e,#101416); border:3px solid #3a444a}
.club-head{display:flex; align-items:center; justify-content:center; gap:14px; text-align:center; margin-bottom:14px}
.club-mark{width:54px; height:54px; color:#dfe6ee; flex:none}
.club-title{font-family:var(--num); font-size:clamp(24px, 3vw, 32px); letter-spacing:.06em; line-height:1.05}
.club-brass .club-title{background:linear-gradient(180deg,#fff4da,#e8c07a 50%,#a8742a 55%,#f0d49a); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 2px 0 rgba(0,0,0,.6))}
.club-plates .club-title{background:linear-gradient(180deg,#ffffff,#cfd8e0 50%,#7a8894 55%,#e8eef4); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 2px 0 rgba(0,0,0,.6))}
.club-note{margin-top:4px; font-size:13px; font-weight:600; color:rgba(255,240,210,.7)}
.club-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:12px}
.nplate{position:relative; padding:12px 14px 10px; border-radius:8px; text-align:center; overflow:hidden}
.nplate b{display:block; font-family:var(--num); font-weight:400; font-size:20px; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nplate small{display:block; margin-top:2px; font-size:12px; font-weight:700}
.club-brass .nplate{background:linear-gradient(135deg,#6a4410,#e8c07a 30%,#fff0c8 40%,#b8842e 60%,#e0b870 80%,#6a4410); box-shadow:0 6px 12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6)}
.club-brass .nplate b{color:#2a1804; text-shadow:0 1px 0 rgba(255,255,255,.5)}
.club-brass .nplate small{color:#4a3010}
.club-plates .nplate{background:repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 1px, transparent 1px 3px), linear-gradient(180deg,#e4eaf0,#9aa6b2); border:2px solid #5a6670; box-shadow:0 6px 12px rgba(0,0,0,.55)}
.club-plates .nplate b{color:#1a2228; text-shadow:0 1px 0 rgba(255,255,255,.7), 0 -1px 0 rgba(0,0,0,.25)}
.club-plates .nplate small{color:#3a4650}
.nplate.blank{opacity:.35}
.rv{position:absolute; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #fff, #8a8a8a 60%, #3a3a3a)}
.rv.r1{left:5px} .rv.r2{right:5px}
.club-count{margin-top:12px; text-align:center; font-size:13px; font-weight:700; color:rgba(255,240,210,.65)}

/* ---------- Circle of Trust ---------- */
.cot{display:flex; flex-direction:column; align-items:center}
.cot-svg{width:100%; max-width:760px; max-height:78vh}
.cot-title{font-family:var(--num); font-size:44px; letter-spacing:.06em; fill:#fff; stroke:#0a0602; stroke-width:9px; paint-order:stroke; text-anchor:middle}
.cot-100{font-family:var(--num); font-size:26px; fill:#ffd84a; text-anchor:middle; dominant-baseline:central}
.cot-ring-t{font-family:var(--num); font-size:19px; fill:#fff; fill-opacity:.9; text-anchor:middle; dominant-baseline:central; stroke:#3a1e08; stroke-width:4px; paint-order:stroke}
.cot-spin{transform-origin:380px 380px; transform-box:view-box; animation:spin 60s linear infinite}
.cot-tag-bg{fill:#0c1430; stroke:#ffd84a; stroke-width:3}
.cot-tag-t{font-family:var(--num); fill:#fff; text-anchor:middle; dominant-baseline:central; text-transform:uppercase}
.cot-tag{animation:cotIn .6s cubic-bezier(.2,1.5,.4,1) both}
@keyframes cotIn{from{opacity:0}}
.cot-empty{font-family:var(--ui); font-weight:700; font-size:22px; fill:rgba(255,255,255,.65); text-anchor:middle}
.cot-more{margin-top:6px; text-align:center; font-weight:700; color:#ffe7a3}

/* ---------- race trophies ---------- */
.trophy{display:flex; flex-direction:column; align-items:center}
.trophy-svg{width:100%; max-width:300px; filter:drop-shadow(0 18px 24px rgba(0,0,0,.5))}
.trophy-rays{transform-origin:150px 96px; transform-box:view-box; animation:spin 40s linear infinite}
.tro-name{font-family:var(--num); font-size:18px; fill:#2a1600; text-anchor:middle; dominant-baseline:central}
.tro-sub{font-family:var(--ui); font-weight:700; font-size:11.5px; letter-spacing:.06em; fill:#3a2200; text-anchor:middle; dominant-baseline:central}
.tro-label{margin-top:6px; font-family:var(--num); font-size:20px; letter-spacing:.04em; text-align:center; color:#ffd766}

/* ---------- Heavyweight belt ---------- */
.belt-card{display:flex; flex-direction:column; align-items:center; gap:12px}
.belt-svg{width:100%; max-width:1000px; filter:drop-shadow(0 22px 30px rgba(0,0,0,.6))}
.blt-arc{font-family:var(--num); font-size:28px; letter-spacing:.14em; fill:#ffd86a; text-anchor:middle; stroke:#2a1000; stroke-width:5px; paint-order:stroke}
.blt-champ-l{font-family:var(--num); font-size:15px; letter-spacing:.3em; fill:#3a2200; text-anchor:middle; dominant-baseline:central}
.blt-champ{font-family:var(--num); font-size:30px; fill:#2a1600; text-anchor:middle; dominant-baseline:central}
.blt-side{font-family:var(--num); font-size:24px; fill:#fff; text-anchor:middle; dominant-baseline:central}
.blt-small{font-family:var(--ui); font-weight:700; font-size:14px; letter-spacing:.18em; fill:#ffd86a; text-anchor:middle; dominant-baseline:central}
.tally{stroke:#fff; stroke-width:5; stroke-linecap:round; fill:none}
.blt-glint{animation:bltGlint 5s ease-in-out infinite}
@keyframes bltGlint{0%,75%{opacity:0; transform:translateX(-40px)} 85%{opacity:.35} 100%{opacity:0; transform:translateX(260px)}}
.blt-center .mon-body{animation:none}
.blt-facts{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; width:100%; max-width:900px}
.blt-facts > div{padding:12px; border-radius:16px; text-align:center; background:rgba(4,7,22,.55); border:1px solid rgba(255,45,85,.35)}
.blt-facts b{display:block; font-family:var(--num); font-weight:400; font-size:22px; color:#fff}
.blt-facts span{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.blt-rules{max-width:760px; text-align:center; font-size:14px; font-weight:600; color:#ffc0cc}
.blt-reigns{width:100%; max-width:600px; display:flex; flex-direction:column; gap:6px}
.blt-reigns > div:not(.eyebrow){display:flex; justify-content:space-between; padding:8px 14px; border-radius:12px; background:rgba(4,7,22,.5)}
.blt-reigns span{color:var(--muted); font-weight:600}

/* ---------- Royal Quadrant shields ---------- */
.shield{display:flex; flex-direction:column; align-items:center}
.shield-svg{width:100%; max-width:240px; filter:drop-shadow(0 16px 20px rgba(0,0,0,.55)); animation:shdFloat 4s ease-in-out infinite alternate}
.shield:nth-child(2) .shield-svg{animation-delay:-1s} .shield:nth-child(3) .shield-svg{animation-delay:-2s} .shield:nth-child(4) .shield-svg{animation-delay:-3s}
@keyframes shdFloat{to{transform:translateY(-6px)}}
.shd-lbl{font-family:var(--num); font-size:17px; letter-spacing:.1em; fill:#2a1600; text-anchor:middle; dominant-baseline:central}
.shd-val{font-family:var(--num); font-size:50px; fill:#fff; text-anchor:middle; dominant-baseline:central; stroke:rgba(0,0,0,.35); stroke-width:4px; paint-order:stroke}
.shd-name{font-family:var(--num); font-size:22px; fill:#ffe7a3; text-anchor:middle; dominant-baseline:central; text-transform:uppercase}
.shd-date{font-family:var(--ui); font-weight:700; font-size:11px; fill:rgba(255,255,255,.7); text-anchor:middle; dominant-baseline:central}

/* ---------- game log ---------- */
.rs-log{margin:26px auto 0; max-width:900px; display:flex; flex-direction:column; gap:8px}
.lg-row{display:flex; align-items:center; gap:14px; padding:8px 8px 8px 16px; border-radius:16px; background:rgba(4,7,22,.5); border:1px solid rgba(140,175,255,.16)}
.lg-when{display:flex; flex-direction:column; min-width:120px; font-weight:700}
.lg-when small{color:var(--muted); font-weight:600}
.lg-who{flex:1; display:flex; flex-wrap:wrap; gap:4px 14px; font-weight:600; color:#cfdaff}
.lg-who .w{color:#ffd766}
.lg-rm{flex:none; min-height:40px; padding:6px 16px; font-size:14px}
.lg-rm.arm{color:#fff; background:linear-gradient(180deg,#ff4a6e,#c5163f); border-color:#ff8aa0}

/* ---------- results: record board moments ---------- */
.res-records{grid-column:span 12}
.rec-row{display:flex; align-items:center; flex-wrap:wrap; gap:6px 14px; padding:10px 14px; margin-bottom:8px; border-radius:14px; background:rgba(120,160,255,.06); border-left:5px solid rgba(140,175,255,.5); font-weight:700}
.rec-row.big{background:linear-gradient(90deg, rgba(255,200,58,.2), rgba(255,200,58,.03)); border-left-color:#ffc83a}
.rec-b{font-family:var(--num); font-weight:400; font-size:18px; color:#ffd766; letter-spacing:.03em}
.rec-v{margin-left:auto; font-family:var(--num); font-weight:400; font-size:18px}
.rec-row small{flex-basis:100%; color:var(--muted)}
.res-records .pill{margin-top:4px}

/* ---------- portrait / narrow ---------- */
@media (orientation:portrait), (max-width:820px){
  .rs{padding:14px 10px 24px}
  .rs-countup, .rs-x01, .rs-archery{grid-template-columns:1fr}
  .rs-bulls{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .blt-facts b{font-size:16px}
  .blt-facts span{font-size:10px; letter-spacing:.08em}
  .lg-row{flex-wrap:wrap}
  .rec-word{font-size:20px}
}

/* a category with five games: tighter card text so names fit */
.cards.many{gap:10px}
.cards.many .card .meta{padding:10px 10px 12px}
.cards.many .card h3{font-size:18px}
.cards.many .card p{font-size:12px}
.pill[hidden], .start[hidden]{display:none}

/* ---------- join by phone ---------- */
.add-pair{display:flex; flex-direction:column; gap:8px; min-width:0}
.add-pair .prow.add{min-width:0; gap:8px}
.add-pair .plus, .add-pair .qr-ico{flex:none}
.plist.dense{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr)}
.plist.dense .add-pair{flex-direction:row; gap:6px}
.plist.dense .add-pair .prow.add{flex:1; padding:6px}
.plist.dense .add-pair .lbl{display:none}
.prow.add.join{color:#ffe7a3; border-color:rgba(255,200,58,.5)}
.qr-ico{width:22px; height:22px; flex:none}
.join-sheet{width:min(820px, 100%)}
.join-body{display:grid; grid-template-columns:minmax(0, 360px) minmax(0, 1fr); gap:22px; align-items:start}
.join-qr{position:relative; aspect-ratio:1; border-radius:22px; overflow:hidden; background:#fff; box-shadow:0 0 0 4px rgba(255,200,58,.7), 0 0 40px rgba(255,200,58,.35)}
#joinQr, #joinQr svg{display:block; width:100%; height:100%}
.join-state{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px; text-align:center; background:rgba(4,7,22,.88); color:#fff; font-size:18px}
.join-side{display:flex; flex-direction:column; gap:12px; min-width:0}
.join-side .nm-chips{max-height:none}
.nm-chip.joined{animation:joinPop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes joinPop{from{transform:scale(.4); opacity:0}}
.join-timer{font-size:13px; font-weight:700; color:var(--muted)}
@media (orientation:portrait), (max-width:700px){ .join-body{grid-template-columns:1fr} .join-qr{max-width:340px; width:100%; justify-self:center} }
.join-state[hidden]{display:none}
.plist.dense .prow small{display:none}   /* two columns: room for the names beats the P# tag */

/* ---------- end-of-game takeovers wait for Next ---------- */
/* Held: every layer sits in its fully-shown pose with no animation, so it looks right however fast the tablet is. */
#award.held .veil, #award.held .rays, #award.held .core, #award.held .shock, #award.held .flashw, #award.held .title, #award.held .t-sub, #award.held .t-main i{animation:none !important}
#award.held .veil{opacity:1} #award.held .rays{opacity:.9; transform:rotate(30deg) scale(1)} #award.held .core{opacity:.8; transform:none}
#award.held .shock, #award.held .flashw, #award.held .t-main i{opacity:0}
#award.held .title{opacity:1; transform:none; filter:none} #award.held .t-sub{opacity:1; transform:none; letter-spacing:.4em}
#award.held .rays{animation:heldSpin 30s linear infinite !important}
@keyframes heldSpin{from{transform:rotate(30deg)} to{transform:rotate(390deg)}}
#award.leaving{transition:opacity .6s ease; opacity:0}
.award-next{position:absolute; left:50%; bottom:8vh; transform:translateX(-50%); min-width:240px; pointer-events:auto; z-index:2; animation:nextIn .4s cubic-bezier(.2,1.4,.4,1)}
.award-next[hidden]{display:none}
@keyframes nextIn{from{opacity:0; transform:translate(-50%, 30px)}}

/* ---------- bots ---------- */
.prow.add.botadd{color:#b8ffe0; border-color:rgba(46,230,160,.45)}
.bot-ico{font-size:20px; line-height:1; flex:none}
.bot-sheet{width:min(720px, 100%)}
.bot-av{font-size:30px !important; background:linear-gradient(145deg,#dfe8ff,#6f86c8) !important}
.bot-levels{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px}
.bot-lvl{display:flex; flex-direction:column; align-items:center; gap:4px; padding:16px 10px 14px; border-radius:20px; text-align:center;
  background:linear-gradient(180deg, color-mix(in srgb, var(--eye) 16%, transparent), rgba(4,7,22,.6)); border:2px solid color-mix(in srgb, var(--eye) 45%, transparent)}
.bot-lvl svg{width:84px; height:84px; margin-bottom:4px; filter:drop-shadow(0 0 14px color-mix(in srgb, var(--eye) 45%, transparent))}
.bot-lvl b{font-family:var(--num); font-weight:400; font-size:21px}
.bot-lvl span{font-weight:700; color:var(--eye)}
.bot-lvl small{font-size:12px; font-weight:600; color:var(--muted)}
.bot-lvl.on{box-shadow:0 0 0 3px var(--eye), 0 0 26px color-mix(in srgb, var(--eye) 40%, transparent)}
.bot-lvl:active{transform:scale(.97)}
@media (orientation:portrait), (max-width:600px){ .bot-levels{grid-template-columns:1fr} .bot-lvl{flex-direction:row; flex-wrap:wrap; justify-content:flex-start; text-align:left; column-gap:12px} .bot-lvl svg{width:56px; height:56px} }

/* a game that needs more players than the lineup has */
.card .short-tag{display:none}
.card.short .art, .card.short .meta{filter:grayscale(.85) brightness(.55)}
.card.short .short-tag{display:block; position:absolute; left:50%; top:38%; transform:translate(-50%, -50%); white-space:nowrap; padding:8px 14px; border-radius:999px;
  font-weight:700; font-size:13px; letter-spacing:.06em; color:#fff; background:rgba(4,7,22,.88); border:1px solid rgba(255,210,122,.6)}
.cards.many .card.short .short-tag{font-size:11px; padding:6px 10px}
@media (orientation:portrait){ .setup .plist .add-pair{flex-direction:row; flex-basis:100%} .setup .plist .add-pair .prow.add{flex:1} }
/* six or more game cards: 3 across in 2 rows with wider, shorter art */
.cards.two-rows{gap:12px}
.cards.two-rows .card .art{aspect-ratio:16/10}
.cards.two-rows .card .meta{padding:10px 12px 12px}
.cards.two-rows .card h3{font-size:19px}
.cards.two-rows .card p{font-size:12.5px}