/* ========================================
   Newspaper — Paper Styles
   The newspaper uses a PNG background image
   for realistic paper texture/edges, with
   text content positioned over it.
   ======================================== */

.hqp-news-paper {
  --paper: #f5f0e8;
  --ink: #1a1a1a;
  --accent: #8b0000;

  position: relative;
  color: var(--ink);
  font-family: 'EB Garamond', 'Georgia', serif;
  line-height: 1.45;

  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
}

/* Masthead, Title, and Content areas are absolutely positioned within the paper */
.hqp-news-masthead-area,
.hqp-news-title-area,
.hqp-news-content-area {
  position: absolute;
  overflow: visible;
}

/* --- Modern: 1:1 square PNG --- */
.hqp-layout-modern {
  background-image: url('../assets/newspaper-modern.png');
  aspect-ratio: 1 / 1;
}

.hqp-layout-modern .hqp-news-masthead-area {
  top: 23.6%;
  left: 4%;
  width: 81.4%;
  height: 6.5%;
}

.hqp-layout-modern .hqp-news-title-area {
  top: 29.9%;
  left: 4%;
  width: 81.4%;
  min-height: 4.2%;
}

.hqp-layout-modern .hqp-news-content-area {
  top: 34.6%;
  left: 4%;
  width: 81.4%;
  height: 45%;
}

/* --- Fantasy: ~3:4 portrait PNG --- */
.hqp-layout-fantasy {
  background-image: url('../assets/newspaper-fantasy.png');
  aspect-ratio: 896 / 1190;
}

.hqp-layout-fantasy .hqp-news-masthead-area {
  top: 16.2%;
  left: 16%;
  width: 68%;
  height: 4.5%;
}

.hqp-layout-fantasy .hqp-news-title-area {
  top: 17.5%;
  left: 16%;
  width: 68%;
  min-height: 5%;
}

.hqp-layout-fantasy .hqp-news-content-area {
  top: 24.7%;
  left: 16%;
  width: 68%;
  height: 58%;
}


/* ---- Scribble (blurred placeholder) ---- */

.hqp-scribble {
  filter: none;
  opacity: 0.8;
}


/* ---- Editable (editor preview only) ---- */

.hqp-editable {
  outline: none;
  cursor: text;
  border-radius: 2px;
  transition: box-shadow 0.15s;
  min-height: 1em;
}

.hqp-editable:hover {
  box-shadow: 0 0 0 2px rgba(124, 111, 239, 0.25);
}

.hqp-editable:focus {
  box-shadow: 0 0 0 2px rgba(124, 111, 239, 0.5);
  filter: none;
  opacity: 1;
}

.hqp-editable.hqp-scribble {
  cursor: text;
  pointer-events: auto;
  user-select: none;
}

.hqp-editable.hqp-scribble:hover {
  filter: blur(1.2px);
  opacity: 0.5;
}


/* ---- Toolbar area in card header ---- */

.hqp-toolbar-area {
  display: flex;
  align-items: center;
  min-height: 28px;
}

.hqp-toolbar-hint {
  color: rgba(255,255,255,0.45);
  font-size: 0.72em;
}

.hqp-page-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.hqp-page-btn {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75em;
  padding: 0;
  transition: background 0.12s, color 0.12s;
}
.hqp-page-btn:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}
.hqp-page-btn-del {
  color: rgba(255,100,100,0.7);
}
.hqp-page-btn-del:hover {
  background: rgba(255,60,60,0.2);
  color: #ff6666;
}
.hqp-page-label {
  color: rgba(255,255,255,0.55);
  font-size: 0.72em;
  padding: 0 4px;
  white-space: nowrap;
}

/* ---- Field toolbar (lives inside .hqp-card-fonts) ---- */

.hqp-fonts-defaults {
  transition: opacity 0.2s ease;
}
.hqp-card-fonts.editing .hqp-fonts-defaults {
  opacity: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.hqp-field-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  opacity: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.hqp-field-toolbar.visible {
  opacity: 1;
  height: auto;
  overflow: visible;
  pointer-events: auto;
}

.hqp-tb-btn {
  width: 24px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 3px;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  font-size: 0.7em;
  transition: background 0.1s;
  padding: 0;
}

.hqp-tb-btn:hover {
  background: rgba(124, 111, 239, 0.3);
  color: #fff;
}

.hqp-tb-bold { font-weight: 800; }
.hqp-tb-italic { font-style: italic; }
.hqp-tb-underline { text-decoration: underline; }

.hqp-tb-color {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 3px;
  cursor: pointer;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}
.hqp-tb-color::-webkit-color-swatch-wrapper { padding: 1px; }
.hqp-tb-color::-webkit-color-swatch { border: none; border-radius: 2px; }

.hqp-tb-sep {
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,0.15);
  margin: 0 2px;
}

.hqp-tb-font {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 3px;
  color: #fff;
  font-size: 0.68em;
  padding: 2px 4px;
  max-width: 100%;
  flex: 1 1 auto;
  cursor: pointer;
}

.hqp-tb-font option {
  font-size: 13px;
  background: #1a1a2e;
  color: #fff;
}

.hqp-tb-size {
  font-size: 0.68em;
  color: rgba(255,255,255,0.55);
  min-width: 32px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}


/* ---- Image adjustment overlay ---- */

.hqp-img-controls {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(0,0,0,0.7);
  border-radius: 4px;
  z-index: 10;
  pointer-events: none;
  white-space: nowrap;
}

.hqp-block-image:hover .hqp-img-controls,
.hqp-block-image.hqp-img-adjusting .hqp-img-controls {
  display: flex;
  pointer-events: auto;
}

.hqp-img-controls label {
  font-size: 0.6em;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hqp-img-controls input[type="range"] {
  width: 70px;
  height: 12px;
  accent-color: #7c6fef;
  cursor: pointer;
}

.hqp-img-reset {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.1);
  border: none;
  border-radius: 3px;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  font-size: 0.6em;
  padding: 0;
}

.hqp-img-reset:hover {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

.hqp-img-remove {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(180,40,40,0.4);
  border: none;
  border-radius: 3px;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  font-size: 0.6em;
  padding: 0;
}
.hqp-img-remove:hover {
  background: rgba(200,40,40,0.7);
  color: #fff;
}

/* Drag cursor when adjusting position */
.hqp-block-image.hqp-img-dragging {
  cursor: grabbing;
}
.hqp-block-image.hqp-img-dragging img {
  pointer-events: none;
}


/* ---- Masthead ---- */

.hqp-news-masthead {
  text-align: center;
  font-size: 2.6em;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.05;
}

.hqp-news-dateline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 4px 0 6px;
  font-size: 0.65em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

.hqp-news-vol, .hqp-news-price {
  font-size: 0.9em;
  letter-spacing: 0.08em;
  white-space: nowrap;
  flex-shrink: 0;
}

.hqp-news-date {
  font-size: 0.9em;
  letter-spacing: 0.08em;
  white-space: nowrap;
  flex-shrink: 0;
  min-height: 1em;
}


/* ---- Rules (dividers) ---- */

.hqp-news-rule {
  border: none;
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  height: 4px;
  margin: 6px 0;
  background: transparent;
}

.hqp-news-rule-thin {
  height: 0;
  border: none;
  border-top: 2px solid var(--ink);
  margin: 10px 0;
}

/* Small ornament between headline and body */
.hqp-news-subtitle::after {
  content: '◆';
  display: block;
  text-align: center;
  font-size: 0.5em;
  opacity: 0.25;
  margin-top: 6px;
  letter-spacing: 0.5em;
  filter: none;
}


/* ---- Headlines ---- */

.hqp-news-headline {
  text-align: center;
  font-size: 1.8em;
  font-weight: 700;
  line-height: 1.12;
  margin: 8px 0 4px;
  color: var(--ink);
}

.hqp-news-subtitle {
  text-align: center;
  font-size: 0.85em;
  font-style: italic;
  color: var(--ink);
  margin-bottom: 4px;
}


/* ========================================
   Content Area — Grid Blocks
   ======================================== */

.hqp-news-content-area {
  display: grid;
  gap: 10px;
  height: 100%;
}

.hqp-block {
  overflow: hidden;
  min-height: 0;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Single-field blocks: the field fills the whole block */
.hqp-block > [data-field] {
  flex: 1;
}

/* Multi-field blocks (side, secondary): headline stays small, body stretches */
.hqp-block-side .hqp-news-side-headline,
.hqp-block-secondary .hqp-news-secondary-headline,
.hqp-block-side > .hqp-news-side-headline-wrap,
.hqp-block-secondary > .hqp-news-secondary-headline-wrap {
  flex: 0 0 auto;
}
.hqp-block-side > .hqp-news-rule-thin,
.hqp-block-secondary > .hqp-news-rule-thin {
  flex: 0 0 auto;
}
.hqp-block-side > .hqp-news-side-body,
.hqp-block-secondary > .hqp-news-secondary-body {
  flex: 1;
}

.hqp-layout-modern .hqp-block-side > .hqp-news-rule-thin {
  margin: 2px 0;
}

.hqp-block-image { grid-area: img; }
.hqp-block-body { grid-area: body; }
.hqp-block-body2 { grid-area: body2; }
.hqp-block-body3 { grid-area: body3; }
.hqp-block-side { grid-area: side; }
.hqp-block-secondary { grid-area: sec; }

/* Hide extra body columns by default — layouts opt them in */
.hqp-block-body2,
.hqp-block-body3 { display: none; }

.hqp-block-image {
  position: relative;
}
.hqp-block-image .hqp-img-wrap {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border: 2px solid var(--ink);
  position: relative;
}

.hqp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--img-x, 50%) var(--img-y, 50%);
  transform: scale(var(--img-zoom, 1));
  transform-origin: var(--img-x, 50%) var(--img-y, 50%);
  display: block;
  border: 0;
  filter: grayscale(15%) contrast(1.05);
}

