/* DevDay phone app — a faithful Slido participant look (see research/slido.md), then some magic. */

:root {
  --accent: #198038;
  --accent-hover: #14662D;
  --accent-0: #24A148;
  --accent-rgb: 25, 128, 56;
  --header-bg: #13612B;
  --nav-bg: rgba(0, 0, 0, .32);
  --nav-inset: inset 0 0 8px rgba(0, 0, 0, .16);
  --text-01: #1A1A1A;
  --text-02: #525252;
  --text-03: #6F6F6F;
  --ui-03: #E5E5E5;
  --ui-05: #F4F4F4;
  --ui-06: #FBFBFB;
  --grey-bar: #C6C6C6;
  --danger: #B02B2B;
  --shadow-card: 0 4px 16px rgba(0, 0, 0, .08), 0 1px 4px rgba(0, 0, 0, .08);
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --font: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
  overscroll-behavior-y: none;
  background: #fff;
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  font: 400 14px/21px var(--font);
  color: var(--text-01);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-user-select: none; user-select: none; touch-action: manipulation; -webkit-touch-callout: none; }
button:focus { outline: none; }
button:focus-visible { outline: 2px solid #1A73E8; outline-offset: 2px; }
svg { display: block; }
.ic { width: 16px; height: 16px; flex: none; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ shell */
#app { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }

.hdr {
  background: var(--header-bg);
  color: #fff;
  padding: var(--sat) calc(16px + var(--sar)) 0 calc(16px + var(--sal));
  position: relative;
  z-index: 5;
  transition: background-color .6s ease;
}
.hdr-row1 { padding: 16px 0 8px; height: 64px; }
.room {
  width: 100%; height: 40px; border-radius: 8px; padding: 0 12px;
  display: flex; align-items: center; gap: 8px;
  background: var(--nav-bg); box-shadow: var(--nav-inset);
  font: 500 14px/16px var(--font); color: #fff; text-align: left;
  transition: background-color .15s;
}
.room:active { background: rgba(0, 0, 0, .48); }
.room-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdr-row2 { height: 64px; display: flex; align-items: center; gap: 16px; }
.iconbtn {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none;
  transition: background-color .15s;
}
.iconbtn:active { background: rgba(0, 0, 0, .32); }
.iconbtn .ic { width: 24px; height: 24px; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; background: #F4F4F4; color: var(--text-03);
  display: grid; place-items: center; flex: none;
}
.tabs {
  flex: 1; min-width: 0; height: 48px; padding: 4px; border-radius: 12px;
  background: var(--nav-bg); box-shadow: var(--nav-inset);
  display: flex; position: relative;
}
.tab-ind {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  border-radius: 8px; background: var(--accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08), 0 4px 16px rgba(0, 0, 0, .08);
  transition: transform .25s var(--ease), background-color .6s ease;
}
.tabs[data-tab="polls"] .tab-ind { transform: translateX(100%); }
.tab {
  flex: 1; min-width: 0; height: 40px; border-radius: 8px; position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 8px;
  font: 500 14px/16px var(--font); color: #fff; white-space: nowrap;
}
.tab:active:not([aria-selected="true"]) { background: rgba(0, 0, 0, .16); }
.tab .lbl { display: inline-block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tab-dot {
  position: absolute; top: 7px; right: 10px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-0); box-shadow: 0 0 0 2px var(--header-bg);
  transform: scale(0); transition: transform .2s var(--ease);
}
.tab-dot.on { transform: scale(1); }

main {
  flex: 1; display: flex; flex-direction: column;
  padding: 16px calc(12px + var(--sar)) 0 calc(12px + var(--sal));
}
.pane { flex: 1; display: flex; flex-direction: column; }
.pane[hidden] { display: none; }
.view { flex: 1; display: flex; flex-direction: column; animation: viewIn .28s var(--ease) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

footer.ftr { padding: 24px 14px calc(24px + var(--sab)); text-align: center; }
.wordmark {
  display: inline-block; font: 700 25px/20px var(--font); letter-spacing: -.035em; color: var(--accent);
  padding-bottom: 2px;
}
.ftr-links { margin-top: 6px; font-size: 11px; line-height: 14px; color: var(--text-03); }
.ftr-links span + span::before { content: "\2013"; margin: 0 5px; }

/* ------------------------------------------------------------------ empty states */
.empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 16px; text-align: center; min-height: 300px;
}
.empty .big { width: 56px; height: 56px; color: var(--text-03); margin-bottom: 16px; }
.empty h2 { margin: 0; font: 500 16px/24px var(--font); letter-spacing: -.176px; color: var(--text-03); }
.empty p { margin: 8px 0 0; color: var(--text-03); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 12px 16px; border-radius: 8px;
  background: var(--accent); color: #fff; font: 500 14px/16px var(--font);
  transition: background-color .15s, opacity .2s, transform .1s;
}
.btn:active { background: var(--accent-hover); }
.empty .btn { margin-top: 24px; }

/* ------------------------------------------------------------------ Q&A */
.composer {
  position: relative; min-height: 80px; border: 1px solid var(--ui-03); border-radius: 12px;
  background: #fff; box-shadow: var(--shadow-card); display: block; width: 100%; text-align: left;
}
.composer .avatar { position: absolute; left: 16px; top: 24px; width: 32px; height: 32px; }
.composer textarea {
  display: block; width: 100%; min-height: 78px; resize: none; border: 0; outline: 0; background: transparent;
  font: 400 16px/24px var(--font); color: var(--text-01); padding: 28px 24px 12px 68px; border-radius: 12px;
}
.composer textarea::placeholder { color: var(--text-03); }
.composer-actions { display: none; justify-content: flex-end; gap: 8px; padding: 0 12px 12px; }
.composer.open .composer-actions { display: flex; }
.composer.open textarea { min-height: 110px; }
.qa-bar { display: flex; align-items: center; padding: 16px 0 8px; }
.sortsel {
  height: 32px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--ui-03); font: 500 12px/16px var(--font);
}
.qa-count { margin-left: auto; display: flex; gap: 4px; align-items: center; color: var(--text-02); }
.qa-list { display: flex; flex-direction: column; gap: 8px; }
.qcard { border: 1px solid var(--ui-03); border-radius: 12px; padding: 16px; background: #fff; animation: viewIn .3s var(--ease) both; }
.qhead { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.qhead .avatar { width: 32px; height: 32px; }
.qauthor { font: 600 14px/16px var(--font); margin-bottom: 2px; }
.qdate { font: 400 12px/14px var(--font); color: var(--text-02); }
.qtext { font: 400 16px/24px var(--font); white-space: pre-wrap; overflow-wrap: anywhere; }
.qpending { margin-top: 12px; font-size: 12px; line-height: 16px; color: var(--text-02); display: flex; gap: 6px; align-items: center; }

/* ------------------------------------------------------------------ poll */
.poll { padding: 0 4px; }
.poll-head { display: flex; align-items: flex-start; gap: 12px; margin: 8px 0 16px; }
.poll-q { flex: 1; margin: 0; font: 600 16px/24px var(--font); letter-spacing: -.011em; overflow-wrap: anywhere; }
.pcount { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; vertical-align: top; color: var(--text-02); font: 400 14px/24px var(--font); letter-spacing: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pcount .ic { width: 16px; height: 16px; }
.opts { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; }
.opt {
  --c: var(--accent);
  width: 100%; min-height: 48px; border-radius: 8px; background: var(--ui-05);
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-align: left;
  font: 400 16px/22px var(--font); color: var(--text-01);
  transition: background-color .15s ease, color .15s ease, transform .12s ease;
}
.opt:active { transform: scale(.985); }
.opt .lbl { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.radio {
  width: 20px; height: 20px; border-radius: 50%; flex: none; position: relative;
  box-shadow: inset 0 0 0 2px var(--c); transition: box-shadow .15s ease;
}
.radio::after {
  content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #fff;
  transform: scale(0); transition: transform .18s var(--ease);
}
.opt[aria-checked="true"] { background: var(--c); color: #fff; }
.opt[aria-checked="true"] .radio { box-shadow: inset 0 0 0 2px #fff; }
.opt[aria-checked="true"] .radio::after { transform: scale(1); }
/* colour poll: the radio becomes a swatch */
.opt.swatch .radio { background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.opt.swatch[aria-checked="true"] .radio { background: #fff; box-shadow: none; }
.opt.swatch[aria-checked="true"] .radio::after { background: var(--c); }

.send-row { display: flex; flex-direction: column; align-items: center; margin-top: 16px; gap: 16px; }
.pill {
  height: 40px; padding: 0 24px; border-radius: 999px; background: var(--accent); color: #fff;
  font: 500 14px/16px var(--font); display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background-color .15s, opacity .2s, transform .1s;
}
.pill:active { background: var(--accent-hover); transform: scale(.97); }
.pill[disabled] { opacity: .4; pointer-events: none; }
.pill.ghost { background: #fff; color: var(--text-01); box-shadow: inset 0 0 0 1px var(--ui-03); }
.pill.ghost:active { background: var(--ui-05); }
.pill .spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: spin .7s linear infinite; }
.voting-as { color: var(--text-01); }
.voting-as u { text-underline-offset: 2px; }

.results { border: 1px solid var(--ui-03); border-radius: 12px; padding: 16px 20px; display: flex; flex-direction: column; gap: 16px; }
.res-lbl { font: 400 14px/20px var(--font); margin-bottom: 6px; overflow-wrap: anywhere; }
.res-row { display: flex; align-items: center; gap: 8px; height: 16px; }
.res-bar {
  --p: 0; flex: none; height: 12px; border-radius: 6px; background: var(--grey-bar);
  width: calc((100% - 76px) * var(--p)); transition: width .6s var(--ease), background-color .3s;
}
.res-bar.some { min-width: 12px; }
.res-bar:not(.some) { margin-right: -8px; }
.res-bar.lead { background: var(--accent); }
.res-pct { font: 400 14px/16px var(--font); color: var(--text-02); font-variant-numeric: tabular-nums; }
.res-me { width: 16px; height: 16px; border-radius: 50%; background: var(--ui-05); color: var(--text-03); display: grid; place-items: center; }
.res-me .ic { width: 10px; height: 10px; }
.results.pending .res-bar { background: linear-gradient(90deg, #eee, #f6f6f6, #eee); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; --p: .5 !important; }
.results.pending .res-pct { visibility: hidden; }

/* ------------------------------------------------------------------ snackbar / banner */
.toasts { position: fixed; left: 0; right: 0; bottom: calc(16px + var(--sab)); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 60; pointer-events: none; padding: 0 16px; }
.toast {
  background: #1A1A1A; color: #fff; border-radius: 8px; padding: 12px 16px; max-width: 360px;
  font: 400 14px/20px var(--font); display: flex; align-items: center; gap: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .2); animation: toastIn .3s var(--ease) both;
}
.toast .ic { color: #42BE65; }
.toast.out { animation: toastOut .25s ease both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px); } }

.netbanner {
  position: fixed; left: 50%; top: calc(var(--sat) + 136px); z-index: 70;
  transform: translate(-50%, -8px); opacity: 0; pointer-events: none;
  background: rgba(26, 26, 26, .92); color: #fff; border-radius: 999px; padding: 6px 14px 6px 10px;
  font: 500 13px/18px var(--font); display: flex; align-items: center; gap: 8px;
  transition: opacity .25s, transform .25s var(--ease);
}
.netbanner.on { opacity: 1; transform: translate(-50%, 0); }
.netbanner .spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .3); border-top-color: #fff; animation: spin .8s linear infinite; }
.game-on .netbanner { top: calc(var(--sat) + 10px); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ------------------------------------------------------------------ drawer (hamburger) */
.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 80; opacity: 0; transition: opacity .2s; }
.scrim.on { opacity: 1; }
.drawer {
  position: fixed; top: 0; bottom: 0; left: 0; width: min(320px, 84vw); background: #fff; z-index: 81;
  transform: translateX(-100%); transition: transform .25s var(--ease);
  padding: calc(var(--sat) + 24px) 0 var(--sab); display: flex; flex-direction: column;
  box-shadow: 0 0 24px rgba(0, 0, 0, .2);
}
.drawer.on { transform: none; }
.drawer h3 { margin: 0 24px 4px; font: 600 18px/24px var(--font); }
.drawer .code { margin: 0 24px 16px; color: var(--text-02); }
.drawer button { display: flex; align-items: center; gap: 16px; width: 100%; padding: 14px 24px; text-align: left; font-size: 16px; line-height: 20px; }
.drawer button:active { background: var(--ui-05); }
.drawer hr { border: 0; border-top: 1px solid var(--ui-03); margin: 8px 0; }
.drawer .spacer { flex: 1; }
.drawer .ftr { padding-bottom: 24px; }

/* ------------------------------------------------------------------ powers (controls) */
.powers { display: flex; flex-direction: column; gap: 12px; padding-bottom: 8px; }
.pcard {
  border: 1px solid var(--ui-03); border-radius: 12px; background: #fff; padding: 16px; position: relative;
  overflow: hidden; isolation: isolate;
}
.pcard-head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.pcard-icon {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: rgba(var(--accent-rgb), .12); color: var(--accent); font-size: 20px; line-height: 1;
}
.pcard-icon .ic { width: 20px; height: 20px; }
.pcard-title { font: 600 16px/22px var(--font); letter-spacing: -.011em; }
.pcard-sub { font: 400 13px/18px var(--font); color: var(--text-02); }
.pcard .live {
  margin-left: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px;
  border-radius: 999px; background: rgba(var(--accent-rgb), .1); color: var(--accent); font: 600 11px/22px var(--font); letter-spacing: .02em;
  text-transform: uppercase; opacity: 0; transition: opacity .3s;
}
.pcard .live.on { opacity: 1; }
.pcard .live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }

/* new-power reveal */
.pcard.locked > :not(.lockface) { visibility: hidden; }
.lockface {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: repeating-linear-gradient(-45deg, #fafafa 0 10px, #f3f3f3 10px 20px); color: var(--text-03); z-index: 3;
  font: 500 14px/20px var(--font); border-radius: 12px;
}
.lockface .ic { width: 28px; height: 28px; }
.lockface .lk { transition: transform .3s var(--ease); }
.pcard.unlocking { animation: cardGlitch .6s steps(1) both; }
.pcard.unlocking .lockface .lk { animation: lockPop .6s var(--ease) both; }
.pcard.revealing .lockface { animation: faceOut .7s var(--ease) both; }
.pcard.revealing::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .85) 45%, rgba(170, 255, 200, .5) 50%, transparent 65%);
  transform: translateX(-100%); animation: sweep .9s .15s var(--ease) both;
}
@keyframes sweep { to { transform: translateX(100%); } }
@keyframes faceOut { from { clip-path: circle(150% at 50% 50%); } to { clip-path: circle(0% at 50% 50%); } }
@keyframes lockPop {
  0% { transform: none; } 30% { transform: rotate(-12deg) scale(1.1); } 55% { transform: rotate(10deg) scale(1.15); }
  80% { transform: translateY(-6px) scale(1.3); } 100% { transform: translateY(-4px) scale(1.2); }
}
@keyframes cardGlitch {
  0%, 100% { transform: none; filter: none; }
  10% { transform: translateX(-2px); filter: drop-shadow(3px 0 0 rgba(255, 0, 110, .75)) drop-shadow(-3px 0 0 rgba(0, 229, 255, .75)); }
  25% { transform: translateX(2px); filter: drop-shadow(-4px 0 0 rgba(255, 0, 110, .6)) drop-shadow(4px 0 0 rgba(0, 229, 255, .6)) hue-rotate(60deg); }
  40% { transform: none; filter: none; }
  55% { transform: translateX(-1px); filter: drop-shadow(2px 0 0 rgba(255, 214, 0, .7)) drop-shadow(-2px 0 0 rgba(124, 92, 255, .7)); }
  70% { transform: none; filter: hue-rotate(-40deg) saturate(1.6); }
  85% { filter: none; }
}
.spark {
  position: absolute; z-index: 6; pointer-events: none; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; background: var(--c, #ffd54f); box-shadow: 0 0 8px var(--c, #ffd54f);
}

/* colour power */
.swatches { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sw {
  --c: #888; height: 76px; border-radius: 12px; background: var(--c); color: #fff; position: relative;
  display: flex; align-items: flex-end; padding: 10px 12px; font: 600 14px/18px var(--font); text-align: left;
  box-shadow: inset 0 -40px 40px -20px rgba(0, 0, 0, .18); transition: transform .15s var(--ease), box-shadow .2s;
}
.sw:active { transform: scale(.96); }
.sw .chk {
  position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: var(--c);
  display: grid; place-items: center; transform: scale(0); transition: transform .2s var(--ease);
}
.sw .chk .ic { width: 14px; height: 14px; }
.sw[aria-checked="true"] { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--c), inset 0 -40px 40px -20px rgba(0, 0, 0, .18); }
.sw[aria-checked="true"] .chk { transform: scale(1); }
.mini-res { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin-top: 14px; background: var(--ui-05); gap: 2px; }
.mini-res i { display: block; height: 100%; transition: flex-grow .6s var(--ease); flex: 0 1 0; min-width: 0; }
.mini-res:empty, .mini-res.off { display: none; }

/* language power */
.langs { display: flex; flex-direction: column; gap: 8px; }
.langs .opt { min-height: 52px; }
.flag { font-size: 22px; line-height: 1; width: 24px; text-align: center; flex: none; }

/* reaction power */
.reacts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; position: relative; }
.rx {
  aspect-ratio: 1; border-radius: 14px; background: var(--ui-05); font-size: 30px; line-height: 1;
  display: grid; place-items: center; position: relative; transition: background-color .15s;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.rx:active { background: #ebebeb; }
.rx.pop { animation: rxPop .32s var(--ease); }
@keyframes rxPop { 0% { transform: scale(1); } 35% { transform: scale(.86); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
.rx-combo {
  position: absolute; right: 16px; top: 16px; font: 700 14px/20px var(--font); color: var(--accent);
  opacity: 0; transform: scale(.8); transition: opacity .2s, transform .2s var(--ease); font-variant-numeric: tabular-nums;
}
.rx-combo.on { opacity: 1; transform: scale(1); }
.floater {
  position: fixed; z-index: 90; pointer-events: none; font-size: 34px; line-height: 1; margin: -17px 0 0 -17px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; will-change: transform, opacity;
}

/* lights power */
.night {
  border-radius: 12px; overflow: hidden; position: relative; background: #0d1633; aspect-ratio: 16 / 11;
  cursor: pointer;
}
.night svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.night .win-lit { opacity: 0; transition: opacity .25s; }
.night.on .win-lit { opacity: 1; }
.night.flicker .win-lit { animation: flicker .9s steps(1) both; }
@keyframes flicker { 0% { opacity: 1; } 12% { opacity: 0; } 22% { opacity: 1; } 30% { opacity: .2; } 42% { opacity: 1; } 50% { opacity: .5; } 60%, 100% { opacity: 1; } }
.night .glow { opacity: 0; transition: opacity .6s; }
.night .hint { animation: hint 1.6s ease-in-out infinite; transform-origin: 160px 119px; transform-box: view-box; }
.night.on .hint { display: none; }
@keyframes hint { 0%, 100% { opacity: .25; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
.night.on .glow { opacity: 1; }
.night .slotlbl {
  position: absolute; left: 12px; top: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .12);
  color: #fff; font: 600 12px/16px var(--font); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .3s;
}
.night.on .slotlbl { opacity: 1; }
.lights-row { display: flex; align-items: center; justify-content: center; margin-top: 14px; }
.pill.lamp.on { background: #2b2b2b; }

/* single-purpose modes fill the screen */
.solo { flex: 1; display: flex; flex-direction: column; }
.solo .pcard { flex: 1; display: flex; flex-direction: column; }
.solo .reacts { flex: 1; grid-template-columns: repeat(2, 1fr); align-content: stretch; }
.solo .rx { aspect-ratio: auto; min-height: 64px; font-size: 52px; }
.solo .night { aspect-ratio: auto; flex: 1; min-height: 280px; }

/* "Powers" header magic once something is unlocked */
.magic .hdr { background: linear-gradient(115deg, #13612B 0%, #13612B 38%, #1f7d43 50%, #13612B 62%, #13612B 100%); background-size: 300% 100%; animation: sheen 6s ease-in-out infinite; }
@keyframes sheen { 0% { background-position: 100% 0; } 50% { background-position: 0 0; } 100% { background-position: 100% 0; } }

/* ------------------------------------------------------------------ glitch: an overlay, never the layout
   The page itself never moves, clips or overflows (that is what produced white slabs and scrollbars).
   Glitches are RGB-split slices that shift the hue of what is underneath (backdrop-filter), scanline
   tears and a few colour blocks blended with `difference`, so they read on white and on dusk alike. */
html, body { overflow-x: hidden; overflow-x: clip; }
.fx { position: fixed; inset: 0; z-index: 95; pointer-events: none; overflow: hidden; display: none; contain: strict; }
.fx.on { display: block; }
.gx-slice {
  position: absolute; left: 0; right: 0; opacity: 0;
  -webkit-backdrop-filter: hue-rotate(var(--hue)) saturate(2.4) contrast(1.2);
  backdrop-filter: hue-rotate(var(--hue)) saturate(2.4) contrast(1.2);
  background: linear-gradient(90deg, rgba(255, 0, 110, .10), rgba(124, 92, 255, .08) 50%, rgba(0, 229, 255, .10));
  box-shadow: 0 -1px 0 rgba(255, 0, 110, .55), 0 1px 0 rgba(0, 229, 255, .55);
  animation: gxSlice 240ms steps(2, jump-none) both;
}
@keyframes gxSlice { 0% { opacity: 1; transform: translateX(var(--dx)); } 60% { opacity: 1; transform: translateX(calc(var(--dx) * -.5)); } 100% { opacity: 0; transform: none; } }
.gx-block {
  position: absolute; opacity: 0; mix-blend-mode: difference; background: rgba(255, 0, 110, .75);
  box-shadow: 5px 0 0 rgba(0, 229, 255, .75), -5px 0 0 rgba(255, 214, 0, .55);
  animation: gxBlink 180ms steps(1, jump-none) both;
}
.gx-tear {
  position: absolute; left: 0; right: 0; height: 4px; opacity: 0; mix-blend-mode: difference;
  background: repeating-linear-gradient(90deg, rgba(255, 0, 110, .8) 0 14px, rgba(0, 229, 255, .8) 14px 30px, transparent 30px 44px);
  animation: gxBlink 140ms steps(1, jump-none) both;
}
@keyframes gxBlink { 0%, 99% { opacity: 1; } 100% { opacity: 0; } }

/* ------------------------------------------------------------------ game takeover */
#game-root { position: fixed; inset: 0; z-index: 50; display: none; background: #000; color: #fff; overflow: hidden; }
.game-on #game-root { display: block; }
.game-on #app { visibility: hidden; }
.takeover {
  position: fixed; inset: 0; z-index: 55; background: #000; color: #33ff88; pointer-events: none;
  font: 500 14px/20px ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  padding: calc(var(--sat) + 28px) 24px 24px; opacity: 0;
}
.takeover.on { opacity: 1; }
.takeover.out { opacity: 0; transition: opacity .35s ease; }
.takeover .line { white-space: pre; overflow: hidden; }
.takeover .cur { display: inline-block; width: 8px; height: 16px; background: currentColor; vertical-align: -3px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
body.melt { background: #10143a; }
:root:has(body.melt) { background: #10143a; }
.melt #app { animation: melt .55s cubic-bezier(.6, 0, .9, .4) both; transform-origin: 50% 0; }
@keyframes melt {
  0% { transform: none; filter: none; }
  30% { transform: scaleY(1.02) skewX(2deg); filter: hue-rotate(120deg) saturate(3); }
  60% { transform: scaleY(.4) translateY(30%); filter: brightness(2) blur(1px); }
  100% { transform: scaleY(.002) translateY(50vh); filter: brightness(4) blur(2px); }
}

.getready {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  text-align: center; padding: 24px; background: radial-gradient(120% 80% at 50% 30%, #1d2b64 0%, #0b0f26 60%, #05060f 100%);
  font-family: var(--font);
}
.getready .bot { font-size: 72px; line-height: 1; animation: bob 1.6s ease-in-out infinite; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.getready h2 { margin: 0; font: 700 28px/32px var(--font); letter-spacing: -.02em; }
.getready p { margin: 0; color: rgba(255, 255, 255, .7); font-size: 15px; line-height: 22px; max-width: 280px; }
.getready .dots { display: flex; gap: 8px; }
.getready .dots i { width: 8px; height: 8px; border-radius: 50%; background: #7cf0b0; animation: pulse 1.2s ease-in-out infinite; }
.getready .dots i:nth-child(2) { animation-delay: .2s; }
.getready .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes bob { 50% { transform: translateY(-10px) rotate(-4deg); } }

/* ------------------------------------------------------------------ end */
.endv { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px 12px; gap: 6px; }
.endv .check {
  width: 72px; height: 72px; border-radius: 50%; background: rgba(var(--accent-rgb), .12); color: var(--accent);
  display: grid; place-items: center; margin-bottom: 12px; animation: popIn .5s var(--ease) both;
}
.endv .check .ic { width: 36px; height: 36px; }
.endv h2 { margin: 0; font: 600 20px/28px var(--font); letter-spacing: -.017em; }
.endv .sub { color: var(--text-02); font-size: 14px; }
.endv .quote {
  margin-top: 20px; border: 1px solid var(--ui-03); border-radius: 12px; padding: 18px 20px; text-align: left; width: 100%; max-width: 380px;
  font: 600 17px/24px var(--font); letter-spacing: -.011em; box-shadow: var(--shadow-card);
}
.endv .quote small { display: block; margin-top: 10px; font: 400 13px/18px var(--font); color: var(--text-02); letter-spacing: 0; }
.endv .stats { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.endv .stat { padding: 6px 12px; border-radius: 999px; background: var(--ui-05); font: 500 13px/18px var(--font); color: var(--text-02); }
@keyframes popIn { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* ------------------------------------------------------------------ motion & wide screens */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .fx { display: none !important; }
  .melt #app, .pcard.unlocking { animation: none !important; }
  .magic .hdr { animation: none; }
}
@media (min-width: 600px) {
  main, .hdr-inner { max-width: 600px; width: 100%; margin: 0 auto; }
}

/* ================================================================== gradual takeover (lv0 … lv5) */
.wordmark i { font-style: normal; display: inline-block; }

/* lv2+: a die-cut sticker slapped onto the Slido header */
.hdr-sticker {
  position: absolute; z-index: 4; line-height: 1; pointer-events: none; opacity: 0;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  filter: drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff) drop-shadow(0 3px 3px rgba(0, 0, 0, .35));
}
.hdr-sticker.s1 { font-size: 30px; top: calc(var(--sat) + 3px); right: calc(52px + var(--sar)); transform: rotate(-14deg); }
.hdr-sticker.s2 { font-size: 20px; top: calc(var(--sat) + 66px); right: calc(6px + var(--sar)); transform: rotate(12deg); }
.lvx .hdr-sticker.s1 { animation: slap .55s cubic-bezier(.2, 1.6, .4, 1) .15s both; }
.lv3 .hdr-sticker.s2, .lv4 .hdr-sticker.s2, .lv5 .hdr-sticker.s2 { animation: slap2 .5s cubic-bezier(.2, 1.6, .4, 1) 1.2s both; }
@keyframes slap { 0% { opacity: 0; transform: scale(2.4) rotate(-50deg); } 60% { opacity: 1; transform: scale(.88) rotate(-10deg); } 100% { opacity: 1; transform: scale(1) rotate(-14deg); } }
@keyframes slap2 { 0% { opacity: 0; transform: scale(2.4) rotate(40deg); } 60% { opacity: 1; transform: scale(.9) rotate(8deg); } 100% { opacity: 1; transform: scale(1) rotate(12deg); } }

/* lv2: stickers module lives under the header; the Slido content peels away */
#st-root {
  position: fixed; left: 0; right: 0; bottom: 0; top: var(--hdr-h, 128px); z-index: 40; display: none;
  overflow: hidden; background: #fff; overscroll-behavior: none; touch-action: manipulation;
}
.st-on #st-root { display: block; animation: viewIn .3s var(--ease) both; }
.st-on main, .st-on footer.ftr { visibility: hidden; }
.peel main, .peel footer.ftr { animation: peelAway .52s cubic-bezier(.6, 0, .4, 1) both; transform-origin: 100% 0; }
@keyframes peelAway { 0% { transform: none; opacity: 1; } 35% { transform: rotate(-3deg) translate(-2%, 2%); } 100% { transform: rotate(-14deg) translate(-40%, 60%); opacity: 0; } }
.st-wait { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; }
.st-wait h2 { margin: 8px 0 0; font: 700 22px/28px var(--font); letter-spacing: -.02em; }
.st-wait p { margin: 0; color: var(--text-02); }
.st-wait .dots { display: flex; gap: 8px; margin-top: 6px; }
.st-wait .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
.st-wait .dots i:nth-child(2) { animation-delay: .2s; } .st-wait .dots i:nth-child(3) { animation-delay: .4s; }
.st-sheet { display: grid; grid-template-columns: repeat(3, 64px); gap: 10px; padding: 14px; border-radius: 18px; background: #f4f4f4; box-shadow: inset 0 0 0 2px #e5e5e5; transform: rotate(-3deg); }
.st-sheet i {
  font-style: normal; font-size: 40px; line-height: 64px; text-align: center;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 3px 3px rgba(0, 0, 0, .25));
  animation: wiggle 2.4s ease-in-out infinite;
}
.st-sheet i:nth-child(2n) { animation-delay: -.6s; } .st-sheet i:nth-child(3n) { animation-delay: -1.2s; }
@keyframes wiggle { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) translateY(-3px); } }

/* lv3: the header drifts and glitches into the stage's dusk palette (peach → coral → magenta → indigo) */
.hdr::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, #ffc386 0%, #f2906f 20%, #e2687a 38%, #b8457f 58%, #6f5aa8 78%, #2a2a66 100%);
  background-size: 220% 100%; transition: opacity 2.6s ease;
}
.hdr > * { position: relative; z-index: 1; }
.hdr > .hdr-sticker { position: absolute; z-index: 4; }
.lv3 .hdr::before, .lv4 .hdr::before, .lv5 .hdr::before { opacity: 1; animation: duskDrift 12s ease-in-out infinite alternate; }
@keyframes duskDrift { from { background-position: 0% 0; } to { background-position: 100% 0; } }
.lv3 .hdr { animation: hdrGlitch 6.5s steps(1, jump-none) 2.6s infinite; }
@keyframes hdrGlitch {
  0%, 87% { filter: none; }
  88% { filter: drop-shadow(4px 0 0 rgba(255, 0, 110, .7)) drop-shadow(-4px 0 0 rgba(0, 229, 255, .7)); }
  89% { filter: drop-shadow(-3px 0 0 rgba(255, 214, 0, .6)) drop-shadow(3px 0 0 rgba(124, 92, 255, .7)) hue-rotate(30deg); }
  90% { filter: none; }
  92% { filter: hue-rotate(-24deg) saturate(1.4); }
  93%, 100% { filter: none; }
}
.hdr::after {
  content: ""; position: absolute; left: 0; right: 0; top: 40%; height: 6px; z-index: 3; pointer-events: none; opacity: 0;
  background: repeating-linear-gradient(90deg, rgba(255, 0, 110, .7) 0 18px, rgba(0, 229, 255, .7) 18px 36px, transparent 36px 52px);
  mix-blend-mode: screen;
}
.lv3 .hdr::after { animation: hdrTear 6.5s steps(1, jump-none) 2.6s infinite; }
@keyframes hdrTear { 0%, 87% { opacity: 0; } 88% { opacity: 1; top: 28%; } 89% { opacity: 1; top: 63%; height: 3px; } 90%, 100% { opacity: 0; } }
.lv3 .room, .lv3 .tabs { background: rgba(24, 12, 48, .26); }
.lv3 .tab-ind { background: rgba(42, 42, 102, .92); }
:root:has(body.lv3) { background: #10143a; }
body.lv3 { background: #10143a; }
.lv3 #app { background: linear-gradient(180deg, #2a2a66 0%, #1c1f52 50%, #10143a 100%); }
.lv3 main { color: #fff; }
.lv3 .empty h2 { color: #fff; }
.lv3 .empty p, .lv3 .empty .big { color: rgba(255, 255, 255, .7); }
.lv3 .pcard { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: #fff; }
.lv3 .pcard-sub { color: rgba(255, 255, 255, .72); }
.lv3 .pcard-icon { background: rgba(255, 195, 134, .16); }
.lv3 .night { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 20px 60px -20px rgba(226, 104, 122, .55); }
.lv3 .pill.lamp { background: linear-gradient(100deg, #ffc386, #e2687a 55%, #b8457f); color: #1b1240; }
.lv3 .pill.lamp.on { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.lv3 .wordmark i { animation: letterBob 2.6s ease-in-out infinite; }
.lv3 .wordmark i:nth-child(1) { color: #ffc386; animation-delay: 0s; }
.lv3 .wordmark i:nth-child(2) { color: #f2906f; animation-delay: -.3s; }
.lv3 .wordmark i:nth-child(3) { color: #e2687a; animation-delay: -.6s; }
.lv3 .wordmark i:nth-child(4) { color: #d06aa8; animation-delay: -.9s; }
.lv3 .wordmark i:nth-child(5) { color: #9d8cff; animation-delay: -1.2s; }
@keyframes letterBob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-6deg); } }

/* idle page once the app has started misbehaving */
.empty.idle .idle-e { font-size: 56px; line-height: 1; margin-bottom: 16px; animation: bob 2.2s ease-in-out infinite; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.empty.idle h2 { color: var(--text-01); font-weight: 600; }
.lv3 .empty.idle h2 { color: #fff; }

/* light up the city: make "my window" unmistakable */
.night .slot {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%) scale(.85); z-index: 2;
  display: flex; flex-direction: column; align-items: center; padding: 6px 16px 8px; border-radius: 14px;
  background: rgba(10, 14, 40, .58); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff;
  opacity: 0; transition: opacity .3s, transform .3s var(--ease); pointer-events: none;
}
.night.has-slot .slot { opacity: 1; transform: translateX(-50%); }
.night .slot-k { font: 700 10px/12px var(--font); letter-spacing: .14em; text-transform: uppercase; color: #ffc386; }
.night .slot-n { font: 800 32px/34px var(--font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.night.slotpop .slot { animation: slotPop .7s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes slotPop { 0% { transform: translateX(-50%) scale(.6); } 60% { transform: translateX(-50%) scale(1.18); } 100% { transform: translateX(-50%) scale(1); } }
.night .tap-hint {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2; pointer-events: none; white-space: nowrap;
  padding: 5px 12px; border-radius: 999px; background: rgba(255, 210, 122, .16); color: #ffd27a;
  font: 700 11px/14px var(--font); letter-spacing: .12em; text-transform: uppercase; animation: pulse 1.6s ease-in-out infinite;
}
.night.on .tap-hint, .night.has-slot .tap-hint { display: none; }
.night .slotlbl { display: none; }
.night.flickoff .win-lit { animation: flickoff .45s steps(1) both; }
@keyframes flickoff { 0% { opacity: 1; } 25% { opacity: 0; } 40% { opacity: .8; } 55%, 100% { opacity: 0; } }
.night.nope { animation: nope .3s ease; }
@keyframes nope { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.lights-status { text-align: center; margin: 12px 4px 0; min-height: 20px; font-size: 14px; line-height: 20px; color: var(--text-02); }
.lv3 .lights-status { color: rgba(255, 255, 255, .82); }
.solo .lights-row { margin-top: 10px; }

/* lv4: game terminal in dusk colours */
.takeover { color: #ffc386; background: #10143a; }

/* lv5: thank-you in the takeover style */
@font-face { font-family: "DD Display"; src: url(/stage/game/fonts/lilita-one.woff2) format("woff2"); font-display: swap; }
.end-on #app { visibility: hidden; }
.endx {
  position: fixed; inset: 0; z-index: 60; overflow: hidden; color: #fff; display: flex; align-items: center; justify-content: center;
  padding: calc(var(--sat) + 24px) calc(20px + var(--sar)) calc(var(--sab) + 24px) calc(20px + var(--sal));
  animation: endIn .7s var(--ease) both;
}
@keyframes endIn { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
.endx-sky {
  position: absolute; inset: -20%; z-index: 0;
  background: linear-gradient(170deg, #ffc386 0%, #f2906f 18%, #e2687a 34%, #b8457f 52%, #6f5aa8 70%, #2a2a66 86%, #10143a 100%);
}
@keyframes skyDrift { from { transform: translateY(-4%) rotate(-2deg); } to { transform: translateY(4%) rotate(2deg); } }
.endx-confetti { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.endx-confetti i {
  position: absolute; top: -10%; left: var(--x); font-style: normal; font-size: calc(22px * var(--s)); opacity: .9;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  opacity: 0; animation: fall 3.4s cubic-bezier(.3, .1, .6, 1) var(--d) 1 both;
}
@keyframes fall { 0% { opacity: 1; transform: translateY(0) rotate(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(120vh) rotate(var(--r, 360deg)); } }
.endx-card { position: relative; z-index: 2; max-width: 420px; width: 100%; text-align: center; }
.endx-kicker { font: 700 12px/16px var(--font); letter-spacing: .18em; text-transform: uppercase; color: #fff4e6; opacity: .9; }
.endx-prize { margin: 10px auto 0; display: inline-block; padding: 8px 14px; border-radius: 999px; background: #ffd27a; color: #1d1b4b; font: 800 15px/1.2 var(--font); box-shadow: 0 3px 0 #2a2a66; }
.endx-prize b { letter-spacing: .06em; }
.endx h1 {
  margin: 6px 0 14px; font: 400 64px/1 "DD Display", var(--font); letter-spacing: .01em; color: #fff;
  -webkit-text-stroke: 3px #2a2a66; paint-order: stroke fill; text-shadow: 0 5px 0 #2a2a66; transform: rotate(-4deg);
  animation: endPop .8s cubic-bezier(.2, 1.6, .4, 1) .2s both;
}
@keyframes endPop { from { transform: rotate(-4deg) scale(.3); opacity: 0; } to { transform: rotate(-4deg) scale(1); opacity: 1; } }
.endx-quote {
  margin: 0 auto; padding: 18px 20px; border-radius: 18px; background: rgba(16, 20, 58, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font: 700 21px/28px var(--font); letter-spacing: -.015em; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.endx h1 { font-size: clamp(44px, 14vw, 58px); line-height: .98; }
.endx-by {
  margin: 4px auto 0; padding: 16px 18px 18px; border-radius: 18px; background: rgba(16, 20, 58, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.endx-by p { margin: 0; font: 700 21px/28px var(--font); letter-spacing: -.015em; }
.endx-by p a { color: #fff; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.endx-links { margin-top: 14px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.endx-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: #fff; color: #1d1b4b; font: 700 15px/1 var(--font); text-decoration: none; box-shadow: 0 3px 0 #2a2a66;
}
.endx-link:active { transform: translateY(2px); box-shadow: 0 1px 0 #2a2a66; }
.endx-link svg { width: 16px; height: 16px; }
.endx-in { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 4px; background: #0a66c2; color: #fff; font: 800 13px/1 var(--font); }
/* X + LinkedIn on the feedback card too (hidden while typing: the keyboard needs the room) */
.fbx-by { margin-top: 22px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; font: 600 14px/1 var(--font); color: rgba(255, 255, 255, .78); }
.endx-link.sm { min-height: 36px; padding: 0 12px; gap: 6px; font-size: 14px; }
.endx-link.sm .endx-in { width: 17px; height: 17px; font-size: 11px; }
.fbx.typing .fbx-by { display: none; }
.endx-ps { margin: 16px 0 0; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, .86); }
.endx-thanks {
  display: inline-block; margin: 0 0 14px; padding: 7px 14px; border-radius: 999px; background: #fff; color: #1d1b4b;
  font: 800 14px/18px var(--font); box-shadow: 0 3px 0 #2a2a66; animation: thanksPop .6s cubic-bezier(.2, 1.6, .4, 1) .5s both;
}
@keyframes thanksPop { from { transform: rotate(3deg) scale(.4); opacity: 0; } to { transform: rotate(-2deg) scale(1); opacity: 1; } }

/* lv5, first: the feedback card ("How was it?") on the same sky; scrolls if the keyboard leaves too little room */
.fbx {
  position: absolute; inset: 0; z-index: 2; display: flex; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--sat) + 20px) calc(20px + var(--sar)) calc(var(--sab) + 20px) calc(20px + var(--sal));
  animation: viewIn .45s var(--ease) both;
}
.fbx.out { animation: fbOut .22s ease both; pointer-events: none; }
@keyframes fbOut { to { opacity: 0; transform: scale(.96); } }
.fbx-card { margin: auto; width: 100%; max-width: 420px; text-align: center; }
.fbx.typing .fbx-card { margin-top: 0; }
.fbx.typing .endx-kicker { display: none; }
.fbx-h {
  margin: 6px 0 18px; font: 400 clamp(44px, 14vw, 58px)/.98 "DD Display", var(--font); letter-spacing: .01em; color: #fff;
  -webkit-text-stroke: 3px #2a2a66; paint-order: stroke fill; text-shadow: 0 5px 0 #2a2a66; transform: rotate(-4deg);
  animation: endPop .8s cubic-bezier(.2, 1.6, .4, 1) .1s both; transition: font-size .25s var(--ease), margin .25s var(--ease);
}
.fbx.typing .fbx-h { font-size: 34px; margin: 0 0 10px; }
.fbx-stars { display: flex; justify-content: center; gap: 4px; }
.fbx-star { flex: 0 1 62px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 16px; }
.fbx-star svg {
  width: 84%; height: 84%; overflow: visible; fill: rgba(255, 255, 255, .16); stroke: rgba(255, 255, 255, .9);
  stroke-width: 1.7; stroke-linejoin: round; transition: fill .15s, stroke .15s, filter .15s;
}
.fbx-star.on svg { fill: #ffd27a; stroke: #2a2a66; filter: drop-shadow(0 3px 0 #2a2a66); }
.fbx-word { min-height: 28px; margin-top: 4px; font: 700 18px/28px var(--font); letter-spacing: -.01em; color: rgba(255, 255, 255, .62); }
.fbx-word.on { color: #fff; }
.fbx-box {
  display: block; margin-top: 14px; padding: 14px 16px 8px; border-radius: 18px; text-align: left; cursor: text;
  background: rgba(16, 20, 58, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); transition: box-shadow .15s;
}
.fbx-box:focus-within { box-shadow: inset 0 0 0 2px #ffd27a; }
.fbx-lbl { display: block; font: 700 17px/22px var(--font); letter-spacing: -.01em; color: #fff; }
.fbx-box textarea {
  display: block; width: 100%; min-height: 66px; margin: 6px 0 0; padding: 0; border: 0; outline: 0; resize: none;
  background: transparent; color: #fff; caret-color: #ffd27a; font: 400 16px/22px var(--font); -webkit-appearance: none; appearance: none;
}
.fbx-box textarea::placeholder { color: rgba(255, 255, 255, .5); }
.fbx-count { display: block; min-height: 16px; text-align: right; font: 500 12px/16px var(--font); color: rgba(255, 255, 255, .62); font-variant-numeric: tabular-nums; }
.fbx-err { margin: 12px 0 0; padding: 8px 12px; border-radius: 12px; background: rgba(16, 20, 58, .7); color: #ffd27a; font: 600 14px/20px var(--font); }
.fbx-send {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; margin-top: 16px;
  border-radius: 999px; background: #fff; color: #1d1b4b; font: 800 18px/1 var(--font); box-shadow: 0 4px 0 #2a2a66;
  transition: opacity .2s, transform .1s, box-shadow .1s;
}
.fbx-send:active { transform: translateY(3px); box-shadow: 0 1px 0 #2a2a66; }
.fbx-send[disabled] { opacity: .5; pointer-events: none; }
.fbx-send.busy { pointer-events: none; }
.fbx-send .spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(29, 27, 75, .22); border-top-color: #1d1b4b; animation: spin .7s linear infinite; }
/* Skip: the same pill as Send, outlined instead of filled */
.fbx-skip {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; margin-top: 12px;
  border-radius: 999px; background: transparent; color: #fff; font: 800 18px/1 var(--font);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85); transition: transform .1s, background .1s;
}
.fbx-skip:active { transform: translateY(2px); background: rgba(255, 255, 255, .1); }

@media (prefers-reduced-motion: reduce) {
  .lv3 .hdr, .lv3 .wordmark i, .endx-confetti i, .endx-sky { animation: none !important; }
  .lvx .hdr-sticker.s1, .lv3 .hdr-sticker.s2 { opacity: 1; }
}

/* fireworks module: lives under the dusk header, like stickers */
#fw-root {
  position: fixed; left: 0; right: 0; bottom: 0; top: var(--hdr-h, 128px); z-index: 40; display: none;
  overflow: hidden; overscroll-behavior: none; touch-action: manipulation; color: #fff;
  background: linear-gradient(180deg, #2a2a66 0%, #1c1f52 50%, #10143a 100%);
}
.fw-on #fw-root { display: block; animation: viewIn .35s var(--ease) both; }
.fw-on main, .fw-on footer.ftr { visibility: hidden; }
.fw-wait { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; }
.fw-wait h2 { margin: 10px 0 0; font: 700 22px/28px var(--font); letter-spacing: -.02em; }
.fw-wait p { margin: 0; color: rgba(255, 255, 255, .75); max-width: 280px; }
.fw-burst { position: relative; width: 140px; height: 140px; }
.fw-burst i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); animation: fwRay 1.6s cubic-bezier(.2, .7, .2, 1) infinite; transform: rotate(var(--a)) translateY(0); }
@keyframes fwRay { 0% { transform: rotate(var(--a)) translateY(0) scale(1); opacity: 1; } 70% { opacity: 1; } 100% { transform: rotate(var(--a)) translateY(-64px) scale(.3); opacity: 0; } }

/* same phone, another tab: step aside calmly */
.othertab { position: fixed; inset: 0; z-index: 99; display: grid; place-items: center; padding: 24px; background: rgba(16, 20, 58, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.othertab-card { max-width: 320px; background: #fff; color: var(--text-01); border-radius: 16px; padding: 20px; text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.othertab-card b { font: 600 17px/22px var(--font); }
.othertab-card span { color: var(--text-02); }
.othertab-card .pill { margin-top: 8px; }

/* colour choices dressed as the slide takeover they trigger (see stage/screen/template.js) */
.sw { overflow: hidden; isolation: isolate; align-items: flex-end; }
.sw .tk-lbl { position: relative; z-index: 2; }
.sw .chk { z-index: 3; }
.sw .tk-deco { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.sw .tk-deco i { position: absolute; font-style: normal; }
.sw.tk-classic { background: linear-gradient(180deg, #fbfcff, #e6ebff); color: #1f3fb0; font: 700 15px/18px Tahoma, Verdana, "DejaVu Sans", sans-serif; box-shadow: inset 0 0 0 2px #c6d0fb; }
.sw.tk-classic .bar { left: 0; right: 0; top: 0; height: 14px; background: linear-gradient(90deg, #2f54c9, #6a88f2); }
.sw.tk-classic .sq { right: 12px; bottom: 12px; width: 7px; height: 7px; background: #2f54c9; box-shadow: -11px 0 0 #8ea2f0, -22px 0 0 #c6d0fb; }
.sw.tk-bubblegum {
  color: #fff; font: 800 16px/19px ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif; text-shadow: 0 3px 0 #a3005f;
  background: radial-gradient(circle, rgba(255, 255, 255, .28) 0 3px, transparent 3.5px) 0 0 / 22px 22px,
    radial-gradient(circle, rgba(255, 255, 255, .16) 0 2px, transparent 2.5px) 11px 11px / 22px 22px,
    linear-gradient(160deg, #ff2f9e 0%, #ff5fb8 48%, #ff8fcf 100%);
}
.sw.tk-bubblegum .tk-deco i { color: #fff; font-size: 14px; text-shadow: none; animation: twinkle 1.8s ease-in-out infinite; }
.sw.tk-bubblegum .tk-deco i:nth-child(2n) { color: #fff35c; animation-delay: -.9s; }
@keyframes twinkle { 50% { transform: scale(.6) rotate(20deg); opacity: .5; } }
.sw.tk-matrix { background: radial-gradient(ellipse at 50% 40%, #04160a, #000 75%); color: #6dff94; font: 700 15px/18px "Courier New", Courier, monospace; text-shadow: 0 0 8px rgba(67, 255, 116, .75); }
.sw.tk-matrix .tk-lbl::before { content: "> "; color: #b6ff5a; }
.sw.tk-matrix .tk-lbl::after { content: "_"; color: #b6ff5a; animation: blink 1s steps(1) infinite; }
.sw.tk-matrix .tk-deco i { top: 0; writing-mode: vertical-rl; font: 700 10px/1 "Courier New", Courier, monospace; letter-spacing: 2px; color: #00ff55; opacity: .28; animation: rain 2.8s linear infinite; }
@keyframes rain { from { transform: translateY(-100%); } to { transform: translateY(100%); } }
.sw.tk-sunset { background: linear-gradient(180deg, #3b1a6c 0%, #7d2a86 34%, #d24a6a 66%, #ff9442 100%); color: #fff4dc; font: italic 700 16px/19px Georgia, "Times New Roman", serif; text-shadow: 0 2px 0 rgba(70, 15, 60, .6); }
.sw.tk-sunset .sun { right: -18px; bottom: -34px; width: 92px; height: 92px; border-radius: 50%; opacity: .85;
  background: repeating-linear-gradient(180deg, transparent 0 7px, rgba(125, 42, 134, .6) 7px 9px), radial-gradient(circle, #fff3c2 0%, #ffd36b 42%, rgba(255, 170, 80, .7) 60%, rgba(255, 150, 70, 0) 72%); }
.sw[aria-checked="true"] { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--c); }
.sw.tk-classic[aria-checked="true"] { box-shadow: inset 0 0 0 2px #c6d0fb, 0 0 0 3px #fff, 0 0 0 5px var(--c); }
.sw.tk-classic .chk { background: #2f54c9; color: #fff; }
/* the Slido-styled colour poll keeps its rows; only the swatch dot hints the look */
.opt.swatch.tk-bubblegum .radio { background: radial-gradient(circle, rgba(255, 255, 255, .6) 0 1.5px, transparent 2px) 0 0 / 7px 7px, linear-gradient(160deg, #ff2f9e, #ff8fcf); }
.opt.swatch.tk-matrix .radio { background: radial-gradient(circle at 50% 40%, #0b3d1a, #000); box-shadow: inset 0 0 0 1.5px #43ff74; }
.opt.swatch.tk-sunset .radio { background: linear-gradient(180deg, #3b1a6c, #d24a6a 60%, #ff9442); }