/* Status window — sky-blue & white theme (same family as login / character select). 2026-09-26
   Replaces the image frame (/ui/status/frame.webp) layout from <style id="status-frame-c">.
   Sizes are CSS px before the HUD --ui-zoom scale (0.7 on PC). */
html body #hud section#status-window.window.status {
  --st-ink: #10294f; --st-ink2: #3a5680; --st-gold: #dfb758; --st-gold-d: #734f0d; --st-cream: #fff4cb; --st-line: #c9dcef;
  aspect-ratio: auto !important;
  width: min(780px, calc((100vw - 12px) / var(--ui-zoom, 1)), calc((100dvh - 24px) / var(--ui-zoom, 1) * 1.45)) !important;
  height: auto !important; max-height: none !important;
  padding: 0 18px 16px !important;
  box-sizing: border-box !important;
  background: radial-gradient(ellipse at 50% -10%, #ffffff 0%, #f0f7ff 38%, #e1eefb 72%, #cbe3f8 100%) !important;
  border: 3px solid var(--st-gold) !important;
  border-radius: 18px !important;
  box-shadow: 0 0 0 2px var(--st-gold-d), inset 0 0 0 2px var(--st-cream), 0 18px 44px rgba(10, 30, 60, 0.45) !important;
  color: var(--st-ink) !important;
  font-family: 'Noto Sans Thai', Tahoma, Arial, sans-serif !important;
  image-rendering: auto !important;
  overflow: visible !important;
}
html body #hud section#status-window.window.status::before,
html body #hud section#status-window.window.status::after { display: none !important; }

/* header */
html body #hud #status-window.status .titlebar {
  position: relative !important; inset: auto !important; top: auto !important; left: auto !important;
  width: auto !important; height: auto !important;
  display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important;
  margin: 0 -18px 14px !important; padding: 20px 64px 14px 22px !important;
  background: linear-gradient(180deg, #ffffff 0%, #eaf4fd 60%, #d6e9f9 100%) !important;
  border: 0 !important; border-bottom: 2px solid var(--st-gold) !important;
  border-radius: 15px 15px 0 0 !important;
  box-shadow: inset 0 -1px 0 var(--st-cream) !important;
  cursor: grab;
}
html body #hud #status-window.status .titlebar::before {
  content: ""; position: absolute; left: 50%; top: -34px; width: 116px; height: 58px; margin-left: -58px;
  background: url('/ui/profile/top-ornament.png') center/contain no-repeat;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35)); pointer-events: none;
}
html body #hud #status-window.status .st-title {
  position: static !important; transform: none !important;
  font: 800 30px/1.1 'Cormorant Garamond', 'Noto Serif Thai', Georgia, serif !important;
  color: var(--st-ink) !important; text-shadow: 0 1px 0 #fff !important; letter-spacing: 0.02em !important;
  -webkit-text-stroke: 0 !important; background: none !important; -webkit-text-fill-color: currentColor !important;
}
html body #hud #status-window.status .st-title i { color: #c9a24e !important; font-style: normal; margin: 0 4px; }
html body #hud #status-window.status .st-sub {
  position: static !important; margin-left: auto !important;
  padding: 3px 12px !important; border: 1.5px solid #d9c48a !important; border-radius: 999px !important;
  background: linear-gradient(180deg, #fffaf0, #f6ecd2) !important;
  color: #8c6a2a !important; font: 800 13px/1.2 'Noto Sans Thai', Tahoma, sans-serif !important; letter-spacing: 0.08em !important;
}
html body #hud #status-window.status .st-sub::before, html body #hud #status-window.status .st-sub::after { display: none !important; }
html body #hud #status-window.status .titlebar button[data-close] {
  position: absolute !important; right: 14px !important; top: 50% !important; left: auto !important;
  width: 40px !important; height: 40px !important; margin-top: -20px !important; padding: 0 !important;
  display: grid !important; place-items: center !important;
  border-radius: 50% !important; border: 2px solid #c9a24e !important;
  background: radial-gradient(circle at 40% 35%, #ffffff, #d8ebfa) !important;
  box-shadow: 0 0 0 1px #9c7a36, 0 3px 8px rgba(31, 58, 102, 0.2) !important;
  color: #8c6a2a !important; font: 800 26px/1 Arial, sans-serif !important; text-indent: 0 !important;
}
html body #hud #status-window.status .titlebar button[data-close]::before,
html body #hud #status-window.status .titlebar button[data-close]::after { display: none !important; }

