/* ============================================================
   ROBINTARDIOS 98 - $ROBINTARDIO
   Windows 98 desktop shell, dark wallpaper edition.
   ============================================================ */

:root{
  /* 98 chrome */
  --face:#c0c0c0;
  --face-lt:#dfdfdf;
  --hi:#ffffff;
  --sh:#808080;
  --dk:#0a0a0a;
  /* LA HAUTEUR RESERVEE A LA BARRE DES TACHES.
     Elle en fait 42 (le bloc ZOOM plus bas la regrandit), on en garde
     46 pour la marge. Tout ce qui doit rester au-dessus s appuie sur
     cette variable : plus jamais deux chiffres qui se contredisent. */
  --bar:46px;
  /* brand */
  --green:#00c805;
  --green-hot:#39ff14;
  --green-deep:#00360f;
  --red:#ff2d20;
  --amber:#ffb703;
  --title-on:linear-gradient(90deg,#00360f 0%,#00c805 100%);
  --title-off:linear-gradient(90deg,#3f3f3f 0%,#8a8a8a 100%);
  /* type */
  --ui:"MS Sans Serif",Tahoma,Verdana,"Segoe UI",sans-serif;
  --mono:"VT323",Consolas,monospace;
  --pixel:"Press Start 2P",var(--ui);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}

html,body{height:100%}
body{
  margin:0;
  font:400 15px/1.5 var(--ui);
  color:#0a0a0a;
  background:#050807;
  overflow:hidden;
  cursor:default;
  -webkit-font-smoothing:none;
}

/* --- 98 bevels ------------------------------------------------ */
.raised{
  border:2px solid;
  border-color:var(--hi) var(--dk) var(--dk) var(--hi);
  box-shadow:inset 1px 1px 0 var(--face-lt), inset -1px -1px 0 var(--sh);
}
.sunken{
  border:2px solid;
  border-color:var(--sh) var(--hi) var(--hi) var(--sh);
  box-shadow:inset 1px 1px 0 var(--dk), inset -1px -1px 0 var(--face-lt);
}

/* --- boot / BIOS ---------------------------------------------- */
#boot{
  position:fixed;inset:0;z-index:9000;
  margin:0;                    /* sinon la marge par defaut de <pre>
                                  decale l'ecran et laisse voir le bureau */
  background:#000;color:#c8c8c8;
  font:400 17px/1.5 var(--mono);
  padding:28px clamp(16px,5vw,64px);
  white-space:pre-wrap;
  overflow:hidden;
}
#boot b{color:var(--green-hot);font-weight:400}
#boot .warn{color:var(--amber)}
#boot .err{color:var(--red)}
/* la barre de chargement du BIOS : en caracteres, comme a l'epoque */
#boot .bar{color:var(--green-hot)}
#boot .dim{color:#5a5a5a}
#boot .ok{color:var(--green-hot)}
#boot .cursor{
  display:inline-block;width:9px;height:16px;
  background:#c8c8c8;vertical-align:-2px;
  animation:blink 1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}
body.booted #boot{display:none}

/* --- desktop --------------------------------------------------- */
#desktop{
  /* 36 px ici contre 42 px de barre reelle : les six pixels d ecart
     suffisaient a faire passer le decor et les fenetres dessous. */
  position:fixed;inset:0 0 var(--bar) 0;
  overflow:hidden;
  background-color:#070d0a;
  background-image:
    radial-gradient(120% 90% at 50% 30%, rgba(0,200,5,.13), transparent 62%),
    repeating-linear-gradient(0deg, rgba(0,255,65,.05) 0 1px, transparent 1px 4px),
    linear-gradient(165deg,#040a07 0%,#0a1410 45%,#050806 100%);
}
/* scanline + vignette overlay */
#crt{
  position:fixed;inset:0;z-index:8000;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
    radial-gradient(130% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%);
  mix-blend-mode:multiply;
}

/* --- stickers de fond ------------------------------------------
   Des aplats rectangulaires satures facon affichage de bar : ils
   vivent sous les fenetres, ne captent aucun clic et ne sont jamais
   annonces aux lecteurs d'ecran.                                    */
