/* Pufferfish Run — shared style for the privacy and support pages.
   Colours come from the game (Constants.gd): ocean zones, panel blue, UI orange and gold. */
:root {
  --reef: #4ec0ca;
  --kelp: #2a8a9a;
  --open: #0d3a5c;
  --deep: #061830;
  --abyss: #020a14;
  --panel: rgba(10, 42, 74, 0.86);
  --panel-edge: rgba(93, 212, 221, 0.22);
  --button: #1a4a6a;
  --orange: #f4a832;
  --orange-dark: #c9801a;
  --gold: #ffdd88;
  --coral: #b03030;
  --coral-dark: #8b2020;
  --text: #e6f1f5;
  --muted: #88aabb;
  --pixel: "Courier New", Courier, "Courier Prime", monospace;
  --body: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--abyss); }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--body);
  color: var(--text);
  line-height: 1.7;
  background: linear-gradient(180deg, var(--reef) 0px, var(--kelp) 260px, var(--open) 700px, var(--deep) 1500px, var(--abyss) 2600px);
  position: relative;
  overflow-x: hidden;
}

/* Light rays from the surface */
body::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 620px;
  pointer-events: none;
  background:
    linear-gradient(105deg, transparent 18%, rgba(255, 255, 255, 0.10) 22%, transparent 27%),
    linear-gradient(98deg, transparent 46%, rgba(255, 255, 255, 0.08) 50%, transparent 55%),
    linear-gradient(110deg, transparent 70%, rgba(255, 255, 255, 0.07) 74%, transparent 79%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
}

/* Rising bubbles */
.bubbles { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.bubbles span {
  position: absolute;
  bottom: -40px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45);
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.55) 0 18%, rgba(255, 255, 255, 0.08) 22%);
  animation: rise linear infinite;
}
.bubbles span:nth-child(1) { left: 6%;  width: 14px; height: 14px; animation-duration: 13s; animation-delay: -2s; }
.bubbles span:nth-child(2) { left: 18%; width: 8px;  height: 8px;  animation-duration: 9s;  animation-delay: -6s; }
.bubbles span:nth-child(3) { left: 31%; width: 20px; height: 20px; animation-duration: 17s; animation-delay: -11s; }
.bubbles span:nth-child(4) { left: 52%; width: 10px; height: 10px; animation-duration: 11s; animation-delay: -4s; }
.bubbles span:nth-child(5) { left: 67%; width: 16px; height: 16px; animation-duration: 15s; animation-delay: -9s; }
.bubbles span:nth-child(6) { left: 80%; width: 7px;  height: 7px;  animation-duration: 8s;  animation-delay: -1s; }
.bubbles span:nth-child(7) { left: 91%; width: 12px; height: 12px; animation-duration: 12s; animation-delay: -7s; }
.bubbles span:nth-child(8) { left: 43%; width: 6px;  height: 6px;  animation-duration: 10s; animation-delay: -3s; }
@keyframes rise {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translate(12px, -55vh); }
  100% { transform: translate(-6px, -112vh); opacity: 0.2; }
}
@media (prefers-reduced-motion: reduce) {
  .bubbles span { animation: none; display: none; }
}

.page {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 16px 0;
}

