/*
 * Organization Battle Arena (2.0.0): the players' phones (org-play.php), the Arena TV
 * (org-tv.php) and the organization's own pages (org-login.php, org.php).
 * Builds on arena.css (colors, fonts, cards, buttons, timer bars).
 */

/* ---------- sign in and settings ---------- */
.awo .ar-main { gap: 14px; }
.awo-k { display: inline-block; font: 900 12px var(--font-d); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.awo-form { display: grid; gap: 12px; }
.awo-form label { display: grid; gap: 6px; font-weight: 700; font-size: 14px; }
.awo-check { display: flex !important; align-items: flex-start; gap: 10px; font-weight: 600 !important; }
.awo-check input { width: 20px; height: 20px; margin-top: 1px; flex: none; }
.awo-small { color: var(--muted); font-size: 14px; margin: 10px 0 0; overflow-wrap: anywhere; }
.awo-small a { color: var(--me); font-weight: 700; }
.awo-inline { display: flex; gap: 8px; margin-top: 10px; }
.awo-inline .ar-input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .12em; }
.awo-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.awo-row .ar-btn { text-decoration: none; }
.awo-code { font: 900 22px var(--font-d); letter-spacing: .14em; color: var(--gold); }
.awo-msg { margin: 0; padding: 12px 16px; border-radius: 14px; background: rgba(46, 229, 157, .12); border: 1px solid rgba(46, 229, 157, .4); font-weight: 700; }
.awo-msg.ar-err { background: rgba(255, 84, 104, .12); border-color: rgba(255, 84, 104, .45); }

