/* ===== 新月RO Control Panel ===== */

:root {
  /* Sky / Prontera */
  --sky-top: #C8E4FF;
  --sky-mid: #8FCDFF;
  --sky-deep: #5FB3F2;
  --sky-night: #2F4A7A;
  --cloud: #FFFFFF;
  --cloud-shadow: #DDE9F5;

  /* Surface */
  --cream: #FFF8E7;
  --cream-soft: #FFFBF1;
  --cream-deep: #F0DFB5;
  --parchment: #FAEBC8;

  /* Grass / earth */
  --grass: #8DD37A;
  --grass-deep: #5BA84B;
  --earth: #B58B5C;
  --earth-deep: #8A5E33;

  /* Poring & creatures */
  --poring: #FFC8DE;
  --poring-deep: #FF87B8;
  --poring-shine: #FFE6F0;
  --drops-blue: #B5DEFF;
  --drops-blue-deep: #6BB6E8;

  /* RPG bars */
  --hp: #E85763;
  --hp-deep: #B33644;
  --mp: #4FA8E8;
  --mp-deep: #2E7AB0;
  --exp: #FFD25C;
  --exp-deep: #C99A21;
  --zeny: #FFCE3D;

  /* Ink + line */
  --ink: #2D2438;
  --ink-soft: #5A4D6E;
  --ink-mist: #897C9F;
  --border: #3A2E4C;
  --border-soft: #6F5E8A;

  /* Shadow */
  --shadow-s: 0 2px 0 var(--border);
  --shadow-m: 0 4px 0 var(--border);
  --shadow-l: 0 6px 0 var(--border);
  --shadow-soft: 0 8px 24px rgba(45, 36, 56, 0.18);

  /* Fonts */
  --font-cute: "Cherry Bomb One", "ZCOOL KuaiLe", "Noto Sans SC", system-ui, sans-serif;
  --font-zh: "ZCOOL KuaiLe", "Noto Sans SC", system-ui, sans-serif;
  --font-body: "Noto Sans SC", system-ui, sans-serif;
  --font-pixel: "Silkscreen", "DotGothic16", monospace;
  --font-pixel-tiny: "Press Start 2P", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--sky-top);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; margin: 0; }

/* ===== Pixel border (chunky 4px corners) =====
   Apply: box-shadow inset + clip-path corner notches */
.px-card {
  background: var(--cream);
  border: 3px solid var(--border);
  box-shadow:
    inset 0 -4px 0 rgba(58, 46, 76, 0.08),
    inset -2px 0 0 rgba(255, 255, 255, 0.6),
    inset 2px 2px 0 rgba(255, 255, 255, 0.8),
    var(--shadow-m);
  border-radius: 8px;
  position: relative;
}

.px-card--cut {
  border-radius: 0;
  clip-path: polygon(
    0 6px, 3px 6px, 3px 3px, 6px 3px, 6px 0,
    calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px,
    100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) 100%,
    6px 100%, 6px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 6px), 0 calc(100% - 6px)
  );
  border: none;
  box-shadow: none;
}

/* ===== Pixel button ===== */
.px-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: var(--font-zh);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  background: var(--cream);
  border: 3px solid var(--border);
  border-radius: 6px;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.9),
    inset 0 -3px 0 rgba(58, 46, 76, 0.15),
    0 3px 0 var(--border);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
  user-select: none;
}
.px-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.9),
    inset 0 -3px 0 rgba(58, 46, 76, 0.15),
    0 4px 0 var(--border);
}
.px-btn:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.9),
    inset 0 -3px 0 rgba(58, 46, 76, 0.15),
    0 0 0 var(--border);
}
.px-btn--primary { background: var(--poring); }
.px-btn--gold { background: var(--exp); }
.px-btn--blue { background: var(--drops-blue); }
.px-btn--grass { background: var(--grass); color: white; text-shadow: 1px 1px 0 var(--grass-deep); }
.px-btn--ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.px-btn--ghost:hover { background: rgba(255,255,255,0.4); box-shadow: none; transform: none; }

