/* 聖經拼字板 Bible Pick — 深藍夜空 × 金色 × 羊皮紙 */
:root{
  --navy:#0b1630; --navy2:#13244a; --navy3:#1b3262;
  --gold:#d9b45a; --gold2:#f2d98c; --gold-d:#a8832e;
  --parch:#f6ecd2; --parch2:#eadcb4; --ink:#2b2010;
  --ok:#6fcf97; --bad:#e76f6f;
  --serif:"Noto Serif TC","Songti TC","PMingLiU","Source Han Serif TC",serif;
  --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--serif);color:var(--parch);background:var(--navy);
  min-height:100vh;min-height:100dvh;overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
.sky{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1200px 600px at 50% -10%,rgba(242,217,140,.22),transparent 60%),
    radial-gradient(circle at 15% 30%,rgba(255,255,255,.07) 0 1px,transparent 2px),
    radial-gradient(circle at 80% 18%,rgba(255,255,255,.08) 0 1px,transparent 2px),
    radial-gradient(circle at 65% 70%,rgba(255,255,255,.05) 0 1px,transparent 2px),
    linear-gradient(180deg,var(--navy2),var(--navy) 70%);
}
.app{position:relative;z-index:1;max-width:640px;margin:0 auto;padding:18px 16px 40px}

/* header */
.top{display:flex;align-items:center;gap:12px;justify-content:center;margin:6px 0 16px;color:var(--gold)}
.logo{width:46px;height:46px;flex:none;filter:drop-shadow(0 0 10px rgba(217,180,90,.5))}
.top h1{font-size:28px;font-weight:900;letter-spacing:.14em;line-height:1.1;
  background:linear-gradient(180deg,var(--gold2),var(--gold) 60%,var(--gold-d));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sub{font-family:var(--sans);font-size:11px;letter-spacing:.5em;color:var(--gold-d);margin-top:2px}

/* card */
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(217,180,90,.35);border-radius:18px;padding:20px;
  box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.03);
  backdrop-filter:blur(4px);
}
.screen{display:none}
.screen.is-on{display:block;animation:rise .35s ease}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* start */
.hero{text-align:center}
.verse-mini{font-size:15px;line-height:1.8;color:var(--gold2);margin-bottom:14px}
.verse-mini span{display:block;font-family:var(--sans);font-size:12px;color:var(--gold-d);letter-spacing:.15em}
.hero h2{font-size:24px;margin-bottom:14px;letter-spacing:.1em}
.how{list-style:none;text-align:left;display:grid;gap:10px;margin:0 0 18px}
.how li{display:flex;gap:12px;align-items:flex-start;font-family:var(--sans);font-size:14.5px;line-height:1.65;color:#e8dfc4}
.how b{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--gold);color:var(--navy);font-size:13px;margin-top:1px}
.nick{display:block;text-align:left;margin-bottom:14px;font-family:var(--sans)}
.nick span{display:block;font-size:13px;color:var(--gold);margin-bottom:6px;letter-spacing:.1em}
.nick input{width:100%;padding:13px 14px;font-size:17px;font-family:var(--sans);
  color:var(--ink);background:var(--parch);border:2px solid transparent;border-radius:12px;outline:none}
.nick input:focus{border-color:var(--gold)}
.tip{font-family:var(--sans);font-size:12.5px;color:#a9b3cc;text-align:center;margin-top:12px}

/* buttons */
.btn{font-family:var(--sans);font-weight:700;font-size:16px;letter-spacing:.12em;cursor:pointer;
  border-radius:999px;padding:12px 28px;border:2px solid var(--gold);transition:.15s;min-height:48px}
.btn.primary{background:linear-gradient(180deg,var(--gold2),var(--gold));color:var(--navy);
  box-shadow:0 6px 18px rgba(217,180,90,.35)}
.btn.primary:hover{transform:translateY(-1px)}
.btn.primary:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--gold)}
.btn.ghost:hover{background:rgba(217,180,90,.12)}
.btn.big{width:100%;font-size:19px;padding:15px}
.btn:disabled{opacity:.5;cursor:wait}
.row{display:flex;justify-content:center;gap:12px;margin-top:14px}

