:root{--color-bg:#f4f4fb;--color-surface:#fff;--color-text:#1a1a2e;--color-muted:#6b6b80;--color-accent:#4f46e5;--color-accent-soft:#ece9fe;--color-line:#1a1a2e;--font-base:system-ui, -apple-system, "Segoe UI", sans-serif;--max:1000px;--radius:4px;--readable-bg:#ffffffb8}*{box-sizing:border-box;margin:0}body{font-family:var(--font-base);color:var(--color-text);background:repeating-linear-gradient(0deg, transparent 0 7px, #4f46e508 7px 8px), url(../bg.png) repeat 0 0 / 190px 190px, var(--color-bg);flex-direction:column;min-height:100vh;line-height:1.55;display:flex}.pixel{border:2px solid var(--color-line);border-radius:var(--radius);box-shadow:4px 4px 0 var(--color-line)}.nav{max-width:var(--max);justify-content:space-between;align-items:center;width:100%;margin:0 auto;padding:1.25rem;display:flex}.logo{letter-spacing:1px;font-size:1.25rem;font-weight:900}.logo-accent{color:var(--color-accent)}.langs{gap:.4rem;display:flex}.langs button{border:2px solid var(--color-line);background:var(--color-surface);color:inherit;border-radius:var(--radius);cursor:pointer;padding:.3rem .65rem;font-size:.8rem;font-weight:700}.langs button.active{background:var(--color-accent);color:#fff;border-color:var(--color-line)}main{max-width:var(--max);flex:1;width:100%;margin:0 auto;padding:0 1.25rem}.hero{text-align:center;padding:2.5rem 0 1.5rem}.hero h1{max-width:18ch;text-shadow:2px 2px 0 var(--color-accent-soft);margin:0 auto;font-size:clamp(1.8rem,5vw,3rem);line-height:1.1}.lead{color:#333fe5;text-shadow:0 1px 1px #fff;max-width:56ch;margin:1rem auto 0}code{background:var(--color-accent-soft);color:var(--color-accent);border-radius:3px;padding:.05em .35em;font-weight:700}.tool{background:var(--color-surface);border:2px solid var(--color-line);border-radius:var(--radius);box-shadow:6px 6px 0 var(--color-line);max-width:760px;margin:1.5rem auto;padding:1.75rem}.drops{grid-template-columns:1fr 1fr;gap:1rem;display:grid}@media (width<=540px){.drops{grid-template-columns:1fr}}.drop{text-align:center;cursor:pointer;border:2px dashed var(--color-line);border-radius:var(--radius);background:var(--color-bg);flex-direction:column;align-items:center;gap:.4rem;padding:1.5rem 1rem;transition:background .12s,transform .12s;display:flex}.drop:hover,.drop.dragover{background:var(--color-accent-soft);transform:translate(-1px,-1px)}.drop.filled{border-style:solid}.drop-icon{font-size:1.8rem;line-height:1}.drop-label{font-weight:800}.drop-name{color:var(--color-muted);word-break:break-all;font-size:.8rem}.drop.filled .drop-name{color:var(--color-accent);font-weight:700}.btn{cursor:pointer;background:var(--color-accent);color:#fff;border:2px solid var(--color-line);border-radius:var(--radius);box-shadow:3px 3px 0 var(--color-line);margin-top:1.25rem;padding:.7rem 1.5rem;font-family:inherit;font-size:1rem;font-weight:800;text-decoration:none;display:inline-block}.btn:hover:not(:disabled){box-shadow:4px 4px 0 var(--color-line);transform:translate(-1px,-1px)}.btn:active:not(:disabled){box-shadow:1px 1px 0 var(--color-line);transform:translate(2px,2px)}.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.btn-ghost{background:var(--color-surface);color:var(--color-text);margin-top:0;padding:.45rem .9rem;font-size:.85rem}.status{min-height:1.2em;margin-top:1rem;font-weight:700}.status.error{color:#d62828}.results{margin-top:1.5rem}.results-head{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.75rem;display:flex}.results-head span{font-weight:800}.sheet{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:.6rem;display:grid}.sheet figure{background:var(--color-bg);border:2px solid var(--color-line);border-radius:var(--radius);text-align:center;cursor:pointer;margin:0;padding:.4rem}.sheet figure:hover{background:var(--color-accent-soft)}.sheet canvas,.sheet img{image-rendering:pixelated;background:repeating-conic-gradient(#ddd 0% 25%,#fff 0% 50%) 50%/16px 16px;width:100%;height:auto;display:block}.sheet figcaption{color:var(--color-muted);margin-top:.25rem;font-size:.7rem}.sheet:has(figure:only-child){display:block}.sheet:has(figure:only-child) figure{width:100%}.sheet:has(figure:only-child) figcaption{font-size:.85rem}.about{background:var(--readable-bg);border-radius:var(--radius);max-width:60ch;margin:2.5rem auto 1rem;padding:1.25rem 1.5rem}.about h2{margin-bottom:.5rem;font-size:1.5rem}.about h3{margin-top:1.25rem;font-size:1.05rem}.about p{color:var(--color-muted);margin-top:.75rem}.about ul{color:var(--color-muted);margin-top:.5rem;padding-left:1.2rem}.about li{margin-top:.35rem}.about .note{border:2px solid var(--color-line);border-radius:var(--radius);color:var(--color-text);background:#fff7e6;padding:.75rem 1rem;font-weight:600}.about a{color:var(--color-accent);font-weight:700}.foot{color:#c4c4d4;text-align:center;--foot-line:#f4f4fb;background:#0d0d14;padding:2.75rem 1rem 3.25rem;font-size:.85rem}.games{max-width:var(--max);margin:1.75rem auto 0}.games-intro{color:#fff;margin:0 0 1rem;font-weight:700}.games-grid{flex-wrap:wrap;justify-content:center;gap:1.25rem;margin:0 auto;display:flex}@media (width<=991px){.games-grid{max-width:580px}}@media (width<=420px){.games-grid{max-width:380px}}.game{color:#f4f4fb;flex-direction:column;align-items:center;gap:.45rem;font-weight:600;text-decoration:none;display:flex;position:relative}.game img{object-fit:cover;background:var(--color-surface);border:2px solid var(--foot-line);border-radius:var(--radius);width:176px;height:106px;box-shadow:4px 4px 0 var(--foot-line);transition:transform 80ms,box-shadow 80ms;display:block}.game:hover img,.game:focus-visible img{box-shadow:6px 6px 0 var(--foot-line);transform:translate(-2px,-2px)}.game-name{font-size:.9rem}.game-badge{background:var(--color-accent);color:#fff;letter-spacing:.5px;border:2px solid var(--foot-line);border-radius:var(--radius);padding:1px 6px;font-size:.7rem;font-weight:800;line-height:1.4;display:none;position:absolute;top:6px;right:6px}html[lang=fr] .game:not([data-game-langs~=fr]) .game-badge,html[lang=en] .game:not([data-game-langs~=en]) .game-badge{display:inline-block}.foot-bmc{background:var(--color-accent);color:#fff;border:2px solid var(--foot-line);border-radius:var(--radius);box-shadow:4px 4px 0 var(--foot-line);margin-top:1.75rem;padding:.6rem 1.1rem;font-weight:700;text-decoration:none;transition:transform 80ms,box-shadow 80ms;display:inline-block}.foot-bmc:hover,.foot-bmc:focus-visible{box-shadow:6px 6px 0 var(--foot-line);transform:translate(-2px,-2px)}.foot-bmc:active{box-shadow:0 0 0 var(--foot-line);transform:translate(2px,2px)}:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}