@import url("./board-pieces.css");
/* In-game visual themes — angular, category-distinct, coherent */

.game-shell {
  --play-bg: #101820;
  --play-board: #182430;
  --play-cell: #ffffff;
  --play-accent: #1fb8a8;
  --play-accent2: #e15a3c;
  --play-ball: #e9c46a;
  --play-hazard: #e63946;
  --play-line: rgba(16, 24, 32, 0.14);
  --play-ink: #101820;
  --play-p1: var(--play-accent);
  --play-p2: var(--play-accent2);
  --play-canvas: var(--play-bg);
  --play-radius: 2px;
  --play-offset: 6px;
}

.game-shell .game-title {
  line-height: 1.2;
  padding-block: 0.08em 0.12em;
  overflow: visible;
}

.game-shell .game-sub {
  line-height: 1.45;
}

.game-shell .panel {
  border-radius: var(--play-radius);
  border-color: color-mix(in srgb, var(--play-accent) 36%, var(--line));
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--play-accent) 9%, transparent),
      transparent 42%
    ),
    linear-gradient(
      320deg,
      color-mix(in srgb, var(--play-accent2) 5%, transparent),
      transparent 38%
    ),
    var(--surface, rgba(255, 255, 255, 0.78));
  box-shadow:
    var(--shadow, 0 20px 50px rgba(16, 24, 32, 0.09)),
    var(--play-offset) var(--play-offset) 0 color-mix(in srgb, var(--play-accent) 18%, transparent);
}

.game-shell #stage {
  min-height: 220px;
  border-radius: var(--play-radius);
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(
      120% 80% at 50% 0%,
      color-mix(in srgb, var(--play-accent) 12%, transparent),
      transparent 55%
    ),
    radial-gradient(
      80% 60% at 88% 100%,
      color-mix(in srgb, var(--play-accent2) 8%, transparent),
      transparent 50%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--play-board) 38%, transparent),
      transparent 70%
    );
  padding: 0.45rem 0.2rem 0.65rem;
}

.game-shell .hint {
  margin-top: 0.75rem;
  padding: 0.45rem 0.65rem;
  border-left: 3px solid color-mix(in srgb, var(--play-accent) 70%, transparent);
  background: color-mix(in srgb, var(--play-accent) 6%, transparent);
  color: var(--muted, #5a6a72);
  font-size: 0.92rem;
  line-height: 1.45;
}

.game-shell #arena {
  position: relative;
  width: min(100%, 420px);
  height: min(52vw, 280px);
  margin: 0.5rem auto;
  overflow: hidden;
  border-radius: var(--play-radius);
  border: 2px solid color-mix(in srgb, var(--play-accent) 48%, transparent);
  background:
    radial-gradient(
      circle at 50% 40%,
      color-mix(in srgb, var(--play-accent) 14%, transparent),
      transparent 55%
    ),
    repeating-linear-gradient(
      -18deg,
      transparent 0 14px,
      rgba(255, 255, 255, 0.03) 14px 15px
    ),
    var(--play-board);
  box-shadow:
    5px 5px 0 color-mix(in srgb, var(--play-accent2) 26%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  cursor: crosshair;
  touch-action: manipulation;
}

.game-shell .target {
  position: absolute;
  transform: translate(-50%, -50%);
  border: 2px solid #fff;
  border-radius: 50%;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background:
    radial-gradient(circle at 35% 30%, #fff 0 18%, transparent 19%),
    radial-gradient(
      circle,
      var(--play-hazard) 0 28%,
      #fff 29% 38%,
      var(--play-hazard) 39% 55%,
      #fff 56% 64%,
      var(--play-accent) 65%
    );
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.28);
  animation: mg-target-pop 0.28s var(--ease-out, ease-out);
  z-index: 2;
}

.game-shell .target:active {
  transform: translate(-50%, -50%) scale(0.92);
}

@keyframes mg-target-pop {
  from {
    transform: translate(-50%, -50%) scale(0.55);
    opacity: 0.4;
  }
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

.game-shell #bar {
  position: relative;
  height: 32px;
  margin: 1rem 0 0.85rem;
  overflow: hidden;
  border-radius: var(--play-radius);
  border: 2px solid color-mix(in srgb, var(--play-accent) 42%, transparent);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.06), transparent 40%),
    rgba(0, 0, 0, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.game-shell #bar #zone,
.game-shell #bar .zone {
  position: absolute;
  top: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--play-accent) 52%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.game-shell #bar #needle,
.game-shell #bar .mark {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  margin-left: -2px;
  background: var(--play-hazard);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

