/* MODELO MELHOR 5 — PONTE DE COMANDO DA NAVE (20/10/2026): a tela é a cabine; o cenário 3D aparece pela janela da nave,
   a conta fica numa tela inclinada à esquerda, ganhadores/ranking à direita, salas no console de baixo e os atalhos como teclas.
   Só CSS: a parede da cabine é um contorno (outline) gigante em volta da janela — mais leve que box-shadow. */
#menu { --mw: 100%; --ui-panel: rgba(6, 12, 30, 0.92); --ui-panel2: rgba(63, 224, 255, 0.05); --ui-line: rgba(63, 224, 255, 0.25); --ui-line2: rgba(63, 224, 255, 0.55);
  --ui-acc: #3fe0ff; --ui-gold: #ffc83a; --ui-ospks: #a77bff; --ui-mut: #8fb4c8; --hud: 'Chakra Petch', 'Fredoka', sans-serif; --side: 300px;
  justify-content: flex-start; }
/* janela da cabine (o que fica fora dela vira a parede escura da nave) */
#menu::before { content: ''; position: fixed; left: calc(var(--side) + 46px); right: calc(var(--side) + 46px); top: 10px; height: 50vh; z-index: -2; pointer-events: none;
  border-radius: 22px 22px 90px 90px; outline: 150vmax solid #070b1d; border: 3px solid var(--ui-line2); box-shadow: inset 0 0 40px rgba(63, 224, 255, 0.2); }
/* console de baixo */
#menu::after { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 47vh; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, #17224a 0%, #0b1028 55%, #060918 100%); clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 2px 0 var(--ui-line2); }
#menu .ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
#menu .logo { margin-top: 18px; filter: drop-shadow(0 0 14px rgba(63, 224, 255, 0.45)); }
#menu .sub { font-family: var(--hud); letter-spacing: 1px; color: #e4f8ff; text-shadow: 0 1px 2px #000, 0 2px 10px rgba(0, 0, 0, 0.9); }
/* telas: painéis com cantos cortados */
#menu .card, #menu .menu-side .winners { background: var(--ui-panel); border: 1px solid var(--ui-line); border-radius: 0;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  box-shadow: inset 0 1px 0 var(--ui-line2), inset 0 0 40px rgba(63, 224, 255, 0.05); backdrop-filter: none; }
/* conta = tela inclinada à esquerda; salas = console no centro, embaixo */
#menu .menu-wrap { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: var(--side) minmax(0, 1fr) var(--side); grid-template-rows: minmax(0, 1fr) auto;
  width: 100%; max-width: none; gap: 12px 40px; padding: 0 8px; pointer-events: none; }
