/*
 * Contemporary game board theme.
 * Loaded after the editorial site theme so the game view can use a clean,
 * digital product aesthetic while the landing page keeps its own character.
 */

.game-screen {
  --board-line: rgba(205, 235, 222, .38);
  --board-node: #cde9dc;
  --board-accent: #65d8a5;
  --board-last-move: #f5bd62;
}

.game-screen .board-shell {
  padding: clamp(12px, 1.8vw, 22px);
  border: 1px solid rgba(25,69,57,.24);
  background:
    radial-gradient(circle at 20% 8%, rgba(84,194,145,.11), transparent 36%),
    radial-gradient(circle at 92% 88%, rgba(68,137,199,.08), transparent 38%),
    linear-gradient(145deg, #0d2d27, #071f1b);
  border-radius: clamp(24px, 3.4vw, 36px);
  box-shadow: 0 35px 80px rgba(13,38,31,.22), 0 10px 24px rgba(13,38,31,.15), inset 0 1px rgba(255,255,255,.09), inset 0 0 0 1px rgba(120,225,179,.035);
}
.game-screen .board-shell::before {
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(135deg, rgba(255,255,255,.025), transparent 42%);
  mix-blend-mode: normal;
}
.game-screen .board-shell::after {
  inset: clamp(8px, 1.3vw, 15px);
  border: 1px solid rgba(184,229,209,.1);
  border-radius: clamp(17px, 2.5vw, 27px);
  box-shadow: none;
}
.game-screen .board-signature,
.game-screen .board-corner { display: none; }

.game-screen .board-stage::before {
  content: "STALL · 9";
  color: rgba(164,238,207,.72);
  border: 1px solid rgba(101,216,165,.3);
  background: linear-gradient(180deg, rgba(101,216,165,.055), rgba(101,216,165,.095)), rgba(63,139,105,.05);
  border-radius: clamp(12px, 2vw, 20px);
  box-shadow: inset 0 0 35px rgba(59,170,121,.06), 0 0 30px rgba(59,170,121,.035);
  font-family: inherit;
  font-size: clamp(.46rem, 1vw, .67rem);
  font-weight: 800;
  letter-spacing: .24em;
  text-shadow: none;
}

.game-screen .board-lines { shape-rendering: geometricPrecision; }
.game-screen .engraved-line {
  stroke: var(--board-line);
  stroke-width: 1.45;
  vector-effect: non-scaling-stroke;
  filter: none;
}
.game-screen .board-node-ring {
  fill: rgba(8,32,26,.96);
  stroke: rgba(205,235,222,.24);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.game-screen .board-hole {
  fill: var(--board-node);
  filter: drop-shadow(0 0 1.2px rgba(143,231,192,.52));
}
.game-screen .last-move-line {
  stroke: var(--board-last-move);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
  opacity: .92;
  filter: drop-shadow(0 0 3px rgba(245,189,98,.42));
}

/* Visible points are SVG circles. Button pseudo-elements are targets only. */
.game-screen .board-node:not(.legal-target)::before { display: none; }
.game-screen .board-node.legal-target::before {
  display: block;
  width: 32%;
  background: radial-gradient(circle, #effff7 0 16%, #78e0b2 18% 42%, rgba(101,216,165,.24) 46% 68%, transparent 70%);
  box-shadow: 0 0 0 2px rgba(101,216,165,.22), 0 0 20px rgba(101,216,165,.72);
  animation: modern-target-pulse 1.45s ease-in-out infinite;
}
.game-screen .board-node.capture-target::before {
  width: 39%;
  background: radial-gradient(circle, #fff9e4 0 15%, #ffd36e 17% 39%, rgba(245,189,98,.3) 43% 68%, transparent 71%);
  box-shadow: 0 0 0 2px rgba(255,211,110,.28), 0 0 25px rgba(255,198,76,.92);
  animation: capture-target-pulse 1.05s ease-in-out infinite;
}
.game-screen .board-node.risky-target::before {
  width: 32%;
  background: radial-gradient(circle, #fff4ef 0 14%, #ff806b 17% 40%, rgba(255,103,81,.25) 44% 68%, transparent 71%);
  box-shadow: 0 0 0 2px rgba(255,112,90,.26), 0 0 22px rgba(255,91,70,.65);
  animation: risky-target-pulse 1.25s ease-in-out infinite;
}
.game-screen .board-node.return-target {
  cursor: crosshair;
}
.game-screen .board-node.return-target::before {
  display: block;
  width: 28%;
  background: radial-gradient(circle, #edfff8 0 16%, #79eac0 19% 39%, rgba(102,225,178,.22) 43% 66%, transparent 69%);
  box-shadow: 0 0 0 1px rgba(128,237,197,.2), 0 0 16px rgba(92,222,174,.44);
  animation: return-target-breathe 2.2s ease-in-out infinite;
  animation-delay: calc(var(--target-delay, 0) * 30ms);
}
.game-screen .board-node.return-target:hover::before,
.game-screen .board-node.return-target:focus-visible::before {
  transform: scale(1.38);
  box-shadow: 0 0 0 5px rgba(117,237,193,.14), 0 0 30px rgba(92,222,174,.9);
}

.game-screen .piece {
  width: 80%;
  height: 80%;
  border: 1px solid rgba(255,255,255,.48);
  box-shadow: 0 10px 18px rgba(0,0,0,.24), 0 3px 5px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.65);
}
.game-screen .piece::before {
  inset: 1px;
  background: linear-gradient(145deg, rgba(255,255,255,.34), transparent 32%, rgba(0,0,0,.05) 76%);
}
.game-screen .piece--hen {
  color: #184635;
  background: linear-gradient(145deg, #fffef9, #e9ede8 72%);
  border-color: rgba(255,255,255,.82);
  --piece-accent: #e3a83d;
  --piece-comb: #d45d55;
  --piece-line: #2c6650;
  --piece-eye: #0a261c;
}
.game-screen .piece--fox {
  color: #f2763f;
  background: linear-gradient(145deg, #174f3c, #0a3025 72%);
  border-color: rgba(129,225,183,.45);
  --fox-inner: #ffc27d;
  --fox-cream: #fff1d4;
  --piece-eye: #081a13;
}
.game-screen .board-node.can-select .piece { filter: none; }
.game-screen .board-node.can-select:hover .piece {
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 15px 24px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.72);
}
.game-screen .board-node.selected::after {
  inset: 3%;
  border: 2px solid #7ce2b5;
  box-shadow: 0 0 0 4px rgba(101,216,165,.13), 0 0 24px rgba(101,216,165,.72);
}
.game-screen .board-node.last-to .piece {
  box-shadow: 0 0 0 2px rgba(245,189,98,.75), 0 10px 22px rgba(0,0,0,.28), 0 0 22px rgba(245,189,98,.18);
}
.game-screen .board-node.last-return .piece {
  animation: fox-return 700ms cubic-bezier(.16, 1.35, .3, 1) both;
  box-shadow: 0 0 0 2px rgba(114,236,193,.92), 0 12px 24px rgba(0,0,0,.3), 0 0 34px rgba(92,222,174,.64);
}
.game-screen .board-shell.return-mode {
  border-color: rgba(103,229,183,.48);
  box-shadow: 0 35px 80px rgba(13,38,31,.22), 0 0 0 1px rgba(113,236,193,.18), 0 0 52px rgba(85,214,165,.15), inset 0 1px rgba(255,255,255,.09);
}
.game-screen .board-shell.capture-flash {
  animation: board-capture-flash 560ms ease-out both;
}
.game-screen .board-shell.fox-stolen-effect {
  animation: fox-stolen-shock 620ms cubic-bezier(.36,.07,.19,.97) both;
}
.game-screen .board-shell.fox-stolen-effect .last-move-line {
  stroke: #ff755f;
  filter: drop-shadow(0 0 5px rgba(255,91,70,.75));
}
.game-screen .board-shell.computer-thinking {
  border-color: rgba(242,139,82,.38);
  box-shadow: 0 35px 80px rgba(13,38,31,.22), 0 0 0 1px rgba(242,139,82,.12), 0 0 48px rgba(242,112,63,.1), inset 0 1px rgba(255,255,255,.09);
}
.game-screen .board-shell.computer-thinking::before {
  background:
    linear-gradient(110deg, transparent 25%, rgba(255,178,117,.075) 43%, rgba(255,225,188,.13) 50%, rgba(255,178,117,.075) 57%, transparent 75%) -180% 0 / 70% 100% no-repeat,
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px) 0 0 / 34px 34px;
  animation: computer-board-scan 2.1s ease-in-out infinite;
}
.game-screen .board-shell.computer-thinking .board-nodes { pointer-events: none; }
.game-screen .board-node.computer-source .piece {
  animation: computer-source-focus 1s ease-in-out infinite;
  box-shadow: 0 0 0 2px rgba(255,170,105,.86), 0 12px 24px rgba(0,0,0,.3), 0 0 30px rgba(242,119,63,.52);
}
.game-screen .board-node.computer-target::before {
  display: block;
  width: 36%;
  background: radial-gradient(circle, #fff5e7 0 15%, #ff9e62 18% 40%, rgba(242,119,63,.28) 44% 68%, transparent 71%);
  box-shadow: 0 0 0 2px rgba(255,158,98,.3), 0 0 26px rgba(242,119,63,.8);
  animation: computer-target-lock 700ms ease-in-out infinite alternate;
}
.game-screen .board-node.computer-capture-target::before {
  background: radial-gradient(circle, #fffbe8 0 15%, #ffd267 18% 40%, rgba(255,196,64,.3) 44% 68%, transparent 71%);
  box-shadow: 0 0 0 2px rgba(255,210,103,.3), 0 0 30px rgba(255,190,50,.9);
}

.game-screen .board-hint {
  min-height: 38px;
  color: #24483a;
  border: 1px solid rgba(39,92,69,.1);
  background: rgba(255,255,255,.74);
  border-radius: 13px;
  box-shadow: 0 8px 22px rgba(22,63,47,.07);
  backdrop-filter: blur(12px);
}
.game-screen .mobile-status span {
  color: #174535;
  border: 1px solid rgba(37,108,78,.12);
  background: rgba(255,255,255,.84);
  box-shadow: 0 8px 20px rgba(22,63,47,.09);
  font-family: inherit;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.game-screen .game-panel {
  padding: .9rem;
  border: 1px solid rgba(30,87,64,.11);
  background: rgba(246,249,246,.82);
  border-radius: 24px;
  box-shadow: 0 24px 55px rgba(20,59,45,.13), inset 0 1px rgba(255,255,255,.9);
  backdrop-filter: blur(18px) saturate(1.1);
}
.game-screen .panel-heading { color: #1b5941; }
.game-screen .panel-heading small { color: #72837a; }
.game-screen .turn-card,
.game-screen .score-card,
.game-screen .captured-card {
  border-color: rgba(31,86,64,.08);
  background: rgba(255,255,255,.78);
  box-shadow: 0 8px 20px rgba(24,61,47,.07), inset 0 1px rgba(255,255,255,.9);
}
.game-screen .turn-card {
  background: radial-gradient(circle at 100% 0, rgba(106,216,166,.14), transparent 52%), linear-gradient(145deg, #194d3a, #0f392b);
}
.game-screen .turn-card .panel-label { color: rgba(230,246,238,.62); }
.game-screen .turn-card strong { color: #fff; font-family: inherit; font-size: 1.36rem; font-weight: 800; }
.game-screen .turn-card.computer-thinking {
  background:
    linear-gradient(110deg, transparent 15%, rgba(255,183,122,.16) 45%, transparent 72%) -120% 0 / 65% 100% no-repeat,
    radial-gradient(circle at 100% 0, rgba(242,119,63,.2), transparent 52%),
    linear-gradient(145deg, #194d3a, #0f392b);
  animation: computer-card-scan 1.9s ease-in-out infinite;
}
.game-screen .turn-card.computer-thinking .turn-piece {
  animation: computer-token-think 1.6s ease-in-out infinite;
}
.game-screen .thinking-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: .45rem;
  vertical-align: .15em;
}
.game-screen .thinking-dots[hidden] { display: none !important; }
.game-screen .thinking-dots i {
  width: 5px;
  height: 5px;
  background: #ffb77c;
  border-radius: 50%;
  box-shadow: 0 0 9px rgba(255,151,88,.65);
  animation: thinking-dot 1.05s ease-in-out infinite;
}
.game-screen .thinking-dots i:nth-child(2) { animation-delay: 130ms; }
.game-screen .thinking-dots i:nth-child(3) { animation-delay: 260ms; }
.game-screen .turn-piece {
  color: #184635;
  border-color: rgba(255,255,255,.8);
  background: linear-gradient(145deg, #fffef9, #e9ede8 72%);
  box-shadow: 0 8px 17px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.75);
}
.game-screen .turn-piece--fox {
  color: #f2763f;
  border-color: rgba(129,225,183,.45);
  background: linear-gradient(145deg, #174f3c, #0a3025 72%);
}
.game-screen .stolen-fox-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: .8rem;
  min-height: 86px;
  padding: .72rem .9rem;
  overflow: hidden;
  border: 1px solid rgba(238,117,88,.26);
  background:
    radial-gradient(circle at 0 0, rgba(255,133,104,.14), transparent 52%),
    linear-gradient(145deg, rgba(255,255,255,.9), rgba(255,247,243,.72));
  border-radius: 17px;
  box-shadow: 0 10px 25px rgba(148,66,45,.1), inset 0 1px rgba(255,255,255,.95);
  animation: stolen-card-in 520ms cubic-bezier(.2,.9,.25,1.15) both;
}
.game-screen .stolen-fox-card[hidden] { display: none !important; }
.game-screen .stolen-fox-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(115deg, transparent 0 13px, rgba(139,61,44,.045) 14px 15px);
}
.game-screen .stolen-fox-token {
  position: relative;
  z-index: 1;
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  color: #f2763f;
  border: 1px dashed rgba(225,105,78,.72);
  background: linear-gradient(145deg, #174f3c, #0a3025);
  border-radius: 50%;
  box-shadow: 0 7px 16px rgba(52,31,25,.22), 0 0 0 5px rgba(239,111,82,.07);
  animation: stolen-token-hover 2.6s ease-in-out infinite;
}
.game-screen .stolen-fox-token svg { width: 78%; height: 78%; }
.game-screen .stolen-fox-card > div { position: relative; z-index: 1; min-width: 0; }
.game-screen .stolen-fox-card .panel-label { display: block; color: #a86150; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.game-screen .stolen-fox-card strong { display: block; color: #58332b; font-size: .94rem; }
.game-screen .stolen-fox-card small { display: block; margin-top: .12rem; color: #87675f; font-size: .72rem; line-height: 1.3; }
.game-screen .score-card > span,
.game-screen .captured-card .panel-label { color: #718078; }
.game-screen .score-card strong { color: #174535; font-family: inherit; font-size: 1.85rem; font-weight: 850; }
.game-screen .captured-card strong { color: #243b31; }
.game-screen .secondary-button {
  color: #245640;
  border-color: rgba(30,87,64,.12);
  background: rgba(255,255,255,.7);
  box-shadow: inset 0 1px rgba(255,255,255,.9);
}
.game-screen .secondary-button:disabled { color: rgba(36,86,64,.35); }
.game-screen .goal-card { border-color: rgba(41,109,78,.1); background: rgba(95,202,152,.08); box-shadow: none; }
.game-screen .goal-card p { color: #668076; }
.game-screen .goal-card strong { color: #164b37; }

@keyframes capture-target-pulse {
  0%, 100% { transform: scale(.85); opacity: .82; }
  50% { transform: scale(1.17); opacity: 1; }
}
@keyframes risky-target-pulse {
  0%, 100% { transform: scale(.88); opacity: .68; }
  50% { transform: scale(1.08); opacity: 1; }
}
@keyframes return-target-breathe {
  0%, 100% { transform: scale(.82); opacity: .64; }
  50% { transform: scale(1.08); opacity: .98; }
}
@keyframes board-capture-flash {
  0% { box-shadow: 0 35px 80px rgba(13,38,31,.22), 0 0 0 0 rgba(255,205,91,0); }
  32% { box-shadow: 0 35px 80px rgba(13,38,31,.22), 0 0 0 5px rgba(255,205,91,.32), 0 0 58px rgba(255,190,56,.28); }
  100% { box-shadow: 0 35px 80px rgba(13,38,31,.22), 0 0 0 0 rgba(255,205,91,0); }
}
@keyframes fox-stolen-shock {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-5px) rotate(-.25deg); box-shadow: 0 35px 80px rgba(13,38,31,.22), 0 0 38px rgba(255,91,70,.27); }
  36% { transform: translateX(4px) rotate(.2deg); }
  54% { transform: translateX(-2px); }
  72% { transform: translateX(1px); }
}
@keyframes fox-return {
  0% { transform: scale(.28) rotate(-24deg); opacity: 0; filter: blur(5px); }
  62% { transform: scale(1.13) rotate(3deg); opacity: 1; filter: blur(0); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes stolen-card-in {
  from { transform: translateY(-8px) scale(.96); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes stolen-token-hover {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-3px) rotate(2deg); }
}
@keyframes computer-board-scan {
  0%, 18% { background-position: -180% 0, 0 0, 0 0; }
  82%, 100% { background-position: 330% 0, 0 0, 0 0; }
}
@keyframes computer-card-scan {
  0%, 15% { background-position: -120% 0, 100% 0, 0 0; }
  85%, 100% { background-position: 320% 0, 100% 0, 0 0; }
}
@keyframes computer-token-think {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-3px) rotate(2deg); box-shadow: 0 10px 21px rgba(0,0,0,.23), 0 0 22px rgba(242,119,63,.28), inset 0 1px rgba(255,255,255,.75); }
}
@keyframes thinking-dot {
  0%, 70%, 100% { transform: translateY(0) scale(.72); opacity: .45; }
  35% { transform: translateY(-3px) scale(1); opacity: 1; }
}
@keyframes computer-source-focus {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.06); }
}
@keyframes computer-target-lock {
  from { transform: scale(.88); opacity: .74; }
  to { transform: scale(1.16); opacity: 1; }
}

@media (max-width: 759px) {
  .game-screen .board-shell { padding: 9px; border-radius: 21px; }
  .game-screen .board-shell::after { inset: 6px; border-radius: 16px; }
  .game-screen .board-stage::before { border-radius: 9px; }
  .game-screen .piece { width: 78%; height: 78%; }
  .game-screen .game-panel { padding: .65rem; border-radius: 21px; }
}

@media (prefers-color-scheme: dark) {
  .game-screen .board-hint,
  .game-screen .mobile-status span { color: #d9eee4; border-color: rgba(142,220,185,.12); background: rgba(16,43,33,.78); }
  .game-screen .game-panel { border-color: rgba(144,220,185,.1); background: rgba(13,36,28,.84); box-shadow: 0 24px 55px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.04); }
  .game-screen .panel-heading { color: #91dfbd; }
  .game-screen .panel-heading small { color: #82998e; }
  .game-screen .score-card,
  .game-screen .captured-card { border-color: rgba(144,220,185,.08); background: rgba(255,255,255,.055); box-shadow: 0 8px 20px rgba(0,0,0,.15), inset 0 1px rgba(255,255,255,.045); }
  .game-screen .score-card > span,
  .game-screen .captured-card .panel-label { color: #91a79d; }
  .game-screen .score-card strong,
  .game-screen .captured-card strong { color: #eef7f2; }
  .game-screen .secondary-button { color: #d9eee4; border-color: rgba(144,220,185,.12); background: rgba(255,255,255,.05); }
  .game-screen .goal-card { border-color: rgba(144,220,185,.1); background: rgba(95,202,152,.07); }
  .game-screen .goal-card p { color: #8fa79c; }
  .game-screen .goal-card strong { color: #def2e8; }
  .game-screen .stolen-fox-card { border-color: rgba(255,133,104,.2); background: radial-gradient(circle at 0 0, rgba(255,133,104,.13), transparent 54%), rgba(255,255,255,.045); box-shadow: 0 10px 25px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.045); }
  .game-screen .stolen-fox-card .panel-label { color: #e59480; }
  .game-screen .stolen-fox-card strong { color: #fff0eb; }
  .game-screen .stolen-fox-card small { color: #c2a59c; }
}

@media (prefers-reduced-motion: reduce) {
  .game-screen *, .game-screen *::before, .game-screen *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Smartphone-Spielansicht: eine kompakte HUD statt der Desktop-Konsole. */
@media (max-width: 759px) {
  .game-screen {
    width: calc(100% - .5rem);
    margin-top: .25rem;
    margin-bottom: 1rem;
  }
  .game-screen .game-layout { gap: .55rem; }
  .game-screen .mobile-status {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 68px 64px;
    gap: 6px;
    margin: 0 2px 8px;
    color: #173f30;
    font-family: inherit;
    font-weight: 700;
  }
  .game-screen .mobile-status span {
    color: inherit;
    border: 0;
    background: transparent;
    box-shadow: none;
    font: inherit;
    letter-spacing: normal;
    text-transform: none;
  }
  .game-screen .mobile-turn-status,
  .game-screen .mobile-score-status {
    min-width: 0;
    min-height: 54px;
    border: 1px solid rgba(29,89,65,.1);
    background: rgba(255,255,255,.82);
    border-radius: 16px;
    box-shadow: 0 7px 18px rgba(22,63,47,.075), inset 0 1px rgba(255,255,255,.9);
    backdrop-filter: blur(12px);
  }
  .game-screen .mobile-turn-status {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    padding: 5px 8px 5px 6px;
  }
  .game-screen .mobile-status.computer-thinking .mobile-turn-status {
    border-color: rgba(242,139,82,.28);
    box-shadow: 0 7px 18px rgba(134,62,35,.1), 0 0 0 1px rgba(242,139,82,.07), inset 0 1px rgba(255,255,255,.9);
  }
  .game-screen .mobile-turn-piece {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    color: #184635;
    border: 1px solid rgba(255,255,255,.8);
    background: linear-gradient(145deg, #fffef9, #e9ede8);
    border-radius: 50%;
    box-shadow: 0 5px 12px rgba(18,61,44,.16);
    --piece-accent: #e3a83d;
    --piece-comb: #d45d55;
    --piece-line: #2c6650;
    --piece-eye: #0a261c;
  }
  .game-screen .mobile-turn-piece--fox {
    color: #f2763f;
    border-color: rgba(129,225,183,.36);
    background: linear-gradient(145deg, #174f3c, #0a3025);
    --fox-inner: #ffc27d;
    --fox-cream: #fff1d4;
  }
  .game-screen .mobile-turn-piece svg { width: 34px; height: 34px; }
  .game-screen .mobile-turn-copy { min-width: 0; display: block; line-height: 1.05; }
  .game-screen .mobile-turn-copy small,
  .game-screen .mobile-score-status small {
    display: block;
    color: #74837b;
    font-size: .52rem;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.1;
    text-transform: uppercase;
  }
  .game-screen .mobile-turn-copy strong {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    font-size: .84rem;
    font-weight: 850;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .game-screen .mobile-score-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px 3px;
  }
  .game-screen .mobile-score-status strong {
    margin-top: 2px;
    color: #174535;
    font-size: 1.08rem;
    font-weight: 900;
    line-height: 1;
  }
  .game-screen .mobile-score-status em { color: #84928b; font-size: .58rem; font-style: normal; }
  .game-screen .board-shell {
    padding: 7px;
    border-radius: 19px;
    box-shadow: 0 18px 38px rgba(13,38,31,.18), 0 6px 16px rgba(13,38,31,.12), inset 0 1px rgba(255,255,255,.08);
  }
  .game-screen .board-shell::after { inset: 5px; border-radius: 14px; }
  .game-screen .board-hint {
    min-height: 0;
    margin: .5rem .2rem 0;
    padding: .55rem .7rem;
    font-size: .72rem;
    line-height: 1.35;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(22,63,47,.055);
  }
  .game-screen .game-panel {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: 0 .2rem;
    border: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
  }
  .game-screen .game-panel .panel-heading,
  .game-screen .game-panel .turn-card,
  .game-screen .game-panel .score-grid,
  .game-screen .game-panel .captured-card,
  .game-screen .game-panel .goal-card { display: none; }
  .game-screen .game-panel .stolen-fox-card {
    width: 100%;
    min-height: 72px;
    padding: .58rem .72rem;
    border-radius: 15px;
  }
  .game-screen .game-panel .stolen-fox-token { flex-basis: 46px; width: 46px; height: 46px; }
  .game-screen .action-row { width: 100%; gap: .55rem; }
  .game-screen .secondary-button {
    min-height: 46px;
    color: #245640;
    border-color: rgba(30,87,64,.11);
    background: rgba(255,255,255,.72);
    box-shadow: 0 5px 14px rgba(20,59,45,.065), inset 0 1px rgba(255,255,255,.9);
  }
}

@media (min-width: 760px) {
  .game-screen .mobile-status { display: none; }
}

@media (max-width: 759px) and (prefers-color-scheme: dark) {
  .game-screen .mobile-turn-status,
  .game-screen .mobile-score-status {
    border-color: rgba(144,220,185,.1);
    background: rgba(19,47,37,.82);
    box-shadow: 0 7px 18px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.04);
  }
  .game-screen .mobile-turn-copy small,
  .game-screen .mobile-score-status small { color: #8fa59a; }
  .game-screen .mobile-turn-copy strong,
  .game-screen .mobile-score-status strong { color: #eef7f2; }
  .game-screen .game-panel { background: transparent; box-shadow: none; }
  .game-screen .secondary-button {
    color: #d9eee4;
    border-color: rgba(144,220,185,.11);
    background: rgba(255,255,255,.055);
    box-shadow: inset 0 1px rgba(255,255,255,.045);
  }
}

/* Interaktives Tutorial: klare Lernkarte statt zusätzlicher Spielkonsole. */
.mode-card.mode-card--tutorial {
  color: #f5fff9;
  border-color: rgba(128,232,187,.36);
  background:
    radial-gradient(circle at 92% 15%, rgba(115,229,180,.18), transparent 32%),
    linear-gradient(135deg, #246c50, #123f32 62%, #102f29);
  box-shadow: 0 12px 28px rgba(22,82,59,.25), inset 0 1px rgba(255,255,255,.12);
}
.mode-card.mode-card--tutorial:hover {
  border-color: rgba(151,244,204,.58);
  box-shadow: 0 18px 36px rgba(22,82,59,.31), 0 0 0 3px rgba(100,218,165,.13);
}
.mode-card.mode-card--tutorial .mode-icon {
  color: #b9f4d7;
  background: rgba(255,255,255,.1);
}
.tutorial-new-badge {
  padding: .32rem .55rem;
  color: #123d2e;
  background: #9becbe;
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(8,37,27,.18);
}

.game-screen.tutorial-active { width: min(760px, calc(100% - 1rem)); }
.game-screen.tutorial-active .game-layout { display: block; }
.game-screen.tutorial-active .mobile-status,
.game-screen.tutorial-active .game-panel { display: none; }

.tutorial-coach {
  position: relative;
  margin: 0 2px .7rem;
  padding: .8rem .9rem .85rem;
  overflow: hidden;
  color: #edf9f3;
  border: 1px solid rgba(126,226,181,.2);
  background:
    radial-gradient(circle at 0 0, rgba(98,218,165,.15), transparent 34%),
    linear-gradient(145deg, rgba(24,79,59,.98), rgba(12,47,38,.98));
  border-radius: 20px;
  box-shadow: 0 13px 30px rgba(13,50,37,.2), inset 0 1px rgba(255,255,255,.09);
}
.tutorial-coach[hidden],
.tutorial-next[hidden],
.tutorial-finish-actions[hidden],
.tutorial-retry[hidden] { display: none !important; }
.tutorial-coach::after {
  content: "";
  position: absolute;
  right: -42px;
  bottom: -65px;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(157,239,203,.09);
  border-radius: 50%;
  box-shadow: 0 0 0 24px rgba(157,239,203,.035);
  pointer-events: none;
}
.tutorial-coach.is-complete {
  border-color: rgba(247,198,100,.4);
  background:
    radial-gradient(circle at 0 0, rgba(247,198,100,.15), transparent 35%),
    linear-gradient(145deg, #315e47, #173c31);
  animation: tutorial-success-in 480ms cubic-bezier(.2,.9,.25,1.12) both;
}
.tutorial-coach.is-finished {
  border-color: rgba(247,198,100,.56);
  box-shadow: 0 15px 36px rgba(13,50,37,.25), 0 0 0 3px rgba(247,198,100,.09), inset 0 1px rgba(255,255,255,.1);
}
.tutorial-coach-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .65rem;
}
.tutorial-progress-wrap { min-width: 0; display: flex; align-items: center; gap: .65rem; }
.tutorial-step-label {
  color: rgba(230,247,238,.68);
  font-size: .61rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tutorial-progress { display: inline-flex; gap: 5px; }
.tutorial-progress i {
  width: 19px;
  height: 4px;
  background: rgba(227,245,235,.18);
  border-radius: 999px;
  transition: width 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.tutorial-progress i.is-current { width: 29px; background: #8be5bb; box-shadow: 0 0 10px rgba(92,222,174,.42); }
.tutorial-progress i.is-done { background: #f3c86e; }
.tutorial-exit,
.tutorial-retry {
  min-height: 44px;
  padding: .35rem .7rem;
  color: rgba(237,249,243,.76);
  border: 0;
  background: transparent;
  border-radius: 10px;
  font-size: .7rem;
  font-weight: 750;
  cursor: pointer;
}
.tutorial-exit:hover,
.tutorial-retry:hover { color: #fff; background: rgba(255,255,255,.08); }
.tutorial-message {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  align-items: center;
  gap: .85rem;
}
.tutorial-token {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  color: #184635;
  border: 1px solid rgba(255,255,255,.72);
  background: linear-gradient(145deg, #fffef9, #e9ede8);
  border-radius: 50%;
  box-shadow: 0 8px 18px rgba(0,0,0,.21), inset 0 1px rgba(255,255,255,.8);
  --piece-accent: #e3a83d;
  --piece-comb: #d45d55;
  --piece-line: #2c6650;
  --piece-eye: #0a261c;
}
.tutorial-token--fox {
  color: #f2763f;
  border-color: rgba(129,225,183,.42);
  background: linear-gradient(145deg, #174f3c, #092b22);
  --fox-inner: #ffc27d;
  --fox-cream: #fff1d4;
}
.tutorial-token svg { width: 49px; height: 49px; }
.tutorial-message .eyebrow { margin-bottom: .2rem; color: #98e8c2; font-size: .58rem; }
.tutorial-message h2 { color: #fff8e9; font-family: inherit; font-size: 1.18rem; font-weight: 850; }
.tutorial-message p:last-child { margin: .28rem 0 0; color: rgba(232,246,238,.74); font-size: .76rem; line-height: 1.4; }
.tutorial-actions {
  position: relative;
  z-index: 1;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .55rem;
  margin-top: .55rem;
}
.tutorial-next { min-height: 44px; min-width: 118px; padding: .55rem 1rem; }
.tutorial-finish-actions { display: grid; grid-template-columns: 1fr 1.2fr; gap: .55rem; width: min(100%, 360px); }
.tutorial-finish-actions .primary-button,
.tutorial-finish-actions .secondary-button { min-height: 46px; padding: .5rem .75rem; }
.tutorial-finish-actions .secondary-button { color: #edf9f3; border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.07); }

.game-screen.tutorial-active .board-node.tutorial-muted .piece { opacity: .38; filter: saturate(.28); }
.game-screen.tutorial-active .board-node.tutorial-focus.has-piece .piece {
  animation: tutorial-piece-focus 1.55s ease-in-out infinite;
  box-shadow: 0 0 0 3px rgba(114,229,178,.5), 0 10px 22px rgba(0,0,0,.28), 0 0 28px rgba(88,219,164,.45);
}
.game-screen.tutorial-active .board-node.risky-target::before { animation-duration: .9s; }
.game-screen.tutorial-active .board-shell { transition: border-color 220ms ease, box-shadow 220ms ease; }
.game-screen.tutorial-active .tutorial-coach.is-complete + .board-shell {
  border-color: rgba(247,198,100,.48);
  box-shadow: 0 30px 68px rgba(13,38,31,.22), 0 0 42px rgba(247,198,100,.13), inset 0 1px rgba(255,255,255,.09);
}

@keyframes tutorial-piece-focus {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.055); }
}
@keyframes tutorial-success-in {
  from { transform: translateY(-5px) scale(.985); opacity: .8; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

@media (max-width: 759px) {
  .mode-card.mode-card--tutorial { min-height: 69px; }
  .game-screen.tutorial-active { width: calc(100% - .5rem); }
  .tutorial-coach { margin: 0 2px 7px; padding: .55rem .65rem .62rem; border-radius: 17px; }
  .tutorial-coach-top { margin-bottom: .38rem; }
  .tutorial-progress-wrap { gap: .45rem; }
  .tutorial-progress i { width: 13px; }
  .tutorial-progress i.is-current { width: 21px; }
  .tutorial-message { grid-template-columns: 46px minmax(0, 1fr); gap: .58rem; }
  .tutorial-token { width: 44px; height: 44px; }
  .tutorial-token svg { width: 38px; height: 38px; }
  .tutorial-message h2 { font-size: .96rem; line-height: 1.08; }
  .tutorial-message p:last-child { margin-top: .2rem; font-size: .69rem; line-height: 1.3; }
  .tutorial-actions { min-height: 44px; margin-top: .35rem; }
  .tutorial-retry,
  .tutorial-next { min-height: 44px; }
  .tutorial-finish-actions .primary-button,
  .tutorial-finish-actions .secondary-button { min-height: 44px; font-size: .72rem; }
  .game-screen.tutorial-active .board-hint { margin-top: .42rem; }
}

@media (max-width: 350px) {
  .tutorial-step-label { font-size: .55rem; }
  .tutorial-progress { gap: 3px; }
  .tutorial-progress i { width: 10px; }
  .tutorial-progress i.is-current { width: 16px; }
  .tutorial-new-badge { padding-inline: .42rem; }
}

@media (prefers-color-scheme: dark) {
  .tutorial-coach { border-color: rgba(132,232,188,.18); box-shadow: 0 14px 32px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.07); }
}

/* Auswahl der Computerstärke – als kompakte, touchfreundliche Segmentsteuerung. */
.difficulty-picker {
  margin: 1rem 0 0;
  padding: 0;
  border: 0;
}
.difficulty-picker legend {
  margin-bottom: .45rem;
  color: #60736a;
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.difficulty-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(35,88,64,.1);
  background: rgba(32,75,57,.065);
  border-radius: 15px;
}
.difficulty-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.difficulty-options label {
  min-width: 0;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .48rem;
  padding: .45rem .55rem;
  color: #53685e;
  border: 1px solid transparent;
  border-radius: 11px;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.difficulty-options label:hover { color: #1b513b; background: rgba(255,255,255,.5); }
.difficulty-options input:focus-visible + label { outline: 3px solid #c89538; outline-offset: 2px; }
.difficulty-options input:checked + label {
  color: #fff9e9;
  border-color: rgba(137,226,185,.27);
  background: linear-gradient(145deg, #275e47, #163d31);
  box-shadow: 0 7px 16px rgba(20,65,47,.18), inset 0 1px rgba(255,255,255,.1);
  transform: translateY(-1px);
}
.difficulty-options label strong { font-size: .78rem; }
.difficulty-bars {
  height: 16px;
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
}
.difficulty-bars i {
  width: 3px;
  background: currentColor;
  border-radius: 3px;
  opacity: .25;
}
.difficulty-bars i:nth-child(1) { height: 6px; }
.difficulty-bars i:nth-child(2) { height: 10px; }
.difficulty-bars i:nth-child(3) { height: 15px; }
#difficulty-easy + label .difficulty-bars i:nth-child(1),
#difficulty-medium + label .difficulty-bars i:nth-child(-n+2),
#difficulty-hard + label .difficulty-bars i { opacity: .9; }
.difficulty-picker > p {
  min-height: 2.5em;
  margin: .42rem .2rem 0;
  color: #6c7b74;
  font-size: .7rem;
  line-height: 1.35;
}
.side-modal .side-choice-grid { margin-top: .8rem; }

@media (max-width: 560px) {
  .side-modal {
    max-height: calc(100dvh - 1rem);
    padding: 1.15rem .8rem .8rem;
    overflow-y: auto;
  }
  .side-modal h2 { padding-right: 2.4rem; font-size: 1.65rem; }
  .side-intro { font-size: .76rem; line-height: 1.4; }
  .difficulty-picker { margin-top: .75rem; }
  .difficulty-picker legend { margin-bottom: .32rem; }
  .difficulty-options label { min-height: 48px; gap: .3rem; padding-inline: .3rem; }
  .difficulty-options label strong { font-size: .72rem; }
  .difficulty-picker > p { min-height: 0; margin-top: .35rem; font-size: .64rem; }
  .side-modal .side-choice-grid { gap: .55rem; margin-top: .65rem; }
  .side-modal .side-choice { min-height: 96px; grid-template-columns: 58px 1fr; padding: .65rem; }
  .side-modal .side-choice-token { width: 54px; height: 54px; }
}

@media (prefers-color-scheme: dark) {
  .difficulty-picker legend,
  .difficulty-picker > p { color: #96a99f; }
  .difficulty-options { border-color: rgba(144,220,185,.1); background: rgba(255,255,255,.04); }
  .difficulty-options label { color: #9db0a6; }
  .difficulty-options label:hover { color: #eaf5ee; background: rgba(255,255,255,.06); }
  .difficulty-options input:checked + label { color: #fff7e6; border-color: rgba(144,220,185,.16); background: linear-gradient(145deg, #2b5c47, #17382d); }
}

/* Klang- und Vibrationssteuerung: bewusst kompakt, besonders auf Smartphones. */
.header-actions {
  display: flex;
  align-items: center;
  gap: .45rem;
}
.feedback-button {
  position: relative;
}
.feedback-button::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 7px;
  height: 7px;
  border: 2px solid #fffdf7;
  background: #48a778;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(17,57,42,.24);
}
.feedback-button.is-muted::after { background: #aeb7b1; }

.feedback-modal {
  width: min(520px, calc(100% - 1rem));
  padding: clamp(1.35rem, 5vw, 2.2rem);
}
.feedback-modal h2 { margin-bottom: .5rem; padding-right: 2.5rem; }
.feedback-intro {
  margin: 0;
  color: #65736c;
  font-size: .85rem;
  line-height: 1.55;
}
.feedback-settings {
  display: grid;
  gap: .65rem;
  margin-top: 1.15rem;
}
.feedback-setting {
  min-height: 76px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  gap: .75rem;
  padding: .7rem .8rem;
  color: #254636;
  border: 1px solid rgba(31,86,64,.11);
  background: rgba(255,255,255,.68);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(31,65,49,.055), inset 0 1px rgba(255,255,255,.9);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 180ms ease, transform 180ms ease, background 180ms ease;
}
.feedback-setting:hover { border-color: rgba(42,111,78,.28); background: #fffef9; }
.feedback-setting:active { transform: scale(.992); }
.feedback-setting-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: #f5d98d;
  background: linear-gradient(145deg, #2f6b4d, #153c2c);
  border: 1px solid rgba(213,168,77,.6);
  border-radius: 14px;
  box-shadow: 0 6px 14px rgba(17,57,42,.16), inset 0 1px rgba(255,255,255,.12);
}
.feedback-setting-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feedback-setting-copy { min-width: 0; }
.feedback-setting-copy strong,
.feedback-setting-copy small { display: block; }
.feedback-setting-copy strong { font-size: .9rem; }
.feedback-setting-copy small { margin-top: .16rem; color: #74817a; font-size: .69rem; line-height: 1.35; }
.feedback-setting input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.switch-track {
  width: 48px;
  height: 28px;
  position: relative;
  display: block;
  border: 1px solid rgba(53,76,65,.15);
  background: #d5dcd7;
  border-radius: 999px;
  box-shadow: inset 0 2px 5px rgba(30,50,40,.12);
  transition: background 180ms ease, border-color 180ms ease;
}
.switch-track i {
  width: 22px;
  height: 22px;
  position: absolute;
  top: 2px;
  left: 2px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 7px rgba(20,44,32,.26);
  transition: transform 190ms cubic-bezier(.2,.8,.2,1);
}
.feedback-setting input:checked + .switch-track {
  border-color: #27674a;
  background: linear-gradient(135deg, #3a8b64, #1c5b40);
}
.feedback-setting input:checked + .switch-track i { transform: translateX(20px); }
.feedback-setting input:focus-visible + .switch-track { outline: 3px solid rgba(217,170,70,.42); outline-offset: 3px; }
.feedback-setting.is-unavailable { cursor: default; opacity: .56; }
.feedback-setting.is-unavailable:active { transform: none; }
.feedback-status {
  min-height: 1.4rem;
  margin: .8rem 0 0;
  color: #75827b;
  font-size: .68rem;
  text-align: center;
}

@media (max-width: 759px) {
  .header-actions { gap: .28rem; }
  .feedback-modal { max-height: calc(100dvh - 1rem); overflow-y: auto; }
}

@media (max-width: 380px) {
  .site-header .header-actions .icon-button { width: 44px; min-width: 44px; }
  .feedback-modal { padding: 1.2rem .75rem .9rem; }
  .feedback-setting { min-height: 72px; grid-template-columns: 44px minmax(0, 1fr) 46px; gap: .58rem; padding: .62rem; }
  .feedback-setting-icon { width: 42px; height: 42px; }
  .feedback-setting-copy strong { font-size: .84rem; }
  .feedback-setting-copy small { font-size: .64rem; }
}

@media (prefers-color-scheme: dark) {
  .feedback-button::after { border-color: #172c23; }
  .feedback-intro, .feedback-status { color: #9caaa2; }
  .feedback-setting { color: #edf4ef; border-color: rgba(232,205,140,.12); background: rgba(255,255,255,.052); box-shadow: inset 0 1px rgba(255,255,255,.045); }
  .feedback-setting:hover { border-color: rgba(232,205,140,.24); background: rgba(255,255,255,.075); }
  .feedback-setting-copy small { color: #9ba8a0; }
  .switch-track { border-color: rgba(255,255,255,.08); background: #44524b; }
}

/* Taktische Herausforderungen und täglich deterministische Mission. */
.mode-card.mode-card--challenges {
  color: #fff8e8;
  border-color: rgba(239,199,105,.3);
  background:
    radial-gradient(circle at 88% 12%, rgba(246,198,91,.2), transparent 34%),
    linear-gradient(135deg, #315f48, #183d31 68%, #112e27);
  box-shadow: 0 12px 28px rgba(18,65,47,.22), inset 0 1px rgba(255,255,255,.1);
}
.mode-card.mode-card--challenges:hover {
  border-color: rgba(247,211,128,.55);
  box-shadow: 0 17px 34px rgba(18,65,47,.29), 0 0 0 3px rgba(229,184,80,.1);
}
.mode-card.mode-card--challenges .mode-icon { color: #f2d17c; background: rgba(255,255,255,.09); }
.challenge-progress-badge {
  min-width: 42px;
  padding: .34rem .48rem;
  color: #173b2e;
  background: linear-gradient(145deg, #f6da91, #d8a944);
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 900;
  text-align: center;
  box-shadow: 0 4px 12px rgba(8,37,27,.2);
}

.challenge-modal {
  width: min(690px, calc(100% - 1rem));
  max-height: calc(100dvh - 1rem);
  padding: clamp(1.35rem, 4vw, 2.2rem);
  overflow-y: auto;
}
.challenge-modal h2 { margin-bottom: .45rem; padding-right: 2.5rem; }
.challenge-intro { margin: 0; color: #68776f; font-size: .84rem; line-height: 1.5; }
.challenge-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: .58rem .75rem;
  color: #68776f;
  border: 1px solid rgba(34,86,63,.09);
  background: rgba(33,83,61,.045);
  border-radius: 12px;
  font-size: .68rem;
}
.challenge-summary strong { color: #234936; font-size: .73rem; }
.daily-challenge-card {
  width: 100%;
  min-height: 86px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 32px;
  align-items: center;
  gap: .85rem;
  margin-top: .7rem;
  padding: .68rem .8rem;
  color: #f7f3e9;
  border: 1px solid rgba(235,196,103,.4);
  background:
    radial-gradient(circle at 92% 8%, rgba(239,190,79,.2), transparent 32%),
    linear-gradient(135deg, #2d674c, #153b2d);
  border-radius: 18px;
  text-align: left;
  box-shadow: 0 12px 25px rgba(16,57,41,.2), inset 0 1px rgba(255,255,255,.1);
  cursor: pointer;
  transition: transform 170ms ease, box-shadow 170ms ease, border-color 170ms ease;
}
.daily-challenge-card:hover { transform: translateY(-2px); border-color: rgba(247,216,140,.65); box-shadow: 0 16px 32px rgba(16,57,41,.25), inset 0 1px rgba(255,255,255,.12); }
.daily-calendar {
  width: 56px;
  height: 60px;
  display: grid;
  place-content: center;
  color: #193f30;
  border: 1px solid rgba(255,255,255,.7);
  background: linear-gradient(#f6d77d 0 19px, #fffaf0 19px);
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 6px 14px rgba(7,31,22,.23);
}
.daily-calendar small { margin-top: -2px; color: #244c3a; font-size: .52rem; font-weight: 950; letter-spacing: .08em; }
.daily-calendar strong { margin-top: 5px; font-size: 1.25rem; line-height: 1; }
.daily-challenge-card > span:nth-child(2) { min-width: 0; }
.daily-challenge-card > span:nth-child(2) > * { display: block; }
.daily-challenge-card > span:nth-child(2) small { color: #f0ca70; font-size: .58rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.daily-challenge-card > span:nth-child(2) strong { margin-top: .18rem; color: #fff9eb; font-size: 1rem; }
.daily-challenge-card > span:nth-child(2) em { margin-top: .16rem; overflow: hidden; color: rgba(234,245,238,.68); font-size: .68rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.challenge-card-state {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: #8a9991;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: .8rem;
  font-weight: 950;
}
.daily-challenge-card .challenge-card-state { color: rgba(255,244,213,.62); }
.daily-challenge-card.is-complete .challenge-card-state,
.challenge-card.is-complete .challenge-card-state { color: #1d5b40; border-color: #77ca9d; background: #b9f0d0; }
.challenge-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin-top: .65rem; }
.challenge-card {
  min-width: 0;
  min-height: 112px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 28px;
  grid-template-rows: auto 1fr;
  gap: .4rem .55rem;
  padding: .72rem;
  color: #294b3a;
  border: 1px solid rgba(35,86,63,.11);
  background: rgba(255,255,255,.72);
  border-radius: 16px;
  text-align: left;
  box-shadow: 0 7px 19px rgba(28,62,46,.055), inset 0 1px rgba(255,255,255,.9);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.challenge-card:hover { transform: translateY(-2px); border-color: rgba(40,104,74,.3); background: #fffef9; }
.challenge-number { color: #b78330; font-size: .58rem; font-weight: 950; letter-spacing: .12em; }
.challenge-card > span:nth-child(2) { min-width: 0; grid-column: 1 / -1; }
.challenge-card strong, .challenge-card small { display: block; }
.challenge-card strong { font-size: .78rem; }
.challenge-card small { margin-top: .22rem; color: #78837d; font-size: .63rem; line-height: 1.35; }
.challenge-card > .challenge-card-state { position: absolute; top: .55rem; right: .55rem; }

.game-screen.challenge-active { width: min(760px, calc(100% - 1rem)); }
.game-screen.challenge-active .game-layout { display: block; }
.game-screen.challenge-active .mobile-status,
.game-screen.challenge-active .game-panel { display: none; }
.challenge-coach {
  position: relative;
  margin: 0 2px .7rem;
  padding: .78rem .9rem .8rem;
  overflow: hidden;
  color: #eef8f2;
  border: 1px solid rgba(231,193,103,.28);
  background:
    radial-gradient(circle at 100% 0, rgba(238,187,67,.16), transparent 34%),
    linear-gradient(145deg, #214f3b, #102f27);
  border-radius: 20px;
  box-shadow: 0 13px 30px rgba(13,50,37,.2), inset 0 1px rgba(255,255,255,.08);
}
.challenge-coach[hidden] { display: none !important; }
.challenge-coach::after {
  content: "";
  position: absolute;
  right: -48px;
  bottom: -68px;
  width: 160px;
  height: 160px;
  border: 1px solid rgba(241,203,112,.1);
  border-radius: 50%;
  box-shadow: 0 0 0 25px rgba(241,203,112,.035);
  pointer-events: none;
}
.challenge-coach.is-complete { border-color: rgba(129,229,178,.48); background: radial-gradient(circle at 100% 0, rgba(100,222,167,.2), transparent 36%), linear-gradient(145deg, #286448, #12382c); animation: tutorial-success-in 480ms cubic-bezier(.2,.9,.25,1.12) both; }
.challenge-coach.is-failed { border-color: rgba(239,129,103,.38); background: radial-gradient(circle at 100% 0, rgba(238,109,83,.16), transparent 36%), linear-gradient(145deg, #5a3c32, #302921); }
.challenge-coach-top,
.challenge-coach-footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.challenge-coach-top { margin-bottom: .52rem; }
.challenge-coach-badge { color: #f0cd79; font-size: .59rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.challenge-exit {
  min-height: 44px;
  padding: .35rem .65rem;
  color: rgba(239,249,243,.76);
  border: 0;
  background: transparent;
  border-radius: 10px;
  font-size: .69rem;
  font-weight: 760;
  cursor: pointer;
}
.challenge-exit:hover { color: #fff; background: rgba(255,255,255,.08); }
.challenge-coach-message { position: relative; z-index: 1; display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: .8rem; }
.challenge-coach-token {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  color: #184635;
  border: 1px solid rgba(255,255,255,.7);
  background: linear-gradient(145deg, #fffef9, #e9ede8);
  border-radius: 50%;
  box-shadow: 0 7px 16px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.8);
  --piece-accent: #e3a83d;
  --piece-comb: #d45d55;
  --piece-line: #2c6650;
  --piece-eye: #0a261c;
}
.challenge-coach-token--fox { color: #f2763f; border-color: rgba(235,197,107,.42); background: linear-gradient(145deg, #194e3c, #092a21); --fox-inner: #ffc27d; --fox-cream: #fff1d4; }
.challenge-coach-token svg { width: 48px; height: 48px; }
.challenge-coach-message .eyebrow { margin-bottom: .15rem; color: #eac76f; font-size: .56rem; }
.challenge-coach-message h2 { color: #fff8e9; font-family: inherit; font-size: 1.12rem; font-weight: 850; }
.challenge-coach-message p:last-child { margin: .23rem 0 0; color: rgba(234,246,239,.73); font-size: .73rem; line-height: 1.38; }
.challenge-coach-footer { margin-top: .55rem; }
.challenge-metrics { display: flex; align-items: center; gap: .4rem; }
.challenge-metrics span { min-width: 62px; padding: .35rem .48rem; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.055); border-radius: 10px; }
.challenge-metrics small, .challenge-metrics strong { display: block; }
.challenge-metrics small { color: rgba(229,242,235,.56); font-size: .49rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.challenge-metrics strong { margin-top: .08rem; color: #fff2cf; font-size: .75rem; }
.challenge-retry { min-height: 44px; padding: .45rem .75rem; color: #eef8f2; border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.07); }
.game-screen.challenge-active .challenge-coach.is-complete + .board-shell { border-color: rgba(113,223,172,.48); box-shadow: 0 30px 68px rgba(13,38,31,.22), 0 0 42px rgba(84,217,157,.13), inset 0 1px rgba(255,255,255,.09); }
.game-screen.challenge-active .challenge-coach.is-failed + .board-shell { border-color: rgba(229,114,88,.38); }

@media (max-width: 759px) {
  .mode-card.mode-card--challenges { min-height: 69px; }
  .game-screen.challenge-active { width: calc(100% - .5rem); }
  .challenge-coach { margin: 0 2px 7px; padding: .52rem .62rem .58rem; border-radius: 17px; }
  .challenge-coach-top { margin-bottom: .3rem; }
  .challenge-coach-message { grid-template-columns: 44px minmax(0, 1fr); gap: .55rem; }
  .challenge-coach-token { width: 44px; height: 44px; }
  .challenge-coach-token svg { width: 38px; height: 38px; }
  .challenge-coach-message h2 { font-size: .94rem; line-height: 1.08; }
  .challenge-coach-message p:last-child { margin-top: .16rem; font-size: .67rem; line-height: 1.28; }
  .challenge-coach-footer { margin-top: .36rem; }
  .challenge-metrics span { min-width: 56px; padding: .28rem .4rem; }
  .challenge-retry { min-height: 44px; font-size: .69rem; }
}

@media (max-width: 560px) {
  .challenge-modal { padding: 1.2rem .75rem .85rem; }
  .challenge-modal h2 { font-size: 1.62rem; }
  .challenge-intro { font-size: .74rem; }
  .challenge-summary { margin-top: .72rem; }
  .daily-challenge-card { min-height: 80px; grid-template-columns: 52px minmax(0, 1fr) 28px; gap: .62rem; padding: .58rem .62rem; border-radius: 15px; }
  .daily-calendar { width: 50px; height: 54px; background: linear-gradient(#f6d77d 0 17px, #fffaf0 17px); }
  .daily-calendar strong { font-size: 1.08rem; }
  .daily-challenge-card > span:nth-child(2) strong { font-size: .88rem; }
  .daily-challenge-card > span:nth-child(2) em { font-size: .62rem; }
  .challenge-list { grid-template-columns: 1fr; gap: .45rem; }
  .challenge-card { min-height: 68px; display: grid; grid-template-columns: 30px minmax(0,1fr) 28px; grid-template-rows: 1fr; align-items: center; gap: .55rem; padding: .58rem .62rem; }
  .challenge-card > span:nth-child(2) { grid-column: auto; }
  .challenge-card > .challenge-card-state { position: static; }
  .challenge-card small { margin-top: .12rem; }
}

@media (max-width: 350px) {
  .challenge-coach-badge { font-size: .52rem; }
  .challenge-coach-message p:last-child { font-size: .62rem; }
  .challenge-metrics { gap: .25rem; }
  .challenge-metrics span { min-width: 50px; }
}

@media (prefers-color-scheme: dark) {
  .challenge-intro, .challenge-summary { color: #9daaa2; }
  .challenge-summary { border-color: rgba(232,205,140,.1); background: rgba(255,255,255,.04); }
  .challenge-summary strong { color: #eef4ef; }
  .challenge-card { color: #e8efe9; border-color: rgba(232,205,140,.1); background: rgba(255,255,255,.052); box-shadow: inset 0 1px rgba(255,255,255,.045); }
  .challenge-card:hover { border-color: rgba(232,205,140,.24); background: rgba(255,255,255,.075); }
  .challenge-card small { color: #99a69e; }
}

/* Stabiler, app-artiger Spielfluss ohne Layout-Shift beim Antippen und Ziehen. */
html { scrollbar-gutter: stable; }
.game-screen .board-column,
.game-screen .game-panel,
.game-screen .mobile-status,
.game-screen .board-hint { overflow-anchor: none; }
.game-screen .board-shell {
  contain: layout style;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.game-screen .board-stage,
.game-screen .board-nodes {
  contain: layout style;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.game-screen .piece { backface-visibility: hidden; }
.game-screen .piece.is-moving { z-index: 8; will-change: transform, opacity; pointer-events: none; }
.game-screen .mobile-status { font-variant-numeric: tabular-nums; }
.game-screen .mobile-turn-status,
.game-screen .mobile-score-status { contain: layout style; }
.game-screen .board-hint {
  width: 100%;
  max-width: none;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: 0;
  text-wrap: balance;
}

@media (max-width: 759px) {
  .game-screen .mobile-status { min-height: 54px; }
  .game-screen .board-hint {
    width: calc(100% - 4px);
    min-height: 52px;
    margin: .5rem 2px 0;
    padding: .5rem .72rem;
    border-radius: 13px;
  }
  .game-screen .action-row { min-height: 46px; }
}

@media (max-width: 360px) {
  .game-screen .board-hint { min-height: 56px; font-size: .69rem; }
}

@media (prefers-reduced-motion: reduce) {
  .game-screen .board-shell { transform: none; }
  .game-screen .piece.is-moving { will-change: auto; }
}