/* Soul selector paint only. Native icons/text/state come from SoulSkillView.
   These scoped selectors also override the later PC theme inside this window. */
#gameHud #soulSkillWindow.soul-skill-window{
 --soul-gold:#d0a455;--soul-paper:#f3e3bb;
 left:24px;right:auto;top:72px;transform:none;
 width:min(760px,calc(100vw - 48px));max-width:calc(100vw - 48px);
 max-height:calc(100dvh - 96px);box-sizing:border-box;overflow:auto;
 padding:0 20px 20px;border:1px solid var(--soul-gold);border-image:none;
 border-radius:5px;color:var(--soul-paper);
 background:radial-gradient(ellipse at 0 0,#a477271a,transparent 48%),linear-gradient(125deg,#222525fa,#0d1115fc 70%);
 box-shadow:inset 0 0 0 3px #090d11,inset 0 0 0 4px #ae854e55,0 12px 45px #000c;
 scrollbar-color:#a17f43 #101317;scrollbar-width:thin;overscroll-behavior:contain;
}
#gameHud #soulSkillWindow.soul-skill-window[hidden],
#gameHud #soulSkillWindow .soul-skill-detail[hidden]{display:none!important}
#gameHud #soulSkillWindow.soul-skill-window>h2{
 margin:0 -20px 12px;padding:16px 64px 16px 20px;min-height:56px;box-sizing:border-box;
 background:linear-gradient(100deg,#b58d3830,#3a33241a 60%,#0000);
 border-bottom:1px solid #c49a4b99;box-shadow:0 2px #080b0e,0 3px #8d713d44;
 color:#f4dfad;font:normal 27px/1.15 Georgia,'Times New Roman',serif;
 letter-spacing:.6px;text-shadow:0 1px 3px #000,0 0 12px #c3933544;
}
#gameHud #soulSkillWindow.soul-skill-window>.window-close{
 width:44px;height:44px;min-height:44px;right:8px;top:7px;
 line-height:40px;font-size:30px;padding:0!important;color:#f1dfb4!important;
 border:1px solid transparent;background:transparent;box-shadow:none;
}
#gameHud #soulSkillWindow.soul-skill-window>[role=status]{
 min-height:1.5em;margin:10px 0 12px;color:#d7c6a0;font-size:13px;line-height:1.5;
}
#gameHud #soulSkillWindow .soul-skill-card-grid{
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
}
#gameHud #soulSkillWindow .soul-skill-card{
 --soul-accent:#edba51;--soul-glow:#c98a1f;
 display:grid;grid-template-columns:56px minmax(0,1fr);grid-auto-rows:min-content;
 align-content:start;align-items:center;gap:7px 10px;position:relative;
 min-width:0;min-height:190px;padding:16px!important;box-sizing:border-box;
 border:1px solid var(--soul-accent);border-radius:3px;text-align:left;
 color:#f1dfb6;background:radial-gradient(ellipse at 100% 100%,color-mix(in srgb,var(--soul-glow) 24%,transparent),transparent 78%),#0d1216;
 box-shadow:inset 0 0 0 3px #0c1115,inset 0 0 0 4px color-mix(in srgb,var(--soul-accent) 30%,transparent),0 3px 9px #0007;
 cursor:pointer;touch-action:pan-y;white-space:normal;font:inherit;
}
#gameHud #soulSkillWindow .soul-skill-card[data-soul-color="1"]{--soul-accent:#72c8f3;--soul-glow:#1688d1}
#gameHud #soulSkillWindow .soul-skill-card[data-soul-color="2"]{--soul-accent:#ec8a68;--soul-glow:#bc3322}
#gameHud #soulSkillWindow .soul-skill-card[data-soul-color="3"]{--soul-accent:#a3ca67;--soul-glow:#4e8d28}
/* Small corner strokes are decoration, never fake skill images or text. */
#gameHud #soulSkillWindow .soul-skill-card::before,
#gameHud #soulSkillWindow .soul-skill-card::after{
 content:'';position:absolute;width:15px;height:15px;pointer-events:none;
 border-color:var(--soul-accent);border-style:solid;opacity:.9;
}
#gameHud #soulSkillWindow .soul-skill-card::before{left:4px;top:4px;border-width:2px 0 0 2px}
#gameHud #soulSkillWindow .soul-skill-card::after{right:4px;bottom:4px;border-width:0 2px 2px 0}
#gameHud #soulSkillWindow .soul-skill-card:is(:hover,:focus-visible){
 outline:2px solid var(--soul-accent);outline-offset:2px;filter:brightness(1.08);
}
#gameHud #soulSkillWindow .soul-skill-card.is-selected{
 box-shadow:inset 0 0 0 2px var(--soul-accent),inset 0 0 20px color-mix(in srgb,var(--soul-glow) 22%,transparent),0 0 12px #c3933529;
}
#gameHud #soulSkillWindow .soul-skill-card.is-unavailable{border-style:dashed}
#gameHud #soulSkillWindow .soul-skill-card.is-soul-dragging{outline:2px dashed var(--soul-accent);outline-offset:2px}
#gameHud #soulSkillWindow .soul-skill-card.is-unavailable .soul-skill-drag-handle{filter:saturate(.5)}
#gameHud #soulSkillWindow .soul-skill-drag-handle{
 grid-column:1;grid-row:1/3;display:grid;place-items:center;
 width:52px;height:52px;border:1px solid var(--soul-accent);border-radius:50%;
 background:#080e13;box-shadow:0 0 13px color-mix(in srgb,var(--soul-glow) 35%,transparent);
 touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;
}
#gameHud #soulSkillWindow [data-soul-drag-handle]{touch-action:none}
#gameHud #soulSkillWindow .soul-skill-drag-handle .skill-icon{flex:none;border-radius:50%;pointer-events:none;margin:0}
#gameHud #soulSkillWindow .soul-skill-card-label{grid-column:2;color:#fff0c8;font:normal 21px/1.2 Georgia,'Times New Roman',serif}
#gameHud #soulSkillWindow .soul-skill-card-name{grid-column:2;color:var(--soul-accent);font-size:16px;line-height:1.4;font-weight:600}
#gameHud #soulSkillWindow :is(.soul-skill-card-progress,.soul-skill-card-balance,.soul-skill-card-selected,.soul-skill-card-cooldown){grid-column:1/-1;font-size:14px;line-height:1.45;overflow-wrap:anywhere}
#gameHud #soulSkillWindow .soul-skill-card-progress{margin-top:7px;color:#efe0bc}
#gameHud #soulSkillWindow .soul-skill-card-balance{color:#d3c3a4}
#gameHud #soulSkillWindow .soul-skill-card-selected{color:#ffe6a4;font-weight:600;min-height:1.4em}

#gameHud #soulSkillWindow .soul-skill-detail{
 position:relative;box-sizing:border-box;min-width:0;margin-top:16px;padding:18px;
 border:1px solid #b18c4f;border-radius:3px;background:#10161b;
 box-shadow:inset 0 0 0 3px #090e12;color:#e8ddc5;
 font-size:14px;line-height:1.6;overflow-wrap:anywhere;overscroll-behavior:contain;
}
#gameHud #soulSkillWindow .soul-skill-detail :is(h3,h4){margin:0 48px 10px 0;color:#f1d69e;font-size:20px;line-height:1.4}
#gameHud #soulSkillWindow .soul-skill-detail .skill-icon{float:left;margin:0 12px 10px 0;flex:none}
#gameHud #soulSkillWindow .soul-skill-detail-stats{display:grid;gap:5px;margin:10px 0}
#gameHud #soulSkillWindow .soul-skill-detail-content{white-space:pre-line;line-height:1.65;clear:both}
#gameHud #soulSkillWindow .soul-skill-detail-close{
 position:absolute;right:8px;top:8px;min-width:44px;min-height:44px;padding:4px!important;font-size:23px;
}
#gameHud #soulSkillWindow .soul-skill-assign{
 display:block;width:calc(100% - 56px);min-height:44px;margin-top:16px;padding:10px 16px!important;
 border:1px solid #d5b16b;border-radius:3px;color:#ffedbd;
 background:linear-gradient(#685333,#30271e);font-size:15px;line-height:1.4;
}
#gameHud #soulSkillWindow .soul-skill-assign:disabled{opacity:.65;cursor:default}
.soul-skill-toggle{min-height:36px}

/* Transfer the previously measured cast coordinates to the active dropzone.
   A direct button is supported during the same atomic JS/CSS integration. */
#gameHud .game-bottom .hotbar-frame:has(>.soul-skill-slot,>.soul-skill-action){position:relative}
#gameHud .game-bottom .hotbar-frame>:is(.soul-skill-slot,.soul-skill-action){
 position:absolute;right:0;bottom:calc(100% + 6px);min-width:44px;min-height:44px;max-width:130px;box-sizing:border-box;
}
#gameHud .soul-skill-slot{pointer-events:auto;touch-action:pan-y}
.soul-skill-action{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;box-sizing:border-box}
#gameHud .soul-skill-slot>.soul-skill-action{width:100%;height:100%;position:relative}
#gameHud .soul-skill-slot>.soul-skill-action:disabled{pointer-events:none}
.soul-skill-action .skill-icon{flex:none;pointer-events:none}
#gameHud .soul-skill-slot>.soul-skill-slot-inspect{
 position:absolute;right:calc(100% + 4px);top:0;width:44px;height:44px;min-width:44px;min-height:44px;
 padding:4px!important;border:1px solid #bba06b;border-radius:4px;color:#f4dfae;
 background:linear-gradient(#35362e,#151d22);font-size:17px;line-height:1;pointer-events:auto;
}
#gameHud .soul-skill-slot:is(.is-soul-drop-target,.is-drag-over,[data-soul-drop-active="true"]){outline:2px solid #f6d382;outline-offset:3px}
/* game-bottom is a positioned sibling of the PC windows (z31..50).
   Raise its existing stacking context only during an actual Soul drag. */
