/* Guess the Size, on the common charter: a sheet with a ground line, the reference on the left, the element on the right. */
:root{--vrai:var(--jg-juste)}
html,body{overflow:hidden;overscroll-behavior:none}

.taille{position:relative;display:flex;flex-direction:column;align-items:center;height:100%;height:100dvh;padding:max(12px,env(safe-area-inset-top)) 16px max(14px,env(safe-area-inset-bottom))}
.titre{position:absolute;top:max(12px,env(safe-area-inset-top));left:16px;margin:0;font-size:clamp(34px,3.1vw,46px);line-height:1}
.manche{position:absolute;top:calc(max(12px,env(safe-area-inset-top)) + clamp(34px,3.1vw,46px) + 6px);left:18px;margin:0;color:var(--jg-marine);font-size:17px;font-weight:800;line-height:1.4}
.quitter{position:absolute;top:max(10px,env(safe-area-inset-top));right:16px;z-index:3}

.jeu{display:flex;flex:1;flex-direction:column;align-items:center;gap:10px;width:100%;min-height:0}
.demande{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:90px;margin:0;color:var(--jg-gris);font-size:15px;font-weight:700;line-height:1.2;text-align:center}
.nom{max-width:48vw;color:var(--jg-encre);font-size:clamp(40px,4.4vw,60px);line-height:1;text-wrap:balance}

/* The sheet: pushing up or down on it also changes the size. */
.feuille{position:relative;flex:1;width:min(1040px,100%);min-height:0;overflow:hidden;border:var(--jg-contour);border-radius:22px;background:var(--jg-papier);box-shadow:var(--jg-ombre)}
.scene{display:block;width:100%;height:100%;cursor:ns-resize;touch-action:none;user-select:none;-webkit-user-select:none}
[data-phase=bilan] .scene{cursor:default}
.sol{stroke:var(--jg-marine);stroke-width:2px}
.etiquette{fill:var(--jg-marine);font:800 15px var(--jg-police)}
.fleche{fill:none;stroke:var(--jg-rouge);stroke-width:3px;stroke-linecap:round;stroke-linejoin:round}

/* The drawings: same line thickness whatever their size, finer when they are tiny. */
.art{stroke:var(--jg-marine);stroke-width:var(--sw,2px)}
.art *{vector-effect:non-scaling-stroke}
.art-vrai{display:none}
/* The comparison: the true size in colour with a green outline, yours as a dashed line over it. */
.compare .art-vrai{display:inline;stroke:var(--vrai)}
.compare .art-moi{stroke-dasharray:7 5}
.compare .art-moi *{fill:none!important}
.compare .art-moi .d{display:none}

.infos{position:absolute;top:12px;left:16px;right:70px;pointer-events:none}
.legende{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0;font-size:14px;font-weight:800}
.legende span::before{content:"";display:inline-block;width:18px;height:0;margin-right:6px;border-top:3px solid currentColor;vertical-align:middle}
.legende-toi{color:var(--jg-marine)}
.legende-toi::before{border-top-style:dashed!important}
.legende-vrai{color:var(--vrai)}
.faits{margin:4px 0 0;color:var(--jg-gris);font-size:14px;font-weight:700;line-height:1.35}

.commandes{display:flex;align-items:center;justify-content:center;gap:16px;width:min(1040px,100%);min-height:52px}
.glissiere{display:flex;flex:1;align-items:center;gap:10px;min-width:0}
.glissiere input{flex:1;min-width:0;height:48px;margin:0;background:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.glissiere input::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:var(--jg-marine)}
.glissiere input::-moz-range-track{height:8px;border-radius:999px;background:var(--jg-marine)}
.glissiere input::-webkit-slider-thumb{width:34px;height:34px;margin-top:-13px;border:var(--jg-contour);border-radius:50%;background:var(--jeu);-webkit-appearance:none}
.glissiere input::-moz-range-thumb{width:30px;height:30px;border:var(--jg-contour);border-radius:50%;background:var(--jeu)}
.valider{min-width:170px}
.bilan{display:flex;align-items:baseline;gap:12px;margin:0;white-space:nowrap}
.gain{color:var(--jg-encre);font-size:50px;line-height:1}
.gain small{font-size:.6em}
.ecart{color:var(--jg-gris);font-size:17px;font-weight:800}

/* End of the game. */
.fin{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,3vh,30px);width:100%;min-height:0}
.total{margin:0;font-size:clamp(64px,10vw,110px);line-height:1}
.total small{color:var(--jg-gris);font-size:.5em}
.recap{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:min(980px,100%);margin:0;padding:0;list-style:none}
.recap li{display:flex;flex:0 1 calc(20% - 10px);flex-direction:column;align-items:center;min-width:0;text-align:center}
.recap svg{display:block;width:100%;aspect-ratio:4/3;border:var(--jg-contour);border-radius:14px;background:var(--jg-papier)}
.recap span{margin-top:6px;font-size:14px;font-weight:700;line-height:1.2;text-wrap:balance}
.recap b{color:var(--jg-marine);font-size:17px;font-weight:800}
.ligne{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}

.confirmation{width:min(380px,calc(100% - 32px));padding:30px 28px 26px;border:var(--jg-contour);border-radius:22px;box-shadow:var(--jg-ombre);text-align:center}
.confirmation[open]{display:flex;flex-direction:column;align-items:center}
.confirmation::backdrop{background:rgba(23,36,65,.35)}
.question{margin:0;font:800 22px/1.2 var(--jg-police)}
.aide{margin:10px 0 0;color:var(--jg-gris);font-size:15px;line-height:1.45}
.confirmation .ligne{flex-wrap:nowrap;width:100%;margin-top:24px}
.confirmation .ligne .jg-bouton{flex:1;max-width:150px}

/* Narrow screens: no title, the round on the first line beside the ×, what to size under them. */
@media(max-width:1000px){
  .titre{width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .manche{top:max(22px,env(safe-area-inset-top));left:16px}
  .jeu{padding-top:50px}
  .demande{min-height:0}
  .nom{max-width:100%;font-size:clamp(34px,10vw,48px)}
  .fin{padding-top:50px}
}
@media(max-width:600px){
  .commandes{flex-wrap:wrap;gap:8px}
  .glissiere{flex-basis:100%}
  .valider{width:100%}
  .gain{font-size:42px}
  .ecart{font-size:15px}
  .bilan{justify-content:center;width:100%}
  #suivant{width:100%}
  .faits{font-size:13px}
  .recap{gap:10px}
  .recap li{flex-basis:calc(33.33% - 7px)}
  .recap span{font-size:13px}
  .total{font-size:clamp(58px,17vw,84px)}
}
/* Short landscape screens: everything on one line above the sheet, the controls on one line under it. */
@media(max-height:520px){
  .jeu{padding-top:0;gap:6px}
  .demande{flex-direction:row;gap:10px;align-items:baseline;min-height:48px}
  .demande span{display:none}
  .nom{max-width:calc(100vw - 420px);font-size:clamp(30px,5vw,40px)}
  .titre{width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .manche{top:max(22px,env(safe-area-inset-top));left:16px}
  .commandes{flex-wrap:nowrap;min-height:48px}
  .glissiere{flex-basis:auto}
  .valider,#suivant{width:auto}
  .bilan{width:auto}
  .gain{font-size:36px}
  .faits{display:none}
  .fin{gap:8px;padding-top:0}
  .total{font-size:48px}
  .recap{width:min(620px,100%)}
  .recap li{flex-basis:calc(20% - 10px)}
  .recap span{display:none}
}