/* Othello Garden: a presentation-only skin shared by online and solo play.
   Keep sizing, touch targets and console placement in play-comfort/menu.css. */
body.play-page {
  --white: #fff9e9;
  --yellow: #ffe3a1;
  --cyan: #a9ecce;
  --lime: #b5edb3;
  --pink: #f2b381;
  --line: #ccebd52e;
  color: var(--white);
  background: #103f35;
  isolation: isolate;
}

.play-page::before {
  background:
    linear-gradient(180deg, #062a255e, #062a2514 38%, #062a2524),
    url('./assets/othello-garden-v2.webp') center / cover no-repeat;
}

.play-page .arcade-sheen { display: none; }
.play-page .app-shell { position: relative; z-index: 1; }
.play-page .topbar { border-color: var(--line); }
.play-page .club-brand { color: #fff8e3; }
.play-page .club-brand small { color: #d4e6cd; }
.play-page .room-readout strong { color: #ffe3a1; }
.play-page .match-strip { border-color: #d8eedb30; }
.play-page .match-strip span { color: #cfdfd0; }
.play-page .match-strip strong { color: #fff9e9; }

.play-page .surface {
  border-color: #bfdfc537;
  border-radius: 18px;
  background: linear-gradient(145deg, #1c5147f2, #0d352ff5);
  box-shadow: inset 0 1px #f8ffe516, 0 8px 24px #021c242e;
}
.play-page .player-card--black { border-left: 3px solid #7c9489; }
.play-page .player-card--white { border-left: 3px solid #fff1cc; }
.play-page .player-card-heading strong { color: #fff9e9; }
.play-page .big-score { color: #fff2c8; text-shadow: 0 2px #001f2450; }
.play-page .player-card p { color: #c9ddcc; }
.play-page .clock { color: #bde9cf; }
.play-page .versus-stamp { color: #f8dfaa; text-shadow: 0 2px 8px #082e28; }
.play-page .objective-card p { color: #d9e8d7; }
.play-page .objective-card em { color: #ffdf9a; }
.play-page .rule-line { color: #b7d5c5; border-color: var(--line); }
.play-page .rule-line b { color: #a9ecce; }
.play-page .turn-banner strong { color: #fff9e9; text-shadow: 0 2px 12px #052b29; }
.play-page .turn-beacon { box-shadow: inset 0 0 0 4px #143f35, 0 2px 12px #082a3040; background: #143f35; }

/* Rounded toy-board edges, a readable felt grid, and original animated discs. */
.play-page .board-stage-multi {
  border-radius: 22px;
  background: linear-gradient(145deg, #d0e3a3, #7ea66c 24%, #46755c 60%, #b3cf87);
  box-shadow: inset 0 1px 2px #fff5cfcc, 0 5px 0 #284e41, 0 8px 0 #092e29, 0 20px 38px #031e2873;
}
.play-page .multi-board {
  border-radius: 12px;
  border-color: #c2ebc05c;
  background: #1c5d4a;
  box-shadow: inset 0 2px 12px #082c3299, 0 1px #e4f6c24d;
}
.play-page .multi-board::before {
  background: radial-gradient(ellipse at 30% 0%, #f7edb416, transparent 80%);
}
.play-page .multi-cell,
.play-page .multi-cell:nth-child(3n) {
  border-color: #b0d8b129;
  background: linear-gradient(145deg, #33846445, #0d48393b);
}
.play-page .multi-cell.is-legal:hover { background: #80c9954a; }
.play-page .multi-cell.is-legal::before {
  border-color: #ffe9ae;
  background: #f5d68752;
  box-shadow: 0 0 0 4px #fbe8b50a;
  animation: none;
}
.play-page .multi-cell.is-last::after {
  border-color: #ffe4a3;
  border-radius: 5px;
  box-shadow: inset 0 0 8px #fff0bd26;
}
.play-page .board-edge { display: none; }
.play-page .board-footer { color: #deebd5; }
.play-page .board-footer > span { padding: 3px 6px; border-radius: 6px; background: #0b392cba; }
.play-page .board-footer b { color: #c7f2b9; }
.play-page .intel-row { color: #c7ddcd; }
.play-page .intel-row strong { color: #fff1c6; }
.play-page .score-meter { border-radius: 5px; border-color: #cfdfcc45; background: #14392f; }
.play-page .score-meter i:first-child { background: linear-gradient(90deg, #111f1c, #44544a); }
.play-page .score-meter i:last-child { background: linear-gradient(90deg, #dce4cb, #fff9e3); }
.play-page .score-meter-labels { color: #bfd4c4; }
.play-page .event-feed li { color: #d6e5d6; line-height: 1.6; }
.play-page .event-feed li::before { box-shadow: none; }
.play-page #actionHint { color: #c8decf; }
.play-page .setup-readout { color: #b7d3c1; border-color: var(--line); }
.play-page .setup-readout b { color: #eef6df; }
.play-page .footer-bar { color: #d0e1ce; border-color: var(--line); text-shadow: 0 1px 8px #0a302b; }

/* Keep the page menu visually separate from the game controls. */
.play-page .game-console-actions .leave-button {
  color: #e8f2e8;
  border-color: #bfd5cd57;
  background: linear-gradient(145deg, #405d60, #254043);
  box-shadow: inset 0 1px #ffffff1a, 0 3px 0 #153236;
}
.play-page .game-console-actions .leave-button:hover { background: #436b69; }
.play-page .game-console-menu #siteNav,
.play-page .game-console-menu .comfort-menu-toggle {
  color: #ffebbd;
  border-color: #dec99566;
  background: linear-gradient(145deg, #2c4539, #1a332e);
  box-shadow: 0 0 0 3px #17372f, 0 4px 12px #05232540;
}
.play-page .game-console-menu #siteNav a {
  color: #e3ead6;
  border-color: #d5e2be26;
  background: linear-gradient(145deg, #71876838, #455d4f33);
}
.play-page .game-console-menu #siteNav a:hover { color: #fff3d3; border-color: #e8d09980; background: #50634b; }
.play-page .game-console-menu #siteNav a[aria-current=page] {
  color: #374032;
  border-color: #ffedc0;
  background: linear-gradient(145deg, #ffe6ac, #dab778);
}
.play-page :is(.primary-button, .secondary-button, .danger-button, .chip) { border-radius: 11px; }
.play-page .primary-button { color: #283e31; background: linear-gradient(135deg, #ffe7a5, #e7bb79); box-shadow: inset 0 1px #fff7d7, 0 3px 0 #80613b; }
.play-page .secondary-button { color: #e1efdc; border-color: #b2d1bf63; background: #7aaf9320; }
.play-page .secondary-button:hover:enabled { color: #fff2d0; border-color: #f0d39a; background: #85b59730; }
.play-page .danger-button { color: #ffcab1; border-color: #f0b19466; background: #975b4829; }
.play-page .text-button { color: #ffe3a1; }

.play-page .modal { background: #052d29a8; }
.play-page .modal-card {
  color: #fff7e0;
  border-color: #c6dfb877;
  background: radial-gradient(ellipse at 0 0, #54795b66, transparent 65%), linear-gradient(145deg, #204e40, #0d322e);
  box-shadow: inset 0 1px #f7f3ce29, 0 24px 80px #031e25aa;
}
.play-page .modal-card h1 { line-height: 1.2; }
.play-page .modal-card p { color: #d1e1d0; }
.play-page .chip { color: #e5eedd; background: #0d342db3; border-color: #bed6c24d; }
.play-page .chip small { color: #bdd0c1; }
.play-page .chip:hover { border-color: #c6e5af; }
.play-page .chip[aria-pressed='true'] { color: #304032; border-color: #ffe8b7; background: #f1d399; box-shadow: none; }
.play-page .chip[aria-pressed='true'] small { color: #4a5945; }

@media (max-width: 700px) {
  /* Anchor the garden edge in portrait instead of cropping to empty scenery. */
  .play-page::before {
    background-image: linear-gradient(100deg, #103f354d, #103f358f 60%), url('./assets/othello-garden-v2.webp');
    background-position: center, 14% center;
  }
  .play-page .surface { border-radius: 13px; }
  .play-page .board-stage-multi { border-radius: 14px; }
  .play-page .multi-board { border-radius: 9px; }
  .play-page .action-surface {
    border-radius: 16px 16px 0 0;
    border-top-color: #d4e8c34d;
    background: #103b32fa;
    box-shadow: 0 -6px 24px #052a3040;
  }
}