:root {
  --black: #04070d;
  --deep-navy: #07101d;
  --navy: #101a31;
  --navy-light: #172844;
  --wood-dark: #2c1208;
  --wood: #5d2e15;
  --wood-light: #9b5728;
  --gold-dark: #8f531b;
  --gold: #f5bd43;
  --gold-light: #ffe494;
  --red: #bd252c;
  --red-dark: #6f1217;
  --cream: #f8e5b9;
  --green: #57ad31;
  --blue: #274b70;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: "Trebuchet MS", Arial, sans-serif;
  background: var(--deep-navy);
  color: white;
}

body {
  overflow-x: hidden;
}

button,
input {
  font: inherit;
}

button {
  border: 2px solid var(--gold-dark);
  border-radius: 10px;
  padding: 11px 17px;
  color: white;
  font-weight: 900;
  cursor: pointer;
  background:
    linear-gradient(180deg, #385778 0%, #172b49 58%, #0d1a2e 100%);
  box-shadow:
    0 4px 0 #07101e,
    inset 0 1px 0 #ffffff35,
    0 8px 18px #0007;
  transition:
    transform 0.14s ease,
    filter 0.14s ease;
}

button:hover:not(:disabled) {
  filter: brightness(1.18);
  transform: translateY(-1px);
}

button:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow:
    0 1px 0 #07101e,
    inset 0 1px 0 #ffffff25;
}

button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

input {
  width: 100%;
  border: 2px solid #a16b2f;
  border-radius: 10px;
  padding: 13px 14px;
  color: white;
  background:
    linear-gradient(180deg, #09172a, #050c18);
  box-shadow:
    inset 0 0 12px #0009,
    0 0 0 1px #f3bd4b25;
  outline: none;
}

input:focus {
  border-color: var(--gold);
  box-shadow:
    inset 0 0 12px #0009,
    0 0 12px #f3bd4b55;
}

.screen {
  display: none;
  min-height: 100vh;
}

.screen.active {
  display: block;
}

/* =========================================================
   SHARED PIRATE PANELS
   ========================================================= */

.pirate-panel {
  position: relative;
  overflow: hidden;
  border: 3px solid var(--gold-dark);
  border-radius: 15px;
  background:
    linear-gradient(145deg, rgba(23, 36, 61, 0.98), rgba(5, 11, 22, 0.98));
  box-shadow:
    0 12px 30px #000a,
    inset 0 0 0 2px #f8c45935,
    inset 0 0 34px #0008;
}

.pirate-panel::before,
.pirate-panel::after {
  position: absolute;
  z-index: 20;
  width: 18px;
  height: 18px;
  border: 3px solid #4e260e;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd77c, #9a551e 65%, #3d1a09);
  box-shadow: 0 1px 3px #000;
  content: "";
}

.pirate-panel::before {
  top: 8px;
  left: 8px;
}

.pirate-panel::after {
  right: 8px;
  bottom: 8px;
}

.panel-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -1px -1px 12px;
  padding: 13px 15px;
  border-bottom: 2px solid var(--gold-dark);
  background:
    linear-gradient(180deg, #6f3819, #321506);
  box-shadow: inset 0 -5px 10px #0005;
}

.panel-heading span {
  color: var(--gold);
  font-size: 20px;
}

.panel-heading h2 {
  margin: 0;
  color: var(--gold-light);
  font-family: Georgia, serif;
  font-size: 19px;
  letter-spacing: 0.5px;
  text-shadow: 0 2px #3d1607;
}

.primary {
  color: #271205;
  border-color: #6e3410;
  background:
    linear-gradient(180deg, #ffd35c 0%, #e69125 55%, #9a4212 100%);
  box-shadow:
    0 4px 0 #4e1e08,
    inset 0 1px 0 #fff5b2,
    0 8px 18px #0007;
}

/* =========================================================
   HOME SCREEN
   ========================================================= */

#home {
  position: relative;
  min-height: 100vh;
  place-items: center;
  background:
    url("/assets/concept.png") center center / cover fixed no-repeat;
}

#home.active {
  display: grid;
}

.home-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, transparent 8%, #03081555 54%, #02050bd9),
    linear-gradient(180deg, #02071644, #02050dcc);
  backdrop-filter: blur(2px);
}

.hero-card {
  position: relative;
  z-index: 2;
  width: min(620px, 92vw);
  padding: 34px 42px 38px;
  border: 4px solid var(--gold-dark);
  border-radius: 24px;
  text-align: center;
  background:
    linear-gradient(150deg, rgba(18, 31, 54, 0.98), rgba(5, 10, 21, 0.98));
  box-shadow:
    0 24px 80px #000e,
    inset 0 0 0 2px #f5c45d4d,
    inset 0 0 45px #000a;
}

.hero-card::before,
.hero-card::after {
  position: absolute;
  top: 12px;
  width: 22px;
  height: 22px;
  border: 3px solid #40200b;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd76f, #9b531c 70%);
  content: "";
}

.hero-card::before {
  left: 12px;
}

.hero-card::after {
  right: 12px;
}

.home-logo span {
  display: block;
  color: var(--gold);
  font-family: Georgia, serif;
  font-size: clamp(44px, 8vw, 82px);
  font-weight: 1000;
  letter-spacing: 1px;
  line-height: 0.95;
  text-shadow:
    0 4px 0 #8d3d18,
    0 8px 18px #000d,
    0 0 22px #ffae32aa;
}

.home-logo b {
  display: inline-block;
  margin-top: 8px;
  padding: 7px 28px;
  border-radius: 11px;
  color: white;
  background:
    linear-gradient(#d9363d, #8c1118);
  box-shadow:
    0 5px 0 #510a0e,
    0 10px 20px #0008;
  font-size: 27px;
  letter-spacing: 1px;
  transform: rotate(-2deg);
}

.tagline {
  margin: 22px 0 24px;
  color: var(--cream);
  font-size: 18px;
}

.field-label {
  display: block;
  margin: 0 0 7px;
  color: var(--gold-light);
  text-align: left;
  font-weight: 800;
}

.hero-button {
  width: 100%;
  margin-top: 13px;
  font-size: 17px;
}

.join-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 14px;
  color: #cfae70;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
}

.join-divider::before,
.join-divider::after {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, #b7792c, transparent);
  content: "";
}

.join-row {
  display: grid;
  grid-template-columns: 1fr 135px;
  gap: 10px;
}

.status {
  min-height: 23px;
  margin-bottom: 0;
  color: #ffd76d;
  font-weight: bold;
}

/* =========================================================
   TOP BAR
   ========================================================= */

