:root {
    color-scheme: dark;
    --ink: #f4ead2;
    --muted: #c9b98f;
    --bg: #15110d;
    --panel: #241b14;
    --panel-strong: #302316;
    --line: #7d6038;
    --gold: #d9a441;
    --gold-deep: #9f6624;
    --green: #6e8d55;
    --blue: #4d7f8f;
    --red: #9b5144;
    --field: #7fa64d;
    --forest: #24583a;
    --river: #267da5;
    --ruins: #716a74;
    --village: #b87934;
    --shadow: rgba(0, 0, 0, 0.38);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at top, rgba(139, 92, 44, 0.26), transparent 34rem),
        linear-gradient(135deg, #100d0a, #201711 48%, #0f1110);
    color: var(--ink);
    font-family: Georgia, "Times New Roman", serif;
}

button,
input {
    font: inherit;
}

button {
    color: inherit;
}

.choice-page {
    display: grid;
    min-height: 100vh;
}

.hero,
.shell {
    width: min(100%, 68rem);
    margin: 0 auto;
    padding: 1.25rem;
}

.hero {
    align-content: center;
    min-height: 100vh;
}

.narrow {
    width: min(100%, 34rem);
}

.world-shell {
    display: grid;
    gap: 1rem;
    transition: opacity 120ms ease;
}

.is-loading-world .world-shell {
    opacity: 0.72;
    pointer-events: none;
}

.kicker {
    margin: 0 0 0.4rem;
    color: var(--gold);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

h1,
h2,
p {
    overflow-wrap: anywhere;
}

h1 {
    margin: 0;
    font-size: clamp(2.6rem, 18vw, 5.6rem);
    line-height: 0.95;
}

h2 {
    margin: 0 0 0.75rem;
    font-size: 1.2rem;
}

.subtitle {
    margin: 0.75rem 0 1.5rem;
    color: var(--muted);
    font-size: 1.2rem;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3.2rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--line);
    border-radius: 0.45rem;
    background: #2c2118;
    color: var(--ink);
    text-decoration: none;
    box-shadow: 0 0.4rem 1rem var(--shadow);
    cursor: pointer;
}

.button-primary {
    border-color: #efc66b;
    background: linear-gradient(180deg, var(--gold), var(--gold-deep));
    color: #17100b;
    font-weight: 700;
}

.panel {
    border: 1px solid rgba(217, 164, 65, 0.38);
    border-radius: 0.5rem;
    background: rgba(36, 27, 20, 0.88);
    box-shadow: 0 0.8rem 2rem var(--shadow);
    padding: 1rem;
}

.stack {
    display: grid;
    gap: 1rem;
}

label span,
legend {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--muted);
    font-size: 0.9rem;
}

input[type="text"] {
    width: 100%;
    min-height: 3rem;
    border: 1px solid var(--line);
    border-radius: 0.4rem;
    background: #100d0a;
    color: var(--ink);
    padding: 0.7rem 0.8rem;
}

fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.archetypes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.choice-chip input {
    position: absolute;
    opacity: 0;
}

.choice-chip span {
    display: grid;
    min-height: 3rem;
    place-items: center;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 0.45rem;
    background: #17120e;
    color: var(--ink);
}

.choice-chip input:checked + span {
    border-color: #efc66b;
    background: #3a2814;
    color: #ffd984;
}

.notice {
    border-left: 0.25rem solid var(--gold);
    background: rgba(217, 164, 65, 0.14);
    padding: 0.85rem 1rem;
}

.world-header {
    display: grid;
    gap: 1rem;
    padding-top: 0.75rem;
}

.stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.stat {
    min-height: 4rem;
    border: 1px solid rgba(125, 96, 56, 0.72);
    border-radius: 0.45rem;
    background: rgba(16, 13, 10, 0.72);
    padding: 0.7rem;
}

.stat span,
.stat strong {
    display: block;
}

.stat span {
    color: var(--muted);
    font-size: 0.78rem;
}

.stat strong {
    margin-top: 0.2rem;
    font-size: 1.6rem;
}

.map-section {
    min-width: 0;
}

.map-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.map-heading h2 {
    margin: 0;
}

.map-heading span {
    color: var(--muted);
    font-size: 0.78rem;
}

.map-grid {
    display: grid;
    grid-template-columns: repeat(9, minmax(2.7rem, 1fr));
    gap: 0.12rem;
    width: 100%;
    max-width: 48rem;
    margin: 0 auto;
    border: 0.12rem solid #1b130d;
    border-radius: 0.35rem;
    background: #1b130d;
    box-shadow:
        0 1rem 2.2rem var(--shadow),
        inset 0 0 0 0.08rem rgba(240, 208, 122, 0.22);
    image-rendering: pixelated;
}

