/* ==========================================================================
   兵營 / 抽卡 共用樣式（等級色由 JS 設定 --tier-color / --tier-bg / --tier-glow）
   ========================================================================== */
:root{ color-scheme: dark; }
body{
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(234,179,8,.10), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(124,58,237,.12), transparent 60%),
    var(--bg);
}
a{ color:#93c5fd; text-decoration:none; }

.page-top{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:10px 16px; background:rgba(11,18,32,.92); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border);
}
.page-top .title{ font-weight:800; font-size:1.1rem; letter-spacing:.04em; }
.page-top .nav{ display:flex; gap:8px; flex-wrap:wrap; }
.page-top .btn{ text-decoration:none; }

.panel{
  background:rgba(17,24,39,.88); border:1px solid var(--border); border-radius:16px;
  padding:16px; box-shadow:var(--shadow); margin-bottom:14px;
}
.panel h2{ margin:0 0 6px; }
.muted{ color:var(--muted); font-size:.92rem; }
.empty-note{ text-align:center; padding:28px 12px; color:var(--muted); }

/* ---- 等級徽章 ---- */
.tier-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; padding:2px 8px; border-radius:8px;
  font-weight:900; font-size:.8rem; letter-spacing:.06em; color:var(--tier-text, #fff);
  background:var(--tier-bg); box-shadow:0 0 10px var(--tier-glow);
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}
.tier-badge.lg{ min-width:58px; font-size:1rem; padding:4px 10px; }

