/* crab: spillregler flyttet ut av styles.css 11. oktober 2026, i samme rekkefølge.
   Lastes rett etter styles.min.css på universet.html. */
.crab-game::before {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -110px;
  width: 280px;
  height: 220px;
  border: 26px solid rgba(17, 106, 141, 0.08);
  border-radius: 50%;
  pointer-events: none;
}
.crab-game__head {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  margin-bottom: 24px;
}
.crab-game__head h3 {
  margin: 10px 0 8px;
  color: var(--fjord-deep);
  font-size: clamp(2rem, 4.4vw, 3.15rem);
}
.crab-game__head p {
  max-width: 720px;
  margin: 0;
}
.crab-game__mission {
  display: grid;
  min-width: 220px;
  overflow: hidden;
  border: 3px solid var(--white);
  border-radius: 22px;
  background: var(--fjord-deep);
  color: var(--white);
  box-shadow: 0 10px 22px rgba(18, 59, 83, 0.2);
}
.crab-game__mission span {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 15px;
  font-family: var(--font-title);
  font-weight: 700;
}
.crab-game__mission span + span {
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.crab-game__mission strong {
  color: #ffe38c;
}
.crab-game__play {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 278px;
  gap: 22px;
  align-items: stretch;
}
.crab-game__sea::before,
.crab-game__sea::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.crab-game__sea::before {
  inset: 0;
  background:
    radial-gradient(circle at 16% 22%, rgba(255, 255, 255, 0.76) 0 3px, transparent 4px),
    radial-gradient(circle at 78% 35%, rgba(255, 255, 255, 0.62) 0 5px, transparent 6px),
    radial-gradient(circle at 56% 74%, rgba(255, 255, 255, 0.48) 0 4px, transparent 5px),
    linear-gradient(180deg, rgba(13, 89, 125, 0.1), rgba(4, 73, 105, 0.34));
  background-size: 120px 110px, 170px 140px, 150px 130px, auto;
}
.crab-game__sea::after {
  inset: auto -8% -20px;
  height: 76px;
  border-radius: 52% 48% 0 0;
  background: linear-gradient(180deg, rgba(212, 248, 244, 0.06), rgba(18, 112, 143, 0.18));
  box-shadow: 0 -12px 22px rgba(255, 255, 255, 0.08);
  mix-blend-mode: soft-light;
}
.crab-game__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.28) contrast(1.06) brightness(0.9);
}
.crab-game__sunbeam {
  position: absolute;
  z-index: 2;
  top: -130px;
  left: 30%;
  width: 180px;
  height: 700px;
  opacity: 0.5;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 245, 175, 0.56), transparent);
  pointer-events: none;
}
.tide-creature {
  position: absolute;
  z-index: 4;
  top: var(--creature-top);
  left: var(--creature-left);
  display: grid;
  width: clamp(64px, 7vw, 82px);
  height: clamp(64px, 7vw, 82px);
  padding: 5px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 7px 0 rgba(18, 59, 83, 0.22), 0 10px 22px rgba(18, 59, 83, 0.3);
  transform: translate(-50%, -50%);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tide-creature::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 3px solid rgba(246, 196, 83, 0);
  border-radius: inherit;
  transition: border-color 160ms ease, transform 160ms ease;
}
.tide-creature:hover::after,
.tide-creature:focus-visible::after {
  border-color: var(--sun);
  transform: scale(1.06);
}
.tide-creature:focus-visible {
  outline: 4px solid var(--white);
  outline-offset: 5px;
}
.tide-creature__sprite {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 2px rgba(18, 59, 83, 0.24));
  animation: tide-drift 1.5s ease-in-out var(--creature-delay) infinite alternate;
}
.tide-creature__sprite svg,
.crab-game__catch svg {
  display: block;
  width: 100%;
  height: 100%;
}
.tide-creature:hover .tide-creature__sprite {
  animation-duration: 0.6s;
}
.tide-creature.is-caught {
  pointer-events: none;
  animation: tide-caught 420ms ease forwards;
}
.tide-creature:disabled:not(.is-caught) {
  opacity: 0.46;
  cursor: default;
}
.crab-game__sea.is-complete {
  box-shadow: 0 0 0 6px var(--sun), 0 18px 40px rgba(18, 59, 83, 0.28);
}
.crab-game__bucket {
  display: flex;
  min-height: 500px;
  padding: 22px 18px 18px;
  align-items: center;
  flex-direction: column;
  border: 5px solid var(--white);
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 26%, rgba(255, 255, 255, 0.9), transparent 42%),
    linear-gradient(180deg, #fff9dc 0%, #ffe9a6 100%);
  box-shadow: 0 18px 36px rgba(18, 59, 83, 0.18);
}
.crab-game__bucket-label {
  position: relative;
  z-index: 3;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--plum);
  color: var(--white);
  font-family: var(--font-title);
  font-size: 1.1rem;
  font-weight: 800;
}
.crab-game__pail {
  position: relative;
  width: 220px;
  height: 235px;
  margin: 42px auto 28px;
  padding: 48px 24px 40px;
  clip-path: polygon(5% 10%, 95% 10%, 82% 100%, 18% 100%);
  background: linear-gradient(135deg, #ffdd57 0%, #f5a83c 58%, #e77938 100%);
  box-shadow: inset 18px 0 22px rgba(255, 255, 255, 0.22), inset -18px 0 22px rgba(136, 54, 45, 0.12);
}
.crab-game__pail::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: 12px;
  left: 12px;
  right: 12px;
  height: 22px;
  border: 5px solid #b85b3e;
  border-radius: 50%;
  background: #fff0a4;
}
.crab-game__handle {
  position: absolute;
  z-index: -1;
  top: -62px;
  left: 32px;
  width: 156px;
  height: 150px;
  border: 10px solid #196c89;
  border-bottom: 0;
  border-radius: 90px 90px 0 0;
}
.crab-game__collection {
  position: relative;
  z-index: 3;
  display: flex;
  height: 118px;
  align-content: center;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
}
.crab-game__catch {
  display: block;
  width: 48px;
  height: 48px;
  animation: bucket-drop 360ms cubic-bezier(0.2, 0.8, 0.3, 1.2) both;
  filter: drop-shadow(0 3px 2px rgba(18, 59, 83, 0.24));
}
.crab-game__pail > strong {
  position: absolute;
  z-index: 3;
  bottom: 20px;
  left: 0;
  width: 100%;
  color: #81384b;
  font-family: var(--font-title);
  font-size: 1.35rem;
  letter-spacing: 0.15em;
  text-align: center;
}
.crab-game__bucket p {
  min-height: 84px;
  margin: auto 0 0;
  color: var(--fjord-deep);
  font-weight: 700;
  text-align: center;
}
.crab-game__footer {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
}
.crab-game__footer p {
  max-width: 740px;
  margin: 0;
  font-weight: 700;
}
.crab-game__finish-body {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(250px, 340px) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 42px);
  align-items: center;
  margin-top: 20px;
}
.crab-game__finish-bucket {
  display: grid;
  padding: 18px;
  place-items: center;
  border: 3px solid rgba(18, 61, 84, 0.18);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.36);
}
.crab-game__pail--finish {
  width: min(292px, 92%);
  height: 278px;
  margin: 34px auto 6px;
  padding: 48px 22px 28px;
}
.crab-game__pail--finish .crab-game__collection {
  top: 13%;
  width: 76%;
  height: 57%;
  padding: 8px;
  align-content: center;
  overflow: hidden;
  border: 3px solid rgba(18, 61, 84, 0.2);
  border-radius: 28px;
  background: rgba(255, 249, 218, 0.88);
  box-shadow: inset 0 0 14px rgba(246, 196, 83, 0.3);
}
.crab-game__pail--finish .crab-game__catch {
  width: 38px;
  height: 38px;
}
.crab-game__finish-copy {
  display: grid;
  gap: 14px;
}
.crab-game__finish-copy .game-finish-card__fact {
  margin: 0;
  padding: 16px 18px;
  border-left: 5px solid var(--sun);
  border-radius: 0 18px 18px 0;
  background: rgba(255, 255, 255, 0.7);
  font-size: 1.08rem;
  line-height: 1.55;
}
.crab-game__finish-copy .game-finish-card__actions {
  margin-top: 0;
}
.crab-game__finish-copy .button {
  white-space: normal;
  text-align: center;
}
@media (max-width: 820px) {
  .crab-game__finish-body {
    grid-template-columns: 1fr;
  }
}
@keyframes tide-drift {
  from { transform: translate3d(calc(var(--creature-drift) * -0.45), -3px, 0) rotate(-4deg); }
  to { transform: translate3d(var(--creature-drift), 4px, 0) rotate(5deg); }
}
@keyframes tide-caught {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  60% { opacity: 1; transform: translate(-50%, -72%) scale(1.18) rotate(10deg); }
  100% { opacity: 0; transform: translate(-50%, -30%) scale(0.2) rotate(24deg); }
}
@keyframes bucket-drop {
  from { opacity: 0; transform: translateY(-42px) scale(1.3) rotate(-12deg); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
[data-calm="true"] .tide-creature__sprite,
[data-calm="true"] .tide-creature.is-caught,
[data-calm="true"] .crab-game__catch {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .tide-creature__sprite,
  .tide-creature.is-caught,
  .crab-game__catch {
    animation: none !important;
  }
}
@media (max-width: 820px) {
  .crab-game__head {
    grid-template-columns: 1fr;
  }
  .crab-game__mission {
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .crab-game__mission span + span {
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.22);
  }
  .crab-game__play {
    grid-template-columns: 1fr;
  }
  .crab-game__bucket {
    min-height: 0;
  }
  .crab-game__bucket p {
    min-height: 58px;
  }
}
@media (max-width: 520px) {
  .crab-game {
    padding: 18px 13px;
    border-radius: 28px;
  }
  .crab-game__mission {
    grid-template-columns: 1fr;
  }
  .crab-game__mission span + span {
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    border-left: 0;
  }
  .tide-creature {
    width: 58px;
    height: 58px;
    padding: 3px;
  }
  .crab-game__footer {
    align-items: stretch;
    flex-direction: column;
  }
  .crab-game__footer .button {
    width: 100%;
  }
}
.crab-game {
  background:
    radial-gradient(circle at 92% 4%, rgba(246, 196, 83, 0.38) 0 80px, transparent 82px),
    linear-gradient(145deg, #eef7ee, #d2ecea 58%, #bddfe4);
}
.crab-game__sea::before {
  background:
    radial-gradient(circle at 16% 22%, rgba(255, 255, 255, 0.44) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 35%, rgba(255, 255, 255, 0.34) 0 3px, transparent 4px),
    linear-gradient(180deg, rgba(7, 92, 112, 0.02), rgba(3, 61, 84, 0.12));
  background-size: 150px 130px, 190px 160px, auto;
}
.crab-game__sea::after {
  inset: 0;
  height: auto;
  border-radius: 0;
  background: radial-gradient(ellipse at 52% 38%, rgba(255, 244, 177, 0.16), transparent 48%);
  box-shadow: inset 0 0 38px rgba(5, 59, 76, 0.16);
}
.crab-game__backdrop {
  filter: saturate(1.2) contrast(1.06) brightness(1.02);
}
.crab-game__sunbeam {
  opacity: 0.25;
}
.tide-creature {
  width: clamp(70px, 7.5vw, 90px);
  height: clamp(70px, 7.5vw, 90px);
  border: 2px solid rgba(255, 255, 255, 0.72);
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.78), rgba(236, 250, 242, 0.52));
  box-shadow: 0 9px 20px rgba(12, 67, 80, 0.24), inset 0 0 18px rgba(255, 255, 255, 0.44);
  backdrop-filter: blur(3px);
}
.tide-creature__sprite {
  filter: drop-shadow(0 6px 4px rgba(18, 59, 83, 0.28)) saturate(1.08);
}
.crab-game__bucket {
  border-width: 3px;
  border-color: rgba(255, 255, 255, 0.94);
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.82), transparent 42%),
    linear-gradient(180deg, #f8f2dc, #e9dfc2);
  box-shadow: 0 16px 34px rgba(18, 59, 83, 0.15);
}
.crab-game__pail {
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.42), transparent 24% 68%, rgba(20, 63, 76, 0.18)),
    linear-gradient(180deg, #d7e2df 0%, #aebfbd 55%, #7d999d 100%);
  box-shadow: inset 18px 0 22px rgba(255, 255, 255, 0.28), inset -18px 0 22px rgba(20, 61, 75, 0.16), 0 13px 22px rgba(18, 59, 83, 0.2);
}
.crab-game__pail::before {
  border-color: #617e84;
  background: linear-gradient(180deg, #f4f7ef, #b8cbc8);
}
.crab-game__handle {
  border-color: #466e78;
}
.crab-game__pail > strong {
  color: #315d69;
}
.crab-game__mission {
  min-width: 250px;
}
.crab-game__stage-top {
  position: absolute;
  z-index: 9;
  top: 16px;
  right: 16px;
  left: 16px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.crab-game__stage-top strong,
.crab-game__stage-top span {
  padding: 8px 13px;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  color: var(--white);
  background: rgba(12, 59, 82, 0.8);
  box-shadow: 0 6px 16px rgba(6, 34, 51, 0.22);
  font-family: var(--font-title);
  font-size: 0.88rem;
  font-weight: 800;
  backdrop-filter: blur(8px);
}
.crab-game__stage-top strong {
  color: #fff2a8;
}
.crab-game__stage-top span.is-hard {
  border-color: rgba(255, 255, 255, 0.96);
  color: #173e56;
  background: linear-gradient(145deg, #ffe76f, #f4a94d);
  box-shadow: 0 0 0 5px rgba(255, 222, 91, 0.22), 0 8px 20px rgba(6, 34, 51, 0.3);
}
.crab-game__race-meter {
  position: absolute;
  z-index: 9;
  top: 64px;
  right: 18px;
  left: 18px;
  height: 10px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  background: rgba(12, 59, 82, 0.5);
  box-shadow: 0 4px 12px rgba(6, 34, 51, 0.2);
  pointer-events: none;
}
.crab-game__level-progress {
  position: absolute;
  z-index: 10;
  top: 82px;
  left: 50%;
  display: flex;
  gap: 8px;
  padding: 7px 11px;
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 999px;
  background: rgba(12, 59, 82, 0.72);
  box-shadow: 0 5px 14px rgba(6, 34, 51, 0.2);
  transform: translateX(-50%);
  pointer-events: none;
  backdrop-filter: blur(7px);
}
.crab-game__level-progress span {
  display: block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.crab-game__level-progress span.is-filled {
  background: #ffd85f;
  box-shadow: 0 0 0 4px rgba(255, 216, 95, 0.22);
  transform: scale(1.1);
}
.crab-game__race-meter span {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.48;
  background:
    radial-gradient(12px 7px at 12px 100%, transparent 60%, rgba(215, 248, 255, 0.92) 63% 75%, transparent 78%) 0 0 / 36px 10px repeat-x,
    linear-gradient(90deg, #62bdd8, #1d7ea5, #56b9d2);
  background-position: 0 0, 0 0;
}
.crab-game__race-meter span.is-running {
  opacity: 1;
  animation: crab-wave-strip 780ms linear infinite;
}
.crab-game__overlay {
  position: absolute;
  z-index: 14;
  top: 50%;
  left: 50%;
  width: min(calc(100% - 44px), 430px);
  padding: 26px;
  border: 4px solid var(--white);
  border-radius: 30px;
  color: var(--fjord-deep);
  background:
    radial-gradient(circle at 92% 8%, rgba(246, 196, 83, 0.66) 0 56px, transparent 58px),
    linear-gradient(145deg, rgba(249, 255, 247, 0.96), rgba(224, 249, 244, 0.94));
  box-shadow: 0 22px 55px rgba(6, 34, 51, 0.38);
  transform: translate(-50%, -50%);
  text-align: center;
  backdrop-filter: blur(12px);
}
.crab-game__overlay[hidden] {
  display: none;
}
.crab-game__overlay-icon {
  display: grid;
  width: 68px;
  height: 68px;
  margin: -56px auto 12px;
  place-items: center;
  border: 4px solid var(--white);
  border-radius: 50%;
  background: linear-gradient(145deg, #ffde66, #f08a4d);
  box-shadow: 0 9px 24px rgba(18, 59, 83, 0.24);
  font-size: 2.1rem;
  animation: crab-overlay-bob 1.8s ease-in-out infinite alternate;
}
.crab-game__overlay strong {
  display: block;
  font-family: var(--font-title);
  font-size: clamp(1.55rem, 4vw, 2.15rem);
  line-height: 1.05;
}
.crab-game__overlay p {
  margin: 12px 0 18px;
  font-weight: 700;
}
.crab-game__overlay .button {
  width: auto;
  min-width: 180px;
}
.crab-runner {
  --crab-edge: clamp(62px, 8vw, 96px);
  position: absolute;
  z-index: 8;
  top: var(--runner-y);
  display: block;
  width: clamp(122px, 15vw, 168px);
  height: clamp(94px, 11vw, 126px);
  min-width: 64px;
  min-height: 64px;
  padding: 0;
  border: 0;
  background: transparent;
  filter: drop-shadow(0 11px 7px rgba(4, 46, 58, 0.5));
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.crab-runner::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 8% 4%;
  border: 3px solid rgba(255, 239, 132, 0.76);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 249, 205, 0.56) 0 34%, rgba(255, 220, 90, 0.24) 52%, transparent 72%);
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.12), 0 0 24px rgba(255, 229, 112, 0.5);
  animation: crab-visibility-pulse 900ms ease-in-out infinite alternate;
  pointer-events: none;
}
.crab-runner.is-running[data-direction="right"] {
  left: calc(-1 * var(--crab-edge));
  animation: crab-run-right var(--runner-duration, 8s) linear forwards;
}
.crab-runner.is-running[data-direction="left"] {
  left: calc(100% + var(--crab-edge));
  animation: crab-run-left var(--runner-duration, 8s) linear forwards;
}
.crab-runner.is-still {
  left: var(--runner-x, 50%);
  transform: translate(-50%, -50%);
  animation: none !important;
}
.crab-runner.is-still .crab-runner__wake {
  display: none;
}
.crab-runner__sprite {
  position: relative;
  z-index: 2;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  animation: crab-scuttle 240ms ease-in-out infinite alternate;
}
.crab-runner.is-hard .crab-runner__sprite {
  animation-duration: 130ms;
}
.crab-runner.is-hard .crab-runner__wake {
  animation-duration: 260ms;
}
.crab-runner[data-direction="left"] .crab-runner__sprite {
  transform: scaleX(-1);
}
.crab-runner__sprite img,
.crab-runner__sprite svg {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  pointer-events: none;
  user-select: none;
}
.crab-runner__sprite svg {
  opacity: 1;
  filter: drop-shadow(0 4px 2px rgba(255, 245, 175, 0.5));
  transition: opacity 120ms ease;
}
.crab-runner__sprite img {
  opacity: 0;
  filter: saturate(1.22) brightness(1.12) contrast(1.06);
  transition: opacity 120ms ease;
}
.crab-runner__sprite.has-art img { opacity: 1; }
.crab-runner__sprite.has-art svg { opacity: 0; }
.crab-runner__sprite--fallback svg {
  display: block;
  width: 100%;
  height: 100%;
}
.crab-runner__wake {
  position: absolute;
  z-index: 1;
  top: 56%;
  left: -42px;
  width: 72px;
  height: 32px;
  opacity: 0.72;
  transform: translateY(-50%);
  background:
    radial-gradient(circle at 15% 50%, rgba(255, 255, 255, 0.88) 0 4px, transparent 5px),
    radial-gradient(circle at 45% 30%, rgba(173, 244, 237, 0.84) 0 7px, transparent 8px),
    radial-gradient(circle at 82% 65%, rgba(255, 255, 255, 0.72) 0 5px, transparent 6px);
  animation: crab-wake 460ms ease-out infinite;
}
.crab-runner[data-direction="left"] .crab-runner__wake {
  right: -42px;
  left: auto;
  transform: translateY(-50%) scaleX(-1);
}
.crab-runner::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: -8px;
  border: 5px solid transparent;
  border-radius: 50%;
  transform: scale(0.8);
  transition: border-color 140ms ease, transform 140ms ease;
}
.crab-runner:hover::after,
.crab-runner:focus-visible::after {
  border-color: #ffe36f;
  transform: scale(1);
}
.crab-runner:focus-visible {
  outline: 4px solid var(--white);
  outline-offset: 3px;
  animation-play-state: paused;
}
.crab-runner.is-running:hover {
  animation-play-state: paused;
}
.crab-runner.is-caught {
  z-index: 12;
  pointer-events: none;
  animation: crab-runner-caught 480ms cubic-bezier(0.18, 0.78, 0.25, 1) forwards;
}
.tide-creature--bonus {
  z-index: 7;
  width: clamp(66px, 8vw, 86px);
  height: clamp(66px, 8vw, 86px);
  border: 3px solid #ffe375;
  background: rgba(255, 253, 223, 0.9);
  animation: crab-bonus-glow 1.2s ease-in-out infinite alternate;
}
.crab-game__splash {
  position: absolute;
  z-index: 13;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.crab-game__splash i {
  position: absolute;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 3px solid var(--white);
  border-radius: 50%;
  color: var(--fjord-deep);
  background: #ffe371;
  box-shadow: 0 5px 12px rgba(18, 59, 83, 0.22);
  font-family: var(--font-title);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
  animation: crab-splash 620ms ease-out forwards;
}
.crab-game__splash i:nth-child(2) { --splash-x: -48px; --splash-y: -34px; width: 15px; height: 15px; animation-delay: 40ms; }
.crab-game__splash i:nth-child(3) { --splash-x: 47px; --splash-y: -28px; width: 18px; height: 18px; animation-delay: 80ms; }
.crab-game__splash i:nth-child(4) { --splash-x: -34px; --splash-y: 38px; width: 12px; height: 12px; animation-delay: 120ms; }
.crab-game__splash i:nth-child(5) { --splash-x: 38px; --splash-y: 35px; width: 13px; height: 13px; animation-delay: 150ms; }
.crab-game__catch img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
}
.crab-game__catch--crab {
  width: 56px;
  height: 48px;
}
.crab-game__controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
@keyframes crab-run-right {
  0% { left: calc(-1 * var(--crab-edge)); transform: translate(-50%, -50%) translateY(0) rotate(-3deg); }
  22% { transform: translate(-50%, -50%) translateY(-8px) rotate(2deg); }
  48% { transform: translate(-50%, -50%) translateY(5px) rotate(-1deg); }
  76% { transform: translate(-50%, -50%) translateY(-6px) rotate(3deg); }
  100% { left: calc(100% + var(--crab-edge)); transform: translate(-50%, -50%) translateY(0) rotate(-2deg); }
}
@keyframes crab-run-left {
  0% { left: calc(100% + var(--crab-edge)); transform: translate(-50%, -50%) translateY(0) rotate(3deg); }
  22% { transform: translate(-50%, -50%) translateY(7px) rotate(-2deg); }
  48% { transform: translate(-50%, -50%) translateY(-6px) rotate(2deg); }
  76% { transform: translate(-50%, -50%) translateY(5px) rotate(-3deg); }
  100% { left: calc(-1 * var(--crab-edge)); transform: translate(-50%, -50%) translateY(0) rotate(2deg); }
}
@keyframes crab-scuttle {
  from { margin-top: -3px; }
  to { margin-top: 3px; }
}
@keyframes crab-visibility-pulse {
  from { opacity: 0.72; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1.04); }
}
@keyframes crab-wake {
  from { opacity: 0.15; transform: translateY(-50%) scale(0.65); }
  to { opacity: 0.82; transform: translateY(-50%) scale(1.08); }
}
@keyframes crab-runner-caught {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  58% { opacity: 1; transform: translate(-50%, -78%) scale(1.14) rotate(9deg); }
  100% { opacity: 0; transform: translate(-50%, 28%) scale(0.18) rotate(24deg); }
}
@keyframes crab-wave-strip {
  from { background-position: 0 0, 0 0; }
  to { background-position: 36px 0, 72px 0; }
}
@keyframes crab-overlay-bob {
  from { transform: translateY(-3px) rotate(-3deg); }
  to { transform: translateY(4px) rotate(3deg); }
}
@keyframes crab-bonus-glow {
  from { box-shadow: 0 0 0 0 rgba(255, 224, 95, 0.18), 0 8px 20px rgba(12, 67, 80, 0.24); }
  to { box-shadow: 0 0 0 10px rgba(255, 224, 95, 0.25), 0 12px 24px rgba(12, 67, 80, 0.32); }
}
@keyframes crab-splash {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.45); }
  65% { opacity: 1; transform: translate(calc(-50% + var(--splash-x, 0px)), calc(-50% + var(--splash-y, -16px))) scale(1.08); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--splash-x, 0px)), calc(-50% + var(--splash-y, -22px))) scale(0.7); }
}
[data-calm="true"] .crab-runner__sprite,
[data-calm="true"] .crab-runner::before,
[data-calm="true"] .crab-runner__wake,
[data-calm="true"] .crab-game__overlay-icon,
[data-calm="true"] .tide-creature--bonus,
[data-calm="true"] .crab-game__splash i {
  animation-iteration-count: 1 !important;
}
[data-calm="true"] .crab-game__race-meter span.is-running {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .crab-runner__sprite,
  .crab-runner::before,
  .crab-runner__wake,
  .crab-game__overlay-icon,
  .tide-creature--bonus,
  .crab-game__splash i {
    animation-iteration-count: 1 !important;
  }
}
@media (max-width: 820px) {
  .crab-game__mission {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .crab-game__mission span + span {
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.22);
  }
}
@media (max-width: 520px) {
  .crab-game__mission {
    grid-template-columns: 1fr;
  }
  .crab-game__mission span + span {
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    border-left: 0;
  }
  .crab-game__stage-top {
    top: 11px;
    right: 10px;
    left: 10px;
  }
  .crab-game__stage-top strong,
  .crab-game__stage-top span {
    padding: 6px 9px;
    font-size: 0.72rem;
  }
  .crab-game__race-meter {
    top: 54px;
    right: 11px;
    left: 11px;
  }
  .crab-game__overlay {
    width: calc(100% - 24px);
    padding: 22px 16px 18px;
    border-width: 3px;
    border-radius: 24px;
  }
  .crab-game__overlay-icon {
    width: 58px;
    height: 58px;
    margin-top: -48px;
    font-size: 1.8rem;
  }
  .crab-runner {
    width: 116px;
    height: 92px;
  }
  .crab-game__controls {
    display: grid;
    grid-template-columns: 1fr;
  }
  .crab-game__controls .button {
    width: 100%;
  }
}
/* Spillvindu på smal mobil: de tre knappene står på én rad (ikke tre), så startkortet med
   «Start jakten» får plass over dem. «Lyd på» dekket startknappen på 320 × 568. */
