/* Shared Filipika presentation. Game boards and their state colours stay local. */
:root {
  color-scheme: light;
  --filipika-paper: #fcfaf6;
  --filipika-plum: #310f2f;
  --filipika-purple: #8624b1;
  --filipika-purple-dark: #64168e;
  --filipika-lavender: #efe3fa;
  --filipika-muted: #59485a;
  --filipika-border: #e4dce4;
  --muted: var(--filipika-muted);
  --border: var(--filipika-border);
  color: var(--filipika-plum);
  background: var(--filipika-paper);
  font-family: 'DM Sans', system-ui, sans-serif;
}

body, body[data-game] {
  --game-accent: var(--filipika-purple);
  --game-soft: var(--filipika-lavender);
  color: var(--filipika-plum);
  background: var(--filipika-paper);
  font-family: 'DM Sans', system-ui, sans-serif;
}

h1, h2, h3, .game-brand-copy strong, .vs-brand-copy strong,
.level-picker strong, .vs-level strong, .game-profile-option strong {
  font-family: 'Nunito', 'DM Sans', sans-serif;
  font-weight: 900;
}

/* The compact identity keeps the game name and home route easy to find. */
.top, .vs-top {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #fcfaf6f5;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.game-utility-view h1, #game-title, #profile-picker-title, #leaderboard-title {
  scroll-margin-top: 112px;
}

.top .filipika-game-brand, .vs-brand.filipika-game-brand,
.wh-brand.filipika-game-brand {
  min-width: 0;
  color: var(--filipika-plum);
}

.filipika-game-art {
  overflow: hidden;
  background: var(--filipika-paper);
  border-radius: 16px;
  flex-shrink: 0;
}

.filipika-game-art img, .wh-brand > .filipika-game-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.filipika-game-brand > .filipika-game-art { width: 60px; height: 60px; }