.game-screen {
  min-height: 100vh;
  background:
    radial-gradient(circle at 58% 15%, #4c2747 0%, #101d37 42%, #050913 100%);
}

.topbar {
  position: sticky;
  z-index: 50;
  top: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 72px;
  padding: 8px 14px;
  border-bottom: 3px solid var(--gold-dark);
  background:
    linear-gradient(180deg, rgba(42, 22, 10, 0.98), rgba(9, 13, 24, 0.98));
  box-shadow: 0 8px 24px #0009;
}

.leave-button {
  justify-self: start;
}

.game-title {
  text-align: center;
  line-height: 1;
}

.game-title span {
  display: block;
  color: var(--gold);
  font-family: Georgia, serif;
  font-size: 28px;
  font-weight: 1000;
  letter-spacing: 1px;
  text-shadow:
    0 3px #7b3413,
    0 5px 12px #000;
}

.game-title b {
  display: inline-block;
  margin-top: 2px;
  padding: 3px 14px;
  border-radius: 6px;
  color: white;
  background: var(--red);
  box-shadow: 0 3px var(--red-dark);
  font-size: 13px;
}

.topbar-right {
  display: flex;
  justify-self: end;
  align-items: center;
  gap: 9px;
}

.room-chip,
.round-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 2px solid var(--gold-dark);
  border-radius: 10px;
  padding: 7px 10px;
  background:
    linear-gradient(#472610, #211006);
  box-shadow:
    inset 0 0 0 1px #f6c45a44,
    0 4px 12px #0008;
}

.room-chip small,
.round-chip small {
  color: #d7b878;
  font-size: 10px;
}

.room-chip strong,
.round-chip strong {
  color: white;
  font-size: 14px;
}

.room-chip button {
  padding: 4px 8px;
  font-size: 11px;
}

/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.game-layout {
  display: grid;
  grid-template-columns: minmax(190px, 230px) minmax(540px, 1fr) minmax(190px, 230px);
  gap: 12px;
  width: min(1600px, 100%);
  margin: 0 auto;
  padding: 12px;
}

.center-column {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.players-panel,
.clue-panel {
  min-height: 300px;
}

.players-panel {
  padding-bottom: 14px;
}

#players {
  padding: 0 10px;
}

.player-row {
  margin: 8px 0;
  padding: 10px;
  border: 1px solid #ffffff20;
  border-left: 4px solid #6f7d92;
  border-radius: 9px;
  background:
    linear-gradient(90deg, #ffffff13, #ffffff06);
  box-shadow: inset 0 0 12px #0004;
}

.player-row strong {
  display: block;
  color: var(--cream);
}

.player-row small {
  display: block;
  margin-top: 4px;
  color: #bec8d7;
  font-size: 11px;
}

.player-row.me {
  outline: 1px solid #62adff;
  box-shadow:
    0 0 12px #3294ff44,
    inset 0 0 12px #0004;
}

.player-row.turn {
  border-left-color: #5ce477;
  background:
    linear-gradient(90deg, #4bcf6428, #ffffff08);
  box-shadow:
    0 0 15px #4bd16435,
    inset 0 0 12px #0004;
}

/* =========================================================
   GAME SCENE
   ========================================================= */

.scene {
  position: relative;
  min-height: clamp(430px, 48vw, 650px);
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(
      180deg,
      #2a2147 0%,
      #763d64 28%,
      #da6a50 54%,
      #f7a95a 57%,
      #174b69 58%,
      #06263b 100%
    );
}

.scene-sky {
  position: absolute;
  z-index: -10;
  inset: 0;
  background:
    radial-gradient(circle at 73% 40%, #ffd784 0 8%, #ffa95365 17%, transparent 35%),
    linear-gradient(180deg, transparent 45%, #061f32aa 72%);
}

.sky-glow {
  position: absolute;
  z-index: -8;
  top: 29%;
  right: 12%;
  width: 145px;
  height: 145px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff2a4 0%, #ffc65e 52%, #f8984655 70%, transparent 73%);
  box-shadow: 0 0 60px #ffb04b;
}

.cloud {
  position: absolute;
  z-index: -9;
  width: 210px;
  height: 45px;
  border-radius: 50%;
  opacity: 0.28;
  background: #332143;
  filter: blur(7px);
}

.cloud-one {
  top: 15%;
  left: 48%;
  transform: rotate(8deg);
}

.cloud-two {
  top: 29%;
  right: -3%;
  transform: rotate(-6deg) scale(1.2);
}

.distant-island {
  position: absolute;
  z-index: -5;
  right: 4%;
  bottom: 35%;
  width: 155px;
  height: 180px;
  opacity: 0.85;
  background:
    linear-gradient(90deg, #1d1a26, #332531);
  clip-path:
    polygon(
      43% 0%,
      57% 12%,
      64% 27%,
      78% 44%,
      87% 66%,
      100% 100%,
      0% 100%,
      15% 70%,
      28% 40%
    );
}

.ship-back {
  position: absolute;
  z-index: 2;
  left: -4%;
  bottom: 31%;
  width: 39%;
  height: 49%;
  border-right: 8px solid #231006;
  background:
    repeating-linear-gradient(
      90deg,
      #2b1208 0 30px,
      #4b2310 30px 60px
    );
  clip-path:
    polygon(0 0, 75% 4%, 100% 100%, 0 100%);
  box-shadow: 10px 10px 18px #0008;
}

.mast {
  position: absolute;
  z-index: 3;
  bottom: 42%;
  left: 8%;
  width: 18px;
  height: 52%;
  border: 4px solid #2b1005;
  background:
    linear-gradient(90deg, #3b1607, #a35c29 48%, #3b1607);
  transform: rotate(-2deg);
}

.pirate-flag {
  position: absolute;
  z-index: 3;
  top: 10%;
  left: 9%;
  display: grid;
  place-items: center;
  width: 125px;
  height: 72px;
  color: white;
  border: 3px solid #211006;
  background: #121212;
  box-shadow: 8px 8px 15px #0007;
  font-size: 36px;
  transform: rotate(-4deg);
  clip-path:
    polygon(0 0, 100% 8%, 86% 50%, 100% 90%, 0 100%);
}

.ship {
  position: absolute;
  z-index: 4;
  left: -6%;
  bottom: 33%;
  width: 44%;
  height: 25%;
  border-top: 12px solid #9e5d2d;
  background:
    repeating-linear-gradient(
      0deg,
      #351609 0 18px,
      #623117 18px 36px
    );
  clip-path:
    polygon(0 0, 82% 4%, 100% 62%, 82% 100%, 12% 85%);
  box-shadow:
    0 15px 25px #000b,
    inset -20px -15px 20px #0007;
}

.plank {
  position: absolute;
  z-index: 5;
  left: 24%;
  bottom: 43%;
  width: 49%;
  height: 35px;
  border: 3px solid #381509;
  border-radius: 3px;
  background:
    repeating-linear-gradient(
      90deg,
      #7a3b18 0 55px,
      #934d22 55px 110px
    );
  box-shadow:
    0 9px 12px #0009,
    inset 0 4px 0 #bc7540,
    inset 0 -5px 0 #321105;
  transform: rotate(1deg);
}

.plank::before,
.plank::after {
  position: absolute;
  width: 3px;
  height: 25px;
  background: #351307;
  content: "";
}

.plank::before {
  left: 39%;
  top: 2px;
  transform: rotate(20deg);
}

.plank::after {
  left: 71%;
  top: 4px;
  transform: rotate(-17deg);
}

.pirate {
  position: absolute;
  z-index: 10;
  bottom: 44%;
  left: 30%;
  width: 92px;
  height: 175px;
  transform-origin: bottom center;
  transition:
    left 0.75s ease,
    transform 0.5s ease;
  filter: drop-shadow(0 10px 7px #0009);
}

.pirate-hat {
  position: relative;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 90px;
  height: 42px;
  margin-left: 1px;
  border: 4px solid #0a0807;
  border-radius: 55% 55% 28% 28%;
  color: white;
  background:
    linear-gradient(#28221e, #050505);
  font-size: 24px;
  transform: rotate(-3deg);
}

.pirate-hat::before {
  position: absolute;
  bottom: -7px;
  left: 6px;
  width: 78px;
  height: 12px;
  border-radius: 50%;
  background: #050505;
  content: "";
}

.pirate-head {
  position: relative;
  z-index: 3;
  width: 64px;
  height: 60px;
  margin: -2px auto 0;
  border: 3px solid #5e2913;
  border-radius: 45% 45% 42% 42%;
  background: #d7874e;
}

.pirate-face {
  margin-top: 4px;
  text-align: center;
  font-size: 42px;
  line-height: 49px;
}

.pirate-body {
  position: relative;
  z-index: 2;
  width: 64px;
  height: 72px;
  margin: -1px auto 0;
  border: 4px solid #562610;
  border-radius: 12px 12px 5px 5px;
  background:
    repeating-linear-gradient(
      90deg,
      #25628e 0 11px,
      #f0eee4 11px 22px
    );
  box-shadow:
    inset 0 -18px 0 #622610,
    inset 0 -25px 0 #c12829;
}

.pirate-legs {
  width: 55px;
  height: 31px;
  margin: -1px auto;
  border-radius: 0 0 8px 8px;
  background:
    linear-gradient(90deg, #222 0 43%, transparent 43% 57%, #222 57%);
}

.pirate-rope {
  position: absolute;
  z-index: 8;
  left: 11px;
  width: 72px;
  height: 13px;
  border: 3px solid #4f2d12;
  border-radius: 50%;
  background:
    repeating-linear-gradient(
      35deg,
      #d6a258 0 5px,
      #8e5b25 5px 10px
    );
  box-shadow: 0 2px 3px #0008;
}

.rope-top {
  top: 95px;
  transform: rotate(6deg);
}

.rope-bottom {
  top: 115px;
  transform: rotate(-6deg);
}

.ocean {
  position: absolute;
  z-index: 7;
  left: -10%;
  width: 120%;
  background:
    radial-gradient(
      ellipse at 50% 0%,
      transparent 0 24%,
      #2f82a8 25% 40%,
      #0b4466 41% 64%,
      #06293f 65%
    );
  background-size: 140px 70px;
}

.ocean-back {
  bottom: 0;
  height: 42%;
  opacity: 0.92;
  animation: waveMove 7s linear infinite;
}

.ocean-front {
  bottom: -8%;
  height: 39%;
  opacity: 0.78;
  animation: waveMove 5s linear infinite reverse;
}

@keyframes waveMove {
  to {
    background-position: 280px 0;
  }
}

.kraken {
  position: absolute;
  z-index: 8;
  right: 10%;
  bottom: -145px;
  width: 230px;
  height: 300px;
  transform-origin: center bottom;
  transition:
    bottom 0.8s ease,
    transform 0.5s ease;
  filter: drop-shadow(0 10px 10px #000b);
}

.monster {
  position: absolute;
  right: 37px;
  bottom: 0;
  width: 155px;
  height: 142px;
  border: 8px solid #46245f;
  border-radius: 51% 51% 38% 38%;
  background:
    radial-gradient(circle at 32% 27%, #458d8e 0 5%, transparent 6%),
    radial-gradient(circle at 66% 35%, #3d8c8e 0 4%, transparent 5%),
    linear-gradient(145deg, #24727b, #0e3d51);
  box-shadow:
    inset 0 -18px 25px #042833,
    inset 0 8px 12px #79c6b544;
}

.monster::before,
.monster::after {
  position: absolute;
  top: -20px;
  width: 25px;
  height: 45px;
  background: #5b2d79;
  content: "";
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.monster::before {
  left: 30px;
  transform: rotate(-15deg);
}

.monster::after {
  right: 30px;
  transform: rotate(15deg);
}

.monster-eye {
  position: absolute;
  top: 42px;
  width: 31px;
  height: 25px;
  border: 4px solid #08272d;
  border-radius: 50%;
  background:
    radial-gradient(circle, #121212 0 24%, #ffcc3b 26% 65%, #fff1a0 67%);
}

.eye-left {
  left: 28px;
  transform: rotate(11deg);
}

.eye-right {
  right: 28px;
  transform: rotate(-11deg);
}

.monster-mouth {
  position: absolute;
  left: 28px;
  bottom: 22px;
  width: 98px;
  height: 43px;
  border-radius: 10px 10px 45% 45%;
  color: white;
  background: #190d19;
  text-align: center;
  font-size: 17px;
  letter-spacing: 2px;
  line-height: 38px;
}

.tentacle {
  position: absolute;
  bottom: 40px;
  width: 40px;
  height: 235px;
  border: 6px solid #173f54;
  border-radius: 55% 55% 45% 45%;
  background:
    radial-gradient(circle at 28% 30%, #a86cb4 0 5%, transparent 6%),
    linear-gradient(90deg, #542c75, #874b93, #38225f);
}

.tentacle-left {
  left: 5px;
  transform: rotate(-39deg);
}

.tentacle-middle {
  left: 95px;
  height: 205px;
  transform: rotate(-3deg);
}

.tentacle-right {
  right: 2px;
  transform: rotate(41deg);
}

.danger-card {
  position: absolute;
  z-index: 25;
  top: 18px;
  right: 18px;
  min-width: 176px;
  padding: 14px 14px 12px;
  border: 6px solid #633415;
  border-radius: 7px;
  color: #4a1d0d;
  text-align: center;
  background:
    linear-gradient(90deg, #d2aa67, #f5ddb0 14%, #f6e2b7 82%, #c99b58);
  box-shadow:
    0 10px 20px #0009,
    inset 0 0 18px #8a542b45;
  transform: rotate(1deg);
}

.danger-card::before,
.danger-card::after {
  position: absolute;
  top: -13px;
  width: 14px;
  height: 22px;
  border-radius: 5px;
  background: #4a210d;
  content: "";
}

.danger-card::before {
  left: 19px;
}

.danger-card::after {
  right: 19px;
}

.danger-title {
  font-family: Georgia, serif;
  font-weight: 1000;
}

.skulls {
  min-height: 28px;
  margin: 8px 0;
  color: var(--red);
  font-size: 22px;
  letter-spacing: 2px;
}

.danger-card b {
  font-size: 23px;
}

.scene-message {
  position: absolute;
  z-index: 12;
  bottom: 12px;
  left: 50%;
  padding: 8px 16px;
  border: 1px solid #f4bf514d;
  border-radius: 20px;
  color: #f7d98f;
  background: #06101dc4;
  box-shadow: 0 4px 15px #0007;
  font-size: 12px;
  transform: translateX(-50%);
}

/* =========================================================
   PUZZLE
   ========================================================= */

.puzzle {
  padding: 17px 18px 18px;
  text-align: center;
}

.category-banner {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 18px;
  border: 2px solid var(--gold-dark);
  border-radius: 15px;
  color: #dfbd72;
  background:
    linear-gradient(180deg, #4a260f, #251005);
  box-shadow: 0 4px 12px #0008;
  font-size: 12px;
}

.category-banner strong {
  color: #ffe18a;
}

.word-plaque {
  width: min(900px, 98%);
  margin: 0 auto 14px;
  padding: 13px 20px;
  border: 4px solid var(--gold-dark);
  border-radius: 18px;
  background:
    linear-gradient(180deg, #172a48, #081326);
  box-shadow:
    0 7px 0 #3a1707,
    0 14px 25px #0008,
    inset 0 0 0 2px #f3c45738,
    inset 0 0 25px #0006;
}

.masked-word {
  min-height: 57px;
  margin: 0;
  color: #fff4d2;
  font-family: Georgia, serif;
  font-size: clamp(28px, 4.2vw, 51px);
  font-weight: bold;
  letter-spacing: 7px;
  text-shadow:
    0 3px #000,
    0 0 14px #fff1bc22;
}

.keyboard {
  display: grid;
  grid-template-columns: repeat(13, minmax(42px, 1fr));
  gap: 7px;
  width: min(1050px, 100%);
  margin: 10px auto 14px;
  padding: 13px;
  border: 3px solid #5a2b10;
  border-radius: 14px;
  background:
    repeating-linear-gradient(
      90deg,
      #381608 0 75px,
      #53270f 75px 150px
    );
  box-shadow:
    inset 0 0 20px #000b,
    0 8px 20px #0007;
}

.key {
  min-height: 48px;
  padding: 8px 3px;
  border: 2px solid #b97a30;
  border-radius: 8px;
  color: #fff4d4;
  background:
    linear-gradient(180deg, #274b70, #132a48);
  box-shadow:
    0 4px 0 #071322,
    inset 0 1px 0 #ffffff38;
  font-family: Georgia, serif;
  font-size: 18px;
}

.key.correct {
  border-color: #95d55b;
  background:
    linear-gradient(180deg, #72c43c, #2e7719);
  box-shadow:
    0 4px 0 #173e0c,
    0 0 13px #71ce4166;
}

.key.wrong {
  border-color: #e56c61;
  background:
    linear-gradient(180deg, #df493d, #82191b);
  box-shadow:
    0 4px 0 #41090b,
    0 0 13px #d9343455;
}

.solve-row {
  display: grid;
  grid-template-columns: 1fr 140px;
  gap: 9px;
  width: min(600px, 100%);
  margin: 0 auto 8px;
}

.result {
  min-height: 31px;
  color: #ffd762;
  font-size: 20px;
  font-weight: 1000;
  text-shadow: 0 2px #000;
}

.lobby-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* =========================================================
   RIGHT PANEL
   ========================================================= */

.clue-panel {
  padding-bottom: 14px;
}

.clue-card,
.turn-card,
.tips-card {
  margin: 12px;
  padding: 14px;
  border: 1px solid #ffffff19;
  border-radius: 11px;
  background:
    linear-gradient(150deg, #ffffff10, #00000025);
  box-shadow:
    inset 0 0 18px #0005;
}

.clue-card small,
.turn-card small,
.tips-card small {
  color: var(--gold);
  font-weight: bold;
  letter-spacing: 0.5px;
}

.clue-card p,
.tips-card p {
  margin-bottom: 0;
  color: var(--cream);
  line-height: 1.45;
}

.turn-card {
  text-align: center;
}

.turn-card strong {
  display: block;
  margin: 8px 0;
  color: white;
  font-size: 20px;
}

.timer {
  height: 11px;
  overflow: hidden;
  border: 1px solid #000;
  border-radius: 8px;
  background: #02060dbf;
  box-shadow: inset 0 2px 4px #000;
}

.timer i {
  display: block;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(90deg, #3db65a, #7de56f);
  box-shadow: 0 0 8px #51dc76;
  transition: width 0.2s linear;
}

#timerText {
  display: block;
  margin-top: 7px;
  color: #ccd6e3;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {
  .game-layout {
    grid-template-columns: 190px minmax(500px, 1fr) 190px;
  }

  .scene {
    min-height: 510px;
  }

  .keyboard {
    grid-template-columns: repeat(9, 1fr);
  }
}

@media (max-width: 930px) {
  .topbar {
    grid-template-columns: auto 1fr auto;
  }

  .game-title span {
    font-size: 22px;
  }

  .round-chip {
    display: none;
  }

  .game-layout {
    grid-template-columns: 1fr;
  }

  .center-column {
    order: 1;
  }

  .players-panel {
    order: 2;
  }

  .clue-panel {
    order: 3;
  }

  .players-panel,
  .clue-panel {
    min-height: auto;
  }

  .scene {
    min-height: 470px;
  }

  .keyboard {
    grid-template-columns: repeat(7, 1fr);
  }

  #players {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 6px;
  }

  .danger-card {
    transform: scale(0.82);
    transform-origin: top right;
  }
}

@media (max-width: 620px) {
  .hero-card {
    padding: 30px 20px;
  }

  .join-row,
  .solve-row {
    grid-template-columns: 1fr;
  }

  .topbar {
    grid-template-columns: auto 1fr;
    min-height: 62px;
  }

  .game-title {
    display: none;
  }

  .topbar-right {
    min-width: 0;
  }

  .room-chip {
    gap: 5px;
    padding: 5px 7px;
  }

  .room-chip strong {
    max-width: 100px;
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
  }

  .game-layout {
    padding: 6px;
  }

  .scene {
    min-height: 390px;
  }

  .ship-back {
    width: 45%;
  }

  .ship {
    width: 52%;
  }

  .plank {
    left: 27%;
    width: 63%;
  }

  .pirate {
    bottom: 43%;
    transform: scale(0.82);
  }

  .kraken {
    right: 1%;
    transform: scale(0.8);
  }

  .scene-message {
    width: 90%;
    text-align: center;
  }

  .danger-card {
    top: 9px;
    right: 7px;
    transform: scale(0.66);
    transform-origin: top right;
  }

  .keyboard {
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    padding: 8px;
  }

  .key {
    min-height: 42px;
    font-size: 15px;
  }

  .masked-word {
    font-size: clamp(23px, 8vw, 38px);
    letter-spacing: 3px;
  }
}

/* =========================================================
   VISUAL STEP 2A
   Scene proportions, scale, and positioning only
   ========================================================= */

.scene {
  min-height: clamp(520px, 48vw, 690px);
}

/* Make the ship occupy more of the left side */
.ship-back {
  left: -3%;
  bottom: 30%;
  width: 44%;
  height: 54%;
}

.ship {
  left: -4%;
  bottom: 32%;
  width: 49%;
  height: 27%;
}

/* Make the plank longer and more prominent */
.plank {
  left: 27%;
  bottom: 42%;
  width: 57%;
  height: 42px;
}

/* Enlarge and better position the pirate */
.pirate {
  left: 34%;
  bottom: 43%;
  width: 122px;
  height: 228px;
  transform-origin: bottom center;
}

/* Scale all pirate internals proportionally */
.pirate-hat {
  width: 118px;
  height: 52px;
  margin-left: 2px;
  font-size: 30px;
}

.pirate-hat::before {
  left: 8px;
  width: 102px;
  height: 14px;
}

.pirate-head {
  width: 82px;
  height: 75px;
}

.pirate-face {
  margin-top: 7px;
  font-size: 51px;
  line-height: 59px;
}

.pirate-body {
  width: 82px;
  height: 91px;
}

.pirate-legs {
  width: 70px;
  height: 42px;
}

.pirate-rope {
  left: 13px;
  width: 95px;
  height: 15px;
}

.rope-top {
  top: 120px;
}

.rope-bottom {
  top: 148px;
}

/* Bring the Kraken farther into view */
.kraken {
  right: 5%;
  bottom: -92px;
  width: 315px;
  height: 390px;
}

.monster {
  right: 48px;
  bottom: 0;
  width: 205px;
  height: 190px;
}

.monster-eye {
  top: 53px;
  width: 39px;
  height: 33px;
}

.eye-left {
  left: 39px;
}

.eye-right {
  right: 39px;
}

.monster-mouth {
  left: 37px;
  bottom: 27px;
  width: 131px;
  height: 53px;
  font-size: 21px;
  line-height: 47px;
}

.tentacle {
  width: 50px;
  height: 300px;
}

.tentacle-middle {
  left: 127px;
  height: 270px;
}

/* Reduce ocean dominance */
.ocean-back {
  bottom: 0;
  height: 34%;
  background-size: 165px 82px;
}

.ocean-front {
  bottom: -7%;
  height: 31%;
  background-size: 175px 86px;
}

/* Lift the wrong guesses panel slightly */
.danger-card {
  top: 16px;
  right: 18px;
  min-width: 190px;
  padding: 16px 16px 14px;
}

.skulls {
  font-size: 24px;
}

/* Keep the scene caption readable */
.scene-message {
  bottom: 12px;
  z-index: 30;
  padding: 9px 18px;
  font-size: 13px;
}

/* More dramatic plank shadow */
.plank {
  box-shadow:
    0 13px 18px #000b,
    inset 0 5px 0 #c98248,
    inset 0 -6px 0 #321105;
}

/* Danger progression positioning */
.danger-0 .pirate {
  left: 34%;
}

.danger-1 .pirate {
  left: 40%;
}

.danger-2 .pirate {
  left: 46%;
}

.danger-3 .pirate {
  left: 52%;
}

.danger-4 .pirate {
  left: 58%;
}

.danger-5 .pirate {
  left: 64%;
}

.danger-6 .pirate {
  left: 71%;
  transform: rotate(8deg) translateY(8px);
}

.danger-0 .kraken {
  bottom: -185px;
}

.danger-1 .kraken {
  bottom: -160px;
}

.danger-2 .kraken {
  bottom: -135px;
}

.danger-3 .kraken {
  bottom: -105px;
}

.danger-4 .kraken {
  bottom: -70px;
}

.danger-5 .kraken {
  bottom: -35px;
}

.danger-6 .kraken {
  bottom: -5px;
  transform: scale(1.08);
}

/* Desktop-wide tuning */
@media (min-width: 1200px) {
  .scene {
    min-height: 650px;
  }

  .pirate {
    width: 138px;
    height: 248px;
  }

  .kraken {
    width: 360px;
    height: 430px;
  }

  .plank {
    width: 60%;
  }
}

/* Tablet tuning */
@media (max-width: 930px) {
  .scene {
    min-height: 500px;
  }

  .ship-back {
    width: 48%;
  }

  .ship {
    width: 55%;
  }

  .plank {
    left: 29%;
    width: 63%;
  }

  .pirate {
    width: 104px;
    height: 205px;
  }

  .kraken {
    right: 0;
    width: 275px;
    height: 350px;
  }
}

/* Phone tuning */
@media (max-width: 620px) {
  .scene {
    min-height: 420px;
  }

  .ship-back {
    left: -10%;
    width: 58%;
  }

  .ship {
    left: -11%;
    width: 67%;
  }

  .plank {
    left: 31%;
    width: 65%;
    height: 32px;
  }

  .pirate {
    width: 82px;
    height: 172px;
    bottom: 41%;
  }

  .pirate-hat {
    width: 80px;
    height: 38px;
    font-size: 20px;
  }

  .pirate-hat::before {
    width: 67px;
  }

  .pirate-head {
    width: 57px;
    height: 53px;
  }

  .pirate-face {
    font-size: 36px;
    line-height: 41px;
  }

  .pirate-body {
    width: 57px;
    height: 65px;
  }

  .pirate-legs {
    width: 48px;
    height: 29px;
  }

  .pirate-rope {
    left: 8px;
    width: 65px;
    height: 11px;
  }

  .rope-top {
    top: 87px;
  }

  .rope-bottom {
    top: 107px;
  }

  .kraken {
    right: -12%;
    width: 220px;
    height: 290px;
  }

  .danger-card {
    transform: scale(0.7);
    transform-origin: top right;
  }

  .ocean-back {
    height: 33%;
  }

  .ocean-front {
    height: 30%;
  }
}

/* =========================================================
   VISUAL STEP 2B
   Water depth, foam, lighting, splashes, and Kraken polish
   ========================================================= */

.scene {
  background:
    linear-gradient(
      180deg,
      #291d44 0%,
      #713a61 30%,
      #d56c51 53%,
      #f3aa59 59%,
      #123e59 60%,
      #041722 100%
    );
}

/* Reduce the repetitive ocean dominance */
.ocean-back {
  bottom: -2%;
  height: 29%;
  opacity: 0.82;
  background-size: 205px 92px;
  filter: saturate(0.88) brightness(0.78);
}

.ocean-front {
  bottom: -10%;
  height: 27%;
  opacity: 0.9;
  background-size: 220px 102px;
  filter: saturate(0.92) brightness(0.72);
}

/* Darker water underneath for depth */
.water-depth {
  position: absolute;
  z-index: 6;
  right: 0;
  bottom: 0;
  left: 0;
  height: 34%;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(4, 45, 66, 0) 0%,
      rgba(3, 27, 43, 0.36) 28%,
      rgba(1, 13, 23, 0.86) 100%
    );
}

/* Softer sunset lighting */
.sun-haze {
  position: absolute;
  z-index: 3;
  top: 21%;
  right: 9%;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.62;
  background:
    radial-gradient(
      circle,
      rgba(255, 249, 194, 0.96) 0%,
      rgba(255, 205, 99, 0.52) 34%,
      rgba(255, 152, 68, 0.2) 59%,
      transparent 74%
    );
  filter: blur(10px);
  mix-blend-mode: screen;
  animation: sunPulse 4.8s ease-in-out infinite;
}

@keyframes sunPulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.96);
  }

  50% {
    opacity: 0.72;
    transform: scale(1.04);
  }
}

/* Glow along the plank */
.plank-glow {
  position: absolute;
  z-index: 6;
  left: 27%;
  bottom: 41%;
  width: 57%;
  height: 48px;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0.55;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 189, 86, 0.22) 25%,
      rgba(255, 217, 128, 0.36) 54%,
      rgba(255, 160, 64, 0.16) 79%,
      transparent
    );
  filter: blur(8px);
}

/* White foam bands */
.wave-foam {
  position: absolute;
  z-index: 13;
  left: -8%;
  width: 116%;
  height: 22px;
  pointer-events: none;
  opacity: 0.48;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255, 255, 255, 0.84) 0 20%,
      rgba(173, 222, 239, 0.58) 22% 37%,
      transparent 39%
    );
  background-size: 92px 22px;
}

.foam-one {
  bottom: 24%;
  animation: foamDriftOne 7s linear infinite;
}

.foam-two {
  bottom: 18%;
  opacity: 0.31;
  background-size: 130px 20px;
  animation: foamDriftTwo 9s linear infinite reverse;
}

.foam-three {
  bottom: 11%;
  opacity: 0.23;
  background-size: 165px 18px;
  animation: foamDriftOne 11s linear infinite;
}

@keyframes foamDriftOne {
  to {
    background-position: 184px 0;
  }
}

@keyframes foamDriftTwo {
  to {
    background-position: 260px 0;
  }
}

/* Splash clusters around the Kraken */
.splash {
  position: absolute;
  z-index: 15;
  width: 90px;
  height: 58px;
  pointer-events: none;
  opacity: 0.62;
  background:
    radial-gradient(
      ellipse at 50% 85%,
      rgba(255, 255, 255, 0.86) 0 10%,
      rgba(154, 218, 237, 0.55) 12% 25%,
      transparent 27%
    ),
    radial-gradient(
      ellipse at 25% 60%,
      rgba(255, 255, 255, 0.72) 0 8%,
      transparent 10%
    ),
    radial-gradient(
      ellipse at 75% 46%,
      rgba(255, 255, 255, 0.68) 0 7%,
      transparent 9%
    );
  animation: splashBob 2.4s ease-in-out infinite;
}

.splash-one {
  right: 7%;
  bottom: 17%;
}

.splash-two {
  right: 22%;
  bottom: 13%;
  width: 70px;
  transform: scale(0.8);
  animation-delay: -0.8s;
}

.splash-three {
  right: 1%;
  bottom: 10%;
  width: 64px;
  transform: scale(0.68);
  animation-delay: -1.3s;
}

@keyframes splashBob {
  0%,
  100% {
    opacity: 0.38;
    transform: translateY(5px) scale(0.92);
  }

  50% {
    opacity: 0.76;
    transform: translateY(-5px) scale(1.04);
  }
}

/* Scene depth and edge shading */
.scene-depth {
  position: absolute;
  z-index: 40;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.29) 0%,
      transparent 19%,
      transparent 73%,
      rgba(0, 0, 0, 0.16) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.08) 0%,
      transparent 32%,
      transparent 69%,
      rgba(0, 0, 0, 0.28) 100%
    );
  box-shadow:
    inset 0 0 45px rgba(0, 0, 0, 0.58);
}

/* Give the ship and plank more separation */
.ship {
  filter:
    drop-shadow(10px 15px 10px rgba(0, 0, 0, 0.38));
}

.plank {
  border-top-color: #c2763b;
  filter:
    drop-shadow(0 9px 5px rgba(0, 0, 0, 0.42));
}

/* Improve the pirate lighting */
.pirate {
  z-index: 20;
  filter:
    drop-shadow(0 14px 8px rgba(0, 0, 0, 0.64))
    drop-shadow(0 0 7px rgba(255, 191, 85, 0.28));
}

/* Keep the monster more visible */
.kraken {
  z-index: 18;
  right: 4%;
  filter:
    drop-shadow(0 16px 12px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 10px rgba(92, 66, 137, 0.32));
}

/* Larger and clearer parchment panel */
.danger-card {
  z-index: 55;
  min-width: 208px;
  padding: 18px 17px 15px;
  border-width: 7px;
  box-shadow:
    0 13px 24px rgba(0, 0, 0, 0.67),
    inset 0 0 19px rgba(110, 64, 24, 0.29);
}

.danger-title {
  font-size: 16px;
  letter-spacing: 0.4px;
}

.skulls {
  min-height: 32px;
  margin: 10px 0;
  font-size: 25px;
}

/* Higher danger stages become more dramatic */
.danger-3 .splash,
.danger-4 .splash {
  opacity: 0.78;
}

.danger-5 .splash,
.danger-6 .splash {
  opacity: 0.95;
  animation-duration: 1.35s;
}

.danger-4 .scene-depth {
  box-shadow:
    inset 0 0 52px rgba(0, 0, 0, 0.65);
}

.danger-5 .scene-depth,
.danger-6 .scene-depth {
  background:
    radial-gradient(
      circle at 66% 56%,
      transparent 0%,
      rgba(116, 12, 18, 0.09) 45%,
      rgba(23, 0, 3, 0.42) 100%
    );
  box-shadow:
    inset 0 0 65px rgba(66, 0, 5, 0.72);
}

.danger-6 .pirate {
  filter:
    drop-shadow(0 15px 9px rgba(0, 0, 0, 0.78))
    drop-shadow(0 0 13px rgba(255, 85, 56, 0.58));
}

/* Tablet tuning */
@media (max-width: 930px) {
  .sun-haze {
    right: 4%;
    width: 175px;
    height: 175px;
  }

  .plank-glow {
    left: 29%;
    width: 63%;
  }

  .danger-card {
    min-width: 190px;
  }
}

/* Mobile tuning */
@media (max-width: 620px) {
  .sun-haze {
    top: 24%;
    right: 0;
    width: 130px;
    height: 130px;
  }

  .plank-glow {
    left: 31%;
    width: 65%;
    height: 35px;
  }

  .wave-foam {
    height: 16px;
    background-size: 74px 16px;
  }

  .splash-one {
    right: 1%;
  }

  .splash-two {
    right: 17%;
  }

  .danger-card {
    min-width: 190px;
  }
}

/* =========================================================
   VISUAL STEP 2B FIX
   Remove dark water band and improve Kraken visibility
   ========================================================= */

.water-depth {
  z-index: 6;
  bottom: 0;
  height: 29%;
  background:
    linear-gradient(
      180deg,
      rgba(5, 44, 61, 0) 0%,
      rgba(4, 35, 51, 0.12) 25%,
      rgba(3, 25, 39, 0.38) 62%,
      rgba(1, 12, 21, 0.72) 100%
    );
}

/* Remove the harsh horizontal edge */
.water-depth::before {
  position: absolute;
  top: -35px;
  right: 0;
  left: 0;
  height: 65px;
  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(18, 66, 83, 0.12),
      rgba(8, 40, 57, 0.28),
      transparent
    );
  filter: blur(13px);
  content: "";
}

/* Keep the ship and plank above all water shading */
.ship-back {
  z-index: 7;
}

.ship {
  z-index: 8;
}

.plank {
  z-index: 12;
}

.plank-glow {
  z-index: 13;
}

.pirate {
  z-index: 22;
}

/* Raise the monster so more of the head is visible */
.kraken {
  z-index: 18;
  right: 3%;
}

.danger-0 .kraken {
  bottom: -145px !important;
}

.danger-1 .kraken {
  bottom: -120px !important;
}

.danger-2 .kraken {
  bottom: -92px !important;
}

.danger-3 .kraken {
  bottom: -58px !important;
}

.danger-4 .kraken {
  bottom: -26px !important;
}

.danger-5 .kraken {
  bottom: 4px !important;
}

.danger-6 .kraken {
  bottom: 30px !important;
}

/* Foam should sit on the water surface, not across the ship */
.foam-one {
  bottom: 20%;
}

.foam-two {
  bottom: 14%;
}

.foam-three {
  bottom: 8%;
}

/* Keep splashes near the Kraken */
.splash-one {
  right: 5%;
  bottom: 16%;
}

.splash-two {
  right: 19%;
  bottom: 12%;
}

.splash-three {
  right: 1%;
  bottom: 9%;
}

/* Reduce excessive darkness around the bottom */
.scene-depth {
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.22) 0%,
      transparent 18%,
      transparent 76%,
      rgba(0, 0, 0, 0.12) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.05) 0%,
      transparent 48%,
      rgba(0, 0, 0, 0.13) 77%,
      rgba(0, 0, 0, 0.25) 100%
    );

  box-shadow:
    inset 0 0 34px rgba(0, 0, 0, 0.4);
}

@media (max-width: 620px) {
  .water-depth {
    height: 28%;
  }

  .danger-0 .kraken {
    bottom: -125px !important;
  }

  .danger-6 .kraken {
    bottom: 10px !important;
  }
}

/* =========================================================
   RESPONSIVE LAYOUT CORRECTION
   Desktop and mobile tuning from live screenshots
   ========================================================= */

/* ---------------------------------------------------------
   DESKTOP
   Give the main game scene more horizontal room.
   --------------------------------------------------------- */

@media (min-width: 1181px) {
  .game-layout {
    grid-template-columns:
      minmax(150px, 178px)
      minmax(700px, 1fr)
      minmax(150px, 178px);
    gap: 9px;
    width: min(1700px, 100%);
    padding: 9px;
  }

  .players-panel,
  .clue-panel {
    font-size: 13px;
  }

  .panel-heading {
    padding: 10px 11px;
  }

  .panel-heading h2 {
    font-size: 16px;
  }

  .player-row {
    padding: 8px;
  }

  .clue-card,
  .turn-card,
  .tips-card {
    margin: 8px;
    padding: 10px;
  }

  .scene {
    min-height: clamp(590px, 45vw, 700px);
  }

  .puzzle {
    padding: 12px 14px 14px;
  }

  .word-plaque {
    margin-bottom: 10px;
    padding: 9px 16px;
  }

  .masked-word {
    min-height: 48px;
  }

  .keyboard {
    gap: 5px;
    margin-top: 7px;
    margin-bottom: 10px;
    padding: 9px;
  }

  .key {
    min-height: 43px;
    padding: 6px 2px;
  }

  .danger-card {
    top: 10px;
    right: 10px;
  }

  .scene-message {
    bottom: 8px;
    padding: 6px 13px;
    font-size: 11px;
  }
}

/* ---------------------------------------------------------
   MEDIUM DESKTOP / LAPTOP
   Reduce sidebar width and keep keyboard visible.
   --------------------------------------------------------- */

@media (min-width: 931px) and (max-width: 1180px) {
  .game-layout {
    grid-template-columns:
      155px
      minmax(590px, 1fr)
      155px;
    gap: 8px;
    padding: 8px;
  }

  .panel-heading {
    padding: 9px;
  }

  .panel-heading h2 {
    font-size: 15px;
  }

  .player-row {
    padding: 7px;
    font-size: 12px;
  }

  .clue-card,
  .turn-card,
  .tips-card {
    margin: 7px;
    padding: 9px;
    font-size: 12px;
  }

  .scene {
    min-height: 555px;
  }

  .puzzle {
    padding: 11px;
  }

  .keyboard {
    gap: 4px;
    padding: 8px;
  }

  .key {
    min-height: 40px;
  }
}

/* ---------------------------------------------------------
   TABLET AND MOBILE
   Put gameplay first and move crew/mission panels below it.
   --------------------------------------------------------- */

@media (max-width: 930px) {
  .game-layout {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 7px;
  }

  .center-column {
    order: 1;
    width: 100%;
  }

  .players-panel {
    order: 2;
    width: 100%;
  }

  .clue-panel {
    order: 3;
    width: 100%;
  }

  .players-panel,
  .clue-panel {
    min-height: auto;
  }

  .players-panel .panel-heading,
  .clue-panel .panel-heading {
    margin-bottom: 6px;
  }

  #players {
    display: grid;
    grid-template-columns:
      repeat(auto-fit, minmax(140px, 1fr));
    gap: 5px;
    padding-bottom: 8px;
  }

  .player-row {
    margin: 0;
  }

  .clue-panel {
    display: grid;
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 7px;
  }

  .clue-panel .panel-heading {
    grid-column: 1 / -1;
    margin: -7px -7px 0;
  }

  .clue-card,
  .turn-card,
  .tips-card {
    margin: 0;
    min-height: 118px;
  }
}

/* ---------------------------------------------------------
   PHONE LAYOUT
   Designed for narrow portrait screens.
   --------------------------------------------------------- */

@media (max-width: 620px) {
  body {
    overflow-x: hidden;
  }

  .topbar {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    min-height: 60px;
    padding: 6px 8px;
  }

  .leave-button {
    padding: 9px 13px;
    font-size: 14px;
  }

  .game-title {
    display: none;
  }

  .topbar-right {
    min-width: 0;
    width: 100%;
    justify-content: flex-end;
  }

  .room-chip {
    max-width: 100%;
    padding: 5px 7px;
  }

  .room-chip small {
    font-size: 9px;
  }

  .room-chip strong {
    max-width: 108px;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .room-chip button {
    padding: 6px 9px;
    font-size: 12px;
  }

  .round-chip {
    display: none;
  }

  .game-layout {
    gap: 7px;
    padding: 6px;
  }

  .scene {
    min-height: 500px;
    border-radius: 15px;
  }

  /* Move the pirate farther left on phones. */
  .danger-0 .pirate {
    left: 34% !important;
  }

  .danger-1 .pirate {
    left: 39% !important;
  }

  .danger-2 .pirate {
    left: 44% !important;
  }

  .danger-3 .pirate {
    left: 49% !important;
  }

  .danger-4 .pirate {
    left: 55% !important;
  }

  .danger-5 .pirate {
    left: 61% !important;
  }

  .danger-6 .pirate {
    left: 67% !important;
  }

  .pirate {
    bottom: 40%;
    width: 91px;
    height: 184px;
  }

  .ship-back {
    left: -18%;
    bottom: 29%;
    width: 69%;
    height: 55%;
  }

  .ship {
    left: -18%;
    bottom: 31%;
    width: 75%;
    height: 27%;
  }

  .plank {
    left: 30%;
    bottom: 40%;
    width: 68%;
    height: 32px;
  }

  .plank-glow {
    left: 30%;
    bottom: 39%;
    width: 68%;
  }

  /* Smaller wrong-guesses card in upper-right. */
  .danger-card {
    top: 9px;
    right: 8px;
    min-width: 154px;
    padding: 11px 10px 9px;
    border-width: 5px;
    transform: none;
  }

  .danger-title {
    font-size: 12px;
  }

  .skulls {
    min-height: 22px;
    margin: 6px 0;
    font-size: 17px;
    letter-spacing: 1px;
  }

  .danger-card b {
    font-size: 19px;
  }

  /* Reduce tentacle size and expose more Kraken head. */
  .kraken {
    right: -10%;
    width: 205px;
    height: 275px;
  }

  .monster {
    right: 34px;
    width: 145px;
    height: 138px;
  }

  .tentacle {
    width: 34px;
    height: 210px;
  }

  .tentacle-middle {
    left: 86px;
    height: 185px;
  }

  .danger-0 .kraken {
    bottom: -78px !important;
  }

  .danger-1 .kraken {
    bottom: -57px !important;
  }

  .danger-2 .kraken {
    bottom: -36px !important;
  }

  .danger-3 .kraken {
    bottom: -15px !important;
  }

  .danger-4 .kraken {
    bottom: 7px !important;
  }

  .danger-5 .kraken {
    bottom: 25px !important;
  }

  .danger-6 .kraken {
    bottom: 43px !important;
  }

  /* Lower contrast water for less visual repetition. */
  .ocean-back {
    bottom: -3%;
    height: 26%;
    opacity: 0.67;
    background-size: 185px 90px;
  }

  .ocean-front {
    bottom: -10%;
    height: 24%;
    opacity: 0.76;
    background-size: 205px 98px;
  }

  .water-depth {
    height: 27%;
  }

  .foam-one {
    bottom: 19%;
  }

  .foam-two {
    bottom: 13%;
  }

  .foam-three {
    bottom: 7%;
  }

  .sun-haze {
    top: 22%;
    right: 3%;
    width: 135px;
    height: 135px;
  }

  /* Smaller message so it does not cover the action. */
  .scene-message {
    bottom: 9px;
    width: auto;
    max-width: 82%;
    padding: 7px 11px;
    font-size: 10px;
    line-height: 1.25;
    white-space: normal;
  }

  /* Compact puzzle area to reduce scrolling. */
  .puzzle {
    padding: 9px 8px 11px;
  }

  .category-banner {
    margin-bottom: 7px;
    padding: 4px 13px;
    font-size: 10px;
  }

  .word-plaque {
    width: 97%;
    margin-bottom: 8px;
    padding: 8px 9px;
    border-width: 3px;
  }

  .masked-word {
    min-height: 43px;
    font-size: clamp(24px, 7vw, 34px);
    letter-spacing: 3px;
    line-height: 43px;
  }

  .keyboard {
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    margin: 7px auto 8px;
    padding: 6px;
  }

  .key {
    min-width: 0;
    min-height: 37px;
    padding: 4px 1px;
    border-radius: 6px;
    font-size: 13px;
  }

  .solve-row {
    gap: 6px;
  }

  .solve-row input {
    padding: 10px;
  }

  .solve-row button {
    padding: 9px;
  }

  .result {
    min-height: 24px;
    font-size: 16px;
  }

  .lobby-actions {
    gap: 6px;
  }

  .lobby-actions button {
    padding: 9px 12px;
    font-size: 13px;
  }

  /* Crew and mission cards appear after the game. */
  .players-panel,
  .clue-panel {
    border-radius: 12px;
  }

  .clue-panel {
    display: block;
    padding: 0 7px 7px;
  }

  .clue-panel .panel-heading {
    margin: 0 -7px 6px;
  }

  .clue-card,
  .turn-card,
  .tips-card {
    min-height: auto;
    margin: 6px 0;
    padding: 10px;
  }
}

/* ---------------------------------------------------------
   VERY NARROW PHONES
   --------------------------------------------------------- */

@media (max-width: 390px) {
  .scene {
    min-height: 470px;
  }

  .room-chip strong {
    max-width: 83px;
  }

  .danger-card {
    min-width: 142px;
    transform: scale(0.92);
    transform-origin: top right;
  }

  .pirate {
    width: 84px;
    height: 172px;
  }

  .kraken {
    right: -16%;
    width: 195px;
  }

  .scene-message {
    max-width: 88%;
    font-size: 9px;
  }

  .keyboard {
    grid-template-columns: repeat(7, 1fr);
  }

  .key {
    min-height: 35px;
    font-size: 12px;
  }
}

/* =========================================================
   COMPACT GAMEPLAY VIEWPORT PATCH
   Keeps more puzzle and keyboard visible
   ========================================================= */

/* Large desktop */
@media (min-width: 1181px) {
  .scene {
    min-height: 535px;
    max-height: 570px;
  }

  .puzzle {
    padding-top: 9px;
    padding-bottom: 10px;
  }

  .word-plaque {
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .masked-word {
    min-height: 42px;
    line-height: 42px;
  }

  .keyboard {
    margin-top: 5px;
    margin-bottom: 7px;
    padding: 7px;
  }

  .key {
    min-height: 38px;
  }

  .scene-message {
    bottom: 6px;
  }
}

/* Laptop / medium desktop */
@media (min-width: 931px) and (max-width: 1180px) {
  .scene {
    min-height: 495px;
    max-height: 525px;
  }

  .puzzle {
    padding: 9px;
  }

  .word-plaque {
    margin-bottom: 7px;
    padding: 7px 12px;
  }

  .masked-word {
    min-height: 40px;
    line-height: 40px;
  }

  .keyboard {
    margin: 5px auto 7px;
    padding: 7px;
  }

  .key {
    min-height: 37px;
  }
}

/* Tablet */
@media (min-width: 621px) and (max-width: 930px) {
  .scene {
    min-height: 440px;
    max-height: 470px;
  }

  .puzzle {
    padding: 9px;
  }

  .keyboard {
    margin-top: 6px;
  }
}

/* Phone portrait */
@media (max-width: 620px) {
  .scene {
    min-height: 410px;
    max-height: 430px;
  }

  /* Slightly smaller top bar */
  .topbar {
    min-height: 54px;
    padding: 5px 7px;
  }

  .leave-button {
    padding: 8px 11px;
    font-size: 13px;
  }

  .room-chip {
    padding: 4px 6px;
  }

  .room-chip strong {
    max-width: 96px;
    font-size: 11px;
  }

  .room-chip button {
    padding: 5px 8px;
    font-size: 11px;
  }

  /* Smaller and tighter wrong-guesses board */
  .danger-card {
    top: 7px;
    right: 6px;
    min-width: 132px;
    padding: 8px 8px 7px;
    border-width: 4px;
    transform: scale(0.94);
    transform-origin: top right;
  }

  .danger-title {
    font-size: 11px;
  }

  .skulls {
    min-height: 18px;
    margin: 4px 0;
    font-size: 14px;
  }

  .danger-card b {
    font-size: 17px;
  }

  /* Pirate placement */
  .pirate {
    bottom: 38%;
    width: 80px;
    height: 166px;
  }

  .danger-0 .pirate {
    left: 31% !important;
  }

  .danger-1 .pirate {
    left: 36% !important;
  }

  .danger-2 .pirate {
    left: 41% !important;
  }

  .danger-3 .pirate {
    left: 46% !important;
  }

  .danger-4 .pirate {
    left: 51% !important;
  }

  .danger-5 .pirate {
    left: 57% !important;
  }

  .danger-6 .pirate {
    left: 63% !important;
  }

  /* Ship and plank */
  .ship-back {
    bottom: 27%;
    height: 52%;
  }

  .ship {
    bottom: 29%;
    height: 25%;
  }

  .plank {
    bottom: 37%;
    height: 29px;
  }

  .plank-glow {
    bottom: 36%;
    height: 31px;
  }

  /* Reduce ocean height */
  .ocean-back {
    bottom: -4%;
    height: 22%;
    opacity: 0.6;
  }

  .ocean-front {
    bottom: -11%;
    height: 20%;
    opacity: 0.68;
  }

  .water-depth {
    height: 23%;
  }

  .foam-one {
    bottom: 15%;
  }

  .foam-two {
    bottom: 10%;
  }

  .foam-three {
    bottom: 5%;
  }

  /* Kraken: smaller tentacles, higher head */
  .kraken {
    right: -8%;
    width: 188px;
    height: 245px;
  }

  .monster {
    right: 31px;
    width: 136px;
    height: 130px;
  }

  .tentacle {
    width: 30px;
    height: 175px;
  }

  .tentacle-middle {
    left: 79px;
    height: 155px;
  }

  .danger-0 .kraken {
    bottom: -48px !important;
  }

  .danger-1 .kraken {
    bottom: -30px !important;
  }

  .danger-2 .kraken {
    bottom: -12px !important;
  }

  .danger-3 .kraken {
    bottom: 5px !important;
  }

  .danger-4 .kraken {
    bottom: 21px !important;
  }

  .danger-5 .kraken {
    bottom: 36px !important;
  }

  .danger-6 .kraken {
    bottom: 50px !important;
  }

  /* Smaller scene caption */
  .scene-message {
    bottom: 6px;
    max-width: 76%;
    padding: 5px 9px;
    font-size: 9px;
    line-height: 1.15;
  }

  /* Compact puzzle section */
  .puzzle {
    padding: 7px 6px 8px;
  }

  .category-banner {
    margin-bottom: 5px;
    padding: 3px 11px;
    font-size: 9px;
  }

  .word-plaque {
    width: 98%;
    margin-bottom: 6px;
    padding: 6px 7px;
  }

  .masked-word {
    min-height: 36px;
    font-size: 24px;
    line-height: 36px;
  }

  .keyboard {
    gap: 3px;
    margin: 5px auto 6px;
    padding: 5px;
  }

  .key {
    min-height: 33px;
    padding: 3px 1px;
    font-size: 12px;
  }

  .solve-row {
    gap: 5px;
  }

  .solve-row input {
    padding: 8px;
  }

  .solve-row button {
    padding: 8px;
  }

  .result {
    min-height: 20px;
    font-size: 14px;
  }

  .lobby-actions button {
    padding: 8px 10px;
    font-size: 12px;
  }
}

/* Very narrow phones */
@media (max-width: 390px) {
  .scene {
    min-height: 390px;
    max-height: 405px;
  }

  .danger-card {
    min-width: 124px;
    transform: scale(0.9);
  }

  .pirate {
    width: 75px;
    height: 158px;
  }

  .kraken {
    right: -12%;
    width: 178px;
  }

  .scene-message {
    max-width: 80%;
    font-size: 8px;
  }

  .key {
    min-height: 31px;
    font-size: 11px;
  }
}

/* =========================================================
   SCENE BALANCE PATCH
   Final Kraken and mobile composition corrections
   ========================================================= */

/* Desktop: expose more of the Kraken without crowding the puzzle. */
@media (min-width: 931px) {
  .kraken {
    right: 1%;
  }

  .danger-0 .kraken {
    bottom: -118px !important;
  }

  .danger-1 .kraken {
    bottom: -94px !important;
  }

  .danger-2 .kraken {
    bottom: -69px !important;
  }

  .danger-3 .kraken {
    bottom: -43px !important;
  }

  .danger-4 .kraken {
    bottom: -16px !important;
  }

  .danger-5 .kraken {
    bottom: 8px !important;
  }

  .danger-6 .kraken {
    bottom: 30px !important;
  }
}

/* Phone composition */
@media (max-width: 620px) {
  /*
    Keep the full scene visible while leaving enough room for
    the puzzle and keyboard below it.
  */
  .scene {
    min-height: 400px;
    max-height: 415px;
  }

  /* Move the pirate slightly left. */
  .danger-0 .pirate {
    left: 28% !important;
  }

  .danger-1 .pirate {
    left: 33% !important;
  }

  .danger-2 .pirate {
    left: 38% !important;
  }

  .danger-3 .pirate {
    left: 43% !important;
  }

  .danger-4 .pirate {
    left: 48% !important;
  }

  .danger-5 .pirate {
    left: 53% !important;
  }

  .danger-6 .pirate {
    left: 59% !important;
  }

  .pirate {
    bottom: 39%;
    width: 77px;
    height: 160px;
  }

  /*
    Reduce the overall Kraken size so the face and teeth stay
    inside the framed scene.
  */
  .kraken {
    right: -3%;
    width: 160px;
    height: 218px;
  }

  .monster {
    right: 27px;
    bottom: 2px;
    width: 116px;
    height: 108px;
    border-width: 6px;
  }

  .monster-eye {
    top: 31px;
    width: 27px;
    height: 23px;
    border-width: 3px;
  }

  .eye-left {
    left: 22px;
  }

  .eye-right {
    right: 22px;
  }

  .monster-mouth {
    left: 23px;
    bottom: 15px;
    width: 72px;
    height: 33px;
    font-size: 13px;
    line-height: 29px;
  }

  .tentacle {
    width: 26px;
    height: 148px;
    border-width: 4px;
  }

  .tentacle-left {
    left: 8px;
  }

  .tentacle-middle {
    left: 67px;
    height: 132px;
  }

  .tentacle-right {
    right: 6px;
  }

  /* Stage positions now keep the Kraken within the frame. */
  .danger-0 .kraken {
    bottom: -28px !important;
  }

  .danger-1 .kraken {
    bottom: -14px !important;
  }

  .danger-2 .kraken {
    bottom: 0 !important;
  }

  .danger-3 .kraken {
    bottom: 14px !important;
  }

  .danger-4 .kraken {
    bottom: 27px !important;
  }

  .danger-5 .kraken {
    bottom: 39px !important;
  }

  .danger-6 .kraken {
    bottom: 51px !important;
  }

  /* Keep the caption above the monster and inside the frame. */
  .scene-message {
    z-index: 35;
    bottom: 7px;
    left: 43%;
    max-width: 66%;
    padding: 5px 9px;
    font-size: 8px;
    line-height: 1.2;
  }

  /* Slightly lower the water contrast. */
  .ocean-back {
    height: 20%;
    opacity: 0.54;
  }

  .ocean-front {
    height: 18%;
    opacity: 0.61;
  }

  .water-depth {
    height: 21%;
  }

  .foam-one {
    bottom: 13%;
  }

  .foam-two {
    bottom: 8%;
  }

  .foam-three {
    bottom: 4%;
  }

  /* Reduce the parchment a little more on narrow screens. */
  .danger-card {
    min-width: 126px;
    padding: 7px;
  }

  .danger-title {
    font-size: 10px;
  }

  .skulls {
    font-size: 13px;
  }
}

/* Very narrow phones */
@media (max-width: 390px) {
  .scene {
    min-height: 385px;
    max-height: 400px;
  }

  .kraken {
    right: -5%;
    width: 150px;
    height: 205px;
  }

  .monster {
    width: 108px;
    height: 101px;
  }

  .pirate {
    width: 72px;
    height: 152px;
  }

  .scene-message {
    left: 42%;
    max-width: 68%;
    font-size: 7px;
  }
}

/* =========================================================
   GAMEPLAY POLISH
   Correct/wrong feedback, banners, particles, and sound UI
   ========================================================= */

.sound-button {
  min-width: 42px;
  min-height: 38px;
  padding: 7px 9px;
  border-radius: 10px;
  font-size: 17px;
  line-height: 1;
}

.sound-button.muted {
  opacity: 0.62;
  filter: grayscale(0.7);
}

/* Allow generated particles and banners inside the scene. */
.scene {
  isolation: isolate;
}

/* ---------------------------------------------------------
   WRONG-GUESS FEEDBACK
   --------------------------------------------------------- */

.scene.effect-wrong {
  animation: wrongSceneShake 0.46s ease-in-out;
}

.scene.effect-wrong::before {
  position: absolute;
  z-index: 90;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at center,
      transparent 25%,
      rgba(210, 23, 28, 0.27) 70%,
      rgba(113, 0, 5, 0.55) 100%
    );
  content: "";
  animation: wrongRedFlash 0.5s ease-out forwards;
}

@keyframes wrongSceneShake {
  0% {
    transform: translateX(0);
  }

  18% {
    transform: translateX(-7px) rotate(-0.25deg);
  }

  36% {
    transform: translateX(7px) rotate(0.25deg);
  }

  54% {
    transform: translateX(-5px);
  }

  72% {
    transform: translateX(4px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes wrongRedFlash {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* Pirate takes a nervous step after a wrong guess. */
.pirate.effect-step {
  animation: pirateNervousStep 0.7s ease-in-out;
}

@keyframes pirateNervousStep {
  0% {
    margin-bottom: 0;
  }

  22% {
    margin-bottom: 9px;
    filter:
      drop-shadow(0 18px 10px rgba(0, 0, 0, 0.74))
      drop-shadow(0 0 12px rgba(255, 92, 57, 0.55));
  }

  47% {
    margin-bottom: -2px;
    transform: rotate(4deg);
  }

  70% {
    margin-bottom: 5px;
    transform: rotate(-2deg);
  }

  100% {
    margin-bottom: 0;
  }
}

/* ---------------------------------------------------------
   CORRECT-GUESS FEEDBACK
   --------------------------------------------------------- */

.scene.effect-correct::before {
  position: absolute;
  z-index: 90;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 52% 48%,
      rgba(149, 255, 128, 0.28),
      rgba(60, 197, 90, 0.09) 43%,
      transparent 72%
    );
  content: "";
  animation: correctGreenGlow 0.75s ease-out forwards;
}

@keyframes correctGreenGlow {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}

/* Generated sparkle elements. */
.game-sparkle {
  position: absolute;
  z-index: 95;
  width: 11px;
  height: 11px;
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      #fffbd3 0 18%,
      #ffe374 20% 40%,
      #70dc69 43% 65%,
      transparent 68%
    );
  box-shadow:
    0 0 7px #fff6a0,
    0 0 14px #5bd875;
  animation: sparkleBurst 0.9s ease-out forwards;
}

.game-sparkle::before,
.game-sparkle::after {
  position: absolute;
  top: 50%;
  left: 50%;
  background: #fffbd0;
  content: "";
  transform: translate(-50%, -50%);
}

.game-sparkle::before {
  width: 2px;
  height: 20px;
}

.game-sparkle::after {
  width: 20px;
  height: 2px;
}

@keyframes sparkleBurst {
  0% {
    opacity: 0;
    transform:
      translate(0, 0)
      scale(0.25)
      rotate(0deg);
  }

  20% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      translate(
        var(--sparkle-x),
        var(--sparkle-y)
      )
      scale(1.15)
      rotate(120deg);
  }
}

/* ---------------------------------------------------------
   KRAKEN MOTION
   --------------------------------------------------------- */

.kraken {
  transition:
    bottom 0.85s cubic-bezier(0.2, 0.8, 0.2, 1.08),
    transform 0.55s ease,
    filter 0.35s ease;
}

.kraken.effect-rise {
  animation: krakenRisePulse 0.85s ease-out;
}

@keyframes krakenRisePulse {
  0% {
    filter:
      drop-shadow(0 8px 7px rgba(0, 0, 0, 0.45));
  }

  38% {
    filter:
      drop-shadow(0 18px 14px rgba(0, 0, 0, 0.78))
      drop-shadow(0 0 21px rgba(125, 68, 163, 0.62));
  }

  100% {
    filter:
      drop-shadow(0 14px 11px rgba(0, 0, 0, 0.62));
  }
}

/* ---------------------------------------------------------
   VICTORY AND DEFEAT BANNERS
   --------------------------------------------------------- */

.round-banner {
  position: fixed;
  z-index: 1000;
  top: 50%;
  left: 50%;
  width: min(560px, 88vw);
  padding: 26px 28px;
  border: 5px solid #8c5119;
  border-radius: 20px;
  color: #fff5d3;
  text-align: center;
  background:
    linear-gradient(
      155deg,
      rgba(23, 39, 66, 0.98),
      rgba(5, 11, 22, 0.99)
    );
  box-shadow:
    0 25px 80px rgba(0, 0, 0, 0.85),
    inset 0 0 0 2px rgba(255, 211, 103, 0.27),
    inset 0 0 36px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  opacity: 0;
  transform:
    translate(-50%, -50%)
    scale(0.72);
}

.round-banner.visible {
  animation: resultBannerShow 3.2s ease-in-out forwards;
}

.round-banner.victory {
  border-color: #d49a2a;
  background:
    radial-gradient(
      circle at top,
      rgba(67, 150, 61, 0.52),
      transparent 53%
    ),
    linear-gradient(
      155deg,
      rgba(22, 56, 48, 0.98),
      rgba(4, 15, 20, 0.99)
    );
}

.round-banner.defeat {
  border-color: #9e3029;
  background:
    radial-gradient(
      circle at top,
      rgba(177, 37, 35, 0.5),
      transparent 55%
    ),
    linear-gradient(
      155deg,
      rgba(60, 20, 25, 0.98),
      rgba(14, 5, 11, 0.99)
    );
}

.round-banner-icon {
  display: block;
  margin-bottom: 7px;
  font-size: 55px;
}

.round-banner-title {
  display: block;
  color: #ffd76c;
  font-family: Georgia, serif;
  font-size: clamp(31px, 7vw, 52px);
  font-weight: 1000;
  letter-spacing: 1px;
  text-shadow:
    0 4px #5d2b0b,
    0 8px 15px rgba(0, 0, 0, 0.75);
}

.round-banner-message {
  display: block;
  margin-top: 10px;
  color: #fff0c7;
  font-size: 17px;
  line-height: 1.35;
}

@keyframes resultBannerShow {
  0% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(0.72)
      rotate(-2deg);
  }

  12% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      scale(1.05)
      rotate(1deg);
  }

  20% {
    transform:
      translate(-50%, -50%)
      scale(1)
      rotate(0deg);
  }

  82% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%, -56%)
      scale(0.96);
  }
}

/* Defeat splash. */
.scene.effect-defeat {
  animation: defeatScenePulse 1.4s ease-out;
}

@keyframes defeatScenePulse {
  0% {
    filter: brightness(1);
  }

  25% {
    filter:
      brightness(0.72)
      saturate(1.25)
      sepia(0.2);
  }

  50% {
    filter:
      brightness(1.12)
      saturate(1.3);
  }

  100% {
    filter: brightness(1);
  }
}

/* Victory scene glow. */
.scene.effect-victory {
  animation: victorySceneGlow 1.8s ease-out;
}

@keyframes victorySceneGlow {
  0% {
    filter: brightness(1);
  }

  35% {
    filter:
      brightness(1.22)
      saturate(1.18);
  }

  100% {
    filter: brightness(1);
  }
}

/* ---------------------------------------------------------
   KEYBOARD STATE POLISH
   --------------------------------------------------------- */

.key:disabled {
  opacity: 0.62;
  cursor: default;
  filter: saturate(0.72);
}

.key.correct:disabled {
  opacity: 1;
  color: white;
  filter: none;
}

.key.wrong:disabled {
  opacity: 0.9;
  color: white;
  filter: none;
}

.key:not(.correct):not(.wrong):disabled {
  background:
    linear-gradient(
      180deg,
      #273142,
      #131a25
    );
  box-shadow:
    0 2px 0 #070b10,
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Phone result banner. */
@media (max-width: 620px) {
  .sound-button {
    min-width: 34px;
    min-height: 32px;
    padding: 5px 7px;
    font-size: 14px;
  }

  .round-banner {
    width: 86vw;
    padding: 20px 18px;
  }

  .round-banner-icon {
    font-size: 43px;
  }

  .round-banner-message {
    font-size: 14px;
  }
}

/* =========================================================
   KRAKEN EATS PIRATE DEFEAT ANIMATION
   ========================================================= */

.defeat-splash,
.chomp-flash {
  position: absolute;
  pointer-events: none;
  opacity: 0;
}

/* Large animated water explosion behind the Kraken. */
.defeat-splash {
  z-index: 82;
  right: 0;
  bottom: 4%;
  width: 46%;
  height: 44%;
  overflow: hidden;
}

.defeat-splash::before,
.defeat-splash::after {
  position: absolute;
  border-radius: 50%;
  content: "";
}

.defeat-splash::before {
  right: 2%;
  bottom: -10%;
  width: 94%;
  height: 70%;
  background:
    radial-gradient(
      ellipse at 50% 85%,
      rgba(255, 255, 255, 0.96) 0 8%,
      rgba(163, 226, 244, 0.82) 10% 18%,
      rgba(46, 139, 175, 0.56) 20% 38%,
      transparent 40%
    ),
    radial-gradient(
      ellipse at 20% 45%,
      rgba(255, 255, 255, 0.82) 0 7%,
      transparent 9%
    ),
    radial-gradient(
      ellipse at 75% 34%,
      rgba(255, 255, 255, 0.82) 0 7%,
      transparent 9%
    );
}

.defeat-splash::after {
  right: 5%;
  bottom: 2%;
  width: 86%;
  height: 84%;
  background:
    radial-gradient(
      circle at 12% 75%,
      rgba(206, 242, 251, 0.92) 0 3%,
      transparent 4%
    ),
    radial-gradient(
      circle at 26% 43%,
      rgba(255, 255, 255, 0.94) 0 3%,
      transparent 4%
    ),
    radial-gradient(
      circle at 43% 17%,
      rgba(211, 243, 251, 0.94) 0 3%,
      transparent 4%
    ),
    radial-gradient(
      circle at 62% 28%,
      rgba(255, 255, 255, 0.9) 0 3%,
      transparent 4%
    ),
    radial-gradient(
      circle at 82% 57%,
      rgba(198, 237, 248, 0.9) 0 3%,
      transparent 4%
    );
}

/* Bright impact flash when the mouth closes. */
.chomp-flash {
  z-index: 96;
  right: 9%;
  bottom: 13%;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(255, 251, 197, 0.98) 0%,
      rgba(255, 202, 76, 0.76) 24%,
      rgba(255, 96, 45, 0.36) 49%,
      transparent 72%
    );
  filter: blur(5px);
  mix-blend-mode: screen;
}

/* Scene-wide defeat timing. */
.scene.effect-eaten {
  overflow: hidden;
  animation: krakenDefeatScene 2.85s ease-in-out forwards;
}

@keyframes krakenDefeatScene {
  0% {
    filter: brightness(1);
  }

  18% {
    filter:
      brightness(0.78)
      saturate(1.18);
  }

  38% {
    filter:
      brightness(1.15)
      saturate(1.3);
  }

  55% {
    filter:
      brightness(0.74)
      saturate(1.18);
  }

  100% {
    filter: brightness(0.92);
  }
}

/* Pirate is pulled toward the Kraken's mouth. */
.pirate.effect-eaten-pirate {
  z-index: 84 !important;
  animation:
    piratePulledToKrakenDesktop
    2.2s
    cubic-bezier(0.28, 0.7, 0.28, 1)
    forwards !important;
}

@keyframes piratePulledToKrakenDesktop {
  0% {
    opacity: 1;
    transform:
      translate(0, 0)
      rotate(7deg)
      scale(1);
  }

  17% {
    transform:
      translate(-18px, -12px)
      rotate(-8deg)
      scale(1.03);
  }

  35% {
    transform:
      translate(55px, 4px)
      rotate(16deg)
      scale(0.96);
  }

  58% {
    opacity: 1;
    transform:
      translate(180px, 84px)
      rotate(42deg)
      scale(0.72);
  }

  76% {
    opacity: 0.9;
    transform:
      translate(260px, 150px)
      rotate(78deg)
      scale(0.46);
  }

  88% {
    opacity: 0;
    transform:
      translate(305px, 185px)
      rotate(105deg)
      scale(0.18);
  }

  100% {
    opacity: 0;
    transform:
      translate(320px, 195px)
      rotate(120deg)
      scale(0.05);
  }
}

/* Kraken lunges upward and chomps. */
.kraken.effect-eaten-kraken {
  z-index: 90 !important;
  animation:
    krakenLungeAndChompDesktop
    2.65s
    cubic-bezier(0.2, 0.84, 0.24, 1)
    forwards !important;
}

@keyframes krakenLungeAndChompDesktop {
  0% {
    transform:
      translate(0, 0)
      scale(1);
  }

  18% {
    transform:
      translate(-14px, 18px)
      scale(0.97);
  }

  43% {
    transform:
      translate(-72px, -78px)
      scale(1.17);
  }

  62% {
    transform:
      translate(-96px, -110px)
      scale(1.3);
  }

  72% {
    transform:
      translate(-91px, -102px)
      scaleX(1.34)
      scaleY(1.18);
  }

  82% {
    transform:
      translate(-91px, -102px)
      scaleX(1.27)
      scaleY(1.34);
  }

  100% {
    transform:
      translate(-73px, -82px)
      scale(1.19);
  }
}

/* Mouth closes during the bite. */
.kraken.effect-eaten-kraken .monster-mouth {
  animation:
    krakenMouthChomp
    2.4s
    ease-in-out
    forwards;
}

@keyframes krakenMouthChomp {
  0%,
  42% {
    height: 43px;
    transform: scaleY(1);
  }

  56% {
    height: 68px;
    transform: scaleY(1.42);
  }

  67% {
    height: 12px;
    transform: scaleY(0.24);
  }

  75% {
    height: 57px;
    transform: scaleY(1.25);
  }

  84%,
  100% {
    height: 30px;
    transform: scaleY(0.72);
  }
}

/* Eyes widen when the Kraken attacks. */
.kraken.effect-eaten-kraken .monster-eye {
  animation:
    krakenAttackEyes
    2.1s
    ease-in-out
    forwards;
}

@keyframes krakenAttackEyes {
  0%,
  25% {
    transform: scale(1);
  }

  48% {
    transform: scale(1.38);
  }

  68% {
    transform: scale(0.88);
  }

  100% {
    transform: scale(1.08);
  }
}

/* Tentacles snap inward during the attack. */
.kraken.effect-eaten-kraken .tentacle-left {
  animation:
    tentacleAttackLeft
    1.7s
    ease-in-out
    forwards;
}

.kraken.effect-eaten-kraken .tentacle-right {
  animation:
    tentacleAttackRight
    1.7s
    ease-in-out
    forwards;
}

.kraken.effect-eaten-kraken .tentacle-middle {
  animation:
    tentacleAttackMiddle
    1.7s
    ease-in-out
    forwards;
}

@keyframes tentacleAttackLeft {
  0% {
    transform: rotate(-39deg);
  }

  55% {
    transform:
      rotate(-13deg)
      translate(24px, -35px)
      scaleY(1.14);
  }

  100% {
    transform:
      rotate(-26deg)
      translate(8px, -14px);
  }
}

@keyframes tentacleAttackRight {
  0% {
    transform: rotate(41deg);
  }

  55% {
    transform:
      rotate(13deg)
      translate(-24px, -35px)
      scaleY(1.14);
  }

  100% {
    transform:
      rotate(27deg)
      translate(-8px, -14px);
  }
}

@keyframes tentacleAttackMiddle {
  0% {
    transform: rotate(-3deg);
  }

  55% {
    transform:
      rotate(8deg)
      translateY(-48px)
      scaleY(1.2);
  }

  100% {
    transform:
      rotate(2deg)
      translateY(-18px);
  }
}

/* Splash appears as the pirate reaches the mouth. */
.defeat-splash.active {
  animation:
    defeatSplashBurst
    2.1s
    ease-out
    forwards;
}

@keyframes defeatSplashBurst {
  0%,
  30% {
    opacity: 0;
    transform:
      translateY(40px)
      scale(0.5);
  }

  50% {
    opacity: 1;
    transform:
      translateY(-8px)
      scale(1.16);
  }

  72% {
    opacity: 0.82;
    transform:
      translateY(-22px)
      scale(1.32);
  }

  100% {
    opacity: 0;
    transform:
      translateY(-38px)
      scale(1.52);
  }
}

.chomp-flash.active {
  animation:
    chompImpactFlash
    0.72s
    ease-out
    forwards;
}

@keyframes chompImpactFlash {
  0% {
    opacity: 0;
    transform: scale(0.15);
  }

  36% {
    opacity: 1;
    transform: scale(1.3);
  }

  100% {
    opacity: 0;
    transform: scale(2);
  }
}

/* Temporary bite text. */
.chomp-caption {
  position: absolute;
  z-index: 110;
  right: 7%;
  bottom: 22%;
  color: #ffe27a;
  font-family: Georgia, serif;
  font-size: clamp(26px, 5vw, 54px);
  font-weight: 1000;
  letter-spacing: 2px;
  pointer-events: none;
  opacity: 0;
  text-shadow:
    0 4px 0 #67210d,
    0 9px 15px rgba(0, 0, 0, 0.85),
    0 0 16px rgba(255, 173, 52, 0.82);
}

.chomp-caption.active {
  animation:
    chompCaptionShow
    1.25s
    ease-out
    forwards;
}

@keyframes chompCaptionShow {
  0% {
    opacity: 0;
    transform:
      scale(0.35)
      rotate(-10deg);
  }

  36% {
    opacity: 1;
    transform:
      scale(1.22)
      rotate(4deg);
  }

  68% {
    opacity: 1;
    transform:
      scale(1)
      rotate(-1deg);
  }

  100% {
    opacity: 0;
    transform:
      translateY(-25px)
      scale(0.9);
  }
}

/* =========================================================
   MOBILE EATEN ANIMATION
   ========================================================= */

@media (max-width: 620px) {
  .pirate.effect-eaten-pirate {
    animation:
      piratePulledToKrakenMobile
      2.05s
      cubic-bezier(0.28, 0.7, 0.28, 1)
      forwards !important;
  }

  @keyframes piratePulledToKrakenMobile {
    0% {
      opacity: 1;
      transform:
        translate(0, 0)
        rotate(7deg)
        scale(1);
    }

    20% {
      transform:
        translate(-10px, -10px)
        rotate(-8deg)
        scale(1.02);
    }

    46% {
      transform:
        translate(72px, 42px)
        rotate(25deg)
        scale(0.82);
    }

    70% {
      opacity: 1;
      transform:
        translate(138px, 116px)
        rotate(65deg)
        scale(0.48);
    }

    88% {
      opacity: 0;
      transform:
        translate(172px, 148px)
        rotate(104deg)
        scale(0.15);
    }

    100% {
      opacity: 0;
      transform:
        translate(182px, 156px)
        rotate(120deg)
        scale(0.03);
    }
  }

  .kraken.effect-eaten-kraken {
    animation:
      krakenLungeAndChompMobile
      2.5s
      cubic-bezier(0.2, 0.84, 0.24, 1)
      forwards !important;
  }

  @keyframes krakenLungeAndChompMobile {
    0% {
      transform:
        translate(0, 0)
        scale(1);
    }

    20% {
      transform:
        translate(7px, 15px)
        scale(0.96);
    }

    48% {
      transform:
        translate(-35px, -58px)
        scale(1.16);
    }

    66% {
      transform:
        translate(-52px, -83px)
        scale(1.28);
    }

    78% {
      transform:
        translate(-49px, -79px)
        scaleX(1.32)
        scaleY(1.16);
    }

    88% {
      transform:
        translate(-49px, -79px)
        scaleX(1.23)
        scaleY(1.33);
    }

    100% {
      transform:
        translate(-42px, -67px)
        scale(1.17);
    }
  }

  .defeat-splash {
    right: -5%;
    bottom: 1%;
    width: 70%;
    height: 43%;
  }

  .chomp-flash {
    right: 2%;
    bottom: 12%;
    width: 120px;
    height: 120px;
  }

  .chomp-caption {
    right: 5%;
    bottom: 25%;
    font-size: 28px;
  }
}

/* =========================================================
   MEANER KRAKEN PATCH
   Darker, angrier, more threatening monster styling
   ========================================================= */

.kraken {
  filter:
    drop-shadow(0 14px 12px rgba(0, 0, 0, 0.75))
    drop-shadow(0 0 12px rgba(93, 25, 123, 0.38));
}

/* Monster head */
.monster {
  position: absolute;
  overflow: visible;
  background:
    radial-gradient(
      circle at 50% 34%,
      #56b6b1 0%,
      #2c8e8b 28%,
      #1a5d63 58%,
      #103940 78%,
      #0a1d27 100%
    );
  border: 6px solid #5a1e78;
  box-shadow:
    inset 0 10px 18px rgba(255, 255, 255, 0.08),
    inset 0 -16px 18px rgba(0, 0, 0, 0.45),
    0 0 0 3px rgba(20, 6, 24, 0.32),
    0 12px 20px rgba(0, 0, 0, 0.5);
}

/* Angry brow ridge */
.monster::before {
  position: absolute;
  top: 10%;
  left: 9%;
  width: 82%;
  height: 24%;
  background:
    linear-gradient(
      180deg,
      rgba(18, 10, 24, 0.95),
      rgba(49, 18, 56, 0.92)
    );
  border-radius: 50% 50% 42% 42%;
  clip-path: polygon(
    0% 90%,
    9% 42%,
    22% 60%,
    36% 26%,
    49% 55%,
    63% 22%,
    77% 58%,
    91% 35%,
    100% 88%
  );
  box-shadow:
    0 5px 8px rgba(0, 0, 0, 0.38);
  content: "";
  opacity: 0.95;
}

/* Scar / face detail */
.monster::after {
  position: absolute;
  top: 16%;
  right: 16%;
  width: 19%;
  height: 5%;
  background:
    linear-gradient(
      90deg,
      rgba(255, 154, 89, 0.0),
      rgba(255, 154, 89, 0.72),
      rgba(255, 112, 80, 0.0)
    );
  border-radius: 999px;
  transform: rotate(-18deg);
  box-shadow:
    0 0 8px rgba(255, 120, 80, 0.25);
  content: "";
}

/* Eyes become predatory */
.monster-eye {
  position: absolute;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 42% 42%,
      #fff7b9 0%,
      #ffd84f 22%,
      #ffb423 46%,
      #7b3200 72%,
      #210800 100%
    );
  border: 3px solid #3b1200;
  box-shadow:
    0 0 10px rgba(255, 213, 65, 0.9),
    0 0 18px rgba(255, 119, 24, 0.35),
    inset 0 2px 4px rgba(255, 255, 255, 0.22),
    inset 0 -4px 6px rgba(0, 0, 0, 0.42);
}

/* Vertical slit pupil */
.monster-eye::before {
  position: absolute;
  top: 10%;
  left: 50%;
  width: 16%;
  height: 78%;
  background: #050100;
  border-radius: 999px;
  transform: translateX(-50%);
  box-shadow:
    0 0 6px rgba(0, 0, 0, 0.9);
  content: "";
}

/* Shadowing inside the eye */
.monster-eye::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.28),
      transparent 32%,
      transparent 70%,
      rgba(0, 0, 0, 0.34)
    );
  content: "";
}

/* Meaner mouth */
.monster-mouth {
  color: #fff8e7;
  font-weight: 900;
  letter-spacing: 4px;
  text-shadow:
    0 2px 0 #000,
    0 0 8px rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(
      180deg,
      #2a0308 0%,
      #110107 50%,
      #050104 100%
    );
  border: 5px solid #65161d;
  border-radius: 14px 14px 22px 22px / 12px 12px 28px 28px;
  box-shadow:
    inset 0 5px 10px rgba(255, 0, 0, 0.12),
    inset 0 -6px 12px rgba(0, 0, 0, 0.55),
    0 0 10px rgba(76, 0, 0, 0.28);
}

/* Add a gum / upper jaw shadow */
.monster-mouth::before {
  position: absolute;
  top: 0;
  left: 6%;
  width: 88%;
  height: 22%;
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      rgba(143, 18, 22, 0.55),
      rgba(55, 5, 8, 0.15)
    );
  content: "";
}

/* Tentacles darker and more sinister */
.tentacle {
  background:
    linear-gradient(
      180deg,
      #c46bda 0%,
      #a34cc0 30%,
      #7e2ea0 62%,
      #53186f 100%
    );
  border-color: #174e62 !important;
  box-shadow:
    inset 0 8px 10px rgba(255, 255, 255, 0.1),
    inset 0 -12px 14px rgba(0, 0, 0, 0.32),
    0 8px 12px rgba(0, 0, 0, 0.34);
}

/* Stronger menace as danger rises */
.danger-3 .monster,
.danger-4 .monster {
  box-shadow:
    inset 0 10px 18px rgba(255, 255, 255, 0.08),
    inset 0 -16px 18px rgba(0, 0, 0, 0.45),
    0 0 0 3px rgba(20, 6, 24, 0.32),
    0 12px 20px rgba(0, 0, 0, 0.5),
    0 0 14px rgba(156, 62, 196, 0.22);
}

.danger-5 .monster,
.danger-6 .monster {
  box-shadow:
    inset 0 10px 18px rgba(255, 255, 255, 0.08),
    inset 0 -16px 18px rgba(0, 0, 0, 0.45),
    0 0 0 3px rgba(20, 6, 24, 0.32),
    0 12px 20px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(205, 48, 44, 0.28),
    0 0 30px rgba(148, 37, 115, 0.22);
}

.danger-5 .monster-eye,
.danger-6 .monster-eye {
  box-shadow:
    0 0 12px rgba(255, 225, 95, 0.95),
    0 0 22px rgba(255, 114, 26, 0.46),
    inset 0 2px 4px rgba(255, 255, 255, 0.22),
    inset 0 -4px 6px rgba(0, 0, 0, 0.42);
}

.danger-5 .monster-mouth,
.danger-6 .monster-mouth {
  border-color: #8c1f1a;
  box-shadow:
    inset 0 6px 12px rgba(255, 0, 0, 0.14),
    inset 0 -6px 12px rgba(0, 0, 0, 0.58),
    0 0 12px rgba(122, 0, 0, 0.35);
}

/* Meaner look during attack sequence too */
.kraken.effect-eaten-kraken .monster {
  box-shadow:
    inset 0 10px 18px rgba(255, 255, 255, 0.06),
    inset 0 -18px 20px rgba(0, 0, 0, 0.52),
    0 0 18px rgba(208, 64, 45, 0.35),
    0 0 28px rgba(148, 38, 140, 0.24);
}

.kraken.effect-eaten-kraken .monster-eye {
  box-shadow:
    0 0 14px rgba(255, 229, 97, 0.95),
    0 0 24px rgba(255, 86, 26, 0.45);
}

/* Mobile tuning */
@media (max-width: 620px) {
  .monster::before {
    top: 8%;
    height: 22%;
  }

  .monster-mouth {
    letter-spacing: 2px;
  }
}

/* =========================================================
   KRAKEN BOSS PASS
   Inspired by a darker epic sea-monster look
   ========================================================= */

/* Overall scene becomes stormier and colder */
.scene {
  box-shadow:
    inset 0 0 0 2px rgba(212, 132, 24, 0.42),
    inset 0 0 65px rgba(0, 0, 0, 0.42),
    inset 0 -90px 120px rgba(6, 15, 29, 0.42);
}

/* Storm haze / rain texture overlay */
.scene::after {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(6, 16, 33, 0.34) 0%,
      rgba(11, 23, 39, 0.10) 32%,
      rgba(3, 10, 19, 0.26) 100%
    ),
    repeating-linear-gradient(
      103deg,
      rgba(255,255,255,0.06) 0 2px,
      transparent 2px 24px
    );
  opacity: 0.18;
  mix-blend-mode: screen;
  content: "";
}

