/* Stile di Yggdrasil: tema scuro, richiami norreni (rune, oro antico, muschio), niente fronzoli.
   Albero in alto, pannello del ramo che sale dal basso, prova a tutto schermo. */

:root {
  --fondo: #0b0f14; --carta: #141b24; --bordo: #2a3542; --testo: #d8dee9; --tenue: #8693a3;
  --grigio: #4b5563; --verde: #5fae7b; --oro: #e8c66a; --ruggine: #a8794a; --verde-spento: #4a7a5c; --legno: #3b2f25;
  --errore: #d9776b;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fondo); color: var(--testo);
             font: 16px/1.5 Georgia, "Times New Roman", serif; }
body { min-height: 100vh; display: flex; flex-direction: column; }
header { text-align: center; padding: 18px 12px 0; }
h1 { margin: 0; font-weight: normal; letter-spacing: .35em; font-size: 1.3rem; color: var(--oro); }
#stato { margin: 4px 0 0; color: var(--tenue); font-size: .9rem; }
main { flex: 1; display: flex; justify-content: center; padding: 8px 6px 24px; }
#albero { width: 100%; max-width: 520px; height: auto; overflow: visible; }

/* Albero */
.tronco { fill: var(--legno); }
.ramo { fill: none; stroke: var(--grigio); stroke-width: 3; stroke-linecap: round; opacity: .7; }
.ramo.verde { stroke: var(--verde); }
.ramo.oro { stroke: var(--oro); }
.ramo.oro-arrugginito { stroke: var(--ruggine); }
.ramo.verde.spento { stroke: var(--verde-spento); }
.nodo { cursor: pointer; outline: none; }
.nodo .disco { fill: var(--carta); stroke: var(--grigio); stroke-width: 2.5; transition: transform .2s; }
.nodo.verde .disco { stroke: var(--verde); fill: #15281d; }
.nodo.oro .disco { stroke: var(--oro); fill: #2e2612; }
.nodo.oro-arrugginito .disco { stroke: var(--ruggine); fill: #2a1f15; }
.nodo.verde.spento .disco { stroke: var(--verde-spento); fill: #131c16; }
.nodo.tentabile .disco { stroke-dasharray: 5 4; animation: respiro 3s ease-in-out infinite; }
.nodo:focus-visible .disco, .nodo:hover .disco { stroke-width: 4; }
.runa { text-anchor: middle; font-size: 17px; fill: var(--tenue); pointer-events: none; }
.nodo.verde .runa { fill: var(--verde); }
.nodo.oro .runa { fill: var(--oro); }
.nodo.oro-arrugginito .runa { fill: var(--ruggine); }
.nodo.verde.spento .runa { fill: var(--verde-spento); }
.etichetta { text-anchor: middle; font-size: 11.5px; fill: var(--testo); pointer-events: none;
             paint-order: stroke; stroke: var(--fondo); stroke-width: 4px; }
.nodo.grigio .etichetta { fill: var(--tenue); }
.nebbia ellipse { fill: #9fb0c3; opacity: .16; filter: url(#sfuma); animation: deriva 7s ease-in-out infinite; }
.nebbia.diradando ellipse { animation: deriva 7s ease-in-out infinite, dirada 2.4s ease-in-out infinite; }
@keyframes dirada { 50% { opacity: .05; } }
@keyframes respiro { 50% { stroke: #8aa0b8; } }
@keyframes deriva { 50% { transform: translateX(8px); opacity: .24; } }

/* Sblocco: il ramo si accende con un'onda dorata, i figli escono dalla nebbia */
.nodo.sblocco .disco { animation: accendi 1.4s ease-out; }
.onda { fill: none; stroke: var(--oro); stroke-width: 3; animation: onda 1.6s ease-out forwards;
        transform-box: fill-box; transform-origin: center; }
.nasce { animation: nasce 1.2s ease-out .6s backwards; }
.ramo.nasce { stroke-dasharray: 400; stroke-dashoffset: 400; animation: cresce 1.2s ease-out .4s forwards; }
@keyframes accendi { 0% { fill: var(--oro); } 100% {} }
@keyframes onda { from { transform: scale(1); opacity: 1; } to { transform: scale(4); opacity: 0; } }
@keyframes nasce { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes cresce { to { stroke-dashoffset: 0; } }

/* Pannello del ramo */
#pannello { position: fixed; left: 0; right: 0; bottom: 0; max-height: 72vh; overflow-y: auto;
            margin: 0 auto; max-width: 640px; padding: 20px 20px calc(24px + env(safe-area-inset-bottom));
            background: var(--carta); border: 1px solid var(--bordo); border-bottom: 0;
            border-radius: 18px 18px 0 0; box-shadow: 0 -8px 30px #0008;
            transform: translateY(105%); transition: transform .3s ease; }
#pannello.aperto { transform: none; }
#pannello h2, .carta h2 { margin: 2px 0 8px; font-weight: normal; font-size: 1.5rem; }
#pannello h3, .carta h3 { margin: 18px 0 4px; font-size: .95rem; color: var(--oro); font-weight: normal;
                          letter-spacing: .05em; }
#pannello p { margin: 6px 0; }
#pannello ul { margin: 4px 0; padding-left: 20px; }
.sopratitolo { margin: 0; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); }
.sopratitolo.verde { color: var(--verde); }
.sopratitolo.oro { color: var(--oro); }
#pannello .sottotitolo { margin: 12px 0 2px; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
                         color: var(--tenue); }
#pannello a.fonte { color: var(--verde); }
.da-ripassare { color: var(--ruggine); }
.velato { color: var(--tenue); font-style: italic; }
.chiudi { float: right; background: none; border: 0; color: var(--tenue); font-size: 1.8rem; line-height: 1;
          cursor: pointer; padding: 0 4px; }

button.primario, button.secondario { display: block; width: 100%; margin-top: 18px; padding: 14px;
  border-radius: 12px; font: inherit; font-size: 1rem; cursor: pointer; }
button.primario { background: var(--oro); color: #1d1608; border: 0; }
button.secondario { background: none; color: var(--tenue); border: 1px solid var(--bordo); margin-top: 10px; }

/* Prova */
#prova { position: fixed; inset: 0; overflow-y: auto; background: var(--fondo); padding: 20px 14px 40px; z-index: 5; }
.carta { max-width: 560px; margin: 0 auto; }
.sacra { border: 1px solid var(--oro); color: var(--oro); border-radius: 12px; padding: 12px 14px; margin: 16px 0; }
.regole { color: var(--tenue); padding-left: 20px; }
.testata-domanda { display: flex; justify-content: space-between; color: var(--tenue); font-size: .9rem; }
#secondi { font-variant-numeric: tabular-nums; color: var(--testo); }
.tempo { height: 6px; background: var(--bordo); border-radius: 3px; margin: 8px 0 18px; overflow: hidden; }
#barra { height: 100%; width: 100%; background: var(--verde); transition: width .2s linear, background .5s; }
#barra.urgente { background: var(--errore); }
.carta h3 { color: var(--testo); font-size: 1.15rem; letter-spacing: 0; }
.scelte { display: grid; gap: 10px; margin-top: 16px; }
.scelta { text-align: left; padding: 14px; border-radius: 12px; border: 1px solid var(--bordo);
          background: var(--carta); color: var(--testo); font: inherit; cursor: pointer; }
.scelta:hover:not(:disabled) { border-color: var(--oro); }
.scelta-fatta { border-color: var(--oro); background: #2e2612; }
.vinto { color: var(--oro); }
.perso { color: var(--errore); }
.riviste { list-style: none; padding: 0; }
.riviste li { border-top: 1px solid var(--bordo); padding: 10px 0; }
.riviste p { margin: 4px 0; }
.domanda-rivista { font-weight: bold; }
.tua { color: var(--errore); }
.giusta { color: var(--verde); }
.spiegazione { color: var(--tenue); font-size: .95rem; }

@media (min-width: 700px) { h1 { font-size: 1.6rem; } }

/* Scheda personaggio */
.cambia-vista { margin-top: 8px; background: none; color: var(--oro);
                border: 1px solid var(--bordo); border-radius: 18px; padding: 5px 12px; font: inherit;
                font-size: .85rem; cursor: pointer; }
main[hidden], #vista-scheda[hidden] { display: none; }
header nav { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
#avviso { margin: 8px auto 0; max-width: 520px; padding: 8px 12px; border: 1px solid var(--bordo);
          border-radius: 12px; font-size: .9rem; color: var(--testo); cursor: pointer; }
#avviso.errore { border-color: var(--errore); }
#avviso[hidden], .errore[hidden] { display: none; }

/* Modulo del ramo nuovo */
.modulo label { display: block; margin: 14px 0 4px; font-size: .95rem; }
.modulo input { box-sizing: border-box; width: 100%; padding: 11px 12px; border-radius: 10px;
                border: 1px solid var(--bordo); background: var(--fondo); color: var(--testo);
                font: inherit; font-size: 16px; }  /* 16px: iOS non zooma sul campo */
.modulo input:focus { outline: none; border-color: var(--oro); }
.errore { color: var(--errore); }
button.primario:disabled { opacity: .6; cursor: wait; }
#vista-scheda { display: block; padding: 8px 16px 40px; }
.titolo-pg { margin: 0 0 16px; color: var(--oro); font-style: italic; }
.contatori { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.contatori div { background: var(--carta); border: 1px solid var(--bordo); border-radius: 12px; padding: 10px 6px;
                 text-align: center; }
.contatori b { display: block; font-size: 1.5rem; font-weight: normal; color: var(--testo); }
.contatori span { font-size: .78rem; color: var(--tenue); }
.grande-ramo { border-top: 1px solid var(--bordo); padding: 6px 0 10px; }
.testata-ramo { display: flex; justify-content: space-between; align-items: center; }
.scheda .testata-ramo h3 { margin: 10px 0; color: var(--oro); }
.grande-ramo.grigio h3 { color: var(--tenue); }
.rami-scheda { list-style: none; padding: 0; margin: 0; }
.rami-scheda li { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; padding: 6px 0;
                  column-gap: 10px; }
.nome-ramo { grid-column: 1; }
.grado { grid-column: 1; font-size: .8rem; color: var(--tenue); }
.rami-scheda .tacche { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.tacche { display: inline-flex; gap: 4px; }
.tacche i { width: 9px; height: 16px; border: 1px solid var(--grigio); transform: skewX(-12deg); }
.tacche.verde i.piena { background: var(--verde); border-color: var(--verde); }
.tacche.oro i.piena { background: var(--oro); border-color: var(--oro); }
.tacche.oro-arrugginito i.piena { background: var(--ruggine); border-color: var(--ruggine); }
.tacche.verde.spento i.piena { background: var(--verde-spento); border-color: var(--verde-spento); }
.rami-scheda li.profondita-1 { padding-left: 14px; }
.rami-scheda li.profondita-2 { padding-left: 28px; }
.rami-scheda li.profondita-3 { padding-left: 42px; }
.rami-scheda li[class*="profondita-"]:not(.profondita-0) .nome-ramo { font-size: .95rem; }
.tuo { color: var(--oro); }

/* Prova di livello */
.modulo textarea { box-sizing: border-box; width: 100%; padding: 11px 12px; border-radius: 10px;
                   border: 1px solid var(--bordo); background: var(--fondo); color: var(--testo);
                   font: inherit; font-size: 16px; line-height: 1.4; resize: vertical; }
.modulo textarea:focus { outline: none; border-color: var(--oro); }
#modulo-sfida label { margin-top: 20px; line-height: 1.4; color: var(--testo); }
.numero { display: inline-block; min-width: 1.6em; color: var(--oro); font-weight: bold; }
.voto { display: inline-block; min-width: 1.8em; margin-right: 8px; padding: 1px 6px; border-radius: 8px;
        text-align: center; font-variant-numeric: tabular-nums; }
.voto.buono { background: #17301f; color: var(--verde); }
.voto.basso { background: #3a1818; color: var(--errore); }
.giudizio { border-left: 3px solid var(--oro); padding-left: 12px; font-style: italic; }
.riviste summary { color: var(--tenue); font-size: .9rem; cursor: pointer; margin-top: 4px; }
.pulsa { animation: pulsa 2s ease-in-out infinite; }
@keyframes pulsa { 50% { opacity: .45; } }