:root {
  color-scheme: dark;
  --ivory: #f8f3e7;
  --ink: #141713;
  --wood-light: #ad7847;
  --wood-mid: #7b4929;
  --wood-dark: #482617;
  --rail: #29140c;
  --table-grain-angle: 0deg;
  --active: #42ff79;
  --pass: #ff5656;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #1d0f09;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-tap-highlight-color: transparent;
}

body {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

button,
select {
  border: 0;
  border-radius: 10px;
  padding: 8px 11px;
  font: inherit;
  font-weight: 750;
}

button { cursor: pointer; }

.app-header {
  position: relative;
  z-index: 20;
  height: 54px;
  padding: 6px 10px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: linear-gradient(#3a2114, #21120b);
  box-shadow: 0 2px 10px #0008;
}

.app-header > button:first-child { justify-self: start; }
.menu-button { justify-self: end; min-width: 42px; font-size: 19px; }
.title-wrap { text-align: center; line-height: 1.02; }
.title-wrap strong { display: block; font-size: 14px; letter-spacing: .07em; }
.title-wrap small { display: block; margin-top: 3px; font-size: 10px; font-weight: 650; opacity: .78; }
#status.key-result { color: #ffe36f; opacity: 1; text-shadow: 0 0 7px #ffb300b8; }

#table {
  position: relative;
  height: calc(100% - 54px);
  overflow: hidden;
  background:
    linear-gradient(var(--table-grain-angle), transparent 0 13%, #3f1e101f 13.4% 13.7%, transparent 14.1% 47%, #f7d6a014 47.3% 47.6%, transparent 48% 78%, #3f1e101a 78.4% 78.7%, transparent 79%),
    radial-gradient(ellipse at 50% 42%, var(--wood-light) 0, var(--wood-mid) 56%, var(--wood-dark) 100%);
  border: 7px solid var(--rail);
  box-shadow: inset 0 0 48px #160904b8, inset 0 0 2px #f2c58480, 0 0 0 2px #130803;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

#table .player,
#table #chain,
#table #dropTargets,
#table #hand,
#table .domino,
#table .drop-target {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.scoreboard {
  position: absolute;
  top: 4px;
  left: 50%;
  z-index: 8;
  transform: translateX(-50%);
  display: flex;
  gap: 13px;
  padding: 3px 8px;
  border: 1px solid #ffffff1f;
  border-radius: 10px;
  background: #24120dd9;
  box-shadow: 0 2px 7px #0006;
  font-size: 12px;
  white-space: nowrap;
}

.scoreboard b { color: #ffe3a0; font-size: 15px; }
.scoreboard.cutthroat { gap: clamp(4px, 1.3vw, 10px); font-size: clamp(8px, 2.2vw, 11px); }
.scoreboard.cutthroat b { font-size: clamp(11px, 2.8vw, 14px); }

.player {
  position: absolute;
  z-index: 9;
  min-height: 30px;
  padding: 5px 10px;
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  border: 2px solid #f4f4f4;
  border-radius: 16px;
  background: #24130de8;
  color: #fff;
  box-shadow: 0 2px 8px #0009;
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
  transition: border-color .18s, color .18s, box-shadow .18s;
}

.player:not(.bottom) {
  min-height: 39px;
  padding: 7px 13px;
  gap: 9px;
  border-radius: 21px;
  font-size: 15px;
}

.hidden-hand {
  display: flex;
  gap: 2px;
  align-items: center;
  min-height: 18px;
}

.player:not(.bottom) .hidden-hand { gap: 3px; min-height: 23px; }
.player.left .hidden-hand,
.player.right .hidden-hand {
  inline-size: 116px;
  flex: 0 0 116px;
  justify-content: center;
}

.domino-back {
  width: 13px;
  height: 23px;
  flex: 0 0 auto;
  border: 1px solid #2d302b;
  border-radius: 4px;
  background: #fffdf8;
  box-shadow: 0 1px 3px #000b, inset 0 0 0 1px #fff;
}

.hidden-hand.revealed {
  gap: var(--revealed-gap, 2px);
  min-height: 36px;
  inline-size: var(--revealed-hand-width, auto);
  flex: 0 0 auto;
  justify-content: center;
}

.revealed-domino {
  width: var(--revealed-tile-width, 20px);
  height: var(--revealed-tile-height, 36px);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  margin: 0;
  border-width: 1px;
  border-radius: 4px;
  box-shadow: 0 1px 3px #000b, inset 0 0 0 1px #ffffffb8;
}

.revealed-domino .face { padding: 1px; }
.revealed-domino .face:first-child { border-bottom: 1px solid #242720; }
.revealed-domino .pip { width: 2.5px; height: 2.5px; }

.player.active {
  border-color: var(--active);
  color: #71ff97;
  box-shadow: 0 0 15px #24ff68c7, 0 2px 8px #0009;
}

.player.pass {
  border-color: var(--pass) !important;
  color: #ff7777 !important;
  box-shadow: 0 0 18px #ff3030e6 !important;
}

.player.review-winner {
  border-color: var(--active);
  color: #8bffa9;
  background: #123b22f2;
  box-shadow: 0 0 19px #24ff68d4, 0 2px 8px #0009;
}

.player.review-loser {
  border-color: var(--pass);
  color: #ff8b8b;
  background: #451719f2;
  box-shadow: 0 0 19px #ff3030d4, 0 2px 8px #0009;
}

.top { top: 29px; left: 50%; transform: translateX(-50%); }
.bottom { bottom: 64px; left: 50%; transform: translateX(-50%); }
.left { left: -38px; top: 43%; transform: rotate(-90deg); }
.right { right: -38px; top: 43%; transform: rotate(90deg); }

#chain {
  position: absolute;
  z-index: 3;
  top: 70px;
  right: 64px;
  bottom: 94px;
  left: 64px;
  overflow: hidden;
}

#chainTiles,
#dropTargets {
  position: absolute;
  inset: 0;
}

#chainTiles { z-index: 1; }
#dropTargets { z-index: 4; pointer-events: none; }

.domino {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1.5px solid #181a17;
  border-radius: 6px;
  background: linear-gradient(135deg, #fffdf6, var(--ivory));
  color: var(--ink);
  box-shadow: 0 3px 6px #0008, inset 0 0 0 1px #ffffffc9;
  user-select: none;
  -webkit-user-select: none;
}

.hand-domino {
  width: 36px;
  height: 60px;
  display: flex;
  flex-direction: column;
  transition: transform .18s, box-shadow .18s, opacity .18s, filter .18s;
  touch-action: none;
}

.chain-domino {
  position: absolute;
  width: var(--chain-length, 48px);
  height: var(--chain-thickness, 26px);
  display: flex;
  flex-direction: row;
  pointer-events: none;
  transform-origin: center;
}

.face {
  position: relative;
  flex: 1 1 50%;
  min-width: 0;
  min-height: 0;
  padding: 3px;
}

.pip-grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  align-items: center;
  justify-items: center;
}

.domino[data-orientation="horizontal"] .face[data-value="6"] .pip-grid { transform: rotate(90deg); }

.hand-domino .face:first-child { border-bottom: 1.5px solid #242720; }
.chain-domino .face:first-child { border-right: 1.5px solid #242720; }

.pip {
  width: 5.5px;
  height: 5.5px;
  border-radius: 50%;
  background: #121410;
  box-shadow: inset .5px .5px 1px #ffffff33, inset -.5px -.5px 1px #0009;
}

.chain-domino .pip { width: 5.2px; height: 5.2px; }
.pip.tl { grid-area: 1 / 1; }
.pip.tr { grid-area: 1 / 3; }
.pip.ml { grid-area: 2 / 1; }
.pip.mc { grid-area: 2 / 2; }
.pip.mr { grid-area: 2 / 3; }
.pip.bl { grid-area: 3 / 1; }
.pip.br { grid-area: 3 / 3; }

.hand-domino.selected {
  transform: translateY(-9px);
  box-shadow: 0 0 0 2px #62ff88, 0 0 13px #50ff7b;
}

.hand-domino.disabled {
  opacity: 1;
  filter: none;
  cursor: default;
}

.hand-domino.unplayable {
  opacity: .42;
  filter: brightness(.62) saturate(.7);
}

.drag-proxy {
  position: fixed !important;
  z-index: 120 !important;
  pointer-events: none;
  opacity: .94;
  transform: translate(-50%, -50%) scale(1.04);
  transition: left .22s ease, top .22s ease, transform .22s ease, opacity .22s ease;
}

.drop-target {
  position: absolute;
  width: var(--chain-length, 48px);
  height: var(--chain-thickness, 26px);
  border: 2px solid #54ff7f;
  border-radius: 7px;
  background: #42ff7912;
  box-shadow: 0 0 0 2px #0c2b18, 0 0 18px #36ff6fa8;
  opacity: .9;
  overflow: visible;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  transform-origin: center;
}

.drop-target::after {
  content: "";
  position: absolute;
  inset: -12px;
}

#dropTargets.dragging .drop-target { pointer-events: none; }

.drop-target.hot {
  background: #42ff7952;
  box-shadow: 0 0 0 3px #eaffee, 0 0 24px #36ff6f;
}

#hand {
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  z-index: 11;
  height: 61px;
  padding: 1px 44px;
  display: flex;
  gap: var(--human-hand-gap, 3px);
  align-items: flex-end;
  justify-content: center;
}

#endButtons {
  position: absolute;
  bottom: 67px;
  left: 50%;
  z-index: 12;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
}

#endButtons button {
  padding: 5px 8px;
  background: #fff4d8;
  color: #422514;
  box-shadow: 0 2px 5px #0006;
  font-size: 11px;
}

#endButtons button:disabled { visibility: hidden; }

.fly {
  position: fixed !important;
  z-index: 99 !important;
  --chain-length: 48px;
  --chain-thickness: 26px;
  transition: left .52s cubic-bezier(.2, .8, .2, 1), top .52s cubic-bezier(.2, .8, .2, 1), transform .52s cubic-bezier(.2, .8, .2, 1) !important;
}

#passFlash,
#message,
#resultAnnouncement {
  position: absolute;
  left: 50%;
  z-index: 15;
  transform: translateX(-50%);
  pointer-events: none;
  text-align: center;
  font-weight: 900;
}

