:root{
  --space:#03020b;
  --panel:#0a0a23;
  --panel2:#11113a;
  --ink:#f7f2ff;
  --muted:#b8b2d8;
  --cyan:#75f7ff;
  --pink:#ff6be7;
  --purple:#9d7bff;
  --yellow:#fff27a;
  --green:#85ffb3;
  --line:#6f68a9;
  --silver:#c8c8dc;
  --shadow:#000;
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  font-family:"Courier New", Courier, monospace;
  line-height:1.5;
  background:
    radial-gradient(circle at 13% 14%, rgba(255,255,255,.95) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 31%, rgba(117,247,255,.9) 0 1px, transparent 1.5px),
    radial-gradient(circle at 38% 78%, rgba(255,107,231,.8) 0 1px, transparent 1.7px),
    radial-gradient(circle at 90% 83%, rgba(255,255,255,.7) 0 1px, transparent 1.4px),
    radial-gradient(circle at 55% 55%, rgba(157,123,255,.55) 0 1px, transparent 1.6px),
    linear-gradient(#020109,#070414 60%,#020109);
  background-size:73px 73px,119px 119px,157px 157px,211px 211px,97px 97px,auto;
  min-height:100vh;
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.35;
  background:repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 3px,
    rgba(255,255,255,.025) 4px
  );
  z-index:999;
}

