/* Krafting Krowns — Solo MVP UI. Retro/pixelated look. NO image assets. */
:root {
  --bg: #14101d;
  --panel: #201830;
  --panel2: #2a2040;
  --ink: #ece3ff;
  --dim: #9c8fbf;
  --gold: #f2c94c;
  --krystal: #7ad7ff;
  --good: #6fdc8c;
  --bad: #ff6b6b;
  --edge: #4a3b6b;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Courier New', Courier, monospace;
  image-rendering: pixelated;
  height: 100%;
}

/* min-height (not fixed height) so that if a very small viewport truly can't fit
   the fit-to-viewport board at its minimum card size, the PAGE scrolls rather
   than clipping an interactive element. At 1920x937 it fits with NO scroll. */
#app { display: flex; flex-direction: column; min-height: 100vh; }

/* ---- TOP BAR: DECK + SEED (left) · KK LOGO (centre) · controls (right) ---- */
#topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 6px 14px;
  background: var(--panel);
  border-bottom: 3px solid var(--edge);
}
#metrics { display: flex; gap: 8px; flex: 1; }
.stat {
  background: var(--panel2); border: 2px solid var(--edge);
  padding: 5px 10px; font-size: 13px; letter-spacing: 1px; font-weight: bold;
}
/* The KK logo, centred at the top of the screen (moved off the crown). */
#topbar-logo {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
}
#topbar-logo img {
  height: 44px; width: auto; display: block; image-rendering: pixelated;
}
#controls { display: flex; gap: 8px; flex: 1; justify-content: flex-end; align-items: center; }

/* Day Stone (turn track) — now on the turn-info line beside the prompt, not in
   the top bar. Compact horizontal chip: label + pips in one row. */
#daystone-bar {
  flex: 0 0 auto;
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  border: 2px solid var(--gold); border-radius: 6px; padding: 5px 12px;
  background: rgba(242,201,76,0.10); box-shadow: 0 0 12px rgba(242,201,76,0.22);
  height: 44px;
}
#daystone-label { font-size: 11px; letter-spacing: 1px; color: var(--gold); font-weight: bold; white-space: nowrap; }
#daystone-pips { display: flex; gap: 5px; }
#daystone-pips span {
  width: 18px; height: 12px; border: 1px solid var(--gold); border-radius: 2px;
  background: rgba(242,201,76,0.08);
}
#daystone-pips span.on { background: var(--gold); border-color: var(--gold); }
#daystone-pips span.here { box-shadow: 0 0 6px var(--gold); border-width: 2px; }

/* NEW GAME seed prompt: seed entry moved OUT of the top bar and INTO the New Game
   flow. This field lives in the #newgame-overlay dialog. */
