:root{
--bg:#f3f5f9;
--card:#fff;
--card-alt:#f8fafc;
--text:#172033;
--muted:#697386;
--border:#e2e8f0;
--primary:#6366f1;
--primary-hover:#4f46e5;
--dice:#fff;
--dice-edge:#d8d8d8;
--dot:#111827;
--navbar:#fff;
--shadow:0 18px 50px rgba(15,23,42,.12);
}

[data-theme="dark"]{
--bg:#0d1424;
--card:#151e2f;
--card-alt:#101827;
--text:#f8fafc;
--muted:#98a5b8;
--border:#293548;
--primary:#818cf8;
--primary-hover:#6366f1;
--navbar:#111827;
--shadow:0 18px 50px rgba(0,0,0,.28);
}

*{
box-sizing:border-box;
}

html,body{
margin:0;
min-height:100%;
}

body{
font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
background:
radial-gradient(circle at 15% 10%,rgba(99,102,241,.1),transparent 32%),
radial-gradient(circle at 85% 90%,rgba(14,165,233,.08),transparent 32%),
var(--bg);
color:var(--text);
transition:background .25s,color .25s;
}

button,input,select{
font:inherit;
}

.navbar{
height:64px;
background:var(--navbar);
border-bottom:1px solid var(--border);
position:sticky;
top:0;
z-index:100;
}

.nav-inner{
width:min(1100px,calc(100% - 32px));
height:100%;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
}

.nav-brand{
display:flex;
align-items:center;
gap:9px;
color:var(--text);
text-decoration:none;
font-weight:800;
font-size:18px;
}

.nav-logo{
width:34px;
height:34px;
display:grid;
place-items:center;
background:rgba(99,102,241,.12);
border-radius:10px;
}

.nav-links{
display:flex;
align-items:center;
gap:8px;
}

.nav-links>a,
.nav-button{
color:var(--muted);
text-decoration:none;
font-size:14px;
font-weight:600;
padding:8px 10px;
border-radius:8px;
transition:.2s;
}

.nav-button{
border:0;
background:transparent;
cursor:pointer;
}

.nav-links>a:hover,
.nav-button:hover{
color:var(--text);
background:var(--card-alt);
}

.theme-toggle{
width:38px;
height:38px;
border:1px solid var(--border);
border-radius:10px;
background:var(--card-alt);
color:var(--text);
cursor:pointer;
}

.page{
min-height:calc(100vh - 64px);
display:flex;
align-items:center;
justify-content:center;
padding:30px 20px;
}

.card{
width:min(650px,100%);
background:var(--card);
border:1px solid var(--border);
border-radius:22px;
box-shadow:var(--shadow);
padding:30px;
}

.heading{
text-align:center;
}

.eyebrow{
display:inline-block;
color:var(--primary);
background:rgba(99,102,241,.1);
border-radius:20px;
padding:6px 10px;
font-size:11px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
}

.heading h1{
margin:10px 0 5px;
font-size:30px;
letter-spacing:-1px;
}

.heading p{
margin:0;
color:var(--muted);
font-size:14px;
}

/* DICE */

.dice-container{
height:190px;
display:flex;
justify-content:center;
align-items:center;
gap:50px;
perspective:900px;
-webkit-perspective:900px;
}

.dice-wrap{
position:relative;
width:100px;
height:100px;
perspective:700px;
-webkit-perspective:700px;
}

.dice-wrap::after{
content:"";
position:absolute;
left:15px;
bottom:-32px;
width:70px;
height:14px;
border-radius:50%;
background:rgba(0,0,0,.16);
filter:blur(7px);
transition:.2s;
}

.rolling .dice-wrap::after{
transform:scale(.72);
opacity:.45;
}

.dice{
position:relative;
width:100px;
height:100px;
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
transform-origin:center;
-webkit-transform-origin:center;
transition:transform .9s cubic-bezier(.18,.75,.25,1);
will-change:transform;
}

