/* GameOver.com.hk game skin
   Loaded after every imported engine so all games share the site's visual
   language without changing their rules, layout, or piece readability. */

.embed-body {
  --go-ink: #111827;
  --go-ink-2: #1b263b;
  --go-paper: #f7f3ea;
  --go-paper-2: #eee8dc;
  --go-white: #fffdf8;
  --go-red: #ef4e36;
  --go-red-dark: #c93424;
  --go-cyan: #63d4d1;
  --go-gold: #f0b44d;
  --go-muted: #687386;
  --go-line: rgba(17, 24, 39, .15);

  /* Imported engines share these design-system names. */
  --blue: var(--go-red);
  --blue-dark: var(--go-red-dark);
  --blue-light: #fff0ec;
  --blue-border: #f2b9ad;
  --border-focus: #f08b79;
  --accent: var(--go-gold);
  --accent-light: #fff6df;
  --text: var(--go-ink);
  --text-muted: var(--go-muted);
  --text-light: #8a94a4;
  --surface: var(--go-white);
  --surface-2: var(--go-paper);
  --surface-3: var(--go-paper-2);
  --border: #ded6c8;
  --gold: var(--go-gold);
  --felt: var(--go-ink-2);
  --felt-dark: var(--go-ink);
  --felt-light: #283650;
  --felt-line: rgba(255, 253, 248, .18);
  --card-red: var(--go-red-dark);
  --card-black: var(--go-ink);
  background: var(--go-paper) !important;
  color: var(--go-ink);
}

.embed-heading {
  border-bottom: 1px solid var(--go-line);
  padding: 0 4px 10px;
}

/* Card, casino, dice, tile, and board engines use one branded play surface. */
.family-blackjack .game-shell,
.family-canasta .game-shell,
.family-checkers .game-shell,
.family-craps .game-shell,
.family-dominoes .game-shell,
.family-freecell .game-shell,
.family-ginrummy .game-shell,
.family-hearts .game-shell,
.family-ludo .game-shell,
.family-mahjong .game-shell,
.family-reversi .game-shell,
.family-rummy .game-shell,
.family-solitaire .game-shell,
.family-spades .game-shell,
.family-yahtzee .game-shell {
  --felt: var(--go-ink-2);
  --felt-dark: var(--go-ink);
  --felt-light: #2a3853;
  --felt-line: rgba(255, 253, 248, .18);
  --gold: var(--go-gold);
  background:
    radial-gradient(ellipse at 10% -15%, rgba(239, 78, 54, .30), transparent 40%),
    radial-gradient(ellipse at 95% 110%, rgba(99, 212, 209, .17), transparent 38%),
    linear-gradient(145deg, var(--go-ink-2), var(--go-ink) 72%) !important;
  border: 1px solid rgba(17, 24, 39, .22) !important;
  outline: 0 !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 30px rgba(17, 24, 39, .12) !important;
}

/* The control language is consistent across the imported engines. */
.embed-body .game-toolbar {
  border-bottom: 1px solid rgba(255, 253, 248, .12);
  padding-bottom: .7rem;
}

.embed-body .btn-felt,
.embed-body .btn-tool {
  border-radius: 9px !important;
  box-shadow: none !important;
}

.embed-body .btn-felt {
  background: rgba(255, 253, 248, .09) !important;
  border-color: rgba(255, 253, 248, .22) !important;
  color: var(--go-white) !important;
}

.embed-body .btn-felt:hover {
  background: rgba(255, 253, 248, .17) !important;
  border-color: rgba(255, 253, 248, .36) !important;
}

.embed-body .btn-felt.btn-felt-primary,
.embed-body .btn-felt-primary,
.embed-body .btn-tool.btn-tool-primary {
  background: var(--go-red) !important;
  border-color: var(--go-red) !important;
  color: #fff !important;
  text-shadow: none !important;
}

.embed-body .btn-felt.btn-felt-primary:hover,
.embed-body .btn-felt-primary:hover,
.embed-body .btn-tool.btn-tool-primary:hover {
  background: var(--go-red-dark) !important;
  border-color: var(--go-red-dark) !important;
}

.embed-body .game-stats,
.embed-body .game-stats > span,
.embed-body .game-stats .stat-val {
  color: var(--go-white);
}

