* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        body {
            font-family: 'Impact', Arial Black, sans-serif;
            /* Solid base so checker shows even if gradient overlay fails */
            background: #0a0000;
            color: #ffffff;
            min-height: calc(var(--vh, 1vh) * 100);
            overflow-x: hidden;
            position: relative; /* create stacking context for ::before overlay */
        }

        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
        }

        .container {
            max-width: 100%;
            margin: 0 auto;
            padding: 10px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .header {
            text-align: center;
            margin-bottom: 20px;
            position: relative;
        }

        .title {
            font-size: clamp(1.8rem, 8vw, 2.5rem);
            color: #ff1a1a;
            text-shadow: 3px 3px 0px #330000, -1px -1px 0px #660000;
            margin-bottom: 10px;
            animation: flicker 3s infinite alternate;
        }

        @keyframes flicker {
            0%, 100% { text-shadow: 3px 3px 0px #330000, -1px -1px 0px #660000, 0 0 20px #ff1a1a; }
            50% { text-shadow: 3px 3px 0px #330000, -1px -1px 0px #660000, 0 0 30px #ff6666; }
        }

        .subtitle {
            font-size: clamp(0.9rem, 4vw, 1.1rem);
            color: #ffaa00;
            font-style: italic;
        }

        .game-section {
            background: rgba(51, 0, 0, 0.8);
            border: 3px solid #cc0000;
            border-radius: 15px;
            padding: 15px;
            margin-bottom: 15px;
            backdrop-filter: blur(5px);
        }

        .section-title {
            font-size: clamp(1rem, 5vw, 1.3rem);
            color: #ff1a1a;
            text-align: center;
            margin-bottom: 15px;
            text-shadow: 2px 2px 0px #000000;
        }

        .player-input {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .input-group {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .input-label {
            font-size: clamp(0.9rem, 4vw, 1rem);
            color: #ffeeee;
            min-width: 80px;
            flex-shrink: 0;
        }

        .devil-input {
            flex: 1;
            min-width: 120px;
            padding: 10px;
            font-size: 16px; /* Prevents zoom on iOS */
            background: #330000;
            border: 2px solid #cc0000;
            border-radius: 8px;
            color: #ffaa00;
            text-align: center;
            font-family: 'Courier New', monospace;
            font-weight: bold;
        }

        .devil-input:focus {
            outline: none;
            border-color: #ff1a1a;
            box-shadow: 0 0 10px rgba(255, 26, 26, 0.5);
        }

        .checkbox-group {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 8px 0;
            flex-wrap: wrap;
        }

        .devil-checkbox {
            width: 20px;
            height: 20px;
            accent-color: #cc0000;
        }

        .checkbox-label {
            font-size: clamp(0.8rem, 3.5vw, 1rem);
            color: #ffeeee;
            cursor: pointer;
            user-select: none;
        }

        .slider-group {
            margin: 15px 0;
            padding: 10px;
            background: rgba(10, 0, 0, 0.5);
            border-radius: 8px;
        }

        .slider-label {
            font-size: clamp(0.8rem, 3.5vw, 1rem);
            color: #ff1a1a;
            display: block;
            margin-bottom: 8px;
        }

        .devil-slider {
            width: 100%;
            height: 6px;
            background: #330000;
            border-radius: 3px;
            outline: none;
            -webkit-appearance: none;
        }

        .devil-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            background: #cc0000;
            border-radius: 50%;
            cursor: pointer;
        }

        .devil-slider::-moz-range-thumb {
            width: 20px;
            height: 20px;
            background: #cc0000;
            border-radius: 50%;
            cursor: pointer;
            border: none;
        }

        .slider-value {
            color: #ffaa00;
            font-weight: bold;
            margin-left: 10px;
        }

        .devil-button {
            background: linear-gradient(145deg, #990000, #660000);
            border: 3px solid #cc0000;
            border-radius: 12px;
            color: #ffffff;
            font-family: 'Impact', Arial Black, sans-serif;
            font-size: clamp(1rem, 4vw, 1.2rem);
            font-weight: bold;
            padding: 15px 20px;
            margin: 8px;
            cursor: pointer;
            transition: all 0.2s;
            text-transform: uppercase;
            letter-spacing: 1px;
            position: relative;
            overflow: hidden;
            min-height: 50px;
            touch-action: manipulation;
        }

        .devil-button:hover, .devil-button:active {
            background: linear-gradient(145deg, #cc0000, #990000);
            box-shadow: 0 0 20px rgba(204, 0, 0, 0.8);
            transform: translateY(-2px);
        }

        .devil-button:disabled {
            background: #333333;
            border-color: #666666;
            color: #999999;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .button-primary {
            background: linear-gradient(145deg, #cc3300, #990000);
        }

        .button-secondary {
            background: linear-gradient(145deg, #666666, #333333);
            border-color: #999999;
        }

        .game-canvas {
            background: #0a0000;
            border: 3px solid #cc0000;
            border-radius: 12px;
            min-height: 200px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 15px 0;
            position: relative;
            overflow: hidden;
        }

        .roll-display {
            font-size: clamp(2rem, 10vw, 4rem);
            font-weight: bold;
            text-align: center;
            margin: 20px 0;
            text-shadow: 3px 3px 0px #000000;
        }

        .status-display {
            background: rgba(10, 0, 0, 0.8);
            border: 2px solid #cc0000;
            border-radius: 10px;
            padding: 15px;
            margin: 15px 0;
            font-family: 'Courier New', monospace;
            font-size: clamp(0.8rem, 3.5vw, 1rem);
            line-height: 1.4;
            color: #ffaa00;
            /* Preserve newlines in the status text so each piece of information appears on its own line. */
            white-space: pre-line;
        }

        .floating-text {
            position: absolute;
            font-weight: bold;
            pointer-events: none;
            z-index: 10;
            animation: floatUp 2s ease-out forwards;
        }

        @keyframes floatUp {
            0% { opacity: 1; transform: translateY(0); }
            100% { opacity: 0; transform: translateY(-50px); }
        }

        .victory-animation {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: clamp(1.5rem, 8vw, 3rem);
            font-weight: bold;
            text-align: center;
            animation: victoryPulse 0.5s ease-in-out infinite alternate;
        }

        @keyframes victoryPulse {
            0% { transform: translate(-50%, -50%) scale(1); }
            100% { transform: translate(-50%, -50%) scale(1.1); }
        }

        .leaderboard {
            max-height: 60vh;
            overflow-y: auto;
            padding: 15px;
            background: rgba(10, 0, 0, 0.9);
            border-radius: 10px;
            font-family: 'Courier New', monospace;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: calc(var(--vh, 1vh) * 100);
  padding-top: var(--modal-top-gap);
            background-color: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(5px);
        
  /* Center via flexbox when shown (JS sets display:flex) */
  align-items: flex-start;
  justify-content: center;
  inset: 0;
  height: calc(var(--vh, 1vh) * 100);
  z-index: 2140;
padding: max(env(safe-area-inset-top), 16px) max(env(safe-area-inset-right), 16px) max(env(safe-area-inset-bottom), 16px) max(env(safe-area-inset-left), 16px);

}

        .modal-content {
            position: relative;
            background: linear-gradient(145deg, #1a0000, #330000);
            margin: 0 auto;
            padding: 20px;
            border: 3px solid #cc0000;
            border-radius: 15px;
            width: 90%;
            max-width: 500px;
            max-height: calc(var(--vh, 1vh) * 100 - (var(--modal-top-gap, 10vh) + 64px));
            overflow-y: auto;
        }

        .close-button {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            line-height: 1;
        }

        .close-button:hover {
            color: #ff1a1a;
        }

        .game-controls {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .control-row {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .control-row .devil-button {
            flex: 1;
            min-width: 140px;
        }

        .custom-roll-section {
            background: rgba(26, 0, 0, 0.8);
            border: 2px solid #990000;
            border-radius: 8px;
            padding: 10px;
            margin: 10px 0;
        }

        .particles {
            position: absolute;
            pointer-events: none;
            font-size: 1.5rem;
            animation: particleFloat 3s ease-out forwards;
        }

        @keyframes particleFloat {
            0% { opacity: 1; transform: translateY(0) rotate(0deg); }
            100% { opacity: 0; transform: translateY(-100px) rotate(360deg); }
        }

        /* Mobile-specific adjustments */
        @media (max-width: 480px) {
            .container {
                padding: 5px;
            }
            
            .game-section {
                padding: 10px;
                margin-bottom: 10px;
            }
            
            .input-group {
                flex-direction: column;
                align-items: stretch;
            }
            
            .input-label {
                min-width: auto;
                margin-bottom: 5px;
            }
            
            .control-row {
                flex-direction: column;
            }
            
            .control-row .devil-button {
                min-width: auto;
            }
        }

        /* Prevent zoom on iOS */
        @media screen and (max-width: 767px) {
            select, textarea, input[type="text"], input[type="password"], 
            input[type="datetime"], input[type="datetime-local"], 
            input[type="date"], input[type="month"], input[type="time"], 
            input[type="week"], input[type="number"], input[type="email"], 
            input[type="url"] {
                font-size: 16px;
            }
        }

        /*
         * Rules page styling
         *
         * To present the game rules in a way that blends seamlessly with the
         * existing infernal theme, we introduce a dedicated set of styles for
         * the rules page. Headings glow ominously in red, body text uses the
         * monospace font already employed throughout the game for consistency,
         * and list bullets are customised to fit the dark aesthetic. The
         * container itself remains hidden by default and is revealed via
         * JavaScript when the player clicks the "Rules" button on the start
         * screen.
         */
        #rulesPage {
            display: none;
            margin-top: 10px;
        }
        .rules-content h2 {
            color: #ff1a1a;
            font-size: clamp(1.2rem, 5vw, 1.7rem);
            text-align: center;
            margin-bottom: 10px;
            text-shadow: 2px 2px 0 #000000;
        }
        .rules-content h3 {
            color: #ff1a1a;
            font-size: clamp(1rem, 4vw, 1.4rem);
            margin-top: 20px;
            margin-bottom: 8px;
            text-shadow: 1px 1px 0 #000000;
        }
        .rules-content p {
            color: #ffeeee;
            line-height: 1.5;
            margin-bottom: 12px;
            font-family: 'Courier New', monospace;
            font-size: clamp(0.8rem, 3.5vw, 1rem);
        }
        .rules-content ul {
            margin-left: 20px;
            margin-bottom: 15px;
        }
        .rules-content li {
            color: #ffaa00;
            margin-bottom: 8px;
            list-style-type: none;
            position: relative;
            padding-left: 1em;
            font-family: 'Courier New', monospace;
            font-size: clamp(0.8rem, 3.5vw, 1rem);
        }
        .rules-content li::before {
            /*
             * Override default bullet for the rules lists. We intentionally
             * remove the bullet here because many list items already include
             * their own emoji or icon (🍀, 🛡️, etc.). Leaving the bullet
             * empty ensures the line starts flush with the icon or text.
             */
            content: '';
            position: absolute;
            left: 0;
        }
    
        /* Lock background scroll when modal is open */
        body.modal-open { overflow: hidden; }

        /* Respect real hover devices only */
        @media (hover: hover) and (pointer: fine) {
            .devil-button:hover, .devil-button:active {
                background: linear-gradient(145deg, #cc0000, #990000);
                box-shadow: 0 0 20px rgba(204, 0, 0, 0.8);
                transform: translateY(-2px);
            }
        }

        /* Improved visible focus for keyboard users */
        .devil-button:focus-visible, .devil-input:focus-visible, .devil-checkbox:focus-visible {
            outline: 3px solid #ffaa00;
            outline-offset: 2px;
        }

        /* Disable pointer events on disabled buttons for consistency */
        .devil-button:disabled { pointer-events: none; }

        /* Better mobile 100vh behavior using a CSS var we set from JS */
        :root { --vh: 1vh; --overlay-alpha: 0.46; --checker-alpha: 0.56;  --checker-size: 32px; --checker-color-r: 120; --checker-color-g: 0; --checker-color-b: 0; --checker2-color-r: 255; --checker2-color-g: 90; --checker2-color-b: 0; --glow-alpha: 0.12;}
        .container { min-height: calc(var(--vh, 1vh) * 100); }

        /* ===== UI POLISH PACK ===== */

        /* Reduced motion support */
        @media (prefers-reduced-motion: reduce) {
            * {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }

        /* Auto-scale at very small widths */
        @media (max-width: 400px) {
            html { font-size: 15px; }
            .devil-button { padding: 0.6rem 0.9rem; font-size: 0.95rem; }
            .devil-input { font-size: 0.95rem; }
        }

        /* Sticky status bar */
        .status-display {
            position: sticky;
            top: 0;
            z-index: 50;
            backdrop-filter: blur(6px);
            background: rgba(18, 0, 0, 0.6);
            border-bottom: 1px solid rgba(255, 0, 0, 0.25);
        }

        /* Wider desktop layout */
        .container, .game-container, .main-container {
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
        }

        /* Disabled styles unified */
        .devil-button:disabled,
        button:disabled,
        .devil-input:disabled,
        input:disabled,
        select:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            filter: grayscale(30%);
        }

        /* Loading pulse for long actions */
        .is-loading {
            position: relative;
        }
        .is-loading::after {
            content: '';
            position: absolute;
            inset: 0;
            opacity: 0.6;
            animation: pulseGlow 1.2s ease-in-out infinite;
            border-radius: inherit;
            box-shadow: 0 0 0 0 rgba(255, 26, 26, 0.8);
        }
        @keyframes pulseGlow {
            0%   { box-shadow: 0 0 0 0 rgba(255, 26, 26, 0.8); }
            70%  { box-shadow: 0 0 0 16px rgba(255, 26, 26, 0); }
            100% { box-shadow: 0 0 0 0 rgba(255, 26, 26, 0); }
        }

        /* Optional checkered background */
        body.bg-checker {
    background-image:
        /* dark red squares */
        linear-gradient(45deg, rgba(var(--checker-color-r), var(--checker-color-g), var(--checker-color-b), var(--checker-alpha)) 25%, rgba(var(--checker-color-r), var(--checker-color-g), var(--checker-color-b), 0) 25%),
        linear-gradient(-45deg, rgba(var(--checker-color-r), var(--checker-color-g), var(--checker-color-b), var(--checker-alpha)) 25%, rgba(var(--checker-color-r), var(--checker-color-g), var(--checker-color-b), 0) 25%),
        /* ember squares */
        linear-gradient(45deg, rgba(var(--checker2-color-r), var(--checker2-color-g), var(--checker2-color-b), var(--checker-alpha)) 25%, rgba(var(--checker2-color-r), var(--checker2-color-g), var(--checker2-color-b), 0) 25%),
        linear-gradient(-45deg, rgba(var(--checker2-color-r), var(--checker2-color-g), var(--checker2-color-b), var(--checker-alpha)) 25%, rgba(var(--checker2-color-r), var(--checker2-color-g), var(--checker2-color-b), 0) 25%),
        /* subtle glow underlay */
        radial-gradient(circle at center, rgba(var(--checker2-color-r), var(--checker2-color-g), var(--checker2-color-b), var(--glow-alpha)), rgba(var(--checker2-color-r), var(--checker2-color-g), var(--checker2-color-b), 0) 60%);
    background-size: var(--checker-size) var(--checker-size);
    background-position:
        0 0,
        0 calc(var(--checker-size) / 2),
        calc(var(--checker-size) / 2) calc(-1 * var(--checker-size) / 2),
        calc(-1 * var(--checker-size) / 2) 0,
        center;
}

        /* Animated gradient overlay lives on a pseudo-element so it can sit above
           the checker background without hiding it completely. */
        body::before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            /* Slight transparency so the checker can peek through */
            background: linear-gradient(135deg, rgba(10,0,0,var(--overlay-alpha)), rgba(26,0,0,var(--overlay-alpha)), rgba(51,0,0,var(--overlay-alpha)));
            background-size: 400% 400%;
            animation: gradientShift 8s ease infinite;
            z-index: 1; /* above body's background, below content */
        }

/* === Mobile-safe checkerboard: draw on ::after to avoid iOS body background quirks === */
body::after {
  animation-play-state: running;

    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        /* dark red squares */
        linear-gradient(45deg, rgba(var(--checker-color-r), var(--checker-color-g), var(--checker-color-b), var(--checker-alpha)) 25%, rgba(var(--checker-color-r), var(--checker-color-g), var(--checker-color-b), 0) 25%),
        linear-gradient(-45deg, rgba(var(--checker-color-r), var(--checker-color-g), var(--checker-color-b), var(--checker-alpha)) 25%, rgba(var(--checker-color-r), var(--checker-color-g), var(--checker-color-b), 0) 25%),
        /* ember squares */
        linear-gradient(45deg, rgba(var(--checker2-color-r), var(--checker2-color-g), var(--checker2-color-b), var(--checker-alpha)) 25%, rgba(var(--checker2-color-r), var(--checker2-color-g), var(--checker2-color-b), 0) 25%),
        linear-gradient(-45deg, rgba(var(--checker2-color-r), var(--checker2-color-g), var(--checker2-color-b), var(--checker-alpha)) 25%, rgba(var(--checker2-color-r), var(--checker2-color-g), var(--checker2-color-b), 0) 25%),
        /* subtle glow underlay */
        radial-gradient(circle at center, rgba(var(--checker2-color-r), var(--checker2-color-g), var(--checker2-color-b), var(--glow-alpha)), rgba(var(--checker2-color-r), var(--checker2-color-g), var(--checker2-color-b), 0) 60%);
    background-size: var(--checker-size) var(--checker-size);
    background-position:
        0 0,
        0 calc(var(--checker-size) / 2),
        calc(var(--checker-size) / 2) calc(-1 * var(--checker-size) / 2),
        calc(-1 * var(--checker-size) / 2) 0,
        center;
    opacity: 1;
    z-index: 0;
    display: none; /* shown only when .bg-checker is active */
}

body.bg-checker::after { display: block; animation-play-state: running; }

/* Ensure main content sits above the fixed layers */
.container { position: relative; z-index: 2; }

/* Disable legacy background-image on the body when checker is active
   (we now draw it on ::after for better mobile reliability) */
body.bg-checker { background-image: none !important; }

/* --- Compact floating controls (Mute/Volume widget) --- */
#uiPolishControls .devil-button {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 0.9rem;
  border-width: 2px;
}
#uiPolishControls input[type="range"] {
  width: 120px !important;
}
@media (max-width: 480px) {
  #uiPolishControls .devil-button {
    min-height: 28px;
    padding: 4px 8px;
    font-size: 0.85rem;
    border-width: 2px;
  }
  #uiPolishControls input[type="range"] {
    width: 90px !important;
  }
}

/* --- COMPACT CONTROLS OVERRIDE (mobile fix for mute button size) --- */
#uiPolishControls .devil-button{
  margin: 0;
  min-height: 28px;
  height: 28px;
  padding: 4px 8px;
  font-size: 0.85rem;
  line-height: 1;
  border-width: 2px;
  letter-spacing: 0;
  text-transform: none;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 480px){
  #uiPolishControls .devil-button{
    min-height: 26px;
    height: 26px;
    padding: 2px 6px;
    font-size: 0.8rem;
  }
  #uiPolishControls input[type="range"]{
    width: 90px !important;
  }
}

/* --- COMPACT CONTROLS OVERRIDE v2 (even tighter on mobile) --- */
#uiPolishControls .devil-button{
  margin: 0;
  min-height: 28px;
  height: 28px;
  padding: 4px 8px;
  font-size: 0.85rem;
  line-height: 1;
  border-width: 2px;
  letter-spacing: 0;
  text-transform: none;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 480px){
  #uiPolishControls .devil-button{
    min-height: 24px;
    height: 24px;
    padding: 1px 6px;
    font-size: 0.78rem;
    border-width: 1.5px;
  }
  #uiPolishControls input[type="range"]{
    width: 80px !important;
  }
}

