@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Inter:wght@300;400;500;600&display=swap');

/* ════════════════════════════════════════
   VARIABILI
   ════════════════════════════════════════ */
:root {
    --bg: #070707;
    --text: #FCF7F8;
    --accent: #961114;
    --accent-dim: rgba(150,17,20,0.15);
    --accent-glow: rgba(150,17,20,0.4);
    --card: #1a1a1a;
    --btn: #1e1e1e;
    --btn-hover: #2a2a2a;
    --border: rgba(252,247,248,0.07);
    --border-hover: rgba(252,247,248,0.18);
    --nav-h: 70px;
    --font-d: 'Playfair Display', Georgia, serif;
    --font-b: 'Inter', sans-serif;
}
body.light-theme {
    --bg: #FCF7F8; --text: #070707;
    --card: #e0e0e0; --btn: #dcdcdc; --btn-hover: #d0d0d0;
    --border: rgba(7,7,7,0.08); --border-hover: rgba(7,7,7,0.2);
    --accent-dim: rgba(150,17,20,0.1);
}

/* ════════════════════════════════════════ */
* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family: var(--font-b);
    background: var(--bg); color: var(--text);
    min-height: 100vh; overflow-x: hidden;
    transition: background .5s cubic-bezier(.4,0,.2,1), color .5s cubic-bezier(.4,0,.2,1);
}

/* ════════════════════════════════════════
   NAVBAR
   ════════════════════════════════════════ */
.navbar {
    position:fixed; top:0; left:0; right:0; z-index:100;
    background: rgba(7,7,7,.85);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    transition: background .5s cubic-bezier(.4,0,.2,1);
}
body.light-theme .navbar { background: rgba(252,247,248,.85); }

.navbar-container {
    height: var(--nav-h); padding: 0 2rem;
    display:flex; justify-content:space-between; align-items:center;
}
.navbar-logo { display:flex; align-items:center; gap:.75rem; }
.logo-icon { width:auto; height:40px; flex-shrink:0; }
.logo-text { font-family:var(--font-d); font-size:1.4rem; font-weight:700; letter-spacing:-.02em; }
.navbar-links { display:flex; align-items:center; gap:1.5rem; }
.nav-link { color:var(--text); text-decoration:none; font-size:.9rem; font-weight:500; transition:color .2s; }
.nav-link:hover { color:var(--accent); }

.theme-toggle {
    background:none; border:1px solid var(--border); border-radius:50%;
    width:38px; height:38px; display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:var(--text); transition:all .2s; position:relative;
}
.theme-toggle:hover { border-color:var(--accent); transform:rotate(180deg); }
.sun-icon,.moon-icon { position:absolute; transition:opacity .2s,transform .2s; }
.sun-icon { opacity:0; transform:rotate(-90deg); }
.moon-icon { opacity:1; }
body.light-theme .sun-icon { opacity:1; transform:rotate(0); }
body.light-theme .moon-icon { opacity:0; transform:rotate(90deg); }

/* ════════════════════════════════════════
   LAYOUT
   ════════════════════════════════════════ */
.dice-layout {
    display:flex; flex-direction:column; align-items:center;
    padding: calc(var(--nav-h) + 2.2rem) 1.5rem 2rem;
    min-height:100vh; gap:1.8rem;
}

/* ════════════════════════════════════════
   SELETTORE
   ════════════════════════════════════════ */
.dice-selector { display:flex; gap:.35rem; flex-wrap:wrap; justify-content:center; }

.dice-type-btn {
    background: var(--btn); border:1px solid var(--border); border-radius:8px;
    color:var(--text); font-family:var(--font-b); font-size:.75rem;
    font-weight:700; letter-spacing:.08em; padding:.45rem .95rem;
    cursor:pointer; transition:all .18s; user-select:none;
}
.dice-type-btn:hover { border-color:var(--border-hover); background:var(--accent-dim); }
.dice-type-btn.active {
    background:var(--accent); border-color:var(--accent); color:#fff;
    box-shadow: 0 2px 14px var(--accent-glow);
}

/* ════════════════════════════════════════
   STAGE
   ════════════════════════════════════════ */
.dice-stage {
    position:relative; width:260px; height:260px;
    display:flex; align-items:center; justify-content:center;
}

.dice-shadow {
    position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
    width:160px; height:20px;
    background: radial-gradient(ellipse, rgba(150,17,20,.22) 0%, transparent 70%);
    border-radius:50%; transition:all .3s;
}
.dice-stage.rolling .dice-shadow { transform:translateX(-50%) scaleX(1.4); opacity:.7; }

#diceCanvas { position:relative; z-index:1; width:260px; height:260px; }

