/* Responsive Sprite editor v3.
   Keeps the editor centered inside the visual viewport, gives its chrome and
   scroll area separate ownership, and preserves the iPad treatment on phones.
   Loaded after all theme and overlay styles. */
@media(max-width:599px){
  #modal.sprite-editor-modal{
    padding:max(5px,env(safe-area-inset-top)) max(5px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left))!important;
    background:rgba(4,8,18,.82)!important;
    backdrop-filter:blur(12px)
  }
  html[data-theme="light"] #modal.sprite-editor-modal>.dialog,
  #modal.sprite-editor-modal>.dialog{
    position:fixed!important;inset:5px!important;display:grid!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    width:auto!important;height:auto!important;min-height:0!important;
    max-width:520px!important;max-height:none!important;margin:0 auto!important;
    padding:8px!important;
    overflow:hidden!important;
    border:1px solid #4d9aa9!important;
    border-radius:18px!important;
    color:#f6f8ff!important;
    background:
      radial-gradient(circle at 8% 10%,rgba(71,215,226,.18),transparent 30%),
      radial-gradient(circle at 88% 84%,rgba(185,116,255,.20),transparent 35%),
      linear-gradient(155deg,#192541,#11192f 58%,#19162f)!important;
    box-shadow:0 22px 70px rgba(1,5,16,.72),inset 0 0 0 1px rgba(131,240,244,.05)!important;
    animation:none!important;transform:none!important
  }
  #modal.sprite-editor-modal>.dialog>.row{
    position:relative;z-index:6;display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:8px!important;
    min-height:50px;padding:4px 4px 8px!important;margin:0!important;
    border-bottom:1px solid rgba(133,211,227,.16)!important;
    background:transparent!important
  }
  #modal.sprite-editor-modal #mtitle{
    max-width:none!important;margin:0!important;color:#68e7ed!important;
    font-size:.72rem!important;line-height:1.2!important;font-weight:950!important;
    letter-spacing:.13em!important;text-transform:uppercase!important
  }
  html[data-theme="light"] #modal.sprite-editor-modal #mclose,
  #modal.sprite-editor-modal #mclose{
    width:auto!important;min-width:76px!important;min-height:42px!important;height:42px!important;
    padding:7px 13px!important;border:1px solid #506283!important;border-radius:12px!important;
    color:#f6f8ff!important;background:#283554!important;box-shadow:none!important
  }
  #modal.sprite-editor-modal #mbody{
    min-height:0!important;padding:7px 3px 4px!important;
    overflow-x:hidden!important;overflow-y:auto!important;
    overscroll-behavior:contain;scrollbar-gutter:stable
  }
  #modal.sprite-editor-modal .parity-editor{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    gap:8px!important;margin:0!important
  }
  #modal.sprite-editor-modal .parity-editor-art{
    min-height:112px!important;height:112px!important;max-height:112px!important;
    border:1px solid rgba(102,207,255,.25)!important;border-radius:15px!important;
    background:radial-gradient(circle at 50% 43%,rgba(75,168,255,.30),transparent 46%),linear-gradient(160deg,#172744,#091221)!important
  }
  #modal.sprite-editor-modal .parity-editor-art img{
    width:min(138px,48%)!important;height:94px!important;max-height:94px!important;
    filter:drop-shadow(0 10px 14px rgba(0,0,0,.46))!important
  }
  #modal.sprite-editor-modal .parity-editor-badges{top:7px!important;left:7px!important;right:7px!important;gap:4px!important}
  #modal.sprite-editor-modal .parity-editor-badges span{
    padding:4px 7px!important;border-color:rgba(155,210,236,.25)!important;
    color:#dce6f5!important;background:rgba(4,10,22,.82)!important;font-size:.5rem!important
  }
  #modal.sprite-editor-modal .parity-editor-badges .status{color:#77f2cb!important}
  #modal.sprite-editor-modal .parity-editor-copy{display:grid!important;gap:6px!important;color:#f6f8ff!important}
  #modal.sprite-editor-modal .parity-editor-copy h3{
    display:block!important;margin:1px 0 0!important;color:#fff!important;
    font-size:1.15rem!important;line-height:1.08!important
  }
  #modal.sprite-editor-modal .parity-power{
    display:block!important;margin:0!important;color:#b9c7db!important;
    font-size:.75rem!important;line-height:1.35!important
  }
  #modal.sprite-editor-modal .parity-info-grid{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;margin:2px 0!important
  }
  #modal.sprite-editor-modal .parity-info-grid>div,
  #modal.sprite-editor-modal .parity-level-power{
    min-height:0!important;padding:8px 9px!important;border:1px solid rgba(126,162,219,.25)!important;
    border-radius:11px!important;background:linear-gradient(145deg,rgba(43,58,94,.96),rgba(30,42,72,.96))!important
  }
  #modal.sprite-editor-modal .parity-info-grid span,
  #modal.sprite-editor-modal .parity-level-power span{color:#9baac2!important;font-size:.49rem!important}
  #modal.sprite-editor-modal .parity-info-grid strong,
  #modal.sprite-editor-modal .parity-level-power strong{margin-top:3px!important;color:#fff!important;font-size:.62rem!important;line-height:1.3!important}
  #modal.sprite-editor-modal .parity-level-power{margin:0!important;border-color:rgba(255,211,93,.25)!important;background:linear-gradient(145deg,rgba(83,66,66,.9),rgba(37,45,76,.96))!important}
  #modal.sprite-editor-modal .levels.parity-levels{
    display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:5px!important;padding:5px 3px 6px!important;overflow:visible!important
  }
  #modal.sprite-editor-modal .levels.parity-levels button[class*="level-rank-"]{
    min-width:0!important;min-height:50px!important;padding:4px 2px!important;
    border-width:2px!important;border-style:solid!important;border-radius:10px!important;
    font-size:.82rem!important;line-height:1!important
  }
  #modal.sprite-editor-modal .levels.parity-levels button.level-rank-1{color:#f4f7fb!important;border-color:#b6c0cf!important;background:linear-gradient(145deg,#657083,#374254)!important}
  #modal.sprite-editor-modal .levels.parity-levels button.level-rank-2{color:#e3ffeb!important;border-color:#68e99a!important;background:linear-gradient(145deg,#239452,#195c3d)!important}
  #modal.sprite-editor-modal .levels.parity-levels button.level-rank-3{color:#e7f7ff!important;border-color:#63ceff!important;background:linear-gradient(145deg,#237ab1,#264d7b)!important}
  #modal.sprite-editor-modal .levels.parity-levels button.level-rank-4{color:#f4e9ff!important;border-color:#c28aff!important;background:linear-gradient(145deg,#8045ba,#57367b)!important}
  #modal.sprite-editor-modal .levels.parity-levels button.level-rank-5{color:#2b1b00!important;border-color:#ffe579!important;background:linear-gradient(145deg,#ffe98f,#d59a39)!important}
  #modal.sprite-editor-modal .levels.parity-levels button.active{
    transform:translateY(-2px) scale(1.025)!important;
    outline:2px solid rgba(255,255,255,.78)!important;outline-offset:1px!important;
    box-shadow:0 0 0 2px currentColor,0 0 18px color-mix(in srgb,currentColor 42%,transparent)!important
  }
  #modal.sprite-editor-modal .levels.parity-levels button b{display:block!important;margin-top:4px!important;color:inherit!important;font-size:.42rem!important}
  #modal.sprite-editor-modal .seg.parity-status{
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;margin:0!important
  }
  #modal.sprite-editor-modal .seg.parity-status button{
    min-width:0!important;min-height:50px!important;padding:6px 3px!important;
    border:1px solid #4e6080!important;border-radius:10px!important;
    color:#d5deec!important;background:#202d4b!important;
    font-size:.66rem!important;line-height:1.12!important
  }
  #modal.sprite-editor-modal .seg.parity-status button[data-parity-status="missing"]{border-color:#8290a5!important}
  #modal.sprite-editor-modal .seg.parity-status button[data-parity-status="collected"]{border-color:#4bdca4!important}
  #modal.sprite-editor-modal .seg.parity-status button[data-parity-status="lost"]{border-color:#d07cff!important}
  #modal.sprite-editor-modal .seg.parity-status button.active{
    color:#fff!important;background:linear-gradient(145deg,#226d68,#3c397c)!important;
    outline:2px solid #72f5c3!important;outline-offset:1px!important;
    box-shadow:0 0 15px rgba(84,244,190,.26)!important
  }
  #modal.sprite-editor-modal .seg.parity-status button b{display:block!important;margin-top:3px!important;color:#bfffe5!important;font-size:.4rem!important}
  #modal.sprite-editor-modal .parity-mastery-note{
    margin:0!important;padding:8px 9px!important;border-color:rgba(244,171,75,.32)!important;
    border-radius:11px!important;color:#fff!important;background:linear-gradient(130deg,rgba(133,70,82,.50),rgba(67,56,91,.72))!important
  }
  #modal.sprite-editor-modal .parity-mastery-note strong{color:#ffd27c!important;font-size:.62rem!important}
  #modal.sprite-editor-modal .parity-mastery-note small{margin-top:2px!important;color:#c3ccda!important;font-size:.57rem!important;line-height:1.25!important}
  #modal.sprite-editor-modal .parity-info,
  #modal.sprite-editor-modal .parity-profile,
  #modal.sprite-editor-modal .parity-save{
    position:static!important;width:100%!important;min-height:40px!important;height:auto!important;
    margin:0!important;padding:7px 9px!important;border-radius:10px!important;
    color:#eef4ff!important;background:#263553!important;font-size:.68rem!important;
    box-shadow:none!important
  }
  #modal.sprite-editor-modal .parity-info{border-color:#79dfee!important;color:#c8f9ff!important}
  #modal.sprite-editor-modal .parity-profile{border-color:#c28aff!important;color:#ead7ff!important}
  #modal.sprite-editor-modal #saveVariant.parity-save{
    position:static!important;bottom:auto!important;z-index:auto!important;
    min-height:46px!important;margin:2px 0 0!important;padding:9px!important;
    border-color:#68e7ed!important;color:#0b1630!important;
    background:linear-gradient(100deg,#62dbe0,#c58aed 55%,#67dfe0)!important;
    font-size:.78rem!important;font-weight:950!important;
    box-shadow:0 8px 22px rgba(80,208,224,.20)!important
  }
}
@media(max-height:560px){
  #modal.sprite-editor-modal{padding:4px!important;align-items:center!important}
  html[data-theme="light"] #modal.sprite-editor-modal>.dialog,
  #modal.sprite-editor-modal>.dialog{
    position:fixed!important;inset:4px!important;display:grid!important;grid-template-rows:auto minmax(0,1fr)!important;
    width:auto!important;height:auto!important;min-height:0!important;max-width:none!important;max-height:none!important;margin:0!important;overflow:hidden!important;
    color:#f6f8ff!important;
    background:radial-gradient(circle at 10% 20%,rgba(71,215,226,.16),transparent 30%),linear-gradient(150deg,#192541,#13182e)!important
  }
  #modal.sprite-editor-modal #mbody{min-height:0!important;overflow-y:auto!important}
  #modal.sprite-editor-modal .parity-editor{grid-template-columns:minmax(150px,.58fr) minmax(0,1.42fr)!important;gap:10px!important;margin-top:4px!important}
  #modal.sprite-editor-modal .parity-editor-art{min-height:148px!important;height:148px!important}
  #modal.sprite-editor-modal .parity-editor-art img{height:118px!important;max-height:118px!important}
  #modal.sprite-editor-modal .parity-editor-copy{gap:5px!important}
  #modal.sprite-editor-modal .parity-editor-copy h3{color:#fff!important;font-size:1rem!important}
  #modal.sprite-editor-modal .parity-power{color:#b9c7db!important;font-size:.66rem!important}
  #modal.sprite-editor-modal .parity-info-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;margin:0!important}
  #modal.sprite-editor-modal .parity-info-grid>div,#modal.sprite-editor-modal .parity-level-power{padding:6px 8px!important}
  #modal.sprite-editor-modal .levels.parity-levels button{min-height:44px!important}
  #modal.sprite-editor-modal .seg.parity-status{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  #modal.sprite-editor-modal .seg.parity-status button{min-height:42px!important}
  #modal.sprite-editor-modal #saveVariant.parity-save{position:static!important}
}

