/* ============================================================================
 * style.css — Sengoku  ·  premium digital board game
 * Pure CSS/SVG (+ Google Fonts: Cinzel / Inter). No images, no libraries.
 * Reference feel: Balatro chunkiness, BGA clarity, Marvel Snap polish.
 * ==========================================================================*/

:root {
  /* --- palette: feudal-Japan khaki / olive, broker, volcanic red, bone --- */
  --bg-0:   #14140a;
  --bg-1:   #1a1a0e;
  --bg-2:   #2a2a1a;
  --felt-lo:#162033;   /* aizome indigo table (was green felt) */
  --felt-hi:#2b3b54;

  --leather-0:#322a1c;
  --leather-1:#241d12;
  --stone-0:  #3a3826;
  --stone-1:  #211f12;

  --bone:     #f5f0e8;
  --bone-2:   #ece3d0;
  --bone-dim: #c8bfa6;
  --paper-ink:#4a3a22;     /* card name dark brown */
  --paper-mut:#8a7a5c;     /* card foot muted brown */
  --card-border:#c8b89a;

  --amber:    #f0a030;
  --amber-lo: #b9781f;
  --amber-hi: #ffd27a;
  --burnt:    #c0561f;
  --volcanic: #8b1a1a;
  --volcanic-hi:#c43a2a;
  --lastchance:#8b5a1a;
  --green:    #4d7a2c;
  --green-hi: #7aa544;

  /* card colors */
  --c-red:#c8463a; --c-blue:#4079b0; --c-yellow:#e0b73e; --c-green:#5fa047; --c-purple:#9a63c8;

  --card-w: 80px;
  --card-h: 120px;

  /* === DESIGN SYSTEM (UI overhaul · step 2) ==============================
   * Systematic scales tuned via the ?lab visual loop. Aim: simplified
   * Hearthstone — weight, depth, deliberate settle. New components should
   * pull from these rather than hand-rolling px/shadows/easings. */

  /* spacing — 4px base rhythm */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;

  /* radius */
  --r-sm: 8px; --r-md: 11px; --r-lg: 14px; --r-card: 12px;
  --radius: 14px;          /* legacy alias === --r-lg */

  /* elevation — layered ambient+key shadows for real depth. Higher = closer
   * to the viewer (rest → hover → floating/selected → modal). */
  --elev-1: 0 1px 2px rgba(0,0,0,0.35), 0 2px 5px rgba(0,0,0,0.28);
  --elev-2: 0 2px 4px rgba(0,0,0,0.30), 0 6px 14px rgba(0,0,0,0.42);
  --elev-3: 0 6px 12px rgba(0,0,0,0.40), 0 14px 26px rgba(0,0,0,0.48);
  --elev-4: 0 12px 22px rgba(0,0,0,0.46), 0 28px 50px rgba(0,0,0,0.55);

  /* easing — the motion signature. Clean decelerations, NO overshoot (overshoot
   * read as springy/artificial); weight comes from duration + elevation, not bounce. */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);     /* deliberate decelerate (panels/fades) */
  --ease-lift:   cubic-bezier(0.2, 0.7, 0.2, 1);     /* snappy, smooth lift for hovers (cards/buttons) */
  --ease-soft:   cubic-bezier(0.65, 0, 0.35, 1);     /* symmetric in-out (looping pulses) */

  /* timing scale */
  --t-instant:  90ms;   /* button press */
  --t-fast:    150ms;   /* hover */
  --t-base:    220ms;   /* standard move / lift */
  --t-slow:    380ms;   /* panels, layout */
  --t-ceremony: 700ms;  /* big reveals (juice phase) */

  --paper-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");

  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}
.cinzel { font-family: "Shippori Mincho", "Trajan Pro", Georgia, serif; }

* { box-sizing: border-box; }

body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  color: var(--bone);
  background:
    radial-gradient(120% 80% at 50% -10%, #2a3a58 0%, transparent 55%),
    radial-gradient(90% 70% at 95% 110%, #4a1f16 0%, transparent 55%),
    linear-gradient(160deg, var(--bg-1), var(--bg-0) 75%);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  grid-template-areas: "top top" "board log";
  gap: 12px;
  padding: 12px;
}
body::before { /* faint atmospheric grain over everything */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: var(--paper-noise); opacity: 0.04; mix-blend-mode: overlay;
}

/* ---- Topbar -------------------------------------------------------------- */
#topbar {
  grid-area: top; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 45%),
    linear-gradient(90deg, var(--stone-0), var(--stone-1));
  border: 1px solid #564f33; border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-glyph { font-size: 30px; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6)); }
