/* PhishSense colors: navy + teal, matching the logo */
:root {
  --navy: #0a1a33;
  --navy-2: #123a5c;
  --teal: #2de0c4;
  --text: #e9f1f7;
  --muted: #9fb7c9;
  --red: #ff5d6c;
  --green: #3ddc84;
  /* Difficulty colors: buttons, badge icons, mission title */
  --easy: #4ade80;     /* Minnow */
  --medium: #facc15;   /* Angler */
  --hard: #f87171;     /* Captain */
  --easy-tint: rgba(74, 222, 128, 0.14);
  --medium-tint: rgba(250, 204, 21, 0.14);
  --hard-tint: rgba(248, 113, 113, 0.14);
  --fit-h: none; /* set on large screens: the height a screen must fit in */
}

* { box-sizing: border-box; }

/* ---------- Bootstrap overrides ----------
   Bootstrap is loaded for its grid only. Its base styles ("reboot") change
   fonts, spacing, and headings, so these put our original look back. */
:root { scroll-behavior: auto; }   /* the link popup measures right after scrolling */
body {
  margin: 0;
  font-family: "Inter", Arial, sans-serif;
  font-size: 1rem;   /* 16px; grows a little on very wide screens (see below) */
  line-height: normal;
  background: var(--navy);
  color: var(--text);
}
h1, h2, h3 { color: inherit; font-weight: bold; line-height: normal; }
h2 { font-size: 1.5em; margin: 0.83em 0; }
h3 { font-size: 1.17em; margin: 1em 0; }
p { margin: 1em 0; }
ul, ol { margin: 1em 0; padding-left: 40px; }
small { font-size: smaller; }
.container { max-width: 1200px; }   /* one width at every breakpoint, centered */

/* ---------- Headers ---------- */
/* Big centered header on the home screen */
.hero { text-align: center; padding: 32px 16px 18px; }
.hero h1 { margin: 0; font-size: 55px; font-weight: 800; line-height: 1.1; }
.hero h1 span { color: var(--teal); }
.logo { width: 156px; height: auto; display: block; margin: 0 auto 8px; }
.tagline { margin: 6px 0 0; color: var(--muted); letter-spacing: 3px; text-transform: uppercase; font-size: 13px; }