.game-shell #board,
.game-shell #grid,
.game-shell .board,
.game-shell .pegs {
  display: grid;
  gap: 6px;
  margin: 0 auto;
  width: min(100%, 400px);
  padding: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 38%),
    repeating-linear-gradient(
      -18deg,
      transparent 0 18px,
      rgba(255, 255, 255, 0.03) 18px 19px
    ),
    radial-gradient(
      90% 70% at 50% 0%,
      color-mix(in srgb, var(--play-accent) 16%, transparent),
      transparent 55%
    ),
    var(--play-board);
  border: 2px solid color-mix(in srgb, var(--play-accent) 48%, transparent);
  border-radius: var(--play-radius);
  box-shadow:
    var(--play-offset) var(--play-offset) 0 color-mix(in srgb, var(--play-accent) 28%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}

.game-shell .cell,
.game-shell .opt,
.game-shell .chip,
.game-shell .tile,
.game-shell .pad,
.game-shell .slot,
.game-shell .face {
  border: 1px solid var(--play-line);
  border-radius: var(--play-radius) !important;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.62), transparent 55%),
    var(--play-cell);
  color: var(--play-ink);
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.12s var(--ease-out), background 0.15s, box-shadow 0.15s,
    border-color 0.15s;
  box-shadow:
    inset -2px -2px 0 rgba(0, 0, 0, 0.07),
    inset 1px 1px 0 rgba(255, 255, 255, 0.35);
}

.game-shell .cell {
  aspect-ratio: 1;
  padding: 0;
}

.game-shell .cell:hover,
.game-shell .opt:hover,
.game-shell .pad:hover {
  transform: translateY(-1px) skewX(-0.5deg);
  border-color: color-mix(in srgb, var(--play-accent) 55%, var(--play-line));
  box-shadow:
    inset -2px -2px 0 rgba(0, 0, 0, 0.07),
    2px 2px 0 color-mix(in srgb, var(--play-accent) 22%, transparent);
}

.game-shell .cell:active,
.game-shell .opt:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.game-shell .cell.p1,
.game-shell .cell.on,
.game-shell .chip.on,
.game-shell .pad.is-go,
.game-shell .sel,
.game-shell .filled {
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.22), transparent 48%),
    var(--play-p1) !important;
  color: #fff !important;
  border-color: transparent;
  box-shadow:
    3px 3px 0 rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.game-shell .cell.p2,
.game-shell .enemy,
.game-shell .bad {
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.18), transparent 48%),
    var(--play-p2) !important;
  color: #fff !important;
  box-shadow:
    3px 3px 0 rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.game-shell .cell.hint,
.game-shell .hint-cell {
  outline: 2px solid var(--play-ball);
  outline-offset: -2px;
}

.game-shell canvas {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.04), transparent 40%),
    var(--play-canvas);
  border-radius: var(--play-radius) !important;
  border: 2px solid color-mix(in srgb, var(--play-accent) 48%, transparent);
  box-shadow:
    6px 6px 0 color-mix(in srgb, var(--play-accent2) 28%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  image-rendering: auto;
}

.game-shell .row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: center;
  margin-top: 0.7rem;
}

.game-shell .big {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 6vw, 2.3rem);
  text-align: center;
  line-height: 1.2;
  color: var(--play-ink);
  padding-block: 0.05em;
  overflow: visible;
}

.game-shell .cups {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: flex-end;
  min-height: 130px;
}

.game-shell .cup {
  width: 70px;
  height: 88px;
  border-radius: 0 !important;
  background: linear-gradient(180deg, var(--play-ball), var(--play-accent2));
  border: 2px solid #fff;
  cursor: pointer;
  position: relative;
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
}

.game-shell .cup .ball {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  border-radius: 0 !important;
  background: var(--play-hazard);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.22);
}

.game-shell .bar-wrap {
  position: relative;
  height: 28px;
  border-radius: var(--play-radius) !important;
  background: rgba(0, 0, 0, 0.12);
  overflow: hidden;
  margin: 1rem 0;
  border: 1px solid var(--play-line);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.game-shell .zone {
  position: absolute;
  top: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--play-accent) 48%, transparent);
}

.game-shell .mark {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--play-hazard);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.game-shell input.mg-inp,
.game-shell .nums button,
.game-shell .keypad button {
  border-radius: var(--play-radius) !important;
}

