/*
 * Abenteuerkarte (karte.html): the map fills the window, the HUD floats on top of it. Cards inside the
 * overlays use the styles of the Übungsplaner (uebungsplaner.css, themes-uebersicht.css).
 */

.map-page {
    /* space below the game bar: the iPhone's safe area (home indicator) plus, in Arc on iOS, its
       toolbar that lies over the page (html.is-lifted, set in karte.html or by the help panel) */
    --bottom-inset: max(env(safe-area-inset-bottom, 0px), var(--browser-bar, 0px));
    --hud-ink: #1a1614;
    --hud-paper: #fffaf0;
    --parchment: #f3e2bd;
    --wood: #7a4a24;
    --wood-dark: #4a2a14;
    /* the theme's text colors, for the exercise cards on the map's light surfaces (see below) */
    --theme-ink: var(--ink);
    --theme-ink-2: var(--ink-2);
    --theme-muted: var(--muted);
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: #61a2ff;
    overscroll-behavior: none;
}

#map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    image-rendering: pixelated;
    cursor: crosshair;
    /* the map handles dragging itself, also with a finger */
    touch-action: none;
}

#map.is-target {
    cursor: pointer;
}

#map.is-dragging {
    cursor: grabbing;
}

#map:focus-visible {
    outline: 3px solid #ffd23f;
    outline-offset: -3px;
}

/* The map's own surfaces (toast, parchment, volcano panel) are always light, so their text uses the
   light palette also when a dark theme is chosen. The exercise cards keep the theme's colors. */
.toast,
.scroll-paper,
.volcano-info {
    --ink: #1a1614;
    --ink-2: #453d38;
    --muted: #6b625c;
    color: var(--ink);
}

.scroll-paper .grid {
    --ink: var(--theme-ink);
    --ink-2: var(--theme-ink-2);
    --muted: var(--theme-muted);
    color: var(--ink);
}

/* Tafel: the cards are translucent chalk on the board, on the parchment and the sign they get the board beneath */
html[data-lw-theme="tafel"] :is(.scroll-paper, .sign-card) .card {
    background: linear-gradient(var(--type-bg), var(--type-bg)), #26392f;
}

/* --- HUD ----------------------------------------------------------------- */

.hud {
    position: absolute;
    z-index: 10;
    font-size: 14px;
    color: var(--hud-ink);
}

.hud-top {
    top: 14px;
    left: 14px;
    right: 14px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    pointer-events: none;
}

.hud-top > * {
    pointer-events: auto;
}

.hud-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 14px;
    border: 2px solid var(--hud-ink);
    border-radius: 10px;
    background: var(--hud-paper);
    box-shadow: 3px 3px 0 var(--hud-ink);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.1s, box-shadow 0.1s;
}

.hud-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--hud-ink);
}

/* legal links: a quiet line under the game bar */
.hud-legal {
    left: 50%;
    bottom: calc(4px + var(--bottom-inset));
    display: flex;
    gap: 12px;
    padding: 1px 10px;
    border-radius: 999px;
    background: rgb(26 22 20 / 0.55);
    font-size: 11px;
    transform: translateX(-50%);
    white-space: nowrap;
}

.hud-legal a {
    color: #fff;
}

/* --- Game bar: a medallion in the middle, a wing on each side ---------------- */

.gamebar {
    left: 50%;
    bottom: calc(34px + var(--bottom-inset));
    display: flex;
    align-items: flex-end;
    width: max-content;
    max-width: calc(100% - 20px);
    transform: translateX(-50%);
    pointer-events: none;
}

.gamebar > * {
    pointer-events: auto;
}

.wing {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 60px;
    margin-bottom: 6px;
    padding: 0 8px;
    border: 2px solid var(--hud-ink);
    background: var(--parchment);
    box-shadow: 0 4px 0 var(--hud-ink);
}

