/* ============================================================================
   skins.css — the locked NiktoutRO graphic skin for RPGO.

   The whole UI is driven by the CSS custom properties declared in style.css
   `:root` (--bg, --panel, --gold, --accent, …). The game now ships a single
   canonical skin, "NiktoutRO" — the dark-purple castle look from the reference
   screenshot. Its full palette is re-declared here, scoped to
   `html[data-skin="niktoutro"]`, so the UI is pinned to the exact look in the
   screenshot regardless of the bare style.css defaults.

   Managed by js/ui/skins.js. Shown in Options → Graphics Skin.
   ========================================================================== */

/* ── Skin picker (Options → Graphics Skin) ─────────────────────────────── */
.skin-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:6px 0}
.skin-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  background:var(--panel);border:2px solid #000;box-shadow:0 2px 0 #000;
  padding:6px;text-align:left;color:var(--ink);cursor:pointer}
.skin-card.sel{border-color:var(--gold);box-shadow:0 0 8px var(--gold),0 2px 0 #000}
.skin-thumb{width:100%;height:auto;display:block;border:1px solid #000;image-rendering:auto}
.skin-swatch{display:flex;gap:0;width:100%;height:18px;border:1px solid #000}
.skin-swatch i{flex:1;height:100%}
.skin-name{font-size:10px;color:var(--gold);text-shadow:1px 1px 0 #000}
.skin-desc{font-size:7px;color:var(--ink-dim);line-height:1.3}

/* ════════════════════════════════════════════════════════════════════════
   NIKTOUTRO — the signature dark-purple castle theme.
   Palette sampled directly from the reference screenshot: near-black violet
   page, deep-purple panels, regal gold trim/active states, lavender ink,
   purple accent (Hunter box, arena glow, action buttons), green level/EXP,
   red/blue HP/SP bars, orange MVP/difficulty highlights.
   ════════════════════════════════════════════════════════════════════════ */
html[data-skin="niktoutro"]{
  --bg:#0c0a1c;          /* near-black violet page edges */
  --bg2:#161029;         /* app body, a touch lighter */
  --panel:#221a44;       /* box / chat / stage-header fill */
  --panel2:#312357;      /* inset inner-border purple */
  --ink:#ece6ff;         /* light lavender text */
  --ink-dim:#9a8fc9;     /* muted lavender labels */
  --gold:#f4c84a;        /* Frame:ON, active tab, Battle label, coin */
  --gem:#7fe6f5;         /* diamond cyan */
  --hp:#e5455e;          /* HP bar red */
  --sp:#3aa9ff;          /* SP bar blue */
  --exp:#8fd83a;         /* EXP / level green */
  --bd:#000;
  --accent:#b072ff;      /* purple — Hunter box, arena glow, buttons */
  --accent2:#ff8c2b;     /* orange — MVP burst, difficulty */

  /* THE key de-pixelation: every element uses var(--pixel) for its font.
     Swapping it here flips the whole UI from the 8-bit "Press Start 2P" look
     to a smooth, anti-aliased font stack in one line — no per-element edits. */
  --pixel:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
}

/* Smooth anti-aliasing everywhere EXCEPT the RO sprite/damage canvases, which
   must stay crisp-pixelated. We re-assert pixelation on those below. */
html[data-skin="niktoutro"] *{ -webkit-font-smoothing:antialiased; }
html[data-skin="niktoutro"] body{ image-rendering:auto; }
html[data-skin="niktoutro"] .sprite,
html[data-skin="niktoutro"] .sprite canvas,
html[data-skin="niktoutro"] .sprite img,
html[data-skin="niktoutro"] .dmg-popup canvas{ image-rendering:pixelated; }

/* Topbar: the NiktoutRO castle logo art is the header background, with a faint
   dark gradient over it so the hero card + menu buttons stay legible. */
html[data-skin="niktoutro"] #topbar{
  background:linear-gradient(180deg,rgba(18,10,40,.42),rgba(18,10,40,.58)),
             #160a2e url('../img/bg/niktoutro_idle.svg?v=20260619-serif') center/cover no-repeat;
  border-bottom:3px solid #000;
}
html[data-skin="niktoutro"] #hero-name{
  color:var(--gold);text-shadow:0 1px 3px rgba(0,0,0,.7);font-weight:700;
}

/* ── Smooth, glossy, rounded surfaces (matches the HD reference, not 8-bit) ── */

/* Panels: soft purple gradient fill, thin lavender border, rounded corners and
   a soft drop shadow + faint inner glow instead of the hard black 8-bit edge. */
html[data-skin="niktoutro"] .card,
html[data-skin="niktoutro"] .stage-header,
html[data-skin="niktoutro"] .hotbar,
html[data-skin="niktoutro"] .combat-log,
html[data-skin="niktoutro"] .modal-card{
  background:linear-gradient(180deg,#2a1f55,#1b1440);
  border:1px solid #4a3585;
  border-radius:10px;
  box-shadow:0 4px 14px rgba(0,0,0,.5), inset 0 0 0 1px rgba(176,114,255,.12);
}
html[data-skin="niktoutro"] .modal-card{ border-color:var(--gold); }

/* Buttons: glossy purple gradient, rounded, light top bevel + soft shadow. */
html[data-skin="niktoutro"] .btn{
  background:linear-gradient(180deg,#9a5cff,#5e2faf);
  border:1px solid #3a2566;
  border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35);
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}
html[data-skin="niktoutro"] .btn:hover{ filter:brightness(1.08); }
html[data-skin="niktoutro"] .btn:active{ box-shadow:0 1px 3px rgba(0,0,0,.5), inset 0 1px 4px rgba(0,0,0,.4); }
html[data-skin="niktoutro"] .btn.primary{
  background:linear-gradient(180deg,#ffd76a,#e2a01e);
  border-color:#8a6410;color:#3a2400;text-shadow:0 1px 0 rgba(255,255,255,.4);
}
html[data-skin="niktoutro"] .btn.success,
html[data-skin="niktoutro"] #hot-auto.on{
  background:linear-gradient(180deg,#6ee06e,#1f8a2a);border-color:#15601e;
}
html[data-skin="niktoutro"] .btn.danger{ background:linear-gradient(180deg,#ff6a6a,#9a1414);border-color:#700f0f; }
/* Top-right menu icons: square, gold-rimmed purple tiles like the reference. */
html[data-skin="niktoutro"] .btn.top-icon{
  background:linear-gradient(180deg,#3a2570,#241552);
  border:1px solid var(--gold);border-radius:7px;
  box-shadow:0 2px 5px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18);
}
html[data-skin="niktoutro"] .btn.help-btn{
  background:linear-gradient(180deg,#3a8fd6,#2a5f9f);border-color:#1c4570;
}

/* Badges (Hunter / Lv) and inputs: rounded, smooth. */
html[data-skin="niktoutro"] .badge{ border-radius:6px; }
html[data-skin="niktoutro"] .log-input-row input,
html[data-skin="niktoutro"] #region-select{ border-radius:7px; }

/* Tabs (Chat / Guild / Battle Log / Whisper) — rounded tops, gold active. */
html[data-skin="niktoutro"] .log-tab,
html[data-skin="niktoutro"] .tab{ border-radius:7px 7px 0 0; }

/* Hotbar / skill / pot slots: rounded with subtle inner depth; gold glow armed. */
html[data-skin="niktoutro"] .hot-slot{
  border-radius:8px;border-color:#5a4a8c;
  box-shadow:inset 0 0 6px rgba(0,0,0,.6);
}
html[data-skin="niktoutro"] .hot-slot.armed{
  border-color:var(--gold);box-shadow:0 0 8px var(--gold);
}

/* HP / SP / EXP bars: rounded capsules. */
html[data-skin="niktoutro"] .bar{ border-radius:6px; }

/* Arena keeps its per-stage photo background (set inline by battle_ui.js);
   the skin gives it the rounded, bright purple glowing frame from the
   reference screenshot. */
html[data-skin="niktoutro"] .arena:not(.pvp-arena){
  border:2px solid var(--accent);
  border-radius:12px;
  box-shadow:0 0 18px rgba(176,114,255,.6);
}

/* ════════════════════════════════════════════════════════════════════════
   EPIC — an ornate, "premium" treatment of the shared building blocks
   (gilded headers, framed cards/modals, glossy buttons, glowing tabs).
   FADED palette on purpose: muted antique gold + low-opacity glows + softer
   contrast so it's easy on the eyes for long idle sessions, NOT the harsh
   high-saturation version. Decorative only — no layout/size changes.
   ════════════════════════════════════════════════════════════════════════ */
html[data-skin="epic"]{
  --bg:#0f0c1d;          /* soft near-black violet */
  --bg2:#171228;         /* app body */
  --panel:#221b3c;       /* desaturated panel */
  --panel2:#2c2450;      /* inset border */
  --ink:#d8d2ea;         /* gentle off-white lavender (not pure bright) */
  --ink-dim:#928ab3;     /* muted labels */
  --gold:#c9a85e;        /* ANTIQUE / faded gold — not the bright #f5c542 */
  --gem:#7bc4c9;         /* muted cyan */
  --hp:#c45463;          /* softened HP red */
  --sp:#4f95cf;          /* softened SP blue */
  --exp:#86b84e;         /* softened EXP green */
  --bd:#000;
  --accent:#9a78cf;      /* muted purple */
  --accent2:#cf8c52;     /* muted amber */
  /* Faded-epic tokens (used only by the rules below). */
  --gold2:#e3cf9a;       /* soft gold highlight */
  --gold-deep:#6b5526;   /* gold shadow */
  --epic-glow:rgba(201,168,94,.22);  /* low-opacity so glows don't strain */
  /* NOTE: keeps the base 8-bit 'Press Start 2P' --pixel font (no override) —
     Epic is the ornate-but-pixelated theme, NOT the smooth/HD niktoutro one. */
}

/* Section headers: soft gilded gradient text + faint glow + flanking rule. */
html[data-skin="epic"] h2{
  background:linear-gradient(180deg,var(--gold2),var(--gold) 55%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:0 0 6px var(--epic-glow);letter-spacing:.4px;
  display:flex;align-items:center;gap:8px;
}
html[data-skin="epic"] h2::before,
html[data-skin="epic"] h2::after{
  content:'';height:2px;flex:1;-webkit-text-fill-color:initial;
  background:linear-gradient(90deg,transparent,var(--gold) 45%,var(--gold) 55%,transparent);
  opacity:.4;
}
html[data-skin="epic"] h2::before{max-width:14px}

/* Cards: layered gradient depth, double inset frame, soft float + top sheen. */
html[data-skin="epic"] .card{
  background:linear-gradient(180deg,#251d44,var(--panel) 45%,#1b1636);
  border:1px solid #3a3060;border-radius:8px;
  box-shadow:0 3px 10px rgba(0,0,0,.4),
             inset 0 0 0 1px rgba(201,168,94,.10), inset 0 1px 0 rgba(255,255,255,.04);
  position:relative;
}
html[data-skin="epic"] .card::after{
  content:'';position:absolute;left:2px;right:2px;top:2px;height:36%;border-radius:7px 7px 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0));
  pointer-events:none;
}

/* Buttons: gentle glossy bevel, soft hover lift — no harsh saturation. */
html[data-skin="epic"] .btn{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#7e62b0,#503a82);
  border:1px solid #2f244f;border-radius:8px;
  box-shadow:0 2px 5px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.16);
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}
html[data-skin="epic"] .btn::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 45%);
}
html[data-skin="epic"] .btn:hover{ filter:brightness(1.07); }
html[data-skin="epic"] .btn.help-btn::after{ border-radius:50%; }
html[data-skin="epic"] .btn.primary{
  background:linear-gradient(180deg,#d8bd78,#a9842f);border-color:#6b521b;
  color:#2c2208;text-shadow:0 1px 0 rgba(255,255,255,.3);
}
html[data-skin="epic"] .btn.success,
html[data-skin="epic"] #hot-auto.on{ background:linear-gradient(180deg,#6fae57,#327a30);border-color:#245a1e; }
html[data-skin="epic"] .btn.danger{ background:linear-gradient(180deg,#c45a5a,#7e1a1a);border-color:#5a1010; }

/* Modal: soft gilded frame, faded vignette, gentle entrance — low glow. */
html[data-skin="epic"] #modal{ background:radial-gradient(ellipse at 50% 30%,rgba(34,20,58,.5),rgba(0,0,0,.8)); }
html[data-skin="epic"] .modal-card{
  background:
    radial-gradient(ellipse at 50% 0%,rgba(201,168,94,.07),rgba(0,0,0,0) 60%),
    linear-gradient(180deg,#241c44,var(--panel) 50%,#1a1534);
  border:1px solid var(--gold);border-radius:8px;
  box-shadow:0 0 0 1px #000, 0 0 14px var(--epic-glow),
             0 12px 32px rgba(0,0,0,.55), inset 0 0 18px rgba(0,0,0,.4);
  animation:epicModalIn .22s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes epicModalIn{ from{opacity:0;transform:translateY(8px) scale(.97)} to{opacity:1;transform:none} }
html[data-skin="epic"] .modal-card h3{
  background:linear-gradient(180deg,var(--gold2),var(--gold));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:0 0 5px var(--epic-glow);letter-spacing:.4px;
}

/* Tabs: soft glowing active indicator. */
html[data-skin="epic"] .tab,
html[data-skin="epic"] .log-tab{ border-radius:7px 7px 0 0; }
html[data-skin="epic"] .tab.active,
html[data-skin="epic"] .pvp-tab.active,
html[data-skin="epic"] .hcfg-tabs .t.active{
  box-shadow:inset 0 2px 0 var(--gold), 0 0 8px var(--epic-glow);
}

/* List rows (stats / skills / inventory / shop): subtle frame + gentle hover lift. */
html[data-skin="epic"] .stat,
html[data-skin="epic"] .skill,
html[data-skin="epic"] .invitem,
html[data-skin="epic"] .shopitem{
  background:linear-gradient(180deg,#241c44,var(--panel) 60%,#1b1636);
  border:1px solid #322a54;border-radius:6px;
  box-shadow:0 2px 5px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
  transition:transform .1s,box-shadow .1s;
}
html[data-skin="epic"] .invitem:hover,
html[data-skin="epic"] .shopitem:hover,
html[data-skin="epic"] .skill:not(.locked):hover{
  transform:translateY(-1px);
  box-shadow:0 3px 7px rgba(0,0,0,.4), 0 0 7px var(--epic-glow), inset 0 1px 0 rgba(255,255,255,.05);
}

/* Bars / hotbar slots: rounded capsules, soft armed glow. */
html[data-skin="epic"] .bar{ border-radius:6px; }
html[data-skin="epic"] .hot-slot{ border-radius:8px;border-color:#473a6e;box-shadow:inset 0 0 6px rgba(0,0,0,.55); }
html[data-skin="epic"] .hot-slot.armed{ border-color:var(--gold);box-shadow:0 0 7px var(--epic-glow); }

/* Top / bottom bars: faint gilded edges; active nav glows softly. */
html[data-skin="epic"] #topbar{ box-shadow:inset 0 -1px 0 rgba(201,168,94,.22), 0 2px 6px rgba(0,0,0,.45); }
html[data-skin="epic"] #bottombar{ box-shadow:inset 0 1px 0 rgba(201,168,94,.16); }
html[data-skin="epic"] .navbtn.active{ box-shadow:inset 0 2px 0 var(--gold), inset 0 0 10px var(--epic-glow); }

/* Character-select: filled slots get a soft gold rim. */
html[data-skin="epic"] .cs-slot.filled{ box-shadow:0 0 8px var(--epic-glow), inset 0 0 0 1px rgba(201,168,94,.25); }

/* Arena: muted purple framed glow (kept gentle). */
html[data-skin="epic"] .arena:not(.pvp-arena){
  border:2px solid var(--accent);border-radius:12px;
  box-shadow:0 0 14px rgba(154,120,207,.35);
}