/* === Fluid checker flow enhancements === */
@keyframes checkerFlowA {
  0% {
    background-position:
      0 0,
      0 calc(var(--checker-size) / 2),
      calc(var(--checker-size) / 2) calc(-1 * var(--checker-size) / 2),
      calc(-1 * var(--checker-size) / 2) 0,
      center;
  }
}

@keyframes checkerFlowB {
  0% {
    background-position:
      0 0,
      0 calc(var(--checker-size) / 2),
      calc(var(--checker-size) / 2) calc(-1 * var(--checker-size) / 2),
      calc(-1 * var(--checker-size) / 2) 0,
      center;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
}

#checkerWarp {
  animation-play-state: running;
  position: fixed !important;
  inset: 0;
  pointer-events: none;
  z-index: 0 !important; /* sits above body background, below overlay (::before) and content */
  display: none; /* only shown when .bg-checker is active */
  will-change: transform, background-position;
  /* Slightly larger pattern for parallax feel */
  --warp-size: calc(var(--checker-size) * 1.25);
  background-image:
      /* dark red squares */
      linear-gradient(45deg, rgba(var(--checker-color-r), var(--checker-color-g), var(--checker-color-b), var(--checker-alpha)) 25%, rgba(var(--checker-color-r), var(--checker-color-g), var(--checker-color-b), 0) 25%),
      linear-gradient(-45deg, rgba(var(--checker-color-r), var(--checker-color-g), var(--checker-color-b), var(--checker-alpha)) 25%, rgba(var(--checker-color-r), var(--checker-color-g), var(--checker-color-b), 0) 25%),
      /* ember squares */
      linear-gradient(45deg, rgba(var(--checker2-color-r), var(--checker2-color-g), var(--checker2-color-b), var(--checker-alpha)) 25%, rgba(var(--checker2-color-r), var(--checker2-color-g), var(--checker2-color-b), 0) 25%),
      linear-gradient(-45deg, rgba(var(--checker2-color-r), var(--checker2-color-g), var(--checker2-color-b), var(--checker-alpha)) 25%, rgba(var(--checker2-color-r), var(--checker2-color-g), var(--checker2-color-b), 0) 25%),
      /* subtle glow underlay */
      radial-gradient(circle at center, rgba(var(--checker2-color-r), var(--checker2-color-g), var(--checker2-color-b), var(--glow-alpha)), rgba(var(--checker2-color-r), var(--checker2-color-g), var(--checker2-color-b), 0) 60%);
  background-size: var(--warp-size) var(--warp-size);
  opacity: var(--warp-opacity, 0.55); /* slightly softer than base ::after layer */
  animation: checkerFlowB 42s ease-in-out infinite alternate;
}

