:root {
  --bg: #1b1030;
  --bg2: #2a1a4a;
  --card: #ffffff;
  --accent: #ff6f91;
  --accent2: #ffc75f;
  --accent3: #45d9c1;
  --text: #241436;
  --muted: #8a7fa3;
  --good: #2ecc71;
  --bad: #e74c3c;
  --radius: 18px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(circle at top, var(--bg2), var(--bg) 70%);
  color: var(--text);
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 16px 48px;
  min-height: 100vh;
}

h1, h2, h3 { margin: 0 0 8px; }

.title {
  text-align: center;
  color: #fff;
  margin: 24px 0 8px;
  font-size: 1.7rem;
}
.subtitle {
  text-align: center;
  color: #d9c9ff;
  margin-bottom: 28px;
  font-size: 1rem;
}

.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 14px;
  padding: 16px 20px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  color: #fff;
  background: var(--accent);
  width: 100%;
  margin-bottom: 12px;
  transition: transform .08s ease, opacity .15s ease;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.secondary { background: #6c5ce7; }
.btn.good { background: var(--good); }
.btn.warn { background: var(--accent2); color: #3a2a00; }
.btn.small { padding: 10px 14px; font-size: 0.9rem; width: auto; margin: 0 6px 6px 0; }
.btn.ghost { background: #eee; color: #333; }

.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row.between { justify-content: space-between; }
.col { display: flex; flex-direction: column; }

input[type=text], input[type=password] {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  border: 2px solid #e0d7f5;
  font-size: 1.05rem;
  margin-bottom: 12px;
  font-family: inherit;
}
input:focus { outline: none; border-color: var(--accent); }

.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 700;
  background: #eee;
  color: #555;
}
.badge.ok { background: #d8f9e4; color: #17864f; }
.badge.pending { background: #fff2cf; color: #8a6300; }

img.qimg, video.qvid {
  width: 100%;
  border-radius: 14px;
  display: block;
  margin-bottom: 12px;
  background: #000;
}

.begin-text {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 12px;
}
.full-text {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 12px;
  color: #6c1fb5;
}

.timer {
  font-size: 2.4rem;
  font-weight: 800;
  text-align: center;
  color: var(--accent);
  margin: 8px 0;
  font-variant-numeric: tabular-nums;
}

.teamlist { display: flex; flex-direction: column; gap: 10px; }
.teamrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f6f2ff;
  border-radius: 12px;
  padding: 10px 14px;
}
.teamrow .name { font-weight: 700; }
.teamrow .score { font-size: 1.3rem; font-weight: 800; color: var(--accent); }

.answer-box {
  background: #f6f2ff;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
}
.answer-box .who { font-weight: 700; margin-bottom: 4px; color: #6c1fb5; }

canvas.drawcanvas {
  width: 100%;
  touch-action: none;
  border-radius: 14px;
  display: block;
  margin-bottom: 10px;
  background: #000;
}

.dot {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px;
}
.dot.on { background: var(--good); }
.dot.off { background: var(--bad); }

.centered { text-align: center; }
.muted { color: var(--muted); }

footer.spacer { height: 24px; }

.tabbar { display: flex; gap: 8px; margin-bottom: 14px; }
.tabbar .tab {
  flex: 1;
  text-align: center;
  padding: 10px;
  border-radius: 12px;
  background: #eee;
  font-weight: 700;
  cursor: pointer;
  color: #555;
}
.tabbar .tab.active { background: var(--accent); color: #fff; }

.qnav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.qnav .pos { font-weight: 700; }

/* ---------- Full-screen projector view ---------- */
.host-page {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 111, 145, .22), transparent 34%),
    radial-gradient(circle at 88% 16%, rgba(69, 217, 193, .12), transparent 26%),
    #120d22;
  color: #fff;
}
.host-shell { max-width: 1560px; margin: 0 auto; padding: 22px 28px 36px; }
.host-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.host-kicker, .side-kicker, .question-eyebrow { font-size: .72rem; font-weight: 900; letter-spacing: .16em; color: #ffb5c8; }
.host-title { font-size: clamp(1.45rem, 2vw, 2.15rem); font-weight: 900; letter-spacing: -.03em; }
.live-chip { display: inline-flex; align-items: center; gap: 9px; padding: 10px 15px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: #dfd8ee; font-size: .85rem; background: rgba(255,255,255,.05); }
.live-chip span { width: 8px; height: 8px; border-radius: 50%; background: #ff6f91; box-shadow: 0 0 0 6px rgba(255,111,145,.12); animation: livePulse 1.8s infinite; }
.host-login { max-width: 430px; margin: 80px auto; color: var(--text); }
.host-grid { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 20px; align-items: start; }
.host-main { min-width: 0; }
.host-toolbar { min-height: 56px; display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; }
.host-tabs { width: min(520px, 60%); margin: 0; }
.host-tabs .tab { background: rgba(255,255,255,.07); color: #bdb4cc; border: 1px solid rgba(255,255,255,.08); }
.host-tabs .tab.active { background: linear-gradient(135deg, #ff6f91, #9b6dff); color: #fff; box-shadow: 0 8px 28px rgba(255,111,145,.22); }
.host-page .qnav { margin: 0; color: #fff; gap: 5px; }
.host-page .qnav .btn { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.1); min-width: 42px; }
.host-page .qnav .pos { min-width: 132px; text-align: center; color: #ddd5e8; }

.host-stage { padding: 0; overflow: hidden; margin: 0; border-radius: 28px; background: #211934; box-shadow: 0 24px 70px rgba(0,0,0,.34); }
.host-question-layout { display: grid; grid-template-columns: minmax(380px, 1.35fr) minmax(300px, .65fr); min-height: 570px; }
.host-photo-wrap { min-width: 0; min-height: 570px; background: #0b0812; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.host-photo-wrap .qimg, .host-photo-wrap .qvid { width: 100%; height: 100%; min-height: 570px; max-height: 72vh; margin: 0; border-radius: 0; object-fit: contain; background: #0b0812; }
.host-caption-panel { padding: clamp(30px, 4vw, 58px); display: flex; flex-direction: column; justify-content: center; background: linear-gradient(155deg, #2b2045, #1c172c); position: relative; overflow: hidden; }
.host-caption-panel::after { content: ''; position: absolute; width: 230px; height: 230px; border: 1px solid rgba(255,199,95,.18); border-radius: 50%; right: -105px; bottom: -115px; box-shadow: 0 0 0 36px rgba(255,199,95,.025), 0 0 0 72px rgba(255,199,95,.018); }
.question-eyebrow { color: #ffc75f; margin-bottom: 20px; }
.host-prompt { color: #fff; font-size: clamp(1.8rem, 3vw, 3.25rem); line-height: 1.06; font-weight: 900; letter-spacing: -.04em; margin: 0 0 34px; position: relative; z-index: 1; }
.answer-is-hidden { display: flex; align-items: center; gap: 10px; color: #a99fb9; font-size: .9rem; position: relative; z-index: 1; }
.answer-is-hidden span { color: #ffc75f; font-size: 1.35rem; }
.revealed-answer { padding: 20px; border-radius: 16px; color: #fff; background: linear-gradient(135deg, rgba(255,111,145,.22), rgba(155,109,255,.18)); border: 1px solid rgba(255,181,200,.25); font-size: 1.18rem; line-height: 1.45; font-weight: 800; position: relative; z-index: 1; }
.revealed-answer span { display: block; color: #ffb5c8; font-size: .69rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 900; margin-bottom: 8px; }
.host-actions { display: flex; gap: 12px; padding: 18px 22px; background: #fff; }
.host-actions .btn { margin: 0; min-height: 52px; }
.host-stage > #questionArea > .timer { position: fixed; top: 24px; left: 50%; transform: translateX(-50%); z-index: 5; background: #fff; border-radius: 999px; padding: 8px 22px; box-shadow: 0 10px 35px rgba(0,0,0,.3); }
.host-stage > #questionArea > .qimg { width: calc(100% - 44px); margin: 20px 22px; }

.host-sidebar { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 18px; }
.host-side-card { margin: 0; padding: 20px; color: #241436; border-radius: 22px; box-shadow: 0 18px 50px rgba(0,0,0,.24); }
.side-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.side-heading h3 { font-size: 1.35rem; letter-spacing: -.025em; }
.side-kicker { color: #9b6dff; margin-bottom: 4px; }
.privacy-badge { padding: 6px 9px; border-radius: 999px; background: #eee8ff; color: #6c49b8; font-weight: 800; font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.privacy-badge.open { background: #dff8ef; color: #218769; }
.side-explainer { color: #8a7fa3; font-size: .79rem; line-height: 1.35; margin-bottom: 16px; }
.live-teamlist { gap: 9px; }
.live-team { border-radius: 16px; padding: 13px; background: #f6f3fb; border: 1px solid #eee8f6; transition: border-color .2s, background .2s, transform .2s; }
.live-team.typing { background: #fff9ec; border-color: #ffe0a1; transform: translateX(-3px); }
.live-team.submitted { background: #eefbf7; border-color: #bdebdc; }
.live-team.revealed { background: #f4efff; border-color: #d9c9ff; }
.live-team-head { display: grid; grid-template-columns: 38px minmax(0,1fr) 9px; gap: 10px; align-items: center; }
.team-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(135deg, #ff87a4, #9b6dff); color: #fff; font-weight: 900; }
.team-meta { min-width: 0; display: flex; flex-direction: column; }
.team-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
.team-meta span { color: #91869f; font-size: .72rem; margin-top: 2px; }
.live-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #c8c2cf; }
.typing .live-status-dot { background: #ffc75f; box-shadow: 0 0 0 5px rgba(255,199,95,.18); }
.submitted .live-status-dot { background: #2ecc91; box-shadow: 0 0 0 5px rgba(46,204,145,.14); }
.revealed .live-status-dot { background: #9b6dff; }
.live-answer-preview { margin-top: 10px; min-height: 30px; display: flex; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.72); color: #746c80; font-size: .82rem; }
.answer-cipher { letter-spacing: .13em; white-space: nowrap; }
.answer-cipher.idle { color: #cbc5d1; }
.answer-cipher.locked { color: #42a987; }
.answer-revealed { color: #493768; font-weight: 800; letter-spacing: 0; overflow-wrap: anywhere; }
.live-drawing-thumb { width: 100%; max-height: 150px; object-fit: contain; border-radius: 8px; background: #171221; }
.typing-dots { display: inline-flex; gap: 5px; align-items: center; height: 14px; }
.typing-dots i { width: 7px; height: 7px; border-radius: 50%; background: #d19d30; animation: typingBounce 1.1s infinite ease-in-out; }
.typing-dots i:nth-child(2) { animation-delay: .14s; }
.typing-dots i:nth-child(3) { animation-delay: .28s; }
.host-side-card .teamrow { background: #f6f3fb; padding: 10px 11px; }
.host-side-card .teamrow .row { justify-content: flex-end; gap: 4px; }
.host-side-card .teamrow .btn { padding: 7px 9px; font-size: .74rem; border-radius: 9px; }
.host-side-card .teamrow .score { min-width: 30px; text-align: right; color: #9b5de5; }
.host-danger-zone { text-align: right; opacity: .78; }
.host-danger-zone .btn { margin: 0; }

@keyframes typingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes livePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(.78); } }

@media (max-width: 1080px) {
  .host-grid { grid-template-columns: 1fr; }
  .host-sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; }
  .host-danger-zone { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .host-shell { padding: 14px; }
  .host-topbar { align-items: flex-start; }
  .live-chip { font-size: 0; padding: 12px; }
  .host-toolbar { display: block; }
  .host-tabs { width: 100%; margin-bottom: 10px; }
  .host-page .qnav { justify-content: space-between; }
  .host-question-layout { grid-template-columns: 1fr; min-height: auto; }
  .host-photo-wrap, .host-photo-wrap .qimg, .host-photo-wrap .qvid { min-height: 320px; max-height: 52vh; }
  .host-caption-panel { padding: 28px 22px; }
  .host-prompt { font-size: 2rem; }
  .host-sidebar { grid-template-columns: 1fr; }
}


/* ===== fixes: text overflow + round 2 drawing gallery ===== */
.card, .begin-text, .full-text, .answer-box, .who { overflow-wrap: anywhere; }
img.qimg, video.qvid, canvas.drawcanvas { max-width: 100%; }

.host-question-layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.host-caption-panel { min-width: 0; padding: clamp(22px, 2.6vw, 44px); }
.host-prompt { font-size: clamp(1.35rem, 2.1vw, 2.5rem); line-height: 1.14; letter-spacing: -.02em; margin-bottom: 26px; overflow-wrap: anywhere; hyphens: auto; }
.revealed-answer { font-size: clamp(1rem, 1.35vw, 1.45rem); overflow-wrap: anywhere; hyphens: auto; }
.answer-is-hidden { min-width: 0; }

.live-team, .live-team-head, .team-meta { min-width: 0; }
.live-answer-preview { min-width: 0; max-width: 100%; overflow: hidden; }
.answer-cipher { white-space: normal; }
.host-side-card .teamrow { flex-wrap: wrap; gap: 8px; }
.host-side-card .teamrow .name { min-width: 0; flex: 1 1 100%; overflow-wrap: anywhere; }
.host-side-card .teamrow .row { flex: 1 1 100%; justify-content: space-between; flex-wrap: nowrap; }
.host-side-card .teamrow .row .btn { margin: 0; }

.drawn-reveal { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.drawn-reveal .host-caption-panel { order: -1; padding: 22px 30px; }
.drawn-reveal .host-prompt { margin-bottom: 14px; font-size: clamp(1.2rem, 1.8vw, 2rem); }
.drawn-reveal .host-photo-wrap { min-height: 0; max-height: none; display: block; }
.drawings-gallery { padding: 18px 22px 22px; }
.drawings-title { color: #ffc75f; font-size: .78rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px; }
.drawings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.drawing-card { margin: 0; background: #171221; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); }
.drawing-card img { display: block; width: 100%; height: auto; }
.drawing-card figcaption { padding: 10px 14px; font-weight: 800; color: #fff; overflow-wrap: anywhere; }

/* team phone screen */
.row.between > div { min-width: 0; }
#teamName { overflow-wrap: anywhere; }
canvas.drawcanvas { touch-action: none; user-select: none; -webkit-user-select: none; border: 2px solid #e0d7f5; cursor: crosshair; }