/* category accents */
.game-shell[data-cat="memory"] .panel {
  background-image: repeating-linear-gradient(
    -18deg,
    transparent 0 14px,
    color-mix(in srgb, var(--play-accent) 7%, transparent) 14px 15px
  );
}
.game-shell[data-cat="puzzle"] #board,
.game-shell[data-cat="logic"] #board {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 40%),
    var(--play-board);
  background-size: 18px 18px, 18px 18px, auto, auto;
}
.game-shell[data-cat="arcade"] canvas,
.game-shell[data-cat="reflex"] canvas {
  box-shadow:
    8px 8px 0 color-mix(in srgb, var(--play-hazard) 32%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.game-shell[data-cat="strategy"] .cell.p1 {
  clip-path: polygon(50% 6%, 94% 50%, 50% 94%, 6% 50%);
}
.game-shell[data-cat="strategy"] .cell.p2 {
  clip-path: polygon(12% 12%, 88% 12%, 88% 88%, 12% 88%);
}
.game-shell[data-cat="word"] .cell,
.game-shell[data-cat="word"] .chip {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}
.game-shell[data-cat="sports"] canvas {
  border-color: color-mix(in srgb, var(--play-accent) 58%, #fff);
}
.game-shell[data-cat="cards"] .cell {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), var(--play-cell));
  box-shadow:
    inset -2px -2px 0 rgba(0, 0, 0, 0.06),
    1px 1px 0 color-mix(in srgb, var(--play-accent2) 18%, transparent);
}
.game-shell[data-cat="brain"] #board {
  box-shadow:
    6px 6px 0 color-mix(in srgb, var(--play-accent) 38%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.game-shell[data-cat="casual"] .cell:nth-child(odd) {
  background-image: linear-gradient(
    135deg,
    color-mix(in srgb, var(--play-accent) 10%, transparent),
    transparent
  );
}

/* motifs — richer, still quiet */
.game-shell[data-motif="chevron"] #stage {
  background-image:
    repeating-linear-gradient(
      135deg,
      transparent 0 12px,
      color-mix(in srgb, var(--play-accent) 6%, transparent) 12px 13px
    ),
    repeating-linear-gradient(
      45deg,
      transparent 0 24px,
      color-mix(in srgb, var(--play-accent2) 4%, transparent) 24px 25px
    );
}
.game-shell[data-motif="dots"] #stage {
  background-image: radial-gradient(
    color-mix(in srgb, var(--play-accent) 14%, transparent) 1.2px,
    transparent 1.2px
  );
  background-size: 14px 14px;
}
.game-shell[data-motif="stripes"] #stage {
  background-image: repeating-linear-gradient(
    -25deg,
    transparent 0 10px,
    color-mix(in srgb, var(--play-accent) 5%, transparent) 10px 11px
  );
}
.game-shell[data-motif="hex"] #stage {
  background-image:
    radial-gradient(
      circle at 20% 30%,
      color-mix(in srgb, var(--play-accent) 14%, transparent),
      transparent 42%
    ),
    radial-gradient(
      circle at 78% 68%,
      color-mix(in srgb, var(--play-accent2) 10%, transparent),
      transparent 38%
    );
}
.game-shell[data-motif="wave"] #stage {
  background-image: repeating-radial-gradient(
    circle at 50% 120%,
    transparent 0 14px,
    color-mix(in srgb, var(--play-accent) 6%, transparent) 14px 15px
  );
}
.game-shell[data-motif="radar"] #stage {
  background-image:
    radial-gradient(
      circle at 50% 50%,
      transparent 34%,
      color-mix(in srgb, var(--play-accent) 10%, transparent) 35%,
      transparent 54%
    ),
    radial-gradient(
      circle at 50% 50%,
      transparent 58%,
      color-mix(in srgb, var(--play-accent2) 7%, transparent) 59%,
      transparent 72%
    );
}
.game-shell[data-motif="grid"] #stage {
  background-image:
    linear-gradient(color-mix(in srgb, var(--play-accent) 10%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--play-accent) 10%, transparent) 1px, transparent 1px),
    radial-gradient(
      100% 70% at 50% 0%,
      color-mix(in srgb, var(--play-accent) 10%, transparent),
      transparent 55%
    );
  background-size: 20px 20px, 20px 20px, auto;
}
.game-shell[data-motif="blocks"] #stage {
  background-image:
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      color-mix(in srgb, var(--play-accent) 8%, transparent) 0 25%,
      transparent 0 50%
    ),
    radial-gradient(
      circle at 80% 20%,
      color-mix(in srgb, var(--play-accent2) 10%, transparent),
      transparent 40%
    );
  background-size: 28px 28px, auto;
}
.game-shell[data-motif="diamonds"] #stage {
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent 0 10px,
      color-mix(in srgb, var(--play-accent) 7%, transparent) 10px 11px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0 10px,
      color-mix(in srgb, var(--play-accent2) 6%, transparent) 10px 11px
    );
}
.game-shell[data-motif="steps"] #stage {
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0 10px,
    color-mix(in srgb, var(--play-accent) 7%, transparent) 10px 12px,
    transparent 12px 22px
  );
}