.hqp-block-image[data-empty="true"] {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.03);
  border: 2px dashed rgba(0,0,0,0.15);
  border-radius: 2px;
}

.hqp-block-placeholder {
  font-size: 1.8em;
  opacity: 0.15;
}

.hqp-news-preview-wrap .hqp-block-image[data-empty="true"] {
  cursor: pointer;
}
.hqp-news-preview-wrap .hqp-block-image[data-empty="true"]:hover {
  background: rgba(0,0,0,0.06);
}

/* Column rules between blocks for newspaper feel */
.hqp-block-side {
  border-left: 2px solid var(--ink);
  padding-left: 10px;
}

.hqp-block-secondary {
  border-top: 2px solid var(--ink);
  padding-top: 8px;
}


/* --- Classic: image | body | side --- */
.hqp-content-classic {
  grid-template-columns: 1fr 2.2fr 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "img body side"
    "sec sec sec";
}

/* --- Broadsheet: image | body | body2 --- */
.hqp-content-broadsheet {
  grid-template-columns: 1fr 1.5fr 1.5fr;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "img body body2"
    "sec sec sec";
}
.hqp-content-broadsheet .hqp-block-body2 { display: flex; }
.hqp-content-broadsheet .hqp-block-side { display: none; }
.hqp-content-broadsheet .hqp-block-body2 {
  border-left: 2px solid var(--ink);
  padding-left: 10px;
}

/* --- Headline: full image top / body | body2 | side --- */
.hqp-content-headline {
  grid-template-columns: 1fr 1fr 0.8fr;
  grid-template-rows: 2fr 3fr auto;
  grid-template-areas:
    "img img img"
    "body body2 side"
    "sec sec sec";
}
.hqp-content-headline .hqp-block-body2 { display: flex; }
.hqp-content-headline .hqp-block-body2 {
  border-left: 2px solid var(--ink);
  padding-left: 10px;
}

/* --- Feature: tall image left, body + side stacked right --- */
.hqp-content-feature {
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: 1fr 1fr auto;
  grid-template-areas:
    "img body"
    "img side"
    "sec sec";
}

/* --- Editorial: body | body2 | side (no image) --- */
.hqp-content-editorial {
  grid-template-columns: 1fr 1fr 0.8fr;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "body body2 side"
    "sec sec sec";
}
.hqp-content-editorial .hqp-block-body2 { display: flex; }
.hqp-content-editorial .hqp-block-image { display: none; }
.hqp-content-editorial .hqp-block-body2 {
  border-left: 2px solid var(--ink);
  padding-left: 10px;
}

/* --- Gazette: reversed — side | body | image --- */
.hqp-content-gazette {
  grid-template-columns: 1fr 2.2fr 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "side body img"
    "sec sec sec";
}
.hqp-content-gazette .hqp-block-side {
  border-left: none;
  border-right: 2px solid var(--ink);
  padding-left: 0;
  padding-right: 10px;
}
.hqp-content-gazette .hqp-block-body {
  border-right: 2px solid var(--ink);
  padding-right: 10px;
}

/* --- Bulletin: body | body2 | body3 (text only) --- */
.hqp-content-bulletin {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "body body2 body3"
    "sec sec sec";
}
.hqp-content-bulletin .hqp-block-body2,
.hqp-content-bulletin .hqp-block-body3 { display: flex; }
.hqp-content-bulletin .hqp-block-image,
.hqp-content-bulletin .hqp-block-side { display: none; }
.hqp-content-bulletin .hqp-block-body2 {
  border-left: 2px solid var(--ink);
  padding-left: 10px;
}
.hqp-content-bulletin .hqp-block-body3 {
  border-left: 2px solid var(--ink);
  padding-left: 10px;
}

/* --- Mosaic: image + side top / body | body2 bottom --- */
.hqp-content-mosaic {
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: 2fr 3fr auto;
  grid-template-areas:
    "img side"
    "body body2"
    "sec sec";
}
.hqp-content-mosaic .hqp-block-body2 { display: flex; }
.hqp-content-mosaic .hqp-block-body {
  border-top: 2px solid var(--ink);
  padding-top: 8px;
}
.hqp-content-mosaic .hqp-block-body2 {
  border-top: 2px solid var(--ink);
  border-left: 2px solid var(--ink);
  padding-top: 8px;
  padding-left: 10px;
}

/* --- Spotlight: body | body2 left, image + side stacked right --- */
.hqp-content-spotlight {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr auto auto;
  grid-template-areas:
    "body body2 img"
    "body body2 side"
    "sec sec sec";
}
.hqp-content-spotlight .hqp-block-body2 { display: flex; }
.hqp-content-spotlight .hqp-block-body2 {
  border-left: 2px solid var(--ink);
  padding-left: 10px;
}

/* --- Banner: full image top / body | side | secondary in row --- */
.hqp-content-banner {
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 2fr 3fr;
  grid-template-areas:
    "img img img"
    "body side sec";
}
.hqp-content-banner .hqp-block-secondary {
  border-top: none;
  padding-top: 0;
  border-left: 2px solid var(--ink);
  padding-left: 10px;
}


/* ========================================
   Fantasy Content Layouts
   ======================================== */

/* All fantasy content blocks need position context for ornamental pseudo-elements */
[class*="hqp-content-f-"] > [class*="hqp-block-"] {
  position: relative;
}

/* Tome: 3 equal text columns, dense broadsheet */
.hqp-content-f-tome {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "body body2 body3"
    "sec sec sec";
}
.hqp-content-f-tome .hqp-block-body2,
.hqp-content-f-tome .hqp-block-body3 { display: flex; }
.hqp-content-f-tome .hqp-block-image,
.hqp-content-f-tome .hqp-block-side { display: none; }
.hqp-content-f-tome .hqp-block-body2 { padding-left: 12px; }
.hqp-content-f-tome .hqp-block-body3 { padding-left: 12px; }

/* Chronicle: full-width illustration, story + sidebar below */
.hqp-content-f-chronicle {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1.2fr) minmax(0, 2fr);
  grid-template-areas:
    "img img img"
    "body body side";
}
.hqp-content-f-chronicle .hqp-block-secondary { display: none; }
.hqp-content-f-chronicle .hqp-block-side { padding-left: 12px; }

/* Scroll: single column, everything stacked vertically like a letter */
.hqp-content-f-scroll {
  grid-template-columns: 1fr;
  grid-template-rows: 3fr 1.5fr 3fr auto;
  grid-template-areas:
    "body"
    "img"
    "body2"
    "sec";
}
.hqp-content-f-scroll .hqp-block-body2 { display: flex; }
.hqp-content-f-scroll .hqp-block-body3,
.hqp-content-f-scroll .hqp-block-side { display: none; }