/* the wings taper towards the medallion and disappear behind it */
/* more room at the outer, round ends: the buttons there would otherwise touch the curve */
.wing-left {
    padding-left: 15px;
    padding-right: 52px;
    margin-right: -46px;
    border-radius: 30px 8px 8px 30px;
}

.wing-right {
    padding-right: 15px;
    padding-left: 52px;
    margin-left: -46px;
    border-radius: 8px 30px 30px 8px;
}

.wing-action {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 44px;
    max-width: 240px;
    padding: 0 12px 0 10px;
    border: 2px solid transparent;
    border-radius: 12px;
    background: none;
    color: var(--hud-ink);
    text-align: left;
}

.wing-action:hover {
    border-color: rgb(74 42 20 / 0.35);
    background: rgb(255 255 255 / 0.45);
}

.wing-action:disabled {
    cursor: default;
    border-color: transparent;
    background: none;
}

.wing-action svg,
.bar-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wing-text {
    display: grid;
    min-width: 0;
}

.wing-text small {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6b4f33;
    white-space: nowrap;
}

.wing-text small kbd {
    margin-left: 2px;
    padding: 0 4px;
    border: 1px solid rgb(74 42 20 / 0.4);
    border-radius: 4px;
    font: inherit;
}

.wing-text b {
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#hud-gate {
    color: #9a3f28;
}

#hud-gate.is-open {
    color: #1f5f2a;
}

.wing-tools {
    display: flex;
    gap: 5px;
    padding-left: 8px;
    border-left: 2px dotted rgb(74 42 20 / 0.35);
}

.bar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    border: 2px solid var(--hud-ink);
    border-radius: 10px;
    background: var(--hud-paper);
    box-shadow: 0 3px 0 var(--hud-ink);
    color: var(--hud-ink);
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.08s, box-shadow 0.08s;
}

.bar-btn:hover {
    background: #fff;
}

.bar-btn:active,
.bar-btn[aria-expanded="true"] {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--hud-ink);
}

.bar-btn[aria-expanded="true"] {
    background: #ffd23f;
}

.bar-icon {
    width: 38px;
    padding: 0;
    font-size: 19px;
    line-height: 1;
}

/* the medallion: liquid for the houses (full = port open), rim segments for all exercises */
.medallion {
    position: relative;
    z-index: 1;
    width: 112px;
    height: 112px;
    flex-shrink: 0;
    border: 3px solid var(--hud-ink);
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, #b98a4e 0 5deg, #a8743f 5deg 10deg);
    box-shadow: 0 5px 0 var(--hud-ink);
}

/* the glass with the liquid, inside the wooden rim */
.medallion-face {
    position: absolute;
    inset: 12px;
    display: grid;
    place-items: center;
    border: 2px solid var(--wood-dark);
    border-radius: 50%;
    background: #fff6df;
    overflow: hidden;
    /* stacking context: the waves stay inside the glass */
    isolation: isolate;
}