#newgame-box { max-width: 420px; text-align: center; }
#newgame-box h2 { margin: 0 0 10px; color: var(--gold); }
#newgame-box p { margin: 0 0 14px; font-size: 13px; line-height: 1.4; color: var(--ink); }
#newgame-seed {
  font-family: inherit; font-size: 14px; letter-spacing: 1px;
  background: var(--panel2); color: var(--ink);
  border: 2px solid var(--edge); padding: 8px 10px;
  width: 200px; text-transform: none; text-align: center;
}
#newgame-seed::placeholder { color: var(--ink); opacity: 0.45; text-transform: none; letter-spacing: 0; }
#newgame-seed:focus { outline: none; border-color: var(--gold); }
.newgame-row { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.newgame-go { background: var(--gold); color: #1a1206; border-color: var(--gold); font-weight: bold; }
.newgame-go:hover:not(:disabled) { background: #ffe27a; border-color: #ffe27a; }
/* The SEED stat is a copy affordance. */
#stat-seed { cursor: pointer; }
#stat-seed:hover { border-color: var(--gold); }

button {
  font-family: inherit; cursor: pointer;
  background: var(--panel2); color: var(--ink);
  border: 2px solid var(--edge);
  padding: 6px 10px; font-size: 12px; letter-spacing: 1px;
  text-transform: uppercase;
}
button:hover:not(:disabled) { background: var(--edge); }
button:disabled { opacity: 0.4; cursor: not-allowed; }
button.armed { background: var(--gold); color: #000; border-color: var(--gold); }

/* ---- Info / notification banner (persistent prompt + Day Stone) ----
   SWAP (change 1): the ACTIONS band (canvas, top) is now ABOVE this banner, so
   the banner is an OVERLAY inside #table-wrap, positioned directly BELOW the
   canvas Actions band (at --actions-band-h). The renderer reserves an info band
   of exactly this height between the Actions band and the middle row, so nothing
   overlaps. FIXED height so the top chrome is constant. */
#actionbar {
  position: absolute;
  top: var(--actions-band-h, 0px);
  left: 0; right: 0;
  background: var(--panel); border-bottom: 3px solid var(--edge);
  padding: 5px 10px; height: 54px;
  z-index: 5;
}
/* Turn-info line: prompt (fills width, CENTERED text) + Day Stone (hugs right). */
#infoline { display: flex; gap: 10px; align-items: stretch; }
#infoline #prompt { flex: 1; min-width: 0; }
/* Transient per-action controls, in the DICE column directly BELOW Available Dice
   (change 3). Absolutely positioned over the canvas at the dice-control geometry
   the renderer publishes (--dicectl-x / --dicectl-y / --dicectl-w). This is where
   the player selects their dice, so the roll control belongs there; the rolled
   results appear in the ROLLED DICE row to the RIGHT. Hidden when no control is
   live. High z so a button is always clickable over the canvas. */
#action-buttons {
  position: absolute;
  left: var(--dicectl-x, 12px);
  top: var(--dicectl-y, 0px);
  width: var(--dicectl-w, auto);
  gap: 6px; align-items: center; flex-wrap: wrap;
  z-index: 8; pointer-events: auto;
  display: none;
}
/* Shown only while a per-action control is live (JS toggles .active). Otherwise
   it occupies no space and catches no clicks — an idle board shows no strip. */
#action-buttons.active { display: flex; }
/* The tile-attached buttons read as a small control cluster hanging off the
   tile: gold border + dark fill, snug padding. */
#action-buttons button {
  background: var(--gold); color: #1a1206; border: 2px solid var(--gold);
  font-weight: bold; box-shadow: 0 2px 8px rgba(0,0,0,0.55);
  padding: 6px 12px;
}
#action-buttons button:hover:not(:disabled) { background: #ffe27a; border-color: #ffe27a; }

/* END ACTION EARLY — relocated INTO the Actions box. An absolutely-positioned
   HTML overlay pinned at the anchor the renderer publishes (--endaction-x /
   --endaction-y), which is just below the Actions header status line, left-aligned
   under the "ACTIONS" title. Only interactable while an action is in progress
   (JS toggles :disabled / display); disabled it stays visible but greyed so the
   control's home is discoverable. Styled to fit the Actions box (dark chip, amber
   edge) rather than the top-bar chrome. */
.endaction-inbox {
  position: absolute;
  left: var(--endaction-x, 12px);
  top: var(--endaction-y, 0px);
  z-index: 9; pointer-events: auto;
  background: #20180f; color: #ffb84d; border: 2px solid #c9791e;
  font-weight: bold; font-size: 11px; letter-spacing: 1px;
  padding: 5px 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.55);
}
.endaction-inbox:hover:not(:disabled) { background: #2c2012; border-color: #ffb84d; color: #ffd766; }
.endaction-inbox:disabled { opacity: 0.4; cursor: not-allowed; }
/* Persistent "what to do now" banner — made prominent so the required
   interaction is never buried. A left gold bar + subtle glow draws the eye. */
/* FIXED height (2 lines) so the top chrome never changes as prompt text
   varies — otherwise a longer mid-flow prompt grows the bar and pushes the
   canvas past the viewport (page scroll). Text is clamped to 2 lines. */
#prompt {
  padding: 6px 12px; font-size: 13px; line-height: 1.35;
  background: var(--panel2); border: 2px solid var(--gold); border-left-width: 6px;
  color: var(--ink); font-weight: bold;
  box-shadow: 0 0 0 1px rgba(242,201,76,0.15);
  height: 44px; overflow: hidden;
  /* Center the notification message text across the banner (change 2). */
  text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
#prompt::before { content: '▶ '; color: var(--gold); }
/* A short flash when the prompt changes, so the player notices the new ask. */
#prompt.flash { animation: promptflash 0.5s ease-out; }
@keyframes promptflash {
  0% { background: var(--gold); color: #000; }
  100% { background: var(--panel2); color: var(--ink); }
}
/* Rejection styling: red bar instead of gold. */
#prompt.reject { border-color: var(--bad); border-left-color: var(--bad); }
#prompt.reject::before { content: '⚠ '; color: var(--bad); }

/* ---- On-screen toasts: transient event feedback stacked top-right of the
   board, above everything but the modals. ---- */
/* Toasts float BOTTOM-RIGHT as a thin transient strip, pinned in the chrome gap
   just above the hand band and hugging the right edge — the board's far-right
   column is now the Krown (no Krafting art there), so a right-anchored strip
   never overlaps the Crafting faction squares (which moved to the centre-left in
   the board-matching reorder) nor any Gathering card. Transient (auto-fade),
   newest on top. */
#toast-host {
  position: fixed; right: 14px;
  bottom: calc(var(--hand-h, 210px) + 6px);
  z-index: 60;
  display: flex; flex-direction: column-reverse; gap: 5px; align-items: flex-end;
  pointer-events: none; max-width: 40vw;
}
.toast {
  background: var(--panel2); color: var(--ink);
  border: 2px solid var(--edge); border-left-width: 6px;
  padding: 8px 12px; font-size: 12px; letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  animation: toastin 0.22s ease-out;
  max-width: 340px;
}
.toast.out { animation: toastout 0.3s ease-in forwards; }
.toast.good  { border-left-color: var(--good);   color: var(--good); }
.toast.score { border-left-color: var(--gold);   color: var(--gold); font-weight: bold; }
.toast.info  { border-left-color: var(--krystal); color: var(--krystal); }
.toast.bad   { border-left-color: var(--bad);    color: var(--bad); }
@keyframes toastin  { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes toastout { from { opacity: 1; } to { opacity: 0; transform: translateX(20px); } }

/* ---- REDESIGN: the canvas draws all THREE bands (Actions / middle / dice); the
   HTML hand is OVERLAID on the RIGHT column of the bottom band, directly beside
   the (canvas-drawn) dice column — dice-left / hand-right, side by side. ---- */
#table-wrap { flex: 1; min-height: 0; position: relative; display: block; }
/* The canvas height is authoritative from JS (renderer.resize computes a
   fit-to-viewport height). It fills #table-wrap's width; its height is set in JS. */
#board { background: #0d0a15; display: block; width: 100%; }

/* Hand: the RIGHT column of the bottom band. Absolutely positioned OVER the
   canvas at the geometry the renderer publishes (--bottom-band-y / --hand-col-x
   / --hand-col-w / --bottom-band-h) so it sits right next to the dice column with
   no dead space. Cards are sized in JS to the SAME uniform width/height as the
   Gathering cards (native 5:7, never stretched), and scroll horizontally if many. */
#hand-quad {
  position: absolute;
  top: var(--bottom-band-y, 0px);
  left: var(--hand-col-x, 220px);
  width: var(--hand-col-w, 60%);
  height: var(--bottom-band-h, 200px);
  padding: 22px 8px 8px;
  display: flex; flex-direction: column;
  background: #0f1524; border: 3px solid var(--gold); z-index: 4;
}
.hand-label {
  position: absolute; top: 5px; left: 10px; z-index: 6;
  font-size: 12px; color: var(--gold); letter-spacing: 2px;
  display: flex; align-items: center; gap: 10px;
}
.hand-label .htitle { color: var(--gold); }
.hand-label .hint { color: var(--dim); font-size: 9px; letter-spacing: 0; }
/* Arrange-by-Faction / Arrange-by-Type sort buttons. */
.hand-btn {
  font-size: 10px; padding: 4px 10px; letter-spacing: 1px;
  background: var(--panel2); border: 1px solid var(--edge); color: var(--ink);
}
.hand-btn:hover { border-color: var(--gold); }
/* YOUR HAND fills all width right of the dice column. Cards are sized (in JS) so
   ~8–10 fit per row; a hand of >10 WRAPS to a 2nd row and the panel scrolls
   VERTICALLY to reach it. Left-aligned so new cards append predictably. Right
   padding leaves room for the bottom-right [eye][split] pair so icons never
   overlap a card. */
#hand {
  display: flex; flex-wrap: wrap; gap: 8px 8px; align-items: flex-start; align-content: flex-start;
  justify-content: flex-start;
  overflow-x: hidden; overflow-y: auto; flex: 1; pointer-events: auto;
  padding-right: 74px;
}

