/* =========================================================================
   ADJUSTEMENTS — REV28
   ========================================================================= */

/* ── HEADER ──────────────────────────────────────────────────────────────── */
/* Same header height + nav button position tweak applied on the
   Reaction Scroll page (adjustements.css), mirrored here. */
.app-header--image {
  height: 200px !important;
}
.header-nav {
  margin-bottom: 3rem !important;
  position: relative !important;
  top: 99px !important;
  left: -8px !important;
}

/* ── PAGE BACKGROUND ─────────────────────────────────────────────────────── */
.detail-main {
  padding-top: 1.5rem !important;
  background-size: 100% 2120px, 100% 100% !important;
  background-position: center -250px, center center !important;
}

/* ── RECORD SPECIFICATION card ───────────────────────────────────────────── */
.detail-sidebar > .paper-card:nth-child(1) {
  width: 350px !important;
  padding: 3.5rem !important;
  padding-top: 8rem !important;
  margin-left: 0px !important;
}
.detail-sidebar > .paper-card:nth-child(1) .spec-field {
  margin-bottom: 0rem !important;
  margin-top: 0px !important;
  padding-left: 0px !important;
}

/* ── COMPANION PORTRAIT WRAP ─────────────────────────────────────────────── */
/* Detail page (Reaction Scroll) -- original, untouched values */
#detailCompanionWrap {
  margin-top: 10px !important;
  margin-bottom: -30px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 10px !important;
  width: 220px !important;
  display: flex !important;
  justify-content: center !important;
}
.companion-portrait {
  width: 205px !important;
  height: 230px !important;
  display: block !important;
}

/* Add a Build page only -- scoped to #companionPreviewField so this can
   never bleed into the shared .companion-portrait class used elsewhere
   (e.g. the Reaction Scroll detail page). */
#companionPreviewField {
  grid-column: 3 / 4;     /* snaps under Martial Artist column */
  position: relative;
  top: 0px;                /* + down / - up, px-precise nudge */
  left: 30px;                /* + right / - left, px-precise nudge */
}
#companionPreviewField .companion-portrait {
  width: 205px !important;
  height: 190px !important;
  display: block !important;
  border: none;
  box-shadow: none;
  margin-bottom: -40px !important;
  margin-top: -20px !important;
}

/* ── BUILD NOTES card ────────────────────────────────────────────────────── */
.detail-sidebar > .paper-card:nth-child(2) {
  width: 350px !important;
  height: 498px !important;
  padding: 3.0rem !important;
  margin-left: 0px !important;
  margin-top: 0rem !important;
}
#notesWrap {
  padding-left: 10px !important;
  padding-top: 80px !important;
}

/* ── BUILD NOTES TITLE — restored ───────────────────────────────────────── */
#notesSection .record-spec-heading {
  display: block !important;
  font-family: var(--font-display) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  color: var(--paper) !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid rgba(212,175,106,0.3) !important;
  padding-bottom: 0.5rem !important;
  margin-bottom: 0.75rem !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
  background-image: none !important;
  position: absolute !important;
  top: 2.2rem !important;
  left: 3rem !important;
  right: 3rem !important;
}

/* ── WHITE BORDER FIX on Build Notes ────────────────────────────────────── */
.detail-sidebar > .paper-card:nth-child(2),
#notesSection {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.notes-wrap {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.notes-wrap.is-collapsed::after {
  background: linear-gradient(to bottom, transparent 0%, transparent 85%) !important;
}

