@font-face {
  font-family: Vazirmatn;
  src: url("/static/games/fonts/Vazirmatn-Regular.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: Vazirmatn;
  src: url("/static/games/fonts/Vazirmatn-Bold.ttf") format("truetype");
  font-weight: 700;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: #14221b;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Vazirmatn, Tahoma, sans-serif;
  color: #f7f2e8;
  background:
    radial-gradient(circle at 18% 12%, rgba(216, 59, 54, .18), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(44, 111, 227, .18), transparent 30%),
    linear-gradient(135deg, #18291f 0%, #0d1713 52%, #231812 100%);
}

button,
input {
  font: inherit;
}

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

.dog-home-body,
.dog-room-body {
  overflow-x: hidden;
}

.dog-home-shell,
.dog-rules-shell {
  width: min(1120px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 30px 0 42px;
}

.dog-home-head,
.dog-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.dog-home-head h1,
.dog-topbar h1,
.dog-rules-shell h1 {
  margin: 8px 0 8px;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1.05;
}

.dog-home-head p {
  max-width: 720px;
  margin: 0;
  color: #d9d2c4;
  font-size: 1.04rem;
}

.dog-back-link,
.dog-help-link {
  color: #90d4ff;
  text-decoration: none;
  font-weight: 700;
}

.dog-help-link {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border: 1px solid rgba(144, 212, 255, .35);
  border-radius: 8px;
  background: rgba(10, 20, 26, .46);
}

.dog-lobby-grid,
.dog-rules-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.dog-panel,
.dog-rules-grid article {
  border: 1px solid rgba(247, 242, 232, .14);
  border-radius: 8px;
  background: rgba(19, 31, 25, .82);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
  padding: 20px;
}

.dog-panel h2,
.dog-rules-grid h2 {
  margin: 0 0 14px;
}

.dog-panel form,
.dog-actions form {
  display: grid;
  gap: 10px;
}

.dog-panel label,
.dog-actions label {
  color: #d9d2c4;
  font-size: .9rem;
}

.dog-panel input,
.dog-actions input {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(247, 242, 232, .2);
  border-radius: 8px;
  padding: 0 12px;
  color: #fff;
  background: rgba(4, 9, 7, .5);
}

.dog-panel button,
.dog-actions button,
.dog-mini-action,
.dog-move-chip {
  border: 0;
  border-radius: 8px;
  min-height: 42px;
  padding: 0 14px;
  color: #102018;
  background: linear-gradient(180deg, #ffe08a, #d59d2c);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .25);
  cursor: pointer;
  font-weight: 700;
}

.dog-messages {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}

.dog-messages article,
.dog-live-error {
  border: 1px solid rgba(255, 139, 126, .42);
  border-radius: 8px;
  padding: 10px 12px;
  color: #ffe2de;
  background: rgba(93, 24, 22, .68);
}

.dog-room-shell {
  width: min(1760px, calc(100vw - 24px));
  margin: 0 auto;
  padding: 18px 0 28px;
}

.dog-table {
  display: grid;
  grid-template-columns: minmax(245px, 315px) minmax(520px, 1fr) minmax(290px, 380px);
  gap: 16px;
  align-items: start;
}

.dog-side,
.dog-hand-panel,
.dog-log {
  border: 1px solid rgba(247, 242, 232, .14);
  border-radius: 8px;
  background: rgba(11, 19, 15, .74);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .32);
}

.dog-side,
.dog-hand-panel {
  padding: 14px;
}

.dog-status-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.dog-status-panel article {
  min-height: 70px;
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, .07);
}

.dog-status-panel span,
.dog-hand-panel header span,
.dog-player span,
.dog-win-box span {
  display: block;
  color: #b9c7bd;
  font-size: .78rem;
}

.dog-status-panel strong {
  display: block;
  margin-top: 6px;
  line-height: 1.25;
}

.dog-player-list {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}

.dog-player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--player-color), #ffffff 24%);
  border-radius: 8px;
  padding: 10px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--player-color), transparent 76%), rgba(255, 255, 255, .05));
}

.dog-player.is-current {
  box-shadow: inset 0 0 0 2px #ffe08a;
}

.dog-actions {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-top: 12px;
}

.dog-muted {
  margin: 0;
  color: #c8d2ca;
  line-height: 1.75;
}

.dog-win-box {
  border-radius: 8px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(36, 148, 99, .26), rgba(217, 166, 42, .2));
}

.dog-board-stage {
  min-width: 0;
  perspective: 1300px;
}

.dog-board-tilt {
  transform: rotateX(9deg);
  transform-origin: center top;
}

