/* 聖經盒子 Bible Box
   版面：木製書盒。上方是抽出的書，下方是毛氈內襯的格子，放進去的書以書背直立呈現。
   舊約酒紅皮面、新約藏青皮面、燙金字。 */
:root{
  --bg:#E4E7E1; --bg-2:#D8DCD4; --panel:#F4F5F1; --line:#C6CCC3;
  --fg:#1C2220; --muted:#5A645E;
  --accent:#8A5A12; --accent-fg:#FFFFFF; --focus:#B07A1E;
  --ok:#2C7A4B; --bad:#B3261E; --bad-soft:#F6DCD9; --ok-soft:#DCEFE2; --me:#FFF3D6;
  --wood-1:#3F2414; --wood-2:#6E4022; --wood-3:#9A6136;
  --felt:#1E4A3C; --felt-2:#143329;
  --ot:#7A2230; --ot-2:#4E1520; --nt:#1D3A5E; --nt-2:#11253D;
  --gold:#D9B45E; --gold-2:#A9853A;
  --scrim:rgba(18,22,20,.55);
  --shadow:0 1px 2px rgba(20,25,22,.08),0 8px 24px rgba(20,25,22,.10);
  --f-display:"Noto Serif TC","Songti TC","PMingLiU",serif;
  --f-body:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --f-latin:"Cinzel","Times New Roman",serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#121614; --bg-2:#181D1A; --panel:#1C221F; --line:#2E3632;
    --fg:#E6E9E3; --muted:#9BA59F;
    --accent:#E2B65C; --accent-fg:#1B1407; --focus:#E2B65C;
    --ok:#6BCB8E; --bad:#F2867D; --bad-soft:#3A1E1C; --ok-soft:#183126; --me:#3A3120;
    --scrim:rgba(0,0,0,.65);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:15px;line-height:1.6;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:max(20px,env(safe-area-inset-top,0px)) max(48px,env(safe-area-inset-bottom,0px))}
.wrap{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* Header */
header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px}
.brand h1{margin:0;font-family:var(--f-display);font-weight:900;font-size:clamp(30px,7vw,42px);line-height:1.1;letter-spacing:.04em;text-wrap:balance}
.brand .en{font-family:var(--f-latin);font-size:13px;letter-spacing:.32em;color:var(--accent);display:block;margin-top:4px}
.levels{display:flex;background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.levels button{border:0;background:transparent;padding:7px 14px;border-radius:999px;cursor:pointer;font-size:14px;white-space:nowrap;color:var(--muted)}
.levels button small{font-size:11px;margin-left:3px;opacity:.8}
.levels button[aria-pressed="true"]{background:var(--panel);color:var(--fg);font-weight:700;box-shadow:var(--shadow)}
.player{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted);margin-top:-6px}
.player b{color:var(--fg)}
.link{border:0;background:none;padding:0;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:3px;font-size:13.5px}

