body {
  margin: 0;
  background: #111;
  color: #fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  display: flex;
  gap: 20px;
}

canvas {
  background: #000;
  border: 2px solid #555;
  image-rendering: pixelated;
}

#score {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.sidebar h4 {
  margin-bottom: 10px;
}

.info-box {
  margin-top: 20px;
}

#game-over {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#game-over h1 {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

#game-over button {
  padding: 10px 20px;
  font-size: 1.2rem;
  cursor: pointer;
  margin-top: 20px;
}



@media (max-width: 768px) {
  

  

  .mobile-controls button:active {
    background: rgba(255,255,255,0.3);
  }
}

/* auth ui via JS */
#auth-box{display:none!important;}
.tetris-auth-fab{position:fixed;top:12px;left:12px;z-index:8000;padding:10px 12px;border-radius:10px;border:1px solid #666;background:#1f1f1f;color:#fff;}
.tetris-auth-overlay{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.78);padding:16px;}
.tetris-auth-card{width:min(520px,100%);border:1px solid #444;border-radius:16px;background:#0b0b0b;color:#fff;padding:16px;box-sizing:border-box;}
.tetris-auth-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;}
.tetris-auth-row input{flex:1;min-width:160px;padding:10px 12px;border-radius:10px;border:1px solid #444;background:#000;color:#fff;outline:none;}
.tetris-auth-row button{flex:1;min-width:120px;padding:10px 12px;border-radius:10px;border:1px solid #666;background:#1f1f1f;color:#fff;}
.tetris-auth-meta{margin-top:10px;color:#cfcfcf;}

/* tetris HUD */
.tetris-hud{position:fixed;top:12px;left:12px;right:12px;z-index:8500;display:grid;grid-template-columns: 1fr 1fr 1fr;gap:10px;align-items:center;}
.tetris-pill{padding:8px 10px;border-radius:999px;border:1px solid #444;background:rgba(0,0,0,.55);color:#fff;font-size:13px;backdrop-filter: blur(6px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.tetris-toast{position:fixed;bottom:18px;right:18px;z-index:8600;padding:10px 12px;border-radius:12px;border:1px solid #444;background:rgba(0,0,0,.75);color:#fff;display:none;}

@media (max-width: 520px){.tetris-hud{grid-template-columns: 1fr 1fr;}.tetris-pill{font-size:12px;}}

/* ===== Versiona-like Theme ===== */
:root{
  --v-bg0:#070A12;
  --v-bg1:#0B1220;
  --v-glass: rgba(15,26,46,.58);
  --v-glass2: rgba(10,18,34,.72);
  --v-stroke: rgba(255,255,255,.10);
  --v-stroke2: rgba(255,255,255,.16);
  --v-text:#EAF0FF;
  --v-muted: rgba(234,240,255,.72);
  --v-accent:#7C5CFF; /* roxo Versiona */
  --v-accent2:#2DE2E6; /* ciano */
  --v-shadow: 0 12px 40px rgba(0,0,0,.45);
}

body{
  background: radial-gradient(1200px 700px at 20% 15%, rgba(124,92,255,.18), transparent 60%),
              radial-gradient(900px 600px at 80% 70%, rgba(45,226,230,.14), transparent 55%),
              linear-gradient(180deg, var(--v-bg0), var(--v-bg1));
  color: var(--v-text);
}

/* container vira layout "app" */
.container{
  gap: 18px;
  align-items: flex-start;
}

/* painéis glass */
canvas, .sidebar{
  border: 1px solid var(--v-stroke2) !important;
  box-shadow: var(--v-shadow);
}

#tetris{
  background: linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.78));
  border-radius: 18px;
}

#preview{
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(0,0,0,.86), rgba(0,0,0,.72));
}

.sidebar{
  padding: 14px 14px;
  border-radius: 18px;
  background: var(--v-glass);
  backdrop-filter: blur(10px);
}

#score{
  font-size: 1.05rem;
  letter-spacing: .2px;
  margin-bottom: 10px;
  color: var(--v-muted);
}

.sidebar h4, .info-box h3{
  margin: 0 0 10px 0;
  font-weight: 650;
  color: var(--v-text);
}

.info-box{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--v-stroke);
}

