/* HUNTER-F interface: live controls inspired by Falcon's button asset sheet. */
:root {
  --bg: #0b0b0f;
  --panel: #151821;
  --panel2: #1b2230;
  --ink: #f5f7fa;
  --muted: #aab3c5;
  --accent: #5ea8ff;
  --line: #6d8bb333;
  --control-cut: 9px;
  --control-shape: polygon(var(--control-cut) 0, calc(100% - var(--control-cut)) 0, 100% var(--control-cut), 100% calc(100% - var(--control-cut)), calc(100% - var(--control-cut)) 100%, var(--control-cut) 100%, 0 calc(100% - var(--control-cut)), 0 var(--control-cut));
}

/* The frame and inset are separate layers, so labels stay sharp and selectable. */
:root :is(.button, .chapter-action, .quiet-button, .menu-toggle, .dialog-close,
  .shelf-controls button, .sample-toolbar button, .filter-row button,
  .segmented button, .world-selector button, .site-header nav a) {
  --edge: #345d9a;
  --edge-light: #8bbfff;
  --face-top: #172438;
  --face-bottom: #090e18;
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #e8f2ff;
  min-height: 46px;
  font-family: 'Agency FB', 'Hunter Reader Narrow', sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: .65px;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: none;
  transition: filter .18s ease, transform .18s ease, color .18s ease;
}

:is(.button, .chapter-action, .quiet-button, .menu-toggle, .dialog-close,
  .shelf-controls button, .sample-toolbar button, .filter-row button,
  .segmented button, .world-selector button, .site-header nav a)::before,
:is(.button, .chapter-action, .quiet-button, .menu-toggle, .dialog-close,
  .shelf-controls button, .sample-toolbar button, .filter-row button,
  .segmented button, .world-selector button, .site-header nav a)::after {
  content: '';
  position: absolute;
  pointer-events: none;
  clip-path: var(--control-shape);
}

