:root{
  --bg:rgb(12, 15, 24);
  --panel:#111522;
  --text:#DCC7A1;
  --accent:#C9A86A;
  --white:#ffffff;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family: 'Raleway', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif}
/* NOTE: Ensure hidden attribute properly hides elements even when component styles set display */
[hidden]{ display:none !important }

/* NOTE [ADDED]: Page transition — prevent initial flicker and reveal with a smooth fade */
body.preload{ opacity:0; pointer-events:none }
body.page-ready{ opacity:1; pointer-events:auto; transition: opacity .24s ease-in }
@media (prefers-reduced-motion: reduce){ body.page-ready{ transition:none } }

/* NOTE: Unified input styling across the creator UI to match color scheme */
input[type="text"], input[type="number"], input[type="search"], input[type="password"], select{
  background:rgba(17,21,34,.8);
  border:1px solid rgba(201,168,106,.35);
  color:var(--text);
  border-radius:6px;
  padding:6px 8px;
}
input[type="text"]:hover, input[type="number"]:hover, input[type="search"]:hover, input[type="password"]:hover, select:hover{ border-color: rgba(201,168,106,.6) }
input[type="text"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="password"]:focus, select:focus{ outline:2px solid var(--accent); outline-offset:2px; border-color: rgba(201,168,106,.8); background: rgba(17,21,34,.9) }

header{
  background:var(--panel);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 20px;
  position:sticky;
  top:0; z-index:10;
  border-bottom:1px solid rgba(201,168,106,.25);
}

/* NOTE: Header left container to hold logo and top-left Manage Characters button */
.header-left{ display:flex; align-items:center; gap:12px }

/* NOTE: Section title bar to align the page title on the left and the Manage Characters button on the right */
.section-title-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px }
.section-title-bar .title-actions{ display:flex; align-items:center; gap:12px }

.logo{font-family:'Cinzel', serif; font-size:22px; letter-spacing:.5px}
/* NOTE: New logo icon styling; adds an icon to the top-left header. Previously no icon image existed. */
.logo-icon{ width:24px; height:24px; margin-right:8px; vertical-align:middle; }

/* NOTE: Generic inline icon image size for buttons (dice icon, etc.). Not present previously. */
.icon{ width:20px; height:20px; display:inline-block }
.btn.icon-btn img.icon{ width:20px; height:20px; }

nav a{
  color:var(--accent);
  text-decoration:none;
  margin:0 10px;
  font-weight:600;
}
nav a:hover{ color:var(--white) }

/* NOTE: Removed global #authbar/#whoami styles; these are now defined in creator/index.html only */

main{max-width:1100px; margin:0 auto; padding:24px}