/* Ledger: two text columns + persistent sidebar */
.hqp-content-f-ledger {
  grid-template-columns: 1.2fr 1.2fr 0.8fr;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "body body2 side"
    "sec sec sec";
}
.hqp-content-f-ledger .hqp-block-body2 { display: flex; }
.hqp-content-f-ledger .hqp-block-image,
.hqp-content-f-ledger .hqp-block-body3 { display: none; }
.hqp-content-f-ledger .hqp-block-body2 { padding-left: 12px; }
.hqp-content-f-ledger .hqp-block-side { padding-left: 12px; }

/* Centerfold: text flanking a center illustration */
.hqp-content-f-centerfold {
  grid-template-columns: 1fr 1.4fr 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "body img body2"
    "sec sec sec";
}
.hqp-content-f-centerfold .hqp-block-body2 { display: flex; }
.hqp-content-f-centerfold .hqp-block-body3,
.hqp-content-f-centerfold .hqp-block-side { display: none; }
.hqp-content-f-centerfold .hqp-block-body { padding-right: 12px; }
.hqp-content-f-centerfold .hqp-block-body2 { padding-left: 12px; }

/* Proclamation: wide body on top, image + sidebar on bottom */
.hqp-content-f-proclamation {
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: 3fr 2fr auto;
  grid-template-areas:
    "body body"
    "img side"
    "sec sec";
}
.hqp-content-f-proclamation .hqp-block-body { padding-bottom: 10px; }
.hqp-content-f-proclamation .hqp-block-side { padding-left: 12px; }

/* Wanted Board: 2×3 grid of blocks, like a notice board */
.hqp-content-f-wanted {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "body body2 body3"
    "side img sec";
}
.hqp-content-f-wanted .hqp-block-body2,
.hqp-content-f-wanted .hqp-block-body3 { display: flex; }
.hqp-content-f-wanted .hqp-block-body,
.hqp-content-f-wanted .hqp-block-body3 { padding-bottom: 10px; }
.hqp-content-f-wanted .hqp-block-body2 {
  padding: 0 12px 10px;
  background: url('../assets/ornament-h.svg') left bottom;
  background-size: 10px 6px;
  background-repeat: round no-repeat;
}
.hqp-content-f-wanted .hqp-block-image { padding: 0 12px; }

/* Dispatch: tall image left, two stories stacked right */
.hqp-content-f-dispatch {
  grid-template-columns: 1.2fr 1fr;
  grid-template-rows: 1fr 1fr auto;
  grid-template-areas:
    "img body"
    "img body2"
    "sec sec";
}
.hqp-content-f-dispatch .hqp-block-body2 { display: flex; }
.hqp-content-f-dispatch .hqp-block-body3,
.hqp-content-f-dispatch .hqp-block-side { display: none; }
.hqp-content-f-dispatch .hqp-block-body { padding-bottom: 10px; }

/* Folio: wide image top, two columns middle, sidebar + secondary bottom */
.hqp-content-f-folio {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1.5fr 3fr 1.5fr;
  grid-template-areas:
    "img img"
    "body body2"
    "side sec";
}
.hqp-content-f-folio .hqp-block-body2 { display: flex; }
.hqp-content-f-folio .hqp-block-body3 { display: none; }
.hqp-content-f-folio .hqp-block-body2 { padding-left: 12px; }
.hqp-content-f-folio .hqp-block-side { padding: 10px 12px 0 0; }
.hqp-content-f-folio .hqp-block-secondary { padding-top: 10px; }

/* Manuscript: body left spanning rows, image over sidebar on right */
.hqp-content-f-manuscript {
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: 1fr 1fr auto;
  grid-template-areas:
    "body img"
    "body side"
    "sec sec";
}
.hqp-content-f-manuscript .hqp-block-body { padding-right: 12px; }
.hqp-content-f-manuscript .hqp-block-side { padding-top: 10px; }

/* --- Fantasy ornamental dividers (diamond chain SVG pseudo-elements) ---
   ::before = vertical ornament, ::after = horizontal ornament */

/* Vertical-left ornaments */
.hqp-content-f-chronicle .hqp-block-side::before,
.hqp-content-f-ledger .hqp-block-side::before,
.hqp-content-f-proclamation .hqp-block-side::before,
.hqp-layout-fantasy .hqp-content-custom .hqp-block-side::before {
  content: '';
  position: absolute;
  left: -1px; top: 0; bottom: 0; width: 6px;
  background: url('../assets/ornament-v.svg') center;
  background-size: 6px 10px;
  background-repeat: no-repeat round;
  pointer-events: none;
  z-index: 1;
}

/* Folio sidebar: right ornament via ::before (::after used for top) */
.hqp-content-f-folio .hqp-block-side::before {
  content: '';
  position: absolute;
  right: -1px; top: 0; bottom: 0; width: 6px;
  background: url('../assets/ornament-v.svg') center;
  background-size: 6px 10px;
  background-repeat: no-repeat round;
  pointer-events: none;
  z-index: 1;
}

/* Horizontal-bottom ornaments */
.hqp-content-f-proclamation .hqp-block-body::after,
.hqp-content-f-dispatch .hqp-block-body::after,
.hqp-content-f-wanted .hqp-block-body::after,
.hqp-content-f-wanted .hqp-block-body3::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0; height: 6px;
  background: url('../assets/ornament-h.svg') center;
  background-size: 10px 6px;
  background-repeat: round no-repeat;
  pointer-events: none;
  z-index: 1;
}

/* Horizontal-top ornaments */
.hqp-content-f-tome .hqp-block-secondary::after,
.hqp-content-f-scroll .hqp-block-secondary::after,
.hqp-content-f-ledger .hqp-block-secondary::after,
.hqp-content-f-centerfold .hqp-block-secondary::after,
.hqp-content-f-proclamation .hqp-block-secondary::after,
.hqp-content-f-dispatch .hqp-block-secondary::after,
.hqp-content-f-manuscript .hqp-block-secondary::after,
.hqp-content-f-folio .hqp-block-side::after,
.hqp-content-f-folio .hqp-block-secondary::after,
.hqp-content-f-manuscript .hqp-block-side::after,
.hqp-layout-fantasy .hqp-content-custom .hqp-block-secondary::after {
  content: '';
  position: absolute;
  top: -1px; left: 0; right: 0; height: 6px;
  background: url('../assets/ornament-h.svg') center;
  background-size: 10px 6px;
  background-repeat: round no-repeat;
  pointer-events: none;
  z-index: 1;
}

/* Fantasy: kill default plain-line borders on side/secondary — ornaments replace them */
.hqp-layout-fantasy .hqp-block-side {
  border-left: none;
}
.hqp-layout-fantasy .hqp-block-secondary {
  border-top: none;
  padding-top: 10px;
}

/* Wanted board: left + right ornaments on center column */
.hqp-content-f-wanted .hqp-block-body2::before,
.hqp-content-f-wanted .hqp-block-image::before {
  content: '';
  position: absolute;
  left: -1px; top: 0; bottom: 0; width: 6px;
  background: url('../assets/ornament-v.svg') center;
  background-size: 6px 10px;
  background-repeat: no-repeat round;
  pointer-events: none;
  z-index: 1;
}
.hqp-content-f-wanted .hqp-block-body2::after,
.hqp-content-f-wanted .hqp-block-image::after {
  content: '';
  position: absolute;
  right: -1px; top: 0; bottom: 0; width: 6px;
  background: url('../assets/ornament-v.svg') center;
  background-size: 6px 10px;
  background-repeat: no-repeat round;
  pointer-events: none;
  z-index: 1;
}

/* Fantasy image frame: ornamental border via pseudo-elements on the block,
   sitting above the img-wrap's overflow:hidden so zoom can't bleed over them. */
.hqp-layout-fantasy .hqp-img-wrap {
  border: none;
}
.hqp-layout-fantasy .hqp-block-image {
  padding: 5px;
}
.hqp-layout-fantasy .hqp-block-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    url('../assets/ornament-h.svg') left top / 10px 6px,
    url('../assets/ornament-h.svg') left bottom / 10px 6px;
  background-repeat: round no-repeat, round no-repeat;
  pointer-events: none;
  z-index: 2;
}
.hqp-layout-fantasy .hqp-block-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    url('../assets/ornament-v.svg') left center / 6px 10px,
    url('../assets/ornament-v.svg') right center / 6px 10px;
  background-repeat: no-repeat round, no-repeat round;
  pointer-events: none;
  z-index: 2;
}


