:root {
  color-scheme: dark;
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", system-ui, sans-serif;
  background: #041d35;
  --pink: #ff5fa8;
  --cream: #fff3cf;
  --navy: #063763;
}

* { box-sizing: border-box; }

html, body {
  width: 100%; height: 100%; margin: 0; overflow: hidden;
  background: radial-gradient(circle at 50% 20%, #0d6d93, #03182c 74%);
}

body { display: grid; place-items: center; }

#game-shell {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0b89ae;
  box-shadow: 0 0 80px #001827cc;
  user-select: none;
}

canvas { display: block; width: 100%; height: 100%; touch-action: none; }

.panel {
  position: absolute; inset: 50% auto auto 50%; z-index: 5;
  width: min(620px, 86%); padding: 34px 45px 30px;
  transform: translate(-50%, -46%) scale(.95);
  text-align: center; color: var(--navy);
  background: linear-gradient(150deg, #fff8dbf5, #ffe7b8f1);
  border: 6px solid #fff9; border-radius: 42px;
  box-shadow: 0 18px 0 #043a5f77, 0 28px 50px #00274088;
  opacity: 0; pointer-events: none;
  transition: .28s ease;
}

.panel.visible { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.panel h1 { margin: -3px 0 2px; font-size: clamp(66px, 11vw, 112px); line-height: .9; letter-spacing: -7px; color: var(--pink); text-shadow: 0 6px 0 #d92f7d; }
.panel h2 { margin: 5px 0 12px; font-size: clamp(35px, 5vw, 55px); color: #ef448f; }
.eyebrow { margin: 0 0 9px; text-transform: uppercase; letter-spacing: 3px; font-weight: 900; color: #167ba1; }
.tagline { font-size: clamp(17px, 2.2vw, 24px); font-weight: 800; line-height: 1.35; }
.controls { margin: 18px 0 0; font-weight: 700; opacity: .75; line-height: 1.65; }
kbd { padding: 2px 7px; border-radius: 7px; color: #fff; background: #075477; box-shadow: 0 3px #032f49; }

.primary {
  min-width: 220px; padding: 15px 30px; border: 0; border-radius: 999px;
  color: white; background: linear-gradient(#ff74b8, #ed3c91);
  font: 900 24px inherit; letter-spacing: 2px; cursor: pointer;
  box-shadow: 0 7px 0 #a81d62, 0 12px 25px #a81d6255;
  transition: transform .1s, box-shadow .1s;
}
.primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.primary:active { transform: translateY(5px); box-shadow: 0 2px 0 #a81d62; }

.hero-fish { position: relative; width: 184px; height: 107px; margin: 10px auto -2px; }
.hero-fish .body { position: absolute; left: 43px; top: 10px; width: 130px; height: 82px; border-radius: 61% 51% 54% 60%; background: linear-gradient(#ff88c1, #ff4c9c); border: 5px solid #cb2b74; transform: rotate(-3deg); }
.hero-fish .tail { position: absolute; left: 2px; top: 22px; width: 65px; height: 68px; background: #ff6db1; border: 5px solid #cb2b74; clip-path: polygon(0 0, 100% 48%, 0 100%, 17% 50%); }
.hero-fish .eye { position: absolute; right: 19px; top: 14px; width: 25px; height: 30px; border-radius: 50%; background: white; box-shadow: inset -7px -3px #9be9ec; }
.hero-fish .eye::after { content:""; position:absolute; right:5px; top:9px; width:8px; height:12px; border-radius:50%; background:#073b58; }
.hero-fish .cheek { position: absolute; right: 42px; top: 47px; width: 23px; height: 12px; border-radius: 50%; background: #e93b86; opacity: .6; }
.hero-fish .fin { position: absolute; left: 43px; bottom: -18px; width: 45px; height: 31px; border-radius: 10% 70%; background:#ff83c0; border:4px solid #cb2b74; transform:rotate(22deg); }

.bubble-logo span { position: absolute; border: 3px solid #55c7df; border-radius: 50%; opacity: .65; }
.bubble-logo span:nth-child(1) { width: 20px; height: 20px; left: 13%; top: 19%; }
.bubble-logo span:nth-child(2) { width: 34px; height: 34px; right: 10%; top: 13%; }
.bubble-logo span:nth-child(3) { width: 13px; height: 13px; right: 18%; top: 26%; }

.level-card { padding-block: 45px; }
.level-card p:last-child, #end-copy { font-size: 20px; font-weight: 700; line-height: 1.45; }

.icon-button {
  display: none; position: absolute; z-index: 3; right: 2.2%; top: 3%; width: 48px; height: 48px;
  border: 3px solid #fff9; border-radius: 50%; color: white; background: #06496a99;
  font: 900 22px inherit; cursor: pointer;
}
.icon-button.visible { display: block; }

#touch-bite {
  display: none; position: absolute; z-index: 3; right: 4%; bottom: 6%; width: 92px; height: 92px;
  place-items: center; border: 5px solid #fff9; border-radius: 50%; color: white;
  background: #f13f91cc; box-shadow: 0 8px 0 #9e1e60aa; font-weight: 900; touch-action: none;
}
@media (pointer: coarse) { #touch-bite { display: grid; } }

@media (max-height: 650px) {
  .panel { padding: 20px 34px; }
  .hero-fish { transform: scale(.75); margin-top: -5px; margin-bottom: -15px; }
  .controls { font-size: 13px; margin-top: 12px; }
}

/* ===================================================================
   Écran "faites pivoter votre téléphone" — affiché uniquement en
   orientation portrait (le jeu se joue en paysage).
   =================================================================== */
.orientation-gate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  background: radial-gradient(circle at 50% 20%, #0d6d93, #03182c 74%);
  color: var(--cream);
}
.og-inner { max-width: 380px; }
.og-badge {
  display: inline-block;
  margin-bottom: 1.1rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  color: var(--navy);
  background: #ffe17a;
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.og-title { margin: 0 0 0.3rem; font-size: 1.7rem; font-weight: 900; line-height: 1.15; color: var(--cream); }
.og-sub {
  margin: 0 0 1.6rem;
  color: #b7e6f7;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.og-anim { display: flex; justify-content: center; margin: 1.4rem 0; }
.og-phone {
  width: 46px; height: 78px;
  border: 4px solid var(--cream);
  border-radius: 9px;
  animation: og-rotate 2.6s ease-in-out infinite;
}
@keyframes og-rotate {
  0%, 15%  { transform: rotate(0deg); }
  45%, 65% { transform: rotate(-90deg); }
  100%     { transform: rotate(-90deg); }
}
.og-text { margin: 0; color: #cfeeff; font-size: 0.92rem; line-height: 1.5; font-weight: 700; }

@media (orientation: portrait) {
  .orientation-gate { display: flex; }
  #game-shell { display: none; }
}