/* Custom overrides on top of DaisyUI / Tailwind */

/* ── Cartoon theme ────────────────────────────────────────────── */

[data-theme="cartoon"] {
  color-scheme: light;
  /* Colors — orange primary, dark-navy secondary, warm cream base */
  --color-primary:           oklch(70% .20 47);
  --color-primary-content:   oklch(99% 0 0);
  --color-secondary:         oklch(27% .07 253);
  --color-secondary-content: oklch(99% 0 0);
  --color-accent:            oklch(83% .17 86);
  --color-accent-content:    oklch(22% .07 253);
  --color-neutral:           oklch(27% .07 253);
  --color-neutral-content:   oklch(99% 0 0);
  --color-base-100:          oklch(99% .01 80);
  --color-base-200:          oklch(95% .02 80);
  --color-base-300:          oklch(88% .04 80);
  --color-base-content:      oklch(22% .07 253);
  --color-info:              oklch(68% .14 220);
  --color-info-content:      oklch(99% 0 0);
  --color-success:           oklch(70% .17 155);
  --color-success-content:   oklch(99% 0 0);
  --color-warning:           oklch(83% .17 86);
  --color-warning-content:   oklch(22% .07 253);
  --color-error:             oklch(64% .22 28);
  --color-error-content:     oklch(99% 0 0);
  /* Shape */
  --radius-box:      1.5rem;
  --radius-field:    0.85rem;
  --radius-selector: 1.25rem;
  --border:          2px;
  --depth:           1;
}

/* Font */
body { font-family: 'Nunito', sans-serif; }

/* Cartoon card shadow */
[data-theme="cartoon"] .card,
[data-theme="cartoon"] .modal-box {
  border: 2px solid oklch(22% .07 253 / 0.12);
  box-shadow: 4px 4px 0 oklch(22% .07 253 / 0.12);
}

/* Chunky buttons */
[data-theme="cartoon"] .btn {
  font-weight: 700;
  letter-spacing: 0.01em;
  border-width: 2px;
  box-shadow: 3px 3px 0 oklch(22% .07 253 / 0.18);
  transition: box-shadow 0.1s, transform 0.1s;
}
[data-theme="cartoon"] .btn:hover:not(:disabled) {
  box-shadow: 1px 1px 0 oklch(22% .07 253 / 0.18);
  transform: translate(2px, 2px);
}
[data-theme="cartoon"] .btn:active:not(:disabled) {
  box-shadow: none;
  transform: translate(3px, 3px);
}

/* Badge punch */
[data-theme="cartoon"] .badge {
  font-weight: 700;
  border-width: 2px;
}

.log-box {
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
  font-size: 0.72rem;
  line-height: 1.6;
}

/* Keep table header sticky when scrolling */
.table-pin-rows thead tr th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* ── Draw page animations ─────────────────────────────────────── */

@keyframes draw-spin {
  0%   { opacity: 0.4; transform: translateY(6px) scale(0.97); filter: blur(1.5px); }
  50%  { opacity: 0.9; transform: translateY(-4px) scale(1);   filter: blur(0px); }
  100% { opacity: 0.4; transform: translateY(6px) scale(0.97); filter: blur(1.5px); }
}

.draw-spin-anim {
  animation: draw-spin 0.15s ease-in-out infinite;
}

@keyframes dice-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.dice-spinning {
  display: inline-block;
  animation: dice-spin 0.6s linear infinite;
  transform-origin: center;
}

/* ── 3D Dice component (80px, scaled from 200px reference) ──── */
.dice3d-wrapper {
  position: relative;
  width: 80px;
  height: 80px;
  perspective: 480px;
  flex-shrink: 0;
}

.dice3d-platform {
  position: relative;
  width: 80px;
  height: 80px;
  transform-style: preserve-3d;
}

.dice3d-el {
  position: absolute;
  width: 80px;
  height: 80px;
  transform-style: preserve-3d;
  animation: dice3d-spin 3s infinite linear;
}