/* ===== Bars (HP/MP/EXP) ===== */
.bar {
  position: relative;
  height: 14px;
  background: var(--ink);
  border: 2px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
  image-rendering: pixelated;
}
.bar__fill {
  height: 100%;
  background: var(--hp);
  position: relative;
  transition: width 0.4s cubic-bezier(.7,.2,.3,1.4);
}
.bar__fill::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.5);
}
.bar--hp .bar__fill { background: linear-gradient(180deg, #FF8A93 0%, var(--hp) 50%, var(--hp-deep) 100%); }
.bar--mp .bar__fill { background: linear-gradient(180deg, #92CFFF 0%, var(--mp) 50%, var(--mp-deep) 100%); }
.bar--exp .bar__fill { background: linear-gradient(180deg, #FFE68A 0%, var(--exp) 50%, var(--exp-deep) 100%); }
.bar--grass .bar__fill { background: linear-gradient(180deg, #B5E89B 0%, var(--grass) 50%, var(--grass-deep) 100%); }

.bar__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-pixel);
  font-size: 10px;
  color: white;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.6);
  letter-spacing: 0.5px;
}

/* ===== Item slot (square framed) ===== */
.slot {
  width: 56px;
  height: 56px;
  background: var(--cream-deep);
  border: 3px solid var(--border);
  border-radius: 4px;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.7),
    inset 0 -3px 0 rgba(58, 46, 76, 0.15);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slot--rare { background: linear-gradient(135deg, #FFE9B5 0%, #FFD25C 100%); }
.slot--epic { background: linear-gradient(135deg, #E0BFFF 0%, #B385FF 100%); }
.slot--legend { background: linear-gradient(135deg, #FFD8A8 0%, #FF8E4F 100%); }
.slot__count {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-family: var(--font-pixel);
  font-size: 10px;
  color: white;
  text-shadow: 1px 1px 0 var(--border);
}

/* ===== Sky / clouds ===== */
.sky-bg {
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 60%, var(--sky-deep) 100%);
  position: relative;
  overflow: hidden;
}
.cloud {
  position: absolute;
  background: var(--cloud);
  border: 3px solid var(--border);
  border-radius: 100px;
  box-shadow:
    inset 0 -4px 0 var(--cloud-shadow);
}
.cloud::before, .cloud::after {
  content: "";
  position: absolute;
  background: var(--cloud);
  border: 3px solid var(--border);
  border-radius: 100px;
  box-shadow: inset 0 -4px 0 var(--cloud-shadow);
}
.cloud--anim { animation: drift linear infinite; }
@keyframes drift {
  from { transform: translateX(-120px); }
  to { transform: translateX(calc(100vw + 120px)); }
}

/* ===== Bounce / float / wiggle ===== */
@keyframes poring-bounce {
  0%, 100% { transform: translateY(0) scaleY(1); }
  35% { transform: translateY(-12px) scaleY(1.08); }
  70% { transform: translateY(0) scaleY(0.92); }
  85% { transform: translateY(-2px) scaleY(1.02); }
}
@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}
@keyframes shine {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.1); }
}

/* ===== Type ===== */
.h-cute {
  font-family: var(--font-cute);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.5px;
  word-break: keep-all;
}
.h-zh { font-family: var(--font-zh); font-weight: 400; word-break: keep-all; }
.t-pixel { font-family: var(--font-pixel); letter-spacing: 0.5px; white-space: nowrap; }
.t-pixel-cn { font-family: var(--font-pixel), var(--font-body); }
.t-tiny { font-family: var(--font-pixel-tiny); font-size: 10px; letter-spacing: 0; }

/* ===== Tag chip ===== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--cream-deep);
  border: 2px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-pixel);
  font-size: 10px;
  color: var(--ink);
  text-transform: uppercase;
}
.chip--hp { background: var(--hp); color: white; }
.chip--mp { background: var(--mp); color: white; }
.chip--gold { background: var(--exp); }
.chip--grass { background: var(--grass); color: white; }
.chip--poring { background: var(--poring); }

/* ===== Sidebar item ===== */
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  font-family: var(--font-zh);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
  position: relative;
  transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease;
  user-select: none;
  white-space: nowrap;
}
.px-btn { white-space: nowrap; word-break: keep-all; flex-shrink: 0; }
.nav-item:hover {
  background: var(--cream);
  color: var(--ink);
  transform: translateX(2px);
}
.nav-item--active {
  background: var(--poring);
  color: var(--ink);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.6),
    inset 0 -2px 0 rgba(58, 46, 76, 0.12);
}
.nav-item--active::before {
  content: "▶";
  position: absolute;
  left: -8px;
  color: var(--poring-deep);
  font-size: 10px;
  animation: blink 1.6s infinite;
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--cream-soft); }
::-webkit-scrollbar-thumb {
  background: var(--poring-deep);
  border: 2px solid var(--cream-soft);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--poring); }

/* ===== Page transitions ===== */
.page-enter { opacity: 1; }

/* Pixelated rendering for SVG pixel art */
.pixelated { image-rendering: pixelated; image-rendering: -moz-crisp-edges; }

/* ============================================================
   NewMoon RO — FluxCP server-side layout (PHP-rendered)
   These selectors prefixed .nm-* are NEW (not in React mockup).
   They wire the original kawaii design tokens into FluxCP's
   page composition (sidebar/topbar/main/footer).
   ============================================================ */

/* Body + background atmosphere */
.nm-body {
    margin: 0;
    background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 100%);
    min-height: 100vh;
    color: var(--ink);
    font-family: var(--font-body);
}
.nm-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.nm-clouds { position: absolute; inset: 0; }
.nm-cloud {
    position: absolute;
    opacity: 0.85;
    animation: drift 60s linear infinite;
}
.nm-cloud-0 { top: 5%;  left: -120px; animation-duration: 80s; animation-delay: 0s; }
.nm-cloud-1 { top: 12%; left: -120px; animation-duration: 95s; animation-delay: -20s; opacity: 0.7; }
.nm-cloud-2 { top: 22%; left: -120px; animation-duration: 70s; animation-delay: -40s; }
.nm-cloud-3 { top: 35%; left: -120px; animation-duration: 110s; animation-delay: -55s; opacity: 0.6; }
.nm-cloud-4 { top: 48%; left: -120px; animation-duration: 85s; animation-delay: -10s; }
.nm-cloud-5 { top: 60%; left: -120px; animation-duration: 100s; animation-delay: -30s; opacity: 0.8; }
.nm-grass {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 90px;
    background: linear-gradient(180deg, transparent 0%, var(--grass) 30%, var(--grass-deep) 100%);
    clip-path: polygon(
        0 30px, 60px 16px, 140px 28px, 220px 14px, 320px 28px, 420px 12px, 540px 24px,
        640px 14px, 760px 26px, 880px 14px, 1000px 28px, 1140px 14px, 1280px 24px,
        1400px 14px, 1520px 28px, 1680px 14px, 1820px 26px, 1920px 16px, 100% 100%, 0 100%
    );
}

/* Layout: sidebar + main */
.nm-layout {
    position: relative;
    z-index: 1;
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px 24px 80px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* Sidebar */
.nm-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--cream);
    border: 3px solid var(--border);
    border-radius: 12px;
    box-shadow: inset 0 -4px 0 rgba(58,46,76,0.08), var(--shadow-m);
    padding: 16px 12px;
    position: sticky;
    top: 24px;
}
.nm-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 16px;
    border-bottom: 2px dashed var(--cream-deep);
    margin-bottom: 12px;
}
.nm-logo-text {
    font-family: var(--font-cute);
    font-size: 20px;
    color: var(--ink);
}
.nm-nav { display: flex; flex-direction: column; gap: 4px; }
.nm-nav-cat {
    font-family: var(--font-pixel);
    font-size: 11px;
    color: var(--ink-mist);
    text-transform: uppercase;
    padding: 12px 8px 4px;
    letter-spacing: 1px;
}
.nm-nav-cat--admin { color: var(--hp-deep); }
.nm-nav-item {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    font-family: var(--font-zh);
    font-size: 14px;
    color: var(--ink-soft);
    transition: background 0.12s, color 0.12s, transform 0.12s;
}
.nm-nav-item:hover {
    background: var(--cream-soft);
    color: var(--ink);
    transform: translateX(2px);
}
.nm-nav-item--active {
    background: var(--poring);
    color: var(--ink);
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.6), inset 0 -2px 0 rgba(58,46,76,0.12);
}
.nm-nav-item--admin { color: var(--hp-deep); }

