/* * Letrix — mecânica exclusiva (grade de células + seleção). A casca * genérica (topbar, badges, modais, stats, log) vem de ../shared/base.css; * as cores/tipografia vêm dos mesmos 4 temas do Letris * (../shared/styles/theme-{old,geral,infantil,terra}.css), trocados junto * com o dicionário via data-theme no — ver index.php e * public/js/theme.js. */ /* flex-basis dá uma largura de partida ao board-column (base.css só define flex:1 pro .side-panel — sem isso, antes da grade ter células o board-column colapsa pra largura de conteúdo zero, empurrando tudo pro canto esquerdo). */ .board-column{ flex: 1 1 400px; min-width: 280px; } /* base.css define min-width:180px pro .side-panel (genérico, pensado pro Letris) — 200px aqui porque os cards do Letrix (Dicionário, Fase, Pontuação/Tempo/Tempo total/Palavras) têm rótulos e valores um pouco mais largos, e 180px deixava alguns apertados demais em telas médias. */ .side-panel{ min-width: 200px; } .board-wrap{ position:relative; /* z-index:1 (com position:relative acima) — mesmo truque do .board-wrap do Letris, pelo mesmo motivo: sem um z-index PRÓPRIO (nem que seja 1), empilhamento de elementos posicionados com z-index:auto segue ordem no documento, não aninhamento visual. #score-stat/#progress-stat (no side-panel, position:relative só pela barra ::before de .stat-accent) vêm DEPOIS de .board-wrap no documento — sem isto, eles pintam por cima de qualquer coisa que escape da caixa de .board-wrap, incluindo o #win-card arrastado (ver makeDraggable() em game.js) e o .log (lista de palavras), fazendo o modal parecer "cortado"/transparente exatamente onde esses elementos ficam. Com o z-index explícito, .board-wrap (e tudo dentro dele, inclusive um card arrastado pra fora da própria caixa) passa a pintar como um bloco só, acima de qualquer irmão do side-panel com z-index:auto — não importa a posição no documento. min-height evita que .board-wrap colapse a quase-zero enquanto #grid ainda não tem células (antes do primeiro "Jogar") — sem altura própria, o #start-modal (position:absolute;inset:0 dentro de .board-wrap, ver base.css) fica confinado a essa altura quase-zero e o card centralizado nele acaba deslocado/cortado pro topo da página. */ z-index: 1; min-height: 320px; padding:14px; } /* Moldura/painel visual só aparece depois que a grade tem células de verdade (classe adicionada por renderGrid() em game.js). Antes disso (tela inicial, #start-modal aberto) .board-wrap fica só como caixa invisível de layout — sem isso, um painel escuro cheio (fundo + borda + sombra) aparecia atrás do modal, sem nenhuma grade pra "emoldurar" ainda, como um retângulo preto sem função. */ .board-wrap.has-grid{ background: var(--panel-texture, none), var(--bg-panel); border:1px solid var(--border); border-radius:6px; box-shadow: var(--card-shadow, 0 2px 6px rgba(0,0,0,.3)); } /* #start-modal é uma das duas telas sem nada de verdade atrás pra escurecer (é a primeira coisa que aparece) — sem o scrim padrão de .modal (82% opaco, ver base.css), que senão se soma ao painel acima e mistura numa mancha escura sólida sem propósito. Os demais modais (troca de campo, desistir, como jogar) mantêm o scrim padrão de propósito: eles cobrem um tabuleiro que não é o ponto de interesse do momento, faz sentido escurecer. #win-modal é a outra exceção — ver comentário dela abaixo. */ #start-modal{ background: transparent; /* .modal (base.css) centraliza verticalmente por padrão (align-items: center) — aqui trocado por flex-start pra o topo do .modal-card ficar alinhado com o topo do aside.side-panel ao lado, em vez de flutuar no meio da altura (que muda de tamanho dependendo da tela). */ align-items: flex-start; } /* #win-modal cobre um tabuleiro que ACABOU de virar o centro das atenções — palavras encontradas (douradas) ou reveladas por "Desistir" (apagadas, ver .ws-cell.revealed) — bem na hora em que o jogador mais quer ver o resultado. O scrim padrão de 82% escurecia justamente isso. Sem scrim nenhum (igual #start-modal) em vez de só diminuir a opacidade (como o #confirm-modal do Letris faz, a 40%): aqui não sobra nenhuma célula ainda "escondida" que precisasse ficar em segundo plano — está tudo às claras, então não há razão pra esmaecer nada. showRoundEnd() em game.js também dá uma pequena pausa antes de abrir este modal especificamente no caso de "Desistir", pra garantir que o tabuleiro revelado apareça limpo por um instante antes do card cobrir parte da tela. */ #win-modal{ background: transparent; } /* #win-card é arrastável (ver makeDraggable() em game.js) — complementa o scrim transparente acima: em telas menores, ou com um tabuleiro grande, o card ainda pode cobrir justamente a palavra que o jogador quer conferir. Arrastar deixa ele "espiar" por trás sem precisar fechar o modal. touch-action:none evita o navegador tentar rolar a página enquanto o dedo arrasta o card no touch (mesmo motivo de .ws-grid). cursor:grab/grabbing é o mesmo par de affordance usado em qualquer editor com elementos arrastáveis; :active também vira "grabbing" pra quem usa mouse e clica sem soltar antes do JS marcar .dragging. */ #win-card{ cursor: grab; touch-action: none; } #win-card:active, #win-card.dragging{ cursor: grabbing; user-select: none; } .ws-grid{ display:grid; gap:3px; touch-action:none; user-select:none; -webkit-user-select:none; } /* Mesmo raciocínio de .board-wrap.has-grid logo acima: sem células ainda (tela inicial), #grid é um
vazio — sem esta regra, o fundo/borda/padding dele sozinho já aparecia como uma barra escura atrás do modal, mesmo com .board-wrap já invisível. Só ganha moldura própria depois que .board-wrap vira .has-grid (ver renderGrid() em game.js). */ .board-wrap.has-grid .ws-grid{ background:var(--canvas-bg); border:1px solid var(--border); border-radius:var(--tile-radius); padding:6px; } .ws-cell{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; background:var(--bg-panel); color:var(--text); border-radius:calc(var(--tile-radius) - 1px); font-family:var(--font-type); font-weight:600; font-size:clamp(11px, 2.6vw, 18px); cursor:pointer; user-select:none; -webkit-user-select:none; transition: background .1s ease, color .1s ease; } .ws-cell.selecting{ background:var(--tile-active); color:var(--tile-text); } .ws-cell.found{ background:var(--found-bg, rgba(201,151,31,0.14)); color:var(--accent-ink); } .ws-cell.wrong{ background:var(--red-ink); color:#fff; animation: letrix-shake .25s ease; } /* Palavra revelada por "Desistir" (api/give_up.php) — precisa ser visualmente diferente de .found (dourado/destaque, "você achou") já que aqui é o oposto: "você não achou, foi mostrada". Tom neutro/apagado em vez de festivo, sem competir com .found nem com .selecting. */ .ws-cell.revealed{ background:var(--border); color:var(--muted); } @keyframes letrix-shake{ 0%, 100%{ transform:translateX(0); } 25%{ transform:translateX(-3px); } 75%{ transform:translateX(3px); } } /* Barra de destaque lateral, mesmo truque de #score-stat/#stage-stat em base.css (aqui como classe reutilizável, pra outros .stat que não usam esses ids específicos — ex. #progress-stat). #stage-stat em si (Fase) já ganha a barra de graça da regra de base.css, sem precisar desta classe — ver index.php. */ .stat-accent{ position:relative; overflow:hidden; } .stat-accent::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent-ink); } .modal-field{ text-align:left; margin:12px 0; } .modal-field label{ display:block; font-size:11px; color:var(--modal-muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; } .modal-field select{ width:100%; } /* #stage-indicator é um (fase é só leitura, não dá pra escolher — ver game.js), mas deve se parecer com um .stat-value comum (texto simples), não com um campo de formulário. Reseta a aparência nativa do (borda/fundo/padding) por cima do que .stat-value já define (fonte/cor/tamanho). */ #stage-indicator{ display:block; width:100%; border:none; background:transparent; padding:0; margin:0; cursor:default; } #stage-indicator:focus{ outline:2px solid var(--accent-ink); outline-offset:2px; } /* Palavra revelada por "Desistir" no log lateral — nem .pending (opacidade baixa, ainda por achar) nem .found (dourado, conquistada); itálico apagado, no mesmo espírito de #word-log li.repeated do Letris (palavra que não rendeu pontos). */ #word-log li.revealed{ opacity:.75; font-style:italic; color:var(--muted); } #word-log li.revealed span:first-child{ text-decoration:line-through; text-decoration-color:var(--muted); } /* #btn-give-up mora dentro de um .stat-row, ao lado de #lives-stat (ver index.php) — base.css só dá flex:1/min-width:0 pra filhos .stat de .stat-row (regra `.stat-row .stat`), não pra um