/* ---------- the phone ---------- */
.awp { max-width: 640px; margin: 0 auto; padding: 0 14px calc(28px + env(safe-area-inset-bottom)); min-height: calc(100 * var(--vh)); display: flex; flex-direction: column; }
.awp-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; }
.awp-main { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.awp-at { margin: 0 0 6px; font: 800 14px var(--font-d); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.awp-venue { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-radius: 16px; background: linear-gradient(135deg, rgba(255, 201, 60, .16), rgba(124, 92, 255, .14)); border: 1px solid rgba(255, 201, 60, .4); }
.awp-venue-t { display: grid; min-width: 0; }
.awp-venue-t b { font: 900 20px/1.15 var(--font-d); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.awp-venue-k { font: 800 11px var(--font-d); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.awp-here { flex: none; font: 800 13px var(--font-b); color: var(--ok); }
.awp-join { display: grid; gap: 8px; width: 100%; }
.awp-join .awp-venue-k { letter-spacing: .02em; text-transform: none; font: 700 14px var(--font-b); color: var(--text); }
.awp-join-row { display: flex; gap: 8px; }
.awp-join-row .ar-input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .14em; }
.awp-me { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); }
.awp-av { width: 38px; height: 38px; font-size: 16px; }
.awp-me-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.awp-me-s { display: grid; justify-items: end; line-height: 1; }
.awp-me-s b { font: 900 22px var(--font-d); color: var(--me); }
.awp-me-s small { font-size: 11px; color: var(--muted); }
.awp-me-r { display: grid; justify-items: end; font: 800 12px var(--font-d); color: var(--gold); line-height: 1.3; }
.awp-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); text-align: center; flex: 1; }
.awp-big { font: 900 clamp(28px, 8vw, 44px)/1.05 var(--font-d); text-transform: uppercase; margin: 0; }
.awp-mode { align-self: center; font: 900 13px var(--font-d); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(255, 201, 60, .45); }
.awp-count { font: 900 clamp(48px, 16vw, 84px)/1 var(--font-d); color: #fff; text-shadow: 0 0 30px rgba(124, 92, 255, .6); font-variant-numeric: tabular-nums; }
.awp-next { display: grid; justify-items: center; gap: 8px; padding: 10px 0; }
.awp-next-k { font: 800 12px var(--font-d); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.awp-tip { margin: 0; color: var(--muted); font-size: 14px; }
.awp-prize, .awt-prize b { font-weight: 800; }
.awp-prize { margin: 0; padding: 10px 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(255, 201, 60, .25), rgba(255, 138, 61, .18)); border: 1px solid rgba(255, 201, 60, .55); color: #FFE7A3; }
.awp-prize::before { content: "\1F3C6  "; }
.awp-qhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.awp-qn { font: 800 13px var(--font-d); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.awp-cat { font: 800 12px var(--font-d); color: var(--gold); text-transform: uppercase; letter-spacing: .06em; }
.awp-q { margin: 0; font: 800 clamp(19px, 5.4vw, 26px)/1.25 var(--font-b); }
.awp-timer { height: 8px; }
.awp-opts { display: grid; gap: 10px; }
.awp-opt { position: relative; display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 10px 14px; border: 0; border-radius: 16px; color: #fff; text-align: left; cursor: pointer;
  font: 800 17px/1.2 var(--font-b); background: color-mix(in srgb, var(--c) 80%, #000); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25); transition: transform .12s, opacity .2s, filter .2s; }
.awp-opt.o0 { --c: var(--a0); } .awp-opt.o1 { --c: var(--a1); } .awp-opt.o2 { --c: var(--a2); } .awp-opt.o3 { --c: var(--a3); } .awp-opt.o4 { --c: var(--a4); } .awp-opt.o5 { --c: var(--a5); }
.awp-opt:active:not(:disabled) { transform: scale(.98); }
.awp-opt:disabled { cursor: default; }
.awp-opts:has(.mine) .awp-opt:not(.mine):not(.right) { opacity: .45; }
.awp-opt.mine { outline: 3px solid #fff; outline-offset: 2px; }
.awp-opt.right { background: linear-gradient(135deg, #12B981, var(--ok)); color: #04301E; opacity: 1 !important; animation: ar-right .7s both; }
.awp-opt.wrong { opacity: .3; }
.awp-opt.wrong.mine { opacity: .8; background: color-mix(in srgb, var(--no) 70%, #000); }
.awp-status { margin: 0; min-height: 1.4em; font: 800 18px var(--font-b); color: var(--muted); }
.awp-status.good { color: var(--ok); }
.awp-status.bad { color: var(--no); }
.awp-pct { margin: 0; font-weight: 700; color: var(--muted); }
.awp-result { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); }
.awp-res-big { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 10px; }
.awp-res-big div { display: grid; line-height: 1.1; }
.awp-res-big b { font: 900 28px var(--font-d); color: var(--gold); }
.awp-res-big small { color: var(--muted); font-size: 12px; }
.awp-perfect { margin: 0; font: 900 20px var(--font-d); color: var(--gold); text-transform: uppercase; text-shadow: 0 0 20px rgba(255, 201, 60, .6); }
.awp-res-v { margin: 0; font-weight: 700; }

/* ---------- the Arena TV ---------- */
.awt-page { overflow: hidden; }
.awt { position: fixed; inset: 0; display: grid; grid-template-columns: minmax(280px, 25fr) 75fr; }
.awt-side { position: relative; display: flex; flex-direction: column; gap: 2.2vh; padding: 3vh 1.6vw; background: rgba(8, 5, 26, .72); border-right: 2px solid rgba(124, 92, 255, .45); overflow: hidden; min-width: 0; }
.awt-v-name { margin: 0; font: 900 clamp(22px, 2.5vw, 64px)/1.05 var(--font-d); text-transform: uppercase; overflow-wrap: anywhere; }
.awt-v-name .ar-flag { width: .9em; height: .68em; margin-right: .3em; vertical-align: .05em; }
.awt-v-city { display: block; margin-top: .4vh; color: var(--muted); font: 700 clamp(13px, 1vw, 26px) var(--font-b); }
.awt-join { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1vw; padding: 1.4vh .9vw; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); }
.awt-qr { width: clamp(90px, 8vw, 260px); aspect-ratio: 1; background: #fff; border-radius: 12px; padding: 6px; }
.awt-qr svg { width: 100%; height: 100%; display: block; }
.awt-join-t { display: grid; gap: .5vh; min-width: 0; }
.awt-join-t b { font: 900 clamp(16px, 1.4vw, 38px) var(--font-d); text-transform: uppercase; }
.awt-join-t > span { color: var(--muted); font: 700 clamp(11px, .85vw, 22px) var(--font-b); overflow-wrap: anywhere; }
.awt-join-t > .awt-code { display: grid; font: 900 clamp(22px, 2.2vw, 60px)/1 var(--font-d); letter-spacing: .12em; color: var(--gold); }
.awt-join-t > .awt-code small { font: 800 clamp(10px, .7vw, 18px) var(--font-d); letter-spacing: .14em; color: var(--muted); }
.awt-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1.4vh; overflow: hidden; }
.awt-panel.anim { animation: ar-rise .5s ease both; }
.awt-h2 { margin: 0; font: 900 clamp(14px, 1.15vw, 32px) var(--font-d); text-transform: uppercase; letter-spacing: .1em; color: var(--gold); }
.awt-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1vh .7vw; }
.awt-tile { display: grid; gap: .4vh; padding: 1.6vh .8vw; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); }
.awt-tile b { font: 900 clamp(26px, 2.6vw, 72px)/1 var(--font-d); color: #fff; }
.awt-tile span { color: var(--muted); font: 700 clamp(11px, .8vw, 22px)/1.2 var(--font-b); }
.awt-note { margin: 0; color: var(--muted); font: 700 clamp(12px, .9vw, 24px) var(--font-b); }
.awt-prize { padding: 1.4vh .9vw; border-radius: 16px; background: linear-gradient(135deg, rgba(255, 201, 60, .3), rgba(255, 138, 61, .2)); border: 2px solid rgba(255, 201, 60, .7); box-shadow: 0 0 30px rgba(255, 201, 60, .25); }
.awt-prize-k { display: block; font: 900 clamp(11px, .8vw, 22px) var(--font-d); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.awt-prize b { display: block; margin-top: .4vh; font: 800 clamp(15px, 1.25vw, 36px)/1.2 var(--font-b); color: #FFF3CC; }
.awt-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .8vh; }
.awt-rows li { display: grid; grid-template-columns: 2em 1fr auto; align-items: center; gap: .8em; padding: .55em .8em; border-radius: 14px; background: rgba(255, 255, 255, .05); font-size: clamp(14px, 1.15vw, 34px); animation: ar-rise .45s ease both; }
.awt-rows li:nth-child(1) { background: linear-gradient(90deg, rgba(255, 201, 60, .22), rgba(255, 201, 60, .06)); }
.awt-rows li.me { outline: 2px solid var(--me); background: rgba(41, 211, 255, .14); }
.awt-rows .rk { font: 900 1em var(--font-d); color: var(--muted); text-align: right; }
.awt-rows li:nth-child(1) .rk { color: var(--gold); }
.awt-rows .nm { display: flex; align-items: center; gap: .5em; min-width: 0; }
.awt-rows .nm .ar-flag { width: 1.2em; height: .9em; flex: none; }
.awt-rows .tx { display: grid; min-width: 0; line-height: 1.15; }
.awt-rows .tx b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.awt-rows .tx small { color: var(--muted); font-size: .7em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.awt-rows .sc { font: 900 1.1em var(--font-d); color: var(--gold); font-variant-numeric: tabular-nums; }
.awt-av { width: 1.7em; height: 1.7em; font-size: .8em; flex: none; }
.awt-side .awt-rows li { font-size: clamp(13px, .95vw, 28px); }
.awt-stage { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 3vh; padding: 4vh 3vw; min-width: 0; overflow: hidden; }
.awt-big { margin: 0; font: 900 clamp(40px, 6vw, 180px)/1 var(--font-d); text-transform: uppercase; text-align: center;
  background: linear-gradient(90deg, #29D3FF, #B78CFF, #FF4FA3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.awt-sub { margin: 0; text-align: center; color: var(--muted); font: 700 clamp(16px, 1.5vw, 44px) var(--font-b); }
.awt-h1 { margin: 0; font: 900 clamp(24px, 2.6vw, 76px)/1.1 var(--font-d); text-transform: uppercase; }
.awt-mode { align-self: center; font: 900 clamp(13px, 1.1vw, 32px) var(--font-d); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); padding: .3em 1em; border-radius: 999px; border: 2px solid rgba(255, 201, 60, .5); }
.awt-count { font: 900 clamp(60px, 9vw, 260px)/1 var(--font-d); color: #fff; text-align: center; font-variant-numeric: tabular-nums; text-shadow: 0 0 50px rgba(124, 92, 255, .7); }
.awt-intro { display: flex; flex-direction: column; align-items: center; gap: 3vh; }
.awt-next { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .4em 1.2em; padding: 1.4vh 2vw; border-radius: 20px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); }
.awt-next-k { font: 900 clamp(14px, 1.3vw, 38px) var(--font-d); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.awt-next .awt-count { font-size: clamp(36px, 4.2vw, 120px); }
.awt-next .awt-mode { align-self: auto; }
.awt-next-j { flex-basis: 100%; text-align: center; color: var(--ok); font: 800 clamp(13px, 1.1vw, 32px) var(--font-b); }
.awt-slide { display: flex; flex-direction: column; gap: 2vh; animation: ar-rise .5s ease both; min-height: 0; }
.awt-slide .awt-sub { text-align: left; }
.awt-slide .awt-rows { grid-template-columns: 1fr 1fr; column-gap: 1.2vw; }
.awt-how { margin: 0; padding-left: 1.4em; display: grid; gap: 2vh; font: 800 clamp(18px, 2vw, 58px)/1.25 var(--font-b); }
.awt-how li::marker { color: var(--gold); font-family: var(--font-d); }
.awt-qhead { display: flex; align-items: center; gap: 1.2vw; flex-wrap: wrap; }
.awt-qhead .awt-mode { align-self: auto; }
.awt-qn { font: 900 clamp(15px, 1.4vw, 42px) var(--font-d); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.awt-cat { margin-left: auto; font: 900 clamp(14px, 1.2vw, 36px) var(--font-d); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.awt-q { margin: 0; font: 800 clamp(28px, 3.4vw, 104px)/1.2 var(--font-b); text-align: center; }
.awt-timer { height: clamp(8px, 1.2vh, 26px); }
.awt-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6vh 1.2vw; transition: opacity .3s; }
.awt-opts.dim { opacity: .35; }
.awt-opt { display: flex; align-items: center; gap: .7em; min-height: 11vh; padding: 1.4vh 1.4vw; border-radius: 22px; font: 800 clamp(20px, 2.1vw, 64px)/1.2 var(--font-b); color: #fff;
  background: color-mix(in srgb, var(--c) 80%, #000); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .25); }
.awt-opt .ar-ltr { width: 1.6em; height: 1.6em; font-size: .7em; flex: none; }
.awt-opt.o0 { --c: var(--a0); } .awt-opt.o1 { --c: var(--a1); } .awt-opt.o2 { --c: var(--a2); } .awt-opt.o3 { --c: var(--a3); } .awt-opt.o4 { --c: var(--a4); } .awt-opt.o5 { --c: var(--a5); }
.awt-opts.reveal .awt-opt.wrong { opacity: .25; }
.awt-opts.reveal .awt-opt.right { background: linear-gradient(135deg, #12B981, var(--ok)); color: #04301E; transform: scale(1.03); box-shadow: 0 0 60px rgba(46, 229, 157, .55); animation: ar-right .7s both; }
.awt-qfoot { display: flex; justify-content: center; flex-wrap: wrap; gap: 1vh 1.6vw; min-height: 2em; font-size: clamp(15px, 1.4vw, 42px); }
.awt-locked, .awt-pct { font: 800 1em var(--font-b); color: var(--muted); padding: .3em .9em; border-radius: 999px; background: rgba(255, 255, 255, .06); }
.awt-pct.here { color: var(--me); }
.awt-pct.fast { color: var(--gold); }
.awt-ctl { position: fixed; z-index: 20; right: 1vw; bottom: 1.5vh; display: flex; gap: 8px; opacity: .35; transition: opacity .3s; }
.awt-ctl:hover, .awt-ctl:focus-within { opacity: 1; }
.awt-b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(14, 9, 40, .85); color: #fff; cursor: pointer; }
.awt-b svg { width: 20px; height: 20px; }
.awt-b[hidden] { display: none; }
.awt-pair { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3vh; padding: 4vh 4vw; text-align: center; }
.awt-pair .ar-h1 { font-size: clamp(32px, 4.4vw, 130px); }
.awt-pair .ar-lead { font-size: clamp(16px, 1.6vw, 46px); max-width: 40em; }
.awt-pair-code { font: 900 clamp(64px, 10vw, 300px)/1 var(--font-d); letter-spacing: .14em; color: var(--gold); text-shadow: 0 0 50px rgba(255, 201, 60, .5); }
.awt-pair .muted { color: var(--muted); font-size: clamp(14px, 1.2vw, 34px); }
.awt-pair a { color: var(--me); }
/* A narrow screen (a laptop window or a phone): stacked, and the page scrolls. */
@media (max-width: 900px) {
  .awt-page { overflow: auto; }
  .awt { position: static; grid-template-columns: 1fr; }
  .awt-side { border-right: 0; border-bottom: 2px solid rgba(124, 92, 255, .45); padding: 16px; }
  .awt-stage { padding: 20px 16px; }
  .awt-opts, .awt-slide .awt-rows { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .awt-panel, .awt-slide, .awt-rows li { animation: none; } }

/* ---------- 2.1.0: sign-up, plans, billing, ads and promos on the settings page ---------- */
.awo-hero .ar-h1 { font-size: clamp(30px, 7vw, 52px); }
.awo-points { margin: 12px 0 0; padding-left: 1.2em; display: grid; gap: 6px; font-weight: 600; }
.awo-points li::marker { color: var(--gold); }
.awo-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.awo-plan { position: relative; display: grid; gap: 6px; padding: 18px; border-radius: 18px; background: var(--card); border: 2px solid var(--line); cursor: pointer; }
.awo-plan input { position: absolute; top: 16px; right: 16px; width: 20px; height: 20px; }
.awo-plan.is-on { border-color: var(--gold); box-shadow: 0 0 24px rgba(255, 201, 60, .25); }
.awo-plan b { font: 900 20px var(--font-d); text-transform: uppercase; }
.awo-price { font: 900 34px/1 var(--font-d); color: var(--gold); }
.awo-price small { font: 700 13px var(--font-b); color: var(--muted); margin-left: 6px; }
.awo-center { text-align: center; }
.awo-np { display: grid; gap: 12px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); }
.awo-np[hidden] { display: none; }
.awo-billing { margin: 0 0 6px; font-size: 16px; }
.awo-billing b { color: var(--gold); margin-right: 6px; }
.awo-good { color: var(--ok); font-weight: 700; }
.awo-subs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.awo-sub { display: grid; gap: 6px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.awo-sub.is-mine { border-color: rgba(255, 201, 60, .55); }
.awo-sub .awo-price { font-size: 26px; }
.awo-more { margin-top: 12px; }
.awo-more summary { cursor: pointer; color: var(--me); font-weight: 700; }
.awo-more .awo-form { margin-top: 10px; }
.awo-ads { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-top: 12px; }
.awo-ad { margin: 0; display: grid; gap: 6px; }
.awo-ad img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: #000; }
.awo-ad .ar-btn { width: 100%; padding: 6px; font-size: 13px; }
.awo-sure { background: var(--no) !important; color: #fff !important; }
.awo-ta { min-height: 110px; resize: vertical; font: 600 15px/1.4 var(--font-b); }
.awo-inline input[type=file] { padding: 10px; font-size: 14px; }

/* ---------- 2.1.0: the TV's ticker, ads, promo takeover and lock screen ---------- */
.awt { grid-template-rows: minmax(0, 1fr) var(--awt-tk, clamp(48px, 6.4vh, 120px)); }
.awt-side { grid-row: 1; }
.awt-stage { grid-row: 1; }
.awt > .ar-ticker { grid-column: 1 / -1; grid-row: 2; position: relative; top: auto; height: 100%; border-bottom: 0; border-top: 2px solid rgba(124, 92, 255, .6); font-size: clamp(16px, 2.3vh, 46px); }
.awt > .ar-ticker .tk-badge { font-size: clamp(12px, 1.7vh, 34px); padding: 0 1.2em; }
.awt > .ar-ticker .tk-item { padding: 0 1.2em; gap: .45em; }
.awt > .ar-ticker .tk-ico { width: 1.5em; height: 1.5em; }
.awt > .ar-ticker .tk-ico svg { width: 1em; height: 1em; }
.awt-promo { position: absolute; z-index: 90; left: 0; right: 0; bottom: 0; height: var(--awt-tk, clamp(48px, 6.4vh, 120px)); display: flex; align-items: center; overflow: hidden;
  background: linear-gradient(90deg, #FF4D1C, #FF9E2C 45%, #FFD95A); color: #2A0E00; transform: translateY(110%); box-shadow: 0 -12px 40px rgba(255, 100, 30, .55); }
.awt-promo.in { animation: awt-promo-in .7s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.awt-promo.out { animation: awt-promo-out .6s ease-in forwards; }
@keyframes awt-promo-in { 0% { transform: translateY(110%); } 100% { transform: translateY(0); } }
@keyframes awt-promo-out { 0% { transform: translateY(0); } 100% { transform: translateY(110%); } }
.awt-promo::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 3.2em; pointer-events: none;
  background: radial-gradient(ellipse at 20% 100%, rgba(255, 140, 30, .85), transparent 60%), radial-gradient(ellipse at 55% 100%, rgba(255, 70, 20, .8), transparent 55%), radial-gradient(ellipse at 85% 100%, rgba(255, 200, 60, .8), transparent 60%);
  filter: blur(6px); animation: awt-flames .5s ease-in-out infinite alternate; }
@keyframes awt-flames { 0% { transform: scaleY(.85); opacity: .75; } 100% { transform: scaleY(1.15); opacity: 1; } }
.awt-promo-tag { flex: none; display: flex; align-items: center; gap: .4em; height: 100%; padding: 0 1.2em; font: 900 clamp(12px, 1.7vh, 34px) var(--font-d); letter-spacing: .12em; text-transform: uppercase; color: #fff; background: #C2185B; }
.awt-promo-view { position: relative; flex: 1; min-width: 0; height: 100%; overflow: hidden; }
.awt-promo-msg { position: absolute; top: 50%; left: 100%; white-space: nowrap; transform: translateY(-50%); font: 900 clamp(18px, 2.8vh, 56px) var(--font-b); animation: awt-scroll var(--dur, 15s) linear infinite; }
@keyframes awt-scroll { 0% { left: 100%; transform: translate(0, -50%); } 100% { left: 0; transform: translate(-100%, -50%); } }
.awt-ad { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; animation: ar-rise .5s ease both; }
.awt-ad img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); animation: awt-ad-in .6s ease both; }
@keyframes awt-ad-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.awt-stage:has(.awt-ad) { justify-content: flex-start; }
.awt-lock { grid-column: 1 / -1; grid-row: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3vh; padding: 4vh 4vw; text-align: center; }
.awt-lock .awt-big { font-size: clamp(36px, 5vw, 150px); }
@media (prefers-reduced-motion: reduce) { .awt-promo.in, .awt-promo.out, .awt-promo::before, .awt-ad img { animation: none; } .awt-promo.in { transform: none; } .awt-promo-msg { animation-duration: 60s; } }
@media (max-width: 900px) { .awt { grid-template-rows: auto auto var(--awt-tk, 48px); } .awt-side { grid-row: 1; } .awt-stage { grid-row: 2; } .awt > .ar-ticker { grid-row: 3; position: sticky; bottom: 0; } }

/* ---------- 2.1.0: printables (org-print.php) ---------- */
.pp { margin: 0; background: #e9e7f2; color: #120c2c; font-family: 'Inter', system-ui, sans-serif; }
.pp-bar { position: sticky; top: 0; display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #120c2c; color: #fff; font-size: 14px; }
.pp-bar button { padding: 10px 18px; border: 0; border-radius: 10px; background: #FFC93C; color: #2A1D00; font: 800 15px inherit; cursor: pointer; }
.pp-page { box-sizing: border-box; width: 8.5in; margin: 20px auto; background: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .2); }
.pp-poster { min-height: 11in; padding: .7in .6in; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .18in;
  background: radial-gradient(circle at 20% 0%, #2a1a66, #0b0820 60%); color: #fff; }
.pp-k { margin: 0; font: 900 18px 'Chakra Petch', system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #FFC93C; }
.pp-poster h1 { margin: 0; font: 900 64px/1 'Chakra Petch', system-ui, sans-serif; text-transform: uppercase; background: linear-gradient(90deg, #29D3FF, #B78CFF, #FF4FA3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pp-sub { margin: 0; font-size: 20px; line-height: 1.4; max-width: 6.4in; color: #ddd8f5; }
.pp-qr { background: #fff; padding: 14px; border-radius: 18px; width: 2.2in; aspect-ratio: 1; }
.pp-qr.big { width: 4.2in; }
.pp-qr svg { width: 100%; height: 100%; display: block; }
.pp-scan { margin: 0; font: 900 28px 'Chakra Petch', system-ui, sans-serif; text-transform: uppercase; }
.pp-or { margin: 0; font-size: 18px; }
.pp-or b { font: 900 28px 'Chakra Petch', system-ui, sans-serif; letter-spacing: .14em; color: #FFC93C; }
.pp-prize { margin: 0; padding: 12px 22px; border-radius: 14px; border: 3px solid #FFC93C; font: 800 22px inherit; color: #FFE7A3; }
.pp-v { margin: auto 0 0; font: 900 30px 'Chakra Petch', system-ui, sans-serif; text-transform: uppercase; }
.pp-tents { padding: 0; }
.pp-tent { box-sizing: border-box; height: 5.5in; display: grid; grid-template-rows: 2.75in 2.75in; overflow: hidden; }
.pp-card { box-sizing: border-box; height: 2.75in; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: .12in; text-align: center; background: #0b0820; color: #fff; border-bottom: 1px dashed #777; }
.pp-card.flip { transform: rotate(180deg); }
.pp-card h2 { margin: 0; font: 900 22px 'Chakra Petch', system-ui, sans-serif; text-transform: uppercase; color: #29D3FF; }
.pp-card .pp-qr { width: 1.05in; padding: 6px; border-radius: 10px; }
.pp-card .pp-scan { font-size: 15px; }
.pp-card .pp-or { font-size: 13px; }
.pp-card .pp-or b { font-size: 20px; }
.pp-card .pp-v { margin: 0; font-size: 16px; color: #FFC93C; }
.pp-card .pp-k { font-size: 12px; }
@media print {
  @page { size: letter portrait; margin: 0; }
  .pp { background: #fff; }
  .pp-bar { display: none; }
  .pp-page { margin: 0; box-shadow: none; width: 8.5in; }
  .pp-poster, .pp-card { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.awt .tk-cta { display: none; }
.awt-ctl { bottom: calc(var(--awt-tk, clamp(48px, 6.4vh, 120px)) + 1.2vh); }
.awp-note { margin: 0; padding: 10px 14px; border-radius: 14px; background: rgba(255, 201, 60, .12); border: 1px solid rgba(255, 201, 60, .4); font-weight: 700; font-size: 14px; }
.awp-own { margin-top: auto; color: var(--me); font-weight: 700; font-size: 14px; text-decoration: none; }
.awp-own:hover { text-decoration: underline; }

/* 2.2.0: titles, the champions, and the attract loop on the Arena TV. */
.awt-badge { display: inline-block; margin: .6vh .4em 0 0; padding: .25em .7em; border-radius: 999px; background: linear-gradient(90deg, #f6c445, #ff8a3d); color: #1a1205; font: 900 clamp(11px, .85vw, 24px) var(--font-d); letter-spacing: .08em; text-transform: uppercase; }
.awt-attract .awt-when { font: 900 clamp(30px, 3.6vw, 104px)/1 var(--font-d); color: var(--gold); }
.awt-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2vw; }
.awt-champ { display: flex; flex-direction: column; gap: .8vh; padding: 3vh 2vw; border-radius: 22px; background: rgba(0, 0, 0, .3); border: 2px solid rgba(246, 196, 69, .55); text-align: center; animation: ar-rise .5s ease both; }
.awt-champ.me { border-color: var(--ok); box-shadow: 0 0 40px rgba(61, 220, 132, .25); }
.awt-champ-k { font: 900 clamp(13px, 1.1vw, 32px) var(--font-d); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.awt-champ-n { font: 900 clamp(24px, 2.8vw, 80px)/1.05 var(--font-d); text-transform: uppercase; overflow-wrap: anywhere; }
.awt-champ-n .ar-flag { width: .85em; height: .64em; margin-right: .3em; vertical-align: .05em; }
.awt-champ-c, .awt-champ-t { color: var(--muted); font: 700 clamp(13px, 1vw, 28px) var(--font-b); }
.awt-champ-s { font: 900 clamp(18px, 1.8vw, 50px) var(--font-d); color: var(--ok); }

/* 2.2.0: organization settings for hours, titles and locations. */
.awo-switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-radius: 14px; background: rgba(255, 201, 60, .12); border: 1px solid rgba(255, 201, 60, .45); }
.awo-titles { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.awo-title { padding: 4px 12px; border-radius: 999px; background: linear-gradient(90deg, #f6c445, #ff8a3d); color: #1a1205; font: 900 12px var(--font-d); letter-spacing: .08em; text-transform: uppercase; }
.awo-hours { display: grid; gap: 8px; }
.awo-day { display: grid; grid-template-columns: 7.5em 1fr auto 1fr auto; align-items: center; gap: 8px; }
.awo-day .ar-input { min-width: 0; }
.awo-locs { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.awo-locs li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); }
.awo-locs small { color: var(--muted); margin-left: 6px; }
.awo-locs .awo-code { font-size: 13px; color: var(--gold); }
@media (max-width: 560px) { .awo-day { grid-template-columns: 1fr 1fr; } .awo-day b { grid-column: 1 / -1; } .awo-day > span { display: none; } }

/* 2.3.0: prizes won and themed nights, on phones and TVs. */
.awp-won { display: grid; justify-items: center; gap: 6px; padding: 16px; border-radius: 18px; text-align: center; background: linear-gradient(135deg, rgba(255, 201, 60, .22), rgba(255, 138, 61, .16)); border: 2px solid rgba(255, 201, 60, .6); }
.awp-won.fresh { animation: ar-rise .5s ease both; box-shadow: 0 0 36px rgba(255, 201, 60, .3); }
.awp-won-k { font: 900 13px var(--font-d); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.awp-won-p { font: 800 18px/1.25 var(--font-b); color: #FFE7A3; }
.awp-won-c { font: 900 40px/1 var(--font-d); letter-spacing: .16em; color: #fff; padding: 6px 16px; border-radius: 12px; background: rgba(0, 0, 0, .35); }
.awp-won small { color: var(--muted); }
.awp-theme { margin: 0; padding: 10px 14px; border-radius: 14px; background: rgba(120, 90, 255, .16); border: 1px solid rgba(160, 130, 255, .45); font-weight: 800; text-align: center; }
.awt-winner { display: flex; align-items: center; gap: .6em; padding: 1vh 1.2vw; border-radius: 16px; background: linear-gradient(90deg, rgba(255, 201, 60, .25), rgba(255, 138, 61, .15)); border: 1px solid rgba(255, 201, 60, .55); font: 800 clamp(14px, 1.2vw, 34px) var(--font-b); }
.awt-winner b { color: var(--gold); font-family: var(--font-d); }
.awt-theme { text-align: center; display: grid; gap: 2vh; padding: 4vh 2vw; border-radius: 22px; background: rgba(120, 90, 255, .14); border: 2px solid rgba(160, 130, 255, .5); }
.awt-theme-n { font: 900 clamp(34px, 4.6vw, 132px)/1.05 var(--font-d); text-transform: uppercase; }
.awt-theme-w { font: 800 clamp(18px, 2vw, 56px) var(--font-b); color: var(--gold); }
.awt-prize-w { display: block; margin-top: .6vh; font: 700 clamp(11px, .85vw, 24px) var(--font-b); color: #FFE7A3; }
.awo-h3 { margin: 18px 0 8px; font: 800 14px var(--font-d); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.awo-found { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); }
.awo-found.ok { border-color: var(--ok); }
.awo-found small { color: var(--muted); }
.awo-prizes { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.awo-prizes li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(0, 0, 0, .2); }
.awo-prizes code { color: var(--gold); letter-spacing: .1em; margin: 0 6px; }
.awo-prizes small { color: var(--muted); }
.awt-slide .awt-theme .awt-sub { text-align: center; }

/* 2.3.1: logo, fine print. */
.awo-logo { display: grid; place-items: center; margin: 10px 0; padding: 14px; border-radius: 14px; background: rgba(8, 5, 26, .72); border: 1px solid var(--line); }
.awo-logo img { max-width: 100%; max-height: 120px; object-fit: contain; }
.awo-fine { font-size: 12px; opacity: .8; }

/* 2.3.1: the TV between rounds. Big QR code with "Scan to play" under it, tonight's leaderboard,
   a big column (how it works, champions, themes, ads sized to fit) and the leaderboards on the right. */
.awt-promo-msg { animation-iteration-count: 1; animation-fill-mode: forwards; }
.awt-logo { display: block; max-width: 100%; max-height: 13vh; object-fit: contain; object-position: left center; }
.awt-join.big { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 1vh; padding: 1.6vh 1vw; }
.awt-join.big .awt-qr { width: min(100%, 27vh); padding: 10px; }
.awt-join.big .awt-join-t { justify-items: center; }
.awt-join.big .awt-join-t b { font-size: clamp(20px, 1.9vw, 54px); }
.awt-tn-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6em; flex-wrap: wrap; }
.awt-here { color: var(--ok); font: 800 clamp(11px, .85vw, 24px) var(--font-b); }
.awt-fine { display: block; margin-top: .8vh; color: rgba(255, 231, 163, .7); font: 600 clamp(9px, .62vw, 17px)/1.3 var(--font-b); }
.awt-stage.brk { justify-content: flex-start; }
.awt-brk { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 2vw; }
.awt-brk.solo { grid-template-columns: minmax(0, 1fr); }
.awt-brk-main, .awt-brk-side { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.awt-brk-main > .awt-slide { flex: 1; justify-content: center; }
.awt-brk-side { padding: 2vh 1.2vw; border-radius: 20px; background: rgba(0, 0, 0, .28); border: 1px solid var(--line); }
.awt-brk-side .awt-h1 { font-size: clamp(18px, 1.9vw, 54px); }
.awt-brk-side .awt-sub { font-size: clamp(12px, 1vw, 28px); }
.awt-brk .awt-slide .awt-rows, .awt-brk-side .awt-slide .awt-rows { grid-template-columns: 1fr; }
.awt-brk-main .awt-how { font-size: clamp(18px, 1.8vw, 52px); }
.awt-brk-main .awt-champs { grid-template-columns: 1fr 1fr; }
.awt-ad { flex: 1; min-height: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: stretch; }
.awt-ad img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; border-radius: 0; box-shadow: none; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .55)); }
@media (max-width: 900px) { .awt-brk { grid-template-columns: 1fr; grid-template-rows: auto auto; } .awt-ad img { height: auto; max-height: 70vh; } }
.awp-fine { display: block; margin-top: -4px; color: var(--muted); font-size: 11px; line-height: 1.35; text-align: center; }
.awp-won .awp-fine { margin-top: 0; }
.pp-fine { margin: .1in 0 0; font-size: 9pt; color: #555; }
.pp-logo { display: block; max-width: 4in; max-height: 1.4in; margin: .25in auto 0; object-fit: contain; }
.awt > .ar-ticker .tk-score { font-size: 1.3em; }

/* 2.3.2: flames rise across the whole ticker before a promo slides up. */
.awt-flames { position: absolute; z-index: 89; left: 0; right: 0; bottom: 0; height: calc(var(--awt-tk, clamp(48px, 6.4vh, 120px)) * 2.4); pointer-events: none; overflow: hidden;
  transform: translateY(100%); opacity: 0; transition: transform .6s cubic-bezier(.2, 1.3, .4, 1), opacity .3s; }
.awt-flames::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(0deg, #FF4D1C, rgba(255, 120, 30, .85) 45%, transparent); filter: blur(4px); }
.awt-flames.in { transform: translateY(0); opacity: 1; }
.awt-flames.out { opacity: 0; transition: opacity .8s; }
.awt-flames i { position: absolute; bottom: -12%; border-radius: 50% 50% 20% 20% / 65% 65% 35% 35%; transform-origin: 50% 100%; filter: blur(2px); mix-blend-mode: screen;
  animation: awt-fl .6s ease-in-out infinite alternate; }
.awt-flames i.fl0 { background: radial-gradient(ellipse at 50% 85%, #FFF6B0 0%, #FFD23F 25%, #FF7A1A 60%, rgba(255, 40, 0, 0) 78%); }
.awt-flames i.fl1 { background: radial-gradient(ellipse at 50% 85%, #FFE27A 0%, #FF9E2C 30%, #FF3D17 62%, rgba(200, 20, 0, 0) 80%); }
.awt-flames i.fl2 { background: radial-gradient(ellipse at 50% 85%, #FFFFFF 0%, #FFE066 20%, #FF8A1F 55%, rgba(255, 60, 0, 0) 76%); }
@keyframes awt-fl { 0% { transform: scale(.9, .75) translateY(4%) skewX(-4deg); opacity: .8; } 50% { transform: scale(1.05, 1.05) translateY(-3%) skewX(3deg); } 100% { transform: scale(.95, 1.2) translateY(-8%) skewX(-2deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .awt-flames i { animation: none; } }

/* Answers in 3, 2, 1. */
.ar-cd { display: flex; align-items: center; justify-content: center; gap: .5em; }
.ar-cd-k { font: 800 1em var(--font-d); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ar-cd-n { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 .3em; border-radius: 999px; font: 900 2.2em/1 var(--font-d); color: #fff;
  background: radial-gradient(circle at 50% 35%, rgba(255, 201, 60, .45), rgba(255, 120, 40, .25)); border: 2px solid rgba(255, 201, 60, .75); box-shadow: 0 0 24px rgba(255, 170, 40, .45); }
.ar-cd-n.pop { animation: ar-cd-pop .9s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes ar-cd-pop { 0% { transform: scale(2.2); opacity: 0; } 25% { transform: scale(.9); opacity: 1; } 45% { transform: scale(1.06); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ar-cd-n.pop { animation: none; } }
.awt-cd { font-size: clamp(16px, 1.6vw, 46px); }
.awp-cd { font-size: 15px; margin: 12px 0 0; }

/* 2.3.4: soft fades between rounds (no flashing), and promo flames kept inside the ticker. */
.awt-brk .awt-slide, .awt-brk .awt-ad img { animation: none; }
.awt-brk-top { flex: none; }
.awt-fade-in { animation: awt-fade-in .6s ease both !important; }
.awt-fade-out { animation: awt-fade-out .45s ease both !important; }
@keyframes awt-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes awt-fade-out { from { opacity: 1; } to { opacity: 0; } }
.awt-brk .awt-ad.awt-fade-in, .awt-brk .awt-ad.awt-fade-out { animation-duration: .9s !important; }
.awt-flames { height: var(--awt-tk, clamp(48px, 6.4vh, 120px)); }
.awt-flames::before { height: 35%; }
.awt-flames i { bottom: -18%; }
.awt-promo::before { display: none; }
@media (prefers-reduced-motion: reduce) { .awt-fade-in, .awt-fade-out { animation: none !important; } }

/* 2.3.5: the left column takes turns between the QR code and the scoreboard. */
.awt-v-box, .awt-prize-box { flex: none; }
.awt-side-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.awt-side-body > .awt-join.big { flex: 1; min-height: 0; justify-content: center; align-content: center; }
.awt-side-body > .awt-join.big .awt-qr { width: min(100%, 42vh); }
.awt-side-body > .awt-panel { flex: 1; }

/* Answers hidden until the countdown is done, then they pop in one by one. */
.awt-opts.wait { display: flex; align-items: center; justify-content: center; min-height: 26vh; }
.awt-cd.big { font-size: clamp(22px, 2.6vw, 72px); }
.awt-opts.show .awt-opt { animation: awt-opt-in .45s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes awt-opt-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.awp-opts.wait { display: flex; align-items: center; justify-content: center; min-height: 180px; }
.awp-cd.big { font-size: 18px; margin: 0; }
.awp-opt.pop { animation: awt-opt-in .4s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
@media (prefers-reduced-motion: reduce) { .awt-opts.show .awt-opt, .awp-opt.pop { animation: none; } }

/* ---------- 2.3.9: TV looks (Settings, TV look) ----------
 * Classic is the original. Every other look (neon pub, neon sign, retro arcade, chalkboard, game show)
 * shares one framed layout: the board on the left in a frame, the scores and QR code on the right, a
 * Battle Arena Trivia sign at the top. Each look sets its colors, fonts and sign through the --fx variables. */
@font-face { font-family: 'Oswald'; font-weight: 500; font-display: swap; src: url(fonts/oswald-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Oswald'; font-weight: 600 900; font-display: swap; src: url(fonts/oswald-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Permanent Marker'; font-weight: 400; font-display: swap; src: url(fonts/permanent-marker-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Anton'; font-weight: 400 900; font-display: swap; src: url(fonts/anton-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Press Start 2P'; font-weight: 400 900; font-display: swap; src: url(fonts/press-start-2p-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Patrick Hand'; font-weight: 400 900; font-display: swap; src: url(fonts/patrick-hand-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-weight: 700 900; font-display: swap; src: url(fonts/playfair-display-latin-700-normal.woff2) format('woff2'); }

.awt-fx-logo { display: none; }
body.awt-fx {
  --fx-page: #030719;
  --fx-art: radial-gradient(ellipse 60% 40% at 15% 0%, rgba(61, 139, 255, .28), transparent 70%), radial-gradient(ellipse 50% 40% at 90% 10%, rgba(255, 61, 232, .14), transparent 70%), radial-gradient(ellipse 80% 60% at 50% 110%, rgba(255, 150, 40, .12), transparent 70%), repeating-linear-gradient(90deg, rgba(255, 255, 255, .015) 0 2px, transparent 2px 120px);
  --fx-frame: #3D8BFF; --fx-frame-w: 3px; --fx-radius: 22px;
  --fx-glow: 0 0 14px rgba(61, 139, 255, .9), 0 0 48px rgba(61, 139, 255, .45), inset 0 0 40px rgba(61, 139, 255, .25);
  --fx-panel: linear-gradient(180deg, rgba(10, 24, 78, .72), rgba(4, 10, 40, .82)); --fx-side: rgba(4, 10, 40, .85); --fx-inner: rgba(4, 10, 40, .6);
  --fx-head: 'Oswald', 'Chakra Petch', system-ui, sans-serif; --fx-body: 'Oswald', 'Inter', system-ui, sans-serif;
  --fx-text: #fff; --fx-text-shadow: 0 2px 0 #000; --fx-accent: #7FD4FF; --fx-accent-glow: 0 0 10px rgba(61, 139, 255, .8);
  --fx-score: #FFD447; --fx-lead: #39D7FF; --fx-prize: #FF3DE8;
  --fx-right-bg: rgba(61, 139, 255, .12); --fx-right-line: #BFF0FF; --fx-right-glow: 0 0 8px #fff, 0 0 18px #7FD4FF, 0 0 40px #3D8BFF, inset 0 0 18px rgba(127, 212, 255, .5);
  --fx-ticker: linear-gradient(90deg, #04103A, #0A1F66);
  --font-d: var(--fx-head); --gold: var(--fx-score); background: var(--fx-page);
}
body.awt-fx .ar-bg { background: var(--fx-art), var(--fx-page); }
body.awt-fx .ar-bg .ar-grid, body.awt-fx .ar-bg .ar-glow { display: none; }
body.awt-fx .awt { grid-template-columns: 75fr minmax(280px, 25fr); }
body.awt-fx .awt-stage { grid-column: 1; margin: 2.2vh 0 2.2vh 1.6vw; padding: 17vh 2.6vw 3vh; border-radius: var(--fx-radius); border: var(--fx-frame-w) solid var(--fx-frame); background: var(--fx-panel); box-shadow: var(--fx-glow); justify-content: safe center; }
body.awt-fx .awt-stage.brk { justify-content: flex-start; }
body.awt-fx .awt-side { grid-column: 2; margin: 2.2vh 1.6vw 2.2vh 1.4vw; border: var(--fx-frame-w) solid var(--fx-frame); border-radius: var(--fx-radius); background: var(--fx-side); box-shadow: var(--fx-glow); }
body.awt-fx .awt > .ar-ticker { grid-column: 1 / -1; background: var(--fx-ticker); border-top: 2px solid var(--fx-frame); }
body.awt-fx .awt-fx-logo { display: block; position: absolute; z-index: 5; left: 3.6vw; top: 4.2vh; pointer-events: none; }
.awt-fx-logo b, .awt-fx-logo i { display: block; font-style: normal; }
.awt-fx-logo .bolt { position: absolute; display: none; }
body.awt-fx .awt-qhead { position: absolute; top: 4vh; right: 2.6vw; display: grid; justify-items: end; gap: .3vh; text-align: right; }
body.awt-fx .awt-qhead .awt-mode { border: 0; padding: 0; font: 700 clamp(22px, 2.6vw, 76px)/1 var(--fx-head); color: var(--fx-text); letter-spacing: .02em; text-shadow: var(--fx-accent-glow); }
body.awt-fx .awt-qn { font: 600 clamp(13px, 1.1vw, 32px) var(--fx-head); color: var(--fx-accent); letter-spacing: .12em; }
body.awt-fx .awt-cat { margin: 0; font: 600 clamp(18px, 1.8vw, 52px) var(--fx-head); text-transform: none; letter-spacing: 0; color: var(--fx-accent); text-shadow: var(--fx-accent-glow); }
body.awt-fx .awt-q { text-align: left; font: 700 clamp(30px, 3.6vw, 110px)/1.12 var(--fx-body); color: var(--fx-text); text-shadow: var(--fx-text-shadow); }
body.awt-fx .awt-opts:not(.wait) { grid-template-columns: 1fr; gap: 1.2vh; max-width: 62%; }
body.awt-fx .awt-opt { min-height: 0; padding: .45em .8em; border-radius: 14px; background: transparent; box-shadow: none; border: 3px solid transparent; font: 600 clamp(20px, 2.2vw, 64px)/1.15 var(--fx-body); color: var(--fx-text); text-shadow: var(--fx-text-shadow); }
body.awt-fx .awt-opt .ar-ltr { display: inline-flex; white-space: nowrap; min-width: 1.6em; width: auto; height: auto; padding: 0; background: none; box-shadow: none; font: inherit; color: var(--fx-accent); }
body.awt-fx .awt-opt .ar-ltr::after { content: ")"; }
body.awt-fx .awt-opts.reveal .awt-opt.wrong { opacity: .35; }
body.awt-fx .awt-opts.reveal .awt-opt.right { background: var(--fx-right-bg); color: var(--fx-text); transform: none; border-color: var(--fx-right-line); box-shadow: var(--fx-right-glow); }
body.awt-fx .awt-qfoot { justify-content: flex-start; }
body.awt-fx .awt-h2 { font: 700 clamp(18px, 1.8vw, 52px) var(--fx-head); letter-spacing: .04em; color: var(--fx-text); text-shadow: var(--fx-accent-glow); }
body.awt-fx .awt-rows li { background: transparent; border-radius: 0; padding: .5em .2em; border-bottom: 1px solid color-mix(in srgb, var(--fx-frame) 35%, transparent); font-family: var(--fx-body); }
body.awt-fx .awt-rows li:nth-child(1) { background: transparent; box-shadow: inset 0 -3px 0 var(--fx-lead); }
body.awt-fx .awt-rows .tx b { font-weight: 600; color: var(--fx-text); }
body.awt-fx .awt-rows .sc { font: 700 1.25em var(--fx-head); color: var(--fx-score); }
body.awt-fx .awt-rows .rk { color: var(--fx-accent); }
body.awt-fx .awt-v-name { font-family: var(--fx-head); font-weight: 700; color: var(--fx-text); }
body.awt-fx .awt-join { background: color-mix(in srgb, var(--fx-frame) 8%, transparent); border: 2px solid color-mix(in srgb, var(--fx-frame) 55%, transparent); }
body.awt-fx .awt-join-t b { font-family: var(--fx-head); color: var(--fx-text); }
body.awt-fx .awt-prize { background: color-mix(in srgb, var(--fx-prize) 10%, transparent); border-color: var(--fx-prize); box-shadow: 0 0 14px color-mix(in srgb, var(--fx-prize) 50%, transparent); }
body.awt-fx .awt-prize-k { color: color-mix(in srgb, var(--fx-prize) 45%, #fff); }
body.awt-fx .awt-next, body.awt-fx .awt-brk-side { background: var(--fx-inner); border: 2px solid color-mix(in srgb, var(--fx-frame) 60%, transparent); }
body.awt-fx .awt-h1, body.awt-fx .awt-big { font-family: var(--fx-head); font-weight: 700; }
body.awt-fx .awt-big { background: none; color: var(--fx-text); text-shadow: var(--fx-accent-glow); }
body.awt-fx .awt-count { font-family: var(--fx-head); text-shadow: var(--fx-accent-glow); }
body.awt-fx .awt-mode { border-color: color-mix(in srgb, var(--fx-accent) 60%, transparent); color: var(--fx-accent); }
body.awt-fx .ar-cd-n { font-family: var(--fx-head); border-color: var(--fx-accent); background: color-mix(in srgb, var(--fx-frame) 22%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--fx-frame) 70%, transparent); }
body.awt-fx .awt-timer { background: color-mix(in srgb, var(--fx-frame) 18%, transparent); }
@media (max-width: 900px) {
  body.awt-fx .awt { grid-template-columns: 1fr; }
  body.awt-fx .awt-stage, body.awt-fx .awt-side { grid-column: 1; margin: 10px; }
  body.awt-fx .awt-opts:not(.wait) { max-width: none; }
}

/* Neon pub: a hand-lettered blue neon sign with pink TRIVIA under it. */
body.awt-th-neon .awt-fx-logo { transform: rotate(-4deg); }
body.awt-th-neon .awt-fx-logo b { font: 400 clamp(30px, 4.2vw, 120px)/.95 'Permanent Marker', var(--fx-head); color: #E8F7FF; letter-spacing: .02em; text-shadow: 0 0 4px #fff, 0 0 10px #7FD4FF, 0 0 22px #3D8BFF, 0 0 46px #3D8BFF, 3px 3px 0 #0A2C8A; }
body.awt-th-neon .awt-fx-logo i { margin: .1em 0 0 18%; font: 700 clamp(18px, 2.2vw, 64px)/1 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .38em; color: #FFD6FB; text-shadow: 0 0 4px #fff, 0 0 10px #FF3DE8, 0 0 24px #FF3DE8, 0 0 44px #B4009E; }
body.awt-th-neon .awt-fx-logo .bolt { display: block; left: -2.6vw; top: 30%; width: clamp(16px, 1.9vw, 54px); fill: #FFE14A; filter: drop-shadow(0 0 6px #FFC21A) drop-shadow(0 0 16px #FF9800); transform: rotate(12deg); }
@media (prefers-reduced-motion: no-preference) { body.awt-th-neon .awt-fx-logo b, body.awt-th-neon .awt-fx-logo i, body.awt-th-sign .awt-fx-logo b, body.awt-th-sign .awt-fx-logo i { animation: awt-neon-hum 6s infinite; } }
@keyframes awt-neon-hum { 0%, 92%, 100% { opacity: 1; } 93% { opacity: .55; } 94% { opacity: 1; } 96% { opacity: .7; } 97% { opacity: 1; } }

/* Neon sign: tall block letters in aqua neon, TRIVIA in hot pink, like a sign over the bar. */
body.awt-th-sign {
  --fx-page: #02060F;
  --fx-art: radial-gradient(ellipse 55% 45% at 20% 5%, rgba(40, 230, 220, .2), transparent 70%), radial-gradient(ellipse 45% 40% at 85% 15%, rgba(255, 40, 180, .16), transparent 70%), radial-gradient(ellipse 70% 50% at 50% 115%, rgba(30, 80, 200, .25), transparent 70%);
  --fx-frame: #2CE6DC; --fx-glow: 0 0 12px rgba(44, 230, 220, .85), 0 0 44px rgba(44, 230, 220, .35), inset 0 0 36px rgba(44, 230, 220, .18);
  --fx-panel: linear-gradient(180deg, rgba(6, 26, 48, .8), rgba(2, 10, 24, .88)); --fx-side: rgba(2, 10, 24, .9); --fx-inner: rgba(2, 12, 28, .7);
  --fx-head: 'Anton', 'Oswald', sans-serif; --fx-body: 'Oswald', sans-serif;
  --fx-accent: #6FF7EF; --fx-accent-glow: 0 0 10px rgba(44, 230, 220, .8); --fx-lead: #FF2FB9; --fx-prize: #FF2FB9; --fx-score: #FFE66B;
  --fx-right-bg: rgba(255, 47, 185, .12); --fx-right-line: #FFC2EC; --fx-right-glow: 0 0 8px #fff, 0 0 18px #FF2FB9, 0 0 42px #FF2FB9, inset 0 0 18px rgba(255, 47, 185, .45);
  --fx-ticker: linear-gradient(90deg, #031A26, #082C40);
}
body.awt-th-sign .awt-fx-logo { text-align: center; }
body.awt-th-sign .awt-fx-logo b { font: 400 clamp(34px, 4.6vw, 132px)/.95 'Anton', sans-serif; text-transform: uppercase; letter-spacing: .01em; color: #D9FFFC; filter: url(#awt-rough);
  text-shadow: 0 0 2px #fff, 0 0 8px #5CF4EC, 0 0 18px #2CE6DC, 0 0 38px #18C8C0, 0 0 70px rgba(24, 200, 192, .6); }
body.awt-th-sign .awt-fx-logo i { margin-top: .12em; font: 400 clamp(22px, 2.9vw, 84px)/1 'Anton', sans-serif; text-transform: uppercase; letter-spacing: .14em; color: #FFD0F0;
  text-shadow: 0 0 2px #fff, 0 0 8px #FF4FC8, 0 0 18px #FF2FB9, 0 0 40px #E0008F; }

/* Retro arcade: black screen with scan lines, pixel letters, hard pixel shadows. */
body.awt-th-arcade {
  --fx-page: #000;
  --fx-art: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 4px), radial-gradient(ellipse 70% 60% at 50% 40%, rgba(80, 0, 160, .35), transparent 75%);
  --fx-frame: #FFE600; --fx-frame-w: 4px; --fx-radius: 0; --fx-glow: 6px 6px 0 #FF2E88, 12px 12px 0 rgba(0, 229, 255, .6);
  --fx-panel: #0B0618; --fx-side: #0B0618; --fx-inner: #140A2A;
  --fx-head: 'Press Start 2P', monospace; --fx-body: 'Press Start 2P', monospace;
  --fx-text: #F4F4F4; --fx-text-shadow: 3px 3px 0 #3A0CA3; --fx-accent: #00E5FF; --fx-accent-glow: 3px 3px 0 #FF2E88;
  --fx-score: #FFE600; --fx-lead: #00FF6A; --fx-prize: #00FF6A;
  --fx-right-bg: #00FF6A; --fx-right-line: #00FF6A; --fx-right-glow: 6px 6px 0 #007A33;
  --fx-ticker: #140A2A;
}
body.awt-th-arcade .awt-q { font-size: clamp(18px, 2vw, 60px); line-height: 1.5; }
body.awt-th-arcade .awt-opt { font-size: clamp(14px, 1.4vw, 42px); line-height: 1.6; border-radius: 0; }
body.awt-th-arcade .awt-opts.reveal .awt-opt.right { color: #062B12; text-shadow: none; }
body.awt-th-arcade .awt-opts.reveal .awt-opt.right .ar-ltr { color: #062B12; }
body.awt-th-arcade .awt-qhead .awt-mode { font-size: clamp(14px, 1.5vw, 44px); }
body.awt-th-arcade .awt-qn, body.awt-th-arcade .awt-cat { font-size: clamp(10px, .85vw, 26px); }
body.awt-th-arcade .awt-h2 { font-size: clamp(11px, 1vw, 30px); line-height: 1.5; }
body.awt-th-arcade .awt-rows li { font-size: clamp(10px, .8vw, 24px); }
body.awt-th-arcade .awt-h1 { font-size: clamp(14px, 1.6vw, 46px); line-height: 1.5; }
body.awt-th-arcade .awt-count { font-size: clamp(40px, 5vw, 150px); }
body.awt-th-arcade .awt-next .awt-count { font-size: clamp(26px, 3vw, 90px); }
body.awt-th-arcade .awt-fx-logo b { font: 400 clamp(22px, 2.9vw, 84px)/1.2 'Press Start 2P', monospace; color: #FFE600; text-shadow: 4px 4px 0 #FF2E88, 8px 8px 0 #3A0CA3; }
body.awt-th-arcade .awt-fx-logo i { margin-top: .5em; font: 400 clamp(14px, 1.6vw, 46px)/1 'Press Start 2P', monospace; letter-spacing: .3em; color: #00E5FF; text-shadow: 3px 3px 0 #3A0CA3; }
@media (prefers-reduced-motion: no-preference) { body.awt-th-arcade .awt-fx-logo i { animation: awt-blink 1.2s steps(2) infinite; } }
@keyframes awt-blink { 50% { opacity: .25; } }

/* Chalkboard: green slate in a wooden frame, chalk handwriting. */
body.awt-th-chalk {
  --fx-page: #2B1D12;
  --fx-art: repeating-linear-gradient(90deg, rgba(0, 0, 0, .18) 0 3px, transparent 3px 26px), linear-gradient(180deg, #3B2716, #24170C);
  --fx-frame: #8B5A2B; --fx-frame-w: 12px; --fx-radius: 10px; --fx-glow: inset 0 0 0 3px #5E3A18, inset 0 0 60px rgba(0, 0, 0, .55), 0 10px 30px rgba(0, 0, 0, .6);
  --fx-panel: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .06), transparent 60%), linear-gradient(160deg, #2F4A3A, #1F3529); --fx-side: linear-gradient(160deg, #2F4A3A, #1F3529); --fx-inner: rgba(255, 255, 255, .05);
  --fx-head: 'Patrick Hand', 'Comic Sans MS', cursive; --fx-body: 'Patrick Hand', 'Comic Sans MS', cursive;
  --fx-text: #F2F2EA; --fx-text-shadow: 0 0 2px rgba(255, 255, 255, .45); --fx-accent: #FFE9A3; --fx-accent-glow: 0 0 2px rgba(255, 255, 255, .4);
  --fx-score: #FFE9A3; --fx-lead: #F7A8C4; --fx-prize: #F7A8C4;
  --fx-right-bg: transparent; --fx-right-line: #FFFFFF; --fx-right-glow: 0 0 0 2px rgba(255, 255, 255, .25);
  --fx-ticker: #24170C;
}
body.awt-th-chalk .awt-opts.reveal .awt-opt.right { border-style: dashed; border-radius: 40px / 30px; }
body.awt-th-chalk .awt-q, body.awt-th-chalk .awt-opt { font-weight: 400; }
body.awt-th-chalk .awt-fx-logo { transform: rotate(-2deg); }
body.awt-th-chalk .awt-fx-logo b { font: 400 clamp(36px, 4.6vw, 132px)/.95 'Patrick Hand', cursive; color: #F7F7EF; text-shadow: 0 0 2px rgba(255, 255, 255, .8), 2px 2px 0 rgba(255, 255, 255, .12); }
body.awt-th-chalk .awt-fx-logo i { margin: .05em 0 0 22%; font: 400 clamp(22px, 2.6vw, 76px)/1 'Patrick Hand', cursive; letter-spacing: .3em; color: #F7A8C4; text-transform: uppercase; }
body.awt-th-chalk .awt-fx-logo i::after { content: ""; display: block; height: .12em; margin-top: .1em; background: #FFE9A3; border-radius: 4px; transform: rotate(-1deg); opacity: .8; }

/* Game show: red velvet, gold, and a frame of marquee light bulbs. */
body.awt-th-show {
  --fx-page: #2A0610;
  --fx-art: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(255, 200, 80, .22), transparent 70%), repeating-linear-gradient(90deg, rgba(0, 0, 0, .25) 0 14px, rgba(255, 255, 255, .03) 14px 28px), linear-gradient(180deg, #5C0A1E, #2A0610);
  --fx-frame: #E8B44A; --fx-frame-w: 6px; --fx-radius: 26px;
  --fx-glow: 0 0 0 4px #7A4A12, 0 0 30px rgba(232, 180, 74, .5), inset 0 0 50px rgba(0, 0, 0, .55);
  --fx-panel: radial-gradient(ellipse at 50% 0%, #3A1050, #12061F 70%); --fx-side: linear-gradient(180deg, #24082F, #12061F); --fx-inner: rgba(255, 220, 140, .06);
  --fx-head: 'Playfair Display', 'DM Serif Display', Georgia, serif; --fx-body: 'Oswald', sans-serif;
  --fx-text: #FFF6E0; --fx-text-shadow: 0 2px 0 #000; --fx-accent: #F6CF6C; --fx-accent-glow: 0 0 12px rgba(246, 207, 108, .6);
  --fx-score: #F6CF6C; --fx-lead: #F6CF6C; --fx-prize: #FF5A7A;
  --fx-right-bg: linear-gradient(180deg, #F6CF6C, #C8902C); --fx-right-line: #FFF1C4; --fx-right-glow: 0 0 30px rgba(246, 207, 108, .8);
  --fx-ticker: linear-gradient(90deg, #3A0614, #5C0A1E);
}
body.awt-th-show .awt-stage, body.awt-th-show .awt-side { outline: 3px dotted #FFF3B0; outline-offset: -14px; }
@media (prefers-reduced-motion: no-preference) { body.awt-th-show .awt-stage, body.awt-th-show .awt-side { animation: awt-bulbs 1s steps(2) infinite; } }
@keyframes awt-bulbs { 50% { outline-color: #E8B44A; } }
body.awt-th-show .awt-opt { background: rgba(0, 0, 0, .35); border: 2px solid rgba(246, 207, 108, .45); border-radius: 999px; }
body.awt-th-show .awt-opts.reveal .awt-opt.right { color: #2A0610; text-shadow: none; }
body.awt-th-show .awt-opts.reveal .awt-opt.right .ar-ltr { color: #2A0610; }
body.awt-th-show .awt-fx-logo b { font: 900 clamp(32px, 4.2vw, 120px)/1 'Playfair Display', serif; font-style: italic; background: linear-gradient(180deg, #FFF6D0, #F6CF6C 45%, #B47A1E); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 #5A1A00) drop-shadow(0 0 16px rgba(246, 207, 108, .5)); }
body.awt-th-show .awt-fx-logo i { margin: .15em 0 0 30%; font: 700 clamp(16px, 1.8vw, 52px)/1 'Oswald', sans-serif; letter-spacing: .5em; text-transform: uppercase; color: #FF5A7A; text-shadow: 0 0 10px rgba(255, 90, 122, .7); }

/* The look picker in Settings: a small picture of each look. */
.awo-looks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.awo-look { display: grid; gap: 8px; justify-items: center; padding: 10px; border-radius: 14px; border: 2px solid var(--line); cursor: pointer; font-weight: 800; text-align: center; }
.awo-look:has(input:checked) { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 201, 60, .25); }
.awo-look input { position: absolute; opacity: 0; }
.awo-look-pic { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; }
.awo-look-pic i, .awo-look-pic b { position: absolute; top: 9%; bottom: 9%; border-radius: 6px; }
.awo-look-pic i { left: 4%; width: 66%; } .awo-look-pic b { right: 4%; width: 22%; }
.awo-look-pic::after { position: absolute; left: 9%; top: 14%; font-size: 11px; white-space: nowrap; }
.awo-look-pic.classic { background: linear-gradient(135deg, #1A1050, #3A1A6A); }
.awo-look-pic.classic i { left: 0; top: 0; bottom: 0; width: 25%; border-radius: 0; background: rgba(8, 5, 26, .8); border-right: 2px solid rgba(124, 92, 255, .6); }
.awo-look-pic.classic b { left: 32%; right: 6%; top: 50%; bottom: auto; width: auto; height: 30%; background: linear-gradient(90deg, #6C4CFF 0 48%, transparent 48% 52%, #FF8A3D 52%); border-radius: 4px; }
.awo-look-pic.neon { background: #030719; }
.awo-look-pic.neon i, .awo-look-pic.neon b { border: 2px solid #3D8BFF; box-shadow: 0 0 8px #3D8BFF; }
.awo-look-pic.neon::after { content: "Battle Arena"; font-family: 'Permanent Marker', sans-serif; font-size: 13px; color: #E8F7FF; text-shadow: 0 0 6px #3D8BFF; transform: rotate(-4deg); }
.awo-look-pic.sign { background: #02060F; }
.awo-look-pic.sign i, .awo-look-pic.sign b { border: 2px solid #2CE6DC; box-shadow: 0 0 8px #2CE6DC; }
.awo-look-pic.sign::after { content: "BATTLE ARENA"; font: 400 13px 'Anton', sans-serif; color: #D9FFFC; text-shadow: 0 0 6px #2CE6DC; }
.awo-look-pic.arcade { background: #000; }
.awo-look-pic.arcade i, .awo-look-pic.arcade b { border: 2px solid #FFE600; border-radius: 0; box-shadow: 3px 3px 0 #FF2E88; }
.awo-look-pic.arcade::after { content: "BATTLE"; font: 400 9px 'Press Start 2P', monospace; color: #FFE600; text-shadow: 2px 2px 0 #FF2E88; }
.awo-look-pic.chalk { background: #3B2716; }
.awo-look-pic.chalk i, .awo-look-pic.chalk b { border: 4px solid #8B5A2B; background: #2F4A3A; }
.awo-look-pic.chalk::after { content: "Battle Arena"; font: 400 14px 'Patrick Hand', cursive; color: #F7F7EF; }
.awo-look-pic.show { background: linear-gradient(180deg, #5C0A1E, #2A0610); }
.awo-look-pic.show i, .awo-look-pic.show b { border: 2px solid #E8B44A; outline: 1px dotted #FFF3B0; outline-offset: -4px; background: #1A0826; }
.awo-look-pic.show::after { content: "Battle Arena"; font: italic 900 13px 'Playfair Display', serif; color: #F6CF6C; }
/* Retro arcade: pixel type runs wide, so the smaller bits get smaller and the sign goes all capitals. */
body.awt-th-arcade .awt-fx-logo b, body.awt-th-arcade .awt-fx-logo i { text-transform: uppercase; }
body.awt-th-arcade .awt-fx-logo b { font-size: clamp(18px, 2.4vw, 70px); }
body.awt-th-arcade .awt-join-t b { font-size: clamp(12px, 1vw, 30px); line-height: 1.4; }
body.awt-th-arcade .awt-join-t > .awt-code { font-size: clamp(16px, 1.6vw, 46px); line-height: 1.3; }
body.awt-th-arcade .awt-join-t > .awt-code small { font-size: clamp(8px, .55vw, 16px); margin-bottom: .4em; }
body.awt-th-arcade .awt-qhead { gap: .8vh; }
body.awt-th-arcade .awt-qhead .awt-mode, body.awt-th-arcade .awt-qn, body.awt-th-arcade .awt-cat { line-height: 1.4; }
body.awt-th-arcade .awt-brk-side .awt-h1 { font-size: clamp(12px, 1.2vw, 36px); }
body.awt-th-arcade .awt-rows .tx small { font-size: .65em; line-height: 1.6; }
body.awt-th-arcade .awt-join.big .awt-join-t b { font-size: clamp(12px, 1vw, 30px); }
body.awt-th-arcade .awt-cat, body.awt-th-arcade .awt-qn { text-shadow: none; }

/* 2.3.11: organizations on the boards look like players: a round badge, no box around our own. */
.awt-rows li.me { outline: 0; background: rgba(255, 255, 255, .05); }
.awt-rows li.me .tx b { color: var(--me); }
.awt-rows li.me:nth-child(1) { background: linear-gradient(90deg, rgba(255, 201, 60, .22), rgba(255, 201, 60, .06)); }
body.awt-fx .awt-rows li.me, body.awt-fx .awt-rows li.me:nth-child(1) { background: transparent; }
body.awt-fx .awt-rows li.me .tx b { color: var(--fx-accent); }
.awt-org-av { background: linear-gradient(135deg, #6C4CFF, #29D3FF); color: #fff; font-weight: 900; }
.awt-org-av.has-img { background-color: #fff; background-size: contain; background-repeat: no-repeat; background-position: center; }

/* 2.3.12: the answers always sit in two columns on the TV, in every look and on every screen. */
.awt-opts:not(.wait), body.awt-fx .awt-opts:not(.wait) { grid-template-columns: 1fr 1fr; max-width: none; }
@media (max-width: 900px) { .awt-opts:not(.wait), body.awt-fx .awt-opts:not(.wait) { grid-template-columns: 1fr 1fr; } }

/* ---------- 2.3.13: ten more TV looks ---------- */
@font-face { font-family: 'Monoton'; font-weight: 400 900; font-display: swap; src: url(fonts/monoton-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Orbitron'; font-weight: 400 700; font-display: swap; src: url(fonts/orbitron-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Orbitron'; font-weight: 800 900; font-display: swap; src: url(fonts/orbitron-latin-900-normal.woff2) format('woff2'); }
@font-face { font-family: 'Rye'; font-weight: 400 900; font-display: swap; src: url(fonts/rye-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Bangers'; font-weight: 400 900; font-display: swap; src: url(fonts/bangers-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Pacifico'; font-weight: 400 900; font-display: swap; src: url(fonts/pacifico-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'VT323'; font-weight: 400 900; font-display: swap; src: url(fonts/vt323-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Black Ops One'; font-weight: 400 900; font-display: swap; src: url(fonts/black-ops-one-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Creepster'; font-weight: 400 900; font-display: swap; src: url(fonts/creepster-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Righteous'; font-weight: 400 900; font-display: swap; src: url(fonts/righteous-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Fredoka'; font-weight: 600 900; font-display: swap; src: url(fonts/fredoka-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'DM Serif Display'; font-weight: 400 900; font-display: swap; src: url(fonts/dm-serif-display-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 400; font-display: swap; src: url(fonts/space-grotesk-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 600 900; font-display: swap; src: url(fonts/space-grotesk-latin-700-normal.woff2) format('woff2'); }

/* Synthwave: an 80s sunset, a glowing grid floor, chrome and hot pink. */
body.awt-th-synth {
  --fx-page: #12002A;
  --fx-art: linear-gradient(180deg, transparent 58%, rgba(255, 60, 200, .18) 58.3%, transparent 60%), repeating-linear-gradient(90deg, rgba(255, 60, 200, .28) 0 2px, transparent 2px 7vw), repeating-linear-gradient(0deg, rgba(255, 60, 200, .22) 0 2px, transparent 2px 5vh), radial-gradient(circle at 50% 60%, #FF8A3D 0 9vw, transparent 9.2vw), linear-gradient(180deg, #12002A 0%, #3B0A5E 45%, #8E1E7A 58%, #12002A 58.5%);
  --fx-frame: #FF3CC8; --fx-glow: 0 0 12px #FF3CC8, 0 0 40px rgba(255, 60, 200, .45), inset 0 0 36px rgba(255, 60, 200, .2);
  --fx-panel: linear-gradient(180deg, rgba(30, 4, 60, .85), rgba(14, 2, 34, .9)); --fx-side: rgba(18, 2, 40, .9); --fx-inner: rgba(40, 6, 80, .6);
  --fx-head: 'Orbitron', sans-serif; --fx-body: 'Oswald', sans-serif;
  --fx-accent: #3CF2FF; --fx-accent-glow: 0 0 10px rgba(60, 242, 255, .8); --fx-score: #FFD23C; --fx-lead: #3CF2FF; --fx-prize: #3CF2FF;
  --fx-right-bg: rgba(60, 242, 255, .14); --fx-right-line: #CFFBFF; --fx-right-glow: 0 0 10px #fff, 0 0 26px #3CF2FF, 0 0 50px #FF3CC8;
  --fx-ticker: linear-gradient(90deg, #2A0350, #5A0E6E);
}
body.awt-th-synth .awt-fx-logo b { font: 400 clamp(26px, 3.4vw, 98px)/1.1 'Monoton', sans-serif; color: #FFE3FA; text-shadow: 0 0 6px #FF3CC8, 0 0 20px #FF3CC8, 0 0 40px #8E1E7A; }
body.awt-th-synth .awt-fx-logo i { margin-top: .2em; font: 900 clamp(16px, 1.9vw, 54px)/1 'Orbitron', sans-serif; letter-spacing: .5em; background: linear-gradient(180deg, #FFFFFF, #9FE8FF 45%, #3A6BFF 55%, #E4F6FF); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Deep space: a starfield, sci-fi lettering and glowing control panels. */
body.awt-th-space {
  --fx-page: #01020A;
  --fx-art: radial-gradient(1px 1px at 10% 20%, #fff, transparent), radial-gradient(1px 1px at 30% 70%, #cfe, transparent), radial-gradient(1.5px 1.5px at 55% 35%, #fff, transparent), radial-gradient(1px 1px at 80% 15%, #fff, transparent), radial-gradient(1px 1px at 90% 80%, #ddf, transparent), radial-gradient(1.5px 1.5px at 70% 60%, #fff, transparent), radial-gradient(1px 1px at 20% 90%, #fff, transparent), radial-gradient(ellipse 50% 40% at 80% 30%, rgba(120, 60, 255, .25), transparent 70%), radial-gradient(ellipse 40% 35% at 15% 75%, rgba(0, 200, 255, .18), transparent 70%);
  --fx-frame: #7B6CFF; --fx-radius: 6px; --fx-glow: 0 0 12px rgba(123, 108, 255, .9), 0 0 40px rgba(123, 108, 255, .3), inset 0 0 30px rgba(0, 200, 255, .12);
  --fx-panel: linear-gradient(180deg, rgba(10, 8, 40, .82), rgba(2, 4, 18, .9)); --fx-side: rgba(4, 4, 22, .9); --fx-inner: rgba(20, 16, 60, .55);
  --fx-head: 'Orbitron', sans-serif; --fx-body: 'Space Grotesk', 'Inter', sans-serif;
  --fx-accent: #6EF0FF; --fx-accent-glow: 0 0 10px rgba(110, 240, 255, .7); --fx-score: #B9FF6E; --fx-lead: #6EF0FF; --fx-prize: #B9FF6E;
  --fx-right-bg: rgba(110, 240, 255, .12); --fx-right-line: #6EF0FF; --fx-right-glow: 0 0 16px #6EF0FF, inset 0 0 18px rgba(110, 240, 255, .4);
  --fx-ticker: linear-gradient(90deg, #070620, #12104A);
}
body.awt-th-space .awt-stage, body.awt-th-space .awt-side { clip-path: polygon(0 18px, 18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); }
body.awt-th-space .awt-fx-logo b { font: 900 clamp(26px, 3.3vw, 96px)/1 'Orbitron', sans-serif; text-transform: uppercase; letter-spacing: .06em; color: #EAF6FF; text-shadow: 0 0 8px #6EF0FF, 0 0 26px #7B6CFF; }
body.awt-th-space .awt-fx-logo i { margin-top: .35em; font: 700 clamp(13px, 1.4vw, 40px)/1 'Orbitron', sans-serif; text-transform: uppercase; letter-spacing: .8em; color: #B9FF6E; }

/* Wild West saloon: weathered planks, wanted-poster lettering, brass. */
body.awt-th-western {
  --fx-page: #2A1708;
  --fx-art: repeating-linear-gradient(0deg, rgba(0, 0, 0, .35) 0 3px, transparent 3px 9vh), repeating-linear-gradient(90deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 7px), linear-gradient(180deg, #5A3416, #2A1708);
  --fx-frame: #3B220D; --fx-frame-w: 10px; --fx-radius: 4px; --fx-glow: 0 0 0 3px #B88A3E, 0 12px 30px rgba(0, 0, 0, .6), inset 0 0 50px rgba(120, 70, 20, .35);
  --fx-panel: radial-gradient(ellipse at 50% 40%, #F4E2B8, #D9B97A 80%); --fx-side: radial-gradient(ellipse at 50% 30%, #F1DDAE, #CFAE6E 85%); --fx-inner: rgba(90, 52, 22, .12);
  --fx-head: 'Rye', serif; --fx-body: 'DM Serif Display', Georgia, serif;
  --fx-text: #3A1F0A; --fx-text-shadow: none; --fx-accent: #8A2B12; --fx-accent-glow: none; --fx-score: #8A2B12; --fx-lead: #8A2B12; --fx-prize: #8A2B12;
  --fx-right-bg: rgba(138, 43, 18, .14); --fx-right-line: #8A2B12; --fx-right-glow: 0 0 0 2px #8A2B12;
  --fx-ticker: linear-gradient(90deg, #3B220D, #5A3416);
}
body.awt-th-western .awt-note, body.awt-th-western .awt-sub, body.awt-th-western .awt-v-city, body.awt-th-western .awt-join-t > span, body.awt-th-western .awt-rows .tx small, body.awt-th-western .awt-next-k { color: #6B4A26; }
body.awt-th-western .awt-pct, body.awt-th-western .awt-locked { color: #3A1F0A; background: rgba(90, 52, 22, .14); }
body.awt-th-western .awt-fx-logo b { font: 400 clamp(28px, 3.6vw, 104px)/1 'Rye', serif; color: #3A1F0A; letter-spacing: .03em; text-shadow: 2px 2px 0 rgba(255, 255, 255, .35); }
body.awt-th-western .awt-fx-logo i { margin: .2em 0 0 22%; font: 400 clamp(16px, 1.8vw, 52px)/1 'Rye', serif; letter-spacing: .4em; color: #8A2B12; }

/* Comic book: halftone dots, bold ink outlines, POW colors. */
body.awt-th-comic {
  --fx-page: #FFD23C;
  --fx-art: radial-gradient(circle, rgba(230, 50, 30, .35) 2px, transparent 2.5px) 0 0 / 16px 16px, linear-gradient(135deg, #FFD23C, #FF9A1F);
  --fx-frame: #111; --fx-frame-w: 6px; --fx-radius: 6px; --fx-glow: 10px 10px 0 #111;
  --fx-panel: #FFFFFF; --fx-side: #FFFFFF; --fx-inner: #FFF3B0;
  --fx-head: 'Bangers', 'Anton', sans-serif; --fx-body: 'Bangers', 'Anton', sans-serif;
  --fx-text: #111; --fx-text-shadow: none; --fx-accent: #E6321E; --fx-accent-glow: none; --fx-score: #E6321E; --fx-lead: #1E6BE6; --fx-prize: #1E6BE6;
  --fx-right-bg: #1E6BE6; --fx-right-line: #111; --fx-right-glow: 6px 6px 0 #111;
  --fx-ticker: #111;
}
body.awt-th-comic .awt-q, body.awt-th-comic .awt-opt, body.awt-th-comic .awt-h1, body.awt-th-comic .awt-h2 { letter-spacing: .04em; font-weight: 400; }
body.awt-th-comic .awt-opt { border: 3px solid #111; border-radius: 8px; background: #FFF3B0; }
body.awt-th-comic .awt-opts.reveal .awt-opt.right { color: #fff; }
body.awt-th-comic .awt-opts.reveal .awt-opt.right .ar-ltr { color: #FFD23C; }
body.awt-th-comic .awt-note, body.awt-th-comic .awt-sub, body.awt-th-comic .awt-v-city, body.awt-th-comic .awt-join-t > span, body.awt-th-comic .awt-rows .tx small, body.awt-th-comic .awt-next-k { color: #444; }
body.awt-th-comic .awt-pct, body.awt-th-comic .awt-locked { color: #111; background: #FFF3B0; border: 2px solid #111; }
body.awt-th-comic .awt-fx-logo { transform: rotate(-3deg); }
body.awt-th-comic .awt-fx-logo b { font: 400 clamp(34px, 4.4vw, 128px)/.95 'Bangers', sans-serif; letter-spacing: .04em; color: #FFD23C; -webkit-text-stroke: 3px #111; paint-order: stroke fill; text-shadow: 5px 5px 0 #E6321E; }
body.awt-th-comic .awt-fx-logo i { display: inline-block; margin: .15em 0 0 14%; padding: .05em .5em; font: 400 clamp(18px, 2vw, 58px)/1.1 'Bangers', sans-serif; letter-spacing: .25em; color: #fff; background: #1E6BE6; border: 3px solid #111; transform: rotate(2deg); }

/* Tiki beach: a tropical sunset, bamboo frames and a surf-shop script. */
body.awt-th-tiki {
  --fx-page: #10333F;
  --fx-art: radial-gradient(circle at 78% 72%, #FFD27A 0 6vw, rgba(255, 140, 60, .5) 6.2vw, transparent 16vw), linear-gradient(180deg, #1E5A6E 0%, #F07A4A 62%, #FFB86B 70%, #0F4F5C 70.5%, #0A3640 100%);
  --fx-frame: #C99A4E; --fx-frame-w: 10px; --fx-radius: 18px;
  --fx-glow: 0 0 0 3px #7A5524, inset 0 0 0 2px rgba(255, 230, 170, .3), 0 14px 40px rgba(0, 0, 0, .45);
  --fx-panel: linear-gradient(180deg, rgba(8, 48, 58, .86), rgba(6, 34, 42, .92)); --fx-side: rgba(6, 34, 42, .92); --fx-inner: rgba(255, 255, 255, .06);
  --fx-head: 'Righteous', sans-serif; --fx-body: 'Fredoka', 'Inter', sans-serif;
  --fx-accent: #FFC86B; --fx-accent-glow: 0 2px 0 rgba(0, 0, 0, .4); --fx-score: #7CF2D4; --fx-lead: #FF7A59; --fx-prize: #FF7A59;
  --fx-right-bg: rgba(124, 242, 212, .16); --fx-right-line: #7CF2D4; --fx-right-glow: 0 0 22px rgba(124, 242, 212, .6);
  --fx-ticker: linear-gradient(90deg, #0A3640, #10505E);
}
body.awt-th-tiki .awt-stage, body.awt-th-tiki .awt-side { border-style: double; }
body.awt-th-tiki .awt-fx-logo b { font: 400 clamp(32px, 4.2vw, 120px)/1.15 'Pacifico', cursive; color: #FFF4D6; text-shadow: 3px 3px 0 #F07A4A, 6px 6px 0 rgba(0, 0, 0, .35); }
body.awt-th-tiki .awt-fx-logo i { margin: .05em 0 0 30%; font: 400 clamp(16px, 1.9vw, 54px)/1 'Righteous', sans-serif; letter-spacing: .45em; color: #7CF2D4; text-transform: uppercase; }

/* Hacker terminal: green phosphor on black, a blinking cursor. */
body.awt-th-terminal {
  --fx-page: #000;
  --fx-art: repeating-linear-gradient(0deg, rgba(0, 255, 90, .05) 0 1px, transparent 1px 3px), radial-gradient(ellipse 80% 70% at 50% 50%, rgba(0, 255, 90, .08), transparent 75%);
  --fx-frame: #00FF5A; --fx-frame-w: 2px; --fx-radius: 0; --fx-glow: 0 0 10px rgba(0, 255, 90, .6), inset 0 0 30px rgba(0, 255, 90, .12);
  --fx-panel: rgba(0, 12, 4, .92); --fx-side: rgba(0, 12, 4, .92); --fx-inner: rgba(0, 40, 14, .5);
  --fx-head: 'VT323', monospace; --fx-body: 'VT323', monospace;
  --fx-text: #B6FFC9; --fx-text-shadow: 0 0 6px rgba(0, 255, 90, .7); --fx-accent: #00FF5A; --fx-accent-glow: 0 0 8px rgba(0, 255, 90, .8);
  --fx-score: #E6FF5A; --fx-lead: #00FF5A; --fx-prize: #00FF5A;
  --fx-right-bg: #00FF5A; --fx-right-line: #00FF5A; --fx-right-glow: 0 0 18px rgba(0, 255, 90, .8);
  --fx-ticker: #001A08;
}
body.awt-th-terminal .awt-q { font-size: clamp(34px, 4.2vw, 128px); line-height: 1; }
body.awt-th-terminal .awt-opt { font-size: clamp(26px, 2.9vw, 86px); line-height: 1; }
body.awt-th-terminal .awt-opt .ar-ltr::before { content: "["; } body.awt-th-terminal .awt-opt .ar-ltr::after { content: "]"; }
body.awt-th-terminal .awt-opts.reveal .awt-opt.right, body.awt-th-terminal .awt-opts.reveal .awt-opt.right .ar-ltr { color: #001A08; text-shadow: none; }
body.awt-th-terminal .awt-rows li, body.awt-th-terminal .awt-h2 { font-size: 1.25em; }
body.awt-th-terminal .awt-fx-logo b { font: 400 clamp(38px, 5vw, 144px)/.9 'VT323', monospace; text-transform: uppercase; color: #B6FFC9; text-shadow: 0 0 8px #00FF5A, 0 0 20px rgba(0, 255, 90, .6); }
body.awt-th-terminal .awt-fx-logo b::before { content: "> "; color: #00FF5A; }
body.awt-th-terminal .awt-fx-logo i { font: 400 clamp(22px, 2.6vw, 76px)/1 'VT323', monospace; letter-spacing: .3em; text-transform: uppercase; color: #00FF5A; margin-left: 1.1em; }
body.awt-th-terminal .awt-fx-logo i::after { content: "_"; animation: awt-blink 1s steps(2) infinite; }

/* Stadium jumbotron: an LED dot board, arena lights, red and white. */
body.awt-th-stadium {
  --fx-page: #07090E;
  --fx-art: radial-gradient(ellipse 30% 25% at 10% 0%, rgba(255, 255, 255, .25), transparent 70%), radial-gradient(ellipse 30% 25% at 90% 0%, rgba(255, 255, 255, .25), transparent 70%), linear-gradient(180deg, #0D1220, #050608);
  --fx-frame: #2A2F3A; --fx-frame-w: 8px; --fx-radius: 8px; --fx-glow: 0 0 0 2px #59606E, 0 20px 50px rgba(0, 0, 0, .7);
  --fx-panel: radial-gradient(circle, rgba(255, 255, 255, .05) 1px, transparent 1.6px) 0 0 / 7px 7px, #05070B; --fx-side: radial-gradient(circle, rgba(255, 255, 255, .05) 1px, transparent 1.6px) 0 0 / 7px 7px, #05070B; --fx-inner: rgba(255, 255, 255, .04);
  --fx-head: 'Black Ops One', 'Anton', sans-serif; --fx-body: 'Oswald', sans-serif;
  --fx-accent: #FF3B3B; --fx-accent-glow: 0 0 10px rgba(255, 59, 59, .6); --fx-score: #FFB627; --fx-lead: #FF3B3B; --fx-prize: #FFB627;
  --fx-right-bg: #E8E8E8; --fx-right-line: #fff; --fx-right-glow: 0 0 24px rgba(255, 255, 255, .5);
  --fx-ticker: linear-gradient(90deg, #8E0E0E, #C41616);
}
body.awt-th-stadium .awt-opt { background: #12161F; border-color: #2A2F3A; text-transform: uppercase; }
body.awt-th-stadium .awt-opts.reveal .awt-opt.right, body.awt-th-stadium .awt-opts.reveal .awt-opt.right .ar-ltr { color: #C41616; text-shadow: none; }
body.awt-th-stadium .awt-rows .sc { font-family: 'Black Ops One', sans-serif; text-shadow: 0 0 8px rgba(255, 182, 39, .6); }
body.awt-th-stadium .awt-fx-logo b { font: 400 clamp(28px, 3.6vw, 104px)/1 'Black Ops One', sans-serif; text-transform: uppercase; color: #fff; text-shadow: 3px 3px 0 #C41616, 0 0 20px rgba(255, 255, 255, .3); }
body.awt-th-stadium .awt-fx-logo i { display: inline-block; margin-top: .25em; padding: .1em .6em; font: 400 clamp(14px, 1.6vw, 46px)/1.2 'Black Ops One', sans-serif; letter-spacing: .4em; color: #fff; background: #C41616; transform: skewX(-12deg); }

/* Frost: frozen glass panels, icy blues and snow white. */
body.awt-th-frost {
  --fx-page: #0B2A44;
  --fx-art: radial-gradient(ellipse 60% 45% at 20% 0%, rgba(200, 240, 255, .4), transparent 70%), radial-gradient(ellipse 50% 40% at 90% 100%, rgba(140, 200, 255, .3), transparent 70%), linear-gradient(160deg, #3D86B8, #0B2A44 70%);
  --fx-frame: rgba(230, 248, 255, .85); --fx-frame-w: 2px; --fx-radius: 26px; --fx-glow: 0 0 0 1px rgba(255, 255, 255, .3), 0 20px 50px rgba(0, 20, 50, .45), inset 0 1px 0 rgba(255, 255, 255, .6);
  --fx-panel: linear-gradient(160deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06)); --fx-side: linear-gradient(160deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .06)); --fx-inner: rgba(255, 255, 255, .1);
  --fx-head: 'Righteous', sans-serif; --fx-body: 'Space Grotesk', 'Inter', sans-serif;
  --fx-text: #fff; --fx-text-shadow: 0 2px 10px rgba(0, 40, 80, .5); --fx-accent: #BDEBFF; --fx-accent-glow: 0 0 12px rgba(189, 235, 255, .7);
  --fx-score: #FFFFFF; --fx-lead: #BDEBFF; --fx-prize: #BDEBFF;
  --fx-right-bg: rgba(255, 255, 255, .85); --fx-right-line: #fff; --fx-right-glow: 0 0 30px rgba(189, 235, 255, .9);
  --fx-ticker: linear-gradient(90deg, rgba(11, 42, 68, .95), rgba(30, 90, 140, .95));
}
body.awt-th-frost .awt-stage, body.awt-th-frost .awt-side { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
body.awt-th-frost .awt-opts.reveal .awt-opt.right, body.awt-th-frost .awt-opts.reveal .awt-opt.right .ar-ltr { color: #0B2A44; text-shadow: none; }
body.awt-th-frost .awt-fx-logo b { font: 400 clamp(30px, 3.9vw, 112px)/1 'Righteous', sans-serif; text-transform: uppercase; background: linear-gradient(180deg, #FFFFFF, #D6F2FF 50%, #8CCBF0); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 6px rgba(0, 40, 80, .5)); }
body.awt-th-frost .awt-fx-logo i { margin-top: .2em; font: 400 clamp(15px, 1.7vw, 50px)/1 'Righteous', sans-serif; letter-spacing: .6em; color: #fff; text-transform: uppercase; opacity: .9; }

/* Spooky: a haunted night, slime green and pumpkin orange, dripping letters. */
body.awt-th-spooky {
  --fx-page: #0A0612;
  --fx-art: radial-gradient(circle at 85% 14%, #F4EFCF 0 3.5vw, rgba(244, 239, 207, .25) 3.7vw, transparent 9vw), radial-gradient(ellipse 70% 40% at 50% 110%, rgba(255, 120, 20, .25), transparent 70%), linear-gradient(180deg, #1B0B2E, #0A0612);
  --fx-frame: #FF7A1A; --fx-frame-w: 3px; --fx-radius: 14px; --fx-glow: 0 0 14px rgba(255, 122, 26, .7), 0 0 44px rgba(255, 122, 26, .25), inset 0 0 40px rgba(120, 40, 160, .3);
  --fx-panel: linear-gradient(180deg, rgba(30, 10, 46, .88), rgba(10, 6, 18, .92)); --fx-side: rgba(14, 6, 24, .92); --fx-inner: rgba(60, 20, 90, .4);
  --fx-head: 'Creepster', cursive; --fx-body: 'Oswald', sans-serif;
  --fx-accent: #9CFF4F; --fx-accent-glow: 0 0 12px rgba(156, 255, 79, .7); --fx-score: #FF9A3C; --fx-lead: #9CFF4F; --fx-prize: #B46CFF;
  --fx-right-bg: rgba(156, 255, 79, .14); --fx-right-line: #9CFF4F; --fx-right-glow: 0 0 22px rgba(156, 255, 79, .7);
  --fx-ticker: linear-gradient(90deg, #1B0B2E, #2E0F45);
}
body.awt-th-spooky .awt-h1, body.awt-th-spooky .awt-h2, body.awt-th-spooky .awt-qhead .awt-mode { letter-spacing: .06em; font-weight: 400; }
body.awt-th-spooky .awt-fx-logo b { font: 400 clamp(36px, 4.6vw, 132px)/1 'Creepster', cursive; letter-spacing: .04em; color: #FF7A1A; text-shadow: 0 0 10px rgba(255, 122, 26, .7), 3px 3px 0 #3A0A00; }
body.awt-th-spooky .awt-fx-logo i { margin: .05em 0 0 20%; font: 400 clamp(20px, 2.4vw, 70px)/1 'Creepster', cursive; letter-spacing: .3em; color: #9CFF4F; text-shadow: 0 0 12px rgba(156, 255, 79, .8); }

/* Art deco: black lacquer, gold fan lines, Gatsby glamour. */
body.awt-th-deco {
  --fx-page: #0B0B0B;
  --fx-art: repeating-conic-gradient(from 0deg at 50% 120%, rgba(212, 175, 55, .09) 0 2deg, transparent 2deg 9deg), linear-gradient(180deg, #141414, #070707);
  --fx-frame: #D4AF37; --fx-frame-w: 2px; --fx-radius: 0; --fx-glow: 0 0 0 6px #0B0B0B, 0 0 0 7px #D4AF37, 0 20px 50px rgba(0, 0, 0, .7);
  --fx-panel: linear-gradient(180deg, #121212, #0A0A0A); --fx-side: linear-gradient(180deg, #121212, #0A0A0A); --fx-inner: rgba(212, 175, 55, .05);
  --fx-head: 'DM Serif Display', 'Playfair Display', serif; --fx-body: 'DM Serif Display', Georgia, serif;
  --fx-text: #F3E7C3; --fx-text-shadow: none; --fx-accent: #D4AF37; --fx-accent-glow: none; --fx-score: #D4AF37; --fx-lead: #D4AF37; --fx-prize: #D4AF37;
  --fx-right-bg: linear-gradient(180deg, #F3D77A, #B48A22); --fx-right-line: #F3E7C3; --fx-right-glow: 0 0 24px rgba(212, 175, 55, .45);
  --fx-ticker: #0B0B0B;
}
body.awt-th-deco .awt-q, body.awt-th-deco .awt-opt { font-weight: 400; letter-spacing: .01em; }
body.awt-th-deco .awt-opt { border: 1px solid rgba(212, 175, 55, .45); border-radius: 0; }
body.awt-th-deco .awt-opts.reveal .awt-opt.right, body.awt-th-deco .awt-opts.reveal .awt-opt.right .ar-ltr { color: #0B0B0B; }
body.awt-th-deco .awt-fx-logo { text-align: center; }
body.awt-th-deco .awt-fx-logo b { font: 400 clamp(30px, 3.9vw, 112px)/1 'DM Serif Display', serif; text-transform: uppercase; letter-spacing: .14em; background: linear-gradient(180deg, #FBEBB0, #D4AF37 50%, #8A6A12); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.awt-th-deco .awt-fx-logo i { margin-top: .3em; font: 400 clamp(14px, 1.5vw, 44px)/1 'DM Serif Display', serif; letter-spacing: .8em; color: #D4AF37; text-transform: uppercase; }
body.awt-th-deco .awt-fx-logo i::before, body.awt-th-deco .awt-fx-logo i::after { content: ""; display: inline-block; width: 2.4em; height: 1px; margin: 0 .8em; vertical-align: middle; background: #D4AF37; }

/* Previews in Settings. */
.awo-look-pic.synth { background: linear-gradient(180deg, #12002A, #8E1E7A 58%, #12002A 58.5%); }
.awo-look-pic.synth i, .awo-look-pic.synth b { border: 2px solid #FF3CC8; box-shadow: 0 0 8px #FF3CC8; }
.awo-look-pic.synth::after { content: "BATTLE"; font: 400 12px 'Monoton', sans-serif; color: #FFE3FA; text-shadow: 0 0 6px #FF3CC8; }
.awo-look-pic.space { background: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 60%, #fff, transparent), radial-gradient(1px 1px at 40% 80%, #fff, transparent), #01020A; }
.awo-look-pic.space i, .awo-look-pic.space b { border: 2px solid #7B6CFF; border-radius: 2px; box-shadow: 0 0 8px #7B6CFF; }
.awo-look-pic.space::after { content: "BATTLE ARENA"; font: 900 9px 'Orbitron', sans-serif; color: #EAF6FF; text-shadow: 0 0 6px #6EF0FF; }
.awo-look-pic.western { background: linear-gradient(180deg, #5A3416, #2A1708); }
.awo-look-pic.western i, .awo-look-pic.western b { border: 4px solid #3B220D; background: #E9D09A; border-radius: 2px; }
.awo-look-pic.western::after { content: "Battle Arena"; font: 400 11px 'Rye', serif; color: #3A1F0A; }
.awo-look-pic.comic { background: radial-gradient(circle, rgba(230, 50, 30, .35) 1.5px, transparent 2px) 0 0 / 8px 8px, #FFD23C; }
.awo-look-pic.comic i, .awo-look-pic.comic b { border: 3px solid #111; background: #fff; border-radius: 3px; box-shadow: 3px 3px 0 #111; }
.awo-look-pic.comic::after { content: "BATTLE ARENA!"; font: 400 14px 'Bangers', sans-serif; color: #FFD23C; -webkit-text-stroke: 1px #111; paint-order: stroke fill; }
.awo-look-pic.tiki { background: linear-gradient(180deg, #1E5A6E, #F07A4A 62%, #0F4F5C 63%); }
.awo-look-pic.tiki i, .awo-look-pic.tiki b { border: 3px double #C99A4E; background: rgba(8, 48, 58, .86); }
.awo-look-pic.tiki::after { content: "Battle Arena"; font: 400 12px 'Pacifico', cursive; color: #FFF4D6; }
.awo-look-pic.terminal { background: #000; }
.awo-look-pic.terminal i, .awo-look-pic.terminal b { border: 1px solid #00FF5A; border-radius: 0; box-shadow: 0 0 6px #00FF5A; }
.awo-look-pic.terminal::after { content: "> BATTLE_"; font: 400 15px 'VT323', monospace; color: #B6FFC9; text-shadow: 0 0 6px #00FF5A; }
.awo-look-pic.stadium { background: linear-gradient(180deg, #0D1220, #050608); }
.awo-look-pic.stadium i, .awo-look-pic.stadium b { border: 3px solid #2A2F3A; background: radial-gradient(circle, rgba(255, 255, 255, .12) 1px, transparent 1.4px) 0 0 / 4px 4px, #05070B; }
.awo-look-pic.stadium::after { content: "BATTLE ARENA"; font: 400 11px 'Black Ops One', sans-serif; color: #fff; text-shadow: 1px 1px 0 #C41616; }
.awo-look-pic.frost { background: linear-gradient(160deg, #3D86B8, #0B2A44 70%); }
.awo-look-pic.frost i, .awo-look-pic.frost b { border: 1px solid rgba(230, 248, 255, .85); background: rgba(255, 255, 255, .18); border-radius: 8px; }
.awo-look-pic.frost::after { content: "BATTLE ARENA"; font: 400 11px 'Righteous', sans-serif; color: #fff; }
.awo-look-pic.spooky { background: radial-gradient(circle at 85% 18%, #F4EFCF 0 8px, transparent 9px), linear-gradient(180deg, #1B0B2E, #0A0612); }
.awo-look-pic.spooky i, .awo-look-pic.spooky b { border: 2px solid #FF7A1A; box-shadow: 0 0 6px #FF7A1A; }
.awo-look-pic.spooky::after { content: "Battle Arena"; font: 400 14px 'Creepster', cursive; color: #FF7A1A; }
.awo-look-pic.deco { background: repeating-conic-gradient(from 0deg at 50% 120%, rgba(212, 175, 55, .15) 0 2deg, transparent 2deg 9deg), #0B0B0B; }
.awo-look-pic.deco i, .awo-look-pic.deco b { border: 1px solid #D4AF37; border-radius: 0; outline: 1px solid #D4AF37; outline-offset: 2px; background: #121212; }
.awo-look-pic.deco::after { content: "BATTLE ARENA"; font: 400 10px 'DM Serif Display', serif; letter-spacing: .12em; color: #D4AF37; }
/* Light looks (saloon, comic book): dark text where the dark looks use light text. */
body.awt-th-western .awt-prize b, body.awt-th-comic .awt-prize b { color: var(--fx-text); }
body.awt-th-western .awt-fine, body.awt-th-comic .awt-fine, body.awt-th-western .awt-prize-w, body.awt-th-comic .awt-prize-w { color: #5A4A3A; }
body.awt-th-comic .awt-prize-k { color: #1E6BE6; }
body.awt-th-comic .awt-count, body.awt-th-western .awt-count { color: var(--fx-text); text-shadow: none; }
body.awt-th-comic .awt-next-j, body.awt-th-western .awt-next-j { color: var(--fx-accent); }
body.awt-th-comic .awt-here, body.awt-th-western .awt-here { color: var(--fx-accent); }
body.awt-th-comic .ar-cd-n, body.awt-th-western .ar-cd-n { color: var(--fx-text); }
body.awt-th-western .awt-h1, body.awt-th-comic .awt-h1, body.awt-th-western .awt-big, body.awt-th-comic .awt-big, body.awt-th-western .awt-how, body.awt-th-comic .awt-how { color: var(--fx-text); text-shadow: none; }
body.awt-th-western .awt-champ, body.awt-th-comic .awt-champ { background: var(--fx-inner); } body.awt-th-western .awt-champ-n, body.awt-th-comic .awt-champ-n, body.awt-th-western .awt-theme-n, body.awt-th-comic .awt-theme-n { color: var(--fx-text); }

/* 2.4.0: the public demo's corner controls. */
.awt-demo .awt-ctl { opacity: .75; align-items: center; }
.awt-demo-tag { padding: 6px 12px; border-radius: 999px; background: #FF3D7F; color: #fff; font: 900 12px var(--font-b); letter-spacing: .14em; text-transform: uppercase; }
.awt-b-wide { width: auto; padding: 0 14px; font: 800 13px var(--font-b); text-decoration: none; white-space: nowrap; }
.awt-winner { display: block; line-height: 1.35; }

/* 2.4.3: leaderboard rows fit their column. Names shrink with the column (and wrap to a second line
   before they're cut off), and sit further left: a narrower rank column and tighter gaps. */
.awt-rows { container-type: inline-size; }
.awt-rows li { grid-template-columns: auto minmax(0, 1fr) auto; gap: .45em; padding: .5em .65em .5em .35em; }
.awt-rows .rk { min-width: 1.3em; text-align: center; }
.awt-rows .nm { gap: .35em; }
.awt-rows .awt-av { width: 1.55em; height: 1.55em; }
.awt-rows .tx b { font-size: clamp(.68em, 5.2cqi, 1em); line-height: 1.12; white-space: normal; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.awt-rows .tx small { font-size: clamp(.6em, 4cqi, .72em); }
.awt-rows .sc { font-size: clamp(.85em, 5.6cqi, 1.1em); }
body.awt-fx .awt-rows li { padding: .45em .2em .45em 0; }
body.awt-fx .awt-rows .sc { font-size: clamp(.95em, 6cqi, 1.25em); }

/* 2.4.5: the question banner on top of the TV. Now playing, a big question counter with a dot per
   question, and the category, in a glass bar with a gradient edge and a slow shine. */
.awt-pips { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(3px, .35vw, 10px); }
.awt-pips i { width: clamp(10px, 1.3vw, 38px); height: clamp(5px, .6vh, 14px); border-radius: 99px; background: rgba(255, 255, 255, .16); }
.awt-pips i.d { background: linear-gradient(90deg, #29D3FF, #B78CFF); }
.awt-pips i.c { background: var(--gold); box-shadow: 0 0 14px rgba(255, 201, 60, .8); animation: awt-pip 1.4s ease-in-out infinite; }
@keyframes awt-pip { 50% { transform: scaleX(1.25); box-shadow: 0 0 24px rgba(255, 201, 60, 1); } }
body:not(.awt-fx) .awt-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) auto minmax(0, 1fr); align-items: center; gap: 2.4vw; margin-bottom: auto;
  padding: 2vh 2.2vw; border-radius: 26px; border: 2px solid transparent; overflow: hidden;
  background: linear-gradient(120deg, rgba(20, 14, 52, .92), rgba(36, 22, 84, .88) 55%, rgba(48, 16, 64, .9)) padding-box, linear-gradient(90deg, #29D3FF, #B78CFF, #FF4FA3) border-box;
  box-shadow: 0 14px 50px rgba(0, 0, 0, .45), 0 0 40px rgba(124, 92, 255, .25); }
body:not(.awt-fx) .awt-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .09) 50%, transparent 60%); background-size: 250% 100%; animation: awt-shine 7s linear infinite; }
@keyframes awt-shine { from { background-position: 150% 0; } to { background-position: -100% 0; } }
body:not(.awt-fx) .awt-qfoot { margin-bottom: auto; }
body:not(.awt-fx) .awt-hero .awt-hk { display: block; margin-bottom: .5em; font: 800 clamp(10px, .75vw, 22px) var(--font-d); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
body:not(.awt-fx) .awt-hero .awt-mode { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 0; border: 0; border-radius: 0; letter-spacing: .01em;
  font: 900 clamp(22px, 2.5vw, 76px)/1.05 var(--font-d); background: linear-gradient(90deg, #29D3FF, #B78CFF, #FF4FA3); -webkit-background-clip: text; background-clip: text; color: transparent; }
body:not(.awt-fx) .hz-num { display: grid; justify-items: center; gap: 1vh; }
body:not(.awt-fx) .awt-hero .awt-qn { display: grid; grid-template-columns: auto auto; align-items: baseline; justify-content: center; column-gap: .12em; color: #fff; letter-spacing: 0; }
body:not(.awt-fx) .awt-qn .awt-hk { grid-column: 1 / -1; text-align: center; margin-bottom: .2em; }
body:not(.awt-fx) .awt-qn b { font: 900 clamp(44px, 5vw, 150px)/.9 var(--font-d); text-shadow: 0 0 40px rgba(124, 92, 255, .8); font-variant-numeric: tabular-nums; }
body:not(.awt-fx) .awt-qn i { font: 900 clamp(18px, 1.9vw, 56px)/1 var(--font-d); font-style: normal; color: var(--muted); }
body:not(.awt-fx) .hz-cat { text-align: right; }
body:not(.awt-fx) .awt-hero .awt-cat { display: inline-flex; align-items: center; gap: .55em; margin: 0; font: 900 clamp(20px, 2.1vw, 64px)/1.1 var(--font-d); letter-spacing: .03em; color: var(--gold); text-shadow: 0 0 26px rgba(255, 201, 60, .55); }
body:not(.awt-fx) .awt-hero .awt-cat::before { content: ''; flex: none; width: .45em; height: .45em; background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 16px var(--gold); animation: awt-gem 3s linear infinite; }
@keyframes awt-gem { to { transform: rotate(405deg); } }
.awt-hero.enter .awt-hz { animation: awt-hz-in .6s cubic-bezier(.2, .9, .3, 1.3) both; }
.awt-hero.enter .hz-num { animation-delay: .12s; }
.awt-hero.enter .hz-cat { animation-delay: .24s; }
.awt-hero.enter .awt-qn b { display: inline-block; animation: ar-cd-pop .8s .2s both; }
@keyframes awt-hz-in { from { opacity: 0; transform: translateY(-40%); } to { opacity: 1; transform: none; } }
/* Framed looks keep their own corner heading; the dots sit under the question count, in the look's colours. */
body.awt-fx .awt-hz { display: contents; }
body.awt-fx .awt-hero > .awt-hz > .awt-hk { display: none; }
body.awt-fx .awt-qn .awt-hk { font: inherit; letter-spacing: inherit; margin-right: .35em; }
body.awt-fx .awt-qn b, body.awt-fx .awt-qn i { font: inherit; font-style: normal; }
body.awt-fx .awt-pips { justify-content: flex-end; margin: .4vh 0 .6vh; }
body.awt-fx .awt-pips i { background: color-mix(in srgb, var(--fx-text) 22%, transparent); }
body.awt-fx .awt-pips i.d { background: var(--fx-accent); }
body.awt-fx .awt-pips i.c { background: var(--fx-text); box-shadow: var(--fx-accent-glow); }
@media (max-width: 900px) {
  body:not(.awt-fx) .awt-hero { grid-template-columns: 1fr 1fr; }
  body:not(.awt-fx) .hz-num { grid-column: 1 / -1; order: -1; }
}
@media (prefers-reduced-motion: reduce) { .awt-hero::before, .awt-hero .awt-hz, .awt-hero .awt-qn b, .awt-pips i.c, .awt-hero .awt-cat::before { animation: none !important; } }

/* 2.4.5: the world leaderboard page (org-boards.php). */
.wb-page { min-height: 100vh; overflow-x: hidden; }
.wb { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 18px 16px 40px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.wb-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wb-cta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wb-btn { display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 999px; font: 900 14px var(--font-d); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; color: #1A0B00;
  background: linear-gradient(135deg, #FFE27A, #FFC93C 50%, #FF9F1C); box-shadow: 0 6px 24px rgba(255, 170, 40, .35); }
.wb-btn.ghost { color: var(--text); background: rgba(255, 255, 255, .06); border: 1px solid var(--line); box-shadow: none; }
.wb-hero { display: grid; gap: 10px; justify-items: start; padding: 10px 0 0; }
.wb-h1 { margin: 0; font: 900 clamp(34px, 6vw, 76px)/1 var(--font-d); text-transform: uppercase; letter-spacing: .01em;
  background: linear-gradient(90deg, #29D3FF, #B78CFF, #FF4FA3); -webkit-background-clip: text; background-clip: text; color: transparent; overflow-wrap: anywhere; }
.wb-lead { margin: 0; max-width: 46em; color: var(--muted); font-size: clamp(15px, 1.4vw, 18px); line-height: 1.5; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wb-lead a, .wb-empty a { color: var(--me); }
.wb-live { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 16px; border-radius: 999px; background: rgba(46, 229, 157, .08); border: 1px solid rgba(46, 229, 157, .35); font-weight: 700; }
.wb-live > i { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 12px var(--ok); animation: awt-blink 1.4s ease-in-out infinite; }
.wb-live b { font: 900 13px var(--font-d); letter-spacing: .14em; text-transform: uppercase; color: var(--ok); }
.wb-live em { font-style: normal; color: var(--muted); }
.wb-live.off { background: rgba(255, 255, 255, .05); border-color: var(--line); }
.wb-live.off > i { background: var(--muted); box-shadow: none; animation: none; }
.wb-cd { font-variant-numeric: tabular-nums; color: var(--gold); font-weight: 900; }
.wb-per { display: flex; gap: 4px; width: max-content; max-width: 100%; overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 4px; }
.wb-per a { padding: 9px 16px; border-radius: 10px; color: var(--muted); text-decoration: none; white-space: nowrap; font: 800 14px var(--font-d); letter-spacing: .06em; text-transform: uppercase; }
.wb-per a.is-on { background: var(--text); color: var(--bg); }
.wb-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.wb-tile { position: relative; display: grid; gap: 4px; padding: 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); overflow: hidden; animation: ar-rise .5s ease both; }
.wb-tile:nth-child(2) { animation-delay: .05s; } .wb-tile:nth-child(3) { animation-delay: .1s; } .wb-tile:nth-child(4) { animation-delay: .15s; } .wb-tile:nth-child(5) { animation-delay: .2s; } .wb-tile:nth-child(6) { animation-delay: .25s; }
.wb-tile svg { width: 22px; height: 22px; color: var(--me); }
.wb-tile:nth-child(2) svg { color: #B78CFF; } .wb-tile:nth-child(3) svg { color: var(--opp); } .wb-tile:nth-child(4) svg { color: var(--ok); } .wb-tile:nth-child(5) svg { color: var(--gold); } .wb-tile:nth-child(6) svg { color: #FF9F1C; }
.wb-tile b { font: 900 clamp(24px, 2.6vw, 34px)/1.05 var(--font-d); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wb-tile span { color: var(--muted); font-size: 13px; font-weight: 700; }
.wb-tile.big { background: linear-gradient(135deg, rgba(255, 201, 60, .18), rgba(255, 79, 163, .12)); border-color: rgba(255, 201, 60, .45); }
.wb-tile.big b { color: var(--gold); }
.wb-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.wb-champ { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; color: var(--text); text-decoration: none;
  background: linear-gradient(135deg, rgba(41, 211, 255, .14), rgba(124, 92, 255, .14)); border: 1px solid rgba(41, 211, 255, .4); }
.wb-champ.gold { background: linear-gradient(135deg, rgba(255, 201, 60, .2), rgba(255, 138, 28, .1)); border-color: rgba(255, 201, 60, .5); }
.wb-champ.pink { background: linear-gradient(135deg, rgba(255, 79, 163, .18), rgba(124, 92, 255, .12)); border-color: rgba(255, 79, 163, .45); }
.wb-champ > svg { flex: none; width: 40px; height: 40px; color: var(--me); }
.wb-champ.gold > svg { color: var(--gold); } .wb-champ.pink > svg { color: var(--opp); }
.wb-champ div { display: grid; gap: 2px; min-width: 0; }
.wb-champ span { font: 900 12px var(--font-d); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.wb-champ b { display: flex; align-items: center; gap: 8px; font: 900 20px/1.15 var(--font-d); overflow-wrap: anywhere; }
.wb-champ small { color: var(--muted); font-weight: 700; }
.wb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.wb-card { padding: 18px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); backdrop-filter: blur(8px); min-width: 0; }
.wb-card h2 { margin: 0 0 12px; font: 900 18px var(--font-d); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.wb-none { margin: 0; color: var(--muted); }
.wb-rows, .wb-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wb-rows li > a, .wb-rows li:not(:has(> a)), .wb-bars li { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); color: var(--text); text-decoration: none; }
.wb-rows li > a:hover { background: rgba(255, 255, 255, .09); }
.wb-rows .pl, .wb-bars .pl { flex: none; min-width: 1.6em; font: 900 16px var(--font-d); color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.wb-rows li.m1 > a, .wb-rows li.m1:not(:has(> a)) { background: linear-gradient(90deg, rgba(255, 201, 60, .22), rgba(255, 201, 60, .04)); }
.wb-rows li.m2 > a, .wb-rows li.m2:not(:has(> a)) { background: linear-gradient(90deg, rgba(200, 210, 230, .18), rgba(200, 210, 230, .03)); }
.wb-rows li.m3 > a, .wb-rows li.m3:not(:has(> a)) { background: linear-gradient(90deg, rgba(222, 140, 80, .2), rgba(222, 140, 80, .03)); }
.wb-rows li.m1 .pl { color: var(--gold); } .wb-rows li.m2 .pl { color: #D5DCEB; } .wb-rows li.m3 .pl { color: #E39A62; }
.wb-rows .nm { flex: 1; min-width: 0; display: grid; font-weight: 800; font-size: 16px; overflow-wrap: anywhere; }
.wb-rows .nm small { font-weight: 600; font-size: 12.5px; color: var(--muted); }
.wb-rows .sc, .wb-bars .sc { flex: none; margin-left: auto; font: 900 18px var(--font-d); color: var(--gold); font-variant-numeric: tabular-nums; }
.wb-rows .sc.star { display: inline-flex; align-items: center; gap: 6px; }
.wb-rows .sc.star svg { width: 18px; height: 18px; }
.wb-recent .pl { min-width: 2.4em; }
.wb-av, .wb-logo { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: rgba(255, 255, 255, .1); }
.wb-logo { border-radius: 9px; background: #fff; }
.wb-av img, .wb-logo img { width: 100%; height: 100%; object-fit: contain; }
.wb-ini { font: 900 15px var(--font-d); color: var(--text); background: linear-gradient(135deg, #7C5CFF, #FF4FA3); }
.wb-logo.wb-ini { background: linear-gradient(135deg, #29D3FF, #7C5CFF); }
.wb .ar-flag { flex: none; width: 24px; height: 18px; margin: 0; border-radius: 3px; object-fit: cover; vertical-align: middle; }
.wb-bars .bar { flex: 1; min-width: 0; position: relative; height: 26px; border-radius: 8px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.wb-bars .bar i { position: absolute; inset: 0 auto 0 0; border-radius: 8px; background: linear-gradient(90deg, #29D3FF, #7C5CFF, #FF4FA3); animation: wb-grow .9s cubic-bezier(.2, .8, .2, 1) both; transform-origin: left; }
.wb-bars .bar em { position: relative; z-index: 1; display: block; padding: 0 10px; line-height: 26px; font-style: normal; font-size: 12.5px; font-weight: 800; white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
@keyframes wb-grow { from { transform: scaleX(0); } }
.wb-join { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: linear-gradient(135deg, rgba(124, 92, 255, .22), rgba(255, 79, 163, .14)); border-color: rgba(183, 140, 255, .45); }
.wb-join h2 { color: var(--text); letter-spacing: .04em; }
.wb-join p { margin: 0; color: var(--muted); max-width: 44em; }
.wb-empty h2 { color: var(--text); }
.wb-foot { margin: 0; text-align: center; color: var(--muted); font-size: 13px; }
@media (max-width: 1000px) { .wb-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .wb-grid { grid-template-columns: 1fr; } .wb-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wb-top .wb-cta .wb-btn { padding: 8px 12px; font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .wb-tile, .wb-bars .bar i, .wb-live > i { animation: none; } }

/* 2.5.0: private rounds show the explanation with the answer, on the TV and on phones. */
.awt-why { display: flex; align-items: baseline; gap: .8em; padding: 1.4vh 1.6vw; border-radius: 18px; animation: awt-opt-in .5s .3s both;
  background: rgba(255, 201, 60, .1); border: 2px solid rgba(255, 201, 60, .45); font: 700 clamp(16px, 1.55vw, 46px)/1.35 var(--font-b); color: var(--text); }
.awt-why b { flex: none; font: 900 .8em var(--font-d); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
body.awt-fx .awt-why { max-width: 62%; background: color-mix(in srgb, var(--fx-accent) 12%, transparent); border-color: var(--fx-accent); color: var(--fx-text); font-family: var(--fx-body); }
body.awt-fx .awt-why b { color: var(--fx-accent); font-family: var(--fx-head); }
.awp-why { margin: 10px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(255, 201, 60, .1); border: 1px solid rgba(255, 201, 60, .45); }
.awp-why b { font: 900 12px var(--font-d); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.awp-why p { margin: 4px 0 0; font-weight: 600; line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { .awt-why { animation: none; } }

/* 2.5.0: organization settings with a sidebar, one section at a time. */
.awo-shell { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 0 20px 40px; display: grid; grid-template-columns: 250px minmax(0, 1fr); grid-template-areas: "top top" "side main"; column-gap: 28px; min-height: 100vh; align-items: start; }
.awo-topbar { grid-area: top; }
.awo-org { font: 800 15px var(--font-d); color: var(--muted); letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30ch; }
.awo-topbar .ar-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.awo-tvbtn { min-height: 40px; padding: 8px 14px; font-size: 14px; }
.awo-side { grid-area: side; position: sticky; top: 14px; display: grid; gap: 14px; padding: 14px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); max-height: calc(100vh - 28px); overflow-y: auto; }
.awo-side-g { display: grid; gap: 2px; }
.awo-side-k { padding: 0 10px 4px; font: 900 11px var(--font-d); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.awo-side-a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--muted); text-decoration: none; font-weight: 700; font-size: 14.5px; }
.awo-side-a svg { flex: none; width: 19px; height: 19px; }
.awo-side-a span { flex: 1; min-width: 0; }
.awo-side-a:hover { background: rgba(255, 255, 255, .06); color: var(--text); }
.awo-side-a.is-on { background: linear-gradient(90deg, rgba(124, 92, 255, .35), rgba(124, 92, 255, .08)); color: var(--text); box-shadow: inset 3px 0 0 #B78CFF; }
.awo-pill { flex: none; font: 800 11px var(--font-d); font-style: normal; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; background: rgba(255, 255, 255, .1); color: var(--muted); }
.awo-pill.private { background: rgba(255, 79, 163, .2); color: #FF8CC6; }
.awo-pill.hidden { background: rgba(255, 201, 60, .16); color: var(--gold); }
.awo-pill.world { background: rgba(41, 211, 255, .14); color: var(--me); }
.awo-content { grid-area: main; min-width: 0; padding-top: 2px; }
.awo-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.awo-sec-head .ar-h2 { display: flex; align-items: center; gap: 10px; margin: 0; }
.awo-sec-head .ar-h2 svg { width: 24px; height: 24px; color: #B78CFF; }
.awo-help { font-size: 13px; font-weight: 800; color: var(--me); text-decoration: none; padding: 5px 11px; border-radius: 99px; border: 1px solid rgba(41, 211, 255, .4); }
.awo-help:hover { background: rgba(41, 211, 255, .1); }
.awo-note { margin: 0; padding: 12px 16px; border-radius: 14px; background: rgba(255, 201, 60, .1); border: 1px solid rgba(255, 201, 60, .4); font-weight: 600; }
.awo-errs { margin: 0; padding: 12px 16px 12px 34px; border-radius: 14px; background: rgba(255, 84, 104, .08); border: 1px solid rgba(255, 84, 104, .4); color: #FFB3BD; font-size: 14px; display: grid; gap: 4px; max-height: 320px; overflow: auto; }
.awo-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.awo-tile { display: grid; gap: 4px; padding: 14px 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); color: var(--text); text-decoration: none; }
.awo-tile:hover { border-color: rgba(183, 140, 255, .6); }
.awo-tile svg { width: 22px; height: 22px; color: #B78CFF; }
.awo-tile span { color: var(--muted); font-size: 13px; font-weight: 700; }
.awo-tile b { font: 800 17px var(--font-d); }
.awo-count { font: 800 14px var(--font-d); color: var(--muted); margin-left: 6px; }
.awo-todo { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.awo-todo a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); color: var(--text); text-decoration: none; font-weight: 700; }
.awo-todo a:hover { background: rgba(255, 255, 255, .08); }
.awo-todo i { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); }
.awo-todo li.ok i { border-color: var(--ok); background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5 10 17.5 19 7' fill='none' stroke='%2304301E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat; }
.awo-todo li.ok span { color: var(--muted); text-decoration: line-through; }
.awo-modes { display: grid; gap: 10px; }
.awo-mode { display: flex !important; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; border: 2px solid var(--line); background: rgba(0, 0, 0, .2); cursor: pointer; }
.awo-mode input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.awo-mode span { display: grid; gap: 4px; }
.awo-mode b { font: 800 16px var(--font-d); }
.awo-mode small { color: var(--muted); font-weight: 600; font-size: 13.5px; line-height: 1.45; }
.awo-mode:has(input:checked) { border-color: #B78CFF; background: rgba(124, 92, 255, .14); }
.awo-mode.off { opacity: .55; cursor: not-allowed; }
.awo-fs { margin: 0; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); display: grid; gap: 12px; transition: opacity .2s; }
.awo-fs legend { padding: 0 6px; font: 900 12px var(--font-d); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.awo-fs.is-dim { opacity: .5; }
.awo-fs .awo-check span { font-size: 14px; }
.awo-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.awo-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); width: max-content; max-width: 100%; }
.awo-seg label { display: flex !important; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 9px; cursor: pointer; font-weight: 700; font-size: 14px; }
.awo-seg label:has(input:checked) { background: var(--text); color: var(--bg); }
.awo-seg input { width: 16px; height: 16px; }
.awo-lbl { font-weight: 700; font-size: 14px; display: block; margin-bottom: 6px; }
.awo-q-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.awo-q-choice[hidden], .awo-q-tf[hidden] { display: none; }
.awo-right .ar-input { border-color: rgba(46, 229, 157, .55); }
.awo-qform .ar-input { font-size: 16px; padding: 11px 13px; }
.awo-form label small { color: var(--muted); font-weight: 600; }
.awo-mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px !important; }
.awo-back { color: var(--me); font-weight: 800; text-decoration: none; }
.awo-pack-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.awo-pack-top .ar-h2 { margin: 0; }
.awo-on { color: var(--ok); } .awo-offt { color: var(--gold); }
.awo-danger { margin-top: 12px; }
.awo-danger .ar-btn { border-color: rgba(255, 84, 104, .5); color: #FF9AA6; }
.awo-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.awo-filter { max-width: 280px; font-size: 15px; padding: 9px 12px; }
.awo-qlist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.awo-qlist li { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid transparent; }
.awo-qlist li.is-edit { border-color: #B78CFF; }
.awo-qn { flex: none; min-width: 1.8em; font: 900 15px var(--font-d); color: var(--muted); text-align: right; padding-top: 1px; }
.awo-qb { flex: 1; min-width: 0; display: grid; gap: 6px; }
.awo-qb b { font-weight: 800; overflow-wrap: anywhere; }
.awo-qb small { color: var(--muted); font-size: 13px; line-height: 1.4; }
.awo-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.awo-opts span { font-size: 13px; font-weight: 700; padding: 3px 9px; border-radius: 8px; background: rgba(255, 255, 255, .07); color: var(--muted); }
.awo-opts span.ok { background: rgba(46, 229, 157, .16); color: var(--ok); }
.awo-edit { flex: none; min-height: 36px; padding: 6px 12px; font-size: 13px; }
.awo-packs { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.awo-packs li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.awo-packs li.off { opacity: .7; }
.awo-pk { flex: 1; min-width: 0; display: grid; gap: 2px; color: var(--text); text-decoration: none; }
.awo-pk b { font-weight: 800; overflow-wrap: anywhere; }
.awo-pk small { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.awo-switchbtn { appearance: none; border: 0; background: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--muted); font: 800 13px var(--font-b); padding: 4px; }
.awo-switchbtn i { position: relative; width: 44px; height: 24px; border-radius: 99px; background: rgba(255, 255, 255, .16); transition: background .2s; }
.awo-switchbtn i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; }
.awo-switchbtn.is-on { color: var(--ok); }
.awo-switchbtn.is-on i { background: var(--ok); }
.awo-switchbtn.is-on i::after { transform: translateX(20px); }
.awo-gsearch { margin-top: 10px; }
.awo-gtoc { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 14px; }
.awo-gtoc div { display: grid; gap: 3px; align-content: start; }
.awo-gtoc b { font: 900 12px var(--font-d); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 3px; }
.awo-gtoc a { color: var(--me); text-decoration: none; font-weight: 700; font-size: 14px; }
.awo-gtoc a:hover { text-decoration: underline; }
.awo-gtoc[hidden], .awo-ggroup[hidden], .awo-topic[hidden] { display: none; }
.awo-ggroup { display: grid; gap: 8px; }
.awo-gh { margin: 8px 0 0; font: 900 13px var(--font-d); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.awo-topic { padding: 0; scroll-margin-top: 16px; }
.awo-topic summary { list-style: none; cursor: pointer; padding: 15px 18px; font: 800 17px var(--font-d); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.awo-topic summary::-webkit-details-marker { display: none; }
.awo-topic summary::after { content: '+'; flex: none; font-size: 22px; color: var(--muted); transition: transform .2s; }
.awo-topic[open] summary::after { transform: rotate(45deg); }
.awo-tbody { padding: 0 18px 4px; line-height: 1.6; font-size: 15px; }
.awo-tbody p { margin: 0 0 12px; }
.awo-tbody ul, .awo-tbody ol { margin: 0 0 12px; padding-left: 1.4em; display: grid; gap: 6px; }
.awo-tbody b { color: #fff; }
.awo-goto { margin: 4px 18px 18px; display: inline-flex; min-height: 40px; padding: 8px 14px; font-size: 14px; text-decoration: none; }
@media (max-width: 900px) {
  .awo-shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "side" "main"; padding: 0 16px 40px; }
  .awo-org, .awo-tvbtn { display: none; }
  .awo-side { position: sticky; top: 0; z-index: 10; display: flex; gap: 4px; overflow-x: auto; max-height: none; padding: 8px; margin: 0 -16px 14px; border-radius: 0; border-width: 0 0 1px; background: rgba(14, 9, 40, .94); backdrop-filter: blur(10px); scrollbar-width: none; }
  .awo-side-g { display: contents; }
  .awo-side-k { display: none; }
  .awo-side-a { flex: none; padding: 8px 12px; font-size: 13.5px; white-space: nowrap; }
  .awo-side-a.is-on { box-shadow: none; background: rgba(124, 92, 255, .4); }
  .awo-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .awo-grid2, .awo-q-choice { grid-template-columns: 1fr; } }
.awo-tvbtn { text-decoration: none; }
.awo-plans.awo-one { grid-template-columns: minmax(0, 440px); justify-content: center; }
.awo-tbody a { color: var(--me); font-weight: 700; }
.awo-tbody a.awo-dl { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; text-decoration: none; color: #1A0B00; background: linear-gradient(135deg, #FFE27A, #FFC93C 50%, #FF9F1C); }
.awo-tbody a.awo-dl::before { content: ''; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v12m0 0-5-5m5 5 5-5M4 20h16' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v12m0 0-5-5m5 5 5-5M4 20h16' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
/* 2.6.0: posters and table cards with the organization's logo. */
.pp-logo-chip { display: inline-flex; align-items: center; justify-content: center; background: #fff; border-radius: 16px; box-shadow: 0 6px 24px rgba(0, 0, 0, .35); }
.pp-logo-chip img { display: block; object-fit: contain; }
.pp-logo-chip.lg { padding: .16in .3in; margin-bottom: .05in; }
.pp-logo-chip.lg img { max-width: 5.6in; max-height: 1.7in; }
.pp-logo-chip.sm { margin-top: 4px; padding: 4px 10px; border-radius: 8px; box-shadow: none; }
.pp-logo-chip.sm img { max-width: 2.4in; max-height: .42in; }
.pp-poster.has-logo h1 { font-size: 56px; }
.awo-prints { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 10px; }
.awo-print { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.awo-print b { font: 800 16px var(--font-d); }
.awo-print .ar-btn { min-height: 42px; padding: 9px 14px; font-size: 14px; text-decoration: none; }
.awo-btn-off { opacity: .4; cursor: not-allowed; }
.awp-who-l { align-self: center; font-size: 13px; opacity: .85; }
/* 2.6.0: reports. */
.awo-rfilter { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.awo-rfilter label { display: grid; gap: 4px; font-weight: 700; font-size: 13px; color: var(--muted); }
.awo-rfilter .ar-input { font-size: 15px; padding: 9px 12px; min-width: 200px; }
.awo-rtabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
.awo-rtabs a { padding: 8px 14px; border-radius: 10px; color: var(--muted); text-decoration: none; font: 800 14px var(--font-d); letter-spacing: .04em; text-transform: uppercase; background: rgba(255, 255, 255, .05); }
.awo-rtabs a.is-on { background: var(--text); color: var(--bg); }
.awo-rtabs a.awo-csv { margin-left: auto; text-transform: none; letter-spacing: 0; color: var(--me); border: 1px solid rgba(41, 211, 255, .4); background: none; }
.awo-table { overflow-x: auto; }
.awo-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.awo-table th { text-align: left; font: 800 12px var(--font-d); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.awo-table td { padding: 10px; border-bottom: 1px solid rgba(255, 255, 255, .06); vertical-align: top; }
.awo-table td small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.awo-table .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.awo-table a { color: var(--text); text-decoration: none; }
.awo-table a:hover b { text-decoration: underline; }
.awo-pbar { position: relative; display: block; min-width: 130px; height: 24px; border-radius: 7px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.awo-pbar i { position: absolute; inset: 0 auto 0 0; border-radius: 7px; }
.awo-pbar.lo i { background: rgba(255, 84, 104, .55); } .awo-pbar.mid i { background: rgba(255, 201, 60, .5); } .awo-pbar.hi i { background: rgba(46, 229, 157, .5); }
.awo-pbar em { position: relative; display: block; padding: 0 8px; line-height: 24px; font-style: normal; font-weight: 800; font-size: 12.5px; white-space: nowrap; }
.awo-missed { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.awo-missed li { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.awo-missed span { font-size: 14px; color: var(--muted); } .awo-missed .ok { color: var(--ok); font-weight: 700; }
.awo-missed small { color: var(--muted); font-size: 12px; }
.awo-rfilter select.ar-input { padding-right: 40px; }
.awp-when { display: block; font: 900 26px var(--font-d); color: var(--gold); }
.awo-slots { display: grid; gap: 8px; }
.awo-slot { display: grid; grid-template-columns: 1.3fr 1fr 1.1fr; gap: 8px; }
.awo-slot .ar-input { font-size: 15px; padding: 9px 12px; }
.awo-start { border-color: rgba(46, 229, 157, .45); background: linear-gradient(135deg, rgba(46, 229, 157, .1), rgba(41, 211, 255, .06)); }
@media (max-width: 560px) { .awo-slot { grid-template-columns: 1fr 1fr; } .awo-slot select:first-child { grid-column: 1 / -1; } }
.awo-copy .ar-input { text-transform: none; letter-spacing: 0; font-size: 15px; }
/* 2.7.0: share your winner. */
.awo-share-row { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.awo-share canvas { width: 270px; max-width: 100%; aspect-ratio: 4 / 5; border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.awo-share-ctl { display: grid; gap: 10px; align-content: start; }
.awo-share .awo-seg button { appearance: none; border: 0; background: none; color: var(--text); font: 700 14px var(--font-b); padding: 7px 12px; border-radius: 9px; cursor: pointer; }
.awo-share .awo-seg button.is-on { background: var(--text); color: var(--bg); }
.awo-share-ctl .ar-btn[hidden] { display: none; }
/* 2.7.0: TV sound. */
.awt-sound { position: fixed; z-index: 30; top: 1.5vh; right: 1vw; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(14, 9, 40, .85); color: #fff; font: 800 14px var(--font-b); cursor: pointer; }
.awt-sound[hidden] { display: none; }

/* 2.7.1: full screen ads, over the whole TV for their turn. */
.awt-fullad { position: fixed; inset: 0; z-index: 60; background: #000; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s; overflow: hidden; }
.awt-fullad.on { opacity: 1; visibility: visible; transition: opacity .9s ease, visibility 0s; }
.awt-fullad-l { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.awt-fullad-l.in { opacity: 1; }
.awt-fullad-bg { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; filter: blur(40px) brightness(.55); }
.awt-fullad-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .awt-fullad, .awt-fullad.on, .awt-fullad-l { transition: none; } }
/* 2.7.1: an on and off switch made from a checkbox, and the best sizes box. */
.awo-toggle, .awo-form label.awo-toggle { display: flex; align-items: center; gap: 14px; cursor: pointer; padding: 8px 0; }
.awo-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.awo-toggle-k { position: relative; flex: none; width: 48px; height: 26px; border-radius: 99px; background: rgba(255, 255, 255, .16); transition: background .2s; }
.awo-toggle-k::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; }
.awo-toggle input:checked + .awo-toggle-k { background: var(--ok); }
.awo-toggle input:checked + .awo-toggle-k::after { transform: translateX(22px); }
.awo-toggle input:focus-visible + .awo-toggle-k { outline: 2px solid #29D3FF; outline-offset: 2px; }
.awo-toggle small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.awo-sizes { margin-top: 14px; padding: 12px 16px; border-radius: 14px; background: rgba(41, 211, 255, .08); border: 1px solid rgba(41, 211, 255, .3); font-size: 14px; }
.awo-sizes ul { margin: 6px 0 0; padding-left: 18px; }
.awo-sizes li { margin: 3px 0; }
/* 2.7.2: table cards laid out across the face, so a logo never runs over the fold. */
.pp-tent { position: relative; border-bottom: 1px dashed #888; }
.pp-tent:last-child { border-bottom: 0; }
.pp-tent::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dotted rgba(255, 255, 255, .35); pointer-events: none; }
.pp-tents .pp-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .35in; padding: .28in .45in; border: 0; text-align: left;
  background: radial-gradient(circle at 0% 0%, #2a1a66, #0b0820 65%); }
.pp-card-txt { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .07in; }
.pp-tents .pp-card .pp-qr { width: 2.05in; padding: 9px; border-radius: 14px; }
.pp-tents .pp-card .pp-v { margin: 0 0 .04in; font-size: 24px; line-height: 1.1; color: #FFC93C; }
.pp-tents .pp-card .pp-k { font-size: 12px; }
.pp-tents .pp-card h2 { font-size: 28px; line-height: 1.05; }
.pp-tents .pp-card .pp-scan { font-size: 16px; }
.pp-tents .pp-card .pp-or { font-size: 12.5px; line-height: 1.35; color: #ddd8f5; }
.pp-tents .pp-card .pp-or b { display: inline-block; font-size: 22px; }
.pp-logo-chip.md { margin: 0 0 .06in; padding: 6px 12px; border-radius: 10px; box-shadow: none; }
.pp-logo-chip.md img { max-width: 3.8in; max-height: .72in; }