/* body layout */
html body #hud #status-window.status .body {
  position: static !important; inset: auto !important; width: auto !important; height: auto !important;
  display: grid !important;
  grid-template-columns: 46% 1fr !important;
  grid-template-areas: "hl hr" "stats derived" "points points" !important;
  gap: 8px 16px !important; padding: 0 !important; margin: 0 !important;
  background: none !important; border: 0 !important; overflow: visible !important;
}
html body #hud #status-window.status .body > * { position: static !important; inset: auto !important; width: auto !important; height: auto !important; transform: none !important; }
html body #hud #status-window.status .st-head {
  display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; padding: 0 2px !important;
  font: 800 13px/1.2 'Noto Sans Thai', Tahoma, sans-serif !important; letter-spacing: 0.1em !important; text-transform: uppercase;
  color: #8c6a2a !important; background: none !important; border: 0 !important; text-shadow: none !important;
}
html body #hud #status-window.status .st-head::before { content: "✦" !important; color: #c9a24e !important; font-size: 12px !important; margin: 0 !important; }
html body #hud #status-window.status .st-head::after { content: "" !important; flex: 1; height: 1.5px; background: linear-gradient(90deg, #d9c48a, transparent); margin: 0 !important; }
html body #hud #status-window.status .st-head-l { grid-area: hl; }
html body #hud #status-window.status .st-head-r { grid-area: hr; }

/* base stats */
html body #hud #status-window.status #stats {
  grid-area: stats; display: flex !important; flex-direction: column !important; gap: 7px !important;
  padding: 0 !important; background: none !important; border: 0 !important;
}
html body #hud #status-window.status .stat {
  display: grid !important; grid-template-columns: 34px 1fr 46px 40px 34px !important; align-items: center !important; gap: 6px !important;
  padding: 6px 8px !important; min-height: 48px !important; box-sizing: border-box !important;
  background: linear-gradient(180deg, #ffffff, #f3f8fe) !important;
  border: 1.5px solid var(--st-line) !important; border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(16, 41, 79, 0.08) !important;
}
html body #hud #status-window.status .stat:hover { border-color: #c9a24e !important; }
html body #hud #status-window.status .stat-icon { width: 30px !important; height: 30px !important; background-size: contain !important; }
html body #hud #status-window.status .stat > div {
  display: flex !important; flex-direction: column !important; padding: 0 !important; min-width: 0 !important;
  font: 800 18px/1.1 'Noto Sans Thai', Tahoma, sans-serif !important; color: var(--st-ink) !important; letter-spacing: 0.03em;
}
html body #hud #status-window.status .stat > div small {
  display: block !important; margin-top: 2px !important; font: 600 11px/1.25 'Noto Sans Thai', Tahoma, sans-serif !important;
  color: #6680a3 !important; letter-spacing: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html body #hud #status-window.status .stat b {
  height: 32px !important; display: grid !important; place-items: center !important;
  background: #fff !important; border: 1.5px solid var(--st-line) !important; border-radius: 7px !important;
  font: 800 17px/1 'Noto Sans Thai', Tahoma, sans-serif !important; color: var(--st-ink) !important;
}
html body #hud #status-window.status .stat em {
  height: 32px !important; display: grid !important; place-items: center !important; font-style: normal !important;
  background: none !important; border: 0 !important; font: 800 15px/1 'Noto Sans Thai', Tahoma, sans-serif !important; color: #1f9d55 !important;
}
html body #hud #status-window.status .stat button {
  width: 32px !important; height: 32px !important; padding: 0 !important; border-radius: 50% !important;
  display: grid !important; place-items: center !important;
  background: linear-gradient(180deg, #ffe082 0%, #e6a820 48%, #b87808 52%, #db9a1b 100%) !important;
  border: 2px solid #fff0a8 !important; box-shadow: 0 0 0 1px #9c7a36, 0 2px 5px rgba(184, 120, 8, 0.35) !important;
  color: #2b1803 !important; font: 900 20px/1 Arial, sans-serif !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  cursor: pointer;
}
html body #hud #status-window.status .stat button:disabled {
  background: linear-gradient(180deg, #eef3f8, #d6e2ee) !important; border-color: #fff !important;
  box-shadow: 0 0 0 1px #b7c9dc !important; color: #9aafc6 !important; cursor: default; text-shadow: none !important;
}

