/* Dice Battle — casino night indigo x gold accent */
body[data-theme] {
    --color-primary-gradient: linear-gradient(135deg, #4c1d95 0%, #ca8a04 100%);
    --shadow-glow: 0 0 25px rgba(76, 29, 149, 0.45);
    --shadow-glow-lg: 0 0 40px rgba(76, 29, 149, 0.55);
    --accent-blue: #7c3aed;
}

.emoji-icon { font-size: 20px; }
.btn-add-item {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 8px; padding: 9px; border-radius: var(--radius-sm);
    border: 1px dashed var(--color-border); background: transparent;
    color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; cursor: pointer;
    transition: var(--transition-fast); width: 100%;
}
.btn-add-item:hover { border-color: var(--accent-blue); color: var(--accent-blue); background: rgba(124, 58, 237, 0.08); }

/* ---------- Dice grid ---------- */
.dice-stage { align-items: flex-start; padding-top: 20px; }
.dice-stage { background: radial-gradient(ellipse at 50% 20%, rgba(202,138,4,.13), transparent 36%), linear-gradient(180deg, rgba(76,29,149,.10), transparent 70%); }
.dice-empty-hint { width: 100%; text-align: center; color: var(--text-muted); font-weight: 600; font-size: 0.9rem; padding: 60px 0; }
.dice-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 22px 26px;
    width: 100%;
    padding: 10px;
}

.dice-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    transition: opacity 0.3s ease;
}
.dice-card.locked { opacity: 0.42; }
.dice-card.tied .die { box-shadow: 0 0 0 4px var(--accent-amber), 0 8px 16px rgba(0,0,0,0.2); border-radius: 8px; }

/* Real 3D cube: .die is the viewport, .die-tilt holds a fixed "camera"
   angle so three faces are always visible, and .die-cube is the part that
   actually rotates to bring the rolled face to the front — nesting them
   keeps the constant tilt and the per-roll rotation from fighting over the
   same transform. No perspective is set, so the projection is orthographic
   (parallel edges, no foreshortening) at the true isometric angle — the
   same flat-shaded look as assets/icons/dice.svg, instead of a photo-style
   perspective cube that mostly hid the top face. */
.die {
    width: 72px; height: 72px;
    --die-half: 36px;
    position: relative;
}
.die::before {
    content: ''; position: absolute; left: 50%; bottom: -9px;
    width: 68%; height: 13px; transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(30,15,60,.38), transparent 72%);
    filter: blur(1px); transition: transform 0.25s ease, opacity 0.25s ease;
}
.die-tilt {
    width: 100%; height: 100%;
    transform-style: preserve-3d;
    transform: rotateX(-35.264deg) rotateY(45deg);
}
.die-cube {
    width: 100%; height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.82s cubic-bezier(0.22, 1, 0.36, 1);
}
.die-face {
    /* Each face is its own flat div meeting the next at a 90deg fold, so a
       rounded corner on one doesn't line up with its neighbor's rounded
       corner — the mismatch shows as a tiny gap right at the cube's
       vertices. Square corners let adjacent faces' edges coincide exactly;
       the -0.5px inset (instead of 0) makes each face marginally larger
       than the cube's true edge so sub-pixel rounding during the 3D
       projection can't open a hairline seam either. */
    position: absolute; inset: -0.5px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    padding: 12px; gap: 4px;
    border: 1px solid rgba(255,255,255,.6);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.7), inset -4px -5px 8px rgba(60,30,110,.1);
    backface-visibility: hidden;
}
/* A cube in any resting orientation always shows exactly one face from
   each opposite pair, so tinting by pair (not by individual face) gives a
   consistent light-top / mid-side / bright-front read no matter which
   value lands in front. */