/* Tablet and desktop share a stable modal shell. Keeping padding on the
   overlay—not the dialog—prevents the card from touching viewport edges. */
@media(min-width:600px){
  #modal.sprite-editor-modal:has(.parity-editor){
    place-items:center!important;
    padding:clamp(16px,3vw,28px)!important;
    overflow:hidden!important
  }
  #modal.sprite-editor-modal>.dialog:has(.parity-editor){
    position:relative!important;
    inset:auto!important;
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    width:min(920px,100%)!important;
    max-width:920px!important;
    max-height:min(860px,100%)!important;
    min-height:0!important;
    margin:auto!important;
    padding:0!important;
    overflow:hidden!important;
    border-radius:22px!important
  }
  #modal.sprite-editor-modal>.dialog:has(.parity-editor)>.row{
    position:relative!important;
    top:auto!important;
    z-index:7!important;
    min-height:62px!important;
    margin:0!important;
    padding:12px 16px!important;
    border-bottom:1px solid color-mix(in srgb,var(--st-border) 82%,transparent)!important;
    background:color-mix(in srgb,var(--st-surface) 96%,transparent)!important;
    backdrop-filter:blur(16px)
  }
  #modal.sprite-editor-modal:has(.parity-editor) #mtitle{
    min-width:0!important;
    margin:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important
  }
  #modal.sprite-editor-modal:has(.parity-editor) #mclose{
    width:auto!important;
    min-width:76px!important;
    min-height:42px!important;
    height:42px!important;
    padding:8px 14px!important;
    border:1px solid var(--st-border-strong)!important;
    border-radius:12px!important;
    background:var(--st-surface-2)!important;
    color:var(--st-text)!important;
    font-size:.78rem!important
  }
  #modal.sprite-editor-modal:has(.parity-editor) #mbody{
    min-height:0!important;
    padding:18px 18px max(20px,env(safe-area-inset-bottom,0px))!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    scrollbar-gutter:stable both-edges
  }
  #modal.sprite-editor-modal .parity-editor{
    grid-template-columns:minmax(230px,.72fr) minmax(0,1.28fr)!important;
    gap:22px!important;
    margin:0!important
  }
  #modal.sprite-editor-modal .parity-editor-copy{
    min-width:0!important
  }
  #modal.sprite-editor-modal .parity-editor-copy>.field-label{
    position:static!important;
    display:block!important;
    margin:14px 0 8px!important;
    padding:0!important;
    line-height:1.2!important
  }
  #modal.sprite-editor-modal .levels.parity-levels{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:8px!important;
    margin:0!important;
    padding:3px!important;
    overflow:visible!important
  }
  #modal.sprite-editor-modal .levels.parity-levels button{
    min-width:0!important;
    min-height:56px!important;
    padding:8px 4px!important;
    line-height:1!important
  }
  #modal.sprite-editor-modal .levels.parity-levels button span,
  #modal.sprite-editor-modal .levels.parity-levels button b,
  #modal.sprite-editor-modal .seg.parity-status button b{
    display:block!important
  }
  #modal.sprite-editor-modal .levels.parity-levels button b,
  #modal.sprite-editor-modal .seg.parity-status button b{
    margin-top:5px!important;
    font-size:.48rem!important;
    line-height:1!important;
    letter-spacing:.06em!important
  }
  #modal.sprite-editor-modal .seg.parity-status{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    margin:0!important
  }
  #modal.sprite-editor-modal .seg.parity-status button{
    min-width:0!important;
    min-height:64px!important;
    padding:9px 7px!important;
    white-space:normal!important
  }
  #modal.sprite-editor-modal .parity-mastery-note{
    margin-top:12px!important
  }
  #modal.sprite-editor-modal .parity-info,
  #modal.sprite-editor-modal .parity-profile,
  #modal.sprite-editor-modal .parity-save{
    width:100%!important;
    min-height:44px!important
  }
  #modal.sprite-editor-modal .parity-info,
  #modal.sprite-editor-modal .parity-profile{
    margin-top:10px!important
  }
  #modal.sprite-editor-modal #saveVariant.parity-save{
    position:sticky!important;
    bottom:0!important;
    z-index:6!important;
    margin-top:10px!important
  }
}