.liquid {
    --liquid: #8fe3a8;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* the ribbon hides the bottom of the glass: the level starts above it */
    height: calc(var(--level, 0) * 1%);
    background: linear-gradient(#7ddc98, #43b96a);
    transition: height 0.9s cubic-bezier(0.3, 1.3, 0.5, 1);
}

/* the surface: rotating rounded squares in the colour of the empty glass bite waves into the liquid */
.wave {
    position: absolute;
    left: -60%;
    bottom: calc(100% - 5px);
    width: 220%;
    aspect-ratio: 1;
    border-radius: 43%;
    background: #fff6df;
    animation: wave 6s linear infinite;
}

.wave-back {
    bottom: calc(100% - 7px);
    border-radius: 40%;
    background: rgb(255 246 223 / 0.55);
    animation-duration: 9s;
    animation-direction: reverse;
}

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

.bubbles {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.bubbles i {
    position: absolute;
    bottom: -8px;
    width: 5px;
    height: 5px;
    border: 1px solid rgb(255 255 255 / 0.85);
    border-radius: 50%;
    animation: bubble 3.2s ease-in infinite;
    opacity: 0;
}

.bubbles i:nth-child(1) { left: 22%; animation-delay: 0s; }
.bubbles i:nth-child(2) { left: 48%; width: 4px; height: 4px; animation-delay: 1.1s; animation-duration: 2.6s; }
.bubbles i:nth-child(3) { left: 70%; animation-delay: 0.6s; animation-duration: 3.8s; }
.bubbles i:nth-child(4) { left: 35%; width: 3px; height: 3px; animation-delay: 2s; }
.bubbles i:nth-child(5) { left: 60%; width: 6px; height: 6px; animation-delay: 2.7s; animation-duration: 3.4s; }

@keyframes bubble {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    50% {
        transform: translate(3px, -45px);
    }
    100% {
        transform: translate(-2px, -90px);
        opacity: 0;
    }
}

/* no liquid yet: no bubbles either */
.medallion[data-fill="0"] .bubbles {
    display: none;
}

/* full: the port is open, the liquid glows golden */
.medallion.is-full .liquid {
    background: linear-gradient(#ffe27a, #f5b400);
}

.medallion-text {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    margin-top: 4px;
    line-height: 1;
    text-shadow: 0 0 3px #fff6df, 0 0 6px #fff6df;
}

.medallion-text small {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5b4630;
}

/* tight line box: the digits have no descenders, so the font's line box would leave more space
   above them than below; the margins set two equal gaps */
.medallion-text b {
    margin: 2.5px 0 4px;
    line-height: 0.74;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

/* one segment per exercise of the island, on the wooden rim */
.medallion-ring {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* open: dark notches in the wood; done: purple with a dark outline and a highlight (goes with the golden liquid) */
.medallion-ring path {
    fill: none;
    stroke: rgb(46 26 12 / 0.55);
    stroke-width: 7; /* as wide as the finished segments with their outline: one even band */
    stroke-linecap: round;
}

.medallion-ring path.done-edge {
    stroke: #2e1250;
    stroke-width: 7;
}

.medallion-ring path.is-done {
    stroke: #c48bff;
    stroke-width: 4.4;
}

.medallion-ring path.done-shine {
    stroke: #f1e2ff;
    stroke-width: 1.3;
    opacity: 0.85;
}

.medallion-ribbon {
    position: absolute;
    left: 50%;
    bottom: -8px;
    max-width: 210px;
    padding: 2px 22px 3px;
    overflow: hidden;
    background: #9a3f28;
    color: #fff6df;
    font-family: "Caveat", cursive;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: translateX(-50%);
    clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%, 10px 50%);
    filter: drop-shadow(0 2px 0 var(--hud-ink));
}

/* instructions, opening above the bar */
.bar-help {
    position: absolute;
    right: 0;
    bottom: calc(100% + 12px);
    width: min(400px, calc(100vw - 28px));
    padding: 14px 18px 16px;
    border: 2px solid var(--hud-ink);
    border-radius: 14px;
    background: rgb(26 22 20 / 0.92);
    box-shadow: 4px 4px 0 rgb(0 0 0 / 0.3);
    color: #fff;
    font-size: 13px;
    animation: prompt-in-up 0.18s ease-out;
}

.bar-help[hidden] {
    display: none;
}

.bar-help h2 {
    margin: 0 0 8px;
    font-family: "Caveat", cursive;
    font-size: 24px;
    line-height: 1;
}

/* one grid for all rows: the key column is as wide as its widest entry */
.bar-help ul {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 7px 14px;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bar-help li {
    display: contents;
}

.bar-help p {
    margin: 12px 0 0;
    opacity: 0.8;
    line-height: 1.4;
}

.bar-help kbd,
.prompt kbd {
    display: inline-block;
    min-width: 20px;
    margin-right: 2px;
    padding: 0 5px;
    border: 1px solid rgb(255 255 255 / 0.5);
    border-bottom-width: 2px;
    border-radius: 5px;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

.help-reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 5px 10px;
    border: 1px solid rgb(255 255 255 / 0.4);
    border-radius: 8px;
    background: none;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.help-reset:hover {
    background: rgb(255 255 255 / 0.12);
}

.help-reset svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@keyframes prompt-in-up {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

/* --- Prompt above the hero and messages ---------------------------------- */

.prompt {
    position: absolute;
    z-index: 9;
    display: flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: 320px;
    padding: 6px 12px 6px 8px;
    border: 0;
    border-radius: 10px;
    /* glass: the map shows through, slightly blurred and with deeper colours */
    background: rgb(26 22 20 / 0.6);
    -webkit-backdrop-filter: blur(4px) saturate(1.7);
    backdrop-filter: blur(4px) saturate(1.7);
    box-shadow: 0 4px 14px rgb(0 0 0 / 0.2);
    color: #fff;
    text-shadow: 0 1px 2px rgb(0 0 0 / 0.5);
    font-size: 13px;
    line-height: 1.25;
    text-align: left;
    transform: translate(-50%, -100%);
    animation: prompt-in 0.18s ease-out;
}

.prompt[hidden] {
    display: none;
}

/* below the hero (when the building is above), the tip points up */
.prompt.is-below {
    transform: translate(-50%, 0);
    animation-name: prompt-in-below;
}

.prompt.is-below::after {
    top: -12px;
    bottom: auto;
    border-top-color: transparent;
    border-bottom-color: rgb(26 22 20 / 0.6);
}

@keyframes prompt-in-below {
    from {
        opacity: 0;
        transform: translate(-50%, -6px);
    }
}

.prompt::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px;
    border: 6px solid transparent;
    border-top-color: rgb(26 22 20 / 0.6);
    transform: translateX(-50%);
}

.prompt kbd {
    flex-shrink: 0;
}

/* title above the hint, both in one column next to the key */
.prompt-text {
    display: grid;
    min-width: 0;
}

.prompt-text b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prompt-text small {
    font-size: 11px;
    opacity: 0.75;
    white-space: nowrap;
}

@keyframes prompt-in {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-100% + 6px));
    }
}

.toast {
    position: absolute;
    z-index: 11;
    left: 50%;
    top: 14px;
    max-width: calc(100% - 320px);
    padding: 8px 16px;
    border: 2px solid var(--hud-ink);
    border-radius: 999px;
    background: var(--hud-paper);
    box-shadow: 3px 3px 0 var(--hud-ink);
    font-weight: 700;
    transform: translateX(-50%);
    pointer-events: none;
}

.toast.is-shown {
    animation: toast 3.2s ease-in-out forwards;
}

@keyframes toast {
    0% {
        opacity: 0;
        transform: translate(-50%, -8px);
    }
    8%,
    85% {
        opacity: 1;
        transform: translate(-50%, 0);
    }
    100% {
        opacity: 0;
    }
}

.loading {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 12px;
    padding: 24px;
    background: #61a2ff;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

.loading[hidden] {
    display: none;
}

.loading a {
    color: #fff;
}

.loading b,
.loading span {
    display: block;
}

/* the ship of the tile map, rocking */
.loading-ship {
    width: 64px;
    height: 64px;
    background: url("../assets/tilemap/sprites/MSFloatingPoint.png") 0 0 / 1024px 64px no-repeat;
    image-rendering: pixelated;
    animation: rock 0.5s steps(1) infinite;
}

@keyframes rock {
    50% {
        background-position: -64px 0;
    }
}

/* --- Overlays ------------------------------------------------------------ */

.overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgb(10 25 50 / 0.5);
    overflow: auto;
}

.overlay[hidden] {
    display: none;
}

.overlay.is-open {
    animation: fade 0.2s ease-out;
}

@keyframes fade {
    from {
        background: rgb(10 25 50 / 0);
    }
}

/* the wooden sign with an exercise card (houses) or the volcano */
.sign {
    width: min(640px, 100%);
    padding: 16px 18px 18px;
    border: 3px solid var(--wood-dark);
    border-radius: 18px;
    background:
        repeating-linear-gradient(180deg, rgb(255 255 255 / 0.05) 0 3px, transparent 3px 22px),
        var(--wood);
    box-shadow: inset 0 0 0 3px #a8743f, 6px 6px 0 rgb(0 0 0 / 0.35);
}

.overlay.is-open .sign {
    animation: sign-in 0.28s cubic-bezier(0.2, 1.4, 0.4, 1);
}

@keyframes sign-in {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.94);
    }
}

.sign-eyebrow {
    margin: 0 4px 12px;
    color: #fde9c4;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sign-card .card {
    box-shadow: 0 2px 0 rgb(0 0 0 / 0.2);
}

.sign-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}

