:root {
  --bg: #0f1115;
  --panel: #171a21;
  --line: #2a2f3a;
  --text: #e8eaf0;
  --dim: #9aa3b2;
  --accent: #7c5cff;
  --up: #4ade80;
  --down: #f97316;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, sans-serif;
  min-height: 100vh;
}

main { max-width: 1100px; margin: 0 auto; padding: 24px 16px 48px; }

header { text-align: center; }
header h1 { font-size: 22px; letter-spacing: 0.5px; }
header h1 small { color: var(--dim); font-size: 12px; font-weight: 400; margin-left: 6px; }

.top {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 16px;
  margin-top: 20px;
}
@media (max-width: 900px) { .top { grid-template-columns: 1fr; } }

.stage-col { display: flex; flex-direction: column; gap: 6px; position: relative; }

#mob-sprite {
  position: absolute; top: calc(32vh + 30px); left: 50%; z-index: 6;
  height: 16vh; object-fit: contain;
  transform: translate(-50%, -50%);
  transition: transform .08s linear, opacity .15s;
  pointer-events: none;
}
#mob-sprite.hidden { display: none; }

#mob-stage {
  position: relative; height: 32vh;
  background: #0a0c10; border: 1px solid var(--line); border-radius: 12px;
  display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
}
.hidden { display: none !important; }
#mob-stage.hidden { display: none; }
#mob-img { max-height: 90%; max-width: 90%; object-fit: contain; }
#mob-img, #mob-emoji { transition: transform .08s linear; }
#mob-emoji { font-size: 26vh; line-height: 1; display: none; }
#mob-stage.no-img #mob-img { display: none; }
#mob-stage.no-img #mob-emoji { display: block; }
#mob-stage.dodging #mob-img, #mob-stage.dodging #mob-emoji { opacity: .35; }
#mob-gift {
  display: none; font-size: 12vh; line-height: 1;
  animation: gift-pulse 1s ease-in-out infinite;
}
#mob-stage.gift { align-items: center; }
#mob-stage.gift #mob-gift { display: block; margin-top: 8vh; }
#mob-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#mob-stage.gift #mob-img, #mob-stage.gift #mob-emoji, #mob-stage.gift .mob-hp { display: none; }
#mob-stage.empty #mob-img, #mob-stage.empty #mob-emoji,
#mob-stage.empty .mob-hp,
#mob-stage.empty #mob-gift { display: none; }

#mob-dmg {
  position: absolute; left: 50%; top: 40%;
  transform: translate(-50%, -50%);
  font-size: 5vh; font-weight: 800; color: #fff;
  -webkit-text-stroke: 2px #000;
  paint-order: stroke fill;
  opacity: 0; pointer-events: none;
}
#mob-dmg.pop { animation: dmg-pop .7s ease-out forwards; }
#mob-pts {
  position: absolute; left: 50%; top: 55%;
  transform: translate(-50%, -50%);
  font-size: 3.5vh; font-weight: 800; color: #4ade80;
  -webkit-text-stroke: 1.5px #000;
  paint-order: stroke fill;
  opacity: 0; pointer-events: none;
}
#mob-pts.pop { animation: dmg-pop .7s ease-out forwards; }
@keyframes dmg-pop {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.6); }
  30% { transform: translate(-50%, -70%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -130%) scale(1); }
}
.mob-hp {
  position: absolute; top: 22px; left: 12px; right: 12px; height: 12px;
  background: #1a1d26; border: 1px solid #333a4a; border-radius: 999px;
}
.mob-hp i { display: block; height: 100%; background: #ef4444; border-radius: 999px; }
.mob-hp span {
  position: absolute; inset: 0; font-size: 13px; font-weight: 800; line-height: 12px;
  color: #fff; text-align: center;
  -webkit-text-stroke: 1.5px #000;
  paint-order: stroke fill;
}

.php-hp {
  position: absolute; bottom: 12px; left: 12px; right: 12px; height: 12px;
  background: #1a1d26; border: 1px solid #333a4a; border-radius: 999px;
}
.php-hp.hidden { display: none; }
.php-hp i { display: block; height: 100%; background: #22c55e; border-radius: 999px; transition: width .2s; }
.php-hp span {
  position: absolute; inset: 0; text-align: center; font-size: 13px; font-weight: 800; line-height: 12px;
  color: #fff; -webkit-text-stroke: 1.5px #000; paint-order: stroke fill;
}

#gameover {
  position: absolute; inset: 0; z-index: 20;
  background: rgba(5, 6, 9, 0.85);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
}
#gameover.hidden { display: none; }
#gameover h2 { color: #ef4444; letter-spacing: 4px; font-size: 32px; }

.side {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 200px;
}

.stage {
  position: relative;
  background: #0a0c10;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

#cam, #overlay, #fx {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}
#fx { pointer-events: none; }

#cam { display: none; }

.stage { cursor: pointer; }
.stage.cam #cam { display: block; }
.stage.cam #overlay { display: none; }

#arena { display: flex; flex-direction: column; position: relative; }
body.aventure #arena { border-radius: 12px; overflow: hidden; }
/* aventure : mob-stage + stage fusionnés en une seule arène */
body.aventure .stage-col { gap: 0; }
body.aventure #mob-stage { border-bottom: none; border-radius: 12px 12px 0 0; }
body.aventure .stage { border-top: none; border-radius: 0 0 12px 12px; }
body.aventure .php-hp { z-index: 5; }
/* le fond d'arène aléatoire est posé sur #arena : les deux zones deviennent
   transparentes pour laisser l'image traverser toute l'arène */
body.aventure:not(.nobg) #mob-stage, body.aventure:not(.nobg) .stage { background: transparent; }

.hud {
  position: absolute; left: 16px; bottom: 16px;
  display: flex; align-items: flex-end; gap: 12px;
}

.rep-big {
  background: rgba(15, 17, 21, 0.75);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 18px;
  display: flex; align-items: baseline; gap: 8px;
}

#count { font-size: 48px; font-weight: 700; font-variant-numeric: tabular-nums; }
#count.pop { animation: pop 0.25s ease; }
@keyframes pop { 50% { transform: scale(1.25); color: var(--accent); } }
.rep-big .l { color: var(--dim); font-size: 13px; }

.phase-tag {
  background: rgba(15, 17, 21, 0.75);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--dim);
}
.phase-tag[data-phase="1"] { color: var(--down); border-color: var(--down); }
.phase-tag[data-phase="0"] { color: var(--up); border-color: var(--up); }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  margin-top: 16px;
  display: flex; flex-direction: column; gap: 18px;
}

