/* Obsidian, tempered steel and restrained bronze. Static decoration only:
   no animated backdrop filters or additional work in the gameplay render loop. */
:root { --ui-ink: #0c1014; --ui-field: #14191f; --ui-metal: #786650; --ui-bronze: #c6a779; --ui-ivory: #e9e4d7; --ui-muted: #a5a5a3; }
.modal { background: radial-gradient(ellipse at 50% 32%, #18202845, #030508bc 85%); backdrop-filter: none; -webkit-backdrop-filter: none; padding: 22px; }
.panel { border-image: none; border: 1px solid #8c745473; padding: 30px; background: radial-gradient(ellipse at 22% 0, #67788a17, transparent 60%), linear-gradient(145deg, #161b20f7, #090c10fc 70%), url(../assets/ui/iron.webp) center / 360px; box-shadow: 0 24px 90px #000c, 0 0 0 4px #080b0ec9, inset 0 1px 0 #d6c6a326, inset 0 0 0 6px #02040735; border-radius: 3px; }
.panel::before { content: ''; position: absolute; inset: 8px; pointer-events: none; background: linear-gradient(#c6a779aa,#c6a779aa) left top/26px 1px no-repeat, linear-gradient(#c6a779aa,#c6a779aa) left top/1px 26px no-repeat, linear-gradient(#c6a779aa,#c6a779aa) right top/26px 1px no-repeat, linear-gradient(#c6a779aa,#c6a779aa) right top/1px 26px no-repeat, linear-gradient(#c6a77966,#c6a77966) left bottom/26px 1px no-repeat, linear-gradient(#c6a77966,#c6a77966) left bottom/1px 26px no-repeat, linear-gradient(#c6a77966,#c6a77966) right bottom/26px 1px no-repeat, linear-gradient(#c6a77966,#c6a77966) right bottom/1px 26px no-repeat; }
.panel h2 { color: var(--ui-ivory); letter-spacing: .015em; font-weight: 600; text-transform: none; text-shadow: 0 2px 5px #000; }
.panel-head { align-items: center; padding: 0 0 18px; border-bottom: 1px solid #af957332; margin-bottom: 20px; }
.panel-head .eyebrow { color: var(--ui-bronze); font-size: 10px; letter-spacing: .2em; margin-bottom: 5px; }
.panel .close { border: 1px solid #9a846147; background: linear-gradient(145deg,#262a2df0,#0d1115); border-radius: 2px; box-shadow: inset 0 1px 0 #f7e1bb15; margin: 0; width: 44px; height: 44px; font-size: 25px; }
.panel .close:hover { border-color: #c6a779; background: #272c31; filter: none; }
.btn, .btn.small, .btn.big, .btn-row .btn { border-image: none; border: 1px solid #8e7b5a70; background: linear-gradient(180deg,#252b30,#11161b); box-shadow: inset 0 1px 0 #ecd6b11c, 0 3px 8px #0005; color: #ddd6c5; text-transform: none; letter-spacing: .02em; border-radius: 2px; transition: border-color .15s, background .15s, color .15s; padding-inline: 22px; }
.btn:hover { filter: none; border-color: #c7aa7b; color: #fff1d6; background: linear-gradient(#353a3c,#191e22); }
.btn.primary { border-image: none; border-color: #b08357b8; color: #f3e6d1; background: radial-gradient(ellipse at 50% 0,#b0683c35,transparent 70%),linear-gradient(#5a3028,#301a1c); box-shadow: inset 0 1px 0 #f3d5ad2e, 0 3px 9px #0005; }
.btn.primary:hover { filter: none; border-color: #dcc191; background: linear-gradient(#703d30,#412222); }
.btn.primary .icon { color: #dfb487; }
.btn.danger { color: #c8988e; border-color: #81564c6b; background: linear-gradient(#2c2123,#171216); }
.btn:disabled { filter: none; opacity: .5; }
button:focus-visible, .btn:focus-visible { outline: 2px solid #d8b887; outline-offset: 3px; }
.text-button { color: #b1afa5; }
.panel .divider { background: none; height: 1px; width: 100%; border: 0; background-image: linear-gradient(90deg,transparent,#ac8e5e5c,transparent); }
/* Pause: a quiet shelter, with a distinct primary action and readable campaign state. */
#pause .compact { width: min(530px,94vw); padding: 30px 38px; gap: 14px; text-align: left; }
#pause .panel-crest { position: absolute; right: 26px; top: 28px; width: 76px; height: 76px; opacity: .55; filter: saturate(.45); transform: none; }
#pause .eyebrow { color: #c5ac84; font-size: 11px; letter-spacing: .14em; padding-right: 70px; }
#pause h2 { font-size: 39px; line-height: 1.15; margin: 0 0 5px; }
#pause .divider { margin: 0; }
.pause-stats { padding: 18px 4px; margin: 0; background: transparent; border-bottom: 1px solid #937d5736; box-shadow: none; gap: 12px; }
.pause-stats > div { align-items: flex-start; gap: 6px; }
.pause-stats > div + div { border-color: #7d725333; padding-left: 14px; }
.pause-stats .icon { width: 19px; height: 19px; color: #bba47e; }
.pause-stats b { font-weight: 600; color: #e4dfd2; font-size: 17px; }
.pause-stats small { color: #9ea4a7; font-size: 12px; }
#pause-difficulty { color: #b9ab90; font-size: 12px; margin: 0 0 1px; }
#pause .menu-stack { gap: 9px; }
#pause .btn { height: 46px; font-size: 16px; }
#pause #resume { height: 56px; font-size: 19px; }
#pause .menu-stack > .btn:not(.primary) { justify-content: flex-start; padding-left: 18px; }
#pause .btn-row .btn { font-size: 14px; padding-inline: 12px; }
#pause .menu-stack > .btn-row:last-child { margin-top: 8px; padding-top: 14px; border-top: 1px solid #9c846136; }
#pause .save-note { color: #969b9d; font-size: 12px; padding-top: 4px; }
/* Settings: categories stay in place; only their contents scroll. */
#settings .settings-panel { width: min(1000px,95vw); height: min(770px,90dvh); max-height: 90dvh; padding: 28px 30px 22px; }
#settings .panel-head { margin-bottom: 20px; }
#settings .panel-head h2 { font-size: 31px; }
.settings-workspace { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 26px; flex: 1; min-height: 0; }
.settings-nav { border-right: 1px solid #9b846030; padding-right: 18px; display: flex; flex-direction: column; gap: 8px; }
.settings-nav button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 68px; border: 1px solid transparent; border-radius: 2px; color: #b3b2ac; text-align: left; background: transparent; padding: 13px 12px; font: 600 16px/1.2 var(--text); }
.settings-nav .icon { width: 23px; height: 23px; color: #a58f6d; flex: none; }
.settings-nav small { display: block; color: #929b9f; font: 400 11px/1.4 var(--text); margin-top: 5px; }
.settings-nav button.active { color: #eee0c6; border-color: #a188574f; box-shadow: inset 3px 0 0 #c3a06a; background: linear-gradient(90deg,#7b654125,#27323b24); }
.settings-nav button:hover { background-color: #65748516; }
.settings-pages { min-width: 0; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: #786650 #0b1015; padding: 0 12px 14px 2px; overscroll-behavior: contain; }
#settings .settings-cols { display: block; overflow: visible; padding: 0; }
#settings .settings-cols section, #settings-game { padding: 0; border: 0; background: transparent; box-shadow: none; }
#settings .settings-cols h3, #settings-game > h3 { margin: 0 0 10px; padding: 0 0 14px; border: 0; border-bottom: 1px solid #8c795637; border-image: none; font: 600 21px/1.3 var(--text); color: #e6ddc9; }
#settings .settings-cols h3 .icon { color: #b9a179; width: 21px; height: 21px; }
#settings .setting { padding: 14px 0 17px; border-bottom: 1px solid #8e9aaa15; }
#settings .setting label { font-size: 16px; font-weight: 500; }
#settings .setting small { font-size: 12px; color: #a8adae; line-height: 1.5; margin-top: 9px; }
.segmented { gap: 8px; }
.segmented button { border-image: none; border: 1px solid #8d80644c; background: linear-gradient(#1f262d,#11171d); border-radius: 2px; height: 44px; color: #b3b8b8; font-size: 14px; text-shadow: none; }
.segmented button:hover { filter: none; border-color: #c8a87b; }
.segmented button.selected { border-image: none; filter: none; border-color: #c0a277a6; background: linear-gradient(#6452394d,#28241f); color: #f1dfbd; box-shadow: inset 0 -2px 0 #b79a66; }
#settings .settings-save-info { margin-top: 24px; padding: 22px; border: 1px solid #88928b24; background: linear-gradient(120deg,#76918610,#121a21); }
.settings-save-info strong { font: 600 18px/1.4 var(--text); color: #d6d8c9; }
.settings-save-info p { font: 400 14px/1.6 var(--text); color: #acb5b6; margin-top: 10px; }
#settings footer { border-top: 1px solid #a18b6535; padding: 16px 0 4px; margin-top: 18px; gap: 12px; flex-wrap: wrap; }
#settings footer .btn { padding-inline: 16px; }
#settings footer > span { text-align: right; color: #9ca4a7; font-size: 11px; }
#settings #settings-keys { display: none; }
#settings #settings-done { min-width: 100px; }
input[type=range]::-webkit-slider-runnable-track { height: 5px; border-radius: 2px; background: linear-gradient(90deg,#6f5c40,#bfaa7d var(--fill),#1c232b var(--fill)); box-shadow: 0 0 0 1px #8a775333,inset 0 1px 2px #000; }
input[type=range]::-webkit-slider-thumb { width: 19px; height: 19px; margin-top: -7px; border-radius: 2px; border: 1px solid #d2b890; background: linear-gradient(135deg,#9c8259,#372e23); filter: none; box-shadow: 0 2px 4px #0009; }
input[type=range]::-moz-range-track { height: 5px; background: #1c232b; box-shadow: 0 0 0 1px #8a775333; }
input[type=range]::-moz-range-progress { height: 5px; background: #bfaa7d; }
input[type=range]::-moz-range-thumb { width: 19px; height: 19px; border-radius: 2px; border: 1px solid #d2b890; background: linear-gradient(135deg,#9c8259,#372e23); }
/* Equipment chamber: the silhouette leads; quality lives in the lower edge and a small rivet.
   This sheet is enabled only while menus are open. No moving gradients or extra paint loops. */
#character .rarity-common { --rarity: #c7bdae; --rarity-dark: #5e584e; }
#character .rarity-uncommon { --rarity: #92ad7d; --rarity-dark: #455a38; }
#character .rarity-rare { --rarity: #82aac5; --rarity-dark: #3b566c; }
#character .rarity-epic { --rarity: #b394ce; --rarity-dark: #604976; }
#character .rarity-boss { --rarity: #d6b475; --rarity-dark: #786035; }
#character .char-equipment, #character .char-item { border-width: 1px; border-color: color-mix(in srgb,var(--rarity,#8c9aa5) 42%,#192028); background: radial-gradient(ellipse at 50% 100%,color-mix(in srgb,var(--rarity,#8c9aa5) 13%,transparent),transparent 68%),linear-gradient(150deg,#202830ec,#0b1118f7),url(../assets/ui/iron.webp) center/150px; box-shadow: inset 0 1px 0 #eceddf12,inset 0 -2px 0 color-mix(in srgb,var(--rarity,#8c9aa5) 50%,#141a21),0 2px 5px #0005; }
#character .char-equipment:hover, #character .char-item:hover { border-color: var(--rarity,#bca37a); }
#character .char-equipment.selected, #character .char-item.selected { outline: 1px solid #e0c694; outline-offset: 2px; box-shadow: inset 0 1px 0 #ede4cb25,inset 0 -2px 0 var(--rarity,#bca37a),0 2px 5px #0007; }
#character .char-equipment { display: grid; grid-template-rows: minmax(0,1fr) auto auto; justify-items: center; padding-top: 8px; }
#character .char-equipment .char-item-art { width: 100%; height: 100%; overflow: hidden; }
#character .char-equipment .char-icon { height: 100%; max-height: 52px; }
#character .char-equipment .char-gear-icon { width: min(58px,100%); max-height: 58px; }
#character .char-equipment.worn { border-color: color-mix(in srgb,var(--rarity) 72%,#192028); }
#character .char-equipment .eq-label { font-size: 10px; letter-spacing: .1em; }
#character .char-equipment .eq-name { color: #e1dece; }
#character .char-equipment.empty { border-style: solid; border-color: #7b8a9538; background: radial-gradient(ellipse at 50% 35%,#38465326,transparent 72%),linear-gradient(#141c23,#0a1017); box-shadow: inset 0 1px 0 #ced7db08,inset 0 0 0 3px #03070b38; }
#character .char-equipment.empty .char-icon { opacity: .82; color: #71818c; }
#character .char-equipment.empty .eq-label { color: #a3aeb3; }
#character .char-equipment.empty .eq-name { color: #73818b; }
#character .eq-ribbon, #character .char-item-ribbon { inset: 5px auto auto 5px; z-index: 1; display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid color-mix(in srgb,var(--rarity) 42%,#111923); border-radius: 50%; color: var(--rarity); background: #0b121af0; font: 700 11px/1 var(--text); letter-spacing: 0; box-shadow: 0 1px 3px #0008; }
#character .char-item.equipped { border-color: color-mix(in srgb,var(--rarity) 72%,#192028); }
/* Auto tracks shrink to the 80px minimum in a bounded scrolling grid while
   aspect-ratio cells remain square. Intrinsic rows keep the real cell height. */
#character .char-bag-grid { grid-auto-rows: max-content; }
#character .char-item-level { inset: auto auto 5px 6px; padding: 1px 4px; border-radius: 2px; color: #c6c9c5; background: #080e14d9; font-size: 11px; }
#character .char-item.too-high .char-item-level { color: #e7a192; }
#character .char-item-upgrade { inset: 5px 6px auto auto; color: #97cd7e; font-size: 13px; text-shadow: 0 1px 2px #000; }
#character .char-quality { position: absolute; bottom: 8px; right: 9px; width: 6px; height: 6px; border: 1px solid color-mix(in srgb,var(--rarity) 55%,#f1e5c9); background: var(--rarity-dark); box-shadow: 0 1px 3px #000a; transform: rotate(45deg); pointer-events: none; }
#character .char-item-empty { border-color: #73828d26; background: linear-gradient(145deg,#131b23a8,#080e15ba); box-shadow: inset 0 1px 0 #d5e2e605,inset 0 0 0 3px #0002; }
#character .char-detail, #character .char-hover-tooltip { background: radial-gradient(ellipse at 70% 0,color-mix(in srgb,var(--rarity,#b49d7e) 10%,transparent),transparent 60%),linear-gradient(145deg,#1b232bf5,#0b1219fc); border-color: color-mix(in srgb,var(--rarity,#baa783) 40%,#1a242e); border-top: 2px solid var(--rarity,#baa783); box-shadow: inset 0 1px 0 #ffffff0e,0 5px 18px #0004; border-radius: 3px; }
#character .char-detail { padding: 20px; }
#character .cd-art { background: radial-gradient(ellipse at 50% 90%,color-mix(in srgb,var(--rarity,#b49d7e) 16%,#0b1118),#0b1118 78%); border-color: color-mix(in srgb,var(--rarity,#b49d7e) 44%,#172029); box-shadow: inset 0 1px 0 #e6d6b911,inset 0 -2px 0 color-mix(in srgb,var(--rarity,#b49d7e) 38%,#101722); }
#character .cd-title h3 { color: color-mix(in srgb,var(--rarity,#ece0c4) 58%,#f0e7d6); }
#character .cd-sub { font-size: 11px; letter-spacing: .075em; }
#character .cd-worn { display: flex; align-items: center; gap: 7px; margin: -2px 0 14px; padding: 0; border: 0; border-radius: 0; background: transparent; color: #a7b6a0; font: 500 12px/1.4 var(--text); letter-spacing: .01em; text-align: left; }
#character .cd-worn i { width: 16px; height: 16px; border: 1px solid #879c774a; border-radius: 50%; text-align: center; font-style: normal; font-size: 10px; line-height: 14px; }
#character .cd-chip { border-color: #8c98a029; background: #e6e1cd07; }
#character .cd-chip.ok { color: #b9c7aa; }
#character .cd-chip.power { color: #bdb4cd; }
#character .cd-chip.bad { border-color: #bd73534a; color: #e2a48c; }
#character .cd-lore { padding-left: 10px; border-left: 1px solid color-mix(in srgb,var(--rarity,#b49d7e) 35%,transparent); color: #a3adb1; }
#character .cd-btn.go { color: #e1e9d9; border-color: #899d705e; background: linear-gradient(#354431,#1c281d); box-shadow: inset 0 1px 0 #e4edcf1a; }
#character .cd-btn.calm { color: #d3dadd; border-color: #899ba755; background: linear-gradient(#303b46,#18212a); }
#character .cd-btn:hover:not(:disabled) { filter: none; border-color: #c4b48b; }
#character .char-stat-grid { border-color: #a0b0b52b; background: linear-gradient(155deg,#202a3270,#0c141bd9); box-shadow: inset 0 1px 0 #d8ded308; }
/* Four etched paths; an active tier is a steady ring, never a continuously pulsing card. */
#character .skt-tree { border-color: #8d82694a; background: radial-gradient(ellipse at 50% 0,#a9956520,transparent 62%),linear-gradient(#10171cef,#0b1116f4),url(../assets/ui/stone.webp) center/420px; box-shadow: inset 0 1px 0 #e7dcb410,inset 0 0 30px #0005; border-radius: 3px; }
#character .skt-col > header { border-bottom: 1px solid color-mix(in srgb,var(--line) 65%,#182029); padding-bottom: 10px; }
#character .skt-col > header b { color: color-mix(in srgb,var(--line) 85%,#d8c9af); font-size: 10.5px; letter-spacing: .1em; }
#character .skt-col > header small { color: #ded8c8; }
#character .skt-node { border-radius: 3px; }
#character .skt-node.selected { background: color-mix(in srgb,var(--line) 9%,transparent); border-color: color-mix(in srgb,var(--line) 40%,#293038); }
#character .skt-node:hover, #character .skt-node:focus-visible { border-color: #c0b39850; background-color: #eee8d508; }
#character .skt-node:focus-visible { outline: 1px solid #deca9a; outline-offset: 2px; }
#character .skt-emblem { box-shadow: 0 3px 8px #0008; }
#character .skt-node .skt-tier, #character .skt-tiernum { border: 1px solid #92816760; background: linear-gradient(#3d3930,#242827); color: #d5c7a7; }
#character .skt-node[data-tier="2"] .skt-tier, #character .skt-tiernum[data-tier="2"] { border-color: #b09a655e; background: linear-gradient(#51442c,#30291e); color: #e0c68d; }
#character .skt-node[data-tier="3"] .skt-tier, #character .skt-tiernum[data-tier="3"] { border-color: #ac94c666; background: linear-gradient(#494053,#2b2635); color: #cbb5df; }
#character .skt-node.available .skt-emblem { animation: none; box-shadow: 0 3px 8px #0009,0 0 0 1px #d8bd7aa6; }
#character .skt-node.available .skt-state { color: #e4cb8e; }
#character .skt-node.pending .skt-state { color: #aa9d85; }
#character .skt-node.superseded .skt-state { color: #8f9b97; }
#character .skt-node.superseded .skt-emblem { opacity: .75; }
#character .skt-node.slotted .skt-emblem { box-shadow: 0 3px 8px #0009,0 0 0 1px color-mix(in srgb,var(--line) 85%,#d2c7a4),0 0 0 4px color-mix(in srgb,var(--line) 16%,transparent); }
#character .skt-node.slotted .skt-state { color: #deceb0; }
#character .skt-slotcap { top: 3px; right: 3px; border-color: #a48c5c66; background: #141a1ded; color: #e2cea5; box-shadow: 0 1px 3px #0007; }
#character .skt-link { width: 1px; height: 18px; background: #85745965; opacity: 1; }
#character .skt-link::before { content: ''; position: absolute; width: 3px; height: 3px; top: 1px; left: -1px; border-radius: 50%; background: #938163; }
#character .skt-link::after { left: 0; bottom: 2px; width: 5px; height: 5px; border: 1px solid #827154; transform: translateX(-50%) rotate(45deg); background: #12191e; }
#character .skt-link.ready { background: #b7a26a9e; }
#character .skt-link.ready::after { border-color: #d4b975; }
#character .skt-link.lit { background: color-mix(in srgb,var(--line) 72%,#293038); box-shadow: none; }
#character .skt-link.lit::before, #character .skt-link.lit::after { border-color: var(--line); background: var(--line); }
#character .skt-inspect { border: 1px solid color-mix(in srgb,var(--line) 32%,#25303a); border-top: 2px solid var(--line); border-radius: 3px; padding: 15px; background: radial-gradient(ellipse at 80% 0,color-mix(in srgb,var(--line) 11%,transparent),transparent 60%),linear-gradient(145deg,#1b232bf5,#0b1219fc); box-shadow: inset 0 1px 0 #ffffff0e,0 5px 18px #0004; gap: 9px; }
#character .skt-inspect header { flex-direction: row; align-items: center; gap: 12px; padding: 4px 0; }
#character .skt-inspect header .char-icon { width: 50px; height: 50px; padding: 3px; border: 1px solid color-mix(in srgb,var(--line) 35%,#283039); border-radius: 50%; background: #0b1219; }
#character .skt-inspect h3 { font-size: 24px; color: #e7dfca; }
#character .skt-inspect > p { font-size: 14px; line-height: 1.5; color: #c3c6bf; }
#character .skt-inspect > .skt-delta { border-left: 2px solid #bda06d; background: #b99a5f0d; color: #d4c6a6; }
#character .skt-delta b { color: #d9bc7f; }
#character .skt-fact { padding: 5px 8px; background: #edf2e708; color: #b2bab7; }
#character .skt-fact.changed { background: #c9b57d13; color: #cfbf9e; }
#character .skt-fact.changed b { color: #dec38e; }
#character .skt-learn, #character .skt-assign button { border-color: #98805b63; background: linear-gradient(#35382f,#171f23); color: #e2d2b0; border-radius: 2px; }
#character .skt-learn:hover:not(:disabled), #character .skt-assign button:hover:not(:disabled) { filter: none; border-color: #c5ac7d; background: #303932; }
#character .skt-assign button:disabled { opacity: 1; color: #c2cbb9; border-color: #8c9d7863; background: #84986e0c; }
#character .skt-cap { border-color: #96836166; background: #11191f; color: #d4c5a4; }
#character .skt-slot { border-color: color-mix(in srgb,var(--line) 40%,#263039); border-left: 2px solid var(--line); background: linear-gradient(#1b242a,#0d151b); box-shadow: inset 0 1px 0 #e7e6d00a; border-radius: 2px; }
#character .skt-slot.empty { border-style: solid; border-left-style: dashed; }
#character .skt-slot strong { color: #e0dbcc; }
#character .skt-slot small, #character .skt-tree .skt-note { color: #9ca7a8; }
#character .skt-remove { border-color: #9f917743; background: #10181e; color: #b9ad94; border-radius: 2px; }
#character .skt-points { border-color: #ac916059; background: linear-gradient(#36352a,#141c21); box-shadow: inset 0 1px 0 #ead6a91a; border-radius: 2px; }
#character .skt-points b { color: #ddc391; }
/* Controls share the same metal surfaces and comfortable spacing. */
.controls-panel { padding: 28px; }
.control-grid > div { padding: 13px 4px; border-color: #9fadb71e; }
.control-grid p b { font-size: 15px; letter-spacing: .015em; color: #e0ddcf; }
.control-grid p span { font-size: 12px; line-height: 1.45; color: #a3afb5; }
.ctl-icon { box-shadow: 0 0 0 1px #aa946250,inset 0 1px 0 #efdebe18; background: #15202a; }
/* Keep the game readable; the existing orb and skill silhouettes remain familiar. */
.hero-info strong { letter-spacing: .02em; }
.hero-info #hero-subtitle { color: #c8c4b7; }
.quest { background: linear-gradient(90deg,#07101900,#071019b8); border-color: #b7a27642; }
.zone-plate { filter: saturate(.6); }
#title .wordmark { color: #e7dfcd; font-weight: 650; letter-spacing: .055em; text-shadow: 0 3px 6px #000,0 0 32px #050506; }
#title .title-actions { gap: 11px; }
#title .title-actions .btn { height: 48px; }
#title .title-actions .btn.big { height: 59px; }
#title .title-actions .btn:not(.primary) { background: linear-gradient(#17212bc9,#0d151ccc); }
#title .title-divider { opacity: .72; }
/* Small screens: no fixed desktop columns, clipped footers or tiny touch targets. */
@media (min-width: 1151px) and (max-height: 840px) {
  #character .character-panel { height: calc(100dvh - 40px); max-height: calc(100dvh - 40px); }
  #character .character-panel[data-page="inventory"] .char-doll { min-height: 240px; }
  #character .char-equipment { grid-template-rows: minmax(0,1fr) auto; gap: 4px; }
  #character .char-equipment .eq-name { display: none; }
  #character .skt-wrap { gap: 8px; }
  #character .skt-slot { padding-block: 5px; }
  #character .skt-slot small { white-space: nowrap; }
}
@media (max-width: 1150px) {
  .talent-workspace { grid-template-columns: minmax(0,1fr) 245px; gap: 18px; }
}
@media (max-width: 800px) {
  .modal, #character { padding: 12px; }
  .talent-workspace { grid-template-columns: minmax(0,1fr); }
  .talent-inspect { position: relative; }
  .talent-inspect header { flex-direction: row; align-items: center; }
  .talent-inspect .talent-bind { max-width: 440px; }
  .talent-path-name { font-size: 8px; letter-spacing: .06em; }
  #settings .settings-panel { width: 97vw; padding: 22px 20px 18px; }
  .settings-workspace { grid-template-columns: 145px minmax(0,1fr); gap: 16px; }
  .settings-nav { padding-right: 12px; }
  .settings-nav button { padding: 10px 8px; gap: 8px; font-size: 14px; }
  .settings-nav .icon { width: 18px; height: 18px; }
  #settings footer > span { flex-basis: 100%; order: 5; text-align: center; }
  #settings footer { gap: 8px; }
  #settings #settings-reset { margin-left: auto; }
}
@media (max-width: 520px) {
  .panel { padding: 23px 18px; }
  #pause .compact { padding: 27px 22px; gap: 12px; }
  #pause .panel-crest { width: 62px; height: 62px; }
  #pause h2 { font-size: 33px; }
  .pause-stats b { font-size: 14px; }
  .pause-stats > div + div { padding-left: 7px; }
  .talent-node strong { font-size: 11px; }
  .talent-emblem, .talent-node.learned .talent-emblem { width: 48px; height: 48px; margin-top: 6px; margin-bottom: 19px; }
  .talent-path-name { white-space: normal; text-align: center; font-size: 8px; max-width: 92%; line-height: 1.3; top: -19px; }
  .talent-equipped-bar { grid-template-columns: 1fr; }
  #settings .settings-panel { padding: 20px 16px 16px; height: 92dvh; max-height: 92dvh; }
  #settings .panel-head { margin-bottom: 12px; padding-bottom: 12px; }
  .settings-workspace { display: flex; flex-direction: column; gap: 16px; }
  .settings-nav { flex-direction: row; border: 0; border-bottom: 1px solid #a0886039; padding: 0 0 10px; gap: 5px; }
  .settings-nav button { min-height: 46px; flex: 1; justify-content: center; padding: 8px 3px; font-size: 12px; gap: 5px; }
  .settings-nav small { display: none; }
  .settings-nav button.active { box-shadow: inset 0 -2px 0 #c3a06a; }
  .settings-pages { flex: 1; padding-right: 6px; }
  #settings .setting label { font-size: 15px; }
  .segmented button { font-size: 12px; padding: 0 3px; }
  #settings footer { padding-top: 12px; margin-top: 10px; }
  #settings footer .btn { padding-inline: 10px; font-size: 13px; }
  #settings #settings-done { min-width: 76px; }
  #settings .text-button { font-size: 12px; padding-inline: 7px; }
  .control-grid { grid-template-columns: 1fr; }
}
@media (max-height: 700px) and (min-width: 801px) {
  #pause .compact { gap: 8px; padding-top: 22px; padding-bottom: 20px; }
  #pause .pause-stats { padding-block: 10px; }
}
@media (prefers-reduced-motion: reduce) { .btn, .segmented button { transition: none; } }
/* Header progression shares the title row; each desktop inventory column scrolls independently. */
@media (min-width: 1151px) {
}
@media (min-width: 1151px) and (max-height: 820px) {
}
@media (max-width: 800px) {
}
.talent-canvas { position: relative; height: var(--talent-height); min-height: var(--talent-height); }
@media (min-width: 901px) {
  .character-panel[data-page="skills"] .char-content { display: flex; flex-direction: column; overflow: hidden; }
  .character-panel[data-page="skills"] .char-tree-intro, .character-panel[data-page="skills"] .char-tree-note, .character-panel[data-page="skills"] .talent-equipped-bar { flex: none; }
  .character-panel[data-page="skills"] .talent-workspace { flex: 1; min-height: 0; }
  .character-panel[data-page="skills"] .talent-tree { height: auto; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: #786650 #0b1015; }
  .character-panel[data-page="skills"] .talent-inspect { position: static; align-self: stretch; overflow: auto; scrollbar-width: thin; scrollbar-color: #786650 #0b1015; }
  .character-panel[data-page="skills"] .talent-equipped-bar { margin-top: 12px; padding: 8px; }
  .character-panel[data-page="skills"] .char-tree-note { margin: 8px 0 0; }
  .talent-equipped > button:first-child { min-height: 48px; }
}
@media (min-width: 901px) and (max-height: 820px) {
  .talent-inspect { padding: 17px; }
  .talent-inspect header { flex-direction: row; align-items: center; gap: 12px; }
  .talent-inspect header .char-icon { width: 48px; height: 48px; padding: 8px; }
  .talent-inspect h3 { font-size: 21px; }
  .talent-inspect p { font-size: 12px; }
  .talent-cost { font-size: 11px; gap: 5px; padding: 10px 0; }
  .talent-bind { gap: 6px; }
  .talent-bind button { font-size: 11px; }
}
#settings-input > h3 { margin: 0 0 12px; padding: 0 0 14px; border-bottom: 1px solid #8c795637; font: 600 21px/1.3 var(--text); color: #e6ddc9; }
#settings-input .input-intro { font-size: 13px; line-height: 1.5; color: #a8b4b9; margin-bottom: 20px; }
.input-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 25px; }
#settings #settings-keys:not(.hidden) { display: flex; }
#settings #controller-config { padding: 18px; margin-top: 16px; background: #101a24; border-color: #8e9c9b3f; border-radius: 3px; }
#controller-config summary { color: #d6d0bd; }
#controller-config p { color: #a6b3b9; }
#controller-config .controller-grid > div { padding-block: 6px; border-bottom: 1px solid #a3b4be1c; }
#settings footer > span { text-align: left; }
@media (min-width: 901px) and (max-height: 820px) {
  .talent-inspect > small { font-size: 9px; }
  .talent-inspect header { margin-block: 8px 10px; padding: 0; }
  .talent-inspect p { margin-bottom: 8px; }
  .talent-cost { flex-direction: row; flex-wrap: wrap; gap: 5px 12px; margin-bottom: 8px; padding-block: 9px; }
  .talent-bind { margin-top: 8px; }
}
@media (max-width: 520px) {
  .settings-nav button { flex-direction: column; min-height: 57px; font-size: 10px; gap: 4px; }
  .settings-nav .icon { width: 17px; height: 17px; }
  .input-actions { flex-direction: column; }
  #settings footer > span { order: 5; text-align: center; }
}
body.touch #settings #settings-keys { display: none; }
.talent-node.locked .power-art { filter: saturate(.15); opacity: .72; }
.talent-emblem .power-art { padding: 4px; width: 44px; height: 44px; }
.talent-inspect header .power-art { padding: 9px; }
.talent-equipped .power-art { width: 32px; height: 32px; }
@media (max-width: 520px) { .talent-emblem .power-art { width: 37px; height: 37px; } }
#pause .panel-crest { left: auto; }
#pause .pause-stats { background: linear-gradient(120deg,#52677510,#0c141b80); box-shadow: none; border: 1px solid #87969a25; padding: 16px 13px; grid-template-columns: 1.4fr .8fr .9fr; }
#pause .pause-stats b { white-space: normal; overflow: visible; text-overflow: clip; font-size: 15px; }
#pause .save-note { padding: 9px 0 0; color: #9fa9ad; border-color: #87969a25; }
#keybinds .settings-cols section { border: 1px solid #8392962d; background: linear-gradient(140deg,#1b2630a1,#101821c7); box-shadow: none; }
#keybinds .settings-cols h3 { border-image: none; border-bottom: 1px solid #8c795640; color: #d6c9ad; font-size: 17px; }
#keybinds .bind-slot { border-image: none; border: 1px solid #91a0a046; border-radius: 2px; background: linear-gradient(#26313be0,#101a23); color: #d6dcd8; min-height: 40px; font-size: 12px; box-shadow: inset 0 1px 0 #eef1d910; }
#keybinds .bind-slot.listening { border-color: #d0af78; background: #71593736; color: #f5deb6; filter: none; }
#keybinds .bind-slot:hover { filter: none; border-color: #c7ac82; }
#keybinds .bindrow.fixed .bind-slot { opacity: .55; }
#keybinds .bind-name { font-size: 14px; }
#keybinds .bind-pad { font-size: 12px; color: #a3b0b6; }
#keybinds footer { padding-top: 10px; margin-top: 8px; border-top: 1px solid #9caeb629; flex-wrap: wrap; }
#keybinds .bind-card { border: 1px solid #c8aa7970; border-radius: 3px; background: linear-gradient(#24313b,#0d1721); box-shadow: 0 20px 60px #000c,inset 0 1px 0 #ebddbe22; }
#hud .hero-info { padding: 12px 19px 12px 0; border-bottom: 1px solid #c1ab7940; background: linear-gradient(90deg,transparent,#0e172048 40%,transparent); }
#hud .hero-info strong { font-weight: 650; text-shadow: 0 2px 4px #000; }
#hud .hero-info #hero-subtitle { font-weight: 500; color: #bcc7c8; letter-spacing: .09em; }
#hud .portrait-frame { filter: saturate(.7); }
#hud .quest { color: #dadacb; background: linear-gradient(90deg,transparent,#0a141ec2); }
#hud .action kbd { border-image: none; border: 1px solid #a493704f; background: linear-gradient(#26313bea,#0f1924); color: #e8dcc3; border-radius: 2px; box-shadow: 0 2px 5px #0008; }
#hud .action::after { filter: saturate(.8); }
@media (max-width:520px) {
  #keybinds .settings-cols section { padding: 12px 10px; }
  #keybinds .bind-cols, #keybinds .bindrow { grid-template-columns: minmax(0,1fr) 75px 65px 28px; gap: 5px; }
  #keybinds .bind-name { font-size: 12px; }
  #keybinds .bind-slot { font-size: 10px; }
  #keybinds .bind-reset { width: 28px; height: 34px; }
}
@media (min-width: 701px) and (max-width: 800px) {
}
@media (min-width: 701px) and (max-width: 1150px) {
}
@media (max-width: 370px) { .char-bag-toolbar { gap: 4px; } .char-filter { padding-inline: 4px; } }
#pause .compact { overflow: auto; max-height: calc(100dvh - 40px); }
#pause .compact > * { flex: none; }
@media (max-width: 370px) {
}
/* Engraving belongs to the complete tree, so it never crosses nodes while scrolling. */
.talent-tree::before, .talent-tree::after { content: none; }
.talent-canvas::before { content: ''; position: absolute; inset: 12px; border: 1px solid #a18b5720; pointer-events: none; }
/* Skill tree (4 lines x 3 tiers): the whole page scrolls when the window is short, so the inspector's slot list and the note below the tree are never cut off. */
@media (min-width: 901px) {
  .character-panel[data-page="skills"] .char-content { display: block; overflow-y: auto; overflow-x: hidden; }
  .character-panel[data-page="skills"] .skt-workspace { align-items: start; }
  .character-panel[data-page="skills"] .skt-inspect { align-self: start; overflow: visible; }
}
/* Pause menu: a narrower first view. */
#pause .compact { width: min(440px, 94vw); padding: 26px 30px; }
/* MacBook-class screens (Retina, under ~1800 CSS px wide): the pause menu is scaled down a little. */
@media (min-resolution: 2dppx) and (max-width: 1800px) { #pause .compact, #settings .settings-panel, #controls .controls-panel, #keybinds .keybinds-panel, #character .character-panel, .character-panel { zoom: .86; } }
/* Compensate the menu's Retina zoom in short desktop windows: retain the same
   text size while making room for all three tiers instead of wasting the edges. */
@media (min-resolution: 2dppx) and (min-width: 1151px) and (max-width: 1800px) and (max-height: 840px) {
  #character .character-panel { height: calc((100dvh - 40px) / .86); max-height: calc((100dvh - 40px) / .86); }
}