*{box-sizing:border-box;margin:0;padding:0}:root{--primary-color: #0B2434;--secondary-color: #59E391;--background-color: #F5F5F5;--text-color: #2B283A;--shadow-color: rgba(0, 0, 0, .2)}body{margin:0;background-color:var(--primary-color);padding:20px;font-family:Inter,Karla,sans-serif;color:var(--text-color);min-height:100vh;display:flex;align-items:center;justify-content:center}main{background-color:var(--background-color);min-height:400px;width:90%;max-width:800px;border-radius:10px;padding:2rem;display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:1.5rem;box-shadow:0 8px 20px var(--shadow-color)}.title{font-size:40px;margin:0}.instructions{font-family:Inter,sans-serif;font-weight:400;margin-top:0;text-align:center}.player-name{width:100%;max-width:300px;margin:1rem auto}.player-name input{width:100%;padding:.75rem 1rem;border:2px solid var(--primary-color);border-radius:25px;font-family:inherit;font-size:1rem;text-align:center;transition:all .2s ease}.player-name input:focus{outline:none;box-shadow:0 0 0 3px #0b243433}.player-name input::placeholder{color:#999}.dice-container{display:grid;grid-template:auto auto / repeat(5,1fr);gap:20px;margin-bottom:40px}.die-face{height:60px;width:60px;box-shadow:0 2px 5px var(--shadow-color);border-radius:10px;display:flex;justify-content:center;align-items:center;cursor:pointer;border:none;transition:all .2s ease;font-family:inherit}.die-face:hover{transform:translateY(-2px);box-shadow:0 4px 8px var(--shadow-color)}.die-face:focus{outline:3px solid var(--secondary-color);outline-offset:2px}.die-num{font-size:2rem;font-weight:700;color:var(--text-color)}.stats{display:flex;gap:2rem;font-size:1.1rem;font-weight:600}.roll-dice{height:50px;width:150px;border:none;border-radius:25px;background-color:var(--primary-color);color:#fff;font-size:1.2rem;font-family:inherit;font-weight:600;cursor:pointer;transition:all .2s ease;position:relative;overflow:hidden}.roll-dice:hover{transform:translateY(-2px);box-shadow:0 5px 15px var(--shadow-color)}.roll-dice:focus{outline:3px solid var(--secondary-color);outline-offset:2px}.roll-dice:active{transform:translateY(1px);box-shadow:inset 0 3px 5px #0003}.tabs{display:flex;gap:1rem;margin-bottom:2rem;width:100%;justify-content:center}.tab-button{padding:.75rem 1.5rem;border:none;background:transparent;color:var(--text-color);font-family:inherit;font-weight:600;cursor:pointer;border-bottom:3px solid transparent;transition:all .2s ease}.tab-button.active{border-bottom-color:var(--primary-color);color:var(--primary-color)}.leaderboard{width:100%;max-width:600px;margin:0 auto;opacity:0;animation:fadeIn .3s ease forwards}.leaderboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.clear-scores{padding:.5rem 1rem;border:none;background:#f44;color:#fff;border-radius:20px;font-family:inherit;font-size:.9rem;cursor:pointer;transition:all .2s ease}.clear-scores:hover{background:#f22;transform:translateY(-1px)}.scores-list{display:flex;flex-direction:column;gap:1rem}.score-item{display:flex;align-items:center;gap:1.5rem;padding:1.25rem;background:#fff;border-radius:12px;box-shadow:0 2px 8px var(--shadow-color);opacity:0;transform:translateY(10px);animation:slideIn .3s ease forwards;transition:transform .2s ease}.score-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px var(--shadow-color)}.score-details{display:grid;grid-template-columns:2fr 1fr 1.5fr;gap:1rem;align-items:center;width:100%}.player-name{font-size:1.1rem;font-weight:600;color:var(--text-color)}.score-value{font-weight:600;color:var(--primary-color);text-align:center;background:#0b24341a;padding:.4rem .8rem;border-radius:20px;white-space:nowrap}.score-date{color:#666;font-size:.9rem;text-align:right}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 600px){.score-details{grid-template-columns:1fr;gap:.5rem;text-align:left}.score-value{justify-self:start}.score-date{text-align:left}}.rank{width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;color:#fff;border-radius:50%;font-weight:700;position:relative;overflow:hidden}.rank-1{background:linear-gradient(135deg,gold,orange)}.rank-2{background:linear-gradient(135deg,silver,#a0a0a0)}.rank-3{background:linear-gradient(135deg,#cd7f32,sienna)}.rank:not(.rank-1):not(.rank-2):not(.rank-3){background:var(--primary-color)}.rank:after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:#ffffff1a;transform:rotate(45deg);animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:rotate(45deg) translateY(0)}to{transform:rotate(45deg) translateY(100%)}}.score-details{display:flex;flex:1;justify-content:space-between;align-items:center}.player-name{font-weight:600}.score-value{color:var(--primary-color);font-weight:600}.score-date{color:#666;font-size:.9rem}.no-scores{text-align:center;color:#666;font-style:italic}@media (max-width: 480px){main{padding:1rem}.dice-container{gap:10px}.die-face{height:50px;width:50px}.die-num{font-size:1.5rem}.stats{flex-direction:column;gap:.5rem;text-align:center}.score-details{flex-direction:column;align-items:flex-start;gap:.25rem}.tab-button{padding:.5rem 1rem;font-size:.9rem}}
