/* Bârma /jeux/ - shared brand tokens + components. One file, no build step. */

:root{
  --pine:#1E2F2A;
  --pine-soft:#2A3F38;
  --cream:#F5F2EC;
  --gold:#996830;
  --gold-soft:#B98A4E;
  --sand:#EDE0C9;
  --ink:#1C1C1C;
  --white:#FFFFFF;
}

@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/montserrat-400.woff2') format('woff2');
}
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/montserrat-500.woff2') format('woff2');
}
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/montserrat-600.woff2') format('woff2');
}
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/montserrat-700.woff2') format('woff2');
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:'Montserrat',-apple-system,sans-serif;
  min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;
  padding:16px 14px 28px;overflow-x:hidden;
}

/* ---- Theme variants: pick one per game so the suite doesn't read as monotonous ---- */
body.theme-pine{background:var(--pine);color:var(--cream);}
body.theme-cream{background:var(--cream);color:var(--ink);}
body.theme-gold{background:var(--sand);color:var(--pine);}

.bear-svg{fill:currentColor;display:block;}

/* ---- Back-to-landing link (every game page) ---- */
.back-link{
  position:fixed;top:calc(14px + env(safe-area-inset-top));left:calc(14px + env(safe-area-inset-left));
  z-index:5;display:inline-flex;align-items:center;gap:5px;
  font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:inherit;text-decoration:none;opacity:.6;
  padding:8px 12px;border-radius:20px;background:rgba(0,0,0,.08);
  transition:opacity .2s;
}
.back-link:active{opacity:1;}

/* ---- Logo link (mascot + wordmark) - returns to the main hotel site ---- */
.logo-link{display:contents;text-decoration:none;color:inherit;}

/* ---- Header ---- */
header{width:100%;max-width:460px;text-align:center;margin-bottom:14px;}
.mascot{width:56px;height:auto;margin:0 auto 8px;}
.brand{font-weight:700;letter-spacing:.32em;font-size:14px;text-transform:uppercase;}
.tagline{font-size:9px;letter-spacing:.42em;text-transform:uppercase;opacity:.55;margin-top:4px;}
header h1{font-weight:400;font-size:19px;letter-spacing:.02em;margin-top:14px;}
header h1 em{font-style:italic;color:var(--gold-soft);}

/* ---- Stat / HUD tiles ---- */
.hud{width:100%;max-width:460px;display:flex;justify-content:center;gap:10px;margin:14px 0 16px;}
.stat{flex:1;border-radius:12px;padding:10px 6px;text-align:center;border:1px solid rgba(185,138,78,.22);}
body.theme-pine .stat{background:var(--pine-soft);}
body.theme-cream .stat{background:var(--white);}
body.theme-gold .stat{background:rgba(153,104,48,.12);}
.stat .label{font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;opacity:.6;}
.stat .val{font-size:22px;font-weight:600;margin-top:2px;}

/* ---- Buttons ---- */
.btn{
  font-family:inherit;font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:inherit;background:transparent;border:1.5px solid var(--gold-soft);
  padding:13px 30px;border-radius:2px;cursor:pointer;transition:.2s;
}
.btn:active{background:var(--gold-soft);color:var(--pine);}

/* ---- Overlay (start / win screens) ---- */
.overlay{
  position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:30px;opacity:0;pointer-events:none;transition:.4s;z-index:10;
}
.overlay.show{opacity:1;pointer-events:auto;}
body.theme-pine .overlay{background:rgba(30,47,42,.96);}
body.theme-cream .overlay{background:rgba(245,242,236,.97);}
body.theme-gold .overlay{background:rgba(153,104,48,.96);color:var(--cream);}
.overlay .big{width:96px;margin-bottom:16px;animation:bob 1.6s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
.overlay h2{font-weight:400;font-size:24px;margin-bottom:8px;}
.overlay h2 em{font-style:italic;color:var(--gold-soft);}
body.theme-gold .overlay h2 em{color:var(--white);}
.overlay p{font-size:13px;opacity:.8;line-height:1.7;margin-bottom:24px;max-width:300px;}
.overlay p b{opacity:1;}

/* Overlay variant anchored inside a relatively-positioned game area (not full viewport) */
.overlay.overlay--inline{position:absolute;}