#menu .menu-wrap > * { pointer-events: auto; }
#menu .menu-wrap .menu-card { grid-column: 1; grid-row: 1 / span 2; align-self: center; transform: perspective(1000px) rotateY(14deg); transform-origin: 0 50%; }
#menu .menu-wrap .rooms-card { grid-column: 2; grid-row: 2; max-width: none; }
#menu .rooms-list { max-height: 150px; }
/* ganhadores/ranking = tela inclinada à direita */
#menu > .menu-side { top: 24vh; right: 14px; width: var(--side); transform: perspective(1000px) rotateY(-14deg); transform-origin: 100% 50%; }
/* atalhos = teclas do console, embaixo de tudo */
#menu .hub-row { order: 3; width: min(980px, calc(100% - 640px)); min-width: 560px; gap: 8px; margin: 4px auto 10px; }   /* cabe entre o chat (esq.) e o aviso de teste (dir.) */
#menu .hub-row > button { font-size: 13px !important; letter-spacing: .8px !important; white-space: nowrap; overflow: hidden; }
#menu .hub-row > button { display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px; border-radius: 0; font-family: var(--hud); font-size: 15px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.4px; animation: none; box-shadow: none;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
#menu .hub-row .hub-btn.hub-big { flex: 1.4 1 0; background: var(--ui-acc); color: #00151f; border: 0; }
#menu .hub-row .hub-btn.hub-big small { color: #00151f; }
#menu .hub-row .shop-btn { background: #0b1430; border: 1px solid var(--ui-line2); color: #e6f9ff; }
#menu .hub-row .shop-btn:hover { background: rgba(63, 224, 255, 0.16); filter: none; }
#menu .hub-row .shop-btn .ico { color: var(--ui-acc); } #b-shop .ico { color: var(--ui-gold) !important; }
/* textos HUD */
#menu .sec-title { font-family: var(--hud); color: var(--ui-acc); font-size: 12px; letter-spacing: 3px; }
#menu .rooms-title, #menu .rooms-title.dia, #menu .rooms-title.test { font-family: var(--hud); color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; }
#menu .rooms-title small { font-family: 'Fredoka', sans-serif; color: var(--ui-mut); text-transform: none; letter-spacing: 0; }
#menu .room { background: var(--ui-panel2); border: 1px solid var(--ui-line); border-left: 3px solid var(--ui-acc); border-radius: 0; }
#menu .create-bar .btn, #menu .create-bar .btn.sol.hl { animation: none; border-radius: 0; font-family: var(--hud); text-transform: uppercase; letter-spacing: 1px; box-shadow: none; }
#menu .create-bar .btn.coin { background: var(--ui-gold); color: #241600; }
#menu .create-bar .btn.sol, #menu .create-bar .btn.sol.hl { background: var(--ui-ospks); color: #fff; }
#menu .create-bar #b-create { background: transparent; border: 1px solid var(--ui-line2); color: var(--ui-acc); }
#menu .create-bar .entry-in { border-radius: 0; background: rgba(0, 0, 0, 0.35); border-color: var(--ui-line); }
#menu .acct .a-wallet { background: var(--ui-panel2); border: 1px solid var(--ui-line); border-radius: 0; }
#menu .acct .a-wallet .btn { border-radius: 0; }
#menu .acct .a-wallet .btn.coin { background: var(--ui-gold); color: #241600; border: 0; box-shadow: none; }
#menu .acct .a-wallet .btn.sol { background: var(--ui-ospks); color: #fff; border: 0; box-shadow: none; }
#menu #b-inv { background: var(--ui-acc); color: #00151f; border: 0; border-radius: 0; box-shadow: none; animation: none; font-family: var(--hud); text-transform: uppercase; }
#menu .menu-card > .row .btn { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; border-radius: 0; white-space: nowrap; }
#menu .menu-card > .row .btn .ico { width: 16px; height: 16px; color: var(--ui-acc); }
#menu .menu-card .lbl, #menu .menu-side .winners .wn-title { font-family: var(--hud); color: var(--ui-acc); letter-spacing: 2px; text-transform: uppercase; }
#menu .maps-strip { display: none; }
body:has(#menu:not(.hidden)) .test-mode { top: auto; bottom: 14px; left: auto; right: 14px; transform: none; }
/* ---- ajuste do David (20/10/2026): telas dos lados mais para cima, fee em quadrado pequeno, salas mais para baixo ---- */
#menu .menu-wrap { display: block; width: 0; height: 0; flex: none; margin: 0; padding: 0; }
/* tela da esquerda (conta): logo abaixo do topo */
#menu .menu-wrap .menu-card { position: fixed; left: 14px; top: 66px; z-index: 4; width: var(--side); max-height: calc(100vh - 140px); overflow-y: auto; align-self: auto; }
/* tela da direita (ganhadores e ranking): logo abaixo do topo */
#menu > .menu-side { top: 66px; }
/* fee: quadrado pequeno à direita, embaixo da tela de ganhadores/ranking */
#menu > .tk-bar { position: fixed; right: 14px; top: 352px; z-index: 3; zoom: 1; width: 210px; margin: 0; padding: 9px 10px 8px; gap: 3px;
  background: var(--ui-panel); border: 1px solid var(--ui-line); border-radius: 0; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow: inset 0 1px 0 var(--ui-line2); }
