/* inter-300 - latin_latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    src: url('fonts/inter-v20-latin_latin-ext-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-300italic - latin_latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: italic;
    font-weight: 300;
    src: url('fonts/inter-v20-latin_latin-ext-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-regular - latin_latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/inter-v20-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-italic - latin_latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: italic;
    font-weight: 400;
    src: url('fonts/inter-v20-latin_latin-ext-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-500 - latin_latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    src: url('fonts/inter-v20-latin_latin-ext-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-500italic - latin_latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: italic;
    font-weight: 500;
    src: url('fonts/inter-v20-latin_latin-ext-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-600 - latin_latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    src: url('fonts/inter-v20-latin_latin-ext-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-600italic - latin_latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: italic;
    font-weight: 600;
    src: url('fonts/inter-v20-latin_latin-ext-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-700 - latin_latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/inter-v20-latin_latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-700italic - latin_latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: italic;
    font-weight: 700;
    src: url('fonts/inter-v20-latin_latin-ext-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
    --nav-height: 60px;

    --bg-page: #000b7a;
    --bg-panel: #f0eefc;

    --topbar-bg: black;
    --bg-button: black;

    --ink-main: #111322;
    --ink-muted: #323654;
    --ink-on-dark: #f7f7ff;

    --accent: #1e1b4b;
    --accent-soft: rgba(30,27,75,0.12);
    --border-soft: rgba(0,0,0,0.18);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.2rem;
    background: var(--bg-page);
    color: var(--ink-main);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ---------- Top navigation bar (centered title) ---------- */

header.topbar {
    position: sticky;
    top: 0;
    height: 60px;
    z-index: 100;
    height: var(--nav-height);
    background: var(--topbar-bg);
    color: var(--ink-on-dark);
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* left / center / right */
    align-items: center;
    padding: 0 1.5rem;
    font-size: 1.2rem;
    letter-spacing: 0.03em;
}

.nav-left {
    justify-self: start;
    white-space: nowrap;
}

.nav-center {
    justify-self: center;
    /* NEW: make it a positioning context and a fixed-ish width strip */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;  /* centers the title */
    min-width: 600px;         /* adjust as needed */
}

.nav-right {
    justify-self: end;
    white-space: nowrap;
    text-align: right;
}

.brand {
    /* Reset native button styles */
    background: none;
    border: none;
    padding: 0;
    margin: 0;

    /* Restore anchor-like appearance */
    font: inherit;
    font-weight: inherit;
    color: inherit;
    text-decoration: none;

    /* Interaction */
    cursor: pointer;
    opacity: 0.9;

    /* Prevent text selection quirks */
    white-space: nowrap;
}

.brand:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.7);
    outline-offset: 3px;
    border-radius: 6px;
}

.brand:hover {
    opacity: 1;
}

/* ---------- Playing mode: simplify layout ---------- */

/* Hide prev/next + page indicator */

header.topbar.playing .nav-arrow,
header.topbar.playing .page-indicator {
    display: none;      /* these can disappear completely */
}

/* Close (X) button – hidden by default, shown in play mode */
.close-play-btn {
    display: none; /* default: hidden unless playing */
    border: none;
    background: transparent;
    color: inherit;
    font-size: 1.9rem;
    font-weight: 400;
    line-height: 1;
    padding: 0 0.5rem 0 0.75rem; /* some space before the X */
    cursor: pointer;
}

.close-play-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* When playing, show the close button */
header.topbar.playing .close-play-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Fullscreen (maximize) button – hidden by default, shown in play mode */
.fullscreen-toggle-btn {
    display: none; /* default: hidden unless playing */
    border: none;
    background: transparent;
    color: inherit;
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1;
    padding: 0 0.5rem 0 0.75rem; /* some space before the X */
    cursor: pointer;
    transform: translateY(-4px); /* Line up with close button */
}

.fullscreen-toggle-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* When playing, show the fullscreen button too */
header.topbar.playing .fullscreen-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Hide maximize button when already in fullscreen */
:fullscreen header.topbar.playing .fullscreen-toggle-btn {
    display: none !important;
}

