/* Commercial visual refresh — Temple Adventurer Guild */
:root {
  --guild-night: #080d19;
  --guild-ink: #111a2b;
  --guild-panel: rgba(18, 27, 43, .94);
  --guild-panel-soft: rgba(27, 39, 59, .9);
  --guild-gold: #d8b56a;
  --guild-gold-bright: #f3d58c;
  --guild-blue: #3f78d8;
  --guild-blue-bright: #70a5ff;
  --guild-paper: #efe4c8;
  --guild-muted: #9aa8bd;
  --guild-danger: #d86565;
  --guild-line: rgba(216, 181, 106, .24);
  --guild-shadow: 0 18px 48px rgba(0, 0, 0, .42);
}

html { background: var(--guild-night); overflow-x: hidden; }
body {
  color: #e9edf5;
  background:
    radial-gradient(circle at 50% -18%, rgba(63, 120, 216, .24), transparent 38%),
    linear-gradient(135deg, #070b14 0%, #10182a 48%, #080d19 100%);
  font-family: "Noto Sans TC", sans-serif;
  overflow-x: hidden;
}

button, input, select { font: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--guild-blue-bright);
  outline-offset: 2px;
}

/* Title screen: the concentric seal is the single signature element. */
.title-stage::before,
.title-stage::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(68vw, 680px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.title-stage::before {
  border: 1px solid rgba(216, 181, 106, .26);
  box-shadow: inset 0 0 70px rgba(63, 120, 216, .14), 0 0 70px rgba(63, 120, 216, .09);
  background: repeating-conic-gradient(from 4deg, transparent 0 13deg, rgba(216,181,106,.07) 14deg 15deg);
  animation: guild-seal-turn 36s linear infinite;
}
.title-stage::after {
  width: min(46vw, 460px);
  border: 1px dashed rgba(216, 181, 106, .2);
  animation: guild-seal-turn 24s linear infinite reverse;
}
@keyframes guild-seal-turn { to { transform: translate(-50%, -50%) rotate(360deg); } }

.game-title {
  position: relative;
  z-index: 1;
  color: var(--guild-paper);
  font-family: "Noto Serif TC", serif;
  font-weight: 900;
  letter-spacing: .18em;
  text-indent: .18em;
  text-shadow: 0 3px 0 #49391e, 0 12px 36px rgba(0,0,0,.68);
}
.game-subtitle {
  position: relative;
  z-index: 1;
  color: var(--guild-gold);
  letter-spacing: .3em;
  font-size: 11px;
}
.title-menu { position: relative; z-index: 2; }

.btn, .btn-small, .btn-save, .tab-btn, .gm-btn {
  border-radius: 6px;
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease, color .16s ease;
}
.btn-primary {
  border: 1px solid var(--guild-gold);
  color: #111827;
  background: linear-gradient(180deg, var(--guild-gold-bright), #bc8e3e);
  box-shadow: 0 8px 24px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.48);
}
.btn:hover, .btn-small:hover, .btn-save:hover, .tab-btn:hover { transform: translateY(-1px); }
.btn:active, .btn-small:active, .btn-save:active, .tab-btn:active { transform: translateY(1px); }

/* Main HUD resembles an engraved adventurer nameplate. */
.game-shell { background: transparent; }
.hud-bar {
  position: relative;
  min-height: 88px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--guild-line);
  background: linear-gradient(180deg, rgba(26,37,57,.98), rgba(10,16,28,.98));
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
.hud-bar::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 3px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--guild-gold), transparent);
  opacity: .62;
}
#hud-name { font-family: "Noto Serif TC", serif; color: var(--guild-paper); letter-spacing: .08em; }
.hud-job-tag { color: var(--guild-gold-bright); border-color: var(--guild-line); }
.hud-gold { color: var(--guild-gold-bright) !important; font-variant-numeric: tabular-nums; }

.bar-track {
  height: 15px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 3px;
  background: rgba(0,0,0,.44);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.45);
}
.bar-fill { border-radius: 2px; }
.bar-text { font-size: 9px; letter-spacing: .06em; text-shadow: 0 1px 2px #000; }

/* Battle is the visual stage; the side panel becomes the guild ledger. */
.game-body { gap: 0; background: #080d17; }
.battle-panel {
  position: relative;
  border-right: 1px solid var(--guild-line);
  background: #080d17;
}
.btn-mute { position: absolute !important; left: auto !important; right: 12px !important; }
.battle-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 90px rgba(2,5,11,.72);
  z-index: 1;
}
.battle-scene, .combat-log, .btn-mute, .idle-report-panel, .ally-panel, .gm-panel { position: relative; z-index: 2; }
.map-bg-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,13,25,.04) 38%, rgba(8,13,25,.72) 100%);
  pointer-events: none;
}
.player-sprite img {
  filter: drop-shadow(0 14px 12px rgba(0,0,0,.6)) drop-shadow(0 0 12px rgba(80,130,220,.22));
}
.monster-card, .mob-card { filter: drop-shadow(0 10px 12px rgba(0,0,0,.48)); }

.combat-log {
  border-top: 1px solid var(--guild-line);
  background: rgba(8,13,23,.92);
  backdrop-filter: blur(8px);
}
.log-pane { border-color: rgba(255,255,255,.08); }
.log-pane-head { color: var(--guild-gold); letter-spacing: .12em; font-size: 10px; text-transform: uppercase; }