:is(.button, .chapter-action, .quiet-button, .menu-toggle, .dialog-close,
  .shelf-controls button, .sample-toolbar button, .filter-row button,
  .segmented button, .world-selector button, .site-header nav a)::before {
  z-index: -2;
  inset: 0;
  background: linear-gradient(140deg, var(--edge-light), var(--edge) 32%, #142238 64%, var(--edge-light));
}

:is(.button, .chapter-action, .quiet-button, .menu-toggle, .dialog-close,
  .shelf-controls button, .sample-toolbar button, .filter-row button,
  .segmented button, .world-selector button, .site-header nav a)::after {
  z-index: -1;
  inset: 2px;
  background: linear-gradient(115deg, #ffffff07 0, transparent 42%, #ffffff04 56%, transparent 58%),
    linear-gradient(180deg, var(--face-top), var(--face-bottom) 70%);
  box-shadow: inset 0 0 0 1px #9cc7ff25, inset 0 3px 0 #ffffff08, inset 0 -3px 0 #0007;
}

:root .button { padding: 15px 23px; gap: 24px; }
:root .button.primary {
  --edge: #ad1d36;
  --edge-light: #ff6278;
  --face-top: #691025;
  --face-bottom: #270711;
  filter: drop-shadow(0 0 6px #d7263d20);
}
:root .button.secondary { --face-top: #101d30; --face-bottom: #070c14; }
:root #hero-read {
  --edge: #3d6dff;
  --edge-light: #a1cbff;
  --face-top: #1d3e9a;
  --face-bottom: #08163f;
  filter: drop-shadow(0 0 8px #3d6dff38);
}
:root :is(.product-buttons, .dialog-actions, .format-option) a[href*="mixam.com"] {
  --edge: #a72c42;
  --edge-light: #ee7582;
  --face-top: #28121b;
  --face-bottom: #10080d;
}
:root :is(.product-buttons, .dialog-actions, .format-option, .feature-actions, .novel-start-panel) .button,
:root .comic-reader .dialog-actions .button { font-size: 17px; }
.button span { color: #dceaff; font-size: 21px; }

@media (hover: hover) {
  :root :is(.button, .chapter-action, .quiet-button, .menu-toggle, .dialog-close,
    .shelf-controls button, .sample-toolbar button, .filter-row button,
    .segmented button, .world-selector button, .site-header nav a):not(:disabled):hover {
    --edge: #3d6dff;
    --edge-light: #c0dfff;
    --face-top: #234eab;
    --face-bottom: #091b48;
    color: #fff;
    filter: drop-shadow(0 0 8px #3d6dff60);
    transform: translateY(-1px);
  }
  :root .button.primary:not(:disabled):hover,
  :root :is(.product-buttons, .dialog-actions, .format-option) a[href*="mixam.com"]:hover {
    --edge: #ff3b3b;
    --edge-light: #ffc2c9;
    --face-top: #a51a33;
    --face-bottom: #3b0915;
    filter: drop-shadow(0 0 8px #d7263d66);
  }
  :root #hero-read:hover { --face-top: #2e5ee2; --face-bottom: #0b2064; filter: drop-shadow(0 0 10px #3d6dff66); }
}
:root :is(.button, .chapter-action, .quiet-button, .menu-toggle, .dialog-close,
  .shelf-controls button, .sample-toolbar button, .filter-row button,
  .segmented button, .world-selector button, .site-header nav a):not(:disabled):active {
  --face-top: #091326;
  --face-bottom: #11213b;
  transform: translateY(1px);
  filter: none;
}
:root .button.primary:not(:disabled):active { --face-top: #23070e; --face-bottom: #4b0d1b; }
:root :is(.sample-toolbar button, .shelf-controls button):disabled {
  --edge: #293247;
  --edge-light: #414d63;
  --face-top: #10131c;
  --face-bottom: #080a10;
  color: #768197;
  opacity: .65;
  filter: none;
  transform: none;
}
:is(button, a, summary, input):focus-visible { outline: 2px solid #d8ecff; outline-offset: 4px; }

/* Compact console tabs and navigation. */
.site-header {
  background: linear-gradient(180deg, #151821fa, #0b0b0ff7);
  border-bottom: 1px solid #3d6dff66;
  box-shadow: 0 2px 18px #071a503d;
  gap: 18px;
}
.site-header nav { gap: 6px; }
:root .site-header nav a { padding: 12px 13px; display: flex; align-items: center; justify-content: center; --edge: #2e3a51; --edge-light: #526079; }
:root .site-header nav a[aria-current=page],
:root :is(.filter-row, .segmented) button[aria-pressed=true],
:root .world-selector button[aria-pressed=true] {
  --edge: #3d6dff;
  --edge-light: #8fc4ff;
  --face-top: #183b86;
  --face-bottom: #09152d;
  background: transparent;
  border: 0;
  color: #fff;
  filter: drop-shadow(0 0 5px #3d6dff35);
}
:root .filter-row button, :root .segmented button { padding: 12px 18px; }
:root .world-selector button { padding: 20px; }
.world-selector button span { font-family: 'Agency FB', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: .35px; }
.filter-row, .segmented { gap: 7px; }
.menu-toggle svg, .dialog-close svg { display: block; width: 20px; height: 20px; flex-shrink: 0; }
.menu-toggle svg path { transition: opacity .15s ease; }
.menu-toggle[aria-expanded=true] .menu-bars { opacity: 0; }
.menu-toggle .menu-cross { opacity: 0; }
.menu-toggle[aria-expanded=true] .menu-cross { opacity: 1; }
:root .dialog-close { display: grid; place-items: center; padding: 0; width: 46px; height: 46px; }
:root .shelf-controls button { display: grid; place-items: center; width: 46px; height: 46px; font-family: Arial, sans-serif; }
.shelf-controls button::before, .shelf-controls button::after { clip-path: none; border-radius: 50%; }

/* Graphite surfaces, restrained edge lighting, and frame corner details. */
:is(.route-result, .explore-card, .cast-card, .product-card, .world-panel,
  .feature-layout, .collection-paths a, .fulfillment-note, .novel-start-panel) {
  position: relative;
  background: linear-gradient(135deg, #1b2230, #151821 55%, #0d1018);
  border: 1px solid #4b648a66;
  box-shadow: inset 0 1px 0 #e2efff0b, 0 12px 30px #0002;
}
:is(.route-result, .explore-card, .cast-card, .product-card, .world-panel,
  .feature-layout, .collection-paths a, .fulfillment-note, .novel-start-panel)::after {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 23px;
  height: 23px;
  border-top: 2px solid #5ea8ff;
  border-right: 2px solid #5ea8ff;
  pointer-events: none;
  opacity: .75;
}
.product-art-button { background: radial-gradient(ellipse at top, #1c2b46, #0c0f17 85%); }
.cast-portrait { border-bottom-color: #5c7ca866; }
.cast-copy .role, .product-copy .eyebrow, .edition-strip, .chapter-row .chapter-meta { color: #9ac5fc; }
.cast-card:hover, .explore-card:hover, .collection-paths a:hover { background: linear-gradient(135deg, #202f48, #151b29 60%, #0d1320); border-color: #5ea8ffb3; }
.product-card:focus-within { border-color: #84b6fa; }
.route-options button { position: relative; background: linear-gradient(110deg, #151821, #0c1018); border: 1px solid #3f527166; box-shadow: inset 0 1px 0 #fff06; }
.route-options button[aria-pressed=true] { background: linear-gradient(110deg, #172b50, #101721); border-color: #5ea8ff; box-shadow: inset 3px 0 0 #3d6dff, 0 0 14px #3d6dff16; }
.route-options button:hover { background: linear-gradient(110deg, #1c2e4d, #121a29); }
.route-number { color: #8bbfff; }
.route-result .path-steps span { border-color: #5d87c16b; background: #07101d55; }
.explore-link { border-top-color: #638bc044; }
.novel-start-panel { box-shadow: inset 3px 0 0 #3d6dff; }
.gentle-note { background: #151821; border-color: #3d6dff; }
.closing { background: radial-gradient(ellipse at center top, #152b50, #10151f 65%); border-color: #395c9366; }
.ticker { background: #10151f; border-color: #395c9366; }
.section-heading .eyebrow, .page-intro > .eyebrow { color: #8bbfff; }
.chapter-row { background: linear-gradient(100deg, #151821aa, #0c101899); border: 1px solid #4b648a44; padding: 23px 20px; margin-bottom: 12px; }
.chapter-row:hover { border-color: #577fa677; }
.chapter-number { color: #8bbfff; }
:root .chapter-row .chapter-action { padding: 12px 18px; font-size: 16px; }
.search-label { color: #aab3c5; }
.search-label input {
  background-color: #10151f;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239ac5fc' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m16 16 5 5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 13px center;
  border-color: #5a79a35c;
  padding-left: 42px;
  box-shadow: inset 0 2px 5px #0004;
}
.search-label input:focus { border-color: #5ea8ff; }
dialog { background: #111722; border-color: #5a88ca; box-shadow: 0 25px 80px #000c, 0 0 24px #3d6dff16; }
.dialog-top { padding-bottom: 15px; border-bottom: 1px solid #5275a43d; }
.sample-toolbar { background: #111722f5; }
:root .sample-toolbar button { padding: 10px 17px; font-size: 16px; }
.comic-page-window { border-color: #547ca277; }
.digital-status { border-color: #617da144; }
.footer-bottom { position: relative; border-color: #45658c66; }
.footer-bottom::before { content: ''; width: 62px; height: 3px; position: absolute; top: -2px; right: 0; background: repeating-linear-gradient(125deg, #3d6dff 0 3px, transparent 3px 6px); }

@media (min-width: 701px) and (max-width: 1100px) {
  .site-header { padding-inline: 3%; gap: 12px; }
  .site-header nav { gap: 3px; }
  :root .site-header nav a { padding: 11px 9px; font-size: 15px; }
  .private { font-size: 7px; letter-spacing: .4px; }
}
@media (max-width: 700px) {
  .site-header { padding-inline: 22px; gap: 12px; }
  .site-header nav { background: #10151ffb; padding: 18px 22px; border-bottom: 1px solid #3d6dff66; gap: 8px; }
  .site-header nav.open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root .site-header nav a { min-width: 0; min-height: 48px; padding: 12px 16px; font-size: 18px; justify-content: flex-start; }
  :root .menu-toggle { padding: 10px 15px; gap: 12px; font-size: 17px; }
  :root .button { padding: 15px 20px; font-size: 18px; }
  :root :is(.product-buttons, .dialog-actions, .format-option, .feature-actions, .novel-start-panel) .button,
  :root .comic-reader .dialog-actions .button { font-size: 17px; }
  :root .filter-row button, :root .segmented button { padding: 12px 14px; font-size: 16px; min-width: 0; }
  .collection-toolbar .filter-row { gap: 7px; }
  .segmented { gap: 6px; }
  :root .world-selector button { padding: 15px 13px; gap: 10px; }
  .world-selector button span { font-size: 19px; }
  .chapter-row { padding: 20px 14px; gap: 12px; }
  :root .chapter-row .chapter-action { white-space: normal; }
  :root .sample-toolbar button { padding: 11px 13px; font-size: 16px; }
  .sample-toolbar span { font-size: 10px; }
  :root .quiet-button { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  :root :is(.button, .chapter-action, .quiet-button, .menu-toggle, .dialog-close,
    .shelf-controls button, .sample-toolbar button, .filter-row button,
    .segmented button, .world-selector button, .site-header nav a) { transition: none; transform: none; }
}