/* --- Custom: absolute positioning, user-defined --- */
.hqp-content-custom,
.hqp-content-custom-positioned {
  display: block;
  position: relative;
}

.hqp-content-custom > .hqp-block,
.hqp-content-custom-positioned > .hqp-block {
  position: absolute;
}

/* In custom mode, blocks are visible unless explicitly hidden via data-hidden.
   This overrides per-layout display:none rules (e.g. bulletin hiding the image block)
   so the user can add any block type via Add Block. */
.hqp-content-custom > .hqp-block:not([data-hidden="true"]) {
  display: flex !important;
}

/* Modern custom mode: keep the column dividers on extra body columns */
.hqp-layout-modern .hqp-content-custom .hqp-block-body2,
.hqp-layout-modern .hqp-content-custom .hqp-block-body3 {
  border-left: 2px solid var(--ink);
  padding-left: 10px;
}

.hqp-block[data-hidden="true"],
.hqp-news-masthead-area[data-hidden="true"],
.hqp-news-title-area[data-hidden="true"] {
  display: none !important;
}


/* ---- Block Handles (editor only) ---- */

.hqp-block-handles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
  z-index: 100;
}

/* Show on parent hover (JS-toggled class, not CSS :hover, to avoid
   sticky hover bugs inside the scroll container) */
.hqp-news-preview-wrap .hqp-block.hqp-hovered > .hqp-block-handles,
.hqp-news-preview-wrap .hqp-news-title-area.hqp-hovered > .hqp-block-handles {
  display: block;
}

/* Resize corner handles — L-shaped brackets */
.hqp-rh {
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: auto;
  z-index: 101;
  border-color: #7c6fef;
  border-style: solid;
  border-width: 0;
}

.hqp-rh-nw { top: -2px; left: -2px; cursor: nw-resize; border-top-width: 3.5px; border-left-width: 3.5px; }
.hqp-rh-ne { top: -2px; right: -2px; cursor: ne-resize; border-top-width: 3.5px; border-right-width: 3.5px; }
.hqp-rh-sw { bottom: -2px; left: -2px; cursor: sw-resize; border-bottom-width: 3.5px; border-left-width: 3.5px; }
.hqp-rh-se { bottom: -2px; right: -2px; cursor: se-resize; border-bottom-width: 3.5px; border-right-width: 3.5px; }

/* Move bar at top */
.hqp-move-bar {
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 5px;
  background: rgba(124, 111, 239, 0.6);
  border-radius: 0 0 3px 3px;
  cursor: grab;
  pointer-events: auto;
}
.hqp-move-bar:active { cursor: grabbing; }

/* In editor, allow handles to escape the block's overflow */
.hqp-news-preview-wrap .hqp-block,
.hqp-news-preview-wrap .hqp-news-masthead-area,
.hqp-news-preview-wrap .hqp-news-title-area,
.hqp-news-preview-wrap .hqp-news-content-area {
  overflow: visible;
}
/* Image zoom clipping handled by .hqp-img-wrap overflow:hidden */

