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

:root {
  --glow: #ffd166;
}

html, body {
  height: 100%;
  overflow: hidden;
  font-family: 'Segoe UI', system-ui, sans-serif;
  user-select: none;
  background: #2b1055;
}

/* ===== HIMMEL ===== */
.sky {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg,
    #2b1055 0%,
    #7b2d8b 28%,
    #d94f70 52%,
    #ff8c42 70%,
    #ffc15e 85%);
  animation: skyShift 18s ease-in-out infinite alternate;
}
@keyframes skyShift {
  0%   { filter: hue-rotate(0deg) brightness(1); }
  100% { filter: hue-rotate(-14deg) brightness(1.08); }
}

/* ===== SOL ===== */
.sun {
  position: fixed;
  left: 50%;
  bottom: 24vh;
  width: 24vmin;
  height: 24vmin;
  margin-left: -12vmin;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #fff7d6, #ffd166 45%, #ff9a3c 80%);
  box-shadow:
    0 0 60px 25px rgba(255, 200, 90, .55),
    0 0 160px 70px rgba(255, 140, 60, .35),
    0 0 300px 130px rgba(255, 100, 60, .18);
  animation: sunPulse 5s ease-in-out infinite alternate;
}
@keyframes sunPulse {
  from { transform: scale(1); }
  to   { transform: scale(1.05); }
}

/* ===== HAV (canvas) ===== */
#sea {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  width: 100vw;
  height: 32vh;
  z-index: 3;
}

/* ===== PALMER (SVG injiceras av app.js) ===== */
#palms {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.palm-svg {
  position: absolute;
  bottom: 24vh;
  overflow: visible;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45));
}
.palm-svg path, .palm-svg circle {
  fill: #1c1033;
}

/* ===== STJÄRNOR ===== */
.star {
  position: fixed;
  background: #fff;
  border-radius: 50%;
  animation: twinkle ease-in-out infinite alternate;
}
@keyframes twinkle {
  from { opacity: .15; transform: scale(.7); }
  to   { opacity: .9;  transform: scale(1.2); }
}

/* ===== FÅGLAR ===== */
.bird {
  position: fixed;
  font-size: 3vmin;
  filter: brightness(.2);
  animation: fly linear infinite;
  z-index: 2;
}
@keyframes fly {
  from { transform: translateX(-10vw) translateY(0); }
  50%  { transform: translateX(50vw) translateY(-4vh); }
  to   { transform: translateX(115vw) translateY(1vh); }
}

/* ===== INNEHÅLL ===== */
.content {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.6vmin;
  padding: 3vmin 4vmin 18vh;
  text-align: center;
}

