/* ================= FONT ================= */
@font-face{
  font-family: "PressStart2P";
  src: url("./fonts/PressStart2P-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ================= ROOT ================= */
:root{
  --fg: #e9f2ff;
  --muted: rgba(233,242,255,.75);
  --cyan: #7df9ff;
  --pink: #ff4fd8;
  --sun: #ffd66b;
  --panel: rgba(10,12,18,.55);
  --radius: 18px;
}

/* ================= RESET ================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:#02030a;
  color:var(--fg);
  font-family: ui-monospace, monospace;
  overflow:hidden;
}

/* ================= BACKGROUND ================= */
.bg{
  position:fixed;
  inset:0;
  background:
    radial-gradient(1200px 700px at 50% 20%, rgba(255,214,107,.12), transparent 60%),
    radial-gradient(900px 600px at 70% 85%, rgba(255,79,216,.10), transparent 55%),
    url("images/bg.png");
  background-size:cover;
  background-position:center;
  transform:scale(1.05);
  z-index:0;
}

.bg-parallax{
  opacity:.35;
  /* animation: drift 16s ease-in-out infinite; */
  z-index:1;
}
@keyframes drift{
  0%{ transform:scale(1.05) translate(0,0); }
  50%{ transform:scale(1.08) translate(-10px,6px); }
  100%{ transform:scale(1.05) translate(0,0); }
}

/* ========== BOAT (ancré par JS) ========== */
.boat-anchor{
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  pointer-events: none;
}

.boat-sprite{
  width: 220px; /* ajuste si tu veux */
  height: auto;
  display: block;

  image-rendering: pixelated;
  animation: boatFloat 4.6s ease-in-out infinite;
  transform-origin: 50% 70%;
}

@keyframes boatFloat{
  0%   { transform: translateY(0px) rotate(0deg); }
  25%  { transform: translateY(-1px) rotate(-0.25deg); }
  50%  { transform: translateY(1px) rotate(0.25deg); }
  75%  { transform: translateY(-1px) rotate(-0.15deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

/* ================= FX ================= */
.fx{ position:fixed; inset:0; pointer-events:none; z-index:2; }
.fx-scanlines{
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.05) 0px,
    rgba(255,255,255,.05) 1px,
    transparent 3px,
    transparent 6px
  );
  opacity:.14;
}
.fx-vignette{
  background: radial-gradient(
    circle at center,
    transparent 65%,
    rgba(0,0,0,.45) 100%
  );
}
.fx-noise{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  opacity:.06;
}

/* ================= LAYOUT ================= */
.wrap{
  position:relative;
  z-index:3;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  padding-top: 28px;
}

.topbar{
  text-align: center;
  margin-top: 60px;
}

/* ================= TITLE ================= */
.title{
  display: inline-block;
  font-family:"PressStart2P", monospace;
  font-size: clamp(48px, 6vw, 96px);
  letter-spacing: .08em;
  line-height: 1.1;

  /* Dégradé vertical fixe — style années 80 */
  background-image: linear-gradient(
    to bottom,
    #7df9ff 0%,
    #ff9adf 45%,
    #ffd66b 100%
  );
  background-size: 100% 100%;
  background-position: 50% 0%;

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

  -webkit-text-stroke: 3px rgba(0,0,0,.95);
  paint-order: stroke fill;

  text-shadow:
    0 0 12px rgba(125,249,255,.45),
    0 0 28px rgba(255,79,216,.25),
    0 0 48px rgba(255,214,107,.18);

  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

.subtitle{
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
}

/* ================= CABINET ================= */
.cabinet{
  width:min(980px, 92vw);
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:16px;
}

.menu{
  background:rgba(0,0,0,.35);
  border-radius:var(--radius);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  backdrop-filter:blur(10px);
}

.menu-item{
  all:unset;
  cursor:pointer;
  display:grid;
  grid-template-columns:26px 1fr auto;
  gap:10px;
  align-items:center;
  padding:14px;
  border-radius:14px;
  background:rgba(8,10,16,.5);
  transition:.15s;
}
.menu-item:hover{ background:rgba(8,10,16,.7); }

.menu-item .label{
  font-family:"PressStart2P", monospace;
  font-size:14px;
}
.caret{ opacity:0; color:var(--sun); }
.menu-item.active .caret{ opacity:1; }
.hint{ font-size:12px; color:var(--muted); }

/* ================= PANEL ================= */
.panel{
  background:var(--panel);
  border-radius:var(--radius);
  padding:16px;
  backdrop-filter:blur(10px);
}
.panel-title{
  font-family:"PressStart2P", monospace;
  font-size:14px;
  color:var(--cyan);
  margin-bottom:10px;
}
.panel-text{
  font-size:14px;
  color:var(--muted);
  line-height:1.45;
}

/* ================= FOOTER ================= */
.footer{
  font-size:12px;
  color:var(--muted);
}
.sep{ opacity:.4; }

/* ================= RESPONSIVE ================= */
@media (max-width:860px){
  body{ overflow:auto; }
  .wrap{ justify-content:flex-start; padding-top:30px; }
  .cabinet{ grid-template-columns:1fr; }
}

/* ========== AUDIO ========== */

.controls{
  margin-top: 14px;
  display: flex;
  justify-content: center;
}

.music-btn{
  all: unset;
  cursor: pointer;

  font-family: "PressStart2P", monospace;
  font-size: 12px;
  letter-spacing: .06em;

  padding: 10px 14px;
  border-radius: 12px;

  background: rgba(8,10,16,.55);
  -webkit-text-stroke: 1px rgba(0,0,0,.85);
  color: var(--fg);

  text-shadow:
    0 0 10px rgba(125,249,255,.25),
    0 0 20px rgba(255,79,216,.18);

  transition: transform .08s ease, background .15s ease;
}

.music-btn:hover{ background: rgba(8,10,16,.72); }
.music-btn:active{ transform: translateY(1px); }

.music-btn.on{
  background: rgba(8,10,16,.72);
  text-shadow:
    0 0 10px rgba(125,249,255,.45),
    0 0 24px rgba(255,79,216,.22),
    0 0 40px rgba(255,214,107,.18);
}