/* ==========================================================================
   MAËL CLICKER — DA Burger King arcade
   Palette : brun grillé, crème, flamme orange, rouge BK
   ========================================================================== */

:root {
  --bg-deep: #1a0c05;
  --bg-panel: #2c150a;
  --bg-panel-2: #3a1d0e;
  --bg-card: #43220f;
  --cream: #f5ebdc;
  --cream-dim: #cdb9a2;
  --orange: #ff8732;
  --orange-hot: #ffaa00;
  --red: #d62300;
  --gold: #ffd042;
  --green: #7ddb4f;
  --shadow: 0 8px 24px rgba(0, 0, 0, .55);
  --radius: 16px;
}

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

html { color-scheme: dark; }

body {
  font-family: "Nunito", system-ui, sans-serif;
  background:
    radial-gradient(1200px 600px at 50% -10%, #4a2410 0%, transparent 60%),
    radial-gradient(900px 500px at 90% 110%, #38160a 0%, transparent 55%),
    var(--bg-deep);
  color: var(--cream);
  min-height: 100vh;
  overflow-x: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* ---- fond flammes animé ---- */
#flames-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(closest-side, rgba(255, 135, 50, .10), transparent 70%),
    radial-gradient(closest-side, rgba(214, 35, 0, .08), transparent 70%);
  background-size: 60vmax 60vmax, 45vmax 45vmax;
  background-position: -10vmax 60vh, 80vw 20vh;
  background-repeat: no-repeat;
  animation: bg-drift 26s ease-in-out infinite alternate;
}
@keyframes bg-drift {
  to { background-position: 10vmax 40vh, 60vw 45vh; }
}

/* ---- header ---- */
.topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 24px;
  background: linear-gradient(180deg, rgba(214, 35, 0, .28), transparent);
  border-bottom: 3px solid var(--red);
}

.brand { display: flex; align-items: center; gap: 14px; }

.brand-logo {
  height: 64px;
  width: auto;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .6));
  transform: rotate(-4deg);
}

.brand-text h1 {
  font-family: "Lilita One", cursive;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  letter-spacing: 2px;
  color: var(--orange-hot);
  text-shadow: 3px 3px 0 var(--red), 6px 6px 0 rgba(0, 0, 0, .45);
}
.brand-text h1 span { color: var(--cream); }

.tagline {
  font-size: .85rem;
  font-style: italic;
  color: var(--cream-dim);
}

.topbar-actions { display: flex; gap: 8px; }

.icon-btn {
  font-size: 1.2rem;
  background: var(--bg-panel-2);
  border: 2px solid var(--orange);
  border-radius: 12px;
  width: 44px;
  height: 44px;
  cursor: pointer;
  transition: transform .12s, background .12s;
}
.icon-btn:hover { transform: scale(1.1); background: var(--bg-card); }

/* ---- layout ---- */
.layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 300px 1fr 340px;
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 16px 60px;
  align-items: start;
}

.panel {
  min-width: 0;
  background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel));
  border: 2px solid #5a2d13;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.panel-right { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }

.panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Lilita One", cursive;
  font-size: 1.05rem;
  letter-spacing: 1px;
  color: var(--orange);
  margin-bottom: 10px;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .5);
}

.ico {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5));
}

.hint { font-size: .78rem; color: var(--cream-dim); margin-bottom: 10px; }

/* ---- stats ---- */
.stats-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.stats-list li {
  display: flex;
  justify-content: space-between;
  font-size: .85rem;
  padding: 6px 10px;
  background: rgba(0, 0, 0, .22);
  border-radius: 8px;
}
.stats-list b { color: var(--orange-hot); font-variant-numeric: tabular-nums; }

