/* 玩家端统一体验增强层：放在各模块样式之后加载。 */
:root {
  --surface-glass: rgba(19, 27, 46, 0.82);
  --surface-glass-strong: rgba(20, 28, 48, 0.94);
  --line-glow: rgba(83, 215, 255, 0.22);
  --focus-ring: 0 0 0 3px rgba(53, 215, 255, 0.24);
}

html {
  color-scheme: dark;
  -webkit-tap-highlight-color: transparent;
  text-size-adjust: 100%;
}

body {
  overscroll-behavior: none;
  background-attachment: fixed;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
[role="button"],
a,
input,
select,
textarea {
  touch-action: manipulation;
}

button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

::selection {
  color: #fff;
  background: rgba(124, 92, 255, 0.72);
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 92, 255, 0.62) rgba(255, 255, 255, 0.04);
}

*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.03); }
*::-webkit-scrollbar-thumb {
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(124, 92, 255, 0.8), rgba(53, 215, 255, 0.64));
}

.card,
.prep-top,
.prep-bottom,
.layout-board-wrap,
.craft-list,
.deploy-panel,
.focus-bar,
.log-drawer {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 12px 34px rgba(0, 0, 0, 0.16);
}

.btn-primary,
.deploy-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(135deg, #7357ff 0%, #7068ff 46%, #29c9f4 100%);
  box-shadow: 0 9px 24px rgba(95, 78, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.btn-primary::after,
.deploy-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 55%);
  transition: opacity var(--t-fast) var(--ease);
}

.btn-ghost,
.chip,
.tab,
.home-hud-settings {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.chip,
.tab {
  transition:
    color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}

.chip.active,
.tab.active {
  box-shadow: inset 0 0 0 1px rgba(124, 92, 255, 0.2), 0 4px 14px rgba(91, 63, 224, 0.16);
}

input,
select,
textarea,
.input-wrap {
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.input-wrap:focus-within {
  border-color: rgba(53, 215, 255, 0.68);
  background: rgba(53, 215, 255, 0.055);
  box-shadow: var(--focus-ring);
}

input::placeholder,
textarea::placeholder { color: var(--text-4); }

.num,
.badge,
.qty-badge,
.prep-stat-chip b,
.unit-hp,
.usk-bar,
.fb-hp b {
  font-variant-numeric: tabular-nums;
}

.toast {
  top: max(18px, calc(env(safe-area-inset-top, 0px) + 10px));
  width: max-content;
  min-width: 120px;
  text-align: center;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.modal-mask,
.sheet-mask,
.overlay,
.settings-mask {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.modal-panel,
.sheet-panel,
.settings-panel,
.skill-detail-panel,
.hero-detail-panel,
.item-detail-panel {
  border-color: rgba(255, 255, 255, 0.13);
  background: linear-gradient(180deg, rgba(29, 38, 63, 0.98), rgba(14, 20, 35, 0.98));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.empty-state,
.sd-empty,
.loading-text {
  color: var(--text-2);
}

.skeleton-block {
  position: relative;
  overflow: hidden;
}

.skeleton-block::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.09), transparent);
  animation: playerSkeleton 1.45s ease-in-out infinite;
}

@keyframes playerSkeleton {
  to { transform: translateX(100%); }
}

@media (hover: hover) and (pointer: fine) {
  button:not(:disabled):hover,
  [role="button"]:hover,
  .chip:hover,
  .equip-slot:hover,
  .prep-item:hover,
  .level-row:hover {
    filter: brightness(1.1);
  }
  .btn-primary:not(:disabled):hover::after,
  .deploy-btn:not(:disabled):hover::after { opacity: 1; }
  .chip:hover,
  .equip-slot:hover,
  .prep-item:hover { transform: translateY(-1px); }
}

@media (max-width: 360px) {
  :root { --fs-body: 12px; }
  .page { padding-left: 8px; padding-right: 8px; }
  .toast { max-width: calc(100% - 24px); }
}

@media (prefers-contrast: more) {
  :root {
    --text-2: rgba(255, 255, 255, 0.86);
    --text-3: rgba(255, 255, 255, 0.7);
    --line-1: rgba(255, 255, 255, 0.18);
    --line-2: rgba(255, 255, 255, 0.28);
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-block::after { animation: none; }
  button,
  .chip,
  .equip-slot,
  .prep-item { transform: none !important; }
}

/* —— 账号页 —— */
.brand {
  margin-top: max(24px, calc(env(safe-area-inset-top, 0px) + 18px));
}

.brand-badge {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background-color: rgba(19, 27, 46, 0.8);
  background-size: 78%;
  background-repeat: no-repeat;
  background-position: center;
}

.brand-badge.art-ready .brand-fallback { display: none; }

.brand + .card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.032)),
    rgba(15, 22, 38, 0.82);
}

