:root {
    --ink: #123c51;
    --muted: #648191;
    --cream: #fffaf0;
    --teal: #168b93;
    --orange: #ffb851
}

* {
    box-sizing: border-box
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    background: #83d8e8;
    color: var(--ink);
    font-family: 'Trebuchet MS', Arial, sans-serif
}

#world-backdrop,
#world-wash,
#menu-wash {
    position: fixed;
    inset: 0;
    pointer-events: none
}

#world-backdrop {
    z-index: 0;
    background: url('assets/game-world.png') center center/cover no-repeat
}

#world-wash {
    z-index: 1;
    background: #b9f0f30d
}

#menu-wash {
    z-index: 1;
    background: linear-gradient(90deg, #e3f8f2ee 0%, #e1f7edc9 31%, #dcf5ee12 62%, transparent 82%);
    opacity: 0;
    transition: opacity .3s
}

body[data-mode=menu] #menu-wash,
body[data-mode=loading] #menu-wash {
    opacity: 1
}

body[data-mode=loading] #stage,
body[data-mode=loading] #game {
    visibility: hidden
}

button,
input {
    font: inherit
}

button {
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 3px solid #f3914a;
    outline-offset: 4px
}

button:disabled {
    opacity: .55;
    cursor: default
}

button svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

[hidden] {
    display: none !important
}

#stage {
    position: absolute;
    z-index: 4;
    width: min(100vw, 177.777778dvh);
    height: min(100dvh, 56.25vw);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    container-type: size;
    isolation: isolate;
    overflow: visible;
    pointer-events: none;
    background: transparent
}

#stage button,
#stage input,
#stage a {
    pointer-events: auto
}

#game {
    position: fixed;
    inset: 0;
    z-index: 2;
    width: 100vw;
    height: 100dvh;
    display: block;
    touch-action: none
}

#dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: #22577047;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden
}

body:is([data-mode=entry], [data-mode=leaderboard], [data-mode=setup], [data-mode=help], [data-mode=paused], [data-mode=rotate]) #dialog-backdrop {
    opacity: 1;
    visibility: visible
}

#header {
    position: absolute;
    top: 3.5cqh;
    left: 4cqw;
    right: 4cqw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    z-index: 3
}

.brand {
    color: var(--ink);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
    font-size: clamp(12px, 1.5cqw, 22px);
    letter-spacing: -.6px;
    line-height: 1.05
}

.brand b {
    color: var(--teal)
}

.brand small {
    display: block;
    font-size: .44em;
    letter-spacing: 2.1px;
    font-weight: 800;
    margin-top: 6px
}

.brand-icon {
    width: 3.6cqw;
    height: 3.6cqw;
    min-width: 30px;
    min-height: 30px;
    display: grid;
    place-items: center;
    background: var(--cream);
    border-radius: 36%;
    color: #f6a53e;
    font-size: clamp(22px, 2.6cqw, 40px);
    box-shadow: 0 3px 0 #fff8
}

.party-badge {
    font-size: clamp(10px, 1cqw, 15px);
    font-weight: 800;
    background: #fff9e9de;
    padding: 10px 20px;
    border-radius: 100px;
    box-shadow: 0 3px 10px #2a75801a;
    max-width: 42%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.party-badge:before {
    content: '✦';
    color: #efb33d;
    margin-right: 8px
}

.tools {
    display: flex;
    gap: 8px
}

.icon-button {
    border: 1px solid #ffffffbf;
    background: #fffaf0e8;
    border-radius: 15px;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    color: var(--ink);
    box-shadow: 0 4px 0 #32657713
}

.icon-button:hover {
    background: white;
    transform: translateY(-1px)
}

#panel {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none
}

#panel>* {
    pointer-events: auto
}

.menu {
    position: absolute;
    inset: 0;
    background: transparent
}

.hero {
    position: absolute;
    left: 7cqw;
    top: 20cqh;
    width: 43cqw
}

.eyebrow {
    font-size: clamp(10px, 1cqw, 14px);
    letter-spacing: 2.5px;
    font-weight: 900;
    color: #3d8c8f;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px
}

.eyebrow:before {
    content: '';
    width: 22px;
    height: 2px;
    background: currentColor
}

