/* ================================================================
         STILI AGGIUNTIVI — MODALITÀ D&D  (puoi spostarli in style.css)
         ================================================================ */

      /* switch modalità: nascondi le sezioni classiche (solo figlie
         dirette di main/body, così le sezioni D&D non vengono toccate) */
      body.dd-mode #stage,
      body.dd-mode main > .result,
      body.dd-mode main > .hint,
      body.dd-mode .stats,
      body.dd-mode main > .history,
      body.dd-mode > footer,
      body.dd-mode #diceCountSelector { display: none; }

      #ddSection { display: none; }

      body.dd-mode #ddSection {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 6px;
      }

      .dd-controls {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-end;
        background: rgba(255, 255, 255, 0.045);
        border: 1px solid rgba(233, 185, 84, 0.16);
        border-radius: 14px;
        padding: 12px 16px;
      }

      .dd-controls .coin-btn { margin-left: 0; font-weight: 800; }

      .dd-group { display: flex; flex-direction: column; gap: 5px; }

      .dd-label {
        font-size: 0.66rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(239, 230, 205, 0.55);
      }

      .dd-pickers { display: flex; gap: 10px; }
      .dd-picker[hidden] { display: none; }

      /* stessi pill-stile dei select dell'header */
      .dd-controls select {
        appearance: none;
        -webkit-appearance: none;
        font-family: "Manrope", sans-serif;
        font-weight: 700;
        font-size: 0.72rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--cream);
        background-color: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(233, 185, 84, 0.35);
        border-radius: 999px;
        padding: 9px 30px 9px 14px;
        cursor: pointer;
        transition: 0.25s;
        background-image:
          linear-gradient(45deg, transparent 50%, var(--gold) 50%),
          linear-gradient(135deg, var(--gold) 50%, transparent 50%);
        background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
        background-size: 5px 5px, 5px 5px;
        background-repeat: no-repeat;
      }

      .dd-controls select:hover {
        background-color: rgba(233, 185, 84, 0.15);
        border-color: rgba(233, 185, 84, 0.6);
        color: var(--gold);
        transform: translateY(-1px);
      }

      .dd-controls select:focus {
        outline: none;
        border-color: var(--gold);
        box-shadow: 0 0 0 3px rgba(233, 185, 84, 0.12);
      }

      .dd-controls option { color: #efe6cd; background: #0e3325; }

      /* dadi poliedrici */
      .dd-slot {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        perspective: 1100px;
        -webkit-tap-highlight-color: transparent;
      }

      .dd-slot:focus-visible {
        outline: 3px solid var(--gold);
        outline-offset: 8px;
        border-radius: 12px;
      }

      .dd-slot::after {
        content: "";
        position: absolute;
        top: calc(100% + var(--dds) * 0.16);
        left: 50%;
        transform: translateX(-50%);
        width: calc(var(--dds) * 0.72);
        height: calc(var(--dds) * 0.1);
        background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0,0,0,0.45), rgba(0,0,0,0.15) 55%, transparent 78%);
        filter: blur(3px);
        border-radius: 50%;
        animation: shadowBob 4.5s ease-in-out infinite;
        pointer-events: none;
      }

      .stage.rolling .dd-slot::after { animation: shadowRoll 1.9s ease-in-out; }

      .dd-scene {
        width: var(--dds);
        height: var(--dds);
        transform-style: preserve-3d;
        transition: transform 0.35s ease;
      }

      .dd-slot:hover .dd-scene { transform: scale(1.06); }

      .dd-tilt {
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        transform: rotateX(-18deg) rotateY(8deg);
        transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
      }

      .dd-tilt.flat { transform: none; }

      .dd-cube {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 0;
        height: 0;
        transform-style: preserve-3d;
        will-change: transform;
      }

      .dd-face {
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        backface-visibility: hidden;
      }

      .dd-face span {
        font-family: "Bungee", cursive;
        font-weight: 800;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
      }

      .dd-val {
        font-family: "Bungee", cursive;
        font-size: 1rem;
        color: var(--gold);
        min-height: 1.2em;
        text-shadow: 0 2px 10px rgba(233, 185, 84, 0.35);
      }

      /* saltello del singolo dado durante il lancio */
      .dd-roll .dd-scene { animation: ddHop var(--dur, 1.2s) cubic-bezier(0.33, 0.6, 0.35, 1); }

      @keyframes ddHop {
        0% { transform: translateY(0); }
        30% { transform: translateY(-30px); }
        55% { transform: translateY(0); }
        72% { transform: translateY(-11px); }
        100% { transform: translateY(0); }
      }

      /* totale evidziato nel risultato */
      .num.dd-tot {
        color: var(--ivory);
        text-shadow: 0 8px 30px rgba(246, 239, 221, 0.3), 0 2px 0 rgba(0, 0, 0, 0.3);
      }

      /* chip cronologia D&D (testuali) */
      .dd-chip {
        font-family: "Bungee", cursive;
        font-size: 0.72rem;
        background: var(--ivory);
        color: #191712;
        border-radius: 9px;
        padding: 11px 12px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
        animation: chipIn 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
      }

      .dd-chip b { color: #8a6d1f; margin-left: 5px; }

      .dd-chip.tot {
        background: linear-gradient(180deg, #f4d488, var(--gold));
      }

      .dd-chip.tot b { color: #241a10; }

      @media (max-width: 700px) {
        .dd-controls { gap: 8px; padding: 10px 12px; }
        .dd-pickers { gap: 6px; }
        .dd-controls select { padding: 8px 26px 8px 12px; font-size: 0.66rem; }
      }