.brand-name {
  font-family: "Shippori Mincho", Georgia, serif; font-weight: 900; font-size: 28px;
  letter-spacing: 2px; text-transform: uppercase;
  background: linear-gradient(180deg, var(--amber-hi), var(--amber) 55%, var(--amber-lo));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 1px rgba(0,0,0,0.5));
}
.meta { display: flex; gap: 10px; font-size: 12px; }
.meta span {
  background: rgba(0,0,0,0.35); padding: 7px 14px; border-radius: 20px;
  border: 1px solid rgba(240,160,48,0.18); font-weight: 600; letter-spacing: 0.4px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5); color: var(--bone-dim);
}

/* ---- The felt table ------------------------------------------------------ */
#table {
  grid-area: board; z-index: 1; position: relative; min-width: 0; min-height: 0;
  display: grid;
  grid-template-columns: minmax(150px,184px) 1fr minmax(150px,184px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "top    top    top"
    "left   center right"
    "bottom bottom bottom";
  gap: 8px; padding: 12px 16px;
  overflow: hidden; /* content is bounded per-zone; never spill past the table */
  border-radius: 26px;
  background:
    radial-gradient(80% 70% at 50% 42%, var(--felt-hi) 0%, var(--felt-lo) 70%, #0d1521 100%);
  border: 3px solid #121826;
  box-shadow:
    inset 0 0 0 6px rgba(220,180,110,0.10),
    inset 0 0 80px rgba(0,0,0,0.55),
    0 10px 30px rgba(0,0,0,0.6);
}
#table::after { /* felt weave */
  content: ""; position: absolute; inset: 9px; border-radius: 20px; pointer-events: none;
  background-image: var(--paper-noise); opacity: 0.05;
}
.seat-top { grid-area: top; } .seat-left { grid-area: left; }
.seat-right { grid-area: right; } .seat-bottom { grid-area: bottom; }
#center { grid-area: center; }

