/* Keep the entire HUD inside the browser's visible area. */
:root{--app-height:100dvh;--app-top:0px;--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}
#game-shell{position:fixed;top:var(--app-top);left:0;right:0;height:var(--app-height);padding-bottom:var(--safe-bottom)}
.topbar{padding-top:env(safe-area-inset-top,0px);height:calc(76px + env(safe-area-inset-top,0px))}
.lobby,.lobby-background,.lobby-shade{top:var(--app-top);bottom:auto;height:var(--app-height)}
.lobby{padding-bottom:var(--safe-bottom)}
.screen-overlay{padding:12px;overflow:auto}
.screen-overlay .result-card{max-height:100%;overflow-y:auto;overscroll-behavior:contain}
dialog,#merchant-dialog{max-height:calc(var(--app-height) - 24px - var(--safe-bottom) - env(safe-area-inset-top,0px));overflow-y:auto}
#pause-screen{z-index:25}
.auto-countdown{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;padding:10px;margin:12px 0;border:1px solid #71c9bd55;background:#173c39;color:#b9f0dd;font-size:13px;line-height:1.6}
.auto-countdown button{background:#091e24;border:1px solid #a6cfc56b;min-height:40px;padding:6px 12px;white-space:nowrap}
.auto-run-banner{position:absolute;left:50%;top:84px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:5px 9px;background:#071e24de;border:1px solid #78b9aa66;font-size:12px;color:#b9e5d5;z-index:6;max-width:90%}
.auto-run-banner button{padding:7px;background:#284f48;border:1px solid #88bdad77;white-space:nowrap}

/* Compact touch HUD: information stays at the edges; controls keep a usable hit area. */
:root[data-touch="true"]{--hud-gap:6px;--stick-size:80px}
:root[data-touch="true"] .topbar{height:calc(42px + env(safe-area-inset-top,0px));padding-inline:max(6px,var(--safe-left)) max(6px,var(--safe-right));gap:8px}
:root[data-touch="true"] .wordmark{display:none}
:root[data-touch="true"] .regions{gap:10px;margin:0;min-width:0}
:root[data-touch="true"] .regions button{font-size:12px;min-height:32px;padding-inline:2px}
:root[data-touch="true"] .top-actions{gap:4px}
:root[data-touch="true"] .top-actions .mode-label{display:none}
:root[data-touch="true"] .top-actions button{min-height:32px}
:root[data-touch="true"] .icon-button{width:32px;height:32px;font-size:16px}
:root[data-touch="true"] #sound-button,:root[data-touch="true"] #help-button{display:block}
:root[data-touch="true"] .main-menu-button{padding:4px 8px;font-size:12px}
:root[data-touch="true"] .location,:root[data-touch="true"] .minimap,:root[data-touch="true"] #context-hint,:root[data-touch="true"] #combat-log,:root[data-touch="true"] .save-label{display:none}
:root[data-touch="true"] .player-panel{top:6px;left:max(6px,var(--safe-left));width:190px;max-width:48%;padding:5px 7px;gap:6px;pointer-events:none}
:root[data-touch="true"] .portrait{width:25px;height:34px}
:root[data-touch="true"] .portrait span{left:3px;bottom:-3px;height:15px;line-height:14px;min-width:18px;font-size:10px}
:root[data-touch="true"] .player-info{min-width:0}
:root[data-touch="true"] .player-name{margin-bottom:3px;gap:4px;white-space:nowrap}
:root[data-touch="true"] .player-name strong{font-size:12px}
:root[data-touch="true"] .player-name>span{font-size:10px}
:root[data-touch="true"] .player-name .class-icon{width:15px;height:15px}
:root[data-touch="true"] .resource{height:13px}
:root[data-touch="true"] .resource span{font-size:10px;line-height:11px}
:root[data-touch="true"] .resource.mp{margin-top:3px}
:root[data-touch="true"] .exp-track{margin-top:3px}
:root[data-touch="true"] .right-hud{top:6px;right:max(6px,var(--safe-right));width:156px;max-width:46%;z-index:6}
:root[data-touch="true"] .quest{padding:0 6px;margin:0}
:root[data-touch="true"] #quest-toggle{min-height:30px;gap:4px}
:root[data-touch="true"] .quest-symbol{font-size:18px}
:root[data-touch="true"] .quest strong{font-size:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root[data-touch="true"] #quest-body{max-height:calc(var(--app-height) - var(--dock-height) - 150px);overflow:auto;padding-bottom:6px}
:root[data-touch="true"] #quest-description,:root[data-touch="true"] .objective{font-size:12px;margin-block:6px}
:root[data-touch="true"] .target-panel{top:6px;left:50%;transform:translateX(-50%);width:212px;max-width:40%;padding:4px 7px;pointer-events:none}
:root[data-touch="true"] .target-panel>span{display:block;font-size:11px;line-height:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root[data-touch="true"] .target-panel .resource{margin-top:3px;height:13px}
:root[data-touch="true"] .boss-timer{margin-top:3px}
:root[data-touch="true"] .boss-timer span{font-size:10px}
:root[data-touch="true"] .boss-timer strong{font-size:13px;line-height:16px}
:root[data-touch="true"] .boss-time-track{margin-top:2px;height:2px}
:root[data-touch="true"] .skills-wrap,:root[data-touch="true"] .bottom-right{left:auto;right:max(6px,var(--safe-right));width:min(var(--dock-width),calc(100% - max(6px,var(--safe-left)) - max(6px,var(--safe-right))));max-width:none;transform:none;z-index:8}
:root[data-touch="true"] .skills-wrap{bottom:6px}
:root[data-touch="true"] .skillbar{grid-template-columns:repeat(var(--skill-columns),minmax(0,1fr));gap:3px;padding:4px;box-shadow:0 3px 16px #0005}
:root[data-touch="true"] .skillbar .skill{width:100%;height:var(--skill-height);min-width:0}
:root[data-touch="true"] .skillbar .skill kbd{display:none}
:root[data-touch="true"] .skillbar .skill-name{font-size:10px;padding:2px 0;line-height:1.1;white-space:nowrap}
:root[data-touch="true"] .skillbar .skill-level{font-size:10px;top:2px;right:2px;padding:1px 2px}
:root[data-touch="true"] .skill-art{font-size:29px;padding-bottom:9px}
:root[data-touch="true"] .cooldown{font-size:19px}
:root[data-touch="true"] .bottom-right{bottom:calc(var(--skillbar-height) + 10px);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}
:root[data-touch="true"] .bottom-right .bag-button{padding:3px;min-width:0;min-height:32px;justify-content:center;gap:3px}
:root[data-touch="true"] .bottom-right .bag-button>div{font-size:11px;line-height:1.2;text-align:center;white-space:nowrap}
:root[data-touch="true"] .bottom-right .auto-skill-toggle>div{min-width:0;gap:3px;justify-content:center}
:root[data-touch="true"] .bottom-right .bag-button small,:root[data-touch="true"] .bag-button>span,:root[data-touch="true"] .bag-button>img{display:none}
:root[data-touch="true"] .bag-button>b{width:14px;height:14px;line-height:14px;font-size:10px;top:-3px;right:-2px}
:root[data-touch="true"] #auto-skills-state{margin:0;padding:2px;font-size:10px}
:root[data-touch="true"] .bottom-left{top:42px;bottom:auto;right:max(6px,var(--safe-right));left:auto;width:auto;max-width:46%;pointer-events:none}
:root[data-touch="true"] .currency{padding:2px 5px;gap:4px;max-width:100%;flex-wrap:wrap;border-color:#9ebda22b}
:root[data-touch="true"] .currency b{font-size:10px;overflow-wrap:anywhere;max-width:100%}
:root[data-touch="true"] .currency>span{font-size:10px}
:root[data-touch="true"] .currency .coin,:root[data-touch="true"] .currency .aether{font-size:12px;margin:0}
:root[data-touch="true"] .interact-wrap{left:auto;right:max(6px,var(--safe-right));bottom:calc(var(--dock-height) + 34px);transform:none;z-index:8}
:root[data-touch="true"] .interact-button{min-height:36px;padding:5px 9px;font-size:12px}
:root[data-touch="true"] .interact-button kbd{display:none}
:root[data-touch="true"] .auto-run-banner{top:auto;bottom:calc(var(--dock-height) + 2px);left:auto;right:max(6px,var(--safe-right));transform:none;width:max-content;max-width:calc(100% - 12px);gap:6px;padding:2px 6px;font-size:11px;line-height:16px;border-radius:3px;min-height:24px;z-index:8}
:root[data-touch="true"] #auto-run-mode{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}
:root[data-touch="true"] .auto-run-banner button{min-height:26px;padding:3px 6px;font-size:11px;flex-shrink:0}
:root[data-touch="true"] .auto-run-banner:has(button[hidden]){pointer-events:none}
:root[data-touch="true"] #toast-stack{top:28%;width:min(310px,85%);gap:4px;z-index:9}
:root[data-touch="true"] .toast{padding:5px 8px;font-size:12px}
:root[data-touch="true"] .result-card{padding:14px;width:min(360px,100%)}
:root[data-touch="true"] .result-card h2{font-size:20px;margin:6px 0}
:root[data-touch="true"] .result-card p{font-size:13px;line-height:1.6;margin-block:8px}
:root[data-touch="true"] .result-card .gold-button,:root[data-touch="true"] .result-card .secondary-button{min-height:36px;padding:7px 10px;font-size:13px}
:root[data-touch="true"] .victory-loot{padding:8px;margin:8px 0;gap:4px}
:root[data-touch="true"] .auto-countdown{padding:5px;margin:6px 0;font-size:12px;gap:5px}
:root[data-touch="true"] .auto-countdown button{min-height:32px;padding:4px 7px;font-size:12px}
:root[data-touch="true"] dialog,:root[data-touch="true"] #merchant-dialog{padding:14px;max-width:calc(100vw - 16px)}
:root[data-touch="true"] .dialog-heading{padding-bottom:10px}
:root[data-touch="true"] .dialog-heading h2{font-size:20px}
:root[data-touch="true"] .close-dialog{width:32px;height:32px;min-width:32px;min-height:32px;font-size:22px}
:root[data-touch="true"] .dialog-footer{margin-top:12px;padding-top:10px}
:root[data-touch="true"] .trait-option{padding:8px;gap:7px}
:root[data-touch="true"] .trait-option strong{font-size:14px}
:root[data-touch="true"] .trait-option small{font-size:12px;line-height:1.5}
:root[data-touch="true"][data-narrow="true"] .target-panel{top:68px;width:196px;max-width:70%}
:root[data-touch="true"][data-narrow="true"] .player-panel{width:174px}
:root[data-touch="true"][data-narrow="true"] .player-panel .portrait{width:22px;height:32px}
:root[data-touch="true"][data-narrow="true"] .player-name .class-icon{display:none}
:root[data-touch="true"][data-short="true"]{--stick-size:72px}
:root[data-touch="true"][data-short="true"] .topbar{height:calc(36px + env(safe-area-inset-top,0px))}
:root[data-touch="true"][data-short="true"] .player-panel{padding:4px 6px}
:root[data-touch="true"][data-short="true"] .target-panel{padding:3px 6px}
@media(max-width:479px){
 :root[data-touch="true"] .topbar{height:calc(66px + env(safe-area-inset-top,0px));flex-wrap:wrap;gap:0;justify-content:center}
 :root[data-touch="true"] .top-actions{order:0;width:100%;height:34px;justify-content:flex-end}
 :root[data-touch="true"] .regions{order:1;width:100%;height:32px;justify-content:space-around}
 :root[data-touch="true"] .regions button{min-height:30px}
 :root[data-touch="true"] .player-panel{width:46%;padding:4px 5px}
 :root[data-touch="true"] .player-name{gap:2px}
 :root[data-touch="true"] .player-name strong{font-size:11px}
 :root[data-touch="true"] .player-name>span{font-size:9px}
 :root[data-touch="true"] .player-panel .portrait{width:20px;height:30px}
 :root[data-touch="true"] .bottom-right .bag-button>div{font-size:10px}
}
/* The ring is only a visual; the canvas retains the moving finger's pointer capture. */
#joystick{display:none;pointer-events:none;left:0;top:0;bottom:auto;width:var(--stick-size,80px);height:var(--stick-size,80px);transform:translate(-50%,-50%);z-index:7;background:#102d3270;border-color:#c4e3d789;box-shadow:0 0 0 3px #06222b33}
#joystick[data-active="true"]{display:block}
#joystick-knob{width:32px;height:32px;left:calc(50% - 16px);top:calc(50% - 16px);background:#b5dcc278;border-color:#e1f9d8b3}

/* Bag collections use pages; a selected item's complete options stay together. */
:root[data-touch="true"] :is(#inventory-dialog,#skills-dialog){position:fixed;top:calc(var(--app-top) + max(8px,env(safe-area-inset-top,0px)));left:50%;right:auto;bottom:auto;transform:translateX(-50%);margin:0;width:min(960px,calc(100vw - 16px - var(--safe-left) - var(--safe-right)));height:min(730px,calc(var(--app-height) - max(8px,env(safe-area-inset-top,0px)) - max(8px,var(--safe-bottom))));max-height:calc(var(--app-height) - 16px);max-width:none;padding:8px;overflow:hidden;min-height:0}
:root[data-touch="true"] :is(#inventory-dialog,#skills-dialog) .dialog-heading{min-height:32px;padding:0 0 4px;gap:6px}
:root[data-touch="true"] :is(#inventory-dialog,#skills-dialog) .dialog-heading .eyebrow{display:none}
:root[data-touch="true"] :is(#inventory-dialog,#skills-dialog) .dialog-heading h2{font-size:17px;line-height:24px;margin:0}
:root[data-touch="true"] :is(#inventory-dialog,#skills-dialog) .dialog-class-icon{width:20px;height:22px}
:root[data-touch="true"] :is(#inventory-dialog,#skills-dialog)>.dialog-footer{display:none}
:root[data-touch="true"] #inventory-dialog[open]{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:32px auto minmax(0,1fr) 32px;gap:6px}
:root[data-touch="true"] #inventory-dialog>.dialog-heading,:root[data-touch="true"] #character-stats,:root[data-touch="true"] .cube-layout{grid-column:1/-1}
:root[data-touch="true"] #character-stats{display:flex;align-items:center;gap:6px;min-width:0}
:root[data-touch="true"] #inventory-dialog .stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));flex:1;gap:2px 6px;padding:0;border:0;font-size:11px;line-height:15px}
:root[data-touch="true"] #inventory-dialog .stats-grid>span{white-space:nowrap;min-width:0}
:root[data-touch="true"] #inventory-dialog .stats-grid b{margin-left:2px}
:root[data-touch="true"] .compact-button{padding:3px 7px;min-height:28px;background:#16333b;border:1px solid #77988c66;font-size:11px;white-space:nowrap}
:root[data-touch="true"] .cube-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);gap:6px;min-height:0;align-items:stretch}
:root[data-touch="true"] .cube-layout h3{font-size:12px;line-height:18px;margin:0}
:root[data-touch="true"] .cube-layout .equipment-panel{display:block;min-width:0}
:root[data-touch="true"] .equipment-panel h3>span,:root[data-touch="true"] .items-heading h3>span{display:inline;font-size:10px;margin-left:4px}
:root[data-touch="true"] #equipment-slots{grid-column:auto;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px;margin-top:3px}
:root[data-touch="true"] .gear-tile{height:40px;aspect-ratio:auto;padding:1px}
:root[data-touch="true"] #equipment-slots .gear-tile{height:34px}
:root[data-touch="true"] .gear-tile img{inset:1px;width:calc(100% - 2px);height:calc(100% - 2px)}
:root[data-touch="true"] .gear-tile.empty>span,:root[data-touch="true"] .slot-caption{font-size:9px;line-height:11px;white-space:nowrap;padding:0 1px}
:root[data-touch="true"] #equipment-slots .affix-count{display:none}
:root[data-touch="true"] .affix-count,:root[data-touch="true"] .lock-mark,:root[data-touch="true"] .enhance-mark{font-size:10px;padding:0 1px}
:root[data-touch="true"] #inventory-dialog .items-heading{height:22px;min-height:22px;margin:0 0 2px;gap:4px}
:root[data-touch="true"] .items-heading .small-button{min-height:22px;padding:2px 5px;font-size:10px;max-width:none}
:root[data-touch="true"] .cube-body{display:flex;flex-direction:column;gap:3px}
:root[data-touch="true"] #inventory-filters{order:-1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px}
:root[data-touch="true"] #inventory-filters button{min-height:24px;padding:2px 0;font-size:10px;white-space:nowrap}
:root[data-touch="true"] .inventory-scroll{max-height:none;overflow:hidden;padding:0;scrollbar-gutter:auto}
:root[data-touch="true"] #inventory-list{grid-template-columns:repeat(var(--cube-columns),minmax(0,1fr));grid-template-rows:repeat(var(--cube-rows),40px);gap:3px;align-items:stretch}
:root[data-touch="true"] .compact-pages{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:24px;font-size:11px;margin-top:3px;flex-shrink:0}
:root[data-touch="true"] .compact-pages button{min-width:44px;min-height:24px;padding:2px 7px;border:1px solid #66897b66;background:#163139;font-size:11px}
:root[data-touch="true"] .compact-pages button:disabled{opacity:.35;cursor:default}
:root[data-touch="true"] #inventory-dialog .compact-detail-rows.all-character-stats{grid-template-columns:1fr;overflow-y:auto;touch-action:pan-y;overscroll-behavior:contain}
:root[data-touch="true"] #item-inspector{grid-column:auto;display:flex;flex-direction:column;gap:4px;min-height:0;max-height:none;overflow:hidden;padding:6px;font-size:12px;scrollbar-gutter:auto}
:root[data-touch="true"] .compact-item-head{display:flex;align-items:center;gap:5px;min-height:30px;flex-shrink:0}
:root[data-touch="true"] .compact-item-head>img{width:28px;height:28px;object-fit:contain;border:1px solid var(--rarity,#5b897c)}
:root[data-touch="true"] .compact-item-head>div{flex:1;min-width:0}
:root[data-touch="true"] .compact-item-head strong{display:block;font-size:12px;color:var(--rarity,#ebdfbc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-touch="true"] .compact-item-head small{display:block;font-size:10px;line-height:13px;color:#aac3ba}
:root[data-touch="true"] .compact-item-head>.compact-button{margin-left:auto}
:root[data-touch="true"] .compact-item-details{display:grid;min-height:0;flex:1;gap:8px;align-content:start}
:root[data-touch="true"] .compact-item-properties{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start;min-width:0}
:root[data-touch="true"] .compact-item-properties:only-child{grid-column:1/-1}
:root[data-touch="true"] .compact-property-column{display:flex;flex-direction:column;gap:7px;min-width:0}
:root[data-touch="true"] .compact-item-group{min-width:0}
:root[data-touch="true"] :is(.compact-item-group,.compact-item-comparison) h4{margin:0 0 3px;padding:0 0 3px;border-bottom:1px solid #7a92744d;font-size:12px;line-height:16px;color:#e8d29f}
:root[data-touch="true"] .compact-item-comparison h4 small{font-size:10px;font-weight:400;color:#a9bcb0}
:root[data-touch="true"] .compact-property-rows{display:flex;flex-direction:column;gap:2px}
:root[data-touch="true"] .compact-item-details .compact-value{min-height:18px;font-size:12px;line-height:18px;gap:4px}
:root[data-touch="true"] .compact-item-details .compact-value>b{flex-shrink:0;max-width:62%}
:root[data-touch="true"] .compact-no-option{font-size:11px;line-height:16px;color:#91a89d}
:root[data-touch="true"] .compact-item-comparison{min-width:0}
:root[data-touch="true"] .compact-current-item{margin:0 0 4px;font-size:10px;line-height:14px;color:#9db6aa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-touch="true"] .compact-compare-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--compare-rows),auto);grid-auto-flow:column;gap:2px 10px;align-content:start}
:root[data-touch="true"] .compact-tabs{display:flex;gap:3px;flex-shrink:0}
:root[data-touch="true"] .compact-tabs button{flex:1;min-height:26px;padding:3px 5px;background:#102930;border:1px solid #5c81705c;font-size:11px;white-space:nowrap}
:root[data-touch="true"] .compact-tabs button[aria-pressed="true"]{background:#394430;border-color:#dac182;color:#f2dfaa}
:root[data-touch="true"] .compact-detail-rows{display:flex;flex-direction:column;gap:4px;min-height:0;flex:1;justify-content:flex-start}
:root[data-touch="true"] .compact-value{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0;min-height:20px;line-height:16px;font-size:12px}
:root[data-touch="true"] .compact-value>span{min-width:0;color:#b0c8bf;overflow-wrap:anywhere}
:root[data-touch="true"] .compact-value>b{font-weight:500;text-align:right;overflow-wrap:anywhere;max-width:66%}
:root[data-touch="true"] #item-inspector .item-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;margin-top:auto;flex-shrink:0}
:root[data-touch="true"] #item-inspector .item-actions>button{grid-column:auto;min-height:28px;padding:3px 4px;font-size:11px}
:root[data-touch="true"] .compact-empty{display:flex;flex-direction:column;gap:5px;font-size:12px;line-height:17px}
:root[data-touch="true"] .compact-empty>span{font-size:11px;color:#a9c4ba}
:root[data-touch="true"] #inventory-dialog>.shop{grid-column:1;margin:0;padding:0;border:0}
:root[data-touch="true"] #inventory-dialog>.shop button{height:32px;min-height:32px;padding:4px 6px;font-size:11px;align-items:center;gap:3px}
:root[data-touch="true"] .inventory-skill-footer{grid-column:2;margin:0;padding:0;border:0;display:flex;min-height:0}
:root[data-touch="true"] .inventory-skill-footer>button{width:100%;height:32px;min-height:32px;padding:4px 6px;font-size:11px}
:root[data-touch="true"] #inventory-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:root[data-touch="true"][data-panel-wide="true"] #inventory-dialog .stats-grid{grid-template-columns:repeat(6,minmax(0,1fr));line-height:22px}
:root[data-touch="true"][data-panel-wide="true"] .cube-layout{grid-template-columns:minmax(112px,.8fr) minmax(164px,1.2fr) minmax(200px,1.4fr);grid-template-rows:minmax(0,1fr);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"] #equipment-slots .gear-tile{height:36px}
:root[data-touch="true"][data-panel-tight="true"] .compact-value{font-size:11px;line-height:15px}
:root[data-touch="true"][data-panel-wide="true"] .compact-item-details{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
:root[data-touch="true"][data-panel-tight="true"] .compact-property-column{gap:4px}
:root[data-touch="true"][data-panel-tight="true"] :is(.compact-item-group,.compact-item-comparison) h4{margin-bottom:2px;padding-bottom:2px;font-size:11px;line-height:14px}
:root[data-touch="true"][data-panel-tight="true"] .compact-item-details .compact-value{font-size:11px;min-height:15px;line-height:15px}
:root[data-touch="true"][data-panel-tight="true"] :is(.compact-property-rows,.compact-compare-rows){row-gap:1px}

:root[data-touch="true"] #skills-dialog[open]{display:flex;flex-direction:column;gap:6px}
:root[data-touch="true"] #skills-dialog :is(.loadout-guide,.selection-status){display:none}
:root[data-touch="true"] .specialization-layout{display:grid;grid-template-columns:104px minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:6px;min-height:0;flex:1;align-items:stretch}
:root[data-touch="true"] #skill-collection{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(9,minmax(0,1fr));gap:4px;min-height:0;max-height:576px;align-content:stretch}
:root[data-touch="true"] .skill-list-button{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:5px;height:auto;min-height:0;padding:4px;text-align:left}
:root[data-touch="true"] .skill-list-button>img{width:26px;height:26px;flex-shrink:0}
:root[data-touch="true"] .skill-list-button>span{min-width:0}
:root[data-touch="true"] .skill-list-button strong{font-size:12px;line-height:16px;white-space:nowrap}
:root[data-touch="true"] .skill-list-button small{font-size:11px;line-height:14px;margin:2px 0 0}
:root[data-touch="true"] #specialization-detail{display:flex;flex-direction:column;min-height:0;gap:4px}
:root[data-touch="true"] .compact-skill-heading{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:32px;flex-shrink:0}
:root[data-touch="true"] .compact-skill-heading>div{min-width:0}
:root[data-touch="true"] .compact-skill-heading strong{font-size:15px;line-height:18px;display:block;color:#f0dfb8}
:root[data-touch="true"] .compact-skill-heading span{font-size:11px;line-height:14px;color:#b7c7b9}
:root[data-touch="true"] .compact-skill-heading>.compact-tabs{width:100px}
:root[data-touch="true"] .compact-skill-meta{font-size:11px;line-height:15px;margin:0;color:#a8c6bd;flex-shrink:0}
:root[data-touch="true"] .trait-list{display:flex;flex-direction:column;gap:4px;min-height:0;flex:1}
:root[data-touch="true"] .trait-option{flex:1 0 auto;display:flex;gap:5px;min-height:0;padding:5px;align-items:center}
:root[data-touch="true"] .trait-number{font-size:14px;width:16px}
:root[data-touch="true"] .compact-trait-copy{flex:1;min-width:0}
:root[data-touch="true"] .compact-trait-heading{display:flex;align-items:center;justify-content:space-between;gap:4px}
:root[data-touch="true"] .compact-trait-heading strong{font-size:13px;line-height:17px;min-width:0}
:root[data-touch="true"] .compact-trait-heading .trait-state{font-size:10px;line-height:13px;max-width:none;white-space:nowrap}
:root[data-touch="true"] .trait-option small{font-size:12px;line-height:1.35;margin-top:2px;overflow-wrap:anywhere}
:root[data-touch="true"] .compact-skill-info{min-height:0;flex:1;font-size:12px;line-height:1.5}
:root[data-touch="true"] .compact-skill-info h4{font-size:13px;line-height:18px;margin:7px 0 4px;color:#e8d29f}
:root[data-touch="true"] .compact-skill-info p{font-size:12px;line-height:1.5;margin:4px 0 10px;color:#bbd0c5}
:root[data-touch="true"][data-panel-wide="true"] .specialization-layout{grid-template-columns:184px minmax(0,1fr);gap:8px}
:root[data-touch="true"][data-panel-wide="true"] .skill-list-button{padding:5px 9px;gap:10px}
:root[data-touch="true"][data-panel-wide="true"] .skill-list-button>img{width:34px;height:34px}
:root[data-touch="true"][data-panel-wide="true"] .skill-list-button strong{font-size:14px;line-height:18px}
:root[data-touch="true"][data-panel-wide="true"] .skill-list-button small{font-size:12px;line-height:15px}
:root[data-touch="true"][data-panel-wide="true"][data-panel-tight="true"] .specialization-layout{grid-template-columns:164px minmax(0,1fr)}
:root[data-touch="true"][data-panel-tight="true"] #skill-collection{gap:2px}
:root[data-touch="true"][data-panel-tight="true"] .skill-list-button{padding:2px 5px;gap:6px}
:root[data-touch="true"][data-panel-tight="true"] .skill-list-button>img{width:22px;height:22px}
:root[data-touch="true"][data-panel-tight="true"] .skill-list-button>span{display:flex;align-items:baseline;justify-content:space-between;gap:5px;flex:1}
:root[data-touch="true"][data-panel-tight="true"] .skill-list-button strong{font-size:13px;line-height:16px}
:root[data-touch="true"][data-panel-tight="true"] .skill-list-button small{font-size:11px;line-height:14px;margin:0}
:root[data-touch="true"][data-panel-tight="true"] .trait-option{padding:3px 4px;gap:3px}
:root[data-touch="true"][data-panel-tight="true"] .compact-trait-heading strong{font-size:12px;line-height:15px}
:root[data-touch="true"][data-panel-tight="true"] .trait-option small{font-size:11px;line-height:1.25;margin-top:1px}
:root[data-touch="true"][data-panel-tight="true"] .compact-skill-info p{font-size:11px;line-height:1.4}
@media(max-width:599px){
 :root[data-touch="true"] .compact-skill-heading{flex-wrap:wrap;gap:3px}
 :root[data-touch="true"] .compact-skill-heading>.compact-tabs{width:84px;margin-left:auto}
 :root[data-touch="true"] .compact-trait-heading{flex-wrap:wrap;gap:0 4px}
 :root[data-touch="true"] .compact-trait-heading strong{font-size:12px;line-height:15px}
 :root[data-touch="true"] .trait-option small{font-size:11px;line-height:1.3}
}