/* ============================================================================
 * cozy.css — "Cozy digital tabletop" THEME + LAYOUT override for the real game.
 * Loaded AFTER style.css (so it only overrides palette, theme, and the opponent
 * layout). The game logic/markup in ui.js is untouched; this just re-skins it:
 *   - warm wood surround, a felt "table" at the center (deck + piles)
 *   - opponents become compact chips around the table (their face-down hands
 *     are hidden — you read them by hand-count, sets stay visible)
 *   - friends, not enemies: the skull marker becomes a small "bot" tag
 * ==========================================================================*/

:root{
  /* warm natural palette (overrides style.css) */
  --bg-0:#0f121a; --bg-1:#171c28; --bg-2:#222a3a;
  --felt-lo:#162033; --felt-hi:#2b3b54;   /* aizome indigo table */
  --leather-0:#2b3447; --leather-1:#1a2130;   /* cool indigo-stone panels (was brown leather) */
  --stone-0:#2b3447; --stone-1:#161c28;
  --bone:#f6efe0; --bone-2:#ece0c8; --bone-dim:#cdbb96;
  --card-border:#cdb98f;
  --amber:#d99a3a; --amber-lo:#a9701f; --amber-hi:#f3c878;
  --green:#3f8f72; --green-hi:#5fb89a;   /* jade "go" accent (was bamboo green) */
  --leather-edge:#5e5436;               /* muted gold panel trim */
}

