:root {
  --page: #171f25;
  --page-deep: #11181e;
  --surface: #1d252d;
  --frame: #52606e;
  --frame-dark: #293641;
  --empty: #202a33;
  --empty-line: #8b9aaa;
  --paper: #f5f3ee;
  --paper-light: #fffefa;
  --ink: #080d12;
  --text: #f4f6f8;
  --muted: #bdc7d1;
  --you: #ff408e;
  --you-label: #ff75b0;
  --bot-a: #36ddf2;
  --bot-b: #ffe36a;
  --bot-c: #c79cfa;
  --focus: #ffe36a;
  --font-display: "Russo One", "Arial Black", "DejaVu Sans", sans-serif;
  --font-ui: "Rajdhani", "Arial Narrow", "DejaVu Sans Condensed", sans-serif;
  --cut-tile: 6px;
  --board-padding: 2px;
  color-scheme: dark;
}

@font-face {
  font-family: "Russo One";
  src: url("../docs/previews/mobile-ui/assets/fonts/RussoOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rajdhani";
  src: url("../docs/previews/mobile-ui/assets/fonts/Rajdhani-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-width: 320px; }
body {
  min-height: 100vh;
  background: linear-gradient(145deg, #1d262e 0%, #171f25 45%, #11181e 100%);
  color: var(--text);
  font-family: var(--font-ui);
  font-weight: 700;
}
button { font: inherit; }

.preview {
  position: relative;
  width: 100%;
  max-width: 430px;
  margin-inline: auto;
  padding: max(12px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
}
.preview > :not(.edge-mark) { position: relative; z-index: 1; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.edge-mark { display: none; }

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  margin-bottom: 12px;
  gap: 6px;
}
.brand {
  position: relative;
  flex: 0 0 145px;
  width: 145px;
  text-align: center;
  white-space: nowrap;
}
.brand::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  margin: 3px auto 0;
  background: var(--you);
}
.brand-main {
  font: 400 34px/36px var(--font-display);
  letter-spacing: .6px;
  color: var(--text);
}
.brand-o { position: relative; display: inline-block; }
.brand-o::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 5%;
  width: 2px;
  height: 90%;
  transform: rotate(45deg);
  background: var(--you);
  box-shadow: 2px 0 0 var(--page-deep), -2px 0 0 var(--page-deep);
}
.brand-sub {
  font: 700 12px/14px var(--font-ui);
  letter-spacing: 5px;
  padding-left: 5px;
}
.round {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
  font: italic 700 18px/24px var(--font-ui);
}
.round strong { color: var(--you); font: italic 700 25px/28px var(--font-ui); }
.round-slash { color: var(--you); }

.scores {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--frame);
  margin-bottom: 12px;
}
.score {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 46px;
  padding: 4px 2px;
  background: var(--surface);
  text-align: center;
}
.score + .score { border-left: 1px solid var(--frame-dark); }
.score-you { background: var(--surface); }
.score-a { --owner-color: var(--bot-a); }
.score-b { --owner-color: var(--bot-b); }
.score-c { --owner-color: var(--bot-c); }
.score-you { --owner-color: var(--you); }
.score-ribbon {
  position: absolute;
  left: 5px;
  top: 0;
  width: 16px;
  height: 9px;
  background: var(--owner-color);
  clip-path: polygon(35% 0, 100% 0, 65% 100%, 0 100%);
}
.score-crown {
  position: absolute;
  top: -7px;
  right: 12px;
  width: 14px;
  height: 10px;
  background: var(--owner-color);
  clip-path: polygon(0 20%, 25% 42%, 50% 0, 75% 42%, 100% 20%, 84% 100%, 16% 100%);
}
.score-name {
  font: 700 12px/14px var(--font-ui);
  letter-spacing: .6px;
  color: var(--owner-color);
  white-space: nowrap;
}
.score-you .score-name { color: var(--you-label); }
.score-value {
  font: 700 26px/27px var(--font-ui);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.turn-line {
  display: flex;
  align-items: center;
  min-height: 30px;
  margin-bottom: 8px;
  white-space: nowrap;
}
.turn-text {
  flex: 0 0 auto;
  color: var(--owner-color);
  font: italic 700 27px/30px var(--font-ui);
  letter-spacing: 1px;
}
.turn-slashes { display: flex; gap: 4px; align-items: center; margin-left: 12px; margin-right: 12px; }
.turn-slashes i { display: block; width: 3px; height: 18px; transform: skewX(-24deg); background: var(--owner-color); }
.turn-slashes i + i { background: var(--muted); }
.turn-rule { flex: 1 1 auto; min-width: 0; height: 1px; background: var(--muted); }

.arena {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-template-rows: 22px auto;
  width: 100%;
  margin-bottom: 16px;
}
.axis-top, .axis-left { display: grid; gap: 4px; }
.axis-top {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-inline: 5px;
}
.axis-left {
  grid-template-rows: repeat(4, minmax(0, 1fr));
  padding-block: 5px;
}
.axis-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  color: var(--ink);
  background: var(--owner-color);
  font: 700 13px/16px var(--font-ui);
}
.owner-you { --owner-color: var(--you); }
.owner-a { --owner-color: var(--bot-a); }
.owner-b { --owner-color: var(--bot-b); }
.owner-c { --owner-color: var(--bot-c); }
.axis-top .axis-tag { clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 100%, 0 100%); }
.axis-left .axis-tag { clip-path: polygon(100% 0, 100% 100%, 0 calc(100% - 10px), 0 10px); }
.board-frame { width: 100%; aspect-ratio: 1; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .22)); }
.board-shell, .board-bevel, .board { width: 100%; height: 100%; }
.board-shell {
  padding: 1px;
  background: var(--frame);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}
