/* xdt-sandsculpt/style.css — styles spécifiques sculptures de sable (shared.css chargé en premier) */

:root {
    --sand: #e8c99b;
    --sand-dark: #c9a26b;
    --sand-light: #f3ddb4;
}

.app-container {
    max-width:1000px; margin:0 auto; padding:1.5rem 1.5rem 2rem;
    display:flex; flex-direction:column; gap:1rem;
}

/* Vue d'ensemble : blocs resserrés pour maximiser les chances de tenir sans
   défilement (scopé à xdt-sandsculpt, ne touche pas shared.css). */
.level-section.compact{ padding:.7rem 1.5rem; gap:.4rem; }
.level-section.compact .level-hint{ display:none; }
.wizard-card.compact{ padding:1rem 1.2rem; min-height:0; }
.wizard-card.compact .wizard-title{ margin-bottom:.2rem; font-size:1.1rem; }
.wizard-card.compact .wizard-subtitle{ margin-bottom:.6rem; font-size:.8rem; }

footer{ margin-top:1rem; }

/* ---------- Icônes de formes de sculptures ---------- */
.shape-icon{ width:90px; height:90px; display:flex; align-items:center; justify-content:center; position:relative; }
.shape-icon.small{ width:64px; height:64px; }

.shape-terrasses .tier{ background:linear-gradient(160deg, var(--sand-light), var(--sand-dark)); border-radius:4px; }
.shape-terrasses{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:3px; }
.shape-terrasses .tier1{ width:80%; height:22%; }
.shape-terrasses .tier2{ width:60%; height:22%; }
.shape-terrasses .tier3{ width:38%; height:22%; }

.shape-cylindrique{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; }
.shape-cylindrique .cyl-top{
    width:70%; height:16px; border-radius:50%;
    background:linear-gradient(160deg, var(--sand-light), var(--sand));
    margin-bottom:-8px; z-index:1;
}
.shape-cylindrique .cyl-body{
    width:70%; height:65%;
    background:linear-gradient(180deg, var(--sand), var(--sand-dark));
    border-radius:0 0 10px 10px;
}

.shape-prismatique{ display:flex; align-items:flex-end; justify-content:center; }
.shape-prismatique .prism{
    width:85%; height:70%;
    background:linear-gradient(160deg, var(--sand-light), var(--sand-dark));
    clip-path: polygon(18% 100%, 82% 100%, 66% 0%, 34% 0%);
}

.shape-icon.grand .tier1{ height:26%; }
.shape-icon.grand .tier2{ height:26%; }
.shape-icon.grand .tier3{ height:26%; }
.shape-icon.grand{ transform:scale(1.12); }
.shape-icon.petit{ transform:scale(.88); }

/* ---------- Vue d'ensemble : format classement ----------
   Une colonne par forme, disposées en grille à largeur FIXE (3 colonnes
   toujours, jamais de retour à la ligne d'une colonne isolée comme ça
   arrivait avec l'ancien flex-wrap) ; chaque sculpture est une ligne
   compacte façon leaderboard, plus lisible qu'un organigramme qui grandit
   vite en hauteur avec beaucoup d'entrées. */
.lb-summary{
    display:flex; align-items:center; justify-content:center; gap:.4rem;
    font-family:'Outfit', sans-serif; font-weight:700; color:var(--text-highlight);
    margin-bottom:.6rem;
}
.lb-summary i{ color:var(--gold); }

.lb-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:.8rem;
    align-items:start;
}
@media (max-width: 720px){
    .lb-grid{ grid-template-columns:1fr; }
}

.lb-col{
    background:rgba(255,255,255,.03); border:1px solid var(--border-color);
    border-radius:12px; padding:.5rem; min-width:0;
}
.lb-col-title{
    font-family:'Outfit', sans-serif; font-weight:700; font-size:.85rem;
    text-align:center; color:var(--text-highlight);
    padding-bottom:.4rem; margin-bottom:.4rem; border-bottom:1px solid var(--border-color);
}
.lb-rows{ display:flex; flex-direction:column; gap:.25rem; }

.lb-row{
    display:flex; align-items:center; gap:.4rem;
    padding:.3rem .5rem; border-radius:8px;
    background:var(--bg-darker, rgba(0,0,0,.15));
}
.lb-row:nth-child(odd){ background:rgba(255,255,255,.03); }
.lb-emoji{ font-size:.95rem; flex:none; }
.lb-name{
    font-size:.78rem; font-weight:600; color:var(--text-main);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 auto; min-width:0;
}
.lb-taille{
    font-size:.65rem; font-weight:600; color:var(--text-muted);
    background:rgba(255,255,255,.06); border-radius:6px; padding:.1rem .4rem; flex:none;
}
.lb-level{
    font-size:.68rem; color:var(--secondary); font-weight:700; white-space:nowrap; flex:none;
}