/* disabiliSIM (was City Roam): character-select menu, loading screen, pause menu, in-game HUD. */
/* The game takes the whole content column (the page's 760px game cap is for the small games). */
.game-wrap.roam-wrap { max-width: none; }
@font-face { font-family: 'Bebas Neue'; src: url('/roam/fonts/bebas-neue.woff2') format('woff2'); font-display: swap; }

.roam {
  --rm-bg: rgba(9, 13, 19, .9);
  --rm-line: rgba(255, 255, 255, .13);
  --rm-text: #eef2f5;
  --rm-dim: #93a1ad;
  --rm-accent: #ffb547;
  --rm-accent-ink: #1a1206;
  position: relative; height: var(--roam-h, clamp(520px, calc(100dvh - 110px), 1200px)); border-radius: 14px; overflow: hidden;
  background: #0b0f15; color: var(--rm-text); touch-action: none; user-select: none; -webkit-user-select: none;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.roam:fullscreen { height: 100vh; border-radius: 0; }
.roam-canvas { display: block; width: 100%; height: 100%; }
@media (pointer: fine) {
  .roam:not(.menu-open):not(.is-paused):not(.is-photo) .roam-canvas { cursor: grab; }
  .roam.is-dragging:not(.menu-open):not(.is-paused):not(.is-photo) .roam-canvas { cursor: grabbing; }
}
.roam-black { position: absolute; inset: 0; background: #000; }
.roam-fade { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity .7s ease; pointer-events: none; z-index: 3; }
.roam-fade.on { opacity: 1; }
.roam [hidden] { display: none !important; }
.roam button { font: inherit; }
.roam :focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 2px; }

/* ---------- Title ---------- */
.rm-title h1, .rl-title { margin: 0; font-family: 'Bebas Neue', Impact, sans-serif; font-weight: 400; line-height: .86; letter-spacing: .06em; color: #fff; display: flex; gap: .22em; }
.rm-title h1 { font-size: 54px; }
.rm-title h1 span:last-child, .rl-title span:last-child { color: var(--rm-accent); }
.rm-title p { margin: 8px 0 0; color: var(--rm-dim); font-size: 13px; line-height: 1.35; max-width: 30ch; }
.roam.menu-open:not(.is-loading) .rm-title h1 span { animation: rm-rise .7s cubic-bezier(.2, .8, .2, 1) both; }
.roam.menu-open:not(.is-loading) .rm-title h1 span:last-child { animation-delay: .08s; }
@keyframes rm-rise { from { opacity: 0; transform: translateY(14px); letter-spacing: .3em; } }

/* ---------- Loading ---------- */
.roam-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; background: radial-gradient(120% 90% at 50% 40%, #18202b 0%, #0b0f15 70%); z-index: 5; transition: opacity .5s ease; }
.roam:not(.is-loading) .roam-loading { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .5s ease, visibility 0s linear .5s; }
.rl-title { font-size: 72px; }
.rl-bar { width: min(280px, 70vw); height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.rl-bar i { display: block; height: 100%; width: 0; background: var(--rm-accent); transition: width .2s ease; }
.rl-text { font-size: 13px; color: var(--rm-dim); letter-spacing: .04em; }
.roam-loading.is-error .rl-text { color: #ff8f7a; }

/* ---------- Menu panel ---------- */
.roam-menu { box-sizing: border-box; position: absolute; left: 0; top: 0; bottom: 0; width: min(400px, 100%); display: flex; flex-direction: column; gap: 14px; padding: 26px 26px 18px; color: var(--rm-text);
  background: linear-gradient(90deg, rgba(9, 13, 19, .93) 0%, rgba(9, 13, 19, .86) 78%, rgba(9, 13, 19, 0) 100%); }
.roam:not(.menu-open) .roam-menu { display: none; }
.roam-menu input { position: absolute; opacity: 0; pointer-events: none; }
.rm-panes { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.rm-pane { display: flex; flex-direction: column; gap: 14px; animation: rm-pane .25s ease both; }
@keyframes rm-pane { from { opacity: 0; transform: translateX(-8px); } }
.roam-menu:has(input[name=tab][value=body]:checked) .rm-pane:not([data-pane=body]),
.roam-menu:has(input[name=tab][value=gear]:checked) .rm-pane:not([data-pane=gear]),
.roam-menu:has(input[name=tab][value=look]:checked) .rm-pane:not([data-pane=look]),
.roam-menu:has(input[name=tab][value=senses]:checked) .rm-pane:not([data-pane=senses]) { display: none; }

/* Tabs */
.rm-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rm-line); }
.rm-tab span { display: block; padding: 8px 12px 9px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rm-dim); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s; }
.rm-tab:hover span { color: var(--rm-text); }
.rm-tab:has(input:checked) span { color: #fff; border-bottom-color: var(--rm-accent); }

.rm-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rm-dim); margin-bottom: 6px; }
.rm-group { display: flex; flex-direction: column; }
.rm-row { display: flex; gap: 18px; flex-wrap: wrap; }

/* Body cards: a selected card gets the accent bar, a check mark and bolder text - not colour alone. */
.rm-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rm-card { position: relative; display: grid; gap: 1px; padding: 7px 10px 7px 13px; border-radius: 10px; border: 1px solid var(--rm-line); background: rgba(255, 255, 255, .04); cursor: pointer; transition: background .15s, border-color .15s, transform .1s; }
.rm-card b { font-size: 15px; letter-spacing: .02em; }
.rm-card span { font-size: 11px; color: var(--rm-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-desc { display: none; margin: -2px 0 0; font-size: 12px; color: var(--rm-dim); }
@media (max-width: 700px), (max-height: 500px) and (orientation: landscape) { .rm-desc { display: block; } } /* the cards' own lines are hidden there */
.rm-card:hover { background: rgba(255, 255, 255, .08); }
.rm-card:active { transform: scale(.99); }
.rm-card:has(input:checked) { border-color: var(--rm-accent); background: rgba(255, 181, 71, .12); box-shadow: inset 4px 0 0 var(--rm-accent); }
.rm-card:has(input:checked)::after { content: '✓'; position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--rm-accent); font-weight: 800; }
.rm-card:has(input:focus-visible) { outline: 2px solid var(--rm-accent); outline-offset: 2px; }

/* Segmented controls */
.rm-segs { display: flex; border: 1px solid var(--rm-line); border-radius: 9px; overflow: hidden; width: max-content; max-width: 100%; }
.rm-seg span { display: block; padding: 8px 13px; cursor: pointer; color: #cfd8de; font-size: 13px; }
.rm-seg + .rm-seg span { border-left: 1px solid var(--rm-line); }
.rm-seg:hover span { background: rgba(255, 255, 255, .07); }
.rm-seg:has(input:checked) span { background: var(--rm-accent); color: var(--rm-accent-ink); font-weight: 700; }
.rm-seg:has(input:focus-visible) span, .rm-swatch:has(input:focus-visible) span, .rm-chip:has(input:focus-visible) span, .rm-tab:has(input:focus-visible) span { outline: 2px solid var(--rm-accent); outline-offset: -2px; }
.rm-hair .rm-seg span { padding: 8px 9px; }

/* Swatches: selected = white ring + accent halo + slightly larger. */
.rm-swatches { display: flex; gap: 8px; align-items: center; min-height: 34px; flex-wrap: wrap; }
.rm-swatch span { display: block; width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .22); cursor: pointer; transition: transform .12s; }
.rm-swatch:hover span { transform: scale(1.08); }
.rm-swatch:has(input:checked) span { border-color: #fff; box-shadow: 0 0 0 3px var(--rm-accent); transform: scale(1.1); }

/* Senses chips */
.rm-chips { display: grid; gap: 8px; }
.rm-chip span { display: grid; gap: 2px; padding: 11px 14px 11px 42px; border-radius: 10px; border: 1px solid var(--rm-line); cursor: pointer; color: var(--rm-dim); font-size: 12px; position: relative; }
.rm-chip span b { color: var(--rm-text); font-size: 15px; }
.rm-chip span::before { content: ''; position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 4px; border: 2px solid var(--rm-dim); }
.rm-chip:hover span { background: rgba(255, 255, 255, .06); }
.rm-chip:has(input:checked) span { border-color: var(--rm-accent); background: rgba(255, 181, 71, .1); }
.rm-chip:has(input:checked) span::before { background: var(--rm-accent); border-color: var(--rm-accent); }
.rm-chip:has(input:checked) span::after { content: '✓'; position: absolute; left: 17px; top: 50%; transform: translateY(-52%); font-size: 12px; font-weight: 900; color: var(--rm-accent-ink); }

/* World tab: time and weather rows, then the senses three across. */
.rm-chip span i { font-style: normal; }
.rm-pane[data-pane=senses] .rm-chips { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rm-pane[data-pane=senses] .rm-chip span { padding: 9px 8px 9px 32px; }
.rm-pane[data-pane=senses] .rm-chip span::before { left: 10px; }
.rm-pane[data-pane=senses] .rm-chip:has(input:checked) span::after { left: 13px; }
.rm-senses-label { margin: 2px 0 -6px; }
@media (max-height: 820px), (max-width: 700px) { .rm-chip span i { display: none; } }

/* Body-specific options */
.roam-menu:not(:has(input[name=body][value=custom]:checked)) .rm-custom,
.roam-menu:has(input[name=body][value=para]:checked) .rm-amp,
.roam-menu:has(input[name=body][value=dsd]:checked) .rm-amp,
.roam-menu:has(input[name=body][value=dhd]:checked) .rm-len,
.roam-menu:has(input[name=body][value=dakdae]:checked) .rm-chairsel,
.roam-menu:has(input[name=body][value=dbkdbe]:checked) .rm-chairsel,
.roam-menu:has(input[name=body][value=dsd]:checked) .rm-chaircol,
.roam-menu:has(input[name=body][value=para]:checked) .rm-cover { display: none; }
.roam-menu:not(:has(input[name=body][value=para]:checked)) .rm-n-para,
.roam-menu:not(:has(input[name=body][value=dsd]:checked)) .rm-n-dsd,
.roam-menu:not(:has(input[name=body][value=dakdae]:checked)) .rm-n-dakdae,
.roam-menu:not(:has(input[name=body][value=dbkdbe]:checked)) .rm-n-dbkdbe { display: none; }
.rm-seg:has(input:disabled) span { opacity: .35; cursor: not-allowed; }
/* Custom: a picker per limb, two by two. */
.rm-custom { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rm-limblen { margin-top: 4px; } .rm-limblen[hidden] { display: none; }
.roam-menu:has(input[name=body][value=custom]:checked) .rm-len { display: none; } /* custom picks a length per limb */
.rm-limb { display: flex; flex-direction: column; }
.rm-limb .rm-label { margin-bottom: 4px; }
.rm-limb select { font: inherit; font-size: 13px; padding: 7px 8px; border-radius: 8px; border: 1px solid var(--rm-line); background: #141a22; color: var(--rm-text); }
.rm-note { margin: 0; font-size: 12px; color: var(--rm-dim); line-height: 1.4; }

/* Footer */
.rm-foot { display: grid; gap: 10px; }
.roam .rm-go { width: 100%; padding: 15px 18px; border: 0; border-radius: 12px; background: var(--rm-accent); color: var(--rm-accent-ink); font-family: 'Bebas Neue', Impact, sans-serif; font-size: 26px; letter-spacing: .12em; cursor: pointer; transition: transform .1s, filter .15s; }
.roam .rm-go:hover { filter: brightness(1.08); }
.roam .rm-go:active { transform: scale(.985); }
.roam .rm-go:disabled { opacity: .6; cursor: progress; }
.rm-alt { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rm-alt-btn { min-height: 44px; border-radius: 10px; border: 1px solid var(--rm-line); background: rgba(255, 255, 255, .06); color: var(--rm-text); font-weight: 700; font-size: 14px; cursor: pointer; }
.rm-alt-btn:hover { background: rgba(255, 255, 255, .12); }
.rm-alt-btn:focus-visible, .roam .rm-go:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 2px; }
.rm-links { display: flex; gap: 16px; font-size: 12px; }
.rm-link { background: none; border: 0; padding: 4px 0; color: var(--rm-dim); cursor: pointer; text-decoration: none; }
.rm-link:hover { color: var(--rm-text); }

/* ---------- Pause and credits ---------- */
.roam-pause, .roam-credits { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(6, 9, 13, .72); backdrop-filter: blur(4px); z-index: 4; animation: rp-in .18s ease both; }
@keyframes rp-in { from { opacity: 0; } }
.rp-box { display: grid; gap: 10px; width: min(300px, 86%); padding: 26px; border-radius: 16px; background: var(--rm-bg); border: 1px solid var(--rm-line); }
.rc-box { width: min(440px, 90%); font-size: 13px; line-height: 1.45; color: #cfd8de; }
.rc-box p { margin: 0; }
.rh-table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.rh-table th { text-align: left; color: var(--rm-dim); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 0 6px 6px 0; }
.rh-table td { padding: 5px 6px 5px 0; border-top: 1px solid var(--rm-line); vertical-align: top; }
.rh-table td:first-child { color: #fff; }
.roam-help .rc-box { max-height: 92%; overflow-y: auto; }
.rc-box a { color: var(--rm-accent); }
.roam .rp-title { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 40px; letter-spacing: .08em; color: #fff; margin-bottom: 6px; }
.rp-btn { display: block; text-align: center; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--rm-line); background: rgba(255, 255, 255, .05); color: var(--rm-text); font-size: 15px; cursor: pointer; text-decoration: none; }
.rp-btn:hover { background: rgba(255, 255, 255, .1); }
.rp-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.rp-pair .rp-btn { font-size: 14px; padding: 12px 8px; }
.rp-btn.roam-resume { background: var(--rm-accent); border-color: var(--rm-accent); color: var(--rm-accent-ink); font-weight: 700; }

/* ---------- Photo mode: a side panel on wide screens, a bottom sheet on phones ---------- */
.roam-photo { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.ph-panel { pointer-events: auto; position: absolute; right: 12px; top: 12px; bottom: 12px; width: min(320px, calc(100% - 24px)); display: flex; flex-direction: column; gap: 10px; padding: 14px; box-sizing: border-box;
  border-radius: 14px; background: var(--rm-bg); border: 1px solid var(--rm-line); overflow: hidden; }
.ph-head { display: flex; align-items: center; justify-content: space-between; }
.roam .ph-title { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 28px; letter-spacing: .08em; color: #fff; }
.ph-exit, .ph-save { border: 0; border-radius: 10px; background: var(--rm-accent); color: var(--rm-accent-ink); font-weight: 700; padding: 8px 14px; cursor: pointer; }
.ph-save { width: 100%; padding: 13px; font-family: 'Bebas Neue', Impact, sans-serif; font-size: 22px; letter-spacing: .1em; font-weight: 400; }
.ph-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--rm-line); overflow-x: auto; scrollbar-width: none; }
.ph-tab { flex: 1 0 auto; min-height: 40px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--rm-dim); font-size: 10px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; padding: 8px 1px; cursor: pointer; }
.ph-tab.is-on { color: #fff; border-bottom-color: var(--rm-accent); }
.ph-pane { display: none; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 0; }
.ph-pane.is-on { display: flex; }
.ph-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ph-row { display: flex; gap: 6px; }
.ph-pane[data-pane=scene] .ph-grid, .ph-grid3 { grid-template-columns: repeat(3, 1fr); }
/* Recording: the panel steps aside, a bar counts down. */
.roam.is-recording .ph-panel, .roam.is-recording .ph-hint { display: none; }
.ph-recbar { pointer-events: auto; position: absolute; left: 50%; top: 12px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-radius: 12px; background: rgba(9, 13, 19, .78); color: #fff; font-size: 14px; }
.ph-dot { width: 10px; height: 10px; border-radius: 50%; background: #e5484d; animation: ph-blink 1s steps(2) infinite; }
@keyframes ph-blink { 50% { opacity: .2; } }
.ph-stop { border: 0; border-radius: 8px; background: #e5484d; color: #fff; font-weight: 700; padding: 6px 12px; cursor: pointer; }
.ph-chip { border: 1px solid var(--rm-line); background: rgba(255, 255, 255, .05); color: var(--rm-text); border-radius: 9px; padding: 9px 8px; font-size: 13px; cursor: pointer; text-align: center; }
.ph-chip:hover { background: rgba(255, 255, 255, .1); }
.ph-chip.is-on, .ph-chip[aria-pressed=true] { border-color: var(--rm-accent); background: rgba(255, 181, 71, .16); color: #fff; font-weight: 700; }
.ph-chip:disabled { opacity: .35; cursor: not-allowed; }
.ph-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rm-dim); }
.ph-range { display: grid; grid-template-columns: 70px 1fr 44px; align-items: center; gap: 8px; font-size: 13px; color: #cfd8de; }
.ph-range input { accent-color: var(--rm-accent); width: 100%; }
.ph-range:has(input:disabled) { opacity: .35; }
.ph-range output { text-align: right; color: var(--rm-dim); font-size: 12px; }
.ph-pane select { font: inherit; font-size: 13px; padding: 8px; border-radius: 8px; border: 1px solid var(--rm-line); background: #141a22; color: var(--rm-text); }
.ph-note { margin: 0; font-size: 12px; color: var(--rm-dim); line-height: 1.4; }
.ph-hint { position: absolute; left: 12px; bottom: 12px; color: #fff; font-size: 12px; text-shadow: 0 1px 3px #000; }
.roam.is-photo .roam-bar, .roam.is-photo .roam-hud, .roam.is-photo .roam-toast, .roam.is-photo .roam-wheelie { display: none; }
@media (max-width: 700px) {
  .ph-panel { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 46dvh; padding: 10px; gap: 8px; }
  /* The pose grid runs past the bottom of a phone screen: the open pane scrolls inside the sheet. */
  .ph-pane.is-on { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .ph-hint { top: 10px; bottom: auto; }
  .roam .ph-title { font-size: 22px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .ph-panel { top: 8px; bottom: 8px; right: 8px; width: min(300px, 48%); padding: 8px; gap: 6px; }
  .ph-chip { padding: 6px; font-size: 12px; }
  .roam .ph-title { font-size: 20px; }
}

/* Keyboard shortcuts on the buttons, for mouse and keyboard players (hidden on touch screens). */
.roam .kb { display: inline-block; margin-left: 7px; padding: 1px 5px; min-width: 0; border-radius: 5px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .75); font: 600 10.5px/1.4 system-ui, sans-serif; letter-spacing: .02em; vertical-align: 1px; }
.rp-btn.roam-resume .kb, .ph-exit .kb { border-color: rgba(26, 18, 6, .35); background: rgba(26, 18, 6, .1); color: var(--rm-accent-ink); }
@media (hover: none), (pointer: coarse) { .roam .kb, .roam .roam-mouse { display: none; } } /* no mouse to free */
@media (min-width: 701px) and (max-width: 940px) { .roam-bar .kb { display: none; } } /* room for the hint line (keys stay in the titles) */
.roam-lockhint { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); padding: 7px 12px; border-radius: 10px; background: rgba(9, 13, 19, .72); color: #fff; font-size: 13px; pointer-events: none; animation: rp-in .2s ease both; }
.roam-lockhint .kb { margin: 0 6px 0 0; }

/* ---------- Action bar (touch and mouse): poses, the power chair's seat, photo mode ---------- */
.roam-actions { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 8px; }
/* Touch: a big Jump and a Turbo toggle above the actions, only while playing on a touch screen. */
.roam-pad { position: absolute; right: 12px; bottom: 72px; display: none; gap: 12px; align-items: flex-end; }
.roam-pad button { border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(9, 13, 19, .6); color: #fff; font-weight: 700; font-size: 13px; touch-action: none; backdrop-filter: blur(3px); }
.rpad-jump { width: 76px; height: 76px; }
.rpad-turbo { width: 56px; height: 56px; }
.rpad-turbo[aria-pressed=true] { background: var(--rm-accent); color: var(--rm-accent-ink); }
@media (pointer: coarse) { .roam:not(.menu-open):not(.is-paused):not(.is-photo):not(.has-card) .roam-pad { display: flex; } }
.ra-btn { min-width: 64px; min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(9, 13, 19, .62); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; backdrop-filter: blur(3px); }
.ra-btn[aria-expanded=true] { border-color: var(--rm-accent); background: rgba(255, 181, 71, .2); }
.roam-sheet { position: absolute; right: 12px; bottom: 66px; width: min(300px, calc(100% - 24px)); display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px; border-radius: 14px; background: var(--rm-bg); border: 1px solid var(--rm-line); box-sizing: border-box; }
.roam-sheet .ph-chip { min-height: 40px; }
.roam.menu-open .roam-actions, .roam.is-paused .roam-actions, .roam.is-photo .roam-actions, .roam.has-card .roam-actions,
.roam.menu-open .roam-sheet, .roam.is-paused .roam-sheet, .roam.is-photo .roam-sheet, .roam.has-card .roam-sheet { display: none; }
.roam.has-card .roam-hud { display: none; }
.roam-hud { transition: opacity .6s ease; }
.roam.hud-quiet .roam-hud { opacity: 0; }
.ph-range input { height: 32px; }

/* ---------- Errands: the list, the E prompt, the choice card ---------- */
.roam-errands { position: absolute; left: 12px; top: 64px; background: rgba(9, 13, 19, .6); color: #fff; border-radius: 10px; padding: 8px 12px; font-size: 12px; backdrop-filter: blur(3px); pointer-events: none; }
.roam-errands b { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--rm-accent); }
.roam-errands ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.roam-errands li::before { content: '\25CB  '; color: var(--rm-dim); }
.roam-errands li.is-done { color: var(--rm-dim); text-decoration: line-through; }
.roam-errands li.is-done::before { content: '\2713  '; color: #7bd88f; }
.roam-prompt { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); border: 1px solid rgba(255, 255, 255, .3); border-radius: 12px; background: rgba(9, 13, 19, .75); color: #fff; padding: 10px 16px; font-size: 15px; cursor: pointer; }
.roam kbd { display: inline-block; min-width: 1.4em; padding: 1px 6px; margin-right: 6px; border-radius: 6px; background: var(--rm-accent); color: var(--rm-accent-ink); font: 700 12px system-ui, sans-serif; text-align: center; }
.roam-card { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(460px, calc(100% - 24px)); box-sizing: border-box; padding: 16px 18px; border-radius: 14px; background: var(--rm-bg); border: 1px solid var(--rm-line); color: #e7ecef; z-index: 2; }
.roam-card .rc-place { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 22px; letter-spacing: .08em; color: var(--rm-accent); }
.roam-card p { margin: 6px 0 12px; font-size: 14px; line-height: 1.45; }
.rc-choices { display: flex; gap: 8px; flex-wrap: wrap; }
.rc-choices button { border: 1px solid var(--rm-line); background: rgba(255, 255, 255, .06); color: #fff; border-radius: 10px; padding: 9px 12px; font-size: 14px; cursor: pointer; }
.rc-choices button:hover { background: rgba(255, 255, 255, .12); }
.roam.menu-open .roam-errands, .roam.menu-open .roam-prompt, .roam.menu-open .roam-card,
.roam.is-paused .roam-errands, .roam.is-paused .roam-prompt, .roam.is-paused .roam-card,
.roam.is-photo .roam-errands, .roam.is-photo .roam-prompt, .roam.is-photo .roam-card { display: none; }
@media (max-width: 700px) { .roam-errands { top: 104px; font-size: 11px; } .roam-prompt { bottom: 140px; } }
@media (max-height: 500px) and (orientation: landscape) { .roam-errands { top: 56px; } .roam-prompt { bottom: 70px; } .roam-card { bottom: 8px; padding: 10px 12px; } .roam-card p { margin: 4px 0 8px; font-size: 13px; } }

/* ---------- In-game HUD ---------- */
.roam-hud { position: absolute; left: 12px; top: 12px; right: 12px; max-width: calc(100% - 690px); min-width: 220px; color: #fff; font-size: 13px; text-shadow: 0 1px 3px #000; pointer-events: none; }
.roam-toast { position: absolute; left: 50%; bottom: 72px; transform: translateX(-50%); max-width: 90%; background: rgba(0, 0, 0, .72); color: #fff; padding: 9px 15px; border-radius: 10px; font-size: 14px; pointer-events: none; }
.roam-stick { position: absolute; width: 90px; height: 90px; margin: -45px 0 0 -45px; border: 2px solid rgba(255, 255, 255, .6); border-radius: 50%; pointer-events: none; }
.roam-bar { position: absolute; right: 12px; top: 12px; display: flex; gap: 8px; }
.rb-btn { padding: 8px 12px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(9, 13, 19, .55); color: #fff; font-size: 13px; cursor: pointer; backdrop-filter: blur(3px); }
.rb-btn:hover { background: rgba(9, 13, 19, .8); }
.roam:not(.is-third) .roam-zoom { display: none; }
.roam-zoom { min-width: 40px; font-weight: 700; }
.roam-pause-open { font-weight: 900; letter-spacing: -.05em; min-width: 40px; }
.roam-wheelie { position: absolute; left: 12px; bottom: 12px; padding: 16px 20px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(9, 13, 19, .6); color: #fff; font-weight: 700; }
.roam.menu-open .roam-bar, .roam.menu-open .roam-hud, .roam.menu-open .roam-wheelie,
.roam.is-paused .roam-bar, .roam.is-paused .roam-hud, .roam.is-paused .roam-wheelie, .roam.is-paused .roam-toast { display: none; }

/* ---------- Phones (portrait): preview on top, compact panel docked at the bottom ---------- */
@media (max-width: 700px) {
  .roam { height: var(--roam-h, calc(100dvh - 76px)); min-height: 0; border-radius: 10px; }
  .roam-menu { top: auto; width: 100%; max-height: 64%; padding: 40px 16px calc(12px + env(safe-area-inset-bottom)); gap: 10px;
    background: linear-gradient(0deg, rgba(9, 13, 19, .96) 0%, rgba(9, 13, 19, .92) 82%, rgba(9, 13, 19, 0) 100%); }
  .rm-title h1 { font-size: 34px; }
  .rm-title p, .rm-links { display: none; }
  .rm-cards { grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .rm-card { padding: 8px 2px; text-align: center; }
  .rm-card span, .rm-card:has(input:checked)::after { display: none; }
  .rm-card b { font-size: 13px; }
  .rm-custom { gap: 6px; } .rm-limb select { padding: 5px 4px; font-size: 12px; }
  /* Custom needs the pickers too: the panel takes more of the screen. */
  .roam-menu:has(input[name=body][value=custom]:checked) { max-height: 82%; }
  .rm-pane { gap: 10px; }
  .rm-row { gap: 12px; flex-wrap: nowrap; }
  .rm-swatch span { width: 24px; height: 24px; }
  .roam .rm-go { padding: 12px; font-size: 22px; }
  .rm-chip span { padding: 9px 12px 9px 40px; }
  .roam-hud { right: 12px; top: 56px; font-size: 12px; max-width: none; min-width: 0; }
  .rp-box { padding: 18px; width: min(300px, 88%); box-sizing: border-box; }
}
/* Short desktop windows: drop the tagline and tighten the body cards so the Body tab fits. */
@media (min-width: 701px) and (max-height: 820px) {
  .rm-title h1 { font-size: 46px; }
  .rm-title p { display: none; }
  /* Body cards four across, names only (the full name is in the HUD once you go out). */
  .rm-cards { grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .rm-card { padding: 8px 2px; text-align: center; }
  .rm-card span, .rm-card:has(input:checked)::after { display: none; }
  .rm-card b { font-size: 13px; }
  .roam-menu { gap: 12px; padding-top: 20px; }
}
/* Short phones (portrait): tighter spacing so every tab fits without scrolling. */
@media (max-width: 700px) and (max-height: 700px) {
  .roam-menu { max-height: 70%; padding-top: 30px; gap: 8px; }
  .rm-title h1 { font-size: 28px; }
  .rm-pane { gap: 8px; }
  .rm-label { margin-bottom: 4px; }
  .rm-tab span { padding: 6px 10px 7px; }
  .rm-chip span { padding: 7px 10px 7px 38px; }
  .rm-chips { gap: 6px; }
  .rm-seg span { padding: 7px 10px; }
  .rm-hair .rm-seg span { padding: 7px 7px; }
  .rm-note { font-size: 11px; line-height: 1.3; }
  .rm-pane[data-pane=look] { gap: 5px; }
  .rm-pane[data-pane=look] .rm-seg span, .rm-pane[data-pane=look] .rm-hair .rm-seg span { padding-top: 5px; padding-bottom: 5px; }
  .rm-swatches { min-height: 28px; }
}
@media (max-width: 380px) {
  .rm-swatches { gap: 5px; }
  .rm-swatch span { width: 21px; height: 21px; }
  .rm-row { gap: 10px; }
}
/* Phones in landscape: short and wide - panel on the left, everything in rows. Comes last so it
   wins over the short-desktop rule above (a landscape phone matches both). */
@media (max-height: 500px) and (orientation: landscape) {
  .roam { height: var(--roam-h, calc(100dvh - 20px)); min-height: 0; }
  .roam-menu { width: min(420px, 58%); padding: 10px 14px; gap: 6px; }
  .rm-title h1 { font-size: 26px; }
  .rm-title p, .rm-links { display: none; }
  .rm-tab span { padding: 5px 10px 6px; }
  .rm-cards { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .rm-card { padding: 5px 2px; min-height: 34px; align-content: center; text-align: center; } .rm-card span, .rm-card:has(input:checked)::after { display: none; } .rm-card b { font-size: 12px; }
  .rm-custom { gap: 4px 6px; } .rm-limb select { padding: 3px 4px; font-size: 11px; }
  .roam-menu:has(input[name=body][value=custom]:checked) { max-height: none; }
  .rm-pane { gap: 6px; }
  .rm-row { gap: 10px; flex-wrap: nowrap; }
  .rm-label { margin-bottom: 3px; font-size: 10px; }
  .rm-seg span { padding: 7px 9px; font-size: 12px; } .rm-hair .rm-seg span { padding: 7px 6px; }
  .rm-swatches { min-height: 26px; gap: 5px; } .rm-swatch span { width: 20px; height: 20px; }
  .rm-chips { grid-template-columns: repeat(3, 1fr); gap: 5px; } .rm-chip span { padding: 6px 8px 6px 32px; font-size: 11px; } .rm-chip span::before { left: 9px; } .rm-chip:has(input:checked) span::after { left: 12px; }
  .rm-note { display: none; }
  .roam .rm-go { padding: 7px; font-size: 19px; }
  .roam-hud { display: none; }
  /* Pause menu in two columns so it fits the short screen. */
  .roam-pause .rp-box { grid-template-columns: 1fr 1fr; gap: 7px; padding: 14px 16px; width: min(440px, 90%); }
  .roam-pause .rp-title, .roam-pause .roam-resume, .roam-pause .rp-pair { grid-column: 1 / -1; }
  .roam .rp-title { font-size: 28px; margin-bottom: 0; }
  .rp-btn, .rp-pair .rp-btn { padding: 8px 10px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .roam *, .roam *::before, .roam *::after { animation: none !important; transition: none !important; }
}
.roam.is-sky .roam-errands { display: none; } /* the climb has its own goals; errands are for Free Roam */
.rp-vols { display: grid; gap: 6px; }
.rp-vol { display: grid; grid-template-columns: 7.5em 1fr; align-items: center; gap: 10px; font-size: 13px; color: var(--rm-dim); }
.rp-vol input { min-height: 32px; accent-color: var(--rm-accent); }