/* Keep the original game artwork, framed like a small playing card. */
.filipika-game-brand > .filipika-game-card-icon {
  box-sizing: border-box;
  padding: 3px;
  border: 1px solid #ead8c2;
  border-radius: 14px;
  background: linear-gradient(145deg, #fffaf0, #fff0dc);
  box-shadow: 0 3px 0 #e8d6bf;
}


.filipika-game-brand :is(.game-brand-copy, .vs-brand-copy),
.wh-brand.filipika-game-brand > span { min-width: 0; gap: 3px; }
.filipika-game-brand strong { font-size: 24px; white-space: normal; line-height: 1.1; }
.filipika-game-brand small { font-size: 13px; color: var(--filipika-muted); }
.filipika-game-brand:hover small, .wh-brand b { color: var(--filipika-purple); }

:is(.menu-toggle, .vs-menu-toggle, .game-menu-toggle) {
  color: var(--filipika-purple);
  border-radius: 12px;
}
:is(.menu-toggle, .vs-menu-toggle, .game-menu-toggle):hover {
  color: var(--filipika-purple-dark);
  background: var(--filipika-lavender);
}
:is(.header-menu, .vs-menu, .game-menu) {
  border-color: var(--filipika-border);
  box-shadow: 0 12px 32px #310f2f16;
}
:is(.header-menu, .vs-menu, .game-menu) a { color: var(--filipika-plum); }
:is(.header-menu, .vs-menu, .game-menu) a:hover {
  color: var(--filipika-purple-dark);
  background: var(--filipika-lavender);
}
.vs-menu-icon, .game-menu-symbol, .game-menu a:last-child .game-menu-symbol {
  color: var(--filipika-purple);
}
.game-menu small { color: var(--filipika-muted); }

.intro h1, .vs-heading h1, .wh-hero h1 { color: var(--filipika-plum); }
.intro p:not(.kicker), .vs-heading p, .wh-hero p,
.thinking-instructions, .instructions, .ready-instructions p,
.vs-footnote, .game-utility-view p, .game-utility-card > small {
  color: var(--filipika-muted);
}
.kicker, .vs-kicker, .wh-eyebrow, .round-label,
.back-to-game, .vs-back-to-game, .game-back, .game-new-player,
.wh-hero h1 em { color: var(--filipika-purple); }

/* Surface treatments do not alter the dimensions of the fitted play layouts. */
.card, .game-profile-card, .game-utility-card, .game-result-card,
.vs-leaderboard, .wh-game {
  color: var(--filipika-plum);
  border-color: var(--filipika-border);
  background: #fff;
  box-shadow: 0 8px 28px #310f2f08;
}
.game-utility-view { color: var(--filipika-plum); }
.game-profile-heading > span, .vs-section-title > span, .wh-steps b {
  background: var(--filipika-lavender);
  color: var(--filipika-purple-dark);
}
.game-profile-card > p, .game-profile-option span,
.game-profile-form label, .game-ranking-list small,
.vs-leaderboard > p, .vs-leaderboard small, .vs-level small {
  color: var(--filipika-muted);
}
.game-profile-option {
  border-color: var(--filipika-border);
  background: var(--filipika-paper);
  color: var(--filipika-plum);
}
.game-profile-option[aria-pressed="true"] {
  border-color: var(--filipika-purple);
  background: var(--filipika-lavender);
}
.game-profile-option:hover:not(:disabled) { border-color: var(--filipika-purple); }
.game-profile-picker .game-profile-arrow { color: var(--filipika-purple); }
.game-profile-picker .game-new-player {
  border-color: var(--filipika-border);
  background: var(--filipika-paper);
}
.game-profile-form { border-color: var(--filipika-border); }
.game-profile-form input, .game-profile-form select, .game-rank-filter select {
  border-color: #cdbbce;
  color: var(--filipika-plum);
  background: #fff;
}

/* Only explicit action classes get a brand fill; coloured play keys are excluded. */
.primary, .game-profile-form button, .wh-start:not(.secondary), .robot-run {
  border-color: var(--filipika-purple);
  color: #fff;
  background: var(--filipika-purple);
}
.primary:hover:not(:disabled), .game-profile-form button:hover:not(:disabled),
.wh-start:not(.secondary):hover:not(:disabled), .robot-run:not(:disabled):hover {
  background: var(--filipika-purple-dark);
  border-color: var(--filipika-purple-dark);
}
.robot-run { box-shadow: 0 4px 0 var(--filipika-purple-dark); }
.secondary, .wh-start.secondary, .robot-edit button {
  color: var(--filipika-purple-dark);
  border-color: #cdbbce;
  background: var(--filipika-paper);
}
.secondary:hover:not(:disabled), .wh-start.secondary:hover:not(:disabled),
.robot-edit button:hover:not(:disabled) { background: var(--filipika-lavender); }

.game-start-button, .vs-control, .vs-control.stopping {
  color: #fff;
  background: var(--filipika-purple);
  border-color: var(--filipika-lavender);
  box-shadow: 0 5px 0 var(--filipika-purple-dark), 0 10px 20px #8624b120;
  font-family: 'Nunito', 'DM Sans', sans-serif;
}
.game-start-button:hover:not(:disabled), .vs-control:hover:not(:disabled),
.vs-control.stopping:hover:not(:disabled) {
  background: var(--filipika-purple-dark);
  box-shadow: 0 5px 0 #480e69, 0 10px 20px #8624b120;
}
.game-start-button:active:not(:disabled), .vs-control:active:not(:disabled) {
  box-shadow: 0 2px 0 var(--filipika-purple-dark);
}
.game-start-button:disabled, .vs-control:disabled { box-shadow: none; }

.level-picker button, .vs-level, .wh-range button {
  color: var(--filipika-plum);
  border-color: var(--filipika-border);
  background: var(--filipika-paper);
}
.level-picker small, .vs-level span { color: var(--filipika-muted); }
.level-picker button[aria-pressed="true"], .vs-level.selected,
.wh-range button[aria-pressed="true"] {
  color: #fff;
  background: var(--filipika-purple);
  border-color: var(--filipika-purple);
  box-shadow: none;
}
.level-picker button[aria-pressed="true"] small,
.vs-level.selected :is(span, small) { color: #fff; }
.level-picker button:hover:not(:disabled), .vs-level:hover:not(:disabled),
.wh-range button:hover:not(:disabled) { border-color: var(--filipika-purple); }
.wh-range-buttons { background: var(--filipika-lavender); }
.level-picker button:disabled, .vs-level:disabled { opacity: .6; }

.score, .stars-score, .game-stats > div, .answer-history {
  background: #f5eef9;
}
.score strong, .stars-score strong, .game-stats strong:not([data-urgent="true"]),
.result-grid strong { color: var(--filipika-purple-dark); }
.score span, .game-stats span, .result-grid span { color: var(--filipika-muted); }
.thinking-summary { background: var(--filipika-lavender); }
.game-board { border-color: var(--filipika-border); background: var(--filipika-paper); }
.game-result-card strong { color: var(--filipika-purple-dark); }
.vs-leaderboard-row b { color: var(--filipika-plum); }
.game-ranking-list li, .vs-leaderboard-row { background: var(--filipika-paper); color: var(--filipika-plum); }
.game-ranking-list li.current, .vs-leaderboard-row.current, .leaderboard li.current {
  outline-color: var(--filipika-purple);
  background: var(--filipika-lavender);
}
.vs-leaderboard .vs-personal-best { color: var(--filipika-purple-dark); background: var(--filipika-lavender); }
.vs-rank { color: var(--filipika-purple); }

/* Dice keep their faces and red/green outcomes against a plum stage. */
.vs-arena { background: var(--filipika-plum); box-shadow: 0 14px 36px #310f2f18; }
.vs-stage { background: radial-gradient(ellipse at 50% 0%, #794c83, #4c244f 48%, #310f2f); }
.vs-attempts { background: var(--filipika-lavender); color: var(--filipika-plum); }
.vs-attempts strong { color: var(--filipika-purple-dark); }
.vs-arena .vs-section-title > span { color: var(--filipika-purple-dark); background: var(--filipika-lavender); }

/* The piano and its demo/correct/wrong keys retain their existing colours. */
/* Card backs are decorative; revealed and matched animals keep their state colours. */
body .memory-card:not([data-shown="true"]):not([data-matched="true"]) {
  border-color: #69208e;
  background: repeating-linear-gradient(45deg, #8624b1 0 8px, #8e30b8 8px 16px);
  color: var(--filipika-paper);
  box-shadow: 0 2px 0 var(--filipika-purple-dark);
}

.wh-header { border-color: var(--filipika-border); background: #fcfaf6f2; }
.wh-hero { grid-template-columns: 1fr auto; padding-inline: 8px; }
.wh-bird { width: clamp(110px, 19vw, 180px); border-radius: 22px; mix-blend-mode: multiply; }
.wh-score strong, .wh-score > span:first-child strong { color: var(--filipika-purple-dark); }
.wh-range legend, .wh-range-hint, .wh-help, .wh-local-note,
.wh-switch, .wh-status p, .wh-phase, .wh-steps span, .wh-footer { color: var(--filipika-muted); }
.wh-status h2, .wh-steps strong { color: var(--filipika-plum); }
.wh-switch input:checked + .wh-switch-track { background: var(--filipika-purple); }
footer { color: var(--filipika-muted); }

/* A small, shared credit after each game; fitted play modes keep their own visibility rules. */
body footer.game-footer {
  margin: 24px 0 0;
  padding: 16px 12px;
  border-top: 1px solid var(--filipika-border);
  color: var(--filipika-muted);
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.6;
  text-align: center;
  overflow-wrap: break-word;
}

/* Focus stays visible across the different original game style families. */
body :is(a, button, input, select, summary):focus-visible,
.game-profile-card :focus-visible, .game-utility-view :focus-visible,
.wh-switch input:focus-visible + .wh-switch-track {
  outline-color: var(--filipika-purple);
}
.game-start-button:focus-visible { outline-color: var(--filipika-purple); }

/* Keyboard users can bypass the repeated identity and player controls. */
.game-skip-link {
  position: fixed;
  top: 8px;
  left: 12px;
  z-index: 100;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 10px;
  color: #fff;
  background: var(--filipika-purple-dark);
  font-weight: 750;
  transform: translateY(calc(-100% - 16px));
}
.game-skip-link:focus { transform: none; }
#challenge-title, #game-content { scroll-margin-top: 112px; }

@media (max-width: 520px) {
  .filipika-game-brand strong { font-size: 22px; }
  .wh-hero { gap: 10px; }
  .wh-bird { width: 110px; border-radius: 16px; }
}

/* Live fitted boards retain compact padding with a more readable identity. */
html:is(.pexeso-fit, .ocko-fit, .slova-fit, [data-architekt-active="true"])
  .filipika-game-brand > .filipika-game-art { width: 48px; height: 48px; }
html:is(.pexeso-fit, .ocko-fit, .slova-fit, [data-architekt-active="true"])
  .filipika-game-brand strong { font-size: clamp(18px, 2.4vw, 20px); }
html:is(.pexeso-fit, .ocko-fit, .slova-fit, [data-architekt-active="true"])
  .filipika-game-brand small { font-size: 13px; }
.attempt-sync-status {margin:10px 8px 4px;color:var(--filipika-muted,#59485a);font-size:.78rem;line-height:1.45;max-width:32ch;}

/* Parent-only backup tools use the same compact controls across every game. */
.profile-key-tools{margin-block:1rem;padding:1rem;border:1px solid #e4d9ea;border-radius:18px;background:#fbf8fd;color:#39243c;text-align:left;font-size:1rem}
.profile-key-tools summary{min-height:44px;display:list-item;align-content:center;cursor:pointer;font-weight:800;color:#791aac}
.profile-key-tools p{font-size:.95rem;line-height:1.5}
.profile-key-actions,.profile-key-row{display:flex;gap:.65rem;flex-wrap:wrap;align-items:center;margin-block:.75rem}
.profile-key-tools button,.profile-key-tools select{min-height:44px;border:1px solid #cdb4df;border-radius:12px;padding:.55rem .9rem;background:#fff;color:#571b6b;font:inherit;cursor:pointer}
.profile-key-tools button:disabled{opacity:.6;cursor:wait}
.profile-key-row label{display:flex;align-items:center;gap:.6rem;flex:1;min-height:44px;font-weight:700}
.profile-key-row input{width:22px;height:22px;accent-color:#8c21bc}
.profile-key-status:empty{display:none}
.profile-key-tools :focus-visible{outline:3px solid #8c21bc;outline-offset:3px}
@media(max-width:480px){.profile-key-actions>*{flex:1}.profile-key-row select{max-width:100%}}