/* Roda de apoio · Dani Junco v2 — HUD e telas em fonte pixel, sem cobrir a cena. */
@font-face { font-family: 'Pixelify Sans'; src: url('./vendor/PixelifySans.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'DotGothic16'; src: url('./vendor/DotGothic16-latin.woff2') format('woff2'); font-display: swap; }

:root {
  --painel: rgba(38, 28, 52, .93);
  --painel2: rgba(24, 18, 34, .9);
  --borda: #f6e2c0;
  --texto: #fff4e2;
  --sec: #d8c6ea;
  --ambar: #ffc768;
  --rosa: #ff9ab8;
  --verde: #9ad88a;
  --marceneira: #e39a3b;
  --costureira: #e2557f;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #2a2238; color: var(--texto); font-family: 'Pixelify Sans', 'DotGothic16', system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
body { overscroll-behavior: none; user-select: none; -webkit-user-select: none; }
#jogo { position: fixed; inset: 0; width: 100vw; height: 100dvh; display: block; outline: none; }
#chuva { position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0; transition: opacity 1.5s; background: repeating-linear-gradient(105deg, transparent 0 22px, rgba(210,230,255,.22) 22px 24px, transparent 24px 46px); background-size: 200px 200px; animation: cai .45s linear infinite; }
#chuva.on { opacity: 1; }
@keyframes cai { from { background-position: 0 0; } to { background-position: -40px 200px; } }
.vinheta { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 55%, transparent 62%, rgba(20, 10, 30, .32) 100%); z-index: 1; }
button { font-family: inherit; }
kbd { display: inline-block; min-width: 1.6em; padding: 0 5px; margin: 0 2px; border: 2px solid #f6e2c0; border-bottom-width: 3px; border-radius: 4px; background: #3a2c4a; color: #fff; font: 12px/1.4 'Pixelify Sans', monospace; text-align: center; }
.mini { font-size: 11px; color: var(--sec); }
canvas.icone-px, .icone-px { image-rendering: pixelated; vertical-align: middle; }
/* números: DotGothic16 (dígitos 0/3/5/6/8/9 inequívocos), um pouco maiores que o texto em volta */
.num, #hud-hora, #hud-roda .of b, #hud-cli-n, #hud-extras, #hud-relogio .mini, #hud-roda > .mini, #hud-feira .clientes .mini, .res-numeros dd, .rot-tarefa .mais { font-family: 'DotGothic16', monospace; font-variant-numeric: tabular-nums; }
.num { font-size: 1.12em; letter-spacing: .02em; }

/* ---------- HUD ---------- */
#hud { position: fixed; left: 0; top: 0; right: 0; pointer-events: none; z-index: 3; padding: max(10px, env(safe-area-inset-top)) 116px 0 max(10px, env(safe-area-inset-left)); display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.hud-caixa { background: var(--painel); border: 2px solid var(--borda); border-radius: 4px; box-shadow: 0 3px 0 rgba(0,0,0,.35); padding: 6px 9px; }
#hud-relogio { display: flex; gap: 8px; align-items: center; }
#hud-retrato { width: 48px; height: 48px; image-rendering: pixelated; background: #f3d9c6; border: 2px solid #1a1220; border-radius: 3px; }
.relogio-linha { display: flex; gap: 6px; align-items: center; font-size: 22px; }
.relogio-linha b { color: var(--ambar); letter-spacing: 1px; }
.ic-sol { width: 14px; height: 14px; background: #ffd24a; border: 2px solid #1a1220; border-radius: 50%; box-shadow: 0 0 0 2px #ffe89a; }
.barra-dia { position: relative; width: 150px; height: 8px; background: #1a1220; border: 1px solid #6a5a7a; margin: 3px 0 2px; }
.barra-dia i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #ffe39a, #ffb070 70%, #e8709a); }
.marca-meta { position: absolute; top: -3px; width: 2px; height: 12px; background: #fff; box-shadow: 0 0 0 1px #1a1220; }
#hud-feira { display: flex; gap: 6px; align-items: center; font-size: 15px; }
#hud-feira .item { display: inline-flex; align-items: center; gap: 2px; opacity: .45; }
#hud-feira .item.feito { opacity: 1; }
#hud-feira .item.pop { animation: pop .45s cubic-bezier(.2,1.6,.4,1); }
#hud-roda { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 15px; }
#hud-roda .of { display: inline-flex; gap: 3px; align-items: center; padding: 1px 5px 1px 2px; border-radius: 3px; border: 2px solid transparent; }
#hud-roda .of.marceneira { border-color: var(--marceneira); }
#hud-roda .of.costureira { border-color: var(--costureira); }
#hud-roda .of b { font-size: 18px; }
#hud-roda .of .nome { font-size: 11px; color: var(--sec); }
#hud-roda .of.pop { animation: pop .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes pop { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }

#topo-botoes { position: fixed; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); display: flex; gap: 8px; z-index: 6; }
.bt-icone { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--borda); background: var(--painel); color: var(--texto); display: grid; place-items: center; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.bt-icone svg { width: 20px; height: 20px; fill: currentColor; stroke: currentColor; }
.bt-icone.mudo .onda { display: none; }
.bt-icone.mudo { color: #b8a0c0; }
.bt-icone:focus-visible, .bt:focus-visible, .bt-acao:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; }

#toast { position: fixed; left: 50%; top: auto; bottom: calc(max(8px, env(safe-area-inset-bottom)) + 40px); transform: translateX(-50%); z-index: 5; pointer-events: none; display: flex; flex-direction: column; gap: 4px; align-items: center; width: min(92vw, 560px); }
#toast .msg { background: var(--painel2); border: 2px solid var(--borda); border-radius: 4px; padding: 5px 10px; font-size: 16px; text-align: center; animation: entra .3s cubic-bezier(.2,1.3,.4,1); display: flex; gap: 6px; align-items: center; }
#toast .msg.ruim { border-color: var(--rosa); color: #ffe0ea; }
#toast .msg.bom { border-color: var(--verde); }
#toast .msg.sai { opacity: 0; transition: opacity .4s; }
@keyframes entra { from { transform: translateY(-8px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }

/* rótulos no mundo */
#rotulos { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.rot { position: absolute; left: 0; top: 0; will-change: transform; transform: translate(-9999px, 0); }
.rot-in { transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rot-tarefa .caixinha { background: var(--painel2); border: 2px solid #f6e2c0aa; border-radius: 4px; padding: 3px 6px; display: flex; gap: 6px; align-items: center; font-size: 13px; white-space: nowrap; }
.rot-tarefa.alvo .caixinha { border-color: var(--ambar); box-shadow: 0 0 0 2px #1a1220, 0 0 12px rgba(255,199,104,.6); font-size: 14px; }
.rot-tarefa .req { display: inline-flex; gap: 2px; align-items: center; }
.rot-tarefa .pips { display: inline-flex; gap: 2px; align-items: center; }
.rot-tarefa .pip { display: block; width: 9px; height: 9px; border: 2px solid var(--c); background: #1a1220; }
.rot-tarefa .pip.on { background: var(--c); box-shadow: inset 0 0 0 1px #fff6; }
.rot-tarefa .mais { font-size: 11px; color: var(--verde); }
.rot-tarefa:not(.alvo) { opacity: .82; }
.rot-tarefa:not(.alvo) .caixinha { padding: 2px 4px; gap: 4px; }
.rot-tarefa .progresso { width: 64px; height: 6px; background: #1a1220; border: 1px solid #6a5a7a; }
.rot-tarefa .progresso i { display: block; height: 100%; width: 0; background: var(--verde); }
.rot-tarefa .falta { color: var(--rosa); font-size: 12px; }
.rot-tarefa .dica-tecla { font-size: 12px; color: var(--ambar); }
.rot-tarefa .seta { color: var(--ambar); font-size: 18px; line-height: 12px; animation: bob .7s ease-in-out infinite alternate; }
.rot-pessoa .etq { background: var(--painel2); border: 2px solid #f6e2c066; border-radius: 3px; padding: 1px 5px; font-size: 12px; white-space: nowrap; }
.rot-pessoa .etq.sentada { border-color: var(--rosa); }
.rot-pessoa .etq.cozinhando { border-color: #5fb35a; }
#hud-feira .clientes { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; padding: 0 4px; border-left: 2px solid #6a5a7a; }
#hud-feira .clientes b { font-size: 18px; color: var(--verde); }
#hud-feira .clientes.meta b { color: var(--ambar); }
#hud-feira .clientes.pop { animation: pop .4s cubic-bezier(.2,1.6,.4,1); }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-4px); } }

#dica { position: fixed; left: 0; top: 0; z-index: 4; pointer-events: none; will-change: transform; }
#dica .in { transform: translate(-50%, calc(-100% - 8px)); background: #fff4e2; color: #2a1c30; border: 3px solid #1a1220; border-radius: 6px; padding: 6px 10px; font-size: 16px; max-width: min(78vw, 340px); text-align: center; box-shadow: 0 4px 0 rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 4px; align-items: center; animation: entra .35s cubic-bezier(.2,1.3,.4,1); }
#dica .in::after { content: ''; position: absolute; left: 50%; bottom: -10px; margin-left: -8px; border: 8px solid transparent; border-top-color: #1a1220; border-bottom: 0; }
#dica kbd { background: #2a1c30; }
#dica .seta-dica { color: #c33a64; font-size: 18px; }
#dica .gesto { background: #2a1c30; color: #fff; border-radius: 10px; padding: 1px 8px; font-size: 13px; }

#atalhos { position: fixed; left: 50%; bottom: max(8px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 3; background: var(--painel2); border: 2px solid #f6e2c055; border-radius: 4px; padding: 4px 10px; font-size: 12px; color: var(--sec); white-space: nowrap; pointer-events: none; }

#controles { position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); z-index: 6; display: grid; grid-template-columns: auto auto; grid-template-areas: "abrir abrir" "proximo enviar" "chamar enviar"; gap: 10px; align-items: end; }
#bt-abrir { grid-area: abrir; }
#bt-proximo { grid-area: proximo; }
#bt-chamar { grid-area: chamar; }
#bt-enviar { grid-area: enviar; }
.bt-acao { min-width: 64px; min-height: 52px; border-radius: 12px; border: 3px solid #1a1220; background: #f6e2c0; color: #1a1220; font-size: 14px; font-weight: 700; box-shadow: 0 4px 0 #1a1220; cursor: pointer; padding: 4px 8px; }
.bt-acao.grande { width: 96px; height: 96px; border-radius: 50%; background: var(--ambar); font-size: 16px; }
#bt-chamar { background: var(--rosa); }
#bt-abrir { background: var(--verde); animation: bob .6s ease-in-out infinite alternate; }
.bt-acao.ativo { transform: translateY(3px); box-shadow: 0 1px 0 #1a1220; }
body.toque #atalhos { display: none; }
body:not(.toque) #controles { opacity: .92; }
body:not(.toque) #controles #bt-proximo, body:not(.toque) #controles #bt-chamar, body:not(.toque) #controles #bt-enviar { display: none; }

/* joystick do motor */
.motor-joy-base { position: fixed; width: 112px; height: 112px; margin: -56px 0 0 -56px; border: 3px solid rgba(246,226,192,.6); border-radius: 50%; background: rgba(26,18,32,.3); pointer-events: none; z-index: 6; }
.motor-joy-pino { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: rgba(255,199,104,.9); border: 3px solid #1a1220; }

/* ---------- telas ---------- */
.tela { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(20, 12, 30, .55); z-index: 10; padding: 16px; }
#tela-abertura { background: linear-gradient(180deg, rgba(20,12,30,.05), rgba(20,12,30,.35) 55%, rgba(20,12,30,.8)); align-items: end; }
.caixa { background: var(--painel); border: 3px solid var(--borda); box-shadow: 0 6px 0 rgba(0,0,0,.45); padding: 18px 20px; max-width: 520px; width: 100%; border-radius: 6px; text-align: center; max-height: calc(100dvh - 32px); overflow: auto; }
.caixa.abertura { max-width: 640px; margin-bottom: 3vh; }
.titulo-linha { display: flex; align-items: flex-end; justify-content: center; gap: 12px; }
#abertura-dani { width: 96px; height: 144px; image-rendering: pixelated; }
.caixa h1 { font-size: clamp(38px, 9vw, 62px); margin: 4px 0; color: var(--ambar); text-shadow: 4px 4px 0 #3a1a28; letter-spacing: 1px; line-height: 1; }
.caixa h2 { font-size: 26px; margin: 0 0 8px; color: var(--ambar); }
.selo { font-size: 12px; color: var(--sec); margin: 0; letter-spacing: 1px; text-transform: uppercase; }
.sub { font-size: 16px; line-height: 1.45; color: var(--texto); font-family: 'DotGothic16', 'Pixelify Sans', sans-serif; }
.aviso-ficcao { font-size: 12px; color: var(--sec); margin: 10px 0 0; font-family: 'DotGothic16', sans-serif; }
.botoes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 12px; }
.botoes.coluna { flex-direction: column; align-items: stretch; max-width: 280px; margin-left: auto; margin-right: auto; }
.bt { min-height: 46px; padding: 8px 18px; border-radius: 6px; border: 3px solid #1a1220; background: var(--ambar); color: #1a1220; font-size: 18px; cursor: pointer; box-shadow: 0 4px 0 #1a1220; }
.bt:hover { filter: brightness(1.08); }
.bt:active { transform: translateY(3px); box-shadow: 0 1px 0 #1a1220; }
.bt.sec { background: #f6e2c0; }
.bt.pequeno { min-height: 44px; min-width: 44px; padding: 4px 12px; font-size: 16px; }
.bt[disabled] { opacity: .45; cursor: default; }
.lista-bairros { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.lista-bairros li button { width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lista-bairros .estr { letter-spacing: 2px; color: #ffd24a; font-size: 16px; }
.lista-bairros .bloq { font-size: 13px; color: #5a4a6a; }
.opcoes { display: flex; flex-direction: column; gap: 10px; text-align: left; margin: 8px 0; }
.opcoes label { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 16px; }
.opcoes .grupo { display: flex; gap: 6px; }
.opcoes .grupo button { min-height: 44px; padding: 4px 10px; border-radius: 6px; border: 3px solid #1a1220; background: #f6e2c0; font-size: 14px; cursor: pointer; }
.opcoes .grupo button[aria-pressed="true"] { background: var(--ambar); }
.opcoes input[type=range] { width: 150px; accent-color: var(--ambar); height: 32px; }
.opcoes input[type=checkbox] { width: 26px; height: 26px; accent-color: var(--ambar); }
.opcoes .nota { font-size: 12px; color: var(--sec); }
.sobre { text-align: left; max-width: 600px; }
.sobre p { font-family: 'DotGothic16', sans-serif; font-size: 14px; line-height: 1.5; }
.sobre-linha { display: flex; gap: 12px; align-items: flex-start; }
#sobre-retrato { width: 72px; height: 72px; image-rendering: pixelated; background: #f3d9c6; border: 3px solid #1a1220; border-radius: 4px; flex: none; }
.resultado .estrelas { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 4px; text-align: left; }
.resultado .estrelas li { display: flex; gap: 8px; align-items: center; font-size: 15px; opacity: .55; }
.resultado .estrelas li.ganhou { opacity: 1; animation: popLeve .5s cubic-bezier(.2,1.6,.4,1) both; transform-origin: left center; }
@keyframes popLeve { 0% { transform: scale(1.15); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }
.res-numeros { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; text-align: left; font-size: 15px; margin: 8px 0; }
.res-numeros dt { color: var(--sec); }
.res-numeros dd { margin: 0; color: var(--ambar); font-size: 17px; }
.pisca { animation: pisca 1s steps(2) infinite; font-size: 18px; }
@keyframes pisca { 50% { opacity: .4; } }

/* guia Como jogar */
.guia { max-width: 560px; }
.guia-topo { display: flex; justify-content: space-between; align-items: center; }
.guia-topo h2 { margin: 0; }
.guia-cartoes { position: relative; min-height: 300px; }
.cartao { display: none; flex-direction: column; align-items: center; gap: 8px; }
.cartao.ativo { display: flex; animation: entra .3s ease-out; }
.cartao .clipe { position: relative; width: 100%; max-width: 440px; }
.cartao video { display: block; width: 100%; aspect-ratio: 480 / 306; object-fit: cover; background: #3a4a3a; border: 3px solid #1a1220; border-radius: 4px; }
.cartao .tocar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-height: 44px; padding: 6px 14px; border-radius: 6px; border: 3px solid #1a1220; background: var(--ambar); font: inherit; font-size: 16px; cursor: pointer; }
.cartao h3 { margin: 0; color: var(--ambar); font-size: 22px; }
.cartao p { margin: 0; font-family: 'DotGothic16', sans-serif; font-size: 15px; line-height: 1.45; }
.cartao .controles-lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; font-size: 14px; }
.cartao .alternar { font-size: 13px; color: var(--ambar); background: none; border: 0; text-decoration: underline; cursor: pointer; min-height: 44px; }
.guia-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.guia-pontos { display: flex; gap: 6px; }
.guia-pontos i { width: 10px; height: 10px; border-radius: 50%; background: #6a5a7a; display: block; }
.guia-pontos i.ativo { background: var(--ambar); }

@media (max-width: 700px) {
  #hud { gap: 5px; padding-right: 58px; }
  #topo-botoes { flex-direction: column; }
  #hud-feira > .mini:first-child { display: none; }
  #toast .msg:not(:last-child) { display: none; }
  .hud-caixa { padding: 4px 6px; }
  #hud-retrato { width: 36px; height: 36px; }
  .relogio-linha { font-size: 16px; }
  .barra-dia { width: 96px; }
  #hud-relogio .mini { display: none; }
  #hud-feira, #hud-roda { font-size: 13px; }
  #hud-roda .of .nome { display: none; }
  #toast { top: auto; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 150px); left: 10px; transform: none; width: min(62vw, 250px); align-items: flex-start; }
  #toast .msg { font-size: 13px; text-align: left; }
  #hud-roda > .mini:first-child { display: none; }
  #hud-roda { gap: 3px; }
  #hud-roda .of { padding: 0 3px 0 1px; }
  #hud-roda .of canvas { width: 16px; height: 16px; }
  #hud-feira .item canvas, #hud-feira .clientes canvas { width: 18px; height: 18px; }
  #dica .in { font-size: 13px; max-width: min(72vw, 260px); padding: 4px 8px; }
  .caixa { padding: 14px 14px; }
  .sub { font-size: 14px; }
  .bt { font-size: 16px; padding: 6px 12px; }
  #abertura-dani { width: 64px; height: 96px; }
  .guia-cartoes { min-height: 0; }
  .cartao video { max-height: 30dvh; }
  .cartao p { font-size: 13px; }
  .cartao h3 { font-size: 18px; }
  .rot-tarefa .caixinha { font-size: 11px; padding: 2px 4px; }
  .rot-tarefa .progresso { width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}