* { box-sizing: border-box; }
:root { --accent: #3a6fd8; --accent-light: #6fa0ff; --bar: #1b1f2a; --task: #2c3242; --task-active: #4a557a; }
html, body { margin: 0; height: 100%; overflow: hidden; font: 14px system-ui, sans-serif; user-select: none; }
body { background: linear-gradient(135deg, #1e3c72, #2a5298 60%, #5b86c9); color: #111; }
.hidden { display: none !important; }

#desktop { position: absolute; inset: 0 0 40px 0; overflow: hidden; }
.dicon { position: absolute; touch-action: none; width: 84px; padding: 6px; text-align: center; color: #fff; border-radius: 6px; cursor: default; text-shadow: 0 1px 3px #000; }
.dicon:hover, .dicon.sel { background: rgba(255,255,255,.2); }
.dicon .lbl { display: block; font-size: 13px; line-height: 1.15; word-break: break-word; max-height: 2.4em; overflow: hidden; }
.ctx { position: fixed; z-index: 200000; background: var(--bar); border-radius: 6px; padding: 4px; min-width: 200px; box-shadow: 0 6px 20px #0008; }
.ctx button { display: block; width: 100%; text-align: left; background: none; border: 0; color: #eee; padding: 7px 10px; border-radius: 4px; cursor: pointer; font: inherit; }
.ctx button:hover { background: var(--task-active); }
.dicon .ico { font-size: 34px; display: block; }

#taskbar { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: var(--bar); display: flex; align-items: center; gap: 6px; padding: 0 6px; z-index: 99999; }
#tasks { flex: 1; display: flex; gap: 4px; overflow: hidden; }
.task { background: var(--task); color: #ddd; border: 0; border-radius: 4px; padding: 6px 10px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; font: inherit; }
.task.active { background: var(--task-active); color: #fff; box-shadow: inset 0 -2px var(--accent-light); }
#clock { color: #fff; padding: 0 8px; }


.win { position: absolute; background: #f3f3f3; border-radius: 8px 8px 4px 4px; box-shadow: 0 8px 28px rgba(0,0,0,.45); display: flex; flex-direction: column; resize: both; overflow: hidden; min-width: 240px; min-height: 140px; border: 1px solid #0006; }
.win.max { inset: 0 0 40px 0 !important; width: auto !important; height: auto !important; border-radius: 0; resize: none; }
.win.min { display: none; }
.titlebar { background: #d9dde6; padding: 6px 8px; display: flex; align-items: center; gap: 8px; cursor: move; flex: none;
  touch-action: none; user-select: none; -webkit-user-select: none; }   /* touch-action : sur téléphone, le glissement déplace la fenêtre au lieu de faire défiler la page */
.win.focus .titlebar { background: var(--accent); color: #fff; }
.titlebar .t { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.titlebar button { width: 26px; height: 22px; border: 0; border-radius: 4px; background: #0002; color: inherit; cursor: pointer; }
.titlebar button:hover { background: #0004; }
.titlebar button.x:hover { background: #e03b3b; color: #fff; }
.wbody { flex: 1; min-height: 0; display: flex; flex-direction: column; user-select: text; }

.toolbar { display: flex; gap: 4px; padding: 4px; background: #e6e8ee; align-items: center; flex: none; }
.toolbar button, .toolbar input { font: inherit; padding: 3px 8px; }
.toolbar input { flex: 1; min-width: 0; }
.list { flex: 1; overflow: auto; background: #fff; padding: 4px; }
.row { padding: 4px 8px; border-radius: 4px; cursor: default; display: flex; gap: 8px; }
.row:hover { background: #e5eefc; }
.row.drop { outline: 2px dashed #3a6fd8; background: #d5e4ff; }
.row.sel { background: #bcd4fb; }
.modal { position: absolute; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal .box { background: #fff; padding: 18px 20px; border-radius: 8px; max-width: 380px; box-shadow: 0 6px 24px #0008; }
.modal .box p { margin: 0 0 14px; }
.modal .btns { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.modal .btns button { font: inherit; padding: 6px 12px; cursor: pointer; }
.slot { padding: 4px 0; cursor: pointer; border: 1px solid #aab; background: #f3f3f6; border-radius: 3px; }
.slot.used { font-weight: 700; background: #fff3d6; }
.slot.on { background: #bcd4fb; outline: 2px solid var(--accent); }
.tabs { display: flex; gap: 2px; padding: 4px 4px 0; background: #e6e8ee; flex: none; }
.tabs button { border: 0; padding: 6px 12px; background: #cfd4e0; border-radius: 6px 6px 0 0; cursor: pointer; font: inherit; }
.tabs button.on { background: #fff; font-weight: 600; }
.pane { flex: 1; min-height: 0; display: flex; background: #fff; overflow: auto; }
.sw { width: 28px; height: 28px; padding: 0; border: 2px solid #fff; outline: 1px solid #888; cursor: pointer; }
.sw.on { border-color: #000; outline: 2px solid var(--accent); }
canvas.px { image-rendering: pixelated; cursor: crosshair; background: #222; flex: none; }
.pxgrid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, #0004 1px, transparent 1px), linear-gradient(to bottom, #0004 1px, transparent 1px); background-size: 12.5% 12.5%; }
.toolbar button.on { background: #bcd4fb; }
pre.help { margin: 0; padding: 12px; font: 13px Consolas, monospace; white-space: pre-wrap; user-select: text; flex: 1; }
.status { padding: 3px 8px; background: #e6e8ee; font-size: 12px; flex: none; }

.calc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 6px; flex: 1; }
.calc .disp { grid-column: 1 / -1; background: #fff; text-align: right; font-size: 28px; padding: 8px; border-radius: 4px; overflow: hidden; }
.calc button { font-size: 18px; border: 1px solid #bbb; border-radius: 4px; background: #fff; cursor: pointer; }
.calc button:hover { background: #dbe7fb; }
.calc button.op { background: #e9eefb; }

/* ---- Console 16 bits (inspirée des consoles de salon noires des années 90) ---- */
.win.fixed { resize: none; }   /* taille fixe : pas de poignée de redimensionnement (le bouton Agrandir reste disponible) */
/* écran de la console : exactement le format du jeu (256 x 240) multiplié par --cs (2, 1,5, 1,25 ou 1), bordure de 10 px comprise : aucune bande noire */
.cscreen { position: relative; flex: none; align-self: center; width: calc(var(--cs, 2) * 256px + 20px); height: calc(var(--cs, 2) * 240px + 20px); margin: 12px 14px 8px; background: #000; border: 10px solid #15171c; border-radius: 20px; overflow: hidden; display: flex; box-shadow: inset 0 0 24px #000, 0 4px 12px #0008; }
.win.max .cscreen { flex: 1; align-self: stretch; width: auto; height: auto; min-height: 0; }   /* grand écran : l'écran remplit la fenêtre, le jeu garde son format (bandes noires si besoin) */
.cscreen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(rgba(0,0,0,0) 0 2px, rgba(0,0,0,.10) 2px 3px); }
.cidle { margin: auto; color: #7dd3a0; font: 700 20px Consolas, monospace; text-align: center; display: flex; flex-direction: column; gap: 10px; padding: 20px; }
.cidle small { font: 12px system-ui, sans-serif; color: #9aa; font-weight: 400; }
.md { flex: none; margin: 4px 14px 14px; padding: 14px 16px 10px; color: #ddd; background: linear-gradient(#262626, #0b0b0b 55%, #000); border: 1px solid #444; border-radius: 24px 24px 12px 12px; box-shadow: 0 6px 14px #0009, inset 0 2px 0 #4d4d4d; }
.md-top { display: flex; align-items: flex-end; gap: 16px; }
.md-ring { flex: none; width: 120px; height: 120px; box-sizing: border-box; border-radius: 50%; border: 7px solid #2d2d2d; background: radial-gradient(circle at 50% 30%, #1c1c1c 0 55%, #050505 56%); box-shadow: 0 0 0 2px #111, inset 0 0 0 2px #000; display: flex; justify-content: center; padding-top: 28px; }
.md-ring span { font: 700 13px 'Arial Narrow', Arial, sans-serif; letter-spacing: 3px; color: #cfcfcf; border-top: 1px solid #777; border-bottom: 1px solid #777; padding: 2px 5px; height: fit-content; }
.md-center { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.md-logo { font: 900 20px 'Arial Black', Impact, sans-serif; letter-spacing: 4px; color: #ececec; margin-bottom: 6px; text-shadow: 0 1px 0 #000; }
.cslot { position: relative; width: 190px; height: 128px; }
.cart { position: absolute; left: 20px; bottom: 0; width: 150px; height: 118px; box-sizing: border-box; padding: 8px 10px 0; background: linear-gradient(#5e5e5e, #3c3c3c); border: 1px solid #111; border-radius: 6px 6px 0 0; box-shadow: 0 -2px 6px #0008; user-select: none; }
.cart.empty { display: none; }
/* Fente de cartouche bien visible : baie pointillée ambre, texte et flèche animée quand elle est vide */
.slot-bay { position: absolute; inset: 0 0 20px; border: 2px dashed rgba(255, 210, 63, .55); border-radius: 8px 8px 0 0; background: rgba(255, 210, 63, .06); transition: .15s; }
.slot-hint { position: absolute; left: 0; right: 0; top: 10px; display: none; flex-direction: column; align-items: center; gap: 1px; color: #ffd23f; font: 700 11px Arial, sans-serif; letter-spacing: 2px; text-shadow: 0 0 8px #ffd23f88; pointer-events: none; }
.slot-hint .arrow { font-size: 30px; line-height: 1; margin-top: 6px; animation: bounce 1s ease-in-out infinite; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
.cslot.empty .slot-hint { display: flex; }
.cslot:not(.empty) .slot-bay { border-color: transparent; background: none; }
.cslot.ready .slot-bay { border-color: #ffd23f; background: rgba(255, 210, 63, .14); animation: pulse .8s ease-in-out infinite; }
@keyframes pulse { 50% { background: rgba(255, 210, 63, .3); } }
.cslot.hot .slot-bay { background: rgba(255, 210, 63, .45); border-style: solid; }
.cslot-mouth { display: flex; align-items: center; justify-content: center; border-top-color: #7a7a7a; background: linear-gradient(#1a1a1a, #000 70%); }
.cslot-mouth span { font: 700 9px Arial, sans-serif; letter-spacing: 4px; color: #777; margin-top: 4px; }
.cslot { z-index: 1; }
.cart { cursor: grab; }
.cslot.hot { outline: 3px solid #ffd23f; outline-offset: 6px; border-radius: 6px; }
.dicon.ghost { position: fixed; pointer-events: none; z-index: 300000; color: #fff; text-shadow: 0 1px 3px #000; opacity: .9; }
.cart-ridges { height: 14px; margin-bottom: 6px; border-radius: 2px; background: repeating-linear-gradient(90deg, #2c2c2c 0 3px, #555 3px 6px); }
.cart-label { height: 52px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; padding: 4px; overflow: hidden; word-break: break-word; color: #fff; font: 700 13px system-ui, sans-serif; text-shadow: 0 1px 2px #0008; border: 2px solid #fff3; border-radius: 3px; }
.cslot-mouth { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; background: linear-gradient(#1a1a1a, #000 70%); border-top: 3px solid #7a7a7a; display: flex; align-items: center; justify-content: center; border-radius: 4px 4px 0 0; box-shadow: inset 0 6px 8px #000; }
.md-ctrl { flex: none; width: 132px; display: flex; flex-direction: column; gap: 6px; }
.md-sw { position: relative; width: 46px; height: 20px; background: #000; border: 2px solid #555; border-radius: 4px; cursor: pointer; }
.md-knob { position: absolute; top: 1px; left: 2px; width: 20px; height: 14px; border-radius: 3px; background: linear-gradient(#bbb, #777); transition: left .15s; }
.md-knob.on { left: 22px; }
.md-lbl { display: flex; align-items: center; gap: 6px; font: 700 10px Arial, sans-serif; letter-spacing: 2px; color: #bbb; }
.md-led { width: 9px; height: 9px; border-radius: 50%; background: #3a0000; }
.md-led.on { background: #ff3030; box-shadow: 0 0 8px #f00; }
.md-btn { background: linear-gradient(#3b3b3b, #1c1c1c); color: #ddd; border: 1px solid #555; border-radius: 4px; padding: 4px 6px; font: 700 10px Arial, sans-serif; letter-spacing: 1px; cursor: pointer; }
.md-btn:hover { background: #555; }
.md-front { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding-top: 8px; border-top: 1px solid #222; }
.md-port { flex: none; width: 66px; height: 28px; box-sizing: border-box; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; padding: 4px 6px; background: #050505; border: 2px solid #333; border-radius: 3px 3px 12px 12px; }
.md-port i { width: 5px; height: 5px; margin: auto; border-radius: 50%; background: #777; }
.md-info { flex: 1; text-align: center; font-size: 12px; color: #bbb; min-width: 0; }

/* ---- Icône de cartouche 16 bits sur le bureau ---- */
.dicon .ico { line-height: 1; }

/* ---- Lecteur de jeu (Worker isolé) ---- */
.pvplayer { flex: 1; min-width: 0; min-height: 0; display: flex; background: #000; outline: none; }
.pvplayer canvas { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; display: block; }
.pvplayer.stopped canvas { filter: grayscale(1) brightness(.5); }
/* Plaque titre + auteur de la console */
.md-plate { margin: 0 auto 6px; max-width: 100%; padding: 5px 12px 6px; background: #070707; border: 1px solid #3a3a3a; border-radius: 6px; box-shadow: inset 0 0 10px #000; }
.md-plate .pt { font: 700 12px Arial, sans-serif; letter-spacing: 2px; color: #aaa; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-plate .pa { font: 900 24px 'Arial Black', Impact, sans-serif; letter-spacing: 2px; color: #ffd23f; text-shadow: 0 0 10px #ffd23f66; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-plate .pa:empty { display: none; }
/* hauteurs réservées : la fenêtre de la console (non redimensionnable) ne change jamais de taille, que la plaque soit vide ou remplie et que le message tienne sur 1 ou 2 lignes */
.md-plate { min-height: 57px; display: flex; flex-direction: column; justify-content: center; }
.cinfo { min-height: 32px; }
.md-plate.none .pt { color: #666; }

/* ---- Icône du Studio de jeux ---- */
.sti { position: relative; display: block; width: 60px; height: 48px; margin: 2px auto 4px; box-sizing: border-box; background: linear-gradient(#2e3f73, #1a2547); border: 1px solid #8aa4ee; border-radius: 6px; box-shadow: 0 3px 6px #000a, inset 0 1px 0 #6f8ad8; }
.sti-bar { display: flex; gap: 3px; align-items: center; height: 9px; padding: 0 4px; background: #121a38; border-radius: 5px 5px 0 0; }
.sti-bar i { width: 4px; height: 4px; border-radius: 50%; background: #ff5f57; }
.sti-bar i:nth-child(2) { background: #ffbd2e; }
.sti-bar i:nth-child(3) { background: #28c840; }
.sti-grid { position: absolute; left: 9px; top: 13px; display: grid; grid-template-columns: repeat(7, 5px); grid-auto-rows: 5px; background: #0d1226; box-shadow: 0 0 0 1px #4a5d99; }
.sti-grid i { display: block; }
.sti-grid i.c-r { background: #ff004d; }
.sti-grid i.c-w { background: #fff1e8; }
.sti-pencil { position: absolute; right: -7px; bottom: -4px; width: 7px; height: 30px; transform: rotate(38deg); border-radius: 1px; box-shadow: 0 1px 3px #0008;
  background: linear-gradient(#2b2b2b 0 4px, #e8c28a 4px 9px, #ffd23f 9px 24px, #b8b8b8 24px 26px, #ff77a8 26px 30px); }

/* ---- Icône de la calculatrice ---- */
.cai { position: relative; display: block; width: 40px; height: 50px; margin: 0 auto 4px; box-sizing: border-box; padding: 4px; background: linear-gradient(#e6e9f0, #b9bfcc); border: 1px solid #5b6275; border-radius: 6px; box-shadow: 0 3px 6px #000a, inset 0 1px 0 #fff; }
.cai-screen { display: block; height: 12px; margin-bottom: 4px; padding: 0 3px; background: linear-gradient(#a8d8a0, #88c080); border: 1px solid #4a6a45; border-radius: 2px; text-align: right; font: 700 9px/11px Consolas, monospace; color: #1d3a1a; text-shadow: none; }
.cai-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.cai-keys i { display: block; height: 6px; background: linear-gradient(#fff, #cfd4e0); border: 1px solid #7d8499; border-radius: 1px; }
.cai-keys i.op { background: linear-gradient(#ffb347, #e07b00); border-color: #8a4b00; }

/* ---- Icône de la console 16 bits, vue de dessus ---- */
.mdi { position: relative; display: block; width: 68px; height: 48px; margin: 2px auto 6px; box-sizing: border-box; border: 1px solid #6a6a6a; border-radius: 11px 11px 8px 8px;
  background: linear-gradient(160deg, #3b3b3b, #121212 55%, #050505); box-shadow: 0 4px 7px #000b, inset 0 1px 0 #8a8a8a, inset 0 -3px 5px #000; }
.mdi-ring { position: absolute; left: 6px; top: 7px; width: 31px; height: 31px; box-sizing: border-box; border-radius: 50%; border: 3px solid #4d4d4d;
  background: radial-gradient(circle at 40% 35%, #262626, #000 72%); box-shadow: 0 0 0 1px #000, inset 0 0 5px #000; }
.mdi-ring::after { content: ''; position: absolute; left: 6px; right: 6px; top: 9px; height: 2px; background: #9a9a9a; border-radius: 1px; box-shadow: 0 5px 0 #6a6a6a; }
.mdi-slot { position: absolute; left: 42px; top: 7px; width: 22px; height: 15px; box-sizing: border-box; padding: 2px; background: #000; border: 1px solid #555; border-radius: 3px; box-shadow: inset 0 2px 4px #000; }
.mdi-cart { display: block; width: 100%; height: 100%; border: 1px solid #111; border-radius: 2px; background: repeating-linear-gradient(90deg, #8d8d8d 0 2px, #5a5a5a 2px 4px); }
.mdi-logo { position: absolute; left: 42px; top: 26px; width: 22px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #cfcfcf, #8a8a8a); }
.mdi-led { position: absolute; left: 42px; top: 34px; width: 4px; height: 4px; border-radius: 50%; background: #ff3030; box-shadow: 0 0 5px #f00; }
.mdi-port { position: absolute; bottom: -3px; width: 12px; height: 6px; box-sizing: border-box; background: linear-gradient(#222, #050505); border: 1px solid #777; border-radius: 1px 1px 4px 4px; }
.mdi-port.p1 { left: 36px; }
.mdi-port.p2 { left: 52px; }

/* ---- Icône de cartouche 16 bits : boîtier gris à nervures, étiquette en creux, coins chanfreinés, contacts dorés ---- */
.mdc { position: relative; display: block; width: 56px; height: 50px; margin: 2px auto 4px; filter: drop-shadow(0 3px 3px #000a); }
.mdc-body { position: absolute; inset: 0; box-sizing: border-box; padding: 5px 5px 0; background: linear-gradient(#808080, #4c4c4c 40%, #333); border-radius: 4px 4px 0 0;
  clip-path: polygon(0 0, 100% 0, 100% 76%, 90% 100%, 10% 100%, 0 76%); }
.mdc-r { display: block; height: 8px; margin: 0 2px 4px; border-radius: 1px; background: repeating-linear-gradient(0deg, #262626 0 1px, #939393 1px 3px); }
.mdc-l { display: flex; align-items: center; justify-content: center; height: 24px; margin: 0 1px; border: 2px solid #1c1c1c; border-radius: 2px; box-shadow: inset 0 0 0 1px #fff3; }
.mdc-l b { font: 900 14px 'Arial Black', Arial, sans-serif; color: #fff; text-shadow: 0 1px 2px #0009; }
.mdc-pins { position: absolute; left: 11px; right: 11px; bottom: 1px; height: 5px; background: repeating-linear-gradient(90deg, #c9a227 0 2px, #1b1b1b 2px 4px); }
.mdc-lock { position: absolute; right: -6px; top: -6px; font-size: 14px; line-height: 1; filter: drop-shadow(0 1px 2px #000); }

/* ---- Cartouche dans la fente de la console : même forme que l'icône (coins du bas biseautés, nervures, étiquette en creux, contacts dorés) ---- */
.cart { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(0 -2px 5px #000a); }
.cart-body { position: absolute; inset: 0; box-sizing: border-box; padding: 8px 12px 0; background: linear-gradient(#858585, #4e4e4e 40%, #343434); border-radius: 6px 6px 0 0;
  clip-path: polygon(0 0, 100% 0, 100% 64%, 88% 100%, 12% 100%, 0 64%); }
.cart-ridges { height: 14px; margin: 0 4px 6px; border-radius: 1px; background: repeating-linear-gradient(0deg, #262626 0 1px, #979797 1px 3px); }
.cart-label { margin: 0 2px; border: 3px solid #1c1c1c; border-radius: 3px; box-shadow: inset 0 0 0 1px #fff3; }
.cart-pins { position: absolute; left: 24px; right: 24px; bottom: 2px; height: 8px; background: repeating-linear-gradient(90deg, #c9a227 0 3px, #1b1b1b 3px 6px); }
.snow { width: 100%; height: 100%; display: block; image-rendering: pixelated; filter: contrast(1.15); }

/* ---- Éditeur de musique ---- */
.mgrid { display: grid; grid-template-columns: 56px repeat(16, 30px); gap: 3px; align-items: center; }
.mlbl { font: 700 12px Arial, sans-serif; color: #555; }
.mcell { height: 30px; display: flex; align-items: center; justify-content: center; background: #e4e7ee; border: 1px solid #b5bac8; border-radius: 3px; cursor: pointer; font: 700 12px Consolas, monospace; color: #99a; user-select: none; }
.mcell.on { color: #fff; text-shadow: 0 1px 2px #0008; border-color: #0004; }
.mcell:hover { outline: 2px solid var(--accent); }

/* ---- Fenêtre « Personnaliser » (fond d'écran et thèmes) ---- */
.look { padding: 12px; overflow: auto; display: flex; flex-direction: column; gap: 10px; background: #f3f3f3; flex: 1; }
.look h3 { margin: 6px 0 0; font-size: 14px; }
.look-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.look-item { cursor: pointer; border: 2px solid transparent; border-radius: 6px; padding: 3px; background: #fff; text-align: center; font-size: 12px; user-select: none; }
.look-item:hover { border-color: #b5bac8; }
.look-item.on { border-color: var(--accent); }
.look-prev { height: 54px; border-radius: 4px; margin-bottom: 3px; border: 1px solid #0003; }
.look-dots { display: flex; justify-content: center; align-items: center; gap: 4px; height: 54px; margin-bottom: 3px; border-radius: 4px; background: #e9ebf0; }
.look-dots i { width: 14px; height: 30px; border-radius: 4px; border: 1px solid #0003; }
.look-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---- Rappel de sauvegarde ---- */
.toast { position: fixed; right: 14px; bottom: 54px; z-index: 100001; max-width: 360px; padding: 12px 14px; background: var(--bar); color: #eee; font-size: 13px; line-height: 1.35; border-radius: 8px; border-left: 4px solid var(--accent-light); box-shadow: 0 6px 20px #0009; }
.toast-btns { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.toast-btns button { padding: 5px 10px; font: inherit; cursor: pointer; border: 0; border-radius: 4px; background: var(--accent); color: #fff; }
.toast-btns button:last-child { background: var(--task); color: #ddd; }


/* ---- Studio de jeux : thème sombre standard (type « Dark+ ») ---- */
.code-wrap { position: relative; flex: 1; min-height: 0; background: #1e1e1e; overflow: hidden; }
.code-hl, .code-ta { position: absolute; inset: 0; margin: 0; border: 0; padding: 10px 12px; box-sizing: border-box; font: 14px/1.5 Consolas, "Cascadia Mono", "Courier New", monospace;
  letter-spacing: 0; font-variant-ligatures: none; tab-size: 2; white-space: pre; overflow-wrap: normal; word-break: normal; }
.code-hl { overflow: hidden; pointer-events: none; color: #d4d4d4; background: transparent; }
.code-ta { background: transparent; color: transparent; -webkit-text-fill-color: transparent; caret-color: #ffffff; resize: none; outline: none; overflow: auto; }
.code-ta::selection { background: rgba(38, 79, 120, .9); }
.hc { color: #6a9955; } .hs { color: #ce9178; } .hn { color: #b5cea8; } .hk { color: #569cd6; } .hk2 { color: #c586c0; }
.hf { color: #dcdcaa; } .ht { color: #4ec9b0; } .hv { color: #9cdcfe; }

.sdark { scrollbar-color: #4a4a4a #1e1e1e; }
.sdark * { scrollbar-color: #4a4a4a #1e1e1e; }
.sdark .wbody, .sdark .pane { background: #1e1e1e; color: #d4d4d4; }
.sdark .toolbar { background: #252526; color: #d4d4d4; border-bottom: 1px solid #3c3c3c; }
.sdark .toolbar input[type=text], .sdark .toolbar input:not([type]), .sdark .toolbar input[type=search] { background: #3c3c3c; color: #e8e8e8; border: 1px solid #555; border-radius: 3px; }
.sdark .toolbar input::placeholder { color: #8c8c8c; }
.sdark button { background: #3a3d41; color: #e0e0e0; border: 1px solid #4b4f55; border-radius: 3px; }
.sdark button:hover { background: #4a4e54; }
.sdark button:disabled { opacity: .5; }
.sdark .toolbar button.on { background: #264f78; border-color: #3794ff; }
.sdark .tabs { background: #252526; border-bottom: 1px solid #3c3c3c; }
.sdark .tabs button { background: #2d2d2d; color: #a0a0a0; border: 0; border-top: 2px solid transparent; border-radius: 0; }
.sdark .tabs button:hover { color: #fff; }
.sdark .tabs button.on { background: #1e1e1e; color: #fff; border-top-color: var(--accent-light); }
.sdark .status { background: #007acc; color: #fff; }
.sdark pre.help { background: #1e1e1e; color: #d4d4d4; }
.sdark .slot { background: #2d2d2d; color: #cfcfcf; border-color: #4b4f55; }
.sdark .slot.used { background: #3f3519; color: #ffd479; }
.sdark .slot.on { background: #264f78; color: #fff; outline: 2px solid #3794ff; }
.sdark .mcell { background: #2d2d2d; border-color: #4b4f55; color: #6d6d6d; }
.sdark .mcell.on { color: #fff; border-color: #0006; }
.sdark .mlbl, .sdark .hint { color: #9da5b4; }
.sdark canvas.px { background: #111; }
.sdark .sw { border-color: #1e1e1e; outline: 1px solid #777; }
.sdark .sw.on { border-color: #fff; outline: 2px solid #3794ff; }
.sdark input[type=range] { accent-color: #3794ff; }
.sdark .modal { background: rgba(0, 0, 0, .6); }
.sdark .modal .box { background: #252526; color: #ddd; box-shadow: 0 8px 28px #000a; }

/* ---- Numéros de ligne, ligne fautive et bandeau d'erreur du Studio ---- */
.code-wrap { --dg: 2; }
.code-gutter { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--dg) * 1ch + 28px); margin: 0; padding: 10px 12px 10px 0; box-sizing: border-box;
  text-align: right; color: #858585; font: 14px/1.5 Consolas, "Cascadia Mono", "Courier New", monospace; letter-spacing: 0; white-space: pre; overflow: hidden;
  border-right: 1px solid #333; user-select: none; pointer-events: none; }
.code-hl, .code-ta { left: calc(var(--dg) * 1ch + 28px); }
.code-err { position: absolute; left: 0; right: 0; height: 21px; background: rgba(241, 76, 76, .2); border-left: 3px solid #f14c4c; pointer-events: none; }
.errbar { flex: none; display: flex; gap: 10px; align-items: center; padding: 6px 10px; background: #5a1d1d; color: #ffd6d6; border-top: 1px solid #f14c4c; font-size: 13px; }
.errtxt { flex: 1; min-width: 0; line-height: 1.35; user-select: text; }
.sdark .errbar button { background: #7a2a2a; border-color: #a63a3a; color: #fff; }

/* ---- Recherche dans le code (Ctrl+F) ---- */
.wbody:focus { outline: none; }
.code-find { position: absolute; inset: 0; left: calc(var(--dg) * 1ch + 28px); margin: 0; padding: 10px 12px; box-sizing: border-box; border: 0; overflow: hidden; pointer-events: none;
  font: 14px/1.5 Consolas, "Cascadia Mono", "Courier New", monospace; letter-spacing: 0; font-variant-ligatures: none; tab-size: 2; white-space: pre; color: transparent; background: transparent; }
.code-find mark { background: rgba(234, 92, 0, .38); color: transparent; border-radius: 2px; }
.code-find mark.cur { background: rgba(255, 200, 0, .6); outline: 1px solid #ffc800; }
.findbar { position: absolute; top: 6px; right: 22px; z-index: 5; display: flex; gap: 4px; align-items: center; padding: 5px 6px; background: #252526; border: 1px solid #454545; border-radius: 4px; box-shadow: 0 4px 14px #0009; }
.findbar input[type=text] { width: 190px; padding: 3px 6px; background: #3c3c3c; color: #e8e8e8; border: 1px solid #555; border-radius: 3px; font: 13px Consolas, monospace; }
.findbar input[type=text]:focus { outline: 1px solid #3794ff; border-color: #3794ff; }
.findbar button { padding: 1px 7px; line-height: 1.5; }
.fcase { display: flex; align-items: center; gap: 3px; font-size: 12px; color: #bbb; cursor: pointer; }
.fcnt { min-width: 74px; text-align: center; font-size: 12px; color: #bbb; }
.fcnt.none { color: #f48771; }

/* ---- Choix de la langue ---- */
.langov { position: fixed; inset: 0; z-index: 400000; display: flex; align-items: center; justify-content: center; background: rgba(5, 10, 25, .75); backdrop-filter: blur(3px); }
.langbox { position: relative; min-width: 340px; padding: 24px 34px 28px; text-align: center; color: #fff; background: #1b1f2a; border: 1px solid #3a4258; border-radius: 16px; box-shadow: 0 14px 44px #000b; }
.ltitle { font-size: 40px; line-height: 1; margin-bottom: 6px; }
.langbox h2 { margin: 3px 0; font: 600 18px system-ui, 'Segoe UI', 'Yu Gothic UI', 'Meiryo', sans-serif; color: #e8ecf8; }
.lbtns { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.langbtn { display: flex; align-items: center; gap: 16px; width: 100%; padding: 12px 20px; font: 600 21px system-ui, 'Segoe UI', 'Yu Gothic UI', 'Meiryo', sans-serif; color: #fff; background: #2c3242; border: 2px solid transparent; border-radius: 12px; cursor: pointer; }
.langbtn:hover, .langbtn:focus { background: var(--accent); outline: none; }
.langbtn.pre { border-color: var(--accent-light); }
.lflag { font-size: 30px; line-height: 1; }
.lclose { position: absolute; top: 8px; right: 10px; width: 30px; height: 30px; font-size: 16px; color: #ccc; background: none; border: 0; border-radius: 6px; cursor: pointer; }
.lclose:hover { background: #3a4258; color: #fff; }

/* ---- Logos du bureau : MiniOS au centre (SVG), petit logo OGAOO en bas à droite, derrière les icônes et les fenêtres ---- */
#logo { position: absolute; left: 50%; top: calc(50% - 20px); transform: translate(-50%, -50%); width: min(62vw, 700px); height: auto; opacity: .95;
  pointer-events: none; user-select: none; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .35)); }
#logo2 { position: absolute; right: 16px; bottom: 52px; width: clamp(90px, 9vw, 130px); height: auto; opacity: .8;
  pointer-events: none; user-select: none; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .4)); }
#logo.hidden, #logo2.hidden { display: none; }

/* ---- Signature OGAOO : lien discret vers ogaoo.com dans la barre des tâches, titre de page lisible par les lecteurs d'écran et les moteurs de recherche ---- */
#credit { flex: none; margin: 0 6px 0 4px; padding: 4px 8px; color: #cfd8f2; font-size: 12px; text-decoration: none; border-radius: 4px; opacity: .75; white-space: nowrap; }
#credit:hover, #credit:focus-visible { opacity: 1; background: rgba(255, 255, 255, .12); text-decoration: underline; }
@media (max-width: 560px) { #credit { display: none; } }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nojs { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 80vw; margin: 0; padding: 16px 20px; text-align: center; color: #fff; background: rgba(8, 12, 28, .7); border-radius: 10px; font: 16px/1.4 system-ui, sans-serif; z-index: 5; }
.nojs a { color: #8fd3ff; }

/* ---- Compteur de présence : en haut à droite du bureau (visiteurs connectés en ce moment + record) ---- */
.online { position: absolute; top: 12px; right: 14px; z-index: 4; padding: 7px 12px 8px; text-align: right; color: #fff; font-size: 13px; line-height: 1.25;
  background: rgba(8, 12, 28, .42); border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; text-shadow: 0 1px 3px #000;
  pointer-events: none; user-select: none; backdrop-filter: blur(4px); }
.online[hidden] { display: none; }
.on-now { font-weight: 700; font-size: 14px; white-space: nowrap; }
.on-dot { display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; background: #35e0a1; box-shadow: 0 0 8px #35e0a1; vertical-align: 1px; animation: on-pulse 2.4s ease-in-out infinite; }
.on-max { margin-top: 2px; opacity: .82; font-size: 12px; white-space: nowrap; }
@keyframes on-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }