/* Tanukade Orbit: catch the ISS. One night-sky column in the Pocket colors; the countdown is the hero, sky dome and live
   world map beside it, then place, passes and your catches. The catch view is full screen. */
:root {
  --night: #0d0812; --forest: #1a1222; --moss: #231830; --line: #ffffff1f; --line-solid: #3a2c48;
  --straw: #ffb35c; --straw-deep: #e08a2c; --cream: #fff3e6; --muted: #c7b9cf; --blush: #ff6f91; --sky: #8ce9ff;
  --f-display: "Avenir Next", system-ui, -apple-system, sans-serif;
  --f-body: "Avenir Next", system-ui, -apple-system, sans-serif;
  --f-pixel: ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box }
[hidden] { display: none !important }
html { background: var(--night) }
body { margin: 0; min-height: 100vh; background: radial-gradient(120% 60% at 85% 0%, #2a1240 0%, transparent 60%), radial-gradient(90% 50% at 0% 25%, #10243a 0%, transparent 60%), var(--night); color: var(--cream); font-family: var(--f-body); font-size: 16px; line-height: 1.5 }
a { color: inherit; text-decoration: none }
button, select, input { font: inherit; color: inherit }
button { cursor: pointer }
:focus-visible { outline: 2px solid var(--straw); outline-offset: 2px }

/* header (same as the other Tanukade pages) */
.site-header { border-bottom: 1px solid var(--line) }
.header-inner { width: min(100% - 64px, 1180px); min-height: 78px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 32px }
.wordmark { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; font-size: 24px; font-weight: 780; letter-spacing: -1px }
.wordmark img { display: block; width: 32px; height: 32px; object-fit: contain }
.main-nav { display: flex; align-items: center; gap: clamp(16px, 2.5vw, 34px); min-width: 0 }
.main-nav a { position: relative; padding: 29px 0 26px; color: #c9bfd0; font-size: 12px; white-space: nowrap }
.main-nav a:hover { color: var(--cream) }
.header-actions { min-width: 1px }

.wrap { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; display: flex; flex-direction: column; gap: 20px }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.mark { margin: 0; font-family: var(--f-display); font-size: clamp(30px, 7vw, 46px); font-weight: 900; font-style: italic; letter-spacing: -1px; line-height: 1; text-shadow: -2px 0 0 #21e6ff55, 2px 0 0 #ff3d8b55 }
.mark span { color: var(--straw) }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap }
.chip.go { border-color: var(--straw); color: var(--straw) }
.hero { background: #160f1dcc; border: 1px solid var(--line); border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 14px }
.eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: var(--straw) }
.count { font-family: var(--f-pixel); font-size: clamp(44px, 13vw, 76px); font-weight: 700; line-height: 1; color: var(--cream); font-variant-numeric: tabular-nums; text-wrap: balance }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 18px }
.fact { display: flex; flex-direction: column; min-width: 0 }
.fact b { font-weight: 700; font-size: 17px }
.fact small { color: var(--muted); font-size: 13px }
.actions { display: flex; gap: 10px; flex-wrap: wrap }
.btn { min-height: 48px; padding: 0 20px; border-radius: 999px; border: 1px solid #ffffff33; background: transparent; font-weight: 800 }
.btn.primary { background: var(--straw); color: #1d0d02; border-color: var(--straw); box-shadow: 0 8px 24px #ffb35c33 }
.btn.primary:disabled { background: var(--moss); color: var(--muted); border-color: var(--line); box-shadow: none; cursor: not-allowed }
.btn:disabled { opacity: .6; cursor: not-allowed }
.btn:hover:not(:disabled) { background: #ffffff12 }
.btn.primary:hover:not(:disabled) { background: #ffc47c }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 16px }
@media (max-width: 640px) { .grid2 { grid-template-columns: minmax(0, 1fr) } }
.panel { background: var(--forest); border: 1px solid #ffffff12; border-radius: 22px; padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0 }
.panel h2 { margin: 0; font-family: var(--f-display); font-weight: 900; font-style: italic; font-size: 20px; letter-spacing: -.3px }
canvas { display: block; width: 100%; max-width: 100% }
.readout { display: flex; flex-wrap: wrap; gap: 4px 14px; font-family: var(--f-pixel); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums }
.readout b { color: var(--cream); font-weight: 400 }
.loc { display: flex; flex-wrap: wrap; gap: 10px; align-items: end }
.loc label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted) }
.loc select, .loc input { min-height: 44px; background: var(--night); border: 1px solid var(--line); border-radius: 12px; padding: 0 12px }
.loc input { width: 9.5em }
.note { font-size: 14px; color: var(--muted); margin: 0 }
.passes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column }
.passes li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums }
.passes li:first-child { border-top: 0 }
.passes .when b { display: block }
.passes small { color: var(--muted); font-size: 13px }
.toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted) }
.toggle input { width: 20px; height: 20px; accent-color: var(--straw) }
.log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px }
.log li { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 16px; background: var(--moss); border: 1px solid #ffffff12 }
.stamp { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--straw); display: grid; place-items: center; font-family: var(--f-pixel); color: var(--straw); font-size: 12px; transform: rotate(-8deg) }
.stamp.reh { border-color: var(--muted); color: var(--muted); border-style: dashed }
.log small { color: var(--muted) }
.foot { font-size: 12px; color: var(--muted); margin: 0 }

