/* Helskärm "Månen live" – alltid mörkt, enligt designen (Live / LiveMobile). */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #04060B; }
body { color: #ECE8DC; font: 400 16px/1.4 'Outfit', 'Avenir Next', 'Segoe UI', sans-serif; }
a { color: inherit; }
:focus-visible { outline: 2px solid #F2DFA7; outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: #A9AFBF; }
.serif { font-family: 'Newsreader', Georgia, serif; }
.kicker { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: #F2DFA7; font-weight: 500; }

.lv { position: fixed; inset: 0; overflow: hidden;
  background: radial-gradient(circle at 50% 47%, rgba(242, 223, 167, .07) 0, rgba(20, 26, 44, .55) 30vw, #04060B 72%); }
.lv.idle { cursor: none; }
.lv-stars { position: absolute; inset: 0; pointer-events: none; }
.star { position: absolute; border-radius: 50%; background: #fff; opacity: .6; animation: twinkle 5s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .15; } 50% { opacity: .95; } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 90px 6px rgba(242, 223, 167, .16); } 50% { box-shadow: 0 0 150px 34px rgba(242, 223, 167, .16); } }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.9); opacity: 0; } }
.pulse { transform-box: fill-box; transform-origin: center; animation: pulse 2.4s ease-out infinite; }
@keyframes live { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 120, 90, .6); } 50% { box-shadow: 0 0 0 6px rgba(255, 120, 90, 0); } }
@keyframes hi { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Månen: ~83 % av höjden på dator/TV, centrerad (900 px vid 1080 px höjd). */
.lv-moon { position: absolute; left: 50%; top: 5.2vh; transform: translateX(-50%); width: min(83.3vh, 47vw); aspect-ratio: 1; }
.lv-disc { position: relative; width: 100%; height: 100%; border-radius: 50%; animation: glow 7s ease-in-out infinite; }
.lv-disc img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.lv-labels { position: absolute; inset: -1.5%; width: 103%; height: 103%; overflow: visible; transition: opacity .6s; }
.lv-labels.off { opacity: 0; }
.lv-labels text { font-family: 'Outfit', sans-serif; font-weight: 500; paint-order: stroke; stroke: #0A0D16; stroke-opacity: .7; }

.lv-top { position: absolute; left: 56px; right: 56px; top: 40px; display: flex; justify-content: space-between; align-items: center; z-index: 3; }
.lv-id { display: flex; align-items: center; gap: 22px; min-width: 0; }
.lv-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.lv-brand svg { width: 24px; height: 27px; }
.lv-brand span { font-weight: 600; font-size: 19px; letter-spacing: .08em; }
.lv-brand b { color: #F2DFA7; font-weight: 600; }
.lv-sep { width: 1px; height: 28px; background: rgba(236, 232, 220, .2); }
.lv-where { display: flex; align-items: center; gap: 10px; font-size: 16px; white-space: nowrap; }
.lv-dot { width: 8px; height: 8px; border-radius: 50%; background: #FF785A; animation: live 1.8s ease-out infinite; }
.lv-tag { letter-spacing: .14em; font-size: 12px; font-weight: 600; color: #FF9E80; }
.lv-chrome { display: flex; gap: 10px; transition: opacity .8s ease; }
.lv.idle .lv-chrome { opacity: .18; }
.lv-btn { min-height: 44px; padding: 0 16px; border-radius: 22px; background: rgba(10, 13, 22, .55); color: #ECE8DC; border: 1px solid rgba(236, 232, 220, .25);
  font: 500 14px 'Outfit', sans-serif; cursor: pointer; display: flex; align-items: center; gap: 8px; text-decoration: none; transition: background .3s, border-color .3s; }
.lv-btn:hover { border-color: rgba(236, 232, 220, .5); }
.lv-btn[aria-pressed="true"] { background: #F2DFA7; color: #171308; border-color: #F2DFA7; }
.lv-btn .sm { display: none; }
.lv-icon { width: 44px; padding: 0; justify-content: center; }
.lv-search { position: absolute; right: 0; top: 56px; width: 360px; }
.lv-search input { width: 100%; height: 48px; padding: 0 18px; border-radius: 24px; border: 1px solid rgba(236, 232, 220, .25); background: rgba(10, 13, 22, .92); color: #ECE8DC; font: 400 16px 'Outfit', sans-serif; outline: none; }
.lv-search ul { list-style: none; margin: 8px 0 0; padding: 6px; border-radius: 16px; background: rgba(15, 20, 34, .96); border: 1px solid rgba(236, 232, 220, .15); }
.lv-search li { padding: 10px 14px; border-radius: 10px; cursor: pointer; }
.lv-search li small { color: #A9AFBF; margin-left: 8px; }
.lv-search li[aria-selected="true"], .lv-search li:hover { background: rgba(242, 223, 167, .12); }

.lv-info { position: absolute; left: 56px; bottom: 52px; display: flex; flex-direction: column; gap: 10px; max-width: 460px; z-index: 2; }
.lv-phase { font-size: 72px; line-height: .95; font-weight: 600; letter-spacing: -.035em; }
.lv-stats { font-size: 19px; color: #A9AFBF; }
.lv-stats b { color: #F2DFA7; font-weight: 600; }
.lv-dist { font-size: 15px; }

.lv-hi { position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); width: 640px; max-width: 34vw; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; z-index: 2; }
.lv-hi-box { display: flex; flex-direction: column; gap: 6px; padding: 16px 26px; border-radius: 18px; background: rgba(8, 10, 18, .62); border: 1px solid rgba(236, 232, 220, .12); backdrop-filter: blur(10px); }
.lv-hi-box.anim { animation: hi .7s ease both; }
.lv-hi-box .kicker { font-size: 12px; }
#lv-hi-text { font-size: 23px; line-height: 1.35; font-style: italic; text-wrap: balance; }
.lv-dots { display: flex; gap: 8px; align-items: center; }
.lv-dots button { height: 8px; width: 8px; border-radius: 4px; border: none; padding: 0; cursor: pointer; transition: width .4s; background: rgba(236, 232, 220, .35); }
.lv-dots button[aria-current="true"] { width: 22px; background: #F2DFA7; }

.lv-count { position: absolute; right: 56px; bottom: 52px; width: 330px; padding: 22px 24px; border-radius: 22px; background: rgba(8, 10, 18, .62); border: 1px solid rgba(236, 232, 220, .12);
  backdrop-filter: blur(10px); display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.lv-count-t { display: flex; flex-direction: column; gap: 6px; }
.lv-count-t > span:first-child { font-size: 13px; }
.lv-count-v { font-size: 60px; line-height: 1; font-weight: 500; letter-spacing: -.02em; }
.lv-count-s { font-size: 14px; }
.lv-arc { display: block; width: 282px; height: 84px; margin-top: 10px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Mellanstora skärmar: lägg informationsrutorna under varandra om det blir trångt. */
@media (max-width: 1280px) and (min-width: 761px) {
  .lv-phase { font-size: 56px; }
  .lv-hi { display: none; }
}
@media (max-width: 1280px) and (min-width: 761px) and (min-aspect-ratio: 16/9) { .lv-hi { display: flex; max-width: 30vw; } #lv-hi-text { font-size: 18px; } }

/* Mobil / stående skärm (LiveMobile). */
@media (max-width: 760px), (orientation: portrait) and (max-width: 1000px) {
  .lv { background: radial-gradient(circle at 50% 36%, rgba(242, 223, 167, .07) 0, rgba(20, 26, 44, .55) 60vw, #04060B 85%); overflow-y: auto; position: absolute; min-height: 100%; }
  html, body { overflow: auto; }
  .lv-top { left: 12px; right: 12px; top: 10px; flex-wrap: wrap; row-gap: 14px; }
  .lv-brand span, .lv-sep, .lv-tag { display: none; }
  .lv-where { font-size: 14px; gap: 8px; }
  .lv-chrome { width: 100%; order: 3; justify-content: center; gap: 8px; }
  .lv-btn .lg { display: none; }
  .lv-btn .sm { display: inline; }
  .lv-fs { display: none; }
  #lv-exit { position: absolute; right: 0; top: 0; }
  .lv-place-btn { padding: 0 14px; }
  .lv-search { left: 0; right: 0; width: auto; top: 120px; }
  .lv-moon { top: 132px; width: min(90vw, 54vh); }
  .lv-info { position: absolute; left: 20px; right: 20px; top: calc(132px + min(90vw, 54vh) + 26px); bottom: auto; max-width: none; gap: 6px; }
  .lv-kicker, #lv-kicker { display: none; }
  .lv-phase { font-size: 40px; line-height: 1; letter-spacing: -.03em; }
  .lv-phase br { display: none; }
  .lv-stats { font-size: 16px; }
  .lv-dist { display: none; }
  .lv-count { position: absolute; left: 20px; right: 20px; width: auto; top: calc(132px + min(90vw, 54vh) + 128px); bottom: auto; flex-direction: row; justify-content: space-between; align-items: center; padding: 16px 18px; }
  .lv-count-t { gap: 2px; }
  .lv-count-t > span:first-child { font-size: 12px; }
  .lv-count-v { font-size: 38px; }
  .lv-count-s { font-size: 12px; }
  .lv-arc { width: 140px; height: 64px; margin: 0; }
  .lv-hi { position: absolute; left: 20px; right: 20px; width: auto; max-width: none; transform: none; top: calc(132px + min(90vw, 54vh) + 250px); bottom: auto; align-items: flex-start; text-align: left; padding-bottom: 24px; }
  .lv-hi-box { padding: 0; background: none; border: none; backdrop-filter: none; gap: 4px; }
  .lv-hi-box .kicker { font-size: 11px; }
  #lv-hi-text { font-size: 18px; }
  .lv-dots { gap: 6px; }
}