.hero{
  background:url('../images/starfield.jpg') center/cover no-repeat;
  border:1px solid rgba(201,168,106,.35);
  border-radius:12px;
  padding:80px 24px;
  text-align:center;
  margin:16px 0 24px 0;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.hero h1{ font-family:'Cinzel', serif; font-size:40px; margin:0 0 8px 0 }
.hero p{ font-size:18px; margin:0 0 18px 0 }
/* NOTE: Added hero-logo above headline on home page */
.hero .hero-logo{ width:min(800px, 70%); height:auto; display:block; margin:0 auto 14px; filter: drop-shadow(0 6px 16px rgba(0,0,0,.35)); }

.btn{
  display:inline-block;
  background:var(--accent);
  color:var(--bg);
  padding:8px 16px; /* NOTE: reduced height while keeping comfortable touch target */
  min-height:32px;
  line-height:1.2;
  font-size:14px;
  border-radius:8px;
  font-weight:700;
  border:1px solid rgba(201,168,106,.7);
  text-decoration:none;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
/* NOTE: Global icon-only button style (used for roll/remove/add icons) */
.btn.icon-btn{ padding:4px 6px; min-height:28px; font-size:16px; display:inline-flex; align-items:center; justify-content:center }
.btn:hover{ background:var(--text); color:var(--bg); border-color: rgba(201,168,106,.8); }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.btn[disabled]{ opacity:.6; cursor:not-allowed }
.btn.conflict{ outline:2px solid #c84b4b; outline-offset:2px }
.upgrade-row.conflict{ border-color: rgba(200,75,75,.55) }
.btn.locked-limit::after{ content:'\1F512'; margin-left:6px }

/* NOTE: Add buttons exist already in creator/index.html with class "add-sticky".
   Change their style to a distinct green theme for clearer affordance. */
.btn.add-sticky{ background:#1f5c2b; color:#d6f7d6; border-color:#2f8f43; box-shadow:0 2px 8px rgba(31,92,43,.35) }
.btn.add-sticky.icon-btn{ /* NOTE: Smaller green add button when icon-only */ padding:4px 6px; min-height:28px; font-size:18px }
.btn.add-sticky:hover{ background:#2f8f43; color:#eaffea; border-color:#3fbf63 }
.btn.add-sticky:focus-visible{ outline:2px solid #3fbf63; outline-offset:2px }
.btn.add-sticky:active{ transform: translateY(1px) }

.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.card{
  background:rgba(17,21,34,.6);
  border:1px solid rgba(201,168,106,.25);
  border-radius:12px;
  padding:16px;
  text-align:center;
}
/* NOTE [ADDED]: Sign selection cards base style with smooth transitions */
.sign-card{ position:relative; cursor:pointer; transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease }
.sign-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.sign-card:hover{ border-color: rgba(201,168,106,.55); box-shadow:0 6px 18px rgba(201,168,106,.18) }
/* NOTE [ADDED]: Selected state — accent border, subtle scale and glow */
.sign-selected{ border-color: var(--accent) !important; box-shadow:0 0 0 2px rgba(201,168,106,.5), 0 12px 24px rgba(201,168,106,.22); transform: translateZ(0) scale(1.02) }
/* NOTE [ADDED]: Checkmark badge overlay for selected cards */
.sign-badge{ position:absolute; top:10px; right:10px; background:var(--accent); color:var(--bg); border-radius:999px; width:26px; height:26px; display:flex; align-items:center; justify-content:center; font-weight:800; box-shadow:0 2px 6px rgba(0,0,0,.35); opacity:0; transform: scale(.8); transition: opacity .22s ease, transform .22s ease }
.sign-selected .sign-badge{ opacity:1; transform: scale(1) }
/* NOTE [ADDED]: Sign stat line formatting — same size/color as description; value in white */
.sign-stat-line{ color: var(--text); margin:8px 0 10px 0; font-size:14px }
.sign-stat-line .sign-label{ font-weight:700 }
.sign-stat-line .sign-value{ color: var(--white); font-weight:400 }
/* NOTE [ADDED]: Smooth fade/scale transition when switching Sun/Moon views */
#creation-grid.fade-enter{ opacity:0; transform: scale(.98) }
#creation-grid.fade-enter-active{ opacity:1; transform: scale(1); transition: opacity .24s ease, transform .24s ease }
/* NOTE [ADDED]: Creation modal actions row alignment and step note on the right */
.abilities-modal .char-actions{ display:flex; gap:12px; align-items:center }
.creation-note-right{ margin-left:auto; text-align:right }
.section.grid-3 .card{ display:flex; flex-direction:column; align-items:center; min-height:180px; padding-bottom:52px; position:relative }
.section.grid-3 .card .btn{ position:absolute; left:50%; bottom:8px; transform: translateX(-50%) }
.grid-3 .card{ display:flex; flex-direction:column; align-items:center; min-height:180px; padding-bottom:52px; position:relative }
.grid-3 .card .btn{ position:absolute; left:50%; bottom:12px; transform: translateX(-50%) }
/* NOTE [ADDED]: In creation modal, do not absolute-position card buttons */
.abilities-modal .grid-3 .card .btn{ position:static; left:auto; bottom:auto; transform:none }
.abilities-modal .grid-3 .card .icon-btn{ min-width:40px; padding:6px 10px }
@media(max-width:700px){ .section.grid-3 .card, .grid-3 .card{ min-height:150px } }
.card h3{ font-family:'Cinzel', serif; margin:8px 0 }
.card p{ margin:8px 0 12px 0 }
/* NOTE: No existing merch/product image styles; add responsive product image for merch cards */
.product-image{ width:min(280px, 75%); height:auto; display:inline-block; margin:8px 0 12px; filter: drop-shadow(0 6px 16px rgba(0,0,0,.35)); }
.hoodie-image{ /* NOTE: Specific hook for hoodie image if later customization is needed */ }
/* NOTE: Center product image vertically within merch card entry; keep title at top and Order button at bottom */
.section.grid-3 .card .product-image{ margin-top:auto; margin-bottom:auto; }

.mini-scroll{ max-height:160px; overflow:auto; width:100%; }
.mini-scroll .sign-stat-line{ margin:6px 0; }
.list-row{ display:flex; align-items:center; gap:8px; justify-content:space-between }
.list-row .remove-btn{ margin-left:auto; min-width:34px; min-height:34px; padding:6px 10px; border-radius:6px }
.list-row .remove-btn:hover, .list-row .remove-btn:focus{ border-color: rgba(201,168,106,.6); outline:2px solid var(--accent); outline-offset:2px }
.list-row.removing{ opacity:0; transition: opacity .18s ease }
.invalid-select{ outline:2px solid #c84b4b; outline-offset:2px }

.section{
  margin:24px 0;
  padding:16px;
  border:1px solid rgba(201,168,106,.25);
  border-radius:12px;
  background:rgba(17,21,34,.4);
}

footer{
  border-top:1px solid rgba(201,168,106,.25);
  color:#b6ab96;
  text-align:center;
  padding:30px 10px;
  margin-top:30px;
}
@media(max-width:900px){
  .grid-3{ grid-template-columns:1fr; }
  .hero h1{ font-size:32px }
}
/* NOTE: Mobile header + nav improvements (existing header/nav styles extended for small screens) */
@media(max-width:700px){
  header{ /* Stack logo and nav for narrow screens */ flex-direction:column; align-items:flex-start; gap:8px }
  nav{ /* Allow horizontal swipe through links when space is tight */ display:flex; gap:8px; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; padding-bottom:4px }
  nav a{ /* Slightly larger touch targets on mobile */ padding:10px 12px; margin:0; display:inline-block }
}
/* NOTE: Abilities filtering UI styles */
.abilities-layout{ display:flex; flex-direction:column; gap:16px }
.filter-sidebar{ background:rgba(17,21,34,.6); border:1px solid rgba(201,168,106,.25); border-radius:12px; padding:12px; }
.filter-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px }
.filter-bar{ display:flex; flex-direction:column; gap:3px }
/* NOTE: Collapsed state keeps header visible while hiding filter controls */
.filter-sidebar.collapsed .filter-bar{ display:none; }
.filter-category{ margin:0 }
.filter-category-header{ display:flex; align-items:center; justify-content:space-between; margin:4px 0 }
.collapse-toggle{ background:rgba(17,21,34,.6); border:1px solid rgba(201,168,106,.25); padding:6px 10px; border-radius:8px; cursor:pointer; color:var(--text) }
.collapse-toggle[aria-expanded="false"]{ background:rgba(17,21,34,.4); color:var(--text) }
.collapse-toggle:hover{ border-color: rgba(201,168,106,.6); color:var(--white) }
.collapse-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.collapsible-content{ transition: max-height .28s ease, opacity .2s ease; max-height: 1200px; opacity:1; overflow:hidden }
.collapsed .collapsible-content{ max-height:0; opacity:0; }
.filter-category h4{ margin:6px 0; font-family:'Cinzel', serif }
.tag-list{ display:flex; flex-wrap:wrap; gap:8px }
.tag-btn{ background:transparent; color:var(--text); border:1px solid rgba(201,168,106,.35); border-radius:999px; padding:6px 10px; cursor:pointer; font-weight:600 }
.tag-btn:hover{ border-color: var(--accent); color: var(--white) }
.tag-btn[aria-pressed="true"]{ background: var(--accent); color: var(--bg); border-color: rgba(201,168,106,.8) }
.tag-count{ margin-left:6px; font-size:12px; color:#9d927f }
.active-filters{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 }
.badge{ display:inline-flex; align-items:center; gap:6px; background:rgba(17,21,34,.6); border:1px solid rgba(201,168,106,.25); border-radius:999px; padding:6px 10px }
.badge .remove{ cursor:pointer; font-weight:700 }
/* NOTE: Stack toolbar contents so the search field sits ABOVE the selected filters.
   Keep spacing consistent with other sections. */
.abilities-toolbar{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:12px }
/* NOTE: Static (sticky) search field placed above active filters */
.abilities-search{ display:flex; align-items:center; gap:8px; position:sticky; top:0; z-index:10; /* NOTE: Make holder background transparent */ background:transparent; /* NOTE: Removed holder outline/border per request */ border:none; border-radius:8px; padding:6px 8px }
.abilities-search .search-input{ width:280px; max-width:50vw; padding:8px; border-radius:8px; border:1px solid rgba(201,168,106,.25); background:rgba(17,21,34,.6); color:var(--text) }
.abilities-search .search-input:focus{ outline:2px solid var(--accent); outline-offset:2px; border-color: rgba(201,168,106,.8); background: rgba(17,21,34,.9) }
.abilities-search .search-label{ font-weight:700 }
/* NOTE: Items search UI — make identical to Abilities search per request.
   Checked: there was no `.items-search` style previously; adding new rules to match `.abilities-search`. */
.items-search{ display:flex; align-items:center; gap:8px; position:sticky; top:0; z-index:10; background:transparent; border:none; border-radius:8px; padding:6px 8px }
.items-search .search-input{ width:280px; max-width:50vw; padding:8px; border-radius:8px; border:1px solid rgba(201,168,106,.25); background:rgba(17,21,34,.6); color:var(--text) }
.items-search .search-input:focus{ outline:2px solid var(--accent); outline-offset:2px; border-color: rgba(201,168,106,.8); background: rgba(17,21,34,.9) }
.items-search .search-label{ font-weight:700 }
/* NOTE: New toolbar for Spells panel: right-aligned AP total */
.spells-toolbar{ display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-bottom:12px }
.abilities-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(2, minmax(280px, 1fr)); gap:12px }
.ability-card{ background:rgba(17,21,34,.6); border:1px solid rgba(201,168,106,.25); border-radius:12px; padding:12px }
.ability-card h3{ margin:0 0 6px 0; font-family:'Cinzel', serif }
.ability-meta{ font-size:12px; color:#9d927f; margin-bottom:6px }
/* NOTE: Make ability description and the text after "Stats:" appear in white for better readability */
.ability-card .ability-desc{ color: var(--white); }
.ability-card .ability-reqs .stats-val{ color: var(--white); }
.ability-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px }
.empty-state{ text-align:center; color:#b6ab96; padding:12px }
.filter-mobile-trigger{ display:none; margin-bottom:8px }
.filter-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.65); display:flex; align-items:center; justify-content:center; }
.filter-overlay[hidden]{ display:none }
.filter-overlay-content{ width:min(680px, 95vw); max-height:85vh; overflow:auto; background:var(--panel); border:1px solid rgba(201,168,106,.35); border-radius:12px; padding:12px }
.filter-overlay-header{ display:flex; align-items:center; justify-content:space-between; }

/* Color coding per category */
.tag-btn.type{ border-color: rgba(201,168,106,.5) }
.tag-btn.element{ border-color: #8fbce8 }
.tag-btn.stat{ border-color: #c48fb8 }
.tag-btn.prereq{ border-color: #e8b48f }
.tag-btn.sign{ border-color: #a3d49a }
.tag-btn.tier{ border-color: #d4a39a }
.tag-btn.action{ border-color: #9aa3d4 }
.tag-btn.class{ border-color: #d49aa3 }

@media(max-width:1024px){
  .filter-mobile-trigger{ display:block }
}
@media(max-width:540px){
  .abilities-grid{ grid-template-columns: 1fr }
}
/* NOTE: Spells management UI */
.spells-layout{ display:flex; flex-direction:column; gap:16px }
.spells-stack{ display:flex; flex-direction:column; gap:16px }
.spells-form .card label{ display:block; margin:8px 0 }
.base-config{ display:grid; gap:8px }
.base-row{ display:grid; grid-template-columns: 1fr 140px; align-items:center; gap:8px }
.upgrade-panel{ display:grid; gap:10px }
.upgrade-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; border:1px dashed rgba(201,168,106,.25); border-radius:8px; padding:8px }
.upgrade-actions{ display:flex; align-items:center; gap:12px }
.upgrade-info{ font-size:12px; color:#9d927f; text-align:left }
.upgrade-row strong{ display:block; text-align:left }
.equip-grid{ display:grid; grid-template-columns: repeat(3, minmax(220px,1fr)); gap:20px; justify-content:center; align-items:start; width:100%; max-width:none; margin:0 auto 16px }
.creation-modal #creation-grid .sign-card, #creation-grid .sign-card{ width:100%; }
.equip-col{ text-align:center }
.equip-col h4{ margin:0 0 8px }
.center-actions{ display:flex; justify-content:center }
/* NOTE: Summary previously aligned to start, causing a narrow card. Stretch to full width. */
.spells-summary{ align-self: stretch; width: 100%; }
/* NOTE: Center summary panel metrics; previously space-between laid items left/right */
.ap-panel{ display:flex; align-items:center; justify-content:center; gap:12px }

@media(max-width:900px){
  /* layout already vertical */
}
/* NOTE: Spells form mobile: stack label and input */
@media(max-width:700px){
  .base-row{ grid-template-columns: 1fr }
  .base-row input, .base-row select{ width:100% }
}
/* NOTE: Interactive Codex styles */
.codex-page{ position:relative }
.rulebook-topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px }
#rule-search{ width:280px; max-width:50vw; padding:8px; border-radius:8px; border:1px solid rgba(201,168,106,.25); background:rgba(17,21,34,.6); color:var(--text) }
#back-to-top{ padding:8px 12px }
.chapter-nav{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 18px 0 }
.chapter-nav .nav-btn{ background:rgba(17,21,34,.6); border:1px solid rgba(201,168,106,.25); color:var(--text); border-radius:999px; padding:8px 12px; cursor:pointer; font-weight:600 }
.chapter-nav .nav-btn.active{ background:var(--accent); color:var(--bg) }
.chapter-nav .nav-btn:hover{ border-color: rgba(201,168,106,.6); color:var(--white) }
.breadcrumbs{ margin:8px 0 12px 0; color:#9d927f; font-size:12px }
.rulebook .chapter{ margin:24px 0; padding:16px; border:1px solid rgba(201,168,106,.25); border-radius:12px; background:rgba(17,21,34,.4) }
.rulebook .chapter h2{ font-family:'Cinzel', serif; margin:0 0 8px 0 }
.collapsible{ border:1px dashed rgba(201,168,106,.25); border-radius:8px; margin:8px 0; }
.filter-category.collapsible{ border:none; }
.collapsible > summary{ cursor:pointer; padding:8px 10px; list-style:none; font-weight:700 }
/* NOTE: Rulebook summary font-size bump (scoped to .rulebook to avoid global impact) */
.rulebook .collapsible > summary{ font-size: 2rem; }
.collapsible .content{ padding:8px 12px }
.signs-grid{ display:grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap:12px }
.divider{ height:1px; background:rgba(201,168,106,.25); margin:10px 0 }
html{ scroll-behavior: smooth; }
mark{ background: rgba(201,168,106,.35); color: var(--white) }
@media(max-width:700px){ .signs-grid{ grid-template-columns: 1fr } #rule-search{ width:100% } }
/* NOTE: prevent toggling for always-open sections */
.collapsible.always-open > summary{ cursor:default; pointer-events:none }
/* NOTE: rule note callout styling */
.rule-note{ background:rgba(17,21,34,.6); border:1px solid rgba(201,168,106,.35); border-radius:8px; padding:10px; color:var(--text); margin:8px 0 }
/* NOTE: rule example callout styling (new). Previously .rule-example existed only as layout in character.html; now add a subtle panel background to visually separate examples. */
.rule-example{ background:rgba(17,21,34,.65); border:1px solid rgba(201,168,106,.35); border-radius:10px; padding:12px; margin:10px 0 }
.rule-example h4{ margin:0 0 6px; font-family:'Cinzel', serif }
.sign-label{ font-weight:700; color:inherit }
.sign-value{ font-weight:400; color: var(--white) }
.chapter-grid{ display:grid; grid-template-columns: repeat(2, minmax(260px,1fr)); gap:16px }
.chapter-card{ display:block; text-decoration:none; color:var(--text); background:rgba(17,21,34,.6); border:1px solid rgba(201,168,106,.25); border-radius:12px; padding:16px }
.chapter-card:hover{ border-color: rgba(201,168,106,.6); color: var(--white) }
@media(max-width:700px){ .chapter-grid{ grid-template-columns: 1fr } }
/* NOTE: Creator page layout and UI */
.creator-layout{ display:grid; grid-template-columns: repeat(3, minmax(260px, 1fr)); gap:16px }
/* NOTE: Previously .creator-top only set a bottom margin, causing Basics, Vitals, and Stats cards to sit flush.
   Convert to a vertical flex stack with gap to add spacing between these cards, matching the space seen before Library. */
.creator-top{ margin:0 0 16px 0; display:flex; flex-direction:column; gap:16px }
.creator-top .form-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.creator-top label{ display:flex; align-items:center; gap:8px }
.creator-top .sign-field{ display:flex; align-items:center; gap:8px }
.creator-top .field-label{ font-weight:700 }
.sign-name{display:inline-block; padding:6px 10px; border-radius:999px; border:0px solid rgba(201,168,106,.25); background:rgba(17,21,34,.4); color:var(--text); font-weight:600; white-space:nowrap }
.sign-abilities{ display:grid; grid-template-columns: repeat(2, minmax(220px,1fr)); gap:8px; margin-top:8px }
.sign-ability{ min-height:40px; background:rgba(17,21,34,.6); border:1px dashed rgba(201,168,106,.25); border-radius:8px; padding:8px }
.sign-ability-meta{ margin:6px 0 6px; }
@media(max-width:700px){ .sign-abilities{ grid-template-columns: 1fr } }
.creator-column{ display:flex; flex-direction:column; gap:16px }
.stats-grid{ display:flex; flex-direction:column; gap:10px }
/* NOTE: Full-width stats redesigned into titled rows with 3 equal columns */
.stat-title{ font-family:'Cinzel', serif; font-weight:700; margin:4px 0 }
.stat-row{ display:grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap:8px }
.stat-field{ display:flex; align-items:center; justify-content:space-between; gap:8px; background:rgba(17,21,34,.6); border:1px solid rgba(201,168,106,.25); border-radius:8px; padding:8px }
.stat-field label{ font-weight:600 }
.stat-controls{ display:flex; align-items:center; gap:8px }
.stat-input{ width:50px; background:rgba(17,21,34,.8); border:1px solid rgba(201,168,106,.35); color:var(--text); border-radius:6px; padding:6px 8px; line-height:1.2; text-align:center !important }
/* NOTE: Read-only stat value shown on the Stats grid (replaces inputs when editing via modal). */
.stat-value{ width:50px; background:rgba(17,21,34,.8); border:1px solid rgba(201,168,106,.35); color:var(--text); border-radius:6px; padding:6px 8px; line-height:1.2; text-align:center; display:inline-flex; align-items:center; justify-content:center; font-weight:700 }
/* NOTE: Sun/Moon affinity highlight colors for main stats grid */
.stat-field label.sun-affinity{ color: #ff6bdc }
.stat-field label.moon-affinity{ color: #6bb7ff }
.stat-value.sun-affinity{ color: #ff6bdc }
.stat-value.moon-affinity{ color: #6bb7ff }
/* NOTE: Generic affinity classes for any inline text (e.g., modal legend) */
.sun-affinity{ color: #ff6bdc }
.moon-affinity{ color: #6bb7ff }
.stat-input:hover{ border-color: rgba(201,168,106,.6) }
.stat-input:focus{ outline:2px solid var(--accent); outline-offset:2px; border-color: rgba(201,168,106,.8); background: rgba(17,21,34,.9) }
/* NOTE: Derived per-type actions line placed after each stats row */
.stat-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:4px 0 8px 0 }
.stat-actions-controls{ display:flex; align-items:center; justify-content:flex-end; gap:8px; margin:0 0 6px 0 }
.stat-chip{ display:inline-flex; align-items:center; gap:6px; background:rgba(17,21,34,.6); border:1px solid rgba(201,168,106,.25); border-radius:999px; padding:6px 10px; font-weight:700; color:var(--text) }
/* NOTE: Override for Vitals element chips: remove outline/border while keeping pill layout */
.vitals-grid .element-chip{ border:none }
/* NOTE: Maintain element chip appearance when relocated under Basics (sign-abilities) */
.sign-abilities .element-chip{ border:none; margin-top:6px }
.stat-chip .value{ color: var(--white) }
/* Remove number field spinners for cleaner look */
.stat-input::-webkit-outer-spin-button,
.stat-input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0 }
.stat-input[type="number"]{ -moz-appearance: textfield }
/* NOTE: Center values in current-actions number inputs; this class was added in creator.js */
.action-current-input{ width:50px; background:rgba(17,21,34,.8); border:1px solid rgba(201,168,106,.35); color:var(--text); border-radius:6px; padding:6px 8px; line-height:1.2; text-align:center !important }
.action-current-input::-webkit-outer-spin-button,
.action-current-input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0 }
.action-current-input[type="number"]{ -moz-appearance: textfield }
/* NOTE: Center values in vitals inputs without altering their IDs/classes */
/* NOTE: Force center alignment for vitals; ensure no UA/default overrides */
#stat-hp input, #stat-mp input{ width:50px; text-align:center !important }
/* NOTE: Defensive selector to center any number input inside stats grid */
.stats-grid input[type="number"]{ text-align:center !important }
/* NOTE: Updated to 4 columns to fit HP, MP, Sun, Moon chips on one row */
.vitals-grid{ display:grid; grid-template-columns: repeat(3, minmax(150px,1fr)); gap:10px; align-items:center; grid-auto-rows: minmax(32px, auto) }
/* NOTE: Responsive fallback for small screens */
@media(max-width:700px){ .vitals-grid{ grid-template-columns: 1fr; grid-auto-rows: auto } }

/* NOTE: New display-only resource blocks for HP/MP with action buttons */
.resource-wrap{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
/* NOTE: Resources action rows: tighten spacing and avoid full-width buttons */
.resource-actions{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content: flex-start }

/* Resources layout alignment: place action lines and element chips */
#stat-hp{ grid-column: 1 }
#hp-actions-line1{ grid-column: 1; grid-row: 2 }
#hp-actions-line2{ grid-column: 1; grid-row: 3 }
#stat-mp{ grid-column: 2 }
#mp-actions-line1{ grid-column: 2; grid-row: 2 }
#mp-actions-line2{ grid-column: 2; grid-row: 3 }
.sun-chip{ grid-column: 3; grid-row: 1 }
.moon-chip{ grid-column: 3; grid-row: 2 }
.ap-chip{ grid-column: 3; grid-row: 1 }
/* NOTE: AP actions sit below chips on the right column */
/* NOTE: AP action buttons align with Heal/Damage (row 3) */
#ap-actions-line{ grid-column: 3; grid-row: 3 }
/* NOTE: AP amount entry aligns with Upgrade/Downgrade (row 2) */
#ap-actions-line1{ grid-column: 3; grid-row: 2 }
/* NOTE [UPDATED]: Inline Amount group keeps label and input aligned on one line */
#ap-inline-group{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }
#ap-inline-group label{ display:inline-block; white-space:nowrap; height:40px; line-height:40px; margin:0; color:var(--text); }

/* Heal/Damage colors and states */
/* NOTE: Change Heal/Damage to use colored BACKGROUNDS (not text). Keep high contrast. */
.btn-heal{ background:#2f8f43; color:#ffffff; border-color:#2f8f43 }
.btn-heal:hover{ background:#3fbf63; color:#ffffff; border-color:#3fbf63 }
.btn-heal:focus-visible{ outline:2px solid #3fbf63; outline-offset:2px }
.btn-damage{ background:#cc2f2f; color:#ffffff; border-color:#cc2f2f }
.btn-damage:hover{ background:#e05a5a; color:#ffffff; border-color:#e05a5a }
.btn-damage:focus-visible{ outline:2px solid #e05a5a; outline-offset:2px }
/* NOTE: Make all Resources action buttons equal width within their row. */
/* NOTE: Make action buttons roughly half of their previous width.
   Fixed basis keeps them consistent and leaves breathing room on wide screens. */
.vitals-grid .resource-actions .btn{ flex: 1 1 140px; min-width: 140px; box-sizing: border-box; min-height: 36px; }
/* NOTE: Inline AP input alignment and validation visuals */
#ap-inline-input{ min-width: 140px; max-width:160px; box-sizing: border-box; min-height: 40px; height:40px; padding: 8px 10px; border-radius: 8px; border:1px solid rgba(201,168,106,.7); background: rgba(17,21,34,.6); color: var(--text); font-size: 14px; line-height: 1.2; }
#ap-inline-input:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
#ap-inline-input.field-invalid{ border-color:#e05a5a; box-shadow:0 0 0 2px rgba(224,90,90,.25) }
#ap-inline-error{ color:#e05a5a; font-size:12px; min-height:14px; align-self:flex-start }
@media(max-width:700px){
.vitals-grid .resource-actions{ gap:8px }
/* NOTE: AP inline error spans a new row when present to avoid breaking equal spacing */
#ap-inline-error{ flex: 1 1 100%; min-width:100%; margin-top:4px }
/* NOTE: Desktop: keep AP input compact so buttons fit neatly */
/* NOTE [UPDATED]: Ensure label+input act as a single flex item on wrap */
#ap-inline-group{ flex: 1 1 auto; min-width: 200px }
#ap-inline-input{ flex: 1 1 140px; min-width: 140px; width:100% }
/* NOTE: Mobile: allow controls to stack full width for usability */
@media(max-width:700px){ .vitals-grid .resource-actions .btn, #ap-inline-input{ min-width: 100%; flex: 1 1 100% } .ap-chip{ grid-column: 1; grid-row: auto } #ap-actions-line1, #ap-actions-line{ grid-column:1; grid-row:auto } }
}
/* NOTE: Subtle feedback flash when AP changes */
.ap-chip.flash{ box-shadow: 0 0 0 2px rgba(63,191,99,.6), 0 0 14px rgba(63,191,99,.35) }
.ap-chip.flash-negative{ box-shadow: 0 0 0 2px rgba(224,90,90,.6), 0 0 14px rgba(224,90,90,.35) }
/* NOTE: AP change inline text styling */
#ap-change-text{ color: var(--accent); font-weight:700 }
.action-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px }
.req-status{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; font-size:12px; font-weight:700 }
.req-ok{ background:#1f5c2b; color:#d6f7d6; border:1px solid #2f8f43 }
.req-bad{ background:#5c1f1f; color:#f7d6d6; border:1px solid #8f2f2f }
.progress-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.65); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; z-index:100 }
.progress-overlay[hidden]{ display:none }
.spinner{ width:36px; height:36px; border-radius:50%; border:4px solid rgba(201,168,106,.25); border-top-color: var(--accent); animation: spin 1s linear infinite }
@keyframes spin{ to{ transform: rotate(360deg) } }
@media(max-width:900px){ .creator-layout{ grid-template-columns: 1fr } }
@media(max-width:700px){ .stat-row{ grid-template-columns: 1fr } }
/* NOTE: Interactive abilities list styles */
.ability-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px }
.ability-item{ background:rgba(17,21,34,.6); border:1px solid rgba(201,168,106,.25); border-radius:8px; padding:8px }
.ability-item-header{ display:flex; align-items:center; justify-content:space-between; gap:8px }
.ability-name{ font-weight:700; font-family:'Cinzel', serif }
/* NOTE: Ability name turns red when requirements are not met */
.ability-name.unmet{ color:#e05a5a }
.ability-actions{ display:flex; align-items:center; gap:8px }
.ability-row{ display:flex; align-items:center; justify-content:flex-start; gap:8px }
.ability-row .ability-name{ text-align:left; margin-right:auto }
.ability-row .upgrade-info{ text-align:right }
.ability-row .ability-actions{ text-align:right }
.upgradeable{ border-color: rgba(201,168,106,.5) }
.not-upgradeable{ opacity:.85 }
.desc-content{ max-height:0; overflow:hidden; transition:max-height .28s ease, opacity .2s ease; opacity:0; margin-top:6px }
.ability-item[aria-expanded="true"] .desc-content{ max-height:240px; opacity:1 }
.modal-loading{ display:flex; align-items:center; justify-content:center; gap:8px; padding:12px }
.abilities-modal{ position:fixed; inset:0; background:rgba(0,0,0,.65); display:flex; align-items:center; justify-content:center; z-index:100 }
.abilities-modal[hidden]{ display:none }
/* NOTE: Widen generic modal container so Stats popup has more horizontal room.
   Checked existing usage: .modal-container is used by abilities, stats, and character management modals.
   Increasing to 1100px keeps layout within 95vw while preventing action overlap in stats. */
/* NOTE: Widen modal container so Stats popup has more horizontal room to keep action buttons side-by-side */
.modal-container{ width:min(1280px, 95vw); max-height:90vh; background:var(--panel); border:1px solid rgba(201,168,106,.35); border-radius:12px; padding:12px; display:flex; flex-direction:column }
/* NOTE [ADDED]: Narrower width for Custom Roll modal; keep global default for others */
#dice-modal .modal-container{ width:min(480px, 95vw) }
#dice-modal .modal-content{ padding: clamp(8px, 2vw, 16px); }
.dice-form{ display:grid; gap: clamp(12px, 2vw, 16px) }
.dice-form > div{ display:flex; flex-direction:column; gap: clamp(8px, 1.5vw, 12px) }
.toggle-group{ display:flex; flex-wrap:wrap; gap: clamp(8px, 1.5vw, 12px); margin-top: clamp(16px, 2vw, 20px) }
.toggle-group .btn{ min-width:48px; min-height:48px; padding:10px 14px; background:rgba(17,21,34,.6); color:var(--text); border:1px solid rgba(201,168,106,.35); border-radius:8px }
.toggle-group .btn[aria-pressed="true"]{ background:var(--accent); color:var(--bg); border-color:var(--accent); box-shadow:0 0 0 2px rgba(201,168,106,.45) }
#dice-modal input.input{ padding: clamp(8px, 1.5vw, 12px); min-height:48px; width: 60px }
#dice-modal .modal-toolbar{ display:flex; align-items:center; justify-content:center; gap: clamp(12px, 2vw, 16px); margin-top: clamp(12px, 2vw, 16px); width: 100%; }
#dice-modal .modal-toolbar .btn{ min-height:48px; padding:10px 14px; min-width:110px;font-size:15px }

#vitals-modal .modal-container{ width:min(420px, 95vw) }
#vitals-modal .modal-content{ padding: clamp(10px, 2vw, 16px); display:flex; flex-direction:column; align-items:center; gap: clamp(12px, 2vw, 16px) }
#vitals-modal .inline-field{ width:100%; display:flex; flex-direction:column; align-items:center; gap: clamp(8px, 1.5vw, 12px) }
#vitals-modal #vitals-modal-input{ width:84px; text-align:center; padding: clamp(8px, 1.5vw, 12px); min-height:44px }
#vitals-modal .modal-toolbar{ display:flex; align-items:center; justify-content:center; gap: clamp(12px, 2vw, 18px); margin-top: clamp(8px, 2vw, 14px) }
#vitals-modal .modal-toolbar .btn{ min-height:48px; padding:10px 14px; min-width:110px;font-size:15px}

/* NOTE: AP modal animation scoped to #ap-modal to avoid altering other modals */
#ap-modal .modal-container{ opacity:0; transform: translateY(8px) scale(.98); transition: opacity .18s ease-out, transform .18s ease-out; }
#ap-modal.open .modal-container{ opacity:1; transform: none; }
/* NOTE: Compact layout tweaks for AP modal content */
#ap-modal .modal-content{ display:flex; flex-direction:column; gap:12px; }
#ap-modal .modal-toolbar{ display:flex; gap:10px; justify-content:flex-end; margin-top:8px; }
#ap-modal #ap-modal-error{ color:#e05a5a; }
.ap-chip{ cursor:pointer }
.modal-header{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px }
.modal-toolbar{ display:flex; align-items:center; gap:8px; margin-bottom:8px }
.modal-body{ flex:1; min-height:0; overflow:auto }
/* NOTE: NEW - Make modal content areas scrollable within the viewport.
   Checked: Spell Creator uses `.modal-content` without scroll, causing overflow
   when many upgrades are present. This generic rule ensures content stays
   within the modal's max-height and can scroll. */
.abilities-modal .modal-content{ flex:1 1 auto; min-height:0; overflow:auto }
/* NOTE: Small legend note shown at bottom of Stats modal */
.modal-footer-note{ font-size:12px; color:var(--text); opacity:.85; text-align:right; margin-top:4px }
.modal-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px }
.modal-list .ability-card{ text-align:left }
/* NOTE: Simple meter component for initial stat distribution */
.meter{ flex:1 1 auto; height:12px; background:rgba(17,21,34,.6); border:1px solid rgba(201,168,106,.25); border-radius:999px; overflow:hidden; min-width:120px }
.meter-fill{ height:100%; background:linear-gradient(90deg, rgba(201,168,106,.8), rgba(201,168,106,.4)); width:0% }
.meter-label{ font-weight:700; color:var(--accent) }
.ap-next{ font-weight:700; }
/* NOTE: Stats modal grid layout */
/* NOTE: Stats modal grid
   Checked existing selectors and updated widths to prevent overflow beyond the modal.
   Previously: .stat-row used `auto 48px 48px auto` and `.upgrade-btn` had `width:180px`, which caused the card to expand wider than the popup.
*/
.stats-modal-grid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px }
.stats-modal-grid .stat-card{ background:rgba(17,21,34,.6); border:1px solid rgba(201,168,106,.25); border-radius:8px; padding:10px }
/* NOTE: Make the row fit within card width: widen label column so long names like "Resourcefulness" are not truncated; keep a slightly wider numeric column. */
.stats-modal-grid .stat-row{ display:grid; grid-template-columns: 160px 36px minmax(0, 1fr); gap:8px; align-items:center }
/* NOTE: Ensure all labels share the same visual width and do not force the card to grow; increased to 160px for full name visibility. */
.stats-modal-grid .label{ font-weight:700; color: var(--text); width:160px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
/* NOTE: Narrow numeric columns so two digits fit while keeping rows compact. */
.stats-modal-grid .value{ text-align:center; font-weight:700; color: var(--white); width:32px }
/* NOTE: Sun/Moon affinity highlight colors for stats modal */
.stats-modal-grid .label.sun-affinity{ color: #ff6bdc }
.stats-modal-grid .label.moon-affinity{ color: #6bb7ff }
.stats-modal-grid .value.sun-affinity{ color: #ff6bdc }
.stats-modal-grid .value.moon-affinity{ color: #6bb7ff }
.stats-modal-grid .warn{ color:#e0a05a }

/* NOTE: AP usage modal animation mirrors #ap-modal; scoped to avoid affecting other modals */
#ap-usage-modal .modal-container{ opacity:0; transform: translateY(8px) scale(.98); transition: opacity .18s ease-out, transform .18s ease-out; }
#ap-usage-modal.open .modal-container{ opacity:1; transform: none; }
/* NOTE: Compact breakdown rows for AP usage */
#ap-usage-modal .usage-breakdown{ display:grid; grid-template-columns: 1fr; gap:6px; margin-top:6px }
#ap-usage-modal .break-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 6px; background:rgba(17,21,34,.6); border:1px solid rgba(201,168,106,.25); border-radius:6px }
#ap-usage-modal .break-sub{ display:grid; grid-template-columns: 1fr; gap:6px; margin-left:12px }
#ap-usage-modal .scroll-list{ max-height:240px; overflow:auto }
.stats-modal-grid .cap{ color:#e05a5a; font-weight:800; position:absolute; right:0; top:50%; transform:translateY(-50%); pointer-events:none; width:46px; display:flex; align-items:center; justify-content:center; text-align:center }
/* NOTE: Reserve a small, flexible actions area; allow the content inside to shrink to available width.
   NOTE: Reserve space on the right for the MAX badge so it doesn't overlap the buttons.
   NOTE: Push the controls towards the right edge to create extra visual room for the label. */
.stats-modal-grid .stat-actions{ display:flex; align-items:center; gap:8px; position:relative; min-width:76px; padding-right:46px; justify-content:flex-end }
/* NOTE: Button sizing: keep plus/minus compact; allow upgrade button to flex within the actions column. */
.stats-modal-grid .stat-actions .btn{ box-sizing:border-box; min-width:34px; min-height:36px; padding:8px 10px; }
/* NOTE: Replaced fixed 180px width with flexible sizing to prevent overflow. */
.stats-modal-grid .stat-actions .btn.upgrade-btn{ width:100%; min-width:72px; display:inline-flex; align-items:center; justify-content:center }
/* NOTE: Responsive single-column layout for narrow screens; actions stay full-width inside card. */
@media(max-width:700px){ .stats-modal-grid{ grid-template-columns: 1fr } .stats-modal-grid .stat-actions .btn.upgrade-btn{ width:100% } }

/* NOTE: Character Management modal layout */
/* NOTE: Simplify to two columns since Characters section is hidden */
.char-manager-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px }
.char-manager-grid section{ background:var(--panel-dark, rgba(0,0,0,.25)); border:1px solid rgba(201,168,106,.25); border-radius:8px; padding:10px }
.char-actions{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 }
#auth-error.char-grid-note, #auth-username-status.char-grid-note{ font-size:12px; color: var(--text); min-height:14px; margin-top:4px }
#auth-error.char-grid-note.error{ color:#e05a5a }
#auth-username-status.char-grid-note.error{ color:#e05a5a }
#auth-username-status.char-grid-note.ok{ color:#2f8f43 }
.auth-inline .form-row{ align-items:center }
#char-list{ min-height:140px; }
#char-list li{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px; border:1px dashed rgba(201,168,106,.35); border-radius:6px }
#char-list li.active{ border-style:solid; background:rgba(201,168,106,.12) }
.form-row{ display:flex; align-items:center; gap:8px; margin:6px 0 }

/* Auth gate: make Username/Password labels the same width as inputs */
.auth-inline .form-row{ display:grid; grid-template-columns: 100px 220px; align-items:center; gap:12px; margin:20px 0 }
.auth-inline .form-row label{ width:100% }
.auth-inline .form-row input{ width:100% }
#auth-gate .modal-container{ width:min(360px, calc(100vw - 60px)); position:relative }
#auth-gate .modal-content{ gap:20px; padding-bottom:54px }
.auth-inline .tabs-nav{ margin-bottom:20px }
.auth-inline .form-row.inline-controls{ display:block }
.auth-inline .form-row.inline-controls .inline-controls-inner{ display:flex; flex-direction:column; align-items:flex-start; gap:15px }
.auth-inline .form-row.inline-controls .inline-field{ display:grid; grid-template-columns: 1fr auto; column-gap:12px; align-items:center; width:90% }
.auth-inline .form-row.inline-controls .inline-field label{ white-space:nowrap }
.auth-inline input[type="checkbox"]{ accent-color: var(--accent); }
.auth-inline .char-actions{ position:absolute; left:50%; bottom:20px; transform: translateX(-50%) }
.auth-inline .char-actions .btn{ min-width:120px }
/* NOTE: Tabbed Library component styles */
.tab-bar{ display:flex; align-items:center; gap:8px; border-bottom:1px solid rgba(201,168,106,.25); margin-bottom:8px }
/* NOTE: New tabs-nav class used in creator page; mirrors .tab-bar styles */
.tabs-nav{ display:flex; align-items:center; gap:8px; border-bottom:1px solid rgba(201,168,106,.25); margin-bottom:8px; flex-wrap:wrap }
.tab-btn{ background:transparent; color:var(--text); border:1px solid rgba(201,168,106,.35); border-bottom:none; border-radius:8px 8px 0 0; padding:8px 12px; cursor:pointer; font-weight:700 }
.tab-btn.active{ background:rgba(17,21,34,.8); color:var(--white); border-color: rgba(201,168,106,.6) }
.tab-btn[disabled], .tab-btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed }
.tab-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
/* NOTE: Toggle to show/hide filters aligned to the right within tabs */
.tabs-nav .filters-toggle{ margin-left:auto }
/* NOTE: Increase Library tab panel height to show more content before scrolling (was 380px). */
.tab-panel{ position:relative; max-height:800px; overflow:auto; transition: opacity .22s ease; opacity:1 }
.tab-panel[hidden]{ display:block; opacity:0; height:0; overflow:hidden }
.tabs-panels{ position:relative }
.auth-extra{ transition: opacity .18s ease, max-height .18s ease; opacity:0; max-height:0; overflow:hidden }
.auth-extra.open{ opacity:1; max-height:800px }
.scroll-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px }
.scroll-list .item-card{ background:rgba(17,21,34,.6); border:1px solid rgba(201,168,106,.25); border-radius:8px; padding:8px }
.scroll-list .item-header{ display:flex; align-items:center; justify-content:space-between; gap:8px }
.scroll-list .item-name{ font-family:'Cinzel', serif; font-weight:700 }
.scroll-list .item-meta{ font-size:12px; color:#9d927f }
/* NOTE: Simple table styles for admin audit UI (new) */
.table{ width:100%; border:1px solid rgba(201,168,106,.25); border-radius:12px; background:rgba(17,21,34,.4); }
.table th, .table td{ padding:8px; border-bottom:1px solid rgba(201,168,106,.2); text-align:left; }
.table thead th{ background: rgba(17,21,34,.6); }
.table tbody tr:nth-child(odd){ background: rgba(17,21,34,.35); }
.table-responsive{ overflow:auto; }
/* NOTE: New tabular inventory row layout for creator inventory panel */
.inventory-row{ display:grid; /* NOTE: Change to single-column grid: header, content, then actions below */ grid-template-columns: 1fr; grid-template-areas: "inv-header" "inv-content" "inv-actions"; align-items:start; gap:12px; background:rgba(17,21,34,.6); border:1px solid rgba(201,168,106,.25); border-radius:12px; padding:12px }
.inventory-row.inv-added{ animation: addedFlash .28s ease-in }
@keyframes addedFlash{ 0%{ box-shadow:0 0 0 0 rgba(120,200,120,.0) } 100%{ box-shadow:0 0 0 4px rgba(120,200,120,.35) } }
/* NOTE: New header container for name (centered) and type (top-right) */
.inv-header{ grid-area: inv-header; display:grid; grid-template-columns: auto 1fr auto; align-items:center; position:relative; padding-top:0; padding-bottom:0; min-height:28px }
.inv-name{ font-family:'Cinzel', serif; font-weight:800; /* NOTE: Name centered and on the same row as type/remove */ width:100%; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:18px; grid-column:2; grid-row:1; line-height:28px }
.inv-type{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:4px 10px; border-radius:999px; font-weight:700; box-sizing:border-box; font-size:12px; grid-column:1; grid-row:1; justify-self:start }
/* NOTE: Remove button at right within header grid */
.inv-remove{ grid-column:3; grid-row:1; justify-self:end }
/* Ensure remove button in inventory/spell headers matches chip height for perfect alignment */
.inventory-row .inv-remove{ padding:4px 6px; min-height:28px; font-size:16px; display:inline-flex; align-items:center; justify-content:center }
.spell-row .inv-remove{ padding:4px 6px; min-height:28px; font-size:16px; display:inline-flex; align-items:center; justify-content:center }
.inv-type.type-weapon{ background:rgba(143,188,232,.15); border:1px solid #8fbce8; color:#8fbce8 }
.inv-type.type-armor{ background:rgba(163,212,154,.15); border:1px solid #a3d49a; color:#a3d49a }
.inv-type.type-generic{ background:rgba(201,168,106,.12); border:1px solid rgba(201,168,106,.45); color:var(--accent) }
/* Shield and Potion type badges (distinct colors) */
.inv-type.type-shield{ background:rgba(100,200,190,.15); border:1px solid #64c8be; color:#64c8be }
.inv-type.type-potion{ background:rgba(227,58,170,.15); border:1px solid #e33aaa; color:#e33aaa }
/* NOTE: Spell element chip — mirrors .inv-type styling but sits at top-right (left of the Remove button).
   Checked codebase: no existing .spell-element selector, so adding new one. */
.spell-element{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:4px 10px; border-radius:999px; font-weight:700; box-sizing:border-box; font-size:12px; background:rgba(201,168,106,.12); border:1px solid rgba(201,168,106,.45); color:var(--accent); grid-column:1; grid-row:1 }
/* Element-specific color accents (optional, based on common elements) */
.spell-element.elem-water{ background:rgba(143,188,232,.15); border:1px solid #8fbce8; color:#8fbce8 }
.spell-element.elem-fire{ background:rgba(232,159,143,.15); border:1px solid #e89f8f; color:#e89f8f }
.spell-element.elem-earth{ background:rgba(163,212,154,.15); border:1px solid #a3d49a; color:#a3d49a }
.spell-element.elem-air{ background:rgba(176,196,222,.15); border:1px solid #b0c4de; color:#b0c4de }
.spell-element.elem-lightning{ background:rgba(243,229,139,.18); border:1px solid #f3e58b; color:#f3e58b }
.spell-element.elem-dust{ background:rgba(201,168,106,.15); border:1px solid rgba(201,168,106,.6); color:var(--accent) }
.spell-element.elem-ice{ background:rgba(176,226,252,.18); border:1px solid #b9e8ff; color:#b9e8ff }
.spell-element.elem-magma{ background:rgba(240,138,91,.18); border:1px solid #f08a5b; color:#f08a5b }
.spell-element.elem-steam{ background:rgba(160,184,200,.18); border:1px solid #a0b8c8; color:#a0b8c8 }
.spell-element.elem-mud{ background:rgba(167,123,91,.18); border:1px solid #a77b5b; color:#a77b5b }
.spell-row .inv-header{ padding-top:0; padding-bottom:0; min-height:28px; display:grid; grid-template-columns: auto 1fr auto; align-items:center }
.inv-stats{ grid-area: inv-content; display:flex; align-items:center; flex-wrap:wrap; gap:8px }
.inv-stats{ grid-area: inv-content; display:flex; align-items:center; flex-wrap:wrap; gap:8px }
.inv-stats.vertical{ /* NOTE: Items page: show stats in a vertical stack without affecting creator inventory */ flex-direction:column; align-items:flex-start; gap:6px }
.inv-stat{ display:inline-flex; align-items:center; gap:6px; background:rgba(17,21,34,.5); border:1px dashed rgba(201,168,106,.25); border-radius:999px; padding:6px 10px }
.inv-stat .label{ font-weight:700; color:var(--text) }
.inv-stat .value{ color:var(--white) }
.inv-actions{ grid-area: inv-actions; justify-self:start; display:flex; flex-direction:row; align-items:center; gap:8px; position:relative; z-index:3; min-height:40px; flex-wrap:nowrap }
/* NOTE: Enforce equal heights for text buttons inside inventory actions */
.inventory-row .btn{ padding:8px 12px; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; min-height:36px; line-height:1.2 }
.inventory-row .icon-btn{ /* NOTE: Smaller icon-only buttons for inventory roll controls */ padding:4px 6px; min-height:28px; font-size:16px; display:inline-flex; align-items:center; justify-content:center }
.inv-actions > .btn{ margin:0 }
.inventory-row .roll-controls{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; margin-bottom:8px }
/* NOTE: Inline roll controls for weapon rows */
.inventory-row .roll-controls{ display:flex; gap:8px; flex-wrap:wrap }
/* NOTE: Hover/focus states */
.inventory-row:hover{ border-color: rgba(201,168,106,.4) }
.inventory-row:focus-within{ outline:2px solid var(--accent); outline-offset:2px; border-color: rgba(201,168,106,.6) }
@media(max-width:760px){ .inventory-row{ grid-template-columns: 1fr; grid-template-areas: "inv-header" "inv-content" "inv-actions" } .inv-actions{ justify-self:start; align-items:flex-start; flex-wrap:nowrap } }

/* NOTE: Items page adopts header+content layout; actions are omitted */
.items-page .inventory-row{ grid-template-columns: 1fr; grid-template-areas: "inv-header" "inv-content" }
/* NOTE: Items page: force single-line stat pills; long text is truncated with ellipsis */
.items-page .inv-stats.vertical .inv-stat{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100% }
.items-page .inv-stats.vertical .inv-stat .value{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
/* NOTE: Items page mobile: stack inventory rows to a single column */
@media(max-width:760px){
  .items-page .inventory-row{ grid-template-columns: 1fr; grid-template-areas: "inv-header" "inv-content" }
  .items-page .inv-type{ width:auto }
}
/* NOTE: Creator inventory: single-line stat pills with ellipsis (matches Items page behavior) */
#inventory-list .inv-stat{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; max-width:100% }
#inventory-list .inv-stat .value{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.panel-actions{ position:sticky; top:0; display:flex; justify-content:flex-end; background:linear-gradient(180deg, rgba(17,21,34,.85), rgba(17,21,34,.5)); padding:6px; z-index:2 }
.add-sticky{ position:relative }
.tab-panel{ padding-top:0 }

/* NOTE: Actions Reference modal content layout */
.actions-grid{ display:grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap:12px }
.actions-note{ background:rgba(17,21,34,.5); border:1px dashed rgba(201,168,106,.25); border-radius:8px; padding:8px; margin-bottom:8px; font-size:13px; color:var(--text) }
@media(max-width:900px){ .actions-grid{ grid-template-columns: repeat(2, minmax(220px, 1fr)) } }
@media(max-width:600px){ .actions-grid{ grid-template-columns: 1fr } }
.action-card{ background:rgba(17,21,34,.6); border:1px solid rgba(201,168,106,.25); border-radius:8px; padding:8px }
.action-card h3{ font-family:'Cinzel', serif; font-weight:700; margin:0 0 6px 0 }
.action-list{ list-style:disc; margin:0 0 0 18px; padding:0; display:grid; gap:6px }
.action-item{ display:flex; align-items:center; gap:8px }
.action-item .text{ color:var(--text) }
.action-item .action-label{ font-weight:700; color:inherit }
.action-item .action-desc{ font-weight:400; color:#fff }
.badge.ap{ background:rgba(84,59,17,.35); border-color: rgba(201,168,106,.6); color: var(--accent); font-weight:800 }

/* NOTE: Floating combat log panel */
.combat-log{ position:fixed; right:24px; top:100px; width:420px; height:48vh; background:rgba(17,21,34,.85); border:1px solid rgba(201,168,106,.25); border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.4); resize:both; overflow:auto; z-index:20; }
.combat-log-header{ display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border-bottom:1px solid rgba(201,168,106,.25) }
.combat-log-list{ list-style:none; padding:8px; margin:0; display:flex; flex-direction:column; gap:8px }
.log-entry{ display:flex; gap:8px; align-items:flex-start; font-size:13px; background:rgba(0,0,0,.2); border:1px solid rgba(201,168,106,.2); border-radius:8px; padding:6px 8px }
.log-entry .meta{ min-width:100px; opacity:.85 }
.log-entry .details{ flex:1 }
.log-entry .dice{ font-family: monospace }
.log-entry.type-defense{ border-color:#8fbce8; }
.log-entry.type-attack{ border-color:#e8a08f; }
.log-entry.type-damage{ border-color:#e3a; }
.log-entry .icon{ width:20px; text-align:center }

/* NOTE: Subtle roll animation */
.rolling{ animation: pulse .28s ease-in-out }
@keyframes pulse { 0%{ transform:scale(.98); opacity:.85 } 50%{ transform:scale(1.02); opacity:1 } 100%{ transform:scale(1); opacity:1 } }

/* NOTE: Mobile touch target tuning for buttons (including icon-only controls) */
@media(max-width:600px){
  .btn{ padding:10px 14px; min-height:36px; font-size:16px }
  /* Increase icon buttons for thumbs on mobile while keeping compact visuals */
  .btn.icon-btn, .inventory-row .icon-btn, .btn.add-sticky.icon-btn{ padding:8px 10px; min-height:40px; font-size:20px }
}
/* NOTE: Items page-specific header tweaks: remove type and align name to top-left at same line height */
.items-page .inv-header{ padding-top:0; padding-bottom:0; min-height:28px; display:flex; align-items:center; justify-content:flex-start }
.items-page .inv-name{ text-align:left }
.items-page .inv-type{ display:none }
/* NOTE: Make items tab panels full-height within viewport and prevent horizontal scroll */
.items-page .tab-panel{ max-height:none; height:auto; overflow:visible }
/* NOTE: Simple pagination layout */
.pagination{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:8px }
.pagination .page-info{ font-weight:700 }
/* NOTE: Requirements filters layout */
.req-filters{ background:rgba(17,21,34,.4); border:1px solid rgba(201,168,106,.25); border-radius:8px; padding:8px; margin-bottom:8px }
.req-filters-header{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px }
.req-filters-list{ display:flex; align-items:center; flex-wrap:wrap; gap:8px }
.req-chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid rgba(201,168,106,.25); border-radius:999px; background:rgba(17,21,34,.6); cursor:pointer }
/* NOTE: Hide legacy checkbox element if present inside chip (we now toggle via aria-pressed) */
.req-chip input{ display:none }
.req-chip label{ cursor:pointer }
/* NOTE: Active state styling for Items requirement chips (matches Abilities tag buttons) */
.req-chip[aria-pressed="true"]{ background: var(--accent); color: var(--bg); border-color: rgba(201,168,106,.8) }
.req-chip[aria-pressed="true"] .tag-count{ color: var(--bg); opacity:.85 }
.req-chip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
/* NOTE: Collapsed state (Items): keep header visible, hide the options list to mimic Abilities toggle behavior */
.req-filters.collapsed .req-filters-list{ display:none }
.req-filters.collapsed .req-filters-header{ margin-bottom:0 }
/* NOTE: Edit Use modal specific layout tweaks: narrower width and right-aligned toolbar */
#ap-use-edit-modal .modal-container{ width:min(560px, 95vw); }
#ap-use-edit-modal .modal-toolbar{ display:flex; align-items:center; gap:8px; justify-content:flex-end; }

/* NOTE [ADDED]: Global page loader overlay for smooth transitions */
#page-loader{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; gap:12px; background:rgba(12,15,24,.6); z-index:9999 }
.page-loader-spinner{ width:28px; height:28px; border:3px solid rgba(255,255,255,.25); border-top-color: var(--accent); border-radius:50%; animation: spin .8s linear infinite }
.page-loader-text{ font-weight:700; color: var(--text); }
@keyframes spin{ to{ transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce){ .page-loader-spinner{ animation:none } }

/* NOTE [ADDED]: Skeleton placeholder style (optional, for progressive loading) */
.skeleton{ position:relative; overflow:hidden; background: rgba(255,255,255,.06) }
.skeleton::after{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent); animation: shimmer 1.2s infinite }
@keyframes shimmer{ 0%{ transform: translateX(-100%) } 100%{ transform: translateX(100%) } }
@media (prefers-reduced-motion: reduce){ .skeleton::after{ animation:none } }