* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --deep: #0b3954;
  --sea: #146b8a;
  --seafoam: #1d8aa8;
  --sand: #f4e9d8;
  --coral: #ff6b6b;
  --sun: #ffd166;
  --ok: #4ecb71;
  --text: #eef6f9;
}

html, body { height: 100%; overscroll-behavior: none; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: linear-gradient(180deg, var(--deep) 0%, var(--sea) 60%, var(--seafoam) 100%);
  background-attachment: fixed;
  color: var(--text);
  user-select: none;
  -webkit-user-select: none;
}

#app { max-width: 560px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

/* ---------- Laddskärm ---------- */
.loader {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--deep) 0%, var(--sea) 60%, var(--seafoam) 100%);
  transition: opacity .45s ease;
}
.loader.done { opacity: 0; pointer-events: none; }
.loader-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px; text-align: center; }
.loader-seal {
  width: 46vw; width: min(46vw, 176px); aspect-ratio: 1;
  border-radius: 24px; overflow: hidden;
  border: 4px solid rgba(255,255,255,.85);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.15);
  animation: loader-bob 1.7s ease-in-out infinite;
}
.loader-seal img { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes loader-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.loader-bar {
  width: 72vw; width: min(72vw, 280px); height: 12px; border-radius: 999px; overflow: hidden;
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.2);
}
.loader-fill {
  height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, var(--sun), var(--ok));
  transition: width .25s ease;
}
.loader-msg { opacity: .85; font-size: .95rem; min-height: 1.2em; }

.view { flex: 1; display: flex; flex-direction: column; padding: 12px 14px calc(78px + env(safe-area-inset-bottom)); }
.view.hidden, .hidden { display: none !important; }

h1 { font-size: 2rem; }
h2 { font-size: 1.3rem; }

/* ---------- Setup ---------- */
#view-setup { justify-content: center; padding-bottom: 12px; }
.setup-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 20px;
  padding: 24px 20px;
  display: flex; flex-direction: column; gap: 14px;
  text-align: center;
  backdrop-filter: blur(6px);
}
.logo-seal { width: 140px; height: 110px; margin: 0 auto; }
.logo-seal svg, .seal-stage svg { width: 100%; height: 100%; }
.tagline { opacity: .85; }
label { text-align: left; font-size: .9rem; opacity: .9; display: flex; flex-direction: column; gap: 6px; }
input[type=text], input[type=password], input[type=email] {
  width: 100%;
  padding: 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.2); color: var(--text); font-size: 1rem; outline: none;
}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus { border-color: var(--sun); }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 42px; width: 100%; }
.pw-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: none; line-height: 1; color: var(--text);
  padding: 8px; cursor: pointer; opacity: .75;
  display: flex; align-items: center; justify-content: center;
}
.pw-toggle:active { opacity: .5; }
.pw-toggle svg { display: block; }
.color-row { display: flex; gap: 12px; justify-content: center; }
.color-btn {
  width: 46px; height: 46px; border-radius: 50%; border: 3px solid transparent;
  background: var(--c); cursor: pointer;
}
.color-btn.selected { border-color: var(--sun); box-shadow: 0 0 0 3px rgba(255,209,102,.3); }

.btn {
  border: none; border-radius: 14px; padding: 12px 16px; font-size: 1rem; font-weight: 600;
  background: rgba(255,255,255,.15); color: var(--text); cursor: pointer;
  transition: transform .08s;
}
.btn:active { transform: scale(.96); }
.btn.primary { background: var(--sun); color: #4a3200; }
.btn.big { padding: 15px; font-size: 1.1rem; }
.btn.small { padding: 8px 12px; font-size: .85rem; }
.error { color: #ffb3b3; font-size: .9rem; min-height: 1.2em; }
/* Honeypot: helt dolt för människor, men syns i DOM så bottar fyller i det */
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---------- Topbar ---------- */
/* Höger padding lämnar plats åt den fasta inställningsknappen (⚙️) uppe till
   höger. Raden får wrappa (i stället för att klämmas ihop eller hamna under
   knappen) på smala mobilskärmar där sälnamn + nivå + fiskar + mynt inte får
   plats på en rad – då hamnar topbar-right bara på en egen rad under, långt
   ifrån knappens fasta position i stället för att krocka med den. */
.topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; row-gap: 6px; padding: 4px 60px 10px 2px; }
.game-topbar { padding-right: 2px; } /* inställningsknappen är dold under spel */
.seal-title { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; font-weight: 700; min-width: 0; flex: 0 1 auto; }
/* Bara namnet krymper/klipps med "…" om det är för långt – pennan och
   badgarna bredvid behåller alltid sin fulla storlek. */
#home-sealname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
.level-badge, .stage-badge, .rename-btn { flex-shrink: 0; }
.level-badge { font-size: .75rem; background: var(--sun); color: #4a3200; padding: 3px 9px; border-radius: 999px; font-weight: 600; }
.stage-badge { font-size: .72rem; opacity: .85; font-weight: 600; }
.fish-counter { font-size: 1.05rem; background: rgba(0,0,0,.25); padding: 6px 12px; border-radius: 999px; white-space: nowrap; }

/* ---------- XP ---------- */
.xp-bar { position: relative; height: 18px; border-radius: 999px; background: rgba(0,0,0,.3); overflow: hidden; margin-bottom: 10px; }
.xp-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #7be0ad, var(--ok)); border-radius: 999px; transition: width .6s; }
.xp-text { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; font-size: .7rem; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.5); }

/* ---------- Ocean / säl ---------- */
.ocean {
  position: relative; flex: 1; min-height: 220px; border-radius: 20px; overflow: hidden;
  background: linear-gradient(180deg, #7fc8e8 0%, #3b9ec4 30%, #146b8a 100%);
  display: flex; align-items: center; justify-content: center;
}
.wave {
  position: absolute; top: 24%; left: -50%; width: 200%; height: 14px; opacity: .35;
  background: radial-gradient(circle at 10px -4px, transparent 12px, #fff 13px, transparent 14px) repeat-x;
  background-size: 36px 14px;
  animation: waves 7s linear infinite;
}
@keyframes waves { from { transform: translateX(0); } to { transform: translateX(36px); } }
.seal-stage { width: 64vw; width: min(64vw, 300px); height: 50vw; height: min(50vw, 240px); animation: bob 3.4s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-12px) rotate(1.5deg); } }
.speech {
  /* Ligger under "Upp till ytan"-länken, som tagit platsen längst upp i mitten */
  position: absolute; top: 56px; left: 50%; transform: translateX(-50%);
  background: rgba(255,255,255,.92); color: #143; padding: 8px 14px; border-radius: 14px;
  font-weight: 600; font-size: .9rem; opacity: 0; transition: opacity .3s; pointer-events: none;
  max-width: 85%; text-align: center;
}
.speech.show { opacity: 1; }

/* Natt när sälen sover */
.ocean::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,12,48,.55), rgba(8,12,48,.35));
  opacity: 0; transition: opacity 1.2s;
}
.ocean.night::after { opacity: 1; }
.ocean .moon {
  position: absolute; top: 10px; right: 14px; font-size: 2rem; z-index: 2;
  opacity: 0; transition: opacity 1.2s; pointer-events: none;
}
.ocean.night .moon { opacity: 1; }
.ocean.night .seal-stage { animation: none; }
.zzz { animation: zzz 2.4s ease-in-out infinite; }
@keyframes zzz { 0%,100% { opacity: .4; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-6px); } }

/* Garderobsknapp i havet – tydlig pill med etikett. Sitter nere till vänster
   sedan "Upp till ytan"-länken tog översta raden (de krockade uppe i hörnet). */
.wardrobe-btn {
  position: absolute; bottom: 10px; left: 10px; z-index: 3;
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px 7px 11px; border-radius: 999px;
  border: 2px solid rgba(255,255,255,.6);
  background: rgba(8,30,45,.55); color: #fff;
  font-size: 1.4rem; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.wardrobe-btn span { font-size: .82rem; font-weight: 700; letter-spacing: .02em; }
.wardrobe-btn:active { transform: scale(.94); }

/* Klickbara topplisterader → spelardetaljer */
.top-row { cursor: pointer; }
.top-row:active { transform: scale(.99); }
.pm-sub { text-align: center; opacity: .85; font-size: .9rem; margin: -4px 0 4px; }
.pm-medals { display: flex; flex-direction: column; gap: 8px; }
.pm-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, .07); border-radius: 12px; padding: 8px 12px;
}
.pm-medal { font-size: 1.5rem; }
.pm-game { font-weight: 700; flex: 1; }
.pm-place { font-size: .82rem; opacity: .85; white-space: nowrap; }

/* Medaljer som flyter runt sälen i hemvattnet */
.medals { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; pointer-events: none; }
.medal-float {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 2px;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap; line-height: 1;
  background: rgba(6, 28, 42, .55); border: 1px solid rgba(255, 255, 255, .38);
  box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
  font-size: 1.05rem;
  animation: medal-bob var(--dur, 4s) ease-in-out var(--delay, 0s) infinite;
}
.medal-float .m-game { font-size: .9rem; }
@keyframes medal-bob {
  0%, 100% { transform: translate(-50%, -50%) rotate(-4deg); }
  50% { transform: translate(calc(-50% + 4px), calc(-50% - 8px)) rotate(4deg); }
}

/* Liten pennknapp för att byta sälens namn */
.rename-btn {
  border: none; padding: 0; cursor: pointer;
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.18); color: var(--text); font-size: .95rem;
}
.rename-btn:active { transform: scale(.9); }

/* Nivå-firande i havet */
.levelup-spark {
  position: absolute; bottom: -8%; z-index: 4; pointer-events: none;
  animation: levelup-rise 2.6s ease-in forwards;
}
@keyframes levelup-rise {
  0% { transform: translateY(0) scale(.6); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateY(-320px) scale(1.15) rotate(20deg); opacity: 0; }
}
.levelup-banner {
  position: absolute; top: 44%; left: 50%; z-index: 5; pointer-events: none;
  transform: translate(-50%, -50%); white-space: nowrap;
  font-weight: 800; font-size: 1.5rem; color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.5), 0 0 16px var(--sun);
  animation: levelup-pop 2.6s ease-out forwards;
}
@keyframes levelup-pop {
  0% { transform: translate(-50%,-50%) scale(.4); opacity: 0; }
  15% { transform: translate(-50%,-50%) scale(1.15); opacity: 1; }
  30% { transform: translate(-50%,-50%) scale(1); }
  80% { opacity: 1; }
  100% { transform: translate(-50%,-64%) scale(1); opacity: 0; }
}

/* Hjärtan när man klappar */
.heart {
  position: absolute; z-index: 4; font-size: 1.7rem; pointer-events: none;
  animation: heartfloat 1.7s ease-out forwards;
}
@keyframes heartfloat {
  0% { opacity: 0; transform: translateY(12px) scale(.3); }
  25% { opacity: 1; transform: translateY(-10px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-110px) scale(1.35) rotate(12deg); }
}

/* Fisken som sälen smaskar i sig */
.feed-fish {
  position: absolute; z-index: 4; left: 50%; top: 8%; font-size: 2.2rem; pointer-events: none;
  transform: translateX(-50%);
  animation: feedfish 1s ease-in forwards;
}
@keyframes feedfish {
  0% { opacity: 0; top: 8%; transform: translateX(-50%) rotate(40deg); }
  15% { opacity: 1; }
  85% { opacity: 1; top: 44%; transform: translateX(-50%) rotate(-15deg) scale(.8); }
  100% { opacity: 0; top: 47%; transform: translateX(-50%) rotate(-20deg) scale(.3); }
}
.seal-stage { cursor: pointer; }
.seal-stage.poke { animation: poke .5s ease; }
@keyframes poke {
  0%, 100% { transform: scale(1) rotate(0); }
  25% { transform: scale(1.08, .93) rotate(-4deg); }
  55% { transform: scale(.95, 1.06) rotate(4deg); }
  80% { transform: scale(1.03, .98) rotate(-2deg); }
}
.seal-stage.chomp { animation: chomp .9s ease .55s; }
@keyframes chomp {
  0%, 100% { transform: scale(1); }
  20% { transform: scale(1.07, .92); }
  45% { transform: scale(.95, 1.06); }
  70% { transform: scale(1.05, .95); }
}

