/* Air Palet : look sombre unique. Polices de l'appareil, aucune police chargée sur Internet. */
/* Concept : un seul écran plein cadre. Menu, missions et terrain se remplacent dans la même colonne ; le terrain portrait prend toute la place sous la barre de score. */
:root{
  --ink:#141a3a;
  --ink-2:#1e2654;
  --line:#3b4796;
  --text:#f1f4ff;
  --muted:#9ca8da;
  --ice:#eaf6fa;
  --coral:#ff5d4a;
  --cobalt:#3d6bff;
  --cobalt-soft:#7b97ff;
  --gold:#ffc94d;
  --me:#ff5d4a;
  --cpu:#7b97ff;
  --display:Impact,'Arial Black',sans-serif;
  --body:system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--ink);color:var(--text);
  font:500 15px/1.4 var(--body);
  padding-block:10px;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  overflow:hidden;overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
h1,h2,p{margin:0}
.app{height:100%;width:100%;max-width:520px;margin:0 auto;display:flex;flex-direction:column;min-height:0}
.screen{flex:1;min-height:0;display:flex;flex-direction:column;gap:18px}
#s-menu,#s-missions{overflow-y:auto;padding-bottom:8px}
.label{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}

/* menu */
.brand{display:flex;align-items:center;gap:16px;padding-top:6px}
.emblem{width:52px;height:78px;flex:none}
h1{font-family:var(--display);font-size:40px;line-height:.95;text-transform:uppercase;text-wrap:balance}
.tag{color:var(--muted);font-size:14px;margin-top:6px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.seg button{padding:12px 6px;border-radius:12px;background:var(--ink-2);border:2px solid var(--line);font-weight:800}
.seg button[aria-checked="true"]{background:var(--ice);color:var(--ink);border-color:var(--ice)}
.diff-note{min-height:2.8em;margin-top:8px;font-size:13px;color:var(--muted)}
.modes{display:grid;gap:12px}
.mode{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;min-height:104px;padding:20px;border-radius:18px;text-align:left;color:var(--ink);transition:transform .12s}
.mode:active{transform:scale(.98)}
.mode.solo{background:var(--coral)}
.mode.cpu{background:var(--cobalt-soft)}
.mode-t{font-family:var(--display);font-size:26px;line-height:1}
.mode-s{font-weight:700;font-size:14px;opacity:.85}
.foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;color:var(--muted);font-size:12.5px}
.foot span{min-width:0}
.icon-btn{width:44px;height:44px;border-radius:12px;background:var(--ink-2);border:2px solid var(--line);display:grid;place-items:center;flex:none}
.icon-btn svg{width:22px;height:22px}

/* personnalisation */
.emblem svg{display:block;width:100%;height:100%}
#s-skin{overflow-y:auto;padding:6px 6px 8px;margin-inline:-6px}
.preview{display:flex;justify-content:center;padding:14px;background:var(--ink-2);border:2px solid var(--line);border-radius:18px}
.preview svg{width:104px;height:156px}
#skinRows{display:grid;gap:18px}
.srow{display:grid;gap:10px}
.srow-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sname{font-weight:800;font-size:14px}
.chips{display:flex;flex-wrap:wrap;gap:12px}
.chip{width:40px;height:40px;border-radius:50%;border:3px solid var(--line);box-shadow:inset 0 0 0 2px rgba(255,255,255,.12)}
.chip[aria-checked="true"]{border-color:var(--ice);box-shadow:0 0 0 3px var(--ink),0 0 0 5px var(--gold)}
.chip:disabled{opacity:.3;cursor:not-allowed}