/* derived stats */
html body #hud #status-window.status #status-derived {
  grid-area: derived; display: grid !important; grid-template-columns: 1fr 1fr !important; align-content: start !important; gap: 7px !important;
  padding: 10px !important; box-sizing: border-box !important;
  background: linear-gradient(180deg, #ffffff 0%, #eef5fc 100%) !important;
  border: 2px solid #c9a24e !important; border-radius: 12px !important;
  box-shadow: 0 0 0 1px #9c7a36, inset 0 0 0 1px #fff !important;
}
html body #hud #status-window.status #status-derived > div {
  display: flex !important; align-items: center !important; gap: 6px !important; min-height: 40px !important;
  padding: 4px 10px 4px 6px !important; box-sizing: border-box !important;
  background: #fff !important; border: 1.5px solid var(--st-line) !important; border-radius: 9px !important;
}
html body #hud #status-window.status #status-derived > div::before { width: 24px !important; height: 24px !important; margin: 0 !important; flex: none; }
html body #hud #status-window.status #status-derived span {
  font: 800 12px/1.1 'Noto Sans Thai', Tahoma, sans-serif !important; color: #204374 !important; letter-spacing: 0.04em !important;
}
html body #hud #status-window.status #status-derived b {
  margin-left: auto !important; font: 800 16px/1 'Noto Sans Thai', Tahoma, sans-serif !important; color: var(--st-ink) !important; white-space: nowrap;
}
html body #hud #status-window.status .st-plaque { display: none !important; }

/* points row */
html body #hud #status-window.status .body > .row {
  grid-area: points; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important;
  margin-top: 6px !important; padding: 10px 14px !important;
  background: linear-gradient(180deg, #fffdf4, #fff3d2) !important;
  border: 2px solid #dfb758 !important; border-radius: 12px !important; box-shadow: inset 0 1px 0 #fff !important;
}
html body #hud #status-window.status .body > .row h3 {
  position: static !important; margin: 0 !important; font: 800 17px/1.2 'Noto Sans Thai', Tahoma, sans-serif !important; color: var(--st-ink) !important; text-shadow: none !important;
}
html body #hud #status-window.status .body > .row h3::before { content: "✦ " !important; color: #c9a24e !important; font-size: 14px !important; margin: 0 !important; }
html body #hud #status-window.status #points {
  position: static !important; display: inline-flex !important; align-items: baseline !important; gap: 6px !important;
  padding: 4px 16px !important; border-radius: 999px !important; background: #fff !important; border: 1.5px solid #d9c48a !important;
  font: 700 14px/1.2 'Noto Sans Thai', Tahoma, sans-serif !important; color: var(--st-ink2) !important;
}
html body #hud #status-window.status #points b { font: 900 24px/1 'Noto Sans Thai', Tahoma, sans-serif !important; color: #b87808 !important; }

