/* ===== Quizzlebop shared styles: brand, background, shapes, accessibility ===== */
@font-face { font-family: "Nunito"; font-weight: 600; font-display: swap; src: url(/fonts/nunito-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 700 800; font-display: swap; src: url(/fonts/nunito-latin-800-normal.woff2) format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 900; font-display: swap; src: url(/fonts/nunito-latin-900-normal.woff2) format("woff2"); }

:root {
  --bg0: #120830; --bg1: #1d0c4a; --bg2: #3a1070; --bg3: #0d2c6e;
  --glass: rgba(255,255,255,.08); --glass-b: rgba(255,255,255,.16);
  --text: #fff; --muted: rgba(255,255,255,.74);
  /* answer colours – chosen to stay distinct for common colour-vision deficiencies; shapes+letters carry meaning too */
  --a0: #e5484d; --a1: #2f6ff0; --a2: #e8a10a; --a3: #12a37a;
  --good: #34e0a1; --bad: #ff5d73; --gold: #ffd54a; --silver: #dbe4ee; --bronze: #e39b5b;
  --brand: linear-gradient(135deg, #8b3dff 0%, #ff3d81 60%, #ff9a3d 100%);
  --radius: 22px;
  --font: "Nunito", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease-pop: cubic-bezier(.2,1.5,.4,1);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; color: var(--text); font-family: var(--font); -webkit-tap-highlight-color: transparent; }
body {
  background: radial-gradient(120% 90% at 15% 0%, #4a138a 0%, transparent 55%),
              radial-gradient(90% 80% at 100% 100%, #0f3a8c 0%, transparent 60%),
              linear-gradient(160deg, var(--bg1), var(--bg0));
  overflow: hidden;
}
#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
/* soft glow orbs */
.blobs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.blobs i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .45; animation: float 22s ease-in-out infinite; will-change: transform; }
.blobs i:nth-child(1){ width: 40vmax; height: 40vmax; background: #ff3d81; left: -12vmax; top: -14vmax; }
.blobs i:nth-child(2){ width: 34vmax; height: 34vmax; background: #3d6bff; right: -10vmax; top: 18vh; animation-delay: -7s; }
.blobs i:nth-child(3){ width: 28vmax; height: 28vmax; background: #ffb020; left: 32vw; bottom: -16vmax; animation-delay: -13s; opacity: .28; }
.blobs i:nth-child(4){ width: 20vmax; height: 20vmax; background: #20e3b2; left: 6vw; bottom: 8vh; animation-delay: -3s; opacity: .22; }
@keyframes float { 0%,100%{ transform: translate(0,0) scale(1);} 33%{ transform: translate(4vw,-3vh) scale(1.08);} 66%{ transform: translate(-3vw,4vh) scale(.95);} }
body.good .blobs i:nth-child(1), body.good .blobs i:nth-child(2) { background: #12c486; }
body.bad .blobs i:nth-child(1), body.bad .blobs i:nth-child(2) { background: #c81e4a; }
.blobs i { transition: background 1s; }

.app { position: relative; z-index: 1; height: 100%; }
.screen { display: none; height: 100%; }
.screen.active { display: flex; animation: screenin .5s cubic-bezier(.2,.9,.3,1) both; }
@keyframes screenin { from { opacity: 0; transform: translateY(16px) scale(.985); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

.glass { background: var(--glass); border: 1px solid var(--glass-b); border-radius: var(--radius);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 24px 60px rgba(6,0,30,.35), inset 0 1px 0 rgba(255,255,255,.12); }

/* Brand */
.brand { display: inline-flex; align-items: center; gap: .3em; }
.brand img { height: 1.15em; width: auto; filter: drop-shadow(0 .06em .12em rgba(0,0,0,.35)); }
.brand img { animation: wobble 6s ease-in-out infinite; transform-origin: 30% 90%; }
@keyframes wobble { 0%,86%,100% { transform: rotate(0); } 90% { transform: rotate(-8deg) scale(1.06); } 94% { transform: rotate(6deg); } }
.logo { font-weight: 900; letter-spacing: -.025em; line-height: 1;
  background: linear-gradient(90deg, #fff 0%, #ffe07a 35%, #ff8ac0 65%, #9fc2ff 100%);
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shine 7s linear infinite; }
@keyframes shine { to { background-position: 200% center; } }

.btn { font: inherit; font-weight: 900; border: 0; border-radius: 999px; padding: .75em 1.7em; cursor: pointer; letter-spacing: .01em;
  color: #1a0b3d; background: linear-gradient(135deg, #ffe066, #ff9d4a); box-shadow: 0 .35em 0 #c4621f, 0 .6em 1.6em rgba(255,157,74,.35);
  transition: transform .15s ease, box-shadow .15s ease, outline-color .15s; outline: 4px solid transparent; outline-offset: 4px; }
.btn:active { transform: translateY(.2em); box-shadow: 0 .15em 0 #c4621f; }
.btn:focus-visible, .btn.focus { outline-color: #fff; transform: scale(1.06); }
.btn.secondary { background: rgba(255,255,255,.14); color: #fff; box-shadow: none; border: 1px solid var(--glass-b); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.icon-btn { font: inherit; display: inline-grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; border: 1px solid var(--glass-b);
  background: rgba(255,255,255,.1); color: #fff; cursor: pointer; font-size: 1em; line-height: 1; outline: 3px solid transparent; outline-offset: 3px; }
.icon-btn:focus-visible { outline-color: #fff; }
.icon-btn[aria-pressed="false"] { opacity: .55; }

/* Answer shapes / colours */
.opt-shape { display: inline-grid; place-items: center; flex: none; position: relative; }
.shape-svg { width: 62%; height: 62%; fill: #fff; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.opt-letter { font-weight: 900; opacity: .9; }
.c0 { --c: var(--a0); --pat: repeating-linear-gradient(45deg, rgba(255,255,255,.0) 0 14px, rgba(255,255,255,.14) 14px 18px); }
.c1 { --c: var(--a1); --pat: repeating-linear-gradient(-45deg, rgba(255,255,255,.0) 0 14px, rgba(255,255,255,.14) 14px 18px); }
.c2 { --c: var(--a2); --pat: radial-gradient(circle, rgba(255,255,255,.18) 2.5px, transparent 3px) 0 0 / 16px 16px; }
.c3 { --c: var(--a3); --pat: repeating-linear-gradient(0deg, rgba(255,255,255,.0) 0 12px, rgba(255,255,255,.14) 12px 16px); }

/* Avatars: emoji on colour ring */
.avatar { display: inline-grid; place-items: center; border-radius: 50%; flex: none; position: relative;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--pc, #888) 55%, #fff), var(--pc, #888)); background-color: var(--pc, #888);
  box-shadow: 0 0 0 .14em rgba(255,255,255,.85), 0 .25em .6em rgba(0,0,0,.3); }
.avatar .em { font-size: .62em; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }

.pill { display: inline-flex; align-items: center; gap: .4em; padding: .3em .9em; border-radius: 999px; background: rgba(255,255,255,.14); font-weight: 800; }
.muted { color: var(--muted); }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
.streak { white-space: nowrap; display: inline-flex; align-items: center; gap: .1em; font-weight: 900; color: #ffb547; text-shadow: 0 0 .5em rgba(255,140,0,.6); }
.streak.hot { animation: flame .8s ease-in-out infinite alternate; }
@keyframes flame { to { transform: scale(1.12) rotate(-4deg); } }

/* ===== High-contrast mode (toggle, or OS preference) ===== */
html.hc body { background: #000; }
html.hc .blobs, html.hc #bg { display: none; }
html.hc .glass { background: #000; border: 2px solid #fff; backdrop-filter: none; box-shadow: none; }
html.hc .logo { background: none; color: #fff; -webkit-background-clip: initial; background-clip: initial; animation: none; }
html.hc { --muted: #e6e6e6; --a0: #ff3b3b; --a1: #3d8bff; --a2: #ffc400; --a3: #00d68f; }
html.hc .option, html.hc .p-opt, html.hc .choice { background-color: var(--c) !important; background-image: var(--pat) !important; border: 4px solid #fff; color: #000 !important; text-shadow: none !important; }
html.hc .option .txt, html.hc .p-opt .txt { color: #000; }
html.hc .option .opt-shape, html.hc .p-opt .opt-shape { background: #000 !important; }
html.hc .pill { background: #000; border: 2px solid #fff; }
@media (prefers-contrast: more) { :root { --muted: #f0f0f0; } .glass { background: rgba(0,0,0,.6); border-color: #fff; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
html.hc .reveal .option.wrong { filter: none; opacity: .55; }

/* ===== Finnish theme: room language FI → blue & white, Finnish-flag inspired (html[data-theme="fi"]) =====
   Answer colours/shapes/patterns are NOT changed (stay colour-blind safe); cards get a white rim for separation on blue. */
html { --theme-t: 1.2s; }
body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity var(--theme-t) ease;
  background: radial-gradient(110% 85% at 12% 0%, #2a6fd6 0%, transparent 55%),
              radial-gradient(90% 80% at 100% 100%, #0a4aa8 0%, transparent 60%),
              linear-gradient(160deg, #0b3576, #04173d); }
html[data-theme="fi"] body::before { opacity: 1; }
html[data-theme="fi"] {
  --brand: linear-gradient(135deg, #0a3f9e 0%, #1f6fe0 55%, #6aa8ff 100%);
  --glass: rgba(255,255,255,.09); --glass-b: rgba(255,255,255,.24);
  --muted: rgba(255,255,255,.82);
}
html[data-theme] .glass { transition: background-color var(--theme-t), border-color var(--theme-t), color var(--theme-t), box-shadow var(--theme-t), filter var(--theme-t); }
html[data-theme="fi"] .blobs i:nth-child(1) { background: #3d86ff; }
html[data-theme="fi"] .blobs i:nth-child(2) { background: #ffffff; opacity: .16; }
html[data-theme="fi"] .blobs i:nth-child(3) { background: #8fc1ff; opacity: .22; }
html[data-theme="fi"] .blobs i:nth-child(4) { background: #0d55c9; opacity: .3; }
html[data-theme="fi"] .logo { background-image: linear-gradient(90deg, #fff 0%, #dcebff 35%, #9cc8ff 65%, #fff 100%); background-size: 200% auto; }
html[data-theme="fi"] .brand img, html[data-theme="fi"] .hero-mark, html[data-theme="fi"] .intro-mark { content: url(/img/logo-mark-fi.svg); }
html[data-theme="fi"] .btn:not(.secondary) { color: #002f6c; background: linear-gradient(135deg, #ffffff, #dcebff); box-shadow: 0 .35em 0 #7fa6db, 0 .6em 1.6em rgba(127,184,255,.35); }
html[data-theme="fi"] .score-row.top1 { background: linear-gradient(90deg, rgba(255,255,255,.34), rgba(255,255,255,.08)); }
html[data-theme="fi"] .score-row { background: rgba(255,255,255,.1); }
html[data-theme="fi"] .pod .block { box-shadow: inset 0 0 0 .4vmin rgba(255,255,255,.7), 0 1.5vmin 4vmin rgba(0,20,60,.45); }
html[data-theme="fi"] .pod.r1 .block { background: linear-gradient(180deg, #ffffff, #b9d6ff); }
html[data-theme="fi"] .pod.r2 .block { background: linear-gradient(180deg, #8fc1ff, #3d86ff); }
html[data-theme="fi"] .pod.r3 .block { background: linear-gradient(180deg, #3d86ff, #0d4fb8); }
html[data-theme="fi"] .pod.r2 .block, html[data-theme="fi"] .pod.r3 .block { color: rgba(255,255,255,.8); }
html[data-theme="fi"] .cat.on { background: linear-gradient(135deg, #1f6fe0, #0a3f9e); box-shadow: 0 4px 14px rgba(31,111,224,.45); border-color: #fff; }
html[data-theme="fi"] .seg button.on { color: #002f6c; }
html[data-theme="fi"] .option, html[data-theme="fi"] .p-opt, html[data-theme="fi"] .choice { outline: .35vmin solid rgba(255,255,255,.75); outline-offset: -.35vmin; }
html[data-theme="fi"] .p-opt, html[data-theme="fi"] .choice { outline-width: 2px; outline-offset: -2px; }
/* high contrast wins over the theme */
html.hc body::before { display: none; }
html.hc[data-theme="fi"] .option, html.hc[data-theme="fi"] .p-opt, html.hc[data-theme="fi"] .choice { outline: none; }
html.hc[data-theme="fi"] .btn:not(.secondary) { background: #fff; color: #000; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { html { --theme-t: 0s; } }