#menu > .tk-bar > * { min-width: 0; }
#menu > .tk-bar .tk-head { gap: 2px 8px; }
#menu > .tk-bar .tk-name { font-family: var(--hud); font-size: 14px; }
#menu > .tk-bar .tk-head .tk-big { font-size: 19px; }
#menu > .tk-bar .tk-head small, #menu > .tk-bar .tk-timers { display: none; }
#menu > .tk-bar .tk-fee { font-size: 11.5px; }
#menu > .tk-bar .tk-feev { display: block; font-size: 17px; margin: 0; }
#menu > .tk-bar .tk-feeusd { font-size: 11px; margin-top: -1px; }
#menu > .tk-bar .tk-line { font-size: 10.5px; gap: 6px; }
#menu > .tk-bar .tk-pct { font-size: 12px; }
#menu > .tk-bar .tk-track { height: 6px; margin: 3px 0; }
#menu > .tk-bar .tk-btns { flex-direction: row !important; flex-wrap: nowrap; gap: 3px; }
#menu > .tk-bar .tk-btns .tk-buy { flex: 1 1 0; min-width: 0; max-width: none; padding: 4px 2px; font-size: 10px; border-radius: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#menu > .tk-bar .tk-cn { display: none; }
#menu > .tk-bar.hot::before { top: -11px; font-size: 9px; padding: 2px 8px; }
/* teclas logo abaixo da janela da nave; salas descem para a parte de baixo do console */
#menu .hub-row { position: fixed; top: calc(10px + 50vh + 10px); left: calc(var(--side) + 46px); right: calc(var(--side) + 46px); z-index: 4; zoom: 1; width: auto; min-width: 0; margin: 0; }
#menu .menu-wrap .rooms-card { position: fixed; left: calc(var(--side) + 46px); right: calc(var(--side) + 46px); top: calc(10px + 50vh + 74px); bottom: 10px; z-index: 4; width: auto; max-height: none; overflow-y: auto; }   /* janela de salas maior: mesma largura da janela da nave e dos botões, do fim dos botões até o fundo */
#menu .hub-row > button { min-width: 0; }
#menu .hub-row .hub-btn.hub-big > span { overflow: hidden; text-overflow: ellipsis; }
#menu .rooms-list { max-height: 110px; }
/* letras menores na janela de salas: cabem 5 salas à vista sem mudar o tamanho da janela (pedido do David, 22/10/2026) */
#menu .menu-wrap .rooms-card { gap: 6px; padding: 10px 12px; }
#menu .rooms-card .sec-title { font-size: 10.5px; letter-spacing: 2px; }
#menu .rooms-card .rooms-title, #menu .rooms-card .rooms-title.dia, #menu .rooms-card .rooms-title.test { font-size: 11.5px; }
#menu .rooms-card .rooms-title small { font-size: 10px; }
#menu .rooms-card .rooms-col + .rooms-col { margin-top: 2px; padding-top: 6px; }
#menu .rooms-card .rooms-list { max-height: none; gap: 3px; }
#menu .rooms-card .room.clean { gap: 8px; padding: 3px 8px; grid-template-columns: 48px minmax(0, 1fr) auto auto auto auto; }
#menu .rooms-card .room.clean .rc, #menu .rooms-card .room.clean .rn, #menu .rooms-card .room.clean .rv { font-size: 12.5px; }
#menu .rooms-card .room.clean .rk { font-size: 10px; padding: 0 6px; }
#menu .rooms-card .room.clean .rq { font-size: 11px; }
#menu .rooms-card .room.clean .btn, #menu .rooms-card .room.clean button { font-size: 11px; padding: 3px 10px; }
#menu .rooms-card .empty-rooms { font-size: 11.5px; padding: 2px 0; }
#menu .rooms-split .create-col { gap: 4px; }
#menu .rooms-split .create-col .create-bar .btn, #menu .rooms-split .create-col .create-bar .btn.sol.hl { height: 30px; font-size: 11px; }
#menu .rooms-split .create-col .create-bar .entry-in { height: 26px; font-size: 10.5px; margin-bottom: 2px; }
#menu .rooms-split .create-col .create-bar .entry-in input { height: 20px; font-size: 11px; }
/* tela estreita: sem cabine, uma coluna */
@media (max-width: 1100px) {
  #menu .menu-wrap { display: grid; width: 100%; height: auto; }
  #menu .menu-wrap .menu-card, #menu .menu-wrap .rooms-card, #menu > .tk-bar, #menu .hub-row { position: static; width: 100%; max-height: none; }
  #menu::before, #menu::after { display: none; }
  #menu .menu-wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  #menu .menu-wrap .menu-card, #menu .menu-wrap .rooms-card { grid-column: 1; grid-row: auto; transform: none; }
  #menu > .menu-side { transform: none; }
}

/* ===== teclas do console (Praça · Loja · Caixas · Expedição) — mesmo formato, mais acabamento (24/10/2026) =====
   cada tecla tem a sua cor (--k), um quadradinho com o ícone, o subtítulo embaixo do nome e cara de tecla (borda clara em cima, funda embaixo) */
