/* Forsiden: kofferten med øya, i kveldslys med neon (målbilde: Kilder/maalbilde-tofere.png) */
.skjerm.hjem { padding: 0; overflow: hidden; background: #120c18; animation: none; }
.hjem-scene { position: absolute; }
.hjem-bilde { display: block; width: 100%; height: 100%; }

/* Byggene på øya: foten står på punktet, bildet vokser oppover */
.hjem-bygg { position: absolute; transform: translate(-50%, -84%); border: 0; background: none; padding: 0; cursor: pointer; transform-origin: 50% 84%; }
.hjem-bygg img { display: block; width: 100%; height: auto; filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.45)) saturate(1.05); }
.hjem-bygg-emoji { display: block; font-size: 4vw; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.5)); }
.hjem-bygg.ny { animation: vokser 1.1s var(--fjar) both 0.5s; }
.hjem-bygg.ny::after { content: "✨"; position: absolute; left: 50%; top: 10%; font-size: 2.4vw; transform: translate(-50%, 0); animation: gnist 1.4s ease-out both 0.9s; pointer-events: none; }
@keyframes vokser { 0% { transform: translate(-50%, -84%) scale(0); } 60% { transform: translate(-50%, -84%) scale(1.25, 0.85); } 100% { transform: translate(-50%, -84%) scale(1); } }
@keyframes gnist { 0% { opacity: 0; transform: translate(-50%, 0) scale(0.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -160%) scale(1.6); } }
.hjem-bygg.klem { animation: klemmes 0.45s var(--fjar); }
@keyframes klemmes { 0% { transform: translate(-50%, -84%) scale(1); } 35% { transform: translate(-50%, -84%) scale(1.15, 0.82); } 100% { transform: translate(-50%, -84%) scale(1); } }

/* Krystallgrotten lyser når den er låst opp */
.hjem-grotte { position: absolute; width: 6%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle, rgba(170, 120, 255, 0.85) 0%, rgba(90, 160, 255, 0.45) 35%, transparent 70%); mix-blend-mode: screen; animation: grottelys 2.2s ease-in-out infinite; }
.hjem-grotte.ny { animation: grottelys 2.2s ease-in-out infinite, sprett 0.9s var(--fjar); }
@keyframes grottelys { 50% { transform: translate(-50%, -50%) scale(1.25); filter: brightness(1.4); } }

/* Tomme tomter: et svakt neonpust inviterer til å trykke */
.hjem-tomt { position: absolute; width: 9%; height: 4.6%; transform: translate(-50%, -50%); border: 0; border-radius: 50%; background: transparent; animation: tomtpuls 2.4s ease-in-out infinite; cursor: pointer; }
@keyframes tomtpuls { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 224, 176, 0); } 50% { box-shadow: 0 0 0 4px rgba(34, 224, 176, 0.55), 0 0 22px rgba(34, 224, 176, 0.6), inset 0 0 16px rgba(34, 224, 176, 0.35); } }

/* Squishiene hun har fanget, hoppende på øya */
.hjem-sq { position: absolute; width: 4.2%; aspect-ratio: 1; transform: translate(-50%, -90%); border: 0; background: none; padding: 0; animation: hopp 2.2s ease-in-out infinite; cursor: pointer; }
.hjem-sq.legendarisk { width: 5.2%; filter: drop-shadow(0 0 10px rgba(255, 79, 163, 0.9)); }
.hjem-sq .sq-emoji { font-size: 2vw; }
@keyframes hopp { 0%, 100% { transform: translate(-50%, -90%); } 50% { transform: translate(-50%, -106%); } }
.hjem-sq.klem { animation: klemsq 0.5s var(--fjar); }
@keyframes klemsq { 0% { transform: translate(-50%, -90%) scale(1); } 35% { transform: translate(-50%, -90%) scale(1.35, 0.7); } 100% { transform: translate(-50%, -90%) scale(1); } }

/* Laget over scenen */
.hjem-lag { position: absolute; inset: 0; pointer-events: none; }
.hjem-lag > * { pointer-events: auto; }