/* ---- wood surround ------------------------------------------------------- */
body{
  background:
    radial-gradient(120% 90% at 50% -18%, #2c3a5a, transparent 55%),
    radial-gradient(100% 80% at 88% 118%, #2a2236, transparent 60%),
    linear-gradient(160deg, #181d29, #0e1119 82%) !important;
  background-color:#10121a !important;
}

/* ---- board container becomes a transparent layout shell ------------------ */
#table{
  background:none !important; border:none !important; box-shadow:none !important;
  border-radius:0 !important; padding:6px !important; gap:12px !important;
}
#table::after{display:none !important;}   /* drop the green felt weave on the board */

/* ---- the central felt table (deck + discard piles) ----------------------- */
#center{
  border-radius:22px; padding:18px 24px;
  background:radial-gradient(120% 120% at 50% 30%, #2b3b54 0, #1f2c41 55%, #131c2c 100%);
  border:9px solid #16110a;
  box-shadow:inset 0 0 50px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.06),
             0 8px 20px rgba(0,0,0,.35);
  align-self:center;
}

/* ---- opponents -> compact chips around the table ------------------------- */
/* hide their face-down hand representations; the nameplate is the chip and the
 * played-sets stay visible (public info). */
.seat-top .fan, .seat-left .side-stack, .seat-right .side-stack{display:none !important;}
.seat-top, .seat-left, .seat-right{justify-content:flex-start; gap:8px;}
.seat-top .nameplate, .seat-left .nameplate, .seat-right .nameplate{width:100%; max-width:230px;}
/* friends, not foes: turn the CPU skull into a subtle "bot" tag */
.np-skull{font-size:0 !important; color:transparent;}
.np-skull::after{content:"BOT"; font-size:8px; font-weight:700; letter-spacing:.6px;
  color:#3a2706; background:#caa86a; border-radius:5px; padding:1px 4px;}
/* their collected sets: a calm framed shelf */
.seat-top .played-cards, .seat-left .played-cards, .seat-right .played-cards{
  background:rgba(0,0,0,.18); border-radius:10px; padding:4px 6px;
}

/* ---- hero zone (you) at the bottom --------------------------------------- */
#seat-bottom{align-self:end;}
.hero-zone{
  background:linear-gradient(180deg, rgba(255,255,255,.05), transparent 40%),
             linear-gradient(180deg, var(--leather-0), var(--leather-1));
  border:1px solid var(--leather-edge); border-radius:14px; padding:10px 14px;
  box-shadow:0 6px 18px rgba(0,0,0,.4);
}
/* the YOU identity is laid FLAT inside the player box — not its own framed
 * box-in-a-box. No background/border/shadow, minimal footprint. */
#seat-bottom .nameplate{background:none !important; border:none !important; box-shadow:none !important; padding:2px 4px;}
#seat-bottom .nameplate.active{animation:none; box-shadow:none !important;}
/* remove ALL instructional text — "Your turn — click the deck…", the discard
 * prompt, "CPU is taking their turn", etc. The glowing deck/piles + buttons are
 * the cues; players learn by doing. */
#seat-bottom .draw-hint, #seat-bottom .status-line{display:none !important;}
/* …but reserve the controls row's height so the player box stays a consistent
 * size. The hidden hint used to wrap to ~3 lines (~62px) and hold this space;
 * reserve the same footprint so the box doesn't collapse on draw turns. */
#seat-bottom .action-bar{min-height:62px; align-items:center;}
/* your PLAYED cards just need to be identifiable — keep them small so they
 * don't push the interactive hand down. No "PLAYED" caption above them. */
#seat-bottom .played .card{--card-w:40px; --card-h:60px;}
#seat-bottom .played .cat-shogun{--card-w:44px; --card-h:66px;}
#seat-bottom .played-label{display:none !important;}
/* Played cards come in PAIRS (each duo adds its 2 cards adjacently). Pure-CSS
 * (no JS → no re-flow jitter on other turns): overlap the two cards WITHIN a
 * pair so it reads as one unit (you see the colour + a sliver of its partner),
 * and give each pair its own space with a gap before it. Overflow is clipped,
 * never pushed past the box; tap the row for the full tableau. */
#seat-bottom .played-cards{gap:0 !important; overflow:hidden; justify-content:center; flex-wrap:nowrap;}
#seat-bottom .played-cards .card{position:relative; margin-left:10px;}        /* gap before each new pair */
#seat-bottom .played-cards .card:nth-child(even){margin-left:-24px;}          /* 2nd card overlaps its partner */
#seat-bottom .played-cards .card:first-child{margin-left:0;}
/* CRITICAL: stop the played row from stretching its ancestors past the screen
 * (flex/grid items default to min-width:auto = content width). Capping them
 * keeps the whole hero area at the viewport width so the hand never gets pushed
 * off the left edge; the row then overlaps-to-fit instead of overflowing. */
#table{min-width:0;}
#seat-bottom, .hero-zone, .hero-top, .played-zone{min-width:0; max-width:100%;}
#seat-bottom .played-cards{min-width:0; max-width:100%;}

/* opponents are tappable to view the cards they've played */
.seat-top, .seat-left, .seat-right{cursor:pointer;}

/* ---- tap-to-view opponent tableau (popover) ------------------------------ */
#tableau-pop{position:fixed; inset:0; z-index:320; display:none; align-items:center; justify-content:center;
  background:rgba(10,7,4,.72); backdrop-filter:blur(2px);}
#tableau-pop.open{display:flex;}
#tableau-pop .tp-card{position:relative; max-width:92vw; max-height:84vh; overflow:auto;
  background:linear-gradient(160deg,#2e2014,#1a120a); border:1px solid var(--leather-edge);
  border-radius:16px; padding:18px 20px; box-shadow:0 20px 50px rgba(0,0,0,.6);}
#tableau-pop .tp-head{font-family:"Shippori Mincho",serif; color:var(--amber-hi); font-size:17px; letter-spacing:.5px;
  margin:0 40px 8px 0;}
#tableau-pop .tp-stats{display:flex; flex-direction:column; gap:4px; margin-bottom:14px;
  font-size:13px; color:var(--bone-2);}
#tableau-pop .tp-stats b{color:var(--bone); font-weight:800;}
#tableau-pop .tp-min{display:inline-block; margin-top:2px; padding:3px 9px; border-radius:8px; font-weight:600;
  background:rgba(0,0,0,.25); color:var(--bone-dim);}
#tableau-pop .tp-min.ok{background:linear-gradient(180deg,var(--amber-hi),var(--amber-lo)); color:#3a2706;}
#tableau-pop .tp-body{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; min-width:200px;}
#tableau-pop .tp-body .played-cards{display:flex; flex-wrap:wrap; gap:8px; overflow:visible; max-width:none;}
#tableau-pop .tp-body .card{--card-w:64px; --card-h:96px;}
#tableau-pop .tp-empty{color:var(--bone-dim); font-style:italic; padding:18px 6px;}
#tableau-pop .tp-close{position:absolute; top:10px; right:12px; width:34px; height:34px; border-radius:9px;
  cursor:pointer; font-size:15px; color:var(--bone); background:linear-gradient(180deg,var(--leather-0),var(--leather-1));
  border:1px solid var(--leather-edge);}

