/* The Lakes Log — standing-orders slide deck */

:root {
    --paper: #efe6d4;
    --paper-dark: #e2d4bb;
    --ink: #1b2433;
    --ink-light: #4a5568;
    --green: #1e3a5f;
    --green-dark: #1e3a5f;
    --honey: #b08d57;
    --accent: #8b3a2a;
    --serif: 'Libre Baskerville', Georgia, serif;
    --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    overflow-x: hidden;
    font-family: var(--serif);
    color: var(--ink);
    background: var(--paper);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html {
    scroll-padding-top: max(1rem, env(safe-area-inset-top, 0px));
    scroll-padding-bottom: max(5rem, calc(env(safe-area-inset-bottom, 0px) + 4.5rem));
}

body.log-page::after {
    content: none;
}

.top-nav {
    position: fixed;
    top: max(1rem, env(safe-area-inset-top, 0px));
    right: max(1.5rem, env(safe-area-inset-right, 0px));
    z-index: 100;
}

.top-nav a {
    color: var(--green-dark);
    text-decoration: none;
    font-size: 0.9rem;
    background: rgba(245, 240, 230, 0.9);
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--paper-dark);
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.top-nav a.echo-back {
    font-weight: 700;
    color: var(--accent);
}

.top-nav a:hover { text-decoration: underline; }

.slide-deck {
    position: relative;
}

.slide {
    display: none;
    padding: 3rem 2rem 6rem;
    padding-top: max(3.5rem, calc(env(safe-area-inset-top, 0px) + 3rem));
    padding-bottom: max(6rem, calc(env(safe-area-inset-bottom, 0px) + 5rem));
    background: var(--paper);
}

.slide.active {
    display: block;
    animation: slide-enter 0.35s ease;
}

@keyframes slide-enter {
    from {
        opacity: 0;
        transform: translateX(16px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .slide.active {
        animation: none;
    }
}

.slide-inner {
    max-width: 820px;
    width: 100%;
    border: 2px solid var(--paper-dark);
    padding: 2.5rem 3rem;
    margin: 0 auto;
    background: rgba(255, 252, 245, 0.95);
    box-shadow: 0 4px 24px rgba(61, 46, 31, 0.1);
    position: relative;
    overflow-wrap: anywhere;
}

.slide-inner::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(139, 105, 20, 0.12);
    pointer-events: none;
}

h1, h2, h3 {
    font-family: var(--display);
    color: var(--green-dark);
}

h1 {
    font-size: 2.6rem;
    text-align: center;
    margin: 1rem 0 0.5rem;
}

h2 {
    font-size: 2rem;
    margin: 0 0 1.25rem;
    border-bottom: 2px solid var(--paper-dark);
    padding-bottom: 0.5rem;
}

h3 {
    font-size: 1.2rem;
    margin: 0 0 0.5rem;
}

.subtitle {
    text-align: center;
    font-size: 1.2rem;
    font-style: italic;
    color: var(--ink-light);
    margin: 0;
}

.slide-note {
    text-align: center;
    font-size: 0.8rem;
    color: var(--ink-light);
    margin-top: 2rem;
}

.intro {
    color: var(--ink-light);
    font-size: 0.95rem;
}

/* Title slide — short enough to stay centered in the viewport */
.slide.slide-title.active {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100dvh;
    box-sizing: border-box;
}

.slide-title .slide-inner {
    text-align: center;
    padding-top: 3rem;
}

.title-illustration {
    margin-bottom: 1rem;
}

.title-map-frame {
    display: inline-block;
    padding: 0.75rem;
    background: #fff;
    border: 2px solid var(--paper-dark);
    box-shadow:
        inset 0 0 0 1px rgba(139, 105, 20, 0.15),
        0 3px 12px rgba(61, 46, 31, 0.1);
}

.title-map {
    max-width: 100%;
    height: auto;
    max-height: 280px;
    display: block;
    margin: 0;
    border: none;
}

/* Lists */
.slide-list {
    font-size: 1.1rem;
    line-height: 1.9;
}

.slide-list li { margin-bottom: 0.5rem; }

.slide-inner a:not(.echo-back) {
    color: var(--green-dark);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--green-dark) 35%, transparent);
    text-underline-offset: 0.15em;
}

