/* ==========================================================================
   Mini-jeu plein écran — habillage « La Hotte de Ruman »
   ========================================================================== */
html.game-open, html.game-open body { overflow: hidden; }

.game {
  position: fixed; inset: 0; z-index: 400;
  width: 100vw; height: 100vh; height: 100dvh;
  background: #0a1650;
  overscroll-behavior: contain;
  touch-action: none;
  user-select: none; -webkit-user-select: none;
}
.game__canvas { position: absolute; inset: 0; display: block; cursor: none; touch-action: none; }
.game__canvas:focus { outline: none; }

/* ---- Barre d'informations ------------------------------------------------- */
.game__hud {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  pointer-events: none;
}
.game__hud > * { pointer-events: auto; }
.hud-spacer { flex: 1; pointer-events: none !important; }
.hud-pill, .hud-btn {
  height: 46px; border-radius: 999px;
  background: var(--nav-bg); border: 1px solid var(--nav-border);
  box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hud-pill { display: flex; align-items: baseline; gap: 8px; padding: 0 16px; line-height: 46px; font-size: 15px; color: #c9d4ff; }
.hud-pill b { font-size: 22px; color: var(--gold-300); font-weight: 700; font-variant-numeric: tabular-nums; }
.hud-pill--lives { align-items: center; gap: 4px; padding: 0 12px; }
.heart { width: 24px; height: 24px; fill: #ff4d5a; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); transition: transform .3s, fill .3s; }
.heart.is-lost { fill: rgba(255,255,255,.18); transform: scale(.85); }
.hud-btn { width: 46px; display: grid; place-items: center; color: #fff; }
.hud-btn svg { width: 22px; height: 22px; }
.hud-btn:hover { background: rgba(30,45,110,.85); }

/* ---- Écrans (début, pause, fin) ------------------------------------------ */
.game__screen {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center; padding: 76px 16px 24px;
  background: radial-gradient(ellipse at center, rgba(6,10,40,.35), rgba(6,10,40,.75));
}
.game__card {
  width: min(520px, 100%);
  max-height: 100%; overflow: auto;
  padding: 30px 26px 24px; text-align: center;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,0) 30%), linear-gradient(180deg, #5b2e16, #3a1b0b);
  border: 3px solid #b8783a;
  box-shadow: inset 0 0 0 2px #2a1206, 0 30px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(255,215,121,.15);
  position: relative;
}
/* Neige sur le panneau */
.game__card::before {
  content: ""; position: absolute; left: -6px; right: -6px; top: -14px; height: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M2 17C2 6 10 2 20 2h60c10 0 18 4 18 15v2c-2 5-6 5-8 1-3 7-8 6-10 1-3 4-7 4-9 0-3 6-9 6-11 0-3 3-7 3-9-1-3 6-9 6-11 0-3 4-7 3-9 0-3 6-8 6-10 0-2 4-6 4-8 0v-3z' fill='%23f4f7ff'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.game__kicker { color: var(--gold-300); font-size: 18px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.game__title { font-size: clamp(32px, 7vw, 44px); line-height: 1; font-weight: 700; color: #fff4e0; text-shadow: 0 3px 0 rgba(0,0,0,.35); margin-bottom: 12px; }
.game__text { font-size: 18px; line-height: 1.4; font-weight: 500; color: #fbeedd; margin: 0 0 14px; }
.game__keys { font-size: 15px; font-weight: 500; color: #e2cdb3; margin: 4px 0 0; }
.game__score { font-size: clamp(54px, 13vw, 84px); line-height: 1; font-weight: 700; color: var(--gold-300); text-shadow: 0 4px 0 rgba(0,0,0,.35), 0 0 30px rgba(255,190,60,.45); margin: 4px 0 12px; }
.game__score span { font-size: .32em; color: #fff4e0; }
.game__actions { display: grid; gap: 10px; margin-top: 18px; }
.game__actions .cta { height: 62px; min-height: 0; font-size: 22px; border-width: 3px; animation: none; }
.game__actions .cta__icon { width: 38px; height: 38px; }
.game__actions .btn-secondary { min-height: 48px; }

.game__legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 10px; }
.game__legend li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(0,0,0,.25); font-size: 17px; font-weight: 600; text-align: left; }
.game__legend b { margin-left: auto; color: var(--gold-300); }
.gl { width: 28px; height: 28px; flex: none; background: center / contain no-repeat; }
.gl--gift { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='8' width='18' height='13' rx='2' fill='%23e8262a'/%3E%3Crect x='10.5' y='8' width='3' height='13' fill='%23ffd34d'/%3E%3Crect x='3' y='12' width='18' height='3' fill='%23ffd34d'/%3E%3Cpath d='M12 8c-2-4-6-4-6-1.5S10 8 12 8c2 0 6-.5 6-1.5S14 4 12 8Z' fill='none' stroke='%23ffd34d' stroke-width='1.6'/%3E%3C/svg%3E"); }
.gl--star { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.6 2.8 6 6.5.7-4.9 4.4 1.4 6.4L12 16.8l-5.8 3.3 1.4-6.4L2.7 9.3l6.5-.7Z' fill='%23ffd23a' stroke='%23c98a00'/%3E%3C/svg%3E"); }
.gl--diamond { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9 7 4h10l4 5-9 12Z' fill='%237fe3ff'/%3E%3Cpath d='M7 4l5 5 5-5Z' fill='%23c9f6ff'/%3E%3Cpath d='M12 9h9l-9 12Z' fill='%2339b6e0'/%3E%3C/svg%3E"); }
.gl--coal { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11 7 4l9 1 5 7-3 8H6Z' fill='%232b2b30'/%3E%3Cpath d='M7 4l9 1-4 6Z' fill='%234a4a52'/%3E%3Ccircle cx='14' cy='15' r='2' fill='%23ff5a1e'/%3E%3C/svg%3E"); }

@media (max-width: 560px) {
  .hud-pill--hide-s { display: none; }
  .hud-pill { padding: 0 12px; font-size: 14px; }
  .game__legend { grid-template-columns: 1fr; }
  .game__card { padding: 26px 18px 20px; }
}
@media (max-height: 520px) {
  .game__screen { padding-top: 64px; }
  .game__card { padding: 18px 20px; }
  .game__legend { grid-template-columns: 1fr 1fr; }
  .game__text { font-size: 16px; margin-bottom: 8px; }
}
.game__actions .cta { gap: 14px; }