/* ---- 篩選列 ---- */
.filters{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.seg{ display:inline-flex; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.seg button{
  background:transparent; color:var(--text); border:0; padding:7px 12px; cursor:pointer; font:inherit;
}
.seg button + button{ border-left:1px solid var(--border); }
.seg button[aria-pressed="true"]{ background:#1e3a8a; color:#fff; }
.chip-row{ display:flex; flex-wrap:wrap; gap:6px; }
.chip-btn{
  border:1px solid var(--border); background:#0f172a; color:var(--text);
  padding:5px 10px; border-radius:999px; cursor:pointer; font:inherit; font-size:.88rem;
}
.chip-btn[aria-pressed="true"]{ border-color:var(--tier-color, #60a5fa); box-shadow:0 0 0 1px var(--tier-color, #60a5fa) inset; }
.search{
  flex:1; min-width:160px; background:#0b1220; color:var(--text);
  border:1px solid var(--border); border-radius:10px; padding:8px 10px; font:inherit;
}

/* ---- 等級區塊與單位卡 ---- */
.tier-section{ margin-top:18px; }
.tier-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.tier-head h3{ margin:0; font-size:1.1rem; }
.tier-head .muted{ flex-basis:100%; }

.unit-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
.unit-card{
  position:relative; display:flex; flex-direction:column; gap:6px; text-align:left;
  background:linear-gradient(180deg, rgba(15,23,42,.95), rgba(11,18,32,.95));
  border:1px solid var(--tier-border, #334155); border-radius:14px; padding:10px;
  color:var(--text); font:inherit; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.unit-card:hover, .unit-card:focus-visible{ transform:translateY(-3px); box-shadow:0 8px 22px var(--tier-glow); outline:none; }
.unit-card.locked .pic{ filter:grayscale(.85) brightness(.6); }
.unit-card .pic{
  width:100%; aspect-ratio:1; border-radius:10px; object-fit:cover; background:#0b1020;
  border:1px solid rgba(255,255,255,.08);
}
.unit-card .tier-badge{ position:absolute; top:14px; left:14px; }
.unit-card .own{
  position:absolute; top:14px; right:14px; font-size:.72rem; padding:2px 7px; border-radius:999px;
  background:rgba(16,185,129,.9); color:#fff;
}
.unit-card.locked .own{ background:rgba(71,85,105,.9); }
.unit-card .name{ font-weight:800; font-size:1.02rem; }
.unit-card .role{ font-size:.8rem; color:var(--muted); line-height:1.4; }
.unit-card .kind{ font-size:.75rem; color:var(--tier-color); }
.route-tag{
  display:inline-block; align-self:flex-start; font-size:.74rem; font-weight:700;
  padding:1px 8px; border-radius:999px; color:var(--route-color);
  border:1px solid var(--route-color); background:rgba(15,23,42,.8);
}

/* ---- 詳細資料對話框 ---- */
dialog.unit-dialog{
  width:min(720px, calc(100vw - 32px)); max-height:calc(100vh - 32px);
  padding:0; border:1px solid var(--tier-border, #334155); border-radius:18px;
  background:#0b1220; color:var(--text); box-shadow:0 20px 60px var(--tier-glow);
}
dialog.unit-dialog::backdrop{ background:rgba(2,6,23,.75); }
.dlg-head{ display:flex; gap:14px; align-items:center; padding:16px; background:var(--tier-bg); }
.dlg-head img{ width:96px; height:96px; border-radius:14px; object-fit:cover; border:2px solid rgba(255,255,255,.6); background:#0b1020; flex:none; }
.dlg-head h2{ margin:0 0 4px; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.5); }
.dlg-head .sub{ color:rgba(255,255,255,.9); font-size:.9rem; }
.dlg-close{
  margin-left:auto; align-self:flex-start; background:rgba(0,0,0,.35); color:#fff;
  border:0; border-radius:10px; width:36px; height:36px; font-size:1.2rem; cursor:pointer;
}
.dlg-body{ padding:16px; display:grid; gap:14px; }
.dlg-body h4{ margin:0 0 6px; color:var(--tier-color); }
.dlg-body p{ margin:0; color:var(--text); }

.stat-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px 16px; }
.stat{ display:grid; grid-template-columns:44px 1fr 44px; align-items:center; gap:8px; font-size:.88rem; }
@media (max-width:480px){
  .stat-grid{ grid-template-columns:1fr; }
  .dlg-head{ flex-wrap:wrap; }
  .dlg-head img{ width:72px; height:72px; }
}
.stat .bar{ height:8px; border-radius:99px; background:#1e293b; overflow:hidden; }
.stat .bar i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--tier-color), #fff); }
.stat .v{ text-align:right; font-variant-numeric:tabular-nums; }
.kv{ display:flex; flex-wrap:wrap; gap:8px; }
.kv span{ background:#111827; border:1px solid var(--border); border-radius:8px; padding:4px 8px; font-size:.85rem; }
.feature{ background:#111827; border:1px solid var(--border); border-radius:10px; padding:8px 10px; margin-bottom:6px; line-height:1.6; }
.feature b{ color:#fde68a; }

/* ==========================================================================
   抽卡頁
   ========================================================================== */
.banner{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, rgba(220,38,38,.35), rgba(217,119,6,.25) 50%, rgba(124,58,237,.35));
}
.banner .featured{ display:flex; gap:10px; margin:10px 0; flex-wrap:wrap; }
.banner .featured figure{ margin:0; text-align:center; font-size:.85rem; }
.banner .featured img{ width:72px; height:72px; border-radius:12px; object-fit:cover; border:2px solid #fde047; box-shadow:0 0 14px rgba(253,224,71,.5); display:block; }
.draw-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:10px; }
.coins-row{ margin-top:6px; font-size:1.05rem; }
.coins-row b{ color:#fde68a; font-size:1.2rem; font-variant-numeric:tabular-nums; }
.btn.big{ padding:12px 22px; font-size:1.05rem; font-weight:800; border-radius:12px; }
.btn.gold{ background:linear-gradient(180deg, #f59e0b, #b45309); border-color:#fbbf24; color:#fff; }
.btn.purple{ background:linear-gradient(180deg, #8b5cf6, #5b21b6); border-color:#a78bfa; color:#fff; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

.pity{ min-width:200px; }
.pity .track{ height:10px; border-radius:99px; background:#1e293b; overflow:hidden; margin-top:4px; }
.pity .track i{ display:block; height:100%; background:linear-gradient(90deg, #22d3ee, #a78bfa); transition:width .4s ease; }

/* 抽卡舞台 */
.stage{
  position:relative; min-height:300px; border-radius:16px; overflow:hidden;
  background:radial-gradient(circle at 50% 40%, #1e1b4b, #020617 70%);
  border:1px solid var(--border); padding:18px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
}
.stage-hint{ color:var(--muted); text-align:center; }
.stage .skip{ position:absolute; top:10px; right:10px; z-index:5; }
.flash{ position:absolute; inset:0; pointer-events:none; opacity:0; z-index:4; }
.flash.go{ animation:flash 1s ease-out; }
@keyframes flash{ 0%{opacity:0} 15%{opacity:.85} 100%{opacity:0} }

.deck{ display:grid; gap:12px; justify-content:center; width:100%; }
.deck.one{ grid-template-columns:minmax(150px, 190px); }
.deck.ten{ grid-template-columns:repeat(5, minmax(0, 120px)); }
@media (max-width:640px){ .deck.ten{ grid-template-columns:repeat(3, minmax(0, 110px)); } }

.gcard{ perspective:900px; aspect-ratio:3/4; animation:deal .45s cubic-bezier(.2,.8,.3,1.2) both; animation-delay:var(--deal-delay, 0s); }
@keyframes deal{ from{ opacity:0; transform:translateY(-60px) scale(.6) rotate(-8deg); } to{ opacity:1; transform:none; } }
.gcard .inner{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .6s cubic-bezier(.3,.7,.3,1); }
.gcard.flipped .inner{ transform:rotateY(180deg); }
.gcard .face{ position:absolute; inset:0; backface-visibility:hidden; border-radius:12px; overflow:hidden; }
.gcard .back{
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 6px, transparent 6px 12px),
    linear-gradient(160deg, #7f1d1d, #1e1b4b);
  border:2px solid #b45309; display:flex; align-items:center; justify-content:center;
  font-size:2rem; font-weight:900; color:#fde68a; text-shadow:0 0 12px rgba(253,224,71,.6);
}
/* 翻牌前依結果等級發光，製造期待感 */
.gcard.charged .back{ animation:charge .5s ease-in-out infinite alternate; box-shadow:0 0 18px var(--tier-glow); border-color:var(--tier-color); }
@keyframes charge{ from{ transform:translateZ(0) scale(1); } to{ transform:translateZ(0) scale(1.04); filter:brightness(1.25); } }
.gcard .front{
  transform:rotateY(180deg); background:var(--tier-bg); border:2px solid var(--tier-color);
  box-shadow:0 0 22px var(--tier-glow); display:flex; flex-direction:column;
}
.gcard .front img{ width:100%; flex:1; min-height:0; object-fit:cover; }
.gcard .front .cap{ padding:5px 6px; text-align:center; background:rgba(0,0,0,.55); }
.gcard .front .cap b{ display:block; font-size:.92rem; color:#fff; }
.gcard .front .tier-badge{ position:absolute; top:6px; left:6px; font-size:.72rem; min-width:34px; }
.gcard.miss .front{ background:linear-gradient(160deg, #1f2937, #0f172a); border-color:#475569; box-shadow:none; align-items:center; justify-content:center; color:var(--muted); font-weight:700; }
.gcard.revealed.top .front{ animation:pop .7s ease-out; }
@keyframes pop{ 0%{ transform:rotateY(180deg) scale(1); } 40%{ transform:rotateY(180deg) scale(1.12); } 100%{ transform:rotateY(180deg) scale(1); } }

.result-summary{ width:100%; text-align:center; }
.result-summary .chips{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:6px; }

/* 機率表 */
table.odds{ width:100%; border-collapse:collapse; font-size:.92rem; }
table.odds th, table.odds td{ padding:8px 6px; border-bottom:1px solid var(--border); text-align:center; }
table.odds th{ color:var(--muted); font-weight:600; }
table.odds td:first-child, table.odds th:first-child{ text-align:left; }
table.odds tfoot td{ color:var(--muted); }
.rules{ margin:10px 0 0; padding-left:20px; line-height:1.8; color:var(--text); }
.rules li::marker{ color:#fbbf24; }

.pool-strip{ display:flex; flex-wrap:wrap; gap:6px; }
.pool-strip img{ width:44px; height:44px; border-radius:8px; object-fit:cover; border:2px solid var(--tier-color); }

@media (prefers-reduced-motion: reduce){
  .gcard, .gcard .inner, .gcard .front, .gcard.charged .back, .flash.go{ animation:none !important; transition:none !important; }
}