: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,
.boxes-screen,
.five-screen,
.dots-screen,
.balda-screen,
.sos-screen,
.tictactoe-screen {
  width: min(100%, 860px);
}

.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;
}

.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);
}

.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-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;
}

.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,
  .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;
  }

  #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;
  }

  .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-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;
  }

  .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));
  }

  .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));
  }

  .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;
  }
}