/* MK ARENA — estilo: dourado sobre obsidiana, landscape-first, alvos 44px (v3: tipografia arcade) */
@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/site/mk-arena/assets/fonts/pressstart2p.ttf?v=3") format("truetype");
}
:root {
  --arcade: "Press Start 2P", monospace;
  --bg:#0d0a07; --panel:#181410; --line:#3a3327; --txt:#f2e9d8; --dim:#b0a58c;
  --gold:#ffd23f; --orange:#ff9b2e; --red:#e2483c; --blue:#38b6ff;
  --sat: env(safe-area-inset-top,0px); --sab: env(safe-area-inset-bottom,0px);
  --sal: env(safe-area-inset-left,0px); --sar: env(safe-area-inset-right,0px);
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { width:100%; height:100%; overflow:hidden; background:var(--bg); }
body {
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  color:var(--txt); touch-action:none; overscroll-behavior:none;
  -webkit-user-select:none; user-select:none; position:fixed; inset:0;
}
#app { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
canvas#cv {
  /* sempre visivel: luta real OU demo de atracao (attract mode) por tras dos menus */
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(100vw, 177.78vh); height:min(56.25vw, 100vh);
  background:#000; image-rendering:pixelated; display:block;
}

#screens { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 100% at 50% 0%, rgba(26,19,9,.35) 0%, rgba(13,10,7,.62) 78%); }
body.in-fight #screens { display:none; }
#screens section { display:none; width:100%; max-width:860px; padding:calc(var(--sat) + 12px) 18px calc(var(--sab) + 12px);
  max-height:100%; overflow:auto; text-align:center; }
#screens section.on { display:block; animation:screenIn .16s ease-out; }
@keyframes screenIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