body.bg-checker #checkerWarp {
  animation-play-state: running; display: block; }

/* Give the base ::after checker a slow drift too */
body::after { pointer-events: none; 
  animation-play-state: running;

  animation: checkerFlowA 28s linear infinite;
  will-change: background-position;
}

/* Reduce motion: stop animated drift while keeping static checker visible */
@media (prefers-reduced-motion: reduce) {
  #checkerWarp,
  body::after { pointer-events: none; 
  animation-play-state: paused;

    animation: none !important;
    transform: none !important;
  }
}

/* === Wavey, faster checker overrides === */

/* Faster durations + apply wave filter to the parallax layer */
body::after { pointer-events: none; 
  animation-play-state: running;

  animation: checkerFlowA 20s ease-in-out infinite !important;
}
#checkerWarp {
  animation-play-state: running;
  animation: checkerFlowB 28s ease-in-out infinite alternate !important;
  filter: url(#checkerWaves);
  will-change: transform, background-position, filter;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #checkerWarp {
  animation-play-state: paused; filter: none !important; }
  body::after, #checkerWarp {
  animation-play-state: paused; animation: none !important; transform: none !important; }
}

/* --- Mobile animation fixes (performance + stability) --- */
@media (max-width: 480px), (pointer: coarse) {
  /* Soften and stabilize background animations on mobile */
  body::before { pointer-events: none; 
    animation-duration: 20s !important;
  }
  body::after { pointer-events: none; 
  animation-play-state: running;

    animation-duration: 18s !important;
    will-change: transform, background-position !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
  }
  #checkerWarp {
  animation-play-state: running;
    animation-duration: 24s !important;
    filter: none !important; /* SVG filter is heavy on mobile Safari */
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
  }
}