.face{
position:absolute;
width:100%;
height:100%;
background:var(--dice);
border:2px solid var(--dice-edge);
border-radius:6px;
box-shadow:
inset 0 0 12px rgba(0,0,0,.055),
inset 0 0 0 1px rgba(255,255,255,.07);
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}

.front{ transform:rotateY(0deg) translateZ(50px); }
.back{ transform:rotateY(180deg) translateZ(50px); }
.right{ transform:rotateY(90deg) translateZ(50px); }
.left{ transform:rotateY(-90deg) translateZ(50px); }
.top{ transform:rotateX(90deg) translateZ(50px); }
.bottom{ transform:rotateX(-90deg) translateZ(50px); }

.dot{
position:absolute;
width:16px;
height:16px;
border-radius:50%;
background:var(--dot);
box-shadow:inset 0 1px 2px rgba(255,255,255,.22);
}

.top-left{ top:16px; left:16px; }
.top-right{ top:16px; right:16px; }
.bottom-left{ bottom:16px; left:16px; }
.bottom-right{ bottom:16px; right:16px; }
.center{ top:50%; left:50%; transform:translate(-50%,-50%); }
.middle-left{ top:50%; left:16px; transform:translateY(-50%); }
.middle-right{ top:50%; right:16px; transform:translateY(-50%); }

/* RESULT */

.result-box{
text-align:center;
background:var(--card-alt);
border:1px solid var(--border);
border-radius:14px;
padding:13px;
transition:.2s;
}

.result-box>span{
display:block;
color:var(--muted);
font-size:11px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.08em;
}

.result-box strong{
display:block;
font-size:34px;
line-height:1.15;
margin:2px 0;
}

.result-box small{
color:var(--muted);
}

.result-box.double-roll{
border-color:var(--primary);
box-shadow:0 0 0 3px rgba(99,102,241,.12);
animation:doublePop .55s ease;
}

@keyframes doublePop{
0%{transform:scale(1)}
35%{transform:scale(1.035)}
100%{transform:scale(1)}
}

/* ROLL BUTTON */

.roll-button{
width:100%;
border:0;
background:var(--primary);
color:#fff;
border-radius:13px;
padding:14px 18px;
margin-top:14px;
font-size:16px;
font-weight:800;
cursor:pointer;
transition:.2s;
box-shadow:0 8px 20px rgba(99,102,241,.22);
}

.roll-button:hover:not(:disabled){
background:var(--primary-hover);
transform:translateY(-1px);
}

.roll-button:active:not(:disabled){
transform:translateY(1px);
}

.roll-button:disabled{
opacity:.7;
cursor:default;
}

/* SETTINGS */

.options{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin-top:14px;
}

.option{
background:var(--card-alt);
border:1px solid var(--border);
border-radius:12px;
padding:11px 12px;
min-height:66px;
}

.option>label,
.option-title{
display:block;
color:var(--muted);
font-size:11px;
font-weight:800;
text-transform:uppercase;
margin-bottom:6px;
}

.option select{
width:100%;
border:0;
outline:0;
background:transparent;
color:var(--text);
font-weight:700;
cursor:pointer;
}

.colour-picker{
display:flex;
align-items:center;
gap:8px;
}

.colour-picker input{
width:34px;
height:30px;
flex:0 0 34px;
border:0;
padding:0;
background:transparent;
cursor:pointer;
}

.colour-picker>span{
font-size:12px;
font-weight:700;
flex:1;
}

.random-colour-button{
border:1px solid var(--border);
background:var(--card);
color:var(--text);
border-radius:8px;
padding:6px 8px;
font-size:11px;
font-weight:700;
cursor:pointer;
white-space:nowrap;
transition:.2s;
}

.random-colour-button:hover{
border-color:var(--primary);
color:var(--primary);
}

.colour-presets{
display:flex;
gap:6px;
margin-top:8px;
}

