/* MyBibleQuiz — shared styles.
   Game-show palette: deep grape stage, four bold answer lanes, gold for
   anything that is "yours" (buttons, your rank, the bookmark on the page).
   Fonts are served locally so the app works offline. */

@font-face { font-family:'Nunito'; src:url('/assets/Nunito-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Nunito'; src:url('/assets/Nunito-800.woff2') format('woff2'); font-weight:700 800; font-display:swap; }
@font-face { font-family:'Nunito'; src:url('/assets/Nunito-900.woff2') format('woff2'); font-weight:900; font-display:swap; }

:root{
  --grape-950:#1B0642; --grape-900:#2A0B5E; --grape-800:#381176;
  --grape-700:#46178F; --grape-500:#6B3FC4; --grape-300:#B9A0F5; --grape-100:#ECE4FF;
  --gold:#FFC933; --gold-deep:#C88F0B; --gold-ink:#2A1500;
  --good:#6BE38A; --bad:#FF6B84;
  --red:#E21B3C; --blue:#1368CE; --amber:#D89E00; --green:#26890C;

  /* Answer lanes. Each also carries its own symbol and letter, so the game
     still reads for colourblind players and on a washed-out projector. */
  --a-0:var(--red);   --a-0-edge:#A8102A;
  --a-1:var(--blue);  --a-1-edge:#0C4C9C;
  --a-2:var(--amber); --a-2-edge:#9E7300;
  --a-3:var(--green); --a-3-edge:#1A6108;

  --ink:#FFFFFF;
  --ink-dim:rgba(255,255,255,.7);
  --page:#FFFDF7; --page-ink:#22113F;
  --card:rgba(255,255,255,.08);
  --card-line:rgba(255,255,255,.16);
  --gutter:clamp(16px,4vw,40px);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{
  margin:0; padding:0; min-height:100%;
  background:var(--grape-900); color:var(--ink);
  font-family:'Nunito',ui-rounded,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-weight:600;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
body{
  /* A soft spotlight on the stage, with a faint scatter of stars. */
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(107,63,196,.75), transparent 70%),
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.07) 1px, transparent 1.6px) 0 0/90px 90px,
    radial-gradient(circle at 70% 80%, rgba(255,201,51,.08) 1px, transparent 1.6px) 0 0/130px 130px,
    linear-gradient(180deg, var(--grape-700), var(--grape-950));
  background-attachment:fixed;
}

button,input,select{ font:inherit; color:inherit; }
button{
  border:0; background:none; cursor:pointer;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  user-select:none;
}
:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
h1,h2,h3,p{ margin:0; }
code{ background:rgba(255,255,255,.12); padding:1px 6px; border-radius:6px; }

.screen{
  min-height:100dvh;
  display:flex; flex-direction:column;
  padding:max(var(--gutter),env(safe-area-inset-top)) var(--gutter)
          max(var(--gutter),env(safe-area-inset-bottom));
  gap:clamp(14px,2.4vh,28px);
}
.center{ align-items:center; justify-content:center; text-align:center; }
.hidden{ display:none !important; }
.grow{ flex:1 1 auto; min-height:0; }
.row{ display:flex; align-items:center; gap:14px; }
.between{ justify-content:space-between; }
.wrap{ flex-wrap:wrap; }

