* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: #08050b;
}

body {
  font-family: 'Lilita One', 'Arial Black', Impact, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 50% 58%, #2b1c33 0%, #170e1c 45%, #08050b 100%);
}

/* lumière dorée qui éclaire la pièce autour du coffre */
#bgGlow {
  position: absolute;
  left: 0; top: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 80, .55) 0%, rgba(255, 150, 30, .22) 30%, rgba(255, 120, 20, 0) 65%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

/* ---------------- COFFRE ---------------- */
#chestWrap {
  position: absolute;
  left: 50%; top: 50%;
  width: 400px; height: 400px;
  transform: translate(-50%, -50%);
  transform-origin: 50% 80%;
  will-change: transform;
}

#chestHalo, #chestRays {
  position: absolute;
  left: 50%; top: 46%;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}

#chestHalo {
  width: 170%; height: 170%;
  margin: -85% 0 0 -85%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 150, .95) 0%, rgba(255, 196, 60, .6) 22%, rgba(255, 150, 30, .18) 45%, rgba(255, 140, 20, 0) 66%);
}

#chestRays {
  width: 260%; height: 260%;
  margin: -130% 0 0 -130%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 222, 120, .65) 0deg 3.5deg, rgba(255, 222, 120, 0) 3.5deg 9deg, rgba(255, 200, 80, .35) 9deg 11deg, rgba(255, 200, 80, 0) 11deg 22deg);
  -webkit-mask-image: radial-gradient(circle, #000 8%, rgba(0, 0, 0, .55) 28%, transparent 62%);
          mask-image: radial-gradient(circle, #000 8%, rgba(0, 0, 0, .55) 28%, transparent 62%);
}

#chestBody {
  position: absolute;
  inset: 0;
}

#chest, #chestGold {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#chestGold {
  mix-blend-mode: screen;
}

.eye {
  position: absolute;
  width: 17%; height: 17%;
  margin: -8.5% 0 0 -8.5%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 245, 235, 1) 0%, rgba(255, 70, 50, .95) 16%, rgba(255, 20, 10, .45) 40%, rgba(255, 0, 0, 0) 70%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}
#eyeL { left: 29.9%; top: 43.5%; }
#eyeR { left: 47.4%; top: 42.9%; }

#chestBtn {
  position: absolute;
  left: 8%; top: 12%;
  width: 84%; height: 82%;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 30%;
  outline: none;
}
#chestBtn:focus-visible { box-shadow: 0 0 0 3px rgba(255, 215, 90, .55); }
body.playing #chestBtn { cursor: default; }

/* ---------------- TEINTE / FLASH ---------------- */
#tint {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 70% at 50% 18%, rgba(255, 210, 90, .9) 0%, rgba(255, 160, 40, .5) 40%, rgba(150, 70, 0, .28) 100%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}

#flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%), #fffef2 0%, #ffeaa6 35%, #ffc24a 100%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}

#fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------------- BANNIÈRE (repère 1280x720, mis à l'échelle en JS) ---------------- */
#banner {
  position: absolute;
  left: 50%; top: 0;
  width: 1280px; height: 720px;
  margin-left: -640px;
  transform-origin: 640px 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

#bnInner {
  position: absolute;
  inset: 0;
  transform-origin: 640px 140px;
}

#bnRays {
  position: absolute;
  left: 640px; top: 150px;
  width: 1300px; height: 1300px;
  margin: -650px 0 0 -650px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 3deg, rgba(255, 228, 140, .55) 0deg 2.5deg, rgba(255, 228, 140, 0) 2.5deg 11deg, rgba(255, 200, 90, .3) 11deg 13deg, rgba(255, 200, 90, 0) 13deg 24deg);
  -webkit-mask-image: radial-gradient(circle, #000 4%, rgba(0, 0, 0, .45) 24%, transparent 55%);
          mask-image: radial-gradient(circle, #000 4%, rgba(0, 0, 0, .45) 24%, transparent 55%);
  mix-blend-mode: screen;
}

#bnGlow {
  position: absolute;
  left: 640px; top: 160px;
  width: 1100px; height: 420px;
  margin: -210px 0 0 -550px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 214, 110, .55) 0%, rgba(255, 170, 50, .25) 35%, rgba(255, 150, 30, 0) 70%);
  mix-blend-mode: screen;
}

#bigText {
  position: absolute;
  left: 640px; top: 152px;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
