/* ============================================
   BASE STYLES
   ============================================ */
:root {
  /*--- Generated with colorshader.com ---*/
  --steel-0: hsl(230,10%,95%);
  --steel-1: hsl(230,10%,90%);
  --steel-2: hsl(230,10%,85%);
  --steel-3: hsl(230,10%,80%);
  --steel-4: hsl(230,10%,75%);
  --steel-5: hsl(230,10%,70%);
  --steel-6: hsl(230,10%,65%);
  --steel-7: hsl(230,10%,60%);
  --steel-8: hsl(230,10%,55%);
  --steel-9: hsl(230,10%,50%);
  --steel-10: hsl(230,10%,45%);
  --steel-11: hsl(230,10%,40%);
  --steel-12: hsl(230,10%,35%);
  --steel-13: hsl(230,10%,30%);
  --steel-14: hsl(230,10%,25%);
  --steel-15: hsl(230,10%,20%);
  --steel-16: hsl(230,10%,15%);
  --steel-17: hsl(230,10%,10%);
  --steel-18: hsl(230,10%,7%);

  --blue-0: hsl(230,80%,95%);
  --blue-1: hsl(230,80%,90%);
  --blue-2: hsl(230,80%,85%);
  --blue-3: hsl(230,80%,80%);
  --blue-4: hsl(230,80%,75%);
  --blue-5: hsl(230,80%,70%);
  --blue-6: hsl(230,80%,65%);
  --blue-7: hsl(230,80%,60%);
  --blue-8: hsl(230,80%,55%);
  --blue-9: hsl(230,80%,50%);
  --blue-10: hsl(230,80%,45%);
  --blue-11: hsl(230,80%,40%);
  --blue-12: hsl(230,80%,35%);
  --blue-13: hsl(230,80%,30%);
  --blue-14: hsl(230,80%,25%);
  --blue-15: hsl(230,80%,20%);
  --blue-16: hsl(230,80%,15%);
  --blue-17: hsl(230,80%,10%);
  --blue-18: hsl(230,80%,7%);

  /*--- set dice size ---*/
  --dc-size: 100px; /*dice container*/
  --d6-size: calc(var(--dc-size) * .8);
  --d8-size: calc(var(--dc-size) * .8);
  --d10-size: calc(var(--dc-size) * .9);
  --d12-size: calc(var(--dc-size) * .6);
  --d20-size: calc(var(--dc-size) * .6);
  --perspective: calc(var(--dc-size) * 1.70);
  
  /*--- UI Theme Variables (Default) ---*/
  --ui-bg-primary: #0a0a0a;
  --ui-bg-secondary: #111827;
  --ui-bg-tertiary: #1f2937;
  --ui-bg-panel: #111827;
  --ui-bg-surface: #1f2937;
  --ui-bg-elevated: #374151;
  --ui-text-primary: #ffffff;
  --ui-text-secondary: #e5e5e5;
  --ui-text-tertiary: #9ca3af;
  --ui-text-muted: #6b7280;
  --ui-accent-primary: #3b82f6;
  --ui-accent-secondary: #8b5cf6;
  --ui-border-primary: #374151;
  --ui-border-secondary: #4b5563;
  --ui-border-accent: #3b82f6;
}

body {
    font-family: system-ui, -apple-system, sans-serif;
    background: #0a0a0a;
    color: #fff;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* ============================================
   3D DICE SYSTEM - CodePen Style
   ============================================ */

/* Base container for all dice */
.die-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--dc-size);
    width: var(--dc-size);
    perspective: var(--perspective);
}

