/* ------- Cloudflare Quiz Game ------- */
:root{
  --primary: #00A0AF;
  --primary-deep: #005F6B;
  --accent: #F38020;
  --accent-soft: #FBAD41;
  --bg: #0A2A30;

  /* Answer tile colors — derived from brand palette */
  --ans1: #00A0AF;
  --ans2: #F38020;
  --ans3: #FBAD41;
  --ans4: #00C2A8;
  --ans5: #8B5CF6;

  --ink: #0A2A30;
  --ink-soft: #4A6A70;
  --paper: #FFFFFF;
  --paper-2: #F4F8F9;
  --line: rgba(255,255,255,0.12);
}

*{box-sizing:border-box;}
html,body,#root{height:100%;margin:0;}
body{
  font-family: 'Manrope', 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  background: var(--bg);
  color: white;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
.app{ position: relative; width:100%; height:100%; }

button{font-family:inherit;cursor:pointer;border:none;}
input{font-family:inherit;}

/* Reusable */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background: var(--accent);
  color: white;
  font-weight: 800;
  padding: 16px 28px;
  border-radius: 14px;
  font-size: 17px;
  letter-spacing: 0.2px;
  box-shadow: 0 6px 0 0 #C5651A, 0 12px 24px -8px rgba(243,128,32,0.5);
  transition: transform .08s, box-shadow .08s;
  width: 100%;
}
.btn-primary:hover{ transform: translateY(-1px); }
.btn-primary:active{ transform: translateY(3px); box-shadow: 0 3px 0 0 #C5651A, 0 6px 12px -6px rgba(243,128,32,0.5);}
.btn-primary:disabled{ opacity:.45; cursor: not-allowed; box-shadow: 0 6px 0 0 rgba(0,0,0,0.2);}
.btn-ghost{
  width:100%; margin-top:10px; background: transparent; color: rgba(255,255,255,0.7);
  padding: 10px; border-radius: 10px; font-weight: 600;
}
.btn-ghost:hover{ color: white; background: rgba(255,255,255,0.06);}

.btn-secondary{
  background: rgba(255,255,255,0.08);
  color: white; font-weight: 700; padding: 12px 18px;
  border-radius: 12px; border: 1px solid rgba(255,255,255,0.12);
}
.btn-secondary:hover{ background: rgba(255,255,255,0.14); }

.kbd{
  background: rgba(255,255,255,0.1); padding: 2px 8px; border-radius: 6px; font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.muted{ color: rgba(255,255,255,0.65); }

.brand-row{
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin-bottom: 18px;
}
.brand-row img{ height: 34px; width:auto; opacity:.95; }
.brand-row--sm img{ height: 22px; }
.brand-row--sm{ margin-bottom: 0; gap: 12px; }
.brand-row--lg img{ height: 56px; }

/* Background */
body::before{
  content:""; position: fixed; inset:0;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(0,160,175,0.35), transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(243,128,32,0.25), transparent 55%),
    radial-gradient(ellipse at 50% 60%, rgba(0,194,168,0.18), transparent 60%);
  pointer-events:none; z-index:0;
}

/* Floating shapes */
.float-bg{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;}
.float-shape{
  position:absolute; opacity: 0.10;
  animation: drift linear infinite;
}
@keyframes drift{
  0%{ transform: translate(0,0) rotate(0deg);}
  50%{ transform: translate(30px,-40px) rotate(180deg);}
  100%{ transform: translate(0,0) rotate(360deg);}
}

/* =================== JOIN =================== */
.screen{ position: relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding: 24px; z-index:1;}
.join-screen{ flex-direction:column; }
.join-card{
  position: relative; z-index: 1;
  width: min(440px, 100%);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
}
.event-tag{
  text-align:center; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--accent-soft); font-weight: 700; margin-bottom: 24px;
}
.join-form h1{
  font-size: 32px; margin: 0 0 6px; text-align:center; font-weight: 800;
  letter-spacing: -0.5px;
}
.join-form p{ text-align:center; margin: 0 0 22px; }
.pin-input{
  width: 100%; text-align:center; font-size: 36px; font-weight: 800; letter-spacing: 12px;
  background: rgba(255,255,255,0.08); color:white; border: 2px solid rgba(255,255,255,0.15);
  padding: 18px; border-radius: 14px; outline: none;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  margin-bottom: 16px;
}
.pin-input:focus{ border-color: var(--primary); background: rgba(0,160,175,0.12); }
.pin-input::placeholder{ color: rgba(255,255,255,0.3); letter-spacing: 2px;}

.field{ margin-bottom: 14px; }
.field label{ display:block; font-size:13px; color: rgba(255,255,255,0.78); margin-bottom: 6px; font-weight: 600;}
.field input{
  width:100%; padding: 14px 16px; border-radius: 12px; font-size: 16px;
  background: rgba(255,255,255,0.08); color:white; border: 2px solid rgba(255,255,255,0.12); outline: none;
  transition: border-color .15s, background .15s;
}
.field input:focus{ border-color: var(--primary); background: rgba(0,160,175,0.10); }
.field input[type="password"]{ letter-spacing: 4px; }
.err{ color: #FFB3A8; font-size: 12px; margin-top: 4px; display: block; font-weight: 600;}
.err-banner{
  background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.35);
  color: #FFB3A8; padding: 10px 14px; border-radius: 12px; font-size: 13px; margin-bottom: 12px;
}

.hint{ text-align:center; font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 12px; }
.consent{ text-align:left; font-size: 11px; color: rgba(255,255,255,0.55); margin-top: 14px; line-height: 1.5; display:flex; gap: 8px; align-items:flex-start;}
.consent input[type="checkbox"]{ margin-top: 2px; accent-color: var(--accent);}
.consent a{ color: var(--accent-soft); }

.shake{ animation: shake .4s; }
@keyframes shake{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-8px);}
  75%{transform:translateX(8px);}
}