/* Delete button */
.hqp-block-del {
  position: absolute;
  top: -18px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  background: #c0392b;
  color: #fff;
  font-size: 0.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  z-index: 102;
  padding: 0;
}
.hqp-block-del:hover { background: #e74c3c; }

/* ---- Draggable Lines ---- */

.hqp-line-source {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: 5px;
  cursor: grab;
  transition: background 0.15s;
  user-select: none;
}
.hqp-line-source:active { cursor: grabbing; }
.hqp-line-source:hover { background: rgba(255,255,255,0.1); }

.hqp-line-source-preview {
  flex: 1;
  height: 3px;
  background: var(--ink, #1a1a1a);
  border-radius: 1px;
}

.hqp-line-source span {
  font-size: 0.72em;
  color: rgba(255,255,255,0.45);
  white-space: nowrap;
}

/* Lines placed on the paper */
.hqp-placed-line {
  position: absolute;
  z-index: 8;
  pointer-events: auto;
  cursor: move;
}

.hqp-placed-line-bar {
  width: 100%;
  height: 100%;
  background: var(--ink);
  border-radius: 1px;
  pointer-events: none;
}

/* Fantasy placed lines: interlocking diamond chain */
.hqp-layout-fantasy .hqp-placed-line-bar {
  background: url('../assets/ornament-h.svg') center !important;
  background-size: 10px 6px !important;
  background-repeat: round no-repeat !important;
  border-radius: 0;
}

/* Line controls toolbar — appears on hover */
.hqp-line-controls {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 3px;
  padding: 3px 5px;
  background: #1a1a2e;
  border: 1px solid rgba(124, 111, 239, 0.4);
  border-radius: 5px;
  white-space: nowrap;
  z-index: 20;
}

.hqp-placed-line:hover .hqp-line-controls,
.hqp-placed-line.hqp-line-active .hqp-line-controls,
.hqp-placed-line.hqp-line-selected .hqp-line-controls {
  display: flex;
}

.hqp-lc-btn {
  width: 22px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 3px;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  font-size: 0.65em;
  padding: 0;
}
.hqp-lc-btn:hover { background: rgba(124, 111, 239, 0.3); color: #fff; }

.hqp-lc-color {
  width: 20px;
  height: 18px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 3px;
  cursor: pointer;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}
.hqp-lc-color::-webkit-color-swatch-wrapper { padding: 1px; }
.hqp-lc-color::-webkit-color-swatch { border: none; border-radius: 2px; }

.hqp-lc-thickness {
  width: 45px;
  height: 14px;
  accent-color: #7c6fef;
  cursor: pointer;
}

.hqp-lc-sep {
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,0.15);
  margin: 0 1px;
}

/* Resize handle on the right edge of a line */
.hqp-line-resize {
  position: absolute;
  top: -4px;
  right: -6px;
  width: 12px;
  height: calc(100% + 8px);
  cursor: ew-resize;
  display: none;
}
.hqp-placed-line:hover .hqp-line-resize,
.hqp-placed-line.hqp-line-active .hqp-line-resize,
.hqp-placed-line.hqp-line-selected .hqp-line-resize {
  display: block;
}
.hqp-line-resize::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 4px;
  height: 14px;
  background: #7c6fef;
  border-radius: 2px;
}

/* Rotation handle */
.hqp-line-rotate {
  position: absolute;
  top: 50%;
  left: -22px;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  cursor: crosshair;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(124, 111, 239, 0.8);
  border-radius: 50%;
  color: #fff;
  font-size: 0.5em;
}
.hqp-placed-line:hover .hqp-line-rotate,
.hqp-placed-line.hqp-line-active .hqp-line-rotate,
.hqp-placed-line.hqp-line-selected .hqp-line-rotate {
  display: flex;
}

/* Line delete */
.hqp-line-del {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  background: #c0392b;
  color: #fff;
  font-size: 0.45em;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 12;
  padding: 0;
}
.hqp-placed-line:hover .hqp-line-del,
.hqp-placed-line.hqp-line-active .hqp-line-del,
.hqp-placed-line.hqp-line-selected .hqp-line-del {
  display: flex;
}
.hqp-line-del:hover { background: #e74c3c; }

/* Drag ghost — follows cursor while dragging a line from palette */
.hqp-line-drag-ghost {
  position: fixed;
  width: 120px;
  height: 3px;
  background: var(--ink, #1a1a1a);
  border-radius: 1px;
  pointer-events: none;
  z-index: 99999;
  opacity: 0.7;
  transform: translate(-50%, -50%);
}

/* Drop target highlight when dragging a line over the paper */
.hqp-news-paper.hqp-line-drop-target {
  outline: 2px dashed rgba(124, 111, 239, 0.5);
  outline-offset: -2px;
}

/* --- Draggable banner header --- */

.hqp-banner-source {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: 5px;
  cursor: grab;
  transition: background 0.15s;
  user-select: none;
}
.hqp-banner-source:active { cursor: grabbing; }
.hqp-banner-source:hover { background: rgba(255,255,255,0.1); }

.hqp-banner-source-preview {
  flex: 1;
  height: 22px;
  background: url('../assets/banner-header.png') center / 100% 100% no-repeat;
}

.hqp-banner-source span {
  font-size: 0.72em;
  color: rgba(255,255,255,0.45);
  white-space: nowrap;
}

.hqp-banner-drag-ghost {
  position: fixed;
  width: 160px;
  aspect-ratio: 5 / 1;
  background: url('../assets/banner-header.png') center / 100% 100% no-repeat;
  pointer-events: none;
  z-index: 99999;
  opacity: 0.75;
  transform: translate(-50%, -50%);
}

/* Placed banner on the paper */
.hqp-placed-banner {
  position: absolute;
  background: url('../assets/banner-header.png') center / 100% 100% no-repeat;
  cursor: grab;
  box-sizing: border-box;
  z-index: 5;
}
.hqp-placed-banner.hqp-line-active { cursor: grabbing; }

.hqp-placed-banner-label {
  position: absolute;
  left: 9.44%;
  right: 22.75%;
  top: 9.13%;
  bottom: 59.20%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--headline-font, serif);
  color: var(--ink, #1a1a1a);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.1;
  outline: none;
  cursor: text;
  overflow: hidden;
}

.hqp-banner-handles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
  z-index: 10;
}
.hqp-placed-banner:hover .hqp-banner-handles,
.hqp-placed-banner.hqp-line-active .hqp-banner-handles { display: block; }

.hqp-banner-del {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: #b94141;
  color: white;
  font-size: 10px;
  cursor: pointer;
  display: none;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.hqp-placed-banner:hover .hqp-banner-del,
.hqp-placed-banner.hqp-line-active .hqp-banner-del { display: flex; }


/* Fantasy overrides */
.hqp-layout-fantasy .hqp-block-image img {
  filter: sepia(30%) contrast(1.1) grayscale(20%);
}


/* --- Modern layout overrides --- */

.hqp-layout-modern .hqp-news-masthead {
  font-size: 2em;
}
.hqp-layout-modern .hqp-news-headline {
  font-size: 1.4em;
  margin: 2px 0;
}
.hqp-layout-modern .hqp-news-subtitle {
  font-size: 0.75em;
  margin-bottom: 0;
}
.hqp-layout-modern .hqp-news-dateline {
  margin: 1px 0 3px;
  font-size: 0.9em;
  font-weight: 600;
}
.hqp-layout-modern .hqp-news-rule {
  margin: 3px 0;
  height: 3px;
}


/* --- Futuristic: ~3:2 landscape screen --- */
.hqp-layout-futuristic {
  background-image: url('../assets/Cyber%20Screen.png');
  aspect-ratio: 967 / 646;
  --ink: #c0e8ff;
  --accent: #00b4d8;
  font-family: 'Rajdhani', 'Barlow', sans-serif;
}

.hqp-layout-futuristic .hqp-news-masthead-area {
  top: 5.5%;
  left: 4.5%;
  width: 91%;
  height: 7%;
}

.hqp-layout-futuristic .hqp-news-title-area {
  top: 13%;
  left: 4.5%;
  width: 91%;
  min-height: 5%;
}

.hqp-layout-futuristic .hqp-news-content-area {
  top: 19%;
  left: 4.5%;
  width: 91%;
  height: 74%;
}

.hqp-layout-futuristic .hqp-news-masthead {
  font-family: 'Orbitron', 'Rajdhani', sans-serif;
  font-size: 1.8em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.hqp-layout-futuristic .hqp-news-dateline {
  font-size: 0.6em;
  letter-spacing: 0.15em;
  opacity: 0.6;
  margin: 2px 0;
}

.hqp-layout-futuristic .hqp-news-rule {
  border: none;
  height: 1px;
  margin: 4px 0;
  background: linear-gradient(90deg, transparent, var(--ink), transparent);
  opacity: 0.4;
}

.hqp-layout-futuristic .hqp-news-rule-thin {
  border: none;
  height: 1px;
  margin: 6px 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.3;
}

.hqp-layout-futuristic .hqp-news-headline {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.5em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 2px 0;
}

.hqp-layout-futuristic .hqp-news-subtitle {
  font-size: 0.72em;
  font-style: normal;
  opacity: 0.7;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.hqp-layout-futuristic .hqp-news-subtitle::after {
  content: '◈';
  opacity: 0.3;
  font-size: 0.6em;
}

.hqp-layout-futuristic .hqp-block-side {
  border-left: 1px solid rgba(0, 180, 216, 0.3);
}

.hqp-layout-futuristic .hqp-block-secondary {
  border-top: 1px solid rgba(0, 180, 216, 0.3);
}

.hqp-layout-futuristic .hqp-block-image .hqp-img-wrap {
  border: 1px solid rgba(0, 180, 216, 0.35);
}

.hqp-layout-futuristic .hqp-block-image img {
  filter: none;
}

.hqp-layout-futuristic .hqp-block-image[data-empty="true"] {
  border: 1px dashed rgba(0, 180, 216, 0.2);
  background: rgba(0, 180, 216, 0.03);
}

/* Futuristic custom mode borders */
.hqp-layout-futuristic .hqp-content-custom .hqp-block-body2,
.hqp-layout-futuristic .hqp-content-custom .hqp-block-body3 {
  border-left: 1px solid rgba(0, 180, 216, 0.3);
  padding-left: 10px;
}

/* Futuristic drop cap color override */
.hqp-layout-futuristic .hqp-block-body > .hqp-news-body:not(.hqp-scribble)::first-letter {
  color: var(--accent);
}

/* Futuristic content layout column dividers */
.hqp-layout-futuristic .hqp-content-broadsheet .hqp-block-body2,
.hqp-layout-futuristic .hqp-content-headline .hqp-block-body2,
.hqp-layout-futuristic .hqp-content-editorial .hqp-block-body2,
.hqp-layout-futuristic .hqp-content-spotlight .hqp-block-body2 {
  border-left: 1px solid rgba(0, 180, 216, 0.3);
}
.hqp-layout-futuristic .hqp-content-bulletin .hqp-block-body2,
.hqp-layout-futuristic .hqp-content-bulletin .hqp-block-body3 {
  border-left: 1px solid rgba(0, 180, 216, 0.3);
}
.hqp-layout-futuristic .hqp-content-gazette .hqp-block-side {
  border-left: none;
  border-right: 1px solid rgba(0, 180, 216, 0.3);
}
.hqp-layout-futuristic .hqp-content-gazette .hqp-block-body {
  border-right: 1px solid rgba(0, 180, 216, 0.3);
}
.hqp-layout-futuristic .hqp-content-mosaic .hqp-block-body,
.hqp-layout-futuristic .hqp-content-mosaic .hqp-block-body2 {
  border-top: 1px solid rgba(0, 180, 216, 0.3);
}
.hqp-layout-futuristic .hqp-content-mosaic .hqp-block-body2 {
  border-left: 1px solid rgba(0, 180, 216, 0.3);
}
.hqp-layout-futuristic .hqp-content-banner .hqp-block-secondary {
  border-top: none;
  border-left: 1px solid rgba(0, 180, 216, 0.3);
}

/* Futuristic placed lines: thin solid, matching block dividers */
.hqp-layout-futuristic .hqp-placed-line-bar {
  opacity: 0.3;
}


/* --- Fantasy layout overrides --- */

.hqp-layout-fantasy {
  --ink: #3a2810;
  --accent: #6b3a1a;
  font-family: 'IM Fell English', 'EB Garamond', 'Georgia', serif;
}

.hqp-layout-fantasy .hqp-news-masthead {
  font-variant: small-caps;
  letter-spacing: 0.08em;
  font-size: 1.4em;
}

/* Fantasy: hide dateline and rule in masthead area */
.hqp-layout-fantasy .hqp-news-masthead-area .hqp-news-dateline,
.hqp-layout-fantasy .hqp-news-masthead-area .hqp-news-rule {
  display: none;
}

.hqp-layout-fantasy .hqp-news-headline {
  font-size: 1.1em;
  margin: 1px 0 0;
}
.hqp-layout-fantasy .hqp-news-subtitle {
  font-size: 0.7em;
  margin-bottom: 1px;
}

/* Fantasy ornamental rules — interlocking diamond chain */
.hqp-layout-fantasy .hqp-news-rule {
  border: none;
  height: 8px;
  margin: 4px 0;
  opacity: 0.75;
  background: url('../assets/ornament-h.svg') left center;
  background-size: 13px 8px;
  background-repeat: round no-repeat;
}
.hqp-layout-fantasy .hqp-news-rule-thin {
  border: none;
  height: 6px;
  margin: 6px 0;
  opacity: 0.5;
  background: url('../assets/ornament-h.svg') left center;
  background-size: 10px 6px;
  background-repeat: round no-repeat;
}

.hqp-layout-fantasy .hqp-news-subtitle::after {
  content: '❧';
  font-size: 0.7em;
  opacity: 0.3;
}



/* ---- Body text ---- */

.hqp-news-body {
  font-size: 0.78em;
  text-align: justify;
}

.hqp-news-body p,
.hqp-news-side-body p,
.hqp-news-secondary-body p {
  margin: 0 0 6px;
  text-indent: 1.2em;
}

.hqp-news-body p:first-child,
.hqp-news-side-body p:first-child,
.hqp-news-secondary-body p:first-child {
  text-indent: 0;
}

/* Drop cap: only the very first letter of the body block */
.hqp-block-body > .hqp-news-body:not(.hqp-scribble)::first-letter {
  float: left;
  font-size: 2.8em;
  line-height: 0.65;
  padding-right: 4px;
  margin-top: 0.05em;
  font-weight: 700;
  color: var(--accent);
}


/* ---- Side column ---- */

.hqp-news-side-headline {
  font-size: 0.9em;
  font-weight: 700;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hqp-news-side-body {
  font-size: 0.72em;
  text-align: justify;
}


/* ---- Secondary section ---- */

.hqp-news-secondary-headline {
  font-size: 0.85em;
  font-weight: 700;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.hqp-news-secondary-body {
  font-size: 0.72em;
  text-align: justify;
}


/* ========================================
   Newspaper Overlay (player view)
   ======================================== */

#hqp-newspaper-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
}

.hqp-news-overlay {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hqp-news-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  cursor: pointer;
}

.hqp-news-overlay-content {
  position: relative;
  z-index: 1;
  max-height: 92vh;
  overflow: hidden;
}
.hqp-news-overlay-content.hqp-anim-fade {
  animation: hqp-news-appear 0.4s ease-out;
}
.hqp-news-overlay-content.hqp-anim-drop {
  animation: hqp-news-drop 0.75s cubic-bezier(0.18, 0.75, 0.3, 1);
  transform-origin: center center;
}
.hqp-news-overlay-content.hqp-anim-spin {
  animation: hqp-news-spin 0.9s cubic-bezier(0.2, 0.7, 0.25, 1);
  transform-origin: center center;
}

/* Match editor base so em-sized text scales the same in overlay */
.hqp-news-overlay-content .hqp-news-paper {
  font-size: 12px;
}

/* Modern: landscape-ish, use width-based sizing */
.hqp-news-overlay-content .hqp-layout-modern {
  width: 70vw;
  max-width: 950px;
  transform: rotate(-0.3deg);
}

/* Fantasy: portrait, use height-based sizing */
.hqp-news-overlay-content .hqp-layout-fantasy {
  width: 50vw;
  max-width: 650px;
  transform: rotate(0.2deg);
}

/* Futuristic: wide landscape screen */
.hqp-news-overlay-content .hqp-layout-futuristic {
  width: 75vw;
  max-width: 1050px;
}

/* Futuristic screen effects (overlay only) */
#hqp-newspaper-overlay .hqp-layout-futuristic::before {
  content: '';
  position: absolute;
  top: 3.5%;
  left: 3%;
  right: 3%;
  bottom: 4%;
  z-index: 100;
  pointer-events: none;
  box-shadow:
    inset 0 0 50px rgba(0, 180, 216, 0.25),
    inset 0 0 100px rgba(0, 140, 200, 0.12);
  animation: hqp-fut-glow 4s ease-in-out infinite alternate;
}

#hqp-newspaper-overlay .hqp-layout-futuristic::after {
  content: '';
  position: absolute;
  left: 4%;
  right: 4%;
  height: 1px;
  z-index: 101;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 200, 255, 0.06) 25%,
    rgba(0, 230, 255, 0.1) 50%,
    rgba(0, 200, 255, 0.06) 75%,
    transparent 100%);
  box-shadow: 0 0 4px 1px rgba(0, 200, 255, 0.04);
  animation: hqp-fut-sweep 12s ease-in-out infinite;
}

@keyframes hqp-fut-glow {
  from {
    box-shadow:
      inset 0 0 50px rgba(0, 180, 216, 0.25),
      inset 0 0 100px rgba(0, 140, 200, 0.12);
  }
  to {
    box-shadow:
      inset 0 0 65px rgba(0, 180, 216, 0.35),
      inset 0 0 120px rgba(0, 140, 200, 0.15);
  }
}

@keyframes hqp-fut-sweep {
  0%, 100% { top: 4%; opacity: 0; }
  8% { opacity: 0.4; }
  50% { top: 93%; }
  92% { opacity: 0.4; }
}


@keyframes hqp-news-appear {
  from { opacity: 0; transform: scale(0.93) translateY(15px) rotate(-1deg); }
  to { opacity: 1; transform: scale(1) translateY(0) rotate(0deg); }
}

@keyframes hqp-news-disappear {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.93) translateY(10px); }
}