/* Change the warm sun into a colder moonlight / lightning glow */
.sun-haze {
  background:
    radial-gradient(
      circle,
      rgba(235, 245, 255, 0.95) 0%,
      rgba(181, 219, 255, 0.68) 26%,
      rgba(134, 194, 255, 0.26) 52%,
      rgba(113, 171, 234, 0.08) 74%,
      transparent 100%
    );
  filter: blur(10px);
  opacity: 0.92;
}

/* Darker ocean */
.ocean-back {
  opacity: 0.68 !important;
  background-color: rgba(8, 46, 74, 0.85);
}

.ocean-front {
  opacity: 0.82 !important;
  background-color: rgba(5, 28, 49, 0.92);
}

.water-depth {
  background:
    linear-gradient(
      180deg,
      rgba(4, 25, 43, 0) 0%,
      rgba(4, 24, 39, 0.10) 18%,
      rgba(2, 20, 35, 0.42) 58%,
      rgba(1, 10, 20, 0.82) 100%
    ) !important;
}

/* =========================================================
   KRAKEN SCALE AND SILHOUETTE
   ========================================================= */

.kraken {
  filter:
    drop-shadow(0 18px 16px rgba(0, 0, 0, 0.78))
    drop-shadow(0 0 18px rgba(60, 111, 151, 0.18))
    drop-shadow(0 0 26px rgba(83, 18, 123, 0.20));
}

