/* ============================================================
   ARROMBADOR — style.css
   Variáveis de cor, tipografia e todo o visual do jogo.
   Tema: cofre/assalto — dourado (latão) sobre azul-marinho escuro.
   ============================================================ */

/* Paleta de cores e variáveis reutilizadas em todo o arquivo */
:root{
    --bg-deep:#12151c;--bg-panel:#1b202b;--brass:#c9a227;--brass-dim:#8a721f;
    --crimson:#b0413e;--police-blue:#2b5fa8;--success:#4f9a6f;
    --ink:#eae6da;--ink-dim:#9aa0ac;--line:#333b49;--cell-max:64px;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;min-height:100vh;
    background:radial-gradient(ellipse 1200px 700px at 50% -10%, #232a38 0%, var(--bg-deep) 60%);
    color:var(--ink);font-family:'Space Mono', monospace;
    display:flex;flex-direction:column;align-items:center;
  }

  /* ---------- Navbar ---------- */
  
/* Barra superior fixa: abas de modo + ícones de ação + seta de esconder/mostrar */
.navbar-wrap{position:sticky;top:0;z-index:40;width:100%;display:flex;flex-direction:column;align-items:center;}
  .navbar{
    width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
    background:#12151cd9;backdrop-filter:blur(6px);padding:10px 14px;border-bottom:1px solid var(--line);
    max-height:120px;overflow:hidden;transition:max-height .3s ease, padding .3s ease, opacity .25s ease;
  }
  .navbar.collapsed{max-height:0;padding-top:0;padding-bottom:0;opacity:0;border-bottom:none;}
  .mode-tabs{display:flex;gap:6px;flex-wrap:wrap;}
  .mode-tab{
    background:none;border:1px solid var(--line);color:var(--ink-dim);
    font-family:'Space Mono',monospace;font-size:.68rem;padding:6px 10px;border-radius:16px;cursor:pointer;
  }
  .mode-tab.active{border-color:var(--brass);color:var(--brass);background:#232a38;}
  .nav-icons{display:flex;gap:8px;}
  .nav-icon{
    background:var(--bg-panel);border:1px solid var(--line);color:var(--ink);
    font-size:1.05rem;width:34px;height:34px;border-radius:50%;cursor:pointer;
    display:flex;align-items:center;justify-content:center;transition:border-color .15s, transform .1s;
  }
  .nav-icon:hover{border-color:var(--brass);background:#232a38;}
  .nav-icon:active{transform:scale(.92);}
  .navbar-toggle{
    background:var(--bg-panel);border:1px solid var(--line);border-top:none;color:var(--ink-dim);
    width:38px;height:16px;border-radius:0 0 10px 10px;cursor:pointer;font-size:.65rem;line-height:1;
  }
  .navbar-toggle:hover{color:var(--brass);}

  .wrap{width:100%;max-width:520px;padding:24px 16px 60px;}
  
/* Cabeçalho: logo (dial), título e legenda do jogo */
header{text-align:center;margin-bottom:14px;position:relative;}
  .dial-mark{
    width:64px;height:64px;margin:0 auto 6px;border:2px solid var(--brass-dim);border-radius:50%;position:relative;
    background:conic-gradient(from 0deg, #00000000 0deg, #00000000 350deg, var(--brass) 350deg);
    animation:spin 26s linear infinite;
  }
  .dial-mark::before{
    content:"";position:absolute;top:50%;left:50%;width:3px;height:22px;background:var(--brass);
    transform:translate(-50%,-100%);box-shadow:0 0 6px var(--brass);
  }
  @keyframes spin{to{transform:rotate(360deg);}}
  h1{font-family:'Bebas Neue', sans-serif;letter-spacing:3px;font-size:2.6rem;margin:4px 0 2px;color:var(--ink);}
  h1 span{color:var(--brass);}
  .tagline{color:var(--ink-dim);font-size:.82rem;letter-spacing:.5px;}
  .mode-current{color:var(--brass);font-size:.68rem;letter-spacing:1px;margin-top:6px;}

  .player-row{display:flex;align-items:center;justify-content:center;gap:8px;margin:16px 0 6px;font-size:.75rem;color:var(--ink-dim);}
  .player-row input{
    background:var(--bg-panel);border:1px solid var(--line);color:var(--brass);
    font-family:'Space Mono',monospace;font-size:.78rem;padding:5px 8px;border-radius:5px;width:150px;text-align:center;
  }

  
/* Cartão com a narrativa do banco do dia + o widget do cofre ao lado */
.briefing-row{display:flex;gap:10px;align-items:stretch;margin:14px 0;}
  .briefing{flex:1;background:var(--bg-panel);border:1px solid var(--line);border-left:3px solid var(--brass);border-radius:6px;padding:14px 16px;}
  .briefing .bank-name{font-family:'Bebas Neue', sans-serif;font-size:1.3rem;letter-spacing:1px;color:var(--brass);}
  .briefing .bank-city{color:var(--ink-dim);font-size:.75rem;margin-bottom:6px;}
  .briefing .flavor{font-size:.85rem;line-height:1.5;color:var(--ink);opacity:.9;}

  .vault-widget{
    width:74px;flex-shrink:0;background:var(--bg-panel);border:1px solid var(--line);border-radius:6px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  }
  .vault-door{
    width:42px;height:42px;border-radius:50%;background:#0d1016;border:3px solid var(--brass-dim);
    display:flex;align-items:center;justify-content:center;font-size:1.3rem;transition:transform .6s ease, border-color .4s ease;
  }
  .vault-door.opened{border-color:var(--success);transform:rotateY(35deg) scale(1.05);}
  .vault-light{width:10px;height:10px;border-radius:50%;background:#3a4150;transition:background .15s ease, box-shadow .15s ease;}
  .vault-light.blink-red{background:var(--crimson);box-shadow:0 0 10px var(--crimson);}
  .vault-light.on-green{background:var(--success);box-shadow:0 0 10px var(--success);}
  .vault-light.blink-siren{animation:vaultsiren .5s steps(1) infinite;}
  @keyframes vaultsiren{0%,100%{background:var(--crimson);box-shadow:0 0 10px var(--crimson);} 50%{background:var(--police-blue);box-shadow:0 0 10px var(--police-blue);}}

  
/* Barra de 'tentativas restantes' (alarme) e cronômetro */
.alarm-row{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
  .alarm-label{font-size:.7rem;color:var(--ink-dim);letter-spacing:1px;white-space:nowrap;}
  .alarm-bar{flex:1;height:8px;background:#00000055;border:1px solid var(--line);border-radius:4px;overflow:hidden;}
  .alarm-fill{height:100%;background:linear-gradient(90deg, var(--success), var(--brass) 60%, var(--crimson));transition:width .4s ease;}
  .timer-row{text-align:center;font-size:.72rem;color:var(--ink-dim);margin-bottom:14px;letter-spacing:1px;}
  .timer-row span{color:var(--brass);font-weight:700;}

  
/* Tabuleiro: linhas de tentativas e casas de dígitos */
.board{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;min-height:40px;}
  .row{display:flex;gap:5px;justify-content:center;}
  .cell{
    flex:1 1 0;width:100%;max-width:var(--cell-max);aspect-ratio:1/1;border-radius:8px;border:2px solid var(--line);
    display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:700;
    position:relative;background:var(--bg-panel);transition:transform .3s ease, background .3s ease, border-color .3s ease;
  }
  .row.active .cell{cursor:pointer;}
  .row.active .cell:hover{border-color:var(--brass-dim);}
  .row.active .cell.cursor{border-color:var(--brass);box-shadow:0 0 0 2px #c9a22755;}
  .cell.filled{border-color:#4a5568;}
  .cell.correct{background:var(--success);border-color:var(--success);color:#0e1712;}
  .cell.present{background:var(--brass);border-color:var(--brass);color:#221c04;}
  .cell.absent{background:#2a3040;border-color:#2a3040;color:var(--ink-dim);}
  .arrow{position:absolute;bottom:2px;right:4px;font-size:.65rem;line-height:1;}
  /* Símbolo (além da cor) em cada casa, pra quem tem daltonismo distinguir certo/existe/errado */
  .state-symbol{position:absolute;top:2px;left:4px;font-size:.62rem;line-height:1;opacity:.85;font-weight:400;}
  /* Foco visível pra navegação por teclado (Tab) em botões e casas clicáveis */
  .nav-icon:focus-visible,
  .mode-tab:focus-visible,
  .key:focus-visible,
  .row.active .cell:focus-visible,
  .modal-close:focus-visible,
  .btn:focus-visible{
    outline:2px solid var(--brass);
    outline-offset:2px;
  }

  .tap-hint{text-align:center;color:var(--ink-dim);font-size:.66rem;margin-bottom:10px;opacity:.75;}
  .hidden-input{position:absolute;opacity:0;height:1px;width:1px;pointer-events:none;}

  
/* Botões de APAGAR e ABRIR (a digitação em si é feita clicando nas casas) */
.keypad{display:flex;gap:8px;justify-content:center;margin-bottom:10px;}
  .key{
    background:var(--bg-panel);border:1px solid var(--line);color:var(--ink);
    font-family:'Space Mono', monospace;font-weight:700;font-size:.8rem;letter-spacing:.5px;border-radius:6px;
    padding:13px 22px;cursor:pointer;transition:background .15s ease, transform .1s ease;
  }
  .key:hover{background:#2a3040;}
  .key:active{transform:scale(.94);}
  .key.submit{background:var(--brass-dim);border-color:var(--brass);}
  .key.submit:hover{background:var(--brass);color:#221c04;}
  .key:disabled{opacity:.35;cursor:not-allowed;}

  .hint-line{text-align:center;color:var(--ink-dim);font-size:.72rem;margin:4px 0 16px;min-height:1.4em;}

  .legend{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;font-size:.68rem;color:var(--ink-dim);margin-top:6px;}
  .legend span{display:inline-flex;align-items:center;gap:5px;}
  .swatch{width:10px;height:10px;border-radius:2px;display:inline-block;}

  
/* ---------- Efeitos de vitória/derrota (tela cheia) ---------- */
.fx-overlay{position:fixed;inset:0;pointer-events:none;z-index:80;opacity:0;transition:opacity .18s ease;}
  .fx-overlay.flash-red{background:var(--crimson);opacity:.35;}
  .fx-overlay.siren{animation:sirenbg .5s steps(1) infinite;opacity:.5;}
  @keyframes sirenbg{0%,100%{background:var(--crimson);} 50%{background:var(--police-blue);}}
  .fx-overlay.tint-green{background:radial-gradient(circle at 50% 30%, #4f9a6f66, #12151cbb 72%);opacity:1;}

  .money-layer{position:fixed;inset:0;pointer-events:none;z-index:82;overflow:hidden;}
  .bill{position:absolute;top:-40px;font-size:1.7rem;animation:fall linear forwards;}
  @keyframes fall{to{transform:translateY(112vh) rotate(360deg);}}

  .bars-overlay{position:fixed;inset:0;display:flex;justify-content:space-evenly;pointer-events:none;z-index:85;}
  .bars-overlay .bar{width:5%;max-width:22px;background:linear-gradient(180deg,#3a4150,#0a0c10);height:0;transition:height .9s cubic-bezier(.2,.9,.3,1);box-shadow:0 0 14px #000c;}
  .bars-overlay.show .bar{height:100%;}

  .vault-fx-msg{
    position:fixed;top:38%;left:50%;transform:translate(-50%,-50%);z-index:90;text-align:center;
    font-family:'Bebas Neue',sans-serif;letter-spacing:2px;pointer-events:none;opacity:0;transition:opacity .4s ease;
    width:90%;max-width:400px;
  }
  .vault-fx-msg.show{opacity:1;}
  .vault-fx-msg.win{color:#eafff0;font-size:2.1rem;text-shadow:0 0 24px var(--success);}
  .vault-fx-msg.lose{color:#fff0ef;font-size:1.9rem;text-shadow:0 0 24px var(--crimson);}

  footer{margin-top:26px;color:var(--ink-dim);font-size:.65rem;text-align:center;opacity:.6;}

  
/* ============================================================
   Popups (Como jogar, Progresso, Ranking, Sobre)
   ============================================================ */
.modal-overlay{display:none;position:fixed;inset:0;background:#0a0c11cc;align-items:center;justify-content:center;padding:20px;z-index:95;}
  .modal-overlay.show{display:flex;}
  .modal-panel{background:var(--bg-panel);border:1px solid var(--brass-dim);border-radius:10px;padding:22px 20px;max-width:440px;width:100%;max-height:86vh;overflow-y:auto;position:relative;}
  .modal-close{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--ink-dim);font-size:1.2rem;cursor:pointer;line-height:1;}
  .modal-close:hover{color:var(--brass);}
  .modal-title{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:1px;color:var(--brass);margin:0 0 4px;text-align:center;}
  .modal-sub{text-align:center;color:var(--ink-dim);font-size:.78rem;margin-bottom:16px;}

  .example-row{margin-bottom:16px;}
  .example-cells{display:flex;gap:6px;margin-bottom:6px;}
  .example-cells .cell{width:42px;max-width:42px;height:42px;font-size:1.1rem;flex:none;}
  .example-text{font-size:.78rem;color:var(--ink-dim);line-height:1.4;}
  .example-text b{color:var(--ink);}
  .rules-note{font-size:.75rem;color:var(--ink-dim);line-height:1.6;margin-top:14px;border-top:1px solid var(--line);padding-top:12px;}

  .end-title{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;letter-spacing:1px;margin-bottom:4px;text-align:center;}
  .end-title.win{color:var(--success);}
  .end-title.lose{color:var(--crimson);}
  .end-code{letter-spacing:4px;font-size:1rem;color:var(--brass);margin:4px 0 14px;text-align:center;word-break:break-word;}
  .share-box{background:#00000040;border:1px dashed var(--line);border-radius:6px;padding:10px;font-size:.72rem;white-space:pre-line;margin-bottom:14px;text-align:left;}
  .btn{background:var(--brass-dim);border:1px solid var(--brass);color:var(--ink);padding:9px 16px;border-radius:6px;font-family:'Space Mono',monospace;font-weight:700;cursor:pointer;font-size:.75rem;margin:0 4px;display:inline-block;text-decoration:none;}
  .btn:hover{background:var(--brass);color:#221c04;}
  .btn-row{text-align:center;margin-bottom:18px;}

  .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center;margin-bottom:18px;}
  .stats-grid .num{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;color:var(--ink);}
  .stats-grid .lbl{font-size:.6rem;color:var(--ink-dim);letter-spacing:.4px;}

  .dist-title{font-size:.7rem;color:var(--ink-dim);letter-spacing:1px;text-align:center;margin-bottom:10px;}
  .dist-row{display:flex;align-items:center;gap:8px;margin-bottom:5px;font-size:.72rem;}
  .dist-label{width:16px;text-align:center;color:var(--ink-dim);}
  .dist-bar-wrap{flex:1;background:#00000033;border-radius:3px;overflow:hidden;height:18px;}
  .dist-bar{height:100%;background:var(--brass-dim);display:flex;align-items:center;justify-content:flex-end;padding-right:6px;color:var(--ink);font-size:.68rem;min-width:18px;}
  .dist-bar.current{background:var(--success);}

  .countdown-row{text-align:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);}
  .countdown-row .lbl{font-size:.68rem;color:var(--ink-dim);letter-spacing:.5px;}
  .countdown-row .val{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;color:var(--brass);letter-spacing:2px;}

  .ranking-note{font-size:.68rem;color:var(--ink-dim);margin-bottom:12px;text-align:center;}
  .ranking-toggle{display:flex;justify-content:center;gap:8px;margin-bottom:10px;}
  .ranking-toggle-btn{
    background:none;border:1px solid var(--line);color:var(--ink-dim);
    font-family:'Space Mono',monospace;font-size:.72rem;padding:6px 16px;border-radius:16px;cursor:pointer;
  }
  .ranking-toggle-btn.active{border-color:var(--brass);color:var(--brass);background:#232a38;}
  table.rank-table{width:100%;border-collapse:collapse;font-size:.76rem;}
  table.rank-table th{color:var(--ink-dim);font-weight:400;text-align:left;padding:4px 6px;border-bottom:1px solid var(--line);font-size:.64rem;letter-spacing:.5px;}
  table.rank-table td{padding:6px;border-bottom:1px solid #232a38;}
  table.rank-table tr:first-child td{color:var(--brass);font-weight:700;}
  .empty-rank{color:var(--ink-dim);font-size:.78rem;padding:14px 0;text-align:center;}

  
/* Popup Sobre: foto, nome e links do criador */
.about-avatar{
    width:88px;height:88px;border-radius:50%;margin:0 auto 14px;background:var(--bg-deep);border:2px solid var(--brass-dim);
    display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:1.8rem;color:var(--brass);overflow:hidden;
  }
  .about-name{text-align:center;font-family:'Bebas Neue',sans-serif;font-size:1.3rem;color:var(--ink);letter-spacing:1px;}
  .about-role{text-align:center;font-size:.72rem;color:var(--ink-dim);margin-bottom:14px;}
  .about-bio{font-size:.8rem;line-height:1.6;color:var(--ink);opacity:.9;margin-bottom:14px;}
  .about-links{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;}
  .about-links a{color:var(--brass);font-size:.75rem;text-decoration:none;border:1px solid var(--brass-dim);padding:6px 12px;border-radius:20px;}
  .about-links a:hover{background:var(--brass);color:#221c04;}