/*
  MARS, LIVE (Sky mode): the look. Colours, fonts and the navigation bar come from the website kit (wum.css).
  1. Basics   2. The full-screen globe   3. The title and Weather now   4. The story panel   5. Start your own storm
  6. The buttons   7. What's real here?   8. Phones   9. Calmer motion
*/

/* 1. Basics */
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--wum-stage-bg); color: var(--wum-stage-ink); font-family: var(--wum-body); overflow: hidden; }
button { font: inherit; cursor: pointer; border: 1px solid var(--wum-stage-glass-line); background: rgba(16,12,11,.55); color: inherit; border-radius: 999px; padding: 11px 18px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: border-color .2s, background .2s, transform .2s; touch-action: manipulation; }
button:hover { border-color: var(--wum-stage-accent); }
button:disabled { opacity: .4; cursor: default; }
button[aria-pressed=true], button.primary { background: var(--wum-stage-accent); color: var(--wum-stage-bg); border-color: transparent; }
:focus-visible { outline: 2px solid var(--wum-stage-focus); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--wum-display); line-height: 1.02; margin: 0; font-weight: 600; }
.skip { position: absolute; top: -80px; z-index: 1000; }
.skip:focus { top: 12px; background: var(--wum-stage-bg); padding: 12px; }

/* 2. The full-screen globe */
.sky { position: fixed; inset: 0; overflow: hidden; }
#planet { position: absolute; inset: 0; }
#planet .gx-time, #planet .gx-slot, #planet .gx-hint { display: none !important; }
body.in-own #planet canvas { cursor: crosshair; }
.sky::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(7,6,10,.6) 0%, rgba(7,6,10,0) 34%), linear-gradient(0deg, rgba(7,6,10,.65) 0%, rgba(7,6,10,0) 26%); }
.status { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; color: var(--wum-stage-muted); font: 13px var(--wum-mono); letter-spacing: .1em; }
.fallback { position: absolute; left: 24px; right: 24px; top: 40%; z-index: 4; text-align: center; color: var(--wum-stage-muted); }

/* 3. The title and Weather now */
.sm-head { position: absolute; z-index: 4; left: 40px; top: 96px; max-width: 380px; pointer-events: none; }
.sm-head h1 { font-size: clamp(54px, 6.4vw, 96px); margin: 12px 0 20px; text-shadow: 0 4px 30px rgba(0,0,0,.5); }
.now-card { pointer-events: auto; padding: 18px 20px; border-radius: 20px; background: rgba(12,9,8,.5); border: 1px solid var(--wum-stage-glass-line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: opacity .5s, transform .5s; }
body.in-story .now-card, body.in-own .now-card { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.now-chip { display: flex; align-items: center; gap: 10px; margin: 0; font: 11px var(--wum-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--wum-stage-muted); }
.now-chip i { width: 8px; height: 8px; border-radius: 50%; background: #ff6b4a; box-shadow: 0 0 0 0 rgba(255,107,74,.6); animation: live 2s infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(255,107,74,.55); } 70% { box-shadow: 0 0 0 10px rgba(255,107,74,0); } 100% { box-shadow: 0 0 0 0 rgba(255,107,74,0); } }
.now-season { margin: 10px 0 8px; font: 600 21px/1.2 var(--wum-display); }
.now-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.now-list li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.4; color: rgba(255,244,234,.86); }
.now-list li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: #f2c78c; box-shadow: 0 0 8px #f2c78c; }

/* 4. The story panel */
.story-panel { position: absolute; z-index: 5; left: 40px; bottom: 112px; width: min(430px, calc(100% - 32px)); padding: 22px 24px; border-radius: 22px;
  background: rgba(12,9,8,.6); border: 1px solid var(--wum-stage-glass-line); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); animation: rise .5s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.story-dots { display: flex; gap: 6px; margin-bottom: 14px; }
.story-dots i { width: 22px; height: 4px; border-radius: 4px; background: rgba(255,240,228,.18); }
.story-dots i.done { background: rgba(242,199,140,.6); }
.story-dots i.on { background: var(--wum-stage-accent); }
.story-panel h2 { font-size: clamp(30px, 3vw, 40px); margin-bottom: 10px; }
.story-panel p { margin: 0; font-size: 16px; line-height: 1.55; color: rgba(255,244,234,.88); min-height: 4.6em; }
.story-bar { height: 2px; margin: 16px 0 14px; background: rgba(255,240,228,.12); border-radius: 2px; overflow: hidden; }
.story-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f2c78c, var(--wum-stage-accent)); }
.story-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.story-buttons button { padding: 9px 16px; font-size: 14px; }
.story-buttons .quiet { margin-left: auto; background: transparent; }

