/* Console design system: shared components. Built only from tokens.css; load it after.
   Used by the console shell, Controller Lab and game HUDs. The phone controller's pad parts
   (face buttons, sticks, shoulders) live in src/controller/controller.css on the same tokens. */

:where(html) { background: var(--void); color: var(--ink); color-scheme: dark; }
:where(body) { font-family: var(--font-ui); -webkit-font-smoothing: antialiased; font-feature-settings: 'ss01'; }
:where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(.ico) { display: inline-grid; width: 1.15em; height: 1.15em; flex: none; }
:where(.ico) svg { width: 100%; height: 100%; display: block; }

/* ---- Button: rounded rectangle. Focus fills it with ink (no glows, no outlines). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 3.1rem; padding: 0 1.5rem; border-radius: var(--radius-md);
  font-size: 1.05rem; font-weight: 600; line-height: 1;
  background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px var(--line);
  transition-property: transform, background-color, color, box-shadow; transition-duration: var(--duration-base); transition-timing-function: var(--ease-out);
}
.btn:hover { background: rgba(255, 255, 255, 0.16); }
.btn:active { transform: scale(0.96); }
.btn.primary { min-width: 9rem; }
.btn .ico { width: 1.05em; height: 1.05em; }
.btn.primary .ico { margin-left: -0.15em; } /* optical: the play triangle's weight sits right */
.btn.focused, .btn:focus-visible { background: var(--focus); color: var(--ink-inverse); box-shadow: var(--shadow-float); transform: scale(1.04); outline: none; }
/* The action A will trigger while focus is elsewhere on the screen (Play while the tiles have focus). */
.btn.default { background: rgba(244, 246, 251, 0.9); color: var(--ink-inverse); box-shadow: none; }

/* ---- Small button: secondary actions in bars (Add controller). Same shape as Button, smaller. */
.btn.sm { min-height: 2.4rem; padding: 0 0.9rem; gap: 0.45rem; font-size: 0.9rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.08); }
.btn.sm:hover { background: rgba(255, 255, 255, 0.14); }
.btn.sm.focused, .btn.sm:focus-visible { background: var(--focus); }

/* ---- Chip: read-only metadata. A plain label, not a pill. */
.chip { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 0.82rem; font-weight: 550; color: var(--ink-2); padding: 0.3rem 0.6rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.07); }

/* ---- Glyph: a controller button in on-screen hints. --g is the button's color token. */
.glyph {
  display: inline-grid; place-items: center; width: 1.55em; height: 1.55em; border-radius: 50%; flex: none;
  background: var(--surface-3); color: var(--g, var(--ink));
  box-shadow: inset 0 -0.12em 0 rgba(0, 0, 0, 0.4), 0 0 0 1px var(--line);
}
.glyph .face-letter { font-size: 0.85em; font-weight: 800; line-height: 1; font-family: var(--font-ui); }
.glyph .face-shape { width: 72%; height: 72%; }
.glyph-sys { color: var(--ink); }
.glyph-sys svg { width: 62%; height: 62%; }
.glyph.wide { width: auto; padding: 0 0.55em; border-radius: var(--radius-sm); font-size: 0.8em; font-weight: 800; height: 1.9em; }
.hint { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 0.9rem; color: var(--ink-2); }

/* ---- Avatar: a player. --c is their slot color (player-1 ... player-8). Flat: no rings, no glow. */
.avatar {
  position: relative; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--c); box-shadow: 0 0 0 2px var(--void);
}
.avatar b { font-size: 0.82rem; font-weight: 700; color: var(--ink-inverse); letter-spacing: 0.01em; }
.avatar.away { filter: grayscale(1) brightness(0.55); }
.avatar .av { display: grid; width: 58%; height: 58%; color: var(--ink-inverse); }
.avatar .av svg { width: 100%; height: 100%; }
.avatar.sm { width: 1.9rem; height: 1.9rem; box-shadow: none; }
.avatar.sm b { font-size: 0.72rem; }

/* ---- Toast: who connected / disconnected. Top right, slides in, gone after ~3 s. */
.toast {
  display: flex; align-items: center; gap: var(--space-3); padding: 0.65rem 1.1rem 0.65rem 0.65rem; border-radius: var(--radius-lg);
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-float);
}
.toast b { display: block; font-size: 0.95rem; font-weight: 600; }
.toast small { display: flex; align-items: center; gap: 0.35rem; color: var(--ink-2); font-size: 0.8rem; }
.toast small i { width: 0.9rem; height: 0.9rem; display: inline-grid; }

/* ---- Switch: a setting that is on or off. */
.switch { margin-left: auto; width: 2.4rem; height: 1.35rem; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.18); position: relative; transition: background var(--duration-fast); flex: none; }
.switch::after { content: ''; position: absolute; top: 0.18rem; left: 0.2rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--ink); transition: transform var(--duration-fast) var(--ease-out); }
.switch.on { background: var(--accent); }
.switch.on::after { transform: translateX(1.02rem); }

/* ---- Menu row: guide and settings lists. Focus fills the row with ink. */
.menu-row {
  display: flex; align-items: center; gap: 0.9rem; padding: 0.8rem 1rem; border-radius: var(--radius-md); font-weight: 600;
  cursor: pointer; transition: background var(--duration-fast), color var(--duration-fast), transform var(--duration-base) var(--ease-spring);
}
.menu-row .ico { width: 1.3rem; height: 1.3rem; color: var(--ink-2); }
.menu-row:hover { background: rgba(255, 255, 255, 0.07); }
.menu-row.focused { background: var(--focus); color: var(--ink-inverse); }
.menu-row.focused .ico { color: var(--ink-inverse); }
.menu-row.focused .switch { background: rgba(5, 7, 11, 0.25); }
.menu-row.focused .switch.on { background: var(--ink-inverse); }

/* ---- Tile: a game in the library. Square art; the selected one grows and shows its name; the focused
   one gets a crisp ink ring offset from the art (no glow). */
.tile { position: relative; flex: none; width: 8.4rem; height: 8.4rem; border-radius: var(--radius-lg); transform-origin: top left; transition-property: width, height, transform; transition-duration: var(--duration-base); transition-timing-function: var(--ease-out); }
.tile img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; box-shadow: var(--shadow-tile); filter: brightness(0.78); transition-property: filter, box-shadow; transition-duration: var(--duration-base); }
.tile::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); pointer-events: none; }
.tile::before { content: ''; position: absolute; inset: -0.32rem; border-radius: calc(var(--radius-lg) + 0.32rem); box-shadow: 0 0 0 0.16rem var(--focus); opacity: 0; transition: opacity var(--duration-fast); pointer-events: none; }
.tile-name { position: absolute; left: 0; top: calc(100% + 0.8rem); white-space: nowrap; font-weight: 600; font-size: 1rem; opacity: 0; transform: translateY(-0.25rem); transition-property: opacity, transform; transition-duration: var(--duration-fast), var(--duration-base); }
.tile.selected { width: 10rem; height: 10rem; }
.tile.selected img { filter: none; }
.tile.selected .tile-name { opacity: 1; transform: none; }
.tile.focused::before { opacity: 1; }
.tile:active { transform: scale(0.96); }

/* ---- Panels */
.card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-xl); }
.glass { background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(22px) saturate(1.3); }
.glass-strong { background: var(--glass-strong); border: 1px solid var(--line); backdrop-filter: blur(28px) saturate(1.4); }

@media (prefers-reduced-motion: reduce) {
  .btn, .tile, .tile img, .tile::before, .tile-name, .switch, .switch::after, .menu-row { transition-duration: 0.01ms; }
}