#menu .hub-row { gap: 10px; }
#menu .hub-row > button { --k: var(--ui-acc); position: relative; height: 54px; display: grid !important; grid-template-columns: 36px auto auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 1px;
  align-content: center; justify-content: center; align-items: center; text-align: left; padding: 0 14px; isolation: isolate;
  transition: transform .14s ease, background-color .14s, border-color .14s, box-shadow .14s; }
#menu .hub-row > button > .ico { grid-row: 1 / span 2; width: 36px !important; height: 36px !important; padding: 8px; box-sizing: border-box; color: var(--k) !important;
  background: color-mix(in srgb, var(--k) 16%, transparent); border: 1px solid color-mix(in srgb, var(--k) 45%, transparent);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
#menu .hub-row > button > span { grid-column: 2; grid-row: 1; line-height: 1.05; }
#menu .hub-row > button > #b-hub-n { grid-column: 3; grid-row: 1; font-size: 10.5px; letter-spacing: 0; opacity: .85; }
#menu .hub-row > button > .hb-sub { display: block !important; grid-column: 2 / span 2; grid-row: 2; font-family: 'Fredoka', sans-serif; font-size: 10.5px; font-weight: 500; letter-spacing: .2px;
  text-transform: none; line-height: 1.1; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* cores de cada tecla */
