/* Superficies biseladas y estados comunes de los controles; los componentes definen sus variantes. */
/* Shared surface; dimensions and reading order stay with each existing component. */
:is(
  .mobile-dpad button,
  .mobile-tools .command,
  .playground > .dpad button,
  main[data-movement-docked="true"] > .dpad button,
  :where(#movement-menu-drawer) > .dpad button,
  #desktop-center,
  #desktop-clean,
  .panel :is(.vocabulary-buttons button, .english-buttons .command, .buttons .effect),
  .category-step,
  #activity-nav button,
  .game-header :is(#character-picker, #settings-toggle, #star-balance),
  .stage-toolbar :is(.zoom-controls, .mobile-zoom) button
) {
  position: relative;
  background: linear-gradient(180deg, var(--tile-top), var(--tile-face));
  border-color: var(--tile-edge);
  color: var(--tile-ink);
  box-shadow:
    inset 0 2px 0 #ffffffb0,
    0 3px 0 var(--tile-base);
  font-weight: 700;
}
/* The direction pad reads as one blue controller, with separate utility keys. */
:is(
  .mobile-dpad button[data-direction],
  .playground > .dpad button[data-direction],
  main[data-movement-docked="true"] > .dpad button[data-direction],
  :where(#movement-menu-drawer) > .dpad button[data-direction],
  .stage-toolbar :is(.zoom-controls, .mobile-zoom) button
) {
  --tile-top: var(--ad-blue-top);
  --tile-face: var(--ad-blue-face);
  --tile-edge: var(--ad-blue-edge);
  --tile-base: var(--ad-blue-base);
  --tile-ink: var(--ad-blue-ink);
}
:is(#mobile-center, #desktop-center) {
  --tile-top: var(--ad-gold-top);
  --tile-face: var(--ad-gold-face);
  --tile-edge: var(--ad-gold-edge);
  --tile-base: var(--ad-gold-base);
  --tile-ink: var(--ad-gold-ink);
}
:is(
  .panel :is(.vocabulary-buttons button, .english-buttons .command, .buttons .effect),
  .mobile-tools .command
)[aria-pressed="true"] {
  border-color: var(--ad-purple-edge);
  box-shadow:
    inset 0 0 0 1px var(--ad-purple-edge),
    inset 0 2px 0 #ffffff90,
    0 3px 0 var(--ad-purple-base);
}
:is(
    .panel :is(.vocabulary-buttons button, .english-buttons .command, .buttons .effect),
    .mobile-tools .command
  )[aria-pressed="true"]::after {
  content: "✓";
  position: absolute;
  right: 5px;
  top: 4px;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #7250ad;
  color: var(--color-surface);
  font:
    800 12px/1 "Trebuchet MS",
    sans-serif;
}
/* A press lowers the bevel, without moving surrounding controls or the stage. */
:is(
    .mobile-dpad button,
    .mobile-tools .command,
    .playground > .dpad button,
    main[data-movement-docked="true"] > .dpad button,
    :where(#movement-menu-drawer) > .dpad button,
    .panel :is(.vocabulary-buttons button, .english-buttons .command, .buttons .effect),
    .category-step,
    #activity-nav button,
    .game-header :is(#character-picker, #settings-toggle, #star-balance)
  ):not(:disabled):active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 0 #ffffff60,
    0 1px 0 var(--tile-base);
}
/* Feedback keeps its meaning: green answers and gold rewards are never restyled as selection. */
:is(.practice-choices button, .riddle-choices button) {
  box-shadow:
    inset 0 2px 0 #ffffffa0,
    0 3px 0 #d2c7e8;
}
:is(.settings-panel, #character-options, #activity-hub) {
  border-color: var(--ad-line);
}
@media (orientation: landscape) and (max-height: 500px) {
  :is(
    .mobile-dpad button,
    .mobile-tools .command,
    .panel :is(.vocabulary-buttons button, .english-buttons .command, .buttons .effect)
  ) {
    box-shadow:
      inset 0 1px 0 #ffffffa0,
      0 2px 0 var(--tile-base);
  }
}
html[data-appearance="dark"] :is(.mobile-controls, .category-selector) {
  background: var(--ad-paper);
  border-color: var(--ad-line);
}
html[data-appearance="dark"]
  :is(
    .mobile-dpad button,
    .mobile-tools .command,
    .playground > .dpad button,
    main[data-movement-docked="true"] > .dpad button,
    :where(#movement-menu-drawer) > .dpad button,
    .panel :is(.vocabulary-buttons button, .english-buttons .command, .buttons .effect),
    .category-step,
    #activity-nav button,
    .game-header :is(#character-picker, #settings-toggle, #star-balance),
    .stage-toolbar :is(.zoom-controls, .mobile-zoom) button
  ) {
  background: linear-gradient(180deg, var(--tile-top), var(--tile-face));
  border-color: var(--tile-edge);
  color: var(--tile-ink);
  box-shadow:
    inset 0 1px 0 #ffffff28,
    0 3px 0 var(--tile-base);
}
html[data-appearance="dark"]
  :is(
    .panel :is(.vocabulary-buttons button, .english-buttons .command, .buttons .effect),
    .mobile-tools .command
  )[aria-pressed="true"] {
  border-color: var(--ad-purple-edge);
  box-shadow:
    inset 0 0 0 1px var(--ad-purple-edge),
    0 3px 0 var(--ad-purple-base);
}
@media (forced-colors: active) {
  :is(button, .mobile-controls, .category-selector, #activity-hub .hub-card) {
    box-shadow: none !important;
    background: Canvas !important;
    color: ButtonText !important;
  }
}