.nav-title {
    font-weight: 600;
    text-align: center;
    max-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 1rem; /* Padding at edges for Prev/Next arrows */
}

/* Make the center title behave like a button (without changing its look) */
.nav-title-btn {
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 0 1rem; /* keep your existing nav-title padding feel */
}

/* subtle caret */
.nav-title-btn::after {
    content: " ▾";
    opacity: 0.85;
    font-weight: 400;
}

/* hide caret in play mode */
header.topbar.playing .nav-title-btn::after {
    content: "";
}

/* Focus style for keyboard users */
.nav-title-btn:focus-visible {
    outline: 2px solid rgba(255,255,255,0.7);
    outline-offset: 3px;
    border-radius: 6px;
}

/*.nav-title-btn[aria-expanded="true"] {*/
/*    text-decoration: underline;*/
/*    text-underline-offset: 0.25em;*/
/*}*/

/* Disable the dropdown trigger in play mode */
header.topbar.playing .nav-title-btn {
    cursor: default;
    pointer-events: none;
}

.jump-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: min(520px, 90vw);
    max-height: 100vh;
    overflow: auto;

    background: #000; /* match top bar */
    color: var(--ink-on-dark);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    box-shadow: 0 18px 48px rgba(0,0,0,0.65);
    padding: 0.35rem;
    z-index: 500;
}

.jump-menu-item {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    font: inherit;
    color: var(--ink-on-dark);

    padding: 0.55rem 0.65rem;
    border-radius: 8px;
    cursor: pointer;
}

.jump-menu-item:hover {
    background: rgba(255,255,255,0.10);
}

.jump-menu-item:focus-visible {
    outline: 2px solid rgba(255,255,255,0.4);
    outline-offset: 2px;
}

.jump-menu-item .jump-num {
    width: 2.2rem;              /* fixed number column */
    text-align: right;          /* numbers align on the right edge */
    opacity: 0.55;

    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    flex: 0 0 auto;
}

.jump-menu-item .jump-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jump-menu-item.current {
    background: rgba(255,255,255,0.16);
}

.page-indicator {
    opacity: 0.85;
}

.nav-arrow {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    color: var(--ink-on-dark);
    font: inherit;
    cursor: pointer;
    opacity: 0.85;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    white-space: nowrap;
    transition: opacity 0.15s ease, transform 0.12s ease;
    position: absolute;
}

.nav-arrow:hover:not(:disabled) {
    opacity: 1;
    transform: translateY(-1px);
}

.nav-arrow:disabled {
    opacity: 0.35;
    cursor: default;
    transform: none;
}

#prevBtn {
    left: 0;
}

#nextBtn {
    right: 0;
}

/* ---------- Views ---------- */

main {
    flex: 1 1 auto;
}

.hidden {
    display: none !important;
}

/* Cover view: background image, centered blocks */
#coverView {
    min-height: calc(100vh - var(--nav-height));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 60px; /* breathing room at sides */
    background-color: rgba(255, 255, 255, 0.8); /* Adjust background image lightness/opacity/transparency. Because this is an overlay, higher value = more transparent background. */
    background-blend-mode: lighten;
}

.cover-inner {
    margin: 0 auto;      /* centers block in viewport */
    width: 100%;
    max-width: 1920px;
}

/* ---------- GAME LAYOUT ---------- */

.cover-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
}

@media (min-width: 880px) {
    .cover-grid {
        grid-template-columns: minmax(0, 50%) minmax(0, 50%);
    }
}

/* Left: cover image */

.cover-image-frame {
    padding: 0;     /* Change padding if you want a frame around the cover image. */
    display: flex;
    align-items: center;
    justify-content: center;
}

.cover-image-frame img {
    width: 100%;
    max-width: 5000px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    margin-left: auto;
    margin-bottom: auto;
    box-shadow: 0 12px 28px rgba(5, 5, 39, 0.7);
}

/* Right: metadata column */

.meta-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.25rem 1.75rem;
    /*background: rgba(255,255,255,0.5);*/
    /*box-shadow: 0 8px 22px rgba(5, 5, 39, 0.45);*/
}