#gameHud .game-bottom:has(.soul-skill-slot.is-soul-drag-active){z-index:51}
#gameHud .soul-skill-slot.is-soul-drag-active{outline:2px solid #ffe2a0;outline-offset:4px;box-shadow:0 0 16px #d9a24399}
#gameHud .soul-skill-slot>.soul-skill-slot-inspect:focus-visible{outline:2px solid #ffe0a1;outline-offset:2px}
@media(max-width:720px){
 #gameHud .game-bottom .hotbar-frame>:is(.soul-skill-slot,.soul-skill-action){width:48px}
 #gameHud .game-bottom .hotbar-frame>.soul-skill-action,
 #gameHud .soul-skill-slot>.soul-skill-action{padding:4px}
 #gameHud .game-bottom .hotbar-frame>.soul-skill-action>span:not(.skill-icon),
 #gameHud .soul-skill-slot>.soul-skill-action>span:not(.skill-icon){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 #gameHud .game-bottom .hotbar-frame>.soul-skill-action:not(:has(.skill-icon))::after,
 #gameHud .soul-skill-slot>.soul-skill-action:not(:has(.skill-icon))::after{content:'Soul';font-size:11px}
}
/* Radial and Classic coordinates are the installed D2C6 measurements. */
body.action-layout #gameHud .game-bottom .hotbar-frame>:is(.soul-skill-slot,.soul-skill-action){left:-64px;right:auto;bottom:0;width:56px;height:56px;padding:4px}
body.action-layout #gameHud .game-bottom .hotbar-frame>.soul-skill-slot{padding:0}
body.action-layout #gameHud .soul-skill-slot>.soul-skill-action{padding:4px}
/* The radial parent can scale to .81: 56 local pixels retain a 44px target. */
body.action-layout #gameHud .soul-skill-slot>.soul-skill-slot-inspect{width:56px;height:56px;min-width:56px;min-height:56px}
@media(max-width:720px){
 body.action-layout #gameHud .game-bottom .hotbar-frame>:is(.soul-skill-slot,.soul-skill-action){left:170px;bottom:-62px}
 body:not(.action-layout) #gameHud .game-bottom .hotbar-frame>:is(.soul-skill-slot,.soul-skill-action){right:64px}
}
#gameHud :is(.soul-skill-slot>.soul-skill-action,.hotbar-frame>.soul-skill-action)[data-cooldown]:not([data-cooldown=""])::after{
 content:attr(data-cooldown);position:absolute;inset:0;display:grid;place-items:center;background:#05121bcc;
 color:white;font-size:18px;font-weight:bold;border-radius:4px;pointer-events:none;
}

/* Touch view: scroll the selector and inspect in a separate bottom sheet.
   The JS hidden state stays authoritative across resize/native updates. */
@media(max-width:720px),(max-height:500px){
 #gameHud #soulSkillWindow.soul-skill-window{
  position:fixed;left:max(10px,env(safe-area-inset-left))!important;right:auto;
  top:max(10px,env(safe-area-inset-top))!important;transform:none!important;
  width:calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right));
  max-width:none;max-height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  padding:0 12px 14px;
 }
 #gameHud #soulSkillWindow.soul-skill-window>h2{margin:0 -12px 10px;padding:14px 60px 14px 14px;font-size:25px}
 #gameHud #soulSkillWindow .soul-skill-card-grid{gap:10px}
 #gameHud #soulSkillWindow .soul-skill-card{grid-template-columns:44px minmax(0,1fr);gap:7px 8px;min-height:182px;padding:12px!important}
 #gameHud #soulSkillWindow .soul-skill-drag-handle{width:44px;height:44px}
 #gameHud #soulSkillWindow .soul-skill-card-label{font-size:18px}
 #gameHud #soulSkillWindow .soul-skill-card-name{grid-column:1/-1;font-size:15px;min-height:2.8em}
 #gameHud #soulSkillWindow :is(.soul-skill-card-progress,.soul-skill-card-balance,.soul-skill-card-selected,.soul-skill-card-cooldown){font-size:13px}
 #gameHud #soulSkillWindow .soul-skill-detail{
  position:fixed;left:env(safe-area-inset-left);right:env(safe-area-inset-right);
  bottom:calc(72px + env(safe-area-inset-bottom));z-index:2;margin:0;
  max-height:min(68dvh,calc(100dvh - 92px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));overflow:auto;overscroll-behavior:contain;
  padding:18px 16px 16px;border-radius:12px 12px 0 0;
  box-shadow:0 -10px 35px #000b,inset 0 3px #d0a45555;
 }
 #gameHud #soulSkillWindow .soul-skill-detail-close{position:sticky;float:right;top:0;right:auto;margin:-8px -6px 0 8px;z-index:1;background:#172027}
 #gameHud #soulSkillWindow .soul-skill-assign{position:sticky;bottom:0;width:100%;box-shadow:0 0 0 8px #10161b}
}
@media(max-height:500px) and (min-width:721px){
 #gameHud #soulSkillWindow .soul-skill-card{min-height:150px}
 #gameHud #soulSkillWindow .soul-skill-detail{max-height:min(78dvh,calc(100dvh - 92px - env(safe-area-inset-top) - env(safe-area-inset-bottom)))}
}