/* Checkers keeps alternating squares, but now uses the editorial palette. */
.family-checkers .game-shell {
  --wood-dark: #29344a;
  --wood-light: #eee8dc;
  --board-frame: #111827;
  --piece-red: #ef4e36;
  --piece-red-dark: #c93424;
  --piece-white: #fffdf8;
}

.family-checkers .ck-board {
  border-color: var(--go-ink) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .24) !important;
}

/* Reversi's grid uses cyan as the recognisable GameOver secondary colour. */
.family-reversi .game-shell {
  --board-cell: #56bbb7;
  --board-cell-alt: #63d4d1;
  --felt-line: rgba(17, 24, 39, .55);
}

.family-reversi .rev-cell,
.family-reversi .game-shell[class*="table-"] .rev-cell {
  background: var(--board-cell) !important;
}

.family-reversi .rev-board {
  border-color: var(--go-ink) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22) !important;
}

/* Ludo retains its four player colours while its cabinet matches the site. */
.family-ludo .game-shell {
  --shell-bg: linear-gradient(145deg, var(--go-ink-2), var(--go-ink));
  --lb-bg: var(--go-paper);
  --lb-cell: var(--go-white);
  --lb-cell-border: #d8d0c2;
  --lb-yard-inner: #fffaf1;
  --lb-glyph: #a99f90;
}

.family-ludo .ludo-svg {
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22) !important;
}