.slide-inner a:not(.echo-back):hover {
    color: var(--ink);
    text-decoration-color: currentColor;
}

.top-nav a {
    text-decoration: none;
}

.top-nav a:hover { text-decoration: underline; }

/* Path diagram */
.path-diagram {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    margin: 1.5rem 0;
}

.path-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.6rem 0.8rem;
    border: 2px solid var(--paper-dark);
    border-radius: 3px;
    min-width: 72px;
}

.path-step.level-0 { background: #d4e8f4; }
.path-step.level-1 { background: #d0d8dc; }
.path-step.level-2 { background: #c0c8d0; }
.path-step.level-3 { background: #a0a8b0; color: #fff; }
.path-step.level-4 { background: #707880; color: #fff; }
.path-step.level-5 { background: #4a3a38; color: #fff; border-color: #922b21; }

.path-num {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.3rem;
}

.path-name {
    font-size: 0.65rem;
    text-align: center;
}

.path-arrow { color: var(--green); font-size: 0.85rem; }

/* Level slides */
.level-header {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
}

.level-num {
    background: var(--honey);
    border: 2px solid var(--accent);
    padding: 0.2rem 0.75rem;
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.9rem;
}

.slide-level.level-5 .level-num {
    background: var(--honey);
    color: var(--ink);
    border-color: #922b21;
}

.slide-level.level-5 h2 { color: #7a2418; }

.character-note {
    font-size: 0.95rem;
    color: var(--ink-light);
    margin: 0 0 1.25rem;
    text-align: center;
}

.level-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1rem;
}

.level-character-img {
    margin-bottom: 0.5rem;
}

.char-image-frame {
    display: inline-block;
    padding: 0.5rem 0.55rem;
    background: #f7f1e4;
    border: 1px solid rgba(30, 58, 95, 0.28);
    border-radius: 2px;
    box-shadow:
        inset 0 0 0 1px rgba(176, 141, 87, 0.18),
        0 2px 10px rgba(20, 36, 58, 0.1);
    line-height: 0;
}

.slide-char-image {
    max-height: 200px;
    width: auto;
    max-width: 180px;
    display: block;
    margin: 0 auto;
    object-fit: contain;
    background: #f7f1e4;
}

.slide-char-image.small {
    max-height: 110px;
    max-width: 100px;
    margin-bottom: 0.5rem;
}

.level-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 640px) {
    .level-columns { grid-template-columns: 1fr; }
}

.level-columns ul {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.95rem;
}

.official-list { font-size: 0.85rem !important; color: var(--ink-light); }

.story-quote {
    margin: 0;
    padding: 1rem 1.5rem;
    background: var(--paper);
    border-left: 4px solid var(--honey);
    font-style: italic;
    color: var(--ink-light);
}

.slide-level.level-5 .story-quote {
    border-left-color: #922b21;
    background: rgba(255, 252, 247, 0.95);
}

/* Character grid */
.character-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.character-card {
    padding: 1rem;
    background: var(--paper);
    border: 1px solid var(--paper-dark);
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-align: center;
}

.character-card strong {
    font-family: var(--display);
    font-size: 1.1rem;
    color: var(--green-dark);
}

.character-card span {
    font-size: 0.85rem;
    color: var(--ink-light);
}

/* Watch / Warning */
.watch-warning-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

@media (max-width: 640px) {
    .watch-warning-grid { grid-template-columns: 1fr; }
}

.ww-card {
    padding: 1.25rem;
    background: var(--paper);
    border: 2px solid var(--paper-dark);
    border-radius: 3px;
}

.ww-card h3 {
    font-size: 1.5rem;
    margin-top: 0;
}

.analogy { font-size: 0.95rem; }

.official-term {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--green-dark);
    margin-bottom: 0;
}

/* Scene table */
.scene-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    margin-top: 1rem;
}

.scene-table th,
.scene-table td {
    border: 1px solid var(--paper-dark);
    padding: 0.6rem 0.75rem;
    text-align: left;
}

.scene-table th {
    background: var(--paper);
    font-family: var(--display);
    color: var(--green-dark);
}

.scene-table tr:nth-child(even) td { background: rgba(245, 240, 230, 0.5); }

.slide-inner-wide {
    max-width: 52rem;
}

/* Live forecast sample (slide 13) */
.sample-live-forecast {
    margin: 1rem 0 0.75rem;
    font-size: 0.88rem;
    line-height: 1.55;
}

.sample-live-forecast .sample-card {
    background: rgba(255, 252, 245, 0.9);
    border: 1px solid rgba(139, 105, 20, 0.24);
    padding: 1rem 1.15rem;
    margin-bottom: 0.75rem;
    position: relative;
}

.sample-live-forecast .sample-card h3 {
    font-family: var(--display);
    font-size: 1.05rem;
    font-weight: 600;
    font-style: italic;
    margin: 0 0 0.75rem;
    color: var(--green-dark);
}

.sample-hero-card {
    padding-top: 1.35rem;
    border-top: 2px double rgba(139, 105, 20, 0.35);
    border-bottom: 2px double rgba(139, 105, 20, 0.35);
}

.sample-level-badge {
    position: absolute;
    top: -11px;
    left: 1rem;
    background: var(--honey);
    color: var(--ink);
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.72rem;
    padding: 0.15rem 0.65rem;
    border: 2px solid var(--accent);
}

.sample-hero-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: center;
}

.sample-location {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-light);
    margin: 0 0 0.35rem;
}

.sample-level-name {
    font-family: var(--display);
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
    line-height: 1.2;
}

.sample-level-message {
    margin: 0 0 0.45rem;
    font-size: 0.92rem;
}

.sample-story-line {
    color: var(--ink-light);
    margin: 0 0 0.35rem;
    font-size: 0.85rem;
}

.sample-character-role {
    font-size: 0.78rem;
    font-style: italic;
    color: var(--green-dark);
    margin: 0.5rem 0 0;
    padding-left: 0.55rem;
    border-left: 3px solid var(--honey);
}

.sample-hero-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.sample-hero-visual .weather-icon { color: var(--accent); }

.sample-hero-char {
    max-height: 110px;
    width: auto;
}

.sample-day-story {
    font-family: var(--display);
    font-size: 0.92rem;
    line-height: 1.6;
}

.sample-day-story-beat {
    margin: 0 0 0.75rem;
    padding: 0 0 0.75rem;
    border-bottom: 1px dashed rgba(139, 105, 20, 0.22);
}

.sample-day-story-beat:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.sample-day-story-beat strong { color: var(--green-dark); }

.sample-day-story-aside {
    display: block;
    margin-top: 0.3rem;
    font-family: var(--serif);
    font-size: 0.82rem;
    color: var(--ink-light);
    font-style: normal;
}

.sample-day-story-footnote {
    margin: 0.75rem 0 0;
    padding: 0.65rem 0.75rem;
    background: var(--paper);
    border-left: 3px solid var(--honey);
    font-size: 0.82rem;
}

.sample-nws-count {
    margin: -0.35rem 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ink-light);
}