/* ---- cartes Maël ---- */
.faces-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.face-card {
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  border: 2px solid #5a2d13;
  background: rgba(0, 0, 0, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform .15s;
}
.face-card:hover { transform: scale(1.06) rotate(-2deg); }
.face-card img { width: 90%; height: 90%; object-fit: contain; }
.face-card.locked img { filter: brightness(0) opacity(.55); }
.face-card.locked::after {
  content: "?";
  position: absolute;
  font-family: "Lilita One", cursive;
  font-size: 1.6rem;
  color: var(--orange);
}
.face-card.unlocked { border-color: var(--gold); box-shadow: 0 0 10px rgba(255, 208, 66, .35); }
.face-card .face-name {
  position: absolute;
  bottom: 0;
  width: 100%;
  font-size: .55rem;
  text-align: center;
  background: rgba(0, 0, 0, .65);
  padding: 2px 0;
}

/* ---- classement ---- */
.lb-join { display: flex; gap: 8px; margin-bottom: 10px; }
#lb-pseudo {
  flex: 1;
  min-width: 0;
  background: rgba(0, 0, 0, .3);
  border: 2px solid #5a2d13;
  border-radius: 10px;
  color: var(--cream);
  font-family: inherit;
  font-size: .85rem;
  padding: 8px 10px;
  outline: none;
}
#lb-pseudo:focus { border-color: var(--orange); }
#lb-pseudo::placeholder { color: var(--cream-dim); opacity: .6; }
.lb-btn {
  font-family: "Lilita One", cursive;
  font-size: .85rem;
  letter-spacing: .5px;
  background: var(--red);
  color: var(--cream);
  border: 2px solid var(--orange);
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.lb-btn:hover { transform: scale(1.05); box-shadow: 0 0 10px rgba(214, 35, 0, .5); }
.lb-btn:active { transform: scale(.95); }

.lb-list { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.lb-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .22);
  font-size: .82rem;
}
.lb-list li.me { border-left: 3px solid var(--gold); background: rgba(255, 208, 66, .08); }
.lb-list li:first-child:not(.hint) { background: rgba(255, 208, 66, .14); }
.lb-rank {
  font-family: "Lilita One", cursive;
  color: var(--orange);
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.lb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.lb-list b { color: var(--orange-hot); font-variant-numeric: tabular-nums; }
.lb-list .hint { display: block; }

/* ---- succès ---- */
.achievements-list { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.achievement {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .22);
  font-size: .78rem;
  opacity: .45;
}
.achievement.done { opacity: 1; background: rgba(125, 219, 79, .12); border-left: 3px solid var(--green); }
.achievement .a-icon { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.achievement:not(.done) .a-icon { opacity: .55; }
.achievement .a-name { font-weight: 800; }
.achievement .a-desc { color: var(--cream-dim); font-size: .72rem; }

/* ---- zone centrale ---- */
.clicker-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
  min-width: 0;
}

.counter { text-align: center; }

.burger-count {
  font-family: "Lilita One", cursive;
  font-size: clamp(2.4rem, 6vw, 4rem);
  color: var(--cream);
  text-shadow: 0 4px 0 var(--red), 0 8px 18px rgba(0, 0, 0, .6);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.burger-label {
  font-family: "Lilita One", cursive;
  letter-spacing: 6px;
  color: var(--orange);
  font-size: 1rem;
  margin-top: 4px;
}

.wps-line { color: var(--cream-dim); font-size: .95rem; margin-top: 4px; }

/* ---- buffs ---- */
.buffs-bar { display: flex; gap: 8px; min-height: 34px; flex-wrap: wrap; justify-content: center; }
.buff {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, var(--gold), #d9a520);
  color: #4a2410;
  font-weight: 800;
  font-size: .8rem;
  border-radius: 999px;
  padding: 5px 12px;
  box-shadow: 0 0 14px rgba(255, 208, 66, .5);
  animation: buff-pulse 1s ease-in-out infinite alternate;
}
@keyframes buff-pulse { to { box-shadow: 0 0 24px rgba(255, 208, 66, .85); } }

/* ---- la tête ---- */
.mael-stage {
  position: relative;
  width: min(46vh, 420px, 80vw);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flame-ring {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, transparent 62%, rgba(255, 135, 50, .28) 74%, rgba(214, 35, 0, .5) 86%, transparent 100%);
  animation: ring-spin 9s linear infinite, ring-breathe 2.6s ease-in-out infinite alternate;
  filter: blur(1px);
}
@keyframes ring-spin { to { transform: rotate(360deg); } }
@keyframes ring-breathe { from { opacity: .55; } to { opacity: 1; } }

#mael-head {
  position: relative;
  z-index: 1;
  width: 78%;
  height: 78%;
  object-fit: contain;
  cursor: pointer;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .65));
  animation: idle-bob 3.2s ease-in-out infinite;
  transition: transform .07s;
  -webkit-tap-highlight-color: transparent;
}
#mael-head:hover { transform: scale(1.04); }
#mael-head.clicked { animation: none; transform: scale(.9) rotate(-3deg); }
@keyframes idle-bob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-14px) rotate(1.5deg); }
}

