* {
  box-sizing: border-box;
}

:root {
  /* Board scales with the viewport but never larger than 512px */
  --board-size: min(92vw, 512px);
  --square-size: calc(var(--board-size) / 8);
}

body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(160deg, #1e2430, #2b3242);
  color: #e8e8e8;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  display: flex;
  justify-content: center;
  padding: 24px 12px 48px;
  -webkit-tap-highlight-color: transparent;
}

.app {
  width: 100%;
  max-width: 920px;
}

h1 {
  text-align: center;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 20px;
}

.game {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}

.board-wrap {
  position: relative;
}

.board {
  display: grid;
  grid-template-columns: repeat(8, var(--square-size));
  grid-template-rows: repeat(8, var(--square-size));
  border: 4px solid #15151a;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  user-select: none;
  touch-action: manipulation; /* removes the 300ms tap delay & double-tap zoom on mobile */
}

.square {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--square-size) * 0.72);
  position: relative;
  cursor: pointer;
}

/* Classic black & white board */
.square.light { background: #f1f1f3; }
.square.dark  { background: #2e2e35; }

.square.selected { outline: 3px solid #4fc3f7; outline-offset: -3px; }

.square.last-move { box-shadow: inset 0 0 0 3px rgba(255, 196, 0, 0.75); }

/* Mid-gray with a white rim so it reads on both the white and black squares */
.square .dot {
  position: absolute;
  width: 24%;
  height: 24%;
  border-radius: 50%;
  background: rgba(120, 128, 140, 0.75);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.square .capture-ring {
  position: absolute;
  inset: 4px;
  border-radius: 8px;
  border: 4px solid rgba(225, 55, 55, 0.8);
}

.square.in-check {
  background: #c0392b !important;
}

/*
 * Both colors render the same solid-silhouette glyph (see PIECE_GLYPH in script.js);
 * a thick outline in the opposite tone is what actually creates the "white piece" /
 * "black piece" look and keeps them readable on both light and dark squares.
 */
.piece-white {
  color: #ffffff;
  -webkit-text-stroke: 2px #000000;
  paint-order: stroke fill;
  text-shadow:
    -2px -2px 0 #000000,
     2px -2px 0 #000000,
    -2px  2px 0 #000000,
     2px  2px 0 #000000,
     0 2px 4px rgba(0, 0, 0, 0.6);
}
.piece-black {
  color: #0c0c0e;
  -webkit-text-stroke: 2px #ffffff;
  paint-order: stroke fill;
  text-shadow:
    -2px -2px 0 rgba(255, 255, 255, 0.95),
     2px -2px 0 rgba(255, 255, 255, 0.95),
    -2px  2px 0 rgba(255, 255, 255, 0.95),
     2px  2px 0 rgba(255, 255, 255, 0.95),
     0 2px 4px rgba(0, 0, 0, 0.5);
}

/* ---------- SVG pawn (nicer shape than the font glyph) ---------- */

.pawn-svg {
  display: block;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}

.square .pawn-svg,
.ghost-piece .pawn-svg {
  width: calc(var(--square-size) * 0.8);
  height: calc(var(--square-size) * 0.8);
}

.captured-row .pawn-svg {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: text-bottom;
}

/* stroke-width is in the SVG's 45x45 viewBox units */
.piece-white .pawn-svg path {
  fill: #ffffff;
  stroke: #000000;
  stroke-width: 2.6;
  stroke-linejoin: round;
}

.piece-black .pawn-svg path {
  fill: #0c0c0e;
  stroke: #ffffff;
  stroke-width: 2.6;
  stroke-linejoin: round;
}

.ghost-piece {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--square-size) * 0.72);
  transition: transform ease-in-out;
  transition-duration: 220ms;
  pointer-events: none;
  z-index: 20;
  will-change: transform;
}

.panel {
  width: 280px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 16px;
}

/* ---------- Mobile settings dialog ---------- */

/* Hidden on desktop; the .setup block lives inside the panel there */
.settings-btn {
  display: none;
  margin: 0 auto 14px;
  padding: 10px 18px;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #e8e8e8;
  font-size: 15px;
  cursor: pointer;
  touch-action: manipulation;
}

.settings-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(8, 10, 16, 0.6);
}
.settings-modal.hidden { display: none; }

/* Bottom-sheet style box that slides up */
.settings-box {
  width: 100%;
  max-width: 480px;
  background: #262c3a;
  border-radius: 16px 16px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: none;
  padding: 16px 20px 24px;
  animation: sheet-up 0.25s ease-out;
}

@keyframes sheet-up {
  from { transform: translateY(40%); opacity: 0.4; }
  to   { transform: translateY(0); opacity: 1; }
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 14px;
}

.settings-close {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #e8e8e8;
  font-size: 16px;
  cursor: pointer;
  touch-action: manipulation;
}

/* Inside the dialog the setup block doesn't need its panel divider */
.settings-body .setup {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* Stacked layout on phones: board on top, panel full-width below it */
@media (max-width: 720px) {
  .settings-btn {
    display: block;
  }

  body {
    padding: 12px 8px 32px;
  }

  h1 {
    font-size: 22px;
    margin-bottom: 12px;
  }

  .game {
    gap: 14px;
  }

  .panel {
    width: var(--board-size);
  }

  .history {
    max-height: 140px;
  }
}

.setup {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.setup label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: #cfcfcf;
}

.setup select {
  padding: 10px 8px;
  border-radius: 6px;
  border: 1px solid #555;
  background: #232936;
  color: #eee;
  /* 16px minimum stops iOS Safari from auto-zooming when the select gets focus */
  font-size: 16px;
}

.vs-computer-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vs-computer-options.hidden {
  display: none;
}

.status {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

.check-msg {
  color: #ff6b6b;
  font-weight: 600;
  min-height: 20px;
  margin-bottom: 10px;
}

.captured h3 {
  margin: 8px 0 4px;
  font-size: 13px;
  color: #b8b8b8;
  font-weight: 500;
}

.captured-row {
  min-height: 24px;
  font-size: 20px;
  line-height: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.history {
  max-height: 220px;
  overflow-y: auto;
  margin: 8px 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.6;
}

.reset-btn {
  margin-top: 12px;
  width: 100%;
  min-height: 44px; /* comfortable touch target */
  padding: 10px;
  border: none;
  border-radius: 6px;
  background: #3f6fd1;
  color: white;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s;
  touch-action: manipulation;
}
.reset-btn:hover { background: #345bb0; }

.promo-modal {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.promo-modal.hidden { display: none; }

.promo-box {
  background: #2b3242;
  padding: 16px 20px;
  border-radius: 8px;
  text-align: center;
}

.promo-choices {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* Neutral mid-gray so both white-stroked and black-stroked pieces stay readable */
.promo-choices button {
  font-size: 32px;
  width: 56px;
  height: 56px;
  border-radius: 6px;
  border: 1px solid #666;
  background: #8d929c;
  cursor: pointer;
  touch-action: manipulation;
}
.promo-choices button:hover { background: #aab0ba; }

/* ---------- Game over ---------- */

/* The checkmated king tips over before the overlay appears */
.square span.king-fallen {
  display: inline-block;
  animation: king-fall 0.9s ease-in forwards;
  transform-origin: 60% 90%;
}

@keyframes king-fall {
  0%   { transform: rotate(0deg) translateY(0); }
  55%  { transform: rotate(78deg) translateY(4%); }
  70%  { transform: rotate(70deg) translateY(4%); }
  85%  { transform: rotate(80deg) translateY(5%); }
  100% { transform: rotate(78deg) translateY(5%); opacity: 0.85; }
}

.game-over-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 12, 18, 0);
  border-radius: 4px;
  overflow: hidden;
  z-index: 30;
  transition: background 0.5s ease;
}
.game-over-overlay.show { background: rgba(10, 12, 18, 0.65); }
.game-over-overlay.hidden { display: none; }

.game-over-box {
  background: #2b3242;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 24px 32px;
  max-width: 88%;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  transform: scale(0.5);
  opacity: 0;
  animation: pop-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s forwards;
}

@keyframes pop-in {
  to { transform: scale(1); opacity: 1; }
}

.game-over-icon {
  font-size: 48px;
  animation: icon-bounce 1.2s ease-in-out 0.5s infinite;
}

@keyframes icon-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.game-over-text {
  font-size: 20px;
  font-weight: 600;
  margin: 10px 0 16px;
  color: #f4f4f4;
}

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

.confetti-piece {
  position: absolute;
  top: -12px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  opacity: 0.9;
  animation: confetti-fall linear forwards;
}

@keyframes confetti-fall {
  0% {
    transform: translateY(-20px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(580px) rotate(720deg);
    opacity: 0.7;
  }
}

/* ---------- Server: topbar, saldo & bonus ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 8px;
}

.topbar-user {
  margin-right: auto;
  font-size: 0.95rem;
  color: #cfd6e4;
}

.balance-chip {
  background: linear-gradient(160deg, #3a2f14, #4d3d15);
  border: 1px solid #8a6d1f;
  color: #ffd764;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 1rem;
}

.balance-chip.balance-bump {
  animation: balance-bump 0.45s ease;
}

@keyframes balance-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.18); box-shadow: 0 0 18px rgba(255, 215, 100, 0.55); }
  100% { transform: scale(1); }
}

.logout-btn {
  background: transparent;
  border: 1px solid #566179;
  color: #aab4c8;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
}

.logout-btn:hover {
  border-color: #8a97b1;
  color: #e8e8e8;
}

/* Floating "+coins" popups above the board */
.coin-popup-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}

.coin-popup {
  position: absolute;
  bottom: 30%;
  background: rgba(20, 24, 32, 0.92);
  border: 1px solid #8a6d1f;
  color: #ffd764;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  animation: coin-float 2.4s ease-out forwards;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

@keyframes coin-float {
  0% { opacity: 0; transform: translateY(20px) scale(0.8); }
  12% { opacity: 1; transform: translateY(0) scale(1.05); }
  20% { transform: translateY(-6px) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-90px) scale(0.95); }
}

/* Bonus history list in the side panel */
.bonus-history {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  max-height: 150px;
  overflow-y: auto;
  font-size: 0.88rem;
}

.bonus-history li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: #cfd6e4;
}

.bonus-history .bonus-amount {
  color: #ffd764;
  font-weight: 600;
}

.bonus-history .bonus-empty {
  color: #7d879c;
  border-bottom: none;
}

/* ---------- Auth pages (login / register) ---------- */

.auth-app {
  max-width: 420px;
}

.auth-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 24px 22px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.auth-box h2 {
  margin: 0 0 14px;
  font-weight: 600;
}

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

.auth-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
  color: #cfd6e4;
}

.auth-form input {
  background: #1b202b;
  border: 1px solid #454f63;
  border-radius: 8px;
  padding: 10px 12px;
  color: #e8e8e8;
  font-size: 1rem;
}

.auth-form input:focus {
  outline: none;
  border-color: #4fc3f7;
}

.auth-error {
  background: rgba(244, 67, 54, 0.12);
  border: 1px solid rgba(244, 67, 54, 0.5);
  color: #ff9f97;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 0.9rem;
}

.auth-bonus-note {
  color: #ffd764;
  font-size: 0.9rem;
  margin: 0 0 14px;
}

.auth-alt {
  margin: 16px 0 0;
  font-size: 0.9rem;
  color: #aab4c8;
  text-align: center;
}

.auth-alt a {
  color: #4fc3f7;
}

/* Role badge in the topbar */
.role-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border: 1px solid #566179;
  color: #aab4c8;
  vertical-align: middle;
}

.role-badge.role-owner       { border-color: #d4a017; color: #ffd764; }
.role-badge.role-super_admin { border-color: #b56576; color: #ff9fb0; }
.role-badge.role-head_admin  { border-color: #5e8bc4; color: #9cc3f5; }

/* ---------- Login page: chessboard background ---------- */
/* Softened checkerboard: muted square tones + a dark vignette overlay so the
   pattern stays visible without glaring. The overlay layer doesn't tile
   (no-repeat, full size); only the checker layer repeats. */
.auth-checker {
  background:
    radial-gradient(circle at 50% 30%,
      rgba(30, 36, 48, 0.55) 0%,
      rgba(30, 36, 48, 0.78) 55%,
      rgba(21, 24, 32, 0.92) 100%),
    conic-gradient(#2e3340 90deg, #aab0bd 90deg 180deg, #2e3340 180deg 270deg, #aab0bd 270deg);
  background-size: 100% 100%, 96px 96px;
  background-attachment: fixed;
  /* Center the title + login box as one group, both axes */
  align-items: center;
  padding: 24px 12px;
}

.auth-checker .auth-box h1 {
  margin: 0 0 4px;
  font-size: 1.6rem;
  text-align: center;
}

.auth-checker .auth-box h2 {
  text-align: center;
  color: #aab4c8;
  font-size: 1rem;
  font-weight: 500;
}

/* Solid box (readable over white squares) with the same double gold frame
   as the .btn-grandmaster button */
.auth-checker .auth-box {
  background: #1e2430;
  border: 1px solid #b48d2c;
  box-shadow:
    inset 0 0 0 3px rgba(21, 24, 32, 0.9),
    inset 0 0 0 4px rgba(212, 175, 55, 0.4),
    0 14px 40px rgba(0, 0, 0, 0.6);
}

.auth-checker h1 {
  color: #f2f4f8;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

/* ---------- "Grandmaster" gold button (login) ---------- */
.btn-grandmaster {
  width: 100%;
  padding: 13px 18px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: #f0d489;
  background: linear-gradient(170deg, #262c3e, #1c2130);
  border: 1px solid #b48d2c;
  border-radius: 10px;
  cursor: pointer;
  /* thin inner gold line for the double-frame "elite" look */
  box-shadow:
    inset 0 0 0 2px rgba(21, 24, 32, 0.9),
    inset 0 0 0 3px rgba(212, 175, 55, 0.45),
    0 4px 16px rgba(0, 0, 0, 0.45);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, transform 0.12s ease;
}

.btn-grandmaster:hover {
  color: #ffe49c;
  border-color: #e3b83e;
  box-shadow:
    inset 0 0 0 2px rgba(21, 24, 32, 0.9),
    inset 0 0 0 3px rgba(227, 184, 62, 0.7),
    0 4px 20px rgba(212, 175, 55, 0.28);
  transform: translateY(-1px);
}

.btn-grandmaster:active {
  transform: translateY(0);
  box-shadow:
    inset 0 0 0 2px rgba(21, 24, 32, 0.9),
    inset 0 0 0 3px rgba(212, 175, 55, 0.5),
    0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Gold accents for the remaining blue elements on the login page */
.auth-checker .auth-alt a {
  color: #f0d489;
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 175, 55, 0.45);
}

.auth-checker .auth-alt a:hover {
  color: #ffe49c;
  border-bottom-color: #e3b83e;
}

.auth-checker .auth-form input:focus {
  border-color: #d4af37;
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.18);
}

/* ---------- Lobby menu (landing) ---------- */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}

.menu-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 22px;
}

.menu-card h2 { margin: 0 0 8px; font-size: 1.15rem; }

.muted-text { color: #aab4c8; font-size: 0.9rem; margin: 0 0 16px; }

.menu-btn {
  display: block;
  text-align: center;
  text-decoration: none;
}

.lobby-create {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

/* Desain B (bingkai emas ganda) + efek neon D, disesuaikan ke emas tema */
.lobby-create input {
  flex: 1;
  background: rgba(212, 175, 55, 0.04);
  border: 1px solid #b48d2c;
  border-radius: 10px;
  padding: 11px 14px;
  color: #e8e8e8;
  font-size: 0.95rem;
  min-width: 0;
  backdrop-filter: blur(4px);
  box-shadow:
    inset 0 0 0 2px rgba(21, 24, 32, 0.9),
    inset 0 0 0 3px rgba(212, 175, 55, 0.3);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.lobby-create input::placeholder { color: #8d8467; }

.lobby-create input:focus {
  outline: none;
  border-color: #e3b83e;
  box-shadow:
    inset 0 0 0 2px rgba(21, 24, 32, 0.9),
    inset 0 0 0 3px rgba(227, 184, 62, 0.6),
    0 0 0 2px rgba(212, 175, 55, 0.18),
    0 0 18px rgba(212, 175, 55, 0.35);
}

.lobby-create-btn {
  white-space: nowrap;
  background: linear-gradient(170deg, #262c3e, #1c2130);
  border: 1px solid #b48d2c;
  color: #f0d489;
  border-radius: 10px;
  padding: 11px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  text-shadow: 0 0 8px rgba(212, 175, 55, 0.55);
  box-shadow:
    inset 0 0 0 2px rgba(21, 24, 32, 0.9),
    inset 0 0 0 3px rgba(212, 175, 55, 0.3);
  transition: box-shadow 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.lobby-create-btn:hover {
  border-color: #e3b83e;
  color: #ffe49c;
  box-shadow:
    inset 0 0 0 2px rgba(21, 24, 32, 0.9),
    inset 0 0 0 3px rgba(227, 184, 62, 0.6),
    0 0 16px rgba(212, 175, 55, 0.4);
}

.lobby-list-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #7d879c;
  margin: 0 0 8px;
}

.lobby-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }

.lobby-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 10px 14px;
}

.lobby-host { color: #7d879c; font-size: 0.8rem; }
.lobby-empty { color: #7d879c; font-size: 0.9rem; padding: 8px 2px; }

.my-lobby-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: #f0d489;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 0.9rem;
}

/* ---------- Waiting room ---------- */
.wait-box { text-align: center; }

.wait-spinner {
  width: 46px;
  height: 46px;
  margin: 18px auto 14px;
  border-radius: 50%;
  border: 4px solid rgba(212, 175, 55, 0.2);
  border-top-color: #d4af37;
  animation: wait-spin 1s linear infinite;
}

@keyframes wait-spin { to { transform: rotate(360deg); } }

.wait-text { font-weight: 600; margin: 0 0 6px; }
.wait-box form { margin-top: 18px; }

/* ---------- Online play ---------- */
.vs-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: -8px 0 16px;
  font-size: 1rem;
}

.vs-side small { color: #aab4c8; font-weight: 400; }
.vs-versus { font-size: 1.1rem; }

.online-you {
  font-size: 0.9rem;
  color: #cfd6e4;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 10px;
  margin-bottom: 12px;
}

/* Black player sees the board from their side */
.board.flipped { transform: rotate(180deg); }
.board.flipped .square > span {
  display: inline-block;
  transform: rotate(180deg);
}

/* ---------- Glossy red "Keluar" button (chrome ring + amber rim + glass shine) ---------- */
.btn-exit {
  position: relative;
  overflow: hidden;
  padding: 7px 20px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(180deg, #ff7a5c 0%, #ef3222 40%, #c01410 70%, #8f0b08 100%);
  border: 1px solid #58100a;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
  box-shadow:
    inset 0 0 0 2px rgba(255, 176, 70, 0.55),  /* amber inner rim */
    inset 0 -6px 10px rgba(90, 6, 4, 0.55),    /* bottom depth */
    0 0 0 2px #1b1f26,                         /* dark gap */
    0 0 0 4px #99a2ac,                         /* chrome ring */
    0 0 0 5px #262b33,                         /* outer edge */
    0 5px 12px rgba(0, 0, 0, 0.55);
  transition: filter 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

/* glass highlight on the top half */
.btn-exit::before {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 5%;
  height: 45%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.05));
  pointer-events: none;
}

.btn-exit:hover { filter: brightness(1.12); }

.btn-exit:active {
  transform: translateY(1px);
  filter: brightness(0.95);
  box-shadow:
    inset 0 0 0 2px rgba(255, 176, 70, 0.45),
    inset 0 4px 10px rgba(60, 3, 2, 0.6),
    0 0 0 2px #1b1f26,
    0 0 0 4px #99a2ac,
    0 0 0 5px #262b33,
    0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Viewer counter badge on the online play page */
.viewer-badge {
  float: right;
  font-size: 0.78rem;
  color: #9adcff;
  border: 1px solid rgba(79, 195, 247, 0.45);
  border-radius: 999px;
  padding: 2px 10px;
}

/* Turn banner under the online board */
.board-col { display: flex; flex-direction: column; }

.turn-banner {
  margin-top: 12px;
  width: var(--board-size);
  text-align: center;
  padding: 11px 14px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
}

.turn-banner.mine {
  background: rgba(212, 175, 55, 0.12);
  border-color: #b48d2c;
  color: #ffd764;
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.25), inset 0 0 0 1px rgba(212, 175, 55, 0.2);
}

.turn-banner.waiting {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  color: #aab4c8;
  animation: waiting-pulse 1.8s ease-in-out infinite;
}

@keyframes waiting-pulse { 50% { opacity: 0.6; } }

.turn-banner.over {
  background: rgba(67, 170, 139, 0.1);
  border-color: rgba(67, 170, 139, 0.5);
  color: #8fe0c0;
}

/* ---------- Header container (authenticated layout) ---------- */
.header-bar {
  background: rgba(20, 24, 32, 0.78);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 12px;
  padding: 10px 16px;
  box-shadow:
    inset 0 0 0 1px rgba(212, 175, 55, 0.08),
    0 6px 18px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  margin-bottom: 22px;
  flex-wrap: wrap;
}

/* Menu/Panel Admin header buttons — design M3 "Plakat Mini" (double gold frame) */
.menu-plaque-btn {
  display: inline-block;
  background: linear-gradient(170deg, #262c3e, #1c2130);
  border: 1px solid #b48d2c;
  color: #f0d489;
  padding: 7px 16px;
  border-radius: 9px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-decoration: none;
  box-shadow:
    inset 0 0 0 2px rgba(21, 24, 32, 0.9),
    inset 0 0 0 3px rgba(212, 175, 55, 0.4);
  transition: box-shadow 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.menu-plaque-btn:hover {
  border-color: #e3b83e;
  color: #ffe49c;
  box-shadow:
    inset 0 0 0 2px rgba(21, 24, 32, 0.9),
    inset 0 0 0 3px rgba(227, 184, 62, 0.65),
    0 0 14px rgba(212, 175, 55, 0.3);
}

/* Player avatar in the header — design P3: chess piece inside a double gold ring */
.player-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: #f0d489;
  background: #1c2130;
  border: 1px solid #b48d2c;
  box-shadow:
    inset 0 0 0 2px rgba(21, 24, 32, 0.9),
    inset 0 0 0 3px rgba(212, 175, 55, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.45);
  margin-right: 4px;
  vertical-align: middle;
  flex-shrink: 0;
}

.topbar-user { display: inline-flex; align-items: center; gap: 6px; }

/* Player strips + chess clocks around the online board */
.player-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: var(--board-size);
  padding: 6px 2px;
}

.player-strip .strip-name { font-size: 0.92rem; color: #dde3ee; }
.player-strip .strip-name small { color: #7d879c; }

.clock-chip {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.05rem;
  background: #1b202b;
  border: 1px solid #454f63;
  border-radius: 8px;
  padding: 4px 14px;
  color: #aab4c8;
  transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.clock-chip.clock-active {
  border-color: #d4af37;
  color: #ffd764;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.3);
}

.clock-chip.clock-low {
  border-color: #b54040;
  color: #ff9f97;
  animation: clock-low-blink 1s ease-in-out infinite;
}

@keyframes clock-low-blink { 50% { opacity: 0.6; } }

/* Lobby code badge (match identifier) */
.lobby-code-badge {
  display: inline-block;
  font-family: "Consolas", "Courier New", monospace;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #ffd764;
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.5);
  border-radius: 8px;
  padding: 4px 12px;
  margin-bottom: 8px;
}

.lobby-code-inline {
  font-family: "Consolas", "Courier New", monospace;
  font-size: 0.72rem;
  letter-spacing: 1px;
  color: #b9a05a;
  margin-left: 8px;
  font-weight: 600;
}