/* narrow screens: stack the two columns */
@media (max-width: 640px) and (orientation: portrait) {
  html body #hud section#status-window.window.status { width: min(560px, calc((100vw - 10px) / var(--ui-zoom, 1))) !important; }
  html body #hud #status-window.status .body {
    grid-template-columns: 1fr !important;
    grid-template-areas: "hl" "stats" "hr" "derived" "points" !important;
  }
  html body #hud #status-window.status .titlebar { padding: 18px 60px 12px 16px !important; }
  html body #hud #status-window.status .st-sub { display: none !important; }
}
/* undo absolute positioning from the old frame layout */
html body #hud #status-window.status .stat > *,
html body #hud #status-window.status #status-derived > div,
html body #hud #status-window.status #status-derived > div > *,
html body #hud #status-window.status .body > .row > * {
  position: static !important; inset: auto !important; transform: none !important; float: none !important;
}
html body #hud #status-window.status .stat > div { width: auto !important; height: auto !important; }
html body #hud #status-window.status #status-derived > div { width: auto !important; height: auto !important; }
html body #hud #status-window.status #stats,
html body #hud #status-window.status #status-derived,
html body #hud #status-window.status #points { left: auto !important; top: auto !important; width: auto !important; height: auto !important; }
html body #hud #status-window.status .titlebar { justify-content: center !important; padding-left: 64px !important; }
html body #hud #status-window.status .st-sub { display: none !important; }
html body #hud #status-window.status .body { grid-template-columns: 48% 1fr !important; }
@media (max-width: 640px) and (orientation: portrait) {
  html body #hud #status-window.status .body { grid-template-columns: 1fr !important; }
}

/* ======================================================================
   FRAME LAYOUT (landscape phones, tablets and PC): the user's painted frame
   /ui/status/frame-sky.webp (1536x1024). All boxes are % of that image.
   Portrait phones keep the stacked card layout above.
   ====================================================================== */