h1 {
    font-weight: 1000;
    font-size: clamp(42px, 6.1cqw, 90px);
    letter-spacing: -3.5px;
    line-height: .93;
    margin: 2.1cqh 0 2.5cqh;
    text-shadow: 0 3px 0 #fff5
}

h1 em {
    font-style: normal;
    color: var(--teal)
}

.hero-copy {
    font-size: clamp(13px, 1.3cqw, 19px);
    line-height: 1.55;
    color: #426c7a;
    margin: 0 0 3cqh;
    max-width: 31cqw
}

.hero-actions {
    width: 29cqw;
    min-width: 210px;
    display: grid;
    gap: 12px
}

.button {
    border: 0;
    border-radius: 17px;
    min-height: 48px;
    padding: 15px 22px;
    font-weight: 900;
    font-size: clamp(14px, 1.25cqw, 19px);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: transform .15s, box-shadow .15s;
    text-decoration: none
}

.button:hover {
    transform: translateY(-2px)
}

.button:active {
    transform: translateY(2px)
}

.primary {
    background: linear-gradient(#ffc96b, #ffb64d);
    color: #694317;
    border: 2px solid #ffedbe;
    box-shadow: 0 5px 0 #d99538, 0 9px 20px #cb9a4b20
}

.secondary {
    background: #fffdf2e8;
    color: #245563;
    border: 2px solid #fff;
    box-shadow: 0 4px 0 #aacfc56b
}

.primary .arrow {
    margin-left: auto;
    font-size: 24px;
    font-weight: 400
}

.hero-actions .primary {
    justify-content: space-between
}

.hero-actions .secondary {
    font-size: clamp(12px, 1.1cqw, 16px)
}

.menu-note {
    font-size: clamp(9px, .85cqw, 12px);
    color: #6b8b8f;
    margin: 2.2cqh 0;
    display: flex;
    gap: 8px;
    align-items: center
}

.menu-note i {
    width: 6px;
    height: 6px;
    background: #65b799;
    border-radius: 50%
}

.menu-footer {
    position: absolute;
    bottom: 3.5cqh;
    left: 4cqw;
    right: 4cqw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: clamp(10px, .9cqw, 13px);
    color: #3b727bc9
}

.text-button {
    border: 0;
    background: transparent;
    color: inherit;
    font-weight: bold;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 40px
}

.text-button svg {
    width: 17px;
    height: 17px
}

.scene-caption {
    position: absolute;
    left: 62%;
    top: 73%;
    transform: rotate(-4deg);
    padding: 12px 22px;
    background: #fffaf0ed;
    box-shadow: 0 5px 0 #b2c6c170;
    border: 2px solid white;
    border-radius: 16px;
    color: #557781;
    font-size: clamp(11px, 1.1cqw, 17px);
    text-align: center
}

.scene-caption strong {
    display: block;
    font-size: 1.3em;
    color: #1a5969;
    margin-top: 4px
}

.scene-caption:before {
    content: '✧';
    position: absolute;
    left: -18px;
    top: -20px;
    color: #ffbd46;
    font-size: 32px
}

.latest-result {
    margin: 0 0 2cqh;
    padding: 10px 14px;
    max-width: 32cqw;
    background: #fff9ebed;
    border: 1px solid white;
    border-radius: 13px;
    display: flex;
    gap: 10px;
    align-items: center;
    color: #317176;
    font-size: clamp(11px, 1.05cqw, 15px)
}

.latest-result span {
    font-size: 22px
}

.latest-result b {
    display: block;
    color: #184f60
}

.menu.has-result .hero {
    top: 16cqh
}

.menu.has-result h1 {
    font-size: 5.4cqw;
    margin-bottom: 2cqh
}

.menu.has-result .hero-copy {
    display: none
}

.overlay {
    position: absolute;
    inset: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3cqh 3cqw
}

.card {
    background: var(--cream);
    border: 3px solid #fffef5;
    border-radius: 28px;
    box-shadow: 0 14px 0 #5d8f9a20, 0 20px 80px #16435436;
    padding: clamp(18px, 2.5cqw, 36px);
    width: min(610px, 64cqw);
    max-height: 92cqh;
    text-align: center;
    position: relative
}

.card h2 {
    font-size: clamp(24px, 2.7cqw, 38px);
    letter-spacing: -1.1px;
    margin: 4px 0 10px
}

.card p {
    color: var(--muted);
    font-size: clamp(12px, 1.15cqw, 16px);
    line-height: 1.5;
    margin: 8px 0 18px
}

.card .eyebrow {
    justify-content: center;
    font-size: 10px;
    letter-spacing: 2px
}

.card .eyebrow:before {
    display: none
}

.close-button {
    position: absolute;
    right: 14px;
    top: 12px;
    border: 0;
    background: #e8f0e7;
    color: #6f8a8d;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center
}

.close-button svg {
    display: block;
    width: 18px;
    height: 18px;
    flex: none;
    stroke-width: 2.2
}

input {
    width: 100%;
    border: 2px solid #dce6d8;
    border-radius: 14px;
    background: #fff;
    color: var(--ink);
    font-size: clamp(19px, 2cqw, 28px);
    font-weight: bold;
    padding: 13px 18px;
    text-align: center;
    outline: none;
    min-height: 48px
}

input:focus {
    border-color: #8fc9be
}

input::placeholder {
    font-weight: normal;
    color: #a8b9b8
}

.keyboard {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 14px -8px 12px
}

.key-row {
    display: flex;
    gap: 5px;
    width: 100%;
    justify-content: center
}

.key {
    border: 1px solid #e4e8db;
    border-radius: 9px;
    background: #e9f1e5;
    color: #345c61;
    font-weight: 900;
    width: 8.7%;
    height: clamp(32px, 4.9cqh, 46px);
    box-shadow: 0 3px 0 #d4dfd1;
    font-size: clamp(11px, 1.1cqw, 16px);
    padding: 0;
    display: grid;
    place-items: center
}

.key:active {
    background: #b6ddd1;
    transform: translateY(2px)
}

.key.wide {
    width: 16%
}

.key.space {
    width: 44%
}

.key.space-key {
    display: flex;
    align-items: center;
    justify-content: center
}

.key .space-symbol {
    display: block;
    width: min(78%, 42px);
    height: 18px;
    flex: none;
    stroke-width: 2.5
}

.device-keyboard {
    font-size: 10px;
    min-height: 30px;
    margin: 0 auto;
    color: #79958f
}

.button-row {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 15px
}

.button-row .button {
    flex: 1
}

.button-row .secondary {
    flex: .5
}

.card-foot {
    font-size: 10px !important;
    margin: 16px 0 0 !important
}

.leader-card {
    width: min(840px, 84cqw);
    height: min(800px, 94dvh);
    padding: 22px 28px 18px;
    max-height: 94dvh;
    display: flex;
    flex-direction: column
}

.leader-card>* {
    flex-shrink: 0
}

.leader-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 12px 0;
    padding: 0 12px;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1.6px;
    color: #89a09f
}