.click-hint { color: var(--cream-dim); font-size: .85rem; font-style: italic; }

/* ---- boutique ---- */
.shop-tabs { display: flex; gap: 8px; margin-bottom: 4px; }
.tab {
  flex: 1;
  font-family: "Lilita One", cursive;
  font-size: .9rem;
  letter-spacing: .5px;
  padding: 10px 6px;
  border-radius: 10px;
  border: 2px solid #5a2d13;
  background: var(--bg-panel);
  color: var(--cream-dim);
  cursor: pointer;
  transition: all .15s;
}
.tab.active {
  background: var(--red);
  color: var(--cream);
  border-color: var(--orange);
  box-shadow: 0 0 12px rgba(214, 35, 0, .5);
}

.shop-list { display: flex; flex-direction: column; gap: 8px; }
.shop-list.hidden { display: none; }

.shop-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 2px solid #5a2d13;
  background: var(--bg-card);
  cursor: pointer;
  text-align: left;
  width: 100%;
  color: var(--cream);
  font-family: inherit;
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.shop-item:hover:not(:disabled) {
  transform: translateX(4px);
  border-color: var(--orange);
  box-shadow: 0 0 12px rgba(255, 135, 50, .25);
}
.shop-item:disabled { opacity: .5; cursor: not-allowed; filter: saturate(.4); }
.shop-item.locked { opacity: .45; filter: saturate(.25); }
.shop-item .s-lock {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  color: var(--cream-dim);
  margin-top: 2px;
}
.shop-item .s-lock img { width: 13px; height: 13px; object-fit: contain; }
.shop-item:active:not(:disabled) { transform: scale(.97); }

.shop-item .s-icon { font-size: 1.9rem; width: 44px; text-align: center; flex-shrink: 0; }
.shop-item .s-body { flex: 1; min-width: 0; }
.shop-item .s-name { font-weight: 800; font-size: .9rem; }
.shop-item .s-name small { color: var(--orange-hot); font-weight: 800; }
.shop-item .s-desc { font-size: .72rem; color: var(--cream-dim); font-style: italic; }
.shop-item .s-meta { font-size: .74rem; color: var(--green); }
.shop-item .s-cost {
  font-family: "Lilita One", cursive;
  color: var(--gold);
  font-size: .9rem;
  white-space: nowrap;
}
.shop-item.cant .s-cost { color: var(--red); }
.shop-item .s-count {
  font-family: "Lilita One", cursive;
  font-size: 1.4rem;
  color: rgba(245, 235, 220, .28);
  flex-shrink: 0;
}

/* ---- whopper doré ---- */
.golden-whopper {
  position: fixed;
  z-index: 50;
  font-size: 3.2rem;
  cursor: pointer;
  filter: drop-shadow(0 0 14px var(--gold));
  animation: golden-float 3.5s ease-in-out infinite alternate, golden-glow 1s ease-in-out infinite alternate;
  transition: transform .1s;
}
.golden-whopper:hover { transform: scale(1.25); }
@keyframes golden-float { from { margin-top: 0; } to { margin-top: -30px; } }
@keyframes golden-glow {
  from { filter: drop-shadow(0 0 8px var(--gold)); }
  to { filter: drop-shadow(0 0 26px var(--orange-hot)); }
}