/* Cards are REAL images (IDENTICAL asset + IDENTICAL size to Gathering). The
   card box is set in JS (width/height); the image is drawn "contain" so it is
   never stretched. */
.card {
  position: relative; cursor: grab; border: 2px solid var(--edge);
  border-radius: 4px; background: #0d0a15; padding: 0; overflow: hidden;
  flex: 0 0 auto;
}
.card img {
  display: block; width: 100%; height: 100%;
  object-fit: contain; image-rendering: pixelated;
}
.card:hover { border-color: var(--gold); }
.card.playable { border-color: var(--good); }
.card.dragging { opacity: 0.4; }
.card.drop-before { border-left: 4px solid var(--gold); }
.card.drop-after { border-right: 4px solid var(--gold); }

/* ---- HAND CARD FLIP ANIMATIONS (purely visual) ----
   A hand card can be shown FACE-DOWN (the KRAFTING KROWNS back) and flipped
   face-up via a quick CSS 3D rotateY. Two triggers:
     - .facedown  : the opening hand is dealt face-down until START (flip #1).
     - .flip-in   : a freshly-drawn card lands face-down then flips up (flip #3).
   A flipped-in card holds face-down for ~1s (JS-driven) before the turn plays,
   so the arrival reads clearly. Both are non-blocking — the card is fully
   clickable throughout, and once the animation ends it is a normal card again. */
.card .card-face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #0d0a15;
}
.card .card-face img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.card .card-back {
  transform: rotateY(180deg);
  background: #241a15;
}
/* When flip UI is engaged the card becomes a 3D flip container. Default (no
   .facedown / no animation classes) renders exactly as before via the plain
   <img>, so nothing changes for a settled hand. */
.card.has-flip { perspective: 700px; }
.card.has-flip .card-inner {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
  transform: rotateY(0deg);
}
/* Face-down: the back faces the player (front is rotated away). */
.card.has-flip.facedown .card-inner { transform: rotateY(180deg); transition: none; }
/* Flip-in (draw): start face-down, then flip up to the front on the next frame. */
.card.has-flip.flip-in .card-inner { transform: rotateY(180deg); }
.card.has-flip.flip-in.flip-go .card-inner { transform: rotateY(0deg); }
/* A tiny scale "arrive" pop for a drawn card so it reads as entering the hand. */
@keyframes cardarrive { from { transform: scale(0.6); opacity: 0.2; } to { transform: none; opacity: 1; } }
.card.arrive { animation: cardarrive 0.32s ease-out; }

/* ---- START overlay: shown while the deal is face-down, prompting the player to
   flip the cards up and begin. Sits above the board/hand but below modals. ---- */
#start-overlay {
  position: fixed; inset: 0; z-index: 45;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8,5,16,0.55);
}
#start-overlay.hidden { display: none; }
#start-overlay .start-box {
  background: var(--panel); border: 3px solid var(--gold); border-radius: 10px;
  padding: 26px 34px; text-align: center; box-shadow: 0 0 30px rgba(242,201,76,0.35);
}
#start-overlay .start-title { color: var(--gold); font-size: 20px; letter-spacing: 2px; font-weight: bold; margin-bottom: 6px; }
#start-overlay .start-sub { color: var(--dim); font-size: 12px; margin-bottom: 16px; }
#btn-start {
  font-size: 15px; letter-spacing: 2px; font-weight: bold;
  padding: 12px 30px; background: var(--gold); color: #1a1206; border: 2px solid var(--gold);
  border-radius: 6px;
}
#btn-start:hover { background: #ffe27a; }

/* Reduced-motion: keep the feature (flip UI still swaps back->front) but make it
   instant so no one who opts out has to wait on transitions. */
@media (prefers-reduced-motion: reduce) {
  .card.has-flip .card-inner { transition: none !important; }
  .card.arrive { animation: none !important; }
}

/* ---- CARD ZOOM: small icon triggers + full-screen read-only overlays ----
   The icons are tiny additions; they must NOT disturb the B3 board/hand layout.
   The Gathering eye + split glyph float over #table-wrap (the board is a canvas,
   so an HTML icon is overlaid at its corner). The Hand eye is inline in the
   hand-label row (the Hand panel's natural corner). */
