/* In-game assistance: one calm card above the board's bottom edge, reasons for blocked taps,
   piece reminders, and queen outlines. Uses the app's theme tokens. */
#assist-note{position:absolute;left:12px;right:84px;bottom:14px;margin-inline:auto;z-index:40;display:flex;align-items:flex-start;gap:10px;width:auto;max-width:440px;padding:10px 8px 10px 14px;border-radius:14px;background:color-mix(in srgb,var(--panel) 94%,transparent);color:var(--ink);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);box-shadow:0 10px 30px #0004;font-size:14px;line-height:1.4;pointer-events:auto;backdrop-filter:blur(6px)}
#assist-note[hidden]{display:none}
#assist-note .assist-body{display:grid;gap:2px}
#assist-note strong{font-size:13px;letter-spacing:.02em}
#assist-note[data-tone=why]{border-left:4px solid var(--orange,#efa94c)}
#assist-note[data-tone=must]{border-left:4px solid #e0533d}
#assist-note[data-tone=piece]{border-left:4px solid var(--accent)}
#assist-note .assist-close{flex:none;width:32px;height:32px;margin:-4px 0;border-radius:50%;font-size:18px;line-height:1;color:var(--muted);background:transparent;padding:0}
#assist-note .assist-close:hover{background:color-mix(in srgb,var(--ink) 10%,transparent)}
html body .board-footer>#assist-note[data-tone=piece]{position:relative;inset:auto;box-sizing:border-box;order:-1;width:100%;max-width:none;margin:0 0 4px;padding:8px 8px 4px;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;background:transparent;backdrop-filter:none}
#assist-note .assist-body{flex:1;min-width:0}
#assist-note .assist-understood{justify-self:start;min-height:36px;padding:4px 0;border:0;background:transparent;color:var(--accent);font:inherit;font-weight:600;text-align:left;text-decoration:underline;text-underline-offset:3px}
#assist-note .assist-close{min-width:44px;width:44px;min-height:44px;height:44px}
@media (prefers-reduced-motion:no-preference){#assist-note:not([hidden]){animation:assist-in .18s ease-out}}
@keyframes assist-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* Reserve pieces that can't be played this turn by the side to move. */
.reserve-stack.unavailable{opacity:.34;filter:grayscale(.7)}
.reserve-stack.unavailable:hover .face{stroke:inherit}
/* Brief pulse on the piece a reason refers to (e.g. would split the hive). */
@media (prefers-reduced-motion:no-preference){.assist-flash .tile-art:last-of-type .face{animation:assist-pulse .45s ease-in-out 3 alternate}}
@keyframes assist-pulse{to{stroke:#e0533d;stroke-width:5}}
/* Queen Mobility: four or five pinned neighbouring spaces, with no queen escape. */
.queen-glow polygon{fill:#f0b64a1f;stroke:#f0b64a;stroke-width:3.5;stroke-linejoin:round;stroke-opacity:.9}
.queen-glow[data-filled="5"] polygon{fill:#ff5a4426;stroke:#ff5a44;stroke-width:4.5}

/* Learn to play: the first card on the Play page. It stays prominent until the course is done. */
#beta-hub .beta-play>.learn-entry{grid-column:1/-1;display:flex;align-items:center;gap:14px;min-height:84px;padding:16px 18px;border-radius:14px;border:1.5px solid var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--panel));color:var(--ink);text-decoration:none;text-align:left}
#beta-hub .beta-play>.learn-entry:hover{background:color-mix(in srgb,var(--accent) 22%,var(--panel))}
#beta-hub .beta-play>.learn-entry svg{width:34px;height:34px;flex:none;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#beta-hub .beta-play>.learn-entry strong{font-size:18px;font-weight:650}
#beta-hub .beta-play>.learn-entry span{font-size:13px;line-height:1.4;color:var(--muted);margin-top:4px}
#beta-hub .beta-play>.learn-entry[data-state=done]{order:9;border-width:1px;border-color:color-mix(in srgb,var(--line) 60%,transparent);background:var(--menu-control,var(--panel));min-height:64px}
#beta-hub .beta-play>.learn-entry[data-state=done] strong{font-size:16px}

/* Help adds labels; Off keeps the same accessible icon controls. */
html body[data-screen=mobile][data-landscape=false]:is([data-assist=light],[data-assist=guided]) .footer-panels :is(button,#room-toggle,#board-chat-toggle)[data-label]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:52px;min-height:52px;padding-top:4px;padding-bottom:3px}
html body[data-screen=mobile][data-landscape=false]:is([data-assist=light],[data-assist=guided]) .footer-panels [data-label]::after{content:attr(data-label);display:block;font-size:14px;line-height:1.1;font-weight:400;color:var(--ink);white-space:nowrap;letter-spacing:0}
html body[data-screen=mobile][data-landscape=false]:is([data-assist=light],[data-assist=guided]) .footer-panels [data-label]:is([aria-pressed=true],[aria-expanded=true])::after{color:var(--ink)}
html body[data-screen=mobile][data-landscape=false]:is([data-assist=light],[data-assist=guided]) .footer-panels [data-label]:disabled::after{opacity:.6}

/* A first game with Guided help keeps the toolbar to the essentials: analysis tools return after it. */
body[data-assist=guided] :is(.footer-panels,.board-tools) .drawer-tab:is([aria-controls=ai-panel],[aria-controls=strategy-panel],[aria-controls=graph-panel]){display:none!important}

/* Settings tabs: "Appearance" must never break mid-word. */
#settings-dialog .settings-tabs button .setting-label{white-space:nowrap;font-size:min(12.5px,3.3vw)}
/* Phone: the piece tip takes the place of the control bar while it shows.
   It never covers the board and never changes the board's size, so the hive
   and its targets stay where they were when the bug was picked up. */
html body[data-screen=mobile] .board-footer>#assist-note[data-tone=piece]{position:absolute;left:0;right:0;top:auto;bottom:0;z-index:8;order:0;width:auto;min-height:100%;margin:0;padding:6px 0 6px 12px;align-items:center;gap:2px;border:0;border-radius:inherit;background:var(--panel);font-size:13px;line-height:1.3}
html body[data-screen=mobile] .board-footer>#assist-note[data-tone=piece] .assist-body{display:block}
html body[data-screen=mobile] .board-footer>#assist-note[data-tone=piece] .assist-body>strong{margin-right:.35em;font-size:13px}
html body[data-screen=mobile] .board-footer>#assist-note[data-tone=piece] .assist-understood{display:inline-block;min-height:24px;margin-left:.35em;padding:2px 0;line-height:1.3;vertical-align:baseline}
/* Landscape keeps its bar at the top of the rail: the tip hangs just below
   it, over the top of the rail, and leaves the bar itself usable. */
html body[data-screen=mobile][data-landscape=true] .board-footer>#assist-note[data-tone=piece]{top:calc(100% + 4px);bottom:auto;min-height:0;z-index:30;padding:6px 0 6px 10px;border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 20px #0003;font-size:12.5px}