/* Allow JS to temporarily pause/restart animations to avoid iOS stuck layers */
body.force-repaint::after,
body.force-repaint::before {
  animation: none !important;
}

/* Better mobile title fit */
@media (max-width: 480px) {
    .title {
        font-size: clamp(1.4rem, 6vw, 2rem);
        line-height: 1.1;
        padding-top: env(safe-area-inset-top, 8px); /* accounts for notches */
        word-break: break-word;
    }
}


/* --- Mobile checkerboard stability fix --- */
@media (max-width: 640px), (pointer: coarse) {

  /* Make mute button overlay smaller on mobile */
  #muteButton {
    transform: scale(0.8);
    transform-origin: top right;
  }

  body.bg-checker::after {
    display: block !important;           /* keep checker visible */
    opacity: 1 !important;               /* full opacity */
    transform: translateZ(0);            /* prevent subpixel drift */
    backface-visibility: hidden;
  }
  body.bg-checker #checkerWarp {
    display: block !important;           /* keep warp layer */
    opacity: 1 !important;
    transform: translateZ(0);
    backface-visibility: hidden;
  }
}


/* --- Mobile roll screen scaling fix --- */
@media (max-width: 640px), (pointer: coarse) {

  /* Make mute button overlay smaller on mobile */
  #muteButton {
    transform: scale(0.8);
    transform-origin: top right;
  }

  .roll-display {
    font-size: clamp(1.6rem, 8vw, 2.4rem) !important;
  }
  .game-canvas {
    min-height: 150px !important;
    max-height: 45vh !important;
  }
  #rollButton {
    font-size: clamp(16px, 5vw, 20px) !important;
    padding: clamp(10px, 2.5vw, 14px) clamp(14px, 4vw, 20px) !important;

  }
}


