:root {
  --bg: #09272c;
  --panel: #12383c;
  --card: #184347;
  --mint: #b9f279;
  --gold: #e5b667;
  --text: #fff4da;
  --muted: #9fb5b1;
  --line: #ffffff12;
  --p0: #ef7766;
  --p1: #54c6b0;
  --p2: #efc25c;
  --p3: #9295ed;
  font-family: Tahoma, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 70% 10%, #18505488, transparent 60%), var(--bg);
}
button,
input,
select {
  font: inherit;
}
button {
  cursor: pointer;
  color: inherit;
  border: 0;
  background: none;
  touch-action: manipulation;
}
button:disabled {
  opacity: 0.45;
  cursor: default;
}
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid var(--mint);
  outline-offset: 4px;
}
h1,
h2,
h3,
p {
  margin: 0;
}
p {
  line-height: 1.9;
  color: var(--muted);
}
button,
input {
  min-height: 44px;
}
input,
select {
  width: 100%;
  padding: 14px;
  background: #09272c;
  color: var(--text);
  border: 1px solid #ffffff26;
  border-radius: 12px;
}
label {
  display: grid;
  gap: 8px;
  text-align: start;
  font-size: 13px;
  color: var(--muted);
}
.shell {
  max-width: 1400px;
  margin: auto;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  min-height: 100vh;
}
.sidebar {
  border-inline-end: 1px solid var(--line);
  padding: 36px 22px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  background: #06222688;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-mark {
  background: var(--mint);
  color: #12383c;
  border-radius: 16px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  font-size: 37px;
  box-shadow: 0 4px 0 #648a43;
  transform: rotate(-8deg);
}
.logo strong {
  font-size: 25px;
  letter-spacing: -1px;
}
.logo small {
  display: block;
  font-size: 8px;
  letter-spacing: 3px;
  color: var(--muted);
  margin-top: 6px;
}
.nav {
  display: grid;
  gap: 10px;
}
.nav button {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: start;
  padding: 13px 16px;
  color: var(--muted);
  border-radius: 14px;
}
.nav button.active {
  color: var(--mint);
  background: #b9f27912;
}
.nav svg {
  width: 22px;
  height: 22px;
}
.side-bottom {
  margin-top: auto;
}
.side-note {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  font-size: 11px;
  line-height: 1.9;
  color: var(--muted);
}
.main {
  padding: 28px 40px 36px;
  min-width: 0;
}
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 35px;
}
.identity {
  display: flex;
  align-items: center;
  gap: 12px;
}
.avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(140deg, #e6c395, #967044);
  color: #173c3f;
  font-size: 24px;
  border: 3px solid #ffffff22;
  box-shadow: 0 3px 10px #0002;
  overflow: hidden;
}
.avatar-art {
  display: block;
  width: 100%;
  height: 100%;
  flex: none;
  object-fit: cover;
  object-position: center 22%;
}
.identity strong {
  font-size: 14px;
}
.identity small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 6px;
}
.wallet {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wallet > div {
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 9px 15px;
  font-weight: bold;
  font-size: 13px;
}
.coin {
  color: var(--gold);
  font-size: 21px;
}
.gem {
  color: #8cd6df;
  font-size: 20px;
}
.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff08;
  display: grid;
  place-items: center;
}
.icon-btn svg {
  width: 20px;
}
.eyebrow {
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--mint);
  margin-bottom: 16px;
}
.hero {
  overflow: hidden;
  position: relative;
  min-height: 310px;
  border-radius: 28px;
  background: linear-gradient(120deg, #266063, #184a4a 65%, #1b4c3c);
  border: 1px solid #ffffff16;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  padding: 38px;
  margin-bottom: 28px;
}
.hero:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 35px,
    #ffffff03 36px,
    #ffffff03 37px
  );
  pointer-events: none;
}
.hero-copy {
  z-index: 1;
}
.hero h1 {
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.5;
  letter-spacing: -1.4px;
  margin-bottom: 8px;
}
.hero p {
  font-size: 13px;
  max-width: 300px;
  color: #c4d8cc;
}
.primary,
.secondary {
  padding: 13px 24px;
  border-radius: 14px;
  font-weight: bold;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  transition:
    transform 0.15s,
    filter 0.15s;
}
.primary {
  background: var(--mint);
  color: #153329;
  box-shadow: 0 4px 0 #749b49;
}
.primary:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
}
.primary:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #749b49;
}
.secondary {
  border: 1px solid #ffffff25;
  background: #ffffff06;
}
.hero .primary {
  margin-top: 24px;
  min-width: 190px;
}
.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint);
  display: inline-block;
  margin-inline-end: 5px;
  box-shadow: 0 0 9px #b9f27966;
}
.under-cta {
  font-size: 10px;
  color: #afc9b6;
  margin-top: 14px;
}
.hero-art {
  position: relative;
  height: 270px;
  perspective: 700px;
}
.mini-board {
  position: absolute;
  width: 250px;
  height: 250px;
  left: 50%;
  top: 15px;
  transform: translateX(-50%) rotateX(24deg) rotateZ(-23deg);
  filter: drop-shadow(0 22px 12px #00191f88);
  animation: float 5s ease-in-out infinite;
}
.mini-board svg {
  width: 100%;
  height: 100%;
}
.floating-die {
  position: absolute;
  bottom: 5px;
  right: 10px;
  width: 62px;
  height: 62px;
  border-radius: 16px;
  background: #fff4da;
  color: #163c3d;
  box-shadow:
    5px 9px 0 #d0c3a6,
    10px 17px 20px #0003;
  transform: rotate(16deg);
  display: grid;
  place-items: center;
  font-size: 45px;
}
.spark {
  position: absolute;
  color: #e8d9a1;
  font-size: 30px;
  top: 15px;
  right: 12%;
  animation: twinkle 3s infinite;
}
.spark.two {
  top: 190px;
  right: 83%;
  font-size: 20px;
  animation-delay: 1s;
}
.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 26px 0 16px;
}
.section-title h2 {
  font-size: 19px;
}
.section-title span {
  font-size: 11px;
  color: var(--muted);
}
.games {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
}
.game-card {
  display: flex;
  align-items: center;
  gap: 18px;
  border-radius: 22px;
  background: linear-gradient(130deg, #214b49, #13393d);
  border: 1px solid var(--line);
  padding: 20px;
  text-align: start;
  position: relative;
  overflow: hidden;
}
.game-card:hover {
  border-color: #b9f27966;
}
.game-card h3 {
  font-size: 23px;
  margin-bottom: 7px;
}
.game-card p {
  font-size: 11px;
}
.game-art {
  width: 110px;
  height: 100px;
  flex-shrink: 0;
}
.game-art svg {
  width: 100%;
  height: 100%;
}
.arrow {
  margin-inline-start: auto;
  color: var(--mint);
  font-size: 25px;
}
.badge {
  display: inline-block;
  background: #e5b66716;
  color: #e5b667;
  font-size: 10px;
  border-radius: 20px;
  padding: 5px 10px;
  margin-bottom: 10px;
}
.muted-card {
  opacity: 0.7;
}
.extras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 22px;
}
.extra {
  padding: 22px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: linear-gradient(120deg, #164044, #13373b);
  display: flex;
  align-items: center;
  gap: 18px;
}
.extra-symbol {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 37px;
  color: var(--gold);
  background: #e5b6670b;
  border-radius: 16px;
  transform: rotate(-6deg);
}
.extra h3 {
  font-size: 14px;
  margin-bottom: 4px;
}
.extra p {
  font-size: 11px;
}
.text-button {
  padding: 10px 0 0;
  color: var(--mint);
  font-size: 12px;
}
.footer-note {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #809e99;
  margin-top: 28px;
}
.boot {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
.boot h1 {
  font-size: 40px;
}
.loadline {
  width: 90px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--mint), transparent);
  animation: twinkle 1s infinite;
}
.auth {
  max-width: 1080px;
  margin: auto;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
  padding: 40px;
}
.auth .hero-art {
  height: 380px;
}
.auth .mini-board {
  width: 340px;
  height: 340px;
}
.auth h1 {
  font-size: 38px;
  margin: 25px 0 12px;
}
.auth-form {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}
.auth .primary,
.full {
  width: 100%;
}
.auth small {
  color: var(--muted);
  font-size: 10px;
}
.mobile-brand {
  display: none;
}
dialog {
  background: var(--panel);
  color: var(--text);
  border: 1px solid #ffffff22;
  border-radius: 26px;
  max-width: 440px;
  width: calc(100% - 32px);
  padding: 26px;
  box-shadow: 0 35px 100px #0009;
}
dialog::backdrop {
  background: #02181bc9;
  backdrop-filter: blur(8px);
}
.dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.dialog-head h2 {
  font-size: 21px;
}
.dialog-body {
  display: grid;
  gap: 16px;
}
.dialog-body p {
  font-size: 13px;
}
.choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.choices button {
  border: 1px solid #ffffff25;
  border-radius: 14px;
  padding: 16px;
  background: #ffffff06;
}
.choices button.chosen {
  border-color: var(--mint);
  background: #b9f27912;
  color: var(--mint);
}
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.toggle {
  width: 48px;
  height: 28px;
  min-height: 28px;
  border-radius: 20px;
  background: #ffffff22;
  padding: 4px;
  display: flex;
  justify-content: start;
}
.toggle.on {
  background: var(--mint);
  justify-content: end;
}
.toggle:after {
  content: "";
  height: 20px;
  width: 20px;
  background: white;
  border-radius: 50%;
}
#toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translate(-50%, 20px);
  background: #fff4da;
  color: #143b3e;
  padding: 13px 22px;
  border-radius: 14px;
  z-index: 10;
  opacity: 0;
  transition: 0.25s;
  pointer-events: none;
  max-width: 90%;
  font-size: 13px;
  box-shadow: 0 8px 30px #0004;
}
#toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.page-heading {
  margin: 12px 0 25px;
  font-size: 30px;
}
.empty {
  padding: 55px 24px;
  text-align: center;
  background: #ffffff04;
  border-radius: 24px;
  color: var(--muted);
  line-height: 2;
}
.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.shop-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel);
  text-align: center;
}
.shop-preview {
  height: 150px;
  margin-bottom: 20px;
}
.shop-preview svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 10px 5px #0003);
}
.shop-card h3 {
  margin: 15px 0;
}
.shop-card button {
  margin-top: 18px;
  width: 100%;
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 20px 0;
}
.stat {
  background: #ffffff05;
  border: 1px solid var(--line);
  border-radius: 16px;
  text-align: center;
  padding: 20px 10px;
}
.stat strong {
  display: block;
  font-size: 26px;
  color: var(--mint);
  margin-bottom: 9px;
}
.stat small {
  color: var(--muted);
}
.list-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}
.list-row strong {
  flex: 1;
}
.list-row small {
  color: var(--muted);
}
.search-page {
  text-align: center;
  max-width: 600px;
  margin: 35px auto;
}
.search-page h1 {
  font-size: 29px;
  margin: 24px 0 14px;
}
.search-orbit {
  width: 160px;
  height: 160px;
  border: 1px solid #b9f27933;
  border-radius: 50%;
  margin: 30px auto;
  position: relative;
  display: grid;
  place-items: center;
}
.search-orbit:before {
  content: "";
  position: absolute;
  inset: -15px;
  border: 1px dashed #b9f27944;
  border-radius: 50%;
  animation: spin 20s linear infinite;
}
.search-orbit .avatar {
  width: 80px;
  height: 80px;
  font-size: 38px;
}
.search-slots {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 30px;
}
.search-slot {
  border: 1px dashed #ffffff33;
  border-radius: 18px;
  padding: 16px;
  font-size: 12px;
  min-width: 100px;
}
.search-slot.filled {
  border-color: var(--mint);
  color: var(--mint);
}
.elapsed {
  font-size: 30px;
  margin: 20px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.room-code {
  font-size: 36px;
  letter-spacing: 7px;
  color: var(--mint);
  margin: 26px;
  direction: ltr;
}
.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 24px;
  align-items: center;
}
.board-frame {
  padding: 15px;
  background: linear-gradient(145deg, #39706c, #143c3b);
  border: 1px solid #b7d2b344;
  border-radius: 28px;
  box-shadow:
    0 16px 40px #0004,
    inset 0 1px 0 #ffffff22;
}
.board {
  width: 100%;
  aspect-ratio: 1;
  display: block;
  overflow: visible;
}
.game-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}
.game-top h2 {
  font-size: 24px;
}
.game-top small {
  font-size: 10px;
  color: var(--muted);
}
.players {
  display: grid;
  gap: 12px;
}
.player {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #ffffff04;
}
.player.active {
  border-color: var(--color);
  background: color-mix(in srgb, var(--color) 9%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--color) 9%, transparent);
}
.player .avatar {
  background: var(--color);
  height: 38px;
  width: 38px;
  font-size: 18px;
}
.player strong {
  display: block;
  font-size: 12px;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player small {
  font-size: 10px;
  color: var(--muted);
  display: block;
  margin-top: 5px;
}
.dice-area {
  text-align: center;
  margin-top: 25px;
}
.dice {
  width: 85px;
  height: 85px;
  min-height: 85px;
  background: linear-gradient(145deg, #fffdf3, #ecddbc);
  border-radius: 22px;
  box-shadow:
    0 7px 0 #bfae88,
    0 15px 25px #0004;
  color: #163c3d;
  margin: 14px auto 25px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 17px;
  gap: 6px;
  transform: rotate(-5deg);
}
.pip {
  border-radius: 50%;
  background: #193d3c;
  box-shadow: inset 0 1px 3px #0007;
}
.dice.rolling {
  animation: roll 0.5s ease-in-out;
}
.dice.roll-source-pressed {
  animation: source-dice-press .22s ease-out both;
  transform-origin: 50% 60%;
}
.dice:disabled {
  opacity: 0.85;
}
.game-status {
  font-size: 12px;
  color: var(--mint);
  min-height: 45px;
  line-height: 1.8;
}
.timer-bar {
  height: 3px;
  background: #ffffff15;
  border-radius: 10px;
  margin: 15px 0;
  overflow: hidden;
}
.timer-bar span {
  display: block;
  height: 100%;
  background: var(--mint);
  transition: width 1s linear;
}
.game-tools {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}
.piece {
  cursor: pointer;
  outline: none;
  transition: filter 0.2s;
}
.piece.legal {
  filter: drop-shadow(0 0 4px #fff);
}
.piece.legal .selection {
  animation: twinkle 1s infinite;
}
.piece:focus-visible .selection {
  stroke: white;
  stroke-width: 2;
}
.result {
  text-align: center;
  padding: 25px 0;
}
.result .trophy {
  font-size: 70px;
  color: var(--gold);
  margin-bottom: 20px;
}
.result h1 {
  font-size: 30px;
  margin-bottom: 20px;
}
.confetti {
  position: fixed;
  top: -20px;
  pointer-events: none;
  z-index: 20;
  animation: fall 2.2s ease-in forwards;
  width: 8px;
  height: 14px;
}
.banner {
  padding: 12px;
  border-radius: 12px;
  background: #e5b66722;
  color: var(--gold);
  font-size: 12px;
  margin-bottom: 12px;
}
.reconnect:empty {
  display: none;
}
.reward-icon {
  font-size: 70px;
  text-align: center;
  color: var(--gold);
}
.btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.profile-id {
  font-size: 12px;
  overflow-wrap: anywhere;
  color: var(--muted);
  direction: ltr;
}
.fine {
  font-size: 11px;
  color: var(--muted);
}
@keyframes float {
  50% {
    transform: translateX(-50%) translateY(-10px) rotateX(24deg) rotateZ(-20deg);
  }
}
@keyframes twinkle {
  50% {
    opacity: 0.35;
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes roll {
  25% {
    transform: rotate(35deg) translateY(-12px);
  }
  65% {
    transform: rotate(-25deg) translateY(-5px);
  }
}
@keyframes source-dice-press {
  0% { transform: rotate(-5deg) translateY(0) scale(1); }
  55% { transform: rotate(-3deg) translateY(3px) scale(.94); }
  100% { transform: rotate(-5deg) translateY(0) scale(1); }
}
@keyframes fall {
  to {
    transform: translateY(95vh) rotate(650deg);
    opacity: 0;
  }
}
@media (min-width: 1400px) {
  .main {
    padding: 36px 54px;
  }
  .hero {
    min-height: 350px;
  }
  .hero-art {
    height: 300px;
  }
  .mini-board {
    width: 280px;
    height: 280px;
  }
}
@media (max-width: 1000px) {
  .shell {
    grid-template-columns: 90px 1fr;
  }
  .sidebar {
    padding: 28px 14px;
  }
  .logo > div:last-child,
  .nav button span,
  .side-note {
    display: none;
  }
  .nav button {
    justify-content: center;
    padding: 14px;
  }
  .main {
    padding: 24px;
  }
  .hero {
    padding: 28px;
  }
  .hero h1 {
    font-size: 30px;
  }
  .mini-board {
    width: 220px;
    height: 220px;
  }
  .game-art {
    width: 85px;
  }
  .game-layout {
    grid-template-columns: 1fr 180px;
  }
  .shop-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 700px) {
  .shell {
    display: block;
  }
  .sidebar {
    position: fixed;
    bottom: 0;
    inset-inline: 0;
    height: calc(70px + env(safe-area-inset-bottom));
    padding: 5px 14px calc(5px + env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid var(--line);
    z-index: 5;
    background: #09272cf5;
    backdrop-filter: blur(15px);
  }
  .sidebar > .logo,
  .side-bottom {
    display: none;
  }
  .nav {
    display: flex;
    justify-content: space-around;
    gap: 0;
  }
  .nav button {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 9px;
    padding: 9px 12px;
    min-width: 55px;
  }
  .nav button span {
    display: block;
  }
  .nav svg {
    width: 20px;
    height: 20px;
  }
  .main {
    padding: calc(20px + env(safe-area-inset-top)) 18px
      calc(96px + env(safe-area-inset-bottom));
  }
  .topbar {
    margin-bottom: 23px;
    gap: 8px;
  }
  .identity {
    gap: 8px;
  }
  .avatar {
    width: 42px;
    height: 42px;
  }
  .identity strong {
    font-size: 12px;
  }
  .identity small {
    font-size: 9px;
  }
  .wallet {
    gap: 6px;
  }
  .wallet > div {
    padding: 6px 9px;
    font-size: 11px;
    gap: 5px;
  }
  .wallet .icon-btn {
    display: grid;
    width: 34px;
    height: 34px;
    min-height: 34px;
  }
  .hero {
    padding: 25px 22px;
    min-height: 330px;
    grid-template-columns: 1fr;
    margin-bottom: 22px;
    align-items: start;
  }
  .hero-copy {
    max-width: 75%;
  }
  .hero h1 {
    font-size: 29px;
    max-width: 230px;
  }
  .hero p {
    font-size: 11px;
    max-width: 205px;
  }
  .hero .eyebrow {
    font-size: 9px;
    margin-bottom: 12px;
  }
  .hero .primary {
    margin-top: 25px;
    min-width: 165px;
    padding: 12px 18px;
    font-size: 13px;
  }
  .hero-art {
    position: absolute;
    inset-inline-end: -72px;
    bottom: -28px;
    width: 240px;
    height: 230px;
    opacity: 0.9;
  }
  .mini-board {
    width: 205px;
    height: 205px;
  }
  .floating-die {
    width: 45px;
    height: 45px;
    font-size: 33px;
    right: 38px;
    bottom: 20px;
    border-radius: 12px;
  }
  .spark {
    right: 28%;
    font-size: 22px;
  }
  .hero-copy .under-cta {
    font-size: 9px;
  }
  .games {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .game-card {
    flex-direction: column;
    gap: 5px;
    padding: 15px;
    text-align: center;
  }
  .game-art {
    width: 100px;
    height: 85px;
  }
  .game-card h3 {
    font-size: 20px;
  }
  .game-card p {
    font-size: 9px;
  }
  .game-card .arrow {
    display: none;
  }
  .badge {
    font-size: 8px;
    padding: 4px 8px;
  }
  .extras {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 16px;
  }
  .extra {
    padding: 18px;
  }
  .extra-symbol {
    width: 50px;
    height: 50px;
  }
  .extra h3 {
    font-size: 13px;
  }
  .section-title h2 {
    font-size: 17px;
  }
  .section-title span {
    font-size: 9px;
  }
  .footer-note {
    font-size: 8px;
    gap: 12px;
  }
  .auth {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 38px 26px;
    justify-content: center;
  }
  .auth > div {
    width: 100%;
  }
  .auth h1 {
    font-size: 31px;
  }
  .auth > .hero-art {
    display: none;
  }
  .auth-form {
    margin-top: 25px;
  }
  .game-layout {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .game-main {
    width: 100%;
  }
  .board-frame {
    padding: 10px;
    border-radius: 22px;
  }
  .game-aside {
    width: 100%;
  }
  .players {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .player {
    padding: 9px;
    gap: 8px;
  }
  .player strong {
    font-size: 11px;
  }
  .player small {
    font-size: 9px;
  }
  .game-top {
    margin-bottom: 14px;
  }
  .game-top h2 {
    font-size: 21px;
  }
  .dice-area {
    display: grid;
    grid-template-columns: 85px 1fr;
    align-items: center;
    text-align: start;
    gap: 10px 20px;
    margin: 15px 10px 0;
  }
  .dice {
    grid-row: 1/3;
    width: 70px;
    height: 70px;
    min-height: 70px;
    border-radius: 18px;
    padding: 14px;
    gap: 4px;
    margin: 0;
  }
  .dice-area .primary {
    font-size: 13px;
  }
  .game-status {
    min-height: 25px;
  }
  .game-tools {
    margin-top: 15px;
  }
  .timer-bar {
    margin: 10px 0;
  }
  .shop-grid {
    gap: 12px;
  }
  .shop-card {
    padding: 15px;
  }
  .shop-preview {
    height: 105px;
  }
  .shop-card h3 {
    font-size: 14px;
  }
  .shop-card button {
    padding: 10px;
    font-size: 11px;
  }
  .search-page h1 {
    font-size: 24px;
  }
  .search-slots {
    gap: 6px;
    margin: 24px 0;
  }
  .search-slot {
    min-width: 0;
    flex: 1;
    padding: 12px 6px;
    font-size: 10px;
  }
  .page-heading {
    font-size: 26px;
  }
  .game-view .topbar {
    display: none;
  }
  .game-view .sidebar {
    display: none;
  }
  .game-view .main {
    padding-bottom: 30px;
  }
  .stat strong {
    font-size: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}
html[data-motion="false"] *,
html[data-motion="false"] *:before {
  animation: none !important;
  transition: none !important;
}

.theme-saffron {
  background: repeating-linear-gradient(
    3deg,
    #70472c,
    #986437 4px,
    #81542f 8px
  ) !important;
  border-color: #cf9b5c;
}
.theme-moonlight {
  background: linear-gradient(135deg, #17213b, #3c4470) !important;
  border-color: #8399d0;
  box-shadow:
    0 0 25px #8292ff18,
    inset 0 0 0 2px #ffffff10;
}
.theme-rose {
  background: linear-gradient(130deg, #76344b, #ab6875) !important;
  border-color: #e5b5ba;
}
.shop-preview {
  border-radius: 15px;
  padding: 9px;
}
.shop-preview.theme-courtyard {
  background: #245c54;
}
.theme-description {
  font-size: 10px;
  min-height: 32px;
  line-height: 1.6;
  margin-bottom: 12px;
}
.bg-players {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin: 18px 0;
}
.bg-players .player {
  min-width: 200px;
}
.backgammon-frame {
  padding: 8px;
  border-radius: 27px;
  box-shadow: 0 20px 50px #0005;
  background: #183b35;
}
.bg-board {
  display: block;
  width: 100%;
  max-height: 600px;
}
.bg-board [role="button"] {
  cursor: pointer;
  outline: none;
}
.bg-board [role="button"]:focus-visible path {
  stroke: #fff;
  stroke-width: 4;
}
.bg-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 6px;
}
.bg-dice {
  display: flex;
  gap: 15px;
}
.bg-dice .dice {
  margin: 0;
  width: 64px;
  height: 64px;
  min-height: 64px;
  padding: 13px;
  gap: 4px;
  border-radius: 16px;
}
.bg-status strong {
  font-size: 16px;
}
.bg-status p {
  font-size: 12px;
}
.remaining-dice {
  display: flex;
  gap: 5px;
  margin-top: 8px;
}
.remaining-dice span {
  font-size: 12px;
  background: #ffffff12;
  border: 1px solid #ffffff22;
  border-radius: 5px;
  padding: 4px 9px;
  color: var(--gold);
}
.bg-moves {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.bg-moves button {
  font-size: 12px;
  padding: 10px 15px;
  gap: 10px;
}
.bg-moves small {
  font-size: 9px;
  color: var(--muted);
}
@media (max-width: 700px) {
  .bg-players .player {
    min-width: 0;
    flex: 1;
  }
  .bg-players {
    gap: 8px;
  }
  .bg-controls {
    flex-wrap: wrap;
    gap: 18px;
    padding: 12px 4px;
  }
  .bg-status {
    flex: 1;
  }
  .bg-controls > .btn-row {
    width: 100%;
    justify-content: center;
  }
  .bg-dice .dice {
    width: 53px;
    height: 53px;
    min-height: 53px;
    padding: 10px;
    gap: 3px;
    border-radius: 13px;
  }
  .backgammon-frame {
    padding: 3px;
    border-radius: 16px;
  }
  .bg-moves button {
    flex: 1;
    min-width: 120px;
  }
  .bg-status strong {
    font-size: 13px;
  }
  .bg-status p {
    font-size: 10px;
  }
  .bg-players .player small {
    font-size: 8px;
  }
}

.dice-jade {
  background:
    radial-gradient(ellipse at 20% 20%, #89d8b2, transparent 55%),
    repeating-linear-gradient(125deg, #237553, #307d5c 8px, #246749 13px) !important;
  box-shadow:
    0 7px 0 #164b37,
    0 15px 25px #0004,
    inset 0 1px 2px #ffffff88;
}
.dice-jade .pip {
  background: #e9f4cf;
  box-shadow: inset 0 1px 2px #426748;
}
.dice-onyx {
  background: linear-gradient(
    140deg,
    #66716e,
    #26312f 35%,
    #141b1b 80%
  ) !important;
  box-shadow:
    0 7px 0 #070d0c,
    0 15px 25px #0005,
    inset 0 0 0 1px #cdb06e88;
}
.dice-onyx .pip {
  background: linear-gradient(135deg, #fff2b5, #c4a04b);
  box-shadow: 0 0 3px #ecd99566;
}
.dice-ruby {
  background: radial-gradient(
    ellipse at 25% 15%,
    #ef9ab0,
    #bd3d62 38%,
    #7a1f3e
  ) !important;
  box-shadow:
    0 7px 0 #5b1831,
    0 15px 25px #0004,
    inset 0 0 0 2px #f2a6b833;
}
.dice-ruby .pip {
  background: #fff3e7;
  box-shadow: 0 0 5px #ffced080;
}
.dice-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  height: 155px;
  border-radius: 16px;
  background: radial-gradient(ellipse, #f1d9a714, transparent);
}
.dice-stage .dice {
  width: 66px;
  height: 66px;
  min-height: 66px;
  margin: 0;
  padding: 13px;
  gap: 4px;
  border-radius: 17px;
  transform: rotate(-13deg);
}
.dice-stage .dice:nth-child(2) {
  transform: rotate(17deg) translateY(12px);
}
.stage-jade {
  background: radial-gradient(ellipse, #44bb8540, transparent);
}
.stage-onyx {
  background: radial-gradient(ellipse, #bea76030, transparent);
}
.stage-ruby {
  background: radial-gradient(ellipse, #d85c8140, transparent);
}
@media (max-width: 700px) {
  .dice-stage {
    gap: 9px;
    height: 120px;
  }
  .dice-stage .dice {
    width: 46px;
    height: 46px;
    min-height: 46px;
    padding: 9px;
    gap: 3px;
    border-radius: 12px;
  }
}

.game-view .topbar {
  display: none;
}
.bg-board {
  max-height: 58vh;
}
.bg-players {
  margin: 12px 0;
}
.bg-controls {
  padding: 14px 6px;
}
.game-view .game-top {
  margin-bottom: 12px;
}
.game-view .game-top .eyebrow {
  margin-bottom: 8px;
}
@media (max-width: 700px) {
  .bg-board {
    max-height: none;
  }
}

/* Atelier revision: lacquer, aged brass and quieter inlays. */
.board-frame {
  background: linear-gradient(135deg, #3b5148, #1c332e 55%, #30473b);
  border: 1px solid #ac987166;
  box-shadow:
    0 18px 45px #0005,
    inset 0 0 0 3px #10251e,
    inset 0 0 0 4px #a18d5a55;
  border-radius: 20px;
  padding: 17px;
}
.mini-board {
  filter: drop-shadow(0 20px 12px #00191f88);
}
.game-card {
  background: linear-gradient(135deg, #27433e, #17352f);
}
.shop-preview.theme-courtyard {
  background: linear-gradient(145deg, #3c5146, #1c3029);
}
.theme-rose {
  background: linear-gradient(130deg, #51363e, #835b63) !important;
  border-color: #ab8b87;
}
.theme-saffron {
  background: repeating-linear-gradient(
    3deg,
    #493625,
    #785939 5px,
    #60462f 10px
  ) !important;
}
.theme-moonlight {
  background: linear-gradient(135deg, #131d31, #30384f) !important;
}
.hero {
  background: linear-gradient(115deg, #294b45, #173b37 60%, #304232);
}
.hero:before {
  opacity: 0.5;
}
.floating-die {
  box-shadow:
    4px 7px 0 #b4a889,
    9px 15px 18px #0004;
}
.game-card .badge {
  border: 1px solid #bba27222;
  border-radius: 5px;
}
.shop-card {
  background: linear-gradient(145deg, #1d3b36, #13312d);
  border-color: #c3ad791c;
}
.shop-card h3 {
  font-weight: 600;
}
.brand-mark {
  box-shadow: 0 3px 0 #66834b;
}
.extra-symbol {
  background: #baa57809;
  font-size: 31px;
  border: 1px solid #baa57818;
}
@media (max-width: 700px) {
  .board-frame {
    padding: 12px;
    border-radius: 17px;
  }
}
.game-main {
  width: min(100%, calc(100dvh - 155px));
  margin-inline: auto;
}
@media (max-width: 700px) {
  .game-main {
    width: 100%;
  }
}

.creator-credit {
  display: block;
  width: 100%;
  padding: 18px 8px 0;
  color: var(--gold);
  font-size: 12px;
  text-align: center;
  line-height: 1.9;
}
.creator-credit span {
  color: var(--muted);
  margin-inline-end: 5px;
}
.about-card {
  text-align: center;
  padding: 12px 0 26px;
}
.about-card .logo {
  justify-content: center;
  margin-bottom: 28px;
}
.about-card p {
  font-size: 13px;
  margin-bottom: 10px;
}
.about-card h3 {
  font-size: 22px;
  line-height: 1.8;
  color: var(--gold);
}

.bg-board {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.bg-board [data-bg-point] {
  cursor: grab;
}
.bg-board.dragging,
.bg-board.dragging * {
  cursor: grabbing;
}
.bg-drag-ghost {
  pointer-events: none;
  filter: drop-shadow(0 7px 5px #0008);
}

/* Game-first shell: a stage, wallet and dock, rather than a website sidebar. */
:root {
  --bg: #193c80;
  --panel: #244d91;
  --card: #2c589d;
  --mint: #a4f783;
  --gold: #ffd379;
  --text: #fff7df;
  --muted: #bdcee9;
  --line: #a2caff26;
}
body {
  background: radial-gradient(
    ellipse at 50% 42%,
    #3966ad 0,
    #234784 55%,
    #152d61 100%
  );
  background-attachment: fixed;
  overscroll-behavior: none;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  background-image: radial-gradient(#e8eeff 2px, transparent 3px);
  background-size: 28px 28px;
  transform: rotate(-12deg) scale(1.2);
}
.shell {
  display: block;
  max-width: 1060px;
  min-height: 100dvh;
  position: relative;
}
.main {
  padding: 90px 28px 100px;
}
.sidebar {
  position: fixed;
  inset: auto 0 0;
  z-index: 5;
  max-width: 1060px;
  margin: auto;
  height: 80px;
  padding: 0 18px env(safe-area-inset-bottom);
  border: 0;
  background: linear-gradient(#2874ca, #164697);
  box-shadow:
    0 -2px 0 #77c8ef,
    0 -7px 25px #10265555;
  display: block;
  backdrop-filter: none;
}
.sidebar > .logo,
.side-bottom {
  display: none;
}
.nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 100%;
  gap: 0;
  direction: ltr;
}
.nav button {
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 8px 3px;
  border-radius: 0;
  border-inline-start: 1px solid #b4e9ff22;
  color: #ecf7ff;
  font-weight: 700;
  font-size: 11px;
  min-width: 0;
}
.nav button span {
  display: block;
}
.nav svg {
  width: 27px;
  height: 27px;
  filter: drop-shadow(0 2px 1px #001a4999);
  stroke-width: 2.2;
}
.nav button.active {
  background: linear-gradient(#60dcff, #218ddd);
  color: white;
  box-shadow:
    inset 0 2px 0 #adf3ff,
    0 -4px 0 #55c6ec;
  transform: translateY(-5px);
  border-radius: 12px 12px 0 0;
}
.nav button[data-nav="home"] {
  order: 3;
}
.nav button[data-nav="store"] {
  order: 1;
}
.nav button[data-nav="play"] {
  order: 2;
}
.nav button[data-nav="friends"] {
  order: 4;
}
.nav button[data-nav="rank"] {
  order: 5;
}
.topbar {
  position: absolute;
  inset: 0 0 auto;
  margin: 0;
  padding: 14px 26px;
  min-height: 76px;
  background: linear-gradient(#315ecb, #274dac);
  box-shadow:
    0 4px 0 #142e77,
    0 7px 16px #0b205633;
  gap: 12px;
  align-items: center;
}
.identity {
  min-width: 0;
  gap: 10px;
  text-align: start;
}
.identity strong {
  font-size: 13px;
  display: block;
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.identity small {
  font-size: 10px;
  color: #d5e4ff;
}
.identity .avatar {
  background: linear-gradient(#e3f2ff, #81b4e1);
  color: #315e9d;
  border: 2px solid #f1fcff;
  border-radius: 12px;
  box-shadow: 0 3px 0 #18366d;
  width: 42px;
  height: 42px;
}
.wallet {
  gap: 9px;
}
.wallet > div {
  padding: 6px 11px;
  background: #123d80;
  border: 1px solid #71a5dc;
  box-shadow: inset 0 2px 4px #09255f;
  border-radius: 20px;
  font-size: 13px;
}
.wallet .icon-btn {
  color: #ffcf64;
  background: none;
  border: 0;
}
.coin {
  color: #ffdc65;
  text-shadow: 0 2px #a06b17;
}
.gem {
  color: #83efff;
}
.game-hub {
  max-width: 780px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: calc(100dvh - 190px);
}
.hub-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 4px;
}
.hub-brand {
  font-size: 24px;
  font-weight: 900;
  text-shadow: 0 3px #122b65;
}
.hub-brand small {
  font-size: 9px;
  letter-spacing: 3px;
  display: block;
  text-align: center;
  color: #a9d8ff;
  margin-top: 4px;
}
.hub-online {
  font-size: 10px;
  color: #c9ebff;
  display: flex;
  align-items: center;
  gap: 6px;
}
.hub-shortcuts {
  display: flex;
  justify-content: center;
  gap: 14px;
}
.hub-shortcuts button {
  min-width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 12px;
  background: linear-gradient(#64d8f5, #159acb);
  border: 2px solid #85e1f2;
  border-radius: 16px;
  box-shadow:
    0 4px 0 #0a527f,
    0 7px 8px #0e265b66;
  font-size: 11px;
  font-weight: bold;
  text-shadow: 0 1px #155075;
}
.shortcut-icon {
  display: grid;
  place-items: center;
  color: #ffe094;
}
.shortcut-icon svg {
  width: 27px;
  height: 27px;
  stroke-width: 2.5;
}
.gift-icon {
  font-size: 29px;
  line-height: 1;
}
.lobby-stage {
  position: relative;
  padding-top: 6px;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  min-height: 280px;
}
.lobby-board {
  width: 145px;
  filter: drop-shadow(0 14px 12px #0e285699);
  transform: perspective(500px) rotateX(20deg) rotate(-8deg);
  margin: 2px auto -4px;
}
.lobby-board svg {
  display: block;
  width: 100%;
  height: auto;
}
.lobby-title {
  font-size: 26px;
  font-weight: 900;
  text-shadow: 0 3px 0 #122a5c;
}
.lobby-actions {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 16px;
  width: min(100%, 510px);
}
.lobby-play,
.lobby-team {
  position: relative;
  overflow: hidden;
  min-height: 126px;
  border-radius: 25px;
  border: 2px solid #a0fbbb;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: linear-gradient(
    155deg,
    #56ec62 0%,
    #19c841 50%,
    #00a22e 51%,
    #0dc839 100%
  );
  box-shadow:
    inset 0 3px 0 #d6ffe288,
    0 7px 0 #08732e,
    0 12px 16px #09265977;
  color: #fffced;
  text-shadow: 0 2px 2px #146820;
}
.lobby-team {
  background: linear-gradient(
    155deg,
    #46e4e2 0%,
    #18bebe 50%,
    #0a9fbd 51%,
    #19bfd0
  );
  border-color: #8df6ee;
  box-shadow:
    inset 0 3px 0 #ddffff88,
    0 7px 0 #056b88,
    0 12px 16px #09265977;
  text-shadow: 0 2px 2px #13566b;
}
.lobby-play strong,
.lobby-team strong {
  font-size: 23px;
}
.lobby-play small,
.lobby-team small {
  font-size: 10px;
  font-weight: 700;
  color: #e3ffee;
}
.play-medal svg {
  height: 32px;
  width: 32px;
  fill: #ffdd7a;
  stroke: #ffeabd;
  filter: drop-shadow(0 3px 0 #0a752f);
}
.lobby-local {
  display: flex;
  gap: 12px;
  margin-top: 9px;
  width: min(100%, 510px);
}
.lobby-local button {
  flex: 1;
  background: #183875aa;
  border: 1px solid #739bc6;
  border-radius: 12px;
  min-height: 40px;
  font-size: 11px;
  color: #e4f4ff;
  box-shadow: 0 3px 0 #102b5c;
}
.other-games {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.mini-game {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  min-width: 0;
  border: 1px solid #94cde2;
  border-radius: 17px;
  background: linear-gradient(135deg, #2a84a6, #28567c);
  box-shadow: 0 4px 0 #142f64;
  font-size: 14px;
  font-weight: 700;
}
.mini-game svg {
  width: 64px;
  height: 64px;
  flex: none;
  filter: drop-shadow(0 4px 2px #001a4844);
}
.mini-game b {
  margin-inline-start: auto;
  color: #c8edff;
}
.backgammon-tile {
  background: linear-gradient(135deg, #8b6989, #57497b);
  border-color: #cfb2c4;
}
.lobby-collection {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: start;
  padding: 10px 18px;
  background: linear-gradient(110deg, #283e77, #475491);
  border: 1px solid #7d95c6;
  border-radius: 14px;
  box-shadow: 0 3px 0 #152c5e;
}
.lobby-collection .dice {
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 8px;
  border-radius: 9px;
  transform: rotate(-12deg);
  gap: 3px;
}
.lobby-collection span {
  font-size: 13px;
  font-weight: 700;
}
.lobby-collection small {
  display: block;
  font-size: 10px;
  color: #bac8e4;
  margin-top: 5px;
}
.lobby-collection b {
  margin-inline-start: auto;
  font-size: 25px;
}
.creator-credit {
  font-size: 9px;
  padding: 0;
  min-height: 24px;
  color: #c5d9f2;
}
.creator-credit span {
  color: #98b4d7;
}
.primary {
  background: linear-gradient(#59e35d, #15b83c 52%, #0d9b30 53%, #19b83e);
  color: white;
  border: 1px solid #a9efa6;
  box-shadow:
    0 5px 0 #087331,
    inset 0 2px 0 #ffffff55;
  text-shadow: 0 2px 1px #125f24;
  border-radius: 15px;
  font-weight: 800;
}
.secondary {
  background: linear-gradient(#4588c5, #286199);
  border: 1px solid #8ac8ee;
  box-shadow: 0 3px 0 #123964;
  color: white;
}
.shop-card {
  background: linear-gradient(145deg, #325995, #213c6d);
  border-color: #789bd366;
}
input,
select {
  background: #173669;
  border-color: #6386ba;
  color: #fff;
}
.mode-dialog,
.game-picker {
  max-width: 620px;
  background: #f0dfbd;
  color: #72412d;
  padding: 0;
  border: 0;
  border-radius: 24px;
  overflow: auto;
  max-height: 94dvh;
}
.mode-dialog .dialog-head,
.game-picker .dialog-head {
  margin: 0;
  padding: 24px;
  background: linear-gradient(#3661d3, #2449af);
  color: #fff;
  box-shadow: 0 4px 0 #193777;
  position: sticky;
  top: 0;
  z-index: 2;
}
.mode-dialog .dialog-head h2,
.game-picker .dialog-head h2 {
  font-size: 27px;
  text-shadow: 0 3px #183470;
}
.mode-dialog .dialog-body,
.game-picker .dialog-body {
  padding: 24px;
  gap: 18px;
}
.mode-screen {
  display: grid;
  gap: 22px;
}
.mode-subtitle {
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  color: #6e462e;
}
.player-count {
  max-width: 360px;
  width: 100%;
  margin: auto;
  background: #c58d20;
  border: 3px solid #d6a547;
  border-radius: 24px;
  gap: 0;
  padding: 3px;
  box-shadow: 0 4px 0 #9f7128;
}
.player-count button {
  background: transparent;
  color: #724125;
  border: 0;
  border-radius: 18px;
  font-size: 17px;
  font-weight: bold;
  padding: 13px 8px;
}
.player-count button.chosen {
  background: linear-gradient(#ffe860, #eebb11);
  box-shadow: inset 0 2px #fff8b9;
  color: #5e341d;
}
.mode-label {
  text-align: center;
  font-size: 17px;
}
.mode-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.mode-option {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 8px;
  padding: 8px 3px;
  border: 2px solid transparent;
  border-radius: 20px;
  color: #87472f;
}
.mode-option.chosen {
  background: #fff7df;
  border-color: #20afda;
  box-shadow: 0 4px 0 #87b8b9;
}
.mode-emblem {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #ffe0a0, #d59c61 65%, #af7547);
  border: 3px solid #fbe7b2;
  box-shadow:
    0 4px 0 #b58b59,
    inset 0 -5px 0 #c78b42;
  font-size: 36px;
  color: #934325;
  text-shadow: 0 1px #ffe9b4;
}
.chosen .mode-emblem {
  background: radial-gradient(circle at 35% 25%, #84f7ff, #16b8e3 65%, #258dc8);
  border-color: #9cfaff;
  box-shadow: 0 4px 0 #1974a8;
}
.mode-option strong {
  font-size: 14px;
}
.mode-option small {
  font-size: 10px;
  line-height: 1.6;
  min-height: 32px;
}
.mode-rewards {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  padding: 20px 14px;
  background: #fff8e9;
  border: 2px solid #b6a0d4;
  border-radius: 22px;
  box-shadow: 0 5px 0 #d6c8ad;
}
.mode-rewards > span {
  font-size: 48px;
  color: #e4a123;
  text-shadow: 0 3px #976128;
}
.mode-rewards strong {
  font-size: 13px;
  color: #805132;
}
.mode-rewards p,
.mode-explainer {
  color: #876645 !important;
  font-size: 11px !important;
}
.mode-screen label {
  color: #80603e;
}
.start-game-button {
  font-size: 24px;
  min-height: 68px;
  max-width: 330px;
  margin: 0 auto 12px;
  width: 100%;
}
.picker-art {
  width: 180px;
  height: 180px;
  margin: 8px auto;
}
.picker-art svg {
  width: 100%;
  height: 100%;
}
.game-picker .primary {
  font-size: 23px;
  min-height: 66px;
}
.game-picker .choices button {
  font-size: 12px;
}
.snakes-board {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 700px) {
  /* Standalone iOS PWAs do not have Safari's back bar. Keep app controls below
     the notch and make ordinary dialogs use the full safe viewport. */
  dialog:not(.mode-dialog):not(.game-picker) {
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    border-radius: 0;
  }
  dialog:not(.mode-dialog):not(.game-picker) .dialog-head {
    position: sticky;
    top: 0;
    z-index: 4;
    min-height: 62px;
  }
  dialog:not(.mode-dialog):not(.game-picker) .dialog-head .icon-btn {
    width: 44px;
    height: 44px;
    min-height: 44px;
    flex: none;
  }
  .topbar-back {
    width: 38px;
    height: 38px;
    min-height: 38px;
    flex: none;
  }
  .main {
    padding: calc(84px + env(safe-area-inset-top)) 14px
      calc(88px + env(safe-area-inset-bottom));
  }
  .topbar {
    padding: calc(10px + env(safe-area-inset-top)) 10px 10px;
    gap: 7px;
  }

  /* iOS can report a zero safe-area inset after launching an installed PWA.
     Keep the profile and navigation controls below the status bar in either case. */
  .pwa-standalone .shell:not(.game-view) .topbar {
    padding-top: max(env(safe-area-inset-top), 52px);
  }
  .identity {
    gap: 6px;
  }
  .identity strong {
    max-width: 115px;
    font-size: 11px;
  }
  .identity small {
    font-size: 8px;
  }
  .identity .avatar {
    width: 36px;
    height: 40px;
    min-width: 36px;
  }
  .wallet {
    gap: 5px;
  }
  .wallet > div {
    padding: 5px 7px;
    font-size: 11px;
    gap: 4px;
  }
  .wallet .icon-btn {
    width: 30px;
    height: 40px;
    min-height: 40px;
  }
  .wallet > div:nth-child(2) {
    display: none;
  }
  .sidebar {
    height: calc(70px + env(safe-area-inset-bottom));
    padding: 0 0 env(safe-area-inset-bottom);
  }
  .nav button {
    font-size: 9px;
  }
  .nav svg {
    width: 25px;
    height: 25px;
  }
  .game-hub {
    gap: 14px;
    min-height: calc(
      100dvh - 177px - env(safe-area-inset-top) - env(safe-area-inset-bottom)
    );
  }
  .hub-heading {
    padding: 0 3px;
  }
  .hub-brand {
    font-size: 20px;
  }
  .hub-brand small {
    font-size: 7px;
  }
  .hub-shortcuts {
    gap: 9px;
  }
  .hub-shortcuts button {
    min-width: 0;
    flex: 1;
    padding: 8px 4px;
    gap: 5px;
    font-size: 9px;
    border-radius: 12px;
  }
  .shortcut-icon svg {
    height: 22px;
    width: 22px;
  }
  .gift-icon {
    font-size: 25px;
  }
  .lobby-stage {
    gap: 7px;
    min-height: 270px;
    padding-top: 0;
  }
  .lobby-board {
    width: 116px;
  }
  .lobby-title {
    font-size: 23px;
  }
  .lobby-actions {
    gap: 12px;
  }
  .lobby-play,
  .lobby-team {
    min-height: 111px;
    border-radius: 23px;
  }
  .lobby-play strong,
  .lobby-team strong {
    font-size: 21px;
  }
  .lobby-play small {
    font-size: 9px;
  }
  .play-medal svg {
    width: 28px;
    height: 28px;
  }
  .lobby-local {
    margin-top: 9px;
    gap: 10px;
  }
  .lobby-local button {
    font-size: 10px;
    min-height: 36px;
  }
  .other-games {
    gap: 10px;
  }
  .mini-game {
    padding: 6px 8px;
    gap: 5px;
    font-size: 12px;
    border-radius: 14px;
  }
  .mini-game svg {
    width: 47px;
    height: 47px;
  }
  .lobby-collection {
    padding: 8px 12px;
    gap: 12px;
  }
  .lobby-collection span {
    font-size: 11px;
  }
  .lobby-collection small {
    font-size: 9px;
  }
  .lobby-collection .dice {
    width: 35px;
    height: 35px;
    min-height: 35px;
    padding: 6px;
  }
  .creator-credit {
    font-size: 8px;
    min-height: 16px;
  }
  .mode-dialog,
  .game-picker {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    padding: 0;
  }
  .mode-dialog .dialog-head,
  .game-picker .dialog-head {
    padding: calc(22px + env(safe-area-inset-top)) 22px 23px;
  }
  .mode-dialog .dialog-body,
  .game-picker .dialog-body {
    padding: 26px 18px calc(30px + env(safe-area-inset-bottom));
  }
  .mode-screen {
    min-height: calc(100dvh - 160px);
    align-content: space-between;
    gap: 22px;
  }
  .mode-grid {
    gap: 3px;
  }
  .mode-option {
    padding: 8px 0;
  }
  .mode-emblem {
    width: 59px;
    height: 59px;
    font-size: 30px;
  }
  .mode-option strong {
    font-size: 12px;
  }
  .mode-option small {
    font-size: 9px;
    min-height: 30px;
  }
  .mode-label {
    margin-bottom: -12px;
  }
  .game-picker .picker-art {
    width: 210px;
    height: 210px;
    margin: 35px auto;
  }
  .game-picker .dialog-body {
    gap: 20px;
  }
  .game-picker .secondary {
    min-height: 58px;
  }
  .game-view .main {
    padding: 16px 10px 84px;
  }
  .game-view .topbar {
    display: none;
  }
  .game-view .sidebar {
    display: block;
  }
  .game-layout {
    gap: 12px;
  }
  .game-top {
    margin-bottom: 14px;
  }
  .game-top h2 {
    font-size: 16px;
  }
  .board-frame {
    padding: 8px;
  }
  .game-main {
    width: 100%;
  }
}
@media (max-height: 740px) and (max-width: 700px) {
  .game-hub {
    gap: 10px;
  }
  .lobby-stage {
    min-height: 230px;
  }
  .lobby-board {
    width: 83px;
  }
  .lobby-title {
    font-size: 18px;
  }
  .lobby-play,
  .lobby-team {
    min-height: 98px;
  }
  .hub-heading {
    display: none;
  }
  .lobby-collection {
    padding: 6px 12px;
  }
  .mode-screen {
    gap: 16px;
  }
  .mode-dialog .dialog-body {
    padding-top: 18px;
  }
  .mode-rewards {
    padding: 12px;
  }
  .game-picker .picker-art {
    margin: 12px auto;
  }
}
@media (min-width: 701px) {
  .lobby-actions {
    width: 480px;
  }
  .game-hub {
    gap: 20px;
  }
  .game-view .topbar {
    display: none;
  }
  .game-view .main {
    padding-top: 28px;
  }
  .mode-dialog {
    min-height: 690px;
  }
  .game-hub .other-games {
    max-width: 620px;
    width: 100%;
    align-self: center;
  }
  .lobby-collection {
    max-width: 620px;
    width: 100%;
    align-self: center;
  }
}
@font-face {
  font-family: Vazirmatn;
  src: url("/fonts/Vazirmatn.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  font-family: Vazirmatn, Arial, sans-serif;
}
button,
input,
select {
  font-family: inherit;
}
svg text {
  font-family: Vazirmatn, Arial, sans-serif;
}
.logo strong {
  letter-spacing: 0;
}
h1,
h2,
h3 {
  font-weight: 850;
  line-height: 1.55;
}
.identity strong {
  font-weight: 750;
}
.identity small {
  font-size: 10px;
}
.nav button {
  font-size: 12px;
  font-weight: 850;
}
.nav button[data-nav="inventory"] {
  order: 2;
}
.dock-icon {
  display: grid;
  place-items: center;
  filter: drop-shadow(0 3px 0 #143864);
}
.dock-icon svg {
  stroke-width: 2.2;
  fill: #ffde78;
  stroke: #97692e;
}
.dock-home svg {
  fill: #f4fcff;
  stroke: #9e592e;
}
.dock-friends svg {
  fill: #ffcc7e;
  stroke: #81573e;
}
.dock-store svg {
  fill: #98e885;
  stroke: #365a47;
}
.dock-dice.dice {
  width: 29px;
  height: 29px;
  min-height: 29px;
  display: grid;
  padding: 5px;
  gap: 2px;
  border-radius: 6px;
  transform: rotate(-15deg);
}
.lobby-stage {
  gap: 18px;
}
.lobby-title {
  font-size: 25px;
  color: #d1e3ff;
}
.lobby-play,
.lobby-team {
  min-height: 172px;
}
.play-medal .party-art {
  width: 122px;
  height: 82px;
  fill: none;
  stroke: none;
  filter: none;
}
.lobby-play strong,
.lobby-team strong {
  font-size: 24px;
  font-weight: 900;
  text-shadow:
    0 2px 0 #174a33,
    1px 0 #174a33,
    -1px 0 #174a33;
}
.lobby-local button {
  font-size: 12px;
}
.hub-shortcuts button {
  font-size: 12px;
}
.hub-brand {
  font-weight: 900;
}
.lobby-collection span {
  font-size: 14px;
}
.creator-credit {
  font-size: 10px;
}
.mode-option strong {
  font-weight: 850;
  font-size: 17px;
}
.mode-option small {
  font-size: 11px;
}
.mode-emblem {
  font-family: Arial, sans-serif;
}
.mode-subtitle {
  font-size: 19px;
}
.mode-rewards strong {
  font-size: 15px;
}
.mode-rewards p {
  font-size: 12px !important;
}
.mode-dialog .dialog-head h2 {
  font-size: 29px;
}
.mode-screen .primary {
  text-shadow: 0 2px #1d6b2c;
  font-weight: 900;
}
dialog:not(.mode-dialog):not(.game-picker) {
  background: #f3e3c4;
  color: #754933;
  border: 4px solid #fff7de;
  box-shadow:
    0 7px 0 #af9270,
    0 25px 80px #00133799;
  border-radius: 23px;
  padding: 0;
  max-height: 88dvh;
  overflow: auto;
}
dialog:not(.mode-dialog):not(.game-picker) .dialog-head {
  background: linear-gradient(#ff965e, #e96539);
  margin: 0;
  padding: 15px 19px;
  color: white;
  border-bottom: 3px solid #b14c2a;
  text-shadow: 0 2px #a34122;
}
dialog:not(.mode-dialog):not(.game-picker) .dialog-body {
  padding: 20px;
}
dialog:not(.mode-dialog):not(.game-picker) p {
  color: #8d6a4b;
}
dialog:not(.mode-dialog):not(.game-picker) .text-button {
  color: #7f482f;
}
dialog:not(.mode-dialog):not(.game-picker) .dialog-head .icon-btn {
  background: #c94e27;
  border: 2px solid #ffe1ad;
  border-radius: 50%;
  color: white;
}
.toggle-row {
  border-bottom-color: #bc9a7544;
}
.toggle {
  background: #c5b499;
}
.toggle.on {
  background: #3bba7b;
}
.empty {
  color: #8e7357;
}
.panel-heading {
  text-align: center;
  font-size: 20px;
}
.profile-dialog,
.friends-dialog {
  max-width: 520px;
  width: calc(100% - 24px);
}
.profile-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #ead1a8;
  border: 2px solid #bb9769;
  border-radius: 16px;
  padding: 16px;
}
.portrait-avatar {
  width: 70px;
  height: 80px;
  font-size: 35px;
  border: 3px solid #fff9df;
  background: linear-gradient(#b4dfff, #7ca9d0);
  color: #34568d;
  flex: none;
  box-shadow: 0 3px 0 #b79970;
}
.profile-banner h3 {
  font-size: 23px;
  color: #355a85;
}
.profile-banner p {
  font-size: 12px;
}
.profile-banner small {
  font-size: 10px;
}
.profile-banner .text-button {
  font-size: 11px;
  min-height: 28px;
}
.xp-track {
  height: 12px;
  border-radius: 20px;
  background: #4b6684;
  overflow: hidden;
  margin: 8px 0;
}
.xp-track span {
  display: block;
  height: 100%;
  background: linear-gradient(#fdde61, #d6a529);
}
.profile-stats {
  background: #f2d9ac;
  border-radius: 12px;
  overflow: hidden;
}
.profile-stats > div {
  display: flex;
  justify-content: space-between;
  padding: 9px 14px;
  font-size: 14px;
}
.profile-stats > div:nth-child(odd) {
  background: #b9926525;
}
.profile-stats strong {
  color: #a45528;
  font-size: 18px;
}
.profile-stats span {
  color: #426686;
  font-weight: 750;
}
.panel-scroll {
  max-height: 140px;
  overflow: auto;
  background: #dcbf9144;
  border-radius: 12px;
}
.panel-scroll .empty {
  padding: 20px;
  font-size: 12px;
}
.panel-scroll .list-row {
  padding: 10px;
  font-size: 12px;
}
.panel-tabs {
  display: flex;
  gap: 7px;
  border-bottom: 3px solid #b18b59;
}
.panel-tabs button {
  flex: 1;
  background: #e0c496;
  border: 2px solid #bd976a;
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  font-size: 16px;
  font-weight: 800;
}
.panel-tabs .selected {
  background: #fff1d1;
  color: #95502f;
}
.friend-panel {
  min-height: 250px;
  max-height: 40dvh;
  overflow: auto;
  background: #f2d9ac;
  border: 2px solid #c39d72;
  border-radius: 15px;
  padding: 10px;
}
.friend-panel .empty {
  padding: 30px 14px;
  font-size: 17px;
  font-weight: 750;
}
.empty-illustration {
  width: 135px;
  margin: 0 auto 18px;
}
.friend-add {
  padding: 15px;
  background: #fff6d9;
  border: 1px solid #cead7b;
  border-radius: 16px;
}
.friend-add label {
  color: #916038;
}
.friend-add input {
  background: #fffdf6;
  color: #654835;
  border: 1px solid #c5a981;
}
.friend-add .primary {
  font-size: 15px;
  min-height: 45px;
}
.collection-screen {
  background: linear-gradient(#5744b3, #45328f);
  border: 2px solid #8d86e2;
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 7px 0 #242768;
}
.collection-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.collection-heading h1 {
  font-size: 25px;
}
.collection-heading > span {
  font-size: 12px;
  background: #292369;
  border-radius: 18px;
  padding: 5px 12px;
}
.round-back {
  width: 42px;
  height: 42px;
  min-height: 42px;
  border-radius: 50%;
  background: linear-gradient(#ffe3a0, #e8b952);
  box-shadow: 0 3px 0 #926321;
  display: grid;
  place-items: center;
}
.round-back svg {
  width: 23px;
  height: 23px;
  stroke: #80542b;
  stroke-width: 3;
}
.collection-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  border-bottom: 4px solid #30247e;
}
.collection-tabs button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px;
  background: linear-gradient(#8982e9, #5b54c4);
  border: 2px solid #aea7ff;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  font-size: 16px;
  font-weight: 800;
  flex: 1;
  justify-content: center;
}
.collection-tabs .selected {
  background: linear-gradient(#5bd3ff, #278cdf);
}
.collection-tabs .dice {
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 7px;
  border-radius: 8px;
  gap: 3px;
  transform: rotate(-12deg);
}
.tab-board {
  width: 40px;
}
.tab-board svg {
  display: block;
  width: 100%;
}
.collection-filters {
  display: flex;
  gap: 8px;
  padding: 14px 0;
}
.collection-filters button {
  flex: 1;
  background: #453299;
  border: 1px solid #9285e2;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
}
.collection-filters .selected {
  background: linear-gradient(#ffa848, #e98122);
  border-color: #ffd38b;
  box-shadow: 0 3px 0 #9b4922;
}
.collection-note {
  text-align: center;
  color: #d4cbf6;
  font-size: 12px;
  margin: 6px 0 16px;
}
.collection-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.collectible.shop-card {
  border: 3px solid #a9d4f6;
  background: linear-gradient(#728ada, #dad4ff);
  padding: 0;
  overflow: hidden;
  box-shadow: 0 6px 0 #292176;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
}
.collectible h3 {
  padding: 8px;
  background: linear-gradient(#4366be, #283b8c);
  text-align: center;
  font-size: 17px;
  color: white;
  font-weight: 850;
}
.collectible p {
  font-size: 11px;
  line-height: 1.6;
  padding: 0 8px;
  color: #443869;
  min-height: 36px;
}
.collectible > small {
  color: #4b366c;
  text-align: center;
  font-size: 12px;
  padding: 8px;
}
.collectible .dice-stage {
  height: 145px;
  margin: 0;
  background: radial-gradient(#fff9ec, #94badf);
  border-radius: 0;
}
.collectible .dice-stage .dice {
  width: 66px;
  height: 66px;
  min-height: 66px;
  padding: 11px;
  gap: 4px;
}
.collectible .dice-stage .dice:nth-child(2) {
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 8px;
}
.collectible .primary,
.collectible .secondary {
  margin: 0;
  border: 0;
  border-top: 2px solid #f4ffd5;
  border-radius: 0;
  min-height: 44px;
  box-shadow: none;
  font-size: 14px;
}
.collectible .secondary:disabled {
  opacity: 1;
  background: #4d659e;
  color: #dceaff;
  text-shadow: none;
}
.collectible .shop-preview {
  margin: 0;
  padding: 12px;
}
.collectible-onyx {
  border-color: #f3cc75 !important;
}
.collectible-onyx h3 {
  background: linear-gradient(#926425, #563d24);
}
.collectible-ruby {
  border-color: #ffc3dc !important;
}
.collectible-ruby h3 {
  background: linear-gradient(#bc548a, #6c386e);
}
.collectible-jade {
  border-color: #a4efd5 !important;
}
.collectible-jade h3 {
  background: linear-gradient(#3aa989, #266955);
}
@media (max-width: 700px) {
  .identity strong {
    font-size: 12px;
  }
  .identity small {
    font-size: 9px;
  }
  .nav button {
    font-size: 10px;
  }
  .hub-shortcuts button {
    font-size: 11px;
  }
  .lobby-stage {
    gap: 16px;
    min-height: 285px;
  }
  .lobby-play,
  .lobby-team {
    min-height: 164px;
  }
  .lobby-play strong,
  .lobby-team strong {
    font-size: 24px;
  }
  .play-medal .party-art {
    width: 112px;
    height: 76px;
  }
  .lobby-local button {
    font-size: 12px;
  }
  .mini-game {
    font-size: 14px;
  }
  .lobby-collection span {
    font-size: 13px;
  }
  .creator-credit {
    font-size: 9px;
  }
  .mode-option strong {
    font-size: 15px;
  }
  .mode-option small {
    font-size: 10px;
    line-height: 1.9;
    min-height: 38px;
  }
  .mode-subtitle {
    font-size: 18px;
  }
  .mode-dialog .dialog-head h2 {
    font-size: 29px;
  }
  .mode-rewards strong {
    font-size: 14px;
  }
  .player-count button {
    font-size: 20px;
  }
  .collection-screen {
    padding: 10px;
    border-radius: 18px;
  }
  .collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .collection-tabs button {
    padding: 10px;
    font-size: 14px;
    gap: 9px;
  }
  .collectible h3 {
    font-size: 15px;
  }
  .collectible .dice-stage {
    height: 133px;
  }
  .collectible .dice-stage .dice {
    width: 55px;
    height: 55px;
    min-height: 55px;
    padding: 9px;
  }
  .collectible .dice-stage .dice:nth-child(2) {
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 7px;
  }
  .collectible p {
    font-size: 10px;
    min-height: 34px;
  }
  .profile-banner {
    gap: 12px;
    padding: 12px;
  }
  .profile-banner h3 {
    font-size: 21px;
  }
  .profile-stats > div {
    font-size: 14px;
  }
  .profile-stats strong {
    font-size: 18px;
  }
}
@media (max-height: 740px) and (max-width: 700px) {
  .lobby-stage {
    min-height: 248px;
    gap: 10px;
  }
  .lobby-title {
    font-size: 19px;
  }
  .lobby-play,
  .lobby-team {
    min-height: 148px;
  }
  .play-medal .party-art {
    height: 65px;
  }
  .lobby-local button {
    min-height: 35px;
  }
  .mode-screen {
    align-content: start;
  }
}
.nav .dock-dice.dice,
.collection-tabs .dice,
.lobby-collection .dice {
  margin: 0;
  flex-shrink: 0;
}
.nav .dock-icon {
  display: grid;
  line-height: 1;
}
.nav button {
  overflow: visible;
}
.nav button > span:last-child {
  line-height: 1.5;
}
/* Explicit, high-contrast states on the cream game-setup screen. */
.mode-dialog,
.game-picker {
  background: #f5ead5;
  color: #422f28;
}
.mode-subtitle,
.mode-label {
  color: #543b2d;
}
.player-count {
  background: #284b7c;
  border-color: #17365f;
  box-shadow: 0 4px 0 #102d52;
  gap: 4px;
}
.player-count button {
  background: #315783;
  color: #f5f8ff;
  text-shadow: none;
  border: 1px solid #6888ad;
  position: relative;
}
.player-count button.chosen {
  background: linear-gradient(#ffe277, #f4b933);
  color: #4d2b0a;
  border: 2px solid #fff4b3;
  box-shadow: inset 0 2px 0 #fff9c7;
}
.player-count button.chosen:after {
  content: "✓";
  display: grid;
  place-items: center;
  position: absolute;
  top: -11px;
  inset-inline-start: 5px;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  color: #fff;
  background: #16804e;
  border: 2px solid #fff;
  box-shadow: 0 2px 0 #145130;
  font-size: 14px;
}
.player-count button:disabled {
  opacity: 1;
  background: #d0d3d7;
  color: #5c6570;
  border-color: #b5bcc4;
  box-shadow: none;
}
.mode-option {
  background: #e5cead;
  border: 1px solid #b89369;
  box-shadow: 0 3px 0 #b69773;
  color: #573421;
  position: relative;
}
.mode-option small {
  color: #654735;
}
.mode-option.chosen {
  background: #e6f6ff;
  border: 2px solid #1474b5;
  box-shadow: 0 4px 0 #165b8b;
  color: #114c7a;
}
.mode-option.chosen small {
  color: #284e69;
}
.mode-option.chosen:after {
  content: "✓";
  position: absolute;
  top: -10px;
  inset-inline-end: -2px;
  display: grid;
  place-items: center;
  background: #17834e;
  color: white;
  width: 22px;
  height: 22px;
  border: 2px solid white;
  border-radius: 50%;
  font-weight: 900;
  font-size: 13px;
}
.mode-emblem {
  background: radial-gradient(circle at 30% 20%, #ffd490, #c17b3d 70%, #9c5827);
  border-color: #fff0c5;
  color: #6e331a;
  text-shadow: 0 1px #ffe8a4;
}
.mode-emblem.mode-sprint {
  color: #a34a16;
}
.mode-emblem.mode-duel {
  color: #775440;
}
.chosen .mode-emblem {
  background: radial-gradient(circle at 30% 20%, #8febff, #1198da 70%, #146cac);
  border-color: #d4faff;
  color: #124a74;
  text-shadow: none;
}
.mode-rewards {
  background: #fffbf1;
  border-color: #7252b1;
  box-shadow: 0 4px 0 #b8a2ce;
}
.mode-rewards strong {
  color: #513622;
}
.mode-rewards p {
  color: #645242 !important;
}
.mode-dialog .primary,
.game-picker .primary {
  background: linear-gradient(#39d857, #18b43b 50%, #0a912e 51%, #16b33c);
  border: 2px solid #e2ffae;
  box-shadow:
    0 5px 0 #14602b,
    inset 0 2px 0 #9bfaab;
  color: white;
}
.mode-dialog .choices:not(.player-count) button,
.game-picker .choices button {
  background: linear-gradient(#408cd0, #215a96);
  border: 2px solid #a6dcff;
  color: #fff;
}
.mode-grid {
  gap: 8px;
}
@media (max-width: 700px) {
  .mode-grid {
    gap: 6px;
  }
  .mode-option {
    border-radius: 14px;
    padding: 10px 2px;
  }
  .mode-option small {
    font-size: 10px;
    line-height: 1.7;
  }
  .mode-emblem {
    width: 53px;
    height: 53px;
  }
  .mode-option strong {
    font-size: 14px;
  }
}
/* Touch carousel: play style, then game, then ruleset. */
.lobby-stage {
  width: 100%;
  min-width: 0;
  gap: 22px;
  min-height: 360px;
}
.lobby-title {
  font-size: 25px;
}
.lobby-carousel {
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 12px 6px 18px;
  -webkit-overflow-scrolling: touch;
}
.lobby-carousel::-webkit-scrollbar {
  display: none;
}
.lobby-card {
  flex: 0 0 calc(25% - 14px);
  min-width: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  border-radius: 27px;
  border: 2px solid #b4ffd1;
  background: linear-gradient(
    155deg,
    #5ae97b,
    #13bf43 54%,
    #08a535 55%,
    #0dc848
  );
  box-shadow:
    inset 0 3px 0 #efffffa0,
    0 7px 0 #096f36,
    0 12px 14px #11265777;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 18px 10px;
  min-height: 245px;
  position: relative;
  color: #fff;
  overflow: hidden;
}
.lobby-card strong {
  font-size: 23px;
  line-height: 1.5;
  font-weight: 900;
  text-shadow:
    0 2px 0 #173d39,
    1px 0 #173d39,
    -1px 0 #173d39;
}
.lobby-card small {
  font-size: 12px;
  font-weight: 650;
  text-shadow: 0 1px #183a39;
}
.tile-illustration {
  height: 100px;
  width: 145px;
  display: grid;
  place-items: center;
}
.tile-illustration svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 5px 1px #1d493544);
}
.card-go {
  margin-top: 4px;
  font-size: 12px;
  border-radius: 18px;
  background: #073e492e;
  padding: 5px 14px;
  border: 1px solid #fff5;
}
.lobby-teams {
  background: linear-gradient(
    155deg,
    #53e5df,
    #16babc 54%,
    #0a99ba 55%,
    #1bbed1
  );
  border-color: #b1fff5;
  box-shadow:
    inset 0 3px 0 #efffffa0,
    0 7px 0 #0b6e89,
    0 12px 14px #11265777;
}
.lobby-bot {
  background: linear-gradient(
    155deg,
    #a492ff,
    #785ee5 54%,
    #6147c1 55%,
    #8168e7
  );
  border-color: #e1d4ff;
  box-shadow:
    inset 0 3px 0 #efffffa0,
    0 7px 0 #473286,
    0 12px 14px #11265777;
}
.lobby-local {
  display: flex;
  margin: 0;
  width: auto;
  background: linear-gradient(
    155deg,
    #ffd774,
    #f1a039 54%,
    #d88825 55%,
    #f5b13d
  );
  border-color: #fff0bd;
  box-shadow:
    inset 0 3px 0 #efffffa0,
    0 7px 0 #966326,
    0 12px 14px #11265777;
}
.carousel-dots {
  display: flex;
  gap: 7px;
  justify-content: center;
}
.carousel-dots button {
  width: 44px;
  height: 25px;
  min-height: 25px;
  position: relative;
  padding: 0;
}
.carousel-dots button:after {
  content: "";
  display: block;
  background: #132e61;
  border: 1px solid #739bd1;
  border-radius: 20px;
  width: 9px;
  height: 9px;
  margin: auto;
  transition: width 0.2s;
}
.carousel-dots .selected:after {
  width: 28px;
  background: #f4d178;
  border-color: #ffe8a6;
}
.swipe-hint {
  font-size: 12px;
  color: #c1d8f3;
  line-height: 1.6;
}
.mode-grid:has(> :only-child) {
  grid-template-columns: 1fr;
  width: 180px;
  margin: auto;
}
dialog.game-select {
  background: #f4e7cf !important;
  color: #53392c !important;
  border: 0 !important;
  border-radius: 24px;
  max-width: 620px;
  width: calc(100% - 24px);
  max-height: 94dvh;
  padding: 0 !important;
}
.game-select .dialog-head {
  background: linear-gradient(#3563d6, #224caf) !important;
  padding: 23px !important;
  border-bottom: 4px solid #183570 !important;
  text-shadow: 0 2px #193875 !important;
}
.game-select .dialog-head h2 {
  font-size: 27px;
}
.game-select .dialog-head .icon-btn {
  background: #244b97 !important;
  border-color: #83afe5 !important;
}
.game-select .dialog-body {
  padding: 24px !important;
  gap: 24px;
}
.game-select-intro {
  text-align: center;
}
.game-select-intro h3 {
  font-size: 23px;
  color: #643e27;
}
.game-select-intro p {
  font-size: 13px;
  color: #816448;
}
.game-select-list {
  display: grid;
  gap: 20px;
}
.game-choice {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 16px;
  min-height: 125px;
  background: linear-gradient(135deg, #fffaf0, #e8d2a5);
  border: 2px solid #c29b62;
  border-radius: 23px;
  box-shadow:
    inset 0 2px white,
    0 5px 0 #ad8b5d;
  text-align: start;
  color: #543620;
}
.choice-art {
  width: 92px;
  height: 92px;
  flex: none;
  filter: drop-shadow(0 5px 4px #69452244);
}
.choice-art svg {
  width: 100%;
  height: 100%;
}
.game-choice strong {
  font-size: 25px;
  font-weight: 900;
}
.game-choice small {
  display: block;
  font-size: 12px;
  line-height: 1.8;
  color: #806243;
}
.game-choice > span {
  font-size: 33px;
  margin-inline-start: auto;
  color: #9d6d33;
}
.choice-ludo {
  background: linear-gradient(135deg, #fff4be, #efcb77);
  border-color: #c48b30;
}
.choice-snakes {
  background: linear-gradient(135deg, #eaffd6, #b8d4a2);
  border-color: #819e5f;
  box-shadow:
    inset 0 2px white,
    0 5px 0 #788d54;
}
.choice-backgammon {
  background: linear-gradient(135deg, #ffe8d1, #dcb291);
  border-color: #b27e54;
}
.game-choice:disabled {
  opacity: 1;
  filter: grayscale(1);
  background: #e0ddd6;
  color: #79736a;
  border-color: #b7b3ab;
  box-shadow: 0 4px 0 #b7b3ab;
}
.game-choice:disabled small {
  color: #726c65;
}
.game-select-note {
  text-align: center;
  color: #806243 !important;
  font-size: 12px !important;
}
@media (max-width: 700px) {
  .game-hub {
    justify-content: space-between;
  }
  .lobby-stage {
    min-height: 350px;
    gap: 14px;
    margin-inline: -14px;
    width: calc(100% + 28px);
  }
  .lobby-title {
    font-size: 25px;
  }
  .lobby-carousel {
    gap: 16px;
    padding: 12px 12% 18px;
  }
  .lobby-card {
    flex-basis: 100%;
    min-height: 265px;
    padding: 18px 14px;
    border-radius: 30px;
  }
  .lobby-card strong {
    font-size: 28px;
  }
  .lobby-card small {
    font-size: 14px;
  }
  .tile-illustration {
    height: 119px;
    width: 175px;
  }
  .card-go {
    font-size: 13px;
  }
  .carousel-dots {
    gap: 3px;
  }
  .swipe-hint {
    font-size: 12px;
  }
  .lobby-collection {
    margin-top: auto;
  }
  .game-select {
    width: 100% !important;
    height: 100dvh;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    max-width: none !important;
  }
  .game-select .dialog-head {
    padding: calc(23px + env(safe-area-inset-top)) 22px 23px !important;
  }
  .game-select .dialog-body {
    padding: 25px 18px calc(28px + env(safe-area-inset-bottom)) !important;
    min-height: calc(100dvh - 96px);
    align-content: space-between;
    gap: 24px;
  }
  .game-choice {
    min-height: 132px;
    gap: 15px;
    padding: 14px;
  }
  .choice-art {
    width: 84px;
    height: 84px;
  }
  .game-choice strong {
    font-size: 25px;
  }
  .game-choice small {
    font-size: 12px;
  }
  .game-select-list {
    gap: 22px;
  }
}
@media (max-height: 740px) and (max-width: 700px) {
  .lobby-stage {
    min-height: 325px;
    gap: 10px;
  }
  .lobby-card {
    min-height: 230px;
  }
  .tile-illustration {
    height: 92px;
  }
  .lobby-title {
    font-size: 21px;
  }
  .lobby-card strong {
    font-size: 25px;
  }
  .game-choice {
    min-height: 112px;
  }
  .choice-art {
    width: 70px;
    height: 70px;
  }
  .game-select-list {
    gap: 16px;
  }
  .game-select .dialog-body {
    gap: 18px;
  }
  .game-select-intro h3 {
    font-size: 21px;
  }
}
@media (min-width: 701px) {
  .carousel-dots,
  .swipe-hint {
    display: none;
  }
  .lobby-stage {
    min-height: 380px;
  }
}
/* Match view dedicates the screen to the board and bottom dice. */
.shell.game-view {
  max-width: 1200px;
}
.game-view .sidebar,
.game-view .topbar,
.game-view .game-tools {
  display: none !important;
}
.game-view .main {
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.game-view .game-top {
  margin: 0;
  min-height: 38px;
  flex-shrink: 0;
}
.game-view .game-top h2 {
  font-size: 16px;
}
.game-view .game-top small,
.game-view .game-top .eyebrow {
  display: none;
}
.game-view .game-top .icon-btn {
  width: 36px;
  height: 36px;
  min-height: 36px;
}
.game-view .timer-bar {
  height: 3px;
  margin: 4px 0;
}
.game-view .game-layout {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: auto 0;
}
.game-view .game-aside {
  display: contents;
}
.game-view .players {
  order: -1;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.game-view .player {
  padding: 5px 10px;
  border-radius: 12px;
  min-width: 0;
  flex: 1;
  max-width: 250px;
}
.game-view .players .avatar,
.game-view .bg-players .avatar {
  display: none;
}
.game-view .player small {
  font-size: 9px;
  margin: 0;
}
.game-view .player strong {
  font-size: 12px;
  max-width: none;
}
.game-view .game-main {
  width: min(100%, calc(100dvh - 192px));
  margin: 0 auto;
}
.game-view .board-frame {
  padding: 5px;
}
.game-view .dice-area {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  min-height: 79px;
  flex-direction: row;
}
.game-view .dice-area .primary {
  display: none;
}
.game-view .dice-area .dice {
  width: 65px;
  height: 65px;
  min-height: 65px;
  margin: 0;
  padding: 12px;
  gap: 4px;
  border-radius: 16px;
}
.game-view .game-status {
  margin: 0;
  min-height: 0;
  max-width: 190px;
  font-size: 13px;
}
.game-view .bg-players {
  margin: 0;
  gap: 8px;
  justify-content: center;
}
.game-view .bg-players .player {
  min-width: 0;
  padding: 4px 10px;
}
.game-view .bg-players small {
  display: none;
}
.game-view .backgammon-frame {
  width: min(100%, calc((100dvh - 175px) * 710 / 470));
  margin: auto;
  flex-shrink: 0;
  padding: 5px;
}
.game-view .bg-board {
  max-height: none;
}
.game-view .bg-controls {
  padding: 8px 0;
  gap: 16px;
  justify-content: center;
  flex-wrap: nowrap;
  flex-shrink: 0;
}
.game-view .bg-controls > .btn-row {
  display: none;
}
.game-view .bg-status {
  flex: 0 1 290px;
}
.game-view .bg-status strong {
  font-size: 12px;
}
.game-view .bg-status p {
  font-size: 11px;
  line-height: 1.6;
}
.game-view .remaining-dice {
  margin-top: 3px;
}
.game-view .remaining-dice span {
  padding: 2px 7px;
  font-size: 11px;
}
.game-view .bg-dice {
  gap: 10px;
}
.game-view .bg-dice .dice {
  width: 55px;
  height: 55px;
  min-height: 55px;
  padding: 10px;
  gap: 4px;
  border-radius: 14px;
}
@media (max-width: 700px) and (orientation: portrait) {
  .game-view .main {
    padding: calc(6px + env(safe-area-inset-top)) 5px
      calc(8px + env(safe-area-inset-bottom));
    gap: 5px;
    height: 100dvh;
    min-height: 100dvh;
  }
  .game-view .game-top {
    padding: 0 9px;
    min-height: 34px;
  }
  .game-view .game-top h2 {
    font-size: 14px;
  }
  .game-view .backgammon-frame {
    width: min(
      100%,
      calc(
        (
            100dvh - 170px - env(safe-area-inset-top) -
              env(safe-area-inset-bottom)
          ) *
          470 / 710
      )
    );
    aspect-ratio: 470/710;
    position: relative;
    padding: 0;
    border-radius: 16px;
    touch-action: none;
  }
  .game-view .backgammon-frame .bg-board {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 151.06383%;
    height: 66.19718%;
    max-width: none;
    max-height: none;
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center;
  }
  .game-view .bg-controls {
    padding: 6px 9px;
    gap: 14px;
    min-height: 82px;
  }
  .game-view .bg-status {
    flex: 1;
  }
  .game-view .bg-dice .dice {
    width: 51px;
    height: 51px;
    min-height: 51px;
    padding: 9px;
  }
  .game-view .bg-players {
    padding: 0 10px;
  }
  .game-view .game-main {
    width: min(100%, calc(100dvh - 190px));
  }
  .game-view .players {
    padding: 0 7px;
  }
  .game-view .players .player {
    padding: 4px 6px;
  }
  .game-view .players .player strong {
    font-size: 11px;
  }
  .game-view .game-layout {
    flex: 1;
    justify-content: center;
    width: 100%;
    gap: 12px;
  }
  .game-view .dice-area {
    min-height: 92px;
    gap: 18px;
  }
  .game-view .game-status {
    font-size: 14px;
  }
  .game-view .dice-area .dice {
    width: 70px;
    height: 70px;
    min-height: 70px;
    padding: 13px;
    gap: 5px;
  }
  .game-view .board-frame {
    border-radius: 15px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  .game-view .main {
    padding: 4px 8px;
    gap: 2px;
  }
  .game-view .game-top {
    min-height: 27px;
  }
  .game-view .game-top .icon-btn {
    height: 28px;
    min-height: 28px;
  }
  .game-view .bg-players {
    position: absolute;
    top: 5px;
    left: 65px;
    right: 170px;
    pointer-events: none;
  }
  .game-view .backgammon-frame {
    width: min(100%, calc((100dvh - 115px) * 710 / 470));
    padding: 2px;
  }
  .game-view .bg-controls {
    padding: 2px;
    min-height: 60px;
  }
  .game-view .bg-dice .dice {
    width: 43px;
    height: 43px;
    min-height: 43px;
    padding: 8px;
  }
  .game-view .game-layout {
    display: grid;
    grid-template-columns: 1fr 180px;
    align-items: center;
    gap: 10px;
  }
  .game-view .players {
    grid-column: 2;
    grid-row: 1;
    flex-direction: column;
  }
  .game-view .game-main {
    grid-row: 1/3;
    width: min(100%, calc(100dvh - 45px));
  }
  .game-view .dice-area {
    grid-column: 2;
    min-height: 70px;
    flex-direction: column;
  }
  .game-view .game-status {
    font-size: 11px;
  }
}
.checker-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 650;
  color: #e3edfc;
  margin-inline-start: 8px;
  white-space: nowrap;
}
.checker-dot {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 25%,
    var(--checker),
    var(--checker) 45%,
    #26352d
  );
  border: 1.5px solid #e5ce93;
  box-shadow: 0 2px 0 #102743;
}
.checker-white {
  background: radial-gradient(circle at 30% 25%, #fffef4, #e6d7b8 70%, #ac956c);
  border-color: #fff5df;
}
.checker-black {
  background: radial-gradient(circle at 30% 25%, #68746a, #20382f 60%, #101b18);
  border-color: #9ba99f;
}
.game-status .checker-label,
.bg-status .checker-label {
  display: flex;
  margin: 5px 0 0;
  justify-content: center;
  font-size: 12px;
}
.bg-status .checker-label {
  justify-content: flex-start;
}
.game-view .bg-players .player strong {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
}
.game-view .bg-players .checker-label {
  margin: 0;
  font-size: 12px;
}
.game-view .bg-players .player {
  padding: 5px 8px;
}
.game-view .players .checker-label {
  display: flex;
  margin: 2px 0 0;
  font-size: 10px;
}
.game-view .players .checker-dot {
  width: 14px;
  height: 14px;
}
.game-view .backgammon-frame {
  width: min(100%, calc((100dvh - 198px) * 710 / 470));
}
@media (max-width: 700px) and (orientation: portrait) {
  .game-view .backgammon-frame {
    width: min(
      100%,
      calc(
        (
            100dvh - 198px - env(safe-area-inset-top) -
              env(safe-area-inset-bottom)
          ) *
          470 / 710
      )
    );
  }
  .game-view .bg-status strong {
    font-size: 12px;
  }
  .game-view .bg-status .checker-label {
    font-size: 12px;
  }
  .game-view .bg-status p {
    font-size: 10px;
  }
  .game-view .game-main {
    width: min(100%, calc(100dvh - 213px));
  }
}
.account-screen {
  width: min(100%, 560px);
  min-height: 100dvh;
  margin: auto;
  padding: 18px 20px 30px;
}
.account-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0 22px;
}
.account-header .logo strong {
  font-size: 23px;
}
.account-header .brand-mark {
  width: 39px;
  height: 39px;
  font-size: 29px;
}
.account-header .logo small {
  font-size: 8px;
}
.account-panel {
  background: #f4e6cb;
  border: 3px solid #fff3d5;
  border-radius: 28px;
  padding: 22px;
  color: #563a2b;
  box-shadow:
    0 7px 0 #a18d70,
    0 20px 40px #10275755;
  text-align: center;
}
.account-art {
  width: 116px;
  height: 76px;
  margin: 0 auto 7px;
}
.account-art svg {
  width: 100%;
  height: 100%;
}
.account-panel h1 {
  font-size: 25px;
}
.account-panel > p {
  font-size: 12px;
  color: #86684c;
}
.account-tabs {
  display: flex;
  gap: 6px;
  background: #244975;
  border-radius: 15px;
  padding: 4px;
  margin: 22px 0 18px;
}
.account-tabs button {
  flex: 1;
  color: #e2eeff;
  font-size: 15px;
  font-weight: 800;
  border-radius: 12px;
}
.account-tabs .selected {
  background: linear-gradient(#ffe47d, #eeb531);
  color: #513209;
  box-shadow: 0 2px #936b2d;
}
.account-panel .auth-form {
  gap: 14px;
  margin: 0;
}
.account-panel label {
  color: #68452e;
  font-weight: 650;
  font-size: 13px;
}
.account-panel input {
  background: #fffaf0;
  border: 1.5px solid #b8a078;
  color: #213d66;
  font-size: 16px;
  border-radius: 12px;
  padding: 12px;
}
.account-panel input::placeholder {
  color: #9c9a92;
  font-size: 12px;
}
.account-panel .primary {
  font-size: 19px;
  min-height: 53px;
  margin-top: 5px;
}
.account-panel .primary:disabled {
  opacity: 1;
  background: #bbbdb6;
  color: #515652;
  box-shadow: 0 4px #8b9186;
  border-color: #e0e2da;
  text-shadow: none;
}
.account-switch {
  font-size: 13px;
  color: #235b91;
  font-weight: 750;
  margin-top: 12px;
}
.account-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #8c755c;
  font-size: 12px;
  margin: 12px 0;
}
.account-divider:before,
.account-divider:after {
  content: "";
  height: 1px;
  flex: 1;
  background: #c6ad8733;
}
.google-signin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #fff;
  color: #25344a;
  border: 1px solid #999c9f;
  border-radius: 11px;
  min-height: 52px;
  font-size: 16px;
  font-weight: 650;
  width: 100%;
  box-shadow: 0 3px 0 #d0c6b5;
}
.google-signin:disabled {
  opacity: 1;
  background: #e7e4dd;
  color: #686d74;
  border-color: #aeb1b3;
}
.google-g {
  font:
    700 25px Arial,
    sans-serif;
  color: #4285f4;
}
.provider-note {
  font-size: 11px !important;
  line-height: 1.9 !important;
  color: #8a6646 !important;
  margin: 10px 0;
}
.account-bottom {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.account-bottom button {
  flex: 1;
  border: 1px solid #bd9d77;
  border-radius: 12px;
  color: #67513c;
  background: #eedabc;
  font-size: 12px;
}
.account-privacy {
  font-size: 10px !important;
  line-height: 1.8;
  margin-top: 16px;
}
.account-panel .text-button {
  color: #326590;
}
@media (max-width: 700px) {
  .account-screen {
    padding: calc(12px + env(safe-area-inset-top)) 14px
      calc(25px + env(safe-area-inset-bottom));
  }
  .account-panel {
    padding: 19px 17px;
  }
  .account-panel h1 {
    font-size: 23px;
  }
  .account-header {
    padding-bottom: 15px;
  }
  .account-art {
    width: 103px;
    height: 66px;
  }
}
.league-lobby-button {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: start;
  border: 1px solid #e8c38c;
  border-radius: 14px;
  padding: 10px 14px;
  background: linear-gradient(130deg, #806aab, #494983);
  box-shadow: 0 3px #273461;
}
.league-lobby-button > span {
  font-size: 30px;
  color: #ffdc7a;
}
.league-lobby-button strong {
  font-size: 15px;
}
.league-lobby-button small {
  font-size: 10px;
  color: #e5dcf6;
}
.league-lobby-button b {
  margin-inline-start: auto;
}
.league-empty {
  text-align: center;
  padding: 70px 20px;
}
.league-empty > span {
  font-size: 80px;
  color: var(--gold);
}
.league-empty h2 {
  margin: 15px;
}
.league-empty p {
  font-size: 14px;
}
.league-card {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  text-align: start;
  padding: 20px;
  background: linear-gradient(120deg, #4967a4, #344577);
  border: 1px solid #9baed5;
  border-radius: 20px;
  margin: 16px 0;
  box-shadow: 0 4px #172f63;
}
.league-medal {
  font-size: 50px;
  color: #ffcd6e;
}
.league-card b {
  margin-inline-start: auto;
}
.league-card p,
.league-card small {
  font-size: 12px;
}
.league-summary {
  display: grid;
  gap: 12px;
}
.league-prizes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.league-prizes span {
  padding: 8px 13px;
  background: #e9c881;
  border: 1px solid #b88935;
  border-radius: 12px;
  color: #6d4a1d;
  font-weight: 800;
}
.league-standings {
  max-height: 40dvh;
  overflow: auto;
}
.league-standings .list-row {
  border-bottom: 1px solid #b08f6033;
  color: #634f38;
}
.admin-leagues h1 {
  margin-bottom: 20px;
}
.admin-leagues > p {
  font-size: 13px;
  margin-top: 14px;
}
.league-admin-card {
  border: 1px solid #8aa5ce;
  border-radius: 18px;
  padding: 20px;
  margin-top: 20px;
  background: #19386a;
}
.league-admin-card p {
  font-size: 13px;
  margin: 10px 0;
}
.league-admin-card .btn-row {
  flex-wrap: wrap;
}
.league-admin-card button {
  font-size: 12px;
  min-height: 42px;
}
.form-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
#league-form label {
  color: #775738;
}
#league-form input,
#league-form select {
  font-size: 14px;
  background: #fff7e6;
  color: #4e3d2c;
  border: 1px solid #b3976b;
}
@media (max-width: 700px) {
  .league-lobby-button {
    padding: 7px 12px;
  }
  .league-lobby-button small {
    font-size: 9px;
  }
  .game-hub {
    gap: 12px;
  }
  .lobby-stage {
    min-height: 325px;
  }
  .lobby-card {
    min-height: 245px;
  }
  .tile-illustration {
    height: 100px;
  }
  .league-card {
    padding: 14px;
    gap: 10px;
  }
  .league-card h3 {
    font-size: 18px;
  }
}
.coin-shop {
  color: #28456a;
}
.payment-provider {
  background: #214fa0;
  color: white;
  border-radius: 14px;
  padding: 12px;
  text-align: center;
  font-weight: 800;
}
.payment-notice {
  background: #fff2c6;
  color: #69451c;
  border: 1px solid #d8ac50;
  border-radius: 12px;
  padding: 12px;
  line-height: 1.9;
}
.coin-pack-list {
  display: grid;
  gap: 12px;
  margin: 18px 0;
}
.coin-pack {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff7df;
  border: 2px solid #d3ac61;
  border-radius: 18px;
  padding: 16px;
  margin: 8px 0;
}
.coin-pack > div {
  flex: 1;
}
.coin-pack h3,
.coin-pack p {
  margin: 4px 0;
}
.coin-stack {
  color: #d98b00;
  font-size: 24px;
  text-shadow: 0 2px #fff;
}
.coin-pack .primary {
  min-width: 66px;
}
.coin-pack small {
  font-size: 12px;
}
.coin-pack button:disabled {
  opacity: 0.5;
  filter: grayscale(0.6);
}
.avatar-picker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  border: 0;
  padding: 12px 0;
}
.avatar-picker legend {
  font-weight: 800;
  padding-block: 10px;
}
.avatar-picker label {
  position: relative;
  text-align: center;
  color: #254c79;
  font-weight: 800;
  font-size: 11px;
}
.avatar-picker input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.avatar-picker span {
  display: grid;
  place-items: center;
  font-size: 34px;
  min-height: 60px;
  border: 3px solid #c4cfe3;
  background: #fff8e7;
  border-radius: 18px;
  cursor: pointer;
  overflow: hidden;
  padding: 0;
}
.avatar-picker .avatar-art {
  display: block;
  width: 100%;
  height: 60px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: inherit;
}
.avatar-picker label > small {
  display: block;
  min-height: 30px;
  padding-top: 6px;
  line-height: 1.25;
}
.avatar-picker input:checked + span {
  border-color: #178cbe;
  background: #b7f3ff;
  box-shadow: 0 3px #1169a0;
}
.avatar-picker input:focus-visible + span {
  outline: 3px solid #2354cc;
}
.match-chat-button {
  position: fixed;
  bottom: max(12px, env(safe-area-inset-bottom));
  inset-inline-start: 12px;
  z-index: 20;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #e8f6ff;
  border: 2px solid #33a6da;
  font-size: 23px;
  box-shadow: 0 3px #174d89;
}
.phrase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.phrase-grid button {
  font-size: 13px;
  padding: 12px 8px;
}
.reaction-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin: 20px 0;
}
.reaction-grid button {
  background: #e7efff;
  border: 1px solid #98aed3;
  border-radius: 12px;
  font-size: 26px;
  padding: 8px 0;
}
.reaction-grid button:disabled {
  filter: grayscale(1);
  opacity: 0.4;
}
.reaction-showcase {
  font-size: 42px;
  text-align: center;
  line-height: 2;
}
.chat-history {
  font-size: 13px;
  color: #354a6a;
  border-top: 1px solid #b6a47d;
  margin-top: 16px;
}
.coin-stack {
  flex: 0 0 30px;
  max-width: 30px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 30px;
}
.coin-pack h3 {
  white-space: nowrap;
  font-size: 17px;
}
.coin-pack small {
  display: block;
  line-height: 1.6;
}
#profile-form > label {
  color: #38516f;
  font-weight: 800;
}
#profile-form > p {
  color: #4b5b6d;
  font-size: 13px;
  line-height: 1.9;
}
#profile-form input[name="name"] {
  font-size: 16px;
}

/* Offline retains the full local game while network features are unavailable. */
[data-offline-disabled="true"] { filter: grayscale(1); opacity: .48; cursor: not-allowed; }
html[data-connection="offline"] .status-dot { background: #93a0ac; box-shadow: none; }
html[data-connection="offline"] .lobby-card[data-offline-disabled] small { visibility: hidden; }
html[data-connection="offline"] .lobby-card[data-offline-disabled]::after {
  content: "آفلاین"; position: absolute; bottom: 18px; inset-inline: 12px; text-align: center; font-size: 13px; color: white;
}
html[lang="en"][data-connection="offline"] .lobby-card[data-offline-disabled]::after { content: "Offline"; }

/* Landscape match stage: seat colours stay attached to their board edge. */
.shell.game-view.bg-landscape {
  --stage-width: 100dvw;
  --stage-height: 100dvh;
  --rail: clamp(78px, 11vw, 120px);
  width: var(--stage-width);
  max-width: none;
  height: var(--stage-height);
  margin: 0;
  position: relative;
}
.game-view.bg-landscape .main {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.game-view.bg-landscape .backgammon-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(calc(var(--stage-width) - 2 * var(--rail) - 16px), calc((var(--stage-height) - 18px) * 710 / 470));
  aspect-ratio: 710 / 470;
  margin: 0;
  padding: 0;
  touch-action: none;
}
.game-view.bg-landscape .backgammon-frame .bg-board {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  transform: none;
}
.game-view.bg-landscape .bg-players { display: contents; }
.game-view.bg-landscape .bg-players .player {
  position: absolute;
  width: var(--rail);
  max-width: var(--rail);
  padding: 8px 3px;
  margin: 0;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
  pointer-events: auto;
}
.game-view.bg-landscape .bg-seat-0 { left: env(safe-area-inset-left, 0px); bottom: 12px; }
.game-view.bg-landscape .bg-seat-1 { right: env(safe-area-inset-right, 0px); top: 12px; }
.game-view.bg-landscape .bg-players .avatar { display: grid; width: 38px; height: 38px; font-size: 23px; }
.game-view.bg-landscape .bg-players strong { font-size: 12px; overflow-wrap: anywhere; text-align: center; }
.game-view.bg-landscape .bg-players small { display: block; font-size: 9px; text-align: center; margin-top: 5px; }
.game-view.bg-landscape .game-top {
  position: absolute; left: 8px; top: 10px; width: calc(var(--rail) - 16px);
  display: flex; flex-direction: column; gap: 5px; padding: 0;
}
.game-view.bg-landscape .game-top h2 { font-size: 12px; }
.game-view.bg-landscape .bg-controls { display: contents; }
.game-view.bg-landscape .bg-dice {
  position: absolute; right: 12px; bottom: 15px;
  width: calc(var(--rail) - 24px); display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.game-view.bg-landscape .bg-dice .dice { width: 48px; height: 48px; min-height: 48px; padding: 9px; }
.game-view.bg-landscape .bg-status {
  position: absolute; left: 5px; top: 92px; width: calc(var(--rail) - 10px);
  text-align: center; margin: 0;
}
.game-view.bg-landscape .bg-status strong { font-size: 10px; }
.game-view.bg-landscape .bg-status p { font-size: 10px; line-height: 1.7; }
.game-view.bg-landscape .bg-status .checker-label { justify-content: center; font-size: 10px; }
.game-view.bg-landscape .timer-bar { position: absolute; top: 0; left: var(--rail); right: var(--rail); margin: 0; }
.game-view.bg-landscape .match-chat-button { right: 18px; bottom: 135px; }
@media (max-width: 700px) and (orientation: portrait) {
  /* Rotate the complete stage, including labels and dice, in mobile browsers. */
  .shell.game-view.bg-landscape {
    --stage-width: 100dvh;
    --stage-height: 100dvw;
    --rail: 82px;
    position: fixed; top: 0; left: 100%;
    transform: rotate(90deg); transform-origin: top left;
  }
}
.shell.game-view.bg-landscape { min-height: 0; }
.game-view.bg-landscape .bg-status strong { display: none; }

.game-main .board-frame { position: relative; }
.board-dice-throw {
  position: absolute; inset: 0; z-index: 20;
  pointer-events: none; overflow: hidden; border-radius: inherit;
}
.thrown-die { position: absolute; left: calc(50% + var(--offset)); top: 50%; width: 0; height: 0; }
.board-dice-throw .dice {
  position: absolute; left: -25px; top: -25px;
  display: grid; width: 50px; height: 50px; min-height: 50px;
  margin: 0; padding: 9px; gap: 3px; border-radius: 11px;
  box-shadow: inset 2px 3px 3px #ffffff88, inset -2px -4px 3px #0005, 4px 7px 0 #1b1c2466, 7px 12px 12px #0007;
  will-change: transform;
}

.throwing-dice .bg-dice, .throwing-dice .dice-area > .dice { opacity: .28; filter: brightness(.72); }
/* Both identities share the right rail; the board perspective is per account. */
.game-view.bg-landscape .bg-players {
  display: flex; position: absolute; right: env(safe-area-inset-right, 0px);
  top: 10px; left: auto; width: var(--rail); flex-direction: column; gap: 10px;
}
.game-view.bg-landscape .bg-players .player {
  position: static; width: 100%; max-width: none; flex: none; padding: 7px 3px;
}
.game-view.bg-landscape .bg-players .avatar { width: 30px; height: 30px; font-size: 20px; }
.game-view.bg-landscape .bg-dice { left: 12px; right: auto; }
.game-view.bg-landscape .bg-status { top: 80px; }
.game-view.bg-landscape .match-chat-button { right: 18px; bottom: 12px; }
/* Opponents sit at opposite ends of the right-hand player rail. */
.game-view.bg-landscape .bg-players {
  top: 10px;
  bottom: 10px;
  justify-content: space-between;
}

.game-view.bg-landscape .bg-players .bg-self { order: 1; }
.game-view.bg-landscape .match-chat-button { bottom: 50%; }

.bg-turn-badge { display: block; margin-top: 5px; padding: 3px 4px; border-radius: 6px; background: #ffe08a; color: #32240b; font-size: 10px; font-weight: 800; text-align: center; }
.game-view.bg-landscape .bg-players .player.active { border: 2px solid #ffe08a; box-shadow: 0 0 12px #ffd65b66; }

/* Dice follow the active player's upper/lower side, in board coordinates. */
.game-view.bg-landscape .backgammon-frame .bg-dice {
  left: auto; right: 10%; bottom: auto; width: auto;
  flex-direction: row; gap: 10px; transform: translateY(-50%); z-index: 2;
}
.game-view.bg-landscape .backgammon-frame .bg-dice-top { top: 40%; }
.game-view.bg-landscape .backgammon-frame .bg-dice-bottom { top: 60%; }
.throw-top .thrown-die { top: 40%; }
.throw-bottom .thrown-die { top: 60%; }
.collection-tabs { overflow-x: auto; }
.collection-tabs > button { flex: 1 0 90px; }
.bg-shop-preview { width: 100%; background: radial-gradient(ellipse, #536681, #111e36); border-radius: 14px; padding: 8px; margin: 12px 0; }
.bg-shop-preview svg { display: block; width: 100%; height: auto; }
.game-view .bg-dice:has(button:disabled) { pointer-events: none; }
.match-opening { position: absolute; inset: 0; perspective: 1100px; pointer-events: none; z-index: 25; }
.opening-half { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; backface-visibility: hidden; }
.opening-half-0 { left: 0; transform-origin: right center; }
.opening-half-1 { right: 0; transform-origin: left center; }
.game-view .match-opening .opening-half > svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; transform: none; overflow: hidden; }

.match-entering .bg-dice, .match-entering .dice-area { opacity: 0; pointer-events: none; }
.match-entering .backgammon-frame, .match-entering .board-frame { pointer-events: none; }

.intro-preview-replay { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 40; padding: 7px 16px; background: #ffe3a1; color: #352711; border-radius: 18px; font-size: 12px; }

.game-view .match-opening .opening-half > .intro-board-svg { width: 100%; height: 100%; left: 0; overflow: hidden; }
.match-opening { overflow: hidden; border-radius: inherit; }

.cosmetic-price { display: inline-block; margin: 6px 0 10px; padding: 5px 14px; border: 1px solid #e7b954; border-radius: 20px; background: #fff0bb; color: #593909; font-weight: 800; font-size: 15px; }

.admin-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:20px 0}.admin-stats article{display:grid;gap:8px;padding:18px;background:#142a50;border:1px solid #69b6e2;border-radius:14px;color:white}.admin-stats b{font-size:24px}.admin-table{overflow:auto;margin:16px 0}.admin-table table{width:100%;border-collapse:collapse;min-width:700px}.admin-table th,.admin-table td{padding:12px;text-align:start;border-bottom:1px solid #7895bb}.admin-table small{display:block;font-size:11px}#store-editor label{display:grid;gap:6px;margin:12px 0}#store-editor select{padding:12px;max-width:100%}#admin-search{display:flex;gap:8px}#admin-search input{min-width:0;flex:1}