:root {
  --ink: #2e2a22;
  --soft-ink: #5d5648;
  --cream: #f6ead3;
  --paper: #fff7e8;
  --olive: #68734b;
  --olive-dark: #3f4a31;
  --mustard: #d5a947;
  --wood: #ad7245;
  --wood-dark: #6e432c;
  --felt: #2f493c;
  --felt-dark: #20342b;
  --tile: #f3ecdd;
  --tile-line: #3b342c;
  --shadow: rgba(65, 47, 31, .22);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.65), transparent 28%),
    repeating-linear-gradient(8deg, rgba(96,68,42,.026) 0 1px, transparent 1px 7px),
    #ead8b8;
  overflow: hidden;
}
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.game-shell {
  width: min(1600px, 100vw);
  height: 100vh;
  min-height: 650px;
  margin: 0 auto;
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(260px, 28%) 1fr;
  gap: 16px;
}

.sage-panel,
.table-panel {
  position: relative;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 26px 22px 28px 20px;
  box-shadow: 0 8px 0 rgba(59,45,31,.08), 0 18px 34px var(--shadow);
}

.sage-panel {
  background:
    repeating-linear-gradient(-8deg, rgba(89,70,44,.03) 0 1px, transparent 1px 8px),
    var(--paper);
  padding: 14px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 12px;
}

.portrait-frame {
  min-height: 0;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 19px 25px 18px 23px;
  background: #e9d5af;
  transform: rotate(-.2deg);
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.16);
}
.portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  filter: saturate(.92) contrast(.98);
}
.eyebrow {
  font-size: 12px;
  letter-spacing: .18em;
  font-weight: 900;
  color: var(--olive-dark);
}
h1 { margin: 2px 0 4px; font-size: clamp(25px, 2.6vw, 42px); line-height: .98; }
.sage-line {
  min-height: 2.8em;
  margin: 0;
  color: var(--soft-ink);
  font-size: clamp(13px, 1.15vw, 17px);
  font-weight: 650;
}
.score-card {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 7px;
  border: 2px solid var(--ink);
  border-radius: 17px 15px 19px 14px;
  padding: 8px;
  background: #f4e2bf;
}
.score-card > div:not(.score-goal) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.score-card span { font-size: 12px; font-weight: 800; text-transform: uppercase; }
.score-card strong { font-size: 25px; }
.score-goal { font-size: 9px; text-transform: uppercase; letter-spacing: .11em; color: var(--soft-ink); text-align: center; }

.table-panel {
  min-width: 0;
  background: #dac29b;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.topbar, .actionbar {
  background: rgba(250, 238, 215, .96);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  z-index: 5;
}
.topbar { border-bottom: 2px solid var(--ink); }
.actionbar { border-top: 2px solid var(--ink); min-height: 62px; }
.turn-indicator { font-weight: 900; font-size: 14px; letter-spacing: .03em; }
.audio-controls { display: flex; align-items: center; gap: 7px; }
.icon-button {
  min-width: 48px; height: 32px; padding: 0 9px;
  border: 2px solid var(--ink);
  border-radius: 10px 8px 11px 9px;
  background: #f7e7c8;
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
}
.icon-button[aria-pressed="false"] { opacity: .42; text-decoration: line-through; }
.volume-wrap { display: flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 900; }
.volume-wrap input { width: 92px; accent-color: var(--olive-dark); }