.leader-list {
    display: grid;
    grid-auto-rows: 46px;
    align-content: start;
    gap: 5px;
    overflow-y: auto;
    max-height: none;
    min-height: 0;
    flex: 1;
    scrollbar-color: #b6d4c4 transparent;
    scrollbar-width: thin;
    overscroll-behavior: contain
}

.rank-row {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    text-align: left;
    border-radius: 11px;
    padding: 8px 12px;
    min-height: 46px;
    margin: 0;
    background: #edf2e7;
    border: 1px solid transparent
}

.rank-row.first {
    background: #fff0c9;
    border-color: #ffe1a0
}

.rank-row.second {
    background: #e9eff3;
    border-color: #cfdce4
}

.rank-row.third {
    background: #f3e3d1;
    border-color: #e0bea0
}

.rank-row.latest {
    box-shadow: inset 0 0 0 2px #8dcab6
}

.rank-place {
    display: grid;
    grid-template-columns: 26px 38px;
    align-items: center;
    gap: 8px
}

.rank-crown {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px
}

.rank-crown svg {
    display: block;
    width: 26px;
    height: 26px;
    fill: currentColor;
    stroke: var(--crown-edge);
    stroke-width: 1.4;
    stroke-linejoin: round
}

.rank-crown.gold {
    color: #edb338;
    --crown-edge: #b27d26
}