/* === Volume slider visual fill fix (Chrome/Edge) === */
#uiPolishControls input[type="range"]{
  --p: 0;
  --track-h: 6px;
  --thumb: 16px;
  --track-bg: #330000;
  --fill-bg: #ff1a1a;
  appearance: none;
  -webkit-appearance: none;
  width: 100px;
  height: var(--thumb);
  padding: 0;
  margin: 0;
  background:
    linear-gradient(var(--fill-bg), var(--fill-bg)) no-repeat,
    linear-gradient(var(--track-bg), var(--track-bg)) no-repeat;
  background-size: calc(var(--p) * 1%) var(--track-h), 100% var(--track-h);
  background-position: left center, left center;
  background-origin: content-box;
  border-radius: 999px;
  box-sizing: border-box;
}
#uiPolishControls input[type="range"]::-webkit-slider-runnable-track{
  height: var(--track-h);
  background: transparent;
  border-radius: 999px;
}
#uiPolishControls input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: var(--thumb);
  height: var(--thumb);
  border-radius: 50%;
  background: #fff;
  border: 2px solid #00000022;
  margin-top: calc((var(--track-h) - var(--thumb)) / 2);
  cursor: pointer;
}
#uiPolishControls input[type="range"]::-moz-range-track{
  height: var(--track-h);
  background: transparent;
  border: 0;
}
#uiPolishControls input[type="range"]::-moz-range-progress{
  background: var(--fill-bg);
  height: var(--track-h);
}
#uiPolishControls input[type="range"]::-moz-range-thumb{
  width: var(--thumb);
  height: var(--thumb);
  border-radius: 50%;
  background: #fff;
  border: 2px solid #00000022;
  cursor: pointer;
}