@keyframes dice3d-spin {
  0%   { transform: translateZ(-40px) rotateX(0deg)   rotateY(0deg)   rotateZ(0deg); }
  16%  { transform: translateZ(-40px) rotateX(180deg) rotateY(180deg) rotateZ(0deg); }
  33%  { transform: translateZ(-40px) rotateX(360deg) rotateY(90deg)  rotateZ(180deg); }
  50%  { transform: translateZ(-40px) rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
  66%  { transform: translateZ(-40px) rotateX(180deg) rotateY(360deg) rotateZ(270deg); }
  83%  { transform: translateZ(-40px) rotateX(270deg) rotateY(180deg) rotateZ(180deg); }
  100% { transform: translateZ(-40px) rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}

.dice3d-side {
  position: absolute;
  width: 80px;
  height: 80px;
  background: #fff;
  box-shadow: inset 0 0 16px #ccc;
  border-radius: 16px;
}

.dice3d-el .dice3d-inner,
.dice3d-el .dice3d-cover {
  background: #e0e0e0;
  box-shadow: none;
}

.dice3d-el .dice3d-cover { border-radius: 0; transform: translateZ(0); }
.dice3d-el .dice3d-cover.x { transform: rotateY(90deg); }
.dice3d-el .dice3d-cover.z { transform: rotateX(90deg); }

.dice3d-el .dice3d-front         { transform: translateZ(40px); }
.dice3d-el .dice3d-front.dice3d-inner  { transform: translateZ(39px); }
.dice3d-el .dice3d-back          { transform: rotateX(-180deg) translateZ(40px); }
.dice3d-el .dice3d-back.dice3d-inner   { transform: rotateX(-180deg) translateZ(39px); }
.dice3d-el .dice3d-right         { transform: rotateY(90deg) translateZ(40px); }
.dice3d-el .dice3d-right.dice3d-inner  { transform: rotateY(90deg) translateZ(39px); }
.dice3d-el .dice3d-left          { transform: rotateY(-90deg) translateZ(40px); }
.dice3d-el .dice3d-left.dice3d-inner   { transform: rotateY(-90deg) translateZ(39px); }
.dice3d-el .dice3d-top           { transform: rotateX(90deg) translateZ(40px); }
.dice3d-el .dice3d-top.dice3d-inner    { transform: rotateX(90deg) translateZ(39px); }
.dice3d-el .dice3d-bottom        { transform: rotateX(-90deg) translateZ(40px); }
.dice3d-el .dice3d-bottom.dice3d-inner { transform: rotateX(-90deg) translateZ(39px); }

/* Dots — 18px circles, positions scaled 0.4× from 200px reference */
.dice3d-dot {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #333;
  box-shadow: inset 2px 0 4px #000;
}

.dice3d-dot.center       { margin: 31px 0 0 31px; }
.dice3d-dot.dtop         { margin-top: 8px; }
.dice3d-dot.dleft        { margin-left: 54px; }
.dice3d-dot.dright       { margin-left: 8px; }
.dice3d-dot.dbottom      { margin-top: 54px; }
.dice3d-dot.center.dleft  { margin: 31px 0 0 8px; }
.dice3d-dot.center.dright { margin: 31px 0 0 54px; }

.dice3d-el .dice3d-front .dice3d-dot { width: 26px; height: 26px; margin: 27px 0 0 27px; background: #e53e3e; box-shadow: inset 2px 0 4px #9b1c1c; }

@keyframes draw-reveal {
  0%   { opacity: 0; transform: scale(0.92) translateY(8px); }
  60%  { transform: scale(1.04) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.draw-reveal {
  animation: draw-reveal 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Confetti */
@keyframes confetti-fall {
  0%   { transform: translateY(-10px) translateX(0) rotate(0deg);   opacity: 1; }
  100% { transform: translateY(110vh) translateX(var(--drift, 0px)) rotate(900deg); opacity: 0; }
}

.confetti-piece {
  position: absolute;
  top: 10%;
  border-radius: 3px;
  animation: confetti-fall 3s ease-in forwards;
}