.sign-actions .btn {
    border-color: var(--wood-dark);
    text-decoration: none;
    color: var(--ink);
}

.sign-actions .btn-primary {
    border-color: var(--hud-ink);
    background: #ffd23f;
    color: var(--hud-ink);
    box-shadow: 3px 3px 0 var(--hud-ink);
}

.volcano-info {
    padding: 20px 22px;
    border-radius: 14px;
    background: #fff4e6;
    background-image: radial-gradient(circle at 100% 0, rgb(234 88 12 / 0.18), transparent 60%);
}

.volcano-info .volcano-kicker {
    margin: 0 0 2px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #c2410c;
}

.volcano-info .volcano-status {
    margin-top: 8px;
    color: var(--ink);
    font-weight: 700;
}

.volcano-info.is-over .volcano-status,
.volcano-info.is-over .volcano-kicker {
    color: var(--muted);
}

.volcano-info .volcano-dates {
    margin-top: 6px;
    color: var(--muted);
    font-size: 13px;
}

.volcano-title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 800;
}

.volcano-info p {
    margin: 0;
    color: var(--ink-2);
    font-weight: 500;
}

.volcano-info .volcano-url {
    margin-top: 10px;
    color: var(--muted);
    font-size: 13px;
    word-break: break-all;
}

/* the scroll: two rods, the paper unrolls between them */
.scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(1120px, 100%);
}