.seat { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.seat-top    { justify-content: flex-start; }
.seat-bottom { justify-content: flex-end; }
.seat-left, .seat-right { justify-content: center; }

/* ---- Nameplate (aged leather) ------------------------------------------- */
.nameplate {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 11px; border-radius: 12px; max-width: 100%;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), transparent 40%),
    linear-gradient(180deg, var(--leather-0), var(--leather-1));
  border: 1px solid #4a3e26; border-top-color: #6a5836;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
}
.nameplate.active {
  border-color: var(--amber);
  animation: npPulse 1.8s ease-in-out infinite;
}
@keyframes npPulse {
  0%,100% { box-shadow: 0 0 0 1px var(--amber), 0 0 12px rgba(240,160,48,0.35), 0 4px 10px rgba(0,0,0,0.5); }
  50%     { box-shadow: 0 0 0 1px var(--amber), 0 0 26px rgba(240,160,48,0.7),  0 4px 10px rgba(0,0,0,0.5); }
}
.np-avatar {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; font-size: 19px;
  background: radial-gradient(circle at 40% 30%, #4a3f28, #241c10);
  border: 1px solid #5a4a2e; box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}
.np-main { min-width: 0; }
.np-name {
  font-family: "Shippori Mincho", Georgia, serif; font-weight: 700; font-size: 14px;
  letter-spacing: 0.4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 5px;
}
.np-skull { color: var(--volcanic-hi); font-size: 12px; }
.np-counts { font-size: 10.5px; color: var(--bone-dim); margin-top: 2px; letter-spacing: 0.3px; }
.np-round { color: var(--green-hi); }
.np-score {
  margin-left: auto; display: flex; flex-direction: column; align-items: center;
  padding: 3px 10px; border-radius: 9px; line-height: 1;
  background: linear-gradient(180deg, var(--amber-hi), var(--amber) 60%, var(--amber-lo));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 4px rgba(0,0,0,0.4);
}
.np-total { font-weight: 800; font-size: 16px; color: #2a1c05; }
.np-lbl { font-size: 8px; font-weight: 700; color: #4a3208; letter-spacing: 1px; text-transform: uppercase; }

/* ---- Played-cards zone --------------------------------------------------- */
.played-zone { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; }
.played-label {
  font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--bone-dim);
  opacity: 0.7;
}
.played-cards {
  display: flex; gap: 5px; flex-wrap: nowrap; justify-content: center;
  max-width: 100%; overflow-x: auto; overflow-y: hidden; padding: 0 2px 4px;
}
.played-cards.empty-played {
  min-height: 26px; align-items: center; border-radius: 10px;
  border: 1px dashed rgba(200,184,154,0.18); width: 80%; overflow: visible;
}
.front-empty { font-size: 10px; color: #7d7355; font-style: italic; }
.played .card { /* played cards are smaller & cast a flatter shadow */
  --card-w: 58px; --card-h: 86px; box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}
.played .cat-shogun { --card-w: 62px; --card-h: 92px; }
.seat-left .played .card, .seat-right .played .card { --card-w: 46px; --card-h: 68px; }

/* ---- Card fans / stacks -------------------------------------------------- */
.fan { display: flex; justify-content: center; align-items: flex-end; padding-top: 10px; }
.fan { flex-wrap: nowrap; }
.fan .card {
  transform: rotate(var(--angle, 0deg)) translateY(var(--ty, 0px));
  transform-origin: center bottom; z-index: var(--z, 0);
}
.fan .card + .card { margin-left: calc(var(--overlap, 36px) * -1); }
.hero-fan { padding-top: 16px; }
.hero-zone { gap: 5px; }
.hero-fan .card:hover {
  transform: translateY(-16px) scale(1.08) rotate(0deg); z-index: 999;
  box-shadow: var(--elev-3), 0 0 16px rgba(240,160,48,0.35);
}
.hero-fan .card.selected {
  transform: translateY(-24px) scale(1.08) rotate(0deg); z-index: 998;
  box-shadow: var(--elev-4), 0 0 0 3px var(--amber), 0 0 22px rgba(240,160,48,0.7);
}
/* inline post-draw discard: highlight the two just-drawn cards in hand */
.fan .card.newly-drawn { box-shadow: 0 0 0 3px var(--amber), 0 8px 18px rgba(0,0,0,0.55); }
.fan .card.newly-drawn::after { background: none; }
.discard-target { position: relative; }
.side-stack { display: flex; flex-direction: column; align-items: center; }
.side-stack .card { margin-top: calc(var(--card-h) * -0.62); }
.side-stack .card:first-child { margin-top: 0; }
.empty-hand { font-size: 11px; color: #7d7355; font-style: italic; padding: 10px; }

/* ---- CARD (physical) ----------------------------------------------------- */
.card {
  position: relative; flex: 0 0 auto; overflow: hidden;
  width: var(--card-w); height: var(--card-h); border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.5), transparent 18%),
    linear-gradient(180deg, var(--bone) 0%, var(--bone-2) 100%);
  border: 1px solid var(--card-border);
  box-shadow: var(--elev-2), inset 0 0 0 2px rgba(120,96,58,0.18);
  display: flex; flex-direction: column; user-select: none; color: var(--paper-ink);
  transition: transform var(--t-fast) var(--ease-lift), box-shadow var(--t-fast) var(--ease-out);
}
/* NOTE: no blanket entrance animation. render() rebuilds the whole board each
 * turn, so animating every .card made the deck/discard piles flicker on every
 * render even when nothing moved ("cracked"). Real card movement is handled by
 * the FLIP fly-clones in ui.js. cardIn is kept for intentional, opt-in use
 * (deal ceremony) in the juice phase. */
@keyframes cardIn { from { opacity: 0; transform: translateY(8px) scale(0.94); } to { opacity: 1; } }
.card::after { /* paper grain on the face */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--paper-noise); opacity: 0.06;
}
.card.clickable { cursor: pointer; }
/* NOTE: card face internals (name/art/foot/stripe + per-color/per-category
 * tints) are now handled by the ukiyo-e art-forward layout in cozy.css
 * (.cf-art / .cf-label / .cf-name / .cf-foot / .clan-tag). Those old rules were
 * removed when cardEl switched to full illustrations + clan pennants. */

/* T-Rex — gold foil, slightly larger & legendary */
.cat-shogun {
  --card-w: 88px; --card-h: 132px;
  border-color: var(--amber);
  background:
    repeating-linear-gradient(115deg, #fff4d2 0px, #f3dca0 6px, #ffe9b0 12px, #e9c87e 18px);
  box-shadow: 0 5px 14px rgba(0,0,0,0.5), 0 0 14px rgba(240,160,48,0.45), inset 0 0 0 2px rgba(255,210,120,0.6);
}
.cat-shogun::before { /* moving foil shimmer */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.55) 48%, transparent 62%);
  background-size: 250% 100%; animation: foil 3.2s linear infinite;
}
@keyframes foil { 0% { background-position: 130% 0; } 100% { background-position: -130% 0; } }

/* ---- Card backs (sengoku-scale / koban pattern) ---------------------------- */
.card.face-down {
  background:
    radial-gradient(circle at 50% 0, rgba(240,160,48,0.12), transparent 60%),
    repeating-radial-gradient(circle at 50% 120%, #36462a 0 7px, #2c3a22 7px 14px),
    linear-gradient(180deg, #36462a, #243018);
  border-color: #4e5e36; color: var(--amber);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 11px rgba(0,0,0,0.5), inset 0 0 0 2px rgba(0,0,0,0.25);
}
.card.face-down::before {
  content: ""; position: absolute; inset: 7px; border-radius: 9px;
  border: 1px solid rgba(240,160,48,0.3);
}
.card.face-down::after { background: none; }
.card-back-emblem { width: calc(var(--card-w) * 0.5); opacity: 0.6; filter: drop-shadow(0 1px 2px #000); z-index: 1; }

/* opponent / side card scaling */
.seat-top .card    { --card-w: 56px; --card-h: 84px; }
.seat-left .card, .seat-right .card { --card-w: 50px; --card-h: 75px; }
.seat-top .cat-shogun, .seat-left .cat-shogun, .seat-right .cat-shogun { --card-w: 58px; --card-h: 86px; }

/* ---- Center: deck + discard piles --------------------------------------- */
#center { display: flex; align-items: center; justify-content: center; gap: 30px; }
/* Center "board" cards (deck + discard piles) stay large; player cards are original size. */
#center { --card-w: 116px; --card-h: 174px; }
#center .cat-shogun { --card-w: 128px; --card-h: 192px; }
.center-zone { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.zone-cap {
  font-family: "Shippori Mincho", Georgia, serif; font-size: 11px; letter-spacing: 1px;
  color: var(--bone-dim); text-transform: uppercase; text-shadow: 0 1px 2px #000;
}
/* a zone-cap that is currently an actionable prompt (Draw / Take / Drop) */
.zone-cap.cap-action {
  color: #2a1c05; padding: 4px 13px; border-radius: 12px; text-shadow: none;
  background: linear-gradient(180deg, var(--amber-hi), var(--amber));
  border: 1px solid #b9781f; box-shadow: 0 3px 8px rgba(0,0,0,0.4);
  animation: capPulse 1.2s ease-in-out infinite;
}
@keyframes capPulse {
  0%,100% { box-shadow: 0 3px 8px rgba(0,0,0,0.4), 0 0 0 rgba(240,160,48,0); }
  50%     { box-shadow: 0 3px 8px rgba(0,0,0,0.4), 0 0 16px rgba(240,160,48,0.85); }
}
.deck-stack, .discard-stack { position: relative; }
.deck-stack .card {
  box-shadow: 3px 3px 0 #1a2414, 6px 6px 0 #16200f, 9px 9px 0 #121b0c, 11px 13px 20px rgba(0,0,0,0.55);
}
.discard-stack.deep::before, .discard-stack.deep::after { /* peeking pile depth */
  content: ""; position: absolute; inset: 0; border-radius: 12px; z-index: -1;
  background: #2c3a22; border: 1px solid #1a2414;
}
.discard-stack.deep::before { transform: translate(3px, 3px); }
.discard-stack.deep::after  { transform: translate(6px, 6px); }
.count-badge {
  display: flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 8px; border-radius: 18px;
  font-weight: 800; font-size: 14px; color: #2a1c05;
  background: linear-gradient(180deg, var(--amber-hi), var(--amber) 60%, var(--amber-lo));
  border: 2px solid #7a5414; box-shadow: 0 3px 6px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.5);
}
.count-badge.small { min-width: 26px; height: 26px; font-size: 12px; }
.empty-pile {
  width: var(--card-w); height: var(--card-h); border-radius: 12px;
  border: 2px dashed #5a6a3c; display: flex; align-items: center; justify-content: center;
  color: #7d8866; font-size: 10px; font-style: italic; background: rgba(0,0,0,0.25);
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.45);
}
.glow-target { cursor: pointer; animation: glowPulse 1.35s ease-in-out infinite; }
.glow-target:hover {
  transform: translateY(-9px) scale(1.06);
  box-shadow: 0 0 0 3px var(--amber), 0 18px 30px rgba(0,0,0,0.55), 0 0 30px var(--amber) !important;
}
@keyframes glowPulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(240,160,48,0.5),  0 0 10px rgba(240,160,48,0.4),  0 4px 12px rgba(0,0,0,0.4); }
  50%     { box-shadow: 0 0 0 3px rgba(240,160,48,0.9),  0 0 28px rgba(240,160,48,0.85), 0 4px 12px rgba(0,0,0,0.4); }
}
/* playable hand cards (a Duo pair you can play) — green "go" glow + click to play */
.hero-fan .card.playable { cursor: pointer; box-shadow: 0 0 0 2px var(--green-hi), 0 0 14px rgba(122,165,68,0.6), 0 6px 14px rgba(0,0,0,0.5); }
.hero-fan .card.playable:hover {
  transform: translateY(-16px) scale(1.08) rotate(0deg); z-index: 999;
  box-shadow: 0 0 0 3px var(--green-hi), 0 0 24px rgba(122,165,68,0.85), var(--elev-3);
}

/* ---- Hero controls / action bar ----------------------------------------- */
.hero-zone { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hero-top { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.action-bar { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.status-line { font-size: 13px; color: var(--bone-dim); font-style: italic; letter-spacing: 0.3px; }
.draw-hint {
  font-size: 13px; color: var(--amber-hi); font-weight: 600; letter-spacing: 0.3px;
  display: flex; align-items: center; gap: 6px;
}

.action-btn {
  font-family: "Inter", sans-serif; font-weight: 700; font-size: 13.5px; letter-spacing: 0.3px;
  color: var(--bone); cursor: pointer; border-radius: var(--r-md); padding: 10px 16px;
  background: linear-gradient(180deg, #4a5a32, #313e21);
  border: 1px solid #6f7e4c; border-top-color: #92a062;
  box-shadow: 0 4px 0 rgba(0,0,0,0.4), var(--elev-1), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: transform var(--t-instant) var(--ease-lift), filter var(--t-fast) var(--ease-out), box-shadow var(--t-instant) var(--ease-out);
}
.action-btn:hover:not(:disabled) {
  filter: brightness(1.13); transform: translateY(-2px);
  box-shadow: 0 6px 0 rgba(0,0,0,0.4), var(--elev-2), inset 0 1px 0 rgba(255,255,255,0.18);
}
.action-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.18); }
.action-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.btn-draw, .btn-end { background: linear-gradient(180deg, var(--green-hi), var(--green)); border-color: #9ec05e; border-top-color: #c2e078; color: #15200a; }
.btn-duo {
  font-family: "Shippori Mincho", Georgia, serif;
  background: linear-gradient(180deg, var(--amber), var(--amber-lo)); border-color: #e0a050; border-top-color: #ffce80; color: #2a1c05;
}
.btn-stop {
  font-family: "Shippori Mincho", Georgia, serif; text-transform: uppercase; letter-spacing: 1px;
  background: linear-gradient(180deg, var(--volcanic-hi), var(--volcanic)); border-color: #d56a5a; border-top-color: #ef9484;
  animation: stopPulse 1.3s ease-in-out infinite;
}
@keyframes stopPulse {
  0%,100% { box-shadow: 0 4px 0 rgba(0,0,0,0.4), 0 0 0 rgba(196,58,42,0); }
  50%     { box-shadow: 0 4px 0 rgba(0,0,0,0.4), 0 0 20px rgba(196,58,42,0.8); }
}
.btn-last {
  font-family: "Shippori Mincho", Georgia, serif; text-transform: uppercase; letter-spacing: 1px;
  background: linear-gradient(180deg, #c2861f, var(--lastchance)); border-color: #e0a850; border-top-color: #f2c878;
}
.eligible-note { font-size: 12px; color: var(--amber-hi); font-weight: 600; }

/* ---- Log panel (collapsible) -------------------------------------------- */
#log-panel {
  grid-area: log; z-index: 2; position: relative;
  width: 280px; transition: width 0.25s ease;
  background: linear-gradient(180deg, var(--stone-0), var(--stone-1));
  border: 1px solid #564f33; border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
  overflow: hidden;
}
#log-panel:not(.log-open) { width: 50px; }
#log-toggle {
  position: absolute; top: 10px; right: 9px; z-index: 3;
  width: 32px; height: 32px; border-radius: 9px; cursor: pointer; font-size: 16px;
  background: linear-gradient(180deg, var(--leather-0), var(--leather-1));
  border: 1px solid #5a4a2e; color: var(--amber);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
#log-toggle:hover { filter: brightness(1.2); }
.log-inner { padding: 14px; height: 100%; display: flex; flex-direction: column; }
#log-panel:not(.log-open) .log-inner { opacity: 0; pointer-events: none; }
.log-inner h3 {
  margin: 0 0 10px; font-family: "Shippori Mincho", Georgia, serif; font-size: 15px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--amber); padding-bottom: 8px; padding-right: 36px;
  border-bottom: 1px solid rgba(240,160,48,0.2);
}
#log-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; font-size: 12.5px; }
#log-list li {
  display: flex; gap: 8px; align-items: flex-start; line-height: 1.35;
  padding: 7px 9px; margin-bottom: 5px; border-radius: 8px;
  background: rgba(0,0,0,0.28); border-left: 3px solid var(--green); opacity: 0.6;
  transition: opacity 0.2s ease;
}
#log-list li .log-icon { flex: 0 0 auto; }
#log-list li:nth-last-child(-n+3) { opacity: 0.85; }
#log-list li:last-child { opacity: 1; border-left-color: var(--amber); background: rgba(240,160,48,0.12); }

/* ---- Overlays / modals --------------------------------------------------- */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  background: radial-gradient(900px 600px at 50% 40%, rgba(20,24,12,0.72), rgba(4,6,3,0.93));
  display: flex; align-items: center; justify-content: center; padding: 22px;
  backdrop-filter: blur(4px); animation: fade 0.2s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal {
  max-width: min(840px, 95vw); max-height: 92vh; overflow-y: auto; text-align: center;
  padding: 26px 30px; border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 22%),
    linear-gradient(180deg, var(--stone-0), #1a180e);
  border: 1px solid #6f6440;
  box-shadow: 0 26px 70px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.1);
  animation: popIn 0.24s cubic-bezier(.2,.9,.3,1.3) both;
}
@keyframes popIn { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } }
.modal h1, .modal h2, .modal h3 { margin-top: 0; }
.modal h3 { font-family: "Shippori Mincho", Georgia, serif; letter-spacing: 0.5px; color: var(--bone); }
.modal .card-row, .modal .fan { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; padding-top: 8px; }
.modal .card.clickable:hover { transform: translateY(-12px) scale(1.06); box-shadow: 0 18px 30px rgba(0,0,0,0.6), 0 0 16px var(--amber); z-index: 5; }
.modal .card.newly-drawn { box-shadow: 0 0 0 3px var(--amber), 0 8px 18px rgba(0,0,0,0.5); }
.modal .card.newly-drawn::before {
  content: "NEW"; position: absolute; top: -9px; left: 50%; transform: translateX(-50%); z-index: 4;
  font-size: 8px; font-weight: 800; letter-spacing: 1px; color: #2a1c05; padding: 2px 7px; border-radius: 9px;
  background: linear-gradient(180deg, var(--amber-hi), var(--amber)); box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.hint { font-size: 12px; color: var(--bone-dim); font-style: italic; margin-top: 8px; }
.btn-group { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.modal .action-btn.big { font-size: 16px; padding: 13px 26px; }

/* parchment popups (round/game over) */
.parchment {
  background:
    radial-gradient(120% 120% at 50% 0, #f0e2c0, #e3d0a4 70%, #d4bd8a 100%);
  color: #3a2c14; border: 1px solid #b89a64;
  box-shadow: 0 26px 70px rgba(0,0,0,0.75), inset 0 0 0 6px rgba(120,90,40,0.12);
}
.parchment::after { content: ""; }
.parchment h2 { font-family: "Shippori Mincho", Georgia, serif; color: #5a3c12; letter-spacing: 1px; }
.parchment .hint { color: #6a5530; }
.result-text { font-size: 16px; color: #4a3818; margin: 4px 0 14px; }

/* per-player breakdown */
.bd-grid { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 8px 0 6px; }
.bd-player {
  flex: 1 1 200px; max-width: 240px; text-align: left;
  background: rgba(90,60,20,0.10); border: 1px solid rgba(120,90,40,0.3);
  border-radius: 14px; padding: 12px 14px;
}
.bd-player.crowned { border-color: #c9991f; box-shadow: 0 0 0 2px rgba(201,153,31,0.5), 0 6px 16px rgba(0,0,0,0.2); }
.bd-player.no-score { opacity: 0.55; }
.bd-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.bd-name { font-family: "Shippori Mincho", Georgia, serif; font-weight: 700; font-size: 15px; display: flex; gap: 6px; align-items: center; }
.bd-total { font-weight: 800; font-size: 22px; color: #6a3e0a; }
.bd-line { display: flex; justify-content: space-between; font-size: 12.5px; padding: 3px 0; border-bottom: 1px dashed rgba(120,90,40,0.25); }
.bd-line span:last-child { font-weight: 700; }
.bd-line.muted { color: #8a7548; }
.bd-applied { margin-top: 8px; font-weight: 700; font-size: 13px; text-align: center; padding: 5px; border-radius: 8px; }
.bd-applied.yes { background: rgba(77,122,44,0.25); color: #2e4a16; }
.bd-applied.no  { background: rgba(139,26,26,0.15); color: #7a2018; }
.crown { color: #c9991f; }

/* game over */
.go-title { font-family: "Shippori Mincho", Georgia, serif; font-size: 38px; letter-spacing: 2px; text-transform: uppercase; }
.go-extinct { color: var(--volcanic-hi); text-shadow: 0 3px 10px rgba(196,58,42,0.5); }
.go-survival { color: var(--green-hi); text-shadow: 0 3px 10px rgba(122,165,68,0.5); }
.standings { margin: 16px auto; max-width: 420px; }
.standing-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px; margin-bottom: 8px;
  border-radius: 12px; background: rgba(0,0,0,0.28); font-size: 16px;
}
.standing-row .medal { font-size: 22px; }
.standing-row .st-name { font-family: "Shippori Mincho", Georgia, serif; flex: 1; text-align: left; }
.standing-row .st-score { font-weight: 800; color: var(--amber); }
.standing-row.winner { background: rgba(240,160,48,0.16); box-shadow: 0 0 0 1px rgba(240,160,48,0.5); }

/* setup */
.setup-modal h1 {
  font-family: "Shippori Mincho", Georgia, serif; font-size: 42px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px;
  background: linear-gradient(180deg, var(--amber-hi), var(--amber) 55%, var(--amber-lo));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tagline { color: var(--bone-dim); margin-top: 0; font-style: italic; }
.setup-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 18px 0; }
.setup-row label { font-family: "Shippori Mincho", Georgia, serif; font-weight: 700; font-size: 15px; }
.seg { display: inline-flex; border: 1px solid #6f6440; border-radius: 12px; overflow: hidden; box-shadow: inset 0 2px 6px rgba(0,0,0,0.45); }
.seg button { background: #2a2616; color: var(--bone); border: none; padding: 10px 18px; cursor: pointer; font-weight: 800; font-size: 15px; border-right: 1px solid #1a160c; }
.seg button:last-child { border-right: none; }
.seg button.on { background: linear-gradient(180deg, var(--green-hi), var(--green)); color: #15200a; }
.seg button:disabled { opacity: 0.3; cursor: not-allowed; }

/* curtain */
.curtain h2 { font-family: "Shippori Mincho", Georgia, serif; font-size: 30px; color: var(--amber); text-transform: uppercase; letter-spacing: 1.5px; }

/* Public "card taken from a pile" reveal */
.pickup-anno {
  position: fixed; top: 14%; left: 50%; transform: translateX(-50%); z-index: 56;
  pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 16px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(40,50,28,0.96), rgba(22,28,16,0.96));
  border: 1px solid #6f7e4c; box-shadow: 0 14px 34px rgba(0,0,0,0.6), 0 0 26px rgba(240,160,48,0.35);
  animation: pickupIn 1.9s ease forwards;
}
.pickup-anno .card { --card-w: 92px; --card-h: 138px; }
.pickup-label { font-family: "Inter", sans-serif; font-weight: 700; font-size: 14px; color: var(--bone); white-space: nowrap; }
@keyframes pickupIn {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(0.92); }
  12%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  85%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-8px); }
}

/* Non-blocking "whose turn" banner */
.turn-banner {
  position: fixed; top: 13%; left: 50%; z-index: 55; pointer-events: none;
  font-family: "Shippori Mincho", Georgia, serif; font-weight: 700; font-size: 22px;
  letter-spacing: 1px; padding: 12px 32px; border-radius: 14px; white-space: nowrap;
  box-shadow: 0 12px 30px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.18);
  animation: turnBanner 1.5s ease forwards;
}
.turn-banner.cpu {
  color: #2a1c05; border: 1px solid #e0a850;
  background: linear-gradient(180deg, var(--amber-hi), var(--amber) 60%, var(--amber-lo));
}
.turn-banner.you {
  color: #15200a; border: 1px solid #a6c462;
  background: linear-gradient(180deg, var(--green-hi), var(--green));
}
@keyframes turnBanner {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-18px) scale(0.95); }
  14%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  80%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(0.98); }
}

/* LAST CHANCE — dramatic non-blocking announcement */
.last-chance-anno {
  position: fixed; inset: 0; z-index: 58; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center;
  animation: lcAnno 2.6s ease forwards;
}
.last-chance-anno::before { /* volcanic sash across the screen */
  content: ""; position: absolute; left: 0; right: 0; top: 34%; height: 32%; z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(139,26,26,0.92) 18%, rgba(214,98,44,0.95) 50%, rgba(139,26,26,0.92) 82%, transparent);
  box-shadow: 0 0 80px rgba(214,98,44,0.6);
  animation: lcSash 2.6s ease forwards;
}
.lc-title {
  font-family: "Shippori Mincho", Georgia, serif; font-weight: 900; font-size: 68px;
  letter-spacing: 5px; text-transform: uppercase; color: #fff;
  text-shadow: 0 4px 18px #000, 0 0 36px rgba(255,190,90,0.9);
}
.lc-sub {
  font-family: "Inter", sans-serif; font-size: 21px; font-weight: 600; color: #fff5e6;
  text-shadow: 0 2px 10px #000; letter-spacing: 0.4px;
}
.lc-sub b { color: var(--amber-hi); }
@keyframes lcAnno {
  0%   { opacity: 0; transform: scale(0.82); }
  9%   { opacity: 1; transform: scale(1.06); }
  16%  { transform: scale(1); }
  82%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.02); }
}
@keyframes lcSash {
  0%   { transform: scaleX(0); }
  14%  { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}
/* STOP variant — deeper red, briefer (it leads straight into the stats screen) */
.last-chance-anno.stop-anno, .last-chance-anno.stop-anno::before { animation-duration: 1.6s; }
.stop-anno::before {
  background: linear-gradient(90deg, transparent, rgba(110,16,16,0.95) 18%, rgba(150,26,26,0.97) 50%, rgba(110,16,16,0.95) 82%, transparent);
  box-shadow: 0 0 80px rgba(150,26,26,0.6);
}
.stop-anno .lc-title { text-shadow: 0 4px 18px #000, 0 0 36px rgba(255,90,70,0.9); }

/* ---- End-of-round cinematic reveal -------------------------------------- */
.reveal-ov { background: radial-gradient(circle at 50% 38%, rgba(20,24,12,0.86), rgba(4,6,3,0.97)); }
.reveal-stage {
  text-align: center; max-width: min(900px, 95vw); padding: 22px 28px 26px; border-radius: 20px;
  background: linear-gradient(180deg, var(--stone-0), #16140c);
  border: 1px solid #6f6440; box-shadow: 0 26px 70px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.08);
  animation: popIn 0.3s cubic-bezier(.2,.9,.3,1.3) both;
}
.reveal-head {
  font-family: "Shippori Mincho", Georgia, serif; font-size: 26px; font-weight: 700; color: var(--bone);
  margin-bottom: 16px; display: flex; gap: 12px; align-items: center; justify-content: center;
}
.reveal-tag {
  font-family: "Inter", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: #2a1c05; padding: 4px 12px; border-radius: 12px;
  background: linear-gradient(180deg, var(--volcanic-hi), var(--volcanic)); color: #fff; border: 1px solid #e07a6a;
}
.reveal-cards { --card-w: 64px; --card-h: 96px; display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.reveal-cards .cat-shogun { --card-w: 70px; --card-h: 105px; }
.reveal-cards .card { transition: filter 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; }
.reveal-cards .card.dim { filter: brightness(0.4) saturate(0.55); }
.reveal-cards .card.lit { transform: translateY(-9px) scale(1.05); box-shadow: 0 0 0 3px var(--amber), 0 0 24px rgba(240,160,48,0.85); z-index: 2; }
.reveal-tally { max-width: 360px; margin: 0 auto 4px; min-height: 24px; }
.reveal-line {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 17px; color: var(--bone); padding: 6px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08); animation: revealLineIn 0.4s ease both;
}
.reveal-line .reveal-pts { font-weight: 800; color: var(--green-hi); font-size: 19px; }
@keyframes revealLineIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.reveal-total-label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--bone-dim); margin-top: 12px; }
.reveal-total {
  font-family: "Shippori Mincho", Georgia, serif; font-size: 50px; font-weight: 900; line-height: 1.1;
  background: linear-gradient(180deg, #ffe39a, var(--amber) 55%, var(--amber-lo));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.5));
}
.reveal-total.done { animation: totalPop 0.45s ease; }
@keyframes totalPop { 0% { transform: scale(1); } 50% { transform: scale(1.16); } 100% { transform: scale(1); } }
.reveal-prompt { margin-top: 10px; font-size: 13px; color: var(--bone-dim); font-style: italic; min-height: 18px; }
.reveal-skip { position: fixed; bottom: 22px; right: 22px; font-size: 13px; padding: 9px 16px; }

/* T-Rex instant-win flash */
#shogun-flash {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255,236,180,0.95), rgba(240,160,48,0.5) 40%, transparent 75%);
  animation: trexFlash 1.1s ease-out forwards;
}
@keyframes trexFlash { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }

/* steal pulse */
#steal-pulse {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  box-shadow: inset 0 0 120px rgba(196,58,42,0.6);
  animation: stealPulse 0.7s ease-out forwards;
}
@keyframes stealPulse { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }

/* ---- Responsive (< 768px): single column ---------------------------------*/
@media (max-width: 768px) {
  body { grid-template-columns: 1fr; grid-template-areas: "top" "board" "log"; overflow: auto; height: auto; min-height: 100vh; }
  #table {
    grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto;
    grid-template-areas: "top top" "left right" "center center" "bottom bottom"; padding: 12px;
  }
  .seat-left, .seat-right { grid-area: auto; }
  #table { grid-template-areas: "top top" "center center" "bottom bottom"; }
  .seat-left, .seat-right { display: none; } /* fold side opponents into compact top row on mobile */
  :root { --card-w: 60px; --card-h: 90px; }
  .cat-shogun { --card-w: 66px; --card-h: 98px; }
  #log-panel { width: auto; max-height: 200px; }
  #log-panel:not(.log-open) { width: auto; height: 50px; }
}