/* Make the monster feel taller and more squid-like */
.monster {
  overflow: visible;
  background:
    radial-gradient(
      ellipse at 50% 18%,
      rgba(182, 214, 236, 0.38) 0%,
      rgba(112, 153, 181, 0.28) 16%,
      rgba(56, 100, 129, 0.85) 34%,
      rgba(28, 66, 92, 0.96) 58%,
      rgba(14, 37, 53, 1) 82%,
      rgba(7, 18, 27, 1) 100%
    );
  border: 6px solid #2f1e5b;
  border-radius: 48% 48% 45% 45% / 58% 58% 38% 38%;
  box-shadow:
    inset 0 18px 22px rgba(255,255,255,0.06),
    inset 0 -22px 22px rgba(0,0,0,0.52),
    0 0 0 3px rgba(7, 12, 24, 0.36),
    0 16px 26px rgba(0,0,0,0.55);
}

/* Forehead / crown ridge like the reference image */
.monster::before {
  position: absolute;
  top: -18%;
  left: 14%;
  width: 72%;
  height: 34%;
  border-radius: 50% 50% 45% 45%;
  background:
    radial-gradient(
      ellipse at 50% 30%,
      rgba(160, 200, 221, 0.46),
      rgba(77, 120, 151, 0.28) 45%,
      rgba(29, 53, 78, 0.88) 100%
    );
  box-shadow:
    inset 0 8px 12px rgba(255,255,255,0.08),
    0 8px 12px rgba(0,0,0,0.26);
  content: "";
}

