/* P8 Pocket — l'habillage reprend la console : uniquement les 16 couleurs de la
   palette PICO-8, la police d'origine, pas d'anti-aliasing, tout en pixels
   entiers. Les seules valeurs semi-transparentes sont celles qu'il faut pour
   voir a travers (selection de texte, voile des panneaux) et elles derivent des
   memes couleurs. */

@font-face {
  font-family: 'PICO-8';
  src: url('fonts/pico-8.ttf') format('truetype');
  font-display: block;
}

:root {
  --c0:#000000; --c1:#1D2B53; --c2:#7E2553; --c3:#008751;
  --c4:#AB5236; --c5:#5F574F; --c6:#C2C3C7; --c7:#FFF1E8;
  --c8:#FF004D; --c9:#FFA300; --c10:#FFEC27; --c11:#00E436;
  --c12:#29ADFF; --c13:#83769C; --c14:#FF77A8; --c15:#FFCCAA;
  --vh: 100dvh;
  --bar: 46px;      /* barre haute : cible tactile confortable */
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

/* nos display:flex l'emporteraient sur la feuille du navigateur : sans ca,
   [hidden] ne cache plus rien et les panneaux restent devant l'app. */
[hidden] { display:none !important; }

html, body { height:100%; overflow:hidden; }

body {
  font-family:'PICO-8', ui-monospace, monospace;
  font-size:16px;
  -webkit-font-smoothing:none;
  background:var(--c0); color:var(--c7);
  height:var(--vh);
  display:flex; flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom);
  overscroll-behavior:none;
}

button, input { font-family:inherit; font-size:inherit; color:inherit; }
button { background:none; border:none; cursor:pointer; }
.grow { flex:1; }

/* Les pictos sont des SVG de 8x8 pixels, colores par la couleur du bouton. */
.icon svg, .tool svg, .mini svg { width:20px; height:20px; display:block; }
.icon.go svg { width:24px; height:24px; }
.tool svg { width:22px; height:22px; }
.sp-tools .tool.txt { font-size:13px; }

/* ------------------------------------------------------------- barre haute */
.topbar {
  display:flex; align-items:center; gap:4px; overflow:hidden;
  height:var(--bar); flex:0 0 var(--bar);
  background:var(--c1); border-bottom:2px solid var(--c0);
  padding:0 5px; padding-top:env(safe-area-inset-top);
}
.topbar .title { flex:1; min-width:0; padding:0 4px; color:var(--c6); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.topbar .title b { color:var(--c9); padding-left:4px; }
.icon {
  flex:0 0 auto; width:40px; height:38px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  color:var(--c6); background:var(--c5); border-radius:3px; font-size:17px;
}
.icon.wide { width:auto; min-width:52px; padding:0 9px; font-size:15px; }
.icon:active { background:var(--c6); color:var(--c1); }
.icon:disabled { color:var(--c13); background:var(--c1); }
.icon.go { background:var(--c11); color:var(--c0); width:auto; min-width:52px; padding:0 12px; }
.icon.go.busy { background:var(--c10); }
/* la bascule console / code ne sert que pendant une partie */
#btn-stage { display:none; }
body.running #btn-stage { display:flex; }

/* ---------------------------------------------------------------- console */
#stage {
  position:relative; flex:0 0 auto;
  width:100%; aspect-ratio:1/1; max-height:52vh;
  background:var(--c0); border-bottom:2px solid var(--c1);
  overflow:hidden;
}
/* Sur telephone, l'ecran ne peut montrer qu'une chose a la fois : au repos
   l'editeur prend tout, pendant le test la console prend tout, et le bouton
   code / jeu partage les deux. Ces regles ne valent que la, d'ou le media. */
@media (max-width: 859px) {
  body.no-stage #stage,
  body.typing #stage { display:none; }
  body.running:not(.split) #stage { flex:1; max-height:none; aspect-ratio:auto; display:block; }
  body.running:not(.split) .tabs,
  body.running:not(.split) main,
  body.running:not(.split) #keybar { display:none; }
}

#stage iframe { width:100%; height:100%; border:0; display:block; background:var(--c0); }
#stage-idle {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--c5); font-size:13px; background:var(--c0);
}
body.running #stage-idle { display:none; }
.stage-btn {
  position:absolute; right:8px; bottom:8px; width:36px; height:32px;
  background:var(--c1); color:var(--c6); border-radius:3px; display:none;
}
body.running .stage-btn { display:block; }

