/* Console de poche commune aux mini-jeux : coque claire, écran vert à 4 teintes, croix et boutons A/B. */
:root{
  --bg:#2b2f3a; --shell:#d9d4c7; --shellD:#b8b2a2; --bezel:#4a4d5c; --fg:#2b2f3a; --muted:#6b6e7c; --accent:#9c2f5a;
  --g0:#0f380f; --g1:#306230; --g2:#8bac0f; --g3:#9bbc0f;
  --pixel:'Press Start 2P', ui-monospace, monospace; --body:'Nunito', system-ui, sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);font-family:var(--body);color:#e8e4da;-webkit-user-select:none;user-select:none;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:max(12px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;align-items:center;gap:12px}
.back{align-self:flex-start;color:#b8b2a2;font-family:var(--pixel);font-size:10px;text-decoration:none;padding:6px 0}
.back:hover,.back:focus-visible{color:#fff}
.shell{width:min(100%,420px);background:var(--shell);border-radius:14px 14px 56px 14px;padding:20px 22px 28px;
  box-shadow:inset -6px -6px 0 var(--shellD),0 18px 40px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:18px}
.bezel{background:var(--bezel);border-radius:10px 10px 32px 10px;padding:18px 26px 14px;display:flex;flex-direction:column;gap:8px}
.bezel .lbl{font-family:var(--pixel);font-size:7px;color:#a9abb8;letter-spacing:.12em;text-align:center}
.bezel .led{display:inline-block;width:6px;height:6px;border-radius:50%;background:#e2304a;margin-right:6px;box-shadow:0 0 6px #e2304a}
canvas{width:100%;aspect-ratio:160/144;display:block;image-rendering:pixelated;background:var(--g3);touch-action:none}
.brand{font-family:var(--pixel);font-size:12px;color:var(--accent);font-style:italic}
.brand small{font-size:8px;color:#3a3d8a;font-style:normal;margin-left:4px}
.ctrls{display:flex;justify-content:space-between;align-items:center;gap:12px}
.dpad{position:relative;width:120px;height:120px;flex:none}
.dpad button{position:absolute;width:40px;height:40px;background:#2b2b33;border:0;border-radius:4px;touch-action:none;color:#55576a;font-size:14px}
.dpad .u{left:40px;top:0}.dpad .d{left:40px;bottom:0}.dpad .l{left:0;top:40px}.dpad .r{right:0;top:40px}
.dpad::after{content:"";position:absolute;left:40px;top:40px;width:40px;height:40px;background:#2b2b33}
.ab{display:flex;gap:14px;transform:rotate(-25deg)}
.ab button{width:54px;height:54px;border-radius:50%;background:var(--accent);border:0;color:#f4d6e2;font-family:var(--pixel);font-size:12px;
  box-shadow:inset -3px -3px 0 rgba(0,0,0,.25);touch-action:none}
.ab .b{margin-top:22px}
button.on{filter:brightness(.8);transform:translateY(1px)}
button:focus-visible{outline:3px solid #f4c430;outline-offset:2px}
.start{display:flex;justify-content:center;gap:22px}
.start button{background:#8f8a7c;border:0;border-radius:10px;width:56px;height:14px;transform:rotate(-25deg);touch-action:none}
.start span{display:block;font-family:var(--pixel);font-size:7px;color:#3a3d8a;text-align:center;margin-top:8px}
.help{color:#b8b2a2;font-size:13px;text-align:center;max-width:420px;line-height:1.5}
kbd{font-family:var(--pixel);font-size:8px;background:#3a3f4d;border:1px solid #555a6a;border-bottom-width:3px;border-radius:3px;padding:2px 4px;color:#fff}
@media (pointer:coarse){.help{display:none}}
@media (max-height:700px) and (pointer:fine){.shell{width:min(100%,340px)}}