/* Menu inicial (DESIGN.md, "Menu inicial"). Atrás, o mapa real roda uma partida de demonstração (menu-ui.mjs,
   startAttract) com a câmera derivando devagar. À esquerda, o logo de verdade: o "0" de tecido recortado da própria arte
   (assets/logo-0-*.webp, scripts/logo-recorte.py) pousa sobre o mapa vivo; o nome fica em texto ao lado, sempre legível
   (sem glitch, sem letras trocadas). À direita, o menu tipográfico. Passo "setup": a preparação, sem rolar no celular deitado.
   Exceção documentada: o logo é a assinatura e pode ter luz própria aqui (a pupila respira); o resto só se move com evento. */
#intro.title-screen{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:hidden;color:var(--ink)}
#intro.title-screen[open]{display:grid;grid-template-columns:minmax(0,1fr) clamp(320px,44vw,440px)}
#intro.title-screen::backdrop{background:#07141933;backdrop-filter:none;-webkit-backdrop-filter:none}
/* Vinheta: escurece as bordas do mapa em volta do logo; o centro do mapa continua à vista. */
#intro.title-screen::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 70% 90% at 30% 50%,#07141900 35%,#071419d9 100%)}
#intro.title-screen>*{position:relative;z-index:1}
/* Por trás do menu, só o mapa: o HUD da partida some e a câmera deriva. */
body:has(#intro[open]) :is(.command-bar,.edge-button,.cycle,.news-ticker,#news-ticker,#economy-pulse,#compact-response,.map-controls,#zoom-in,#zoom-out,#zoom-reset,#live-event,#tip,#warning,#research-map-key){visibility:hidden}
body:has(#intro.title-screen[open]) #world-map{animation:attract-drift 70s ease-in-out infinite alternate}
body:has(#intro.title-screen[open]) :is(#map-nodes,#map-pins,#map-connections){display:none}
@keyframes attract-drift{from{transform:scale(1.1) translate(1%,1%)}to{transform:scale(1.32) translate(-5%,-2%)}}

/* Marca: o "0" do logo e, ao lado, o nome. A altura do logo manda; o nome entra no vão à direita do "0"
   (o canto de cima à direita do recorte é só o brilho), longe das raízes, que saem por baixo. */
.title-brand{--logo-h:min(80vh,330px);display:flex;align-items:center;min-width:0;padding:0 8px max(28px,env(safe-area-inset-bottom)) max(18px,calc(env(safe-area-inset-left) + 2vw))}
.title-logo{position:relative;flex:none;height:var(--logo-h);aspect-ratio:842/937;animation:logo-in 1.2s cubic-bezier(.16,1,.3,1) both}
.title-logo img{display:block;width:100%;height:100%}
/* A pupila respira: um brilho lento sobre o miolo aceso do recorte (44,1% × 48,8%, medido pelo script). */
.title-pupil{position:absolute;left:44.1%;top:48.8%;width:17%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#ffe3ad 0,#ffb15c80 30%,#ff7a2e00 70%);mix-blend-mode:screen;opacity:.15;animation:pupil-breathe 5.6s ease-in-out infinite alternate}
@keyframes pupil-breathe{to{opacity:.55}}
@keyframes logo-in{from{opacity:0;transform:scale(.96)}}
/* O nome passa por cima do mapa vivo (países e pontos da demonstração): uma sombra de lâmina, sem brilho, segura a leitura. */
.title-words{flex:none;min-width:0;margin:0 0 0 calc(var(--logo-h) * -.12 - 16px);padding:16px 20px 16px 16px;background:radial-gradient(farthest-side,#071419d9 55%,#07141900)}
#title-name{margin:0;font:600 clamp(40px,6vw,64px)/.9 var(--display);letter-spacing:.015em;color:var(--ink);white-space:nowrap}
/* O "0" na fonte mono (na Barlow ele lia como a letra O), em tecido quente: é o mesmo zero do logo. */
#title-name .title-zero{font-family:'IBM Plex Mono',monospace;font-weight:500;color:var(--tissue-hot)}
/* Frase, não rótulo: sem caixa alta espaçada, quebra em duas linhas se não couber ao lado do 0. */
.title-tag{max-width:16em;margin:8px 0 0;font:600 14px/1.3 var(--body);color:var(--ink-soft)}
/* Telemetria da partida de demonstração: discreta, no pé da coluna; o nó de tecido diz que a IA está rodando. */

/* Menu à direita: lâmina escura, tipográfico, sem caixas. Seleção em tinta com sublinhado e seta (laranja não é cor de
   interface); "Continuar" leva o nó aceso porque há uma partida em curso. */
.title-panel{display:flex;flex-direction:column;justify-content:safe center;min-height:0;padding:max(14px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) 36px;background:linear-gradient(270deg,#071419f7 0%,#071419e0 62%,#07141900 100%);overflow-y:auto}
.title-menu,.first-options{display:grid}
.title-option{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;min-height:58px;padding:8px 4px 8px 22px;border:0;border-top:1px solid var(--rule);border-radius:0;background:none;color:var(--ink);text-align:left;cursor:pointer}
.title-option:last-child{border-bottom:1px solid var(--rule)}
.title-option[hidden]{display:none}
.title-option span{grid-column:1;font:600 24px/1.1 var(--display);text-transform:uppercase;letter-spacing:.02em;text-decoration:underline 1px transparent;text-underline-offset:5px;transition:text-decoration-color .2s}
.title-option small{grid-column:1;margin-top:2px;font:400 12px/1.3 var(--body);color:var(--ink-soft)}
.title-chevron{grid-column:2;grid-row:1/3;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;color:var(--ink-faint);transition:color .2s,transform .25s cubic-bezier(.16,1,.3,1)}
.title-option:is(:hover,:focus-visible) span{text-decoration-color:var(--ink)}
.title-option:is(:hover,:focus-visible) .title-chevron{color:var(--ink);transform:translateX(4px)}
.title-option:focus-visible{outline:2px solid var(--tissue-core);outline-offset:-2px}
.title-option.is-primary .title-chevron{color:var(--ink)}
/* O ponto aceso marca a ação principal: Continuar com partida salva; sem ela, Nova simulação (menu-ui.mjs). */
.title-option.is-primary::before{content:'';position:absolute;left:4px;top:calc(50% - 4.5px);width:9px;height:9px;border-radius:50%;background:radial-gradient(circle,var(--tissue-core),var(--tissue) 55%,var(--tissue-deep));box-shadow:0 0 5px #ff7a2e80}
.title-menu .title-option{animation:menu-in .5s cubic-bezier(.16,1,.3,1) both}.title-menu .title-option:nth-child(2){animation-delay:.06s}.title-menu .title-option:nth-child(3){animation-delay:.12s}
@keyframes menu-in{from{opacity:0;transform:translateX(16px)}}
#intro[data-step=menu] .title-setup,#intro[data-step=setup] .title-menu{display:none}

/* Preparação: nome e dificuldade; iniciar leva ao mapa para tocar no país de origem. */
.title-setup{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "name" "diff" "start" "note";gap:10px;align-items:end;animation:menu-in .4s cubic-bezier(.16,1,.3,1) both}
.title-setup header{grid-area:head;display:flex;align-items:center;gap:10px}
.title-setup>.setup-field{grid-area:name}.difficulty-pick{grid-area:diff}.setup-start{grid-area:start}#intro-note{grid-area:note}
.setup-back{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--rule-strong,#3d5f66);border-radius:5px;background:transparent;color:var(--ink);cursor:pointer}
.setup-back svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#intro :is(.title-setup,.title-first) h2{margin:0;font:600 24px/1.1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:var(--ink)}
.setup-field{display:grid;gap:4px;font:600 12px/1.3 var(--body);color:var(--ink-soft)}
.setup-field input,.setup-field select{width:100%;min-height:44px;padding:0 12px;border:1px solid var(--rule-strong,#3d5f66);border-radius:5px;background:transparent;color:var(--ink);font:600 14px/1.2 var(--body)}
.setup-field select option{background:var(--slide)}
.setup-field input::placeholder{color:var(--ink-faint)}
.setup-field :is(input,select):focus-visible{outline:2px solid var(--tissue-core);outline-offset:1px}
.setup-back:focus-visible{outline:2px solid var(--tissue-core);outline-offset:2px}
.difficulty-pick{display:grid;gap:4px;min-width:0}.pick-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.pick-label{font:600 12px/1.3 var(--body);color:var(--ink-soft)}
.difficulty-pick label{position:relative;min-width:0;cursor:pointer}
.difficulty-pick input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
/* Escolha marcada: borda e traço de baixo em tinta (seleção não usa laranja). */
.pick-row label>span{display:grid;gap:2px;align-content:center;min-height:50px;padding:6px 10px;border:1px solid var(--rule);border-radius:5px;background:transparent;font:600 14px/1.2 var(--body);color:var(--ink-soft);transition:border-color .15s,color .15s}
.difficulty-pick small{font:400 11px/1.2 var(--body);color:var(--ink-faint)}
.difficulty-pick input:checked+span{border-color:var(--ink);color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
.difficulty-pick input:checked+span small{color:var(--ink-soft)}
.difficulty-pick input:focus-visible+span{outline:2px solid var(--tissue-core);outline-offset:2px}
/* Iniciar é o "armado" da tela: preenchido de tecido, o próximo toque desperta a IA. */
#intro .setup-start{display:grid;gap:2px;place-content:center;min-height:52px;border:0;border-radius:5px;background:var(--tissue);color:var(--on-tissue,#1a0a03);font:600 24px/1 var(--display);text-transform:uppercase;letter-spacing:.03em;box-shadow:none;cursor:pointer}
#intro .setup-start small{font:400 12px/1.3 var(--body);letter-spacing:0;text-transform:none;color:var(--on-tissue-soft,#3a1606)}
#intro .setup-start:hover{background:var(--tissue-hot)}
#intro .setup-start:focus-visible{outline:2px solid var(--tissue-core);outline-offset:2px}
#intro-note{font:400 11px/1.2 var(--body);color:var(--ink-faint)}
@media(max-height:420px){.title-panel{padding-left:24px}.title-setup{gap:6px 10px}.pick-row label>span{min-height:46px;padding:4px 7px}#intro .setup-start{min-height:46px}.title-option{min-height:54px}}
@media(max-width:700px) and (orientation:portrait){#intro.title-screen[open]{grid-template-columns:1fr;grid-template-rows:auto 1fr}.title-brand{--logo-h:min(34vh,220px);padding:28px 18px 36px}.title-panel{padding-left:18px;background:linear-gradient(0deg,#071419f7 60%,#07141900)}}
@media(prefers-reduced-motion:reduce){body:has(#intro.title-screen[open]) #world-map,.title-logo,.title-pupil,.title-menu .title-option,.title-setup,.title-first{animation:none!important}.title-option span,.title-chevron,.pick-row label>span{transition:none}}