/* Flubber Slime — la page ne fait qu'une chose : centrer le canvas sur du noir. */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; overflow: hidden; background: #000; } body { display: flex; align-items: center; justify-content: center; } #jeu { /* Le rendu interne est en 320x180 : on agrandit sans lissage pour garder des pixels nets, et a l'echelle ENTIERE uniquement (voir moteur/rendu.js). */ image-rendering: pixelated; image-rendering: crisp-edges; display: block; /* Le curseur est pilote depuis le JS (voir definirCurseur) : visible dans les menus, masque en combat au profit du reticule dessine. Il ne doit surtout PAS etre cache ici, sinon les ecrans de menu se cliquent a l'aveugle. */ cursor: default; background: #100f1a; } /* --- Commandes TACTILES (src/moteur/tactile.js, plan du 27/09/2026) --------------------------- Rien de tout ceci n'existe sans la classe `tactile` sur : le jeu au clavier ne change pas. */ html.tactile, html.tactile body, html.tactile #jeu { touch-action: none; /* ni zoom ni defilement au doigt */ -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } #tactile { position: fixed; inset: 0; pointer-events: none; /* seuls les boutons et le joystick captent le doigt */ font-family: monospace; z-index: 10; } #t-joystick { position: absolute; /* Loin du bord gauche : dans Safari, glisser depuis le bord fait « page precedente ». */ left: calc(28px + env(safe-area-inset-left)); top: 18%; width: 42%; bottom: 0; pointer-events: auto; touch-action: none; } #t-joystick .t-socle, #t-joystick .t-manche { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); display: none; } #t-joystick .t-socle { width: 96px; height: 96px; background: rgba(255, 255, 255, 0.08); border: 2px solid rgba(255, 255, 255, 0.25); } #t-joystick .t-manche { width: 44px; height: 44px; background: rgba(255, 255, 255, 0.3); } #t-joystick.t-actif .t-socle, #t-joystick.t-actif .t-manche { display: block; } .t-bouton { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(16, 15, 26, 0.45); border: 2px solid rgba(255, 255, 255, 0.35); color: rgba(255, 255, 255, 0.85); font-size: 11px; font-weight: bold; letter-spacing: 1px; pointer-events: auto; touch-action: none; } .t-bouton.t-enfonce { background: rgba(63, 169, 255, 0.45); border-color: #3fa9ff; } /* Tailles : jamais sous 48 px (un pouce), positions decalees de l'encoche et des coins arrondis (env(safe-area-inset-*), non nul sur iPhone en paysage). */ #t-attaque { right: calc(3vmin + env(safe-area-inset-right)); bottom: calc(6vmin + env(safe-area-inset-bottom)); width: max(22vmin, 80px); height: max(22vmin, 80px); font-size: 12px; } #t-sort { right: calc(29vmin + env(safe-area-inset-right)); bottom: calc(3vmin + env(safe-area-inset-bottom)); width: max(14vmin, 54px); height: max(14vmin, 54px); } #t-ruee { right: calc(6vmin + env(safe-area-inset-right)); bottom: calc(33vmin + env(safe-area-inset-bottom)); width: max(14vmin, 54px); height: max(14vmin, 54px); } #t-manger { right: calc(24vmin + env(safe-area-inset-right)); bottom: calc(22vmin + env(safe-area-inset-bottom)); width: max(13vmin, 52px); height: max(13vmin, 52px); font-size: 16px; } #t-arme { right: calc(44vmin + env(safe-area-inset-right)); bottom: calc(12vmin + env(safe-area-inset-bottom)); width: max(11vmin, 48px); height: max(11vmin, 48px); font-size: 10px; } #t-pause { right: calc(2vmin + env(safe-area-inset-right)); top: calc(12vmin + env(safe-area-inset-top)); width: max(10vmin, 48px); height: max(10vmin, 48px); font-size: 14px; } #t-stats { right: calc(16vmin + env(safe-area-inset-right)); top: calc(12vmin + env(safe-area-inset-top)); width: max(10vmin, 48px); height: max(10vmin, 48px); font-size: 20px; background: rgba(255, 200, 60, 0.35); } #t-passer { left: 50%; top: calc(2vmin + env(safe-area-inset-top)); transform: translateX(-50%); width: auto; height: auto; padding: 10px 18px; border-radius: 12px; } #t-portrait { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: #000; color: #fff; font-size: 18px; text-align: center; pointer-events: auto; } @media (orientation: portrait) { html.tactile #t-portrait { display: flex; } }