/* The previous two-column minimums were too wide for the 600–899px range.
   A compact art rail leaves the editing controls enough room to breathe. */
@media(min-width:600px) and (max-width:899px) and (min-height:561px){
  #modal.sprite-editor-modal>.dialog:has(.parity-editor){
    width:min(800px,100%)!important;
    max-width:800px!important
  }
  #modal.sprite-editor-modal:has(.parity-editor) #mbody{
    padding:14px 14px max(16px,env(safe-area-inset-bottom,0px))!important
  }
  #modal.sprite-editor-modal .parity-editor{
    grid-template-columns:minmax(180px,.62fr) minmax(0,1.38fr)!important;
    gap:16px!important
  }
  #modal.sprite-editor-modal .parity-editor-art{
    min-height:278px!important
  }
  #modal.sprite-editor-modal .parity-editor-art img{
    width:min(210px,86%)!important;
    height:205px!important
  }
  #modal.sprite-editor-modal .parity-editor-copy h3{
    font-size:1.38rem!important;
    line-height:1.12!important
  }
  #modal.sprite-editor-modal .parity-power{
    margin-bottom:10px!important;
    font-size:.84rem!important;
    line-height:1.45!important
  }
  #modal.sprite-editor-modal .parity-info-grid{
    gap:7px!important;
    margin:9px 0!important
  }
  #modal.sprite-editor-modal .parity-info-grid>div,
  #modal.sprite-editor-modal .parity-level-power{
    padding:9px 10px!important
  }
  #modal.sprite-editor-modal .parity-level-power{
    margin:7px 0 9px!important
  }
  #modal.sprite-editor-modal .parity-editor-copy>.field-label{
    margin:11px 0 7px!important
  }
}