#stickers{
  /* Les pancartes sont posees en pourcentage, jusqu a 88 %. A cette
     hauteur leur propre epaisseur les envoyait sous la barre. On
     raccourcit le cadre : les pourcentages se compressent vers le
     haut et la derniere ligne retombe dans le bureau.              */
  position:absolute;inset:0 0 110px 0;z-index:0;
  pointer-events:none;overflow:hidden;
}
.stk{
  position:absolute;display:block;
  padding:6px 9px;
  border:3px solid #000;
  box-shadow:5px 5px 0 rgba(0,0,0,.55);
  font:700 13px/1.15 "Arial Black",Impact,Haettenschweiler,sans-serif;
  text-transform:uppercase;letter-spacing:.02em;
  transform:rotate(var(--r,0deg));
  white-space:nowrap;
}
.stk span{font-size:10px;font-weight:400;text-transform:none}
.stk--big{font-size:26px;line-height:1.05;padding:8px 12px;border-width:4px}
.stk--b{background:#1555ea;color:#ffeb01}
.stk--y{background:#ffeb01;color:#1555ea}
.stk--g{background:#1bc508;color:#000}
.stk--r{background:#f5251c;color:#fefce1}
.stk--c{background:#fefce1;color:#f5251c}
.stk--k{background:#000;color:#1bc508;border-color:#ffeb01}

/* --- couche clipart anime ---------------------------------------
   Les GIF de 1998 vivent dans leur propre calque, sous les fenetres
   et sous les stickers texte. Aucun clic, aucun lecteur d'ecran.   */
#gifs{
  /* meme calcul que pour les pancartes : le UNDER CONSTRUCTION est a
     92 %, c est lui qu on voyait coupe en bas de la capture.        */
  position:absolute;inset:0 0 130px 0;z-index:0;
  pointer-events:none;overflow:hidden;
}
.gif{
  position:absolute;display:block;
  image-rendering:pixelated;
  filter:drop-shadow(3px 3px 0 rgba(0,0,0,.45));
}
/* sur mobile la page defile : le clipart de fond ferait deborder la
   mise en page pour rien, on le coupe.                              */
@media (max-width:900px){#gifs{display:none}}

/* --- compteur de visites ---------------------------------------- */
.hits{
  display:flex;align-items:center;justify-content:center;
  gap:10px;flex-wrap:wrap;margin:18px 0 8px;
}
.hits__box{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 9px;background:#000;border:3px outset #909090;
}
.hits__lbl{
  font:700 12px/1 "Comic Sans MS","Arial Black",Impact,sans-serif;
  color:#00ff41;text-transform:uppercase;letter-spacing:.06em;
}
.hits__n{display:inline-flex;gap:2px}
.hits__n i{
  display:block;min-width:15px;padding:3px 3px;
  background:linear-gradient(#3d3d3d,#101010 46%,#000 54%,#2c2c2c);
  border:1px solid #5a5a5a;
  font:700 16px/1 "Courier New",Courier,monospace;font-style:normal;
  color:#ffeb01;text-align:center;text-shadow:0 0 5px #ff9d00;
}
.hero__const{display:block;margin:0 auto 4px;image-rendering:pixelated}
.gbook__deco{
  display:flex;align-items:center;justify-content:center;gap:8px;
  flex-wrap:wrap;margin:10px 0 0;
}
.gbook__deco b{
  background:#000;color:#00ff41;padding:3px 6px;border:2px ridge #00ff41;
  font:700 11px/1 "Courier New",monospace;letter-spacing:.05em;
}

/* --- desktop icons --------------------------------------------- */
#icons{
  position:absolute;inset:10px auto 10px 10px;
  display:flex;flex-direction:column;flex-wrap:wrap;
  align-content:flex-start;gap:4px;max-height:calc(100% - 20px);
}
.dicon{
  width:112px;padding:7px 2px 6px;overflow:visible;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  background:none;border:1px dotted transparent;
  color:#eaf7ea;font:400 11px/1.25 var(--ui);text-align:center;
  cursor:pointer;text-shadow:1px 1px 2px #000,0 0 6px rgba(0,0,0,.9);
}
.dicon:hover{background:rgba(0,200,5,.14)}
.dicon:focus-visible,.dicon.sel{
  outline:none;border-color:#eaf7ea;background:rgba(0,64,128,.55);
}
.dicon .glyph{
  width:36px;height:36px;display:grid;place-items:center;
  font-size:26px;line-height:1;filter:drop-shadow(1px 2px 0 rgba(0,0,0,.6));
}
.dicon img{width:36px;height:36px;display:block}
/* le nom de fichier passe a la ligne au lieu d'etre tronque :
   on coupe d'abord aux espaces, et seulement si un mot est plus long
   que l'icone on le casse en plein milieu */
/* le nom de fichier tient sur UNE seule ligne : la plaque s'elargit
   avec le texte et deborde un peu de la cellule, comme sur un vrai
   bureau Windows. Jamais de retour a la ligne, jamais de troncature. */
.dicon span:last-child{
  display:inline-block;width:auto;max-width:none;
  white-space:nowrap;overflow:visible;
}

/* --- windows ---------------------------------------------------- */
.win{
  position:absolute;
  min-width:min(260px,92vw);
  max-width:min(760px,94vw);
  background:var(--face);
  padding:3px;
  display:none;
  flex-direction:column;
  box-shadow:2px 2px 0 rgba(0,0,0,.45), 4px 4px 14px rgba(0,0,0,.5);
  /* UNE FENETRE NE DEPASSE JAMAIS LE BAS DE L ECRAN.
     Elle n avait aucun plafond : le terminal et la fenetre du token
     poussaient tout seuls sous la barre des taches, et aucun calcul
     de placement ne pouvait les rattraper. Le compte : 42 px de bande
     defilante en haut, 46 px de barre en bas, 8 px de marge. Trop de
     contenu ? c est le corps qui defile, pas la fenetre qui grandit. */
  max-height:calc(100vh - 96px);
}
.win.open{display:flex}
.win.min{display:none}
.win.max{
  left:0!important;top:0!important;
  width:100%!important;height:calc(100vh - var(--bar))!important;
  max-width:none;
}
.win__bar{
  display:flex;align-items:center;gap:6px;
  padding:3px 3px 3px 5px;
  background:var(--title-off);
  color:#fff;font:700 12px/1 var(--ui);
  user-select:none;cursor:grab;
}
.win.focus .win__bar{background:var(--title-on)}
.win__bar:active{cursor:grabbing}
.win__ico{width:15px;height:15px;flex:0 0 auto;display:grid;place-items:center;font-size:12px}
.win__title{flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.2px}
.win__btns{display:flex;gap:2px;flex:0 0 auto}
.win__btns button{
  width:19px;height:17px;padding:0;
  background:var(--face);color:#000;
  font:700 11px/1 var(--ui);
  border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);
  box-shadow:inset 1px 1px 0 var(--face-lt), inset -1px -1px 0 var(--sh);
  display:grid;place-items:center;cursor:pointer;
}
.win__btns button:active{
  border-color:var(--sh) var(--hi) var(--hi) var(--sh);
  box-shadow:inset 1px 1px 0 var(--dk);
  padding:1px 0 0 1px;
}
.win__menu{
  display:flex;gap:2px;padding:2px 3px;
  font:400 12px var(--ui);border-bottom:1px solid var(--sh);
}
.win__menu span{padding:2px 7px;cursor:default}
.win__menu span:hover{background:#00360f;color:#fff}
.win__body{
  /* min-height:0 est indispensable : sans lui un enfant flex refuse de
     descendre sous sa hauteur de contenu, le max-height de .win est
     ignore et la fenetre deborde quand meme par le bas.            */
  flex:1 1 auto;overflow:auto;min-height:0;
  padding:12px;background:var(--face);
}
.win__body.paper{background:#fff;margin:3px;padding:14px}
.win__body.term{
  background:#000;color:var(--green-hot);
  font:400 17px/1.4 var(--mono);margin:3px;padding:12px 14px;
  text-shadow:0 0 6px rgba(57,255,20,.45);
}
.win__body.term a{color:var(--green-hot)}
.win__status{
  display:flex;gap:4px;padding:3px;font:400 11px var(--ui);
}
.win__status i{
  flex:1 1 auto;font-style:normal;padding:2px 6px;
  border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);
}
.win__status i:last-child{flex:0 0 96px}

/* --- generic content ------------------------------------------- */
h1,h2,h3{margin:0 0 10px;line-height:1.2}
h1{font:400 clamp(15px,3.2vw,22px)/1.35 var(--pixel);color:#0a0a0a}
h2{font:400 clamp(12px,2.4vw,15px)/1.4 var(--pixel)}
h3{font:700 13px var(--ui);text-transform:uppercase;letter-spacing:.5px}
p{margin:0 0 10px}
a{color:#0000c8}
a:hover{color:var(--red)}
hr{border:none;border-top:1px solid var(--sh);border-bottom:1px solid var(--hi);margin:12px 0}
ul{margin:0 0 10px;padding-left:20px}
li{margin-bottom:5px}
small{font-size:11px;color:#404040}
mark{background:var(--green-hot);color:#000;padding:0 3px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:26px;padding:5px 14px;
  background:var(--face);color:#0a0a0a;
  font:700 12px var(--ui);text-decoration:none;cursor:pointer;
  border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);
  box-shadow:inset 1px 1px 0 var(--face-lt), inset -1px -1px 0 var(--sh);
}
.btn:hover{background:#cacaca;color:#0a0a0a}
.btn:active{
  border-color:var(--sh) var(--hi) var(--hi) var(--sh);
  box-shadow:inset 1px 1px 0 var(--dk);padding:6px 13px 4px 15px;
}
.btn--go{
  background:linear-gradient(180deg,#00e806,#008a04);color:#00240a;
  font:400 12px var(--pixel);min-height:44px;padding:10px 18px;
}
.btn--go:hover{background:linear-gradient(180deg,#39ff14,#00a005);color:#00240a}
.btn--big{width:100%;font:400 14px var(--pixel);min-height:56px}
.btn[aria-disabled="true"]{color:var(--sh);text-shadow:1px 1px 0 var(--hi);cursor:not-allowed}
.row{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}

.field{
  background:#fff;padding:7px 9px;font:400 15px var(--mono);
  word-break:break-all;user-select:all;
  border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);
}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}

table{width:100%;border-collapse:collapse;font:400 12px var(--ui);background:#fff}
th,td{padding:5px 8px;text-align:left;border:1px solid #b0b0b0}
th{background:#e6e6e6;font-weight:700}
td.num{text-align:right;font-family:var(--mono);font-size:15px}

/* --- hero window ------------------------------------------------ */
.hero{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
.hero__art{width:clamp(110px,22vw,168px);height:auto;
  filter:drop-shadow(3px 4px 0 rgba(0,0,0,.35));animation:bob 3.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-7px) rotate(-1.5deg)}}
.hero__tick{
  display:inline-block;margin-bottom:8px;padding:4px 10px;
  background:#000;color:var(--green-hot);font:400 13px var(--pixel);
  border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);
}
.hero__sub{font:400 15px var(--mono);color:#1a1a1a}

/* --- marquee ---------------------------------------------------- */
.marquee{
  overflow:hidden;white-space:nowrap;background:#000;color:var(--green-hot);
  font:400 16px var(--mono);padding:5px 0;margin:10px 0;
  border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);
}
.marquee > span{display:inline-block;padding-left:100%;animation:slide 26s linear infinite}
.marquee b{color:var(--red);font-weight:400}
@keyframes slide{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){
  .marquee > span{animation:none;padding-left:0}
  .hero__art{animation:none}
}

/* --- fake trading terminal --------------------------------------- */
.tape{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;margin-bottom:8px;font-family:var(--mono);
}
.tape b{font:400 30px/1 var(--mono);color:var(--red)}
.tape .pct{color:var(--red);font-size:19px}
#chart{display:block;width:100%;height:170px;background:#000}
.chartwrap{padding:3px;background:#000;
  border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh)}
.ledger{margin-top:10px;max-height:118px;overflow:auto;background:#000;padding:6px 8px;
  font:400 15px/1.35 var(--mono);color:#8f8f8f;
  border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh)}
.ledger div{white-space:nowrap}
.ledger .l-red{color:var(--red)}
.ledger .l-green{color:var(--green-hot)}

/* --- meter ------------------------------------------------------- */
.meter input[type=range]{width:100%;accent-color:#00360f;margin:8px 0}
.meter__out{font:400 13px var(--pixel);text-align:center;padding:8px;background:#000;color:var(--green-hot);
  border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh)}

/* --- progress (retro) --------------------------------------------- */
.bar{height:20px;padding:2px;background:var(--face);
  border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh)}
.bar > i{display:block;height:100%;background-image:
  repeating-linear-gradient(90deg,#00c805 0 12px, #c0c0c0 12px 15px)}

/* --- meme wall ----------------------------------------------------- */
.memes{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.meme{
  aspect-ratio:1;display:grid;place-items:center;text-align:center;
  padding:8px;background:#101010;color:#7d7d7d;
  font:400 11px/1.35 var(--ui);
  border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);
}
.meme:nth-child(3n){background:#161616}
.meme span{opacity:.8}

/* --- club menu ------------------------------------------------------ */
.menu-list{list-style:none;padding:0;margin:0 0 14px}
.menu-list li{
  display:flex;align-items:baseline;gap:8px;padding:4px 0;
}
.menu-list .dots{flex:1 1 auto;border-bottom:1px dotted #9a9a9a;transform:translateY(-3px)}
.menu-list .price{font-family:var(--mono);font-size:16px;font-weight:700}

/* --- taskbar ---------------------------------------------------------- */
#taskbar{
  position:fixed;left:0;right:0;bottom:0;height:36px;z-index:7000;
  display:flex;align-items:center;gap:5px;padding:3px 4px;
  background:var(--face);
  border-top:2px solid var(--hi);
}
#start{
  display:flex;align-items:center;gap:6px;height:26px;padding:2px 9px 2px 5px;
  font:700 12px var(--ui);
}
#start img{width:18px;height:18px}
#start[aria-expanded="true"]{
  border-color:var(--sh) var(--hi) var(--hi) var(--sh);
  box-shadow:inset 1px 1px 0 var(--dk);
}
#tasks{flex:1 1 auto;display:flex;gap:4px;overflow:hidden;min-width:0}
.task{
  flex:0 1 168px;min-width:0;height:26px;padding:2px 9px;
  display:flex;align-items:center;gap:6px;
  font:400 12px var(--ui);text-align:left;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.task.active{
  border-color:var(--sh) var(--hi) var(--hi) var(--sh);
  box-shadow:inset 1px 1px 0 var(--dk);
  font-weight:700;
}
#tray{
  display:flex;align-items:center;gap:8px;height:26px;padding:2px 8px;
  font:400 11px var(--ui);
  border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);
}
#tray button{background:none;border:none;padding:0;font-size:13px;cursor:pointer;line-height:1}
#clock{font-variant-numeric:tabular-nums;min-width:52px;text-align:right}
#cpu{color:#083}

/* --- start menu --------------------------------------------------------- */
#startmenu{
  position:fixed;left:4px;bottom:38px;z-index:7100;width:238px;
  display:none;background:var(--face);padding:3px;
}
#startmenu.open{display:flex}
#startmenu .banner{
  width:30px;flex:0 0 30px;
  background:linear-gradient(0deg,#00c805,#00360f);
  color:#fff;font:700 14px var(--ui);letter-spacing:1px;
  writing-mode:vertical-rl;transform:rotate(180deg);
  display:grid;place-items:center;padding:12px 0;
}
#startmenu ul{list-style:none;margin:0;padding:0;flex:1 1 auto}
#startmenu li{display:block;margin:0}
#startmenu li.sep{height:0;margin:4px 2px;border-top:1px solid var(--sh);border-bottom:1px solid var(--hi)}
#startmenu a,#startmenu button{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:7px 9px;background:none;border:none;
  font:400 13px var(--ui);color:#0a0a0a;text-align:left;text-decoration:none;cursor:pointer;
}
#startmenu a:hover,#startmenu button:hover{background:#00360f;color:#fff}
#startmenu .ico{width:18px;text-align:center;font-size:15px;flex:0 0 18px}

/* --- BSOD ----------------------------------------------------------------- */
#bsod{
  position:fixed;inset:0;z-index:9500;display:none;
  background:#0000aa;color:#fff;
  font:400 18px/1.6 var(--mono);
  padding:clamp(20px,8vh,90px) clamp(16px,8vw,120px);
}
#bsod.on{display:block}
#bsod h2{background:#c0c0c0;color:#0000aa;display:inline-block;padding:1px 10px;
  font:400 18px var(--mono);margin-bottom:22px}
#bsod .blink{animation:blink 1.1s steps(1) infinite}

/* --- counter ------------------------------------------------------------- */
.counter{display:inline-flex;gap:2px;margin:2px 0 8px}
.counter b{
  background:#000;color:var(--green-hot);
  font:400 18px/1 var(--mono);padding:4px 5px;
  border:1px solid #444;
}

/* --- responsive: no floating windows on small screens -------------------- */
@media (max-width:900px){
  body{overflow:auto;background:#070d0a}
  #desktop{
    position:relative;inset:auto;height:auto;min-height:100vh;
    padding:12px 12px 56px;overflow:visible;
  }
  #icons{
    position:static;inset:auto;flex-direction:row;flex-wrap:wrap;
    max-height:none;justify-content:center;margin-bottom:14px;
  }
  .win{
    position:static!important;
    display:flex!important;
    width:100%!important;height:auto!important;max-width:none;
    /* pas de plafond ici : les fenetres sont empilees et c est la page
       qui defile, pas le corps de chaque fenetre.                   */
    max-height:none;
    margin:0 0 14px;
  }
  .win.min{display:flex!important}
  .win__bar{cursor:default}
  .win__btns{display:none}
  #tasks{display:none}
  .hero{grid-template-columns:1fr;justify-items:center;text-align:center}
}

/* ---------- additions: skip link, meter block, ordered lists ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--face);color:#000;
  padding:8px 14px;font:12px/1 var(--ui);border:2px solid #000}
.skip:focus{left:8px;top:8px}

.meter{margin:10px 0}
.meter label{display:block;font:11px/1.4 var(--ui);margin-bottom:6px;color:#333}

ol{margin:8px 0 12px 22px;padding:0}
ol li{margin:0 0 6px;font:13px/1.55 var(--ui)}

#bsod ul{margin:14px 0;padding-left:8px;list-style:none}
#bsod li{color:#fff;font-family:var(--mono);font-size:19px;line-height:1.5}

span.win__ico{display:inline-block;width:16px;text-align:center;font-size:12px;line-height:1}

/* ==================================================================
   WEB 1.0 UGLY LAYER - GeoCities / Angelfire / Caramail, circa 2001
   Everything below deliberately overrides the clean stuff above.
   Rule: if it looks designed, it is wrong.
   ================================================================== */

:root{
  --ui:"Comic Sans MS","Comic Neue",cursive,sans-serif;
  --mono:"Courier New",Courier,monospace;
  --pixel:Impact,"Anton","Arial Black",Haettenschweiler,sans-serif;
  --serif:"Times New Roman",Times,serif;
  --hot:#ff00ff;
  --cy:#00ffff;
  --yel:#ffff00;
  --lime:#00ff00;
  --orange:#ff6600;
}

/* --- tiled nightmare wallpaper ----------------------------------- */
body{
  background:#2b004f;
}
/* Le papier peint : des losanges qui changent de couleur d'un coup
   toutes les 2,5 s - vert fluo Robinhood, bleu, jaune, rouge. steps(1)
   interdit tout fondu : c'est un clignotement franc, pas un degrade.
   Le motif vit dans un ::before pour que le clignotement ne touche ni
   les fenetres, ni les icones, ni le clipart, tous au-dessus.        */
#desktop{background:#8fc400}
#desktop::before{
  content:"";
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-color:#cdff06;
  background-size:64px 64px,auto,auto,auto;
  background-position:0 0;
  background-image:
    repeating-conic-gradient(from 45deg,#cdff06 0deg 90deg,#8fc400 90deg 180deg),
      radial-gradient(circle at 12% 22%,rgba(0,0,0,.35) 0 3px,transparent 4px),
      radial-gradient(circle at 74% 61%,rgba(255,255,255,.55) 0 3px,transparent 4px),
      radial-gradient(circle at 41% 84%,rgba(0,0,0,.28) 0 3px,transparent 4px);
  animation:losanges 1.6s steps(1,end) infinite;
}
@keyframes losanges{
  0%{
    background-color:#cdff06;
    background-image:
      repeating-conic-gradient(from 45deg,#cdff06 0deg 90deg,#8fc400 90deg 180deg),
      radial-gradient(circle at 12% 22%,rgba(0,0,0,.35) 0 3px,transparent 4px),
      radial-gradient(circle at 74% 61%,rgba(255,255,255,.55) 0 3px,transparent 4px),
      radial-gradient(circle at 41% 84%,rgba(0,0,0,.28) 0 3px,transparent 4px);
  }
  25%{
    background-color:#1555ea;
    background-image:
      repeating-conic-gradient(from 45deg,#1555ea 0deg 90deg,#0d3aa8 90deg 180deg),
      radial-gradient(circle at 12% 22%,rgba(0,0,0,.35) 0 3px,transparent 4px),
      radial-gradient(circle at 74% 61%,rgba(255,255,255,.55) 0 3px,transparent 4px),
      radial-gradient(circle at 41% 84%,rgba(0,0,0,.28) 0 3px,transparent 4px);
  }
  50%{
    background-color:#ffeb01;
    background-image:
      repeating-conic-gradient(from 45deg,#ffeb01 0deg 90deg,#e0a800 90deg 180deg),
      radial-gradient(circle at 12% 22%,rgba(0,0,0,.35) 0 3px,transparent 4px),
      radial-gradient(circle at 74% 61%,rgba(255,255,255,.55) 0 3px,transparent 4px),
      radial-gradient(circle at 41% 84%,rgba(0,0,0,.28) 0 3px,transparent 4px);
  }
  75%{
    background-color:#f5251c;
    background-image:
      repeating-conic-gradient(from 45deg,#f5251c 0deg 90deg,#a10d07 90deg 180deg),
      radial-gradient(circle at 12% 22%,rgba(0,0,0,.35) 0 3px,transparent 4px),
      radial-gradient(circle at 74% 61%,rgba(255,255,255,.55) 0 3px,transparent 4px),
      radial-gradient(circle at 41% 84%,rgba(0,0,0,.28) 0 3px,transparent 4px);
  }
}
@media (prefers-reduced-motion:reduce){#desktop::before{animation:none}}

/* Trois images de fond posees sur le motif : elles vivent dans la meme
   couche que les losanges (z-index:0), sous les icones et les fenetres,
   et ne captent aucun clic.                                          */
#desktop::after{
  content:"";
  position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.72;
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-position:6% 18%,88% 62%,44% 88%;
  background-size:230px 230px,300px 300px,190px 190px;
  background-image:
    url("../img/bg/bg-1.jpg"),
    url("../img/bg/bg-2.jpg"),
    url("../img/bg/bg-3.jpg");
  filter:contrast(1.1) saturate(1.3);
  mix-blend-mode:hard-light;
}
@media (max-width:900px){
  #desktop::after{
    background-position:2% 12%,96% 58%,50% 92%;
    background-size:140px 140px,170px 170px,120px 120px;
  }
}

/* Le WIZZ : la page entiere tremble une demi-seconde quand une alerte
   apparait. La classe est posee sur <html> pour que la barre des taches
   et les fenetres fixes partent avec le reste.                        */
@keyframes wizzshake{
  0%,100%{transform:translate(0,0)}
  10%{transform:translate(-9px,4px) rotate(-.4deg)}
  20%{transform:translate(8px,-6px) rotate(.5deg)}
  30%{transform:translate(-11px,-3px) rotate(.3deg)}
  40%{transform:translate(10px,7px) rotate(-.5deg)}
  50%{transform:translate(-7px,5px) rotate(.4deg)}
  60%{transform:translate(9px,-4px) rotate(-.3deg)}
  70%{transform:translate(-6px,-7px) rotate(.5deg)}
  80%{transform:translate(7px,3px) rotate(-.4deg)}
  90%{transform:translate(-4px,2px)}
}
html.wizz{animation:wizzshake .62s cubic-bezier(.36,.07,.19,.97) both}
@media (prefers-reduced-motion:reduce){html.wizz{animation:none}}

/* Le WIZZ d'une seule fenetre, facon MSN Messenger : c'est la popup qui
   se fait secouer, pas la page. Plus long et plus ample que le petit
   .pop--shake, avec un leger pivot pour que ca parte de travers.      */
@keyframes popwizz{
  0%,100%{transform:translateX(0)}
  6%{transform:translateX(-26px)}
  12%{transform:translateX(26px)}
  18%{transform:translateX(-24px)}
  24%{transform:translateX(24px)}
  32%{transform:translateX(-20px)}
  40%{transform:translateX(20px)}
  50%{transform:translateX(-14px)}
  60%{transform:translateX(14px)}
  72%{transform:translateX(-8px)}
  84%{transform:translateX(5px)}
}
.pop--wizz{animation:popin .16s steps(3),popwizz .7s steps(2,end) .16s both}
@media (prefers-reduced-motion:reduce){.pop--wizz{animation:none}}

/* --- rainbow everything ------------------------------------------ */
@keyframes rainbowslide{to{background-position:-200% 0}}
@keyframes uglyblink{50%{visibility:hidden}}
@keyframes wobble{25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}
@keyframes throb{50%{transform:scale(1.07)}}

h1,h2,h3,.rainbow{
  font-family:var(--pixel);
  text-transform:uppercase;
  letter-spacing:.5px;
  background:linear-gradient(90deg,#f00,#f80,#ff0,#0f0,#0ff,#00f,#f0f,#f00);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  -webkit-text-stroke:1px #000;
  animation:rainbowslide 2.6s linear infinite;
  filter:drop-shadow(2px 2px 0 #000);
}
h2,h3{font-size:20px;margin:14px 0 8px}
.blink{animation:uglyblink .75s steps(1) infinite}

hr{
  height:10px;border:0;margin:14px 0;
  background:linear-gradient(90deg,#f00,#f80,#ff0,#0f0,#0ff,#00f,#f0f);
  background-size:200% 100%;
  animation:rainbowslide 2s linear infinite;
}

/* --- window chrome, but worse ------------------------------------ */
.win{
  border-width:4px;
  box-shadow:6px 6px 0 rgba(0,0,0,.6);
}
.win__bar{
  background:repeating-linear-gradient(90deg,#0000aa 0 8px,#7700bb 8px 16px);
  height:26px;
}
.win__title{
  font-family:var(--pixel);font-size:15px;letter-spacing:.6px;
  color:#ffff00;text-shadow:1px 1px 0 #ff0000,2px 2px 0 #000;
}
.win__body.paper{
  background:#fffbe6;
  background-image:
    repeating-linear-gradient(0deg,rgba(255,0,255,.07) 0 2px,transparent 2px 6px);
  color:#001a66;
  font-family:var(--ui);
}
.win__body.term{background:#000;color:var(--lime)}
.win__menu{
  background:linear-gradient(#ffff66,#ffaa00);
  font-family:var(--ui);font-weight:700;color:#cc0000;
}
.win__menu span:hover{background:#ff00ff;color:#ffff00}
.win__status{
  background:linear-gradient(#ff99cc,#cc0066);
  color:#ffff00;font-family:var(--ui);font-weight:700;
}
.win__status i{font-style:normal;text-shadow:1px 1px 0 #000}

/* --- buttons that hurt ------------------------------------------- */
.btn{
  font-family:var(--ui);font-weight:700;font-size:14px;
  background:linear-gradient(#ffff00,#ff8800);
  color:#cc0000;
  text-shadow:1px 1px 0 #fff;
  border:4px outset #ffff00;
  padding:6px 14px;
}
.btn:hover{
  background:linear-gradient(#00ffff,#0066ff);
  color:#ffff00;text-shadow:1px 1px 0 #000;
  animation:wobble .3s linear infinite;
}
.btn:active{border-style:inset}
.btn--go{
  background:linear-gradient(#00ff00,#008800);
  border-color:#00ff00;color:#ffff00;text-shadow:1px 1px 0 #000;
  animation:throb 1.1s ease-in-out infinite;
}

/* --- hero, but with the Mario logo ------------------------------- */
.hero{display:block;text-align:center}
.hero__logo{
  margin:0 0 6px;
  background:none !important;-webkit-text-stroke:0;animation:none;filter:none;
}
.hero__logo img{
  display:block;width:100%;max-width:460px;height:auto;margin:0 auto;
  image-rendering:pixelated;
  filter:drop-shadow(4px 4px 0 #000) drop-shadow(0 0 14px #ff00ff);
  animation:throb 2.2s ease-in-out infinite;
}
.hero__art{
  width:clamp(96px,20vw,150px);
  animation:bob 3.4s ease-in-out infinite,wobble 1.6s ease-in-out infinite;
}
.hero__tick{
  font-family:var(--pixel);font-size:26px;
  background:#000;color:#00ff00;
  text-shadow:2px 0 #ff0000,-2px 0 #00ffff;
  border:4px ridge #ffff00;
}
.hero__sub{
  font-family:var(--serif);font-style:italic;font-size:17px;
  color:#cc0000;text-shadow:1px 1px 0 #ffff00;
}

/* --- tables and lists, maximum eyesore --------------------------- */
table{border:4px ridge #ff00ff;background:#ffffcc}
th{background:#0000aa;color:#ffff00;font-family:var(--pixel);font-size:14px}
td{border:2px groove #00ffff;font-family:var(--ui);color:#000080}
tr:nth-child(even) td{background:#ffccff}
tr:nth-child(odd) td{background:#ccffff}
ol li,ul li{font-family:var(--ui)}
b,strong{color:#cc0000}
small{font-family:var(--ui);color:#660066}
mark{background:#ffff00;color:#cc0000;font-weight:700}
a{color:#0000ee;text-decoration:underline}
a:visited{color:#551a8b}
a:hover{color:#ff0000;background:#ffff00}

/* --- desktop icons ----------------------------------------------- */
.dicon{font-family:var(--ui);cursor:pointer}
.dicon span:last-child{
  color:#ffff00;text-shadow:1px 1px 0 #000,2px 2px 0 #ff00ff;font-weight:700;
  font-size:10px;line-height:1.25;
  /* petite plaque sombre : le texte reste lisible sur le papier peint */
  padding:1px 4px;background:rgba(0,0,0,.62);
}
.dicon:hover{animation:wobble .35s linear infinite}
.dicon .glyph{font-size:34px;filter:drop-shadow(2px 2px 0 #000)}

/* --- taskbar ------------------------------------------------------ */
#taskbar{
  background:linear-gradient(#cc00cc,#440066);
  border-top:4px outset #ff00ff;
}
#start{
  font-family:var(--pixel);font-size:15px;letter-spacing:.5px;
  background:linear-gradient(#00ff00,#008800);
  color:#ffff00;text-shadow:1px 1px 0 #000;
  border:3px outset #00ff00;
}
.task{
  font-family:var(--ui);font-weight:700;
  background:linear-gradient(#ffcc00,#ff6600);color:#000080;
  border:3px outset #ffcc00;
}
#clock,#cpu{font-family:var(--mono);font-weight:700;color:#00ff00;background:#000}
#startmenu{border:4px outset #ff00ff;background:#ffffcc}
#startmenu a,#startmenu button{font-family:var(--ui);font-weight:700;color:#000080}
#startmenu a:hover,#startmenu button:hover{background:#ff00ff;color:#ffff00}

/* --- marquee turned up ------------------------------------------- */
.marquee{
  background:#ff0000;color:#ffff00;
  font-family:var(--pixel);font-size:19px;letter-spacing:1px;
  border:4px ridge #ffff00;
  display:flex;
}
/* deux copies cote a cote qui glissent chacune de sa propre largeur :
   la seconde prend exactement la place de la premiere, zero trou */
.marquee > span{
  display:block;flex:0 0 auto;padding:0 2em 0 0;
  animation:slide 26s linear infinite;
}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-100%)}}
/* re-neutralise apres l'override ci-dessus */
@media (prefers-reduced-motion:reduce){.marquee > span{animation:none}}

/* --- WEB 1.0 FURNITURE ------------------------------------------- */
.w1{margin:12px 0;text-align:center;font-family:var(--ui)}
.construction{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  background:repeating-linear-gradient(45deg,#ffcc00 0 14px,#000 14px 28px);
  padding:8px;border:4px ridge #ffcc00;margin:12px 0;
}
.construction b{
  background:#000;color:#ffcc00;padding:4px 10px;
  font-family:var(--pixel);font-size:16px;letter-spacing:1px;
}
.construction .cone{font-size:28px;animation:wobble .6s linear infinite}
.bestviewed{
  font-family:var(--mono);font-size:12px;color:#000;background:#c0c0c0;
  border:2px inset #fff;padding:5px 8px;display:inline-block;
}
.webring{
  border:3px dashed #ff00ff;background:#000;color:#00ff00;
  font-family:var(--mono);font-size:13px;padding:8px;
}
.webring a{color:#00ffff;background:none}
.awards{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:10px 0}
.award{
  width:88px;height:31px;display:grid;place-items:center;
  font:700 9px var(--ui);text-align:center;line-height:1.1;
  border:2px outset #888;color:#fff;text-shadow:1px 1px 0 #000;
}
.award:nth-child(1){background:linear-gradient(#ff0080,#800040)}
.award:nth-child(2){background:linear-gradient(#00c8ff,#004080)}
.award:nth-child(3){background:linear-gradient(#ffcc00,#804400)}
.award:nth-child(4){background:linear-gradient(#00ff44,#006622)}
.award:nth-child(5){background:linear-gradient(#aa00ff,#440066)}
.gbook{background:#000080;color:#00ffff;border:3px inset #8080ff;padding:8px;
  font-family:var(--mono);font-size:13px;max-height:190px;overflow:auto}
.gbook p{margin:0 0 8px;padding-bottom:6px;border-bottom:1px dotted #4444aa}
.gbook b{color:#ffff00}

/* --- POPUP HELL --------------------------------------------------- */
#popzone{position:fixed;inset:0;pointer-events:none;z-index:600}
.pop{
  position:absolute;pointer-events:auto;
  width:min(330px,86vw);
  /* UNE POPUP NE PEUT PAS ETRE PLUS HAUTE QUE LE BUREAU.
     Le compte : 42 px de bande defilante en haut, 44 px de barre des
     taches en bas, 10 px de marge. Sans ce plafond, une popup trop
     longue depassait forcement par le bas - place() ne pouvait plus la
     rentrer dans le cadre - et la barre des taches lui coupait le
     pied. Si le contenu ne tient pas, c'est le corps qui defile.    */
  max-height:calc(100vh - 96px);
  display:flex;flex-direction:column;
  background:#c0c0c0;
  border:4px outset #fff;
  box-shadow:5px 5px 0 rgba(0,0,0,.55);
  font-family:var(--ui);
  /* la fenetre entiere se traine : selectionner son texte par accident
     transformerait chaque deplacement en surlignage bleu */
  -webkit-user-select:none;user-select:none;
  animation:popin .16s steps(3);
}
@keyframes popin{from{transform:scale(.6) rotate(-4deg);opacity:.2}}
.pop--shake{animation:popin .16s steps(3),popshake .35s linear 3}
@keyframes popshake{25%{transform:translate(-4px,2px)}75%{transform:translate(4px,-2px)}}
.pop__bar{
  display:flex;align-items:center;gap:6px;height:24px;padding:0 3px 0 6px;
  flex:0 0 24px;
  background:repeating-linear-gradient(90deg,#aa0000 0 8px,#ff6600 8px 16px);
  cursor:move;user-select:none;
}
.pop__bar b{
  flex:1;font-family:var(--pixel);font-size:14px;font-weight:400;
  color:#ffff00;text-shadow:1px 1px 0 #000;letter-spacing:.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pop__bar button{
  width:20px;height:19px;line-height:1;
  background:#c0c0c0;border:2px outset #fff;
  font:700 12px var(--ui);color:#000;cursor:pointer;
}
.pop__bar button:active{border-style:inset}
.pop__body{
  padding:12px;font-size:14px;color:#000080;line-height:1.45;
  flex:1 1 auto;min-height:0;overflow:auto;
}
.pop__body img{display:block;max-width:100%;height:auto;margin:0 auto 8px;border:3px ridge #ff00ff}
.pop__body .big{
  display:block;font-family:var(--pixel);font-size:19px;color:#cc0000;
  text-align:center;margin-bottom:6px;text-shadow:1px 1px 0 #ffff00;
}
.pop__row{display:flex;gap:8px;justify-content:center;margin-top:10px;flex-wrap:wrap}
.pop__row .btn{padding:5px 12px;font-size:13px;border-width:3px}
.pop--ad .pop__body{background:#000;color:#00ff00;font-family:var(--mono);text-align:center}
.pop--ad .pop__body .big{color:#00ff00;text-shadow:0 0 8px #00ff00}
.pop--virus .pop__bar{background:repeating-linear-gradient(90deg,#0000aa 0 8px,#0066ff 8px 16px)}

/* Les alertes : rouge partout, barre de titre qui pulse, tout crie. */
.pop--alarm{border-color:#f5251c;box-shadow:0 0 0 3px #ffeb01,8px 8px 0 rgba(0,0,0,.55)}
.pop--alarm .pop__bar{
  background:repeating-linear-gradient(90deg,#f5251c 0 10px,#a10d07 10px 20px);
  animation:alarmbar .5s steps(1,end) infinite;
}
.pop--alarm .pop__bar b{color:#ffeb01;text-shadow:1px 1px 0 #000}
.pop--alarm .pop__body{background:#2a0000;color:#ffcf00;text-align:center}
.pop--alarm .pop__body .big{color:#ff2a1c;text-shadow:0 0 9px #ff2a1c,2px 2px 0 #000}
.pop--alarm .pop__body b{color:#fff}
@keyframes alarmbar{50%{background:repeating-linear-gradient(90deg,#ffeb01 0 10px,#f5251c 10px 20px)}}
@media (prefers-reduced-motion:reduce){.pop--alarm .pop__bar{animation:none}}
.pop--img .pop__body{background:#111;padding:8px}

/* --- la vraie boite de dialogue Windows, grise et sobre ------------
   Pas de neon ici : c'est le contraste avec les popups criardes qui
   la rend credible. Police systeme forcee, la couche "ugly" ne doit
   pas la transformer en Comic Sans.                                  */
.pop--win{
  font-family:"MS Sans Serif",Tahoma,Verdana,"Segoe UI",sans-serif;
  background:#c0c0c0;
  border:2px outset #dfdfdf;
  box-shadow:inset 1px 1px 0 #fff,inset -1px -1px 0 #808080,
             4px 4px 0 rgba(0,0,0,.45);
}
.pop--win .pop__bar{
  height:20px;margin:2px;padding:0 2px 0 4px;
  background:linear-gradient(90deg,#000080 0%,#1084d0 100%);
}
.pop--win .pop__bar b{
  font-family:"MS Sans Serif",Tahoma,Verdana,sans-serif;
  font-size:12px;font-weight:700;color:#fff;text-shadow:none;letter-spacing:0;
}
.pop--win .pop__bar button{
  width:16px;height:14px;padding:0;
  background:#c0c0c0;border:1px outset #dfdfdf;
  font:700 10px "MS Sans Serif",Tahoma,sans-serif;color:#000;
}
.pop--win .pop__body{
  background:#c0c0c0;color:#000;padding:14px 12px 10px;
  font-size:12px;line-height:1.5;
}
/* le gras des vraies boites Windows reste noir, pas fluo */
.pop--win .pop__body b,
.pop--win .pop__body small,
.pop--win .pop__body p{color:#000;font-family:inherit}
/* icone systeme a gauche, message a droite */
.pop--win .dlg{display:flex;gap:12px;align-items:flex-start}
.pop--win .dlg__ico{
  flex:0 0 32px;width:32px;height:32px;
  display:grid;place-items:center;font-size:28px;line-height:1;
}
.pop--win .dlg__msg{flex:1;min-width:0}
.pop--win .dlg__msg p{margin:0 0 6px}
.pop--win .dlg__msg p:last-child{margin-bottom:0}
.pop--win .dlg__msg b{font-weight:700}
.pop--win .pop__row{
  justify-content:flex-end;gap:6px;
  margin-top:14px;padding-top:10px;border-top:1px solid #9a9a9a;
  box-shadow:0 -1px 0 #fff inset;
}
/* boutons gris carres facon Win98, pas les boutons fluo du site */
.pop--win .pop__row .btn{
  min-width:78px;padding:4px 10px;
  background:#c0c0c0;border:2px outset #dfdfdf;border-radius:0;
  font:400 12px "MS Sans Serif",Tahoma,sans-serif;color:#000;
  text-shadow:none;box-shadow:none;animation:none;letter-spacing:0;
}
.pop--win .pop__row .btn:hover{background:#c8c8c8;color:#000;transform:none}
.pop--win .pop__row .btn:active{border-style:inset;padding:5px 9px 3px 11px}
.pop--win .pop__row .btn:focus-visible{outline:1px dotted #000;outline-offset:-4px}
/* le bouton par defaut a le liftage noir des vraies boites Windows */
.pop--win .pop__row .btn--go{box-shadow:0 0 0 1px #000}
.pop--win .pop__body .big{
  font-family:"MS Sans Serif",Tahoma,sans-serif;font-size:12px;
  color:#000;text-align:left;text-shadow:none;margin-bottom:6px;font-weight:700;
}
/* la barre de progression est definie une fois pour toutes plus bas,
   dans le kit Windows 98. */

/* --- meme wall ---------------------------------------------------- */
.memes{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.meme{
  aspect-ratio:1;overflow:hidden;padding:0;cursor:pointer;
  border:3px outset #ff00ff;background:#000;
  display:grid;place-items:center;
  font:700 10px var(--ui);color:#ff00ff;text-align:center;
}
.meme img{width:100%;height:100%;object-fit:cover;display:block}
.meme:hover{border-color:#00ffff;animation:wobble .3s linear infinite}

/* --- mobile: keep the mess usable --------------------------------- */
@media (max-width:900px){
  .hero__logo img{max-width:300px}
  .pop{width:min(300px,92vw)}
  #popzone{z-index:60}
}

/* --- mascotte en logo principal + ticker long --------------------- */
/* Ce bloc passe apres la couche WEB 1.0 : il doit la surcharger, pas   */
/* etre surcharge par elle.                                            */

/* La mascotte n'est plus un SVG detoure mais la photo carree, fond     */
/* rouge compris. Le drop-shadow dessinerait donc l'ombre d'un carre :  */
/* un cadre Windows 98 rend mieux et raccorde l'image au reste de l'OS. */
/* display:block car .hero__tick est un inline-block : tant que l'image  */
/* reste inline, la pastille se range a sa droite au lieu de passer      */
/* dessous. Le defaut etait discret avec $RTRD, il ne l'est plus.        */
.hero__art{
  display:block;margin:0 auto 14px;
  width:clamp(150px,32vw,240px);height:auto;
  border:3px outset #dfdfdf;
  filter:none;
  box-shadow:4px 5px 0 rgba(0,0,0,.45);
}

/* $ROBINTARDIO fait douze caracteres la ou $RTRD en faisait cinq.      */
/* A 26px de Press Start 2P, la pastille depassait l'ecran sous 400px : */
/* la taille suit desormais la largeur disponible.                      */
.hero__tick{
  box-sizing:border-box;max-width:100%;
  font-size:clamp(12px,4.2vw,26px);
  word-break:break-all;
}

/* Meme cause cote terminal : le nom, le prix et le pourcentage         */
/* tenaient sur une ligne, ils passent maintenant a la suivante plutot  */
/* que de s'ecraser les uns sur les autres.                             */
.tape{flex-wrap:wrap}
.tape b{font-size:clamp(20px,6vw,30px)}

/* ==================================================================
   KIT WINDOWS 98 - les vrais composants d'interface de l'epoque.
   Meme principe que le systeme d'origine : deux traits clairs en haut
   a gauche et deux traits sombres en bas a droite pour un relief, ou
   l'inverse pour un creux. Aucune ombre douce, aucun arrondi.
   ================================================================== */

/* --- barre de progression : les blocs bleus qui avancent ---------- */
.prog{
  height:20px;margin:8px 0 4px;padding:2px;
  background:#fff;
  border:2px solid;border-color:#808080 #fff #fff #808080;
  box-shadow:inset 1px 1px 0 #000,inset -1px -1px 0 #dfdfdf;
  overflow:hidden;
}
.prog span{
  display:block;height:100%;width:0;
  background:repeating-linear-gradient(90deg,#000080 0 10px,transparent 10px 12px);
  animation:progfill 9s steps(22,end) infinite;
}
/* elle n'arrive jamais au bout : elle repart a zero, indefiniment. */
@keyframes progfill{from{width:0}to{width:100%}}
.prog--slow span{animation-duration:26s}
@media (prefers-reduced-motion:reduce){.prog span{animation:none;width:38%}}

/* --- cadre de groupe (le fieldset grave de Win98) ----------------- */
.w98-field{
  margin:10px 0 8px;padding:11px 9px 8px;
  border:1px solid;border-color:#808080 #fff #fff #808080;
  position:relative;
}
.w98-field > b:first-child{
  position:absolute;top:-7px;left:8px;padding:0 4px;
  background:#c0c0c0;font:700 11px var(--ui);color:#000;
}

/* --- onglets ------------------------------------------------------ */
.w98-tabs{display:flex;gap:2px;margin:2px 0 0;padding-left:3px}
.w98-tabs b{
  padding:3px 9px 5px;
  background:#c0c0c0;color:#000;font:400 11px var(--ui);
  border:1px solid;border-color:#fff #808080 #c0c0c0 #fff;
  border-radius:3px 3px 0 0;position:relative;top:2px;
}
.w98-tabs b.on{top:0;padding:5px 9px;font-weight:700;z-index:2}
.w98-pane{
  padding:9px;background:#c0c0c0;
  border:2px solid;border-color:#fff #808080 #808080 #fff;
}
.w98-pane p{margin:0 0 6px;font:400 11px/1.4 var(--ui);color:#000}

/* --- liste deroulante (listbox) ----------------------------------- */
.w98-list{
  background:#fff;color:#000;font:400 11px/1.5 var(--ui);
  border:2px solid;border-color:#808080 #fff #fff #808080;
  box-shadow:inset 1px 1px 0 #000;
  padding:2px;margin:6px 0;max-height:98px;overflow:auto;
}
.w98-list i{display:block;font-style:normal;padding:1px 4px}
.w98-list i.on{background:#000080;color:#fff}

/* --- cases a cocher et boutons radio ------------------------------ */
.w98-check,.w98-radio{
  display:flex;align-items:center;gap:6px;
  font:400 11px var(--ui);color:#000;margin:4px 0;
}
.w98-check em,.w98-radio em{
  flex:0 0 13px;width:13px;height:13px;background:#fff;font-style:normal;
  border:2px solid;border-color:#808080 #fff #fff #808080;
  display:grid;place-items:center;font-size:10px;line-height:1;color:#000;
}
.w98-radio em{border-radius:50%}

/* --- barre d'etat -------------------------------------------------- */
.w98-status{
  display:flex;gap:3px;margin:8px 0 0;
  font:400 11px var(--ui);color:#000;
}
.w98-status span{
  flex:1;padding:2px 5px;background:#c0c0c0;
  border:1px solid;border-color:#808080 #fff #fff #808080;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.w98-status span:last-child{flex:0 0 auto}

/* --- la copie de fichiers : la feuille qui vole d'un dossier a l'autre */
.w98-copy{display:flex;align-items:center;gap:12px;margin:2px 0 4px}
.w98-copy .fly{
  position:relative;flex:0 0 92px;height:32px;
  font-size:18px;line-height:32px;color:#000;
}
.w98-copy .fly u{position:absolute;top:0;text-decoration:none}
.w98-copy .fly u.a{left:0}
.w98-copy .fly u.b{right:0}
.w98-copy .fly b{position:absolute;top:0;left:22px;font-size:14px;animation:flypaper 1.4s linear infinite}
.w98-copy .fly b:nth-of-type(2){animation-delay:.47s}
.w98-copy .fly b:nth-of-type(3){animation-delay:.94s}
.w98-copy .txt{font:400 11px/1.4 var(--ui);color:#000}
@keyframes flypaper{
  0%{transform:translateX(0);opacity:0}
  18%{opacity:1}
  82%{opacity:1}
  100%{transform:translateX(46px);opacity:0}
}
@media (prefers-reduced-motion:reduce){.w98-copy .fly b{animation:none;opacity:1}}

/* ------------------------------------------------------------------
   CURSEURS - doigt d'honneur, main et sablier dessines pixel par pixel
   dans assets/img/cursor/. Un mot-cle de repli suit toujours l'image :
   si le PNG manque, le navigateur retombe dessus sans rien casser.

   Le point actif n'est plus 0 0 : la fleche pointait par son coin
   haut-gauche, une main pointe par le bout du majeur - colonne 10,
   ligne 0. Sans ce reglage on cliquerait a cote de ce qu'on vise.
   Les liens et les boutons gardent la main qui montre : c'est le
   repere universel du cliquable, on ne le sacrifie pas a la blague.
   ------------------------------------------------------------------ */
html,body,#desktop,.win,.pop,.win__body,#boot{
  cursor:url("../img/cursor/fu.png") 10 0,default;
}
a,button,.btn,.dicon,.tab,.meme,.task,#start,.win__ctl,.win__x,
.pop__bar button,[data-close],[data-more],summary,label{
  cursor:url("../img/cursor/hand.png") 8 0,pointer;
}
.win__bar,.pop__bar,.pop{cursor:url("../img/cursor/fu.png") 10 0,move}
/* le corps sert de poignee, mais ce qui se clique garde la main */
.pop a,.pop button,.pop .btn,.pop [data-close],.pop [data-more]{
  cursor:url("../img/cursor/hand.png") 8 0,pointer;
}
.is-busy,.is-busy *{cursor:url("../img/cursor/busy.png") 8 13,wait}

/* --- la trainee de paillettes derriere la souris ------------------- */
#sparks{position:fixed;inset:0;z-index:9998;pointer-events:none;overflow:hidden}
.spark{
  position:absolute;
  font:700 13px/1 "Courier New",monospace;
  text-shadow:0 0 6px currentColor;
  will-change:transform,opacity;
  animation:sparkfall .72s linear forwards;
}
@keyframes sparkfall{
  0%{transform:translate(-50%,-50%) scale(1.15) rotate(0deg);opacity:1}
  100%{transform:translate(-50%,24px) scale(.2) rotate(160deg);opacity:0}
}
@media (prefers-reduced-motion:reduce){#sparks{display:none}}

/* ---------------------------------------------------------------
   CURSEUR MULTICOLORE - huit fleches teintees, une classe par
   teinte posee sur <html> par app.js. Le mot-cle de repli reste
   la : PNG manquant, le navigateur ne casse rien.
   --------------------------------------------------------------- */
html.cur0,html.cur0 body,html.cur0 #desktop,html.cur0 .win,html.cur0 .pop,html.cur0 .win__body,html.cur0 #boot{cursor:url("../img/cursor/fu-c0.png") 10 0,default}
html.cur0 a,html.cur0 button,html.cur0 .btn,html.cur0 .dicon,html.cur0 .tab,html.cur0 .meme,html.cur0 .task,html.cur0 #start,html.cur0 [data-close],html.cur0 [data-more],html.cur0 summary,html.cur0 label{cursor:url("../img/cursor/hand-c0.png") 8 0,pointer}
html.cur0 .win__bar,html.cur0 .pop__bar{cursor:url("../img/cursor/fu-c0.png") 10 0,move}
html.cur1,html.cur1 body,html.cur1 #desktop,html.cur1 .win,html.cur1 .pop,html.cur1 .win__body,html.cur1 #boot{cursor:url("../img/cursor/fu-c1.png") 10 0,default}
html.cur1 a,html.cur1 button,html.cur1 .btn,html.cur1 .dicon,html.cur1 .tab,html.cur1 .meme,html.cur1 .task,html.cur1 #start,html.cur1 [data-close],html.cur1 [data-more],html.cur1 summary,html.cur1 label{cursor:url("../img/cursor/hand-c1.png") 8 0,pointer}
html.cur1 .win__bar,html.cur1 .pop__bar{cursor:url("../img/cursor/fu-c1.png") 10 0,move}
html.cur2,html.cur2 body,html.cur2 #desktop,html.cur2 .win,html.cur2 .pop,html.cur2 .win__body,html.cur2 #boot{cursor:url("../img/cursor/fu-c2.png") 10 0,default}
html.cur2 a,html.cur2 button,html.cur2 .btn,html.cur2 .dicon,html.cur2 .tab,html.cur2 .meme,html.cur2 .task,html.cur2 #start,html.cur2 [data-close],html.cur2 [data-more],html.cur2 summary,html.cur2 label{cursor:url("../img/cursor/hand-c2.png") 8 0,pointer}
html.cur2 .win__bar,html.cur2 .pop__bar{cursor:url("../img/cursor/fu-c2.png") 10 0,move}
html.cur3,html.cur3 body,html.cur3 #desktop,html.cur3 .win,html.cur3 .pop,html.cur3 .win__body,html.cur3 #boot{cursor:url("../img/cursor/fu-c3.png") 10 0,default}
html.cur3 a,html.cur3 button,html.cur3 .btn,html.cur3 .dicon,html.cur3 .tab,html.cur3 .meme,html.cur3 .task,html.cur3 #start,html.cur3 [data-close],html.cur3 [data-more],html.cur3 summary,html.cur3 label{cursor:url("../img/cursor/hand-c3.png") 8 0,pointer}
html.cur3 .win__bar,html.cur3 .pop__bar{cursor:url("../img/cursor/fu-c3.png") 10 0,move}
html.cur4,html.cur4 body,html.cur4 #desktop,html.cur4 .win,html.cur4 .pop,html.cur4 .win__body,html.cur4 #boot{cursor:url("../img/cursor/fu-c4.png") 10 0,default}
html.cur4 a,html.cur4 button,html.cur4 .btn,html.cur4 .dicon,html.cur4 .tab,html.cur4 .meme,html.cur4 .task,html.cur4 #start,html.cur4 [data-close],html.cur4 [data-more],html.cur4 summary,html.cur4 label{cursor:url("../img/cursor/hand-c4.png") 8 0,pointer}
html.cur4 .win__bar,html.cur4 .pop__bar{cursor:url("../img/cursor/fu-c4.png") 10 0,move}
html.cur5,html.cur5 body,html.cur5 #desktop,html.cur5 .win,html.cur5 .pop,html.cur5 .win__body,html.cur5 #boot{cursor:url("../img/cursor/fu-c5.png") 10 0,default}
html.cur5 a,html.cur5 button,html.cur5 .btn,html.cur5 .dicon,html.cur5 .tab,html.cur5 .meme,html.cur5 .task,html.cur5 #start,html.cur5 [data-close],html.cur5 [data-more],html.cur5 summary,html.cur5 label{cursor:url("../img/cursor/hand-c5.png") 8 0,pointer}
html.cur5 .win__bar,html.cur5 .pop__bar{cursor:url("../img/cursor/fu-c5.png") 10 0,move}
html.cur6,html.cur6 body,html.cur6 #desktop,html.cur6 .win,html.cur6 .pop,html.cur6 .win__body,html.cur6 #boot{cursor:url("../img/cursor/fu-c6.png") 10 0,default}
html.cur6 a,html.cur6 button,html.cur6 .btn,html.cur6 .dicon,html.cur6 .tab,html.cur6 .meme,html.cur6 .task,html.cur6 #start,html.cur6 [data-close],html.cur6 [data-more],html.cur6 summary,html.cur6 label{cursor:url("../img/cursor/hand-c6.png") 8 0,pointer}
html.cur6 .win__bar,html.cur6 .pop__bar{cursor:url("../img/cursor/fu-c6.png") 10 0,move}
html.cur7,html.cur7 body,html.cur7 #desktop,html.cur7 .win,html.cur7 .pop,html.cur7 .win__body,html.cur7 #boot{cursor:url("../img/cursor/fu-c7.png") 10 0,default}
html.cur7 a,html.cur7 button,html.cur7 .btn,html.cur7 .dicon,html.cur7 .tab,html.cur7 .meme,html.cur7 .task,html.cur7 #start,html.cur7 [data-close],html.cur7 [data-more],html.cur7 summary,html.cur7 label{cursor:url("../img/cursor/hand-c7.png") 8 0,pointer}
html.cur7 .win__bar,html.cur7 .pop__bar{cursor:url("../img/cursor/fu-c7.png") 10 0,move}

/* ==================================================================
   ZOOM - tout est plus gros. Un bureau de 1998 sur un ecran de 2026,
   c'est illisible tant qu'on garde les 11 px d'origine. Ce bloc passe
   en dernier : il reprend les memes selecteurs que les regles plus
   haut pour les surcharger sans avoir a les retoucher une par une.
   ================================================================== */

/* --- icones du bureau : glyphe plus gros, nom bien lisible -------- */
.dicon{width:134px;font-size:12px;padding:6px 2px 5px}
.dicon .glyph{width:40px;height:40px;font-size:36px}
.dicon img{width:40px;height:40px}
.dicon span:last-child{font-size:12px;padding:2px 5px}

/* --- typographie generale ---------------------------------------- */
h1{font-size:clamp(19px,3.6vw,28px)}
h2,h3{font-size:24px}
h3{font-size:19px}
small{font-size:14px}
p,li,dd,dt,td,th{font-size:inherit}
.btn{font-size:15px;min-height:48px;padding:11px 20px}
.btn--big{font-size:18px;min-height:62px}
.field{font-size:18px}
table{font-size:15px}
td.num{font-size:19px}
.hero__sub{font-size:19px}
.tape b{font-size:36px}
.tape .pct{font-size:23px}
.term{font-size:19px}
.meter__out{font-size:16px}
.menu-list .price{font-size:19px}

/* --- barre des taches et menu Demarrer ---------------------------- */
#taskbar{height:42px;font-size:14px}
#start{font-size:17px;padding:5px 14px}
#startmenu{width:290px}
#startmenu a{font-size:16px;padding:8px 10px}
#startmenu .ico{width:24px;flex:0 0 24px;font-size:20px}
#tray{font-size:14px}
#tray button{font-size:17px}
.task{font-size:14px}

/* --- fenetres ----------------------------------------------------- */
.win__bar{height:30px;flex-basis:30px}
.win__bar b{font-size:15px}
.win__ico{width:19px;height:19px;font-size:16px}
.win__body{font-size:15px}

/* --- popups : le titre, le corps, les boutons --------------------- */
.pop__bar{height:30px;flex:0 0 30px}
.pop__bar b{font-size:17px}
.pop__bar button{width:26px;height:24px;font-size:15px}
.pop__body{font-size:17px;padding:16px}
.pop__body .big{font-size:26px}
.pop__row .btn{font-size:16px;padding:8px 16px}
.pop--win .pop__bar{height:26px}
.pop--win .pop__bar b{font-size:15px}
.pop--win .pop__bar button{width:22px;height:19px;font-size:13px}
.pop--win .pop__body{font-size:15px;padding:18px 16px 14px}
.pop--win .pop__body .big{font-size:16px}
.pop--win .pop__row .btn{font-size:15px;min-width:96px;padding:6px 14px}
.pop--win .dlg__ico{flex:0 0 44px;width:44px;height:44px;font-size:40px}

/* --- LES GROSSES POPUPS ------------------------------------------
   Les popups droles (alertes, arnaques, boites de dialogue) ne sont
   plus des vignettes : elles prennent la moitie de l'ecran. Seules
   les popups image gardent leur format d'origine, sinon le mur de
   memes devient un mur tout court.                                  */
.pop--huge{width:min(568px,94vw)}
.pop--huge .pop__bar{height:32px;flex:0 0 32px}
.pop--huge .pop__bar b{font-size:19px}
.pop--huge .pop__bar button{width:30px;height:26px;font-size:16px}
.pop--huge .pop__body{font-size:18px;padding:20px 18px;line-height:1.5}
.pop--huge .pop__body .big{font-size:30px;margin-bottom:10px}
.pop--huge .pop__row{margin-top:15px}
.pop--huge .pop__row .btn{font-size:17px;padding:10px 20px;min-height:46px}
.pop--huge.pop--win .pop__body{font-size:17px;padding:22px 18px 15px}
.pop--huge.pop--win .pop__body .big{font-size:18px}
.pop--huge.pop--win .dlg__ico{flex:0 0 48px;width:48px;height:48px;font-size:44px}
.pop--huge.pop--win .pop__row .btn{font-size:15px;min-width:106px}
.pop--huge .w98-list,.pop--huge .w98-pane p{font-size:15px}
@media (max-width:900px){
  .pop--huge{width:min(400px,96vw)}
  .pop--huge .pop__body{font-size:16px;padding:14px}
  .pop--huge .pop__body .big{font-size:23px}
}

/* --- L'ALERTE AU CENTRE, PAR-DESSUS TOUT -------------------------
   Certaines alertes ne se rangent pas dans un coin : elles se plantent
   au milieu de l'ecran, au-dessus de la pile, et il faut passer par
   elles. place() decide au hasard quelles popups y ont droit.       */
.pop--center{
  left:50% !important;top:50% !important;
  transform:translate(-50%,-50%);
  z-index:900;
}
.pop--center.pop--wizz{animation:popin .16s steps(3),popwizzc .7s steps(2,end) .16s both}
@keyframes popwizzc{
  0%,100%{transform:translate(-50%,-50%)}
  6%{transform:translate(calc(-50% - 26px),-50%)}
  12%{transform:translate(calc(-50% + 26px),-50%)}
  18%{transform:translate(calc(-50% - 22px),-50%)}
  24%{transform:translate(calc(-50% + 22px),-50%)}
  32%{transform:translate(calc(-50% - 18px),-50%)}
  40%{transform:translate(calc(-50% + 18px),-50%)}
  50%{transform:translate(calc(-50% - 12px),-50%)}
  60%{transform:translate(calc(-50% + 12px),-50%)}
  72%{transform:translate(calc(-50% - 7px),-50%)}
  84%{transform:translate(calc(-50% + 4px),-50%)}
}
@media (prefers-reduced-motion:reduce){.pop--center.pop--wizz{animation:none}}

/* --- LA BANDE DEFILANTE COLLEE EN HAUT ---------------------------- */
#topbar{
  position:fixed;left:0;right:0;top:0;height:34px;z-index:7400;
  display:flex;align-items:center;overflow:hidden;
  background:#ffeb01;
  border-bottom:3px solid #000;
  box-shadow:0 3px 0 rgba(0,0,0,.4);
  pointer-events:none;
}
#topbar .marquee{
  margin:0;width:100%;border:0;background:transparent;padding:0;
  font-family:"Arial Black",Impact,sans-serif;
}
#topbar .marquee > span{
  font-size:21px;line-height:34px;color:#f5251c;
  text-transform:uppercase;letter-spacing:.02em;
  animation-duration:19s;
}
/* le bureau et les icones descendent d'autant : rien ne passe dessous */
#icons{inset:44px auto 10px 10px}
@media (max-width:900px){
  #topbar{height:28px}
  #topbar .marquee > span{font-size:16px;line-height:28px}
  #icons{inset:36px auto 10px 6px}
}

/* --- ORDRE DE PILE DU BUREAU --------------------------------------
   #desktop::after arrive en dernier dans l'arbre : sans z-index
   explicite sur les freres positionnes, les images de fond passeraient
   PAR-DESSUS les icones et les fenetres. On fixe donc les etages.
   (le gestionnaire de fenetres part de 100, il reste au-dessus)      */
#stickers,#gifs{z-index:1}
#icons{z-index:10}
.win{z-index:20}

/* --- les paillettes debordent : plus grosses, plus lumineuses ----- */
.spark{
  animation-duration:.76s;
  text-shadow:0 0 8px currentColor,0 0 14px currentColor;
}

/* =====================================================================
   NOTIFICATIONS MSN + FENETRE DE CHAT
   Coin bas-droite, juste au-dessus de la barre des taches. Trois
   vignettes maxi, empilees vers le haut. Meme grammaire visuelle que
   les popups : biseau Windows, barre de titre rayee, police pixel.
   ===================================================================== */
#toasts{
  position:fixed;right:10px;bottom:calc(var(--bar) + 10px);
  z-index:6500;                       /* au-dessus des popups (600), sous la barre (7000) */
  display:flex;flex-direction:column-reverse;gap:8px;
  pointer-events:none;
  max-width:calc(100vw - 20px);
}
.toast{
  pointer-events:auto;
  width:300px;max-width:calc(100vw - 20px);
  background:var(--face);
  border:3px outset #fff;
  box-shadow:4px 4px 0 rgba(0,0,0,.5);
  font-family:var(--ui);
  cursor:pointer;
  animation:toastin .22s cubic-bezier(.2,1.4,.4,1);
}
.toast:hover{border-color:#ffff00 #808080 #808080 #ffff00}
@keyframes toastin{from{transform:translateX(340px);opacity:0}}
.toast--out{animation:toastout .24s ease-in forwards}
@keyframes toastout{to{transform:translateX(340px);opacity:0}}

.toast__bar{
  display:flex;align-items:center;gap:6px;height:20px;padding:0 2px 0 6px;
  background:repeating-linear-gradient(90deg,#1555ea 0 8px,#00a2ff 8px 16px);
}
.toast__bar b{
  flex:1;font-family:var(--pixel);font-size:8px;font-weight:400;
  color:#ffff00;text-shadow:1px 1px 0 #000;letter-spacing:.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.toast__x{
  width:18px;height:16px;line-height:1;flex:0 0 18px;
  background:var(--face);border:2px outset #fff;
  font:700 11px var(--ui);color:#000;cursor:pointer;padding:0;
}
.toast__x:active{border-style:inset}

.toast__in{display:flex;gap:8px;padding:8px 9px 6px;align-items:flex-start}
.toast__av{
  flex:0 0 48px;width:48px;height:48px;
  border:2px solid;border-color:#808080 #fff #fff #808080;
  image-rendering:pixelated;object-fit:cover;background:#000;
}
.toast__txt{min-width:0;flex:1}
.toast__who{
  display:block;font-size:13px;color:#00007b;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.toast__sub{
  display:block;font-size:9.5px;color:#008000;letter-spacing:.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.toast__msg{
  margin:4px 0 0;font-size:12.5px;color:#000;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.toast__foot{
  padding:2px 8px 5px;font-size:10px;color:#c00080;
  font-family:var(--pixel);letter-spacing:.3px;
}

/* ---------------------------------------------------------------------
   LA FENETRE DE CHAT
   --------------------------------------------------------------------- */
#chatzone{position:fixed;inset:0;pointer-events:none;z-index:6400}
.chat{
  position:absolute;pointer-events:auto;
  display:flex;flex-direction:column;
  max-height:calc(100vh - 96px);
  background:var(--face);
  border:4px outset #fff;
  box-shadow:6px 6px 0 rgba(0,0,0,.55);
  font-family:var(--ui);
  animation:popin .16s steps(3);
}
.chat__bar{
  display:flex;align-items:center;gap:6px;height:24px;flex:0 0 24px;
  padding:0 3px 0 5px;cursor:move;user-select:none;
  background:repeating-linear-gradient(90deg,#7b00b0 0 8px,#ff00ff 8px 16px);
}
.chat__bar img{flex:0 0 16px;image-rendering:pixelated}
.chat__bar b{
  flex:1;font-family:var(--pixel);font-size:9px;font-weight:400;
  color:#ffff00;text-shadow:1px 1px 0 #000;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.chat__x{
  width:20px;height:19px;line-height:1;flex:0 0 20px;
  background:var(--face);border:2px outset #fff;
  font:700 12px var(--ui);color:#000;cursor:pointer;padding:0;
}
.chat__x:active{border-style:inset}

.chat__head{
  display:flex;align-items:center;gap:10px;padding:8px 10px;
  background:linear-gradient(180deg,#dfe9ff,#a8c0ff);
  border-bottom:2px solid #808080;
}
.chat__head img{
  flex:0 0 56px;width:56px;height:56px;
  border:2px solid;border-color:#808080 #fff #fff #808080;
  image-rendering:pixelated;object-fit:cover;background:#000;
}
.chat__head b{display:block;font-size:15px;color:#00007b}
.chat__head span{display:block;font-size:10px;color:#006400;margin-top:2px}

.chat__log{
  flex:1 1 auto;min-height:190px;max-height:44vh;overflow:auto;
  padding:9px;background:#fff;
  border:2px solid;border-color:#808080 #fff #fff #808080;
  margin:6px 6px 0;
}
.bub{
  margin:0 0 7px;padding:6px 9px;font-size:13px;line-height:1.35;
  max-width:82%;width:fit-content;
  border:2px solid;border-color:#fff #808080 #808080 #fff;
}
.bub--her{background:#ffe3f6;color:#000;margin-right:auto}
.bub--me{background:#dfffe0;color:#000;margin-left:auto;text-align:right}
.bub--sys{
  background:none;border:0;padding:2px 0;margin:0 auto 7px;text-align:center;
  font-family:var(--pixel);font-size:8.5px;color:#c00080;max-width:100%;
}

.chat__type{
  height:15px;padding:1px 10px;font-size:10.5px;color:#666;font-style:italic;
  visibility:hidden;
}
.chat__type.on{visibility:visible}
.chat__type i{
  display:inline-block;width:4px;height:4px;background:#666;
  border-radius:50%;margin-right:1px;animation:dotbob .9s infinite;
}
.chat__type i:nth-child(2){animation-delay:.15s}
.chat__type i:nth-child(3){animation-delay:.3s}
@keyframes dotbob{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-3px)}}

.chat__send{display:flex;gap:5px;padding:0 6px 6px;align-items:stretch}
.chat__in{
  flex:1 1 auto;min-width:0;
  font:13px var(--ui);color:#000;padding:5px 7px;background:#fff;
  border:2px solid;border-color:#808080 #fff #fff #808080;
}
.chat__in:focus{outline:2px dotted #ff00ff;outline-offset:-4px}
.chat__send .btn{font-size:12px;padding:4px 11px;min-height:0;white-space:nowrap}
.chat__nudge{font-size:15px !important;padding:4px 8px !important}
.chat__note{
  padding:0 8px 7px;font-size:9.5px;color:#555;line-height:1.35;
  border-top:1px solid #a0a0a0;margin-top:2px;padding-top:5px;
}

/* le NUDGE de MSN : la fenetre se prend une secousse laterale */
.chat--nudge{animation:nudge .5s ease-in-out}
@keyframes nudge{
  0%,100%{transform:translate(0,0)}
  10%{transform:translate(-9px,3px)}
  22%{transform:translate(8px,-4px)}
  36%{transform:translate(-7px,-3px)}
  50%{transform:translate(6px,4px)}
  64%{transform:translate(-5px,2px)}
  78%{transform:translate(4px,-2px)}
  90%{transform:translate(-2px,1px)}
}

@media (max-width:640px){
  #toasts{right:6px;bottom:48px;gap:6px}
  .toast{width:calc(100vw - 16px)}
  .chat{max-height:calc(100vh - 80px)}
  .chat__log{min-height:150px;max-height:38vh}
}

@media (prefers-reduced-motion:reduce){
  .toast,.chat{animation:none}
  .toast--out{animation:none;opacity:0}
  .chat--nudge{animation:none}
  .chat__type i{animation:none}
}

/* ==================================================================== */
/* JACKPOT - fenetre doree + averse de pieces                          */
/* Bloc autonome : rien d'autre dans la feuille n'en depend. Si on      */
/* retire jackpot.js, tout ce qui suit devient inerte.                  */
/* ==================================================================== */
#jackzone{position:fixed;inset:0;pointer-events:none;z-index:6600;overflow:hidden}

/* --- les pieces --- */
.coin{
  position:absolute;top:-40px;
  font-family:var(--pixel);font-style:normal;font-weight:700;
  color:#ffd700;
  text-shadow:1px 1px 0 #a06800,2px 2px 0 #000,0 0 10px #ffb703;
  animation:coinfall linear forwards,coinspin steps(4) infinite;
  will-change:transform;
}
@keyframes coinfall{to{transform:translateY(calc(100vh + 80px))}}
@keyframes coinspin{50%{filter:brightness(1.6)}}

/* --- la fenetre --- */
.jack{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  pointer-events:auto;
  width:min(520px,92vw);
  max-height:calc(100vh - 70px);
  display:flex;flex-direction:column;
  background:#c0c0c0;
  border:4px outset #ffe97f;
  box-shadow:0 0 0 3px #ffd700,0 0 26px 6px rgba(255,183,3,.55),
             8px 8px 0 rgba(0,0,0,.6);
  font-family:var(--ui);
  animation:jackin .22s steps(4);
}
@keyframes jackin{from{transform:translate(-50%,-50%) scale(.5) rotate(6deg);opacity:.2}}

.jack__bar{
  display:flex;align-items:center;gap:6px;height:32px;flex:0 0 32px;
  padding:0 3px 0 8px;
  background:repeating-linear-gradient(90deg,#b47500 0 9px,#ffd700 9px 18px);
  user-select:none;
}
.jack__bar b{
  flex:1;font-family:var(--pixel);font-size:18px;font-weight:400;
  color:#3a1d00;text-shadow:1px 1px 0 #fff5c2;letter-spacing:.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.jack__bar button{
  width:30px;height:26px;line-height:1;
  background:#c0c0c0;border:2px outset #fff;
  font:700 16px var(--ui);color:#000;cursor:pointer;
}
.jack__bar button:active{border-style:inset}

.jack__body{
  padding:18px 18px 14px;text-align:center;color:#000080;
  background:
    repeating-linear-gradient(45deg,rgba(255,215,0,.14) 0 10px,transparent 10px 20px),
    #dfdfdf;
  flex:1 1 auto;min-height:0;overflow:auto;
}
.jack__big{
  display:block;font-family:var(--pixel);font-size:34px;line-height:1.05;
  color:#e00000;
  text-shadow:2px 2px 0 #ffd700,4px 4px 0 #000;
  margin-bottom:10px;
}
.jack__count{
  font-family:var(--mono);font-size:38px;font-weight:700;
  color:#0a7a00;background:#000;
  border:3px inset #808080;
  padding:4px 0;margin:0 auto 12px;width:min(300px,90%);
  letter-spacing:2px;
}
.jack__count.is-done{color:#ff2d20;animation:uglyblink .75s steps(1) 4}
.jack__line{font-size:19px;margin:0 0 6px}
.jack__note{font-size:14px;color:#5a0000;margin:0 0 4px}
.jack__row{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.jack__row .btn{font-size:16px;padding:9px 20px;border-width:3px;min-width:110px}
.jack__fine{
  font-size:11px;color:#444;margin:12px 0 0;line-height:1.35;
  font-family:var(--ui);
}

@media (max-width:640px){
  .jack__big{font-size:24px}
  .jack__count{font-size:28px}
  .jack__line{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .jack{animation:none}
  .jack__count.is-done{animation:none}
  .coin{display:none}
}