/* Site do apostador. Tokens do Admin e do POS (Web/DESIGN.md): papelao, tinta,
   seda; Anton nomeia, Courier Prime informa; nenhuma curva, nenhuma sombra.
   O cartao e a pagina: folha de seda sobre papelao, casas 1 X 2 no meio e a
   faixa do balcao, em tinta, fixa no pe. Pensado primeiro para o celular. */
@font-face{font-family:Anton;src:url('/site/estatico/fontes/anton.ttf') format('truetype');font-weight:400;font-display:block}
@font-face{font-family:'Courier Prime';src:url('/site/estatico/fontes/courier-prime.ttf') format('truetype');font-weight:400;font-display:block}
@font-face{font-family:'Courier Prime';src:url('/site/estatico/fontes/courier-prime-bold.ttf') format('truetype');font-weight:700;font-display:block}

:root{
  --papelao:#DB8B4C; --papelao-fundo:#C97A3D; --tinta:#111111; --tinta-suave:#3B2616;
  --seda:#F6F6F4; --seda-dica:#5F5E5A; --floresta:#4F6E3D; --tijolo:#9E3226; --traco:2px;
  --coluna:560px; --casa:48px;
}
*{box-sizing:border-box}
/* A faixa do balcao e fixa: o que recebe foco nunca para embaixo dela. */
html{scroll-padding-bottom:120px;-webkit-text-size-adjust:100%;color-scheme:light;accent-color:var(--tinta);scrollbar-color:var(--tinta) var(--papelao-fundo)}
::selection{background:var(--tinta);color:var(--seda)}
body{margin:0;background:var(--papelao);color:var(--tinta);font:400 16px/1.5 'Courier Prime',ui-monospace,monospace;caret-color:var(--tinta)}
body.com-balcao{padding-bottom:104px}
a{color:inherit;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--tinta);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

.topo,.pagina,.rodape{max-width:var(--coluna);margin:0 auto;padding-left:16px;padding-right:16px}
.topo{padding-top:18px}
.letreiro{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding-bottom:10px;border-bottom:var(--traco) solid var(--tinta)}
.marca{display:block;font-family:Anton;font-size:30px;line-height:1;text-transform:uppercase;text-decoration:none}
/* Meus bilhetes: o caminho de volta, sempre no letreiro, como carimbo em tinta
   (o link sublinhado passou despercebido na conferencia de 19/09/2026). Na
   propria pagina vira contorno: ja esta aqui. */
.meus-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px;border:var(--traco) solid var(--tinta);background:var(--tinta);color:var(--seda);font-weight:700;font-size:14px;line-height:1.2;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.meus-link svg{flex:0 0 18px;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square}
.meus-link[aria-current]{background:transparent;color:var(--tinta)}
@media (hover:hover){.meus-link:not([aria-current]):hover{background:var(--tinta-suave);border-color:var(--tinta-suave)}}
/* Resultados (item 61): ao lado de Meus bilhetes, em contorno (o caminho de volta
   continua sendo o carimbo cheio). Na propria pagina, o papelao escuro. No
   celular os dois encolhem para caber ao lado da marca; se nao couber, descem. */
.atalhos{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}
.resultados-link{display:inline-flex;align-items:center;min-height:44px;padding:8px 12px;border:var(--traco) solid var(--tinta);color:var(--tinta);font-weight:700;font-size:14px;line-height:1.2;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.resultados-link[aria-current]{background:var(--papelao-fundo)}
@media (hover:hover){.resultados-link:not([aria-current]):hover{background:var(--papelao-fundo)}}
.trilha{margin:0;padding:12px 0 0;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-suave)}
.trilha>*+*::before{content:'/';margin:0 8px 0 4px;color:var(--tinta-suave);display:inline-block;text-decoration:none}
.trilha [aria-current]{color:var(--tinta)}
.trilha a{color:var(--tinta)}
.pagina{padding-top:16px;padding-bottom:24px}
.rodape{padding-top:0;padding-bottom:32px;font-size:13px;color:var(--tinta-suave)}
.rodape p{margin:0;padding-top:12px;border-top:var(--traco) solid var(--tinta)}