/* missions */
.top{display:flex;align-items:center;gap:12px}
.top h2{font-family:var(--display);font-size:22px;flex:1;min-width:0}
.mlist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mrow{width:100%;display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:14px 16px;background:var(--ink-2);border:2px solid var(--line);border-radius:14px;text-align:left}
.mrow:active{background:#26307a}
.m-n{display:block;font-weight:800;font-size:17px}
.m-d{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}
.stars{display:flex;gap:2px}
.star{width:20px;height:20px;fill:none;stroke:var(--line);stroke-width:1.6}
.star.on{fill:var(--gold);stroke:var(--gold)}
.stars.big{justify-content:center;gap:6px}
.stars.big .star{width:38px;height:38px}

/* jeu */
.hud{display:grid;grid-template-columns:44px 1fr 44px;gap:10px;align-items:center}
.board{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;min-width:0}
.b-side{display:flex;flex-direction:column;gap:3px;line-height:1}
.b-side.right{align-items:flex-end}
.b-l{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.b-v{font-family:var(--display);font-size:28px;font-variant-numeric:tabular-nums}
.b-v.me{color:var(--me)}
.b-v.cpu{color:var(--cpu)}
.b-v.low{color:#ff8f80}
.b-mid{display:flex;flex-direction:column;gap:2px;text-align:center;min-width:0}
.b-mid strong{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-mid span{font-size:12px;color:var(--muted)}
.stage{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
canvas{display:block;touch-action:none}
.banner{position:absolute;left:0;right:0;top:40%;text-align:center;pointer-events:none;opacity:0;font-family:var(--display);font-size:clamp(32px,10vw,52px)}
.banner span{display:inline-block;background:rgba(20,26,58,.9);padding:.15em .5em;border-radius:14px}
.banner .t-me{color:var(--me)}
.banner .t-cpu{color:var(--cpu)}
.banner .t-n{color:var(--ice)}
.banner .t-w{color:var(--gold)}
.banner.show{animation:pop 1.1s ease both}
@keyframes pop{0%{opacity:0;transform:scale(.8)}15%{opacity:1;transform:scale(1)}75%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.04)}}
.hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);width:max-content;max-width:88%;text-align:center;font-size:13px;font-weight:700;background:rgba(20,26,58,.92);padding:8px 14px;border-radius:999px;pointer-events:none}
.overlay{position:absolute;inset:0;background:rgba(20,26,58,.74);display:grid;place-items:center;padding:16px}
.card{width:min(100%,340px);background:var(--ink-2);border:2px solid var(--line);border-radius:20px;padding:24px;display:grid;gap:12px;text-align:center}
.card h2{font-family:var(--display);font-size:30px;line-height:1.05;text-wrap:balance}
.btns{display:grid;gap:8px;margin-top:6px}
.btn{padding:14px 16px;border-radius:14px;font-weight:800;background:var(--ink);border:2px solid var(--line);text-align:center}
.btn.main{background:var(--coral);border-color:var(--coral);color:var(--ink)}
@media (prefers-reduced-motion:reduce){
  .banner.show{animation:fade 1.1s ease both}
  @keyframes fade{0%{opacity:0}15%{opacity:1}75%{opacity:1}100%{opacity:0}}
  .mode{transition:none}
}
/* ---------- hub : retour, solde, carte d'accès, messages, pied de page ---------- */
[hidden]{display:none!important}
body{display:flex;flex-direction:column;height:100vh;height:100dvh}
.retour{flex:none;width:100%;max-width:520px;margin:0 auto 8px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px}
.retour a{color:var(--muted);text-decoration:none}
.retour a:hover{color:var(--text)}
.solde{font-variant-numeric:tabular-nums;font-weight:800}
.alerte{flex:none;width:100%;max-width:520px;margin:0 auto 8px;color:#ff8f80;font-weight:700}
#jeu{flex:1;min-height:0}
.carte{width:100%;max-width:520px;margin:0 auto;background:var(--ink-2);border:2px solid var(--line);border-radius:18px;padding:20px;display:grid;gap:10px}
.carte h2{font-family:var(--display);font-size:26px;line-height:1.05}
.carte p{color:var(--muted)}
.carte .btn{display:block;text-decoration:none;color:var(--ink)}
.gainline{font-weight:800;color:var(--gold)}
.legal{display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:center;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px}
.legal p{flex-basis:100%;text-align:center}
.legal a{color:var(--muted)}