/* Dark brow / mean expression */
.monster::after {
  position: absolute;
  top: 24%;
  left: 10%;
  width: 80%;
  height: 18%;
  background:
    linear-gradient(
      180deg,
      rgba(11, 9, 23, 0.96),
      rgba(32, 18, 48, 0.92)
    );
  border-radius: 50%;
  clip-path: polygon(
    0% 78%,
    10% 48%,
    24% 58%,
    36% 26%,
    50% 55%,
    64% 24%,
    77% 58%,
    90% 42%,
    100% 76%
  );
  box-shadow:
    0 5px 8px rgba(0,0,0,0.35);
  opacity: 0.95;
  content: "";
}

/* =========================================================
   EYES
   ========================================================= */

.monster-eye {
  overflow: hidden;
  background:
    radial-gradient(
      circle at 45% 40%,
      #fff2a2 0%,
      #ffd955 20%,
      #ffbb2b 42%,
      #7f3503 70%,
      #240900 100%
    );
  border: 3px solid #301005;
  box-shadow:
    0 0 12px rgba(255, 214, 83, 0.95),
    0 0 22px rgba(255, 115, 26, 0.34),
    inset 0 2px 4px rgba(255,255,255,0.22),
    inset 0 -5px 7px rgba(0,0,0,0.46);
}