/* Outcome overlay (number display) */
.die-visual .outcome-cont {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.die-visual .outcome {
    font-size: 30px;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0 2px 6px rgba(0,0,0,0.9);
    margin: 0;
}

/*--- adjust for tetra shape ---*/
.die-visual .outcome.d4 {
    transform: translateY(12px);
}

/* Dice button containers */
.die-visual > button.roll-button {
    margin: 0 auto;
    border: none;
    background: none;
    transition: transform 1s ease;
    transform-style: preserve-3d;
}

.die-visual > button.roll-button:hover {
    cursor: pointer;
}

/* ============================================
   D4: Tetrahedron
   ============================================ */

.die-visual.d4 > button.roll-button,
.die-visual .tetra {
    position: relative;
    width: var(--dc-size);
    height: calc(var(--dc-size) * .866);
    margin: 0 auto;
    border: none;
    background: none;
    transform-style: preserve-3d;
    transform-origin: 50% 66%;
    transition: transform 1s ease;
}

.die-visual.d4 > button.roll-button > .face,
.die-visual .tetra > .face {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.die-visual.d4 > button.roll-button > .face:nth-child(1),
.die-visual .tetra > .face:nth-child(1) {
    transform-origin: 0% 100%;
    transform: translateZ(calc(var(--dc-size) * -0.33)) rotate(0deg) rotatex(0deg);
}

.die-visual.d4 > button.roll-button > .face:nth-child(2),
.die-visual .tetra > .face:nth-child(2) {
    transform-origin: 0% 100%;
    transform: translateZ(calc(var(--dc-size) * -0.33)) rotate(-60deg) rotatex(-109.5deg);
}

.die-visual.d4 > button.roll-button > .face:nth-child(3),
.die-visual .tetra > .face:nth-child(3) {
    transform-origin: 100% 100%;
    transform: translateZ(calc(var(--dc-size) * -0.33)) rotate(60deg) rotatex(-109.5deg);
}

.die-visual.d4 > button.roll-button > .face:nth-child(4),
.die-visual .tetra > .face:nth-child(4) {
    transform-origin: 50% 100%;
    transform: translateZ(calc(var(--dc-size) * -0.33)) rotate(180deg) rotatex(-109.5deg);
}

.die-visual.d4 > button.roll-button svg,
.die-visual .tetra svg {
    fill: rgba(0,0,0,0.3);
    stroke-width: 2px;
    stroke: var(--blue-6);
}

/* ============================================
   D6: Cube
   ============================================ */

.die-visual.d6 > button.roll-button,
.die-visual .cube {
    position: relative;
    width: var(--d6-size);
    height: var(--d6-size);
    margin: 0 auto;
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    border: none;
    background: none;
    transition: transform 1s ease;
}

.die-visual.d6 > button.roll-button > .face,
.die-visual .cube > .face {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.die-visual.d6 > button.roll-button > .face:nth-child(1),
.die-visual .cube > .face:nth-child(1) {
    transform-origin: 50% 100%;
    transform: translateZ(calc(var(--d6-size) / 2)) rotatex(0deg);
}

.die-visual.d6 > button.roll-button > .face:nth-child(2),
.die-visual .cube > .face:nth-child(2) {
    transform-origin: 50% 100%;
    transform: translateZ(calc(var(--d6-size) / 2)) rotatex(90deg);
}

.die-visual.d6 > button.roll-button > .face:nth-child(3),
.die-visual .cube > .face:nth-child(3) {
    transform-origin: 0% 50%;
    transform: translateZ(calc(var(--d6-size) / 2)) rotateY(90deg);
}

.die-visual.d6 > button.roll-button > .face:nth-child(4),
.die-visual .cube > .face:nth-child(4) {
    transform-origin: 50% 0%;
    transform: translateZ(calc(var(--d6-size) / 2)) rotatex(-90deg);
}

.die-visual.d6 > button.roll-button > .face:nth-child(5),
.die-visual .cube > .face:nth-child(5) {
    transform-origin: 100% 50%;
    transform: translateZ(calc(var(--d6-size) / 2)) rotateY(-90deg);
}

.die-visual.d6 > button.roll-button > .face:nth-child(6),
.die-visual .cube > .face:nth-child(6) {
    transform-origin: 50% 50%;
    transform: translateZ(calc(var(--d6-size) / -2));
}

.die-visual.d6 > button.roll-button svg,
.die-visual .cube svg {
    fill: rgba(0,0,0,0.3);
    stroke-width: 2px;
    stroke: var(--blue-6);
}

/* ============================================
   D8: Octahedron
   ============================================ */

.die-visual.d8 > button.roll-button,
.die-visual .octa {
    position: relative;
    width: var(--d8-size);
    height: var(--d8-size);
    margin: 0 auto;
    border: none;
    background: none;
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    transition: transform 1s ease;
}

.die-visual.d8 > button.roll-button > .face,
.die-visual .octa > .face {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(var(--d8-size) * .866);
}

.die-visual.d8 > button.roll-button > .face svg,
.die-visual .octa > .face svg {
    width: 100%;
    height: 100%;
    display: block;
}

.die-visual.d8 > button.roll-button > .face:nth-child(1),
.die-visual .octa > .face:nth-child(1) {
    transform-origin: 50% 100%;
    transform: rotatex(54.74deg);
}

.die-visual.d8 > button.roll-button > .face:nth-child(2),
.die-visual .octa > .face:nth-child(2) {
    transform-origin: 0% 100%;
    transform: rotate(-90deg) rotatex(125.26deg);
}

.die-visual.d8 > button.roll-button > .face:nth-child(3),
.die-visual .octa > .face:nth-child(3) {
    transform-origin: 100% 100%;
    transform: rotate(90deg) rotatex(125.26deg);
}

.die-visual.d8 > button.roll-button > .face:nth-child(4),
.die-visual .octa > .face:nth-child(4) {
    top: 0;
    transform-origin: 50% 0%;
    transform: rotatex(-54.74deg);
}

.die-visual.d8 > button.roll-button > .face:nth-child(5),
.die-visual .octa > .face:nth-child(5) {
    top: 0;
    transform-origin: 50% 0%;
    transform: rotatex(54.74deg);
}

.die-visual.d8 > button.roll-button > .face:nth-child(6),
.die-visual .octa > .face:nth-child(6) {
    top: 0;
    transform-origin: 0% 0%;
    transform: rotate(90deg) rotatex(125.26deg);
}

.die-visual.d8 > button.roll-button > .face:nth-child(7),
.die-visual .octa > .face:nth-child(7) {
    top: 0;
    transform-origin: 100% 0%;
    transform: rotate(-90deg) rotatex(125.26deg);
}

.die-visual.d8 > button.roll-button > .face:nth-child(8),
.die-visual .octa > .face:nth-child(8) {
    bottom: 0;
    transform-origin: 50% 100%;
    transform: rotatex(-54.74deg);
}

.die-visual.d8 > button.roll-button svg,
.die-visual .octa svg {
    fill: rgba(0,0,0,0.3);
    stroke-width: 2px;
    stroke: var(--blue-6);
}

/* ============================================
   D10: Pentagonal Trapezohedron
   ============================================ */

.die-visual.d10 > button.roll-button,
.die-visual .pentrap {
    position: relative;
    width: var(--d10-size);
    height: var(--d10-size);
    margin: 0 auto;
    border: none;
    background: none;
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    transition: transform 1s ease;
}

.die-visual.d10 > button.roll-button > .face,
.die-visual .pentrap > .face {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 20%;
    width: 60%;
    height: auto;
}

.die-visual.d10 > button.roll-button > .face:nth-child(1),
.die-visual .pentrap > .face:nth-child(1) {
    transform-origin: 50% 0%;
    transform: translateZ(calc(var(--d10-size) * 0.5875)) rotate(0deg) rotatex(-128.18deg);
}

.die-visual.d10 > button.roll-button > .face:nth-child(2),
.die-visual .pentrap > .face:nth-child(2) {
    transform-origin: 50% 0%;
    transform: translateZ(calc(var(--d10-size) * 0.5875)) rotate(72deg) rotatex(-128.18deg);
}

.die-visual.d10 > button.roll-button > .face:nth-child(3),
.die-visual .pentrap > .face:nth-child(3) {
    transform-origin: 50% 0%;
    transform: translateZ(calc(var(--d10-size) * 0.5875)) rotate(144deg) rotatex(-128.18deg);
}

.die-visual.d10 > button.roll-button > .face:nth-child(4),
.die-visual .pentrap > .face:nth-child(4) {
    transform-origin: 50% 0%;
    transform: translateZ(calc(var(--d10-size) * 0.5875)) rotate(216deg) rotatex(-128.18deg);
}

.die-visual.d10 > button.roll-button > .face:nth-child(5),
.die-visual .pentrap > .face:nth-child(5) {
    transform-origin: 50% 0%;
    transform: translateZ(calc(var(--d10-size) * 0.5875)) rotate(288deg) rotatex(-128.18deg);
}

.die-visual.d10 > button.roll-button > .face:nth-child(6),
.die-visual .pentrap > .face:nth-child(6) {
    transform-origin: 50% 0%;
    transform: translateZ(calc(var(--d10-size) * -0.5875)) rotate(36deg) rotatex(128.18deg);
}

.die-visual.d10 > button.roll-button > .face:nth-child(7),
.die-visual .pentrap > .face:nth-child(7) {
    transform-origin: 50% 0%;
    transform: translateZ(calc(var(--d10-size) * -0.5875)) rotate(108deg) rotatex(128.18deg);
}

.die-visual.d10 > button.roll-button > .face:nth-child(8),
.die-visual .pentrap > .face:nth-child(8) {
    transform-origin: 50% 0%;
    transform: translateZ(calc(var(--d10-size) * -0.5875)) rotate(180deg) rotatex(128.18deg);
}

.die-visual.d10 > button.roll-button > .face:nth-child(9),
.die-visual .pentrap > .face:nth-child(9) {
    transform-origin: 50% 0%;
    transform: translateZ(calc(var(--d10-size) * -0.5875)) rotate(252deg) rotatex(128.18deg);
}

.die-visual.d10 > button.roll-button > .face:nth-child(10),
.die-visual .pentrap > .face:nth-child(10) {
    transform-origin: 50% 0%;
    transform: translateZ(calc(var(--d10-size) * -0.58)) rotate(324deg) rotatex(128.18deg);
}

.die-visual.d10 > button.roll-button svg,
.die-visual .pentrap svg {
    fill: rgba(0,0,0,0.3);
    stroke-width: 1px;
    stroke: var(--blue-6);
}

/* ============================================
   D12: Dodecahedron
   ============================================ */

.die-visual.d12 > button.roll-button,
.die-visual .dodec {
    position: relative;
    width: var(--dc-size);
    height: calc(var(--dc-size) * 0.9511);
    margin: 0 auto;
    border: none;
    background: none;
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    transition: transform 1s ease;
}

.die-visual.d12 > button.roll-button > .face,
.die-visual .dodec > .face {
    display: flex;
    position: absolute;
    top: 16.75%;
    left: 19.75%;
    width: var(--d12-size);
    height: auto;
    transform-origin: 50% 55.27%;
}

.die-visual.d12 > button.roll-button > .face:nth-child(1),
.die-visual .dodec > .face:nth-child(1) {
    transform: translateZ(calc(var(--d12-size) * .69)) rotate(0deg) rotatex(0deg);
}

.die-visual.d12 > button.roll-button > .face:nth-child(2),
.die-visual .dodec > .face:nth-child(2) {
    transform: translateY(65%) translateZ(calc(var(--d12-size) * .31)) rotate(180deg) rotatex(63.4deg);
}

.die-visual.d12 > button.roll-button > .face:nth-child(3),
.die-visual .dodec > .face:nth-child(3) {
    transform: translateX(-58.7%) translateY(20.15%) translateZ(calc(var(--d12-size) * .31)) rotate(-108deg) rotatex(63.4deg);
}

.die-visual.d12 > button.roll-button > .face:nth-child(4),
.die-visual .dodec > .face:nth-child(4) {
    transform: translateX(58.7%) translateY(20.15%) translateZ(calc(var(--d12-size) * .31)) rotate(108deg) rotatex(63.4deg);
}

.die-visual.d12 > button.roll-button > .face:nth-child(5),
.die-visual .dodec > .face:nth-child(5) {
    transform: translateX(-36.3%) translateY(-52.45%) translateZ(calc(var(--d12-size) * .31)) rotate(-36deg) rotatex(63.4deg);
}

.die-visual.d12 > button.roll-button > .face:nth-child(6),
.die-visual .dodec > .face:nth-child(6) {
    transform: translateX(36.3%) translateY(-52.45%) translateZ(calc(var(--d12-size) * .31)) rotate(36deg) rotatex(63.4deg);
}

.die-visual.d12 > button.roll-button > .face:nth-child(7),
.die-visual .dodec > .face:nth-child(7) {
    transform: translateZ(calc(var(--d12-size) * -0.69)) rotate(180deg) rotatex(0deg);
}

.die-visual.d12 > button.roll-button > .face:nth-child(8),
.die-visual .dodec > .face:nth-child(8) {
    transform: translateY(-65%) translateZ(calc(var(--d12-size) * -0.31)) rotate(0deg) rotatex(-63.4deg);
}

.die-visual.d12 > button.roll-button > .face:nth-child(9),
.die-visual .dodec > .face:nth-child(9) {
    transform: translateX(58.7%) translateY(-20.15%) translateZ(calc(var(--d12-size) * -0.31)) rotate(72deg) rotatex(-63.4deg);
}

.die-visual.d12 > button.roll-button > .face:nth-child(10),
.die-visual .dodec > .face:nth-child(10) {
    transform: translateX(-58.7%) translateY(-20.15%) translateZ(calc(var(--d12-size) * -0.31)) rotate(-72deg) rotatex(-63.4deg);
}

.die-visual.d12 > button.roll-button > .face:nth-child(11),
.die-visual .dodec > .face:nth-child(11) {
    transform: translateX(36.3%) translateY(52.45%) translateZ(calc(var(--d12-size) * -0.31)) rotate(144deg) rotatex(-63.4deg);
}

.die-visual.d12 > button.roll-button > .face:nth-child(12),
.die-visual .dodec > .face:nth-child(12) {
    transform: translateX(-36.3%) translateY(52.45%) translateZ(calc(var(--d12-size) * -0.31)) rotate(-144deg) rotatex(-63.4deg);
}

.die-visual.d12 > button.roll-button svg,
.die-visual .dodec svg {
    fill: rgba(0,0,0,0.3);
    stroke-width: 2px;
    stroke: var(--blue-6);
}

/* ============================================
   D20: Icosahedron
   ============================================ */

.die-visual.d20 > button.roll-button,
.die-visual .icosa {
    position: relative;
    width: var(--dc-size);
    height: var(--dc-size);
    margin: 0 auto;
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    border: none;
    background: none;
    transition: transform 1s ease;
}

.die-visual.d20 > button.roll-button > .face,
.die-visual .icosa > .face {
    display: flex;
    position: absolute;
    top: 50%;
    left: 19.75%;
    width: var(--d20-size);
    height: calc(var(--d20-size) * .866);
}

/* TOP */
.die-visual.d20 > button.roll-button > .face:nth-child(1),
.die-visual .icosa > .face:nth-child(1) {
    transform-origin: 50% 0%;
    transform: translateZ(calc(var(--d20-size) * 0.95)) rotatex(-37.35deg);
}

.die-visual.d20 > button.roll-button > .face:nth-child(2),
.die-visual .icosa > .face:nth-child(2) {
    transform-origin: 50% 0%;
    transform: translateZ(calc(var(--d20-size) * 0.95)) rotate(72deg) rotatex(-37.35deg);
}

.die-visual.d20 > button.roll-button > .face:nth-child(3),
.die-visual .icosa > .face:nth-child(3) {
    transform-origin: 50% 0%;
    transform: translateZ(calc(var(--d20-size) * 0.95)) rotate(144deg) rotatex(-37.35deg);
}

.die-visual.d20 > button.roll-button > .face:nth-child(4),
.die-visual .icosa > .face:nth-child(4) {
    transform-origin: 50% 0%;
    transform: translateZ(calc(var(--d20-size) * 0.95)) rotate(216deg) rotatex(-37.35deg);
}

.die-visual.d20 > button.roll-button > .face:nth-child(5),
.die-visual .icosa > .face:nth-child(5) {
    transform-origin: 50% 0%;
    transform: translateZ(calc(var(--d20-size) * 0.95)) rotate(288deg) rotatex(-37.35deg);
}

/* TOP MIDDLE */
.die-visual.d20 > button.roll-button > .face:nth-child(6),
.die-visual .icosa > .face:nth-child(6) {
    transform-origin: 50% 100%;
    transform: translateY(-20.5%) translateZ(calc(var(--d20-size) * 0.425)) rotate(180deg) rotatex(79.2deg);
}

.die-visual.d20 > button.roll-button > .face:nth-child(7),
.die-visual .icosa > .face:nth-child(7) {
    transform-origin: 50% 100%;
    transform: translateX(-65.5%) translateY(-75.5%) translateZ(calc(var(--d20-size) * 0.425)) rotate(-108deg) rotatex(79.2deg);
}

.die-visual.d20 > button.roll-button > .face:nth-child(8),
.die-visual .icosa > .face:nth-child(8) {
    transform-origin: 50% 100%;
    transform: translateX(65.5%) translateY(-75.5%) translateZ(calc(var(--d20-size) * 0.425)) rotate(108deg) rotatex(79.2deg);
}

.die-visual.d20 > button.roll-button > .face:nth-child(9),
.die-visual .icosa > .face:nth-child(9) {
    transform-origin: 50% 100%;
    transform: translateX(-40.5%) translateY(-164.3%) translateZ(calc(var(--d20-size) * 0.425)) rotate(-36deg) rotatex(79.2deg);
}

.die-visual.d20 > button.roll-button > .face:nth-child(10),
.die-visual .icosa > .face:nth-child(10) {
    transform-origin: 50% 100%;
    transform: translateX(40.5%) translateY(-164.3%) translateZ(calc(var(--d20-size) * 0.425)) rotate(36deg) rotatex(79.2deg);
}

/* BOTTOM */
.die-visual.d20 > button.roll-button > .face:nth-child(11),
.die-visual .icosa > .face:nth-child(11) {
    transform-origin: 50% 0%;
    transform: translateZ(calc(var(--d20-size) * -0.95)) rotate(180deg) rotatex(37.35deg);
}

.die-visual.d20 > button.roll-button > .face:nth-child(12),
.die-visual .icosa > .face:nth-child(12) {
    transform-origin: 50% 0%;
    transform: translateZ(calc(var(--d20-size) * -0.95)) rotate(108deg) rotatex(37.35deg);
}

.die-visual.d20 > button.roll-button > .face:nth-child(13),
.die-visual .icosa > .face:nth-child(13) {
    transform-origin: 50% 0%;
    transform: translateZ(calc(var(--d20-size) * -0.95)) rotate(36deg) rotatex(37.35deg);
}

.die-visual.d20 > button.roll-button > .face:nth-child(14),
.die-visual .icosa > .face:nth-child(14) {
    transform-origin: 50% 0%;
    transform: translateZ(calc(var(--d20-size) * -0.95)) rotate(252deg) rotatex(37.35deg);
}

.die-visual.d20 > button.roll-button > .face:nth-child(15),
.die-visual .icosa > .face:nth-child(15) {
    transform-origin: 50% 0%;
    transform: translateZ(calc(var(--d20-size) * -0.95)) rotate(324deg) rotatex(37.35deg);
}

/* BOTTOM MIDDLE */
.die-visual.d20 > button.roll-button > .face:nth-child(16),
.die-visual .icosa > .face:nth-child(16) {
    transform-origin: 50% 100%;
    transform: translateY(-179.5%) translateZ(calc(var(--d20-size) * -0.425)) rotate(0deg) rotatex(-79.2deg);
}

.die-visual.d20 > button.roll-button > .face:nth-child(17),
.die-visual .icosa > .face:nth-child(17) {
    transform-origin: 50% 100%;
    transform: translateX(-65.5%) translateY(-124.5%) translateZ(calc(var(--d20-size) * -0.425)) rotate(-72deg) rotatex(-79.2deg);
}

.die-visual.d20 > button.roll-button > .face:nth-child(18),
.die-visual .icosa > .face:nth-child(18) {
    transform-origin: 50% 100%;
    transform: translateX(65.5%) translateY(-124.5%) translateZ(calc(var(--d20-size) * -0.425)) rotate(72deg) rotatex(-79.2deg);
}

.die-visual.d20 > button.roll-button > .face:nth-child(19),
.die-visual .icosa > .face:nth-child(19) {
    transform-origin: 50% 100%;
    transform: translateX(-40.5%) translateY(-35.7%) translateZ(calc(var(--d20-size) * -0.425)) rotate(-144deg) rotatex(-79.2deg);
}

.die-visual.d20 > button.roll-button > .face:nth-child(20),
.die-visual .icosa > .face:nth-child(20) {
    transform-origin: 50% 100%;
    transform: translateX(40.5%) translateY(-35.7%) translateZ(calc(var(--d20-size) * -0.425)) rotate(144deg) rotatex(-79.2deg);
}

.die-visual.d20 > button.roll-button svg,
.die-visual .icosa svg {
    fill: rgba(0,0,0,0.3);
    stroke-width: 2px;
    stroke: var(--blue-6);
}

/* ============================================
   DICE ANIMATIONS (Only when rolling)
   ============================================ */

@keyframes spin {
    from {
        transform: rotateX(0) rotateY(0) rotateZ(0);
    }
    to {
        transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
    }
}

.die-rolling > button.roll-button {
    animation: spin 2.5s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

.die-revealed > button.roll-button {
    animation: none;
}

@keyframes popIn {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); }
}

.die-enter { 
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; 
}

.die-btn {
    transition: transform 0.1s;
    cursor: pointer;
}

.die-btn:active { 
    transform: scale(0.9); 
}

/* ============================================
   DICE SKINS (Applied to SVG strokes)
   ============================================ */

/* Fire Skin */
.dice-skin-fire .face svg {
    stroke: hsl(0, 75%, 50%) !important;
}

/* Lightning Skin */
.dice-skin-lightning .face svg {
    stroke: hsl(45, 95%, 60%) !important;
}

/* Ice Skin */
.dice-skin-ice .face svg {
    stroke: hsl(210, 85%, 60%) !important;
}

/* Earth Skin */
.dice-skin-earth .face svg {
    stroke: hsl(75, 70%, 50%) !important;
}

/* ============================================
   PERSONA DICE SKINS - Themed Styles
   ============================================ */

/* Persona 5 Skin - Bold Red/Black/White with Stripes */
.dice-skin-persona5 .die-visual {
    filter: drop-shadow(0 0 8px rgba(225, 29, 72, 0.6));
}

.dice-skin-persona5 .face svg {
    stroke: #e11d48 !important;
    stroke-width: 3.5 !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9));
}

