/* 吗哪 Manna: dobany's design language (hairlines, serif headings, ink, cinnabar and browns), phone first */
:root{
  --bg:#fbf8f2; --card:#ffffff; --ink:#1b1a17; --muted:#6e6457; --line:#e6dfd2; --accent:#b23a26; --accent-ink:#fff;
  --tC:#8a7d5e; --tR:#4b6e8a; --tE:#b23a26; --tL:#b8862f; --gold1:#c9a24a; --gold2:#f3df9b; --gold3:#a8782a;
  --hl:#f6ead2; --shadow:0 1px 2px rgba(27,26,23,.06),0 6px 20px rgba(27,26,23,.07);
  --serif:"Songti SC","Noto Serif SC","Source Han Serif SC",Georgia,serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#121110; --card:#1b1a17; --ink:#efe9de; --muted:#a59a89; --line:#2e2a25; --accent:#e0775f; --accent-ink:#1b0d08;
    --tC:#a59a89; --tR:#7fa3c2; --tE:#e0775f; --tL:#e3c06a; --hl:#2c2518; --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 20px rgba(0,0,0,.35);
  }
}
html:lang(zh-Hant){--serif:"Songti TC","Noto Serif TC","Source Han Serif TC",Georgia,serif}
html:lang(en){--serif:Georgia,"Times New Roman","Songti SC",serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font:16px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}
html:lang(zh-Hant) body{font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif}
body.noscroll{overflow:hidden}
a{color:var(--accent);text-decoration:none}
button,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
.serif{font-family:var(--serif)}
.muted{color:var(--muted)}
.small{font-size:13px}
.wrap{max-width:640px;margin:0 auto;min-height:100vh;padding:0 16px calc(24px + env(safe-area-inset-bottom))}
.boot{text-align:center;padding-top:40vh;color:var(--muted);font-family:var(--serif)}
.empty{color:var(--muted);text-align:center;padding:24px 0}

/* top: back to the site, the name, the language */
.top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 0 10px;border-bottom:1px solid var(--line)}
.home{font-size:14px;color:var(--muted);min-width:64px}
.brand{font-size:22px;font-weight:900;letter-spacing:.06em;color:var(--accent)}
.langs{display:flex;gap:2px;min-width:64px;justify-content:flex-end}
.langs button{font-size:13px;color:var(--muted);padding:6px 6px;border-radius:6px}
.langs button.on{color:var(--ink);font-weight:700}
.tabs{display:flex;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:5}
.tabs button{flex:1;padding:12px 0 10px;font-size:15px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button.on{color:var(--ink);font-weight:700;border-color:var(--accent)}
.page{padding:18px 0}
.lede{font-family:var(--serif);font-size:18px;line-height:1.6;margin:4px 0 18px}
.foot{border-top:1px solid var(--line);margin-top:28px;padding-top:14px;font-size:13px;color:var(--muted)}
.foot p{margin:6px 0 0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:99px;background:var(--card);font-size:15px}
.btn.main{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.btn:disabled{opacity:.45;cursor:default}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
.packbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:150px;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);gap:6px}
.packbtn .pk{font-size:26px;font-weight:900;color:var(--accent)}
.packbtn .pn{font-size:14px;color:var(--muted)}
.packbtn.gold{border:2px solid var(--tL);background:linear-gradient(135deg,var(--card),var(--hl))}
.packbtn.gold .pk{color:var(--tL)}
.packbtn:disabled{opacity:.6}
.timer{text-align:center;margin:10px 0 2px;font-variant-numeric:tabular-nums}
.packbtn+.timer+.small{text-align:center;margin:0 0 18px}
.prog{margin:16px 0}
.prog .pl{font-size:14px;color:var(--muted)}
.prog .pl b{font-size:20px;color:var(--ink)}
.bar{height:4px;background:var(--line);border-radius:4px;overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;background:var(--accent)}
.tiers{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:10px;font-size:13px}
.tg{padding-left:10px;border-left:3px solid var(--tC)}
.tg.tR{border-color:var(--tR)} .tg.tE{border-color:var(--tE)} .tg.tL{border-color:var(--tL)}
details.how{border-top:1px solid var(--line);margin-top:22px;padding-top:10px;font-size:14px;color:var(--muted)}
details.how summary{cursor:pointer;color:var(--ink);font-weight:600;padding:6px 0}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.filters select{flex:1 1 30%;min-width:0;min-height:40px;border:1px solid var(--line);border-radius:10px;background:var(--card);padding:0 8px;font-size:14px}

