/* Spielaro games: shared chrome + 2048 */
.sp-game {
  --g-ink: var(--sp-ink, #1d2033);
  --g-blue: var(--sp-blue, #2346c8);
  --g-blue-deep: var(--sp-blue-deep, #19329a);
  max-width: max(18rem, min(30rem, calc(100vh - 15rem)));
  margin: 0 auto;
}
.sp-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.sp-game__bar, .sp-game__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem;
}
.sp-game__bar { margin-bottom: .875rem; }
.sp-game__foot { margin-top: .875rem; }
.sp-game__modes { display: inline-flex; border: 2px solid var(--g-ink); border-radius: 999px; padding: 2px; }
.sp-game__mode {
  font: 600 .9375rem/1 var(--sp-font-display, system-ui, sans-serif);
  border: 0; border-radius: 999px; padding: .5rem .9rem; background: transparent; color: var(--g-ink); cursor: pointer;
}
.sp-game__mode[aria-pressed="true"] { background: var(--g-ink); color: #fff; }
.sp-game__scores { display: flex; gap: .5rem; margin: 0; }
.sp-game__scores div { min-width: 5.5rem; padding: .35rem .7rem; border-radius: 10px; background: #eceef5; text-align: right; }
.sp-game__scores dt { font-size: .75rem; color: #4a5163; }
.sp-game__scores dd { margin: 0; font: 800 1.25rem/1.2 var(--sp-font-display, system-ui, sans-serif); font-variant-numeric: tabular-nums; }
.sp-game__help { margin: 0; font-size: .9375rem; color: #4a5163; max-width: 26rem; }
.sp-game__restart {
  font: 600 .9375rem/1 var(--sp-font-display, system-ui, sans-serif);
  border: 2px solid var(--g-ink); border-radius: 10px; padding: .55rem .9rem; background: #fff; color: var(--g-ink); cursor: pointer;
}
.sp-game__restart:hover { background: var(--g-ink); color: #fff; }
.sp-game--soon { padding: 3rem 1.5rem; border: 2px dashed #c4c9d8; border-radius: 16px; text-align: center; color: #4a5163; }

/* 2048 board sits on the same cobalt "table" as the homepage. */
.g2048__board {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(6px, 2vw, 12px);
  padding: clamp(6px, 2vw, 12px);
  aspect-ratio: 1;
  border-radius: 18px;
  background: var(--g-blue-deep);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.g2048__board:focus-visible { outline: 3px solid #de3f2c; outline-offset: 3px; }
.g2048__cell {
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, .12);
  font: 800 clamp(1.25rem, 6vw, 2.25rem)/1 var(--sp-font-display, system-ui, sans-serif);
  font-variant-numeric: tabular-nums;
  color: var(--g-ink);
}
.g2048__tile { box-shadow: 0 3px 0 rgba(0, 0, 0, .22); }
.g2048__tile.v2    { background: #f6f1e4; }
.g2048__tile.v4    { background: #ede1c3; }
.g2048__tile.v8    { background: #f3c98b; }
.g2048__tile.v16   { background: #f0a866; }
.g2048__tile.v32   { background: #d9663f; color: #fff; }
.g2048__tile.v64   { background: #c2432a; color: #fff; }
.g2048__tile.v128  { background: #ecd57e; font-size: clamp(1.1rem, 5vw, 1.9rem); }
.g2048__tile.v256  { background: #e6c252; font-size: clamp(1.1rem, 5vw, 1.9rem); }
.g2048__tile.v512  { background: #ddb02b; font-size: clamp(1.1rem, 5vw, 1.9rem); }
.g2048__tile.v1024 { background: #1e7f55; color: #fff; font-size: clamp(.95rem, 4.2vw, 1.6rem); }
.g2048__tile.v2048 { background: #c9302c; color: #fff; font-size: clamp(.95rem, 4.2vw, 1.6rem); }
.g2048__tile.v4096 { background: #1d2033; color: #fff; font-size: clamp(.95rem, 4.2vw, 1.6rem); }
.g2048__tile.is-new { animation: g2048-pop .16s ease-out; }
.g2048__tile.is-merged { animation: g2048-bump .14s ease-out; }
@keyframes g2048-pop { from { transform: scale(.4); opacity: .3; } to { transform: scale(1); opacity: 1; } }
@keyframes g2048-bump { 50% { transform: scale(1.1); } }
.g2048__over {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  border-radius: 18px; background: rgba(25, 50, 154, .86); color: #fff;
}
.g2048__over p { margin: 0; font: 700 1.25rem/1.3 var(--sp-font-display, system-ui, sans-serif); }
.g2048__over .g2048__final { font-size: 2.25rem; font-weight: 800; }
@media (prefers-reduced-motion: reduce) {
  .g2048__tile.is-new, .g2048__tile.is-merged { animation: none; }
}

/* ---------- Shared chrome (options, actions, overlay) ---------- */
.sp-game__inner { position: relative; }
.sp-game__body { position: relative; }
.sp-game__bar--opts { margin-top: -.25rem; }
.sp-game__bar[hidden] { display: none; }
.sp-game__options { display: inline-flex; flex-wrap: wrap; gap: .4rem; }
.sp-game__opt {
  font: 600 .875rem/1 var(--sp-font-display, system-ui, sans-serif);
  border: 1px solid #c4c9d8; border-radius: 999px; padding: .45rem .8rem; background: #fff; color: var(--g-ink); cursor: pointer;
}
.sp-game__opt[aria-pressed="true"] { border-color: var(--g-ink); box-shadow: inset 0 0 0 1px var(--g-ink); }
.sp-game__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.sp-game__restart[aria-pressed="true"], .sp-game__restart.is-primary { background: var(--g-ink); color: #fff; }
.sp-game__restart[hidden] { display: none; }
.sp-game__overlay {
  position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1rem;
  background: rgba(251, 251, 248, .8); border-radius: 18px;
}
.sp-game__overlay-card {
  max-width: 22rem; padding: 1.25rem 1.5rem; text-align: center;
  background: #fff; border: 2px solid var(--g-ink); border-radius: 16px; box-shadow: 0 12px 32px rgba(20, 30, 80, .2);
}
.sp-game__overlay-title { margin: 0 0 .35rem; font: 800 1.5rem/1.2 var(--sp-font-display, system-ui, sans-serif); }
.sp-game__overlay-line { margin: 0 0 1rem; color: #4a5163; }
.sp-game__overlay-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.is-nope { animation: sp-nope .3s; }
@keyframes sp-nope { 25% { translate: -4px 0; } 75% { translate: 4px 0; } }

/* Shared "table" surface (same cobalt as the homepage). */
.sp-game--solitaer .sp-game__body, .sp-game--mahjong .sp-game__body, .sp-game--freecell .sp-game__body, .sp-game--spider-solitaer .sp-game__body {
  padding: clamp(.5rem, 2vw, 1rem); border-radius: 18px;
  background-color: var(--g-blue);
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 16px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 16px);
}
.sp-game.sp-game--solitaer, .sp-game.sp-game--mahjong, .sp-game.sp-game--freecell { max-width: 56rem; }
.sp-game.sp-game--sudoku { max-width: max(18rem, min(32rem, calc(100vh - 19rem))); }
.sp-game.sp-game--minesweeper { max-width: 36rem; }
.sp-game.sp-game--wortspiel { max-width: 32rem; }

/* ---------- Vier gewinnt ---------- */
.sp-game.sp-game--vier-gewinnt { max-width: 32rem; }
.sp-game--vier-gewinnt .sp-game__scores { width: 100%; }
.sp-game--vier-gewinnt .sp-game__scores div { flex: 1; min-width: 0; }
.vg__panel { padding: .8rem; border: 1px solid #d8deec; background: #f0f3fa; border-radius: 18px; }
.vg__players { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .7rem; }
.vg__players > span { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .6rem; border: 2px solid transparent; border-radius: 10px; color: #4a5163; }
.vg__players b { font: 600 .85rem/1.2 var(--sp-font-display, system-ui, sans-serif); }
.vg__players > .is-active { border-color: var(--g-ink); background: #fff; color: var(--g-ink); }
.vg__token { position: relative; display: inline-block; width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; }
.vg__token--one { background: #d94a40; }
.vg__token--two { background: #edc45a; }
.vg__token--one::after, .vg__slot.is-one::before { content: ''; position: absolute; width: 22%; height: 22%; top: 39%; left: 39%; border-radius: 50%; background: #fff; }
.vg__token--two::after, .vg__slot.is-two::before { content: ''; position: absolute; width: 22%; height: 22%; top: 39%; left: 39%; background: #68490b; transform: rotate(45deg); }
.vg__board { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(4px, 1vw, 7px); padding: 8px 10px 12px; border-radius: 14px; background: linear-gradient(150deg, #2d50cd, #19329a); box-shadow: 0 5px 0 #132773; }
.vg__column { min-width: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #fff; cursor: pointer; touch-action: manipulation; }
.vg__entry { display: flex; align-items: center; justify-content: center; gap: .2rem; height: 30px; margin-bottom: 6px; border-radius: 6px; color: #dce4ff; font: 600 .8rem/1 system-ui, sans-serif; }
.vg__entry > span { font-size: 1rem; }
.vg__column:not(:disabled):hover .vg__entry, .vg__column.is-selected:not(:disabled) .vg__entry { color: #fff; background: rgba(255,255,255,.17); }
.vg__column:focus-visible { outline: 3px solid #ffe1a0; outline-offset: 3px; }
.vg__column.is-hint { outline: 3px solid #ffe1a0; outline-offset: 2px; }
.vg__column.is-hint .vg__entry { background: #ffe1a0; color: #1d2033; }
.vg__column:disabled { cursor: default; }
.vg__column:disabled .vg__entry { opacity: .4; }
.vg__board[aria-busy="true"] .vg__column { cursor: wait; }
.vg__slots { display: grid; grid-template-rows: repeat(6, 1fr); gap: clamp(4px, 1vw, 7px); }
.vg__slot { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; background: #102776; box-shadow: inset 0 2px 3px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.18); }
.vg__slot.is-one { background: radial-gradient(circle at 37% 30%, #ee6d60, #c83d34 75%); box-shadow: inset 0 0 0 3px rgba(100,19,19,.2), 0 2px 2px rgba(0,0,0,.25); }
.vg__slot.is-two { background: radial-gradient(circle at 37% 30%, #ffe59a, #e2ae35 75%); box-shadow: inset 0 0 0 3px rgba(124,86,12,.2), 0 2px 2px rgba(0,0,0,.25); }
.vg__slot.is-last { outline: 1px dashed #fff; outline-offset: -5px; }
.vg__slot.is-winning { outline: 3px solid #abf0c7; outline-offset: -3px; }
.vg__slot.is-new { animation: vg-drop .2s ease-out; }
@keyframes vg-drop { from { transform: translateY(-12px); opacity: .3; } to { transform: translateY(0); opacity: 1; } }
.vg__meta { display: flex; justify-content: space-between; margin-top: 1rem; color: #5c6780; font: 600 .75rem/1.3 system-ui, sans-serif; }
.vg__status { margin: .6rem 0 .1rem; min-height: 2.8em; color: #273451; font-size: .875rem; line-height: 1.4; }
.sp-game--vier-gewinnt .sp-game__restart:disabled { opacity: .45; cursor: default; background: transparent; color: var(--g-ink); }
.sp-game--vier-gewinnt .sp-game__overlay { align-items: start; padding-top: 4rem; }
@media (max-width: 400px) { .vg__panel { padding: .6rem; } .vg__board { padding-inline: 7px; } .vg__players > span { padding: .3rem; } .vg__players b { font-size: .75rem; } }
@media (prefers-reduced-motion: reduce) { .vg__slot.is-new { animation: none; } }

/* ---------- Nonogramm ---------- */
.sp-game.sp-game--nonogramm { max-width: 42rem; }
.ng__panel { container-type: inline-size; padding: 1rem; border: 1px solid #d5dbea; border-radius: 18px; background: #f0f3fa; }
.ng__tools { display: flex; flex-wrap: wrap; gap: .45rem; }
.ng__tools button, .ng__hint button { min-height: 42px; padding: .55rem .8rem; border: 1px solid #b2bcd4; border-radius: 9px; background: #fff; color: var(--g-ink); font: 600 .875rem/1.2 var(--sp-font-display, system-ui, sans-serif); cursor: pointer; }
.ng__tools button[aria-pressed="true"] { background: var(--g-blue-deep); color: #fff; border-color: var(--g-blue-deep); }
.ng__intro { margin: .8rem 0 1rem; color: #4a5163; font-size: .875rem; line-height: 1.5; }
.ng__scroll { max-width: 100%; overflow: auto; padding: 4px 0; overscroll-behavior-x: contain; border-radius: 6px; }
.ng__grid { --cell: clamp(26px, calc((100cqw - var(--clue-width) - 4px) / var(--n)), 42px); width: calc(var(--clue-width) + var(--n) * var(--cell)); margin: 0 auto; table-layout: fixed; border-collapse: separate; border-spacing: 0; user-select: none; -webkit-user-select: none; }
.ng__grid th, .ng__grid td { box-sizing: border-box; }
.ng__corner { position: sticky; left: 0; z-index: 4; width: var(--clue-width); padding: .4rem; color: #64708a; font: 600 .7rem/1.2 system-ui, sans-serif; background: #f0f3fa; text-align: center; vertical-align: bottom; }
.ng__clue { color: #273451; font: 700 .85rem/1.3 var(--sp-font-display, system-ui, sans-serif); background: #e5eaf5; }
.ng__clue--col { width: var(--cell); padding: 8px 2px; vertical-align: bottom; border-left: 1px solid #d1d8e8; }
.ng__clue--col span { display: block; min-height: 18px; text-align: center; }
.ng__clue--row { position: sticky; left: 0; z-index: 3; width: var(--clue-width); padding: 0 5px; text-align: right; white-space: nowrap; border-top: 1px solid #d1d8e8; }
.ng__clue--row span { display: inline-block; width: 18px; text-align: center; }
.ng__clue.is-complete { color: #286b4e; background: #deeee4; }
.ng__clue.is-conflict { color: #8e2c19; background: #ffe2d7; }
.ng__square { width: var(--cell); height: var(--cell); padding: 0; border-top: 1px solid #bbc5d9; border-left: 1px solid #bbc5d9; background: #fff; }
.ng__square:last-child { border-right: 1px solid #9aa8c3; }
.ng__grid tr:last-child .ng__square { border-bottom: 1px solid #9aa8c3; }
.ng__square.ng__block-top { border-top: 2px solid #7583a0; }
.ng__square.ng__block-left { border-left: 2px solid #7583a0; }
.ng__cell { display: grid; place-items: center; box-sizing: border-box; width: 100%; height: calc(var(--cell) - 1px); padding: 0; border: 0; border-radius: 0; background: #fff; color: #68738c; font: 400 1.25rem/1 system-ui, sans-serif; cursor: pointer; touch-action: manipulation; }
.ng__cell.is-filled { background: var(--g-blue-deep); color: #fff; }
.ng__cell.is-crossed { background: #f6f8fc; }
.ng__cell.is-selected { box-shadow: inset 0 0 0 2px #bd7500; }
.ng__cell:focus-visible, .ng__cell.is-hint { outline: 3px solid #efb831; outline-offset: -3px; }
.ng__tools button:focus-visible, .ng__hint button:focus-visible, .ng__scroll:focus-visible { outline: 3px solid #bd7500; outline-offset: 2px; }
.ng__status { min-height: 2.8em; margin: .9rem 0 .4rem; color: #273451; font-size: .875rem; line-height: 1.45; }
.ng__keys, .ng__scroll-note { font-size: .75rem; line-height: 1.5; color: #56627a; margin: .4rem 0 0; }
.ng__hint { padding: .8rem; margin: .8rem 0 0; border: 1px solid #e8bd57; border-radius: 10px; background: #fff6dc; }
.ng__hint p { margin: 0 0 .65rem; font-size: .875rem; line-height: 1.5; }
.ng__hint button + button { margin-left: .4rem; }
.ng__hint[hidden], .ng__scroll-note[hidden] { display: none; }
.sp-game--nonogramm .sp-game__restart:disabled { opacity: .45; cursor: default; background: transparent; color: var(--g-ink); }
.sp-game--nonogramm .sp-game__overlay { align-items: start; padding-top: 3rem; }
@media (max-width: 639px) {
  .ng__panel { padding: .65rem; }
  .sp-game--nonogramm .sp-game__scores { width: 100%; }
  .sp-game--nonogramm .sp-game__scores div { flex: 1; min-width: 0; }
  .ng__tools { gap: .35rem; }
  .ng__tools button { padding-inline: .65rem; }
}

/* ---------- Bubble Shooter ---------- */
.sp-game.sp-game--bubble-shooter { max-width: 24rem; }
.sp-game--bubble-shooter .sp-game__bar { gap: .75rem; }
.sp-game--bubble-shooter .sp-game__scores { width: 100%; }
.sp-game--bubble-shooter .sp-game__scores div { flex: 1; min-width: 0; }
.bs__panel { border-radius: 18px; overflow: hidden; background: linear-gradient(155deg, #2b4cc6, #172b80); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.bs__ceiling { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .8rem 1rem .65rem; color: #fff; font-size: .8rem; }
.bs__misses { display: flex; gap: 5px; }
.bs__misses i { width: 10px; height: 10px; border: 1px solid #fff; border-radius: 50%; background: #f3d785; }
.bs__misses i.is-used { background: transparent; opacity: .45; }
.bs__board { touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; margin: 0 8px; border-radius: 12px; }
.bs__board:focus-visible { outline: 3px solid #f3d785; outline-offset: 2px; }
.bs__board svg { display: block; width: 100%; height: auto; overflow: visible; }
.bs__bubble text { font-family: system-ui, sans-serif; font-weight: 800; pointer-events: none; }
.bs__aim-line { fill: none; stroke: #fff; stroke-width: 2.5; stroke-dasharray: 2 9; stroke-linecap: round; opacity: .6; }
.bs__landing { fill: rgba(255,255,255,.12); stroke: #fff; stroke-width: 2; stroke-dasharray: 3 4; }
.bs__danger { stroke: #e5a6b9; stroke-dasharray: 5 6; stroke-width: 1.2; opacity: .7; }
.bs__line-label { fill: #e6b6c4; font: 600 9px system-ui, sans-serif; letter-spacing: 1.5px; }
.bs__tray-label { fill: #dce5ff; font: 600 10px system-ui, sans-serif; letter-spacing: 1.5px; }
.bs__status { margin: 0; padding: .45rem 1rem .85rem; min-height: 3.4rem; color: #fff; font-size: .85rem; line-height: 1.4; }
.bs__controls { display: flex; gap: .6rem; margin-top: .75rem; }
.bs__turn, .bs__fire { min-height: 44px; border: 2px solid var(--g-ink); border-radius: 10px; padding: .65rem 1rem; color: var(--g-ink); background: #fff; font: 700 1rem/1 var(--sp-font-display, system-ui, sans-serif); cursor: pointer; }
.bs__turn { flex: 0 0 3.75rem; font-size: 1.25rem; }
.bs__fire { flex: 1; background: var(--g-ink); color: #fff; }
.bs__turn:hover { background: #eceef5; }
.bs__fire:hover { background: var(--g-blue-deep); }
.bs__controls button:disabled { opacity: .45; cursor: default; }
.bs__controls button:focus-visible { outline: 3px solid #bf3f2d; outline-offset: 3px; }
.bs__hint { margin: .55rem 0 0; text-align: center; color: #4a5163; font-size: .8rem; }
.sp-game--bubble-shooter .sp-game__overlay { align-items: start; padding-top: clamp(2rem, 15vw, 6rem); }
@media (max-width: 360px) {
  .bs__ceiling { padding-inline: .65rem; font-size: .75rem; }
  .bs__misses { gap: 4px; }
  .bs__status { padding-inline: .65rem; }
}

/* ---------- Minesweeper ---------- */
.ms__board { display: grid; gap: 2px; padding: 2px; background: #b9c1d9; border-radius: 10px; }
.ms__row { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 2px; }
.ms__cell {
  display: grid; place-items: center; aspect-ratio: 1; padding: 0; border: 0; border-radius: 3px; cursor: pointer;
  background: #3a5bd6; color: #fff; font: 800 clamp(.7rem, 3.2vw, 1.05rem)/1 var(--sp-font-display, system-ui, sans-serif);
}
.ms__cell:hover { background: #4b6ae0; }
.ms__cell.is-open { background: #f6f4ee; color: var(--g-ink); cursor: default; }
.ms__cell.n1 { color: #2346c8; } .ms__cell.n2 { color: #1e7f55; } .ms__cell.n3 { color: #c9302c; } .ms__cell.n4 { color: #19329a; }
.ms__cell.n5 { color: #8f1f1c; } .ms__cell.n6 { color: #0f766e; } .ms__cell.n7, .ms__cell.n8 { color: #1d2033; }
.ms__cell.is-flag { color: #ffd166; }
.ms__cell.is-mine { background: #e9e4d6; color: var(--g-ink); }
.ms__cell.is-boom { background: #de3f2c; color: #fff; }
.ms__cell:focus-visible { outline: 3px solid #de3f2c; outline-offset: -2px; }

/* ---------- Sudoku ---------- */
.sd__board { display: grid; aspect-ratio: 1; overflow: hidden; background: #fff; border: 3px solid var(--g-ink); border-radius: 8px; }
.sd__row { display: grid; grid-template-columns: repeat(9, 1fr); }
.sd__cell {
  position: relative; display: grid; place-items: center; padding: 0; border: 0; cursor: pointer;
  border-right: 1px solid #d9dce5; border-bottom: 1px solid #d9dce5; background: #fff; color: var(--g-blue);
  font: 500 clamp(1.05rem, 5vw, 1.6rem)/1 var(--sp-font-display, system-ui, sans-serif);
}
.sd__row .sd__cell:nth-child(3n) { border-right: 2px solid var(--g-ink); }
.sd__row .sd__cell:last-child { border-right: 0; }
.sd__row:nth-child(3n) .sd__cell { border-bottom: 2px solid var(--g-ink); }
.sd__row:last-child .sd__cell { border-bottom: 0; }
.sd__cell.is-given { color: var(--g-ink); font-weight: 700; }
.sd__cell.is-peer { background: #eef1fb; }
.sd__cell.is-same { background: #d6defa; }
.sd__cell.is-sel { background: #b4c3f5; }
.sd__cell.is-conflict { color: #c9302c; background: #fbe3df; }
.sd__cell:focus-visible { outline: 3px solid #de3f2c; outline-offset: -3px; }
.sd__notes { display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); width: 100%; height: 100%; font: 500 clamp(.45rem, 1.8vw, .65rem)/1 var(--sp-font-display, system-ui, sans-serif); color: #4a5163; }
.sd__notes span { display: grid; place-items: center; }
.sd__pad { display: grid; grid-template-columns: repeat(9, 1fr); gap: .35rem; margin-top: .75rem; }
.sd__pad button { padding: .7rem 0; border: 1px solid #c4c9d8; border-radius: 8px; background: #fff; color: var(--g-ink); font: 700 1.2rem/1 var(--sp-font-display, system-ui, sans-serif); cursor: pointer; }
.sd__pad button:hover { border-color: var(--g-ink); }
.sd__pad [data-k="notes"] { grid-column: span 5; font-size: 1rem; }
.sd__pad [data-k="clear"] { grid-column: span 4; font-size: 1rem; }
.sd__pad [aria-pressed="true"] { background: var(--g-ink); color: #fff; }

/* ---------- Wortspiel ---------- */
.ws__grid { display: grid; gap: .4rem; max-width: 20rem; margin: 0 auto; }
.ws__row { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; }
.ws__tile {
  display: grid; place-items: center; aspect-ratio: 1; border: 2px solid #d9dce5; border-radius: 8px; background: #fff; color: var(--g-ink);
  font: 800 clamp(1.3rem, 6vw, 1.9rem)/1 var(--sp-font-display, system-ui, sans-serif);
}
.ws__tile.has-letter { border-color: #4a5163; }
.ws__tile.s2, .ws__key.s2 { background: #1e7f55; border-color: #1e7f55; color: #fff; }
.ws__tile.s1, .ws__key.s1 { background: #e6c252; border-color: #e6c252; color: var(--g-ink); }
.ws__tile.s0, .ws__key.s0 { background: #8a90a3; border-color: #8a90a3; color: #fff; }
.ws__msg { min-height: 1.5rem; margin: .6rem 0; text-align: center; font-size: .95rem; color: #4a5163; }
.ws__kb { display: grid; gap: .35rem; }
.ws__kbrow { display: flex; justify-content: center; gap: .3rem; }
.ws__key {
  flex: 1 1 0; min-width: 0; max-width: 2.6rem; padding: .85rem 0; border: 0; border-radius: 6px; cursor: pointer;
  background: #e3e6ef; color: var(--g-ink); font: 700 1rem/1 var(--sp-font-display, system-ui, sans-serif);
}
.ws__key--wide { flex: 1.7 1 0; max-width: 4.6rem; font-size: .8rem; }

/* ---------- Solitär ---------- */
.so__board { container-type: inline-size; }
.so__top, .so__tab {
  --gap: clamp(4px, 1.4cqw, 12px); --cw: calc((100cqw - 6 * var(--gap)) / 7);
  display: grid; grid-template-columns: repeat(7, var(--cw)); gap: var(--gap);
}
.so__tab { margin-top: calc(var(--cw) * .3); }
.so__slot { position: relative; width: var(--cw); height: calc(var(--cw) * 1.4); border-radius: calc(var(--cw) * .1); }
.so__stock, .so__found { border: 2px dashed rgba(255, 255, 255, .35); }
.so__stock { padding: 0; background: transparent; cursor: pointer; }
.so__stock.has-cards { border-color: transparent; }
.so__col { height: calc(var(--h) * var(--cw)); }
.so__col::before {
  content: ""; position: absolute; left: 0; top: 0; width: var(--cw); height: calc(var(--cw) * 1.4);
  border-radius: calc(var(--cw) * .1); border: 2px dashed rgba(255, 255, 255, .22);
}
.so__card {
  position: absolute; left: 0; top: calc(var(--y, 0) * var(--cw)); z-index: 1;
  width: var(--cw); height: calc(var(--cw) * 1.4); padding: 0; margin: 0;
  border: 1px solid #c9cfdf; border-radius: calc(var(--cw) * .1); background: #fff; color: var(--g-ink);
  font: 700 calc(var(--cw) * .25)/1 var(--sp-font-display, system-ui, sans-serif);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
.so__card.is-red { color: #c9302c; }
.so__corner { position: absolute; top: 5%; left: 8%; text-align: center; line-height: 1; }
.so__pip { position: absolute; inset: 0; display: grid; place-items: center; padding-top: 18%; font-size: calc(var(--cw) * .55); }
.so__card.is-back {
  border: 2px solid #fff; background-color: #19329a; cursor: default;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 2px, transparent 2px 7px), repeating-linear-gradient(-45deg, rgba(255,255,255,.18) 0 2px, transparent 2px 7px);
}
.so__stock .so__card.is-back { top: 0; cursor: pointer; }
.so__card.is-dragging { z-index: 50; cursor: grabbing; box-shadow: 0 12px 24px rgba(0, 0, 0, .35); }
.so__card:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; }
.so__fan[data-fan="1"] { left: calc(var(--cw) * .22); }
.so__fan[data-fan="2"] { left: calc(var(--cw) * .44); }
.so__ghost { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .4); font-size: calc(var(--cw) * .5); }
.so__recycle { display: grid; place-items: center; height: 100%; color: #fff; font-size: calc(var(--cw) * .5); }

/* ---------- FreeCell: eight columns, four cells, four foundations ---------- */
.fc__board { container-type: inline-size; }
.fc__layout { --fc-gap: clamp(3px, .8cqw, 8px); --cw: calc((100cqw - 7 * var(--fc-gap)) / 8); }
.fc__labels { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: .5rem; color: #fff; font: 500 .875rem/1.3 var(--sp-font-display, system-ui, sans-serif); }
.fc__labels span:last-child { text-align: right; }
.fc__top, .fc__tableau { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--fc-gap); }
.fc__tableau { margin-top: clamp(1rem, 3cqw, 1.75rem); }
.fc__pile { position: relative; height: calc(var(--cw) * 1.4); min-height: 44px; border-radius: calc(var(--cw) * .1); }
.fc__column { height: calc(var(--cw) * var(--h)); }
.fc__empty { position: absolute; inset: 0 auto auto 0; width: 100%; height: calc(var(--cw) * 1.4); min-height: 44px; padding: 0; border: 2px dashed rgba(255,255,255,.55); border-radius: calc(var(--cw) * .1); color: rgba(255,255,255,.85); background: rgba(0,0,0,.07); cursor: pointer; font: 500 clamp(.875rem, 2cqw, 1.25rem)/1 var(--sp-font-display, system-ui, sans-serif); }
.fc__empty[aria-hidden="true"] { visibility: hidden; }
.fc__foundation { font-size: calc(var(--cw) * .48); }
.fc__card { font-size: clamp(.8rem, calc(var(--cw) * .23), 1.5rem); }
.fc__card .so__corner { display: flex; gap: .12em; align-items: center; }
.fc__card.is-selected { background: #fff2c4; border-color: #ffd166; box-shadow: inset 0 0 0 2px #e6a724; }
.fc__pile.is-target { outline: 3px solid #88e2b4; outline-offset: 1px; }
.fc__empty:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; }
.fc__card.is-drag-origin { opacity: .25; }
.fc__drag { position: fixed; z-index: 10000; pointer-events: none; width: var(--cw); }
.fc__drag .so__card { box-shadow: 0 10px 20px rgba(0,0,0,.3); color: #1d2033; }
.fc__drag .so__card.is-red { color: #c9302c; }
.fc__status { margin: .875rem 0 0; min-height: 2.6em; color: #fff; font-size: .875rem; line-height: 1.3; }
.sp-game--freecell .sp-game__restart:disabled { opacity: .45; cursor: default; background: transparent; color: var(--g-ink); }
@media (max-width: 480px) {
  .sp-game--freecell .sp-game__body { padding: .5rem; border-radius: 12px; }
  .fc__card .so__corner { left: 5%; }
  .fc__labels { font-size: .75rem; }
}

/* ---------- Spider Solitär ---------- */
.sp-game.sp-game--spider-solitaer { max-width: 64rem; }
.spider__board { container-type: inline-size; }
.spider__top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem; margin-bottom: .8rem; }
.spider__stock { display: flex; align-items: center; gap: .65rem; min-height: 56px; padding: .3rem .6rem .3rem .2rem; border: 0; border-radius: 9px; background: transparent; color: #fff; text-align: left; cursor: pointer; font: 600 .875rem/1.25 var(--sp-font-display, system-ui, sans-serif); }
.spider__stock small { display: block; margin-top: .15rem; font-size: .75rem; font-weight: 400; color: #e1e8ff; }
.spider__stock-icon { display: block; width: 34px; height: 46px; border: 2px solid #fff; border-radius: 5px; background: repeating-linear-gradient(45deg, #19329a 0 4px, #3a55b5 4px 6px); box-shadow: 3px 2px 0 #19329a, 5px 3px 0 #fff; }
.spider__stock:disabled { opacity: .5; cursor: default; }
.spider__stock:focus-visible, .spider__stock.is-hint { outline: 3px solid #ffd166; outline-offset: 3px; }
.spider__runs { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; width: clamp(9rem, 28cqw, 18rem); }
.spider__run { display: grid; place-items: center; aspect-ratio: .72; border: 1px dashed rgba(255,255,255,.5); border-radius: 4px; color: rgba(255,255,255,.7); font: 600 .75rem/1 system-ui, sans-serif; }
.spider__run.is-done { background: #fff; color: #1d2033; border-style: solid; }
.spider__run.is-red { color: #c9302c; }
.spider__layout { --cols: 10; --gap: clamp(4px, .8cqw, 8px); --cw: calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols)); display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 1.1rem var(--gap); align-items: start; }
.spider__column { border-radius: 6px; }
.spider__column-label { display: block; width: 100%; min-height: 25px; margin: 0 0 4px; padding: 2px; border: 0; border-radius: 4px; background: rgba(0,0,0,.12); color: #fff; font: 600 .75rem/1.2 var(--sp-font-display, system-ui, sans-serif); cursor: pointer; }
.spider__column-label:focus-visible { outline: 3px solid #ffd166; outline-offset: 1px; }
.spider__pile { position: relative; height: calc(var(--cw) * var(--h)); }
.spider__empty { position: absolute; inset: 0 auto auto 0; width: 100%; height: calc(var(--cw) * 1.4); border: 2px dashed rgba(255,255,255,.4); border-radius: calc(var(--cw) * .1); }
.spider__card { font-size: clamp(.8rem, calc(var(--cw) * .23), 1.4rem); }
.spider__card .so__corner { display: flex; gap: .1em; align-items: center; }
.spider__card.is-back { touch-action: pan-y; }
.spider__card.is-selected { background: #fff2c4; border-color: #ffd166; box-shadow: inset 0 0 0 2px #e6a724; }
.spider__column.is-target { outline: 3px solid #88e2b4; outline-offset: 1px; }
.spider__column.is-hint-target { outline-color: #ffd166; }
.spider__column.is-hint-target .spider__column-label { background: #ffd166; color: #1d2033; }
.spider__card.is-drag-origin { opacity: .25; }
.spider__drag { position: fixed; z-index: 10000; pointer-events: none; width: var(--cw); }
.spider__drag .so__card { box-shadow: 0 10px 20px rgba(0,0,0,.3); color: #1d2033; }
.spider__drag .so__card.is-red { color: #c9302c; }
.spider__status { margin: 1rem 0 0; min-height: 2.8em; color: #fff; font-size: .875rem; line-height: 1.4; }
.spider__mobile-note { display: none; }
.sp-game--spider-solitaer .sp-game__restart:disabled { opacity: .45; cursor: default; background: transparent; color: var(--g-ink); }
@media (max-width: 639px) {
  .spider__layout { --cols: 5; --gap: 6px; }
  .spider__mobile-note { display: block; margin: .25rem 0 .65rem; color: #e1e8ff; font-size: .75rem; }
  .sp-game--spider-solitaer .sp-game__scores { width: 100%; }
  .sp-game--spider-solitaer .sp-game__scores div { flex: 1; min-width: 0; }
  .sp-game--spider-solitaer .sp-game__body { padding: .5rem; }
  .spider__column-label { min-height: 30px; }
}

/* ---------- Mahjong ---------- */
.mj__board { position: relative; width: 100%; container-type: inline-size; }
.mj__tile {
  position: absolute; padding: 0; border: 0; border-radius: 9% / 7%; cursor: pointer;
  background: #f6f1e4; box-shadow: -.5cqw .5cqw 0 #dccfac, -.9cqw .9cqw 0 #1e7f55;
}
.mj__tile svg { display: block; width: 88%; height: 88%; margin: 6%; pointer-events: none; }
.mj__tile:not(.is-free) { filter: brightness(.82) saturate(.8); cursor: default; }
.mj__tile.is-sel { background: #ffe08a; outline: 3px solid #de3f2c; outline-offset: -1px; }
.mj__tile.is-hint { outline: 3px solid #ffd166; outline-offset: 1px; }
.mj__tile:focus-visible { outline: 3px solid #fff; outline-offset: 1px; }

/* ---------- Calculators ---------- */
.sp-game.sp-calc { max-width: none; margin: 0 0 2rem; }
.calc__group { margin: 0 0 1.25rem; padding: 1rem 1.25rem 1.1rem; border: 1px solid #d9dce5; border-radius: 14px; background: #fff; }
.calc legend { padding: 0 .4rem; font: 700 1.15rem/1.2 var(--sp-font-display, system-ui, sans-serif); color: var(--g-ink); }
.calc__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem 1rem; }
.calc label { display: flex; flex-direction: column; gap: .3rem; font-size: .95rem; color: #4a5163; }
.calc input, .calc select {
  width: 100%; padding: .55rem .7rem; border: 1px solid #c4c9d8; border-radius: 8px; background: #fff; color: var(--g-ink);
  font: inherit; font-size: 1.05rem;
}
.calc__out { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .5rem 1rem; margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid #e3e6ef; }
.calc__out dt { font-size: .875rem; color: #4a5163; }
.calc__out dd { margin: 0; font: 800 1.35rem/1.25 var(--sp-font-display, system-ui, sans-serif); color: var(--g-ink); }
.calc__wide { grid-column: 1 / -1; }
.calc__out--big { margin: 0 0 1rem; padding: 1rem 1.25rem; border: 0; border-radius: 14px; background: #f4eedf; }
.calc__out--big dd { font-size: 1.75rem; }
.calc__hint { margin: .6rem 0 0; font-size: .875rem; color: #4a5163; }
.calc__note { font-size: .95rem; color: #4a5163; }
.calc__bars { display: flex; align-items: flex-end; gap: 2px; height: 6rem; margin-top: 1rem; }
.calc__bar { flex: 1; min-height: 1px; height: calc(var(--h) * 100%); border-radius: 2px 2px 0 0; background: #b4c3f5; }
.calc__bar.is-hit { background: #2346c8; }

@media (prefers-reduced-motion: reduce) { .is-nope { animation: none; } }
.calc legend + .calc__out { margin-top: .25rem; padding-top: 0; border-top: 0; }