/* ---------------------------------------------------------------- onglets */
.tabs { display:flex; flex:0 0 36px; background:var(--c0); gap:2px; padding:0 3px; }
.tabs button {
  flex:1; height:36px; color:var(--c13); background:var(--c1);
  font-size:15px; border-radius:3px 3px 0 0;
}
.tabs button.on { background:var(--c5); color:var(--c7); }

/* ----------------------------------------------------------------- panneaux */
main { flex:1; min-height:0; position:relative; background:var(--c1); }
.pane { position:absolute; inset:0; display:none; flex-direction:column; }
.pane.on { display:flex; }
.pane-head {
  display:flex; align-items:center; gap:8px; padding:6px; min-height:44px;
  background:var(--c5); color:var(--c7); font-size:13px; flex:0 0 auto;
}
.mini {
  display:flex; align-items:center; justify-content:center;
  background:var(--c1); color:var(--c6); padding:8px 11px; border-radius:3px; font-size:13px;
}
.mini:active { background:var(--c12); color:var(--c0); }
.scroller { flex:1; overflow:auto; background:var(--c0); padding:6px; }
.scroller canvas { image-rendering:pixelated; display:block; }

/* Les onglets de code de PICO-8 : le fichier les separe par une ligne -->8.
   La liste defile, les outils restent a portee a droite. */
.code-bar {
  flex:0 0 auto; display:flex; align-items:center; gap:4px;
  padding:4px; background:var(--c0);
}
.code-tabs {
  flex:1; min-width:0; display:flex; gap:3px; overflow-x:auto; scrollbar-width:none;
}
.code-tools { flex:0 0 auto; display:flex; gap:3px; }
.code-tools .mini { padding:8px 7px; }
.code-tools .mini svg { width:17px; height:17px; }
.mini:disabled { color:var(--c5); }

/* chercher / remplacer, sur toute la cartouche */
.search {
  flex:0 0 auto; display:flex; flex-direction:column; gap:6px;
  padding:6px; background:var(--c1); border-bottom:2px solid var(--c5);
}
.search input {
  background:var(--c0); border:1px solid var(--c5); color:var(--c7);
  padding:11px 10px; border-radius:3px; font-size:16px;
}
.search input:focus { outline:none; border-color:var(--c12); }
.search-row { display:flex; gap:6px; align-items:center; }
.search-row .mini.toggle { background:var(--c1); color:var(--c13); }
.search-row .mini.toggle.on { background:var(--c12); color:var(--c0); }
.search-row .mini { padding:11px 12px; background:var(--c5); color:var(--c7); }
.code-tabs::-webkit-scrollbar { display:none; }
.code-tabs button {
  flex:0 0 auto; min-width:34px; height:32px; padding:0 8px;
  background:var(--c1); color:var(--c13); border-radius:3px; font-size:14px;
}
.code-tabs button.on { background:var(--c5); color:var(--c10); }
.code-tabs button.add { color:var(--c6); }

/* ----------------------------------------------------------------- editeur */
.editor { position:relative; flex:1; overflow:hidden; background:var(--c1); }
.editor .hl, .editor .ta, .keys button, .topbar, .tabs button {
  font-variant-emoji: text;   /* les fleches doivent venir de la fonte PICO-8 */
}
.editor .hl, .editor .ta {
  position:absolute; inset:0; margin:0; padding:8px 16px;   /* de quoi attraper un debut de ligne */
  font:inherit; font-size:16px; line-height:21px;
  white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere;
  border:0; overflow:auto; -webkit-text-size-adjust:100%;
  tab-size:1; -moz-tab-size:1;   /* comme PICO-8 : une tabulation vaut un caractere */
}
.editor .hl { color:var(--c7); pointer-events:none; z-index:1; }
.editor .ta {
  z-index:2; background:transparent; color:transparent; caret-color:var(--c10);
  resize:none; outline:none;
}
.editor .ta::selection { background:rgba(41,173,255,.45); }   /* c12, laisse voir le code dessous */
.editor i { font-style:normal; }
.editor i.k { color:var(--c14); }   /* mots-cles */
.editor i.a { color:var(--c12); }   /* fonctions pico-8 */
.editor i.n { color:var(--c9); }    /* nombres */
.editor i.s { color:var(--c11); }   /* chaines */
.editor i.c { color:var(--c13); }   /* commentaires */
.editor i.o { color:var(--c6); }    /* operateurs */

/* -------------------------------------------------------------- barre touches */
#keybar { flex:0 0 auto; background:var(--c0); border-top:2px solid var(--c5); }
body:not(.typing) #keybar { display:none; }
.keys { display:flex; gap:4px; padding:4px; overflow-x:auto; scrollbar-width:none; }
.keys::-webkit-scrollbar { display:none; }
.keys button {
  flex:0 0 auto; min-width:40px; height:40px; padding:0 9px;
  background:var(--c5); color:var(--c7); border-radius:3px;
  display:flex; align-items:center; justify-content:center; font-size:16px;
}
.keys button:active { background:var(--c12); color:var(--c0); }
.keys button.wide { color:var(--c15); }
#keys-glyphs button { background:var(--c2); color:var(--c15); }

