body { background:#f5f4ef; }

/* ── Body ─────────────────────────────────────────────────────────── */
.dice-body { padding:48px 32px 96px; }
.dice-body__inner { max-width:900px; margin:0 auto; }

/* ── Tabs ─────────────────────────────────────────────────────────── */
.dice-tabs { display:flex; gap:4px; margin-bottom:32px; padding:12px 0; border-bottom:1px solid #e6e3d8; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; justify-content:center; position:sticky; top:64px; background:#f5f4ef; z-index:10; }
.dice-tabs::-webkit-scrollbar { display:none; }
.dice-tabs__btn { font-family:var(--mg-font-body); font-weight:600; font-size:12px; padding:7px 13px; border-radius:9999px; border:1px solid #e6e3d8; background:#fff; color:#14161c; cursor:pointer; transition:all 0.15s; white-space:nowrap; flex-shrink:0; }
.dice-tabs__btn:hover { border-color:#14161c; background:#fafaf7; }
.dice-tabs__btn--active { background:#14161c; color:#fff; border-color:#14161c; }
.dice-tabs__btn--active:hover { background:#2a2d34; color:#fff; }

/* ── Panel ────────────────────────────────────────────────────────── */
.dice-panel { background:#fff; border:1px solid #e6e3d8; border-radius:20px; padding:40px; }

/* ── Card header (matches Nukes tools pattern) ────────────────────── */
.dice-card-header { display:flex; align-items:flex-start; gap:16px; margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid #e6e3d8; }
.dice-card-header__accent { width:6px; height:48px; border-radius:3px; flex:none; }
.dice-card-header__eyebrow { font-family:var(--mg-font-pixel); font-size:9px; letter-spacing:1.5px; margin-bottom:6px; }
.dice-card-header__title { font-family:var(--mg-font-display); font-weight:600; font-size:24px; color:#14161c; margin:0; letter-spacing:-0.3px; }
.dice-card-header__desc { font-family:var(--mg-font-body); font-size:14px; color:#4f5764; margin:4px 0 0; }

/* ── Shared form elements ─────────────────────────────────────────── */
.dice-section { margin-bottom:28px; padding-bottom:28px; border-bottom:1px solid #f0ede6; }
.dice-section:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.dice-section__title { font-family:var(--mg-font-display); font-weight:600; font-size:20px; color:#14161c; margin:0 0 6px; letter-spacing:-0.3px; }
.dice-section__desc { font-family:var(--mg-font-body); font-size:14px; color:#4f5764; margin:0 0 20px; line-height:1.5; }
.dice-row { display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.dice-row__label { font-family:var(--mg-font-body); font-size:14px; color:#4f5764; min-width:120px; }
.dice-input { width:64px; padding:9px 10px; border:1px solid #e6e3d8; border-radius:10px; font-family:var(--mg-font-mono); font-size:15px; text-align:center; background:#f5f4ef; transition:border-color 0.15s; }
.dice-input:focus { outline:none; border-color:#0c4f8d; box-shadow:0 0 0 3px rgba(12,79,141,0.08); }
.dice-select { padding:9px 14px; border:1px solid #e6e3d8; border-radius:10px; font-family:var(--mg-font-body); font-size:14px; background:#f5f4ef; transition:border-color 0.15s; cursor:pointer; }
.dice-select:focus { outline:none; border-color:#0c4f8d; box-shadow:0 0 0 3px rgba(12,79,141,0.08); }

/* ── Sides grid ───────────────────────────────────────────────────── */
.dice-sides { display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:start; margin-bottom:28px; }
.dice-sides--stacked { display:flex; flex-direction:column; gap:16px; align-items:stretch; }
.dice-side { display:flex; flex-direction:column; gap:10px; background:#f5f4ef; border-radius:16px; padding:24px; border:1px solid #e6e3d8; }
.dice-side__header { font-family:var(--mg-font-display); font-weight:600; font-size:16px; color:#14161c; padding-bottom:12px; border-bottom:1px solid #e6e3d8; margin-bottom:6px; }
.dice-vs { font-family:var(--mg-font-display); font-weight:700; font-size:14px; color:#636b78; text-align:center; text-transform:uppercase; letter-spacing:1px; align-self:center; padding-top:32px; }
.dice-sides--stacked .dice-vs { padding-top:0; }

/* ── Unit rows (TI4 / Custom) ─────────────────────────────────────── */
.dice-unit { display:flex; align-items:center; gap:8px; padding:12px 14px; background:#fff; border-radius:12px; border:1px solid #e6e3d8; flex-wrap:wrap; transition:border-color 0.15s; }
.dice-unit:hover { border-color:#c8c4bb; }
.dice-unit__name { font-family:var(--mg-font-body); font-weight:500; font-size:14px; color:#14161c; min-width:0; }
.dice-unit__stat { font-family:var(--mg-font-mono); font-size:12px; color:#636b78; flex-shrink:0; background:#f5f4ef; padding:3px 8px; border-radius:6px; }
.dice-unit__count { width:52px; }
.dice-unit__remove { width:28px; height:28px; border:none; background:rgba(209,26,26,0.08); color:#d11a1a; font-size:16px; cursor:pointer; border-radius:8px; flex-shrink:0; transition:background 0.15s; }
.dice-unit__remove:hover { background:rgba(209,26,26,0.16); }
.dice-unit .dice-input { width:48px; font-size:14px; padding:7px 4px; }
.dice-unit__name-input.dice-input { width:auto; flex:1; text-align:left; min-width:80px; }

/* Add unit button inside side panel */
.dice-side .mg-btn { font-size:13px; padding:9px 18px; margin-top:10px; align-self:flex-start; }

/* ── Results ──────────────────────────────────────────────────────── */
.dice-results { margin-top:28px; padding:24px; background:#f5f4ef; border-radius:16px; border:1px solid #e6e3d8; }
.dice-results__title { font-family:var(--mg-font-mono); font-size:11px; color:#636b78; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:18px; }
.dice-results__row { display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.dice-results__label { font-family:var(--mg-font-body); font-weight:500; font-size:14px; color:#4f5764; min-width:140px; }
.dice-results__bar { flex:1; height:28px; background:#e6e3d8; border-radius:14px; overflow:hidden; position:relative; }
.dice-results__fill { height:100%; border-radius:14px; transition:width 0.4s cubic-bezier(.2,.8,.2,1); }
.dice-results__fill--atk { background:#3a9928; }
.dice-results__fill--def { background:#d11a1a; }
.dice-results__fill--draw { background:#e89a1a; }
.dice-results__pct { font-family:var(--mg-font-mono); font-weight:600; font-size:14px; color:#14161c; min-width:54px; text-align:right; }
.dice-results__detail { font-family:var(--mg-font-mono); font-size:12px; color:#636b78; margin-top:18px; line-height:1.9; padding-top:14px; border-top:1px solid #e6e3d8; }

/* ── Run button ───────────────────────────────────────────────────── */
.dice-run { display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:20px; }
.dice-run__iters { font-family:var(--mg-font-mono); font-size:12px; color:#636b78; }

/* ── Dice Roller ──────────────────────────────────────────────────── */
.die-face { width:68px; height:68px; border-radius:12px; background:#f5f4ef; border:2px solid #e6e3d8; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 120ms; user-select:none; }
.die-face:hover { border-color:#6fb5ff; transform:scale(1.08); background:#f0f7ff; }
.die-face__label { font-family:var(--mg-font-pixel); font-size:10px; color:#6fb5ff; }
.die-face__label--sm { font-size:8px; }
.die-face.rolling { animation:dieRoll 0.4s cubic-bezier(.2,.8,.2,1); }
@keyframes dieRoll { 0% { transform:rotate(-20deg) scale(0.8); } 60% { transform:rotate(10deg) scale(1.1); } 100% { transform:rotate(0) scale(1); } }
.dice-controls { display:flex; align-items:center; gap:18px; margin-bottom:24px; flex-wrap:wrap; padding:16px 20px; background:#f5f4ef; border-radius:12px; border:1px solid #e6e3d8; }
.dice-controls__label { font-family:var(--mg-font-body); font-weight:500; font-size:14px; color:#4f5764; }
.dice-controls__range { width:130px; accent-color:#0c4f8d; }
.dice-controls__value { font-family:var(--mg-font-mono); font-weight:600; font-size:16px; color:#14161c; min-width:22px; }
.dice-controls__value--wide { min-width:30px; text-align:center; }
.dice-controls__modifier { display:flex; align-items:center; gap:8px; margin-left:auto; }
.dice-controls__btn { width:34px; height:34px; border-radius:9999px; background:#fff; border:1px solid #e6e3d8; color:#14161c; font-size:18px; cursor:pointer; line-height:1; transition:all 150ms; }
.dice-controls__btn:hover { border-color:#14161c; background:#14161c; color:#fff; }
.dice-result { font-family:var(--mg-font-display); font-weight:600; font-size:80px; line-height:1; letter-spacing:-2px; color:#14161c; margin-bottom:8px; min-height:88px; }
.dice-breakdown { font-family:var(--mg-font-mono); font-size:13px; color:#636b78; margin-bottom:24px; min-height:20px; line-height:1.6; }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .dice-body { padding:36px 20px 64px; }
  .dice-panel { padding:24px; }
  .dice-tabs { justify-content:center; }
  .dice-sides { grid-template-columns:1fr; }
  .dice-vs { padding-top:0; }
  .dice-side { padding:18px; }
  .dice-row { justify-content:center; }
  .dice-row__label { min-width:90px; text-align:center; }
  .dice-run { justify-content:center; }
  .dice-result { font-size:56px; text-align:center; }
  .dice-breakdown { text-align:center; }
  .dice-controls { justify-content:center; }
  .dice-controls__modifier { margin-left:0; }
  .dice-results__row { flex-direction:column; align-items:stretch; gap:6px; }
  .dice-results__label { min-width:unset; text-align:center; }
  .dice-results__pct { text-align:center; }
  .die-face { width:56px; height:56px; }
}