/* the verse card: the tier is its edge; 传世 has a slow gold sheen */
.vc{position:relative;background:var(--card);border-radius:14px;border:1px solid var(--line);border-top:4px solid var(--tC);padding:14px 16px 12px;box-shadow:var(--shadow);text-align:left;display:flex;flex-direction:column;gap:8px}
.vc.tR{border-top-color:var(--tR)} .vc.tE{border-top-color:var(--tE)}
.vc.tL{border:1px solid var(--tL);border-top:4px solid var(--tL);background:linear-gradient(160deg,var(--card) 55%,var(--hl))}
.vc.tL::after{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(243,223,155,.35) 50%,transparent 65%);background-size:250% 100%;animation:sheen 4.5s ease-in-out infinite}
@keyframes sheen{0%{background-position:120% 0}60%,100%{background-position:-120% 0}}
.vc.lit{box-shadow:var(--shadow),0 0 0 3px color-mix(in srgb,var(--tC) 18%,transparent)}
.vc.tR.lit{box-shadow:var(--shadow),0 0 0 3px color-mix(in srgb,var(--tR) 22%,transparent)}
.vc.tE.lit{box-shadow:var(--shadow),0 0 0 3px color-mix(in srgb,var(--tE) 22%,transparent)}
.vc.tL.lit{box-shadow:var(--shadow),0 0 0 3px color-mix(in srgb,var(--tL) 30%,transparent)}
.vt{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.08em}
.vt .tier{font-weight:700;color:var(--tC)}
.tR .vt .tier{color:var(--tR)} .tE .vt .tier{color:var(--tE)} .tL .vt .tier{color:var(--tL)}
.vt .st{color:var(--tL);letter-spacing:0}
.vx{font-family:var(--serif);font-size:19px;line-height:1.7;font-weight:600;overflow-wrap:break-word}
.vr{font-size:14px;color:var(--muted)}
.vr small{font-size:11px;opacity:.8;margin-left:4px}
.vs{display:flex;gap:14px;font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:8px;font-variant-numeric:tabular-nums}
.vs b{color:var(--ink)}
.vs .cnt{margin-left:auto;color:var(--ink);font-weight:700}
.vc.small{padding:10px 11px 9px;gap:6px;height:100%}
.vc.small .vx{font-size:14px;line-height:1.55;flex:1}
.vc.small .vr{font-size:12px}
.vc.small .vs{gap:8px;font-size:11px;padding-top:6px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:560px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pickc{display:block;width:100%;text-align:left;border-radius:14px}
.pickc.on .vc{outline:3px solid var(--accent);outline-offset:1px}
.pickc.wide{margin:6px 0 12px}
.mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:10px 0}
.mode{border-top:1px solid var(--line);padding:16px 0 4px}
.mode:first-of-type{border-top:0;padding-top:0}
.mode h2,.sheet h2{font-size:20px;font-weight:900;margin:0 0 4px}
.mode > p{margin:4px 0}
.boss{position:relative}
.bosshp{display:block;margin-top:8px;font-size:13px;color:var(--tE);font-weight:700}
.reward{color:var(--tL);font-weight:700}
.coins{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0}
.coin{width:52px;height:52px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--serif);font-size:22px;font-weight:900;color:#5a3d10;background:radial-gradient(circle at 35% 30%,var(--gold2),var(--gold1) 60%,var(--gold3));box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),var(--shadow)}
.coin small{font:600 10px/1 -apple-system,sans-serif}

/* sheets */
.sheetback{position:fixed;inset:0;background:rgba(20,18,15,.45);z-index:50;display:flex;align-items:flex-end;justify-content:center}
.sheet{position:relative;width:100%;max-width:640px;max-height:92vh;overflow:auto;background:var(--bg);border-radius:18px 18px 0 0;padding:22px 16px calc(22px + env(safe-area-inset-bottom));animation:up .22s ease-out}
@media (min-width:700px){.sheetback{align-items:center}.sheet{border-radius:18px;max-height:88vh}}
@keyframes up{from{transform:translateY(32px)}to{transform:none}}
.sheet .x{position:absolute;top:8px;right:8px;z-index:3;width:44px;height:44px;font-size:26px;color:var(--muted);border-radius:50%}
.sheet{padding-top:52px}
.sheet h2{padding-right:40px;margin-top:-30px}
.note{border-left:3px solid var(--line);padding:2px 0 2px 12px;margin:12px 0}
.note p{margin:0;line-height:1.7}
.note small{display:block;color:var(--muted);font-size:11px;margin-top:4px;letter-spacing:.04em}
.meta{font-size:13px;color:var(--muted)}