/* Folha de seda: o papel onde se marca e onde se le. */
.folha{display:block;background:var(--seda);border:var(--traco) solid var(--tinta);padding:18px 16px;margin:0 0 14px}
.folha+.folha{margin-top:-16px;border-top-style:dashed}
h1{font-family:Anton;font-weight:400;font-size:34px;line-height:1.05;text-transform:uppercase;margin:0;text-wrap:balance}
h1 span{display:block;font-size:20px;line-height:1.15;color:var(--tinta-suave);margin-top:2px}
h2{font-family:Anton;font-weight:400;font-size:22px;line-height:1.1;text-transform:uppercase;margin:0 0 10px}
h3{font-size:14px;line-height:1.2;text-transform:uppercase;letter-spacing:.04em;margin:18px 0 0}
/* Simulador: uma conta simulada abaixo da outra. */
.conta-simulada{margin-top:26px;padding-top:16px;border-top:var(--traco) dashed var(--tinta)}
.regra,.como{margin:12px 0 0;font-size:14px;line-height:1.45;color:var(--tinta-suave)}
.como b,.regra b{color:var(--tinta)}
.vazio{border:var(--traco) dashed var(--tinta);padding:22px;text-align:center;color:var(--tinta-suave)}
.vazio h1{font-size:28px;color:var(--tinta)}
.vazio-linha{margin:0;color:var(--tinta-suave)}

.aviso{margin:0 0 14px;padding:12px 14px;background:var(--tinta);color:var(--seda);font-size:15px}
.aviso.ruim{background:var(--tijolo)}
.carimbo{display:inline-block;margin:0 0 12px;font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;background:var(--floresta);color:var(--seda);padding:6px 10px}
.carimbo.off{background:var(--tijolo)}

.cabeca h1{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px}
.cabeca h1 span{margin-top:0}
.fatos{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 16px;margin:8px 0 0;padding:7px 0;border-top:var(--traco) solid var(--tinta);border-bottom:var(--traco) solid var(--tinta);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-suave);font-variant-numeric:tabular-nums}
.fatos b{color:var(--tinta)}

.concursos{display:flex;gap:8px;margin:0 0 10px;overflow-x:auto;padding-bottom:2px}
.concursos a{flex:0 0 auto;min-height:44px;padding:6px 12px;border:var(--traco) solid var(--tinta);text-decoration:none;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;display:flex;flex-direction:column;justify-content:center}
.concursos a small{font-weight:400;font-size:11px;letter-spacing:.04em;color:var(--tinta-suave)}
.concursos a[aria-current]{background:var(--tinta);color:var(--seda)}
.concursos a[aria-current] small{color:var(--seda)}

/* O cartao: numero, mandante, casas 1 X 2 NO MEIO, visitante - como no POS,
   na bobina e na Loteca. */