/* location first: one clear button, and the promise about the location */
.locbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 14px 16px; border-radius: 18px; border: 1px solid #8ce9ff55; background: #0f1d2acc }
.locbar-text { display: flex; flex-direction: column; min-width: 0 }
.locbar-text b { font-size: 17px }
.locbar-text small { color: var(--muted); font-size: 13px }
.locbar.is-gps { border-color: #7fe0a855; background: #10231acc }
.locbar.is-gps .locbar-text small { color: #9fe8be }
.btn.loc { background: var(--sky); color: #04222c; border-color: var(--sky); white-space: nowrap }
.btn.loc:hover:not(:disabled) { background: #b5f2ff }
.locbar.is-gps .btn.loc { background: transparent; color: var(--cream); border-color: #ffffff33 }
.locbar-privacy { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--muted) }
@media (max-width: 520px) { .locbar { grid-template-columns: minmax(0, 1fr) } .btn.loc { width: 100% } }
/* remind me */
.remind-menu { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; border: 1px solid #ffffff1f; background: #0d0812aa }
.remind-cal { display: flex; gap: 10px; flex-wrap: wrap }
.remind-cal .btn { flex: 1 1 140px }
.linkish { align-self: flex-start; background: none; border: 0; padding: 0; color: var(--muted); text-decoration: underline; font-size: 13px }
/* how it works */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px }
.steps li { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 16px; background: var(--card2, #160f1d); border: 1px solid #ffffff12; font-size: 14px; line-height: 1.4 }
.steps b { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--straw); color: #1d0d02; font-size: 14px }
.steps em { font-style: normal; font-weight: 700; color: var(--straw) }
@media (max-width: 640px) { .steps { grid-template-columns: minmax(0, 1fr) } }

/* who's up there */
.crew-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px }
.crew-list li { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--moss); border: 1px solid #ffffff12 }
.crew-list .flag { font-size: 22px; line-height: 1 }
.crew-list b { display: block; font-size: 15px }
.crew-list small { color: var(--muted); font-size: 12px }
/* badges */
.badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px }
.badges li { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 14px; background: var(--moss); border: 1px solid #ffffff12 }
.badges li.locked { opacity: .45; filter: grayscale(1) }
.badges .icon { font-size: 26px; line-height: 1 }
.badges b { display: block; font-size: 14px }
.badges small { color: var(--muted); font-size: 12px; line-height: 1.3 }
#streakChip { border-color: var(--straw); color: var(--straw) }

/* catch view */
#catch { position: fixed; inset: 0; z-index: 2147483600; /* above the arcade top bar and lobby chat */ background: #06030a; touch-action: none; user-select: none; -webkit-user-select: none }
#catch canvas { position: absolute; inset: 0; width: 100%; height: 100% }
#catch video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000 }
.hud { position: absolute; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 14px 16px; pointer-events: none }
.hud.t { top: 0; padding-top: calc(14px + env(safe-area-inset-top, 0px)) }
.hud.b { bottom: 0; align-items: flex-end; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) }
.hud > * { pointer-events: auto }
.hud .btn { white-space: nowrap; background: #0d0812cc }
.hud-btns { display: flex; gap: 8px }
.hud-btns #btnSound { font-size: 13px; padding: 0 14px }
.hud .title { font-family: var(--f-display); font-weight: 900; font-style: italic; font-size: 20px }
.hud .sub { font-family: var(--f-pixel); color: var(--straw); font-size: 14px }
.hud .msg { font-size: 14px; color: var(--muted); max-width: 32ch }
.card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-2deg); width: min(340px, calc(100% - 32px)); background: var(--cream); color: #2a1424; border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5) }
.card .eyebrow { color: #b0532a }
.card .big { font-family: var(--f-display); font-size: 48px; font-weight: 900; font-style: italic; line-height: 1; color: #2a1424 }
.card .row { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; border-top: 1px dashed #d4bfae; padding-top: 6px }
.card .btn { background: #2a1424; color: var(--cream); border-color: #2a1424 }
.card-actions { display: flex; gap: 8px } .card-actions .btn { flex: 1 } .card .btn.share { background: var(--straw); color: #1d0d02; border-color: var(--straw) }
.card .wave { margin: 0; font-size: 14px; color: #5a3a50 }
.card .newbadge { margin: 0; padding: 6px 10px; border-radius: 10px; background: #2a1424; color: var(--straw); font-weight: 800; font-size: 14px }
.hud .aboard { font-size: 13px; color: var(--muted); margin-top: 2px }
.card.pop { animation: cardPop .55s cubic-bezier(.2, 1.4, .4, 1) both }
@keyframes cardPop { from { opacity: 0; transform: translate(-50%, -30%) rotate(-14deg) scale(.4) } to { opacity: 1; transform: translate(-50%, -50%) rotate(-2deg) scale(1) } }

@media (max-width: 860px) {
  .header-inner { width: calc(100% - 32px); min-height: 64px; gap: 16px }
  .wordmark { font-size: 20px }
  .wordmark img { width: 27px; height: 27px }
  .main-nav { gap: 13px; overflow: auto; scrollbar-width: none }
  .main-nav::-webkit-scrollbar { display: none }
  .main-nav a { padding: 22px 0 20px; font-size: 11px }
  .btn { min-height: 52px }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important } }
/* catch view: the message gets its own line above the buttons; text stays readable over a camera picture */
.hud.b { flex-wrap: wrap }
.hud.b .msg { flex: 1 1 100%; max-width: none; text-shadow: 0 1px 4px #000c }
.hud .title, .hud .sub, .hud .aboard { text-shadow: 0 1px 4px #000c }

/* catches worldwide */
.world-count { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap }
.world-count b { font-family: var(--f-pixel); font-size: clamp(40px, 11vw, 64px); line-height: 1; color: var(--straw); font-variant-numeric: tabular-nums }
.world-count span { color: var(--muted); font-size: 14px }
.world-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px }
.world-list li { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 6px }
.world-list li:first-child { border-top: 0 }
.world-list small { color: var(--muted); white-space: nowrap }

/* what to catch */
.targets-panel { display: flex; flex-direction: column; gap: 8px }
.targets-title { font-size: 15px }
.targets { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px }
.targets::-webkit-scrollbar { display: none }
.target { flex: none; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid #ffffff2a; background: var(--moss); color: var(--cream); font-weight: 700; font-size: 14px }
.target.got { border-color: #7fe0a866; color: #b9f0cf }
.target.on { background: var(--straw); border-color: var(--straw); color: #1d0d02 }

.crew-list .crew-group { grid-column: 1 / -1; background: none; border: 0; padding: 6px 2px 0; color: var(--straw); font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase }

/* Lights Out: the NOW button and its score */
.now-btn { position: absolute; right: 16px; bottom: calc(120px + env(safe-area-inset-bottom, 0px)); width: 104px; height: 104px; border-radius: 50%; border: 4px solid var(--cream); background: radial-gradient(circle, #ffb35c 0%, #e08a2c 70%); color: #1d0d02; font: italic 900 28px var(--f-display); box-shadow: 0 0 40px #ffb35c88; pointer-events: auto; animation: cardPop .4s cubic-bezier(.2, 1.4, .4, 1) both }
.now-btn:active { transform: scale(.94) }
.now-result { position: absolute; left: 50%; top: 32%; transform: translate(-50%, -50%); padding: 14px 22px; border-radius: 18px; background: #0d0812dd; border: 1px solid var(--straw); color: var(--cream); font: italic 900 28px var(--f-display); text-align: center; pointer-events: none; animation: cardPop .4s cubic-bezier(.2, 1.4, .4, 1) both }
.now-result small { display: block; font: 600 14px var(--f-body); color: var(--muted); font-style: normal }

.passes li.pickable { cursor: pointer; border-radius: 12px } .passes li.pickable:hover { background: #ffffff08 } .passes li.on { background: #ffb35c14 }

/* World events (Paste 3) */
.ev-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px }
.ev-card { background: var(--moss); border: 1px solid #ffffff12; border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0 }
.ev-card h3 { margin: 0; font-family: var(--f-display); font-weight: 900; font-style: italic; font-size: 19px }
.ev-card p { margin: 0; font-size: 14px; color: var(--muted) }
.ev-card .btn { align-self: flex-start }
.ev-card.live { border-color: var(--straw); box-shadow: 0 0 0 1px var(--straw) inset }
.ev-when { font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--straw) }
.ev-stat { color: var(--cream) !important; font-family: var(--f-pixel); font-size: 13px !important }
.ev-stat:empty { display: none }
.ev-probes { display: flex; flex-wrap: wrap; gap: 6px }
.board-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column }
.board-list li { display: grid; grid-template-columns: 2em minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums }
.board-list li:first-child { border-top: 0 }
.board-list .rk { font-family: var(--f-pixel); color: var(--straw) }
.board-list small { color: var(--muted) }
#ev { position: fixed; inset: 0; z-index: 2147483600; background: #06030a; touch-action: none; user-select: none; -webkit-user-select: none }
#ev canvas#evSky { position: absolute; inset: 0; width: 100%; height: 100% }
.ev-result { max-height: calc(100% - 32px); overflow: auto }
.ev-result .wave { margin: 0; font-size: 14px }
.ev-result canvas { width: 100%; border-radius: 12px; background: #120b1a }
.hud .btn.primary { background: var(--straw); color: #1d0d02; border-color: var(--straw) }