/* Minimal Valgardia control and card treatment for the player interface. */
#home-screen {
  --minimal-surface: #151b2b;
  --minimal-surface-raised: #1a2031;
  --minimal-line: #3a4358;
  --minimal-line-soft: #ffffff1a;
  --minimal-gold: #dfbd78;
  --minimal-violet: #a77bfa;
}

#home-screen:is([data-route="hero"], [data-route="group"], [data-route="bag"], [data-route="quests"])
  :is(.primary-button, .small-button, .wide-link, .stat-add, .title-picker select,
    .filter-grid select, .filter-grid input, .target-select select),
#home-screen :is(.layout-toggle, .logout-button) {
  border-radius: 3px;
  box-shadow: none;
}

#home-screen:is([data-route="hero"], [data-route="group"], [data-route="bag"], [data-route="quests"]) .primary-button {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid #b08bfa;
  color: #fff;
  background: #875fda;
  font-weight: 700;
  transition: background-color .16s, border-color .16s, color .16s;
}

#home-screen:is([data-route="hero"], [data-route="group"], [data-route="bag"], [data-route="quests"]) .primary-button:hover:not(:disabled) {
  transform: none;
  filter: none;
  border-color: #c5a6ff;
  background: #9870e8;
}

#home-screen:is([data-route="hero"], [data-route="group"], [data-route="bag"], [data-route="quests"]) .small-button {
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--minimal-line);
  color: #d8d6e3;
  background: var(--minimal-surface);
  transition: background-color .16s, border-color .16s, color .16s;
}

#home-screen:is([data-route="hero"], [data-route="group"], [data-route="bag"], [data-route="quests"]) .small-button:hover:not(:disabled),
#home-screen:is([data-route="hero"], [data-route="group"], [data-route="bag"], [data-route="quests"]) .wide-link:hover,
#home-screen:is([data-route="hero"], [data-route="group"], [data-route="bag"], [data-route="quests"]) .stat-add:hover:not(:disabled),
#home-screen .layout-toggle:hover,
#home-screen .logout-button:hover {
  border-color: #9b8559;
  color: #f0dfb7;
  background-color: #1d2231;
}

#home-screen:is([data-route="hero"], [data-route="group"], [data-route="bag"], [data-route="quests"]) .small-button.selected,
#home-screen:is([data-route="hero"], [data-route="group"], [data-route="bag"], [data-route="quests"]) .small-button[aria-pressed="true"] {
  border-color: var(--minimal-gold);
  color: #f1d99f;
  background: #b18c3b18;
}

#home-screen:is([data-route="hero"], [data-route="group"], [data-route="bag"], [data-route="quests"]) .wide-link {
  border-color: var(--minimal-line);
  color: #ddd9e8;
  background-color: var(--minimal-surface);
  transition: background-color .16s, border-color .16s, color .16s;
}

#home-screen:is([data-route="hero"], [data-route="group"], [data-route="bag"], [data-route="quests"]) .stat-add,
#home-screen :is(.layout-toggle, .logout-button) {
  border-color: var(--minimal-line);
  color: #d8d2ea;
  background: var(--minimal-surface);
}

#home-screen:is([data-route="hero"], [data-route="group"], [data-route="bag"], [data-route="quests"]) .stat-add {
  width: 36px;
  height: 36px;
  min-height: 36px;
  color: #d8c3ff;
  font-size: 1.1rem;
}

#home-screen:is([data-route="hero"], [data-route="group"], [data-route="bag"], [data-route="quests"]) .text-button {
  color: #c2a8f5;
}

#home-screen:is([data-route="hero"], [data-route="group"], [data-route="bag"], [data-route="quests"]) .text-button:hover:not(:disabled) {
  color: #e2d1ff;
}

#home-screen :is(button, select, input):focus-visible {
  outline: 2px solid var(--minimal-gold);
  outline-offset: 2px;
  box-shadow: none;
}

