/* Layout: one-screen game. Fixed-height scoreboard, a course that takes all the remaining space (sized by script), a fixed-height control bar. Result card and scorecard overlay the course. */
:root{
  --bg:#d9ebe6; --panel:#f2faf7; --fg:#12312f; --muted:#456560; --line:#b2cdc6;
  --accent:#d63d26; --on-accent:#ffffff; --good:#1c7a38; --bad:#b3321e;
  --turf:#3d9b50; --turf-2:#46a85a; --hedge:#1f5a2f; --hedge-hi:#2b7340;
  --rail:#8a5530; --rail-hi:#b87d49; --sand:#ecd9a0; --sand-dot:#cdb273;
  --water:#3a8fd9; --water-hi:#8cc6f2; --cup:#16241b; --ball:#ffffff;
  --bumper:#f2b705; --bumper-edge:#9a6a00; --blade:#f6f2e6;
  --font-display:"Arial Rounded MT Bold","Trebuchet MS",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0d1a19; --panel:#15292a; --fg:#e2f0ed; --muted:#8fb1ab; --line:#2b4745;
    --accent:#ff6a4d; --on-accent:#1e0e0a; --good:#6fdc8c; --bad:#ff9a85;
    --turf:#2f7d41; --turf-2:#368a49; --hedge:#17472a; --hedge-hi:#215b36;
    --rail:#7d4d2b; --rail-hi:#a8703e; --sand:#cdb97f; --sand-dot:#a99556;
    --water:#2e72b5; --water-hi:#74b0e2; --cup:#0a120d; --ball:#ffffff;
    --bumper:#eaaa00; --bumper-edge:#7a5300; --blade:#ece7d6;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0d1a19; --panel:#15292a; --fg:#e2f0ed; --muted:#8fb1ab; --line:#2b4745;
  --accent:#ff6a4d; --on-accent:#1e0e0a; --good:#6fdc8c; --bad:#ff9a85;
  --turf:#2f7d41; --turf-2:#368a49; --hedge:#17472a; --hedge-hi:#215b36;
  --rail:#7d4d2b; --rail-hi:#a8703e; --sand:#cdb97f; --sand-dot:#a99556;
  --water:#2e72b5; --water-hi:#74b0e2; --cup:#0a120d; --ball:#ffffff;
  --bumper:#eaaa00; --bumper-edge:#7a5300; --blade:#ece7d6;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{height:100%}
body{
  min-height:100%; display:flex; flex-direction:column; gap:8px; margin:0;
  background:var(--bg); color:var(--fg);
  font-family:var(--font-body); font-size:15px; line-height:1.35;
  overscroll-behavior:none;
  padding-block:8px 12px;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
  -webkit-tap-highlight-color:transparent;
}
.app{
  --cw:100%;
  flex:1 1 auto; width:100%; min-height:546px; max-width:560px; margin-inline:auto;
  display:grid; grid-template-rows:56px minmax(0,1fr) 18px 44px; gap:8px;
}

.hud{
  width:var(--cw); min-width:min(100%,300px); margin-inline:auto;
  display:flex; align-items:flex-end; justify-content:space-between; gap:10px;
}
.who{min-width:0; flex:1}
.eyebrow{display:block; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
button.eyebrow{
  appearance:none; -webkit-appearance:none; background:none; border:0; margin:0; padding:2px 0;
  font-family:inherit; text-align:left; cursor:pointer; max-width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
button.eyebrow::after{content:" ▾"}
button.eyebrow:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:4px}
h1{
  margin:3px 0 0; font-family:var(--font-display); font-weight:400;
  font-size:clamp(22px,6.6vw,30px); line-height:1.05;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.stats{display:flex; gap:6px; margin:0; flex:none}
.stat{min-width:50px; padding:3px 8px 4px; text-align:center; background:var(--panel); border:2px solid var(--line); border-radius:9px}
.stat dt{font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.stat dd{margin:0; font-family:var(--font-display); font-size:22px; line-height:1.1; font-variant-numeric:tabular-nums}

.field{min-height:0; min-width:0; display:grid; place-items:center}
.stage{
  position:relative; width:100%; aspect-ratio:360/560; overflow:hidden;
  border-radius:14px; background:var(--turf);
  box-shadow:0 0 0 3px var(--rail), 0 12px 26px -12px rgba(0,0,0,.5);
}
.stage canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  touch-action:none; -webkit-user-select:none; user-select:none; cursor:crosshair;
}

.toast{
  position:absolute; top:22px; left:50%; transform:translateX(-50%); z-index:3;
  padding:7px 14px; border-radius:999px; background:var(--fg); color:var(--bg);
  font-weight:700; font-size:14px; white-space:nowrap; pointer-events:none;
  animation:pop 1.6s ease-out both;
}
.result{
  position:absolute; left:12px; right:12px; bottom:12px; z-index:3;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; background:var(--panel); border:2px solid var(--line); border-radius:14px;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.5);
  animation:rise .28s ease-out both;
}
.result strong{display:block; font-family:var(--font-display); font-weight:400; font-size:26px; line-height:1.05}
.result span{font-size:13px; color:var(--muted)}
.confirm{flex-direction:column; align-items:stretch; gap:10px}
.confirm strong{font-size:22px}
.confirm .actions{display:flex; gap:8px}
.confirm .actions .btn{flex:1; padding:0 8px}

.card{
  position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; gap:12px;
  padding:20px 16px 16px; overflow:auto; background:var(--panel);
}
.card h2{margin:0; font-family:var(--font-display); font-weight:400; font-size:30px; line-height:1.05}
table{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
th{font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); text-align:right; padding:0 4px 6px}
td{padding:7px 4px; border-top:1px solid var(--line); text-align:right; font-weight:500}
th:first-child, td:first-child{text-align:left}
tfoot td{border-top:2px solid var(--fg); font-weight:700}
td.good{color:var(--good); font-weight:700}
td.bad{color:var(--bad); font-weight:700}
.verdict{margin:0; font-weight:700}
.best{margin:0; font-size:13px; color:var(--muted)}
.actions{display:flex; gap:8px}
.actions .btn{flex:1; padding:0 8px}
.picker{gap:10px}
.courses{display:grid; gap:10px}
.course-btn{
  display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:center; text-align:left;
  font:inherit; color:var(--fg); background:var(--bg); border:2px solid var(--line); border-radius:12px;
  padding:12px; cursor:pointer;
}
.course-btn:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.lvl{display:flex; flex-direction:column-reverse; gap:3px; grid-row:1 / span 3}
.lvl i{width:10px; height:10px; border-radius:50%; background:var(--line)}
.lvl1 i:nth-child(-n+1){background:var(--good)}
.lvl2 i:nth-child(-n+2){background:var(--bumper)}
.lvl3 i{background:var(--accent)}
.lvl4 i{background:#8b7cf6}
.cname{font-family:var(--font-display); font-size:22px; line-height:1.1}
.cinfo{font-size:13px; color:var(--muted)}

.hint{
  width:var(--cw); min-width:min(100%,300px); margin:0 auto;
  font-size:12.5px; line-height:18px; color:var(--muted); text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bar{
  width:var(--cw); min-width:min(100%,300px); margin-inline:auto;
  display:flex; gap:8px;
}
.bar .btn:not(.icon){flex:1; min-width:0; padding:0 8px; font-size:14px; white-space:nowrap}
.btn{
  font:inherit; font-weight:700; color:var(--fg); background:var(--panel);
  border:2px solid var(--line); border-radius:10px; padding:0 12px; height:42px; cursor:pointer;
}
.btn:disabled{opacity:.45; cursor:default}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
#sound{display:flex; align-items:center; justify-content:center; gap:8px}
.btn.icon{width:44px; padding:0; display:grid; place-items:center}
.btn:focus-visible{outline:3px solid var(--accent); outline-offset:2px}

@keyframes rise{from{transform:translateY(14px); opacity:0} to{transform:none; opacity:1}}
@keyframes pop{
  0%{transform:translateX(-50%) scale(.85); opacity:0}
  12%{transform:translateX(-50%) scale(1); opacity:1}
  80%{transform:translateX(-50%); opacity:1}
  100%{transform:translateX(-50%) translateY(-6px); opacity:0}
}
@media (prefers-reduced-motion: reduce){ .toast, .result{animation:none} }

/* ---- Habillage du hub : retour, solde, carte d'accès, pied de page ---- */
[hidden]{display:none!important}
h1,h2,.stat dd,.result strong,.cname{font-weight:800}
.app.attente{visibility:hidden}
.nav,.gate,.legal{width:100%; max-width:560px; margin-inline:auto}
.nav{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:14px}
.nav a{color:var(--muted); text-decoration:none}
.nav a:hover{color:var(--fg)}
.solde{font-weight:700; font-variant-numeric:tabular-nums}
.ghost{background:transparent; border:1px solid var(--line); border-radius:8px; padding:4px 10px; font:inherit; font-size:13px; color:var(--muted); cursor:pointer}
.ghost:hover{color:var(--fg); border-color:var(--muted)}
.gate{display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:16px; background:var(--panel); border:2px solid var(--line); border-radius:14px}
.gate h2{margin:0; font-family:var(--font-display); font-size:24px; line-height:1.1}
.gate p{margin:0; color:var(--muted)}
.gate .btn{display:inline-flex; align-items:center; text-decoration:none}
.gain{margin:0; font-weight:700; color:var(--good)}
.legal{display:flex; flex-wrap:wrap; justify-content:center; gap:2px 12px; font-size:12px; color:var(--muted)}
.legal p{flex-basis:100%; margin:0; text-align:center}
.legal a{color:var(--muted)}