.rank-crown.silver {
    color: #bdcbd4;
    --crown-edge: #7a919e
}

.rank-crown.bronze {
    color: #ca9265;
    --crown-edge: #95633f
}

.rank-crown .crown-band {
    fill: var(--crown-edge);
    stroke: none
}

.rank-crown .crown-shine {
    fill: none;
    stroke: #fff9e5;
    stroke-width: 1.6;
    stroke-linecap: round
}

.rank-no {
    font-weight: 900;
    font-size: 20px;
    text-align: center;
    white-space: nowrap;
    color: #6b9290;
    font-variant-numeric: tabular-nums
}

.rank-row.first .rank-no {
    color: #b7872c
}

.rank-row.second .rank-no {
    color: #6d8191
}

.rank-row.third .rank-no {
    color: #996943
}

.rank-name {
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.rank-distance {
    font-size: 20px;
    font-weight: 900;
    color: #167c82;
    font-variant-numeric: tabular-nums
}

.rank-distance small {
    font-size: 11px;
    color: #7d9992
}

.empty-board {
    padding: 3cqh 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.empty-icon {
    font-size: 46px;
    display: block;
    margin-bottom: 8px;
    color: #e6b05c
}

.empty-board h3 {
    margin: 7px;
    font-size: 23px
}

.empty-board p {
    margin-bottom: 8px
}

.leader-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px
}

.leader-card .leader-actions .button {
    margin: 0;
    width: auto;
    min-height: 42px;
    padding: 9px 20px;
    font-size: 14px
}

.leader-pages {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto
}

.page-button {
    border: 1px solid #d6e2d3;
    border-radius: 10px;
    background: #e9f1e5;
    color: #306568;
    font-weight: bold;
    min-height: 40px;
    padding: 8px 13px;
    font-size: 13px;
    white-space: nowrap
}

.page-number {
    font-size: 12px;
    color: #718e8b;
    font-variant-numeric: tabular-nums;
    white-space: nowrap
}

.setup-card {
    width: min(600px, 66cqw)
}

.field-label {
    font-size: 12px;
    font-weight: 800;
    color: #60817c;
    display: block;
    text-align: left;
    margin: 16px 0 8px
}

.setup-card input {
    font-size: 20px
}

.setup-card #save {
    margin-top: 20px
}

.host-links {
    border-top: 1px solid #e1e8d8;
    margin-top: 20px;
    padding-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.danger-text {
    color: #c4857c
}

#host {
    background: #fffaf0d9;
    border: 1px solid #ffffffb0;
    border-radius: 12px;
    padding: 8px 12px
}

.confirm-card {
    width: min(540px, 70cqw)
}

.confirm-card .button {
    margin-top: 12px
}

.help-steps {
    display: grid;
    gap: 12px;
    margin: 20px 0;
    text-align: left
}

.help-step {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 14px;
    line-height: 1.45;
    color: #6c8b83
}

.help-step b {
    color: #2b6668
}

.help-step>span {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 11px;
    background: #e9edcf;
    color: #7a926d;
    font-weight: bold
}

#hud {
    position: absolute;
    inset: 3cqh 3cqw auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    z-index: 3;
    pointer-events: none
}

.hud-player,
.hud-best {
    border: 2px solid #fff;
    background: #fff9eaf2;
    border-radius: 20px;
    box-shadow: 0 4px 0 #2a647418;
    padding: 12px 18px;
    min-height: 64px
}

.hud-player {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 28%;
    min-width: 150px
}

.hud-player small,
.hud-best small {
    display: block;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.4px;
    color: #80a19b;
    margin-bottom: 4px
}

