/* BANCA: mesa de craps */

.cr-palco { display: flex; flex-direction: column; gap: 8px; }
.cr-topo { display: none; position: relative; }
.cr-abas { display: none; }
.cr-caixa { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; container-type: size; }
.cr-mesa { position: relative; width: min(100cqw, calc(100cqh * var(--razao, 2))); }
.cr-mesa svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.cr-dados { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.cr-fichas { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.cr-banco { top: -2px; width: 220px; }

.craps-svg .borda { fill: rgba(0, 0, 0, .06); stroke: rgba(243, 234, 215, .8); stroke-width: 2.4; }
.craps-svg .fio { stroke: rgba(243, 234, 215, .45); stroke-width: 1.2; }
.craps-svg text { pointer-events: none; }
.craps-svg .rotulo.menor { font-size: 17px; letter-spacing: 1.5px; }
.craps-svg .rotulo { font-family: var(--f-display); font-size: 25px; letter-spacing: 3px; fill: #f3ead7; }
.craps-svg .rotulo.linha { font-size: 28px; letter-spacing: 6px; }
.craps-svg .campo-t { font-size: 20px; letter-spacing: 4px; }
.craps-svg .sub { font-family: var(--f-ui); font-weight: 500; font-size: 14px; fill: rgba(232, 207, 143, .9); }
.craps-svg .pequeno { font-family: var(--f-ui); font-size: 11.5px; letter-spacing: 1.5px; fill: rgba(232, 207, 143, .7); text-transform: uppercase; }
.craps-svg .numero-grande { font-family: var(--f-display); font-size: 40px; fill: #ffe39a; letter-spacing: 2px; }
.craps-svg .numero-campo { font-family: var(--f-display); font-size: 30px; fill: #f3ead7; }
.craps-svg .aro { fill: none; stroke: rgba(243, 234, 215, .7); stroke-width: 1.5; }
.craps-svg .dmini { fill: #f3ead7; stroke: rgba(0, 0, 0, .4); }
.craps-svg .dpip { fill: #b3192e; }
.craps-svg .zona { fill: transparent; cursor: pointer; transition: fill .15s; }
.craps-svg .zona:hover { fill: rgba(255, 228, 160, .12); }
.craps-svg .zona.sub:hover { fill: rgba(255, 228, 160, .22); }
.craps-svg .puck circle { stroke: #0b0b0d; stroke-width: 2; }
.craps-svg .puck.on circle { fill: #f6efe0; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .6)); }
.craps-svg .puck.on text { fill: #0b0b0d; font-weight: 700; font-size: 14px; font-family: var(--f-ui); }
.craps-svg .puck.off circle { fill: #141216; stroke: #f3ead7; }
.craps-svg .puck.off text { fill: #f3ead7; font-weight: 700; font-size: 13px; font-family: var(--f-ui); }

/* o modo que mostra a conta: boas acendem, ruins apagam */
.craps.mostra-conta .craps-svg .zona[data-classe="boa"] { fill: rgba(79, 214, 164, .14); stroke: #4fd6a4; stroke-width: 3; }
.craps.mostra-conta .craps-svg .zona[data-classe="media"] { fill: rgba(0, 0, 0, .18); }
.craps.mostra-conta .craps-svg .zona[data-classe="ruim"] { fill: rgba(4, 4, 6, .6); }
.craps.mostra-conta .craps-svg .zona[data-classe="ruim"]:hover { fill: rgba(4, 4, 6, .4); }
.craps-svg .rotulo-casa { font-family: var(--f-ui); font-weight: 700; font-size: 13px; }
.craps-svg .rotulo-casa.boa { fill: #6af0c0; }
.craps-svg .rotulo-casa.media { fill: #e8cf8f; }
.craps-svg .rotulo-casa.ruim { fill: #ff9a8a; }

.cr-boas { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 999px; cursor: pointer; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--latao-claro); background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(201, 164, 92, .4); }
.cr-boas input { width: 18px; height: 18px; accent-color: #4fd6a4; }
.cr-rodape .acoes { flex: 1; justify-content: flex-end; }
.cr-mensagem { position: absolute; left: 50%; top: 4%; transform: translate(-50%, 0); width: max-content; max-width: 92%; text-align: center; font-size: 20px; opacity: 0; pointer-events: none; z-index: 20; }
.cr-mensagem.mostra { animation: mensagem 3.6s ease forwards; }
.cr-ponto { position: absolute; right: 10px; top: 8px; padding: 2px 12px; border-radius: 999px; background: rgba(0, 0, 0, .55); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--latao-claro); }
.cr-ponto b { font-family: var(--f-display); font-size: 18px; color: #ffe39a; }

.escada td:first-child { font-size: 12.5px; }
.escada tr.boa td:first-child { color: var(--bom); }
.escada tr.ruim td:first-child { color: rgba(216, 204, 176, .7); }
.historico span.sete { background: rgba(179, 25, 46, .55); }

/* celular em pé: faixa dos dados no alto e o pano em três abas */
.craps.estreito .cr-topo { display: block; }
.craps.estreito .cr-pista {
  display: block; width: 100%; height: 150px; border-radius: 10px;
  background:
    repeating-linear-gradient(135deg, rgba(0, 0, 0, .35) 0 6px, rgba(255, 255, 255, .05) 6px 12px) left / 14px 100% no-repeat,
    radial-gradient(ellipse at 50% 40%, #16553f, #0a2a21);
  box-shadow: inset 0 0 0 1px rgba(201, 164, 92, .5), inset 0 10px 24px rgba(0, 0, 0, .5);
}
.craps:not(.estreito) .cr-pista { display: none; }
.craps.estreito .cr-abas { display: flex; }
.cr-abas button {
  flex: 1; min-height: 40px; border: 0; background: rgba(0, 0, 0, .35); color: var(--marfim-sujo); cursor: pointer;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(201, 164, 92, .3);
}
.cr-abas button:first-child { border-radius: 999px 0 0 999px; }
.cr-abas button:last-child { border-radius: 0 999px 999px 0; }
.cr-abas button.ativa { background: rgba(201, 164, 92, .22); color: var(--latao-claro); }
.craps.estreito .cr-banco { display: none; }
.craps.estreito .cr-dados { display: none; }

@media (max-width: 720px) {
  .cr-rodape { flex-direction: column; align-items: stretch; gap: 6px; }
  .cr-rodape .rack { justify-content: space-between; }
  .cr-rodape .acoes { justify-content: space-between; gap: 6px; }
  .cr-boas { padding: 0 8px; font-size: 10px; letter-spacing: .06em; }
  .cr-mensagem { font-size: 15px; top: 1%; }
  .craps .na-mesa { display: none; }
}