/* Intrusion — habillage repris du site muxxu d'origine.
   Géométrie mesurée sur img/site/design/site_header.png (1276×450) :
   cadre du bandeau x 182→1088 (906 px), bande sombre y 62→96, filet orange y 96→99,
   barre de navigation y 100→138. Le fond (dégradé + hexagones + carte) est porté par
   le body, centré : le cadre tombe alors exactement sur #int-page. */

/* polices extraites du SWF (tools/build_assets.py), renommées sans espaces */
@font-face { font-family: 'int-agency';      src: url('../font/agency.ttf') format('truetype'); }
@font-face { font-family: 'int-agency-bold'; src: url('../font/agency-bold.ttf') format('truetype'); }
@font-face { font-family: 'int-visitor';     src: url('../font/visitor.ttf') format('truetype'); }
@font-face { font-family: 'int-miriam';      src: url('../font/miriam.ttf') format('truetype'); }
@font-face { font-family: 'int-bitdust';     src: url('../font/bitdust.ttf') format('truetype'); }
@font-face { font-family: 'int-cambria';     src: url('../font/cambria.ttf') format('truetype'); }

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Fond : la colonne site_header_bg.png (2×450) prolonge le dégradé sur toute la largeur,
   et se termine sur la couleur unie du bas. */
body {
  background: #3b3d28 url('../img/site/design/site_header_bg.png') repeat-x left top;
  color: #cfd2a0;
  font: 11px Tahoma, Verdana, Geneva, sans-serif;
}

/* L'illustration du bandeau est ancrée sur la page, pas sur la fenêtre du navigateur :
   sinon, dès que le viewport est plus étroit que 906 px (mobile), la page ne peut plus
   être centrée alors que le fond, lui, reste centré — le cadre se décale et l'encart
   « Niveau »/crédits sort du bandeau. Décalage -188 px = le calage historique
   (fond centré à 50% - 3px face à une page de 906 px centrée). */
#int-page { width: 906px; margin: 0 auto; position: relative; }
#int-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: -188px;
  width: 1276px;
  height: 450px;
  background: url('../img/site/design/site_header.png') no-repeat left top;
  z-index: -1;
  pointer-events: none;
}

/* ===== bandeau ===== */
#int-header { position: relative; height: 138px; }
#int-header h1 { position: absolute; left: -9999px; }   /* le logo est dans l'image */

/* « Niveau N » : encart sombre à texte clair, dans la bande sombre, à droite.
   Le trait clair du bas est la jauge de progression vers le niveau suivant. */
#int-header .int-level {
  position: absolute;
  /* Le cadre de site_header.png (x 182→1088) tombe 6 px à gauche de #int-page : son
     bord droit est donc à 900, et le liseré clair occupe 899-900. La bande sombre
     s'arrête à 898, soit 8 px avant le bord de la page. */
  right: 8px;
  top: 70px;
  width: 100px;      /* #glevel : width 100px, height 18px, sans retrait horizontal */
  height: 18px;
  padding: 2px 0 0;
  text-align: right;
  color: #d0d194;
  background: #5f613f;
  /* le cadre s'arrondit sur ~5 px en haut à droite (bord à 895 sur la première ligne
     de l'encart, puis 896, 897, 898) : sans ce rayon l'angle carré dépasse la courbe */
  border-top-right-radius: 5px;
  border-top: 1px solid #3b3d28;
  outline: 1px solid #838657;
  /* style.css d'origine, #glevel/#money : 9pt gras, interlettrage 1pt, aligné à droite */
  font: bold 9pt 'Trebuchet MS', 'DejaVu Sans', Verdana, Arial, sans-serif;
  letter-spacing: 1pt;
  overflow: hidden;
}
#int-header .int-level .lv { color: #d0d194; padding-right: 4px; }   /* #glevel span */
/* #glevel .bar : piste sombre de 1 px à 16 px du haut, remplissage jaune par-dessus */
#int-header .int-level::after {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  width: 100%;
  height: 1px;
  background: #3b3d28;
}
#int-header .int-level .xp {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 16px;
  height: 1px;
  background: #fed82a;
}

/* barre de navigation : icône + libellé, séparateurs « | ».
   Elle démarre à l'aplomb du « I » de INTRUSION (≈100 px du bord du cadre). */