.dice-skin-persona5 .face svg path,
.dice-skin-persona5 .face svg rect,
.dice-skin-persona5 .face svg polygon {
    fill: #0a0a0a !important;
    stroke: #e11d48 !important;
    stroke-width: 3.5 !important;
    filter: drop-shadow(0 0 2px rgba(225, 29, 72, 0.3));
}

.dice-skin-persona5 .outcome {
    color: #ffffff !important;
    text-shadow: 
        0 0 10px rgba(225, 29, 72, 1),
        0 0 20px rgba(225, 29, 72, 0.8),
        0 2px 6px rgba(0, 0, 0, 1),
        -2px -2px 0 #e11d48,
        2px 2px 0 #000000 !important;
    font-weight: 800 !important;
}

.dice-skin-persona5.die-rolling .die-visual {
    animation: persona5-glow 0.5s ease-in-out infinite alternate;
}

@keyframes persona5-glow {
    0% { filter: drop-shadow(0 0 8px rgba(225, 29, 72, 0.6)); }
    100% { filter: drop-shadow(0 0 16px rgba(225, 29, 72, 1)); }
}

/* Persona 4 Skin - Warm Yellow/Gold with Energy */
.dice-skin-persona4 .die-visual {
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.7));
}

.dice-skin-persona4 .face svg {
    stroke: #fbbf24 !important;
    stroke-width: 3 !important;
}

