#board { position:relative; isolation:isolate; }
.cell { position:relative; touch-action:none; user-select:none; -webkit-user-select:none; }
.cell > * { pointer-events:none; }
.cell-face {
  position:absolute; inset:0; display:grid; place-items:center;
  border-radius:inherit; background:var(--tile);
}
.cell:active .cell-face { transform:scale(.94); }
.cell .cross {
  position:relative; width:74%; height:74%; fill:none; stroke:#fff; stroke-width:7;
  stroke-linecap:round;
}

.cell .tile-bee {
  position:relative; display:grid; place-items:center; width:96%; height:96%;
  pointer-events:none;
}
.tile-bee img { display:block; width:100%; height:100%; object-fit:contain; }
.cell-face { pointer-events:none; }
.cell:focus-visible { z-index:5; }
.tool-circle { position:relative; }
.tool .tool-count { display:grid; font-size:10px; color:white; }

.erase-flicker { position:absolute; inset:0; display:grid; place-items:center; animation:erase-board-x 235ms ease-out both; }
.erase-flicker .cross path { animation:none; }
@keyframes erase-board-x { to { opacity:0; scale:.57; } }

.mistake-x { display:grid; place-items:center; width:100%; height:100%; }
.cell .mistake-x .cross { stroke:#b42e46; filter:drop-shadow(0 1px 0 #fff9); }
.mistake-in-flight .mistake-x { opacity:0; }
.mistake-rule { background:#f9d5db; outline:2px solid #cf6578; }
.mistake-area .cell-face { box-shadow:inset 0 0 0 2px #e35169, inset 0 0 0 4px #fff6; }
.mistake-anchor .cell-face { outline:2px solid #ffdd85; outline-offset:-3px; }
.mistake-anchor:has(> .mistake-bee) .tile-bee { visibility:hidden; }
.mistake-bee {
  position:absolute;
  width:100%;
  height:100%;
  object-fit:contain;
  z-index:2;
}
.mistake-beam {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:4;
  overflow:visible;
}
.mistake-beam path {
  stroke:#fff3a7;
  stroke-width:3.2;
  stroke-linecap:round;
  stroke-dasharray:1;
  filter:drop-shadow(0 0 4px #e95062) drop-shadow(0 0 2px #a62741);
  animation:mistake-beam-draw .62s .10s both ease-out;
}
@keyframes mistake-beam-draw {
  0% { stroke-dashoffset:1; opacity:0; }
  18% { opacity:1; }
  69%,100% { stroke-dashoffset:0; opacity:1; }
}
.mistake-flash .cell-face { animation:mistake-tile .62s ease-out; }
@keyframes mistake-tile { 0%,34% { background:#ec7885; } }
.mistake-flash .mistake-x { animation:mistake-x-in .25s ease-out; }
@keyframes mistake-x-in { from { opacity:.15; transform:scale(.7); } }
.mistake-heart {
  position:absolute;
  inset:14%;
  width:72%;
  height:72%;
  z-index:3;
  fill:#ef5d74;
  stroke:#fff8f4;
  stroke-width:2.5;
  overflow:visible;
  animation:mistake-heart-rise .62s ease both;
}
.mistake-heart path { transform-box:fill-box; transform-origin:center; animation:heart-split .62s ease both; }
.mistake-heart path:first-child { --break-x:-8px; --break-angle:-14deg; }
.mistake-heart path:last-child { --break-x:8px; --break-angle:14deg; }
@keyframes mistake-heart-rise {
  0% { opacity:0; transform:scale(.3); }
  34% { opacity:1; transform:translateY(-15%) scale(1.15); }
  73% { opacity:.95; }
  100% { opacity:0; transform:translateY(-66%) scale(.86); }
}
@keyframes heart-split { 0%,33% { transform:none; } 83%,100% { transform:translateX(var(--break-x)) rotate(var(--break-angle)); } }

.tool-count {
  position:absolute; top:-3px; right:-3px; display:grid; place-items:center;
  min-width:18px; height:18px; padding:0 3px; border-radius:12px;
  border:1px solid #fff; background:#9d425c; color:white; font-size:10px;
}
.clue-card {
  display:flex; align-items:center; gap:7px; margin:7px 0 0;
  padding:6px 7px 6px 10px; border:1px solid #ebd097;
  border-radius:11px; background:#fff8e7; font-size:12px;
}
.clue-card[hidden] { display:none; }
.clue-card p { margin-right:auto; }
.clue-card .secondary,.clue-card .text-button { min-height:32px; padding:4px 8px; }
.clue-anchor .cell-face { outline:2px solid #71451d; outline-offset:-2px; }
.clue-safe .cell-face { outline:2px dashed #71451d; outline-offset:-4px; }
.sweep-flower {
  position:absolute; top:0; left:0; width:42px; height:42px; z-index:6;
  pointer-events:none; filter:drop-shadow(0 1px 2px #fff) drop-shadow(0 3px 3px #7b514880);
}
.sweep-flower svg { display:block; width:100%; height:100%; }

.cell-revealing { z-index:4; }
.cell-revealing .tile-bee { animation:bee-emerges 300ms cubic-bezier(.18,.8,.32,1) both; }
@keyframes bee-emerges {
  0% { transform:translateY(19%) scale(.30); opacity:0; }
  36% { transform:translateY(-10%) scale(1.17); opacity:1; }
  79% { transform:translateY(2%) scale(.95); }
  100% { transform:translateY(0) scale(1); }
}
.reveal-ring {
  position:absolute; inset:9%; border:2px solid #fff2af; border-radius:50%;
  animation:bloom-ring 435ms ease-out both;
}
@keyframes bloom-ring { from { scale:.34; opacity:.95; } to { scale:1.6; opacity:0; } }
.reveal-spark {
  position:absolute; left:50%; top:50%; width:6px; height:8px;
  border-radius:2px 5px 2px 5px; background:#f4bf51;
  animation:bloom-spark 620ms cubic-bezier(.18,.65,.28,1) both;
}
.reveal-spark:nth-of-type(4n+2) { background:#f7e0a2; border-radius:50%; width:5px; height:5px; }
.reveal-spark:nth-of-type(4n+3) { background:#dd799b; }
.reveal-spark:nth-of-type(4n+4) { background:#7eae7f; }
@keyframes bloom-spark {
  0% { transform:translate(-50%,-50%) scale(.35); opacity:0; }
  12% { opacity:1; }
  72% { opacity:.9; }
  100% { transform:translate(var(--dx),var(--dy)) rotate(var(--spin)) scale(.35); opacity:0; }
}
.reveal-reward {
  position:absolute; top:11%; left:50%; width:max-content; padding:2px 6px 3px;
  border:1px solid #f0c475; border-radius:14px; background:#fff8e8; color:#624019;
  box-shadow:0 2px 6px #623b2d2e; font-size:12px; font-weight:850;
  animation:bloom-reward 760ms cubic-bezier(.2,.65,.38,1) both;
}
@keyframes bloom-reward {
  0% { transform:translate(-50%,2px) scale(.58); opacity:0; }
  23% { opacity:1; }
  73% { opacity:1; }
  100% { transform:translate(-50%,-37px) scale(1); opacity:0; }
}
@media (prefers-reduced-motion: reduce) {
  .cell:active .cell-face { transform:none; }
  .erase-flicker { display:none; }
  .cross-drawing path { animation:none; }
}

#board .cell .cross { animation:none; }
#board .cross.drawing path {
  stroke-dasharray:1; stroke-dashoffset:0;
  animation:draw-board-x 165ms cubic-bezier(.25,.62,.33,1) both;
}
#board .cross.drawing path+path { animation-delay:95ms; }
@keyframes draw-board-x { from { stroke-dashoffset:1; } }
#board .mistake-x .cross { color:#b42e46; }
#board .mistake-beam { pointer-events:none; }
#board .mistake-beam path { fill:none; }
#board .sweep-flower { position:absolute; }
#board .cell .credit.player-photo {
  width:clamp(12px,35%,23px); height:auto; aspect-ratio:1;
  font-size:clamp(7px,1.6vw,12px); z-index:1;
}
#board .mistake-bee { object-fit:contain; pointer-events:none; }
#board .mistake-anchor:has(> .mistake-bee) .tile-bee { visibility:hidden; }
#board .clue-anchor .cell-face { outline:2px solid #71451d; outline-offset:-2px; }
#board .clue-safe .cell-face { outline:2px dashed #71451d; outline-offset:-4px; }
#board-clue { margin:0 18px 16px; }
#board-clue button { width:auto; margin:0; font-size:11px; }
@media (prefers-reduced-motion:reduce) {
 #board .cross.drawing path { animation:none; stroke-dashoffset:0; }
 #failure-video { display:none !important; }
}

.tool-circle > svg, .tool-circle .finder-bee-icon { width:31px; height:31px; }
.tool-circle > svg, .sweep-flower > svg { stroke:none; }
.tool-circle .finder-bee-icon { object-fit:contain; }
#board-clue:not([hidden]) { display:flex; align-items:center; gap:8px; }
#board-clue p { margin:0; flex:1; }