/* AFK & Co — « Lampe de bureau » : une pièce sombre et chaude, une lampe (l'esperluette), tout ce qui compte dans sa lumière.
   Aucune ressource externe : polices copiées d'Overfit (OFL, voir fonts/). Toutes les couleurs sont sur :root. */
@font-face { font-family: "Fraunces"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("fonts/fraunces-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Plex Mono"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Plex Mono"; font-weight: 500 700; font-style: normal; font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  /* La pièce */
  --bg: #140e12;
  --bg-deep: #0b0709;
  --room: #2c1a1e;          /* mur éclairé de loin par la lampe */
  --surface: #1e1519;
  --surface-hi: #2a1e22;
  --border: #3a2a2e;
  --border-hi: #57423f;
  --shadow: #050304;
  /* La lumière */
  --amber: #ffb547;
  --halo: #ff9a3c;
  /* Le texte */
  --text: #f3e9dc;
  --text-2: #c9b8a8;
  --text-3: #a8968a;
  --ink: #1a1014;           /* texte posé sur une couleur pleine */
  --off: #6e5f58;           /* verrouillé, éteint (décor uniquement, jamais du texte seul) */
  /* Les pierres des jeux */
  --amethyst: #b48cff;
  --copper: #f08a4b;
  --jade: #4fd1a1;
  --discord: #5865f2;
  --danger: #ff8f7a;
  /* Typo, formes */
  --mono: "Plex Mono", ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --r: 14px;
  --lamp-y: 230px;          /* recalé en JS sur le centre réel de l'esperluette */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; min-height: 100vh; position: relative; overflow-x: hidden;
  background: var(--bg); color: var(--text);
  font: 400 15px/1.6 var(--mono);
}

/* ---------- La lampe : trois couches (ampoule, flaque de lumière sur le bureau, mur de la pièce) ---------- */
.lamp {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%; min-height: 1500px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 50% var(--lamp-y), color-mix(in srgb, var(--halo) 46%, transparent) 0,
      color-mix(in srgb, var(--halo) 22%, transparent) 110px, color-mix(in srgb, var(--halo) 7%, transparent) 260px, transparent 420px),
    radial-gradient(ellipse min(1300px, 170vw) 900px at 50% calc(var(--lamp-y) + 240px),
      color-mix(in srgb, var(--amber) 15%, transparent) 0, color-mix(in srgb, var(--amber) 5%, transparent) 50%, transparent 78%),
    radial-gradient(ellipse max(2600px, 190vw) 2800px at 50% var(--lamp-y), var(--room) 0, color-mix(in srgb, var(--room) 45%, transparent) 40%, transparent 72%);
  transition: opacity 0.9s ease;
}
body.afk .lamp { opacity: 0.62; transition-duration: 2.4s; }
body.lamp-off .lamp { opacity: 0.06; transition-duration: 0.5s; }
body.lamp-wake .lamp { animation: lamp-wake 2.8s ease-out both; }
@keyframes lamp-wake { from { opacity: 0.12; } to { opacity: 1; } }
/* Vignettage chaud (jamais noir pur) + grain photo de nuit : fixes, jamais animés, SOUS le contenu
   (ils assombrissent la pièce, pas le texte ni les boutons) */
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; }
body::after { background: radial-gradient(ellipse 130% 110% at 50% 35%, transparent 45%, color-mix(in srgb, var(--bg-deep) 85%, transparent) 100%); }
body::before {
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .8 0 0 0 1.4 -.3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

#sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
main, .foot, .hud { position: relative; z-index: 2; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--amber); color: var(--ink);
  padding: 8px 14px; border-radius: 8px; font-weight: 500; text-decoration: none; }
.skip:focus { top: 10px; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 6px; }
a { color: var(--amber); }