/* ---- slim topbar: icon only + round + compact target + history button ---- */
#topbar{padding:6px 14px !important;}
.brand-glyph{font-size:22px;}
.meta{gap:10px; font-size:12px; align-items:center;}
#round-info{font-family:"Shippori Mincho",serif; font-weight:700; color:var(--bone); letter-spacing:.4px;}
#threshold-info{font-size:11px; color:#3a2706; background:linear-gradient(180deg,var(--amber-hi),var(--amber-lo));
  padding:2px 9px; border-radius:9px; font-weight:700; box-shadow:inset 0 1px 0 rgba(255,255,255,.4);}
.topbar-actions{display:flex; gap:8px;}
.topbar-btn{font-family:"Inter",sans-serif; font-weight:600; font-size:12px; color:var(--bone); cursor:pointer;
  background:linear-gradient(180deg, var(--leather-0), var(--leather-1)); border:1px solid var(--leather-edge);
  border-radius:9px; padding:6px 11px; box-shadow:0 2px 5px rgba(0,0,0,.3);}
.topbar-btn:hover{filter:brightness(1.12);}

/* ---- chronicle: an on-demand full-screen overlay (no persistent panel) ---- */
#log-panel{
  position:fixed !important; inset:0 !important; z-index:300 !important;
  width:auto !important; height:auto !important; max-height:none !important;
  display:none !important; border:none !important; border-radius:0 !important;
  background:linear-gradient(160deg,#2e2014,#1a120a) !important; box-shadow:none !important;
}
#log-panel.log-open{display:block !important;}
#log-panel .log-inner{opacity:1 !important; pointer-events:auto !important;
  max-width:640px; margin:0 auto; height:100% !important; padding:56px 22px 24px !important;}
#log-panel .log-inner h3{font-size:18px;}
#log-list{flex:1; overflow-y:auto; font-size:14px;}
#log-toggle{position:fixed !important; top:14px; right:16px; left:auto !important;
  width:40px; height:40px; font-size:18px; z-index:301; border-radius:10px;
  background:linear-gradient(180deg, var(--leather-0), var(--leather-1)); border:1px solid var(--leather-edge); color:var(--bone);}

/* ---- opponent "played a pair" presentation (clear + lingering) ----------- */
#play-present, .play-present{position:fixed; z-index:260; display:flex; gap:6px; padding:9px 11px;
  border-radius:14px; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.06), transparent 45%), linear-gradient(180deg, var(--leather-0), var(--leather-1));
  border:1px solid var(--amber); box-shadow:0 0 0 1px var(--amber), 0 0 26px rgba(217,154,58,.55), 0 10px 28px rgba(0,0,0,.5);
  animation:presentIn .28s cubic-bezier(.2,.9,.3,1.4) both; transition:opacity .35s ease, transform .35s ease;}
.play-present .card{--card-w:54px; --card-h:81px;}
.play-present.out{opacity:0; transform:translateY(-8px) scale(.96);}
@keyframes presentIn{0%{opacity:0; transform:translateY(10px) scale(.6);} 60%{opacity:1; transform:translateY(0) scale(1.08);} 100%{transform:scale(1);}}

/* ---- end-game bonus awards reveal ---------------------------------------- */
.bonus-title{font-family:"Shippori Mincho",serif; font-size:30px; color:var(--amber-hi); margin:0 0 6px; letter-spacing:.04em;}
.bonus-list{display:flex; flex-direction:column; gap:8px; margin:14px auto 18px; width:100%; max-width:520px;}
.bonus-row{display:flex; align-items:center; gap:12px; text-align:left; padding:10px 12px; border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), transparent 50%), linear-gradient(180deg,var(--leather-0),var(--leather-1));
  border:1px solid var(--leather-edge); box-shadow:0 3px 8px rgba(0,0,0,.35);
  animation:popIn .3s cubic-bezier(.2,.9,.3,1.3) both;}
.bonus-emoji{font-size:30px; flex:0 0 auto;}
.bonus-info{flex:1; min-width:0; display:flex; flex-direction:column;}
.bonus-name{font-family:"Shippori Mincho",serif; font-weight:700; font-size:15px; color:var(--bone);}
.bonus-desc{font-size:11.5px; color:var(--bone-dim);}
.bonus-win{flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end;}
.bonus-who{font-weight:700; font-size:13px; color:var(--bone); white-space:nowrap; max-width:110px; overflow:hidden; text-overflow:ellipsis;}
.bonus-pts{font-family:"Shippori Mincho",serif; font-weight:800; font-size:16px; color:#3a2706; margin-top:2px;
  background:linear-gradient(180deg,var(--amber-hi),var(--amber-lo)); border-radius:8px; padding:1px 8px;}