/* Brand lockup: mark + wordmark set in the UI face. */
.logo{ display:inline-flex; align-items:center; gap:10px; font-weight:900; font-size:21px; letter-spacing:-.01em; white-space:nowrap; }
.logo img{ width:34px; height:34px; display:block; }
.logo span{ color:#fff; }
.logo em{ font-style:normal; color:var(--gold); }

.eyebrow{ font-weight:800; font-size:clamp(13px,1.2vw,16px); color:var(--grape-100); }
.dim{ color:var(--ink-dim); }
.big{ font-weight:900; letter-spacing:-.02em; line-height:1; }

/* ------------------------------------------------------------- controls -- */
/* Chunky, pressable buttons: a darker edge underneath that collapses on press. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 28px; border-radius:12px;
  background:var(--gold); color:var(--gold-ink); font-weight:900; font-size:17px;
  box-shadow:0 5px 0 var(--gold-deep);
  transition:transform .08s ease, box-shadow .08s ease, filter .12s ease, opacity .12s ease;
}
.btn:hover{ filter:brightness(1.06); }
.btn:active{ transform:translateY(4px); box-shadow:0 1px 0 var(--gold-deep); }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:0 5px 0 var(--gold-deep); }
.btn.ghost{ background:rgba(255,255,255,.12); color:#fff; box-shadow:0 5px 0 rgba(0,0,0,.28); }
.btn.ghost:hover{ background:rgba(255,255,255,.2); filter:none; }
.btn.ghost:active{ box-shadow:0 1px 0 rgba(0,0,0,.28); }
.btn.big-cta{ padding:18px 44px; font-size:clamp(18px,2vw,24px); }

.field{
  width:100%; padding:16px 18px; border-radius:12px;
  background:#fff; border:3px solid transparent;
  color:var(--page-ink); outline:none; font-size:19px; font-weight:800;
  box-shadow:0 5px 0 rgba(0,0,0,.25);
}
.field::placeholder{ color:#8C7FA8; font-weight:700; }
.field:focus{ border-color:var(--gold); }
select.field{ color:var(--page-ink); }
.field.pin{
  text-align:center; font-size:clamp(30px,9vw,44px); font-weight:900;
  letter-spacing:.2em; padding:18px 12px;
}

.card{
  background:var(--card); border:2px solid var(--card-line);
  border-radius:16px; padding:clamp(16px,2.2vw,26px);
}
button.card{ transition:background .12s ease, border-color .12s ease; }
button.card:hover{ background:rgba(255,255,255,.14); border-color:var(--gold); }

.notice{
  padding:12px 16px; border-radius:12px; font-weight:800; font-size:15px;
  background:rgba(226,27,60,.22); border:2px solid rgba(255,107,132,.6); color:#FFE1E7;
}
.notice.ok{ background:rgba(38,137,12,.25); border-color:rgba(107,227,138,.6); color:#E3FFE9; }

/* ------------------------------------------------------ the question page -- */
/* Every question sits on a white page with a red ribbon bookmark. */
.qtext{
  position:relative; align-self:stretch;
  background:var(--page); color:var(--page-ink);
  border-radius:10px 18px 18px 10px;
  padding:clamp(18px,2.6vw,34px) clamp(22px,3vw,44px) clamp(18px,2.6vw,34px) clamp(34px,4vw,58px);
  font-weight:900; letter-spacing:-.015em; line-height:1.12; text-align:center;
  font-size:clamp(23px,3.6vw,56px);
  box-shadow:inset 10px 0 0 #EFE8D8, 0 8px 0 rgba(0,0,0,.22);
}
.qtext::before{
  content:''; position:absolute; top:-6px; left:clamp(12px,1.6vw,22px);
  width:clamp(12px,1.4vw,18px); height:clamp(34px,4.4vw,56px);
  background:var(--red);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);
}
.qimage{
  max-height:26vh; max-width:100%; object-fit:contain;
  border-radius:14px; align-self:center; border:4px solid #fff;
}

