/* GAME CONSCIENCE WEEK — la carte de l'accueil (maquette gcw-02, écran accueil) */
:is(#hvGcw, #hvGcwRj).gcw-carte { flex: none; position: relative; isolation: isolate; border: 4px solid #FFFEF7; background: #150827; box-shadow: 6px 6px 0 #FF2E93; padding: 14px 120px 14px 14px; margin: 0 6px 12px 0; display: flex; flex-direction: column; gap: 10px; color: #FFFEF7; overflow: hidden; }
:is(#hvGcw, #hvGcwRj) .gcw-m { position: absolute; z-index: 2; right: -6px; top: 10px; }
:is(#hvGcw, #hvGcwRj) > *:not(.gcw-fond):not(.gcw-m):not(.gcw-bulle) { position: relative; z-index: 1; }
/* LA NUIT DE COTONOU (maquette gcw-05 · A, sans le bandeau) : étoiles qui clignotent, lune pixel, la ville en bas */
:is(#hvGcw, #hvGcwRj) .gcw-fond { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
:is(#hvGcw, #hvGcwRj) .gcw-fond .et { position: absolute; width: 4px; height: 4px; background: #FFFEF7; animation: gcwClig 1.6s steps(2) infinite; }
:is(#hvGcw, #hvGcwRj) .gcw-fond .et.j { background: #FFD600; }
:is(#hvGcw, #hvGcwRj) .gcw-fond .et.c { background: #1FE3CF; }
@keyframes gcwClig { 50% { opacity: 0; } }
:is(#hvGcw, #hvGcwRj) .gcw-fond .lune { position: absolute; right: 122px; top: 60px; width: 8px; height: 8px; color: #FFD600; background: currentColor;
  box-shadow: 8px 0, 16px 0, -8px 8px, 0 8px, 8px 8px, -8px 16px, 0 16px, -8px 24px, 0 24px, 0 32px, 8px 32px, 16px 32px; animation: gcwLune 4s steps(4) infinite; }
@keyframes gcwLune { 50% { transform: translateY(-4px); } }
:is(#hvGcw, #hvGcwRj) .gcw-fond .ville { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; display: flex; align-items: flex-end; gap: 3px; }
:is(#hvGcw, #hvGcwRj) .gcw-fond .ville b { flex: 1; background: #2D0A5C; position: relative; border-top: 3px solid #5E00D1; }
:is(#hvGcw, #hvGcwRj) .gcw-fond .ville b i { position: absolute; width: 5px; height: 5px; background: #FF6B1F; animation: gcwClig 2.4s steps(2) infinite; }
:is(#hvGcw, #hvGcwRj) .gcw-m svg { display: block; image-rendering: pixelated; shape-rendering: crispEdges; filter: drop-shadow(4px 4px 0 #FF6B1F); animation: gcwBob 1.8s ease-in-out infinite; }
@keyframes gcwBob { 50% { transform: translateY(-6px); } }
:is(#hvGcw, #hvGcwRj) .gcw-live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--fb, 'IBM Plex Mono', monospace); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; }
:is(#hvGcw, #hvGcwRj) .gcw-live i { width: 9px; height: 9px; background: #FF5252; border: 2px solid #0A0A0A; animation: gcwLive 1s steps(2) infinite; }
@keyframes gcwLive { 50% { opacity: 0; } }
:is(#hvGcw, #hvGcwRj) .gcw-t { font-family: var(--fd, 'Anton', sans-serif); font-size: 30px; line-height: .95; }
:is(#hvGcw, #hvGcwRj) .gcw-d { font-family: var(--fb, 'IBM Plex Mono', monospace); font-size: 10px; font-weight: 700; letter-spacing: .8px; }
:is(#hvGcw, #hvGcwRj) .gcw-cta { all: unset; box-sizing: border-box; cursor: pointer; margin-right: -104px; text-align: center; font-family: var(--fd, 'Anton', sans-serif); font-size: 18px; letter-spacing: 1px; padding: 12px; border: 4px solid #0A0A0A; background: #FF6B1F; color: #0A0A0A; box-shadow: 6px 6px 0 #FFFEF7; }
:is(#hvGcw, #hvGcwRj) .gcw-cta:active { transform: translate(6px, 6px); box-shadow: none; }
/* le compte à rebours d'avant l'ouverture (cases noires, ombre colorée) */
:is(#hvGcw, #hvGcwRj) .gcw-rb { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-right: -104px; }
:is(#hvGcw, #hvGcwRj) .gcw-rb span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 5px; background: #0A0A0A; border: 3px solid #FFFEF7; box-shadow: 3px 3px 0 #FF2E93; }
:is(#hvGcw, #hvGcwRj) .gcw-rb b { font-family: var(--fd, 'Anton', sans-serif); font-weight: 400; font-size: 26px; line-height: 1; color: #FFD600; font-variant-numeric: tabular-nums; }
:is(#hvGcw, #hvGcwRj) .gcw-rb i { font-style: normal; font-family: var(--fb, 'IBM Plex Mono', monospace); font-size: 8px; font-weight: 700; letter-spacing: 1px; }
:is(#hvGcw, #hvGcwRj) .gcw-verr { display: flex; align-items: center; justify-content: center; gap: 10px; background: #FFFEF7; box-shadow: 6px 6px 0 #FF6B1F; }
/* le tap sur BIENTÔT : la carte dit non (tremble, cadenas qui saute, compteur qui clignote, bulle de GLITCH) */
:is(#hvGcw, #hvGcwRj).non { animation: gcwNon .42s steps(6); }
@keyframes gcwNon { 0%, 100% { transform: none; } 20% { transform: translateX(-9px) rotate(-1deg); } 40% { transform: translateX(8px) rotate(1deg); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }
:is(#hvGcw, #hvGcwRj).non .gcw-cad { animation: gcwCad .5s steps(5); }
@keyframes gcwCad { 30% { transform: translateY(-8px) rotate(-14deg); } 60% { transform: translateY(0) rotate(12deg); } }
:is(#hvGcw, #hvGcwRj).non .gcw-rb span { animation: gcwFlash .5s steps(2) 2; }
@keyframes gcwFlash { 50% { background: #FF2E93; } }
:is(#hvGcw, #hvGcwRj) .gcw-bulle { position: absolute; z-index: 3; right: 8px; top: 140px; font-family: var(--fd, 'Anton', sans-serif); font-size: 18px; background: #FFFEF7; color: #0A0A0A; border: 3px solid #0A0A0A; box-shadow: 4px 4px 0 #FF2E93; padding: 6px 10px; transform: rotate(4deg) scale(0); transform-origin: 80% 0; transition: transform .18s steps(3); white-space: nowrap; }
:is(#hvGcw, #hvGcwRj) .gcw-bulle.on { transform: rotate(4deg) scale(1); }
/* le cadenas, dessiné en CSS */
:is(#hvGcw, #hvGcwRj) .gcw-cad { position: relative; width: 14px; height: 11px; background: #0A0A0A; margin-top: 7px; }
:is(#hvGcw, #hvGcwRj) .gcw-cad::before { content: ''; position: absolute; left: 2px; top: -8px; width: 6px; height: 7px; border: 2px solid #0A0A0A; border-bottom: 0; }
.gcw-glitch { position: fixed; inset: 0; z-index: 99999; pointer-events: none; }
.gcw-glitch i { position: absolute; left: 0; right: 0; opacity: .85; }
.gcw-glitch.neige { background: #150827; }
@media (prefers-reduced-motion: reduce) { :is(#hvGcw, #hvGcwRj) .gcw-m svg, :is(#hvGcw, #hvGcwRj) .gcw-live i, :is(#hvGcw, #hvGcwRj) .gcw-fond * { animation: none; } }
/* ── REJOINDRE DEPUIS L'ACCUEIL (maquette validée brandnew/drafts/gcw-08-rejoindre-accueil.html) ── */
#hvGcwRj { margin-bottom: 12px; }
#hvGcwRj .gcw-rj { margin-right: -104px; display: flex; flex-direction: column; gap: 9px; }
#hvGcwRj .gcw-rj .k { font-family: 'Silkscreen', var(--fb, monospace); font-size: 11px; letter-spacing: 1.5px; color: #1FE3CF; }
#hvGcwRj .gcw-rj .cases { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
#hvGcwRj .gcw-rj .cases .case { all: unset; box-sizing: border-box; width: 100%; height: 48px; border: 3px solid #0A0A0A; background: #FFFEF7; color: #0A0A0A; box-shadow: 3px 3px 0 #FF2E93; text-align: center; font-family: var(--fd, 'Anton', sans-serif); font-size: 26px; text-transform: uppercase; caret-color: #FF2E93; }
#hvGcwRj .gcw-rj .cases .case:focus { box-shadow: 3px 3px 0 #1FE3CF; outline: 0; }
#hvGcwRj .gcw-rj .cases .case.on { background: #FFD600; box-shadow: 3px 3px 0 #1FE3CF; }
#hvGcwRj .gcw-rj .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#hvGcwRj .gcw-rj .scan, #hvGcwRj .gcw-rj .go { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; border: 4px solid #0A0A0A; color: #0A0A0A; font-family: var(--fd, 'Anton', sans-serif); letter-spacing: .5px; }
#hvGcwRj .gcw-rj .scan { background: #1FE3CF; box-shadow: 5px 5px 0 #FFD600; font-size: 16px; }
#hvGcwRj .gcw-rj .scan img { width: 26px; height: 26px; }
#hvGcwRj .gcw-rj .go { background: #5BE885; box-shadow: 5px 5px 0 #FF6B1F; font-size: 18px; letter-spacing: 1px; }
#hvGcwRj .gcw-rj .go.off { background: #3A2A55; color: rgba(255,254,247,.45); box-shadow: 5px 5px 0 #2D0A5C; border-color: #3A2A55; cursor: default; }
#hvGcwRj .gcw-rj :is(.scan, .go:not(.off)):active { transform: translate(5px, 5px); box-shadow: none; }
#hvGcwRj .gcw-rj .go.pop { animation: gcwPop .4s steps(4); }
@keyframes gcwPop { 0% { transform: scale(1.25); } 100% { transform: none; } }
#hvGcwRj .gcw-ou { margin-right: -104px; display: flex; align-items: center; gap: 10px; font-family: 'Silkscreen', var(--fb, monospace); font-size: 10px; letter-spacing: 1.5px; color: rgba(255,254,247,.7); }
#hvGcwRj .gcw-ou::before, #hvGcwRj .gcw-ou::after { content: ''; flex: 1; height: 3px; background: rgba(255,254,247,.25); }
#hvGcwRj .gcw-qg { all: unset; box-sizing: border-box; cursor: pointer; margin-right: -104px; display: flex; align-items: center; gap: 10px; border: 3px solid #FFFEF7; padding: 9px 12px; box-shadow: 4px 4px 0 #FF6B1F; color: #FFFEF7; font-family: var(--fd, 'Anton', sans-serif); font-size: 16px; letter-spacing: .5px; }
#hvGcwRj .gcw-qg small { display: block; font-family: var(--fb, 'IBM Plex Mono', monospace); font-weight: 700; font-size: 9px; letter-spacing: .5px; opacity: .75; margin-top: 2px; }
#hvGcwRj .gcw-qg .sp { flex: 1; }
#hvGcwRj .gcw-qg .fl { width: 0; height: 0; border-left: 9px solid #FFFEF7; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
#hvGcwRj .gcw-qg:active { transform: translate(4px, 4px); box-shadow: none; }
#hvGcwRj .gcw-erreur { margin-right: -104px; font-family: var(--fb, 'IBM Plex Mono', monospace); font-weight: 700; font-size: 10px; color: #FF5252; }
#hvGcwRj .gcw-erreur[hidden] { display: none; }
#hvGcwRj.secoue .cases { animation: gcwNon .42s steps(6); }
@font-face { font-family: 'Silkscreen'; font-style: normal; font-weight: 400; font-display: swap; src: url(/vendor/fonts/silkscreen-400-latin.woff2) format('woff2'); }