/* Header with the fish and the game title */
.hero { text-align: center; padding: 18px 0 26px; }
.hero img {
  width: 104px;
  height: 104px;
  border-radius: 24px;
  box-shadow: 0 10px 28px rgba(0, 20, 40, 0.45), 0 0 0 3px rgba(255, 255, 255, 0.25);
  animation: bob 3.2s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translateY(-7px) rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { .hero img { animation: none; } }

.title {
  font-family: var(--pixel);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 16px 0 2px;
  font-size: clamp(30px, 8vw, 46px);
  line-height: 1.05;
  color: var(--orange);
  text-shadow: 0 3px 0 var(--orange-dark), 0 6px 14px rgba(0, 0, 0, 0.35);
}
.subtitle {
  font-family: var(--pixel);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.12em;
  color: #fff;
  margin: 6px 0 0;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Tabs between the two pages, styled like the game's buttons */
.tabs { display: flex; gap: 10px; justify-content: center; margin: 22px 0 0; flex-wrap: wrap; }
.tab {
  font-family: var(--pixel);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: #fff;
  background: var(--button);
  padding: 10px 18px;
  border-radius: 14px;
  box-shadow: 0 4px 0 #0c2c42;
  transition: transform 0.12s ease;
}
.tab:hover { transform: translateY(-2px); }
.tab[aria-current="page"] { background: var(--orange); color: #3a2200; box-shadow: 0 4px 0 var(--orange-dark); }

/* Content panels */
.panel {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 22px;
  padding: 26px 24px;
  margin: 0 0 18px;
  box-shadow: 0 14px 40px rgba(0, 10, 25, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

h2 {
  font-family: var(--pixel);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.03em;
  color: var(--orange);
  margin: 30px 0 8px;
  line-height: 1.3;
}
.panel > h2:first-child { margin-top: 0; }
h3 { font-size: 15px; color: var(--gold); margin: 18px 0 4px; }

p, li { font-size: 15.5px; }
p { margin: 0 0 12px; }
ul { padding-left: 22px; margin: 0 0 12px; }
li { margin: 4px 0; }
li::marker { color: var(--orange); }
strong { color: #fff; }
em { color: var(--gold); font-style: normal; font-weight: 600; }

a { color: var(--gold); text-underline-offset: 3px; }
a:hover { color: var(--orange); }

.meta {
  display: inline-block;
  font-family: var(--pixel);
  font-weight: 700;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

/* Small "at a glance" list on the privacy page */
.glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 6px 0 4px; }
.glance div {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 14.5px;
  line-height: 1.45;
}
.glance b { display: block; font-family: var(--pixel); color: var(--gold); font-size: 13px; letter-spacing: 0.05em; margin-bottom: 2px; }

/* FAQ accordions on the support page */
details {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  margin: 0 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
details[open] { background: rgba(255, 255, 255, 0.08); }
summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 46px 14px 16px;
  font-weight: 650;
  color: #fff;
  position: relative;
  font-size: 15.5px;
  line-height: 1.4;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--orange);
  color: #3a2200;
  font: 700 18px/24px var(--pixel);
  text-align: center;
}
details[open] summary::after { content: "–"; }
details > div { padding: 0 16px 6px; color: #d5e6ee; }

/* Big orange call-to-action, like the PLAY button */
.cta {
  display: inline-block;
  font-family: var(--pixel);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: #3a2200;
  background: var(--orange);
  padding: 13px 24px;
  border-radius: 16px;
  box-shadow: 0 5px 0 var(--orange-dark), 0 10px 22px rgba(0, 0, 0, 0.3);
  transition: transform 0.12s ease;
  word-break: break-all;
}
.cta:hover { color: #3a2200; transform: translateY(-2px); }
.help { text-align: center; }

/* Coral reef along the bottom */
.reef {
  position: relative;
  z-index: 1;
  margin-top: 46px;
  height: 120px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath fill='%238b2020' d='M0 120V78c14-10 22-30 34-30s14 22 26 22 16-40 30-40 14 34 28 34 12-18 26-18 18 26 30 26 14-46 30-46 14 40 28 40 12-22 26-22 16 30 30 30 14-38 28-38 12 26 26 26 14-14 28-14 18 18 30 18V120z'/%3E%3Cpath fill='%23b03030' d='M0 120V96c12-6 20-18 32-18s18 14 30 14 16-24 30-24 16 22 30 22 14-10 28-10 16 16 30 16 14-28 30-28 14 24 28 24 14-12 28-12 16 18 30 18 14-22 28-22 12 16 26 16 14-8 28-8 14 10 30 10V120z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}
footer {
  position: relative;
  z-index: 1;
  background: var(--coral-dark);
  text-align: center;
  padding: 4px 16px 26px;
  font-size: 13px;
  color: #f3c9c0;
}
footer a { color: var(--gold); }

@media (max-width: 480px) {
  .panel { padding: 20px 16px; border-radius: 18px; }
  h2 { font-size: 17px; }
}