body { margin: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #000; }

#pora {
  position: relative;
  width: 640px;
  height: 480px;
  overflow: hidden;
  background: #000;
  font-family: "Comic Sans MS", cursive;
  cursor: url(assets/img/hand.png) 10 1, pointer;
}

/* @media (min-width: 1300px) { #pora { zoom: 2; } } */

#pora img, .spr { image-rendering: pixelated; }
#pora a, #pora summary, #pora label { cursor: inherit; }
#pora :focus:not(:focus-visible) { outline: none; }
#pora a { color: inherit; text-decoration: none; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
#pora > *, .scene > *, .chrome > *, details > summary { position: absolute; }
#pora details { position: static; }
.dome { pointer-events: none; }
.dome > * { pointer-events: auto; }
.spr { display: block; background-repeat: no-repeat; }
.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { visibility: hidden; } }

.scene, .chrome, .report { display: none; left: 0; top: 0; width: 640px; height: 480px; }
.scene:target, .scene:has(:target), .report:target { display: block; }
#pora:not(:has(:target)) #lobby { display: block; }
#pora:has(.dome:target, .dome :target) .chrome { display: block; }

.loading { inset: 0; z-index: 99; background: silver; color: #000; font: 12px Arial, sans-serif; text-align: center; animation: gone 0s 2s forwards; }
.loading > div { position: absolute; left: 170px; top: 180px; width: 300px; }
.loading .progress-indicator-bar, .warp .progress-indicator-bar { animation: fill 1.8s linear forwards; }
@keyframes fill { from { width: 0; } to { width: 100%; } }
@keyframes gone { to { visibility: hidden; } }

.btn {
  display: inline-block;
  padding: 4px 10px;
  background: silver;
  color: #000 !important;
  font: bold 11px Arial, sans-serif;
  text-align: center;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
}
.btn:active { box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px #fff; }

.bubble {
  position: absolute;
  z-index: 11;
  box-sizing: border-box;
  border: 8px solid transparent;
  border-image: url(assets/img/bubble9.gif) 8 fill / 8px stretch;
  padding: 2px 4px;
  color: #000;
  font: bold 13px/1.25 "Comic Sans MS", cursive;
}
.bubble.left::before, .bubble.down::after { content: ""; position: absolute; }
.bubble.left::before { left: -24px; top: 6px; width: 18px; height: 24px; background: url(assets/img/bubble_tail_l.gif); }
.bubble.down::after { right: 36px; bottom: -24px; width: 24px; height: 18px; background: url(assets/img/bubble_tail.gif); }

.robot { width: 100px; height: 150px; background-image: url(assets/img/moby.gif); }
/* .robot { background-image: url(assets/img/robot.gif); } */
#bye { background: url(assets/img/stars.gif); }
#bye .logo { left: 60px; top: 60px; }
#bye p { left: 60px; top: 200px; color: #fff; font-size: 20px; font-weight: bold; }
#bye big { font-size: 30px; color: #ff0; }
#quit { background: url(assets/img/stars.gif); }
#quit .window { left: 170px; top: 170px; width: 300px; color: #000; text-align: center; }

.poster { top: 16px; }
.door-enter { left: 26px; top: 94px; width: 140px; height: 228px; }
.door-quit { left: 530px; top: 92px; width: 96px; height: 230px; }
.telescope { left: 404px; top: 232px; }
#lobby > .robot { left: 284px; top: 298px; }
#lobby .bubble { left: 392px; top: 368px; width: 236px; }
#lobby .hello { top: 300px; }
#lobby:has(details[open], #peek:target) .hello { display: none; }
.rocket summary { left: 236px; top: 116px; }
.rocket .spr { width: 30px; height: 84px; background-image: url(assets/img/rocket.gif); }
.rocket[open] summary { animation: launch 2.2s steps(22) forwards; }
.rocket[open] .spr { background-position: -30px 0; }
@keyframes launch { 60% { transform: translateY(-260px); } 100% { transform: none; } }
.fish summary { left: 284px; top: 246px; }
.redbutton summary { left: 150px; top: 350px; }
.redbutton .spr { width: 76px; height: 96px; background-image: url(assets/img/bigbutton.gif); }
.redbutton[open] .spr { background-position: -76px 0; }
.alarm { position: absolute; inset: 0; background: red; pointer-events: none; opacity: 0; animation: alarm 0.3s steps(1) 6; }
@keyframes alarm { 0% { opacity: 0.45; } 50% { opacity: 0; } }
#peek { display: none; inset: 0; z-index: 30; background: rgba(0, 0, 0, 0.85); text-align: center; font-size: 15px; }
#peek b { color: #ff0; }
#peek:target { display: block; }
#peek span { display: block; width: 240px; height: 240px; margin: 90px auto 16px; border: 8px solid #333; border-radius: 50%; overflow: hidden; }
#peek span img { width: 280px; margin: -20px; }

.console { left: 0; top: 316px; }
.lobby-btn { left: 10px; top: 282px; z-index: 4; }
@keyframes hide { 0% { visibility: hidden; } }

.comet summary { top: 40px; left: 640px; z-index: 5; animation: comet 30s linear infinite; }
@keyframes comet { 0%, 85% { transform: none; } 100% { transform: translate(-720px, 60px); } }
.ufo summary { left: -56px; top: 96px; z-index: 5; animation: ufo 70s steps(25) infinite; }
.ufo[open] summary { animation: zap 0.8s steps(8) forwards; }
@keyframes zap { from { transform: translateX(70px); } to { transform: translate(300px, -160px); } }
@keyframes ufo { 0%, 90%, 100% { transform: none; } 93%, 97% { transform: translateX(70px); } }

.picker { left: 12px; top: 338px; display: flex; gap: 1px; z-index: 3; }
#pora .picker label { display: block; margin: 0; position: relative; line-height: 9px; width: 46px; height: 54px; padding-top: 2px; border: 2px outset #ccc; background: #999; color: #000; font: bold 8px/9px Arial, sans-serif; text-align: center; }
.picker label:active { border-style: inset; }
#pora .picker label::before, #pora .picker label::after { content: none; }
.picker img { display: block; margin: 0 auto 1px; }
.gauge { left: 16px; top: 432px; }
.projector { left: 280px; top: 250px; width: 80px; height: 60px; display: none; }
.lights { left: 90px; top: 440px; width: 48px; height: 12px; background: url(assets/img/lights.gif); animation: lights 0.9s steps(1) infinite; }
@keyframes lights { 50% { background-position: -48px 0; } }
.sources summary, .quit-btn { top: 424px; width: 116px; height: 30px; padding: 0; font-size: 12px; line-height: 30px; z-index: 3; }
.sources summary { left: 236px; }
.sources .window { position: absolute; left: 110px; top: 30px; width: 420px; z-index: 40; color: #000; }
.sources ul { margin: 4px 0; padding-left: 18px; background: #fff; }
.sources li { padding: 3px 0; font: 12px Arial, sans-serif; }
#pora .sources a { color: blue; text-decoration: underline; }
.quit-btn { left: 360px; background: #f33; color: #fff !important; }

.dome h2 { left: 12px; top: 4px; margin: 0; z-index: 3; font: 34px Impact, sans-serif; color: #ff0; text-shadow: 2px 2px 0 #f00, 4px 4px 0 #000; }
.dome .sub { left: 14px; top: 46px; z-index: 3; color: #9cf; font-size: 12px; font-weight: bold; }
.planet { left: 90px; top: 30px; width: 320px; height: 200px; display: flex; align-items: center; justify-content: center; mix-blend-mode: screen; }
.planet img { height: 190px; }
.dome .bubble, .chrome .bubble { left: 352px; top: 8px; width: 280px; }
#pora:has(.moby[open], .sources[open]) .dome .hello { display: none; }
#pora:has(.comet[open], .ufo[open], .lever-empty[open]) .dome .hello { animation: hide 4s steps(1); }
.comet .bubble, .ufo .bubble, .lever-empty .bubble { animation: gone 0s 4s forwards; }
.moby summary { left: 526px; top: 158px; z-index: 10; }
.moby .spr { width: 100px; height: 150px; background-image: url(assets/img/moby.gif); animation: talk 0.25s steps(1) 8; }
@keyframes talk { 50% { transform: translateY(-4px); } }
.odometer { left: 22px; top: 418px; background: #000; color: #fff; font: 13px/14px "Courier New", monospace; letter-spacing: 3px; padding: 0 2px; z-index: 3; }
.lever { left: 578px; top: 394px; width: 40px; height: 80px; background: url(assets/img/lever.gif); z-index: 3; }
.lever:active { background-position: -40px 0; }
.go { display: none; z-index: 4; }
.go::before { content: ""; position: absolute; left: 6px; top: -2px; width: 28px; height: 28px; border: 2px dashed #ff0; border-radius: 50%; animation: blink 0.5s steps(1) infinite; }

.warp { inset: 0 0 164px 0; z-index: 20; background: #000 url(assets/img/stars.gif) center; animation: warp 2.2s linear forwards; }
@keyframes warp { from { background-size: 128px; } 99% { background-size: 1400px; visibility: visible; } to { visibility: hidden; } }
.warp .window { position: absolute; left: 160px; top: 118px; width: 300px; color: #000; }
.warp p { margin: 0 0 6px; }

.orrery { left: 20px; width: 600px; display: flex; justify-content: space-between; align-items: center; }
#pora .orrery a { color: #ff9; font: bold 9px Arial, sans-serif; text-align: center; }
.orrery img { width: 48px; height: 48px; }
.planet.orrery { mix-blend-mode: normal; }
.stamp { left: 18px; top: 236px; padding: 2px 8px; border: 3px solid red; color: red; font: 20px Impact, sans-serif; transform: rotate(-10deg); z-index: 3; }

/* .report .panel { height: 340px; overflow: auto; } */
.report { z-index: 40; left: 140px; top: 40px; width: 360px; height: auto; color: #000; }
.report .panel { padding: 10px; background: #fff; text-align: center; }
.report img { height: 160px; border: 2px solid #000; }
.report p { margin: 10px 0 0; text-align: left; font: 14px/1.35 "Comic Sans MS", cursive; }
.close { display: block; width: 16px; height: 14px; background: silver; font: bold 11px/13px Arial, sans-serif; text-align: center; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff; }

#pora:has(#sun:target, #sun :target) .picker label[for="pick-sun"] { background: #ff6; }
#pora:has(#mercury:target, #mercury :target) .picker label[for="pick-mercury"] { background: #ff6; }
#pora:has(#venus:target, #venus :target) .picker label[for="pick-venus"] { background: #ff6; }
#pora:has(#earth:target, #earth :target) .picker label[for="pick-earth"] { background: #ff6; }
#pora:has(#moon:target, #moon :target) .picker label[for="pick-moon"] { background: #ff6; }
#pora:has(#mars:target, #mars :target) .picker label[for="pick-mars"] { background: #ff6; }
#pora:has(#jupiter:target, #jupiter :target) .picker label[for="pick-jupiter"] { background: #ff6; }
#pora:has(#saturn:target, #saturn :target) .picker label[for="pick-saturn"] { background: #ff6; }
#pora:has(#uranus:target, #uranus :target) .picker label[for="pick-uranus"] { background: #ff6; }
#pora:has(#neptune:target, #neptune :target) .picker label[for="pick-neptune"] { background: #ff6; }
#pora:has(#pluto:target, #pluto :target) .picker label[for="pick-pluto"] { background: #ff6; }
#pora:has(#solar:target, #solar :target) .picker label[for="pick-solar"] { background: #ff6; }
#pora:has(#pick-sun:checked):not(:has(#sun:target, #sun :target)) .go[href="#sun"] { display: block; }
#pora:has(#pick-sun:checked):not(:has(#sun:target, #sun :target)) .picker label[for="pick-sun"] { background: #ff6; animation: sel 0.6s steps(1) infinite; }
#pora:has(#pick-mercury:checked):not(:has(#mercury:target, #mercury :target)) .go[href="#mercury"] { display: block; }
#pora:has(#pick-mercury:checked):not(:has(#mercury:target, #mercury :target)) .picker label[for="pick-mercury"] { background: #ff6; animation: sel 0.6s steps(1) infinite; }
#pora:has(#pick-venus:checked):not(:has(#venus:target, #venus :target)) .go[href="#venus"] { display: block; }
#pora:has(#pick-venus:checked):not(:has(#venus:target, #venus :target)) .picker label[for="pick-venus"] { background: #ff6; animation: sel 0.6s steps(1) infinite; }
#pora:has(#pick-earth:checked):not(:has(#earth:target, #earth :target)) .go[href="#earth"] { display: block; }
#pora:has(#pick-earth:checked):not(:has(#earth:target, #earth :target)) .picker label[for="pick-earth"] { background: #ff6; animation: sel 0.6s steps(1) infinite; }
#pora:has(#pick-moon:checked):not(:has(#moon:target, #moon :target)) .go[href="#moon"] { display: block; }
#pora:has(#pick-moon:checked):not(:has(#moon:target, #moon :target)) .picker label[for="pick-moon"] { background: #ff6; animation: sel 0.6s steps(1) infinite; }
#pora:has(#pick-mars:checked):not(:has(#mars:target, #mars :target)) .go[href="#mars"] { display: block; }
#pora:has(#pick-mars:checked):not(:has(#mars:target, #mars :target)) .picker label[for="pick-mars"] { background: #ff6; animation: sel 0.6s steps(1) infinite; }
#pora:has(#pick-jupiter:checked):not(:has(#jupiter:target, #jupiter :target)) .go[href="#jupiter"] { display: block; }
#pora:has(#pick-jupiter:checked):not(:has(#jupiter:target, #jupiter :target)) .picker label[for="pick-jupiter"] { background: #ff6; animation: sel 0.6s steps(1) infinite; }
#pora:has(#pick-saturn:checked):not(:has(#saturn:target, #saturn :target)) .go[href="#saturn"] { display: block; }
#pora:has(#pick-saturn:checked):not(:has(#saturn:target, #saturn :target)) .picker label[for="pick-saturn"] { background: #ff6; animation: sel 0.6s steps(1) infinite; }
#pora:has(#pick-uranus:checked):not(:has(#uranus:target, #uranus :target)) .go[href="#uranus"] { display: block; }
#pora:has(#pick-uranus:checked):not(:has(#uranus:target, #uranus :target)) .picker label[for="pick-uranus"] { background: #ff6; animation: sel 0.6s steps(1) infinite; }
#pora:has(#pick-neptune:checked):not(:has(#neptune:target, #neptune :target)) .go[href="#neptune"] { display: block; }
#pora:has(#pick-neptune:checked):not(:has(#neptune:target, #neptune :target)) .picker label[for="pick-neptune"] { background: #ff6; animation: sel 0.6s steps(1) infinite; }
#pora:has(#pick-pluto:checked):not(:has(#pluto:target, #pluto :target)) .go[href="#pluto"] { display: block; }
#pora:has(#pick-pluto:checked):not(:has(#pluto:target, #pluto :target)) .picker label[for="pick-pluto"] { background: #ff6; animation: sel 0.6s steps(1) infinite; }
#pora:has(#pick-solar:checked):not(:has(#solar:target, #solar :target)) .go[href="#solar"] { display: block; }
#pora:has(#pick-solar:checked):not(:has(#solar:target, #solar :target)) .picker label[for="pick-solar"] { background: #ff6; animation: sel 0.6s steps(1) infinite; }
@keyframes sel { 50% { background: #fc0; } }