/* Página inicial em painel de cartões (menu.js). Cada seção é uma carta emoldurada, com a arte numa janela, como numa carta de verdade.
   Sem luz de cursor, sem borda girando, sem vidro: moldura dupla, cantos com losango, tinta e ouro chapados (gab, 01/10/2026: "tire a cara de IA").
   Grade ancorada (12 colunas no desktop, 6 no tablet, 1 no celular), área segura e foco visível. Movimento em hero.js. */
.menu.hub{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr auto;row-gap:clamp(12px,2vh,22px);align-items:start;min-height:calc(100vh - 90px);
 padding:clamp(14px,2.4vh,28px) max(clamp(16px,4.5vw,72px),env(safe-area-inset-right)) max(clamp(16px,2.6vh,28px),env(safe-area-inset-bottom)) max(clamp(16px,4.5vw,72px),env(safe-area-inset-left))}
.hub small{letter-spacing:normal}
/* Grade */
.hubPanels{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(150px,auto);grid-auto-flow:row dense;gap:clamp(10px,1.2vw,16px);min-width:0}
.hubCard.size-hero{grid-column:span 5;grid-row:span 2}
.hubCard.size-tall{grid-column:span 3;grid-row:span 2}
.hubCard.size-small{grid-column:span 4}
.hubCard.size-wide{grid-column:1/-1;--win:0%;--artH:0px}
.hubCard.size-wide .cardArt{display:none}
/* Carta: fundo de tinta, fio externo escuro, fio interno de ouro e losangos nos cantos */
.hubCard{--ink:#110c16;--line:#e8c98b33;--frame:#3b2c3c;--pad:16px;--win:40%;--pulse:0;position:relative;isolation:isolate;display:flex;flex-direction:column;gap:10px;min-width:0;
 padding:var(--pad);border-radius:6px;background:var(--ink);border:1px solid var(--frame);
 box-shadow:0 18px 30px -22px #000,0 0 0 calc(var(--pulse) * 2px) var(--gold);transition:transform .25s cubic-bezier(.22,1,.36,1),border-color .2s}
.hubCard[hidden]{display:none}
.hubCard::before{content:'';position:absolute;inset:5px;border:1px solid var(--line);border-radius:3px;pointer-events:none;z-index:1;transition:border-color .2s}
.hubCard::after{content:'';position:absolute;inset:1px;pointer-events:none;z-index:2;
 --d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0 10 5 5 10 0 5z' fill='%23e8c98b'/%3E%3C/svg%3E");
 background:var(--d) 0 0/9px no-repeat,var(--d) 100% 0/9px no-repeat,var(--d) 0 100%/9px no-repeat,var(--d) 100% 100%/9px no-repeat;opacity:.75}
.hubCard:hover,.hubCard:focus-within{border-color:#6a5038;transform:translateY(-2px)}
.hubCard:hover::before,.hubCard:focus-within::before{border-color:#e8c98b66}
/* Janela da arte: um retrato com moldura, à direita; cortes retos, sem sumir no fundo */
.cardArt{position:absolute;top:12px;right:12px;height:var(--artH);width:var(--win);z-index:0;border-radius:2px;background:#0a070d no-repeat 50% 18%/cover;
 box-shadow:0 0 0 1px #e8c98b55,0 0 0 4px var(--ink),0 0 0 5px #e8c98b22;filter:saturate(1.05) brightness(1.08);transition:filter .3s}
.hubCard:hover .cardArt,.hubCard:focus-within .cardArt{filter:none}
.hubCard:not(.hasArt){--win:0%;--artH:0px}
.hubCard.size-small{--artH:118px}
.cardGlow{display:none}
/* Cabeçalho: título grande, sem ícone */
.cardHead{position:relative;z-index:3;min-width:0;min-height:calc(var(--artH,0px) - 4px);padding-right:calc(var(--win) + 10px)}
.hubCard:is(.size-hero,.size-tall,.size-wide) .cardHead{min-height:0;padding-right:0}
.cardIcon{display:none}
.cardHead h3{margin:0;font:700 clamp(26px,2.2vw,32px)/1 var(--e-display,Georgia,serif);color:#f3e8d0;letter-spacing:.005em}
.cardHead p{margin:6px 0 0;font-size:15px;line-height:1.4;color:#b3a3bd;max-width:32em;text-wrap:pretty}
/* Botões: uma lista com fios, como um índice; só o principal é um botão cheio */
.hubTiles{position:relative;z-index:3;display:flex;flex-direction:column;margin-top:auto}
.hubTile{position:relative;display:grid;grid-template-columns:20px minmax(0,1fr) auto auto;align-items:center;gap:10px;min-height:44px;padding:8px 6px;text-align:left;width:100%;
 border:0;border-top:1px solid #e8c98b1f;border-radius:0;background:transparent;color:#efe5d1;cursor:pointer;touch-action:manipulation;transition:color .15s,background-color .15s}
.hubTile:first-child,.hubTile.primary+.hubTile{border-top:0}
.hubTile:hover:not(.soon),.hubTile:focus-visible{background:#e8c98b0d;color:var(--gold)}
.hubTile:active:not(.soon){background:#e8c98b18}
.hubTile:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.hubTile[hidden]{display:none}
.tIcon{width:20px;height:20px;display:grid;place-items:center;color:#c9ab74}
.tIcon svg{width:18px;height:18px}
.tText{min-width:0}
.tText b{display:block;font:500 17px/1.2 var(--e-body,system-ui)}
.tText small{display:block;color:#a998b4;font-size:14px;line-height:1.3;margin-top:2px}
.tInfo{display:block;font:500 14px var(--e-body,system-ui);font-variant-numeric:tabular-nums;color:#a8c9a0;margin-top:1px}.tInfo:empty{display:none}
.hubTile .tGo{color:#8e7a63;font-size:16px;transition:transform .2s cubic-bezier(.22,1,.36,1),color .15s}
.hubTile:hover .tGo,.hubTile:focus-visible .tGo{transform:translateX(3px);color:var(--gold)}
/* Na lista, a descrição dos itens secundários fica só para leitores de tela */
.hubCard .hubTile:not(.primary) .tText small{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Principal: ouro chapado com fio de carimbo por dentro */
.hubTile.primary{grid-template-columns:24px minmax(0,1fr) auto auto;min-height:58px;margin:0 0 6px;padding:10px 14px;border:0;border-radius:4px;color:#1d1218;background:#e3c27f;
 box-shadow:inset 0 0 0 3px #e3c27f,inset 0 0 0 4px #1d121840,0 6px 14px -8px #000}
.hubTile.primary:hover,.hubTile.primary:focus-visible{background:#edd197;box-shadow:inset 0 0 0 3px #edd197,inset 0 0 0 4px #1d121855,0 8px 18px -8px #000;color:#1d1218}
.hubTile.primary:active{transform:translateY(1px)}
.hubTile.primary .tIcon{width:24px;height:24px;color:#1d1218}.hubTile.primary .tIcon svg{width:20px;height:20px}
.hubTile.primary .tText b{font-weight:700;font-size:18px}
.hubTile.primary .tText small{color:#4a3324}
.hubCard:not(.size-hero) .hubTile.primary .tText small{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hubTile.primary .tInfo{color:#3f4d26}
.hubTile.primary .tGo{color:#1d1218}
.hubTile.primary:focus-visible{outline:2px solid #fff3d6;outline-offset:2px}
/* Em breve: texto apagado e aviso escrito, sem pílula */
.hubTile.soon{cursor:default;color:#8a7c93}
.hubTile.soon .tIcon{color:#6f6278}
.hubTile.soon .tGo{font:italic 400 14px var(--e-body,system-ui);color:#8a7c93;text-transform:lowercase}
/* Leque de cartas no botão principal */
.tFan{position:relative;width:62px;height:44px}
.tFan i{position:absolute;right:calc(var(--i) * 9px);top:50%;width:28px;height:40px;border-radius:2px;background:#120c16 no-repeat 50% 22%/cover;border:1.5px solid #1d1218;box-shadow:0 3px 6px #0006;
 translate:0 -50%;rotate:calc((var(--i) - 1) * 6deg);transform-origin:50% 120%;transition:rotate .35s cubic-bezier(.22,1,.36,1)}
.hubTile:hover .tFan i,.hubTile:focus-visible .tFan i{rotate:calc((var(--i) - 1) * 13deg)}
/* Jogar: carta grande. A arte fica no alto, de ponta a ponta; o texto e os botões embaixo. */
.hubCard.size-hero{--win:0%;--artH:clamp(140px,13vw,200px);padding:calc(var(--artH) + 26px) var(--pad) var(--pad)}
.size-hero .cardArt{left:12px;width:auto;bottom:auto;height:var(--artH);background-position:50% 35%}
.size-hero .cardHead{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap}
.size-hero .cardHead h3{font-size:clamp(34px,2.8vw,44px)}
.size-hero .cardHead p{margin:0;flex:1 1 220px}
.size-hero .hubTiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));column-gap:14px}
.size-hero .hubTile.primary{grid-column:1/-1;min-height:64px}
.size-hero .hubTile.primary .tText b{font-size:21px}
.size-hero .hubTile:not(.primary){border-top:0}
/* Novas Cartas: a arte ocupa a maior parte; lacre vermelho no canto da janela */
.hubCard.size-tall{--win:0%;--artH:clamp(180px,17vw,260px);padding:calc(var(--artH) + 26px) var(--pad) var(--pad)}
.size-tall .cardArt{left:12px;width:auto;bottom:auto;height:var(--artH);background-position:50% 15%}
.sec-news .cardHead::before{content:'Novo';position:absolute;z-index:4;bottom:calc(100% + 20px);right:-2px;width:56px;height:56px;display:grid;place-items:center;rotate:-12deg;
 font:700 17px/1 var(--e-display,Georgia,serif);color:#f6e2c6;background:radial-gradient(circle at 38% 35%,#c4313f,#8d1424 70%);border-radius:47% 53% 50% 50%/52% 46% 54% 48%;
 box-shadow:inset 0 0 0 4px #a11c2c,inset 0 0 0 5px #f6e2c633,0 4px 8px #0008}
/* Loja: o item principal mantém o tom roxo do shop.css, chapado */
.hubTile.menuShop{background:#3a2240!important;color:#f1ecdf;box-shadow:inset 0 0 0 3px #3a2240,inset 0 0 0 4px #e8c98b55}
.hubTile.menuShop .tText small{color:#d9c6dd}.hubTile.menuShop .tIcon,.hubTile.menuShop .tGo{color:var(--gold)}.hubTile.menuShop .tInfo{color:#a8c9a0}
/* Rodapé e aviso */
.hubFoot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px}
.hubFoot #record{margin:0}
.hubToast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));translate:-50% 0;z-index:1200;padding:10px 18px;border-radius:4px;background:#1d1624;border:1px solid #e8c98b66;color:#f1ecdf;font-size:15px;box-shadow:0 10px 30px #000b;pointer-events:none}
.hub .artCaption{display:none}
/* Tablet: 6 colunas */
@media(max-width:1180px){.hubPanels{grid-template-columns:repeat(6,minmax(0,1fr))}.hubCard.size-hero{grid-column:span 6;grid-row:span 1;--artH:200px}.hubCard.size-tall{grid-column:span 3;grid-row:span 2}.hubCard.size-small{grid-column:span 3}}
/* Celular: uma coluna */
@media(max-width:760px){
 .menu.hub{min-height:calc(100dvh - 76px);row-gap:12px;padding:12px max(14px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
 .hubPanels{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;gap:12px}
 .hubCard.size-hero,.hubCard.size-tall,.hubCard.size-small,.hubCard.size-wide{grid-column:1;grid-row:auto}
 .hubCard{--pad:14px;--win:32%}
 .hubCard.size-hero{--artH:160px}
 .hubCard.size-tall{--artH:220px}
 .size-hero .hubTiles{grid-template-columns:minmax(0,1fr)}
 .hubFoot .menuFoot{font-size:14px;gap:14px}
}
/* Sem movimento */
@media(prefers-reduced-motion:reduce){.hubCard,.hubTile,.tFan i,.cardArt,.hubTile .tGo{transition:none}.hubCard:hover,.hubCard:focus-within{transform:none}.hubTile:hover .tFan i{rotate:calc((var(--i) - 1) * 6deg)}}
.reduced .hubCard,.reduced .hubTile,.reduced .tFan i,.reduced .cardArt{transition:none}
.reduced .hubCard:hover,.reduced .hubCard:focus-within{transform:none}
/* Antes da abertura (hero.js) */
#menu.preIntro .hubCard,#menu.preIntro .heroMark span,#menu.preIntro .hubFoot{opacity:0}
/* Conectar ao servidor (account.js) */
.serverDialog{max-width:560px}
.serverForm label{display:block;margin:14px 0 6px;color:#decede;font-size:16px}
.serverForm input{display:block;width:100%;margin-top:8px;padding:12px;font:inherit;color:#f1ecdf;background:#120d18;border:1px solid #62526b;border-radius:6px}
.srvState{font-size:15px;margin:10px 0 0;color:#c4b4cc}
.srvState[data-ok='1']{color:#a8d79a}.srvState[data-ok='0']{color:#f0a3ad}
.srvHow{margin-top:18px;color:#c4b4cc;font-size:15px;line-height:1.6}
.srvHow summary{cursor:pointer;color:var(--gold)}
.srvHow code{background:#ffffff12;padding:1px 6px;border-radius:4px}

/* Cartão inteiro clicável (02/10/2026): o botão que será acionado acende, e o cartão mostra a mãozinha. */
.hubCard.aiming{cursor:pointer}
.hubTile.aim:not(.soon):not(.primary){background:#e8c98b0d;color:var(--gold)}
.hubTile.aim:not(.soon):not(.primary) .tGo{transform:translateX(3px);color:var(--gold)}
.hubTile.primary.aim{background:#edd197;box-shadow:inset 0 0 0 3px #edd197,inset 0 0 0 4px #1d121855,0 8px 18px -8px #000;color:#1d1218}
.hubCard.aiming:not(.size-wide)::before{border-color:#e8c98bb0}
.hubTile.aim .tGo{transform:translateX(5px)}
/* Hover igual em todos os botões dos cartões (Leo, 02/10/2026): sem linha divisória que só aparecia nos botões de baixo; todos acendem do mesmo jeito, com um filete dourado embaixo. */
#menu .hubTile,#menu .hubTile:first-child,#menu .hubTile.primary+.hubTile{border-top:0}
#menu .hubTile:not(.primary){box-shadow:inset 0 -1px 0 transparent;transition:color .15s,background-color .15s,box-shadow .2s}
#menu .hubTile:not(.primary):hover:not(.soon),#menu .hubTile:not(.primary):focus-visible{box-shadow:inset 0 -1px 0 #e8c98b99}

/* Cartão inteiro clicável (seção com whole:true) */
.hubCard.whole{cursor:pointer}
.hubCard.whole .hubTile{cursor:pointer}