.hud-player b {
    display: block;
    font-size: 20px;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.pilot-star {
    font-size: 28px;
    color: #efb53f
}

.hud-distance {
    text-align: center;
    background: #fffaf0f5;
    border: 2px solid white;
    border-radius: 0 0 28px 28px;
    padding: 6px 34px 13px;
    margin-top: -3cqh;
    min-width: 170px;
    box-shadow: 0 5px 0 #1a6b7b19
}

.hud-distance strong {
    display: block;
    line-height: 1;
    font-size: clamp(29px, 4cqw, 57px);
    letter-spacing: -2px;
    font-weight: 1000;
    font-variant-numeric: tabular-nums
}

.hud-distance>span {
    display: block;
    letter-spacing: 3px;
    font-size: 9px;
    color: #86a098;
    font-weight: 900;
    margin-top: 6px
}

.hud-right {
    display: flex;
    gap: 10px;
    align-items: center
}

.hud-best {
    text-align: right;
    padding: 12px 18px
}

.hud-best b {
    font-size: 20px;
    color: #2f7475
}

.hud-right button {
    pointer-events: auto
}

#chase-status {
    position: absolute;
    bottom: 4cqh;
    left: 4cqw;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff8eaeb;
    border: 1px solid white;
    border-radius: 15px;
    padding: 10px 15px;
    z-index: 1
}

.chase-icon {
    font-size: 22px;
    color: #a577b9
}

#chase-status small {
    font-size: 8px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #6e8d88;
    display: block;
    margin-bottom: 6px
}

.chase-track {
    height: 5px;
    width: 130px;
    background: #e3e7d5;
    border-radius: 6px;
    overflow: hidden
}

.chase-track i {
    display: block;
    height: 100%;
    width: 90%;
    background: #84cbb3;
    border-radius: 6px;
    transition: width .15s, background .15s
}

#tap-hint {
    position: absolute;
    bottom: 5cqh;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    font-weight: bold;
    color: #397c89;
    background: #fff8e8db;
    border-radius: 100px;
    padding: 10px 22px;
    pointer-events: none
}

#tap-hint span {
    display: inline-block;
    margin-right: 4px
}

#notice {
    position: absolute;
    bottom: 4cqh;
    left: 50%;
    transform: translate(-50%, 8px);
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s, transform .2s;
    background: #fff9eaf0;
    border: 2px solid white;
    border-radius: 15px;
    padding: 10px 20px;
    color: #2c777b;
    box-shadow: 0 5px 15px #2b657f1f;
    font-weight: 800;
    font-size: 14px;
    max-width: 55%;
    text-align: center
}

#notice.show {
    opacity: 1;
    transform: translate(-50%, 0)
}

#storage-warning {
    position: absolute;
    bottom: 1cqh;
    left: 50%;
    transform: translateX(-50%);
    background: #fff0d1;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 10px;
    color: #986f3e;
    z-index: 8;
    white-space: nowrap
}

#rotate-message {
    position: absolute;
    inset: 0;
    background: #e4f6eeed;
    z-index: 10;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px
}

#rotate-message>span {
    font-size: 60px;
    color: #168b93
}

#rotate-message h2 {
    margin: 10px;
    font-size: 24px
}

#rotate-message p {
    font-size: 14px;
    color: #61888c
}

#rotate-message button {
    margin-top: 12px
}

.countdown {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    pointer-events: none !important;
    background: transparent
}

.countdown strong {
    font-size: 100px;
    color: #fffaf0;
    text-shadow: 0 5px 0 #258a9b, 0 8px 30px #125a6f33;
    line-height: 1
}

.countdown p {
    color: #1c6675;
    background: #fffaf0dd;
    border: 2px solid white;
    border-radius: 100px;
    padding: 12px 25px;
    font-size: 16px;
    font-weight: bold
}

.caught-card {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    text-align: center;
    background: #fff9eaf2;
    border: 3px solid white;
    border-radius: 26px;
    padding: 25px 45px;
    box-shadow: 0 10px 0 #54899422;
    pointer-events: none !important
}

.caught-card small {
    font-size: 12px;
    color: #86a18e;
    font-weight: bold;
    letter-spacing: 2px
}

.caught-card h2 {
    font-size: 36px;
    letter-spacing: -1px;
    margin: 10px 0;
    color: #1d7079
}

.caught-card p {
    font-size: 20px;
    color: #508283;
    margin: 0
}

.caught-card strong {
    color: #188c8b
}

