* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 -webkit-tap-highlight-color: transparent;
}
body {
 font-family: 'Impact', Arial Black, sans-serif;
 background: #0a0000;
 color: #ffffff;
 min-height: 100vh;
 overflow-x: hidden;
 position: relative; 
}
@keyframes gradientShift {
 0% { background-position: 0% 50%; }
 50% { background-position: 100% 50%; }
 100% { 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; 
 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;
 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: 100%;
 background-color: rgba(0, 0, 0, 0.8);
 backdrop-filter: blur(5px);
}
.modal-content {
 position: relative;
 background: linear-gradient(145deg, #1a0000, #330000);
 margin: 5% auto;
 padding: 20px;
 border: 3px solid #cc0000;
 border-radius: 15px;
 width: 90%;
 max-width: 500px;
 max-height: 80vh;
 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); }
}
@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;
 }
}
@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;
 }
}
#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 {
 content: '';
 position: absolute;
 left: 0;
}
body.modal-open { overflow: hidden; }
@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);
 }
}
.devil-button:focus-visible, .devil-input:focus-visible, .devil-checkbox:focus-visible {
 outline: 3px solid #ffaa00;
 outline-offset: 2px;
}
.devil-button:disabled { pointer-events: none; }
: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); }
@media (prefers-reduced-motion: reduce) {
 * {
 animation-duration: 0.01ms !important;
 animation-iteration-count: 1 !important;
 transition-duration: 0.01ms !important;
 scroll-behavior: auto !important;
 }
}
@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; }
}
.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);
}
.container, .game-container, .main-container {
 max-width: 1200px;
 margin-left: auto;
 margin-right: auto;
}
.devil-button:disabled,
button:disabled,
.devil-input:disabled,
input:disabled,
select:disabled {
 opacity: 0.5;
 cursor: not-allowed;
 filter: grayscale(30%);
}
.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); }
}
body.bg-checker {
background-image:
 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%),
 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%),
 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;
}
body::before {
 content: "";
 position: fixed;
 inset: 0;
 pointer-events: none;
 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; 
}
body::after {
 animation-play-state: running;
 content: "";
 position: fixed;
 inset: 0;
 pointer-events: none;
 background-image:
 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%),
 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%),
 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; 
}
body.bg-checker::after { display: block; animation-play-state: running; }
.container { position: relative; z-index: 2; }
body.bg-checker { background-image: none !important; }
#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;
 }
}
#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;
 }
}
#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;
 }
}
@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;
 }
 50% {
 background-position:
 calc(var(--checker-size) / 2) calc(var(--checker-size) / 2),
 calc(var(--checker-size) / -4) calc(var(--checker-size) / 4),
 calc(var(--checker-size)) calc(0px),
 calc(var(--checker-size) / -2) calc(var(--checker-size) / -2),
 center;
 }
 100% {
 background-position:
 calc(var(--checker-size)) calc(var(--checker-size)),
 calc(var(--checker-size) / -2) calc(var(--checker-size) / 1),
 calc(var(--checker-size) * 1.5) calc(var(--checker-size) / 2),
 calc(var(--checker-size) / -1.5) calc(var(--checker-size) / -1),
 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);
 }
 50% {
 background-position:
 calc(var(--checker-size) / -3) calc(var(--checker-size) / 3),
 calc(var(--checker-size) / 3) calc(var(--checker-size) / -6),
 calc(var(--checker-size) / 1.2) calc(var(--checker-size) / 2),
 calc(var(--checker-size) / -2) calc(var(--checker-size) / -2),
 center;
 transform: translate3d(2%, -1%, 0) scale(1.03) rotate(0.35deg);
 }
 100% {
 background-position:
 calc(var(--checker-size) / -1.1) calc(var(--checker-size) / 1.1),
 calc(var(--checker-size) / 1.5) calc(var(--checker-size) / -1.5),
 calc(var(--checker-size) * 1.1) calc(var(--checker-size) / 1.1),
 calc(var(--checker-size) / -1.1) calc(var(--checker-size) / -1.1),
 center;
 transform: translate3d(0,0,0) scale(1) rotate(0deg);
 }
}
#checkerWarp {
 animation-play-state: running;
 position: fixed;
 inset: 0;
 pointer-events: none;
 z-index: 0; 
 display: none; 
 will-change: transform, background-position;
 --warp-size: calc(var(--checker-size) * 1.25);
 background-image:
 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%),
 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%),
 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); 
 animation: checkerFlowB 42s ease-in-out infinite alternate;
}
body.bg-checker #checkerWarp {
 animation-play-state: running; display: block; }