.side-panel {
  background:
    linear-gradient(90deg, rgba(216,181,106,.05), transparent 18px),
    var(--guild-ink);
}
.tab-nav {
  padding: 8px 8px 0;
  gap: 2px;
  border-bottom: 1px solid var(--guild-line);
  background: rgba(8,13,23,.62);
}
.tab-btn {
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-bottom: 0;
  color: var(--guild-muted);
  background: transparent;
}
.tab-btn.active {
  color: var(--guild-paper);
  border-color: var(--guild-line);
  background: var(--guild-panel-soft);
  box-shadow: inset 0 2px var(--guild-gold);
}
.tab-content { padding: 14px; }
.panel-title {
  margin: 0 0 12px;
  color: var(--guild-paper);
  font-family: "Noto Serif TC", serif;
  letter-spacing: .08em;
}
.panel-title::after {
  content: "";
  display: block;
  width: 52px;
  height: 2px;
  margin-top: 7px;
  background: var(--guild-gold);
}

.item-card, .shop-item, .skill-row, .achievement-row, .map-card, .derived-grid,
.idle-rec, .modal-box, .create-stats-panel {
  border-color: var(--guild-line) !important;
  background: var(--guild-panel-soft) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.16);
}
.modal-overlay { background: rgba(2,5,10,.78); backdrop-filter: blur(7px); }
.modal-box { box-shadow: var(--guild-shadow); }

/* SVG-free job progression board. */
.job-tree-wrap {
  padding: 18px 14px;
  border: 1px solid var(--guild-line);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(7,12,22,.9), rgba(17,26,43,.9));
  overflow-x: auto;
}
.job-tree-board { min-width: 460px; display: grid; gap: 42px; }
.job-tree-tier {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--tier-count), minmax(104px, 1fr));
  gap: 12px;
}
.job-tree-tier-linked::before {
  content: "";
  position: absolute;
  top: -42px;
  left: 50%;
  width: 1px;
  height: 42px;
  background: linear-gradient(var(--guild-gold), rgba(216,181,106,.18));
}
.tree-card {
  position: relative;
  min-height: 76px;
  padding: 9px 7px 7px;
  display: grid;
  place-items: center;
  gap: 2px;
  border: 1px solid rgba(154,168,189,.22);
  border-radius: 7px;
  color: #dce3ef;
  background: #151f31;
}
.tree-card:disabled { cursor: default; }
.tree-card.tree-node-unlocked { border-color: rgba(216,181,106,.65); background: #202a3f; }
.tree-card.tree-node-current {
  border-color: var(--guild-gold-bright);
  color: var(--guild-paper);
  background: linear-gradient(145deg, #44351c, #202a3f 70%);
  box-shadow: 0 0 0 2px rgba(216,181,106,.12), 0 10px 24px rgba(0,0,0,.28);
}
.tree-card:not(:disabled):hover { transform: translateY(-2px); border-color: var(--guild-gold-bright); }
.tree-icon { font-size: 21px; line-height: 1; }
.tree-label { font-size: 12px; font-weight: 700; }
.tree-cta { color: var(--guild-gold-bright); font-size: 9px; }
.tree-wip { color: var(--guild-muted); font-size: 9px; }

@media (max-width: 860px) {
  .hud-bar { min-height: 0; padding: 8px 10px; }
  .hud-right { gap: 5px; min-width: 0; max-width: 100%; }
  .hud-right .btn-save { min-width: 42px; min-height: 38px; padding: 6px 8px; }
  .volume-controls { width: 100%; min-width: 0; max-width: 100%; order: 5; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 5px 8px; }
  .volume-label { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px; }
  .volume-label input[type="range"] { width: 100%; min-width: 0; }
  .btn-mute { left: 8px !important; right: auto !important; }
  .battle-panel { min-height: 390px; border-right: 0; border-bottom: 1px solid var(--guild-line); }
  .battle-scene { min-height: 248px; }
  .combat-log { height: 110px; }
  .side-panel { min-height: 440px; }
  /* 桌機是三欄 grid；手機若只加 flex-wrap 不會生效，仍會排成三、四列。
     明確切成單列橫滑，讓玩家不用先跨過整片分頁牆才看得到內容。 */
  .tab-nav {
    display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    scrollbar-width: thin; padding-bottom: 2px; overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
  }
  .tab-btn { flex: 0 0 auto; min-height: 44px; padding-inline: 12px; scroll-snap-align: start; }
  .tab-content { max-height: none; min-height: 360px; padding: 12px 10px 24px; }
  .item-card, .shop-item, .skill-row { min-height: 48px; }
}

@media (max-width: 420px) {
  .title-glow { inset: 0; width: auto; max-width: none; }
  .title-stage::before { width: 92vw; }
  .title-stage::after { width: 68vw; }
  .game-title { font-size: clamp(34px, 11vw, 46px); letter-spacing: .1em; text-indent: .1em; }
  .game-subtitle { max-width: 82vw; margin-inline: auto; font-size: 9px; line-height: 1.7; letter-spacing: .2em; }
  .btn { min-height: 48px; }
  .hud-left { flex-basis: calc(100% - 120px); }
  .hud-right { flex-basis: 100%; justify-content: flex-start; }
  .hud-gold { margin-right: auto; }
  .hud-bars { gap: 4px; }
  .battle-panel { min-height: 370px; }
  .battle-scene { min-height: 230px; }
  .combat-log { height: 104px; }
  .log-pane:nth-child(3) { display: none; }
  .log-pane { width: 50%; }
  .btn-idle-report { width: 48px; height: 48px; font-size: 22px; }
  .idle-report-panel, .ally-panel { left: 8px; right: 8px; width: auto; }
  .job-tree-board { min-width: 340px; }
  .job-tree-tier { grid-template-columns: repeat(var(--tier-count), minmax(92px, 1fr)); gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}