#passFlash {
  top: 45%;
  color: #ff6d6d;
  font-size: clamp(24px, 4.5vw, 36px);
  letter-spacing: .04em;
  opacity: 0;
  text-shadow: 0 2px 7px #000;
  transition: opacity .15s;
}

#passFlash.show { opacity: 1; }

#message {
  top: 55%;
  max-width: 80%;
  padding: 8px 13px;
  border: 1px solid #ffffff28;
  border-radius: 12px;
  background: #28150ee8;
  box-shadow: 0 3px 12px #0008;
  font-size: 17px;
  opacity: 0;
  transition: opacity .2s;
}

#message.show { opacity: 1; }

#resultAnnouncement {
  top: 43%;
  max-width: min(88%, 520px);
  padding: 11px 18px;
  border: 1px solid #ffe8a86b;
  border-radius: 13px;
  background: #21110cf0;
  color: #fff1ba;
  box-shadow: 0 5px 22px #000b;
  font-size: clamp(20px, 4.8vw, 34px);
  letter-spacing: .025em;
  opacity: 0;
  transition: opacity .22s ease;
  white-space: pre-line;
}

#resultAnnouncement.show { opacity: 1; }

.decision-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 19;
  width: min(300px, calc(100% - 40px));
  padding: 15px;
  transform: translate(-50%, -50%);
  border: 1px solid #ffe8a866;
  border-radius: 15px;
  background: #28150ff2;
  box-shadow: 0 10px 32px #000c;
  text-align: center;
}