/* ── EDIT / DELETE BUTTONS — text visible on hover ──────────────────────── */
.owner-edit-link {
  position: relative !important;
  text-indent: 0 !important;
  color: transparent !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  font-family: var(--font-ui) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.owner-edit-link:hover:not(.locked) {
  opacity: 1 !important;
  color: #f7f0dc !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
  filter: brightness(1.1) !important;
}
.danger-link-btn {
  position: relative !important;
  text-indent: 0 !important;
  color: transparent !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  font-family: var(--font-ui) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.danger-link-btn:hover:not(.locked) {
  opacity: 1 !important;
  color: #f7f0dc !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
  filter: brightness(1.1) !important;
}

/* ── TOKEN / BUILD ID — more readable ───────────────────────────────────── */
.reaction-scroll-id {
  opacity: 1 !important;
  color: #c9a961 !important;
  font-size: 0.75rem !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6) !important;
}

/* ── SKILL ITEMS ─────────────────────────────────────────────────────────── */
.detail-skill-item {
  padding: 0.65rem 1.95rem !important;
  font-size: 0.92rem !important;
  min-height: 15px !important;
  margin-top: 0rem !important;
}
.skill-item-img {
  width: 38px !important;             /* icon size */
  height: 38px !important;
  margin-left: 6px !important;       /* move icon left/right inside the card */
  margin-top: 0px !important;         /* move icon up/down */
}
.detail-skill-item img,
.skill-icon {
  width: 33px !important;             /* icon size */
  height: 33px !important;
  margin-right: 1.5rem !important;    /* space between icon and text */
}

.skill-item-name {
  font-size: 0.92rem !important;
  padding-left: 0.65rem !important;
  padding-right: 0.5rem !important;
}
.skill-type-normal      { background-size: 100% 100% !important; }
.skill-type-special     { background-size: 100% 100% !important; }
.skill-type-mighty      { background-size: 100% 100% !important; }
.skill-type-unique      { background-size: 100% 100% !important; }
.skill-type-lightness   { background-size: 100% 100% !important; }
.skill-type-cultivation { background-size: 100% 100% !important; }

/* ── MOVESET card ────────────────────────────────────────────────────────── */
.detail-content-col > .paper-card:nth-child(2) {
  padding: 1.5rem 2rem !important;
  top: 0px !important;
  left: 0.5rem !important;
  width: 1423px !important;
  height: 926px !important;
}
.detail-content-col > .paper-card:nth-child(2) .section-heading {
  height: 52px !important;
  width: 332px !important;
  margin-bottom: 0rem !important;
  margin-left: 20px !important;
  margin-top: 35px !important;
}

/* ── MOVESET group titles ────────────────────────────────────────────────── */
.moveset-group-title {
  height: 53px !important;
  width: 157px !important;
  margin-top: 3.0rem !important;
  margin-left: 0px !important;
}
.moveset-group-title[data-group="cultivation"] {
  width: 187px !important;
}
.moveset-columns {
   gap: 0.5rem 0.5rem !important;    /* row-gap  col-gap */
   padding-top: 0px !important;
}
.moveset-group {
  margin-bottom: -2.5rem !important;
}

/* ── EQUIPMENT card ──────────────────────────────────────────────────────── */
.detail-content-col > .paper-card:nth-child(1) {
  padding: 1.5rem 2rem !important;
  margin-left: 0.5rem !important;
  width: 1423px !important;
  min-height: 160px !important;
}
.detail-content-col > .paper-card:nth-child(1) .section-heading {
  height: 52px !important;
  width: 332px !important;
  margin-bottom: 1rem !important;
  margin-left: 20px !important;
  margin-top: 10px !important;
}
.equipment-row {
  gap: 1rem !important;
}
.equip-card {
  flex: 0 0 160px !important;
  min-width: 140px !important;
  padding: 0.9rem !important;
  margin-top: 1.25rem !important;
  margin-bottom: 1.25rem !important;
  margin-left: 4.55rem !important;
}
.equip-card--img .equip-img-wrap {
  min-height: 100px !important;
  width: 105px !important;
  padding: 4px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.equip-card--img .equip-img {
  width: 100% !important;
  height: 80px !important;
  object-fit: contain !important;
  margin-top: 0px !important;
  margin-left: 0px !important;
}
.equip-card--img .label {
  text-align: center !important;
  width: 100% !important;
  display: block !important;
  margin-bottom: 0.25rem !important;
}

/* ── SIDEBAR grid ────────────────────────────────────────────────────────── */
.detail-grid {
  grid-template-columns: 320px 1fr !important;
  gap: 1.75rem !important;
}

/* ── RETURN TO LIBRARY ───────────────────────────────────────────────────── */
.back-link {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  border: 1px solid #ffcb49 !important;
  color: #ffd56f !important;
  background: #000000b3 !important;
  padding: 0.4rem 1rem !important;
  border-radius: 20px !important;
  font-family: var(--font-ui) !important;
  font-size: 1.1rem !important;
  font-weight: 1000 !important;
  text-decoration: none !important;
  margin-bottom: 1rem !important;
}
.back-link:hover {
  background: #8B6914 !important;
  color: #f7f0dc !important;
}

/* ── MOVESET BOTTOM BAR ──────────────────────────────────────────────────── */
.moveset-bottom-bar {
  margin-left: -13px !important;
  width: 100% !important;
  position: relative !important;
  left: 0px !important;
}

/* =========================================================================
   ADJUSTEMENTS — additions
   ========================================================================= */

/* ── REMOVE divider line under Equipment and Moveset titles ─────────────── */
.detail-content-col > .paper-card:nth-child(1) .section-heading,
.detail-content-col > .paper-card:nth-child(2) .section-heading {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* ── BUILD NOTES TITLE — position and color matching Record Spec text ────── */
#notesSection:not(.is-unrolled) {
  position: relative !important;
}
#notesSection .record-spec-heading {
  position: absolute !important;
  top: 1.5rem !important;         /* move up/down */
  left: 2.5rem !important;        /* move left/right */
  right: 2.5rem !important;
  color: #c9a961 !important;      /* change hex for color */
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  border-bottom: none !important; /* image already has the line */
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6) !important;
}

