/* ==========================================================================
   Výběr prezentace ve sluneční soustavě
   ========================================================================== */

:root{
  --bg:    #05060c;
  --ink:   #f2efe9;
  --dim:   #8b8880;
  --faint: #56534d;
  --line:  rgba(242,239,233,.11);
  --amber: #ff9245;

  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease: cubic-bezier(.2,.7,.3,1);
}

*{ box-sizing:border-box; margin:0; padding:0 }

html,body{ height:100% }

body{
  background:
    radial-gradient(120% 90% at 50% 50%, #0b1024 0%, #05060c 62%, #020309 100%);
  color:var(--ink);
  font-family:var(--sans); font-weight:300; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

#stars{ position:fixed; inset:0; width:100%; height:100%; z-index:0 }

.stage{
  position:relative; z-index:1;
  height:100%; width:100%;
  padding:clamp(20px,3.4vw,44px);
}

/* --- hlavička ----------------------------------------------------------- */
.masthead{ position:absolute; left:clamp(20px,3.4vw,44px); top:clamp(20px,3.4vw,44px); max-width:min(38vw,420px); z-index:5 }

.display{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(34px,4.4vw,62px); line-height:.98; letter-spacing:-.015em;
  margin-bottom:12px;
}
.display em{ font-style:italic; color:var(--amber) }
.intro{ color:var(--dim); font-size:clamp(12.5px,1vw,14.5px) }

/* --- soustava ----------------------------------------------------------- */
.system-wrap{
  position:absolute; inset:0; display:grid; place-items:center; z-index:2;
}
.system{
  --S:min(84vmin, 780px);
  position:relative; width:var(--S); height:var(--S);
}

.sun{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:calc(var(--S) * .062); aspect-ratio:1;
}
.sun__core{
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 42% 38%, #fff8dc, #ffd45a 42%, #ff8a1e 100%);
  box-shadow:0 0 30px #ffb62e, 0 0 80px rgba(255,150,30,.55), 0 0 160px rgba(255,120,20,.28);
  animation:sunPulse 5s ease-in-out infinite;
}
.sun__corona{
  position:absolute; inset:-42%; border-radius:50%;
  background:radial-gradient(circle, rgba(255,170,60,.22), transparent 66%);
  animation:sunPulse 7s ease-in-out infinite reverse;
}
@keyframes sunPulse{ 50%{ transform:scale(1.07); filter:brightness(1.12) } }

.orbit{
  position:absolute; left:50%; top:50%;
  width:calc(var(--S) * var(--r)); aspect-ratio:1;
  border:1px solid rgba(180,205,255,.10);
  border-radius:50%;
  transform:translate(-50%,-50%);
  animation:spin var(--t) linear infinite;
  animation-delay:calc(var(--t) * var(--ph) * -1);
}
@keyframes spin{
  from{ transform:translate(-50%,-50%) rotate(0deg) }
  to  { transform:translate(-50%,-50%) rotate(360deg) }
}
/* najetím do prostoru soustavy se všechno zastaví — planety se pak dají klikat */
.system:hover .orbit{ animation-play-state:paused }

.planet{
  position:absolute; left:50%; top:0;
  width:calc(var(--S) * var(--sz)); aspect-ratio:1;
  transform:translate(-50%,-50%);
  border:0; padding:0; border-radius:50%; cursor:pointer;
  background:radial-gradient(circle at 50% 76%, var(--c1), var(--c2) 78%);
  box-shadow:inset 0 -2px 6px rgba(0,0,0,.55), 0 0 12px rgba(0,0,0,.5);
  transition:filter .25s var(--ease);
  display:block; text-decoration:none;
}
/* zvětšený terč pro myš, ať se malé planety dají trefit */
.planet::before{ content:''; position:absolute; inset:-15px; border-radius:50% }

.planet__bands{
  position:absolute; inset:0; border-radius:50%; overflow:hidden; opacity:.55;
  background:repeating-linear-gradient(180deg,
    rgba(255,255,255,.22) 0 8%, transparent 8% 17%,
    rgba(0,0,0,.20) 17% 26%, transparent 26% 36%);
}
.planet__ring{
  position:absolute; left:50%; top:50%; width:210%; height:56%;
  transform:translate(-50%,-50%) rotate(-16deg);
  border:2px solid rgba(236,217,174,.55); border-radius:50%;
  box-shadow:0 0 10px rgba(236,217,174,.25);
}
.planet__halo{
  position:absolute; inset:-42%; border-radius:50%; pointer-events:none;
  opacity:0; transition:opacity .3s var(--ease);
  background:radial-gradient(circle, rgba(255,146,69,.42), transparent 68%);
}
.planet.has-deck{ box-shadow:inset 0 -2px 6px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.35), 0 0 22px rgba(120,190,255,.55) }
.planet.has-deck .planet__halo{ opacity:.5; animation:halo 3.2s ease-in-out infinite }
@keyframes halo{ 50%{ opacity:.9; transform:scale(1.12) } }

.planet.is-hot{ filter:brightness(1.25) }
.planet.is-hot .planet__halo{ opacity:1; transform:scale(1.25) }

/* --- karta -------------------------------------------------------------- */
.card{
  position:absolute; left:clamp(20px,3.4vw,44px); bottom:clamp(52px,7vh,76px);
  width:min(34vw,380px); z-index:6;
  border:1px solid var(--line); border-radius:16px;
  background:rgba(8,10,20,.72); backdrop-filter:blur(14px);
  padding:clamp(16px,1.6vw,22px);
  opacity:0; transform:translateY(10px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), border-color .35s;
}
.card.is-on{ opacity:1; transform:none }
.card.is-pinned{ border-color:rgba(255,146,69,.45) }

.card__eyebrow{
  display:block; font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--amber); margin-bottom:6px;
}
.card__name{ font-family:var(--serif); font-weight:400; font-size:clamp(26px,2.6vw,36px); line-height:1.05 }
.card__fact{ color:var(--dim); font-size:13px; margin-top:6px }
.card__empty{ color:var(--faint); font-size:12.5px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line) }
.card__empty code{ font-family:var(--mono); font-size:11.5px; color:var(--dim) }

