/* Star Egg (ביצת הכוכב) pages. Tokens: docs/design/ekoloko-design-rules.md §7-8 and
   the site's ekoloko.css: lime #abd93f, ink #18384f, band #1b4762, note #fdf3d8/#e8d49c,
   card #fffef4, image line #a7b793. Arial for text; the tribe colours come from the art. */
:root {
  --lime: #abd93f;
  --ink: #18384f;
  --ink-soft: #4a6076;
  --line: #a7b793;
  --band: #1b4762;
  --note: #fdf3d8;
  --note-line: #e8d49c;
  --card: #fffef4;
  --glow: #ff9d1c;
  --mist: #2bb7a8;
  --thunder: #2f7bff;
  --gold: #ffd23c;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--lime) url("/ekoloko/website/common/images/bg_ext.jpg") repeat-x top center;
  color: var(--ink);
  font: 15px/1.55 Arial, "Helvetica Neue", sans-serif;
  direction: rtl;
  min-height: 100vh;
}

.top {
  max-width: 860px;
  margin: 0 auto;
  height: 140px;
  padding: 0 16px;
  position: relative;
}

.top h1 {
  margin: 0;
  padding-top: 22px;
  font-size: 42px;
  line-height: 1.1;
  color: #fff;
  -webkit-text-stroke: 7px var(--band);
  paint-order: stroke fill;
  text-shadow: 0 3px 0 rgba(24, 56, 79, .55);
  letter-spacing: .5px;
}

.top .sub {
  position: absolute;
  inset-inline: 16px;
  top: 100px;
  margin: 0;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  line-height: 40px;
}

.paper {
  max-width: 860px;
  margin: 0 auto 32px;
  padding: 0 16px;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px 18px;
  margin-bottom: 14px;
}

.card h2 {
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.25;
}

.muted { color: var(--ink-soft); }

/* ---------------------------------------------------------------- egg */
.egg-card {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 18px;
  align-items: center;
  background: radial-gradient(circle at 30% 50%, #2b2f86 0, #1a1b52 62%);
  border-color: var(--band);
  color: #fff;
  overflow: hidden;
  position: relative;
}

.egg-wrap { position: relative; width: 300px; height: 300px; }

.egg-wrap img {
  position: absolute;
  inset: 0;
  width: 300px;
  height: 300px;
  transition: opacity .6s ease;
}

.egg-wrap .egg { filter: drop-shadow(0 0 16px var(--leader, rgba(255, 210, 60, .55))); }
.egg-wrap.cracking .egg { animation: egg-wobble 4.5s ease-in-out infinite; transform-origin: 50% 90%; }

@keyframes egg-wobble {
  0%, 82%, 100% { transform: rotate(0); }
  86% { transform: rotate(-2.4deg); }
  90% { transform: rotate(2.4deg); }
  94% { transform: rotate(-1.6deg); }
  97% { transform: rotate(1deg); }
}

.egg-info h2 { color: var(--gold); }

.egg-big {
  font-size: 56px;
  font-weight: bold;
  line-height: 1;
  color: #fff;
}

.egg-big small { font-size: 24px; margin-inline-start: 4px; }

.meter {
  height: 22px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .18);
  border: 2px solid rgba(255, 255, 255, .55);
  overflow: hidden;
  margin: 12px 0 6px;
}

.meter > span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(#ffe68a, #ffb81c);
  transition: width 1s ease;
}

.egg-info .facts { margin: 12px 0 0; padding: 0; list-style: none; }
.egg-info .facts li { margin: 4px 0; font-size: 16px; }
.egg-info .facts b { color: var(--gold); }

.meteor-note {
  margin: 12px 0 0;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .35);
  font-size: 14px;
}

.egg-card.meteor-on .meteor-note {
  background: var(--gold);
  border-color: #fff;
  color: var(--ink);
  font-weight: bold;
  font-size: 16px;
}

.comet {
  position: absolute;
  top: 8px;
  inset-inline-end: -140px;
  width: 128px;
  height: 128px;
  background: url("img/comet/comet_strip.png") 0 0 / 1024px 128px no-repeat;
  pointer-events: none;
  opacity: 0;
}

.comet.fly { animation: comet-frames .8s steps(8) infinite, comet-fly 7s linear forwards; }

@keyframes comet-frames { to { background-position: -1024px 0; } }
@keyframes comet-fly {
  0% { transform: translateX(0) translateY(0); opacity: 1; }
  100% { transform: translateX(calc(-100vw - 200px)) translateY(80px); opacity: 1; }
}

/* ---------------------------------------------------------------- tribes */
.tribes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.tribe {
  border: 1px solid var(--note-line);
  background: var(--note);
  border-radius: 6px;
  padding: 12px;
  text-align: center;
  position: relative;
}