.decision-panel[hidden] { display: none; }
.decision-panel h2 { margin: 0 0 7px; color: #ffe7a0; font-size: 19px; }
.decision-panel p { margin: 0 0 11px; font-size: 15px; line-height: 1.35; }
.decision-actions { display: flex; gap: 9px; }
.decision-panel button { flex: 1; background: #e8f5e9; color: #12351f; }
.decision-panel button:first-child { background: #42d66d; color: #071b0f; }
#orientationOverlay {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: none;
  place-items: center;
  padding: 32px;
  background: #21110cef;
  color: #ffeaaa;
  text-align: center;
  font-size: clamp(18px, 5vw, 30px);
  font-weight: 850;
  line-height: 1.35;
}

#orientationOverlay.show { display: grid; }

dialog {
  width: min(360px, calc(100% - 32px));
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  border: 1px solid #ffffff24;
  border-radius: 18px;
  padding: 20px;
  background: #f5f2e8;
  color: #17221a;
  box-shadow: 0 15px 50px #000a;
}

dialog::backdrop { background: #000b; }
dialog h2 { margin: 0 0 12px; }
dialog label { display: block; margin: 12px 0; }
dialog button { width: 100%; background: #183d29; color: #fff; }
.mode-setting { margin: 12px 0; }
.mode-setting > span { display: block; margin-bottom: 6px; font-weight: 700; }
dialog .mode-control { display: flex; justify-content: space-between; align-items: center; background: #dfe7df; color: #17221a; text-align: left; }
.mode-control::after { content: "▾"; margin-left: 12px; }
.mode-control[aria-expanded="true"]::after { content: "▴"; }
.mode-options { margin-top: 5px; padding: 5px; border: 1px solid #bcc9be; border-radius: 10px; background: #edf1ec; }
dialog .mode-options button { margin: 2px 0; background: #53645a; }
dialog .mode-options button[aria-pressed="true"] { background: #168a42; box-shadow: inset 0 0 0 2px #0b562d; }
.setup-intro { margin: -5px 0 14px; color: #4c574f; font-size: 13px; line-height: 1.35; }
.sound-toggle { display: flex; gap: 7px; align-items: center; }
.start-game-button {
  min-height: 48px;
  background: #168a42;
  box-shadow: 0 4px 12px #0b562d55;
  font-size: 17px;
  font-weight: 850;
}
.start-game-button:focus-visible { outline: 3px solid #e2ad35; outline-offset: 3px; }
.volume-setting { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; }
.volume-setting input { width: 100%; }
.volume-setting output { min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
.small { margin: 14px 0 8px; color: #4c574f; font-size: 12px; }
.build { margin: 0 0 14px; color: #718077; font-size: 11px; }
.secondary-button { margin-bottom: 8px; background: #53645a; }
.review-game-button {
  position: absolute;
  z-index: 18;
  right: 10px;
  top: 8px;
  width: auto;
  min-height: 38px;
  background: #f3e6ae;
  color: #2d2411;
  box-shadow: 0 3px 12px #0008;
}
.review-game-button[hidden] { display: none; }

.dialog-heading { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.dialog-heading h2 { margin: 0; }
dialog .compact-button { width: auto; padding: 6px 10px; }
.history-dialog { width: min(620px, calc(100% - 24px)); }
.history-list { display: grid; gap: 8px; max-height: min(52dvh, 430px); overflow-y: auto; }
.history-entry {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  padding: 10px;
  border: 1px solid #bdc8bf;
  border-radius: 10px;
  background: #fff;
}
.history-entry p { grid-column: 1; margin: 0; font-size: 13px; }
.history-entry small { color: #617067; }
.history-entry button { grid-column: 2; grid-row: 1 / span 2; width: auto; }
.history-empty { padding: 18px; color: #617067; text-align: center; }
.import-journal-button {
  display: block;
  margin-top: 12px;
  padding: 9px;
  border-radius: 10px;
  background: #53645a;
  color: #fff;
  text-align: center;
  font-weight: 750;
  cursor: pointer;
}
.import-journal-button input { display: none; }

.replay-dialog {
  width: calc(100% - 12px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  height: calc(100dvh - 12px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  max-height: none;
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
  background: #27150d;
  color: #fff;
}
.replay-shell { display: grid; grid-template-rows: auto 1fr auto; height: 100%; min-height: 0; }
.replay-header {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px;
  background: #321d12;
}
.replay-header h2 { margin: 0; font-size: 18px; }
.replay-header p { margin: 2px 0 0; color: #d5c9bd; font-size: 12px; }
.replay-view-toggle { display: flex; gap: 6px; }
.replay-view-toggle button { width: auto; background: #66584d; font-size: 12px; }
.replay-view-toggle button[aria-pressed="true"] { background: #2a9e51; }
.replay-table {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: radial-gradient(ellipse at center, var(--wood-light), var(--wood-mid) 58%, var(--wood-dark));
  border: 6px solid var(--rail);
}
.replay-player {
  position: absolute;
  z-index: 5;
  display: grid;
  gap: 3px;
  min-width: 116px;
  max-width: 46%;
  padding: 4px 6px;
  border: 2px solid #ffffff75;
  border-radius: 10px;
  background: #20120cdb;
  font-size: 12px;
  text-align: center;
}
.replay-player.acting { border-color: var(--active); box-shadow: 0 0 10px #42ff7970; }
.replay-player.pass {
  border-color: var(--pass);
  background: #6f1717eb;
  box-shadow: 0 0 12px #ff565699;
  color: #fff;
}
.replay-top { top: 5px; left: 50%; transform: translateX(-50%); }
.replay-bottom { bottom: 5px; left: 50%; transform: translateX(-50%); }
.replay-left { top: 50%; left: 5px; transform: translateY(-50%); }
.replay-right { top: 50%; right: 5px; transform: translateY(-50%); }
/* Left/right panels rotate 90 degrees as a whole (see replaySidePanelOffset in ui-core.js);
   their UNROTATED height becomes the on-screen distance the panel intrudes from the table edge
   toward the center. The default stacked grid (label row above hand row) spends part of that
   constrained dimension on the label. Arranging label and hand side-by-side instead (a flex
   row) confines the label to the UNROTATED width, which becomes on-screen vertical extent --
   abundant in a portrait/landscape table -- so the label costs nothing in the dimension that
   actually matters, recovering that space for the hand tiles without moving them further
   inward. min-width/max-width and the reduced padding above are unchanged for top/bottom,
   which have no equivalent edge-intrusion constraint. */
.replay-left, .replay-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 3px 5px;
  min-width: 0;
}
.replay-left strong, .replay-right strong {
  flex: 0 0 auto;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
  font-size: 10px;
  letter-spacing: .01em;
  /* In vertical-rl, `height` is the run's own length along the text direction (before the whole
     panel is itself rotated) -- an unbounded run ("Opponent 2 · 1 · PASS") can make the label
     far longer than the fixed-size hand tile beside it, and since the panel's rotated on-screen
     reach toward the table center tracks whichever child is larger, a long label alone can push
     the panel inward well past where the tile size would suggest -- confirmed as a real
     regression from an automated portrait walkthrough. Capped here as a general safety net
     (game.js also drops the redundant " PASS" suffix for these seats specifically, since the
     panel's own red border/background already conveys it -- see the title text assembly in
     renderReplay). */
  max-height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* text-orientation: mixed always typesets a non-CJK run rotated 90 degrees CLOCKWISE from
   horizontal, regardless of vertical-rl vs vertical-lr (that distinction only affects how
   multiple lines stack, irrelevant to this single-line label) -- confirmed empirically: an
   earlier version set vertical-lr here expecting a counter-clockwise, self-canceling rotation
   against .replay-right's rotate(-90deg), but measured computed styles showed both panels
   produce the identical +90 degree character rotation. Combined with .replay-left's
   rotate(90deg) panel transform, that compounds to 180 degrees (text rendered upside down);
   combined with .replay-right's rotate(-90deg) it cancels to 0 (text rendered upright), which is
   exactly the asymmetry seen in a live screenshot. Correcting the panel transform is not an
   option (it also rotates the hand tiles), so the label itself is rotated an extra 180 degrees
   on the left side only, canceling that panel's rotation the same way the right side already
   cancels on its own -- rotate(180deg) does not change the label's 14x71-ish bounding box, only
   which way the text reads. */
.replay-left strong { transform: rotate(180deg); }
.replay-hand { display: flex; gap: var(--replay-gap, 2px); justify-content: center; min-height: 42px; }
/* Replay hand tiles are the same `.domino` used everywhere else in the app (same gradient,
   border, border-radius, box-shadow as the live board/hand -- see the shared `.domino` rule) --
   only size and orientation are overridden. FINAL CORRECTIVE AUTHORIZATION: this is now a plain,
   FIXED size, not computed in JS at all (no --replay-tile-width/height custom properties) --
   chosen once, comfortably larger and more readable than the original hardcoded 18x29/20x33
   placeholder, but small enough to stay safely clear of every breakpoint's chain-safe-area
   margin in style.css (.replay-chain's inset, unmodified from Build 0.45) regardless of the
   played chain's own current tile size. It deliberately does NOT track the chain's tile size:
   an earlier version did, and the chain's own tile can reach ~62px tall on a generous table,
   which pushed even a minimally-padded hand panel past that fixed margin. Only --replay-gap
   (still set in JS, since a lone tile needs no gap) varies at all; width/height never do,
   regardless of viewport, orientation, or how many tiles remain in the hand. This does not
   invent a new visual design or a new proportional pip formula: `.pip`/`.face` below reuse the
   shared design's own fixed sizing rather than a bespoke calc(). */
.replay-domino {
  width: 24px;
  height: 42px;
  display: flex;
  flex-direction: column;
}
.replay-domino .face:first-child { border-bottom: 1.5px solid #242720; }
.replay-domino .pip { width: 4px; height: 4px; }
.replay-hand .domino-back { width: 12px; height: 23px; }
.replay-chain { position: absolute; inset: 64px 68px; }
#replayChainTiles { position: absolute; inset: 0; }
.replay-footer { padding: 7px 10px calc(9px + env(safe-area-inset-bottom, 0px)); background: #321d12; }
.replay-scrubber-wrap { min-height: 28px; margin-bottom: 16px; padding: 0 2px; }
#replayScrubber { display: block; width: 100%; height: 28px; margin: 0; }
.replay-nav-controls { display: grid; grid-template-columns: repeat(4, minmax(44px, 96px)); gap: 8px; justify-content: center; }
.replay-nav-controls button { width: 100%; min-width: 44px; min-height: 44px; padding: 9px 8px; background: #ede8da; color: #1b271f; font-size: 12px; }
.replay-actions { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
.replay-actions button { width: auto; min-height: 36px; padding: 7px 12px; background: #66584d; color: #fff; font-size: 11px; }
.replay-actions #exitReplayBtn { background: #8b332d; color: #fff; }
.analysis-sheet {
  position: absolute;
  z-index: 12;
  right: 8px;
  bottom: 8px;
  width: min(390px, calc(100% - 16px));
  max-height: calc(100% - 16px);
  overflow: auto;
  padding: 10px;
  border: 2px solid #d4b26a;
  border-radius: 12px;
  background: #21160ff2;
  color: #fffaf0;
  box-shadow: 0 7px 22px #0009;
  font-size: 12px;
}
.analysis-sheet[hidden] { display: none; }
.analysis-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.analysis-heading strong { font-size: 15px; }
.analysis-heading button { width: auto; min-height: 36px; padding: 5px 10px; }
.analysis-summary h3 { margin: 5px 0; color: #ffe082; font-size: 16px; }
.analysis-summary p { margin: 4px 0; }
.analysis-reasons { margin: 6px 0; padding-left: 20px; }
.analysis-reasons li { margin: 4px 0; }
.analysis-scope-label { margin: 6px 0 2px; color: #d2c9ba; font-size: 10px; font-style: italic; text-transform: uppercase; letter-spacing: .02em; }
.analysis-basis-note { margin: 0 0 4px; color: #b9ac9c; font-size: 10px; line-height: 1.35; }
.analysis-explanation { margin: 2px 0 6px; }
.analysis-actual-reason, .analysis-runner-up { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #ffffff33; }
.analysis-sheet details { margin-top: 8px; }
.analysis-sheet summary { min-height: 36px; cursor: pointer; color: #dff5e5; }
.analysis-candidates { width: 100%; border-collapse: collapse; font-size: 11px; }
.analysis-candidates th, .analysis-candidates td { padding: 4px; border-bottom: 1px solid #ffffff26; text-align: left; }
.analysis-candidates tr.actual td:first-child::after { content: " · yours"; color: #8fd4ff; }
.analysis-candidates tr.preferred { background: #23673d99; }
.analysis-boundary-note { color: #d2c9ba; font-size: 10px; line-height: 1.3; }
.analysis-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.analysis-actions button { min-height: 44px; padding: 6px; font-size: 10px; }
.analysis-actions button:nth-last-child(-n+2) { background: #66584d; }
.draw-result { color: #ffe55d; text-shadow: 0 0 8px #000, 0 0 12px #ffd84d99; }

@media (orientation: portrait) and (max-width: 600px) {
  .review-game-button { top: 38px; }
  .replay-dialog { width: calc(100% - 12px); height: calc(100dvh - 12px); }
  .replay-header { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; align-items: stretch; padding: calc(2px + env(safe-area-inset-top, 0px)) 9px 3px; }
  .replay-header p { max-width: 100%; line-height: 1.25; overflow-wrap: anywhere; }
  .replay-view-toggle { flex-direction: row; }
  .replay-view-toggle button { flex: 1; min-height: 38px; padding: 7px 8px; font-size: 10px; }
  .replay-top { top: 5px; }
  .replay-bottom { bottom: 4px; }
  .replay-left { left: -30px; transform: translateY(-50%) rotate(90deg); }
  .replay-right { right: -30px; transform: translateY(-50%) rotate(-90deg); }
  .replay-chain { inset: 60px 48px 54px; }
  .replay-player { min-width: 102px; max-width: 55%; font-size: 10px; }
  .replay-footer { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0 6px; padding: 2px 8px calc(2px + env(safe-area-inset-bottom, 0px)); }
  .replay-scrubber-wrap { grid-column: 1 / -1; margin-bottom: 16px; }
  .replay-nav-controls { grid-template-columns: repeat(4, minmax(44px, 1fr)); gap: 4px; }
  .replay-nav-controls button { min-height: 44px; padding: 8px 3px; font-size: 10px; }
  .replay-actions { align-self: stretch; margin-top: 0; gap: 4px; }
  .replay-actions button { flex: 1; min-width: 44px; min-height: 44px; padding: 5px 3px; font-size: 9px; }
  .analysis-sheet { right: 5px; bottom: 5px; width: calc(100% - 10px); max-height: 55%; }
}

@media (orientation: landscape) and (max-height: 500px) {
  .app-header { height: 42px; padding: 4px 9px; }
  .app-header button { padding: 5px 9px; font-size: 11px; }
  .title-wrap strong { font-size: 12px; }
  .title-wrap small { margin-top: 2px; font-size: 9px; }
  #table { height: calc(100% - 42px); border-width: 5px; }
  .scoreboard { top: 3px; padding: 2px 7px; font-size: 10px; }
  .scoreboard b { font-size: 12px; }
  .player { min-height: 26px; padding: 3px 8px; font-size: 11px; }
  .player:not(.bottom) { min-height: 34px; padding: 4px 10px; gap: 8px; font-size: 13px; }
  .player:not(.bottom) .hidden-hand { gap: 2px; min-height: 21px; }
  .domino-back { width: 12px; height: 21px; }
  .top { top: 25px; }
  .bottom { bottom: 56px; }
  .left { left: -34px; }
  .right { right: -34px; }
  #chain { top: 59px; right: 55px; bottom: 80px; left: 55px; }
  #hand { height: 54px; padding: 0 42px; }
  .hand-domino { width: 33px; height: 53px; }
  .hand-domino .pip { width: 4.8px; height: 4.8px; }
  #endButtons { bottom: 58px; }
  #message { top: 51%; font-size: 14px; }
  .decision-panel { width: min(280px, calc(100% - 32px)); padding: 11px 13px; }
  .decision-panel h2 { font-size: 17px; }
  .decision-panel p { margin-bottom: 8px; font-size: 13px; }
  .hidden-hand.revealed { min-height: 31px; }
  .revealed-domino .pip { width: 2.2px; height: 2.2px; }
  dialog { width: min(520px, calc(100% - 24px)); padding: 11px 16px; }
  dialog h2 { margin-bottom: 4px; font-size: 17px; }
  dialog label { margin: 7px 0; }
  .setup-intro { margin: 0 0 7px; font-size: 11px; }
  dialog .small { margin: 7px 0 3px; }
  dialog .build { margin-bottom: 7px; }
  .start-game-button { min-height: 40px; font-size: 15px; }
  .review-game-button { top: 3px; min-height: 30px; padding: 4px 8px; font-size: 10px; }
  .replay-header { padding: calc(2px + env(safe-area-inset-top, 0px)) 7px 2px; }
  .replay-header h2 { font-size: 14px; }
  .replay-header p { font-size: 9px; }
  .replay-view-toggle button { padding: 5px 7px; font-size: 9px; }
  .replay-player { min-width: 96px; padding: 2px 5px; font-size: 9px; }
  .replay-top { top: 3px; }
  .replay-bottom { bottom: 3px; }
  .replay-chain { inset: 38px 104px; }
  .replay-footer { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto; gap: 10px; align-items: center; padding: 3px 7px calc(3px + env(safe-area-inset-bottom, 0px)); }
  .replay-scrubber-wrap { min-width: 180px; margin-bottom: 0; }
  .replay-nav-controls { grid-template-columns: repeat(4, 44px); gap: 5px; }
  .replay-nav-controls button { min-height: 44px; padding: 6px 5px; font-size: 9px; }
  .replay-actions { margin-top: 0; gap: 5px; }
  .replay-actions button { min-width: 44px; min-height: 44px; padding: 5px 7px; font-size: 9px; }
  .analysis-sheet { width: min(360px, 48%); font-size: 10px; }
  .analysis-summary h3 { font-size: 13px; }
}

@media (orientation: portrait) {
  :root { --table-grain-angle: 90deg; }
}

@media (orientation: portrait) and (max-width: 600px) {
  .player:not(.bottom) { min-height: 35px; padding: 5px 10px; gap: 6px; font-size: 12px; }
  .player:not(.bottom) .hidden-hand { gap: 2px; min-height: 20px; }
  .domino-back { width: 11px; height: 20px; }
  .top { top: 49px; }
  .left { left: -49px; top: 44%; }
  .right { right: -49px; top: 44%; }
  #chain { top: 96px; right: 64px; bottom: 128px; left: 64px; }
  #hand { height: 58px; padding: 0 18px; gap: var(--human-hand-gap, 2px); }
  .hand-domino { width: 34px; height: 56px; }
  .hand-domino .pip { width: 5px; height: 5px; }
  .bottom { bottom: 60px; }
  #endButtons { bottom: 63px; }
}

@media (orientation: portrait) and (max-width: 360px) {
  .player:not(.bottom) { padding: 4px 8px; gap: 4px; font-size: 11px; }
  .domino-back { width: 10px; height: 19px; }
  .left { left: -51px; }
  .right { right: -51px; }
  #chain { right: 56px; left: 56px; }
  #hand { padding-inline: 8px; }
  .hand-domino { width: 32px; height: 54px; }
}

@media (min-width: 900px) {
  #table { max-width: 1120px; margin: 0 auto; }
  .hand-domino { width: 42px; height: 70px; }
  #hand { height: 72px; }
  #endButtons { bottom: 74px; }
}

/* Build 0.39: reclaim labels/control bands for the board before enlarging tiles. */
.app-header {
  height: 60px;
  padding: 4px 9px 20px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
}

.app-header > button { position: relative; z-index: 2; }
.title-wrap { min-width: 0; line-height: 1; }
.title-wrap strong { font-size: 13px; }
.title-wrap small { margin-top: 2px; font-size: 9px; }

.scoreboard {
  top: auto;
  bottom: 2px;
  left: 50%;
  width: min(560px, calc(100% - 16px));
  min-height: 17px;
  transform: translateX(-50%);
  justify-content: center;
  gap: clamp(6px, 2.2vw, 18px);
  padding: 1px 7px;
  border-radius: 8px;
  font-size: clamp(9px, 2.4vw, 11px);
}

.scoreboard b { font-size: 12px; }
.scoreboard.cutthroat { width: min(660px, calc(100% - 12px)); gap: clamp(3px, 1.3vw, 9px); font-size: clamp(8px, 1.9vw, 10px); }
.scoreboard.cutthroat b { font-size: clamp(10px, 2.4vw, 12px); }

#table { height: calc(100% - 60px); }
.top { top: 22px; }
.bottom { bottom: 13px; left: 7px; transform: none; }
.left { left: -88px; }
.right { right: -88px; }
#chain { top: 62px; right: 42px; bottom: 82px; left: 42px; }
#hand { right: 4px; left: 52px; height: 65px; padding: 1px 4px; }
.hand-domino { width: 38px; height: 63px; }
#endButtons { bottom: 66px; }

.replay-header-tools { display: flex; gap: 8px; align-items: stretch; }
.replay-export {
  width: auto;
  min-width: 68px;
  padding: 5px 8px;
  background: #594b41;
  color: #fff;
  font-size: 9px;
}
.replay-bottom { display: flex; min-width: 0; max-width: 74%; align-items: center; }
/* .replay-top never received the same label-beside-hand treatment as .replay-bottom's own
   pre-existing (Build 0.45) rule above, despite sitting in the same position relative to the
   chain on the opposite edge -- added here to recover the vertical space its stacked label row
   previously spent, matching .replay-bottom's own established pattern exactly rather than
   inventing a new one. This is a hand-panel-only rule; it does not touch the played chain. */
.replay-top { display: flex; min-width: 0; max-width: 74%; align-items: center; }

@media (max-width: 619px) {
  .replay-dialog { width: calc(100% - 12px); height: calc(100dvh - 12px); }
  .replay-header { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; align-items: stretch; padding: calc(2px + env(safe-area-inset-top, 0px)) 7px 3px; }
  .replay-header > div:first-child { display: flex; gap: 7px; align-items: baseline; min-width: 0; }
  .replay-header h2 { flex: 0 0 auto; font-size: 15px; }
  .replay-header p { min-width: 0; margin: 0; overflow: hidden; font-size: 10px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
  .replay-header-tools { gap: 4px; }
  .replay-view-toggle { flex: 1; min-width: 0; }
  .replay-view-toggle button { min-height: 34px; padding: 5px 4px; font-size: 9px; }
  .replay-export { min-height: 34px; }
  .replay-scrubber-wrap { display: none; }
  .replay-footer { display: grid; grid-template-columns: minmax(0, 2fr) minmax(92px, .85fr); gap: 5px; padding: 2px 7px calc(2px + env(safe-area-inset-bottom, 0px)); }
  .replay-nav-controls { grid-template-columns: repeat(4, minmax(44px, 1fr)); gap: 4px; }
  .replay-nav-controls button { min-height: 44px; padding: 7px 2px; font-size: 9px; }
  .replay-actions { margin-top: 0; gap: 4px; }
  .replay-actions button { flex: 1; min-width: 44px; min-height: 44px; padding: 5px 3px; font-size: 9px; }
  .replay-chain { inset: 52px 42px 42px; }
  .replay-left { left: -34px; }
  .replay-right { right: -34px; }
  .replay-bottom { bottom: 3px; min-width: 0; padding: 3px 5px; }
  .replay-bottom .replay-hand { gap: 1px; }
  .analysis-sheet { right: 5px; bottom: 5px; width: calc(100% - 10px); max-height: 60%; }
}

@media (min-width: 620px) {
  .replay-header { padding-block: calc(4px + env(safe-area-inset-top, 0px)) 4px; }
  .replay-table { min-height: 0; }
  .replay-footer {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    padding: 3px 7px calc(3px + env(safe-area-inset-bottom, 0px));
  }
  .replay-scrubber-wrap { min-width: 160px; margin-bottom: 0; }
  .replay-nav-controls { grid-template-columns: repeat(4, 44px); gap: 5px; }
  .replay-actions { margin-top: 0; gap: 5px; }
  .replay-actions button { min-width: 66px; min-height: 44px; padding: 5px 7px; font-size: 9px; }
  .replay-left { left: -18px; transform: translateY(-50%) rotate(90deg); }
  .replay-right { right: -18px; transform: translateY(-50%) rotate(-90deg); }
  .replay-chain { inset: 48px 58px 44px; }
  .replay-bottom { bottom: 3px; padding: 3px 6px; }
}

@media (orientation: landscape) and (min-width: 620px) {
  .replay-footer {
    grid-template-columns: minmax(120px, 25%) minmax(0, 1fr) auto;
    gap: 8px;
  }
  .replay-scrubber-wrap { width: 100%; min-width: 0; }
  .replay-nav-controls { grid-template-columns: repeat(4, minmax(58px, 1fr)); gap: 8px; }
  .replay-nav-controls button { min-height: 48px; padding: 7px 8px; }
  .replay-actions { gap: 8px; }
  .replay-actions #analyzePlayBtn { min-width: 88px; min-height: 48px; padding: 6px 9px; }
}

@media (orientation: portrait) and (max-width: 600px) {
  .top { top: 20px; }
  .left { left: -89px; top: 44%; }
  .right { right: -89px; top: 44%; }
  #chain { top: 66px; right: 42px; bottom: 82px; left: 42px; }
  #hand { right: 4px; left: 48px; height: 65px; padding-inline: 2px; }
  .hand-domino { width: 37px; height: 62px; }
  .bottom { bottom: 15px; left: 5px; }
  #endButtons { bottom: 66px; }
}

@media (orientation: landscape) and (max-height: 500px) {
  .app-header { height: 48px; padding: 2px 7px 18px; }
  .app-header button { padding: 4px 8px; }
  .title-wrap strong { font-size: 11px; }
  .title-wrap small { margin-top: 1px; font-size: 8px; }
  #table { height: calc(100% - 48px); }
  .scoreboard { bottom: 1px; min-height: 15px; padding-block: 0; }
  .top { top: 17px; }
  .left { left: -88px; }
  .right { right: -88px; }
  #chain { top: 51px; right: 42px; bottom: 65px; left: 42px; }
  #hand { right: 4px; left: 48px; height: 59px; padding-inline: 2px; }
  .hand-domino { width: 36px; height: 58px; }
  .bottom { bottom: 12px; left: 5px; }
  #endButtons { bottom: 61px; }
  .replay-header { padding: calc(2px + env(safe-area-inset-top, 0px)) 6px 2px; }
  .replay-header-tools { gap: 4px; }
  .replay-export { min-width: 62px; padding: 4px 5px; }
  .replay-chain { inset: 39px 58px 40px; }
}

@media (orientation: portrait) and (max-width: 360px) {
  #chain { right: 38px; left: 38px; }
  #hand { left: 45px; }
  .hand-domino { width: 34px; height: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}