.dog-board {
  position: relative;
  width: min(88vh, 100%);
  max-width: 900px;
  min-width: min(100%, 520px);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 24px;
  background:
    radial-gradient(circle at center, rgba(28, 53, 40, .94) 0 22%, transparent 23%),
    conic-gradient(from 45deg, rgba(216, 59, 54, .18), rgba(217, 166, 42, .22), rgba(44, 111, 227, .2), rgba(36, 148, 99, .2), rgba(216, 59, 54, .18)),
    linear-gradient(135deg, #60391f, #2c190f 48%, #744627);
  box-shadow:
    inset 0 0 0 18px rgba(72, 41, 21, .9),
    inset 0 0 0 24px rgba(255, 224, 138, .16),
    0 38px 80px rgba(0, 0, 0, .48);
  overflow: hidden;
}

.dog-board::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 2px dashed rgba(247, 242, 232, .18);
  pointer-events: none;
}

.dog-board-rim {
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22, 38, 29, .78) 0 48%, rgba(255, 255, 255, .05) 49% 52%, transparent 53%);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .42);
}

.dog-center-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: 28%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffe08a;
  background: radial-gradient(circle, #253a2e, #0c1511);
  border: 2px solid rgba(255, 224, 138, .45);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .32), inset 0 0 30px rgba(255, 255, 255, .06);
}

.dog-center-badge strong {
  font-size: clamp(.7rem, 1.3vw, 1rem);
  letter-spacing: 0;
}

.dog-dice-cube {
  position: relative;
  width: 54px;
  height: 54px;
  transform-style: preserve-3d;
  transform: rotateX(-24deg) rotateY(34deg);
  animation: dog-dice-idle 7s linear infinite;
}

