/* Reset and base styles */
:root {
    --ink: #f8fbff;
    --muted: #c5d2e8;
    --stage-deep: #101b2f;
    --stage: #17253f;
    --stage-light: #263b61;
    --panel: rgba(22, 30, 48, 0.92);
    --panel-strong: rgba(18, 25, 41, 0.96);
    --panel-border: rgba(255, 255, 255, 0.16);
    --accent: #4fb7ff;
    --accent-strong: #2f8cff;
    --accent-warm: #ffbf5f;
    --accent-coral: #ff6f61;
    --accent-mint: #7edfc7;
    --shadow-lg: 0 26px 70px rgba(0, 0, 0, 0.38);
    --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.28);
    /* Bundled brand font so the title looks identical on every platform */
    --font-display: "Fredoka", "Avenir Next", "Trebuchet MS", "Segoe UI", sans-serif;
}

/* Fredoka (SIL OFL) — vendored under fonts/, see fonts/LICENSE.txt */
@font-face {
    font-family: "Fredoka";
    src: url("fonts/fredoka-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Fredoka";
    src: url("fonts/fredoka-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Fredoka";
    src: url("fonts/fredoka-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Avenir Next", "Nunito Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--stage-deep);
    color: var(--ink);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    font-kerning: normal;
}

.hidden {
    display: none !important;
}

/* App container */
#app-container {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(150deg, rgba(126, 223, 199, 0.16) 0%, transparent 28%),
        linear-gradient(218deg, rgba(255, 111, 97, 0.13) 0%, transparent 24%),
        linear-gradient(180deg, var(--stage-light) 0%, var(--stage) 44%, var(--stage-deep) 100%);
}

#app-container::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 42px 42px;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent 78%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent 78%);
}

/* Soft "footlight" glow pooling at the bottom center (no hard edge/seam) */
#app-container::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -150px;
    z-index: 0;
    width: min(1100px, 92vw);
    height: 360px;
    transform: translateX(-50%);
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(60% 70% at 50% 26%,
        rgba(79, 183, 255, 0.20) 0%,
        rgba(126, 223, 199, 0.09) 42%,
        rgba(126, 223, 199, 0) 72%);
    filter: blur(26px);
    opacity: 0.85;
}

#app-container > * {
    position: relative;
    z-index: 1;
}

/* Welcome screen */
#welcome-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    text-align: center;
    padding: 48px 24px;
    gap: 22px;
}

#welcome-screen h1 {
    max-width: 860px;
    font-family: var(--font-display);
    font-size: 4.25rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #ffffff;
    text-wrap: balance;
    text-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
}

#welcome-screen p {
    max-width: 680px;
    font-size: 1.12rem;
    line-height: 1.6;
    color: var(--muted);
    margin-bottom: 6px;
}

.creator-credit {
    font-size: 0.95rem;
    line-height: 1.3;
    color: rgba(248, 251, 255, 0.74);
    margin-top: -12px;
}

.creator-credit a {
    color: #ffffff;
    font-weight: 800;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 191, 95, 0.7);
}

.creator-credit a:hover {
    color: var(--accent-warm);
    border-bottom-color: currentColor;
}

#welcome-screen kbd {
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-bottom-color: rgba(255, 255, 255, 0.35);
    border-radius: 6px;
    padding: 2px 8px;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.9em;
    color: #ffffff;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
}

.welcome-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    max-width: min(680px, 100%);
}

.welcome-scene {
    position: relative;
    width: 180px;
    height: 122px;
    margin-bottom: -8px;
}

.brand-mark-host {
    position: relative;
}

/* Inline SVG book mark — fills its host box; the host sets the size */
.brand-mark {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.30));
}

/* Highlight while dragging a PDF over the window */
#app-container.drag-over {
    outline: 4px dashed var(--accent-warm);
    outline-offset: -8px;
}

#app-container.drag-over::before {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 42px 42px;
}

/* Loading screen */
#loading-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    gap: 18px;
}

.spinner {
    width: 58px;
    height: 58px;
    border: 5px solid rgba(255, 255, 255, 0.14);
    border-top-color: var(--accent-warm);
    border-right-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.04);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

#loading-screen p {
    font-size: 1.08rem;
    color: var(--muted);
    font-weight: 600;
}