.dice-skin-persona4 .face svg path,
.dice-skin-persona4 .face svg rect,
.dice-skin-persona4 .face svg polygon {
    fill: #1a1400 !important;
    stroke: #fbbf24 !important;
    stroke-width: 3 !important;
    filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.4));
    animation: persona4-shimmer 3s ease-in-out infinite;
}

@keyframes persona4-shimmer {
    0%, 100% { 
        filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.4));
        opacity: 1;
    }
    50% { 
        filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.7));
        opacity: 1;
    }
}

.dice-skin-persona4 .outcome {
    color: #fef3c7 !important;
    text-shadow: 
        0 0 15px rgba(251, 191, 36, 1),
        0 0 25px rgba(251, 191, 36, 0.8),
        0 0 35px rgba(245, 158, 11, 0.6),
        0 2px 6px rgba(0, 0, 0, 1),
        -1px -1px 0 #fcd34d,
        1px 1px 0 #92400e !important;
    font-weight: 700 !important;
}

.dice-skin-persona4.die-rolling .die-visual {
    animation: persona4-pulse 0.4s ease-in-out infinite alternate;
}

@keyframes persona4-pulse {
    0% { 
        filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.7));
        transform: scale(1);
    }
    100% { 
        filter: drop-shadow(0 0 18px rgba(251, 191, 36, 1));
        transform: scale(1.02);
    }
}

/* Persona 3 Skin - Mysterious Blue/Dark Theme */
.dice-skin-persona3 .die-visual {
    filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.5));
}

.dice-skin-persona3 .face svg {
    stroke: #06b6d4 !important;
    stroke-width: 2.5 !important;
}

.dice-skin-persona3 .face svg path,
.dice-skin-persona3 .face svg rect,
.dice-skin-persona3 .face svg polygon {
    fill: #000a0f !important;
    stroke: #06b6d4 !important;
    stroke-width: 2.5 !important;
    filter: drop-shadow(0 0 2px rgba(6, 182, 212, 0.3));
    animation: persona3-breath 4s ease-in-out infinite;
}

