:root {
  --polish-ink: #141312;
  --polish-paper: #fff7ea;
  --polish-muted: #d7c9b8;
  --polish-line: rgba(255, 247, 234, 0.24);
  --polish-panel: rgba(255, 247, 234, 0.78);
  --polish-dark-panel: rgba(18, 15, 13, 0.68);
  --polish-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
  --game-cover: url("../covers/space-shooter.svg");
  --game-accent: #e0ac42;
  --game-accent-2: #43b8aa;
}

body[data-game-art="2048"] {
  --game-cover: url("../covers/2048.svg");
  --game-accent: #c94254;
  --game-accent-2: #f2b84d;
}

body[data-game-art="snake"] {
  --game-cover: url("../covers/snake.svg");
  --game-accent: #087d75;
  --game-accent-2: #e0ac42;
}

body[data-game-art="tetris"] {
  --game-cover: url("../covers/tetris.svg");
  --game-accent: #6045a1;
  --game-accent-2: #43b8aa;
}

body[data-game-art="gomoku"] {
  --game-cover: url("../covers/gomoku.svg");
  --game-accent: #c9912d;
  --game-accent-2: #087d75;
}

body[data-game-art="memory"] {
  --game-cover: url("../covers/memory.svg");
  --game-accent: #6045a1;
  --game-accent-2: #c94254;
}

body[data-game-art="minesweeper"] {
  --game-cover: url("../covers/minesweeper.svg");
  --game-accent: #275d8a;
  --game-accent-2: #e0ac42;
}

body[data-game-art="shudu"] {
  --game-cover: url("../covers/shudu.svg");
  --game-accent: #087d75;
  --game-accent-2: #c9912d;
}

body[data-game-art="brick-breaker"] {
  --game-cover: url("../covers/brick-breaker.svg");
  --game-accent: #c94254;
  --game-accent-2: #275d8a;
}

body[data-game-art="ghost-escape"] {
  --game-cover: url("../covers/ghost-escape.svg");
  --game-accent: #6045a1;
  --game-accent-2: #43b8aa;
}

body[data-game-art="high-school-stories"] {
  --game-cover: url("../covers/high-school-stories.svg");
  --game-accent: #c94254;
  --game-accent-2: #f2b84d;
}

body[data-game-art="space-shooter"] {
  --game-cover: url("../covers/space-shooter.svg");
  --game-accent: #275d8a;
  --game-accent-2: #c94254;
}

body[data-game-art="temple-exploration"] {
  --game-cover: url("../covers/temple-exploration.svg");
  --game-accent: #0e6f61;
  --game-accent-2: #d69a2f;
}

body[data-game-art] {
  min-height: 100vh;
  background:
    linear-gradient(120deg, rgba(12, 11, 10, 0.72), rgba(12, 11, 10, 0.34) 38%, rgba(255, 247, 234, 0.18)),
    linear-gradient(315deg, color-mix(in srgb, var(--game-accent), transparent 64%), transparent 44%),
    var(--game-cover) center / cover fixed,
    #141312 !important;
  color: var(--polish-ink);
  isolation: isolate;
}

body[data-game-art]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 247, 234, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 247, 234, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 50% 0%, rgba(255, 247, 234, 0.16), transparent 46%);
  background-size: 52px 52px, 52px 52px, auto;
}

body[data-game-art]::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  backdrop-filter: blur(2px) saturate(1.08);
}

body[data-game-art] h1,
body[data-game-art] h2,
body[data-game-art] h3 {
  letter-spacing: 0;
}

body[data-game-art] .game-container,
body[data-game-art] .container,
body[data-game-art] .mode-select {
  position: relative;
}

body[data-game-art] .game-container::before,
body[data-game-art] .container::before,
body[data-game-art] .mode-select::before,
body[data-game-art] #general-container::before {
  content: "";
  position: absolute;
  inset: -16px;
  z-index: -1;
  border: 1px solid rgba(255, 247, 234, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 247, 234, 0.22), rgba(255, 247, 234, 0.05)),
    rgba(18, 15, 13, 0.18);
  box-shadow: var(--polish-shadow);
  pointer-events: none;
}

body[data-game-art] .game-header,
body[data-game-art] .header,
body[data-game-art] .game-controls,
body[data-game-art] .control-panel,
body[data-game-art] .game-info-panel,
body[data-game-art] .timer-wrapper,
body[data-game-art] .game-explanation,
body[data-game-art] .scores-container > *,
body[data-game-art] .timer-container,
body[data-game-art] .next-piece,
body[data-game-art] .game-stats,
body[data-game-art] .controls-hint {
  border: 1px solid rgba(255, 247, 234, 0.26) !important;
  background:
    linear-gradient(135deg, rgba(255, 247, 234, 0.86), rgba(255, 247, 234, 0.64)) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(18px) saturate(1.08);
}

body[data-theme="dark"][data-game-art] .game-header,
body[data-theme="dark"][data-game-art] .header,
body[data-theme="dark"][data-game-art] .game-controls,
body[data-theme="dark"][data-game-art] .control-panel,
body[data-theme="dark"][data-game-art] .game-info-panel,
body[data-theme="dark"][data-game-art] .timer-wrapper,
body[data-theme="dark"][data-game-art] .game-explanation,
body[data-theme="dark"][data-game-art] .scores-container > *,
body[data-theme="dark"][data-game-art] .timer-container,
body[data-theme="dark"][data-game-art] .next-piece,
body[data-theme="dark"][data-game-art] .game-stats,
body[data-theme="dark"][data-game-art] .controls-hint {
  background:
    linear-gradient(135deg, rgba(24, 20, 17, 0.86), rgba(24, 20, 17, 0.68)) !important;
}

body[data-game-art] .game-board,
body[data-game-art] .board,
body[data-game-art] .memory-board,
body[data-game-art] .board-container,
body[data-game-art] .game-board-container,
body[data-game-art] #gameBoard,
body[data-game-art] #shuduBoard,
body[data-game-art] #game-container {
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.28);
}

body[data-game-art] canvas,
body[data-game-art] #game-board,
body[data-game-art] #tetris-canvas,
body[data-game-art] #gomoku-board,
body[data-game-art] #game-container {
  border-color: color-mix(in srgb, var(--game-accent), #fff 28%) !important;
}

body[data-game-art] .button,
body[data-game-art] button,
body[data-game-art] .restart-button,
body[data-game-art] .undo-button,
body[data-game-art] .minimal-button,
body[data-game-art] .mode-select-button,
body[data-game-art] #start-btn,
body[data-game-art] #restart-btn {
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

body[data-game-art] .button:hover,
body[data-game-art] button:hover,
body[data-game-art] .restart-button:hover,
body[data-game-art] .undo-button:hover,
body[data-game-art] .minimal-button:hover,
body[data-game-art] .mode-select-button:hover,
body[data-game-art] #start-btn:hover,
body[data-game-art] #restart-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--game-accent), transparent 70%);
}

body[data-game-art] #back-button,
body[data-game-art] #theme-button,
body[data-game-art] #language-button,
body[data-game-art] .icon-button,
body[data-game-art] .control-button {
  border: 1px solid rgba(255, 247, 234, 0.28) !important;
  background:
    linear-gradient(135deg, rgba(255, 247, 234, 0.86), rgba(255, 247, 234, 0.58)) !important;
  color: var(--polish-ink) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

body[data-game-art] #ui-container {
  top: 18px;
  left: 18px;
  padding: 10px;
  border: 1px solid rgba(255, 247, 234, 0.28);
  border-radius: 8px;
  background: rgba(18, 15, 13, 0.48);
  box-shadow: var(--polish-shadow);
  backdrop-filter: blur(18px);
}

body[data-game-art] #general-container {
  position: relative;
  padding: 16px;
  border-radius: 8px;
}

body[data-game-art] #game-container {
  overflow: hidden;
  border: 1px solid rgba(255, 247, 234, 0.24);
  border-radius: 8px;
}

@media (max-width: 720px) {
  body[data-game-art] {
    background-attachment: scroll;
  }

  body[data-game-art] .game-container::before,
  body[data-game-art] .container::before,
  body[data-game-art] .mode-select::before,
  body[data-game-art] #general-container::before {
    inset: -8px;
  }
}