/* Main column */
.nm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* Top bar */
.nm-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    background: rgba(255, 248, 231, 0.85);
    border: 3px solid var(--border);
    border-radius: 12px;
    box-shadow: inset 0 -4px 0 rgba(58,46,76,0.08), var(--shadow-m);
    backdrop-filter: blur(4px);
}
.nm-breadcrumb {
    font-family: var(--font-cute);
    font-size: 18px;
    color: var(--ink);
}
.nm-topbar-right { display: flex; gap: 8px; align-items: center; }
.nm-topbar-user {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-zh);
    font-size: 14px;
    color: var(--ink);
}
.nm-topbar-btn {
    padding: 6px 14px;
    border: 2px solid var(--border);
    border-radius: 6px;
    background: var(--cream-deep);
    font-family: var(--font-zh);
    font-size: 13px;
    color: var(--ink);
    box-shadow: 0 2px 0 var(--border);
    transition: transform 0.1s;
}
.nm-topbar-btn:hover { transform: translateY(-1px); }
.nm-topbar-btn:active { transform: translateY(1px); box-shadow: 0 0 0 var(--border); }
.nm-topbar-btn--primary { background: var(--poring); }

/* Flash */
.nm-flash {
    padding: 12px 16px;
    background: var(--exp);
    border: 3px solid var(--exp-deep);
    border-radius: 8px;
    font-family: var(--font-zh);
    color: var(--ink);
    box-shadow: 0 3px 0 var(--exp-deep);
}

/* Page content area */
.nm-page { display: flex; flex-direction: column; gap: 16px; }
.nm-page-heading { margin: 0; }
.nm-page-title {
    font-family: var(--font-cute);
    font-size: 32px;
    color: var(--ink);
    margin: 0 0 4px;
}
.nm-page-subtitle {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--ink-mist);
    margin: 0;
}

/* Status bar (HP/MP/EXP) */
.nm-statbar { margin: 8px 0; }
.nm-statbar-label {
    font-family: var(--font-pixel);
    font-size: 11px;
    color: var(--ink);
    margin-bottom: 4px;
    text-transform: uppercase;
}
.nm-statbar-track {
    position: relative;
    height: 18px;
    background: var(--cream-deep);
    border: 2px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}
.nm-statbar-fill {
    height: 100%;
    transition: width 0.3s ease;
    border-right: 1px solid rgba(0,0,0,0.1);
}
.nm-statbar-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-pixel);
    font-size: 11px;
    color: white;
    text-shadow: 1px 1px 0 var(--border);
}

/* Empty state */
.nm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 20px;
    color: var(--ink-mist);
}
.nm-empty-message { font-family: var(--font-zh); font-size: 16px; }

/* Chips (used by helpers.php nm_chip) */
.px-chip {
    display: inline-flex;
    padding: 3px 8px;
    background: var(--cream-deep);
    border: 2px solid var(--border);
    border-radius: 4px;
    font-family: var(--font-pixel);
    font-size: 10px;
    color: var(--ink);
    text-transform: uppercase;
}
.px-chip--good { background: var(--grass); color: white; }
.px-chip--bad  { background: var(--hp); color: white; }
.px-chip--info { background: var(--drops-blue); }
.px-chip--gold { background: var(--exp); }