/* shape-driven cell accents */
.game-shell[data-shape="diamond"] .cell:not(.p1):not(.p2) {
  clip-path: polygon(50% 4%, 96% 50%, 50% 96%, 4% 50%);
}
.game-shell[data-shape="slash"] .cell {
  transform: skewX(-6deg);
}
.game-shell[data-shape="square"] .cell {
  border-width: 2px;
}
.game-shell[data-shape="ring"] .cell.on,
.game-shell[data-shape="ring"] .cell.p1 {
  box-shadow:
    inset 0 0 0 6px color-mix(in srgb, #fff 35%, transparent),
    3px 3px 0 rgba(0, 0, 0, 0.18);
}

/* tap / flash / coin / dots / rot widgets */
.game-shell .tap-arena {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: 0.75rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--play-accent) 24%, transparent), transparent 52%),
    repeating-linear-gradient(
      -18deg,
      transparent 0 16px,
      rgba(255, 255, 255, 0.04) 16px 17px
    ),
    var(--play-board);
  border: 2px solid color-mix(in srgb, var(--play-accent) 58%, transparent);
  border-radius: var(--play-radius);
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--play-accent2) 32%, transparent);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.game-shell .tap-meter {
  position: absolute;
  inset: 10px;
  border: 1px dashed color-mix(in srgb, var(--play-ball) 55%, transparent);
  pointer-events: none;
}
.game-shell .tap-pad {
  width: 100%;
  z-index: 1;
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
}

.game-shell .flash-pad {
  width: 100%;
  min-height: 170px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.08em;
  color: #fff;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.06), transparent 50%),
    color-mix(in srgb, var(--play-board) 72%, #000);
  border: 2px solid color-mix(in srgb, var(--play-accent) 52%, transparent);
  border-radius: var(--play-radius);
  box-shadow:
    inset 0 0 0 6px rgba(255, 255, 255, 0.05),
    5px 5px 0 color-mix(in srgb, var(--play-accent2) 28%, transparent);
  clip-path: polygon(0 8%, 8% 0, 100% 0, 100% 92%, 92% 100%, 0 100%);
  transition: background 0.12s, transform 0.1s, box-shadow 0.12s;
}
.game-shell .flash-pad.is-go {
  background: var(--play-accent) !important;
  color: #101820;
  /* sharp angular hit — avoid soft glow fighting theme */
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.3);
  animation: mg-flash-pulse 0.55s ease-out;
}
@keyframes mg-flash-pulse {
  0% {
    transform: scale(0.97);
  }
  100% {
    transform: none;
  }
}

.game-shell .coin-stage {
  display: grid;
  place-items: center;
  min-height: 150px;
}
.game-shell .coin-disk {
  width: 110px;
  height: 110px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--play-ink);
  background: linear-gradient(145deg, var(--play-ball), var(--play-accent2));
  border: 3px solid color-mix(in srgb, var(--play-accent) 68%, #fff);
  box-shadow:
    6px 6px 0 rgba(0, 0, 0, 0.28),
    inset -2px -2px 0 rgba(0, 0, 0, 0.14);
  clip-path: polygon(18% 0, 82% 0, 100% 18%, 100% 82%, 82% 100%, 18% 100%, 0 82%, 0 18%);
  transition: transform 0.25s var(--ease-out);
}
.game-shell .coin-disk.is-spin {
  animation: mg-coin-flip 0.28s linear;
}
.game-shell .coin-disk.is-heads {
  background: linear-gradient(145deg, var(--play-accent), var(--play-ball));
}
.game-shell .coin-disk.is-tails {
  background: linear-gradient(145deg, var(--play-accent2), var(--play-hazard));
  color: #fff;
}
@keyframes mg-coin-flip {
  0% {
    transform: rotateY(0) scaleX(1);
  }
  50% {
    transform: rotateY(90deg) scaleX(0.35);
  }
  100% {
    transform: rotateY(0) scaleX(1);
  }
}