.sample-nws-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.65rem;
}

.sample-nws-chip {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    background: rgba(201, 162, 39, 0.2);
    border: 1px solid var(--paper-dark);
}

.sample-nws-alert {
    padding: 0.65rem 0.75rem;
    background: var(--paper);
    border: 1px solid var(--paper-dark);
}

.sample-nws-badge {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.35rem;
    background: var(--honey);
    margin-bottom: 0.35rem;
}

.sample-nws-event {
    margin: 0 0 0.25rem;
    font-weight: 700;
    font-size: 0.88rem;
}

.sample-nws-headline {
    margin: 0;
    font-size: 0.8rem;
    color: var(--ink-light);
}

.sample-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}

.sample-stat {
    text-align: center;
    padding: 0.5rem 0.35rem;
    background: var(--paper);
    border: 1px solid var(--paper-dark);
}

.sample-stat-value {
    display: block;
    font-family: var(--display);
    font-size: 1.05rem;
    font-weight: 700;
}

.sample-stat-label {
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-light);
}

.sample-condition-desc {
    font-style: italic;
    margin: 0;
    font-size: 0.85rem;
}

.sample-reasons-list {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.8rem;
    color: var(--ink-light);
}

.sample-action-text {
    margin: 0;
    font-size: 0.9rem;
}