.scroll-rod {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 22px;
    border: 2px solid var(--wood-dark);
    border-radius: 11px;
    background: linear-gradient(180deg, #c48a4f, #8a5428 60%, #5e3518);
    box-shadow: 0 3px 0 rgb(0 0 0 / 0.25);
}

.scroll-rod::before,
.scroll-rod::after {
    content: "";
    position: absolute;
    top: -6px;
    width: 18px;
    height: 30px;
    border: 2px solid var(--wood-dark);
    border-radius: 8px;
    background: linear-gradient(180deg, #e0a85f, #9a6230);
}

.scroll-rod::before {
    left: -10px;
}

.scroll-rod::after {
    right: -10px;
}

.scroll-paper {
    position: relative;
    width: calc(100% - 28px);
    max-height: calc(100vh - 32px - 44px);
    max-height: calc(100dvh - 32px - 44px);
    padding: 22px 28px 28px;
    overflow: auto;
    background:
        radial-gradient(ellipse at 50% 0, rgb(120 70 20 / 0.12), transparent 30%),
        radial-gradient(ellipse at 50% 100%, rgb(120 70 20 / 0.12), transparent 30%),
        linear-gradient(90deg, rgb(120 70 20 / 0.16), transparent 4%, transparent 96%, rgb(120 70 20 / 0.16)),
        var(--parchment);
    border-inline: 1px solid rgb(74 42 20 / 0.4);
}

.overlay.is-open .scroll-paper {
    animation: unroll 0.75s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@keyframes unroll {
    from {
        max-height: 0;
        padding-block: 0;
    }
}

.scroll-close {
    position: sticky;
    top: 0;
    float: right;
    width: 36px;
    height: 36px;
    margin: -6px -10px 0 12px;
    border: 2px solid var(--hud-ink);
    border-radius: 50%;
    background: var(--hud-paper);
    font-size: 22px;
    line-height: 1;
}

.scroll-title {
    margin: 0;
    font-family: "Caveat", cursive;
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    color: #3b2314;
}

.scroll-sub {
    margin: 6px 0 18px;
    color: #5b4630;
    font-weight: 600;
}

/* the castle's lecture slides, above its cards */
.slides {
    margin-bottom: 22px;
}

.slides h3 {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 800;
    color: #3b2314;
}

.slides ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.slide {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 2px solid var(--wood-dark);
    border-radius: 12px;
    background: #fffaf0;
    box-shadow: 0 3px 0 rgb(74 42 20 / 0.35);
}

.slide b {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.slide-nr {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 8px;
    background: #9a3f28;
    color: #fff6df;
    font-weight: 800;
    font-size: 13px;
}

.slide-link {
    flex-shrink: 0;
    padding: 4px 9px;
    border: 1.5px solid var(--wood-dark);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.slide-link:hover {
    background: #ffd23f;
}

/* --- list of all islands (Seekarte) --- */
.scroll.is-list {
    width: min(900px, 100%);
}

.isles {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.isle {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 84px 84px 196px 92px;
    align-items: center;
    gap: 14px;
    padding: 8px 14px 8px 10px;
    border: 2px solid var(--wood-dark);
    border-radius: 12px;
    background: #fffaf0;
    box-shadow: 0 3px 0 rgb(74 42 20 / 0.35);
}

.isle-go {
    justify-self: end;
    padding: 5px 10px;
    border: 2px solid var(--hud-ink);
    border-radius: 9px;
    background: #ffd23f;
    box-shadow: 0 2px 0 var(--hud-ink);
    color: var(--hud-ink);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.isle-go:hover {
    background: #ffe27a;
}

.isle.is-current {
    border-color: var(--hud-ink);
    background: #fff4cf;
    box-shadow: 0 0 0 3px #ffd23f, 0 3px 0 rgb(74 42 20 / 0.35);
}

/* not reachable yet: light grey */
.isle.is-locked {
    border-color: #d8d2cc;
    background: #f1eeea;
    box-shadow: none;
    color: #a39a92;
}

.isle-nr {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 2px solid var(--hud-ink);
    border-radius: 50%;
    background: var(--swatch);
    color: var(--hud-ink);
    font-weight: 800;
    text-shadow: 0 0 3px #fff, 0 0 3px #fff;
}

.isle.is-locked .isle-nr {
    border-color: #c9c2bb;
    background: #e4dfda;
    color: #a39a92;
    text-shadow: none;
}

.isle-name {
    display: grid;
    min-width: 0;
}

.isle-name b {
    overflow: hidden;
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.isle-name small {
    font-size: 12px;
    font-weight: 600;
    color: #6b4f33;
}

.isle.is-current .isle-name small {
    color: #9a3f28;
}

.isle.is-complete .isle-name small {
    color: #1f5f2a;
}

.isle.is-locked .isle-name small {
    color: #a39a92;
}

.isle-stat {
    display: grid;
    gap: 3px;
}

.isle-stat small {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6b4f33;
}

.isle-stat b {
    font-size: 14px;
}

.isle.is-locked .isle-stat small {
    color: inherit;
}

.isle-meter {
    height: 6px;
    border-radius: 99px;
    background: rgb(74 42 20 / 0.15);
    overflow: hidden;
}

.isle-meter i {
    display: block;
    height: 100%;
    border-radius: inherit;
}

/* the same colours as in the medallion: golden houses, purple exercises */
.isle-meter.is-houses i {
    background: #f5b400;
}

.isle-meter.is-all i {
    background: #a76dff;
}

.isle.is-locked .isle-meter i {
    background: #cfc8c1;
}

.isle-hw {
    justify-self: end;
    font-size: 12px;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.isle-hw:not(:empty) {
    padding: 3px 8px;
    border-radius: 7px;
    background: #6b625c;
    color: #f5f0eb;
}

.isle-hw.is-open {
    background: #c2410c;
    color: #fff7ed;
}

.isle-hw.is-soon {
    background: #1d4ed8;
    color: #eff6ff;
}

.isle.is-locked .isle-hw:not(:empty) {
    background: #e4dfda;
    color: #a39a92;
}

/* phones: name on top, the stats below it */
@media (max-width: 760px) {
    .isle {
        grid-template-columns: 38px minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "nr name name" "nr houses all" "nr hw go";
        gap: 6px 12px;
    }

    .isle-nr { grid-area: nr; align-self: start; }
    .isle-name { grid-area: name; }
    .isle-stat:nth-of-type(3) { grid-area: houses; }
    .isle-stat:nth-of-type(4) { grid-area: all; }

    .isle-hw {
        grid-area: hw;
        justify-self: start;
    }

    .isle-hw:empty {
        visibility: hidden;
    }

    .isle-go {
        grid-area: go;
    }
}

.scroll.is-narrow {
    width: min(640px, 100%);
}

/* auto-fit: no empty column next to a single card */
.scroll-body .grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}

.scroll-count {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 700;
    color: #3b2314;
}

.scroll-count span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.scroll-count .type-icon {
    width: 20px;
    height: 20px;
}

.scroll-count b {
    margin-left: auto;
    font-size: 13px;
    font-weight: 600;
    color: #6b4f33;
}

/* the exercise page */
#frame-overlay {
    padding: 12px;
}

#frame {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 20px 60px rgb(0 0 0 / 0.45);
}

#frame-overlay.is-open #frame {
    animation: frame-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes frame-in {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
}

@media (max-width: 900px) {
    .wing-action {
        max-width: 170px;
    }
}

@media (max-width: 700px) {
    /* phones: the wings shrink to icons */
    .gamebar {
        bottom: calc(32px + var(--bottom-inset));
    }

    .wing {
        height: 52px;
        gap: 5px;
    }

    .wing-left {
        padding: 0 46px 0 11px;
    }

    .wing-right {
        padding: 0 11px 0 46px;
    }

    .wing-text {
        display: none;
    }

    .wing-action {
        width: 40px;
        height: 40px;
        padding: 0;
        justify-content: center;
        border-color: var(--hud-ink);
        background: var(--hud-paper);
        box-shadow: 0 3px 0 var(--hud-ink);
    }

    .wing-tools {
        gap: 4px;
        padding-left: 5px;
    }

    .bar-btn,
    .bar-icon {
        width: 34px;
        height: 34px;
    }

    .medallion {
        width: 96px;
        height: 96px;
    }

    .medallion-face {
        inset: 10px;
    }

    .medallion-text b {
        font-size: 20px;
    }

    .medallion-ribbon {
        font-size: 18px;
        max-width: 150px;
    }

    .toast {
        top: 64px;
        max-width: calc(100% - 28px);
    }

    .scroll-paper {
        padding: 16px 16px 20px;
    }

    #frame-overlay {
        padding: 0;
    }

    #frame {
        border-radius: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .overlay.is-open,
    .overlay.is-open .sign,
    .overlay.is-open .scroll-paper,
    #frame-overlay.is-open #frame,
    .toast.is-shown,
    .prompt,
    .loading-ship,
    .wave,
    .bubbles i {
        animation: none;
    }
}

html.is-lifted {
    --browser-bar: 76px;
}

/* fast travel: the view fades out and in again */
.fade {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: #61a2ff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}

.fade.is-on {
    opacity: 1;
}

.help-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    cursor: pointer;
}

.help-switch input {
    width: 18px;
    height: 18px;
    accent-color: #ffd23f;
}

.help-switch small {
    display: block;
    opacity: 0.7;
    font-size: 11px;
}