/* ==========================================================================
   LOVE DICE - four capsule dice that shake, get thrown, bounce and settle.
   Pips are drawn as Feel & Joy capsules, not round dots, so the dice read as ours.
   Scope: games/dice only. Loaded by app/Views/games/dice.php.
   ========================================================================== */

.fp-dg-hero { position: relative; padding-top: 34px; overflow: hidden; }

.fp-dg-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-bottom: 20px; font-size: .78rem; color: var(--text-3); }
.fp-dg-crumbs a { color: var(--text-3); text-decoration: none; }
.fp-dg-crumbs a:hover { color: var(--t2); }

.fp-dg { position: relative; z-index: 1; text-align: center; }
.fp-dg__head h1 { margin-bottom: .3em; font-size: var(--fs-2xl); }
.fp-dg__sub { max-width: 58ch; margin: 0 auto; color: var(--text-2); }
.fp-dg__modes { justify-content: center; margin-top: 20px; }

/* Heat bars inside the mode chips. */
.fp-dg-flame { display: inline-flex; gap: 2px; margin-right: .45rem; }
.fp-dg-flame i { display: block; width: 4px; height: 11px; border-radius: 2px 2px 5px 5px; background: var(--g-heat); }

/* ---------- board ---------- */
.fp-dg__board { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(12px, 3vw, 30px); padding: clamp(34px, 7vw, 62px) 0 14px; perspective: 1200px; perspective-origin: 50% 32%; }
.fp-dg__slot { --s: clamp(76px, 18.5vw, 128px); --d: calc(var(--i) * .07s); position: relative; display: flex; flex-direction: column; align-items: center; }

/* Shockwave that snaps out of the die when you lock it. */
.fp-dg__slot::before {
  content: ''; position: absolute; top: 0; left: 50%; z-index: 2;
  width: var(--s); height: var(--s); margin-left: calc(var(--s) / -2);
  border: 2px solid var(--t2); border-radius: calc(var(--s) * .22);
  opacity: 0; pointer-events: none;
}
.fp-dg__slot.is-ring::before { animation: fp-dg-ring .62s var(--ease-out); }
@keyframes fp-dg-ring {
  0%   { opacity: .9; transform: scale(.78); box-shadow: 0 0 0 0 color-mix(in srgb, var(--t1) 55%, transparent); }
  100% { opacity: 0; transform: scale(1.45); box-shadow: 0 0 34px 10px transparent; }
}

.fp-dg-die {
  position: relative; display: block; width: var(--s); height: var(--s);
  padding: 0; border: 0; background: none; font: inherit; color: inherit;
  overflow: visible; cursor: pointer; -webkit-appearance: none; appearance: none;
  transform-style: preserve-3d;
}
.fp-dg-die:focus-visible { outline: 2px solid var(--t2); outline-offset: 10px; border-radius: 8px; }

.fp-dg-die__cube { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(-22deg) rotateY(26deg); transition: transform 1.15s cubic-bezier(.2, .82, .26, 1.03); }

.fp-dg-die__f {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .42em;
  padding: 8px 6px; border-radius: calc(var(--s) * .2); text-align: center; color: #fff; backface-visibility: hidden;
  background:
    radial-gradient(120% 90% at 22% 10%, rgba(255, 255, 255, .3), transparent 56%),
    linear-gradient(150deg, var(--t1), var(--t3));
  border: 1px solid rgba(255, 255, 255, .24);
  box-shadow: inset 0 0 26px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.fp-dg-die__f:nth-child(1) { transform: translateZ(calc(var(--s) / 2)); }
.fp-dg-die__f:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.fp-dg-die__f:nth-child(3) { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.fp-dg-die__f:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.fp-dg-die__f:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.fp-dg-die__f:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }

.fp-dg-die__word { font-family: var(--f-display); font-style: italic; font-size: clamp(.6rem, .32rem + .92vw, .95rem); line-height: 1.06; text-wrap: balance; text-shadow: 0 1px 6px rgba(0, 0, 0, .55); }

/* Capsule pips: half white, half heat, like the tablets. */
.fp-dg-die__pips { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; max-width: 74%; }
.fp-dg-die__pips i { display: block; width: calc(var(--s) * .085); height: calc(var(--s) * .042); border-radius: 999px; background: linear-gradient(90deg, rgba(255, 255, 255, .95) 0 50%, var(--t2) 50%); box-shadow: 0 0 7px rgba(255, 255, 255, .45); }

.fp-dg-die__lock { position: absolute; top: -9px; right: -9px; z-index: 3; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink-900); border: 1px solid var(--line-strong); color: var(--t2); opacity: 0; transform: scale(.4) rotate(-40deg); transition: opacity .25s var(--ease-out), transform .25s var(--ease-spring); }
.fp-dg-die__lock .ic { width: 15px; height: 15px; }
.fp-dg-die.is-locked .fp-dg-die__lock { opacity: 1; transform: scale(1) rotate(0); box-shadow: 0 0 20px -4px var(--t1); }

