/* Carnets de jeu — thèmes partagés
Chaque page : et dans le .
Le thème choisi est mémorisé sur l'appareil (localStorage "guides.skin") et appliqué via . */
:root{
--f-disp:"Sora", system-ui, sans-serif;
--f-body:"Manrope", system-ui, sans-serif;
--f-deco:"Marcellus SC", Georgia, serif;
--r:16px;
color-scheme:dark;
/* Aurore boréale (par défaut) */
--bg:linear-gradient(170deg,#0E2A2E 0%,#0C1622 45%,#0A0E17 100%);
--base:#0A0E17; --ink:#E6F1EF; --muted:#8AA4A6;
--acc:#5EE6B8; --grad:linear-gradient(90deg,#5EE6B8,#3BB4E6);
--ring-a:#5EE6B8; --ring-b:#3BB4E6; --ring-c:#6C7CF0;
--ring-in:#0D1A22; --glow:rgba(62,200,200,.35);
--miss:#FF7A6B; --miss-grad:linear-gradient(90deg,#FF7A6B,#FF4F7B);
--line:rgba(255,255,255,.08); --card:rgba(255,255,255,.04); --bar:rgba(10,14,23,.82);
--on-grad:#0A0E17; --title-font:var(--f-disp);
}
html[data-skin="braise"]{
--bg:linear-gradient(165deg,#3A1414 0%,#1C1113 45%,#111013 100%);
--base:#111013; --ink:#F2E9E4; --muted:#A8948D;
--acc:#FFB45E; --grad:linear-gradient(90deg,#FFC56B,#FF7A3D);
--ring-a:#FFC56B; --ring-b:#FF8A3D; --ring-c:#E0413A;
--ring-in:#1A1213; --glow:rgba(255,120,60,.35);
--miss:#FF5A4E; --miss-grad:linear-gradient(90deg,#FF6A4E,#E0364A);
--line:rgba(255,255,255,.07); --card:rgba(255,255,255,.035); --bar:rgba(17,16,19,.82);
--on-grad:#1A1213; --title-font:var(--f-deco);
}
html[data-skin="glace"]{
--bg:radial-gradient(120% 70% at 80% 0%,#1E3A5C 0%,#111A2B 45%,#090C13 100%);
--base:#090C13; --ink:#EAF1F8; --muted:#8C9BB0;
--acc:#9FE2FF; --grad:linear-gradient(90deg,#DDF4FF,#4C8DFF);
--ring-a:#FFFFFF; --ring-b:#9FE2FF; --ring-c:#4C8DFF;
--ring-in:#0F1726; --glow:rgba(120,190,255,.35);
--miss:#FF6FA0; --miss-grad:linear-gradient(90deg,#FF8FB1,#E0456F);
--line:rgba(255,255,255,.09); --card:rgba(255,255,255,.05); --bar:rgba(15,23,38,.72);
--on-grad:#0F1726; --title-font:var(--f-disp);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--base)}
body{margin:0;min-height:100vh;background:var(--bg) fixed,var(--base);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.45;-webkit-text-size-adjust:100%}
:root{padding-top:env(safe-area-inset-top,0px)}
a{color:var(--acc)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
/* Boutons ronds de l'en-tête */
.iconbtn{width:44px;height:44px;border-radius:50%;background:var(--card);border:1px solid var(--line);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;flex:none}
.iconbtn svg{width:19px;height:19px}
/* Statut de synchro */
.syncdot{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.syncdot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
.syncdot.ok{color:var(--acc)} .syncdot.ok::before{background:var(--acc);box-shadow:0 0 8px var(--acc)}
.syncdot.err{color:var(--miss)} .syncdot.err::before{background:var(--miss)}
/* Médaillon : --p = pourcentage (0–100) */
.medal{--p:0;width:152px;height:152px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
background:conic-gradient(from 200deg,var(--ring-a) 0%,var(--ring-b) calc(var(--p)*.7%),var(--ring-c) calc(var(--p)*1%),rgba(255,255,255,.08) calc(var(--p)*1%) 100%);
box-shadow:0 0 44px var(--glow)}
.medal>div{width:134px;height:134px;border-radius:50%;background:var(--ring-in);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.medal b{font-family:var(--title-font);font-weight:700;font-size:46px;line-height:1;font-variant-numeric:tabular-nums}
.medal span{font-size:12px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase}
/* Jauges */
.gauges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.gauge{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:14px;background:var(--card);border:1px solid var(--line);min-width:0}
.gauge small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gauge strong{font-size:17px;font-variant-numeric:tabular-nums}
.gauge strong em{font-style:normal;font-weight:400;color:var(--muted)}
.track{height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.track i{display:block;height:100%;border-radius:2px;background:var(--grad);width:0;transition:width .4s}
.track.m i{background:var(--miss-grad)}
/* Panneau de réglages */
.panel{display:grid;gap:14px;padding:16px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.panel h3{margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.skins{display:flex;gap:10px;flex-wrap:wrap}
.skin{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;background:var(--card);border:1px solid var(--line);cursor:pointer;font-size:14px}
.skin i{width:26px;height:26px;border-radius:50%;flex:none}
.skin[aria-pressed="true"]{border-color:var(--acc);color:var(--acc)}
.skin[data-skin="boreale"] i{background:linear-gradient(135deg,#5EE6B8,#3BB4E6 55%,#6C7CF0)}
.skin[data-skin="braise"] i{background:linear-gradient(135deg,#FFC56B,#FF8A3D 55%,#E0413A)}
.skin[data-skin="glace"] i{background:linear-gradient(135deg,#FFFFFF,#9FE2FF 55%,#4C8DFF)}
.field{display:flex;gap:8px}
.field input{flex:1;min-width:0;font:inherit;font-size:16px;padding:9px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.25);color:var(--ink)}
.pill{padding:9px 16px;border-radius:999px;border:0;background:var(--grad);color:var(--on-grad);font-weight:700;cursor:pointer}
.ghost{padding:0;border:0;background:none;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:14px;justify-self:start}
@media (prefers-reduced-motion:reduce){.track i{transition:none}}