/* Drop: paper falls onto the screen — starts zoomed in, shrinks with a tiny bounce */
@keyframes hqp-news-drop {
  0%   { opacity: 0; transform: scale(5); }
  25%  { opacity: 1; }
  70%  { transform: scale(0.94); }
  85%  { transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1); }
}

/* Spin: paper whirls in from off-screen, rotating to center */
@keyframes hqp-news-spin {
  0%   { opacity: 0; transform: translate(-140vw, -60vh) rotate(-1080deg) scale(0.25); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}

.hqp-news-overlay.closing {
  animation: hqp-news-disappear 0.2s ease-in forwards;
  pointer-events: none;
}

.hqp-news-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.5);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85em;
  transition: background 0.15s;
  z-index: 2;
}

.hqp-news-close:hover {
  background: rgba(0,0,0,0.8);
}

/* Page wrap: positions arrows relative to the paper */
.hqp-news-page-wrap {
  position: relative;
  display: inline-block;
}

/* Overlay page navigation arrows */
.hqp-page-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.55);
  color: #fff;
  cursor: pointer;
  font-size: 1.1em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.2s;
  z-index: 110;
}
.hqp-page-arrow:hover {
  background: rgba(0,0,0,0.8);
  border-color: rgba(255,255,255,0.4);
}
.hqp-page-prev { left: -52px; }
.hqp-page-next { right: -52px; }

.hqp-page-indicator {
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.55);
  color: #fff;
  padding: 4px 14px;
  border-radius: 12px;
  font-size: 0.8em;
  letter-spacing: 0.5px;
  z-index: 110;
}

/* Futuristic sci-fi arrows: inside the screen edges */
.hqp-news-page-wrap:has(.hqp-layout-futuristic) .hqp-page-arrow {
  width: 32px;
  height: 64px;
  border-radius: 4px;
  background: rgba(0, 20, 40, 0.7);
  border: 1px solid rgba(0, 180, 216, 0.4);
  color: rgba(0, 220, 255, 0.85);
  font-size: 0.9em;
  box-shadow:
    0 0 8px rgba(0, 180, 216, 0.15),
    inset 0 0 12px rgba(0, 180, 216, 0.08);
  backdrop-filter: blur(4px);
}
.hqp-news-page-wrap:has(.hqp-layout-futuristic) .hqp-page-arrow:hover {
  background: rgba(0, 30, 60, 0.85);
  border-color: rgba(0, 220, 255, 0.7);
  color: #00e0ff;
  box-shadow:
    0 0 14px rgba(0, 200, 255, 0.3),
    inset 0 0 16px rgba(0, 200, 255, 0.12);
}
.hqp-news-page-wrap:has(.hqp-layout-futuristic) .hqp-page-prev {
  left: 1%;
}
.hqp-news-page-wrap:has(.hqp-layout-futuristic) .hqp-page-next {
  right: 1%;
}