.block h2 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--dim); margin-bottom: 8px;
}

.segmented { display: flex; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.segmented button {
  flex: 1; padding: 8px 4px; background: none; border: none;
  color: var(--dim); font-size: 13px; cursor: pointer;
}
.segmented button.on { background: var(--accent); color: #fff; }
.segmented button:not(.on):hover { color: var(--text); }

.note { color: var(--dim); font-size: 12px; margin-top: 8px; line-height: 1.4; }

.meter-ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--dim); margin-bottom: 4px; }
.meter { position: relative; height: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; }
.meter i {
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
  transition: left 0.08s linear;
}

.strip { position: relative; height: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.strip i { position: absolute; top: 0; bottom: 0; background: var(--up); }
.strip i[data-phase="1"] { background: var(--down); }

.row { display: flex; gap: 8px; }
.btn {
  padding: 9px 16px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg); color: var(--text); font-size: 13px; cursor: pointer;
}
.btn:hover { border-color: var(--accent); }
.btn.accent { background: var(--accent); border-color: var(--accent); }
.btn.accent:hover { filter: brightness(1.1); }
.btn.danger { color: #f87171; }
.btn.danger:hover { border-color: #f87171; }

#quote {
  text-align: center;
  font-size: 16px;
  color: var(--text);
  min-height: 3em;
  font-style: italic;
  line-height: 1.45;
}
#quote.pop { animation: pop 0.4s ease; }

#progress {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
}

#sens-wrap { margin-top: 6px; }
#sens-wrap input { width: 100%; margin-top: 4px; }

/* polaroid */
.polaroid {
  background: #f8f6f0;
  padding: 10px 10px 44px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  transform: rotate(-2.5deg);
  position: relative;
}
.polaroid img { display: block; width: 100%; aspect-ratio: 3/5; object-fit: cover; background: #111; }
.polaroid .cap {
  position: absolute; left: 0; right: 0; bottom: 6px;
  text-align: center; color: #333; font-size: 13px;
  white-space: pre-line; line-height: 1.25;
  font-family: "Comic Sans MS", "Segoe Print", cursive;
}
#polaroid-slot { display: none; width: 170px; }
body.waifu #polaroid-slot { display: block; }
body.waifu #quote { display: none; }

#polaroid-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 6, 9, 0.85);
}
#polaroid-overlay.hidden { display: none; }
#polaroid-overlay .polaroid.big { width: min(48vh, 80vw); }
#polaroid-overlay .nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--panel); color: var(--fg); border: 1px solid var(--line);
  font-size: 24px; cursor: pointer; z-index: 1;
}
#polaroid-overlay .nav:hover { border-color: var(--accent); }
#polaroid-overlay .nav.prev { left: 24px; }
#polaroid-overlay .nav.next { right: 24px; }

#gen {
  width: 170px; height: 8px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 999px; overflow: hidden;
}
#gen i {
  display: block; height: 100%; width: 0;
  background: var(--accent);
  transition: width 0.3s ease;
}

.dayrow {
  display: flex; align-items: center; gap: 10px; margin-top: 6px;
}
.dayrow #day-total { color: var(--dim); font-size: 13px; }