/* Slit pupil */
.monster-eye::before {
  position: absolute;
  top: 8%;
  left: 50%;
  width: 16%;
  height: 82%;
  background: #020100;
  border-radius: 999px;
  transform: translateX(-50%);
  box-shadow: 0 0 6px rgba(0,0,0,0.9);
  content: "";
}

/* Eye shading */
.monster-eye::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0.30),
      transparent 35%,
      transparent 70%,
      rgba(0,0,0,0.34)
    );
  content: "";
}

/* Slightly angrier eye placement */
.eye-left {
  transform: rotate(-8deg);
}

.eye-right {
  transform: rotate(8deg);
}

/* =========================================================
   MOUTH
   ========================================================= */

.monster-mouth {
  color: #fff8eb;
  font-weight: 900;
  letter-spacing: 4px;
  text-shadow:
    0 2px 0 #000,
    0 0 10px rgba(255,255,255,0.12);
  background:
    linear-gradient(
      180deg,
      #2a0409 0%,
      #110106 48%,
      #050104 100%
    );
  border: 5px solid #69161d;
  border-radius: 14px 14px 22px 22px / 12px 12px 30px 30px;
  box-shadow:
    inset 0 5px 12px rgba(150, 10, 17, 0.18),
    inset 0 -8px 14px rgba(0,0,0,0.56),
    0 0 12px rgba(90, 0, 0, 0.26);
}