/* verse scroll */
.scroll{
  background:linear-gradient(180deg,var(--parch),var(--parch2));color:var(--ink);
  border:3px double var(--gold-d);padding:16px 18px;margin-bottom:12px;
  box-shadow:0 8px 22px rgba(0,0,0,.4),inset 0 0 30px rgba(168,131,46,.25);
}
.ref{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.15em;color:var(--gold-d);margin-bottom:6px}
.scroll .ref{color:#8a6a1e}
.verse{font-size:19px;line-height:1.85;font-weight:500;word-break:break-all}
.verse .c{border-radius:4px;transition:background .2s,color .2s}
.verse .c.in{color:#7d5c12;font-weight:900;background:rgba(217,180,90,.18)}
.verse .c.done{background:var(--gold);color:var(--navy);padding:0 1px}
.verse .c.next{background:transparent;box-shadow:inset 0 -3px 0 #b8892a;animation:blink 1.1s infinite}
@keyframes blink{50%{box-shadow:inset 0 -3px 0 transparent}}
.verse .rest{opacity:.55}
.verse.small{font-size:16px;color:var(--parch)}

/* hud */
.hud{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.hud-item{background:rgba(255,255,255,.05);border:1px solid rgba(217,180,90,.3);border-radius:14px;
  text-align:center;padding:8px 4px;font-family:var(--sans)}
.hud-item small{display:block;font-size:11px;letter-spacing:.2em;color:var(--gold-d)}
.hud-item strong{font-size:22px;color:var(--gold2);font-variant-numeric:tabular-nums}

/* board */
.board{
  display:grid;grid-template-columns:repeat(5,1fr);gap:8px;
  width:min(100%,560px);margin:0 auto;padding:12px;aspect-ratio:1;
  background:linear-gradient(160deg,var(--navy3),var(--navy2));
  border:2px solid var(--gold);border-radius:20px;
  box-shadow:0 14px 34px rgba(0,0,0,.45),inset 0 0 24px rgba(0,0,0,.35);
}
.cell{
  appearance:none;border:0;cursor:pointer;font-family:var(--serif);font-weight:900;
  font-size:clamp(24px,8.2vw,46px);line-height:1;color:var(--ink);
  background:linear-gradient(180deg,#fbf3da,var(--parch2));border-radius:12px;
  box-shadow:0 4px 0 var(--gold-d),0 6px 10px rgba(0,0,0,.35);
  display:grid;place-items:center;user-select:none;touch-action:manipulation;
  transition:transform .08s,box-shadow .08s,background .2s,opacity .25s;
}
.cell:active{transform:translateY(3px);box-shadow:0 1px 0 var(--gold-d)}
.cell.done{
  background:linear-gradient(180deg,var(--gold2),var(--gold));color:var(--navy);
  box-shadow:none;transform:translateY(4px);opacity:.38;cursor:default;pointer-events:none;
}
.cell.bad{animation:shake .3s;background:linear-gradient(180deg,#f8cfcf,#e9a0a0)}
@keyframes shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.board.locked .cell{pointer-events:none}

/* result */
.result{text-align:center}
.badge{display:inline-block;font-family:var(--sans);font-weight:700;letter-spacing:.3em;font-size:13px;
  padding:5px 16px;border:1px solid var(--gold);border-radius:999px;color:var(--gold);margin-bottom:8px}
.time{font-size:64px;font-weight:900;line-height:1.1;color:var(--gold2);
  text-shadow:0 0 22px rgba(217,180,90,.5);font-variant-numeric:tabular-nums}
.time em{font-style:normal;font-size:22px;margin-left:6px;color:var(--gold)}
.rank{font-family:var(--sans);font-size:16px;margin:6px 0 16px;color:#e8dfc4;line-height:1.7}
.rank strong{color:var(--gold2);font-size:20px}
.result .ref{margin-top:8px}

/* boards */
.boards{display:grid;gap:16px;margin-top:22px}
.boards h3{font-size:18px;letter-spacing:.12em;color:var(--gold);margin-bottom:10px}
.crown{margin-right:6px}
.list{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);width:100%;gap:6px;font-family:var(--sans)}
.list li{display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:center;
  padding:9px 10px;border-radius:10px;background:rgba(255,255,255,.04);font-size:14px}
.list li.me{background:rgba(217,180,90,.22);outline:1px solid var(--gold)}
.list .no{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-weight:700;font-size:13px;background:rgba(255,255,255,.1);color:#cfd6e8}
.list li:nth-child(1) .no{background:linear-gradient(180deg,#ffe9a0,#d9b45a);color:var(--navy)}
.list li:nth-child(2) .no{background:linear-gradient(180deg,#f1f3f7,#aeb6c4);color:var(--navy)}
.list li:nth-child(3) .no{background:linear-gradient(180deg,#f0c89a,#b9814a);color:var(--navy)}
.list .who{min-width:0}
.list .who b{display:block;font-size:15px;color:var(--parch);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list .who small{color:#9aa6c4;font-size:12px}
.list .t{font-weight:700;color:var(--gold2);font-size:16px;font-variant-numeric:tabular-nums;text-align:right}
.list .t small{display:block;font-size:11px;font-weight:400;color:#9aa6c4}
.list .empty{display:block;text-align:center;color:#9aa6c4;padding:14px}
.foot{text-align:center;margin-top:26px;font-family:var(--sans);font-size:12px;color:#7f8bab;letter-spacing:.1em}

@media(min-width:560px){
  .verse{font-size:21px}
  .board{gap:10px;padding:16px}
  .boards{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}