/* ---------- HUD ---------- */
.hud {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px max(16px, calc((100vw - 1240px) / 2));
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.hud-res { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.hud-glyph { width: 15px; height: 15px; align-self: center; fill: none; stroke: var(--amber); stroke-width: 1.5; stroke-linecap: round; }
.hud-num { color: var(--amber); font-weight: 500; font-size: 1.15rem; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 14px color-mix(in srgb, var(--halo) 55%, transparent); min-width: 4ch; }
.hud-unit { color: var(--text-2); font-size: 0.8rem; }
.hud-rate { color: var(--jade); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.hud-afk { font-size: 0.72rem; color: var(--ink); background: var(--amber); padding: 1px 8px; border-radius: 99px; }
.hud-nav { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.hud-link { color: var(--text); text-decoration: none; font-size: 0.85rem; padding: 6px 10px;
  border: 1px solid var(--border-hi); border-radius: 8px; background: var(--surface); }
.hud-link:hover { border-color: var(--amber); color: var(--amber); }
.lang { font: inherit; font-size: 0.78rem; background: var(--surface); border: 1px solid var(--border-hi); border-radius: 8px;
  color: var(--text-2); padding: 5px 4px; cursor: pointer; display: flex; }
.lang span { padding: 1px 6px; border-radius: 5px; }
.lang span.on { background: var(--text); color: var(--ink); }

/* ---------- Hero ---------- */
main { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
.hero { text-align: center; padding: clamp(28px, 7vh, 72px) 0 clamp(20px, 4vh, 40px); }
.title {
  margin: 0; font-family: var(--serif); font-weight: 600; line-height: 1; color: var(--text);
  font-size: clamp(3.4rem, 15vw, 8.5rem); letter-spacing: -0.02em;
  display: flex; align-items: center; justify-content: center; gap: 0.08em;
  /* Lettres éclairées de face par la lampe : reflet chaud, ombre douce derrière */
  text-shadow: 0 0 34px color-mix(in srgb, var(--halo) 30%, transparent), 0 6px 18px color-mix(in srgb, var(--shadow) 80%, transparent);
}
.title .w { display: inline-block; }
.amp-wrap { position: relative; display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; }
.ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 2.2; }
.ring-bg { stroke: var(--border-hi); stroke-dasharray: 1 2.2; }
.ring-fg { stroke: var(--amber); stroke-linecap: round; stroke-dasharray: 0 100;
  transition: stroke-dasharray 0.6s ease; filter: drop-shadow(0 0 5px var(--halo)); }
/* L'ampoule */
.amp {
  font: inherit; color: var(--amber); background: none; border: 0; padding: 0; cursor: pointer; line-height: 1;
  width: 1em; height: 1em; border-radius: 50%; position: relative; top: -0.02em;
  /* Filament blanc-chaud au cœur, puis halo ambre de plus en plus large */
  text-shadow: 0 0 2px color-mix(in srgb, var(--text) 85%, transparent), 0 0 10px var(--amber),
    0 0 34px var(--halo), 0 0 90px color-mix(in srgb, var(--halo) 70%, transparent);
  transition: transform 0.12s ease, color 0.5s ease, text-shadow 0.5s ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.amp:hover { transform: scale(1.06) rotate(-4deg); }
.amp:active { transform: scale(0.92); }
body.lamp-off .amp { color: var(--off); text-shadow: none; }
.intro { max-width: 680px; margin: 22px auto 0; font-size: 1rem; color: var(--text); }
.hint { margin: 12px auto 0; font-size: 0.82rem; color: var(--text); } /* crème : il tombe dans la flaque de lumière */
.hint::before { content: "> "; color: var(--amber); }

/* ---------- Sections ---------- */
.sec-h { font-family: var(--mono); font-weight: 500; font-size: 0.85rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--amber); margin: 0; }
.sec-h span[aria-hidden] { color: var(--text-3); }
.sec-sub { color: var(--text-2); font-size: 0.86rem; margin: 6px 0 18px; max-width: 760px; }
.games, .news, .factory { padding: 24px 0; scroll-margin-top: 70px; }

/* ---------- Surfaces : objets posés sur le bureau, éclairés par le haut ---------- */
.panel, .card, .toast {
  background: linear-gradient(180deg, var(--surface-hi), var(--surface) 70%);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 9%, transparent), 0 16px 32px -20px var(--shadow);
}

/* ---------- Cartes des jeux : chaque jeu a sa pierre ---------- */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr; }
/* 4 jeux : 1 colonne, puis 2 x 2, puis une ligne (jamais 3 + 1 orpheline) */
@media (min-width: 560px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cards { grid-template-columns: repeat(4, 1fr); } }
/* --lit : intensité de la lueur de la pierre, animable (la carte « s'allume » au survol) */
@property --lit { syntax: "<percentage>"; inherits: false; initial-value: 17%; }
.card {
  --c: var(--amethyst); --lit: 17%;
  position: relative; height: 100%; display: flex; flex-direction: column; gap: 10px;
  padding: 18px 18px 16px; border-radius: var(--r); text-decoration: none; color: var(--text);
  background:
    radial-gradient(130% 80% at 50% -10%, color-mix(in srgb, var(--c) var(--lit), transparent), transparent 62%),
    linear-gradient(180deg, var(--surface-hi), var(--surface) 75%);
  border-color: color-mix(in srgb, var(--c) 34%, var(--border));
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.25s ease, --lit 0.3s ease;
}
.card::before { content: ""; position: absolute; left: 16px; right: 16px; top: -1px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--c), transparent); }
.card.c-proto { --c: var(--amethyst); }
.card.c-dev { --c: var(--copper); }
.card.c-play { --c: var(--jade); }
.card.c-arcade { --c: var(--danger); }
/* La carte « s'allume » comme si on la rapprochait de la lampe */
.card:hover, .card:focus-visible {
  border-color: var(--c); transform: translateY(-4px); --lit: 34%;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 16%, transparent),
    0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent), 0 20px 44px -14px color-mix(in srgb, var(--c) 55%, transparent);
}
.card:focus-visible { outline-color: var(--c); }
.card-ico { width: 44px; height: 44px; padding: 7px; border-radius: 12px; fill: none; stroke: var(--c); stroke-width: 1.6; stroke-linecap: round;
  background: color-mix(in srgb, var(--c) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent); }