/* Gum shadow */
.monster-mouth::before {
  position: absolute;
  top: 0;
  left: 7%;
  width: 86%;
  height: 24%;
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      rgba(141, 18, 23, 0.60),
      rgba(61, 6, 10, 0.12)
    );
  content: "";
}

/* =========================================================
   TENTACLES
   ========================================================= */

.tentacle {
  background:
    linear-gradient(
      180deg,
      #cf8de5 0%,
      #b664d1 20%,
      #8e36af 50%,
      #642185 78%,
      #43145e 100%
    );
  border-color: #163f57 !important;
  box-shadow:
    inset 0 10px 12px rgba(255,255,255,0.10),
    inset 0 -14px 16px rgba(0,0,0,0.34),
    0 10px 14px rgba(0,0,0,0.36);
}

/* More dramatic tentacle posture */
.tentacle-left {
  transform: rotate(-44deg);
}

.tentacle-right {
  transform: rotate(46deg);
}

.tentacle-middle {
  transform: rotate(-1deg);
}

/* =========================================================
   DANGER STAGE MENACE
   ========================================================= */

.danger-3 .monster,
.danger-4 .monster {
  box-shadow:
    inset 0 18px 22px rgba(255,255,255,0.06),
    inset 0 -22px 22px rgba(0,0,0,0.52),
    0 0 0 3px rgba(7, 12, 24, 0.36),
    0 16px 26px rgba(0,0,0,0.55),
    0 0 18px rgba(103, 52, 171, 0.20);
}

.danger-5 .monster,
.danger-6 .monster {
  box-shadow:
    inset 0 18px 22px rgba(255,255,255,0.06),
    inset 0 -22px 22px rgba(0,0,0,0.52),
    0 0 0 3px rgba(7, 12, 24, 0.36),
    0 16px 26px rgba(0,0,0,0.55),
    0 0 24px rgba(205, 57, 50, 0.22),
    0 0 34px rgba(130, 35, 140, 0.18);
}

.danger-5 .monster-eye,
.danger-6 .monster-eye {
  box-shadow:
    0 0 14px rgba(255, 226, 98, 0.98),
    0 0 24px rgba(255, 102, 24, 0.40),
    inset 0 2px 4px rgba(255,255,255,0.22),
    inset 0 -5px 7px rgba(0,0,0,0.46);
}

.danger-5 .monster-mouth,
.danger-6 .monster-mouth {
  border-color: #8d1f1a;
  box-shadow:
    inset 0 5px 12px rgba(150, 10, 17, 0.20),
    inset 0 -8px 14px rgba(0,0,0,0.58),
    0 0 14px rgba(105, 0, 0, 0.34);
}

/* More sinister while attacking */
.kraken.effect-eaten-kraken .monster {
  box-shadow:
    inset 0 18px 22px rgba(255,255,255,0.05),
    inset 0 -24px 24px rgba(0,0,0,0.56),
    0 0 18px rgba(202, 61, 46, 0.34),
    0 0 28px rgba(126, 32, 150, 0.22);
}

.kraken.effect-eaten-kraken .monster-eye {
  box-shadow:
    0 0 15px rgba(255, 230, 108, 0.95),
    0 0 26px rgba(255, 98, 30, 0.45);
}

/* Mobile tuning */
@media (max-width: 620px) {
  .scene::after {
    opacity: 0.14;
  }

  .monster::before {
    top: -16%;
    height: 30%;
  }

  .monster-mouth {
    letter-spacing: 2px;
  }
}

/* =========================================================
   KRAKEN ART UPGRADE V1
   Image-driven boss artwork
   ========================================================= */

.kraken {
  position: absolute;
  overflow: visible !important;
  isolation: isolate;
  transform-origin: 54% 80%;
  filter:
    drop-shadow(0 20px 18px rgba(0, 0, 0, 0.82))
    drop-shadow(0 0 18px rgba(71, 127, 175, 0.22));
}

/*
  The detailed Kraken artwork is rendered over the existing
  Kraken container. The old CSS monster remains available as
  a fallback but is hidden below.
*/
.kraken::before {
  position: absolute;
  z-index: 94;
  inset: -28% -31% -20% -31%;
  pointer-events: none;
  border-radius: 48% 48% 34% 34% / 44% 44% 28% 28%;
  background-image:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 64%,
      rgba(3, 14, 24, 0.56) 84%,
      rgba(2, 10, 18, 0.92) 100%
    ),
    url("/assets/kraken-boss-art.png");
  background-repeat: no-repeat;
  background-position:
    center,
    50% 17%;
  background-size:
    100% 100%,
    146% auto;
  background-blend-mode: normal;
  opacity: 0.94;
  filter:
    saturate(1.08)
    contrast(1.1)
    brightness(0.88);
  clip-path: ellipse(47% 49% at 50% 49%);
  content: "";
}

/* Cold aura behind the Kraken. */
.kraken::after {
  position: absolute;
  z-index: 91;
  inset: -4% -4% 2% -4%;
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse at 50% 42%,
      rgba(179, 225, 255, 0.22) 0%,
      rgba(94, 151, 204, 0.17) 31%,
      rgba(72, 88, 163, 0.13) 53%,
      rgba(95, 32, 128, 0.09) 67%,
      transparent 81%
    );
  filter: blur(18px);
  content: "";
}