#int-header nav {
  position: absolute;
  left: 106px;
  top: 100px;
  width: 792px;   /* s'arrête à 898, comme l'encart « Niveau » : le liseré du cadre
                     occupe 899-900 et les crédits sont calés sur ce bord droit */
  height: 29px;   /* la bande vraiment claire va de y=100 à y=128 dans site_header.png */
  display: flex;
  align-items: center;
  gap: 1px;
}
#int-header nav a {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px 3px;
  color: #4f5330;
  /* .mxmainmenu a : 10pt, aucun interlettrage, police du site */
  font: 10pt 'Trebuchet MS', 'DejaVu Sans', Verdana, Arial, sans-serif;
  letter-spacing: 0;
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
}
#int-header nav a:hover { color: #d0d194; background: #595c3c; }
#int-header nav a.on {          /* .mxmainmenu a.current : fond orange, sans gras */
  color: #595c3c;
  background: #e59f07;
  outline: 1px solid #595c3c;
  border-color: transparent;
}
#int-header nav a img { display: block; }
#int-header nav .sep { color: #9ea073; font-style: normal; padding: 0 2px; }
#int-header nav .int-credits {   /* même gabarit que l'encart « Niveau » */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-left: auto;
  width: 100px;
  height: 18px;
  padding: 0 4px 0 6px;
  color: #3b3d28;
  font: bold 9pt 'Trebuchet MS', 'DejaVu Sans', Verdana, Arial, sans-serif;
  letter-spacing: 1pt;
  background: #b0b17c;
  border-top: 1px solid #71754c;
  outline: 1px solid #d0d194;
}

/* ===== fenêtre « INTRUSION.PRG » ===== */
.int-window {
  /* le contenu démarre à 168 px du haut de la page (design.css : .mxtopmaincontent) ;
     le bandeau en occupe 138, d'où ces 30 px qui laissent voir son ombre portée */
  margin-top: 30px;
  background: #2f3419;
  border: 1px solid #262b0a;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
}
.int-wtitle {
  display: flex;
  align-items: stretch;
  height: 19px;
  background: #d9dca0;
  border-bottom: 1px solid #4a4f26;
  color: #6b6d4a;
  font-size: 11px;
}
/* Le motif fait 8 px de haut : il forme une bande centrale et ne remplit pas la barre,
   comme dans le site d'origine (bandeau clair au-dessus et au-dessous des hachures). */
.int-wtitle .hatch {
  background: url('../img/site/design/window_title.png') repeat-x left 5px;
}
.int-wtitle .hatch.pre { width: 15px; }
.int-wtitle .hatch.grow { flex: 1; }
.int-wtitle .txt { padding: 3px 7px 0; white-space: nowrap; }
.int-wtitle .close {
  width: 18px;
  height: 13px;
  margin: 3px 3px 0 4px;
  background: url('../img/site/design/window_close.png') no-repeat;
}
.int-wtitle .close:hover { background-image: url('../img/site/design/window_close_over.png'); }
/* Le jeu, le panneau et l'objectif ne sont pas trois cadres séparés : ils sont posés
   dans UN grand cadre olive (mesuré sur la capture d'origine : entre le contenu du jeu
   et celui du panneau il n'y a que le liseré clair puis la bande olive, jamais le fond
   de la fenêtre). */
/* Le fond olive remplit toute la fenêtre : pas de marge qui laisserait voir le fond
   sombre autour. Contour biseauté (clair en haut/à gauche, sombre en bas/à droite),
   comme les cadres en relief du site d'origine. */
.int-wbody {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 8px;
  background: #535935;
  border-top: 2px solid #a7ac89;
  border-left: 2px solid #a7ac89;
  border-right: 2px solid #383c1e;
  border-bottom: 2px solid #383c1e;
  align-items: flex-start;
}
.int-wbody > .int-full { flex: 1 0 100%; }   /* objectif : pleine largeur sous les colonnes */

/* Contenu posé dans le grand cadre : liseré clair de 2 px puis dégradé sombre vers
   l'intérieur, exactement comme sur la capture d'origine
   (…olive #535935 · #929776 · sombre · contenu). */
/* Contenu posé DANS le cadre olive : biseau creusé — sombre en haut/à gauche,
   clair en bas/à droite, l'inverse du cadre qui le porte. */
.int-frame {
  box-shadow:
    -2px -2px 0 #383c1e,
    2px 2px 0 #a7ac89,
    0 0 0 2px #2b2f16;
  background-clip: padding-box;
}