@media(max-height:550px) {
    #header {
        top: 3cqh
    }

    .icon-button {
        width: 36px;
        height: 36px;
        border-radius: 12px
    }

    .icon-button svg {
        width: 18px;
        height: 18px
    }

    .party-badge {
        padding: 8px 14px
    }

    .hero {
        top: 20cqh
    }

    .hero-actions {
        gap: 8px
    }

    .button {
        min-height: 39px;
        padding: 9px 15px;
        border-radius: 12px
    }

    .hero-copy {
        margin-bottom: 3cqh
    }

    .menu-note {
        margin-top: 2cqh
    }

    .card {
        padding: 15px 22px;
        border-radius: 21px
    }

    .card h2 {
        margin: 3px 0 5px
    }

    .card p {
        margin: 4px 0 10px
    }

    .name-card>.eyebrow,
    .name-card>p:not(.card-foot) {
        display: none
    }

    .keyboard {
        gap: 5px;
        margin: 9px -8px
    }

    .key {
        height: 31px;
        border-radius: 6px
    }

    .key-row {
        gap: 4px
    }

    .device-keyboard {
        min-height: 20px;
        padding: 2px
    }

    .button-row {
        margin-top: 9px
    }

    .card-foot {
        margin-top: 9px !important
    }

    .menu-footer {
        bottom: 1cqh
    }

    .latest-result {
        padding: 7px 10px
    }

    .rank-row {
        padding: 9px;
        margin: 4px 0
    }

    .rank-name {
        font-size: 15px
    }

    .rank-distance {
        font-size: 18px
    }

    .leader-card .button {
        margin-top: 10px
    }

    .leader-header {
        margin: 8px 0
    }

    .leader-list {
        max-height: 43cqh
    }

    .hud-player,
    .hud-best {
        min-height: 48px;
        padding: 7px 11px;
        border-radius: 14px
    }

    .hud-player {
        min-width: 130px;
        gap: 7px
    }

    .hud-player b,
    .hud-best b {
        font-size: 15px
    }

    .hud-player small,
    .hud-best small {
        font-size: 7px;
        letter-spacing: .7px
    }

    .hud-distance {
        padding: 6px 25px 8px;
        min-width: 140px;
        border-radius: 0 0 19px 19px
    }

    .pilot-star {
        font-size: 22px
    }

    #chase-status {
        bottom: 3cqh;
        padding: 7px 10px
    }

    #tap-hint {
        font-size: 11px;
        padding: 8px 15px
    }

    #notice {
        font-size: 12px;
        padding: 8px 14px
    }

    .field-label {
        margin: 9px 0 5px
    }

    .setup-card input {
        padding: 8px;
        font-size: 17px;
        min-height: 38px
    }

    .setup-card #save {
        margin-top: 12px
    }

    .host-links {
        margin-top: 12px;
        padding-top: 5px
    }

    .setup-card .card-foot {
        font-size: 9px !important
    }

    .help-steps {
        gap: 9px;
        margin: 10px 0
    }

    .help-step {
        font-size: 12px
    }

    .scene-caption {
        padding: 9px 16px
    }

    .countdown strong {
        font-size: 70px
    }

    .caught-card {
        padding: 18px 30px
    }

    .caught-card h2 {
        font-size: 30px
    }
}

@media(max-height:450px) and (orientation:landscape) {
    .hero {
        top: 18cqh
    }

    .hero h1 {
        font-size: clamp(30px, 6.1cqw, 60px)
    }

    .menu-note {
        display: none
    }

    .name-card {
        padding: 12px 22px
    }

    .name-card h2 {
        font-size: 24px;
        margin: 0 0 8px
    }

    .name-card input {
        min-height: 40px;
        padding: 8px 14px;
        font-size: 20px
    }

    .name-card .keyboard {
        margin: 8px -8px
    }

    .name-card .card-foot {
        font-size: 9px !important;
        margin-top: 8px !important
    }
}