.game-shell .hunt-board {
  border: 2px solid color-mix(in srgb, var(--play-accent) 36%, transparent);
  border-radius: var(--play-radius);
  box-shadow: 5px 5px 0 color-mix(in srgb, var(--play-accent2) 18%, transparent);
  padding: 6px;
  background: var(--play-board);
}
.game-shell .hunt-board .hunt-cell {
  border-width: 2px;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.14);
}
.game-shell .hunt-board .hunt-cell:hover {
  outline: 2px solid color-mix(in srgb, #fff 55%, transparent);
  outline-offset: -3px;
}

.game-shell .dot-field {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-content: center;
  min-height: 120px;
  padding: 1rem;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 45%),
    var(--play-board);
  border: 2px solid color-mix(in srgb, var(--play-accent) 40%, transparent);
  border-radius: var(--play-radius);
  box-shadow: 5px 5px 0 color-mix(in srgb, var(--play-accent2) 24%, transparent);
}
.game-shell .dot-field .dot {
  width: 14px;
  height: 14px;
  background: var(--play-ball);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.22);
  animation: mg-dot-in 0.25s ease-out both;
  animation-delay: calc(var(--i, 0) * 12ms);
}
.game-shell[data-shape="diamond"] .dot-field .dot {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.game-shell[data-shape="square"] .dot-field .dot,
.game-shell[data-shape="slash"] .dot-field .dot {
  border-radius: 0;
}
.game-shell[data-shape="circle"] .dot-field .dot,
.game-shell[data-shape="ring"] .dot-field .dot {
  border-radius: 50%;
}
@keyframes mg-dot-in {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.game-shell .rot-card {
  display: grid;
  place-items: center;
  gap: 0.55rem;
  min-height: 150px;
  margin: 0 auto;
  width: min(100%, 240px);
  padding: 1rem;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--play-accent) 18%, transparent), transparent 50%),
    repeating-linear-gradient(
      135deg,
      transparent 0 14px,
      rgba(255, 255, 255, 0.03) 14px 15px
    ),
    var(--play-board);
  border: 2px solid color-mix(in srgb, var(--play-accent) 44%, transparent);
  border-radius: var(--play-radius);
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--play-accent2) 24%, transparent);
}
.game-shell .rot-shape {
  font-size: 3.2rem;
  line-height: 1.1;
  color: var(--play-ball);
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.28);
  /* prompt shape stays unrotated — options carry the angle (spoiler-safe) */
}
.game-shell .rot-label {
  margin: 0.55rem 0 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.35;
  color: color-mix(in srgb, #fff 88%, var(--play-accent));
  border-top: 1px solid color-mix(in srgb, var(--play-accent) 35%, transparent);
  padding-top: 0.55rem;
}

/* shared puzzle / math wrappers for smaller real games */
.game-shell .puzzle-board {
  position: relative;
}
.game-shell .puzzle-board.kenken-board .cell.hint {
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--play-ball) 70%, transparent),
    inset -2px -2px 0 rgba(0, 0, 0, 0.07);
}
.game-shell .puzzle-board.sky-board {
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.game-shell .puzzle-board.futo-board .cell {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}
.game-shell .puzzle-board.lights-board .lights-cell {
  background: color-mix(in srgb, var(--play-board) 55%, #0a1016);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.game-shell .puzzle-board.lights-board .lights-cell.on {
  background: var(--play-ball) !important;
  color: var(--play-ink) !important;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.22);
}
.game-shell .puzzle-board.chimp-board .cell.hide {
  color: transparent !important;
  text-shadow: none;
}
.game-shell .puzzle-board.chimp-board .cell.done {
  background: color-mix(in srgb, var(--play-accent) 55%, var(--play-cell)) !important;
  color: #fff !important;
}

.game-shell .math-card {
  display: grid;
  place-items: center;
  gap: 0.65rem;
  margin: 0 auto;
  width: min(100%, 320px);
  padding: 1.1rem 1rem 1.15rem;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--play-accent) 16%, transparent), transparent 48%),
    repeating-linear-gradient(
      -18deg,
      transparent 0 16px,
      rgba(255, 255, 255, 0.03) 16px 17px
    ),
    var(--play-board);
  border: 2px solid color-mix(in srgb, var(--play-accent) 46%, transparent);
  border-radius: var(--play-radius);
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--play-accent2) 26%, transparent);
}
.game-shell .math-card .big {
  color: color-mix(in srgb, #fff 92%, var(--play-ball));
  margin: 0;
}
.game-shell .hl-card .big {
  min-width: 3.2rem;
  min-height: 3.2rem;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--play-ball), var(--play-accent2));
  color: var(--play-ink);
  border: 2px solid color-mix(in srgb, var(--play-accent) 55%, #fff);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.22);
  clip-path: polygon(12% 0, 88% 0, 100% 12%, 100% 88%, 88% 100%, 12% 100%, 0 88%, 0 12%);
}
.game-shell .silent-card .row {
  width: 100%;
}
.game-shell .count-stage {
  display: grid;
  place-items: center;
  padding: 0.55rem;
  background:
    radial-gradient(
      circle at 50% 40%,
      color-mix(in srgb, var(--play-accent) 12%, transparent),
      transparent 55%
    ),
    var(--play-board);
  border: 2px solid color-mix(in srgb, var(--play-accent) 40%, transparent);
  border-radius: var(--play-radius);
  box-shadow: 5px 5px 0 color-mix(in srgb, var(--play-accent2) 22%, transparent);
}
.game-shell .count-stage canvas {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.game-shell .hunt-wrap {
  display: grid;
  gap: 0.55rem;
  justify-items: center;
}
.game-shell .hunt-wrap .hunt-target {
  margin: 0;
  padding: 0.25rem 0.7rem;
  background: color-mix(in srgb, var(--play-accent) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--play-accent) 48%, transparent);
  border-radius: var(--play-radius);
  letter-spacing: 0.06em;
}