/* Futuristic page indicator */
.hqp-news-page-wrap:has(.hqp-layout-futuristic) .hqp-page-indicator {
  bottom: 5%;
  background: rgba(0, 20, 40, 0.7);
  border: 1px solid rgba(0, 180, 216, 0.3);
  color: rgba(0, 220, 255, 0.85);
  font-family: 'Rajdhani', 'Barlow', sans-serif;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 0.7em;
  padding: 3px 16px;
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(0, 180, 216, 0.12);
}

/* Page glitch transitions (content only, frame stays static) */
.hqp-news-paper.hqp-glitch-hidden > .hqp-news-masthead-area,
.hqp-news-paper.hqp-glitch-hidden > .hqp-news-title-area,
.hqp-news-paper.hqp-glitch-hidden > .hqp-news-content-area,
.hqp-news-paper.hqp-glitch-hidden > .hqp-news-lines {
  opacity: 0;
}

.hqp-news-paper.hqp-glitch-out > .hqp-news-masthead-area,
.hqp-news-paper.hqp-glitch-out > .hqp-news-title-area,
.hqp-news-paper.hqp-glitch-out > .hqp-news-content-area,
.hqp-news-paper.hqp-glitch-out > .hqp-news-lines {
  animation: hqp-glitch-out 0.25s steps(4) forwards;
}

.hqp-news-paper.hqp-glitch-in > .hqp-news-masthead-area,
.hqp-news-paper.hqp-glitch-in > .hqp-news-title-area,
.hqp-news-paper.hqp-glitch-in > .hqp-news-content-area,
.hqp-news-paper.hqp-glitch-in > .hqp-news-lines {
  animation: hqp-glitch-in 0.3s steps(5) forwards;
}

/* Hide pseudo-element screen effects on the frameless stacked page */
.hqp-news-paper[style*="--hide-frame"]::before,
.hqp-news-paper[style*="--hide-frame"]::after {
  display: none !important;
}

@keyframes hqp-glitch-out {
  0%   { opacity: 1; transform: none; filter: none; }
  20%  { opacity: 0.8; transform: translateX(3px) skewX(-2deg); filter: hue-rotate(40deg) saturate(2); }
  40%  { opacity: 0.5; transform: translateX(-5px) skewX(3deg); filter: hue-rotate(-30deg) brightness(1.5); }
  60%  { opacity: 0.3; transform: translateX(4px) skewX(-1deg); filter: hue-rotate(60deg) saturate(3); }
  80%  { opacity: 0.1; transform: translateX(-2px) skewX(2deg); filter: brightness(2); }
  100% { opacity: 0; transform: none; }
}

@keyframes hqp-glitch-in {
  0%   { opacity: 0; transform: none; filter: brightness(2); }
  20%  { opacity: 0.3; transform: translateX(3px) skewX(-2deg); filter: hue-rotate(40deg) saturate(3); }
  40%  { opacity: 0.5; transform: translateX(-5px) skewX(3deg); filter: hue-rotate(-30deg) brightness(1.4); }
  60%  { opacity: 0.7; transform: translateX(4px) skewX(-1deg); filter: hue-rotate(60deg) saturate(1.5); }
  80%  { opacity: 0.9; transform: translateX(-2px); filter: hue-rotate(10deg); }
  100% { opacity: 1; transform: none; filter: none; }
}

/* Hide scribble/placeholder text in overlay -- only show real content */
#hqp-newspaper-overlay .hqp-scribble {
  visibility: hidden;
}
#hqp-newspaper-overlay .hqp-block-image[data-empty="true"] {
  visibility: hidden;
}

/* Kill any editor controls that might leak into the overlay */
#hqp-newspaper-overlay .hqp-block-handles,
#hqp-newspaper-overlay .hqp-img-controls,
#hqp-newspaper-overlay .hqp-block-del,
#hqp-newspaper-overlay .hqp-move-bar,
#hqp-newspaper-overlay .hqp-rh,
#hqp-newspaper-overlay .hqp-line-controls,
#hqp-newspaper-overlay .hqp-line-del,
#hqp-newspaper-overlay .hqp-line-resize,
#hqp-newspaper-overlay .hqp-line-rotate,
#hqp-newspaper-overlay .hqp-banner-handles,
#hqp-newspaper-overlay .hqp-banner-del {
  display: none !important;
}

/* No interactive styling on overlay text fields */
#hqp-newspaper-overlay [data-field] {
  cursor: default !important;
  box-shadow: none !important;
  outline: none !important;
}


/* ========================================
   Newspaper Editor
   ======================================== */

#hqp-newspaper-editor {
  min-width: 1100px;
  max-height: none !important;
}

#hqp-newspaper-editor .window-content {
  overflow: hidden;
  padding: 10px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

#hqp-newspaper-editor .window-content > form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

#hqp-newspaper-editor .hqp-columns {
  flex: 1;
  min-height: 0;
}

/* Layout picker */
.hqp-layout-picker {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.hqp-layout-card {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8em;
  color: rgba(255,255,255,0.5);
  transition: all 0.15s;
}

.hqp-layout-card:hover {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
}

.hqp-layout-card.active {
  background: rgba(124, 111, 239, 0.15);
  border-color: rgba(124, 111, 239, 0.5);
  color: #7c6fef;
}

.hqp-layout-card i {
  font-size: 1.1em;
}

/* Editor columns */
#hqp-newspaper-editor .hqp-columns {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

#hqp-newspaper-editor .hqp-col-left {
  flex: 0 0 240px;
  min-width: 0;
  overflow-y: auto;
  max-height: calc(100vh - 130px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#hqp-newspaper-editor .hqp-col-right {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Newspaper preview in editor */
.hqp-news-preview-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.hqp-news-preview-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 4px;
  background: #2a2520;
  padding: 20px;
}

.hqp-news-preview-wrap .hqp-news-paper {
  font-size: 12px;
  margin: 0 auto;
}

/* Cap paper to overlay sizes so it doesn't stretch in fullscreen editor */
.hqp-news-preview-wrap .hqp-layout-modern {
  max-width: 950px;
}

.hqp-news-preview-wrap .hqp-layout-fantasy {
  max-width: 650px;
}

.hqp-news-preview-wrap .hqp-layout-futuristic {
  max-width: 1050px;
}

/* Reuse editor card/field styles */
#hqp-newspaper-editor .hqp-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 10px;
}

#hqp-newspaper-editor .hqp-card-header {
  font-size: 0.72em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

#hqp-newspaper-editor .hqp-field {
  margin-bottom: 4px;
}

#hqp-newspaper-editor .hqp-field label {
  display: block;
  font-size: 0.7em;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 1px;
}

#hqp-newspaper-editor .hqp-field-row {
  display: flex;
  gap: 5px;
  align-items: center;
}

#hqp-newspaper-editor .hqp-field-row input[type="text"] {
  flex: 1;
}

#hqp-newspaper-editor input[type="text"],
#hqp-newspaper-editor textarea,
#hqp-newspaper-editor select {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  color: inherit;
  padding: 5px 8px;
  font-size: 0.88em;
  transition: border-color 0.15s;
  width: 100%;
  box-sizing: border-box;
}

#hqp-newspaper-editor input[type="text"]:focus,
#hqp-newspaper-editor textarea:focus {
  border-color: rgba(255, 255, 255, 0.3);
  outline: none;
}

#hqp-newspaper-editor textarea {
  resize: vertical;
  font-family: inherit;
  min-height: 50px;
}

#hqp-newspaper-editor input[type="color"] {
  width: 30px;
  min-width: 30px;
  height: 28px;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  cursor: pointer;
  background: transparent;
}

#hqp-newspaper-editor .hqp-font-select {
  width: 100%;
  font-size: 0.72em !important;
  padding: 2px 4px !important;
  height: 24px;
}

#hqp-newspaper-editor .hqp-font-select option {
  font-size: 14px;
  padding: 2px 4px;
}

#hqp-newspaper-editor .hqp-separator {
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
  margin: 8px 0;
}

#hqp-newspaper-editor .hqp-icon-btn {
  width: 30px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  flex-shrink: 0;
  font-size: 0.8em;
  transition: background 0.15s;
}

#hqp-newspaper-editor .hqp-icon-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