#home-screen .game-nav button {
  border-radius: 3px;
  transition: color .16s, background-color .16s;
}

#home-screen .game-nav button.active {
  color: #efd18e;
  background: #ba95431a;
}

#home-screen[data-route="hero"] :is(.hero-progression, .hero-attributes .stat-row,
  .hero-attributes .allocation-review, .hero-titles .panel) {
  border-color: #343d52;
  border-radius: 4px;
  background-color: var(--minimal-surface-raised);
  box-shadow: none;
}

#home-screen[data-route="hero"] .hero-attributes .stat-add {
  border-color: #46506a;
  background: #171d2d;
}

#home-screen[data-route="hero"] .hero-attributes .stat-add:hover:not(:disabled) {
  border-color: var(--minimal-gold);
  color: #f4dfad;
  background: #222638;
}

#home-screen[data-route="hero"] .hero-attributes .points-pill {
  border-radius: 3px;
}

#home-screen[data-route="group"] .social-group > .panel,
#home-screen[data-route="group"] .social-group > .party-member,
#home-screen[data-route="group"] .social-friends .friends-list,
#home-screen[data-route="group"] .social-friends .friend-row {
  border-radius: 4px;
  box-shadow: none;
}

#home-screen[data-route="group"] .social-group > .party-member {
  border: 1px solid var(--minimal-line-soft);
  background: var(--minimal-surface);
}

#home-screen[data-route="group"] .social-friends .friends-list {
  border-color: var(--minimal-line-soft);
  background: #0f1421;
}

#home-screen[data-route="group"] .social-friends .friend-row {
  border-color: #ffffff16;
  background: transparent;
}

#home-screen[data-route="group"] :is(.friend-profile img, .person-profile > img) {
  border-radius: 3px;
}

#home-screen[data-route="bag"] :is(.inventory-item, .potion-pouch, .mount-pouch, .potion-slot, .mount-card, .item-tile) {
  border-radius: 4px;
  box-shadow: none;
}

#home-screen[data-route="bag"] .inventory-item {
  border-color: #ffffff1a;
  border-left: 3px solid var(--rarity);
  background: var(--minimal-surface);
}

#home-screen[data-route="bag"] :is(.potion-pouch, .mount-pouch) {
  border-color: #3b4658;
  background-color: #121a25e8;
}

#home-screen[data-route="bag"] :is(.potion-slot, .mount-card) {
  border-color: color-mix(in srgb, var(--rarity, #8794aa) 60%, #414b60);
  background-color: #151c2b;
}

#home-screen[data-route="bag"] .item-tile {
  border-width: 1px;
  background: #101725;
}

#home-screen[data-route="bag"] .item-art {
  border-radius: 3px;
}

#home-screen[data-route="bag"] .filter-grid :is(select, input) {
  border-color: #3f485d;
  color: #e2dfeb;
  background: #141a29;
}

#home-screen[data-route="quests"] :is(.quest-card, .rules-card, .campaign-card, .campaign-active,
  .daily-missions, .daily-mission, .dungeons-banner) {
  border-radius: 4px;
  box-shadow: none;
}

#home-screen[data-route="quests"] .quest-card {
  border-color: #394157;
  background: #151b2b;
}

#home-screen[data-route="quests"] .quest-card.quest-locked {
  border-color: #ffffff16;
  background: #121724;
}

#home-screen[data-route="quests"] .quest-card.quest-done {
  border-color: #75c6ab55;
  background: #14221f;
}

#home-screen[data-route="quests"] .daily-missions {
  border-color: #9d814c66;
}

#home-screen[data-route="quests"] .daily-mission {
  border-color: #3b4356;
  background: #181e2e;
}

#home-screen[data-route="quests"] .daily-mission.completed,
#home-screen[data-route="quests"] .daily-mission.claimed {
  border-color: #5eda8c66;
}

