/* Settings window v2: left navigation by module + one panel at a time. */
.settings-card { width: min(46rem, 94vw); max-width: 46rem; height: min(32rem, 90vh); display: flex; flex-direction: column; padding: 0; overflow: hidden; background: radial-gradient(ellipse 70% 40% at 50% 0, #38bdf81f, transparent 70%), linear-gradient(160deg, #16203a, #0c1426 70%); }
.settings-head { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.2rem .7rem; border-bottom: 1px solid #2a3b5c; flex: none; }
.settings-title { display: flex; align-items: center; gap: .7rem; }
.settings-title h2 { margin: 0; color: #f1f5f9; font: 800 1.05rem var(--font-pixel-ui); letter-spacing: .05em; }
.settings-title-icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .7rem; border: 1.5px solid #7dd3fc; background: radial-gradient(circle at 30% 25%, #bae6fd, #38bdf8 60%, #0369a1); color: #04283c; box-shadow: 0 0 1rem #38bdf877; }
.settings-title-icon svg { width: 1.4rem; height: 1.4rem; }
.settings-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 11rem minmax(0, 1fr); }
.settings-nav { display: flex; flex-direction: column; gap: .3rem; padding: .9rem .7rem; border-right: 1px solid #22324d; background: #0a1224aa; }
.settings-tab { display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem; border: 1px solid transparent; border-radius: .6rem; background: transparent; color: #8aa0c2; font: 700 .8rem var(--font-clean, inherit); text-align: left; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .15s; }
.settings-tab svg { width: 1.15rem; height: 1.15rem; flex: none; }
.settings-tab:hover { color: #e2e8f0; background: #ffffff0a; transform: translateX(2px); }
.settings-tab.is-on { color: #e0f2fe; border-color: #38bdf877; background: linear-gradient(90deg, #38bdf826, #38bdf80a); box-shadow: inset 3px 0 0 #38bdf8; }
.settings-tab.is-danger.is-on { color: #fecaca; border-color: #f8717177; background: linear-gradient(90deg, #ef444426, #ef44440a); box-shadow: inset 3px 0 0 #f87171; }
.settings-nav-foot { margin-top: auto; }
.settings-version-button { width: 100%; padding: .4rem .6rem; border: 1px solid #2a3b5c; border-radius: .5rem; background: #0d1729; color: #7c8ba3; font: 700 .62rem var(--font-pixel-ui); cursor: default; }
.settings-pane { overflow-y: auto; padding: 1rem 1.2rem 1.2rem; scrollbar-width: thin; scrollbar-color: #2e4063 transparent; }
.settings-panel { display: none; }
.settings-panel.is-on { display: block; animation: stIn .25s ease-out; }
@keyframes stIn { from { opacity: 0; transform: translateY(.4rem); } to { opacity: 1; transform: none; } }
.settings-panel h3 { margin: 0; color: #f8fafc; font: 800 1.1rem var(--font-pixel-ui); }
.st-lead { margin: .3rem 0 .9rem; color: #8aa0c2; font: 600 .8rem/1.4 var(--font-clean, inherit); }
.st-card { display: grid; gap: .8rem; margin-bottom: .8rem; padding: .85rem 1rem; border: 1px solid #2a3b5c; border-radius: .8rem; background: #0d1729cc; }
.st-card.is-danger { border-color: #f8717166; background: linear-gradient(180deg, #2a0f16aa, #0d1729cc); }
.st-note { margin: 0; color: #a9bad4; font: 600 .8rem/1.5 var(--font-clean, inherit); }
.st-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.st-row > span, .st-switch > span { display: grid; gap: .15rem; min-width: 0; }
.st-row b, .st-switch b { color: #e8f1ff; font: 700 .85rem var(--font-clean, inherit); }
.st-row small, .st-switch small { color: #8aa0c2; font: 600 .72rem/1.35 var(--font-clean, inherit); }
.st-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.st-btn { padding: .5rem .95rem; border-radius: .55rem; border: 1px solid #3a5280; background: #16233b; color: #dbe7fb; font: 700 .75rem var(--font-clean, inherit); cursor: pointer; white-space: nowrap; transition: transform .15s, border-color .15s, background .15s, box-shadow .15s; }
.st-btn:hover { transform: translateY(-1px); border-color: #7dd3fc; background: #1b2c4a; box-shadow: 0 0 .8rem #38bdf833; }
.st-btn.is-primary { border-color: #fbbf24; background: linear-gradient(180deg, #f5a524, #b45309); color: #1c1203; }
.st-btn.is-warn { border-color: #fb923c88; color: #fed7aa; }
.st-btn.is-danger { border-color: #f87171; background: linear-gradient(180deg, #dc2626, #7f1d1d); color: #fff; }
.st-btn.is-danger.confirming { animation: stPulse .8s ease-in-out infinite; }
@keyframes stPulse { 50% { box-shadow: 0 0 1.2rem #ef4444; } }
.st-btn[hidden] { display: none; }
.st-seg { display: inline-flex; border: 1px solid #3a5280; border-radius: .55rem; overflow: hidden; }
.st-seg button { padding: .4rem .8rem; border: 0; background: #101b30; color: #8aa0c2; font: 800 .68rem var(--font-pixel-ui); cursor: pointer; }
.st-seg button.is-on { background: #38bdf8; color: #04283c; }
/* switches */
.st-switch { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .8rem; cursor: pointer; }
.st-switch input { position: absolute; opacity: 0; pointer-events: none; }
.st-switch i { position: relative; width: 2.5rem; height: 1.4rem; border-radius: 1rem; background: #1b2740; border: 1px solid #3a5280; transition: background .2s, border-color .2s; flex: none; }
.st-switch i::after { content: ''; position: absolute; top: .15rem; left: .17rem; width: 1rem; height: 1rem; border-radius: 50%; background: #8aa0c2; transition: transform .2s, background .2s; }
.st-switch input:checked + i { background: #0e4a63; border-color: #38bdf8; }
.st-switch input:checked + i::after { transform: translateX(1.08rem); background: #7dd3fc; box-shadow: 0 0 .5rem #38bdf8; }
.st-switch input:focus-visible + i { outline: 2px solid #fbbf24; outline-offset: 2px; }
/* sliders (reuse range-modern look) */
.settings-pane .slider-group { display: grid; gap: .4rem; }
.settings-pane .slider-row { display: flex; align-items: center; justify-content: space-between; }
.settings-pane .slider-name { color: #e8f1ff; font: 700 .85rem var(--font-clean, inherit); }
.settings-pane .slider-pct { color: #7dd3fc; font: 800 .8rem var(--font-pixel-ui); }
/* profile */
.st-profile { display: flex; align-items: center; gap: 1rem; }
.st-profile img { width: 4rem; height: 4rem; object-fit: contain; image-rendering: pixelated; border-radius: .8rem; border: 2px solid #fbbf24; background: radial-gradient(circle at 50% 30%, #3a3017, #0b1222); }
.st-profile-info { display: grid; gap: .3rem; justify-items: start; }
.st-profile-info strong { color: #fff; font: 800 1.05rem var(--font-pixel-ui); }
.st-profile-info small { color: #8aa0c2; font: 700 .7rem var(--font-clean, inherit); }
.st-badge { padding: .12rem .55rem; border-radius: 2rem; border: 1px solid #94a3b855; background: #94a3b814; color: #cbd5e1; font: 800 .52rem var(--font-pixel-ui); letter-spacing: .06em; }
.st-badge.is-account { border-color: #4ade8077; background: #4ade8014; color: #86efac; }
.settings-foot { display: flex; justify-content: flex-end; padding: .7rem 1.2rem .9rem; border-top: 1px solid #22324d; flex: none; }
/* ---- visual preferences (classes on <html>) ---- */
html.pref-reduce-motion *, html.pref-reduce-motion *::before, html.pref-reduce-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
html.pref-no-shine :is(.exp-mode-card, .lb2-row, .btn-tower-fight, .daily-day, .mart-pack)::before, html.pref-no-shine :is(.exp-mode-card, .lb2-row, .btn-tower-fight, .daily-day, .mart-pack)::after, html.pref-no-shine .tower-fight-sparks, html.pref-no-shine .mart-pack-shine, html.pref-no-shine .account-sheen { animation: none !important; display: none !important; }
html.pref-contrast { --text-dim: #cbd5e1; }
html.pref-contrast :is(small, .st-lead, .mp-line2, .xp-card-text small, .journal-note) { color: #dbe4f3 !important; }
html.pref-contrast :is(.modal-card, .mart-section, .xp-panel, .st-card) { border-color: #5a7ab0 !important; }
html.pref-big-text :is(.tips-list li, .mp-line2, .mv-stats, .xp-row, .journal-body, .odds-note, .st-lead, .st-row small, .st-switch small, .settings-tab) { font-size: 115% !important; }
html.pref-no-tips .tower-tip-bubble { display: none !important; }
@media (max-width: 640px) { .settings-layout { grid-template-columns: 1fr; } .settings-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid #22324d; } .settings-nav-foot { display: none; } .settings-tab span { display: none; } }

.settings-card { height: min(37rem, 92vh); }

/* ================= v3: richer styling ================= */
.settings-card { width: min(50rem, 94vw); max-width: 50rem; box-shadow: 0 0 2.2rem #38bdf833, 0 1.5rem 3rem #000c; border-color: #3b82f6aa; }
.settings-card, .settings-card * { text-transform: none; }
.settings-title h2 { text-transform: uppercase; }
.settings-head { background: linear-gradient(90deg, #1c2b4d88, transparent 70%); }
/* nav */
.settings-nav { gap: .4rem; background: linear-gradient(180deg, #0c1530, #080e20); }
.settings-tab { --c: #38bdf8; position: relative; gap: .7rem; padding: .55rem .7rem; font: 700 .86rem var(--font-clean, inherit); letter-spacing: .01em; }
.settings-tab svg { width: 1.9rem; height: 1.9rem; padding: .42rem; border-radius: .55rem; background: color-mix(in srgb, var(--c) 16%, #0d1729); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); color: var(--c); box-sizing: border-box; transition: transform .2s, box-shadow .2s; }
.settings-tab:hover svg { transform: scale(1.08) rotate(-4deg); }
.settings-tab.is-on { border-color: color-mix(in srgb, var(--c) 55%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--c) 22%, transparent), color-mix(in srgb, var(--c) 4%, transparent)); box-shadow: inset 3px 0 0 var(--c), 0 0 1rem color-mix(in srgb, var(--c) 18%, transparent); color: #fff; }
.settings-tab.is-on svg { background: var(--c); color: #06121c; box-shadow: 0 0 .9rem color-mix(in srgb, var(--c) 70%, transparent); }
.settings-tab.is-danger { --c: #f87171; }
.settings-version-button { border-radius: .6rem; background: linear-gradient(180deg, #121e37, #0b1427); color: #fde68a; font: 800 .62rem var(--font-pixel-ui); letter-spacing: .06em; }
/* hero strip on each panel */
.st-hero { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; padding: .85rem 1rem; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); border-radius: .9rem; background: radial-gradient(ellipse at 0 50%, color-mix(in srgb, var(--c) 24%, transparent), transparent 65%), linear-gradient(180deg, #121d38, #0c1529); box-shadow: inset 0 1px #ffffff12; }
.st-hero .st-ico { width: 3rem; height: 3rem; border-radius: .8rem; }
.st-hero .st-ico svg { width: 1.6rem; height: 1.6rem; }
.st-hero h3 { margin: 0; color: #fff; font: 800 1.15rem var(--font-pixel-ui); text-transform: uppercase; letter-spacing: .04em; text-shadow: 0 0 .8rem color-mix(in srgb, var(--c) 60%, transparent); }
.st-hero p { margin: .25rem 0 0; color: #a9bad4; font: 500 .84rem/1.4 var(--font-clean, inherit); }
/* icon tiles */
.st-ico { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .65rem; color: var(--c, #38bdf8); border: 1px solid color-mix(in srgb, var(--c, #38bdf8) 45%, transparent); background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c, #38bdf8) 34%, #0d1729), color-mix(in srgb, var(--c, #38bdf8) 10%, #0a1224)); box-shadow: 0 0 .8rem color-mix(in srgb, var(--c, #38bdf8) 22%, transparent), inset 0 1px #ffffff1a; }
.st-ico svg { width: 1.3rem; height: 1.3rem; }
/* cards */
.st-card { gap: 0; padding: .3rem; border-radius: 1rem; border: 1px solid #2c4068; background: linear-gradient(180deg, #111c36, #0b1428); box-shadow: inset 0 1px #ffffff0e, 0 .3rem 1rem #0005; overflow: hidden; }
.st-card.is-danger { border-color: #f8717188; background: linear-gradient(180deg, #2a1119, #120d1b); }
.st-card > * { padding: .75rem .8rem; border-radius: .7rem; }
.st-card > * + * { border-top: 1px solid #ffffff0d; }
.st-card .slider-group { gap: .65rem; }
.st-row, .st-switch { gap: .9rem; }
.st-row { align-items: center; }
.st-row b, .st-switch b { color: #f1f6ff; font: 700 .92rem var(--font-clean, inherit); }
.st-row small, .st-switch small { color: #9fb2d0; font: 500 .8rem/1.45 var(--font-clean, inherit); }
.st-switch { grid-template-columns: auto minmax(0, 1fr) auto; transition: background .15s; }
.st-switch:hover { background: #ffffff08; }
.st-switch i { order: 3; }
.st-switch > .st-ico { order: 1; }
.st-switch > span:not(.st-ico) { order: 2; }
/* switch */
.st-switch i { width: 2.9rem; height: 1.6rem; background: linear-gradient(180deg, #131d33, #1c2946); border-color: #40598a; box-shadow: inset 0 2px 4px #0006; }
.st-switch i::after { top: .18rem; left: .2rem; width: 1.16rem; height: 1.16rem; background: linear-gradient(180deg, #b6c5dd, #7f93b3); box-shadow: 0 2px 4px #0008; }
.st-switch input:checked + i { background: linear-gradient(180deg, #0a5a7a, #0e7490); border-color: #67e8f9; box-shadow: inset 0 2px 4px #0005, 0 0 .9rem #22d3ee55; }
.st-switch input:checked + i::after { transform: translateX(1.28rem); background: linear-gradient(180deg, #ffffff, #bae6fd); box-shadow: 0 0 .6rem #67e8f9, 0 2px 4px #0006; }
/* sliders */
.settings-pane .slider-row { gap: .8rem; justify-content: flex-start; }
.settings-pane .slider-name { flex: 1; font: 700 .92rem var(--font-clean, inherit); color: #f1f6ff; }
.settings-pane .slider-pct { min-width: 3.4rem; padding: .2rem .55rem; border-radius: .5rem; border: 1px solid #38bdf866; background: #0a1a2e; color: #7dd3fc; text-align: center; font: 800 .74rem var(--font-pixel-ui); }
.settings-pane .range-modern { -webkit-appearance: none; appearance: none; height: .55rem; border-radius: 1rem; outline: 0; background: linear-gradient(90deg, #22d3ee, #38bdf8 var(--p, 50%), #1b2740 var(--p, 50%)); box-shadow: inset 0 1px 3px #0008; cursor: pointer; }
.settings-pane .range-modern::-webkit-slider-thumb { -webkit-appearance: none; width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 2px solid #fff; background: radial-gradient(circle at 35% 30%, #e0f7ff, #38bdf8 70%); box-shadow: 0 0 .8rem #38bdf8, 0 2px 4px #0008; transition: transform .15s; }
.settings-pane .range-modern::-webkit-slider-thumb:hover { transform: scale(1.18); }
.settings-pane .range-modern::-moz-range-thumb { width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 2px solid #fff; background: #38bdf8; box-shadow: 0 0 .8rem #38bdf8; }
/* buttons */
.st-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .6rem 1.1rem; border-radius: .7rem; border: 1px solid #4a6aa5; background: linear-gradient(180deg, #243a64, #16233f); color: #e8f1ff; font: 800 .8rem var(--font-clean, inherit); letter-spacing: .01em; box-shadow: inset 0 1px #ffffff26, 0 3px 0 #070d1c; transition: transform .15s, box-shadow .15s, filter .15s, border-color .15s; }
.st-btn:hover { transform: translateY(-2px); border-color: #7dd3fc; filter: brightness(1.12); box-shadow: inset 0 1px #ffffff30, 0 5px 0 #070d1c, 0 0 1rem #38bdf844; }
.st-btn:active { transform: translateY(1px); box-shadow: inset 0 1px #ffffff20, 0 1px 0 #070d1c; }
.st-btn.is-primary { border-color: #fde68a; background: linear-gradient(180deg, #fbbf24, #d97706); color: #2a1503; box-shadow: inset 0 1px #fff8, 0 3px 0 #7c3a05, 0 0 1rem #fbbf2455; }
.st-btn.is-primary:hover { box-shadow: inset 0 1px #fffa, 0 5px 0 #7c3a05, 0 0 1.4rem #fbbf2488; }
.st-btn.is-warn { border-color: #fb923c; background: linear-gradient(180deg, #5a3315, #2e1b0d); color: #fed7aa; }
.st-btn.is-danger { border-color: #fca5a5; background: linear-gradient(180deg, #ef4444, #991b1b); color: #fff; box-shadow: inset 0 1px #fff6, 0 3px 0 #450a0a, 0 0 .9rem #ef444444; }
.st-btn.is-danger:hover { box-shadow: inset 0 1px #fff8, 0 5px 0 #450a0a, 0 0 1.4rem #ef444488; }
.st-btn[aria-pressed="true"] { border-color: #f87171; color: #fecaca; background: linear-gradient(180deg, #4a1d28, #2a1019); }
.st-seg { padding: .2rem; border-radius: .75rem; border: 1px solid #40598a; background: #0a1224; box-shadow: inset 0 2px 4px #0006; gap: .15rem; }
.st-seg button { padding: .45rem .9rem; border-radius: .55rem; font: 800 .7rem var(--font-pixel-ui); transition: background .15s, color .15s, box-shadow .15s; }
.st-seg button:hover { color: #fff; }
.st-seg button.is-on { background: linear-gradient(180deg, #67e8f9, #0ea5e9); color: #04283c; box-shadow: 0 0 .9rem #38bdf877; }
/* profile + badges */
.st-profile { padding: 1rem; gap: 1.1rem; background: radial-gradient(ellipse at 0 50%, #fbbf2422, transparent 60%), linear-gradient(180deg, #131f3a, #0b1428); }
.st-profile img { width: 4.6rem; height: 4.6rem; border-radius: 1rem; box-shadow: 0 0 1.2rem #fbbf2455; }
.st-profile-info strong { font: 800 1.2rem var(--font-pixel-ui); text-transform: uppercase; }
.st-profile-info small { color: #a9bad4; font: 600 .8rem var(--font-clean, inherit); }
.st-badge { padding: .2rem .7rem; font: 800 .58rem var(--font-pixel-ui); }
.st-note { color: #bccbe3; font: 500 .9rem/1.55 var(--font-clean, inherit); }
.settings-foot { background: linear-gradient(180deg, transparent, #0a1224aa); }

/* Sentence case for descriptions (the game's global style capitalises everything) */
.settings-card :is(.st-hero p, .st-row small, .st-switch small, .st-row b, .st-switch b, .st-note, .slider-name, .settings-tab span, .st-btn, .st-profile-info small, .st-profile-info small *) { text-transform: none !important; }
.settings-card .st-hero h3, .settings-card .st-profile-info strong { text-transform: uppercase !important; }
.settings-card { height: min(40rem, 94vh); }

/* Data panel: action buttons sit under their description, full width, wrapping long confirmation texts */
.st-row:has(#btnHardReset), .st-row:has(#btnSyncPokeApiJs) { flex-wrap: wrap; }
.st-row:has(#btnHardReset) > span:not(.st-ico), .st-row:has(#btnSyncPokeApiJs) > span:not(.st-ico) { flex: 1 1 0; }
#btnHardReset, #btnSyncPokeApiJs { flex: 1 1 100%; width: 100%; white-space: normal; text-align: center; line-height: 1.3; min-height: 2.6rem; }
#btnHardReset.confirming { animation: stPulse .8s ease-in-out infinite; }
#btnSyncPokeApiJs { background: linear-gradient(180deg, #243a64, #16233f); color: #e8f1ff; }
.st-btn { white-space: normal; }
.st-event-log { display:grid; gap:.35rem; list-style:none; margin:.65rem 0 0; padding:0; }
.st-event-log li { display:flex; align-items:center; gap:.55rem; min-width:0; padding:.5rem .6rem; border:1px solid #2a3b5c; border-left:2px solid var(--event-color,#38bdf8); border-radius:.4rem; background:#0b1427; }
.st-event-log img,.st-log-marker { width:1.7rem; height:1.7rem; flex:none; object-fit:contain; image-rendering:pixelated; }
.st-log-marker { display:grid; place-items:center; color:var(--event-color,#38bdf8); }
.st-event-log li > div { display:grid; gap:.15rem; min-width:0; flex:1; }
.st-event-log strong { color:#edf5ff; font:700 .75rem var(--font-clean); overflow-wrap:anywhere; }
.st-event-log small { color:#9bb0ce; font:500 .65rem/1.35 var(--font-clean); }
.st-event-log time { color:#7188a8; font:600 .55rem var(--font-clean); white-space:nowrap; }
.st-event-log .st-log-empty { color:#8aa0c2; font:600 .75rem var(--font-clean); }
.settings-card #btnSyncPokeApiJs { background: linear-gradient(180deg, #2c4a7c, #19294a) !important; border: 1px solid #5b7fc0 !important; color: #e8f1ff !important; font: 800 .82rem var(--font-clean, inherit) !important; box-shadow: inset 0 1px #ffffff2e, 0 3px 0 #070d1c !important; border-radius: .7rem !important; }
.settings-card #btnHardReset { background: linear-gradient(180deg, #ef4444, #991b1b) !important; border: 1px solid #fca5a5 !important; color: #fff !important; font: 800 .82rem var(--font-clean, inherit) !important; box-shadow: inset 0 1px #fff6, 0 3px 0 #450a0a, 0 0 .9rem #ef444444 !important; border-radius: .7rem !important; text-shadow: 0 1px 0 #450a0a; }
.settings-card #btnSyncPokeApiJs:hover, .settings-card #btnHardReset:hover { filter: brightness(1.12); transform: translateY(-2px); }