.meta-header {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.meta-title {
    line-height: 1.1;
    font-weight: 700;
    margin: 0;
    color: #151320;
}

.meta-artist {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--ink-muted);
}

.meta-contrib-type {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
    margin-top: 0.2rem;
}

.meta-location {
    color: var(--ink-muted);
}

.play-button-row {
    margin-top: 0.4rem;
}

.btn-primary {
    background: var(--bg-button);
    font-size: 1.2rem;
    color: var(--ink-on-dark);
    border: none;
    padding: 0.7rem 1.5rem;
    border-radius: 3px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(5, 5, 39, 0.4);
    transition: transform 0.12s ease, box-shadow 0.12s ease,
    background 0.15s ease;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(5, 5, 39, 0.6);
}

.sections {
    display: block; /* Can change this to 'grid' if we want to show this info in multiple columns */
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem 2rem;
}

@media (min-width: 720px) {
    .sections {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr);
    }
}

.section-block {
    margin-bottom: 1em;
}

.section-block p {
    margin-top: 0;
}

.section-title {
    font-weight: 700;
    margin-bottom: 0.2rem;
    color: var(--ink-main);
}

.section-body {
    color: var(--ink-muted);
    line-height: 1.5;
}

.statement-block {
    grid-column: 1 / -1;
}

.statement-body {
}

/* Page/Game-specific adjustments */
.page-lessons #coverView {
    background-color: rgba(255, 255, 255, 0.9);
}

.page-vincent #coverView {
    background-color: rgba(255, 255, 255, 0.9);
}

.page-asunder #coverView {
    background-color: rgba(255, 255, 255, 0.9);
}

.page-snakisms #coverView {
    background-color: rgba(255, 255, 255, 0.9);
}

.page-snakisms h1#metaTitle {
    font-size: 1.8em;
}

.page-gambit #coverView {
    background-color: rgba(255, 255, 255, 0.9);
}

.page-look-of-glass #coverView {
    background-color: rgba(255, 255, 255, 0.95);
}

.page-tropic #coverView {
    background-color: rgba(255, 255, 255, 0.9);
}

.page-terminadas #coverView {
    background-color: rgba(255, 255, 255, 0.6);
}

/* ---------- TEXT LAYOUT ---------- */

.text-layout {
    /* same outer width as game layout */
    max-width: 1800px;
    margin: 0 auto;
    color: var(--ink-main);
}

/* CONTENTS: allow the container to shrink to viewport width */
#textLayoutContents {
    max-width: none;
    width: 100%;
}

.text-layout h2 {
    font-size: 1em;
    margin: 0;
}

.text-layout h3 {
    font-size: 1em;
    margin: 0;
}

.text-layout p {
    margin-top: 0;
}

.text-layout ul {
    margin-top: 0;
}

.text-title {
    margin: 0 0 1.5rem 0;
    font-size: 2.4rem;
    font-weight: 700;
}

.text-columns {
    column-count: 4;
    column-gap: 2rem;
    line-height: 1.6;
}

@media (max-width: 1200px) {
    .text-columns {
        column-count: 3;
    }
}

@media (max-width: 900px) {
    .text-columns {
        column-count: 2;
    }
}

@media (max-width: 600px) {
    .text-columns {
        column-count: 1;
    }
}

/* ABOUT PAGE: manual 4-column layout using CSS Grid */
#textLayoutAbout #textContent {
    /* turn off auto-flow columns on this page */
    column-count: 1;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 2rem;   /* horizontal gap between columns */
    row-gap: 0;         /* vertical gap if you want it */
}

#textLayoutAbout ul {
    padding: 0;
    list-style-type: none;
}

/* Optional: basic column styling */
#textLayoutAbout #textContent > div {
    /* ensures each of your column1/2/3/4 blocks stays together */
    break-inside: avoid;
}

/* Responsive tweaks so it doesn’t crush on narrow screens */
@media (max-width: 1200px) {
    #textLayoutAbout #textContent {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    #textLayoutAbout #textContent {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    #textLayoutAbout #textContent {
        grid-template-columns: 1fr;
    }
}

