/* Controles tactiles, diseno adaptable y medidor de fps de la pagina (docs/pc/web/w2a.md). Los pone touch.js; sin pantalla tactil nada de esto se ve. */
:root { --btn-bg:#23251e; --btn-bg-on:#4b5a36; --btn-line:#8c8a7c; --panel:#10110d; }
html, body { touch-action:none; overscroll-behavior:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
body.touch-on { background:var(--panel); }
body.touch-on.landscape { background:#000; }
#touch { position:fixed; inset:0; z-index:1; pointer-events:none; display:none; touch-action:none; }
body.touch-on #touch { display:block; }
#touch > * { position:absolute; pointer-events:auto; touch-action:none; box-sizing:border-box; }
/* cruceta: dos barras y cuatro brazos que se iluminan */
#dpad svg { width:100%; height:100%; display:block; overflow:visible; }
#dpad .bar { fill:var(--btn-bg); stroke:var(--btn-line); stroke-width:2.5; }
#dpad .arm { fill:transparent; }
#dpad .tri { fill:var(--btn-line); }
#dpad.u .au, #dpad.d .ad, #dpad.l .al, #dpad.r .ar { fill:var(--btn-bg-on); }
/* A y B, Start y Select */
.tbtn { display:flex; align-items:center; justify-content:center; font:700 22px/1 system-ui, sans-serif; color:var(--fg); }
.tbtn.round { border-radius:50%; background:var(--btn-bg); border:2.5px solid var(--btn-line); }
.tbtn.round.on { background:var(--btn-bg-on); border-color:var(--accent); }
.tbtn.pill { background:transparent; }
.tbtn.pill i { display:block; width:100%; height:26px; border-radius:13px; background:var(--btn-bg); border:2px solid var(--btn-line); font:600 11px/22px system-ui, sans-serif; letter-spacing:.08em; text-transform:uppercase; text-align:center; font-style:normal; color:var(--dim); }
.tbtn.pill.on i { background:var(--btn-bg-on); border-color:var(--accent); color:var(--fg); }
/* en horizontal los botones van sobre el borde de la imagen: semitransparentes */
body.landscape #touch > * { opacity:.62; }
body.landscape #touch > .on, body.landscape #touch > #menu { opacity:1; }
body.landscape #dpad .bar, body.landscape .tbtn.round, body.landscape .tbtn.pill i { background-color:rgba(20,21,16,.7); }
/* menu de Select */
#menu { inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.55); z-index:3; }
#menu.open { display:flex; }
#menu small.ver { display:block; padding:6px 14px 2px; font-size:11px; color:var(--dim); }
#menu > div { width:min(320px, 86vw); background:#181a14; border:1px solid var(--btn-line); border-radius:12px; padding:8px; color:var(--fg); font:16px/1.3 system-ui, sans-serif; }
#menu button { display:flex; width:100%; min-height:48px; align-items:center; justify-content:space-between; gap:12px; margin:2px 0; padding:0 14px; border:0; border-radius:8px; background:transparent; color:inherit; font:inherit; text-align:left; touch-action:none; }
#menu button:active { background:#2a2d23; }
#menu button b { font-weight:600; color:var(--dim); }
#menu button b.yes { color:var(--accent); }
/* medidor de fps */
#fps { position:fixed; z-index:4; margin:0; padding:3px 7px; border-radius:6px; background:rgba(0,0,0,.65); color:#bfe6a0; font:11px/1.35 ui-monospace, Menlo, monospace; white-space:pre; pointer-events:none; display:none; }