#menu .hub-row #b-shop { --k: var(--ui-gold, #ffd84a); }
#menu .hub-row #b-box { --k: #c58bff; }
#menu .hub-row #b-exp { --k: #7cff6b; }
/* teclas escuras: fundo com leve degradê, filete da cor em cima e borda funda embaixo */
#menu .hub-row .shop-btn { background: linear-gradient(180deg, color-mix(in srgb, var(--k) 9%, #0e1838), #08102a) !important; border: 1px solid color-mix(in srgb, var(--k) 30%, var(--ui-line2)) !important;
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--k) 70%, transparent), inset 0 -3px 0 rgba(0, 0, 0, .45) !important; color: #eef8ff; }
#menu .hub-row .shop-btn > span { color: #fff; }
#menu .hub-row .shop-btn { top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important; }   /* o .shop-btn antigo tem top/left 14px: com position relative vira deslocamento */
/* Praça = tecla principal (cheia) */
#menu .hub-row .hub-btn.hub-big { background: linear-gradient(180deg, #6cecff, var(--ui-acc) 55%, #1fb8e0) !important; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(0, 40, 60, .35) !important; }
#menu .hub-row .hub-btn.hub-big > .ico { color: #00151f !important; background: rgba(255, 255, 255, .35); border-color: rgba(0, 21, 31, .25); }
#menu .hub-row .hub-btn.hub-big > .hb-sub { opacity: .75; color: #00151f; }
/* passar o mouse: sobe, acende na cor da tecla e passa um brilho; clicar: afunda */
#menu .hub-row > button::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%); transform: translateX(-60%); }
#menu .hub-row > button:hover, #menu .hub-row > button.hv { transform: translateY(-2px); }
#menu .hub-row > button:hover::after, #menu .hub-row > button.hv::after { opacity: 1; transform: translateX(60%); transition: transform .5s ease, opacity .2s; }
#menu .hub-row .shop-btn:hover, #menu .hub-row .shop-btn.hv { border-color: var(--k) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--k) 22%, #0e1838), color-mix(in srgb, var(--k) 8%, #08102a)) !important; }
#menu .hub-row > button:hover > .ico, #menu .hub-row > button.hv > .ico { filter: drop-shadow(0 0 6px var(--k)); }
#menu .hub-row .hub-btn.hub-big:hover { filter: brightness(1.08); }
#menu .hub-row > button:active { transform: translateY(1px); }
#menu .hub-row > button > .hb-sub { margin: 0 !important; padding: 0 !important; }
@media (min-width: 1501px) { #menu .menu-wrap .rooms-card { top: calc(10px + 50vh + 80px); } }   /* teclas 6px mais altas: a janela de salas desce junto */
/* tela mais estreita: some o subtítulo para não espremer */
@media (max-width: 1500px) { #menu .hub-row > button > .hb-sub { display: none !important; } #menu .hub-row > button { height: 48px; grid-template-rows: auto; column-gap: 8px; padding: 0 8px; }
  #menu .hub-row > button > .ico { grid-row: 1; width: 30px !important; height: 30px !important; padding: 6px; } }
/* centralizado: ícone + (nome em cima do subtítulo) como um bloco no meio da tecla; contador de online da Praça vira selo no canto */
#menu .hub-row > button { grid-template-columns: 36px auto !important; justify-content: center !important; justify-items: center; }
#menu .hub-row > button > span, #menu .hub-row > button > .hb-sub { text-align: center; justify-self: center; }
#menu .hub-row > button > .hb-sub { grid-column: 2 !important; }
#menu .hub-row > button > .ico { justify-self: end; }
#menu .hub-row > button > #b-hub-n { position: absolute; top: 4px; right: 10px; grid-column: auto; grid-row: auto; font-size: 10px; }
#menu .hub-row > button > #b-hub-n:empty { display: none; }

/* ===== INVERTIDO (pedido do David, 27/10/2026): logo no topo, teclas e salas logo abaixo dele e a janela da nave (o jogo) embaixo, menor =====
   --ktop = onde começam as teclas (logo de 2 linhas + subtítulo), --rh = altura da janela de salas, --wtop = onde começa a janela do jogo */
@media (min-width: 1101px) {
  #menu { --ktop: calc(56px + min(6vw, 8vh, 72px) * 1.55); --rh: 34vh; --wtop: calc(var(--ktop) + 64px + var(--rh) + 10px); }
  #menu::before { top: var(--wtop); bottom: 10px; height: auto; border-radius: 90px 90px 22px 22px; }
  #menu::after { top: 0; bottom: auto; height: calc(var(--wtop) - 6px); clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
    background: linear-gradient(0deg, #17224a 0%, #0b1028 55%, #060918 100%); box-shadow: inset 0 -2px 0 var(--ui-line2); }
  #menu .hub-row { top: var(--ktop); }
  #menu .menu-wrap .rooms-card { top: calc(var(--ktop) + 64px); bottom: auto; height: var(--rh); }
  /* coluna da direita: ranking em cima, fee logo abaixo (o main.js põe o fee colado no fim do ranking) */
  #menu > .menu-side { position: fixed; top: var(--ktop); right: 14px; left: auto; width: var(--side); }
  /* perfil (esq.) e ranking (dir.) começam na mesma altura das teclas Praça / Market / Caixas / Expedição */
  #menu .menu-wrap .menu-card { top: var(--ktop); max-height: calc(100vh - var(--ktop) - 20px); }
  #menu > .tk-bar { right: 14px; left: auto; width: var(--side); box-sizing: border-box; }
}
@media (min-width: 1501px) { #menu .menu-wrap .rooms-card { top: calc(var(--ktop) + 70px); } }

/* ===== 🌌 MENU NO ESPAÇO (29/10/2026): sem a janela da nave e sem o painel escuro — o espaço 3D ocupa a página inteira
   e a janela de salas desce até o fim da tela (com muitas salas, rola dentro dela) ===== */
@media (min-width: 1101px) {
  #menu::before, #menu::after { display: none; }
  #menu .menu-wrap .rooms-card { top: calc(var(--ktop) + 64px); bottom: 14px; height: auto; max-height: none; overflow-y: auto; }
  #menu .rooms-card .rooms-list { max-height: none; }
}
@media (min-width: 1501px) { #menu .menu-wrap .rooms-card { top: calc(var(--ktop) + 70px); } }
/* 📐 perfil (esq.) e ranking (dir.) alinhados (29/10/2026): a inclinação 3D parte da borda de CIMA — a borda de cima fica reta,
   na mesma linha das teclas Praça / Market / Caixas / Expedição, não importa a altura de cada painel */
@media (min-width: 1101px) {
  #menu .menu-wrap .menu-card { transform-origin: 0 0; }
  #menu > .menu-side { transform-origin: 100% 0; }
}

/* ===== 🎮 LETRA DE JOGO (04/11/2026): a fonte do HUD (teclas, títulos e botões do menu) passa a ser a letra de jogo (Lilita One, ver style.css).
   As cores não mudam; contorno escuro só nas letras claras (tecla Praça, Inventário e botões dourados têm letra escura: ficam sem contorno) ===== */
#menu { --hud: var(--gfont); }
#menu .sub, #menu .sec-title, #menu .rooms-title, #menu .menu-card .lbl, #menu .menu-side .winners .wn-title, #menu > .tk-bar .tk-name { text-shadow: var(--gtxt); }
#menu .rooms-title small { text-shadow: none; }
#menu .hub-row .hub-btn.hub-big, #menu #b-inv, #menu .create-bar .btn.coin, #menu .acct .a-wallet .btn.coin { text-shadow: none; }