/* 5. Start your own storm */
.own-panel { position: absolute; z-index: 5; left: 50%; top: 92px; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 20px;
  border-radius: 999px; background: rgba(12,9,8,.6); border: 1px solid var(--wum-stage-glass-line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); white-space: nowrap; animation: rise .4s ease-out; }
.own-panel p { margin: 0; font-size: 15px; }
.own-count { font: 600 20px var(--wum-display) !important; color: #f2c78c; }
.own-count:empty { display: none; }
.own-panel button { padding: 8px 14px; font-size: 13px; }

/* 6. The buttons */
.dock { position: absolute; z-index: 6; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; gap: 10px; max-width: calc(100% - 32px); overflow-x: auto; padding: 4px; scrollbar-width: none; }
.dock::-webkit-scrollbar { display: none; }
.dock button { display: flex; align-items: center; gap: 10px; white-space: nowrap; padding: 13px 20px; font-size: 15px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.dock button:hover { transform: translateY(-2px); }
.dock .ic { font-size: 13px; opacity: .85; }
.dock .quiet { background: rgba(16,12,11,.35); }
.drag-hint { position: absolute; z-index: 4; right: 28px; bottom: 36px; margin: 0; font: 12px var(--wum-mono); color: var(--wum-stage-muted); pointer-events: none; }

/* 7. What's real here? */
dialog { color: var(--wum-card-ink); background: var(--wum-card-bg); border: 0; border-radius: 22px; padding: 40px; width: min(680px, calc(100% - 32px)); max-height: 85vh; overflow: auto; }
dialog::backdrop { background: rgba(0,0,0,.8); backdrop-filter: blur(8px); }
dialog h2 { font-size: 40px; margin-bottom: 18px; }
dialog h3 { font-size: 22px; margin-top: 24px; }
dialog p, dialog li { font-size: 14.5px; line-height: 1.6; color: var(--wum-card-muted); }
dialog a { color: var(--wum-card-accent); }
.dialog-close { position: absolute; right: 14px; top: 14px; color: var(--wum-card-ink); background: none; border-color: var(--wum-card-rule); backdrop-filter: none; }

/* 8. Phones */
@media (max-width: 1100px) { .drag-hint { display: none; } }
@media (max-width: 760px) {
  .sky::after { background: linear-gradient(180deg, rgba(7,6,10,.7) 0%, rgba(7,6,10,0) 30%), linear-gradient(0deg, rgba(7,6,10,.75) 0%, rgba(7,6,10,0) 34%); }
  .sm-head { left: 16px; right: 16px; top: 74px; max-width: none; }
  .sm-head h1 { font-size: 44px; margin: 8px 0 12px; }
  .now-card { padding: 12px 14px; border-radius: 16px; }
  .now-season { font-size: 17px; margin: 8px 0 6px; }
  .now-list li { font-size: 13px; }
  .now-list li:nth-child(n+3) { display: none; }
  .story-panel { left: 12px; right: 12px; width: auto; }
  .story-panel p { min-height: 0; }
  .own-panel { top: auto; bottom: 90px; left: 12px; right: 12px; transform: none; white-space: normal; border-radius: 18px; justify-content: space-between; }
  .dock { left: 12px; right: 12px; transform: none; max-width: none; padding: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; overflow: visible; }
  .dock button { padding: 10px 12px; font-size: 13px; justify-content: center; white-space: normal; text-align: left; line-height: 1.2; }
  /* While a story plays the planet is the picture: the title and buttons slide away and the card is a slim strip. */
  .sm-head, .dock { transition: opacity .5s, transform .5s; }
  body.in-story .sm-head { opacity: 0; transform: translateY(-16px); pointer-events: none; }
  body.in-story .dock { opacity: 0; transform: translateY(16px); pointer-events: none; }
  .story-panel { bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); padding: 12px 14px 12px; border-radius: 18px; background: rgba(12,9,8,.5); }
  .story-dots { margin-bottom: 8px; }
  .story-dots i { width: 16px; height: 3px; }
  .story-panel h2 { font-size: 21px; margin-bottom: 4px; }
  .story-panel p { font-size: 13.5px; line-height: 1.45; }
  .story-bar { margin: 10px 0 10px; }
  .story-buttons button { padding: 7px 14px; font-size: 13px; }
  .own-panel { bottom: 134px; display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 14px 16px; }
  .own-panel p { font-size: 14px; }
  .own-count { grid-column: 1; }
  .own-panel button { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  dialog { padding: 30px 22px; }
}

/* 9. Calmer motion */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }