/* Course de frappe : salle d'arcade 8 bits. Fond noir, scanlines discrètes, pixels et couleurs vives.
   Press Start 2P (police large) en petite taille pour les titres et compteurs ; le texte à taper est en police
   à chasse fixe du système, grande et lisible. Tout est préfixé .ag-typing (écran plein) ou .ty- (éléments du jeu). */
@font-face { font-family: 'Pixel'; src: url('../fonts/pixel.woff2') format('woff2'); font-display: swap; }

.ag-typing { --fun-font: 'Pixel', monospace; --fun-bg: radial-gradient(ellipse at 50% -10%, #1d1240 0%, #08071a 45%, #000 100%);
  --fun-ink: #e8e8ff; --fun-line: #3bd1ff; --fun-accent: #ffd23b; --fun-card: #07070f; --fun-btn: #ffd23b; --fun-btn-ink: #000;
  --fun-title: #ffd23b; --fun-shadow: #ff3b6b; --fun-bad: #ff3b6b; --fun-good: #5dff6b;
  --ty-mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, 'Roboto Mono', 'DejaVu Sans Mono', monospace;
  --ty-pink: #ff3b6b; --ty-cyan: #3bd1ff; --ty-yellow: #ffd23b; --ty-green: #5dff6b; --ty-dim: #6a6a90; }

/* En-tête : police pixel petite (elle est très large), pas de rotation */
.ag.fun.ag-typing .ag-title { font-size: clamp(.62rem, 2.9vw, .9rem); line-height: 1.5; rotate: 0deg; letter-spacing: 0; text-shadow: 2px 2px 0 var(--ty-pink); }
.ag.fun.ag-typing .ag-info { font-size: .5rem; line-height: 1.6; color: #8a8ab8; }
.ag.fun.ag-typing .mg-quit { border-radius: 0; background: #000; color: var(--ty-yellow); border: 3px solid var(--ty-yellow); box-shadow: 3px 3px 0 var(--ty-pink); font-family: var(--fun-font); font-size: .9rem; }

/* Scanlines discrètes sur tout l'écran et bande de balayage du tube cathodique */
.ag-typing::after { content: ''; position: absolute; inset: 0; z-index: 9; pointer-events: none;
  background: repeating-linear-gradient(to bottom, #0000 0 2px, #0000002e 2px 3px); }
.ag-typing .ag-body::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 110px; z-index: 6; pointer-events: none;
  background: linear-gradient(#3bd1ff00, #3bd1ff0b 50%, #3bd1ff00); animation: tyBand 8s linear infinite; }

/* ---------- Écran de jeu ---------- */
.ty-wrap { position: relative; height: 100%; overflow-x: hidden; overflow-y: auto; padding: 4px 10px 16px; }
.ty-cab { max-width: 760px; margin: 0 auto; display: grid; gap: 9px; }

.ty-hud { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 6px; }
.ty-stat { display: grid; justify-items: center; gap: 6px; padding: 7px 4px 8px; background: #07070f; border: 2px solid #2a2a48; box-shadow: 0 0 0 2px #000; font-family: var(--fun-font); min-width: 0; }
.ty-stat small { font-size: .45rem; line-height: 1; color: var(--ty-pink); letter-spacing: .06em; white-space: nowrap; }
.ty-stat b { font-weight: 400; font-size: clamp(.95rem, 4.4vw, 1.35rem); line-height: 1; color: var(--ty-yellow); text-shadow: 0 0 8px #ffd23b77, 2px 2px 0 #7a4a00; white-space: nowrap; }
.ty-stat.is-main b { color: var(--ty-green); text-shadow: 0 0 8px #5dff6b77, 2px 2px 0 #0d4a14; }
.ty-stat.is-low b { color: var(--ty-pink); text-shadow: 0 0 8px #ff3b6b88, 2px 2px 0 #6a0f24; animation: tyBlink .5s steps(1) infinite; }

/* Piste : canvas en basse définition agrandi sans lissage (vrais pixels) */
.ty-track { position: relative; display: grid; justify-items: center; overflow: hidden; background: #000; border: 2px solid #2a2a48; box-shadow: 0 0 0 2px #000, 0 0 18px #3bd1ff1f; }
.ty-canvas { position: relative; z-index: 1; display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.ty-names { position: absolute; top: 0; left: 50%; height: 100%; transform: translateX(-50%); pointer-events: none; }
.ty-names span { position: absolute; font-family: var(--fun-font); font-size: .42rem; opacity: .5; white-space: nowrap; }
.ty-names span.is-me { opacity: .8; }
.ty-names span.is-gone { opacity: .2; text-decoration: line-through; }

/* Texte à taper */
.ty-textbox { position: relative; }
.ty-text { position: relative; height: calc(1.55em * 4 + 20px); overflow: hidden; padding: 10px 14px; background: #07070f; border: 3px solid var(--ty-cyan);
  box-shadow: 4px 4px 0 var(--ty-pink), inset 0 0 24px #3bd1ff17; font: 500 clamp(1.05rem, 4.4vw, 1.4rem)/1.55 var(--ty-mono); color: #e8e8ff;
  white-space: pre-wrap; overflow-wrap: break-word; scroll-behavior: smooth; cursor: text; }
.ty-ok { color: var(--ty-green); }
.ty-cur { background: #ffd23b30; box-shadow: inset 0 -.2em 0 var(--ty-yellow); animation: tyCursor 1s steps(1) infinite; }
.ty-bad { background: var(--ty-pink); color: #000; }
.ty-bad2 { background: #ff3b6b80; color: #000; }
.ty-next { color: var(--ty-dim); }
.ty-wait { color: var(--ty-dim); font-family: var(--fun-font); font-size: .55rem; line-height: 2.2; }
.ty-tap { display: none; position: absolute; inset: 0; z-index: 2; place-items: center; margin: 0; padding: 0 12px; text-align: center; pointer-events: none;
  background: #000000c0; color: var(--ty-yellow); font-family: var(--fun-font); font-size: .6rem; line-height: 1.8; animation: tyBlink 1s steps(1) infinite; }
.ty-wrap.is-away .ty-tap { display: grid; }

/* Champ de saisie */
.ty-in { width: 100%; min-width: 0; padding: 10px 12px; font: 500 clamp(1rem, 4.2vw, 1.25rem) var(--ty-mono); color: #fff; background: #000; border: 3px solid var(--ty-green);
  border-radius: 0; caret-color: var(--ty-yellow); box-shadow: 4px 4px 0 #1d5a26; outline: none; -webkit-appearance: none; appearance: none; }
.ty-in:focus { border-color: var(--ty-yellow); box-shadow: 4px 4px 0 #7a4a00, 0 0 14px #ffd23b44; }
.ty-in.is-bad { border-color: var(--ty-pink); box-shadow: 4px 4px 0 #6a0f24, 0 0 14px #ff3b6b77; animation: tyShake .25s steps(4); }
.ty-in::placeholder { color: #4a4a70; }
.ty-in:disabled { opacity: .45; }
.ty-hint { margin: 0; text-align: center; font-family: var(--fun-font); font-size: .42rem; line-height: 1.9; color: var(--ty-dim); }

/* ---------- Fenêtres (départ, salle, résultats, fin) ---------- */
.ty-panel { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px 12px; background: #000000cc; overflow-y: auto; }
.ag-typing .fun-dialog-wrap { background: #000000b0; }
.ag-typing .fun-dialog { border-radius: 0; background: #07070f; border: 4px solid var(--ty-cyan); padding: 22px 16px 18px;
  box-shadow: 0 0 0 4px #000, 0 0 0 8px var(--ty-pink), 0 0 40px #3bd1ff40; animation: tyPop .3s steps(4) both; }
.ag-typing .fun-title { font-size: clamp(.8rem, 4vw, 1.1rem); line-height: 1.6; color: var(--ty-yellow); text-shadow: 3px 3px 0 var(--ty-pink); margin-bottom: 10px; }
.ag-typing .fun-sub { font-family: var(--ty-mono); font-weight: 400; font-size: .85rem; line-height: 1.5; opacity: 1; color: #b8b8e0; }
.ag-typing .fun-sub b { color: var(--ty-yellow); }
.ag-typing .fun-big { font-size: clamp(2.2rem, 12vw, 3.4rem); color: var(--ty-green); text-shadow: 4px 4px 0 #0d4a14, 0 0 18px #5dff6b55; margin: 16px 0 10px; }
.ag-typing .fun-big small { display: block; margin-top: 12px; font-size: .6rem; color: #b8b8e0; text-shadow: none; }
.ag-typing .fun-actions { gap: 14px; margin-top: 18px; }
.ag-typing .fun-btn { --sh: var(--ty-cyan); font-size: .68rem; line-height: 1.4; padding: 12px 16px; border-radius: 0; border: 3px solid #e8e8ff; background: #000; color: #e8e8ff;
  box-shadow: 4px 4px 0 var(--sh); transition: none; }
.ag-typing .fun-btn.is-main { --sh: var(--ty-pink); background: var(--ty-yellow); color: #000; border-color: var(--ty-yellow); }
.ag-typing .fun-btn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--sh); }
.ag-typing .fun-btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--sh); }

/* Gros messages (3, 2, 1, GO !, arrivée) */
.ag-typing .fun-shout { top: 40%; font-size: clamp(1.4rem, 8vw, 2.6rem); color: var(--ty-yellow); -webkit-text-stroke: 0; text-shadow: 4px 4px 0 var(--ty-pink), 0 0 22px #ffd23b77;
  animation: tyShout 1.3s steps(14) both; }
.ag-typing .fun-shout.is-count { font-size: clamp(3rem, 18vw, 5.5rem); animation-duration: .8s; }
.ag-typing .fun-shout.is-good { color: var(--ty-green); text-shadow: 4px 4px 0 #0d4a14, 0 0 22px #5dff6b77; }
.ag-typing .fun-shout.is-bad { color: var(--ty-pink); text-shadow: 4px 4px 0 #6a0f24, 0 0 22px #ff3b6b77; }
.ag-typing .fun-shout.is-info { top: 24%; font-size: clamp(.62rem, 3.2vw, .95rem); color: #fff; text-shadow: 2px 2px 0 var(--ty-pink); }

.ty-card { max-height: 100%; overflow-y: auto; }
.ty-rules { list-style: none; padding: 0; margin: 4px 0 12px; display: grid; gap: 8px; text-align: left; font: .85rem/1.45 var(--ty-mono); color: #d8d8f0; }
.ty-rules li { position: relative; padding-left: 18px; }
.ty-rules li::before { content: ''; position: absolute; left: 2px; top: .45em; width: 8px; height: 8px; background: var(--ty-green); box-shadow: 2px 2px 0 #0d4a14; }
.ty-best { margin: 4px 0 0; font-family: var(--fun-font); font-size: .55rem; line-height: 2; color: #e8e8ff; }
.ty-best b { font-weight: 400; font-size: .85rem; color: var(--ty-yellow); }
.ty-best small { font-size: .45rem; color: #8a8ab8; }

.ty-roster { list-style: none; padding: 0; margin: 12px 0 4px; display: grid; gap: 7px; text-align: left; }
.ty-roster li { display: grid; grid-template-columns: 40px auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; background: #000;
  border: 2px solid var(--c); box-shadow: 3px 3px 0 color-mix(in srgb, var(--c) 35%, #000); }
.ty-roster.is-over li { grid-template-columns: 28px 36px auto minmax(0, 1fr) auto; }
.ty-roster li.is-me { background: #ffffff0f; }
.ty-roster .ty-car { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.ty-roster .name { font: 700 .9rem var(--ty-mono); color: #e8e8ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ty-roster small { font-family: var(--fun-font); font-size: .42rem; color: #8a8ab8; }
.ty-place { font-family: var(--fun-font); font-size: .62rem; color: var(--c); }
.ty-res { display: grid; justify-items: end; gap: 4px; }
.ty-res b { font-family: var(--fun-font); font-weight: 400; font-size: .6rem; color: var(--ty-yellow); white-space: nowrap; }
.ty-res small { font-family: var(--ty-mono); font-size: .72rem; color: #b8b8e0; text-transform: none; white-space: nowrap; }
.ty-roster.is-over li:first-child { animation: tyWin 1s steps(1) infinite; }
.ty-wait-host { align-self: center; font-family: var(--fun-font); font-size: .48rem; line-height: 1.8; color: #8a8ab8; animation: tyBlink 1.2s steps(1) infinite; }

/* Tuile du salon */
.ty-art .ty-art-cur { animation: tyBlink 1s steps(1) infinite; }

/* Écrans peu hauts (téléphone avec le clavier ouvert, Discord en paysage) */
@media (max-height: 560px) {
  .ty-cab { gap: 6px; }
  .ty-stat { padding: 4px 4px 5px; gap: 4px; }
  .ty-stat b { font-size: .9rem; }
  .ty-text { height: calc(1.55em * 3 + 16px); padding: 8px 12px; }
  .ty-in { padding: 7px 10px; }
  .ty-hint { display: none; }
}
@media (min-width: 700px) and (min-height: 600px) {
  .ty-cab { gap: 12px; padding-top: 6px; }
  .ty-stat small { font-size: .5rem; }
}

@keyframes tyBlink { 50% { opacity: 0; } }
@keyframes tyCursor { 50% { background: transparent; box-shadow: none; } }
@keyframes tyShake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes tyPop { from { transform: scale(.4); opacity: 0; } }
@keyframes tyWin { 50% { border-color: #fff; } }
@keyframes tyBand { from { transform: translateY(-110px); } to { transform: translateY(100vh); } }
@keyframes tyShout {
  0% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
  14% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  80% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -62%) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ag-typing .ag-body::after { display: none; }
  .ty-cur, .ty-tap, .ty-stat.is-low b, .ty-art .ty-art-cur, .ty-wait-host, .ty-roster.is-over li:first-child, .ty-in.is-bad { animation: none; }
}