.result-modal .result-text{color:var(--bone-2); opacity:.95; font-size:13px;}

/* dramatic one-at-a-time bonus callout (above the live standings) */
.bonus-callout{display:flex; flex-direction:column; align-items:center; gap:2px; min-height:74px;
  justify-content:center; opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s;}
.bonus-callout.show{opacity:1; transform:none;}
.bc-emoji{font-size:30px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));}
.bc-name{font-family:"Shippori Mincho",serif; font-weight:700; font-size:18px; color:var(--amber-hi); letter-spacing:.04em;}
.bc-desc{font-size:11.5px; color:var(--bone-dim);}
.bc-win{font-size:13px; color:var(--bone); margin-top:1px;}
.bc-win b{color:var(--amber-hi); font-size:16px; font-family:"Shippori Mincho",serif;}
/* the awarded player's row pulses gold as points land */
.standing-row{transition:background .3s, box-shadow .3s;}
/* the just-awarded row stays highlighted for the WHOLE linger — the glow is on
 * the class (persists), and the animation only does a one-shot scale pop. */
.standing-row.bump{
  box-shadow:0 0 0 2px var(--amber), 0 0 22px rgba(217,154,58,.6) !important;
  background:linear-gradient(180deg, rgba(217,154,58,.20), rgba(217,154,58,.05)) !important;
  animation:bumpPop .45s ease;
}
@keyframes bumpPop{0%{transform:scale(1);}45%{transform:scale(1.05);}100%{transform:scale(1);}}

/* ---- "your cards" reference inside acquire-effect modals ----------------- */
.effect-handref{margin-top:14px; padding-top:10px; border-top:1px solid rgba(255,255,255,.12);}
.effect-handref-label{font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--bone-dim); margin-bottom:6px;}
.handref-row{--card-w:40px; --card-h:60px; gap:4px !important; flex-wrap:wrap;}
.handref-row .card{cursor:default;}
.handref-row .cat-shogun{--card-w:44px; --card-h:66px;}

/* ---- RESPONSIVE: phones (matches style.css 768px breakpoint) ------------- */
@media (max-width:768px){
  /* compact topbar (the brand was wrapping to two lines) */
  #topbar{padding:8px 12px;}
  .brand-name{font-size:15px; white-space:nowrap;}
  .brand-glyph{font-size:18px;}
  .meta{font-size:11px; gap:8px;}

  /* Board = a simple flex column (avoids the base grid-area conflicts):
   * opponents (slim full-width chips, all visible, no scroll) -> felt -> you. */
  #table{display:flex !important; flex-direction:column !important; gap:10px !important; padding:8px !important;}
  /* base style.css hides side opponents on phones — bring ALL of them back as
   * slim full-width chips (this is a multiplayer-between-friends game). */
  .seat-top, .seat-left, .seat-right{
    display:flex !important; flex-direction:row; align-items:center; justify-content:flex-start; width:100%;
  }
  .seat-top{order:1;} .seat-left{order:2;} .seat-right{order:3;} #center{order:4;} .seat-bottom{order:5;}
  /* base sets align-self:end (to pin to bottom on desktop's grid); in this mobile
   * flex COLUMN that instead shrinks+right-shoves the box. Force full width so the
   * player box's left edge lines up with the opponents and the felt. */
  #seat-bottom{align-self:stretch !important;}
  .seat-top:empty, .seat-left:empty, .seat-right:empty{display:none !important;}   /* drop unused seats */
  .seat-top .played-zone, .seat-left .played-zone, .seat-right .played-zone{display:none;}
  .seat-top .nameplate, .seat-left .nameplate, .seat-right .nameplate{max-width:none; width:100%;}

  /* felt + smaller board cards so deck + both piles fit one row */
  #center{--card-w:72px; --card-h:108px; gap:14px; padding:12px; border-width:7px; align-self:stretch;}
  #center .cat-shogun{--card-w:78px; --card-h:116px;}

  /* HERO ZONE: reverted — no mobile-specific overrides. Uses the base layout
   * + the cozy player box. (Removed the slimming / text-hiding / recessed-shelf
   * experiments.) */

  /* SETUP screen: stack each row and make the segmented controls full-width with
   * big equal tap targets so nothing overflows the modal / clips off a narrow
   * phone (the player/CPU buttons were getting pushed off the right edge). */
  .modal{padding:22px 16px !important;}
  .setup-modal h1{font-size:30px;}
  .setup-row{flex-direction:column; align-items:stretch; gap:8px; margin:14px 0;}
  .setup-row label{text-align:left;}
  .seg{display:flex; width:100%;}
  .seg button{flex:1 1 0; padding:13px 0; font-size:16px;}

  /* END-OF-ROUND REVEAL: the card row was eating the screen and pushing the
   * tally + total below the fold. Shrink cards + type, cap the card area, and
   * let the stage scroll only as a last resort so the numbers stay visible. */
  .reveal-stage{padding:14px 14px 18px; max-height:92vh; overflow-y:auto; display:flex; flex-direction:column;}
  .reveal-head{font-size:19px; margin-bottom:8px;}
  .reveal-cards{--card-w:38px; --card-h:57px; gap:4px; margin-bottom:8px; max-height:34vh; overflow-y:auto;}
  .reveal-cards .cat-shogun{--card-w:42px; --card-h:63px;}
  .reveal-line{font-size:14px; padding:4px 10px;}
  .reveal-line .reveal-pts{font-size:16px;}
  .reveal-total-label{margin-top:8px;}
  .reveal-total{font-size:36px;}
  .reveal-tally{max-width:none;}

  /* STOP / LAST CHANCE banner: the 68px title overflowed the sash and "LAST
   * CHANCE!" wrapped messily. Scale it for the phone so it sits cleanly. */
  .last-chance-anno{gap:10px;}
  .lc-title{font-size:42px; letter-spacing:2px; line-height:1.05; padding:0 14px;}
  .lc-sub{font-size:15px; padding:0 22px;}
}