.card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.card-name { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; line-height: 1.2; }
.badge { font-size: 0.72rem; font-weight: 500; padding: 2px 9px; border-radius: 99px; white-space: nowrap;
  color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); }
.b-dev::before, .b-play::before, .b-arcade::before { content: "● "; }
.card-desc { color: var(--text-2); font-size: 0.86rem; flex-grow: 1; }
.card-cta { align-self: flex-start; font-weight: 500; font-size: 0.95rem; color: var(--ink); background: var(--c);
  padding: 7px 18px; border-radius: 9px; box-shadow: 0 6px 18px -8px var(--c); }
.games.nudge .card { box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 45%, transparent), 0 0 28px -6px var(--amber); }

/* ---------- Quoi de neuf : un bloc par jeu, liseré de la couleur de sa carte ---------- */
.news-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .news-grid { grid-template-columns: repeat(4, 1fr); } }
.news-game { --c: var(--amethyst); position: relative; border-color: color-mix(in srgb, var(--c) 28%, var(--border)); }
.news-game.c-proto { --c: var(--amethyst); } .news-game.c-dev { --c: var(--copper); }
.news-game.c-play { --c: var(--jade); } .news-game.c-arcade { --c: var(--danger); }
.news-game::before { content: ""; position: absolute; left: 16px; right: 16px; top: -1px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--c), transparent); }
.news-name { margin: 0 0 10px; font-family: var(--serif); font-weight: 600; font-size: 1.1rem; line-height: 1.2; }
.news-name a { color: var(--text); text-decoration: none; }
.news-name a:hover, .news-name a:focus-visible { color: var(--c); text-decoration: underline; text-underline-offset: 3px; }
.news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.news-list li { display: grid; grid-template-columns: 4.6em 1fr; gap: 10px; font-size: 0.84rem; line-height: 1.45; color: var(--text-2); }
.news-list time { font-family: var(--mono); font-size: 0.74rem; line-height: 1.7; color: var(--c); white-space: nowrap; }

/* ---------- Discord ---------- */
.discord-row { margin-top: 22px; display: flex; justify-content: center; }
.discord {
  display: inline-flex; align-items: center; gap: 12px; padding: 12px 20px; border-radius: 12px;
  color: var(--text); text-decoration: none; font-size: 0.92rem; font-weight: 500;
  background: linear-gradient(180deg, color-mix(in srgb, var(--discord) 22%, var(--surface-hi)), var(--surface));
  border: 1px solid color-mix(in srgb, var(--discord) 65%, var(--border));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 12%, transparent), 0 10px 26px -14px var(--discord);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.discord img { display: block; }
.discord:hover, .discord:focus-visible { border-color: var(--discord);
  background: linear-gradient(180deg, color-mix(in srgb, var(--discord) 34%, var(--surface-hi)), var(--surface));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 16%, transparent), 0 12px 30px -10px var(--discord); }