/* Slim top bar on every other screen */
.topbar { display: none; border-bottom: 1px solid rgba(159, 183, 201, 0.15); background: #0c1f3b; }
body:not([data-screen="start-screen"]) .hero { display: none; }
body:not([data-screen="start-screen"]) .topbar { display: block; }
.topbar-inner {
  padding-top: 8px; padding-bottom: 8px; min-height: 52px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo { width: 36px; height: 36px; display: block; }
.brand-name { font-size: 20px; font-weight: 800; }
.brand-name span { color: var(--teal); }

/* Run status: shown while playing, and as a final summary on the end screen */
.run-status { display: none; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-left: auto; }
body[data-screen="play-screen"] .run-status,
body[data-screen="end-screen"] .run-status { display: flex; }
body[data-screen="end-screen"] .streak,
body[data-screen="end-screen"] .run-tools { display: none; }
/* Mission screen: the bar shows only the "?" (replay tutorial); other screens hide the "?" */
body[data-screen="mission-screen"] .run-status { display: flex; }
body[data-screen="mission-screen"] .run-info,
body[data-screen="mission-screen"] .streak,
body[data-screen="mission-screen"] .contacts-toggle,
body:not([data-screen="mission-screen"]) .help-toggle { display: none; }
.run-info { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.round-counter { margin: 0; font-size: 14px; color: var(--muted); white-space: nowrap; }

/* ---------- Page ---------- */
main { padding-top: 16px; padding-bottom: 16px; }
body:not([data-screen="start-screen"]) main { padding-top: 32px; }   /* gap under the top bar */
body[data-screen="mission-screen"] main { padding-top: 20px; }   /* tighter, to make room for the big Start mission boat */
.hidden { display: none !important; }

/* Home: one column on phones (name + modes, Masters, Leaderboard).
   900px and up: Leaderboard | name + modes | Masters. The side columns share one width,
   so the middle stays centered, and they sit in one grid row, so both cards start at the
   same top edge and stretch to the same height. */
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.home-center { order: 1; min-width: 0; }
.home-masters { order: 2; }
.home-board { order: 3; }
.home-grid > .ps-card { margin: 0; min-width: 0; display: flex; flex-direction: column; }
@media (min-width: 900px) {
  /* About 25% / 50% / 25% */
  .home-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
  .home-board { order: 1; }
  .home-center { order: 2; }
  .home-masters { order: 3; }

  /* The home screen fills the window: the header and the three columns form one group,
     centered vertically in the space above the waves (main's bottom padding keeps that
     space clear). The center content sits in the middle of its column, and its gaps and
     buttons grow a little on taller screens. */
  body[data-screen="start-screen"] {
    display: flex; flex-direction: column; justify-content: center;
    min-height: 100vh; min-height: 100dvh;
  }
  body[data-screen="start-screen"] .hero { padding-top: 16px; }
  body[data-screen="start-screen"] main {
    flex: 0 0 auto; width: 100%;
    padding-bottom: max(16px, 9vh);   /* stop at the top of the waves */
  }
  .home-center { display: flex; flex-direction: column; justify-content: center; }
  .hero .intro { font-size: 1.1rem; }
  .home-center .step-label { margin-top: clamp(14px, calc(7vh - 26px), 64px); }
  .home-grid .lb-row { margin: clamp(7px, calc(2vh - 8px), 16px) 0; }
  .home-center input { padding: 16px 18px; font-size: 1.2rem; }
  button.mode { min-height: clamp(112px, 12vh, 132px); font-size: 1.2rem; }
  .mode .badge-icon { width: 1.6em; height: 1.6em; vertical-align: -0.45em; }
  .mode small { font-size: 0.8em; }
  .home-center .master-goal { margin-top: clamp(14px, calc(6vh - 20px), 56px); }
}
/* Wide screens: the home screen uses a little more width */
@media (min-width: 1400px) {
  body[data-screen="start-screen"] main.container { max-width: 1320px; }
}

/* Mission: two cards side by side on large screens, same height.
   Uses the full container width, so its edges line up with the play screen and the logo. */
#mission-screen .ps-card { margin: 0; }
/* Cards fill their column (flex, not height: 100%, so a tutorial tip placed
   under a card grows the column instead of spilling into the next row) */
#mission-screen > .col-lg-7, #mission-screen > .col-lg-5 { display: flex; flex-direction: column; }
#mission-screen .briefing, #mission-screen .contacts { flex: 1 1 auto; }

/* Scroll areas inside cards get a dark scrollbar that matches the theme */
.ps-card, .email .body, .sms .bubble { scrollbar-width: thin; scrollbar-color: #3a6185 transparent; }

/* Start screen */
.intro { text-align: center; color: var(--muted); margin: 10px 0 0; }
.step-label { margin: 22px 0 8px; font-weight: 600; font-size: 1.05rem; color: var(--text); }
.step-label + input { margin-top: 0; }
/* Leaderboard and Masters rows: rank (or trophy) | name + badge icons | points.
   Names never wrap; a long one ends in "…" so the points stay on the same line. */
.leaderboard-list, .masters-list { list-style: none; padding: 0; margin: 0; }
.lb-row { display: grid; grid-template-columns: 1.6em minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 7px 0; }
.lb-rank { color: var(--muted); font-weight: 700; text-align: right; }
.lb-who { display: flex; align-items: center; gap: 0; min-width: 0; white-space: nowrap; }
.lb-name { overflow: hidden; text-overflow: ellipsis; margin-right: 4px; }
.lb-who .lb-badge { flex-shrink: 0; display: inline-flex; }
.lb-row .lb-score { color: var(--muted); white-space: nowrap; text-align: right; }
.leaderboard-list .empty, .masters-list .empty { color: var(--muted); }
/* A long Masters list scrolls inside its card instead of making the side cards taller */
.masters-list { max-height: 15em; overflow-y: auto; padding-right: 6px; }

/* Masters: players who earned all three badges. The list starts right under the heading. */
.masters { border: 2px solid var(--medium); }
.masters h3 { margin-top: 0; }
.masters-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; }
.masters-join { margin: 8px 0 0; text-align: center; color: var(--muted); font-style: italic; opacity: 0.85; }

/* "Earn all 3 badges" note, centered under the difficulty buttons */
.master-goal { margin: 18px 0 0; text-align: center; color: var(--muted); font-weight: 600; font-size: 1.05rem; }
.master-shimmer {
  font-weight: 800;
  background: linear-gradient(100deg, var(--medium) 0%, var(--medium) 40%, #fff8d6 50%, var(--medium) 60%, var(--medium) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: master-shimmer 2.6s linear infinite;
}
@keyframes master-shimmer {
  from { background-position: 100% 0; }
  to   { background-position: -150% 0; }
}

/* Mission screen */
.briefing { margin-top: 0; line-height: 1.6; color: var(--muted); }
.briefing p { margin: 0 0 10px; }
.briefing p:last-child { margin-bottom: 0; }
.briefing b { color: var(--text); }
.briefing-title { font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--teal) !important; }
.mission-mode { font-size: 20px; font-weight: 800; color: var(--text); }
.mission-mode.tier-easy, .mission-mode.tier-medium, .mission-mode.tier-hard { color: var(--tier); }
.facts { padding: 10px 14px; border-left: 3px solid var(--teal); background: rgba(45, 224, 196, 0.08); border-radius: 6px; }
.mission-buttons { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
button.secondary { background: transparent; color: var(--text); border: 2px solid var(--navy-2); }

input {
  display: block; width: 100%; margin: 0; padding: 12px;
  border-radius: 10px; border: 1px solid var(--navy-2);
  background: var(--navy-2); color: var(--text); font-size: 1rem;
}

button {
  font-family: inherit; font-size: 1rem; font-weight: 600; line-height: normal; cursor: pointer;
  border: none; border-radius: 10px; padding: 12px 18px;
  background: var(--teal); color: var(--navy);
}
button:disabled { opacity: 0.5; cursor: default; }

/* Start mission is a little fishing boat that blinks a teal glow to draw the eye.
   The button itself is see-through: ::before is the hull, ::after the cabin
   and mast. The glow is a drop-shadow so it follows the boat's outline
   instead of a rectangle. It's big, so the mission screen's gaps are trimmed
   (see "Mission screen" below) to keep everything on one screen; the mast
   tip pokes a little above the button into the gap. */
#btn-start {
  position: relative; isolation: isolate;
  min-width: 300px; padding: 30px 64px 12px; border-radius: 0;
  font-size: 1.35rem; font-weight: 800; letter-spacing: 0.5px;
  background: transparent; color: var(--navy);
  animation: start-blink 1.4s ease-in-out infinite;
}
#btn-start::before { /* hull, with a darker stripe at the waterline */
  content: ""; position: absolute; inset: 20px 0 0 0; z-index: -1;
  background: linear-gradient(var(--teal) 82%, #1fa892 82%);
  clip-path: polygon(0 6%, 100% 0, 89% 100%, 8% 100%);
}
#btn-start::after { /* cabin with a porthole (left) and the mast (right) */
  content: ""; position: absolute; left: 24%; bottom: calc(100% - 20px);
  width: 40%; max-width: 140px; height: 30px;
  background:
    radial-gradient(circle, var(--navy-2) 3.5px, transparent 4.5px) no-repeat left calc(27% - 6px) bottom 2px / 12px 12px,
    linear-gradient(var(--text), var(--text)) no-repeat right 20% bottom / 4px 30px,
    linear-gradient(var(--text), var(--text)) no-repeat left bottom / 55% 16px;
}
#btn-start:hover, #btn-start:focus-visible { animation: none; filter: brightness(1.1) drop-shadow(0 0 10px rgba(45, 224, 196, 0.6)); }
@keyframes start-blink {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 0 rgba(45, 224, 196, 0)); }
  50% { filter: brightness(1.15) drop-shadow(0 0 12px rgba(45, 224, 196, 0.85)); }
}