body::after {
 animation-play-state: running;
 animation: checkerFlowA 28s linear infinite;
 will-change: background-position;
}
@media (prefers-reduced-motion: reduce) {
 #checkerWarp,
 body::after {
 animation-play-state: paused;
 animation: none !important;
 transform: none !important;
 }
}
@keyframes checkerFlowA {
 50% {
 background-position:
 calc(var(--checker-size) * 0.9) calc(var(--checker-size) * 0.9),
 calc(var(--checker-size) * -0.5) calc(var(--checker-size) * 0.5),
 calc(var(--checker-size) * 1.8) 0px,
 calc(var(--checker-size) * -1.1) calc(var(--checker-size) * -1.1),
 center;
 }
 100% {
 background-position:
 calc(var(--checker-size) * 1.8) calc(var(--checker-size) * 1.8),
 calc(var(--checker-size) * -1.0) calc(var(--checker-size) * 1.2),
 calc(var(--checker-size) * 2.6) calc(var(--checker-size) * 1.3),
 calc(var(--checker-size) * -1.8) calc(var(--checker-size) * -1.4),
 center;
 }
}
@keyframes checkerFlowB {
 50% {
 background-position:
 calc(var(--checker-size) * -0.6) calc(var(--checker-size) * 0.6),
 calc(var(--checker-size) * 0.7) calc(var(--checker-size) * -0.4),
 calc(var(--checker-size) * 1.6) calc(var(--checker-size) * 0.8),
 calc(var(--checker-size) * -1.0) calc(var(--checker-size) * -0.8),
 center;
 transform: translate3d(4%, -2.5%, 0) scale(1.06) rotate(0.8deg);
 }
 100% {
 background-position:
 calc(var(--checker-size) * -1.4) calc(var(--checker-size) * 1.4),
 calc(var(--checker-size) * 1.1) calc(var(--checker-size) * -1.1),
 calc(var(--checker-size) * 2.2) calc(var(--checker-size) * 1.1),
 calc(var(--checker-size) * -1.3) calc(var(--checker-size) * -1.3),
 center;
 transform: translate3d(-2%, 1%, 0) scale(1.02) rotate(-0.6deg);
 }
}
body::after {
 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;
}
@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; }
}
@media (max-width: 480px), (pointer: coarse) {
 body::before {
 animation-duration: 20s !important;
 }
 body::after {
 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; 
 transform: translateZ(0) !important;
 backface-visibility: hidden !important;
 }
}
body.force-repaint::after,
body.force-repaint::before {
 animation: none !important;
}
@media (max-width: 480px) {
 .title {
 font-size: clamp(1.4rem, 6vw, 2rem);
 line-height: 1.1;
 padding-top: env(safe-area-inset-top, 8px); 
 word-break: break-word;
 }
}
@keyframes shake {
 0%, 100% { transform: translate(0,0) rotate(0); }
 10% { transform: translate(-6px,-6px) rotate(-3deg); }
 20% { transform: translate(6px,6px) rotate(3deg); }
 30% { transform: translate(-6px,6px) rotate(-3deg); }
 40% { transform: translate(6px,-6px) rotate(3deg); }
 50% { transform: translate(-4px,-4px) rotate(-2deg); }
 60% { transform: translate(4px,4px) rotate(2deg); }
 70% { transform: translate(-4px,4px) rotate(-2deg); }
 80% { transform: translate(4px,-4px) rotate(2deg); }
 90% { transform: translate(-2px,-2px) rotate(-1deg); }
}
.shake-screen { animation: shake 0.45s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes flashBang {
 0% { background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,0,0,0.6) 60%, transparent 100%); }
 100% { background: transparent; }
}
.flash-overlay {
 position: fixed; inset: 0; pointer-events: none; z-index: 9999;
 animation: flashBang 0.35s ease-out forwards;
}
@keyframes cursePulse {
 0% { opacity: 0.5; box-shadow: inset 0 0 40px rgba(139,0,0,0.8); }
 100% { opacity: 1; box-shadow: inset 0 0 80px rgba(255,0,0,0.9); }
}
.vignette-cursed {
 position: relative;
 border-color: #ff0000 !important;
 animation: cursePulse 1.5s infinite alternate;
}
@keyframes dicePopIn {
 0% { transform: scale(0.1) rotate(-180deg); opacity: 0; filter: blur(10px); }
 60% { transform: scale(1.3) rotate(10deg); opacity: 1; filter: blur(0); }
 100% { transform: scale(1) rotate(0deg); opacity: 1; filter: blur(0); }
}
.dice-pop { animation: dicePopIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
@keyframes glowPulse {
 0% { text-shadow: 0 0 10px #ff1a1a, 0 0 20px #ff1a1a; }
 50% { text-shadow: 0 0 25px #ffaa00, 0 0 40px #ff1a1a; }
 100% { text-shadow: 0 0 10px #ff1a1a, 0 0 20px #ff1a1a; }
}
.glow-text { animation: glowPulse 2s infinite; }
.particles {
 text-shadow: 0 0 6px currentColor, 0 0 12px currentColor;
 filter: drop-shadow(0 0 4px currentColor);
}
:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
button:focus-visible, [role="button"]:focus-visible { outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
 * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}