/* ============================================================
   BARZ LIFE × HAWKINS GAMES — la peau
   Chargée après style.css. Rien ici ne touche au jeu :
   uniquement l'aspect. Noir + or de Barz Life, violet Hawkins,
   la grammaire du hub (contours épais, ombres franches, boutons
   qu'on a envie d'écraser), un grain de pochette, des stickers.
   Retirer ce fichier = revenir à l'ancien rendu.
   ============================================================ */
@font-face{font-family:"Lilita One";font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/lilita-one-latin.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-style:normal;font-weight:500 900;font-display:swap;
  src:url(/assets/fonts/nunito-latin.woff2) format("woff2")}

:root{
  --bg:#09070f; --bg2:#0f0b18; --card:#16111f; --card2:#1d1729;
  --bd:#2a2238; --bd2:#3a3050;
  --tx:#f3eefb; --tx2:#b3a9c9; --tx3:#8a80a3;
  --or:#f2b63c; --or2:#ffd77a;
  --hv:#7a4bff; --hv2:#9b74ff;          /* le violet Hawkins */
  --violet:#b99bff;
  --ink:#000;                           /* l'encre des contours */
  --r:16px;
  --titre:"Lilita One","Arial Rounded MT Bold",system-ui,sans-serif;
  --corps:"Nunito",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --doodle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260' fill='none' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%23f2b63c' stroke-opacity='.03'%3E%3Cpath d='M34 40l6 12 13 2-9 9 2 13-12-6-12 6 2-13-9-9 13-2z'/%3E%3Cpath d='M180 196l10-14 10 10 10-14 10 14v14h-40z'/%3E%3C/g%3E%3Cg stroke='%239b74ff' stroke-opacity='.035'%3E%3Crect x='140' y='30' width='22' height='34' rx='11'/%3E%3Cpath d='M134 56c0 12 8 18 17 18s17-6 17-18M151 74v14'/%3E%3Ccircle cx='60' cy='186' r='22'/%3E%3Ccircle cx='60' cy='186' r='6'/%3E%3Cpath d='M210 110c8-6 16 6 24 0M200 124c8-6 16 6 24 0'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- fond, texte ---------- */
body{
  font-family:var(--corps);font-weight:600;color:var(--tx);
  background-color:var(--bg);
  background-image:var(--grain),var(--doodle),
    radial-gradient(900px 520px at 50% -10%,rgba(122,75,255,.30),transparent 65%),
    radial-gradient(700px 500px at 100% 100%,rgba(242,182,60,.10),transparent 70%);
  background-attachment:fixed,fixed,fixed,fixed;
}
b,strong{font-weight:800}
h1,h2,h3,.mdn,.fin-t,.fiche-n,.logo h1,.page-t,.res-titre,.verdict,
.fhn,.fco b,.rep b,.lex-n,.lex-v,.tr b,.res-c b,.cine-t,.cine-0,.cine-1 b,
.accroche b,.rat-k,.sig-n,.sig-e,.epoque-n,.acte-t,.coll-h b,.res1-t,.res1-n b,
.hof-n,.ctr-n,.defi-n,.fete-t,.fete-n,.crea-q,.duel-g b,.fsr b,.monde-code,.itw-n{
  font-family:var(--titre);font-weight:400;letter-spacing:.01em}
h2{font-size:21px}
.tag,.dl,.fait,.chip,.btn,.opt,.ot,.pmn,.ph-nav button,input{font-family:var(--corps)}

/* toutes les petites étiquettes de section : plus franches */
.bt,.fct,.fil-t,.lbl,.nl,.cl,.pq-k,.reac-k,.presque-k,.duel-k,.pct-k,.res1-k,.rg-k,.band-k,
.sit-k,.itw-l,.riv-ht,.acte-b,.acte-k,.crea-n,.bt-a,.obj-k,.prev>span,.mn span,.tlj b{
  font-weight:900;letter-spacing:1.4px}

/* ---------- le téléphone ---------- */
.phone{background:rgba(15,11,24,.92);border-left:3px solid var(--ink);border-right:3px solid var(--ink)}
.ph-top{background:rgba(12,9,20,.94);border-bottom:3px solid var(--ink);
  box-shadow:0 1px 0 rgba(242,182,60,.25)}
.ph-date b{font-weight:900}
.ph-argent{font-family:var(--titre);font-weight:400;font-size:18px;letter-spacing:.02em}
.ph-pal{font-weight:900;letter-spacing:1.2px}
.ph-bar,.jb,.barre,.fjb,.scn-b,.coll-b,.proj-b span{background:#231c33;border:1px solid #000}
.mn{background:var(--card);border:2px solid var(--ink);border-radius:11px;box-shadow:0 2px 0 var(--ink)}
.mn b{font-family:var(--titre);font-weight:400;font-size:16px}
.ph-cote{background:var(--or);border:2px solid var(--ink);border-radius:11px;box-shadow:0 3px 0 var(--ink);transform:rotate(3deg)}
.ph-cote b{font-family:var(--titre);font-weight:400;color:#17110a}
.ph-cote span{color:rgba(23,17,10,.7);font-weight:900}

.ph-nav{background:rgba(12,9,20,.96);border-top:3px solid var(--ink);gap:6px;padding-left:8px;padding-right:8px}
.ph-nav button{border-radius:12px;border:2px solid transparent;font-weight:800}
.ph-nav button b{font-weight:900}
.ph-nav button:hover{background:rgba(155,116,255,.10);color:var(--tx)}
.ph-nav button.on{background:var(--or);color:#17110a;border-color:var(--ink);box-shadow:0 3px 0 var(--ink)}
.ph-nav button.on:hover{background:var(--or2)}

/* ---------- boutons : la grammaire Hawkins ---------- */
.btn,.retour,.tuto-ok{
  border:3px solid var(--ink);border-radius:14px;font-weight:800;
  box-shadow:0 4px 0 var(--ink);transform:translateY(0);
  transition:transform .12s ease,box-shadow .12s ease,background .15s,filter .15s}
.btn{background:var(--card2);color:var(--tx)}
.btn:hover,.retour:hover,.tuto-ok:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink);border-color:var(--ink);background:#251d36}
.btn:active,.retour:active,.tuto-ok:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.btn.or,.tuto-ok{background:var(--or);color:#17110a;border-color:var(--ink)}
.btn.or:hover,.tuto-ok:hover{background:var(--or2);border-color:var(--ink)}
.btn.grand{font-size:17px;padding:15px;border-radius:16px;box-shadow:0 5px 0 var(--ink)}
.btn.grand.or{font-family:var(--titre);font-weight:400;font-size:19px;letter-spacing:.03em;padding:14px 15px}
.btn.grand:hover{box-shadow:0 7px 0 var(--ink)}
.btn.pt{color:var(--tx2);box-shadow:0 3px 0 var(--ink)}
.btn.btn-alea{background:linear-gradient(135deg,var(--hv),#4b25c4);border-color:var(--ink);color:#fff}
.btn.btn-alea i{color:rgba(255,255,255,.78)}
.btn.btn-alea:hover{background:linear-gradient(135deg,var(--hv2),#5a31d8);border-color:var(--ink)}
.retour{background:var(--card2);color:var(--or2)}
.son-b.on{background:var(--or);border-color:var(--ink);color:#17110a}
.menu-row .btn i,.btn.alea i{color:var(--tx3)}

/* ---------- les choix ---------- */
.opt{
  background:var(--card);border:2px solid var(--bd2);border-radius:16px;
  box-shadow:0 4px 0 var(--ink);
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s,background .14s}
.opt:hover{border-color:var(--or);background:var(--card2);transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}
.opt:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.ot{font-weight:800}
.opt.grave{border-color:rgba(242,96,79,.6)}
.opt.grave::after{font-weight:900}
.pm,.chip{border:2px solid var(--bd2);border-radius:13px;box-shadow:0 3px 0 var(--ink);font-weight:700}
.pm.on,.chip.on{border-color:var(--or);background:rgba(242,182,60,.14);color:var(--or2)}
.pmn{font-weight:800}
details.plus>summary{border:2px dashed var(--bd2);border-radius:13px;font-weight:800}

/* ---------- les cartes ---------- */
.carte,.fc,.timeline,.tl,.contrat,.reac,.pese,.repli,.chg-s,.hof,.coll,.proj,.ct-lu,.morceau-id,
.reperes,.note,.ch,.res-c,.duel,.sit,.pourquoi,.ep,.itw-h,.band,.prev,.cine-tr,.tourn,.sig,.defi-monde,.pct,.journal{
  border:2px solid var(--ink);border-radius:16px;box-shadow:0 4px 0 var(--ink)}
.carte,.fc,.timeline,.tl,.contrat,.reac,.pese,.repli,.chg-s,.coll,.proj,.ct-lu,.note,.ch,.res-c,.reperes{
  background:linear-gradient(180deg,var(--card2),var(--card))}
/* les cartes qui portent l'or ou le violet gardent leur liseré */
.ep,.pourquoi,.itw-h,.band,.une,.incident{border-left:5px solid var(--or)}
.band.ko{border-left-color:var(--rouge)}
.sit{background:linear-gradient(135deg,#1c1530,var(--card))}
.tourn,.cine-tr,.defi-monde{border-color:var(--ink);background:linear-gradient(160deg,#21183a,var(--card))}
.sig{background:linear-gradient(160deg,#2a2112,var(--card))}
.proj.ok{border-left:5px solid var(--vert)} .proj.ko{border-left:5px solid var(--rouge)}
.dossier{border:2px solid var(--ink);border-left:5px solid var(--rouge);border-radius:0 14px 14px 0;box-shadow:0 3px 0 var(--ink)}
.incident,.une{border:2px solid var(--ink);border-left:5px solid var(--or);box-shadow:0 3px 0 var(--ink)}
.bloc-a{border:2px solid var(--ink);border-radius:18px;box-shadow:0 4px 0 var(--ink);
  background:linear-gradient(180deg,rgba(242,182,60,.10),rgba(242,182,60,.03)),var(--card)}
.bt-a{font-weight:900;letter-spacing:1.6px}
.alerte-v{border:2px solid var(--ink);border-left:5px solid var(--rouge);box-shadow:0 3px 0 var(--ink)}
.al{border:2px solid var(--ink);border-left-width:5px;box-shadow:0 2px 0 var(--ink)}
.al-danger{border-left-color:var(--rouge)} .al-warn{border-left-color:var(--or)} .al-info{border-left-color:var(--bleu)}
.suite,.monte,.conseil,.appris,.newb,.presque,.presque-l,.duel-l,.riv-l,.graine-av,.rumeur,.chg-o,.chg-g,.att,.ctr-w,.itw-e{border-radius:13px}
.riv-l{border:2px solid rgba(155,116,255,.55);background:rgba(122,75,255,.12)}
.riv-l b{font-family:var(--titre);font-weight:400;letter-spacing:.02em}
.presque,.presque-l{border-width:2px}
input[type=text],input:not([type]),.cmp-box input{background:#07050c;border:2px solid var(--bd2);border-radius:13px;font-weight:700}
input:focus{border-color:var(--or);box-shadow:0 0 0 3px rgba(242,182,60,.18)}

/* ---------- tags = stickers ---------- */
.tag{font-weight:800;border-radius:999px;padding:3px 9px;border:1.5px solid rgba(0,0,0,.6)}
.dl,.fait{border:2px solid var(--ink);border-radius:999px;box-shadow:0 2px 0 var(--ink);font-weight:800;background:var(--card2)}
.fait.or{background:var(--or);color:#17110a;border-color:var(--ink)}
.trait{font-weight:800;border:2px solid rgba(155,116,255,.55);background:rgba(122,75,255,.16)}
.micro-t,.her-t,.fiche-r,.mdt,.fete-k,.defi-r,.fin-k,.cine-k{
  display:inline-block;font-weight:900;border:2px solid var(--ink);border-radius:10px;
  background:var(--or);color:#17110a;padding:5px 12px;box-shadow:0 3px 0 var(--ink);transform:rotate(-2deg)}
.mdt{background:var(--hv);color:#fff}
.mdt.ok{background:var(--vert);color:#06170e;border-color:var(--ink)}
.mdt.ko{background:var(--rouge);color:#1f0703;border-color:var(--ink)}
.defi-r{background:var(--dc);color:#0b0812}
.fin-k{display:table;margin-left:auto;margin-right:auto}
.cine-k{margin-bottom:22px}

/* ---------- le verdict : un sticker qu'on colle sur la pochette ---------- */
.verdict{
  font-size:22px;text-transform:uppercase;letter-spacing:.04em;
  border:3px solid var(--ink);border-radius:14px;box-shadow:0 5px 0 var(--ink);
  transform:rotate(-1.5deg);margin:4px 6px 16px}
.v-or{background:var(--or);color:#17110a}
.v-vert{background:var(--vert);color:#06170e}
.v-bleu{background:var(--bleu);color:#06101f}
.v-violet{background:var(--hv);color:#fff}
.v-rouge{background:var(--rouge);color:#1f0703}
.v-gris{background:var(--card2);color:var(--tx)}

/* ---------- le résultat en un coup d'œil ---------- */
.res1{border:3px solid var(--ink);border-radius:20px;box-shadow:0 6px 0 var(--ink);
  background:var(--grain),linear-gradient(180deg,#221a33,var(--card))}
.res1.ok{border-color:var(--ink);box-shadow:0 6px 0 var(--ink),inset 0 0 0 2px rgba(79,207,139,.55)}
.res1.ko{border-color:var(--ink);box-shadow:0 6px 0 var(--ink),inset 0 0 0 2px rgba(242,96,79,.55)}
.res1.mi{border-color:var(--ink);box-shadow:0 6px 0 var(--ink),inset 0 0 0 2px rgba(242,182,60,.55)}
.res1-t{font-size:25px}
.res1-n>div{background:rgba(0,0,0,.35);border:2px solid var(--ink);border-radius:12px}
.res1-n b{font-size:31px;text-shadow:0 2px 0 var(--ink)}
.res1-a{font-family:var(--titre);font-weight:400;font-size:19px;letter-spacing:.06em;text-transform:uppercase}
.accroche b{font-size:34px;text-shadow:0 3px 0 var(--ink)}
.notes .nv,.cv{font-family:var(--titre);font-weight:400}

/* ---------- titres : le lettrage du hub ---------- */
.logo{padding:40px 0 22px}
.logo::before{
  content:"Hawkins Games présente";display:inline-block;margin-bottom:14px;
  font:900 10.5px/1 var(--corps);letter-spacing:2.2px;text-transform:uppercase;
  color:#fff;background:var(--hv);border:2px solid var(--ink);border-radius:999px;
  padding:6px 12px;box-shadow:0 3px 0 var(--ink);transform:rotate(-2deg)}
.logo h1{
  font-size:64px;line-height:.9;letter-spacing:.02em;color:var(--or);
  text-shadow:0 7px 0 var(--ink),3px 0 0 var(--ink),-3px 0 0 var(--ink),0 -3px 0 var(--ink),
    3px 3px 0 var(--ink),-3px 3px 0 var(--ink),3px -3px 0 var(--ink),-3px -3px 0 var(--ink),
    0 0 40px rgba(242,182,60,.35)}
.logo h1 span{color:var(--hv2);display:inline-block;transform:rotate(-3deg);
  text-shadow:0 7px 0 var(--ink),3px 0 0 var(--ink),-3px 0 0 var(--ink),0 -3px 0 var(--ink),
    3px 3px 0 var(--ink),-3px 3px 0 var(--ink),3px -3px 0 var(--ink),-3px -3px 0 var(--ink),
    0 0 40px rgba(122,75,255,.5)}
.menu .sign,.sign{font-weight:700;color:var(--tx2)}
.page-t,.fin-t,.cine-t,.cine-0,.epoque-n,.acte-t,.crea-q,.mdn{
  text-shadow:0 4px 0 var(--ink),2px 0 0 var(--ink),-2px 0 0 var(--ink),0 -2px 0 var(--ink)}
.page-t{font-size:34px;letter-spacing:.02em}
.fin-t{font-size:36px}
.crea-q{font-size:30px;line-height:1.1}
.mdn{font-size:25px;line-height:1.15}
.res-titre{font-size:27px}
.acte-n{font-weight:900;letter-spacing:5px}
.fhn{font-size:26px;-webkit-text-fill-color:currentColor;background:none;color:var(--or)}
.fco b{font-size:46px;text-shadow:0 3px 0 var(--ink)}
.coll-h b{font-size:56px;text-shadow:0 4px 0 var(--ink)}
.menu-hub{font-weight:900}

/* ---------- célébrations, tuto, lexique ---------- */
.fete,.fete.majeure,.tuto-b,.lex,.ctr-big,.defi{
  border:3px solid var(--ink);border-radius:22px;box-shadow:0 8px 0 var(--ink),0 0 70px rgba(242,182,60,.18)}
.fete{background:var(--grain),linear-gradient(160deg,#2c2112,#1a1426)}
.fete.majeure{background:var(--grain),radial-gradient(120% 90% at 50% 0%,#3a2a12 0%,#1b1330 60%,#0f0b18 100%)}
.fete-n{text-shadow:0 5px 0 var(--ink),0 0 40px rgba(242,182,60,.45)}
.fete-fond.sombre .fete.majeure{border-color:var(--ink);box-shadow:0 8px 0 var(--ink),0 0 70px rgba(242,96,79,.28)}
.tuto-b,.lex{background:var(--card2);box-shadow:0 8px 0 var(--ink),0 0 0 2px var(--or)}
.tuto-t{font-family:var(--titre);font-weight:400;font-size:19px;letter-spacing:.02em}
.ctr-big{background:var(--grain),linear-gradient(160deg,#2a2112,var(--card))}
.defi{border-color:var(--ink);box-shadow:0 8px 0 var(--ink),0 0 44px color-mix(in srgb,var(--dc) 25%,transparent)}
.flash{border:2px solid var(--ink);box-shadow:0 4px 0 var(--ink);font-family:var(--corps);font-weight:900}
.flash.or{background:var(--or);color:#17110a;border-color:var(--ink)}
.flash.violet{background:var(--hv);color:#fff;border-color:var(--ink)}
.flash.riv{background:var(--rouge);color:#1f0703;border-color:var(--ink)}
.sauve{border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink);font-weight:800}

/* ---------- la carte de fin = une pochette ---------- */
.fiche{
  border:3px solid var(--ink);border-radius:22px;
  box-shadow:0 8px 0 var(--ink),0 0 0 2px var(--or) inset,0 0 60px rgba(242,182,60,.14);
  background:var(--grain),radial-gradient(120% 80% at 50% 0%,rgba(122,75,255,.28),transparent 60%),linear-gradient(165deg,#241c33,#120e1b)}
.fiche-c{background:var(--or);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);transform:rotate(-3deg)}
.fiche-c b{font-family:var(--titre);font-weight:400;color:#17110a}
.fiche-c span{color:rgba(23,17,10,.7);font-weight:900}
.fiche-n{font-size:24px}
.fiche-s{color:var(--hv2)}
.fiche-g div,.ctr-g div,.proj-g div{border:2px solid var(--ink);border-radius:12px;background:rgba(0,0,0,.35)}
.fiche-g b,.ctr-g b{font-family:var(--titre);font-weight:400;font-size:17px}
.her-i{border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.her-i b{font-family:var(--titre);font-weight:400;color:var(--hv2)}
.monde-code{border:3px dashed var(--or);border-radius:18px;font-size:38px;text-shadow:0 3px 0 var(--ink)}
.code-m b{border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.obj-fin{border-width:2px;box-shadow:0 4px 0 var(--ink)}
.hof.or{border-color:var(--ink);box-shadow:0 4px 0 var(--ink),inset 0 0 0 2px rgba(242,182,60,.6)}
.hof.argent{border-color:var(--ink);box-shadow:0 4px 0 var(--ink),inset 0 0 0 2px rgba(155,116,255,.5)}
.bg{border:2px solid var(--bd);border-radius:11px}
.bg.on{border-color:var(--or)}
.crea-pts i{border:1.5px solid var(--ink);width:9px;height:9px}
.portrait{border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink)}

/* ---------- ordinateur : le téléphone devient un objet ---------- */
@media (min-width:1080px){
  .phone{border:3px solid var(--ink);border-radius:26px;
    box-shadow:0 12px 0 var(--ink),0 0 0 6px rgba(242,182,60,.08),0 40px 90px -20px rgba(122,75,255,.45)}
  .ph-top{border-radius:23px 23px 0 0}
  .ph-nav{border-radius:0 0 23px 23px}
  .logo h1{font-size:76px}
}

/* ---------- petits écrans : on garde de l'air, rien ne déborde ---------- */
@media (max-width:400px){
  .logo h1{font-size:50px}
  .page-t{font-size:29px}
  .crea-q{font-size:26px}
  .verdict{font-size:19px}
}
@media (max-width:480px){
  .res1{border-radius:16px}
  .res1-t{font-size:21px}
  .res1-n b{font-size:25px}
  .res1-a{font-size:16px}
  .opt{box-shadow:0 3px 0 var(--ink)}
}
@media (prefers-reduced-motion:reduce){
  .btn,.opt,.retour{transition:none}
  .btn:hover,.opt:hover,.retour:hover{transform:none}
}