.code-btn { min-height: 40px; }
.links a { min-height: 36px; display: inline-flex; align-items: center; }

/* —— 首页与底部导航 —— */
.home-hud {
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.home-tabbar {
  gap: 6px;
  border-top-color: rgba(83, 215, 255, 0.13);
  background: linear-gradient(180deg, rgba(13, 20, 35, 0.86), rgba(8, 13, 24, 0.98) 44%);
}

.home-tabbar button {
  position: relative;
  min-height: 44px;
  transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.home-tabbar button.active::before {
  content: "";
  position: absolute;
  left: 24%;
  right: 24%;
  top: -5px;
  height: 2px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--primary), var(--accent));
  box-shadow: 0 0 9px rgba(53, 215, 255, 0.62);
}

.home-tabbar button:active { transform: scale(0.96); }

.home-quick .chip {
  min-height: 36px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

/* —— 备战 / 仓库 —— */
.prep-section-head {
  min-height: 42px;
  padding-inline: 2px;
}

.prep-bottom,
.prep-top { background-color: rgba(12, 19, 34, 0.72); }

.prep-item,
.warehouse-slot,
.equip-slot {
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), filter var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.equip-slot.filled,
.prep-item:not(.empty) {
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--rar, var(--primary)) 12%, transparent), 0 5px 14px rgba(0, 0, 0, 0.18);
}

/* —— 布阵 —— */
.layout-status {
  min-height: 40px;
  background: var(--surface-glass);
  backdrop-filter: blur(12px);
}

.layout-board-wrap {
  border-color: var(--line-glow);
  background: rgba(9, 16, 29, 0.95);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.battle-cell {
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.battle-cell.melee { box-shadow: inset 0 0 9px rgba(53, 215, 255, 0.025); }
.battle-cell.ranged { box-shadow: inset 0 0 9px rgba(124, 92, 255, 0.025); }

/* —— 合成 —— */
.craft-anvil {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 26px rgba(0, 0, 0, 0.18);
}

.craft-card {
  background: linear-gradient(145deg, rgba(24, 34, 57, 0.9), rgba(12, 19, 33, 0.88));
  border-color: rgba(255, 255, 255, 0.11);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.16);
}

.craft-row-icon,
.craft-row-emoji {
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 12px rgba(124, 92, 255, 0.1);
}

/* —— 出击 —— */
.level-row,
.chapter-row {
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), filter var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.level-row:not(.locked) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 5px 16px rgba(0, 0, 0, 0.13);
}

.level-row:not(.locked):active { transform: scale(0.985); }
.level-row.locked { filter: saturate(0.55); }

/* —— 战斗 —— */
.battle-header,
.focus-bar,
.log-drawer {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.formation-board {
  box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.24), 0 8px 22px rgba(0, 0, 0, 0.18);
}

.focus-bar {
  border-color: rgba(83, 215, 255, 0.14);
  background: linear-gradient(180deg, rgba(25, 35, 58, 0.94), rgba(13, 20, 35, 0.95));
}

.unit-hp,
.unit-skill-bars {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.75));
}

@media (max-height: 640px) {
  .brand { margin-top: 14px; margin-bottom: 14px; }
  .brand-badge { width: 58px; height: 58px; border-radius: 18px; margin-bottom: 9px; }
  .brand h1 { font-size: 23px; }
  .brand + .card { padding-top: 17px; padding-bottom: 17px; }
}