html.embedded-game,html.embedded-game body{background:transparent;margin:0;padding:0;min-height:0}
.embedded-game .phone{width:100%;min-height:0;box-shadow:none;border-radius:18px;overflow:clip}
.embedded-game .phone>nav{display:none}
.embedded-game dialog{position:fixed;top:var(--dialog-top,16px);bottom:auto;margin:0 auto;max-height:var(--dialog-height,70vh);overflow:auto}
.embedded-game :is(#inviteDialog,#soloRoomDialog){top:var(--centered-dialog-y,50dvh);max-height:var(--centered-dialog-height,calc(100dvh - 32px));transform:translateY(-50%)}
.embedded-game #welcome{padding-bottom:20px}
.embedded-game .app-header #sound{display:none}
.embedded-game .phone:not(.join-scene):has(#welcome:not([hidden])) .app-header{display:none}
.embedded-game .app-header{padding:4px var(--page-gutter);grid-template-columns:44px 1fr}
.embedded-game .app-header .brand{display:none}
.embedded-game #game{padding-top:0}
.embedded-game .phone{border-radius:0;background:var(--blush)}
.embedded-game .phone:has(#game:not([hidden])){background:var(--blush)}
.embedded-game .phone:has(#game:not([hidden])) .app-header{display:none}
.embedded-game #game{padding:15px 4px 24px}
.embedded-game #game .level-head:has(.board-settings:not([hidden])){grid-template-columns:minmax(0,1fr) auto auto auto}
.embedded-game #game .board-tray{width:100%;max-width:none}
.native-embedded-game:has(#failureDialog[open]) .phone{max-height:100dvh}
.embedded-game #game #board{width:100%;max-width:none;margin:0;padding:0}
.embedded-game #game .board-tray:has(#board[hidden]),
.embedded-game #game:has(#board[hidden]) :is(.board-tools,.board-instructions){display:none}
.embedded-game #game #board .cell{border-radius:clamp(4px,1.65cqw,8px)}
.embedded-game .home-actions .garden-play{justify-content:center}
.embedded-game .phone:not(.join-scene) #welcome:not([hidden]){
  height:var(--beedoku-home-height, calc(var(--beedoku-viewport,780px) - 96px));
  min-height:0; box-sizing:border-box;
  padding:8px var(--page-gutter) max(16px,var(--home-spacing));
  grid-template-rows:minmax(0,1fr) auto;
  align-content:stretch;
  gap:var(--home-spacing);
  --home-spacing:clamp(12px,calc(var(--beedoku-viewport,780px) * .032),29px);
}
.embedded-game .home-hero{align-content:center;grid-template-rows:auto minmax(0,1fr);min-height:0;gap:var(--home-spacing)}
.embedded-game .home-hero h1{margin:0;width:100%}
.embedded-game .home-hero picture{position:relative;min-height:0;display:grid;place-items:end center;}
.embedded-game .home-wave{
  height:100%;
  max-height:min(105vw,clamp(108px,calc(var(--beedoku-home-height,680px) * .57),455px));
  width:auto;
  object-fit:contain;
}
@media(max-height:660px){
 .embedded-game .home-wave{max-height:min(100%,clamp(110px,calc(var(--beedoku-home-height,480px) - 217px),320px))}
}
@media(min-width:760px){
 .embedded-game .home-wave{max-height:min(86vw,clamp(455px,calc(var(--beedoku-home-height,900px) * .58),620px))}
}
.embedded-game .phone:not(.join-scene) .welcome-content{margin-block:0}
.native-embedded-game .phone:not(.join-scene):has(#welcome:not([hidden])){background:transparent}
.native-embedded-game .phone:not(.join-scene):has(#welcome:not([hidden]))::before{display:none}
.embedded-game .join-scene #welcome{
  min-height:max(435px,calc(var(--beedoku-viewport,780px) - 126px));
  align-content:center;
}
.embedded-game .phone.join-scene{background:#e8efe5}
:is(#friends-dialog,#inviteDialog){text-align:center}
:is(#friends-dialog,#inviteDialog) h2{margin:0 48px;min-height:44px;align-content:center}
:is(#friends-dialog,#inviteDialog) .dialog-close{top:19px}
:is(#friends-dialog,#inviteDialog) .friends-invite-art{
  aspect-ratio:auto;min-height:clamp(112px,24vw,160px);margin:12px 0 16px;padding-inline:16px;
  isolation:isolate;background-position:center 56%;text-align:left;
}
:is(#friends-dialog,#inviteDialog) .friends-invite-art::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,#fff2eb 2%,#fff2ebef 38%,#fff2eb6b 60%,transparent 79%);
}
:is(#friends-dialog,#inviteDialog) .friends-invite-art .mascot-figure{right:4%;width:40%;inset-block:4%}
:is(#friends-dialog,#inviteDialog) .friends-invite-art h3{width:55%;margin:0;color:#36243d;font-size:clamp(20px,5.8vw,30px)}
:is(#friends-dialog,#inviteDialog) .friends-invite-art h3 span{display:block;color:#783d5c}
:is(#friends-dialog,#inviteDialog)>p{max-width:32ch;margin:0 auto 12px;text-wrap:balance}
#friends-dialog .primary{width:min(100%,320px);margin-inline:auto}
#inviteDialog[open]{
  display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;
  gap:clamp(12px,2.7dvh,22px);padding-block:19px;
}
#inviteDialog :is(.friends-invite-art,p){margin:0}
#inviteDialog .friends-invite-art{width:100%}
#inviteDialog #shareurl,#inviteDialog .invite-actions{width:min(100%,320px);margin-inline:auto;text-align:center}
#inviteDialog .invite-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#inviteDialog .invite-actions button{min-width:0;padding-inline:6px}
.embedded-game #game .game-lower{
  margin:12px -4px 0;padding:1px 10px 12px;background:#f5eeec;border-radius:12px;
}
#soloRoomDialog{
  width:min(calc(100% - 28px),420px);padding:14px clamp(12px,4vw,24px) 15px;
  border:1px solid #e5d3dd;border-radius:24px;background:#fff9f7;
}
#soloRoomDialog h2{
  margin:3px 40px 14px;text-align:center;color:#49374b;font-size:clamp(20px,5.7vw,27px);font-weight:850;
}
#soloRoomDialog .dialog-close{top:7px;right:7px;background:#f4eaf0;}
/* The embedded game uses the same close control as the account shell. */
.embedded-game .dialog-close{
 width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;
 padding:0!important;border:1px solid #e4d6df!important;border-radius:50%!important;
 background:#f8eff4!important;color:#453342!important;box-shadow:none!important;font-size:0!important;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23453342' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m5 5 14 14M19 5 5 19'/%3E%3C/svg%3E")!important;
 background-position:center!important;background-repeat:no-repeat!important;background-size:24px 24px!important;
}
.embedded-game .dialog-close>svg{display:none!important}
.embedded-game .dialog-close::before,.embedded-game .dialog-close::after{
 content:none!important;
}
.embedded-game .beedoku-back{
 position:static;display:inline-flex;align-items:center;justify-content:flex-start;gap:4px;
 box-sizing:border-box;min-width:44px;min-height:44px;width:auto;height:44px;
 padding:0;margin:0 0 16px;border:0;border-radius:0;background:transparent;box-shadow:none;
 font:600 16px/1.2 GardenDM,Arial,sans-serif;text-align:left;color:inherit;
}
.embedded-game .beedoku-back[hidden]{display:none!important}
.embedded-game .beedoku-back svg{display:block;width:20px;height:20px;flex:none}
.board-settings-actions{
  display:flex;justify-content:center;gap:8px;margin:0 0 10px;
}
.board-settings-actions button{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;padding:4px 11px;font-size:14px;white-space:nowrap;
}
.board-settings-actions svg,.board-settings-actions button>span{width:20px;flex:none}
.board-settings-actions svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
#solo-room-controls{display:grid;gap:10px;}
#solo-room-controls #battle-panel{margin:0;}
#solo-room-controls .mode-switch{background:#f0e9f2;}
#solo-room-controls .mode-switch button[aria-pressed=true]{background:#fff;}
#solo-room-controls #room-roster{display:grid;gap:7px;}
#room-roster .teamhead{gap:6px;padding:2px 2px 0;}
#room-roster .team{padding:2px 10px;background:#fff;border-color:#ecdee5;}
#solo-room-controls :is(.play-request,.cancel-request){min-width:44px}
#solo-room-controls #voice-status{margin:0;text-align:center;font-size:12px;}
#solo-room-controls #leave-garden{justify-self:center;min-height:44px;padding:5px 20px;color:#773c50;}
@media(max-width:600px){
 #room-roster #players .player{
  display:grid;grid-template-columns:32px minmax(0,1fr) auto auto auto auto;gap:4px;padding-block:2px;
 }
 .embedded-game #game:has(#board[hidden]) #battle-panel{margin:8px 1.5%;}
 .embedded-game #game:has(#board[hidden]) #voice-status{margin:0;text-align:center;}

 #room-roster #players .player > .avatar{grid-column:1;grid-row:1}
 #room-roster #players .player > .player-name{
  grid-column:2;grid-row:1;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
 }
 #room-roster #players .player > b{grid-column:3;grid-row:1}
 #room-roster #players .player > .team-choice{grid-column:4;grid-row:1}
 #room-roster #players .player > .voice-controls{
  grid-column:5;grid-row:1;
 }
 #room-roster #players .player > .voice-flag{grid-column:6;grid-row:1}
}
@media(max-width:360px){
  .embedded-game #game{padding:5px 4px 2px}
  .embedded-game #game .level-head{padding:0;gap:4px}
  .embedded-game #game #chapter{font-size:9px;letter-spacing:.06em;white-space:nowrap}
  .embedded-game #game #leveltitle{font-size:24px;margin:2px 0 0}
  .embedded-game #game .hearts{font-size:19px;word-spacing:2px;padding:0}
  .embedded-game #game .progressline{margin:4px 0 5px}
  .embedded-game #game .rulechips{margin-bottom:5px}
  .embedded-game #game .rule-grid{width:28px}
  #soloRoomDialog{padding:10px 12px}
  #soloRoomDialog h2{margin-bottom:10px}
  #solo-room-controls{gap:7px}
  #room-roster .team{padding-inline:6px}
  #room-roster #players .player{padding:5px 2px;gap:5px}
}

.embedded-game #game:has(#board:not([hidden])){
  position:relative;width:min(100%,760px);height:var(--beedoku-play-height,auto);
  padding:clamp(9px,3.9cqw,24px) clamp(10px,3vw,24px) 0;
  display:flex;flex-direction:column;justify-content:space-between;gap:0;
}
.embedded-game #game:has(#board:not([hidden]))::after{content:"";height:24px;flex:none}
.embedded-game #game:has(#board:not([hidden])) > .board-heading{
  display:grid;gap:clamp(4px,1.35cqw,8px);flex:none;
}
.embedded-game #game:has(#board:not([hidden])) .board-heading > :is(.progressline,.rulechips){margin:0}
.embedded-game #game:has(#board:not([hidden])) > .board-tray{
  max-width:var(--beedoku-fit-board,100%);margin-inline:auto;flex:none;
}
.embedded-game #game .tracker-strip{
  display:flex;align-items:end;height:clamp(35px,12cqw,62px);
}
/* Collection replaces the Score label in-place; it must not add a header row. */
.embedded-game #game .board-score{position:relative}
.embedded-game #game #collect-counter{
  position:absolute;top:-8px;left:50%;translate:-50% 0;white-space:nowrap;
}
.embedded-game #game .board-score:has(#collect-counter:not([hidden])) > span:first-child{visibility:hidden}
.embedded-game #game #chapter{display:block;line-height:1.1}
.embedded-game #game:has(#board:not([hidden])) .game-lower{
  display:contents;
}
.embedded-game #game:has(#board:not([hidden])) :is(.board-tools,.board-instructions){flex:none}
.embedded-game #game:has(#board:not([hidden])) .board-instructions{
  position:absolute;left:clamp(10px,3vw,24px);right:clamp(10px,3vw,24px);bottom:0;
  display:grid;margin:0;height:0;min-height:0;max-height:0;overflow:visible;
}
.embedded-game #game:has(#board:not([hidden])) .board-instructions > :not([hidden]){
  position:absolute;left:0;right:0;bottom:0;margin:0;
}