.sample-advisor-quote {
    margin: 0.75rem 0 0;
    padding: 0.75rem 0.85rem 0.75rem 1rem;
    background: var(--paper);
    border: 1px solid var(--paper-dark);
    border-left: 4px solid var(--honey);
    font-style: italic;
    line-height: 1.5;
}

.sample-advisor-name {
    font-style: normal;
    font-weight: 700;
    font-family: var(--display);
    color: var(--green-dark);
}

.sample-advisor-verb {
    font-style: normal;
    color: var(--ink-light);
}

.sample-advisor-text {
    display: block;
    margin-top: 0.25rem;
}

.sample-scale-path {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.2rem;
}

.sample-scale-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.35rem 0.45rem;
    border: 1px solid var(--paper-dark);
    background: var(--paper);
    min-width: 2.5rem;
}

.sample-scale-step.is-reached { background: rgba(201, 162, 39, 0.15); }
.sample-scale-step.is-active {
    border-color: var(--accent);
    font-weight: 700;
}

.sample-scale-num {
    font-family: var(--display);
    font-size: 0.95rem;
    font-weight: 700;
}

.sample-scale-short {
    font-size: 0.52rem;
    text-align: center;
    line-height: 1.2;
}

.sample-scale-arrow {
    color: var(--green);
    font-size: 0.75rem;
}

.sample-hourly-track {
    margin: 0 -0.15rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sample-hourly-track-inner {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.4rem;
    padding: 0.15rem;
    min-width: min-content;
}

.sample-hour-cell {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    width: 3.5rem;
    padding: 0.45rem 0.3rem;
    background: var(--paper);
    border: 1px solid var(--paper-dark);
    text-align: center;
}

.sample-hour-time {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ink-light);
}

.sample-hour-cell .weather-icon {
    width: 28px;
    height: 28px;
    color: var(--accent);
}

.sample-hour-temp {
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.82rem;
}

.sample-hour-rain {
    font-size: 0.62rem;
    color: var(--green-dark);
    font-weight: 700;
}

.sample-hour-rain--dry { visibility: hidden; }

.sample-daily-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.sample-day-card {
    padding: 0.65rem 0.5rem;
    background: var(--paper);
    border: 1px solid var(--paper-dark);
    text-align: center;
}

.sample-day-name {
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.95rem;
    margin: 0 0 0.35rem;
}

.sample-day-desc {
    font-size: 0.75rem;
    margin: 0 0 0.35rem;
    line-height: 1.35;
}

.sample-day-temps {
    font-weight: 700;
    margin: 0 0 0.25rem;
    font-size: 0.82rem;
}

.sample-day-sunset {
    font-size: 0.65rem;
    color: var(--ink-light);
    margin: 0;
}

.sample-official-list {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.82rem;
}

/* Legacy sample blocks (unused) */
.sample-forecast {
    background: var(--paper);
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--paper-dark);
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.65;
}

.sample-section {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--paper-dark);
}

.sample-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.sample-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-light);
    margin: 0 0 0.4rem;
}

.sample-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    background: var(--honey);
    border-radius: 2px;
}

.sample-level-name {
    font-family: var(--display);
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0.35rem 0 0.25rem;
    line-height: 1.2;
}

.sample-story {
    font-style: italic;
    color: var(--ink-light);
    margin: 0.35rem 0;
    font-size: 0.9rem;
}

.sample-character {
    font-size: 0.88rem;
    margin: 0.35rem 0 0;
    color: var(--ink-light);
}