/* -------------------------------------------------------------------- infos */
.rows { padding:10px; display:flex; flex-direction:column; gap:10px; }
.gauge { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--c6); }
.gauge span { flex:0 0 92px; }
.gauge .bar { flex:1; height:10px; background:var(--c0); border:1px solid var(--c5); }
.gauge .bar i { display:block; height:100%; width:0; background:var(--c11); transition:width .2s; }
.gauge .bar i.warn { background:var(--c9); }
.gauge .bar i.full { background:var(--c8); }
.gauge em { flex:0 0 auto; font-style:normal; color:var(--c7); font-size:12px; }
.btn-row { display:flex; gap:8px; padding:0 10px 10px; flex-wrap:wrap; }
.btn {
  position:relative; flex:1; min-width:120px; padding:14px 10px;
  background:var(--c5); color:var(--c7); border-radius:3px; font-size:15px;
}
.btn:active { background:var(--c6); color:var(--c1); }
.btn.primary { background:var(--c12); color:var(--c0); }
.btn.ghost { background:var(--c1); color:var(--c13); }
.btn.big { font-size:18px; padding:16px 18px; }
.btn input[type=file] { position:absolute; inset:0; opacity:0; }
.hint { padding:0 10px 12px; font-size:12px; color:var(--c13); line-height:1.7; }
.hint b { color:var(--c6); }
.pane#tab-info { overflow-y:auto; display:none; }
.pane#tab-info.on { display:block; }

/* ------------------------------------------------------------------ feuille */
.sheet { position:fixed; inset:0; background:rgba(0,0,0,.72); z-index:50; display:flex; align-items:flex-end; }
.sheet-in {
  width:100%; max-height:90%; overflow-y:auto; background:var(--c1);
  border-top:2px solid var(--c5); padding-bottom:calc(14px + env(safe-area-inset-bottom));
}
.sheet-head { display:flex; align-items:center; gap:8px; padding:12px 10px; color:var(--c9); border-bottom:2px solid var(--c5); }
.sheet-head.sub { color:var(--c13); border-top:2px solid var(--c5); margin-top:6px; }
.sheet-head b { flex:1; }
.field { display:flex; align-items:center; gap:8px; padding:7px 10px; font-size:13px; color:var(--c13); }
.field span { flex:0 0 66px; }
.field input {
  flex:1; min-width:0; background:var(--c0); border:1px solid var(--c5);
  color:var(--c7); padding:12px 10px; border-radius:3px; font-size:16px;
}
.field input:focus { outline:none; border-color:var(--c12); }
.files { padding:10px; display:flex; flex-direction:column; gap:4px; }
.files button {
  text-align:left; padding:14px 12px; background:var(--c0); color:var(--c6);
  border-radius:3px; font-size:15px; display:flex; gap:8px; align-items:center;
}
.files button:active { background:var(--c12); color:var(--c0); }
.files button.on { color:var(--c10); }
.files button i { font-style:normal; color:var(--c5); margin-left:auto; font-size:12px; }
.files .empty { color:var(--c13); font-size:12px; padding:4px 2px; line-height:1.7; }
.rt { padding:8px 10px; font-size:12px; color:var(--c11); }
.rt.none { color:var(--c8); }

/* ------------------------------------------------------------------ accueil */
.overlay { position:fixed; inset:0; z-index:60; background:var(--c0); display:flex; align-items:center; justify-content:center; }
.setup-in { max-width:400px; padding:24px; text-align:center; display:flex; flex-direction:column; gap:16px; align-items:center; }
.setup-in p { font-size:13px; color:var(--c13); line-height:1.8; }
.setup-in b { color:var(--c6); }
.idle-logo { font-size:44px; color:var(--c14); letter-spacing:2px; }
.idle-logo.big { font-size:64px; }

/* -------------------------------------------------------------------- toast */
#toast {
  position:fixed; left:50%; bottom:14%; transform:translate(-50%,12px);
  background:var(--c5); color:var(--c7); padding:10px 16px; border-radius:3px;
  font-size:13px; max-width:88%; text-align:center; opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s; z-index:80; line-height:1.6;
}
#toast.on { opacity:1; transform:translate(-50%,0); }
#toast.bad { background:var(--c8); }

body.loading main, body.loading .tabs, body.loading .topbar { visibility:hidden; }