#round-roster{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;height:clamp(43px,8cqw,60px)}
#round-roster:has(.rose){grid-template-columns:repeat(2,minmax(0,1fr))}
.round-card,#team-totals > .round-card{
  min-width:0;display:grid;align-content:center;gap:3px;
  padding:3px 7px;border-radius:10px;background:#fff9f6;text-align:left;
}
.round-card.rose,#team-totals > .round-card.rose{background:#f3dbe6;color:#67374f}
.round-card.sky,#team-totals > .round-card.sky{background:#dcecf7;color:#315873}
.round-card-title{display:flex;justify-content:space-between;gap:5px;font-size:12px;line-height:1.1;font-weight:850}
#team-totals .round-card-title strong{font-size:inherit;line-height:inherit}
.round-players{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  gap:4px;margin:0;padding:0;list-style:none;
}
.round-players li{display:flex;align-items:center;gap:4px;min-width:0}
.round-players li > span:last-child{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:clamp(11px,3.05cqw,15px);line-height:1.1;font-weight:760;
}
.round-players .beedoku-avatar{
  flex:none;width:clamp(20px,5.9cqw,34px);height:clamp(20px,5.9cqw,34px);
  border:1px solid #fffbf4;border-radius:50%;object-fit:cover;
}
@media(max-width:360px){
  .embedded-game #game:has(#board:not([hidden])){padding:9px 8px 0}
  .embedded-game #game .level-identity:has(.progressline) #chapter{display:none}
  .embedded-game #game .level-identity .progressline{
    max-width:92px;margin:0;gap:4px;font-size:11px;line-height:1.1;white-space:nowrap;
  }
  .embedded-game #game .level-identity .track{min-width:8px;height:4px}
  #round-roster{height:41px}
  #round-roster .round-card{gap:2px;padding-block:2px}
}