#score-box{
  font-size: 2rem;
  margin: 0;
  font-weight: 750;
  background: linear-gradient(90deg, var(--v-accent), var(--v-accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* HUD pills - versão premium */
.tetris-pill{
  border: 1px solid var(--v-stroke2) !important;
  background: rgba(10,18,34,.55) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* modal auth */
.tetris-auth-card{
  border: 1px solid var(--v-stroke2) !important;
  background: var(--v-glass2) !important;
  box-shadow: var(--v-shadow);
}
.tetris-auth-row button{
  border: 1px solid var(--v-stroke2) !important;
}
.tetris-auth-row button:hover{
  filter: brightness(1.07);
}

/* botões mobile - versão Versiona */


/* game over mais "produto" */
#game-over{
  background: radial-gradient(900px 500px at 50% 30%, rgba(124,92,255,.22), transparent 60%),
              rgba(0,0,0,.92);
}
#game-over h1{
  background: linear-gradient(90deg, var(--v-accent), var(--v-accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#game-over button{
  border-radius: 14px;
  border: 1px solid var(--v-stroke2);
  background: rgba(10,18,34,.55);
  color: var(--v-text);
}
#game-over button:hover{ filter: brightness(1.07); }

/* override old layout */
body{display:block !important; height:auto !important; min-height:100vh !important;}

/* FIX: reserve space for HUD */
:root{--hud-h:58px;}
body{padding-top: calc(var(--hud-h) + 10px) !important;}
@media (max-width:520px){:root{--hud-h:118px;}}

/* FIX: mobile stacking layout */
@media (max-width: 768px){
  .container{flex-direction:column; align-items:center;}
  .sidebar{width:min(420px, 92vw);}
  #tetris{width:min(92vw, 360px); height:auto;}
  #preview{width:120px; height:120px;}
}

/* FIX: remove duplicated score label (HUD already has it) */
#score{display:none !important;}

/* FIX: mobile sidebar becomes compact */
@media (max-width: 768px){
  .sidebar{
    width: min(92vw, 520px) !important;
    display:grid;
    grid-template-columns: 140px 1fr;
    gap:12px;
    padding:12px !important;
    align-items:center;
  }
  .sidebar h4{grid-column:1 / -1; margin-bottom:6px;}
  #preview{width:120px !important; height:120px !important; justify-self:start;}
  .info-box{margin-top:0 !important; padding-top:0 !important; border-top:0 !important;}
  .info-box h3{margin:0 0 6px 0;}
  #score-box{font-size: 2.2rem !important;}
}

/* FIX: bring board closer to HUD on mobile */
@media (max-width: 768px){
  body{padding-top: 10px !important;}
  .tetris-hud{position:sticky !important; top: calc(10px + env(safe-area-inset-top)) !important;}
  .container{margin-top: 10px !important;}
}

/* FIX: mobile controls spacing */
@media (max-width: 768px){
  
  .container{padding-bottom: 120px;}
}

/* ===== Mobile TOP HUD + Next Piece TOP RIGHT ===== */
@media (max-width: 768px){

  /* mantém a área do jogo sem ser coberta */
  body{
    padding-top: calc(64px + env(safe-area-inset-top)) !important;
  }

  /* HUD no topo (pills) */
  .tetris-hud{
    position: fixed !important;
    top: calc(10px + env(safe-area-inset-top)) !important;
    left: 12px !important;
    right: 12px !important;
    z-index: 8500;
    display: flex !important;
    gap: 10px;
    flex-wrap: nowrap !important;
    justify-content: flex-start;
    pointer-events: none; /* evita interferir no game */
  }
  .tetris-pill{
    pointer-events: auto;
    white-space: nowrap;
  }

  /* escondemos duplicações no mobile */
  .sidebar{ display:none !important; }
  #score{ display:none !important; }

  /* Next Piece como card no canto direito do topo */
  .tetris-next{
    position: fixed;
    top: calc(74px + env(safe-area-inset-top));
    right: 12px;
    z-index: 8499;
    width: 124px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(8px);
    padding: 10px;
    box-sizing: border-box;
  }
  .tetris-next__title{
    font-size: 12px;
    color: rgba(255,255,255,.75);
    margin: 0 0 8px 0;
    letter-spacing: .3px;
  }
  /* o canvas do preview dentro do card */
  #preview{
    width: 100px !important;
    height: 100px !important;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.55);
    display:block;
  }

  /* mobile controls sempre acima do fundo */
  
}


/* ===== Refinamento visual: Next Piece glass card ===== */
@media (max-width: 768px){

  .tetris-next{
    background: rgba(8, 14, 24, 0.35) !important; /* bem mais transparente */
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow:
      0 8px 24px rgba(0,0,0,.35),
      inset 0 0 0 1px rgba(255,255,255,.04);
  }

  .tetris-next__title{
    color: rgba(255,255,255,.7);
    font-weight: 500;
  }

  /* preview canvas mais leve */
  #preview{
    background: rgba(0,0,0,.25) !important;
    border: 1px solid rgba(255,255,255,.08);
  }
}