.die-face-1, .die-face-6 {
    background: radial-gradient(circle at 30% 22%, #fff 0 10%, transparent 26%), linear-gradient(145deg, #fff, #f8fafc 54%, #ece4fb);
}
.die-face-3, .die-face-4 {
    background: radial-gradient(circle at 30% 22%, #fff 0 8%, transparent 22%), linear-gradient(145deg, #f6f2ff, #ece4fb 55%, #d9c9f5);
}
.die-face-2, .die-face-5 {
    background: radial-gradient(circle at 30% 22%, #fbf9ff 0 6%, transparent 18%), linear-gradient(145deg, #e3d7f7, #cbb6ec 55%, #ae91e0);
}
.die-face-1 { transform: translateZ(var(--die-half)); }
.die-face-6 { transform: rotateY(180deg) translateZ(var(--die-half)); }
.die-face-2 { transform: rotateY(90deg) translateZ(var(--die-half)); }
.die-face-5 { transform: rotateY(-90deg) translateZ(var(--die-half)); }
.die-face-3 { transform: rotateX(90deg) translateZ(var(--die-half)); }
.die-face-4 { transform: rotateX(-90deg) translateZ(var(--die-half)); }

.die.rolling { animation: dieHop 0.42s ease-in-out infinite; }
.die.rolling::before { animation: dieShadowPulse 0.42s ease-in-out infinite; }
@keyframes dieHop {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
@keyframes dieShadowPulse {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: .7; }
    50% { transform: translateX(-50%) scale(.55); opacity: .35; }
}
.die.settled { animation: dieLand 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes dieLand {
    0% { transform: translateY(-14px) scale(1.06); }
    60% { transform: translateY(2px) scale(0.96); }
    100% { transform: translateY(0) scale(1); }
}

.pip { border-radius: 50%; background: radial-gradient(circle at 32% 28%, #a78bfa, #5b21b6 68%, #2e1065); box-shadow: inset -1px -2px 1px rgba(0,0,0,.24), 0 1px 1px rgba(255,255,255,.4); opacity: 0; align-self: center; justify-self: center; width: 100%; height: 100%; }
.die-face-1 .pip-5 { opacity: 1; }
.die-face-2 .pip-1, .die-face-2 .pip-9 { opacity: 1; }
.die-face-3 .pip-1, .die-face-3 .pip-5, .die-face-3 .pip-9 { opacity: 1; }
.die-face-4 .pip-1, .die-face-4 .pip-3, .die-face-4 .pip-7, .die-face-4 .pip-9 { opacity: 1; }
.die-face-5 .pip-1, .die-face-5 .pip-3, .die-face-5 .pip-5, .die-face-5 .pip-7, .die-face-5 .pip-9 { opacity: 1; }
.die-face-6 .pip-1, .die-face-6 .pip-3, .die-face-6 .pip-4, .die-face-6 .pip-6, .die-face-6 .pip-7, .die-face-6 .pip-9 { opacity: 1; }

.dice-name {
    font-family: var(--font-body); font-weight: 700; font-size: 0.85rem;
    color: var(--text-primary);
    display: flex; align-items: center; gap: 5px;
}
.dice-tag {
    font-size: 0.65rem; font-weight: 800; padding: 2px 8px; border-radius: 10px;
    background: rgba(124, 58, 237, 0.14); color: var(--accent-blue);
}
.dice-card.locked .dice-tag { background: rgba(100,116,139,0.16); color: var(--text-muted); }

/* Tabletop toy-block lighting instead of a flat casino board. */
.dice-stage { background: radial-gradient(ellipse at 50% 88%, rgba(88, 48, 145, .18), transparent 43%), radial-gradient(circle at 18% 16%, rgba(255,255,255,.45) 0 3px, transparent 4px) 0 0 / 44px 44px, linear-gradient(180deg, #e7ddff, #f5e7cf); }
.dice-card { padding: 10px 12px; border-radius: 22px; background: rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.52); }
.pip { background: radial-gradient(circle at 32% 28%, #d8c6ff, #7950c8 64%, #45247e); }

.roll-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin: 22px auto 4px;
    padding: 16px 38px;
    font-family: var(--font-display); font-size: 1.05rem; font-weight: 800;
    color: #fff;
    background: var(--color-primary-gradient);
    border: none; border-radius: 50px;
    cursor: pointer;
    box-shadow: var(--shadow-glow-lg), 0 10px 0 rgba(0,0,0,0.18);
    transition: transform 0.1s ease;
}
.roll-btn:not(:disabled) { animation: rollPulse 1.8s ease-in-out infinite; }
.roll-btn .material-symbols-outlined { font-size: 24px; }
.roll-btn:hover:not(:disabled) { transform: translateY(-2px); }
.roll-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: var(--shadow-glow), 0 4px 0 rgba(0,0,0,0.18); }
.roll-btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
@keyframes rollPulse {
    0%, 100% { box-shadow: var(--shadow-glow-lg), 0 10px 0 rgba(0,0,0,0.18); }
    50% { box-shadow: 0 0 46px color-mix(in srgb, var(--accent-blue) 60%, transparent), 0 10px 0 rgba(0,0,0,0.18); }
}

@media (max-width: 640px) {
    .die { width: 58px; height: 58px; --die-half: 29px; }
    .die-face { padding: 9px; }
    .dice-grid { gap: 16px 18px; }
    .roll-btn { padding: 14px 28px; font-size: 0.95rem; }
}
.game-help { margin: 0 0 28px; padding: 26px; }.game-help h2 { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 16px; }.game-help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.game-help article { padding: 16px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-surface-hover); }.game-help h3 { color: var(--accent-blue); font-family: var(--font-display); font-size: 1rem; margin-bottom: 7px; }.game-help p { color: var(--text-secondary); font-size: .88rem; line-height: 1.75; }@media (max-width:720px){.game-help{padding:20px 16px}.game-help-grid{grid-template-columns:1fr}}
.dice-modes { display: flex; gap: 10px; margin-bottom: 20px; }
.dice-modes .btn { flex: 1; min-height: 48px; border: 1px solid var(--color-border); }
.dice-modes .active { background: var(--color-primary-gradient); color: white; }
#battle-panel[hidden], #free-dice-panel[hidden] { display: none; }
.free-dice-panel { padding: clamp(20px, 5vw, 48px); text-align: center; margin-bottom: 24px; }
.free-dice-panel h2 { font-family: var(--font-display); font-size: 1.7rem; }
.free-dice-panel > p { color: var(--text-secondary); line-height: 1.7; margin-top: 12px; }
.dice-count { border: 0; display: flex; justify-content: center; gap: 10px; margin-top: 24px; }
.dice-count legend { padding-bottom: 12px; font-weight: 700; }
.dice-count label { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 18px; border: 1px solid var(--color-border); border-radius: 12px; cursor: pointer; }
.dice-count label:has(:checked) { border-color: var(--accent-blue); background: color-mix(in srgb, var(--accent-blue) 10%, transparent); }
.free-dice-grid { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; padding: 40px 0 24px; }
.table-die { position: relative; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); width: clamp(64px, 18vw, 110px); aspect-ratio: 1; padding: 14px; gap: 6px; border: 1px solid #c4b5fd; border-radius: 18px; background: #f5f3ff; box-shadow: 0 6px 0 #c4b5fd, 0 12px 22px #4c1d9520; }
.table-pip { border-radius: 50%; background: #5b21b6; visibility: hidden; }
.table-pip.visible { visibility: visible; }
.die-question { position: absolute; inset: 0; display: grid; place-items: center; color: #7c3aed; font: 700 2rem var(--font-display); }
.free-dice-result { font-family: var(--font-mono); font-weight: 700; min-height: 3em; }
.is-rolling .table-die { animation: dieHop .25s ease-in-out infinite; }
@media (max-width: 400px) { .dice-count label { padding: 10px 12px; } .free-dice-grid { gap: 12px; } .table-die { padding: 9px; gap: 4px; border-radius: 12px; } }
@media (prefers-reduced-motion: reduce) { .is-rolling .table-die, .roll-btn:not(:disabled) { animation: none; } }