#bigText span {
  display: block;
  font-size: 118px;
  line-height: 1.15;
  letter-spacing: 1px;
  color: transparent;
  background: linear-gradient(180deg, #fff6d2 0%, #ffe08c 28%, #f6b54a 55%, #d27f1d 80%, #9a4f0c 100%);
  -webkit-background-clip: text;
          background-clip: text;
  filter: drop-shadow(0 5px 0 #5e2d05) drop-shadow(0 12px 18px rgba(30, 10, 0, .55));
}

.beamWrap {
  position: absolute;
  top: 238px;
  width: 900px;
  height: 62px;
  filter: drop-shadow(0 0 10px rgba(255, 180, 40, .9));
}
#beamL { left: -548px; transform-origin: 100% 50%; }
#beamR { left: 928px; transform-origin: 0% 50%; }

.beam {
  position: absolute;
  inset: 0;
}
#beamL .beam {
  clip-path: polygon(0 44%, 100% 0, 100% 100%, 0 56%);
  background:
    linear-gradient(to bottom, rgba(255, 252, 225, .7) 0%, rgba(255, 252, 225, 0) 34%, rgba(120, 55, 0, 0) 62%, rgba(120, 55, 0, .6) 100%),
    linear-gradient(to left, #fff7cf 0%, #ffd450 10%, #f6a925 32%, rgba(236, 140, 20, .6) 62%, rgba(236, 140, 20, 0) 100%);
}
#beamR .beam {
  clip-path: polygon(0 0, 100% 44%, 100% 56%, 0 100%);
  background:
    linear-gradient(to bottom, rgba(255, 252, 225, .7) 0%, rgba(255, 252, 225, 0) 34%, rgba(120, 55, 0, 0) 62%, rgba(120, 55, 0, .6) 100%),
    linear-gradient(to right, #fff7cf 0%, #ffd450 10%, #f6a925 32%, rgba(236, 140, 20, .6) 62%, rgba(236, 140, 20, 0) 100%);
}

#panel {
  position: absolute;
  left: 322px; top: 220px;
  width: 636px; height: 98px;
  background: linear-gradient(to bottom, rgba(64, 30, 4, .38) 0%, rgba(46, 20, 2, .74) 50%, rgba(64, 30, 4, .38) 100%);
  box-shadow: inset 0 0 34px rgba(255, 176, 40, .35);
}

#psaGlow {
  position: absolute;
  left: 640px; top: 280px;
  width: 560px; height: 90px;
  margin: -45px 0 0 -280px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 205, 80, .55) 0%, rgba(255, 170, 40, .2) 45%, rgba(255, 160, 30, 0) 72%);
  mix-blend-mode: screen;
}

#wings {
  position: absolute;
  left: 0; top: 0;
  overflow: visible;
  filter: drop-shadow(0 0 8px rgba(255, 190, 50, .75));
}

#emblem {
  position: absolute;
  left: 640px; top: 140px;
  width: 130px; height: 130px;
  margin: -65px 0 0 -65px;
  filter: drop-shadow(0 0 10px rgba(255, 200, 70, .85)) drop-shadow(0 4px 4px rgba(40, 15, 0, .6));
}
#emblem svg, #card svg { display: block; width: 100%; height: 100%; overflow: visible; }

#txtFound, #txtPSA {
  position: absolute;
  left: 640px;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  line-height: 1.1;
}

#txtFound {
  top: 246px;
  font-size: 32px;
  color: #fff;
  text-shadow: 0 2px 0 #6e3605, 0 0 12px rgba(255, 214, 110, .7);
}

#txtPSA {
  top: 285px;
  font-size: 40px;
  color: transparent;
  background-image:
    linear-gradient(100deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(180deg, #fffce6 0%, #ffe680 42%, #ffc23a 75%, #f29a1c 100%);
  background-size: 300% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 120% 0, 0 0;
  -webkit-background-clip: text;
          background-clip: text;
  filter: drop-shadow(0 2px 0 #6e3605) drop-shadow(0 0 10px rgba(255, 190, 50, .9));
}

/* carte dorée qui sort du coffre */
#card {
  position: absolute;
  left: 0; top: 0;
  width: 118px; height: 118px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity, filter;
}
#card .cardGlow {
  position: absolute;
  left: -25%; top: -25%;
  width: 150%; height: 150%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 240, .95) 0%, rgba(255, 236, 150, .75) 22%, rgba(255, 196, 70, .35) 45%, rgba(255, 170, 40, 0) 68%);
  mix-blend-mode: screen;
}