@media (max-width: 520px) {
  .crab-game.is-game-viewport .crab-game__controls { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .crab-game.is-game-viewport .crab-game__controls .button { min-height: 44px; padding: 4px 6px; font-size: .78rem; line-height: 1.1; white-space: normal; }
  /* Havet følger rutenettraden i spillvinduet også når startkortet vises (lydoppsettet gir det
     ellers 470 px, og kortets nederste del havnet bak bøtta). */
  .crab-game.is-game-viewport .crab-game__sea:has(> [data-crab-overlay]:not([hidden])) { min-height: 0; height: 100%; overflow-y: auto; }
}
/* Svært lav mobil (som 320 × 568): tipsteksten under bøtta viker, så hele startkortet synes. */
@media (max-width: 520px) and (max-height: 600px) {
  .crab-game.is-game-viewport .crab-game__play .crab-game__bucket > p { display: none; }
}
@media (max-width: 650px) {
  .tide-creature {
    width: 62px;
    height: 62px;
  }
}
.tide-creature:not(:disabled):active {
  transform: translate(-50%, -50%) scale(0.94);
}
.crab-runner.is-still:not(:disabled):active {
  transform: translate(-50%, -50%) scale(0.95);
}
.crab-game__bucket {
  background:
    radial-gradient(circle at 50% 19%, rgba(255, 255, 255, 0.9), transparent 42%),
    linear-gradient(180deg, #fff8dd, #ffefbd 62%, #f7d989);
}
.crab-game__pail {
  width: 244px;
  height: 244px;
  margin: 28px auto 18px;
  padding: 0;
  overflow: visible;
  clip-path: none;
  background: url("../images/generated/games/oppdagelsesbotte-v01-sm.jpg") center / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 16px 18px rgba(18, 59, 83, 0.23)) saturate(1.08);
}
.crab-game__pail::before,
.crab-game__handle,
.crab-game__pail > strong {
  display: none;
}
.crab-game__collection {
  position: absolute;
  z-index: 4;
  top: 19%;
  left: 50%;
  width: 66%;
  height: 35%;
  align-content: center;
  transform: translateX(-50%);
}
.crab-game__catch {
  width: 42px;
  height: 42px;
  filter: drop-shadow(0 5px 3px rgba(18, 59, 83, 0.3)) saturate(1.12);
}
.crab-game__overlay-icon[data-crab-overlay-icon="crab"] {
  width: 122px;
  height: 82px;
  display: block;
  background: url("../images/generated/games/strandkrabbe-terrakotta-v01.webp") center / contain no-repeat;
  filter: drop-shadow(0 10px 9px rgba(18, 59, 83, 0.28)) saturate(1.1);
}
.crab-game__overlay-icon[data-crab-overlay-icon="symbol"] {
  display: grid;
  width: 92px;
  height: 92px;
  place-items: center;
  border: 4px solid var(--white);
  border-radius: 50%;
  background: linear-gradient(145deg, #ffe174, #f28a58);
  box-shadow: 0 10px 22px rgba(18, 59, 83, 0.25);
}
@media (max-width: 560px) {
  .crab-game__pail {
    width: min(244px, 82vw);
    height: min(244px, 82vw);
  }
}

/* ==========================================================================
   Spillvinduet på alle skjermer: havet følger rutenettet også når kortet med
   «Start jakten» (og «Neste nivå», «Prøv igjen», «Spill igjen») vises. Kortet krymper
   etter hvor høyt havet er, og knappen står alltid synlig nederst i kortet. Liggende
   mobil får de tre knappene på én rad under havet, så havet beholder høyden.
   ========================================================================== */
.crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__sea { container: crab-sea / size; }
.crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__sea:has(> [data-crab-overlay]:not([hidden])) { min-height: 0; height: 100%; overflow: hidden; }
.crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__overlay:not([hidden]) {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: min(calc(100% - 24px), 430px);
  max-height: calc(100% - 16px);
  margin: 0;
  transform: translate(-50%, -50%);
}
.crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__overlay:not([hidden]) > * { flex: 0 0 auto; max-width: 100%; }
.crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__overlay:not([hidden]) > [data-crab-overlay-text] { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__overlay:not([hidden]) > [data-crab-action] { min-width: min(100%, 240px); margin: 0; }
.crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__overlay:not([hidden]) > .site-audio { align-self: flex-end; }
/* Sluttkortet tar havets plass (ikke hele vinduet), så «Begynn på nytt» under står fritt.
   Det ruller selv om innholdet ikke får plass. */
.crab-game.game-viewport.is-game-viewport[data-crab-game] > .crab-game__play { grid-row: -3 / -2; grid-column: 1; }
.crab-game.game-viewport.is-game-viewport[data-crab-game] > .crab-game__footer { grid-row: -2 / -1; grid-column: 1; }
.crab-game.game-viewport.is-game-viewport[data-crab-game]:has(> .crab-game__finish:not([hidden])) > .crab-game__play { visibility: hidden; }
.crab-game.game-viewport.is-game-viewport[data-crab-game] > .crab-game__finish:not([hidden]) {
  position: relative;
  inset: auto;
  z-index: 3;
  grid-row: -3 / -2;
  grid-column: 1;
  align-content: safe center;
  width: auto;
  max-width: none;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0 !important;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__finish .crab-game__finish-body { margin-top: 10px; gap: 12px; }
.crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__finish .crab-game__finish-copy { gap: 8px; }
.crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__finish .crab-game__finish-copy .game-finish-card__fact { padding: 8px 12px; font-size: .9rem; line-height: 1.4; }
@media (max-height: 760px) {
  .crab-game.game-viewport.is-game-viewport[data-crab-game] > .crab-game__finish:not([hidden]) { padding: 12px !important; }
  .crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__finish .game-finish-card__lead { gap: 8px; }
  .crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__finish .game-finish-card__lead > span { width: 40px; height: 40px; font-size: 1.2rem; }
  .crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__finish .game-finish-card__lead h4 { font-size: 1.3rem; line-height: 1.1; }
  .crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__finish .game-finish-card__lead p { margin-top: 3px; font-size: .84rem; line-height: 1.3; }
  .crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__finish .crab-game__finish-body { grid-template-columns: minmax(0, 150px) minmax(0, 1fr); }
  .crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__finish .crab-game__finish-bucket { padding: 6px; border-radius: 18px; }
  .crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__finish .crab-game__finish-bucket .crab-game__bucket-label { padding: 4px 8px; font-size: .8rem; }
  .crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__finish .crab-game__pail--finish { width: 120px; height: 110px; margin: 6px auto 0; padding: 20px 10px 10px; }
  .crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__finish .crab-game__pail--finish .crab-game__catch { width: 22px; height: 22px; }
  .crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__finish .crab-game__finish-copy .game-finish-card__fact { font-size: .84rem; line-height: 1.35; }
  .crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__finish .crab-game__finish-copy .button { min-height: 44px; padding: 6px 10px; font-size: .84rem; line-height: 1.2; }
}
@media (max-height: 520px), (max-width: 420px) {
  .crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__finish .crab-game__finish-body { grid-template-columns: minmax(0, 1fr); }
  .crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__finish .crab-game__finish-bucket { display: none; }
}
@media (max-height: 330px) {
  .crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__finish .game-finish-card__lead p { display: none; }
}
@container crab-sea (max-height: 420px) {
  .crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__overlay:not([hidden]) { gap: 5px; padding: 12px 14px; overflow-y: auto; overscroll-behavior: contain; border-width: 3px; border-radius: 22px; }
  .crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__overlay:not([hidden]) > [data-crab-action] { position: sticky; z-index: 1; bottom: 0; }
  .crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__overlay:not([hidden]) > .olav-inline-guide { gap: 6px; margin: 0; padding: 6px 8px; font-size: .84rem; line-height: 1.3; }
  .crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__overlay:not([hidden]) > .olav-inline-guide button { min-height: 44px; padding: 6px 12px; }
  .crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__overlay:not([hidden]) > .crab-game__overlay-icon { width: 64px; height: 44px; margin: 0 auto; font-size: 1.3rem; }
  .crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__overlay:not([hidden]) > :is(strong, p) { margin: 0; }
  .crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__overlay:not([hidden]) > .crab-game__overlay-icon[data-crab-overlay-icon="symbol"] { width: 44px; border-width: 3px; }
  .crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__overlay strong { font-size: 1.3rem; }
  .crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__overlay p { font-size: .84rem; line-height: 1.3; }
  .crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__overlay .button { min-height: 46px; padding-block: 6px; }
}
@container crab-sea (max-height: 300px) {
  .crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__overlay:not([hidden]) { padding: 8px 12px; }
  .crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__overlay:not([hidden]) > .crab-game__overlay-icon { display: none; }
  .crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__overlay strong { font-size: 1.1rem; }
  .crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__overlay p { font-size: .8rem; }
  .crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__overlay .button { min-height: 44px; }
}
@media (orientation: landscape) and (max-height: 620px) {
  .crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__footer { min-height: 0; padding: 0; }
  .crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; }
  .crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__controls .button { width: 100%; min-width: 0; min-height: 44px; padding: 4px 8px; font-size: .8rem; line-height: 1.1; white-space: normal; }
  /* Bøtta ved siden av havet: merkelappen over bøtta, beskjeden under (den ruller hvis den er lang). */
  .crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__bucket { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 4px; min-height: 0; height: auto; padding: 6px; align-items: center; justify-items: center; overflow: hidden; }
  .crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__bucket-label { grid-column: 1; grid-row: 1; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 6px; width: 100%; padding: 4px 8px; font-size: .8rem; line-height: 1.15; text-align: center; white-space: normal; }
  .crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__pail { grid-column: 1; grid-row: 2; width: 100%; max-width: 120px; height: 100%; min-height: 0; max-height: 100%; margin: 0; }
  .crab-game.game-viewport.is-game-viewport[data-crab-game] .crab-game__bucket > p { grid-column: 1; grid-row: 3; display: block; min-height: 0; max-height: 5.2em; margin: 0; overflow-y: auto; overscroll-behavior: contain; font-size: .72rem; line-height: 1.25; text-align: center; }
}