/* ===== Fix: preview pequeno demais ===== */
.tetris-next{
  width: 160px;
  padding: 14px;
}

#preview{
  width: 120px !important;
  height: 120px !important;
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: 10px auto 0 auto;
}

/* Mobile: garante leitura */
@media (max-width: 480px){
  .tetris-next{
    width: 150px;
  }

  #preview{
    width: 110px !important;
    height: 110px !important;
  }
}


/* ===== Fix: pill "Score" truncado no mobile ===== */
.tetris-hud{
  gap: 8px;
}

.tetris-pill{
  white-space: nowrap;
}

.tetris-pill.score-pill{
  min-width: 110px;          /* garante "Score: 0" */
  text-overflow: clip;       /* não vira ... */
  overflow: visible;         /* deixa aparecer */
  flex: 0 0 auto;            /* não encolhe */
}

/* Se estiver usando grid/linha no HUD, ajuda a distribuir melhor */
@media (max-width: 420px){
  .tetris-hud{
    left: 10px;
    right: 10px;
    justify-content: space-between;
  }
  .tetris-pill.score-pill{
    min-width: 104px;
  }
}


/* botão extra hard-drop (space) */



/* Hard drop: mesmo padrão dos botões mobile */
.mobile-controls 


/* ================================
   Versiona-like Mobile Controls
   ================================ */

:root{
  --ctl-bg: rgba(10,18,32,.58);
  --ctl-bg2: rgba(6,10,18,.62);
  --ctl-stroke: rgba(255,255,255,.12);
  --ctl-stroke2: rgba(255,255,255,.20);
  --ctl-glow: rgba(120,140,255,.16);
  --ctl-text: rgba(255,255,255,.92);
  --ctl-muted: rgba(255,255,255,.72);
}

/* barra fixa inferior */


/* botão base */


/* foco/hover (desktop) */
.mobile-controls button:hover{
  border-color: var(--ctl-stroke2);
  box-shadow:
    0 12px 28px rgba(0,0,0,.50),
    0 0 0 4px rgba(120,140,255,.10),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.30);
}

/* pressionado */
.mobile-controls button:active{
  transform: translateY(2px) scale(.98);
  filter: brightness(1.06);
  box-shadow:
    0 6px 18px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -2px 0 rgba(0,0,0,.35);
}

/* acessibilidade: foco via teclado */
.mobile-controls button:focus-visible{
  outline: none;
  border-color: rgba(140,160,255,.55);
  box-shadow:
    0 12px 28px rgba(0,0,0,.50),
    0 0 0 4px rgba(140,160,255,.18),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.30);
}

/* o botão hard-drop (⤓) com leve destaque, sem ficar “gritante” */
.mobile-controls 

/* responsivo (telas pequenas) */
@media (max-width: 380px){
  
  
}

/* respira em telas grandes */
@media (min-width: 700px){
  
  
}


/* hit area (mais fácil de tocar) */



/* ================================
   Versiona-like Controls (FORÇADO)
   ================================ */
.mobile-controls{
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 14px !important;
  z-index: 9999 !important;

  width: 100vw !important;
  max-width: 520px !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;

  padding: 0 14px !important;
  box-sizing: border-box !important;

  pointer-events: none !important;
}

.mobile-controls button{
  pointer-events: auto !important;

  width: 64px !important;
  height: 54px !important;
  border-radius: 16px !important;

  border: 1px solid rgba(255,255,255,.14) !important;
  background: linear-gradient(180deg, rgba(10,18,32,.62), rgba(6,10,18,.66)) !important;

  box-shadow:
    0 10px 26px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.30) !important;

  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;

  color: rgba(255,255,255,.92) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: transform .08s ease, filter .15s ease, border-color .15s ease !important;
}

.mobile-controls button:active{
  transform: translateY(2px) scale(.98) !important;
  filter: brightness(1.08) !important;
}

.mobile-controls #btn-hard{
  border-color: rgba(255,255,255,.20) !important;
  box-shadow:
    0 10px 26px rgba(0,0,0,.45),
    0 0 18px rgba(120,140,255,.18),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.30) !important;
}

/* telas bem pequenas */
@media (max-width: 380px){
  .mobile-controls{ gap: 10px !important; bottom: 12px !important; }
  .mobile-controls button{ width: 60px !important; height: 52px !important; border-radius: 15px !important; }
}


/* =========================================
   GAMER KEYCAP CONTROLS (Versiona-like)
   ========================================= */

