:root {
  --board: 560px;
  --ink: #f6f0e6;
  --muted: #cbbba6;
  --dim: #8d7d6b;
  --bg: #14110e;
  --panel: #221c17;
  --panel-line: rgba(244, 228, 204, 0.08);
  --brass: #e2c07a;
  --brass-deep: #b8883e;
  --felt: #1b4636;
  --light: #f3e6d0;
  --dark: #2f6b4e;
  --last-light: #f6e3a8;
  --last-dark: #3f7d5c;
  --danger: #c4493a;
  --paper: #f7f1e6;
  --paper-ink: #241c16;
  color-scheme: dark;
  font-family: "Outfit", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--ink);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overflow-x: clip;
  background:
    radial-gradient(ellipse at 12% -10%, rgba(212, 164, 92, 0.18), transparent 42%),
    radial-gradient(ellipse at 100% 100%, rgba(32, 92, 68, 0.22), transparent 46%),
    var(--bg);
}

button, select { font: inherit; color: inherit; touch-action: manipulation; }

button { cursor: pointer; }

.app {
  width: min(1040px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 40px;
}

.top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.brand h1 {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 2.6rem;
  font-weight: 560;
  letter-spacing: -0.03em;
  line-height: 0.95;
}

.mark {
  margin: 0 0 4px;
  color: var(--brass);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.setup, .top-actions, .row-actions, .card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}

.field { display: grid; gap: 6px; }

.field span, .log-head h2 {
  color: var(--dim);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

select {
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 10px;
  padding: 8px 12px;
  min-width: 9.5rem;
}

.text-btn {
  background: transparent;
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  padding: 8px 14px;
  color: var(--muted);
}

.text-btn:hover, .text-btn:focus-visible { color: var(--ink); border-color: rgba(226, 192, 122, 0.45); }

.text-btn:disabled { opacity: 0.4; cursor: default; }

main {
  display: grid;
  grid-template-columns: max-content minmax(300px, 340px);
  gap: 22px;
  justify-content: center;
  align-items: start;
}

.table {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.05), transparent 58%),
    var(--felt);
  border-radius: 28px;
  padding: 28px 28px 18px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 24px 50px rgba(0, 0, 0, 0.28);
}

.board-frame {
  width: calc(var(--board) + 28px);
  margin: 0 auto;
  padding: 14px;
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 30%),
    #6a4324;
  box-shadow: inset 0 0 0 2px rgba(226, 192, 122, 0.35), 0 10px 24px rgba(0, 0, 0, 0.25);
}

.board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: var(--board);
  height: var(--board);
  border-radius: 4px;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.sq {
  position: relative;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: var(--light);
  color: inherit;
}

.sq.dark { background: var(--dark); }

.sq.last.light { background: var(--last-light); }
.sq.last.dark { background: var(--last-dark); }

.sq.selected { box-shadow: inset 0 0 0 3px var(--brass); }

.sq:focus { outline: none; }
.sq:focus-visible { box-shadow: inset 0 0 0 3px var(--brass); }

.coord {
  position: absolute;
  font-size: 0.68rem;
  font-weight: 600;
  pointer-events: none;
  opacity: 0.85;
}

.sq.light .coord { color: #2f6b4e; }
.sq.dark .coord { color: #f3e6d0; }
.coord.file { bottom: 3px; right: 5px; }
.coord.rank { top: 3px; left: 5px; }

.piece {
  width: 84%;
  height: 84%;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.35));
  pointer-events: none;
}

.piece-svg { width: 100%; height: 100%; }

.piece.lifted { opacity: 0.25; }

.sq.danger .piece { filter: drop-shadow(0 0 5px rgba(196, 73, 58, 0.95)); }

.sq.dest::after, .sq.capture::after, .sq.kingtake::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.sq.dest::after {
  width: 26%;
  height: 26%;
  background: rgba(36, 24, 16, 0.38);
}

.sq.dark.dest::after { background: rgba(243, 230, 208, 0.72); }

