/* Jumping Planets — JP Skin (one-ink LCD, Y2K pixel) */
:root{
  --ink:#7DF4FF;--hot:#FF5FC8;--scr:#03080C;--edge:#10141C;
  --lab:#141A26;--stripe:rgba(20,26,38,.6);
  --dither:conic-gradient(rgba(0,0,0,.07) 0 25%,transparent 0 50%,rgba(0,0,0,.07) 0 75%,transparent 0) 0 0/2px 2px;
  --house:var(--dither),linear-gradient(180deg,#F6F8FB 0 6%,#E0E5EC 6% 38%,#C9D0DA 38% 68%,#B2BBC7 68%);
  --key:linear-gradient(180deg,#FFFFFF 0 12%,#E1E6ED 12% 50%,#C6CDD7 50% 86%,#A7B0BC 86%);
  --key-on:linear-gradient(180deg,#E6FDFF 0 14%,#9FF7FF 14% 48%,#4FDDEE 48% 82%,#1A9FB2 82%);
  --glow:color-mix(in srgb,var(--ink) 60%,transparent);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:#05040C}
body{font-family:'Silkscreen',ui-monospace,monospace;color:var(--ink);-webkit-font-smoothing:none;-webkit-tap-highlight-color:transparent}
button,input,textarea{font:inherit}
a{color:var(--ink)}
:focus-visible{outline:2px dashed var(--hot);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.px{clip-path:polygon(0 4px,2px 4px,2px 2px,4px 2px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,calc(100% - 2px) 2px,calc(100% - 2px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 2px) calc(100% - 4px),calc(100% - 2px) calc(100% - 2px),calc(100% - 4px) calc(100% - 2px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 2px),2px calc(100% - 2px),2px calc(100% - 4px),0 calc(100% - 4px))}
svg[shape-rendering]{display:block}

/* ---------- keyframes ---------- */
@keyframes scroll{0%,15%{transform:translateX(0)}85%,100%{transform:translateX(var(--d,0px))}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.15}}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-4px)}}
@keyframes beam{0%{opacity:.3}100%{opacity:1}}
@keyframes gel{0%,100%{filter:drop-shadow(3px 3px 0 rgba(0,0,0,.55)) drop-shadow(0 0 6px rgba(255,95,200,.35))}50%{filter:drop-shadow(3px 3px 0 rgba(0,0,0,.55)) drop-shadow(0 0 16px rgba(255,95,200,.8))}}
@keyframes noise{0%{background-position:0 0,0 0}25%{background-position:3px 1px,-2px 3px}50%{background-position:-1px 4px,4px -1px}75%{background-position:2px -3px,-3px 2px}100%{background-position:0 0,0 0}}
.blink{animation:blink 1s steps(2) infinite}

/* ---------- page ---------- */
.page{min-height:100vh;min-height:100svh;padding:28px 16px calc(56px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:18px;
  background-color:#05040C;
  background-image:radial-gradient(circle at 41px 61px,#FFFFFF 1.2px,transparent 1.5px),radial-gradient(circle at 211px 191px,#BFE9FF 1.2px,transparent 1.5px),radial-gradient(circle at 331px 41px,#FFFFFF 1.6px,transparent 2px),radial-gradient(circle at 121px 301px,#FFC4EE 1.2px,transparent 1.5px),linear-gradient(180deg,#160E33 0 12%,#0E0A24 12% 26%,#08071A 26% 44%,#05040C 44%);
  background-size:380px 340px,380px 340px,380px 340px,380px 340px,100% 100%}
.col{width:100%;max-width:480px;display:flex;flex-direction:column;gap:12px}
.pg{display:flex;flex-direction:column;gap:12px}
.pg[hidden]{display:none}
.tagline{margin:6px 0 0;text-align:center;font-size:10px;letter-spacing:2px;color:#C9D2DE}
.crt{position:fixed;inset:0;z-index:40;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px)}

/* ---------- windows ---------- */
.win{filter:drop-shadow(4px 4px 0 rgba(0,0,0,.6))}
.frame{padding:2px;background:var(--edge)}
.body{background:var(--house);-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);box-shadow:inset 2px 2px 0 rgba(255,255,255,.9),inset -2px -2px 0 rgba(0,0,0,.28);padding:0 10px 10px;color:var(--lab);display:flex;flex-direction:column;gap:8px}
.tb{height:26px;display:flex;align-items:center;gap:8px;color:var(--lab)}
.tb h2{margin:0;font-weight:700;font-size:11px;letter-spacing:2px;white-space:nowrap}
.pin{flex:1;height:10px;background:repeating-linear-gradient(180deg,var(--stripe) 0 2px,transparent 2px 4px)}
.winbtns{display:flex;gap:4px}
.winbtns i{width:10px;height:10px;background:#E1E6ED;box-shadow:0 0 0 2px var(--edge),inset 2px 2px 0 #FFFFFF}
.winbtns i.x{background:#FF5FC8;box-shadow:0 0 0 2px var(--edge),inset 2px 2px 0 #FFC4EE}
.scr{background-color:var(--scr);background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px);box-shadow:inset 2px 2px 0 rgba(0,0,0,.85),inset -2px -2px 0 rgba(255,255,255,.65);color:var(--ink)}
.glow{text-shadow:0 0 8px var(--glow)}

/* keys */
.key{border:0;border-radius:0;cursor:pointer;background:var(--key);box-shadow:0 0 0 2px var(--edge),inset 2px 2px 0 #FFFFFF,inset -2px -2px 0 rgba(0,0,0,.3);color:#141A26;text-decoration:none;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.key:hover{filter:brightness(1.07);color:#141A26}
.key:active{transform:translate(1px,1px)}
.key.on,.key[aria-current="page"]{background:var(--key-on);box-shadow:0 0 0 2px var(--edge),inset 2px 2px 0 rgba(4,60,70,.45),inset -2px -2px 0 rgba(255,255,255,.6),0 0 10px rgba(125,244,255,.6);color:#04222C}

/* gel (JUMP / TRANSMIT) */
.jump{animation:gel 2.4s steps(4) infinite}
.gel-frame{display:block;padding:2px;border:0;background:#4A0634;cursor:pointer}
.gel-frame:active{transform:translate(1px,1px)}
.gel{display:flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:0 32px;background:linear-gradient(180deg,#FFE3F7 0 14%,#FF9BE2 14% 46%,#FF5FC8 46% 80%,#D6249A 80%);box-shadow:inset 2px 2px 0 rgba(255,255,255,.8),inset -2px -2px 0 rgba(90,10,62,.5);font-weight:700;font-size:16px;letter-spacing:2px;color:#FFFFFF;text-shadow:2px 2px 0 #8A1660}
.gel svg{filter:drop-shadow(2px 2px 0 #8A1660)}
.gel-frame:disabled{cursor:wait;opacity:.7}

/* ---------- header ---------- */
.site-head{width:100%;max-width:760px}
.head-body{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;padding:10px 12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--lab)}
.brand:hover{color:var(--lab)}
.brand-name{font-weight:700;font-size:18px;line-height:1;letter-spacing:1px;text-shadow:2px 2px 0 rgba(255,255,255,.55)}
.tabs{display:flex;flex-wrap:wrap;gap:8px}
.tab{min-height:36px;padding:0 12px;font-size:11px}

/* ---------- JP-AMP ---------- */
.deck{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px}
.badge{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px 0;font-size:10px;line-height:1}
.badge b{font-size:30px;line-height:1}
.badge .sm{font-size:8px;opacity:.75}
.deck-r{display:flex;flex-direction:column;gap:6px;min-width:0}
.lcd{height:54px;display:flex;align-items:center;gap:10px;padding:0 12px;overflow:hidden}
.lcd-time{font-family:'VT323',monospace;font-size:42px;line-height:1}
.marquee{flex:1;min-width:0;overflow:hidden;white-space:nowrap}
.mq{display:inline-block;font-family:'VT323',monospace;font-size:22px}
.is-playing .mq.scrolls{animation:scroll 8s steps(40) infinite alternate}
.info{display:flex;align-items:center;gap:6px;font-size:8px}
.chip{padding:3px 6px;font-family:'VT323',monospace;font-size:17px;line-height:1}
.chip-sm{padding:1px 6px;font-size:16px;line-height:1.1}
.grow{flex:1}
.led{width:8px;height:8px;background:#2E3A33;box-shadow:0 0 0 2px var(--edge)}
.is-playing .led{background:#7DFF9A}
.seekrow{display:flex;align-items:center;gap:8px;margin-top:4px;font-family:'VT323',monospace;font-size:18px;color:var(--lab)}
.groove{position:relative;flex:1;height:14px}
.groove-fill{position:absolute;left:3px;top:4px;height:6px;width:calc(100% - 6px);transform-origin:0 50%;transform:scaleX(0);background:repeating-linear-gradient(90deg,var(--ink) 0 4px,transparent 4px 6px)}
.seek-ship{position:absolute;top:-4px;left:0;transform:translateX(-50%);filter:drop-shadow(2px 2px 0 rgba(0,0,0,.5));line-height:0;pointer-events:none}
.groove input{position:absolute;left:-8px;right:-8px;top:-12px;width:calc(100% + 16px);height:38px;margin:0;opacity:0;cursor:pointer}
.transport{display:flex;justify-content:center;gap:6px;margin-top:6px}
.tkey{width:50px;height:40px}
.jump-row{display:flex;justify-content:center;margin-top:6px}

/* ---------- flight path ---------- */
.flight{position:relative;height:150px;overflow:hidden}
.trail{position:absolute;left:6%;right:6%;top:80px;height:2px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 6px);opacity:.55}
.ship{position:absolute;top:6px;left:10%;display:flex;flex-direction:column;align-items:center;animation:bob 1.6s steps(2) infinite;transition:left .9s steps(12)}
.ship svg{filter:drop-shadow(0 0 6px rgba(255,95,200,.6))}
.beam{width:24px;height:20px;background:repeating-linear-gradient(0deg,var(--hot) 0 2px,transparent 2px 5px);clip-path:polygon(30% 0,70% 0,100% 100%,0 100%);animation:beam .5s steps(2) infinite alternate}
.warp .ship{animation-duration:.3s}
.planets{position:absolute;left:0;right:0;top:50px;display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr))}
.pl{display:flex;flex-direction:column;align-items:center;gap:2px;padding:0;border:0;background:transparent;color:var(--ink);cursor:pointer;font-size:10px}
.pl:hover{transform:translateY(-2px)}
.pl .num{opacity:.55}
.pf{fill:var(--scr)}.pd{fill:var(--ink)}.po{fill:var(--ink)}
.is-cur .pf{fill:var(--ink)}.is-cur .pd{fill:var(--scr)}
.is-cur svg{filter:drop-shadow(0 0 8px rgba(255,95,200,.7))}
.pl.is-cur .num{opacity:1}
.flight-read{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-family:'VT323',monospace;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px}

/* ---------- spectrum ---------- */
.spec-wrap{display:flex;flex-direction:column;gap:6px}
.spec{height:98px;padding:8px;display:grid;grid-template-columns:repeat(11,minmax(0,1fr));column-gap:6px}
.spec-labels{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));column-gap:6px;font-size:8px;text-align:center;color:var(--lab)}
.colm{position:relative;background:repeating-linear-gradient(0deg,color-mix(in srgb,var(--ink) 13%,transparent) 0 4px,transparent 4px 6px)}
.bar{position:absolute;inset:0;background:repeating-linear-gradient(0deg,var(--ink) 0 4px,transparent 4px 6px);clip-path:inset(92% 0 0 0)}
.bar.lv{background:repeating-linear-gradient(0deg,var(--hot) 0 4px,transparent 4px 6px)}

/* ---------- destinations ---------- */
.plist{display:grid;grid-template-columns:minmax(0,1fr) 16px;gap:6px}
.tracks{list-style:none;margin:0;padding:6px;display:flex;flex-direction:column;gap:2px}
.trk{width:100%;min-height:38px;display:flex;align-items:center;gap:8px;padding:0 10px;border:0;cursor:pointer;text-align:left;background:transparent;color:var(--ink);font-family:'VT323',monospace;font-size:22px}
.trk:hover{background:rgba(255,255,255,.07)}
.trk.is-cur{background:#2050B8;color:#FFFFFF}
.trk:focus-visible{outline-offset:-3px}
.trk .n{width:22px}
.trk .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail{position:relative}
.thumb{position:absolute;left:2px;right:2px;top:0;height:30px;background:linear-gradient(90deg,#FFFFFF 0 25%,#C6CDD7 25% 75%,#8E98A6 75%);box-shadow:0 0 0 2px var(--edge);transition:top .5s steps(6)}
.foot{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fkey{flex:1 1 90px;min-height:36px;font-size:10px}
.total{display:flex;align-items:center;justify-content:center;font-family:'VT323',monospace;font-size:20px;font-weight:400;cursor:default}

/* ---------- music ---------- */
.releases{display:flex;flex-direction:column;gap:8px}
.rel{display:grid;grid-template-columns:60px minmax(0,1fr);gap:12px;align-items:center;padding:10px 12px}
.rel-meta{display:flex;flex-direction:column;gap:6px;min-width:0}
.rel-top{display:flex;align-items:baseline;gap:8px;min-width:0}
.rel h3{margin:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:'VT323',monospace;font-weight:400;font-size:24px;line-height:1}
.rel-tag{font-size:8px;color:var(--hot)}
.rel-sub{font-size:9px;opacity:.75}
.rel-btns{display:flex;gap:8px;flex-wrap:wrap}
.rel-btns .key{min-height:32px;padding:0 12px;font-size:10px}

/* ---------- videos ---------- */
.tv{position:relative;aspect-ratio:16/9;overflow:hidden}
.noise{position:absolute;inset:0;opacity:.5;background-image:conic-gradient(rgba(255,255,255,.35) 0 25%,transparent 0 50%,rgba(255,255,255,.2) 0 75%,transparent 0),conic-gradient(transparent 0 25%,rgba(125,244,255,.25) 0 50%,transparent 0 75%,rgba(255,255,255,.15) 0);background-size:4px 4px,6px 6px;animation:noise .3s steps(1) infinite}
.tv-msg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center}
.tv-msg span{padding:4px 10px;background:var(--scr);font-weight:700;font-size:16px}
.tv-msg .tv-sub{font-family:'VT323',monospace;font-weight:400;font-size:20px}
.wide{min-height:38px;font-size:10px}

/* ---------- comms ---------- */
.comms{width:min(440px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;padding:0;border:0;background:transparent;color:var(--lab);filter:drop-shadow(6px 6px 0 rgba(0,0,0,.6))}
.comms::backdrop{background:rgba(4,3,10,.8)}
.comms .body{padding:0 12px 12px;gap:10px}
.xkey{width:26px;height:22px;background:linear-gradient(180deg,#FFC4EE 0 20%,#FF5FC8 20%)}
.comms-form{display:flex;flex-direction:column;gap:10px}
.kinds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:2px}
.kinds label{position:relative;display:block}
.kinds input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.kinds .key{width:100%;min-height:38px;font-size:11px}
.kinds input:checked+.key{background:var(--key-on);box-shadow:0 0 0 2px var(--edge),inset 2px 2px 0 rgba(4,60,70,.45),inset -2px -2px 0 rgba(255,255,255,.6),0 0 10px rgba(125,244,255,.6);color:#04222C}
.kinds input:focus-visible+.key{outline:2px dashed var(--hot);outline-offset:3px}
.fld{display:flex;flex-direction:column;gap:4px;font-size:10px;font-weight:700}
.fld input,.fld textarea{min-height:42px;padding:0 12px;border:0;border-radius:0;font-family:'VT323',monospace;font-size:22px}
.fld textarea{padding:8px 12px;resize:vertical}
.fld input:focus,.fld textarea:focus{outline:2px dashed var(--hot);outline-offset:2px}
.fld-event[hidden]{display:none}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.err{margin:0;font-size:10px;color:#8A1660}
.wide-gel{width:100%}
.done{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 10px;text-align:center}
.done[hidden]{display:none}
.done-big{font-family:'VT323',monospace;font-size:30px}
.done p{margin:0;font-size:10px;line-height:1.6;color:#C9D2DE}
.done p a{color:var(--ink)}
.done .key{min-height:36px;padding:0 22px;font-size:11px}

/* ---------- small screens ---------- */
@media (max-width:520px){
  .page{padding:12px 8px calc(32px + env(safe-area-inset-bottom));gap:12px}
  .head-body{justify-content:center}
  .brand-name{font-size:16px}
  .tabs{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .tab{padding:0 4px;font-size:10px;min-height:40px}
  .tkey{width:auto;flex:1;max-width:58px;height:44px}
  .trk{min-height:44px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .blink,.ship,.beam,.jump,.noise,.mq{animation:none!important}
  .ship,.thumb{transition:none}
  .jump{filter:drop-shadow(3px 3px 0 rgba(0,0,0,.55))}
}