/* Book container */
#book-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* The book is sized to exact pixel dimensions by renderer.js so it always
   fits the window; the flex container centers it */
#book {
    flex: 0 0 auto;
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.42));
}

/* StPageFlip page styles */
.page {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* object-fit keeps every page true to its own proportions: pages whose
   size differs from the rest of the book (e.g. covers) get letterboxed
   on white instead of being squished or stretched */
.page canvas,
.page img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

/* Page counter now lives in the control bar so it does not reserve separate
   vertical space over the book */
#page-counter {
    flex: 0 0 auto;
    min-width: 72px;
    min-height: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    padding: 7px 10px;
    color: #fff;
}

.page-count {
    font-size: 0.98rem;
    line-height: 1;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

/* Zoom indicator */
#zoom-indicator {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(14, 23, 39, 0.82);
    color: white;
    padding: 10px 20px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    font-size: 1.5rem;
    font-weight: bold;
    z-index: 250;
    backdrop-filter: blur(16px);
    box-shadow: var(--shadow-md);
}

/* Webcam overlay */
#webcam-overlay {
    position: fixed;
    width: 200px;
    height: 200px;
    bottom: 20px;
    right: 20px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.46), 0 0 0 6px rgba(79, 183, 255, 0.14);
    z-index: 200;
    cursor: move;
    background-color: #000;
    overflow: visible; /* Allow resize handle to extend outside */
}

#webcam-overlay.square {
    border-radius: 12px;
}

#webcam-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit; /* Inherit the circle/square shape */
}

/* Clip the video to match the container shape */
#webcam-overlay:not(.square) #webcam-video {
    border-radius: 50%;
}

.resize-handle {
    position: absolute;
    bottom: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    background-color: rgba(255, 255, 255, 0.96);
    border: 2px solid rgba(16, 27, 47, 0.54);
    border-radius: 50%;
    cursor: nwse-resize;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10; /* Ensure it's above the video */
}

.resize-handle:hover {
    background-color: rgba(255, 255, 255, 1);
    transform: scale(1.2);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6);
}

.resize-handle::before {
    content: '⤢';
    font-size: 16px;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1;
}

/* Page navigator */
#page-navigator {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 16, 28, 0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300;
    backdrop-filter: blur(18px);
}

.navigator-content {
    background: var(--panel-strong);
    padding: 30px;
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    max-width: 800px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

.navigator-content h2 {
    font-size: 1.8rem;
    margin-bottom: 20px;
    text-align: center;
}

.page-input-container {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

#page-input {
    flex: 1;
    padding: 10px;
    font-size: 1rem;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    color: #fff;
}

#thumbnails-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
    max-height: 400px;
    overflow-y: auto;
}

.thumbnail {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
    transition: border-color 0.2s, transform 0.2s;
}

.thumbnail:hover {
    border-color: #fff;
    transform: translateY(-2px);
}

.thumbnail.current {
    border-color: var(--accent-warm);
}

.thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

/* Help and About overlays */
#help-overlay,
#about-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 16, 28, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 400;
    backdrop-filter: blur(18px);
}

.help-content,
.about-content {
    background: var(--panel-strong);
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
}

.help-content {
    width: 90%;
    max-width: 900px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.about-content {
    position: relative;
    width: min(420px, calc(100vw - 40px));
    padding: 34px 32px 30px;
    text-align: center;
}

.about-content .help-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
}

.about-mark {
    position: relative;
    width: 98px;
    height: 66px;
    margin: 0 auto 18px;
}

.about-mark .brand-mark {
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.26));
}

.about-content h2 {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: 2rem;
    line-height: 1.05;
    font-weight: 700;
}

.about-credit {
    color: var(--muted);
    font-size: 1rem;
    font-weight: 800;
    margin: 0 0 10px;
}

.about-link-row {
    margin: 0;
}

.about-link-row a,
.help-section-content a {
    color: #ffffff;
    font-weight: 850;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 191, 95, 0.75);
}

.about-link-row a:hover,
.help-section-content a:hover {
    color: var(--accent-warm);
    border-bottom-color: currentColor;
}

.help-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.help-header h2 {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: 0;
    margin: 0;
}

.help-close-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background-color 0.2s;
}

.help-close-btn:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

.help-scroll-container {
    overflow-y: auto;
    padding: 20px 30px;
    flex: 1;
}