/* Puzzle pages are the light, magazine-like expression of the same palette. */
.family-puzzle .game-shell,
.family-puzzle .game-shell[class*="board-theme-"] {
  --pz-accent: var(--go-red);
  --pz-accent-2: var(--go-gold);
  --pz-board-bg: var(--go-paper-2);
  --pz-cell: var(--go-white);
  --pz-cell-border: #d8d0c2;
  --pz-tile-text: #fff;
  --pz-ink: var(--go-ink);
  --pz-shell: var(--go-paper);
  background:
    radial-gradient(circle at 100% 0, rgba(99, 212, 209, .18), transparent 32%),
    linear-gradient(155deg, var(--go-paper), var(--go-white) 70%) !important;
  border: 1px solid var(--go-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 30px rgba(17, 24, 39, .08) !important;
}

.family-puzzle .game-toolbar {
  border-bottom-color: var(--go-line);
}

.family-puzzle .game-stats,
.family-puzzle .game-stats > span,
.family-puzzle .game-stats .stat-val {
  color: var(--go-ink);
}

.family-puzzle .btn-tool:not(.btn-tool-primary) {
  background: var(--go-white) !important;
  border-color: #d8d0c2 !important;
  color: var(--go-ink) !important;
}

/* Tic-tac-toe is deliberately clean and editorial rather than app-blue. */
.family-tictactoe {
  --x-color: var(--go-red);
  --o-color: var(--go-ink);
}

.family-tictactoe .game-layout {
  grid-template-columns: minmax(0, 1fr);
  max-width: 560px;
  background:
    radial-gradient(circle at 100% 0, rgba(99, 212, 209, .16), transparent 34%),
    var(--go-white);
  border: 1px solid var(--go-line);
  border-radius: 16px;
  padding: 1.2rem;
  box-shadow: 0 12px 30px rgba(17, 24, 39, .08);
}

.family-tictactoe .ttt-board {
  background: var(--go-ink);
  border-color: var(--go-ink);
  box-shadow: 0 10px 24px rgba(17, 24, 39, .14);
}

.family-tictactoe .ttt-cell {
  background: var(--go-paper);
}

.family-tictactoe .ttt-cell:hover:not(.filled):not(.locked),
.family-tictactoe .ttt-cell.last-move {
  background: #fff0ec;
}

.family-tictactoe .turn-banner,
.family-tictactoe .score-box,
.family-tictactoe .controls-row {
  background: var(--go-white);
  border-color: var(--go-line);
}

.family-tictactoe .score-box.active {
  border-color: var(--go-red);
  box-shadow: 0 0 0 2px rgba(239, 78, 54, .12);
}

/* Tetris uses the site's dark header treatment, not the imported purple neon. */
.family-tetris .game-shell {
  background:
    radial-gradient(circle at 8% -10%, rgba(239, 78, 54, .28), transparent 38%),
    radial-gradient(circle at 100% 100%, rgba(99, 212, 209, .14), transparent 36%),
    linear-gradient(145deg, var(--go-ink-2), var(--go-ink)) !important;
  border: 1px solid rgba(17, 24, 39, .25) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 30px rgba(17, 24, 39, .12) !important;
}

.family-tetris .game-toolbar {
  border-bottom-color: rgba(255, 253, 248, .12);
}

.family-tetris .tetris-box,
.family-tetris .tetris-mini .tm-row {
  background: rgba(255, 253, 248, .06) !important;
  border-color: rgba(255, 253, 248, .16) !important;
}

.family-tetris .tetris-well {
  box-shadow:
    0 0 0 2px rgba(255, 253, 248, .18),
    0 0 30px rgba(99, 212, 209, .12),
    inset 0 0 40px rgba(0, 0, 0, .55) !important;
}

.family-tetris .tetris-flash {
  color: var(--go-gold);
  text-shadow: 0 0 12px rgba(240, 180, 77, .7);
}

.family-tetris .tetris-touch button {
  background: rgba(255, 253, 248, .09);
  border-color: rgba(255, 253, 248, .2);
  color: var(--go-white);
  border-radius: 9px;
}

.family-tetris .game-overlay-card {
  background: var(--go-white);
  border-color: var(--go-line);
  color: var(--go-ink);
  box-shadow: 0 20px 60px rgba(17, 24, 39, .28);
}

.family-tetris .game-overlay-card p,
.family-tetris .game-overlay-card .lbl {
  color: var(--go-muted);
}

.family-tetris .game-overlay-card .num {
  color: var(--go-ink);
}

/* Arcade cabinet: warm outer cabinet with an ink canvas and brand accents. */
.family-arcade {
  --bg: var(--go-paper);
  --bg-deep: var(--go-ink);
  --surface: var(--go-white);
  --surface-2: var(--go-paper);
  --surface-3: var(--go-paper-2);
  --border: #ded6c8;
  --border-light: #d4cab9;
  --purple: var(--go-red);
  --purple-hover: var(--go-red-dark);
  --purple-soft: rgba(239, 78, 54, .15);
  --pink: var(--go-red);
  --orange: var(--go-gold);
  --yellow: var(--go-gold);
  --green: var(--go-cyan);
  --blue: var(--go-cyan);
  --red: var(--go-red);
  --text: var(--go-ink);
  --text-muted: var(--go-muted);
  --text-faint: #7f8998;
  background: var(--go-paper) !important;
}

.family-arcade .embed-heading {
  color: var(--go-ink);
}

.family-arcade .embed-heading span {
  color: var(--go-muted);
}

.family-arcade .machine {
  background:
    linear-gradient(90deg, var(--go-red) 0 64px, transparent 64px) top left / 100% 4px no-repeat,
    radial-gradient(circle at 100% 0, rgba(99, 212, 209, .18), transparent 34%),
    var(--go-white) !important;
  border: 1px solid var(--go-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 30px rgba(17, 24, 39, .09);
}

.family-arcade .machine-hud {
  border-bottom: 1px solid var(--go-line);
  margin-bottom: 12px;
}

.family-arcade .hud-stat .val,
.family-arcade .overlay-final .of-row .v {
  color: var(--go-ink);
}

.family-arcade .machine-screen {
  background: var(--go-ink) !important;
  border: 1px solid var(--go-ink) !important;
  border-radius: 10px;
}

.family-arcade .m-btn,
.family-arcade .touch-btn {
  background: var(--go-paper-2);
  border: 1px solid #d4cab9;
  color: var(--go-ink);
  border-radius: 9px;
}

.family-arcade .m-btn:hover,
.family-arcade .touch-btn:active {
  background: #e3dacb;
  border-color: #c7baa7;
}

.family-arcade .m-btn-primary {
  background: var(--go-red);
  border-color: var(--go-red);
  color: #fff;
}

.family-arcade .m-btn-primary:hover {
  background: var(--go-red-dark);
  border-color: var(--go-red-dark);
}

.family-arcade .game-overlay {
  background: rgba(17, 24, 39, .88);
}

.family-arcade .overlay-card {
  background: var(--go-white);
  border: 1px solid rgba(255, 253, 248, .35);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
}

.family-arcade .overlay-card .overlay-title {
  background: none;
  color: var(--go-red);
}

.family-arcade .controls-line .kbd {
  background: var(--go-paper-2);
  border-color: #d4cab9;
  color: var(--go-ink);
}

@media (max-width: 620px) {
  .family-tictactoe .game-layout { padding: .75rem; }
  .family-arcade .machine { padding: 10px; }
}