/* ========================================== THEME VARIABLES Every color in the whole project reads from these variables, so switching [data-theme] on re-skins everything instantly. ========================================== */ :root, body[data-theme="blood"] { --accent: #b00000; --accent-bright: #ff2020; --accent-dim: #700000; --accent-darker: #350000; --accent-darkest: #280000; --glow: rgba(255, 0, 0, .5); --glow-soft: rgba(255, 0, 0, .18); --glow-strong: rgba(255, 0, 0, .8); --bg-1: #250000; --bg-2: #100000; --bg-3: #050505; --bg-4: #010101; --moon-color-1: rgba(180, 0, 0, .55); --moon-color-2: rgba(70, 0, 0, .18); --particle-color: #8b0000; --particle-glow: #ff0000; --rune-color: rgba(150, 0, 0, .12); --square-light-1: #3c3330; --square-light-2: #292422; --square-dark-1: #191414; --square-dark-2: #0b0808; --selected-1: #850000; --selected-2: #330000; --check-1: #ff0000; --check-2: #300000; --piece-white: #eeeeee; --piece-white-glow: rgba(255, 255, 255, .35); --piece-black: #050505; --piece-black-glow: rgba(255, 0, 0, .3); --panel-border: rgba(255, 0, 0, .25); --panel-glow: rgba(150, 0, 0, .2); --text-dim: #777; --text-dimmer: #666; --text-bright: #eee; --text-mid: #ddd; } body[data-theme="void"] { --accent: #6a0dad; --accent-bright: #b060ff; --accent-dim: #3a0a5c; --accent-darker: #1c0530; --accent-darkest: #120321; --glow: rgba(150, 30, 255, .5); --glow-soft: rgba(150, 30, 255, .18); --glow-strong: rgba(160, 40, 255, .8); --bg-1: #10002b; --bg-2: #06001a; --bg-3: #030008; --bg-4: #000000; --moon-color-1: rgba(110, 0, 200, .5); --moon-color-2: rgba(40, 0, 90, .2); --particle-color: #6a0dad; --particle-glow: #b060ff; --rune-color: rgba(140, 40, 220, .14); --square-light-1: #2c2438; --square-light-2: #1c1726; --square-dark-1: #130f1a; --square-dark-2: #08060c; --selected-1: #4b0082; --selected-2: #1a0030; --check-1: #a020f0; --check-2: #1c0030; --piece-white: #eae0ff; --piece-white-glow: rgba(190, 140, 255, .4); --piece-black: #050308; --piece-black-glow: rgba(160, 40, 255, .35); --panel-border: rgba(150, 30, 255, .3); --panel-glow: rgba(110, 0, 200, .25); --text-dim: #8a7ba0; --text-dimmer: #6e6280; --text-bright: #ece4ff; --text-mid: #d8cdf0; } body[data-theme="bone"] { --accent: #a68a5b; --accent-bright: #e6d4a3; --accent-dim: #6e5a3a; --accent-darker: #362c1e; --accent-darkest: #201a12; --glow: rgba(230, 212, 163, .45); --glow-soft: rgba(230, 212, 163, .16); --glow-strong: rgba(230, 212, 163, .7); --bg-1: #1f1c14; --bg-2: #131109; --bg-3: #0a0906; --bg-4: #030302; --moon-color-1: rgba(200, 180, 130, .4); --moon-color-2: rgba(90, 78, 50, .16); --particle-color: #cbb27e; --particle-glow: #e6d4a3; --rune-color: rgba(200, 180, 130, .16); --square-light-1: #3a3527; --square-light-2: #262218; --square-dark-1: #17140d; --square-dark-2: #0a0806; --selected-1: #7a6435; --selected-2: #2c2412; --check-1: #d8b968; --check-2: #2a2210; --piece-white: #f2ead6; --piece-white-glow: rgba(240, 225, 190, .4); --piece-black: #12100a; --piece-black-glow: rgba(200, 180, 130, .35); --panel-border: rgba(230, 212, 163, .25); --panel-glow: rgba(150, 130, 90, .2); --text-dim: #8f8672; --text-dimmer: #6f6857; --text-bright: #f0e9d8; --text-mid: #ddd3ba; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100%; } body { min-height: 100vh; overflow-x: hidden; font-family: Georgia, "Times New Roman", serif; color: var(--text-bright); background: radial-gradient( circle at 50% 35%, var(--bg-1) 0%, var(--bg-2) 22%, var(--bg-3) 55%, var(--bg-4) 100% ); transition: background .6s ease; } .horror-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; background: radial-gradient( ellipse at center, transparent 20%, rgba(0, 0, 0, .75) 85% ); } .blood-moon { position: absolute; width: 420px; height: 420px; border-radius: 50%; right: -120px; top: -120px; background: radial-gradient( circle, var(--moon-color-1), var(--moon-color-2) 45%, transparent 70% ); filter: blur(4px); animation: moonPulse 5s infinite alternate; } .rune { position: absolute; color: var(--rune-color); font-size: 100px; text-shadow: 0 0 30px var(--glow-soft); animation: runeFloat 12s infinite ease-in-out; } .rune-1 { left: 5%; top: 15%; } .rune-2 { right: 7%; top: 25%; animation-delay: 2s; } .rune-3 { left: 15%; bottom: 10%; animation-delay: 4s; } .rune-4 { right: 15%; bottom: 15%; animation-delay: 6s; } .rune-5 { left: 45%; top: 8%; font-size: 70px; animation-delay: 3s; } .rune-6 { right: 40%; bottom: 5%; font-size: 80px; animation-delay: 5s; } #particles { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; } .particle { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--particle-color); box-shadow: 0 0 8px var(--particle-glow); animation: particleFloat linear infinite; } #game-container { position: relative; z-index: 5; width: min(900px, 94vw); min-height: 94vh; margin: 3vh auto; padding: 25px 30px 35px; display: flex; flex-direction: column; align-items: center; background: linear-gradient( 145deg, rgba(30, 30, 30, .94), rgba(5, 5, 5, .97) ); border: 1px solid rgba(255,255,255,.1); border-radius: 22px; box-shadow: 0 0 100px rgba(0,0,0,.95), 0 0 50px var(--panel-glow), inset 0 0 80px rgba(0,0,0,.7); backdrop-filter: blur(15px); } #board-container { width: min(640px, 82vw); aspect-ratio: 1 / 1; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); overflow: hidden; border-radius: 14px; border: 2px solid rgba(255,255,255,.12); box-shadow: 0 0 0 1px #000, 0 0 50px var(--panel-glow), 0 0 100px rgba(0,0,0,.9); } .square { position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; transition: .18s ease; } .square.light { background: linear-gradient( 135deg, var(--square-light-1), var(--square-light-2) ); } .square.dark { background: linear-gradient( 135deg, var(--square-dark-1), var(--square-dark-2) ); } .square:hover { filter: brightness(1.4); box-shadow: inset 0 0 25px var(--glow-soft); } .square.selected { background: radial-gradient( circle, var(--selected-1), var(--selected-2) ) !important; box-shadow: inset 0 0 30px var(--glow-strong), 0 0 15px var(--glow); } .square.last-move { box-shadow: inset 0 0 0 3px var(--glow-soft); } .square.in-check { background: radial-gradient( circle, var(--check-1), var(--check-2) ) !important; animation: checkPulse .7s infinite alternate; } .square.move-option::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--glow-strong), 0 0 25px var(--glow-soft); z-index: 3; pointer-events: none; } .square.capture-option { box-shadow: inset 0 0 0 4px var(--accent), inset 0 0 25px var(--glow-soft); } .square.capture-option::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; border: 3px solid var(--accent); box-shadow: 0 0 15px var(--glow); z-index: 3; pointer-events: none; }