#table-wrap { position: relative; }
.zoom-icon {
  font-size: 15px; line-height: 1; padding: 4px 7px;
  background: var(--panel2); color: var(--gold);
  border: 2px solid var(--edge); border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.zoom-icon:hover:not(:disabled) { border-color: var(--gold); background: var(--edge); }
/* BOTH [eye][split] pairs live in the BOTTOM-RIGHT corner of their panel
   (consistent placement — change 4). The Gathering pair floats over #table-wrap
   at the Gathering panel's bottom-right; the renderer publishes that panel's
   right edge (--gath-right) and bottom (--gath-bottom) so the pair hugs the
   corner and never overlaps card content. */
.zoom-tools {
  position: absolute;
  left: calc(var(--gath-right, 30%) - 74px);
  top: calc(var(--gath-bottom, 60%) - 32px);
  z-index: 12; display: flex; gap: 6px;
}
/* The Hand pair is pinned to the Hand panel's own bottom-right corner (the
   #hand-quad is position:relative). */
.zoom-tools-hand {
  position: absolute; left: auto; top: auto;
  right: 8px; bottom: 8px;
  z-index: 6;
}
/* The split (⧉) button reads slightly cyan to distinguish it from the eye. */
.zoom-split-btn { color: var(--krystal); }

/* Full-screen read-only zoom overlay. Uses the shared .overlay base (fixed,
   dark scrim, centred) but stretches its body to fill the viewport so cards get
   the maximum possible size. Sits BELOW the modal/help overlays (z-index 50) so
   a card-effect modal is never covered. */
/* Solid (near-opaque) dark backdrop so the live board never bleeds through and
   distracts from reading the enlarged cards. */
.overlay.zoomview { z-index: 48; padding: 0; background: #0b0812; }
.zoomview-close {
  position: fixed; top: 14px; right: 18px; z-index: 2;
  font-size: 26px; line-height: 1; padding: 2px 14px;
  background: var(--panel2); color: var(--gold); border: 2px solid var(--gold);
  border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
.zoomview-close:hover { background: var(--gold); color: #000; }
.zoomview-body {
  width: 100vw; height: 100vh; padding: 46px 22px 22px;
  display: flex; flex-direction: column; gap: 14px;
}
/* A titled section (used for a single view and for each half of the split). */
.zoomview-section { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.zoomview-title {
  color: var(--gold); font-size: 13px; letter-spacing: 2px; font-weight: bold;
  text-align: center; margin-bottom: 8px; flex: 0 0 auto;
}
/* Card grid. Cards are sized in JS (--card-w / --card-h) to the LARGEST native
   5:7 card that fits `cols` across and the needed rows down within the viewport,
   so the space is FILLED — no small cards floating in a void. Modest, consistent
   gutters; the whole grid is centred. */
.zoomview-grid {
  flex: 1; min-height: 0;
  display: grid; gap: var(--gutter, 16px);
  grid-template-columns: repeat(var(--cols, 3), var(--card-w, 200px));
  grid-auto-rows: var(--card-h, 280px);
  align-content: center; justify-content: center;
}
.zoomview-card {
  flex: 0 0 auto;
  width: var(--card-w, 200px); height: var(--card-h, 280px);
  display: flex; align-items: center; justify-content: center;
}
.zoomview-card img {
  width: 100%; height: 100%;
  object-fit: contain; image-rendering: pixelated;
  border: 2px solid var(--edge); border-radius: 6px; background: #0d0a15;
}
/* Split view: two halves side by side, each with its own title + grid. */
.zoomview-split { flex-direction: row; gap: 22px; }
.zoomview-split .zoomview-section { flex: 1 1 50%; min-width: 0; }
.zoomview-split .zoomview-section + .zoomview-section {
  border-left: 2px solid var(--edge); padding-left: 22px;
}

/* ---- Log drawer (slides in from the right when toggled) ---- */
.panel-title {
  font-size: 11px; color: var(--gold); letter-spacing: 2px;
  padding: 6px 10px; border-bottom: 1px solid var(--edge);
  display: flex; justify-content: space-between; align-items: center;
}
#log-drawer {
  position: fixed; top: 0; right: 0; width: 320px; max-width: 90vw; height: 100vh;
  background: var(--panel); border-left: 3px solid var(--edge);
  display: flex; flex-direction: column; z-index: 40; box-shadow: -6px 0 16px rgba(0,0,0,0.5);
}
#log-drawer.hidden { display: none; }
#btn-closelog { padding: 0 8px; font-size: 16px; line-height: 1; }
#log { flex: 1; overflow-y: auto; padding: 6px 10px; font-size: 10px; color: var(--dim); line-height: 1.5; }
#log .entry { border-bottom: 1px solid #1d1730; padding: 2px 0; }
#log .blocked { color: var(--bad); }
#log .good { color: var(--good); }

.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.8);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.overlay.hidden { display: none; }
.overlay-box {
  background: var(--panel); border: 3px solid var(--gold);
  padding: 20px; max-width: 640px; max-height: 85vh; overflow-y: auto;
  font-size: 13px; line-height: 1.5;
}
.overlay-box h2 { color: var(--gold); margin-top: 0; }
.overlay-box ul { padding-left: 18px; }
.overlay-box b { color: var(--krystal); }
/* How-to-Play: the strategy section. Slightly wider so the guide reads well; the
   box already scrolls (max-height 85vh, overflow-y auto). */
#help-box { max-width: 720px; }
#help-box h2 { margin-top: 4px; }
#help-box h3 { color: var(--good); font-size: 14px; margin: 16px 0 4px; letter-spacing: 0.5px; }
#help-box ol { padding-left: 20px; margin: 6px 0; }
#help-box ol li, #help-box ul li { margin-bottom: 5px; }
#help-box .help-sep { border: none; border-top: 2px solid var(--edge); margin: 20px 0 12px; }
#help-box .help-flourish { color: var(--dim); margin-top: 14px; }

#modal-content .m-title { color: var(--gold); font-size: 15px; margin-bottom: 10px; }
#modal-content .m-opts { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
#modal-content .m-opt { text-align: left; }
#modal-content .m-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }

/* On narrow windows just tighten the top-bar chrome. The board geometry (incl.
   the absolutely-positioned hand overlay) is fully JS-driven from renderer.resize,
   so we must NOT override #board / #hand-quad sizing here. */
@media (max-width: 820px) {
  #topbar { gap: 8px; }
  #topbar h1 { font-size: 16px; }
}

/* Die-image pickers in card modals (click a die instead of a dropdown) */
.die-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; }
.die-pick { display: inline-flex; flex-direction: column; align-items: center;
  background: transparent; border: 2px solid transparent; border-radius: 8px;
  padding: 3px; cursor: pointer; }
.die-pick:hover { border-color: #5a5240; }
.die-pick.sel { border-color: #f2c94c; box-shadow: 0 0 0 2px rgba(242,201,76,0.4); }
.die-pick img { display: block; width: 46px; height: 46px; image-rendering: pixelated; }
.die-cap { font-size: 9px; color: #9a927e; margin-top: 2px; text-transform: uppercase; letter-spacing: .03em; }
.die-none { color: #8a7fae; font-style: italic; font-size: 13px; }
.die-skip { background: #14141f; border: 1px solid #33334d; color: #a6a6b8;
  border-radius: 8px; padding: 6px 12px; cursor: pointer; }
.die-skip:hover { color: #f4f4f8; }

/* ---- Multiplayer: left player rail + setup overlay ---- */
#app { }
/* ============================================================
   MP PLAYERS rail — full-width vertical flow (redesign).
   Widened to 232px so the 9 Krown slots fit in ONE row at a readable size and
   the card-back thumbnails + full-width dragon block breathe. Every element
   spans the column top→bottom. All selectors are .mp-* (MP-only); SOLO is
   unaffected (it has no #mp-rail and never emits these classes).
   Gaps are tuned so a full 4-player table (all dragon-armed + a big hand) does
   NOT scroll at 1920×937.
   ============================================================ */
#mp-rail { position: fixed; left: 0; top: 0; bottom: 0; width: 232px; z-index: 30;
  background: #140f1e; border-right: 1px solid #2c2740; padding: 6px 9px 8px;
  overflow-y: auto; font-family: inherit; }
.mp-rail-title { color: #f2c94c; font-size: 10px; letter-spacing: .08em; margin: 2px 2px 6px; }

.mp-player { background: #1c1730; border: 1px solid #2c2740; border-radius: 10px;
  padding: 7px 9px 8px; margin-bottom: 7px; }
.mp-player.current { border-color: #f2c94c; box-shadow: 0 0 0 1px rgba(242,201,76,.4); }
.mp-player.you { background: #16213a; }

/* 1) Top row — small avatar + name side by side. */
.mp-head { display: flex; align-items: center; gap: 7px; }
.mp-turn { color: #f2c94c; font-weight: 700; font-size: 13px; width: 10px; text-align: center; flex: 0 0 auto; }
.mp-av { font-size: 19px; line-height: 1; flex: 0 0 auto; }
.mp-name { color: #f4efe4; font-size: 12px; font-weight: 700; line-height: 1.1;
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mp-sec-lbl { color: #8a7fb0; font-size: 8px; letter-spacing: .1em; font-weight: 700; margin: 6px 0 3px; }

/* 2) Krown row — 9 dice-shaped slots in ONE row (no wrap). Filled = the player's
   coloured real d8 (owner palette); empty = a faint diamond outline. */
.mp-krown { display: flex; gap: 3px; }
.mp-slot { width: 18px; height: 18px; flex: 0 0 auto; display: block; }
.mp-slot img { width: 18px; height: 18px; display: block; }
.mp-slot-empty { position: relative; }
.mp-slot-empty::before { content: ''; position: absolute; left: 3px; top: 3px; width: 12px; height: 12px;
  background: rgba(10,8,16,0.25); border: 1px solid rgba(160,150,190,0.45); transform: rotate(45deg); }

/* 3) Hand row — card-back thumbnails, one per card, wrapping full width. */
.mp-hand { display: flex; flex-wrap: wrap; gap: 3px; align-items: flex-start; }
.mp-cardback { width: 15px; height: 21px; border-radius: 2px; display: block;
  border: 1px solid #000; box-shadow: 0 1px 1px rgba(0,0,0,.4); }
.mp-hand-more { color: #c9b8f5; font-size: 10px; font-weight: 700; align-self: center;
  background: #2a2140; border: 1px solid #4a3d6f; border-radius: 4px; padding: 1px 5px; }
.mp-hand-empty { color: #6a6088; font-size: 11px; }

/* 4) Dragon block — full width; only rendered when the seat HAS a dragon.
   Colours match the setup screen (blessing #58c274 / curse #e05c5c). */
.mp-dragon { margin-top: 7px; padding-top: 6px; border-top: 1px solid #2c2740; }
.mp-dragon-lbl { color: #8a7fb0; font-size: 8px; letter-spacing: .12em; font-weight: 700; }
.mp-dragon-name { color: #ffcf5a; font-size: 11px; font-weight: 700; margin: 2px 0 3px; line-height: 1.15; }
.mp-bc { display: flex; gap: 5px; font-size: 9.5px; line-height: 1.22; margin-top: 2px; overflow-wrap: anywhere; }
.mp-bc-mk { flex: 0 0 auto; font-weight: 800; }
.mp-bl { color: #b6f0c6; } .mp-bl .mp-bc-mk { color: #58c274; }
.mp-cu { color: #f5c0c0; } .mp-cu .mp-bc-mk { color: #e05c5c; }

/* Nudge the game board right of the rail (MP ONLY — Solo has no rail). */
body.mp #app { padding-left: 232px; box-sizing: border-box; }

/* ============================================================
   NEW-GAME SETUP (approved 2-column roster). Fits 1920×937 with no inner
   scroll for a full 4-player table; falls back to scroll only if it ever
   overflows a short viewport.
   ============================================================ */
#mp-setup { display: flex; align-items: flex-start; justify-content: center; background: rgba(10,8,16,.94);
  z-index: 60; overflow: auto; padding: 20px 0; }
#mp-setup.hidden { display: none; }
.mp-setup-box { background: #14101f; border: 1px solid #3a2d57; border-radius: 16px;
  padding: 20px 26px 22px; width: 860px; max-width: 94vw; box-sizing: border-box; }
.mp-setup-head { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 4px; }
.mp-setup-logo { height: 46px; width: auto; }
.mp-setup-titles { text-align: left; }
.mp-setup-box h1 { color: #f2c94c; margin: 0; font-size: 1.4rem; }
.mp-setup-box .muted { color: #9a8ec2; margin: 2px 0 0; font-size: .9rem; }
.mp-section-label { color: #8a7fb0; font-size: .7rem; letter-spacing: .12em; font-weight: 700;
  margin: 14px 0 7px; border-bottom: 1px solid #241d38; padding-bottom: 5px; }
.mp-section-hint { color: #6a608c; font-weight: 400; letter-spacing: 0; }

.mp-seed-wrap { display: flex; align-items: center; gap: 10px; background: #0f0b18;
  border: 1px solid #34294f; border-radius: 10px; padding: 0 14px; }
.mp-seed-die { font-size: 1.1rem; }
#mp-seed { flex: 1; background: transparent; border: 0; color: #f4f4f8; padding: 12px 0; font-size: .95rem; outline: none; }
#mp-seed::placeholder { color: #6a608c; }
.mp-seed-tag { color: #6a608c; font-size: .78rem; }

/* Roster = 2-column grid (2×2 for 4 players); a dragon-armed card can span both
   columns so its inline blessing/curse table has room. */
.mp-roster { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mp-seat { background: #0f0b18; border: 1px solid #2c2444; border-radius: 12px; padding: 12px 14px; }
.mp-seat.mp-seat-you { border-color: #3a4d7a; box-shadow: inset 0 0 0 1px rgba(90,130,210,.18); }
.mp-seat.armed { border-color: #f2c94c; grid-column: 1 / -1; }   /* full-width when a table shows */
.mp-seat-top { display: flex; align-items: flex-start; gap: 12px; }
.mp-seat-av { font-size: 1.8rem; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: #17122a; border: 1px solid #34294f; border-radius: 10px; flex: 0 0 auto; }
.mp-seat-you .mp-seat-av { border-color: #3a4d7a; }
.mp-seat-id { flex: 1; min-width: 0; }
.mp-seat-name { color: #f4f0ff; font-weight: 700; font-size: 1.02rem; }
.mp-seat-sub { color: #8a7fb0; font-size: .78rem; margin-top: 2px; }
.mp-tag { font-size: .62rem; font-weight: 700; letter-spacing: .05em; border-radius: 5px; padding: 2px 6px; vertical-align: middle; }
.mp-tag-host { background: #1b2b4a; color: #9dc0ff; border: 1px solid #33507f; }
.mp-tag-ai { background: #2a2140; color: #c9b8f5; border: 1px solid #4a3d6f; }
.mp-seat-ctrls { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.mp-diff { display: inline-flex; border: 1px solid #4a3d6f; border-radius: 8px; overflow: hidden; }
.mp-diff-btn { background: #14101f; color: #9a8ec2; border: 0; padding: 7px 11px; font-size: .72rem;
  font-weight: 700; letter-spacing: .04em; cursor: pointer; }
.mp-diff-btn.on { background: #6b4bd6; color: #fff; }
.mp-diff-btn.on[data-diff="expert"] { background: #d4a017; color: #1a1205; }
.mp-reroll, .mp-remove { background: #17122a; border: 1px solid #4a3d6f; color: #d8cdf5; border-radius: 8px;
  width: 32px; height: 32px; cursor: pointer; font-size: .9rem; }
.mp-reroll:hover { border-color: #f2c94c; }
.mp-remove { background: #3a1a24; border-color: #6f333f; color: #f5a3a3; }
.mp-remove:hover { background: #52222f; }

.mp-arm { display: flex; align-items: center; gap: 8px; color: #d8cdf5; font-size: .86rem;
  margin-top: 11px; cursor: pointer; }
.mp-arm input { width: 16px; height: 16px; accent-color: #f2c94c; cursor: pointer; }
.mp-dragon-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.mp-seat:not(.armed) .mp-dragon-chips { display: none; }
.mp-dragon-chip { background: #14101f; border: 1px solid #4a3d6f; color: #e6ddf7; border-radius: 8px;
  padding: 8px 12px; font-size: .82rem; cursor: pointer; }
.mp-dragon-chip:hover { border-color: #f2c94c; }
.mp-dragon-chip.on { background: #2a2110; border-color: #f2c94c; color: #ffe08a; font-weight: 700; }
.mp-dragon-table { margin-top: 11px; border: 1px solid #34294f; border-radius: 10px; overflow: hidden; }
.mp-dragon-tt { color: #ffcf5a; font-size: .7rem; font-weight: 700; letter-spacing: .08em; padding: 8px 12px; background: #17122a; }
.mp-bc-row { display: flex; align-items: stretch; border-top: 1px solid #241d38; }
.mp-bc-tag { flex: 0 0 96px; font-size: .64rem; font-weight: 700; letter-spacing: .06em; color: #0d1a10;
  display: flex; align-items: center; padding: 0 10px; }
.mp-bless .mp-bc-tag { background: #58c274; }
.mp-curse .mp-bc-tag { background: #e05c5c; color: #240b0b; }
.mp-bc-txt { flex: 1; color: #e6ddf7; font-size: .84rem; padding: 9px 12px; background: #0f0b18; }
.mp-bless .mp-bc-txt { color: #b6f0c6; }
.mp-curse .mp-bc-txt { color: #f5c0c0; }

.mp-add-ai { width: 100%; margin-top: 12px; background: transparent; border: 1px dashed #4a3d6f;
  color: #d8cdf5; border-radius: 12px; padding: 14px; font-size: .95rem; font-weight: 600; cursor: pointer; }
.mp-add-ai:hover:not(.disabled) { border-color: #f2c94c; color: #ffe08a; }
.mp-add-ai.disabled { opacity: .4; cursor: default; }
.mp-add-plus { color: #f2c94c; font-weight: 800; margin-right: 4px; }

.mp-crossgame { background: #0f0b18; border: 1px solid #34294f; border-radius: 10px; padding: 12px 14px; }
.mp-amulet-emoji { margin: 0 2px; }
.mp-setup-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
.mp-table-count { color: #9a8ec2; font-size: .9rem; }
.mp-table-count b { color: #f4f0ff; }
#mp-start { background: linear-gradient(180deg,#f7d968,#e0a913); color: #1a1205; border: 0; border-radius: 12px;
  font-weight: 800; padding: 15px 32px; cursor: pointer; font-size: 1.05rem; box-shadow: 0 6px 18px rgba(224,169,19,.3); }
#mp-start:hover { filter: brightness(1.06); }

.log-copied { color: #7be3a3; font-size: .8rem; padding: 4px 12px; }
.log-copied.hidden { display: none; }
#btn-copylog { font-size: .72rem; }

/* ---- Portable amulet tokens (MP): top-right chips + setup code field ---- */
#mp-tokens { position: fixed; top: 64px; right: 14px; z-index: 25; height: 94px; display: flex;
  align-items: stretch; gap: 6px; background: rgba(20,15,30,.92); border: 1px solid #3a2d57;
  border-radius: 10px; padding: 6px 10px; }
.mp-tok-title { color: #f2c94c; font-size: 9px; letter-spacing: .06em; line-height: 1.2; text-align: right; align-self: center; }
.mp-tok-title span { color: #9a8ec2; font-size: 8px; }
.mp-tok { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  height: 100%; min-width: 56px; background: #1c1730; border: 2px solid #5b4a86; border-radius: 8px;
  padding: 4px 8px; cursor: pointer; }
.mp-tok:hover:not([disabled]) { border-color: #f2c94c; }
.mp-tok[disabled] { opacity: .5; cursor: default; }
.mp-tok.armed { background: #3a2d10; border-color: #f2c94c; box-shadow: 0 0 0 2px rgba(242,201,76,.45); }
.mp-tok.armed .mp-tok-label { color: #ffd970; font-weight: 700; }
.mp-tok-icons { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; justify-content: center; max-width: 72px; }
.mp-tok-act { width: 30px; height: 30px; display: block; }
.mp-tok-label { font-size: 9px; color: #cbbfe6; text-align: center; line-height: 1.05; }
.mp-check { display: block; margin: 8px 0 4px; color: #e6ddc8; font-size: .9rem; cursor: pointer; }
#mp-code { width: 90%; background: #14141f; border: 1px solid #3a2d57; color: #f4f4f8; border-radius: 8px;
  padding: 8px 10px; margin-bottom: 6px; text-align: center; font-family: monospace; }
.mp-code-msg { min-height: 16px; font-size: .82rem; margin-bottom: 8px; }
.mp-code-msg.ok { color: #7be3a3; } .mp-code-msg.bad { color: #f5a3a3; }

/* Multiplayer password gate removed 2026-07-14 — KK-MP is now open (no lock). */

/* ============================================================================
   FEATURE B — Turn modal (shown before EVERY player's turn).
   Centered card with the player's avatar, name, their CROWN (with scored Power
   Krystals on it), cards-in-hand count and score, plus Play/Continue.
   ============================================================================ */
#turn-overlay { display: flex; align-items: center; justify-content: center;
  background: rgba(8,6,14,.82); z-index: 70; }
#turn-overlay.hidden { display: none; }
.turn-box {
  background: linear-gradient(180deg, #211a34, #171123);
  border: 1px solid #3a2d57; border-radius: 18px;
  padding: 26px 30px 24px; text-align: center; width: 380px; max-width: 90vw;
  box-shadow: 0 18px 60px rgba(0,0,0,.6);
  animation: turn-pop .28s cubic-bezier(.2,.9,.25,1);
}
@keyframes turn-pop { 0% { opacity: 0; transform: scale(.9) translateY(8px); } 100% { opacity: 1; transform: none; } }
.turn-av { font-size: 46px; line-height: 1; }
.turn-name { color: #f4efe4; font-size: 1.25rem; font-weight: 800; margin: 6px 0 2px; letter-spacing: .02em; }
.turn-kind { color: #9a8ec2; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
/* The crown + its 9 gem sockets. Gems are absolutely positioned by fraction. */
.turn-crown-wrap { position: relative; width: 240px; max-width: 74vw; margin: 0 auto 6px; aspect-ratio: 16 / 11; }
.turn-crown-wrap img.turn-crown { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; display: block; }
.turn-gem { position: absolute; width: 13%; aspect-ratio: 1; transform: translate(-50%, -50%);
  image-rendering: pixelated; }
.turn-gem.empty { border: 1px solid rgba(122,215,255,.28); border-radius: 3px;
  transform: translate(-50%, -50%) rotate(45deg); width: 7%; }
.turn-crown-name { color: #8a7fae; font-size: .66rem; letter-spacing: .06em; margin-top: 2px; }
.turn-stats { display: flex; justify-content: center; gap: 22px; margin: 14px 0 4px; }
.turn-stat { color: #d7cdf0; font-size: .95rem; }
.turn-stat b { color: #f2c94c; font-size: 1.15rem; }
.turn-stat .turn-stat-lbl { display: block; color: #9a8ec2; font-size: .64rem; letter-spacing: .06em;
  text-transform: uppercase; margin-top: 2px; }
.turn-lead { color: #c9bfe6; font-size: .92rem; margin: 14px 0 18px; }
#turn-go { background: #f2c94c; color: #1a1205; border: 0; border-radius: 11px; font-weight: 800;
  padding: 13px 40px; cursor: pointer; font-size: 1.05rem; letter-spacing: .04em; }
#turn-go:hover { filter: brightness(1.07); }
#turn-go.ai { background: linear-gradient(180deg, #7c6bd6, #5b4bb0); color: #fff; }

/* START card — big auto 3-2-1 countdown ring above the "Start now" skip button. */
.turn-count { display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin: 8px 0 14px; }
.turn-count-num { font-size: 2.6rem; font-weight: 900; color: #f2c94c; line-height: 1;
  text-shadow: 0 3px 14px rgba(242,201,76,.5); animation: turn-count-tick .5s ease-out; }
@keyframes turn-count-tick { 0% { transform: scale(1.35); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }
.turn-count-lbl { color: #9a8ec2; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
#turn-go.skip { background: transparent; color: #d7cdf0; border: 1px solid #4a3d6c;
  font-size: .92rem; padding: 10px 28px; }
#turn-go.skip:hover { background: rgba(124,107,214,.18); filter: none; }

/* END-of-turn RECAP card — "{Player} did:" + the concise move list. Manual
   Continue only (no auto-dismiss). Reuses the same centered .turn-box shell. */
.turn-recap-title { color: #f4efe4; font-size: 1.05rem; font-weight: 800; margin: 8px 0 10px; }
.turn-recap-list { list-style: none; margin: 0 0 16px; padding: 0; text-align: left;
  max-width: 320px; margin-inline: auto; }
.turn-recap-list li { color: #d7cdf0; font-size: .9rem; line-height: 1.45; padding: 4px 0 4px 22px;
  position: relative; }
.turn-recap-list li::before { content: '◆'; position: absolute; left: 4px; top: 4px;
  color: #7ad7ff; font-size: .7rem; }
.turn-recap-list li.good { color: #f2c94c; }
.turn-recap-list li.good::before { content: '★'; color: #f2c94c; }
.turn-recap-list li.none { color: #9a8ec2; font-style: italic; }
.turn-recap-list li.none::before { content: ''; }

/* ============================================================================
   FEATURE C — Hidden log (right sidebar) with 👁 eye + spoiler warning.
   ============================================================================ */
#log-eye {
  position: fixed; right: 14px; bottom: 14px; z-index: 38;
  display: flex; align-items: center; gap: 6px;
  background: rgba(20,15,30,.92); border: 1px solid #3a2d57; color: #b6add0;
  border-radius: 20px; padding: 8px 14px; cursor: pointer; font-family: inherit;
  font-size: 11px; letter-spacing: .08em;
}
#log-eye:hover { border-color: #f2c94c; color: #f4efe4; }
#log-eye.hidden { display: none; }
.log-eye-icon { font-size: 15px; }
.log-eye-label { font-weight: 700; }
/* When the log is revealed, dock the drawer's own close handling; the eye hides. */
.log-warn-lead { color: #ff9d5c; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  font-size: .8rem; margin: 4px 0 10px; }
.log-warn-row { display: flex; gap: 12px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
#log-warn-box { max-width: 460px; text-align: center; }
#log-keep-hidden { background: #2a2140; color: #e6ddc8; border: 1px solid #3a2d57;
  border-radius: 10px; padding: 11px 20px; cursor: pointer; font-weight: 700; }
#log-keep-hidden:hover { border-color: #6fdc8c; }
.log-warn-danger { background: #3a2130; color: #ff9d9d; border: 1px solid #5a2d3a;
  border-radius: 10px; padding: 11px 20px; cursor: pointer; font-weight: 700; }
.log-warn-danger:hover { filter: brightness(1.1); }
#log .entry.blocked { color: var(--bad); }
#log .entry.good { color: var(--good); }

/* action icons in the How-to rules list */
.act-ico{width:22px;height:22px;vertical-align:-6px;margin-right:8px;image-rendering:auto;}

/* ===== End-of-game screen + share ===== */
#end-overlay .end-box{max-width:460px;width:92%;max-height:92vh;overflow-y:auto;text-align:center;}
#end-overlay.end-box, .end-box{padding:22px 24px;}
.end-box .brand-logo{width:150px;max-width:60%;height:auto;display:block;margin:0 auto 6px;}
.end-crown{font-size:46px;line-height:1;margin:2px 0;}
#end-title{color:var(--gold,#e8a33d);margin:4px 0 6px;font-size:26px;}
.end-sub{color:#c9bce0;margin:0 0 10px;font-size:14px;line-height:1.45;}
.end-sub b{color:var(--krystal,#ffcf7a);}
.end-rating{color:#ffcf7a;font-weight:700;font-size:13px;margin-bottom:14px;}
.sboard{display:flex;gap:10px;justify-content:center;margin:0 0 8px;}
.scell{flex:1;max-width:150px;background:rgba(255,255,255,.04);border:1px solid rgba(232,163,61,.25);border-radius:12px;padding:10px 8px;}
.scell.hero{border-color:rgba(232,163,61,.6);}
.scell .sv{font-size:34px;font-weight:800;color:#f2ecf6;}
.scell .smax{font-size:16px;color:#a596b5;}
.scell .sl{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#a596b5;margin-top:2px;}
.end-seed{font-size:11px;letter-spacing:.1em;color:#8f83a8;margin:6px 0 4px;}
#end-share-wrap{margin-top:14px;padding-top:14px;border-top:1px solid rgba(232,163,61,.2);}
#end-share-wrap .share-label{font-size:10px;color:#a596b5;letter-spacing:.08em;text-transform:uppercase;margin:14px 0 8px;text-align:center;}
.share-card{width:100%;max-width:220px;display:block;margin:0 auto 12px;border-radius:14px;border:1px solid rgba(232,163,61,.3);background:#000;}
.end-btn{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:12px;border-radius:11px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#f2ecf6;margin:0 auto 8px;}
.end-btn.primary{background:var(--gold,#e8a33d);border-color:var(--gold2,#c9862a);color:#160c05;}
.end-btn.share{background:linear-gradient(180deg,#ffd36b,#e8a33d);border-color:#c9862a;color:#160c05;}
.end-btn:hover{filter:brightness(1.06);}
#end-share-wrap textarea.cap{width:100%;box-sizing:border-box;display:block;min-height:80px;resize:vertical;background:rgba(255,255,255,.05);color:#f2ecf6;border:1px solid rgba(232,163,61,.3);border-radius:12px;padding:11px;font:inherit;font-size:14px;line-height:1.45;}
.share-row{display:flex;gap:8px;justify-content:center;}
.share-btn{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;padding:9px 4px;border-radius:10px;cursor:pointer;border:1px solid rgba(232,163,61,.3);background:rgba(255,255,255,.05);color:#d8c8ee;font:inherit;font-size:10px;font-weight:700;}
.share-btn .si{font-size:19px;line-height:1;}
.share-btn:hover{border-color:var(--gold,#e8a33d);}
.end-actions{display:flex;flex-direction:column;gap:9px;margin-top:14px;}
.brand-link{display:block;margin-top:14px;font-size:11px;font-weight:700;color:var(--gold2,#c9862a);text-decoration:none;}
.end-box.lose #end-title{color:#c9bce0;}