:root {
  --bg:#0a0a1a; --panel:#101033ee; --panel-2:#17174a; --border:#4a4a8a; --text:#e6e6f0;
  --muted:#a8a8c4; --accent:#7c4dff; --gold:#ffd54f; --normal:#1b1b4d; --question:#b8860b;
  --advance:#1b5e20; --back:#5a1414; --start:#1565c0; --goal:#e6a817; --theme-accent-2:#4caf50;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",Arial,sans-serif;color:var(--text);min-height:100vh;background:radial-gradient(circle at top,#151545 0%,#0a0a1a 60%);display:flex;justify-content:center;align-items:center}
#app{width:100%;max-width:1180px;padding:16px}
#pantalla-inicial{display:flex;flex-direction:column;align-items:center;gap:22px;padding:36px 24px;background:var(--panel);border:2px solid #7c4dff55;border-radius:22px;box-shadow:0 0 40px #00000055;text-align:center}
.hero-emoji{font-size:4rem} #pantalla-inicial h1{margin:0;color:var(--gold);letter-spacing:2px;font-size:2.5rem}.subtitol{margin:0;color:#d7d7f5;max-width:680px;line-height:1.6;font-size:1.1rem}
.config-box{width:min(560px,100%);background:#12123b;border:1px solid #373782;border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:12px}
.config-box label{text-align:left;color:#ddd;font-weight:700} #selector-tema{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #5555aa;background:#1b1b4d;color:white;font-size:1rem}
.preview-card{display:flex;gap:14px;align-items:center;text-align:left;background:#19194f;border:1px solid #35357a;border-radius:14px;padding:14px}.preview-mini{font-size:2rem}.preview-mini-title{font-weight:800;color:var(--gold);margin-bottom:4px}.preview-mini-text{color:var(--muted);line-height:1.4;font-size:.95rem}
.pregunta-jugadors{margin:0;color:white;font-size:1.05rem}.selector-jugadors{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}.btn-jugadors{border:2px solid var(--accent);background:#1d1d52;color:white;border-radius:999px;padding:15px 28px;cursor:pointer;font-weight:800;min-width:130px;transition:.25s ease}.btn-jugadors:hover{background:var(--accent);transform:translateY(-2px)}.btn-jugadors .num{display:block;font-size:1.5rem;line-height:1.1}.nota{color:#9b9bc9;font-size:.9rem}
#pantalla-joc{display:none;gap:20px;align-items:flex-start;justify-content:center;flex-wrap:wrap}
#taulell-container{background:var(--panel);border:2px solid var(--border);border-radius:18px;padding:12px;box-shadow:0 0 30px #00000066}#taulell{width:560px;height:560px;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);gap:3px}
.cell,.cell-inner{border-radius:8px;position:relative;overflow:hidden}.cell{border:1px solid #3a3a7a;background:var(--normal);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 6px #00000055}.cell.start{background:var(--start)}.cell.goal{background:var(--goal);color:#1f1f1f;font-weight:900}.cell.question{background:var(--question)}.cell.advance{background:var(--advance)}.cell.back{background:var(--back)}.cell-inner{background:#0f0f2e;border:1px dashed #262666;display:flex;align-items:center;justify-content:center;opacity:.7;font-size:1.1rem}
.cell-number{position:absolute;top:3px;left:5px;font-size:.62rem;opacity:.85;font-weight:800;background:rgba(0,0,0,.18);padding:1px 4px;border-radius:999px}.cell-icon{font-size:1.35rem;text-shadow:0 1px 3px rgba(0,0,0,.35)}.tokens{position:absolute;inset:0;pointer-events:none}
.tokens {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    place-items: center;
    padding: 4px;
    gap: 2px;
    pointer-events: none;
}

.token {
    position: static;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 5px #00000099;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    line-height: 1;
    overflow: hidden;
}
@media (max-width: 620px) {
    .token {
        width: 16px;
        height: 16px;
        min-width: 16px;
        min-height: 16px;
        font-size: 0.62rem;
    }
}


#panell{min-width:280px;max-width:330px;background:var(--panel);border:2px solid var(--border);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:16px;box-shadow:0 0 30px #00000066}#panell h2{margin:0;text-align:center;color:var(--gold);letter-spacing:1px}.game-theme-line{margin:-8px 0 0;text-align:center;color:#d3d3ee}
#info-torn{background:var(--panel-2);border:1px solid #35357a;border-radius:12px;padding:14px;text-align:center}.torn-label{color:var(--muted);font-size:.86rem}.torn-jugador{margin-top:6px;font-size:1.15rem;font-weight:800}.torn-color{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid white;vertical-align:middle;margin-right:6px}
#dau-container{display:flex;flex-direction:column;align-items:center;gap:10px}#dau{width:90px;height:90px;background:#fffef7;border-radius:14px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:8px;box-shadow:0 6px 20px #00000066;cursor:pointer}#dau.rolling{animation:rollDice .5s ease-out}@keyframes rollDice{0%{transform:rotate(0deg) scale(1)}25%{transform:rotate(90deg) scale(1.12)}50%{transform:rotate(200deg) scale(1.03)}75%{transform:rotate(320deg) scale(1.08)}100%{transform:rotate(360deg) scale(1)}}.pip{width:18px;height:18px;background:#1e1e1e;border-radius:50%;align-self:center;justify-self:center;opacity:0}
#btn-tirar,.btn-reiniciar,.btn-modal{border:none;border-radius:999px;cursor:pointer;font-weight:800;transition:.2s ease}#btn-tirar{background:var(--accent);color:white;padding:14px 28px;box-shadow:0 4px 20px #7c4dff44}#btn-tirar:hover{transform:translateY(-2px)}#btn-tirar:disabled{background:#555;cursor:not-allowed;box-shadow:none;transform:none}
#registre{background:#111133;border:1px solid #30306a;border-radius:12px;padding:12px;max-height:180px;overflow-y:auto;font-size:.86rem;line-height:1.5}.entry{padding:4px 0;border-bottom:1px solid #22224d}.entry:last-child{border-bottom:none}.entry-muted{color:#9999bb}.btn-reiniciar{padding:11px 16px;background:transparent;color:#ddd;border:2px solid #7373a8}.btn-reiniciar:hover{background:#2a2a57}
#modal-overlay{position:fixed;inset:0;background:#000000cc;display:none;align-items:center;justify-content:center;z-index:999;padding:18px}#modal-overlay.active{display:flex}#modal{width:min(560px,100%);background:#17174a;border:2px solid #ffb300;border-radius:18px;padding:28px;text-align:center;box-shadow:0 0 40px #00000077}.emoji-modal{font-size:2.8rem}#modal-title{color:#ffcc4d;margin:10px 0}.pregunta-text{line-height:1.6;font-size:1.06rem}.opcions{display:flex;flex-direction:column;gap:10px;margin-top:18px}.btn-opcio{border:2px solid #56569e;background:#21215b;color:white;border-radius:14px;padding:12px 14px;text-align:left;cursor:pointer;font-size:1rem}.btn-opcio:hover{border-color:#ffb300}.btn-opcio.correct{background:#1b5e20!important;border-color:#4caf50!important}.btn-opcio.wrong{background:#7b1e1e!important;border-color:#ef5350!important}.resultat-text{min-height:24px;margin-top:14px;font-weight:800}.btn-modal{background:#ffb300;color:#1f1f1f;padding:12px 18px;margin-top:10px}
@media (max-width:900px){#pantalla-joc{flex-direction:column;align-items:center}#panell{width:min(96vw,560px);max-width:none}} @media (max-width:620px){#taulell{width:92vw;height:92vw}.cell-icon{font-size:1.05rem}.token{width:12px;height:12px}}