.board-bevel {
  padding: 2px;
  background: var(--frame-dark);
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
}
.board {
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: var(--board-padding);
  background: var(--page-deep);
}
.board-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; min-height: 0; }
.tile { position: relative; min-width: 0; min-height: 0; }
.placed { filter: drop-shadow(0 2px 0 #0b1117); }
.placed::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  clip-path: polygon(var(--cut-tile) 0, 100% 0, 100% calc(100% - var(--cut-tile)), calc(100% - var(--cut-tile)) 100%, 0 100%, 0 var(--cut-tile));
}
.card-face {
  position: absolute;
  inset: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fffefa 0%, #f5f3ee 100%);
  color: var(--ink);
  clip-path: polygon(var(--cut-tile) 0, 100% 0, 100% calc(100% - var(--cut-tile)), calc(100% - var(--cut-tile)) 100%, 0 100%, 0 var(--cut-tile));
  font: 400 40px/44px var(--font-display);
}
.card-face::before, .card-face::after, .hand-face::before, .hand-face::after, .remaining-card::before, .remaining-card::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--owner-color);
}
.card-face::before, .hand-face::before, .remaining-card::before { top: 0; left: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
.card-face::after, .hand-face::after, .remaining-card::after { right: 0; bottom: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.empty { background: var(--empty); }
.empty-face {
  position: absolute;
  inset: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--empty-line);
  clip-path: polygon(var(--cut-tile) 0, calc(100% - var(--cut-tile)) 0, 100% var(--cut-tile), 100% calc(100% - var(--cut-tile)), calc(100% - var(--cut-tile)) 100%, var(--cut-tile) 100%, 0 calc(100% - var(--cut-tile)), 0 var(--cut-tile));
}
.empty-face::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--empty);
  box-shadow: inset 0 0 0 2px var(--frame-dark);
  clip-path: polygon(var(--cut-tile) 0, calc(100% - var(--cut-tile)) 0, 100% var(--cut-tile), 100% calc(100% - var(--cut-tile)), calc(100% - var(--cut-tile)) 100%, var(--cut-tile) 100%, 0 calc(100% - var(--cut-tile)), 0 var(--cut-tile));
}
.plus { position: relative; z-index: 1; width: 14px; height: 14px; }
.plus::before, .plus::after { content: ""; position: absolute; background: var(--empty-line); }
.plus::before { width: 14px; height: 1px; left: 0; top: calc(50% - .5px); }
.plus::after { width: 1px; height: 14px; top: 0; left: calc(50% - .5px); }

