:root {
  --ink: #f7f4f0;
  --muted: #a9adb0;
  --gunmetal: #181a1c;
  --gunmetal-light: #24272a;
  --panel: rgba(27, 29, 31, 0.9);
  --panel-raised: rgba(38, 41, 44, 0.94);
  --line: rgba(255, 255, 255, 0.13);
  --line-strong: rgba(255, 255, 255, 0.24);
  --gold: #c8905b;
  --gold-light: #efc493;
  --red: #df222c;
  --red-dark: #8d1118;
  --white-piece: #f1ece6;
  --green: #61d6a9;
  --blue: #68bdf5;
  --orange: #ff9d4d;
  --purple: #c785ff;
  --shadow: 0 26px 80px rgba(0, 0, 0, 0.46);
}

* {
  box-sizing: border-box;
}

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

body {
  position: relative;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background-color: var(--gunmetal);
  background-image:
    radial-gradient(circle at 50% -10%, rgba(105, 111, 116, 0.2), transparent 38rem),
    radial-gradient(circle at 15% 42%, rgba(255, 255, 255, 0.025), transparent 26rem),
    radial-gradient(circle at 88% 72%, rgba(0, 0, 0, 0.34), transparent 34rem),
    repeating-linear-gradient(117deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(27deg, rgba(0, 0, 0, 0.055) 0 1px, transparent 1px 7px),
    linear-gradient(145deg, #202326 0%, #17191b 48%, #111315 100%);
}

body[data-background="green-felt"] {
  background-color: #123d2b;
  background-image:
    radial-gradient(circle at 50% -10%, rgba(105, 174, 135, 0.2), transparent 38rem),
    radial-gradient(circle at 15% 42%, rgba(255, 255, 255, 0.035), transparent 26rem),
    repeating-linear-gradient(118deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(28deg, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px 6px),
    linear-gradient(145deg, #205c40 0%, #123d2b 50%, #0a271c 100%);
}

body[data-background="royal-blue-felt"] {
  background-color: #12386b;
  background-image:
    radial-gradient(circle at 50% -10%, rgba(105, 157, 224, 0.22), transparent 38rem),
    radial-gradient(circle at 15% 42%, rgba(255, 255, 255, 0.035), transparent 26rem),
    repeating-linear-gradient(118deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(28deg, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px 6px),
    linear-gradient(145deg, #24599b 0%, #12386b 50%, #091f42 100%);
}

body[data-background="light-gray"] {
  background-color: #9da1a5;
  background-image:
    radial-gradient(circle at 50% -10%, rgba(255, 255, 255, 0.42), transparent 38rem),
    radial-gradient(circle at 88% 72%, rgba(38, 42, 46, 0.16), transparent 34rem),
    repeating-linear-gradient(117deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(27deg, rgba(0, 0, 0, 0.045) 0 1px, transparent 1px 7px),
    linear-gradient(145deg, #b9bdc0 0%, #9da1a5 50%, #858a8f 100%);
}

body[data-background="walnut-wood"] {
  background-color: #3b2115;
  background-image:
    radial-gradient(ellipse at 50% -20%, rgba(159, 99, 55, 0.24), transparent 48rem),
    repeating-linear-gradient(92deg, rgba(255, 198, 137, 0.045) 0 2px, transparent 2px 12px),
    repeating-linear-gradient(88deg, rgba(20, 8, 3, 0.12) 0 1px, transparent 1px 19px),
    linear-gradient(110deg, #2b160e 0%, #5a321f 28%, #352016 52%, #684027 72%, #24120c 100%);
}

body[data-background="black"] {
  background-color: #050607;
  background-image:
    radial-gradient(circle at 50% -10%, rgba(60, 64, 68, 0.2), transparent 38rem),
    radial-gradient(circle at 88% 72%, rgba(0, 0, 0, 0.6), transparent 34rem),
    linear-gradient(145deg, #0d0e0f 0%, #060708 52%, #000 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.09) 0 0.55px, transparent 0.7px),
    radial-gradient(circle, rgba(0, 0, 0, 0.13) 0 0.7px, transparent 0.85px);
  background-position: 0 0, 3px 4px;
  background-size: 7px 7px, 9px 9px;
  mix-blend-mode: soft-light;
}

button,
select {
  font: inherit;
}

button:focus-visible,
select:focus-visible {
  outline: 3px solid var(--gold-light);
  outline-offset: 3px;
}

.game-shell {
  width: min(1580px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: 22px clamp(18px, 3vw, 48px) 54px;
}

.game-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 130px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.header-theme-control {
  display: grid;
  width: min(190px, 100%);
  gap: 5px;
}

.header-theme-control label {
  color: var(--gold-light);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.background-control {
  align-self: start;
  justify-self: start;
  margin-top: 21px;
}

.header-actions {
  display: grid;
  align-self: start;
  justify-self: end;
  justify-items: end;
  width: min(190px, 100%);
  margin-top: 21px;
  gap: 7px;
}

.board-control {
  justify-items: stretch;
}

.board-control label {
  text-align: left;
}

.header-select-shell select {
  min-height: 36px;
  padding: 7px 34px 7px 11px;
  border-radius: 10px;
  font-size: 0.75rem;
}

.header-select-shell select:required:invalid {
  color: var(--gold-light);
}

.header-balance {
  min-width: 120px;
}

.brand {
  position: relative;
  display: grid;
  place-items: center;
  width: 250px;
  height: 130px;
  overflow: visible;
}

.brand-logo {
  position: absolute;
  top: 58%;
  left: 50%;
  display: block;
  width: clamp(190px, 16vw, 230px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.35));
  transform: translate(-50%, -50%);
}

.brand-logo.image-missing {
  display: none;
}

.button {
  min-height: 46px;
  padding: 11px 19px;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: 0.015em;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
    rgba(20, 22, 24, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 20px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.button:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(239, 196, 147, 0.72);
  background:
    linear-gradient(180deg, rgba(200, 144, 91, 0.2), rgba(200, 144, 91, 0.08)),
    rgba(24, 25, 27, 0.94);
}

.button:active:not(:disabled) {
  transform: translateY(0);
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.36;
}

.button-primary {
  justify-self: end;
  min-width: 122px;
  border-color: #e5aa6c;
  color: #1a1714;
  background: linear-gradient(145deg, #f1c08b, #d98f49);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    0 10px 26px rgba(0, 0, 0, 0.28);
}

.button-primary:hover:not(:disabled) {
  border-color: #ffd5a7;
  background: linear-gradient(145deg, #f7c995, #e59b52);
}

.status-row {
  display: grid;
  grid-template-columns: minmax(150px, 190px) minmax(560px, 780px) minmax(150px, 190px);
  justify-content: center;
  align-items: stretch;
  width: 100%;
  margin: 17px auto 4px;
  gap: clamp(28px, 4vw, 70px);
}

.status-mode-control {
  grid-column: 1;
  width: 100%;
}

.status-right-control {
  position: relative;
  grid-column: 3;
  width: 100%;
}

.status-language-control {
  width: 100%;
}

.status-language-shell,
.status-language-shell select {
  height: 100%;
}

.status-language-shell select {
  min-height: 52px;
  padding: 10px 23px 10px 7px;
  border-color: #e5aa6c;
  border-radius: 16px;
  color: #1a1714;
  font-size: 0.78rem;
  font-weight: 900;
  text-align: center;
  background: linear-gradient(145deg, #f1c08b, #d98f49);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    0 10px 26px rgba(0, 0, 0, 0.28);
}

.status-language-shell select:hover {
  border-color: #ffd5a7;
}

.status-language-shell .select-arrow {
  right: 14px;
  border-color: #503216;
}

.status-mode-shell,
.status-mode-shell select {
  height: 100%;
}

.status-mode-shell select {
  min-height: 52px;
  padding: 10px 23px 10px 7px;
  border-color: #e5aa6c;
  border-radius: 16px;
  color: #1a1714;
  font-size: 0.82rem;
  font-weight: 900;
  text-align: center;
  background: linear-gradient(145deg, #f1c08b, #d98f49);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    0 10px 26px rgba(0, 0, 0, 0.28);
}

.status-mode-shell select:hover {
  border-color: #ffd5a7;
}

.status-mode-shell .select-arrow {
  right: 14px;
  border-color: #503216;
}

.status-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  grid-column: 2;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 9px 14px;
  gap: 13px;
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
    rgba(17, 19, 21, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 14px 30px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(10px);
}

.status-new-game {
  position: absolute;
  top: calc(clamp(155px, 12vw, 190px) - 8px);
  right: 0;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  border-radius: 16px;
  white-space: nowrap;
}

.status-card p {
  margin: 0;
  overflow: hidden;
  color: #91f5df;
  font-size: clamp(0.76rem, 1.3vw, 0.92rem);
  font-weight: 680;
  line-height: 1.35;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow:
    0 0 7px rgba(116, 245, 220, 0.55),
    0 0 18px rgba(88, 207, 190, 0.22);
}

.status-card p.score-announcement {
  color: #b7fff0;
  font-size: clamp(0.92rem, 1.7vw, 1.18rem);
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  animation: statusPatternFlash 0.72s ease-in-out 3;
}

.turn-badge {
  display: inline-grid;
  place-items: center;
  min-width: 67px;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9px;
  color: #202224;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  background: var(--white-piece);
  box-shadow: inset 0 1px 0 white;
}

.turn-badge.red {
  color: white;
  border-color: rgba(255, 101, 109, 0.5);
  background: linear-gradient(145deg, #f53b44, #b9141c);
}

.turn-badge.silver {
  color: #20252a;
  border-color: rgba(235, 243, 250, 0.82);
  background: linear-gradient(145deg, #ffffff, #c5ccd3 58%, #8b949d);
  box-shadow:
    inset 0 1px 0 white,
    0 0 14px rgba(215, 228, 239, 0.16);
}

.turn-badge.gold {
  color: #2b2008;
  border-color: rgba(255, 225, 132, 0.88);
  background: linear-gradient(145deg, #fff0a8, #daa92e 56%, #9a7013);
  box-shadow:
    inset 0 1px 0 rgba(255, 247, 205, 0.92),
    0 0 14px rgba(226, 177, 46, 0.18);
}

.turn-badge.special {
  min-width: 86px;
  color: #1d1324;
  border-color: rgba(224, 182, 255, 0.75);
  background: linear-gradient(145deg, #e1b0ff, var(--purple));
}

.status-goal {
  color: #8f9498;
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-goal strong {
  color: var(--gold-light);
  font-size: 1rem;
}

.game-area {
  display: grid;
  grid-template-columns: minmax(150px, 190px) minmax(560px, 780px) minmax(150px, 190px);
  justify-content: center;
  align-items: start;
  gap: clamp(28px, 4vw, 70px);
}

@media (min-width: 1181px) {
  body[data-app-mode="tutorial"] .game-area {
    grid-template-columns: minmax(205px, 225px) minmax(560px, 780px) minmax(150px, 190px);
    gap: clamp(24px, 3vw, 48px);
  }
}

.tutorial-only {
  display: none;
}

body[data-app-mode="tutorial"] .game-only {
  display: none;
}

body[data-app-mode="tutorial"] .tutorial-only {
  display: grid;
}

body[data-app-mode="tutorial"] .status-goal {
  visibility: hidden;
}

body[data-app-mode="tutorial"] .event-banner,
body[data-app-mode="tutorial"] .modal-backdrop {
  display: none;
}

.tutorial-info-panel,
.tutorial-menu-panel {
  position: relative;
  align-content: start;
  width: 100%;
  min-height: 430px;
  margin-top: clamp(155px, 12vw, 190px);
  padding: 16px;
  gap: 13px;
  overflow: hidden;
  border: 1px solid rgba(121, 241, 218, 0.28);
  border-radius: 21px;
  background:
    linear-gradient(155deg, rgba(112, 238, 216, 0.055), transparent 45%),
    rgba(18, 22, 23, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 20px 45px rgba(0, 0, 0, 0.3),
    0 0 24px rgba(78, 206, 184, 0.055);
}

@media (min-width: 881px) {
  body[data-app-mode="tutorial"] .tutorial-info-panel {
    min-height: 515px;
    padding: 18px;
  }

  body[data-app-mode="tutorial"] .tutorial-screen {
    min-height: 372px;
  }
}

.tutorial-info-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background: repeating-linear-gradient(
    180deg,
    transparent 0 3px,
    rgba(255, 255, 255, 0.035) 3px 4px
  );
}

.tutorial-panel-label {
  position: relative;
  z-index: 1;
  color: var(--gold-light);
  font-size: 0.67rem;
  font-weight: 950;
  letter-spacing: 0.15em;
  text-align: center;
  text-transform: uppercase;
}

.tutorial-screen {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  width: 100%;
  min-height: 335px;
  padding: 18px 14px;
  gap: 12px;
  border: 1px solid rgba(137, 255, 232, 0.2);
  border-radius: 15px;
  background:
    radial-gradient(circle at 50% 25%, rgba(41, 92, 83, 0.28), transparent 66%),
    #060a0a;
  box-shadow:
    inset 4px 4px 12px rgba(0, 0, 0, 0.82),
    inset -2px -2px 7px rgba(180, 238, 228, 0.045);
}

.tutorial-step-label {
  color: #76bbae;
  font-size: 0.6rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tutorial-screen strong {
  color: #b7fff0;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-shadow:
    0 0 8px rgba(104, 238, 213, 0.58),
    0 0 20px rgba(104, 238, 213, 0.2);
}

.tutorial-screen p {
  margin: 0;
  color: #9ee8d9;
  font-size: 0.74rem;
  font-weight: 650;
  line-height: 1.65;
  text-shadow: 0 0 8px rgba(77, 205, 181, 0.22);
}

.tutorial-progress-track {
  align-self: end;
  height: 5px;
  margin-top: auto;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(123, 229, 209, 0.09);
}

.tutorial-progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #57cbb5, #aaffed);
  box-shadow: 0 0 12px rgba(111, 240, 216, 0.52);
  transition: width 240ms ease;
}

.tutorial-transport {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  padding: 9px;
  gap: 9px;
  border: 1px solid rgba(137, 255, 232, 0.18);
  border-radius: 14px;
  background: rgba(4, 10, 10, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.tutorial-transport-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 8px 10px;
  gap: 6px;
  border: 1px solid rgba(129, 239, 219, 0.26);
  border-radius: 11px;
  color: #aff8e9;
  background:
    linear-gradient(180deg, rgba(96, 221, 199, 0.09), transparent),
    rgba(6, 13, 13, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 8px 18px rgba(0, 0, 0, 0.22);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.035em;
  cursor: pointer;
}

.tutorial-transport-button:hover:not(:disabled) {
  border-color: rgba(149, 255, 235, 0.62);
  color: #d0fff5;
  transform: translateY(-1px);
}

.tutorial-transport-button:disabled {
  opacity: 0.34;
  cursor: not-allowed;
}

.tutorial-play-pause {
  border-color: rgba(239, 196, 147, 0.38);
  color: #ffe0b8;
  background:
    linear-gradient(180deg, rgba(230, 169, 99, 0.12), transparent),
    rgba(16, 13, 9, 0.9);
}

.tutorial-playback-icon {
  min-width: 0.9em;
  font-size: 0.85rem;
  line-height: 1;
}

.tutorial-voice-button {
  grid-column: 1 / -1;
  justify-self: center;
  width: 68%;
  border-color: rgba(156, 211, 255, 0.32);
  color: #c4e8ff;
  background:
    linear-gradient(180deg, rgba(98, 174, 229, 0.11), transparent),
    rgba(7, 13, 17, 0.9);
}

.tutorial-voice-button.is-on {
  border-color: rgba(130, 239, 218, 0.52);
  color: #cafff4;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 16px rgba(86, 218, 193, 0.1);
}

body.tutorial-paused .tutorial-piece,
body.tutorial-paused .tutorial-arrow,
body.tutorial-paused .tutorial-marker,
body.tutorial-paused .tutorial-cell-highlight,
body.tutorial-paused .tutorial-line-highlight {
  animation-play-state: paused !important;
}

.tutorial-menu-panel {
  min-height: 250px;
  border-color: rgba(239, 196, 147, 0.22);
  background:
    linear-gradient(155deg, rgba(239, 196, 147, 0.055), transparent 45%),
    rgba(22, 23, 24, 0.94);
}

.tutorial-menu-panel label {
  color: #d6d0c9;
  font-size: 0.64rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tutorial-topic-shell select {
  min-height: 46px;
  padding-inline: 10px 30px;
  font-size: 0.7rem;
}

.tutorial-menu-note {
  margin: 0;
  color: #989ea2;
  font-size: 0.68rem;
  line-height: 1.55;
}

.board-column {
  min-width: 0;
}

.player-card {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  width: 100%;
  min-height: 174px;
  padding: 20px 16px;
  gap: 9px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 23px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.075), transparent 62%),
    linear-gradient(145deg, rgba(45, 48, 51, 0.96), rgba(23, 25, 27, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.085),
    0 20px 45px rgba(0, 0, 0, 0.3);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.chess-clock {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-height: 58px;
  padding: 9px 13px;
  gap: 10px;
  overflow: hidden;
  border: 1px solid rgba(79, 190, 255, 0.34);
  border-radius: 15px;
  color: #72d7ff;
  background:
    linear-gradient(180deg, rgba(55, 178, 255, 0.1), transparent 52%),
    linear-gradient(145deg, rgba(18, 31, 43, 0.98), rgba(7, 13, 21, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -7px 13px rgba(0, 0, 0, 0.2),
    0 10px 22px rgba(0, 0, 0, 0.27);
  opacity: 0.72;
  transition: border-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.chess-clock::after {
  content: "";
  position: absolute;
  inset: 5px;
  pointer-events: none;
  border: 1px solid rgba(107, 205, 255, 0.1);
  border-radius: 10px;
}

.chess-clock.active {
  border-color: rgba(89, 204, 255, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -7px 13px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(68, 180, 255, 0.16),
    0 10px 24px rgba(0, 0, 0, 0.3),
    0 0 19px rgba(48, 174, 255, 0.24);
  opacity: 1;
  transform: translateY(-1px);
}

.clock-label {
  position: relative;
  z-index: 1;
  color: #6faed3;
  font-size: 0.55rem;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.clock-display {
  position: relative;
  z-index: 1;
  justify-self: end;
  min-width: 4.8em;
  color: #70d9ff;
  font-family: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 1.52rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: 0.045em;
  line-height: 1;
  text-align: right;
  text-shadow:
    0 0 1px rgba(220, 248, 255, 0.98),
    0 0 6px rgba(75, 201, 255, 0.68),
    0 0 13px rgba(41, 153, 255, 0.26);
}

.chess-clock.active .clock-label {
  color: #a9e9ff;
}

.language-ar select,
.language-ar .status-card,
.language-ar .tutorial-info-panel,
.language-ar .tutorial-menu-panel,
.language-ar .player-card,
.language-ar .game-controls,
.language-ar .marker-legend,
.language-ar .ai-level-card,
.language-ar .pattern-tv-card,
.language-ar .event-banner,
.language-ar .modal-card {
  direction: rtl;
}

body[data-board-theme="premium"] .white-clock,
body[data-board-theme="premium"] .red-clock {
  border-color: rgba(93, 196, 255, 0.48);
  background:
    linear-gradient(180deg, rgba(73, 188, 255, 0.13), transparent 52%),
    linear-gradient(145deg, rgba(27, 43, 56, 0.98), rgba(8, 16, 24, 0.98));
}

body[data-board-theme="premium"] .white-clock.active,
body[data-board-theme="premium"] .red-clock.active {
  border-color: rgba(111, 218, 255, 0.9);
}

.player-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 22%, rgba(239, 196, 147, 0.13), transparent 58%);
  transition: opacity 180ms ease;
}

.player-card.active {
  border-color: rgba(239, 196, 147, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 1px rgba(200, 144, 91, 0.16),
    0 22px 52px rgba(0, 0, 0, 0.36),
    0 0 30px rgba(200, 144, 91, 0.08);
}

.player-card.active::before {
  opacity: 1;
}

.player-heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.player-dot {
  display: block;
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 4px rgba(0, 0, 0, 0.11),
    0 5px 12px rgba(0, 0, 0, 0.26);
}

.player-white .player-dot {
  background: linear-gradient(145deg, #fffefa, #d8d0c8);
}

.player-red .player-dot {
  border-color: rgba(255, 158, 164, 0.62);
  background: linear-gradient(145deg, #fa3b45, #b41119);
}

body[data-board-theme="premium"] .player-white .player-dot {
  border-color: rgba(255, 255, 255, 0.78);
  background: linear-gradient(145deg, #ffffff, #b7bdc5 58%, #7f8790);
}

body[data-board-theme="premium"] .player-red .player-dot {
  border-color: rgba(255, 225, 147, 0.74);
  background: linear-gradient(145deg, #fff0a8, #daa92e 56%, #8f6710);
}

body[data-board-theme="premium"] .player-white {
  border-color: rgba(221, 230, 239, 0.58);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.22), transparent 60%),
    linear-gradient(145deg, rgba(90, 98, 106, 0.97), rgba(29, 34, 39, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 20px 45px rgba(0, 0, 0, 0.3);
}

body[data-board-theme="premium"] .player-red {
  border-color: rgba(235, 196, 92, 0.62);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 228, 139, 0.2), transparent 60%),
    linear-gradient(145deg, rgba(100, 79, 29, 0.97), rgba(38, 30, 17, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 173, 0.2),
    0 20px 45px rgba(0, 0, 0, 0.3);
}

body[data-board-theme="premium"] .player-white.active {
  border-color: rgba(235, 243, 250, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0 0 1px rgba(190, 206, 220, 0.22),
    0 22px 52px rgba(0, 0, 0, 0.36),
    0 0 30px rgba(205, 222, 236, 0.18);
}

body[data-board-theme="premium"] .player-red.active {
  border-color: rgba(255, 220, 112, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 241, 185, 0.26),
    0 0 0 1px rgba(226, 177, 46, 0.24),
    0 22px 52px rgba(0, 0, 0, 0.36),
    0 0 30px rgba(226, 177, 46, 0.18);
}

body[data-board-theme="premium"] .player-white::before {
  background: radial-gradient(circle at 50% 22%, rgba(224, 237, 247, 0.2), transparent 58%);
}

body[data-board-theme="premium"] .player-red::before {
  background: radial-gradient(circle at 50% 22%, rgba(255, 216, 91, 0.2), transparent 58%);
}

.player-name {
  color: #f5f3f0;
  font-size: 0.95rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.score {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 82px;
  min-height: 72px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 17px;
  color: white;
  font-size: 3.35rem;
  font-weight: 900;
  line-height: 1;
  background: rgba(7, 8, 9, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 8px 18px rgba(0, 0, 0, 0.2);
}

body[data-board-theme="premium"] .player-white .score {
  border-color: rgba(230, 238, 245, 0.62);
  color: #fbfdff;
  background:
    linear-gradient(145deg, rgba(216, 225, 233, 0.3), rgba(79, 89, 98, 0.36)),
    rgba(9, 12, 15, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 8px 18px rgba(0, 0, 0, 0.26),
    0 0 18px rgba(210, 225, 237, 0.1);
}

body[data-board-theme="premium"] .player-red .score {
  border-color: rgba(246, 206, 91, 0.66);
  color: #fff2b2;
  background:
    linear-gradient(145deg, rgba(236, 191, 62, 0.3), rgba(118, 82, 13, 0.36)),
    rgba(18, 13, 6, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 239, 176, 0.3),
    0 8px 18px rgba(0, 0, 0, 0.26),
    0 0 18px rgba(226, 177, 46, 0.12);
}

.player-detail {
  position: relative;
  z-index: 1;
  color: #9ca1a5;
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.left-rail,
.right-rail {
  position: relative;
  display: grid;
  align-content: start;
  width: 100%;
  margin-top: clamp(155px, 12vw, 190px);
  gap: 18px;
}

.winner-crown {
  position: absolute;
  top: -108px;
  left: 50%;
  z-index: 46;
  width: 112px;
  height: 96px;
  pointer-events: none;
  transform: translateX(-50%);
  filter:
    drop-shadow(0 7px 12px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 9px rgba(218, 166, 88, 0.2));
  animation: winnerCrownGlow 1.8s ease-in-out infinite;
}

.winner-crown[hidden] {
  display: none;
}

.winner-crown img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.player-card.winner {
  z-index: 45;
  border-color: rgba(239, 196, 119, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(200, 144, 59, 0.25),
    0 22px 52px rgba(0, 0, 0, 0.38),
    0 0 30px rgba(218, 166, 88, 0.15);
}

.marker-legend {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 19px;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.045), transparent),
    rgba(24, 26, 28, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 16px 36px rgba(0, 0, 0, 0.24);
}

.marker-legend span {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #d7d2cc;
  font-size: 0.76rem;
  letter-spacing: 0.03em;
}

.legend-ring {
  display: block;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border: 3px solid var(--blue);
  border-radius: 50%;
  box-shadow: 0 0 11px rgba(98, 185, 255, 0.52);
}

.legend-ring.jump {
  border-color: var(--green);
  box-shadow: 0 0 11px rgba(86, 224, 168, 0.5);
}

.legend-ring.vault {
  border-color: var(--orange);
  box-shadow: 0 0 11px rgba(255, 157, 77, 0.52);
}

.legend-ring.switch {
  border-color: var(--purple);
  box-shadow: 0 0 11px rgba(203, 131, 255, 0.52);
}

.ai-level-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 19px;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.045), transparent),
    rgba(24, 26, 28, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 16px 36px rgba(0, 0, 0, 0.24);
}

.ai-level-card label {
  display: block;
  margin-bottom: 9px;
  color: var(--gold-light);
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.select-shell {
  position: relative;
}

.select-shell select {
  width: 100%;
  min-height: 46px;
  padding: 10px 40px 10px 13px;
  border: 1px solid rgba(239, 196, 147, 0.32);
  border-radius: 12px;
  appearance: none;
  color: #f5f2ee;
  font-weight: 820;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    #1c1e20;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 7px 15px rgba(0, 0, 0, 0.18);
  cursor: pointer;
}

.select-shell select:hover {
  border-color: rgba(239, 196, 147, 0.68);
}

.select-shell select option {
  color: #f5f2ee;
  background: #202326;
}

.select-arrow {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--gold-light);
  border-bottom: 2px solid var(--gold-light);
  pointer-events: none;
  transform: translateY(-70%) rotate(45deg);
}

#aiLevelHint {
  display: block;
  margin-top: 8px;
  color: #93989c;
  font-size: 0.66rem;
  font-weight: 700;
}

.pattern-tv-card {
  display: grid;
  gap: 9px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 19px;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.045), transparent),
    rgba(24, 26, 28, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 16px 36px rgba(0, 0, 0, 0.24);
}

.pattern-tv-label {
  color: var(--gold-light);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.15em;
  text-align: center;
  text-transform: uppercase;
}

.pattern-tv {
  position: relative;
  width: min(100%, 160px);
  aspect-ratio: 1;
  justify-self: center;
  overflow: hidden;
  border: 1px solid rgba(145, 245, 223, 0.2);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 45%, rgba(56, 86, 82, 0.22), transparent 65%),
    #060809;
  box-shadow:
    inset 3px 3px 8px rgba(0, 0, 0, 0.78),
    inset -2px -2px 6px rgba(180, 238, 228, 0.055),
    0 0 18px rgba(65, 173, 155, 0.08);
}

.pattern-tv::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.2;
  background: repeating-linear-gradient(
    180deg,
    transparent 0 3px,
    rgba(255, 255, 255, 0.045) 3px 4px
  );
}

.pattern-tv.is-off {
  border-color: rgba(255, 255, 255, 0.08);
  background: #030405;
  box-shadow:
    inset 4px 4px 11px rgba(0, 0, 0, 0.9),
    inset -2px -2px 5px rgba(255, 255, 255, 0.025);
}

.pattern-grid {
  position: absolute;
  inset: 10%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 7%;
  padding: 7%;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 9px;
  --tv-color: #91f5df;
  --tv-glow: rgba(104, 238, 213, 0.82);
}

.pattern-grid.tone-cyan {
  --tv-color: #84eaff;
  --tv-glow: rgba(91, 220, 255, 0.86);
}

.pattern-grid.tone-rose {
  --tv-color: #ff747f;
  --tv-glow: rgba(255, 75, 91, 0.86);
}

.pattern-grid.tone-gold {
  --tv-color: #ffd08f;
  --tv-glow: rgba(255, 179, 86, 0.86);
}

.pattern-grid.tone-violet {
  --tv-color: #d6a2ff;
  --tv-glow: rgba(191, 112, 255, 0.86);
}

.pattern-grid.tone-green {
  --tv-color: #7effb7;
  --tv-glow: rgba(71, 235, 143, 0.86);
}

.pattern-tv-cell {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 24%;
  background: rgba(255, 255, 255, 0.012);
}

.pattern-tv-cell.active::before {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  background: var(--tv-color);
  box-shadow:
    0 0 5px var(--tv-color),
    0 0 13px var(--tv-glow),
    0 0 24px var(--tv-glow);
  animation: tvPatternPulse 3.6s ease-in-out 1;
}

.pattern-name {
  min-height: 1.15em;
  overflow: hidden;
  color: #b7fff0;
  font-size: 0.73rem;
  letter-spacing: 0.06em;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 0 9px rgba(104, 238, 213, 0.48);
  white-space: nowrap;
}

.pattern-guide-button {
  width: 100%;
  min-height: 38px;
  padding: 8px 9px;
  font-size: 0.68rem;
}

.pattern-guide-button.is-on {
  border-color: rgba(126, 241, 220, 0.42);
  color: #aaffed;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 0 15px rgba(72, 210, 186, 0.12);
}

.board-stage {
  position: relative;
  width: min(100%, 780px);
  aspect-ratio: 1;
  margin: clamp(26px, 3vw, 42px) auto 0;
  isolation: isolate;
  overflow: visible;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.board-stage::before {
  content: "";
  position: absolute;
  inset: 10%;
  z-index: 0;
  border-radius: 10%;
  background: radial-gradient(circle at 50% 44%, rgba(194, 131, 78, 0.12), transparent 65%);
  filter: blur(21px);
}

.board-stage::after {
  content: "";
  position: absolute;
  inset: -3%;
  z-index: 0;
  border: 1px solid rgba(184, 193, 198, 0.11);
  border-radius: 5%;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.08)),
    rgba(18, 20, 22, 0.34);
  box-shadow:
    inset 3px 3px 7px rgba(202, 211, 216, 0.1),
    inset -5px -5px 10px rgba(0, 0, 0, 0.42),
    0 13px 28px rgba(0, 0, 0, 0.16);
  pointer-events: none;
}

.board-image {
  position: absolute;
  left: 10.6%;
  top: 10.6%;
  z-index: 1;
  width: 78.8%;
  height: 78.8%;
  opacity: 0;
  object-fit: contain;
  pointer-events: none;
  filter:
    drop-shadow(0 24px 31px rgba(0, 0, 0, 0.45))
    saturate(0.96)
    contrast(1.03);
}

.board-image.is-loaded {
  opacity: 1;
}

.board-image.image-missing {
  display: none;
}

.layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pieces-layer {
  z-index: 5;
}

.tutorial-guide-layer,
.tutorial-pieces-layer,
.tutorial-effects-layer {
  display: none;
}

.tutorial-guide-layer {
  z-index: 4;
}

.tutorial-pieces-layer {
  z-index: 6;
}

.tutorial-effects-layer {
  z-index: 8;
}

body[data-app-mode="tutorial"] .pieces-layer,
body[data-app-mode="tutorial"] .markers-layer {
  display: none;
}

body[data-app-mode="tutorial"] .tutorial-guide-layer,
body[data-app-mode="tutorial"] .tutorial-pieces-layer,
body[data-app-mode="tutorial"] .tutorial-effects-layer {
  display: block;
}

.markers-layer {
  z-index: 7;
}

.piece,
.move-marker {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.piece {
  width: 13%;
  height: 13%;
  padding: 0;
  border: 0;
  color: currentColor;
  background: transparent;
  cursor: default;
  transition: left 250ms ease, top 250ms ease, transform 150ms ease, filter 150ms ease;
}

body[data-board-theme="premium"] .piece {
  width: 14%;
  height: 14%;
}

.tutorial-piece {
  pointer-events: none;
  animation: tutorialPieceIn 520ms cubic-bezier(0.2, 0.86, 0.28, 1) both;
}

.tutorial-piece.is-sequenced {
  animation-delay: var(--tutorial-sequence-delay, 0s);
}

.tutorial-piece.is-selected,
.tutorial-piece.is-ace,
.tutorial-piece.is-relay,
.tutorial-piece.is-pattern {
  z-index: 3;
}

.tutorial-piece.is-selected::after,
.tutorial-piece.is-ace::after,
.tutorial-piece.is-relay::after {
  content: "";
  position: absolute;
  inset: -8%;
  border: clamp(2px, 0.35vw, 4px) solid #9effec;
  border-radius: 50%;
  box-shadow:
    0 0 0 4px rgba(122, 255, 231, 0.14),
    0 0 26px rgba(92, 238, 211, 0.72);
  animation: selectionPulse 1.15s ease-in-out infinite;
}

.tutorial-piece[data-shape="square"].is-selected::after,
.tutorial-piece[data-shape="square"].is-ace::after,
.tutorial-piece[data-shape="square"].is-relay::after {
  border-radius: 13%;
}

.tutorial-piece.is-ace::after {
  border-color: #ffd289;
  box-shadow:
    0 0 0 4px rgba(255, 210, 137, 0.17),
    0 0 28px rgba(255, 184, 92, 0.8);
}

.tutorial-piece.is-relay::after {
  border-color: #79f1bd;
  box-shadow:
    0 0 0 4px rgba(121, 241, 189, 0.12),
    0 0 22px rgba(74, 222, 149, 0.64);
}

.tutorial-piece.is-pattern {
  animation:
    tutorialPieceIn 420ms cubic-bezier(0.2, 0.86, 0.28, 1) both,
    tutorialPatternFlash 1.25s ease-in-out infinite;
}

.tutorial-piece.is-dimmed {
  opacity: 0.24;
  filter: grayscale(0.5) brightness(0.72);
}

.tutorial-piece.is-blocker {
  filter: drop-shadow(0 0 10px rgba(255, 112, 112, 0.65));
}

.tutorial-piece-label {
  position: absolute;
  left: 50%;
  top: -17%;
  z-index: 5;
  min-width: 34px;
  padding: 3px 6px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #08100e;
  background: #9effec;
  box-shadow: 0 0 15px rgba(108, 244, 218, 0.5);
  font-size: clamp(0.42rem, 0.7vw, 0.62rem);
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  transform: translate(-50%, -100%);
}

.tutorial-piece.is-ace .tutorial-piece-label {
  background: #ffd289;
  box-shadow: 0 0 16px rgba(255, 190, 105, 0.58);
}

.tutorial-piece.is-relay .tutorial-piece-label {
  background: #79f1bd;
}

.tutorial-cell-highlight,
.tutorial-line-highlight {
  position: absolute;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(112, 242, 218, 0.7);
  background: rgba(72, 213, 188, 0.12);
  box-shadow:
    inset 0 0 18px rgba(91, 230, 205, 0.12),
    0 0 18px rgba(65, 218, 191, 0.32);
  animation: tutorialGuideGlow 1.5s ease-in-out infinite;
}

.tutorial-cell-highlight {
  width: 15.7%;
  height: 15.7%;
  border-radius: 12%;
}

.tutorial-line-highlight {
  border-radius: 12px;
}

.tutorial-line-highlight.row {
  width: 65.8%;
  height: 15.7%;
}

.tutorial-line-highlight.column {
  width: 15.7%;
  height: 65.8%;
}

.tutorial-cell-highlight.pattern {
  border-color: rgba(255, 203, 125, 0.76);
  background: rgba(255, 190, 103, 0.13);
  box-shadow:
    inset 0 0 18px rgba(255, 195, 112, 0.12),
    0 0 20px rgba(255, 184, 92, 0.38);
}

.tutorial-cell-highlight.invalid,
.tutorial-line-highlight.invalid {
  border-color: rgba(255, 105, 105, 0.72);
  background: rgba(255, 87, 87, 0.1);
  box-shadow: 0 0 18px rgba(255, 81, 81, 0.3);
}

.tutorial-arrow {
  --arrow-color: #86f6df;
  position: absolute;
  z-index: 2;
  height: clamp(3px, 0.42vw, 5px);
  border-radius: 999px;
  background: var(--arrow-color);
  box-shadow:
    0 0 7px var(--arrow-color),
    0 0 16px rgba(115, 240, 217, 0.48);
  transform-origin: 0 50%;
  animation: tutorialArrowPulse 1.05s ease-in-out infinite;
}

.tutorial-arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: clamp(9px, 1.35vw, 16px);
  height: clamp(9px, 1.35vw, 16px);
  border-top: clamp(3px, 0.42vw, 5px) solid var(--arrow-color);
  border-right: clamp(3px, 0.42vw, 5px) solid var(--arrow-color);
  filter: drop-shadow(0 0 5px var(--arrow-color));
  transform: translateY(-50%) rotate(45deg);
}

.tutorial-arrow.jump {
  --arrow-color: #4ad9ff;
}

.tutorial-arrow.opening {
  --arrow-color: #ffd289;
}

.tutorial-arrow.return {
  --arrow-color: #79f1bd;
}

.tutorial-arrow.switch {
  --arrow-color: #cf8dff;
}

.tutorial-arrow.vault {
  --arrow-color: #ff9c5b;
}

.tutorial-arrow.invalid {
  --arrow-color: #ff6969;
  opacity: 0.82;
}

.tutorial-marker {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 9.2%;
  aspect-ratio: 1;
  border: clamp(3px, 0.48vw, 5px) solid #9effec;
  border-radius: 50%;
  color: #edfffa;
  background: rgba(7, 26, 23, 0.28);
  box-shadow:
    inset 0 0 12px rgba(117, 255, 229, 0.18),
    0 0 18px rgba(80, 228, 201, 0.7);
  font-size: clamp(0.5rem, 1vw, 0.82rem);
  font-weight: 950;
  transform: translate(-50%, -50%);
  animation: tutorialMarkerPulse 1.15s ease-in-out infinite;
}

.tutorial-marker.opening {
  border-color: #ffd289;
  color: #fff0d4;
  box-shadow:
    inset 0 0 12px rgba(255, 210, 137, 0.17),
    0 0 18px rgba(255, 183, 89, 0.72);
}

.tutorial-marker.vault {
  border-color: #ff9c5b;
  box-shadow: 0 0 18px rgba(255, 128, 65, 0.72);
}

.tutorial-marker.invalid {
  border-color: #ff6969;
  color: #ffb2b2;
  box-shadow: 0 0 18px rgba(255, 79, 79, 0.7);
}

.tutorial-badge {
  position: absolute;
  z-index: 5;
  min-width: 34px;
  padding: 5px 8px;
  border: 1px solid rgba(166, 255, 237, 0.38);
  border-radius: 999px;
  color: #b7fff0;
  background: rgba(5, 18, 16, 0.9);
  box-shadow: 0 0 14px rgba(85, 228, 201, 0.26);
  font-size: clamp(0.48rem, 0.85vw, 0.72rem);
  font-weight: 950;
  letter-spacing: 0.06em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
}

.tutorial-badge.gold {
  border-color: rgba(255, 209, 137, 0.52);
  color: #ffe2ae;
  box-shadow: 0 0 15px rgba(255, 181, 85, 0.3);
}

.tutorial-badge.invalid {
  border-color: rgba(255, 105, 105, 0.58);
  color: #ffb0b0;
  box-shadow: 0 0 15px rgba(255, 74, 74, 0.3);
}

.tutorial-badge.pattern-title {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #ffffff;
  background: transparent;
  box-shadow: none;
  font-size: clamp(0.82rem, 1.35vw, 1.02rem);
  letter-spacing: 0.09em;
  text-shadow:
    0 2px 5px rgba(0, 0, 0, 0.92),
    0 0 11px rgba(255, 255, 255, 0.28);
}

.tutorial-cross {
  position: absolute;
  z-index: 7;
  width: 11%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(45deg);
}

.tutorial-cross::before,
.tutorial-cross::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 999px;
  background: #ff6969;
  box-shadow: 0 0 10px rgba(255, 83, 83, 0.82);
  transform: translate(-50%, -50%);
}

.tutorial-cross::before {
  width: 100%;
  height: 10%;
}

.tutorial-cross::after {
  width: 10%;
  height: 100%;
}

.piece.clickable {
  cursor: pointer;
}

.piece.clickable:hover {
  transform: translate(-50%, -50%) scale(1.08);
  filter: brightness(1.08);
}

.piece.selected {
  z-index: 3;
  transform: translate(-50%, -50%) scale(1.08);
}

.piece.selected::after,
.piece.break-choice::after {
  content: "";
  position: absolute;
  inset: -8%;
  border: clamp(2px, 0.35vw, 4px) solid var(--gold-light);
  border-radius: 50%;
  box-shadow:
    0 0 0 4px rgba(255, 215, 170, 0.15),
    0 0 24px rgba(255, 192, 122, 0.66);
  animation: selectionPulse 1.2s ease-in-out infinite;
}

.piece[data-shape="square"].selected::after,
.piece[data-shape="square"].break-choice::after {
  border-radius: 13%;
}

.piece.break-choice::after {
  border-color: var(--purple);
  box-shadow:
    0 0 0 4px rgba(203, 131, 255, 0.15),
    0 0 24px rgba(203, 131, 255, 0.58);
}

.piece.pattern-relay,
.piece.pattern-ace {
  z-index: 4;
}

.piece.pattern-relay::before,
.piece.pattern-ace::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: -10%;
  border: clamp(3px, 0.42vw, 5px) solid #e8aa61;
  border-radius: 50%;
  pointer-events: none;
  box-shadow:
    0 0 0 5px rgba(232, 170, 97, 0.15),
    0 0 28px rgba(255, 177, 86, 0.82);
  animation: patternRelayGlow 0.72s ease-in-out 3;
}

.piece.pattern-ace::before {
  inset: -14%;
  border-color: #fff1cb;
  box-shadow:
    0 0 0 6px rgba(255, 231, 190, 0.24),
    0 0 36px rgba(255, 214, 151, 1),
    0 0 58px rgba(255, 166, 72, 0.82);
  animation-name: patternAceGlow;
}

.piece[data-shape="square"].pattern-relay::before,
.piece[data-shape="square"].pattern-ace::before {
  border-radius: 13%;
}

.piece-image {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 6px 5px rgba(0, 0, 0, 0.38));
}

body[data-board-theme="premium"] .piece-image {
  transform: translate(
    var(--premium-piece-shift-x, 0%),
    var(--premium-piece-shift-y, 0%)
  );
}

.piece-image.is-loaded {
  opacity: 1;
}

.piece-image.image-missing {
  display: none;
}

.move-marker {
  width: 10.2%;
  height: 10.2%;
  padding: 0;
  border: clamp(3px, 0.5vw, 6px) solid var(--blue);
  border-radius: 50%;
  background: rgba(98, 185, 255, 0.13);
  box-shadow:
    inset 0 0 14px rgba(98, 185, 255, 0.28),
    0 0 0 4px rgba(98, 185, 255, 0.12),
    0 0 22px rgba(98, 185, 255, 0.62);
  cursor: pointer;
  animation: markerPulse 1s ease-in-out infinite;
}

.move-marker[data-shape="square"] {
  border-radius: 16%;
}

.move-marker.jump {
  border-color: var(--green);
  background: rgba(86, 224, 168, 0.12);
  box-shadow:
    inset 0 0 14px rgba(86, 224, 168, 0.28),
    0 0 0 4px rgba(86, 224, 168, 0.11),
    0 0 22px rgba(86, 224, 168, 0.6);
}

.move-marker.vault {
  border-color: var(--orange);
  background: rgba(255, 157, 77, 0.13);
  box-shadow:
    inset 0 0 14px rgba(255, 157, 77, 0.3),
    0 0 0 4px rgba(255, 157, 77, 0.12),
    0 0 24px rgba(255, 157, 77, 0.68);
}

.move-marker.switch,
.move-marker.break,
.move-marker.return,
.move-marker.vacancy {
  border-color: var(--purple);
  background: rgba(203, 131, 255, 0.13);
  box-shadow:
    inset 0 0 14px rgba(203, 131, 255, 0.28),
    0 0 0 4px rgba(203, 131, 255, 0.12),
    0 0 24px rgba(203, 131, 255, 0.65);
}

.move-marker.opening,
.move-marker.forced-out {
  border-color: var(--gold-light);
  background: rgba(255, 216, 170, 0.1);
  box-shadow:
    inset 0 0 14px rgba(255, 216, 170, 0.2),
    0 0 0 4px rgba(255, 216, 170, 0.1),
    0 0 24px rgba(255, 216, 170, 0.62);
}

.move-marker:hover {
  animation: none;
  transform: translate(-50%, -50%) scale(1.14);
}

.game-controls {
  display: grid;
  width: 100%;
  padding: 13px;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 19px;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.045), transparent),
    rgba(24, 26, 28, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 16px 36px rgba(0, 0, 0, 0.24);
}

.game-controls .button {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 9px 10px;
  font-size: 0.72rem;
}

.special-button.active {
  border-color: var(--orange);
  color: #201207;
  background: linear-gradient(145deg, #ffc080, #ff9142);
}

.sound-button {
  position: relative;
  padding-left: 34px;
}

.sound-button::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7a7f83;
  box-shadow: 0 0 0 4px rgba(122, 127, 131, 0.12);
  transform: translateY(-50%);
}

.sound-button.is-on::before {
  background: var(--green);
  box-shadow:
    0 0 0 4px rgba(97, 214, 169, 0.12),
    0 0 12px rgba(97, 214, 169, 0.56);
}

.event-banner {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 30;
  display: grid;
  width: min(520px, calc(100% - 28px));
  padding: 15px 20px;
  gap: 3px;
  border: 1px solid rgba(239, 196, 147, 0.62);
  border-radius: 15px;
  color: #f8f3ee;
  text-align: center;
  background:
    linear-gradient(145deg, rgba(200, 144, 91, 0.19), transparent),
    rgba(22, 24, 26, 0.96);
  box-shadow: var(--shadow);
  transform: translateX(-50%);
  animation: bannerIn 250ms ease-out;
  backdrop-filter: blur(14px);
}

.event-banner strong {
  color: var(--gold-light);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.event-banner span {
  color: #c3c5c7;
  font-size: 0.82rem;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(7, 8, 9, 0.78);
  backdrop-filter: blur(10px);
}

.modal-backdrop[hidden],
.event-banner[hidden] {
  display: none;
}

.modal-card {
  width: min(430px, 100%);
  padding: 35px;
  border: 1px solid rgba(239, 196, 147, 0.6);
  border-radius: 24px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(200, 144, 91, 0.22), transparent 70%),
    #1d2022;
  box-shadow: var(--shadow);
}

.eyebrow {
  color: var(--gold-light);
  font-size: 0.69rem;
  font-weight: 950;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.modal-card h2 {
  margin: 10px 0;
  color: #fff9f2;
  font-size: 3.4rem;
  letter-spacing: 0.12em;
}

.modal-card p {
  margin: 0 0 25px;
  color: #b6babd;
  line-height: 1.55;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes markerPulse {
  0%,
  100% {
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(0.92);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
  }
}

@keyframes tutorialArrowPulse {
  0%,
  100% {
    opacity: 0.62;
  }
  50% {
    opacity: 1;
  }
}

@keyframes tutorialMarkerPulse {
  0%,
  100% {
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(0.92);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.06);
  }
}

@keyframes tutorialGuideGlow {
  0%,
  100% {
    opacity: 0.58;
  }
  50% {
    opacity: 1;
  }
}

@keyframes tutorialPatternFlash {
  0%,
  100% {
    filter: brightness(0.92);
  }
  50% {
    filter: brightness(1.24) drop-shadow(0 0 16px rgba(255, 203, 125, 0.7));
  }
}

@keyframes tutorialPieceIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.48) rotate(-8deg);
    filter: brightness(1.7) drop-shadow(0 0 16px rgba(255, 232, 190, 0.5));
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0);
    filter: none;
  }
}

@keyframes selectionPulse {
  0%,
  100% {
    opacity: 0.72;
  }
  50% {
    opacity: 1;
  }
}

@keyframes patternRelayGlow {
  0%,
  100% {
    opacity: 0.34;
    transform: scale(0.94);
  }
  50% {
    opacity: 1;
    transform: scale(1.07);
  }
}

@keyframes patternAceGlow {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1.13);
  }
}

@keyframes statusPatternFlash {
  0%,
  100% {
    opacity: 0.38;
    text-shadow:
      0 0 5px rgba(120, 255, 228, 0.44),
      0 0 12px rgba(85, 226, 203, 0.25);
  }
  50% {
    opacity: 1;
    text-shadow:
      0 0 8px rgba(198, 255, 244, 0.95),
      0 0 22px rgba(96, 255, 226, 0.82),
      0 0 38px rgba(64, 205, 187, 0.48);
  }
}

@keyframes tvPatternPulse {
  0% {
    opacity: 0;
    transform: scale(0.58);
  }
  18%,
  72% {
    opacity: 1;
    transform: scale(1);
  }
  43% {
    opacity: 0.72;
    transform: scale(0.9);
  }
  100% {
    opacity: 0;
    transform: scale(0.72);
  }
}

@keyframes bannerIn {
  from {
    opacity: 0;
    transform: translate(-50%, 14px);
  }
}

@keyframes winnerCrownGlow {
  0%,
  100% {
    opacity: 0.82;
    transform: translateX(-50%) scale(0.96);
    filter:
      drop-shadow(0 7px 12px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 6px rgba(218, 166, 88, 0.2));
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.035);
    filter:
      drop-shadow(0 7px 12px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 14px rgba(239, 196, 119, 0.48));
  }
}

@media (max-width: 1180px) {
  .status-row {
    grid-template-columns: 138px minmax(500px, 700px) 138px;
    gap: 20px;
  }

  .status-new-game {
    top: 127px;
  }

  .game-area {
    grid-template-columns: 138px minmax(500px, 700px) 138px;
    gap: 20px;
  }

  body[data-app-mode="tutorial"] .game-area {
    grid-template-columns: 175px minmax(500px, 700px) 145px;
    gap: 20px;
  }

  .left-rail,
  .right-rail,
  .tutorial-info-panel,
  .tutorial-menu-panel {
    margin-top: 135px;
  }

  .player-card {
    min-height: 155px;
    padding: 16px 10px;
  }

  .chess-clock {
    min-height: 52px;
    padding: 8px 10px;
  }

  .clock-display {
    font-size: 1.3rem;
  }

  .player-heading {
    gap: 7px;
  }

  .player-dot {
    width: 24px;
    height: 24px;
  }

  .player-name {
    font-size: 0.8rem;
  }

  .score {
    min-width: 70px;
    min-height: 64px;
    font-size: 2.85rem;
  }

  .ai-level-card {
    padding: 13px;
  }
}

@media (max-width: 880px) {
  .game-shell {
    padding-inline: 12px;
  }

  .game-header {
    min-height: 112px;
  }

  .brand {
    width: 220px;
    height: 112px;
  }

  .brand-logo {
    width: 190px;
  }

  .header-theme-control,
  .header-actions {
    width: min(150px, 100%);
  }

  .header-select-shell select {
    font-size: 0.68rem;
  }

  .status-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "mode language"
      "status status"
      ". new-game";
    width: min(720px, 100%);
    gap: 8px 14px;
  }

  .status-mode-control {
    grid-area: mode;
  }

  .status-right-control {
    display: contents;
  }

  .status-language-control {
    grid-area: language;
  }

  .status-card {
    grid-area: status;
  }

  .status-new-game {
    position: static;
    grid-area: new-game;
    width: 100%;
  }

  .game-area {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "red right"
      "board board";
    align-items: stretch;
    width: min(720px, 100%);
    margin: 0 auto;
    gap: 14px;
  }

  .left-rail {
    grid-area: red;
  }

  .tutorial-info-panel {
    grid-area: red;
    min-height: 210px;
    margin-top: 0;
  }

  .board-column {
    grid-area: board;
  }

  .left-rail,
  .right-rail {
    margin-top: 0;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .winner-crown {
    top: -82px;
    width: 88px;
    height: 74px;
  }

  .right-rail {
    grid-area: right;
  }

  .tutorial-menu-panel {
    grid-area: right;
    min-height: 210px;
    margin-top: 0;
  }

  .tutorial-screen {
    min-height: 150px;
  }

  .marker-legend {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px;
  }

  .player-card {
    min-height: 116px;
    grid-template-columns: auto auto;
    align-content: center;
    column-gap: 14px;
  }

  .player-heading,
  .player-detail {
    grid-column: 1;
  }

  .score {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .ai-level-card {
    display: grid;
    align-content: center;
  }

  .board-stage {
    width: min(100%, 720px);
    margin-top: 24px;
  }
}

@media (max-width: 600px) {
  .game-shell {
    padding: 18px 9px 36px;
  }

  .game-header {
    grid-template-columns: 112px minmax(0, 1fr) 84px;
    min-height: 100px;
  }

  .header-balance {
    min-width: 0;
  }

  .header-theme-control,
  .header-actions {
    width: 100%;
  }

  .header-theme-control {
    gap: 3px;
  }

  .header-theme-control label {
    font-size: 0.46rem;
    letter-spacing: 0.05em;
  }

  .header-actions {
    gap: 3px;
  }

  .background-control,
  .header-actions {
    margin-top: 10px;
  }

  .header-select-shell select {
    min-height: 30px;
    padding: 5px 18px 5px 5px;
    font-size: 0.53rem;
  }

  .header-select-shell .select-arrow {
    right: 6px;
    width: 6px;
    height: 6px;
  }

  .brand {
    width: 160px;
    height: 100px;
  }

  .brand-logo {
    width: 160px;
  }

  .button-primary {
    min-width: 0;
    min-height: 39px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 0.72rem;
  }

  .status-row {
    margin-top: 10px;
    gap: 6px;
  }

  .status-language-shell select,
  .status-mode-shell select {
    min-height: 48px;
    padding: 7px 18px 7px 5px;
    border-radius: 13px;
    font-size: 0.7rem;
    text-align: left;
  }

  .status-language-shell .select-arrow,
  .status-mode-shell .select-arrow {
    right: 8px;
    width: 7px;
    height: 7px;
  }

  .status-card {
    grid-template-columns: auto 1fr;
    min-height: 48px;
    padding: 8px 9px;
    gap: 8px;
  }

  .status-new-game {
    min-width: 0;
    min-height: 48px;
    padding-inline: 9px;
    border-radius: 13px;
  }

  .status-card p {
    font-size: 0.7rem;
    text-align: left;
  }

  .status-goal {
    display: none;
  }

  .turn-badge {
    min-width: 58px;
    min-height: 27px;
    font-size: 0.58rem;
  }

  .game-area {
    gap: 8px;
  }

  .left-rail,
  .right-rail,
  .tutorial-info-panel,
  .tutorial-menu-panel {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .tutorial-info-panel,
  .tutorial-menu-panel {
    min-height: 170px;
    padding: 10px;
    border-radius: 15px;
  }

  .tutorial-screen {
    min-height: 112px;
    padding: 11px 9px;
    gap: 7px;
  }

  .tutorial-screen p {
    font-size: 0.62rem;
    line-height: 1.42;
  }

  .tutorial-screen strong {
    font-size: 0.72rem;
  }

  .tutorial-transport {
    padding: 6px;
    gap: 6px;
  }

  .tutorial-transport-button {
    min-height: 34px;
    padding: 6px 7px;
    font-size: 0.62rem;
  }

  .tutorial-menu-note {
    display: none;
  }

  .winner-crown {
    top: -67px;
    width: 72px;
    height: 60px;
  }

  .marker-legend {
    padding: 9px;
    gap: 8px;
  }

  .marker-legend span {
    gap: 7px;
    font-size: 0.62rem;
  }

  .legend-ring {
    width: 13px;
    height: 13px;
    border-width: 2px;
  }

  .player-card {
    min-height: 96px;
    padding: 10px 8px;
    column-gap: 8px;
    border-radius: 15px;
  }

  .player-dot {
    width: 19px;
    height: 19px;
    border-width: 2px;
  }

  .player-name {
    font-size: 0.64rem;
    letter-spacing: 0.08em;
  }

  .score {
    min-width: 52px;
    min-height: 50px;
    border-radius: 12px;
    font-size: 2rem;
  }

  .player-detail {
    font-size: 0.52rem;
  }

  .ai-level-card {
    min-height: 96px;
    padding: 10px;
    border-radius: 15px;
  }

  .ai-level-card label {
    margin-bottom: 5px;
    font-size: 0.57rem;
  }

  .select-shell select {
    min-height: 38px;
    padding: 7px 28px 7px 9px;
    border-radius: 9px;
    font-size: 0.7rem;
  }

  .select-arrow {
    right: 10px;
    width: 7px;
    height: 7px;
  }

  #aiLevelHint {
    margin-top: 5px;
    font-size: 0.54rem;
  }

  .piece {
    width: 14%;
    height: 14%;
  }

  body[data-board-theme="premium"] .piece {
    width: 15.1%;
    height: 15.1%;
  }

  .move-marker {
    width: 11.5%;
    height: 11.5%;
    border-width: 3px;
  }

  .game-controls {
    padding: 9px;
    gap: 7px;
    border-radius: 15px;
  }

  .board-stage {
    margin-top: 20px;
  }

  .game-controls .button {
    min-height: 39px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 0.66rem;
  }

  .sound-button {
    padding-left: 26px !important;
  }

  .sound-button::before {
    left: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}