@keyframes persona3-breath {
    0%, 100% { 
        filter: drop-shadow(0 0 2px rgba(6, 182, 212, 0.3));
        opacity: 1;
    }
    50% { 
        filter: drop-shadow(0 0 5px rgba(6, 182, 212, 0.6));
        opacity: 1;
    }
}

.dice-skin-persona3 .outcome {
    color: #cffafe !important;
    text-shadow: 
        0 0 12px rgba(6, 182, 212, 1),
        0 0 20px rgba(6, 182, 212, 0.7),
        0 0 30px rgba(34, 211, 238, 0.5),
        0 2px 6px rgba(0, 0, 0, 1),
        -1px -1px 0 #22d3ee,
        1px 1px 0 #0e7490 !important;
    font-weight: 700 !important;
}

.dice-skin-persona3.die-rolling .die-visual {
    animation: persona3-glow 0.6s ease-in-out infinite alternate;
}

@keyframes persona3-glow {
    0% { filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.5)); }
    100% { filter: drop-shadow(0 0 20px rgba(6, 182, 212, 0.9)); }
}

/* ============================================
   SPECIAL EFFECTS
   ============================================ */

.crit-success {
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.8) !important;
    filter: brightness(1.2);
}

.crit-fail {
    filter: grayscale(0.5) brightness(0.7);
}

.text-shadow-glow { 
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.8); 
}

/* ============================================
   D&D SHEET STYLES
   ============================================ */

.stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
    align-items: center;
    background: rgba(0,0,0,0.3);
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: 2px;
}

.stat-label {
    font-weight: bold;
    color: #9ca3af;
    font-size: 0.7rem;
    text-transform: uppercase;
}

.stat-mod {
    font-family: monospace;
    font-weight: bold;
    text-align: center;
    background: #374151;
    border-radius: 4px;
    padding: 2px 6px;
    color: #fff;
    font-size: 0.8rem;
}

.vital-box {
    background: #1f2937;
    border: 1px solid #374151;
    border-radius: 6px;
    padding: 6px;
    text-align: center;
}

/* Simple confetti background animation */
@keyframes confetti-fall {
    0%   { background-position: 0 0, 200px 0, 0 200px, 200px 200px; opacity: 1; }
    100% { background-position: 0 200px, 200px 200px, 0 400px, 200px 400px; opacity: 1; }
}

/* ============================================
   UI THEME SYSTEM
   ============================================ */

/* Persona 5 Theme - Bold Red/Black/White */
body.ui-skin-persona5 {
    --ui-bg-primary: #000000;
    --ui-bg-secondary: #0a0a0a;
    --ui-bg-tertiary: #1a1a1a;
    --ui-bg-panel: #0f0f0f;
    --ui-bg-surface: #1a1a1a;
    --ui-bg-elevated: #2a2a2a;
    --ui-text-primary: #ffffff;
    --ui-text-secondary: #f5f5f5;
    --ui-text-tertiary: #d1d5db;
    --ui-text-muted: #9ca3af;
    --ui-accent-primary: #e11d48;
    --ui-accent-secondary: #dc2626;
    --ui-border-primary: #374151;
    --ui-border-secondary: #4b5563;
    --ui-border-accent: #e11d48;
    background-color: var(--ui-bg-primary);
    color: var(--ui-text-primary);
}

body.ui-skin-persona5 .bg-gray-900,
body.ui-skin-persona5 .bg-gray-800,
body.ui-skin-persona5 .bg-gray-950 {
    background-color: var(--ui-bg-secondary) !important;
}

body.ui-skin-persona5 .bg-gray-800\/50,
body.ui-skin-persona5 .bg-gray-900\/50 {
    background-color: rgba(10, 10, 10, 0.5) !important;
}

body.ui-skin-persona5 .border-gray-700,
body.ui-skin-persona5 .border-gray-800 {
    border-color: rgba(55, 65, 81, 0.8) !important;
}

body.ui-skin-persona5 .border-blue-600,
body.ui-skin-persona5 .border-blue-500 {
    border-color: var(--ui-accent-primary) !important;
}

body.ui-skin-persona5 .text-blue-400,
body.ui-skin-persona5 .text-blue-300,
body.ui-skin-persona5 .text-blue-500 {
    color: var(--ui-accent-primary) !important;
}

body.ui-skin-persona5 .bg-blue-600,
body.ui-skin-persona5 .bg-blue-700,
body.ui-skin-persona5 .bg-blue-900 {
    background-color: var(--ui-accent-primary) !important;
}

body.ui-skin-persona5 .bg-blue-600:hover,
body.ui-skin-persona5 .bg-blue-700:hover {
    background-color: #be1e3d !important;
    box-shadow: 0 0 20px rgba(225, 29, 72, 0.6) !important;
    transform: scale(1.02);
}

/* Persona 5 - Enhanced Styling */
body.ui-skin-persona5 {
    background: linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #000000 100%);
    position: relative;
}


body.ui-skin-persona5 > * {
    position: relative;
    z-index: 1;
}

/* Sharp, angular borders for P5 (but preserve rounded-full) */
body.ui-skin-persona5 .rounded-xl,
body.ui-skin-persona5 .rounded-lg,
body.ui-skin-persona5 .rounded:not(.rounded-full) {
    border-radius: 4px !important;
}

/* Red glow effects */
body.ui-skin-persona5 .shadow-lg,
body.ui-skin-persona5 .shadow-xl {
    box-shadow: 0 10px 25px rgba(225, 29, 72, 0.3), 0 0 40px rgba(225, 29, 72, 0.1) !important;
}

body.ui-skin-persona5 .border-2 {
    border-width: 2px !important;
    border-style: solid !important;
}

/* Text with red glow */
body.ui-skin-persona5 .text-blue-100,
body.ui-skin-persona5 .text-blue-300 {
    text-shadow: 0 0 10px rgba(225, 29, 72, 0.5), 0 2px 4px rgba(0, 0, 0, 0.8) !important;
}

/* Input fields */
body.ui-skin-persona5 input,
body.ui-skin-persona5 textarea,
body.ui-skin-persona5 select {
    border-color: rgba(225, 29, 72, 0.5) !important;
    background-color: #0a0a0a !important;
    color: #ffffff !important;
}

body.ui-skin-persona5 input:focus,
body.ui-skin-persona5 textarea:focus,
body.ui-skin-persona5 select:focus {
    border-color: #e11d48 !important;
    box-shadow: 0 0 15px rgba(225, 29, 72, 0.5), inset 0 0 10px rgba(225, 29, 72, 0.1) !important;
    outline: none !important;
}

/* Buttons with aggressive styling */
body.ui-skin-persona5 button.bg-blue-600,
body.ui-skin-persona5 button.bg-blue-700 {
    position: relative;
    overflow: hidden;
    font-weight: bold;
    letter-spacing: 0.5px;
}

body.ui-skin-persona5 button.bg-blue-600::before,
body.ui-skin-persona5 button.bg-blue-700::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

body.ui-skin-persona5 button.bg-blue-600:hover::before,
body.ui-skin-persona5 button.bg-blue-700:hover::before {
    left: 100%;
}

/* Scrollbar styling */
body.ui-skin-persona5 ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #e11d48, #dc2626) !important;
    border-radius: 4px !important;
}

body.ui-skin-persona5 ::-webkit-scrollbar-track {
    background: #0a0a0a !important;
}

/* Panels with red accents */
body.ui-skin-persona5 .bg-blue-900\/30 {
    background: rgba(225, 29, 72, 0.15) !important;
    border-left: 3px solid #e11d48 !important;
}