/* Keep the artwork on region and dungeon cards; only simplify their frames. */
#home-screen[data-route="home"] :is(.exploration-buttons button, .region-activities .wide-link,
  .region-services .merchant-link, .hub-grid button, .desktop-community-chat) {
  border-radius: 3px;
  border-color: #3a4358;
  box-shadow: none;
}

#home-screen[data-route="home"] .exploration-buttons button:hover,
#home-screen[data-route="home"] .region-services .merchant-link:hover,
#home-screen[data-route="home"] .hub-grid button:hover {
  border-color: #a58ad0;
  box-shadow: none;
}

#home-screen[data-route="home"] .region-activities .dungeons-banner {
  background-image: linear-gradient(90deg, #100c14e8, #100c1470), url("assets/locations/dungeon-adventurers.png");
  background-position: center 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Guild screens use the same quiet frame, without flattening their artwork. */
#home-screen:is([data-route="guild"], [data-route="guild-directory"], [data-route="guild-vendor"])
  :is(button, select, input, textarea, .panel, .guild-directory-card, .guild-member,
    .guild-lineup label, .guild-default-icon, .guild-badge, .territory-badges button,
    .trade-chat-log, .trade-chat textarea, .guild-product) {
  border-radius: 3px;
  box-shadow: none;
}

#home-screen:is([data-route="guild"], [data-route="guild-directory"], [data-route="guild-vendor"])
  :is(.panel, .guild-member, .guild-lineup label, .guild-directory-card, .guild-product) {
  border-color: #3a4358;
}

#home-screen:is([data-route="guild"], [data-route="guild-directory"], [data-route="guild-vendor"])
  :is(button, select, input, textarea) {
  border-color: #3a4358;
}

#home-screen:is([data-route="guild"], [data-route="guild-directory"], [data-route="guild-vendor"])
  :is(.primary-button, .small-button, .wide-link) {
  border-radius: 3px;
  box-shadow: none;
}

#home-screen:is([data-route="guild"], [data-route="guild-directory"], [data-route="guild-vendor"])
  .primary-button {
  min-height: 42px;
  border-color: #a98be0;
  color: #fff;
  background-color: #7657b4;
}

#home-screen:is([data-route="guild"], [data-route="guild-directory"], [data-route="guild-vendor"])
  :is(.small-button, .wide-link) {
  border-color: #3a4358;
  color: #ddd9e8;
  background-color: #151b2b;
}

#home-screen:is([data-route="guild"], [data-route="guild-directory"], [data-route="guild-vendor"])
  :is(.primary-button, .small-button, .guild-directory-card, .wide-link):hover:not(:disabled) {
  border-color: #a58ad0;
  box-shadow: none;
}

/* Desktop chat: compact surfaces and fine borders, preserving the channel accent. */
@media (min-width: 801px) {
  html[data-layout="horizontal"] .desktop-community-chat {
    min-height: 64px;
    padding: 10px 14px;
    border: 1px solid #3a4358;
    border-radius: 3px;
    background: #151b2b;
    box-shadow: none;
  }

  html[data-layout="horizontal"] .desktop-community-chat:hover {
    border-color: #a58ad0;
    background: #1a2031;
  }

  html[data-layout="horizontal"] .desktop-community-chat.has-unread {
    border-color: #5bdc9b;
    box-shadow: none;
  }

  html[data-layout="horizontal"] :is(#chat-panel, .chat-panel) {
    border-color: #3a4358;
    border-radius: 4px;
    box-shadow: 0 12px 32px #0008;
  }

  html[data-layout="horizontal"] :is(#chat-panel, .chat-panel) .chat-tabs button,
  html[data-layout="horizontal"] #chat-form :is(select, textarea),
  html[data-layout="horizontal"] #chat-form .small-button,
  html[data-layout="horizontal"] #chat-panel .icon-button {
    border: 1px solid #3a4358;
    border-radius: 3px;
    box-shadow: none;
  }

  html[data-layout="horizontal"] :is(#chat-panel, .chat-panel) .chat-tabs button[aria-pressed="true"] {
    border-color: #9e7bda;
    background: #49356a;
  }

  html[data-layout="horizontal"] #chat-launcher {
    border-color: #59627a;
    border-radius: 3px;
    background: #151b2b;
    box-shadow: none;
  }
}