/* === Global range visual fill fix for .devil-slider === */
.devil-slider{
  --p: 0;
  --track-h: 8px;
  --thumb: 18px;
  --track-bg: #330000;
  --fill-bg: #ff1a1a;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: var(--thumb);
  padding: 0;
  margin: 0;
  background:
    linear-gradient(var(--fill-bg), var(--fill-bg)) no-repeat,
    linear-gradient(var(--track-bg), var(--track-bg)) no-repeat;
  background-size: calc(var(--p) * 1%) var(--track-h), 100% var(--track-h);
  background-position: left center, left center;
  background-origin: content-box;
  border-radius: 999px;
  box-sizing: border-box;
}
.devil-slider::-webkit-slider-runnable-track{
  height: var(--track-h);
  background: transparent;
  border-radius: 999px;
}
.devil-slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: var(--thumb);
  height: var(--thumb);
  border-radius: 50%;
  background: #fff;
  border: 2px solid #00000022;
  margin-top: calc((var(--track-h) - var(--thumb)) / 2);
  cursor: pointer;
}
.devil-slider::-moz-range-track{
  height: var(--track-h);
  background: transparent;
  border: 0;
}
.devil-slider::-moz-range-progress{
  background: var(--fill-bg);
  height: var(--track-h);
}
.devil-slider::-moz-range-thumb{
  width: var(--thumb);
  height: var(--thumb);
  border-radius: 50%;
  background: #fff;
  border: 2px solid #00000022;
  cursor: pointer;
}