/* Element Themes & Accents — 中彩度・ライトトーン系(S≈68%, L≈60% / 12lt+ 帯)に統一 */
.element-pyro { --elem-color: #de5454; --elem-glow: rgba(222, 84, 84, 0.25); }
.element-hydro { --elem-color: #54b4de; --elem-glow: rgba(84, 180, 222, 0.25); }
.element-anemo { --elem-color: #54deac; --elem-glow: rgba(84, 222, 172, 0.25); }
.element-electro { --elem-color: #9954de; --elem-glow: rgba(153, 84, 222, 0.25); }
.element-dendro { --elem-color: #a7de54; --elem-glow: rgba(167, 222, 84, 0.25); }
.element-cryo { --elem-color: #5495de; --elem-glow: rgba(84, 149, 222, 0.25); }
.element-geo { --elem-color: #debd54; --elem-glow: rgba(222, 189, 84, 0.25); }

/* HSR Elements */
.element-quantum { --elem-color: #5460de; --elem-glow: rgba(84, 96, 222, 0.25); }
.element-imaginary { --elem-color: #dec854; --elem-glow: rgba(222, 200, 84, 0.25); }
.element-physical { --elem-color: #94a3b8; --elem-glow: rgba(148, 163, 184, 0.25); } /* 意図的に無彩色寄り。他属性と揃えず維持 */

/* Typography & Font Settings from Design Revision */
:root {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #4ade80; /* lt12+（中彩度・ライトグリーン）基準値。実際の適用は index.html の body（背景/本文色/選択ハイライト）を参照 */
}
.font-mono {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Element badge (character element tag) — colored via the same --elem-color as the build card */
.char-element-badge {
    background: color-mix(in srgb, var(--elem-color, #818cf8) 20%, transparent);
    color: var(--elem-color, #818cf8);
    border-color: color-mix(in srgb, var(--elem-color, #818cf8) 40%, transparent);
}

/* Element glow box */
.element-glow {
    box-shadow: 0 0 40px var(--elem-glow, rgba(99, 102, 241, 0.12)), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Hide only the character strip scrollbar, retaining touch and keyboard scrolling. */
#character-tabs { scrollbar-width: none; }
#character-tabs::-webkit-scrollbar { display: none; }
#character-tabs .char-tab-btn { min-width:0; width:100%; }
#character-tabs .char-tab-btn > div { min-width:0; overflow-wrap:anywhere; }

/* Custom scrollbars */
.scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.4) transparent;
}
.scrollbar-thin::-webkit-scrollbar {
    height: 5px;
    width: 5px;
}
.scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.4);
    border-radius: 9999px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.7);
}

/* Game tabs active style - Rich gradient from Design Revision */
.game-tab.active {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.4);
}

/* Constellation active / locked */
.const-node {
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.2s;
}

.const-node.unlocked {
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #ffffff;
    border-color: #c084fc;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
}

.const-node.locked {
    background: rgba(15, 23, 42, 0.8);
    color: #64748b;
    border-color: rgba(255, 255, 255, 0.05);
}

/* Character button in selector */
.char-tab-btn {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.initial-roll-values { display: grid; gap: 3px; margin: 8px 0; padding: 7px 9px; border-radius: 6px; background: rgba(245,158,11,.07); font-size: 10px; color: #fbbf24; }
.initial-roll-values span { color: #94a3b8; }
.initial-roll-values b { font-weight: 500; overflow-wrap: anywhere; }
.roll-breakdown { margin-top: 6px; color: #94a3b8; font-size: 10px; }
.roll-breakdown summary { cursor: pointer; }
#view-mode-selector > div:first-child { flex-wrap: wrap; gap: 4px; }
.view-tool-tab { padding: 10px 16px; color: #94a3b8; font-size: 12px; font-weight: 700; white-space: nowrap; }
.view-tool-tab:hover { color: #e2e8f0; background: #131e31; border-radius: 8px; }
#artifacts-detailed-grid > div { background: #101929; border-color: #263246; }
#artifacts-detailed-grid .grid.grid-cols-3 { grid-template-columns: 1fr; gap: 4px; }
#artifacts-detailed-grid .grid.grid-cols-3 > div { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
#artifacts-detailed-grid .grid.grid-cols-3 > div > div:last-child { font-size: 10px; }
.rv-stat-disabled {
    opacity: 0.38;
    filter: grayscale(1);
}

.char-tab-btn.selected {
    border-color: #818cf8;
    background-color: rgba(99, 102, 241, 0.2);
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.3);
    transform: translateY(-2px);
}

/* Screen-adapted yellow-orange and light-green accents; image assets stay unchanged. */
:root {
    --page-bg: #101917;
    --panel-bg: #1b2925;
    --inset-bg: #14201c;
    --panel-border: #35483f;
    --text-main: #edf1e9;
    --text-muted: #a8b9af;
    --accent-warm: #dab16b;
    --accent-green: #a3c9ad;
}
body {
    background: radial-gradient(ellipse at 12% 0%, #2a393026, transparent 55%), var(--page-bg) !important;
    color: var(--text-main) !important;
    accent-color: #8fb79c;
}
::selection { background: #53785f; color: #fff; }
body [class*="bg-slate-900"], body [class*="bg-slate-800"] { background-color: var(--panel-bg); }
body [class*="bg-slate-950"] { background-color: var(--inset-bg); }
body [class*="border-slate-"] { border-color: var(--panel-border); }
body [class*="text-slate-3"], body [class*="text-slate-4"], body [class*="text-slate-5"] { color: var(--text-muted); }
body [class*="text-indigo-"], body [class*="text-purple-"], body [class*="text-emerald-"] { color: var(--accent-green); }
body [class*="text-amber-"], body [class*="text-yellow-"] { color: var(--accent-warm); }
body [class*="text-sky-"] { color: #b3cbc0; }
body [class*="border-indigo-"], body [class*="border-purple-"], body [class*="border-sky-"] { border-color: #587662; }
body [class*="bg-indigo-"], body [class*="bg-purple-"], body [class*="bg-emerald-"], body [class*="bg-sky-"] { background-color: #2c4838; }
body [class*="bg-amber-"] { background-color: #59482b; }
body button[class*="bg-indigo-600"], body #result-navigation button { background: #a3c9ad; color: #17271c; box-shadow: none; }
body [class*="bg-gradient-"] { background-image: linear-gradient(125deg, #293a30, #17241f); }
body .game-tab.active, body .const-node.unlocked { background: linear-gradient(125deg, #a3c9ad, #82a78e); color: #17271c; border-color: #b5d0b9; box-shadow: 0 3px 12px #6c997820; }
body .char-tab-btn.selected { background: #2b4234; border-color: #9bbc9f; box-shadow: 0 0 12px #8faf9520; }
body #artifacts-detailed-grid > div { background: var(--panel-bg); border-color: var(--panel-border); }
body .initial-roll-values { background: #dab16b0d; color: var(--accent-warm); }
body .initial-roll-values span { color: #c6b998; }
body .roll-breakdown { color: var(--accent-green); }
body .view-tool-tab { color: var(--text-muted); }
body .view-tool-tab:hover { background: #293e31; color: var(--text-main); }
body button:focus-visible, body a:focus-visible, body select:focus-visible, body input:focus-visible { outline: 2px solid var(--accent-warm); outline-offset: 3px; }
body #artifacts-detailed-grid .rv-stat-disabled { opacity: .65; }
body #build-card .rv-stat-disabled,
body .free-card-stage .rv-stat-disabled { opacity: 1 !important; }
body [class*="shadow-indigo-"], body [class*="shadow-purple-"] { --tw-shadow-color: #80a28b24; box-shadow: 0 3px 12px #80a28b18; }


/* ==========================================
   16:9 最適化 & 出力用スタイル
========================================== */
.export-desktop {
    width: 1920px !important;
    height: 1080px !important;
    max-width: 1920px !important;
    max-height: 1080px !important;
    aspect-ratio: 16 / 9 !important;
    box-sizing: border-box !important;
    padding: 36px 44px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    border-radius: 0 !important;
}

@media (max-width: 1023px) {
  .export-desktop {
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
    display: block !important;
  }
}

.export-desktop .grid.lg\:grid-cols-12 {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 32px !important;
    height: 100% !important;
    align-items: stretch !important;
}

.export-desktop .lg\:col-span-4 {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
}

.export-desktop #char-gacha-art {
    width: 280px !important;
    height: 280px !important;
}

.export-desktop #artifacts-list {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    flex-grow: 1 !important;
}

.export-desktop #artifacts-list > div {
    padding: 10px 14px !important;
}