#finish{
  --win-ink:#fff8e9;--win-accent:#f6c765;--win-rays:#e7a83185;--win-surface:#292138;
  background:#151121;color:var(--win-ink);isolation:isolate;
}
#finish[data-tier=glow]{--win-accent:#e7b9ff;--win-rays:#ae62d58c;--win-surface:#2a203b;}
#finish[data-tier=complete]{--win-accent:#b4e6c5;--win-rays:#69c78975;--win-surface:#1c2d30;}
#finish[data-tier=recap]{--win-accent:#d5c8e5;--win-rays:#75688e24;}
#finish .rays{
  position:absolute;z-index:0;inset:0;height:100%;pointer-events:none;
  background:repeating-conic-gradient(from 10deg at 50% var(--ray-center-y,225px),var(--win-rays) 0 11deg,transparent 11deg 29deg);
  mask-image:radial-gradient(ellipse at 50% var(--ray-center-y,225px),#000 5%,transparent 65%),
    radial-gradient(ellipse var(--ray-gap-x,116px) var(--ray-gap-y,158px) at 50% var(--ray-center-y,225px),transparent 96%,#000 148%);
  mask-composite:intersect;
}
#finish .finish-content{position:relative;z-index:1;width:min(100%,460px);padding:var(--overlay-top,24px) 20px var(--overlay-bottom,24px);display:grid;min-height:100%;align-content:center;justify-items:center;gap:8px;}
#finish .confetti{z-index:0;}
#finish-title{color:var(--win-accent);font-size:clamp(32px,10vw,46px);line-height:1.04;margin:7px 0 5px;}
#finish .bee-stage{width:100%;height:clamp(140px,38dvh,385px);position:relative;}
#finish-bee{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain;pointer-events:none;}
#finishcopy{font-weight:750;margin:8px 0;}
#finish .finish-difficulty{
  display:inline-block;padding:4px 11px;margin:1px 0;color:var(--win-accent);
  background:#ffffff12;border:1px solid #ffffff36;border-radius:999px;font-size:13px;
}
#finish #next{background:var(--win-accent);color:#211629;box-shadow:none;border:0;font-weight:850;margin:14px 0 0;}
#finish :is(#dismiss,#rank-continue),#rank-close{color:var(--win-ink);min-height:44px;padding:6px 14px;}
#tool-reward{display:flex;align-items:center;gap:8px;width:min(100%,218px);min-height:25px;}
.reward-icon{width:19px;height:19px;fill:none;stroke:var(--win-accent);stroke-width:1.6;}
.reward-meter{display:grid;flex:1;grid-template-columns:repeat(5,1fr);gap:3px;}
.reward-meter span{height:5px;border-radius:4px;background:#ffffff35;}
.reward-meter .filled{background:var(--win-accent);}
.reward-meter .just-filled{animation:reward-fill .52s ease-out both;transform-origin:left;}
@keyframes reward-fill{from{transform:scaleX(.02);}}
#rank-screen{
  --win-ink:#fff8e9;--win-accent:#f6ce83;
  position:fixed;inset:0;z-index:6;overflow:auto;color:var(--win-ink);background:#16131f;
}
.rank-content{width:min(100%,450px);min-height:100%;margin:auto;padding:var(--overlay-top,24px) 20px var(--overlay-bottom,24px);display:grid;align-content:center;gap:18px;text-align:center;}
.rank-content h2{font-size:clamp(29px,8vw,44px);margin:0;color:var(--win-accent);}
#rank-battle-score{margin:0;font-weight:750;}
#rank-points{color:var(--win-accent);font-weight:800;margin:0 0 14px;}
#rank-message{font-size:16px;font-weight:750;min-height:1.4em;margin:14px 0 0;}
#rank-close{
  justify-self:center;width:min(100%,252px);min-height:54px;padding:7px 14px;
  border:1px solid #bd772f;border-radius:18px;background:linear-gradient(#ffe29b,#ffc366);
  box-shadow:0 3px 0 #bb742e,inset 0 2px 0 #fff1be;color:#4b2d11;font-size:18px;font-weight:800;
}
#rank-close:active{box-shadow:0 1px 0 #bb742e}
#rank-climb-rows{display:grid;gap:4px;margin:8px 0 0;padding:0;list-style:none;}
#rank-climb-rows li{display:grid;grid-template-columns:39px minmax(0,1fr) auto;align-items:center;gap:6px;min-height:42px;padding:5px 9px;border-radius:8px;background:#f8f0e5;color:#342537;font-size:14px;text-align:left;}
#rank-climb-rows .your-rank{background:var(--win-accent);color:#20162a;border-radius:7px;position:relative;z-index:1;}
.rank-player,.rank-flying-points{display:flex;align-items:center;gap:5px;}
.rank-player>span{overflow-wrap:anywhere;min-width:0;}
.rank-bee,.rank-bee img{display:block;width:24px;height:24px;flex:none;object-fit:contain;}
.rank-flying-points{position:fixed;z-index:5;border-radius:10px;padding:3px 6px;color:#241830;background:var(--win-accent);font-size:13px;font-weight:850;white-space:nowrap;pointer-events:none;}
.rank-flying-points .rank-bee,.rank-flying-points .rank-bee img{width:20px;height:20px;}
#failureDialog[open]{
  display:block;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  margin:0;padding:0;border:0;border-radius:0;box-shadow:none;color:#f5f3ff;
  background:radial-gradient(ellipse at 50% 47%,#27334d 0%,#181d2b 47%,#121420 80%);
}
#failureDialog::backdrop{background:#121420;}
.failure-content{
  width:min(100%,475px);min-height:100%;margin:auto;padding:var(--overlay-top,24px) 22px var(--overlay-bottom,24px);
  display:grid;align-content:center;justify-items:center;gap:clamp(8px,2dvh,19px);
}
#failure-title{outline:none;color:#cde6ff;font-size:clamp(34px,9vw,52px);font-weight:900;line-height:1.05;}
#failureDialog .retry-scene{width:100%;height:clamp(170px,45dvh,455px);margin:0;border-radius:0;}
#failureDialog .retry-scene img{width:100%;height:100%;aspect-ratio:auto;}
#failure-copy{margin:0;font-weight:700;}
.failure-actions{display:grid;gap:9px;width:min(100%,278px);}
.failure-actions button{min-height:44px;border:0;box-shadow:none;}
#failure-reward{background:#8fc6fb;color:#132d50;}
#failure-reward:disabled{opacity:.72;}
#failure-reward small{display:inline-block;margin-left:3px;border-radius:4px;padding:2px 4px;background:#d6f3a5;color:#213a1b;font-size:10px;vertical-align:2px;}
#failure-retry{background:#e0efff;color:#25394c;}
body:has(#finish:not([hidden]),#rank-screen:not([hidden]),#failureDialog[open]) .dock{display:none;}
@media(max-height:620px){
  #finish .finish-content{gap:5px;}
  #finish #next{margin-top:5px;}
  .failure-content{gap:8px;}
}
#game .tool-refill .tool-count{background:#117545;min-width:35px;width:auto;padding-inline:4px;white-space:nowrap;}
@media (prefers-reduced-motion:reduce){
  #finish #finish-bee,.reward-meter .just-filled{animation:none;}
}
#rank-title{outline:none;}
#finish #next:not([hidden]){animation:next-in .23s ease-out both;}
@keyframes next-in{from{opacity:0;transform:translateY(4px)}}
@media(prefers-reduced-motion:reduce){#finish #next:not([hidden]){animation:none;}}
#finish .next-slot{width:100%;min-height:58px;}
/* Queued board effects belong to the board, even when an outcome opens early. */
body:has(#finish:not([hidden]),#failureDialog[open]) #game{visibility:hidden;}
@media (max-width:360px) {
  #solo-room-controls, #solo-room-controls #room-roster { grid-template-columns:minmax(0,1fr); }
  #room-roster #players .player { flex-wrap:nowrap; gap:4px; padding-block:2px; }
  #room-roster #players .player-name {
    flex:1 1 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  #room-roster #players .voice-button { min-width:44px; width:44px; padding:0; }
  #room-roster #players .voice-button span { display:none; }
  #room-roster #players .voice-flag { flex:none; }
}

/* Fullscreen panels are siblings of #game: only the dimmed board keeps its safe-area origin. */
.embedded-game.beedoku-overlay-content #game:has(#board:not([hidden])){
 transform:translateY(var(--overlay-board-offset,0px));padding-inline:var(--beedoku-rest-inline-padding);
}
.embedded-game.beedoku-overlay-content #game:has(#board:not([hidden])) .board-instructions{
 left:var(--beedoku-rest-inline-padding);right:var(--beedoku-rest-inline-padding);
}

/* Next update: keep tools below the board on every grid, with a clear dock gap. */
.embedded-game #game:has(#board:not([hidden])) > .board-tray{order:2}
.embedded-game #game:has(#board:not([hidden])) > .board-heading{order:1}
.embedded-game #game:has(#board:not([hidden])) .board-tools{order:3;margin-block:12px 0}
.embedded-game #game:has(#board:not([hidden]))::after{order:4;height:18px}