/* Footer */
.nm-footer {
    margin-top: 24px;
    padding: 20px;
    text-align: center;
    background: rgba(255, 248, 231, 0.75);
    border: 3px solid var(--border);
    border-radius: 12px;
    box-shadow: inset 0 -4px 0 rgba(58,46,76,0.08), var(--shadow-m);
}
.nm-footer-pet { display: flex; justify-content: center; gap: 16px; margin-bottom: 12px; }
.nm-footer-text { font-family: var(--font-zh); font-size: 13px; color: var(--ink-soft); margin: 0 0 4px; }
.nm-footer-text a { color: var(--poring-deep); text-decoration: underline; }
.nm-footer-debug { font-family: var(--font-pixel); font-size: 10px; color: var(--ink-mist); margin: 4px 0 0; }

/* FluxCP form table — rewrite generic-form to match kawaii style */
.generic-form-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
}
.generic-form-table th {
    width: 200px;
    text-align: right;
    padding: 8px 12px;
    font-family: var(--font-zh);
    font-size: 14px;
    color: var(--ink);
    font-weight: 700;
    vertical-align: middle;
}
.generic-form-table td {
    padding: 8px 0;
    vertical-align: middle;
}
.generic-form-table input[type=text],
.generic-form-table input[type=password],
.generic-form-table input[type=email],
.generic-form-table input[type=number],
.generic-form-table select,
.generic-form-table textarea {
    width: 300px;
    padding: 8px 10px;
    background: white;
    border: 2px solid var(--border-soft);
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--ink);
    transition: border-color 0.15s;
}
.generic-form-table input[type=text]:focus,
.generic-form-table input[type=password]:focus,
.generic-form-table input[type=email]:focus,
.generic-form-table input[type=number]:focus,
.generic-form-table select:focus,
.generic-form-table textarea:focus {
    outline: none;
    border-color: var(--poring-deep);
    background: var(--cream-soft);
}
.generic-form button[type=submit],
.generic-form input[type=submit] {
    padding: 10px 24px;
    background: var(--poring);
    border: 3px solid var(--border);
    border-radius: 6px;
    font-family: var(--font-cute);
    font-size: 16px;
    color: var(--ink);
    box-shadow: 0 4px 0 var(--border);
    cursor: pointer;
    transition: transform 0.1s;
}
.generic-form button[type=submit]:hover { transform: translateY(-2px); }
.generic-form button[type=submit]:active { transform: translateY(2px); box-shadow: 0 0 0 var(--border); }

/* Generic table (used by lists like online players, ranking) */
table.nm-table,
table.simple,
table.list {
    width: 100%;
    border-collapse: collapse;
    background: var(--cream-soft);
    border: 3px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-m);
}
.nm-table th, table.simple th, table.list th {
    background: var(--cream-deep);
    padding: 10px 12px;
    font-family: var(--font-cute);
    font-size: 14px;
    color: var(--ink);
    text-align: left;
    border-bottom: 2px solid var(--border);
}
.nm-table td, table.simple td, table.list td {
    padding: 8px 12px;
    border-bottom: 1px dashed var(--cream-deep);
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink-soft);
}
.nm-table tr:hover td { background: rgba(255, 200, 222, 0.15); }

/* Misc helpers */
.notice, .message, .error {
    padding: 10px 14px;
    border: 2px solid var(--border);
    border-radius: 6px;
    font-family: var(--font-zh);
    margin: 8px 0;
}
.notice { background: var(--drops-blue); }
.message { background: var(--grass); color: white; }
.error, .red { background: var(--hp); color: white; }