:root{
    --bg0:#0e0b1e; --bg1:#1a1030;
    --ink:#f3eee4; --ink-dim:#9c92b8;
    --panel:rgba(36,27,62,.82);
    --accent:#ff9440; --danger:#ff4d5e;
    --display:ui-rounded,"SF Pro Rounded","Hiragino Maru Gothic ProN","Arial Rounded MT Bold",system-ui,sans-serif;
  }
  html,body{height:100%}
  body{
    margin:0; overflow:hidden; overscroll-behavior:none;
    background:var(--bg0); color:var(--ink);
    font-family:system-ui,sans-serif;
    -webkit-user-select:none; user-select:none;
    -webkit-touch-callout:none;
  }
  #cv{position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none}
  /* ---- HUD ---- */
  #hud{
    position:fixed; top:0; left:0; right:0;
    padding:calc(8px + env(safe-area-inset-top)) 14px 8px;
    display:flex; justify-content:space-between; align-items:baseline;
    pointer-events:none; font-family:var(--display);
    text-shadow:0 2px 8px rgba(0,0,0,.6);
  }
  #hud[hidden]{display:none}   /* display:flex écraserait l'attribut hidden */
  #hud .val{font-size:1.5rem; font-weight:800; font-variant-numeric:tabular-nums}
  #hud .lab{font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim)}
  #hud .right{text-align:right}
  #hud .hbtns{display:flex; gap:6px; pointer-events:auto; align-self:center}
  #hud .hbtns button{
    width:38px; height:38px; border-radius:12px; cursor:pointer;
    border:1px solid rgba(243,238,228,.22); background:rgba(36,27,62,.72);
    color:var(--ink); font-size:1rem; touch-action:manipulation;
  }
  /* ---- Overlays ---- */
  #ov{
    position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
    background:radial-gradient(ellipse at 50% 30%, rgba(14,11,30,.2), rgba(14,11,30,.6));
    padding:24px; z-index:5;
  }
  #ov.hide{display:none}
  .card{
    background:var(--panel); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(243,238,228,.12); border-radius:22px;
    padding:26px 24px calc(24px + env(safe-area-inset-bottom)); max-width:330px; width:100%;
    text-align:center; box-shadow:0 18px 50px rgba(0,0,0,.5);
    max-height:calc(100dvh - 40px); overflow-y:auto;
  }
  .card h1{
    font-family:var(--display); font-weight:800; font-size:2rem; margin:0 0 2px;
    text-wrap:balance; letter-spacing:-.01em;
  }
  .card .sub{color:var(--ink-dim); font-size:.85rem; margin:0 0 18px}
  .how{list-style:none; margin:0 0 20px; padding:0; text-align:left; font-size:.92rem; display:flex; flex-direction:column; gap:10px}
  .how li{display:flex; gap:10px; align-items:flex-start; line-height:1.35}
  .how .ico{flex:0 0 auto; width:1.5em; text-align:center}
  .bigscore{font-family:var(--display); font-weight:800; font-size:2.6rem; font-variant-numeric:tabular-nums; margin:4px 0 0}
  .bigscore small{display:block; font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim)}
  .rec{color:var(--ink-dim); font-size:.85rem; margin:8px 0 18px}
  button.go{
    font-family:var(--display); font-weight:800; font-size:1.15rem; color:#241303;
    background:linear-gradient(180deg,#ffc06e,var(--accent));
    border:none; border-radius:999px; padding:14px 42px; cursor:pointer;
    box-shadow:0 6px 22px rgba(255,148,64,.45), inset 0 1px 0 rgba(255,255,255,.5);
    touch-action:manipulation;
  }
  button.go:active{transform:translateY(2px); box-shadow:0 3px 12px rgba(255,148,64,.4)}
  button.go:focus-visible{outline:3px solid var(--ink); outline-offset:3px}
  button.go.alt{
    background:none; color:var(--ink); font-size:1rem; padding:12px 32px;
    border:1px solid rgba(243,238,228,.3); box-shadow:none;
  }
  .planets{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 10px}
  .pstrate{grid-column:1/-1; text-align:left; font-size:.62rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--ink-dim); margin:8px 2px 0}
  .pstrate:first-child{margin-top:0}
  .pchip.lock{opacity:.55; cursor:default}
  .fus{color:var(--ink-dim); font-size:.8rem; margin:0 0 14px; font-variant-numeric:tabular-nums}
  .pchip{
    flex:1; background:rgba(243,238,228,.05); color:var(--ink);
    border:1px solid rgba(243,238,228,.16); border-radius:14px;
    padding:10px 4px 8px; cursor:pointer; font-family:var(--display);
    touch-action:manipulation;
  }
  .pchip .dot{width:22px; height:22px; border-radius:50%; margin:0 auto 6px; box-shadow:inset -4px -4px 6px rgba(0,0,0,.45)}
  .pchip .pname{font-weight:800; font-size:.85rem}
  .pchip small{display:block; font-family:system-ui; font-size:.6rem; line-height:1.25; color:var(--ink-dim); margin-top:3px}
  .pchip.sel{border-color:var(--accent); background:rgba(255,148,64,.13)}
  .pchip:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
  .linkbtn{background:none; border:none; color:var(--ink-dim); font-size:.85rem; margin-top:14px; cursor:pointer; text-decoration:underline; touch-action:manipulation}
  #spd{
    position:fixed; left:50%; transform:translateX(-50%);
    bottom:calc(10px + env(safe-area-inset-bottom));
    width:min(340px,86vw); height:56px; border-radius:999px;
    border:1px solid rgba(243,238,228,.22); background:rgba(36,27,62,.72);
    color:var(--ink); font-family:var(--display); font-weight:800; font-size:1rem;
    z-index:3; cursor:pointer;
    touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
  }
  #spd.on{
    background:linear-gradient(180deg,#ffc06e,var(--accent));
    color:#241303; border-color:transparent;
    box-shadow:0 0 26px rgba(255,148,64,.55);
  }
  #spd:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
  /* ---- L'Initiation : bandeau de consignes + bouton Passer ---- */
  #tut{
    position:fixed; top:calc(66px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
    width:min(340px,88vw); z-index:4; pointer-events:none;
    background:var(--panel); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(255,207,92,.35); border-radius:14px;
    padding:9px 14px 10px; font-size:.9rem; line-height:1.35; text-align:center;
    box-shadow:0 8px 30px rgba(0,0,0,.45);
  }
  #tut small{display:block; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:#ffcf5c; margin-bottom:2px}
  #tut.pop{animation:tutpop .35s ease-out}
  @keyframes tutpop{from{opacity:0; transform:translateX(-50%) translateY(-8px)} to{opacity:1; transform:translateX(-50%) translateY(0)}}
  @media (prefers-reduced-motion:reduce){#tut.pop{animation:none}}
  #tutskip{
    position:fixed; left:50%; transform:translateX(-50%);
    bottom:calc(80px + env(safe-area-inset-bottom));
    background:none; border:none; color:var(--ink-dim); font-size:.8rem;
    text-decoration:underline; z-index:3; cursor:pointer; touch-action:manipulation;
  }
  .fullmenu{
    width:100%; height:100%; max-width:420px;
    display:flex; flex-direction:column; align-items:center;
    gap:12px; text-align:center; overflow-y:auto;
    padding:20px 0 calc(20px + env(safe-area-inset-bottom));
  }
  /* centre quand le contenu est court, scrolle proprement quand il déborde
     (justify-content:center couperait le haut) */
  .fullmenu>:first-child{margin-top:auto}
  .fullmenu>:last-child{margin-bottom:auto}
  .fullmenu h1{font-family:var(--display); font-weight:800; font-size:2.5rem; margin:0; letter-spacing:-.01em; text-shadow:0 4px 18px rgba(0,0,0,.6)}
  .fullmenu .sub{margin:0}
  .fullmenu .go{width:min(300px,82vw)}
  .fullmenu .go small{display:block; font-size:.68rem; font-weight:600; margin-top:3px; opacity:.75; letter-spacing:.03em}
  .mlinks{display:flex; gap:6px 16px; flex-wrap:wrap; justify-content:center; max-width:86vw}
  .mlinks .linkbtn{margin-top:2px}
  .board{width:100%; border-collapse:collapse; font-size:.82rem; margin:8px 0 18px; font-variant-numeric:tabular-nums}
  .board th{font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); font-weight:600; padding:4px 2px}
  .board td{padding:5px 2px; border-top:1px solid rgba(243,238,228,.08)}
  .board .bpts{font-family:var(--display); font-weight:800; color:#ffcf5c}
  .constel{width:100%; margin:2px 0 6px}
  .constel .cst{animation:cpop .5s ease-out backwards; transform-box:fill-box; transform-origin:center}
  @keyframes cpop{from{opacity:0; transform:scale(.3)} to{opacity:1; transform:scale(1)}}
  @media (prefers-reduced-motion:reduce){.constel .cst{animation:none}}
  .floaticon{font-size:2.4rem; display:inline-block; animation:hover 2.6s ease-in-out infinite}
  @keyframes hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
  @media (prefers-reduced-motion:reduce){.floaticon{animation:none}}
  /* ---- habillage « temple » : fronton du titre, inscription dorée, frise ---- */
  .fronton{width:min(238px,64vw); display:block; margin:0 auto -6px}
  .fronton .flamme{animation:flamme 1.8s ease-in-out infinite alternate; transform-box:fill-box; transform-origin:center bottom}
  @keyframes flamme{from{opacity:.78; transform:scaleY(.92)} to{opacity:1; transform:scaleY(1.08)}}
  @media (prefers-reduced-motion:reduce){.fronton .flamme{animation:none}}
  .fullmenu h1.logo{
    text-transform:uppercase; letter-spacing:.08em; font-size:2.15rem; text-shadow:none;
    background:linear-gradient(180deg,#ffe9a8,#ffcf5c 55%,#e8a25f);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    filter:drop-shadow(0 6px 18px rgba(255,148,64,.28));
  }
  .frise{
    width:min(256px,66vw); height:12px; margin:0 auto; opacity:.4;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M0 10 H2 V2 H12 V6 H6 V10 H16' fill='none' stroke='%23f3eee4' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat:repeat-x; background-position:center; background-size:16px 12px;
  }
  .card .frise{margin:2px auto 10px}
  .skygrid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:4px 0 16px}
  .skytile{background:rgba(243,238,228,.04); border:1px solid rgba(243,238,228,.1); border-radius:12px; padding:8px 6px 6px}
  .skytile svg{width:100%; display:block}
  .skytile .sname{font-family:var(--display); font-weight:800; font-size:.8rem}
  .skytile small{display:block; font-size:.6rem; color:var(--ink-dim); line-height:1.3; margin-top:2px}
  .skytile.won{border-color:rgba(255,207,92,.4)}
  .skytile.won small{color:#ffcf5c}
  .playbar{
    position:sticky; bottom:-1px; width:100%; z-index:2;
    display:flex; flex-direction:column; align-items:center; gap:2px;
    padding:12px 0 6px;
    background:linear-gradient(180deg,rgba(14,11,30,0),rgba(14,11,30,.88) 45%);
  }
  .card .playbar{background:linear-gradient(180deg,rgba(36,27,62,0),rgba(36,27,62,.95) 45%); margin:0 -8px; padding-bottom:2px}
  .ftabs{display:flex; gap:5px; justify-content:center; flex-wrap:wrap; margin:0 0 6px}
  .ftabs button{background:rgba(243,238,228,.05); border:1px solid rgba(243,238,228,.16); color:var(--ink-dim);
    border-radius:999px; padding:4px 10px; font-size:.68rem; cursor:pointer; touch-action:manipulation}
  .ftabs button.on{border-color:var(--accent); color:var(--ink); background:rgba(255,148,64,.13)}