/* ---------- tap feedback ---------- */
@keyframes fp-dg-press {
  0%   { transform: translateY(0) scale(1); }
  28%  { transform: translateY(6px) scaleX(1.12) scaleY(.84); }
  55%  { transform: translateY(-9px) scaleX(.95) scaleY(1.08); }
  78%  { transform: translateY(2px) scaleX(1.04) scaleY(.96); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes fp-dg-shakeoff {
  0%, 100% { transform: rotate(0) translateY(0); }
  20% { transform: rotate(-8deg) translateY(-5px); }
  45% { transform: rotate(7deg) translateY(0); }
  70% { transform: rotate(-3deg); }
}
.fp-dg-die.is-press   { animation: fp-dg-press .5s var(--ease-out); }
.fp-dg-die.is-unpress { animation: fp-dg-shakeoff .46s var(--ease-out); }

/* A locked die keeps breathing so you can see it is being held. */
@keyframes fp-dg-held { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.16); } }
.fp-dg-die.is-locked .fp-dg-die__cube { animation: fp-dg-held 2.4s ease-in-out infinite; }

@media (hover: hover) {
  .fp-dg-die { transition: transform .3s var(--ease-out); }
  .fp-dg:not(.is-rolling) .fp-dg-die:hover { transform: translateY(-7px); }
}
.fp-dg-die.is-locked .fp-dg-die__f { border-color: color-mix(in srgb, var(--t2) 70%, transparent); box-shadow: inset 0 0 26px rgba(0, 0, 0, .45), 0 0 0 2px color-mix(in srgb, var(--t2) 45%, transparent), 0 0 30px -6px var(--t1); }