/* Help sections - collapsible */
.help-section {
    margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 8px;
    overflow: hidden;
}

.help-section-header {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.08);
    border: none;
    color: #fff;
    padding: 16px 20px;
    font-size: 1.1rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background-color 0.2s;
}

.help-section-header:hover {
    background-color: rgba(255, 255, 255, 0.13);
}

.help-section-icon {
    font-size: 0.9rem;
    display: inline-block;
    width: 16px;
}

.help-section-content {
    padding: 20px;
    background-color: rgba(9, 15, 27, 0.48);
    color: #dce6f8;
    line-height: 1.6;
}

.help-section-content.hidden {
    display: none;
}

.help-section-content h3 {
    color: var(--accent-warm);
    font-size: 1.1rem;
    margin: 16px 0 8px 0;
    font-weight: 500;
}

.help-section-content h3:first-child {
    margin-top: 0;
}

.help-section-content p {
    margin: 8px 0;
}

.help-section-content ul {
    margin: 8px 0;
    padding-left: 24px;
}

.help-section-content li {
    margin: 6px 0;
}

.help-section-content kbd {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 6px;
    padding: 2px 8px;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.9em;
    white-space: nowrap;
}

.help-section-content code {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.9em;
}

/* Shortcut grid */
.shortcut-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px 20px;
    margin: 12px 0;
}

.shortcut-keys {
    text-align: right;
    white-space: nowrap;
}

.shortcut-desc {
    color: #cbd7ec;
}

/* Help footer */
.help-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 0 0 14px 14px;
}

.help-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    color: #cbd7ec;
}

.help-checkbox-label input[type="checkbox"] {
    cursor: pointer;
    width: 18px;
    height: 18px;
}

#help-got-it-btn {
    padding: 10px 24px;
    font-size: 1rem;
}

/* Footer actions: "About" text link sits next to the primary "Got it" button.
   In the web build there is no native menu, so this is how the About overlay is
   reached once the welcome screen is gone. */
.help-footer-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.help-text-link {
    background: none;
    border: none;
    padding: 4px 2px;
    color: #cbd7ec;
    font-family: inherit;
    font-size: 0.95rem;
    cursor: pointer;
    border-bottom: 1px solid transparent;
}

.help-text-link:hover {
    color: #ffffff;
    border-bottom-color: rgba(255, 191, 95, 0.75);
}

/* Control bar */
#control-hover-zone {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    height: 44px;
    z-index: 95;
}

#control-hover-zone::after {
    content: "Controls";
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    padding: 5px 13px 6px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(14, 23, 39, 0.68);
    color: rgba(248, 251, 255, 0.78);
    font-size: 0.68rem;
    font-weight: 850;
    line-height: 1;
    text-transform: uppercase;
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
    transition: opacity 0.2s, transform 0.2s;
}

#control-bar {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translate(-50%, calc(100% + 18px));
    max-width: calc(100vw - 22px);
    background:
        linear-gradient(180deg, rgba(32, 45, 71, 0.94), rgba(14, 23, 39, 0.9));
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 18px;
    display: flex;
    align-items: stretch;
    gap: 8px;
    backdrop-filter: blur(18px);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s, transform 0.22s;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.42);
}

#app-container.controls-peek #control-bar,
#control-hover-zone:hover + #control-bar,
#control-bar:hover,
#control-bar:focus-within {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

#app-container.controls-peek #control-hover-zone::after,
#control-hover-zone:hover::after {
    opacity: 0;
    transform: translate(-50%, 10px);
}

#control-bar button {
    appearance: none;
    color: #fff;
    cursor: pointer;
    font: inherit;
}

.control-btn {
    min-width: 58px;
    min-height: 58px;
    padding: 7px 9px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.07));
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: background-color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.control-btn:hover {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    border-color: rgba(255, 255, 255, 0.24);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 16px rgba(0, 0, 0, 0.18);
}

.control-icon {
    display: block;
    min-height: 25px;
    font-size: 1.34rem;
    line-height: 1;
}

.control-label {
    display: block;
    max-width: 72px;
    overflow: hidden;
    color: rgba(248, 251, 255, 0.76);
    font-size: 0.68rem;
    line-height: 1;
    font-weight: 850;
    letter-spacing: 0;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Active zoom mode button */
#control-bar button.active {
    background:
        linear-gradient(180deg, rgba(79, 183, 255, 0.42), rgba(79, 183, 255, 0.2));
    border: 1px solid rgba(79, 183, 255, 0.86);
}