:root{
  --key-bg1: rgba(16, 24, 44, .72);
  --key-bg2: rgba(8, 12, 22, .82);
  --key-border: rgba(255,255,255,.14);
  --key-border2: rgba(0,0,0,.55);
  --key-glow: rgba(120, 140, 255, .22);
  --key-text: rgba(255,255,255,.92);
}

.mobile-controls{
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 14px !important;
  z-index: 9999 !important;

  width: 100vw !important;
  max-width: 560px !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;

  padding: 0 14px !important;
  box-sizing: border-box !important;

  pointer-events: none !important;
}

.mobile-controls button{
  pointer-events: auto !important;

  width: 72px !important;
  height: 58px !important;
  border-radius: 16px !important;

  /* “keycap” look */
  border: 1px solid var(--key-border) !important;
  background:
    radial-gradient(120% 140% at 30% 10%, rgba(255,255,255,.10), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, var(--key-bg1), var(--key-bg2)) !important;

  /* borda interna + relevo */
  box-shadow:
    0 16px 34px rgba(0,0,0,.55),
    0 0 0 1px rgba(0,0,0,.25),
    0 0 18px var(--key-glow),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -8px 18px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.06) !important;

  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;

  color: var(--key-text) !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: transform .07s ease, box-shadow .12s ease, filter .12s ease !important;

  position: relative !important;
  overflow: hidden !important;
}

/* “legenda” pequena no canto (tecla gamer) */
.mobile-controls button::after{
  content: "";
  position: absolute;
  top: 8px;
  right: 10px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  box-shadow: 0 0 12px rgba(120,140,255,.25);
  opacity: .75;
}

/* linha de brilho no topo */
.mobile-controls button::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 40%);
  opacity: .85;
  pointer-events: none;
}

.mobile-controls button:active{
  transform: translateY(2px) scale(.985) !important;
  filter: brightness(1.05) !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,.55),
    0 0 0 1px rgba(0,0,0,.25),
    0 0 14px rgba(120,140,255,.16),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -6px 16px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.05) !important;
}

/* Hard drop (space) com destaque */
.mobile-controls #btn-hard{
  border-color: rgba(255,255,255,.20) !important;
  box-shadow:
    0 16px 34px rgba(0,0,0,.55),
    0 0 0 1px rgba(0,0,0,.25),
    0 0 26px rgba(130,170,255,.28),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -8px 18px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.06) !important;
}

/* Ajuste mobile pequeno */
@media (max-width: 380px){
  .mobile-controls{ gap: 10px !important; bottom: 12px !important; }
  .mobile-controls button{ width: 66px !important; height: 56px !important; border-radius: 15px !important; }
}


/* =========================================
   AKKO 3068 KEYCAP (mobile controls)
   ========================================= */

:root{
  --akko-top: rgba(255,255,255,.10);
  --akko-face1: rgba(18, 26, 46, .82);
  --akko-face2: rgba(10, 14, 26, .90);
  --akko-edge: rgba(255,255,255,.14);
  --akko-edge2: rgba(0,0,0,.55);
  --akko-shadow: rgba(0,0,0,.55);
  --akko-glow: rgba(120,140,255,.18);
  --akko-icon: rgba(255,255,255,.88);
  --akko-icon-dim: rgba(255,255,255,.72);
}

/* garante centro e “barra” fixa */
.mobile-controls{
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 14px !important;
  z-index: 9999 !important;

  width: 100vw !important;
  max-width: 560px !important;

  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;

  padding: 0 14px !important;
  box-sizing: border-box !important;

  pointer-events: none !important;
}

.mobile-controls button{
  pointer-events: auto !important;

  width: 74px !important;
  height: 58px !important;
  border-radius: 14px !important;

  /* “keycap” */
  border: 1px solid var(--akko-edge) !important;
  background:
    /* brilho suave no topo (ABS) */
    radial-gradient(120% 120% at 30% 0%, rgba(255,255,255,.14), rgba(255,255,255,0) 58%),
    /* face */
    linear-gradient(180deg, var(--akko-face1), var(--akko-face2)) !important;

  /* borda dupla + profundidade tipo keycap */
  box-shadow:
    0 18px 34px var(--akko-shadow),                 /* sombra externa */
    0 0 0 1px rgba(0,0,0,.25),                      /* contorno */
    inset 0 1px 0 rgba(255,255,255,.12),            /* highlight topo */
    inset 0 -10px 18px rgba(0,0,0,.46),             /* “cava” inferior */
    inset 0 0 0 1px rgba(255,255,255,.06),          /* borda interna */
    0 0 18px var(--akko-glow) !important;           /* glow Versiona */

  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;

  color: var(--akko-icon) !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;

  position: relative !important;
  overflow: hidden !important;

  transition: transform .07s ease, filter .12s ease, box-shadow .12s ease !important;
}