/* ===== zone de jeu ===== */
#int-gamecol { flex: 0 0 600px; }   /* le liseré (4 px) déborde dans la bande olive */
#int-gamebox {
  position: relative;
  width: 600px;
  height: 400px;
  background: #000;
}
#int-canvas { width: 600px; height: 400px; display: block; }
#int-error {
  display: none;
  position: absolute;
  inset: 0;
  padding: 24px;
  background: rgba(0, 0, 0, 0.92);
  color: #ff5030;
  font-family: monospace;
  font-size: 12px;
}

/* objectif : première ligne en jaune, détail en crème (pas de titre) */
#int-briefing { padding: 7px 10px 9px; background: #2b2f16; }
#int-briefing h2 {
  font: bold 12px Tahoma, sans-serif;
  color: #f4e76e;
  margin-bottom: 3px;
}
#int-briefing p { color: #d1d6ae; line-height: 1.5; }

/* ===== panneau latéral ===== */
/* .client .sidePanel : fond sombre distinct du cadre olive, cerné d'un filet noir
   et souligné d'un filet clair en bas */
#int-side {
  flex: 1;
  align-self: stretch;
  min-width: 0;
  padding: 5px;
  background: #3b3d28;
  border: 1px solid #292b1c;
  border-bottom-color: #71754c;
}
/* Blocs du panneau latéral, repris de style.css d'origine :
   .client #clientTip .box (conseil)  fond #4c2e25, filet haut #cb9f83
   .client #tutorial div  (les autres) fond #71754c, filet haut #d0d194
   les deux : texte blanc, 3 px sombres en bas, titre h1 sur fond plein */