/* WS connection banner (player) — shown only when not 'open' */
.ws-status-banner{
  position: fixed; top: 8px; left: 50%; transform: translateX(-50%);
  background: rgba(243,128,32,0.18); border: 1px solid rgba(243,128,32,0.4);
  color: #FBAD41; padding: 6px 14px; border-radius: 100px;
  font-size: 12px; font-weight: 700; z-index: 200;
  display: flex; align-items: center; gap: 10px;
  max-width: calc(100vw - 24px);
}
.ws-banner-reset{
  background: rgba(243,128,32,0.35); color: white;
  border: 1px solid rgba(243,128,32,0.6); border-radius: 100px;
  padding: 3px 12px; font-size: 11px; font-weight: 800; cursor: pointer;
}
.ws-banner-reset:hover{ background: rgba(243,128,32,0.55); }
.lobby-reset{
  margin-top: 14px; font-size: 12px; color: rgba(255,255,255,0.5);
  text-align: center; line-height: 1.4; max-width: 360px;
}
.lobby-reset:hover{ color: rgba(255,255,255,0.85); }

/* =================== KEEP TAB OPEN NOTICE ===================
   Persistent reminder during the 4h event. Yellow tint draws the eye
   without screaming for attention — players read it once, internalise. */
.keep-tab-notice{
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 18px; padding: 12px 14px;
  background: rgba(243, 200, 60, 0.10);
  border: 1px solid rgba(243, 200, 60, 0.35);
  border-radius: 14px;
  color: rgba(255, 240, 200, 0.92);
  font-size: 13px; line-height: 1.45;
  max-width: 420px; width: 100%;
  text-align: left;
  margin-left: auto; margin-right: auto;
}
.keep-tab-notice strong{ color: #ffd66b; font-weight: 700; }
.keep-tab-icon{ flex-shrink: 0; font-size: 16px; line-height: 1.2; }

/* =================== LOBBY =================== */
.lobby{ flex-direction:column; padding: 32px; align-items:stretch; }
.lobby-top{
  display:flex; justify-content:space-between; align-items:center;
  z-index:1; position: relative;
}
.pin-pill{
  background: rgba(255,255,255,0.08); padding: 10px 20px; border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.15);
  font-size: 14px; color: rgba(255,255,255,0.7);
}
.pin-pill strong{
  margin-left: 10px; font-size: 22px; font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: white; letter-spacing: 4px;
}

.lobby-center{
  flex:1; display:flex; flex-direction: column; align-items: center; justify-content:center;
  z-index:1; position: relative;
}
.you-card{
  display:flex; align-items:center; gap: 16px;
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  padding: 18px 24px 18px 18px; border-radius: 18px;
  box-shadow: 0 20px 60px -20px rgba(0,160,175,0.7);
  margin-bottom: 16px;
}
.avatar{
  width: 56px; height: 56px; border-radius: 14px;
  background: rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center;
  font-weight: 800; font-size: 20px; letter-spacing: 1px;
  border: 2px solid rgba(255,255,255,0.4);
}
.you-label{ font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; opacity:.8;}
.you-name{ font-size: 22px; font-weight: 800;}
.status-dot{ display:flex; align-items:center; gap:8px; font-size: 13px; opacity:.85; margin-left: 12px;}
.status-dot span{ width:10px; height:10px; border-radius:50%; background: #6EE7B7; animation: pulse 1.4s infinite; box-shadow: 0 0 0 0 rgba(110,231,183,0.7);}
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(110,231,183,0.6);}
  100%{ box-shadow: 0 0 0 14px rgba(110,231,183,0);}
}
.waiting{ color: rgba(255,255,255,0.7); font-size: 16px;}

.countdown{ text-align:center; }
.countdown-label{ font-size: 14px; letter-spacing: 4px; text-transform: uppercase; color: var(--accent-soft); font-weight: 800;}
.countdown-num{
  font-size: 200px; font-weight: 900; line-height: 1; margin-top: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-soft));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: pop .9s;
}
@keyframes pop{
  0%{ transform: scale(.4); opacity:0;}
  40%{ transform: scale(1.15); opacity:1;}
  100%{ transform: scale(1); }
}

.lobby-players{
  background: rgba(0,0,0,0.25); border-radius: 20px; padding: 18px;
  max-height: 240px; overflow:auto; z-index:1; position: relative;
  border: 1px solid rgba(255,255,255,0.08);
}
.players-head{ font-size: 13px; color: rgba(255,255,255,0.7); margin-bottom: 12px; display:flex; align-items:center; gap: 8px;}
.players-head .dot{ width:8px; height:8px; background: var(--accent); border-radius: 50%;}
.players-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px;}
.chip{
  display:flex; align-items:center; gap: 10px;
  background: rgba(255,255,255,0.08); padding: 8px 12px; border-radius: 100px;
  font-size: 13px; font-weight: 600;
  animation: chipIn .35s ease both;
  border: 1px solid rgba(255,255,255,0.06);
}
.chip-av{
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display:flex; align-items:center; justify-content:center; font-size: 11px; font-weight: 800;
}
@keyframes chipIn{
  from{ transform: translateY(8px) scale(.9); opacity: 0;}
  to{ transform: translateY(0) scale(1); opacity: 1;}
}

/* =================== QUESTION =================== */
.question{
  flex-direction: column; padding: 24px; align-items: stretch; gap: 18px;
}
.q-top{
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap: 16px;
}
.q-meta{ display:flex; gap: 10px; align-items:center;}
.q-meta.right{ justify-content: flex-end;}
.q-idx{
  background: rgba(255,255,255,0.08); padding: 8px 16px; border-radius: 100px;
  font-weight: 700; font-size: 14px;
}
.q-points{
  background: linear-gradient(135deg, var(--accent), var(--accent-soft));
  padding: 8px 16px; border-radius: 100px; font-weight: 800; font-size: 14px;
}

.q-stage{ display:flex; flex-direction:column; align-items:center; gap: 18px;}
.q-card{
  width: 100%; max-width: 1000px; min-height: 120px;
  background: white; color: var(--ink);
  border-radius: 20px; padding: 32px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.6);
}
.q-text{ font-size: clamp(20px, 2.8vw, 32px); font-weight: 800; line-height: 1.25; letter-spacing: -0.3px; text-wrap: balance;}

.q-timer-wrap{ position: relative; }
.q-timer-ring{ width: 76px; height: 76px; position: relative;}
.q-timer-ring svg{ width:100%; height:100%; transform: rotate(-90deg);}
.q-timer-ring .ring-bg{ fill:none; stroke: rgba(255,255,255,0.15); stroke-width: 6;}
.q-timer-ring .ring-fg{ fill:none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset .12s linear;}
.ring-num{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size: 24px; font-weight: 800;}

.q-bar{ width: 100%; max-width: 1000px; height: 6px; background: rgba(255,255,255,0.1); border-radius: 100px; overflow:hidden;}
.q-bar-fill{ height:100%; background: linear-gradient(90deg, var(--accent), var(--accent-soft)); transition: width .12s linear;}