.dog-dice-cube i {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background:
    radial-gradient(circle at 34% 34%, #1b1712 0 8%, transparent 9%),
    radial-gradient(circle at 66% 66%, #1b1712 0 8%, transparent 9%),
    linear-gradient(135deg, #fff5d8, #d9a62a);
  border: 2px solid rgba(255, 255, 255, .5);
}

.dog-dice-cube .front { transform: translateZ(27px); }
.dog-dice-cube .back { transform: rotateY(180deg) translateZ(27px); }
.dog-dice-cube .right { transform: rotateY(90deg) translateZ(27px); }
.dog-dice-cube .left { transform: rotateY(-90deg) translateZ(27px); }
.dog-dice-cube .top { transform: rotateX(90deg) translateZ(27px); }
.dog-dice-cube .bottom { transform: rotateX(-90deg) translateZ(27px); }

@keyframes dog-dice-idle {
  0%, 100% { transform: rotateX(-24deg) rotateY(34deg); }
  50% { transform: rotateX(-16deg) rotateY(58deg); }
}

.dog-track-cell,
.dog-yard-slot,
.dog-home-slot {
  position: absolute;
  left: var(--left);
  top: var(--top);
  z-index: 7;
  width: clamp(24px, 4.6%, 42px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.dog-track-cell {
  background: radial-gradient(circle at 35% 30%, #fff8e8, #ad9880);
  border: 1px solid rgba(64, 45, 30, .7);
  box-shadow: inset 0 -5px 10px rgba(0, 0, 0, .22), 0 7px 12px rgba(0, 0, 0, .24);
}

.dog-track-cell.is-safe {
  background:
    radial-gradient(circle at center, rgba(255, 224, 138, .95) 0 20%, transparent 22%),
    radial-gradient(circle at 35% 30%, #f3f8ff, #8fb8d8);
}

.dog-home-slot {
  background: radial-gradient(circle, rgba(255, 224, 138, .45), rgba(255, 255, 255, .08));
  border: 1px solid rgba(255, 224, 138, .4);
}

.dog-yard-slot {
  background: radial-gradient(circle at 35% 30%, #533426, #24140d);
  border: 1px solid rgba(255, 255, 255, .11);
}

.dog-track-cell.is-target,
.dog-home-slot.is-target {
  outline: 2px solid rgba(144, 212, 255, .42);
}

.dog-track-cell.is-selected-target,
.dog-home-slot.is-selected-target {
  outline: 3px solid #ffe08a;
  box-shadow: 0 0 0 8px rgba(255, 224, 138, .18), 0 14px 24px rgba(0, 0, 0, .3);
}

.dog-piece {
  position: relative;
  width: 86%;
  aspect-ratio: 1;
  border-radius: 50% 50% 46% 46%;
  display: grid;
  place-items: center;
  color: white;
  background:
    radial-gradient(circle at 34% 22%, rgba(255, 255, 255, .8), transparent 18%),
    linear-gradient(145deg, color-mix(in srgb, var(--piece-color), #ffffff 18%), color-mix(in srgb, var(--piece-color), #000000 20%));
  border: 1px solid rgba(255, 255, 255, .34);
  box-shadow:
    inset 0 -7px 10px rgba(0, 0, 0, .28),
    0 9px 12px rgba(0, 0, 0, .36);
}

.dog-piece::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -12%;
  height: 22%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--piece-color), #000000 28%);
  box-shadow: 0 5px 8px rgba(0, 0, 0, .28);
}

.dog-piece i {
  position: relative;
  z-index: 1;
  font-style: normal;
  font-size: .68rem;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

.dog-piece.is-protected {
  box-shadow: 0 0 0 3px rgba(255, 224, 138, .55), inset 0 -7px 10px rgba(0, 0, 0, .28), 0 9px 12px rgba(0, 0, 0, .36);
}

.dog-hand-panel {
  display: grid;
  gap: 12px;
}

.dog-hand-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dog-card-grid {
  display: grid;
  gap: 12px;
}

.dog-card-shell {
  border: 1px solid rgba(247, 242, 232, .11);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, .045);
}

.dog-card-shell.is-selected {
  border-color: rgba(255, 224, 138, .7);
  background: rgba(255, 224, 138, .08);
}

.dog-card {
  width: 100%;
  min-height: 112px;
  border: 1px solid rgba(33, 22, 15, .46);
  border-radius: 8px;
  color: #26170f;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .74), transparent 30%),
    radial-gradient(circle at 85% 15%, rgba(44, 111, 227, .24), transparent 30%),
    linear-gradient(160deg, #fff2d0, #d9a62a 88%);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .28), 0 14px 22px rgba(0, 0, 0, .24);
  cursor: pointer;
  text-align: right;
  padding: 12px;
}

.dog-card span,
.dog-card small {
  display: block;
}

.dog-card strong {
  display: block;
  margin: 4px 0;
  font-size: 2.2rem;
  line-height: 1;
}

.dog-card.has-moves {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .74), transparent 30%),
    radial-gradient(circle at 85% 15%, rgba(36, 148, 99, .28), transparent 30%),
    linear-gradient(160deg, #fff7dc, #90d4ff 110%);
}

.dog-move-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.dog-move-chip {
  display: block;
  width: 100%;
  min-height: 38px;
  padding: 9px;
  color: #f6fff9;
  background: linear-gradient(180deg, #27684c, #163829);
  text-align: right;
}

.dog-move-chip b {
  display: block;
  color: #ffe08a;
  font-size: .78rem;
}

.dog-mini-action {
  width: 100%;
  margin-top: 8px;
}

.dog-mini-action.is-muted {
  color: #edf2ee;
  background: linear-gradient(180deg, #5a6265, #2d3335);
}

.dog-log {
  display: grid;
  gap: 6px;
  margin-top: 16px;
  padding: 12px;
  color: #d9d2c4;
}

.dog-log article {
  min-height: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  padding-bottom: 6px;
}

.dog-rules-shell p {
  color: #d9d2c4;
  line-height: 1.85;
}

@media (max-width: 1180px) {
  .dog-table {
    grid-template-columns: 1fr;
  }

  .dog-board {
    min-width: 0;
    width: min(96vw, 780px);
  }

  .dog-hand-panel {
    order: 3;
  }
}

@media (max-width: 720px) {
  .dog-home-shell,
  .dog-rules-shell,
  .dog-room-shell {
    width: min(100vw - 18px, 100%);
  }

  .dog-home-head,
  .dog-topbar,
  .dog-lobby-grid,
  .dog-rules-grid {
    grid-template-columns: 1fr;
    display: grid;
  }

  .dog-home-head h1,
  .dog-topbar h1,
  .dog-rules-shell h1 {
    font-size: 2.1rem;
  }

  .dog-status-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dog-board-tilt {
    transform: none;
  }

  .dog-center-badge {
    width: 31%;
  }

  .dog-dice-cube {
    width: 38px;
    height: 38px;
  }

  .dog-dice-cube .front { transform: translateZ(19px); }
  .dog-dice-cube .back { transform: rotateY(180deg) translateZ(19px); }
  .dog-dice-cube .right { transform: rotateY(90deg) translateZ(19px); }
  .dog-dice-cube .left { transform: rotateY(-90deg) translateZ(19px); }
  .dog-dice-cube .top { transform: rotateX(90deg) translateZ(19px); }
  .dog-dice-cube .bottom { transform: rotateX(-90deg) translateZ(19px); }
}