/* ===== 여호와의 증인 회중 성경 게임 — 공유 스타일 ===== */
:root{
  --bg:#efe7d7; --bg2:#f8f0df; --surface:#fffaf0; --surface2:#f5ead0;
  --ink:#30261f; --ink-soft:#536080; --line:#dec792;
  --accent:#b9791e; --accent-soft:#ecd5a7;
  --good:#2f7d59; --good-soft:#cfe8dc; --bad:#b23b48; --bad-soft:#f0d2d6;
  --chip:#f4ead2; --chip-line:#d7bf89; --star:rgba(128,92,44,.16);
  --shadow:0 1px 2px rgba(70,46,18,.1),0 12px 28px -18px rgba(62,42,21,.34);
  --on-accent:#ffffff;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#10152a; --bg2:#0b0f20; --surface:#1a2140; --surface2:#141b36;
  --ink:#e9ecf6; --ink-soft:#a3abcb; --line:#2a3357;
  --accent:#e3ad55; --accent-soft:#4a3a1c;
  --good:#66c095; --good-soft:#1d3a2c; --bad:#e5808c; --bad-soft:#3a2029;
  --chip:#232c50; --chip-line:#374168; --star:rgba(227,173,85,.5);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 14px 34px -16px rgba(0,0,0,.7);
  --on-accent:#1a1204;
}}
:root[data-theme="light"]{
  --bg:#efe7d7; --bg2:#f8f0df; --surface:#fffaf0; --surface2:#f5ead0; --ink:#30261f; --ink-soft:#536080;
  --line:#dec792; --accent:#b9791e; --accent-soft:#ecd5a7; --good:#2f7d59; --good-soft:#cfe8dc;
  --bad:#b23b48; --bad-soft:#f0d2d6; --chip:#f4ead2; --chip-line:#d7bf89; --star:rgba(128,92,44,.16);
  --shadow:0 1px 2px rgba(70,46,18,.1),0 12px 28px -18px rgba(62,42,21,.34); --on-accent:#fff;
}
:root[data-theme="dark"]{
  --bg:#10152a; --bg2:#0b0f20; --surface:#1a2140; --surface2:#141b36; --ink:#e9ecf6; --ink-soft:#a3abcb;
  --line:#2a3357; --accent:#e3ad55; --accent-soft:#4a3a1c; --good:#66c095; --good-soft:#1d3a2c;
  --bad:#e5808c; --bad-soft:#3a2029; --chip:#232c50; --chip-line:#374168; --star:rgba(227,173,85,.5);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 14px 34px -16px rgba(0,0,0,.7); --on-accent:#1a1204;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(rgba(102,78,47,.12) .55px,transparent .7px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.22) 0,rgba(255,255,255,.22) 1px,transparent 1px,transparent 12px),
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.72),transparent 30%),
    radial-gradient(circle at 13% 16%,rgba(210,171,98,.18),transparent 26%),
    radial-gradient(1200px 600px at 50% -8%,var(--bg2),var(--bg));
  background-size:8px 8px,auto,auto,auto,auto;
  background-attachment:fixed;
  min-height:100dvh; -webkit-text-size-adjust:100%;
}
.wrap{max-width:640px;margin:0 auto;padding:20px 18px 60px}

/* --- header / topbar --- */
.topbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;min-height:40px}
.back{appearance:none;border:1px solid var(--line);background:rgba(255,250,240,.86);color:var(--ink);
  font:inherit;font-weight:700;font-size:14px;border-radius:11px;padding:8px 13px;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:border-color .15s}
.back:hover{border-color:var(--accent)}
.back:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:2px}
h1{font-size:clamp(24px,6.5vw,32px);font-weight:800;margin:0 0 4px;letter-spacing:-.02em;text-wrap:balance}
.sub{color:var(--ink-soft);font-size:13px;margin:0 0 16px;line-height:1.5}

/* --- segmented controls --- */
.bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.seg{display:inline-flex;background:rgba(255,250,240,.72);border:1px solid var(--line);border-radius:11px;padding:3px;gap:2px;flex-wrap:wrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.58)}
.seg button{appearance:none;border:0;background:transparent;color:var(--ink-soft);font:inherit;font-weight:700;
  font-size:13px;padding:7px 13px;border-radius:8px;cursor:pointer;transition:background .15s,color .15s}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.seg.small button{font-size:12px;padding:6px 10px}

/* --- stats --- */
.stats{display:flex;gap:8px;margin-left:auto}
.stat{background:rgba(255,250,240,.86);border:1px solid var(--line);border-radius:11px;padding:7px 11px;text-align:center;min-width:58px;box-shadow:var(--shadow)}
.stat b{display:block;font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.stat span{font-size:10px;color:var(--ink-soft)}

/* --- card --- */
.card{
  position:relative;
  background:
    radial-gradient(circle at 12% 0%,rgba(255,255,255,.74),transparent 30%),
    linear-gradient(180deg,rgba(255,250,240,.94),rgba(249,239,216,.9));
  border:1px solid var(--line);
  border-radius:18px;
  padding:20px 18px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.58),
    inset 0 12px 22px rgba(255,255,255,.28),
    0 1px 2px rgba(82,58,30,.1),
    0 12px 28px -18px rgba(50,35,20,.34);
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:.42;
  mix-blend-mode:multiply;
  background-image:
    radial-gradient(circle at 8% 10%,rgba(100,58,24,.14) 0 1px,transparent 6px),
    radial-gradient(circle at 92% 88%,rgba(100,58,24,.12) 0 1px,transparent 7px),
    repeating-linear-gradient(100deg,rgba(102,72,35,.038) 0,rgba(102,72,35,.038) 1px,transparent 1px,transparent 8px);
}
.card > *{position:relative}

/* --- buttons --- */
.btn{appearance:none;font:inherit;font-weight:700;font-size:14px;padding:11px 16px;border-radius:12px;cursor:pointer;
  border:1.5px solid var(--line);background:rgba(255,250,240,.84);color:var(--ink);transition:border-color .15s,transform .08s;box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.btn:hover{border-color:var(--accent)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.actions{display:flex;gap:9px;margin-top:16px}
.actions .primary{margin-left:auto}

footer{margin-top:22px;text-align:center;color:var(--ink-soft);font-size:12px;line-height:1.7}
footer b{color:var(--accent)}

@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}