@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&display=swap');
:root { --bg1:#5b2bd6; --bg2:#ff4d8d; --card:#fff; --ink:#24124d; --accent:#ffd23f; --good:#06d6a0; --bad:#ef476f; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; min-height:100%; }
html { background: #c2408f; }
body { font-family: 'Fredoka', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--ink);
  background: linear-gradient(135deg, var(--bg1), var(--bg2)); background-attachment: fixed; min-height: 100vh; }
.wrap { max-width: 560px; margin: 0 auto; padding: 18px 16px 40px; }
h1.logo { color:#fff; text-align:center; font-size: 2.2rem; margin: 8px 0 14px; text-shadow: 0 4px 0 rgba(0,0,0,.18); letter-spacing: .5px; }
.card { background: var(--card); border-radius: 22px; padding: 20px; box-shadow: 0 10px 0 rgba(0,0,0,.15); margin-bottom: 16px; }
label { font-weight: 700; display:block; margin: 6px 0; }
input[type=text] { width:100%; font: inherit; font-size: 1.4rem; padding: 14px 16px; border-radius: 14px; border: 3px solid #d9cff7; outline: none; }
input[type=text]:focus { border-color: var(--bg1); }
input.code { text-transform: uppercase; letter-spacing: 8px; text-align:center; font-weight:700; font-size: 2rem; }
button { font: inherit; font-weight: 700; font-size: 1.3rem; border: 0; border-radius: 16px; padding: 16px 18px; width: 100%;
  background: var(--accent); color: var(--ink); box-shadow: 0 6px 0 rgba(0,0,0,.2); cursor: pointer; margin-top: 12px; transition: transform .05s; }
button:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,.2); }
button:disabled { opacity: .5; }
button.secondary { background: #ece6ff; }
button.choice { background: #fff; border: 3px solid #d9cff7; text-align:left; font-size: 1.25rem; }
button.choice.selected { background: var(--good); border-color: var(--good); color:#fff; }
.err { color: var(--bad); font-weight: 700; min-height: 1.4em; margin-top: 8px; }
.muted { color: #6b5ca5; }
.center { text-align:center; }
.big { font-size: 1.6rem; font-weight: 700; }
.prompt { font-size: 1.5rem; font-weight: 700; line-height: 1.3; }
.timer { display:inline-block; background: var(--ink); color:#fff; border-radius: 999px; padding: 4px 14px; font-weight:700; }
.timer.low { background: var(--bad); animation: pulse 1s infinite; }
@keyframes pulse { 50% { transform: scale(1.1); } }
.pill { display:inline-flex; align-items:center; gap:6px; padding: 8px 14px; border-radius: 999px; color:#fff; font-weight:700; margin: 4px; font-size: 1.1rem; }
.pill.off { opacity: .4; }
.pill.done::after { content: ' ✅'; }
.row { display:flex; justify-content: space-between; align-items:center; gap: 10px; }
.score-row { display:flex; align-items:center; gap: 10px; padding: 10px 12px; border-radius: 14px; margin: 6px 0; color:#fff; font-weight:700; font-size: 1.2rem; }
.score-row .pts { margin-left:auto; font-size: 1.4rem; }
.score-row .plus { background: rgba(255,255,255,.3); border-radius: 999px; padding: 2px 10px; font-size: 1rem; }
.hidden { display:none !important; }
.emoji-big { font-size: 4rem; }
.bounce { animation: bounce 1.2s infinite; display:inline-block; }
@keyframes bounce { 50% { transform: translateY(-10px); } }

/* Host / TV screen */
body.host .wrap { max-width: 1280px; }
body.host { font-size: 1.4rem; }
.host-head { display:flex; justify-content: space-between; align-items:center; color:#fff; }
.host-head .roomcode { background:#fff; color: var(--ink); border-radius: 16px; padding: 6px 18px; font-weight:700; font-size: 1.6rem; letter-spacing: 4px; }
.join-box { display:flex; gap: 30px; align-items:center; justify-content:center; flex-wrap: wrap; }
.join-box .code-huge { font-size: 7rem; font-weight: 700; letter-spacing: 16px; color: var(--bg1); line-height: 1; }
.join-box img { width: 220px; height: 220px; background:#fff; border-radius: 12px; }
.url { font-size: 1.6rem; font-weight:700; word-break: break-all; }
.host .prompt { font-size: 2.6rem; text-align:center; }
.answers { display:grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.answer { background:#fff; border-radius: 18px; padding: 18px; font-size: 1.8rem; font-weight:700; box-shadow: 0 6px 0 rgba(0,0,0,.15); }
.reveal-item { background:#fff; border-radius: 22px; padding: 24px; margin-bottom: 14px; box-shadow: 0 8px 0 rgba(0,0,0,.15); animation: pop .4s ease-out; }
.reveal-item.truth { background: var(--good); color:#fff; }
.reveal-item .ans { font-size: 2.4rem; font-weight:700; }
.reveal-item .meta { font-size: 1.3rem; margin-top: 8px; }
@keyframes pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.winner { font-size: 4rem; font-weight:700; text-align:center; }
.confetti { position: fixed; top:-20px; font-size: 2rem; animation: fall linear forwards; pointer-events:none; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }
.or { text-align:center; color:#fff; font-weight:700; margin: -4px 0 12px; }
.code-mid { font-size: 3.4rem; font-weight:700; letter-spacing: 10px; color: var(--bg1); line-height:1.1; }
.qr-phone { width: 170px; height: 170px; background:#fff; border-radius: 12px; }
.reveal-item.small { padding: 14px 16px; border-radius: 16px; margin-bottom: 10px; animation-fill-mode: both; }
.reveal-item.small .ans { font-size: 1.35rem; }
.reveal-item.small .meta { font-size: 1rem; }
.mine { border-color: #ffd23f !important; opacity: .55; }
.vipbar { display:flex; gap:10px; } .vipbar button { font-size: 1.05rem; padding: 12px; }
/* Doodle */
canvas.art, canvas#pad { width: 100%; aspect-ratio: 1 / 1; background: #fff; border-radius: 16px; border: 3px solid #d9cff7; display:block; }
canvas#pad { touch-action: none; cursor: crosshair; }
.host canvas.art { width: min(62vh, 100%); margin: 0 auto; }
.palette { display:flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; align-items:center; }
.swatch { width: 36px; height: 36px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #d9cff7; padding:0; margin:0; }
.swatch.on { box-shadow: 0 0 0 4px var(--ink); }
.sizebtn { width: 44px; height: 40px; padding: 0; margin: 0; border-radius: 12px; background: #ece6ff; display:flex; align-items:center; justify-content:center; box-shadow:none; }
.sizebtn.on { background: var(--accent); }
.tools { display:flex; gap: 8px; } .tools button { margin-top: 8px; font-size: 1.05rem; padding: 12px; }
.secret { background: var(--ink); color: #fff; border-radius: 14px; padding: 10px 14px; font-size: 1.3rem; font-weight: 700; text-align:center; }
.fav { background: var(--accent); border-radius: 999px; padding: 2px 10px; font-size: .9em; margin-left: 6px; }
.host-split { display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items:start; }
@media (max-width: 900px) { .host-split { grid-template-columns: 1fr; } }
/* Family hero art (16:9 cartoon illustration with transparent background) */
.hero-wrap { text-align:center; margin: 6px auto 0; max-width: 528px; }
.hero-wrap picture { display:block; }
.hero { width: 100%; height: auto; display:block; margin: 0 auto; filter: drop-shadow(0 6px 10px rgba(36,18,77,.35)); }
.hero-wrap + h1.logo { position: relative; font-size: clamp(2rem, 10vw, 2.6rem); margin: -4px 0 14px; text-shadow: 0 4px 0 rgba(0,0,0,.25), 0 0 18px rgba(91,43,214,.6); }
body.in-game .hero-wrap { display:none; }
body.in-game .hero-wrap + h1.logo { font-size: 2.2rem; margin-top: 8px; }
.hero-box { display:inline-flex; align-items:center; justify-content:center; border-radius: 20px; padding: 10px 14px; overflow:hidden;
  background: radial-gradient(ellipse at 50% 40%, #fff6d6 0, #ffd6e4 55%, #e3d4ff 100%); box-shadow: inset 0 -5px 0 rgba(0,0,0,.08); }
.hero-box picture { display:block; }
.hero-box img { display:block; height: auto; filter: drop-shadow(0 4px 8px rgba(36,18,77,.25)); }
.join-box .hero-box img { background: none; border-radius: 0; height: auto; }
.hero-tv { flex: 0 1 460px; max-width: 40%; }
.hero-tv img, .join-box .hero-tv img { width: 100%; }
@media (max-width: 900px) { .hero-tv { display:none; } }
.hero-final { display:flex; width: min(560px, 92%); margin: 0 auto 6px; }
.hero-final img { width: 100%; }
@media (min-width: 901px) {
  .join-box { flex-wrap: nowrap; gap: 24px; }
  .join-box > div:not(.hero-box) { min-width: 0; flex: 0 1 auto; }
  .join-box > img { flex: 0 0 auto; width: 200px; height: 200px; }
  .hero-tv { max-width: 36%; }
  .join-box .url { font-size: clamp(1.05rem, 1.55vw, 1.6rem); word-break: normal; overflow-wrap: anywhere; }
  .join-box .code-huge { font-size: clamp(4rem, 6vw, 7rem); }
}
/* Scripture / source reference on quiz reveal */
.card.ref { margin-top: 14px; padding: 10px 14px; }
.card.ref .ref-label { font-size: 1.7rem; padding: 6px 22px; }
.ref-label { display:inline-block; font-weight: 700; font-size: 1.1rem; color: #5b2bd6; background: #f0e9ff; border-radius: 999px; padding: 4px 14px; box-shadow: 0 3px 0 rgba(0,0,0,.12); }
.ref-phone { text-align:center; margin: -4px 0 14px; }