/* pack reveal: the cards turn over one by one */
.pack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}
@media (min-width:560px){.pack{grid-template-columns:repeat(3,minmax(0,1fr))}}
.slot{position:relative;min-height:190px;perspective:900px;opacity:0;transform:translateY(10px);transition:opacity .25s,transform .25s}
.slot.in{opacity:1;transform:none}
.slot .back,.slot .vc{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .5s cubic-bezier(.3,.7,.3,1)}
.slot .back{border-radius:14px;border:1px solid var(--line);background:repeating-linear-gradient(45deg,var(--card) 0 10px,var(--hl) 10px 20px);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.slot .back span{font-family:var(--serif);font-weight:900;font-size:20px;color:var(--accent);background:var(--card);padding:6px 12px;border-radius:99px;border:1px solid var(--line)}
.slot.gold .back{border-color:var(--tL);background:repeating-linear-gradient(45deg,var(--hl) 0 10px,color-mix(in srgb,var(--tL) 25%,var(--card)) 10px 20px)}
.slot .vc{transform:rotateY(180deg)}
.slot.open .back{transform:rotateY(-180deg)}
.slot.open .vc{transform:none}
.slot.open.rL .vc{animation:glow 1.2s ease-out}
.slot.open.rE .vc{animation:glowE 1s ease-out}
@keyframes glow{0%{box-shadow:0 0 0 0 rgba(227,192,106,.9)}100%{box-shadow:0 0 0 22px rgba(227,192,106,0)}}
@keyframes glowE{0%{box-shadow:0 0 0 0 rgba(178,58,38,.6)}100%{box-shadow:0 0 0 16px rgba(178,58,38,0)}}
.new{position:absolute;top:-8px;right:-6px;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px}

/* reader */
.verses .v{margin:0;padding:8px 6px;border-bottom:1px solid var(--line);font-family:var(--serif);line-height:1.75}
.verses .v.hl{background:var(--hl);border-radius:6px;border-bottom-color:transparent}
.verses sup{font-family:-apple-system,sans-serif;font-size:11px;color:var(--muted);margin-right:6px}
.src{font-size:12px;margin-top:14px}

/* memorise */
.memoline{font-family:var(--serif);font-size:19px;line-height:2;margin:14px 0 4px}
.blank{display:inline-block;min-width:3em;border-bottom:2px solid var(--accent);margin:0 2px;color:var(--accent);text-align:center}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.chip{min-height:44px;padding:6px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);font-family:var(--serif);font-size:16px;text-align:left}
.chip.used{opacity:.3}
.chip.no{animation:no .35s}
@keyframes no{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.ok{font-size:20px;font-weight:900;color:var(--tL)}

/* battle */
.side{display:flex;flex-direction:column;gap:6px}
.fx{border:1px solid var(--line);border-left:4px solid var(--tC);border-radius:10px;padding:8px 10px;background:var(--card);transition:opacity .3s}
.fx.tR{border-left-color:var(--tR)} .fx.tE{border-left-color:var(--tE)} .fx.tL{border-left-color:var(--tL)}
.fx.down{opacity:.38}
.fn{font-size:14px;font-weight:600}
.fs{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.hp{height:6px;background:var(--line);border-radius:6px;overflow:hidden;margin:5px 0 3px}
.hp i{display:block;height:100%;background:#4f8a5b;transition:width .45s}
.them .hp i{background:var(--tE)}
.vsline{text-align:center;color:var(--muted);letter-spacing:.2em;margin:8px 0;font-family:var(--serif);font-weight:900}
.log{max-height:150px;overflow:auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:12px 0;padding:6px 0;font-size:13px}
.log p{margin:3px 0}
.log .b{color:var(--tE)}
.log .out{color:var(--muted);font-style:italic}
.result{font-size:24px;font-weight:900;text-align:center;margin:10px 0}
.result.won{color:var(--tL)}
.toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:99px;font-size:14px;z-index:80;transition:opacity .4s}
.toast.out{opacity:0}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* Friendly team contest: the two lineups remain legible on a phone. */
.vs{flex-wrap:wrap;row-gap:4px}
.team-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}
.roster{min-width:0;border:1px solid var(--line);border-top:3px solid var(--tR);border-radius:12px;background:var(--card);padding:12px}
.roster.us{border-top-color:var(--accent)}
.roster h3,.team-heading{font-size:15px;margin:0;color:var(--ink)}
.roster>p{margin:3px 0 8px}
.roster-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.roster-list li+li{border-top:1px solid var(--line);padding-top:8px}
.roster-card{display:flex;flex-direction:column;gap:4px;width:100%;min-height:44px;text-align:left;overflow-wrap:anywhere}
.roster-card strong{font-size:13px}.roster-card span{font-family:var(--serif);font-size:13px}.roster-card small{font-size:11px;color:var(--muted)}
.roster-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.round-status{font-weight:700;color:var(--ink);padding:8px 0;margin:0}
.team-heading{padding:2px 0 6px}
.result-note{text-align:center;color:var(--muted);font-size:13px}
.result.lost{color:var(--tR)}
.fx.down{opacity:.7}
@media(max-width:360px){.team-preview{gap:6px}.roster{padding:9px}}

.arena{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.arena .side{min-width:0}.arena .fn{overflow-wrap:anywhere}.arena .fx{padding:8px}.arena .fs{overflow-wrap:anywhere}