.answers{
  display:grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px;
  flex: 1; min-height: 0;
}
.ans{
  display:flex; align-items:center; gap: 18px;
  padding: 22px 26px; border-radius: 18px;
  font-size: clamp(16px, 1.8vw, 22px); font-weight: 800; color:white; text-align: left;
  position: relative; overflow: hidden;
  box-shadow: 0 8px 0 0 rgba(0,0,0,0.25), 0 14px 30px -10px rgba(0,0,0,0.5);
  transition: transform .12s, box-shadow .12s, opacity .25s, filter .25s;
}
.ans:hover:not(:disabled){ transform: translateY(-2px); }
.ans:active:not(:disabled){ transform: translateY(4px); box-shadow: 0 4px 0 0 rgba(0,0,0,0.25);}
.ans--0{ background: var(--ans1); color: white;}
.ans--1{ background: var(--ans2); color: white;}
.ans--2{ background: var(--ans3); color: var(--ink);}
.ans--3{ background: var(--ans4); color: white;}
.ans--4{ background: var(--ans5); color: white;}
.ans .ans-icon{ width: 36px; height: 36px; flex-shrink: 0; color: rgba(255,255,255,0.85);}
.ans--2 .ans-icon{ color: rgba(10,42,48,0.85);}
.ans-text{ flex:1; line-height: 1.2; }
.ans-key{
  width: 36px; height: 36px; border-radius: 10px; display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.22); font-size: 14px;
}
.ans--2 .ans-key{ background: rgba(10,42,48,0.15);}

.ans.dim{ opacity:.35; filter: grayscale(.4);}
.ans.picked{ outline: 4px solid white; outline-offset: 4px; transform: scale(1.02);}

/* Player-only big shape grid (when display has the question) */
.shape-grid{
  display:grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px;
  flex:1; min-height: 0;
}
.shape-grid .ans{ justify-content:center;}
.shape-grid .ans .ans-icon{ width: 64px; height: 64px;}
.shape-grid .ans .ans-text{ display:none;}
.shape-grid .ans .ans-key{ position: absolute; top: 10px; right: 12px; }

/* --- 2 option (True/False) --- two big buttons side by side */
.shape-grid--2, .answers--2{
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}
.shape-grid--2 .ans .ans-icon{ width: 96px; height: 96px; }

/* --- 5 options --- 3 on top row, 2 on bottom row centered.
   Use a 6-column grid so we can place each item across 2 cols. */
.shape-grid--5, .answers--5{
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 14px;
}
.shape-grid--5 > :nth-child(1), .answers--5 > :nth-child(1){ grid-column: 1 / 3; grid-row: 1; }
.shape-grid--5 > :nth-child(2), .answers--5 > :nth-child(2){ grid-column: 3 / 5; grid-row: 1; }
.shape-grid--5 > :nth-child(3), .answers--5 > :nth-child(3){ grid-column: 5 / 7; grid-row: 1; }
.shape-grid--5 > :nth-child(4), .answers--5 > :nth-child(4){ grid-column: 2 / 4; grid-row: 2; }
.shape-grid--5 > :nth-child(5), .answers--5 > :nth-child(5){ grid-column: 4 / 6; grid-row: 2; }
.shape-grid--5 .ans .ans-icon{ width: 56px; height: 56px; }