.card__decks{ margin-top:16px; display:grid; gap:8px }
.deck{
  display:grid; grid-template-columns:1fr auto; gap:2px 12px;
  padding:12px 14px; border:1px solid var(--line); border-radius:12px;
  text-decoration:none; color:inherit; transition:.25s var(--ease);
}
.deck:hover, .deck:focus-visible{
  border-color:rgba(255,146,69,.5); background:rgba(255,146,69,.08); outline:none;
}
.deck__t{ font-family:var(--serif); font-size:19px; line-height:1.2 }
.deck__d{ grid-column:1; color:var(--dim); font-size:12px }
.deck__m{ grid-column:2; grid-row:1; font-family:var(--mono); font-size:10.5px; color:var(--faint); align-self:center }
.deck__go{ grid-column:2; grid-row:2; color:var(--amber); align-self:center; transition:transform .25s var(--ease) }
.deck:hover .deck__go{ transform:translateX(4px) }

/* --- seznam planet ------------------------------------------------------ */
.legend{
  position:absolute; right:clamp(20px,3.4vw,44px); top:50%; transform:translateY(-50%);
  z-index:6; display:grid; gap:2px; width:min(23vw,236px);
}
.lg{
  display:grid; grid-template-columns:auto auto 1fr auto; gap:10px; align-items:center;
  padding:8px 10px; border-radius:10px; border:1px solid transparent;
  background:none; color:inherit; text-align:left; cursor:pointer;
  font-family:var(--sans); text-decoration:none;
  transition:.22s var(--ease);
}
.lg:hover, .lg.is-hot, .lg:focus-visible{
  background:rgba(255,255,255,.05); border-color:var(--line); outline:none;
}
.lg:focus-visible{ border-color:var(--amber) }
.lg__num{ font-family:var(--mono); font-size:10px; color:var(--faint) }
.lg__dot{
  width:11px; height:11px; border-radius:50%;
  background:radial-gradient(circle at 40% 34%, var(--c1), var(--c2));
}
.lg__name{ font-size:13.5px; color:var(--dim) }
.lg.has-deck .lg__name{ color:var(--ink) }
.lg.is-hot .lg__name{ color:var(--ink) }
.lg__state{
  font-family:var(--mono); font-size:10px; color:var(--faint);
  min-width:16px; text-align:right;
}
.lg.has-deck .lg__state{
  color:#06121f; background:var(--amber); border-radius:999px;
  padding:1px 6px; font-weight:500;
}

.noscript{ position:absolute; inset:auto 0 30% 0; text-align:center; color:var(--dim) }
.noscript a{ color:var(--amber) }

/* --- responzivita ------------------------------------------------------- */
@media (max-width: 1100px){
  .card{ width:min(46vw,340px) }
  .legend{ width:200px }
  .system{ --S:min(64vmin, 560px) }
}

/* na malém displeji je soustava nekliknutelná — nahradí ji seznam */
@media (max-width: 820px), (max-height: 560px){
  body{ overflow:auto }
  .stage{ height:auto; min-height:100%; display:flex; flex-direction:column; gap:22px; padding-bottom:60px }
  .masthead, .card, .legend{ position:static; transform:none }
  .masthead{ max-width:none }
  .system-wrap{ display:none }
  .only-wide{ display:none }
  .legend{ width:100%; gap:0; border-top:1px solid var(--line) }
  .lg{
    grid-template-columns:auto auto 1fr auto; gap:14px;
    padding:15px 6px; border-radius:0; border:0; border-bottom:1px solid var(--line);
  }
  .lg__name{ font-size:16px }
  .card{ width:100%; opacity:1; transform:none }
}

@media (prefers-reduced-motion: reduce){
  .orbit{ animation-play-state:paused }
  *{ transition-duration:.12s !important }
  .sun__core, .sun__corona, .planet__halo{ animation:none }
}