@media(max-width:700px) {
    .party-badge {
        max-width: 35%;
        font-size: 9px
    }

    .brand small {
        letter-spacing: 1.1px
    }

    .brand {
        gap: 6px
    }

    .tools {
        gap: 6px
    }

    .hero-actions {
        min-width: 0;
        width: 31cqw
    }

    .hero h1 {
        letter-spacing: -2px
    }

    .hero-copy {
        font-size: 11px;
        width: 35cqw;
        max-width: 35cqw
    }

    .hero-actions .button {
        font-size: 11px
    }

    .hero-actions .arrow {
        font-size: 18px
    }

    .menu-note {
        font-size: 8px
    }

    .menu-footer {
        font-size: 8px
    }

    .scene-caption {
        font-size: 9px
    }

    .card {
        width: 73cqw
    }

    .leader-card {
        width: 83cqw
    }

    .hud-best small {
        font-size: 6px
    }

    .hud-right {
        gap: 6px
    }

    .hud-player {
        min-width: 110px
    }

    .hud-player b {
        max-width: 95px
    }

    .hud-distance {
        min-width: 120px
    }

    .chase-track {
        width: 95px
    }

    .chase-icon {
        font-size: 17px
    }

    .hud-player small {
        font-size: 6px
    }

    #chase-status small {
        font-size: 6px
    }

    .leader-list {
        max-height: 40cqh
    }
}

@media(orientation:portrait) {
    #stage {
        width: 100vw;
        height: 100dvh;
        max-width: none;
        max-height: none
    }

    .brand {
        font-size: 16px
    }

    .brand-icon {
        width: 35px;
        height: 35px
    }

    .party-badge {
        display: none
    }

    .hero {
        top: 18%;
        left: 8%;
        width: 84%
    }

    .hero h1 {
        font-size: 17vw
    }

    .hero-copy {
        font-size: 16px;
        width: 80%;
        max-width: none
    }

    .hero-actions {
        width: 75%;
        gap: 15px
    }

    .hero-actions .button {
        font-size: 16px;
        min-height: 55px
    }

    .hero-actions .secondary {
        font-size: 14px
    }

    .menu-note {
        font-size: 10px;
        margin-top: 20px
    }

    .menu-footer {
        bottom: 2%;
        left: 7%;
        right: 7%;
        font-size: 9px
    }

    .scene-caption {
        top: auto;
        bottom: 13%;
        left: auto;
        right: 7%;
        font-size: 12px;
        z-index: -1
    }

    .menu.has-result .hero {
        top: 16%
    }

    .menu.has-result h1 {
        font-size: 15vw
    }

    .latest-result {
        max-width: 90%;
        font-size: 12px;
        padding: 14px
    }

    .card {
        width: 90%;
        max-height: 90%;
        padding: 22px
    }

    .card h2 {
        font-size: 28px
    }

    .card p {
        font-size: 14px
    }

    .leader-list {
        max-height: 48dvh
    }

    .leader-card .button {
        width: 90%
    }

    .rank-row {
        grid-template-columns: 76px minmax(0, 1fr) auto;
        gap: 8px
    }

    .rank-name {
        font-size: 16px
    }

    .rank-distance {
        font-size: 17px
    }

    .field-label {
        font-size: 12px
    }
}

#asset-loader {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: grid;
    place-items: center;
    background: #e3f8f238;
    backdrop-filter: blur(5px)
}

.loading-card {
    background: #fffaf0f2;
    border: 3px solid white;
    border-radius: 28px;
    padding: 28px 42px;
    text-align: center;
    max-width: 88vw;
    box-shadow: 0 14px 50px #285f6b20
}

.loading-card h2 {
    font-size: clamp(22px, 3vw, 32px);
    letter-spacing: -1px;
    margin: 10px 0;
    color: #276b74
}

.loading-card p {
    font-size: 13px;
    color: #74958d;
    margin: 12px 0 18px
}

.loading-star {
    font-size: 42px;
    color: #f6b54a;
    display: inline-block;
    animation: star-float 1.6s ease-in-out infinite
}

.loading-track {
    height: 5px;
    border-radius: 20px;
    background: #e2ecdf;
    width: 180px;
    overflow: hidden;
    margin: auto
}

.loading-track i {
    display: block;
    height: 100%;
    width: 55%;
    background: #7dc6b0;
    border-radius: 20px;
    animation: loading-slide 1.5s ease-in-out infinite
}

.loading-card .button {
    margin: 15px auto 0
}

.audio-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 15px 0
}