/* ---- consommables : bière, mango, sah ---- */
.golden-whopper img { display: block; height: 64px; width: auto; }
.drop-biere { filter: drop-shadow(0 0 16px var(--orange-hot)); }
.drop-mango { filter: drop-shadow(0 0 16px #7ddb4f); }
.drop-mango img { height: 84px; }
.drop-sah {
  filter: drop-shadow(0 0 18px #3fae3f) hue-rotate(90deg);
  animation: sah-drift 1.2s ease-in-out infinite alternate, golden-glow 1s ease-in-out infinite alternate;
}
.drop-sah img { height: 70px; display: inline-block; vertical-align: middle; }

.buff img { height: 16px; width: auto; vertical-align: -3px; }

.shop-item .s-icon img { width: 36px; height: 36px; object-fit: contain; vertical-align: middle; }
.shop-item .s-icon img.inv { filter: invert(1); width: 28px; }
@keyframes sah-drift {
  from { transform: rotate(-14deg); }
  to { transform: rotate(14deg) translateY(-16px); }
}

.screen-flash {
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  animation: flash-out .5s ease-out forwards;
}
@keyframes flash-out { from { opacity: 1; } to { opacity: 0; } }

body.shake { animation: body-shake .35s ease-in-out; }
@keyframes body-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-8px, 4px); }
  40% { transform: translate(7px, -5px); }
  60% { transform: translate(-5px, -3px); }
  80% { transform: translate(4px, 5px); }
}

body.sah-mode::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 44;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 110%, rgba(60, 160, 60, .35), transparent 65%),
              radial-gradient(ellipse at 50% -10%, rgba(60, 160, 60, .25), transparent 60%);
  animation: sah-breathe 3s ease-in-out infinite alternate;
}
@keyframes sah-breathe { from { opacity: .6; } to { opacity: 1; } }

#mael-head.dizzy {
  animation: dizzy-spin 2.4s ease-in-out infinite;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .65)) saturate(.6) hue-rotate(25deg);
}
@keyframes dizzy-spin {
  0%, 100% { transform: rotate(-9deg) translateY(0); }
  25% { transform: rotate(6deg) translateY(-10px) scale(.97); }
  50% { transform: rotate(-5deg) translateY(4px) scale(1.02); }
  75% { transform: rotate(9deg) translateY(-6px) scale(.98); }
}

/* ---- effets flottants ---- */
#fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }

.float-num {
  position: absolute;
  font-family: "Lilita One", cursive;
  font-size: 1.5rem;
  color: var(--orange-hot);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .6);
  animation: float-up 1.1s ease-out forwards;
  white-space: nowrap;
}
.float-num.crit { color: var(--gold); font-size: 2.2rem; }
@keyframes float-up {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-110px) scale(1.25); }
}

.particle {
  position: absolute;
  font-size: 1.4rem;
  animation: particle-fall 1.4s ease-in forwards;
}
@keyframes particle-fall {
  from { opacity: 1; transform: translateY(0) rotate(0); }
  to { opacity: 0; transform: translateY(160px) rotate(340deg); }
}

/* ---- toasts ---- */
#toast-zone {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  width: min(92vw, 460px);
}
.toast {
  background: linear-gradient(180deg, var(--bg-card), var(--bg-panel));
  border: 2px solid var(--orange);
  border-radius: 12px;
  padding: 10px 18px;
  box-shadow: var(--shadow);
  font-size: .85rem;
  text-align: center;
  animation: toast-in .3s ease-out, toast-out .4s ease-in 3.6s forwards;
  max-width: 100%;
}
.toast b { color: var(--orange-hot); }
.toast.gold { border-color: var(--gold); box-shadow: 0 0 18px rgba(255, 208, 66, .4); }
@keyframes toast-in { from { opacity: 0; transform: translateY(20px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(20px); } }

/* ---- révélation de carte ---- */
#card-reveal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 4, 1, .88);
  cursor: pointer;
  animation: cr-fade .25s ease-out;
  overflow: hidden;
}
#card-reveal.show { display: flex; }
@keyframes cr-fade { from { opacity: 0; } }