/* Hide the original simple Kraken artwork. */
.kraken > .monster,
.kraken > .tentacle {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Colder scene lighting around the boss. */
.sun-haze {
  background:
    radial-gradient(
      circle,
      rgba(232, 246, 255, 0.92) 0%,
      rgba(166, 211, 255, 0.58) 29%,
      rgba(102, 167, 235, 0.2) 53%,
      transparent 78%
    ) !important;
}

.water-depth {
  background:
    linear-gradient(
      180deg,
      rgba(3, 20, 36, 0) 0%,
      rgba(4, 24, 42, 0.16) 22%,
      rgba(3, 18, 33, 0.46) 60%,
      rgba(1, 8, 18, 0.9) 100%
    ) !important;
}

/* Kraken becomes clearer and brighter as danger increases. */
.danger-0 .kraken::before {
  opacity: 0.67;
  filter:
    saturate(0.95)
    contrast(1.02)
    brightness(0.65);
}

.danger-1 .kraken::before {
  opacity: 0.73;
  filter:
    saturate(0.98)
    contrast(1.04)
    brightness(0.7);
}

.danger-2 .kraken::before {
  opacity: 0.79;
  filter:
    saturate(1)
    contrast(1.06)
    brightness(0.76);
}

.danger-3 .kraken::before {
  opacity: 0.85;
  filter:
    saturate(1.04)
    contrast(1.08)
    brightness(0.82);
}

.danger-4 .kraken::before {
  opacity: 0.9;
  filter:
    saturate(1.07)
    contrast(1.1)
    brightness(0.86);
}

.danger-5 .kraken::before,
.danger-6 .kraken::before {
  opacity: 0.97;
  filter:
    saturate(1.12)
    contrast(1.14)
    brightness(0.92);
}

/* Wrong-guess rise animation. */
.kraken.effect-rise::before {
  animation: krakenBossRise 0.9s ease-out;
}

@keyframes krakenBossRise {
  0% {
    transform: translateY(8px) scale(0.97);
  }

  45% {
    transform: translateY(-10px) scale(1.04);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

/* Defeat attack animation support. */
.kraken.effect-eaten-kraken::before {
  animation: krakenBossAttack 2.55s ease-in-out forwards;
}

@keyframes krakenBossAttack {
  0% {
    transform: scale(1);
  }

  35% {
    transform: translate(-8px, -12px) scale(1.06);
  }

  62% {
    transform: translate(-25px, -34px) scale(1.16);
  }

  78% {
    transform: translate(-30px, -38px) scaleX(1.2) scaleY(1.11);
  }

  100% {
    transform: translate(-20px, -28px) scale(1.11);
  }
}

/* Large desktop. */
@media (min-width: 1181px) {
  .kraken {
    width: 440px !important;
    height: 440px !important;
    right: -3% !important;
  }

  .danger-0 .kraken { bottom: -125px !important; }
  .danger-1 .kraken { bottom: -102px !important; }
  .danger-2 .kraken { bottom: -78px !important; }
  .danger-3 .kraken { bottom: -51px !important; }
  .danger-4 .kraken { bottom: -22px !important; }
  .danger-5 .kraken { bottom: 5px !important; }
  .danger-6 .kraken { bottom: 32px !important; }
}

/* Laptop desktop. */
@media (min-width: 931px) and (max-width: 1180px) {
  .kraken {
    width: 385px !important;
    height: 390px !important;
    right: -4% !important;
  }

  .danger-0 .kraken { bottom: -112px !important; }
  .danger-1 .kraken { bottom: -89px !important; }
  .danger-2 .kraken { bottom: -65px !important; }
  .danger-3 .kraken { bottom: -40px !important; }
  .danger-4 .kraken { bottom: -15px !important; }
  .danger-5 .kraken { bottom: 10px !important; }
  .danger-6 .kraken { bottom: 35px !important; }
}

/* Tablet. */
@media (min-width: 621px) and (max-width: 930px) {
  .kraken {
    width: 285px !important;
    height: 300px !important;
    right: -5% !important;
  }

  .kraken::before {
    inset: -25% -35% -18% -35%;
    background-size:
      100% 100%,
      155% auto;
  }
}

/* Mobile. */
@media (max-width: 620px) {
  .kraken {
    width: 210px !important;
    height: 230px !important;
    right: -5% !important;
  }

  .kraken::before {
    inset: -20% -37% -14% -37%;
    background-position:
      center,
      50% 15%;
    background-size:
      100% 100%,
      158% auto;
    clip-path: ellipse(46% 48% at 50% 49%);
  }

  .danger-0 .kraken { bottom: -47px !important; }
  .danger-1 .kraken { bottom: -31px !important; }
  .danger-2 .kraken { bottom: -15px !important; }
  .danger-3 .kraken { bottom: 1px !important; }
  .danger-4 .kraken { bottom: 17px !important; }
  .danger-5 .kraken { bottom: 33px !important; }
  .danger-6 .kraken { bottom: 49px !important; }
}

/* Very narrow phones. */
@media (max-width: 390px) {
  .kraken {
    width: 195px !important;
    height: 215px !important;
    right: -7% !important;
  }
}

/* =========================================================
   KRAKEN ART FIT ADJUSTMENT
   Shows more of the head and tentacles
   ========================================================= */

.kraken::before {
  inset: -18% -24% -12% -24% !important;

  background-position:
    center,
    50% 34% !important;

  background-size:
    100% 100%,
    112% auto !important;

  clip-path:
    ellipse(49% 50% at 50% 50%) !important;
}

/* Desktop */
@media (min-width: 931px) {
  .kraken {
    width: 365px !important;
    height: 365px !important;
    right: -1% !important;
  }

  .kraken::before {
    inset: -20% -22% -14% -22% !important;

    background-position:
      center,
      50% 32% !important;

    background-size:
      100% 100%,
      108% auto !important;
  }

  .danger-0 .kraken { bottom: -145px !important; }
  .danger-1 .kraken { bottom: -120px !important; }
  .danger-2 .kraken { bottom: -95px !important; }
  .danger-3 .kraken { bottom: -68px !important; }
  .danger-4 .kraken { bottom: -40px !important; }
  .danger-5 .kraken { bottom: -12px !important; }
  .danger-6 .kraken { bottom: 16px !important; }
}

/* Tablet */
@media (min-width: 621px) and (max-width: 930px) {
  .kraken {
    width: 265px !important;
    height: 275px !important;
    right: -2% !important;
  }

  .kraken::before {
    background-position:
      center,
      50% 34% !important;

    background-size:
      100% 100%,
      115% auto !important;
  }
}

/* Mobile */
@media (max-width: 620px) {
  .kraken {
    width: 185px !important;
    height: 205px !important;
    right: -2% !important;
  }

  .kraken::before {
    inset: -15% -24% -10% -24% !important;

    background-position:
      center,
      50% 34% !important;

    background-size:
      100% 100%,
      118% auto !important;

    clip-path:
      ellipse(49% 50% at 50% 50%) !important;
  }

  .danger-0 .kraken { bottom: -72px !important; }
  .danger-1 .kraken { bottom: -56px !important; }
  .danger-2 .kraken { bottom: -40px !important; }
  .danger-3 .kraken { bottom: -24px !important; }
  .danger-4 .kraken { bottom: -8px !important; }
  .danger-5 .kraken { bottom: 8px !important; }
  .danger-6 .kraken { bottom: 24px !important; }
}

/* =========================================================
   KRAKEN ART BLEND V2
   Removes the obvious oval cutout and blends the artwork
   into the water and scene.
   ========================================================= */

.kraken::before {
  inset: -20% -26% -15% -26% !important;

  background-image:
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 62%,
      rgba(4, 18, 31, 0.16) 73%,
      rgba(3, 15, 27, 0.54) 87%,
      rgba(2, 10, 19, 0.9) 100%
    ),
    url("/assets/kraken-boss-art.png") !important;

  background-position:
    center,
    50% 30% !important;

  background-size:
    100% 100%,
    106% auto !important;

  /*
    A softer mask removes the hard circular edge while keeping
    the head and tentacles visible.
  */
  clip-path: none !important;

  -webkit-mask-image:
    radial-gradient(
      ellipse 52% 54% at 50% 49%,
      #000 0%,
      #000 67%,
      rgba(0, 0, 0, 0.96) 74%,
      rgba(0, 0, 0, 0.72) 83%,
      rgba(0, 0, 0, 0.28) 92%,
      transparent 100%
    );

  mask-image:
    radial-gradient(
      ellipse 52% 54% at 50% 49%,
      #000 0%,
      #000 67%,
      rgba(0, 0, 0, 0.96) 74%,
      rgba(0, 0, 0, 0.72) 83%,
      rgba(0, 0, 0, 0.28) 92%,
      transparent 100%
    );

  filter:
    saturate(1.12)
    contrast(1.08)
    brightness(1.02) !important;
}

/* Add a subtle water mist at the Kraken base. */
.kraken::after {
  inset: 53% -12% -8% -12% !important;
  border-radius: 50% !important;
  background:
    radial-gradient(
      ellipse at 50% 70%,
      rgba(202, 238, 250, 0.26) 0%,
      rgba(85, 164, 194, 0.23) 28%,
      rgba(25, 87, 117, 0.18) 50%,
      transparent 75%
    ),
    repeating-radial-gradient(
      ellipse at 50% 75%,
      rgba(214, 244, 252, 0.12) 0 3px,
      transparent 4px 14px
    ) !important;
  filter: blur(10px) !important;
  opacity: 0.86 !important;
}

/* Slightly brighten the artwork at the early stages. */
.danger-0 .kraken::before {
  opacity: 0.77 !important;
  filter:
    saturate(1)
    contrast(1.04)
    brightness(0.82) !important;
}

.danger-1 .kraken::before {
  opacity: 0.82 !important;
  filter:
    saturate(1.03)
    contrast(1.05)
    brightness(0.87) !important;
}

.danger-2 .kraken::before {
  opacity: 0.86 !important;
  filter:
    saturate(1.06)
    contrast(1.06)
    brightness(0.91) !important;
}

.danger-3 .kraken::before {
  opacity: 0.9 !important;
  filter:
    saturate(1.08)
    contrast(1.07)
    brightness(0.95) !important;
}

.danger-4 .kraken::before,
.danger-5 .kraken::before,
.danger-6 .kraken::before {
  opacity: 0.97 !important;
  filter:
    saturate(1.13)
    contrast(1.1)
    brightness(1.02) !important;
}

/* Desktop positioning */
@media (min-width: 931px) {
  .kraken {
    width: 350px !important;
    height: 350px !important;
    right: -4% !important;
  }

  .kraken::before {
    inset: -20% -25% -15% -25% !important;

    background-position:
      center,
      50% 29% !important;

    background-size:
      100% 100%,
      104% auto !important;
  }

  .danger-0 .kraken { bottom: -142px !important; }
  .danger-1 .kraken { bottom: -117px !important; }
  .danger-2 .kraken { bottom: -92px !important; }
  .danger-3 .kraken { bottom: -66px !important; }
  .danger-4 .kraken { bottom: -39px !important; }
  .danger-5 .kraken { bottom: -12px !important; }
  .danger-6 .kraken { bottom: 15px !important; }
}

/* Tablet */
@media (min-width: 621px) and (max-width: 930px) {
  .kraken {
    width: 258px !important;
    height: 270px !important;
    right: -4% !important;
  }

  .kraken::before {
    background-size:
      100% 100%,
      110% auto !important;
  }
}

/* Mobile */
@media (max-width: 620px) {
  .kraken {
    width: 180px !important;
    height: 200px !important;
    right: -4% !important;
  }

  .kraken::before {
    inset: -15% -25% -11% -25% !important;

    background-position:
      center,
      50% 31% !important;

    background-size:
      100% 100%,
      114% auto !important;

    -webkit-mask-image:
      radial-gradient(
        ellipse 52% 55% at 50% 50%,
        #000 0%,
        #000 65%,
        rgba(0, 0, 0, 0.9) 76%,
        rgba(0, 0, 0, 0.38) 90%,
        transparent 100%
      );

    mask-image:
      radial-gradient(
        ellipse 52% 55% at 50% 50%,
        #000 0%,
        #000 65%,
        rgba(0, 0, 0, 0.9) 76%,
        rgba(0, 0, 0, 0.38) 90%,
        transparent 100%
      );
  }

  .danger-0 .kraken { bottom: -72px !important; }
  .danger-1 .kraken { bottom: -56px !important; }
  .danger-2 .kraken { bottom: -40px !important; }
  .danger-3 .kraken { bottom: -24px !important; }
  .danger-4 .kraken { bottom: -8px !important; }
  .danger-5 .kraken { bottom: 8px !important; }
  .danger-6 .kraken { bottom: 24px !important; }
}

/* =========================================================
   KRAKEN TRANSPARENT CUTOUT V216
   Uses real PNG transparency instead of an oval CSS mask.
   ========================================================= */

.kraken::before {
  inset: -19% -25% -15% -25% !important;

  background-image:
    url("/assets/kraken-boss-cutout.png") !important;

  background-repeat:
    no-repeat !important;

  background-position:
    50% 29% !important;

  background-size:
    104% auto !important;

  background-color:
    transparent !important;

  background-blend-mode:
    normal !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  clip-path:
    none !important;

  -webkit-mask-image:
    none !important;

  mask-image:
    none !important;

  box-shadow:
    none !important;

  opacity:
    0.97 !important;

  filter:
    saturate(1.1)
    contrast(1.08)
    brightness(1.01)
    drop-shadow(0 15px 14px rgba(0, 0, 0, 0.62)) !important;
}

/*
  Remove the previous oval aura. Replace it with a low,
  horizontal water mist that does not surround the head.
*/
.kraken::after {
  z-index: 91 !important;
  left: -13% !important;
  right: -13% !important;
  top: auto !important;
  bottom: -2% !important;
  height: 31% !important;

  border-radius:
    50% !important;

  background:
    radial-gradient(
      ellipse at 50% 72%,
      rgba(211, 242, 250, 0.25) 0%,
      rgba(91, 170, 200, 0.19) 28%,
      rgba(27, 88, 117, 0.1) 52%,
      transparent 75%
    ) !important;

  filter:
    blur(9px) !important;

  opacity:
    0.84 !important;
}

/* Keep the original CSS Kraken hidden. */
.kraken > .monster,
.kraken > .tentacle {
  display:
    none !important;
}

/* Danger-stage visibility with no round mask. */
.danger-0 .kraken::before {
  opacity: 0.72 !important;
  filter:
    saturate(0.98)
    contrast(1.03)
    brightness(0.78)
    drop-shadow(0 13px 12px rgba(0, 0, 0, 0.55)) !important;
}

.danger-1 .kraken::before {
  opacity: 0.78 !important;
  filter:
    saturate(1)
    contrast(1.04)
    brightness(0.83)
    drop-shadow(0 13px 12px rgba(0, 0, 0, 0.57)) !important;
}

.danger-2 .kraken::before {
  opacity: 0.84 !important;
  filter:
    saturate(1.03)
    contrast(1.05)
    brightness(0.88)
    drop-shadow(0 14px 13px rgba(0, 0, 0, 0.59)) !important;
}

.danger-3 .kraken::before {
  opacity: 0.89 !important;
  filter:
    saturate(1.06)
    contrast(1.06)
    brightness(0.93)
    drop-shadow(0 14px 13px rgba(0, 0, 0, 0.61)) !important;
}

.danger-4 .kraken::before,
.danger-5 .kraken::before,
.danger-6 .kraken::before {
  opacity: 0.98 !important;
  filter:
    saturate(1.12)
    contrast(1.09)
    brightness(1.01)
    drop-shadow(0 15px 14px rgba(0, 0, 0, 0.64)) !important;
}

/* Desktop sizing. */
@media (min-width: 931px) {
  .kraken {
    width: 350px !important;
    height: 350px !important;
    right: -4% !important;
  }

  .kraken::before {
    inset: -19% -25% -15% -25% !important;
    background-position: 50% 29% !important;
    background-size: 104% auto !important;
  }

  .danger-0 .kraken { bottom: -142px !important; }
  .danger-1 .kraken { bottom: -117px !important; }
  .danger-2 .kraken { bottom: -92px !important; }
  .danger-3 .kraken { bottom: -66px !important; }
  .danger-4 .kraken { bottom: -39px !important; }
  .danger-5 .kraken { bottom: -12px !important; }
  .danger-6 .kraken { bottom: 15px !important; }
}

/* Tablet sizing. */
@media (min-width: 621px) and (max-width: 930px) {
  .kraken {
    width: 258px !important;
    height: 270px !important;
    right: -4% !important;
  }

  .kraken::before {
    inset: -17% -25% -13% -25% !important;
    background-position: 50% 30% !important;
    background-size: 110% auto !important;
  }
}

/* Mobile sizing. */
@media (max-width: 620px) {
  .kraken {
    width: 180px !important;
    height: 200px !important;
    right: -4% !important;
  }

  .kraken::before {
    inset: -15% -25% -11% -25% !important;
    background-position: 50% 31% !important;
    background-size: 114% auto !important;
  }

  .kraken::after {
    bottom: -3% !important;
    height: 27% !important;
    filter: blur(7px) !important;
  }

  .danger-0 .kraken { bottom: -72px !important; }
  .danger-1 .kraken { bottom: -56px !important; }
  .danger-2 .kraken { bottom: -40px !important; }
  .danger-3 .kraken { bottom: -24px !important; }
  .danger-4 .kraken { bottom: -8px !important; }
  .danger-5 .kraken { bottom: 8px !important; }
  .danger-6 .kraken { bottom: 24px !important; }
}

/* Preserve wrong-guess and attack animation. */
.kraken.effect-rise::before {
  animation:
    krakenCutoutRise
    0.9s
    ease-out !important;
}

@keyframes krakenCutoutRise {
  0% {
    transform:
      translateY(8px)
      scale(0.97);
  }

  45% {
    transform:
      translateY(-10px)
      scale(1.04);
  }

  100% {
    transform:
      translateY(0)
      scale(1);
  }
}

.kraken.effect-eaten-kraken::before {
  animation:
    krakenCutoutAttack
    2.55s
    ease-in-out
    forwards !important;
}

@keyframes krakenCutoutAttack {
  0% {
    transform:
      scale(1);
  }

  35% {
    transform:
      translate(-8px, -12px)
      scale(1.06);
  }

  62% {
    transform:
      translate(-25px, -34px)
      scale(1.16);
  }

  78% {
    transform:
      translate(-30px, -38px)
      scaleX(1.2)
      scaleY(1.11);
  }

  100% {
    transform:
      translate(-20px, -28px)
      scale(1.11);
  }
}

/* =========================================================
   FINAL KRAKEN ART PATCH
   Uses the final transparent Kraken artwork
   ========================================================= */

.kraken {
  position: absolute;
  overflow: visible !important;
  isolation: isolate;
  transform-origin: 55% 80%;
}

/* Use the uploaded transparent PNG directly */
.kraken::before {
  content: "";
  position: absolute;
  z-index: 95;
  pointer-events: none;
  inset: -18% -24% -14% -24% !important;

  background-image: url("/assets/kraken-final-transparent.png") !important;
  background-repeat: no-repeat !important;
  background-position: 50% 56% !important;
  background-size: 100% auto !important;
  background-color: transparent !important;
  background-blend-mode: normal !important;

  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  box-shadow: none !important;

  opacity: 0.98 !important;
  filter:
    saturate(1.06)
    contrast(1.04)
    brightness(1.02)
    drop-shadow(0 14px 12px rgba(0,0,0,0.62)) !important;
}

/* Light mist only, no oval bubble */
.kraken::after {
  content: "";
  position: absolute;
  z-index: 91;
  pointer-events: none;

  left: -12% !important;
  right: -12% !important;
  top: auto !important;
  bottom: -1% !important;
  height: 24% !important;

  background:
    radial-gradient(
      ellipse at 50% 72%,
      rgba(205, 236, 247, 0.22) 0%,
      rgba(82, 157, 190, 0.17) 30%,
      rgba(28, 88, 116, 0.08) 55%,
      transparent 76%
    ) !important;

  border-radius: 50% !important;
  filter: blur(8px) !important;
  opacity: 0.78 !important;
}

/* Hide old CSS monster parts */
.kraken > .monster,
.kraken > .tentacle,
.kraken > .monster-eye,
.kraken > .monster-mouth {
  display: none !important;
}

/* Danger stage visibility */
.danger-0 .kraken::before {
  opacity: 0.72 !important;
  filter:
    saturate(0.98)
    contrast(1.02)
    brightness(0.82)
    drop-shadow(0 12px 10px rgba(0,0,0,0.55)) !important;
}

.danger-1 .kraken::before {
  opacity: 0.79 !important;
  filter:
    saturate(1)
    contrast(1.03)
    brightness(0.87)
    drop-shadow(0 12px 10px rgba(0,0,0,0.57)) !important;
}

.danger-2 .kraken::before {
  opacity: 0.85 !important;
  filter:
    saturate(1.02)
    contrast(1.04)
    brightness(0.91)
    drop-shadow(0 13px 11px rgba(0,0,0,0.59)) !important;
}

.danger-3 .kraken::before {
  opacity: 0.9 !important;
  filter:
    saturate(1.04)
    contrast(1.04)
    brightness(0.95)
    drop-shadow(0 13px 11px rgba(0,0,0,0.60)) !important;
}

.danger-4 .kraken::before,
.danger-5 .kraken::before,
.danger-6 .kraken::before {
  opacity: 0.98 !important;
  filter:
    saturate(1.08)
    contrast(1.05)
    brightness(1.01)
    drop-shadow(0 14px 12px rgba(0,0,0,0.63)) !important;
}

/* Rise animation */
.kraken.effect-rise::before {
  animation: finalKrakenRise 0.9s ease-out !important;
}

@keyframes finalKrakenRise {
  0% {
    transform: translateY(8px) scale(0.97);
  }
  45% {
    transform: translateY(-10px) scale(1.04);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

/* Attack animation */
.kraken.effect-eaten-kraken::before {
  animation: finalKrakenAttack 2.55s ease-in-out forwards !important;
}

@keyframes finalKrakenAttack {
  0% {
    transform: scale(1);
  }
  35% {
    transform: translate(-8px, -12px) scale(1.06);
  }
  62% {
    transform: translate(-25px, -34px) scale(1.15);
  }
  78% {
    transform: translate(-30px, -38px) scaleX(1.18) scaleY(1.10);
  }
  100% {
    transform: translate(-20px, -28px) scale(1.10);
  }
}

/* Desktop */
@media (min-width: 931px) {
  .kraken {
    width: 340px !important;
    height: 340px !important;
    right: -4% !important;
  }

  .kraken::before {
    inset: -18% -24% -14% -24% !important;
    background-position: 50% 56% !important;
    background-size: 100% auto !important;
  }

  .danger-0 .kraken { bottom: -138px !important; }
  .danger-1 .kraken { bottom: -114px !important; }
  .danger-2 .kraken { bottom: -90px !important; }
  .danger-3 .kraken { bottom: -65px !important; }
  .danger-4 .kraken { bottom: -39px !important; }
  .danger-5 .kraken { bottom: -13px !important; }
  .danger-6 .kraken { bottom: 13px !important; }
}

/* Tablet */
@media (min-width: 621px) and (max-width: 930px) {
  .kraken {
    width: 252px !important;
    height: 262px !important;
    right: -4% !important;
  }

  .kraken::before {
    inset: -16% -24% -12% -24% !important;
    background-position: 50% 57% !important;
    background-size: 106% auto !important;
  }
}

/* Mobile */
@media (max-width: 620px) {
  .kraken {
    width: 176px !important;
    height: 194px !important;
    right: -4% !important;
  }

  .kraken::before {
    inset: -14% -24% -10% -24% !important;
    background-position: 50% 58% !important;
    background-size: 111% auto !important;
  }

  .kraken::after {
    height: 21% !important;
    bottom: -2% !important;
    filter: blur(7px) !important;
  }

  .danger-0 .kraken { bottom: -70px !important; }
  .danger-1 .kraken { bottom: -54px !important; }
  .danger-2 .kraken { bottom: -38px !important; }
  .danger-3 .kraken { bottom: -23px !important; }
  .danger-4 .kraken { bottom: -8px !important; }
  .danger-5 .kraken { bottom: 8px !important; }
  .danger-6 .kraken { bottom: 23px !important; }
}

/* === TRANSPARENT KRAKEN HOTFIX START === */

/* Remove old square / panel look */
.kraken {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    isolation: isolate !important;
}

.kraken::before {
    content: "" !important;
    position: absolute !important;
    top: -10% !important;
    right: -16% !important;
    bottom: -6% !important;
    left: -16% !important;
    display: block !important;
    background: url("/assets/kraken-majestic-cutout.png?v=20260711-233229") center bottom / contain no-repeat !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    pointer-events: none !important;
    z-index: 5 !important;
    filter:
      drop-shadow(0 8px 8px rgba(0, 0, 0, 0.40))
      drop-shadow(0 0 8px rgba(91, 74, 255, 0.22)) !important;
}

.kraken::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.kraken > img,
.kraken img,
.kraken .kraken-art img,
.kraken .kraken-image img {
    display: none !important;
}

.kraken,
.kraken .kraken-art,
.kraken .kraken-image,
.kraken .kraken-body,
.kraken .kraken-bubble,
.kraken .kraken-backdrop,
.kraken .monster-art,
.kraken .monster-frame,
.kraken .monster-box,
.kraken .kraken-frame,
.kraken .kraken-panel {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

@media (max-width: 760px) {
    .kraken::before {
        top: -7% !important;
        right: -11% !important;
        bottom: -4% !important;
        left: -11% !important;
    }
}

@media (max-width: 480px) {
    .kraken::before {
        top: -4% !important;
        right: -7% !important;
        bottom: -2% !important;
        left: -7% !important;
    }
}

/* === TRANSPARENT KRAKEN HOTFIX END === */

/* === KRAKEN SIZE POSITION TUNE START === */

/*
  Make the transparent Kraken larger and lower in the gameplay scene.
  The Kraken remains attached to the existing game movement element.
*/
.kraken::before {
    transform:
        translateY(14%)
        scale(1.18) !important;

    transform-origin:
        center bottom !important;

    background-position:
        center bottom !important;
}

/*
  Tablet sizing.
*/
@media (max-width: 760px) {
    .kraken::before {
        transform:
            translateY(12%)
            scale(1.15) !important;
    }
}

/*
  Small-phone sizing.
*/
@media (max-width: 480px) {
    .kraken::before {
        transform:
            translateY(10%)
            scale(1.12) !important;
    }
}

/* === KRAKEN SIZE POSITION TUNE END === */