/* -------------------------------------------------------- answer tiles --- */
.answers{
  display:grid; gap:clamp(10px,1.4vw,16px);
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.tile{
  --bg:var(--a-0); --edge:var(--a-0-edge);
  position:relative; display:flex; align-items:center; gap:14px;
  padding:clamp(14px,2vw,24px); border-radius:14px; min-height:clamp(84px,15vh,150px);
  background:var(--bg); color:#fff;
  box-shadow:0 6px 0 var(--edge);
  font-weight:800; font-size:clamp(16px,2.1vw,27px); line-height:1.2;
  text-align:left; transition:transform .08s ease, box-shadow .08s ease, filter .18s ease, opacity .18s ease;
}
.tile[data-lane="1"]{ --bg:var(--a-1); --edge:var(--a-1-edge); }
.tile[data-lane="2"]{ --bg:var(--a-2); --edge:var(--a-2-edge); }
.tile[data-lane="3"]{ --bg:var(--a-3); --edge:var(--a-3-edge); }
button.tile:active{ transform:translateY(5px); box-shadow:0 1px 0 var(--edge); }
.tile .shape{
  flex:0 0 auto; width:clamp(34px,3.6vw,50px); height:clamp(34px,3.6vw,50px);
  padding:clamp(6px,.7vw,9px); border-radius:50%;
  background:rgba(255,255,255,.2);
}
.tile .label{ flex:1 1 auto; min-width:0; text-shadow:0 1px 1px rgba(0,0,0,.2); }
.tile .pick{
  position:absolute; top:8px; right:12px; font-size:13px; font-weight:900; opacity:.75;
}

.tile.dimmed{ opacity:.3; filter:saturate(.35); }
.tile.chosen,.tile.right{ outline:5px solid #fff; outline-offset:3px; }
.tile.right .pick{ opacity:1; font-size:clamp(14px,1.7vw,21px); }
.tile.right .pick::after{ content:' ✓'; }
.tile .tally{
  position:absolute; right:14px; bottom:10px;
  min-width:2em; padding:2px 10px; border-radius:999px; text-align:center;
  background:rgba(0,0,0,.25); font-size:clamp(15px,1.8vw,23px); font-weight:900;
}

/* ------------------------------------------------------------ host bits -- */
.pin-display{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:#fff; color:var(--page-ink); padding:12px 22px 14px; border-radius:16px;
  box-shadow:0 6px 0 rgba(0,0,0,.25);
}
.pin-display .eyebrow{ color:var(--grape-500); }
.pin-value{
  font-weight:900; font-size:clamp(46px,9vw,110px); line-height:1;
  letter-spacing:.06em; color:var(--grape-700);
}
.qr-panel{
  background:#fff; padding:14px; border-radius:18px; line-height:0;
  box-shadow:0 6px 0 rgba(0,0,0,.25);
}
.qr-panel img{ display:block; width:clamp(150px,20vw,240px); height:auto; }
.join-url{ font-weight:900; font-size:clamp(16px,2vw,26px); color:var(--gold); word-break:break-all; }

.player-chips{ display:flex; flex-wrap:wrap; gap:10px; align-content:flex-start; overflow:auto; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:10px; font-weight:900; font-size:clamp(14px,1.4vw,19px);
  background:#fff; color:var(--page-ink); box-shadow:0 4px 0 rgba(0,0,0,.22);
  animation:pop .3s cubic-bezier(.2,1.5,.4,1);
}
.chip.gone{ opacity:.45; }
.chip button{ opacity:.5; font-weight:900; padding:0 2px; color:var(--page-ink); }
.chip button:hover{ opacity:1; color:var(--red); }

.timer{
  flex:0 0 auto; width:clamp(64px,7vw,104px); height:clamp(64px,7vw,104px);
  display:grid; place-items:center; position:relative;
  background:var(--grape-500); border-radius:50%;
}
.timer svg{ position:absolute; inset:0; transform:rotate(-90deg); }
.timer .ring-track{ stroke:rgba(255,255,255,.18); }
.timer .ring-fill{ stroke:var(--gold); transition:stroke-dashoffset .3s linear, stroke .3s; }
.timer.urgent .ring-fill{ stroke:var(--bad); }
.timer span{ position:relative; font-weight:900; font-size:clamp(22px,2.6vw,38px); }

.board{ display:flex; flex-direction:column; gap:10px; width:min(760px,100%); }
.board-row{
  display:flex; align-items:center; gap:16px;
  padding:13px 20px; border-radius:12px;
  background:#fff; color:var(--page-ink);
  box-shadow:0 4px 0 rgba(0,0,0,.22);
  font-weight:900; font-size:clamp(16px,1.9vw,24px);
}
.board-row .rank{
  display:grid; place-items:center; width:1.8em; height:1.8em; border-radius:50%;
  background:var(--grape-100); color:var(--grape-700); font-size:.85em;
}
.board-row .who{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
.board-row.me{ background:var(--gold); color:var(--gold-ink); }
.board-row.me .rank{ background:rgba(0,0,0,.12); color:var(--gold-ink); }

.podium{ display:flex; align-items:flex-end; justify-content:center; gap:clamp(10px,2vw,26px); width:100%; }
.podium-step{ display:flex; flex-direction:column; align-items:center; gap:12px; flex:0 1 min(260px,30%); }
.podium-bar{
  width:100%; border-radius:14px 14px 0 0; background:var(--grape-500);
  display:flex; align-items:flex-start; justify-content:center; padding-top:14px;
  font-size:clamp(26px,4vw,54px); font-weight:900; color:#fff;
  box-shadow:inset 0 -12px 0 rgba(0,0,0,.15);
}
.podium-step[data-place="1"] .podium-bar{ height:clamp(130px,22vh,230px); background:var(--gold); color:var(--gold-ink); }
.podium-step[data-place="2"] .podium-bar{ height:clamp(96px,16vh,170px); background:#D9D4E6; color:var(--page-ink); }
.podium-step[data-place="3"] .podium-bar{ height:clamp(72px,12vh,130px); background:#D08A4E; }
.podium-name{ font-weight:900; font-size:clamp(15px,1.8vw,24px); text-align:center; word-break:break-word; }

.dist{ display:flex; flex-direction:column; gap:10px; }
.dist-row{ display:flex; align-items:center; gap:12px; font-weight:800; }
.dist-bar{ flex:1 1 auto; height:26px; border-radius:8px; background:rgba(255,255,255,.12); overflow:hidden; }
.dist-fill{ height:100%; border-radius:8px; transition:width .5s ease; }

/* --------------------------------------------------------- player bits --- */
.status-hero{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center; flex:1 1 auto;
}
.verdict{ font-weight:900; font-size:clamp(36px,11vw,66px); line-height:1; }
.verdict.good{ color:var(--good); }
.verdict.bad{ color:var(--bad); }
.verdict.gold{ color:var(--gold); }
.points-won{
  font-weight:900; font-size:clamp(24px,7vw,40px);
  background:rgba(0,0,0,.22); padding:6px 22px; border-radius:999px;
}
.streak-flag{
  display:inline-block; padding:7px 15px; border-radius:999px;
  background:var(--gold); color:var(--gold-ink); font-weight:900; font-size:15px;
}
.score-pill{
  padding:8px 16px; border-radius:10px; background:#fff; color:var(--page-ink);
  font-weight:900; font-size:16px; box-shadow:0 4px 0 rgba(0,0,0,.22); white-space:nowrap;
}

.spinner{
  width:46px; height:46px; border-radius:50%;
  border:5px solid rgba(255,255,255,.2); border-top-color:var(--gold);
  animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.pop{ animation:pop .34s cubic-bezier(.2,1.5,.4,1); }
@keyframes pop{ from{ transform:scale(.86); opacity:0; } to{ transform:scale(1); opacity:1; } }
.fade{ animation:fade .3s ease; }
@keyframes fade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

.offline-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background:var(--red); color:#fff; font-weight:900; text-align:center; font-size:15px;
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

@media (max-width:640px){
  .qtext{ font-size:clamp(20px,6vw,30px); }
  .tile{ min-height:clamp(96px,17vh,150px); font-size:18px; flex-direction:column; align-items:flex-start; justify-content:space-between; }
  .logo{ font-size:18px; }
  .logo img{ width:30px; height:30px; }
}

/* ------------------------------------------------------- quiz editor ---
   Denser than the game screens on purpose: this one is read at desk
   distance on a laptop, not from the back of a hall. */
.notice.ok{
  background:rgba(107,227,138,.18); border-color:rgba(107,227,138,.55); color:#DFFFE8;
}
.field.sm{ padding:10px 14px; font-size:16px; box-shadow:0 3px 0 rgba(0,0,0,.22); }
.btn.sm{ padding:9px 16px; font-size:14px; box-shadow:0 3px 0 var(--gold-deep); }
.btn.ghost.sm{ padding:9px 16px; font-size:14px; }
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; flex:0 0 auto; border-radius:9px;
  background:rgba(255,255,255,.12); border:2px solid var(--card-line);
  color:var(--ink); font-weight:900; font-size:16px; line-height:1; cursor:pointer;
}
.icon-btn:hover{ background:rgba(255,255,255,.22); }
.icon-btn[disabled]{ opacity:.35; cursor:default; }
.qedit{ display:flex; flex-direction:column; gap:12px; }
.qedit .opt{ display:flex; align-items:center; gap:10px; }
.qedit .opt input[type=radio], .qedit .opt input[type=checkbox]{
  width:24px; height:24px; flex:0 0 auto; accent-color:var(--gold); cursor:pointer;
}
.qedit .lane{
  width:30px; flex:0 0 auto; text-align:center;
  font-weight:900; color:var(--grape-100);
}
.qedit select{
  padding:9px 12px; border-radius:10px; font-weight:800; font-size:15px;
  background:#fff; color:var(--page-ink); border:2px solid transparent; cursor:pointer;
}
.qedit textarea{
  width:100%; min-height:96px; resize:vertical; padding:12px 14px; border-radius:12px;
  background:#fff; color:var(--page-ink); border:3px solid transparent;
  font:inherit; font-size:16px; font-weight:800; outline:none;
}
.editor-bar{
  position:sticky; bottom:0; display:flex; gap:12px; flex-wrap:wrap;
  padding:14px 0 4px; background:linear-gradient(transparent, var(--grape-950) 38%);
}