:root {
  --bg: #f6f7f9;
  --bg-soft: #ffffff;
  --text: #1a1d23;
  --text-soft: #5b6170;
  --border: #e4e7ec;
  --accent: #ff5a3c;
  --accent-2: #ff2e88;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.08);
  --radius: 16px;
}
[data-theme="dark"] {
  --bg: #0b0d12;
  --bg-soft: #141821;
  --text: #eef1f6;
  --text-soft: #9aa3b2;
  --border: #232936;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.5);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-padding-top: 92px; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
  transition: background .25s ease, color .25s ease;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #101222;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px #fff;
}
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 12px 16px;
  transform: translateY(-160%);
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--bg-soft);
  color: var(--text);
  font-weight: 800;
}
.skip-link:focus-visible { transform: translateY(0); }

.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.brand-icon { width: 32px; height: 32px; }

.brand-title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s ease, background .15s ease;
}

.icon-btn:hover { background: var(--border); }
.room-toggle.is-connected { border-color: #30d8a0; color: #0cab83; box-shadow: 0 0 0 3px #30d8a044, 0 0 18px #30d8a055; }
.icon-btn:active { transform: scale(0.94); }

.icon-btn svg { width: 20px; height: 20px; fill: currentColor; }

.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

.landing {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.landing-hero {
  text-align: center;
  max-width: 560px;
  margin: 20px auto 0;
}

.landing-logo { margin-bottom: 12px; }

.landing-title {
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0 0 8px;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #ff5a3c, #ff2e88);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.landing-sub {
  color: var(--text-soft);
  font-size: 1.05rem;
  line-height: 1.5;
  margin: 0;
}

.category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: -8px auto 4px;
}

.recent-section { display: flex; flex-direction: column; gap: 14px; }
.recent-section[hidden] { display: none; }

.section-heading {
  font-size: 0.95rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-soft);
  margin: 0;
}

.recent-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

.recent-grid .game-card-btn { padding: 16px 18px; }
.recent-grid .game-card-tagline { display: none; }


.category-tab {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text-soft);
  font-weight: 600;
  font-size: 0.85rem;
  transition: all .15s ease;
}

.category-tab:hover { border-color: var(--accent); color: var(--text); }

.category-tab.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: #101222;
  box-shadow: 0 4px 14px rgba(255, 46, 136, 0.25);
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.game-grid-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-soft);
  padding: 32px;
}

.game-card {
  border-radius: var(--radius);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.game-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
}

.game-card-btn {
  width: 100%;
  padding: 24px 20px;
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.game-card-icon {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 90, 60, 0.08);
  align-self: flex-start;
}

.game-card-name {
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: 4px;
}

.game-card-tagline {
  color: var(--text-soft);
  font-size: 0.9rem;
  margin: 0;
}

.game-card-meta {
  font-size: 0.78rem;
  color: var(--text-soft);
  opacity: 0.8;
  margin-top: 8px;
}

.game-shell {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.back-btn {
  align-self: flex-start;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text);
  font-weight: 600;
  font-size: 0.9rem;
}

.back-btn:hover { background: var(--border); }

.game-hero {
  display: flex;
  align-items: center;
  gap: 16px;
}

.game-emoji {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--accent);
}

.coming-soon-card {
  padding: 32px;
  border-radius: var(--radius);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  text-align: center;
  max-width: 500px;
  margin: 20px auto;
}

@media (max-width: 600px) {
  .landing-title { font-size: 2rem; }
  .game-grid { grid-template-columns: 1fr; }
}