.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
/* Each difficulty sets --tier; anything tagged with it (icons, the mission title) uses that color */
.tier-easy { --tier: var(--easy); --tier-tint: var(--easy-tint); }
.tier-medium { --tier: var(--medium); --tier-tint: var(--medium-tint); }
.tier-hard { --tier: var(--hard); --tier-tint: var(--hard-tint); }
.tier-easy, .tier-medium, .tier-hard { color: var(--tier); }

/* Badge icon: sized to the text around it, drawn in currentColor */
.badge-icon { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em; margin-right: 0.3em; }
.badge-label { white-space: nowrap; }

/* Difficulty buttons: colored border, light tint on hover, text stays white on the dark card */
button.mode {
  padding: 18px 8px; background: var(--navy-2); color: var(--text); border: 2px solid var(--tier);
  transition: background-color 0.15s ease;
}
button.mode:hover, button.mode:focus-visible {
  background: linear-gradient(var(--tier-tint), var(--tier-tint)) var(--navy-2);
}
button.mode:focus-visible { outline: 2px solid var(--tier); outline-offset: 2px; }
.mode .badge-icon { width: 1.3em; height: 1.3em; vertical-align: -0.3em; }
.mode small { color: var(--muted); font-weight: 400; }

/* Our card style (named ps-card so Bootstrap's .card doesn't restyle it) */
.ps-card { background: var(--navy-2); border-radius: 14px; padding: 18px; margin: 16px 0; }
.ps-card.good { border-left: 6px solid var(--green); }
.ps-card.bad { border-left: 6px solid var(--red); }

.loading { color: var(--muted); text-align: center; padding: 24px; }

/* ---------- Play layout (Bootstrap grid: col-lg-7 message, col-lg-5 answers) ---------- */
#play-screen .ps-card { margin: 0; }
.message-wrap { position: relative; }
#result h3 { margin-top: 0; }
#result p:last-child, #result ul:last-child { margin-bottom: 0; }

/* Phones and narrow windows: one column.
   The answer column's box is dissolved so its pieces stack under the message
   (buttons, reaction, result, Next), and the contacts panel can move to the top. */
@media (max-width: 991.98px) {
  .play-side { display: contents; }
  #play-screen .play-side > * {
    flex-shrink: 0;
    width: calc(100% - var(--bs-gutter-x));
    margin: var(--bs-gutter-y) calc(var(--bs-gutter-x) * 0.5) 0;
  }
  #play-screen #contacts-panel { order: -1; }   /* opens right under the top bar */
}