/* Red/gray color overrides */
body.ui-skin-persona5 .text-red-500,
body.ui-skin-persona5 .text-red-600 {
    color: #e11d48 !important;
    text-shadow: 0 0 8px rgba(225, 29, 72, 0.6) !important;
}

body.ui-skin-persona5 .bg-red-600,
body.ui-skin-persona5 .bg-red-700 {
    background-color: #e11d48 !important;
}

body.ui-skin-persona5 .border-red-500 {
    border-color: #e11d48 !important;
}

/* Additional P5 overrides for indigo/purple elements */
body.ui-skin-persona5 .bg-indigo-600,
body.ui-skin-persona5 .bg-indigo-500 {
    background-color: #e11d48 !important;
}

body.ui-skin-persona5 .border-indigo-400 {
    border-color: #e11d48 !important;
}

body.ui-skin-persona5 .text-indigo-600 {
    color: #e11d48 !important;
}

/* P5 Panel headers with red accents */
body.ui-skin-persona5 .bg-blue-900\/30 {
    background: rgba(225, 29, 72, 0.15) !important;
}

body.ui-skin-persona5 .border-blue-700 {
    border-color: rgba(225, 29, 72, 0.6) !important;
}

/* Persona 4 Theme - Warm Yellow/Gold */
body.ui-skin-persona4 {
    --ui-bg-primary: #1a1400;
    --ui-bg-secondary: #2d1f00;
    --ui-bg-tertiary: #3d2f00;
    --ui-bg-panel: #2d1f00;
    --ui-bg-surface: #3d2f00;
    --ui-bg-elevated: #4d3f00;
    --ui-text-primary: #fef3c7;
    --ui-text-secondary: #fde68a;
    --ui-text-tertiary: #fcd34d;
    --ui-text-muted: #fbbf24;
    --ui-accent-primary: #fbbf24;
    --ui-accent-secondary: #fcd34d;
    --ui-border-primary: #92400e;
    --ui-border-secondary: #78350f;
    --ui-border-accent: #fbbf24;
    background-color: var(--ui-bg-primary);
    color: var(--ui-text-primary);
}

body.ui-skin-persona4 .bg-gray-900,
body.ui-skin-persona4 .bg-gray-800,
body.ui-skin-persona4 .bg-gray-950 {
    background-color: var(--ui-bg-secondary) !important;
}

body.ui-skin-persona4 .bg-gray-800\/50,
body.ui-skin-persona4 .bg-gray-900\/50 {
    background-color: rgba(45, 31, 0, 0.5) !important;
}

body.ui-skin-persona4 .border-gray-700,
body.ui-skin-persona4 .border-gray-800 {
    border-color: rgba(146, 64, 14, 0.6) !important;
}

body.ui-skin-persona4 .border-blue-600,
body.ui-skin-persona4 .border-blue-500 {
    border-color: var(--ui-accent-primary) !important;
}

body.ui-skin-persona4 .text-blue-400,
body.ui-skin-persona4 .text-blue-300,
body.ui-skin-persona4 .text-blue-500 {
    color: var(--ui-accent-primary) !important;
}

body.ui-skin-persona4 .bg-blue-600,
body.ui-skin-persona4 .bg-blue-700,
body.ui-skin-persona4 .bg-blue-900 {
    background-color: var(--ui-accent-primary) !important;
}

body.ui-skin-persona4 .bg-blue-600:hover,
body.ui-skin-persona4 .bg-blue-700:hover {
    background-color: #f59e0b !important;
}

body.ui-skin-persona4 .text-white {
    color: var(--ui-text-primary) !important;
}

body.ui-skin-persona4 .text-gray-300,
body.ui-skin-persona4 .text-gray-400 {
    color: var(--ui-text-secondary) !important;
}

/* Persona 4 - Enhanced Styling */
body.ui-skin-persona4 {
    background: linear-gradient(135deg, #1a1400 0%, #2d1f00 25%, #3d2f00 50%, #2d1f00 75%, #1a1400 100%);
    background-size: 200% 200%;
    position: relative;
    animation: persona4-bg-shift 8s ease-in-out infinite;
}

@keyframes persona4-bg-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

body.ui-skin-persona4::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 1px,
            rgba(251, 191, 36, 0.1) 1px,
            rgba(251, 191, 36, 0.1) 2px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(251, 191, 36, 0.05) 0px,
            rgba(251, 191, 36, 0.05) 1px,
            transparent 1px,
            transparent 2px
        );
    pointer-events: none;
    z-index: 0;
    animation: persona4-static 0.1s linear infinite;
    opacity: 0.3;
}

@keyframes persona4-static {
    0% { transform: translateY(0); }
    100% { transform: translateY(2px); }
}

body.ui-skin-persona4 > * {
    position: relative;
    z-index: 1;
}

/* Rounded, friendly borders for P4 (but preserve rounded-full) */
body.ui-skin-persona4 .rounded-xl:not(.rounded-full),
body.ui-skin-persona4 .rounded-lg:not(.rounded-full) {
    border-radius: 8px !important;
}

/* Warm yellow glow effects */
body.ui-skin-persona4 .shadow-lg,
body.ui-skin-persona4 .shadow-xl {
    box-shadow: 0 10px 25px rgba(251, 191, 36, 0.4), 0 0 40px rgba(251, 191, 36, 0.2) !important;
}

/* Text with warm glow */
body.ui-skin-persona4 .text-blue-100,
body.ui-skin-persona4 .text-blue-300 {
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.6), 0 2px 4px rgba(0, 0, 0, 0.8), 2px 2px 0 rgba(146, 64, 14, 0.5) !important;
}

/* Input fields with warm styling */
body.ui-skin-persona4 input,
body.ui-skin-persona4 textarea,
body.ui-skin-persona4 select {
    border-color: rgba(251, 191, 36, 0.5) !important;
    background: linear-gradient(135deg, #2d1f00 0%, #3d2f00 100%) !important;
    color: #fef3c7 !important;
    border-radius: 6px !important;
}

body.ui-skin-persona4 input:focus,
body.ui-skin-persona4 textarea:focus,
body.ui-skin-persona4 select:focus {
    border-color: #fbbf24 !important;
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.6), inset 0 0 10px rgba(251, 191, 36, 0.2) !important;
    outline: none !important;
    background: linear-gradient(135deg, #3d2f00 0%, #4d3f00 100%) !important;
}

/* Buttons with cheerful styling */
body.ui-skin-persona4 button.bg-blue-600:not(.ui-skin-button),
body.ui-skin-persona4 button.bg-blue-700:not(.ui-skin-button) {
    position: relative;
    overflow: hidden;
    font-weight: bold;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

body.ui-skin-persona4 button.bg-blue-600::after,
body.ui-skin-persona4 button.bg-blue-700::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

body.ui-skin-persona4 button.bg-blue-600:active::after,
body.ui-skin-persona4 button.bg-blue-700:active::after {
    width: 300px;
    height: 300px;
}

/* Scrollbar styling */
body.ui-skin-persona4 ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #fbbf24, #f59e0b) !important;
    border-radius: 6px !important;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3) !important;
}

body.ui-skin-persona4 ::-webkit-scrollbar-track {
    background: #1a1400 !important;
}

/* Panels with warm accents */
body.ui-skin-persona4 .bg-blue-900\/30 {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(251, 191, 36, 0.25) 100%) !important;
    border-left: 3px solid #fbbf24 !important;
    border-radius: 8px !important;
}