.map-stage {
    position: relative;
    width: 100%;
    max-width: 48rem;
    margin: 0 auto;
}

.tile-move-form {
    display: contents;
}

.map-tile {
    position: relative;
    display: grid;
    aspect-ratio: 1;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: var(--panel);
    padding: 0;
    text-transform: capitalize;
    box-shadow:
        inset 0 0 0 0.05rem rgba(0, 0, 0, 0.22),
        inset 0 -0.7rem 1.4rem rgba(0, 0, 0, 0.18);
}

button.map-tile {
    appearance: none;
    cursor: pointer;
    font: inherit;
    text-align: left;
    touch-action: manipulation;
}

.map-tile.is-tappable {
    outline: 0.08rem solid rgba(240, 208, 122, 0.18);
    outline-offset: -0.08rem;
}

.map-tile.is-tappable::after {
    position: absolute;
    inset: 0;
    z-index: 4;
    content: "";
    background: rgba(255, 232, 145, 0.04);
    pointer-events: none;
}

.map-tile.is-tappable:active {
    transform: scale(0.96);
}

.tap-ring {
    position: absolute;
    inset: 39%;
    z-index: 5;
    border: 0.08rem solid rgba(255, 237, 170, 0.5);
    border-radius: 50%;
    box-shadow: 0 0 0.35rem rgba(255, 213, 112, 0.25);
    opacity: 0;
    pointer-events: none;
}

.map-tile.is-tappable:hover .tap-ring,
.map-tile.is-tappable:focus-visible .tap-ring {
    opacity: 0.9;
}

.map-tile.is-current {
    outline: 0.18rem solid #ffe39a;
    outline-offset: -0.18rem;
    z-index: 3;
}

.terrain-forest {
    border-color: var(--green);
}

.terrain-river {
    border-color: var(--blue);
}

.terrain-ruins {
    border-color: var(--red);
}

.terrain-village {
    border-color: var(--gold);
}