#hqp-newspaper-editor .hqp-card-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#hqp-newspaper-editor .hqp-card-actions .hqp-field {
  margin-bottom: 0;
}

#hqp-newspaper-editor .hqp-actions {
  display: flex;
  gap: 6px;
}

#hqp-newspaper-editor .hqp-btn {
  flex: 1;
  padding: 7px 10px;
  font-size: 0.82em;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background 0.15s, transform 0.1s;
}

#hqp-newspaper-editor .hqp-btn:active {
  transform: scale(0.97);
}

#hqp-newspaper-editor .hqp-btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
}

#hqp-newspaper-editor .hqp-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.14);
}

#hqp-newspaper-editor .hqp-btn-primary {
  background: linear-gradient(135deg, #5a4fcf, #7c6fef);
  color: #fff;
}

#hqp-newspaper-editor .hqp-btn-primary:hover {
  background: linear-gradient(135deg, #6a5fd8, #8b7ff5);
}

/* GM Library sidebar */
#hqp-newspaper-editor .hqp-col-library {
  flex: 0 0 150px;
  overflow-y: auto;
  max-height: calc(100vh - 130px);
  display: flex;
  flex-direction: column;
  padding-right: 8px;
  border-right: 1px solid rgba(255,255,255,0.06);
}

.hqp-lib-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 6px;
  font-size: 0.72em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.4);
  flex-shrink: 0;
}

.hqp-lib-add {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  font-size: 0.65em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.hqp-lib-add:hover {
  background: rgba(124,111,239,0.25);
  border-color: rgba(124,111,239,0.5);
  color: #fff;
}

.hqp-lib-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow-y: auto;
  flex: 1;
}

.hqp-lib-entry {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.hqp-lib-entry:hover {
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.05);
}
.hqp-lib-entry.active {
  border-color: rgba(124,111,239,0.5);
  background: rgba(124,111,239,0.08);
}

.hqp-lib-icon {
  font-size: 0.75em;
  color: rgba(255,255,255,0.3);
  flex-shrink: 0;
}
.hqp-lib-entry.active .hqp-lib-icon {
  color: rgba(124,111,239,0.7);
}

.hqp-lib-name {
  flex: 1;
  min-width: 0;
  font-size: 0.72em;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hqp-lib-entry.active .hqp-lib-name {
  color: rgba(255,255,255,0.8);
}

.hqp-lib-del {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.2);
  font-size: 0.5em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.1s, color 0.1s;
}
.hqp-lib-entry:hover .hqp-lib-del {
  opacity: 1;
}
.hqp-lib-del:hover {
  color: #e74c3c;
}


/* ---- Content Layout Picker ---- */

.hqp-content-layout-picker {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.hqp-content-layout-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 5px 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s;
  min-width: 68px;
}

.hqp-content-layout-card span {
  font-size: 0.62em;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hqp-content-layout-card:hover {
  background: rgba(255,255,255,0.08);
}
.hqp-content-layout-card:hover span {
  color: rgba(255,255,255,0.6);
}

.hqp-content-layout-card.active {
  background: rgba(124, 111, 239, 0.15);
  border-color: rgba(124, 111, 239, 0.5);
}
.hqp-content-layout-card.active span {
  color: #7c6fef;
}


/* ---- Layout Thumbnails (mini grid diagrams) ---- */

.hqp-layout-thumb {
  width: 48px;
  height: 32px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-radius: 2px;
  overflow: hidden;
}

.hqp-thumb-row {
  display: flex;
  gap: 1px;
  flex: 1;
  min-height: 0;
}

.hqp-thumb-cell {
  flex: 1;
  border-radius: 1px;
  min-width: 0;
}

.hqp-thumb-IM { background: rgba(124, 111, 239, 0.45); }   /* Image */
.hqp-thumb-II { background: rgba(124, 111, 239, 0.45); }   /* Image full-width */
.hqp-thumb-BB { background: rgba(255,255,255,0.2); }        /* Body */
.hqp-thumb-B2 { background: rgba(255,255,255,0.15); }       /* Body 2 */
.hqp-thumb-B3 { background: rgba(255,255,255,0.1); }        /* Body 3 */
.hqp-thumb-SS { background: rgba(255, 193, 68, 0.4); }     /* Side */
.hqp-thumb-IS { background: linear-gradient(135deg, rgba(124,111,239,0.4), rgba(255,193,68,0.35)); } /* Image+Side combo */
.hqp-thumb-XX { background: rgba(255,255,255,0.12); }       /* Secondary */


/* ========================================
   Player Newspaper Inventory
   ======================================== */

.hqp-inventory {
  padding: 8px 12px;
}

.hqp-inventory-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: rgba(255,255,255,0.8);
}
.hqp-inventory-header i { font-size: 1.1em; opacity: 0.6; }
.hqp-inventory-header h3 { margin: 0; font-size: 1em; }

.hqp-inventory-empty {
  text-align: center;
  padding: 40px 20px;
  color: rgba(255,255,255,0.35);
}
.hqp-inventory-empty i {
  font-size: 2.5em;
  margin-bottom: 10px;
  display: block;
  opacity: 0.3;
}
.hqp-inventory-empty p {
  margin: 0 0 4px;
  font-size: 0.9em;
}
.hqp-inventory-empty span {
  font-size: 0.75em;
  opacity: 0.6;
}

.hqp-inventory-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hqp-inventory-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.hqp-inventory-entry:hover {
  border-color: rgba(124,111,239,0.4);
  background: rgba(124,111,239,0.06);
}

.hqp-inventory-icon {
  font-size: 1em;
  color: rgba(255,255,255,0.3);
  flex-shrink: 0;
}

.hqp-inventory-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.hqp-inventory-name {
  font-size: 0.82em;
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}

.hqp-inventory-date {
  font-size: 0.68em;
  color: rgba(255,255,255,0.35);
}

.hqp-inventory-del {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.2);
  font-size: 0.6em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.1s, color 0.1s;
}
.hqp-inventory-entry:hover .hqp-inventory-del {
  opacity: 1;
}
.hqp-inventory-del:hover {
  color: #e74c3c;
}

/* Show Newspaper dialog */
.hqp-show-dialog .window-content {
  background: linear-gradient(165deg, rgba(20, 20, 40, 0.97), rgba(12, 12, 28, 0.99));
  color: rgba(255, 255, 255, 0.85);
  padding: 0;
}

.hqp-show-dialog .dialog-content {
  padding: 14px 16px 8px;
}

.hqp-show-picker-heading {
  font-size: 0.72em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0 8px;
}

.hqp-show-player-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 14px;
}

.hqp-show-player {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
}

.hqp-show-player:hover {
  background: rgba(255, 255, 255, 0.06);
}

.hqp-show-player.offline {
  opacity: 0.4;
}

.hqp-show-player input[type="checkbox"] {
  accent-color: #7c6fef;
}

.hqp-show-player-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hqp-show-player-name {
  font-size: 0.88em;
}

.hqp-show-player-offline {
  font-size: 0.75em;
  color: rgba(255, 255, 255, 0.35);
  margin-left: 2px;
}

.hqp-show-select-all {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 6px;
  margin-bottom: 4px;
  font-weight: 600;
  font-size: 0.85em;
}

.hqp-show-anim select {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  color: inherit;
  padding: 5px 8px;
  font-size: 0.88em;
  width: 100%;
  box-sizing: border-box;
}

.hqp-show-anim select:focus {
  border-color: rgba(255, 255, 255, 0.3);
  outline: none;
}

.hqp-show-dialog .dialog-buttons {
  padding: 6px 16px 14px;
  display: flex;
  gap: 6px;
}

.hqp-show-dialog .dialog-buttons button {
  flex: 1;
  padding: 7px 10px;
  font-size: 0.82em;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background 0.15s, transform 0.1s;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.08);
}

.hqp-show-dialog .dialog-buttons button:hover {
  background: rgba(255, 255, 255, 0.14);
}

.hqp-show-dialog .dialog-buttons button:first-child {
  background: linear-gradient(135deg, #5a4fcf, #7c6fef);
  color: #fff;
}

.hqp-show-dialog .dialog-buttons button:first-child:hover {
  background: linear-gradient(135deg, #6a5fd8, #8b7ff5);
}

.hqp-show-dialog .dialog-buttons button:active {
  transform: scale(0.97);
}