:root {
  /* Remedy hub palette: orange, olive, charcoal, cream */
  --bg: #15181c; --panel: #1e2228; --panel2: #2b3139; --ink: #fff4e0; --dim: #a2a8ae;
  --red: #ef702d; --gold: #f0a010; --green: #99a668; --line: #353b44;
  --orange-d: #c45a1e; --olive-d: #3d4526; --cream: #fff4e0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Calibri, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); }
body { background:
  radial-gradient(90vw 60vh at 0% 0%, #ef702d24, transparent 60%),
  radial-gradient(80vw 60vh at 100% 100%, #99a66826, transparent 60%), var(--bg); background-attachment: fixed; }
h1, .festive { font-family: "Mountains of Christmas", Inter, system-ui, sans-serif; font-weight: 700; letter-spacing: .01em; }
#snow { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
main, .tv > div:not(.lights) { position: relative; z-index: 1; }
/* string of fairy lights */
.lights { position: fixed; top: 0; left: 0; right: 0; height: 26px; z-index: 2; pointer-events: none; display: flex; justify-content: space-around;
  border-top: 2px solid #4a515b; }
.lights i { width: 10px; height: 15px; margin-top: 3px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; background: var(--c); box-shadow: 0 0 12px 2px var(--c);
  animation: twinkle 2.4s ease-in-out infinite; animation-delay: var(--d); }
.lights i::before { content: ""; display: block; width: 6px; height: 4px; margin: -3px auto 0; background: #4a515b; border-radius: 1px; }
@keyframes twinkle { 50% { opacity: .35; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .lights i { animation: none; } }
.logo { display: inline-block; background: var(--cream); border-radius: 10px; padding: 8px 14px; line-height: 0; }
.logo img { height: 34px; width: auto; }
body { font-size: 17px; line-height: 1.4; -webkit-tap-highlight-color: transparent; }
h1, h2, h3 { margin: 0 0 .4em; line-height: 1.15; text-wrap: balance; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; border-radius: 14px; padding: .8em 1.1em; background: var(--panel2); font-weight: 600; touch-action: manipulation; }
button:disabled { opacity: .5; cursor: default; }
button.primary { background: var(--red); color: #fff; }
button.gold { background: var(--gold); color: #2b2205; }
button.ghost { background: transparent; border: 1.5px solid var(--line); color: var(--dim); }
textarea { font: inherit; color: inherit; resize: vertical; }
input[type=text], input[type=number], input[type=password], select, textarea {
  width: 100%; padding: .8em 1em; border-radius: 12px; border: 1.5px solid var(--line); background: #111418; }
small { color: var(--dim); }
.offline::after { content: "Reconnecting…"; position: fixed; left: 50%; top: 10px; transform: translateX(-50%);
  background: #000c; padding: 6px 14px; border-radius: 99px; font-size: 14px; z-index: 50; }

.bar { height: 10px; background: #0007; border-radius: 99px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 100%; background: var(--gold); border-radius: 99px; }
.bar.low i { background: var(--red); }

.board { list-style: none; margin: 0; padding: 0; }
.board li { display: flex; align-items: center; gap: .7em; padding: .45em .7em; border-radius: 10px; }
.board li:nth-child(odd) { background: #ffffff0d; }
.board b { width: 1.6em; color: var(--gold); text-align: right; }
.board span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board span small { margin-left: .6em; }
.board em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.board .empty { color: var(--dim); }
.boards { display: grid; gap: 1.2em; }
.scene { width: 100%; height: auto; display: block; border-radius: 12px; }
.chip { display: inline-flex; align-items: center; gap: .4em; padding: .35em .8em; border-radius: 99px; background: var(--panel2); margin: .2em; }
.chip.done { background: var(--green); color: #1c2110; }
.chip.off { opacity: .45; }
.tag { display: inline-block; font-size: .8em; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }

/* ---------- phone ---------- */
.phone { max-width: 560px; margin: 0 auto; padding: 40px 16px 40px; }
.phone header { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 2px 14px; }
.phone header .who { min-width: 0; }
.phone header .who b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone header .pts { text-align: right; font-weight: 700; color: var(--gold); white-space: nowrap; }
.card { border: 1px solid var(--line); background: var(--panel); border-radius: 18px; padding: 18px; margin-bottom: 14px; }
.stack { display: grid; gap: 10px; }
.teams { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.teams label { display: block; }
.teams input { position: absolute; opacity: 0; }
.teams span { display: block; text-align: center; padding: .7em; border-radius: 12px; border: 1.5px solid var(--line); }
.teams input:checked + span { background: var(--red); color: #fff; border-color: var(--red); font-weight: 700; }
.game { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: var(--panel); padding: 14px 16px; }
.game .ico { font-size: 30px; }
.game b { display: block; }
.game small { display: block; font-weight: 400; }
.game .played { color: var(--gold); }
.opts { display: grid; gap: 10px; }
.opts button { padding: 1em; text-align: left; font-size: 1.05em; }
.opts button.sel { outline: 3px solid var(--gold); }
.opts button.right { background: var(--green); color: #1c2110; }
.opts button.wrong { background: #6b3320; }
.prompt { font-size: 1.3em; font-weight: 700; margin: .2em 0 .6em; }
.ctx { background: #0006; border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.ctx b { color: var(--gold); }
.big { font-size: 2.4em; font-weight: 800; text-align: center; margin: .2em 0; }
.center { text-align: center; }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #000d; padding: 10px 18px; border-radius: 99px; z-index: 40; white-space: nowrap; }
.shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* shown only on computer-sized screens: the front page is the phone remote */
.bigscreen { display: none; position: relative; z-index: 3; margin: 44px auto 0; max-width: 560px; padding: 14px 18px; border-radius: 14px;
  background: var(--red); color: #fff; text-decoration: none; text-align: center; font-weight: 600; }
@media (min-width: 900px) { .bigscreen { display: block; } .bigscreen + .phone { padding-top: 16px; } }

/* ---------- TV ---------- */
.tv { height: 100vh; overflow: hidden; display: flex; flex-direction: column; padding: 5.5vh 3vw 3vh; font-size: 2.1vh; }
.tv h1 { font-size: 7vh; }
.tv .logo img { height: 5vh; }
.tv h2 { font-size: 4vh; }
.tv h3 { font-size: 2.6vh; color: var(--gold); text-transform: uppercase; letter-spacing: .08em; }
.tv #top { flex: 0 0 auto; }
.tv #media { flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 2vw; padding: 1.5vh 0; }
.tv #media:empty { display: none; }
.tv #media video, .tv #media img { max-width: 100%; max-height: 100%; border-radius: 1.5vh; background: #fff; }
.tv #media .scene { width: auto; height: 100%; max-width: 48%; }
.tv #bottom { flex: 0 0 auto; }
.tv #top.fill { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.tv .idle { flex: 1; display: grid; grid-template-columns: 38vw 1fr; gap: 4vw; align-items: center; min-height: 0; }
.tv .qr { background: #fff; border-radius: 2vh; padding: 1.5vh; width: 100%; max-width: 44vh; aspect-ratio: 1; margin: 2vh auto; display: block; }
.tv .join { text-align: center; }
.tv .join p { font-size: 3vh; margin: .3em 0; }
.tv .boards { grid-template-columns: 1fr 1fr; gap: 2.5vw; }
.tv .boards.solo { grid-template-columns: 1fr; }
.tv .boards.solo .board li { font-size: 3.4vh; }
.tv .board li { font-size: 3vh; padding: .8vh 1vw; }
.tv .qhead { display: flex; justify-content: space-between; align-items: baseline; gap: 2vw; margin-bottom: 1vh; }
.tv .qhead .count { font-size: 3vh; color: var(--dim); white-space: nowrap; }
.tv .prompt { font-size: 6.4vh; margin: 3vh 0; }
.tv .opts { grid-template-columns: 1fr 1fr; gap: 2.5vh 1.5vw; }
.tv .opt { background: var(--panel); border: 1px solid var(--line); border-radius: 2vh; padding: 4.5vh 2vw; font-size: 4.6vh; font-weight: 600; }
.tv .opt.right { background: var(--green); color: #1c2110; }
.tv .opt.dim { opacity: .35; }
.tv .ctx { font-size: 5vh; padding: 3vh 2vw; }
.tv .answer { font-size: 6vh; font-weight: 800; color: var(--gold); margin: 1vh 0; }
.tv .chips { margin-top: 3vh; font-size: 3.2vh; }
.tv .centerbox { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.5vh; min-height: 0; }
.tv .huge { font-size: 10vh; font-weight: 700; font-family: "Mountains of Christmas", Inter, system-ui, sans-serif; }
.tv .notes { font-size: 14vh; animation: bob 1.2s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translateY(-2vh) rotate(4deg); } }
.tv .results { width: min(70vw, 1100px); }
.tv .results li { font-size: 3.4vh; }
.tv .step { font-size: 6.5vh; font-weight: 700; max-width: 80vw; text-wrap: balance; }
.tv #sound { position: fixed; right: 2vw; bottom: 2vh; background: var(--gold); color: #2b2205; font-size: 2.2vh; z-index: 9; }

/* ---------- admin ---------- */
.admin { max-width: 860px; margin: 0 auto; padding: 40px 16px 60px; }
.admin table { width: 100%; border-collapse: collapse; }
.admin td, .admin th { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.admin .wrap { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.admin .wrap > input, .admin .wrap > select { width: auto; flex: 1 1 140px; }
.admin .mc { font-size: 1.5em; font-weight: 700; background: #0006; border-radius: 14px; padding: 16px; min-height: 4.5em; }
.admin button { padding: .6em .9em; }
.admin label.check { display: inline-flex; gap: 6px; align-items: center; margin-right: 12px; }