/* =====================================================================
   TIMELINE — planetarium orrery out by the gas giants
   ===================================================================== */
.g-timeline{--tl-a:#ff9a3c;--tl-b:#ffd34d;--tl-ink:#f4ead8;--tl-line:#4a3a7a}
.g-timeline .stage.tl-stage{top:184px;width:min(1080px,94vw);transition:opacity .35s,filter .35s}
.tl-stage.dimmed{opacity:.14;filter:blur(1px)}
.tl-panel{position:relative;background:linear-gradient(180deg,rgba(22,14,40,.94),rgba(8,6,24,.94));border:2px solid var(--tl-line);box-shadow:0 0 0 2px #05030f,0 16px 40px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,200,120,.15);padding:20px}
.tl-panel::before{content:'';position:absolute;left:-2px;right:-2px;top:-2px;height:4px;background:repeating-linear-gradient(90deg,#ff8a3c 0 16px,#ffd34d 16px 32px,#2ee6a8 32px 48px,#3fa8ff 48px 64px,#c07cff 64px 80px)}
.tl-in{animation:tlIn .5s cubic-bezier(.2,1.3,.4,1) both}
@keyframes tlIn{from{opacity:0;transform:translateY(-14px) scale(.98)}}
.tl-kick{font-size:16px;letter-spacing:4px;text-transform:uppercase;color:#ffb070}
.tl-grid{display:grid;grid-template-columns:minmax(360px,440px) 1fr;gap:24px;align-items:stretch}

/* orrery */
.tl-orrery{position:relative;min-height:440px;background:radial-gradient(ellipse at 50% 52%,rgba(255,170,60,.16),rgba(40,20,60,.25) 40%,rgba(5,3,15,.6) 75%);box-shadow:inset 0 0 0 2px #241a48}
.tl-orrery canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.tl-hdr{position:absolute;left:12px;right:12px;top:10px;display:flex;justify-content:space-between;align-items:center;z-index:1}
.tl-legend{position:absolute;left:12px;right:12px;bottom:8px;display:flex;justify-content:space-between;font-size:16px;color:#8a7ab8;z-index:1}
.tl-ring{--p:100%;position:relative;width:48px;height:48px;flex:none;display:flex;align-items:center;justify-content:center;background:conic-gradient(var(--tl-a) var(--p),#241a48 0);clip-path:polygon(0 8px,8px 8px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 8px),0 calc(100% - 8px))}
.tl-ring::after{content:'';position:absolute;inset:4px;background:#0c0820;clip-path:inherit}
.tl-ring b{position:relative;z-index:1;font-size:24px;color:#fff}
.tl-ring.low{animation:lowpulse .5s steps(2) infinite}
.tl-swaps{position:absolute;left:50%;bottom:40px;transform:translateX(-50%);z-index:2;text-align:center;font-size:24px;letter-spacing:2px;color:#fff;background:rgba(8,6,24,.9);padding:4px 16px;border:2px solid currentColor;animation:swIn .5s cubic-bezier(.2,1.8,.4,1) both;white-space:nowrap}
.tl-swaps b{font-size:40px;font-weight:700;margin-right:6px}
.tl-swaps small{display:block;font-size:16px;letter-spacing:2px;color:#b8b2ec;text-transform:uppercase}
.tl-swaps.t-nova{color:var(--t-nova);box-shadow:0 0 24px rgba(255,211,77,.6)}.tl-swaps.t-deep{color:var(--t-deep)}.tl-swaps.t-orbit{color:var(--t-orbit)}.tl-swaps.t-strato{color:var(--t-strato)}.tl-swaps.t-junk{color:var(--t-junk)}.tl-swaps.t-pad{color:var(--t-pad)}
@keyframes swIn{from{opacity:0;transform:translateX(-50%) scale(2.2)}}

/* event cards */
.tl-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.tl-ask{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:24px;color:var(--tl-ink)}
.tl-ask b{color:var(--tl-b)}
.tl-undo{font-size:16px;color:#8a7ab8}
.tl-cards{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;flex:1}
.tl-cards li{display:block}
.tl-card{--pc:transparent;--pd:transparent;position:relative;display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:12px;width:100%;min-height:64px;padding:8px 12px;text-align:left;font-family:var(--px);font-size:16px;line-height:24px;color:var(--tl-ink);background:#120c2c;border:2px solid #34285e;cursor:pointer;transition:border-color .15s,background .15s,transform .08s}
.tl-card:hover{border-color:#8a7ab8;transform:translateX(3px)}
.tl-card:focus-visible{outline:4px solid #ff5fb4;outline-offset:2px}
.tl-card:active{transform:scale(.98)}
.tl-slot{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:2px dashed #4a3a7a}
.tl-slot i{font-style:normal;font-weight:700;font-size:24px;color:#14081e}
.tl-card.on{border-color:var(--pc);background:linear-gradient(90deg,color-mix(in srgb,var(--pc) 22%,#120c2c),#120c2c 70%)}
.tl-card.on .tl-slot{border:0;background:radial-gradient(circle at 35% 35%,#fff 0 3px,var(--pc) 4px 15px,var(--pd) 16px);clip-path:polygon(25% 0,75% 0,75% 10%,90% 10%,90% 25%,100% 25%,100% 75%,90% 75%,90% 90%,75% 90%,75% 100%,25% 100%,25% 90%,10% 90%,10% 75%,0 75%,0 25%,10% 25%,10% 10%,25% 10%);animation:planetPop .45s cubic-bezier(.2,1.9,.35,1)}
@keyframes planetPop{0%{transform:scale(0) rotate(-90deg)}}
.tl-lab{min-width:0}
.tl-yr{font-weight:700;font-size:24px;color:#fff;opacity:0;min-width:64px;text-align:right}
.tl-card.yr-in .tl-yr{opacity:1;animation:yrIn .45s cubic-bezier(.2,1.6,.4,1) both}
@keyframes yrIn{0%{opacity:0;transform:translateX(40px) scale(1.6)}}
.tl-card.ok{border-color:#2ee6a8;box-shadow:0 0 14px rgba(46,230,168,.35)}.tl-card.ok .tl-yr{color:#7ff6c8}
.tl-card.bad{border-color:#ff8a3c;box-shadow:0 0 14px rgba(255,138,60,.35)}.tl-card.bad .tl-yr{color:#ffb070}
.locked .tl-card{cursor:default}.locked .tl-card:hover{transform:none}
.tl-lock{font-family:var(--px);font-weight:700;font-size:24px;letter-spacing:4px;min-height:56px;cursor:pointer;color:#5a4a8a;background:#0c0820;border:4px solid #34285e;transition:all .2s}
.tl-lock span{font-size:16px;letter-spacing:2px;margin-left:8px}
.tl-lock.ready{color:#1a0c00;background:linear-gradient(90deg,#ff8a3c,#ffd34d,#2ee6a8,#3fa8ff,#c07cff);background-size:200% 100%;border-color:#fff3c4;box-shadow:0 0 24px rgba(255,180,80,.55);animation:lockShine 2s linear infinite}
@keyframes lockShine{to{background-position:200% 0}}
.tl-lock:focus-visible{outline:4px solid #ff5fb4;outline-offset:2px}
.tl-lock:disabled{cursor:default}

/* opening */
.tl-open{text-align:center;width:min(640px,100%);margin:0 auto;padding:28px 24px}
.tl-sunbig{position:relative;width:200px;height:120px;margin:0 auto;display:flex;align-items:center;justify-content:center}
.tl-sunbig svg{position:relative;z-index:1;filter:drop-shadow(0 0 18px rgba(255,180,60,.8));animation:novaBob 1.6s ease-in-out infinite}
.tl-sunbig i{position:absolute;left:50%;top:50%;border:2px dashed #6a5aa0;border-radius:50%;transform:translate(-50%,-50%)}
.tl-sunbig .o1{width:130px;height:70px;animation:orbitDot 6s linear infinite}.tl-sunbig .o2{width:170px;height:92px;border-color:#ff8a3c88}.tl-sunbig .o3{width:200px;height:116px;border-color:#3fa8ff66}
.tl-title{font-weight:700;font-size:40px;letter-spacing:8px;margin-top:12px;color:#fff;text-shadow:-3px 0 #ff8a3c,3px 0 #3fa8ff,0 0 24px rgba(255,180,80,.6)}
.tl-how{margin-top:12px;font-size:16px;color:#cfc4ec;letter-spacing:1px}.tl-how b{color:var(--tl-b)}
.tl-count{font-weight:700;font-size:88px;line-height:1;margin-top:12px;color:#fff;text-shadow:0 0 30px rgba(255,180,80,.9)}
.tl-count.beat{animation:beat .6s cubic-bezier(.2,1.8,.4,1)}

.tl-hud .dist{color:#ffb070!important;font-size:24px!important}

@media (max-width:820px){
  .g-timeline .stage.tl-stage{top:168px;max-height:calc(100vh - 176px);overflow-y:auto;overscroll-behavior:contain}
  .tl-panel{padding:12px}
  .tl-grid{grid-template-columns:1fr;gap:12px}
  .tl-orrery{min-height:200px}
  .tl-hdr{top:6px;left:8px;right:8px}.tl-legend{display:none}
  .tl-ask{font-size:16px}
  .tl-cards{gap:6px}
  .tl-card{min-height:56px;grid-template-columns:32px 1fr auto;gap:8px;padding:4px 8px;font-size:16px;line-height:20px}
  .tl-slot{width:32px;height:32px}.tl-slot i{font-size:16px}
  .tl-yr{min-width:48px;font-size:16px}
  .tl-swaps{bottom:8px;font-size:16px;padding:2px 12px}.tl-swaps b{font-size:24px}.tl-swaps small{display:none}
  .tl-title{font-size:24px;letter-spacing:4px}.tl-count{font-size:64px}
}