/* --------------------------------------------------------- editeur sprites */
/* Pas de clavier sur cet ecran : le dessin prend le haut, les outils et la
   palette le milieu, la feuille de sprites le bas. */
.sp { display:flex; flex-direction:column; height:100%; overflow:hidden; }
.sp-head {
  display:flex; align-items:center; gap:6px; padding:6px; min-height:44px;
  background:var(--c5); color:var(--c7); font-size:14px; flex:0 0 auto;
}
.sp-stage { flex:0 0 auto; display:flex; justify-content:center; background:var(--c0); padding:5px; }
.sp-draw {
  width:min(100%, 38vh); aspect-ratio:1/1; display:block;
  image-rendering:pixelated; touch-action:none;   /* le doigt dessine, il ne fait pas defiler */
  background:var(--c0);
}
.sp-tools { display:flex; gap:4px; padding:4px 4px 0; }
.sp-tools .tool {
  flex:1 1 0; min-width:0; overflow:hidden; height:42px;
  display:flex; align-items:center; justify-content:center;
  background:var(--c5); color:var(--c7);
  border-radius:3px; font-size:13px; padding:0 2px;
}
.sp-tools .tool:active { background:var(--c6); color:var(--c1); }
.sp-tools .tool.on { background:var(--c12); color:var(--c0); }
.sp-pal { display:grid; grid-template-columns:repeat(8, 1fr); gap:4px; padding:8px 4px 4px; }
.sp-pal button {
  height:40px; border-radius:3px; font-size:12px;
  border:2px solid var(--c1); display:flex; align-items:flex-end; justify-content:flex-end; padding:2px 4px;
}
.sp-pal button.on { border-color:var(--c7); }
.sp-flags { display:flex; align-items:center; gap:4px; padding:4px; }
.sp-flags span { flex:0 0 auto; color:var(--c13); font-size:12px; padding-right:2px; }
.sp-flags button { flex:1; height:34px; background:var(--c0); color:var(--c13);
  border:1px solid var(--c5); border-radius:3px; font-size:12px; }
.sp-sheet { flex:1; min-height:64px; overflow:auto; background:var(--c0); padding:4px; }
.sp-sheet canvas { image-rendering:pixelated; display:block; margin:0 auto; touch-action:manipulation; }

/* ------------------------------------------------------------ editeur map */
.mp-head {
  display:flex; align-items:center; gap:6px; padding:6px; min-height:44px;
  background:var(--c5); color:var(--c7); font-size:13px; flex:0 0 auto;
}
.mp-view { flex:1; min-height:120px; overflow:auto; background:var(--c0); touch-action:pan-x pan-y; }
.mp-view.painting { touch-action:none; }   /* en dessin, le doigt peint au lieu de faire defiler */
.mp-inner { position:relative; }
.mp-canvas { display:block; width:100%; height:100%; image-rendering:pixelated; }
.mp-grid {
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(95,87,79,.45) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(95,87,79,.45) 1px, transparent 1px);
}
/* la frontiere des lignes qui partagent leur memoire avec les sprites */
.mp-shared { position:absolute; left:0; right:0; height:2px; background:var(--c9); pointer-events:none; }
.mp-pick {
  display:flex; align-items:center; gap:8px; padding:6px;
  background:var(--c5); color:var(--c7); font-size:13px; flex:0 0 auto;
}
.mini.off { color:var(--c13); }
#tab-map .sp-sheet { flex:0 0 auto; max-height:190px; }

/* ------------------------------------------------------------ editeur sons */
/* Les 32 notes en haut : la hauteur sur la grande grille, le volume juste en
   dessous. Le pinceau (onde, volume, effet) reste sous la main. */
.sx-stage { flex:0 0 auto; padding:4px; background:var(--c0); }
.sx-notes, .sx-vol {
  display:block; width:100%; image-rendering:pixelated; touch-action:none;
}
.sx-notes { max-height:44vh; }
.sx-vol { margin-top:3px; height:64px; }
.sx-waves { display:grid; grid-template-columns:repeat(8, 1fr); gap:4px; padding:6px 4px 2px; }
.sx-waves button { height:38px; border-radius:3px; border:2px solid var(--c1); font-size:12px; }
.sx-waves button.on { border-color:var(--c7); }
.sx-row { display:flex; align-items:center; gap:6px; padding:3px 4px; }
.sx-row > span:first-child { flex:0 0 26px; color:var(--c13); font-size:12px; }
.sx-row > span:last-child { flex:1; display:grid; grid-template-columns:repeat(8, 1fr); gap:4px; }
.sx-row button {
  height:34px; background:var(--c1); color:var(--c13);
  border:1px solid var(--c5); border-radius:3px; font-size:12px;
}
.sx-row button.on { background:var(--c12); color:var(--c0); border-color:var(--c12); }
.sx-list { flex:0 0 auto; display:flex; gap:3px; padding:4px; overflow-x:auto; scrollbar-width:none; background:var(--c0); }
.sx-list::-webkit-scrollbar { display:none; }
.sx-list button {
  flex:0 0 auto; min-width:34px; height:34px; border-radius:3px;
  background:var(--c1); color:var(--c5); font-size:12px;
}
.sx-list button.plein { color:var(--c11); }
.sx-list button.on { background:var(--c5); color:var(--c10); }