/* Quick Actions is intentionally a compact editor. This final override wins
   over the generic overlay width without changing the detailed editor above. */
@media(min-width:721px) and (min-height:561px){
  #modal.sprite-editor-modal>.dialog:has(.quick-editor){
    width:min(470px,calc(100vw - 34px))!important;
    max-width:470px!important;
    max-height:calc(100dvh - 34px)!important;
    margin:auto!important;
    padding:12px!important;
    border-radius:20px!important
  }
}

/* Short landscape viewports keep the same ownership model but use tighter
   spacing so the body scrolls cleanly beneath a fixed header. */
@media(min-width:600px) and (max-height:560px){
  #modal.sprite-editor-modal:has(.parity-editor){
    padding:8px!important
  }
  #modal.sprite-editor-modal>.dialog:has(.parity-editor){
    inset:auto!important;
    width:min(960px,100%)!important;
    max-width:960px!important;
    max-height:100%!important;
    margin:auto!important;
    padding:0!important
  }
  #modal.sprite-editor-modal>.dialog:has(.parity-editor)>.row{
    min-height:48px!important;
    padding:6px 12px!important
  }
  #modal.sprite-editor-modal:has(.parity-editor) #mbody{
    padding:9px 12px 11px!important
  }
  #modal.sprite-editor-modal .parity-editor-copy>.field-label{
    margin:7px 0 5px!important
  }
  #modal.sprite-editor-modal .levels.parity-levels button{
    min-height:44px!important
  }
  #modal.sprite-editor-modal .seg.parity-status button{
    min-height:44px!important
  }
  #modal.sprite-editor-modal #saveVariant.parity-save{
    position:static!important;
    bottom:auto!important
  }
}

