:root {
    --bg: #020617;
    --surface: #0f172a;
    --accent: #38bdf8;
}
body {
    background-color: var(--bg);
    color: #f8fafc;
    font-family: 'Inter', sans-serif;
    overflow: hidden;
    user-select: none;
    touch-action: none;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Unified Typography */
.mono { font-family: 'JetBrains+Mono', monospace; }
.mono-bold { font-family: 'JetBrains+Mono', monospace; font-weight: 800; letter-spacing: -0.05em; }
.mono-italic { font-family: 'JetBrains+Mono', monospace; font-style: italic; font-weight: 800; }

.glass { background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.1); }
.board-container { border: 4px solid #1e293b; background: rgba(0,0,0,0.95); border-radius: 12px; overflow: hidden; position: relative; }

/* Menu Overlays */
.overlay-menu { background: rgba(2, 6, 23, 0.95); backdrop-filter: blur(24px); transition: opacity 0.3s ease; }

.btn-primary { background: var(--accent); color: white; transition: all 0.2s; font-weight: 900; }
.btn-primary:hover { transform: scale(1.05); filter: brightness(1.1); }
.btn-secondary { background: rgba(255,255,255,0.1); color: white; transition: all 0.2s; font-weight: 800; }
.btn-secondary:hover { background: rgba(255,255,255,0.2); transform: scale(1.02); }
.btn-danger { background: #e11d48; color: white; transition: all 0.2s; font-weight: 900; }
.btn-danger:hover { background: #f43f5e; transform: scale(1.05); }

.hidden { display: none !important; }

/* Effects */
.fade-panel { transition: opacity 0.3s ease; }

@keyframes shake {
    0%, 100% { transform: translate(0,0); }
    25% { transform: translate(-4px, 4px); }
    50% { transform: translate(4px, -4px); }
    75% { transform: translate(-4px, -4px); }
}
.shake-effect { animation: shake 0.1s ease-out; }

/* Perspective wrapper for clean 3D flip */
#shakeContainer { perspective: 1000px; }

@keyframes flipBoard {
    0% { transform: rotateX(90deg) scale(0.9); opacity: 0; }
    50% { transform: rotateX(-10deg) scale(1.02); opacity: 1; }
    100% { transform: rotateX(0deg) scale(1); opacity: 1; }
}
.board-flip { animation: flipBoard 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; transform-origin: center; }