/* HIVELAB design tokens and the layer order for redesigned screens.

   The older stylesheets are unlayered, so they still win over anything in
   these layers. Each screen that moves onto the tokens removes the old rules
   it replaces in the same change; do not add another override file.

   tokens     custom properties only
   switches   which controls exist on which screen. Important declarations
              cascade in reverse layer order, so these outrank the
              components' own important rules (needed against legacy CSS).
   base       element defaults for new UI
   components one button system, sheets, segmented tabs, the phone bars
   screens    per-screen arrangement (the phone game screen, settings looks) */
@layer tokens, switches, base, components, screens;

@layer tokens{
 :root{
  /* 8-point spacing, with a 4 px half step. */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;
  /* One type scale and two weights. */
  --text-xs:12px;--text-sm:14px;--text-md:16px;--text-lg:20px;--text-xl:24px;
  --weight-regular:400;--weight-strong:600;
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-pill:999px;
  /* Touch targets: never smaller on phones. */
  --touch:44px;
  /* Surfaces follow the active theme and interface colour. */
  --ui-surface:var(--panel);--ui-ink:var(--ink);--ui-muted:var(--muted);--ui-line:var(--line);--ui-accent:var(--accent);
  --ui-primary:var(--ink);--ui-on-primary:var(--panel);
  --ui-tonal:color-mix(in srgb,var(--accent) 16%,var(--panel));
  --ui-hover:color-mix(in srgb,var(--ink) 7%,transparent);
  --ui-shadow:0 12px 32px #0000002e;
  --ui-focus:0 0 0 2px var(--panel),0 0 0 4px var(--accent);
  /* Multi-colour interface themes (Almanac, Indigo, Peony, Lagoon) fill these
     roles in menus.css. The one-hue themes leave the defaults, which give the
     one-hue look: bars in the panel colour, chips tinted with the accent. */
  --ui-bar:var(--panel);--ui-on-bar:var(--ink);--ui-on-bar-muted:var(--muted);--ui-bar-line:var(--line);
  --ui-nav-mark:var(--accent);
  --chip-1-bg:color-mix(in srgb,var(--accent) 13%,transparent);--chip-1-fg:var(--accent);
  --chip-2-bg:var(--chip-1-bg);--chip-2-fg:var(--chip-1-fg);
  --chip-3-bg:var(--chip-1-bg);--chip-3-fg:var(--chip-1-fg);
  --chip-4-bg:var(--chip-1-bg);--chip-4-fg:var(--chip-1-fg);
  /* The page's own colours, for menus that open from a coloured bar. */
  --page-panel:var(--panel);--page-ink:var(--ink);--page-muted:var(--muted);--page-line:var(--line);
 }
 /* A coloured bar redefines the colours for what it contains, so every older
    rule that paints with --panel and --ink follows without an override. */
 body>header,#beta-hub.app-shell>.shell-top,.lesson-page-header{--panel:var(--ui-bar);--ink:var(--ui-on-bar);--muted:var(--ui-on-bar-muted);--line:var(--ui-bar-line);--ui-surface:var(--ui-bar);--ui-ink:var(--ui-on-bar);--ui-muted:var(--ui-on-bar-muted);--ui-line:var(--ui-bar-line);--ui-hover:color-mix(in srgb,var(--ui-on-bar) 10%,transparent)}
 /* On wide screens Home's navigation rail joins the bar. */
 @media(min-width:900px){#beta-hub.app-shell>.shell-nav{--panel:var(--ui-bar);--ink:var(--ui-on-bar);--muted:var(--ui-on-bar-muted);--line:var(--ui-bar-line)}}
 /* ...and gives the page's colours back to menus and sheets that open from it. */
 :is(body>header,#beta-hub.app-shell>.shell-top) :is(dialog,[popover],.workspace-menu-items,.game-picker,#game-picker-list,.notification-panel,.notifications-panel){--panel:var(--page-panel);--ink:var(--page-ink);--muted:var(--page-muted);--line:var(--page-line);--ui-surface:var(--page-panel);--ui-ink:var(--page-ink);--ui-muted:var(--page-muted);--ui-line:var(--page-line);--ui-hover:color-mix(in srgb,var(--page-ink) 7%,transparent)}
}

@layer switches{
 body.puzzle-mode .phone-actions,body.puzzle-mode .footer-panels{display:none!important}
 #game-end[hidden]{display:none!important}
 [hidden]:is(.phone-actions,.analyze-tabs,.help-sheet),.phone-actions button[hidden],.analyze-tabs button[hidden]{display:none!important}
 /* Phone portrait: the slim top bar. */
 #phone-more-slot{display:none!important}
 body.phone-shell:not([data-landscape=true]) #phone-more-slot{display:flex!important}
 body:not(.phone-shell) #phone-more-slot{display:flex!important}
 body:not(.phone-shell) .phone-title,body.phone-shell[data-landscape=true] .phone-title{display:none!important}
 .phone-home-icon{display:none!important}
 body.phone-shell:not([data-landscape=true]) .phone-home-icon{display:block!important}
 body.phone-shell:not([data-landscape=true]) :is(header .brand .brand-wordmark,#settings,#fullscreen,header .theme-switch,#mobile-game-select>summary){display:none!important}
 /* On the narrowest phones Home remains in the actions menu; keep the game and turn readable. */
 @media(max-width:359px){body.phone-shell:not([data-landscape=true])>header .brand{display:none!important}}
 /* Familiar board tools stay directly reachable; reserve hiding is contextual. */
 body.phone-shell #reserve-dock-toggle{display:none!important}
 body.phone-shell #desktop-help{display:none!important}
 body:not(.phone-shell) #online-help,body:not(.online-game) #online-help{display:none!important}
 body[data-assist=off] .phone-actions button>span,body[data-assist=off] .footer-panels [data-label]::after{display:none!important}
 body.puzzle-mode #microscope-toggle{display:none!important}
 body.phone-shell .board-tools :is(#microscope-toggle,.board-focus-button){width:34px!important;min-width:34px!important;height:36px!important;min-height:36px!important}
 body:not(.phone-shell) .phone-app-extra{display:none!important}
 /* Bottom bar in local games; online games keep their own (Game, Chat, Moves). */
 body.phone-shell:not(.online-game) .footer-panels{display:none!important}
 body:not(.phone-shell) .phone-actions,body.phone-shell.online-game .phone-actions{display:none!important}
 body:not(.phone-shell) :is(.analyze-tabs,.sheet-head),body.phone-shell.online-game :is(.analyze-tabs,.sheet-head){display:none!important}
 [hidden].sheet-head{display:none!important}
 /* The light/dark slider stays next to Close, on every Settings tab. */
 #settings-dialog .settings-header-theme{display:flex!important}
}

@layer base{
 .reserve-summary{display:none}
 .ui-sheet,.phone-actions,.analyze-tabs,.phone-title{font-family:inherit!important;-webkit-tap-highlight-color:transparent!important}
}

@layer components{
 /* Buttons: filled primary, tonal secondary, ghost. */
 .ui-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--touch);padding:0 var(--space-4);border:1px solid transparent;border-radius:var(--radius-sm);background:var(--ui-tonal);color:var(--ui-ink);font-family:inherit;font-size:var(--text-sm);font-weight:var(--weight-strong);line-height:1.2;cursor:pointer}
 .ui-button.primary{background:var(--ui-primary);color:var(--ui-on-primary)}
 .ui-button.ghost{background:transparent;border-color:var(--ui-line)}
 .ui-button:focus-visible,.ui-icon-button:focus-visible,.ui-segmented button:focus-visible,.phone-actions button:focus-visible,.phone-title:focus-visible{outline:none;box-shadow:var(--ui-focus)}
 .ui-icon-button{display:inline-grid!important;place-items:center!important;width:var(--touch)!important;height:var(--touch)!important;min-height:0!important;padding:0!important;border:0!important;border-radius:var(--radius-sm)!important;background:transparent!important;color:var(--ui-muted)!important;cursor:pointer!important}
 .ui-icon-button:hover{background:var(--ui-hover)!important;color:var(--ui-ink)!important}
 .ui-icon-button svg,.ui-button svg{width:22px!important;height:22px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}

 /* Segmented tabs (Analyze, theme). */
 .ui-segmented{display:grid!important;grid-auto-flow:column!important;grid-auto-columns:1fr!important;gap:2px!important;padding:3px!important;border-radius:var(--radius-md)!important;background:color-mix(in srgb,var(--ui-ink) 7%,transparent)!important}
 .ui-segmented button{min-height:var(--segment-height,38px)!important;padding:0 var(--space-2)!important;border:0!important;border-radius:calc(var(--radius-md) - 3px)!important;background:transparent!important;color:var(--ui-muted)!important;font-family:inherit!important;font-size:var(--text-sm)!important;font-weight:var(--weight-strong)!important;line-height:1!important;cursor:pointer!important}
 .ui-segmented button[aria-selected=true],.ui-segmented button[aria-pressed=true]{background:var(--ui-surface)!important;color:var(--ui-ink)!important;box-shadow:0 1px 3px #0002!important}

 /* Sheets: a dialog that rises from the bottom on phones, centred elsewhere.
    Legacy dialog rules are unlayered, so layout declarations are important. */
 .ui-sheet{box-sizing:border-box!important;width:min(520px,100%)!important;max-height:min(86dvh,760px)!important;margin:auto!important;padding:var(--space-4) var(--space-4) var(--space-5)!important;border:1px solid var(--ui-line)!important;border-radius:var(--radius-lg)!important;background:var(--ui-surface)!important;color:var(--ui-ink)!important;box-shadow:var(--ui-shadow)!important;overflow:auto!important}
 .ui-sheet::backdrop{background:#0006!important}
 .ui-sheet-head{display:flex!important;align-items:center!important;gap:var(--space-2)!important;margin:0 0 var(--space-3)!important}
 .ui-sheet-head h2{flex:1!important;margin:0!important;font-size:var(--text-lg)!important;font-weight:var(--weight-strong)!important}
 .ui-sheet h3{margin:var(--space-4) 0 var(--space-2)!important;font-size:var(--text-xs)!important;font-weight:var(--weight-strong)!important;letter-spacing:.06em!important;text-transform:uppercase!important;color:var(--ui-muted)!important}
 .ui-sheet p{color:var(--ui-muted)!important;margin:0 0 var(--space-2)!important;font-size:var(--text-sm)!important;line-height:1.45!important}
 body[data-screen=mobile] .ui-sheet{inset:auto 0 0 0!important;width:100%!important;max-width:100%!important;margin:0!important;border-radius:var(--radius-lg) var(--radius-lg) 0 0!important;border-width:1px 0 0!important;padding-bottom:calc(var(--space-5) + env(safe-area-inset-bottom))!important}

 /* The phone bottom bar: four labelled actions. Legacy header and footer
    button rules are unlayered, so these declarations are marked important. */
 .phone-actions{display:grid!important;grid-auto-flow:column!important;grid-auto-columns:minmax(0,1fr)!important;gap:var(--space-1)!important;width:100%!important}
 .phone-actions button{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important;min-height:52px!important;padding:4px 2px!important;border:0!important;border-radius:var(--radius-md)!important;background:transparent!important;color:var(--ui-ink)!important;font-family:inherit!important;font-size:var(--text-sm)!important;font-weight:var(--weight-regular)!important;line-height:1.1!important;cursor:pointer!important}
 .phone-actions button svg{width:24px!important;height:24px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.7!important;stroke-linecap:round!important;stroke-linejoin:round!important}
 .phone-actions button[aria-pressed=true]{background:var(--ui-primary)!important;color:var(--ui-on-primary)!important;font-weight:var(--weight-strong)!important;box-shadow:inset 0 0 0 2px var(--ui-primary)!important}
 .phone-actions button:disabled{color:var(--ui-muted)!important;opacity:.45!important;cursor:default!important}
 .phone-actions button[hidden]{display:none!important}
 /* Portrait actions keep their labels and a 44px tap target. */
 body.phone-shell:not([data-landscape=true]) .phone-actions button{height:44px!important;min-height:44px!important;padding:3px 2px!important;font-size:12px!important;gap:1px!important}
 body.phone-shell:not([data-landscape=true]) .phone-actions button svg{width:18px!important;height:18px!important}
 /* Compact landscape rail (pass 6, W7; layout-refinements.css): the local actions
    sit in two rows of three beside Games, like the online ones. */
 body.phone-shell[data-landscape=true]:not(.drawer-left-open):not([data-history-open=true]):not([data-window-open],.game-window[open],[data-strategy-open],#strategy-panel:not([hidden])):not(.microscope-active):not([data-playback=true]) .footer-actions>.phone-actions{grid-auto-flow:row!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:3px!important}
 body.phone-shell[data-landscape=true]:not(.drawer-left-open):not([data-history-open=true]):not([data-window-open],.game-window[open],[data-strategy-open],#strategy-panel:not([hidden])):not(.microscope-active):not([data-playback=true]) .footer-actions>.phone-actions button{min-height:42px!important;height:42px!important;padding:3px 2px!important;font-size:10px!important;gap:2px!important}
 body.phone-shell[data-landscape=true]:not(.drawer-left-open):not([data-history-open=true]):not([data-window-open],.game-window[open],[data-strategy-open],#strategy-panel:not([hidden])):not(.microscope-active):not([data-playback=true]) .footer-actions>.phone-actions button svg{width:20px!important;height:20px!important}

 /* The slim top bar title: the game and whose turn it is; opens Games. */
 .phone-title{display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:flex-start!important;flex:1!important;min-width:0!important;min-height:var(--touch)!important;padding:2px var(--space-2)!important;border:0!important;border-radius:var(--radius-sm)!important;background:transparent!important;color:var(--ui-ink)!important;text-align:left!important;cursor:pointer!important}
 .phone-title:hover{background:var(--ui-hover)!important}
 .phone-title-row{display:flex!important;align-items:center!important;gap:2px!important;max-width:100%!important;min-width:0!important}
 .phone-title-caret{flex:none!important;width:18px!important;height:18px!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important;color:var(--ui-muted)!important;transition:transform .15s!important}
 .phone-title[aria-expanded=true] .phone-title-caret{transform:rotate(180deg)!important}
 .phone-title-name{max-width:100%!important;overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important;font-size:var(--text-md)!important;font-weight:var(--weight-strong)!important;line-height:1.2!important}
 .phone-title-status{display:flex!important;align-items:center!important;gap:6px!important;max-width:100%!important;overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important;font-size:var(--text-xs)!important;line-height:1.3!important;color:var(--ui-muted)!important}
 .phone-title-status i{flex:none!important;width:9px!important;height:9px!important;border-radius:50%!important;border:1px solid var(--ui-ink)!important;background:#f6f2e7!important}
 .phone-title[data-side=b] .phone-title-status i{background:#20252b!important}
 .phone-title[data-side=''] .phone-title-status i{display:none!important}
 .phone-title[data-tone=turn] .phone-title-status{color:var(--ui-ink)!important;font-weight:var(--weight-strong)!important}

 /* The analysis sheet's head: four tabs and the size button. */
 .sheet-head{display:flex;flex-direction:column;padding:0 var(--space-1) var(--space-1);border-bottom:1px solid var(--ui-line)}
 .sheet-grabber{display:grid;place-items:center;width:100%;height:24px;min-height:24px;margin:0;padding:0;border:0;border-radius:var(--radius-sm);background:transparent;cursor:ns-resize;-webkit-tap-highlight-color:transparent}
 .sheet-grabber span{display:block;width:40px;height:4px;border-radius:2px;background:color-mix(in srgb,var(--ui-ink) 28%,transparent)}
 .sheet-grabber:hover span,.sheet-grabber:focus-visible span{background:color-mix(in srgb,var(--ui-ink) 55%,transparent)}
 .sheet-grabber:focus-visible{outline:none;box-shadow:var(--ui-focus)}
 .sheet-tabs-row{display:flex;align-items:center;gap:var(--space-1)}
 .sheet-tabs-row .analyze-tabs{flex:1;min-width:0;margin:0}
 .sheet-tabs-row .analyze-tabs{grid-auto-columns:auto!important;justify-content:stretch!important}
 .sheet-tabs-row .analyze-tabs button{padding:0 4px!important;font-size:clamp(10.5px,3.55vw,14px)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
 body[data-landscape=true] .sheet-tabs-row .analyze-tabs button{padding:0 3px!important;font-size:12.5px!important;letter-spacing:-.01em!important}
 .sheet-close{flex:none}

 /* Help uses the bugs' own colours; details stay with their basic move. */
 #phone-help .ui-sheet-head{position:sticky!important;top:-16px!important;z-index:3!important;background:var(--ui-surface)!important;padding-block:8px!important}
 .help-levels{margin:8px 0 2px}
 #phone-help .help-topic>summary{justify-content:flex-start;gap:10px}
 #phone-help .help-topic>summary>span:last-child{flex:1}
 .help-topic-icon{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:8px;background:color-mix(in srgb,var(--topic-ink) 16%,var(--ui-surface));color:var(--topic-ink)}
 .help-topic:nth-child(1){--topic-ink:#b87910}
 .help-topic:nth-child(2){--topic-ink:#269d83}
 .help-topic:nth-child(3){--topic-ink:#448aca}
 .help-topic-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
 #phone-help .help-topic{padding:0 10px;border-color:var(--ui-line);background:color-mix(in srgb,var(--ui-tonal) 22%,var(--ui-surface))}
 #phone-help .help-topic h3{font-size:15px!important;letter-spacing:0!important;text-transform:none!important;color:var(--ui-ink)!important;margin:14px 0 5px!important}
 #phone-help .help-topic p{font-size:16px!important;line-height:1.5!important}
 #phone-help .help-bugs{display:grid;gap:6px;margin:8px 0 10px;padding:0;list-style:none}
 .help-bug{border:1px solid var(--ui-line);border-radius:10px;background:var(--ui-surface);overflow:hidden}
 .help-bug>summary{display:grid;grid-template-columns:40px minmax(0,1fr) 12px;align-items:start;gap:10px;padding:12px 10px;cursor:pointer;list-style:none}
 .help-bug>summary::-webkit-details-marker{display:none}
 .help-bug>summary::after{content:'+';font-size:18px;color:var(--ui-muted)}
 .help-bug[open]>summary::after{content:'−'}
 .help-bug[open]{border-color:var(--bug-ink);box-shadow:inset 3px 0 var(--bug-ink)}
 .help-bug-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--bug-ink) 15%,var(--ui-surface))}
 .help-bug-icon svg{width:30px;height:30px}
 .help-bug-copy{font-size:16px;line-height:1.4;color:var(--ui-muted)}
 .help-bug-copy strong{display:block;margin-bottom:3px;color:var(--ui-ink);font-weight:600}
 .help-bug-details{padding:0 12px 12px}
 .help-move-pattern{display:inline-block;padding:5px 9px;border-radius:6px;background:color-mix(in srgb,var(--bug-ink) 12%,var(--ui-surface));font-size:14px;color:var(--ui-ink)}
 .help-bug-details ul{padding-left:20px;margin:12px 0 0}
 .help-bug-details li{font-size:16px!important;line-height:1.5!important;margin:0 0 10px!important;color:var(--ui-ink)}
 .help-lift{margin:10px 0 0;color:var(--ui-ink);padding:8px;border-radius:8px;background:var(--ui-hover)}
 .help-lift svg{width:100%;height:auto;max-height:110px;color:var(--bug-ink)}
 .help-lift figcaption{display:flex;justify-content:space-between;gap:8px;font-size:12px;text-align:center}
 .help-lift figcaption span{flex:1}
 .help-guidance{margin:16px 0;padding:12px;border:1px solid var(--ui-line);border-radius:10px;background:var(--ui-tonal)}
 .help-guidance>strong{font-size:14px}
 .help-reset{display:block;width:100%;min-height:36px;margin:4px 0 0;padding:4px;border:0;background:transparent;color:var(--ui-muted);font-size:14px;text-decoration:underline;text-underline-offset:3px}
 #phone-help .help-links{display:grid;grid-template-columns:1fr;gap:8px;margin-top:12px}
 .help-course{margin-bottom:12px;display:flex!important;align-items:center;gap:12px;padding:14px!important;border-radius:12px;background:var(--ui-primary);color:var(--ui-on-primary)!important;text-decoration:none;font-size:16px}
 .help-course>svg{width:28px;height:28px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
 .help-course>span:nth-child(2){flex:1}
 .help-course strong,.help-course small{display:block}
 .help-course small{font-size:14px;font-weight:400;line-height:1.4;margin-top:3px;opacity:.9}
 .help-sheet .help-links .ui-button{justify-content:center;width:100%;font-size:14px}



}

@layer screens{
 /* ---- The phone game screen (portrait and landscape phones). ---- */
 /* Portrait: one slim top bar — Home, the game title, notifications, ⋯. */
 body.phone-shell:not([data-landscape=true])>header{gap:var(--space-1)!important;padding-inline:var(--space-2)!important}
 body.phone-shell:not([data-landscape=true])>header .brand{display:grid!important;place-items:center!important;flex:none!important;width:var(--touch)!important;min-width:0!important;height:var(--touch)!important;padding:0!important;overflow:hidden!important;border-radius:var(--radius-sm)!important;color:var(--ui-ink)!important}
 body.phone-shell:not([data-landscape=true]) #play-menu{flex:none!important;width:var(--touch)!important;min-width:var(--touch)!important;height:var(--touch)!important;min-height:var(--touch)!important;padding:10px!important}
 .phone-home-icon{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round}
 body.phone-shell:not([data-landscape=true]) #phone-more-slot{flex:none}
 body.phone-shell:not([data-landscape=true]) #phone-more-slot .workspace-menu>summary{width:var(--touch)!important;height:var(--touch)!important}
 body.phone-shell .board-tools .workspace-menu>summary{min-width:38px!important;min-height:38px!important}
 body.phone-shell.board-focus .board-focus-button{min-width:38px!important;min-height:38px!important}
 /* Board controls share a quiet compact surface. */
 body:not(.phone-shell) #board-fullscreen{display:none!important}
 /* Desktop shares the phone's grouped board tools; its actions menu lives in the header. */
 body:not(.phone-shell) .board-tools{gap:3px!important;padding:4px!important;border:1px solid var(--ui-line)!important;border-radius:12px!important;background:var(--ui-surface)!important;box-shadow:0 2px 8px #0002!important}
 body:not(.phone-shell) .board-tools>:is(button,.overlay-anchor){flex:0 0 40px!important;width:40px!important;min-width:40px!important;max-width:40px!important;height:40px!important;min-height:40px!important;box-sizing:border-box!important}
 body:not(.phone-shell) .board-tools>button,body:not(.phone-shell) .board-tools .control-picker>summary{width:40px!important;min-width:40px!important;max-width:40px!important;height:40px!important;min-height:40px!important;margin:0!important;padding:8px!important;border:0!important;border-radius:8px!important;background:transparent!important;color:var(--ui-ink)!important;box-shadow:none!important}
 body:not(.phone-shell) .board-tools>button:is([aria-pressed=true],[aria-expanded=true]),body:not(.phone-shell) .board-tools .control-picker[open]>summary{background:var(--ui-primary)!important;color:var(--ui-on-primary)!important;box-shadow:inset 0 2px 3px #0003!important}
 body:not(.phone-shell) #phone-more-slot>.workspace-menu>summary{box-sizing:border-box;width:44px;min-width:44px;height:44px;min-height:44px;padding:10px}
 body.phone-shell .playground{overflow:clip!important}
 body.phone-shell:not([data-landscape=true]) .board-section>#experiment-bar{margin:6px 162px 6px 0!important;min-height:44px!important;padding:2px 4px 2px 8px!important}
 body.phone-shell:not([data-landscape=true]) .board-section>#experiment-bar>button{flex-basis:30px!important;width:30px!important;min-width:30px!important;height:36px!important;min-height:36px!important}
 body.phone-shell .board-tools{gap:2px!important;padding:3px!important;border:1px solid var(--ui-line)!important;border-radius:10px!important;background:var(--ui-surface)!important;box-shadow:0 2px 8px #0002!important}
 body.phone-shell .board-tools>:is(button,.overlay-anchor,.workspace-menu){flex:0 0 34px!important;width:34px!important;min-width:34px!important;max-width:34px!important;height:36px!important;min-height:36px!important;box-sizing:border-box!important}
 body.phone-shell .board-tools>button,body.phone-shell .board-tools :is(.control-picker,.workspace-menu)>summary{width:34px!important;min-width:34px!important;max-width:34px!important;flex-basis:34px!important;height:36px!important;min-height:36px!important;padding:6px!important;border:0!important;border-radius:7px!important;background:transparent!important;color:var(--ui-ink)!important;box-shadow:none!important}
 body.phone-shell .board-tools>button:is([aria-pressed=true],[aria-expanded=true]),body.phone-shell .board-tools :is(.control-picker,.workspace-menu)[open]>summary{background:var(--ui-primary)!important;color:var(--ui-on-primary)!important;box-shadow:inset 0 2px 3px #0003!important}
 body.phone-shell .board-tools>button svg,body.phone-shell .board-tools summary svg{width:20px!important;height:20px!important}
 body.phone-shell.puzzle-mode .board-section>.board-toolbar{top:8px!important;right:8px!important;z-index:126!important}
 body.phone-shell.puzzle-mode .board-tools{padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
 body.phone-shell.puzzle-mode .board-focus-button{display:none!important}
 /* Reserve layout lives in reserve-dock.css. */
 body.phone-shell.clocks-in-reserves .footer-main:not(:has(.replay-clocks:not([hidden]))){display:none!important}
 /* Touch targets: 44 px on phones. */
 body.phone-shell:not([data-landscape=true])>header #turn-bell{width:var(--touch)!important;min-width:var(--touch)!important;height:var(--touch)!important;min-height:var(--touch)!important}
 body.phone-shell :is(.analyze-tabs,.help-levels){--segment-height:var(--touch)}
 /* The Analyze tabs name the open panel; its own title stays for screen readers. */
 body.phone-shell:not(.online-game) .panel-rail-left :is(#ai-panel>summary.section-heading,.position-heading,#graph-panel>summary.stat-heading)>h2{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
 body.phone-shell:not(.online-game) .panel-rail-left .panel-close,body.phone-shell:not(.online-game) .panel-rail-left :is(#openings-panel>.panel-heading,#graph-panel>summary.stat-heading){display:none!important}
 /* Overlays on phones: a labelled card under the board's Overlays button,
    with a count on the button while any are on. */
 body.phone-shell .control-picker>summary{position:relative!important;flex:0 0 34px!important;max-width:34px!important;width:34px!important;height:36px!important;min-width:34px!important;min-height:36px!important;padding:6px!important}
 body.phone-shell .control-picker>summary[data-count]:not([data-count=''])::after{content:attr(data-count);position:absolute;top:-4px;right:-4px;display:grid;place-items:center;min-width:18px;height:18px;padding:0 4px;box-sizing:border-box;border-radius:9px;background:var(--ui-accent);color:#fff;font-size:11px;font-weight:700;line-height:1}
 body.phone-shell .overlay-anchor>.overlay-strip{position:fixed!important;top:var(--overlay-mobile-top,110px)!important;right:auto!important;left:50%!important;transform:translateX(-50%)!important;max-width:calc(100vw - 16px)!important;box-sizing:border-box!important;padding:var(--space-2)!important;border:1px solid var(--ui-line)!important;border-radius:var(--radius-md)!important;background:var(--ui-surface)!important;box-shadow:var(--ui-shadow)!important}
 body.phone-shell .overlay-anchor>.overlay-strip .overlay-options{grid-template-columns:repeat(6,36px)!important;width:max-content!important;gap:2px!important}
 body.phone-shell .overlay-anchor>.overlay-strip .overlay-options::before{content:none}
 body.phone-shell .overlay-anchor>.overlay-strip .overlay-chip{width:36px!important;height:36px!important;min-height:36px!important;justify-content:center!important;gap:0!important;padding:7px!important}
 body.phone-shell .overlay-anchor>.overlay-strip .overlay-chip>span:last-child{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap}
 body.phone-shell .overlay-anchor>.overlay-strip .overlay-chip:has(input:checked)>span:last-child{font-weight:var(--weight-strong)}
 /* Landscape: the sheet fills its column, so it has no size to change. */
 body.phone-shell[data-landscape=true] .sheet-grabber{display:none!important}
 body.phone-shell[data-landscape=true] .sheet-head{padding-top:var(--space-1)}
 /* ---- Settings → Appearance: looks, theme, Customize…. The settings
    dialog's legacy rules are unlayered id selectors, hence important. ---- */
 #settings-dialog .appearance-looks{display:flex!important;flex-direction:column!important;gap:var(--space-2)!important;margin:0 0 var(--space-4)!important}
 #settings-dialog .settings-subheading{margin:var(--space-2) 0 0!important;font-size:var(--text-xs)!important;font-weight:var(--weight-strong)!important;letter-spacing:.06em!important;text-transform:uppercase!important;color:var(--ui-muted)!important}
 #settings-dialog .look-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--space-2)!important}
 #settings-dialog .look-card{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:var(--space-2)!important;min-height:var(--touch)!important;height:auto!important;width:auto!important;padding:var(--space-2)!important;border:1.5px solid var(--ui-line)!important;border-radius:var(--radius-md)!important;background:var(--ui-surface)!important;color:var(--ui-ink)!important;text-align:left!important;cursor:pointer!important;font-family:inherit!important}
 #settings-dialog .look-card:hover{border-color:var(--ui-muted)!important}
 #settings-dialog .look-card[aria-checked=true]{border-color:var(--ui-accent)!important;box-shadow:0 0 0 1.5px var(--ui-accent)!important;background:var(--ui-tonal)!important}
 #settings-dialog .look-card:focus-visible{outline:none!important;box-shadow:var(--ui-focus)!important}
 #settings-dialog .look-swatch{position:relative!important;display:block!important;height:34px!important;border-radius:var(--radius-sm)!important;background:var(--look-surface)!important;box-shadow:inset 0 0 0 1px #0000001f!important;overflow:hidden!important}
 #settings-dialog .look-tile{position:absolute!important;top:50%!important;width:30px!important;height:34px!important;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)!important;transform:translateY(-50%)!important}
 #settings-dialog .look-tile.white{left:calc(50% - 31px)!important;background:var(--look-white)!important}
 #settings-dialog .look-tile.black{left:calc(50% + 1px)!important;background:var(--look-black)!important}
 #settings-dialog .look-text{display:flex!important;flex-direction:column!important;gap:2px!important;min-width:0!important}
 #settings-dialog .look-text strong{font-size:var(--text-sm)!important;font-weight:var(--weight-strong)!important;line-height:1.25!important}
 #settings-dialog .look-text small{display:block!important;font-size:13px!important;font-weight:400!important;line-height:1.3!important;color:var(--ui-muted)!important}
 #settings-dialog .appearance-customize{border-top:1px solid var(--ui-line)!important;padding-top:var(--space-2)!important}
 /* Settings tabs: never break a word ("Appearan-ce" at 390 px). */
 #settings-dialog .settings-tabs button{hyphens:none!important;word-break:keep-all!important;overflow-wrap:normal!important;white-space:nowrap!important;min-width:0!important;padding-inline:2px!important;font-size:clamp(11px,3vw,14px)!important;letter-spacing:-.01em!important}
}

@layer switches{
 /* Puzzles supply their own hints, retry and next actions. */
.puzzle-mode #replay-recent,.puzzle-mode .phone-actions [data-action=last5],.puzzle-mode .phone-actions [data-action=undo],.puzzle-mode #local-takeback,.puzzle-mode .footer-transport{display:none!important}
.puzzle-mode:not([data-puzzle-solved=true]) #history-toggle,.puzzle-mode:not([data-puzzle-solved=true]) .phone-actions [data-action=moves]{display:none!important}
body.normal-online #microscope-toggle:disabled{display:none!important}
body.guided-friend #microscope-toggle{display:none!important}
}
.help-bug-shortcuts{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}
.help-bug-shortcuts button{min-height:40px;padding:7px 12px;border:1px solid var(--ui-line);border-radius:999px;background:var(--ui-surface);color:var(--ui-ink);font:inherit;font-size:13px;cursor:pointer}
#phone-help .help-bug-use{font-size:15px;line-height:1.5;margin:12px 0;padding:10px 12px;background:color-mix(in srgb,var(--bug-ink) 9%,var(--ui-surface));border-radius:8px}
#phone-help .help-bug-trap{font-size:14px;line-height:1.5;border-left:3px solid var(--bug-ink);padding-left:10px;margin:12px 0}
.help-bug-practice{display:block;padding:12px;border:1px solid var(--ui-line);border-radius:10px;font-size:14px;font-weight:650;color:var(--ui-ink);text-decoration:none}
.help-bug-practice:hover{background:var(--ui-hover)}
.help-bug{scroll-margin-top:76px}.help-rule-details{margin-top:10px}.help-rule-details>summary{padding:10px 0;min-height:24px;font-size:14px;font-weight:650;cursor:pointer}