.audio-buttons button {
    background: #e7efdf;
    color: #5e8278;
    border: 1px solid #d4e3d1;
    border-radius: 12px;
    padding: 9px 16px;
    font-size: 12px;
    font-weight: bold;
    min-height: 38px
}

.icon-button[aria-pressed=false] {
    color: #91a8a5
}

.caught-card {
    animation: result-pop .35s cubic-bezier(.2, 1.6, .5, 1) both
}

@keyframes loading-slide {

    0%,
    100% {
        transform: translateX(-80%)
    }

    50% {
        transform: translateX(165%)
    }
}

@keyframes star-float {

    0%,
    100% {
        transform: translateY(2px) rotate(-8deg)
    }

    50% {
        transform: translateY(-7px) rotate(8deg)
    }
}

@keyframes result-pop {
    from {
        opacity: 0;
        transform: translate(-50%, -42%) scale(.8)
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1)
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        scroll-behavior: auto !important;
        transition: none !important
    }
}

@media(max-height:450px) and (orientation:landscape) {

    .setup-card>p:not(.card-foot),
    .leader-card>p:not(.card-foot) {
        display: none
    }

    .empty-board {
        padding: 8px
    }

    .empty-icon {
        font-size: 30px;
        margin-bottom: 3px
    }

    .empty-board h3 {
        font-size: 18px
    }

    .empty-board p {
        font-size: 11px
    }
}

@media(max-height:750px) and (orientation:landscape) {
    .leader-card {
        height: min(450px, 94dvh);
        padding: 14px 20px;
        max-height: 94dvh
    }

    .leader-card>.eyebrow,
    .leader-card>p:not(.card-foot),
    .leader-header {
        display: none
    }

    .leader-card h2 {
        font-size: 26px;
        margin: 0 0 10px
    }

    .leader-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(5, 44px);
        grid-auto-flow: column;
        max-height: none;
        gap: 5px 10px
    }

    .rank-row {
        padding: 8px;
        margin: 0;
        min-height: 44px;
        grid-template-columns: 60px minmax(0, 1fr) auto;
        gap: 7px
    }

    .rank-place {
        grid-template-columns: 22px 32px;
        gap: 4px
    }

    .rank-crown,
    .rank-crown svg {
        width: 22px;
        height: 22px
    }

    .rank-name {
        font-size: 15px
    }

    .rank-distance {
        font-size: 17px
    }

    .rank-no {
        font-size: 17px
    }

    .leader-actions {
        margin-top: 10px;
        gap: 8px
    }

    .leader-card .leader-actions .button {
        min-height: 34px;
        font-size: 12px;
        padding: 7px 12px
    }

    .page-button {
        min-height: 34px;
        padding: 6px 10px;
        font-size: 12px
    }

    .leader-pages {
        gap: 8px
    }

    .leader-card .card-foot {
        margin-top: 10px !important
    }
}

@media(max-height:450px) and (orientation:landscape) {
    .leader-card {
        padding: 10px 20px
    }

    .leader-card h2 {
        margin-bottom: 7px
    }

    .leader-actions {
        margin-top: 8px
    }

    .leader-card .card-foot {
        margin-top: 5px !important
    }
}

@media(max-height:350px) and (orientation:landscape) {
    .leader-card {
        padding: 10px 15px
    }

    .leader-card h2 {
        font-size: 22px;
        margin-bottom: 7px
    }

    .leader-list {
        grid-template-rows: repeat(5, 34px);
        gap: 3px 8px
    }

    .rank-row {
        min-height: 34px;
        padding: 5px 6px;
        grid-template-columns: 49px minmax(0, 1fr) auto;
        gap: 5px
    }

    .rank-place {
        grid-template-columns: 18px 27px;
        gap: 3px
    }

    .rank-crown,
    .rank-crown svg {
        width: 18px;
        height: 18px
    }

    .rank-name {
        font-size: 12px
    }

    .rank-distance {
        font-size: 14px
    }

    .rank-no {
        font-size: 14px
    }

    .rank-distance small {
        font-size: 9px
    }

    .leader-actions {
        margin-top: 7px
    }

    .leader-card .card-foot {
        margin-top: 5px !important;
        font-size: 9px !important
    }
}