/* Small shared appearance control, shipped inside every independent package. */
:root {
  --theme-bg: #f5f0e6; --theme-surface: #fffaf2; --theme-text: #28322a;
  --theme-line: #d7d4c7; --theme-hover: #eee3d4; --theme-focus: #a94c34;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --theme-bg: #191e1b; --theme-surface: #222925; --theme-text: #eee9dd;
  --theme-line: #414a42; --theme-hover: #303a32; --theme-focus: #e1a081;
}
.header-preferences { display:flex; align-items:center; justify-content:flex-end; gap:16px; min-width:0; }
body .theme-toggle {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  flex:0 0 auto; min-height:44px; padding:9px 12px; border:1px solid var(--theme-line);
  border-radius:8px; background:var(--theme-surface); color:var(--theme-text);
  font:500 12px/1.4 system-ui,sans-serif; letter-spacing:0; cursor:pointer;
}
body .theme-toggle:hover { background:var(--theme-hover); }
body .theme-toggle:focus-visible { outline:2px solid var(--theme-focus); outline-offset:3px; }
.theme-toggle svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.theme-settings { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:20px; padding-top:16px; border-top:1px solid var(--theme-line); }
@media(max-width:650px) {
  body:has(#playArea) > header .header-preferences { gap:8px; }
  body:has(#playArea) > header .header-preferences .header-note { display:none; }
}
/* The old two-column standby keypad has a 304px intrinsic minimum. Let
 * compact entry pages fit their viewport; active phone controls are excluded. */
@media(max-width:360px) {
  body:has(#playArea):not(.touch-session) > header .brand { min-width:0; flex:1; padding-right:8px; }
  body:has(#playArea):not(.touch-session) > header .brand > span:last-child { min-width:0; overflow-wrap:anywhere; }
  body:has(#playArea):not(.touch-session) > header .header-preferences { flex:0 0 auto; }
  body:has(#playArea):not(.desktop-ui):not(.touch-session) main { grid-template-columns:minmax(0,1fr); }
  body:has(#playArea):not(.desktop-ui):not(.touch-session) .intro { min-width:0; }
  body:has(#playArea):not(.touch-session) .intro h1 { white-space:normal; overflow-wrap:anywhere; font-size:clamp(30px,12vw,43px); }
  body:has(#playArea):not(.desktop-ui):not(.touch-session) #playArea { grid-template-columns:minmax(0,1fr) minmax(0,.75fr); }
  body:has(#playArea):not(.desktop-ui):not(.touch-session) .keypad { grid-template-columns:repeat(3,minmax(0,1fr)); }
  body:has(#playArea):not(.desktop-ui):not(.touch-session) .keypad button { min-width:0; padding-inline:3px; }
  body:has(#playArea):not(.desktop-ui):not(.touch-session) .keypad button small { overflow-wrap:anywhere; }
  body.desktop-ui:has(#playArea):not(.touch-session) #playArea { grid-template-rows:auto auto auto; }
  body:has(#playArea):not(.touch-session) .desktop-bar { flex-wrap:wrap; gap:4px; }
  body:has(#playArea):not(.touch-session) .desktop-tools { flex-wrap:wrap; justify-content:flex-end; min-width:0; }
  body:has(#playArea):not(.touch-session) .placeholder small { max-width:90%; text-align:center; overflow-wrap:anywhere; }
}