.jogos{list-style:none;margin:14px 0 0;padding:0;border-top:var(--traco) solid var(--tinta)}
.jogo{border-bottom:1px dashed var(--tinta)}
.jogo:last-child{border-bottom:var(--traco) solid var(--tinta)}
.jogo fieldset,.lido .jogo{display:grid;grid-template-columns:18px minmax(0,1fr) auto minmax(0,1fr);gap:0 8px;align-items:center;margin:0;padding:5px 0;border:0;min-width:0}
.num{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--tinta-suave);font-variant-numeric:tabular-nums}
.time{font-size:15px;line-height:1.2;text-transform:uppercase;overflow-wrap:anywhere;hyphens:manual}
.casas{display:flex;gap:6px}
.casa-v{text-align:right}
label.casa{position:relative;display:block;width:var(--casa);height:var(--casa);cursor:pointer;-webkit-tap-highlight-color:transparent}
label.casa input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
label.casa>span[aria-hidden]{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border:var(--traco) solid var(--tinta);font-weight:700;font-size:20px;line-height:1;background:var(--seda);color:var(--tinta)}
label.casa input:checked+span{background:var(--tinta);color:var(--seda)}
label.casa input:focus-visible+span{outline:3px solid var(--tinta);outline-offset:2px}
@media (hover:hover){label.casa:hover input:not(:checked)+span{background:var(--papelao)}}
@media (prefers-reduced-motion:no-preference){
  label.casa>span[aria-hidden]{transition:background-color .12s ease-out,color .12s ease-out}
}
.jogo.falta label.casa>span[aria-hidden]{border:3px solid var(--tijolo)}
.jogo.falta .num{color:var(--tijolo)}
/* Cartao lido: casa vazia tracejada (o que nao esta ali), marcada em tinta. */
.lido{margin-top:10px}
.lido .jogo{padding:4px 0}
.lido .casas{gap:4px}
.lido .casa{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:var(--traco) dashed var(--tinta-suave);font-size:13px;font-weight:700;color:var(--seda-dica)}
.lido .casa.marcada{border-style:solid;border-color:var(--tinta);background:var(--tinta);color:var(--seda)}
/* Resultado do jogo (conferencia do premio): verde, cheio quando o cartao acertou, so o contorno quando errou. */
.lido .casa.vencedora{border:3px double var(--floresta);color:var(--floresta)}
.lido .casa.marcada.vencedora{border:var(--traco) solid var(--floresta);background:var(--floresta);color:var(--seda)}
.lido .jogo .vale-todos{grid-column:2/-1;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--floresta)}
.lido .time{font-size:13px}
/* Bilhete de lista (080, itens 135 e 149): os jogos uma vez, com o resultado no
   meio no lugar do x (a casa vencedora do cartao lido), e uma linha por cartao
   no formato da lista. A linha premiada ganha a barra e a letra de floresta. */
.lista-bilhete{margin-top:10px}
.lista-titulo{margin:14px 0 0;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-suave)}
.lista-titulo:first-child{margin-top:0}
.grade-lista,.linhas-lista{list-style:none;margin:4px 0 0;padding:0;border-top:var(--traco) solid var(--tinta)}
.grade-lista li,.linhas-lista li{border-bottom:1px dashed var(--tinta)}
.grade-lista li:last-child,.linhas-lista li:last-child{border-bottom:var(--traco) solid var(--tinta)}
.grade-lista li{display:grid;grid-template-columns:18px minmax(0,1fr) 30px minmax(0,1fr);gap:0 8px;align-items:center;min-height:36px;padding:3px 0}
.grade-lista .time{font-size:13px}
.grade-lista .time:last-of-type{text-align:right}
.grade-lista .x{justify-self:center;font-size:13px;color:var(--tinta-suave)}
.grade-lista .resultado{display:flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 2px;border:3px double var(--floresta);font-size:13px;font-weight:700;color:var(--floresta)}
.grade-lista .vale-todos{grid-column:2/-1;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--floresta)}
.linhas-lista li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:0 8px;align-items:baseline;padding:7px 0}
.linhas-lista code{font:700 15px/1.35 'Courier Prime',ui-monospace,monospace;letter-spacing:.02em;overflow-wrap:anywhere}
.linhas-lista small{grid-column:2;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-suave)}
.linhas-lista li.premiada{border-left:4px solid var(--floresta);padding-left:8px}
.linhas-lista li.premiada code,.linhas-lista li.premiada small{color:var(--floresta)}
.linhas-lista li.premiada small{font-weight:700}
/* Celular: a folha encosta mais na borda para os nomes caberem ao lado das casas. */
@media (max-width:480px){
  :root{--casa:44px}
  .topo,.pagina,.rodape{padding-left:10px;padding-right:10px}
  .folha{padding:16px 10px}
  .jogo fieldset,.lido .jogo{gap:0 5px;grid-template-columns:16px minmax(0,1fr) auto minmax(0,1fr)}
  .casas{gap:4px}
  .time{font-size:13px}
  .lido .time{font-size:12px}
  .grade-lista li{gap:0 5px;grid-template-columns:16px minmax(0,1fr) 30px minmax(0,1fr)}
  .grade-lista .time{font-size:12px}
  .linhas-lista li{gap:0 5px;grid-template-columns:16px minmax(0,1fr)}
  .linhas-lista code{font-size:14px}
  .cartoes summary{font-size:13px}
  .marca{font-size:26px}
  .atalhos{gap:6px}
  .meus-link,.resultados-link{padding:8px;font-size:13px;letter-spacing:.04em}
  .meus-link svg{display:none}
}