.actions {
  display: grid;
  grid-template-columns: 64px 84px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 80px;
  margin-bottom: 16px;
}
.hand-card { width: 64px; height: 80px; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .22)); }
.hand-shell, .hand-inner, .hand-face { width: 100%; height: 100%; }
.hand-shell {
  padding: 2px;
  background: var(--frame);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.hand-inner {
  padding: 2px;
  background: var(--ink);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.hand-face {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fffefa 0%, #f5f3ee 100%);
  color: var(--ink);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  font: 400 52px/58px var(--font-display);
}
.hand-face::before, .hand-face::after { width: 10px; height: 10px; }
.action-hint {
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  min-height: 60px;
  padding-left: 8px;
  border-left: 1px solid var(--frame);
  white-space: nowrap;
  font: italic 700 15px/18px var(--font-ui);
  letter-spacing: .4px;
}
.action-hint::after { content: ""; display: block; width: 36px; height: 2px; margin-top: 5px; background: var(--you); }
.skill-wrap { display: flex; min-width: 0; flex-direction: column; align-items: stretch; }
.skill-button {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  padding: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  white-space: nowrap;
  cursor: default;
  font: italic 700 17px/20px var(--font-ui);
  letter-spacing: .5px;
}
.skill-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--you);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.skill-button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.bolt { display: block; flex: 0 0 12px; width: 12px; height: 20px; background: var(--ink); clip-path: polygon(58% 0, 0 58%, 42% 58%, 28% 100%, 100% 34%, 58% 34%); }
.skill-limit { display: block; margin-top: 5px; color: var(--muted); text-align: center; white-space: nowrap; font: 700 12px/16px var(--font-ui); letter-spacing: 1px; }

.remaining {
  min-height: 76px;
  padding: 1px;
  background: var(--frame);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.remaining-inner {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 74px;
  padding: 8px;
  background: var(--surface);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.remaining-heading {
  position: relative;
  font: italic 700 13px/18px var(--font-ui);
  white-space: nowrap;
}
.remaining-heading::after { content: ""; position: absolute; right: -5px; top: 50%; width: 1px; height: 32px; transform: translateY(-50%) skewX(-18deg); background: var(--muted); }
.remaining-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; min-width: 0; }
.remaining-item { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.remaining-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 34px;
  background: linear-gradient(135deg, #fffefa 0%, #f5f3ee 100%);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
  color: var(--ink);
  font: 400 20px/24px var(--font-display);
}
.remaining-card::before, .remaining-card::after { width: 6px; height: 6px; }
.remaining-count { margin-top: 2px; color: var(--text); font: 700 15px/18px var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (min-width: 360px) {
  :root { --cut-tile: 7px; --board-padding: 3px; }
  .preview { padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
  .edge-mark { position: absolute; display: block; width: 8px; height: 36px; overflow: hidden; pointer-events: none; }
  .edge-mark::before, .edge-mark::after { content: ""; position: absolute; top: 0; width: 2px; height: 36px; transform: rotate(45deg); }
  .edge-mark::before { left: 0; background: var(--you); }
  .edge-mark::after { left: 6px; background: var(--frame-dark); }
  .edge-mark-top { top: 12px; right: 0; }
  .edge-mark-side { top: 210px; left: 0; }
  .masthead { min-height: 52px; }
  .brand { flex-basis: 168px; width: 168px; }
  .brand-main { font-size: 39px; line-height: 40px; }
  .brand-sub { font-size: 14px; line-height: 16px; }
  .round { font-size: 20px; line-height: 28px; }
  .round strong { font-size: 28px; line-height: 30px; }
  .score { min-height: 48px; }
  .score-ribbon { width: 22px; height: 10px; }
  .score-name { font-size: 13px; line-height: 15px; }
  .score-value { font-size: 30px; line-height: 30px; }
  .turn-line { min-height: 32px; }
  .turn-text { font-size: 32px; line-height: 34px; }
  .arena { grid-template-columns: 26px minmax(0, 1fr); grid-template-rows: 24px auto; }
  .axis-top { padding-inline: 6px; }
  .axis-left { padding-block: 6px; }
  .axis-tag { font-size: 15px; line-height: 18px; }
  .card-face { font-size: 50px; line-height: 54px; }
  .card-face::before, .card-face::after { width: 12px; height: 12px; }
  .plus, .plus::before { width: 18px; }
  .plus, .plus::after { height: 18px; }
  .actions { grid-template-columns: 80px 92px minmax(0, 1fr); gap: 12px; min-height: 96px; }
  .hand-card { width: 80px; height: 96px; }
  .hand-face { font-size: 64px; line-height: 72px; }
  .action-hint { font-size: 17px; line-height: 20px; }
  .skill-button { font-size: 20px; line-height: 24px; }
  .remaining { min-height: 78px; }
  .remaining-inner { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; min-height: 76px; padding: 10px; }
  .remaining-heading { font-size: 15px; line-height: 20px; }
  .remaining-list { gap: 6px; }
  .remaining-card { width: 34px; height: 36px; font-size: 24px; line-height: 28px; }
  .remaining-count { font-size: 16px; line-height: 20px; }
}

@media (min-width: 768px) {
  .preview { padding-top: max(24px, env(safe-area-inset-top)); }
}

/* Playable states follow the static preview geometry. */
.score.current { box-shadow: inset 0 0 0 2px var(--owner-color); }
.score-you.current { background: linear-gradient(120deg, #48243a, #24232d); }
.score-a.current { background: linear-gradient(120deg, #173e47, #1d252d); }
.score-b.current { background: linear-gradient(120deg, #3a3525, #1d252d); }
.score-c.current { background: linear-gradient(120deg, #322b44, #1d252d); }
.turn-line.final-line { --owner-color: var(--muted); }
.turn-text.final-title { color: var(--text); }
.tile-button {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: default;
  appearance: none;
}
.tile-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; z-index: 2; }
.tile.legal .tile-button { cursor: pointer; }
.tile.legal .plus::before, .tile.legal .plus::after { background: var(--you); }
.tile.legal .tile-button:hover .empty-face::before { background: #293641; }
.tile.legal .tile-button:active .empty-face::before { background: #372436; box-shadow: inset 0 0 0 2px var(--you); }
.tile.last-placed { --placed-color: var(--you); }
.tile.last-placed.placed-by-a { --placed-color: var(--bot-a); }
.tile.last-placed.placed-by-b { --placed-color: var(--bot-b); }
.tile.last-placed.placed-by-c { --placed-color: var(--bot-c); }
.tile.last-placed .card-face { box-shadow: inset 0 0 0 2px var(--placed-color); }
.tile.just-placed .card-face { animation: placed-card 160ms ease-out both; }
.hand-face.hidden-card {
  background: var(--surface);
  color: var(--text);
  font-size: 32px;
  line-height: 40px;
}
.hand-face.drawn { animation: drawn-card 160ms ease-out both; }
.skill-button { color: var(--muted); }
.skill-button::before { background: var(--frame); }
.skill-button::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: var(--frame-dark);
  clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
}
.skill-button .bolt { background: var(--muted); }
.skill-button:disabled { opacity: 1; }
.remaining-count.empty-count { color: var(--muted); }

.panel {
  padding: 1px;
  background: var(--frame);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.panel-inner {
  min-height: 100%;
  padding: 14px;
  background: var(--surface);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}
.start-panel { margin-top: 24px; }
.panel h1 { margin: 0; font: 400 20px/26px var(--font-display); }
.start-panel h1 { margin-bottom: 16px; }
.panel p { margin: 0; font: 700 16px/22px var(--font-ui); }
.start-panel p + p { margin-top: 10px; }
.panel .panel-note { font-size: 14px; line-height: 20px; color: var(--muted); }
.primary-button {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 48px;
  padding: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: italic 700 20px/24px var(--font-ui);
  cursor: pointer;
}
.primary-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--you);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.primary-button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.primary-button:disabled { opacity: 1; cursor: default; }
.start-panel .primary-button { margin-top: 20px; }
.result-panel { margin-bottom: 16px; }
.result-panel .panel-kicker { display: block; color: var(--muted); font: 700 12px/16px var(--font-ui); letter-spacing: 1px; }
.result-panel h1 { margin-top: 6px; font-size: 24px; line-height: 30px; }
.result-panel h1.owner-you { color: var(--you); }
.result-panel h1.owner-a { color: var(--bot-a); }
.result-panel h1.owner-b { color: var(--bot-b); }
.result-panel h1.owner-c { color: var(--bot-c); }
.result-panel .winner-names { margin-top: 8px; }
.winner-names span { display: block; }
.result-panel .result-points { margin-top: 6px; color: var(--muted); }
.result-panel .primary-button { margin-top: 16px; }

@keyframes drawn-card {
  from { opacity: .4; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes placed-card {
  from { opacity: .65; transform: scale(.96); }
  to { opacity: 1; transform: scale(1); }
}
@media (min-width: 360px) {
  .panel-inner { padding: 16px; }
  .hand-face.hidden-card { font-size: 40px; line-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .hand-face.drawn, .tile.just-placed .card-face { animation: none; }
}