@import url('https://fonts.googleapis.com/css2?family=IM+Fell+French+Canon:ital@0;1&family=La+Belle+Aurore&display=swap');
body {
    background: radial-gradient(ellipse at center, #f5e8c9 0%, #d8c9a5 100%);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}
body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="5" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.05"/></svg>');
    pointer-events: none;
    z-index: -1;
    mix-blend-mode: overlay;
}
header {
    background: #9c2b2b;
    box-shadow: 0 2px 20px rgba(156, 43, 43, 0.3);
    position: relative;
    overflow: hidden;
}

header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="rgba(0,0,0,0.05)" d="M30,50 Q50,30 70,50 T90,50 T70,50 T50,70 T30,50 Z"/></svg>');
    background-size: 100px 100px;
    opacity: 0.3;
}
main {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(112, 66, 20, 0.1);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(112, 66, 20, 0.1);
}
footer {
    background-image: linear-gradient(to right, rgba(112, 66, 20, 0.9), rgba(112, 66, 20, 0.7));
}
/* Game Board Styles */
#game-board {
    width: 100%;
    height: 600px;
    transition: all 1.5s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
}
#game-board::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(245, 232, 201, 0) 0%, rgba(245, 232, 201, 0.2) 100%);
    pointer-events: none;
    z-index: 1;
}
.player-marker {
    transition: all 1.2s cubic-bezier(0.45, 0, 0.55, 1);
    z-index: 10;
    will-change: transform;
    filter: drop-shadow(0 0 4px currentColor);
}
.player-trail {
    z-index: 5;
}

.dice {
    font-weight: bold;
    text-shadow: 0 0 4px currentColor;
}

.total {
    font-weight: bold;
    color: #704214;
    text-shadow: 0 0 4px rgba(112, 66, 20, 0.3);
}
.goose {
    background-color: rgba(201, 162, 39, 0.3) !important;
}

.bridge {
    background-color: rgba(58, 90, 120, 0.3) !important;
}

.inn {
    background-color: rgba(156, 43, 43, 0.3) !important;
}

.well {
    background-color: rgba(58, 90, 120, 0.3) !important;
}

.labyrinth {
    background-color: rgba(112, 66, 20, 0.3) !important;
}

.prison {
    background-color: rgba(156, 43, 43, 0.4) !important;
}

.death {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

.garden {
    background-color: rgba(201, 162, 39, 0.4) !important;
    border: 2px dashed #c9a227 !important;
}
#roll-btn {
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
}

#roll-btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(to bottom, transparent 0%, rgba(201, 162, 39, 0.1) 50%, transparent 100%);
    transform: rotate(45deg);
    transition: all 1.5s ease;
    opacity: 0;
}

#roll-btn:hover::before {
    opacity: 1;
    animation: shine 3s infinite;
}

@keyframes shine {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}
#roll-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f5e8c9;
}

::-webkit-scrollbar-thumb {
    background: #704214;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9c2b2b;
}