.fp-dg__shadow { width: 66%; height: 12px; margin-top: 8px; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .8), transparent 70%); filter: blur(3px); opacity: .6; }
.fp-dg__label { margin-top: 12px; font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.fp-dg-die.is-locked ~ .fp-dg__label { color: var(--t2); }

/* ---------- throw ---------- */
@keyframes fp-dg-shake {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  15%  { transform: translate3d(-5px, 3px, 0) rotate(-4deg); }
  30%  { transform: translate3d(5px, -4px, 0) rotate(4deg); }
  45%  { transform: translate3d(-4px, -3px, 0) rotate(-3deg); }
  60%  { transform: translate3d(4px, 3px, 0) rotate(3deg); }
  80%  { transform: translate3d(-2px, 1px, 0) rotate(-1.5deg); }
}
@keyframes fp-dg-throw {
  0%   { transform: translateY(0) scale(1); }
  16%  { transform: translateY(calc(var(--s) * -1.2)) scale(1.08); }
  40%  { transform: translateY(4px) scaleX(1.12) scaleY(.86); }
  52%  { transform: translateY(calc(var(--s) * -.44)) scaleX(.96) scaleY(1.07); }
  68%  { transform: translateY(3px) scaleX(1.07) scaleY(.93); }
  80%  { transform: translateY(calc(var(--s) * -.15)) scale(1); }
  92%  { transform: translateY(2px) scaleX(1.03) scaleY(.97); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes fp-dg-shadow {
  0%, 100% { transform: scale(1); opacity: .6; }
  16% { transform: scale(.5); opacity: .2; }
  40% { transform: scale(1.2); opacity: .85; }
  52% { transform: scale(.76); opacity: .38; }
  68% { transform: scale(1.12); opacity: .72; }
  80% { transform: scale(.9); opacity: .55; }
}
.fp-dg__slot.is-throwing .fp-dg-die { animation: fp-dg-shake .34s ease-in-out var(--d) both, fp-dg-throw 1.15s cubic-bezier(.3, .7, .35, 1) calc(var(--d) + .34s) both; }
.fp-dg__slot.is-throwing .fp-dg__shadow { animation: fp-dg-shadow 1.15s cubic-bezier(.3, .7, .35, 1) calc(var(--d) + .34s) both; }
.fp-dg.is-rolling .fp-dg-die { cursor: default; }

/* Embers thrown off on landing. */
.fp-dg-spark { position: absolute; top: 46%; left: 50%; z-index: 2; width: 6px; height: 6px; border-radius: 999px; background: var(--t2); pointer-events: none; box-shadow: 0 0 12px var(--t1); animation: fp-dg-spark .72s ease-out forwards; }
@keyframes fp-dg-spark {
  from { transform: translate(-50%, -50%) rotate(var(--a)) translateX(6px) scale(1); opacity: 1; }
  to   { transform: translate(-50%, -50%) rotate(var(--a)) translateX(var(--r)) scale(0); opacity: 0; }
}

/* The whole board takes the hit when the dice land. */
@keyframes fp-dg-hit { 0%, 100% { transform: translateY(0); } 34% { transform: translateY(6px); } 66% { transform: translateY(-2px); } }
.fp-dg__board.is-hit { animation: fp-dg-hit .34s ease-out; }

/* ---------- result ---------- */
.fp-dg__result { min-height: 3.1em; margin: 18px 0 0; font-family: var(--f-display); font-style: italic; font-size: var(--fs-xl); text-wrap: balance; }
.fp-dg__result .is-dot { color: var(--t2); opacity: .55; }
.fp-dg__result span { display: inline-block; opacity: 0; animation: fp-dg-word .55s var(--ease-spring) forwards; animation-delay: calc(var(--n) * .07s); }
@keyframes fp-dg-word { from { opacity: 0; transform: translateY(16px) rotate(4deg) scale(.86); } to { opacity: 1; transform: none; } }

.fp-dg__heat { width: min(420px, 78%); height: 6px; margin: 14px auto 0; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.fp-dg__heat i { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--g-heat); box-shadow: 0 0 18px -2px var(--t1); transition: width .9s var(--ease-out); }

.fp-dg__actions { justify-content: center; margin-top: 20px; }
.fp-dg__hint { margin-top: 12px; font-size: .8rem; color: var(--text-3); }
.fp-dg__streak { margin-top: 8px; font-size: .82rem; font-weight: 700; color: var(--t2); }
.fp-dg__consent { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; margin-top: 10px; }
.fp-dg__consent .ic { width: 15px; height: 15px; }

/* ---------- the readable half of the page ---------- */
.fp-dg-read { padding-top: 0; }
.fp-dg-read h2 { font-size: var(--fs-xl); }
.fp-dg-read__lead { max-width: 64ch; margin: 0 0 22px; color: var(--text-2); }
.fp-dg-read__note { margin-top: 20px; font-size: .88rem; color: var(--text-3); }
.fp-dg-read__note .ic { width: 15px; height: 15px; vertical-align: -3px; }
.fp-dg-read__note a { color: var(--t2); }

.fp-dg-faces { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.fp-dg-faces__col { padding: 18px 20px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(165deg, color-mix(in srgb, var(--t1) 12%, var(--ink-850)), var(--ink-900)); }
.fp-dg-faces__col h3 { margin-bottom: .6rem; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--t2); font-family: inherit; font-style: normal; }
.fp-dg-faces ol { counter-reset: face; margin: 0; padding: 0; list-style: none; }
.fp-dg-faces li { counter-increment: face; display: flex; align-items: center; gap: .65rem; padding: .46rem 0; border-top: 1px solid var(--line); font-size: .92rem; }
.fp-dg-faces li::before { content: counter(face); flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 15px; border-radius: 999px; background: linear-gradient(90deg, rgba(255, 255, 255, .92) 0 50%, var(--t1) 50%); color: var(--ink-900); font-size: .58rem; font-weight: 800; }

/* Steps on the left, the heart-and-pills panel on the right. */
.fp-dg-how { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(22px, 5vw, 54px); align-items: start; }
@media (max-width: 880px) { .fp-dg-how { grid-template-columns: 1fr; } }

.fp-dg-art {
  position: relative; overflow: hidden; padding: 24px 24px 26px; border: 1px solid var(--line); border-radius: 26px;
  background:
    radial-gradient(120% 85% at 82% 0%, color-mix(in srgb, var(--t1) 28%, transparent), transparent 62%),
    linear-gradient(165deg, var(--ink-850), var(--ink-900));
}
.fp-dg-art__badge { display: inline-flex; align-items: center; gap: .4rem; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(10, 4, 9, .5); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--t2); }
.fp-dg-art__badge .ic { width: 14px; height: 14px; }

.fp-dg-art__draw { display: block; width: 100%; max-width: 340px; margin: 6px auto 4px; }
.fp-dg-art__draw .hf { stroke: var(--t2); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 300; stroke-dashoffset: 300; animation: fp-dg-draw 1.7s var(--ease-out) forwards; }
.fp-dg-art__draw .hf--b { stroke: var(--t1); animation-delay: .28s; }
@keyframes fp-dg-draw { to { stroke-dashoffset: 0; } }

.fp-dg-art__draw .fl path { stroke: var(--t1); stroke-width: 1.5; stroke-linejoin: round; fill: color-mix(in srgb, var(--t1) 30%, transparent); animation: fp-dg-flick 2.8s ease-in-out infinite; }
@keyframes fp-dg-flick { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }

.fp-dg-art__draw .caps { stroke: var(--t2); stroke-width: 1.6; opacity: .5; animation: fp-dg-flick 4.4s ease-in-out infinite reverse; }

.fp-dg-art__kicker { margin: 12px 0 10px; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.fp-dg-art__lines { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fp-dg-art__lines li {
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255, 255, 255, .03);
  font-family: var(--f-display); font-style: italic; font-size: 1rem; line-height: 1.25; text-wrap: balance;
  animation: fp-dg-cycle 6s linear infinite; animation-delay: calc(var(--n) * 2s);
}
@keyframes fp-dg-cycle {
  0%, 28%   { opacity: 1; border-color: color-mix(in srgb, var(--t1) 55%, transparent); }
  36%, 100% { opacity: .48; border-color: var(--line); }
}

.fp-dg-steps { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.fp-dg-steps li { display: flex; align-items: flex-start; gap: 14px; }
.fp-dg-steps h3 { margin-bottom: .2rem; font-size: 1.05rem; }
.fp-dg-steps p { margin: 0; color: var(--text-2); font-size: .92rem; max-width: 62ch; }
.fp-dg-steps__n { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(145deg, var(--t1), var(--t3)); color: #fff; font-size: .85rem; font-weight: 800; box-shadow: 0 0 26px -8px var(--t1); }

.fp-dg-faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; }
.fp-dg-faq__q { padding: 17px 19px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, .02); }
.fp-dg-faq h3 { margin-bottom: .35rem; font-size: 1.02rem; }
.fp-dg-faq p { margin: 0; color: var(--text-2); font-size: .91rem; }

.fp-dg-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.fp-dg-more a { display: flex; align-items: center; gap: 13px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, .02); color: var(--text); text-decoration: none; transition: transform .3s var(--ease-out), border-color .3s; }
.fp-dg-more a:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--t1) 60%, transparent); }
.fp-dg-more .ic { flex: 0 0 auto; width: 26px; height: 26px; color: var(--t2); }
.fp-dg-more span { display: block; font-size: .85rem; color: var(--text-2); }
.fp-dg-more b { display: block; margin-bottom: .15rem; font-family: var(--f-display); font-size: 1.06rem; color: var(--text); }