/* The login actions stay prominent; the rest of the form gets the restrained frame. */
#auth-screen .login-card {
  border-color: #3a4358;
  border-radius: 4px;
  background: #151b2bf2;
  box-shadow: 0 10px 32px #04071388;
}

#login-form::before,
#login-form::after {
  display: none;
}

#auth-screen .login-card input,
#auth-screen .login-card :is(.auth-error, #alpha-access-message),
#auth-screen #password-reset-modal {
  border-radius: 3px;
}

#auth-screen .login-card .primary-button {
  border-radius: 3px;
  box-shadow: inset 0 0 0 2px #b295ee35, 0 0 18px #9855f533;
}

#auth-screen #alpha-register-open {
  width: 100%;
  margin: 0;
  border: 1px solid #8d6bc2;
  border-radius: 3px;
  background: #201a30;
  color: #e3d1ff;
  font-weight: 700;
  text-decoration: none;
}

#auth-screen #alpha-register-open:hover:not(:disabled) {
  border-color: #c2a2f4;
  background: #2d2341;
}

/* Galauter's shop: quiet frames around the NPC art, item art, and sale controls. */
#home-screen[data-route="merchant"] :is(.merchant-hero, .mount-food-shop, .reset-shop,
  .merchant-basket, .merchant-choice, .merchant-confirm, .merchant-rarity select,
  .merchant-grid .merchant-choice) {
  border-radius: 3px;
  box-shadow: none;
}

#home-screen[data-route="merchant"] .merchant-hero {
  border: 1px solid #3a4358;
}

#home-screen[data-route="merchant"] :is(.mount-food-shop, .reset-shop, .merchant-basket) {
  border-color: #3a4358;
  background-color: #151b2b;
}

#home-screen[data-route="merchant"] .merchant-choice {
  border-color: #3a4358;
  background-color: #151b2b;
}

#home-screen[data-route="merchant"] .merchant-choice.selected {
  border-color: #8bedb0;
  background-color: #1d352e;
}

#home-screen[data-route="merchant"] .merchant-rarity select {
  border-color: #3a4358;
  background-color: #141a29;
}

#home-screen[data-route="merchant"] .reset-shop-art {
  border-radius: 3px;
}

#home-screen[data-route="merchant"] :is(.primary-button, .small-button, .wide-link) {
  border-radius: 3px;
  box-shadow: none;
}

#home-screen[data-route="merchant"] .primary-button {
  border-color: #a98be0;
  background-color: #7657b4;
}

#home-screen[data-route="merchant"] :is(.small-button, .wide-link) {
  border-color: #3a4358;
  background-color: #151b2b;
}

#home-screen[data-route="merchant"] :is(.primary-button, .small-button, .wide-link):hover:not(:disabled) {
  border-color: #c2a2f4;
  box-shadow: none;
}

@media (max-width: 800px) {
  #home-screen[data-route="home"] :is(.exploration-buttons button, .region-activities .wide-link,
    .region-services .merchant-link, .hub-grid button) {
    border-radius: 3px;
    box-shadow: none;
  }
}

@media (max-width: 800px) {
  #home-screen:is([data-route="hero"], [data-route="group"], [data-route="bag"], [data-route="quests"]) .small-button {
    min-height: 44px;
  }

  #home-screen .game-nav button.active {
    box-shadow: inset 0 2px 0 var(--minimal-gold);
  }

  #home-screen[data-route="group"] .social-friends .friends-list {
    padding: 8px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #home-screen :is(.primary-button, .small-button, .wide-link, .game-nav button) {
    transition: none;
  }
}