/* Draw card */
.stage{display:grid;grid-template-columns:auto 1fr;gap:16px 20px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.cover{--c:var(--ot);--c2:var(--ot-2);width:118px;aspect-ratio:3/4;max-width:100%;border-radius:4px 8px 8px 4px;position:relative;
  background:linear-gradient(90deg,var(--c2) 0 9px,rgba(255,255,255,.08) 9px 10px,var(--c) 10px);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25),3px 4px 0 -1px var(--line),6px 10px 18px rgba(0,0,0,.18);
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 8px 10px 18px;color:var(--gold);text-align:center}
.cover.nt{--c:var(--nt);--c2:var(--nt-2)}
.cover::before{content:"";position:absolute;inset:8px 7px 8px 17px;border:1px solid var(--gold-2);border-radius:2px;pointer-events:none}
.cross,.nick-cross{width:14px;height:20px;position:relative;margin-bottom:8px;opacity:.9}
.cross::before,.cross::after,.nick-cross::before,.nick-cross::after{content:"";position:absolute;background:var(--gold)}
.cross::before,.nick-cross::before{left:6px;top:0;width:2px;height:20px}
.cross::after,.nick-cross::after{left:0;top:5px;width:14px;height:2px}
.cover .nm{font-family:var(--f-display);font-weight:900;font-size:19px;line-height:1.25;letter-spacing:.06em;text-wrap:balance}
.cover .no{font-family:var(--f-latin);font-size:11px;letter-spacing:.15em;margin-top:6px;opacity:.85}
.cover.empty{--c:var(--bg-2);--c2:var(--line);color:var(--muted)}
.cover.empty::before{border-color:var(--line)}
.cover.pop{animation:pop .35s ease-out}
@keyframes pop{from{transform:translateY(-8px) rotate(-3deg);opacity:.4}to{transform:none;opacity:1}}
.info{min-width:0;display:flex;flex-direction:column;gap:8px}
.eyebrow{font-size:12px;letter-spacing:.12em;color:var(--muted)}
.bigname{font-family:var(--f-display);font-weight:900;font-size:clamp(24px,5.5vw,32px);line-height:1.2;margin:0}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:12.5px;padding:2px 10px;border-radius:999px;border:1px solid var(--line);background:var(--bg);white-space:nowrap}
.tag.ot{border-color:transparent;background:var(--ot);color:#F6E7C8}
.tag.nt{border-color:transparent;background:var(--nt);color:#E3ECF8}
.dots{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.dot{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--gold-2);background:transparent}
.dot.on{background:var(--gold);border-color:var(--gold)}
.dot.now{box-shadow:0 0 0 3px rgba(217,180,94,.35)}
.dots .count{font-size:13px;color:var(--muted);margin-left:6px;font-variant-numeric:tabular-nums}
.hint{font-size:13.5px;color:var(--muted)}
.hint b{color:var(--fg)}

/* Box */
.box{position:relative;border-radius:12px;padding:14px 12px 12px;
  background:
    repeating-linear-gradient(92deg,rgba(255,255,255,.04) 0 2px,transparent 2px 7px,rgba(0,0,0,.06) 7px 9px,transparent 9px 15px),
    linear-gradient(180deg,var(--wood-3),var(--wood-2) 55%,var(--wood-1));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.18),inset 0 -3px 0 rgba(0,0,0,.35),0 14px 30px rgba(0,0,0,.22)}
.box-plate{display:flex;justify-content:center;margin:-2px 0 10px}
.box-plate span{font-family:var(--f-latin);font-size:11px;letter-spacing:.4em;color:#F1DDA6;padding:2px 14px 2px 18px;border:1px solid rgba(217,180,94,.55);border-radius:3px;background:rgba(0,0,0,.18)}
.grid{display:grid;grid-template-columns:repeat(var(--cols,6),minmax(0,1fr));gap:6px;background:var(--wood-1);padding:6px;border-radius:6px;box-shadow:inset 0 2px 6px rgba(0,0,0,.5)}
.cell{position:relative;height:clamp(118px,24vw,156px);border:0;border-radius:3px;cursor:pointer;padding:0;
  background:radial-gradient(120% 90% at 50% 10%,var(--felt),var(--felt-2));
  box-shadow:inset 0 3px 8px rgba(0,0,0,.55),inset 0 -1px 0 rgba(255,255,255,.06);
  display:flex;align-items:flex-end;justify-content:center;transition:box-shadow .15s}
.cell .n{position:absolute;bottom:4px;left:0;right:0;text-align:center;font-family:var(--f-latin);font-size:11px;color:rgba(241,221,166,.55);font-variant-numeric:tabular-nums;pointer-events:none}
.cell:not(:disabled):hover{box-shadow:inset 0 3px 8px rgba(0,0,0,.55),inset 0 0 0 2px rgba(217,180,94,.5)}
.cell.valid{box-shadow:inset 0 3px 8px rgba(0,0,0,.45),inset 0 0 0 2px var(--gold)}
.cell.valid .n{color:var(--gold)}
.cell:disabled{cursor:default}
.cell.dim{filter:brightness(.6)}

.spine{--c:var(--ot);--c2:var(--ot-2);--hl:#A84A57;width:min(86%,58px);height:calc(100% - 8px);margin-bottom:4px;border-radius:3px 3px 2px 2px;position:relative;
  background:linear-gradient(90deg,var(--c2),var(--c) 22%,var(--hl) 48%,var(--c) 70%,var(--c2));
  box-shadow:0 2px 3px rgba(0,0,0,.45);color:#F1D898;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:10px 0 8px}
.spine.nt{--c:var(--nt);--c2:var(--nt-2);--hl:#4A6A92;color:#E9D49A}
.spine::before,.spine::after{content:"";position:absolute;left:3px;right:3px;height:5px;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);opacity:.85}
.spine::before{top:4px}.spine::after{bottom:4px}
.spine .t{writing-mode:vertical-rl;text-orientation:upright;font-family:var(--f-display);font-weight:700;font-size:clamp(11.5px,2.6vw,14.5px);letter-spacing:.02em;line-height:1;flex:1;display:flex;align-items:center;margin-top:4px}
.spine .k{font-family:var(--f-latin);font-size:10px;opacity:.85;font-variant-numeric:tabular-nums}
.spine.drop{animation:drop .32s cubic-bezier(.2,.8,.3,1.2)}
@keyframes drop{from{transform:translateY(-26px);opacity:.3}to{transform:none;opacity:1}}
.spine.wrong{outline:3px solid var(--bad);outline-offset:1px;animation:shake .4s}
.spine.conflict{outline:3px dashed var(--bad);outline-offset:1px}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-4px) rotate(-2deg)}75%{transform:translateX(4px) rotate(2deg)}}