/* Botoes: carimbo em tinta, texto mono batido. */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:11px 16px;border:var(--traco) solid var(--tinta);background:transparent;color:var(--tinta);font:700 14px/1.2 'Courier Prime',monospace;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;text-align:center;cursor:pointer;border-radius:0}
.bt.tinta{background:var(--tinta);color:var(--seda)}
.bt.seda{background:var(--seda);color:var(--tinta);border-color:var(--seda)}
.bt.cheio{width:100%}
.bt:disabled,.bt[aria-disabled=true]{opacity:.45;cursor:default}
@media (hover:hover){
  .bt.vazio:hover:not(:disabled){background:var(--tinta);color:var(--seda)}
  .bt.tinta:hover:not(:disabled){background:var(--tinta-suave);border-color:var(--tinta-suave)}
  .bt.seda:hover:not(:disabled){background:var(--papelao);border-color:var(--papelao)}
}
.mais{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.mais .bt{flex:1 1 100%}
.mais.compartilha{margin-top:0}
@media (min-width:480px){.mais.compartilha .bt,.mais.par .bt{flex:1 1 calc(50% - 4px)}}

.no-pedido{margin-top:18px;padding-top:12px;border-top:var(--traco) solid var(--tinta)}
.no-pedido ul,.cartoes{list-style:none;margin:0;padding:0}
.no-pedido li small{display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-suave)}
.no-pedido li,.soma,.linha-cartao{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:6px 0;border-bottom:1px dashed var(--tinta)}
.no-pedido li b,.soma b,.linha-cartao b,.cartoes summary b{font-variant-numeric:tabular-nums;white-space:nowrap}
.soma{font-weight:700;border-bottom:var(--traco) solid var(--tinta)}

