/* Guess the Time, on the common charter: the time to aim for, and the watch, which is the button. */
html,body{overflow:hidden;overscroll-behavior:none}

.temps{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))}
.manche{position:absolute;top:max(22px,env(safe-area-inset-top));left:16px;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}
.cible{color:var(--jg-encre);font-size:clamp(46px,5vw,68px);line-height:1}

/* The watch: as large as the page leaves room for. It takes the press on its whole surface, the moment the finger touches it. */
.scene{display:flex;flex:1;align-items:center;justify-content:center;width:100%;min-height:0;container-type:size}
.montre{position:relative;width:min(100cqw,calc(100cqh * 200 / 224),470px);aspect-ratio:200/224;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;container-type:inline-size;
  touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.montre:disabled{cursor:default}
.montre:not(:disabled):active .cadran{transform:translateY(1%)}
.cadran{display:block;width:100%;height:100%;overflow:visible}
.boitier{fill:var(--jg-papier);stroke:var(--jg-marine);stroke-width:4;filter:drop-shadow(0 7px 10px rgba(23,36,65,.16))}
.couronne{fill:var(--jeu);stroke:var(--jg-marine);stroke-width:3}
.graduations line{stroke:var(--jg-marine);stroke-width:1.5;stroke-linecap:round}
.graduations .longue{stroke-width:3}
.graduations text{fill:var(--jg-marine);font:800 13px var(--jg-police);text-anchor:middle}
/* While the time runs, the only change is the colour: red, and no hand. */
[data-phase=chrono] .boitier{stroke:var(--jg-rouge)}
[data-phase=chrono] .couronne{fill:var(--jg-rouge)}
.aiguille,.repere,.ecart{display:none}
[data-phase=bilan] .aiguille,[data-phase=bilan] .repere,[data-phase=bilan] .ecart{display:inline}
.aiguille{stroke:var(--jg-rouge);stroke-width:3.5;stroke-linecap:round}
.repere{stroke:var(--jg-juste);stroke-width:5;stroke-linecap:round}
.ecart{fill:rgba(229,56,59,.22);opacity:0;transition:opacity .25s}
.revele .ecart{opacity:1}

/* The middle of the watch: what to press, then your time. */
.face{position:absolute;left:0;right:0;top:calc(124 / 224 * 100%);display:flex;flex-direction:column;align-items:center;transform:translateY(-50%);pointer-events:none}
.etat{min-width:44cqw;padding:.45em 1em;border:var(--jg-contour);border-radius:999px;background:var(--jeu);color:var(--jeu-texte);font-size:clamp(17px,7.5cqw,32px);font-weight:800;line-height:1.1}
[data-phase=chrono] .etat{background:var(--jg-rouge)}
.resultat{padding:0 .28em;border-radius:12px;background:rgba(255,255,255,.92);color:var(--jg-encre);font-size:clamp(34px,20cqw,88px);line-height:1}
.mots{min-height:1.3em;padding:0 .5em;border-radius:8px;background:rgba(255,255,255,.92);color:var(--jg-gris);font-size:clamp(13px,4.8cqw,20px);font-weight:800;line-height:1.3}
[data-phase=bilan] .etat,.resultat,.mots{display:none}
[data-phase=bilan] .resultat,[data-phase=bilan] .mots{display:block}

/* How close a time was, in the same colours on the watch and at the end: gold when perfect, then green, yellow, orange, red. */
[data-rang=or]{--fond:linear-gradient(135deg,#fbe38e,#d9a520 55%,#f8d76a);--texte:var(--jg-marine)}
[data-rang=vert]{--fond:#2bb673;--texte:var(--jg-marine)}
[data-rang=jaune]{--fond:#ffe45c;--texte:var(--jg-marine)}
[data-rang=orange]{--fond:#ff8a1f;--texte:var(--jg-marine)}
[data-rang=rouge]{--fond:var(--jg-rouge);--texte:#fff}
.resultat[data-rang],.recap span[data-rang]{background:var(--fond);color:var(--texte)}

/* The row under the watch keeps its place, so that nothing moves when the result comes. */
.commandes{display:flex;align-items:center;justify-content:center;gap:16px;width:100%;min-height:52px}
[data-phase=pret] .commandes,[data-phase=chrono] .commandes{visibility:hidden}
.gain{min-width:2.6em;margin:0;color:var(--jg-encre);font-size:50px;line-height:1;text-align:right;white-space:nowrap}
.gain small{font-size:.6em}

/* 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(820px,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;padding:10px 4px 12px;border:var(--jg-contour);border-radius:14px;text-align:center}
.recap strong{font-size:46px;line-height:1}
.recap span{margin:3px 0;padding:1px 10px;border-radius:999px;font-size:15px;font-weight:800;line-height:1.3;white-space:nowrap}
.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: the round on the first line beside the ×, the time to aim for under them. */
@media(max-width:1000px){
  .jeu{padding-top:50px}
  .demande{min-height:0}
  .cible{font-size:clamp(40px,11vw,56px)}
  .fin{padding-top:50px}
}
/* Phones upright: the round and the score centred at the top. */
@media(max-width:760px) and (min-height:521px){
  .manche{left:64px;right:64px;text-align:center}
}
@media(max-width:600px){
  .gain{font-size:42px}
  .commandes{gap:12px}
  .recap{gap:10px}
  .recap li{flex-basis:calc(33.33% - 7px)}
  .total{font-size:clamp(58px,17vw,84px)}
}
/* Short landscape screens: the time to aim for on one line. */
@media(max-height:520px){
  .jeu{padding-top:0;gap:4px}
  .demande{flex-direction:row;gap:10px;align-items:baseline;min-height:48px}
  .cible{font-size:clamp(30px,5vw,40px)}
  .commandes{min-height:48px}
  .gain{font-size:36px}
  .fin{gap:8px;padding-top:0}
  .total{font-size:48px}
  .recap{width:min(620px,100%)}
  .recap strong{font-size:30px}
  .recap li{flex-basis:calc(20% - 10px);padding:4px}
  .recap span{font-size:13px}
  .recap b{font-size:15px}
}