/* CONTENTS PAGE: 3-column layout for table of contents */
#textLayoutContents #textContent {
    column-count: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 2rem;
    row-gap: 0;
    width: 100%;
}

/* Each child is one logical column: intro, games, games, final */
#textLayoutContents .toc-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    break-inside: avoid;
    min-width: 0;
}

/* Base TOC item box */
#textLayoutContents .toc-item {
    padding: 0.15rem 0;
}

#textLayoutContents .toc-item.toc-clickable {
    cursor: pointer;
    border-radius: 4px;
}

#textLayoutContents .toc-item.toc-clickable:hover {
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.25); /* fake extra padding without layout shift */
}

#textLayoutContents .toc-item.toc-clickable:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.35);
    outline-offset: 3px;
}

/* TOC title row with dotted leader + page number */
#textLayoutContents .toc-title {
    display: flex;
    align-items: baseline;
    font-size: 1.5rem;
    font-weight: 600;
    gap: 0.25rem;
    min-width: 0;          /* allow row to shrink within its grid column */
}

#textLayoutContents .toc-title-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;        /* allow the text to shrink */
    min-width: 0;          /* required for ellipsis inside flex layouts */
}

#textLayoutContents .toc-dots {
    flex: 1 1 auto;
    border-bottom: 1px dotted rgba(50, 54, 84, 0.5);
    margin-bottom: 0.15em; /* lines up with text baseline */
}

#textLayoutContents .toc-page {
    flex: 0 0 auto;
    font-size: 0.9em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Author line (only used on game entries) */
#textLayoutContents .toc-author {
    font-size: 1.2rem;
    color: var(--ink-muted);
    margin-top: 0.1rem;
}

/* Game entries: image on the left, text on the right */
#textLayoutContents .toc-item-game {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

#textLayoutContents .toc-item-text {
    height: 62px;   /* We want two text TOC items to exactly match the height of one game item. */
                    /* So half the height of a game entry (140px) - half of #textLayoutContents .toc-column gap (which is 1rem = 16px). So 140px/2 - 8px = 62px */
}

/* Small cover thumbnail */
#textLayoutContents .toc-item-game .toc-cover {
    width: 140px;          /* cover size */
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 2px;
    border: 1px solid black;
}

/* Stack title + author vertically next to the image,
   and let this block fill all space to the right of the cover */
#textLayoutContents .toc-item-game .toc-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;          /* key: let this flex item shrink inside the column */
}

/* Responsive tweaks */
@media (max-width: 1400px) {
    #textLayoutContents #textContent {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    #textLayoutContents #textContent {
        grid-template-columns: 1fr;
    }
}

/* Colophon PAGE: manual 4-column layout using CSS Grid */
.page-CreditsColophon #textContent {
    /* turn off auto-flow columns on this page */
    column-count: 1;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 2rem;   /* horizontal gap between columns */
    row-gap: 0;         /* vertical gap if you want it */
}

.page-CreditsColophon img {
    width: 95%;
    margin-top: 0.3em;
}

/* Responsive tweaks so it doesn’t crush on narrow screens */
@media (max-width: 1200px) {
    .page-CreditsColophon #textContent {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .page-CreditsColophon #textContent {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .page-CreditsColophon #textContent {
        grid-template-columns: 1fr;
    }
}

/* FOREWORD PAGE */
.page-Foreword #textContent {
    text-align: justify;
    word-break: break-word;
    hyphens: auto;
}

.page-Foreword #textContent p {
    margin: 0;              /* no paragraph spacing */
    text-indent: 1.5em;
}

.page-Foreword #textContent p:first-of-type {
    text-indent: 0;
}

.page-Foreword #textContent p.no-indent {
    text-indent: 0;
    text-align: right;
}

/* NOTES PAGE */
.page-Notes #textContent div.game {
    break-inside: avoid;
}

.page-Notes #textContent h2 {
    font-size: 1.5rem;
    font-style: italic;
}

.page-Notes #textContent h3 {
    font-size: 1.2rem;
}

.page-Notes #textContent p {
    font-size: 1.2rem;
}


/* ---------- Play view ---------- */

