.game {
  position: relative;
  width: calc(100% - 32px);
  max-width: 1000px;
  margin: 0 auto 48px;
  padding: 24px 16px;
  background: rgba(244, 244, 244, 0.96);
  border: 4px solid var(--black);
  border-radius: 16px;
  text-align: center;
}
.game .intro { max-width: 60ch; margin: 0 auto 16px; }

.hud {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);   /* feste Spalten, unabhängig vom Inhalt */
  gap: 10px;
  max-width: 560px;
  margin: 0 auto 14px;
}
@media (max-width: 520px) {
  .hud { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stat.wind { grid-column: 1 / -1; }
}
.stat {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 10px 10px;
  background: var(--black);
  color: #f4f4f4;
  border: 3px solid var(--black);
  border-radius: 12px;
  box-shadow: inset 0 -4px 0 var(--red);
}
.stat .lbl { font: 700 11px system-ui, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75; }
.stat .val { font: 400 28px/1.1 Impact, "Arial Black", sans-serif; letter-spacing: 0.02em; min-height: 31px; display: inline-flex; align-items: center; gap: 8px; }
.stat.wind .val { font: 700 17px/1.1 system-ui, sans-serif; letter-spacing: 0; min-height: 31px; white-space: nowrap; }
#wind-arrow { display: inline-flex; transition: transform 0.4s; }

#board {
  display: block;
  width: 100%;
  height: auto;
  border: 3px solid var(--black);
  border-radius: 12px;
  background: #cfe6b8;
}

.controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
}
.game .btn { cursor: pointer; font-size: 1.1rem; }
.game .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

#msg { min-height: 2.8em; margin: 14px 0 0; font-weight: 600; }
#msg.good { color: #1c8a3c; }
#msg.bad { color: var(--red); }


/* Fan-Poster */
#board text { font-family: system-ui, "Segoe UI", sans-serif; }
#board .poster-big { font: 900 68px Impact, "Arial Black", sans-serif; fill: #111; letter-spacing: 2px; }
#board .poster-sub { font: 700 20px system-ui, sans-serif; fill: #111; }
#board .end { text-anchor: end; }
#board .sign { font: 900 20px Impact, sans-serif; fill: #111; text-anchor: middle; }
#board .sign.small { font: 700 12px system-ui, sans-serif; letter-spacing: 0.04em; }
#board .lab { font: 700 18px system-ui, sans-serif; fill: #f4f4f4; text-anchor: middle; }
#board .lab.dim { opacity: 0.7; }
#board .pts { font: 900 26px Impact, sans-serif; fill: #ff8a8f; text-anchor: middle; }
#board .pts.good { fill: #f4f4f4; }
#board .pts.dim { fill: #f4f4f4; opacity: 0.7; }
#board .poi-label { font: 700 18px system-ui, sans-serif; text-anchor: middle; fill: #111; paint-order: stroke; stroke: #f4f4f4; stroke-width: 4px; }
#board .score-tip { font: 900 42px Impact, sans-serif; text-anchor: middle; fill: #f4f4f4; paint-order: stroke; stroke: #111; stroke-width: 6px; }
#board .score-tip.good { fill: #fff; }
#board .score-tip.bad { fill: #ff6068; }
#board .twinkle { animation: twinkle 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
#board .fly { animation: fly 3s ease-in-out infinite; }
#board .stink { animation: stink 5s ease-in-out infinite; }
#board .rat { animation: scurry 7s ease-in-out infinite; }
#board .burst { animation: pop 0.4s ease-out; }
#board .wind.to-left line { animation: wind-left 1.2s linear infinite; }
#board .wind.to-right line { animation: wind-right 1.2s linear infinite; }
@media (max-width: 640px) { #board .lab, #board .poi-label { display: none; } #board .pts { font-size: 32px; } }
/* Handy hochkant: weniger Rand und eine einzeilige Anzeige, damit das Spiel so groß wie möglich wird */
@media (max-width: 520px) {
  .game { width: calc(100% - 12px); padding: 14px 8px 12px; border-width: 3px; }
  .game h2 { font-size: 1.35rem; margin-bottom: 0.35em; }
  .game .intro { font-size: 0.95rem; margin-bottom: 10px; }
  .hud { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.8fr); gap: 6px; margin-bottom: 10px; }
  .stat.wind { grid-column: auto; }
  .stat { padding: 5px 4px 7px; border-width: 2.5px; border-radius: 10px; }
  .stat .lbl { font-size: 10px; }
  .stat .val { font-size: 22px; min-height: 24px; }
  .stat.wind .val { font-size: clamp(11px, 3.5vw, 14px); min-height: 24px; gap: 5px; }
  #wind-arrow svg { width: 16px; height: 16px; }
  #board { border-width: 2px; border-radius: 8px; }
  #board .pts { font-size: 46px; }
}

/* Handy quer: Spiel groß links, Anzeige und Knöpfe schmal daneben */
@media (orientation: landscape) and (max-height: 520px) {
  .game {
    width: calc(100% - 16px);
    max-width: none;
    margin: 8px auto 14px;
    padding: 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    grid-template-areas: "board hud" "board controls" "board msg";
    grid-template-rows: auto auto 1fr;
    gap: 8px 12px;
    align-items: start;
  }
  .game h2, .game .intro { display: none; }
  #board { grid-area: board; width: 100%; height: auto; }
  .hud { grid-area: hud; grid-template-columns: 1fr 1fr; gap: 6px; max-width: none; margin: 0; }
  .stat.wind { grid-column: 1 / -1; }
  .stat { padding: 3px 6px 6px; }
  .stat .lbl { font-size: 9px; }
  .stat .val { font-size: 20px; min-height: 22px; }
  .stat.wind .val { font-size: 14px; min-height: 22px; }
  .controls { grid-area: controls; margin: 0; flex-direction: column; gap: 8px; }
  .controls .btn { width: 100%; padding: 10px 12px; font-size: 1rem; }
  #msg { grid-area: msg; margin: 0; min-height: 0; padding-right: 46px; font-size: 0.85rem; text-align: left; }
  .game .sound { top: auto; bottom: 10px; right: 10px; }
}

@keyframes twinkle { 50% { opacity: 0.2; transform: scale(0.7); } }
@keyframes fly { 25% { transform: translate(8px, -6px); } 50% { transform: translate(-6px, 6px); } 75% { transform: translate(5px, 8px); } }
@keyframes stink { 50% { transform: translate(10px, -12px); } }
@keyframes scurry {
  0% { transform: translateX(0) scaleX(1); }
  42% { transform: translateX(85px) scaleX(1); }
  50% { transform: translateX(85px) scaleX(-1); }
  92% { transform: translateX(0) scaleX(-1); }
  100% { transform: translateX(0) scaleX(1); }
}
@keyframes pop { from { transform: scale(0.2); } }
@keyframes wind-left { to { transform: translateX(-60px); opacity: 0; } }
@keyframes wind-right { to { transform: translateX(60px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #board * { animation: none !important; } }

.sound {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--black);
  background: #fff;
  border: 2.5px solid var(--black);
  border-radius: 50%;
  cursor: pointer;
}
.sound:hover { background: #ececec; }
.sound:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.sound .wellen { display: none; }
.sound.an .wellen { display: inline; }
.sound.an .strich { display: none; }

.game [hidden] { display: none; }