/* Retro striped borders */
body.ui-skin-persona4 .border-2 {
    border-image: linear-gradient(90deg, #fbbf24, #fcd34d, #fbbf24) 1 !important;
    border-style: solid !important;
}

/* Additional P4 overrides for indigo/purple elements */
body.ui-skin-persona4 .bg-indigo-600,
body.ui-skin-persona4 .bg-indigo-500 {
    background-color: #fbbf24 !important;
}

body.ui-skin-persona4 .border-indigo-400 {
    border-color: #fbbf24 !important;
}

body.ui-skin-persona4 .text-indigo-600 {
    color: #fbbf24 !important;
}

/* P4 Panel headers with warm accents */
body.ui-skin-persona4 .border-blue-700 {
    border-color: rgba(251, 191, 36, 0.6) !important;
}

/* Persona 3 Theme - Mysterious Blue/Dark */
body.ui-skin-persona3 {
    --ui-bg-primary: #000a0f;
    --ui-bg-secondary: #001420;
    --ui-bg-tertiary: #001e30;
    --ui-bg-panel: #001420;
    --ui-bg-surface: #001e30;
    --ui-bg-elevated: #002840;
    --ui-text-primary: #cffafe;
    --ui-text-secondary: #a5f3fc;
    --ui-text-tertiary: #67e8f9;
    --ui-text-muted: #22d3ee;
    --ui-accent-primary: #06b6d4;
    --ui-accent-secondary: #22d3ee;
    --ui-border-primary: #0e7490;
    --ui-border-secondary: #155e75;
    --ui-border-accent: #06b6d4;
    background-color: var(--ui-bg-primary);
    color: var(--ui-text-primary);
}

body.ui-skin-persona3 .bg-gray-900,
body.ui-skin-persona3 .bg-gray-800,
body.ui-skin-persona3 .bg-gray-950 {
    background-color: var(--ui-bg-secondary) !important;
}

body.ui-skin-persona3 .bg-gray-800\/50,
body.ui-skin-persona3 .bg-gray-900\/50 {
    background-color: rgba(0, 20, 32, 0.5) !important;
}

body.ui-skin-persona3 .border-gray-700,
body.ui-skin-persona3 .border-gray-800 {
    border-color: rgba(14, 116, 144, 0.6) !important;
}

body.ui-skin-persona3 .border-blue-600,
body.ui-skin-persona3 .border-blue-500 {
    border-color: var(--ui-accent-primary) !important;
}

body.ui-skin-persona3 .text-blue-400,
body.ui-skin-persona3 .text-blue-300,
body.ui-skin-persona3 .text-blue-500 {
    color: var(--ui-accent-primary) !important;
}

body.ui-skin-persona3 .bg-blue-600,
body.ui-skin-persona3 .bg-blue-700,
body.ui-skin-persona3 .bg-blue-900 {
    background-color: var(--ui-accent-primary) !important;
}

body.ui-skin-persona3 .bg-blue-600:hover,
body.ui-skin-persona3 .bg-blue-700:hover {
    background-color: #0891b2 !important;
}

body.ui-skin-persona3 .text-white {
    color: var(--ui-text-primary) !important;
}

body.ui-skin-persona3 .text-gray-300,
body.ui-skin-persona3 .text-gray-400 {
    color: var(--ui-text-secondary) !important;
}

/* Persona 3 - Enhanced Styling */
body.ui-skin-persona3 {
    background: linear-gradient(135deg, #000a0f 0%, #001420 30%, #001e30 60%, #001420 100%);
    background-size: 200% 200%;
    position: relative;
    animation: persona3-bg-flow 12s ease-in-out infinite;
}

@keyframes persona3-bg-flow {
    0%, 100% { 
        background-position: 0% 0%;
        filter: brightness(1);
    }
    50% { 
        background-position: 100% 100%;
        filter: brightness(1.05);
    }
}

body.ui-skin-persona3::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(6, 182, 212, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(34, 211, 238, 0.08) 0%, transparent 50%),
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 20px,
            rgba(6, 182, 212, 0.03) 20px,
            rgba(6, 182, 212, 0.03) 40px
        );
    pointer-events: none;
    z-index: 0;
    animation: persona3-ripple 15s ease-in-out infinite;
    will-change: opacity;
}

@keyframes persona3-ripple {
    0%, 100% { 
        opacity: 0.5;
    }
    50% { 
        opacity: 0.8;
    }
}

body.ui-skin-persona3 > * {
    position: relative;
    z-index: 1;
}

/* Smooth, flowing borders for P3 (but preserve rounded-full) */
body.ui-skin-persona3 .rounded-xl:not(.rounded-full),
body.ui-skin-persona3 .rounded-lg:not(.rounded-full) {
    border-radius: 12px !important;
}

body.ui-skin-persona3 .rounded:not(.rounded-full) {
    border-radius: 8px !important;
}

/* Cyan glow effects with soft edges */
body.ui-skin-persona3 .shadow-lg,
body.ui-skin-persona3 .shadow-xl {
    box-shadow: 0 10px 30px rgba(6, 182, 212, 0.3), 0 0 50px rgba(6, 182, 212, 0.15), inset 0 0 20px rgba(6, 182, 212, 0.05) !important;
}

/* Text with cyan glow and depth */
body.ui-skin-persona3 .text-blue-100,
body.ui-skin-persona3 .text-blue-300 {
    text-shadow: 0 0 12px rgba(6, 182, 212, 0.6), 0 0 24px rgba(6, 182, 212, 0.3), 0 2px 4px rgba(0, 0, 0, 0.8) !important;
}

body.ui-skin-persona3 .text-white {
    text-shadow: 0 0 8px rgba(207, 250, 254, 0.4), 0 2px 4px rgba(0, 0, 0, 0.6) !important;
}

/* Input fields with underwater feel */
body.ui-skin-persona3 input,
body.ui-skin-persona3 textarea,
body.ui-skin-persona3 select {
    border-color: rgba(6, 182, 212, 0.4) !important;
    background: linear-gradient(135deg, rgba(0, 20, 32, 0.8) 0%, rgba(0, 30, 48, 0.9) 100%) !important;
    color: #cffafe !important;
    border-radius: 8px !important;
    backdrop-filter: blur(10px);
}

body.ui-skin-persona3 input:focus,
body.ui-skin-persona3 textarea:focus,
body.ui-skin-persona3 select:focus {
    border-color: #06b6d4 !important;
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.5), 0 0 40px rgba(6, 182, 212, 0.2), inset 0 0 15px rgba(6, 182, 212, 0.1) !important;
    outline: none !important;
    background: linear-gradient(135deg, rgba(0, 30, 48, 0.9) 0%, rgba(0, 40, 64, 1) 100%) !important;
    animation: persona3-input-glow 2s ease-in-out infinite;
}

@keyframes persona3-input-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(6, 182, 212, 0.5), 0 0 40px rgba(6, 182, 212, 0.2), inset 0 0 15px rgba(6, 182, 212, 0.1); }
    50% { box-shadow: 0 0 25px rgba(6, 182, 212, 0.7), 0 0 50px rgba(6, 182, 212, 0.3), inset 0 0 20px rgba(6, 182, 212, 0.15); }
}

/* Buttons with flowing, smooth styling */
body.ui-skin-persona3 button.bg-blue-600:not(.ui-skin-button),
body.ui-skin-persona3 button.bg-blue-700:not(.ui-skin-button) {
    position: relative;
    overflow: hidden;
    font-weight: 500;
    border-radius: 10px !important;
    box-shadow: 0 4px 20px rgba(6, 182, 212, 0.4), inset 0 1px 0 rgba(207, 250, 254, 0.2) !important;
    transition: all 0.3s ease;
}

body.ui-skin-persona3 button.bg-blue-600::before,
body.ui-skin-persona3 button.bg-blue-700::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(207, 250, 254, 0.2) 0%, transparent 70%);
    animation: persona3-button-wave 3s ease-in-out infinite;
}