/* Garderob */
.modal {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0, 10, 20, .6); backdrop-filter: blur(3px);
}
.modal-card {
  width: 100%; max-width: 560px; max-height: 82vh; max-height: 82dvh; overflow-y: auto;
  background: linear-gradient(180deg, #10475f, #0b3954);
  border-radius: 22px 22px 0 0; padding: 20px 18px calc(18px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 12px;
}
.modal-x {
  position: sticky; top: 2px; align-self: flex-end; z-index: 7;
  width: 40px; height: 40px; margin: 0 0 -40px 0; padding: 0;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.3);
  background: rgba(7,34,51,.85); color: var(--text); font-size: 1.1rem; cursor: pointer;
}
.modal-x:active { transform: scale(.92); }

/* Bekräftelsedialog (avsluta spel, köp hos Berta m.m.) */
.confirm-modal { z-index: 60; align-items: center; }
/* Väskan nås från bottennaven, som syns även när sälen står på isflaket (ytan
   ligger på z-index 50, naven på 52) – därför måste den här modalen ligga över
   ytan, annars öppnades den osynligt bakom scenen. Under butikerna (55) så att
   "Till fiskaffären"-länken i väskan fortfarande hamnar överst. */
#inventory-modal { z-index: 54; }
/* Dagliga bonusen kan öppnas medan bottennaven syns (t.ex. på min säl-vyn) –
   samma problem som väskan ovan: naven (52) låg över modalen (40) och gömde
   "Hämta dagens bonus"-knappen bakom sig. */
#daily-modal { z-index: 54; }
/* Samma sak för garderoben, som precis som väskan och bonusen nås via
   bottennaven och annars döljs bakom den. */
#wardrobe { z-index: 54; }
/* Samma sak för inställningspanelen (kugghjulet) – öppnas också medan
   bottennaven syns och gömdes annars bakom den. */
#sound-panel { z-index: 54; }
/* Samma sak för spelarkortet (topplistan), namnbytet och spöväljaren –
   alla nås medan bottennaven syns och gömdes annars bakom den. */
#player-modal { z-index: 54; }
#rename { z-index: 54; }
#metspo-modal { z-index: 54; }
/* Och rutan "om spelet", som öppnas från spellistan med bottennaven synlig –
   utan detta låg naven (52) över modalen (40) och gömde Spela-knappen. */
#game-info-modal { z-index: 54; }
/* Bara #wardrobe-list scrollar (se dess regler) – då kan sälavataren vara ett
   vanligt fast "titelblock" i stället för en sticky-hack som annars la sig
   ovanpå och gömde prylknapparna längst upp när listan scrollades. */
#wardrobe .modal-card { overflow: hidden; }
#wardrobe .modal-card > *:not(#wardrobe-list) { flex-shrink: 0; }
.confirm-card {
  width: calc(100% - 40px); max-width: 380px; border-radius: 22px;
  text-align: center; align-items: center;
}
.confirm-card h2 { margin: 0; }
.confirm-actions { display: flex; gap: 10px; width: 100%; }
.confirm-actions .btn { flex: 1; }
.wardrobe-seal {
  width: 230px; height: 195px; margin: 0 auto;
  background: radial-gradient(circle at 50% 60%, rgba(127,200,232,.45), #10475f 78%);
  border-radius: 0 0 20px 20px;
  box-shadow: 0 6px 18px rgba(4, 20, 32, .45);
}
.hunger-warn { text-align: center; margin: -4px 0 6px; }
/* Varningarna är tomma för det mesta – då ska de inte ta upp plats heller. */
.hunger-warn:empty { display: none; }
.wardrobe-seal svg { width: 100%; height: 100%; }
/* Enda delen som scrollar i garderoben, se #wardrobe .modal-card ovan. */
.wardrobe-list { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 0; }
.wardrobe-empty { text-align: center; opacity: .75; padding: 20px 10px; }
.wear-row {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px; padding: 12px 14px; color: var(--text); font-size: 1rem; cursor: pointer;
}
.wear-row .wear-emoji { font-size: 1.7rem; width: 32px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wear-row .wear-emoji svg { display: block; }
.wear-row .wear-name { flex: 1; font-weight: 600; }
.wear-row .wear-state { font-size: .85rem; font-weight: 700; opacity: .85; }
.wear-row.on { border-color: var(--sun); background: rgba(255,209,102,.15); }
.wear-row.on .wear-state { color: var(--sun); }
.wear-row.locked { opacity: .45; cursor: default; }

/* ---------- Statmätare ---------- */
/* Fyra mätare (mätt/glad/pigg/ren). På en telefon blir fyra kolumner för
   trångt för texten, så då läggs de i ett 2×2-rutnät i stället. */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0; }
@media (max-width: 440px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { min-width: 0; font-size: .78rem; display: flex; flex-direction: column; gap: 4px; }
.meter { height: 10px; background: rgba(0,0,0,.3); border-radius: 999px; overflow: hidden; }
.meter > div { height: 100%; border-radius: 999px; background: var(--ok); transition: width .5s, background .5s; }
.meter > div.low { background: var(--coral); }
.meter > div.mid { background: var(--sun); }

/* ---------- Handlingsknappar ---------- */
.actions { display: flex; gap: 10px; }
.btn.action {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 1.6rem; padding: 10px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
}
.btn.action span { font-size: .8rem; }
.btn.action:disabled { opacity: .45; }

/* ---------- Spellista ---------- */
.hint { font-size: .88rem; opacity: .85; margin-bottom: 14px; line-height: 1.45; }
/* Korten visar bara ikon och titel (plus rekordet) – hela beskrivningen finns
   kvar i DOM:en men göms, och visas i #game-info-modal när man trycker på
   ℹ️-knappen. Ett spel per rad. */
.game-list { display: flex; flex-direction: column; gap: 10px; }
.game-card {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px; padding: 10px 10px 10px 12px; color: var(--text); cursor: pointer;
}
.game-card:active { transform: scale(.98); }
.game-card { position: relative; }
.game-trophy { position: absolute; top: -8px; left: -6px; font-size: 1.4rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.game-emoji { font-size: 2rem; line-height: 1; }
.game-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.game-info b { font-size: 1rem; }
/* Beskrivningen bor kvar här (en enda källa till texten) men syns bara i rutan */
.game-info small { display: none; }
.game-record { flex: 0 0 auto; font-size: .82rem; opacity: .8; white-space: nowrap; }
/* ℹ️-knappen är en egen kolumn i raden och 44×44 stor – tummen ska träffa den
   utan att råka starta spelet (26 px var alldeles för litet). */
.game-info-btn {
  flex: 0 0 auto; width: 44px; height: 44px;
  border-radius: 12px; padding: 0; cursor: pointer; font-size: 1.15rem; line-height: 1;
  border: 1px solid rgba(255,255,255,.28); background: rgba(3,25,40,.45); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.game-info-btn:active { transform: scale(.9); background: rgba(255,209,102,.45); }
/* Rutan med hela beskrivningen */
.gi-card { text-align: center; }
.gi-emoji { font-size: 3rem; line-height: 1; }
.gi-text { font-size: .9rem; line-height: 1.5; opacity: .9; text-align: left; }

/* ---------- Aktivt spel ---------- */
#view-play { padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); position: relative; }
/* pausknappar/HUD ligger ovanför pausöverlägget */
.game-topbar { position: relative; z-index: 20; }
.pause-overlay {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 20, 32, .55); backdrop-filter: blur(2px);
}
.pause-box {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  background: linear-gradient(180deg, #10475f, #0b3954);
  padding: 26px 30px; border-radius: 20px; box-shadow: 0 8px 26px rgba(0, 0, 0, .4);
}
.pause-title { font-size: 1.5rem; font-weight: 800; }
.game-topbar { gap: 10px; }
#play-hud { font-weight: 700; font-size: 1.05rem; display: flex; gap: 16px; }
.play-best {
  font-size: .72rem; font-weight: 700; text-align: center; line-height: 1.15;
  background: rgba(0,0,0,.25); padding: 5px 10px; border-radius: 10px; white-space: nowrap;
}
#play-area { flex: 1; position: relative; border-radius: 16px; overflow: hidden; touch-action: none; }
#play-area canvas { display: block; width: 100%; height: 100%; }

/* ---------- Säläventyret (plattformsspel) ---------- */
/* Breda spel: appen är annars låst till 560 px, men ett plattformsspel vill ha
   hela skärmens bredd – särskilt i liggande läge. Klassen sätts bara på body
   medan ett spel med `wide: true` faktiskt spelas (se startGame i app.js), så
   resten av appen ser precis likadan ut som förut. */
/* Höjden måste vara BESTÄMD (inte bara min-height), annars kan canvasens
   `height: 100%` inte lösas ut – då faller den tillbaka på sitt eget
   bildförhållande, växer förbi skärmkanten och drar med sig hela #app. */
body.play-wide #app { max-width: none; height: 100vh; overflow: hidden; }
body.play-wide #view-play { padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); min-height: 0; }
/* min-height: 0 – utan den sätter flexboxens automatiska minsta höjd golvet
   vid canvasens egen (gamla) höjd, så spelytan aldrig kan krympa tillbaka. */
body.play-wide #play-area { border-radius: 10px; min-height: 0; }

/* Styrkorset nere till vänster och hoppknappen nere till höger. Behållaren
   släpper igenom tryck (pointer-events: none) så bara knapparna fångar dem. */
.plat-ui {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  display: flex; align-items: flex-end; justify-content: space-between;
  pointer-events: none;
}
/* Bara vänster och höger – sälen hoppar med hoppknappen, så upp/ner behövs
   inte. Två stora ytor är mycket lättare att träffa med tummen än ett
   styrkors med små rutor. */
.plat-pad { display: flex; align-items: flex-end; pointer-events: auto; }
.plat-pad > * + * { margin-left: 12px; }
.plat-key {
  width: 100px; height: 100px;
  border: 2px solid rgba(255,255,255,.34); background: rgba(7,34,51,.34);
  color: #fff; font-size: 2.2rem; font-weight: 800; line-height: 1;
  border-radius: 20px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.plat-key:active, .plat-jump:active, .plat-shoot:active { background: rgba(255,209,102,.5); transform: scale(.95); }
/* Hopp- och skjutknapp sitter ihop nere till höger. OBS: får inte heta
   .plat-right – det är högerknappen, och den slutade fungera helt när den
   ärvde pointer-events: none härifrån. */
.plat-actions { display: flex; align-items: flex-end; pointer-events: none; }
.plat-actions > * + * { margin-left: 10px; }
.plat-shoot {
  pointer-events: auto;
  width: 74px; height: 74px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.38); background: rgba(7,34,51,.34);
  color: #fff; font-size: 1.5rem; font-weight: 800; cursor: pointer; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.plat-shoot span { font-size: .72rem; font-weight: 700; opacity: .9; margin-top: -2px; }
.plat-jump {
  pointer-events: auto;
  width: 112px; height: 112px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.38); background: rgba(7,34,51,.34);
  color: #fff; font-size: 2.4rem; font-weight: 800; cursor: pointer; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.plat-jump span { font-size: .72rem; font-weight: 700; opacity: .85; margin-top: -4px; }
/* Låg, bred bild (liggande telefon): mindre kontroller så de inte skymmer banan */
@media (max-height: 480px) {
  .plat-key { width: 86px; height: 86px; font-size: 1.9rem; border-radius: 18px; }
  .plat-jump { width: 92px; height: 92px; font-size: 1.9rem; }
  .plat-shoot { width: 62px; height: 62px; font-size: 1.2rem; }
}

/* Tipset om att vrida telefonen – visas bara när skärmen är högre än bred */
.plat-rotate {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 9;
  display: flex; align-items: center; justify-content: center; padding: 18px;
  background: rgba(4, 20, 32, .86);
}
.plat-rotate-box {
  max-width: 320px; text-align: center;
  background: linear-gradient(180deg, #10475f, #0b3954);
  border: 2px solid rgba(255,209,102,.5); border-radius: 20px; padding: 22px 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.plat-rotate-box b { display: block; font-size: 1.25rem; margin-bottom: 6px; }
.plat-rotate-box p { font-size: .85rem; opacity: .85; margin-bottom: 16px; }
.plat-rotate-icon { font-size: 2.6rem; animation: plat-turn 2.2s ease-in-out infinite; }
.plat-rotate-btns { display: flex; justify-content: center; }
.plat-rotate-btns > * + * { margin-left: 10px; }

/* Flygarsälen: gas/broms till vänster, upp/ner till höger. Knapparna ligger
   PÅ instrumentbrädan som spelet ritar i nederkanten av duken (flygare.js
   sätter höjden här så den matchar bandet exakt), så de aldrig skymmer
   luftrummet man flyger i. Vridtipset återanvänder .plat-rotate ovan. */
.fly-ui {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; align-items: stretch; justify-content: space-between;
  padding: 5px 8px; pointer-events: none;
}
/* Behållarna släpper igenom tryck (pointer-events: none ovan) – bara knapparna
   fångar dem. OBS: sätt aldrig pointer-events: none på en klass som en knapp
   också bär, det gjorde en gång hela högerknappen i Säläventyret död. */
.fly-side { display: flex; align-items: stretch; pointer-events: auto; }
.fly-side > * + * { margin-left: 8px; }
.fly-key {
  width: 76px; height: 100%; min-height: 42px;
  border: 2px solid rgba(255,255,255,.32); background: rgba(10,26,38,.5);
  color: #fff; font-size: 1.5rem; font-weight: 800; line-height: 1;
  border-radius: 12px; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.fly-key span { font-size: .6rem; font-weight: 700; opacity: .85; margin-top: 2px; letter-spacing: .04em; }
.fly-key:active { background: rgba(255,209,102,.5); transform: scale(.96); }
@media (max-width: 700px) {
  .fly-key { width: 60px; font-size: 1.25rem; }
  .fly-key span { font-size: .54rem; }
}
@keyframes plat-turn {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-90deg); }
}

/* ---------- Sälmania (cykelbanorna) ---------- */
/* Knapparna återanvänder .fly-ui/.fly-key ovan. Trampknappen är den man
   håller nästan hela tiden, så den får grön ton och lite extra bredd. */
.mania-ui .mania-gas { background: rgba(26,92,66,.62); border-color: rgba(122,230,170,.5); width: 92px; }
.mania-ui .mania-gas:active { background: rgba(122,230,170,.55); }
/* Knycken är trialbanornas viktigaste knapp – den lyfter ekipaget över hindret
   – så den får egen färg och sitter mellan bromsen och trampet. */
.mania-ui .mania-hop { background: rgba(92,66,26,.6); border-color: rgba(255,209,102,.55); }
.mania-ui .mania-hop:active { background: rgba(255,209,102,.55); }
@media (max-width: 700px) {
  .mania-ui .mania-gas { width: 74px; }
  .mania-ui .fly-key { width: 54px; }
}

/* Banskylten: "Bana klar!" och "Aj!" mitt i bilden, utan att ta emot tryck. */
.mania-banner {
  position: absolute; left: 0; right: 0; top: 18%; z-index: 7;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  pointer-events: none; text-align: center; text-shadow: 0 2px 10px rgba(0,0,0,.65);
}
.mania-banner.hidden { display: none; }
.mania-banner b { font-size: 1.5rem; font-weight: 800; color: #ffd166; }
.mania-banner span { font-size: .9rem; font-weight: 600; color: #eaf6ff; opacity: .92; }
.mania-banner.bad b { color: #ff8fa8; }
.mania-banner.good b { color: #8ef0b4; }

/* Sälrally: två enaxliga joystickar i stället för fyra knappar – lättare att
   träffa med tummen än att sikta på en specifik knapp. Vänster joystick
   sladdar bara i sidled (styrning), höger bara i höjdled (gas/broms).
   Vapen-/turboknappen sitter BREDVID sin joystick (rad i stället för kolumn),
   i det yttre hörnet – joysticken själv hamnar då närmare skärmens mitt, där
   tummen naturligt vilar, och turbo/vapen tar det yttersta hörnet. */
.rally-ui { justify-content: space-between; align-items: flex-end; }
.rally-side-right, .rally-side-left { pointer-events: none; display: flex; flex-direction: row; align-items: flex-end; gap: 10px; }
.rally-turbo {
  pointer-events: auto;
  width: 88px; height: 88px; border-radius: 50%;
  border: 2px solid rgba(255,209,102,.6); background: rgba(255,138,61,.45);
  color: #fff; font-size: 1.55rem; font-weight: 800; line-height: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; cursor: pointer;
}
.rally-turbo span { font-size: .56rem; font-weight: 700; opacity: .9; margin-top: 1px; letter-spacing: .03em; }
.rally-turbo:active { background: rgba(255,209,102,.65); transform: scale(.94); }
/* Vapenknappen: samma runda form som turbon men i en kall lila/blå ton – och
   döljs helt (via .hidden, tvingas fram med !important i base.css) tills man
   faktiskt bär ett vapen. */
.rally-item {
  pointer-events: auto;
  width: 88px; height: 88px; border-radius: 50%;
  border: 2px solid rgba(190,150,255,.6); background: rgba(90,50,140,.5);
  color: #fff; font-size: 1.7rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; cursor: pointer;
}
.rally-item:active { background: rgba(190,150,255,.55); transform: scale(.94); }
.rally-joy {
  pointer-events: auto; position: relative;
  width: 156px; height: 156px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3); background: rgba(10,26,38,.45);
  display: flex; align-items: center; justify-content: center;
  touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; cursor: pointer;
}
.rally-joy-knob {
  width: 82px; height: 82px; border-radius: 50%;
  background: rgba(255,255,255,.22); border: 2px solid rgba(255,255,255,.55);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; will-change: transform; pointer-events: none;
}
.rally-joy.dragging .rally-joy-knob { background: rgba(255,209,102,.45); border-color: rgba(255,209,102,.8); }
@media (max-width: 700px) {
  .rally-turbo, .rally-item { width: 70px; height: 70px; }
  .rally-turbo { font-size: 1.25rem; }
  .rally-turbo span { font-size: .46rem; }
  .rally-item { font-size: 1.4rem; }
  .rally-joy { width: 128px; height: 128px; }
  .rally-joy-knob { width: 66px; height: 66px; font-size: 1.4rem; }
}
@media (max-height: 480px) {
  .rally-turbo, .rally-item { width: 58px; height: 58px; }
  .rally-turbo { font-size: 1.05rem; }
  .rally-turbo span { font-size: .4rem; }
  .rally-item { font-size: 1.2rem; }
  .rally-joy { width: 108px; height: 108px; }
  .rally-joy-knob { width: 56px; height: 56px; font-size: 1.2rem; }
}

/* Fordonsval innan första banan – återanvänder samma mörka ruta som
   vridtipset (.plat-rotate) men med ett rutnät av valbara bilkort. */
.rally-pick {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center; padding: 18px;
  background: rgba(4, 20, 32, .9); overflow-y: auto;
}
.rally-pick-box { max-width: 640px; text-align: center; }
.rally-pick-box h3 { margin-bottom: 10px; font-size: 1.2rem; }
/* Alltid en fast 2×2-grid – bredare kort ger färre radbrytningar i texten
   än auto-fit gjorde (som klämde in 3 smala kort på en rad ibland), vilket
   håller hela skärmen kortare med sex staplar per kort. */
.rally-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rally-card {
  background: linear-gradient(180deg, #10475f, #0b3954);
  border: 2px solid rgba(255,255,255,.25); border-radius: 14px; padding: 10px 10px 8px;
  color: #fff; text-align: center; cursor: pointer;
}
.rally-card:active, .rally-card:hover { border-color: rgba(255,209,102,.7); }
.rally-card-emoji { font-size: 1.7rem; margin-bottom: 2px; }
.rally-card b { display: block; margin-bottom: 2px; font-size: .92rem; }
.rally-card small { display: block; opacity: .8; font-size: .68rem; margin-bottom: 6px; min-height: 2.1em; line-height: 1.25; }
.rally-bar { display: flex; align-items: center; gap: 6px; font-size: .64rem; margin-top: 3px; text-align: left; }
.rally-bar span { width: 34px; flex: none; opacity: .85; }
.rally-bar { background: rgba(0,0,0,.3); border-radius: 6px; padding: 1px 6px 1px 2px; }
.rally-bar i { display: block; height: 5px; border-radius: 4px; background: #ffd166; }
@media (max-height: 480px) {
  .rally-pick-box h3 { display: none; }
  .rally-card { padding: 6px 8px 6px; }
  .rally-card-emoji { font-size: 1.3rem; }
  .rally-card small { min-height: 0; margin-bottom: 3px; }
}

/* Sälförsvaret: byggmeny längst ner */
.td-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; gap: 6px; padding: 6px calc(6px) calc(6px + env(safe-area-inset-bottom));
  background: rgba(7,34,51,.6); backdrop-filter: blur(4px);
}
.td-bar button {
  flex: 1; border: 2px solid rgba(255,255,255,.2); border-radius: 12px;
  background: rgba(255,255,255,.08); color: var(--text); cursor: pointer;
  padding: 6px 2px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: .72rem; font-weight: 700; touch-action: manipulation;
}
.td-bar button .td-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(0,0,0,.25); }
.td-bar button.sel { border-color: var(--sun); background: rgba(255,209,102,.18); }
.td-bar button.poor { opacity: .4; }

/* Isfiske */
.fiske-wrap {
  height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #cfeefb, #8fc9e3); border-radius: 16px;
}
.fiske-wrap.ouch { animation: ouch .3s; }
@keyframes ouch { 0%,100% { filter: none; } 50% { filter: sepia(1) hue-rotate(-50deg) saturate(3); } }
.fiske-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  width: 92%; width: min(92%, 420px);
}
.fiske-hole {
  aspect-ratio: 1; border-radius: 50%; border: none; cursor: pointer;
  background: radial-gradient(circle at 50% 42%, #0b3954 0%, #10475f 55%, #dff1fa 62%, #eef7fb 100%);
  overflow: hidden; position: relative; touch-action: manipulation;
}
.fiske-critter {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center;
  font-size: 9vw; font-size: clamp(2rem, 9vw, 3rem);
  transform: translateY(75%); transition: transform .16s ease-out;
  pointer-events: none;
}
.fiske-hole.up .fiske-critter { transform: translateY(4%); }
.fiske-hole.gold .fiske-critter { filter: drop-shadow(0 0 8px #ffd166); }
.fiske-critter.caught { transform: translateY(4%) scale(1.5) !important; opacity: 0; transition: all .25s; }

/* Sälsimon */
.simon-wrap {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 16px;
  background: linear-gradient(180deg, #0b3954, #10475f); border-radius: 16px;
}
.simon-msg { font-size: 1.25rem; font-weight: 700; min-height: 1.6em; flex-shrink: 0; }
/* Kvadratiskt rutnät som krymper när utrymmet tryter så att det
   alltid ryms med luft under – plattorna fyller sina celler */
.simon-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 14px;
  aspect-ratio: 1; height: 400px; max-height: 100%; max-width: 100%;
  flex: 0 1 auto; min-height: 0;
}
.simon-grid.watching { pointer-events: none; }
.simon-pad {
  border-radius: 20px; border: none; cursor: pointer;
  font-size: 13vw; font-size: clamp(2.6rem, 13vw, 4rem); opacity: .5;
  transition: opacity .12s, transform .12s, box-shadow .12s;
  touch-action: manipulation;
}
.simon-pad.blue   { background: #2f6fde; }
.simon-pad.red    { background: #d64545; }
.simon-pad.yellow { background: #e8b93a; }
.simon-pad.green  { background: #3aa860; }
.simon-pad.lit { opacity: 1; transform: scale(1.06); box-shadow: 0 0 26px rgba(255,255,255,.75); }

/* Memory */
.memory-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 8px; height: 100%; align-content: center; }
.memory-card {
  aspect-ratio: 3/4; border-radius: 12px; border: none; font-size: 2rem; cursor: pointer;
  background: linear-gradient(160deg, #1d8aa8, #0b3954);
  border: 2px solid rgba(255,255,255,.25);
  display: grid; place-items: center; color: transparent;
  transition: transform .25s, background .25s;
}
.memory-card.open { background: var(--sand); color: #000; transform: rotateY(180deg); }
.memory-card.done { background: var(--ok); color: #000; opacity: .75; }

/* ---------- Resultat ---------- */
#view-result { justify-content: center; }
.result-rows { display: flex; flex-direction: column; gap: 8px; font-size: 1.05rem; }
.result-rows .row { display: flex; justify-content: space-between; background: rgba(0,0,0,.2); padding: 10px 14px; border-radius: 12px; }
.levelup { font-size: 1.3rem; font-weight: 800; color: var(--sun); animation: pop .5s ease; }
@keyframes pop { 0% { transform: scale(.3); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* ---------- Topplista ---------- */
.top-period { display: flex; gap: 8px; padding: 0 2px 10px; }
.top-period-btn {
  flex: 1; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px; padding: 9px 8px; color: var(--text); cursor: pointer;
  font-weight: 700; font-size: .85rem;
}
.top-period-btn.active { background: var(--sun); color: #4a3200; border-color: var(--sun); }

.top-tabs {
  display: flex; gap: 8px; overflow-x: auto; padding: 0 2px 10px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.top-tabs::-webkit-scrollbar { display: none; }
.top-tab {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px; padding: 7px 11px; color: var(--text); cursor: pointer;
  font-size: 1.15rem; min-width: 60px;
}
.top-tab span { font-size: .62rem; font-weight: 600; opacity: .85; white-space: nowrap; }
.top-tab.active { background: var(--sun); color: #4a3200; border-color: var(--sun); }
.top-tab.active span { opacity: 1; }

.top-list { display: flex; flex-direction: column; gap: 10px; }
.top-row {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.1); border-radius: 14px; padding: 10px 14px;
}
.top-row.me { border: 2px solid var(--sun); }
/* avliden säl: dämpad rad, gravstenen studsar inte och nivåtexten blir grå */
.top-row.dead { background: rgba(120,130,140,.12); }
.top-row.dead .top-seal { filter: grayscale(.35); }
.top-row.dead:hover .top-seal { transform: none; }
.top-row.dead .top-level { color: #9aa7b0; font-weight: 700; }
.top-rank { font-size: 1.2rem; font-weight: 800; width: 34px; text-align: center; }
.top-seal { width: 52px; height: 42px; flex-shrink: 0; transition: transform .16s ease; }
.top-seal svg { width: 100%; height: 100%; }
/* liten hover-effekt: sälen studsar upp och lutar sig lite */
.top-row:hover .top-seal { transform: scale(1.16) rotate(-5deg); }
.top-info { flex: 1; display: flex; flex-direction: column; }
.top-info small { opacity: .7; font-size: .75rem; }
.top-level { font-weight: 700; color: var(--sun); }

/* ---------- Bottennav ---------- */
#bottomnav {
  /* z-index över ytan/isflaket (50) men under butiksscenerna (55), så naven syns
     och går att använda medan sälen står på flaket – men inte inne i butikerna. */
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 52;
  width: 100%; max-width: 560px;
  display: flex; background: rgba(7, 34, 51, .92); backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.12);
  padding-bottom: env(safe-area-inset-bottom);
}
#bottomnav button {
  flex: 1; background: none; border: none; color: var(--text); opacity: .55;
  font-size: 1.5rem; padding: 9px 0 7px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
#bottomnav button span { font-size: .68rem; font-weight: 600; }
#bottomnav button.active { opacity: 1; }

/* ---------- Ljudknapp ---------- */
.sound-toggle {
  position: fixed; top: calc(8px + env(safe-area-inset-top)); right: 8px; z-index: 30;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25); background: rgba(7,34,51,.7);
  font-size: 1.1rem; cursor: pointer; backdrop-filter: blur(4px);
}
.sound-toggle:active { transform: scale(.92); }
/* varje sektion är en egen kolumn med luft mellan fält och knapp */
#account-login, #account-register, #account-status, #account-forgot { display: flex; flex-direction: column; gap: 14px; }
#account-login label, #account-register label, #account-forgot label { gap: 6px; }
#account-email-nudge, #account-delete-confirm { display: flex; flex-direction: column; gap: 10px; }
.account-note { opacity: .7; font-size: .8rem; margin-top: 4px; }
.account-note a { color: inherit; }
.account-switch { font-size: .85rem; opacity: .9; text-align: center; margin-top: -2px; }
.linkbtn {
  background: none; border: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--sun); font-weight: 700; text-decoration: underline;
}
.linkbtn:active { opacity: .7; }
.linkbtn.danger-link { color: #ff8a8a; text-align: left; }
.btn.danger { background: #c0392b; color: #fff; }

/* "beta"-märke på spel under utveckling */
.beta-pill {
  display: inline-block; vertical-align: middle;
  font-size: .58rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: var(--coral); color: #fff; padding: 1px 6px; border-radius: 999px; margin-left: 6px;
}
/* "ny"-märke på nytillkomna spel */
.new-pill {
  display: inline-block; vertical-align: middle;
  font-size: .58rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: var(--ok); color: #073; padding: 1px 6px; border-radius: 999px; margin-left: 6px;
}

/* Daglig bonus */
.topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.daily-chip {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid rgba(255,209,102,.5); background: rgba(255,209,102,.18);
  color: var(--text); font-size: 1.05rem; cursor: pointer; padding: 0;
  animation: daily-pulse 1.6s ease-in-out infinite;
}
.daily-chip:active { transform: scale(.92); }
@keyframes daily-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,209,102,.5); }
  50% { box-shadow: 0 0 0 7px rgba(255,209,102,0); }
}
.daily-card { align-items: center; text-align: center; }
.daily-streak { font-size: 1.35rem; font-weight: 800; color: var(--sun); }

/* Havsquiz (DOM-baserat spel) */
.quiz { height: 100%; display: flex; flex-direction: column; gap: 14px; padding: 16px 14px; }
.quiz-q {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  border-radius: 16px; padding: 20px 16px; font-size: 1.22rem; font-weight: 700;
  text-align: center; line-height: 1.35; display: flex; align-items: center; justify-content: center;
  min-height: 26%; flex: 1;
}
.quiz-timer { height: 8px; border-radius: 999px; background: rgba(0,0,0,.25); overflow: hidden; }
.quiz-timer-fill { height: 100%; width: 100%; background: var(--ok); transition: width .1s linear; }
.quiz-timer-fill.low { background: var(--coral); }
.quiz-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quiz-ans {
  min-height: 68px; padding: 12px; border-radius: 14px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.1);
  color: var(--text); font-size: 1rem; font-weight: 600; line-height: 1.25;
}
.quiz-ans:active { transform: scale(.97); }
.quiz-ans.correct { background: rgba(78,203,113,.85); border-color: #4ecb71; color: #06331a; }
.quiz-ans.wrong { background: rgba(255,107,107,.85); border-color: var(--coral); color: #3a0808; }
.quiz-ans:disabled { cursor: default; }
.sound-card { align-items: stretch; }
.vol-row { display: flex; align-items: center; gap: 12px; font-size: 1rem; font-weight: 600; }
.vol-row input[type=range] {
  flex: 1; -webkit-appearance: none; appearance: none; height: 8px; border-radius: 999px;
  background: rgba(255,255,255,.2); outline: none;
}
.vol-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--sun); cursor: pointer; border: none;
}
.vol-row input[type=range]::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%; background: var(--sun); cursor: pointer; border: none;
}

/* ---------- Konfetti ---------- */
.confetti {
  position: fixed; top: -20px; width: 10px; height: 14px; z-index: 45;
  border-radius: 2px; pointer-events: none;
  animation: conffall linear forwards;
}
@keyframes conffall {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(112vh) rotate(760deg); opacity: .85; }
}

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: calc(90px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.85); color: #fff; padding: 10px 18px; border-radius: 999px;
  font-size: .9rem; font-weight: 600; z-index: 50; max-width: 88%; text-align: center;
  transition: opacity .3s;
}

/* ---------- Kontonudgar (hemskärmen): skapa konto / lägg till e-post ---------- */
.home-nudge {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: rgba(255,209,102,.14); border: 1px solid rgba(255,209,102,.4);
  border-radius: 14px; padding: 10px 12px; margin-bottom: 10px;
}
.home-nudge p { flex: 1; font-size: .85rem; min-width: 180px; }
.home-nudge-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* ---------- Cookie/lokal-lagring-notis ---------- */
#cookie-notice {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 60; max-width: 560px; margin: 0 auto;
  background: rgba(7,34,51,.95); border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px; padding: 14px 16px; display: flex; align-items: center; gap: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
#cookie-notice p { font-size: .82rem; opacity: .9; flex: 1; }
#cookie-notice a { color: var(--sun); }
#cookie-notice .btn { flex-shrink: 0; }

/* ---------- Fiskaffären (bakgata) ---------- */
/* Nås numera via skylten på isflaket vid ytan, inte från hemvattnet */

/* Scen-overlay: täcker allt, mörk sunkig gränd */
.fishshop {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 55;
  display: flex; flex-direction: column; align-items: center;
  background: #0a0d10;
}
.alley, .shop-panel { width: 100%; max-width: 560px; }

/* Gränd: tegelvägg + gatsten, dämpad lampa uppifrån och massa skit */
.alley {
  position: relative; flex: 1; min-height: 180px; overflow: hidden;
  /* rödbrun, sliten tegelvägg: texturen multipliceras med en tegelröd ton */
  background-image: url(/assets/textures/brick.png);
  background-size: 150px;
  background-color: #7c3320;
  background-blend-mode: multiply;
}
.alley::before { /* gatsten på marken */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  background: url(/assets/textures/cobblestone.png); background-size: 165px;
  box-shadow: inset 0 14px 26px rgba(0,0,0,.55);
}
.alley::after { /* smuts, mörka fläckar, vattenstrimmor + vinjett + svag lampa */
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  background:
    radial-gradient(130% 70% at 50% 4%, rgba(255,236,190,.16), transparent 46%),
    radial-gradient(60px 90px at 18% 30%, rgba(10,8,6,.5), transparent 70%),
    radial-gradient(80px 120px at 82% 22%, rgba(10,8,6,.42), transparent 70%),
    radial-gradient(50px 80px at 62% 46%, rgba(10,8,6,.4), transparent 72%),
    linear-gradient(90deg, transparent 46%, rgba(8,6,4,.28) 47%, transparent 48%),
    linear-gradient(180deg, rgba(4,6,10,.66), rgba(4,6,10,.12) 26%, rgba(4,6,10,.14) 56%, rgba(4,6,10,.66));
}

.alley-close {
  position: absolute; top: calc(8px + env(safe-area-inset-top)); left: 10px; z-index: 8;
  margin: 0; width: 40px; height: 40px;
}

/* Gammal trasig neonskylt på väggen ovanför */
.neon-sign {
  position: absolute; top: 14px; left: 50%; z-index: 4;
  transform: translateX(-50%) rotate(-2deg);
  display: flex; align-items: center;
  font-family: "Arial Black", Impact, sans-serif; font-weight: 900;
  font-size: 1.7rem; letter-spacing: 1px; line-height: 1;
  padding: 9px 16px; border-radius: 8px;
  background: rgba(6,8,14,.62); border: 2px solid #14171f;
  box-shadow: 0 6px 18px rgba(0,0,0,.65), inset 0 0 24px rgba(0,0,0,.6);
}
.neon-gap { width: .5em; }
/* neonrör: rosa/magenta sunkig dive-bar-glöd */
.neon { color: #ff4fa3; text-shadow: 0 0 4px #ff8fc6, 0 0 9px #ff2d8f, 0 0 18px #ff2d8f, 0 0 30px #d61c78; }
/* döda (trasiga) rör: mörka, ingen glöd */
.neon.dead { color: #2a1622; text-shadow: none; }
/* blinkande och flimrande rör, olika takt så det ser trasigt ut */
.neon.blink { animation: neon-blink 2.3s steps(1) infinite; }
.neon.blink2 { animation: neon-blink 1.7s steps(1) infinite .3s; }
.neon.flicker { animation: neon-flicker 3.1s linear infinite; }
.neon.flicker2 { animation: neon-flicker 2.4s linear infinite .7s; }
@keyframes neon-blink { 0%,63%,100% { opacity: 1; } 66%,82% { opacity: .12; } }
@keyframes neon-flicker {
  0%,100% { opacity: 1; } 6% { opacity: .35; } 8% { opacity: 1; } 9% { opacity: .2; } 11% { opacity: 1; }
  43% { opacity: 1; } 45% { opacity: .3; } 47% { opacity: 1; } 72% { opacity: .6; } 74% { opacity: 1; }
}

/* Väggdetaljer */
/* Bakdörren: större, och nederkanten ligger i linje med där väggen tar slut
   (marken börjar vid 34 %) i stället för att sticka ned i gatstenen */
.alley-door {
  position: absolute; bottom: 34%; left: 7%; width: 96px; height: 172px; z-index: 1;
  background: url(/assets/textures/wood.png); background-size: 96px;
  border: 5px solid #241708; border-bottom: none; border-radius: 6px 6px 0 0;
  box-shadow: inset 0 0 30px rgba(0,0,0,.72);
}
.alley-door::before { /* dörrspegel-ram för lite detalj */
  content: ''; position: absolute; top: 12px; right: 10px; bottom: 12px; left: 10px; border: 3px solid rgba(0,0,0,.35); border-radius: 4px;
}
.alley-door::after { /* handtag */
  content: ''; position: absolute; right: 10px; top: 52%; width: 9px; height: 9px;
  border-radius: 50%; background: #d8b45a; box-shadow: 0 0 4px rgba(0,0,0,.6);
}
/* Smutsigt fönster på väggen med spröjs och en spricka */
.alley-window {
  position: absolute; top: 19%; left: 34%; width: 78px; height: 92px; z-index: 1;
  background: linear-gradient(135deg, #33454e 0%, #1a2930 55%, #24343b 100%);
  border: 6px solid #241708; border-radius: 3px;
  box-shadow: inset 0 0 20px rgba(0,0,0,.85), 0 3px 8px rgba(0,0,0,.45);
}
.alley-window::before { /* spröjs (kors) */
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background:
    linear-gradient(#241708, #241708) no-repeat center / 100% 5px,
    linear-gradient(#241708, #241708) no-repeat center / 5px 100%;
}
.alley-window::after { /* glasreflex + spricka */
  content: ''; position: absolute; top: 6px; left: 7px; width: 24px; height: 34px;
  background: linear-gradient(135deg, rgba(255,255,255,.16), transparent 70%);
  transform: skewX(-12deg);
  box-shadow: 34px 40px 0 -14px rgba(255,255,255,.08);
}
/* Klotter på väggen */
.alley-graffiti {
  position: absolute; bottom: 42%; left: 40%; z-index: 1;
  font-family: "Comic Sans MS", "Brush Script MT", cursive; font-weight: 800;
  font-size: 1.5rem; color: #56d6b0; opacity: .72; transform: rotate(-9deg);
  text-shadow: 0 0 6px rgba(86,214,176,.55), 1px 1px 0 rgba(0,0,0,.4);
  pointer-events: none; white-space: nowrap;
}
.alley-graffiti-2 {
  bottom: 30%; left: 60%; font-size: 1.15rem; color: #e86fb0; transform: rotate(6deg);
  text-shadow: 0 0 6px rgba(232,111,176,.5), 1px 1px 0 rgba(0,0,0,.4); opacity: .66;
}
.alley-pipe {
  position: absolute; top: 0; right: 12%; width: 12px; height: 62%; z-index: 1;
  background: linear-gradient(90deg, #2c333a, #566169 45%, #2c333a);
  border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.alley-dumpster { position: absolute; bottom: 24%; right: 4%; font-size: 3.2rem; z-index: 3; filter: brightness(.8) saturate(.7); }
.alley-puddle {
  position: absolute; bottom: 6%; left: 34%; width: 120px; height: 26px; z-index: 1;
  background: radial-gradient(ellipse at 40% 40%, rgba(150,200,230,.32), rgba(20,40,55,.5) 70%);
  border-radius: 50%; filter: blur(.5px);
}
.alley-trash { position: absolute; z-index: 3; font-size: 1.2rem; filter: brightness(.85); }
.alley-trash-1 { bottom: 20%; left: 22%; transform: rotate(-14deg); }
.alley-trash-2 { bottom: 9%; right: 30%; transform: rotate(20deg); }
/* Fet katt i förgrunden som stryker fram och tillbaka på gatan och jamar
   sporadiskt (jamet drivs av JS så det synkar med kattljudet) */
.alley-cat { position: absolute; bottom: 8%; left: 46%; z-index: 8; animation: cat-prowl 11s ease-in-out infinite; }
.cat-body {
  display: inline-block; font-size: 2.9rem; line-height: 1;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.55));
  animation: cat-face 11s steps(1) infinite;
}
.cat-meow {
  position: absolute; bottom: 100%; left: 50%;
  transform: translateX(-50%) translateY(4px) scale(.9);
  background: rgba(255,255,255,.92); color: #222; font-size: .62rem; font-weight: 700;
  padding: 2px 7px; border-radius: 8px; white-space: nowrap; opacity: 0;
  transition: opacity .18s, transform .18s;
}
.cat-meow.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
@keyframes cat-prowl { 0% { transform: translateX(115px); } 48% { transform: translateX(-155px); } 52% { transform: translateX(-155px); } 100% { transform: translateX(115px); } }
@keyframes cat-face { 0%,47% { transform: scaleX(1.25); } 52%,99% { transform: scaleX(-1.25); } 100% { transform: scaleX(1.25); } }

/* Fåglar som JS spawnar: de flyger förbi och dyker ibland mot gubben. left/top
   animeras i procent av gränden; --y sätter starthöjden per fågel. */
.alley-bird { position: absolute; z-index: 7; font-size: 1.2rem; filter: grayscale(.3) brightness(.9); pointer-events: none; will-change: left, top, transform; }
@keyframes bird-cross {
  0%   { left: -12%; top: var(--y,20%); transform: rotate(-6deg); }
  25%  { top: calc(var(--y,20%) - 7%); transform: rotate(8deg); }
  50%  { top: calc(var(--y,20%) + 6%); transform: rotate(-5deg); }
  75%  { top: calc(var(--y,20%) - 5%); transform: rotate(8deg); }
  100% { left: 112%; top: var(--y,20%); transform: rotate(-6deg); }
}
@keyframes bird-cross-rev {
  0%   { left: 112%; top: var(--y,20%); transform: scaleX(-1) rotate(-6deg); }
  25%  { top: calc(var(--y,20%) - 6%); transform: scaleX(-1) rotate(8deg); }
  50%  { top: calc(var(--y,20%) + 7%); transform: scaleX(-1) rotate(-5deg); }
  75%  { top: calc(var(--y,20%) - 4%); transform: scaleX(-1) rotate(8deg); }
  100% { left: -12%; top: var(--y,20%); transform: scaleX(-1) rotate(-6deg); }
}
/* dyk ner mot gubben (nere till höger) och upp igen */
@keyframes bird-dive {
  0%   { left: -10%; top: 10%; transform: rotate(0); }
  38%  { left: 40%;  top: 16%; transform: rotate(12deg); }
  60%  { left: 70%;  top: 60%; transform: rotate(64deg); }
  68%  { left: 74%;  top: 62%; transform: rotate(64deg); }
  82%  { left: 58%;  top: 22%; transform: scaleX(-1) rotate(-22deg); }
  100% { left: -10%; top: 12%; transform: scaleX(-1) rotate(-6deg); }
}

/* Fiskförsäljaren (större) */
.fishman-wrap { position: absolute; bottom: 19%; right: 3%; width: 56vw; width: min(56vw, 272px); z-index: 5; }
.fishman { width: 100%; cursor: pointer; filter: drop-shadow(0 8px 10px rgba(0,0,0,.45)); }
.fishman svg { width: 100%; height: auto; display: block; }
.fishman:active { transform: scale(.98); }

/* Fiskdisk framför gubben: träbord med fiskar på en kant av krossad is */
.fish-table {
  position: absolute; bottom: 5%; right: 2%; width: 52vw; width: min(52vw, 250px); height: 46px; z-index: 6;
  background: url(/assets/textures/wood.png); background-size: 100px;
  border: 3px solid #241708; border-radius: 4px 4px 3px 3px;
  box-shadow: inset 0 -10px 16px rgba(0,0,0,.5), inset 0 0 18px rgba(0,0,0,.35), 0 6px 12px rgba(0,0,0,.45);
}
.fish-table::before { /* fogar i träskivan */
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 3px;
  background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(0,0,0,.28) 46px 48px);
}
.fish-tray { /* bädd av is med fiskarna på, sticker upp ovanför bordskanten */
  position: absolute; top: -18px; left: 8px; right: 8px; height: 30px;
  display: flex; align-items: center; justify-content: center; gap: 1px;
  font-size: 1.25rem; line-height: 1; overflow: hidden;
  background: linear-gradient(180deg, #eef6fb, #bcd7e3 70%, #9cbccb);
  border-radius: 8px 8px 4px 4px;
  box-shadow: inset 0 2px 4px rgba(255,255,255,.7), 0 2px 5px rgba(0,0,0,.4);
}
.fish-tray { transform: rotate(-1deg); }

/* Pratbubbla för gubben */
.fishman-speech {
  position: absolute; bottom: 100%; right: 4%; margin-bottom: 6px; z-index: 7;
  background: rgba(255,255,255,.94); color: #222; padding: 8px 12px; border-radius: 12px;
  font-size: .82rem; font-weight: 600; max-width: 230px; line-height: 1.25;
  opacity: 0; transform: translateY(6px) scale(.96); transition: opacity .25s, transform .25s;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.fishman-speech::after {
  content: ''; position: absolute; bottom: -7px; right: 34px;
  border: 7px solid transparent; border-top-color: rgba(255,255,255,.94); border-bottom: none;
}
.fishman-speech.show { opacity: 1; transform: translateY(0) scale(1); }
/* Gubbens mummel: mattare och lutande, så det skiljs från riktiga repliker */
.fishman-speech.mumble { font-style: italic; opacity: .72; font-weight: 600; color: #444; }

/* Gubben tuggar sporadiskt (munnen öppnas i korta skurar) */
.fm-chew { transform-box: fill-box; transform-origin: 50% 0%; animation: fm-chew 4.6s ease-in-out infinite; }
@keyframes fm-chew {
  0%,18%,100% { transform: scaleY(1); }
  20% { transform: scaleY(1.7); } 23% { transform: scaleY(1); } 26% { transform: scaleY(1.6); } 29% { transform: scaleY(1); }
  61% { transform: scaleY(1.6); } 64% { transform: scaleY(1); } 67% { transform: scaleY(1.5); } 70% { transform: scaleY(1); }
}

/* Sälen på besök */
.shop-seal { position: absolute; bottom: 7%; left: 6%; width: 34vw; width: min(34vw, 150px); z-index: 5; animation: bob 3.4s ease-in-out infinite; }
.shop-seal svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 8px rgba(0,0,0,.45)); }
.shop-seal.perk { animation: seal-perk .7s ease; }
@keyframes seal-perk {
  0%,100% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-16px) scale(1.06, .95); }
  55% { transform: translateY(0) scale(.97, 1.04); }
}

/* Sälmete: samma riktiga sälavatar som i fiskeaffären, positionerad på
   isflaket (koordinaterna sätts från spelets layout()). Metspöet + linan
   ritas på en egen genomskinlig duk (.metspo-rod-canvas) ÄNNU högre upp än
   avataren, så det syns att sälen håller i det i stället för att döljas
   bakom kroppen. Båda lagren har pointer-events:none så dragningen i
   mätarstapeln fortfarande träffar huvudcanvasen underst.
   Ankring (centrera över isflaket) och gupp-animationen måste sitta på olika
   element – "bob"-keyframes sätter "transform" rakt av per bildruta och
   skulle annars radera translate(-50%,..)-ankringen varje gång. */
.metspo-seal-anchor {
  position: absolute; z-index: 3; pointer-events: none;
  transform: translate(-50%, -63%);
}
.metspo-seal-bob { animation: bob 3.4s ease-in-out infinite; }
.metspo-seal-bob svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 8px rgba(0,0,0,.4)); }
.metspo-rod-canvas { position: absolute; top: 0; left: 0; z-index: 4; pointer-events: none; }

/* Disk/panel längst ner */
.shop-panel {
  background: linear-gradient(180deg, #17242c, #0e1a20);
  border-top: 4px solid #2c1c0e;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 10px;
  max-height: 54vh; max-height: 54dvh; overflow-y: auto;
  box-shadow: 0 -8px 20px rgba(0,0,0,.5);
}
.shop-wallet {
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
}
/* I väskan (till skillnad från butikerna) sitter plånboken direkt under
   rubriken i den vanliga modalen, inte i en egen mörk disk – lite luft runt. */
.inventory-wallet { margin: -4px 0 4px; }
.shop-wallet span {
  background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.12);
  padding: 6px 14px; border-radius: 999px; font-size: 1rem; font-weight: 700;
}
.shop-section h3 { font-size: .95rem; margin-bottom: 6px; display: flex; align-items: baseline; gap: 8px; }
.shop-section h3 small { font-size: .72rem; font-weight: 600; opacity: .6; }
.sell-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sell-row .btn { flex: 1; min-width: 92px; }
.sell-row .btn:disabled { opacity: .4; }

.shop-buy { display: flex; flex-direction: column; gap: 8px; }
.buy-card {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px; padding: 10px 12px; color: var(--text); cursor: pointer;
  transition: transform .08s;
}
.buy-card:active { transform: scale(.98); }
.buy-card:disabled { opacity: .45; cursor: default; }
.buy-emoji { font-size: 1.9rem; flex-shrink: 0; }
.buy-info { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.buy-info b { font-size: 1rem; }
.buy-info small { font-size: .74rem; opacity: .78; }
.buy-info .buy-eff { color: var(--sun); opacity: .95; font-weight: 700; }
.buy-cost {
  flex-shrink: 0; background: var(--sun); color: #4a3200; font-weight: 800;
  padding: 6px 12px; border-radius: 999px; font-size: .9rem;
}
.shop-hint { text-align: center; opacity: .6; margin-top: 2px; }
.sale-tag {
  display: inline-block; font-size: .62rem; font-weight: 800; letter-spacing: .03em;
  background: #ff5a7a; color: #fff; padding: 2px 7px; border-radius: 999px; margin-left: 6px; vertical-align: middle;
}
.sale-old { opacity: .75; font-weight: 500; font-size: .78em; margin-right: 4px; }

/* ---------- Sälmete: spöval ---------- */
/* Egen, större max-höjd än standardmodalen (82dvh) och extra luft mellan
   hint/spölista/knappar – med upp till 4 spön i listan blev det annars
   trångt och sista raderna hamnade klämda mot skärmkanten. */
.metspo-card { align-items: stretch; max-height: 92vh; max-height: 92dvh; gap: 16px; }
.metspo-rods { display: flex; flex-direction: column; gap: 18px; }
.metspo-rods .rod-row {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px; padding: 12px 14px; color: var(--text); cursor: pointer;
}
.metspo-rods .rod-emoji { font-size: 1.6rem; width: 30px; text-align: center; flex-shrink: 0; }
.metspo-rods .rod-info { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.metspo-rods .rod-info small { opacity: .7; font-size: .78rem; }
.metspo-rods .rod-uses { font-size: .8rem; font-weight: 700; opacity: .85; white-space: nowrap; }
.metspo-rods .rod-row.sel { border-color: var(--sun); background: rgba(255,209,102,.16); }
.metspo-rods .rod-row.sel .rod-uses { color: var(--sun); }
.rod-own { font-weight: 600; opacity: .8; }
/* #metspo-pick är ett enkelt block (ingen egen gap), så "Börja meta"-knappen
   satt klämd direkt mot spölistan ovanför och nästan overlappade texten
   under (som har -2px marginal) – ge den egen luft åt båda hållen. */
#btn-metspo-start { margin: 16px 0; }
.metspo-card .account-switch { margin-top: 0; }

/* ---------- Bertas shop (ljus, glad accessoarbutik) ---------- */
/* Nås numera via skylten på isflaket vid ytan, inte från hemvattnet */

/* Scen-overlay: ljus och glad butik */
.bertashop {
  /* Högre än sälspat (55): därifrån går man och köper schampo, och när butiken
     stängs ska man vara tillbaka i den påbörjade tvätten – inte bakom den. */
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 56;
  display: flex; flex-direction: column; align-items: center;
  background: #ffe3ef;
}
.bshop, .bshop-panel { width: 100%; max-width: 560px; }

/* Butiksrum: ljust randigt tapetvägg + trägolv, mjukt ljus uppifrån */
.bshop {
  position: relative; flex: 1; min-height: 180px; overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 26px, rgba(255,214,236,.5) 26px 52px),
    linear-gradient(180deg, #fff4fb 0%, #ffe0f0 62%, #ffd3ea 100%);
}
.bshop::before { /* trägolv nedtill (ljust) */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
  background: url(/assets/textures/wood.png); background-size: 150px;
  filter: brightness(1.5) saturate(.7);
  box-shadow: inset 0 12px 22px rgba(150,90,120,.28);
}
.bshop::after { /* mjukt varmt ljus + fin vinjett */
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.6), transparent 55%),
    radial-gradient(140% 90% at 50% 120%, rgba(190,110,150,.22), transparent 60%);
}
.bshop-close {
  position: absolute; top: calc(8px + env(safe-area-inset-top)); left: 10px; z-index: 8;
  margin: 0; width: 40px; height: 40px;
  background: rgba(255,255,255,.85); color: #7a3560; border: 2px solid #e79ac2;
}

/* Fin skylt: "Bertas shop" på en pastellplakett som hänger snett */
.berta-sign {
  position: absolute; top: 16px; left: 50%; z-index: 4;
  transform: translateX(-50%) rotate(-2deg);
  display: flex; align-items: center; gap: 8px;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif; font-weight: 900;
  font-size: 1.7rem; letter-spacing: .5px; line-height: 1;
  padding: 10px 20px; border-radius: 16px;
  color: #fff; text-shadow: 0 2px 0 rgba(180,90,140,.5);
  background: linear-gradient(180deg, #ff9ecf, #e368a8);
  border: 3px solid #fff;
  box-shadow: 0 8px 18px rgba(150,60,110,.4), inset 0 2px 6px rgba(255,255,255,.5);
}
.berta-sign::before, .berta-sign::after { /* små upphängningssnören */
  content: ''; position: absolute; top: -14px; width: 2px; height: 14px; background: rgba(120,60,100,.5);
}
.berta-sign::before { left: 22%; transform: rotate(8deg); }
.berta-sign::after { right: 22%; transform: rotate(-8deg); }
.berta-sign-bag { font-size: 1.5rem; -webkit-text-fill-color: initial; }

/* Vimpelgirlang över butiken */
.bshop-garland {
  position: absolute; top: 64px; left: -4%; right: -4%; height: 22px; z-index: 2;
  background:
    repeating-linear-gradient(135deg, #ff8fb5 0 14px, #ffd166 14px 28px, #8fd4ff 28px 42px, #b18cf0 42px 56px);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 0) top/100% 3px no-repeat,
    repeating-linear-gradient(90deg, #000 0 22px, transparent 22px 44px);
  mask: repeating-linear-gradient(90deg, #000 0 0) top/100% 3px no-repeat,
    repeating-linear-gradient(90deg, #000 0 22px, transparent 22px 44px);
  clip-path: polygon(0 0, 100% 0, 100% 40%, 97% 40%, 95% 100%, 93% 40%, 90% 40%, 88% 100%, 86% 40%, 0 40%);
  opacity: .9;
}

/* Hyllor med prylar längs väggen */
.bshop-shelf {
  position: absolute; left: 6%; z-index: 1;
  display: flex; gap: 10px; font-size: 1.4rem; line-height: 1;
  padding: 6px 10px 3px; border-radius: 4px;
  background: linear-gradient(180deg, #d59b6f, #b97f52);
  box-shadow: 0 4px 8px rgba(120,70,40,.35), inset 0 2px 3px rgba(255,255,255,.3);
}
.bshop-shelf span { filter: drop-shadow(0 2px 1px rgba(0,0,0,.2)); }
.bshop-shelf-1 { top: 24%; }
.bshop-shelf-2 { top: 40%; left: 4%; }
.bshop-plant { position: absolute; bottom: 26%; left: 3%; font-size: 2.4rem; z-index: 2; filter: drop-shadow(0 4px 4px rgba(0,0,0,.2)); }
.bshop-mirror {
  position: absolute; top: 22%; right: 8%; width: 62px; height: 96px; z-index: 1;
  border-radius: 40px 40px 8px 8px;
  background: linear-gradient(150deg, #eaf6ff 0%, #cfe6f5 45%, #eaf6ff 100%);
  border: 5px solid #d59b6f; box-shadow: 0 4px 10px rgba(120,70,40,.3);
}

/* Berta bakom kassan */
.berta-wrap { position: absolute; bottom: 20%; right: 4%; width: 52vw; width: min(52vw, 250px); z-index: 5; }
.berta { width: 100%; cursor: pointer; filter: drop-shadow(0 8px 10px rgba(120,60,100,.35)); }
.berta svg { width: 100%; height: auto; display: block; }
.berta:active { transform: scale(.98); }
.berta-wave { transform-box: fill-box; transform-origin: 60% 92%; animation: berta-wave 2.6s ease-in-out infinite; }
@keyframes berta-wave { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-16deg); } }
.berta-talk { transform-box: fill-box; transform-origin: 50% 30%; animation: berta-talk 3.4s ease-in-out infinite; }
@keyframes berta-talk {
  0%,18%,100% { transform: scaleY(1); }
  22% { transform: scaleY(.5); } 30% { transform: scaleY(1.3); } 38% { transform: scaleY(.7); }
  60% { transform: scaleY(1.2); } 66% { transform: scaleY(.8); } 72% { transform: scaleY(1.1); }
}

/* Bertas pratbubbla */
.berta-speech {
  position: absolute; bottom: 46%; right: 100%; margin-right: 8px; z-index: 7;
  background: #fff; color: #5a3a4d; padding: 8px 12px; border-radius: 14px;
  font-size: .8rem; font-weight: 600; width: max-content; max-width: 40vw; max-width: min(40vw, 180px); line-height: 1.25;
  opacity: 0; transform: translateX(6px) scale(.96); transition: opacity .25s, transform .25s;
  box-shadow: 0 4px 12px rgba(150,60,110,.3); border: 2px solid #ffd0e6;
}
.berta-speech::after { /* svansen pekar åt höger, mot Berta */
  content: ''; position: absolute; right: -8px; bottom: 16px;
  border: 7px solid transparent; border-left-color: #fff; border-right: none;
}
.berta-speech.show { opacity: 1; transform: translateX(0) scale(1); }
.berta-speech.mumble { font-style: italic; opacity: .78; color: #8a6178; }

/* Kassadisk framför Berta */
.kassa {
  position: absolute; bottom: 4%; right: 2%; width: 54vw; width: min(54vw, 258px); height: 52px; z-index: 6;
  background: linear-gradient(180deg, #d59b6f, #b97f52);
  border-radius: 8px 8px 4px 4px;
  box-shadow: inset 0 -10px 16px rgba(120,70,40,.4), 0 6px 12px rgba(120,70,40,.35);
}
.kassa::before {
  content: ''; position: absolute; top: 0; right: 0; bottom: auto; left: 0; height: 10px; border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #ffd166, #e6b34a);
}
.kassa-top {
  position: absolute; top: -20px; left: 12px; font-size: 1.3rem; line-height: 1;
  letter-spacing: 4px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25));
}

/* Sälen som shoppar */
.bshop-seal { position: absolute; bottom: 8%; left: 7%; width: 34vw; width: min(34vw, 150px); z-index: 5; animation: bob 3.4s ease-in-out infinite; }
.bshop-seal svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 8px rgba(120,60,100,.35)); }
.bshop-seal.perk { animation: seal-perk .7s ease; }

/* Ljus, glad bottenpanel (skiljer sig från fiskaffärens sunkiga).
   FAST höjd: kategorierna innehåller olika många prylar, och om panelen växte
   med innehållet skulle scenen ovanför hoppa i höjdled varje gång man bytte
   flik. I stället ligger gränsen mot butiksrummet still och varulistan
   scrollar inuti panelen (se .bshop-panel .shop-section/#berta-buy). */
.bshop-panel {
  height: 48vh; height: 48dvh; overflow: hidden; max-height: none;
}
.bshop-panel .shop-section {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}
.bshop-panel #berta-buy { flex: 1; min-height: 0; overflow-y: auto; padding-right: 2px; }
.bshop-panel {
  background: linear-gradient(180deg, #fff0f7, #ffe3ef);
  border-top: 4px solid #e79ac2; color: #5a3a4d;
  box-shadow: 0 -8px 20px rgba(160,80,130,.22);
}
.bshop-panel .shop-wallet span { background: #fff; border: 1px solid #f3c7de; color: #8a2f66; }
.bshop-panel .shop-section h3 { color: #8a2f66; }
.bshop-panel .shop-section h3 small { color: #b06a92; opacity: 1; }
.bshop-panel .buy-card { background: #fff; border: 1px solid #f3c7de; color: #5a3a4d; }
.bshop-panel .buy-card b { color: #8a2f66; }
.bshop-panel .buy-card .buy-eff { color: #b06a92; }
.bshop-panel .buy-card.owned { background: #ecfaf0; border-color: #bfe6cc; opacity: 1; }
.bshop-panel .buy-card.owned .buy-eff { color: #3c8459; }
.bshop-panel .shop-hint { color: #b06a92; opacity: .95; }

/* ---------- Sälspat ---------- */
/* Ett lyxigt marmorspa: krämvit marmor med guldlister, arkadnisch, pelare,
   vägglampor, palmer och en dusch som hänger över karet. Samma z-index som
   butiksscenerna, så man är kvar på isflaket när man stänger spat.
   Tvättordningen sitter i app.js/server.js, inte här. */
.sealspa {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 55;
  display: flex; flex-direction: column; align-items: center;
  background: #2a1f2b;
}
.spa, .spa-panel { width: 100%; max-width: 560px; }
.spa {
  position: relative; flex: 1; min-height: 300px; overflow: hidden;
  /* marmorvägg: varm kräm med svaga, sneda ådror */
  background:
    linear-gradient(118deg, rgba(255,255,255,.55) 0 2px, transparent 2px 54px),
    linear-gradient(72deg, rgba(178,148,132,.16) 0 3px, transparent 3px 86px),
    linear-gradient(180deg, #f9f2e6 0%, #f1e3d2 54%, #e4cfb9 100%);
}
.spa::before { /* marmorgolv i schackrutor med guldlist mot väggen */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 20%;
  background:
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.2) 0 25%, rgba(170,138,108,.07) 0 50%)
      0 0 / 30px 15px,
    linear-gradient(180deg, #ecdbc6, #d3b898);
  border-top: 3px solid #d4af37;
  box-shadow: inset 0 7px 16px rgba(255,255,255,.5);
}
.spa::after { /* varmt spotlight över karet + mjuk vinjett */
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 62% 46% at 50% 40%, rgba(255,241,206,.6), rgba(255,241,206,0) 70%),
    radial-gradient(ellipse at 50% 55%, rgba(0,0,0,0) 54%, rgba(74,44,30,.36));
}
/* Mjuk badmatta under karet – ger golvet något att vila på */
.spa-mat {
  position: absolute; bottom: 9%; left: 50%; transform: translateX(-50%); z-index: 2;
  width: 72%; width: min(72%, 300px); height: 22px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%, #fffdf7, #f0e2cd 58%, #e0cdb2);
  box-shadow: 0 4px 12px rgba(90,60,30,.22), inset 0 2px 4px rgba(255,255,255,.9);
}
.spa-mat::after { /* mjuk guldbård i mattan */
  content: ''; position: absolute; top: 4px; right: 14px; bottom: 4px; left: 14px; border-radius: 50%;
  border: 1px solid rgba(212,175,55,.35);
}

.spa-close {
  position: absolute; top: calc(8px + env(safe-area-inset-top)); left: 10px; z-index: 12;
  margin: 0; width: 40px; height: 40px;
  background: rgba(255,255,255,.85); color: #7a5a2a; border-color: rgba(122,90,42,.3);
}

/* Taklist i guld längs hela väggen */
.spa-cornice {
  position: absolute; top: 0; left: 0; right: 0; height: 13px; z-index: 3;
  background: linear-gradient(180deg, #fdf3d0 0%, #e6c869 46%, #b8912f 100%);
  box-shadow: 0 2px 6px rgba(90,60,10,.35);
}
.spa-cornice::after { /* tandsnitt under listen */
  content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 5px;
  background: repeating-linear-gradient(90deg, #c9a63f 0 4px, transparent 4px 9px);
  opacity: .75;
}

/* Graverad guldplakett med ornament – spats fina namnskylt */
.spa-sign {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%); z-index: 6;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 42%),
    linear-gradient(180deg, #f6e2a4 0%, #dcb85a 40%, #b8912f 72%, #dcb85a 100%);
  border: 2px solid #a8842c;
  box-shadow:
    0 5px 16px rgba(80,52,8,.45),
    inset 0 0 0 1px rgba(255,255,255,.45),
    inset 0 0 12px rgba(120,84,16,.35);
}
.spa-sign::after { /* stillsam glansstrimma som sveper över plaketten */
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 4px; pointer-events: none;
  background: linear-gradient(105deg, transparent 34%, rgba(255,255,255,.6) 48%, transparent 60%);
  background-size: 260% 100%;
  animation: spa-sheen 7s ease-in-out infinite;
}
@keyframes spa-sheen {
  0%, 62% { background-position: 150% 0; }
  100% { background-position: -60% 0; }
}
.spa-sign-mid { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.spa-sign-text {
  font-size: 1.16rem; font-weight: 800; letter-spacing: .16em; color: #563d07;
  text-shadow: 0 1px 0 rgba(255,255,255,.6), 0 -1px 0 rgba(90,60,8,.45);
}
.spa-sign-sub {
  font-size: .5rem; font-weight: 700; letter-spacing: .1em; color: #7a5a12;
  text-transform: uppercase;
}
.spa-sign-orn { font-size: 1rem; color: #8a6a1c; opacity: .9; line-height: 1; }
.spa-sign-orn.flip { transform: scaleX(-1); }

/* Arkadnisch bakom karet: ljusare marmor med guldkant, fyller väggen */
.spa-niche {
  position: absolute; top: 20%; left: 13%; right: 13%; bottom: 22%; z-index: 1;
  border-radius: 50% 50% 0 0 / 34% 34% 0 0;
  border: 3px solid rgba(212,175,55,.7); border-bottom: none;
  background:
    radial-gradient(ellipse at 50% 78%, rgba(255,252,240,.9), rgba(255,246,226,.35) 62%, rgba(240,224,200,.2)),
    linear-gradient(180deg, #fdf8ec, #f2e5d1);
  box-shadow: inset 0 6px 20px rgba(255,255,255,.7), 0 2px 10px rgba(120,84,40,.14);
}
/* Reliefmedaljong i marmorn: en snäcksolfjäder med guldring, som en stukatur
   bakom sälen. Håller nischen från att bli en tom kritvit yta. */
.spa-medallion {
  position: absolute; top: 31%; left: 50%; transform: translateX(-50%); z-index: 1;
  width: 48%; width: min(48%, 194px); aspect-ratio: 1; border-radius: 50%;
  background:
    repeating-conic-gradient(from 200deg at 50% 78%,
      rgba(198,158,96,.16) 0 4deg, rgba(255,255,255,.5) 4deg 8deg),
    radial-gradient(circle at 50% 62%, rgba(255,252,242,.9), rgba(240,226,202,.5));
  border: 2px solid rgba(212,175,55,.32);
  box-shadow: inset 0 3px 12px rgba(255,255,255,.8), inset 0 -6px 14px rgba(170,136,96,.18);
  opacity: .5; pointer-events: none;
}
.spa-medallion::after { /* inre ring */
  content: ''; position: absolute; top: 16%; right: 16%; bottom: 16%; left: 16%; border-radius: 50%;
  border: 1px solid rgba(212,175,55,.28);
}

/* Marmorpelare med guldkapitäl, en vägglampa på var sin pelare */
.spa-column {
  position: absolute; bottom: 22%; top: 16%; width: 26px; z-index: 2;
  background: linear-gradient(90deg, #d3bda0 0%, #fdf7ec 34%, #f2e6d3 62%, #cdb598 100%);
  box-shadow: 0 3px 10px rgba(110,80,50,.22);
}
.spa-column::before, .spa-column::after { /* kapitäl upptill och bas nedtill */
  content: ''; position: absolute; left: -6px; right: -6px; height: 11px;
  background: linear-gradient(180deg, #f6e2a4, #c9a63f);
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(90,60,20,.3);
}
.spa-column::before { top: -7px; }
.spa-column::after { bottom: -7px; }
.spa-column-l { left: 3%; }
.spa-column-r { right: 3%; }
/* Levande ljus i en liten guldhållare på pelaren */
.spa-sconce {
  position: absolute; top: 26%; left: 50%; transform: translateX(-50%);
  font-size: 1.05rem; font-style: normal; line-height: 1;
  filter: drop-shadow(0 0 9px rgba(255,198,102,.95));
  animation: spa-flicker 2.6s ease-in-out infinite;
}
.spa-column-r .spa-sconce { animation-delay: -1.3s; }
@keyframes spa-flicker {
  0%, 100% { opacity: .85; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.09); }
}

/* Palmer i krukor på golvet och marmorkonsoler med handdukstrave/ishink.
   Allt står PÅ golvlisten (bottom ≈ golvets höjd) så inget svävar. */
.spa-palm {
  position: absolute; bottom: 20%; z-index: 2; font-size: 2.6rem; line-height: 1;
  filter: drop-shadow(0 5px 6px rgba(90,60,30,.32));
}
.spa-palm-l { left: 1%; }
.spa-palm-r { right: 1%; transform: scaleX(-1); }
.spa-console {
  position: absolute; bottom: 20%; width: 54px; height: 30px; z-index: 3;
}
.spa-console::before { /* bordsskiva i marmor med guldkant */
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 7px;
  border-radius: 3px;
  background: linear-gradient(180deg, #fdf7ec, #ddc6aa);
  border-bottom: 2px solid #d4af37;
  box-shadow: 0 3px 6px rgba(90,60,30,.3), inset 0 1px 0 rgba(255,255,255,.85);
}
.spa-console::after { /* smal guldfot ner till golvet */
  content: ''; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 6px; height: 23px;
  background: linear-gradient(90deg, #a8842c, #f6e2a4 45%, #a8842c);
}
.spa-console-l { left: 8%; }
.spa-console-r { right: 8%; }
/* Det som står på bordet vilar på skivans överkant */
.spa-console > span { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); }
.spa-towels { display: flex; flex-direction: column-reverse; gap: 3px; padding-bottom: 1px; }
.spa-towels i {
  display: block; width: 38px; height: 7px; border-radius: 3px;
  background: linear-gradient(180deg, #fff, #ece2d4);
  border-left: 4px solid #e6c869;
  box-shadow: 0 1px 3px rgba(110,80,50,.3);
}
.spa-towels i:nth-child(2) { width: 32px; }
.spa-towels i:nth-child(3) { width: 26px; }
.spa-bucket { font-size: 1.6rem; line-height: 1; filter: drop-shadow(0 3px 4px rgba(90,60,30,.32)); }

/* Ånga: stiger stillsamt ur karet, och rejält mer medan man spolar */
.spa-steam {
  position: absolute; bottom: 26%; width: 48px; height: 48px; z-index: 6; pointer-events: none;
  border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(228,244,250,.9), rgba(214,238,248,0) 70%);
  animation: spa-steam 7s ease-in-out infinite;
}
.spa-steam-1 { left: 26%; }
.spa-steam-2 { left: 44%; animation-delay: -2.4s; }
.spa-steam-3 { left: 62%; animation-delay: -4.6s; }
@keyframes spa-steam {
  0% { opacity: 0; transform: translateY(0) scale(.55); }
  30% { opacity: .55; }
  100% { opacity: 0; transform: translateY(-110px) scale(1.6); }
}
/* medan duschen går blir det riktigt ångigt */
.spa.rinsing .spa-steam { animation-duration: 3.4s; }
@keyframes spa-steam-hot {
  0% { opacity: 0; transform: translateY(0) scale(.5); }
  25% { opacity: .8; }
  100% { opacity: 0; transform: translateY(-140px) scale(1.9); }
}
.spa.rinsing .spa-steam { animation-name: spa-steam-hot; }

/* Rosenblad som singlar ner (spawnas av JS) */
.spa-petals { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 7; pointer-events: none; }
.spa-petal {
  position: absolute; top: -18px; font-size: .95rem;
  animation: spa-petal-fall var(--dur, 7s) linear forwards;
}
@keyframes spa-petal-fall {
  0% { opacity: 0; transform: translateX(0) rotate(0); }
  12% { opacity: .95; }
  100% { opacity: 0; transform: translate(var(--dx, 30px), 380px) rotate(420deg); }
}

/* ---------- Duschen över karet ---------- */
/* Duschen sitter i karets koordinater med underkanten mot karets överkant.
   Röret växer uppåt (och klipps av scenen om den är låg) medan silen alltid
   hamnar strax ovanför sälen – den kan därför inte krocka med avataren. */
.spa-shower {
  position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
  z-index: 8; width: 96px; margin-bottom: -30px; pointer-events: none;
}
.spa-shower-pipe {
  display: block; width: 7px; height: 34px; margin: 0 auto;
  background: linear-gradient(90deg, #a8842c, #f6e2a4 42%, #a8842c);
}
.spa-shower-head {
  position: relative; display: block; width: 78px; height: 15px; margin: 0 auto;
  border-radius: 5px 5px 50% 50% / 5px 5px 95% 95%;
  background: linear-gradient(180deg, #fdf3d0, #dcb85a 52%, #a8842c);
  box-shadow: 0 3px 8px rgba(90,60,10,.4), inset 0 1px 0 rgba(255,255,255,.7);
}
.spa-shower-head::after { /* hålraden i duschsilens underkant */
  content: ''; position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%);
  width: 62px; height: 3px;
  background: repeating-linear-gradient(90deg, #6b4d0e 0 2px, transparent 2px 7px);
  opacity: .85;
}
/* Vattnet: riktiga droppar som faller snabbt ur silen (byggs av buildRain i
   app.js, en <i> per droppe med egen x-position, längd, fart och fördröjning).
   Syns bara medan man spolar. */
.spa-shower-rain {
  position: absolute; top: 47px; left: 50%; transform: translateX(-50%);
  width: 116px; height: 250px; opacity: 0; transition: opacity .15s;
}
.spa.rinsing .spa-shower-rain { opacity: 1; }
.spa-shower-rain i {
  position: absolute; top: 0; left: var(--x); width: 3px; height: var(--len, 14px);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(226,248,255,0), rgba(240,252,255,.98));
  box-shadow: 0 0 3px rgba(190,235,255,.8);
  animation: spa-drop var(--dur, .5s) linear var(--delay, 0s) infinite;
}
@keyframes spa-drop {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateY(240px); opacity: .85; }
}

/* ---------- Karet med sälen: här sker tvättandet ---------- */
.spa-tub {
  position: absolute; bottom: 16%; left: 50%; transform: translateX(-50%); z-index: 5;
  width: 70%; width: min(70%, 300px); height: 56%; height: min(56%, 268px);
  display: flex; align-items: flex-end; justify-content: center;
  touch-action: none; cursor: pointer;
}
/* Bredden hålls under karets höjd (SVG:n är 200×170, alltså 0,85 × bredden)
   så sälen aldrig sticker upp över karkanten där duschen sitter. */
.spa-seal { position: relative; z-index: 1; width: 82%; margin-bottom: 9%; pointer-events: none; }
.spa-seal svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 7px 9px rgba(90,60,30,.34)); }
/* Blöt päls: mörkare och glansigare */
.spa-tub.wet .spa-seal svg { filter: drop-shadow(0 7px 9px rgba(90,60,30,.34)) saturate(1.18) brightness(.92); }
.spa-tub.wobble .spa-seal { animation: spa-wobble .5s ease; }
@keyframes spa-wobble {
  0%, 100% { transform: rotate(0) scale(1); }
  25% { transform: rotate(-3deg) scale(1.02); }
  70% { transform: rotate(3deg) scale(.99); }
}

/* Marmorbadkar med guldkant. Karets framsida ligger FÖRE sälen i
   stapelordningen, så sälens nedre del hamnar bakom kanten och den ser ut att
   sitta nere i vattnet i stället för att sväva ovanpå. */
.spa-basin {
  position: absolute; left: 3%; right: 3%; bottom: 0; height: 24%; z-index: 3;
  border-radius: 44% 44% 16% 16% / 58% 58% 26% 26%;
  background:
    linear-gradient(180deg, #fdf8ee 0%, #f0dfc8 30%, #dcc3a4 74%, #c8ab8a 100%);
  box-shadow:
    inset 0 3px 10px rgba(255,255,255,.85),
    inset 0 -14px 22px rgba(140,100,64,.28),
    0 10px 20px rgba(80,50,30,.36);
}
.spa-basin::before { /* guldlist runt karets överkant */
  content: ''; position: absolute; top: -2px; right: 0; bottom: auto; left: 0; height: 20px;
  border-radius: 50% / 100% 100% 0 0;
  border: 3px solid #d4af37; border-bottom: none;
  background: linear-gradient(180deg, rgba(255,247,222,.95), rgba(240,223,190,.15));
}
.spa-basin::after { /* liten guldkran på karets framkant */
  content: ''; position: absolute; bottom: 22%; left: 50%; transform: translateX(-50%);
  width: 26px; height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, #b8912f, #f6e2a4 45%, #b8912f);
  box-shadow: 0 1px 3px rgba(90,60,20,.4);
}
/* Två små guldfötter så karet står på golvet i stället för att flyta */
.spa-basin-foot {
  position: absolute; bottom: -7px; width: 16px; height: 9px; z-index: 2;
  border-radius: 0 0 5px 5px;
  background: linear-gradient(180deg, #e6c869, #a8842c);
  box-shadow: 0 2px 4px rgba(80,50,20,.4);
}
.spa-basin-foot.l { left: 22%; }
.spa-basin-foot.r { right: 22%; }

/* Vattenytan uppe i karet – skvalpar lite. Ligger bakom karets framkant. */
.spa-basin-water {
  position: absolute; top: 4px; left: 8%; right: 8%; height: 40%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 34% 26%, rgba(255,255,255,.75), rgba(255,255,255,0) 46%),
    linear-gradient(180deg, rgba(206,240,240,.95), rgba(140,206,212,.92));
  box-shadow: inset 0 3px 8px rgba(255,255,255,.8), inset 0 -4px 9px rgba(40,110,124,.22);
  animation: spa-slosh 4.2s ease-in-out infinite;
}
@keyframes spa-slosh {
  0%, 100% { transform: scaleX(1) translateY(0); }
  50% { transform: scaleX(1.03) translateY(-1.5px); }
}

/* Handduken man torkar med. Ligger stilla mitt över sälen i torkningssteget
   och följer sedan fingret medan man drar – den lutar åt det håll man torkar. */
.spa-towel {
  position: absolute; left: 50%; top: 40%; z-index: 5;
  width: 58px; height: 40px; margin: -20px 0 0 -29px;
  opacity: 0; transform: scale(.8); pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.spa-tub.drying .spa-towel { opacity: 1; transform: scale(1); }
.spa-towel i { /* själva handduken: vikt frotté med guldbård och veck */
  position: relative; display: block; width: 100%; height: 100%; border-radius: 7px;
  /* svalt vit frotté – syns mot den krämvita marmorn */
  background:
    repeating-linear-gradient(0deg, rgba(90,120,140,.07) 0 3px, transparent 3px 7px),
    linear-gradient(150deg, #ffffff, #eaf1f5 58%, #d3e0e8);
  border: 1px solid #c4d5df;
  box-shadow: 0 4px 10px rgba(50,70,90,.38), inset 0 1px 0 rgba(255,255,255,1);
  transform: rotate(-8deg);
}
.spa-towel i::before { /* guldbård tvärs över handduken */
  content: ''; position: absolute; left: 0; right: 0; top: 34%; height: 7px;
  background: linear-gradient(180deg, #f0dca0, #d4af37);
  opacity: .85;
}
.spa-towel i::after { /* uppvikt hörn så den ser mjuk ut */
  content: ''; position: absolute; right: 3px; bottom: 3px; width: 16px; height: 11px;
  border-radius: 4px 4px 6px 4px;
  background: linear-gradient(200deg, #ffffff, #dde9f0);
  box-shadow: -1px -1px 2px rgba(70,95,115,.22);
}
/* medan man drar gnuggar handduken fram och tillbaka */
.spa-tub.drying.wiping .spa-towel i { animation: spa-wipe .34s ease-in-out infinite; }
@keyframes spa-wipe {
  0%, 100% { transform: rotate(-11deg); }
  50% { transform: rotate(-4deg); }
}

/* Droppar som rinner av pälsen */
.spa-drip {
  position: absolute; z-index: 4; width: 5px; height: 9px; border-radius: 0 0 60% 60%;
  background: linear-gradient(180deg, rgba(222,249,255,.95), rgba(130,205,225,.8));
  animation: spa-drip 1s ease-in forwards; pointer-events: none;
}
@keyframes spa-drip {
  0% { opacity: 0; transform: translateY(0) scaleY(.6); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateY(54px) scaleY(1.5); }
}

/* Löddret: bubblor som spawnas av JS där fingret gnuggar */
.spa-foam { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; pointer-events: none; }
.spa-bubble {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff, rgba(255,255,255,.74) 58%, rgba(214,240,250,.55));
  box-shadow: inset 0 -2px 3px rgba(150,200,220,.5), 0 1px 3px rgba(90,140,160,.25);
  animation: spa-bubble-in .3s ease-out both;
}
@keyframes spa-bubble-in { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* Guldglitterschampo: bubblorna glöder och blinkar */
.spa-bubble.glitter { box-shadow: 0 0 6px 1px rgba(255, 205, 70, .75), inset 0 -2px 3px rgba(190, 140, 20, .45); }
.spa-bubble.glitter::after {
  content: ''; position: absolute; left: 26%; top: 20%; width: 24%; height: 24%; border-radius: 50%;
  background: #fff; box-shadow: 0 0 4px 2px #fff; animation: spa-glint 1.1s ease-in-out infinite alternate;
}
@keyframes spa-glint { from { opacity: .2; } to { opacity: 1; } }
.spa-bubble.pop { animation: spa-bubble-pop .5s ease-in forwards; }
@keyframes spa-bubble-pop {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.5) translateY(30px); opacity: 0; }
}

/* Glittret när sälen är nytorkad och blank */
.spa-sparkles { position: absolute; top: -20%; right: -20%; bottom: -20%; left: -20%; z-index: 6; pointer-events: none; }
.spa-sparkle { position: absolute; font-size: 1.3rem; animation: spa-sparkle 1.1s ease-out forwards; }
@keyframes spa-sparkle {
  0% { opacity: 0; transform: scale(.3) rotate(0); }
  35% { opacity: 1; transform: scale(1.25) rotate(90deg); }
  100% { opacity: 0; transform: scale(.7) rotate(200deg) translateY(-26px); }
}

/* Spa-pratbubbla: högt upp, så den aldrig skymmer karet man ska peta på */
.spa-speech {
  position: absolute; bottom: 3%; left: 50%; transform: translate(-50%, 6px) scale(.96); z-index: 11;
  background: #fffaf0; color: #6b4a20; padding: 7px 13px; border-radius: 13px;
  font-size: .81rem; font-weight: 600; max-width: 80%; line-height: 1.28; text-align: center;
  opacity: 0; transition: opacity .25s, transform .25s;
  box-shadow: 0 4px 14px rgba(80,50,20,.35); border: 2px solid #e6c869;
}
.spa-speech.show { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* ---------- Spa-panelen: framstegsmätare + ledtråd ---------- */
.spa-panel {
  background: linear-gradient(180deg, #fdf6e9, #f3e6d2);
  border-top: 4px solid #d4af37; color: #6b4a20;
  box-shadow: 0 -8px 20px rgba(110,70,30,.25);
}
.spa-panel .hint { color: #8a6a3a; opacity: 1; }

/* Framstegsmätaren: en riktig stapel delad i fem tydliga delar (ett steg per
   del) med små ikoner ovanför delningarna. Klara steg är gröna, det aktuella
   fylls medan man håller duschen, gnuggar in löddret eller torkar. */
.spa-progress { padding: 4px 0 2px; }
.spa-prog-icons {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
  margin-bottom: 3px;
}
.spa-prog-icons span {
  text-align: center; font-size: .95rem; line-height: 1.1;
  opacity: .3; filter: grayscale(1); transition: opacity .2s, filter .2s;
}
.spa-prog-icons span.done { opacity: .9; filter: none; }
.spa-prog-icons span.now {
  opacity: 1; filter: none;
  animation: spa-icon-now 1.5s ease-in-out infinite;
}
@keyframes spa-icon-now { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }
.spa-bar {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px;
  height: 14px;
}
.spa-seg {
  position: relative; overflow: hidden;
  background: rgba(120,90,40,.16);
  box-shadow: inset 0 1px 2px rgba(110,80,40,.22);
}
.spa-seg:first-child { border-radius: 999px 4px 4px 999px; }
.spa-seg:last-child { border-radius: 4px 999px 999px 4px; }
.spa-seg-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, #ffe9a2, #e8bf50);
  transition: width .14s linear;
}
.spa-seg.done .spa-seg-fill {
  width: 100%;
  background: linear-gradient(180deg, #a9dfb6, #6cbd83);
}
.spa-seg.now { box-shadow: inset 0 1px 2px rgba(110,80,40,.22), 0 0 0 2px rgba(212,175,55,.45); }
/* Statusraden under stapeln: vilket steg och hur långt det kommit */
.spa-status {
  display: flex; align-items: baseline; gap: 6px; padding: 6px 0 2px;
  font-size: .78rem; font-weight: 700; color: #6b4a20;
}
.spa-status small { font-weight: 600; color: #a2814d; }
.spa-status b { margin-left: auto; font-variant-numeric: tabular-nums; color: #8a6a1c; }

/* Schampoval ur väskan (bara i schampo-steget) */
.spa-shampoos { display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; }
.spa-shampoo {
  display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: left;
  padding: 9px 11px; border-radius: 12px; background: #fff; border: 2px solid #e8d5b4; color: #6b4a20;
}
.spa-shampoo.sel { border-color: #d4af37; background: #fff9e6; }
.spa-shampoo b { font-size: .9rem; }
.spa-shampoo small { display: block; font-size: .68rem; color: #a2814d; }
.spa-shampoo .spa-shampoo-left { margin-left: auto; font-size: .74rem; font-weight: 800; white-space: nowrap; color: #8a6a3a; }
.spa-need-btn {
  width: 100%; margin-bottom: 8px; padding: 11px 14px; font-size: .95rem;
}
.spa-restart {
  align-self: center; background: none; border: none; cursor: pointer;
  color: #a2814d; font-size: .76rem; font-weight: 700; text-decoration: underline; padding: 4px;
}

/* Rader i väskan/Bertas shop för schampo (samma form som spörader) */
.item-row .rod-uses { color: var(--sun); }

/* ---------- Skadan: rutan i resultatvyn ---------- */
/* Skadade sälen sig i omgången göms "Spela igen"/"Till sälen" och den här rutan
   är enda vägen vidare (den öppnar skadescenen). Röd och pulserande så det inte
   går att missa att något hänt. */
.result-injury {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  margin-top: 4px; padding: 12px 14px; border-radius: 16px; cursor: pointer;
  background: linear-gradient(180deg, #b8362f, #8e2620);
  border: 2px solid #ff8a7d; color: #fff;
  box-shadow: 0 6px 18px rgba(120,20,14,.45);
  animation: ri-pulse 1.5s ease-in-out infinite;
}
.result-injury:active { transform: scale(.98); }
.ri-emoji { font-size: 2.1rem; flex-shrink: 0; animation: ri-shake .9s ease-in-out infinite; }
.ri-text { display: flex; flex-direction: column; gap: 2px; }
.ri-text b { font-size: 1.05rem; }
.ri-text small { font-size: .76rem; opacity: .85; }
@keyframes ri-pulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(120,20,14,.45); }
  50% { box-shadow: 0 6px 26px rgba(255,110,90,.75); }
}
@keyframes ri-shake {
  0%, 100% { transform: rotate(-8deg) scale(1); }
  50% { transform: rotate(8deg) scale(1.12); }
}

/* Skadevarningen i hemvattnet går att trycka på – den öppnar skadescenen igen */
#injury-warn:not(:empty) { cursor: pointer; text-decoration: underline dotted; }

/* ---------- Skadescenen ---------- */
/* Visas efter rutan i resultatvyn: sälen står med framfenan i mitella och en
   krycka under den andra, ledsen och bandagerad, med snurrande stjärnor över
   huvudet. Högst z-index av scenerna – det här är enda vägen vidare. */
.injury-scene {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 58;
  display: flex; flex-direction: column; align-items: center;
  background: #2a1420;
}
.injury-room, .injury-panel { width: 100%; max-width: 560px; }
.injury-room {
  position: relative; flex: 1; min-height: 240px; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 50% at 50% 62%, rgba(255,180,150,.22), rgba(255,180,150,0) 70%),
    linear-gradient(180deg, #43202e 0%, #6a2f34 62%, #8d4a3c 100%);
}
.injury-room::after { /* isflak nedtill så sälen står på något (CC0-istextur) */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 16%;
  background-image: url(/assets/textures/ice.png);
  background-size: 130px;
  background-color: #e8f6fd;
  background-blend-mode: luminosity;
  border-top: 3px solid rgba(255,255,255,.75);
  box-shadow: inset 0 6px 14px rgba(255,255,255,.75), inset 0 -10px 18px rgba(150,205,230,.45);
}
.injury-crash {
  position: absolute; top: 6%; left: 50%; transform: translateX(-50%);
  font-size: 3.4rem; line-height: 1;
  filter: drop-shadow(0 0 16px rgba(255,140,90,.8));
  animation: injury-crash 1.8s ease-in-out infinite;
}
@keyframes injury-crash {
  0%, 100% { transform: translateX(-50%) scale(1) rotate(-5deg); }
  50% { transform: translateX(-50%) scale(1.12) rotate(5deg); }
}
.injury-seal {
  /* Ner i isbandet: SVG:n har luft under fenorna, så en högre bottom får sälen
     att sväva ovanför isen i stället för att stå på den. */
  position: absolute; bottom: 6%; left: 50%; transform: translateX(-50%);
  width: 56%; width: min(56%, 250px); z-index: 3;
}
.injury-seal svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 8px 10px rgba(0,0,0,.45)); }
.injury-stars { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 4; pointer-events: none; }
.injury-star {
  position: absolute; font-size: 1.1rem;
  animation: injury-star var(--dur, 3s) ease-in-out infinite;
}
@keyframes injury-star {
  0%, 100% { opacity: .25; transform: translate(0, 0) rotate(0) scale(.8); }
  50% { opacity: 1; transform: translate(10px, -12px) rotate(180deg) scale(1.15); }
}
.injury-panel {
  background: linear-gradient(180deg, #2e1a22, #1d1016);
  border-top: 4px solid #b8362f;
  box-shadow: 0 -8px 20px rgba(0,0,0,.55);
}
.injury-title { font-size: 1.2rem; text-align: center; color: #ff9c8c; }
.injury-text { font-size: .92rem; line-height: 1.4; text-align: center; }
.injury-eff { text-align: center; color: #ffb3a3; opacity: .95; }

/* ---------- Sjukhuset: doktorns mottagning ---------- */
/* En ljus mottagning i mintgrönt och vitt: skylt med rött kors, syntavla,
   röntgenskåp, medicinskåp och en gammal spinkig doktor bakom skrivbordet.
   Samma z-index som de andra butiksscenerna, så man är kvar på isflaket när man
   stänger sjukhuset. */
.hospital {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 55;
  display: flex; flex-direction: column; align-items: center;
  background: #10333a;
}
.clinic, .clinic-panel { width: 100%; max-width: 560px; }
.clinic {
  position: relative; flex: 1; min-height: 280px; overflow: hidden;
  /* Mintgrön vägg med vitt bröstpanel nedtill. Överst ligger en riktig
     stucktextur (CC0, se CREDITS.md) i multiply, så väggen får putsstruktur
     i stället för att vara en platt tonad yta. */
  background-image:
    url(/assets/textures/plaster.png),
    linear-gradient(180deg, rgba(255,255,255,0) 0 62%, rgba(255,255,255,.9) 62% 100%),
    linear-gradient(180deg, #d8efec 0%, #c3e5e1 60%, #eef8f7 100%);
  background-size: 128px 128px, auto, auto;
  background-blend-mode: multiply, normal, normal;
}
.clinic::before { /* marmorplattor på golvet (CC0-textur), plattade i perspektiv */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 17%;
  background-image: url(/assets/textures/tile.png);
  background-size: 62px 34px;
  background-color: #dcebe9;
  background-blend-mode: multiply;
  border-top: 3px solid #9fc4c0;
  box-shadow: inset 0 12px 20px rgba(120,170,170,.3);
}
.clinic::after { /* mjukt lysrörsljus ovanifrån + vinjett */
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(255,255,255,.75), rgba(255,255,255,0) 70%),
    radial-gradient(ellipse at 50% 55%, rgba(0,0,0,0) 58%, rgba(20,60,60,.22));
}
.clinic-close {
  position: absolute; top: calc(8px + env(safe-area-inset-top)); left: 10px; z-index: 12;
  margin: 0; width: 40px; height: 40px;
  background: rgba(255,255,255,.9); color: #1f6b63; border-color: rgba(31,107,99,.3);
}

/* Skylt med rött kors över mottagningen */
.clinic-sign {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 6;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #eef6f6);
  border: 2px solid #4fb3a5;
  box-shadow: 0 4px 12px rgba(20,70,70,.28);
}
.clinic-sign-cross {
  font-size: 1.1rem; font-weight: 900; color: #d33a35; line-height: 1;
  text-shadow: 0 0 8px rgba(211,58,53,.35);
}
.clinic-sign-text {
  font-size: 1rem; font-weight: 800; letter-spacing: .1em; color: #1f6b63;
}

/* Syntavla på väggen: rader som blir mindre och mindre */
.clinic-chart {
  position: absolute; top: 15%; left: 3%; z-index: 1;
  width: 74px; padding: 6px 4px; border-radius: 3px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: #fdfefe; border: 1px solid #b9d4d1; color: #35595a;
  box-shadow: 0 3px 8px rgba(20,70,70,.18);
  transform: rotate(-2deg);
}
.clinic-chart b { font-size: .95rem; line-height: 1; }
.clinic-chart span { line-height: 1; letter-spacing: .06em; }
.clinic-chart span:nth-child(2) { font-size: .62rem; }
.clinic-chart span:nth-child(3) { font-size: .48rem; }
.clinic-chart span:nth-child(4) { font-size: .34rem; opacity: .8; }

/* Röntgenskåp med en lysande benbit */
.clinic-xray {
  position: absolute; top: 14%; left: 27%; width: 62px; height: 80px; z-index: 1;
  border-radius: 3px; border: 2px solid #cfe2e0;
  background: linear-gradient(180deg, #1d3f52, #2a5a70);
  box-shadow: inset 0 0 18px rgba(150,220,255,.45), 0 3px 8px rgba(20,70,70,.2);
}
.xray-bone {
  position: absolute; top: 18%; left: 50%; transform: translateX(-50%) rotate(12deg);
  width: 12px; height: 52px; border-radius: 6px;
  background: rgba(226,246,255,.85);
  box-shadow: 0 0 10px rgba(200,240,255,.8);
}
.xray-bone::before, .xray-bone::after {
  content: ''; position: absolute; left: -6px; width: 24px; height: 13px; border-radius: 50%;
  background: rgba(226,246,255,.85);
}
.xray-bone::before { top: -5px; }
.xray-bone::after { bottom: -5px; }

/* Medicinskåp på väggen: två hyllor med små flaskor */
.clinic-cabinet {
  position: absolute; top: 4%; right: 2%; width: 78px; z-index: 1;
  display: flex; flex-direction: column; gap: 5px; padding: 5px;
  border-radius: 4px; background: rgba(255,255,255,.75); border: 2px solid #b9d4d1;
  box-shadow: 0 3px 9px rgba(20,70,70,.2);
}
.cab-shelf {
  display: flex; align-items: flex-end; justify-content: space-around; gap: 3px;
  height: 26px; border-bottom: 2px solid #cfe2e0;
}
.phial {
  position: relative; display: block; width: 8px; height: 16px; border-radius: 2px 2px 3px 3px;
  border: 1px solid rgba(90,120,120,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.9) 0 30%, var(--liq, #6fc2d6) 30% 100%);
}
.phial::before { /* liten kork */
  content: ''; position: absolute; top: -4px; left: 1px;
  width: 6px; height: 4px; border-radius: 1px; background: #b0632f;
}
.p1 { --liq: #6fc2d6; }
.p2 { --liq: #e0913c; height: 20px; }
.p3 { --liq: #b06fd6; }
.p4 { --liq: #6cc07a; height: 13px; }
.p5 { --liq: #e05f5f; height: 18px; }
.p6 { --liq: #ffd166; }
.clinic-plant {
  position: absolute; bottom: 17%; left: 2%; font-size: 2.3rem; z-index: 2; line-height: 1;
  filter: drop-shadow(0 4px 5px rgba(20,70,70,.28));
}

/* Doktorn bakom skrivbordet. Underkanten ankras i PIXLAR mot skrivbordet (som är
   76 px högt) i stället för i procent, så hans långa fingrar alltid hamnar strax
   bakom bordsskivan – med procent skulle de sväva över bordet på höga skärmar
   och sjunka ner i det på låga. */
.doctor-wrap {
  /* +34px: doktorns underkant ankras i PIXLAR mot skrivbordet (76 px högt), inte
     i procent, så han sitter lika djupt bakom bordet på alla skärmhöjder. Med
     det här värdet skymtar bara knogarna över bordsskivan – händerna ritade i
     full figur läste som bakvända, och de behöver inte synas för att man ska
     förstå att han sitter med händerna på bordet. */
  position: absolute; bottom: calc(4% + 34px); right: 4%;
  width: 50vw; width: min(50vw, 232px); z-index: 5;
}
.doctor { cursor: pointer; }
.doctor-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 8px rgba(20,60,60,.3)); }
.doctor:active .doctor-svg { transform: scale(.98); }
/* Doktorn pratar torrt och trummar med sina långa fingrar */
.doc-talk { animation: doc-talk 3.1s ease-in-out infinite; transform-origin: 105px 82px; }
@keyframes doc-talk {
  0%, 62%, 100% { transform: scaleY(1); }
  70% { transform: scaleY(1.9); }
  80% { transform: scaleY(.7); }
  90% { transform: scaleY(1.6); }
}
/* Animationen ligger på den INRE gruppen, alltså i handens egna koordinater:
   origo 0 0 är handleden, så trummandet roterar kring den – inte kring en punkt
   ute i SVG:n. */
.doc-drum { animation: doc-drum 1.9s ease-in-out infinite; transform-origin: 0 0; }
@keyframes doc-drum {
  0%, 74%, 100% { transform: translateY(0) rotate(0); }
  80% { transform: translateY(-3px) rotate(-2deg); }
  88% { transform: translateY(0) rotate(1.5deg); }
}
/* Doktorns pratbubbla: ankrad i SCENEN (inte i hans egen låda) till vänster, med
   underkanten strax ovanför sälen. Den växer alltså UPPÅT när repliken är lång –
   annars kunde en lång replik lägga sig rakt över sälen på en låg skärm. */
.doctor-speech {
  position: absolute; left: 3%; bottom: 48%; z-index: 7;
  background: #ffffff; color: #24484a; padding: 8px 12px; border-radius: 14px;
  font-size: .8rem; font-weight: 600; width: 48%; width: min(48%, 250px); line-height: 1.3;
  opacity: 0; transform: translateY(6px) scale(.96); transition: opacity .25s, transform .25s;
  box-shadow: 0 4px 14px rgba(20,60,60,.3); border: 2px solid #4fb3a5;
}
.doctor-speech.show { opacity: 1; transform: translateY(0) scale(1); }
.doctor-speech.mumble { opacity: .72; font-style: italic; background: #f0f8f7; border-color: #b9d4d1; color: #4a6b6b; }

/* Skrivbordet: träskiva med flaskor och sjukhusgods ovanpå */
.doctor-desk {
  position: absolute; bottom: 4%; right: 1%; z-index: 6;
  width: 62vw; width: min(62vw, 300px); height: 76px;
}
.desk-top { /* bordsskivan: trätextur (CC0) i en ljus, upplyst ton */
  position: absolute; top: 0; left: 0; right: 0; height: 13px; border-radius: 3px;
  background-image: url(/assets/textures/wood.png);
  background-size: 92px;
  background-color: #dcb686;
  background-blend-mode: multiply;
  box-shadow: 0 3px 7px rgba(40,30,10,.35), inset 0 1px 0 rgba(255,255,255,.55);
}
.desk-front { /* framsidan: samma träslag men i skugga */
  position: absolute; top: 12px; left: 8px; right: 8px; bottom: 0; border-radius: 0 0 3px 3px;
  background-image: url(/assets/textures/wood.png);
  background-size: 118px;
  background-color: #a97b4e;
  background-blend-mode: multiply;
  box-shadow: inset 0 -6px 12px rgba(0,0,0,.28);
}
.desk-front::after { /* låda: fräst kant i träet (texturen syns igenom) */
  content: ''; position: absolute; top: 12px; left: 14%; width: 38%; height: 22px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(0,0,0,.16));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.25);
}
.desk-front::before { /* handtag på lådan */
  content: ''; position: absolute; top: 21px; left: 26%; width: 22px; height: 4px; border-radius: 2px;
  background: linear-gradient(180deg, #f0dcb4, #9b7b4a);
  box-shadow: 0 1px 2px rgba(0,0,0,.45);
}
.desk-things {
  position: absolute; left: 8px; right: 8px; bottom: 70px; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 2px;
}
.desk-emoji { font-size: 1.05rem; line-height: 1; filter: drop-shadow(0 2px 2px rgba(20,60,60,.3)); }
/* Läkemedelsflaskor i olika färger och storlekar */
.med-bottle {
  position: relative; display: block; width: 14px; height: 26px; border-radius: 3px 3px 4px 4px;
  border: 1px solid rgba(80,110,110,.4);
  background:
    linear-gradient(90deg, rgba(255,255,255,.65) 0 2px, rgba(255,255,255,0) 5px 100%),
    linear-gradient(180deg, rgba(255,255,255,.9) 0 24%, var(--liq, #6fc2d6) 24% 100%);
  box-shadow: 0 2px 3px rgba(20,60,60,.3);
}
.med-bottle::before { /* kork */
  content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: 100%;
  width: 9px; height: 6px; border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #c1743a, #94511f);
}
.med-bottle::after { /* etikett med streck */
  content: ''; position: absolute; left: 1px; right: 1px; top: 42%; height: 32%;
  background:
    linear-gradient(180deg, transparent 0 30%, rgba(120,120,120,.5) 30% 40%, transparent 40% 60%, rgba(120,120,120,.4) 60% 70%, transparent 70%),
    rgba(255,255,255,.92);
}
.mb1 { --liq: #6fc2d6; }
.mb2 { --liq: #e0913c; width: 12px; height: 21px; }
.mb3 { --liq: #b06fd6; height: 29px; }
.mb4 { --liq: #6cc07a; width: 17px; height: 19px; }

/* Sälen på besök hos doktorn */
.clinic-seal {
  position: absolute; bottom: 18%; left: 6%; width: 36vw; width: min(36vw, 156px); z-index: 5;
  animation: bob 3.4s ease-in-out infinite;
}
.clinic-seal svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 8px rgba(20,60,60,.32)); }
/* Sälen gör en rörelseövning när man träffar rätt i rehaben */
.clinic-seal.stretch { animation: clinic-stretch .6s ease; }
@keyframes clinic-stretch {
  0% { transform: scale(1) rotate(0); }
  35% { transform: scale(1.09, .94) rotate(-6deg); }
  70% { transform: scale(.96, 1.06) rotate(6deg); }
  100% { transform: scale(1) rotate(0); }
}

/* Ljus, klinisk bottenpanel */
.clinic-panel {
  /* Både tak OCH golv på höjden. Taket (47dvh) hindrar att rummet blir så platt
     att doktorn och sälen knappt får plats när panelen är full av rehab-innehåll.
     Golvet (32dvh) hindrar motsatsen: med en frisk säl har panelen nästan inget
     innehåll, och då blev rummet så högt att doktorn och sälen samlades i
     nederkanten under en stor tom vägg. */
  max-height: 47vh; max-height: 47dvh;
  min-height: 32vh; min-height: 32dvh;
  background: linear-gradient(180deg, #f5fbfa, #e2efee);
  border-top: 4px solid #4fb3a5; color: #244a4a;
  box-shadow: 0 -8px 20px rgba(20,60,60,.25);
}
.clinic-panel .shop-wallet span { background: #fff; border: 1px solid #bcdcd8; color: #1f6b63; }
.clinic-panel .shop-section h3 { color: #1f6b63; }
.clinic-panel .shop-section h3 small { color: #5e918c; opacity: 1; }
.clinic-panel .hint { color: #547f7c; opacity: 1; }
.clinic-panel .buy-card { background: #fff; border: 1px solid #bcdcd8; color: #244a4a; }
.clinic-panel .buy-card b { color: #1f6b63; }
.clinic-panel .buy-card .buy-info small { color: #547f7c; opacity: 1; }
.clinic-panel .buy-card .buy-eff { color: #c0512c; font-weight: 700; }
.clinic-panel .buy-cost { background: #4fb3a5; color: #fff; }
.clinic-diag { font-size: .88rem; line-height: 1.4; color: #35595a; }
/* Diagnos + behandling är två sektioner i ett svep – egen luft mellan dem */
#clinic-care { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Rehaben: rörelseövningarna som minispel ---------- */
/* Övningarna byggs av public/js/rehab.js i #rehab-stage och blandas: rörelse,
   lyft, balans och härma doktorn. De blir svårare för varje klarad övning, och
   servern räknar dem och läker skadan vid målet. En miss = börja om. */
.rehab-pips { display: flex; justify-content: center; gap: 5px; padding: 2px 0 6px; }
.rehab-pips i {
  display: block; width: 11px; height: 11px; border-radius: 50%;
  background: rgba(31,107,99,.16); box-shadow: inset 0 1px 2px rgba(20,60,60,.2);
}
.rehab-pips i.done { background: #3fae63; box-shadow: 0 0 7px rgba(63,174,99,.6); }
/* En miss nollställer räkningen: prickarna skakar till och blinkar rött */
.rehab-pips.lost { animation: rehab-miss .45s ease; }
.rehab-pips.lost i { animation: rehab-pip-lost .6s ease; }
@keyframes rehab-pip-lost {
  0%, 30% { background: #c0512c; box-shadow: 0 0 7px rgba(192,81,44,.6); }
}
.rehab-move {
  text-align: center; font-size: 1rem; font-weight: 800; color: #c0512c; padding-bottom: 6px;
}
/* Ingen border: ramen ritas som en INRE box-shadow i stället, så att procenten i
   fältets left/width och i träffkontrollens klickposition räknas mot exakt samma
   box. Hög stapel för att den ska vara lätt att träffa med tummen. */
.rehab-bar {
  position: relative; height: 46px; border-radius: 999px; overflow: hidden;
  cursor: pointer; touch-action: none;
  background: linear-gradient(180deg, #d3e6e4, #b7d2cf);
  box-shadow: inset 0 0 0 2px #9fc4c0, inset 0 2px 5px rgba(20,60,60,.2);
}
/* Det rörliga målet. Ingen transition – det flyttas varje bildruta av
   startRehab(), och en övergång skulle göra att det man ser inte är där det
   logiskt är. */
.rehab-zone {
  position: absolute; top: 0; bottom: 0; left: 32%; width: 36%;
  background: linear-gradient(180deg, #8ce7a6, #3fae63);
  box-shadow: 0 0 12px rgba(63,174,99,.6), inset 0 1px 0 rgba(255,255,255,.6);
}
.rehab-zone::after { /* liten hand-ikon så det är tydligt att man ska peta HÄR */
  content: '👆'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 1.1rem; opacity: .55;
}
/* Scenen där övningen byggs. Fast minsta höjd, så att panelen inte hoppar när
   en lägre övning (rörelsestapeln) följer på en högre (lyftet). Inga flex-gap
   (Chrome 72) – avstånden är marginaler och grid. */
.rehab-stage {
  min-height: 98px; display: flex; flex-direction: column; justify-content: center;
  border-radius: 18px;
}
.rehab-stage.hit { animation: rehab-hit .4s ease; }
.rehab-stage.miss { animation: rehab-miss .4s ease; }

/* Lyft: mätaren fylls medan man håller inne */
.rehab-bar.lift { cursor: default; }
.rehab-bar.lift .rehab-zone::after { content: none; }
.lift-fill {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0;
  background: linear-gradient(180deg, rgba(79,179,165,.45), rgba(31,107,99,.5));
  border-right: 4px solid #1f6b63;
}
.rehab-hold {
  margin-top: 8px; padding: 10px 12px; border: none; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, #5cc3b5, #3a9c8f); color: #fff;
  font-weight: 800; font-size: .95rem; box-shadow: 0 4px 0 #2c7a70;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.rehab-stage.holding .rehab-hold { transform: translateY(3px); box-shadow: 0 1px 0 #2c7a70; }

/* Balans: bollen på brädan, en pil på var sida */
.bal { display: grid; grid-template-columns: 54px 1fr 54px; grid-column-gap: 8px; align-items: center; }
.bal-btn {
  height: 54px; border: none; border-radius: 16px; cursor: pointer; font-size: 1.5rem;
  background: #fff; box-shadow: 0 3px 0 #9fc4c0, inset 0 0 0 2px #bcdcd8;
  touch-action: none; -webkit-user-select: none; user-select: none;
}
.bal-btn.push { animation: bal-push .18s ease; }
@keyframes bal-push { 50% { transform: translateY(3px) scale(.94); background: #e3f4f1; } }
/* Brädan: grön mitt, röd mot kanterna där bollen rullar av */
.bal-track {
  position: relative; height: 54px; border-radius: 999px; overflow: hidden;
  background: linear-gradient(90deg, #e9a08a, #f3d9b5 14%, #bfe8c9 32%, #8ce7a6 50%, #bfe8c9 68%, #f3d9b5 86%, #e9a08a);
  box-shadow: inset 0 0 0 2px #9fc4c0, inset 0 2px 5px rgba(20,60,60,.2);
}
.bal-safe { position: absolute; top: 8px; bottom: 8px; left: 50%; width: 2px; margin-left: -1px; background: rgba(31,107,99,.35); }
/* Badboll: tre färgklyftor som snurrar när den rullar */
.bal-ball {
  position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, #e2483d 33%, #fff 33%, #fff 66%, #3b8fe0 66%);
  box-shadow: inset -4px -5px 8px rgba(0,0,0,.22), 0 3px 5px rgba(20,60,60,.3);
}
.bal-ready {
  position: absolute; top: 0; bottom: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #1f6b63; background: rgba(255,255,255,.55);
}
.bal-time { margin-top: 8px; height: 7px; border-radius: 999px; overflow: hidden; background: rgba(31,107,99,.16); }
.bal-time i { display: block; height: 100%; width: 0; background: #3fae63; }

/* Härma doktorn: fyra knappar som lyser upp i tur och ordning */
.harma { display: grid; grid-template-columns: repeat(4, 1fr); grid-column-gap: 8px; }
.harma-btn {
  height: 70px; border: none; border-radius: 16px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #fff; color: #1f6b63; box-shadow: 0 3px 0 #9fc4c0, inset 0 0 0 2px #bcdcd8;
  touch-action: none; -webkit-user-select: none; user-select: none;
  transition: transform .08s, background .08s, box-shadow .08s;
}
.harma-btn b { font-size: 1.5rem; line-height: 1.1; }
.harma-btn small { margin-top: 2px; font-size: .7rem; font-weight: 800; }
/* Medan doktorn visar är knapparna dova – utom den som lyser just nu */
.harma-btn:disabled { opacity: .55; cursor: default; color: #1f6b63; }
.harma-btn.lit, .harma-btn:disabled.lit {
  opacity: 1; background: #ffd23f; color: #7a4a00; transform: scale(1.08);
  box-shadow: 0 0 0 3px #f2a33a, 0 0 18px rgba(242,163,58,.9);
  transition: none; /* tänds direkt – doktorns visning är kort */
}
.rehab-stage.your-turn .harma-btn:not(.lit) { box-shadow: 0 3px 0 #3fae63, inset 0 0 0 2px #8ce7a6; }

/* Lyftet tar emot: sälen darrar medan man håller inne */
.clinic-seal.strain { animation: clinic-strain .16s linear infinite; }
@keyframes clinic-strain {
  0%, 100% { transform: translateX(0) scale(1.02, .98); }
  50% { transform: translateX(2px) scale(1.02, .98); }
}
@keyframes rehab-hit {
  0% { box-shadow: inset 0 2px 5px rgba(20,60,60,.2); }
  40% { box-shadow: 0 0 0 4px rgba(63,174,99,.55); border-color: #3fae63; }
  100% { box-shadow: inset 0 2px 5px rgba(20,60,60,.2); }
}
@keyframes rehab-miss {
  0%, 100% { transform: translateX(0); border-color: #9fc4c0; }
  25% { transform: translateX(-5px); border-color: #c0512c; }
  75% { transform: translateX(5px); border-color: #c0512c; }
}
#clinic-rehab .btn.primary { margin-top: 8px; }
/* Genvägen förbi övningarna: diskret länkknapp, inte en till stor knapp – man
   ska göra övningarna i första hand, inte lockas att betala sig ur dem. */
.rehab-skip {
  align-self: center; margin-top: 2px; padding: 6px 4px;
  background: none; border: none; cursor: pointer;
  color: #5e918c; font-size: .76rem; font-weight: 700; text-decoration: underline;
}
.rehab-skip:disabled { opacity: .45; cursor: default; text-decoration: none; }

/* ---------- Garderobsflikar ---------- */
.wardrobe-tabs { display: flex; gap: 8px; margin: 4px 0 8px; }
.wardrobe-tab {
  flex: 1; padding: 8px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08);
  color: var(--text); font-size: .82rem; font-weight: 700;
}
.wardrobe-tab.active { background: var(--sun); color: #4a3200; border-color: var(--sun); }
.wardrobe-tab:active { transform: scale(.97); }

/* Bertas shop: hela raden provar prylen (tryck var som helst utom Köp-knappen) */
.berta-card { align-items: center; padding: 10px 12px; gap: 10px; cursor: pointer; }
.berta-card:active { transform: scale(.98); }
.berta-card .buy-emoji { font-size: 1.6rem; }
.berta-card .buy-info { min-width: 0; }
.berta-card.previewing { outline: 3px solid #e368a8; outline-offset: -3px; background: #fff4fb; }
.berta-card .buy-cost {
  min-height: 44px; min-width: 64px; padding: 8px 10px; border: none; cursor: pointer; border-radius: 12px;
  font-size: .95rem; white-space: nowrap; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.berta-card .berta-go:active { transform: scale(.94); }
.berta-card .berta-go:disabled { opacity: .45; cursor: default; }
.bshop-panel .owned-tag { background: #bfe6cc; color: #256b45; font-weight: 800; }

/* Bertas shop: kategoriflikar ovanför varulistan */
.berta-tabs {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.berta-tabs::-webkit-scrollbar { display: none; }
.berta-tab {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: #fff; border: 1px solid #f3c7de; border-radius: 12px; padding: 7px 11px;
  color: #8a2f66; cursor: pointer; font-size: 1.1rem; min-width: 58px;
}
.berta-tab span { font-size: .62rem; font-weight: 700; opacity: .85; white-space: nowrap; }
.berta-tab.active { background: #e368a8; color: #fff; border-color: #e368a8; }
.berta-tab.active span { opacity: 1; }
.berta-tab:active { transform: scale(.96); }

/* Notisinställningar (i ljudpanelen) */
.sound-sep { border: none; border-top: 1px solid rgba(255,255,255,.15); margin: 4px 0; width: 100%; }

/* Spinner medan ett spel startar (nätverksanropet innan spelvyn syns) */
.game-loading {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 65;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11,57,84,.55);
}
.spinner {
  width: 54px; height: 54px; border-radius: 50%;
  border: 5px solid rgba(255,255,255,.25); border-top-color: var(--sun);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Notistyper (kryssrutor under huvudtoggeln) */
.notif-prefs { display: flex; flex-direction: column; gap: 8px; margin-top: -4px; }
.notif-pref-row {
  display: flex; align-items: center; gap: 10px; font-size: .92rem; font-weight: 600;
  padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.06);
}
.notif-pref-row input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--sun); }

/* Underrubriker i inställningspanelen (Ljud/Notiser/Konto) */
.settings-h3 { font-size: .95rem; margin: 0 0 -2px; opacity: .85; }

/* ---------- Ytan: isflaket ---------- */
/* Länken högst upp i hemvattnet: sälen simmar upp till ytan. Guppar lite så den
   syns – OBS att keyframes MÅSTE upprepa translateX(-50%), annars äter
   animationen upp centreringen (transform ersätts helt, komponeras inte). */
.surface-link {
  position: absolute; top: 10px; left: 50%; z-index: 3;
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px 7px 11px; border-radius: 999px;
  border: 2px solid rgba(255,255,255,.6);
  background: rgba(8,30,45,.55); color: #fff;
  font-size: 1.2rem; cursor: pointer; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  animation: surface-hint 3.4s ease-in-out infinite;
}
.surface-link span { font-size: .82rem; font-weight: 700; letter-spacing: .02em; }
.surface-link:active { animation: none; transform: translateX(-50%) scale(.94); }
@keyframes surface-hint {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-4px); }
}

/* Sälen simmar upp ur bild när man går till ytan (och ner igen när man kommer
   hem). Ersätter avsiktligt gupp-animationen på .seal-stage medan den kör. */
.seal-stage.swim-up { animation: swim-up .8s ease-in forwards; }
@keyframes swim-up {
  0% { transform: translateY(0) scale(1) rotate(0); opacity: 1; }
  22% { transform: translateY(14px) scale(.99) rotate(-4deg); opacity: 1; }
  100% { transform: translateY(-125%) scale(.5) rotate(-12deg); opacity: 0; }
}
.seal-stage.swim-down { animation: swim-down .75s ease-out; }
@keyframes swim-down {
  /* Sälen ska bli synlig tidigt – annars blinkar hemvattnet tomt en stund efter
     att ytan dragits bort. */
  0% { transform: translateY(-125%) scale(.5) rotate(-12deg); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translateY(0) scale(1) rotate(0); opacity: 1; }
}

/* Scen-overlay: ljus himmel över hav. Ligger UNDER butikernas scener (z-index 55)
   så man är kvar på flaket när man stänger fiskaffären eller Bertas shop, och
   slutar ovanför bottennaven (--nav-h mäts upp av JS när ytan öppnas) så att
   Spel/Topplista/Väska går att nå precis som på hemskärmen. */
.surface {
  position: fixed; top: 0; left: 0; right: 0; bottom: var(--nav-h, 58px); z-index: 50;
  display: flex; flex-direction: column; align-items: center;
  background: #bfe9fb;
}
.floe-scene, .floe-panel { width: 100%; max-width: 560px; }

/* Upp och ner genom ytan: scenen glider ner på plats när sälen kommer upp, och
   dras uppåt ur bild när den dyker ner igen – så rörelsen syns åt rätt håll. */
.surface.rising { animation: surface-rise .42s ease-out; }
@keyframes surface-rise {
  0% { opacity: 0; transform: translateY(-7%) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.surface.diving { animation: surface-dive .38s ease-in forwards; }
@keyframes surface-dive {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-9%) scale(1.07); }
}
.floe-scene {
  /* Flakets underkant styr var sälen, skyltarna och spöet sitter – en variabel
     så allt flyttar ihop om kompositionen justeras. */
  --floe-bottom: 24%;
  position: relative; flex: 1; min-height: 210px; overflow: hidden;
  background: linear-gradient(180deg, #4fb8e8 0%, #8bd7f4 46%, #c9efff 74%, #e6f8ff 100%);
}
.floe-close {
  position: absolute; top: calc(8px + env(safe-area-inset-top)); left: 10px; z-index: 9;
  margin: 0; width: 40px; height: 40px;
  background: rgba(255,255,255,.75); color: #0d4a63; border-color: rgba(13,74,99,.25);
}

/* Solen som gassar högst upp till höger */
.floe-sun {
  position: absolute; top: 6%; right: 9%; width: 66px; height: 66px; z-index: 1;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff6c8 0%, #ffe680 42%, rgba(255,214,90,.55) 62%, rgba(255,214,90,0) 74%);
  animation: sun-pulse 6s ease-in-out infinite;
}
.floe-sun .sun-core {
  position: absolute; top: 20%; right: 20%; bottom: 20%; left: 20%; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fffdf0, #ffd84d 70%, #ffc42e);
  box-shadow: 0 0 18px rgba(255,214,77,.85);
}
@keyframes sun-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* Ljusa moln som seglar förbi i olika höjd och takt */
.floe-cloud {
  position: absolute; z-index: 1; pointer-events: none;
  width: 74px; height: 22px; border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 2px 10px rgba(120,180,210,.35);
  animation: cloud-drift var(--dur, 46s) linear infinite;
}
.floe-cloud::before, .floe-cloud::after {
  content: ''; position: absolute; border-radius: 50%; background: inherit;
}
.floe-cloud::before { width: 34px; height: 34px; left: 12px; top: -15px; }
.floe-cloud::after { width: 24px; height: 24px; right: 14px; top: -10px; }
.floe-cloud-1 { top: 12%; --dur: 52s; }
.floe-cloud-2 { top: 26%; transform: scale(.72); --dur: 68s; animation-delay: -22s; opacity: .9; }
.floe-cloud-3 { top: 5%; transform: scale(1.15); --dur: 84s; animation-delay: -48s; opacity: .8; }
.floe-cloud-4 { top: 19%; transform: scale(.9); --dur: 58s; animation-delay: -36s; opacity: .85; }
.floe-cloud-5 { top: 33%; transform: scale(.6); --dur: 74s; animation-delay: -11s; opacity: .7; }
@keyframes cloud-drift { from { left: -30%; } to { left: 115%; } }

/* Havet nedtill: blått vatten med glitter och små vågkammar. Hela vattnet är
   klickbart – då dyker sälen ner till hemvattnet igen (se .floe-dive). */
.floe-sea {
  position: absolute; left: 0; right: 0; bottom: 0; height: 52%; z-index: 2;
  cursor: pointer;
  background-image: url(/assets/textures/water.png);
  background-size: 190px;
  background-color: #2b9ac4;
  background-blend-mode: soft-light;
  box-shadow: inset 0 10px 18px rgba(255,255,255,.28), inset 0 -30px 40px rgba(6,50,74,.5);
}
.floe-sea::after { /* djupare blått mot botten */
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(180deg, rgba(150,225,250,.45), rgba(10,70,100,.15) 40%, rgba(6,48,72,.55));
}
/* Solglitter: två oregelbundet förskjutna punktmönster i olika storlek, så det
   inte läser som ett prickigt rutnät. */
.floe-glitter {
  position: absolute; top: 0; right: 0; bottom: 46%; left: 0;
  background-image:
    radial-gradient(circle at 7px 5px, rgba(255,255,255,.85) 1.1px, transparent 1.8px),
    radial-gradient(circle at 23px 14px, rgba(255,255,255,.55) .8px, transparent 1.4px);
  background-size: 53px 29px, 37px 19px;
  animation: glitter 5.5s ease-in-out infinite;
}
@keyframes glitter { 0%, 100% { opacity: .22; } 50% { opacity: .45; } }
.floe-wave {
  position: absolute; top: 12%; left: -50%; width: 200%; height: 12px; opacity: .5;
  background: radial-gradient(circle at 10px -4px, transparent 11px, #fff 12px, transparent 13px) repeat-x;
  background-size: 34px 12px;
  animation: waves 6s linear infinite;
}
.floe-wave-2 { top: 34%; opacity: .3; animation-duration: 9s; }

/* Fiskar som hoppar i det främre vattnet (spawnas av JS, ovanpå isflaket i
   stapelordningen men under sälen) */
.floe-jumper {
  position: absolute; z-index: 5; font-size: 1.4rem; pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0,40,60,.4));
  animation: fish-jump 1.7s ease-out forwards;
}
@keyframes fish-jump {
  0% { transform: translate(0, 14px) rotate(-40deg) scale(.8); opacity: 0; }
  18% { opacity: 1; }
  50% { transform: translate(18px, -30px) rotate(0deg) scale(1); }
  82% { opacity: 1; }
  100% { transform: translate(38px, 20px) rotate(58deg) scale(.85); opacity: 0; }
}

/* Isflaket sälen står på: ojämnt vitt flak med issnitt och blå undervattenskant */
/* Små isflak långt bort vid horisonten – ger djup åt havet */
.floe-far {
  position: absolute; z-index: 1; height: 9px; opacity: .85;
  border-radius: 45% 55% 40% 60% / 110% 110% 30% 30%;
  background: linear-gradient(180deg, #fbfeff, #d5eefa);
  box-shadow: 0 1px 2px rgba(60,150,190,.5);
}
/* Flyttade in från kanterna och gjorda bredare: skyltarna som står på dem ska få
   plats i sin helhet även på en smal telefon (förut klipptes sjukhusskylten). */
.floe-far-1 { width: 58px; left: 12%; top: 1%; }
.floe-far-2 { width: 58px; right: 12%; top: 7%; }

/* Liten skylt på det bortre flaket: vägen till sälspat. Litet, eftersom flaket
   är långt bort. */
.floe-spa {
  /* Centrerad över .floe-far-2 (right: 12%, bredd 58px) med translateX(-50%), så
     stolpen landar mitt på ön oavsett hur bred texten är. */
  position: absolute; right: calc(12% + 29px); top: 7%; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  background: none; border: none; padding: 0; cursor: pointer;
  transform: translate(50%, -100%);
}
.spa-board {
  font-size: .72rem; font-weight: 800; white-space: nowrap; letter-spacing: .02em;
  padding: 3px 7px; border-radius: 4px;
  /* guldskylt – spat är den lyxiga adressen på flaket */
  background: linear-gradient(180deg, #fdf3d0, #d9b551 65%, #b8912f);
  border: 1px solid #8a6a1c; color: #4d3708;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
  box-shadow: 0 1px 4px rgba(10,50,70,.4);
}
.spa-post { width: 4px; height: 12px; background: linear-gradient(90deg, #6b4520, #a9702f 45%, #6b4520); }
.floe-spa:active { transform: translate(50%, -100%) scale(.94); }

/* Liten skylt på den andra ön längre bort: vägen till sjukhuset, där doktorn
   lagar skadade sälar. Litet, eftersom ön är långt bort. */
.floe-hospital {
  /* Centrerad över .floe-far-1 (left: 12%, bredd 58px) på samma sätt som
     sälspaskylten – förut var den vänsterankrad vid kanten och klipptes. */
  position: absolute; left: calc(12% + 29px); top: 1%; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  background: none; border: none; padding: 0; cursor: pointer;
  transform: translate(-50%, -100%);
}
.hospital-board {
  font-size: .72rem; font-weight: 800; white-space: nowrap; letter-spacing: .02em;
  padding: 3px 7px; border-radius: 4px;
  background: #fff; border: 1px solid #c62828; color: #c62828;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  box-shadow: 0 1px 4px rgba(10,50,70,.4);
}
.hospital-post { width: 4px; height: 12px; background: linear-gradient(90deg, #6b4520, #a9702f 45%, #6b4520); }
.floe-hospital:active { transform: translate(-50%, -100%) scale(.94); }

.floe {
  position: absolute; bottom: var(--floe-bottom); left: 50%; transform: translateX(-50%);
  width: 90%; width: min(90%, 450px); height: 68px; z-index: 4;
  background-image: url(/assets/textures/ice.png);
  background-size: 130px;
  background-color: #f2fbff;
  background-blend-mode: luminosity;
  clip-path: polygon(9% 0%, 26% 6%, 47% 0%, 68% 5%, 88% 1%, 100% 34%, 94% 82%, 74% 100%, 30% 97%, 6% 78%, 0% 30%);
  box-shadow: inset 0 6px 12px rgba(255,255,255,.9), inset 0 -14px 18px rgba(150,205,230,.55);
}
.floe-edge { /* blåaktig kant som sticker ner i vattnet framför flaket */
  position: absolute; left: 4%; right: 4%; bottom: -9px; height: 22px;
  background: linear-gradient(180deg, rgba(140,215,240,.95), rgba(70,170,205,.35));
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  filter: blur(.4px);
}

/* Skyltarna på var sin sida om sälen: träskylt på stolpe med pil */
.floe-sign {
  position: absolute; bottom: calc(var(--floe-bottom) + 24px); z-index: 6;
  display: flex; flex-direction: column; align-items: center;
  background: none; border: none; padding: 0; cursor: pointer;
  animation: sign-sway 5s ease-in-out infinite;
}
.floe-sign-left { left: 3%; }
.floe-sign-right { right: 3%; }
.floe-sign:active { animation: none; transform: scale(.95); }
@keyframes sign-sway {
  0%, 100% { transform: rotate(-1.2deg); }
  50% { transform: rotate(1.2deg); }
}
.sign-board {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 8px; border-radius: 6px;
  background-image: url(/assets/textures/wood.png);
  background-size: 90px;
  background-color: #b9803f;
  background-blend-mode: multiply;
  border: 2px solid #7a4d22;
  box-shadow: 0 3px 6px rgba(10,50,70,.35), inset 0 1px 0 rgba(255,255,255,.35);
  color: #fff8ea; text-shadow: 0 1px 2px rgba(60,30,0,.8);
}
.sign-text { font-size: .68rem; font-weight: 800; letter-spacing: .01em; white-space: nowrap; }
.sign-arrow { font-size: .8rem; line-height: 1; }
.sign-post {
  width: 8px; height: 34px; margin-top: -1px;
  background: linear-gradient(90deg, #6b4520, #a9702f 40%, #6b4520);
  border-radius: 0 0 2px 2px;
}

/* Sälen på flaket. Höjden anges som flakets underkant (20%) + pixlar, så sälen,
   skyltarna och spöet håller ihop med isen oavsett hur hög scenen blir. */
.floe-seal {
  position: absolute; bottom: calc(var(--floe-bottom) + 28px); left: 50%; z-index: 7;
  width: 30vw; width: min(30vw, 132px); transform: translateX(-50%);
  cursor: pointer;
}
.floe-seal svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 7px rgba(10,60,85,.4)); }
.floe-seal-bob { animation: bob 3.6s ease-in-out infinite; } /* eget lager, se transform-fällan ovan */
.floe-seal.perk .floe-seal-bob { animation: seal-perk .7s ease; }

/* Metspöet med lina och flöte – syns bara medan sälen metar. Lagret täcker hela
   scenen så spö, lina och flöte kan placeras i scenens koordinater (och därmed
   hänga ihop med isflaket). Linan mäts upp av JS (layoutRodLine) mellan
   spötoppen och flötet, så den träffar rätt i alla skärmhöjder. */
.floe-rod {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 8; pointer-events: none;
  opacity: 0; transition: opacity .25s;
}
.floe-scene.casting .floe-rod { opacity: 1; }
.rod-stick {
  position: absolute; left: calc(50% + 8px); bottom: calc(var(--floe-bottom) + 32px);
  width: 4px; height: 78px; border-radius: 2px;
  background: linear-gradient(180deg, #f0dcb4, #8a5a2b);
  transform-origin: bottom center; transform: rotate(34deg);
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.rod-line {
  position: absolute; left: 0; top: 0; width: 1.5px; height: 0;
  transform-origin: top center;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.55));
}
.rod-bobber {
  /* Procent nedåt (inte flakets kant + pixlar) så flötet hamnar i det främre
     vattnet även när scenen krymper – t.ex. när metluckan är uppe. */
  position: absolute; left: calc(50% + 86px); bottom: 11%;
  width: 13px; height: 13px; border-radius: 50%;
  background: linear-gradient(180deg, #ff5d5d 0 50%, #fff 50% 100%);
  border: 1px solid rgba(120,20,20,.5);
  box-shadow: 0 2px 4px rgba(0,30,50,.35);
  animation: bobber-bob 1.5s ease-in-out infinite;
}
@keyframes bobber-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.02); }
}
/* Napp! flötet dyker snabbt precis innan fångsten visas */
.floe-scene.bite .rod-bobber { animation: bobber-bite .45s ease-in-out infinite; }
@keyframes bobber-bite {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(7px) scale(.9, 1.1); }
}

/* Ringar i vattnet där flötet landar */
.floe-ring {
  position: absolute; z-index: 5; pointer-events: none;
  width: 26px; height: 10px; border: 2px solid rgba(255,255,255,.8); border-radius: 50%;
  animation: ring-spread 1.1s ease-out forwards;
}
@keyframes ring-spread {
  0% { transform: scale(.3); opacity: .9; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Fångsten flyger upp ur vattnet (fisk, mynt, skrot …) */
.floe-loot {
  position: absolute; z-index: 9; font-size: 2rem; pointer-events: none;
  animation: loot-rise 1.9s ease-out forwards;
  filter: drop-shadow(0 3px 5px rgba(0,40,60,.45));
}
@keyframes loot-rise {
  0% { transform: translate(-50%, 10px) scale(.4) rotate(-20deg); opacity: 0; }
  20% { opacity: 1; }
  55% { transform: translate(-50%, -74px) scale(1.15) rotate(10deg); opacity: 1; }
  100% { transform: translate(-50%, -104px) scale(1) rotate(-6deg); opacity: 0; }
}

/* Sälens pratbubbla på flaket (vad som kom upp) */
.floe-speech {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 10; max-width: 84%; text-align: center;
  background: rgba(255,255,255,.94); color: #0e4257;
  padding: 8px 14px; border-radius: 14px; font-weight: 700; font-size: .88rem;
  box-shadow: 0 3px 10px rgba(10,60,85,.28);
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.floe-speech.show { opacity: 1; }

/* Fiskeplatsen: en boj som guppar i vattnet till vänster – öppnar metluckan.
   Ligger ovanpå vattnet men stoppar klicket, så man inte dyker ner i stället. */
.floe-fishspot {
  position: absolute; left: 7%; bottom: 13%; z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; padding: 0; cursor: pointer;
  animation: buoy-bob 2.8s ease-in-out infinite;
}
.fishspot-buoy {
  width: 40px; height: 40px; border-radius: 50%; font-size: 1.3rem;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #ff6b6b 0 48%, #fff 48% 100%);
  border: 2px solid rgba(120,20,20,.45);
  box-shadow: 0 3px 6px rgba(0,40,60,.4), inset 0 -3px 6px rgba(0,0,0,.15);
}
.fishspot-label {
  font-size: .68rem; font-weight: 800; white-space: nowrap;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(6,50,72,.72); color: #eaf8ff;
  border: 1px solid rgba(255,255,255,.35);
}
.floe-fishspot:active { animation: none; transform: scale(.94); }
@keyframes buoy-bob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-6px) rotate(4deg); }
}

/* Tydlig skylt om att vattnet tar en ner igen (hela havet är klickbart) */
.floe-dive {
  position: absolute; left: 50%; bottom: 3%; z-index: 6;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px; cursor: pointer;
  font-size: .74rem; font-weight: 800; color: #eaf8ff; white-space: nowrap;
  background: rgba(6,50,72,.62); border: 1px solid rgba(255,255,255,.4);
  box-shadow: 0 2px 8px rgba(0,40,60,.35);
  animation: dive-hint 3.2s ease-in-out infinite;
}
.floe-dive .dive-arrow { font-size: .95rem; }
.floe-dive:active { animation: none; transform: translateX(-50%) scale(.95); }
/* keyframes upprepar translateX(-50%) – annars äts centreringen upp av animationen */
@keyframes dive-hint {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: .9; }
  50% { transform: translateX(-50%) translateY(4px); opacity: 1; }
}

/* Medan metluckan är uppe krymper scenen – dölj bojen och dyk-skylten då, så
   vattnet framför flaket bara innehåller flötet man metar med. */
.surface.fishing .floe-fishspot, .surface.fishing .floe-dive { display: none; }

/* Metluckan nedtill: samma mörka disk som butikerna, med ljusblå accenter */
.floe-panel { border-top-color: #1a5b78; }
.floe-panel-head { display: flex; align-items: flex-start; gap: 10px; }
.floe-panel-head h3 {
  flex: 1; font-size: .95rem; margin: 0;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.floe-panel-head h3 small { font-size: .72rem; font-weight: 600; opacity: .6; }
.floe-panel-x {
  flex-shrink: 0; width: 34px; height: 34px; margin: -4px -2px 0 0; padding: 0;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.3);
  background: rgba(7,34,51,.85); color: var(--text); font-size: 1rem; cursor: pointer;
}
.floe-panel-x:active { transform: scale(.92); }
.floe-hint { text-align: center; opacity: .6; margin-top: 6px; }
#floe-pick { display: flex; flex-direction: column; gap: 12px; }
#btn-cast:disabled { opacity: .5; }

/* ---------- Reserv: flexbox-gap (Chrome < 84) ---------- */
/* gap i flexbox stöds först från Chrome 84. På äldre Android föll allt
   mellanrum bort och layouten blev ihopklämd. Klassen no-flexgap sätts av
   js/compat.js först när stödet faktiskt saknas, så nyare webbläsare aldrig
   ser de här reglerna. "> * + *"-marginalerna motsvarar exakt gap-värdet i
   regeln ovanför. Två kända avvikelser, båda på några få pixlar: vid flex-wrap
   blir radavståndet ungefärligt, och ett barn med egen margin-top (t.ex.
   .wardrobe-tabs) får sin marginal överskriven i stället för adderad. */
.no-flexgap .loader-inner > * + * { margin-top: 16px; }
.no-flexgap .setup-card > * + * { margin-top: 14px; }
.no-flexgap label > * + * { margin-top: 6px; }
.no-flexgap .color-row > * + * { margin-left: 12px; }
.no-flexgap .topbar > * + * { margin-top: 6px; }
.no-flexgap .seal-title > * + * { margin-left: 10px; }
.no-flexgap .wardrobe-btn > * + * { margin-left: 6px; }
.no-flexgap .pm-medals > * + * { margin-top: 8px; }
.no-flexgap .pm-row > * + * { margin-left: 10px; }
.no-flexgap .medal-float > * + * { margin-left: 2px; }
.no-flexgap .modal-card > * + * { margin-top: 12px; }
.no-flexgap .confirm-actions > * + * { margin-left: 10px; }
.no-flexgap .wardrobe-list > * + * { margin-top: 10px; }
.no-flexgap .wear-row > * + * { margin-left: 12px; }
.no-flexgap .stat > * + * { margin-top: 4px; }
.no-flexgap .actions > * + * { margin-left: 10px; }
.no-flexgap .btn.action > * + * { margin-top: 2px; }
.no-flexgap .game-list > * + * { margin-top: 10px; }
.no-flexgap .game-card > * + * { margin-left: 12px; }
.no-flexgap .game-info > * + * { margin-top: 2px; }
.no-flexgap .pause-box > * + * { margin-top: 16px; }
.no-flexgap #play-hud > * + * { margin-left: 16px; }
.no-flexgap .td-bar > * + * { margin-left: 6px; }
.no-flexgap .td-bar button > * + * { margin-top: 2px; }
.no-flexgap .simon-wrap > * + * { margin-top: 14px; }
.no-flexgap .result-rows > * + * { margin-top: 8px; }
.no-flexgap .top-tabs > * + * { margin-left: 8px; }
.no-flexgap .top-tab > * + * { margin-top: 2px; }
.no-flexgap .top-list > * + * { margin-top: 10px; }
.no-flexgap .top-row > * + * { margin-left: 12px; }
.no-flexgap #bottomnav button > * + * { margin-top: 1px; }
.no-flexgap #account-login > * + *,
.no-flexgap #account-register > * + *,
.no-flexgap #account-status > * + *,
.no-flexgap #account-forgot > * + * { margin-top: 14px; }
.no-flexgap #account-email-nudge > * + *,
.no-flexgap #account-delete-confirm > * + * { margin-top: 10px; }
.no-flexgap .topbar-right > * + * { margin-left: 8px; margin-top: 8px; }
.no-flexgap .quiz > * + * { margin-top: 14px; }
.no-flexgap .vol-row > * + * { margin-left: 12px; }
.no-flexgap .home-nudge > * + * { margin-left: 10px; margin-top: 10px; }
.no-flexgap .home-nudge-actions > * + * { margin-left: 8px; }
.no-flexgap #cookie-notice > * + * { margin-left: 12px; }
.no-flexgap .fish-tray > * + * { margin-left: 1px; }
.no-flexgap .shop-panel > * + * { margin-top: 10px; }
.no-flexgap .shop-wallet > * + * { margin-left: 10px; margin-top: 10px; }
.no-flexgap .shop-section h3 > * + * { margin-left: 8px; }
.no-flexgap .sell-row > * + * { margin-left: 8px; margin-top: 8px; }
.no-flexgap .shop-buy > * + * { margin-top: 8px; }
.no-flexgap .buy-card > * + * { margin-left: 12px; }
.no-flexgap .buy-info > * + * { margin-top: 1px; }
.no-flexgap .metspo-rods > * + * { margin-top: 18px; }
.no-flexgap .metspo-rods .rod-row > * + * { margin-left: 12px; }
.no-flexgap .metspo-rods .rod-info > * + * { margin-top: 1px; }
.no-flexgap .berta-sign > * + * { margin-left: 8px; }
.no-flexgap .bshop-shelf > * + * { margin-left: 10px; }
.no-flexgap .spa-sign > * + * { margin-left: 8px; }
.no-flexgap .spa-sign-mid > * + * { margin-top: 1px; }
.no-flexgap .spa-towels > * + * { margin-top: 3px; }
.no-flexgap .spa-status > * + * { margin-left: 6px; }
.no-flexgap .spa-shampoos > * + * { margin-top: 6px; }
.no-flexgap .spa-shampoo > * + * { margin-left: 10px; }
.no-flexgap .wardrobe-tabs > * + * { margin-left: 8px; }
.no-flexgap .berta-tabs > * + * { margin-left: 8px; }
.no-flexgap .berta-tab > * + * { margin-top: 2px; }
.no-flexgap .notif-prefs > * + * { margin-top: 8px; }
.no-flexgap .notif-pref-row > * + * { margin-left: 10px; }
.no-flexgap .surface-link > * + * { margin-left: 6px; }
.no-flexgap .sign-board > * + * { margin-left: 4px; }
.no-flexgap .floe-fishspot > * + * { margin-top: 3px; }
.no-flexgap .floe-dive > * + * { margin-left: 6px; }
.no-flexgap .floe-panel-head > * + * { margin-left: 10px; }
.no-flexgap .floe-panel-head h3 > * + * { margin-left: 8px; margin-top: 8px; }
.no-flexgap #floe-pick > * + * { margin-top: 12px; }
/* Regler som sätter gap men ärver display:flex från en annan selektor, och
   därför inte kan hittas automatiskt. */
.no-flexgap .game-topbar > * + * { margin-left: 10px; margin-top: 10px; }
.no-flexgap .metspo-card > * + * { margin-top: 16px; }
.no-flexgap .berta-card > * + * { margin-left: 10px; }

/* ---------- Reserv: aspect-ratio (Chrome < 88) ---------- */
/* aspect-ratio är enda höjdkällan för de här elementen, så utan den blev de
   0 px höga – fiskhålorna gick inte ens att träffa. Det gamla
   padding-bottom-tricket ger exakt samma kvadrat (procent räknas på
   containerns bredd). @supports-grinden gör att en webbläsare som HAR
   aspect-ratio aldrig ser blocket – moderna Chrome påverkas inte alls. */
@supports not (aspect-ratio: 1) {
  /* tom ruta med bakgrund – padding ger höjden */
  .fiske-hole { height: 0; padding-bottom: 100%; }
  /* -4px: medaljongens 2px-ram ligger utanför padding-boxen */
  .spa-medallion { height: 0; padding-bottom: calc(48% - 4px); }
  .loader-seal { height: 46vw; max-height: 176px; }
  /* .memory-card centrerar sitt motiv med grid, så padding-tricket skulle
     trycka upp motivet i kanten – fast höjd i stället. */
  .memory-card { height: 110px; }
  /* .simon-grid har redan height: 400px; aspect-ratio styrde bara bredden. */
  .simon-grid { width: 400px; }
}