/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .visible {
    visibility: visible;
  }

  .static {
    position: static;
  }

  .block {
    display: block;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .table {
    display: table;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
}

:root {
  color: #edf0fc;
  font-synthesis: none;
  --muted: #9298b3;
  --purple: #9272f9;
  --line: #292d46;
  background: #0b0d19;
  font-family: Tahoma, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

button, input, select {
  font: inherit;
}

button, a, input, select {
  -webkit-tap-highlight-color: transparent;
}

button, a {
  touch-action: manipulation;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  border: 1px solid var(--line);
  color: inherit;
  background: #24283d;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 16px;
  display: inline-flex;
}

button:hover:not(:disabled) {
  background: #343950;
}

button:disabled {
  opacity: .4;
  cursor: default;
}

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline-offset: 3px;
  outline: 2px solid #b39aff;
}

h1, h2, h3, p {
  margin: 0;
}

h1 {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.7;
}

h2 {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.7;
}

h3 {
  font-size: 15px;
  font-weight: 700;
}

p {
  font-size: 14px;
  line-height: 1.9;
}

small {
  font-size: 11px;
  line-height: 1.8;
}

input, select {
  color: #f3f4fa;
  border: 1px solid var(--line);
  background: #101423;
  border-radius: 10px;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 12px;
}

input[type="checkbox"] {
  width: 38px;
  min-height: 22px;
  accent-color: var(--purple);
}

label {
  font-size: 13px;
}

label > input, label > select {
  margin-top: 7px;
}

summary {
  cursor: pointer;
  padding: 8px 0;
}

progress {
  width: 100%;
  height: 7px;
  accent-color: var(--purple);
}

.app-shell {
  direction: rtl;
  background: radial-gradient(at 100% 0, #1c193d 0, #0000 45%), #101321;
  max-width: 620px;
  min-height: 100dvh;
  margin: auto;
  padding-bottom: 86px;
}

.topbar {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 21px 22px 15px;
  display: flex;
}

.identity {
  align-items: center;
  gap: 10px;
  display: flex;
}

.identity b {
  font-size: 14px;
}

.identity small {
  color: var(--muted);
  font-size: 10px;
  display: block;
}

.avatar {
  background: linear-gradient(135deg, #a585ff, #5e58a5);
  border: 2px solid #c1a9ff55;
  border-radius: 15px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 41px;
  height: 41px;
  font-weight: bold;
  display: inline-flex;
}

.avatar.large {
  border-radius: 26px;
  width: 76px;
  height: 76px;
  font-size: 30px;
}

.balances {
  align-items: center;
  gap: 10px;
  font-size: 11px;
  display: flex;
}

.balances > span {
  align-items: center;
  gap: 4px;
  display: flex;
}

.balances > span:first-child svg {
  color: #ebc26e;
}

.balances > span:nth-child(2) svg {
  color: #8dcaf9;
}

.page {
  flex-direction: column;
  gap: 17px;
  padding: 9px 22px 25px;
  display: flex;
}

.page-heading {
  align-items: center;
  gap: 12px;
  margin: 4px 0;
  display: flex;
}

.panel {
  border: 1px solid var(--line);
  background: #1b1f31;
  border-radius: 18px;
  padding: 19px;
}

.panel > p {
  margin: 8px 0;
}

.panel > button {
  margin-top: 12px;
}

.welcome-banner {
  background: linear-gradient(120deg, #282654, #534296);
  border: 1px solid #7761c763;
  border-radius: 22px;
  min-height: 179px;
  padding: 24px;
  position: relative;
  overflow: hidden;
}

.welcome-banner h2 {
  margin: 6px 0;
  font-size: 27px;
  line-height: 1.55;
}

.welcome-banner p {
  color: #cbc4eb;
  font-size: 12px;
}

.eyebrow {
  color: #c3b1ff;
  letter-spacing: .5px;
  font-size: 10px;
}

.banner-star {
  color: #b39bed;
  opacity: .6;
  position: absolute;
  top: 50px;
  left: 26px;
  transform: rotate(-15deg);
}

.section-title {
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  display: flex;
}

.section-title a {
  color: #a993e6;
  align-items: center;
  font-size: 11px;
  display: flex;
}

.featured-game {
  background: linear-gradient(110deg, #24223d, #252a48);
  border: 1px solid #51476b;
  border-radius: 20px;
  align-items: center;
  gap: 20px;
  padding: 21px 17px;
  display: flex;
}

.featured-game h2 {
  margin: 5px 0;
  font-size: 26px;
}

.featured-game p {
  color: #c2c4d6;
  font-size: 12px;
}

.featured-game .muted {
  font-size: 10px;
}

.play-link {
  color: #d0bdff;
  gap: 9px;
  margin-top: 13px;
  font-size: 13px;
  display: flex;
}

.tag {
  color: #c7b6ef;
  background: #806bc728;
  border: 1px solid #8b73ca40;
  border-radius: 6px;
  padding: 3px 7px;
  font-size: 9px;
  display: inline-block;
}

.ludo-art {
  background: #dce3f2;
  border: 5px solid #dce3f2;
  border-radius: 17px;
  flex-shrink: 0;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  width: 106px;
  height: 106px;
  display: grid;
  position: relative;
  transform: rotate(-9deg);
  box-shadow: 0 12px 25px #0005;
}

.ludo-art i {
  background: #43bf95;
  border-radius: 8px;
  box-shadow: inset 0 0 0 8px #fff4;
}

.ludo-art i:nth-child(2) {
  background: #f5c94b;
}

.ludo-art i:nth-child(3) {
  background: #679cf9;
}

.ludo-art i:nth-child(4) {
  background: #ee6b85;
}

.ludo-art svg {
  color: #fff;
  filter: drop-shadow(0 2px 3px #0009);
  position: absolute;
  top: 26px;
  left: 26px;
}

.private-entry {
  background: #202339;
  border: 1px solid #3b3856;
  border-radius: 17px;
  align-items: center;
  gap: 14px;
  padding: 17px 15px;
  display: flex;
}

.private-entry p {
  color: var(--muted);
  margin-top: 5px;
  font-size: 11px;
}

.private-entry > svg {
  color: #9288b4;
  margin-right: auto;
}

.icon-box {
  color: #c6a5f8;
  background: #3f365c;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  width: 43px;
  height: 43px;
  display: flex;
}

.coming-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  display: grid;
}

.coming-grid .panel {
  text-align: center;
  padding: 17px 8px;
}

.coming-grid svg {
  color: #78758f;
  margin: 0 auto 8px;
}

.coming-grid h3 {
  margin-bottom: 5px;
}

.quiet-row {
  color: #757990;
  justify-content: center;
  gap: 16px;
  margin: 5px 0;
  font-size: 10px;
  display: flex;
}

.quiet-row span {
  align-items: center;
  gap: 5px;
  display: flex;
}

.bottom-nav {
  z-index: 20;
  width: 100%;
  max-width: 620px;
  padding: 12px 8px calc(13px + env(safe-area-inset-bottom));
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  background: #171a2ded;
  border-top: 1px solid #32324b;
  justify-content: space-around;
  display: flex;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.bottom-nav a {
  color: #858ba6;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  min-width: 50px;
  font-size: 10px;
  display: flex;
}

.bottom-nav a.active {
  color: #b89bff;
}

.bottom-nav a.active svg {
  filter: drop-shadow(0 0 7px #956bfa88);
}

.primary {
  color: #fff;
  background: linear-gradient(105deg, #8f6be2, #6957d4);
  border-color: #a288ed;
  width: 100%;
  font-weight: bold;
}

.primary:hover:not(:disabled) {
  background: #9272ed;
}

.muted {
  color: var(--muted);
}

.row {
  align-items: center;
  gap: 10px;
  display: flex;
}

.form {
  flex-direction: column;
  gap: 17px;
  display: flex;
}

.chips {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.chips button {
  background: #1d2134;
  padding: 8px 18px;
  font-size: 12px;
}

.chips button.selected {
  background: #66529d;
  border-color: #a084e3;
}

.search {
  border: 1px solid var(--line);
  background: #1c2033;
  border-radius: 13px;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  display: flex;
}

.search input {
  background: none;
  border: 0;
  margin: 0;
  padding-right: 0;
}

.search button {
  border: 0;
  padding: 5px;
}

.game-list {
  gap: 15px;
  display: grid;
}

.game-intro {
  text-align: center;
}

.game-intro .ludo-art {
  margin: 10px auto 25px;
}

.room-code {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  display: flex;
}

.room-code > b {
  letter-spacing: 6px;
  font-size: 32px;
}

.lobby-slots {
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  display: grid;
}

.player-slot {
  text-align: center;
  position: relative;
}

.player-slot h3 {
  margin: 10px 0 3px;
}

.player-slot small {
  color: var(--muted);
}

.player-slot > .green {
  position: absolute;
  top: 14px;
  left: 12px;
}

.queue-orbit {
  color: #b299e6;
  border: 2px dashed #8b72bd;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 130px;
  height: 130px;
  margin: 24px auto;
  animation: 2s ease-in-out infinite breath;
  display: flex;
}

.center {
  text-align: center;
}

.profile-hero {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  display: flex;
}

.profile-hero p, .profile-hero small {
  color: var(--muted);
}

.id-copy {
  gap: 5px;
  max-width: 100%;
  padding: 7px;
  font-size: 9px;
}

.id-copy span {
  overflow-wrap: anywhere;
}

.stats-grid {
  text-align: center;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 18px;
  display: grid;
}

.stats-grid b, .stats-grid small {
  display: block;
}

.stats-grid b {
  font-size: 21px;
}

.stats-grid small {
  color: var(--muted);
}

.empty {
  text-align: center;
  padding: 30px 15px;
}

.empty > svg {
  color: #ad92e0;
  margin: auto;
}

.empty a {
  color: #c5a9ff;
}

.person {
  justify-content: space-between;
  align-items: center;
  gap: 9px;
  display: flex;
}

.person small {
  color: var(--muted);
  display: block;
}

.person button {
  font-size: 11px;
}

.setting {
  border-bottom: 1px solid #ffffff08;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 13px 0;
  display: flex;
}

.setting span {
  align-items: center;
  gap: 10px;
  display: flex;
}

.setting:last-child {
  border: 0;
}

.links > a {
  border-bottom: 1px solid #ffffff09;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  font-size: 13px;
  display: flex;
}

.links > a > svg:last-child {
  width: 17px;
  margin-right: auto;
}

.links p {
  margin-top: 20px;
}

.danger {
  color: #ff9aad;
}

.prose {
  font-size: 14px;
  line-height: 2.2;
}

.result-trophy {
  color: #efc865;
  background: #b98d2b1c;
  border-radius: 50%;
  margin: 15px auto;
  padding: 25px;
}

.result-row {
  align-items: center;
  gap: 18px;
  display: flex;
}

.result-row small {
  color: #aaa6c3;
  display: block;
}

.result-row svg {
  margin-right: auto;
}

.placement {
  color: #b7a4e6;
  font-size: 27px;
}

.gold {
  color: #efc865;
}

.toast {
  z-index: 100;
  background: #34314e;
  border: 1px solid #9f88d4;
  border-radius: 14px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: calc(100% - 28px);
  max-width: 560px;
  padding: 15px 18px;
  font-size: 13px;
  display: flex;
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 10px 30px #0008;
}

.toast button {
  width: 26px;
  min-height: 26px;
  padding: 0;
}

.resume {
  color: #cebbff;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  display: flex;
}

.login {
  text-align: center;
  background: radial-gradient(at 50% 30%, #322754, #0d101e 60%);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 21px;
  min-height: 100dvh;
  padding: 35px 24px;
  display: flex;
}

.brand-mark {
  background: linear-gradient(130deg, #a383f7, #4b40a0);
  border-radius: 27px;
  padding: 25px;
  box-shadow: 0 20px 70px #7755b444;
}

.wordmark {
  letter-spacing: 5px;
  font-size: 23px;
}

.login h1 {
  font-size: 23px;
}

.login > p, .login > small {
  color: #b5aec8;
}

.login .panel {
  width: 100%;
  max-width: 380px;
}

.login label {
  margin: 15px 0;
  display: block;
}

.in-game {
  max-width: 650px;
  padding: 0;
}

.match-page {
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  min-height: 100dvh;
  padding: 12px 14px;
  display: flex;
  position: relative;
}

.match-header {
  justify-content: space-between;
  align-items: center;
  padding: 0 3px;
  display: flex;
}

.match-header small {
  color: var(--muted);
  margin-right: 8px;
  font-size: 10px;
}

.timer {
  color: #ddcbff;
  align-items: center;
  gap: 3px;
  display: flex;
}

.board-shell {
  width: min(100%, 680px, 100dvh - 270px);
  min-width: min(100%, 290px);
  margin: 0 auto;
  padding: 72px 0;
  position: relative;
}

.board {
  aspect-ratio: 1;
  direction: ltr;
  background: none;
  border: 0;
  border-radius: 50%;
  width: 100%;
  position: relative;
  box-shadow: 0 18px 45px #000b;
}

.board svg, .ludo-board-canvas {
  shape-rendering: geometricprecision;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  display: block;
}

.green {
  color: #37c696;
}

.yellow {
  color: #f4c74c;
}

.blue {
  color: #6d9dff;
}

.red {
  color: #f26b7c;
}

.board-player {
  background: #1f2235;
  border: 1px solid #393951;
  border-radius: 13px;
  align-items: center;
  gap: 7px;
  min-width: 110px;
  max-width: 47%;
  padding: 7px 9px;
  display: flex;
  position: absolute;
}

.board-player.green {
  top: 0;
  left: 0;
}

.board-player.yellow {
  top: 0;
  right: 0;
}

.board-player.blue {
  bottom: 0;
  left: 0;
}

.board-player.red {
  bottom: 0;
  right: 0;
}

.board-player b {
  color: #f0eff8;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 83px;
  font-size: 11px;
  display: block;
  overflow: hidden;
}

.board-player small {
  color: #a4a7bc;
  font-size: 9px;
  display: block;
}

.board-player .avatar {
  background: currentColor;
  border-radius: 11px;
  width: 30px;
  height: 30px;
  font-size: 12px;
}

.board-player .avatar:first-letter {
  color: #fff;
}

.board-player.current small {
  color: inherit;
}

.pawn {
  z-index: 8;
  background: radial-gradient(circle at 32% 22%, #fffe, #0000 30%), linear-gradient(135deg, #fff4, #0000 45%, #0007), currentColor;
  border: 1.3px solid #ffffffbd;
  border-radius: 50%;
  width: 3.8%;
  height: 3.8%;
  min-height: 0;
  padding: 0;
  transition: left .22s linear, top .22s linear;
  position: absolute;
  transform: translate(-50%, -50%);
  box-shadow: 0 3px 1px #0006, inset 0 -3px 1px #0003;
}

.pawn span {
  color: #171b2f;
  font-size: 9px;
  font-weight: bold;
  line-height: 1;
}

.pawn:disabled {
  opacity: 1;
}

.pawn.legal {
  z-index: 5;
  outline-offset: 2px;
  outline: 2px solid #fff;
  animation: .9s ease-in-out infinite breath;
}

.finished-home {
  z-index: 6;
  pointer-events: none;
  background: #191510;
  border: 1px solid #dbb66e;
  border-radius: 12%;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  width: 14%;
  height: 14%;
  padding: 2px;
  display: grid;
  position: absolute;
  inset: 43% auto auto 43%;
}

.finished-group {
  background: currentColor;
  border-radius: 15%;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 2px;
  display: grid;
}

@supports (color: color-mix(in lab, red, red)) {
  .finished-group {
    background: color-mix(in srgb, currentColor 25%, #131719);
  }
}

.finished-group.green {
  grid-area: 1 / 1;
}

.finished-group.yellow {
  grid-area: 1 / 2;
}

.finished-group.blue {
  grid-area: 2 / 1;
}

.finished-group.red {
  grid-area: 2 / 2;
}

.finished-slot {
  background: #0005;
  border-radius: 50%;
  position: relative;
}

.finished-pawn {
  background: radial-gradient(circle at 30% 20%, #fff, #0000 40%), linear-gradient(110deg, #0000, #0007), currentColor;
  border-radius: 45% 45% 25% 25%;
  position: absolute;
  inset: 0;
  box-shadow: 0 1px 1px #000, inset 0 -1px #eacb87;
}

.dice-dock {
  justify-content: center;
  align-items: center;
  min-height: 100px;
  padding: 12px 0;
  display: flex;
}

.dice {
  z-index: 12;
  color: #35245e;
  background: linear-gradient(135deg, #fffbe2, #d7b779);
  border: 2px solid #f5d697;
  border-radius: 13%;
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  min-height: 0;
  padding: 8px;
  transition: width .25s, height .25s;
  position: relative;
  box-shadow: 0 4px 9px #0005;
}

.dice:disabled {
  opacity: 1;
}

.dice.available {
  box-shadow: 0 0 0 4px #b296fa55, 0 0 24px #b393ff;
}

.dice-pips {
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  width: 100%;
  height: 100%;
  display: grid;
}

.dice-pips i {
  background: none;
  border-radius: 50%;
}

.dice-pips i.visible {
  background: #453361;
}

.dice.my-turn {
  border-color: #e8c585;
  width: 68px;
  height: 68px;
}

.dice.available {
  animation: 1.25s ease-in-out infinite dice-turn-pulse;
}

.dice.rolling {
  animation: .65s ease-out dice-roll;
}

@keyframes dice-roll {
  0% {
    transform: rotate(0) scale(.9);
  }

  25% {
    transform: translateY(-8px) rotate(100deg);
  }

  60% {
    transform: translateY(-3px) rotate(250deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes dice-turn-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 9px #0005;
  }

  50% {
    transform: scale(1.07);
    box-shadow: 0 0 0 6px #b296fa44, 0 0 28px #b393ff;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dice.available, .dice.rolling {
    transition: none;
    animation: none;
  }
}

.turn-caption {
  text-align: center;
  color: #dbceff;
  min-height: 33px;
  font-size: 13px;
}

.turn-caption small {
  color: #a096b5;
  font-size: 10px;
  display: block;
}

.match-footer {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.match-footer small {
  color: #696c83;
}

.match-footer button {
  font-size: 11px;
}

.quick-chat {
  z-index: 20;
  background: #1f2135;
  border: 1px solid #4f436d;
  border-radius: 14px;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px;
  display: flex;
  position: absolute;
  bottom: 65px;
  left: 14px;
  right: 14px;
}

.quick-chat button {
  min-height: 36px;
  padding: 8px 10px;
  font-size: 11px;
}

.chat-bubble {
  text-align: center;
  z-index: 18;
  background: #4b3d6c;
  border-radius: 15px;
  padding: 13px;
  font-size: 12px;
  position: absolute;
  bottom: 115px;
  left: 25px;
  right: 25px;
}

.connection, .spectator {
  color: #e9d7a8;
  background: #50432466;
  border-radius: 10px;
  align-items: center;
  gap: 8px;
  padding: 10px;
  font-size: 11px;
  display: flex;
}

.leave-menu {
  z-index: 30;
  position: absolute;
  top: 65px;
  left: 15px;
  right: 15px;
  box-shadow: 0 20px 70px #000b;
}

.leave-menu button {
  margin-left: 8px;
}

@keyframes breath {
  50% {
    filter: brightness(1.22);
    box-shadow: 0 0 13px #b092fc66;
  }
}

@keyframes shake {
  25% {
    transform: translate(-50%, -50%) rotate(-20deg);
  }

  75% {
    transform: translate(-50%, -50%) rotate(20deg);
  }
}

@media (min-width: 700px) {
  .app-shell {
    border-left: 1px solid #292d46;
    border-right: 1px solid #292d46;
  }

  .page {
    padding: 16px 28px 30px;
  }

  .welcome-banner {
    min-height: 190px;
  }

  .board-shell {
    width: min(100%, 100dvh - 290px);
  }
}

@media (max-width: 360px) {
  .topbar, .page {
    padding-left: 14px;
    padding-right: 14px;
  }

  .balances {
    gap: 6px;
  }

  .featured-game {
    gap: 13px;
  }

  .ludo-art {
    width: 86px;
    height: 86px;
  }

  .ludo-art svg {
    top: 16px;
    left: 16px;
  }

  .quiet-row {
    font-size: 9px;
  }

  .board-player {
    min-width: 98px;
  }

  .board-player b {
    max-width: 63px;
  }
}

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

.pawn:hover:not(:disabled), .board-player .avatar {
  background: currentColor;
}

@supports (color: color-mix(in lab, red, red)) {
  .board-player .avatar {
    background: color-mix(in srgb, currentColor 30%, #35354a);
  }
}

.board-player .avatar {
  color: #fff;
}

.app-shell {
  padding-top: var(--tg-content-safe-area-inset-top, 0px);
}

.match-page {
  min-height: var(--tg-viewport-stable-height, 100dvh);
}

.bottom-nav {
  padding-bottom: max(13px, env(safe-area-inset-bottom), var(--tg-content-safe-area-inset-bottom, 0px));
}

.match-found {
  z-index: 90;
  color: #c4a5ff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #13162bef;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  display: flex;
  position: fixed;
  inset: 0;
}

.reclaim {
  min-height: 32px;
  padding: 5px 10px;
  font-size: 11px;
}

.board-player small {
  font-size: 8px;
}

.avatar img {
  object-fit: cover;
  border-radius: inherit;
  width: 100%;
  height: 100%;
}

.match-page {
  background: radial-gradient(at 50% 25%, #9c662825, #0000 62%), repeating-linear-gradient(3deg, #ffffff02 0 1px, #0000 1px 7px), repeating-linear-gradient(92deg, #090a0d 0, #241b16 48px, #101317 53px, #1c1611 98px);
}

.match-header {
  border-bottom: 1px solid #a47a3f55;
  margin-bottom: 18px;
  padding-bottom: 12px;
}

.match-header > span {
  color: #efcd8f;
  text-shadow: 0 2px 4px #000;
  font-size: 22px;
}

.match-header button, .match-footer button {
  background: linear-gradient(150deg, #292a30, #0e1118);
  border: 1px solid #99744677;
  box-shadow: inset 0 1px #ffffff18, 0 4px 12px #0005;
}

.board-shell {
  width: min(100%, 580px, 100cqh - 120px);
  min-width: 0;
  padding: 60px 0;
}

.board-player {
  border-color: currentColor;
  width: 46%;
  min-width: 0;
  max-width: none;
  height: 54px;
  min-height: 0;
  padding: 4px 6px;
}

@supports (color: color-mix(in lab, red, red)) {
  .board-player {
    border-color: color-mix(in srgb, currentColor 45%, #302720);
  }
}

.board-player {
  isolation: isolate;
  background: linear-gradient(120deg, #151719f5, #090c10f2);
  overflow: visible;
  box-shadow: 0 8px 18px #0007, inset 0 1px #ffffff12;
}

.board-player.current {
  border-color: currentColor;
  box-shadow: 0 0 18px, inset 0 0 22px;
}

@supports (color: color-mix(in lab, red, red)) {
  .board-player.current {
    box-shadow: 0 0 18px color-mix(in srgb, currentColor 32%, transparent), inset 0 0 22px color-mix(in srgb, currentColor 12%, transparent);
  }
}

.player-portrait {
  aspect-ratio: 1;
  background-image: url("/art/player-portraits-v1.png");
  background-size: 200% 200%;
  border-radius: 14px;
  flex: none;
  width: clamp(32px, 10cqw, 48px);
  margin-top: 0;
  box-shadow: inset 0 0 0 1px #d7b87855, 0 5px 15px #0008;
}

.portrait-red {
  background-position: 0 0;
}

.portrait-green {
  background-position: 100% 0;
}

.portrait-blue {
  background-position: 0 100%;
}

.portrait-yellow {
  background-position: 100% 100%;
}

.board-player.green, .board-player.blue {
  flex-direction: row-reverse;
}

.player-card-info {
  flex: 1;
  min-width: 0;
}

.board-player b {
  max-width: 100%;
  font-size: clamp(12px, 2.8vw, 16px);
}

.board-player small {
  font-size: 9px;
  line-height: 1.6;
}

.player-progress {
  gap: 4px;
  margin: 3px 0;
  display: flex;
}

.player-progress i {
  opacity: .4;
  background: linear-gradient(115deg, #fff9, #0000 45%, #0007), currentColor;
  border-radius: 45% 45% 25% 25%;
  width: 9px;
  height: 12px;
  box-shadow: 0 1px 2px #000;
}

.player-progress i.arrived {
  opacity: 1;
  box-shadow: 0 0 5px;
}

.pawn {
  background: radial-gradient(at 32% 16%, #fffc, #0000 32%), linear-gradient(100deg, #0008, #0000 38%, #0007), currentColor;
  border-color: #f7d898;
  border-radius: 45% 45% 30% 30%;
  height: 4.8%;
  transform: translate(-50%, -66%);
  box-shadow: 0 3px 2px #000a, inset 0 -3px 1px #35250c99;
}

.pawn:before {
  content: "";
  background: radial-gradient(circle at 30% 22%, #fff, #0000 40%), radial-gradient(circle at 35% 30%, currentColor 35%, #101018 110%);
  border: 1px solid #fff7;
  border-radius: 50%;
  width: 76%;
  height: 60%;
  position: absolute;
  top: -25%;
  left: 12%;
}

.pawn span {
  z-index: 1;
  color: #fff;
  text-shadow: 0 1px 2px #000;
  font-size: 8px;
  position: relative;
}

.dice {
  box-shadow: 0 5px #a38354, 0 9px 14px #000a, inset 0 1px 4px #fff;
}

.dice-pips i.visible {
  background: #282323;
  box-shadow: inset 0 1px 2px #000b;
}

.turn-caption {
  color: #edce99;
}

.match-footer {
  border-top: 1px solid #99744644;
  padding-top: 12px;
}

@media (max-width: 370px) {
  .board-player {
    gap: 5px;
    padding: 7px 5px;
  }

  .player-portrait {
    width: 34px;
  }

  .board-player small {
    font-size: 8px;
  }
}

.in-game .match-page {
  height: calc(100dvh - var(--tg-content-safe-area-inset-top, 0px));
  min-height: 0;
  padding: 6px 10px max(6px, env(safe-area-inset-bottom), var(--tg-content-safe-area-inset-bottom, 0px));
  justify-content: flex-start;
  gap: 4px;
}

.match-page > * {
  flex-shrink: 0;
}

.match-page .match-header {
  margin: 0;
  padding-bottom: 4px;
}

.board-stage {
  flex: 1 1 0;
  justify-content: center;
  align-items: flex-end;
  min-height: 0;
  display: flex;
  container-type: size;
}

.match-page .dice-dock {
  min-height: 72px;
  padding: 4px 0;
}

.match-page .dice.my-turn {
  width: 62px;
  height: 62px;
}

.match-page .turn-caption {
  min-height: 32px;
  line-height: 16px;
}

.match-page .match-footer {
  padding-top: 3px;
}

.board-player small {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.asset-loading {
  box-sizing: border-box;
  justify-content: center;
  min-height: 100dvh;
}

.asset-loading h1 {
  font-size: 24px;
}

.asset-progress {
  background: #272d42;
  border-radius: 99px;
  width: min(330px, 80vw);
  height: 10px;
  margin: 20px auto 10px;
  overflow: hidden;
}

.asset-progress span {
  border-radius: inherit;
  background: linear-gradient(90deg, #8660e8, #edcc82);
  height: 100%;
  transition: width .18s;
  display: block;
}

.asset-loading strong {
  color: #edcc82;
  font-size: 18px;
}

.featured-game .game-cover {
  aspect-ratio: 1;
  object-fit: contain;
  background: #0c1427;
  border-radius: 16px;
  flex: none;
  width: clamp(104px, 32vw, 168px);
  height: auto;
  display: block;
}

.game-list .featured-game > div {
  min-width: 0;
}

@media (max-width: 374px) {
  .game-list .featured-game {
    gap: 12px;
    padding: 14px 12px;
  }

  .game-list .featured-game h2 {
    font-size: 21px;
  }
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

.startup-screen{min-height:100dvh;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 38%,#19392f 0,#101e29 32%,#080f1b 70%);padding:24px;color:#eaf4ed}.startup-stage{width:min(100%,360px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}.startup-brand{width:100px;height:100px;background:linear-gradient(140deg,#284d3d,#162d29);border:1px solid #638f71;border-radius:30px;display:grid;place-items:center;color:#b0edc7;box-shadow:0 15px 75px #5bd69620;transform:rotate(-8deg);margin-bottom:10px}.startup-brand svg{transform:rotate(8deg)}.startup-wordmark{font:800 30px/1.3 Arial;letter-spacing:3px}.startup-wordmark span{color:#66d8a2}.startup-tagline{font-size:14px;color:#a5b8bb;margin-bottom:40px}.startup-progress{height:7px;width:100%;border-radius:10px;background:#273843;overflow:hidden;direction:ltr}.startup-progress>span{display:block;height:100%;background:linear-gradient(90deg,#329b70,#9ae6b9);border-radius:inherit;transition:width .25s}.startup-phase{font-size:13px;color:#a8b9c4}.startup-percent{font-size:13px;color:#87dcb0;font-variant-numeric:tabular-nums}.startup-error h1{font-size:22px}.startup-description,.startup-footnote{font-size:12px;color:#adbac9}.startup-retry{display:flex;gap:10px;align-items:center;justify-content:center;padding:12px 22px;background:#65d6a3;color:#082c20;border:0;border-radius:12px;font:700 15px inherit}.startup-error .startup-brand{color:#ddbf86;border-color:#816c43;background:#302b22}


.home-header{padding:18px 20px 16px;border-bottom:1px solid var(--line)}
.home-brand-row,.home-account-row,.home-wallets,.home-profile,.home-brand,.home-wallet,.home-section-heading,.home-online{display:flex;align-items:center}
.home-brand-row,.home-account-row{justify-content:space-between;gap:12px}
.home-brand-row{margin-bottom:22px}.home-brand{gap:10px;direction:ltr}.home-brand>span{width:38px;height:38px;border:1px solid #3a6e5d;background:#163d34;border-radius:12px;color:#76e3b5;display:grid;place-items:center;transform:rotate(-6deg)}
.home-brand b{font:800 19px/1.2 Arial;letter-spacing:1px;color:#f4f3eb}.home-brand b span{color:#63d8a7}
.home-profile{gap:10px;min-width:0}.home-avatar{width:45px;height:45px;flex-shrink:0;border-radius:16px;background:linear-gradient(145deg,#334e62,#1c2941);border:1px solid #577789;color:#e4f2f6;display:grid;place-items:center;font-size:23px;position:relative}.home-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.home-avatar i{position:absolute;bottom:-2px;left:-2px;width:11px;height:11px;background:#67dba8;border:3px solid #0c1321;border-radius:50%}
.home-player-copy{display:grid;min-width:0;gap:2px}.home-player-copy small{color:#8d9aaf;font-size:11px}.home-player-copy strong{font-size:14px;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.home-wallets{gap:6px;flex-shrink:0}.home-wallet{gap:5px;padding:8px;border:1px solid #34352c;border-radius:11px;background:#24241e;font-size:12px}.home-coins{color:#e7c67e}.home-gems{color:#85c9ef;background:#132436;border-color:#284253}.home-wallet b{font-variant-numeric:tabular-nums;max-width:85px;overflow:hidden;text-overflow:ellipsis}
.modern-home{padding:22px 20px 30px;display:grid;gap:20px}.home-intro{display:flex;justify-content:space-between;gap:8px;align-items:center}.home-intro h1{font-size:24px;margin-top:4px}.eyebrow{font-size:11px;letter-spacing:.2px;color:var(--muted);font-weight:500}.home-online{gap:5px;font-size:10px;color:#76cda9;background:#133028;border:1px solid #254b3d;padding:5px 8px;border-radius:20px}.home-online i{height:5px;width:5px;background:#71e7b2;border-radius:50%}
.home-feature{position:relative;overflow:hidden;min-height:208px;border:1px solid #3d5145;border-radius:23px;display:flex;align-items:center;background:linear-gradient(110deg,#25231c,#112820)}
.home-feature>.game-art{width:63%;height:100%;position:absolute;inset:0 auto 0 0;object-fit:cover;object-position:30% 55%;mask-image:linear-gradient(to right,#000 58%,transparent)}
.home-feature-copy{position:relative;width:58%;padding:22px 20px;z-index:1}.feature-label{display:flex;align-items:center;gap:4px;color:#dcc38a;font-size:10px}.home-feature h2{font-size:30px;line-height:1.7;color:#f1eadb;margin:10px 0 0}.home-feature p{color:#b1bcb3;font-size:11px;margin:0 0 18px}.feature-cta{display:inline-flex;align-items:center;gap:10px;background:#53d19b;color:#08291e;font-weight:800;padding:10px 14px;border-radius:10px;font-size:13px;box-shadow:0 5px 25px #38ca7930}
.home-section-heading{justify-content:space-between;gap:10px}.home-section-heading h2{font-size:18px}.home-section-heading a{display:flex;align-items:center;gap:5px;font-size:11px;color:#6ed8ad}
.home-games-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.home-game-card{position:relative;border:1px solid #2a3444;border-radius:19px;overflow:hidden;background:#121b2a;transition:transform .2s,border-color .2s}.home-game-card:hover{border-color:#6c9a82;transform:translateY(-2px)}.home-game-card>.game-art{width:100%;aspect-ratio:1.25;object-fit:cover;display:block;mask-image:linear-gradient(#000 72%,transparent)}.home-game-card>div{position:relative;padding:0 14px 16px;margin-top:-3px}.game-player-count{display:flex;align-items:center;gap:4px;font-size:10px;color:#9aa9bd}.home-game-card h3{font-size:19px;margin:5px 0 2px}.home-game-card p{font-size:10px;color:#96a4b8}.game-card-arrow{position:absolute;left:12px;bottom:42px;display:grid;place-items:center;color:#8de5bc;width:28px;height:28px;background:#20342e;border-radius:9px}
.home-room{display:flex;gap:12px;align-items:center;background:linear-gradient(120deg,#192a37,#1a2233);padding:18px 14px;border:1px solid #304151;border-radius:18px}.room-icon{padding:12px;border:1px solid #385648;background:#213c32;border-radius:15px;color:#82d7b1}.home-room>svg{margin-right:auto;flex-shrink:0;color:#8ba8b8}.home-room h2{font-size:16px}.home-room p{font-size:11px;color:#a6b0bf}.home-guest{border:1px dashed #344638;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px;border-radius:14px;font-size:12px}.home-guest small{display:block;font-size:10px;color:var(--muted)}.home-guest a{font-size:11px;color:#8ee3b9;white-space:nowrap}.home-signoff{text-align:center;font-size:11px;color:#5f7287}.home-live-message{padding:12px;background:#153f32;border:1px solid #397c61;border-radius:12px;display:flex;gap:10px;align-items:center;color:#a3f3cd}
.bottom-nav.modern-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:760px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));height:auto;border-top:1px solid #2c384a;background:#101a2bf5;backdrop-filter:blur(18px);display:grid;grid-template-columns:repeat(5,1fr);z-index:30;direction:rtl}.modern-nav a{display:flex;flex-direction:column;gap:5px;align-items:center;color:#8291a7;min-height:49px;padding:5px;border-radius:12px;font-size:10px}.modern-nav a.active{color:#72dfae;background:#1e3b3033}.modern-nav a.active svg{filter:drop-shadow(0 0 6px #59d59960)}
@media(min-width:620px){.home-header{padding:22px 30px}.modern-home{padding:28px 30px;gap:24px}.home-games-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.home-feature{min-height:260px}.home-feature>.game-art{object-fit:cover;object-position:50% 53%}.home-feature-copy{padding:30px}.home-feature h2{font-size:38px}.home-feature p{font-size:14px}.home-wallet{padding:10px 14px}.home-player-copy strong{max-width:270px}}
@media(max-width:370px){.home-header{padding:14px}.modern-home{padding:18px 14px}.home-wallet{padding:6px 4px;font-size:10px;gap:3px}.home-player-copy strong{max-width:105px}.home-wallet svg:last-child{display:none}.home-intro h1{font-size:21px}.home-game-card>div{padding:0 10px 14px}.home-game-card p{font-size:9px}.home-feature-copy{padding:18px 14px}.home-feature p{font-size:10px}}

.account-login{min-height:100dvh;box-sizing:border-box;padding:32px 18px;gap:16px}.account-login h1{font-size:clamp(24px,5vw,36px);margin:4px 0}.account-login>p{margin:0;color:#b3acca}.account-panel{width:min(100%,430px);box-sizing:border-box;text-align:right}.account-methods{display:grid;gap:12px}.account-methods button{min-height:52px;display:flex;justify-content:center;align-items:center;gap:12px}.account-methods button:first-child{background:#2589bd}.account-methods button:nth-child(2){background:#f5f4fa;color:#242033}.google-letter{font:700 22px Arial;color:#4285f4}.account-form{display:grid;gap:14px}.account-form label,.account-panel label{display:grid;gap:7px}.account-form input,.account-panel input{width:100%;box-sizing:border-box;min-height:46px}.account-form small,.account-panel small{color:#c0b8d2;line-height:1.8;display:block}.account-panel button{margin-block:4px}.account-back{display:flex;align-items:center;gap:6px;background:transparent}.account-error{padding:12px;border:1px solid #e7909050;border-radius:12px;background:#672f3930;color:#ffc6c6;line-height:1.8}.account-page{max-width:640px;margin:auto}.account-page .panel{margin-block:16px}.account-page button{min-height:44px}.account-page .setting{gap:12px;flex-wrap:wrap}.account-page p{line-height:1.9}.guest-banner{margin:8px 16px;padding:10px 14px;background:#6e51b52a;border:1px solid #a488e747;border-radius:12px;display:flex;justify-content:space-between;gap:10px}.guest-banner a{color:#c9b6ff}.account-methods button:disabled{opacity:.45;cursor:not-allowed}@media(max-width:400px){.account-login{padding:20px 12px}.account-panel{padding:18px}.account-login .brand-mark{width:68px;height:68px}.account-page .setting{align-items:flex-start}}

.account-login .brand-mark{padding:0;display:grid;place-items:center;width:88px;height:88px;flex-shrink:0}@media(max-width:400px){.account-login .brand-mark{width:68px;height:68px}}

.game-setup{padding:20px 20px 32px}.setup-stage{display:flex;flex-direction:column;position:relative;gap:16px}.setup-back{order:-3;display:flex;align-items:center;gap:6px;color:#9daebf;font-size:12px;align-self:flex-start;min-height:36px}.setup-art{order:-2;border-radius:24px;overflow:hidden;background:#152534;border:1px solid #34443d;height:230px}.setup-art img{width:100%;height:100%;object-fit:cover;object-position:center 52%}.setup-title{order:-1;font-size:30px;line-height:1.5;margin-top:2px}.setup-facts{display:flex;flex-wrap:wrap;gap:7px;order:0}.setup-facts span{padding:5px 9px;background:#172537;border:1px solid #293c4e;border-radius:7px;font-size:11px;color:#a8bac9}.setup-facts button{display:none}.setup-rules{order:1;background:#141f30;border:1px solid #2a3a4b;border-radius:14px;overflow:hidden}.setup-rules summary{padding:15px;cursor:pointer;font-size:13px;color:#d2deeb}.setup-rule-body{padding:0 16px 16px}.setup-rule-body h2{font-size:16px;margin-bottom:5px}.setup-rule-body p{font-size:13px;color:#acb9ca}.setup-options{order:2}.setup-options h2,.setup-mode-title{font-size:15px;margin:4px 0 12px}.setup-choices{display:flex;gap:8px}.setup-choices>*{flex:1;min-width:0;border:1px solid #2b3b4d;background:#141f30;border-radius:12px;padding:11px 4px;display:flex;justify-content:center;align-items:center;font-size:13px;min-height:47px}.setup-choices [aria-pressed=true],.setup-fixed-option{background:#15392d;color:#93e4bd;border-color:#418c69}.setup-mode-title{order:3;margin:5px 0 -4px}.setup-modes{order:4;display:grid;grid-template-columns:1fr 1fr;gap:12px}.setup-modes>button{position:relative;display:flex;flex-direction:column;gap:7px;justify-content:center;align-items:flex-start;text-align:right;padding:18px 14px;min-height:150px;background:#151f30;border:1px solid #304052;border-radius:17px}.setup-modes>button.selected{border:1px solid #53b88a;background:linear-gradient(145deg,#1c4032,#152b26);box-shadow:inset 0 0 20px #58d89d08}.setup-modes svg{color:#71d5a6;margin-bottom:3px}.setup-modes strong{font-size:16px}.setup-modes small{font-size:11px;color:#a2b8b2;line-height:1.7}.setup-ranked-status{font-size:10px;background:#243143;padding:2px 7px;border-radius:6px}.setup-modes>button:disabled{opacity:.55}.setup-extra{order:5;padding:14px;background:#141f30;border:1px solid #2a3a4b;border-radius:12px}.setup-extra summary{cursor:pointer;font-size:12px}.setup-extra select{margin-top:10px}.setup-start{order:6;background:#59d59f;border:1px solid #76e6b3;color:#0b2c20;font-size:17px;font-weight:800;min-height:56px;border-radius:14px;box-shadow:0 6px 30px #35be7920}.setup-start:hover:not(:disabled){background:#7ce7b7}.setup-private{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin:22px 0;font-size:12px;color:#96b5c4}.setup-private a{min-height:30px;display:flex;align-items:center}.game-setup .guest-banner{margin:0}.setup-stage>h1{font-weight:800}
@media(min-width:620px){.game-setup{padding:24px 30px}.setup-art{height:280px}.setup-art img{object-fit:contain;background:#0c1521}.setup-modes>button{min-height:145px;align-items:center;text-align:center}.setup-start{margin-top:5px}}


.profile-page .profile-hero{position:relative;padding:26px 18px;border:1px solid #365146;border-radius:22px;background:radial-gradient(ellipse at top,#253b3e,#152132 65%);display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;overflow:hidden}
.profile-hero .avatar{width:78px;height:78px;border-radius:25px;font-size:34px;border:2px solid #bcaa79;background:linear-gradient(140deg,#39564b,#193237);color:#e8eedb;box-shadow:0 0 0 6px #a9c5aa0a;display:grid;place-items:center;margin:8px 0}
.profile-hero img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.profile-hero h2{font-size:24px}.profile-hero>p,.profile-hero>small{color:#9caec0;font-size:12px}.profile-hero button{font-size:12px;max-width:100%;overflow-wrap:anywhere}.profile-hero .row{justify-content:center;flex-wrap:wrap}
.profile-page .profile-tabs{display:flex;gap:6px;padding:5px;background:#142030;border:1px solid #2c3c4c;border-radius:14px;margin:20px 0}.profile-tabs button{flex:1;border:0;background:transparent;font-size:12px}.profile-tabs button.selected,.profile-tabs [aria-pressed=true]{background:#234634;color:#99e4bd}
.profile-page .profile-edit-form{padding:18px;background:#152131;border:1px solid #334255;border-radius:18px;margin:18px 0;display:grid;gap:15px}.profile-edit-form label{display:grid;gap:7px}.profile-edit-form .row{gap:10px;flex-wrap:wrap}
.profile-medals{padding:18px;background:#141f2e;border:1px solid #2d3b4c;border-radius:18px}.profile-medals h2{font-size:17px}.profile-medals>p{font-size:11px;margin:6px 0 18px}.medal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.medal-grid>div{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:9px;color:#bbcad9;text-align:center}.medal-emblem{width:54px;height:62px;display:grid;place-items:center;color:#e8c981;background:linear-gradient(145deg,#53452b,#1d2931);border:1px solid #857148;clip-path:polygon(50% 0,97% 24%,97% 76%,50% 100%,3% 76%,3% 24%)}.medal-1{color:#b9a4e3;background:linear-gradient(145deg,#403459,#1b2433)}.medal-2{color:#8abff1;background:linear-gradient(145deg,#28455c,#1b2433)}.medal-3{color:#e296a4;background:linear-gradient(145deg,#53313d,#1b2433)}
.profile-customization{padding:15px;border:1px dashed #3a4a5e;border-radius:12px}.profile-customization p{font-size:11px;color:#a0b1c3;margin:5px 0 14px}.profile-frame-samples{display:flex;justify-content:space-around;gap:12px}.profile-frame-samples span{border:2px solid currentColor;width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:#182635}.profile-page .stats{margin:18px 0}.profile-page .stats>div{border-radius:14px;background:#162433;border:1px solid #2c3d4a}.profile-page .panel{margin-top:16px}.profile-page [dir=ltr]{overflow-wrap:anywhere;max-width:100%}


.theme-title{display:flex;align-items:center;gap:12px;margin-bottom:24px}.theme-title h1{font-size:25px}.theme-title .eyebrow{font-size:10px}.theme-panel{padding:18px;background:#131e2e;border:1px solid #28374a;border-radius:18px;margin:16px 0}.theme-panel>h2{font-size:15px;padding-bottom:13px;margin-bottom:5px;border-bottom:1px solid #273548;color:#e2e8ef}.theme-setting{display:flex;align-items:center;gap:12px;padding:13px 0;font-size:14px}.theme-setting+ .theme-setting{border-top:1px solid #233144}.theme-setting-icon{color:#8cbda9;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#21332f;flex-shrink:0}.theme-setting>span:nth-child(2){flex:1}.theme-switch{position:relative;width:43px;height:25px;flex-shrink:0;display:block}.theme-switch input{position:absolute;inset:0;opacity:0;margin:0;z-index:1;cursor:pointer;width:100%;height:100%;min-height:0}.theme-switch>span{position:absolute;inset:0;border-radius:20px;background:#364255;transition:background .2s}.theme-switch>span:after{content:"";position:absolute;width:17px;height:17px;top:4px;right:4px;border-radius:50%;background:#a6b1c1;transition:transform .2s}.theme-switch input:checked+span{background:#56ca99}.theme-switch input:checked+span:after{transform:translateX(-18px);background:#f3fff8}.theme-switch input:focus-visible+span{outline:2px solid #99ecc3;outline-offset:4px}
.themed-search{background:#141f30;border:1px solid #2a3a4e;border-radius:13px;padding:0 12px}.themed-search input{background:none!important;border:0!important}.themed-page .chips{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 22px}.themed-page .chips button{font-size:12px;padding:8px 15px;min-height:38px;border-radius:10px}.themed-page .chips button.selected{background:#1d4132;color:#9de6be;border-color:#3c765a}.themed-page .game-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}.themed-page .featured-game{padding:0;display:flex;flex-direction:column;overflow:hidden;background:#141f2f;border:1px solid #2b3a4e;border-radius:18px;min-height:0}.featured-game>.game-art{width:100%;aspect-ratio:1.2;object-fit:cover;mask-image:linear-gradient(#000 80%,transparent)}.themed-page .featured-game>div{padding:5px 14px 17px;position:static}.featured-game h2{font-size:21px}.featured-game p{font-size:11px;color:var(--muted)}.featured-game b{display:flex;align-items:center;gap:7px;font-size:12px;color:#81dbb0;margin-top:12px}.game-list>.panel{grid-column:1/-1}
.theme-store-hero{position:relative;overflow:hidden;background:radial-gradient(ellipse at left top,#324c3c,#162b28 45%,#14212c);border:1px solid #3d5447;border-radius:22px;padding:26px 22px;min-height:200px}.theme-store-hero h2{font-size:25px;position:relative;margin:10px 0}.theme-store-hero p{max-width:78%;font-size:12px;color:#afc5bc;position:relative}.theme-store-hero .tag{display:inline-flex;margin-top:14px;color:#e5ce94;background:#443e27}.store-hero-symbol{position:absolute;left:15px;top:25px;color:#d6bd7c;opacity:.6;transform:rotate(-15deg)}.theme-disclaimer{color:#91a3b7;font-size:11px;margin:15px 0 24px}.theme-store-group h2{font-size:17px;margin-bottom:16px}.theme-store-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.theme-store-item{border:1px solid #2b3c4b;border-radius:18px;background:#142131;padding:18px;text-align:center}.store-item-art{height:100px;display:grid;place-items:center;background:radial-gradient(circle,currentColor -130%,transparent 70%)}.theme-store-item h3{color:#e6eaf1;font-size:14px;margin:5px 0 12px}.theme-store-item button{width:100%;font-size:11px;min-height:36px;background:#202d3f;color:#a6b6c7}.tone-gold{color:#dec17a}.tone-blue{color:#7dbbea}.tone-green{color:#77d3a3}.tone-violet{color:#b59bdf}
.themed-friends .friend-search{display:flex;gap:8px;flex-wrap:wrap}.friend-search>input{flex:1;min-width:150px}.friend-profile{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}.friend-avatar{width:39px;height:39px;border-radius:12px;display:grid;place-items:center;background:#244136;color:#a3e1c0;font-size:19px}.friend-online{color:#74d3a5}.friend-offline{color:#8190a5}.friend-help{background:#172737;border:1px dashed #345065;border-radius:16px;padding:20px;text-align:center;color:#b7c9d7;margin-top:20px}.theme-panel .panel{box-shadow:none;padding:12px}.theme-panel.links a{min-height:46px;display:flex;align-items:center;gap:10px}.theme-panel.links a svg:last-child{margin-right:auto}.theme-panel .empty{padding:25px 12px;text-align:center;color:#98adbd}.themed-settings footer{font-size:11px;color:#8194a9;margin-top:24px}.themed-settings footer p{font-size:11px}
@media(min-width:620px){.themed-page .game-list{grid-template-columns:repeat(3,minmax(0,1fr))}.theme-store-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.theme-store-item{padding:12px}}

.game-chat{position:relative;isolation:isolate;z-index:35;flex:none;width:100%;max-width:680px;min-width:0;margin:0 auto;box-sizing:border-box;color:#f4edff;font-family:inherit}
.game-chat .game-chat-bar{display:flex;align-items:center;gap:7px;padding:6px;background:linear-gradient(135deg,#242334f5,#121722fa);border:1px solid #afa0d13d;border-radius:24px;box-shadow:0 5px 16px #0003;min-width:0}
.game-chat button{font:inherit;font-size:12px;color:#eee9fa;background:linear-gradient(145deg,#323044,#202333);border:1px solid #bca8e22e;border-radius:18px;padding:9px 12px;min-height:40px;line-height:1.3;cursor:pointer;touch-action:manipulation;white-space:nowrap;transition:background .15s,transform .15s;box-shadow:inset 0 1px 0 #fff08}
.game-chat button:hover:not(:disabled){background:#484058;border-color:#b5a0db88}.game-chat button:active:not(:disabled){transform:scale(.96)}.game-chat button:focus-visible{outline:2px solid #d3b7ff;outline-offset:2px}.game-chat button:disabled{opacity:.45;cursor:default}
.game-chat .game-chat-icon{width:40px;height:40px;padding:0;display:grid;place-items:center;flex:none;border-radius:50%}.game-chat .game-chat-toggle{background:linear-gradient(145deg,#7861ac,#49375f);border-color:#bca1f06b}.game-chat-toggle[aria-expanded=true]{box-shadow:0 0 0 2px #bb97ff55}
.game-chat-shortcuts{display:flex;gap:6px;min-width:0;flex:1;overflow:auto;scrollbar-width:none;padding:2px}.game-chat-shortcuts::-webkit-scrollbar{display:none}.game-chat-shortcuts button{flex:1}.game-chat-hint{display:grid;place-items:center;color:#b6aacd;padding:0 6px}
.game-chat-panel{position:absolute;inset-inline:0;bottom:calc(100% + 8px);padding:10px;background:linear-gradient(145deg,#292539,#141c27);border:1px solid #bfa6e85c;border-radius:20px;box-shadow:0 12px 45px #0009;max-height:min(320px,50dvh);overflow:auto;box-sizing:border-box;animation:game-chat-in .16s ease-out}
.game-chat-panel header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:12px;color:#d4c7e6}.game-chat-panel header span{display:flex;align-items:center;gap:7px}.game-chat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.game-chat-grid button{white-space:normal;padding:8px 5px}.game-chat-panel small{display:block;text-align:center;font-size:10px;margin-top:10px;color:#b9accb}
.game-chat-received{position:absolute;bottom:calc(100% + 8px);inset-inline:8px;width:fit-content;max-width:calc(100% - 16px);display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid #ceb9eb55;border-radius:16px 16px 4px 16px;background:#282435f5;box-shadow:0 4px 20px #0005;box-sizing:border-box;font-size:12px;overflow-wrap:anywhere;pointer-events:none}.game-chat-received svg{flex:none}.game-chat-error{position:absolute;bottom:100%;background:#39242e;color:#ffd6dc;padding:8px;border-radius:10px;font-size:12px}.game-chat-panel{z-index:2}
.hokm-actions+.game-chat{margin-top:-4px}.backgammon-page>.game-chat{margin-top:auto}
@keyframes game-chat-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:374px){.game-chat-hint{display:none}.game-chat button{font-size:11px;padding-inline:8px}.game-chat .game-chat-bar{gap:4px}}
@media(min-width:600px) and (max-height:550px){.backgammon-page>.game-chat,.hokm-game>.game-chat{grid-column:1}.game-chat-panel{max-height:65dvh}}
@media(prefers-reduced-motion:reduce){.game-chat *{animation:none!important;transition:none!important}}

.hokm-actions{align-items:center}.hokm-game .hokm-actions>.primary{flex:none;width:78px;padding:8px 4px}.hokm-actions>.game-chat{flex:1;width:0}.hokm-actions .game-chat-hint{display:none}.hokm-actions .game-chat-panel{inset-inline-start:-84px}.hokm-actions .game-chat-shortcuts button{flex:none}

.hokm-game .game-chat{z-index:8}.hokm-game .hokm-hand{isolation:isolate;z-index:4}

/* Closed state exposes only the chat trigger; messages live in the panel. */
.game-chat .game-chat-bar{padding:0;background:none;border:0;box-shadow:none;border-radius:0}
.game-chat .game-chat-toggle{display:flex;align-items:center;justify-content:center;gap:8px;min-width:88px;min-height:44px;padding:9px 16px;border-radius:22px}
.match-page.asset-table {
  height: calc(100dvh - var(--tg-content-safe-area-inset-top, 0px));
  min-height: 0;
  gap: 6px;
  padding: 8px 10px max(8px, env(safe-area-inset-bottom));
  justify-content: flex-start;
  background: radial-gradient(ellipse at 50% 40%, #302820, #0b1017 75%);
}
.asset-table .match-header {
  margin: 0;
  padding: 0 0 5px;
  min-height: 42px;
}
.asset-table .match-header > span {
  font-size: 20px;
}
.ludo-table {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ludo-cards {
  display: flex;
  direction: ltr;
  justify-content: space-between;
  gap: 10px;
  flex: 0 0 55px;
}
.ludo-player {
  direction: rtl;
  min-width: 0;
  min-height: 0;
  width: calc(50% - 5px);
  display: flex;
  gap: 7px;
  padding: 4px 6px;
  border: 1px solid color-mix(in srgb, currentColor 30%, #23252a);
  border-radius: 12px;
  background: linear-gradient(135deg, #24282c, #10151c);
  text-align: right;
}
.ludo-player.green,
.ludo-player.blue {
  flex-direction: row-reverse;
}
.ludo-player.current {
  border-color: currentColor;
  box-shadow:
    0 0 12px color-mix(in srgb, currentColor 22%, transparent),
    inset 0 0 15px color-mix(in srgb, currentColor 8%, transparent);
}
.ludo-portrait {
  width: 43px;
  height: 43px;
  flex: none;
  object-fit: cover;
  border-radius: 9px;
}
.ludo-player-info {
  min-width: 0;
  flex: 1;
}
.ludo-player b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: #f4ead9;
}
.ludo-player small {
  display: block;
  font-size: 9px;
  white-space: nowrap;
}
.ludo-player small span {
  display: block;
  font-size: 8px;
  opacity: 0.8;
}
.ludo-board-area {
  container-type: size;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ludo-board {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: min(100cqw, 100cqh);
  height: min(100cqw, 100cqh);
  aspect-ratio: 1;
  direction: ltr;
  box-shadow: 0 8px 24px #0008;
}
.ludo-board-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.board-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.pawn-anchor {
  position: absolute;
  width: 6.5%;
  height: 6.5%;
  z-index: 3;
  transition:
    left 150ms linear,
    top 150ms linear;
}
.ludo-pawn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none !important;
  transform: translate(-50%, -86%);
  z-index: 3;
  transition:
    left 150ms linear,
    top 150ms linear;
}
.ludo-pawn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 1px #0008);
  pointer-events: none;
}
.ludo-pawn:disabled {
  opacity: 1;
}
.ludo-pawn.movable {
  pointer-events: auto;
  z-index: 5;
}
.ludo-pawn.movable::after {
  content: "";
  position: absolute;
  inset: 8%;
  border: 1px solid #fff5ab;
  border-radius: 50%;
  box-shadow: 0 0 7px #ffe89b;
  animation: ludo-glow 1s ease-in-out infinite;
}
.ludo-pawn.moving {
  z-index: 7;
}
.ludo-pawn.moving img {
  animation: ludo-hop 160ms ease-out infinite;
}
.pawn-anchor.shared {
  width: 4.1%;
  height: 4.8%;
}
.pawn-anchor.finished {
  width: 3.2%;
  height: 3.2%;
  z-index: 4;
}
.pawn-anchor.moving {
  z-index: 7;
}
.pawn-anchor.movable {
  z-index: 5;
}
.pawn-debug-label {
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  background: #000b;
  font: 6px Arial;
  white-space: nowrap;
  pointer-events: none;
}
.anchor-error {
  position: absolute;
  bottom: 0;
  background: #8b1420;
  color: white;
  font: 10px Arial;
  z-index: 30;
  padding: 4px;
}
.ludo-pawn.selected {
  filter: brightness(1.3);
}
.ludo-pawn.captured {
  opacity: 0.5;
}
.ludo-calibration {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}
.calibration-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  min-width: 18px;
  height: 18px;
  padding: 1px 3px;
  border: 1px solid #fff;
  background: #111d;
  color: #fff;
  font: 700 8px/14px Arial;
  text-align: center;
  border-radius: 4px;
  box-shadow:
    0 0 0 1px #000,
    0 1px 4px #000;
}
.calibration-marker.green {
  background: #087d55;
}
.calibration-marker.yellow {
  background: #a87309;
}
.calibration-marker.red {
  background: #9d233a;
}
.calibration-marker.blue {
  background: #1c5a9d;
}
.calibration-marker.track {
  background: #3d3123;
}
.ludo-dice-dock {
  height: 77px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  perspective: 500px;
}
.ludo-dice-dock > span {
  font-size: 11px;
  color: #e5d2ac;
  line-height: 17px;
}
.ludo-dice {
  padding: 0;
  min-height: 0;
  width: 52px;
  height: 52px;
  border: 0;
  background: none !important;
  transition: transform 180ms ease;
  flex: none;
}
.ludo-dice img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 3px 4px #000a);
}
.ludo-dice.my-turn {
  transform: scale(1.12);
}
.ludo-dice.canRoll img {
  filter: drop-shadow(0 0 6px #f0ce86);
}
.ludo-dice:disabled {
  opacity: 1;
}
.ludo-dice.rolling {
  pointer-events: none;
  animation: ludo-roll 720ms ease-out;
}
.ludo-chat {
  display: flex;
  gap: 6px;
  flex: none;
  min-width: 0;
  border-top: 1px solid #e1b97522;
  padding-top: 5px;
}
.ludo-chat > button {
  font-size: 10px;
  padding: 5px 9px;
  flex: none;
}
.ludo-chat-options {
  display: flex;
  overflow-x: auto;
  gap: 5px;
  min-width: 0;
  align-items: center;
}
.ludo-chat-options button {
  flex: none;
  font-size: 10px;
  padding: 5px 10px;
  border-radius: 18px;
  background: #192029;
}
.asset-table .chat-bubble {
  position: static;
  flex: none;
  padding: 4px;
  font-size: 11px;
}
.asset-table .connection,
.asset-table .spectator {
  padding: 4px;
  font-size: 10px;
}
.ludo-profile-dialog {
  max-width: min(94vw, 600px);
  width: 100%;
  max-height: 90dvh;
  padding: 0;
  border: 1px solid #a88d61;
  border-radius: 18px;
  color: inherit;
  background: #10151d;
}
.ludo-profile-dialog::backdrop {
  background: #000a;
}
.ludo-profile-dialog > button {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 6px;
}
@keyframes ludo-roll {
  0% {
    transform: rotateX(0) rotateY(0) rotateZ(0) scale(1);
  }
  30% {
    transform: rotateX(150deg) rotateY(130deg) rotateZ(-25deg) scale(1.12);
  }
  70% {
    transform: rotateX(300deg) rotateY(300deg) rotateZ(20deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(0) scale(1);
  }
}
@keyframes ludo-hop {
  50% {
    transform: translateY(-12%);
  }
}
@keyframes ludo-glow {
  50% {
    opacity: 0.4;
  }
}
@media (prefers-reduced-motion: reduce) {
  .asset-table *,
  .asset-table *::after {
    animation: none !important;
    transition: none !important;
  }
}
.cf-game {
  height: 100dvh;
  box-sizing: border-box;
  max-width: 760px;
  margin: auto;
  padding: max(12px, env(safe-area-inset-top)) 12px
    max(12px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: radial-gradient(ellipse at 50% 40%, #24364e, #0a111f 70%);
  color: #f5e9d0;
  overflow: hidden;
}
.cf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  flex-shrink: 0;
}
.cf-header h1 {
  font-size: 20px;
  margin: 0;
  color: #ecd29a;
}
.cf-header button {
  padding: 8px 14px;
  margin: 0;
}
.cf-players {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.cf-player {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid #4e5361;
  border-radius: 18px;
  background: linear-gradient(130deg, #253349, #111923);
  overflow: hidden;
}
.cf-player img {
  height: 62px;
  width: 50px;
  object-fit: cover;
  object-position: top;
  border-radius: 12px;
}
.cf-player div {
  min-width: 0;
}
.cf-player b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.cf-player small {
  font-size: 11px;
  color: #c2b9a4;
}
.cf-player[data-turn="true"] {
  border-color: #e9c57b;
  box-shadow: 0 0 18px #e9c57b26;
}
.cf-player[data-color="red"] {
  border-bottom: 3px solid #e74e57;
}
.cf-player[data-color="yellow"] {
  border-bottom: 3px solid #e7bf4e;
}
.cf-status {
  text-align: center;
  min-height: 24px;
  font-size: 14px;
  margin: 0;
}
.cf-stage {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  container-type: size;
}
.cf-board {
  position: relative;
  width: min(100cqw, 111cqh);
  aspect-ratio: 10/9;
  isolation: isolate;
  filter: drop-shadow(0 14px 15px #0008);
}
.cf-board-image {
  display: block;
  width: 100%;
  height: 100%;
}
.cf-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cf-column {
  position: absolute;
  top: 7%;
  width: 12%;
  height: 84%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  border-radius: 12px;
  pointer-events: auto;
  z-index: 3;
  box-shadow: none !important;
}
.cf-column img {
  width: 100%;
  height: 100%;
  opacity: 0;
}
.cf-column:not(:disabled):hover img,
.cf-column:focus-visible img {
  opacity: 1;
}
.cf-column:focus-visible {
  outline: 2px solid #ffe7aa;
  outline-offset: -2px;
}
.cf-column span {
  position: absolute;
  top: -4%;
  left: 0;
  width: 100%;
  color: #f8d895;
  font-size: 12px;
  opacity: 0.8;
}
.cf-column:disabled {
  cursor: default;
  opacity: 1;
}
.cf-column:disabled span {
  opacity: 0.25;
}
.cf-disc {
  position: absolute;
  width: 9.6%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
}
.cf-disc > img {
  width: 100%;
  height: 100%;
  display: block;
}
.cf-disc .cf-win-glow {
  position: absolute;
  inset: 0;
  animation: cf-pulse 1s ease-in-out infinite alternate;
}
.cf-disc.dropping {
  animation: cf-drop var(--drop-duration) cubic-bezier(0.35, 0.02, 0.75, 1) both;
}
.cf-chat {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
}
.cf-chat button {
  font-size: 12px;
  padding: 10px;
  margin: 0;
}
.cf-error {
  font-size: 12px;
  color: #ffb7af;
  text-align: center;
  margin: 0;
}
.cf-result-link {
  display: block;
  text-align: center;
  padding: 10px;
  border: 1px solid #a8894c;
  border-radius: 12px;
  color: #ffe1a1;
}
.cf-intro-board {
  max-width: 300px;
  width: 100%;
  display: block;
  margin: auto;
}
.cf-feature-image {
  width: 110px;
  height: 100px;
  object-fit: contain;
}
@keyframes cf-drop {
  from {
    transform: translate(-50%, calc(-50% + var(--drop-distance)));
  }
  to {
    transform: translate(-50%, -50%);
  }
}
@keyframes cf-pulse {
  to {
    filter: brightness(1.5);
    opacity: 0.6;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cf-disc.dropping,
  .cf-disc .cf-win-glow {
    animation: none;
  }
}
@media (max-height: 650px) {
  .cf-game {
    gap: 6px;
  }
  .cf-player img {
    height: 40px;
    width: 36px;
  }
  .cf-header {
    height: 36px;
  }
  .cf-chat button {
    padding: 6px;
  }
}
.chess-entry {text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center}
.chess-entry-board{width:min(75vw,320px);border-radius:10px}
.chess-eyebrow{letter-spacing:.22em;color:#cfb177;font-size:11px}
.app-shell.in-game:has(.chess-game){max-width:1100px}
.chess-game{min-height:100dvh;width:100%;box-sizing:border-box;padding:10px max(8px,env(safe-area-inset-right));background:radial-gradient(ellipse at top,#352719,#131315 70%);color:#f1e6d3;display:block}
.chess-game button,.chess-game a{font:inherit;color:inherit}
.chess-top{display:flex!important;justify-content:space-between;align-items:center;width:100%!important;max-width:920px;margin:0 auto 8px;min-height:38px}
.chess-top div{text-align:center;display:flex;flex-direction:column}
.chess-top small{font-size:9px;letter-spacing:.24em;color:#bd9a5b}
.chess-top b{font-size:18px}.chess-game button{border:1px solid #80674155;background:#252324;border-radius:9px;padding:7px 11px;cursor:pointer}
.chess-game button:disabled{opacity:.5}
.chess-layout{display:flex;justify-content:center;gap:20px}.chess-table{width:min(calc(100vw - 16px),calc(100dvh - 270px),620px);min-width:280px}
.chess-board-stage{position:relative;width:100%;aspect-ratio:1;user-select:none;filter:drop-shadow(0 10px 20px #0008)}
.chess-board-image{display:block;width:100%;height:100%}.chess-square-overlay{position:absolute;direction:ltr}
.chess-game .chess-square{position:absolute;width:12.5%;height:12.5%;min-height:0;min-width:0;padding:0;border:0;background:transparent;border-radius:0;display:grid;place-items:center;touch-action:manipulation}
.chess-square[data-selected=true]{box-shadow:inset 0 0 0 3px #efc965;background:#e8bd5c66}
.chess-square[data-last=true]{background:#e9c95044}.chess-square[data-check=true]{box-shadow:inset 0 0 16px 4px #bb1515}
.chess-piece{width:88%;height:88%;object-fit:contain;z-index:1;filter:drop-shadow(0 2px 1px #0006)}
.chess-game .chess-moving-piece{position:absolute;left:0;top:0;width:12.5%;height:12.5%;min-height:0;border:0;border-radius:0;padding:0;background:transparent;display:grid;place-items:center;z-index:3}
.chess-game .chess-moving-piece:hover{background:transparent}
@media(prefers-reduced-motion:no-preference){.chess-moving-piece{transition:transform 180ms ease-in-out}}
.chess-coordinate{position:absolute;left:2px;top:1px;font:7px sans-serif;color:#705732;pointer-events:none}
.chess-legal-dot{width:22%;height:22%;border-radius:50%;background:#1e332e99;position:absolute;z-index:2}
.chess-capture-ring{position:absolute;inset:3%;border:3px solid #bd742acc;border-radius:50%;z-index:2}
.chess-hud{position:relative;min-height:51px;margin:6px 7px;padding:7px 11px;border:1px solid #78604455;border-radius:10px;background:#1d1c20;display:grid;grid-template-columns:1fr auto;gap:2px;align-items:center}
.chess-hud>a{font-weight:bold;text-decoration:none;font-size:14px}.chess-hud small{font-size:10px;color:#b6ac9a;grid-column:1}
.chess-hud time{font:600 24px ui-monospace,monospace;grid-column:2;grid-row:1/3;direction:ltr;padding:4px 9px;background:#111217;border-radius:8px;min-width:93px;text-align:center}
.chess-hud[data-active=true]{border-color:#c99b51}.chess-hud[data-active=true] time{background:#ddc18a;color:#241c12}.chess-hud time[data-urgent=true]{color:#ea6f64}
.chess-captured{display:flex;position:absolute;bottom:2px;left:115px;max-width:45%;overflow:hidden}.chess-captured img{height:16px;width:12px;object-fit:contain}
.chess-status{font-size:12px;text-align:center;margin:6px;min-height:18px}
.chess-quick-chat{display:flex;gap:6px;justify-content:center}.chess-quick-chat button{font-size:11px;padding:7px}
.chess-history{width:220px;max-height:75dvh;overflow:auto;background:#1b1b20;border:1px solid #705e3c55;border-radius:12px;padding:12px}
.chess-history h2{font-size:14px;color:#c9a766}.chess-history button{font-size:12px;margin:2px}.chess-history pre{white-space:pre-wrap;font-size:11px}
.chess-menu{display:flex;flex-wrap:wrap;gap:5px;max-width:620px;margin:6px auto;font-size:12px}.chess-menu a{padding:8px}
.chess-draw,.chess-result{background:#252126;border:1px solid #9a804d;padding:12px;border-radius:12px;text-align:center;font-size:12px}.chess-result h2{font-size:20px}
.chess-result button{margin:3px}.chess-error,.chess-bubble{position:fixed;bottom:12px;left:5%;right:5%;background:#3d2428;padding:10px;border-radius:10px;z-index:20;text-align:center}
.chess-modal{position:fixed;inset:0;background:#000a;z-index:40;display:grid;place-items:center}.chess-modal section{background:#242127;border:1px solid #d4ac63;padding:20px;border-radius:16px}.chess-modal h2{font-size:16px}.chess-modal section>div{display:flex;gap:8px}.chess-modal img{width:50px;height:65px;object-fit:contain}
.chess-loading{min-height:80dvh;display:grid;place-content:center;text-align:center;background:#18161b}
.chess-game .chess-profile-button{border:0;background:none;min-height:0;padding:0;justify-content:flex-start;font-weight:bold;font-size:14px}
.chess-profile-button img{width:24px;height:24px;border-radius:50%;object-fit:cover}
.chess-modal .chess-profile-modal{width:min(94vw,600px);max-height:85dvh;overflow:auto}
@media(max-width:900px){.chess-layout{display:block}.chess-table{margin:auto}.chess-history{width:min(94%,440px);max-height:90px;margin:10px auto;padding:7px}.chess-history h2{display:none}.chess-history details{display:none}}
@media(prefers-reduced-motion:no-preference){.chess-piece{animation:chess-appear 160ms ease-out}@keyframes chess-appear{from{opacity:.45;transform:scale(.92)}to{opacity:1;transform:scale(1)}}}
.hokm-entry { text-align:center; max-width:560px; margin:auto; }
.hokm-entry>img { width:min(75%,300px); border-radius:24px; display:block; margin:20px auto; box-shadow:0 16px 50px #0008; }
.hokm-entry>button,.hokm-entry>a { display:block; margin:12px auto; }
.hokm-game { height:100dvh; max-width:760px; margin:auto; display:flex; flex-direction:column; gap:8px; padding: max(8px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom)); box-sizing:border-box; color:#f6e8c7; background:radial-gradient(ellipse at center,#122b23,#090f10 85%); position:relative; overflow:hidden; }
.hokm-game button,.hokm-game a { touch-action:manipulation; }
.hokm-toolbar { display:flex; justify-content:space-between; align-items:center; min-height:38px; }
.hokm-toolbar button,.hokm-toolbar a { background:#192422; border:1px solid #ba965548; border-radius:12px; padding:8px 14px; color:#ead7b4; font-size:12px; text-decoration:none; }
.hokm-toolbar strong { font-size:22px; }.hokm-toolbar small { font-size:11px; font-weight:400; margin-inline-start:8px; opacity:.7; }
.hokm-score { display:flex; justify-content:space-around; text-align:center; align-items:center; border:1px solid #b9974a45; background:#101b19; border-radius:16px; padding:6px; flex-shrink:0; }
.hokm-score>div { display:flex; gap:3px; flex-direction:column; font-size:11px; }.hokm-score b {font-size:22px;color:#efc777;line-height:1.1}.hokm-score small {font-size:10px;opacity:.8}
.hokm-trump img {width:32px;height:32px;object-fit:contain;margin:auto}
.hokm-stage {position:relative;width:100%;flex:1;min-height:230px;max-height:620px;isolation:isolate;direction:ltr;}
.hokm-table-surface{position:absolute;inset:30px 18px 26px;border-radius:46% / 20%;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#286553,#143c33 75%);border:5px solid #48372a;box-shadow:0 0 0 1px #b28c52,0 0 0 6px #181a17,0 15px 28px #0009,inset 0 0 0 2px #be995b70,inset 0 0 45px #0008;pointer-events:none;}
.hokm-table-surface::after{content:"";position:absolute;inset:13px;border:1px solid #d2b57340;border-radius:inherit;}
.hokm-table{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.24;mix-blend-mode:luminosity;pointer-events:none;}
.hokm-table-mark{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;font-weight:800;letter-spacing:4px;color:#e8cc9250;gap:5px;text-shadow:0 1px #0005;}
.hokm-table-mark span{font-size:8px;letter-spacing:5px;opacity:.7;}
.hokm-player{--seat-color:#82cdb6;position:absolute;transform:translate(-50%,-50%);z-index:3;width:150px;max-width:44%;padding:7px 9px;border-radius:18px;background:linear-gradient(145deg,#1d3430f5,#10211ff5);border:1px solid #68867b88;color:#f3ebd8;display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:2px 8px;box-shadow:0 5px 14px #0007;direction:rtl;text-align:right;transition:border-color .2s,box-shadow .2s;}
.hokm-player.rival{--seat-color:#d7a393;background:linear-gradient(145deg,#30312ef5,#19221ff5);border-color:#826c5988;}
.hokm-avatar-frame{position:relative;width:44px;height:44px;grid-row:1/3;border-radius:50%;padding:3px;box-sizing:border-box;background:linear-gradient(140deg,var(--seat-color),#23332c);box-shadow:0 2px 5px #0005;}
.hokm-avatar{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;border:2px solid #182b24;box-sizing:border-box;}
.hokm-player-info{min-width:0;display:grid;gap:2px;}
.hokm-player strong{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:700;line-height:1.5;}
.hokm-player small{font-size:10px;color:var(--seat-color);line-height:1.4;}
.hokm-presence{position:absolute;right:1px;bottom:3px;width:8px;height:8px;border-radius:50%;background:#8bd4ac;border:2px solid #182722;}
.hokm-player.disconnected .hokm-presence{background:#ed876d;}
.hokm-player.disconnected small{color:#edaf9c;}
.hokm-hakem{position:absolute;top:-13px;left:50%;transform:translateX(-50%);width:24px;height:24px;object-fit:contain;filter:drop-shadow(0 2px 2px #0008);}
.hokm-seat-meta{display:flex;align-items:center;gap:5px;min-height:17px;}
.hokm-card-count{font-size:10px;color:#c3cdc5;white-space:nowrap;}
.hokm-seat-timer{font-size:10px;font-variant-numeric:tabular-nums;color:#ffe5ac;background:#d4ad5922;border-radius:5px;padding:1px 4px;white-space:nowrap;}
.hokm-seat-turn{position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);background:#e0bc76;color:#182b24;font-size:9px;font-weight:bold;line-height:19px;border-radius:0 0 8px 8px;padding:0 10px;white-space:nowrap;}
.hokm-player.active{border-color:#efca81;box-shadow:0 0 0 2px #dfb05e33,0 0 24px #d8b36633,0 6px 15px #0008;}
.hokm-player.active .hokm-avatar-frame{background:linear-gradient(135deg,#fff0be,#d5a648);}
.hokm-player.seat-1,.hokm-player.seat-3{width:68px;max-width:21%;padding:7px 3px;display:flex;flex-direction:column;gap:4px;border-radius:16px;text-align:center;}
.hokm-player.seat-1 .hokm-player-info,.hokm-player.seat-3 .hokm-player-info{width:100%;}
.hokm-player.seat-1 .hokm-seat-meta,.hokm-player.seat-3 .hokm-seat-meta{justify-content:center;gap:3px;flex-wrap:wrap;}
.hokm-player.seat-1 .hokm-card-count span,.hokm-player.seat-3 .hokm-card-count span{display:none;}
.hokm-trick-card{position:absolute;z-index:2;width:clamp(40px,13%,75px);aspect-ratio:5/7;object-fit:contain;transform:translate(-50%,-50%);filter:drop-shadow(0 4px 4px #0007);animation:hokm-play .24s ease-out both;}
.hokm-trick-card.collect{animation:hokm-collect .24s .6s ease-in both}
.hokm-turn{font-size:11px;display:flex;justify-content:space-between;align-items:center;min-height:24px;gap:5px}.hokm-turn b{white-space:nowrap;color:#efc777}
.hokm-hand{position:relative;height:125px;flex-shrink:0; margin-top:15px;}
.hokm-hand-card{position:absolute;top:12px;background:none!important;border:0!important;border-radius:6px;padding:0!important;box-shadow:none;transition:transform .18s ease,filter .18s ease;aspect-ratio:512/716;transform-origin:50% 100%;}
.hokm-hand-card img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(-2px 2px 2px #0006)}
.hokm-hand-card:disabled{opacity:1;cursor:default;filter:brightness(.78)}.hokm-hand-card.selected img{filter:drop-shadow(0 0 5px #f5d083)}
.hokm-actions{display:flex;gap:6px;flex-shrink:0}.hokm-actions button{padding:9px 10px;font-size:12px;border-radius:12px;min-height:40px}.hokm-actions .primary{flex:1;background:linear-gradient(120deg,#d9b368,#a07a38);color:#161a11}
.hokm-ceremony,.hokm-round{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;z-index:4;font-size:12px}.hokm-ceremony img{width:65px}.hokm-round{background:#0b1b15ed;border:1px solid #cda352;padding:18px;border-radius:18px;width:65%}.hokm-round strong{font-size:18px}
.hokm-dealing{position:absolute;left:50%;top:50%;width:45px;animation:hokm-deal .6s both}
.hokm-bubble{position:absolute;left:50%;bottom:22%;transform:translateX(-50%);background:#fff4d8;color:#173324;padding:7px 14px;border-radius:14px;z-index:6;font-size:12px;white-space:nowrap}
.hokm-trump-selector{position:absolute;z-index:10;top:30%;left:7%;right:7%;padding:18px 10px;border-radius:20px;background:#101f1ef5;border:1px solid #dfb661;box-shadow:0 16px 60px #0009;text-align:center}.hokm-trump-selector h2{font-size:17px}.hokm-trump-selector>div{display:flex;gap:5px;justify-content:center;margin:12px 0}.hokm-trump-selector button{display:flex;flex-direction:column;align-items:center;background:#21362e;border:1px solid #d2ad5666;border-radius:12px;width:23%;padding:9px 4px;color:#f6e8c7;font-size:12px}.hokm-trump-selector img{width:40px;height:40px;object-fit:contain}.hokm-trump-selector small{font-size:11px}
.hokm-result{position:absolute;inset:15% 5% auto;z-index:15;background:#101c18f7;border:1px solid #d4b475;border-radius:24px;text-align:center;padding:24px;box-shadow:0 20px 100px #000c}.hokm-result>img{width:65px}.hokm-result h1{font-size:22px}.hokm-result button{display:block;width:100%;margin-top:10px;padding:12px}.hokm-profile{position:absolute;inset:0;overflow:auto;background:#0f171b;z-index:30}.hokm-error{position:absolute;top:8px;left:8px;right:8px;background:#7d2222;padding:14px;z-index:40;border-radius:12px;font-size:12px}.hokm-error button{margin-inline-start:10px}
@keyframes hokm-play{from{left:var(--from-left);top:var(--from-top);opacity:.2;transform:translate(-50%,-50%) scale(.7)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes hokm-collect{to{left:var(--winner-left);top:var(--winner-top);opacity:0;transform:translate(-50%,-50%) scale(.4)}}
@keyframes hokm-deal{from{transform:translate(-50%,-50%) scale(.8)}to{transform:translate(-50%,160%) scale(.5);opacity:0}}
@media(max-height:700px){.hokm-game{gap:4px}.hokm-hand{height:105px;margin-top:8px}.hokm-score{padding:3px}.hokm-player{padding-top:5px;padding-bottom:5px}}
@media(min-width:700px) and (max-height:550px){.hokm-game{max-width:1100px;padding-right:270px}.hokm-hand{position:absolute;right:8px;bottom:65px;width:250px!important;height:120px}.hokm-actions{position:absolute;right:8px;bottom:12px;width:250px}.hokm-stage{min-height:180px}.hokm-hand-card{top:5px}.hokm-score{position:absolute;right:8px;top:65px;width:240px}.hokm-trump-selector{left:20%;right:35%}}
@media(prefers-reduced-motion:reduce){.hokm-game *{animation:none!important;transition:none!important}}

/* Table HUD only: card art, hand layout and trick-card rules above are unchanged. */
.hokm-game{background:radial-gradient(ellipse at 50% 35%,#20332c,#0b1715 75%);}
.hokm-score{border-radius:14px;background:linear-gradient(110deg,#18332b,#13241f);border-color:#93a48a33;min-height:54px;box-sizing:border-box;}
.hokm-score>div:first-child{color:#aee1cd;}.hokm-score>div:last-child{color:#e8bcab;}
.hokm-score b{font-size:24px;color:inherit;}.hokm-score small{color:#c6cfc3;}
.hokm-trump{min-width:78px;border-inline:1px solid #bca77725;padding-inline:12px;}
.hokm-turn{border-radius:9px;padding:4px 9px;background:#ffffff05;box-sizing:border-box;color:#bdc8be;}
.hokm-turn.your-turn{background:#d4ae6218;color:#f3d59b;border-inline-start:3px solid #dfb568;}
@media(max-width:374px){.hokm-player.seat-1,.hokm-player.seat-3{width:62px}.hokm-player strong{font-size:11px}.hokm-player{gap:2px 5px;width:140px}.hokm-avatar-frame{width:40px;height:40px}.hokm-player{grid-template-columns:40px minmax(0,1fr)}}
@media(min-width:700px) and (max-height:550px){.hokm-player.seat-0,.hokm-player.seat-2{width:155px;max-width:48%;padding:4px 8px}.hokm-player.seat-0{top:89%!important}.hokm-player.seat-2{top:11%!important}.hokm-table-surface{inset:22px 20px}.hokm-player.seat-1,.hokm-player.seat-3{gap:2px;padding:5px 3px}.hokm-avatar-frame{width:34px;height:34px}.hokm-player{grid-template-columns:34px minmax(0,1fr)}.hokm-seat-turn{bottom:-13px;line-height:15px;font-size:8px}.hokm-score{min-height:70px}.hokm-player strong{font-size:11px}}
.backgammon-page{height:100dvh;box-sizing:border-box;background:radial-gradient(ellipse at 50% 40%,#23433e,#101f20 70%);color:#f5e8cc;padding:max(8px,env(safe-area-inset-top)) 10px max(8px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:8px;overflow:auto;font-size:14px}.backgammon-page button{font:inherit;color:inherit;border:1px solid #987950;background:#263b38;border-radius:10px;padding:8px 12px;touch-action:manipulation;cursor:pointer}.backgammon-page button:disabled{cursor:default}.backgammon-header{display:flex;align-items:center;justify-content:space-between;width:min(100%,680px);flex:none}.backgammon-header div{text-align:center;display:grid;gap:2px}.backgammon-header strong{font-size:20px;color:#e9c27a}.backgammon-header small{color:#c2d3ca}.backgammon-table{width:min(100%,680px,calc((100dvh - 285px)*1.173));aspect-ratio:11177/9526;position:relative;flex:none;border-radius:8px;box-shadow:0 12px 32px #0009,0 0 0 2px #ac8954;direction:ltr;isolation:isolate}.bg-art{position:absolute;inset:0;width:100%;height:100%;border-radius:8px;pointer-events:none}.backgammon-page .bg-point{position:absolute;width:6.1%;height:38%;padding:0;border:0;border-radius:4px;background:transparent;transform:translateX(-50%);opacity:1}.backgammon-page .bg-point.bottom{transform:translate(-50%,-100%)}.bg-checker{position:absolute;left:0;width:100%;height:auto;filter:drop-shadow(0 2px 2px #0009);pointer-events:none}.backgammon-page .selected{outline:2px solid #ffe3a0;box-shadow:0 0 12px #ffd77e88}.backgammon-page .legal{background:#e4c57355;outline:2px solid #f9dda0}.bg-count{position:absolute;right:-3px;font-size:10px;line-height:15px;min-width:15px;border-radius:8px;background:#112522;color:#fff;z-index:3}.top .bg-count{top:0}.bottom .bg-count{bottom:0}.bg-number{position:absolute;left:0;width:100%;font-size:9px;color:#f4d3a4;opacity:.8}.top .bg-number{top:-15px}.bottom .bg-number{bottom:-15px}.backgammon-page .bg-bar{position:absolute;left:47%;width:6%;height:24%;border:0;border-radius:4px;background:#22170f55;padding:0}.bg-bar.opponent{top:10%}.bg-bar.mine{bottom:10%}.bg-bar img{width:100%}.bg-bar b{display:block;font-size:12px}.bg-dice{position:absolute;top:44%;left:20%;width:22%;height:12%;display:flex;align-items:center;justify-content:center;gap:8%;pointer-events:none}.bg-dice img{width:36%;max-height:100%;object-fit:contain;filter:drop-shadow(0 3px 2px #0006)}.bg-dice span{font-size:24px}.bg-player{display:flex;align-items:center;gap:10px;width:min(100%,660px);padding:4px 10px;box-sizing:border-box;border:1px solid #42534a;border-radius:12px;background:#132824;flex:none;min-height:38px}.bg-player img{width:26px;height:26px;object-fit:contain}.bg-player b{flex:1}.bg-player span,.bg-player button{font-size:12px}.bg-player.active{border-color:#edc16f;box-shadow:0 0 14px #e0b76a22}.backgammon-controls{width:min(100%,660px);display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;flex:none;min-height:55px}.backgammon-controls p{width:100%;text-align:center;margin:0;font-size:12px}.backgammon-controls small{color:#ffad9e;width:100%;text-align:center}.backgammon-page .bg-roll{background:#bda066;color:#102420;font-weight:bold;opacity:.5}.backgammon-page .bg-roll.your-turn{opacity:1;box-shadow:0 0 20px #e0bb6866;transform:scale(1.06)}.bg-remaining{display:flex;gap:4px}.bg-remaining span{border:1px solid #ab9263;border-radius:6px;padding:2px 7px}.bg-chat{width:min(100%,660px);position:relative;margin-top:auto;display:flex;gap:8px;align-items:center;flex:none}.bg-chat-bubble{flex:1;font-size:12px;color:#efdbb9}.bg-chat-options{position:absolute;bottom:48px;left:0;right:0;display:flex;flex-wrap:wrap;gap:6px;background:#132824f5;border:1px solid #ac8954;border-radius:12px;padding:12px;z-index:10}.bg-chat-options button{flex:1;white-space:nowrap}.backgammon-landing{display:grid;place-items:center;gap:16px;text-align:center}.backgammon-landing button,.backgammon-landing a{padding:12px 25px;border:1px solid #ad986b;border-radius:12px;background:#183e3a;color:#f5e8cc}.bg-dice.rolling img{animation:bg-dice-roll .6s ease-in-out}.bg-dice.rolling img:nth-child(2){animation-delay:.05s}@keyframes bg-dice-roll{0%{transform:rotate(0) scale(.8)}45%{transform:rotate(160deg) translateY(-8px) scale(1.15)}100%{transform:rotate(360deg) scale(1)}}@media(prefers-reduced-motion:reduce){.bg-dice.rolling img{animation:none}}@media(max-height:500px) and (min-width:600px){.backgammon-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);grid-template-rows:auto auto auto 1fr auto;gap:5px}.backgammon-table{grid-column:2;grid-row:1/6;width:min(100%,calc((100dvh - 24px)*1.173));justify-self:center}.bg-player,.backgammon-header,.backgammon-controls,.bg-chat{grid-column:1}.backgammon-controls{font-size:12px}.backgammon-page button{padding:6px 9px}}

@font-face{font-family:"Vazirmatn Game";src:url("/fonts/Vazirmatn-33.003.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap}
:root{font-family:"Vazirmatn Game",Tahoma,sans-serif;color:#e7edf5;background:#080f1b;--muted:#91a2b8;--purple:#65d6a4;--line:#2a394c;font-synthesis:none;color-scheme:dark}
body{background:radial-gradient(ellipse at 50% 0,#192d32,#080f1b 65%);min-height:100dvh}button,input,select,textarea{font-family:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline-color:#9be8c1}button{background:#1b2a3d;border-color:#324356}button:hover:not(:disabled){background:#283d4d}button.primary,.primary{background:linear-gradient(135deg,#64d8a3,#43b887);color:#092d20;border-color:#79e2b2;font-weight:750}.primary:hover:not(:disabled){background:#80e5b9}input,select,textarea{background:#0e1928;border-color:#304157;border-radius:11px;color:#ecf1f7;font-size:14px}input:focus,select:focus,textarea:focus{border-color:#72c59b}h1,h2,h3{letter-spacing:0}p{line-height:1.9}.muted{color:var(--muted)}
.app-shell.modern-shell{width:100%;max-width:760px;min-height:100dvh;margin:0 auto;padding:0 0 calc(88px + env(safe-area-inset-bottom));background:linear-gradient(160deg,#101c2a,#0b1321 40%);box-shadow:0 0 100px #0004;border-inline:1px solid #24334355;direction:rtl}.modern-shell>.page{padding:24px 20px;min-height:0}.page-heading{margin-bottom:24px;gap:12px}.page-heading h1{font-size:25px}.page-heading>a,.icon-button{width:40px;height:40px;display:grid;place-items:center;border:1px solid #2c3e52;background:#162438;border-radius:12px;flex-shrink:0;color:#b1c0d3}.panel{background:#142031;border-color:#2c3d50;border-radius:17px;box-shadow:none}.tag{background:#213a33;color:#9cd3b5;border-radius:7px}.selected{border-color:#65c597}.guest-banner{background:#173127;border-color:#2f5644;color:#a9c5b5;font-size:12px;align-items:center}.guest-banner a{color:#a5edc4}.toast{background:#203c32;border:1px solid #52876a;color:#edfff4;box-shadow:0 8px 35px #0007;border-radius:14px;max-width:calc(100vw - 24px);z-index:100}.match-found{background:radial-gradient(ellipse,#204334,#101e2a 65%);color:#cff5df}.match-found .countdown{color:#90e2b4}.danger{color:#f4a7ad}.row{min-width:0}.person{gap:10px}.person>h3,.person>b{overflow-wrap:anywhere}.login{background:radial-gradient(ellipse at 50% 12%,#234b3b,#101e2c 43%,#0a1220 80%);color:#e5edf5}.account-login{padding:45px 20px 30px}.account-login .brand-mark{background:linear-gradient(135deg,#284d3b,#182e29);border:1px solid #719878;color:#a4e9bf;border-radius:27px;box-shadow:0 15px 65px #62d29720}.account-login .wordmark{font:800 25px/1.3 Arial;letter-spacing:3px;color:#b8e9c9}.account-login h1{font-size:clamp(23px,5vw,32px)}.account-login>p{max-width:370px;color:#9caebe;font-size:12px}.account-login .account-panel{background:#142131ee;border:1px solid #344a51;padding:23px;border-radius:24px;box-shadow:0 20px 60px #0003}.account-methods button{border-radius:13px;background:#213146;justify-content:flex-start;padding-inline:18px;font-size:13px}.account-methods button:first-child{background:#1b4964}.account-methods button:nth-child(2){background:#e1ece6;color:#24372d}.account-panel h2{margin:12px 0}.account-panel small{font-size:11px;color:#a4b7c9}.account-panel>p{font-size:12px}.account-login>small{color:#91ad9f}.account-page .setting{border-color:#293e4e}.account-form{gap:16px}.account-back{font-size:12px}.empty>svg{color:#83c8a5}.result-trophy{color:#e4c57e;background:radial-gradient(circle,#a3833733,transparent 65%)}.result-row .placement{color:#9de1b9}
.chess-game,.hokm-game,.c4-game,.backgammon-game,.ludo-game{font-family:"Vazirmatn Game",Tahoma,sans-serif;background-color:#0c1725}
.chess-hud,.chess-history,.chess-draw-offer,.chess-modal,.chess-result,.chess-menu,.hokm-modal,.hokm-menu,.backgammon-modal,.backgammon-menu,.c4-modal{font-family:inherit;background-color:#172636;border-color:#385147;border-radius:16px}
.chess-clock.active{background:#264638;color:#adebc7;border-color:#639d7c}
.game-chat{font-family:inherit;--chat-accent:#73d8aa}
@media(min-width:620px){.modern-shell>.page{padding:28px 30px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

.modern-shell>.themed-page{gap:0}.modern-shell>.profile-page{gap:15px}.profile-page .page-heading{margin-bottom:0}.profile-page .profile-hero{margin-top:0}.profile-tabs{margin-block:4px!important}.profile-medals+.profile-page h2{margin-top:15px}.setup-art img{object-fit:contain;background:#101b29;mask-image:radial-gradient(ellipse at center,#000 52%,transparent 85%)}.setup-art{background:radial-gradient(ellipse at center,#2b3029,#101c2a 75%)}
.match-page,.backgammon-page,.chess-game,.cf-match{background:radial-gradient(ellipse at 50% 25%,#1c3540,#0b1523 75%);font-family:"Vazirmatn Game",Tahoma,sans-serif}
.match-header,.cf-header,.backgammon-header{color:#e6edf4}.backgammon-header strong{color:#e5c890}.bg-player{background:#172a36;border-color:#354d59}.bg-player.active{border-color:#74c89b;box-shadow:0 0 16px #6acd9c18}.backgammon-page .bg-roll{background:#76d8a8;color:#092c20}.backgammon-page .bg-roll.your-turn{box-shadow:0 0 20px #63cf9a35}.bg-chat-options{background:#142a36f5;border-color:#497967}.backgammon-page .bg-chat button{border-color:#3d6357;background:#1d3935}.backgammon-controls p{color:#b4c7d0}
.chess-hud{background:#172734;border-color:#3b534a;color:#e5edf1}.chess-history,.chess-draw-offer,.chess-menu,.chess-modal{background:#172635;border-color:#3b5448}.chess-status{color:#a8d4be}
.cf-player{background-color:#172c37;border-color:#3a554a;color:#e4eee9}.cf-status{color:#bfdfce}.cf-header button,.cf-chat button{background-color:#1b3437;border-color:#3c6259}
.ludo-player{background:#162b38;border-color:#3a4f5c;color:#e1ecef}.ludo-player-info{color:inherit}.ludo-player.active{border-color:#75d6a6}.ludo-chat-options{background:#162b39;border-color:#456454}.chat-bubble{font-family:inherit}
.hokm-player-info{font-family:inherit}.hokm-seat-meta{font-family:inherit}
@media(max-width:370px){.game-setup{padding:18px 14px}.setup-modes>button{padding:16px 11px}.setup-modes strong{font-size:15px}.setup-private{gap:10px;font-size:11px}}

/* Shared match controls use the same palette as the lobby. */
.game-chat .game-chat-toggle{background:linear-gradient(145deg,#167c6b,#10554f);border-color:#42b79d66;color:#f1fff9}
.game-chat .game-chat-toggle[aria-expanded=true]{box-shadow:0 0 0 2px #46c5a533}
.game-chat .game-chat-panel{background:linear-gradient(145deg,#152b38,#101d2b);border-color:#6c9e994d}
.game-chat button{background:#1b3340;border-color:#87b1ab33;color:#edf5f3}
.game-chat button:hover:not(:disabled){background:#254c52;border-color:#59bda0}
.game-chat button:focus-visible{outline-color:#61d4b7}
.game-chat-panel header,.game-chat-panel small{color:#bdcfce}
.game-chat-received{background:#142e39f5;border-color:#69bba755}
.cf-game,.hokm-game{background:radial-gradient(ellipse at 50% 15%,#1a3440 0%,#0b1725 70%)}