@keyframes persona3-button-wave {
    0%, 100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; }
}

body.ui-skin-persona3 button.bg-blue-600:hover,
body.ui-skin-persona3 button.bg-blue-700:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(6, 182, 212, 0.5), 0 0 50px rgba(6, 182, 212, 0.3), inset 0 1px 0 rgba(207, 250, 254, 0.3) !important;
}

/* Scrollbar styling with flowing appearance */
body.ui-skin-persona3 ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #06b6d4, #22d3ee, #06b6d4) !important;
    border-radius: 10px !important;
    box-shadow: inset 0 0 10px rgba(207, 250, 254, 0.3), 0 0 10px rgba(6, 182, 212, 0.5) !important;
}

body.ui-skin-persona3 ::-webkit-scrollbar-track {
    background: linear-gradient(180deg, #000a0f, #001420, #000a0f) !important;
}

/* Panels with underwater glow */
body.ui-skin-persona3 .bg-blue-900\/30 {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.12) 0%, rgba(34, 211, 238, 0.18) 100%) !important;
    border-left: 3px solid #06b6d4 !important;
    border-radius: 12px !important;
    box-shadow: inset 0 0 30px rgba(6, 182, 212, 0.1) !important;
    backdrop-filter: blur(5px);
}

/* Smooth borders with gradient */
body.ui-skin-persona3 .border-2 {
    border-image: linear-gradient(135deg, #06b6d4, #22d3ee, #67e8f9, #22d3ee, #06b6d4) 1 !important;
    border-style: solid !important;
}


/* Additional P3 overrides for indigo/purple elements */
body.ui-skin-persona3 .bg-indigo-600,
body.ui-skin-persona3 .bg-indigo-500 {
    background-color: #06b6d4 !important;
}

body.ui-skin-persona3 .border-indigo-400 {
    border-color: #06b6d4 !important;
}

body.ui-skin-persona3 .text-indigo-600 {
    color: #06b6d4 !important;
}

/* P3 Panel headers with cyan accents */
body.ui-skin-persona3 .border-blue-700 {
    border-color: rgba(6, 182, 212, 0.6) !important;
}

/* Additional enhancements for all Persona themes - hover states */
body.ui-skin-persona5 .hover\:bg-gray-700:hover,
body.ui-skin-persona5 .hover\:bg-gray-600:hover {
    background-color: #1a1a1a !important;
    box-shadow: 0 0 10px rgba(225, 29, 72, 0.3) !important;
}

body.ui-skin-persona4 .hover\:bg-gray-700:hover,
body.ui-skin-persona4 .hover\:bg-gray-600:hover {
    background-color: #3d2f00 !important;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.3) !important;
}

body.ui-skin-persona3 .hover\:bg-gray-700:hover,
body.ui-skin-persona3 .hover\:bg-gray-600:hover {
    background-color: #001e30 !important;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.3) !important;
}

/* Ensure UI Skin Selector button is always visible */
body.ui-skin-persona5 .ui-skin-button {
    background-color: #e11d48 !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 20px rgba(225, 29, 72, 0.6), 0 0 30px rgba(225, 29, 72, 0.4) !important;
}

body.ui-skin-persona5 .ui-skin-button:hover {
    background-color: #be1e3d !important;
    box-shadow: 0 6px 25px rgba(225, 29, 72, 0.8), 0 0 40px rgba(225, 29, 72, 0.6) !important;
}

body.ui-skin-persona4 .ui-skin-button {
    background-color: #fbbf24 !important;
    border: 2px solid rgba(0, 0, 0, 0.3) !important;
    box-shadow: 0 4px 20px rgba(251, 191, 36, 0.6), 0 0 30px rgba(251, 191, 36, 0.4) !important;
    color: #1a1400 !important;
    border-radius: 50% !important; /* Keep it circular */
}

body.ui-skin-persona4 .ui-skin-button:hover {
    background-color: #f59e0b !important;
    box-shadow: 0 6px 25px rgba(251, 191, 36, 0.8), 0 0 40px rgba(251, 191, 36, 0.6) !important;
}

body.ui-skin-persona4 .ui-skin-button span {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

body.ui-skin-persona3 .ui-skin-button {
    background-color: #06b6d4 !important;
    border: 2px solid rgba(207, 250, 254, 0.3) !important;
    box-shadow: 0 4px 20px rgba(6, 182, 212, 0.6), 0 0 30px rgba(6, 182, 212, 0.4) !important;
    border-radius: 50% !important; /* Keep it circular */
}

body.ui-skin-persona3 .ui-skin-button::before {
    display: none !important; /* Remove pulsating effect */
}

body.ui-skin-persona3 .ui-skin-button:hover {
    background-color: #0891b2 !important;
    box-shadow: 0 6px 25px rgba(6, 182, 212, 0.8), 0 0 40px rgba(6, 182, 212, 0.6) !important;
}

/* Ensure button is always on top and visible */
.ui-skin-button {
    z-index: 150 !important;
    position: fixed !important;
}

/* ============================================
   TOOL DROPDOWN HIERARCHY STYLES
   ============================================ */

/* Tool Dropdown Headers - More prominent */
.tool-dropdown-header {
    position: relative;
    font-weight: 700 !important;
    border-left-width: 4px !important;
    border-left-style: solid !important;
    border-left-color: var(--ui-accent-primary, #3b82f6) !important;
    background-color: var(--ui-bg-elevated, #374151) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

/* Tool Dropdown Items - Clearly nested */
.tool-dropdown-item {
    position: relative;
    border-left-width: 2px !important;
    border-left-style: solid !important;
    border-left-color: rgba(255, 255, 255, 0.1) !important;
}

/* Persona 3 Theme - Tool Dropdown Styles */
body.ui-skin-persona3 .tool-dropdown-header {
    border-left-color: var(--ui-accent-primary) !important;
    background-color: rgba(0, 40, 64, 0.8) !important;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.3) !important;
}

body.ui-skin-persona3 .tool-dropdown-item {
    border-left-color: rgba(6, 182, 212, 0.3) !important;
}

body.ui-skin-persona3 .tool-dropdown-item:hover {
    border-left-color: var(--ui-accent-primary) !important;
    background-color: rgba(0, 40, 64, 0.6) !important;
}

/* Persona 4 Theme - Tool Dropdown Styles */
body.ui-skin-persona4 .tool-dropdown-header {
    border-left-color: var(--ui-accent-primary) !important;
    background-color: rgba(77, 63, 0, 0.8) !important;
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.4) !important;
}

body.ui-skin-persona4 .tool-dropdown-item {
    border-left-color: rgba(251, 191, 36, 0.3) !important;
}

body.ui-skin-persona4 .tool-dropdown-item:hover {
    border-left-color: var(--ui-accent-primary) !important;
    background-color: rgba(77, 63, 0, 0.6) !important;
}

/* Persona 5 Theme - Tool Dropdown Styles */
body.ui-skin-persona5 .tool-dropdown-header {
    border-left-color: var(--ui-accent-primary) !important;
    background-color: rgba(42, 42, 42, 0.9) !important;
    box-shadow: 0 2px 8px rgba(225, 29, 72, 0.4) !important;
}

body.ui-skin-persona5 .tool-dropdown-item {
    border-left-color: rgba(225, 29, 72, 0.3) !important;
}

body.ui-skin-persona5 .tool-dropdown-item:hover {
    border-left-color: var(--ui-accent-primary) !important;
    background-color: rgba(42, 42, 42, 0.7) !important;
}