/* ============================================================================
   Dados de ideia (shared/dados-ideia.js). The 3D die is the Mesa's
   (mesa/mesa.css): cream faces, thick ink edge, falls rolling and lands.
   Text colors follow the container (currentColor), so it works on the
   Sketch paper and on the dark box of the trilha. --adi-mc = the world's color.
   ========================================================================== */
.adi {
  --adi-lado: 60px;
  --adi-m-fantasia: #8B6CD6; --adi-m-futuro: #2F8FC9; --adi-m-dia: #D59B25; --adi-m-brasil: #2E9A5E; --adi-m-sombrio: #8A7F95;
  display: grid; gap: 12px; justify-items: center; color: inherit; font-family: 'Poppins', system-ui, sans-serif;
}
.adi__dados { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; }
.adi__dado {
  -webkit-appearance: none; appearance: none; margin: 0; padding: 6px 4px 4px; border: 0; background: none; color: inherit; font: inherit;
  display: grid; justify-items: center; align-content: start; gap: 3px; width: 112px; padding-inline: 2px; text-align: center; border-radius: 12px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.adi__dado.is-fixo { cursor: default; }
.adi__dado:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.adi__txt { display: block; min-height: 2.6em; font-weight: 700; font-size: 13.5px; line-height: 1.3; transition: opacity .2s ease; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.adi__txt::before { content: ''; display: block; width: 30px; height: 3px; margin: 0 auto 5px; border-radius: 2px; background: var(--adi-mc, currentColor); }
.adi__dado.is-caindo .adi__txt { opacity: .15; }
.adi__dado.is-regra .adi__txt { display: none; }
.adi__rot { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.adi__dado.is-seg .adi__rot { opacity: 1; }
.adi__dado.is-seg .adi-d3__face:first-of-type { background: #FFD66E; }
.adi__dado.is-fixo .adi-d3__face:first-of-type { background: #E9E2F7; }

.adi__frase { margin: 0; max-width: 36ch; font-weight: 800; font-size: clamp(16px, 2.2vw, 21px); line-height: 1.35; text-align: center; text-wrap: balance; }
.adi__regra { margin: -4px 0 0; font-size: 14px; font-weight: 600; text-align: center; opacity: .85; }
.adi__acoes { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 12px; }
.adi__trocar {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; margin: 0;
  border: 1.6px solid currentColor; border-radius: 12px; background: transparent; color: inherit; font: 700 14px/1.1 'Poppins', system-ui, sans-serif; cursor: pointer;
}
.adi__trocar:hover:not(:disabled) { background: color-mix(in srgb, currentColor 10%, transparent); }
.adi__trocar:disabled { opacity: .55; cursor: default; }
.adi__trocar:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.adi__pips { display: inline-flex; gap: 4px; }
.adi__pips i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; background: currentColor; }
.adi__pips i.is-gasta { background: transparent; opacity: .5; }
.adi__dica { font-size: 12.5px; opacity: .7; }

/* ── the 3D die (Mesa) ── */
.adi-d3 { --lado: var(--adi-lado); position: relative; display: block; width: var(--lado); height: var(--lado); margin: 2px auto 12px; perspective: 600px; }
.adi-d3__cubo { position: absolute; inset: 0; transform-style: preserve-3d; transform: var(--pose); }
.adi-d3__face {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 1px; padding: 8%;
  background: #F6F2E9; color: #161413; border: calc(var(--lado) * .05) solid #161413; border-radius: 17%;
  -webkit-backface-visibility: hidden; backface-visibility: hidden; text-align: center;
}
.adi-d3__face small { font: 800 calc(var(--lado) * .13)/1 'Poppins', system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.adi-d3__face b { font: 400 calc(var(--lado) * .42)/1 'DK Lemon Yellow Sun', 'DK Lemon', 'Lilita One', 'Poppins', sans-serif; }
.adi-d3__face:nth-of-type(1) { transform: translateZ(calc(var(--lado) / 2)); }
.adi-d3__face:nth-of-type(2) { transform: rotateY(90deg) translateZ(calc(var(--lado) / 2)); background: #E6DFD2; }
.adi-d3__face:nth-of-type(3) { transform: rotateY(180deg) translateZ(calc(var(--lado) / 2)); }
.adi-d3__face:nth-of-type(4) { transform: rotateY(-90deg) translateZ(calc(var(--lado) / 2)); background: #E6DFD2; }
.adi-d3__face:nth-of-type(5) { transform: rotateX(90deg) translateZ(calc(var(--lado) / 2)); background: #FFFDF6; }
.adi-d3__face:nth-of-type(6) { transform: rotateX(-90deg) translateZ(calc(var(--lado) / 2)); background: #D9D1C3; }
.adi-d3__miolo { position: absolute; inset: 4%; background: #161413; border-radius: 12%; }
.adi-d3__miolo:nth-of-type(1) { transform: rotateY(90deg); }
.adi-d3__miolo:nth-of-type(2) { transform: rotateX(90deg); }
.adi-d3__sombra { position: absolute; left: 10%; right: 10%; bottom: calc(var(--lado) * -.22); height: calc(var(--lado) * .14); border-radius: 50%; background: rgba(0, 0, 0, .4); filter: blur(5px); z-index: -1; }
.adi-d3.is-rolando { animation: adiCai 1.1s cubic-bezier(.3, .1, .3, 1) var(--adi-d, 0s) both; }
.adi-d3.is-rolando .adi-d3__cubo { animation: adiGira 1.1s cubic-bezier(.2, .75, .3, 1) var(--adi-d, 0s) both; }
@keyframes adiCai { 0% { transform: translate(-40px, -90px); opacity: 0; } 12% { opacity: 1; } 42% { transform: translate(0, 0); } 56% { transform: translateY(-16px); } 70% { transform: translateY(0); } 80% { transform: translateY(-5px); } 90%, 100% { transform: translateY(0); } }
@keyframes adiGira { from { transform: rotateX(var(--adi-rx, 540deg)) rotateY(var(--adi-ry, 420deg)) rotateZ(90deg); } to { transform: var(--pose) rotateZ(0deg); } }

/* small screens and short panels: smaller dice */
@media (max-width: 480px), (max-height: 640px) {
  .adi { --adi-lado: 48px; gap: 9px; }
  .adi__dados { gap: 6px 8px; }
  .adi__dado { width: 90px; }
  .adi__txt { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .adi-d3.is-rolando, .adi-d3.is-rolando .adi-d3__cubo { animation: none; }
}