/* Result */
.result{border-radius:14px;padding:16px 18px;border:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;gap:10px}
.result.win{background:var(--ok-soft);border-color:var(--ok)}
.result.lose{background:var(--bad-soft);border-color:var(--bad)}
.result h2{margin:0;font-family:var(--f-display);font-weight:900;font-size:22px}
.result.win h2{color:var(--ok)} .result.lose h2{color:var(--bad)}
.result p{margin:0}
.result .saved{font-size:13px;color:var(--muted)}
.verse{font-family:var(--f-display);font-size:16px;border-left:3px solid var(--gold);padding-left:12px}
.verse cite{display:block;font-style:normal;font-size:13px;color:var(--muted);margin-top:2px}
.order{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:13px;padding:3px 10px;border-radius:6px;background:var(--panel);border:1px solid var(--line);white-space:nowrap}
.chip.ot{border-left:4px solid var(--ot)} .chip.nt{border-left:4px solid var(--nt)}
.chip.miss{opacity:.55;border-style:dashed}
.chip .k{color:var(--muted);font-size:11.5px;margin-left:4px;font-variant-numeric:tabular-nums}

/* Controls */
.bar{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between}
.toggles{display:flex;flex-wrap:wrap;gap:8px 18px}
.tg{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;user-select:none}
.tg input{width:18px;height:18px;accent-color:var(--accent);margin:0}
.btn{border:0;border-radius:999px;padding:9px 20px;background:var(--accent);color:var(--accent-fg);font-weight:700;cursor:pointer;font-size:14.5px}
.btn:hover{filter:brightness(1.07)}

/* Panels */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px}
details.panel summary{cursor:pointer;padding:12px 16px;font-weight:700;list-style:none;display:flex;justify-content:space-between;align-items:center}
details.panel summary::-webkit-details-marker{display:none}
details.panel summary::after{content:"＋";color:var(--muted);font-weight:400}
details.panel[open] summary::after{content:"－"}
.pbody{padding:0 16px 14px;display:flex;flex-direction:column;gap:10px}
.pbody p,.pbody ul{margin:0}
.pbody ul{padding-left:1.2em;display:flex;flex-direction:column;gap:4px}

/* History */
.history{padding:14px 0 6px}
.phead{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:0 16px 8px}
.phead h2{margin:0;font-family:var(--f-display);font-weight:900;font-size:18px}
.phead .sub{font-size:12.5px;color:var(--muted)}
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:8px 10px;text-align:left;white-space:nowrap;border-top:1px solid var(--line)}
th{font-size:12px;font-weight:500;color:var(--muted);letter-spacing:.06em;border-top:0}
th:first-child,td:first-child{padding-left:16px}
th:last-child,td:last-child{padding-right:16px}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.name{max-width:10em;overflow:hidden;text-overflow:ellipsis;font-weight:500}
tr.me td{background:var(--me)}
.pill{display:inline-block;font-size:12.5px;padding:1px 9px;border-radius:999px;border:1px solid var(--line)}
.pill.win{color:var(--ok);border-color:var(--ok)}
.pill.lose{color:var(--bad);border-color:var(--bad)}
.empty-row td{color:var(--muted);text-align:center;white-space:normal;padding-block:18px}

.cat{display:flex;flex-direction:column;gap:12px}
.cat h4{margin:0 0 4px;font-size:13px;color:var(--muted);font-weight:500;letter-spacing:.06em}
.cat .row{display:flex;flex-wrap:wrap;gap:5px}
.cat .group-t{font-family:var(--f-display);font-weight:900;font-size:16px;margin:4px 0 0}
footer{font-size:12.5px;color:var(--muted);text-align:center}

/* Nickname overlay */
.overlay{position:fixed;inset:0;z-index:50;background:var(--scrim);display:flex;align-items:center;justify-content:center;
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.nickcard{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
  padding:24px 22px;display:flex;flex-direction:column;gap:10px;border-top:6px solid var(--ot)}
.nickcard .nick-cross{margin:0}
.nickcard h2{margin:0;font-family:var(--f-display);font-weight:900;font-size:22px}
.nickcard p{margin:0;font-size:14px;color:var(--muted)}
.nickcard label{font-size:13px;font-weight:700;margin-top:6px}
.nickcard input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);font-size:16px}
.nickcard .err{min-height:1.2em;font-size:13px;color:var(--bad)}
.nickcard .btn{align-self:stretch;padding:11px 20px;font-size:15.5px}

@media (max-width:520px){
  .stage{grid-template-columns:1fr;justify-items:center;text-align:center}
  .cover{width:104px}
  .info{align-items:center}
  .tags,.dots{justify-content:center}
  .box{padding:12px 8px 8px}
  .grid{gap:4px;padding:4px}
  .levels button{padding:7px 11px}
  th,td{padding:7px 8px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}