/* NetPractice Infini - habillage responsive.
   Complete css/netpractice.css sans le modifier : le plateau reste dessine en
   positionnement absolu (show.js), on l'englobe simplement dans un conteneur
   zoomable, et on compacte la HUD sur petit ecran. */

/* #root_id devient le referentiel des elements absolus du plateau et porte le
   zoom. position:relative garantit le referentiel meme sans transform. */
#root_id {
    position: relative;
    transform-origin: 0 0;
}

/* Recoit la taille du plateau une fois zoome : le transform de #root_id ne
   compte pas dans le flux, ce cadre lui rend sa place pour que la PAGE defile.
   Le defilement reste au niveau de la page (et non ici) : la barre se pose
   alors au bas de la fenetre, atteignable, alors qu'une barre interne serait
   au bas d'un bloc de plusieurs milliers de pixels, donc hors ecran. */
#board_wrap {
    position: relative;
    overflow: hidden;
}

/* barre horizontale de page bien visible : sans style explicite, elle est
   fine et pale, et rien ne signale qu'il reste du plateau a droite */
/* cible html ET body : la barre du viewport est portee par l'element racine,
   la styler seulement sur body la laisse au gris par defaut */
html::-webkit-scrollbar, body::-webkit-scrollbar { height: 14px; width: 14px; }
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: #E4E4E4; }
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
    background: #007777;
    border-radius: 7px;
    border: 3px solid #E4E4E4;
}
html, body { scrollbar-color: #007777 #E4E4E4; }

/* netpractice.css fige .itf_div a height:70px : une hauteur calibree pour un
   seul navigateur. Partout ou les champs de saisie sont un peu plus hauts
   (Safari/iOS, Firefox), la ligne "Mask" sort du cadre gris et se retrouve sur
   le fond blanc. On rend donc le cadre extensible... */
#root_id .itf_div {
    height: auto;
    min-height: 70px;
    padding-bottom: 2px;
}

/* ...et on normalise les champs pour que le rendu ne depende plus des styles
   par defaut du navigateur (c'est ce qui faisait deborder le masque). */
#root_id input[type=text] {
    font-size: 12px;
    line-height: 16px;
    padding: 1px 3px;
    border: 1px solid #999;
    border-radius: 2px;
    box-sizing: border-box;
    height: auto;
    background: #FFF;
}

#root_id input[type=text]:disabled {
    background: #E4E4E4;
    color: #333;
    -webkit-text-fill-color: #333;   /* iOS grise le texte des champs inactifs */
    opacity: 1;
}

/* ---- barre du haut ---- */

.goals_div h2 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
}

.goals_div .hud {
    font-size: 60%;
    font-style: normal;
    font-family: monospace;
}

.goals_div input[type=button] {
    padding: 4px 8px;
    margin: 2px 1px;
    border-radius: 4px;
    border: 1px solid #007777;
    background: #E8FFFF;
    cursor: pointer;
}

/* Une couleur par action : sur mobile la barre est dense et tous les boutons
   se ressemblaient. Fonds pales + bordure assortie, le texte reste noir donc
   le contraste tient. Les touches de zoom gardent le style neutre. */
.goals_div input.b_check  { background: #DDF5DD; border-color: #2E7D32; }
.goals_div input.b_hint   { background: #FFF4CC; border-color: #B8860B; }
.goals_div input.b_sol    { background: #FFE0E0; border-color: #B03030; }
.goals_div input.b_replay { background: #EAE2FA; border-color: #6A4CA8; }
.goals_div input.b_skip   { background: #EDEDED; border-color: #666666; }
.goals_div input.b_diff   { background: #DDEEFF; border-color: #1565C0; }

.goals_div input.win { background: #FFDD55; font-weight: bold; }
.goals_div .won { margin-top: 5px; font-weight: bold; }

/* objectifs en version courte (petits ecrans) */
.goals_div .goal { line-height: 1.5; }
.goals_div .g_ok { color: #003D00; }
.goals_div .g_ko { color: #6B0000; }

/* barre de zoom : dans le flux, jamais par-dessus le plateau */
.zoom_bar { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; }
.zoom_bar #zoom_lvl { font-family: monospace; font-size: 90%; min-width: 42px; text-align: center; }

/* ---- fenetre de logs ---- */

.logs_div { height: 240px; width: 300px; }

/* ---- mobile / tablette ----
   Le plateau ne peut pas etre reflowe (coordonnees absolues en pixels), il est
   donc mis a l'echelle par JS. Ici on ne traite que le chrome autour. */
@media (max-width: 900px) {
    .goals_div {
	font-size: 13px;
	padding: 4px;
	border-width: 3px;
    }

    .goals_div h2 {
	font-size: 15px;
	margin: 2px;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
    }

    .goals_div .hud { font-size: 11px; }

    /* cibles tactiles confortables, sans devorer l'ecran */
    .goals_div input[type=button] {
	padding: 6px 8px;
	font-size: 12px;
	min-height: 34px;
    }

    .goals_div .goal { font-size: 12px; line-height: 1.45; }

    /* garde-fou : la barre ne prend jamais plus du tiers de l'ecran */
    .goals_div { max-height: 38vh; overflow-y: auto; }

    /* les logs prennent tout le bas et ne s'ouvrent qu'a la demande */
    .logs_div {
	display: none;
	width: 100%;
	height: 45vh;
	font-size: 11px;
    }
    body.logs_open .logs_div { display: block; }
}

/* le plateau est mis a l'echelle : sur mobile on ne veut pas, en plus, le
   defilement horizontal de la page entiere */
body { overflow-x: auto; }

/* ---------------- ecran de choix du palier de depart ---------------- */

/* plein ecran fixe et opaque : rien n'est genere tant que le palier n'est pas
   choisi, l'overlay couvre donc un plateau vide */
#start_screen {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;
}

.start_box {
    width: 100%;
    max-width: 420px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}

.start_box h1 { font-size: 22px; margin: 0 0 4px; }

.start_hint { font-size: 13px; color: #666; margin: 8px 0 16px; }

.start_tier {
    display: block;
    width: 100%;
    margin: 8px 0;
    padding: 12px 14px;
    text-align: left;
    background: #F4F4F4;
    border: 1px solid #CCC;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
}

.start_tier:hover { background: #E8E8E8; }

/* le dernier palier choisi ressort, pour enchainer sans lire les trois */
.start_tier.start_last { border-color: #4A90D9; background: #EAF2FB; }

.start_name { display: block; font-size: 16px; font-weight: bold; }
.start_sub  { display: block; font-size: 12px; color: #666; margin-top: 2px; }