/* Shared interface: quiet navy surfaces, clear type, teal selection and gold rewards. */
:root{
 --sans:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
 --serif:var(--sans);--ink:#080f1c;--glass:rgba(12,22,39,.96);
 --text:#f1f5ff;--muted:#b6c4d9;--line:#35445c;--gold:#f1ca80;--cyan:#70e7d3;
 --ui-surface:#101c2e;--ui-raised:#18273d;--ui-selected:#153e48;--ui-border:#344660;
 font-size:100%;
}
body{font-family:var(--sans);color:var(--text);background:var(--ink);-webkit-font-smoothing:antialiased}
button,input,summary{font-family:inherit;letter-spacing:0}
button{border-radius:9px;transition:background-color .15s,border-color .15s,box-shadow .15s}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
button:disabled{cursor:not-allowed}
strong,b{font-weight:650}
.effect-value{font-weight:750;color:#ffe1a2;font-variant-numeric:tabular-nums}
.positive{color:#79edc3}.negative{color:#ff9caa}
.glass{background:var(--glass);border-color:var(--ui-border);border-radius:12px;box-shadow:0 8px 28px #0004}
.topbar{background:#0b1423;border-color:#2a3b53;box-shadow:0 4px 16px #0004}
.regions button{color:#c6d3e6;font-size:.9375rem;border-radius:0;font-weight:600}
.regions button.active{color:#8ef4df;border-color:#70e7d3}
.icon-button,.main-menu-button{background:#18283e;border-color:#3b4d66;color:#e9f1ff;border-radius:9px}
.icon-button:hover,.main-menu-button:hover{background:#223950;border-color:#79cfc6}
.player-panel{border-left-color:#70e7d3}.player-name strong{color:#f5f8ff;font-family:var(--sans)}
.player-name>span,.mode-label,.minimap>div{color:#c3d0e3;font-size:.8125rem}
.portrait{border-color:#5f799c;border-radius:8px}.portrait span{border-radius:5px;color:#142131;background:#f1ca80;font-weight:700}
.resource{background:#060e1b;border:1px solid #33465d;border-radius:5px;height:20px;overflow:hidden}
.resource span{font-size:.875rem;line-height:18px;font-weight:650;color:#fff;text-shadow:0 1px 3px #000}
.resource.hp i{background:linear-gradient(90deg,#247f73,#67d9b9)}
.resource.mp i{background:linear-gradient(90deg,#3865a4,#73b8f1)}
.resource.enemy i{background:linear-gradient(90deg,#ad3e62,#f17691)}
.exp-track,.boss-time-track{border-radius:4px;background:#101d31}.exp-track i{background:#e6bd72}
.quest strong{font-size:1rem;color:#f0f5ff}.quest-symbol{color:var(--gold)}
#quest-description,.objective,.quest-reward{font-size:.875rem;line-height:1.55;color:#c5d2e5}
.target-panel>span{font-size:.9375rem;color:#f1f5ff;font-weight:600}
.boss-timer{color:#d5e3f6}.boss-timer strong{color:#ffe0a0}.boss-timer span{color:#c2d0e5}
.currency{font-variant-numeric:tabular-nums}.currency b{font-size:.9375rem;color:#f4f7ff}.currency>span{color:#bac8dc}
.bag-button{background:#15243b;color:#eaf1ff;border-color:#3a4e69;border-radius:10px}
.bag-button>div{font-size:.9375rem;font-weight:600}.bag-button:hover{background:#20354e;border-color:#72c6c2}
.auto-skill-toggle[aria-pressed="true"]{background:#14434a;border-color:#6ee4cf;box-shadow:inset 0 0 0 1px #69e7d333}
#auto-skills-state{background:#314458;color:#edf4ff;border-radius:5px}
.auto-skill-toggle[aria-pressed="true"] #auto-skills-state{background:#79edd5;color:#072c30}
.skillbar{background:#0c1729f5;border:1px solid #3c516d;border-radius:12px;box-shadow:0 6px 22px #0006}
.skill{border-radius:8px;border-color:#617694;overflow:hidden;background:#132139}
.skill .skill-name{background:linear-gradient(transparent,#07111cf5 35%);color:#fff;font-size:.875rem;font-weight:650;text-shadow:0 1px 2px #000}
.skill .skill-level{font-size:.72rem;background:#132139f2;color:#ffe1a2;border:1px solid #6a7890;border-radius:5px;line-height:1.2;box-shadow:0 2px 6px #0007}
.skill kbd{font-size:.75rem;background:#0a1529ee;border-radius:4px}
.cooldown{font-weight:700;color:white;text-shadow:0 2px 4px #000}
.auto-run-banner,.auto-countdown{background:#102d3a;border-color:#3c7c85;color:#dcfff5;border-radius:9px}
.auto-run-banner button,.auto-countdown button{background:#205461;border-color:#5ab2b9;color:white;border-radius:7px}
.toast{background:#14253bf5;border:1px solid #5a7495;border-radius:10px;font-size:.9375rem;line-height:1.5;color:#edf6ff}
.interact-button{background:#163b4b;border-color:#72d8c9;border-radius:9px;color:#e5fff8}

/* Dialogs share the same visual language as the game controls. */
dialog,#merchant-dialog,.save-dialog{background:linear-gradient(145deg,#132139,#0c1627 65%);border:1px solid #425677;border-radius:16px;color:var(--text);box-shadow:0 24px 80px #000a}
dialog::backdrop{background:#020712b8;backdrop-filter:blur(4px)}
.dialog-heading{border-color:#334760;align-items:center}
.dialog-heading h2,.save-dialog .dialog-heading h2{font-family:var(--sans);font-weight:700;letter-spacing:-.02em;color:#f4f7ff}
.dialog-heading .eyebrow{color:#8bcbbc;font-size:.75rem;letter-spacing:.09em}
.close-dialog{background:#1d2d45;border:1px solid #445a77;color:#f0f6ff;border-radius:9px}
.close-dialog:hover{background:#35445b;border-color:#a4b8d1}
.dialog-footer,.loadout-guide,.selection-status,.spec-limit-note,.skill-source{color:#b9c9df;font-size:.875rem;line-height:1.65}
.gold-button{background:#f1ca80;border-color:#ffe0a4;color:#17202d;box-shadow:0 3px 12px #0003;font-size:1rem;font-weight:700;border-radius:9px}
.gold-button:hover:not(:disabled){background:#ffdda0;filter:none}
.secondary-button,.small-button,.compact-button{background:#1a2b43;border:1px solid #435b7b;color:#e6efff;border-radius:8px;font-size:.875rem}
.secondary-button:hover:not(:disabled),.small-button:hover:not(:disabled),.compact-button:hover:not(:disabled){background:#29425d;border-color:#72c6c2}
.result-card{background:linear-gradient(145deg,#172942f5,#0d192df7);border-color:#496081;border-radius:18px;box-shadow:0 18px 65px #0009}
.result-card h2{font-family:var(--sans);letter-spacing:-.025em;font-size:1.75rem;color:#f6f8ff}
.result-card p,.help-content p,.save-dialog>p{font-size:1rem;line-height:1.7;color:#cbd7e9}
.result-card .eyebrow{color:#f1ca80}.result-card .secondary-button{color:#e3efff}
.help-grid{gap:12px 20px;font-size:1rem;line-height:1.55}.help-grid>span{color:#8ce7d5}.help-grid>b{font-weight:500;color:#e0e9f7}
.help-content h3{font-family:var(--sans);color:#f1ca80;font-size:1.125rem}
.victory-loot{background:#14283c;border-color:#4c6483;border-radius:10px;font-size:.9375rem}

/* Inventory: the existing inspector is always alongside or below the item grids. */
.cube-layout{gap:14px}
.cube-layout h3{font-family:var(--sans);font-size:1rem;color:#e8f0fc}
.cube-layout h3>span{color:#b7c8df;font-size:.8125rem}
#character-stats .stats-grid{border-color:#354b68;color:#bdcce1;font-size:.9375rem}
#character-stats .stats-grid b{color:#f2f6ff;font-variant-numeric:tabular-nums}
.gear-tile{border-radius:8px;background:#142339;border-color:#3a4d65;box-shadow:inset 0 1px #ffffff0b}
.gear-tile img{border-radius:6px}.gear-tile.selected{outline:2px solid #7bf1db;outline-offset:1px;box-shadow:0 0 0 4px #60dcc322}
.gear-tile:hover{background:#233b53}.gear-tile.empty{background:#101b2e;border-color:#35465e}
.gear-tile.empty>span{color:#a7b9d1}.slot-caption,.affix-count,.lock-mark,.enhance-mark{font-size:.75rem;font-weight:650;text-shadow:0 1px 3px #000}
.slot-caption{background:#081323df}.affix-count{background:#0a1425db;border-radius:4px}
#inventory-filters button{font-size:.875rem;color:#bbcae1;border:1px solid transparent;border-radius:7px;background:#122035}
#inventory-filters button.active{background:#18414b;color:#98f6e4;border-color:#63b9b7}
#item-inspector{background:#0c1729;border-color:#3a5272;border-radius:12px;scrollbar-color:#59728d #101c2e;overscroll-behavior:contain}
.inspector-heading>img{border-radius:9px;background:#17273d}.inspector-heading h3{font-family:var(--sans);font-size:1.125rem;line-height:1.4}
.inspector-heading small,.inspector-heading>div>span{font-size:.875rem;color:#bac9df}
#item-inspector h4{font-size:.9375rem;color:#a0eddf;line-height:1.4}
.item-stat-lines,.item-affix-lines,.skill-compare,.weapon-damage-range{font-size:1rem;line-height:1.5;color:#d4e1f2}
.item-affix-lines img{border-radius:6px}.item-stat-lines b,.item-affix-lines b{font-weight:700}
.replaced-item{font-size:.875rem;color:#b4c5dd}.rare-stat-lines{color:#edcea0}
#item-inspector .item-actions button{border-radius:8px;font-size:.9375rem}
#sell-selected-item:not(:disabled){color:#ffb7c2;border-color:#865969;background:#362435}
#inventory-dialog .shop button,#manage-skills-button{background:#1b3048;border:1px solid #445c78;color:#e3eeff;border-radius:9px;font-size:.875rem}
#inventory-dialog .shop button>span{color:#c7d4e6}

/* Skill names, effects and selection states use a readable hierarchy. */
.skill-list-button{background:#132138;border:1px solid #3c516e;border-radius:10px}
.skill-list-button>img{border-radius:8px}.skill-list-button strong{font-size:1rem;color:#edf4ff;font-weight:650}
.skill-list-button small{color:#b3c5df;font-size:.875rem;line-height:1.4}
.skill-list-button.selected{background:#173d49;border-color:#7ae8d5;box-shadow:inset 3px 0 #7ae8d5}
.skill-list-button:hover:not(.selected){background:#21364f}
.specialization-heading h3{font-family:var(--sans);font-size:1.5rem;color:#f5f8ff}
.specialization-heading>img{border-radius:10px}.specialization-heading span{color:#c3d4ea}
.skill-description{font-size:1rem;line-height:1.65;color:#dbe7f7}
.skill-meta{font-size:.9375rem;color:#a4e6d9;line-height:1.5;background:#122d3b;border:1px solid #365869;border-radius:8px;padding:9px 12px}
.level-milestones>span{border-radius:6px;background:#152339;color:#a6b8d1;border-color:#40516c;font-size:.8125rem}
.level-milestones>span.unlocked{color:#9ef0dc;background:#19414a;border-color:#518f93}
.trait-title{font-size:1rem;color:#eef5ff}.trait-title>span{color:#a6eadc;font-size:.875rem}
.trait-option{border:1px solid #3e536f;background:#17263d;border-radius:10px;box-shadow:none;min-height:84px;padding:12px;gap:10px}
.trait-option strong{font-size:1rem;line-height:1.4;color:#f2f6ff}
.trait-option small{font-size:1rem;line-height:1.5;color:#c3d2e7;margin-top:5px}
.trait-option:disabled{opacity:1;background:#111d30;border-color:#32435d}
.trait-option[data-state="locked"] strong{color:#c6d1e3}.trait-option[data-state="locked"] small{color:#aebfd6}
.trait-option.selected{background:#153b45;border-color:#72dfcc;box-shadow:inset 3px 0 #7ae9d4}
.trait-option.inactive{background:#2b253a;border-color:#906d99;box-shadow:inset 3px 0 #b995c4}
.trait-option:hover:not(:disabled){border-color:#87dacc}
.trait-number{color:#9bc1d8;font-size:1rem;font-weight:700;align-self:flex-start}
.trait-option.selected .trait-number{color:#91f5df}
.trait-state{padding:4px 7px;background:#23334a;border:1px solid #425671;border-radius:6px;font-size:.8125rem;line-height:1.35;color:#c1d2e8}
.trait-state small{font-size:.75rem;color:inherit;margin:2px 0 0}
.trait-option.selected .trait-state{background:#245b60;border-color:#53958f;color:#bcfff0}
.trait-option.inactive .trait-state{background:#4b334f;color:#f7c6ed}
.skill-equipment-sources{font-size:.9375rem;line-height:1.6;border-color:#415b78;color:#c8d6eb;border-radius:8px;background:#132137}
.skill-equipment-sources summary{color:#98e8dc;padding:8px 0}

/* The remaining game windows and the lobby keep the same typography and controls. */
.difficulty-selector,.stage-chapter,.merchant-intro,.merchant-sale-summary,.save-slot{background:#13243a;border-color:#3c5473;border-radius:12px}
.difficulty-selector strong{font-family:var(--sans);font-size:1.5rem;color:#f1ca80}.difficulty-selector span{color:#bfcee3;font-size:.875rem}
.chapter-heading h3{font-family:var(--sans);font-size:1rem;color:#eef4ff}.chapter-heading p,.chapter-heading span{color:#c5d3e6;font-size:.875rem}
.stage-buttons button{border-radius:8px;background:#1a2c43;border-color:#4b6382;color:#e8f0ff;font-size:.9375rem;min-height:38px}
.stage-buttons button.current{background:#205361;border-color:#80e6d6;color:#eafff8}.stage-buttons button:disabled{opacity:.65}
.boss-challenge{border-radius:8px;font-size:.9375rem;min-height:38px}
.merchant-intro p,.merchant-summary{color:#f1f5ff;font-size:1rem}.merchant-intro span,.merchant-item small,.merchant-protected{color:#bacce3;font-size:.875rem;line-height:1.5}
.merchant-grade{background:#15273d;border-color:#425a77;border-radius:8px;font-size:.875rem}.merchant-grade.selected{background:#1e4651;border-color:#86dbcd}
.merchant-item{background:#101f34;border-color:#334c69;border-radius:8px}.merchant-item strong{font-size:.9375rem}.merchant-item .merchant-rare{color:#f1cc8f}
.merchant-total,.merchant-status{color:#cddbf0;font-size:.875rem}.merchant-total strong{color:#f5d99f}
.lobby-header{background:#0a1421b8;border-color:#43617b55}.lobby-entry{border-radius:16px;border-color:#587693;background:#0e1d32ee}
.lobby-entry .gold-button,.save-dialog>.gold-button,.save-slot>.gold-button{background:#85e8d5;color:#0c2730;border-color:#b2ffec;border-radius:9px}
.lobby-menu .secondary-button{background:#1a304a;border-color:#54718e;border-radius:9px;font-size:1rem}
.lobby-skill,.lobby-class-card{border-radius:10px;border-color:#526d8a;background:#11223ad9}.lobby-skill>img{border-radius:7px}
.lobby-skill.selected,.lobby-class-card.active{background:#204953e8;border-color:#8ae6d8;box-shadow:inset 3px 0 #96efdf}
.lobby-skill strong,.lobby-skill-detail h2{font-size:1rem;color:#eef8ff}.lobby-skill small,.lobby-skill-detail>span{font-size:.875rem;color:#bbd9e8}
.lobby-skill-detail p,.lobby-class-story{font-size:1rem;line-height:1.65;color:#d6e4f3}
.lobby-class-role,.lobby-kicker,.lobby-specialization-note p,#lobby-save-summary{font-size:.9375rem;color:#c9dbed}
.lobby-class-tags>span{font-size:.8125rem;border-radius:6px;background:#162f45bd;color:#daedf5}
.lobby-class-card strong{font-size:1rem}.lobby-class-card small,.lobby-class-card>i{font-size:.75rem;color:#bdcfe1}
.lobby-entry #account-status,.lobby-entry #asset-status,.lobby-entry .small-button,#account-name{font-size:.8125rem;color:#c4d9ed}
.save-dialog input{border-radius:9px;background:#101f34;border-color:#526e90}
.save-slot h3{color:#eaf4ff}.save-slot p,.save-dialog .save-hint{font-size:.9375rem;color:#c2d3e9}.save-slot small{font-size:.8125rem;color:#adbfda}

/* Mobile: readable text uses the space freed by tighter framing, never a scaled dialog. */
:root[data-touch="true"] :is(#inventory-dialog,#skills-dialog){width:min(1160px,calc(100vw - 16px - var(--safe-left) - var(--safe-right)));height:calc(var(--app-height) - max(8px,env(safe-area-inset-top,0px)) - max(8px,var(--safe-bottom)));padding:9px;border-radius:13px}
:root[data-touch="true"] :is(#inventory-dialog,#skills-dialog) .dialog-heading{min-height:36px;padding-bottom:5px}
:root[data-touch="true"] :is(#inventory-dialog,#skills-dialog) .dialog-heading h2{font-size:1.125rem;line-height:26px}
:root[data-touch="true"] .close-dialog{width:34px;height:34px;min-width:34px;font-size:24px}
:root[data-touch="true"] #inventory-dialog[open]{grid-template-rows:36px auto minmax(0,1fr) 34px;gap:6px}
:root[data-touch="true"] #inventory-dialog .stats-grid{font-size:.8125rem;line-height:18px;gap:2px 8px}
:root[data-touch="true"] .compact-button{font-size:.875rem;min-height:32px;padding:4px 8px;background:#1b3049;border-color:#48617e;color:#e8f1ff;border-radius:7px}
:root[data-touch="true"] .cube-layout{gap:7px}
:root[data-touch="true"] .cube-layout h3{font-size:.875rem;line-height:22px}
:root[data-touch="true"] .equipment-panel h3>span,:root[data-touch="true"] .items-heading h3>span{font-size:.75rem;color:#b3c6df}
:root[data-touch="true"] .gear-tile{height:42px;border-radius:7px}
:root[data-touch="true"] #equipment-slots .gear-tile{height:34px}
:root[data-touch="true"] .gear-tile.empty>span,:root[data-touch="true"] .slot-caption{font-size:.75rem;line-height:15px;padding:0 1px;color:#dce8f8}
:root[data-touch="true"] .affix-count,:root[data-touch="true"] .lock-mark,:root[data-touch="true"] .enhance-mark{font-size:.75rem;line-height:15px}
:root[data-touch="true"] #inventory-dialog .items-heading{height:26px;min-height:26px;margin-bottom:3px}
:root[data-touch="true"] .items-heading .small-button{font-size:.8125rem;min-height:26px;padding:2px 7px}
:root[data-touch="true"] #inventory-filters{gap:3px}
:root[data-touch="true"] #inventory-filters button{font-size:.8125rem;min-height:28px;padding:3px 0}
:root[data-touch="true"] #inventory-list{grid-template-rows:repeat(var(--cube-rows),42px)}
:root[data-touch="true"] .compact-pages{font-size:.8125rem;min-height:28px;color:#d9e5f6;margin-top:3px}
:root[data-touch="true"] .compact-pages button{font-size:.8125rem;min-height:28px;border-radius:6px;background:#1a2d45;border-color:#435e7c;color:#edf4ff}
:root[data-touch="true"] #item-inspector{padding:8px;gap:6px;border-color:#476181;overflow:hidden;font-size:.875rem}
:root[data-touch="true"] .compact-item-head{min-height:40px;gap:8px}
:root[data-touch="true"] .compact-item-head>img{width:38px;height:38px;border-radius:8px;background:#192c43}
:root[data-touch="true"] .compact-item-head strong{font-size:1rem;line-height:22px;white-space:normal;overflow-wrap:anywhere}
:root[data-touch="true"] .compact-item-head small{font-size:.75rem;line-height:17px;color:#bdcde3}
:root[data-touch="true"] .compact-item-details{display:flex;flex-direction:column;gap:7px;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#58718d transparent;padding-right:2px}
:root[data-touch="true"] .compact-item-base{display:flex;flex-wrap:wrap;gap:3px 12px;padding:4px 0 6px;border-bottom:1px solid #35475f}
:root[data-touch="true"] .compact-item-base .compact-value{flex:1 1 110px}
:root[data-touch="true"] .compact-item-properties{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
:root[data-touch="true"] .compact-item-properties.without-ordinary{grid-template-columns:1fr}
:root[data-touch="true"] .without-ordinary .compact-property-column{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:10px}
:root[data-touch="true"] .without-ordinary .compact-item-group:only-child{grid-column:1/-1}
:root[data-touch="true"] .without-ordinary .compact-item-group:only-child .compact-property-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 12px}
:root[data-touch="true"] .compact-property-column{gap:8px}
:root[data-touch="true"] #item-inspector .compact-item-group h4{margin:0 0 4px;padding:0 0 4px;font-size:.875rem;line-height:20px;color:#9ceadb;border-color:#334c63}
:root[data-touch="true"] .compact-property-rows{gap:3px}
:root[data-touch="true"] .compact-item-details .compact-value,:root[data-touch="true"] .compact-value{font-size:.875rem;line-height:21px;min-height:21px;gap:4px}
:root[data-touch="true"] .compact-value>span{color:#c1d0e5;word-break:keep-all;overflow-wrap:anywhere}
:root[data-touch="true"] .compact-value>b{color:#f2f6ff;font-weight:650;font-variant-numeric:tabular-nums;max-width:60%}
:root[data-touch="true"] .compact-value>b.positive{color:#79edc3}
:root[data-touch="true"] .compact-value>b.negative{color:#ff9caa}
:root[data-touch="true"] .compact-detail-rows{overflow-y:auto;scrollbar-width:thin}
:root[data-touch="true"] .compact-item-comparison{border-top:1px solid #344962;padding-top:5px;flex-shrink:0}
:root[data-touch="true"] .compact-item-comparison summary{font-size:.8125rem;line-height:24px;color:#bcd4ef;cursor:pointer}
:root[data-touch="true"] .compact-item-comparison summary>span{float:right;font-size:.8125rem}
:root[data-touch="true"] .compact-item-comparison[open] summary{margin-bottom:5px}
:root[data-touch="true"] .compact-current-item{font-size:.75rem;line-height:18px;white-space:normal;color:#b5c7de}
:root[data-touch="true"] .compact-compare-rows{gap:3px 12px}
:root[data-touch="true"] .compact-item-origin{font-size:.75rem;line-height:17px;color:#a3b6ce;margin:0}
:root[data-touch="true"] .compact-no-option{font-size:.875rem;color:#abbfd8;line-height:21px}
:root[data-touch="true"] #item-inspector .item-actions{gap:5px;padding-top:5px;border-top:1px solid #304760;background:#0c1729}
:root[data-touch="true"] #item-inspector .item-actions>button{font-size:.875rem;min-height:34px;padding:4px 5px}
:root[data-touch="true"] .compact-empty{font-size:1rem;line-height:1.5;padding:4px}
:root[data-touch="true"] .compact-empty>span{font-size:.875rem;line-height:1.55;color:#b8cbe3}
:root[data-touch="true"] #inventory-dialog>.shop button,:root[data-touch="true"] .inventory-skill-footer>button{height:34px;min-height:34px;font-size:.8125rem;padding:4px 8px;border-radius:8px}
:root[data-touch="true"][data-panel-wide="true"] .cube-layout{grid-template-columns:minmax(140px,.65fr) minmax(180px,.95fr) minmax(280px,1.55fr);gap:8px}
:root[data-touch="true"][data-panel-wide="true"] #equipment-slots .gear-tile{height:42px}
:root[data-touch="true"][data-panel-wide="true"] #inventory-dialog .stats-grid{line-height:24px}

:root[data-touch="true"] .specialization-layout{grid-template-columns:110px minmax(0,1fr);gap:8px}
:root[data-touch="true"] #skill-collection{gap:5px;max-height:none;overflow-y:auto;scrollbar-width:thin}
:root[data-touch="true"] .skill-list-button{padding:5px;gap:5px;min-height:38px;border-radius:8px}
:root[data-touch="true"] .skill-list-button>img{width:28px;height:28px;border-radius:6px}
:root[data-touch="true"] .skill-list-button strong{font-size:.875rem;line-height:20px}
:root[data-touch="true"] .skill-list-button small{font-size:.75rem;line-height:16px;color:#b5c9e1}
:root[data-touch="true"] #specialization-detail{gap:7px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;overscroll-behavior:contain;padding:1px 2px 2px 0}
:root[data-touch="true"] .compact-skill-heading{gap:5px;min-height:42px;padding-bottom:5px;border-bottom:1px solid #38506b}
:root[data-touch="true"] .compact-skill-heading strong{font-size:1.125rem;line-height:24px;color:#f2f6ff}
:root[data-touch="true"] .compact-skill-heading span{font-size:.8125rem;line-height:18px;color:#c5d5ea}
:root[data-touch="true"] .compact-tabs{gap:3px;background:#0a1628;border:1px solid #334962;border-radius:8px;padding:2px}
:root[data-touch="true"] .compact-skill-heading>.compact-tabs{width:110px}
:root[data-touch="true"] .compact-tabs button{font-size:.875rem;min-height:30px;padding:3px 6px;border:0;border-radius:6px;background:transparent;color:#b9cee5}
:root[data-touch="true"] .compact-tabs button[aria-pressed="true"]{background:#23515a;color:#c4fff1;border:0;box-shadow:0 2px 5px #0003}
:root[data-touch="true"] .compact-skill-meta{font-size:.8125rem;line-height:20px;color:#a9e6d9}
:root[data-touch="true"] .trait-list{gap:6px;flex:1;min-height:min-content}
:root[data-touch="true"] .trait-option{padding:8px;gap:5px;flex:1 0 auto;border-radius:9px;min-height:64px}
:root[data-touch="true"] .trait-number{width:15px;flex-shrink:0;font-size:.875rem;line-height:20px;align-self:flex-start}
:root[data-touch="true"] .compact-trait-heading{flex-wrap:wrap;gap:3px 6px;align-items:center}
:root[data-touch="true"] .compact-trait-heading strong{font-size:.9375rem;line-height:21px;font-weight:650}
:root[data-touch="true"] .compact-trait-heading .trait-state{font-size:.75rem;line-height:16px;padding:2px 5px;white-space:normal}
:root[data-touch="true"] .trait-option small{font-size:.9375rem;line-height:1.45;margin-top:4px;color:#c9d8ec}
:root[data-touch="true"] .compact-skill-info{font-size:1rem;line-height:1.6;flex:1 0 auto}
:root[data-touch="true"] .compact-skill-info h4{font-size:1rem;line-height:1.45;color:#a5eedf;margin:8px 0 6px}
:root[data-touch="true"] .compact-skill-info p{font-size:1rem;line-height:1.6;margin:5px 0 14px;color:#d0def0}
:root[data-touch="true"][data-panel-wide="true"] .specialization-layout{grid-template-columns:180px minmax(0,1fr);gap:12px}
:root[data-touch="true"][data-panel-wide="true"] .skill-list-button{padding:7px 10px;gap:10px;min-height:38px}
:root[data-touch="true"][data-panel-wide="true"] .skill-list-button>img{width:36px;height:36px}
:root[data-touch="true"][data-panel-wide="true"] .skill-list-button strong{font-size:1rem;line-height:22px}
:root[data-touch="true"][data-panel-wide="true"] .skill-list-button small{font-size:.8125rem;line-height:17px}
:root[data-touch="true"][data-panel-wide="true"] .trait-option small{font-size:1rem;line-height:1.45}
:root[data-touch="true"][data-panel-wide="true"] .compact-trait-heading strong{font-size:1rem;line-height:23px}
:root[data-touch="true"][data-panel-wide="true"][data-panel-tight="true"] .specialization-layout{grid-template-columns:162px minmax(0,1fr);gap:8px}
:root[data-touch="true"][data-panel-wide="true"][data-panel-tight="true"] #skill-collection{gap:3px}
:root[data-touch="true"][data-panel-wide="true"][data-panel-tight="true"] .skill-list-button{min-height:28px;padding:2px 6px;gap:6px}
:root[data-touch="true"][data-panel-wide="true"][data-panel-tight="true"] .skill-list-button>img{width:24px;height:24px}
:root[data-touch="true"][data-panel-wide="true"][data-panel-tight="true"] .skill-list-button strong{font-size:.875rem;line-height:18px}
:root[data-touch="true"][data-panel-wide="true"][data-panel-tight="true"] .skill-list-button small{font-size:.75rem;line-height:16px}
:root[data-touch="true"][data-panel-wide="true"][data-panel-tight="true"] .trait-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;flex:none}
:root[data-touch="true"][data-panel-wide="true"][data-panel-tight="true"] .trait-option{padding:6px;align-items:flex-start}
:root[data-touch="true"][data-panel-wide="true"][data-panel-tight="true"] .trait-option:last-child{grid-column:1/-1}
:root[data-touch="true"][data-panel-wide="true"][data-panel-tight="true"] .trait-option small{font-size:.875rem;line-height:1.4}
:root[data-touch="true"][data-panel-wide="true"][data-panel-tight="true"] .compact-trait-heading strong{font-size:.875rem;line-height:20px}

/* The HUD stays on the edges while text becomes easier to read. */
:root[data-touch="true"] .regions button,:root[data-touch="true"] .main-menu-button{font-size:.875rem}
:root[data-touch="true"] .topbar{height:calc(44px + env(safe-area-inset-top,0px))}
:root[data-touch="true"] .player-panel{width:218px;max-width:48%;padding:6px 7px}
:root[data-touch="true"] .player-name strong{font-size:.875rem}
:root[data-touch="true"] .player-name>span{font-size:.75rem}
:root[data-touch="true"] .portrait{width:28px;height:40px}
:root[data-touch="true"] .portrait span{font-size:.75rem;min-width:21px;height:17px;line-height:16px}
:root[data-touch="true"] .resource{height:18px}
:root[data-touch="true"] .resource span{font-size:.8125rem;line-height:16px}
:root[data-touch="true"] .quest strong{font-size:.875rem}
:root[data-touch="true"] .right-hud{width:178px}
:root[data-touch="true"] #quest-toggle{min-height:34px}
:root[data-touch="true"] #quest-description,:root[data-touch="true"] .objective{font-size:.875rem}
:root[data-touch="true"] .target-panel{width:250px;padding:6px 8px}
:root[data-touch="true"] .target-panel>span{font-size:.875rem;line-height:19px}
:root[data-touch="true"] .target-panel .resource{height:18px}
:root[data-touch="true"] .boss-timer span{font-size:.75rem}
:root[data-touch="true"] .boss-timer strong{font-size:.9375rem}
:root[data-touch="true"] .bottom-left{top:48px}
:root[data-touch="true"] .currency b,:root[data-touch="true"] .currency>span{font-size:.75rem}
:root[data-touch="true"] .skillbar .skill-name{font-size:.8125rem;line-height:17px;padding:2px 0;font-weight:650}
:root[data-touch="true"] .skillbar .skill-level{font-size:.75rem;line-height:14px;padding:1px 2px}
:root[data-touch="true"] .bottom-right .bag-button{min-height:36px;border-radius:8px}
:root[data-touch="true"] .bottom-right .bag-button>div{font-size:.875rem;line-height:20px;white-space:normal}
:root[data-touch="true"] #auto-skills-state{font-size:.75rem;padding:2px 3px}
:root[data-touch="true"] .auto-run-banner{font-size:.8125rem;line-height:20px;padding:3px 7px}
:root[data-touch="true"] .auto-run-banner button{font-size:.8125rem;min-height:28px}
:root[data-touch="true"] .toast{font-size:.875rem;line-height:1.5;padding:7px 10px}
:root[data-touch="true"] .result-card{border-radius:14px;padding:18px}
:root[data-touch="true"] .result-card h2{font-size:1.5rem;line-height:1.3}
:root[data-touch="true"] .result-card p{font-size:1rem;line-height:1.6}
:root[data-touch="true"] .result-card .gold-button,:root[data-touch="true"] .result-card .secondary-button{min-height:40px;font-size:.9375rem;padding:8px 12px}
:root[data-touch="true"] .auto-countdown{font-size:.875rem;padding:8px}
:root[data-touch="true"] .auto-countdown button{font-size:.875rem;min-height:36px}

@media(max-width:799px){
 :root[data-touch="true"] .target-panel{top:83px;width:240px;max-width:70%}
 :root[data-touch="true"][data-panel-wide="true"] .cube-layout{grid-template-columns:minmax(124px,.55fr) minmax(152px,.7fr) minmax(250px,1.2fr);gap:6px}
 :root[data-touch="true"][data-panel-wide="true"] #equipment-slots{grid-template-columns:repeat(4,minmax(0,1fr))}
 :root[data-touch="true"][data-panel-wide="true"] .specialization-layout{grid-template-columns:154px minmax(0,1fr)}
}
@media(max-width:599px){
 :root[data-touch="true"] .compact-skill-heading>.compact-tabs{width:104px;margin-left:0}
 :root[data-touch="true"] .compact-trait-heading .trait-state{font-size:.75rem}
 :root[data-touch="true"] .trait-option{padding:7px 6px}
 :root[data-touch="true"] .trait-option small{font-size:.875rem;line-height:1.45}
 :root[data-touch="true"] .compact-trait-heading strong{font-size:.9375rem}
 :root[data-touch="true"][data-panel-tight="true"] .skill-list-button>span{display:block}
 :root[data-touch="true"][data-panel-tight="true"] .skill-list-button strong{font-size:.875rem;line-height:20px}
 :root[data-touch="true"][data-panel-tight="true"] .skill-list-button small{font-size:.75rem;line-height:16px}
 :root[data-touch="true"][data-panel-tight="true"] .trait-option small{font-size:.875rem;line-height:1.45}
 :root[data-touch="true"][data-panel-tight="true"] .compact-trait-heading strong{font-size:.9375rem;line-height:21px}
 :root[data-touch="true"][data-panel-tight="true"] .compact-skill-info p{font-size:1rem;line-height:1.6}
 .lobby-class-story{font-size:1rem;line-height:1.65}.lobby-kicker,.lobby-class-role{font-size:.875rem}
 .lobby-class-card strong{font-size:.9375rem}.lobby-class-card small,.lobby-class-card>i{font-size:.75rem}
 .lobby-class-tags>span{font-size:.75rem}.lobby-account a{font-size:.875rem}
 .save-dialog>p,.save-slot p{font-size:.9375rem}.save-slot small{font-size:.8125rem}
}
@media(max-width:479px){
 :root[data-touch="true"] .topbar{height:calc(70px + env(safe-area-inset-top,0px))}
 :root[data-touch="true"] .top-actions{height:36px}.regions{height:34px}
 :root[data-touch="true"] .player-panel{width:48%;padding:5px}
 :root[data-touch="true"] .player-panel .portrait{display:none}
 :root[data-touch="true"] .player-name{flex-wrap:wrap;gap:2px 5px}
 :root[data-touch="true"] .player-name>span{font-size:.75rem}
 :root[data-touch="true"] .right-hud{width:46%}
 :root[data-touch="true"] .target-panel{top:86px}
 :root[data-touch="true"] .bottom-right .bag-button>div{font-size:.8125rem;line-height:18px}
 :root[data-touch="true"] .specialization-layout{grid-template-columns:102px minmax(0,1fr);gap:6px}
 :root[data-touch="true"] .skill-list-button{gap:4px;padding:4px}
 :root[data-touch="true"] .skill-list-button>img{width:24px;height:24px}
}
@media(prefers-reduced-motion:reduce){button{transition:none}dialog::backdrop{backdrop-filter:none}}

:root[data-touch="false"] .skillbar .skill{overflow:visible}