a{color:var(--cyan)}
a:visited{color:#d7a4ff}
a:hover{color:var(--yellow);text-shadow:0 0 8px currentColor}
img{max-width:100%}

.skip{
  position:absolute;left:-9999px;top:0;
}
.skip:focus{
  left:8px;top:8px;z-index:1000;background:#000;padding:8px;
}

.site-shell{
  width:min(var(--max), calc(100% - 24px));
  margin:18px auto 40px;
}

.top-strip{
  border:2px ridge var(--silver);
  background:#07071c;
  padding:5px 10px;
  font-size:12px;
  letter-spacing:.06em;
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.hero{
  position:relative;
  overflow:hidden;
  min-height:185px;
  margin-top:10px;
  border:4px ridge var(--silver);
  background:
    radial-gradient(circle at 80% 45%, rgba(255,107,231,.28), transparent 25%),
    radial-gradient(circle at 18% 38%, rgba(117,247,255,.22), transparent 30%),
    linear-gradient(135deg,#080724,#170e3c 48%,#080724);
  padding:26px 28px;
  box-shadow:0 0 26px rgba(117,247,255,.13);
}

.hero:after{
  content:"✦";
  position:absolute;
  right:8%;
  top:12%;
  font-size:96px;
  color:rgba(255,242,122,.75);
  filter:drop-shadow(0 0 10px rgba(255,242,122,.7));
  transform:rotate(12deg);
}

.hero h1{
  margin:0;
  font-family:Georgia, "Times New Roman", serif;
  font-style:italic;
  font-size:clamp(42px,8vw,82px);
  line-height:.9;
  letter-spacing:-.04em;
  color:#fff;
  text-shadow:
    3px 3px 0 #5d2fb5,
    -2px -2px 0 #0ff,
    0 0 18px #ff5ee4;
  max-width:820px;
}
.hero .tagline{
  margin:14px 0 0;
  color:var(--yellow);
  font-weight:bold;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.marquee{
  overflow:hidden;
  white-space:nowrap;
  border:2px ridge var(--silver);
  border-top:0;
  background:#000;
  color:var(--green);
  padding:5px 0;
}
.marquee span{
  display:inline-block;
  padding-left:100%;
  animation:scroll 22s linear infinite;
}
@keyframes scroll{
  to{transform:translateX(-100%)}
}

.layout{
  display:grid;
  grid-template-columns:210px minmax(0,1fr) 230px;
  gap:12px;
  margin-top:12px;
  align-items:start;
}

.panel{
  border:3px ridge var(--silver);
  background:rgba(8,8,31,.94);
  box-shadow:5px 5px 0 rgba(0,0,0,.55);
  margin-bottom:12px;
}
.panel-title{
  margin:0;
  padding:5px 8px;
  font-size:14px;
  color:#05050d;
  background:linear-gradient(90deg,var(--cyan),#d7d4ff,var(--pink));
  border-bottom:2px ridge var(--silver);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.panel-body{padding:11px 12px}
.panel-body > :first-child{margin-top:0}
.panel-body > :last-child{margin-bottom:0}

.nav-list{
  list-style:none;
  margin:0;
  padding:0;
}
.nav-list li+li{margin-top:7px}
.nav-list a,
.pixel-button{
  display:block;
  text-decoration:none;
  color:#fff;
  background:linear-gradient(#282853,#11112c);
  border:2px outset #8888bf;
  padding:6px 7px;
  font-weight:bold;
}
.nav-list a:hover,
.pixel-button:hover{
  color:#000;
  background:var(--yellow);
  text-shadow:none;
  border-style:inset;
}

.badge-row{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}
.badge{
  width:88px;
  height:31px;
  display:grid;
  place-items:center;
  text-align:center;
  border:1px solid #fff;
  background:#09091d;
  font:700 10px/1 Arial,sans-serif;
  color:#fff;
  box-shadow:inset 0 0 0 1px #000;
}
.badge.cyan{background:linear-gradient(135deg,#04232b,#008c9b);color:#dfffff}
.badge.pink{background:linear-gradient(135deg,#350728,#bb257f);color:#fff0fa}
.badge.yellow{background:linear-gradient(135deg,#3c3000,#c99400);color:#fff8c9}
.badge.green{background:linear-gradient(135deg,#052512,#198644);color:#ecfff2}

.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.box{
  border:1px dashed var(--line);
  background:rgba(20,18,56,.55);
  padding:10px;
}

h2,h3{
  color:var(--yellow);
  text-shadow:0 0 7px rgba(255,242,122,.25);
}
h2{
  margin:.2em 0 .55em;
  font-family:Georgia,serif;
}
h3{font-size:14px;text-transform:uppercase;letter-spacing:.08em}

.status{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:4px 8px;
  font-size:12px;
}
.status b{color:var(--pink)}

.tiny{font-size:11px;color:var(--muted)}
.center{text-align:center}
.hot{color:var(--pink);font-weight:bold}
.new{
  color:#000;
  background:var(--yellow);
  padding:1px 4px;
  font:700 10px Arial,sans-serif;
}
.blink{animation:blink 1.1s steps(1,end) infinite}
@keyframes blink{50%{opacity:.15}}

hr{
  border:0;
  border-top:1px dashed var(--line);
  margin:15px 0;
}

.post-list{list-style:"✦  ";padding-left:22px}
.post-list li{margin-bottom:9px}

.review-card{
  border:2px ridge #8888bf;
  background:#0d0d2b;
  padding:12px;
  margin-bottom:12px;
}
.rating{color:var(--yellow);letter-spacing:.1em}

.dog-card{
  display:grid;
  grid-template-columns:minmax(180px,280px) 1fr;
  gap:15px;
}
.photo-placeholder{
  aspect-ratio:4/3;
  display:grid;
  place-items:center;
  text-align:center;
  padding:15px;
  border:3px double var(--cyan);
  background:
    linear-gradient(45deg,rgba(117,247,255,.08) 25%,transparent 25% 75%,rgba(117,247,255,.08) 75%),
    #080822;
  background-size:18px 18px;
  color:var(--muted);
}

.footer{
  text-align:center;
  margin-top:16px;
  color:var(--muted);
  font-size:12px;
}
.footer .planet{font-size:28px}

.sparkle{
  color:var(--yellow);
  filter:drop-shadow(0 0 4px currentColor);
}

#rocket-message{
  min-height:1.4em;
  color:var(--green);
  font-weight:bold;
}

button{
  font:inherit;
  cursor:pointer;
}

@media (max-width:900px){
  .layout{grid-template-columns:180px 1fr}
  .rightbar{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .rightbar .panel{margin:0}
}
@media (max-width:650px){
  .site-shell{width:min(100% - 12px,var(--max));margin-top:6px}
  .layout{display:block}
  .leftbar,.rightbar{display:block}
  .hero{padding:22px 16px;min-height:160px}
  .hero:after{font-size:58px;opacity:.7}
  .grid-2,.dog-card{grid-template-columns:1fr}
  .panel{box-shadow:3px 3px 0 rgba(0,0,0,.55)}
}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;scroll-behavior:auto!important}
  .marquee{white-space:normal;padding:5px 8px}
  .marquee span{padding-left:0}
}

/* Shared-layout additions */
.button-88x31 {
  width: 88px;
  height: 31px;
  display: block;
  object-fit: fill;
  image-rendering: pixelated;
}

.nav-list a.active {
  color: #000;
  background: var(--yellow);
  text-shadow: none;
  border-style: inset;
}

/*
  The leftbar/rightbar classes now live on the placeholder <aside> elements
  in each page. Their actual panel contents are loaded from shared files.
*/