.cr-rays {
  position: absolute;
  inset: -50%;
  background: conic-gradient(
    from 0deg,
    rgba(255, 208, 66, .16) 0deg 12deg, transparent 12deg 30deg,
    rgba(255, 208, 66, .16) 30deg 42deg, transparent 42deg 60deg,
    rgba(255, 208, 66, .16) 60deg 72deg, transparent 72deg 90deg,
    rgba(255, 208, 66, .16) 90deg 102deg, transparent 102deg 120deg,
    rgba(255, 208, 66, .16) 120deg 132deg, transparent 132deg 150deg,
    rgba(255, 208, 66, .16) 150deg 162deg, transparent 162deg 180deg,
    rgba(255, 208, 66, .16) 180deg 192deg, transparent 192deg 210deg,
    rgba(255, 208, 66, .16) 210deg 222deg, transparent 222deg 240deg,
    rgba(255, 208, 66, .16) 240deg 252deg, transparent 252deg 270deg,
    rgba(255, 208, 66, .16) 270deg 282deg, transparent 282deg 300deg,
    rgba(255, 208, 66, .16) 300deg 312deg, transparent 312deg 330deg,
    rgba(255, 208, 66, .16) 330deg 342deg, transparent 342deg 360deg
  );
  animation: rays-spin 14s linear infinite;
}
@keyframes rays-spin { to { transform: rotate(360deg); } }

.cr-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  padding: 20px;
}

.cr-title {
  font-family: "Lilita One", cursive;
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  letter-spacing: 4px;
  color: var(--gold);
  text-shadow: 3px 3px 0 var(--red), 0 0 30px rgba(255, 208, 66, .6);
  animation: cr-title-pop .5s cubic-bezier(.2, 2.2, .4, 1);
}
@keyframes cr-title-pop { from { transform: scale(0); } }

.cr-card {
  width: min(46vw, 240px);
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  border: 3px solid var(--gold);
  background: linear-gradient(160deg, #5a2d13, var(--bg-card));
  box-shadow: 0 0 40px rgba(255, 208, 66, .55), 0 20px 50px rgba(0, 0, 0, .6);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: cr-flip 1s cubic-bezier(.2, 1.6, .35, 1);
}
.cr-card img { width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .6)); }
@keyframes cr-flip {
  0% { transform: rotateY(540deg) scale(.2); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: rotateY(0) scale(1); }
}

.cr-name {
  font-family: "Lilita One", cursive;
  font-size: 1.5rem;
  color: var(--cream);
  text-shadow: 2px 2px 0 var(--red);
}

.cr-close { font-size: .8rem; color: var(--cream-dim); font-style: italic; animation: buff-pulse 1.2s ease-in-out infinite alternate; }

/* ---- footer ---- */
.footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 18px 16px 26px;
  color: var(--cream-dim);
  font-size: .78rem;
  border-top: 2px solid #3a1d0e;
}

/* ---- scrollbars ---- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #5a2d13; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--orange); }

/* ---- responsive ---- */
@media (max-width: 1080px) {
  .layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .clicker-zone { grid-column: 1 / -1; grid-row: 1; }
  .panel-right { position: static; max-height: none; }
}
@media (max-width: 640px) {
  body { overflow-x: hidden; }
  .layout { grid-template-columns: minmax(0, 1fr); padding: 14px 12px 40px; }
  .topbar { padding: 10px 14px; }
  .brand-logo { height: 48px; }
  .mael-stage { width: min(76vw, 340px); }
  .burger-count { font-size: 2.6rem; }
}