/* =================== RESULT =================== */
.result{ flex-direction:column; }
.result--good{
  background: radial-gradient(circle at 50% 30%, rgba(34,197,94,0.5), transparent 60%), var(--bg);
}
.result--bad{
  background: radial-gradient(circle at 50% 30%, rgba(239,68,68,0.45), transparent 60%), var(--bg);
}
.result-inner{ text-align:center; max-width: 480px;}
.result-emoji{
  width: 120px; height: 120px; margin: 0 auto 20px;
  border-radius: 50%; background: rgba(255,255,255,0.15);
  display:flex; align-items:center; justify-content:center;
  animation: pop .5s;
}
.result--good .result-emoji{ background: #22C55E;}
.result--bad .result-emoji{ background: #EF4444;}
.result-emoji svg{ width: 60%; height: 60%;}
.result h2{ font-size: 56px; margin: 0 0 8px; font-weight: 900; letter-spacing: -1px;}
.streak{ background: var(--accent); display:inline-block; padding: 6px 14px; border-radius: 100px; font-weight: 800; margin-bottom: 16px;}
.result-stats{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  background: rgba(0,0,0,0.3); border-radius: 18px; padding: 20px;
  margin: 24px 0; border: 1px solid rgba(255,255,255,0.08);
}
.stat-num{ font-size: 28px; font-weight: 900;}
.stat-lbl{ font-size: 11px; text-transform: uppercase; letter-spacing: 1px; opacity:.7; margin-top: 4px;}

/* Explanation card shown to players who answered wrong / timed out.
   Brand teal-tinted, subtle but distinct from the result emoji block. */
.result-explanation{
  background: rgba(0,160,175,0.15);
  border: 1px solid rgba(0,160,175,0.45);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 8px 0 6px;
  text-align: left;
  animation: chipIn .35s ease both;
}
.result-explanation-label{
  font-size: 11px; text-transform: uppercase; letter-spacing: 2px;
  font-weight: 800; color: var(--primary);
  margin-bottom: 6px;
}
.result-explanation-text{
  font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.95);
  font-weight: 600;
}

/* =================== LEADERBOARD =================== */
.leaderboard{ flex-direction:column; padding: 32px; align-items:stretch; gap: 24px;}
.lb-head{ text-align:center; z-index: 1; position: relative;}
.lb-head h1{ font-size: 44px; margin: 12px 0 6px; font-weight: 900; letter-spacing: -1px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.your-rank{ color: rgba(255,255,255,0.7);}
.your-rank strong{ color: var(--accent); font-size: 18px;}

.podium{ display:grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 14px; align-items:end; max-width: 720px; margin: 0 auto; width: 100%; z-index: 1; position: relative;}
.podium-col{ text-align:center; }
.podium-name{ font-weight: 700; font-size: 14px; margin-bottom: 4px; opacity:.9;}
.podium-score{ font-size: 22px; font-weight: 900; margin-bottom: 8px;}
.podium-bar{
  border-radius: 14px 14px 0 0;
  display:flex; align-items:flex-start; justify-content:center; padding-top: 14px;
  font-size: 36px; font-weight: 900; color: white;
}
.podium--0 .podium-bar{ height: 160px; background: linear-gradient(180deg, var(--accent), #C5651A);}
.podium--1 .podium-bar{ height: 110px; background: linear-gradient(180deg, var(--primary), var(--primary-deep));}
.podium--2 .podium-bar{ height: 80px; background: linear-gradient(180deg, var(--ans4), #007A6B);}

.lb-list{
  background: rgba(0,0,0,0.25); border-radius: 18px; padding: 8px;
  max-width: 720px; width: 100%; margin: 0 auto;
  border: 1px solid rgba(255,255,255,0.08);
  z-index: 1; position: relative;
}
.lb-row{
  display:grid; grid-template-columns: 60px 1fr auto; align-items: center;
  padding: 12px 16px; border-radius: 12px;
}
.lb-row:not(:last-child){ border-bottom: 1px solid rgba(255,255,255,0.05);}
.lb-row--you{ background: linear-gradient(90deg, rgba(243,128,32,0.25), rgba(243,128,32,0.05)); border: 1px solid var(--accent);}
.lb-rank{ font-weight: 800; opacity:.6;}
.lb-name{ font-weight: 600;}
.lb-score{ font-weight: 800; color: var(--accent-soft);}

.lb-footer{ max-width: 480px; margin: 0 auto; width: 100%; z-index:1; position: relative;}
.lb-thanks{ text-align:center; font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 14px;}

/* Host badge */
.host-badge{
  position: fixed; bottom: 16px; left: 16px;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px; padding: 10px 14px;
  font-size: 11px; min-width: 140px;
  z-index: 50;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.host-row{ display:flex; justify-content:space-between; gap: 10px;}
.host-row span{ opacity:.5;}
.host-row strong{ font-weight: 700;}

/* =================== HOST CONTROL PANEL =================== */
.host-shell{
  display:grid; grid-template-rows: auto 1fr; height:100%; padding: 24px; gap: 18px;
  z-index: 1; position: relative;
}
.host-header{ display:flex; align-items:center; justify-content:space-between; gap: 18px;}
.host-header .pin-pill strong{ font-size: 26px;}
.host-card{
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(20px); border-radius: 22px; padding: 22px;
  display:flex; flex-direction: column; gap: 16px; min-height: 0;
  /* Host-card sits in a `grid-template-rows: 1fr` cell — without overflow
     hidden a very large player list would push the card past the viewport. */
  overflow: hidden;
}
/* Used inside Question/Reveal/Ended panels to make the middle content area
   shrink and scroll so the bottom action buttons (Sonraki / Bitir / …) are
   always visible regardless of viewport height. */
.host-scroll-body{
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Reserve scrollbar width so content alignment is stable */
  scrollbar-gutter: stable;
}
.host-actions{ display:flex; gap: 12px; flex-wrap: wrap;}
.host-actions .btn-primary{ width:auto; }
.host-meta{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 12px;
}
.host-meta .stat{
  background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px;
  padding: 12px 14px;
}
.host-meta .stat-lbl{ margin-top:0;}
.host-link{ color: var(--accent-soft); font-size: 13px; word-break: break-all;}

/* =================== LANGUAGE TOGGLE =================== */
.lang-toggle{
  display: inline-flex; gap: 0; background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 100px;
  padding: 3px; user-select: none;
}
.lang-toggle-btn{
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
  padding: 5px 12px; border-radius: 100px; cursor: pointer;
  background: transparent; color: rgba(255,255,255,0.6); border: 0;
  transition: background .15s, color .15s;
}
.lang-toggle-btn:hover{ color: rgba(255,255,255,0.9);}
.lang-toggle-btn--active{
  background: var(--accent); color: #0a2a30;
}

/* Floating variant — fixed to the top-right corner of every page so it is
   reachable from any state (player join, lobby, in-game, host login, host
   panel, editor, history). Slightly stronger backdrop so it stays legible
   above any layout. Safe-area aware for notched mobile devices. */
.lang-toggle--floating{
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  z-index: 100;
  background: rgba(0,0,0,0.55);
  border-color: rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
@media (max-width: 480px){
  .lang-toggle--floating{ top: calc(env(safe-area-inset-top, 0px) + 8px); right: 8px; }
  .lang-toggle--floating .lang-toggle-btn{ padding: 4px 9px; font-size: 11px;}
}

/* =================== QUESTION EDITOR (/host/questions) =================== */
.editor-shell{
  position: relative; z-index: 1;
  max-width: 920px; margin: 0 auto; padding: 24px 20px 80px;
  display: flex; flex-direction: column; gap: 16px;
  height: 100%; overflow-y: auto;
}
.editor-header{
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding-bottom: 8px;
}
.editor-header > a, .editor-header > button{ width: auto; justify-self: start;}
.editor-header > .brand-row{ justify-self: center;}
.editor-section-head{
  font-size: 12px; text-transform: uppercase; letter-spacing: 2px;
  color: rgba(255,255,255,0.6); font-weight: 800;
  margin-top: 8px; padding: 0 4px;
}
.q-editor-card{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(20px);
  border-radius: 18px; padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 14px 40px -20px rgba(0,0,0,0.6);
}
.q-editor-card--new{
  border-style: dashed; border-color: rgba(243,128,32,0.4);
}
.q-editor-head{
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px;
  color: rgba(255,255,255,0.7); font-weight: 800;
}
.q-editor-actions{ display: flex; gap: 8px; align-items: center;}
.opt-count-select{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: rgba(255,255,255,0.7); font-weight: 700;
  letter-spacing: 1px;
}
.opt-count-select select{
  background: rgba(255,255,255,0.08); color: white;
  border: 1px solid rgba(255,255,255,0.15); border-radius: 8px;
  padding: 4px 8px; font-family: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer;
}
.btn-icon{
  background: rgba(255,255,255,0.08); color: white;
  border: 1px solid rgba(255,255,255,0.12); border-radius: 8px;
  width: 32px; height: 32px; font-size: 16px; font-weight: 800;
}
.btn-icon:hover:not(:disabled){ background: rgba(255,255,255,0.15);}
.btn-icon:disabled{ opacity: 0.3; cursor: not-allowed;}

.field textarea{
  width: 100%; padding: 12px 14px; border-radius: 12px; font-size: 15px;
  background: rgba(255,255,255,0.08); color: white;
  border: 2px solid rgba(255,255,255,0.12); outline: none;
  transition: border-color .15s;
  font-family: inherit; resize: vertical;
}
.field textarea:focus{ border-color: var(--primary); background: rgba(0,160,175,0.10);}
.field input[type="number"]{ font-family: 'JetBrains Mono', monospace;}

.q-editor-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
/* 2 şık: yan-yana tek satır */
.q-editor-grid--2{ grid-template-columns: 1fr 1fr; }
/* 4 şık: mevcut 2x2 — default ile aynı */
.q-editor-grid--4{ grid-template-columns: 1fr 1fr; }
/* 5 şık: satır başına 1 input (kompakt liste — editörde okumak için bu daha iyi) */
.q-editor-grid--5{ grid-template-columns: 1fr; }
.ans-row{
  display: grid; grid-template-columns: 60px 1fr; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 12px;
  background: rgba(255,255,255,0.04); border: 2px solid transparent;
}
.ans-row--correct{ border-color: rgba(34,197,94,0.5); background: rgba(34,197,94,0.08);}
.ans-row-key{
  display: flex; align-items: center; gap: 8px; font-weight: 800; cursor: pointer;
  color: rgba(255,255,255,0.85);
}
.ans-row-key input[type="radio"]{ accent-color: #22C55E; transform: scale(1.2); }
.ans-row-key span{
  display: inline-block; width: 24px; text-align: center;
}
.ans-row--0 .ans-row-key span{ color: var(--ans1);}
.ans-row--1 .ans-row-key span{ color: var(--ans2);}
.ans-row--2 .ans-row-key span{ color: var(--ans3);}
.ans-row--3 .ans-row-key span{ color: var(--ans4);}
.ans-row--4 .ans-row-key span{ color: var(--ans5);}
.ans-row input[type="text"], .ans-row input:not([type]){
  width: 100%; padding: 10px 12px; border-radius: 10px; font-size: 14px;
  background: rgba(0,0,0,0.25); color: white;
  border: 1px solid rgba(255,255,255,0.08); outline: none;
}
.ans-row input:focus{ border-color: var(--primary);}

.q-editor-actions-row{ display: flex; gap: 10px; flex-wrap: wrap;}
.btn-primary--dirty{
  animation: dirtyPulse 1.4s ease-in-out infinite;
}
@keyframes dirtyPulse{
  0%,100%{ box-shadow: 0 6px 0 0 #C5651A, 0 12px 24px -8px rgba(243,128,32,0.5);}
  50%{ box-shadow: 0 6px 0 0 #C5651A, 0 16px 30px -6px rgba(243,128,32,0.8);}
}

.new-q-btn{
  width: auto; align-self: center; min-width: 240px; margin-top: 8px;
  border: 2px dashed rgba(243,128,32,0.6);
  background: rgba(243,128,32,0.1) !important;
  box-shadow: none !important;
}
.new-q-btn:hover{ background: rgba(243,128,32,0.2) !important;}

@media (max-width: 720px){
  .q-editor-grid{ grid-template-columns: 1fr;}
  .editor-header{ grid-template-columns: auto 1fr; gap: 8px;}
  .editor-header > div:last-child{ display: none;}
}

/* =================== HISTORY (/host/history) =================== */
.history-row{
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px; padding: 14px 18px; cursor: pointer;
  transition: background .12s, border-color .12s, transform .08s;
}
.history-row:hover{ background: rgba(255,255,255,0.10); border-color: rgba(243,128,32,0.4);}
.history-row:active{ transform: translateY(1px); }
.history-row-main{ display: flex; flex-direction: column; gap: 4px; min-width: 0;}
.history-row-pin{
  font-size: 11px; color: rgba(255,255,255,0.55); letter-spacing: 1px; text-transform: uppercase;
}
.history-row-pin strong{
  font-family: 'JetBrains Mono', monospace; color: white; font-size: 14px; letter-spacing: 2px;
}
.history-row-title{ font-weight: 700; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.history-row-meta{ font-size: 12px; color: rgba(255,255,255,0.65); display: flex; gap: 6px; align-items: center; flex-wrap: wrap;}
.history-row-stats{ display: flex; gap: 16px; align-items: center;}
.stat-compact{ text-align: center; min-width: 60px;}
.stat-compact-num{ font-weight: 900; font-size: 22px; color: var(--accent-soft);}
.stat-compact-lbl{ font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.6);}
.stat-compact--wide{ min-width: 120px; max-width: 180px;}
.stat-compact--wide .stat-compact-num{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: white;}

.badge{
  display: inline-block; padding: 2px 10px; border-radius: 100px;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
  background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8);
}
.badge--lobby{ background: rgba(0,160,175,0.25); color: var(--primary);}
.badge--playing{ background: rgba(243,128,32,0.25); color: var(--accent-soft);}
.badge--ended{ background: rgba(34,197,94,0.2); color: #86efac;}

.history-lb{ display: flex; flex-direction: column; gap: 4px;}
.history-lb-row{
  display: grid; grid-template-columns: 60px 1fr 1fr 80px; gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,0.03);
  font-size: 14px;
}
.history-lb-row--0{ background: linear-gradient(90deg, rgba(243,128,32,0.3), rgba(243,128,32,0.05)); border: 1px solid var(--accent);}
.history-lb-row--1{ background: linear-gradient(90deg, rgba(0,160,175,0.25), rgba(0,160,175,0.05));}
.history-lb-row--2{ background: linear-gradient(90deg, rgba(0,194,168,0.2), rgba(0,194,168,0.05));}
.history-lb-rank{ font-weight: 900; font-size: 16px;}
.history-lb-name{ font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.history-lb-email{ color: rgba(255,255,255,0.55); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.history-lb-score{ font-weight: 800; color: var(--accent-soft); text-align: right;}

.per-q-stats{ display: flex; flex-direction: column; gap: 4px;}
.per-q-head, .per-q-row{
  display: grid; grid-template-columns: 90px 1fr 100px 90px; gap: 12px; align-items: center;
  padding: 8px 10px;
}
.per-q-head{
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.5);
  font-weight: 800;
}
.per-q-row{ background: rgba(255,255,255,0.04); border-radius: 8px; font-size: 13px;}
.per-q-row > span:nth-child(2){ display: flex; align-items: center; gap: 8px;}
.per-q-bar{ flex: 1; height: 8px; background: rgba(255,255,255,0.1); border-radius: 100px; overflow: hidden; min-width: 60px;}
.per-q-bar-fill{ height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 100px;}
.per-q-bar-lbl{ font-size: 11px; min-width: 36px; text-align: right; font-weight: 700;}

@media (max-width: 720px){
  .history-row{ grid-template-columns: 1fr; gap: 10px;}
  .history-row-stats{ justify-content: space-between;}
  .stat-compact--wide{ display: none;}
  .history-lb-row{ grid-template-columns: 40px 1fr 60px;}
  .history-lb-email{ display: none;}
  .per-q-head, .per-q-row{ grid-template-columns: 70px 1fr 70px 60px; gap: 8px;}
}

/* Live answer breakdown for host during question phase */
.live-bars{ display:flex; flex-direction: column; gap: 8px;}
.live-bar{ display:grid; grid-template-columns: 220px 1fr 50px; align-items:center; gap: 12px; }
.live-bar-label{ font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.live-bar-label strong{ display:inline-block; width: 22px; height: 22px; border-radius: 6px; text-align: center; line-height: 22px; margin-right: 8px; font-size: 12px;}
.live-bar--0 .live-bar-label strong{ background: var(--ans1); color: white;}
.live-bar--1 .live-bar-label strong{ background: var(--ans2); color: white;}
.live-bar--2 .live-bar-label strong{ background: var(--ans3); color: var(--ink);}
.live-bar--3 .live-bar-label strong{ background: var(--ans4); color: white;}
.live-bar--4 .live-bar-label strong{ background: var(--ans5); color: white;}
.live-bar-track{ height: 14px; background: rgba(255,255,255,0.08); border-radius: 100px; overflow:hidden;}
.live-bar-fill{ height:100%; transition: width .25s ease; border-radius: 100px;}
.live-bar--0 .live-bar-fill{ background: var(--ans1);}
.live-bar--1 .live-bar-fill{ background: var(--ans2);}
.live-bar--2 .live-bar-fill{ background: var(--ans3);}
.live-bar--3 .live-bar-fill{ background: var(--ans4);}
.live-bar--4 .live-bar-fill{ background: var(--ans5);}
.live-bar-count{ text-align:right; font-weight: 800; font-family: 'JetBrains Mono', ui-monospace, monospace;}

/* =================== DISPLAY (projector) =================== */
.display-shell{
  display:flex; flex-direction:column; align-items: center; justify-content: center;
  height: 100%; padding: 40px; gap: 36px; z-index: 1; position: relative;
}

/* New lobby layout: PIN+text on left, big QR on right, players below */
.display-lobby{
  display:flex; flex-direction: column; height: 100%; padding: 36px;
  z-index: 1; position: relative; gap: 24px;
  /* Hard-clip — even if a child miscalculates its size, nothing can spill
     past the projector edges and overlap a sibling. */
  overflow: hidden;
}
.display-lobby-grid{
  display:grid; grid-template-columns: 1fr auto; gap: 48px;
  align-items: center; flex: 1; min-height: 0;
  overflow: hidden;
}
.display-lobby-left{ display:flex; flex-direction:column; align-items:flex-start; gap: 12px; }
.display-lobby-right{ display:flex; align-items:center; justify-content:center; }

.display-pin{
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(120px, 18vw, 220px);
  font-weight: 900; letter-spacing: 18px; line-height: 1;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-align:left;
}
.display-pin-label{ font-size: 18px; letter-spacing: 6px; color: var(--accent-soft); font-weight: 800;}
.display-instructions{ font-size: clamp(18px, 1.8vw, 26px); color: rgba(255,255,255,0.9);}

.qr-card-bare{
  background: white; padding: 18px; border-radius: 22px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
  display:flex; align-items:center; justify-content:center;
  /* Scale to the smaller of 420px or 40% of viewport height — projector setups
     often have short aspect ratios (e.g. 1920×720) where a fixed 420px QR
     would push the player list out of the bottom of the screen. */
  width: min(420px, 40vh);
  height: min(420px, 40vh);
}
.qr-card-bare svg{ display:block; width: 100%; height: 100%; }

.display-lobby-players{
  background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px; padding: 18px; max-height: 26vh; overflow-y: auto;
}
.display-counter{ font-size: 20px; color: rgba(255,255,255,0.85); margin-bottom: 12px;}
.display-counter strong{ color: var(--accent); font-size: 32px; font-weight: 900;}
.players-grid--lg{ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px;}
.players-grid--lg .chip{ font-size: 15px; padding: 10px 14px;}
.players-grid--lg .chip-av{ width: 32px; height: 32px; font-size: 13px;}

/* Old layout fallback (kept for backwards-compat refs) */
.display-join-row{ display:flex; gap: 36px; align-items:center; justify-content:center; flex-wrap:wrap;}
.qr-card{
  background: white; padding: 18px; border-radius: 18px;
  display:flex; flex-direction:column; align-items:center; gap: 8px;
  color: var(--ink); font-weight: 700;
}
.qr-card svg{ width: 220px; height: 220px;}

.display-question{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height: 100%; padding: 36px; gap: 28px;
}
.display-q-card{
  width: 100%; max-width: 1400px;
  background: white; color: var(--ink);
  border-radius: 24px; padding: 48px 56px; text-align:center;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
}
.display-q-text{
  font-size: clamp(28px, 4vw, 56px); font-weight: 900; line-height: 1.2; letter-spacing: -0.5px;
  text-wrap: balance;
}
.display-answers{
  display:grid; grid-template-columns: 1fr 1fr; gap: 18px;
  width: 100%; max-width: 1400px; flex: 1; min-height: 0;
}
.display-answers .ans{ font-size: clamp(20px, 2.4vw, 32px); padding: 30px 36px;}
.display-answers .ans .ans-icon{ width: 56px; height: 56px;}
.display-answers .ans.correct{ outline: 6px solid white; outline-offset: 6px; transform: scale(1.02);}
.display-answers .ans.wrong{ opacity: .35; filter: grayscale(.6);}

/* Display 2-option layout: huge two-column True/False */
.display-answers--2{
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}
.display-answers--2 .ans{ font-size: clamp(28px, 3vw, 44px); padding: 48px 56px; }
.display-answers--2 .ans .ans-icon{ width: 96px; height: 96px; }

/* Display 5-option: 3 + 2 layout on a 6-col grid */
.display-answers--5{
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 14px;
}
.display-answers--5 > :nth-child(1){ grid-column: 1 / 3; grid-row: 1; }
.display-answers--5 > :nth-child(2){ grid-column: 3 / 5; grid-row: 1; }
.display-answers--5 > :nth-child(3){ grid-column: 5 / 7; grid-row: 1; }
.display-answers--5 > :nth-child(4){ grid-column: 2 / 4; grid-row: 2; }
.display-answers--5 > :nth-child(5){ grid-column: 4 / 6; grid-row: 2; }
.display-answers--5 .ans{ font-size: clamp(18px, 2vw, 26px); padding: 22px 26px; }
.display-answers--5 .ans .ans-icon{ width: 44px; height: 44px; }

.display-timer-row{ display:flex; align-items:center; gap: 24px; width:100%; max-width: 1400px;}
.display-timer-row .q-timer-ring{ width: 100px; height: 100px;}
.display-timer-row .ring-num{ font-size: 36px;}
.display-counter-pill{ background: rgba(255,255,255,0.08); padding: 10px 18px; border-radius: 100px; font-size: 18px; font-weight: 700;}

/* Interim leaderboard — top 10 between questions */
.display-interim{
  display:flex; flex-direction:column; align-items: center; justify-content: flex-start;
  height: 100%; padding: 32px 40px; gap: 18px; z-index: 1; position: relative;
}
.interim-title{
  font-size: clamp(36px, 5vw, 64px); margin: 0; font-weight: 900; letter-spacing: -1px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.interim-list{
  width: 100%; max-width: 900px;
  background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px; padding: 12px; display:flex; flex-direction: column; gap: 6px;
}
.interim-row{
  display:grid; grid-template-columns: 80px 1fr auto; align-items:center;
  padding: 14px 18px; border-radius: 14px; font-size: clamp(18px, 1.8vw, 24px);
  background: rgba(255,255,255,0.03); animation: chipIn .35s ease both;
}
.interim-row--0{ background: linear-gradient(90deg, rgba(243,128,32,0.35), rgba(243,128,32,0.05)); border: 1px solid var(--accent);}
.interim-row--1{ background: linear-gradient(90deg, rgba(0,160,175,0.30), rgba(0,160,175,0.05)); border: 1px solid var(--primary);}
.interim-row--2{ background: linear-gradient(90deg, rgba(0,194,168,0.25), rgba(0,194,168,0.05)); border: 1px solid var(--ans4);}
.interim-rank{ font-size: clamp(20px, 2vw, 30px); font-weight: 900;}
.interim-name{ font-weight: 700;}
.interim-score{ font-weight: 900; color: var(--accent-soft); font-size: clamp(20px, 2vw, 30px);}

.display-leaderboard{
  display:flex; flex-direction:column; align-items: center; justify-content: center;
  height:100%; padding: 40px; gap: 24px;
}
.display-leaderboard h1{ font-size: clamp(40px, 5vw, 72px); margin: 0; font-weight: 900;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.podium--lg .podium--0 .podium-bar{ height: 280px; font-size: 56px;}
.podium--lg .podium--1 .podium-bar{ height: 200px; font-size: 56px;}
.podium--lg .podium--2 .podium-bar{ height: 140px; font-size: 56px;}
.podium--lg .podium-name{ font-size: 22px;}
.podium--lg .podium-score{ font-size: 36px;}
.podium--lg{ max-width: 960px;}

/* Safe-area for notch/home-bar phones */
.screen, .lobby, .question, .result, .leaderboard, .display-shell, .host-shell {
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

/* Tablets / small laptops */
@media (max-width: 720px){
  .countdown-num{ font-size: 140px;}
  .podium{ grid-template-columns: 1fr 1fr 1fr; }
  .lb-head h1{ font-size: 32px;}
  .q-card{ padding: 22px;}

  /* Player phone in question phase: keep 2x2 shape grid (Kahoot style) */
  .answers{ grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px;}
  .ans{ padding: 18px 16px; }
  .shape-grid .ans .ans-icon{ width: 56px; height: 56px;}

  .live-bar{ grid-template-columns: 1fr 1fr 40px; }
  .live-bar-label{ font-size: 12px;}
}

/* Phones */
@media (max-width: 480px){
  body{ font-size: 15px;}
  .join-card{ padding: 22px 20px; border-radius: 18px;}
  .pin-input{ font-size: 28px; letter-spacing: 8px; padding: 14px;}
  .join-form h1{ font-size: 26px;}
  .field input{ font-size: 16px; padding: 12px 14px;}
  .consent{ font-size: 12px;}
  .btn-primary{ padding: 14px 22px; font-size: 16px;}

  .lobby{ padding: 16px;}
  .pin-pill{ font-size: 11px; padding: 8px 14px;}
  .pin-pill strong{ font-size: 16px; letter-spacing: 2px;}
  .you-card{ padding: 14px 16px 14px 14px; gap: 12px;}
  .you-name{ font-size: 18px;}
  .avatar{ width: 48px; height: 48px; font-size: 16px;}
  .countdown-num{ font-size: 110px;}
  .lobby-players{ max-height: 180px; padding: 12px;}
  .players-grid{ grid-template-columns: repeat(auto-fill, minmax(120px,1fr));}
  .chip{ font-size: 12px; padding: 6px 10px;}
  .chip-av{ width: 22px; height: 22px; font-size: 10px;}

  .question{ padding: 14px; gap: 10px;}
  .q-top{ gap: 8px;}
  .q-idx{ font-size: 12px; padding: 6px 12px;}
  .q-timer-ring{ width: 60px; height: 60px;}
  .ring-num{ font-size: 18px;}
  .shape-grid .ans .ans-icon{ width: 48px; height: 48px;}
  .shape-grid .ans .ans-text{ font-size: 18px;}
  .shape-grid .ans .ans-key{ font-size: 12px; width: 26px; height: 26px;}

  .result h2{ font-size: 40px;}
  .result-emoji{ width: 96px; height: 96px;}
  .result-stats{ padding: 14px; gap: 8px;}
  .stat-num{ font-size: 20px;}
  .stat-lbl{ font-size: 10px;}

  .leaderboard{ padding: 16px; gap: 14px;}
  .lb-head h1{ font-size: 26px;}
  .lb-row{ padding: 10px 12px; grid-template-columns: 40px 1fr auto; font-size: 13px;}
  .podium-name{ font-size: 11px;}
  .podium-score{ font-size: 16px;}
  .podium-bar{ font-size: 22px;}
  .podium--0 .podium-bar{ height: 110px; padding-top: 10px;}
  .podium--1 .podium-bar{ height: 80px;}
  .podium--2 .podium-bar{ height: 60px;}

  /* Display & host on phones — mostly used on laptops/projector but be safe */
  .display-lobby-grid{ grid-template-columns: 1fr;}
  .display-pin{ font-size: clamp(80px, 22vw, 140px); letter-spacing: 10px; text-align:center;}
  .display-lobby-left{ align-items:center;}
  .qr-card-bare svg{ width: 220px !important; height: 220px !important;}
  .display-q-card{ padding: 22px 18px;}
  .display-q-text{ font-size: clamp(20px, 5vw, 28px);}
  .display-answers{ grid-template-columns: 1fr;}
  .display-answers .ans{ padding: 16px 18px; font-size: 16px;}
  /* 2/5 layouts also collapse to single column on tiny screens */
  .display-answers--2, .display-answers--5{
    grid-template-columns: 1fr; grid-template-rows: auto;
  }
  .display-answers--5 > *, .display-answers--2 > *{
    grid-column: auto !important; grid-row: auto !important;
  }
  .shape-grid--5{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .shape-grid--5 > *{ grid-column: auto !important; grid-row: auto !important; }
  .interim-list{ padding: 8px;}
  .interim-row{ grid-template-columns: 50px 1fr auto; padding: 10px 12px; font-size: 14px;}
  .interim-rank{ font-size: 18px;}

  .host-shell{ padding: 16px; gap: 12px;}
  .host-card{ padding: 16px; gap: 12px;}
  .live-bar{ grid-template-columns: 1fr 1fr 36px; gap: 8px;}
  .live-bar-label{ font-size: 11px;}
}

/* =================== SHORT-VIEWPORT (≤800px tall) =================== */
/*
 * Target the laptop + iPad sizes the user explicitly cares about (1024×768,
 * 1366×768, 1280×720). At full font/padding the host panels and display
 * screens would overflow vertically and push action buttons off-screen.
 * Compress fonts + paddings + podium heights so everything fits.
 */
@media (max-height: 800px) {
  /* --- HOST PANEL --- */
  .host-shell{ padding: 14px; gap: 12px; }
  .host-card{ padding: 16px; gap: 12px; }
  .host-meta .stat{ padding: 8px 10px; }
  .stat-num{ font-size: 22px; }
  .q-card{ padding: 16px; min-height: 0; }
  .q-text{ font-size: clamp(16px, 2vw, 22px); }
  .q-timer-ring{ width: 60px; height: 60px; }
  .ring-num{ font-size: 18px; }
  .live-bar{ padding: 0; }
  .live-bar-label{ font-size: 11px; }
  .live-bar-track{ height: 10px; }
  .host-actions{ gap: 8px; }
  .host-actions .btn-primary,
  .host-actions .btn-secondary{ padding: 10px 18px; font-size: 14px; }

  /* --- DISPLAY (projection) --- */
  .display-question{ padding: 20px; gap: 16px; }
  .display-q-card{ padding: 24px 32px; border-radius: 18px; }
  .display-q-text{ font-size: clamp(20px, 3vw, 36px); }
  .display-timer-row .q-timer-ring{ width: 64px; height: 64px; }
  .display-timer-row .ring-num{ font-size: 22px; }
  .display-counter-pill{ padding: 8px 14px; font-size: 14px; }
  .display-answers{ gap: 12px; }
  .display-answers .ans{ padding: 18px 22px; font-size: clamp(16px, 1.8vw, 22px); }
  .display-answers .ans .ans-icon{ width: 40px; height: 40px; }

  .display-lobby{ padding: 20px; gap: 14px; }
  .display-pin{ font-size: clamp(80px, 14vw, 160px); letter-spacing: 12px; }
  .display-pin-label{ font-size: 14px; letter-spacing: 4px; }
  .display-instructions{ font-size: clamp(14px, 1.4vw, 20px); }
  .qr-card-bare{ width: min(320px, 38vh); height: min(320px, 38vh); padding: 12px; }
  .display-lobby-players{ max-height: 22vh; padding: 12px; }
  .display-counter{ font-size: 16px; margin-bottom: 8px; }
  .display-counter strong{ font-size: 24px; }

  .display-leaderboard{ padding: 24px; gap: 14px; }
  .display-leaderboard h1{ font-size: clamp(28px, 4vw, 48px); }
  .podium--lg .podium--0 .podium-bar{ height: 180px; font-size: 40px; }
  .podium--lg .podium--1 .podium-bar{ height: 130px; font-size: 40px; }
  .podium--lg .podium--2 .podium-bar{ height: 90px; font-size: 40px; }
  .podium--lg .podium-name{ font-size: 16px; }
  .podium--lg .podium-score{ font-size: 26px; }
  .display-leaderboard .lb-list{ flex: 1; min-height: 0; overflow-y: auto; max-height: 30vh; }

  .display-interim{ padding: 20px 32px; gap: 12px; }
  .interim-title{ font-size: clamp(24px, 3.5vw, 44px); }
  .interim-row{ padding: 8px 14px; font-size: clamp(14px, 1.4vw, 18px); }
  .interim-list{ flex: 1; min-height: 0; overflow-y: auto; }

  .countdown-num{ font-size: clamp(120px, 30vh, 240px); }
}

/* Even tighter for very short windows (split-screen / smaller laptops) */
@media (max-height: 640px) {
  .display-pin{ font-size: clamp(60px, 12vw, 110px); letter-spacing: 8px; }
  .qr-card-bare{ width: min(240px, 34vh); height: min(240px, 34vh); }
  .display-lobby-grid{ gap: 24px; }
  .display-q-card{ padding: 16px 20px; }
  .display-q-text{ font-size: clamp(16px, 2.4vw, 26px); }
  .display-answers .ans{ padding: 12px 16px; font-size: clamp(14px, 1.6vw, 18px); }
  .display-answers .ans .ans-icon{ width: 28px; height: 28px; }
  .display-leaderboard h1{ font-size: clamp(22px, 3vw, 36px); }
  .podium--lg .podium--0 .podium-bar{ height: 130px; font-size: 32px; }
  .podium--lg .podium--1 .podium-bar{ height: 90px; font-size: 32px; }
  .podium--lg .podium--2 .podium-bar{ height: 60px; font-size: 32px; }
}