/* Survival Island — interface reprise de MainWindow.xaml (positions, tailles et couleurs d'origine) */
.si-stage {
    --si-brun: #6d5445;
    position: relative;
    width: 100%;
    height: min(80vh, 820px);
    min-height: 600px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #c9c9c9;
    border-radius: 6px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .25);
    user-select: none;
    -webkit-user-select: none;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 12px;
    color: #000;
    line-height: 1.3;
}
.si-stage [hidden] { display: none !important; }
.si-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
.si-stencil { font-family: Stencil, 'Stencil Std', 'Arial Black', Impact, sans-serif; text-transform: uppercase; letter-spacing: .02em; }
.si-chargement { position: absolute; inset: 0; display: grid; place-items: center; font-size: 16px; color: var(--si-brun); }

/* Menu (barre blanche de 20 px) */
.si-menubar { position: absolute; top: 0; left: 0; right: 0; height: 20px; background: #fff; display: flex; z-index: 30; border-bottom: 1px solid #e5e5e5; }
.si-mb { font: inherit; border: 0; background: #fff; padding: 0 8px; height: 20px; cursor: default; color: #000; }
.si-mb:hover, .si-mb[aria-expanded="true"] { background: #e5f1fb; outline: 1px solid #cce4f7; }
.si-menuitem { position: relative; }
.si-dropdown { position: absolute; top: 20px; left: 0; min-width: 170px; background: #f2f2f2; border: 1px solid #ccc; box-shadow: 2px 2px 3px rgba(0,0,0,.25); padding: 2px 0; display: grid; }
.si-dropdown button { font: inherit; text-align: left; border: 0; background: none; padding: 4px 24px; cursor: default; color: #000; }
.si-dropdown button:hover { background: #91c9f7; }

/* HUD */
.si-statut { position: absolute; top: 39px; left: 50%; transform: translateX(-50%); font-size: 16px; color: var(--si-brun); white-space: nowrap; z-index: 5; }
.si-vagueinfo { position: absolute; top: 39px; left: 25px; color: var(--si-brun); z-index: 5; }
.si-vagueinfo div { margin-bottom: 5px; }
.si-joueurstats { position: absolute; top: 39px; right: 25px; color: var(--si-brun); z-index: 5; }
.si-hudjoueur { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: grid; justify-items: center; z-index: 5; }
.si-pb { width: 300px; height: 20px; background: #444; border: 1px solid #bcbcbc; }
.si-pb div { height: 100%; width: 100%; }
.si-pb-ile div { background: #9c220e; }
.si-pb-joueur { margin-top: 25px; }
.si-pb-joueur div { background: #59a214; }
.si-pbtxt { font-weight: 700; }
.si-gridamelio { position: absolute; right: 50px; bottom: 32px; z-index: 6; }
.si-btnamelio { width: 330px; height: 50px; border-radius: 10px; border: 1px solid var(--si-brun); background: var(--si-brun); color: #fff; font: inherit; font-size: 18px; cursor: default; }
.si-ellipse { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: red; right: 48px; bottom: 15px; pointer-events: none; }
.si-amelio { position: absolute; right: 50px; bottom: 87px; width: 330px; height: 350px; background: rgba(0,0,0,.2); z-index: 6; }
.si-amelio-tete { background: var(--si-brun); height: 50px; color: #fff; text-align: center; }
.si-amelio-tete > div:first-child { font-size: 22px; line-height: 1.2; }
.si-amelio-niv { text-align: left; padding-left: 125px; }
.si-amelio-xp { height: 60px; display: flex; align-items: center; }
.si-amelio-xpcol { width: 200px; display: grid; justify-items: center; white-space: nowrap; font-size: 11px; overflow: hidden; }
.si-pb-xp { width: 150px; height: 20px; margin-top: 5px; background: #e6e6e6; }
.si-pb-xp div { background: #06b025; }
.si-small { margin-top: 5px; font-size: 12px; }
.si-tiny { margin-left: 20px; font-size: 9px; }
.si-pastille { margin-left: 10px; width: 50px; height: 50px; border-radius: 50%; background: #000; color: #fff; font-weight: 700; font-size: 14px; display: grid; place-items: center; }
.si-amelio-ligne { height: 60px; display: grid; grid-template-columns: auto 1fr 50px; align-items: center; padding: 0 22px 0 18px; font-size: 20px; white-space: nowrap; }
.si-amelio-ligne b { padding-left: 4px; }
.si-amelio-ligne b { font-weight: 400; }
.si-rond { width: 50px; height: 50px; border-radius: 50%; border: 0; background: rgba(0,0,0,.1); font: inherit; font-size: 12px; cursor: default; color: #000; }
.si-rond:hover { background: rgba(0,0,0,.18); }

/* Écrans (menuAccueil, spParametres, spMenuFin) */
.si-ecran { position: absolute; inset: 20px 0 0 0; display: grid; place-items: center; z-index: 10; overflow: auto; }
.si-ecran-pause { background: rgba(0,0,0,.31); }
.si-pile { display: grid; width: 370px; }
.si-logo { width: 370px; height: 371px; margin-bottom: 30px; }
.si-ecran-pause .si-logo { width: 260px; height: 261px; justify-self: center; }
.si-pause { font-size: 36px; color: #fff; text-align: center; margin-bottom: 50px; }
.si-bouton { height: 40px; background: var(--si-brun); border: 1px solid var(--si-brun); color: #fff; font: inherit; font-size: 18px; cursor: default; }
.si-bouton.si-stencil { font-family: Stencil, 'Stencil Std', 'Arial Black', Impact, sans-serif; }
.si-bouton:hover { background: #7d6252; }
.si-panneau { width: 370px; background: rgba(0,0,0,.2); display: grid; }
.si-entete { height: 70px; background: var(--si-brun); color: #fff; font-size: 36px; display: grid; place-items: center; }
.si-entete-fin { height: 50px; margin-bottom: 20px; }
.si-fin-ligne { height: 50px; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; padding-left: 25px; font-size: 18px; color: #3c2c23; }
.si-fin-q { font-size: 18px; color: #3c2c23; text-align: center; margin-bottom: 10px; }
.si-bouton-petit { width: 100px; justify-self: center; margin-bottom: 10px; }

/* menuClasse : Grid gris, opacité 0.9 */
.si-menuclasse { position: absolute; inset: 0; background: rgba(128,128,128,.9); z-index: 20; display: grid; grid-template-rows: auto 1fr; justify-items: center; }
.si-classe-titre { margin-top: 50px; font-size: 24px; font-weight: 700; color: #fff; }
.si-classe-images, .si-classe-boutons { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; }
.si-classe-images { transform: translate(-50%, calc(-50% - 85px)); gap: 40px; }
.si-classe-images img, .si-classe-vide { width: 100px; height: 100px; object-fit: fill; }
.si-classe-boutons { transform: translate(-50%, -50%); gap: 40px; }
.si-wpf { font: inherit; background: #dddddd; border: 1px solid #707070; color: #000; cursor: default; padding: 0 10px; }
.si-wpf:hover { background: #bee6fd; border-color: #3c7fb1; }
.si-classe-boutons .si-wpf { width: 100px; height: 50px; }

.si-reapparition { position: absolute; inset: 0; background: rgba(0,0,0,.2); display: grid; place-items: center; z-index: 15; pointer-events: none; }
.si-reapparition span { font-size: 28px; color: var(--si-brun); margin-top: 39px; text-align: center; padding: 0 1rem; }

/* Fenêtres de dialogue Windows (ShowDialog) */
.si-modal { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(0,0,0,.08); }
.si-win { max-width: calc(100% - 20px); background: #fff; border: 1px solid #7a7a7a; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.si-win-titre { height: 30px; display: flex; align-items: center; justify-content: space-between; padding-left: 10px; border-bottom: 1px solid #eee; }
.si-win-x { width: 46px; height: 30px; border: 0; background: none; font-size: 13px; cursor: default; color: #000; }
.si-win-x:hover { background: #e81123; color: #fff; }
.si-win-corps { padding: 18px 16px 20px; display: grid; justify-items: center; gap: 10px; }
.si-audio { display: grid; grid-template-columns: auto auto; gap: 18px 14px; align-items: center; }
.si-audio label { display: flex; align-items: center; gap: 10px; }
.si-audio input { width: 130px; }
.si-wpf-mini { height: 22px; }
.si-wpf-valider { width: 100px; height: 22px; padding: 0; }
.si-choixbateau { display: flex; align-items: center; gap: 30px; height: 215px; }
.si-fleche { width: 20px; height: 30px; padding: 0; }
.si-msg { margin: 0 0 6px; }
.si-msg-boutons { display: flex; gap: 8px; justify-self: end; }
.si-msg-boutons .si-wpf { width: 75px; height: 24px; }

.si-stage button:focus-visible, .si-stage input:focus-visible { outline: 2px dotted #000; outline-offset: 1px; }