/* Game front end: scenic title screen, quiet navigation and focused race setup. */
body.front-end {
  color-scheme: dark;
  --front-ink: #f7f4e8;
  --front-muted: #becdce;
  --front-accent: #f0d293;
  --front-line: #d5e8e32b;
  background: #08232e;
  color: var(--front-ink);
}
body.front-end::before { display: none; }
.front-home, .front-shell { position: relative; isolation: isolate; min-height: 100svh; }
.front-home { display: flex; flex-direction: column; }
.front-home .front-lobby { flex: 1; min-height: 0; width: 100%; margin: 0; }
.front-home::before, .front-shell::before {
  content: ''; position: fixed; inset: 0; z-index: -2;
  background: url('/public/assets/island-hero.png') 59% center / cover no-repeat;
  animation: front-scene-in 1.2s ease-out both;
}
.front-home::after, .front-shell::after {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(90deg, #031923ee 0%, #061e29c9 27%, #07273225 66%), linear-gradient(0deg, #041b28e8, #041c2915 65%, #04192386);
}
.front-shell::after { background: linear-gradient(90deg, #041c29ed, #082937d9), linear-gradient(0deg, #041b28e8, #041c2933); }
.front-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px 4.5vw 20px; min-height: 108px; }
.front-brand { display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; color: var(--front-ink); text-align: left; }
.front-brand-mark { display: grid; place-items: center; width: 44px; height: 46px; color: var(--front-accent); border: 1px solid #f0d29370; transform: skew(-8deg); }
.front-brand-mark .icon { width: 26px; height: 26px; }
.front-brand > span:last-child { font: 600 28px/.95 var(--condensed); letter-spacing: 1.5px; }
.front-brand b { font-weight: 800; }
.front-brand small { display: block; font: 600 8px var(--body); letter-spacing: 3px; color: var(--front-muted); margin-top: 9px; }
.front-player { display: flex; align-items: center; gap: 24px; }
.front-mode { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; }
.front-mode i { width: 5px; height: 5px; background: #a9dab8; border-radius: 50%; box-shadow: 0 0 10px #a9dab877; }
.front-mode.is-trial i { background: var(--front-accent); box-shadow: 0 0 10px #f0d29377; }
.front-credits { display: flex; align-items: center; gap: 7px; font: 600 22px var(--condensed); font-variant-numeric: tabular-nums; }
.front-credits .icon { width: 15px; height: 15px; color: var(--front-accent); }
.front-credits small { font: 500 9px var(--body); color: var(--front-muted); }
.front-settings { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 0 0 24px; border: 0; border-left: 1px solid var(--front-line); background: none; font-size: 10px; font-weight: 700; letter-spacing: 1px; color: var(--front-ink); }
.front-settings .icon { width: 18px; height: 18px; }
.front-lobby { display: grid; grid-template-columns: minmax(310px, 1fr) minmax(280px, 360px); gap: 8vw; align-items: end; padding: 25px 6.5vw 45px; min-height: calc(100svh - 170px); max-width: none; }
.front-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 9px; line-height: 1.5; letter-spacing: 2px; font-weight: 700; color: var(--front-accent); }
.front-eyebrow > span { height: 1px; width: 25px; background: var(--front-accent); }
.front-main-menu { max-width: 450px; animation: front-content-in .5s ease-out both; }
.front-main-menu h1 { font: 800 clamp(66px, 7.3vw, 114px)/.85 var(--condensed); color: var(--front-ink); margin: 22px 0 34px; letter-spacing: -1.5px; text-transform: uppercase; }
.front-main-menu h1 em { font-style: italic; color: var(--front-accent); }
.front-menu { display: flex; flex-direction: column; gap: 3px; }
.front-menu > button { position: relative; display: flex; align-items: center; width: 100%; gap: 17px; min-height: 71px; padding: 10px 16px 10px 3px; border: 0; border-left: 3px solid transparent; background: transparent; color: var(--front-ink); text-align: left; transition: background .18s, padding .18s, border-color .18s; }
.front-choice-number { font-size: 10px; letter-spacing: 1px; color: #b2c6c080; min-width: 21px; text-align: right; }
.front-choice-copy { display: flex; flex-direction: column; gap: 4px; }
.front-choice-copy strong { font: 700 33px/.95 var(--condensed); letter-spacing: 1px; }
.front-choice-copy small { font-size: 10px; line-height: 1.5; color: var(--front-muted); }
.front-choice-arrow { margin-left: auto; opacity: 0; transform: translateX(-7px); transition: opacity .18s, transform .18s; color: var(--front-accent); }
.front-choice-arrow .icon { width: 23px; height: 23px; }
.front-menu > button:hover, .front-menu > button:focus { outline: 0; padding-left: 14px; border-left-color: var(--front-accent); background: linear-gradient(90deg, #e4eddf1c, #e4eddf04); }
.front-menu > button:hover .front-choice-arrow, .front-menu > button:focus .front-choice-arrow { opacity: 1; transform: translateX(0); }
.front-menu > button:hover .front-choice-number, .front-menu > button:focus .front-choice-number { color: var(--front-accent); }
.front-menu .front-primary-choice .front-choice-copy strong { color: var(--front-accent); }
.front-race-brief { padding: 24px 25px 0; border-top: 1px solid #f0d29380; background: linear-gradient(180deg, #061e2be0, #061e2b99 90%, #061e2b00); backdrop-filter: blur(8px); animation: front-content-in .65s ease-out both; }
.front-destination { padding: 23px 0 22px; }
.front-destination > span { display: block; font-size: 10px; color: var(--front-muted); letter-spacing: .6px; }
.front-destination h2 { font: 600 51px/.95 var(--condensed); color: var(--front-ink); margin: 7px 0 11px; }
.front-destination > p { font-size: 11px; color: #d8e5e3; margin: 0; }
.front-conditions { display: flex; align-items: center; gap: 15px; font-size: 9px; letter-spacing: .7px; color: var(--front-muted); margin: 21px 0 11px; }
.front-conditions span { display: flex; align-items: center; gap: 5px; }
.front-conditions .icon { width: 15px; height: 15px; }
.front-link { display: inline-flex; gap: 10px; align-items: center; padding: 9px 0; min-height: 35px; background: none; border: 0; color: var(--front-accent); font-size: 9px; font-weight: 700; letter-spacing: .7px; }
.front-link .icon { width: 15px; height: 15px; }
.front-vessel { display: flex; align-items: center; gap: 11px; padding: 21px 0; border-block: 1px solid var(--front-line); }
.front-vessel-art { position: relative; width: 87px; height: 110px; flex: 0 0 87px; background: radial-gradient(ellipse, #76c6c333, transparent 68%); }
.front-vessel-art > .boat-sprite { width: 137px; height: 137px; max-width: none; left: 50%; top: 50%; rotate: 30deg; animation: none; filter: drop-shadow(5px 6px 9px #0007); }
.front-vessel > div:last-child { min-width: 0; }
.front-vessel .front-eyebrow { font-size: 8px; letter-spacing: 1.7px; }
.front-vessel h3 { font: 600 27px/1.1 var(--condensed); margin: 8px 0 5px; color: var(--front-ink); }
.front-vessel p { font-size: 10px; color: var(--front-muted); margin: 0; line-height: 1.5; }
.front-vessel p i { font-style: normal; margin: 0 4px; }
.front-brief-actions { display: flex; flex-direction: column; gap: 4px; padding-top: 20px; }
.front-brief-actions > button { display: flex; align-items: center; justify-content: space-between; min-height: 47px; padding: 12px 15px; border: 1px solid #f0d29366; background: #f0d293; color: #092531; font-size: 10px; font-weight: 800; letter-spacing: 1px; }
.front-brief-actions > button:last-child { background: none; color: var(--front-muted); border: none; font-size: 9px; padding-inline: 0; min-height: 39px; }
.front-brief-actions .icon { width: 17px; height: 17px; }
.front-save-note { display: flex; gap: 6px; align-items: flex-start; font-size: 9px; line-height: 1.6; color: var(--front-muted); margin: 12px 0 0; padding-bottom: 19px; }
.front-save-note .icon { width: 12px; height: 12px; flex-shrink: 0; margin-top: 1px; }
.front-footer { width: 100%; max-width: none; margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 13px 4.5vw max(22px, env(safe-area-inset-bottom)); min-height: 62px; border-top: 1px solid #d5e8e319; color: #aec4c6; font-size: 8px; letter-spacing: 1px; }
.front-footer > span:nth-child(2) { display: inline-flex; }
.front-footer i { margin: 0 9px; font-style: normal; opacity: .5; }
.front-key-hints { gap: 6px; align-items: center; font-size: 8px; letter-spacing: .7px; }
.front-end kbd { background: #d9e9e30b; color: #d7e6e6; border: 1px solid #c8dbd433; min-width: 19px; height: 20px; font-size: 9px; }
.front-key-hints kbd:not(:first-child) { margin-left: 10px; }
.front-key-hints kbd:nth-child(2) { margin-left: 0; }
.front-footer button { display: flex; align-items: center; gap: 9px; min-height: 35px; font-size: 9px; color: #d5e3e1; background: none; border: 0; }
.front-footer .icon { width: 13px; height: 13px; }
.front-subnav { display: flex; align-items: center; gap: 30px; margin: 0 4.5vw; border-block: 1px solid var(--front-line); min-height: 65px; }
.front-back { display: flex; align-items: center; gap: 9px; min-height: 44px; border: 0; background: none; color: var(--front-muted); font-size: 10px; font-weight: 700; letter-spacing: 1px; }
.front-back .icon { width: 16px; height: 16px; rotate: 180deg; }
.front-nav { display: flex; align-items: stretch; gap: 26px; min-height: 64px; }
.front-nav button { padding: 12px 0; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--front-muted); font: 600 20px var(--condensed); letter-spacing: .5px; }
.front-nav button[aria-current] { color: var(--front-accent); border-bottom-color: var(--front-accent); }
.front-location { margin-left: auto; font-size: 9px; color: #95afb1; text-transform: uppercase; letter-spacing: 1px; }
.front-shell main { padding: 34px 4.5vw 45px; max-width: 1600px; margin: auto; min-height: calc(100svh - 235px); }
.front-trial-note { display: flex; align-items: center; gap: 13px; font-size: 9px; letter-spacing: 1px; color: var(--front-accent); margin: 0 0 22px; }
.front-trial-note span { font-size: 10px; color: var(--front-muted); letter-spacing: 0; }
.front-section-nav { display: flex; gap: 22px; margin-bottom: 24px; border-bottom: 1px solid var(--front-line); }
.front-section-nav button { color: var(--front-muted); background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 0; min-height: 44px; font-size: 11px; }
.front-section-nav button[aria-current] { color: var(--front-accent); border-color: var(--front-accent); }
.front-end .page-heading h1 { color: var(--front-ink); font-size: clamp(34px, 4vw, 54px); text-shadow: none; }
.front-end .page-heading h1:focus { outline: 0; }
.front-end .page-heading p, .front-end .eyebrow { color: var(--front-muted); }
.front-end .eyebrow.orange { color: var(--front-accent); }
.front-end .season-badge, .front-end .shop-pod-tag { color: var(--front-muted); background: none; border-color: var(--front-line); }
.front-end .online-account-link { color: var(--front-ink); background: none; border-color: var(--front-line); }
.front-end .online-account-link strong { color: var(--front-ink); }
.front-end .online-account-link span { color: var(--front-muted); }
.front-end .online-panel label, .front-end .online-boat-showcase > span:last-child, .front-end .skipper-stats span { color: var(--front-muted); }
.front-end .online-boat-showcase strong, .front-end .skipper-rating strong { color: var(--front-accent); }
.front-end .online-panel input, .front-end .online-panel select { color: var(--front-ink); background: #051d28; border-color: #c9dbd344; }
/* Remove ornamental bitmap surrounds in the front end; racing HUD keeps its art. */
.front-end :is(.fleet-class-group,.garage-card,.shop-card,.shop-side-card,.track-card,.record-stats article,.records-table,.empty-records,.online-panel) {
  border: 1px solid var(--front-line); border-image: none; border-radius: 2px; background: #092a36db; color: var(--front-ink); box-shadow: 0 7px 24px #0002;
}
.front-end :is(.fleet-class-heading h2,.fleet-class-count,.garage-card h2,.shop-item-title h3,.shop-side-card h2,.track-body h3,.empty-records h2,.record-stats article strong,.online-panel h2) { color: var(--front-ink); }
.front-end :is(.fleet-class-description,.fleet-class-count small,.fleet-class-intro,.garage-card > p,.boat-characteristics p,.shop-card-details p,.track-body p,.track-meta,.empty-records p,.shop-side-card p,.online-panel p) { color: var(--front-muted); }
.front-end .fleet-class-group > summary { padding: 22px; }
.front-end .fleet-class-body { padding: 0 22px 22px; }
.front-end .fleet-class-emblem { color: var(--front-accent); background: #b8d5ce0b; border-color: var(--front-line); }
.front-end .fleet-class-intro, .front-end .boat-characteristics, .front-end .track-meta { border-color: var(--front-line); }
.front-end .boat-characteristics > span { color: var(--front-accent); }
.front-end .garage-card { padding: 20px; }
.front-end .shop-card { padding: 22px; }
.front-end .shop-icon { background: #b8d5ce0b; color: var(--front-accent); border-color: var(--front-line); }
.front-end .stat-row > span, .front-end .stat-row > strong { color: var(--front-muted); }
.front-end .stat-meter { background: #ffffff12; border: 0; }
.front-end .stat-meter i, .front-end .upgrade-levels i.filled { background: var(--front-accent); }
.front-end .garage-card.selected, .front-end .track-card.selected { border-color: #f0d293aa; }
.front-end .mini-tag, .front-end .collection-count, .front-end .circuit-toolbar, .front-end .circuit-toolbar strong { color: var(--front-accent); }
.front-end .circuit-toolbar { background: #dce8df08; border: 1px solid var(--front-line); }
.front-end .circuit-toolbar > span { color: var(--front-muted); }
.front-end .mini-tag { background: #f0d29312; border-color: #f0d29344; }
.front-end :is(.primary-button,.dark-button,.outline-button,.shop-buy,.equipped-button,.trial-refits,.fleet-filters > button,.stage-tabs > button) {
  border: 1px solid #c9dbd344; border-image: none; border-radius: 2px; box-shadow: none; background: #dce8df0a; color: var(--front-ink); padding: 12px 17px; min-height: 44px; font-size: 10px;
}
.front-end button:is(.primary-button,.shop-buy) { color: #092531; background: var(--front-accent); border-color: var(--front-accent); }
.front-end button:is(.primary-button,.shop-buy) .icon { color: #092531; }
.front-end .fleet-filters > button.active, .front-end .stage-tabs > button.active { color: var(--front-accent); border-color: var(--front-accent); background: #f0d29314; }
.front-end .outline-button { color: var(--front-accent); }
.front-end .equipped-button { color: #b9d9c4; }
.front-end .records-table-head { background: #ffffff06; color: var(--front-muted); }
.front-end .records-table > button { color: var(--front-ink); border-color: var(--front-line); }
.front-end .track-body { padding: 18px; }
.front-end .track-meta { margin-inline: 18px; }
.front-end .track-open { color: var(--front-accent); border-color: var(--front-line); background: none; }
.front-end .track-art { height: 180px; }
.front-end .track-image-overlay { background: linear-gradient(0deg, #082a3680, transparent); }
.front-end :is(.stage-modal,.help-modal,.settings-modal,.result-modal) { border: 1px solid #b5c9bd66; border-image: none; border-radius: 3px; color: var(--front-ink); background: #09232ff7; box-shadow: 0 30px 100px #0008; }
.front-end .modal-backdrop { background: #03141cbd; backdrop-filter: blur(12px); padding: 28px; }
.front-end .modal-close { color: var(--front-muted); border: 1px solid var(--front-line); border-image: none; background: #09232fdb; width: 42px; height: 42px; right: 18px; top: 18px; }
.front-end .stage-modal { width: 790px; max-height: calc(100dvh - 56px); }
.front-end .stage-banner { height: 180px; }
.front-end .stage-banner-overlay { background: linear-gradient(90deg, #042230e8, #04223085 55%, #04223020), linear-gradient(0deg, #04223090, transparent); }
.front-end .stage-banner-copy { padding: 33px; }
.front-end .stage-banner-copy h2 { color: var(--front-ink); font-size: 54px; }
.front-end .stage-banner-copy > span { color: #d4e1db; }
.front-end .stage-prize { color: var(--front-accent); right: 32px; background: #072a39cf; border: 1px solid #f0d29355; }
.front-end .stage-prize small { color: var(--front-muted); }
.front-end .stage-body { padding: 22px 32px 24px; }
.front-end .stage-conditions { border-color: var(--front-line); color: var(--front-muted); font-size: 9px; }
.front-end .stage-conditions .icon { color: var(--front-accent); }
.front-end .stage-intro { margin-bottom: 17px; }
.front-end .stage-intro h3 { color: var(--front-ink); font-size: 30px; }
.front-end .stage-intro .credit-balance { color: var(--front-accent); }
.front-end .stage-tabs { gap: 8px; border: 0; margin-bottom: 16px; }
.front-end .stage-tabs > button { font-size: 9px; padding: 10px 15px; }
.front-end .stage-tabs button > span { background: #f0d29314; color: var(--front-accent); }
.front-end .stage-overview { display: grid; grid-template-columns: 165px 1fr; gap: 28px; align-items: center; padding: 10px 0 22px; }
.front-end .stage-overview-art { position: relative; height: 168px; background: radial-gradient(ellipse, #65bbbd28, transparent 68%); }
.front-end .stage-overview-art > .boat-sprite { width: 212px; height: 212px; max-width: none; rotate: 30deg; animation: none; }
.front-end .stage-overview h3 { font: 600 34px var(--condensed); color: var(--front-ink); margin: 7px 0; }
.front-end .stage-overview p { color: var(--front-muted); font-size: 11px; line-height: 1.65; margin: 8px 0; }
.front-end .stage-overview .front-eyebrow { color: var(--front-accent); }
.front-end .stage-overview-meta { display: flex; gap: 20px; font-size: 10px; color: var(--front-muted); padding-top: 9px; }
.front-end .stage-footer { background: none; border-color: var(--front-line); margin-top: 0; padding-top: 20px; }
.front-end .stage-current-pod strong { color: var(--front-ink); }
.front-end .stage-current-pod > span { color: var(--front-muted); }
.front-end .stage-footer > .primary-button { min-height: 51px; font-size: 11px; }
.front-end .stage-control-hint { color: #9cb5b9; font-size: 8px; }
.front-end .small-shop-card { padding: 13px; }
.front-end .settings-modal { position: relative; width: 550px; padding: 40px; max-height: calc(100dvh - 56px); overflow-y: auto; }
.front-end .settings-modal h2 { font: 700 50px/1 var(--condensed); margin: 10px 0 13px; }
.front-end .settings-modal > p { color: var(--front-muted); font-size: 12px; margin: 0 0 23px; }
.front-setting-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; border: 0; border-top: 1px solid var(--front-line); width: 100%; min-height: 91px; background: transparent; text-align: left; padding: 20px 0; color: var(--front-ink); }
.front-setting-row > span { display: flex; flex-direction: column; gap: 7px; }
.front-setting-row strong { font-size: 14px; font-weight: 600; }
.front-setting-row small { font-size: 11px; color: var(--front-muted); line-height: 1.5; }
.front-setting-row b { font-size: 11px; color: var(--front-accent); border: 1px solid #f0d29350; padding: 10px 14px; }
.front-setting-row[aria-checked='false'] b { color: var(--front-muted); border-color: var(--front-line); }
.front-setting-row .icon { width: 19px; height: 19px; }
.front-settings-note { font-size: 11px; line-height: 1.6; color: var(--front-muted); background: #dce8df08; padding: 14px; margin: 0 0 16px; border-left: 2px solid #f0d29366; }
.front-end .settings-modal > .primary-button { width: 100%; justify-content: space-between; margin-top: 16px; }
.front-end .help-modal h2, .front-end .result-modal h2 { color: var(--front-ink); }
.front-end .help-modal > p { color: var(--front-muted); }
.front-end .control-grid { background: #ffffff05; border-color: var(--front-line); }
.front-end .control-grid span { color: var(--front-muted); }
.front-end .help-pickups { color: var(--front-accent); }
.front-end .touch-help { background: #ffffff05; border-color: var(--front-line); color: var(--front-muted); }
.front-end button:focus-visible, .front-end a:focus-visible, .front-end summary:focus-visible { outline: 2px solid var(--front-accent); outline-offset: 5px; }
.front-end button:hover { filter: none; }
.front-end .front-home button:hover { transform: none; }
.front-end .front-menu > button:focus-visible { outline: 0; }
.front-end button:active { translate: 0 1px; }
.front-end #toast { left: 50%; color: var(--front-ink); background: #0b2d3bed; border-color: #f0d29388; }
@keyframes front-scene-in { from { opacity: .5; } to { opacity: 1; } }
@keyframes front-content-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 1000px) and (max-height: 850px) {
  .front-header { min-height: 87px; padding-top: 22px; }
  .front-lobby { min-height: calc(100svh - 149px); padding-top: 10px; padding-bottom: 26px; }
  .front-main-menu h1 { font-size: 76px; margin: 14px 0 20px; }
  .front-menu > button { min-height: 62px; }
  .front-choice-copy strong { font-size: 29px; }
  .front-race-brief { padding-top: 20px; }
}
@media (max-width: 1000px) {
  .front-player { gap: 16px; }
  .front-lobby { gap: 40px; padding-inline: 5vw; grid-template-columns: minmax(280px,1fr) minmax(265px, 330px); }
  .front-main-menu h1 { font-size: 83px; }
  .front-nav { gap: 20px; }
  .front-location { display: none; }
  .front-shell .online-account-link { display: none; }
  .front-race-brief { padding-inline: 21px; }
  .front-nav button { font-size: 19px; }
}
@media (max-width: 700px) {
  .front-header { padding: max(22px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) 16px max(22px,env(safe-area-inset-left)); min-height: 90px; gap: 10px; }
  .front-brand-mark { width: 31px; height: 35px; }
  .front-brand-mark .icon { width: 21px; height: 21px; }
  .front-brand { gap: 9px; }
  .front-brand > span:last-child { font-size: 21px; letter-spacing: .8px; }
  .front-brand small { font-size: 6px; letter-spacing: 1.5px; margin-top: 6px; }
  .front-player { gap: 13px; }
  .front-mode { font-size: 8px; letter-spacing: .8px; }
  .front-mode i { width: 4px; height: 4px; }
  .front-player .front-credits { display: none; }
  .front-settings { padding-left: 0; border-left: 0; width: 35px; justify-content: center; }
  .front-settings span { display: none; }
  .front-home::before { background-position: 64% center; }
  .front-home::after { background: linear-gradient(90deg, #031923e3, #03192399 63%, #0319233d), linear-gradient(0deg, #031923f2, #03192300 75%); }
  .front-lobby { display: flex; flex-direction: column; align-items: stretch; gap: 38px; padding: 19px max(24px,env(safe-area-inset-right)) 30px max(24px,env(safe-area-inset-left)); min-height: calc(100svh - 153px); }
  .front-main-menu { max-width: none; }
  .front-main-menu h1 { font-size: clamp(66px,17vw,92px); margin: 18px 0 27px; }
  .front-menu > button { min-height: 68px; padding-right: 9px; gap: 15px; }
  .front-choice-copy strong { font-size: 30px; }
  .front-choice-copy small { font-size: 10px; }
  .front-choice-number { font-size: 9px; }
  .front-race-brief { padding: 21px 20px 0; width: 100%; }
  .front-race-brief > .front-eyebrow { font-size: 8px; }
  .front-destination { padding-top: 18px; }
  .front-destination h2 { font-size: 43px; }
  .front-vessel-art { height: 91px; }
  .front-vessel-art > .boat-sprite { width: 120px; height: 120px; }
  .front-vessel { padding-block: 17px; }
  .front-vessel .front-link { min-height: 44px; }
  .front-destination .front-link { min-height: 44px; }
  .front-brief-actions > button { min-height: 48px; }
  .front-footer { padding-inline: 24px; gap: 12px; font-size: 7px; }
  .front-footer > span:first-child { max-width: 190px; line-height: 1.8; }
  .front-footer > .front-key-hints { display: none; }
  .front-footer button { min-height: 44px; font-size: 8px; }
  .front-subnav { margin-inline: 22px; gap: 17px; align-items: flex-start; padding-top: 4px; }
  .front-back { flex-shrink: 0; min-height: 60px; font-size: 9px; }
  .front-nav { overflow-x: auto; gap: 21px; min-height: 60px; white-space: nowrap; padding-right: 8px; scrollbar-width: thin; }
  .front-nav button { font-size: 19px; min-height: 60px; flex-shrink: 0; }
  .front-shell main { padding: 26px 22px 35px; }
  .front-trial-note { align-items: flex-start; line-height: 1.6; font-size: 8px; white-space: nowrap; }
  .front-trial-note span { font-size: 10px; white-space: normal; }
  .front-section-nav { gap: 19px; }
  .front-section-nav button { font-size: 10px; }
  .front-end .garage-card { padding: 13px; }
  .front-end .fleet-class-group > summary { padding: 19px 16px; }
  .front-end .fleet-class-body { padding: 0 12px 12px; }
  .front-end .garage-card h2 { font-size: 25px; }
  .front-end .shop-card { padding: 16px; }
  .front-end .shop-card-details { min-width: 160px; }
  .front-end .small-shop-card .shop-card-details { min-width: 0; }
  .front-end .fleet-class-body .garage-card { padding: 12px 10px; }
  .front-end .garage-card .stat-row > span { font-size: 7px; width: 47px; }
  .front-end .garage-card .boat-characteristics p { font-size: 10px; }
  .front-end .garage-card > button { font-size: 8px; padding: 10px 5px; }
  .front-end .modal-backdrop { padding: 14px; }
  .front-end :is(.stage-modal,.help-modal,.settings-modal) { max-height: calc(100dvh - 28px); }
  .front-end .stage-banner { height: 155px; }
  .front-end .stage-banner-copy { padding: 27px 20px; }
  .front-end .stage-banner-copy h2 { font-size: 43px; }
  .front-end .stage-prize { right: 17px; bottom: 24px; font-size: 24px; }
  .front-end .stage-body { padding: 18px 20px 20px; }
  .front-end .stage-conditions { font-size: 8px; gap: 10px; flex-wrap: wrap; }
  .front-end .stage-intro h3 { font-size: 28px; }
  .front-end .stage-intro .credit-balance { font-size: 23px; }
  .front-end .stage-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
  .front-end .stage-tabs > button { font-size: 8px; padding: 10px 7px; min-width: 0; justify-content: center; gap: 5px; letter-spacing: .3px; }
  .front-end .stage-tabs > button .icon { width: 14px; height: 14px; }
  .front-end .stage-overview { grid-template-columns: 93px 1fr; gap: 17px; padding: 5px 0 20px; }
  .front-end .stage-overview-art { height: 143px; }
  .front-end .stage-overview-art > .boat-sprite { width: 146px; height: 146px; }
  .front-end .stage-overview h3 { font-size: 27px; }
  .front-end .stage-overview p { font-size: 10px; }
  .front-end .stage-overview-meta { gap: 12px; font-size: 9px; }
  .front-end .stage-footer { position: sticky; bottom: 0; z-index: 4; background: #09232ff7; display: flex; flex-wrap: wrap; gap: 15px; padding-bottom: 20px; }
  .front-end .stage-footer > .primary-button { width: 100%; justify-content: space-between; min-height: 52px; }
  .front-end .stage-current-pod strong { font-size: 22px; }
  .front-end .stage-current-pod > span { font-size: 8px; }
  .front-end .settings-modal { padding: 34px 24px 24px; }
  .front-end .settings-modal h2 { font-size: 43px; }
  .front-end .modal-close { right: 12px; top: 12px; }
  .front-end .small-shop-card { padding: 11px; }
  .front-end .small-shop-card .shop-card-details p { font-size: 9px; }
  .front-end .small-shop-card .shop-item-title > span { font-size: 8px; }
  .front-end .small-shop-card .shop-buy { min-height: 44px; min-width: 62px; font-size: 9px; }
}
@media (max-height: 500px) and (min-width: 701px) {
  .front-header { padding-top: 15px; min-height: 75px; }
  .front-lobby { min-height: auto; padding-top: 5px; padding-bottom: 26px; gap: 30px; align-items: start; }
  .front-main-menu h1 { font-size: 59px; margin: 13px 0 17px; }
  .front-menu > button { min-height: 56px; }
  .front-choice-copy strong { font-size: 26px; }
  .front-race-brief { padding-top: 18px; }
}
@media (pointer: coarse) {
  .front-footer > .front-key-hints { display: none; }
  .front-menu > button:focus:not(:focus-visible) { background: none; }
}
@media (prefers-reduced-motion: reduce) {
  .front-home::before, .front-shell::before, .front-main-menu, .front-race-brief { animation: none; }
  .front-menu > button, .front-choice-arrow { transition: none; }
}