@media (orientation: landscape), (min-width: 641px) {
  html body #hud section#status-window.window.status {
    container-type: inline-size !important;
    width: min(960px, calc((100vw - 12px) / var(--ui-zoom, 1)), calc((100dvh - 20px) / var(--ui-zoom, 1) * 1.5)) !important;
    aspect-ratio: 1536 / 1024 !important; height: auto !important;
    padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    background: url('/ui/status/frame-sky.webp?v=1') center / 100% 100% no-repeat !important;
    filter: drop-shadow(0 12px 22px rgba(10, 30, 60, 0.4));
  }
  /* title sits on the sky banner; the banner is the drag handle */
  html body #hud #status-window.status .titlebar {
    position: absolute !important; left: 21% !important; top: 10.2% !important; width: 65% !important; height: 9.2% !important;
    margin: 0 !important; padding: 0 !important; justify-content: center !important;
    background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  }
  html body #hud #status-window.status .titlebar::before { display: none !important; }
  html body #hud #status-window.status .st-title {
    font-size: 3.6cqw !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 0.25cqw 0 #1d4f8f, 0.15cqw 0 0 #1d4f8f, -0.15cqw 0 0 #1d4f8f, 0 -0.15cqw 0 #1d4f8f, 0 0 1cqw rgba(20, 60, 120, 0.7) !important;
  }
  html body #hud #status-window.status .st-title i { color: #ffe39a !important; }
  /* invisible hit area over the painted red X */
  html body #hud #status-window.status .titlebar button[data-close] {
    left: 100.6% !important; right: auto !important; top: 34% !important;
    width: 8.4% !important; height: auto !important; aspect-ratio: 1 !important; margin: 0 !important; transform: translateY(-50%) !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important; color: transparent !important; border-radius: 50% !important;
  }
  html body #hud #status-window.status .titlebar button[data-close]:hover { background: rgba(255, 255, 255, 0.25) !important; }

  /* .body covers the whole frame: let clicks/drags fall through to the banner (drag) and the × button */
  html body #hud #status-window.status .body { position: absolute !important; inset: 0 !important; display: block !important; pointer-events: none !important; }
  html body #hud #status-window.status .body > * { position: absolute !important; pointer-events: auto !important; }
  html body #hud #status-window.status .titlebar { z-index: 5 !important; cursor: grab !important; }
  html body #hud #status-window.status .titlebar button[data-close] { z-index: 6 !important; cursor: pointer !important; }

  /* blue name tabs */
  html body #hud #status-window.status .st-head {
    top: 23.8% !important; height: 3.6% !important; justify-content: center !important; padding: 0 !important;
    font-size: 1.15cqw !important; letter-spacing: 0.08em !important; color: #ffffff !important;
    text-shadow: 0 1px 0 #0d3a78 !important;
  }
  html body #hud #status-window.status .st-head::before, html body #hud #status-window.status .st-head::after { display: none !important; }
  html body #hud #status-window.status .st-head-l { left: 17% !important; width: 14.5% !important; }
  html body #hud #status-window.status .st-head-r { left: 56.4% !important; width: 20% !important; }

  /* left panel: base stats */
  html body #hud #status-window.status #stats {
    left: 11.4% !important; top: 27.6% !important; width: 24.6% !important; height: 38.8% !important;
    display: flex !important; flex-direction: column !important; justify-content: space-between !important; gap: 0.45cqw !important;
  }
  html body #hud #status-window.status .stat {
    flex: 1 1 0 !important; min-height: 0 !important;
    grid-template-columns: 2.5cqw 1fr 3.4cqw 2.8cqw 2.5cqw !important; gap: 0.45cqw !important; padding: 0 0.5cqw !important;
    border-radius: 0.8cqw !important; border-width: 1px !important;
  }
  html body #hud #status-window.status .stat-icon { width: 2.3cqw !important; height: 2.3cqw !important; }
  html body #hud #status-window.status .stat > div { font-size: 1.55cqw !important; }
  html body #hud #status-window.status .stat > div small { display: none !important; }
  html body #hud #status-window.status .stat b { height: 2.5cqw !important; font-size: 1.45cqw !important; border-radius: 0.5cqw !important; border-width: 1px !important; }
  html body #hud #status-window.status .stat em { height: 2.5cqw !important; font-size: 1.25cqw !important; }
  html body #hud #status-window.status .stat button { width: 2.4cqw !important; height: 2.4cqw !important; font-size: 1.6cqw !important; border-width: 1.5px !important; }

  /* right panel: derived stats */
  html body #hud #status-window.status #status-derived {
    left: 41.2% !important; top: 27.8% !important; width: 48.6% !important; height: 39.2% !important;
    grid-template-columns: 1fr 1fr !important; grid-auto-rows: 1fr !important; align-content: stretch !important;
    gap: 0.55cqw 0.8cqw !important; padding: 0.4cqw !important;
    background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  }
  html body #hud #status-window.status #status-derived > div {
    min-height: 0 !important; padding: 0 0.9cqw 0 0.5cqw !important; gap: 0.5cqw !important; border-radius: 0.7cqw !important; border-width: 1px !important;
  }
  html body #hud #status-window.status #status-derived > div::before { width: 2cqw !important; height: 2cqw !important; }
  html body #hud #status-window.status #status-derived span { font-size: 1.2cqw !important; }
  html body #hud #status-window.status #status-derived b { font-size: 1.6cqw !important; }

  /* bottom panels: label (left) + points (right) */
  html body #hud #status-window.status .body > .row {
    left: 12.8% !important; top: 73% !important; width: 68.5% !important; height: 11.6% !important;
    display: block !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important;
  }
  html body #hud #status-window.status .body > .row h3 {
    position: absolute !important; left: 0 !important; top: 0 !important; width: 35.4% !important; height: 88% !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 1.8cqw !important;
  }
  html body #hud #status-window.status .body > .row h3::before { font-size: 1.4cqw !important; }
  html body #hud #status-window.status #points {
    position: absolute !important; left: 41.4% !important; top: 0 !important; width: 58.5% !important; height: 100% !important;
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 0.8cqw !important;
    padding: 0 !important; border: 0 !important; background: none !important; border-radius: 0 !important;
    font-size: 1.6cqw !important;
  }
  html body #hud #status-window.status #points b { font-size: 3.4cqw !important; }
}