.reset-btn {
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text);
  font-weight: 600;
  font-size: 0.9rem;
  transition: background .15s ease, transform .12s ease;
}
.reset-btn:hover { background: var(--border); }
.reset-btn:active { transform: scale(0.95); }
.reset-toast {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  right: 0;
  padding: 9px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  border-radius: 10px;
  background: var(--bg-soft);
  color: var(--text);
  box-shadow: var(--shadow);
  font-size: .85rem;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
  animation: reset-toast-in .18s ease-out;
}
.reset-toast[hidden] { display: none; }
.storage-notice {
  position: fixed;
  z-index: 100;
  inset-inline: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(620px, calc(100vw - 32px));
  margin-inline: auto;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  background: var(--bg-soft);
  color: var(--text);
  box-shadow: var(--shadow);
}
.storage-notice[hidden] { display: none; }
.storage-notice p { margin: 0; }
.storage-notice button {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-weight: 700;
}
@keyframes reset-toast-in {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.game-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}
.game-head-center {
  flex: 1;
  text-align: center;
  min-width: 0;
}
.game-tools { margin-top: 8px; }
.game-tools summary { width: fit-content; margin: auto; color: var(--text-soft); font-size: .8rem; font-weight: 700; cursor: pointer; }
.game-tools summary:focus-visible { outline: 3px solid #101222; outline-offset: 4px; border-radius: 4px; box-shadow: 0 0 0 6px #fff; }
.game-title {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.game-meta {
  margin: 2px 0 0;
  color: var(--text-soft);
  font-size: 0.85rem;
}
.game-names-btn {
  margin-top: 6px;
  border: 0;
  border-bottom: 1px dashed currentColor;
  background: transparent;
  color: var(--text-soft);
  font-size: .78rem;
  font-weight: 700;
  padding: 3px;
}
.game-names-btn:hover, .game-names-btn:focus-visible { color: var(--text); }
.game-help-btn {
  margin: 6px 4px 0;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 13%, var(--bg-soft));
  color: var(--text);
  font-size: .78rem;
  font-weight: 800;
  padding: 5px 12px;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.game-help-btn:hover, .game-help-btn:focus-visible { background: color-mix(in srgb, var(--accent) 28%, var(--bg-soft)); transform: translateY(-2px); }
.game-help-dialog {
  width: min(520px, calc(100vw - 24px));
  max-height: min(90vh, 780px);
  overflow-y: auto;
  border: 1px solid var(--accent, #f8c757);
  border-radius: 22px;
  background: var(--bg-soft);
  color: var(--text);
  box-shadow: 0 30px 90px #050611bb;
  padding: clamp(18px, 4vw, 30px);
}
.game-help-dialog::backdrop { background: #050611c9; backdrop-filter: blur(6px); }
.game-help-dialog h2 { margin: 0 0 16px; font-size: 1.5rem; }
.game-help-steps { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 10px; }
.game-help-steps li { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 14px; background: color-mix(in srgb, var(--accent, #f8c757) 12%, var(--bg)); }
.game-help-illustration { flex: 0 0 76px; height: 66px; border-radius: 12px; display: grid; place-items: center; text-align: center; font-size: 1.35rem; font-weight: 900; color: var(--text); background: var(--bg); box-shadow: inset 0 0 0 1px var(--border); }
.game-help-steps p { margin: 3px 0 0; color: var(--text-soft); font-size: .86rem; line-height: 1.4; }
.game-help-dialog > div p { margin: 8px 0; line-height: 1.4; font-size: .9rem; }
.game-help-dialog > button { margin-top: 14px; padding: 11px 20px; border: 0; border-radius: 11px; background: var(--accent, #f8c757); color: #141523; font-weight: 850; cursor: pointer; }
:where(.game-shell .game-stage) button { transition: transform .16s ease, filter .16s ease, box-shadow .16s ease; }
:where(.game-shell .game-stage) button:active:not(:disabled) { filter: brightness(1.2); }
.player-names-dialog {
  width: min(420px, calc(100vw - 24px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 24px;
  border: 2px solid var(--accent);
  border-radius: 20px;
  background: var(--bg-soft);
  color: var(--text);
  box-shadow: 0 20px 70px #0009;
}
.player-names-dialog::backdrop { background: #0c1224ba; backdrop-filter: blur(4px); }
.player-names-dialog h2 { margin: 0 0 4px; }
.player-names-dialog p { color: var(--text-soft); font-size: .85rem; }
.player-names-dialog form { display: grid; gap: 9px; }
.player-names-dialog label { display: grid; gap: 3px; font-size: .85rem; font-weight: 700; }
.player-names-dialog input {
  width: 100%; min-height: 40px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--bg); color: var(--text); font: inherit;
}
.player-names-error { color: #df3434 !important; min-height: 1em; margin: 0; }
.player-names-actions { display: flex; justify-content: flex-end; gap: 10px; }
.player-names-actions button { padding: 9px 15px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--text); }
.player-names-actions button[type="submit"] { background: var(--accent); color: #fff; border-color: transparent; }
.arcade-victory {
  position: absolute;
  inset: 0;
  z-index: 15;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}
.arcade-victory-banner {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  z-index: 1;
  width: max-content;
  max-width: calc(100% - 20px);
  margin: 0;
  padding: 10px 18px;
  border: 2px solid #f7d877;
  border-radius: 999px;
  background: #1e2145;
  color: #fff4c8;
  box-shadow: 0 6px 24px #0008, 0 0 20px #ffcd5088;
  font-size: clamp(.9rem, 3vw, 1.3rem);
  font-weight: 900;
  text-align: center;
  white-space: normal;
  animation: arcade-victory-pop .4s cubic-bezier(.2,1.4,.3,1) both;
}
.arcade-confetti { position: absolute; inset: 0; }
.arcade-confetti i {
  position: absolute;
  left: var(--x);
  top: -14px;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  background: var(--color);
  animation: arcade-confetti-fall var(--duration) var(--delay) ease-in forwards;
}
@keyframes arcade-victory-pop {
  from { opacity: 0; transform: translateX(-50%) scale(.6); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}
@keyframes arcade-confetti-fall {
  to { transform: translate(45px, 110vh) rotate(680deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .arcade-victory-banner, .arcade-confetti i { animation: none; }
  .arcade-confetti { display: none; }
}

.game-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 320px;
}
.setup-card {
  width: min(420px, 100%);
  margin: 0 auto;
  padding: 28px 24px;
  border-radius: var(--radius);
  background: var(--game-ui-panel, var(--bg-soft));
  border: 1px solid var(--game-ui-border, var(--border));
  box-shadow: var(--shadow);
  color: var(--text);
  text-align: center;
}
.setup-title { margin: 0 0 4px; font-size: 1.3rem; font-weight: 800; font-family: var(--game-ui-heading, inherit); }
.setup-subtitle { margin: 0 0 20px; color: var(--text-soft); font-size: 0.9rem; }
.setup-guide, .setup-field-help { color: var(--text-soft); font-size: .85rem; line-height: 1.5; }
.setup-preview { padding: 12px; border-radius: 12px; background: var(--bg); font-size: .85rem; line-height: 1.65; }
.setup-config { margin: 18px 0 24px; text-align: left; border: 1px solid var(--border); border-radius: 12px; }
.setup-config summary { padding: 14px; cursor: pointer; font-weight: 750; }
.setup-config summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 12px; }
.setup-config .setup-fields { padding: 8px 14px 16px; margin-bottom: 0; text-align: center; }
.setup-field-help { margin: 8px 0 0; }
.setup-fields { display: flex; flex-direction: column; gap: 18px; margin-bottom: 24px; }
.setup-field-label { display: block; font-weight: 700; font-size: 0.85rem; margin-bottom: 8px; color: var(--text-soft); text-transform: uppercase; letter-spacing: .04em; }
.setup-options { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.setup-discrete-options { display: grid; grid-template-columns: 1fr; width: 100%; max-width: 320px; margin: 0 auto; }
.setup-discrete-readout { color: var(--text); font-weight: 800; font-size: 1.1rem; }
@property --clock-track { syntax: "<length>"; inherits: true; initial-value: 12px; }
/* Bars thicken in place while pressed; no protruding thumb or knob. */
.setup-slider-bar,
.setup-range-track {
  --bar: 10px;
  --bar-active: 26px;
  --grip: 28px;
  position: relative;
  height: 48px;
  min-width: 0;
  touch-action: pan-y;
}
.setup-slider-bar.engaged, .setup-slider-bar:has(:focus-visible),
.setup-range-track.engaged, .setup-range-track:has(:focus-visible) { --bar: var(--bar-active); }
.setup-slider-bar::before, .setup-slider-bar::after,
.setup-range-track::before, .setup-range-track::after {
  content: "";
  position: absolute;
  top: 50%;
  height: var(--bar);
  translate: 0 -50%;
  border-radius: 999px;
  pointer-events: none;
  transition: height .42s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease;
}
.setup-slider-bar::before, .setup-range-track::before {
  left: 0;
  right: 0;
  background: color-mix(in srgb, var(--text) 12%, transparent);
}
.setup-slider-bar::after, .setup-range-track::after {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, var(--bg)), var(--accent));
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 30%, transparent);
}
.setup-slider-bar::after { left: 0; width: calc(var(--grip) + var(--fill, 0) * (100% - var(--grip))); }
.setup-range-track::after {
  left: calc(var(--range-from, 0) * (100% - var(--grip)));
  width: calc(var(--grip) + (var(--range-to, 1) - var(--range-from, 0)) * (100% - var(--grip)));
}
.setup-slider-bar.engaged::after, .setup-range-track.engaged::after {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent), 0 6px 20px color-mix(in srgb, var(--accent) 40%, transparent);
}
.setup-slider-bar:has(:focus-visible)::after, .setup-range-track:has(:focus-visible)::after {
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent);
}
.setup-slider-bar input, .setup-range-track input {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 48px;
  margin: 0;
  background: transparent;
  outline: none;
  cursor: pointer;
}
.setup-range-track input { pointer-events: none; }
.setup-slider-bar input::-webkit-slider-runnable-track, .setup-range-track input::-webkit-slider-runnable-track { height: 48px; background: transparent; border: 0; }
.setup-slider-bar input::-moz-range-track, .setup-range-track input::-moz-range-track { height: 48px; background: transparent; border: 0; }
.setup-slider-bar input::-webkit-slider-thumb, .setup-range-track input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--grip);
  height: 48px;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}
.setup-slider-bar input::-moz-range-thumb, .setup-range-track input::-moz-range-thumb {
  width: var(--grip);
  height: 48px;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .setup-slider-bar::before, .setup-slider-bar::after,
  .setup-range-track::before, .setup-range-track::after { transition: none; }
}
.setup-options select { width: 100%; max-width: 320px; min-height: 48px; padding: 10px 14px; border: 2px solid var(--border); border-radius: 12px; background: var(--bg); color: var(--text); font: inherit; }
.setup-clock-options { flex-direction: column; align-items: center; gap: 10px; padding: 10px 0 14px; }
.setup-clock {
  --clock-size: 216px;
  --clock-radius: calc(var(--clock-size) / 2 - 14px);
  --clock-track: 12px;
  position: relative;
  width: var(--clock-size);
  height: var(--clock-size);
  border-radius: 50%;
  touch-action: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
  transition: --clock-track .42s cubic-bezier(.34, 1.56, .64, 1);
}
.setup-clock.dragging, .setup-clock.keyboard { --clock-track: 26px; }
.setup-clock-track,
.setup-clock-arc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  mask: radial-gradient(farthest-side,
    transparent calc(var(--clock-radius) - var(--clock-track) / 2 - .5px),
    #000 calc(var(--clock-radius) - var(--clock-track) / 2 + .5px),
    #000 calc(var(--clock-radius) + var(--clock-track) / 2 - .5px),
    transparent calc(var(--clock-radius) + var(--clock-track) / 2 + .5px));
  pointer-events: none;
}
.setup-clock-track { background: color-mix(in srgb, var(--text) 10%, transparent); }
.setup-clock-arc {
  background: conic-gradient(
    color-mix(in srgb, var(--accent) 35%, transparent) 0deg,
    var(--accent) var(--clock-angle),
    transparent var(--clock-angle));
}
.setup-clock-arc--lapped {
  background: conic-gradient(
    var(--accent) 0deg,
    color-mix(in srgb, var(--accent) 70%, #fff) var(--clock-angle),
    color-mix(in srgb, var(--accent) 28%, transparent) var(--clock-angle));
}
.setup-clock-tick {
  position: absolute;
  left: calc(50% - 2px);
  top: calc(var(--clock-size) / 2 - var(--clock-radius) - 2px);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 35%, transparent);
  transform-origin: 2px calc(var(--clock-radius) + 2px);
  transform: rotate(var(--tick));
  z-index: 1;
  pointer-events: none;
}
/* Rounded end cap of the arc, flush with the ring (not a protruding knob). */
.setup-clock-knob {
  position: absolute;
  left: calc(50% - var(--clock-track) / 2);
  top: calc(var(--clock-size) / 2 - var(--clock-radius) - var(--clock-track) / 2);
  width: var(--clock-track);
  height: var(--clock-track);
  border-radius: 50%;
  background: var(--accent);
  transform-origin: calc(var(--clock-track) / 2) calc(var(--clock-radius) + var(--clock-track) / 2);
  transform: rotate(var(--clock-angle));
  pointer-events: none;
}
.setup-clock:not([data-turn="1"]) .setup-clock-knob { background: color-mix(in srgb, var(--accent) 70%, #fff); }
.setup-clock.dragging .setup-clock-arc,
.setup-clock.dragging .setup-clock-knob { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 55%, transparent)); }
.setup-clock.keyboard .setup-clock-track { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.setup-clock-face {
  position: absolute;
  inset: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 10px 30px #0000001f, inset 0 1px 0 #ffffff14;
  pointer-events: none;
}
.setup-clock-readout {
  color: var(--text);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.setup-clock-laps { display: flex; gap: 6px; }
.setup-clock-lap {
  width: 16px;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 15%, transparent);
  transition: background .2s ease, width .2s ease;
}
.setup-clock-lap.done { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.setup-clock-lap.active { width: 24px; background: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .setup-clock, .setup-clock-lap { transition: none; }
}
.setup-year-range { display: grid; grid-template-columns: 1fr; width: 100%; gap: 4px; padding: 10px 16px; }
.setup-range-readout {
  justify-self: center;
  padding: 6px 16px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--accent) 15%, var(--bg));
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.setup-range-bounds { display: flex; justify-content: space-between; color: var(--text-soft); font-size: .8rem; }
/* Live limits: parts of a range that other choices rule out are hatched and unreachable. */
.setup-range-blocked {
  position: absolute;
  top: 50%;
  z-index: 0;
  height: calc(var(--bar) + 8px);
  translate: 0 -50%;
  border-radius: 999px;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--text-soft) 38%, transparent) 0 4px, transparent 4px 9px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, left .45s cubic-bezier(.34, 1.56, .64, 1), right .45s cubic-bezier(.34, 1.56, .64, 1), height .42s cubic-bezier(.34, 1.56, .64, 1);
}
.setup-range-blocked--low { left: 0; right: calc(100% - var(--limit-lo, 0) * (100% - var(--grip))); }
.setup-range-blocked--high { left: calc(var(--grip) + var(--limit-hi, 1) * (100% - var(--grip))); right: 0; }
.setup-range-track.limited-low .setup-range-blocked--low,
.setup-range-track.limited-high .setup-range-blocked--high { opacity: 1; }
.setup-range-track.locked { opacity: .55; filter: saturate(.6); }
.setup-range-track.locked input { cursor: not-allowed; }
.setup-range-track.locked input::-webkit-slider-thumb { cursor: not-allowed; }
.setup-field-note {
  margin: 6px 0 0;
  color: color-mix(in srgb, var(--accent) 70%, var(--text));
  font-size: .8rem;
  font-weight: 650;
  text-align: center;
}
.setup-field-note::before { content: "ⓘ "; }
.setup-field-error {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, #f43f5e 13%, var(--bg));
  border: 1px solid color-mix(in srgb, #f43f5e 45%, transparent);
  color: color-mix(in srgb, #f43f5e 60%, var(--text));
  font-size: .82rem;
  font-weight: 700;
  text-align: left;
  animation: setup-error-in .32s cubic-bezier(.34, 1.56, .64, 1);
}
.setup-field-error::before { content: "⚠ "; }
@keyframes setup-error-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.setup-feedback-error { color: color-mix(in srgb, #f43f5e 60%, var(--text)); font-weight: 700; }
.setup-field-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.setup-field-head .setup-field-label { margin: 0; }
.setup-switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 4px 6px 4px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-soft);
  font: inherit;
  font-size: .8rem;
  font-weight: 750;
  cursor: pointer;
  transition: border-color .25s ease, color .25s ease, background .25s ease, opacity .25s ease;
}
.setup-switch-track {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 16%, transparent);
  transition: background .3s ease;
}
.setup-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgb(0 0 0 / .3);
  transition: transform .42s cubic-bezier(.34, 1.56, .64, 1), width .2s ease;
}
.setup-switch:active:not(:disabled) .setup-switch-thumb { width: 22px; }
.setup-switch[aria-checked="true"] { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 12%, var(--bg)); }
.setup-switch[aria-checked="true"] .setup-switch-track { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 60%, var(--bg)), var(--accent)); }
.setup-switch[aria-checked="true"] .setup-switch-thumb { transform: translateX(18px); }
.setup-switch[aria-checked="true"]:active:not(:disabled) .setup-switch-thumb { transform: translateX(14px); }
.setup-switch:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.setup-switch:disabled { opacity: .45; cursor: not-allowed; }
.setup-chip-text { display: grid; gap: 1px; min-width: 0; }
.setup-chip-detail { color: var(--text-soft); font-size: .72rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.setup-option.setup-option-unavailable { opacity: .45; }
.setup-option:disabled { cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
  .setup-range-blocked, .setup-switch, .setup-switch-track, .setup-switch-thumb { transition: none; }
  .setup-field-error { animation: none; }
}
.setup-multi-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.setup-option.setup-choice-chip { --level-accent: var(--accent); display: flex; align-items: center; gap: 7px; min-height: 48px; padding: 10px; font-size: .82rem; text-align: left; }
.setup-choice-chip[data-level="1"] { --level-accent: #22c55e; }
.setup-choice-chip[data-level="2"] { --level-accent: #14b8a6; }
.setup-choice-chip[data-level="3"] { --level-accent: #eab308; }
.setup-choice-chip[data-level="4"] { --level-accent: #f97316; }
.setup-choice-chip[data-level="5"] { --level-accent: #ec4899; }
.setup-option.setup-choice-chip.active { border-color: var(--level-accent); background: color-mix(in srgb, var(--level-accent) 12%, var(--bg)); color: var(--text); }
.setup-choice-chip::before {
  content: attr(data-level);
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--level-accent) 22%, var(--bg));
  color: var(--text);
  font-size: .8rem;
}
.setup-choice-chip::after { content: ""; margin-left: auto; flex: none; width: 13px; height: 13px; border: 1px solid var(--text-soft); border-radius: 4px; }
.setup-choice-chip.active::after { content: "✓"; background: var(--level-accent); border-color: var(--level-accent); color: #111827; font-size: .7rem; line-height: 13px; }
.setup-options input[type="number"] {
  width: 100%;
  max-width: 180px;
  padding: 12px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}
.setup-start-btn:disabled { opacity: .55; cursor: not-allowed; }
.dc-word, .imp-word, .imp-clue, .dc-scoring, .imp-result { overflow-wrap: anywhere; }

/* Collapsible setup section (e.g. Imposter word categories) */
.setup-section { padding: 0; border-radius: 16px; overflow: hidden; }
.setup-section-summary {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 16px;
  cursor: pointer; list-style: none; font-weight: 800;
}
.setup-section-summary::-webkit-details-marker { display: none; }
.setup-section-summary::after {
  content: ""; width: 9px; height: 9px; margin-left: 4px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .25s ease;
}
.setup-section[open] > .setup-section-summary::after { transform: rotate(-135deg) translate(-2px, 0); }
.setup-section-summary:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.setup-section-value {
  margin-left: auto; padding: 4px 11px; border-radius: 999px; font-size: .8rem; font-weight: 700;
  background: color-mix(in srgb, var(--accent) 16%, var(--bg)); color: var(--text);
  max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.setup-section > :not(summary) { margin-inline: 16px; }
.setup-section-summary .setup-field-label { margin: 0; white-space: nowrap; }
.setup-section-value { flex: none; max-width: none; }
.setup-section .setup-multi-options { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.setup-section .setup-choice-chip {
  position: relative; flex-direction: column; justify-content: center; gap: 4px; min-height: 74px;
  padding: 10px 8px 8px; font-size: .78rem; line-height: 1.2; text-align: center; text-wrap: balance;
}
.setup-section .setup-choice-chip .setup-chip-icon { font-size: 1.55rem; }
.setup-section .setup-choice-chip:not(.active) .setup-chip-icon { filter: grayscale(.7); opacity: .65; }
.setup-section .setup-choice-chip::after { margin: 0; position: absolute; top: 5px; right: 5px; width: 12px; height: 12px; font-size: .62rem; line-height: 12px; text-align: center; }
@media (max-width: 480px) {
  .game-shell.imp-vibe .game-stage { padding: 8px; }
  .setup-card.imp-theme { padding: 18px 12px; }
  .setup-section > :not(summary) { margin-inline: 10px; }
  .setup-section .setup-multi-options { gap: 6px; }
}
.setup-section > :last-child { margin-bottom: 16px; }
.setup-section[open] > .setup-options { animation: setup-section-in .28s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes setup-section-in { from { opacity: 0; transform: translateY(-6px); } }
.setup-bulk-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
.setup-bulk-action {
  min-height: 36px; padding: 6px 14px; border-radius: 999px; font: inherit; font-size: .8rem; font-weight: 800;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--bg)); color: var(--text); cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.setup-bulk-action:hover { background: color-mix(in srgb, var(--accent) 22%, var(--bg)); }
.setup-bulk-action:active { transform: scale(.95); }
.setup-choice-chip:not([data-level])::before { display: none; }
.setup-chip-icon { font-size: 1.25rem; line-height: 1; flex: none; filter: drop-shadow(0 2px 3px #0003); }
.setup-choice-chip .setup-chip-icon + * { flex: 1; }
.setup-option.setup-choice-chip:has(.setup-chip-icon) { justify-content: flex-start; }
.setup-choice-chip:has(.setup-chip-icon)::after { margin-left: auto; flex: none; }
@media (prefers-reduced-motion: reduce) {
  .setup-section[open] > .setup-options { animation: none; }
  .setup-section-summary::after { transition: none; }
}

/* Imposter: rich reveal, intel and multi-round voting */
.imp-step {
  display: inline-block; margin: 0 0 6px; padding: 4px 12px; border-radius: 999px;
  background: #a855f72e; color: #e9d5ff; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.imp-reveal { animation: imp-flip .45s cubic-bezier(.2, .9, .3, 1.15); }
@keyframes imp-flip { from { opacity: 0; transform: perspective(700px) rotateY(-70deg) scale(.95); } }
.imp-reveal .imp-word strong {
  display: inline-block; margin-top: 6px; font-size: clamp(1.6rem, 7vw, 2.2rem);
  background: linear-gradient(120deg, #f0abfc, #a5b4fc 55%, #67e8f9); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.imp-reveal.imposter { position: relative; }
.imp-reveal.imposter .imp-role { color: #fb7185; text-shadow: 0 0 22px #fb718566; }
.imp-intel {
  display: flex; align-items: baseline; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin: 8px auto; padding: 10px 14px; max-width: 340px; border-radius: 14px;
  background: #ffffff0d; border: 1px solid #a855f740; font-weight: 700;
}
.imp-intel span { color: #c4b5fd; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.imp-vibe .imp-btn { background: linear-gradient(135deg, #a855f7, #ec4899); border: 0; box-shadow: 0 8px 22px #a855f744; }
.imp-vibe .imp-btn:hover { box-shadow: 0 10px 28px #ec489955; }
.imp-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.imp-vote-options { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.imp-vibe .imp-vote-btn { background: #1f1830; border-color: #a855f733; color: #ece6f5; min-height: 48px; }
.imp-vibe .imp-vote-btn.selected { border-color: #f472b6; background: #f472b62b; box-shadow: 0 0 0 3px #f472b633; }
.imp-vote-btn.out { text-decoration: line-through; opacity: .3; }
.imp-verdict {
  margin: 10px auto 14px; padding: 12px 16px; max-width: 380px; border-radius: 16px; font-weight: 700;
  background: #ffffff0d; border: 1px solid #ffffff1f; animation: imp-pop .4s cubic-bezier(.2, .9, .3, 1.3);
}
.imp-verdict.caught { background: #10b98126; border-color: #34d39966; }
.imp-verdict.innocent { background: #f43f5e1f; border-color: #fb718566; }
@keyframes imp-pop { from { opacity: 0; transform: scale(.85); } }
.imp-history { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 0; margin: 12px 0; list-style: none; font-size: .8rem; }
.imp-history li { padding: 4px 10px; border-radius: 999px; background: #ffffff10; border: 1px solid #ffffff1a; }
.imp-vibe .imp-vote-bar { background: #1f1830; border-color: #a855f733; min-width: 64px; }
.imp-vote-bar.spy { border-color: #fb7185; background: #fb71851f; }
.imp-result.win h3 { color: #6ee7b7; }
.imp-result.lose h3 { color: #fda4af; }
@media (prefers-reduced-motion: reduce) { .imp-reveal, .imp-verdict { animation: none; } }
.setup-option {
  padding: 10px 18px;
  border-radius: 12px;
  border: 2px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-weight: 700;
  font-size: 0.9rem;
  transition: all .15s ease;
}
.setup-option:hover { border-color: var(--accent); }
.setup-option.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--text);
}
.setup-start-btn {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  border: none;
  background: var(--game-ui-primary);
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  transition: transform .12s ease, box-shadow .15s ease;
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
}
.setup-start-btn:hover { transform: translateY(-1px); }
.setup-start-btn:active { transform: scale(0.98); }

/* Shared pip-based die face — used by Snakes & Ladders / Ludo instead of the
   Unicode die glyphs (⚀-⚅), which render inconsistently across platforms. */
.die-face {
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 2.4rem;
  height: 2.4rem;
  padding: 6px;
  border-radius: 8px;
  background: #fff;
  border: 2px solid #1a1d23;
  box-shadow: 0 3px 0 rgba(0,0,0,.2);
  box-sizing: border-box;
}
.die-pip {
  width: 0.42rem;
  height: 0.42rem;
  margin: auto;
  border-radius: 50%;
  background: #1a1d23;
}

@media (max-width: 520px) {
  .game-head { flex-wrap: wrap; }
  .game-head-center { order: 3; flex-basis: 100%; }
  .reset-btn { order: 2; }
  .back-btn { order: 1; }
}
.arcade-turn {
  margin: 12px auto 18px;
  padding: 12px 18px;
  border: 2px solid var(--border);
  border-radius: 14px;
  background: var(--bg-soft);
  color: var(--text);
  font-weight: 800;
  text-align: center;
}
.arcade-turn--mine {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-soft));
}
.arcade-turn[hidden] { display: none; }
.ct-vibe .game-head { color: var(--text); }
.ttt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;aspect-ratio:1;width:min(360px,80vw);max-width:360px}
.ttt-cell{aspect-ratio:1;border-radius:14px;border:2px solid var(--border);background:var(--bg-soft);font-size:clamp(1.5rem,6vw,2.6rem);font-weight:900;color:var(--text);transition:transform .12s ease,border-color .15s ease,background .15s ease}
.ttt-cell:hover{border-color:var(--accent);transform:scale(1.03)}.ttt-cell:active{transform:scale(0.96)}.ttt-cell.filled{animation:pop .18s ease}@keyframes pop{0%{transform:scale(0.5);opacity:0}100%{transform:scale(1);opacity:1}}.ttt-cell.win{border-color:#34d399;background:rgba(52,211,153,.12);animation:winPulse .6s ease infinite alternate}@keyframes winPulse{from{background:rgba(52,211,153,.12)}to{background:rgba(52,211,153,.28)}}.ttt-status{text-align:center;font-size:1.1rem;font-weight:700;margin-top:16px;min-height:1.4em}
.c4-board{width:min(420px,90vw);max-width:100%;margin:auto}.c4-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;aspect-ratio:6/7;width:100%}.c4-cell{aspect-ratio:1;border-radius:50%;border:2px solid var(--border);background:var(--bg-soft);font-size:clamp(1.2rem,4vw,2rem);display:flex;align-items:center;justify-content:center;transition:transform .12s ease,border-color .15s ease}.c4-cell.filled{animation:pop .18s ease}.c4-cell.win{border-color:#34d399;background:rgba(52,211,153,.12);animation:winPulse .6s ease infinite alternate}.c4-col-btns{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-bottom:8px}.c4-col-btn{min-width:0;padding:6px 0;border-radius:8px;border:1px solid var(--border);background:var(--bg-soft);color:var(--text);font-weight:700;cursor:pointer}.c4-col-btn:hover:not(:disabled){background:var(--border)}.c4-col-btn:disabled{opacity:.4;cursor:not-allowed}.c4-status{text-align:center;font-size:1.1rem;font-weight:700;margin-top:12px;min-height:1.4em}
.ms-grid{display:grid;gap:4px;width:min(480px,95vw);max-width:480px}.ms-cell{aspect-ratio:1;border-radius:6px;border:1px solid var(--border);background:var(--bg-soft);font-size:clamp(0.9rem,3vw,1.3rem);font-weight:700;cursor:pointer;transition:transform .1s ease,background .15s ease}.ms-cell:hover{transform:scale(1.05)}.ms-cell:active{transform:scale(0.95)}.ms-cell.revealed{background:var(--bg);border-color:var(--border)}.ms-cell.mine{background:#fee2e2}.ms-status{text-align:center;font-size:1rem;font-weight:700;margin-bottom:8px;min-height:1.4em}
.mem-grid{display:grid;gap:8px;width:min(440px,90vw);max-width:440px}.mem-card{aspect-ratio:1;border-radius:12px;border:2px solid var(--border);background:var(--bg-soft);font-size:clamp(1.5rem,5vw,2.5rem);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s ease,border-color .15s ease,background .15s ease}.mem-card:hover:not(:disabled){border-color:var(--accent);transform:scale(1.03)}.mem-card:active{transform:scale(0.97)}.mem-card.revealed{background:var(--bg);border-color:transparent}.mem-card.matched{background:rgba(52,211,153,.12);border-color:#34d399;animation:winPulse .6s ease infinite alternate}.mem-status{text-align:center;font-size:1rem;font-weight:700;margin-bottom:8px;min-height:1.4em}
.chess-board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));width:min(480px,92vw);max-width:480px;aspect-ratio:1;border-radius:10px;overflow:hidden;border:3px solid var(--border);box-shadow:var(--shadow)}.chess-sq{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;position:relative;padding:0;font-size:clamp(1.4rem,5.5vw,2.4rem);transition:filter .1s ease}.chess-sq:hover{filter:brightness(1.08)}.chess-piece{line-height:1;user-select:none;transition:transform .12s ease}.chess-sq:active .chess-piece{transform:scale(0.92)}.chess-piece.cw{color:#f7f4ee;text-shadow:0 1px 0 #00000055,0 0 2px #00000088}.chess-piece.cb{color:#171512;text-shadow:0 1px 0 #ffffff33}.chess-selected{box-shadow:inset 0 0 0 3px var(--accent)}.chess-lastmove{box-shadow:inset 0 0 0 3px rgba(251,191,36,.55)}.chess-move-hint::after{content:'';position:absolute;width:28%;height:28%;border-radius:50%;background:rgba(0,0,0,.22)}.chess-capture-hint{box-shadow:inset 0 0 0 3px rgba(239,68,68,.65)}.chess-status{text-align:center;font-size:1.1rem;font-weight:700;margin-top:12px;min-height:1.4em}.chess-status.chess-check{color:#ef4444}.chess-captured{display:flex;flex-direction:column;gap:4px;align-items:center;margin-top:8px;min-height:2.4em}.chess-captured-row{display:flex;gap:2px;font-size:1.1rem;min-height:1.3em}.chess-promo{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(0,0,0,.55);z-index:50;text-align:center;color:#fff}.chess-promo-options{display:flex;gap:10px}.chess-promo-btn{width:64px;height:64px;border-radius:12px;border:2px solid var(--accent);background:var(--bg-soft);font-size:2rem;display:flex;align-items:center;justify-content:center;cursor:pointer}.chess-promo-btn:hover{background:var(--accent)}
.hm-word{font-size:clamp(1.5rem,5vw,2.5rem);font-weight:800;letter-spacing:.2em;text-align:center;margin-bottom:16px;font-family:monospace}.hm-keyboard{display:flex;flex-direction:column;gap:6px;align-items:center;margin:16px 0}.hm-row{display:flex;gap:4px}.hm-key{min-width:36px;height:36px;border-radius:8px;border:1px solid var(--border);background:var(--bg-soft);color:var(--text);font-weight:700;font-size:.9rem;cursor:pointer;transition:all .15s ease}.hm-key:hover:not(:disabled){border-color:var(--accent);transform:scale(1.05)}.hm-key:disabled{opacity:.5;cursor:not-allowed}.hm-key.correct{background:rgba(52,211,153,.15);border-color:#34d399;color:#34d399}.hm-key.wrong{background:rgba(255,90,60,.15);border-color:#ff5a3c;color:#ff5a3c}.hm-figure{width:200px;height:240px;margin:0 auto 16px;position:relative}.hm-gallows{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:160px;height:200px;border-left:6px solid var(--border);border-bottom:6px solid var(--border);border-radius:0 0 0 8px}.hm-gallows::before{content:"";position:absolute;top:-140px;left:0;width:100px;height:6px;background:var(--border)}.hm-gallows::after{content:"";position:absolute;top:-140px;left:0;width:6px;height:140px;background:var(--border)}.hm-part{position:absolute;background:var(--text);border-radius:50%}.hm-part.head{width:40px;height:40px;top:20px;left:50%;transform:translateX(-50%);border:4px solid var(--text);background:transparent}.hm-part.body{width:4px;height:60px;top:60px;left:50%;transform:translateX(-50%);background:var(--text)}.hm-part.arm{width:40px;height:4px;top:70px;background:var(--text)}.hm-part.arm.left{left:10px;transform:rotate(-30deg)}.hm-part.arm.right{right:10px;transform:rotate(30deg)}.hm-part.leg{width:4px;height:50px;top:120px;background:var(--text)}.hm-part.leg.left{left:calc(50% - 20px);transform:rotate(-20deg)}.hm-part.leg.right{left:calc(50% + 20px);transform:rotate(20deg)}.hm-status{text-align:center;font-size:1rem;font-weight:700;min-height:1.4em}
.ah-canvas{display:block;margin:0 auto;border-radius:16px;box-shadow:var(--shadow);touch-action:none}
.ah-status{text-align:center;font-size:1.1rem;font-weight:800;margin-top:12px;min-height:1.4em}
.sl-board{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;width:min(480px,95vw);max-width:480px;aspect-ratio:1}.sl-cell{aspect-ratio:1;border-radius:8px;border:2px solid var(--border);background:var(--bg-soft);font-size:clamp(0.7rem,2.5vw,1rem);font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}.sl-cell.snake::after{content:"🐍";font-size:1.2em;opacity:.3}.sl-cell.ladder::after{content:"🪜";font-size:1.2em;opacity:.3}.sl-tokens{display:flex;gap:2px;margin-top:2px}.sl-token{width:18px;height:18px;border-radius:50%;font-size:.65rem;font-weight:800;color:#fff;display:flex;align-items:center;justify-content:center}.sl-dice{text-align:center;margin:12px 0}.sl-roll-btn{padding:12px 24px;border-radius:12px;border:1px solid var(--border);background:var(--bg-soft);color:var(--text);font-weight:700;font-size:1.1rem;cursor:pointer;transition:all .15s ease}.sl-roll-btn:hover:not(:disabled){border-color:var(--accent);transform:scale(1.03)}.sl-roll-btn:disabled{opacity:.5;cursor:not-allowed}.sl-die{font-size:2.5rem}.sl-players{display:flex;gap:12px;justify-content:center;margin-bottom:12px;flex-wrap:wrap}.sl-player{padding:8px 16px;border-radius:20px;border:2px solid transparent;background:var(--bg-soft);font-weight:700;transition:all .15s ease}.sl-player.active{border-color:inherit;box-shadow:0 0 0 2px}.sl-pnum{margin-right:8px}.sl-status{text-align:center;font-size:1.1rem;font-weight:700;margin-top:12px;min-height:1.4em}
.ld-board{display:flex;flex-direction:column;gap:8px;align-items:center}.ld-yard{width:min(300px,90vw);padding:12px;border-radius:12px;border:2px solid;background:var(--bg-soft);text-align:center}.ld-yard-label{font-weight:800;margin-bottom:8px;display:block}.ld-yard-tokens{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.ld-track{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;width:min(520px,95vw);max-width:520px}.ld-cell{width:36px;height:36px;border-radius:6px;border:1px solid var(--border);background:var(--bg-soft);display:flex;align-items:center;justify-content:center}.ld-cell.start{background:rgba(255,90,60,.1);border-color:#ff5a3c}.ld-cell.safe{background:rgba(52,211,153,.1);border-color:#34d399}.ld-cell-tokens{display:flex;gap:1px}.ld-stretch{display:flex;flex-direction:column;gap:3px;padding:8px;border-radius:12px;border:2px solid;background:var(--bg-soft);align-items:center}.ld-stretch-cell{width:36px;height:36px;border-radius:6px;border:1px solid var(--border);background:var(--bg-soft);display:flex;align-items:center;justify-content:center}.ld-center{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:4px}.ld-dice{text-align:center;margin:8px 0}.ld-roll-btn{padding:12px 24px;border-radius:12px;border:1px solid var(--border);background:var(--bg-soft);color:var(--text);font-weight:700;font-size:1.1rem;cursor:pointer;transition:all .15s ease}.ld-roll-btn:hover:not(:disabled){border-color:var(--accent);transform:scale(1.03)}.ld-roll-btn:disabled{opacity:.5;cursor:not-allowed}.ld-die{font-size:2.5rem}.ld-players{display:flex;gap:12px;justify-content:center;margin-bottom:8px;flex-wrap:wrap}.ld-player{padding:8px 16px;border-radius:20px;border:2px solid transparent;background:var(--bg-soft);font-weight:700;transition:all .15s ease}.ld-player.active{border-color:inherit;box-shadow:0 0 0 2px}.ld-pnum{margin-right:8px}.ld-status{text-align:center;font-size:1.1rem;font-weight:700;margin-top:12px;min-height:1.4em}.ld-token{width:20px;height:20px;border-radius:50%;font-size:.7rem;font-weight:800;color:#fff;display:flex;align-items:center;justify-content:center}
.imp-card{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius);padding:24px;max-width:480px;margin:0 auto;box-shadow:var(--shadow)}.imp-setup,.imp-reveal,.imp-discuss,.imp-vote,.imp-result{text-align:center}.imp-role{font-size:1.5rem;font-weight:800;margin:16px 0}.imp-reveal.imposter .imp-role{color:#ff5a3c}.imp-word strong,.imp-clue{font-size:1.2rem}.imp-hint{color:var(--text-soft);font-size:.9rem;margin-top:12px}.imp-btn{margin-top:20px;padding:14px 28px;border-radius:12px;border:1px solid var(--border);background:var(--accent);color:#fff;font-weight:700;font-size:1rem;cursor:pointer;transition:all .15s ease}.imp-btn:hover{transform:scale(1.02);box-shadow:0 4px 12px rgba(255,90,60,.3)}.imp-vote-options{display:flex;flex-direction:column;gap:8px;margin:16px 0}.imp-vote-btn{padding:12px;border-radius:10px;border:2px solid var(--border);background:var(--bg-soft);color:var(--text);font-weight:700;cursor:pointer;transition:all .15s ease}.imp-vote-btn:hover:not(:disabled){border-color:var(--accent)}.imp-vote-btn.selected{border-color:var(--accent);background:rgba(255,90,60,.15)}.imp-vote-btn:disabled{opacity:.4;cursor:not-allowed}.imp-result.win .imp-role{color:#34d399}.imp-result.lose .imp-role{color:#ff5a3c}.imp-vote-breakdown{display:flex;gap:8px;justify-content:center;margin:16px 0;flex-wrap:wrap}.imp-vote-bar{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 12px;border-radius:8px;background:var(--bg);border:1px solid var(--border)}.imp-status{text-align:center;font-size:1rem;font-weight:700;margin-top:12px;min-height:1.4em}
.dc-card{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius);padding:24px;max-width:480px;margin:0 auto;box-shadow:var(--shadow)}.dc-setup,.dc-acting,.dc-scoring,.dc-gameover{text-align:center}.dc-word{font-size:2rem;font-weight:800;margin:16px 0;padding:16px;background:var(--bg);border-radius:12px;border:2px solid var(--accent);color:var(--dc-text-accent,#9d174d)}.dc-hint{color:var(--text-soft);font-size:.9rem}.dc-timer-display{font-size:3rem;font-weight:800;margin:16px 0;color:var(--dc-text-accent,#9d174d);font-variant-numeric:tabular-nums}.dc-btn{margin:8px;padding:14px 28px;border-radius:12px;border:1px solid var(--game-ui-primary);background:var(--game-ui-primary);color:var(--game-ui-primary-ink);font-weight:700;font-size:1rem;cursor:pointer;transition:transform .15s ease,filter .15s ease}.dc-btn:hover{transform:scale(1.02)}.dc-btn-secondary{background:var(--bg-soft);color:var(--text);border-color:var(--border)}.dc-btn-secondary:hover{border-color:var(--accent)}.dc-status{text-align:center;font-size:1rem;font-weight:700;margin-top:12px;min-height:1.4em}

/* ===================== Game vibes =====================
   Each game gets its own visual personality on top of the shared shell.
   Scoped to a `.<id>-vibe` class added to the game-shell root so games stay
   easy to add without fighting each other's styles. */

/* Tic-Tac-Toe — neon arcade cabinet */
.ttt-vibe .game-stage { background: radial-gradient(circle at 50% 20%, rgba(56,189,248,.08), transparent 60%); border-radius: 20px; padding: 12px; }
.ttt-vibe .ttt-cell { box-shadow: inset 0 0 0 1px transparent; }
.ttt-vibe .ttt-cell.filled { box-shadow: 0 0 18px -4px currentColor; }
.ttt-vibe .ttt-status { letter-spacing: .02em; }
.ttt-theme.setup-card { border-color: #38bdf8; box-shadow: 0 0 0 1px rgba(56,189,248,.25), var(--shadow); }

/* Connect Four — playful drop-in candy */
.c4-vibe .game-stage { background: linear-gradient(180deg, rgba(249,115,22,.08), transparent 70%); border-radius: 20px; padding: 12px; }
.c4-vibe .c4-cell.filled { animation: c4-drop .35s cubic-bezier(.5,-0.3,.7,1.4); }
@keyframes c4-drop { 0% { transform: translateY(-220%); } 100% { transform: translateY(0); } }
.c4-theme.setup-card { border-color: #f97316; }

/* Minesweeper — retro terminal */
.ms-vibe .game-stage { background: #0b0d12; border-radius: 14px; padding: 16px; border: 1px solid #10b98133; }
.ms-vibe .ms-cell { font-variant-numeric: tabular-nums; }
.ms-vibe .ms-status { color: #10b981; font-weight: 800; letter-spacing: .02em; }
.ms-theme.setup-card { border-color: #10b981; }

/* Memory Match — pastel dream */
.mem-vibe .game-stage { background: linear-gradient(135deg, rgba(225,29,72,.08), rgba(251,191,36,.08)); border-radius: 20px; padding: 12px; }
.mem-vibe .mem-card { border-radius: 16px; }
.mem-theme.setup-card { border-color: #e11d48; }

/* Air Hockey — neon rink */
.ah-vibe .game-stage { background: radial-gradient(circle at 50% 50%, rgba(255,90,60,.1), transparent 70%); border-radius: 20px; padding: 12px; }
.ah-vibe .ah-canvas { box-shadow: 0 0 30px -6px var(--accent), var(--shadow); }
.ah-theme.setup-card { border-color: #ff5a3c; }

/* Snakes & Ladders — candyland board */
.sl-vibe .game-stage { background: linear-gradient(160deg, rgba(52,211,153,.08), rgba(251,191,36,.08)); border-radius: 20px; padding: 12px; }
.sl-vibe .sl-cell { border-radius: 10px; }
.sl-theme.setup-card { border-color: #34d399; }

/* Ludo — royal cross board */
.ld-vibe .game-stage { background: radial-gradient(circle at 50% 0%, rgba(251,191,36,.1), transparent 70%); border-radius: 20px; padding: 12px; }
.ld-theme.setup-card { border-color: #fbbf24; }

/* Imposter — noir mystery */
.imp-vibe .game-stage { background: radial-gradient(circle at 50% 20%, rgba(168,85,247,.15), #0b0d12 70%); border-radius: 20px; padding: 20px; }
.imp-vibe .imp-card { background: #14101c; border-color: #a855f733; color: #ece6f5; }
.imp-vibe .imp-hint { color: #b9a9d1; }
.imp-theme.setup-card {
  border-color: #a855f7;
  background: #14101c;
  --bg: #211a2c;
  --text: #ece6f5;
  --text-soft: #b9a9d1;
}

/* Dumb Charades — comic pop */
.dc-vibe .game-stage {
  background-color: #fdf0f5;
  background-image: radial-gradient(rgba(236,72,153,.25) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
  border-radius: 20px; padding: 16px;
}
[data-theme="dark"] .dc-vibe { --dc-text-accent: #ff85b5; }
[data-theme="dark"] .dc-vibe .game-stage { background-color: #1a1420; background-image: radial-gradient(rgba(236,72,153,.2) 1.5px, transparent 1.5px); }
.dc-vibe .dc-card { border-width: 3px; border-color: #ec4899; }
.dc-theme.setup-card { border-color: #ec4899; border-width: 3px; }

/* Chess — royal walnut board */
.chess-vibe .game-stage { background: radial-gradient(circle at 50% 15%, rgba(201,162,75,.12), transparent 70%); border-radius: 20px; padding: 16px; }
.chess-vibe .chess-light { background: #f0dcb4; }
.chess-vibe .chess-dark { background: #6b4226; }
.chess-vibe .chess-status { color: var(--text); }
.chess-theme.setup-card { border-color: #c9a24b; }

/* --- Rock Paper Scissors: structure --- */
.rps-status{text-align:center;font-size:1rem;font-weight:700;margin-bottom:12px;min-height:1.4em}
.rps-card{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius);padding:28px;max-width:420px;margin:0 auto;box-shadow:var(--shadow);text-align:center}
.rps-choices{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.rps-choice-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 20px;border-radius:14px;border:2px solid var(--border);background:var(--bg);font-weight:700;font-size:0.95rem;cursor:pointer;transition:transform .12s ease,border-color .15s ease}
.rps-choice-btn span{font-size:2.2rem}
.rps-choice-btn:hover{border-color:var(--accent);transform:scale(1.05)}
.rps-hint{color:var(--text-soft);font-size:.9rem}
.rps-btn{margin-top:16px;padding:12px 26px;border-radius:12px;border:none;background:var(--accent);color:#fff;font-weight:700;cursor:pointer;transition:transform .12s ease}
.rps-btn:hover{transform:scale(1.03)}
.rps-btn-secondary{background:var(--bg);color:var(--text);border:1px solid var(--border)}
.rps-vs{display:flex;align-items:center;justify-content:center;gap:16px;font-size:3rem;margin:12px 0}
.rps-vs-x{font-size:1.4rem;color:var(--text-soft)}

/* --- 2048: structure --- */
.t48-status{display:flex;justify-content:center;gap:24px;font-size:1rem;font-weight:700;margin-bottom:12px}
.t48-board{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:min(400px,90vw);max-width:400px;aspect-ratio:1;background:#bbada0;border-radius:12px;padding:10px;touch-action:none}
.t48-cell{aspect-ratio:1;border-radius:8px;background:rgba(238,228,218,.35);display:flex;align-items:center;justify-content:center;font-weight:800;transition:background .1s ease}
.t48-cell.filled{animation:pop .15s ease}
.t48-board.t48-moving > .t48-cell.filled { visibility: hidden; animation: none; }
.t48-motion { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.t48-motion-tile { position: absolute; box-sizing: border-box; animation: none !important; transition: transform .17s cubic-bezier(.2,.8,.25,1); }
.t48-cell.t48-merged { animation: t48-merge .22s ease-out; }
.t48-cell.t48-spawned { animation: t48-spawn .22s ease-out; }
.ttt-cell.filled:not(.win) { animation: none; }
.ttt-cell.just-marked { animation: pop .18s ease-out; }
.ttt-cell.just-marked.win { animation: pop .18s ease-out, winPulse .6s .18s infinite alternate; }
.c4-vibe .c4-cell.filled:not(.win) { animation: none; }
.c4-vibe .c4-cell.win { animation: winPulse .6s ease infinite alternate; }
.c4-vibe .c4-cell.just-dropped { animation: c4-drop .35s cubic-bezier(.5,-.3,.7,1.4); }
.c4-vibe .c4-cell.just-dropped.win { animation: c4-drop .35s cubic-bezier(.5,-.3,.7,1.4), winPulse .6s .35s infinite alternate; }
.mem-grid { perspective: 600px; }
.mem-card.just-flipped { animation: mem-flip .25s ease-out; }
@keyframes mem-flip { from { transform: rotateY(-90deg); } to { transform: rotateY(0); } }
@keyframes t48-merge { 0% { transform: scale(.82); } 55% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes t48-spawn { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .t48-motion-tile { transition: none; }
  .t48-cell.t48-merged, .t48-cell.t48-spawned { animation: none; }
  .ttt-cell.just-marked, .ttt-cell.just-marked.win,
  .c4-vibe .c4-cell.just-dropped, .c4-vibe .c4-cell.just-dropped.win,
  .mem-card.just-flipped { animation: none; }
  .game-help-btn, :where(.game-shell .game-stage) button { transition: none; }
}
.t48-message{position:relative}
.t48-overlay{position:absolute;top:-260px;left:50%;transform:translateX(-50%);background:var(--bg-soft);border:1px solid var(--border);border-radius:16px;padding:24px 28px;text-align:center;box-shadow:var(--shadow);z-index:5;width:min(340px,88vw)}
.t48-btn{margin:6px;padding:10px 22px;border-radius:10px;border:none;background:var(--accent);color:#fff;font-weight:700;cursor:pointer}
.t48-btn-secondary{background:var(--bg);color:var(--text);border:1px solid var(--border)}

/* --- Simon Says: structure --- */
.simon-status{display:flex;justify-content:center;gap:24px;font-size:1rem;font-weight:700;margin-bottom:16px}
.simon-pads{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(320px,80vw);max-width:320px;aspect-ratio:1;margin:0 auto}
.simon-pad{border-radius:20px;border:none;background:var(--pad-color);opacity:.55;cursor:pointer;transition:opacity .1s ease,transform .1s ease}
.simon-pad:disabled{cursor:default}
.simon-pad.active{opacity:1;transform:scale(0.96);box-shadow:0 0 24px var(--pad-color)}
.simon-message{text-align:center;margin-top:16px;min-height:1.4em;font-weight:700}
.simon-overlay{display:flex;flex-direction:column;align-items:center;gap:10px}
.simon-btn{padding:10px 24px;border-radius:10px;border:none;background:var(--accent);color:#fff;font-weight:700;cursor:pointer}

/* --- Word Scramble: structure --- */
.ws-status{text-align:center;font-size:1rem;font-weight:700;margin-bottom:12px}
.ws-card{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius);padding:28px;max-width:440px;margin:0 auto;box-shadow:var(--shadow);text-align:center}
.ws-hint{color:var(--text-soft);font-size:.85rem;margin-bottom:8px}
.ws-scramble{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
.ws-tile{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:10px;background:var(--bg);border:2px solid var(--accent);font-weight:800;font-size:1.3rem;color:var(--accent)}
.ws-form{display:flex;gap:8px;justify-content:center;margin-bottom:12px}
.ws-input{padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:1rem;text-transform:uppercase;width:180px}
.ws-actions{display:flex;gap:8px;justify-content:center;margin-bottom:10px}
.ws-btn{padding:10px 22px;border-radius:10px;border:none;background:var(--accent);color:#fff;font-weight:700;cursor:pointer}
.ws-btn-secondary{background:var(--bg);color:var(--text);border:1px solid var(--border)}
.ws-feedback{min-height:1.4em;font-weight:700}

/* --- Whack-a-Mole: structure --- */
.wam-status{display:flex;justify-content:center;gap:20px;font-size:1rem;font-weight:700;margin-bottom:14px}
.wam-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:min(360px,90vw);max-width:360px;margin:0 auto}
.wam-hole{aspect-ratio:1;border-radius:50%;border:4px solid #5b3a1e;background:radial-gradient(circle at 50% 60%,#3d2412,#1c130a);position:relative;overflow:hidden;cursor:pointer}
.wam-mole{position:absolute;left:50%;bottom:-70%;transform:translateX(-50%);font-size:2.2rem;transition:bottom .12s ease}
.wam-hole.up .wam-mole{bottom:8%}
.wam-hole.hit{background:radial-gradient(circle at 50% 60%,#4d7c0f,#1c130a)}
.wam-message{position:relative;text-align:center}
.wam-overlay{margin-top:16px;background:var(--bg-soft);border:1px solid var(--border);border-radius:16px;padding:20px 26px;display:inline-flex;flex-direction:column;align-items:center;gap:8px;box-shadow:var(--shadow)}
.wam-btn{padding:10px 24px;border-radius:10px;border:none;background:var(--accent);color:#fff;font-weight:700;cursor:pointer}

/* Rock Paper Scissors — carnival stripes */
.rps-vibe .game-stage { background: repeating-linear-gradient(135deg, rgba(244,63,94,.08) 0 18px, transparent 18px 36px); border-radius: 20px; padding: 16px; }
.rps-theme.setup-card { border-color: #f43f5e; }

/* 2048 — warm parchment */
.t48-vibe .game-stage { background: radial-gradient(circle at 50% 10%, rgba(237,194,46,.12), transparent 70%); border-radius: 20px; padding: 16px; }
.t48-theme.setup-card { border-color: #edc22e; }

/* Simon Says — arcade glow */
.simon-vibe .game-stage { background: radial-gradient(circle at 50% 20%, rgba(59,130,246,.14), #0b0d12 75%); border-radius: 20px; padding: 20px; }
.simon-theme.setup-card {
  border-color: #3b82f6;
  background: #10131c;
  --bg: #191e2b;
  --text: #eef1f6;
  --text-soft: #b4bdcc;
}

/* Word Scramble — sky notebook */
.ws-vibe .game-stage { background: linear-gradient(180deg, rgba(14,165,233,.08), transparent); border-radius: 20px; padding: 16px; }
.ws-theme.setup-card { border-color: #0ea5e9; }

/* Whack-a-Mole — grassy meadow */
.wam-vibe .game-stage { background: radial-gradient(circle at 50% 0%, rgba(132,204,22,.12), transparent 70%); border-radius: 20px; padding: 16px; }
.wam-theme.setup-card { border-color: #84cc16; }

/* Arcade room: ambient light, cabinet details, and depth without image downloads. */
:root {
  --bg: #efe9df;
  --bg-soft: #fffaf1;
  --border: #d9c9b6;
  --shadow: 0 4px 0 #332c2620, 0 18px 38px #29233a22;
}
[data-theme="dark"] {
  --bg: #101222;
  --bg-soft: #1c2031;
  --border: #40435d;
  --shadow: 0 4px 0 #050713, 0 18px 40px #05071388;
}
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse at 12% 9%, #f95e7826, transparent 35%),
    radial-gradient(ellipse at 90% 14%, #28d6df24, transparent 35%),
    radial-gradient(ellipse at 50% 70%, #f8b94422, transparent 38%),
    repeating-linear-gradient(90deg, transparent 0 86px, #45487008 87px 88px),
    linear-gradient(180deg, var(--bg), var(--bg));
  background-attachment: fixed;
}
[data-theme="dark"] body {
  background-image:
    radial-gradient(ellipse at 8% 4%, #f63d8150, transparent 32%),
    radial-gradient(ellipse at 94% 12%, #2cc5dd3b, transparent 36%),
    radial-gradient(ellipse at 50% 65%, #feaf4b1c, transparent 50%),
    repeating-linear-gradient(90deg, transparent 0 86px, #d9cefa08 87px 88px),
    linear-gradient(180deg, #101222, #161323);
}
.app-header {
  isolation: isolate;
  min-height: 76px;
  padding: 12px clamp(12px, 3vw, 32px);
  background: radial-gradient(ellipse at 23% -110%, #e33b8570, transparent 70%),
    linear-gradient(105deg, #20213d, #141a32 60%, #203c47);
  border-bottom: 4px solid #e6b36d;
  box-shadow: 0 5px 0 #0c112a, 0 14px 30px #080b2050;
}
.app-header::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #fa6058, #f4c469 35%, #52dcb2 70%, #5dbbfa);
}
.app-header .brand {
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  color: #fff;
}
.app-header .brand-icon {
  width: 48px;
  height: 48px;
  filter: drop-shadow(0 3px 2px #0009);
}
.app-header .brand-title {
  font-size: clamp(1.25rem, 3vw, 1.65rem);
  line-height: 1;
  letter-spacing: .045em;
  background: linear-gradient(95deg, #fff9e6 5%, #ffe48d 28%, #ff9fba 57%, #8ceaff 90%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 2px #100d33);
}
.brand-spark {
  color: #72f5d1;
  -webkit-text-fill-color: #72f5d1;
  margin-left: 2px;
  font-size: .8em;
}
.app-header .header-actions { gap: clamp(5px, 1.5vw, 12px); }
.app-header .icon-btn {
  --button-color: #f7ba69;
  position: relative;
  width: auto;
  min-width: 44px;
  height: 44px;
  flex: 0 0 auto;
  gap: 8px;
  padding: 0 12px;
  border: 2px solid color-mix(in srgb, var(--button-color) 65%, white);
  border-radius: 13px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--button-color) 42%, #2d304f), #22263e);
  color: #fff;
  font-size: .82rem;
  font-weight: 850;
  white-space: nowrap;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--button-color) 55%, #091226),
    inset 0 1px 0 #ffffff55, 0 0 17px color-mix(in srgb, var(--button-color) 30%, transparent);
}
.app-header .icon-btn svg { width: 23px; height: 23px; }
.app-header .icon-btn:hover {
  transform: translateY(-2px);
  background: var(--button-color);
  color: #14203a;
}
.app-header .icon-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #091226; }
.app-header .icon-btn:focus-visible, .app-header .brand:focus-visible {
  outline: 3px solid #fff3a7;
  outline-offset: 4px;
}
.app-header .room-toggle { --button-color: #fb728b; }
.app-header #feedbackToggle { --button-color: #59deb6; }
.app-header #themeToggle { --button-color: #9db6ff; }
.header-setting { position: relative; }
.feedback-panel[hidden] { display: none; }
.feedback-panel {
  position: absolute;
  z-index: 70;
  top: calc(100% + 18px);
  right: 0;
  width: min(320px, calc(100vw - 24px));
  padding: 18px;
  border: 2px solid #59deb6;
  border-radius: 18px;
  background: #1a2940;
  color: #f4f6ff;
  box-shadow: 0 10px 0 #091526, 0 20px 40px #0009;
}
.feedback-panel h2 { margin: 0 0 6px; font-size: 1.15rem; color: #bafae4; }
.feedback-panel p { margin: 0 0 14px; font-size: .9rem; line-height: 1.4; color: #d6e2ee; }
.feedback-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid #8498aa;
  border-radius: 12px;
  background: #233550;
  color: #fff;
  font: inherit;
  font-weight: 750;
  text-align: left;
}
.feedback-option:not(:disabled):hover { border-color: #59deb6; background: #2b4760; }
.feedback-option:focus-visible { outline: 3px solid #fff3a7; outline-offset: 2px; }
.feedback-option:disabled { opacity: .65; cursor: not-allowed; }
.feedback-value { min-width: 76px; padding: 5px 8px; border-radius: 20px; background: #43536c; text-align: center; font-size: .82rem; }
.feedback-option[aria-pressed="true"] .feedback-value { background: #268c6c; color: #fff; }
.feedback-switch { cursor: pointer; }
.feedback-switch:has(input:checked) .feedback-value { background: #268c6c; color: #fff; }
.feedback-switch:has(input:focus-visible) { outline: 3px solid #fff3a7; outline-offset: 2px; }
.feedback-switch:has(input:disabled) { opacity: .65; cursor: not-allowed; }
.feedback-switch input { accent-color: #59deb6; min-width: 26px; min-height: 26px; cursor: pointer; }
.feedback-panel .feedback-audio-status { margin: 2px 0 12px; }
.feedback-panel .feedback-audio-status:empty { display: none; }
.app-header .room-toggle.is-connected {
  --button-color: #59eab3;
  color: #fff;
  box-shadow: 0 4px 0 #166251, 0 0 0 3px #59eab344, 0 0 22px #59eab399;
}
.app-header .room-toggle.is-connected::after {
  content: '';
  position: absolute;
  top: -4px;
  right: -4px;
  width: 9px;
  height: 9px;
  border: 2px solid #172039;
  border-radius: 50%;
  background: #67fac0;
}
.app-header .moon-icon { display: none; }
.app-header #themeToggle[data-mode="dark"] .sun-icon { display: none; }
.app-header #themeToggle[data-mode="dark"] .moon-icon { display: block; }
@media (max-width: 680px) {
  .feedback-label-extra, .theme-label { display: none; }
}
@media (max-width: 480px) {
  .app-header { padding-inline: 12px; }
  .app-header .icon-btn { min-width: 52px; padding-inline: 8px; font-size: .78rem; }
  .app-header .icon-btn svg { display: none; }
  .app-header #themeToggle[data-mode="dark"] .moon-icon { display: none; }
  .app-header .header-actions { gap: 5px; }
  .feedback-panel { position: fixed; top: 66px; right: 12px; }
}
@media (max-width: 390px) {
  .app-header .brand { gap: 6px; }
  .app-header .brand-icon { width: 28px; height: 28px; }
  .app-header .brand-title { font-size: 1rem; }
  .brand-spark { display: none; }
}
.landing-hero {
  max-width: 770px;
  margin: 28px auto 8px;
  padding: 30px clamp(14px, 5vw, 50px);
  border: 1px solid color-mix(in srgb, #fe749e 35%, var(--border));
  border-radius: 34px;
  background: radial-gradient(circle at 50% -20%, #ff719025, transparent 75%), var(--bg-soft);
  box-shadow: var(--shadow), inset 0 0 0 4px #ffffff0d;
}
.landing-logo { width: 90px; height: 90px; filter: drop-shadow(0 7px 6px #06081c67); }
.landing-title {
  font-size: clamp(3rem, 7vw, 5rem);
  letter-spacing: -.055em;
  text-shadow: 0 8px 28px #fa405c45;
}
.landing-sub { max-width: 520px; margin: 0 auto; }
.section-heading { color: var(--text); }
.section-heading::after { content: ''; display: inline-block; width: 42px; height: 4px; margin: 0 0 3px 12px; border-radius: 3px; background: linear-gradient(90deg, #fe6c5c, #fa388e); }
.game-card {
  border: 1px solid color-mix(in srgb, var(--accent) 23%, var(--border));
  background: linear-gradient(155deg, color-mix(in srgb, var(--accent) 11%, var(--bg-soft)), var(--bg-soft) 60%);
  box-shadow: var(--shadow);
}
.game-card:hover, .game-card:focus-within {
  transform: translateY(-5px) rotate(-.3deg);
  box-shadow: 0 6px 0 color-mix(in srgb, var(--accent) 45%, #131527), 0 18px 32px #05071366;
}
.game-card-icon { background: color-mix(in srgb, var(--accent) 23%, var(--bg-soft)); border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); }
.category-tab { box-shadow: 0 3px 0 color-mix(in srgb, var(--border) 65%, #1a2030); }
.game-stage {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  box-shadow: var(--shadow);
}
.game-title { text-shadow: 0 5px 20px color-mix(in srgb, var(--accent) 24%, transparent); }
.rps-arena { display: flex; align-items: center; justify-content: space-evenly; gap: 10px; min-height: 190px; }
.rps-arena-hand { display: flex; flex-direction: column; align-items: center; font-size: clamp(3rem, 8vw, 5rem); filter: drop-shadow(0 8px 6px #07061455); }
.rps-arena-hand small { margin-top: 8px; font-size: .7rem; font-weight: 900; letter-spacing: .12em; color: var(--text-soft); }
.rps-countdown { font-size: clamp(1.4rem, 4vw, 2.3rem); font-weight: 1000; color: var(--accent); min-width: 95px; text-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 45%, transparent); }
.rps-hand-opponent.rps-swing { animation: hand-throw .55s cubic-bezier(.2,.85,.3,1); }
@keyframes hand-throw { 0% { transform: translateY(-25px) rotate(15deg); } 50% { transform: translateY(12px) rotate(-17deg); } 100% { transform: translateY(0) rotate(0); } }
.ms-flag-toggle {
  border: 2px solid #10b981;
  background: #172c29;
  color: #e8fff2;
  border-radius: 12px;
  padding: 9px 16px;
  font-weight: 750;
  margin-bottom: 10px;
}
.ms-flag-toggle[aria-pressed="true"] { background: #10b981; color: #061f1b; box-shadow: 0 0 18px #10b9818a; }
.rps-btn:disabled { opacity: .6; cursor: not-allowed; }
.chess-vibe .game-stage {
  background: radial-gradient(circle at 50% 0%, #967052, #342b30 85%);
  border: 6px solid #7e5c46;
  box-shadow: inset 0 0 30px #18131b88, var(--shadow);
}
.chess-vibe .chess-board {
  width: min(100%, 570px);
  max-width: 570px;
  border: 6px solid #322122;
  border-radius: 5px;
  box-shadow: 0 12px 0 #1b181c, 0 23px 30px #0009, inset 0 0 0 2px #d2a76c;
}
.chess-vibe .chess-sq.chess-light { background: linear-gradient(135deg, #f3ddb6, #d9b58c); }
.chess-vibe .chess-sq.chess-dark { background: linear-gradient(135deg, #95603b, #6f3c2e); }
.chess-vibe .chess-sq .chess-piece { width: 96%; height: 96%; filter: drop-shadow(0 2px 1px #170e0e88); }
.chess-vibe .chess-piece { flex-shrink: 0; }
.chess-vibe .chess-piece.cw {
  --piece-fill: #fff9ea;
  --piece-rim: #302729;
  --piece-detail: #6b4d43;
  --piece-band: #e4bb86;
  --piece-glint: #fff;
}
.chess-vibe .chess-piece.cb {
  --piece-fill: #171e32;
  --piece-rim: #fff0d7;
  --piece-detail: #aebdd5;
  --piece-band: #4e6082;
  --piece-glint: #abbad1;
}
.chess-vibe .chess-body { fill: var(--piece-fill); stroke: var(--piece-rim); stroke-width: 1.8; stroke-linejoin: round; }
.chess-vibe .chess-detail { fill: none; stroke: var(--piece-detail); stroke-width: 2; stroke-linecap: round; }
.chess-vibe .chess-detail-dot { fill: var(--piece-detail); }
.chess-vibe .chess-band { fill: var(--piece-band); stroke: var(--piece-rim); stroke-width: 1.4; stroke-linejoin: round; }
.chess-vibe .chess-glint { fill: none; stroke: var(--piece-glint); stroke-width: 1.5; stroke-linecap: round; }
.chess-vibe .chess-captured .chess-piece { width: 25px; height: 25px; }
.chess-vibe .chess-promo-btn .chess-piece { width: 54px; height: 54px; }
.chess-vibe .chess-status { color: #f7efe1; }
@media (max-width: 600px) {
  .chess-vibe .game-stage {
    margin-inline: -10px;
    padding: 5px;
    border-width: 2px;
    border-radius: 12px;
  }
  .chess-vibe .chess-board {
    border-width: 3px;
    box-shadow: 0 6px 0 #1b181c, 0 12px 18px #0007;
  }
}
.wam-vibe .game-stage {
  background: radial-gradient(circle at 50% 0%, #b6dc5a, #54812a 75%);
  border: 5px solid #58752d;
  box-shadow: inset 0 0 34px #203a1f88, var(--shadow);
}
.wam-vibe .wam-hole { box-shadow: inset 0 8px 12px #120d0acc, 0 7px 0 #315324; }
.simon-vibe .simon-pads { padding: 14px; background: #0c1127; border: 5px solid #3b547e; border-radius: 36px; box-shadow: 0 16px 30px #0009, inset 0 0 16px #627bb677; }
.simon-vibe .simon-pad { border: 3px solid #ffffff63; box-shadow: inset 0 0 24px #0006; }
.simon-vibe .simon-status, .simon-vibe .simon-message { color: #f4f7ff; }
@media (prefers-reduced-motion: reduce) {
  .game-card, .rps-hand-opponent.rps-swing { animation: none; transition: none; }
}

/* Locally hosted icon artwork follows the surrounding text or game accent. */
.ui-glyph, .catalog-icon {
  display: inline-block;
  flex: none;
  width: 1.15em;
  height: 1.15em;
  background-color: currentColor;
  -webkit-mask: var(--icon-url) center / contain no-repeat;
  mask: var(--icon-url) center / contain no-repeat;
  vertical-align: -.18em;
}
.catalog-icon { width: 100%; height: 100%; }

.landing { gap: 28px; }
.landing-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(30px, 5vw, 56px);
  background:
    radial-gradient(circle at 8% 85%, #38bdf82d, transparent 33%),
    radial-gradient(circle at 90% 12%, #ff2e8833, transparent 38%),
    var(--bg-soft);
}
.landing-hero::before, .landing-hero::after {
  content: '';
  position: absolute;
  width: 155px;
  height: 155px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 36px;
  transform: rotate(30deg);
  pointer-events: none;
}
.landing-hero::before { top: -105px; left: -48px; }
.landing-hero::after { right: -85px; bottom: -125px; }
.landing-eyebrow {
  margin: 0 0 14px;
  color: #d84369;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .19em;
}
[data-theme="dark"] .landing-eyebrow { color: #ff9aae; }
.landing-sub { line-height: 1.65; }

.catalog-toolbar {
  display: grid;
  gap: 18px;
}
.section-heading { display: inline-flex; align-items: center; gap: 9px; }
.section-heading .ui-glyph { font-size: 1.25rem; color: #eb526d; }
.section-heading::after { display: none; }
.category-tabs { justify-content: flex-start; margin: 0; gap: 10px; }
.category-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 8px 14px;
  font-weight: 750;
}
.category-tab .ui-glyph { font-size: 1.15rem; }
.category-tab:focus-visible, .game-card-btn:focus-visible {
  outline: 3px solid #101222;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px #fff;
}
.category-tab.active .ui-glyph { color: #fff; }

.game-grid { gap: 18px; }
.game-card { border-radius: 20px; color: var(--text); }
.game-card-btn {
  height: 100%;
  min-height: 285px;
  padding: 0;
  gap: 0;
}
.game-card-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 134px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 15%, #ffffff26, transparent 38%),
    radial-gradient(circle at 85% 88%, #0000001f, transparent 38%),
    linear-gradient(125deg, color-mix(in srgb, var(--accent) 52%, #212741), color-mix(in srgb, var(--accent) 63%, #251529));
}
.game-card-visual::before, .game-card-visual::after {
  content: '';
  position: absolute;
  width: 220px;
  height: 220px;
  border: 1px solid #ffffff2c;
  border-radius: 56px;
  transform: rotate(32deg);
  pointer-events: none;
}
.game-card-visual::before { top: -154px; left: -80px; }
.game-card-visual::after { right: -120px; bottom: -170px; }
.game-card-icon {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  padding: 17px;
  border-radius: 24px;
  align-self: auto;
  color: #fff;
  background: #101222;
  border: 1px solid #fff;
  box-shadow: inset 0 1px 0 #ffffff60, 0 12px 25px #0b112c40;
  transition: transform .2s ease;
}
.game-card:hover .game-card-icon, .game-card:focus-within .game-card-icon { transform: scale(1.08) rotate(-4deg); }
.game-card-number {
  position: absolute;
  right: 16px;
  top: 14px;
  color: #fff;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .12em;
  opacity: .8;
}
.game-card-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 15px 18px 18px;
}
.game-card-category {
  color: color-mix(in srgb, var(--accent) 80%, var(--text));
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.game-card-name { margin-top: 7px; font-size: 1.2rem; letter-spacing: -.02em; }
.game-card-tagline { margin-top: 4px; line-height: 1.35; }
.game-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-top: auto;
  padding-top: 18px;
}
.game-card-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  opacity: 1;
}
.game-card-play {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: color-mix(in srgb, var(--accent) 80%, var(--text));
  font-size: .8rem;
  font-weight: 850;
}
.game-card-play .ui-glyph { transition: transform .2s ease; }
.game-card:hover .game-card-play .ui-glyph { transform: translateX(3px); }
.recent-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.recent-grid .game-card-btn { min-height: 0; padding: 0; }
.recent-grid .game-card-visual { height: 80px; }
.recent-grid .game-card-icon { width: 56px; height: 56px; padding: 11px; border-radius: 17px; }
.recent-grid .game-card-copy { padding: 13px 15px 15px; }
.recent-grid .game-card-bottom { padding-top: 12px; }

.game-head-identity { display: inline-flex; align-items: center; gap: 12px; text-align: left; }
.game-help-dialog h2, .game-help-dialog > button { display: flex; align-items: center; gap: 8px; }
.game-head-art, .game-emoji {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  padding: 10px;
  border-radius: 14px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-soft));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
}
.game-emoji { width: 64px; height: 64px; padding: 13px; }
.back-btn, .reset-btn, .game-help-btn, .game-names-btn, .setup-start-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.back-btn, .reset-btn { min-height: 44px; }
.game-names-btn { border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; }
.game-help-btn .ui-glyph, .game-names-btn .ui-glyph { font-size: 1.05rem; }
.setup-start-btn .ui-glyph { margin-left: auto; }
.feedback-option-label { display: inline-flex; align-items: center; gap: 9px; }
.feedback-option-label .ui-glyph { font-size: 1.2rem; color: #a4f2db; }
.app-header .icon-btn .ui-glyph { font-size: 1.3rem; }

@media (max-width: 600px) {
  .main-content { padding-inline: 12px; }
  .game-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr)); }
  .recent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-tabs { flex-wrap: nowrap; overflow-x: auto; padding: 3px 3px 9px; scrollbar-width: thin; }
  .category-tab { flex: none; }
  .game-head-identity { text-align: center; }
}
@media (max-width: 480px) {
  .app-header .icon-btn { min-width: 44px; padding-inline: 9px; }
  .app-header .icon-btn svg { display: block; }
  .app-header #themeToggle .moon-icon { display: none; }
  .app-header #themeToggle[data-mode="dark"] .sun-icon { display: none; }
  .app-header #themeToggle[data-mode="dark"] .moon-icon { display: block; }
  .app-header .header-action-label { display: none; }
  .app-header #themeToggle .theme-label, .app-header #themeMode { display: none; }
  .landing-hero { margin-top: 8px; }
  .game-head-art { width: 40px; height: 40px; padding: 8px; }
}
@media (max-width: 370px) {
  .recent-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .game-card-icon, .game-card-play .ui-glyph { transition: none; }
}

.resume-section {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid color-mix(in srgb, #e25879 48%, var(--border));
  border-radius: 22px;
  background:
    radial-gradient(circle at 0 0, #e2587924, transparent 40%),
    radial-gradient(circle at 100% 100%, #4fbbd321, transparent 45%),
    var(--bg-soft);
  box-shadow: var(--shadow);
}
.resume-section[hidden] { display: none; }
.resume-heading { display: flex; align-items: center; gap: 12px; }
.resume-heading-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: #e2587926;
  color: #e25879;
  font-size: 1.3rem;
}
.resume-heading h2 { margin: 0 0 3px; font-size: 1.1rem; letter-spacing: -.02em; }
.resume-heading p { margin: 0; color: var(--text-soft); font-size: .88rem; }
.resume-games { display: flex; flex-wrap: wrap; gap: 10px; }
.resume-game-item { display: flex; align-items: stretch; width: min(340px, 100%); min-width: 0; gap: 5px; }
.resume-game-item .resume-game { flex: 1; width: auto; min-width: 0; }
.resume-delete {
  flex: none;
  min-width: 56px;
  min-height: 48px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-soft);
  color: var(--text-soft);
  font-size: .8rem;
  font-weight: 700;
}
.resume-delete:hover { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg-soft)); }
.resume-delete:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.resume-notice { margin: 0; color: var(--text-soft); font-size: .85rem; }
.resume-notice:empty { display: none; }
.resume-game {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(265px, 100%);
  min-height: 64px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 9%, var(--bg-soft));
  color: var(--text);
  text-align: left;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.resume-game:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, var(--bg-soft));
}
.resume-game:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.resume-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  padding: 9px;
  border-radius: 11px;
  background: var(--accent);
  color: #fff;
}
.resume-game-copy { display: grid; gap: 2px; min-width: 0; }
.resume-game-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.resume-game-copy small { color: var(--text-soft); font-size: .75rem; }
.resume-game > .ui-glyph { margin-left: auto; color: var(--accent); }
@media (max-width: 600px) {
  .resume-game-item { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .resume-game { transition: none; }
}

/* Movie brief — cast chips + summary on charades/imposter cards */
.movie-brief { margin: 14px auto 6px; max-width: 420px; text-align: left; display: grid; gap: 8px; }
.movie-brief-cast { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.movie-brief-label { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); margin-right: 2px; }
.movie-brief-chip {
  padding: 4px 10px; border-radius: 999px; font-size: .82rem; font-weight: 700;
  background: color-mix(in srgb, var(--accent) 14%, var(--bg)); color: var(--text);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.movie-brief-summary {
  margin: 0; padding: 10px 12px; border-radius: 12px; font-size: .92rem; line-height: 1.45;
  background: var(--bg); border-left: 4px solid var(--accent); color: var(--text);
}
.movie-brief-credit { margin: 0; font-size: .72rem; color: var(--text-soft); text-align: right; }
.movie-brief-credit a { color: inherit; }
.movie-brief-compact .movie-brief-summary { font-size: .86rem; }
.dc-vibe .movie-brief-chip { background: color-mix(in srgb, #ec4899 16%, var(--bg)); border-color: #ec489966; }
.dc-vibe .movie-brief-summary { border-left-color: #ec4899; }

.game-shell .game-emoji,
.game-shell .game-head-art,
.game-shell .game-help-illustration,
.game-shell .rps-countdown,
.game-shell .ws-tile,
.game-shell .imp-reveal.imposter .imp-role,
.game-shell .imp-result.win .imp-role,
.game-shell .imp-result.lose .imp-role {
  color: var(--game-ui-accent-ink);
}
.resume-game > .ui-glyph { color: var(--text); }
.game-shell :is(.imp-btn, .rps-btn, .t48-btn, .simon-btn, .ws-btn, .wam-btn) {
  border-color: var(--game-ui-primary);
  background: var(--game-ui-primary);
  color: var(--game-ui-primary-ink);
}