.swatch{
width:22px;
height:22px;
border-radius:50%;
border:2px solid var(--border);
cursor:pointer;
padding:0;
transition:transform .15s,border-color .15s;
}

.swatch:hover{
transform:scale(1.1);
border-color:var(--primary);
}

.reset-wrap {
display: flex;
justify-content: flex-end;
margin-top: 8px;
}

.reset-button {
background: transparent;
border: none;
color: var(--muted);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
transition: .2s;
}

.reset-button:hover {
color: var(--text);
background: var(--card-alt);
}

/* SOUND */

.sound-setting{
height:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
}

.sound-setting .option-title{
margin-bottom:2px;
}

.option-description{
color:var(--muted);
font-size:12px;
}

.switch{
position:relative;
display:inline-block;
width:48px;
height:27px;
flex:0 0 48px;
cursor:pointer;
}

.switch input{
opacity:0;
width:0;
height:0;
}

.switch-slider{
position:absolute;
inset:0;
background:var(--border);
border-radius:30px;
transition:.2s;
}

.switch-slider::before{
content:"";
position:absolute;
width:21px;
height:21px;
left:3px;
top:3px;
background:#fff;
border-radius:50%;
box-shadow:0 1px 4px rgba(0,0,0,.25);
transition:.2s;
}

.switch input:checked+.switch-slider{
background:var(--primary);
}

.switch input:checked+.switch-slider::before{
transform:translateX(21px);
}

/* SHAKE */

.shake-section{
margin-top:10px;
}

.shake-button{
width:100%;
display:flex;
align-items:center;
gap:12px;
text-align:left;
border:1px solid var(--border);
border-radius:12px;
background:var(--card-alt);
color:var(--text);
padding:11px 13px;
cursor:pointer;
transition:.2s;
}

.shake-button>span:first-child{
font-size:22px;
}

.shake-button>span:last-child{
display:flex;
flex-direction:column;
}

.shake-button strong{
font-size:13px;
}

.shake-button small{
color:var(--muted);
margin-top:2px;
}

.shake-button:hover{
border-color:var(--primary);
}

.shake-button.enabled{
border-color:#22c55e;
}

.shake-status{
margin-top:7px;
padding:8px 10px;
border-radius:8px;
background:rgba(34,197,94,.1);
color:#16a34a;
font-size:12px;
font-weight:600;
}

.shake-status.error{
background:rgba(239,68,68,.1);
color:#dc2626;
}

/* STATS DASHBOARD */
.stats-dashboard {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-top: 18px;
}

.stat-box {
flex: 1 1 0;
min-width: 75px;
background: var(--card-alt);
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px 8px;
text-align: center;
transition: 0.3s;
}

.stat-label {
display: block;
color: var(--muted);
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 3px;
}

.stat-value {
display: block;
font-size: 18px;
font-weight: 800;
color: var(--text);
}

/* HISTORY */

.history{
margin-top:18px;
padding-top:15px;
border-top:1px solid var(--border);
}

.history-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:9px;
}

.history-header>span{
font-size:12px;
font-weight:800;
}

.history-header button{
border:0;
background:none;
color:var(--muted);
cursor:pointer;
font-size:12px;
}

.history-header button:hover{
color:var(--text);
}

.history-list{
display:flex;
flex-wrap:wrap;
gap:6px;
}

.history-item{
background:var(--card-alt);
border:1px solid var(--border);
border-radius:8px;
padding:6px 9px;
font-size:12px;
font-weight:700;
}

.history-item.double{
border-color:var(--primary);
}

.empty-history{
color:var(--muted);
font-size:12px;
}

.keyboard-hint{
margin-top:15px;
text-align:center;
color:var(--muted);
font-size:11px;
}

kbd{
background:var(--card-alt);
border:1px solid var(--border);
border-bottom-width:2px;
border-radius:4px;
padding:1px 5px;
font:inherit;
}

.hidden{
display:none!important;
}

