:root {
  color-scheme: dark;
  --ink: #07090c;
  --panel: #11151a;
  --panel-2: #1a2026;
  --paper: #f1f2ec;
  --muted: #aeb7be;
  --cyan: #20d9f5;
  --magenta: #ef2a96;
  --yellow: #ffd42a;
  --red: #eb3d36;
  --brass: #c99c43;
  --line: #4c5963;
  font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--ink); }
body { color: var(--paper); }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { letter-spacing: 0; }
a { color: var(--cyan); text-underline-offset: 3px; }
[hidden] { display: none !important; }

#app, #world-canvas { position: fixed; inset: 0; width: 100%; height: 100%; }
#world-canvas { display: block; touch-action: none; background: #05070a; }
#world-transition { position: fixed; inset: 0; z-index: 30; pointer-events: none; transform: scaleY(0); transform-origin: top; border-top: 5px solid var(--cyan); border-bottom: 5px solid var(--pink); background: #071019 url("./assets/art/cabinet-side-art.webp") center / cover no-repeat; background-blend-mode: multiply; opacity: .96; transition: transform 170ms ease-in; }
#app.is-world-transitioning #world-transition { transform: scaleY(1); }
.screen { position: fixed; inset: 0; z-index: 20; display: none; min-height: 0; }
.screen.is-active { display: flex; }

