.tracker-strip {
  position: relative;
  z-index: 2;
  margin-bottom: 4px;
}
#game .bee-reference {
  position: relative;
  z-index: 1;
  width: clamp(78%, calc(34% + 6% * var(--tracker-count, 6)), 96%);
  max-width: 100%;
  height: auto;
  min-height: 0;
  margin: 0 auto;
  padding: 2px clamp(5px, 2cqw, 11px) 2px;
  border: 1px solid #e8e1eb;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: white;
  display: grid;
  grid-template-columns: repeat(var(--tracker-count, 6), minmax(0, 1fr));
  gap: clamp(3px, 1.1cqw, 6px);
  justify-items: center;
}
#game .bee-reference::after {
  content: '';
  position: absolute;
  inset: 100% 0 auto;
  height: 1px;
  background: white;
}
#game .bee-reference .bee-target {
  width: min(100%, clamp(29px, 11cqw, 54px));
  height: auto;
  aspect-ratio: 1;
}
#game .tracker-head { object-position: center bottom; }
.board-stage { isolation: isolate; }
.board-stage::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -5px;
  border: 1px solid #e8e1eb;
  border-radius: 11px;
  background: white;
  pointer-events: none;
}
.find-titles {
  position: absolute;
  z-index: 7;
  width: min(43%, 165px);
  display: grid;
  justify-items: center;
  gap: 3px;
  pointer-events: none;
}
.find-titles[data-placement="above"] { translate: -50% -100%; }
.find-titles[data-placement="left"] { translate: -100% 0; }
.find-titles :is(#find-praise[data-tier], #deduction-praise) {
  position: relative;
  inset: auto;
  max-width: 94%;
  margin: 0;
  line-height: 1;
  transform-origin: center top;
}
.find-titles #find-praise[data-tier] { font-size: clamp(13px, 4.5cqw, 20px); }
.find-titles #deduction-praise { font-size: clamp(11px, 3.8cqw, 16px); }
.board-stage > .reveal-reward[data-tier="1"] { font-size: clamp(18px,5.4cqw,28px); }
.board-stage > .reveal-reward[data-tier="2"] { font-size: clamp(19px,5.8cqw,30px); --type-face:#ffe18b; }
.board-stage > .reveal-reward[data-tier="3"] { font-size: clamp(20px,6.2cqw,32px); --type-face:#ffe8a5; }
.board-stage > .reveal-reward[data-tier="4"] {
  font-size: clamp(22px,6.9cqw,35px);
  --type-face:#fff4be;
  text-shadow: 0 1px #fff6d3,0 2px #b86823,0 3px #8c4e21,0 0 8px #fff2a9,0 0 15px #ffbf44;
}
.board-flight {
  position: fixed;
  z-index: 7;
  height: 0;
  transform-origin: left center;
  pointer-events: none;
}
.board-flight-tail {
  width:100%;
  transform-origin:left center;
  position: absolute;
  top: -2px;
  left: 0;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg,transparent,#ffd371b0 52%,#ffefac 82%,#fffde5);
  box-shadow: 0 0 8px #ffcb57d1;
}
.board-flight-bee .board-flight-tail { height: 3px; }
.board-flight-head {
  position: absolute;
  top: 0;
  width: 13px;
  height: 13px;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: #fff8ba;
  box-shadow: 0 0 7px 3px #ffcc45,0 0 17px 4px #f8ba4290;
}
.board-flight .collect-bee {
  position: absolute;
  width: clamp(24px,7.5vw,44px);
  height: auto;
  aspect-ratio: 1;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 0 6px #ffe76c) drop-shadow(0 0 10px #f9bd4b);
}
.rank-settled-glints {
  position: absolute;
  inset: auto 7% 62% auto;
  z-index: 1;
  pointer-events: none;
  color: #fff3ae;
  font-size: 21px;
  letter-spacing: .5em;
  text-shadow: 0 0 7px #ed9c27,0 1px 2px #8c5822;
  animation: rank-glints .7s ease-out both;
}
@keyframes rank-glints {
  0% {opacity:0;transform:translateY(6px) scale(.6);}
  24% {opacity:1;}
  100% {opacity:0;transform:translateY(-18px) scale(1.12);}
}

#visual-rules.rule-start-flash { animation:rule-start-flash 820ms ease-out; }
@keyframes rule-start-flash {
  0%, 100% { box-shadow:0 0 0 0 transparent; }
  18%, 58% { box-shadow:0 0 0 3px #ee9b41; }
}
#board .worried-bee {
  position:absolute; inset:10%; width:80%; height:80%; object-fit:contain;
  z-index:4; pointer-events:none;
}
#board .cell:has(.worried-bee) .tile-bee { visibility:hidden; }
#last-heart {
  position:fixed; z-index:25; inset:0; pointer-events:none; background:#231a2dc5;
}
#game #last-heart .last-heart-highlight {
  position:absolute; display:flex; gap:clamp(5px,2.8cqw,15px);
  background:#fff9f4; left:var(--heart-left); top:var(--heart-top);
  width:var(--heart-width); height:var(--heart-height);
}
#last-heart .last-heart-highlight span+span { opacity:.42; }
#last-heart p {
  position:absolute; left:var(--warning-left); top:var(--warning-top);
  width:var(--warning-width); padding:10px 12px; border-radius:13px;
  background:#fff8ed; color:#4e3548; font-size:clamp(15px,4vw,19px);
  font-weight:750; line-height:1.2; text-align:center;
}
#last-heart p::before {
  content:''; position:absolute; top:-6px; left:calc(var(--warning-point) - 6px); width:12px; height:12px;
  background:inherit; transform:rotate(45deg);
}
@media (prefers-reduced-motion:reduce) {
  #visual-rules.rule-start-flash { animation:none; outline:2px solid #ee9b41; }
}

/* Build 44: the same measured mark on the tutorial and every grid size. */
#game #board .cell svg.cross,#beedoku-tutorial .lesson-board button svg.cross{
  position:absolute;inset:0;width:100%;height:100%;display:block;color:#fff;pointer-events:none;
}
#game #board .cell svg.cross path,#beedoku-tutorial .lesson-board button svg.cross path{
  fill:none;stroke:#fff;stroke-width:18;stroke-linecap:round;
}
#game #board .cell svg.cross.drawing path,#beedoku-tutorial .lesson-board button svg.cross.drawing path{
  animation:none;stroke-dasharray:1 1;stroke-dashoffset:1;
}
@keyframes beedoku-jelly{
  0%{transform:scale(1,1)}19%{transform:scale(1.12,.88)}44%{transform:scale(.94,1.06)}69%{transform:scale(1.03,.97)}100%{transform:scale(1,1)}
}
@media(prefers-reduced-motion:reduce){
 #game #board .cell svg.cross.drawing path,#beedoku-tutorial .lesson-board button svg.cross.drawing path{animation:none;stroke-dashoffset:0}
}
#board .cell{-webkit-tap-highlight-color:transparent}
#board .cell .cell-face{background:var(--tile)}
.bee-head-view{position:relative;display:block}
.cell .bee-head-view{position:absolute}
.bee-head-view > img{
  position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;
}
#collect-counter .counter-head{width:20px;height:20px}
#failure-copy .remaining-head{width:1.32em;height:1.32em}
#failure-copy .remaining-head img{width:100%;height:100%}
.tracker-silhouette{
  background:var(--bee-color);
  -webkit-mask:url("assets/approved/bee-front-head.png") center/contain no-repeat;
  mask:url("assets/approved/bee-front-head.png") center/contain no-repeat;
}
#board .cell:is(.bee-conflict,.bee-worried,.bee-in-flight) .tile-bee{visibility:hidden}
#board .cell:is(.bee-conflict,.bee-worried) .cell-face::after{
  content:'';position:absolute;inset:6%;pointer-events:none;background:center/contain no-repeat url("assets/approved/crying-head-tile-v2.webp");
}
#board .cell.bee-conflict .cell-face::after{background-image:url("assets/approved/angry-head-wingless-tile-v2.webp")}
#game .board-tools{display:grid;justify-items:center;gap:7px}
#game .board-tools:has(.tools[hidden]):not(:has(#beedoku-banner-slot:not([hidden]))){display:none}
#game .board-tools .tools{
  grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  width:min(100%,390px);margin:0 auto;gap:clamp(6px,2vw,14px);
}
#game .board-tools .tool{font-size:var(--board-control-font);line-height:1.2;padding:0;gap:5px}
#game .board-tools .tool-circle{width:var(--board-tool-size);height:var(--board-tool-size)}
#game .board-tools .tool-circle :is(svg,.finder-bee-icon){width:67%;height:67%}
#game .board-tools .tool-count{top:13.5%;right:13.5%}
#game .board-tools .tool-refill .tool-count{
  top:auto;right:auto;bottom:8px;left:50%;transform:translateX(-50%);
}
#game .board-instructions{
  display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:6px;min-height:0;margin:8px 0;
}
#game .board-instructions:not(:has(#instruction:not([hidden]),#level-stat-toast:not([hidden]),#board-clue:not([hidden]))),
#game .tip-copy:not(:has(p:not([hidden]))){display:none}
#game .board-instructions #board-clue{margin:0;width:min(100%,440px)}
#game .tip-copy{min-width:0;max-width:100%;text-align:center}
#game .tip-copy:has(#level-stat-toast:not([hidden])) #instruction{display:none}
#game .tip-copy :is(#instruction,#level-stat-toast),#game #board-clue-text{
  color:#584855;font-size:var(--board-control-font);font-weight:650;line-height:1.25;
}
#game .tip-copy :is(#instruction,#level-stat-toast){text-align:center;text-wrap:balance}
#game .tip-copy #level-stat-toast{
  position:static;inset:auto;transform:none;margin:0;padding:0;background:none;text-shadow:none;z-index:auto;
}
#game .tip-copy #level-stat-toast b{color:inherit}
#game .tip-copy #level-stat-toast strong{display:inline;margin:0;color:inherit;font-size:inherit;text-shadow:none}
#game .tip-copy #level-stat-toast svg{width:1em;height:1em;vertical-align:-.1em}
#board-friends[data-pending-social]{position:relative}
#board-friends[data-pending-social]::after{
  content:"";position:absolute;inset:2px 2px auto auto;width:10px;height:10px;border:2px solid #fff;border-radius:50%;background:#783d5c;pointer-events:none;
}

/* Exact Change 3 reference layers. Every layer is a sibling of the tile face. */
#board > .cell.tile-wobbling{background:transparent;overflow:visible}
#board .cell.wrong-guess-44{overflow:visible;z-index:7}
#board .cell > svg.ov{
 position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:3;transform-origin:center;
}
#board .cell > .redx{z-index:2}
#board .cell > .sq{
 position:absolute;inset:0;border-radius:inherit;background:#fd4600;pointer-events:none;z-index:3;transform-origin:center;
}
#board .cell > svg.hw{z-index:4}
#board .cell > svg.hb{z-index:5}
#hearts span > svg{display:block;width:1em;height:1em;overflow:visible}

/* Owner-approved inheritance reset: white wrong-guess heart only; crack keeps its own stroke. */
#board .cell > svg.hw > path,
#board .cell > svg.hb > .hl > path,
#board .cell > svg.hb > .hr > path{stroke:none}

/* Heart scale is relative to its full tile viewport, centred independently of the square. */
#board .cell > svg.hw,#board .cell > svg.hb{transform-box:border-box;transform-origin:50% 50%}