/* “parede” lateral (simula keycap alto) */
.mobile-controls button::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 45%);
  opacity: .9;
  pointer-events:none;
}

/* legenda estilo keycap (Akko) no canto inferior */
.mobile-controls button::after{
  content: attr(data-k);
  position: absolute;
  left: 10px;
  bottom: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .6px;
  color: var(--akko-icon-dim);
  opacity: .85;
  text-transform: uppercase;
  pointer-events:none;
}

/* Feedback de clique: “afunda” */
.mobile-controls button:active{
  transform: translateY(2px) scale(.985) !important;
  filter: brightness(1.06) !important;
  box-shadow:
    0 12px 22px rgba(0,0,0,.58),
    0 0 0 1px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -8px 16px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 0 14px rgba(120,140,255,.14) !important;
}

/* Hard drop (space) mais “especial” */
#btn-hard{
  border-color: rgba(255,255,255,.20) !important;
  box-shadow:
    0 18px 34px rgba(0,0,0,.55),
    0 0 0 1px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -10px 18px rgba(0,0,0,.46),
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 0 26px rgba(140,170,255,.22) !important;
}

/* tamanhos menores */
@media (max-width: 380px){
  .mobile-controls{ gap: 10px !important; bottom: 12px !important; }
  .mobile-controls button{ width: 68px !important; height: 56px !important; border-radius: 13px !important; }
  .mobile-controls button::after{ left: 9px; bottom: 7px; font-size: 10px; }
}


/* ===========================
   REALISTIC KEYCAPS (Akko-like)
   =========================== */

:root{
  --kc-top:#f5f6f7;
  --kc-mid:#e6e7e9;
  --kc-bot:#d2d3d6;
  --kc-edge:#c7c8cc;
  --kc-legend:#3b3b3b;
  --kc-radius: 12px;
  --kc-size: 66px;
}

/* barra dos controles */
.mobile-controls{
  display:flex;
  justify-content:center;
  gap: 12px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 8200;
  pointer-events: none;
}
.mobile-controls button{ pointer-events:auto; }

/* base da keycap */
.mobile-controls button,
#btn-hard{
  width: var(--kc-size);
  height: var(--kc-size);
  border-radius: var(--kc-radius);
  border: 1px solid var(--kc-edge);
  color: var(--kc-legend);
  font-weight: 700;
  font-size: 22px;

  position: relative;
  overflow: hidden;

  background:
    radial-gradient(120% 120% at 30% 25%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(140% 140% at 70% 70%, rgba(0,0,0,.06) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(to bottom, var(--kc-top) 0%, var(--kc-mid) 55%, var(--kc-bot) 100%);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -8px 14px rgba(0,0,0,.10),
    0 6px 0 rgba(0,0,0,.28),
    0 12px 22px rgba(0,0,0,.40);

  outline: none;
  display:flex;
  align-items:center;
  justify-content:center;

  user-select:none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  transition: transform .045s ease, box-shadow .045s ease, filter .15s ease;
}

/* topo côncavo */
.mobile-controls button::before,
#btn-hard::before{
  content:"";
  position:absolute;
  inset: 7px;
  border-radius: calc(var(--kc-radius) - 7px);
  background:
    radial-gradient(120% 90% at 50% 40%,
      rgba(255,255,255,.85) 0%,
      rgba(245,245,245,.92) 35%,
      rgba(220,220,220,.95) 70%,
      rgba(200,200,200,1) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.10),
    inset 0 -10px 14px rgba(0,0,0,.12),
    inset 0 2px 3px rgba(255,255,255,.65);
  opacity: .95;
  pointer-events:none;
}

/* highlight superior */
.mobile-controls button::after,
#btn-hard::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: var(--kc-radius);
  background: linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,0) 45%);
  pointer-events:none;
  mix-blend-mode: screen;
  opacity: .55;
}

/* press */
.mobile-controls button:active,
#btn-hard:active{
  transform: translateY(4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -10px 16px rgba(0,0,0,.14),
    0 2px 0 rgba(0,0,0,.28),
    0 6px 12px rgba(0,0,0,.32);
  filter: brightness(.99);
}

/* legenda com impressão */
.mobile-controls button,
#btn-hard{
  text-shadow:
    0 1px 0 rgba(255,255,255,.65),
    0 -1px 0 rgba(0,0,0,.08);
}

/* hard-drop mais “space-like” */
#btn-hard{
  width: 90px;
  font-size: 20px;
}