* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #120a22; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #f8f0d0; }
#wrap { display: flex; align-items: center; justify-content: center; height: 100vh; width: 100vw; }
#screen { image-rendering: pixelated; image-rendering: crisp-edges; display: block; box-shadow: 0 0 0 3px #3a2068, 0 0 40px #7038c860; }

/* ---------- manette tactile ---------- */
#pad { display: none; }
body.touch #wrap { align-items: center; }
body.touch #pad { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: 38vh; align-items: center; justify-content: space-between; padding: 0 6vw 4vh; }
/* paysage : l'écran au centre sur toute la hauteur, croix à gauche, A/B à droite, START sous A/B */
body.touch.land #pad { top: 0; height: 100vh; padding: 0 2.5vw; pointer-events: none; }
body.touch.land #pad > * { pointer-events: auto; }
body.touch.land .mid { position: absolute; right: 2.5vw; bottom: 14px; margin: 0; }
.dpad { position: relative; width: 150px; height: 150px; }
.dpad .b { position: absolute; width: 50px; height: 50px; background: #3a2868; border: 2px solid #5a46a0; border-radius: 8px; }
.dpad .b.on { background: #7038c8; }
.dpad .up { left: 50px; top: 0; } .dpad .down { left: 50px; bottom: 0; } .dpad .left { left: 0; top: 50px; } .dpad .right { right: 0; top: 50px; }
.mid { align-self: flex-end; margin-bottom: 2vh; }
.pill { padding: 8px 14px; border-radius: 20px; background: #3a2868; border: 2px solid #5a46a0; font-size: 12px; letter-spacing: 1px; }
.pill.on { background: #7038c8; }
.ab { position: relative; width: 150px; height: 120px; }
.ab .r { position: absolute; width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 22px; border: 3px solid #a07818; background: #f0c040; color: #3a2068; }
.ab .r.on { background: #fff0a0; }
.ab .a2 { right: 0; top: 0; } .ab .b2 { left: 0; bottom: 0; background: #c8b8f0; border-color: #5a46a0; }

/* ---------- réclamation ---------- */
#claim { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: #120a22cc; z-index: 10; padding: 16px; }
#claim.show { display: flex; }
#claim .panel { max-width: 420px; width: 100%; background: #1e1438; border: 3px solid #f0c040; border-radius: 14px; padding: 22px; box-shadow: 0 0 60px #f0c04040; }
#claim .eyebrow { color: #f0c040; font-size: 12px; letter-spacing: 3px; font-weight: 700; }
#claim h2 { margin: 6px 0 10px; font-size: 24px; }
#claim p { line-height: 1.45; margin: 0 0 10px; color: #e8e0f8; }
#claim .small { font-size: 12.5px; color: #b8a8e0; }
#claim button { display: block; width: 100%; margin-top: 12px; padding: 13px; font-size: 16px; font-weight: 700; border-radius: 10px; border: 0; cursor: pointer; background: #f0c040; color: #2a1850; }
#claim button:disabled { opacity: .45; cursor: default; }
#claim button.ghost { background: transparent; color: #c8b8f0; border: 1px solid #5a46a0; font-weight: 500; font-size: 14px; }
#claim a { color: #f0c040; }
#claim input { display: block; width: 100%; margin-top: 6px; padding: 12px; font: 14px ui-monospace, Consolas, monospace; border-radius: 10px; border: 2px solid #5a46a0; background: #120a22; color: #fff; user-select: text; -webkit-user-select: text; }
#claim input:focus { outline: none; border-color: #f0c040; }
#claim .small { margin-top: 12px; }
#claim-status { margin-top: 12px; min-height: 18px; font-size: 13px; color: #f0c040; }