*,*::before,*::after{box-sizing:border-box}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Departure Mono — Helena Zhang, SIL Open Font License 1.1 */
@font-face{font-family:"Departure Mono";src:url(../fonts/departure-mono.woff2) format("woff2");font-display:block}

/* Layout : cockpit plein écran — HUD sur canvas, cibles DOM tirables, panneau de débriefing par catégorie */
:root{
  --bg:#050505;
  --ink:#f4f4f1;
  --dim:rgba(244,244,241,.46);
  --faint:rgba(244,244,241,.16);
  --veil:rgba(5,5,5,.94);
  --mono:"Departure Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --s:1;--px:2px;--hud:22px;--hud2:44px;--fs-s:11px;--fs-l:22px;--fs-xl:33px;--fs-xxl:44px;
  color-scheme:dark;
}
html,body{height:100%;overscroll-behavior:none}
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
button,a{touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
body{
  background:var(--bg);color:var(--ink);font-family:var(--mono);font-size:var(--fs-s);
  overflow:hidden;-webkit-font-smoothing:none;font-smooth:never;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  font-variant-numeric:tabular-nums;
}
.stage{position:fixed;inset:0;touch-action:none;user-select:none;-webkit-user-select:none}
.stage canvas{position:absolute;left:0;top:0;display:block;image-rendering:pixelated}
#top{pointer-events:none;z-index:3}
#base{z-index:1}
.tgts{position:absolute;inset:0;z-index:2}
@media (pointer:fine){.stage,.stage *{cursor:none}}

.id{
  position:fixed;z-index:5;pointer-events:none;
  top:calc(24px * var(--s) + env(safe-area-inset-top,0px));left:calc(24px * var(--s) + env(safe-area-inset-left,0px));
  display:grid;gap:calc(4px * var(--s));
}
.id p{margin:0;font-size:var(--hud);line-height:calc(var(--hud) * 12 / 11);color:var(--dim);white-space:nowrap}
.id h1{margin:0 0 calc(6px * var(--s));font-weight:400;font-size:var(--hud2);line-height:1;white-space:nowrap}
.me{
  display:block;width:max-content;font:inherit;line-height:inherit;color:inherit;background:none;border:0;
  padding:calc(2px * var(--s)) calc(4px * var(--s));margin:calc(-2px * var(--s)) calc(-4px * var(--s));pointer-events:auto;
}
.me.locked{background:var(--ink);color:var(--bg)}
.me.down{visibility:hidden}
.me:focus-visible{outline:var(--px) dashed var(--ink);outline-offset:var(--px)}
@media (pointer:fine){.me{cursor:none}}
.eyebrow{margin:0;font-size:var(--fs-s);letter-spacing:.12em;color:var(--dim);text-transform:uppercase}
.links{display:flex;flex-wrap:wrap;gap:calc(12px * var(--s));margin-top:calc(10px * var(--s));pointer-events:auto}
.links a{
  font-size:var(--hud);line-height:1;color:var(--ink);background:var(--bg);text-decoration:none;
  padding:calc(4px * var(--s)) calc(8px * var(--s));
  box-shadow:0 calc(-1 * var(--px)) 0 0 var(--ink),0 var(--px) 0 0 var(--ink),calc(-1 * var(--px)) 0 0 0 var(--ink),var(--px) 0 0 0 var(--ink);
}
.links a:focus-visible{background:var(--ink);color:var(--bg);outline:none}
@media (hover:hover) and (pointer:fine){.links a:hover{background:var(--ink);color:var(--bg)}}
.l-short{display:none}
@media (max-width:640px){.l-full{display:none}.l-short{display:inline}}
/* écran peu haut : on garde le nom et les liens, le sous-titre libère la place des instruments */
@media (max-height:960px),(max-width:640px){.id .id-sub{display:none}}
.links a.locked{background:var(--ink);color:var(--bg)}
.links a.down{visibility:hidden}
@media (pointer:fine){.links a{cursor:none}}
@media (pointer:coarse){.k-fine{display:none}}

.snd{
  position:fixed;z-index:6;top:calc(24px * var(--s) + env(safe-area-inset-top,0px));right:calc(24px * var(--s) + env(safe-area-inset-right,0px));
  font:inherit;font-size:var(--hud);line-height:1;color:var(--dim);background:var(--bg);
  border:0;padding:calc(6px * var(--s)) calc(10px * var(--s));cursor:pointer;
  box-shadow:0 calc(-1 * var(--px)) 0 0 var(--dim),0 var(--px) 0 0 var(--dim),calc(-1 * var(--px)) 0 0 0 var(--dim),var(--px) 0 0 0 var(--dim);
}
.snd[aria-pressed="true"]{color:var(--ink);box-shadow:0 calc(-1 * var(--px)) 0 0 var(--ink),0 var(--px) 0 0 var(--ink),calc(-1 * var(--px)) 0 0 0 var(--ink),var(--px) 0 0 0 var(--ink)}
.snd:focus-visible,.close:focus-visible{outline:1px dashed var(--ink);outline-offset:4px}

.tgt{
  position:absolute;left:0;top:0;display:grid;gap:calc(4px * var(--s));padding:calc(12px * var(--s)) calc(16px * var(--s));
  background:var(--bg);color:var(--ink);border:0;font:inherit;text-align:left;
  will-change:transform;
  /* bordure pixel : 4 ombres pleines, coins vides */
  box-shadow:0 calc(-1 * var(--px)) 0 0 var(--ink),0 var(--px) 0 0 var(--ink),calc(-1 * var(--px)) 0 0 0 var(--ink),var(--px) 0 0 0 var(--ink);
}
.tgt-id,.tgt-meta,.tgt-name{font-size:var(--hud);line-height:1;white-space:nowrap}
.tgt-id,.tgt-meta{color:var(--dim)}
.tgt-name{padding-block:calc(2px * var(--s))}
.tgt.locked{background:var(--ink);color:var(--bg)}
.tgt.locked .tgt-id,.tgt.locked .tgt-meta{color:var(--bg)}
.tgt.down{visibility:hidden}
.tgt:focus-visible{outline:var(--px) dashed var(--ink);outline-offset:calc(8px * var(--s))}

/* Débriefing */
.panel{
  position:fixed;inset:0;z-index:20;overflow-y:auto;overscroll-behavior:contain;background:var(--veil);
  padding-block:max(40px,env(safe-area-inset-top,0px)) max(48px,env(safe-area-inset-bottom,0px));
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  cursor:auto;
}
.panel-inner{max-width:calc(920px * var(--s));margin:0 auto;display:grid;gap:calc(32px * var(--s));padding-inline:8px}
.panel:not([hidden]) .panel-inner{animation:wipe .36s steps(12) backwards}
@keyframes wipe{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.panel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;padding-bottom:calc(20px * var(--s));background:linear-gradient(var(--ink),var(--ink)) bottom/100% var(--px) no-repeat}
.panel-head h2{margin:8px 0 0;font-weight:400;font-size:var(--fs-xxl);line-height:1;letter-spacing:.02em}
.close{font:inherit;font-size:var(--fs-s);letter-spacing:.1em;color:var(--bg);background:var(--ink);border:0;padding:calc(8px * var(--s)) calc(12px * var(--s));cursor:pointer;box-shadow:0 calc(-1 * var(--px)) 0 0 var(--ink),0 var(--px) 0 0 var(--ink),calc(-1 * var(--px)) 0 0 0 var(--ink),var(--px) 0 0 0 var(--ink)}
@media (hover:hover) and (pointer:fine){.close:hover{background:var(--bg);color:var(--ink)}}
.close:active,.snd:active,.links a:active{background:var(--ink);color:var(--bg)}
.list{display:grid}
.entry{display:grid;grid-template-columns:calc(170px * var(--s)) minmax(0,1fr);gap:calc(24px * var(--s));padding-block:calc(22px * var(--s));background:repeating-linear-gradient(90deg,var(--faint) 0 calc(2 * var(--px)),transparent calc(2 * var(--px)) calc(4 * var(--px))) bottom/100% var(--px) no-repeat}
.entry-side{display:grid;align-content:start;gap:6px;font-size:var(--fs-s);letter-spacing:.1em;color:var(--dim);text-transform:uppercase}
.entry-side .entry-code{color:var(--ink)}
.avatar{display:block;width:calc(140px * var(--s));height:auto;margin-top:calc(8px * var(--s));box-shadow:0 calc(-1 * var(--px)) 0 0 var(--ink),0 var(--px) 0 0 var(--ink),calc(-1 * var(--px)) 0 0 0 var(--ink),var(--px) 0 0 0 var(--ink)}
.entry-main{display:grid;gap:calc(8px * var(--s));min-width:0}
.entry h3{margin:0;font-weight:400;font-size:var(--fs-l);line-height:1.1;text-wrap:balance}
.entry .role{margin:0;font-size:var(--fs-s);letter-spacing:.1em;color:var(--dim);text-transform:uppercase}
.entry p.desc{margin:0;font-size:calc(14px * var(--s));line-height:1.6;max-width:62ch}
.tags{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.tags li{font-size:var(--fs-s);letter-spacing:.08em;padding:calc(3px * var(--s)) calc(7px * var(--s));text-transform:uppercase;box-shadow:0 calc(-1 * var(--px)) 0 0 var(--faint),0 var(--px) 0 0 var(--faint),calc(-1 * var(--px)) 0 0 0 var(--faint),var(--px) 0 0 0 var(--faint);margin:calc(2px * var(--s))}
.panel-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:var(--fs-s);letter-spacing:.1em;color:var(--dim)}
@media (max-width:640px){
  .entry{grid-template-columns:1fr;gap:10px}
  .panel-head h2{font-size:var(--fs-xl)}
  .entry-side{display:flex;flex-wrap:wrap;gap:6px 12px}
  .avatar{flex-basis:100%;max-width:calc(140px * var(--s))}
}
@media (max-width:640px),(max-height:500px){
  .id h1{font-size:var(--hud)}
  /* fond plein : le HUD animé ne passe plus derrière le texte */
  .panel{background:var(--bg);padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  /* 11 px reste la grille de la police, mais c'est trop petit à lire au téléphone */
  .eyebrow,.entry-side,.entry .role,.tags li,.panel-foot,.close{font-size:13px}
  .entry p.desc{font-size:15px}
  /* retour toujours à portée du pouce, même au bas d'une longue liste */
  .close{position:fixed;z-index:21;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));height:48px}
}
/* zones de toucher de 44 px sans changer le dessin */
@media (pointer:coarse){
  .me,.links a{position:relative}
  .me::after,.links a::after,.snd::after{content:"";position:absolute;left:-4px;right:-4px;top:-9px;bottom:-9px}
}
@media (prefers-reduced-motion:reduce){.panel:not([hidden]) .panel-inner{animation:none}}