.eyebrow { font-family:var(--arcade); font-size:.55rem; color:var(--orange); letter-spacing:2px; margin-bottom:14px; text-shadow:0 2px 0 #000; }
.logo { font-family:var(--arcade); font-size:1.6rem; font-weight:400; letter-spacing:2px; color:var(--gold); text-shadow:0 3px 0 #000, 0 0 26px rgba(255,210,63,.3); line-height:1.5; }
.logo span { color:var(--txt); }
.logo.big { font-size:2.4rem; line-height:1.35; }
.subtitle { color:var(--dim); margin:10px 0 18px; letter-spacing:1px; font-size:.8rem; }
.scr-title { font-family:var(--arcade); font-size:.95rem; letter-spacing:2px; color:var(--gold); margin-bottom:16px; text-shadow:0 2px 0 #000; }
.grp-title { font-family:var(--arcade); font-size:.55rem; letter-spacing:2px; color:var(--dim); margin:14px 0 10px; }
.dim { color:var(--dim); }
.tiny { font-size:.72rem; }
.gold { color:var(--gold); }
.rank { font-family:var(--arcade); font-size:1.5rem; color:var(--gold); letter-spacing:2px; margin:12px 0; text-shadow:0 3px 0 #000; }
.big-num { font-size:1.4rem; margin:6px 0; }
.qmark { font-size:2rem; color:var(--dim); }

button { font-family:var(--arcade); color:var(--txt); background:var(--panel); border:1px solid var(--line);
  border-radius:10px; min-height:44px; min-width:44px; padding:12px 16px; font-size:.62rem; letter-spacing:1px; cursor:pointer; }
button:active { transform:translateY(1px); }
button.nav-focus { outline:2px solid var(--orange); border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,155,46,.25); }
button:disabled { opacity:.35; }
.big-btn { display:block; width:100%; max-width:440px; margin:8px auto; font-size:.72rem; font-weight:400;
  letter-spacing:1px; background:linear-gradient(#2a2013, #171208); border-color:#6b5a33; }
.menu-col { display:flex; flex-direction:column; align-items:center; gap:4px; margin-top:14px; }
.row-btns { display:flex; gap:10px; justify-content:center; margin-top:16px; flex-wrap:wrap; }
.press-start.blink { animation:blink 1.2s infinite; }
@keyframes blink { 50% { opacity:.45; } }

.load-wrap { width:min(70vw, 420px); height:12px; background:#241c10; border:1px solid var(--line); border-radius:8px; margin:18px auto 8px; overflow:hidden; }
#load-bar { height:100%; width:0; background:linear-gradient(90deg, var(--orange), var(--gold)); transition:width .2s; }

/* selecao */
.sel-wrap { display:flex; gap:18px; align-items:flex-start; justify-content:center; flex-wrap:wrap; }
.sel-grid { display:grid; grid-template-columns:repeat(4, minmax(84px, 96px)); gap:8px; }
.sel-tile { display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 4px 5px; height:132px; justify-content:flex-start; background:linear-gradient(180deg, rgba(24,20,16,.55), rgba(13,10,7,.15)); }
.sel-tile img { width:auto; height:96px; max-width:76px; object-fit:contain; image-rendering:pixelated; }
.sel-name { font-size:.5rem; letter-spacing:.5px; }
.sel-random { background:#141210; }
.sel-info { width:260px; text-align:left; background:rgba(24,20,16,.88); border:1px solid var(--line); border-radius:12px; padding:12px; }
.sel-info h3 { font-family:var(--arcade); font-size:.7rem; color:var(--gold); letter-spacing:1px; text-shadow:0 2px 0 #000; }
.sel-info p { font-size:.78rem; color:var(--dim); margin:8px 0; }
.sel-info .sp b { color:var(--txt); }

/* setup */
.pill-row { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.pill { border-radius:999px; padding:10px 14px; font-size:.6rem; }
.pill.on, .stage-tile.on { border-color:var(--gold); color:var(--gold); box-shadow:0 0 0 2px rgba(255,210,63,.2); }
.stage-row { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.stage-tile { display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px; width:112px; }
.stage-tile img { width:96px; height:54px; object-fit:cover; border:1px solid var(--line); image-rendering:pixelated; }
.stage-tile span { font-family:var(--arcade); font-size:.48rem; letter-spacing:.5px; }

/* carreira */
.cr-card { display:flex; gap:14px; align-items:center; justify-content:center; text-align:left;
  background:rgba(24,20,16,.85); border:1px solid var(--line); border-radius:12px; padding:12px 16px; margin-bottom:12px; }
.cr-card img { width:auto; height:92px; max-width:80px; object-fit:contain; border:2px solid var(--gold); image-rendering:pixelated; background:rgba(13,10,7,.6); border-radius:6px; }
.cr-stats { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:10px; }
.stat { display:flex; align-items:center; gap:8px; background:rgba(24,20,16,.85); border:1px solid var(--line);
  border-radius:10px; padding:8px 12px; min-height:44px; }
.stat span { font-size:.7rem; color:var(--dim); letter-spacing:1px; }
.stat b { color:var(--gold); font-size:1.1rem; }
.up { background:#2a2013; border-color:#6b5a33; font-weight:900; padding:0 14px; }
.cr-next { margin:10px 0; font-size:.95rem; }

/* tables de controles */
.keys-box { text-align:left; max-width:640px; margin:0 auto; background:rgba(24,20,16,.85); border:1px solid var(--line);
  border-radius:12px; padding:14px 18px; max-height:56vh; overflow:auto; }
.keys-box h3 { color:var(--gold); font-size:.8rem; letter-spacing:2px; margin:12px 0 6px; }
.keys-box table { width:100%; border-collapse:collapse; font-size:.8rem; }
.keys-box td { padding:4px 6px; border-bottom:1px solid rgba(58,51,39,.5); color:var(--dim); }
.keys-box td:first-child { color:var(--txt); width:44%; }
kbd { background:#262015; border:1px solid var(--line); border-radius:5px; padding:1px 6px; font-size:.75rem; margin-right:3px; }
.pad-test { margin-top:8px; }
.pad-raw { font-size:.66rem; color:var(--dim); background:#0f0c08; padding:8px; border-radius:8px; margin:8px 0; min-height:44px; }

/* luta */
#fight-ui { position:absolute; inset:0; pointer-events:none; display:none; }
#fight-ui.on { display:block; }
.hud-btn { position:absolute; top:calc(var(--sat) + 8px); left:calc(var(--sal) + 8px); width:44px; height:44px;
  pointer-events:auto; background:rgba(13,10,7,.7); border-color:var(--line); font-size:1.1rem; z-index:5; }

#pauseOvl { position:absolute; inset:0; background:rgba(0,0,0,.72); display:flex; align-items:center; justify-content:center; z-index:20; }
#pauseOvl.hidden { display:none; }
.pause-card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px 26px; text-align:center; }
.pause-card h2 { color:var(--gold); letter-spacing:4px; margin-bottom:10px; }

/* toque virtual */
#touch-pad { position:absolute; inset:0; pointer-events:none; display:none; z-index:8; }
body.in-fight #touch-pad { display:block; }
body.no-touch #touch-pad { display:none !important; }
#touch-dpad { position:absolute; left:calc(var(--sal) + 12px); bottom:calc(var(--sab) + 12px); width:150px; height:150px; pointer-events:none; }
#touch-btns { position:absolute; right:calc(var(--sar) + 12px); bottom:calc(var(--sab) + 12px); display:flex; flex-wrap:wrap-reverse;
  gap:8px; width:190px; justify-content:flex-start; pointer-events:none; }
.tbtn { pointer-events:auto; position:absolute; width:48px; height:48px; border-radius:50%; background:rgba(24,20,16,.6);
  border:1px solid var(--line); font-size:1rem; color:var(--txt); }
#touch-dpad .tbtn[data-act=up]    { left:51px; top:0; }
#touch-dpad .tbtn[data-act=left]  { left:0; top:51px; }
#touch-dpad .tbtn[data-act=right] { left:102px; top:51px; }
#touch-dpad .tbtn[data-act=down]  { left:51px; top:102px; }
#touch-btns .tbtn { position:relative; width:54px; height:54px; font-size:.9rem; font-weight:800; }
#touch-btns .tb-small { width:46px; height:46px; font-size:.7rem; }
.tbtn.down { background:rgba(255,155,46,.4); border-color:var(--orange); }

@media (max-height: 420px) {
  .logo.big { font-size:2rem; }
  .logo { font-size:1.4rem; }
  #screens section { padding-top:8px; }
  .sel-tile { height:112px; }
  .sel-tile img { height:76px; }
}