.sq.capture::after, .sq.kingtake::after {
  width: 78%;
  height: 78%;
  box-shadow: inset 0 0 0 4px rgba(36, 24, 16, 0.55);
}

.sq.dark.capture::after { box-shadow: inset 0 0 0 4px rgba(243, 230, 208, 0.8); }

.sq.kingtake::after, .sq.dark.kingtake::after {
  box-shadow: inset 0 0 0 4px var(--danger);
}

.sq.movable .piece { transform: translateY(-3px); }

.table-note {
  margin: 14px 0 0;
  text-align: center;
  color: rgba(243, 230, 208, 0.72);
  font-size: 0.92rem;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 24px;
  padding: 18px 18px 14px;
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 100%;
}

.players { display: grid; gap: 8px; }

.player {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid transparent;
}

.player.active {
  border-color: rgba(226, 192, 122, 0.4);
  background: rgba(226, 192, 122, 0.08);
}

.player h2 { margin: 0; font-size: 1rem; font-weight: 600; }

.swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.swatch-w { background: #f4efe4; }
.swatch-b { background: #1a1613; box-shadow: inset 0 0 0 1px #c8a36a; }

.caps { display: flex; flex-wrap: wrap; min-height: 1.1rem; gap: 1px; }
.caps span { width: 18px; height: 18px; display: block; }
.caps .piece-svg { filter: none; }

.status {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.55rem;
  font-weight: 560;
  letter-spacing: -0.02em;
}

.dice {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-height: 108px;
}

.die-col {
  flex: 1;
  display: grid;
  justify-items: center;
  gap: 8px;
}

.die-scene { position: relative; width: 72px; height: 72px; perspective: 480px; }

.flat {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(155deg, #fffaf3, #ead7b6);
  box-shadow: inset 0 0 0 1px rgba(120, 84, 32, 0.28);
}

.flat[hidden] { display: none; }

.cube {
  width: 72px;
  height: 72px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-18deg) rotateY(28deg);
}

.face {
  position: absolute;
  left: 0;
  top: 0;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(155deg, #fffaf3, #ead7b6);
  box-shadow: inset 0 0 0 1px rgba(120, 84, 32, 0.28);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.face.front  { transform: rotateY(0deg) translateZ(36px); }
.face.back   { transform: rotateY(180deg) translateZ(36px); }
.face.right  { transform: rotateY(90deg) translateZ(36px); }
.face.left   { transform: rotateY(-90deg) translateZ(36px); }
.face.top    { transform: rotateX(90deg) translateZ(36px); }
.face.bottom { transform: rotateX(-90deg) translateZ(36px); }

.pips {
  width: 54px;
  height: 54px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

.pips i {
  width: 9px;
  height: 9px;
  margin: auto;
  border-radius: 50%;
  background: #2a2118;
  opacity: 0;
}

.pips[data-pips="1"] i:nth-child(5),
.pips[data-pips="2"] i:nth-child(1),
.pips[data-pips="2"] i:nth-child(9),
.pips[data-pips="3"] i:nth-child(1),
.pips[data-pips="3"] i:nth-child(5),
.pips[data-pips="3"] i:nth-child(9),
.pips[data-pips="4"] i:nth-child(1),
.pips[data-pips="4"] i:nth-child(3),
.pips[data-pips="4"] i:nth-child(7),
.pips[data-pips="4"] i:nth-child(9),
.pips[data-pips="5"] i:nth-child(1),
.pips[data-pips="5"] i:nth-child(3),
.pips[data-pips="5"] i:nth-child(5),
.pips[data-pips="5"] i:nth-child(7),
.pips[data-pips="5"] i:nth-child(9),
.pips[data-pips="6"] i:nth-child(1),
.pips[data-pips="6"] i:nth-child(3),
.pips[data-pips="6"] i:nth-child(4),
.pips[data-pips="6"] i:nth-child(6),
.pips[data-pips="6"] i:nth-child(7),
.pips[data-pips="6"] i:nth-child(9) { opacity: 1; }

.die-name {
  font-size: 0.82rem;
  color: var(--muted);
  min-height: 1.1em;
}

.die-col.spent, .die-col.idle { opacity: 0.38; }
.die-col.spent .die-name { text-decoration: line-through; }

.legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px 10px;
  margin: 0;
  color: var(--dim);
  font-size: 0.78rem;
}

.hint, .log-empty, .log-note {
  margin: 0;
  color: var(--dim);
  font-size: 0.84rem;
  line-height: 1.4;
}

.hint { color: var(--muted); min-height: 2.6em; }

.roll {
  border: 0;
  border-radius: 999px;
  padding: 13px 18px;
  background: linear-gradient(#f3d7a0, #d7ae62);
  color: #2a1d10;
  font-weight: 600;
  box-shadow: 0 8px 18px rgba(184, 136, 62, 0.22);
}

.roll:hover:not(:disabled) { filter: brightness(1.04); }
.roll:disabled { opacity: 0.42; cursor: default; box-shadow: none; filter: none; }
.roll:focus-visible, .text-btn:focus-visible, select:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

.log-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.log-head h2 { margin: 0; }

.check {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
}

.log {
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: 14px;
  min-height: 140px;
  max-height: 240px;
  overflow: auto;
  padding: 10px 12px;
}

.log article + article { border-top: 1px solid rgba(36, 28, 22, 0.08); margin-top: 8px; padding-top: 8px; }
.log h3 { margin: 0; font-size: 0.92rem; }
.log-dice, .log-moves, .log-note { margin: 2px 0 0; }
.log-dice { color: #7a6552; font-size: 0.78rem; }
.log-moves { font-variant-numeric: tabular-nums; }
.log-note { color: #7a6552; font-size: 0.78rem; }
.log-empty { color: #7a6552; }

.row-actions { justify-content: space-between; }

.veil {
  position: fixed;
  inset: 0;
  background: rgba(12, 9, 7, 0.62);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 20;
}

.veil[hidden], .promo[hidden], .field[hidden], .check[hidden], .online-box[hidden], .room-banner[hidden], .open-games[hidden], .account-form[hidden], .account-logged[hidden], .player-elo[hidden], .draw-banner[hidden], #draw-btn[hidden] { display: none; }

.online-box {
  display: grid;
  gap: 8px;
}

.account-form, .account-logged {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.account-form input {
  width: 7.4rem;
  background: #1a1512;
  border: 1px solid var(--panel-line);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
  font-size: 16px;
}

.account-logged {
  justify-content: space-between;
  margin: 0;
  color: var(--brass);
  font-weight: 600;
}

.player-elo {
  margin: 0;
  color: var(--brass);
  font-size: 0.85rem;
  font-weight: 600;
}

.draw-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0;
  color: var(--brass);
  font-weight: 600;
}

.online-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.online-controls input {
  width: 6.2rem;
  background: #1a1512;
  border: 1px solid var(--panel-line);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.room-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--brass);
  font-weight: 600;
}

.open-games { display: grid; gap: 6px; }

.open-label {
  margin: 0;
  color: var(--dim);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.open-list {
  display: grid;
  gap: 6px;
  max-height: 168px;
  overflow: auto;
}

.open-empty {
  margin: 0;
  color: var(--dim);
  font-size: 0.92rem;
}

.open-game {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: #1a1512;
  border: 1px solid var(--panel-line);
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--ink);
}

.open-game small {
  color: var(--brass);
  letter-spacing: 0.14em;
  font-weight: 600;
}

.open-game:hover, .open-game:focus-visible { border-color: rgba(226, 192, 122, 0.45); }

.card {
  width: min(440px, 100%);
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: 22px;
  padding: 26px 26px 20px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

.card h2 {
  margin: 0 0 8px;
  font-family: "Fraunces", Georgia, serif;
  font-size: 2rem;
  font-weight: 560;
  letter-spacing: -0.03em;
}

.card p { line-height: 1.45; }

.card-rules { width: min(640px, 100%); max-height: min(86vh, 820px); overflow: auto; }

.rules-body h3 {
  margin: 16px 0 4px;
  font-size: 1rem;
}

.card-actions { margin-top: 8px; justify-content: flex-end; }
.card-actions .roll { min-width: 160px; }
.card .text-btn {
  color: var(--paper-ink);
  border-color: rgba(36, 28, 22, 0.18);
}
.card .text-btn:hover, .card .text-btn:focus-visible {
  color: var(--paper-ink);
  border-color: var(--brass-deep);
}

.promo {
  position: fixed;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  z-index: 15;
  display: flex;
  gap: 8px;
  padding: 12px;
  background: var(--paper);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}

.promo p {
  position: absolute;
  top: -28px;
  left: 0;
  margin: 0;
  color: white;
  font-size: 0.9rem;
}

.promo button {
  width: 64px;
  height: 64px;
  border: 1px solid rgba(36, 28, 22, 0.12);
  border-radius: 12px;
  background: #efe4d2;
  padding: 6px;
}

.promo button:hover, .promo button:focus-visible { border-color: var(--brass-deep); }

.ghost {
  position: fixed;
  pointer-events: none;
  z-index: 12;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.35));
}

@media (max-width: 1080px) {
  .top { flex-wrap: wrap; align-items: flex-start; }
  main { grid-template-columns: 1fr; justify-items: center; }
  .table, .panel { width: min(100%, calc(var(--board) + 84px)); }
  .panel { min-height: 0; }
  .log { max-height: 180px; }
}

@media (max-width: 680px) {
  .app {
    width: calc(100% - 12px);
    padding: 10px 0 calc(16px + env(safe-area-inset-bottom));
  }
  .top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 10px;
  }
  .mark { display: none; }
  .brand h1 { font-size: 1.55rem; }
  .setup, .top-actions { width: 100%; gap: 8px; }
  .field { flex: 1 1 0; gap: 4px; }
  .field span { letter-spacing: 0.08em; }
  select { width: 100%; min-width: 0; padding: 8px; font-size: 16px; }
  .top-actions .text-btn { flex: 1; padding: 8px 10px; }
  .table, .panel { width: 100%; }
  .table { padding: 8px 8px 8px; border-radius: 18px; }
  .board-frame { width: 100%; padding: 8px; }
  .board {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
  .panel { gap: 10px; padding: 12px; border-radius: 18px; }
  .players { grid-template-columns: 1fr 1fr; }
  .player { padding: 6px 8px; }
  .legend { display: none; }
  .table-note { display: none; }
  .status { font-size: 1.3rem; }
  .dice { min-height: 88px; }
  .roll, .text-btn, .card-actions .roll, .open-game, .account-form input { min-height: 48px; }
  .log { max-height: 120px; min-height: 64px; }
  .promo { max-width: calc(100% - 24px); }
  .promo button { width: 56px; height: 56px; }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 980px) {
  .app { width: calc(100% - 12px); padding: 6px 0 8px; }
  .mark { display: none; }
  .brand { flex: none; }
  .brand h1 { font-size: 1.25rem; white-space: nowrap; }
  .top {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
  }
  .setup, .top-actions { width: auto; }
  .setup { flex: 1 1 auto; flex-wrap: nowrap; min-width: 0; }
  .top-actions { flex: none; flex-wrap: nowrap; }
  .field { position: relative; display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; }
  .field span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  select { width: auto; min-width: 0; flex: 1; font-size: 16px; padding: 6px 8px; }
  .top-actions .text-btn { min-height: 40px; padding: 6px 10px; }
  main {
    grid-template-columns: 312px minmax(0, 1fr);
    align-items: start;
  }
  .table, .panel { width: auto; }
  .table { padding: 8px; border-radius: 16px; }
  .board-frame { width: 296px; padding: 8px; }
  .board { width: 280px; height: 280px; }
  .table-note { display: none; }
  .panel {
    min-height: 0;
    max-height: 296px;
    overflow: auto;
    padding: 10px;
    gap: 8px;
  }
  .players { grid-template-columns: 1fr 1fr; }
  .legend { display: none; }
  .dice { min-height: 80px; }
  .log { max-height: 72px; min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .cube, .piece { transition: none !important; }
}