@media (max-width: 560px) {
  .fp-dg__board { gap: 10px 8px; }
  .fp-dg__slot { --s: clamp(66px, 21vw, 92px); }
}

@media (prefers-reduced-motion: reduce) {
  .fp-dg__slot.is-throwing .fp-dg-die,
  .fp-dg__slot.is-throwing .fp-dg__shadow,
  .fp-dg__slot.is-ring::before,
  .fp-dg-die.is-press,
  .fp-dg-die.is-unpress,
  .fp-dg-die.is-locked .fp-dg-die__cube,
  .fp-dg__board.is-hit { animation: none; }
  .fp-dg:not(.is-rolling) .fp-dg-die:hover { transform: none; }
  .fp-dg-die__cube { transition-duration: .01ms; }
  .fp-dg__result span { opacity: 1; animation: none; }
  .fp-dg-spark { display: none; }
  /* The heart is drawn by the animation, so hand it over already drawn. */
  .fp-dg-art__draw .hf { stroke-dashoffset: 0; animation: none; }
  .fp-dg-art__draw .fl path,
  .fp-dg-art__draw .caps,
  .fp-dg-art__lines li { animation: none; }
  .fp-dg-art__lines li:first-child { border-color: color-mix(in srgb, var(--t1) 55%, transparent); }
}