#loading-screen { align-items: flex-end; padding: clamp(24px, 7vw, 84px); background: #080a0d url("./assets/art/cabinet-side-art.webp") center / cover no-repeat; }
#loading-screen::before { content: ""; position: absolute; inset: 0; background: rgba(3, 4, 7, 0.72); }
.loading-copy { position: relative; width: min(640px, 100%); }
.loading-copy h1, .intro-copy h1 { margin: 0; max-width: 9ch; font-size: clamp(3.2rem, 8vw, 7.5rem); line-height: 0.82; letter-spacing: 0; text-wrap: balance; text-shadow: 4px 4px 0 #000; }
.eyebrow { margin: 0 0 10px; color: var(--yellow); font-weight: 800; font-size: 0.76rem; letter-spacing: 0; }
.progress-track { height: 10px; width: min(520px, 100%); margin-top: 28px; overflow: hidden; border: 1px solid var(--paper); background: #050608; }
#loading-bar { display: block; height: 100%; width: 2%; background: var(--cyan); transition: width 140ms linear; }
#loading-status { color: var(--muted); min-height: 1.3em; }

#intro-screen { z-index: 15; align-items: center; justify-content: flex-start; padding: clamp(24px, 7vw, 92px); background: rgba(3, 5, 8, 0.38); }
.intro-copy { width: min(780px, 100%); }
.intro-copy h1 { color: #fff; }
.intro-summary { max-width: 44ch; margin: 24px 0; font-size: clamp(1rem, 2.2vw, 1.35rem); font-weight: 700; line-height: 1.35; text-shadow: 2px 2px 0 #000; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; }
.command-button, .icon-button, #interaction-prompt, .touch-action { min-height: 44px; border: 1px solid #87939a; border-radius: 4px; background: rgba(9, 12, 15, 0.92); color: var(--paper); cursor: pointer; font-weight: 800; text-transform: uppercase; }
.command-button { padding: 11px 18px; }
.command-button:hover, .command-button:focus-visible, .icon-button:hover, .icon-button:focus-visible { border-color: var(--cyan); color: var(--cyan); outline: none; }
.primary { border-color: var(--yellow) !important; background: var(--yellow) !important; color: #161009 !important; }
.intro-counts { position: absolute; right: clamp(24px, 5vw, 72px); bottom: clamp(20px, 4vw, 50px); margin: 0; font-size: 0.75rem; font-weight: 800; text-shadow: 1px 1px 0 #000; }
.intro-counts span::after { content: "/"; padding: 0 8px; color: var(--magenta); }

.modal-screen { align-items: center; justify-content: center; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); background: rgba(3, 5, 8, 0.78); }
.panel { display: flex; flex-direction: column; width: min(760px, 100%); max-height: min(860px, calc(100dvh - 24px)); min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); box-shadow: 10px 10px 0 rgba(0,0,0,.35); }
.panel-header { display: flex; flex: 0 0 auto; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 18px 14px; border-bottom: 1px solid var(--line); }
.panel h2, .panel h3, .panel p { letter-spacing: 0; }
.panel h2 { margin: 0; font-size: clamp(1.5rem, 4vw, 2.25rem); line-height: 1; }
.panel-header p:last-child { margin: 6px 0 0; color: var(--muted); }
.icon-button { display: inline-grid; place-items: center; width: 44px; min-width: 44px; height: 44px; padding: 0; }
.icon-button.large { width: 64px; height: 58px; }
.panel-actions { display: flex; flex: 0 0 auto; justify-content: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line); }

.tutorial-steps, .settings-grid, .credits-copy, .detail-body { overflow: auto; overscroll-behavior: contain; scrollbar-color: var(--cyan) var(--panel); }
.tutorial-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.tutorial-step { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 14px; min-height: 142px; padding: 18px; background: var(--panel); }
.tutorial-step h3, .tutorial-step p { margin: 0; }
.tutorial-step p { margin-top: 6px; color: var(--muted); }
.key-cluster { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.key-cluster span { display: flex; gap: 4px; }
kbd { display: inline-grid; min-width: 32px; height: 30px; place-items: center; border: 1px solid var(--cyan); border-bottom-width: 4px; border-radius: 3px; background: #080b0e; font: 700 0.72rem monospace; }
.key-cluster.single kbd { min-width: 72px; }
.mouse-mark { width: 42px; height: 62px; margin: auto; border: 2px solid var(--magenta); border-radius: 18px; position: relative; }
.mouse-mark::before { content: ""; position: absolute; left: 50%; top: 9px; width: 4px; height: 13px; margin-left: -2px; background: var(--magenta); }

.settings-grid { display: grid; grid-template-columns: 1fr 1fr; padding: 0 18px; }
.setting-row, .setting-slider, .setting-segment { min-width: 0; margin: 0; padding: 17px 4px; border: 0; border-bottom: 1px solid #303940; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-weight: 700; }
.setting-row:nth-child(odd) { margin-right: 14px; }
.setting-slider, .setting-segment { grid-column: 1 / -1; }
.setting-slider span { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-weight: 700; }
input[type="checkbox"] { width: 42px; height: 24px; accent-color: var(--cyan); }
input[type="range"] { width: 100%; accent-color: var(--magenta); }
.setting-segment legend { padding: 0 0 10px; font-weight: 700; }
.setting-segment > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.setting-segment label { position: relative; }
.setting-segment input { position: absolute; opacity: 0; }
.setting-segment span { display: block; padding: 10px; border: 1px solid var(--line); text-align: center; }
.setting-segment input:checked + span { border-color: var(--yellow); background: var(--yellow); color: #15110a; }

.credits-copy { padding: 22px; line-height: 1.5; }
.credits-copy h3 { font-size: 1.4rem; }
.credits-copy dl { display: grid; grid-template-columns: 120px 1fr; gap: 10px 18px; }
.credits-copy dt { color: var(--yellow); font-weight: 800; }
.credits-copy dd { margin: 0; color: var(--muted); }
.pause-panel { width: min(380px, 100%); padding: 24px; }
.pause-panel h2 { margin: 0 0 24px; }
.vertical-actions { display: grid; gap: 10px; }

.detail-panel { width: min(1120px, 100%); }
.detail-body { min-height: 260px; padding: 18px; }
.poster-layout { display: grid; grid-template-columns: minmax(250px, 42%) 1fr; gap: 24px; align-items: start; }
.poster-layout img { display: block; width: 100%; height: auto; max-height: 64dvh; object-fit: contain; border: 1px solid #58636b; background: #e8e7df; }
.project-copy h3 { margin: 0 0 8px; color: var(--cyan); }
.project-copy p, .project-copy li { color: #d5dadc; line-height: 1.5; overflow-wrap: anywhere; }
.project-copy ul { padding-left: 18px; }
.demo-frame-wrap { display: grid; grid-template-rows: minmax(300px, 58dvh) auto; gap: 10px; }
.demo-frame { width: 100%; height: 100%; min-height: 300px; border: 1px solid var(--cyan); background: #020305; }
.frame-note { margin: 0; color: var(--muted); font-size: 0.82rem; }
.jukebox-panel { width: min(460px, 100%); }
.jukebox-controls { display: flex; justify-content: center; gap: 16px; padding: 34px 20px; }
.jukebox-note { margin: 0; padding: 0 20px 24px; color: var(--muted); text-align: center; }

.festival-cutscene-screen { z-index: 40; display: none; padding: 0; overflow: hidden; background: #020507; }
.festival-cutscene-screen.is-active { display: block; }
.festival-cutscene-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.festival-cutscene-copy { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; padding: 24px max(28px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left)); border-top: 1px solid rgba(255,255,255,.35); background: rgba(3,7,10,.88); box-shadow: 0 -16px 34px rgba(0,0,0,.45); }
.festival-cutscene-copy header { min-width: 0; max-width: 760px; }
.festival-cutscene-copy h2 { margin: 0; font-size: 2.15rem; line-height: 1.05; text-shadow: 2px 2px 0 #000; }
.festival-cutscene-copy header > p:last-child { max-width: 62ch; margin: 10px 0 0; color: var(--paper); font-size: 1rem; line-height: 1.45; }
.festival-cutscene-copy footer { display: grid; min-width: 230px; gap: 10px; justify-items: end; }
.festival-cutscene-copy footer > span { color: var(--yellow); font-size: .75rem; font-weight: 800; }
.festival-cutscene-copy footer > div { display: flex; gap: 8px; }

#gallery-hud { position: fixed; inset: 0; z-index: 8; pointer-events: none; }
.hud-top { position: absolute; top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); display: flex; align-items: flex-start; justify-content: space-between; }
.hud-top p { margin: 0; padding: 8px 10px; border-left: 3px solid var(--cyan); background: rgba(4,7,9,.68); font-size: .74rem; font-weight: 800; }
.hud-top small { display: block; margin-top: 4px; color: var(--muted); }
.hud-top button { pointer-events: auto; }
.hud-actions { display: flex; gap: 6px; pointer-events: auto; }
#town-tracker { position: absolute; top: max(76px, calc(env(safe-area-inset-top) + 64px)); left: max(12px, env(safe-area-inset-left)); max-width: min(420px, calc(100vw - 24px)); margin: 0; padding: 7px 10px; border-left: 3px solid var(--yellow); background: rgba(4,7,9,.74); color: var(--paper); font-size: .68rem; font-weight: 800; }
#town-book-overlay { pointer-events: none; background: rgba(3,5,8,.50); }
.town-book-panel { display: grid; width: min(980px, 100%); max-height: min(760px, calc(100vh - 24px)); overflow: hidden; grid-template-rows: auto auto minmax(0, 1fr); pointer-events: auto; border-color: #71808a; background: #202c32; }
.town-book-header { min-width: 0; }
.town-book-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-block: 1px solid #38434b; background: #10161a; }
.town-book-tabs button { min-width: 0; min-height: 42px; padding: 8px 5px; border: 0; border-right: 1px solid #38434b; background: transparent; color: var(--muted); font-size: .68rem; }
.town-book-tabs button:last-child { border-right: 0; }
.town-book-tabs button[aria-selected="true"] { background: var(--yellow); color: #111417; }
#town-book-body { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-color: var(--cyan) var(--panel); background: #202c32; }
.town-book-view { min-height: 360px; padding: 18px; }
.town-book-view > header { margin-bottom: 16px; border-bottom: 1px solid #3b464e; }
.town-book-view h3 { margin: 2px 0 13px; font-size: 1.35rem; }
.town-map { position: relative; width: min(100%, 720px); aspect-ratio: 16 / 9; margin: 0 auto; overflow: hidden; border: 1px solid #65727a; background: #9fd5d7; box-shadow: inset 0 0 0 8px #d9eddf; }
.town-map::before { content: ""; position: absolute; inset: 12% 8%; border: 14px solid #6f7775; background: repeating-linear-gradient(90deg, #9dbb8d 0 18%, #d6cf87 18% 21%); }
.town-map-marker { position: absolute; z-index: 2; display: grid; transform: translate(-50%, -50%); justify-items: center; pointer-events: none; }
.town-map-marker i { width: 13px; height: 13px; border: 2px solid #10161a; border-radius: 50%; background: var(--magenta); }
.town-map-marker.is-station i { background: var(--yellow); }
.town-map-marker.is-island i { background: #54b96e; }
.town-map-marker.is-venue i { background: var(--cyan); }
.town-map-marker b { max-width: 112px; margin-top: 2px; padding: 2px 4px; background: rgba(9,13,15,.84); color: white; font-size: .56rem; text-align: center; }
.town-ledger { display: grid; gap: 12px; }
.town-ledger-row { border-bottom: 1px solid #3b464e; padding-bottom: 10px; }
.town-ledger-row header { display: flex; justify-content: space-between; gap: 16px; }
.town-ledger-row p { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 0; }
.town-stamp { padding: 4px 6px; border: 1px solid #46525a; color: var(--muted); font-size: .65rem; }
.town-stamp.is-complete { border-color: #57c773; background: #183923; color: #dff7e5; }
.town-requirements, .town-collection, .town-garage ul { margin: 0; padding: 0; list-style: none; }
.town-requirements li, .town-collection li, .town-garage li { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #3b464e; }
.town-collection li span, .town-garage li span { min-width: 0; }
.town-collection small, .town-garage small { display: block; margin-top: 3px; color: var(--muted); font-size: .62rem; }
.town-collection li:not(.is-caught) { color: #77838a; }
.town-garage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.town-garage-group h4 { margin: 0; padding: 8px; background: #202a2f; color: var(--yellow); font-size: .72rem; }
.town-garage button, .town-collection button { min-width: 68px; padding: 7px 8px; }
.town-complete-copy { padding: 18px; border-left: 3px solid #57c773; background: #183923; }
.town-replays { margin-top: 22px; border-top: 1px solid #3b464e; padding-top: 14px; }
.town-replays h4 { margin: 0 0 9px; color: var(--yellow); font-size: .72rem; }
.town-replays > div { display: flex; flex-wrap: wrap; gap: 7px; }
.town-replays button { min-height: 38px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 3px; background: #171e23; color: var(--paper); font-weight: 800; }
#activity-hud { position: absolute; z-index: 3; top: max(76px, calc(env(safe-area-inset-top) + 64px)); left: 50%; display: grid; width: min(360px, calc(100vw - 32px)); min-height: 78px; transform: translateX(-50%); grid-template-columns: auto 1fr 32px; gap: 3px 10px; padding: 9px 10px 9px 12px; border-left: 3px solid var(--yellow); background: rgba(4,7,9,.78); }
#activity-hud > span:first-child { align-self: center; color: var(--yellow); font-size: .69rem; font-weight: 800; }

#bowling-overlay { pointer-events: none; background: rgba(3,5,8,.72); }
.bowling-panel { display: grid; width: min(940px, 100%); max-height: min(780px, calc(100vh - 24px)); overflow: hidden; grid-template-rows: auto minmax(0, 1fr); pointer-events: auto; border-color: #647883; background: #172229; }
#bowling-body { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 18px; scrollbar-color: var(--cyan) #11191e; }
.bowling-menu > header, .bowling-tutorial > header, .bowling-results > header, .bowling-league-block > header { margin-bottom: 14px; }
.bowling-menu h3, .bowling-tutorial h3, .bowling-results h3, .bowling-league-block h3 { margin: 3px 0 7px; font-size: 1.35rem; }
.bowling-menu p, .bowling-league-block p { margin: 0; color: var(--muted); }
.bowling-ball-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.bowling-ball-option { display: grid; min-width: 0; min-height: 72px; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px; border: 1px solid #45545e; border-radius: 4px; background: #10181d; color: var(--text); text-align: left; }
.bowling-ball-option:hover, .bowling-ball-option.is-selected { border-color: var(--yellow); background: #263238; }
.bowling-ball-option.is-selected { box-shadow: inset 3px 0 var(--yellow); }
.bowling-ball-option > span:last-child { min-width: 0; }
.bowling-ball-option strong, .bowling-ball-option small { display: block; overflow-wrap: anywhere; }
.bowling-ball-option small { margin-top: 4px; color: var(--muted); font-size: .66rem; }
.bowling-ball-swatch { width: 40px; height: 40px; border: 3px solid #cbd5d9; border-radius: 50%; background: radial-gradient(circle at 33% 28%, #fff 0 5%, var(--ball-color) 7% 58%, #080b0d 100%); box-shadow: inset -7px -8px 0 rgba(0,0,0,.27); }
.bowling-menu-actions, .bowling-result-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
.bowling-menu-actions button, .bowling-result-actions button, .bowling-league-block > button, .bowling-tutorial > button { min-height: 40px; padding: 8px 12px; border: 1px solid #62727c; border-radius: 3px; background: #0d151a; color: var(--paper); cursor: pointer; font-size: .72rem; font-weight: 800; }
.bowling-menu-actions button:hover, .bowling-result-actions button:hover, .bowling-league-block > button:hover, .bowling-tutorial > button:hover { border-color: var(--cyan); color: var(--cyan); }
.bowling-league-block { padding-top: 17px; border-top: 1px solid #45545e; }
.bowling-challenges { margin: 18px 0; padding-top: 17px; border-top: 1px solid #45545e; }
.bowling-challenges > header { margin-bottom: 10px; }
.bowling-challenges h3 { margin: 3px 0 5px; font-size: 1.1rem; }
.bowling-challenges p { margin: 0; color: var(--muted); }
.bowling-challenge-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bowling-challenge-card { display: grid; min-width: 0; gap: 7px; padding: 10px; border: 1px solid #46545d; background: #10181d; }
.bowling-challenge-card.is-complete { border-color: var(--cyan); background: #10232a; }
.bowling-challenge-card.is-claimed { border-color: #5b8460; opacity: .78; }
.bowling-challenge-card header, .bowling-challenge-card > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bowling-challenge-card header strong { min-width: 0; overflow-wrap: anywhere; font-size: .78rem; }
.bowling-challenge-card header span { color: var(--yellow); font-size: .61rem; font-weight: 800; white-space: nowrap; }
.bowling-challenge-card p { min-height: 2.4em; font-size: .67rem; line-height: 1.25; }
.bowling-challenge-card b { color: var(--paper); font-size: .7rem; }
.bowling-challenge-card small { color: #9bcfa0; font-size: .65rem; font-weight: 800; }
.bowling-challenge-card button { min-height: 30px; padding: 5px 7px; border: 1px solid var(--cyan); border-radius: 3px; background: #0d1c22; color: var(--cyan); font-size: .62rem; font-weight: 800; }
.bowling-name-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.bowling-name-grid label { display: grid; gap: 5px; color: var(--muted); font-size: .7rem; font-weight: 800; }
.bowling-name-grid input { min-width: 0; border: 1px solid #566773; border-radius: 3px; padding: 10px; background: #0c1317; color: var(--text); }
.bowling-table-wrap { max-width: 100%; overflow-x: auto; margin-top: 14px; }
.bowling-table-wrap table { width: 100%; border-collapse: collapse; font-size: .76rem; }
.bowling-table-wrap th, .bowling-table-wrap td { padding: 7px; border-bottom: 1px solid #35434c; text-align: right; }
.bowling-table-wrap th:nth-child(2), .bowling-table-wrap td:nth-child(2) { text-align: left; }
.bowling-tutorial ol { display: grid; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.bowling-tutorial li { display: grid; grid-template-columns: 88px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid #35434c; }
.bowling-tutorial li strong { color: var(--yellow); }
.bowling-series-result { color: var(--cyan); font-weight: 800; }
.bowling-result-score { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 12px; max-width: 360px; }
.bowling-result-score p { display: grid; gap: 2px; margin: 0; }
.bowling-result-score p:last-child { text-align: right; }
.bowling-result-score small, .bowling-result-score > span { color: var(--muted); font-size: .65rem; font-weight: 800; }
.bowling-result-score strong { color: var(--yellow); font-size: 2rem; line-height: .88; }

#bowling-hud { position: absolute; z-index: 4; top: max(76px, calc(env(safe-area-inset-top) + 64px)); left: 16px; display: grid; width: min(368px, calc(100vw - 32px)); min-height: 0; grid-template-columns: auto minmax(0, 1fr) 32px; gap: 5px 10px; padding: 9px 10px 10px; border: 1px solid rgba(100, 142, 155, .66); border-left: 3px solid var(--cyan); background: rgba(4,7,9,.78); box-shadow: 4px 5px 0 rgba(0,0,0,.25); backdrop-filter: blur(5px); }
#bowling-hud > span:first-child { align-self: center; color: var(--cyan); font-size: .7rem; font-weight: 800; }
#bowling-hud > strong { align-self: center; min-width: 0; font-size: 1rem; }
#bowling-hud > small { grid-column: 1 / -1; min-width: 0; overflow-wrap: anywhere; color: var(--muted); }
#bowling-exit-button { pointer-events: auto; }
.bowling-shot-feedback { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; }
#bowling-shot-grade { min-width: 76px; padding: 4px 6px; border: 1px solid #52636c; background: #111c21; color: var(--paper); font-size: .7rem; text-align: center; }
#bowling-shot-timing { min-width: 0; overflow: hidden; color: var(--muted); font-size: .65rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
#bowling-hud[data-shot-grade="perfect"] #bowling-shot-grade { border-color: var(--yellow); background: var(--yellow); color: #1b1609; }
#bowling-hud[data-shot-grade="great"] #bowling-shot-grade { border-color: var(--cyan); color: var(--cyan); }
#bowling-hud[data-shot-grade="good"] #bowling-shot-grade { border-color: #74c976; color: #b6e785; }
#bowling-hud[data-shot-grade="off"] #bowling-shot-grade { border-color: var(--magenta); color: #ff9acd; }
#bowling-hud[data-heat="2"] { border-left-color: var(--magenta); }
#bowling-hud[data-heat="3"] { border-left-color: var(--yellow); box-shadow: 4px 5px 0 rgba(0,0,0,.25), 0 0 18px rgba(255,212,42,.22); }
.bowling-swing-meter { position: relative; grid-column: 1 / -1; height: 12px; overflow: hidden; border: 1px solid #5a6b75; background: repeating-linear-gradient(90deg, #0b1115 0 12px, #111a20 12px 14px); }
.bowling-swing-meter > i { position: absolute; inset: 0 auto 0 0; display: block; width: 0; background: linear-gradient(90deg, var(--cyan), #76e7f5); transition: width 90ms linear; }
.bowling-swing-meter > b { position: absolute; z-index: 1; top: -1px; bottom: -1px; left: calc(82% - 8px); width: 16px; border-inline: 1px solid var(--yellow); background: rgba(255,212,42,.18); pointer-events: none; }
.bowling-control-meters { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.bowling-control-meter { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(1.2em, auto) 7px; align-items: end; gap: 2px; min-width: 0; }
.bowling-control-label { min-width: 0; color: var(--muted); font-size: .57rem; font-weight: 800; line-height: 1.1; }
.bowling-control-meter small { min-width: 0; min-height: 1.2em; color: var(--paper); font-size: .53rem; font-weight: 800; line-height: 1.1; overflow-wrap: anywhere; }
.bowling-meter { display: block; width: 100%; height: 7px; overflow: hidden; border: 1px solid #53636d; background: #0a1014; }
.bowling-meter i { display: block; width: 0; height: 100%; background: var(--yellow); transition: width 90ms linear; }
.bowling-meter.is-placement i { background: var(--cyan); }
.bowling-meter.is-hook i { background: var(--magenta); }
#bowling-hud[data-coach-active="false"] .bowling-control-meters { opacity: .42; }
#activity-primary { align-self: center; min-width: 0; overflow: hidden; font-size: 1rem; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
#activity-exit-button { align-self: center; width: 32px; min-height: 32px; padding: 0; pointer-events: auto; }
#activity-secondary { grid-column: 1 / -1; min-width: 0; overflow: hidden; color: var(--paper); font-size: .68rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.activity-meter { grid-column: 1 / -1; display: block; width: 100%; height: 4px; overflow: hidden; background: #29323a; }
.activity-meter i { display: block; width: 0; height: 100%; background: var(--cyan); }
#bowling-swipe-zone { position: absolute; z-index: 1; inset: max(62px, env(safe-area-inset-top)) 0 max(12px, env(safe-area-inset-bottom)); pointer-events: auto; cursor: grab; touch-action: none; }
#bowling-swipe-zone.is-active { box-shadow: inset 0 0 0 1px rgba(38,203,231,.12), inset 0 -28px 38px rgba(242,42,154,.08); }
#app.is-bowling-active #crosshair { opacity: 0; }
#app.is-bowling-active #touch-controls .look-zone { pointer-events: none; }
#crosshair { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); opacity: .75; }
#crosshair span { position: absolute; left: 50%; top: 50%; background: #fff; }
#crosshair span:first-child { width: 14px; height: 2px; transform: translate(-50%,-50%); }
#crosshair span:last-child { width: 2px; height: 14px; transform: translate(-50%,-50%); }
#interaction-prompt { position: absolute; left: 50%; bottom: max(32px, calc(env(safe-area-inset-bottom) + 16px)); display: flex; width: min(380px, calc(100vw - 24px)); min-width: 0; max-width: calc(100vw - 24px); transform: translateX(-50%); align-items: center; gap: 12px; padding: 10px 14px; pointer-events: auto; text-align: left; }
#interaction-prompt span { color: var(--yellow); font-size: .72rem; }
#interaction-prompt strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#touch-controls { display: none; position: absolute; inset: 0; }
.touch-stick { --stick-x: 0px; --stick-y: 0px; position: absolute; left: max(22px, env(safe-area-inset-left)); bottom: max(24px, env(safe-area-inset-bottom)); width: 124px; height: 124px; border: 2px solid rgba(255,255,255,.34); border-radius: 50%; background: radial-gradient(circle, rgba(32,217,245,.08) 0 48%, rgba(4,7,9,.48) 50% 100%); box-shadow: inset 0 0 0 2px rgba(0,0,0,.24), 0 4px 16px rgba(0,0,0,.3); pointer-events: auto; touch-action: none; }
.touch-stick span { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; transform: translate(calc(-50% + var(--stick-x)),calc(-50% + var(--stick-y))); border: 2px solid rgba(32,217,245,.72); border-radius: 50%; background: rgba(9,38,48,.72); box-shadow: 0 3px 10px rgba(0,0,0,.42); }
.look-zone { position: absolute; right: 0; top: 64px; bottom: 0; width: 62%; pointer-events: auto; touch-action: none; }
.touch-action { position: absolute; z-index: 2; width: 58px; height: 58px; min-height: 58px; border-radius: 50%; border-color: rgba(255,255,255,.28); background: rgba(7,9,12,.32); pointer-events: auto; touch-action: none; font-size: .7rem; }
.touch-action.jump { right: max(84px, calc(env(safe-area-inset-right) + 74px)); bottom: max(30px, env(safe-area-inset-bottom)); }
.touch-action.interact { right: max(18px, env(safe-area-inset-right)); bottom: max(76px, calc(env(safe-area-inset-bottom) + 54px)); border-color: rgba(255,212,42,.45); color: var(--yellow); }
.touch-action.camera { right: max(18px, env(safe-area-inset-right)); bottom: max(148px, calc(env(safe-area-inset-bottom) + 126px)); border-color: rgba(32,217,245,.58); color: var(--cyan); }
#app.is-bowling-active .touch-action.camera { display: none; }

#toast { position: fixed; z-index: 50; left: 50%; top: max(18px, env(safe-area-inset-top)); max-width: min(520px, calc(100vw - 24px)); transform: translateX(-50%); padding: 10px 14px; border: 1px solid var(--yellow); border-radius: 4px; background: #11151a; color: var(--paper); font-weight: 700; }

@media (pointer: coarse), (hover: none) {
  #touch-controls { display: block; }
  #crosshair { opacity: .45; }
  #interaction-prompt { bottom: max(154px, calc(env(safe-area-inset-bottom) + 136px)); width: min(300px, calc(100vw - 32px)); max-width: calc(100vw - 32px); }
  #activity-hud { top: max(88px, calc(env(safe-area-inset-top) + 76px)); width: min(310px, calc(100vw - 32px)); }
}

@media (max-width: 720px) {
  #gallery-hud:has(#activity-hud:not([hidden])) #town-tracker { display: none; }
  .festival-cutscene-image { object-position: 52% center; }
  .festival-cutscene-copy { grid-template-columns: 1fr; gap: 14px; padding: 18px max(14px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
  .festival-cutscene-copy h2 { font-size: 1.65rem; }
  .festival-cutscene-copy header > p:last-child { font-size: .92rem; }
  .festival-cutscene-copy footer { display: flex; min-width: 0; align-items: center; justify-content: space-between; }
  .festival-cutscene-copy footer > div { flex-wrap: wrap; justify-content: flex-end; }
  .town-book-panel { width: 100%; max-height: calc(100vh - 20px); }
  .town-book-tabs { overflow-x: auto; grid-template-columns: repeat(5, minmax(88px, 1fr)); }
  .town-book-view { min-height: 460px; padding: 13px; }
  .bowling-panel { width: 100%; max-height: calc(100vh - 20px); }
  #bowling-body { padding: 13px; }
  .bowling-ball-grid { grid-template-columns: 1fr; }
  .bowling-challenge-grid { grid-template-columns: 1fr; }
  .bowling-name-grid { grid-template-columns: 1fr; }
  #bowling-hud { top: auto; right: auto; bottom: max(176px, calc(env(safe-area-inset-bottom) + 164px)); left: 50%; width: min(332px, calc(100vw - 22px)); transform: translateX(-50%); }
  .town-garage { grid-template-columns: 1fr; gap: 14px; }
  .town-map { aspect-ratio: 4 / 5; }
  #town-tracker { top: max(82px, calc(env(safe-area-inset-top) + 70px)); max-width: calc(100vw - 106px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #intro-screen { align-items: flex-start; padding-top: max(64px, calc(env(safe-area-inset-top) + 42px)); background: rgba(3,5,8,.52); }
  .intro-copy h1, .loading-copy h1 { font-size: clamp(3.4rem, 18vw, 6rem); }
  .intro-summary { max-width: 32ch; }
  .button-row { display: grid; grid-template-columns: 1fr 1fr; }
  .button-row .primary { grid-column: 1 / -1; }
  .button-row #credits-button { grid-column: 1 / -1; }
  .intro-counts { left: 24px; right: auto; }
  .tutorial-steps { grid-template-columns: 1fr; }
  .tutorial-step { min-height: 112px; }
  .settings-grid { grid-template-columns: 1fr; }
  .setting-row { margin-right: 0 !important; }
  .poster-layout { grid-template-columns: 1fr; }
  .poster-layout img { max-height: 46dvh; }
  .panel-actions { flex-wrap: wrap; }
  .credits-copy dl { grid-template-columns: 1fr; gap: 4px; }
  .credits-copy dd { margin-bottom: 8px; }
}

@media (max-height: 560px) and (orientation: landscape) {
  .festival-cutscene-copy { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding-block: 10px; }
  .festival-cutscene-copy h2 { font-size: 1.35rem; }
  .festival-cutscene-copy header > p:last-child { margin-top: 5px; font-size: .78rem; }
  .festival-cutscene-copy .eyebrow { margin-bottom: 5px; }
  .town-book-panel { max-height: calc(100vh - 12px); }
  .town-book-view { min-height: 360px; }
  #intro-screen { align-items: flex-start; padding: max(18px, env(safe-area-inset-top)) 28px; }
  .intro-copy h1 { font-size: clamp(2.8rem, 13vh, 4rem); max-width: 14ch; }
  .intro-summary { margin: 10px 0 14px; }
  .intro-counts { display: none; }
  .tutorial-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tutorial-step { grid-template-columns: 1fr; min-height: 0; padding: 10px; text-align: center; }
  .key-cluster, .mouse-mark { transform: scale(.8); }
  .touch-stick { width: 104px; height: 104px; }
  .touch-action.jump { right: 92px; bottom: 14px; }
  .touch-action.interact { right: 20px; bottom: 54px; }
  .touch-action.camera { right: 20px; bottom: 122px; }
  #activity-hud { top: 10px; width: min(300px, calc(100vw - 300px)); min-height: 58px; padding: 6px 9px; }
  #bowling-hud { top: 76px; bottom: auto; left: 12px; width: min(300px, calc(100vw - 300px)); min-height: 0; transform: none; padding: 7px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

/* Full Independence Town reference-game integration. */
.rich-town-ui { --town-ink:#071126; --town-blue:#527cff; --town-cyan:#58e1ff; --town-red:#e94f5d; --town-cream:#fff4d6; --town-paper:#f7fbff; position:absolute; z-index:18; inset:0; color:var(--town-paper); pointer-events:none; font-family:Inter,system-ui,sans-serif; }
.rich-town-ui button { min-height:34px; border:1px solid rgba(255,255,255,.3); border-radius:7px; background:linear-gradient(180deg,rgba(19,38,70,.96),rgba(8,18,39,.96)); color:var(--town-paper); box-shadow:0 5px 16px rgba(2,8,22,.24); font:800 .69rem/1.1 Inter,system-ui,sans-serif; letter-spacing:.045em; cursor:pointer; pointer-events:auto; }
.rich-town-ui button:hover,.rich-town-ui button:focus-visible,.rich-town-ui button.selected,.rich-town-ui button.active { border-color:var(--town-cyan); background:linear-gradient(180deg,#3966d5,#18306f); color:#fff; outline:none; }
.rich-town-ui button.primary { border-color:#ffe38a; background:linear-gradient(180deg,#ffe38a,#ffb95d); color:var(--town-ink); }
.rich-town-ui button:disabled { opacity:.42; cursor:not-allowed; }
.rich-town-hud { position:absolute; z-index:4; top:max(12px,env(safe-area-inset-top)); left:max(12px,env(safe-area-inset-left)); right:max(12px,env(safe-area-inset-right)); display:grid; grid-template-columns:minmax(190px,auto) minmax(360px,1fr); gap:8px 16px; align-items:start; pointer-events:none; }
.rich-town-brand { display:grid; min-width:190px; padding:9px 12px; border:1px solid rgba(88,225,255,.55); border-left:5px solid var(--town-red); border-radius:7px; background:linear-gradient(135deg,rgba(7,17,38,.94),rgba(18,43,78,.87)); box-shadow:0 12px 34px rgba(0,0,0,.25); }
.rich-town-brand span,.rich-town-panel header small,.rich-town-panel-body>div>section>small,.rich-town-panel-body aside>small,.rich-town-cutscene small { color:var(--town-cyan); font-size:.59rem; font-weight:900; letter-spacing:.14em; }
.rich-town-brand strong { margin-top:2px; font-size:1rem; }
.rich-town-brand small { color:#b7c7df; font-size:.65rem; }
.rich-town-actions { display:flex; justify-content:flex-end; gap:6px; min-width:0; overflow-x:auto; pointer-events:auto; scrollbar-width:none; }
.rich-town-actions button { flex:0 0 auto; padding:0 12px; }
.rich-town-actions button:first-child { border-color:var(--town-cyan); }
.rich-town-actions button:nth-child(4) { border-color:#ffe38a; color:#ffe38a; }
.rich-town-resources { grid-column:1/-1; display:flex; justify-content:center; gap:5px; min-width:0; overflow-x:auto; scrollbar-width:none; }
.rich-town-resources>span { display:grid; grid-template-columns:7px auto; align-items:center; gap:0 5px; min-width:66px; padding:5px 8px; border:1px solid rgba(255,255,255,.2); border-radius:5px; background:rgba(7,17,38,.86); box-shadow:0 5px 14px rgba(0,0,0,.18); }
.rich-town-resources i { grid-row:1/3; width:7px; height:22px; border-radius:4px; }
.rich-town-resources b { font-size:.74rem; }
.rich-town-resources small { max-width:72px; overflow:hidden; color:#b7c7df; font-size:.5rem; text-overflow:ellipsis; white-space:nowrap; }
.rich-town-goals { position:absolute; z-index:3; top:132px; left:max(12px,env(safe-area-inset-left)); width:min(250px,calc(100vw - 24px)); max-height:calc(100vh - 210px); overflow:auto; padding:10px; border:1px solid rgba(255,255,255,.22); border-radius:7px; background:rgba(7,17,38,.88); box-shadow:0 12px 34px rgba(0,0,0,.22); }
.rich-town-goals>strong { color:#ffe38a; font-size:.61rem; letter-spacing:.12em; }
.rich-town-goals article { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 8px; margin-top:8px; color:#dce8ff; font-size:.61rem; }
.rich-town-goals article.done { color:#98f4a3; }
.rich-town-goals article small { font-size:.55rem; }
.rich-town-goals article i { grid-column:1/-1; height:3px; overflow:hidden; background:#243552; }
.rich-town-goals article i b { display:block; height:100%; background:linear-gradient(90deg,var(--town-cyan),#75f27d); }
.rich-town-status { position:absolute; z-index:3; right:max(12px,env(safe-area-inset-right)); bottom:max(12px,env(safe-area-inset-bottom)); left:max(12px,env(safe-area-inset-left)); display:flex; justify-content:center; gap:4px; min-width:0; overflow-x:auto; scrollbar-width:none; }
.rich-town-status span,.rich-town-status strong { flex:0 0 auto; padding:6px 10px; border:1px solid rgba(255,255,255,.2); background:rgba(7,17,38,.9); font-size:.59rem; letter-spacing:.04em; }
.rich-town-status strong { border-color:var(--town-cyan); color:var(--town-cyan); }
.rich-town-panel { position:absolute; z-index:8; top:max(82px,calc(env(safe-area-inset-top) + 68px)); right:max(12px,env(safe-area-inset-right)); bottom:max(48px,calc(env(safe-area-inset-bottom) + 38px)); width:min(760px,calc(100vw - 290px)); min-width:0; overflow:hidden; border:1px solid rgba(88,225,255,.52); border-radius:11px; background:linear-gradient(145deg,rgba(7,17,38,.97),rgba(17,38,69,.96)); box-shadow:0 24px 70px rgba(0,0,0,.48); pointer-events:auto; }
.rich-town-panel>header { display:flex; height:64px; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; border-bottom:1px solid rgba(255,255,255,.16); background:linear-gradient(90deg,rgba(82,124,255,.2),transparent); }
.rich-town-panel h2,.rich-town-panel h3,.rich-town-panel h4,.rich-town-panel p { margin:0; }
.rich-town-panel h2 { margin-top:2px; font:900 1.25rem/1 Inter,system-ui,sans-serif; }
.rich-town-panel>header>button { width:38px; padding:0; font-size:1.2rem; }
.rich-town-panel>nav { display:flex; min-height:42px; gap:5px; overflow-x:auto; padding:5px 8px; border-bottom:1px solid rgba(255,255,255,.12); scrollbar-width:thin; }
.rich-town-panel>nav button { flex:1 0 auto; min-height:30px; padding:0 10px; }
.rich-town-panel-body { height:calc(100% - 106px); min-height:0; overflow:auto; overscroll-behavior:contain; padding:12px; scrollbar-color:#527cff #071126; }
.rich-town-build-layout,.rich-town-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(210px,32%); gap:12px; min-height:100%; }
.rich-town-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; gap:8px; }
.rich-town-card-grid article,.rich-town-panel-body aside,.rich-town-management-grid>section,.rich-town-copy { min-width:0; padding:12px; border:1px solid rgba(255,255,255,.17); border-radius:8px; background:rgba(4,12,29,.58); }
.rich-town-card-grid article { display:grid; align-content:start; gap:8px; }
.rich-town-card-grid article small { color:var(--town-cyan); font-size:.57rem; font-weight:900; letter-spacing:.08em; }
.rich-town-card-grid article p,.rich-town-copy p,.rich-town-panel-body aside p,.rich-town-management-grid p { color:#bfcae0; font-size:.72rem; line-height:1.45; }
.rich-town-build-card { display:grid; min-height:92px; align-content:center; gap:3px; padding:9px; text-align:left; }
.rich-town-build-card strong { font-size:.75rem; }
.rich-town-build-card span { color:var(--town-cyan); font-size:.58rem; }
.rich-town-build-card small { color:#aebbd2; font-size:.58rem; line-height:1.25; }
.rich-town-panel-body aside { position:sticky; top:0; align-self:start; }
.rich-town-panel-body aside h3 { margin:5px 0 8px; color:#fff; font-size:1.15rem; }
.rich-town-panel-body dl,.rich-town-copy dl { display:grid; grid-template-columns:minmax(84px,.7fr) minmax(0,1.3fr); gap:7px 10px; margin:12px 0; font-size:.67rem; }
.rich-town-panel-body dt,.rich-town-copy dt { color:#90a3c4; }
.rich-town-panel-body dd,.rich-town-copy dd { margin:0; overflow-wrap:anywhere; }
.rich-town-map-instruction { display:block; margin-top:14px; padding:9px; border:1px dashed var(--town-cyan); color:var(--town-cyan); font-size:.64rem; text-align:center; }
.rich-town-management-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.rich-town-management-grid>section { display:grid; align-content:start; gap:9px; }
.rich-town-progress-line { display:grid; grid-template-columns:42px 1fr; align-items:center; gap:7px; padding:7px; border-left:3px solid #52617b; background:rgba(255,255,255,.04); }
.rich-town-progress-line.done { border-color:#75f27d; color:#9cf5a5; }
.rich-town-list { max-height:100%; overflow:auto; padding-right:4px; }
.rich-town-list-row { display:flex; width:100%; min-height:52px; justify-content:space-between; align-items:center; gap:8px; margin-bottom:5px; padding:7px 9px; text-align:left; }
.rich-town-list-row span { display:grid; min-width:0; gap:2px; }
.rich-town-list-row small { overflow:hidden; color:#adbad0; font-size:.58rem; text-overflow:ellipsis; white-space:nowrap; }
.rich-town-list-row>b { color:var(--town-cyan); font-size:.65rem; }
.rich-town-option-list { display:grid; gap:6px; margin-top:8px; }
.rich-town-option-list button { width:100%; padding:7px; text-align:left; }
.rich-town-menu-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; max-width:520px; margin:8vh auto 0; }
.rich-town-menu-grid button { min-height:52px; }
.rich-town-copy { max-width:680px; margin:auto; }
.rich-town-copy h3 { margin-bottom:10px; font-size:1.35rem; }
.rich-town-copy code { color:var(--town-cyan); overflow-wrap:anywhere; }
.rich-town-panel input[type=range] { width:100%; accent-color:var(--town-cyan); }
.rich-town-cutscene { position:fixed; z-index:20; inset:0; display:grid; align-items:end; overflow:hidden; background:#020712; pointer-events:auto; }
.rich-town-cutscene[hidden] { display:none; }
.rich-town-cutscene>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .18s ease-out; }
.rich-town-cutscene[data-image-ready="true"]>img { opacity:.82; }
.rich-town-cutscene>div { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:20px; padding:clamp(20px,5vw,62px); background:linear-gradient(transparent,rgba(2,7,18,.94) 36%); }
.rich-town-cutscene h2 { max-width:18ch; margin:7px 0; font-size:clamp(2rem,5vw,4.8rem); line-height:.9; text-transform:uppercase; }
.rich-town-cutscene p { max-width:62ch; margin:0; color:#dbe8fa; line-height:1.5; }
.rich-town-cutscene footer { display:flex; gap:8px; }
.rich-town-cutscene button { min-width:110px; }
.rich-town-toast { position:fixed; z-index:22; top:max(148px,calc(env(safe-area-inset-top) + 136px)); left:50%; max-width:min(480px,calc(100vw - 28px)); transform:translateX(-50%); padding:9px 14px; border:1px solid #ffe38a; border-radius:6px; background:#071126; box-shadow:0 12px 35px rgba(0,0,0,.45); color:#fff4d6; font-size:.72rem; font-weight:800; }
.rich-town-mobile { display:none; }
#app.is-rich-town #gallery-hud>.hud-top,#app.is-rich-town #town-tracker,#app.is-rich-town #activity-hud,#app.is-rich-town #bowling-hud,#app.is-rich-town #crosshair { display:none!important; }
#app.is-rich-town #touch-controls .touch-stick,#app.is-rich-town #touch-controls .touch-action { display:none; }

@media (pointer:coarse),(hover:none) {
  .rich-town-goals { display:none; }
  .rich-town-mobile { position:absolute; z-index:7; right:max(10px,env(safe-area-inset-right)); bottom:max(54px,calc(env(safe-area-inset-bottom) + 42px)); left:max(10px,env(safe-area-inset-left)); display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px; pointer-events:none; }
  .rich-town-mobile button { min-width:0; min-height:48px; padding:3px; font-size:.55rem; touch-action:none; pointer-events:auto; }
  .rich-town-mobile button[data-rich-mobile=boost],.rich-town-mobile button[data-rich-mobile=fire] { display:none; }
  .rich-town-ui[data-activity=kart] .rich-town-mobile button[data-rich-mobile=boost],.rich-town-ui[data-activity=kart] .rich-town-mobile button[data-rich-mobile=fire] { display:block; }
  .rich-town-ui[data-activity=kart] .rich-town-mobile { grid-template-columns:repeat(8,minmax(0,1fr)); }
  .rich-town-ui[data-activity=train] .rich-town-mobile { left:auto; width:min(134px,calc(100vw - 20px)); grid-template-columns:1fr; }
  .rich-town-ui[data-activity=train] .rich-town-mobile button:not([data-rich-mobile=use]) { display:none; }
  .rich-town-ui[data-activity=train] .rich-town-mobile button[data-rich-mobile=use] { display:block; }
  #app.is-rich-town #touch-controls { display:block; }
  #app.is-rich-town #touch-controls .look-zone { top:120px; bottom:54px; width:100%; pointer-events:auto; }
  .rich-town-status { bottom:max(108px,calc(env(safe-area-inset-bottom) + 96px)); }
}

@media (max-width:900px) {
  .rich-town-hud { grid-template-columns:minmax(145px,auto) minmax(0,1fr); }
  .rich-town-brand { min-width:145px; }
  .rich-town-resources { justify-content:flex-start; }
  .rich-town-goals { top:156px; width:210px; }
  .rich-town-panel { left:max(10px,env(safe-area-inset-left)); width:auto; }
  .rich-town-build-layout,.rich-town-split { grid-template-columns:minmax(0,1fr) minmax(190px,35%); }
  .rich-town-management-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width:640px) {
  .rich-town-hud { top:max(6px,env(safe-area-inset-top)); right:6px; left:6px; grid-template-columns:1fr; gap:5px; }
  .rich-town-brand { display:flex; min-width:0; align-items:baseline; gap:8px; padding:6px 9px; }
  .rich-town-brand span { display:none; }
  .rich-town-brand strong { overflow:hidden; font-size:.8rem; text-overflow:ellipsis; white-space:nowrap; }
  .rich-town-brand small { margin-left:auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .rich-town-actions { grid-row:2; justify-content:flex-start; }
  .rich-town-actions button { min-height:30px; padding:0 9px; font-size:.58rem; }
  .rich-town-resources { grid-row:3; }
  .rich-town-resources>span { min-width:46px; padding:3px 5px; }
  .rich-town-resources small { display:none; }
  .rich-town-resources i { grid-row:auto; height:14px; }
  .rich-town-status { justify-content:flex-start; }
  .rich-town-status span,.rich-town-status strong { padding:5px 7px; font-size:.51rem; }
  .rich-town-panel { top:max(122px,calc(env(safe-area-inset-top) + 112px)); bottom:max(106px,calc(env(safe-area-inset-bottom) + 94px)); }
  .rich-town-panel>header { height:52px; }
  .rich-town-panel h2 { font-size:1rem; }
  .rich-town-panel>nav { min-height:38px; }
  .rich-town-panel-body { height:calc(100% - 90px); padding:8px; }
  .rich-town-build-layout,.rich-town-split { grid-template-columns:1fr; }
  .rich-town-panel-body aside { position:static; order:-1; }
  .rich-town-card-grid,.rich-town-management-grid { grid-template-columns:1fr; }
  .rich-town-menu-grid { grid-template-columns:1fr; margin-top:0; }
  .rich-town-cutscene>div { grid-template-columns:1fr; padding:18px; }
  .rich-town-cutscene h2 { font-size:2rem; }
  .rich-town-cutscene footer { justify-content:flex-end; }
  .rich-town-mobile { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .rich-town-ui[data-activity=kart] .rich-town-mobile { grid-template-columns:repeat(4,minmax(0,1fr)); }
}

@media (max-height:560px) and (orientation:landscape) {
  .rich-town-resources { display:none; }
  .rich-town-hud { grid-template-columns:minmax(155px,auto) minmax(0,1fr); }
  .rich-town-panel { top:58px; bottom:58px; }
  .rich-town-status { display:none; }
  .rich-town-mobile { right:8px; bottom:8px; left:auto; grid-template-columns:repeat(4,74px); width:auto; }
  .rich-town-mobile button { min-height:38px; }
}

/* Independence Town source-HUD parity pass. The town uses the reference game's
   compact shelf, prompt cards, build palette, and source build categories. */
.reference-rich-town-ui { --town-hud:#0d1630; --town-hud-deep:#060b1b; --town-border:rgba(255,255,255,.22); --town-muted:#b8c7df; --town-gold:#ffd36a; --town-green:#75f27d; --town-cyan:#58e1ff; --town-red:#e94f5d; font-family:Inter,system-ui,sans-serif; }
.reference-rich-town-ui .rich-town-hud { position:absolute; z-index:4; top:max(10px,env(safe-area-inset-top)); right:max(10px,env(safe-area-inset-right)); left:max(10px,env(safe-area-inset-left)); display:block; pointer-events:none; }
.reference-rich-town-ui .rich-town-topbar,.reference-rich-town-ui .rich-town-goal,.reference-rich-town-ui .rich-town-economy,.reference-rich-town-ui .rich-town-build-palette,.reference-rich-town-ui .rich-town-panel,.reference-rich-town-ui .rich-town-walk-hint { border:1px solid var(--town-border); border-radius:8px; background:linear-gradient(180deg,rgba(13,22,48,.8),rgba(6,11,27,.7)); box-shadow:0 16px 42px rgba(0,0,0,.25); backdrop-filter:blur(14px); }
.reference-rich-town-ui .rich-town-topbar { min-height:48px; display:grid; grid-template-columns:auto 40px minmax(0,1fr) auto; align-items:center; gap:7px; padding:6px 8px 6px 12px; pointer-events:auto; }
.reference-rich-town-ui .rich-town-brand h1 { margin:0; color:#fff; font-size:16px; line-height:1; white-space:nowrap; }
.reference-rich-town-ui .rich-town-nav-shelf { display:grid; width:40px; min-height:36px; padding:7px 10px; gap:4px; place-items:center; border-radius:8px; }
.reference-rich-town-ui .rich-town-nav-shelf span { display:block; width:18px; height:2px; border-radius:2px; background:#f7fbff; }
.reference-rich-town-ui .rich-town-stats { min-width:0; display:flex; align-items:center; gap:6px; overflow-x:auto; scrollbar-width:none; }
.reference-rich-town-ui .rich-town-stats::-webkit-scrollbar { display:none; }
.reference-rich-town-ui .rich-town-stats>div { flex:0 0 auto; display:grid; gap:2px; min-height:28px; padding:4px 7px; border:1px solid rgba(255,255,255,.12); border-radius:6px; background:rgba(255,255,255,.06); }
.reference-rich-town-ui .rich-town-stats span { color:var(--town-muted); font-size:9px; line-height:1; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.reference-rich-town-ui .rich-town-stats strong { color:#fff; font-size:12px; line-height:1; white-space:nowrap; }
.reference-rich-town-ui .rich-town-stats .rich-town-sparks { border-color:rgba(255,211,106,.5); background:linear-gradient(135deg,rgba(255,211,106,.22),rgba(255,255,255,.08)); }
.reference-rich-town-ui .rich-town-stats .rich-town-sparks strong { color:#ffe38a; font-size:14px; }
.reference-rich-town-ui .rich-town-top-actions { display:flex; align-items:center; gap:6px; padding-left:6px; border-left:1px solid rgba(255,255,255,.12); }
.reference-rich-town-ui .rich-town-top-actions button { min-height:36px; padding:0 10px; color:#f7fbff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); box-shadow:none; font-size:12px; letter-spacing:0; }
.reference-rich-town-ui .rich-town-top-actions .rich-town-build-toggle { min-width:94px; color:#162010; border-color:rgba(255,255,255,.3); background:linear-gradient(135deg,#ffd36a,#fff7dc 54%,#75f27d); font-size:13px; }
.reference-rich-town-ui .rich-town-top-actions .rich-town-launch { color:#071126; border-color:rgba(255,255,255,.22); background:linear-gradient(135deg,#e84b58,#fff6cf 50%,#4b78ff); }
.reference-rich-town-ui .rich-town-top-actions .rich-town-help { width:36px; padding:0; border-radius:50%; font-size:19px; }
.reference-rich-town-ui .rich-town-top-actions button.active:not(.rich-town-build-toggle) { color:#fff; border-color:var(--town-cyan); background:linear-gradient(180deg,#3966d5,#18306f); }
.reference-rich-town-ui .rich-town-top-actions button:hover,.reference-rich-town-ui .rich-town-top-actions button:focus-visible,.reference-rich-town-ui .rich-town-build-item:hover,.reference-rich-town-ui .rich-town-build-item:focus-visible { border-color:var(--town-cyan); filter:brightness(1.08); outline:none; }
.reference-rich-town-ui .rich-town-prompts { position:absolute; top:58px; left:0; display:grid; gap:8px; width:min(520px,calc(100vw - 20px)); pointer-events:auto; }
.reference-rich-town-ui .rich-town-goal { display:grid; grid-template-columns:26px 1fr auto; align-items:center; gap:8px; padding:8px 10px; }
.reference-rich-town-ui .rich-town-goal-check { display:grid; width:24px; height:24px; place-items:center; border-radius:50%; color:#06111f; background:var(--town-gold); font-weight:900; }
.reference-rich-town-ui .rich-town-goal.done .rich-town-goal-check { background:var(--town-green); }
.reference-rich-town-ui .rich-town-goal strong,.reference-rich-town-ui .rich-town-goal small { display:block; }
.reference-rich-town-ui .rich-town-goal strong { color:#f7fbff; font-size:13px; }
.reference-rich-town-ui .rich-town-goal small { margin-top:2px; color:var(--town-muted); font-size:11px; }
.reference-rich-town-ui .rich-town-goal button { min-height:30px; padding:0 9px; color:#071126; border-color:#ffe38a; background:linear-gradient(135deg,#ffe38a,#f7fbff); box-shadow:none; }
.reference-rich-town-ui .rich-town-hint { margin:0; padding:8px 10px; color:#edf6ff; font-size:12px; line-height:1.25; }
.reference-rich-town-ui .rich-town-economy { position:absolute; top:58px; left:0; z-index:1; display:grid; gap:8px; width:min(330px,calc(100vw - 20px)); padding:10px; opacity:0; pointer-events:none; transform:translateX(calc(-100% - 28px)); transition:transform .22s ease,opacity .18s ease; }
.reference-rich-town-ui.nav-shelf-open .rich-town-economy { opacity:1; pointer-events:auto; transform:translateX(0); }
.reference-rich-town-ui .rich-town-economy header { display:flex; align-items:center; justify-content:space-between; color:#f7fbff; font-size:12px; font-weight:850; text-transform:uppercase; letter-spacing:.04em; }
.reference-rich-town-ui .rich-town-economy header button { width:24px; min-height:24px; padding:0; border-radius:6px; box-shadow:none; }
.reference-rich-town-ui.economy-collapsed .rich-town-economy>div,.reference-rich-town-ui.economy-collapsed .rich-town-economy>p { display:none; }
.reference-rich-town-ui .rich-town-resources { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.reference-rich-town-ui .rich-town-resources article { display:grid; gap:3px; }
.reference-rich-town-ui .rich-town-resources span { display:flex; justify-content:space-between; gap:6px; color:#edf6ff; font-size:11px; white-space:nowrap; }
.reference-rich-town-ui .rich-town-resources i { display:block; height:6px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.12); }
.reference-rich-town-ui .rich-town-resources i b { display:block; height:100%; border-radius:inherit; }
.reference-rich-town-ui .rich-town-economy p { margin:0; color:var(--town-muted); font-size:11px; line-height:1.25; }
.reference-rich-town-ui .rich-town-walk-hint { position:fixed; z-index:3; bottom:10px; left:10px; max-width:min(560px,calc(100vw - 20px)); padding:8px 10px; color:#ecf5ff; font-size:13px; pointer-events:none; }
.reference-rich-town-ui .rich-town-walk-hint[aria-hidden="true"] { display:none; }
.reference-rich-town-ui .rich-town-build-palette { position:absolute; z-index:8; top:max(68px,calc(env(safe-area-inset-top) + 58px)); right:max(10px,env(safe-area-inset-right)); width:min(344px,calc(100vw - 20px)); max-height:calc(100vh - 86px); padding:10px; overflow:auto; pointer-events:auto; }
.reference-rich-town-ui .rich-town-build-palette[hidden] { display:none; }
.reference-rich-town-ui .rich-town-build-palette>header { display:flex; align-items:center; justify-content:space-between; gap:8px; color:#f7fbff; font-size:14px; font-weight:850; }
.reference-rich-town-ui .rich-town-build-palette>header button { min-height:34px; padding:0 11px; color:#071126; border-color:#ffe38a; background:linear-gradient(135deg,#ffe38a,#f7fbff 62%); box-shadow:none; }
.reference-rich-town-ui .rich-town-build-palette>p { margin:7px 0; color:var(--town-muted); font-size:12px; line-height:1.25; }
.reference-rich-town-ui [data-rich-field="build-hint"][data-preview-state="valid"] { color:#91ffae; font-weight:800; }
.reference-rich-town-ui [data-rich-field="build-hint"][data-preview-state="invalid"] { color:#ff9ca9; font-weight:800; }
.reference-rich-town-ui .rich-town-build-palette nav { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.reference-rich-town-ui .rich-town-build-palette nav button { min-height:30px; padding:0 5px; box-shadow:none; font-size:11px; letter-spacing:0; }
.reference-rich-town-ui .rich-town-build-palette nav button.active { color:#ffe38a; border-color:rgba(255,211,106,.72); background:rgba(255,211,106,.2); }
.reference-rich-town-ui [data-rich-field="build-items"] { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:8px; }
.reference-rich-town-ui .rich-town-build-item { display:grid; grid-template-columns:30px minmax(0,1fr); grid-template-rows:auto auto; align-items:center; gap:2px 7px; min-height:56px; padding:6px; text-align:left; color:#f7fbff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:7px; box-shadow:none; }
.reference-rich-town-ui .rich-town-build-item.selected { border-color:rgba(255,211,106,.86); background:rgba(255,211,106,.16); }
.reference-rich-town-ui .rich-town-build-item.cannot-afford { opacity:.62; }
.reference-rich-town-ui .rich-town-build-name { overflow:hidden; font-size:12px; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }
.reference-rich-town-ui .rich-town-build-cost { color:var(--town-muted); font-size:10px; }
.reference-rich-town-ui .rich-town-build-icon { grid-row:1/span 2; display:grid; width:28px; height:28px; place-items:center; font-size:22px; filter:drop-shadow(0 4px 4px rgba(0,0,0,.25)); }
.reference-rich-town-ui .fun-icon { position:relative; font-size:0; }
.reference-rich-town-ui .fun-icon i,.reference-rich-town-ui .fun-icon b,.reference-rich-town-ui .fun-icon em { position:absolute; display:block; border-radius:2px; background:#ffd36a; content:""; }
.reference-rich-town-ui .fun-icon i { top:9px; left:4px; width:20px; height:12px; }.reference-rich-town-ui .fun-icon b { top:4px; left:7px; width:14px; height:8px; }.reference-rich-town-ui .fun-icon em { top:18px; left:17px; width:7px; height:6px; }
.reference-rich-town-ui .fun-icon-fire i,.reference-rich-town-ui .fun-icon-fire b,.reference-rich-town-ui .fun-icon-pizza b,.reference-rich-town-ui .fun-icon-boat i { background:#e94f5d; }.reference-rich-town-ui .fun-icon-police i,.reference-rich-town-ui .fun-icon-police b,.reference-rich-town-ui .fun-icon-aquarium i,.reference-rich-town-ui .fun-icon-playground i { background:#58e1ff; }.reference-rich-town-ui .fun-icon-park i,.reference-rich-town-ui .fun-icon-park b { background:#75f27d; }.reference-rich-town-ui .fun-icon-train i,.reference-rich-town-ui .fun-icon-train b { background:#4a5261; }.reference-rich-town-ui .fun-icon-ship i { background:#f7fbff; }.reference-rich-town-ui .fun-icon-ship b { background:#527cff; }
.reference-rich-town-ui .rich-town-panel { z-index:8; top:max(68px,calc(env(safe-area-inset-top) + 58px)); bottom:12px; width:min(540px,calc(100vw - 364px)); max-width:calc(100vw - 20px); border-color:var(--town-border); }
.reference-rich-town-ui .rich-town-panel>header { height:54px; }.reference-rich-town-ui .rich-town-panel-body { height:calc(100% - 96px); }
@media (max-width:1050px) { .reference-rich-town-ui .rich-town-topbar { grid-template-columns:auto 40px minmax(0,1fr); }.reference-rich-town-ui .rich-town-top-actions { grid-column:1/-1; justify-content:flex-end; padding-top:5px; border-top:1px solid rgba(255,255,255,.12); border-left:0; }.reference-rich-town-ui .rich-town-panel { left:10px; width:auto; } }
@media (max-width:700px) { .reference-rich-town-ui .rich-town-topbar { grid-template-columns:1fr 40px; gap:5px; }.reference-rich-town-ui .rich-town-stats { grid-column:1/-1; grid-row:2; }.reference-rich-town-ui .rich-town-top-actions { grid-column:1/-1; grid-row:3; justify-content:flex-start; overflow-x:auto; }.reference-rich-town-ui .rich-town-top-actions button { flex:0 0 auto; min-height:31px; font-size:10px; }.reference-rich-town-ui .rich-town-build-palette { top:154px; bottom:104px; max-height:none; }.reference-rich-town-ui .rich-town-prompts { top:151px; width:min(360px,calc(100vw - 20px)); }.reference-rich-town-ui .rich-town-prompts .rich-town-hint { display:none; }.reference-rich-town-ui .rich-town-goal strong { font-size:11px; }.reference-rich-town-ui .rich-town-panel { top:154px; bottom:102px; }.reference-rich-town-ui .rich-town-walk-hint { bottom:104px; font-size:10px; } }

.reference-rich-town-ui .rich-town-stats { position:fixed; bottom:max(10px,env(safe-area-inset-bottom)); left:50%; z-index:3; width:min(930px,calc(100vw - 20px)); padding:6px; border:1px solid var(--town-border); border-radius:8px; background:linear-gradient(180deg,rgba(13,22,48,.76),rgba(6,11,27,.64)); box-shadow:0 16px 42px rgba(0,0,0,.22); transform:translateX(-50%); }
.reference-rich-town-ui .rich-town-topbar { backdrop-filter:none; }
.reference-rich-town-ui .rich-town-walk-hint { bottom:max(54px,calc(env(safe-area-inset-bottom) + 44px)); }
@media (max-width:700px) { .reference-rich-town-ui .rich-town-stats { right:8px; bottom:max(108px,calc(env(safe-area-inset-bottom) + 98px)); left:8px; width:auto; padding:5px; transform:none; }.reference-rich-town-ui .rich-town-stats>div { min-width:78px; }.reference-rich-town-ui .rich-town-walk-hint { bottom:max(160px,calc(env(safe-area-inset-bottom) + 150px)); } }

/* Dense HUD pass: preserve the next town objective and release timing while
   moving secondary telemetry away from mobile controls. */
@media (min-width:701px) {
  .reference-rich-town-ui .rich-town-topbar { min-height:42px; grid-template-columns:auto 34px minmax(0,1fr) auto; gap:5px; padding:4px 6px 4px 10px; }
  .reference-rich-town-ui .rich-town-brand h1 { font-size:14px; }
  .reference-rich-town-ui .rich-town-nav-shelf { width:34px; min-height:30px; padding:5px 8px; }
  .reference-rich-town-ui .rich-town-top-actions { gap:4px; padding-left:5px; }
  .reference-rich-town-ui .rich-town-top-actions button { min-height:30px; padding:0 8px; font-size:10px; }
  .reference-rich-town-ui .rich-town-top-actions .rich-town-build-toggle { min-width:78px; font-size:11px; }
  .reference-rich-town-ui .rich-town-top-actions .rich-town-help { width:30px; font-size:16px; }
  .reference-rich-town-ui .rich-town-prompts { top:50px; width:min(420px,calc(100vw - 20px)); gap:5px; }
  .reference-rich-town-ui .rich-town-goal { grid-template-columns:22px 1fr auto; gap:6px; padding:6px 8px; }
  .reference-rich-town-ui .rich-town-goal-check { width:20px; height:20px; font-size:11px; }
  .reference-rich-town-ui .rich-town-goal strong { font-size:12px; }
  .reference-rich-town-ui .rich-town-goal small { font-size:10px; }
  .reference-rich-town-ui .rich-town-hint { padding:5px 8px; font-size:10px; }
  .reference-rich-town-ui .rich-town-stats { width:min(760px,calc(100vw - 20px)); gap:4px; padding:4px; }
  .reference-rich-town-ui .rich-town-stats>div { min-height:23px; padding:3px 5px; }
  .reference-rich-town-ui .rich-town-stats span { font-size:8px; }
  .reference-rich-town-ui .rich-town-stats strong { font-size:10px; }
  .reference-rich-town-ui .rich-town-stats .rich-town-sparks strong { font-size:12px; }
}

@media (max-width:700px) {
  .reference-rich-town-ui .rich-town-prompts .rich-town-goal:not(.rich-town-current-goal) { display:none; }
  .reference-rich-town-ui .rich-town-current-goal { grid-template-columns:22px minmax(0,1fr) auto; gap:6px; padding:7px 8px; }
  .reference-rich-town-ui .rich-town-current-goal .rich-town-goal-check { width:21px; height:21px; font-size:11px; }
  .reference-rich-town-ui .rich-town-current-goal strong { font-size:12px; }
  .reference-rich-town-ui .rich-town-current-goal small { font-size:10px; }
  .reference-rich-town-ui .rich-town-walk-hint { display:none; }
  .reference-rich-town-ui .rich-town-stats { right:8px; bottom:max(116px,calc(env(safe-area-inset-bottom) + 106px)); left:8px; display:flex; width:auto; justify-content:center; gap:5px; overflow:hidden; padding:4px; transform:none; }
  .reference-rich-town-ui .rich-town-stats>div { display:none; min-width:0; }
  .reference-rich-town-ui .rich-town-stats>div:nth-child(4),
  .reference-rich-town-ui .rich-town-stats>div:nth-child(9) { display:grid; min-width:86px; }
  .reference-rich-town-ui .rich-town-mobile { bottom:max(8px,env(safe-area-inset-bottom)); grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
  .reference-rich-town-ui .rich-town-mobile button { min-height:46px; padding:3px 2px; font-size:.52rem; }
  .reference-rich-town-ui[data-activity=kart] .rich-town-mobile { grid-template-columns:repeat(4,minmax(0,1fr)); }
  #app.is-rich-town #touch-controls .look-zone { bottom:0; }
  #app.is-rich-town .rich-town-ui { z-index:21; }
  #app.is-rich-town #interaction-prompt { z-index:2; bottom:max(176px,calc(env(safe-area-inset-bottom) + 166px)); width:min(320px,calc(100vw - 28px)); font-size:.66rem; }
}

@media (max-width:720px) and (orientation:portrait) {
  #bowling-hud[data-player-ready="true"] { right:auto; bottom:max(188px,calc(env(safe-area-inset-bottom) + 176px)); left:50%; width:min(312px,calc(100vw - 22px)); grid-template-columns:minmax(0,1fr) 32px; gap:5px 8px; padding:8px 9px 9px; transform:translateX(-50%); }
  #bowling-hud[data-player-ready="true"] > span:first-child,
  #bowling-hud[data-player-ready="true"] > small,
  #bowling-hud[data-player-ready="true"] .bowling-control-meters { display:none; }
  #bowling-hud[data-player-ready="true"] > strong { font-size:.92rem; }
  #bowling-hud[data-player-ready="true"] .bowling-shot-feedback { gap:7px; }
  #bowling-hud[data-player-ready="true"] #bowling-shot-grade { min-width:86px; padding:5px 7px; font-size:.75rem; }
  #bowling-hud[data-player-ready="true"] .bowling-swing-meter { height:16px; }
  #app.is-bowling-active .touch-action.interact { border-color:var(--yellow); box-shadow:0 0 0 2px rgba(255,212,42,.16),0 4px 16px rgba(0,0,0,.34); }
}

/* Independence Town source fishing parity: a named shore keeps its compact
   casting loop, local catch card, and beach collection visible in one panel. */
.reference-rich-town-ui.fishing-open .rich-town-panel { top:auto; right:auto; bottom:max(90px,calc(env(safe-area-inset-bottom) + 80px)); left:max(10px,env(safe-area-inset-left)); width:min(380px,calc(100vw - 20px)); }
.reference-rich-town-ui.fishing-open .rich-town-panel-body { padding:10px; }
.rich-town-fishing-shell { display:grid; gap:10px; }
.rich-town-fishing-location,.rich-town-fishing-tackle,.rich-town-fishing-cast-controls,.rich-town-fishing-result,.rich-town-fishing-collection { display:grid; gap:6px; padding:9px; border:1px solid rgba(255,255,255,.16); border-radius:7px; background:rgba(4,12,29,.58); }
.rich-town-fishing-shell h3,.rich-town-fishing-shell p { margin:0; }
.rich-town-fishing-shell small { color:var(--town-cyan); font-size:.58rem; font-weight:900; letter-spacing:.08em; }
.rich-town-fishing-location h3 { color:#fff; font-size:1rem; }
.rich-town-fishing-location p,.rich-town-fishing-cast-controls p { color:#bfcae0; font-size:.7rem; line-height:1.35; }
.rich-town-fishing-lures { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.reference-rich-town-ui .rich-town-fishing-lures button { min-width:0; min-height:38px; padding:4px; color:#f7fbff; background:rgba(255,255,255,.1); font-size:.61rem; letter-spacing:0; }
.reference-rich-town-ui .rich-town-fishing-lures button.active { color:#071126; border-color:rgba(255,255,255,.4); background:linear-gradient(135deg,#ffd36a,#f7fbff 58%,#58e1ff); }
.rich-town-fishing-range { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; color:#f7fbff; font-size:.72rem; }
.rich-town-fishing-range input { width:100%; accent-color:var(--town-cyan); }
.reference-rich-town-ui .rich-town-fishing-cast { min-height:40px; }
.reference-rich-town-ui .rich-town-fishing-cast:disabled { opacity:.55; cursor:default; }
.rich-town-fishing-result { color:#f7fbff; font-size:.76rem; font-weight:850; }
.rich-town-fishing-result.waiting { grid-template-columns:minmax(0,1fr) auto; align-items:center; border-color:rgba(88,225,255,.42); }
.rich-town-fishing-result.waiting [data-rich-fishing-countdown] { color:var(--town-cyan); font-variant-numeric:tabular-nums; }
.rich-town-fishing-result.caught { border-color:rgba(255,211,106,.62); background:rgba(255,211,106,.1); }
.rich-town-fishing-result.missed { border-color:rgba(233,79,93,.52); color:#ffd3d7; }
.rich-town-fishing-catch-card { display:grid; grid-template-columns:96px minmax(0,1fr); align-items:center; gap:9px; }
.rich-town-fishing-specimen { display:block; width:96px; height:64px; border-radius:6px; background:#12395c; image-rendering:pixelated; object-fit:cover; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
.rich-town-fishing-specimen.fallback { display:grid; place-items:center; color:#fff; font-size:.7rem; font-weight:900; }
.rich-town-fishing-catch-card strong,.rich-town-fishing-catch-card span { display:block; }
.rich-town-fishing-catch-card strong { color:#f7fbff; font-size:.9rem; }
.rich-town-fishing-catch-card span { margin-top:3px; color:#ffd36a; font-size:.72rem; line-height:1.3; }
.rich-town-fishing-collection strong,.rich-town-fishing-collection span { display:block; }
.rich-town-fishing-collection strong { color:#f7fbff; font-size:.76rem; }
.rich-town-fishing-collection span { color:#bfcae0; font-size:.68rem; line-height:1.45; }

@media (max-width:700px) {
  .reference-rich-town-ui.fishing-open .rich-town-panel { top:max(154px,calc(env(safe-area-inset-top) + 144px)); right:10px; bottom:max(178px,calc(env(safe-area-inset-bottom) + 168px)); left:10px; width:auto; }
  .reference-rich-town-ui.fishing-open .rich-town-toast { display:none; }
  .rich-town-fishing-location,.rich-town-fishing-tackle,.rich-town-fishing-cast-controls,.rich-town-fishing-result,.rich-town-fishing-collection { padding:8px; }
  .reference-rich-town-ui .rich-town-fishing-lures button { min-height:36px; font-size:.57rem; }
}