/* Faixa do balcao: a conta do pedido, sempre a vista. */
.balcao{position:fixed;left:0;right:0;bottom:0;z-index:2;background:var(--tinta);color:var(--seda);padding:10px max(16px,calc((100vw - var(--coluna))/2 + 16px)) calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:12px}
/* Sobre a tinta o foco engrossa em seda: em tinta ele sumiria. */
.balcao :focus-visible{outline-color:var(--seda)}
.conta{margin:0;display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;min-height:48px}
.apostas{font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.soma-pedido{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
.soma-pedido small{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.total{display:inline-block;font-weight:700;font-size:22px;line-height:1.1;font-variant-numeric:tabular-nums}
.apostas.demais{align-self:flex-start;background:var(--tijolo);padding:2px 6px}
@media (prefers-reduced-motion:no-preference){
  .total.bate{animation:bate .18s cubic-bezier(.2,.8,.3,1)}
  @keyframes bate{from{transform:translateY(-4px)}to{transform:none}}
}

/* Cartoes do pedido e da conferencia. */
.cartoes{margin-top:12px;border-top:1px dashed var(--tinta)}
.cartoes>li{display:grid;grid-template-columns:minmax(0,1fr) auto;border-bottom:1px dashed var(--tinta)}
.cartoes>li>details{grid-area:1/1/2/3;min-width:0}
.cartoes>li.com-tirar summary{padding-right:54px}
/* Tirar mora na linha do resumo: topo do item, com a altura dela. */
.tirar{grid-area:1/2/2/3;z-index:1;align-self:start}
.qual{line-height:1.25}
.qual small{display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-suave)}
.cartoes summary{display:flex;align-items:center;gap:6px;min-height:52px;padding:4px 0;cursor:pointer;list-style:none;font-size:14px}
.cartoes summary::-webkit-details-marker{display:none}
.cartoes summary span{flex:1 1 auto;min-width:0}
.cartoes details[open]{padding-bottom:10px}
.codigo{letter-spacing:.06em}
/* Meus bilhetes: cada pedido e uma linha inteira que abre o pedido. */
.pedido-linha{grid-area:1/1/2/3;display:flex;align-items:center;gap:8px;min-height:56px;padding:6px 0;text-decoration:none;font-size:14px}
.pedido-linha .qual{flex:1 1 auto;min-width:0}
.pedido-linha b{font-variant-numeric:tabular-nums;white-space:nowrap}
@media (hover:hover){.pedido-linha:hover{background:var(--papelao)}}
.pedidos+.regra,.pedidos+.vazio-linha{margin-top:12px}
.tirar{flex:0 0 auto;min-height:52px;display:inline-flex;align-items:center;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.marcador{flex:0 0 20px;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:square}
details[open]>summary .marcador{transform:rotate(90deg)}
@media (prefers-reduced-motion:no-preference){.marcador{transition:transform .16s ease-out}}
.ordem{margin:12px 0}
.ordem summary{display:flex;align-items:center;gap:6px;min-height:44px;cursor:pointer;list-style:none;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.ordem summary::-webkit-details-marker{display:none}

/* Campos: papel de seda contornado; na folha de seda o campo ganha o papelao. */
.campo{display:block;margin:14px 0 0;font-family:Anton;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-suave)}
.campo input,.campo textarea{display:block;width:100%;margin-top:4px;min-height:50px;padding:12px;border:var(--traco) solid var(--tinta);border-radius:0;background:var(--seda);color:var(--tinta);font:400 16px/1.5 'Courier Prime',ui-monospace,monospace;letter-spacing:0;text-transform:none}
.campo select{display:block;width:100%;margin-top:4px;min-height:50px;padding:12px;border:var(--traco) solid var(--tinta);border-radius:0;background:var(--seda);color:var(--tinta);font:400 16px/1.5 'Courier Prime',ui-monospace,monospace;letter-spacing:0;text-transform:none}
.campo textarea{resize:vertical;overflow-wrap:anywhere}
.campo textarea[data-lista]{text-transform:uppercase}
.campo ::placeholder{color:var(--seda-dica);opacity:1}
.campo small{display:block;margin-top:5px;font:400 13px/1.45 'Courier Prime',monospace;letter-spacing:0;text-transform:none;color:var(--tinta-suave)}
.arquivo{margin-top:12px}
.arquivo label{position:relative}
.arquivo label:focus-within{outline:3px solid var(--tinta);outline-offset:2px}
.dica-arquivo{margin:6px 0 0;font-size:13px;line-height:1.45;color:var(--tinta-suave);overflow-wrap:anywhere}
/* Leitor de QR (Pagar premio pelo navegador): a imagem da camera numa moldura
   em tinta, com a mira no meio em seda contornada de tinta (a bobina e branca,
   o balcao pode ser escuro: aparece nos dois). So existe com JavaScript. */
.leitor{margin:14px 0 0}
.leitor-visor{position:relative;aspect-ratio:4/3;max-height:60vh;margin:0 auto;border:var(--traco) solid var(--tinta);background:var(--tinta);overflow:hidden}
.leitor-visor video{display:block;width:100%;height:100%;object-fit:cover}
.leitor-visor::after{content:'';position:absolute;left:50%;top:50%;width:min(62%,240px);aspect-ratio:1;transform:translate(-50%,-50%);border:3px solid var(--seda);outline:var(--traco) solid var(--tinta);pointer-events:none}
.leitor-visor+.bt{margin-top:8px}
.leitor-situacao{margin:6px 0 0;font-size:13px;line-height:1.45;color:var(--tinta-suave)}
.leitor-situacao:empty{display:none}
.opcional{font:700 11px 'Courier Prime',monospace;letter-spacing:.1em;color:var(--tinta-suave)}
.dados-form h2{margin-bottom:0}
.declara{display:flex;align-items:flex-start;gap:10px;margin:16px 0 0;font-size:15px;min-height:44px;cursor:pointer}
.declara input{flex:0 0 auto;width:26px;height:26px;margin:0;appearance:none;-webkit-appearance:none;border:var(--traco) solid var(--tinta);border-radius:0;background:var(--seda);cursor:pointer}
.declara input:checked{background:var(--tinta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F6F6F4' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/18px no-repeat}
.dados-form .bt.cheio,.pix .bt.cheio,form.folha>.bt.cheio{margin-top:16px}
/* Premio por Pix (052): o bloco do pedido pago. O selo do cartao e texto em floresta, sem caixa. */
.premio-form .bt.cheio,.cancela-form .bt.cheio{margin-top:16px}
.premio-form .bt.cheio+.bt.cheio{margin-top:8px}
.premio .aviso{margin:12px 0 0}
.selo-premio{color:var(--floresta);font-weight:700}
.selo-premio.off{color:var(--tijolo)}
.exemplo{margin:10px 0 0;padding:10px 12px;border:var(--traco) dashed var(--tinta-suave);font:400 14px/1.5 'Courier Prime',monospace;white-space:pre-wrap;color:var(--tinta-suave)}

.recusadas{margin:0 0 14px;padding:12px 14px;border:3px solid var(--tijolo);font-size:14px}
.recusadas p{margin:0 0 8px}
.recusadas ul{list-style:none;margin:0;padding:0}
.recusadas li{padding:6px 0;border-top:1px dashed var(--tijolo);overflow-wrap:anywhere}
.recusadas .onde{font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--tijolo)}
.recusadas code{font:700 14px 'Courier Prime',monospace}
/* O cartao que o banco recusou na venda da lista: a conferencia aponta a linha. */
.cartoes>li.recusada-banco{border-left:4px solid var(--tijolo);padding-left:8px}
.cartoes>li.recusada-banco .qual small{color:var(--tijolo);font-weight:700}

/* Pergunta antes do que nao se desfaz (cancelar, pagar premio): a folha do site por cima da tela. */
dialog.pergunta{width:min(440px,calc(100vw - 32px));margin:auto;padding:18px 16px;border:3px solid var(--tinta);background:var(--seda);color:var(--tinta)}
dialog.pergunta::backdrop{background:rgba(17,17,17,.6)}
dialog.pergunta .regra{margin-top:4px}

/* Pix. */
.relogio{margin:10px 0 0;font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.relogio.acabando{color:var(--tijolo)}
.qr{display:block;width:min(240px,70vw);height:auto;aspect-ratio:1;margin:14px auto 0;border:var(--traco) solid var(--tinta);image-rendering:pixelated}
.pix textarea{font-size:13px;line-height:1.4;word-break:break-all}
.casos{display:grid;gap:8px;margin-top:14px}
code{font:inherit;overflow-wrap:anywhere}

@media (min-width:700px){
  .topo{padding-top:26px}
  h1{font-size:40px}
  .folha{padding:24px 24px}
  .time{font-size:16px}
}

/* Transparencia (entrega 5, 055): pagina publica do concurso. Nenhum token
   novo: abas do concurso, lista tracejada dos cartoes e a paginacao do Admin. */
.rodape-links{font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.rodape-links+p{border-top:0;padding-top:6px}
.rodape-links [aria-current]{text-decoration:none}
.cabeca .jogos{margin-top:14px}
.abas-lista{margin:0 0 10px;scroll-margin-top:12px}
.rateio{list-style:none;margin:0;padding:0;border-top:1px dashed var(--tinta)}
.rateio li{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px;padding:6px 0;border-bottom:1px dashed var(--tinta);font-size:14px}
.rateio b{font-variant-numeric:tabular-nums;white-space:nowrap}
.rateio .forte{border-bottom:var(--traco) solid var(--tinta);font-weight:700}
.riscado{text-decoration:line-through;text-decoration-thickness:2px}
.busca{margin:0 0 4px}
.busca .mais{margin-top:8px}
.resumo{margin:12px 0 0;padding:12px;border:var(--traco) solid var(--tinta);font-weight:700;font-size:15px;line-height:1.5;letter-spacing:.04em;word-break:break-all}
/* Onde o bilhete esta na lista (pagina do pedido). */
.na-lista{margin:10px 0 0;font-size:14px;line-height:1.45;color:var(--tinta-suave)}
.na-lista b{color:var(--tinta)}
.paginacao{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end;margin-top:16px;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.paginacao a,.paginacao>span{display:inline-flex;align-items:center;justify-content:center;border:var(--traco) solid var(--tinta);padding:7px 10px;text-decoration:none;min-width:48px;min-height:44px}
.paginacao svg{width:20px;height:20px;stroke:var(--tinta);stroke-width:1.8;fill:none;stroke-linecap:square}
.paginacao .desligado{opacity:.4}
.paginacao .conta{display:inline-flex;flex-direction:row;min-height:44px;margin-right:auto;padding-left:0;border:0;color:var(--tinta-suave)}
.conta-lista{margin:12px 0 0;text-align:right;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-suave)}
.ir-pagina{display:inline-flex;align-items:center;gap:6px;margin:0}
.ir-pagina label{display:inline-flex;align-items:center;gap:6px;color:var(--tinta-suave);white-space:nowrap}
.ir-pagina input{width:56px;min-height:44px;padding:6px 8px;border:var(--traco) solid var(--tinta);border-radius:0;background:var(--seda);color:var(--tinta);font:700 14px 'Courier Prime',monospace;text-align:center;-moz-appearance:textfield;appearance:textfield}
.ir-pagina input::-webkit-outer-spin-button,.ir-pagina input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
@media (hover:hover){.paginacao a:hover{background:var(--tinta)}.paginacao a:hover svg{stroke:var(--seda)}}

/* Papel do bilhete (agente pelo navegador, N2): a bobina de 32 colunas do POS,
   com o desenho da pre-visualizacao do Admin. Na tela, seda com traco de tinta
   sobre o papelao; no papel, so a tinta. A letra encolhe com a largura do papel
   (32 colunas cabem na bobina de 58 mm). Nenhum token novo. */
.papel{display:grid;gap:12px;margin-top:12px}
.via{container-type:inline-size;display:flex;justify-content:center}
.bobina-papel{box-sizing:content-box;width:32ch;padding:14px 12px 22px;background:var(--seda);border:var(--traco) solid var(--tinta);font:400 15px/1.35 'Courier Prime',monospace;font-size:min(15px,4.6cqw);color:var(--tinta)}
.bobina-linha{display:block;white-space:pre;overflow:hidden}
.bobina-linha.grande{font-size:2em;line-height:1.2}
/* Campo de corpo duplo: rotulo so mais alto, valor com o dobro de altura e largura. */
.bobina-linha>.rotulo{display:inline-block;transform:scaleY(2);transform-origin:left center}
.bobina-linha>.valor{font-size:2em}
.bobina-linha.negrito{font-weight:700}
.bobina-logo{display:block;width:100%;height:auto;margin:2px 0 6px;image-rendering:pixelated}
.bobina-qr{display:block;width:20ch;margin:4px auto}
.bobina-qr svg{display:block;width:100%;height:auto}
@media print{
  @page{margin:4mm}
  html,body{background:none}
  body,body.com-balcao{padding:0}
  .topo,.rodape,.aviso,.nao-imprime{display:none!important}
  .pagina{max-width:none;padding:0}
  .papel{display:block;margin:0}
  .via{break-after:page}
  .via:last-child{break-after:auto}
  .bobina-papel{border:0;background:none;padding:0;font-size:min(15px,5.2cqw)}
}