/* MODAL */

.modal{
position:fixed;
inset:0;
z-index:1000;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
opacity:0;
visibility:hidden;
transition:opacity .2s,visibility .2s;
}

.modal.open{
opacity:1;
visibility:visible;
}

.modal-backdrop{
position:absolute;
inset:0;
background:rgba(2,6,23,.68);
backdrop-filter:blur(4px);
}

.modal-box{
position:relative;
width:min(520px,100%);
max-height:calc(100vh - 40px);
overflow:auto;
background:var(--card);
border:1px solid var(--border);
border-radius:20px;
box-shadow:0 25px 80px rgba(0,0,0,.3);
transform:translateY(15px) scale(.98);
transition:transform .2s;
}

.modal.open .modal-box{
transform:translateY(0) scale(1);
}

.modal-header{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:20px;
padding:22px 22px 17px;
border-bottom:1px solid var(--border);
}

.modal-eyebrow{
display:block;
color:var(--primary);
font-size:11px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.08em;
margin-bottom:4px;
}

.modal-header h2{
margin:0;
font-size:24px;
}

.modal-close{
width:36px;
height:36px;
border:1px solid var(--border);
border-radius:10px;
background:var(--card-alt);
color:var(--text);
font-size:24px;
line-height:1;
cursor:pointer;
}

.modal-close:hover{
border-color:var(--primary);
}

.modal-content{
padding:20px 22px;
}

.help-item{
display:flex;
align-items:flex-start;
gap:13px;
padding:12px 0;
}

.help-item+.help-item{
border-top:1px solid var(--border);
}

.help-icon{
width:38px;
height:38px;
flex:0 0 38px;
display:grid;
place-items:center;
background:var(--card-alt);
border:1px solid var(--border);
border-radius:10px;
font-size:18px;
}

.help-item strong{
display:block;
font-size:14px;
margin-bottom:3px;
}

.help-item p{
margin:0;
color:var(--muted);
font-size:13px;
line-height:1.5;
}

.modal-note{
margin-top:12px;
padding:11px 12px;
background:rgba(99,102,241,.1);
border-radius:9px;
color:var(--muted);
font-size:12px;
line-height:1.5;
}

.modal-footer{
padding:0 22px 22px;
}

.modal-done{
width:100%;
border:0;
border-radius:11px;
padding:12px;
background:var(--primary);
color:#fff;
font-weight:800;
cursor:pointer;
}

.modal-done:hover{
background:var(--primary-hover);
}

body.modal-open{
overflow:hidden;
}

@media(max-width:600px){

.nav-inner{
width:calc(100% - 22px);
}

.nav-links>a{
display:none;
}

.nav-button{
font-size:13px;
padding:7px 8px;
}

.page{
padding:16px 12px;
}

.card{
padding:22px 16px;
border-radius:18px;
}

.heading h1{
font-size:26px;
}

.dice-container{
height:175px;
gap:34px;
}

.options{
grid-template-columns:1fr;
}

.stat-box { flex: 1 1 calc(50% - 4px); min-width: 80px; }

.modal{
padding:12px;
}

.modal-box{
max-height:calc(100vh - 24px);
border-radius:16px;
}

}

@media(max-width:360px){

.nav-brand>span:last-child{
display:none;
}

.dice-container{
gap:22px;
}

.dice,
.dice-wrap{
width:88px;
height:88px;
}

.face{
width:88px;
height:88px;
}

.front{ transform:rotateY(0deg) translateZ(44px); }
.back{ transform:rotateY(180deg) translateZ(44px); }
.right{ transform:rotateY(90deg) translateZ(44px); }
.left{ transform:rotateY(-90deg) translateZ(44px); }
.top{ transform:rotateX(90deg) translateZ(44px); }
.bottom{ transform:rotateX(-90deg) translateZ(44px); }

}

@media(prefers-reduced-motion:reduce){

.dice{
transition-duration:.2s;
}

}