/* ---------- Usine ---------- */
.fac-grid { display: grid; gap: 16px; grid-template-columns: 1.2fr 1fr; grid-template-areas: "gens stats" "gens side"; align-items: start; }
.p-gens { grid-area: gens; } .p-stats { grid-area: stats; } .side { grid-area: side; display: grid; gap: 16px; }
.panel { border-radius: var(--r); padding: 14px 16px; }
.panel-h { margin: 0 0 10px; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }
.gens { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gen { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--bg) 55%, transparent);
  transition: border-color 0.2s ease, background-color 0.2s ease; }
.gen-name { font-weight: 500; }
.gen-own { color: var(--amber); margin-left: 8px; font-size: 0.78rem; padding: 0 7px; border-radius: 99px;
  background: color-mix(in srgb, var(--amber) 14%, transparent); }
.gen-own:empty { display: none; }
.gen-flav { grid-column: 1; color: var(--text-2); font-size: 0.78rem; line-height: 1.4; }
.gen-rate { grid-column: 1; color: var(--jade); font-size: 0.76rem; }
.gen .btn { grid-column: 2; grid-row: 1 / span 3; }
/* Achat possible : la ligne et le bouton s'allument */
.gen.can { border-color: color-mix(in srgb, var(--amber) 55%, var(--border));
  background: linear-gradient(90deg, transparent 40%, color-mix(in srgb, var(--amber) 10%, transparent)); }
.gen.locked { border-style: dashed; background: none; }
.gen.locked .gen-name { letter-spacing: 0.2em; color: var(--text-3); }
.gen.locked .gen-flav { color: var(--text-3); }
.btn { font: inherit; font-size: 0.8rem; font-weight: 500; cursor: pointer; border-radius: 9px; padding: 8px 12px; min-width: 104px;
  font-variant-numeric: tabular-nums; touch-action: manipulation;
  background: var(--amber); color: var(--ink); border: 1px solid var(--amber);
  box-shadow: 0 0 18px -4px color-mix(in srgb, var(--halo) 70%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text) 45%, transparent);
  transition: background-color 0.15s ease, box-shadow 0.2s ease, color 0.2s ease; }
.btn:hover:not(:disabled) { background: var(--halo); border-color: var(--halo); }
/* Achat impossible : lisible, mais éteint */
.btn:disabled { cursor: not-allowed; color: var(--text-3); background: color-mix(in srgb, var(--bg) 60%, transparent);
  border-color: var(--border-hi); box-shadow: none; }
.btn-pr { width: 100%; background: var(--amethyst); border-color: var(--amethyst);
  box-shadow: 0 0 18px -4px color-mix(in srgb, var(--amethyst) 70%, transparent); }
.btn-pr:hover:not(:disabled) { background: var(--text); border-color: var(--text); }
.btn-pr.armed { background: var(--text); border-color: var(--text); }
.stats { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.stats div { min-width: 0; }
.stats dt { font-size: 0.72rem; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.08em; }
.stats dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--text); font-size: 1.05rem; overflow-wrap: anywhere; }
.stats dd.gain { color: var(--jade); }
/* Barres de progression */
.meter { margin-top: 12px; }
.meter-top { display: flex; justify-content: space-between; gap: 8px; font-size: 0.76rem; color: var(--text-2); margin-bottom: 5px; }
.meter-top span:last-child { color: var(--text); font-variant-numeric: tabular-nums; }
.bar { height: 8px; border-radius: 99px; background: var(--bg-deep); box-shadow: inset 0 0 0 1px var(--border); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--halo), var(--amber)); box-shadow: 0 0 10px var(--halo); transition: width 0.5s ease; }
.m-sleep .bar i { background: linear-gradient(90deg, color-mix(in srgb, var(--amethyst) 60%, var(--bg)), var(--amethyst)); box-shadow: 0 0 10px var(--amethyst); }
.prestige { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border-hi); }
.prestige-txt { margin: 0 0 10px; font-size: 0.8rem; color: var(--text-2); }
/* Journal de dev */
.log { list-style: none; margin: 0; padding: 0; font-size: 0.8rem; display: grid; gap: 6px; min-height: 6em; }
.log li { color: var(--text-2); display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.log li:last-child { color: var(--text); }
.log time { color: var(--amber); font-variant-numeric: tabular-nums; }
.tag { --t: var(--text-2); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0 6px; border-radius: 4px; color: var(--t); background: color-mix(in srgb, var(--t) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--t) 40%, transparent); }
.t-buy { --t: var(--amber); } .t-ms { --t: var(--jade); } .t-sleep { --t: var(--amethyst); } .t-sys { --t: var(--text-2); }
/* Succès */
.achs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ach { font-size: 0.74rem; padding: 3px 10px; border-radius: 99px; border: 1px dashed var(--border-hi); color: var(--text-3); }
.ach.got { border: 1px solid var(--jade); color: var(--ink); background: var(--jade); font-weight: 500; cursor: help;
  box-shadow: 0 0 14px -4px var(--jade); }