#playView {
    height: calc(100vh - var(--nav-height));
    background: #050617;
}

#playView iframe {
    border: none;
    width: 100%;
    height: 100%;
    display: block;
    background: #000;
}

/* ---------- Landing cover ---------- */

#landingCover {
    min-height: 100vh;
    display: flex;
    flex-direction: column;      /* ⬅ stack cover + warning vertically */
    align-items: center;
    justify-content: center;
    background: var(--bg-page);
}

.landing-cover-button {
    border: none;
    padding: 0;
    background: none;
    cursor: pointer;
}

.landing-cover-image {
    max-height: 75vh;      /* or whatever looks right */
    max-width: 75vw;
    width: auto;           /* scales on small screens */
    height: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.landing-cover-button:hover .landing-cover-image,
.landing-cover-button:focus-visible .landing-cover-image {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 28px 80px rgba(0,0,0,0.9);
}

.fullscreen-warning {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 300;
    color: #e100e6; /* bright pink */
    margin-top: 2rem;
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none; /* Does not interfere with clicking the cover */
    z-index: 900;
}

#enterMagazineBtn:hover + #fullscreenWarning {
    opacity: 1;
}

/* Show fullscreen warning on keyboard focus as well */
#enterMagazineBtn:focus-visible + #fullscreenWarning {
    opacity: 1;
}

/* --- Responsive topbar adjustments --- */

/* Narrow screens:
   - Hide magazine title (left)
   - Hide page indicator (right)
   - Keep page title + prev/next buttons
   - Align Previous fully left and Next fully right
*/
/* --- Responsive topbar adjustments (FINAL VERSION) --- */

@media (max-width: 1000px) {

    /* Reduce padding for narrow screens */
    header.topbar {
        padding-inline: 0.75rem;
    }

    /* ---------------------------------------------------
       NORMAL BROWSING MODE (NOT .playing)
       --------------------------------------------------- */

    /* Collapse header to a single center column */
    header.topbar:not(.playing) {
        grid-template-columns: 1fr;
    }

    header.topbar:not(.playing) .nav-left,
    header.topbar:not(.playing) .nav-right {
        display: none; /* hide magazine title + page indicator */
    }

    /* Center region becomes full-width flexible bar */
    header.topbar:not(.playing) .nav-center {
        display: flex;
        align-items: center;
        justify-content: space-between;  /* prev left, next right */
        width: 100%;
        min-width: 0;
        max-width: none;
        margin: 0;
    }

    /* Arrows are inline rather than absolutely positioned */
    header.topbar:not(.playing) .nav-arrow {
        position: static;
        flex-shrink: 0;
    }

    /* Title stays centered even when arrows exist */
    header.topbar:not(.playing) .nav-title {
        flex: 1 1 auto;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding: 0 0.5rem;
    }

    /* ---------------------------------------------------
       PLAYING MODE
       ---------------------------------------------------
       We KEEP the grid layout (so the title stays centered),
       but let it shrink naturally on small screens.
       --------------------------------------------------- */

    header.topbar.playing {
        grid-template-columns: 1fr auto 1fr; /* same layout, shrinks evenly */
    }

    /* nav-left is hidden but still occupies its column */
    header.topbar.playing .nav-left {
        visibility: hidden;
    }

    /* arrows + page indicator disappear */
    header.topbar.playing .nav-arrow,
    header.topbar.playing .page-indicator {
        display: none;
    }

    /* Important: let the center region shrink properly */
    header.topbar.playing .nav-center {
        min-width: 0;
        max-width: 100%;
        width: 100%;
    }

    /* Title stays centered and allowed to shrink */
    header.topbar.playing .nav-title {
        max-width: 100%;
        padding: 0 0.5rem;
    }

    /* Right-side icons should not push layout too wide */
    header.topbar.playing .nav-right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        min-width: 0;
    }

    header.topbar.playing .fullscreen-toggle-btn,
    header.topbar.playing .close-play-btn {
        flex-shrink: 0; /* prevent squish */
    }

    header.topbar.playing .fullscreen-toggle-btn {
        transform: translateY(-1px); /* Line up with close button */
    }
}