/* ============================================================================
 * UKIYO-E ART-FORWARD CARDS (Sengoku)
 * Full illustration fills the card; clan pennant top-left; name + score in a
 * bottom banner. Sizes are relative to --card-w/--card-h so every render
 * context (hand, played, piles, modals, center, reveal) scales.
 * ==========================================================================*/
.cf-art { position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; }
.cf-label {
  position:absolute; left:0; right:0; bottom:0; z-index:2; text-align:center;
  padding: calc(var(--card-h) * 0.13) 3% calc(var(--card-h) * 0.045);
  background: linear-gradient(0deg,
    rgba(244,236,217,0.97) 48%, rgba(244,236,217,0.85) 72%, rgba(244,236,217,0) 100%);
  pointer-events:none;
}
.cf-name, .cf-foot { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cf-name {
  font-family:"Shippori Mincho", Georgia, serif; font-weight:700; color:#3a2c18;
  font-size: calc(var(--card-h) * 0.072); line-height:1.02; letter-spacing:.2px;
}
.cf-foot {
  font-weight:700; color:#6a583a; letter-spacing:.2px;
  font-size: calc(var(--card-h) * 0.049); margin-top: calc(var(--card-h) * 0.012);
}
.clan-tag {
  position:absolute; top:0; left:7%; width: calc(var(--card-w) * 0.28); height:auto;
  z-index:3; pointer-events:none; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45));
}
.clan-tag .pennant { stroke:#20242b; stroke-width:2; stroke-linejoin:round; }
/* Card back — washi white with a pink sakura crest (overrides the old green back). */
.card.face-down{
  background: radial-gradient(circle at 50% 38%, #fdfaf3, #efe7d6 88%) !important;
  border-color:#d8c6a0 !important; color:#e79bb0 !important;  /* sakura pink (emblem currentColor) */
  /* no !important on box-shadow so the .glow-target "your turn" deck pulse can override it */
  box-shadow:0 4px 11px rgba(0,0,0,.4), inset 0 0 0 2px rgba(120,96,58,.16);
}
.card.face-down::before{
  inset:6px; border-radius:9px;
  border:1px solid rgba(190,120,140,.35) !important;   /* faint rose ring */
}
.card-back-emblem svg { width:100%; height:auto; display:block; }
.card-back-emblem{
  width: calc(var(--card-w) * 0.56) !important; opacity:.92 !important;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.12)) !important;
}

/* ============================================================================
 * APP SHELL — home / how-to-play / settings / in-game menu
 * ==========================================================================*/
