/* ═══════════════════════════════════════════════════════════════════════════ Crown Circuit — visual Tiny Swords (Pixel Frog) REGRAS DE ESCALA (o pacote inteiro é modulado em 64 px): • Terreno e unidades: 1:1. A célula do jogo É o tile de 64 px. O frame de unidade tem 192×192 com o personagem (~52×71) centrado — então o sprite é desenhado numa caixa de 3×3 células CENTRADA na célula, transbordando de propósito. Espremer o frame de 192 px dentro da célula encolhe o boneco a um terço do tamanho: era esse o bug da versão anterior. • Construções e árvores: 1/2. Uma torre nativa mede 2×4 células; a 1:1 um punhado delas cobriria o tabuleiro. Meia escala é uma redução exata 2:1 (nearest-neighbor, sem borrão) e mantém a leitura tática. 9-SLICE: no pacote as peças de UI vêm espalhadas num grid de 64 px com gutters transparentes; tools/build-assets.py as remonta contíguas. O CSS usa `border-width` para o espaço do LAYOUT e `border-image-width` para a escala da ARTE — as duas são independentes, e a borda pinta ABAIXO do conteúdo, então a arte pode avançar sobre a área de texto sem escondê-lo. ═══════════════════════════════════════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box;margin:0} :root{ /* O cenário é a tela inteira. Não há mais "chrome" reservado: o painel virou janela flutuante POR CIMA do tabuleiro, então a célula é simplesmente o maior valor que faz a ilha (12×12 = campo 10×10 + o anel de praia) caber na menor dimensão da janela. A dimensão que sobra é preenchida pela água do , que é cenário também. O tile nativo é de 64 px, mas não há teto: `image-rendering:pixelated` mantém o pixel duro ao ampliar. */ --n:10; /* campo jogável — tem de bater com o N do main.js */ --tn:12; /* ilha = N + 2 (1 célula de praia de cada lado) */ --cell:min(calc(100vw / 12), calc(100dvh / 12)); --board:calc(var(--cell) * var(--tn)); --ink:#43301c; --ink-soft:#6f5233; --cream:#f4e3b6; --gold:#e8b448; --rust:#8e3225; --paper:url(assets/tiny-swords/ui/paper.png); --paper-dark:url(assets/tiny-swords/ui/paper-special.png); --btn-blue:url(assets/tiny-swords/ui/btn-blue.png); --btn-blue-down:url(assets/tiny-swords/ui/btn-blue-down.png); --btn-red:url(assets/tiny-swords/ui/btn-red.png); --btn-red-down:url(assets/tiny-swords/ui/btn-red-down.png); } html{-webkit-text-size-adjust:100%} body{ height:100dvh;overflow:hidden; /* a página nunca rola: o jogo é a tela */ /* A água do mar continua para além da ilha e cobre o que sobrar da janela. */ background:#0e3a4a url(assets/tiny-swords/game/water.png) 0 0/var(--cell) var(--cell) repeat; color:var(--ink); font:600 14px/1.45 "Segoe UI",Roboto,Arial,sans-serif; } .skip-link{position:absolute;left:8px;top:-90px;background:#fff;color:#111;padding:8px;z-index:999} .skip-link:focus{top:8px} /* Palco: a tela toda, com a ilha centrada. */ .stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center} /* Animação de sprite-sheet horizontal. ATENÇÃO ao jump-none: `steps(8)` amostra a posição em k/8 (0%, 12,5%, 25%…), mas os 8 frames de um sheet ficam em k/7 (0%, 14,28%, 28,57%…) — o resultado é o navegador parando ENTRE dois frames e desenhando meio boneco/meia árvore. `steps(8,jump-none)` amostra 0…100% inclusive, caindo exatamente nos frames. */ @keyframes frames{to{background-position:100% 0}} /* ══ JANELA FLUTUANTE ══════════════════════════════════════════════════════ O painel não divide mais a tela com o tabuleiro: ele flutua por cima. A fita do pacote (3-slice horizontal, 64 px de altura na arte) é a barra de título — arrasta-se por ela e o botão a minimiza. Minimizada, sobra só a fita e o cenário fica sem nada na frente. */ .hud{ position:fixed;z-index:40;top:12px;right:12px; width:min(380px, calc(100vw - 24px)); max-height:calc(100dvh - 24px); display:flex;flex-direction:column; filter:drop-shadow(0 8px 18px #04202b90); } .hud-bar{ display:flex;align-items:center;gap:9px; height:64px;flex:0 0 auto; border:0 solid transparent;border-left-width:56px;border-right-width:56px; border-image:url(assets/tiny-swords/ui/ribbon-red.png) 0 64 fill stretch; border-image-width:0 56px; image-rendering:pixelated; color:#fff3d2;font:800 19px/1 Georgia,"Times New Roman",serif; letter-spacing:.04em;text-shadow:2px 2px 0 #52201c; cursor:grab;touch-action:none;user-select:none; } .hud.dragging .hud-bar{cursor:grabbing} .hud-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .build-tag{color:#ffd9a3;font:700 10px/1 Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;opacity:.85} .hud-min{ margin-left:auto;flex:0 0 auto;width:30px;height:30px; background:#0000003d;border:2px solid #ffd9a370;border-radius:4px; color:#ffe9b8;font:800 13px/1 Arial,sans-serif;cursor:pointer; } .hud-min:hover{background:#00000066} .hud-min:focus-visible{outline:3px solid #ffe081;outline-offset:2px} /* O painel rola por dentro; quem não rola é a página. */ .hud-body{ flex:1 1 auto;min-height:0;overflow-y:auto; display:flex;flex-direction:column;gap:10px; padding:2px 4px 4px; } .hud.min .hud-body{display:none} .side{display:flex;flex-direction:column;gap:12px} /* ══ TABULEIRO: ilha de 12×12 tiles; o campo jogável 10×10 fica no miolo, com 1 célula de margem para a praia e para o transbordo das construções. ═══ */ .board{ position:relative; width:var(--board);height:var(--board); overflow:hidden; background:url(assets/tiny-swords/game/water.png) 0 0/var(--cell) var(--cell) repeat; box-shadow:0 10px 30px #04202bb0; image-rendering:pixelated; } .terrain{position:absolute;inset:0;display:grid;grid-template:repeat(var(--tn),var(--cell))/repeat(var(--tn),var(--cell))} /* Tilemap 9×6 de 64 px: o autotile da praia ocupa as colunas 0-3 / linhas 0-3. Só o tile (1,1) é o preenchimento; os índices 2 já carregam contorno de borda (o main.js escolhe o pedaço certo e injeta o background-position). A posição é percentual como o background-size, então escala junto com --cell. */ .tile{background:url(assets/tiny-swords/game/tilemap.png) 0 0/900% 600% no-repeat;image-rendering:pixelated} .sheep{ position:absolute;width:calc(var(--cell)*2);height:calc(var(--cell)*2); transform:translate(-50%,-50%); background:url(assets/tiny-swords/game/sheep.png) 0 0/600% 100% no-repeat; image-rendering:pixelated;animation:frames 1.6s steps(6,jump-none) infinite;pointer-events:none; } .play{position:absolute;left:var(--cell);top:var(--cell);width:calc(var(--cell)*var(--n));height:calc(var(--cell)*var(--n))} .grid{ display:grid;grid-template:repeat(var(--n),var(--cell))/repeat(var(--n),var(--cell)); width:100%;height:100%;touch-action:none; cursor:url(assets/tiny-swords/ui/cursor.png) 24 18,crosshair; } .cell{position:relative;min-width:0;min-height:0} body.phase-build .cell:hover{box-shadow:inset 0 0 0 3px #ffe081b0;z-index:20} .cell.trail::before{content:'';position:absolute;inset:22%;border-radius:50%;background:#fff0b055;pointer-events:none} /* Peças do tabuleiro. Tudo ancorado no rodapé da célula (as construções "pisam" no tile e crescem para cima), a 1/2 da escala nativa. */ .goal-mark,.start-mark,.cell.tower::after,.cell.trap::after,.decor{ position:absolute;pointer-events:none;image-rendering:pixelated; background-repeat:no-repeat;background-size:100% 100%; } .goal-mark,.start-mark,.cell.tower::after,.decor-tree{left:50%;bottom:0;transform:translateX(-50%)} /* castelo 320×256 -> 2,5×2 células */ .goal-mark{width:calc(var(--cell)*2.5);height:calc(var(--cell)*2);background-image:url(assets/tiny-swords/game/castle.png);font-size:0;z-index:2} /* quartel 192×256 -> 1,5×2 células */ .start-mark{width:calc(var(--cell)*1.5);height:calc(var(--cell)*2);background-image:url(assets/tiny-swords/game/barracks.png);font-size:0;z-index:2} /* torre 128×256 -> 1×2 células */ .cell.tower::after{content:'';width:var(--cell);height:calc(var(--cell)*2);background-image:url(assets/tiny-swords/game/tower.png);z-index:3} .cell.tower.cracked::after{filter:saturate(.45) brightness(.75)} /* barricada: a rocha já é 64×64 = 1 tile exato, então vai a 1:1 */ .cell.trap::after{content:'';inset:0;width:var(--cell);height:var(--cell);background-image:url(assets/tiny-swords/game/rock.png);z-index:3} /* Arbusto: frame 128×128 com o desenho pequeno e centrado -> caixa de 2×2 células centrada na célula, igual às unidades. Árvore: 192×256 a 1/2. */ .decor-bush{left:50%;top:50%;width:calc(var(--cell)*2);height:calc(var(--cell)*2);transform:translate(-50%,-50%);background-size:800% 100%;animation:frames 1.2s steps(8,jump-none) infinite;z-index:1} .decor-tree{width:calc(var(--cell)*1.5);height:calc(var(--cell)*2);background-size:800% 100%;animation:frames 1.4s steps(8,jump-none) infinite;z-index:2} .decor-bush.v1{background-image:url(assets/tiny-swords/game/bush1.png)} .decor-bush.v2{background-image:url(assets/tiny-swords/game/bush2.png)} .decor-bush.v3{background-image:url(assets/tiny-swords/game/bush3.png)} .decor-bush.v4{background-image:url(assets/tiny-swords/game/bush4.png)} .decor-tree.v1{background-image:url(assets/tiny-swords/game/tree1.png)} .decor-tree.v2{background-image:url(assets/tiny-swords/game/tree2.png)} /* ══ UNIDADES (1:1) ═══════════════════════════════════════════════════════ .agent/.enemy ocupam exatamente 1 célula e carregam a posição; o sprite e a sombra são caixas de 3×3 células centradas nessa célula — que é como o frame de 192 px do pacote foi desenhado para ser lido. */ .agents,.enemies-layer,.vision-layer,.fx-layer{position:absolute;inset:0;pointer-events:none} .enemies-layer{z-index:10} .agents{z-index:11} .vision-layer{z-index:9} .fx-layer{z-index:15} .agent,.mob{position:absolute;width:var(--cell);height:var(--cell);transition:left .12s linear,top .12s linear} .agent::before,.mob::before,.dot,.mob::after{ position:absolute;left:50%;top:50%; width:calc(var(--cell)*3);height:calc(var(--cell)*3); transform:translate(-50%,-50%); background-repeat:no-repeat;image-rendering:pixelated; } /* sombra: Shadow.png é 192×192, a mesma moldura do frame da unidade */ .agent::before,.mob::before{content:'';background-image:url(assets/tiny-swords/game/shadow.png);background-size:100% 100%} .dot{background-image:url(assets/tiny-swords/game/pawn-idle.png);background-size:800% 100%;animation:frames .8s steps(8,jump-none) infinite} .dot.running{background-image:url(assets/tiny-swords/game/pawn-run.png);background-size:600% 100%;animation:frames .55s steps(6,jump-none) infinite} .dot.flip{transform:translate(-50%,-50%) scaleX(-1)} .dot.dead{opacity:.3;filter:grayscale(1);animation:none} .agent.dead::before{opacity:.3} .dot.reached{filter:drop-shadow(0 0 6px #ffe27a) drop-shadow(0 0 3px #fff)} .dot.best{filter:drop-shadow(0 0 4px #ffe27a)} .mob::after{content:'';background-image:url(assets/tiny-swords/game/warrior-idle.png);background-size:800% 100%;animation:frames .8s steps(8,jump-none) infinite} .mob.flip::after{transform:translate(-50%,-50%) scaleX(-1)} .mob.running::after{background-image:url(assets/tiny-swords/game/warrior-run.png);background-size:600% 100%;animation:frames .55s steps(6,jump-none) infinite} .dot-label{position:absolute;left:50%;top:-9px;transform:translateX(-50%);z-index:3;padding:1px 4px;border-radius:3px;background:#1d2a20cc;color:#fff0c4;font:700 9px Arial,sans-serif;white-space:nowrap} .vision-cell{position:absolute;background:#ffe674;box-shadow:inset 0 0 0 2px #fff3a066} /* ══ EFEITOS ══════════════════════════════════════════════════════════════ */ .shot{ position:absolute;width:var(--cell);height:var(--cell); margin:calc(var(--cell)/-2) 0 0 calc(var(--cell)/-2); background:url(assets/tiny-swords/game/arrow.png) 0 0/100% 100% no-repeat; image-rendering:pixelated; transform:rotate(var(--ang)); animation:shot-fly .18s linear forwards; } @keyframes shot-fly{to{transform:translate(var(--dx),var(--dy)) rotate(var(--ang))}} .impact{ position:absolute;width:calc(var(--cell)*3);height:calc(var(--cell)*3); margin:calc(var(--cell)*-1.5) 0 0 calc(var(--cell)*-1.5); background:url(assets/tiny-swords/game/explosion.png) 0 0/800% 100% no-repeat; image-rendering:pixelated;animation:frames .48s steps(8,jump-none) forwards; } /* poeira no lugar do sangue: o pacote é cartunesco, respingo vermelho destoava */ .dust{ position:absolute;width:calc(var(--cell)*1.4);height:calc(var(--cell)*1.4); margin:calc(var(--cell)*-0.7) 0 0 calc(var(--cell)*-0.7); background:url(assets/tiny-swords/game/dust.png) 0 0/800% 100% no-repeat; image-rendering:pixelated;animation:frames .42s steps(8,jump-none) forwards; } /* ══ BARRA DE PROGRESSO (BigBar do pacote: base 3-slice + textura de enchimento) A base tem ~40 px transparentes antes da ponta desenhada; por isso a trilha invade a borda (inset negativo) e para no encaixe real do sulco. */ .phase-wrap{ position:relative;width:100%;height:48px;flex:0 0 auto; border:0 solid transparent;border-left-width:48px;border-right-width:48px; border-image:url(assets/tiny-swords/ui/bar-base.png) 0 64 fill stretch; border-image-width:0 48px; /* 64 -> 48 = escala uniforme de 0,75 */ image-rendering:pixelated; } .phase-track{position:absolute;inset:0 -15px;overflow:hidden} .phase-fill{ width:0;height:100%; background:url(assets/tiny-swords/ui/bar-fill.png) 0 0/48px 48px repeat-x; image-rendering:pixelated;transition:width .15s; } .status-line{margin-top:5px;text-align:center;color:#ffeaad;font:700 12px Georgia,serif;letter-spacing:.1em;text-shadow:1px 1px 2px #06222c} .status-line.success{color:#b6f08e} .status-line.evolving{color:#ffd36b} /* ── Voz do "professor": narração didática da evolução (frases completas) ── */ .coach{ margin:7px 0 2px;padding:8px 11px; border-left:3px solid #ffcf72;border-radius:4px; background:#0c2229cc;color:#e9f1d8; font:400 12.5px/1.5 Georgia,serif;text-align:left; } .coach:empty{display:none} .coach b{color:#ffd36b;font-weight:800} .coach i{color:#bfe0a8;font-style:italic} /* dica sob o card "Best distance": ensina o conceito de fitness */ .card-hint{margin-top:2px;font-size:9.5px;line-height:1.2;color:#9a6a3f;letter-spacing:.02em} /* modal "How evolution works" (base = .rank-box, papel escuro) */ .guide-box{width:min(620px,100%);max-height:92dvh;overflow:auto;text-align:left} .guide-lead{color:#f0e6c8;font-size:14px;line-height:1.55;margin:4px 0 12px} .guide-steps{margin:0 0 12px;padding-left:22px;display:flex;flex-direction:column;gap:9px} .guide-steps li{color:#e6dcc0;font-size:13px;line-height:1.5} .guide-steps b{color:#ffd86f} .guide-note{border:2px solid #6a6456;background:#ffffff12;border-radius:5px;padding:10px 12px;color:#e9dfc4;font-size:12.5px;line-height:1.55} .guide-note b{color:#ffb84d} /* ══ PAINÉIS (papel 9-slice, fatia de 32 px desenhada 1:1) ════════════════ */ .panel,.build-panel,.brain-panel,.rank-box,.overlay-box{ border:26px solid transparent; border-image:var(--paper) 32 fill stretch; border-image-width:32px; image-rendering:pixelated; color:var(--ink); } .panel{display:grid;grid-template-columns:repeat(3,1fr);gap:9px} .brain-panel{display:flex;flex-direction:column;gap:8px} .build-panel{display:none} body.phase-build .panel,body.phase-build .brain-panel{display:none} body.phase-build .build-panel{display:flex;flex-direction:column;gap:11px} body.phase-watch .build-panel{display:none} .brain-panel,.rank-box{border-image-source:var(--paper-dark);color:#f2e6c6} .brain-panel .build-hdr,.rank-box .rank-title{color:#ffeec0;text-shadow:1px 2px #2b2f38;border-color:#8f8878} .brain-panel .brain-sub,.rank-box .net-sub{color:#ddd6c0} .brain-live,.net-diagram{padding:8px;border:2px solid #4a4740;background:#182a2c;overflow:auto} .brain-empty{color:#e7d6ac;font-size:13px} .build-hdr,.list-hdr{ display:flex;align-items:center;justify-content:center;gap:8px; font:800 17px Georgia,serif;color:#7b3421;text-align:center; text-transform:uppercase;letter-spacing:.05em;text-shadow:1px 1px #ffe9a0; border-bottom:2px solid #c08c46;padding-bottom:8px; } .build-tip{text-align:center;color:var(--ink-soft);font-size:13.5px;line-height:1.55} .build-ai{ display:flex;gap:8px;align-items:flex-start;text-align:left; border:2px solid #b8813f;background:#fff2bd8c;padding:9px 11px; color:#5c3a1e;font-size:12.5px;line-height:1.5; } .build-ai .ico{width:26px;height:26px;margin-top:1px} .build-ai b{color:#b72f28} .budget{text-align:center;border:2px solid #b8813f;background:#fff2bd8c;padding:9px;color:#7a3520;font:700 15px Georgia,serif} .budget span{color:#b72f28;font-size:19px} .budget.empty span{color:#8d1f1c} /* ══ ÍCONES DO PACOTE (64 px desenhados a 32 = 1/2 exato) ═════════════════ */ .ico{display:inline-block;width:32px;height:32px;flex:0 0 auto;vertical-align:middle; background-size:100% 100%;background-repeat:no-repeat;image-rendering:pixelated} .ico-swords{background-image:url(assets/tiny-swords/ui/icon-swords.png)} .ico-hammer{background-image:url(assets/tiny-swords/ui/icon-hammer.png)} .ico-shield{background-image:url(assets/tiny-swords/ui/icon-shield.png)} .ico-x {background-image:url(assets/tiny-swords/ui/icon-x.png)} .ico-back {background-image:url(assets/tiny-swords/ui/icon-back.png)} .ico-play {background-image:url(assets/tiny-swords/ui/icon-play.png)} .ico-info {background-image:url(assets/tiny-swords/ui/icon-info.png)} .ico-wood {background-image:url(assets/tiny-swords/ui/icon-wood.png)} /* ══ FERRAMENTAS ══════════════════════════════════════════════════════════ */ .tool-grid{display:grid;grid-template-columns:1fr;gap:9px} .tool{ display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-areas:'ico name' 'ico desc'; column-gap:12px;align-items:center;min-height:78px;padding:10px 14px; border:12px solid transparent; border-image:var(--paper) 32 fill stretch; border-image-width:32px; image-rendering:pixelated; color:#4a2b18;cursor:pointer;text-align:left; } .tool:hover{filter:brightness(1.06)} .tool.on{border-image:var(--btn-blue) 64 fill stretch;border-image-width:32px;color:#fff7cf;text-shadow:1px 1px #23505f} .tool.on .tool-desc{color:#e2f1ec} /* Caixa QUADRADA: o frame do guerreiro é 192×192; numa caixa 46×52 ele esticava. */ .tool-ico{grid-area:ico;width:52px;height:52px;background:center bottom/contain no-repeat;image-rendering:pixelated} .tool-ico.tower{background-image:url(assets/tiny-swords/game/tower.png)} .tool-ico.trap {background-image:url(assets/tiny-swords/game/rock.png);background-size:80% auto} .tool-ico.enemy{background-image:url(assets/tiny-swords/game/warrior-idle.png);background-size:800% 100%;background-position:0 0;animation:frames .8s steps(8,jump-none) infinite} .tool-ico.erase{background-image:url(assets/tiny-swords/ui/icon-x.png);background-size:70% auto;background-position:center} .tool-name{grid-area:name;font:700 15px/1.2 Georgia,serif} .tool-desc{grid-area:desc;color:#7a5738;font-size:12px;line-height:1.35} /* ══ BOTÕES ═══════════════════════════════════════════════════════════════ A fatia é a célula cheia (64 px) porque o canto do botão do pacote tem raio grande — cortá-lo em 32 achataria o relevo. `border-image-width:32px` desenha essa fatia a 1/2 (redução exata), enquanto `border-width` (10px) é só o recuo do layout: assim o texto continua cabendo num botão de 64 px de altura. */ .btn{ display:flex;align-items:center;justify-content:center;gap:9px; width:100%;min-height:64px;padding:8px 16px; border:10px solid transparent; border-image:var(--btn-blue) 64 fill stretch; border-image-width:32px; image-rendering:pixelated; color:#fff6d0;font:800 15px Georgia,serif;letter-spacing:.05em; text-shadow:1px 2px #1b3d4a;cursor:pointer; } .btn:hover{filter:brightness(1.1)} .btn:active{border-image-source:var(--btn-blue-down)} .btn-red{border-image-source:var(--btn-red);text-shadow:1px 2px #5a1918} .btn-red:active{border-image-source:var(--btn-red-down)} .btn:focus-visible{outline:3px solid #ffe081;outline-offset:2px} .controls{grid-column:1/-1;display:flex;flex-direction:column;gap:9px;margin-top:2px} .speed-row{display:flex;align-items:center;justify-content:center;gap:10px;color:#6f3a21;font:700 13px Georgia,serif} .sdot{width:18px;height:18px;border:2px solid #8a5527;border-radius:50%;background:#ead291;padding:0;cursor:pointer} .sdot.on{background:#b23725;box-shadow:0 0 0 2px #f9e49c} /* ══ CARDS E LISTA ════════════════════════════════════════════════════════ */ .card{ padding:10px 6px;text-align:center; border:12px solid transparent; border-image:var(--paper) 32 fill stretch; border-image-width:32px; image-rendering:pixelated; } .card-label{font-size:11px;color:#7c502d;text-transform:uppercase;letter-spacing:.04em} .card-val{color:#8a2f20;font:800 24px Georgia,serif} .card-val.small{font-size:17px} .pop-list{ grid-column:1/-1;max-height:270px;overflow:auto; padding:2px 8px 6px; /* afasta as linhas da moldura do papel */ border:12px solid transparent; border-image:var(--paper) 32 fill stretch; border-image-width:32px; image-rendering:pixelated; } .list-hdr{font-size:13px;padding:0 0 7px;border-bottom:2px solid #c08c46;margin-bottom:4px} .list-row{display:flex;align-items:center;gap:6px;padding:6px 2px;border-top:1px solid #d7b77788;font-size:13px} .list-dot{width:11px;height:11px;border-radius:50%;border:1px solid #4a2b18;flex:0 0 auto} .list-name{width:96px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .list-bar-bg{flex:1;height:8px;background:#3c2a17;border:1px solid #6d4d27;overflow:hidden} .list-bar{height:100%;background:#c8452f} .list-dist{width:26px;text-align:right} .dead-row{opacity:.45} .reached-row{background:#d9f19b66} /* ══ CÉREBRO / REDE ═══════════════════════════════════════════════════════ */ .brain-sub,.net-sub{font-size:13px;text-align:center;color:#765033} .brain-sub span,.net-sub span{color:#a8342a;font-weight:800} .brain-panel .brain-sub span{color:#ffcf72} .net-svg{display:block;width:100%;min-width:430px} .net-svg .nl{fill:#f6e5bc;font:11px Arial,sans-serif} .net-svg .nv,.net-svg .nl.pick{fill:#ffd86f} .net-svg .cap{fill:#b9d2c6;font:700 10px Arial,sans-serif} /* neurônios clicáveis + tooltip da descrição (aparece ao clicar o input/output) */ .net-svg .tip-node{cursor:pointer} .net-tip{ position:fixed;z-index:9999;max-width:280px; padding:9px 11px;border:2px solid #4a4740;border-radius:6px; background:#182a2c;color:#f2e6c6; font:12px/1.45 Arial,sans-serif;box-shadow:0 6px 18px rgba(0,0,0,.5); pointer-events:none;opacity:0;transform:translateY(4px); transition:opacity .12s,transform .12s} .net-tip.show{opacity:1;transform:none} .net-legend{display:flex;flex-wrap:wrap;gap:8px 14px;margin:10px 0;font-size:12px} .net-legend span{display:flex;align-items:center;gap:5px} .sw{width:12px;height:12px;border:1px solid #402618} .sw.goal{background:#f4c856}.sw.wall{background:#477e9a}.sw.enemy{background:#b13c31} .sw.trap{background:#8a4f22}.sw.free{background:#62ae52} .ln{width:18px;border-top:3px solid} .ln.pos{border-color:#59ad63}.ln.neg{border-color:#c34438} .ln.off{border-top-style:dashed;border-color:#886f5c} .rank-header{border-bottom:2px solid #8f8878;padding-bottom:8px} .rank-title{text-align:center;font:800 19px Georgia,serif} .rank-footer{display:flex;justify-content:flex-end;margin-top:10px} .rank-footer .btn{width:auto;min-width:180px} /* ══ OVERLAYS ═════════════════════════════════════════════════════════════ */ .rank-overlay,.overlay{position:fixed;inset:0;z-index:50;background:#0a2a33d0;padding:18px;display:none;align-items:center;justify-content:center} .rank-box{width:min(850px,100%);max-height:92dvh;overflow:auto} .overlay-box{width:min(430px,100%);display:flex;flex-direction:column;gap:12px;text-align:center} .overlay-title{font:800 23px Georgia,serif;color:#7f2f22} .overlay-sub{color:#6b4527;font-size:14px} .overlay-sub span{color:#a8342a;font-weight:800} .gen-toast{ position:fixed;left:50%;top:14px;z-index:60; display:flex;align-items:center;justify-content:center; min-width:240px;height:64px; transform:translate(-50%,-14px);opacity:0; border:0 solid transparent;border-left-width:64px;border-right-width:64px; border-image:url(assets/tiny-swords/ui/ribbon-teal.png) 0 64 fill stretch; border-image-width:0 64px; image-rendering:pixelated; color:#fff4d4;font:800 14px Georgia,serif;text-shadow:1px 2px #24454f; transition:.2s;pointer-events:none; } .gen-toast.show{opacity:1;transform:translate(-50%,0)} /* ══ RESPONSIVO ═══════════════════════════════════════════════════════════ */ /* Não há mais layout em duas colunas: o cenário é sempre a tela inteira e a janela flutua por cima. No celular ela só encolhe. */ @media(max-width:640px){ .hud{top:8px;right:8px;width:min(340px, calc(100vw - 16px));max-height:calc(100dvh - 16px)} .hud-bar{font-size:15px;gap:7px;height:48px;border-left-width:44px;border-right-width:44px;border-image-width:0 44px} .hud-bar .ico{width:24px;height:24px} .build-tag{display:none} .dot-label{display:none} .panel{gap:7px} .card-val{font-size:19px} .btn{font-size:13px} } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} }