/* Large screens: two columns, sized so a whole round fits without scrolling */
@media (min-width: 992px) {
  :root { --fit-h: calc(100vh - 104px); }
  @supports (height: 100dvh) { :root { --fit-h: calc(100dvh - 104px); } }

  .play-side { display: flex; flex-direction: column; gap: 12px; max-height: var(--fit-h); }
  .play-side > * { flex: 0 0 auto; }
  .contacts-panel .contacts-table th, .contacts-panel .contacts-table td { padding: 6px; }

  /* Long explanations scroll inside the card, so Next stays on screen */
  #result.ps-card { flex: 0 1 auto; min-height: 0; overflow-y: auto; padding: 14px 16px; font-size: 15px; line-height: 1.45; }
  #result ul { padding-left: 20px; margin: 6px 0 10px; }
  #result li { margin: 3px 0; }
  #result p { margin: 8px 0; }

  .answer { padding: 18px; font-size: 18px; }
  #btn-next { width: 100%; margin: 0; }

  /* Long messages scroll inside the message, never the page */
  .email, .sms { display: flex; flex-direction: column; max-height: var(--fit-h); }
  .email > *, .sms > * { flex: 0 0 auto; }
  .email .body { flex: 0 1 auto; min-height: 60px; overflow-y: auto; }
  .sms .bubble { flex: 0 1 auto; min-height: 48px; overflow-y: auto; }

  /* End screen: badge on the left, recap + leaderboard on the right */
  .end-side { display: flex; flex-direction: column; gap: 16px; max-height: var(--fit-h); }
  .end-side > .ps-card { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
  .end-side > .leaderboard { flex-shrink: 0; max-height: 45%; }   /* the recap gives up room first */
  .end-side > .recap { flex-grow: 1; }   /* fills spare height so both columns end together */
  .end-main { display: flex; }   /* the card fills the column, which matches the right column's height */
  .end-card { flex: 1 1 auto; }
}

/* Very wide screens: text grows from 16px (at 1600px) to 18px (at 2000px and up).
   Everything sized in rem/em follows; phones and laptops keep 16px. */
@media (min-width: 1601px) {
  html { font-size: clamp(16px, calc(8px + 0.5vw), 18px); }
}

/* Shorter laptop screens: a smaller home header so the home screen fits too */
@media (min-width: 992px) and (max-height: 800px) {
  .hero { padding-top: 18px; padding-bottom: 14px; }
  .hero h1 { font-size: 48px; }
  .logo { width: 117px; margin-bottom: 4px; }
}

/* ---------- Run status: progress dots + streak ---------- */
.dots { display: flex; gap: 8px; }
.dot {
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; line-height: 1; color: var(--navy);
  background: transparent; border: 2px solid #2b4a68;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.dot.current { border-color: var(--teal); transform: scale(1.2); }
.dot.correct { background: var(--green); border-color: var(--green); animation: dot-pop 0.4s ease; }
.dot.wrong { background: var(--red); border-color: var(--red); animation: dot-pop 0.4s ease; }

.streak { margin: 0; font-size: 14px; font-weight: 600; color: var(--teal); white-space: nowrap; }
.streak:empty { display: none; }

/* ---------- Trusted contacts (briefing card + play panel) ---------- */
.contacts-toggle {
  font-size: 13px; padding: 6px 12px; border-radius: 999px; white-space: nowrap;
  background: transparent; color: var(--text); border: 2px solid var(--navy-2);
}
.contacts-toggle:hover, .contacts-toggle.open { border-color: var(--teal); }
.contacts-toggle.open { background: rgba(45, 224, 196, 0.12); }

.contacts-title {
  margin: 0 0 10px; font-size: 13px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; color: var(--teal);
}
.contacts-panel { border: 1px solid #2b4a68; }
.contacts-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.contacts-table th, .contacts-table td {
  text-align: left; vertical-align: top; padding: 8px 6px;
  border-bottom: 1px solid rgba(159, 183, 201, 0.18);
}
.contacts-table thead th {
  padding-top: 0; font-size: 12px; font-weight: 600; color: var(--muted);
}
.contacts-table tbody th { font-weight: 600; color: var(--text); }
.contacts-table tbody th small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.contact-domain, .contact-phone { display: block; font-family: monospace; font-size: 14px; color: var(--teal); overflow-wrap: anywhere; }
.contact-phone { color: var(--text); }
.contacts-tip { margin: 10px 0 0; font-size: 13px; color: var(--muted); }

/* ---------- Tutorial (see "Tutorial" in app.js) ---------- */
/* Example inbox on the mission briefing: kept compact so Start mission stays close */
.practice.ps-card { padding: 14px 16px; }
.practice-title {
  margin: 0 0 10px; font-size: 13px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; color: var(--teal);
}
.practice-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.practice-side { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 992px) {
  .practice-body { grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
}
.sample-message .email::before { padding: 6px 14px; font-size: 11px; }
.sample-message .email-head { padding: 10px 14px; }
.sample-message .avatar { width: 34px; height: 34px; font-size: 15px; }
.sample-message .email .body { padding: 10px 14px; font-size: 15px; line-height: 1.5; }
.sample-message .link { padding: 0 14px 12px; }
.sample-message .email-actions { display: none; }   /* Reply / Forward aren't part of the lesson */
/* The example Phish / Legit are pictures of the buttons, not buttons */
.sample-answers .answer {
  display: flex; align-items: center; justify-content: center;
  padding: 10px; border-radius: 10px; font-weight: 600; cursor: default;
}
.sample-progress { display: flex; align-items: center; gap: 10px; }
.sample-progress-label { font-size: 13px; color: var(--muted); }
/* Example dots match the in-game ones, just without the pop animation */
.sample-dots .dot { animation: none; }
.sample-dots .dot.current { transform: none; }
.practice-note { margin: 0; font-size: 13px; color: var(--muted); }

.run-tools { display: flex; align-items: center; gap: 8px; }
/* "?" button next to Trusted contacts: same outline pill look, as a circle */
.help-toggle {
  width: 32px; height: 32px; padding: 0; border-radius: 50%;
  font-size: 14px; font-weight: 800; line-height: 1;
  background: transparent; color: var(--teal); border: 2px solid var(--navy-2);
}
.help-toggle:hover, .help-toggle.open { border-color: var(--teal); }
.help-toggle.open { background: rgba(45, 224, 196, 0.12); }

/* The callout: a small card with a teal edge and an arrow pointing at its target.
   It floats in open space next to the target (data-side says which side it's on).
   When there's no open space, it sits in the page flow under the target
   (.tut-inline) and pushes the content below it down instead of covering it. */
.tutorial {
  position: fixed; z-index: 1100; left: 0; top: 0;
  width: min(300px, calc(100vw - 24px));
  padding: 14px 16px; border-radius: 14px;
  background: var(--navy-2); color: var(--text);
  border: 2px solid var(--teal);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  text-align: left;
  animation: tut-in 0.18s ease-out;
}
.tutorial.tut-inline {
  position: relative; left: auto; top: auto; z-index: 5;
  width: auto; max-width: 360px; margin: 14px 12px 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
/* Under the sender line, inside the email header (app.js may widen it sideways) */
.email-who > .tutorial.tut-inline { margin: 10px 0 8px; }
/* Right under the link, on its own line before the "Hover to inspect" hint */
.link > .tutorial.tut-inline { flex: 1 0 100%; max-width: none; margin: 6px 0 4px; }
/* In the play column the grid rules set the width; just keep the gap */
#play-screen .play-side > .tutorial.tut-inline { max-width: none; }
.tutorial p { margin: 0; }
.tut-count {
  margin-bottom: 6px !important; font-size: 12px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; color: var(--teal);
}
.tut-text { font-size: 15px; line-height: 1.45; }
.tut-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.tut-skip {
  padding: 4px 0; background: none; color: var(--muted);
  font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.tut-skip:hover { color: var(--text); }
.tut-ok { padding: 8px 18px; font-size: 14px; }
.tut-skip:focus-visible, .tut-ok:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* The arrow is a turned square with two teal edges; the corner they share points at the target */
.tut-arrow {
  position: absolute; width: 14px; height: 14px;
  background: var(--navy-2); border: 2px solid var(--teal);
}
.tutorial[data-side="below"] .tut-arrow,
.tutorial[data-side="above"] .tut-arrow { left: var(--arrow-x, 50%); transform: translateX(-50%) rotate(45deg); }
.tutorial[data-side="left"] .tut-arrow,
.tutorial[data-side="right"] .tut-arrow { top: var(--arrow-y, 50%); transform: translateY(-50%) rotate(45deg); }
.tutorial[data-side="below"] .tut-arrow { top: -9px; border-right: 0; border-bottom: 0; }   /* points up */
.tutorial[data-side="above"] .tut-arrow { bottom: -9px; border-left: 0; border-top: 0; }   /* points down */
.tutorial[data-side="right"] .tut-arrow { left: -9px; border-top: 0; border-right: 0; }     /* points left */
.tutorial[data-side="left"] .tut-arrow { right: -9px; border-bottom: 0; border-left: 0; }   /* points right */
@keyframes tut-in {
  from { opacity: 0; }
}

/* Tight ring around the thing the callout points at.
   The sender line and contact name shrink to their text, so the ring fits them. */
.email-who .from { width: fit-content; max-width: 100%; }
.sms .label b { width: fit-content; max-width: 100%; margin: 0 auto; }
.tut-target { outline: 2px solid var(--teal) !important; outline-offset: 2px; border-radius: 4px; }
.answers.tut-target { outline-offset: 4px; border-radius: 12px; }
.ps-card.tut-target { outline-offset: 3px; border-radius: 14px; }   /* keep the card's own corners */
.help-toggle.tut-target { border-radius: 50%; }
.dots.tut-target { outline-offset: 4px; border-radius: 999px; }
/* The message body fills the email edge to edge, so its ring sits inside */
.email .body.tut-target, .sms .bubble.tut-target { outline-offset: -2px; }
.sms .bubble.tut-target { border-radius: 18px 18px 18px 4px; }
.sms .label b.tut-target { outline-offset: 1px; }   /* keeps clear of "Text message from" above */

/* ---------- Message area: glow, shake, floating score ---------- */
.message-wrap { position: relative; }
.pop-layer { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.pop-score {
  position: absolute; left: 50%; top: 24%;
  font-size: 40px; font-weight: 800; color: var(--green);
  text-shadow: 0 2px 12px rgba(10, 26, 51, 0.8);
  animation: float-up 1.3s ease-out forwards;
}

#message.is-correct .email,
#message.is-correct .sms { animation: glow-green 1.1s ease-out; }
#message.is-wrong { animation: shake 0.45s ease-in-out; }

/* ---------- Answer reactions ---------- */
/* Keeps a tilted card from adding a sideways scrollbar while the hook pulls it */
body { overflow-x: clip; }

#message.hook-anim { position: relative; z-index: 50; animation: none; }
#message.is-hooked .email,
#message.is-hooked .sms { box-shadow: 0 0 0 4px var(--red), 0 10px 30px rgba(0, 0, 0, 0.35); }
#message.is-cautious .email,
#message.is-cautious .sms { box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.6), 0 10px 30px rgba(0, 0, 0, 0.35); }

.hook-rig {
  position: absolute; z-index: 60; width: 0; height: 0;
  pointer-events: none; transform-origin: 0 0; will-change: transform;
}
.hook-line {
  position: absolute; left: -1px; top: 0;
  width: 2px; height: var(--drop);
  background: #dfe7ee; box-shadow: 0 0 0 1px rgba(10, 26, 51, 0.55);
}
.hook {
  position: absolute; left: -20px; top: calc(var(--drop) - 1px);
  overflow: visible; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

.reaction {
  margin: 0; padding: 12px 16px; border-radius: 12px;
  text-align: center; font-size: 20px; font-weight: 800; line-height: 1.3;
  animation: reaction-pop 0.35s cubic-bezier(0.2, 0.8, 0.3, 1.25) both;
}
.reaction.hooked {
  color: #ffc2c8; background: rgba(255, 93, 108, 0.14); border: 2px solid var(--red);
  animation-delay: 0.45s; /* appears as the hook bites */
}
.reaction.dodged {
  color: #b8f5d2; background: rgba(61, 220, 132, 0.12); border: 2px solid var(--green);
  animation-delay: 0.35s; /* appears as the card ducks */
}
.reaction.safe {
  color: #b8f5d2; background: rgba(61, 220, 132, 0.12); border: 2px solid var(--green);
}
/* Friendly, not harsh: soft amber, a gentle fade instead of a pop */
.reaction.cautious {
  color: #ffe3a3; background: rgba(255, 209, 102, 0.1);
  border: 2px solid rgba(255, 209, 102, 0.45);
  font-weight: 700; animation-name: reaction-soft; animation-duration: 0.4s;
}
.ps-card.gentle { border-left: 6px solid #ffd166; }
.gentle-tip { margin-bottom: 0; color: #ffe3a3; }

@keyframes reaction-pop {
  0% { opacity: 0; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes reaction-soft {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes dot-pop {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@keyframes float-up {
  0% { opacity: 0; transform: translate(-50%, 14px) scale(0.8); }
  18% { opacity: 1; transform: translate(-50%, 0) scale(1.12); }
  100% { opacity: 0; transform: translate(-50%, -96px) scale(1); }
}
@keyframes glow-green {
  0% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
  28% { box-shadow: 0 0 0 4px var(--green), 0 0 38px 10px rgba(61, 220, 132, 0.55); }
  100% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
}
@keyframes shake {
  10%, 90% { transform: translateX(-3px); }
  20%, 80% { transform: translateX(5px); }
  30%, 50%, 70% { transform: translateX(-9px); }
  40%, 60% { transform: translateX(9px); }
}

/* ---------- Email: looks like an inbox message ---------- */
#message.ps-card { padding: 0; background: none; }
.email {
  background: #f7f9fb; color: #1b2a3a;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.email::before {
  content: "INBOX";
  display: block; padding: 10px 18px;
  background: #dfe7ee; color: #45566a;
  font-size: 13px; font-weight: 600; letter-spacing: 1px;
}
.email-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid #e3e9ef;
}
.avatar {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  background: var(--navy-2); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800;
}
.email-who { flex: 1 1 auto; min-width: 0; }
.email-who .from { margin: 0; font-size: 14px; color: #5b6b7b; overflow-wrap: anywhere; }
.email-who .from b { color: #1b2a3a; }
.email-who .subject { margin: 3px 0 0; font-size: 15px; font-weight: 600; color: #1b2a3a; overflow-wrap: anywhere; }
.email-time { flex: 0 0 auto; margin: 2px 0 0; font-size: 12px; color: #7b8a99; white-space: nowrap; }

.email .body { margin: 0; padding: 18px; line-height: 1.6; }

.email-actions {
  display: flex; gap: 10px;
  padding: 12px 16px; border-top: 1px solid #e3e9ef; background: #eef3f7;
}
.email-actions button,
.email-actions button:disabled {
  font-size: 14px; padding: 8px 16px; border-radius: 8px;
  background: #e1e8ee; color: #9aa8b5; border: 1px solid #d3dce4;
  opacity: 1; cursor: not-allowed;
}

/* ---------- Text message: looks like a phone ---------- */
.sms {
  width: 320px; max-width: 100%; margin: 0 auto; padding: 14px 16px 28px;
  background: #101826; border: 3px solid #2b3a4f; border-radius: 36px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.sms::before {
  content: ""; display: block; width: 90px; height: 6px;
  margin: 0 auto 12px; background: #2b3a4f; border-radius: 3px;
}

/* Phone status bar: time, signal bars, battery */
.status-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px 14px; font-size: 13px; font-weight: 600; color: var(--text);
}
.sb-right { display: flex; align-items: center; gap: 7px; }
.signal { display: flex; align-items: flex-end; gap: 2px; height: 11px; }
.signal i { width: 3px; background: var(--text); border-radius: 1px; }
.signal i:nth-child(1) { height: 4px; }
.signal i:nth-child(2) { height: 6px; }
.signal i:nth-child(3) { height: 9px; }
.signal i:nth-child(4) { height: 11px; }
.battery {
  position: relative; width: 25px; height: 13px;
  border: 1.5px solid var(--text); border-radius: 3px; padding: 2px;
}
.battery::after {
  content: ""; position: absolute; right: -4px; top: 3.5px;
  width: 2px; height: 5px; background: var(--text); border-radius: 0 2px 2px 0;
}
.bat-fill { display: block; height: 100%; width: 72%; background: var(--green); border-radius: 1px; }

.sms .label { text-align: center; font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.sms .label b { display: block; font-size: 16px; color: var(--text); }
.bubble {
  background: #e9edf2; color: #1b2a3a;
  padding: 12px 14px; border-radius: 18px 18px 18px 4px;
  line-height: 1.5; margin: 0; max-width: 85%;
}

/* Links are buttons on purpose: they only preview, never open anything */
.link {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin: 0; padding: 0 18px 18px;
}
.link-chip,
.link-chip:hover {
  font: inherit; font-weight: 600; text-align: left;
  padding: 0; margin: 0; border: 0; border-radius: 3px;
  background: none; color: #1a5fd0;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: help; transform: none; box-shadow: none;
  overflow-wrap: anywhere;
}
.link-chip:focus-visible { outline: 2px solid #1a5fd0; outline-offset: 3px; }
.link-hint {
  font-size: 12px; font-weight: 600; color: #7b8a99;
  padding: 2px 8px; border-radius: 999px; background: #e7edf2;
}
.hint-tap { display: none; }
@media (hover: none) {
  .hint-hover { display: none; }
  .hint-tap { display: inline; }
}
.sms .link { padding: 10px 0 0; }
.sms .link-chip { font-family: monospace; font-weight: 400; color: var(--teal); }
.sms .link-chip:focus-visible { outline-color: var(--teal); }
.sms .link-hint { background: #1d2a3d; color: var(--muted); }

/* The popup that shows a link's real destination */
.link-peek {
  position: fixed; z-index: 1000;
  width: max-content; max-width: min(360px, calc(100vw - 24px));
  padding: 10px 12px; border-radius: 10px;
  background: #0d1b2e; color: var(--text);
  border: 1px solid #2b3a4f;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  font-size: 13px; line-height: 1.45;
  animation: peek-in 0.12s ease-out;
}
.link-peek p { margin: 0; }
.peek-title { color: var(--muted); font-weight: 600; margin-bottom: 4px !important; }
.peek-url { font-family: monospace; font-size: 14px; overflow-wrap: anywhere; color: #c9d6e2; }
.peek-sub { color: inherit; }
.peek-domain { color: #ffd166; background: rgba(255, 209, 102, 0.12); padding: 0 2px; border-radius: 3px; }
.peek-tip { margin-top: 6px !important; color: var(--muted); font-size: 12px; }
.peek-tip b { color: var(--text); }
@keyframes peek-in {
  from { opacity: 0; transform: translateY(4px); }
}
.link-reveal { margin-bottom: 0; }

.answers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.answer.phish { background: var(--red); color: white; }
.answer.legit { background: var(--green); color: var(--navy); }

#btn-next, #btn-home { display: block; margin: 0 auto; }
#end-screen { text-align: center; }
#end-screen .end-side { text-align: left; }
#end-screen .end-side .ps-card { margin: 0; }
#end-screen .end-side .ps-card + .ps-card { margin-top: 16px; }

/* Left card: badge (or hook), score, message, Back to modes, centered vertically */
#end-screen .end-card {
  margin: 0; padding: 24px 20px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.end-card h2 { margin: 0.5em 0 0; }
.end-card #end-text { margin: 10px 0 20px; color: var(--muted); }

/* ---------- Badge reveal ---------- */
.badge-reveal { position: relative; padding: 10px 0 2px; }
.badge-art {
  font-size: 96px; line-height: 1.1;
  display: flex; justify-content: center;
  animation: badge-drop 1.1s cubic-bezier(0.2, 0.75, 0.3, 1) both;
}
.badge-name:empty { display: none; }
.badge-name {
  margin: 2px 0 0; font-size: 26px; font-weight: 800; color: var(--teal);
  animation: fade-rise 0.5s ease-out 0.75s both;
}
.badge-art .badge-icon { width: 1em; height: 1em; margin: 0; vertical-align: 0; }
.badge-name.tier-easy, .badge-name.tier-medium, .badge-name.tier-hard { color: var(--tier); }
.badge-master {
  display: inline-block; margin: 14px 0 0; padding: 8px 16px;
  border: 2px solid var(--teal); border-radius: 999px;
  background: rgba(45, 224, 196, 0.1);
  font-weight: 700; color: var(--text);
  animation: fade-rise 0.5s ease-out 1.1s both;
}

@keyframes badge-drop {
  0% { opacity: 0; transform: translateY(-170px) scale(0.4) rotate(0deg); }
  55% { opacity: 1; transform: translateY(0) scale(1.28) rotate(360deg); }
  70% { transform: translateY(0) scale(0.92) rotate(372deg); }
  85% { transform: translateY(0) scale(1.07) rotate(354deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(360deg); }
}
@keyframes fade-rise {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Confetti burst (pure CSS/JS, no libraries) */
.confetti { position: absolute; left: 0; right: 0; top: 0; height: 0; pointer-events: none; }
.confetti-bit {
  position: absolute; top: 0; width: 9px; height: 14px; border-radius: 2px;
  animation-name: confetti-fall; animation-timing-function: ease-in; animation-fill-mode: forwards;
}
@keyframes confetti-fall {
  0% { opacity: 1; transform: translate(0, -10px) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--dx), 300px) rotate(var(--rot)); }
}

/* ---------- End of run recap ---------- */
.recap { text-align: left; }
.recap h3 { margin: 0 0 10px; font-size: 16px; color: var(--text); }
.recap ul { margin: 0; padding-left: 20px; }
.recap li { margin: 7px 0; color: var(--muted); line-height: 1.45; }
.recap .count { color: var(--teal); font-weight: 700; }
.recap .clean { margin: 0; font-weight: 600; color: var(--green); }

.leaderboard h3 { margin-top: 0; }
.leaderboard .lb-badge .badge-icon { margin: 0 0 0 0.1em; }

/* ---------- Phones: top bar on two neat lines ----------
   Line 1: logo + name on the left, Trusted contacts on the right.
   Line 2: dots, round counter, streak. */
.label-short { display: none; }
@media (max-width: 575.98px) {
  .topbar-inner {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center;
    grid-template-areas: "brand streak contacts" "info info info";
    gap: 6px 8px; padding-top: 6px; padding-bottom: 8px; min-height: 0;
  }
  body[data-screen="play-screen"] .run-status,
  body[data-screen="mission-screen"] .run-status,
  body[data-screen="end-screen"] .run-status { display: contents; }
  .brand { grid-area: brand; }
  .streak { grid-area: streak; justify-self: end; }
  .run-tools { grid-area: contacts; gap: 6px; }
  .run-info { grid-area: info; gap: 6px 12px; }
  .label-long { display: none; }
  .label-short { display: inline; }
  body:not([data-screen="start-screen"]) main { padding-top: 20px; }
}

/* ---------- Phone-sized screens ---------- */
@media (max-width: 430px) {
  .hero { padding: 20px 14px 6px; }
  .hero h1 { font-size: 34px; }
  .logo { width: 92px; }

  .brand-logo { width: 30px; height: 30px; }
  .brand-name { font-size: 18px; }
  .round-counter { font-size: 12px; }

  .mode { padding: 14px 4px; font-size: 14px; }
  .mode small { font-size: 11px; }
  .mission-buttons { flex-direction: column; }
  .mission-buttons button { width: 100%; }

  .dot { width: 18px; height: 18px; font-size: 11px; }
  .streak { font-size: 13px; }
  .dots { gap: 6px; }
  .contacts-toggle { font-size: 12px; padding: 5px 9px; }
  .help-toggle { width: 28px; height: 28px; font-size: 13px; }
  .tut-text { font-size: 14px; }
  .contacts-table { font-size: 13px; }
  .pop-score { font-size: 34px; }
  .reaction { font-size: 17px; padding: 10px 12px; }

  .email-head { padding: 12px; gap: 10px; }
  .avatar { width: 36px; height: 36px; font-size: 16px; }
  .email-who .subject { font-size: 14px; }
  .email .body { padding: 14px; }
  .link { padding: 0 14px 14px; }
  .email-actions { padding: 10px 12px; }
  .email-actions button, .email-actions button:disabled { padding: 7px 12px; font-size: 13px; }

  .badge-art { font-size: 74px; }
  .badge-name { font-size: 22px; }
}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  #message.is-correct .email,
  #message.is-correct .sms { animation: none; box-shadow: 0 0 0 4px var(--green), 0 10px 30px rgba(0, 0, 0, 0.35); }
  #message.is-wrong { animation: none; }
  #message.is-wrong .email,
  #message.is-wrong .sms { box-shadow: 0 0 0 4px var(--red), 0 10px 30px rgba(0, 0, 0, 0.35); }
  .dot.correct, .dot.wrong { animation: none; }
  .reaction { animation: none; }
  .hook-rig { display: none; }
}

/* ---------- Ocean background: waves + side bubbles ----------
   Fixed behind all content (z-index -1 sits above the page color but under everything else),
   and pointer-events: none so it never blocks clicks or the fish cursor. */
.ocean-bg {
  position: fixed; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
}
.wave {
  position: absolute; left: 0; bottom: 0;
  width: 200%; height: 18vh; min-height: 90px;
  display: block;
  animation: wave-roll linear infinite;
  will-change: transform;
}
.wave-back  { fill: var(--teal);   opacity: 0.08; animation-duration: 30s; }
.wave-mid   { fill: var(--navy-2); opacity: 0.15; animation-duration: 22s; animation-direction: reverse; height: 15vh; min-height: 75px; }
.wave-front { fill: var(--teal);   opacity: 0.1;  animation-duration: 16s; height: 12vh; min-height: 60px; }
/* Each wave is two identical periods wide: sliding by half its width lands on an identical frame */
@keyframes wave-roll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.bg-bubble {
  position: absolute; bottom: -24px;
  width: var(--size); height: var(--size); border-radius: 50%;
  border: 1.5px solid rgba(45, 224, 196, 0.5);
  background: radial-gradient(circle at 30% 30%, rgba(233, 241, 247, 0.5), rgba(45, 224, 196, 0.1) 65%);
  opacity: 0;
  animation: bg-bubble-rise var(--dur) linear var(--delay) infinite;
}
/* Left edge */
.bg-bubble.b1 { left: 1.5vw; --size: 10px; --dur: 19s; --delay: -2s; }
.bg-bubble.b2 { left: 3.5vw; --size: 6px;  --dur: 24s; --delay: -11s; }
.bg-bubble.b3 { left: 2vw;   --size: 14px; --dur: 28s; --delay: -19s; }
/* Right edge */
.bg-bubble.b4 { right: 2vw;   --size: 8px;  --dur: 21s; --delay: -6s; }
.bg-bubble.b5 { right: 3.5vw; --size: 12px; --dur: 26s; --delay: -15s; }
.bg-bubble.b6 { right: 1.5vw; --size: 6px;  --dur: 18s; --delay: -9s; }
@keyframes bg-bubble-rise {
  0%   { opacity: 0;    transform: translate(0, 0); }
  10%  { opacity: 0.14; }
  50%  { transform: translate(6px, -55vh); }
  85%  { opacity: 0.14; }
  100% { opacity: 0;    transform: translate(-4px, -110vh); }
}

/* Fish schools: faint blue-gray (not teal, so they never look like the fish cursor).
   Home screen only: display: none on other screens removes them, and coming back restarts the swim. */
.fish-defs { position: absolute; }
/* Each school crosses the whole screen at its own height (--y), speed, and direction.
   The inner .school-drift moves softly up and down, so the path is gently wavy. */
.fish-school {
  position: absolute; left: 0; top: var(--y); width: 140px;
  fill: var(--muted); opacity: 0.12;
  animation: school-swim-right var(--swim) linear var(--start) infinite;
}
.fish-school.swim-left { animation-name: school-swim-left; }
.fish-school.swim-left svg { transform: scaleX(-1); }   /* face the way they swim */
.fish-school svg { display: block; width: 100%; height: auto; }
.school-drift { animation: school-drift var(--drift) ease-in-out infinite alternate; }

.school-1 { --y: 12vh; --swim: 38s; --start: -6s;  --drift: 7s; }
.school-2 { --y: 40vh; --swim: 29s; --start: -18s; --drift: 6s; width: 130px; }
.school-3 { --y: 66vh; --swim: 44s; --start: -30s; --drift: 9s; width: 110px; opacity: 0.1; }
.school-4 { --y: 82vh; --swim: 33s; --start: -12s; --drift: 8s; width: 120px; }
body:not([data-screen="start-screen"]) .fish-school { display: none; }

@keyframes school-swim-right {
  from { transform: translateX(-180px); }
  to   { transform: translateX(calc(100vw + 30px)); }
}
@keyframes school-swim-left {
  from { transform: translateX(calc(100vw + 30px)); }
  to   { transform: translateX(-180px); }
}
@keyframes school-drift {
  from { transform: translateY(-18px); }
  to   { transform: translateY(18px); }
}

/* Phones and narrow windows: waves only, no side bubbles or fish */
@media (max-width: 899.98px) {
  .bg-bubble, .fish-school { display: none; }
}

/* Reduced motion: waves and fish stay, but hold still; bubbles are hidden */
@media (prefers-reduced-motion: reduce) {
  .wave, .fish-school, .school-drift { animation: none !important; }
  /* Still fish rest near the side edges, away from the centered content */
  .school-1 { transform: translateX(2vw); }
  .school-2 { transform: translateX(calc(98vw - 130px)); }
  .school-3 { transform: translateX(calc(97vw - 110px)); }
  .school-4 { transform: translateX(3vw); }
  .bg-bubble { display: none; }
}

/* ---------- Fish cursor (home screen only, see fish-cursor.js) ---------- */
body.fish-mode, body.fish-mode * { cursor: none !important; }
.fish-cursor {
  position: fixed; left: 0; top: 0; z-index: 9999;
  width: 50px; height: 36px; pointer-events: none;
  transform-origin: 46px 18px; opacity: 0;
  transition: opacity 0.2s ease;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35));
}
.fish-cursor svg { display: block; overflow: visible; }
.fish-tail {
  transform-origin: 14px 18px;
  animation: fish-wag var(--wag, 0.6s) ease-in-out infinite alternate;
}
.fish-cursor.gulp svg { animation: fish-gulp 0.3s ease; }
@keyframes fish-wag {
  from { transform: rotate(-16deg); }
  to   { transform: rotate(16deg); }
}
@keyframes fish-gulp {
  40% { transform: scale(1.25, 0.85); }
}
.fish-bubble {
  position: fixed; z-index: 9998; pointer-events: none;
  border-radius: 50%; border: 1.5px solid rgba(185, 255, 241, 0.75);
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.6), rgba(45, 224, 196, 0.08) 60%);
  transform: translate(-50%, -50%);
  animation: bubble-rise 1.2s ease-out forwards;
}
.fish-bubble.burst { animation-duration: 0.8s; }
@keyframes bubble-rise {
  from { opacity: 0.9; transform: translate(-50%, -50%) scale(0.6); }
  to   { opacity: 0; transform: translate(calc(-50% + var(--drift)), calc(-50% - 60px)) scale(1.1); }
}