.sample-quote {
    margin: 0.5rem 0 0;
    padding-left: 0.85rem;
    border-left: 2px solid var(--paper-dark);
    font-style: italic;
    color: var(--ink-light);
    font-size: 0.9rem;
}

.sample-data {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--ink-light);
}

.sample-data-foot {
    margin-bottom: 1rem;
}

.sample-data span {
    background: var(--paper);
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--paper-dark);
    border-radius: 2px;
}

/* Navigation */
.slide-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 1rem;
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    background: rgba(245, 240, 230, 0.95);
    border-top: 2px solid var(--paper-dark);
    z-index: 100;
}

.slide-nav button {
    font-family: var(--display);
    font-size: 1.5rem;
    width: 48px;
    height: 48px;
    border: 2px solid var(--paper-dark);
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    border-radius: 3px;
    transition: background 0.2s;
}

.slide-nav button:hover {
    background: var(--honey);
}

.slide-nav button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

#slide-counter {
    font-family: var(--display);
    font-size: 1rem;
    min-width: 60px;
    text-align: center;
}

@media (max-width: 768px) {
    .slide {
        padding: 1rem 0.65rem 6rem;
        padding-top: max(3.5rem, calc(env(safe-area-inset-top, 0px) + 3rem));
        padding-bottom: max(6.5rem, calc(env(safe-area-inset-bottom, 0px) + 5.5rem));
    }

    .slide-inner {
        padding: 1.15rem 0.95rem;
        border-width: 1px;
    }

    .slide-inner::before {
        inset: 5px;
    }

    h1 { font-size: 1.85rem; }
    h2 { font-size: 1.45rem; }

    .intro {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    .path-diagram,
    .watch-warning-grid,
    .level-columns,
    .character-grid {
        gap: 0.75rem;
    }

    .path-diagram {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        padding-bottom: 0.35rem;
        margin-left: -0.15rem;
        margin-right: -0.15rem;
        scroll-padding-inline: 0.5rem;
    }

    .path-step {
        flex-shrink: 0;
        scroll-snap-align: start;
        min-width: 58px;
        padding: 0.45rem 0.5rem;
    }

    .path-arrow {
        flex-shrink: 0;
    }

    .level-columns,
    .watch-warning-grid {
        grid-template-columns: 1fr;
    }

    .level-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .level-intro {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .path-name { font-size: 0.58rem; }

    .scene-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 0.8rem;
    }

    .sample-live-forecast .sample-card {
        padding: 0.85rem;
    }

    .sample-hero-grid {
        grid-template-columns: 1fr;
    }

    .sample-hero-visual {
        flex-direction: row;
        justify-content: center;
    }

    .sample-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sample-daily-grid {
        grid-template-columns: 1fr;
    }

    .sample-forecast {
        padding: 1rem;
        font-size: 0.9rem;
    }

    .story-quote {
        padding: 0.85rem 1rem;
        font-size: 0.92rem;
    }

    .slide-nav {
        gap: 1rem;
        padding: 0.75rem 1rem;
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    }

    .slide-nav button {
        width: 52px;
        height: 52px;
        min-width: 52px;
        min-height: 52px;
    }

    .top-nav {
        top: max(0.5rem, env(safe-area-inset-top, 0px));
        right: max(0.5rem, env(safe-area-inset-right, 0px));
    }

    .top-nav a {
        font-size: 0.82rem;
        padding: 0.4rem 0.7rem;
    }

    .title-map-frame {
        max-width: 100%;
    }

    .title-map {
        max-height: 200px;
    }

    .character-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    h1 { font-size: 1.55rem; }

    h2 { font-size: 1.25rem; }

    .subtitle { font-size: 1rem; }

    .character-grid {
        grid-template-columns: 1fr;
    }

    .character-card {
        padding: 0.85rem;
    }

    .slide-char-image.small {
        max-height: 80px;
    }

    .slide-nav {
        gap: 0.75rem;
    }

    .slide-nav button {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
        font-size: 1.35rem;
    }

    #slide-counter {
        font-size: 0.9rem;
        min-width: 52px;
    }
}