/* Honig-Duell – spielfeldzentriertes, kompaktes Game-UI. */

:root {
  --ink: #3b2415;
  --ink-soft: #76512f;
  --paper: #fff9e7;
  --paper-strong: #fffef8;
  --honey: #ffc928;
  --honey-light: #ffe476;
  --sun: #ffd43b;
  --sun-deep: #e69a16;
  --grass: #45c769;
  --side0: #168ce8;
  --side0-dark: #0865b9;
  --side1: #ef514d;
  --side1-dark: #bd302e;
  --cell: #fff6d5;
  --line: 3px solid var(--ink);
  --shadow: 4px 5px 0 rgba(59, 36, 21, 0.92);
  --font: "Comic Sans MS", "Chalkboard SE", "Comic Neue", "Segoe Print", cursive, sans-serif;
  --board-size: min(60vh, 610px, calc(100vw - 150px));
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; min-height: 100%; }

body {
  min-height: 100vh;
  padding: 8px;
  overflow-x: hidden;
  font-family: var(--font);
  color: var(--ink);
  background:
    linear-gradient(120deg, transparent 48%, rgba(255, 255, 255, 0.12) 50%, transparent 52%) 0 0 / 80px 80px,
    radial-gradient(circle at 50% 52%, var(--honey-light) 0, var(--honey) 56%, #f3aa16 100%);
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  opacity: 0.14;
  background: repeating-radial-gradient(circle at 50% 55%, transparent 0 52px, #fff 53px 55px);
  pointer-events: none;
}

.app {
  width: min(100%, 1500px);
  min-height: calc(100vh - 16px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card {
  background: rgba(255, 249, 231, 0.96);
  border: var(--line);
  box-shadow: var(--shadow);
}

/* ---------- Kompakte Kopfleiste ---------- */

.topbar {
  position: relative;
  isolation: isolate;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 18px 10px 104px;
  border: 3px solid #2b150a;
  border-radius: 24px 20px 23px 20px;
  background:
    repeating-linear-gradient(2deg, rgba(255, 223, 156, 0.07) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(93deg, transparent 0 74px, rgba(30, 12, 5, 0.35) 75px 78px, transparent 79px 146px),
    linear-gradient(180deg, #74431f 0%, #4a2815 46%, #32180c 100%);
  box-shadow:
    0 4px 0 #1f0d06,
    0 9px 0 rgba(59, 36, 21, 0.34),
    inset 0 2px 0 rgba(255, 231, 176, 0.25);
}

.topbar::before {
  position: absolute;
  inset: 7px;
  z-index: -1;
  border: 2px solid #9c5a0a;
  border-radius: 17px 14px 16px 14px;
  background:
    repeating-linear-gradient(60deg, transparent 0 18px, rgba(119, 65, 5, 0.08) 18px 20px, transparent 20px 38px),
    repeating-linear-gradient(-60deg, transparent 0 18px, rgba(255, 247, 181, 0.12) 18px 20px, transparent 20px 38px),
    linear-gradient(180deg, #ffe36a 0%, #ffc727 54%, #ee9f0f 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 246, 174, 0.82),
    inset 0 -8px 13px rgba(168, 80, 0, 0.2),
    0 0 0 2px rgba(37, 15, 6, 0.54);
  content: "";
}

.brandLockup {
  min-width: 0;
  display: flex;
  align-items: center;
}

.brandMedallion {
  position: absolute;
  left: 10px;
  top: 50%;
  z-index: 4;
  width: 88px;
  height: 88px;
  display: block;
  transform: translateY(-50%);
  filter: drop-shadow(3px 5px 0 rgba(43, 21, 10, 0.62));
  animation: brandSealArrival 0.72s cubic-bezier(0.16, 0.8, 0.25, 1.15) both;
}

.brandMedallion img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.topbar h1 {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #47230f;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(1.8rem, 3.6vw, 3.15rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow:
    1px 0 #fff2a1,
    -1px 0 #fff2a1,
    0 1px #fff2a1,
    0 -1px #fff2a1,
    3px 4px 0 rgba(124, 60, 5, 0.34);
}

.topInfo {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border: 2px solid #2b150a;
  border-radius: 16px;
  background:
    repeating-linear-gradient(3deg, rgba(255, 225, 169, 0.06) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #5c321a, #32180c);
  box-shadow:
    inset 0 0 0 2px rgba(216, 137, 11, 0.42),
    inset 0 5px 8px rgba(24, 9, 3, 0.34),
    0 2px 0 rgba(255, 241, 166, 0.58);
}
.audioControls { display: flex; gap: 4px; }

.honeyDrips {
  position: absolute;
  inset: auto 8px -14px;
  z-index: 1;
  height: 24px;
  pointer-events: none;
}

.honeyDrips i {
  position: absolute;
  top: 0;
  width: 15px;
  height: 23px;
  border: 2px solid #7c430b;
  border-top: 0;
  border-radius: 3px 3px 11px 11px;
  background: linear-gradient(90deg, #f5a912, #ffd84d 46%, #df8706);
  box-shadow: inset 2px 0 0 rgba(255, 242, 149, 0.65), 0 2px 0 rgba(59, 36, 21, 0.28);
}
.honeyDrips i:nth-child(1) { left: 24%; height: 19px; }
.honeyDrips i:nth-child(2) { left: 55%; width: 18px; height: 25px; }
.honeyDrips i:nth-child(3) { left: 82%; height: 17px; }

@keyframes brandSealArrival {
  from { transform: translate(-18px, -50%) rotate(-8deg) scale(0.72); opacity: 0; }
  72% { transform: translate(2px, -50%) rotate(2deg) scale(1.06); opacity: 1; }
  to { transform: translateY(-50%) rotate(0) scale(1); opacity: 1; }
}

.audioToggle {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 1px 2px 0 rgba(59, 36, 21, 0.62);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.12s, background 0.2s;
}

.audioToggle[aria-pressed="false"] { background: #eadfc5; opacity: 0.62; filter: grayscale(0.7); }
.audioToggle:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.audioToggle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.audioToggle:disabled { opacity: 0.35; cursor: default; }

.badge {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  font-weight: 900;
  font-size: 0.86rem;
}

.badge.conn.online { color: #137b32; }
.badge.conn.offline { color: var(--side1-dark); }
.connDot { font-size: 0.78rem; }
.badge.conn.online .connText::after { content: "Online"; }
.badge.conn.offline .connText::after { content: "Offline"; }

.topInfo .audioToggle,
.topInfo .badge {
  border-color: #bd7414;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 1px 2px 0 rgba(22, 8, 3, 0.72);
}
.topInfo .badge { background: linear-gradient(#fff8d9, #f3d78e); }
.topInfo .badge.conn {
  border-color: #a55f10;
  background: linear-gradient(#402112, #271108);
  box-shadow: inset 0 1px 0 rgba(255, 217, 117, 0.18), 1px 2px 0 rgba(22, 8, 3, 0.72);
}
.topInfo .badge.conn.online { color: #8eea57; }
.topInfo .badge.conn.offline { color: #ff8a77; }

/* ---------- Spielstand und Zugstatus ---------- */

.gameArea {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.versusHud {
  position: relative;
  width: min(100%, 1100px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px minmax(0, 1fr);
  align-items: center;
}

.playerCard {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 106px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 38px;
  color: #fff;
  border: 0;
  background: transparent;
  transition: filter 0.2s, transform 0.2s;
}

.playerCard::before {
  position: absolute;
  inset: 19px 34px;
  z-index: 0;
  clip-path: polygon(7% 0, 93% 0, 100% 22%, 100% 78%, 93% 100%, 7% 100%, 0 78%, 0 22%);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.18), inset 0 -13px 18px rgba(24, 11, 7, 0.24);
  content: "";
}

.playerCard::after {
  position: absolute;
  inset: -7px -12px;
  z-index: 1;
  background: url("assets/player-plaque-frame.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(3px 5px 0 rgba(45, 20, 8, 0.48));
  content: "";
  pointer-events: none;
}

.playerCard > * { position: relative; z-index: 3; }
.playerCard.side0::before {
  background:
    repeating-linear-gradient(60deg, transparent 0 19px, rgba(255, 255, 255, 0.05) 19px 21px, transparent 21px 40px),
    linear-gradient(155deg, #2ca9ff, var(--side0-dark));
}
.playerCard.side1 { justify-content: flex-end; text-align: right; }
.playerCard.side1::before {
  background:
    repeating-linear-gradient(-60deg, transparent 0 19px, rgba(255, 255, 255, 0.05) 19px 21px, transparent 21px 40px),
    linear-gradient(155deg, #ff7167, var(--side1-dark));
}

.playerCard.active { z-index: 5; transform: translateY(-4px); filter: brightness(1.08) drop-shadow(0 0 5px #fff1a6); }

.playerTag {
  flex: 0 0 auto;
  padding: 2px 7px;
  border: 2px solid #d8890b;
  border-radius: 999px;
  background: linear-gradient(#4f2b17, #291309);
  box-shadow: inset 0 1px 0 rgba(255, 239, 163, 0.25), 1px 2px 0 rgba(38, 16, 7, 0.52);
  color: #ffe982;
  font-size: 0.72rem;
  font-weight: 900;
}

.playerCopy { min-width: 0; display: flex; flex: 1; flex-direction: column; }
.playerName { overflow: hidden; font-size: clamp(1.05rem, 2.2vw, 1.55rem); font-weight: 900; text-overflow: ellipsis; text-shadow: 2px 3px 0 rgba(45, 20, 8, 0.54); white-space: nowrap; }
.playerState { min-height: 1em; overflow: hidden; font-size: 0.68rem; opacity: 0.9; text-overflow: ellipsis; white-space: nowrap; }

.scoreHive {
  position: relative;
  flex: 0 0 auto;
  min-width: clamp(138px, 13.5vw, 158px);
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 16px;
}

.scoreHive::before {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 132px;
  height: 112px;
  background: url("assets/score-crest.webp") center / 100% 100% no-repeat;
  content: "";
  filter: drop-shadow(3px 5px 0 rgba(45, 20, 8, 0.48));
  transform: translate(-50%, -48%);
}

.scoreProgress {
  --bee-progress: 0;
  --progress-color: #65c7ff;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 138px;
  height: 108px;
  border-radius: 50%;
  background: conic-gradient(from -90deg, var(--progress-color) calc(var(--bee-progress) * 1turn), rgba(255, 248, 190, 0.12) 0);
  filter: drop-shadow(0 0 4px var(--progress-color));
  opacity: 0;
  transform: translate(-50%, -48%);
  transition: opacity 0.25s, --bee-progress 0.35s ease;
  -webkit-mask: radial-gradient(ellipse at center, transparent 0 62%, #000 64% 68%, transparent 70%);
  mask: radial-gradient(ellipse at center, transparent 0 62%, #000 64% 68%, transparent 70%);
  pointer-events: none;
}
.side1 .scoreProgress { --progress-color: #ff8a77; }
.scoreProgress.active { opacity: 1; }

.score {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  color: #fffdf1;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  max-width: 116px;
  font-size: clamp(2.05rem, 3.75vw, 3.05rem);
  font-weight: 900;
  letter-spacing: 0.5px;
  line-height: 0.86;
  -webkit-text-stroke: 1.5px #3b2415;
  text-shadow: 2px 3px 0 rgba(59, 36, 21, 0.62);
}
.score.compact { font-size: clamp(1.8rem, 3.2vw, 2.58rem); letter-spacing: -0.04em; }
.score::after { display: block; margin-top: 5px; color: var(--ink); font: 900 0.46rem/1 var(--font); letter-spacing: 0.8px; content: "Nektar"; text-align: center; text-shadow: none; text-transform: uppercase; -webkit-text-stroke: 0; }
.turnFocus {
  position: relative;
  isolation: isolate;
  z-index: 6;
  min-width: 0;
  min-height: 136px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-inline: -10px;
  padding: 8px 10px 6px;
  color: var(--paper);
  text-align: center;
  clip-path: polygon(18% 0, 82% 0, 100% 18%, 100% 82%, 82% 100%, 18% 100%, 0 82%, 0 18%);
  background: #291309;
  filter: drop-shadow(3px 5px 0 rgba(45, 20, 8, 0.48));
  transition: filter 0.25s;
}
.turnFocus::before {
  position: absolute;
  inset: 4px;
  z-index: -1;
  clip-path: inherit;
  background:
    repeating-linear-gradient(3deg, rgba(255, 225, 169, 0.06) 0 2px, transparent 2px 7px),
    linear-gradient(#5a3119, #32180c);
  box-shadow: inset 0 0 0 2px #a86110;
  content: "";
}
.versusHud.turn-side-0 .turnFocus { filter: drop-shadow(0 0 5px rgba(22, 140, 232, 0.76)) drop-shadow(3px 5px 0 rgba(45, 20, 8, 0.48)); }
.versusHud.turn-side-1 .turnFocus { filter: drop-shadow(0 0 5px rgba(239, 81, 77, 0.76)) drop-shadow(3px 5px 0 rgba(45, 20, 8, 0.48)); }

.turnEyebrow { position: relative; z-index: 5; color: #ffe982; font-size: 0.58rem; font-weight: 900; letter-spacing: 1.15px; line-height: 1; text-transform: uppercase; }
.bloomQueue {
  position: relative;
  width: 100%;
  height: 102px;
  display: block;
  flex: 0 0 auto;
}
.followingPreview {
  position: absolute;
  left: 50%;
  top: 1px;
  z-index: 1;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 2px solid #8a4b0c;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 32%, #f9e9a1, #bd7816 69%, #663108 73%);
  box-shadow: inset 0 0 0 2px rgba(65, 28, 8, 0.42);
  opacity: 0.78;
  transform: translateX(-50%);
}
.followingTile {
  display: grid;
  place-items: center;
  font-size: 2rem;
  line-height: 1;
  filter: saturate(0.82) drop-shadow(1px 2px 0 rgba(59, 36, 21, 0.32));
}
.followingTile.revealed { animation: followingBloomPeek 0.42s ease-out; }
.nextPreview {
  position: absolute;
  left: 50%;
  top: 27px;
  z-index: 3;
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border: 3px solid #d8890b;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 32%, #fff9c7, #f2b51e 68%, #8b480b 72%);
  box-shadow: inset 0 0 0 3px rgba(65, 28, 8, 0.48), 0 4px 0 rgba(29, 12, 5, 0.62);
  transform: translateX(-50%);
}
.nextTile { position: relative; z-index: 3; display: grid; place-items: center; font-size: 3.15rem; line-height: 1; filter: drop-shadow(2px 3px 0 rgba(59, 36, 21, 0.34)); }
.nextTile img, .followingTile img { width: 1em; height: 1em; display: block; object-fit: contain; }
.nextTile.revealed { animation: nextBloomDrop 0.5s ease-out; }
@keyframes nextBloomDrop { 0% { transform: translateY(-23px) scale(0.62); opacity: 0.5; } 72% { transform: translateY(3px) scale(1.1); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes followingBloomPeek { 0% { transform: translateY(-7px) scale(0.72); opacity: 0; } 100% { transform: none; opacity: 1; } }
.turnNumber {
  position: relative;
  z-index: 5;
  padding: 1px 8px;
  border: 1px solid rgba(255, 229, 130, 0.46);
  border-radius: 999px;
  color: #f1d48b;
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.9px;
  line-height: 1.25;
}

.timerRing { position: absolute; inset: -6px; z-index: 4; border-radius: 50%; pointer-events: none; }
#timerBar {
  --timer-color: #8eea57;
  --timer-progress: 1;
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  background: conic-gradient(from -90deg, var(--timer-color) calc(var(--timer-progress) * 1turn), rgba(255, 255, 255, 0.2) 0);
  filter: drop-shadow(0 0 3px var(--timer-color));
  transition: --timer-progress 0.25s linear, --timer-color 0.25s;
  -webkit-mask: radial-gradient(circle, transparent 0 77%, #000 79% 92%, transparent 94%);
  mask: radial-gradient(circle, transparent 0 77%, #000 79% 92%, transparent 94%);
}
.timerText {
  position: absolute;
  right: -8px;
  bottom: -3px;
  z-index: 5;
  min-width: 25px;
  padding: 1px 4px;
  border: 1px solid #8a4b0c;
  border-radius: 999px;
  background: #fff4bb;
  color: var(--ink);
  font: 900 0.48rem/1.2 Arial, sans-serif;
  text-align: center;
}
.status {
  width: max-content;
  max-width: calc(100% - 30px);
  min-height: 1.4em;
  margin: 1px 0 0;
  padding: 2px 10px;
  border: 1px solid rgba(123, 66, 13, 0.34);
  border-radius: 999px;
  background: rgba(255, 249, 218, 0.56);
  color: rgba(59, 36, 21, 0.78);
  font-size: clamp(0.6rem, 1.05vw, 0.76rem);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  pointer-events: none;
  transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.status.emphasis { border-color: #9c580a; background: linear-gradient(#ffe982, #ffc928); box-shadow: 0 2px 0 rgba(59, 36, 21, 0.28); color: var(--ink); font-weight: 900; }

.cheerToggle {
  position: absolute;
  top: calc(100% + 8px);
  z-index: 16;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 11px;
  background: var(--paper-strong);
  box-shadow: 2px 3px 0 var(--ink);
  font-size: 1rem;
  cursor: pointer;
}

.cheerToggle[aria-expanded="true"] { background: var(--sun); transform: translateY(2px); box-shadow: 1px 1px 0 var(--ink); }
.cheerToggle:disabled { display: none; }
.side0 .cheerToggle { left: 4px; }
.side1 .cheerToggle { right: 4px; }

.cheerTray {
  position: fixed;
  z-index: 24;
  display: grid;
  grid-template-columns: repeat(6, 36px);
  gap: 6px;
  padding: 8px;
  border: 2px solid var(--ink);
  border-radius: 13px;
  background: rgba(255, 249, 231, 0.98);
  box-shadow: 3px 4px 0 rgba(59, 36, 21, 0.72);
}

.cheerBtn {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--paper-strong);
  box-shadow: 2px 3px 0 var(--ink);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}

.cheerBtn:disabled { opacity: 0.38; cursor: default; }

/* ---------- Brett als visueller Mittelpunkt ---------- */

.boardZone { position: relative; display: flex; flex-direction: column; align-items: center; }

.boardScoreLayer {
  position: absolute;
  inset: 50px 48px 0;
  z-index: 9;
  display: grid;
  place-items: center;
  overflow: visible;
  pointer-events: none;
}

.boardScorePopup {
  --score-side: var(--side0);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff8c7;
  text-align: center;
  filter: drop-shadow(4px 5px 0 rgba(59, 36, 21, 0.62));
  animation: boardScoreBurst 0.95s cubic-bezier(0.16, 0.76, 0.24, 1) forwards;
  will-change: transform, opacity;
}

.boardScorePopup.side1 { --score-side: var(--side1); }
.boardScorePopup b {
  color: #fff8c7;
  font-size: clamp(3.6rem, calc(var(--board-size) / 5), 7rem);
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: -0.08em;
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
}
.boardScorePopup small {
  margin-top: 8px;
  padding: 2px 9px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1.1;
  text-transform: uppercase;
}
.boardScorePopup.combo b { color: var(--sun); }
.comboLabel {
  margin-bottom: 9px;
  padding: 4px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--score-side);
  box-shadow: 2px 3px 0 var(--ink);
  color: #fff;
  font-size: clamp(0.9rem, 2.3vw, 1.35rem);
  font-weight: 900;
  letter-spacing: 0.7px;
  line-height: 1;
}

@keyframes boardScoreBurst {
  0% { transform: translateY(22px) scale(0.28) rotate(-4deg); opacity: 0; }
  22% { transform: translateY(0) scale(1.18) rotate(1deg); opacity: 1; }
  56% { transform: scale(1) rotate(0); opacity: 1; }
  100% { transform: translateY(-26px) scale(1.32); opacity: 0; }
}

.boardGrid {
  display: grid;
  grid-template-areas: ". top ." "left board right";
  grid-template-columns: 48px var(--board-size) 48px;
  grid-template-rows: 46px var(--board-size);
  gap: 6px;
  justify-content: center;
  margin-top: -2px;
}

#board {
  position: relative;
  grid-area: board;
  display: grid;
  grid-template: repeat(5, 1fr) / repeat(5, 1fr);
  gap: 5px;
  padding: 8px;
  aspect-ratio: 1;
  border: 5px solid var(--ink);
  border-radius: 14px;
  background: linear-gradient(145deg, #8f541c, #d28a26);
  box-shadow: inset 0 0 0 2px #f6b83f;
}

#board::before {
  position: absolute;
  inset: -8px;
  z-index: 2;
  border: 3px solid #f3a915;
  border-radius: 20px;
  content: "";
  box-shadow:
    inset 0 0 0 1px #fff0a0,
    0 0 0 2px #6f3c13,
    3px 4px 0 rgba(59, 36, 21, 0.48);
  pointer-events: none;
  transition: filter 0.25s;
}

.boardZone.turn-side-0 #board::before {
  filter: drop-shadow(0 0 5px rgba(22, 140, 232, 0.72));
}

.boardZone.turn-side-1 #board::before {
  filter: drop-shadow(0 0 5px rgba(239, 81, 77, 0.72));
}

.cell {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(59, 36, 21, 0.76);
  border-radius: 10px;
  background: linear-gradient(145deg, #fffdf2, var(--cell));
  box-shadow: inset 0 -3px 0 rgba(230, 154, 22, 0.18);
  font-size: clamp(1.4rem, calc(var(--board-size) / 7.6), 4.3rem);
  user-select: none;
}

.cell.tile-tile1 { background: linear-gradient(145deg, #f9fff1, #dff2ba); }
.cell.tile-tile2 { background: linear-gradient(145deg, #fffef0, #ffeaa0); }
.cell.tile-tile3 { background: linear-gradient(145deg, #fff7fa, #ffd9e6); }
.cell.tile-tile4 { background: linear-gradient(145deg, #fbf8ff, #e4d4f5); }
.cell.tile-tile5 { background: linear-gradient(145deg, #fffbed, #ffd58a); }
.tileImage { width: 88%; height: 88%; display: block; object-fit: contain; pointer-events: none; }

.cell.matched { z-index: 1; background: #ffef7a; animation: popMatch 0.5s ease-in-out infinite; }
@keyframes popMatch { 50% { transform: scale(1.14) rotate(4deg); } }

.nectarDrop {
  position: absolute;
  left: calc(50% - 5px);
  top: 42%;
  z-index: 4;
  width: 10px;
  height: 13px;
  border: 1.5px solid #7b470c;
  border-radius: 70% 45% 65% 55%;
  background: linear-gradient(145deg, #fff49b, #e89c0d);
  box-shadow: 0 2px 0 rgba(59, 36, 21, 0.35);
  pointer-events: none;
  animation: nectarRise 0.72s ease-out forwards;
}

@keyframes nectarRise {
  0% { transform: translate(0, 0) rotate(35deg) scale(0.35); opacity: 0; }
  28% { opacity: 1; }
  100% { transform: translate(var(--drift), -56px) rotate(35deg) scale(1); opacity: 0; }
}

.controls { display: grid; gap: 5px; }
.controls.top { grid-area: top; grid-template-columns: repeat(5, 1fr); padding: 0 8px; }
.controls.left { grid-area: left; grid-template-rows: repeat(5, 1fr); padding: 8px 0; }
.controls.right { grid-area: right; grid-template-rows: repeat(5, 1fr); padding: 8px 0; }

.push-button {
  position: relative;
  width: 38px;
  height: 38px;
  align-self: center;
  justify-self: center;
  padding: 0;
  border: var(--line);
  border-radius: 10px;
  background: linear-gradient(#ffe75d, #ffbd16);
  color: var(--ink);
  box-shadow: 3px 4px 0 var(--ink);
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 900;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.1s, box-shadow 0.1s, opacity 0.2s;
}

.push-button::after { position: absolute; inset: -5px; border-radius: 12px; content: ""; }
.push-button:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.push-button:disabled { opacity: 0.22; cursor: default; filter: grayscale(0.55); }

@media (hover: hover) and (pointer: fine) {
  .push-button:hover:not(:disabled), .cheerBtn:hover:not(:disabled), .audioToggle:hover:not(:disabled), .btn:hover:not(:disabled) { transform: translate(-2px, -2px); filter: brightness(1.06); }
}

/* ---------- Schwärme an den Punkteständen ---------- */

.bottomDock {
  display: contents;
}

.mascots {
  position: absolute;
  left: 50%;
  top: -16px;
  z-index: 6;
  width: max-content;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%);
  pointer-events: none;
}

.mascot {
  --bee-facing: 1;
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: 32px;
  height: 34px;
  background: url("assets/bee-mascot.webp") center / contain no-repeat;
  filter: drop-shadow(1px 2px 0 rgba(59, 36, 21, 0.42));
  transform: scaleX(var(--bee-facing));
  transform-origin: center;
}

.mascot + .mascot { margin-left: -10px; }
.mascot:nth-child(3n + 1) { top: 4px; }
.mascot:nth-child(3n + 2) { top: -3px; }
.mascot.owner-0 { --bee-facing: -1; }
.playerCard.active .mascot:not(.moved-to-0):not(.moved-to-1) {
  animation: beeHover 1.15s calc(var(--bee-index) * -0.13s) ease-in-out infinite alternate;
}
.mascot.moved-to-0 { z-index: 12; animation: beeFlyLeft 0.8s cubic-bezier(0.2, 0.72, 0.24, 1); }
.mascot.moved-to-1 { z-index: 12; animation: beeFlyRight 0.8s cubic-bezier(0.2, 0.72, 0.24, 1); }
@keyframes beeHover {
  from { transform: translateY(1px) rotate(-2deg) scaleX(var(--bee-facing)); }
  to { transform: translateY(-3px) rotate(3deg) scaleX(var(--bee-facing)); }
}
@keyframes beeFlyLeft {
  0% { transform: translateX(clamp(135px, 24vw, 330px)) translateY(4px) scaleX(var(--bee-facing)) rotate(14deg); opacity: 0.55; }
  50% { transform: translateX(42%) translateY(-22px) scaleX(var(--bee-facing)) rotate(-12deg); opacity: 1; }
  100% { transform: translateX(0) translateY(0) scaleX(var(--bee-facing)); }
}
@keyframes beeFlyRight {
  0% { transform: translateX(clamp(-330px, -24vw, -135px)) translateY(4px) scaleX(var(--bee-facing)) rotate(-14deg); opacity: 0.55; }
  50% { transform: translateX(-42%) translateY(-22px) scaleX(var(--bee-facing)) rotate(12deg); opacity: 1; }
  100% { transform: translateX(0) translateY(0) scaleX(var(--bee-facing)); }
}

.spectatorBar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto;
  padding: 6px 10px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 2px 3px 0 rgba(59, 36, 21, 0.72);
  font-size: 0.75rem;
  font-weight: 900;
}

/* ---------- Allgemeine Buttons und Dialoge ---------- */

.btn {
  padding: 9px 18px;
  border: var(--line);
  border-radius: 12px;
  background: var(--sun);
  color: var(--ink);
  box-shadow: 3px 4px 0 var(--ink);
  font: 900 0.98rem var(--font);
  cursor: pointer;
}

.btn.small { padding: 5px 10px; font-size: 0.76rem; }
.btn.ghost { background: #fff; }
.btn.danger { background: var(--side1); color: #fff; }
.btn.go { background: var(--grass); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

.overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 201, 40, 0.22), transparent 34%),
    rgba(43, 21, 10, 0.82);
  backdrop-filter: blur(4px);
}

.overlayCard {
  width: min(100%, 620px);
  min-width: 0;
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 28px;
  border-radius: 18px;
  text-align: center;
}

.overlayCard h2 { margin: 0; font-size: 1.9rem; text-shadow: 2px 2px 0 var(--sun); }
.overlayCard p { margin: 0; }
.overlayCard input[type="text"] { padding: 10px 14px; border: var(--line); border-radius: 10px; background: #fff; font: 1.05rem var(--font); text-align: center; }
.timerChoices, .voteRow { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.timerChoices label { padding: 6px 12px; border: var(--line); border-radius: 10px; background: #fff; font-size: 0.9rem; font-weight: 900; cursor: pointer; }
.timerChoices input { margin-right: 5px; }
.timerChoices label:has(input:checked) { background: var(--sun); }
.countdown { color: var(--side1); font-size: 1.8rem; font-weight: 900; }
.bigEmoji { font-size: 3rem; line-height: 1; }

/* ---------- Starttafel ---------- */

.overlayCard:has(.startSetup) {
  position: relative;
  width: min(calc(100% - 24px), 560px);
  gap: 0;
  padding: 82px 30px 26px;
  overflow-x: hidden;
  border: 5px solid #2b150a;
  border-radius: 26px 22px 25px 22px;
  outline: 2px solid rgba(244, 184, 72, 0.72);
  outline-offset: -10px;
  background:
    repeating-linear-gradient(2deg, rgba(130, 79, 25, 0.045) 0 2px, transparent 2px 9px),
    radial-gradient(circle at 50% 22%, rgba(255, 224, 101, 0.5), transparent 38%),
    linear-gradient(105deg, #f1cf7b, #fff4cb 48%, #e7bb61);
  box-shadow:
    inset 0 0 30px rgba(124, 68, 17, 0.22),
    0 18px 45px rgba(38, 18, 6, 0.5),
    0 5px 0 #1e0c05;
  animation: startCardArrival 0.42s cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.overlayCard:has(.startSetup)::before,
.overlayCard:has(.startSetup)::after {
  position: absolute;
  top: 22px;
  z-index: 5;
  width: 9px;
  height: 9px;
  border: 2px solid #5d310f;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe9a1, #b56b16 62%, #63330c);
  box-shadow: 0 1px 0 rgba(255, 246, 184, 0.45);
  content: "";
}

.overlayCard:has(.startSetup)::before { left: 20px; }
.overlayCard:has(.startSetup)::after { right: 20px; }

.overlayCard:has(.startSetup) > h2 {
  position: absolute;
  inset: 14px 50% auto auto;
  z-index: 4;
  width: min(78%, 400px);
  margin: 0;
  padding: 11px 28px 10px;
  border: 3px solid #2b150a;
  border-radius: 15px 13px 15px 13px;
  color: #47230f;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  line-height: 0.92;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-shadow:
    1px 0 #fff2a1,
    -1px 0 #fff2a1,
    0 1px #fff2a1,
    0 -1px #fff2a1,
    3px 4px 0 rgba(124, 60, 5, 0.3);
  transform: translateX(50%) rotate(-0.6deg);
  background:
    repeating-linear-gradient(60deg, transparent 0 18px, rgba(119, 65, 5, 0.08) 18px 20px, transparent 20px 38px),
    linear-gradient(180deg, #ffe36a 0%, #ffc727 56%, #ee9f0f 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 246, 174, 0.75),
    0 4px 0 #7c430b,
    0 8px 13px rgba(80, 41, 10, 0.26);
}

.startSetup {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.startEmblem {
  width: 116px;
  height: 116px;
  margin: -20px auto -10px;
  filter: drop-shadow(3px 5px 0 rgba(43, 21, 10, 0.52));
  transform: rotate(1.5deg);
}

.startEmblem img { width: 100%; height: 100%; display: block; object-fit: contain; }

.startKicker {
  color: #8b4c12;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.startIntro {
  padding: 10px 14px;
  border-block: 1px solid rgba(105, 57, 19, 0.28);
  color: #673914;
  font-size: 0.96rem;
  line-height: 1.35;
}

.startIntro.isChallenge {
  border: 2px solid #b77419;
  border-radius: 12px;
  background: rgba(255, 239, 166, 0.62);
}

.startForm { display: flex; flex-direction: column; gap: 10px; }

.nameLabel,
.timerChoices legend {
  color: #63340f;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.overlayCard:has(.startSetup) input[type="text"] {
  width: 100%;
  min-height: 48px;
  border-color: #6b390f;
  border-radius: 12px;
  background: rgba(255, 254, 248, 0.94);
  box-shadow: inset 0 2px 5px rgba(91, 46, 11, 0.13), 0 2px 0 rgba(255, 247, 196, 0.9);
}

.overlayCard:has(.startSetup) input[type="text"]:focus {
  outline: 3px solid var(--side0);
  outline-offset: 2px;
}

.timerChoices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 8px;
  border: 2px solid rgba(105, 57, 19, 0.5);
  border-radius: 13px;
  background: rgba(255, 249, 231, 0.5);
}

.timerChoices legend { padding: 0 7px; }
.timerChoices label { min-width: 0; padding: 8px 6px; border-width: 2px; border-color: #6b390f; background: rgba(255, 254, 248, 0.92); }
.timerChoices input { accent-color: #d9890b; }
.timerChoices label:has(input:checked) { background: linear-gradient(#ffe75d, #ffbd16); box-shadow: inset 0 0 0 2px rgba(255, 249, 185, 0.7); }

.startPrimaryAction,
.startSecondaryAction { min-height: 48px; font-size: 1.05rem; }
.startPrimaryAction { background: linear-gradient(#69dc7e, #34af55); }
.startSecondaryAction { width: 100%; background: linear-gradient(#fffdf1, #f2daa0); }
.startSpectateAction { align-self: center; border-width: 2px; background: transparent; box-shadow: none; }
.startFinePrint { color: var(--ink-soft); font-size: 0.72rem; }
.waitingIcon { display: block; margin-bottom: 4px; font-size: 2.2rem; line-height: 1; }

@keyframes startCardArrival {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Individueller Siegerhonig ---------- */

.overlayCard:has(.resultCelebration) {
  --victory-wood: #4a2815;
  position: relative;
  width: min(calc(100% - 32px), 540px);
  gap: 7px;
  padding: 64px 28px 22px;
  border: 5px solid var(--victory-wood);
  border-radius: 24px;
  overflow-x: hidden;
  outline: 2px solid rgba(244, 184, 72, 0.75);
  outline-offset: -10px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 224, 101, 0.46), transparent 52%),
    repeating-linear-gradient(2deg, rgba(130, 79, 25, 0.04) 0 2px, transparent 2px 9px),
    linear-gradient(105deg, #f5d88e, #fff4cb 48%, #edc978);
  box-shadow:
    inset 0 0 30px rgba(124, 68, 17, 0.2),
    0 18px 45px rgba(38, 18, 6, 0.48),
    0 4px 0 #281207;
}

.overlayCard:has(.resultCelebration) > h2 {
  position: absolute;
  top: 18px;
  left: 50%;
  z-index: 4;
  width: min(88%, 430px);
  padding: 10px 34px 9px;
  border: 2px solid #8d541d;
  border-radius: 4px 4px 9px 9px;
  color: #4b270f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.45rem, 5vw, 2.15rem);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 247, 202, 0.9);
  transform: translateX(-50%);
  background:
    linear-gradient(90deg, rgba(151, 91, 24, 0.13), transparent 18% 82%, rgba(151, 91, 24, 0.13)),
    linear-gradient(#ffe8aa, #e8bd67);
  box-shadow:
    inset 0 0 0 2px rgba(255, 244, 190, 0.56),
    0 4px 0 #a66a27,
    0 8px 13px rgba(80, 41, 10, 0.25);
}

.overlayCard:has(.resultCelebration) > h2::before,
.overlayCard:has(.resultCelebration) > h2::after {
  position: absolute;
  top: 9px;
  z-index: -1;
  width: 40px;
  height: calc(100% - 3px);
  border: 2px solid #704018;
  content: "";
  background: linear-gradient(#dfaa50, #bd792d);
}

.overlayCard:has(.resultCelebration) > h2::before {
  right: calc(100% - 9px);
  clip-path: polygon(0 0, 100% 8%, 100% 100%, 0 92%, 26% 50%);
}

.overlayCard:has(.resultCelebration) > h2::after {
  left: calc(100% - 9px);
  clip-path: polygon(0 8%, 100% 0, 74% 50%, 100% 92%, 0 100%);
}

.resultCelebration {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.honeyPrize {
  position: relative;
  width: min(76vw, 340px);
  aspect-ratio: 2 / 3;
  margin: -13px auto -17px;
  isolation: isolate;
  animation: prizeReveal 0.65s cubic-bezier(0.22, 0.9, 0.28, 1.16) both;
}

.victoryGlow {
  position: absolute;
  inset: 15% -18% 8%;
  z-index: -1;
  border-radius: 50%;
  background: repeating-conic-gradient(from 7deg, rgba(255, 199, 43, 0.24) 0 8deg, transparent 8deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 0 44%, transparent 73%);
  mask-image: radial-gradient(circle, #000 0 44%, transparent 73%);
}

.honeyJarAsset {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 10px 8px rgba(79, 40, 9, 0.3));
}

.jarLabelContent {
  position: absolute;
  z-index: 2;
  left: 19.5%;
  top: 35.5%;
  width: 61%;
  height: 41.5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 7% 6% 4%;
  color: #6d3b17;
  text-align: center;
  pointer-events: none;
}

.jarHoneyName {
  width: 100%;
  color: #7d3f12;
  font-size: clamp(0.92rem, 3.7vw, 1.32rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.035em;
  white-space: nowrap;
  text-transform: uppercase;
}

.jarHoneyName.isLong { font-size: clamp(0.7rem, 3.1vw, 1.02rem); letter-spacing: -0.065em; }

.jarLabelRule {
  width: 78%;
  margin: 5% 0 3%;
  border-top: 1px solid rgba(111, 61, 22, 0.5);
}

.jarContentsTitle {
  color: #9a6a3d;
  font-size: clamp(0.45rem, 1.7vw, 0.66rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.jarIngredients {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin: 4% 0 0;
  padding: 0;
  list-style: none;
}

.jarIngredients li {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-size: clamp(0.48rem, 1.8vw, 0.7rem);
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.jarIngredients span { display: grid; place-items: center; }
.jarIngredients img { width: clamp(0.95rem, 4.7vw, 1.55rem); height: clamp(0.95rem, 4.7vw, 1.55rem); display: block; object-fit: contain; }
.winnerLine {
  color: #673914;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.15rem, 4.5vw, 1.55rem);
  line-height: 1.1;
}
.winnerLine b { color: #9d5212; }
.endActions { display: flex; flex-direction: column; gap: 9px; padding-top: 12px; border-top: 1px solid rgba(105, 57, 19, 0.34); font-size: 1rem; }
.endActions .countdown { min-height: 1em; line-height: 1; }

@keyframes prizeReveal {
  from { opacity: 0; transform: translateY(22px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.waitDots::after { width: 1.2em; display: inline-block; content: "…"; text-align: left; animation: dots 1.4s steps(4, end) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "…"; } }

/* ---------- Emoji-Einflug ---------- */

.flyLayer { position: fixed; top: 0; bottom: 0; z-index: 20; width: 30%; max-width: 340px; overflow: hidden; pointer-events: none; }
.flyLayer.left { left: 0; }
.flyLayer.right { right: 0; }
.flyEmoji { position: absolute; display: flex; flex-direction: column; align-items: center; font-size: 2.6rem; line-height: 1; filter: drop-shadow(2px 3px 0 rgba(59, 36, 21, 0.5)); }
.flyLayer.left .flyEmoji { left: 14px; }
.flyLayer.right .flyEmoji { right: 14px; }
.flyEmoji small { margin-top: 2px; padding: 1px 6px; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); font-size: 0.65rem; font-weight: 900; }
.flyLayer.left .flyEmoji { animation: flyInLeft 2.4s ease-out forwards; }
.flyLayer.right .flyEmoji { animation: flyInRight 2.4s ease-out forwards; }
@keyframes flyInLeft { 0% { transform: translateX(-130%) rotate(-25deg) scale(0.6); opacity: 0; } 25% { transform: translateX(30%) rotate(8deg) scale(1.15); opacity: 1; } 80% { transform: translateX(15%) translateY(-30px); opacity: 1; } 100% { transform: translateX(15%) translateY(-70px) scale(0.9); opacity: 0; } }
@keyframes flyInRight { 0% { transform: translateX(130%) rotate(25deg) scale(0.6); opacity: 0; } 25% { transform: translateX(-30%) rotate(-8deg) scale(1.15); opacity: 1; } 80% { transform: translateX(-15%) translateY(-30px); opacity: 1; } 100% { transform: translateX(-15%) translateY(-70px) scale(0.9); opacity: 0; } }

/* ---------- Responsive Anpassungen ---------- */

@media (max-width: 720px) {
  :root { --board-size: min(58vh, calc(100vw - 92px)); }
  body { padding: 5px; }
  .app { min-height: calc(100vh - 10px); gap: 5px; }
  .topbar { min-height: 66px; gap: 8px; padding: 7px 8px 7px 76px; border-width: 2px; border-radius: 19px 16px 18px 16px; }
  .topbar::before { inset: 5px; border-radius: 14px 11px 13px 11px; }
  .brandMedallion { left: 5px; width: 70px; height: 70px; }
  .topbar h1 { font-size: clamp(1.35rem, 4.5vw, 2.1rem); letter-spacing: 1px; }
  .topInfo { gap: 4px; padding: 4px 5px; border-radius: 13px; }
  .honeyDrips { bottom: -11px; height: 19px; }
  .honeyDrips i { width: 12px; height: 18px; }
  .connText { display: none; }
  .badge { min-height: 30px; padding: 1px 8px; }
  .audioToggle { width: 30px; height: 30px; font-size: 0.78rem; }
  .versusHud { grid-template-columns: minmax(0, 1fr) 126px minmax(0, 1fr); }
  .playerCard { min-height: 72px; gap: 5px; padding: 7px 9px; border: 2px solid #2b150a; border-radius: 13px; background: #4a2815; }
  .playerCard::before { inset: 4px; clip-path: none; border-radius: 9px; }
  .playerCard::after { display: none; }
  .playerTag { display: none; }
  .playerState { display: none; }
  .scoreHive { min-width: 82px; min-height: 66px; padding-top: 11px; }
  .scoreHive::before { width: 86px; height: 76px; }
  .scoreProgress { width: 90px; height: 72px; }
  .score { font-size: clamp(1.55rem, 6.5vw, 2.05rem); -webkit-text-stroke-width: 1px; }
  .score.compact { font-size: clamp(1.3rem, 5.3vw, 1.72rem); }
  .score::after { margin-top: 3px; font-size: 0.38rem; }
  .turnFocus { min-height: 104px; margin-inline: -5px; padding: 6px 5px 4px; }
  .turnEyebrow { font-size: 0.44rem; letter-spacing: 0.65px; }
  .bloomQueue { height: 77px; }
  .followingPreview { top: 0; width: 40px; height: 40px; border-width: 1.5px; }
  .followingTile { font-size: 1.4rem; }
  .nextPreview { top: 18px; width: 60px; height: 60px; border-width: 2px; box-shadow: inset 0 0 0 2px rgba(65, 28, 8, 0.48), 0 3px 0 rgba(29, 12, 5, 0.62); }
  .nextTile { font-size: 2.35rem; }
  .turnNumber { padding-inline: 6px; font-size: 0.42rem; }
  .timerRing { inset: -4px; }
  .timerText { right: -7px; bottom: -2px; min-width: 22px; font-size: 0.42rem; }
  .status { max-width: calc(100% - 16px); padding: 3px 9px; font-size: 0.64rem; white-space: normal; }
  .cheerToggle {
    top: calc(100% + 5px);
    width: 33px;
    height: 33px;
    border-radius: 10px;
    font-size: 0.9rem;
  }
  .cheerTray {
    left: 50%;
    top: auto;
    bottom: max(58px, calc(58px + env(safe-area-inset-bottom)));
    grid-template-columns: repeat(6, 31px);
    gap: 5px;
    padding: 6px;
    border-radius: 12px;
    transform: translateX(-50%);
  }
  body:has(.spectatorBar:not([hidden])) .cheerTray { bottom: max(100px, calc(100px + env(safe-area-inset-bottom))); }
  .cheerBtn { width: 31px; height: 31px; font-size: 0.9rem; }
  .boardScoreLayer { inset: 43px 34px 0; }
  .boardGrid { grid-template-columns: 34px var(--board-size) 34px; grid-template-rows: 34px var(--board-size); gap: 3px; }
  #board { gap: 3px; padding: 5px; border-width: 4px; }
  .cell { border-width: 1.5px; border-radius: 7px; }
  .controls { gap: 3px; }
  .controls.top { padding: 0 5px; }
  .controls.left, .controls.right { padding: 5px 0; }
  .push-button { width: 30px; height: 30px; border-width: 2px; border-radius: 8px; box-shadow: 2px 2px 0 var(--ink); font-size: 0.78rem; }
  .mascots { top: -10px; width: max-content; min-height: 26px; }
  .mascot { width: 24px; height: 26px; }
  .mascot + .mascot { margin-left: -8px; }
  .spectatorBar { position: fixed; right: 7px; bottom: 51px; z-index: 12; max-width: calc(100vw - 14px); margin: 0; padding: 5px 7px; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); box-shadow: 2px 3px 0 var(--ink); }
  .spectatorBar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .flyLayer { width: 45%; }
  .overlay { padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .overlayCard { max-height: calc(100dvh - 16px); gap: 10px; padding: 16px; }
  .overlayCard:has(.startSetup) { width: min(calc(100% - 8px), 520px); padding: 72px 18px 18px; }
  .overlayCard:has(.startSetup) > h2 { top: 12px; width: min(82%, 380px); font-size: clamp(1.55rem, 7vw, 2.15rem); }
  .startSetup { gap: 9px; }
  .startEmblem { width: 94px; height: 94px; margin-block: -17px -9px; }
  .startIntro { padding: 8px 10px; font-size: 0.88rem; }
  .timerChoices { gap: 5px; padding: 6px; }
  .timerChoices label { padding: 7px 3px; font-size: 0.74rem; }
  .overlayCard:has(.resultCelebration) { gap: 7px; padding: 60px 18px 18px; }
  .honeyPrize { width: min(72vw, 300px); margin-block: -11px -15px; }
}

@media (max-width: 560px) {
  #spectatorBadge { display: none; }
}

@media (max-width: 480px) {
  :root { --board-size: min(52vh, calc(100vw - 82px)); }
  .topbar { min-height: 58px; gap: 4px; padding: 6px 5px 6px 62px; border-radius: 16px 14px 16px 14px; }
  .topbar::before { inset: 4px; border-width: 1.5px; border-radius: 12px 10px; }
  .brandMedallion { left: 3px; width: 58px; height: 58px; }
  .topbar h1 { font-size: clamp(1.05rem, 5vw, 1.4rem); letter-spacing: 0.35px; }
  .topInfo { gap: 3px; }
  .audioControls { gap: 3px; }
  .audioToggle { width: 28px; height: 28px; border-width: 1.5px; font-size: 0.72rem; }
  .topInfo .badge { padding-inline: 5px; border-width: 1.5px; }
  .honeyDrips i:nth-child(1), .honeyDrips i:nth-child(3) { display: none; }
  .versusHud { grid-template-columns: minmax(0, 1fr) 104px minmax(0, 1fr); }
  .playerCard { min-height: 64px; padding: 5px 6px; border-width: 1.5px; }
  .playerName { font-size: 0.86rem; }
  .score { font-size: 1.35rem; }
  .score.compact { font-size: 1.08rem; }
  .status { max-width: calc(100% - 8px); padding-inline: 7px; font-size: 0.58rem; }
  .bloomQueue { height: 66px; }
  .followingPreview { width: 34px; height: 34px; }
  .followingTile { font-size: 1.15rem; }
  .nextPreview { top: 15px; width: 52px; height: 52px; }
  .nextTile { font-size: 2rem; }
  .boardGrid { grid-template-columns: 30px var(--board-size) 30px; grid-template-rows: 30px var(--board-size); }
  .boardScoreLayer { inset: 43px 30px 0; }
  .push-button { width: 27px; height: 27px; }
  .push-button::after { inset: -8px; }
  .scoreHive { min-width: 62px; min-height: 56px; padding-top: 9px; }
  .scoreHive::before { width: 68px; height: 62px; }
  .scoreProgress { width: 72px; height: 59px; }
  .score::after { font-size: 0.32rem; }
  .turnFocus { min-height: 92px; margin-inline: -3px; padding: 5px 3px 3px; }
  .turnEyebrow { font-size: 0.38rem; letter-spacing: 0.45px; }
  .turnNumber { font-size: 0.36rem; }
  .mascots { top: -7px; width: max-content; min-height: 21px; }
  .mascot { width: 19px; height: 21px; }
  .mascot + .mascot { margin-left: -6px; }
  .overlayCard { width: 100%; gap: 8px; padding: 12px; border-radius: 14px; }
  .overlayCard h2 { font-size: 1.38rem; }
  .overlayCard:has(.startSetup) { width: 100%; padding: 66px 12px 14px; border-width: 4px; border-radius: 18px 16px; }
  .overlayCard:has(.startSetup)::before,
  .overlayCard:has(.startSetup)::after { top: 18px; }
  .overlayCard:has(.startSetup)::before { left: 14px; }
  .overlayCard:has(.startSetup)::after { right: 14px; }
  .overlayCard:has(.startSetup) > h2 { top: 10px; width: 82%; padding: 10px 20px 9px; font-size: clamp(1.35rem, 7.6vw, 1.8rem); }
  .startEmblem { width: 82px; height: 82px; margin-block: -14px -8px; }
  .startKicker { font-size: 0.62rem; letter-spacing: 0.11em; }
  .startIntro { font-size: 0.8rem; }
  .nameLabel,
  .timerChoices legend { font-size: 0.64rem; }
  .overlayCard:has(.startSetup) input[type="text"] { min-height: 44px; font-size: 0.95rem; }
  .timerChoices label { font-size: 0.66rem; }
  .timerChoices input { width: 11px; margin-right: 2px; }
  .startPrimaryAction,
  .startSecondaryAction { min-height: 44px; font-size: 0.92rem; }
  .overlayCard:has(.resultCelebration) { gap: 6px; padding: 56px 12px 14px; border-width: 4px; }
  .overlayCard:has(.resultCelebration) > h2 { top: 15px; width: 84%; padding-inline: 22px; font-size: 1.45rem; }
  .honeyPrize { width: min(76vw, 270px); margin-block: -9px -13px; }
  .jarHoneyName { font-size: clamp(0.86rem, 4.5vw, 1.05rem); }
  .jarHoneyName.isLong { font-size: clamp(0.67rem, 3.6vw, 0.86rem); }
  .jarIngredients img { width: clamp(0.9rem, 5.2vw, 1.3rem); height: clamp(0.9rem, 5.2vw, 1.3rem); }
  .winnerLine { font-size: 1rem; }
  .endActions { gap: 6px; padding-top: 7px; font-size: 0.92rem; }
  .endActions { position: sticky; bottom: -12px; z-index: 8; padding-bottom: 4px; background: rgba(250, 224, 164, 0.96); }
  .endActions .btn { min-height: 44px; }
}

@media (max-width: 400px) {
  #spectatorBadge { display: none; }
}

@media (max-height: 700px) and (min-width: 721px) {
  :root { --board-size: min(54vh, 500px, calc(100vw - 150px)); }
  .topbar { min-height: 44px; }
  .honeyPrize { width: 280px; }
}

@media (max-height: 640px) {
  .overlayCard:has(.resultCelebration) { padding-block: 54px 14px; }
  .honeyPrize { width: min(64vw, 245px); margin-block: -11px -15px; }
  .overlayCard:has(.resultCelebration) > h2 { top: 14px; font-size: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .boardScorePopup { animation: boardScoreReduced 1.1s linear forwards !important; }
  .flyEmoji { opacity: 1; transform: none; animation: none !important; }
}

@keyframes boardScoreReduced {
  0%, 72% { transform: none; opacity: 1; }
  100% { transform: none; opacity: 0; }
}