#control-bar button.active:hover {
    background:
        linear-gradient(180deg, rgba(79, 183, 255, 0.5), rgba(79, 183, 255, 0.28));
}

/* Pulse animation for active zoom button */
#zoom-reset-btn.active {
    animation: zoom-pulse 2s ease-in-out infinite;
}

@keyframes zoom-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(79, 183, 255, 0.7);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(79, 183, 255, 0);
    }
}

/* Display mode button */
#display-mode-btn {
    min-width: 70px;
}

#display-mode-btn .mode-icon {
    font-size: 1.28rem;
}

#display-mode-btn .mode-label {
    font-weight: 850;
}

.control-utility-btn {
    min-width: 54px;
}

body.control-labels-hidden #control-bar {
    gap: 7px;
}

body.control-labels-hidden .control-label {
    display: none;
}

body.control-labels-hidden .control-btn,
body.control-labels-hidden #page-counter {
    min-width: 46px;
    min-height: 46px;
    padding: 8px;
}

body.control-labels-hidden #display-mode-btn {
    min-width: 46px;
}

/* Book container - no max-width constraints */
#book-container {
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease-out;
}

/* Zoom click overlay - captures clicks in zoom mode
   Z-index hierarchy: book(0) < overlay(40) < control-hover-zone(95) <
   control-bar(100) < webcam(200) < zoom-indicator(250) < page-navigator(300) */
#zoom-click-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 40;  /* Above book, below page counter */
    cursor: zoom-in;
}

#zoom-click-overlay.zoomed {
    cursor: zoom-out;
}

/* Zoom mode cursor */
#book-container.zoom-mode {
    cursor: zoom-in;
}

/* When zoomed while in zoom mode */
#book-container.zoom-mode[style*="scale"] {
    cursor: zoom-out;
}

/* Override cursor during page flip */
.stf__wrapper {
    cursor: inherit;
}

/* Pointer mode - large hand cursor */
body.pointer-mode,
body.pointer-mode * {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><text x="8" y="52" font-size="48">👆</text></svg>') 16 0, pointer !important;
}

/* Buttons */
.primary-btn,
.secondary-btn,
#go-to-page-btn {
    padding: 12px 24px;
    font-size: 1rem;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    font-weight: 800;
    letter-spacing: 0;
    min-height: 48px;
}

.primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background:
        linear-gradient(135deg, var(--accent-warm), #ff8d66 46%, var(--accent-coral));
    color: #172034;
    box-shadow: 0 16px 28px rgba(255, 111, 97, 0.22);
}

.primary-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 34px rgba(255, 111, 97, 0.28);
}

.btn-icon {
    font-size: 1.18rem;
    line-height: 1;
}

.secondary-btn,
#go-to-page-btn {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.secondary-btn:hover,
#go-to-page-btn:hover {
    background-color: rgba(255, 255, 255, 0.17);
    border-color: rgba(255, 255, 255, 0.24);
    transform: translateY(-1px);
}

.welcome-buttons .secondary-btn {
    max-width: min(560px, 100%);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#close-navigator-btn {
    width: 100%;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(16, 27, 47, 0.7);
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.26);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.36);
}

button:focus-visible,
input:focus-visible {
    outline: 3px solid rgba(255, 191, 95, 0.74);
    outline-offset: 3px;
}

@media (max-width: 680px) {
    #welcome-screen {
        padding: 28px 16px;
        gap: 18px;
    }

    #welcome-screen h1 {
        font-size: 2.7rem;
    }

    #welcome-screen p {
        font-size: 1rem;
    }

    .welcome-scene {
        width: 150px;
        height: 102px;
    }

    .welcome-buttons {
        flex-direction: column;
        width: min(340px, 100%);
    }

    .primary-btn,
    .secondary-btn {
        width: 100%;
    }

    #control-bar {
        max-width: calc(100vw - 16px);
        overflow-x: auto;
        padding: 9px 10px 11px;
    }

    #control-bar button {
        flex: 0 0 auto;
    }

    .help-footer,
    .page-input-container {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-height: 560px) {
    .welcome-scene {
        display: none;
    }

    #welcome-screen h1 {
        font-size: 2.8rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}