.home-modal, .sheet-modal{ display:flex; flex-direction:column; align-items:stretch; gap:11px; max-width:380px; }
.home-modal{ text-align:center; }
.home-crest{ font-size:64px; line-height:1; filter:drop-shadow(0 3px 6px rgba(0,0,0,.55)); }
.home-title{ font-family:"Shippori Mincho",serif; font-weight:800; font-size:40px; letter-spacing:2px;
  margin:0; color:var(--amber-hi); text-shadow:0 2px 4px rgba(0,0,0,.55); }
.home-modal .tagline{ margin:0 4px 6px; color:var(--bone-dim); font-size:13px; line-height:1.5; }
.home-modal .action-btn, .sheet-modal .action-btn{ width:100%; }
.action-btn.home-secondary{ background:linear-gradient(180deg,var(--leather-0),var(--leather-1));
  color:var(--bone); border:1px solid var(--leather-edge); }

.sheet-modal{ max-width:460px; }
.sheet-title{ font-family:"Shippori Mincho",serif; color:var(--amber-hi); margin:0 0 6px; text-align:center; font-size:24px; }
.sheet-body{ max-height:58vh; overflow-y:auto; padding-right:6px; font-size:13px; line-height:1.55; color:var(--bone); text-align:left; }
.settings-body{ text-align:left; }
.sheet-body p{ margin:6px 0; }
.sheet-body h3{ font-family:"Shippori Mincho",serif; color:var(--amber); margin:13px 0 3px; font-size:15px; }
.sheet-body ul{ margin:4px 0; padding-left:18px; }
.sheet-body li{ margin:5px 0; }
.sheet-body b{ color:var(--amber-hi); }

.settings-body{ display:flex; flex-direction:column; gap:10px; margin:6px 0 4px; }
.set-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:14px; color:var(--bone); }
.set-row .toggle{ min-width:54px; padding:6px 12px; border-radius:8px; font-weight:700; cursor:pointer;
  background:rgba(0,0,0,.3); color:var(--bone-dim); border:1px solid var(--leather-edge); }
.set-row .toggle.on{ background:linear-gradient(180deg,var(--green-hi),var(--green)); color:#10220f; border-color:transparent; }
.set-row .seg{ display:flex; gap:4px; }
.set-row .seg button{ padding:6px 13px; border-radius:8px; cursor:pointer; font-weight:700;
  background:rgba(0,0,0,.3); color:var(--bone-dim); border:1px solid var(--leather-edge); }
.set-row .seg button.on{ background:linear-gradient(180deg,var(--amber-hi),var(--amber-lo)); color:#3a2706; border-color:transparent; }

/* reduce-motion setting: kill animations + transitions */
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after{ animation:none !important; transition:none !important; }

/* ---- Card inspect (long-press) ---- */
.inspect-modal{ display:flex; flex-direction:column; align-items:center; gap:12px; max-width:330px; text-align:center; }
.inspect-art .card{ --card-w:150px; --card-h:225px; }
.insp-name{ font-family:"Shippori Mincho",serif; color:var(--amber-hi); margin:0 0 2px; font-size:22px; }
.insp-tags{ font-size:10.5px; letter-spacing:.6px; text-transform:uppercase; color:var(--bone-dim); margin-bottom:6px; }
.insp-effect{ color:var(--bone); font-size:14px; line-height:1.5; margin:6px 0; }
.insp-score{ color:var(--bone-dim); font-size:13px; margin:4px 0 2px; }
.insp-score b{ color:var(--amber-hi); }
.inspect-modal .action-btn{ width:100%; }

/* ---- Card Reference (codex) ---- */
.codex-hint{ font-size:12px; color:var(--bone-dim); text-align:center; margin:0 0 8px; font-style:italic; }
.codex-grid{ display:flex; flex-direction:column; gap:12px; }
.codex-cell{ display:flex; gap:12px; align-items:center; }
.codex-art .card{ --card-w:54px; --card-h:81px; flex:0 0 auto; }
.codex-text{ text-align:left; }
.codex-name{ font-family:"Shippori Mincho",serif; color:var(--amber-hi); font-size:15px; }
.codex-eff{ font-size:12px; color:var(--bone); line-height:1.4; margin:2px 0; }
.codex-sc{ font-size:11px; color:var(--bone-dim); font-weight:700; letter-spacing:.3px; }