/* Shake durante il roll */
@keyframes shake {
    0%   { transform: translate(0,0) rotate(0deg); }
    8%   { transform: translate(-5px, 2px) rotate(-2.5deg); }
    16%  { transform: translate(5px,-3px) rotate(2deg); }
    24%  { transform: translate(-4px,-2px) rotate(-1.5deg); }
    32%  { transform: translate(4px, 3px) rotate(2.5deg); }
    40%  { transform: translate(-3px,-1px) rotate(-1deg); }
    48%  { transform: translate(3px, 2px) rotate(1.5deg); }
    56%  { transform: translate(-2px, 1px) rotate(-.8deg); }
    64%  { transform: translate(2px,-1px) rotate(.8deg); }
    72%  { transform: translate(-1px, 1px) rotate(-.4deg); }
    80%  { transform: translate(1px, 0px) rotate(.3deg); }
    100% { transform: translate(0,0) rotate(0deg); }
}
.dice-stage.rolling #diceCanvas { animation: shake .65s cubic-bezier(.25,.46,.45,.94) forwards; }

/* Bounce finale */
@keyframes bounce {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.09); }
    65%  { transform: scale(.955); }
    100% { transform: scale(1); }
}
.dice-stage.bounce #diceCanvas { animation: bounce .38s cubic-bezier(.34,1.56,.64,1) forwards; }

/* ════════════════════════════════════════
   RISULTATO
   ════════════════════════════════════════ */
.result-area { text-align:center; min-height:110px; display:flex; flex-direction:column; align-items:center; justify-content:center; }

.result-number {
    font-family: var(--font-d);
    font-size: 5.8rem; font-weight:900; line-height:1;
    color:var(--text); letter-spacing:-.04em;
    transition: color .25s;
}
.result-number.spinning { color:var(--accent); }
.result-number.pop { animation: pop .42s cubic-bezier(.34,1.56,.64,1) forwards; }

@keyframes pop {
    0%   { transform:scale(.55); opacity:.2; }
    55%  { transform:scale(1.1); }
    100% { transform:scale(1); opacity:1; }
}

.result-label {
    font-size:.68rem; font-weight:600; text-transform:uppercase;
    letter-spacing:.18em; opacity:.32; margin-top:.45rem;
}

/* ════════════════════════════════════════
   BOTTONE TIRA
   ════════════════════════════════════════ */
.roll-btn {
    display:flex; align-items:center; gap:.55rem;
    background:var(--accent); border:none; border-radius:12px;
    color:#fff; font-family:var(--font-b); font-size:.95rem;
    font-weight:700; letter-spacing:.12em; text-transform:uppercase;
    padding:.82rem 2.6rem; cursor:pointer;
    transition: all .22s cubic-bezier(.34,1.56,.64,1);
    box-shadow: 0 4px 22px var(--accent-glow);
    user-select:none; position:relative; overflow:hidden;
}
.roll-btn::before {
    content:''; position:absolute; inset:0;
    background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 60%);
    opacity:0; transition:opacity .25s;
}
.roll-btn:hover { transform:translateY(-2px); box-shadow:0 6px 30px var(--accent-glow); }
.roll-btn:hover::before { opacity:1; }
.roll-btn:active { transform:translateY(0); box-shadow:0 2px 12px var(--accent-glow); }
.roll-btn:disabled { opacity:.45; cursor:not-allowed; transform:none; box-shadow:0 2px 10px var(--accent-glow); }
.roll-btn svg, .roll-btn span { position:relative; z-index:1; }

/* ════════════════════════════════════════
   STORICO
   ════════════════════════════════════════ */
.history-section { width:100%; max-width:400px; }
.history-label {
    font-size:.6rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.16em; opacity:.28; margin-bottom:.5rem; text-align:center;
}
.history-rolls { display:flex; flex-wrap:wrap; gap:.35rem; justify-content:center; }

.history-item {
    display:flex; align-items:center; gap:.28rem;
    background:var(--card); border:1px solid var(--border); border-radius:6px;
    padding:.25rem .52rem; font-size:.68rem; font-weight:500;
    opacity:.65; animation: histIn .3s cubic-bezier(.34,1.56,.64,1) backwards;
}
@keyframes histIn { from { transform:scale(.65); opacity:0; } to { transform:scale(1); opacity:.65; } }

.history-item .ht { color:var(--accent); font-weight:700; font-size:.6rem; letter-spacing:.04em; }
.history-item .hr { font-weight:700; font-variant-numeric:tabular-nums; }

/* ════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════ */
@media (max-width:480px) {
    .dice-layout { gap:1.3rem; padding-top: calc(var(--nav-h) + 1.4rem); }
    .dice-stage { width:220px; height:220px; }
    #diceCanvas { width:220px; height:220px; }
    .result-number { font-size:4.6rem; }
    .roll-btn { padding:.72rem 2rem; font-size:.85rem; }
}

/* ════════════════════════════════════════
   ACCESSIBILITÀ
   ════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce) {
    .dice-stage.rolling #diceCanvas,
    .dice-stage.bounce #diceCanvas,
    .result-number.pop,
    .history-item { animation:none !important; }
}
.roll-btn:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.dice-type-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
::selection { background:var(--accent); color:#fff; }