/* =========================================================
   DICE.PHP - extra CSS (scoped)
   Tabletop Dice Roller - Brickvansteen style
========================================================= */

/* === LAYOUT & STRUCTURE === */
body.dice-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.dice-page main.page-shell {
  flex: 1;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: transparent !important;
  min-height: 0 !important;
}

body.dice-page .footer {
  margin-top: auto;
}

body.dice-page main.page-shell > .hero {
  margin-bottom: 0;
}

/* === DICE HERO SECTION (Movies style) === */
.hero.dice-hero {
  padding: 80px 0;
  background: linear-gradient(135deg, var(--primary-light), var(--secondary)),
    var(--hero-bg, none);
  border-bottom: 4px solid var(--comic-border, #111);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.hero.dice-hero .hero-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

@media (max-width: 1024px) {
  .hero.dice-hero .hero-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* Hero text */
.hero.dice-hero .hero-text h1 {
  font-family: var(--font-heading);
  font-size: 3.2rem;
  margin-bottom: 1.5rem;
  text-shadow: 4px 4px 0 var(--comic-border, #111);
  line-height: 1.1;
  color: #ffffff;
}

@media (max-width: 768px) {
  .hero.dice-hero .hero-text h1 {
    font-size: 2.5rem;
  }
}

.hero.dice-hero .hero-content {
  margin-bottom: 2rem;
}

.hero.dice-hero .hero-content p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 1.2rem;
  color: var(--text, #333);
}

.hero.dice-hero .highlight-text {
  background: rgba(255, 215, 0, 0.2);
  border: 3px solid var(--comic-border, #111);
  border-radius: 12px;
  padding: 14px 18px;
  margin-top: 1.5rem;
  font-weight: 900;
  box-shadow: var(--comic-shadow-small, 2px 2px 0 #111);
  font-size: 1rem;
}

/* Hero actions */
.hero.dice-hero .hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.hero.dice-hero .cta-button {
  padding: 14px 24px;
  font-size: 1.1rem;
  font-weight: 900;
  border: 3px solid var(--comic-border, #111);
  border-radius: 12px;
  background: var(--primary, #FFD700);
  color: var(--text, #111);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--comic-shadow-small, 2px 2px 0 #111);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.hero.dice-hero .cta-button:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--comic-shadow, 4px 4px 0 #111);
  background: #FFED4E;
}

.hero.dice-hero .cta-button--alt {
  background: transparent;
  border-color: var(--comic-border, #111);
}

.hero.dice-hero .cta-button--alt:hover {
  background: rgba(255, 215, 0, 0.1);
}

/* Hero visual */
.hero.dice-hero .hero-visual {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Visual card */
.hero.dice-hero .visual-card {
  border: 4px solid var(--comic-border, #111);
  border-radius: 18px;
  box-shadow: var(--comic-shadow, 4px 4px 0 #111);
  background: rgba(255,255,255,.95);
  overflow: hidden;
  padding: 24px;
}

.hero.dice-hero .visual-card-top {
  margin-bottom: 20px;
}

.hero.dice-hero .badge-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero.dice-hero .badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 3px solid var(--comic-border, #111);
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  box-shadow: var(--comic-shadow-small, 2px 2px 0 #111);
  font-weight: 900;
  font-size: 0.95rem;
}

/* Dice in hero - WITH COLORS */
.hero.dice-hero .dice-wrap--hero {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 10px;
}

.hero.dice-hero .dice-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: transform 0.3s ease;
}

.hero.dice-hero .dice-btn:hover {
  transform: scale(1.05);
}

.hero.dice-hero .dice {
  width: 100px;
  height: 100px;
  position: relative;
  transform-style: preserve-3d;
}

.hero.dice-hero .dice-hint {
  flex: 1;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text, #333);
}

.hero.dice-hero .dice-mini-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.hero.dice-hero .movie-night-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 2px solid var(--comic-border, #111);
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  box-shadow: var(--comic-shadow-small, 2px 2px 0 #111);
  font-weight: 900;
  font-size: 0.8rem;
}

/* Stats box */
.hero.dice-hero .stats-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.hero.dice-hero .stat {
  border: 3px solid var(--comic-border, #111);
  border-radius: 18px;
  padding: 20px;
  background: rgba(255,255,255,.95);
  box-shadow: var(--comic-shadow-small, 2px 2px 0 #111);
  text-align: center;
}

.hero.dice-hero .stat-number {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 1000;
  text-shadow: 3px 3px 0 var(--comic-border, #111);
  margin-bottom: 8px;
  color: var(--primary, #FFD700);
}

.hero.dice-hero .stat-label {
  font-weight: 900;
  font-size: 0.95rem;
  color: var(--text, #333);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Dice faces in hero - WITH GOLD COLOR */
.hero.dice-hero .dice-face {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid var(--comic-border, #111);
  border-radius: 16px;
  background: linear-gradient(145deg, #FFD700, #FFC107);
  display: flex;
  justify-content: center;
  align-items: center;
  backface-visibility: hidden;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
}

.hero.dice-hero .face-1 { transform: rotateY(0deg) translateZ(50px); }
.hero.dice-hero .face-2 { transform: rotateY(180deg) translateZ(50px); }
.hero.dice-hero .face-3 { transform: rotateY(90deg) translateZ(50px); }
.hero.dice-hero .face-4 { transform: rotateY(-90deg) translateZ(50px); }
.hero.dice-hero .face-5 { transform: rotateX(90deg) translateZ(50px); }
.hero.dice-hero .face-6 { transform: rotateX(-90deg) translateZ(50px); }

.hero.dice-hero .pips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 80px;
  height: 80px;
  gap: 6px;
}

.hero.dice-hero .pip {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #111;
  opacity: 0;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.hero.dice-hero .pip.show {
  opacity: 1;
  animation: pip-pop 0.3s ease;
}

@keyframes pip-pop {
  0% { transform: scale(0); }
  70% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* === DICE ROLLER SECTION === */
.dice-section {
  padding: 40px 0 64px;
  background: var(--bg, #f7f7f7);
}

.section-sub {
  max-width: 780px;
  margin: 10px auto 0;
  color: var(--muted, #666);
  line-height: 1.5;
}

/* Layout */
.dice-layout {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 1050px) {
  .dice-layout {
    grid-template-columns: 1fr;
  }
}

/* Cards */
.dice-card {
  border: 4px solid var(--comic-border, #111);
  border-radius: 18px;
  box-shadow: var(--comic-shadow, 4px 4px 0 #111);
  background: rgba(255,255,255,.92);
  overflow: hidden;
}

.dice-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 4px solid var(--comic-border, #111);
  background: rgba(255,255,255,.95);
}

.dice-card__head h3 {
  margin: 0;
  font-family: var(--font-heading);
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 var(--comic-border, #111);
}

.dice-card__body {
  padding: 14px 16px 16px;
}

/* Small button */
.cta-button--sm {
  padding: 10px 12px !important;
  font-size: 0.98rem !important;
}

/* Preset chips - WORKING */
.dice-presets {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.dice-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 3px solid var(--comic-border, #111);
  border-radius: 999px;
  background: var(--panel, #fff);
  box-shadow: var(--comic-shadow-small, 2px 2px 0 #111);
  font-weight: 900;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  white-space: nowrap;
  font-size: 0.9rem;
  border: none;
  font-family: inherit;
}

.dice-chip:hover {
  transform: translate(-1px,-1px);
  box-shadow: var(--comic-shadow, 4px 4px 0 #111);
  background: rgba(255, 215, 0, 0.1);
}

.dice-chip:active {
  transform: translate(0, 0);
  box-shadow: var(--comic-shadow-small, 2px 2px 0 #111);
}

/* Preset colors */
.dice-chip[data-preset="attack"],
.dice-chip[data-preset="adv"],
.dice-chip[data-preset="dis"],
.dice-chip[data-preset="initiative"] {
  border-color: #073B4C !important;
  background: linear-gradient(145deg, #073B4C11, #002B3611) !important;
}

.dice-chip[data-preset="damage"],
.dice-chip[data-preset="fireball"] {
  border-color: #4ECDC4 !important;
  background: linear-gradient(145deg, #4ECDC411, #26A69A11) !important;
}

.dice-chip[data-preset="heal"] {
  border-color: #06D6A0 !important;
  background: linear-gradient(145deg, #06D6A011, #00C85311) !important;
}

.dice-chip[data-preset="stats"] {
  border-color: #FF6B6B !important;
  background: linear-gradient(145deg, #FF6B6B11, #FF525211) !important;
}

.dice-chip[data-preset="percent"] {
  border-color: #7209B7 !important;
  background: linear-gradient(145deg, #7209B711, #560BAD11) !important;
}

/* Pool rows */
.dice-pool {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0 14px;
}

.dice-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 3px solid var(--comic-border, #111);
  border-radius: 14px;
  background: rgba(255,255,255,.88);
  box-shadow: var(--comic-shadow-small, 2px 2px 0 #111);
}

.dice-row__left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
}

.dice-row__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 3px solid var(--comic-border, #111);
  border-radius: 999px;
  background: rgba(255,215,0,.20);
  box-shadow: var(--comic-shadow-small, 2px 2px 0 #111);
  font-weight: 900;
}

/* Dice row colors */
.dice-row[data-key="d4"] .dice-row__badge {
  background: linear-gradient(145deg, #FF6B6B22, #FF525222) !important;
  border-color: #FF6B6B !important;
}

.dice-row[data-key="d6"] .dice-row__badge {
  background: linear-gradient(145deg, #4ECDC422, #26A69A22) !important;
  border-color: #4ECDC4 !important;
}

.dice-row[data-key="d8"] .dice-row__badge {
  background: linear-gradient(145deg, #FFD16622, #FFC10722) !important;
  border-color: #FFD166 !important;
}

.dice-row[data-key="d10"] .dice-row__badge {
  background: linear-gradient(145deg, #06D6A022, #00C85322) !important;
  border-color: #06D6A0 !important;
}

.dice-row[data-key="d12"] .dice-row__badge {
  background: linear-gradient(145deg, #118AB222, #0277BD22) !important;
  border-color: #118AB2 !important;
}

.dice-row[data-key="d20"] .dice-row__badge {
  background: linear-gradient(145deg, #073B4C22, #002B3622) !important;
  border-color: #073B4C !important;
}

.dice-row[data-key="d100"] .dice-row__badge {
  background: linear-gradient(145deg, #7209B722, #560BAD22) !important;
  border-color: #7209B7 !important;
}

.dice-row__meta {
  font-size: 0.85rem;
  opacity: 0.7;
}

.dice-row__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dice-count {
  min-width: 42px;
  text-align: center;
  font-weight: 1000;
  font-family: var(--font-heading);
  font-size: 1.2rem;
}

.dice-step {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--comic-border, #111);
  border-radius: 12px;
  background: var(--panel, #fff);
  box-shadow: var(--comic-shadow-small, 2px 2px 0 #111);
  cursor: pointer;
  font-weight: 1000;
  font-size: 1.2rem;
  border: none;
  font-family: inherit;
}

.dice-step:hover {
  transform: translate(-1px,-1px);
  box-shadow: var(--comic-shadow, 4px 4px 0 #111);
  background: rgba(255, 215, 0, 0.2);
}

.dice-step:active {
  transform: translate(0, 0);
  box-shadow: var(--comic-shadow-small, 2px 2px 0 #111);
}

/* Modifier row */
.dice-mod-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 10px;
  margin-top: 12px;
  border-top: 3px dashed rgba(0,0,0,.25);
}

.dice-mod-row label {
  font-weight: 900;
  min-width: 80px;
}

.dice-mod-row input[type="number"] {
  width: 110px;
  padding: 10px 12px;
  border: 3px solid var(--comic-border, #111);
  border-radius: 14px;
  box-shadow: var(--comic-shadow-small, 2px 2px 0 #111);
  font-weight: 900;
  font-size: 1rem;
}

.dice-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 3px solid var(--comic-border, #111);
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  box-shadow: var(--comic-shadow-small, 2px 2px 0 #111);
  cursor: pointer;
  user-select: none;
  font-weight: 900;
}

.dice-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--comic-border, #111);
}

/* Action buttons */
.dice-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.dice-help {
  margin-top: 12px;
  color: var(--muted, #666);
  font-size: 12px;
  line-height: 1.4;
}

/* Expression row */
.dice-expr {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 3px dashed var(--comic-border, #111);
}

.dice-expr > label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
}

.dice-expr__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 8px;
  align-items: center;
}

.dice-expr input {
  padding: 10px 12px;
  border: 3px solid var(--comic-border, #111);
  border-radius: 14px;
  box-shadow: var(--comic-shadow-small, 2px 2px 0 #111);
  font-weight: 900;
  font-size: 1rem;
}

.dice-expr__hint {
  margin-top: 8px;
  font-size: .82rem;
  line-height: 1.35;
  color: var(--muted, #666);
}

/* === 3D STAGE === */
.dice-stage {
  position: relative;
  border: 4px solid var(--comic-border, #111);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--comic-shadow, 4px 4px 0 #111);
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.92), rgba(255,255,255,.74));
  min-height: 360px;
}

.dice-stage3d {
  width: 100%;
  height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 18px;
  perspective: 1200px;
}

@media (max-width: 1050px) {
  .dice-stage3d {
    height: 320px;
  }
}

.dice-stage3d__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-align: center;
  font-weight: 900;
  padding: 14px;
  background: rgba(255,255,255,.92);
  color: var(--muted, #666);
}

/* Live status */
.dice-live {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 3px solid var(--comic-border, #111);
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  box-shadow: var(--comic-shadow-small, 2px 2px 0 #111);
  font-weight: 900;
}

.dice-live .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2ecc71;
  box-shadow: 2px 2px 0 var(--comic-border, #111);
}

/* === 3D DICE STYLING (ALL TYPES WITH COLORS) === */
.stage-die {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

/* Dice cube */
.stage-die .dice {
  width: 76px;
  height: 76px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.8s ease-out;
}

/* Sizes per dice type */
.stage-die[data-sides="4"] .dice { width: 70px; height: 70px; }
.stage-die[data-sides="6"] .dice { width: 76px; height: 76px; }
.stage-die[data-sides="8"] .dice { width: 72px; height: 72px; }
.stage-die[data-sides="10"] .dice { width: 70px; height: 70px; }
.stage-die[data-sides="12"] .dice { width: 74px; height: 74px; }
.stage-die[data-sides="20"] .dice { width: 78px; height: 78px; }
.stage-die[data-sides="100"] .dice { width: 82px; height: 82px; }

/* Dice faces - WITH COLOR GRADIENTS */
.stage-die .dice-face {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid var(--comic-border, #111);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  backface-visibility: hidden;
  overflow: hidden;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
}

/* Colors per dice type */
.stage-die[data-sides="4"] .dice-face {
  background: linear-gradient(145deg, #FF6B6B, #FF5252);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  border: none;
}

.stage-die[data-sides="6"] .dice-face {
  background: linear-gradient(145deg, #4ECDC4, #26A69A);
  border-radius: 12px;
}

.stage-die[data-sides="8"] .dice-face {
  background: linear-gradient(145deg, #FFD166, #FFC107);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.stage-die[data-sides="10"] .dice-face {
  background: linear-gradient(145deg, #06D6A0, #00C853);
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

.stage-die[data-sides="12"] .dice-face {
  background: linear-gradient(145deg, #118AB2, #0277BD);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.stage-die[data-sides="20"] .dice-face {
  background: linear-gradient(145deg, #073B4C, #002B36);
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

.stage-die[data-sides="100"] .dice-face {
  background: linear-gradient(145deg, #7209B7, #560BAD);
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

/* Face positioning for cube (d6) */
.stage-die[data-sides="6"] .face-1 { transform: rotateY(0deg) translateZ(38px); }
.stage-die[data-sides="6"] .face-2 { transform: rotateY(180deg) translateZ(38px); }
.stage-die[data-sides="6"] .face-3 { transform: rotateY(90deg) translateZ(38px); }
.stage-die[data-sides="6"] .face-4 { transform: rotateY(-90deg) translateZ(38px); }
.stage-die[data-sides="6"] .face-5 { transform: rotateX(90deg) translateZ(38px); }
.stage-die[data-sides="6"] .face-6 { transform: rotateX(-90deg) translateZ(38px); }

/* Random positioning for non-cube dice */
.stage-die:not([data-sides="6"]) .dice-face {
  transform-origin: center;
}

/* Floating animation */
@keyframes dice-float {
  0%, 100% { transform: translateY(0) rotateX(0) rotateY(0); }
  50% { transform: translateY(-10px) rotateX(10deg) rotateY(10deg); }
}

.stage-die .dice {
  animation: dice-float 2.8s ease-in-out infinite;
}

/* Dice chip label */
.stage-die__chip {
  position: absolute;
  top: -10px;
  left: -10px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 3px solid var(--comic-border, #111);
  background: rgba(255,255,255,.95);
  box-shadow: var(--comic-shadow-small, 2px 2px 0 #111);
  font-weight: 900;
  font-size: .8rem;
}

/* Value display */
.stage-die__value {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 900;
  letter-spacing: 1px;
  font-size: 1.55rem;
  color: white;
  text-shadow: 
    2px 2px 0 var(--comic-border, #111),
    -1px -1px 0 rgba(0,0,0,0.3);
  pointer-events: none;
}

/* Kept/dropped status */
.stage-die__kept {
  font-size: .78rem;
  font-weight: 900;
  opacity: .85;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.1);
}

/* Dropped state */
.stage-die.is-dropped {
  opacity: .45;
  filter: grayscale(.25);
}

.stage-die.is-dropped .stage-die__kept {
  text-decoration: line-through;
  background: rgba(255,0,0,.1);
}

/* Pips styling for d6 */
.pips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 60px;
  height: 60px;
  gap: 4px;
}

.pip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #111;
  opacity: 0;
  transition: opacity 0.3s ease;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.pip.show {
  opacity: 1;
  animation: pip-pop 0.3s ease;
}

/* Number display for non-d6 dice */
.dice-number {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.8rem;
  color: white;
  text-shadow: 
    2px 2px 0 var(--comic-border, #111),
    -1px -1px 0 rgba(0,0,0,0.3);
}

/* Roll animation */
@keyframes dice-roll {
  0% { transform: rotateX(0) rotateY(0) rotateZ(0); }
  25% { transform: rotateX(180deg) rotateY(90deg) rotateZ(45deg); }
  50% { transform: rotateX(360deg) rotateY(180deg) rotateZ(90deg); }
  75% { transform: rotateX(540deg) rotateY(270deg) rotateZ(135deg); }
  100% { transform: rotateX(720deg) rotateY(360deg) rotateZ(180deg); }
}

.dice.is-rolling {
  animation: dice-roll 0.8s ease-in-out;
}

/* === RESULTS PANEL === */
.dice-result-panel {
  margin-top: 14px;
}

.dice-result__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dice-result__empty {
  color: var(--muted, #666);
  font-size: 13px;
  padding: 20px;
  text-align: center;
}

.dice-breakdown {
  padding: 12px;
  border: 3px solid var(--comic-border, #111);
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--comic-shadow-small, 2px 2px 0 #111);
}

.dice-breakdown__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.dice-breakdown__expr {
  font-weight: 900;
  font-size: 1rem;
}

.dice-breakdown__total {
  font-weight: 1000;
  font-size: 1.3rem;
}

.dice-breakdown__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.dice-breakdown__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 6px;
}

.dice-line {
  padding: 6px 10px;
  border: 2px solid var(--comic-border, #111);
  border-radius: 8px;
  background: rgba(255,255,255,.8);
  font-size: 0.9rem;
  font-weight: 900;
}

.dice-line.dropped {
  opacity: 0.5;
  text-decoration: line-through;
  background: rgba(255, 0, 0, 0.1);
}

/* === HISTORY === */
.dice-history {
  margin-top: 14px;
  border: 3px dashed rgba(0,0,0,.25);
  border-radius: 18px;
  padding: 12px;
  background: rgba(255,255,255,.70);
}

.dice-history__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.dice-history__title {
  font-weight: 1000;
  font-family: var(--font-heading);
  letter-spacing: 1px;
}

.dice-history__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dice-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 3px solid var(--comic-border, #111);
  border-radius: 14px;
  background: rgba(255,255,255,.88);
  box-shadow: var(--comic-shadow-small, 2px 2px 0 #111);
  cursor: pointer;
  transition: transform .1s ease;
  border: none;
  font-family: inherit;
  width: 100%;
  text-align: left;
}

.dice-history-item:hover {
  transform: translate(-1px, -1px);
  background: rgba(255, 215, 0, 0.1);
}

.dice-history-time {
  font-size: 0.8rem;
  opacity: 0.7;
  min-width: 70px;
}

.dice-history-expr {
  flex: 1;
  font-weight: 900;
  font-size: 0.9rem;
}

.dice-history-total {
  font-weight: 1000;
  font-size: 1.2rem;
  font-family: var(--font-heading);
}

.dice-history-empty {
  text-align: center;
  padding: 20px;
  color: var(--muted, #666);
  font-style: italic;
}

/* === OVERRIDES & FIXES === */
body.dice-page main.page-shell {
  min-height: auto !important;
  flex: 1 0 auto !important;
  padding-bottom: 3rem !important;
  overflow: visible !important;
}

body.dice-page .dice-section {
  padding-bottom: 260px !important;
}

body.dice-page .footer {
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
  margin-top: auto;
}

/* Fix button cursor */
.dice-chip,
.dice-step,
.dice-history-item {
  cursor: pointer;
}

/* Make sure buttons don't inherit weird styles */
button.dice-chip,
button.dice-step,
button.dice-history-item {
  background: none;
  border: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .dice-layout {
    gap: 12px;
  }
  
  .dice-stage3d {
    height: 280px;
    padding: 12px;
    gap: 12px;
  }
  
  .stage-die .dice {
    width: 60px;
    height: 60px;
  }
  
  .stage-die[data-sides="20"] .dice,
  .stage-die[data-sides="100"] .dice {
    width: 65px;
    height: 65px;
  }
  
  .dice-presets {
    gap: 8px;
  }
  
  .dice-chip {
    padding: 6px 10px;
    font-size: 0.8rem;
  }
}

/* Dice show classes for hero dice */
.hero.dice-hero .dice--show1 .pip:nth-child(5) { opacity: 1; }
.hero.dice-hero .dice--show2 .pip:nth-child(1),
.hero.dice-hero .dice--show2 .pip:nth-child(9) { opacity: 1; }
.hero.dice-hero .dice--show3 .pip:nth-child(1),
.hero.dice-hero .dice--show3 .pip:nth-child(5),
.hero.dice-hero .dice--show3 .pip:nth-child(9) { opacity: 1; }
.hero.dice-hero .dice--show4 .pip:nth-child(1),
.hero.dice-hero .dice--show4 .pip:nth-child(3),
.hero.dice-hero .dice--show4 .pip:nth-child(7),
.hero.dice-hero .dice--show4 .pip:nth-child(9) { opacity: 1; }
.hero.dice-hero .dice--show5 .pip:nth-child(1),
.hero.dice-hero .dice--show5 .pip:nth-child(3),
.hero.dice-hero .dice--show5 .pip:nth-child(5),
.hero.dice-hero .dice--show5 .pip:nth-child(7),
.hero.dice-hero .dice--show5 .pip:nth-child(9) { opacity: 1; }
.hero.dice-hero .dice--show6 .pip:nth-child(1),
.hero.dice-hero .dice--show6 .pip:nth-child(3),
.hero.dice-hero .dice--show6 .pip:nth-child(4),
.hero.dice-hero .dice--show6 .pip:nth-child(6),
.hero.dice-hero .dice--show6 .pip:nth-child(7),
.hero.dice-hero .dice--show6 .pip:nth-child(9) { opacity: 1; }