/* The "coming soon" page for runescapelootsim.com. Colours and the heading font are the real site's (../../public/style.css);
   the loot beam is gold like its drop celebration (../../public/fx.css). No scripts, no image files but the item and icons. */
:root {
  --bg: #06141c; --text: #e3d7cf; --muted: #b4a092; --accent: #f9bc6d; --accent-2: #ffd98a; --link: #8ecfe6;
  --border-hi: #a48a5b; --cta: #f8a400; --cta-ink: #2b1e0a;
  --font-head: Cinzel, "Trajan Pro 3", "Trajan Pro", "Perpetua Titling MT", "Felix Titling", "Palatino Linotype", Palatino, Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; overflow-x: hidden;
  background: radial-gradient(760px 560px at 50% 34%, rgba(255, 200, 61, .16), transparent 72%), var(--bg);
  color: var(--text); font: 16px/1.5 system-ui, "Segoe UI", Roboto, sans-serif;
}
.stage { display: grid; justify-items: center; align-content: center; gap: .85rem; padding: 1.5rem 16px 2.25rem; text-align: center; }
.stage p, h1 { margin: 0; }

/* ---------- the loot beam and the drop ---------- */
/* .beam is a zero-width box on the centre line that ends at the ground under the item and runs up past the top of
   the page; its parts are centred on it. Back to front: halo, gold column (widest at the foot), motes, white core,
   then the light pool and ring on the ground. */
.drop { position: relative; width: min(320px, 82vw); height: 232px; }
.beam { position: absolute; left: 50%; bottom: 20px; width: 0; height: 120vh; pointer-events: none; }
.beam i { position: absolute; left: 0; bottom: 0; height: 100%; transform: translateX(-50%); }
.beam .halo { width: 300px; background: linear-gradient(to top, rgba(255, 200, 61, .36), rgba(255, 200, 61, .1) 45%, transparent 80%); filter: blur(26px); }
.beam .col {
  width: 150px; background: linear-gradient(90deg, transparent, rgba(255, 205, 105, .5) 30%, rgba(255, 226, 150, .85) 50%, rgba(255, 205, 105, .5) 70%, transparent);
  clip-path: polygon(34% 0, 66% 0, 100% 100%, 0 100%);
  -webkit-mask-image: linear-gradient(to top, #000 30%, transparent 78%); mask-image: linear-gradient(to top, #000 30%, transparent 78%);
  animation: breathe 2.6s ease-in-out infinite;
}
.beam .core {
  width: 16px; background: linear-gradient(90deg, transparent, #fff 50%, transparent);
  -webkit-mask-image: linear-gradient(to top, #000 22%, transparent 70%); mask-image: linear-gradient(to top, #000 22%, transparent 70%);
}
.beam .motes {
  width: 110px;
  background:
    radial-gradient(circle 2px at 18% 12%, #fff6c8 96%, transparent), radial-gradient(circle 1.5px at 72% 31%, #ffe9a6 96%, transparent),
    radial-gradient(circle 2.5px at 44% 55%, #fff 96%, transparent), radial-gradient(circle 1.5px at 86% 72%, #ffe9a6 96%, transparent),
    radial-gradient(circle 2px at 30% 88%, #fff6c8 96%, transparent);
  background-size: 110px 240px;
  -webkit-mask-image: linear-gradient(to top, #000 25%, transparent 62%); mask-image: linear-gradient(to top, #000 25%, transparent 62%);
  animation: rise 3.4s linear infinite;
}
.beam .pool { width: 300px; height: 52px; bottom: -26px; background: radial-gradient(closest-side, rgba(255, 240, 190, .95), rgba(255, 200, 61, .4) 55%, transparent); }
.beam .ring { width: 210px; height: 36px; bottom: -18px; border: 2px solid rgba(255, 217, 138, .75); border-radius: 50%; box-shadow: 0 0 14px rgba(255, 200, 61, .6); }
.hero {
  position: absolute; left: 50%; top: 14px; width: 150px; height: 150px; margin-left: -75px;
  filter: drop-shadow(0 0 16px rgba(255, 220, 140, .9)) drop-shadow(0 8px 10px rgba(0, 0, 0, .55));
  animation: bob 3.6s ease-in-out infinite;
}
@keyframes breathe { 50% { opacity: .8; } }
@keyframes rise { to { background-position: 0 -240px; } }
@keyframes bob { 50% { transform: translateY(-9px) rotate(2deg); } }

/* ---------- words ---------- */
h1 {
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; line-height: 1.15;
  font-size: clamp(1.5rem, 5.4vw, 3.1rem); color: var(--accent);
  text-shadow: 0 2px 0 #000, 0 0 28px rgba(249, 188, 109, .4);
}
.lead { font-size: clamp(1rem, 2.6vw, 1.25rem); }
/* A gold plate like the site's kill buttons, but a label: nothing to press yet. */
.soon {
  margin-top: .5rem; padding: .5rem 1.6rem; border-radius: 3px;
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .2em; font-size: 1.05rem; color: var(--cta-ink);
  background: linear-gradient(#ffc655, var(--cta) 55%, #d88c00); border: 1px solid #ffe2a3;
  box-shadow: 0 0 0 2px #2b1e0a, 0 0 0 3px var(--border-hi), 0 0 36px rgba(248, 164, 0, .45);
}
.feats { margin-top: .35rem; color: var(--muted); font-size: .9rem; }
.osrs { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: center; color: var(--muted); }
.btn {
  display: inline-flex; gap: .5rem; align-items: center; padding: .45rem .9rem; border-radius: 3px;
  border: 1px solid var(--border-hi); background: linear-gradient(#583e2b, #412a18);
  color: var(--accent-2); font-weight: 600; text-decoration: none;
}
.btn:hover { border-color: var(--accent); color: #fff; }
.btn:focus-visible, footer a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn img { display: block; border-radius: 4px; }

footer { padding: 1rem 16px 1.25rem; max-width: 56rem; margin: 0 auto; text-align: center; color: var(--muted); font-size: .74rem; }
footer p { margin: .25rem 0; }
footer a { color: var(--link); }

@media (max-height: 620px) { .drop { height: 190px; } .hero { top: 0; } .osrs { margin-top: .9rem; } }
@media (prefers-reduced-motion: reduce) { .beam .col, .beam .motes, .hero { animation: none; } }