/* Guess the Number, solo: the layout of ../jeu.css with you alone at the bottom (no AI character, Jamel's request). Above you:
   the AI's answer, your last questions, then the question field, or once answered, the number field. */
/* One player only, 1.4 times the size first chosen (Jamel tried 1.75, then asked for smaller), but never taller than the room
   left under the header, the answer, 5 previous questions and the field (64 + 370 px): on a short phone he gets a little smaller instead of being cut by the
   bottom edge. dvh follows the height really visible on phones (address bar shown or not); vh is the fallback. */
.gtn.solo,.gtn.solo[data-phase]{
  height:100%;height:100dvh; /* the page ends where the visible screen ends */
  --t:min(calc(1.4 * clamp(110px,min(48vw,calc((100vh - 380px) / 1.15)),250px)),calc((100vh - 434px) / 1.15));
  --t:min(calc(1.4 * clamp(110px,min(48vw,calc((100dvh - 380px) / 1.15)),250px)),calc((100dvh - 434px) / 1.15));
}
.solo .table{padding-top:64px}
.solo .centre{flex:1;min-height:0;justify-content:center;gap:10px}
.solo .bulle:not(.verdict)::after{display:none} /* nobody to point at, except you for the number you proposed */
.solo #toi{--couleur:var(--jg-jaune)}
.solo .joueur{opacity:1}

/* Every question of the previous turns, the latest at the bottom: 5 rows in view, the older ones by scrolling (mouse or finger).
   On a short screen the list gets shorter (down to 2 rows) before anything else. */
.historique{display:grid;gap:4px;flex:0 1 auto;width:min(520px,100%);min-height:60px;max-height:156px;margin:0;padding:0 2px 0 0;overflow-y:auto;
  overscroll-behavior:contain;list-style:none;font-size:15px;scrollbar-width:thin}
.historique li{display:flex;justify-content:space-between;gap:14px;padding:4px 16px;border-radius:999px;background:#f3f4f8;color:var(--jg-gris);line-height:20px}
.historique li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.historique b{flex:none;color:var(--jg-marine)}

/* The question: a wide pill. */
.solo .question{width:min(520px,100%)}
.solo .question input{font:600 18px/1.2 var(--jg-police)}
.solo .question input::placeholder{font-size:17px}
.hors-sujet{margin:-4px 0 0;color:var(--jg-gris);font-weight:700}

/* The AI's answer: the question in small, then Oui or Non written by hand. */
.reponse-ia{position:relative;width:min(520px,100%);padding:8px 26px 6px;border:var(--jg-contour);background:#fff;box-shadow:var(--jg-ombre);text-align:center}
.question-posee{margin:0;overflow:hidden;color:var(--jg-gris);font-size:15px;text-overflow:ellipsis;white-space:nowrap}
.oui-non{margin:0;color:var(--jg-marine);font-size:46px;line-height:1}
.attente-ia{display:flex;justify-content:center;gap:6px;padding:16px 0 10px}

/* Giving up: a plain text button with a white flag, under the field. */
.abandon{display:inline-flex;align-items:center;gap:6px;min-height:34px;margin:-2px 0 0;padding:0 12px;border:0;border-radius:999px;background:none;
  color:var(--jg-gris);font:700 15px/1 var(--jg-police);cursor:pointer}
.abandon:hover{color:var(--jg-marine);text-decoration:underline}
.abandon svg{width:17px;height:17px}

/* End of the game. */
.solo .resultat{margin:0;font-size:clamp(44px,7vw,68px);line-height:.95}

/* Short landscape screens: the side-by-side layout of ../jeu.css, you beside the middle column. */
@media(max-height:520px) and (orientation:landscape){
  .gtn.solo,.gtn.solo[data-phase]{--t:calc(1.4 * clamp(70px,calc((100vh - 110px) / 1.8),130px));--t:calc(1.4 * clamp(70px,calc((100dvh - 110px) / 1.8),130px))}
  .solo .table{padding-top:56px}
  .historique{max-height:60px}
}