.hjem-tittel {
  position: absolute; right: 22px; top: calc(var(--topp) + 14px); font-size: clamp(28px, 3.6vw, 46px); line-height: 1; white-space: nowrap;
  padding: 12px 24px; border-radius: 20px; border: 2px solid transparent;
  background: linear-gradient(180deg, rgba(36, 26, 56, 0.72), rgba(14, 10, 24, 0.72)) padding-box, var(--holo) border-box;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 0 30px rgba(255, 79, 163, 0.45), 0 12px 30px rgba(0, 0, 0, 0.45); text-shadow: 0 0 18px rgba(255, 255, 255, 0.35);
}
.hjem-tittel em { font-style: normal; background: var(--holo); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 10px rgba(255, 79, 163, 0.6)); }

.hjem-tellere { position: absolute; left: 16px; top: calc(var(--topp) + 14px); display: flex; gap: 10px; }
.hjem-teller { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--linje); background: rgba(14, 10, 24, 0.62); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #fff; border-radius: 99px; padding: 6px 18px 6px 8px; font-size: 18px; font-weight: 700; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45); }
.hjem-teller img { width: 38px; height: 38px; object-fit: contain; }
.hjem-teller b { font-family: var(--font-tittel); font-weight: 800; font-size: 26px; }
.hjem-teller small { color: var(--svak); font-weight: 700; }