.ach.got::before { content: "★ "; }
.ach-count { color: var(--amber); letter-spacing: 0; }

/* ---------- Pied de page ---------- */
.foot { max-width: 1240px; margin: 28px auto 0; padding: 24px 16px 44px; border-top: 1px solid var(--border);
  color: var(--text-2); font-size: 0.82rem; text-align: center; }
.foot p { margin: 4px 0; }
.foot strong { color: var(--text); font-weight: 500; }
.foot-discord { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; }
.foot-discord, .linkish { display: inline-block; padding-top: 11px; padding-bottom: 11px; margin: -8px 0; }
.foot-small { font-size: 0.76rem; color: var(--text-3); }
.linkish { font: inherit; background: none; border: 0; color: var(--text-2); text-decoration: underline; cursor: pointer; padding-left: 4px; padding-right: 4px; }
.linkish.armed { color: var(--danger); }

/* ---------- Toasts et nombres flottants ---------- */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: grid; gap: 8px; max-width: min(360px, calc(100vw - 32px)); }
.toast { border-left: 3px solid var(--amber); border-radius: 10px; padding: 10px 14px; font-size: 0.8rem; color: var(--text);
  box-shadow: 0 12px 30px var(--shadow); animation: toast-in 0.35s ease both; }
.toast b { display: block; color: var(--amber); font-weight: 500; margin-bottom: 2px; }
.toast.out { animation: toast-out 0.4s ease both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }
.pop { position: fixed; z-index: 45; pointer-events: none; color: var(--amber); font-weight: 500; font-size: 0.95rem;
  text-shadow: 0 0 10px var(--halo); animation: pop 0.9s ease-out forwards; }
@keyframes pop { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -54px); } }

body.afk .hint::after { content: " zZz"; color: var(--amber); }

/* ---------- Écran large : l'usine sur trois colonnes ---------- */
@media (min-width: 1100px) {
  .fac-grid { grid-template-columns: 1.25fr 1fr 1fr; grid-template-areas: "gens stats side"; }
  .intro { font-size: 1.05rem; }
}

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .fac-grid { grid-template-columns: 1fr; grid-template-areas: "gens" "stats" "side"; }
  .hud-unit { display: none; }
  .hud { padding-top: 8px; padding-bottom: 8px; }
  /* Hero compact : le bouton « Jouer » du premier jeu tient dans le premier écran (360×740) */
  .hero { padding: 18px 0 4px; }
  .intro { font-size: 0.88rem; margin-top: 14px; }
  .hint { margin-top: 8px; }
  .games { padding-top: 14px; }
  .sec-sub { font-size: 0.8rem; margin-bottom: 12px; }
  .card-name { font-size: 1.2rem; }
  .card-ico { width: 34px; height: 34px; padding: 5px; border-radius: 10px; }
  .card { gap: 8px; padding-top: 16px; }
}
@media (max-width: 380px) {
  .hud-rate { display: none; }
  .gen { grid-template-columns: 1fr; }
  .gen .btn { grid-column: 1; grid-row: auto; margin-top: 6px; }
}

/* ---------- Moins d'animations : même lampe, allumée, immobile ----------
   Le ciel est dessiné une fois, le compteur avance au pas d'une seconde, pas de nombres flottants,
   la lampe ne s'éteint ni ne se rallume (état final directement, géré aussi en JS). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lamp, .card, .amp, .ring-fg, .btn, .discord, .gen, .bar i { transition: none; }
  body.lamp-wake .lamp { animation: none; }
  .card:hover, .card:focus-visible { transform: none; }
  .amp:hover, .amp:active { transform: none; }
  .toast, .toast.out { animation: none; }
}