.int-block {
  /* marges négatives : le bloc annule le retrait du panneau et va d'un bord à l'autre */
  margin: 0 -5px 10px;
  color: #fff;
  background: #71754c;
  border-top: 1px solid #d0d194;
  border-bottom: 3px solid #292b1c;   /* seul relief : une ombre portée sous le bloc */
}
.int-block:last-child { margin-bottom: 0; }
/* hors du panneau latéral (page d'aide) : pas de débord à annuler */
.int-block.standalone { margin: 0; }
/* dans la page, le titre et le texte s'alignent sur le retrait des autres cartes */
.int-block.standalone .int-block-title { padding-left: 10px; }
.int-block.standalone .int-block-body { padding-left: 10px; }
.int-block.standalone .int-block-body a { color: #fed82a; }
.int-block.tip { background: #4c2e25; border-top-color: #cb9f83; }
.int-block-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 1px 5px;
  background: #292b1c;
  color: #fed82a;
  font: 15px 'int-agency-bold', 'Arial Narrow', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  word-break: break-all;
}
.int-block.tip .int-block-title { background: #221511; }
.int-block-title a {
  margin-left: auto;
  color: #e59f07;
  font-family: Tahoma, sans-serif;
  font-size: 10px;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}
.int-block-body { padding: 6px 5px 8px; color: #fff; font-size: 12px; line-height: 1.5; }
.int-block-body p { margin-bottom: 7px; }
.int-block-body p:last-child { margin-bottom: 0; }
.int-block-body del { color: #d0d194; }
.int-block-body img.face { vertical-align: middle; margin: 0 2px; }
.int-block-body .embed { text-align: center; margin-top: 6px; }
.int-block-body .embed .screen {
  width: 100%;
  height: 120px;
  background: #000;
  border: 1px solid #6d6c48;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e6cf89;
  font-size: 28px;
}
.int-block-body .embed .sub { color: #a89a86; font-size: 10px; }
#int-side .empty { color: #8d8a6a; font-style: italic; }

/* ===== contenu des pages annexes (dans la fenêtre) ===== */
/* ===== contenu des pages : repris du style.css d'origine =====
   .window .container pour les cartes, h1 pour leur titre, table.table pour les
   tableaux, .button pour les boutons. Ces règles datent d'avant box-sizing. */
.int-panel, .int-panel *, .int-table, .int-table * { box-sizing: content-box; }
.int-panel {                       /* .window .container + .window (outline) */
  margin: 0 0 15px;
  padding: 10px;
  color: #d0d194;
  font: 10pt Arial, 'Trebuchet MS', Verdana, sans-serif;
  word-spacing: 1pt;
  background: #595c3c;
  border: 1px solid #d0d194;
  outline: 1px solid #3b3d28;
}
.int-panel.int-frame { box-shadow: none; }   /* le biseau ne concerne que la fenêtre de jeu */
.int-panel h2 {                    /* h1 : titre de section souligné par h1.png */
  margin-bottom: 8px;
  padding-bottom: 8px;
  color: #fed82a;
  font-size: 12pt;
  font-weight: normal;
  letter-spacing: 2pt;
  text-transform: uppercase;
  background: url('../img/site/design/h1.png') repeat-x left bottom;
}
.int-panel h3 {                    /* h2 : sous-titre */
  margin: 15px 0 5px 10px;
  color: #fed82a;
  font-size: 9pt;
  font-weight: bold;
  letter-spacing: 2pt;
  border-bottom: 1px dashed #71754c;
}
.int-panel p { margin-bottom: 5px; }
.int-panel a { color: #e59f07; }
.int-table {
  width: 100%;
  margin: 1px auto 10px;
  border-collapse: collapse;
  border-spacing: 0;
}
.int-table th {
  padding: 3px 3px 3px 12px;
  color: #fed82a;
  font-size: 10pt;
  text-transform: uppercase;
  text-align: left;
  vertical-align: bottom;
  background: #71754c url('../img/site/design/table_th.png') no-repeat left 90%;
}
.int-table td {
  padding: 0 3px 7px 17px;
  color: #d0d194;
  font-size: 10pt;
  vertical-align: top;
  background: url('../img/site/design/table_td.png') no-repeat left bottom;
}
button.int-btn, a.int-btn, span.int-btn {   /* .button */
  display: inline-block;
  width: 150px;
  margin-bottom: 5px;
  padding: 0;
  color: #e59f07;
  font: 8pt Arial, 'Trebuchet MS', Verdana, sans-serif;
  line-height: 12pt;
  text-align: center;
  text-decoration: none;
  background: #3b3d28;
  border: 1px solid #e59f07;
  outline: 1px solid #000;
  cursor: pointer;
}
button.int-btn:hover, a.int-btn:hover { background: #e59f07; color: #3b3d28; }
button.int-btn:disabled {            /* .offButton */
  border-color: #71754c;
  color: #d0d194;
  outline: 1px solid #3b3d28;
  text-decoration: line-through;
  background: #3b3d28;
  cursor: default;
}
input.int-input, textarea.int-input, select.int-input {
  background: #1e2011;
  border: 1px solid #56542f;
  color: #ded8c4;
  padding: 4px 7px;
  font: 11px Tahoma, sans-serif;
}
a { color: #d8b44a; }

#int-footer {
  padding: 8px 4px;
  color: #6f7050;
  font-size: 10px;
  text-align: center;
}
#int-footer a { color: #8d9163; }

/* ===== liste des missions du jour ===== */
#int-offers { width: 100%; }
.int-mission-list { display: flex; flex-direction: column; gap: 8px; }
.int-mission {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  background: linear-gradient(#3b4021, #2a2e13);
}
.int-mission.locked, .int-mission.done { opacity: 0.62; }
.int-mission-icon { flex: none; margin-top: 2px; image-rendering: pixelated; }
.int-mission-txt { flex: 1 1 auto; min-width: 0; }
.int-mission-txt h3 {
  font-family: 'int-agency-bold', 'Arial Narrow', sans-serif;
  color: #d8c070;
  font-size: 16px;
  font-weight: normal;
  letter-spacing: 0.5px;
  margin-bottom: 3px;
}
.int-mission-meta { color: #9ea073; font-size: 10px; margin-bottom: 3px; }
.int-mission-details { color: #ded8c4; margin-bottom: 4px; }
.int-mission-act { flex: none; align-self: center; text-align: right; }
.int-mission-state { color: #9ea073; font-size: 10px; font-style: italic; }
.int-demo-banner {
  padding: 7px 10px 8px;
  background: #4a2a12;
  border: 1px solid #8a5a22;
  color: #f0d2a0;
}
.int-demo-banner a { color: #ffcf6b; }

/* ===== page Decks — valeurs reprises du style.css d'origine (archive.org) ===== */
/* Le CSS d'origine date d'avant box-sizing : ses largeurs et hauteurs sont celles du
   CONTENU. Sans cela, l'onglet (height 16px + 3px de padding + bordure) voyait sa
   hauteur totale ramenée à 16 px et son texte coupé par le panneau. */
#decks-root, #decks-root * { box-sizing: content-box; }
#decks-root {
  margin-top: 30px;      /* contenu à 168 px du haut, cf. .mxtopmaincontent */
  color: #d0d194;
  font: 10pt Arial, 'Trebuchet MS', Verdana, sans-serif;   /* .mxcontent */
  word-spacing: 1pt;
}

/* ul.tabs : hauteur fixe de 24 px, li de 16 px + 3 px de padding calés en haut ;
   la bordure basse claire, remontée de 2 px, forme le haut du panneau. Le filet
   sombre que l'on voit entre les deux est l'outline de .window (#292b1c), peint
   par-dessus : il est là dans le jeu d'origine aussi. */
.dk-tabs {
  display: flex;
  align-items: flex-start;
  height: 24px;
  padding-left: 10px;
  margin: 0 0 -2px;
  border-bottom: 2px solid #d0d194;
}
.dk-tabs + .dk-panel { margin-top: 0; }
.dk-tab {
  display: block;
  /* position: relative comme sur ul.tabs li : l'onglet est alors peint APRÈS le
     panneau, si bien que son outline clair recouvre l'outline sombre de .window —
     c'est ce qui, dans le jeu d'origine, supprime le filet noir sous l'onglet actif
     et le colle au contenu du deck */
  position: relative;
  height: 16px;
  padding: 3px;
  margin-right: 3px;
  background: #595c3c;
  border: 1px solid #71754c;
  border-bottom: 0;
  color: #e59f07;
  font: bold 7pt Arial, 'Trebuchet MS', Verdana, sans-serif;
  letter-spacing: 0;
  line-height: 16px;
  text-decoration: underline;
}
.dk-tab:hover { color: #595c3c; background: #e59f07; text-decoration: none; }
.dk-tab.on {
  background: #d0d194;
  border-top: 2px solid #e59f07;
  outline: 1px solid #d0d194;
  color: #3b3d28;
  text-decoration: none;
}
.dk-tab.on:hover { background: #d0d194; color: #3b3d28; }
.dk-tab .int-coin, .dk-btn .int-coin { vertical-align: -25%; }
.dk-cost { color: #c5db95; font-weight: bold; }   /* .gameMoney */

/* .window : outline sombre, barre de titre claire, corps #595c3c */
.dk-panel { outline: 1px solid #292b1c; margin-bottom: 15px; }
.dk-panel-title {
  display: flex;
  align-items: center;
  padding-left: 10px;
  color: #71754c;
  text-transform: uppercase;
  font-size: 8pt;
  background: #d0d194 url('../img/site/design/window_title.png') repeat-x left center;
  border: 3px solid #d0d194;
  border-top-width: 1px;
}
.dk-panel-title span { padding: 0 5px; background: #d0d194; }
.dk-panel-title .dk-x {
  width: 18px; height: 13px;
  margin-left: auto;
  background: url('../img/site/design/window_close.png') no-repeat;
}
.dk-body {
  padding: 10px;
  background: #595c3c;
  border: 1px solid #d0d194;
  outline: 1px solid #3b3d28;
}

/* .help : help.png porte le fond et le « ? » ; 65 px de retrait à gauche */
.dk-help {
  min-height: 40px;
  padding: 10px 10px 10px 65px;
  color: #d0d194;
  letter-spacing: 0.5pt;
  border: 1px solid #cb9f83;
  outline: 1px solid #3b3d28;
  border-radius: 4px;
  background: #4c2e25 url('../img/site/design/help.png') no-repeat top left;
}
.dk-help p { margin: 0; }
.dk-help b { color: #fed82a; }

/* .decks ul.bg li : 38×39 avec bordure, numéro dessous en 7.5pt gras jaune */
.dk-slots { display: flex; flex-wrap: wrap; margin: 15px 0 20px; }   /* 11 px pour le numéro posé sous la case */
.dk-slot { position: relative; margin-right: 3px; }
.dk-slot > span {
  position: absolute;
  top: 39px;
  left: 0;
  width: 38px;
  height: 11px;
  font: bold 7.5pt Arial, 'Trebuchet MS', Verdana, sans-serif;
  line-height: 8pt;
  text-align: center;
  color: #fed82a;
}
.dk-cell {
  position: relative;
  width: 38px; height: 39px;
  background: url('../img/site/design/dockicon_border.png') no-repeat;
  border: 1px solid #595c3c;
  cursor: pointer;
}
.dk-cell img { position: absolute; left: 3px; top: 3px; width: 32px; height: 32px; display: block; }
.dk-cell.over { border-color: #e59f07; background-color: #71754c; outline: 1px solid #3b3d28; }
.dk-cell.dragging { opacity: 0.4; }

/* .decks .infos : bloc bas séparé par un filet */
.dk-actions {
  position: relative;
  min-height: 85px;
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px solid #71754c;
}
/* le champ (20 px de haut) et le bouton (18 px) se terminent à la même ligne */
.dk-left { display: flex; align-items: flex-end; gap: 8px; }
.dk-left .dk-btn { margin-bottom: 0; }
.dk-name { width: 170px; }
.dk-right { position: absolute; top: 10px; right: 0; width: 150px; }

/* .button / .offButton : fond sombre, cadre orange, survol en inversion */
.dk-btn {
  display: block;
  width: 150px;
  margin-bottom: 5px;
  padding: 0;
  color: #e59f07;
  font: 8pt Arial, 'Trebuchet MS', Verdana, sans-serif;
  line-height: 12pt;
  text-align: center;
  text-decoration: none;
  background: #3b3d28;
  border: 1px solid #e59f07;
  outline: 1px solid #000;
  cursor: pointer;
}
.dk-btn:hover { background: #e59f07; color: #3b3d28; }
.dk-btn:hover .dk-cost { color: #3b3d28; }
.dk-btn.off {
  border-color: #71754c;
  color: #d0d194;
  outline: 1px solid #3b3d28;
  text-decoration: line-through;
  cursor: default;
}
.dk-btn.off:hover { background: #3b3d28; color: #d0d194; }

.dk-reserve { display: flex; flex-wrap: wrap; min-height: 41px; }
.dk-reserve .dk-cell { margin: 0 3px 3px 0; }
.dk-reserve.over { outline: 1px dashed #e59f07; outline-offset: -4px; }
.dk-empty { color: #d0d194; }
.dk-msg { margin-top: 8px; color: #fed82a; }
/* rien ne doit flotter entre le dernier panneau et le pied de page : la ligne de
   message ne prend de la place que lorsqu'elle en a un, et le panneau du bas perd
   sa marge — comme sur les autres pages, où le cadre touche le pied de page */
.dk-msg:empty { display: none; }
#decks-root > .dk-panel:last-of-type { margin-bottom: 0; }

/* bouton secondaire de la page de connexion (bascule connexion / inscription) */
button.int-btn.lg-alt {
  border-color: #71754c;
  color: #d0d194;
  background: transparent;
  outline: 1px solid #3b3d28;
}
button.int-btn.lg-alt:hover { background: #71754c; color: #3b3d28; }

/* ===== fenêtre modale (aide du mode 1337) ===== */
.int-link { margin-left: 10px; color: #e59f07; font-size: 11px; }
.int-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.6);
  z-index: 50;
}
.int-modal-box {
  width: 560px;
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  background: #535935;
}
.int-modal-box h2 { margin-bottom: 6px; }
.int-modal-box p { margin-bottom: 6px; line-height: 1.5; }
.int-modal-box code { color: #f4e76e; }

/* bandeau de débriefing du jeu d'origine (.missionEnd .headerSuccess / .headerFailure) */
.int-debrief-head {
  height: 98px;
  margin: -10px -10px 10px;
  background-repeat: no-repeat;
  background-position: top left;
}
.int-debrief-head.success { background-image: url('../img/site/design/debriefing_success.png'); }
.int-debrief-head.failure { background-image: url('../img/site/design/debriefing_failure.png'); }

/* HackStore : le prix tient sur une ligne (le « ¢ » ne passe pas seul dessous) et la
   colonne des noms de virus est assez large pour les intitulés longs */
.int-table .c-name { width: 205px; }
/* le nom forme sa propre colonne à côté de l'icône : le nom court entre parenthèses,
   s'il passe à la ligne, reprend sous le texte et non sous l'icône */
.int-table .c-name .c-wrap { display: flex; align-items: flex-start; }
.int-table .c-name .c-wrap img { flex: none; width: 16px; height: 16px; margin: 1px 5px 0 0; }
.int-table .c-name .c-txt { flex: 1; }
.int-table .c-cost, .int-table .c-lvl { white-space: nowrap; }

/* ===== badge de jetons (identique au portage Snake) =====
   Les jetons sont la monnaie commune du compte, pas une ressource du jeu : le badge
   est donc le même d'un jeu à l'autre. Le bord droit du cadre du bandeau tombe à 900,
   comme l'encart « Niveau », d'où right: 8px. */
#tokens-badge {
  position: absolute;
  top: 0; right: 8px;
  z-index: 5;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px 7px;
  background: #1a1e26;
  color: #fff;
  font-size: 12px; font-weight: bold;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
/* le display:flex l'emporterait sur l'attribut hidden */
#tokens-badge[hidden] { display: none; }
#tokens-badge img { display: block; width: 12px; height: 12px; image-rendering: pixelated; }
#admin-link {
  margin-left: 4px; padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, .25);
  color: #cfe3ff; text-decoration: none; font-weight: bold;
}
#admin-link:hover { color: #fff; text-decoration: underline; }
#admin-link.on { color: #fed82a; }   /* page courante */

/* ===== page d'administration ===== */
.adm-denied { color: #e59f07; }
/* disquettes « réussie / ratée » dans l'en-tête de colonne */
.int-table th .adm-disk { vertical-align: -3px; image-rendering: pixelated; }
.int-table td .tok-ico { margin-left: 5px; vertical-align: -2px; image-rendering: pixelated; }
/* les jetons ressortent en jaune, comme sur le portage Snake */
.int-table td.tok { color: #fed82a; font-weight: bold; }
.int-table .adm-num { text-align: right; white-space: nowrap; padding-right: 10px; }
.int-table th.adm-num { text-align: right; padding-left: 3px; padding-right: 10px; }
/* un seul bouton « Actions ▾ » par ligne, qui déplie les autres — comme sur Snake */
.int-table td.adm-act { width: 92px; padding-left: 8px; padding-bottom: 4px; }
button.int-btn.adm-btn { width: auto; margin: 0 4px 4px 0; padding: 0 8px; }
.adm-dd { position: relative; display: inline-block; }
.adm-menu {
  position: absolute; top: 100%; right: 0; z-index: 30; display: none;
  min-width: 140px; padding: 4px;
  background: #595c3c; border: 1px solid #d0d194; outline: 1px solid #3b3d28;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .45);
}
.adm-dd.open .adm-menu { display: block; }
/* `.int-panel *` remet tout en content-box (CSS d'origine) : sans ce border-box, un
   bouton en width:100% déborde du menu de ses marges intérieures et de sa bordure */
.adm-menu button.int-btn {
  box-sizing: border-box;
  display: block; width: 100%; margin: 0 0 3px 0; padding: 0 6px;
  text-align: left; white-space: nowrap;
}
.adm-menu button.int-btn:last-child { margin-bottom: 0; }
/* dans les boîtes de dialogue les libellés sont plus longs : largeur libre */
.adm-box button.int-btn.adm-btn { width: auto; padding: 0 10px; }
.adm-cur { color: #a8ab7c; font-style: italic; }
.adm-search { display: flex; gap: 10px; align-items: center; margin: 0 0 8px; }
.adm-search .adm-input { width: 220px; margin: 0; }
/* pagination : masquée tant que la liste tient sur une page */
.adm-pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 6px; }
.adm-pager button.int-btn { width: auto; padding: 0 12px; margin: 0; }
.adm-msg {
  margin-top: 10px; padding: 6px 10px;
  color: #3b3d28; background: #d0d194;
  border: 1px solid #71754c;
  opacity: 0; transition: opacity .25s;
}
.adm-msg.on { opacity: 1; }
.adm-msg.err { background: #e59f07; }
/* saisie et confirmation : réutilisent .int-modal / .int-modal-box */
.int-modal-box.adm-box { width: 340px; padding: 12px; border: 1px solid #d0d194; outline: 1px solid #3b3d28; }
.adm-box .adm-input {
  width: 100%; margin: 6px 0;
  padding: 3px 5px;
  color: #f4e76e; font: 11pt Arial, sans-serif;
  background: #3b3d28; border: 1px solid #71754c;
}
.adm-box .adm-input.bad { border-color: #ff6a4a; }
.adm-box ul { margin: 6px 0 8px 18px; list-style: square; }
.adm-box li { margin-bottom: 3px; }
.adm-box .adm-warn { color: #ff9a6a; }
.adm-box .adm-acts { margin-top: 10px; text-align: right; }