:root {
  --bg: #0d1021;
  --bg2: #151936;
  --fg: #f2f3ff;
  --muted: #8b90c0;
  --accent: #5b8cff;
  --accent2: #ff5ba7;
  --ok: #37d67a;
  --bad: #ff5b5b;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0; height: 100%;
  background: radial-gradient(circle at 30% 20%, var(--bg2), var(--bg));
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
#app { min-height: 100%; }
.muted { color: var(--muted); }
.center, .standby { min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 1rem; padding: 2rem; }

/* ---- stage (TV) ---- */
.stage #app { padding: 0; }
.big-title { font-size: 9vw; font-weight: 800; letter-spacing: -0.03em; }
.standby .joinbox { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px; padding: 3vh 4vw; }
.joinlabel { font-size: 2.2vw; color: var(--muted); }
.joinurl { font-size: 3.4vw; font-weight: 700; color: var(--accent); margin: 1vh 0 2vh; }
.qr { background: #fff; display: inline-block; padding: 1.2vh; border-radius: 12px; }
.qr img { display: block; image-rendering: pixelated; width: 22vh; height: 22vh; }

.stage-question { font-size: 5vw; font-weight: 800; text-align: center; padding: 4vh 4vw 2vh; }
.bars { display: flex; flex-direction: column; gap: 2.2vh; padding: 0 8vw; }
.bar-row { display: flex; align-items: center; gap: 2vw; }
.bar-label { width: 22vw; font-size: 3vw; font-weight: 700; text-align: right; }
.bar-track { flex: 1; background: rgba(255,255,255,0.07); border-radius: 999px; height: 7vh; overflow: hidden; }
.bar-fill { height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transition: width 420ms cubic-bezier(.2,.8,.2,1); }
.bar-count { width: 7vw; font-size: 3.4vw; font-weight: 800; }
.stage-foot { position: fixed; bottom: 2vh; width: 100%; text-align: center;
  font-size: 1.8vw; color: var(--muted); }
.pill { display: inline-block; padding: .4vh 1.4vw; border-radius: 999px;
  font-size: 1.8vw; font-weight: 700; }
.pill.open { background: rgba(55,214,122,0.15); color: var(--ok); }
.pill.closed { background: rgba(255,91,91,0.15); color: var(--bad); }

/* ---- phone (operator + participant) ---- */
.pad { max-width: 560px; margin: 0 auto; padding: 1.2rem; }
h1 { font-size: 1.7rem; margin: .2rem 0 1rem; }
.btnrow { display: flex; flex-direction: column; gap: .8rem; margin: 1rem 0; }
button.big { font-size: 1.3rem; font-weight: 700; padding: 1.1rem; border: none;
  border-radius: 16px; color: #fff; background: linear-gradient(135deg, var(--accent), #3a6bff);
  cursor: pointer; width: 100%; }
button.big:active { transform: scale(0.98); }
button.ghost { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); }
button.danger { background: linear-gradient(135deg, #ff6b6b, #d64545); }
.row { display: flex; gap: .6rem; }
.row button { flex: 1; }
.opt { font-size: 1.5rem; font-weight: 800; padding: 1.6rem; border-radius: 20px;
  border: 2px solid transparent; }
.opt.picked { outline: 4px solid var(--ok); }
.tag { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.status { font-size: 1.1rem; margin: 1rem 0; }
.conn { position: fixed; top: 0; left: 0; right: 0; text-align: center; font-size: .8rem;
  padding: .25rem; color: #fff; }
.conn.ok { display: none; }
.conn.bad { background: var(--bad); }

/* ---- photowall ---- */
.pw-stage { position: fixed; top:0; right:0; bottom:0; left:0; background: #000; }
.pw-img { position: absolute; top:0; right:0; bottom:0; left:0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transition: opacity 700ms ease; }
.pw-img.show { opacity: 1; }
.pw-badge { position: fixed; top: 4vh; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff;
  padding: 1vh 3vw; border-radius: 999px; font-size: 2.4vw; font-weight: 800; }
.pw-empty { position: fixed; top:0; right:0; bottom:0; left:0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1rem; }
.pw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: .6rem 0; }
.pw-thumb { aspect-ratio: 4/3; border: none; border-radius: 12px; background-size: cover;
  background-position: center; position: relative; cursor: pointer; color: #fff; min-height: 90px; }
.pw-thumb.active { outline: 4px solid var(--ok); }
.pw-thumb span { position: absolute; left: .3rem; bottom: .3rem; background: rgba(0,0,0,.6);
  padding: .1rem .4rem; border-radius: 6px; font-size: .8rem; font-weight: 700; }

/* ---- editable fields (operator) ---- */
.edit-input { width: 100%; font-size: 1.1rem; padding: .7rem .8rem; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); color: var(--fg);
  margin-bottom: .4rem; }
.edit-input:focus { outline: 2px solid var(--accent); }
.opt-edit { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .6rem; }
.opt-erow { display: flex; gap: .4rem; align-items: center; }
.opt-erow .edit-input { margin-bottom: 0; }
.opt-del { flex: 0 0 auto; width: 44px; height: 44px; border: none; border-radius: 12px;
  background: rgba(255,91,91,0.2); color: var(--bad); font-size: 1.1rem; cursor: pointer; }
.preset-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.preset { padding: .5rem .8rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.15);
  background: rgba(91,140,255,0.15); color: var(--fg); font-weight: 600; cursor: pointer; }

/* ---- dice ---- */
.dice-stage { min-height: 100vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4vh; text-align: center; padding: 3vh; }
.dice-prompt { font-size: 7vw; font-weight: 800; }
.dice-sub { font-size: 2vw; }
.dice-faces-row { display: flex; gap: 4vw; }
.dice-event { font-size: 5.5vw; font-weight: 800; max-width: 85vw; line-height: 1.1; }
.die { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  width: 14vh; height: 14vh; padding: 1.4vh; gap: .6vh; background: #fff; border-radius: 2.4vh;
  box-shadow: 0 1vh 4vh rgba(0,0,0,0.4); }
.die i { display: block; border-radius: 50%; }
.die i.on { background: #11131f; }
.die.ghost { opacity: .35; width: 10vh; height: 10vh; }
.die.big { width: 30vh; height: 30vh; border-radius: 4vh; }
.pop { animation: pop 500ms cubic-bezier(.2,1.3,.4,1) both; }
@keyframes pop { 0% { transform: scale(.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.dice-edit { display: flex; flex-direction: column; gap: .5rem; margin: .6rem 0; }
.dice-erow { display: flex; gap: .5rem; align-items: center; }
.dice-erow.revealed { outline: 2px solid var(--ok); border-radius: 14px; padding: .2rem; }
.dice-num { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg,var(--accent),var(--accent2));
  color: #fff; font-weight: 800; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; }
.dice-input { flex: 1; font-size: 1rem; padding: .6rem .7rem; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); color: var(--fg); }
.dice-show { flex: 0 0 auto; padding: 0 1rem; height: 44px; border: none; border-radius: 10px;
  background: linear-gradient(135deg,var(--accent),#3a6bff); color: #fff; font-weight: 700; cursor: pointer; }

/* ---- quiz (stage) ---- */
.quiz-stage { min-height: 100vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3vh; text-align: center; padding: 4vh; }
.quiz-sub { font-size: 2.4vw; color: var(--muted); }
.quiz-q { font-size: 5vw; font-weight: 800; max-width: 90vw; line-height: 1.1; }
.qpanels { display: flex; gap: 3vw; width: 86vw; }
.qpanel { flex: 1; background: rgba(255,255,255,0.05); border: 2px solid rgba(255,255,255,0.08);
  border-radius: 3vh; padding: 3vh 2vw; display: flex; flex-direction: column; align-items: center; gap: 1.6vh; }
.qpanel.pa .qletter { background: linear-gradient(135deg, var(--accent2), #d64590); }  /* A = pink */
.qpanel.pb .qletter { background: linear-gradient(135deg, var(--accent), #3a6bff); }  /* B = blue */
.qpanel.couple { border-color: var(--ok); box-shadow: 0 0 6vh rgba(55,214,122,0.3); }
.qletter { width: 9vh; height: 9vh; border-radius: 50%; color: #fff; font-size: 5vh; font-weight: 800;
  display: flex; align-items: center; justify-content: center; }
.qlabel { font-size: 3vw; font-weight: 700; }
.qbarwrap { width: 100%; height: 3vh; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; }
.qbar { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent2));
  transition: width 600ms cubic-bezier(.2,.8,.2,1); }
.qcount { font-size: 2.6vw; font-weight: 800; }
.qcouple { font-size: 2vw; font-weight: 800; color: var(--ok); }
.quiz-foot { font-size: 2.4vw; color: var(--muted); margin-top: 2vh; }
.score-list { display: flex; flex-direction: column; gap: 1.4vh; width: 60vw; }
.score-row { display: flex; align-items: center; gap: 2vw; background: rgba(255,255,255,0.05);
  border-radius: 2vh; padding: 1.6vh 3vw; font-size: 3vw; }
.score-rank { font-weight: 800; color: var(--accent); width: 4vw; }
.score-name { flex: 1; text-align: left; font-weight: 700; }
.score-pts { font-weight: 800; }
/* quiz (operator editor) */
.quiz-edit { display: flex; flex-direction: column; gap: .8rem; margin: .6rem 0; }
.quiz-qedit { background: rgba(255,255,255,0.04); border-radius: 14px; padding: .7rem; }
.quiz-qhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: .3rem; }

/* ---- dice (stage, v2: options -> shuffle -> roll -> reveal) ---- */
/* NB: no flexbox gap here (Chrome 84); grid-gap + margins only. */
.d2-stage { min-height: 100vh; width: 100%; overflow: hidden; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 3vh 4vw; }
.d2-head { margin-bottom: 3vh; }
.d2-title { font-size: 6vw; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.d2-sub { font-size: 2.2vw; color: var(--muted); margin-top: 1vh; }
.d2-dice-row { margin-bottom: 3vh; }
.d2-dice-row .die, .d2-head .die, .d2-hero .die { display: inline-grid; margin: 0 2vw; }
.d2-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 2.4vh 2vw; width: 90vw; }
.d2-card { position: relative; min-height: 22vh; padding: 2.4vh 1.6vw; border-radius: 2.4vh;
  background: rgba(255,255,255,0.06); border: 2px solid rgba(255,255,255,0.10);
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.d2-text { font-size: 2.3vw; font-weight: 700; line-height: 1.15; }
.d2-card.back { background: linear-gradient(135deg, #262b5c, #171a3a); border-color: rgba(255,255,255,0.14); }
.d2-q { font-size: 7vh; font-weight: 800; color: rgba(255,255,255,0.35); }
.d2-face { margin-bottom: 1.4vh; }
.die.mini { width: 7vh; height: 7vh; padding: .7vh; gap: .3vh; border-radius: 1.2vh; box-shadow: none; }
.d2-card.in { animation: d2in 500ms cubic-bezier(.2,1.2,.4,1) both; }
@keyframes d2in { 0% { transform: translateY(4vh) scale(.92); opacity: 0; } 100% { transform: none; opacity: 1; } }
.d2-grid.shuffling .d2-card { animation: d2shuffle 1200ms ease-in-out infinite; }
@keyframes d2shuffle {
  0%   { transform: none; }
  25%  { transform: translate(7vw, -4vh) rotate(7deg) scale(.9); }
  50%  { transform: translate(-6vw, 5vh) rotate(-6deg) scale(.95); }
  75%  { transform: translate(4vw, 3vh) rotate(4deg) scale(.9); }
  100% { transform: none; }
}
.d2-card.show { animation: d2flip 550ms cubic-bezier(.2,1.2,.4,1) both; background: rgba(255,255,255,0.08); }
@keyframes d2flip { 0% { transform: scale(.6) rotate(-6deg); opacity: .2; } 100% { transform: none; opacity: 1; } }
.d2-card.win { border-color: var(--ok); background: rgba(55,214,122,0.16); box-shadow: 0 0 5vh rgba(55,214,122,0.35); }
.d2-hero { margin-bottom: 3vh; }
.d2-hero .die { margin-bottom: 2vh; }
.d2-grid.small .d2-card { min-height: 11vh; padding: 1.2vh 1vw; }
.d2-grid.small .d2-text { font-size: 1.5vw; }
.d2-grid.small .die.mini { width: 4.5vh; height: 4.5vh; padding: .45vh; gap: .2vh; }
.d2-grid.small .d2-face { margin-bottom: .6vh; }
/* dice (operator) */
.dice-mode { display: flex; margin: .4rem 0 .6rem; }
.mbtn { flex: 1; padding: .7rem; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06);
  color: var(--muted); font-weight: 700; font-size: 1rem; cursor: pointer; }
.mbtn:first-child { border-radius: 12px 0 0 12px; }
.mbtn:last-child { border-radius: 0 12px 12px 0; }
.mbtn.on { background: linear-gradient(135deg,var(--accent),#3a6bff); color: #fff; border-color: transparent; }
.mbtn.rig.on { background: linear-gradient(135deg,var(--accent2),#d64590); }
.dice-list { margin: .4rem 0; padding-left: 1.2rem; text-align: left; }
.dice-list li { padding: .25rem 0; }
.secret { background: rgba(255,91,167,0.08); border: 1px dashed rgba(255,91,167,0.4); border-radius: 14px;
  padding: .6rem; margin: .6rem 0; }
.secret-head { font-size: .85rem; color: var(--accent2); font-weight: 700; margin-bottom: .4rem; }
.srow { display: flex; align-items: center; padding: .3rem 0; border-radius: 10px; }
.srow > * + * { margin-left: .5rem; }
.srow.win { outline: 2px solid var(--ok); padding: .3rem; }
.sbadge { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 9px; background: rgba(255,255,255,0.1);
  font-weight: 800; display: flex; align-items: center; justify-content: center; }
.stext { flex: 1; font-size: .95rem; text-align: left; }
.dice-sel { flex: 0 0 auto; width: 56px; height: 40px; border-radius: 9px; font-size: 1.1rem; font-weight: 800;
  text-align: center; border: 1px solid rgba(255,255,255,0.2); background: #1c2048; color: var(--fg); }
.winbtn { flex: 0 0 auto; height: 36px; padding: 0 .7rem; border: none; border-radius: 9px;
  background: rgba(255,255,255,0.12); color: var(--fg); font-weight: 700; cursor: pointer; }
.winbtn.on { background: var(--ok); color: #06230f; }
.dice-rollrow { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: .4rem; margin: .3rem 0 .6rem; }
.rbtn { height: 56px; border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; background: rgba(255,255,255,0.06);
  color: var(--fg); font-size: 1.4rem; font-weight: 800; cursor: pointer; }
.rbtn.on { background: linear-gradient(135deg,var(--accent),#3a6bff); border-color: transparent; color: #fff; }

/* ---- operator PIN lock ---- */
.pin { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 2rem; }
.pin-dots { display: flex; margin: 1rem 0 1.5rem; }
.pin-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--muted); margin: 0 .4rem; }
.pin-dot.on { background: var(--fg); border-color: var(--fg); }
.pin-pad { display: grid; grid-template-columns: repeat(2, 96px); grid-gap: .8rem; }
.pin-pad button { height: 76px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06); color: var(--fg); font-size: 1.8rem; font-weight: 800; cursor: pointer; }
.pin-pad button.wide { grid-column: span 2; height: 52px; font-size: 1rem; font-weight: 600; color: var(--muted); }
.pin-err { color: var(--bad); min-height: 1.4em; margin-top: 1rem; }

/* ---- quiz v2 (two acts) ---- */
/* stage */
.quiz-stage .joinbox { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px; padding: 3vh 4vw; margin: 2vh 0; }
.quiz-count { font-size: 3vw; font-weight: 800; margin-top: 1vh; }
/* operator */
.qz-table { width: 100%; border-collapse: collapse; font-size: .85rem; margin: .4rem 0 .8rem; }
.qz-table td { padding: .35rem .25rem; border-bottom: 1px solid rgba(255,255,255,0.06); vertical-align: top; }
.qz-table td.i { color: var(--muted); width: 1.6rem; }
.qz-table td.n { text-align: right; white-space: nowrap; font-weight: 700; }
.qz-table tr.cur td { background: rgba(91,140,255,0.12); }
.qz-more { margin: .8rem 0; }
.qz-more summary { cursor: pointer; }
button.big[disabled] { opacity: .35; }
/* participant */
.qz-dots { display: flex; flex-wrap: wrap; margin: .4rem 0 .8rem; }
.qz-dot { display: block; width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.15);
  margin: 0 6px 6px 0; }
.qz-dot.on { background: var(--accent); }
.qz-dot.cur { box-shadow: 0 0 0 2px #fff; }
.qz-opt { text-align: left; }
.qz-opt.picked, .qz-skip.picked { box-shadow: 0 0 0 3px var(--ok); }
.qz-skip { width: 100%; margin-top: .2rem; }
.qz-nav { display: flex; margin-top: 1rem; }
.qz-nav button { flex: 1; }
.qz-nav button + button { margin-left: .6rem; }
.qz-sum { list-style: none; padding: 0; margin: .6rem 0; }
.qz-sum li { display: flex; justify-content: space-between; align-items: center; padding: .7rem .8rem;
  background: rgba(255,255,255,0.05); border-radius: 12px; margin-bottom: .5rem; cursor: pointer; }
.qz-sum li span + span { margin-left: .8rem; white-space: nowrap; }
.qz-sum .ans { color: var(--ok); font-weight: 700; }
.qz-sum .skip { color: var(--muted); }
/* Chromium 73 ignores flexbox gap: space quiz-stage children with margins instead */
.quiz-stage { overflow: hidden; width: 100%; }
.quiz-stage > * + * { margin-top: 3vh; }
.quiz-stage.collect .big-title { font-size: 6.5vw; line-height: 1.05; }
.quiz-stage.collect .joinbox { margin: 1vh 0; }

/* ---- standup ("Alla som … ställer sig upp") ---- */
.su-stage { position: relative; min-height: 100vh; width: 100%; overflow: hidden; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 4vh 6vw; }
.su-pre { font-size: 3.5vw; color: var(--muted); font-weight: 700; }
.su-text { font-size: 7vw; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; max-width: 90vw;
  margin: 3vh 0; background: linear-gradient(90deg, #fff, #c9d4ff); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }
.su-post { font-size: 4vw; font-weight: 800; color: var(--accent2); }
.su-count { position: absolute; right: 3vw; bottom: 3vh; font-size: 2vw; color: var(--muted); }
/* operator */
.su-edit { display: flex; flex-direction: column; margin: .6rem 0; }
.su-erow { display: flex; align-items: center; margin-bottom: .5rem; }
.su-erow > * + * { margin-left: .4rem; }
.su-mini { flex: 0 0 auto; width: 38px; height: 40px; border: 1px solid rgba(255,255,255,0.15); border-radius: 9px;
  background: rgba(255,255,255,0.06); color: var(--fg); font-size: 1rem; cursor: pointer; }
.su-mini[disabled] { opacity: .3; }
.su-mini.del { color: var(--bad); }
.su-cur { font-size: 1.3rem; margin: .8rem 0; }
.su-list { list-style: none; padding: 0; margin: .4rem 0; }
.su-list li { padding: .6rem .7rem; border-radius: 10px; background: rgba(255,255,255,0.05); margin-bottom: .4rem; cursor: pointer; }
.su-list li.cur { background: rgba(91,140,255,0.2); }

/* standby personalisation */
.standby-welcome { font-size: 3vw; color: var(--accent2); font-weight: 700; margin-top: -1vh; }
.standby-date { font-size: 3.2vw; font-weight: 700; letter-spacing: .12em; color: var(--fg); opacity: .85; margin-top: -1.5vh; }
.standby-date + .standby-welcome { margin-top: 0; }
/* standby rows: real spacing (flex gap is ignored by Chromium 73) */
.standby > * + * { margin-top: 4.5vh; }
.standby .standby-date { margin-top: 1.5vh; }
.standby .standby-welcome { margin-top: 2.5vh; }
.standby .joinbox { margin-top: 5vh; }
/* join box: the QR is the only way in - make it the hero */
.joinbox .joinlabel { margin-bottom: 1.5vh; }
.joinbox .qr img { width: 32vh; height: 32vh; }
.joinbox.big .qr img { width: 46vh; height: 46vh; }
.joinbox.big { padding: 2.5vh 5vw; }
.standby .big-title { font-size: 7vw; }
.standby .standby-date { font-size: 2.6vw; }
.standby .standby-welcome { font-size: 2.6vw; }
.standby > * + * { margin-top: 2.5vh; }
.standby .joinbox { margin-top: 3.5vh; }

/* ---- operator Wi-Fi panel ---- */
.wifi { margin: .8rem 0; }
.wifi summary { cursor: pointer; }
.wifi-list { list-style: none; padding: 0; margin: .6rem 0; }
.wifi-list li { display: flex; justify-content: space-between; align-items: center; padding: .7rem .8rem;
  background: rgba(255,255,255,0.05); border-radius: 12px; margin-bottom: .4rem; cursor: pointer; }
.wifi-list li.on { outline: 2px solid var(--ok); }
.wifi-list li.pick { background: rgba(91,140,255,0.2); }
.wifi-list li.wifi-join { flex-direction: column; align-items: stretch; cursor: default; background: none; padding: 0 0 .4rem; }
.wifi-list li.wifi-join .edit-input { margin-bottom: .5rem; }
.wifi-list .sig { color: var(--muted); font-size: .85rem; white-space: nowrap; margin-left: .6rem; }
.wifi-known { display: flex; flex-wrap: wrap; margin: .3rem 0 .6rem; }
.chip { background: rgba(255,255,255,0.08); border-radius: 999px; padding: .35rem .8rem; margin: 0 .4rem .4rem 0; font-size: .9rem; }
.chip a { color: var(--bad); cursor: pointer; margin-left: .3rem; }
/* photowall: which camera took it */
.pw-cam { position: fixed; right: 3vw; bottom: 3vh; background: rgba(0,0,0,0.55); color: #fff;
  font-size: 2.2vw; font-weight: 700; padding: .8vh 1.6vw; border-radius: 1.6vh; }
/* photowall: blurred screen-filling copy behind 4:3 photos (no black bars) */
.pw-bg { position: absolute; top: -6%; right: -6%; bottom: -6%; left: -6%; width: 112%; height: 112%;
  object-fit: cover; filter: blur(28px) brightness(0.55); opacity: 0; transition: opacity 900ms ease; }
.pw-bg.show { opacity: 1; }
.pw-img { filter: drop-shadow(0 0 3vh rgba(0,0,0,0.6)); }

/* ---- stagequiz (frågor som bara visas på scenen) ---- */
.sq-stage { position: relative; min-height: 100vh; width: 100%; overflow: hidden; display: flex;
  flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4vh 6vw; }
.sq-count { font-size: 3vw; color: var(--muted); font-weight: 700; margin-bottom: 3vh; }
.sq-text { font-size: 6.5vw; font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; max-width: 92vw;
  background: linear-gradient(90deg, #fff, #c9d4ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.sq-sub { font-size: 2.4vw; color: var(--muted); margin-top: 3vh; }
/* ready-made question packs (operator) */
.qz-presets { display: flex; flex-wrap: wrap; margin: .2rem 0 .8rem; }
.chip-btn { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: var(--fg);
  border-radius: 999px; padding: .5rem .9rem; margin: 0 .4rem .4rem 0; font-size: .9rem; font-weight: 600; cursor: pointer; }
.chip-btn:active { transform: scale(0.97); }
/* the TV never scrolls: a view that is a few pixels too tall must clip, not scrollbar */
body.stage { overflow: hidden; }
.chip-btn.save { background: linear-gradient(135deg,var(--accent),#3a6bff); border-color: transparent; }

/* quiz collect: guests only - the couple must not read the questions */
.quiz-stage.collect > * + * { margin-top: 2vh; }
.quiz-stage.collect .big-title { font-size: 6vw; }
.qz-warn { border: .4vh solid var(--bad); border-radius: 2.4vh; padding: 1.4vh 4vw; }
.qz-stop { font-size: 4.4vw; font-weight: 800; color: var(--bad); line-height: 1; letter-spacing: .02em; }
.qz-ban { font-size: 2.8vw; font-weight: 800; margin-top: .6vh; }
.qz-only { font-size: 2.2vw; color: var(--muted); margin-top: .3vh; }
.quiz-stage.collect .quiz-count { font-size: 2.2vw; }
/* no header on the collect screen - give the warning and the QR the room */
.quiz-stage.collect .qz-warn { padding: 2.2vh 5vw; }
.quiz-stage.collect .qz-stop { font-size: 5.4vw; }
.quiz-stage.collect .qz-ban { font-size: 3.4vw; }
.quiz-stage.collect .qz-only { font-size: 2.6vw; }
.quiz-stage.collect .joinbox .qr img { width: 42vh; height: 42vh; }
.quiz-stage.collect > * + * { margin-top: 4vh; }
/* reorder controls in the quiz editor */
.qz-ord { display: flex; align-items: center; }
.qz-ord > * + * { margin-left: .35rem; }

/* presets: one row each - rename, load, save over */
.pk-list { display: flex; flex-direction: column; margin: .2rem 0 .9rem; }
.pk-row { display: flex; align-items: center; margin-bottom: .4rem; }
.pk-row > * + * { margin-left: .4rem; }
.pk-row .dice-input { flex: 1; min-width: 0; }
.pk-btn { flex: 0 0 auto; height: 40px; padding: 0 .7rem; border: 1px solid rgba(255,255,255,0.15);
  border-radius: 9px; background: rgba(255,255,255,0.06); color: var(--fg); font-weight: 700;
  font-size: .85rem; white-space: nowrap; cursor: pointer; }
.pk-btn.save { background: linear-gradient(135deg,var(--accent),#3a6bff); border-color: transparent; }
.pk-btn:active { transform: scale(0.97); }

/* ---- camera offload bar: bottom strip over every view (stage + operator) ---- */
.pb-imports { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  pointer-events: none; display: flex; flex-direction: column; }
.pb-imp { position: relative; overflow: hidden; background: rgba(0,0,0,0.78);
  border-top: 1px solid rgba(255,255,255,0.12); }
.pb-imp-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0;
  background: var(--accent); opacity: 0.6; transition: width .6s ease; }
.pb-imp.done .pb-imp-fill { background: var(--ok); }
.pb-imp.pulled .pb-imp-fill { background: var(--bad); }
.pb-imp-text { position: relative; padding: 0 16px; line-height: 34px; font-size: 15px;
  font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage .pb-imp-text { padding: 0 2vw; line-height: 4.4vh; font-size: 2.2vh; }