#gift {
  font-size: 56px; text-align: center;
  animation: gift-pulse 1s ease-in-out infinite;
  cursor: default; user-select: none;
}
@keyframes gift-pulse {
  0%, 100% { transform: scale(1) rotate(-4deg); }
  50% { transform: scale(1.15) rotate(4deg); }
}

/* écran de login Supabase, au-dessus du mode-picker */
#login-screen {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
}
#login-screen.hidden { display: none; }
#login-screen .pick { text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
#login-mail {
  padding: 10px 14px; width: 260px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
}
#login-screen .btn { width: 260px; }

/* topbar utilisateur (avatar + logout), visible une fois connecté */
#userbar {
  position: fixed; top: 14px; right: 16px; z-index: 110;
  display: flex; align-items: center; gap: 8px;
}
#userbar.hidden { display: none; }
#user-ico {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; cursor: default;
}
#logout-btn {
  padding: 6px 12px; font-size: 12px; cursor: pointer;
  background: var(--panel); color: var(--dim);
  border: 1px solid var(--line); border-radius: 999px;
}
#logout-btn:hover { color: var(--text); border-color: var(--text); }

/* bouton cadeau : ouvre la boutique (bandeau rouge) */
#shop-btn {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--line);
  font-size: 15px; line-height: 1; cursor: pointer;
}
#shop-btn:hover { border-color: #dc2626; }
#shop-btn.hidden { display: none; }

/* modale boutique : preview du bandeau à gauche, achat à droite */
#shop-modal {
  position: fixed; inset: 0; z-index: 150;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 6, 9, 0.85);
}
#shop-modal.hidden { display: none; }
.shop-card {
  display: flex; align-items: center; gap: 24px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 28px; position: relative;
}
#shop-close {
  position: absolute; top: 6px; right: 12px;
  background: none; border: none; color: var(--dim);
  font-size: 22px; cursor: pointer;
}
#shop-close:hover { color: var(--text); }
#shop-preview { width: 220px; height: 220px; }
.shop-info {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 220px;
}
.shop-info h3 { font-size: 16px; }
.shop-info .note { margin-top: 0; }
.shop-info .btn { align-self: flex-start; }

/* écran de choix du mode au lancement */
#mode-picker {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
}
#mode-picker.hidden { display: none; }
#mode-picker .pick { text-align: center; }
#mode-picker h2 { font-size: 26px; margin-bottom: 4px; }
#mode-picker .note { color: var(--dim); margin-bottom: 20px; }
#lang-switch {
  position: absolute; top: 18px; left: 22px; display: flex; gap: 6px;
}
#lang-switch button {
  padding: 4px 10px; font-size: 11px; cursor: pointer;
  background: transparent; color: var(--dim);
  border: 1px solid var(--line); border-radius: 999px;
}
#lang-switch button.on { color: var(--text); border-color: var(--text); }
#mode-picker .credit { margin-top: 26px; font-size: 11px; color: var(--dim); opacity: .6; }
.credit a { color: inherit; text-decoration: none; }
.credit a:hover { text-decoration: underline; }
footer { text-align: center; padding: 10px 0 24px; }
footer .credit { font-size: 11px; color: var(--dim); opacity: .6; }
#mode-btns { display: flex; gap: 12px; justify-content: center; }
#mode-btns button {
  padding: 14px 28px; font-size: 16px;
  background: var(--panel); color: var(--fg);
  border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer; transition: border-color .15s, transform .15s;
}
#mode-btns button:hover { border-color: var(--accent); transform: translateY(-2px); }
#mode-btns button:disabled { opacity: 0.35; cursor: not-allowed; }
#mode-btns button:disabled:hover { border-color: var(--line); transform: none; }

/* calendriers type GitHub : 7 lignes (lun→dim), colonnes = semaines */
.cal { width: 100%; }
.cal h3 {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--dim); margin-bottom: 8px;
}
.cal-grid {
  display: grid; grid-auto-flow: column;
  grid-template-rows: repeat(7, 16px); grid-auto-columns: 16px;
  gap: 3px;
}
.cal-grid i {
  border-radius: 3px; background: #1c1f28;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-style: normal; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cal-grid i[data-l="1"] { background: #0e4429; color: #7ee2a8; }
.cal-grid i[data-l="2"] { background: #006d32; color: #b7f4cd; }
.cal-grid i[data-l="3"] { background: #26a641; color: #052e12; }
.cal-grid i[data-l="4"] { background: #39d353; color: #052e12; }

/* mode citation : tout en bas, pleine largeur */
#cal-quote {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px; margin-top: 16px;
  overflow-x: auto;
}
#cal-quote .cal-grid { justify-content: center; min-width: max-content; }

/* mode aventure : en haut de la colonne de droite */
#cal-adv { align-self: stretch; }
body.aventure .side { justify-content: flex-start; }

.hidden { display: none; }