.terrain-art {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.terrain-art::before,
.terrain-art::after {
    position: absolute;
    inset: 0;
    content: "";
}

.terrain-field .terrain-art {
    background:
        radial-gradient(circle at 20% 22%, rgba(255, 236, 150, 0.28) 0 0.11rem, transparent 0.13rem),
        radial-gradient(circle at 68% 70%, rgba(255, 236, 150, 0.24) 0 0.1rem, transparent 0.12rem),
        linear-gradient(135deg, rgba(41, 78, 32, 0.2) 0 18%, transparent 19% 100%),
        var(--field);
}

.terrain-field .terrain-art::before {
    background:
        linear-gradient(100deg, transparent 0 32%, rgba(43, 92, 36, 0.42) 33% 35%, transparent 36% 100%),
        linear-gradient(78deg, transparent 0 62%, rgba(43, 92, 36, 0.34) 63% 65%, transparent 66% 100%);
}

.terrain-forest .terrain-art {
    background:
        radial-gradient(circle at 26% 30%, #12351f 0 15%, transparent 16%),
        radial-gradient(circle at 62% 24%, #1b4a2a 0 18%, transparent 19%),
        radial-gradient(circle at 74% 66%, #143c24 0 16%, transparent 17%),
        radial-gradient(circle at 36% 72%, #0f2d1d 0 19%, transparent 20%),
        var(--forest);
}

.terrain-forest .terrain-art::before {
    background:
        linear-gradient(90deg, transparent 24%, #4e2f1d 25% 29%, transparent 30%),
        linear-gradient(90deg, transparent 60%, #4e2f1d 61% 65%, transparent 66%),
        linear-gradient(90deg, transparent 36%, #4e2f1d 37% 41%, transparent 42%);
    opacity: 0.8;
}

.terrain-river .terrain-art {
    background:
        linear-gradient(135deg, #3b9fc3 0 18%, #176482 19% 31%, #5fc0d8 32% 38%, #1d7fa3 39% 62%, #0d4c6d 63% 100%);
}

.terrain-river .terrain-art::before {
    background:
        linear-gradient(135deg, transparent 0 23%, rgba(224, 253, 255, 0.65) 24% 27%, transparent 28% 57%, rgba(224, 253, 255, 0.5) 58% 61%, transparent 62% 100%);
}

.terrain-river .terrain-art::after {
    background:
        linear-gradient(135deg, rgba(18, 84, 94, 0.38), transparent 34% 62%, rgba(18, 84, 94, 0.36));
}

.terrain-ruins .terrain-art {
    background:
        linear-gradient(135deg, transparent 0 18%, rgba(36, 33, 38, 0.38) 19% 28%, transparent 29% 100%),
        radial-gradient(circle at 30% 64%, #4b4650 0 13%, transparent 14%),
        radial-gradient(circle at 68% 36%, #8a838c 0 12%, transparent 13%),
        var(--ruins);
}

.terrain-ruins .terrain-art::before {
    inset: 16% 18%;
    border-top: 0.45rem solid #9c969c;
    border-right: 0.32rem solid transparent;
    border-bottom: 0.35rem solid #464148;
    border-left: 0.32rem solid transparent;
    opacity: 0.9;
}

.terrain-ruins .terrain-art::after {
    inset: 56% 18% 18% 46%;
    background: #5a535b;
    box-shadow:
        -1.4rem -0.25rem 0 -0.05rem #8f8990,
        0.9rem -0.75rem 0 -0.08rem #706a72;
}

.terrain-village .terrain-art {
    background:
        radial-gradient(circle at 22% 78%, rgba(89, 55, 31, 0.34) 0 11%, transparent 12%),
        radial-gradient(circle at 76% 66%, rgba(89, 55, 31, 0.32) 0 9%, transparent 10%),
        var(--village);
}

.terrain-village .terrain-art::before {
    inset: 26% 18% 27% 18%;
    background:
        linear-gradient(135deg, transparent 0 28%, #6d2e1f 29% 49%, transparent 50%),
        linear-gradient(45deg, transparent 0 28%, #7f3824 29% 49%, transparent 50%),
        linear-gradient(0deg, transparent 0 44%, #d49a53 45% 100%);
}

.terrain-village .terrain-art::after {
    inset: 50% 38% 20% 42%;
    background: #3b2017;
    box-shadow:
        -1rem -0.3rem 0 -0.18rem #e0ad63,
        1rem -0.1rem 0 -0.2rem #e0ad63;
}

.terrain-field.is-current .terrain-art,
.terrain-village.is-current .terrain-art {
    filter: saturate(1.18) brightness(1.08);
}

.player-sprite {
    position: relative;
    z-index: 5;
    display: grid;
    justify-items: center;
    align-self: center;
    justify-self: center;
    width: clamp(1.25rem, 5vw, 2.4rem);
    height: clamp(1.6rem, 6.4vw, 2.95rem);
    filter: drop-shadow(0 0.22rem 0.18rem rgba(0, 0, 0, 0.55));
}

.player-head,
.player-body,
.player-feet {
    display: block;
    content: "";
}

.player-head {
    width: 42%;
    aspect-ratio: 1;
    border: 0.08rem solid #2a170e;
    border-radius: 50%;
    background: #e1b27a;
}

.player-body {
    width: 62%;
    height: 42%;
    margin-top: -0.06rem;
    border: 0.08rem solid #1d1110;
    border-radius: 50% 50% 0.26rem 0.26rem;
    background:
        linear-gradient(90deg, transparent 0 18%, rgba(255, 230, 170, 0.72) 19% 28%, transparent 29% 71%, rgba(255, 230, 170, 0.72) 72% 81%, transparent 82%),
        linear-gradient(180deg, #9c2f43, #382238);
}

.player-feet {
    width: 72%;
    height: 15%;
    margin-top: -0.03rem;
    border-radius: 50%;
    background: #1a1110;
}

.walking-layer {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
}

.walking-sprite {
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 140ms linear;
}

.choice-actions {
    display: grid;
    gap: 0.65rem;
    margin-top: 1rem;
}

.world-log ol {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.world-log li {
    border-left: 0.2rem solid var(--gold);
    padding-left: 0.75rem;
}

.world-log span,
.world-log small {
    display: block;
}

.world-log small {
    margin-top: 0.2rem;
    color: var(--muted);
    font-size: 0.75rem;
}

@media (min-width: 48rem) {
    .hero,
    .shell {
        padding: 2rem;
    }

    .button {
        width: auto;
        min-width: 12rem;
    }

    .world-header {
        grid-template-columns: minmax(0, 1fr) 24rem;
        align-items: end;
    }

    .world-shell {
        grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 0.8fr);
    }

    .world-header,
    .map-section,
    .world-log {
        grid-column: 1 / -1;
    }

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