/* Only the end icons: one slim row with a single icon at each end, nothing else competing with the game.
   - Home / settings: logo at the left end, menu at the right end (counters live in the home screen).
   - Playing: the brand bar is gone; the level bar is just ← at the left end and ⚙ at the right end with "LEVEL n" between them.
   - Power-ups are big round icon-only buttons with a small count badge. */

/* top bar: icons only */
.appbar{height:60px;padding:0 14px}
.wordmark span{display:none}
.wordmark{padding:0}
.wordmark img{width:42px;height:42px}
.wallet{gap:0}
.round-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:1.15rem;line-height:1}

/* counters now sit in the home hero */
.home-stats{display:flex;gap:9px;margin:14px 0 4px;flex-wrap:wrap}
.home-stats>span{height:38px;display:flex;align-items:center;gap:7px;padding:0 13px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.055);font-size:.8rem;color:var(--cyan)}
.home-stats b{color:#fff}
.home-stats small{color:#9da7cc;font-size:.7rem;font-weight:700}

/* while a level is open the brand bar steps aside */
body:has(#playScreen.active) .appbar{display:none}
.play-screen{padding-top:calc(env(safe-area-inset-top,0px) + 10px)}
.play-top{background:none;border:0;box-shadow:none;backdrop-filter:none;padding:0 2px;grid-template-columns:52px 1fr 52px}
.play-top .round-btn{width:50px;height:50px;border:1px solid rgba(255,255,255,.28);background:linear-gradient(180deg,rgba(48,43,125,.92),rgba(16,22,66,.94));box-shadow:0 5px 0 #11163d,0 10px 22px rgba(2,5,24,.45),inset 0 2px rgba(255,255,255,.22);font-size:1.3rem}
.level-title small{display:none}
.level-title strong{font-size:1rem;letter-spacing:.12em;text-shadow:0 2px 10px rgba(0,0,0,.6)}

/* power-ups: round, icon-only, count badge */
.powerbar{height:auto;max-width:none;display:flex;justify-content:center;gap:28px;margin-top:14px}
.powerbar button{width:68px;height:68px;border-radius:50%;padding:0;flex:none}
.powerbar span{display:none}
.powerbar i{font-size:1.7rem}
.powerbar b{right:-3px;top:auto;bottom:-3px;min-width:22px;height:22px;font-size:.7rem;background:#ff5c93;color:#fff;border:2px solid #0b1037}
.powerbar button:disabled b{background:#2a315e}
@media(max-width:560px){.powerbar{height:auto}.powerbar button{width:64px;height:64px}}

/* hints during a level appear under the end icons, never on top of the power-ups */
body:has(#playScreen.active) .toast{bottom:auto;top:calc(env(safe-area-inset-top,0px) + 74px)}

/* Bloom Week: seven days, one petal each; the seventh pays out */
.home-stats>.coins{cursor:pointer}.home-stats>.coins:hover{border-color:rgba(52,212,255,.5)}
.bloom{margin:30px 0 0;padding:18px 18px 16px;border:1px solid rgba(255,255,255,.12);border-radius:24px;background:linear-gradient(160deg,rgba(60,48,150,.5),rgba(14,20,64,.6));box-shadow:0 14px 40px rgba(2,5,24,.35)}
.bloom+.journey-head{margin-top:34px}
.bloom-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.bloom .eyebrow{color:var(--cyan);font-size:.62rem;font-weight:900;letter-spacing:.17em}
.bloom h3{margin:4px 0 0;font-size:1.25rem;letter-spacing:-.02em}
.shield-pill{padding:6px 12px;border-radius:999px;background:rgba(255,212,71,.12);border:1px solid rgba(255,212,71,.4);color:#ffd447;font-size:.72rem;font-weight:800}
.bloom-slots{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin:14px 0 10px}
.bs{display:grid;justify-items:center;gap:2px;padding:10px 2px 8px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:#8994bd}
.bs i{font-style:normal;font-size:1.35rem;line-height:1;height:28px;display:grid;place-items:center}
.bs i svg{width:28px;height:28px}
.bs b{font-size:.7rem;color:#c9d1f0}.bs small{font-size:.62rem;font-weight:800;letter-spacing:.04em}
.bs.on{background:linear-gradient(180deg,#ff8ec3,#e2489c);border-color:transparent;color:#fff;box-shadow:0 6px 18px rgba(226,72,156,.35)}.bs.on b{color:#fff}
.bs.next{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(52,212,255,.25);animation:bsp 1.6s ease-in-out infinite;color:#fff}
.bs.big:not(.on){border-color:rgba(255,212,71,.45);background:rgba(255,212,71,.08);color:#ffd447}
@keyframes bsp{50%{box-shadow:0 0 0 6px rgba(52,212,255,.1)}}
.bloom-note{margin:0;font-size:.85rem;color:#c2cbee}
@media(max-width:560px){.bloom{padding:14px 12px}.bloom-slots{gap:5px}.bs{padding:8px 0 6px;border-radius:12px}.bs i{font-size:1.1rem;height:24px}.bs i svg{width:24px;height:24px}.bs small{font-size:.55rem}}
body.reduce-motion .bs.next{animation:none}
@media(prefers-reduced-motion:reduce){.bs.next{animation:none}}

/* a message bubble must never swallow a tap meant for a tile underneath it (it sits over the top of tall boards on wide screens) */
.toast{pointer-events:none}

/* Weekly Challenge */
.bloom+.weekly{margin-top:14px}.weekly+.journey-head{margin-top:34px}
.weekly{margin:30px 0 0;padding:16px 18px;border:1px solid rgba(255,212,71,.28);border-radius:24px;background:linear-gradient(160deg,rgba(90,60,160,.45),rgba(14,20,64,.6));box-shadow:0 14px 40px rgba(2,5,24,.3)}
.wk-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.weekly .eyebrow{color:#ffd447;font-size:.62rem;font-weight:900;letter-spacing:.17em}
.weekly h3{margin:4px 0 0;font-size:1.25rem;letter-spacing:-.02em}
.wk-pill{padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#c9d1f0;font-size:.72rem;font-weight:800}
.wk-note{margin:10px 0 12px;font-size:.85rem;color:#c2cbee}.wk-note b{color:#ffd447}
@media(max-width:560px){.weekly{padding:14px 12px}}

.float-tile{display:grid;place-items:center;padding:8px}.float-tile svg{width:100%;height:100%;filter:drop-shadow(0 4px 6px rgba(50,30,110,.35))}