/* The Observatory — original art, warm metal, and luminous glass. */
.observatory {
  --text: #eff4ed;
  --muted: #a5b7bd;
  --cyan: #b1ebdf;
  --yellow: #e8c798;
  --line: #b5d9d021;
  background: #050b12;
}
body.observatory::before {
  z-index: -2;
  background: linear-gradient(180deg, #03091218, #03091250),
    url("/tetris/observatory-space-v2.jpg") center center / cover no-repeat;
}
.observatory-sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
/* Match the artwork's 3:2 cover crop so lights stay on stars, not the planet. */
.observatory-stars {
  position: absolute;
  width: max(100vw, 150vh);
  height: max(100vh, 66.666667vw);
  left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.observatory-stars i {
  position: absolute; left: var(--x); top: var(--y);
  width: 2px; height: 2px; border-radius: 50%;
  background: #e1efff; box-shadow: 0 0 5px 1px #c7e8ff60;
  opacity: .16; animation: observatory-twinkle 9s ease-in-out var(--phase) infinite;
}
.observatory-stars i:nth-child(3n) { animation-duration: 12s; }
.observatory-stars i:nth-child(3n + 1) { animation-duration: 7s; }
.observatory-stars i:nth-child(n + 8) { background: #ffe6bd; box-shadow: 0 0 7px 1px #ffe0b54d; }
@keyframes observatory-twinkle {
  0%, 100% { opacity: .12; }
  50% { opacity: .6; }
}
@media (max-width: 680px) {
  .observatory-stars { left: 82%; transform: translate(-82%, -50%); }
}
.observatory .aurora { opacity: .07; }
.observatory .game-shell { position: relative; }
body.observatory .game-shell { width: min(1160px, calc(100vw - 48px)); grid-template-rows: 64px minmax(0, 1fr) 74px; gap: 12px; padding: 12px 0; }
body.observatory .game-intro { border-bottom: 1px solid #b5d9d023; padding: 0 0 12px; }
body.observatory .game-intro > div:first-child { display: block; }
body.observatory .game-intro .eyebrow { display: block; margin: 0 0 8px; color: #c5c6b4; font-size: 8px; letter-spacing: .22em; }
.observatory .eyebrow span { padding: 0 9px; color: #768582; }
body.observatory .game-intro h1 { font-size: 30px; line-height: 1; letter-spacing: -.035em; color: #eef4e9; background: none; filter: none; font-weight: 600; }
.observatory .game-intro h1 span { color: #d2bc93; margin-left: 7px; font-size: .5em; }
body.observatory .game-status { color: #b6c8c7; font-size: 10px; letter-spacing: .025em; background: #0a182280; border: 1px solid #b1d6cc24; padding: 11px 14px; box-shadow: none; }
.observatory .status-dot { background: #b1ebdf; box-shadow: 0 0 9px #b1ebdf55; }
body.observatory .arcade {
  --cockpit-board-height: clamp(180px, min(calc(100dvh - 260px), calc((100vw - 530px) * 2)), 760px);
  grid-template-columns: 210px calc(var(--cockpit-board-width) + 40px) 210px;
  gap: clamp(20px, 3.3vw, 48px);
  align-items: center;
  align-content: center;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  overflow: visible;
}
.observatory .arcade::before, .observatory .arcade::after { display: none; }
body.observatory .side-panel { gap: 12px; }
body.observatory .stat-card, body.observatory .mini-card {
  position: relative;
  padding: 16px;
  border: 1px solid #b4d3cd28;
  border-radius: 16px;
  background: linear-gradient(140deg, #172731ce, #07121cdb);
  box-shadow: inset 0 1px #edf4dc10, 0 14px 35px #0004;
  backdrop-filter: blur(16px);
}
.observatory .stat-card::before, .observatory .mini-card::before { background: linear-gradient(90deg, transparent, #d7c5a14d, transparent); box-shadow: none; height: 1px; }
.observatory .panel-label { font-size: 9px; letter-spacing: .16em; text-shadow: none; color: #b8c9c5; }
body.observatory .score-card strong {
  margin: 10px 0 12px;
  color: #f2eddb;
  background: none;
  filter: none;
  font: 500 58px/.95 var(--font);
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.observatory .level-row { font-size: 10px; }
.observatory .level-row span { background: none; border: 0; padding: 0; }
.observatory .streak-row { font-size: 10px; margin-top: 12px; }
.observatory .level-progress { height: 3px; background: #d2e1d511; }
.observatory .level-progress span { background: linear-gradient(90deg, #78b7ac, #deceaa); box-shadow: none; }
.observatory .level-progress-copy { color: #8ca5aa; font-size: 8px; }
.personal-best { display: flex; justify-content: space-between; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid #cbd8c915; color: #8ca5aa; font: 8px/1.3 var(--mono); letter-spacing: .06em; }
.personal-best b { color: #e7d9bb; font-size: 11px; font-weight: 500; }
body.observatory .next-card { padding: 14px 16px; }
body.observatory .next-card .next-stack-single { border: 0; min-height: 76px; background: radial-gradient(ellipse, #a0d8c713, transparent 68%); box-shadow: none; margin-top: 8px; }
body.observatory .next-card .next-stack-single canvas { width: 100px; height: 76px; }
body.observatory .chance-card { min-height: 0; }
.observatory .chance-heading strong { color: #e3cba0; font-size: 9px; }
body.observatory .chance-meter { background: #01080f80; border: 1px solid #e6d0a71a; gap: 7px; padding: 7px; border-radius: 8px; margin: 12px 0; box-shadow: inset 0 2px 6px #0006; }
body.observatory .chance-meter i { height: 7px; border-radius: 3px; background: linear-gradient(180deg, #f4dfb8, #b69665); box-shadow: 0 0 9px #edd4a538; border: none; }
body.observatory .chance-button { min-height: 34px; font-size: 9px; border: 1px solid #d2bf9845; background: #cab28212; color: #ead6ad; box-shadow: none; text-shadow: none; }
body.observatory .chance-card .chance-button:not(:disabled) { color: #f3deb6; background: #d2b48220; border-color: #d2bf9870; }
.observatory button { transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.observatory button:focus-visible, .observatory select:focus-visible { outline: 2px solid #b1ebdf; outline-offset: 3px; }
body.observatory .board-column {
  width: calc(var(--cockpit-board-width) + 40px);
  padding: 12px 19px 16px;
  border-radius: 22px;
  border: 1px solid #cfbea764;
  background: linear-gradient(120deg, #d8c6a833, transparent 12% 87%, #b9d5d422), linear-gradient(180deg, #23313a, #0b141d 40%, #182731);
  box-shadow: inset 1px 0 #f5e8c83d, inset -1px 0 #c3e2e524, 0 26px 55px #000a, 0 0 45px #94c7b713;
}
.observatory .board-column::before { border: 1px solid #d8d4ba22; background: none; box-shadow: none; inset: 5px; }
.observatory .board-column::after { width: 3px; height: 3px; top: 17px; right: 13px; background: #dcca9e; box-shadow: 0 0 6px #ead49d66; }
body.observatory .board-topline { font: 7px/1 var(--mono); letter-spacing: .14em; margin: 0 0 9px; padding: 0; }
.observatory .board-topline span { color: #dbd2ba; text-shadow: none; }
.observatory .board-topline span::before { background: #b1ebdf; width: 4px; height: 4px; box-shadow: none; }
.observatory .board-topline b { margin-left: auto; font-weight: 400; color: #83999c; }
.observatory .board-topline::after { display: none; }
body.observatory .reactor-console { padding: 6px 8px; margin-bottom: 10px; border-radius: 5px; background: #060e1680; border: 1px solid #bacbb11c; box-shadow: none; }
.observatory .reactor-console::after { display: none; }
.observatory .reactor-heading .panel-label { font-size: 7px; color: #8eb4b1; }
.observatory .reactor-heading strong { font-size: 7px; color: #b4cdc3; }
.observatory .reactor-meter { height: 3px; border: 0; }
.observatory .reactor-meter span { background: linear-gradient(90deg, #78b7ac, #efdbab); box-shadow: 0 0 8px #c6e8b233; }
body.observatory .reactor-meta { font-size: 6px; color: #8ea3a6; }
body.observatory .board-wrap {
  z-index: 2;
  border-radius: 10px;
  border: 1px solid #adc6bd65;
  box-shadow: 0 0 0 5px #01050b, 0 0 0 6px #c9daca22, 0 0 35px rgba(var(--piece-rgb), .12);
}
.observatory .board-wrap::before { border-radius: 9px; background: linear-gradient(90deg, #bad4d519, transparent 3% 97%, #bad4d519); box-shadow: inset 0 1px #f0e3c928; }
.observatory .reactor-console { z-index: 1; }
.observatory .board-wrap::after { opacity: .09; }
.observatory .board-glow { opacity: .25; }
body.observatory #board { border-radius: 9px; filter: none; }
body.observatory .board-overlay { border-radius: 9px; background: radial-gradient(ellipse at 50% 38%, #467c7633, transparent 60%), linear-gradient(180deg, #08141bdc, #050c15f5); border: 0; box-shadow: none; padding: 20px; }
.observatory .overlay-kicker { color: #bfccbd; text-shadow: none; font: 7px/1.5 var(--mono); letter-spacing: .18em; margin: 0 0 22px; }
.orbit-emblem { position: relative; width: 100px; height: 100px; margin: 0 auto 24px; border: 1px solid #b7d6c329; border-radius: 50%; transform: rotate(-20deg); }
.orbit-emblem::before { content: ""; position: absolute; inset: 12px -13px; border: 1px solid #ddc8a74d; border-radius: 50%; transform: rotate(-28deg); }
.orbit-emblem::after { content: ""; position: absolute; left: 0; top: 12px; width: 5px; height: 5px; border-radius: 50%; background: #f0ddb7; box-shadow: 0 0 12px #ead6a9; }
.orbit-emblem i { position: absolute; width: 22px; height: 22px; background: linear-gradient(135deg, #e6fff0, #75baa9 46%, #264f57); border: 1px solid #cee9d9; border-radius: 5px; box-shadow: inset 0 2px #efffe85c, 0 0 18px #aee9cf33; }
.orbit-emblem i:nth-child(1) { top: 27px; left: 27px; }
.orbit-emblem i:nth-child(2) { top: 27px; left: 52px; }
.orbit-emblem i:nth-child(3) { top: 52px; left: 27px; }
.orbit-emblem i:nth-child(4) { top: 52px; left: 52px; }
body.observatory .board-overlay h2 { color: #f2ead7; font-size: clamp(25px, 3vw, 38px); font-weight: 500; letter-spacing: -.045em; line-height: 1.03; max-width: 210px; margin: 0 0 15px; }
body.observatory .board-overlay > p:not(.overlay-kicker) { font-size: 12px; line-height: 1.65; color: #9eb6bb; max-width: 185px; }
.observatory .primary-button { min-height: 44px; padding: 0 24px; border: 1px solid #f3e6c388; border-radius: 8px; color: #122325; background: linear-gradient(120deg, #f4e4be, #b5dacc); box-shadow: inset 0 1px #fff8, 0 8px 28px #8ed6bf1f; font-size: 12px; }
.observatory .board-overlay[data-state="over"] .orbit-emblem { display: none; }
.orbital-record { display: flex; align-items: center; gap: 12px; margin: 15px 0 12px; }
.orbital-record > span { font: 7px/1.8 var(--mono); letter-spacing: .16em; color: #98b0b3; max-width: 65px; }
.record-disc { position: relative; width: 58px; height: 58px; flex: 0 0 58px; border: 1px solid #cabd974d; border-radius: 50%; background: repeating-radial-gradient(circle, #92a6a11c 0 1px, #07121d 2px 4px); box-shadow: 0 4px 12px #0007; }
.record-disc::before { content: ""; position: absolute; inset: 17px; border-radius: 50%; background: #b9cfc0; box-shadow: inset 0 0 0 7px #c4ae7f; }
.record-disc::after { content: ""; position: absolute; inset: 4px; border: 1px solid transparent; border-top-color: #d4d2b866; border-radius: 50%; transform: rotate(35deg); }
.record-disc i { position: absolute; top: 6px; left: 26px; width: 3px; height: 3px; background: #eddaaf; border-radius: 50%; }
.music-card:has(.music-button[data-playing="true"]) .record-disc { animation: record-orbit 14s linear infinite; }
@keyframes record-orbit { to { transform: rotate(360deg); } }
body.observatory .soundtrack-select { min-height: 34px; font-size: 11px; border-color: #b6cec730; background-color: #07111c; box-shadow: none; }
body.observatory .music-button { min-height: 30px; font-size: 10px; color: #bdd8ce; border: 1px solid #b6cec725; background: #b6cec708; }
.observatory .music-button[data-playing="true"] { color: #f1ddb3; }
.observatory .equalizer i { background: #c8b68d; }
body.observatory .controls-card { gap: 8px; padding: 14px 16px; }
body.observatory .control-row { font-size: 10px; color: #b6c5c9; grid-template-columns: 24px 24px 1fr; }
body.observatory .control-row kbd { min-height: 20px; font-size: 9px; background: #bacfc910; border-color: #bacfc925; border-radius: 4px; }
body.observatory .secondary-button { min-height: 32px; font-size: 11px; border: 1px solid #b6cec730; background: #07111ca0; color: #c5d3ce; box-shadow: none; margin: 0; }
body.observatory .speed-card { padding: 12px 16px; }
body.observatory .speed-controls { gap: 5px; margin-top: 10px; }
body.observatory .speed-controls button { font-size: 10px; min-height: 30px; background: #111e26; color: #a5babf; border: 1px solid #b0ccc225; box-shadow: none; border-radius: 5px; }
body.observatory .speed-controls button[aria-pressed="true"] { background: #d9ddc5; color: #142b2c; border-color: #ece4c7; box-shadow: none; }
body.observatory .speed-controls button[data-speed="really-fast"][aria-pressed="true"] { background: #e1bcd9; border-color: #ead0e3; color: #322233; }
body.observatory .speed-caption { font-size: 8px; color: #93a8b0; margin-top: 8px; }
body.observatory .touch-controls { height: 74px; background: #0b1822c9; border: 1px solid #bcc9b830; box-shadow: inset 0 1px #f5efd20d, 0 12px 24px #0004; border-radius: 14px; }
.observatory .touch-controls::before { background: linear-gradient(90deg, transparent, #d6c6a945, transparent); box-shadow: none; }
body.observatory .d-pad button, body.observatory .drop-control { background: linear-gradient(145deg, #33454e, #101c27) !important; border-color: #bacfc938 !important; box-shadow: inset 0 1px #e2ecdc25, inset 0 -3px #0005, 0 3px 7px #0004 !important; color: #dfebdf !important; }
body.observatory .action-pad button[data-action="rotate"] { background: linear-gradient(145deg, #e4e4cb, #83b8ab); border-color: #dce5cd; color: #142e32; box-shadow: inset 0 2px #f7ffe477, 0 4px 15px #0005; }
body.observatory .action-pad button[data-action="second-chance"] { background: linear-gradient(145deg, #f1dab0, #b49b74); border-color: #e4cda4; color: #312b20; box-shadow: inset 0 1px #fff5, 0 4px 15px #0005; }
body.observatory button:disabled { filter: saturate(.3); opacity: .48; }
.observatory .line-clear-badge { color: #142c32; background: linear-gradient(120deg, #f2dfb5, #b8efd9); border-color: #f6edcc; }
.observatory .line-clear-badge[data-tier="4"] { color: #fff; background: linear-gradient(120deg, #a25091, #426f94, #4e978c); }

@media (min-width: 681px) and (max-height: 760px) {
  body.observatory .side-panel { gap: 8px; }
  body.observatory .stat-card, body.observatory .mini-card { padding: 12px 14px; }
  body.observatory .score-card strong { font-size: 46px; margin: 8px 0; }
  .observatory .personal-best { margin-top: 10px; padding-top: 8px; }
  body.observatory .next-card .next-stack-single { min-height: 60px; }
  body.observatory .next-card .next-stack-single canvas { width: 85px; height: 60px; }
  .observatory .orbital-record { margin: 10px 0; }
  .observatory .record-disc { width: 44px; height: 44px; flex-basis: 44px; }
  .observatory .record-disc::before { inset: 12px; box-shadow: inset 0 0 0 6px #c4ae7f; }
  .observatory .record-disc i { left: 19px; }
  body.observatory .controls-card { gap: 5px; }
  .observatory .orbit-emblem { width: 84px; height: 84px; margin-bottom: 16px; }
  .observatory .orbit-emblem i { transform: translate(-8px,-8px); }
}
@media (min-width: 681px) and (max-width: 1000px) {
  body.observatory .game-shell { width: calc(100vw - 24px); }
  body.observatory .arcade { grid-template-columns: 160px calc(var(--cockpit-board-width) + 40px) 160px; --cockpit-board-height: clamp(180px, min(calc(100dvh - 260px), calc((100vw - 420px) * 2)), 660px); gap: 18px; }
  body.observatory .stat-card, body.observatory .mini-card { padding: 10px; }
}
@media (max-width: 680px) {
  body.observatory::before { background-position: 82% center; }
  body.observatory .game-shell { width: 100%; grid-template-rows: 56px minmax(0,1fr) 82px; padding: max(6px, env(safe-area-inset-top)) 5px max(6px, env(safe-area-inset-bottom)); gap: 6px; }
  body.observatory .game-intro { padding: 2px 5px 6px; align-items: start; border: 0; }
  body.observatory .game-intro .eyebrow { font-size: 6px; letter-spacing: .1em; margin-bottom: 5px; }
  body.observatory .game-intro h1 { font-size: 22px; }
  body.observatory .game-intro h1 span { display: none; }
  body.observatory .arcade { --cockpit-board-height: clamp(180px, min(calc((100vw - 52px) * 2), calc(100dvh - 294px)), 620px); grid-template-columns: 1fr; grid-template-rows: 64px minmax(0,1fr); gap: 7px; align-content: start; }
  body.observatory .left-panel { height: 64px; grid-template-columns: 1fr .8fr 1.1fr; gap: 5px; }
  body.observatory .left-panel .stat-card, body.observatory .left-panel .mini-card { height: 64px; min-height: 0; padding: 7px; border-radius: 9px; }
  body.observatory .score-card strong { display: inline; font-size: 25px; margin: 0 5px 0 0; }
  body.observatory .score-card .panel-label { display: block; font-size: 6px; margin-bottom: 4px; }
  body.observatory .score-card .level-row { font-size: 7px; }
  .observatory .personal-best { display: none; }
  body.observatory .next-card .next-stack-single { min-height: 40px; height: 40px; margin: 0; }
  body.observatory .next-card .next-stack-single canvas { width: 54px; height: 40px; }
  .observatory .next-card .panel-label, .observatory .chance-card .panel-label { font-size: 6px; }
  body.observatory .chance-heading strong { font-size: 7px; margin-top: 4px; }
  body.observatory .chance-meter { margin: 3px 0 0; gap: 4px; padding: 4px; }
  body.observatory .chance-meter i { height: 5px; }
  body.observatory .board-column { width: calc(var(--cockpit-board-width) + 30px); padding: 8px 14px 10px; border-radius: 17px; }
  body.observatory .board-topline { margin-bottom: 6px; font-size: 6px; }
  body.observatory .reactor-console { margin-bottom: 7px; padding: 4px 6px; }
  body.observatory .reactor-meta { font-size: 5px; }
  body.observatory .right-panel { top: -62px; right: 1px; gap: 4px; }
  body.observatory .right-panel > .secondary-button { width: 30px; min-height: 28px; }
  body.observatory .mobile-speed-control, body.observatory .mobile-soundtrack-control { background: #0a1721e8; border-color: #b0c5bb35; box-shadow: none; }
  body.observatory .mobile-speed-control select, body.observatory .mobile-soundtrack-control select { width: 68px; background-color: #101f28; border-color: #b0c5bb35; font-size: 8px; }
  body.observatory .game-intro > div:first-child { max-width: 100%; }
  body.observatory .right-panel { top: -32px; }
  body.observatory .game-intro h1 { font-size: 19px; }
  body.observatory .game-intro .eyebrow { margin-bottom: 19px; }
  body.observatory .touch-controls { height: 82px; width: calc(100vw - 10px); padding: 7px; border-radius: 12px; }
  body.observatory .board-overlay { padding: 12px; }
  body.observatory .board-overlay h2 { font-size: 29px; }
  .observatory .overlay-kicker { font-size: 6px; margin-bottom: 18px; }
  .observatory .orbit-emblem { margin-bottom: 22px; }
}
@media (max-height: 580px) {
  body.observatory { overflow-y: auto; touch-action: pan-y; }
  body.observatory .game-shell { min-height: 630px; }
  body.observatory .arcade { --cockpit-board-height: 350px; }
}
@media (prefers-reduced-motion: reduce) {
  .observatory-stars i { animation: none; opacity: .22; }
  .observatory .record-disc { animation: none !important; }
  .observatory button { transition: none; }
}