.tribe.lead { outline: 3px solid var(--gold); outline-offset: 1px; }
.tribe .lead-flag {
  position: absolute;
  top: -11px;
  inset-inline-start: 50%;
  transform: translateX(50%);
  background: var(--gold);
  color: var(--ink);
  font-weight: bold;
  font-size: 13px;
  padding: 1px 12px;
  border-radius: 10px;
  border: 1px solid var(--ink);
  display: none;
}
.tribe.lead .lead-flag { display: block; }

.tribe img.badge { width: 94px; height: 94px; }
.tribe h3 { margin: 6px 0 0; font-size: 18px; }
.tribe .pct { font-size: 30px; font-weight: bold; line-height: 1.15; }
.tribe .players { font-size: 13px; color: var(--ink-soft); }

.tribe .bar {
  height: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
  margin: 6px 0 4px;
  overflow: hidden;
}

.tribe .bar span {
  display: block;
  height: 100%;
  width: 0;
  background-size: 600px 100%;
  transition: width 1s ease;
}

.tribe[data-key="glow"] .bar span { background-image: url("img/gauge/gauge_fill_glow.png"); }
.tribe[data-key="mist"] .bar span { background-image: url("img/gauge/gauge_fill_mist.png"); }
.tribe[data-key="thunder"] .bar span { background-image: url("img/gauge/gauge_fill_thunder.png"); }

.stack {
  display: flex;
  height: 30px;
  margin-top: 14px;
  border: 2px solid var(--ink);
  border-radius: 15px;
  overflow: hidden;
  background: #e7e3cf;
}

.stack span { display: block; height: 100%; transition: width 1s ease; background-size: 600px 100%; }
.stack .s-glow { background-image: url("img/gauge/gauge_fill_glow.png"); }
.stack .s-mist { background-image: url("img/gauge/gauge_fill_mist.png"); }
.stack .s-thunder { background-image: url("img/gauge/gauge_fill_thunder.png"); }

/* ---------------------------------------------------------------- targets */
.target { margin: 12px 0; }
.target .row { display: flex; justify-content: space-between; font-weight: bold; }
.target .meter { background: #fff; border-color: var(--line); height: 18px; margin: 4px 0; }
.target .meter > span { background: linear-gradient(#cfeb78, #7fb21f); }
.target .done-tag { color: #3a7a00; }

/* ---------------------------------------------------------------- ticker */
.ticker {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto 14px;
  aspect-ratio: 600 / 60;
  background: url("img/ui/news_ticker_frame.png") center / 100% 100% no-repeat;
}

.ticker p {
  position: absolute;
  inset: 0 52px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: bold;
  font-size: 15px;
  color: #4a2a10;
}

/* ---------------------------------------------------------------- hatch */
.hatch { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }

.hatchling { width: 150px; text-align: center; }
.hatchling img { width: 150px; height: 150px; object-fit: contain; }
.hatchling.unknown img { filter: brightness(0) opacity(.5); }
.hatchling.winner img { width: 230px; height: 230px; filter: drop-shadow(0 0 14px var(--gold)); }
.hatchling.winner { width: 230px; }
.hatchling.dim { opacity: .35; }
.hatchling figcaption { font-weight: bold; margin-top: 2px; }

.callout {
  background: var(--note);
  border: 1px solid var(--note-line);
  border-radius: 6px;
  padding: 10px 14px;
  margin: 10px 0 0;
  font-weight: bold;
}

ol.steps { margin: 0; padding-inline-start: 22px; }
ol.steps li { margin: 6px 0; }

.prize { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.prize img { width: 64px; height: 64px; }

a { color: var(--band); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.note-page { max-width: 640px; margin: 0 auto; padding: 0 16px 32px; }
.note-page .card h2 { font-size: 20px; }
.note-page ul { margin: 6px 0; padding-inline-start: 22px; }
.note-page li { margin: 5px 0; }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 680px) {
  .top h1 { font-size: 32px; }
  .top .sub { font-size: 14px; }
  .egg-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .egg-wrap, .egg-wrap img { width: 240px; height: 240px; }
  .tribes { grid-template-columns: 1fr; }
  .tribe { display: grid; grid-template-columns: 94px 1fr; gap: 4px 12px; text-align: start; align-items: center; }
  .tribe img.badge { grid-row: span 3; }
  .hatchling.winner, .hatchling.winner img { width: 190px; height: 190px; }
}

@media (prefers-reduced-motion: reduce) {
  .egg-wrap.cracking .egg, .comet.fly { animation: none; }
  .comet { display: none; }
  .meter > span, .tribe .bar span, .stack span, .egg-wrap img { transition: none; }
}