/* Reisevennen nede til høyre, over bordet */
.hjem-vennhjorne { position: absolute; right: 24px; bottom: calc(var(--bunn) + 118px); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.hjem-venn { position: relative; width: clamp(110px, 12vw, 160px); border: 0; background: none; padding: 0; animation: hopp-venn 2.6s ease-in-out infinite; cursor: pointer; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.5)); }
@keyframes hopp-venn { 50% { transform: translateY(-8px); } }
.hjem-venn.klem { animation: klemvenn 0.5s var(--fjar); }
@keyframes klemvenn { 35% { transform: scale(1.18, 0.82); } }
.hjem-venn-navn { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); background: rgba(14, 10, 24, 0.8); border: 1px solid var(--linje); color: #fff; padding: 3px 14px; border-radius: 99px; font-family: var(--font-tittel); font-weight: 800; font-size: 17px; text-transform: uppercase; white-space: nowrap; }
.hjem-boble { max-width: min(340px, 42vw); }
.hjem-boble.vis { animation: sprett 0.45s var(--fjar); }
.hjem-boble::after { content: ""; position: absolute; right: 44px; bottom: -14px; border: 10px solid transparent; border-top-color: #fff; border-bottom: 0; }

/* Bagasjelappen med neste ferge: holografisk */
.hjem-lapp {
  position: absolute; right: 30px; top: calc(var(--topp) + 104px); width: clamp(150px, 14vw, 182px); padding: 34px 12px 16px; border: 2px solid transparent; cursor: pointer; color: #fff;
  display: grid; justify-items: center; gap: 2px; transform: rotate(4deg); transform-origin: 50% 0;
  background: linear-gradient(170deg, rgba(40, 30, 64, 0.85), rgba(16, 12, 28, 0.9)) padding-box, var(--holo) border-box;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-radius: 18px 18px 24px 24px; box-shadow: 0 0 26px rgba(56, 194, 255, 0.4), 0 16px 30px rgba(0, 0, 0, 0.5); animation: sving 4s ease-in-out infinite;
}
@keyframes sving { 50% { transform: rotate(1deg); } }
.hjem-lapp-hull { position: absolute; top: 10px; width: 16px; height: 16px; border-radius: 50%; background: #0c0a13; box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(255, 255, 255, 0.25); }
.hjem-lapp small { font-family: var(--font-tittel); font-weight: 800; font-size: 15px; color: var(--svak); text-transform: uppercase; letter-spacing: 0.08em; }
.hjem-lapp-tid { font-family: var(--font-tittel); font-size: clamp(38px, 4vw, 50px); font-weight: 800; line-height: 1; color: var(--smor); text-shadow: 0 0 16px rgba(255, 210, 63, 0.6); }
.hjem-lapp-under { font-size: 14px; font-weight: 700; color: var(--svak); text-align: center; }

/* Dagens gave: glødende pakke på bordet */
.hjem-gave { position: absolute; right: 230px; top: calc(var(--topp) + 120px); display: grid; justify-items: center; gap: 2px; border: 0; background: none; color: #fff; cursor: pointer; animation: rist-gave 1.6s ease-in-out infinite; }
.hjem-gave img, .hjem-gave .ikon-emoji { width: 104px; height: 104px; object-fit: contain; font-size: 84px; line-height: 104px; text-align: center; filter: drop-shadow(0 0 22px rgba(255, 210, 63, 0.75)); }
.hjem-gave span:last-child { font-family: var(--font-tittel); font-weight: 800; font-size: 18px; text-transform: uppercase; padding: 4px 12px; border-radius: 99px; background: linear-gradient(135deg, #ffd23f, #ff4fa3); color: #1a1020; box-shadow: 0 0 16px rgba(255, 79, 163, 0.6); }
@keyframes rist-gave { 0%, 100% { transform: rotate(0); } 8% { transform: rotate(-9deg) scale(1.06); } 16% { transform: rotate(8deg) scale(1.06); } 24% { transform: rotate(0); } }

/* Hovedknappene langs bunnen */
.hjem-knapper { position: absolute; left: 50%; bottom: calc(var(--bunn) + 16px); transform: translateX(-50%); display: flex; gap: 12px; width: max-content; max-width: calc(100vw - 24px); }
.hjem-knapper .knapp { white-space: nowrap; font-size: 22px; padding: 12px 18px; min-height: 74px; }
.ikon-emoji { font-size: 1.5em; line-height: 1; }

/* Stående iPad: kofferten øverst, knappene i et rutenett nederst */
.hjem.staende .hjem-tittel { left: 50%; right: auto; transform: translateX(-50%); }
.hjem.staende .hjem-tellere { top: auto; bottom: calc(var(--bunn) + 196px); }
.hjem.staende .hjem-knapper { display: grid; grid-template-columns: 1fr 1fr; width: calc(100vw - 32px); }
.hjem.staende .hjem-lapp { top: auto; bottom: calc(var(--bunn) + 300px); }
.hjem.staende .hjem-gave { right: auto; left: 24px; top: auto; bottom: calc(var(--bunn) + 270px); }
.hjem.staende .hjem-vennhjorne { bottom: calc(var(--bunn) + 196px); right: 210px; }

/* Boba-baren: klistremerke på bordet */
.hjem-boba { position: absolute; right: 214px; bottom: calc(var(--bunn) + 128px); display: grid; justify-items: center; gap: 2px; border: 0; background: none; color: #fff; cursor: pointer; animation: hopp-venn 3s ease-in-out infinite 0.6s; }
.hjem-boba img, .hjem-boba .ikon-emoji { width: 86px; height: 96px; object-fit: contain; font-size: 64px; filter: drop-shadow(0 0 16px rgba(255, 79, 163, 0.6)); }
.hjem-boba span:last-child { font-family: var(--font-tittel); font-weight: 800; font-size: 16px; text-transform: uppercase; padding: 3px 12px; border-radius: 99px; background: rgba(14, 10, 24, 0.8); border: 1px solid rgba(255, 79, 163, 0.6); box-shadow: 0 0 14px rgba(255, 79, 163, 0.45); }
.hjem.staende .hjem-boba { right: auto; left: 150px; bottom: calc(var(--bunn) + 270px); }

/* Plakaten fra Filmstudioet på kinoen */
.hjem-plakat { position: absolute; width: 4.2%; aspect-ratio: 3 / 4; transform: translate(-50%, -50%) rotate(6deg); padding: 3px; border: 0; border-radius: 6px; background: linear-gradient(135deg, #ffd23f, #ff4fa3); box-shadow: 0 0 16px rgba(255, 210, 63, 0.7); cursor: pointer; animation: sving 3s ease-in-out infinite; }
.hjem-plakat img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; display: block; }