/* ── BUILD NOTES TITLE — force visible over build-theme hidden rule ──────── */
#notesSection .record-spec-heading {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  top: 3.42rem !important;
  left: 3.5rem !important;
  right: 2.5rem !important;
  color: #f4db73 !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6) !important;
  background-image: none !important;
}

/* =========================================================================
   ADDITIONS — skill values + portrait overlay + horizontal build notes
   ========================================================================= */

/* ── COMPANION PORTRAIT OVERLAY ─────────────────────────────────────────── */
#detailCompanionWrap {
  position: relative !important;
}
#detailCompanionWrap::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-image: url('../assets/theme/portrait-boxe.png') !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

/* ── BUILD NOTES EXPANDED — horizontal outer box ────────────────────────── */
#notesSection.is-unrolled {
  background-image: url('../assets/theme/build-notes-outer-boxe-horizontal.png') !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  height: 535px !important;
  width: 1780px !important;
  top: 1065px !important;
}

}
/* ── BUILD NOTES EXPANDED — horizontal inner box centered ───────────────── */
#notesSection.is-unrolled::before {
  display: none !important;
}
#notesSection.is-unrolled #notesWrap {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 1685px !important;    /* change for inner box width */
  height: 285px !important;    /* change for inner box height */
  overflow-y: auto !important;
  z-index: 1 !important;
}
#notesSection.is-unrolled #notesWrap::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: url('../assets/theme/build-notes-inner-boxe-horizontal.png') !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  opacity: 0.3 !important;
  z-index: -1 !important;
  pointer-events: none !important;
}
#notesSection.is-unrolled #notesWrap {
  width: 1650px !important;
  height: 345px !important;
  padding: 3rem 1.5rem !important; /* inner padding */
  overflow-y: auto !important;
}
/* Move Roll button below the inner box not the title */
#notesSection.is-unrolled #notesToggle {
  position: absolute !important;
  top: 380px !important;     /* distance from bottom of outer box */
  left: 1470px !important;       /* distance from left */
  z-index: 2 !important;

}
#notesSection.is-unrolled .notes-text {
  max-height: 250px !important;
  overflow-y: auto !important;
  padding: 1.3rem 3.0rem !important;
}

/* ── BUILD NOTES EXPANDED — title text ─────────────────────────────────── */
#notesSection.is-unrolled .record-spec-heading {
  color: #ffe656 !important;
  font-size: 1.4rem !important;
  letter-spacing: 2px !important;
}

/* ── BUILD NOTES EXPANDED — title position ──────────────────────────────── */
#notesSection.is-unrolled .record-spec-heading {
  position: absolute !important;
  top: 120px !important;      /* distance from top of outer box */
  left: 220px !important;      /* horizontal center */
  transform: translateX(-50%) !important;
  width: max-content !important;
  z-index: 10 !important; 
}

/* ── BUILD NOTES EXPANDED — unroll/roll button ───────────────────────────── */
#notesSection.is-unrolled #notesToggle {
  color: #ffe656 !important;
}
#notesSection.is-unrolled #notesToggle .toggle-icon {
  color: #ffe656 !important;
}

/* =========================================================================
   RECORD SPECIFICATION — title restored + sidebar text sharpened
   ========================================================================= */

/* ── RECORD SPECIFICATION TITLE — same positioning pattern as Build Notes ── */
.detail-sidebar > .paper-card:nth-child(1) .record-spec-heading {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  top: 2.6rem !important;        /* same as Build Notes — adjust up/down */
  left: 3.5rem !important;       /* same as Build Notes — adjust left/right */
  right: 2.5rem !important;
  color: #f4db73 !important;
  font-size: 1.25rem !important;
  font-weight: 1000 !important;
  font-family: var(--font-display) !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6) !important;
  background-image: none !important;
  z-index: 2 !important;
}

/* ── SIDEBAR TEXT — sharpened clarity ────────────────────────────────────── */
.detail-sidebar > .paper-card:nth-child(1) .spec-label {
  color: #d4af6a !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8) !important;
  -webkit-font-smoothing: antialiased !important;
}

.detail-sidebar > .paper-card:nth-child(1) .spec-value {
  color: #f7f0dc !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
  -webkit-font-smoothing: antialiased !important;
}