/* --------------------------------------------------- tablette et ordinateur */
/* A partir d'une certaine largeur, plus besoin de choisir : les outils a
   gauche, le jeu a droite, en permanence. La grille evite de remanier le HTML :
   les memes elements se rangent simplement en deux colonnes. */
@media (min-width: 860px) {
  body {
    display:grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 44%);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "top   stage"
      "tabs  stage"
      "main  stage"
      "keys  stage";
  }
  .topbar { grid-area:top; }
  .tabs { grid-area:tabs; }
  main { grid-area:main; }
  #keybar { grid-area:keys; }

  #stage {
    grid-area:stage;
    width:auto; height:auto; max-height:none; aspect-ratio:auto;
    border-bottom:0; border-left:2px solid var(--c1);
    display:flex; align-items:center; justify-content:center;
  }
  #stage iframe { height:100%; }
  /* la bascule code / jeu ne sert plus : les deux sont la */
  #btn-stage { display:none !important; }

  /* de l'air dans les panneaux, l'ecran n'est plus le facteur limitant */
  .editor .hl, .editor .ta { padding:10px 20px; }
  .sp-draw { width:min(100%, 52vh); }
  .sx-notes { max-height:52vh; }
  .files { padding:12px; }
  .sheet-in { max-width:640px; margin:0 auto; border-radius:6px 6px 0 0; }
}

/* ------------------------------------------------- sons : vue par notes */
/* Le mode tracker de PICO-8 : 32 cases en quatre colonnes de huit. Sans
   clavier physique, les notes se posent sur un clavier a l'ecran, et le
   curseur avance tout seul comme dans un tracker. */
.tk { flex:0 0 auto; padding:4px; }
.tk-grid { display:grid; grid-template-rows:repeat(8, 1fr); grid-auto-flow:column; gap:2px; }
.tk-grid button {
  height:34px; background:var(--c0); color:var(--c7); font-size:12px;
  border-radius:2px; display:flex; align-items:center; justify-content:center; gap:1px;
}
.tk-grid button.vide { color:var(--c5); }
.tk-grid button.on { background:var(--c10); color:var(--c0); }
.tk-grid button.joue { box-shadow:inset 0 0 0 2px var(--c11); }
.tk-grid .i { color:var(--c13); font-size:10px; margin-right:2px; }
.tk-grid button.on .i { color:var(--c4); }
.tk-grid .w { margin-left:5px; }
.tk-grid .v { color:var(--c6); }
.tk-grid .f { color:var(--c12); }
.tk-oct { display:flex; gap:4px; align-items:center; padding:8px 0 4px; }
.tk-oct > span { flex:0 0 26px; color:var(--c13); font-size:12px; }
.tk-oct button {
  flex:1; height:32px; background:var(--c1); color:var(--c13);
  border:1px solid var(--c5); border-radius:3px; font-size:12px;
}
.tk-oct button.on { background:var(--c12); color:var(--c0); border-color:var(--c12); }
.tk-keys { display:flex; gap:4px; align-items:stretch; position:relative; }
.tk-keys .blanches { position:relative; flex:1; display:flex; gap:2px; height:58px; }
.tk-keys .blanches button {
  flex:1; background:var(--c6); color:var(--c0);
  border-radius:0 0 3px 3px; font-size:13px; padding:0 0 6px;
  display:flex; align-items:flex-end; justify-content:center;
}
.tk-keys .blanches button:active { background:var(--c12); }
.tk-keys .noires { position:absolute; inset:0; pointer-events:none; }
.tk-keys .noires button {
  position:absolute; top:0; width:34px; height:60%;
  background:var(--c0); border:1px solid var(--c5); border-radius:0 0 3px 3px;
  pointer-events:auto;
}
.tk-keys .noires button:active { background:var(--c12); }
.tk-keys .repos { flex:0 0 40px; background:var(--c5); color:var(--c7); border-radius:3px; font-size:14px; }