/*
  Local UI theme layer.
  Keep structural layout in ../styles.css. Put frequently swapped skins here so
  visual iteration mostly means replacing these variables or the matching assets.
*/

:root {
  --theme-welcome-button-normal: url("../assets/ui/button-skins/welcome-flat-20260621-normal.png");
  --theme-welcome-button-hover: url("../assets/ui/button-skins/welcome-flat-20260621-hover.png");
  --theme-welcome-button-pressed: url("../assets/ui/button-skins/welcome-flat-20260621-pressed.png");
  --theme-welcome-button-disabled: url("../assets/ui/button-skins/welcome-flat-20260621-disabled.png");

  --theme-battle-answer-normal: url("../assets/ui/button-skins/battle-answer-long-normal-20260621.png");
  --theme-battle-answer-hover: url("../assets/ui/button-skins/battle-answer-long-hover-20260621.png");
  --theme-battle-answer-pressed: url("../assets/ui/button-skins/battle-answer-long-pressed-20260621.png");

  --theme-upgrade-answer-frame: url("../assets/ui/upgrade-answer-panel-frame.png");
  --theme-battle-frame: url("../assets/ui/battle-frame-vine-border-clean.png");
}

/* Welcome gate buttons: isolated here because these are often replaced as one set. */
#welcomeLoginBtn,
#welcomeContinueBtn {
  border-image: none !important;
  background-image: none !important;
}

#welcomeLoginBtn,
#welcomeContinueBtn {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38), transparent 38%),
    linear-gradient(180deg, #ffd94f 0%, #f4b220 100%) !important;
}

@media (hover: hover) {
  #welcomeLoginBtn:hover:not(:disabled),
  #welcomeContinueBtn:hover:not(:disabled) {
    filter: brightness(1.06);
  }
}

#welcomeLoginBtn:active:not(:disabled),
#welcomeContinueBtn:active:not(:disabled) {
  transform: translateY(3px);
}

#welcomeLoginBtn:disabled,
#welcomeContinueBtn:disabled {
  filter: saturate(0.55);
}

/* Battle answer buttons: keep this surface stable while iterating art thickness. */
.choice-panel .answer-grid button {
  border-image-source: var(--theme-battle-answer-normal) !important;
}

@media (hover: hover) {
  .choice-panel .answer-grid button:hover:not(:disabled) {
    border-image-source: var(--theme-battle-answer-hover) !important;
  }
}

.choice-panel .answer-grid button:active:not(:disabled),
.choice-panel .answer-grid button.choice-correct,
.choice-panel .answer-grid button.choice-correct:disabled,
.choice-panel .answer-grid button.choice-wrong,
.choice-panel .answer-grid button.choice-wrong:disabled {
  border-image-source: var(--theme-battle-answer-pressed) !important;
}

.choice-panel .answer-grid button:disabled:not(.choice-correct):not(.choice-wrong) {
  border-image-source: var(--theme-battle-answer-normal) !important;
}

/* Upgrade answer frame: outer ornate frame can be changed without touching modal layout. */
.upgrade-modal.answering .upgrade-card {
  border-image-source: var(--theme-upgrade-answer-frame) !important;
}

/* Battle canvas frame: decorative frame only; canvas drawing remains in app.js. */
.battle-canvas-frame::after {
  background-image: var(--theme-battle-frame) !important;
}