.detail-sidebar > .paper-card:nth-child(1) .spec-title {
  color: #f5d78e !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9) !important;
  -webkit-font-smoothing: antialiased !important;
}

.detail-sidebar > .paper-card:nth-child(1) .spec-weapon {
  color: #f5d78e !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9) !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Catch-all for any text inside record spec sidebar */
.detail-sidebar > .paper-card:nth-child(1) * {
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}

/* ── UNROLL SCROLL BUTTON — arrows + hover ───────────────────────────────── */

/* Hide the rotating chevron icon in both states */
#notesToggle .toggle-icon {
  display: none !important;
}

/* Vertical (collapsed) — arrow AFTER text, no dash */
#notesToggle::before {
  content: '' !important;
}
#notesToggle::after {
  content: ' →' !important;
  font-size: 1rem !important;
}
#notesToggle {
  transition: color 0.2s ease, text-shadow 0.2s ease !important;
}
#notesToggle:hover {
  color: #f5d78e !important;
  text-shadow: 0 0 8px rgba(245,215,142,0.6) !important;
  cursor: pointer !important;
}

/* Expanded (unrolled) — arrow BEFORE text, nothing after */
#notesSection.is-unrolled #notesToggle::before {
  content: '← ' !important;
  font-size: 1rem !important;
}
#notesSection.is-unrolled #notesToggle::after {
  content: '' !important;
}
#notesSection.is-unrolled #notesToggle:hover {
  color: #f5d78e !important;
  text-shadow: 0 0 8px rgba(245,215,142,0.6) !important;
}

/* ── EDIT / DELETE BUTTONS — remove inherited border line ───────────────── */
.owner-edit-link,
.owner-edit-link.locked {
  border: none !important;
  outline: none !important;
}
.danger-link-btn,
.danger-link-btn.locked {
  border: none !important;
  outline: none !important;
}

/* =========================================================================
   EDITOR — Creation Scroll, Martial Arsenal, Technique Mastery
   ========================================================================= */

/* Remove undulating top border */
.editor-content .paper-card::before {
  display: none !important;
}

/* Overlay gold frame on top of existing card using ::after */
.editor-content .paper-card::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: url('../assets/theme/build-creator-paper-frame.png') !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

/* =========================================================================
   EDITOR — Creation Scroll, Martial Arsenal, Technique Mastery
   ========================================================================= */

/* Remove undulating top border */
.editor-content .paper-card::before {
  display: none !important;
}

/* Card 1 — Creation Scroll */
.editor-content .paper-card:nth-child(1)::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: -4px -14px !important;
  opacity: 0.5 !important;
  background-image: url('../assets/theme/build-creator-paper-frame.png') !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

/* Card 2 — Martial Arsenal */
.editor-content .paper-card:nth-child(2)::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: -4px -14px !important;
  background-image: url('../assets/theme/build-creator-paper-frame.png') !important;
  background-size: 100% 100% !important;
  opacity: 0.5 !important;
  background-repeat: no-repeat !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

/* Card 3 — Technique Mastery — uses frame 2 exclusively */
.editor-content .paper-card:nth-child(3)::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: -16px -18px !important;
  background-image: url('../assets/theme/build-creator-paper-frame-2.png') !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  opacity: 0.5 !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

/* Card 1 — Creation Scroll */
.editor-content .paper-card:nth-child(1) > * {
  margin-left: 1rem !important;
  margin-right: 1rem !important;
}

/* Card 2 — Martial Arsenal */
.editor-content .paper-card:nth-child(2) > * {
  margin-left: 1rem !important;
  margin-right: 1rem !important;
}

/* Card 3 — Technique Mastery */
.editor-content .paper-card:nth-child(3) > * {
  margin-left: 1rem !important;
  margin-right: 1rem !important;
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

/* =========================================================================
   COMMUNITY — title color, author color, grid alignment fix
   ========================================================================= */

/* Build title */
.scroll-card h3 {
  position: relative !important;
  color: #aa3349 !important;
  border-bottom: 1px solid rgba(74,106,145,0.35) !important;
  padding-bottom: 6px !important;
  margin-bottom: 8px !important;
  z-index: 1 !important;
}
.scroll-card h3::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important;
  background: linear-gradient(to right, #6f93c921, #c9daf629, #c9daf608) !important;
  z-index: -1 !important;
}

/* by */
.author-row {
  color: #000000 !important;
}

/* Author name */
.author-row .character {
  color: #294dc4 !important;
}

/* Grid alignment — prevent cards from stretching to fill row height */
.library-grid {
  align-items: start !important;
}