.table-surface {
  position: relative;
  min-height: 0;
  overflow: hidden;
  padding: 12px 16px;
  display: grid;
  grid-template-rows: 96px minmax(0, 1fr) 154px;
  gap: 8px;
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,.055), transparent 58%),
    repeating-linear-gradient(92deg, rgba(255,255,255,.022) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(2deg, rgba(11,22,17,.045) 0 1px, transparent 1px 5px),
    var(--felt);
}
.table-surface::before,
.table-surface::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.table-surface::before {
  inset: 8px;
  border: 3px solid rgba(48,44,33,.72);
  border-radius: 44% 51% 47% 53% / 10% 12% 9% 11%;
  box-shadow: inset 0 0 0 6px rgba(224,196,146,.10), inset 0 0 52px rgba(8,18,13,.28);
}
.table-surface::after {
  inset: 0;
  border-left: 12px solid var(--wood-dark);
  border-right: 12px solid var(--wood-dark);
  opacity: .75;
}
.grain { position: absolute; pointer-events:none; border-radius: 50%; opacity:.07; border:2px solid #efe6cf; }
.grain-a { width: 380px; height: 100px; left: 11%; top: 37%; transform: rotate(-4deg); }
.grain-b { width: 300px; height: 85px; right: 10%; top: 45%; transform: rotate(3deg); }

.opponent-area, .player-area, .board-area { position: relative; z-index: 2; min-width: 0; }
.opponent-area, .player-area { display: grid; align-content: center; }
.rack-title { display: flex; justify-content: center; align-items: baseline; gap: 8px; margin-bottom: 5px; color: #fff9ec; text-shadow: 0 1px 0 rgba(0,0,0,.25); }
.rack-title span { font-weight: 900; font-size: 13px; }
.rack-title small { font-size: 10px; opacity: .85; }
.sage-hand, .player-hand { display: flex; justify-content: center; align-items: flex-end; gap: 6px; min-width:0; }
.sage-hand { height: 70px; }
.player-hand { height: 120px; overflow-x: auto; padding: 5px 8px 9px; scrollbar-width: thin; }

.domino {
  --rot: 0deg;
  position: relative;
  flex: 0 0 auto;
  border: 2px solid var(--tile-line);
  background:
    linear-gradient(145deg, rgba(255,255,255,.56), transparent 34%),
    linear-gradient(325deg, rgba(108,92,71,.10), transparent 40%),
    var(--tile);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.70),
    inset -2px -2px 4px rgba(72,58,44,.10),
    0 3px 0 rgba(58,46,35,.28),
    2px 5px 8px rgba(22,31,25,.20);
  user-select: none;
  transform: rotate(var(--rot));
}
.domino.hand-tile {
  width: 58px; height: 104px;
  border-radius: 11px 9px 12px 10px;
  display: grid;
  grid-template-rows: 1fr 2px 1fr;
  cursor: pointer;
  transition: transform .12s ease, translate .12s ease, filter .12s ease;
}
.domino.hand-tile:hover { translate: 0 -6px; }
.domino.hand-tile.playable { box-shadow: 0 0 0 3px rgba(243,204,104,.75), 2px 4px 0 rgba(49,38,29,.22); }
.domino.hand-tile.selected { translate: 0 -10px; box-shadow: 0 0 0 4px #f2c45f, 2px 4px 0 rgba(49,38,29,.22); }
.domino.hand-tile.disabled { opacity:.7; cursor:default; }
.divider { background: linear-gradient(90deg, rgba(42,35,28,.88), rgba(79,67,55,.68)); opacity:.88; margin: 0 5px; border-radius:10px; box-shadow:0 1px 0 rgba(255,255,255,.35); }
.pip-half { position: relative; }
.pip { position:absolute; width:8px; height:8px; border-radius:50%; background:#292720; transform:translate(-50%,-50%); box-shadow: inset 1px 1px 1px rgba(0,0,0,.42), 0 1px 0 rgba(255,255,255,.42); }
.pip.p1 { left:23%; top:23%; } .pip.p2 { left:50%; top:23%; } .pip.p3 { left:77%; top:23%; }
.pip.p4 { left:23%; top:50%; } .pip.p5 { left:50%; top:50%; } .pip.p6 { left:77%; top:50%; }
.pip.p7 { left:23%; top:77%; } .pip.p8 { left:50%; top:77%; } .pip.p9 { left:77%; top:77%; }

.domino.back {
  width: 38px; height: 64px;
  border-radius: 9px 8px 10px 8px;
  background:
    radial-gradient(circle, rgba(236,218,167,.82) 0 2px, transparent 2.5px) 5px 5px/11px 11px,
    linear-gradient(145deg, rgba(255,255,255,.08), transparent 35%),
    #3d5446;
  border-color: #23352c;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.18), 0 3px 0 rgba(24,37,30,.34), 2px 5px 7px rgba(17,27,22,.18);
}
.domino.back:nth-child(odd) { --rot: -2deg; }
.domino.back:nth-child(even) { --rot: 2deg; }

.board-area {
  display: grid;
  grid-template-rows: 28px minmax(0, 1fr);
  align-items: center;
  padding: 0 20px;
}
.board-meta { display:flex; justify-content:space-between; align-items:center; color:#f9f0db; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.end-badge { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:#f3e5c8; color:var(--ink); border:2px solid var(--ink); font-size:14px; }
.boneyard { background:rgba(47,53,36,.34); padding:4px 9px; border-radius:20px; border:1px solid rgba(255,255,255,.15); }
.chain {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 220px;
}
.chain-tile {
  position: absolute;
  width: var(--chain-w, 88px); height: var(--chain-h, 46px);
  display: grid;
  grid-template-columns: 1fr 2px 1fr;
  border-radius: 9px 7px 10px 8px;
  transition: left .22s ease, top .22s ease, transform .22s ease;
}
.chain-tile .divider { margin:5px 0; }
.chain-tile .pip { width:7px; height:7px; }
.chain-tile.turn {
  width: var(--chain-h, 46px);
  height: var(--chain-w, 88px);
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 2px 1fr;
}
.chain-tile.turn .divider { margin:0 5px; }
.empty-board { position:absolute; inset:38px 20px 10px; display:grid; place-items:center; color:rgba(255,249,233,.52); font-size:13px; font-weight:800; pointer-events:none; }

.status { min-width:0; color:var(--soft-ink); font-size:12px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.actions { display:flex; gap:7px; flex:0 0 auto; }
.actions button {
  border:2px solid var(--ink); border-radius:12px 9px 13px 10px; padding:8px 12px; cursor:pointer; font-weight:900; box-shadow:0 2px 0 rgba(54,41,28,.18);
}
.actions button:active { translate:0 1px; box-shadow:none; }
.primary { background:var(--mustard); color:var(--ink); }
.secondary { background:#f6ead1; color:var(--ink); }
.actions button:disabled { opacity:.45; cursor:not-allowed; }

.toast {
  position:fixed; left:50%; top:-90px; translate:-50% 0;
  z-index:20; max-width:min(520px,90vw); padding:10px 16px;
  background:#fff0cf; border:2px solid var(--ink); border-radius:14px 12px 16px 11px;
  box-shadow:0 7px 18px rgba(45,34,25,.2); font-size:13px; font-weight:900;
  transition:top .22s ease;
}
.toast.show { top:18px; }
.shake { animation: shake .23s linear; }
@keyframes shake { 25%{translate:-4px 0} 50%{translate:4px 0} 75%{translate:-2px 0} }

.home-btn{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:15;
  display:flex;
  align-items:center;
  gap:6px;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(46,42,34,.85);
  border:2px solid var(--ink);
  color:var(--cream);
  text-decoration:none;
  font-size:13px;
  font-weight:900;
  box-shadow:0 4px 14px rgba(0,0,0,.3);
}
.home-btn:hover{background:var(--olive-dark)}
@media (max-width:600px){
  .home-btn{padding:8px 12px;font-size:12px;right:10px;bottom:10px}
}

@media (hover: hover) {
  .domino.hand-tile:hover { translate: 0 -6px; }
}
.domino.hand-tile, .actions button, .icon-button {
  touch-action: manipulation;
}
.domino { -webkit-touch-callout: none; }

@media (max-width: 920px) {
  body { overflow:auto; }
  .game-shell { min-height:100vh; height:auto; grid-template-columns:1fr; grid-template-rows:300px minmax(650px, 1fr); padding:10px; }
  .sage-panel { grid-template-columns:42% 1fr; grid-template-rows:1fr auto; }
  .portrait-frame { grid-row:1 / span 2; }
  .score-card { align-self:end; }
  .sage-line { min-height:auto; }
}

@media (max-width: 600px) {
  .game-shell { grid-template-rows:220px minmax(560px, 1fr); padding:8px; gap:10px; }
  .sage-panel { padding:10px; gap:8px; }
  h1 { font-size:22px; }
  .eyebrow { font-size:10px; }
  .score-card strong { font-size:20px; }
  .topbar, .actionbar { padding:8px 10px; flex-wrap:wrap; }
  .turn-indicator { font-size:12px; }
  .audio-controls { gap:5px; }
  .icon-button { min-width:40px; height:28px; font-size:11px; padding:0 6px; }
  .volume-wrap { font-size:8px; }
  .volume-wrap input { width:64px; }
  .table-surface { grid-template-rows:82px minmax(0,1fr) 130px; padding:8px 10px; }
  .domino.hand-tile { width:46px; height:82px; }
  .player-hand { height:96px; }
  .sage-hand { height:52px; }
  .domino.back { width:30px; height:48px; }
  .chain { min-height:170px; }
  .actions button { padding:7px 10px; font-size:13px; }
  .status { font-size:11px; }
}

@media (max-height: 760px) {
  .game-shell { padding:10px; gap:10px; }
}
@media (max-height: 760px) and (min-width: 921px) {
  .game-shell { min-height:600px; }
  .table-surface { grid-template-rows:78px minmax(0,1fr) 126px; }
  .domino.hand-tile { width:48px; height:86px; }
  .player-hand { height:98px; }
  .sage-hand { height:52px; }
  .domino.back { width:31px; height:50px; }
  .sage-line { min-height:2.3em; }
}
@media (max-height: 700px) and (max-width: 920px) {
  .game-shell { grid-template-rows:180px minmax(500px, 1fr); }
  .table-surface { grid-template-rows:70px minmax(0,1fr) 112px; }
  .domino.hand-tile { width:42px; height:76px; }
  .player-hand { height:88px; }
  .sage-hand { height:46px; }
  .domino.back { width:27px; height:44px; }
  .chain { min-height:140px; }
}