h1 {
  font-size: clamp(1.6rem, 5vmin, 3.4rem);
  color: #fff;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-shadow: 0 2px 30px rgba(0,0,0,.45), 0 0 60px rgba(255,190,90,.4);
  animation: floatIn 1.2s cubic-bezier(.2,.9,.3,1.2) both;
}
.subtitle {
  color: rgba(255,255,255,.85);
  font-size: clamp(.9rem, 2.4vmin, 1.3rem);
  letter-spacing: .06em;
  text-shadow: 0 1px 12px rgba(0,0,0,.4);
  animation: floatIn 1.2s .15s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes floatIn {
  from { opacity: 0; transform: translateY(30px) scale(.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== COUNTDOWN-KORT ===== */
.countdown {
  display: flex;
  gap: 2.2vmin;
  animation: floatIn 1.2s .3s cubic-bezier(.2,.9,.3,1.2) both;
}
.unit {
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 2.2vmin;
  padding: 2.6vmin 1.4vmin;
  min-width: 16vmin;
  box-shadow: 0 10px 40px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .3s;
}
.unit:hover { transform: translateY(-6px) scale(1.04); }
.unit .num {
  display: block;
  font-size: clamp(2.2rem, 9vmin, 5.5rem);
  font-weight: 900;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 30px rgba(255,209,102,.8), 0 3px 10px rgba(0,0,0,.35);
  line-height: 1;
}
.unit .num.tick { animation: pop .45s cubic-bezier(.2,1.5,.4,1); }
@keyframes pop {
  0%  { transform: scale(1); }
  40% { transform: scale(1.18); color: var(--glow); }
  100%{ transform: scale(1); }
}
.unit .label {
  display: block;
  margin-top: 1vmin;
  font-size: clamp(.65rem, 1.8vmin, .95rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
}

/* ===== PROGRESS ===== */
.progress-wrap {
  width: min(70vmin, 90vw);
  animation: floatIn 1.2s .45s cubic-bezier(.2,.9,.3,1.2) both;
}
.progress-bar {
  height: 1.6vmin;
  background: rgba(255,255,255,.15);
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
}
.progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, #ffd166, #ff8c42, #ff5e78);
  box-shadow: 0 0 20px rgba(255,180,80,.8);
  transition: width 1s linear;
}
.progress-label {
  margin-top: 1.2vmin;
  color: rgba(255,255,255,.8);
  font-size: clamp(.75rem, 2vmin, 1rem);
  letter-spacing: .05em;
}

.message {
  color: #fff;
  font-size: clamp(1rem, 3vmin, 1.6rem);
  font-weight: 600;
  text-shadow: 0 2px 20px rgba(0,0,0,.4);
  min-height: 1.5em;
  animation: floatIn 1.2s .6s cubic-bezier(.2,.9,.3,1.2) both;
}
.message.swap {
  animation: msgSwap .8s cubic-bezier(.2,.9,.3,1.15) both;
}
@keyframes msgSwap {
  0%   { opacity: 0; transform: translateY(14px) scale(.92); filter: blur(4px); }
  60%  { filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.message-row {
  display: flex;
  align-items: center;
  gap: 1.6vmin;
}
.dice {
  font-size: clamp(1.2rem, 3.4vmin, 2rem);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
  width: clamp(2.6rem, 6.4vmin, 3.6rem);
  height: clamp(2.6rem, 6.4vmin, 3.6rem);
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  transition: transform .25s, background .25s;
  animation: floatIn 1.2s .7s cubic-bezier(.2,.9,.3,1.2) both;
}
.dice:hover { transform: scale(1.15) rotate(20deg); background: rgba(255,255,255,.25); }
.dice.rolling { animation: diceRoll .6s cubic-bezier(.3,1.4,.4,1); }
@keyframes diceRoll {
  0%   { transform: rotate(0) scale(1); }
  50%  { transform: rotate(360deg) scale(1.35); }
  100% { transform: rotate(720deg) scale(1); }
}

/* ===== VÄDER ===== */
.weather-wrap {
  animation: floatIn 1.2s .8s cubic-bezier(.2,.9,.3,1.2) both;
  max-width: 94vw;
}
.weather-title {
  color: rgba(255,255,255,.85);
  font-size: clamp(.8rem, 2.2vmin, 1.05rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 1.2vmin;
  text-shadow: 0 1px 10px rgba(0,0,0,.4);
}
.weather {
  display: flex;
  gap: 1.2vmin;
  justify-content: center;
  overflow-x: auto;
  padding-bottom: .5vmin;
}
.weather-loading { color: rgba(255,255,255,.6); font-size: .9rem; }
.wday {
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 1.6vmin;
  padding: 1.4vmin 1.6vmin;
  min-width: 11vmin;
  text-align: center;
  box-shadow: 0 6px 24px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.3);
  transition: transform .25s, background .25s;
  flex-shrink: 0;
}
.wday:hover { transform: translateY(-5px); background: rgba(255,255,255,.18); }
.wday.today { background: rgba(255,209,102,.18); border-color: rgba(255,209,102,.55); }
.wname {
  color: rgba(255,255,255,.8);
  font-size: clamp(.6rem, 1.7vmin, .85rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
}
.wicon {
  font-size: clamp(1.4rem, 4.4vmin, 2.4rem);
  line-height: 1.3;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.3));
}
.wtemp { display: flex; justify-content: center; gap: .7vmin; align-items: baseline; }
.wtemp .hi { color: #fff; font-weight: 800; font-size: clamp(.85rem, 2.6vmin, 1.25rem); }
.wtemp .lo { color: rgba(255,255,255,.55); font-size: clamp(.7rem, 2vmin, 1rem); }
.wwind {
  margin-top: .6vmin;
  color: rgba(255,255,255,.85);
  font-size: clamp(.65rem, 1.9vmin, .9rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5vmin;
}
.warrow {
  display: inline-block;
  font-weight: 900;
  color: var(--glow);
  text-shadow: 0 0 8px rgba(255,209,102,.7);
}
.wrain {
  margin-top: .3vmin;
  color: rgba(160, 216, 255, .9);
  font-size: clamp(.6rem, 1.7vmin, .8rem);
}

/* ===== MINISPEL ===== */
.game-btn {
  position: fixed;
  top: 3vmin;
  right: 3vmin;
  z-index: 15;
  font-family: inherit;
  font-size: clamp(.8rem, 2.2vmin, 1.05rem);
  font-weight: 700;
  color: #fff;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 99px;
  padding: 1.2vmin 2.4vmin;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  transition: transform .25s, background .25s;
  animation: floatIn 1.2s .9s cubic-bezier(.2,.9,.3,1.2) both;
}
.game-btn:hover { transform: scale(1.07); background: rgba(255,255,255,.25); }

.game-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(20, 10, 45, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
}
.game-overlay.active { display: flex; }
.game-panel {
  position: relative;
  width: min(92vw, 640px);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: 0 30px 90px rgba(0,0,0,.5);
  animation: floatIn .4s cubic-bezier(.2,.9,.3,1.2) both;
}
.game-hud {
  display: flex;
  align-items: center;
  gap: 2.5vmin;
  padding: 1.6vmin 2.2vmin;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff;
  font-size: clamp(.8rem, 2.2vmin, 1rem);
}
.game-hud b { color: var(--glow); }
.game-close {
  margin-left: auto;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  opacity: .7;
  transition: opacity .2s, transform .2s;
}
.game-close:hover { opacity: 1; transform: scale(1.2); }
canvas#game {
  display: block;
  width: 100%;
  height: min(60vh, 460px);
  background: linear-gradient(180deg, #7b2d8b, #d94f70 45%, #ff8c42 75%, #ffc15e 92%, #f2d59a);
  cursor: pointer;
}
.game-splash {
  position: absolute;
  inset: 0;
  top: auto;
  height: calc(100% - 7vmin);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2vmin;
  text-align: center;
  background: rgba(25, 12, 50, .55);
  color: #fff;
  padding: 3vmin;
}
.game-splash.hidden { display: none; }
.game-splash h3 { font-size: clamp(1.2rem, 4vmin, 1.8rem); }
.game-splash p { font-size: clamp(.8rem, 2.4vmin, 1rem); opacity: .85; line-height: 1.5; }
.game-splash button {
  font-family: inherit;
  font-size: clamp(1rem, 3vmin, 1.3rem);
  font-weight: 800;
  color: #2b1055;
  background: linear-gradient(90deg, #ffd166, #ff8c42);
  border: none;
  border-radius: 99px;
  padding: 1.6vmin 5vmin;
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(255,150,60,.5);
  transition: transform .2s;
}
.game-splash button:hover { transform: scale(1.08); }

.game-menu {
  display: flex;
  gap: 1.8vmin;
  flex-wrap: wrap;
  justify-content: center;
}
.game-splash .game-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6vmin;
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 14px;
  padding: 2vmin 2.4vmin;
  width: clamp(120px, 24vmin, 165px);
  font-family: inherit;
  font-size: clamp(1.6rem, 5vmin, 2.4rem);
  box-shadow: 0 8px 30px rgba(0,0,0,.3);
  cursor: pointer;
  transition: transform .2s, background .2s;
}
.game-splash .game-card:hover { transform: translateY(-5px) scale(1.05); background: rgba(255,255,255,.22); }
.game-card b { font-size: clamp(.85rem, 2.6vmin, 1.05rem); }
.game-card small { font-size: clamp(.6rem, 1.9vmin, .78rem); opacity: .75; font-weight: 400; line-height: 1.3; }

/* ===== INSTÄLLNINGAR ===== */
.settings-btn {
  position: fixed;
  top: 3vmin;
  left: 3vmin;
  z-index: 15;
  font-size: clamp(1rem, 2.8vmin, 1.4rem);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
  width: clamp(2.6rem, 6.4vmin, 3.4rem);
  height: clamp(2.6rem, 6.4vmin, 3.4rem);
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  transition: transform .3s, background .25s;
  animation: floatIn 1.2s 1s cubic-bezier(.2,.9,.3,1.2) both;
}
.settings-btn:hover { transform: rotate(90deg) scale(1.1); background: rgba(255,255,255,.25); }

.settings-panel {
  display: none;
  position: fixed;
  top: calc(3vmin + clamp(2.6rem, 6.4vmin, 3.4rem) + 1.2vmin);
  left: 3vmin;
  z-index: 25;
  flex-direction: column;
  gap: 1.4vmin;
  background: rgba(30, 16, 60, .78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 16px;
  padding: 2.4vmin 2.8vmin;
  color: #fff;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  animation: floatIn .3s cubic-bezier(.2,.9,.3,1.2) both;
  max-width: min(84vw, 340px);
}
.settings-panel.active { display: flex; }
.settings-panel h3 { font-size: clamp(.95rem, 2.6vmin, 1.15rem); }
.settings-panel label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2vmin;
  font-size: clamp(.8rem, 2.2vmin, .95rem);
  color: rgba(255,255,255,.85);
}
.settings-panel input,
.settings-panel select {
  font-family: inherit;
  font-size: clamp(.8rem, 2.2vmin, .95rem);
  color: #fff;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 8px;
  padding: .5em .7em;
  color-scheme: dark;
  max-width: 60%;
}
.settings-panel select option { color: #222; }
.settings-actions { display: flex; gap: 1.2vmin; }
.settings-actions button {
  flex: 1;
  font-family: inherit;
  font-size: clamp(.75rem, 2.1vmin, .9rem);
  font-weight: 700;
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
  color: #fff;
  padding: .6em 1em;
  cursor: pointer;
  transition: transform .2s, background .2s;
}
.settings-actions button:hover { transform: scale(1.05); background: rgba(255,255,255,.22); }
.settings-actions button.primary {
  background: linear-gradient(90deg, #ffd166, #ff8c42);
  color: #2b1055;
  border: none;
}
.settings-note {
  font-size: clamp(.65rem, 1.9vmin, .8rem);
  color: rgba(255,255,255,.6);
  line-height: 1.4;
}
.settings-note.saved { color: #7de8a0; }

/* ===== FIRANDE ===== */
.celebration {
  display: none;
  position: relative;
  z-index: 10;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3vmin;
  text-align: center;
  padding: 4vmin 4vmin 26vh;
}
.celebration.active { display: flex; }
.celebration h2 {
  font-size: clamp(3rem, 14vmin, 9rem);
  font-weight: 900;
  background: linear-gradient(90deg, #ffd166, #ff8c42, #ff5e78, #c86bfa, #ffd166);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbow 3s linear infinite, bounce 1.2s ease-in-out infinite alternate;
  filter: drop-shadow(0 4px 30px rgba(255,150,80,.6));
}
@keyframes rainbow { to { background-position: 300% 0; } }
@keyframes bounce {
  from { transform: scale(1) rotate(-1.5deg); }
  to   { transform: scale(1.07) rotate(1.5deg); }
}
.celebration p {
  color: #fff;
  font-size: clamp(1.1rem, 3.5vmin, 2rem);
  text-shadow: 0 2px 20px rgba(0,0,0,.4);
}
.big-emoji { font-size: clamp(3rem, 10vmin, 6rem); animation: bounce 1s ease-in-out infinite alternate; }
.celebration-sub {
  font-size: clamp(.9rem, 2.6vmin, 1.25rem) !important;
  opacity: .85;
  letter-spacing: .05em;
}
.celebration-countdown .unit { min-width: 13vmin; padding: 2vmin 1.2vmin; }
.celebration-countdown .num { font-size: clamp(1.8rem, 7vmin, 4.2rem); }
.celebration .progress-wrap { animation: none; }

canvas#confetti {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}