:root {
  color-scheme: light;
  --bg: #f6f7fb;
  --surface: #ffffff;
  --ink: #172033;
  --muted: #657287;
  --line: #243149;
  --fixed: #e8f0ff;
  --player: #fef3c7;
  --ok: #c7f2d4;
  --wrong: #ffd8d8;
  --hint: #b9f3ff;
  --button: #2563eb;
  --button-ink: #ffffff;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: Verdana, Geneva, sans-serif;
}

button {
  font: inherit;
}

.app-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 16px;
}

.hidden {
  display: none !important;
}

.home-screen,
.start-screen,
.game-screen,
.sudoku-screen,
.battleship-screen,
.classic-games-screen,
.hangman-screen,
.words-screen,
.four-screen,
.reversi-screen,
.tanks-screen,
.boxes-screen,
.five-screen,
.dots-screen,
.balda-screen,
.sos-screen,
.tictactoe-screen {
  width: min(100%, 860px);
}

.bulls-cows-preview { grid-template-columns: repeat(4, 1fr); font-weight: 800; color: var(--ink); }
.bulls-cows-preview .bull { color: #b91c1c; }
.bulls-cows-preview .cow { color: #2563eb; }
.classic-games-screen { min-height: calc(100dvh - 32px); display: grid; gap: 12px; align-content: start; }
.classic-input { display: grid; gap: 12px; justify-items: start; }
.classic-mode-switch { display: flex; flex-wrap: wrap; gap: 6px; }
.classic-mode-switch button { min-height: 38px; border: 0; border-radius: 8px; padding: 8px 12px; background: #e5eaf3; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.classic-mode-switch button.active { background: var(--button); color: var(--button-ink); }
.classic-online-panel { width: min(100%, 760px); }
.classic-own-secret { display: grid; grid-template-columns: auto auto; align-items: center; gap: 4px 14px; width: min(100%, 360px); padding: 14px 16px; border: 1px solid #cbd5e1; background: #fff; }
.classic-own-secret span, .classic-own-secret small { color: var(--muted); }
.classic-own-secret strong { font-size: 1.6rem; letter-spacing: 0; }
.classic-own-secret small { grid-column: 1 / -1; }
.classic-online-history li strong { min-width: 150px; }
.classic-code { display: grid; grid-template-columns: repeat(5, minmax(52px, 68px)); gap: 8px; }
.classic-code span { min-height: 66px; display: grid; place-items: center; border: 2px solid var(--grid); background: #fff; color: var(--ink); font-size: 2rem; font-weight: 800; }
.classic-pad { display: flex; flex-wrap: wrap; gap: 8px; max-width: 520px; }
.classic-pad button { min-width: 48px; min-height: 48px; border: 0; border-radius: 8px; background: #e5eaf3; color: var(--ink); font: inherit; font-size: 1.1rem; font-weight: 800; cursor: pointer; }
.classic-pad button.primary-action { background: var(--button); color: var(--button-ink); min-width: 120px; }
.classic-history { margin: 0; padding: 0; list-style: none; width: min(100%, 560px); display: grid; gap: 6px; }
.classic-history li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid #d9e1ee; background: #fff; }
.classic-history .empty { color: var(--muted); }
.hangman-preview { grid-template-columns: repeat(4, 1fr); font-weight: 800; }
.hangman-mark { color: #b91c1c; }
.hangman-screen { min-height: calc(100dvh - 32px); display: grid; gap: 12px; align-content: start; }
.hangman-figure { position: relative; width: 180px; height: 180px; margin-top: 8px; border-bottom: 4px solid var(--grid); }
.hangman-figure .gallows { position: absolute; left: 35px; bottom: 0; width: 4px; height: 160px; background: var(--grid); box-shadow: 52px 0 0 var(--grid), 26px -155px 0 0 var(--grid); }
.hangman-figure .head, .hangman-figure .body, .hangman-figure .arm, .hangman-figure .leg { position: absolute; display: none; background: var(--ink); }
.hangman-figure .head { left: 102px; top: 22px; width: 28px; height: 28px; border: 4px solid var(--ink); border-radius: 50%; background: transparent; }
.hangman-figure .body { left: 118px; top: 54px; width: 4px; height: 52px; }
.hangman-figure .arm, .hangman-figure .leg { left: 118px; top: 76px; width: 4px; height: 42px; transform-origin: top; }
.hangman-figure .arm.left, .hangman-figure .leg.left { transform: rotate(45deg); }
.hangman-figure .arm.right, .hangman-figure .leg.right { transform: rotate(-45deg); }
.hangman-figure .leg { top: 103px; }
.hangman-figure[data-wrong="1"] .head, .hangman-figure[data-wrong="2"] .head, .hangman-figure[data-wrong="3"] .head, .hangman-figure[data-wrong="4"] .head, .hangman-figure[data-wrong="5"] .head, .hangman-figure[data-wrong="6"] .head { display: block; }
.hangman-figure[data-wrong="2"] .body, .hangman-figure[data-wrong="3"] .body, .hangman-figure[data-wrong="4"] .body, .hangman-figure[data-wrong="5"] .body, .hangman-figure[data-wrong="6"] .body, .hangman-figure[data-wrong="3"] .arm.left, .hangman-figure[data-wrong="4"] .arm.left, .hangman-figure[data-wrong="5"] .arm.left, .hangman-figure[data-wrong="6"] .arm.left, .hangman-figure[data-wrong="4"] .arm.right, .hangman-figure[data-wrong="5"] .arm.right, .hangman-figure[data-wrong="6"] .arm.right, .hangman-figure[data-wrong="5"] .leg.left, .hangman-figure[data-wrong="6"] .leg.left, .hangman-figure[data-wrong="6"] .leg.right { display: block; }
.hangman-word { display: flex; flex-wrap: wrap; gap: 8px; }
.hangman-word span { min-width: 44px; min-height: 50px; display: grid; place-items: center; border-bottom: 3px solid var(--grid); font-size: 1.7rem; font-weight: 800; }
.hangman-pad { display: flex; flex-wrap: wrap; gap: 6px; max-width: 640px; }
.hangman-pad button { width: 42px; height: 42px; border: 0; border-radius: 7px; background: #e5eaf3; color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; }
.hangman-pad button:disabled { opacity: .45; cursor: default; }
.words-preview { grid-template-columns: repeat(3, 1fr); font-weight: 800; }
.words-screen { min-height: calc(100dvh - 32px); display: grid; gap: 12px; align-content: start; }
.words-source { display: flex; flex-wrap: wrap; gap: 8px; }
.words-source button { width: 58px; height: 58px; border: 0; border-radius: 8px; background: #dbeafe; color: var(--ink); font: inherit; font-size: 1.6rem; font-weight: 800; cursor: pointer; }
.words-source button:disabled { opacity: .45; cursor: default; }
.words-current { min-height: 58px; display: flex; align-items: center; color: var(--ink); font-size: 1.75rem; font-weight: 800; letter-spacing: .08em; }
.words-found { display: flex; flex-wrap: wrap; gap: 8px; max-width: 620px; }
.words-found span { min-width: 74px; padding: 8px 10px; border-radius: 6px; background: #e5eaf3; color: var(--muted); font-weight: 800; text-align: center; }
.words-found span.found { background: #dcfce7; color: #166534; }
.four-preview { grid-template-columns: repeat(4, 1fr); }
.four-preview span { border-radius: 50%; background: #dbeafe; }
.four-preview span.red { background: #ef4444; }
.four-preview span.yellow { background: #facc15; }
.four-screen { min-height: calc(100dvh - 32px); display: grid; gap: 12px; align-content: start; }
.four-controls, .four-board { display: grid; grid-template-columns: repeat(7, minmax(36px, 72px)); width: min(100%, 504px); }
.four-controls { gap: 4px; margin-bottom: 4px; }
.four-controls button { min-height: 36px; border: 0; border-radius: 6px; background: #e5eaf3; color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; }
.four-board { gap: 4px; padding: 4px; background: #2563eb; }
.four-board span { aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #ef4444; font-size: clamp(1.3rem, 5vw, 2.8rem); }
.four-board span.computer { color: #b7791f; background: #fef3c7; }
.reversi-preview { grid-template-columns: repeat(4, 1fr); background: #15803d; padding: 5px; }
.reversi-preview span { border-radius: 50%; background: transparent; }
.reversi-preview span.dark { background: #172033; }.reversi-preview span.light { background: #f8fafc; }
.reversi-screen { min-height: calc(100dvh - 32px); display: grid; gap: 12px; align-content: start; }
.reversi-board { display: grid; grid-template-columns: repeat(8, minmax(32px, 58px)); width: min(100%, 464px); gap: 1px; padding: 2px; background: var(--grid); }
.reversi-board button { aspect-ratio: 1; border: 0; background: #15803d; color: #f8fafc; font: inherit; font-size: clamp(1.25rem, 4vw, 2rem); cursor: default; }.reversi-board button.computer { color: #172033; }.reversi-board button.available { box-shadow: inset 0 0 0 4px #86efac; cursor: pointer; }
.tanks-preview { grid-template-columns: repeat(3, 1fr); background: #dbeafe; }.tanks-preview .tank { color: #2563eb; font-size: 1.5rem; }.tanks-preview .enemy { color: #dc2626; }.tanks-preview .wall { background: #64748b; }
.tanks-screen { min-height: calc(100dvh - 32px); display: grid; gap: 12px; align-content: start; }.tanks-board { display: grid; grid-template-columns: repeat(9, minmax(30px, 52px)); width: min(100%, 468px); gap: 1px; padding: 2px; background: var(--grid); }.tanks-board span { aspect-ratio: 1; display: grid; place-items: center; background: #e0f2fe; color: #2563eb; font-size: clamp(1rem, 3vw, 1.65rem); }.tanks-board span.wall { background: #64748b; color: #e2e8f0; }.tanks-board span.computer { color: #dc2626; }.tanks-controls { display: flex; flex-wrap: wrap; gap: 10px; }.tanks-controls div { display: flex; align-items: center; gap: 5px; }.tanks-controls strong { margin-right: 3px; }.tanks-controls button { width: 40px; height: 40px; border: 0; border-radius: 7px; background: #e5eaf3; color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; }

.battleship-screen {
  width: min(100%, 1160px);
}

.home-screen,
.start-screen {
  min-height: min(640px, calc(100dvh - 32px));
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 28px;
  text-align: center;
}

.home-screen {
  width: min(100%, 980px);
  align-content: start;
  padding-top: clamp(10px, 5vh, 56px);
}

.game-cards {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.game-card {
  min-width: 0;
  border: 0;
  border-radius: 8px;
  padding: 14px;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 34px rgba(23, 32, 51, 0.09);
}

.game-card.external-game-card {
  text-decoration: none;
}

.game-card:focus-visible,
.game-card:hover {
  outline: 3px solid #93c5fd;
  outline-offset: 2px;
}

.game-card-body {
  display: grid;
  gap: 8px;
}

.game-card-body strong {
  font-size: 1.3rem;
}

.game-card-body span {
  color: var(--muted);
  line-height: 1.35;
}

.card-stats {
  color: var(--ink) !important;
  font-weight: 700;
}

.card-action {
  width: fit-content;
  min-height: 30px;
  display: inline-grid;
  place-items: center;
  padding: 0 12px;
  border-radius: 8px;
  background: #e5eaf3;
  color: var(--ink) !important;
  font-weight: 700;
}

.game-card.has-progress .card-action {
  background: var(--button);
  color: var(--button-ink) !important;
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.home-action-button {
  min-width: 190px;
}

.card-preview {
  aspect-ratio: 1 / 1;
  display: grid;
  overflow: hidden;
  border: 2px solid var(--line);
  background: var(--line);
  gap: 2px;
}

.card-preview span {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  background: #ffffff;
  color: var(--ink);
  font-weight: 700;
  line-height: 1;
}

.snake-preview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.snake-preview span:nth-child(odd) {
  background: var(--fixed);
}

.sudoku-preview {
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 1px;
}

.sudoku-preview span {
  font-size: 0.65rem;
}

.battleship-preview {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.battleship-preview .ship {
  background: #bfdbfe;
}

.battleship-preview .hit {
  background: #fecaca;
}

.battleship-preview .miss {
  background: #e2e8f0;
}

.minesweeper-preview {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.minesweeper-preview span {
  background: #e5eaf3;
  font-size: 0.8rem;
}

.minesweeper-preview .flag {
  background: #dbeafe;
  color: #1d4ed8;
}

.minesweeper-preview .mine {
  background: #fecaca;
  color: #991b1b;
}

.boxes-preview {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  background: #ffffff;
}

.boxes-preview span {
  background: #ffffff;
}

.boxes-preview .dot {
  width: 34%;
  height: 34%;
  place-self: center;
  border-radius: 999px;
  background: var(--line);
}

.boxes-preview .line.h {
  height: 22%;
  align-self: center;
}

.boxes-preview .line.v {
  width: 22%;
  justify-self: center;
}

.boxes-preview .line.player,
.boxes-preview .box.player {
  background: #93c5fd;
}

.boxes-preview .line.computer,
.boxes-preview .box.computer {
  background: #fde68a;
}

.five-preview {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.five-preview span {
  position: relative;
}

.five-preview .x::before,
.five-preview .x::after {
  content: "";
  position: absolute;
  width: 62%;
  height: 12%;
  border-radius: 999px;
  background: #b91c1c;
}

.five-preview .x::before {
  transform: rotate(45deg);
}

.five-preview .x::after {
  transform: rotate(-45deg);
}

.five-preview .o::before {
  content: "";
  width: 54%;
  height: 54%;
  border: 4px solid #2563eb;
  border-radius: 999px;
}

.dots-preview {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--line);
  gap: 1px;
}

.dots-preview span {
  position: relative;
}

.dots-preview .area-p {
  background: #dbeafe;
}

.dots-preview .p::before,
.dots-preview .c::before {
  content: "";
  width: 34%;
  height: 34%;
  border-radius: 999px;
  z-index: 1;
}

.dots-preview .p::before {
  background: #2563eb;
}

.dots-preview .c::before {
  background: #d97706;
}

.balda-preview {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.balda-preview span {
  font-size: 0.9rem;
}

.balda-preview span:not(:empty) {
  background: #eef4ff;
}

.sos-preview {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
}

.sos-preview span {
  font-size: 0.72rem;
}

.sos-preview span:not(:empty) {
  background: #eef4ff;
}

.tictactoe-preview {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tictactoe-preview span {
  position: relative;
}

.tictactoe-preview .x::before,
.tictactoe-preview .x::after {
  content: "";
  position: absolute;
  width: 64%;
  height: 12%;
  border-radius: 999px;
  background: #b91c1c;
}

.tictactoe-preview .x::before {
  transform: rotate(45deg);
}

.tictactoe-preview .x::after {
  transform: rotate(-45deg);
}

.tictactoe-preview .o::before {
  content: "";
  width: 50%;
  height: 50%;
  border: 4px solid #2563eb;
  border-radius: 999px;
}

.echoes-preview {
  position: relative;
  display: block;
  border-color: #3a3834;
  background:
    radial-gradient(circle at 66% 34%, rgba(191, 168, 122, 0.24), transparent 28%),
    radial-gradient(circle at 32% 74%, rgba(166, 90, 74, 0.2), transparent 28%),
    #1a1a1c;
}

.echoes-preview span {
  position: absolute;
  background: transparent;
}

.echoes-book {
  left: 24%;
  top: 20%;
  width: 44%;
  height: 58%;
  border: 2px solid #bfa87a;
  border-radius: 4px;
  box-shadow: inset 12px 0 0 rgba(217, 210, 192, 0.08);
  transform: rotate(-7deg);
}

.echoes-book::before,
.echoes-book::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 16%;
  height: 2px;
  background: rgba(217, 210, 192, 0.5);
}

.echoes-book::before {
  top: 34%;
}

.echoes-book::after {
  top: 52%;
}

.echoes-glow {
  right: 18%;
  top: 17%;
  width: 22%;
  height: 22%;
  border-radius: 999px;
  background: rgba(191, 168, 122, 0.22) !important;
  box-shadow: 0 0 22px rgba(191, 168, 122, 0.42);
}

.echoes-fingerprint {
  right: 20%;
  bottom: 19%;
  width: 31%;
  height: 31%;
  border: 2px solid rgba(217, 210, 192, 0.62);
  border-radius: 46% 54% 52% 48%;
}

.echoes-fingerprint::before,
.echoes-fingerprint::after {
  content: "";
  position: absolute;
  inset: 18%;
  border: 2px solid rgba(191, 168, 122, 0.58);
  border-radius: inherit;
}

.echoes-fingerprint::after {
  inset: 37%;
  border-color: rgba(166, 90, 74, 0.72);
}

.start-actions {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.95rem;
}

h1 {
  margin: 0;
  font-size: clamp(2.1rem, 8vw, 4.6rem);
  line-height: 1;
}

.lead {
  max-width: 32rem;
  margin: 18px auto 0;
  color: var(--muted);
  font-size: clamp(1rem, 3vw, 1.25rem);
  line-height: 1.45;
}

.primary-button,
.hint-button,
.text-button,
.icon-button,
.mini-button {
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
}

.primary-button {
  min-width: 190px;
  min-height: 58px;
  border-radius: 8px;
  background: var(--button);
  color: var(--button-ink);
  font-size: 1.35rem;
  font-weight: 700;
}

.game-screen,
.sudoku-screen,
.battleship-screen,
.boxes-screen,
.five-screen,
.dots-screen,
.balda-screen,
.sos-screen,
.tictactoe-screen {
  min-height: calc(100dvh - 32px);
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 12px;
  align-items: start;
}

.screen-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.screen-heading h1 {
  font-size: clamp(1.35rem, 4vw, 2rem);
  line-height: 1.1;
}

.back-home-button {
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  padding: 0 12px;
  background: #e5eaf3;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
}

.topbar {
  display: grid;
  gap: 10px;
  padding: 10px 0;
}

.status-row,
.level-row,
.play-row,
.action-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.status-row {
  justify-content: flex-start;
}

.level-row,
.play-row,
.action-row {
  align-items: center;
  justify-content: flex-start;
}

.level-row {
  display: grid;
  grid-template-columns: minmax(90px, auto) minmax(220px, 380px) minmax(110px, auto);
}

.sudoku-topbar .level-row {
  grid-template-columns: minmax(220px, 380px) minmax(100px, auto);
}

.minesweeper-topbar .level-row {
  grid-template-columns: minmax(90px, auto) minmax(240px, 420px) minmax(110px, auto) minmax(130px, auto);
}

.play-row {
  display: grid;
  grid-template-columns: minmax(220px, auto) auto auto;
  column-gap: 24px;
}

.action-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(90px, auto));
  justify-content: end;
  gap: 10px;
}

.level-label,
.difficulty-label,
.progress-label,
.metric-label {
  color: var(--muted);
  font-size: 0.98rem;
  white-space: nowrap;
}

.difficulty-label {
  min-height: 30px;
  display: inline-grid;
  place-items: center;
  padding: 0 10px;
  border-radius: 8px;
  background: #e9f7ef;
  color: #166534;
  font-weight: 700;
}

.difficulty-label[data-difficulty="easy"] {
  background: #ecfccb;
  color: #3f6212;
}

.difficulty-label[data-difficulty="medium"] {
  background: #fef3c7;
  color: #92400e;
}

.difficulty-label[data-difficulty="hard"] {
  background: #ffedd5;
  color: #c2410c;
}

.difficulty-label[data-difficulty="very-hard"] {
  background: #fee2e2;
  color: #b91c1c;
}

.next-label {
  font-size: clamp(1.05rem, 4vw, 1.55rem);
}

.metric-label.over-limit {
  color: #b91c1c;
  font-weight: 700;
}

.hint-button,
.text-button,
.icon-button,
.mini-button {
  min-height: 42px;
  border-radius: 8px;
  background: #e5eaf3;
  color: var(--ink);
  font-weight: 700;
}

.text-button {
  padding: 0 12px;
}

.mini-button {
  min-height: 30px;
  padding: 0 10px;
  font-size: 0.9rem;
}

.mini-button.muted {
  background: #f1f5f9;
  color: var(--muted);
}

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

.primary-action {
  background: var(--button);
  color: var(--button-ink);
}

.hint-button {
  padding: 0 14px;
}

.level-select {
  min-height: 42px;
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 8px;
  padding: 0 10px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
}

.online-panel {
  display: grid;
  grid-template-columns: auto minmax(90px, 120px) auto minmax(180px, 1fr);
  align-items: center;
  gap: 10px;
  max-width: 760px;
}

.online-lobby-host,
.online-lobby {
  grid-column: 1 / -1;
  min-width: 0;
  width: 100%;
}

.online-lobby {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(92px, 120px) auto minmax(150px, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.online-lobby label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.online-lobby input,
.online-lobby select,
.online-lobby button {
  min-width: 0;
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  padding: 0 10px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
}

.online-lobby button {
  cursor: pointer;
}

.online-lobby button[data-online-lobby-create],
.online-lobby button[data-online-lobby-propose],
.online-lobby button[data-online-lobby-accept] {
  background: var(--button);
  color: var(--button-ink);
}

.online-lobby button:disabled {
  cursor: default;
  opacity: 0.55;
}

.online-lobby-score,
.online-lobby-draws,
.online-lobby-proposal {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.online-lobby-score {
  grid-column: 1 / 4;
  color: var(--ink);
}

.online-lobby-draws {
  grid-column: 4 / -1;
  text-align: right;
}

.online-lobby-players,
.online-lobby-proposal {
  grid-column: 1 / -1;
}

.online-lobby-players {
  display: flex;
  justify-content: space-between;
  gap: 8px 16px;
  flex-wrap: wrap;
  color: var(--muted);
  font-weight: 700;
}

.online-lobby-players > span {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.online-lobby-score,
.online-lobby-proposal {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.online-lobby-room {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  color: var(--muted);
  font-weight: 800;
}

.online-input {
  min-height: 42px;
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 8px;
  padding: 0 12px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
}

.room-code {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  color: var(--muted);
  font-weight: 700;
}

.room-code.copyable {
  text-decoration: none;
}

.room-code-button {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 4px;
}

.room-code-button:focus-visible {
  outline: 3px solid #60a5fa;
  outline-offset: 3px;
  border-radius: 4px;
}

.icon-button {
  width: 42px;
  font-size: 1.35rem;
}

.message {
  min-height: 24px;
  color: var(--muted);
  text-align: center;
  font-size: 0.95rem;
}

.tutorial-panel {
  width: min(100%, 760px);
  justify-self: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 2px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.12);
}

.tutorial-panel strong {
  display: block;
  margin: 0 0 4px;
}

.tutorial-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
}

.tutorial-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.result-modal,
.stats-modal,
.rules-modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(23, 32, 51, 0.28);
}

.stats-modal,
.rules-modal {
  align-items: start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.result-panel,
.stats-panel,
.rules-panel {
  width: min(100%, 460px);
  border-radius: 8px;
  background: #ffffff;
  padding: 24px;
  box-shadow: 0 18px 60px rgba(23, 32, 51, 0.22);
  text-align: center;
}

.stats-panel,
.rules-panel {
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.result-panel h2,
.stats-panel h2,
.rules-panel h2 {
  margin: 0;
  font-size: 2rem;
}

.result-summary {
  margin: 12px 0 18px;
  color: var(--muted);
}

.result-stats {
  display: grid;
  gap: 8px;
  margin: 0 0 20px;
  text-align: left;
}

.result-stats span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f2f5fa;
}

.auto-suggestion {
  display: grid;
  gap: 8px;
  margin: 0 0 18px;
  padding: 14px;
  border-radius: 8px;
  background: #eef4ff;
  text-align: left;
}

.auto-suggestion p {
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
}

.auto-suggestion .text-button {
  justify-self: start;
}

.result-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}

.stats-group-title {
  grid-column: 1 / -1;
  margin-top: 4px;
  color: var(--ink);
  font-weight: 700;
  text-align: left;
}

.stat-card {
  display: grid;
  gap: 6px;
  min-height: 82px;
  align-content: center;
  padding: 12px;
  border-radius: 8px;
  background: #f2f5fa;
  text-align: left;
}

.overview-card strong {
  font-size: 1.18rem;
}

.stat-card-wide,
.stats-resume-list {
  grid-column: 1 / -1;
}

.stats-resume-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stats-resume-list .text-button {
  min-height: 44px;
  padding: 10px 14px;
}

.stat-card span {
  color: var(--muted);
  font-size: 0.88rem;
}

.rules-grid {
  display: grid;
  gap: 10px;
  margin: 18px 0;
  text-align: left;
}

.rule-card {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 8px;
  background: #f2f5fa;
}

.rule-card strong {
  color: var(--ink);
}

.rule-card span {
  color: var(--muted);
  line-height: 1.35;
}

#close-stats-button,
#close-rules-button {
  position: sticky;
  bottom: 0;
  width: 100%;
}

.stat-card strong {
  font-size: 1.35rem;
}

.confetti-canvas {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: none;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.confetti-canvas.active {
  display: block;
}

.print-sheet {
  display: none;
}

.print-board {
  --size: 8;
  width: min(100%, 180mm);
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-columns: repeat(var(--size), minmax(0, 1fr));
  border: 2px solid #111827;
  background: #111827;
  gap: 1px;
}

.print-cell {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  background: #ffffff;
  color: #111827;
  font-weight: 700;
  line-height: 1;
  font-size: 18pt;
}

.board {
  --size: 5;
  width: min(100%, calc(100dvh - 290px), 760px);
  aspect-ratio: 1 / 1;
  justify-self: center;
  align-self: start;
  display: grid;
  grid-template-columns: repeat(var(--size), minmax(0, 1fr));
  border: 2px solid var(--line);
  background: var(--line);
  gap: 2px;
}

.cell {
  min-width: 0;
  min-height: 0;
  border: 0;
  background: var(--surface);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: clamp(1rem, calc(10vw / var(--size) + 0.7rem), 2rem);
  line-height: 1;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.cell.fixed {
  background: var(--fixed);
}

.cell.player {
  background: var(--player);
}

.cell.placed {
  animation: placed 180ms ease-out;
}

.cell.wrong {
  animation: wrong 220ms ease-out;
}

.cell.hint-area {
  background: var(--hint);
}

.cell.hint-target {
  outline: 4px solid #0891b2;
  outline-offset: -5px;
}

.sudoku-board {
  width: min(100%, calc(100dvh - 250px), 620px);
  aspect-ratio: 1 / 1;
  justify-self: center;
  align-self: start;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  border: 3px solid var(--line);
  background: #ffffff;
}

.sudoku-cell {
  min-width: 0;
  min-height: 0;
  border: 0 solid #9aa6ba;
  border-right-width: 1px;
  border-bottom-width: 1px;
  background: #ffffff;
  color: var(--ink);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: clamp(1rem, 4.4vw, 2rem);
  line-height: 1;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.sudoku-cell:nth-child(3n) {
  border-right-width: 3px;
  border-right-color: var(--line);
}

.sudoku-cell:nth-child(9n) {
  border-right-width: 0;
}

.sudoku-cell:nth-child(n + 19):nth-child(-n + 27),
.sudoku-cell:nth-child(n + 46):nth-child(-n + 54) {
  border-bottom-width: 3px;
  border-bottom-color: var(--line);
}

.sudoku-cell:nth-child(n + 73) {
  border-bottom-width: 0;
}

.sudoku-cell.fixed {
  background: var(--fixed);
}

.sudoku-cell.user {
  color: #1d4ed8;
}

.sudoku-cell.related {
  background: #f1f5f9;
}

.sudoku-cell.same-value {
  background: var(--player);
  color: #1e40af;
}

.sudoku-cell.selected {
  background: var(--player);
  outline: 3px solid #2563eb;
  outline-offset: -4px;
}

.sudoku-cell.box-complete {
  background: #ecfdf5;
}

.minesweeper-board {
  width: min(100%, calc(100dvh - 260px), calc((100vw - 24px) / var(--cols) * var(--cols)), 760px);
  max-width: min(100%, 760px);
  justify-self: center;
  align-self: start;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  border: 3px solid var(--line);
  background: var(--line);
  gap: 1px;
  touch-action: manipulation;
}

.minesweeper-cell {
  aspect-ratio: 1 / 1;
  min-width: 0;
  min-height: 0;
  border: 0;
  display: grid;
  place-items: center;
  background: #dbe3f0;
  color: var(--ink);
  font-weight: 900;
  font-size: clamp(0.62rem, calc(13vw / var(--cols) + 0.45rem), 1.25rem);
  line-height: 1;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.minesweeper-cell.closed {
  background: #dbe3f0;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.75), inset 0 -2px 0 rgba(23, 32, 51, 0.16);
}

.minesweeper-cell.open {
  background: #ffffff;
  box-shadow: none;
}

.minesweeper-cell.flagged {
  background: var(--player);
  color: #1d4ed8;
}

.minesweeper-cell.correct-flag {
  background: #dcfce7;
  color: #15803d;
  box-shadow: inset 0 0 0 4px rgba(21, 128, 61, 0.32);
}

.minesweeper-cell.wrong-flag {
  background: #fee2e2;
  color: #991b1b;
  box-shadow: inset 0 0 0 4px rgba(185, 28, 28, 0.35);
}

.minesweeper-cell.mine {
  background: #fecaca;
  color: #991b1b;
}

.minesweeper-cell.exploded-mine {
  background: #fecaca;
  color: #991b1b;
  outline: 4px solid #b91c1c;
  outline-offset: -5px;
  animation: wrong 260ms ease-out;
}

.minesweeper-cell.n1 { color: #1d4ed8; }
.minesweeper-cell.n2 { color: #15803d; }
.minesweeper-cell.n3 { color: #b91c1c; }
.minesweeper-cell.n4 { color: #4338ca; }
.minesweeper-cell.n5 { color: #9a3412; }
.minesweeper-cell.n6 { color: #0f766e; }
.minesweeper-cell.n7 { color: #111827; }
.minesweeper-cell.n8 { color: #64748b; }

.sudoku-cell.box-complete.same-value {
  background: var(--player);
}

.sudoku-cell.digit-flash {
  animation: sudokuDigitFlash 620ms ease-out;
}

.sudoku-cell.box-flash {
  animation: sudokuBoxFlash 700ms ease-out;
}

.sudoku-cell.wrong-shake {
  animation: sudokuWrongShake 360ms ease-in-out;
}

.sudoku-cell.victory-flash {
  animation: sudokuVictoryFlash 900ms ease-out;
}

.sudoku-pad {
  width: min(100%, 620px);
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 8px;
}

.sudoku-pad-button {
  min-width: 0;
  min-height: 46px;
  border: 0;
  border-radius: 8px;
  background: #e5eaf3;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

.sudoku-pad-button.clear {
  color: #b91c1c;
}

.sudoku-pad-button.complete {
  background: #eef2f7;
  color: #98a2b3;
  opacity: 0.62;
}

.sudoku-pad-button.digit-flash {
  animation: sudokuPadFlash 620ms ease-out;
}

.battlefield {
  width: min(100%, 1100px);
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}

.pass-panel {
  width: min(100%, 560px);
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 28px;
  margin: 18px 0;
  border: 2px solid rgba(37, 99, 235, 0.18);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
  text-align: center;
}

.pass-panel.hidden {
  display: none;
}

.pass-panel h2,
.pass-panel p {
  margin: 0;
}

.pass-panel h2 {
  font-size: 1.6rem;
}

.pass-panel p {
  color: var(--muted);
  font-weight: 800;
}

.battle-panel {
  display: grid;
  gap: 8px;
}

.battle-panel h2 {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  text-align: center;
}

.fleet-status {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 700;
}

.fleet-status-label {
  width: 100%;
  text-align: center;
  line-height: 1;
}

.fleet-group,
.fleet-ship {
  display: inline-flex;
  align-items: center;
}

.fleet-group {
  gap: 4px;
}

.fleet-ship {
  gap: 1px;
  padding: 2px;
  border-radius: 4px;
  background: #bfdbfe;
  border: 1px solid rgba(36, 49, 73, 0.28);
}

.fleet-ship span {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: #2563eb;
}

.fleet-ship.sunk {
  background: #f1f5f9;
  border-color: rgba(100, 116, 139, 0.22);
}

.fleet-ship.sunk span {
  background: #94a3b8;
  opacity: 0.42;
}

.ship-picker {
  width: min(100%, 760px);
  justify-self: center;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: -4px 0 12px;
}

.ship-picker-button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 7px 9px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #e8eef8;
  color: var(--ink);
  font-weight: 800;
}

.ship-picker-button span {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: #60a5fa;
}

.ship-picker-button.selected {
  border-color: #2563eb;
  background: #dbeafe;
}

.ship-picker-button.placed {
  background: #dcfce7;
}

.battleship-setup-controls.hidden,
.ship-picker.hidden {
  display: none;
}

.battle-board {
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-rows: repeat(10, minmax(0, 1fr));
  border: 2px solid var(--line);
  background: var(--line);
  gap: 1px;
  overflow: hidden;
}

.battle-cell {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  border: 0;
  padding: 0;
  background: #ffffff;
  color: var(--ink);
  display: grid;
  place-items: center;
  font: inherit;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

.battle-cell.ship {
  background: #bfdbfe;
}

.battle-cell.setup-selected {
  box-shadow: inset 0 0 0 4px #2563eb;
}

.battle-cell.revealed-ship {
  background: #bfdbfe;
  box-shadow: inset 0 0 0 3px #2563eb;
}

.battle-cell.revealed-ship::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 3px;
  background: rgba(37, 99, 235, 0.22);
}

.battle-cell.hit {
  background: #fecaca;
  color: #991b1b;
}

.battle-cell.miss {
  background: #e2e8f0;
  color: #64748b;
}

.battle-cell.safe-water {
  background: #e2e8f0;
}

.battle-cell.hit::after {
  content: "×";
  color: #991b1b;
  font-size: clamp(1rem, 3.1vw, 1.45rem);
  font-weight: 800;
  line-height: 1;
}

.battle-cell.miss::after,
.battle-cell.safe-water::after {
  content: "";
  width: clamp(5px, 26%, 10px);
  height: clamp(5px, 26%, 10px);
  border-radius: 999px;
  background: #64748b;
}

.battle-cell.sunk {
  background: #fecaca;
  border: 0 solid #991b1b;
}

.battle-cell.sunk::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 2px;
  background: rgba(153, 27, 27, 0.08);
  pointer-events: none;
}

.battle-cell.sunk-left {
  border-left-width: 3px;
}

.battle-cell.sunk-right {
  border-right-width: 3px;
}

.battle-cell.sunk-top {
  border-top-width: 3px;
}

.battle-cell.sunk-bottom {
  border-bottom-width: 3px;
}

.battle-cell.sunk-horizontal:not(.sunk-left):not(.sunk-right) {
  box-shadow: -1px 0 0 #fecaca, 1px 0 0 #fecaca;
}

.battle-cell.sunk-horizontal.sunk-left:not(.sunk-right) {
  box-shadow: 1px 0 0 #fecaca;
}

.battle-cell.sunk-horizontal.sunk-right:not(.sunk-left) {
  box-shadow: -1px 0 0 #fecaca;
}

.battle-cell.sunk-vertical:not(.sunk-top):not(.sunk-bottom) {
  box-shadow: 0 -1px 0 #fecaca, 0 1px 0 #fecaca;
}

.battle-cell.sunk-vertical.sunk-top:not(.sunk-bottom) {
  box-shadow: 0 1px 0 #fecaca;
}

.battle-cell.sunk-vertical.sunk-bottom:not(.sunk-top) {
  box-shadow: 0 -1px 0 #fecaca;
}

.battle-cell:disabled {
  cursor: default;
  opacity: 1;
}

.battle-cell.battle-flash {
  animation: battleFlash 620ms ease-out;
}

.boxes-board {
  --cells: 9;
  width: min(100%, 620px, calc(100dvh - 190px));
  aspect-ratio: 1 / 1;
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(var(--cells), minmax(0, 1fr));
  grid-template-rows: repeat(var(--cells), minmax(0, 1fr));
  border: 2px solid var(--line);
  background: #ffffff;
  padding: 8px;
}

.boxes-dot,
.boxes-edge,
.boxes-box {
  min-width: 0;
  min-height: 0;
}

.boxes-dot {
  width: 36%;
  height: 36%;
  place-self: center;
  border-radius: 999px;
  background: var(--line);
  z-index: 3;
}

.boxes-edge {
  position: relative;
  z-index: 2;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.boxes-edge::before {
  content: "";
  position: absolute;
  inset: 39% 8%;
  border-radius: 999px;
  background: #d8dee8;
}

.boxes-edge.vertical::before {
  inset: 8% 39%;
}

.boxes-edge.player::before {
  background: #2563eb;
}

.boxes-edge.computer::before {
  background: #d97706;
}

.boxes-edge:disabled {
  cursor: default;
}

.boxes-box {
  display: grid;
  place-items: center;
  border-radius: 4px;
  color: var(--ink);
  font-weight: 800;
  font-size: clamp(0.8rem, 3vw, 1.6rem);
}

.boxes-box.player {
  background: rgba(37, 99, 235, 0.22);
}

.boxes-box.computer {
  background: rgba(217, 119, 6, 0.24);
}

.boxes-box.box-flash {
  animation: boxClaim 620ms ease-out;
}

.five-board {
  --size: 10;
  width: min(100%, 720px, calc(100dvh - 210px));
  aspect-ratio: 1 / 1;
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(var(--size), minmax(0, 1fr));
  grid-template-rows: repeat(var(--size), minmax(0, 1fr));
  border: 2px solid var(--line);
  background: var(--line);
  gap: 1px;
}

.five-cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  border: 0;
  padding: 0;
  display: grid;
  place-items: center;
  background: #ffffff;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.five-cell:disabled {
  cursor: default;
  opacity: 1;
}

.five-cell.player {
  background: #fee2e2;
}

.five-cell.computer {
  background: #dbeafe;
}

.five-cell.player::before,
.five-cell.player::after {
  content: "";
  position: absolute;
  width: 58%;
  height: 10%;
  border-radius: 999px;
  background: #b91c1c;
}

.five-cell.player::before {
  transform: rotate(45deg);
}

.five-cell.player::after {
  transform: rotate(-45deg);
}

.five-cell.computer::before {
  content: "";
  width: 48%;
  height: 48%;
  border: clamp(3px, 0.7vw, 6px) solid #2563eb;
  border-radius: 999px;
}

.five-cell.last {
  box-shadow: inset 0 0 0 4px #60a5fa;
}

.five-cell.five-flash {
  animation: fivePulse 520ms ease-out;
}

.dots-board {
  --size: 9;
  width: min(100%, 680px, calc(100dvh - 210px));
  aspect-ratio: 1 / 1;
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(var(--size), minmax(0, 1fr));
  grid-template-rows: repeat(var(--size), minmax(0, 1fr));
  border: 2px solid var(--line);
  background:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    #ffffff;
  background-size: calc(100% / var(--size)) calc(100% / var(--size));
  padding: 1px;
}

.dots-cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  border: 0;
  padding: 0;
  display: grid;
  place-items: center;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.dots-cell:disabled {
  cursor: default;
  opacity: 1;
}

.dots-cell.captured-player {
  background: rgba(37, 99, 235, 0.16);
}

.dots-cell.captured-computer {
  background: rgba(217, 119, 6, 0.18);
}

.dots-cell::before {
  content: "";
  width: 22%;
  height: 22%;
  border-radius: 999px;
  background: #cbd5e1;
  opacity: 0.7;
}

.dots-cell.dot-player::before {
  width: 42%;
  height: 42%;
  background: #2563eb;
  opacity: 1;
}

.dots-cell.dot-computer::before {
  width: 42%;
  height: 42%;
  background: #d97706;
  opacity: 1;
}

.dots-cell.last {
  box-shadow: inset 0 0 0 4px #60a5fa;
}

.dots-cell.dots-flash {
  animation: fivePulse 620ms ease-out;
}

.balda-board {
  --size: 5;
  width: min(100%, 560px, calc(100dvh - 260px));
  aspect-ratio: 1 / 1;
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(var(--size), minmax(0, 1fr));
  grid-template-rows: repeat(var(--size), minmax(0, 1fr));
  border: 2px solid var(--line);
  background: var(--line);
  gap: 2px;
  touch-action: none;
}

.balda-cell {
  min-width: 0;
  min-height: 0;
  border: 0;
  padding: 0;
  display: grid;
  place-items: center;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-size: clamp(1.35rem, 10vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.balda-cell.filled {
  background: var(--fixed);
}

.balda-cell.empty {
  background: #ffffff;
}

.balda-cell.selected-letter-cell {
  background: var(--player);
  box-shadow: inset 0 0 0 4px #2563eb;
}

.balda-cell.selected-path {
  background: #dbeafe;
}

.balda-cell.hint-path {
  background: #dcfce7;
}

.balda-cell.selected-letter-cell.selected-path {
  background: #fef3c7;
}

.balda-cell.last {
  box-shadow: inset 0 0 0 4px #60a5fa;
}

.balda-cell.balda-flash {
  animation: baldaFlash 620ms ease-out;
}

.balda-cell:disabled {
  cursor: default;
  opacity: 1;
}

.balda-history {
  width: min(100%, 560px);
  justify-self: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
}

.balda-history.empty {
  align-items: center;
}

.balda-history-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 8px;
  background: #dbeafe;
  color: #1d4ed8;
  white-space: nowrap;
}

.balda-history-chip.computer {
  background: #fee2e2;
  color: #991b1b;
}

.balda-pad {
  width: min(100%, 560px);
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
}

.balda-letter {
  min-width: 0;
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  background: #e5eaf3;
  color: var(--ink);
  font: inherit;
  font-size: 0.98rem;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
}

.balda-letter.selected {
  background: var(--button);
  color: var(--button-ink);
}

.balda-letter:disabled {
  cursor: default;
  opacity: 0.62;
}

.sos-pad {
  width: min(100%, 320px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.sos-letter {
  min-height: 46px;
  border: 0;
  border-radius: 8px;
  background: #e5eaf3;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
}

.sos-letter.selected {
  background: var(--button);
  color: var(--button-ink);
}

.sos-board {
  --size: 6;
  width: min(100%, 600px, calc(100dvh - 250px));
  aspect-ratio: 1 / 1;
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(var(--size), minmax(0, 1fr));
  grid-template-rows: repeat(var(--size), minmax(0, 1fr));
  border: 2px solid var(--line);
  background: var(--line);
  gap: 2px;
}

.sos-cell {
  min-width: 0;
  min-height: 0;
  border: 0;
  padding: 0;
  display: grid;
  place-items: center;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-size: clamp(1.25rem, 8vw, 2.25rem);
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.sos-cell.player {
  background: #fee2e2;
  color: #991b1b;
}

.sos-cell.computer {
  background: #dbeafe;
  color: #1e40af;
}

.sos-cell.last {
  box-shadow: inset 0 0 0 4px #60a5fa;
}

.sos-cell.sos-flash {
  animation: sosFlash 700ms ease-out;
}

.sos-cell:disabled {
  cursor: default;
  opacity: 1;
}

.tictactoe-board {
  width: min(100%, 480px, calc(100dvh - 220px));
  aspect-ratio: 1 / 1;
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  border: 3px solid var(--line);
  background: var(--line);
  gap: 3px;
}

.tictactoe-cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  border: 0;
  padding: 0;
  display: grid;
  place-items: center;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-size: clamp(2.4rem, 19vw, 5rem);
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.tictactoe-cell.player {
  background: #fee2e2;
  color: #991b1b;
  padding-bottom: 0.07em;
}

.tictactoe-cell.computer {
  background: #dbeafe;
  color: #1e40af;
  padding-bottom: 0.09em;
  font-weight: 900;
  -webkit-text-stroke: 0.035em currentColor;
  text-shadow: 0 0 0 currentColor;
}

.tictactoe-cell.last {
  box-shadow: inset 0 0 0 5px #60a5fa;
}

.tictactoe-cell.win {
  animation: tictactoeWin 760ms ease-out;
  background: #bbf7d0;
  color: var(--ink);
}

.tictactoe-cell:disabled {
  cursor: default;
  opacity: 1;
}

@keyframes placed {
  from {
    transform: scale(0.92);
  }
  to {
    transform: scale(1);
  }
}

@keyframes fivePulse {
  0% {
    transform: scale(0.9);
  }
  55% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes wrong {
  0%,
  100% {
    background: var(--surface);
  }
  50% {
    background: var(--wrong);
  }
}

@keyframes sudokuWrongShake {
  0%,
  100% {
    transform: translateX(0);
    background: #ffffff;
  }
  20%,
  60% {
    transform: translateX(-5px);
    background: var(--wrong);
  }
  40%,
  80% {
    transform: translateX(5px);
    background: var(--wrong);
  }
}

@keyframes sudokuDigitFlash {
  0%,
  100% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.08);
    background: #fde68a;
  }
}

@keyframes sudokuBoxFlash {
  0%,
  100% {
    box-shadow: inset 0 0 0 0 rgba(34, 197, 94, 0);
  }
  45% {
    background: #bbf7d0;
    box-shadow: inset 0 0 0 4px rgba(34, 197, 94, 0.38);
  }
}

@keyframes sudokuPadFlash {
  0%,
  100% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.08);
    background: #fde68a;
    color: var(--ink);
    opacity: 1;
  }
}

@keyframes sudokuVictoryFlash {
  0% {
    transform: scale(0.98);
  }
  45% {
    background: #d9f99d;
  }
  100% {
    transform: scale(1);
  }
}

@keyframes battleFlash {
  0%,
  100% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.05);
    box-shadow: inset 0 0 0 3px rgba(37, 99, 235, 0.35);
  }
}

@keyframes boxClaim {
  0% {
    transform: scale(0.84);
  }
  55% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes baldaFlash {
  0%,
  100% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.06);
    background: #bbf7d0;
  }
}

@keyframes sosFlash {
  0%,
  100% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.06);
    background: #bbf7d0;
    color: var(--ink);
  }
}

@keyframes tictactoeWin {
  0%,
  100% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.07);
  }
}

@media (max-width: 560px) {
  .app-shell {
    padding: 10px;
  }

  .home-screen {
    min-height: calc(100dvh - 20px);
    gap: 18px;
    padding-top: 8px;
  }

  .game-cards {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .game-card {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 12px;
    padding: 10px;
  }

  .game-card-body strong {
    font-size: 1.1rem;
  }

  .game-card-body span {
    font-size: 0.9rem;
  }

  .game-screen,
  .sudoku-screen,
  .battleship-screen,
  .minesweeper-screen,
  .boxes-screen,
  .five-screen,
  .dots-screen,
  .balda-screen,
  .sos-screen,
  .tictactoe-screen {
    min-height: calc(100dvh - 20px);
    gap: 6px;
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
    gap: 6px;
    padding: 4px 0;
  }

  .status-row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
  }

  .status-row .level-label {
    grid-column: 1;
    grid-row: 1;
  }

  .status-row .difficulty-label {
    grid-column: 2;
    grid-row: 1;
  }

  .progress-label {
    grid-column: 1 / 3;
    grid-row: 2;
  }

  #stats-button {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  #daily-button {
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
  }

  #sound-button {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
  }

  #snake-game-home-button {
    grid-column: 4;
    grid-row: 2;
    justify-self: end;
  }

  #sudoku-home-button {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  #sudoku-sound-button {
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
  }

  #battleship-home-button {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  #battleship-sound-button {
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
  }

  #minesweeper-home-button {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  #minesweeper-sound-button {
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
  }

  #boxes-home-button,
  #five-home-button,
  #dots-home-button,
  #balda-home-button,
  #sos-home-button,
  #tictactoe-home-button {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  #boxes-sound-button,
  #five-sound-button,
  #dots-sound-button,
  #balda-sound-button,
  #sos-sound-button,
  #tictactoe-sound-button {
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
  }

  .difficulty-label {
    min-height: 26px;
    padding: 0 8px;
  }

  .level-row,
  .play-row,
  .action-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    flex-wrap: wrap;
    gap: 6px;
  }

  .minesweeper-topbar .level-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  }

  .text-button {
    min-height: 38px;
    padding: 0 8px;
  }

  .level-select {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 38px;
  }

  .online-panel {
    grid-template-columns: 1fr 92px;
    gap: 6px;
  }

  .online-lobby {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .online-lobby > * {
    min-width: 0;
    max-width: 100%;
  }

  .online-lobby label:first-of-type,
  .online-lobby-score,
  .online-lobby-draws,
  .online-lobby-players,
  .online-lobby-proposal {
    grid-column: 1 / -1;
  }

  .online-lobby-draws {
    text-align: left;
  }

  .online-lobby input,
  .online-lobby select,
  .online-lobby button {
    min-height: 38px;
  }

  .online-panel .text-button {
    min-height: 38px;
  }

  .online-input {
    min-height: 38px;
  }

  .room-code {
    grid-column: 1 / -1;
    font-size: 0.9rem;
  }

  #easier-button {
    grid-column: 1;
    grid-row: 2;
  }

  #harder-button {
    grid-column: 3;
    grid-row: 2;
  }

  #minesweeper-easier-button {
    grid-column: 1;
    grid-row: 2;
  }

  #minesweeper-harder-button {
    grid-column: 2;
    grid-row: 2;
  }

  #minesweeper-new-button {
    grid-column: 3;
    grid-row: 2;
  }

  #minesweeper-flag-button {
    grid-column: 1 / -1;
  }

  .play-row .next-label,
  .play-row .metric-label {
    grid-column: 1 / -1;
  }

  #refresh-button {
    grid-column: 1;
    grid-row: 1;
  }

  #hint-button {
    grid-column: 2;
    grid-row: 1;
    min-height: 38px;
    padding: 0 12px;
  }

  #undo-button {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  #print-button {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  #sudoku-check-button {
    grid-column: 1;
    grid-row: 1;
  }

  #sudoku-hint-button {
    grid-column: 2;
    grid-row: 1;
  }

  #sudoku-undo-button {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .icon-button {
    width: 38px;
    min-height: 38px;
  }

  .message {
    min-height: 20px;
    font-size: 0.9rem;
  }

  .tutorial-panel {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px;
    text-align: left;
  }

  .tutorial-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .board {
    width: min(100%, calc(100dvh - 285px));
  }

  .game-screen.tutorial-active .board {
    width: min(100%, 330px, calc(100dvh - 285px));
  }

  .game-screen.tutorial-active .level-row {
    display: none;
  }

  .sudoku-board {
    width: min(100%, calc(100dvh - 330px));
  }

  .minesweeper-board {
    width: min(100%, calc(100dvh - 330px), 96vw);
  }

  .sudoku-cell {
    font-size: clamp(1rem, 6.4vw, 1.7rem);
  }

  .sudoku-pad {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
  }

  .sudoku-pad-button {
    min-height: 40px;
  }

  .battlefield {
    width: min(100%, 430px);
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .battle-panel {
    gap: 5px;
  }

  .battle-panel h2 {
    font-size: 0.92rem;
  }

  .battle-cell {
    font-size: 0.95rem;
  }

  .boxes-board,
  .five-board,
  .dots-board,
  .balda-board,
  .sos-board,
  .tictactoe-board {
    width: min(100%, calc(100dvh - 210px));
  }

  .four-board,
  .reversi-board,
  .tanks-board {
    width: min(100%, calc(100dvh - 210px));
  }

  .balda-pad {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 4px;
  }

  .balda-letter {
    min-height: 32px;
    font-size: 0.84rem;
  }

  .sos-pad {
    width: 100%;
    grid-column: 1 / -1;
  }

  .sos-letter {
    min-height: 40px;
  }

  .result-panel,
  .stats-panel,
  .rules-panel {
    padding: 18px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }
}

@media print {
  @page {
    margin: 12mm;
  }

  body {
    background: #ffffff;
    color: #111827;
  }

  .app-shell {
    display: block;
    min-height: auto;
    padding: 0;
  }

  .home-screen,
  .start-screen,
  .game-screen,
  .sudoku-screen,
  .battleship-screen,
  .boxes-screen,
  .five-screen,
  .dots-screen,
  .balda-screen,
  .sos-screen,
  .tictactoe-screen,
  .result-modal,
  .stats-modal,
  .rules-modal,
  .confetti-canvas {
    display: none !important;
  }

  .print-sheet {
    display: grid !important;
    justify-items: center;
    gap: 6mm;
    break-inside: avoid;
  }

  .print-sheet h1 {
    font-size: 22pt;
    line-height: 1.1;
    margin: 0;
  }

  .print-sheet p {
    margin: 0;
    font-size: 12pt;
  }

  .print-board {
    width: 180mm;
  }
}