/* Mastery correction stays inside the status card so it is easy to find, but
   requires a second explicit press before any collection state changes. */
#modal.sprite-editor-modal .parity-mastery-note{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:9px!important
}
#modal.sprite-editor-modal .parity-mastery-note>div{
  min-width:0!important;
  flex:1 1 190px!important
}
#modal.sprite-editor-modal .parity-unmaster{
  flex:0 0 auto!important;
  min-height:38px!important;
  padding:8px 11px!important;
  border:1px solid rgba(255,189,117,.62)!important;
  border-radius:9px!important;
  color:#ffe4bd!important;
  background:rgba(71,32,49,.72)!important;
  font:inherit!important;
  font-size:.66rem!important;
  font-weight:900!important;
  letter-spacing:.02em!important;
  cursor:pointer!important
}
#modal.sprite-editor-modal .parity-unmaster:hover,
#modal.sprite-editor-modal .parity-unmaster:focus-visible{
  border-color:#ffd58c!important;
  outline:2px solid rgba(255,213,140,.45)!important;
  outline-offset:2px!important
}
#modal.sprite-editor-modal .parity-unmaster.confirming{
  border-color:#ff8c9a!important;
  color:#fff!important;
  background:linear-gradient(135deg,#9c304e,#70233e)!important;
  box-shadow:0 0 0 2px rgba(255,140,154,.15)!important
}
.quick-tile.mastery.confirming{
  border-color:#ff8c9a!important;
  background:linear-gradient(145deg,rgba(156,48,78,.28),var(--st-surface-2))!important;
  box-shadow:0 0 0 2px rgba(255,140,154,.12)!important
}
.quick-tile.mastery.confirming strong{color:#ffdce2!important}
@media(max-width:599px){
  #modal.sprite-editor-modal .parity-unmaster{
    width:100%!important;
    min-height:36px!important
  }
}