/* On-screen touch pad — angular, coarse/narrow only */
.mg-touchpad {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.65rem 1rem;
  margin: 0.65rem auto 0.15rem;
  width: min(100%, 360px);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.mg-touchpad.mg-touchpad--desk-hide {
  display: none !important;
}

@media (pointer: coarse), (max-width: 900px) {
  .mg-touchpad:not(.mg-touchpad--desk-hide) {
    display: flex;
  }
}

.mg-touchpad__dpad,
.mg-touchpad__actions,
.mg-touchpad__lanes {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mg-touchpad__lanes {
  flex-direction: row;
  width: 100%;
  justify-content: stretch;
  gap: 6px;
}

.mg-touchpad__row {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.mg-touchpad__btn {
  box-sizing: border-box;
  min-width: 48px;
  min-height: 48px;
  margin: 0;
  padding: 0;
  border: 2px solid color-mix(in srgb, var(--play-accent, #1fb8a8) 55%, #101820);
  border-radius: 2px;
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--play-accent, #1fb8a8) 22%, transparent),
      color-mix(in srgb, var(--play-board, #182430) 80%, #101820)
    );
  color: #f2f7f6;
  font: 700 1rem/1 ui-sans-serif, system-ui, sans-serif;
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--play-accent, #1fb8a8) 28%, transparent);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.mg-touchpad__btn.is-down,
.mg-touchpad__btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 color-mix(in srgb, var(--play-accent, #1fb8a8) 28%, transparent);
  background: color-mix(in srgb, var(--play-accent, #1fb8a8) 42%, #101820);
}

.mg-touchpad__spacer {
  display: block;
  width: 48px;
  height: 48px;
}

.mg-touchpad__action {
  min-width: 64px;
  min-height: 64px;
  border-color: color-mix(in srgb, var(--play-accent2, #ef476f) 60%, #101820);
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--play-accent2, #ef476f) 28%, transparent),
      color-mix(in srgb, var(--play-board, #182430) 75%, #101820)
    );
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--play-accent2, #ef476f) 30%, transparent);
  font-size: 1.15rem;
}

.mg-touchpad__lane {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

.mg-touchpad--letters {
  width: min(100%, 420px);
  gap: 0.35rem;
}

.mg-touchpad__letters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  width: 100%;
}

.mg-touchpad__letter {
  flex: 0 0 calc((100% - 36px) / 10);
  min-width: 26px;
  min-height: 34px;
  font-size: 0.78rem;
  letter-spacing: 0;
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--play-accent, #1fb8a8) 28%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .game-shell .cell,
  .game-shell .opt,
  .game-shell .pad,
  .game-shell .flash-pad,
  .game-shell .coin-disk,
  .game-shell .dot-field .dot,
  .game-shell .rot-shape,
  .game-shell .tap-pad {
    transition: none !important;
    animation: none !important;
  }

  .game-shell .cell:hover,
  .game-shell .opt:hover,
  .game-shell .pad:hover,
  .game-shell[data-shape="slash"] .cell {
    transform: none;
  }

  .game-shell[data-shape="slash"] .cell {
    transform: skewX(-6deg);
  }

  .game-shell .flash-pad.is-go,
  .game-shell .coin-disk.is-spin,
  .game-shell .dot-field .dot {
    animation: none !important;
  }

  .mg-touchpad__btn.is-down,
  .mg-touchpad__btn:active {
    transform: none;
  }
}

/* Sudoku-family grids: thin cell lines + thick box bands */
.game-shell #board.sudoku-board,
.game-shell #grid.sudoku-board {
  gap: 0 !important;
  border: 3px solid color-mix(in srgb, var(--play-ink, #101820) 88%, #000);
  background: color-mix(in srgb, var(--play-ink, #101820) 88%, #000);
  border-radius: 2px !important;
  overflow: hidden;
}
.game-shell #board.sudoku-board .cell,
.game-shell #grid.sudoku-board .cell {
  border-radius: 0 !important;
  border: 1px solid color-mix(in srgb, var(--play-ink, #101820) 45%, var(--play-line, #9aa3ad));
  box-shadow: none !important;
  margin: 0;
}
.game-shell #board.sudoku-board .cell.box-r,
.game-shell #grid.sudoku-board .cell.box-r {
  border-right-width: 3px;
  border-right-color: color-mix(in srgb, var(--play-ink, #101820) 88%, #000);
}
.game-shell #board.sudoku-board .cell.box-b,
.game-shell #grid.sudoku-board .cell.box-b {
  border-bottom-width: 3px;
  border-bottom-color: color-mix(in srgb, var(--play-ink, #101820) 88%, #000);
}
.game-shell #board.sudoku-board .cell.fixed,
.game-shell #grid.sudoku-board .cell.fixed {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.35), transparent 55%),
    color-mix(in srgb, var(--play-cell, #fff) 88%, var(--play-line, #ccc));
  font-weight: 900;
}
.game-shell #board.latin-board,
.game-shell #grid.latin-board {
  gap: 1px !important;
  border: 2px solid color-mix(in srgb, var(--play-ink, #101820) 80%, #000);
  background: color-mix(in srgb, var(--play-ink, #101820) 70%, #000);
  border-radius: 2px !important;
  overflow: hidden;
}
.game-shell #board.latin-board .cell,
.game-shell #grid.latin-board .cell,
.game-shell #board.latin-board .tile,
.game-shell #grid.latin-board .tile {
  border-radius: 0 !important;
  border: 1px solid color-mix(in srgb, var(--play-ink, #101820) 45%, var(--play-line, #9aa3ad)) !important;
  box-shadow: none !important;
}

.game-shell #board.clue-board,
.game-shell #grid.clue-board {
  gap: 1px !important;
  border: 2px solid color-mix(in srgb, var(--play-ink, #101820) 80%, #000);
  background: color-mix(in srgb, var(--play-ink, #101820) 55%, #000);
  border-radius: 2px !important;
  overflow: hidden;
  width: min(100%, 420px);
  margin: 0 auto;
}
.game-shell #board.clue-board .cell,
.game-shell #grid.clue-board .cell {
  border-radius: 0 !important;
  border: 1px solid color-mix(in srgb, var(--play-ink, #101820) 45%, var(--play-line, #9aa3ad));
  box-shadow: none !important;
  min-height: 0;
}
.game-shell #board.clue-board .cell.clue,
.game-shell #grid.clue-board .cell.clue {
  background: color-mix(in srgb, var(--play-cell, #f4f6f8) 70%, var(--play-line, #ccd)) !important;
  color: var(--play-ink, #1a1a1a) !important;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: default;
  line-height: 1.15;
  padding: 2px;
  white-space: pre-line;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.game-shell #board.clue-board .cell.clue.col-clue {
  align-items: flex-end;
  justify-content: center;
  text-align: center;
}
.game-shell #board.clue-board .cell.clue.row-clue {
  align-items: center;
  justify-content: flex-end;
  text-align: right;
}
.game-shell #board.clue-board .cell.corner,
.game-shell #grid.clue-board .cell.corner {
  background: transparent !important;
  border-color: transparent;
  cursor: default;
}
.game-shell #board.clue-board .cell.weight,
.game-shell #grid.clue-board .cell.weight {
  background: color-mix(in srgb, var(--play-accent, #3a86ff) 18%, var(--play-cell, #fff)) !important;
  font-size: 0.7rem;
  font-weight: 800;
  cursor: default;
  color: var(--play-ink, #222) !important;
}

.game-shell #board.latin-board .hole,
.game-shell #grid.latin-board .hole {
  border-radius: 0 !important;
  border: 1px solid color-mix(in srgb, var(--play-ink, #101820) 45%, var(--play-line, #9aa3ad)) !important;
  box-shadow: none !important;
}
.game-shell table.latin-board.ng-table {
  border-collapse: collapse;
  border: 2px solid color-mix(in srgb, var(--play-ink, #101820) 80%, #000);
  background: color-mix(in srgb, var(--play-ink, #101820) 70%, #000);
  margin: 0 auto;
}
.game-shell table.latin-board.ng-table td.cell,
.game-shell table.latin-board.ng-table th {
  border: 1px solid color-mix(in srgb, var(--play-ink, #101820) 45%, var(--play-line, #9aa3ad));
  box-shadow: none !important;
}
.game-shell table.latin-board.ng-table th {
  background: color-mix(in srgb, var(--play-cell, #f4f6f8) 70%, var(--play-line, #ccd));
  color: var(--play-ink, #1a1a1a);
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 4px;
  line-height: 1.15;
}
.game-shell .latin-board:not(#board):not(#grid) {
  gap: 1px !important;
  border: 2px solid color-mix(in srgb, var(--play-ink, #101820) 80%, #000);
  background: color-mix(in srgb, var(--play-ink, #101820) 70%, #000);
  border-radius: 2px !important;
  overflow: hidden;
}
.game-shell .latin-board:not(#board):not(#grid) .cell {
  border-radius: 0 !important;
  border: 1px solid color-mix(in srgb, var(--play-ink, #101820) 45%, var(--play-line, #9aa3ad)) !important;
  box-shadow: none !important;
}

.game-shell .sd-board.latin-board {
  gap: 1px !important;
  border: 2px solid color-mix(in srgb, var(--play-ink, #101820) 80%, #000);
  background: color-mix(in srgb, var(--play-ink, #101820) 70%, #000);
  border-radius: 2px !important;
  overflow: hidden;
  display: grid;
}
.game-shell .sd-board.latin-board .cell {
  border-radius: 0 !important;
  border: 1px solid color-mix(in srgb, var(--play-ink, #101820) 45%, var(--play-line, #9aa3ad)) !important;
  box-shadow: none !important;
}
.game-shell #pads.latin-board {
  gap: 1px !important;
  border: 2px solid color-mix(in srgb, var(--play-ink, #101820) 80%, #000);
  background: color-mix(in srgb, var(--play-ink, #101820) 70%, #000);
  border-radius: 2px !important;
  overflow: hidden;
}
.game-shell #pads.latin-board .pad {
  border-radius: 0 !important;
  border: 1px solid color-mix(in srgb, var(--play-ink, #101820) 45%, var(--play-line, #9aa3ad)) !important;
  box-shadow: none !important;
}
.game-shell .swatch-row.latin-board {
  gap: 1px !important;
  border: 2px solid color-mix(in srgb, var(--play-ink, #101820) 80%, #000);
  overflow: hidden;
  border-radius: 2px !important;
}
.game-shell .swatch-row.latin-board .cell,
.game-shell .swatch-row.latin-board .swatch,
.game-shell .swatch-row.latin-board button {
  border-radius: 0 !important;
  border: 1px solid color-mix(in srgb, var(--play-ink, #101820) 45%, var(--play-line, #9aa3ad)) !important;
  box-shadow: none !important;
}

/* futo-board-clarity: keep gaps for inequality marks, clearer cells */
.game-shell .puzzle-board.futo-board {
  border: 2px solid color-mix(in srgb, var(--play-ink, #101820) 80%, #000);
  border-radius: 2px;
  padding: 2px;
  background: color-mix(in srgb, var(--play-ink, #101820) 55%, #000);
}
.game-shell .puzzle-board.futo-board .cell {
  border: 1px solid color-mix(in srgb, var(--play-ink, #101820) 45%, var(--play-line, #9aa3ad)) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}
.game-shell .pad-grid.latin-board {
  gap: 1px !important;
  border: 2px solid color-mix(in srgb, var(--play-ink, #101820) 80%, #000);
  background: color-mix(in srgb, var(--play-ink, #101820) 70%, #000);
  border-radius: 2px !important;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.game-shell .pad-grid.latin-board .pad {
  border-radius: 0 !important;
  border: 1px solid color-mix(in srgb, var(--play-ink, #101820) 45%, var(--play-line, #9aa3ad)) !important;
  box-shadow: none !important;
}
.game-shell .tube-row .cell {
  border: 2px solid color-mix(in srgb, var(--play-ink, #101820) 70%, #000) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
.game-shell .mancala-board .cell,
.game-shell .nim-board .cell {
  border: 2px solid color-mix(in srgb, var(--play-ink, #101820) 65%, #000) !important;
  border-radius: 999px !important;
  min-width: 2.4rem;
  min-height: 2.4rem;
}
.game-shell .puzzle-board.hashi-board {
  border: 2px solid color-mix(in srgb, var(--play-ink, #101820) 80%, #000);
  border-radius: 2px;
  overflow: hidden;
  background: color-mix(in srgb, var(--play-ink, #101820) 40%, #000);
}

.game-shell .matchstick-row {
  padding: 8px;
  border: 2px solid color-mix(in srgb, var(--play-ink, #101820) 70%, #000);
  border-radius: 4px;
  background: color-mix(in srgb, var(--play-panel, #fff) 92%, #000);
}
.game-shell .matchstick-digit {
  border: 1px solid color-mix(in srgb, var(--play-ink, #101820) 45%, var(--play-line, #9aa3ad));
  border-radius: 3px;
  padding: 2px;
  background: color-mix(in srgb, var(--play-panel, #fff) 96%, #000);
}
.game-shell #row.latin-board {
  gap: 1px !important;
  border: 2px solid color-mix(in srgb, var(--play-ink, #101820) 80%, #000);
  border-radius: 2px;
  overflow: hidden;
  background: color-mix(in srgb, var(--play-ink, #101820) 55%, #000);
}
.game-shell #row.latin-board .cell {
  border: 1px solid color-mix(in srgb, var(--play-ink, #101820) 45%, var(--play-line, #9aa3ad)) !important;
  border-radius: 0 !important;
  min-height: 76px;
}