:root {
    --ink:#2b2118; --paper:#f6ecd9; --card:#fffaf0; --accent:#9b2d20;
    --accent2:#3a6b35; --line:#d8c5a0; --muted:#7a6a55; --chip:#efe2c6;
  }
  * { box-sizing: border-box; }
  body { margin:0; font-family:"Segoe UI", system-ui, sans-serif; color:var(--ink);
         background:var(--paper); line-height:1.5; }
  header { background:var(--accent); color:#fff; padding:16px 22px; display:flex;
           justify-content:space-between; align-items:flex-start; gap:12px; }
  header h1 { margin:0; font-size:1.35rem; letter-spacing:.5px; }
  header p { margin:3px 0 0; opacity:.9; font-size:.82rem; }
  .lang { display:flex; gap:0; border:1px solid #ffffff66; border-radius:7px; overflow:hidden; flex:none; }
  .lang button { background:transparent; color:#fff; border:0; padding:5px 11px; font:inherit;
                 cursor:pointer; opacity:.65; }
  .lang button.on { background:#ffffff26; opacity:1; font-weight:600; }
  nav { display:flex; gap:2px; background:var(--accent); padding:0 14px; }
  nav button { background:transparent; color:#fff; border:0; border-bottom:3px solid transparent;
               padding:10px 16px; font:inherit; cursor:pointer; opacity:.75; }
  nav button.active { opacity:1; border-bottom-color:var(--paper); font-weight:600; }
  main { max-width:880px; margin:0 auto; padding:22px; }
  .tab { display:none; } .tab.active { display:block; }
  h2 { margin:0 0 12px; font-size:1.05rem; color:var(--accent); }
  input[type=text], textarea, select { padding:9px 11px; border:1px solid var(--line);
         border-radius:7px; font:inherit; background:#fff; }
  input[type=text], textarea { width:100%; }
  textarea { min-height:96px; resize:vertical; }
  .row { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; align-items:center; }
  button.go { background:var(--accent2); color:#fff; border:0; border-radius:7px;
              padding:9px 16px; font:inherit; cursor:pointer; }
  button.go:hover { filter:brightness(1.08); }
  button.pick { background:var(--chip); color:var(--ink); border:1px solid var(--line);
                border-radius:7px; padding:6px 11px; font:inherit; cursor:pointer; }
  .out { margin-top:16px; display:grid; gap:10px; }
  .hit { border:1px solid var(--line); border-radius:8px; padding:12px; background:#fff; }
  .hit h3 { margin:0 0 2px; font-size:1rem; }
  .meta { font-size:.78rem; color:var(--muted); }
  .conf { float:right; font-size:.74rem; padding:2px 8px; border-radius:20px; color:#fff; }
  .conf.hi { background:var(--accent2); } .conf.lo { background:#b6892a; }
  .txt { margin:8px 0; font-size:.9rem; }
  .nl { color:var(--accent2); font-style:italic; }
  .empty { color:var(--accent); opacity:.7; font-style:italic; }
  footer { text-align:center; font-size:.75rem; color:var(--muted); padding:18px; }
  code { background:var(--chip); padding:1px 5px; border-radius:4px; }
  .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px; }
  .tile { border:1px solid var(--line); border-radius:8px; padding:10px; background:#fff;
          cursor:pointer; text-align:left; }
  .tile:hover { border-color:var(--accent2); }
  .tile b { font-size:.92rem; } .tile .meta { margin-top:3px; }
  .badge { font-size:.68rem; padding:1px 6px; border-radius:10px; background:var(--chip); color:var(--muted); }
  .badge.en { background:var(--accent2); color:#fff; }
  /* set-tag provenance: how trustworthy the expansion tag is */
  .badge.prov-verified { background:#e3eedd; color:#2f5a2b; }
  .badge.prov-ambiguous { background:#f3e4c0; color:#8a5a00; }
  .badge.prov-unverified { background:var(--chip); color:var(--muted); }
  .badge[title] { cursor:help; }
  .stage { position:relative; display:inline-block; max-width:100%; }
  .stage img { max-width:100%; display:block; border-radius:8px; }
  .cardbox { position:absolute; border:2.5px solid var(--accent); border-radius:4px;
             background:rgba(155,45,32,.10); box-shadow:0 0 0 1px #fff8; }
  .cardbox b { position:absolute; top:-11px; left:-11px; background:var(--accent); color:#fff;
               font-size:.72rem; min-width:20px; height:20px; padding:0 4px; border-radius:10px;
               display:flex; align-items:center; justify-content:center; }
  .num { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px;
         background:var(--accent); color:#fff; border-radius:10px; font-size:.74rem; margin-right:6px; }
  .more { display:inline-block; margin-top:10px; font-size:.85rem; color:var(--accent2); }
  .imps { margin:6px 0 0; padding-left:18px; font-size:.9rem; } .imps li { margin:2px 0; }
  .howto { margin-top:10px; }
  .howto > summary { cursor:pointer; color:var(--accent); font-weight:600; font-size:.9rem; list-style:none; }
  .howto > summary::before { content:"💡 "; }
  .uc { margin:7px 0 0; font-size:.9rem; }
  .uck { font-weight:600; color:var(--accent2); margin-right:4px; }
  /* clickable affordance for result cards/tiles */
  .hit.clickable { cursor:pointer; transition:border-color .12s, box-shadow .12s; }
  .hit.clickable:hover { border-color:var(--accent2); box-shadow:0 2px 8px #0001; }
  /* modal / slide-over card detail */
  .modal-back { position:fixed; inset:0; background:#2b211899; display:none;
                z-index:100; }
  .modal-back.open { display:block; }
  .modal { position:fixed; top:0; right:0; bottom:0; width:min(560px,100%);
           background:var(--paper); box-shadow:-4px 0 24px #0004; z-index:101;
           transform:translateX(100%); transition:transform .22s ease;
           display:flex; flex-direction:column; }
  .modal-back.open .modal { transform:translateX(0); }
  .modal-bar { background:var(--accent); color:#fff; padding:12px 16px; display:flex;
               align-items:center; justify-content:space-between; gap:10px; flex:none; }
  .modal-bar h2 { margin:0; color:#fff; font-size:1.05rem; }
  .modal-close { background:#ffffff26; color:#fff; border:0; border-radius:7px;
                 width:30px; height:30px; font-size:1.1rem; cursor:pointer; line-height:1; flex:none; }
  .modal-close:hover { background:#ffffff44; }
  .modal-body { padding:18px 20px; overflow-y:auto; }
  /* card image slot: top-right of the detail header */
  .detail-head { display:flex; gap:14px; align-items:flex-start; }
  .detail-head .meta-block { flex:1 1 auto; min-width:0; }
  .detail-head h3 { margin:0 0 3px; font-size:1.15rem; }
  .cardpic { flex:none; width:128px; height:180px; border-radius:8px; border:1px solid var(--line);
             background:#fff; object-fit:contain; }
  .cardpic-ph { flex:none; width:128px; height:180px; border-radius:8px; border:1px dashed var(--line);
                background:var(--chip); display:flex; align-items:center; justify-content:center;
                text-align:center; color:var(--muted); font-size:.74rem; padding:8px; }
  .nl-missing { color:var(--muted); font-style:italic; }
  .srclist { margin:10px 0 0; padding-left:18px; font-size:.85rem; }
  .srclist li { margin:2px 0; } .srclist a { color:var(--accent2); }
  /* fight / combat helper */
  input[type=number] { padding:9px 11px; border:1px solid var(--line); border-radius:7px; font:inherit; background:#fff; }
  .fight-lbl { font-size:.82rem; color:var(--muted); display:block; margin-bottom:3px; }
  .fight-num { width:90px; }
  .fight-tie { font-size:.85rem; color:var(--muted); display:flex; align-items:center; gap:5px; cursor:pointer; }
  .verdict { border-radius:10px; padding:14px 16px; color:#fff; }
  .verdict.win { background:var(--accent2); } .verdict.lose { background:var(--accent); }
  .verdict h3 { margin:0 0 4px; font-size:1.15rem; }
  .verdict .sub { opacity:.92; font-size:.88rem; }
  .tally { font-size:.84rem; opacity:.92; margin-top:6px; }
  .spoils { display:flex; gap:18px; flex-wrap:wrap; margin-top:6px; font-size:.9rem; }
  .spoils b { font-size:1.05rem; }
  .badstuff { background:#fff; color:var(--accent); border:1px solid var(--line);
              border-left:4px solid var(--accent); border-radius:7px; padding:10px 12px; margin-top:8px; font-size:.9rem; }
  .badstuff .flags { margin-top:4px; }
  .flag { display:inline-block; font-size:.7rem; font-weight:600; padding:1px 8px; border-radius:10px;
          background:var(--accent); color:#fff; margin-right:5px; }
  .plays { display:grid; gap:6px; margin-top:10px; }
  .play { display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:8px;
          padding:8px 11px; background:#fff; font-size:.92rem; }
  .play.in-set { border-color:var(--accent2); background:#f1f7ee; box-shadow:0 0 0 1px var(--accent2) inset; }
  .play .pdelta { font-weight:700; color:var(--accent2); min-width:34px; }
  .play .pname { flex:1 1 auto; cursor:pointer; }
  .play .pname:hover { text-decoration:underline; }
  .play .ptag { font-size:.68rem; padding:1px 7px; border-radius:10px; background:var(--chip); color:var(--muted); }
  .play .ptag.set { background:var(--accent2); color:#fff; }
  @media (max-width:560px) {
    .cardpic, .cardpic-ph { width:96px; height:135px; }
  }

/* ---- scan-first layout ---- */
:root { --gold:#c8902a; }
.home { max-width:480px; margin:0 auto; padding:18px 16px 28px; }
.scan-btn { display:flex; flex-direction:column; align-items:center; gap:8px; width:100%;
  border:0; border-radius:16px; padding:22px; background:var(--accent2); color:#fff;
  font:inherit; font-weight:700; font-size:1.1rem; cursor:pointer; }
.scan-btn .cam { font-size:2rem; }
.scan-file { display:none; }
.or { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.8rem; margin:16px 2px 8px; }
.or::before, .or::after { content:""; height:1px; background:var(--line); flex:1; }
.more-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.more-row button { background:var(--chip); color:var(--ink); border:1px solid var(--line);
  border-radius:999px; padding:7px 13px; font:inherit; cursor:pointer; }
/* tool sheet (phone) */
.sheet-back { position:fixed; inset:0; background:#2b211866; display:none; z-index:90; }
.sheet-back.open { display:block; }
.sheet { position:fixed; left:0; right:0; bottom:0; background:var(--paper); z-index:91;
  border-radius:16px 16px 0 0; max-height:85vh; overflow:auto; transform:translateY(100%);
  transition:transform .22s ease; padding:18px 16px; }
.sheet-back.open .sheet { transform:translateY(0); }
/* desktop two-pane */
.layout-toggle { display:flex; border:1px solid #ffffff66; border-radius:7px; overflow:hidden; flex:none; }
.layout-toggle button { background:transparent; color:#fff; border:0; padding:5px 11px; font:inherit; cursor:pointer; opacity:.65; }
.layout-toggle button.on { background:#ffffff26; opacity:1; font-weight:600; }
.rail { display:none; }
html[data-layout="desktop"] .home { max-width:none; display:grid; grid-template-columns:260px 1fr; gap:22px; align-items:start; }
html[data-layout="desktop"] .rail { display:flex; flex-direction:column; gap:6px; }
html[data-layout="desktop"] .rail button { text-align:left; background:#fff; border:1px solid var(--line);
  border-radius:8px; padding:10px 12px; font:inherit; cursor:pointer; }
html[data-layout="desktop"] .rail button.on { border-color:var(--accent2); box-shadow:0 0 0 1px var(--accent2) inset; }
html[data-layout="desktop"] .more-row { display:none; }
html[data-layout="phone"]   .rail { display:none; }