/* King Solomon Gaming · design system — minimal, modern, RTL */
:root {
  --accent: #FF4D6D;
  --ink: #111114;
  --ink-2: #55555E;
  --ink-3: #9A9AA3;
  --line: #E8E8EC;
  --bg: #F6F6F8;
  --card: #FFFFFF;
  --ok: #16A34A;
  --warn: #D97706;
  --bad: #DC2626;
  --radius: 20px;
  --font: 'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font); direction: rtl; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font-family: inherit; }
img { max-width: 100%; display: block; }
.hidden { display: none !important; }
.accent { color: var(--accent); }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.ltr { direction: ltr; unicode-bidi: isolate; }
.brand { font-weight: 900; letter-spacing: .14em; font-size: 13px; direction: ltr; unicode-bidi: isolate; }

/* ───────── phone (participant / host / landing) ───────── */
body.phone { font-size: 19px; line-height: 1.45; min-height: 100dvh; }
.wrap { max-width: 560px; margin: 0 auto; padding: 16px 16px 120px; }
.topbar { user-select: none; -webkit-user-select: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.topbar .who { font-weight: 700; font-size: 18px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.topbar .who span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-weight: 700; font-size: 16px; white-space: nowrap; }
.pill.acc { background: var(--accent); color: #fff; border-color: transparent; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); display: inline-block; flex: none; }
.dot.off { background: var(--bad); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .25; } }

h1 { font-size: 34px; line-height: 1.15; margin: 8px 0 8px; font-weight: 900; letter-spacing: -.01em; }
h2 { font-size: 24px; line-height: 1.2; margin: 0 0 8px; font-weight: 800; }
h3 { font-size: 19px; margin: 0 0 10px; font-weight: 800; }
p { margin: 0 0 12px; }
.lead { font-size: 21px; color: var(--ink-2); }
.center { text-align: center; }
.stack > * + * { margin-top: 14px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.card + .card { margin-top: 14px; }
.card.hero { padding: 28px 22px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.card-head h3 { margin: 0; }

.btn { user-select: none; -webkit-user-select: none; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 60px; padding: 14px 20px; border-radius: 16px; border: 0;
  background: var(--ink); color: #fff; font-size: 20px; font-weight: 800; cursor: pointer; text-decoration: none; transition: transform .08s, opacity .15s; }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .4; pointer-events: none; }
.btn.acc { background: var(--accent); }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn.soft { background: #EFEFF3; color: var(--ink); }
.btn.sm { min-height: 46px; font-size: 17px; padding: 10px 14px; border-radius: 12px; }
.btn.ok { background: var(--ok); }
.btn.bad { background: var(--bad); }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

label.field { display: block; font-weight: 700; font-size: 17px; margin-bottom: 8px; }
.input, textarea.input { width: 100%; font-size: 21px; padding: 16px 18px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); outline: none; }
.input:focus { border-color: var(--ink); }
.input.code { font-size: 34px; letter-spacing: .3em; text-align: center; font-weight: 800; direction: ltr; }
textarea.input { resize: none; min-height: 96px; line-height: 1.4; }
.hint { font-size: 15px; color: var(--ink-3); margin-top: 6px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-size: 18px; font-weight: 600; cursor: pointer; user-select: none; }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch { width: 44px; height: 44px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--line); cursor: pointer; }
.swatch.on { box-shadow: 0 0 0 3px var(--ink); }
.seg { display: flex; background: #EFEFF3; padding: 4px; border-radius: 14px; }
.seg button { flex: 1; border: 0; background: transparent; padding: 12px; font-size: 18px; font-weight: 700; border-radius: 11px; color: var(--ink-2); }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 700; font-size: 18px; cursor: pointer; }
.switch input { display: none; }
.switch i { width: 52px; height: 32px; border-radius: 99px; background: #D4D4DA; position: relative; transition: background .2s; flex: none; }
.switch i::after { content: ''; position: absolute; top: 3px; right: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.switch input:checked + i { background: var(--ok); }
.switch input:checked + i::after { transform: translateX(-20px); }

.big-emoji { font-size: 72px; line-height: 1; margin: 8px 0 12px; }
.timer-pill { font-variant-numeric: tabular-nums; }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: 16px; }
.status.pending { background: #FEF3C7; color: #92400E; }
.status.approved { background: #DCFCE7; color: #166534; }
.status.rejected { background: #FEE2E2; color: #991B1B; }

.picker { border: 2px dashed #CFCFD6; border-radius: 22px; min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: #fff; cursor: pointer; overflow: hidden; position: relative; text-align: center; padding: 18px; }
.picker img { width: 100%; max-height: 52vh; object-fit: contain; border-radius: 14px; }
.picker .ico { font-size: 54px; }
.picker input { display: none; }

.vote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vote-item { position: relative; border-radius: 16px; overflow: hidden; background: #000; aspect-ratio: 1; border: 0; padding: 0; cursor: pointer; }
.vote-item img { width: 100%; height: 100%; object-fit: cover; }
.vote-item .n { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.6); color: #fff; font-weight: 800; border-radius: 10px; padding: 2px 10px; font-size: 17px; }
.vote-item.on { outline: 5px solid var(--accent); outline-offset: -5px; }
.vote-item.on::after { content: '✓'; position: absolute; inset: auto 8px 8px auto; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 24px; font-weight: 900; display: flex; align-items: center; justify-content: center; }

.queue-item { display: flex; gap: 12px; align-items: stretch; padding: 12px 0; border-top: 1px solid var(--line); }
.queue-item:first-of-type { border-top: 0; }
.queue-item img { width: 96px; height: 96px; object-fit: cover; border-radius: 12px; flex: none; }
.queue-item .meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.queue-item .meta b { font-size: 17px; }
.queue-item .meta div { font-size: 16px; color: var(--ink-2); }
.queue-item .acts { display: flex; flex-direction: column; gap: 8px; }
.queue-item .acts button { width: 52px; height: 44px; border-radius: 12px; border: 0; font-size: 22px; font-weight: 800; color: #fff; cursor: pointer; }

.people { display: flex; flex-wrap: wrap; gap: 8px; }
.person { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; background: #F1F1F4; font-size: 16px; font-weight: 600; }
.person .x { border: 0; background: none; color: var(--ink-3); font-size: 18px; padding: 0 2px; cursor: pointer; }
.person.bot { background: #EEF2FF; }
.rounds .round { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.rounds .round:first-child { border-top: 0; }
.rounds .round .t { flex: 1; font-weight: 700; }
.rounds .round .e { font-size: 26px; width: 36px; text-align: center; }
.tag { font-size: 14px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: #F1F1F4; color: var(--ink-3); }
.lb { counter-reset: r; }
.lb-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 18px; }
.lb-row:first-child { border-top: 0; }
.lb-row .r { width: 28px; font-weight: 800; color: var(--ink-3); }
.lb-row .nm { flex: 1; font-weight: 700; }
.lb-row .sc { font-weight: 800; font-variant-numeric: tabular-nums; }
.lb-row.me { background: #FFF1F3; margin: 0 -12px; padding: 10px 12px; border-radius: 12px; }

.qr-box { background: #fff; border-radius: 16px; padding: 10px; width: 100%; max-width: 240px; margin: 0 auto; }
.qr-box svg { width: 100%; height: auto; display: block; }
.copy-line { display: flex; gap: 8px; align-items: center; background: #F1F1F4; border-radius: 12px; padding: 10px 12px; font-size: 14px; direction: ltr; overflow: hidden; }
.copy-line span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 30px); background: var(--ink); color: #fff; padding: 14px 22px; border-radius: 14px; font-weight: 700; font-size: 17px;
  opacity: 0; pointer-events: none; transition: all .25s; z-index: 100; max-width: 90vw; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.sticky-actions { position: fixed; inset: auto 0 0 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg) 70%, transparent); z-index: 30; }
.sticky-actions .inner { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.pop-in { animation: popIn .35s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes popIn { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.fade-in { animation: fadeIn .4s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.spin { width: 22px; height: 22px; border: 3px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ───────── main screen (projector) ───────── */
body.screen { background: #0A0A0D; color: #F4F4F6; overflow: hidden; height: 100vh; font-size: 2vmin; --line: rgba(255,255,255,.1); }
.stage { position: fixed; inset: 0; display: flex; flex-direction: column; }
.s-top { display: flex; align-items: center; justify-content: space-between; padding: 2.4vmin 3.4vmin; flex: none; z-index: 5; }
.s-top .brand { font-size: 1.8vmin; color: rgba(255,255,255,.55); }
.s-top .round-label { font-size: 2.6vmin; font-weight: 800; color: rgba(255,255,255,.85); }
.s-top .mini-join { display: flex; align-items: center; gap: 1.4vmin; font-size: 2vmin; color: rgba(255,255,255,.7); }
.s-top .mini-join .qr { width: 9vmin; background: #fff; border-radius: 1vmin; padding: .5vmin; }
.s-top .mini-join .qr svg { width: 100%; display: block; }
.s-top .mini-join b { font-size: 3.4vmin; color: #fff; letter-spacing: .12em; direction: ltr; }
.s-body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 5vmin 4vmin; position: relative; }

.lobby { display: grid; grid-template-columns: 1.05fr 1fr; gap: 6vmin; width: 100%; height: 100%; align-items: center; }
.lobby .left .kicker { font-size: 2.4vmin; font-weight: 800; letter-spacing: .2em; color: var(--accent); direction: ltr; text-align: right; }
.lobby .left .name { font-size: 13vmin; font-weight: 900; line-height: .95; margin: 1.5vmin 0 1vmin; letter-spacing: -.02em; }
.lobby .left .sub { font-size: 3.6vmin; color: rgba(255,255,255,.7); font-weight: 500; }
.join-card { display: flex; align-items: center; gap: 4vmin; margin-top: 5vmin; }
.join-card .qr { width: 30vmin; background: #fff; border-radius: 2.4vmin; padding: 1.4vmin; flex: none; }
.join-card .qr svg { width: 100%; display: block; }
.join-card .how { font-size: 3vmin; line-height: 1.35; color: rgba(255,255,255,.8); }
.join-card .code { font-size: 9vmin; font-weight: 900; letter-spacing: .12em; color: #fff; direction: ltr; text-align: right; line-height: 1; margin-top: 1vmin; }
.lobby .right { height: 100%; display: flex; flex-direction: column; justify-content: center; }
.lobby .count { font-size: 3vmin; color: rgba(255,255,255,.6); font-weight: 700; margin-bottom: 2.4vmin; }
.lobby .count b { color: #fff; font-size: 6vmin; margin-left: 1vmin; }
.names { display: flex; flex-wrap: wrap; gap: 1.4vmin; align-content: flex-start; }
.nm { padding: 1.3vmin 2.4vmin; border-radius: 1.6vmin; background: rgba(255,255,255,.08); font-size: 3vmin; font-weight: 700; color: rgba(255,255,255,.9); transition: all .35s; }
.nm.new { animation: popIn .5s cubic-bezier(.2,1.5,.4,1) both; }
.nm.lit { background: var(--accent); color: #fff; }
.nm.dim { opacity: .35; }
.names.small .nm { font-size: 2.2vmin; padding: 1vmin 1.8vmin; }

.intro { text-align: center; max-width: 80vw; }
.intro .emoji { font-size: 16vmin; line-height: 1; }
.intro .rn { font-size: 3.2vmin; font-weight: 800; color: var(--accent); margin-top: 3vmin; }
.intro h1 { font-size: 11vmin; margin: 1vmin 0 3vmin; font-weight: 900; }
.intro p { font-size: 4.2vmin; color: rgba(255,255,255,.78); line-height: 1.4; margin: 0; }

.submit-view { display: grid; grid-template-columns: auto 1fr; gap: 7vmin; align-items: center; width: 100%; }
.ring { position: relative; width: 38vmin; height: 38vmin; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .bg { stroke: rgba(255,255,255,.08); }
.ring .fg { stroke: var(--accent); transition: stroke-dashoffset 1s linear; stroke-linecap: round; }
.ring .num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13vmin; font-weight: 900; font-variant-numeric: tabular-nums; }
.ring.urgent .num { color: var(--accent); animation: pulse 1s infinite; }
@keyframes pulse { 50% { transform: scale(1.06); } }
.submit-view h2 { font-size: 6vmin; margin: 0 0 1.5vmin; font-weight: 900; }
.submit-view .progress { font-size: 3.4vmin; color: rgba(255,255,255,.7); margin-bottom: 3vmin; font-weight: 600; }
.submit-view .progress b { color: #fff; }

.show-view { position: absolute; inset: 0; overflow: hidden; }
.show-view .bgimg { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(40px) brightness(.35); transform: scale(1.1); }
.show-view .photo { position: absolute; inset: 3vmin 6vmin 16vmin; display: flex; align-items: center; justify-content: center; }
.show-view .photo img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 1.6vmin; box-shadow: 0 3vmin 8vmin rgba(0,0,0,.6); animation: kenburns 12s ease-out both; }
@keyframes kenburns { from { transform: scale(.94); opacity: 0; } 8% { opacity: 1; } to { transform: scale(1.02); } }
.show-view .cap { position: absolute; left: 6vmin; right: 6vmin; bottom: 3.5vmin; display: flex; align-items: flex-end; justify-content: space-between; gap: 4vmin; }
.show-view .cap .txt { font-size: 4.6vmin; font-weight: 800; line-height: 1.2; }
.show-view .cap .by { font-size: 2.8vmin; color: rgba(255,255,255,.7); font-weight: 600; margin-top: .8vmin; }
.show-view .cap .cnt { font-size: 2.6vmin; font-weight: 800; color: rgba(255,255,255,.6); white-space: nowrap; }
.show-view .bar { position: absolute; left: 0; right: 0; bottom: 0; height: .7vmin; background: rgba(255,255,255,.1); }
.show-view .bar i { display: block; height: 100%; background: var(--accent); transform-origin: right; }

.vote-view { width: 100%; height: 100%; display: flex; flex-direction: column; }
.vote-view .head { display: flex; align-items: center; justify-content: space-between; gap: 4vmin; margin-bottom: 2.4vmin; }
.vote-view .head h2 { font-size: 5.6vmin; margin: 0; font-weight: 900; }
.vote-view .head .sub { font-size: 2.8vmin; color: rgba(255,255,255,.65); font-weight: 600; }
.vote-view .t { font-size: 8vmin; font-weight: 900; font-variant-numeric: tabular-nums; min-width: 14vmin; text-align: center; }
.vote-view .t.urgent { color: var(--accent); }
.thumbs { flex: 1; min-height: 0; display: grid; gap: 1.6vmin; }
.thumb { position: relative; border-radius: 1.4vmin; overflow: hidden; background: #111; min-height: 0; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb .n { position: absolute; top: 1vmin; right: 1vmin; background: rgba(0,0,0,.65); padding: .3vmin 1.4vmin; border-radius: 1vmin; font-weight: 900; font-size: 2.6vmin; }

.results-view { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.suspense { text-align: center; }
.suspense .q { font-size: 7vmin; font-weight: 900; }
.suspense .dots span { display: inline-block; width: 3vmin; height: 3vmin; margin: 4vmin 1.2vmin 0; border-radius: 50%; background: var(--accent); animation: bounce 1s infinite; }
.suspense .dots span:nth-child(2) { animation-delay: .15s; } .suspense .dots span:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 50% { transform: translateY(-3vmin); opacity: .4; } }
.winner { display: grid; grid-template-columns: 1.25fr 1fr; gap: 5vmin; align-items: center; width: 100%; height: 100%; }
.winner .img { height: 100%; max-height: 72vh; display: flex; align-items: center; justify-content: center; }
.winner .img img { max-height: 100%; border-radius: 2vmin; box-shadow: 0 0 0 .8vmin var(--accent), 0 3vmin 10vmin rgba(0,0,0,.6); animation: popIn .7s cubic-bezier(.2,1.3,.4,1) both; }
.winner .k { font-size: 3.2vmin; font-weight: 800; color: var(--accent); }
.winner .who { font-size: 9vmin; font-weight: 900; line-height: 1; margin: 1.4vmin 0; }
.winner .cap { font-size: 3.6vmin; color: rgba(255,255,255,.8); margin-bottom: 3vmin; }
.winner .votes { font-size: 3.2vmin; font-weight: 800; }
.runners { display: flex; gap: 2vmin; margin-top: 4vmin; }
.runner { flex: 1; background: rgba(255,255,255,.06); border-radius: 1.6vmin; overflow: hidden; }
.runner img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.runner div { padding: 1.2vmin 1.6vmin; font-size: 2.2vmin; font-weight: 700; }
.runner.star { box-shadow: 0 0 0 .4vmin #FFD166; }

.board { width: min(110vmin, 92vw); }
.board h1 { font-size: 6vmin; text-align: center; margin: 0 0 2.4vmin; }
.board .line { display: grid; grid-template-columns: 6vmin 1fr 12vmin; align-items: center; gap: 2vmin; padding: .9vmin 0; font-size: 3.2vmin; font-weight: 800; }
.board .line .r { color: rgba(255,255,255,.45); }
.board .line .bar { height: 1.2vmin; background: rgba(255,255,255,.08); border-radius: 1vmin; margin-top: .8vmin; overflow: hidden; }
.board .line .bar i { display: block; height: 100%; background: var(--accent); border-radius: 1vmin; transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.board .line .sc { text-align: left; font-variant-numeric: tabular-nums; }
.board .line:first-of-type { font-size: 4.2vmin; }

.center-msg { text-align: center; }
.center-msg .emoji { font-size: 14vmin; }
.center-msg h1 { font-size: 7vmin; margin: 2vmin 0; }
.center-msg p { font-size: 3.4vmin; color: rgba(255,255,255,.7); }

.start-overlay { position: fixed; inset: 0; background: rgba(10,10,13,.94); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3vmin; z-index: 50; cursor: pointer; text-align: center; }
.start-overlay .big { font-size: 6vmin; font-weight: 900; }
.start-overlay .small { font-size: 2.6vmin; color: rgba(255,255,255,.6); }
.start-overlay .btn { width: auto; font-size: 3vmin; padding: 2.4vmin 6vmin; min-height: 0; background: var(--accent); }
.s-tools { position: fixed; bottom: 1.4vmin; left: 50%; transform: translateX(-50%); display: flex; gap: 1vmin; opacity: 0; transition: opacity .2s; z-index: 40; }
.s-tools:hover { opacity: 1; }
.s-tools button { background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 1vmin; padding: 1vmin 1.6vmin; font-size: 2vmin; cursor: pointer; }
.conn { position: fixed; top: 1vmin; left: 50%; transform: translateX(-50%); background: var(--bad); color: #fff; padding: .8vmin 2vmin; border-radius: 1vmin; font-size: 2vmin; font-weight: 700; z-index: 60; }

@media (max-aspect-ratio: 1/1) {
  .lobby, .submit-view, .winner { grid-template-columns: 1fr; }
}

/* ───────── v2: all round types (screen) ───────── */
.quote-view { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 4vmin 8vmin 10vmin; }
.quote { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 3vmin; padding: 5vmin 6vmin; max-width: 150vmin; text-align: center; }
.quote .qi { font-size: 7vmin; line-height: 1; margin-bottom: 2.4vmin; }
.quote .qt { font-size: 6vmin; font-weight: 800; line-height: 1.3; }
.quote .qt.long { font-size: 4.4vmin; }
.quote .qa { font-size: 3vmin; color: rgba(255,255,255,.6); margin-top: 3vmin; font-weight: 600; }
.quote.big .qt { font-size: 5vmin; }
.quote.story { margin: 2vmin auto 3vmin; }
.quote.story .qt { font-size: 5.4vmin; }
.quote-view .cap-cnt { position: absolute; left: 6vmin; bottom: 4vmin; font-size: 2.6vmin; font-weight: 800; color: rgba(255,255,255,.6); }
.quote-view .bar { position: absolute; left: 0; right: 0; bottom: 0; height: .7vmin; background: rgba(255,255,255,.1); }
.quote-view .bar i { display: block; height: 100%; background: var(--accent); }
.thumb.text { display: flex; align-items: center; justify-content: center; padding: 2vmin 2vmin 2vmin 5vmin; background: rgba(255,255,255,.06); }
.thumb.text .tx { font-size: 2.3vmin; font-weight: 700; line-height: 1.3; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }
.runner.text .tx { padding: 1.6vmin; font-size: 2vmin; line-height: 1.3; min-height: 10vmin; color: rgba(255,255,255,.85); }
.winner.textual { grid-template-columns: 1.1fr 1fr; }
.plus { color: var(--accent); font-size: .7em; margin-inline-start: 1vmin; }
.t.urgent, .ring.urgent .num { color: var(--accent); }

.tl { width: 100%; max-width: 150vmin; }
.tl h1 { font-size: 5.4vmin; text-align: center; margin: 0 0 3vmin; }
.tl-list { display: grid; gap: 1.2vmin; }
.tl-list.two { grid-template-columns: 1fr 1fr; column-gap: 5vmin; }
.tl-row { display: grid; grid-template-columns: 22vmin 1fr 13vmin; align-items: center; gap: 2vmin; animation: fadeIn .5s ease both; }
.tl-list.two .tl-row { grid-template-columns: 17vmin 1fr 11vmin; }
.tl-row .nm2 { font-size: 3vmin; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-row .tl-bar { height: 2.2vmin; background: rgba(255,255,255,.07); border-radius: 2vmin; overflow: hidden; }
.tl-row .tl-bar i { display: block; height: 100%; background: var(--accent); border-radius: 2vmin; }
.tl-row .yr { font-size: 2.6vmin; font-weight: 700; color: rgba(255,255,255,.75); }

.tot, .truth { width: 100%; max-width: 160vmin; text-align: center; }
.tot-head { display: flex; justify-content: space-between; align-items: center; min-height: 9vmin; }
.tot-head .qn { font-size: 2.8vmin; font-weight: 800; color: rgba(255,255,255,.6); }
.tot-head .t { font-size: 8vmin; font-weight: 900; font-variant-numeric: tabular-nums; }
.tot-q { font-size: 4.4vmin; font-weight: 800; color: rgba(255,255,255,.8); margin-bottom: 3vmin; }
.tot-cards { display: grid; grid-template-columns: 1fr auto 1fr; gap: 3vmin; align-items: stretch; }
.tc { position: relative; background: rgba(255,255,255,.07); border-radius: 3vmin; padding: 6vmin 3vmin; display: flex; flex-direction: column; justify-content: center; gap: 2vmin; transition: all .5s; }
.tc .tt { font-size: 7vmin; font-weight: 900; line-height: 1.1; }
.tc .tp { font-size: 3vmin; color: rgba(255,255,255,.75); font-weight: 700; }
.tc.win { background: var(--accent); transform: scale(1.04); }
.tc.lose { opacity: .35; }
.tc .badge { position: absolute; top: -2.4vmin; left: 50%; transform: translateX(-50%); background: #FFD166; color: #111; padding: .8vmin 2.4vmin; border-radius: 99px; font-weight: 900; font-size: 2.6vmin; white-space: nowrap; }
.or { align-self: center; font-size: 4vmin; font-weight: 900; color: rgba(255,255,255,.5); }
.tot-foot { margin-top: 3.4vmin; font-size: 2.8vmin; color: rgba(255,255,255,.75); font-weight: 600; line-height: 1.5; }

.tf { display: grid; gap: 1.4vmin; max-width: 110vmin; margin: 0 auto 3vmin; }
.tf-bar { display: grid; grid-template-columns: 12vmin 1fr 10vmin; align-items: center; gap: 2vmin; font-size: 3.2vmin; font-weight: 800; }
.tf-bar div { height: 3.4vmin; background: rgba(255,255,255,.07); border-radius: 2vmin; overflow: hidden; }
.tf-bar i { display: block; height: 100%; background: #22C55E; border-radius: 2vmin; transition: width 1s cubic-bezier(.2,.8,.2,1); }
.tf-bar.f i { background: #EF4444; }
.verdict { font-size: 6.4vmin; font-weight: 900; margin: 1vmin 0; }
.verdict.wait { color: rgba(255,255,255,.45); font-size: 4.4vmin; }
.verdict.T { color: #4ADE80; } .verdict.F { color: #F87171; } .verdict.J { color: #FFD166; }
.author { font-size: 3.4vmin; color: rgba(255,255,255,.8); margin-top: 1.4vmin; }

.cloud { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.2vmin 3vmin; max-width: 160vmin; padding: 2vmin; }
.cw { font-weight: 800; line-height: 1.1; color: rgba(255,255,255,.88); animation: popIn .6s cubic-bezier(.2,1.4,.4,1) both; }
.cw:nth-child(3n) { color: var(--accent); } .cw:nth-child(5n) { color: rgba(255,255,255,.55); }
.cw.top { color: var(--accent); font-weight: 900; }

.award { text-align: center; }
.aw-e { font-size: 18vmin; line-height: 1; }
.aw-t { font-size: 5.4vmin; font-weight: 800; color: rgba(255,255,255,.75); margin-top: 2vmin; }
.aw-w { font-size: 11vmin; font-weight: 900; margin-top: 2vmin; line-height: 1.05; }
.aw-d { font-size: 3.2vmin; color: rgba(255,255,255,.65); margin-top: 1.6vmin; }
.award .suspense .dots span { margin-top: 5vmin; }
.aw-dots { display: flex; gap: 1.2vmin; justify-content: center; margin-top: 5vmin; }
.aw-dots i { width: 1.4vmin; height: 1.4vmin; border-radius: 50%; background: rgba(255,255,255,.18); }
.aw-dots i.on { background: var(--accent); } .aw-dots i.past { background: rgba(255,255,255,.5); }

/* ───────── v2: phone controls ───────── */
.ab { display: grid; gap: 12px; }
.ab button { min-height: 96px; border-radius: 20px; border: 2px solid var(--line); background: #fff; font-size: 26px; font-weight: 900; color: var(--ink); cursor: pointer; padding: 14px; line-height: 1.2; }
.ab button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.ab .or2 { text-align: center; font-weight: 800; color: var(--ink-3); font-size: 16px; }
.tf-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tf-btns button { min-height: 110px; border-radius: 20px; border: 2px solid var(--line); background: #fff; font-size: 26px; font-weight: 900; cursor: pointer; }
.tf-btns button.on.T { background: #16A34A; color: #fff; border-color: #16A34A; }
.tf-btns button.on.F { background: #DC2626; color: #fff; border-color: #DC2626; }
.tf-btns button.J { grid-column: 1 / -1; min-height: 64px; font-size: 19px; }
.tf-btns button.on.J { background: #F5B700; border-color: #F5B700; }
.story-card { background: #111114; color: #fff; border-radius: 20px; padding: 22px; font-size: 22px; font-weight: 800; line-height: 1.35; text-align: center; }
.stepper { display: flex; align-items: center; justify-content: center; gap: 18px; }
.stepper button { width: 72px; height: 72px; border-radius: 50%; border: 0; background: #EFEFF3; font-size: 36px; font-weight: 800; cursor: pointer; }
.stepper .val { font-size: 72px; font-weight: 900; min-width: 120px; text-align: center; font-variant-numeric: tabular-nums; }
.text-item { background: #fff; border: 2px solid var(--line); border-radius: 16px; padding: 16px; font-size: 19px; font-weight: 700; text-align: right; cursor: pointer; width: 100%; line-height: 1.35; display: flex; gap: 12px; align-items: flex-start; }
.text-item .n { background: #F1F1F4; border-radius: 10px; padding: 2px 10px; font-weight: 900; flex: none; }
.text-item.on { border-color: var(--accent); background: #FFF1F3; }
.text-list { display: grid; gap: 10px; }

/* ───────── v3: host collapsible sections ───────── */
details.sec { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin-top: 12px; overflow: hidden; }
details.sec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 20px; font-weight: 800; font-size: 19px; user-select: none; -webkit-user-select: none; }
details.sec > summary::-webkit-details-marker { display: none; }
details.sec > summary::after { content: '⌄'; font-size: 22px; color: var(--ink-3); transition: transform .2s; line-height: 1; margin-inline-start: 4px; }
details.sec[open] > summary::after { transform: rotate(180deg); }
details.sec > summary .st { flex: 1; }
details.sec .sec-body { padding: 0 20px 20px; }
.badge { font-size: 14px; font-weight: 800; padding: 4px 10px; border-radius: 99px; background: var(--accent); color: #fff; }
.badge.soft { background: #F1F1F4; color: var(--ink-2); }
.badge.soft.on { background: #DCFCE7; color: #166534; }
.badge:empty { display: none; }
.big-code { text-align: center; font-size: 40px; font-weight: 900; letter-spacing: .18em; margin: 10px 0 12px; }
.sec .qr-box { max-width: 230px; border: 1px solid var(--line); }
.sec .copy-line { direction: ltr; }

/* ───────── v3: phone standby ("look at the big screen") ───────── */
.standby { min-height: calc(100dvh - 150px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 10px 6px 30px; }
.standby .tv { position: relative; width: 150px; height: 150px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 64px;
  background: color-mix(in srgb, var(--accent) 12%, #fff); }
.standby .tv::before, .standby .tv::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; animation: ripple 2.6s ease-out infinite; }
.standby .tv::after { animation-delay: 1.3s; }
@keyframes ripple { 0% { transform: scale(.9); opacity: .55; } 100% { transform: scale(1.6); opacity: 0; } }
.standby .look { font-size: 15px; font-weight: 800; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, #fff); padding: 6px 14px; border-radius: 99px; }
.standby h2 { font-size: 28px; margin: 0; line-height: 1.25; }
.standby .sub { font-size: 19px; color: var(--ink-2); margin: 0; line-height: 1.4; }
.standby .mine { margin-top: 6px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px 18px; font-size: 18px; font-weight: 700; min-width: 70%; }
.standby .sync { margin-top: auto; font-size: 14px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }

/* v4 · King Solomon Gaming brand */
.topbar .logo { height: 44px; width: auto; display: block; }
.topbar .logo-seal { height: 38px; width: auto; display: block; }
.topbar .who #whoName { overflow: visible; }
.s-top .s-logo { height: 8vmin; width: auto; display: block; opacity: .9; }
.start-overlay .overlay-logo { width: min(60vw, 90vmin); height: auto; margin-bottom: 2vmin; }
.s-top .s-logo.wide { height: 7vmin; }

/* ───────── v5 · main screen: royal theme — gold (logo) · ruby · royal blue ───────── */
body.screen {
  --gold-1: #FBE7AE; --gold: #E6BE6A; --gold-2: #B8893A;
  --gold-grad: linear-gradient(180deg, #FFF3CC 0%, #F0CD7E 40%, #C99A48 78%, #EBC677 100%);
  --gold-bar: linear-gradient(90deg, #B8893A, #F0CD7E 55%, #FFF1C4);
  --ruby: #E0243F; --ruby-2: #FF5068; --royal: #2B5BFF; --royal-2: #7597FF;
  --glass: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.025));
  --hair: rgba(230,190,106,.32);
  --display: 'Frank Ruhl Libre', 'Heebo', serif;
  background: #05050A;
}
.bg-fx { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bg-fx i { position: absolute; border-radius: 50%; will-change: transform; }
.bg-fx i:nth-child(1) { width: 110vmax; height: 110vmax; left: -55vmax; top: -60vmax; background: radial-gradient(circle, rgba(224,36,63,.55) 0%, rgba(224,36,63,.16) 35%, transparent 62%); animation: gdDrift1 28s ease-in-out infinite alternate; }
.bg-fx i:nth-child(2) { width: 120vmax; height: 120vmax; right: -60vmax; bottom: -70vmax; background: radial-gradient(circle, rgba(43,91,255,.58) 0%, rgba(43,91,255,.16) 35%, transparent 62%); animation: gdDrift2 32s ease-in-out infinite alternate; }
.bg-fx i:nth-child(3) { width: 80vmax; height: 80vmax; left: 10vmax; top: -10vmax; background: radial-gradient(circle, rgba(230,190,106,.16) 0%, transparent 60%); animation: gdDrift3 36s ease-in-out infinite alternate; }
.bg-fx::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.6) 100%); }
@keyframes gdDrift1 { to { transform: translate(14vmax, 10vmax) scale(1.08); } }
@keyframes gdDrift2 { to { transform: translate(-12vmax, -8vmax) scale(1.1); } }
@keyframes gdDrift3 { to { transform: translate(20vmax, 16vmax) scale(.9); } }
body.screen .stage { z-index: 1; }

/* gold text + display font for the big titles */
body.screen :is(.lobby .name, .intro h1, .submit-view h2, .winner .who, .aw-w, .board h1, .tl h1, .center-msg h1, .suspense .q, .vote-view .head h2, .start-overlay .big, .tot-q) {
  font-family: var(--display); letter-spacing: 0;
}
body.screen :is(.lobby .name, .intro h1, .winner .who, .aw-w, .lobby .count b, .cw.top) {
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 2.4vmin rgba(230,190,106,.35)) drop-shadow(0 .4vmin .4vmin rgba(0,0,0,.5));
  padding-bottom: .08em;
}
body.screen :is(.board h1, .tl h1, .center-msg h1, .suspense .q, .submit-view h2, .vote-view .head h2) { color: #FFF8E6; text-shadow: 0 0 3vmin rgba(230,190,106,.28); }

/* top bar */
.s-top .round-label { color: var(--gold); letter-spacing: .04em; text-shadow: 0 0 2vmin rgba(230,190,106,.35); display: flex; align-items: center; gap: 1.4vmin; }
.s-top .round-label::before { content: ''; width: 1.1vmin; height: 1.1vmin; transform: rotate(45deg); background: var(--gold-grad); box-shadow: 0 0 1.4vmin rgba(230,190,106,.7); }
.s-top .s-logo { opacity: 1; filter: drop-shadow(0 0 1.6vmin rgba(230,190,106,.35)); }
.s-top .mini-join .lbl { font-size: 1.9vmin; line-height: 1.25; text-align: left; color: var(--gold-1); font-weight: 700; }
.s-top .mini-join .qr { width: 10vmin; border-radius: 1.2vmin; padding: .6vmin; box-shadow: 0 0 0 .3vmin var(--gold), 0 0 3vmin rgba(230,190,106,.35); }

/* lobby */
.lobby .left .name { font-size: 14vmin; font-weight: 900; line-height: 1.02; margin: 0 0 1.2vmin; }
.lobby .left .sub { font-size: 3.8vmin; color: var(--gold-1); font-weight: 600; opacity: .9; }
.join-card { gap: 4.4vmin; margin-top: 6vmin; }
.join-card .qr { width: 32vmin; border-radius: 2.6vmin; padding: 1.6vmin;
  box-shadow: 0 0 0 .6vmin var(--gold), 0 0 0 1.4vmin rgba(230,190,106,.16), 0 0 9vmin rgba(230,190,106,.35), 0 3vmin 8vmin rgba(0,0,0,.6); }
.join-card .how { font-size: 3.4vmin; line-height: 1.4; color: rgba(255,255,255,.85); font-weight: 500; }
.join-card .how b { display: block; font-size: 5vmin; font-weight: 900; color: #fff; margin-bottom: 1vmin; font-family: var(--display); }
.lobby .count { color: rgba(255,255,255,.7); font-size: 3.2vmin; }
.lobby .count b { font-size: 8vmin; font-weight: 900; font-family: var(--display); }
body.screen .faint { color: rgba(255,255,255,.5); }

/* name chips */
body.screen .nm { background: var(--glass); border: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1vmin 2.4vmin rgba(0,0,0,.25); color: #fff; }
body.screen .nm.new { animation: popIn .5s cubic-bezier(.2,1.5,.4,1) both, gdNewGlow 2.4s ease-out both; }
@keyframes gdNewGlow { 0% { box-shadow: 0 0 0 .3vmin var(--gold), 0 0 4vmin rgba(230,190,106,.8); } 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1vmin 2.4vmin rgba(0,0,0,.25); } }
body.screen .nm.lit { background: var(--gold-grad); color: #231805; border-color: transparent; box-shadow: 0 0 3vmin rgba(230,190,106,.45); }
body.screen .nm.dim { opacity: .4; }

/* intro */
.intro .emoji { filter: drop-shadow(0 0 5vmin rgba(230,190,106,.5)); }
.intro .rn { color: var(--gold); letter-spacing: .3em; font-size: 3vmin; display: flex; align-items: center; justify-content: center; gap: 2.4vmin; }
.intro .rn::before, .intro .rn::after { content: ''; width: 12vmin; height: 2px; background: linear-gradient(90deg, transparent, var(--gold)); }
.intro .rn::after { transform: scaleX(-1); }
.intro h1 { font-size: 12vmin; line-height: 1.05; }
.intro p { color: rgba(255,255,255,.88); }

/* timers */
.ring .bg { stroke: rgba(255,255,255,.07); }
.ring .fg { stroke: url(#ringGold); }
.ring svg { overflow: visible; filter: drop-shadow(0 0 1.2vmin rgba(230,190,106,.55)); }
.ring .num { color: #FFF8E6; text-shadow: 0 0 3vmin rgba(230,190,106,.4); font-family: var(--display); }
.ring.urgent .fg { stroke: var(--ruby-2); }
.ring.urgent svg { filter: drop-shadow(0 0 1.6vmin rgba(255,80,104,.8)); }
body.screen .ring.urgent .num, body.screen .t.urgent { color: var(--ruby-2); text-shadow: 0 0 3vmin rgba(255,80,104,.6); }
body.screen .t { color: var(--gold-1); text-shadow: 0 0 3vmin rgba(230,190,106,.4); font-family: var(--display); }
.submit-view .progress b { color: var(--gold); }

/* slideshow + quotes */
.show-view .photo img { box-shadow: 0 0 0 .35vmin rgba(230,190,106,.7), 0 0 8vmin rgba(230,190,106,.18), 0 3vmin 8vmin rgba(0,0,0,.6); }
body.screen .show-view .bar i, body.screen .quote-view .bar i { background: var(--gold-bar); box-shadow: 0 0 2vmin rgba(230,190,106,.6); }
.show-view .cap .by { color: var(--gold-1); }
body.screen .quote { position: relative; background: var(--glass); border: 1px solid var(--hair); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4vmin 10vmin rgba(0,0,0,.45), 0 0 10vmin rgba(43,91,255,.12); backdrop-filter: blur(6px); }
body.screen .quote::before { content: ''; position: absolute; top: -1px; left: 20%; right: 20%; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
body.screen .quote .qi { filter: drop-shadow(0 0 3vmin rgba(230,190,106,.5)); }
body.screen .quote .qa { color: var(--gold-1); }

/* voting grid */
body.screen .thumb { border: 1px solid var(--hair); box-shadow: 0 1.6vmin 4vmin rgba(0,0,0,.45); }
body.screen .thumb.text { background: var(--glass); }
body.screen .thumb .n { background: var(--gold-grad); color: #231805; }

/* results */
.suspense .dots span:nth-child(1) { background: var(--ruby-2); box-shadow: 0 0 2.4vmin var(--ruby-2); }
.suspense .dots span:nth-child(2) { background: var(--gold); box-shadow: 0 0 2.4vmin var(--gold); }
.suspense .dots span:nth-child(3) { background: var(--royal-2); box-shadow: 0 0 2.4vmin var(--royal-2); }
.winner .img img { box-shadow: 0 0 0 .7vmin var(--gold), 0 0 0 1.5vmin rgba(230,190,106,.18), 0 0 12vmin rgba(230,190,106,.4), 0 3vmin 10vmin rgba(0,0,0,.6); }
.winner .k { color: var(--gold); letter-spacing: .06em; }
.winner .who { font-size: 10vmin; line-height: 1.05; }
.winner .votes { color: var(--gold-1); }
body.screen .runner { background: var(--glass); border: 1px solid rgba(255,255,255,.1); }
body.screen .runner.star { box-shadow: 0 0 0 .4vmin var(--royal-2), 0 0 4vmin rgba(43,91,255,.5); }

/* leaderboard */
.board .line .bar { background: rgba(255,255,255,.07); height: 1.4vmin; }
body.screen .board .line .bar i { background: linear-gradient(90deg, var(--royal), var(--royal-2)); box-shadow: 0 0 1.6vmin rgba(117,151,255,.55); }
body.screen .board .line:first-of-type .bar i { background: var(--gold-bar); box-shadow: 0 0 2vmin rgba(230,190,106,.7); }
.board .line:first-of-type .r, .board .line:first-of-type .sc { color: var(--gold); }
body.screen .plus { color: var(--gold-1); }

/* timeline */
body.screen .tl-row .tl-bar i { background: linear-gradient(90deg, var(--royal), var(--royal-2)); box-shadow: 0 0 1.6vmin rgba(117,151,255,.5); }
body.screen .tl-row:first-child .tl-bar i { background: var(--gold-bar); box-shadow: 0 0 2vmin rgba(230,190,106,.7); }

/* this or that — ruby vs royal */
body.screen .tc { border: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 3vmin 8vmin rgba(0,0,0,.4); }
body.screen .tc.a { background: linear-gradient(160deg, rgba(224,36,63,.55), rgba(224,36,63,.12)); border-color: rgba(255,80,104,.5); }
body.screen .tc.b { background: linear-gradient(160deg, rgba(43,91,255,.55), rgba(43,91,255,.12)); border-color: rgba(117,151,255,.5); }
body.screen .tc .tt { font-family: var(--display); }
body.screen .tc.win { transform: scale(1.05); border: .4vmin solid var(--gold); box-shadow: 0 0 0 1vmin rgba(230,190,106,.18), 0 0 10vmin rgba(230,190,106,.45); }
body.screen .tc.a.win { background: linear-gradient(160deg, rgba(224,36,63,.9), rgba(160,20,40,.7)); }
body.screen .tc.b.win { background: linear-gradient(160deg, rgba(43,91,255,.9), rgba(25,55,170,.7)); }
body.screen .tc.lose { opacity: .28; }
body.screen .tc .badge { background: var(--gold-grad); color: #231805; box-shadow: 0 0 3vmin rgba(230,190,106,.6); }
body.screen .or { width: 9vmin; height: 9vmin; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 3.2vmin; color: #231805; background: var(--gold-grad); box-shadow: 0 0 4vmin rgba(230,190,106,.5); font-family: var(--display); }
.tot-q { color: #FFF8E6; font-size: 5vmin; }
.tot-head .qn { color: var(--gold-1); }

/* truth or fiction */
body.screen .tf-bar i { background: linear-gradient(90deg, var(--royal), var(--royal-2)); box-shadow: 0 0 2vmin rgba(117,151,255,.6); }
body.screen .tf-bar.f i { background: linear-gradient(90deg, var(--ruby), var(--ruby-2)); box-shadow: 0 0 2vmin rgba(255,80,104,.6); }
body.screen .verdict { font-family: var(--display); }
body.screen .verdict.T { color: var(--royal-2); text-shadow: 0 0 4vmin rgba(117,151,255,.6); }
body.screen .verdict.F { color: var(--ruby-2); text-shadow: 0 0 4vmin rgba(255,80,104,.6); }
body.screen .verdict.J { color: var(--gold); text-shadow: 0 0 4vmin rgba(230,190,106,.6); }
body.screen .author b { color: var(--gold-1); }

/* word cloud */
body.screen .cw { color: #fff; text-shadow: 0 0 2vmin rgba(255,255,255,.18); }
body.screen .cw:nth-child(3n) { color: var(--gold); text-shadow: 0 0 2.4vmin rgba(230,190,106,.45); }
body.screen .cw:nth-child(4n) { color: var(--ruby-2); text-shadow: 0 0 2.4vmin rgba(255,80,104,.45); }
body.screen .cw:nth-child(5n) { color: var(--royal-2); text-shadow: 0 0 2.4vmin rgba(117,151,255,.5); }
body.screen .cw.top { font-family: var(--display); }

/* awards */
.aw-e { filter: drop-shadow(0 0 6vmin rgba(230,190,106,.6)); }
.aw-t { color: var(--gold-1); font-family: var(--display); }
.aw-w { font-size: 12vmin; }
body.screen .aw-dots i.on { background: var(--gold); box-shadow: 0 0 1.6vmin var(--gold); }
body.screen .center-msg .emoji { filter: drop-shadow(0 0 5vmin rgba(230,190,106,.45)); }

/* start overlay */
body.screen .start-overlay { background: radial-gradient(ellipse at 20% 10%, rgba(224,36,63,.25), transparent 50%), radial-gradient(ellipse at 80% 90%, rgba(43,91,255,.28), transparent 55%), rgba(5,5,10,.93); }
.start-overlay .overlay-logo { filter: drop-shadow(0 0 4vmin rgba(230,190,106,.35)); }
body.screen .start-overlay .btn { background: var(--gold-grad); color: #231805; font-weight: 900; box-shadow: 0 0 0 .4vmin rgba(255,241,196,.35), 0 0 7vmin rgba(230,190,106,.55); border: 0; }