/* Draw the Country from Memory, on the common charter: a sheet of paper that fills the screen, your line in navy, the real outline in green. */
:root{--trait:var(--jg-marine);--vrai:var(--jg-juste)}
html,body{overflow:hidden;overscroll-behavior:none}

.dessin{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}
.pays{max-width:44vw;color:var(--jg-encre);font-size:clamp(40px,4.4vw,60px);line-height:1;text-wrap:balance}

/* The sheet. Its size is what the page has left, whatever the screen. */
.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)}
.toile{display:block;width:100%;height:100%;cursor:crosshair;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
[data-phase=bilan] .toile{cursor:default}
.toile path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.traits path{stroke:var(--trait);stroke-width:4px;vector-effect:non-scaling-stroke}
.traits{transition:transform .8s cubic-bezier(.3,.8,.3,1)}
.contour path{fill:rgba(43,182,115,.14);stroke:var(--vrai);stroke-width:3px;stroke-dasharray:1;stroke-dashoffset:1;animation:contour 1s .15s ease-out forwards,fond .5s .7s both}
@keyframes contour{to{stroke-dashoffset:0}}
@keyframes fond{from{fill:rgba(43,182,115,0)}}

/* Time: a bar along the top of the sheet and the seconds in its corner. */
.barre{position:absolute;inset:0 0 auto;height:7px;background:var(--jg-ligne);pointer-events:none}
.barre span{display:block;height:100%;background:var(--jeu);transform-origin:left}
.chrono{position:absolute;top:14px;right:18px;margin:0;color:var(--jg-marine);font-size:44px;line-height:1;pointer-events:none}
.urgent .barre span{background:var(--jg-rate)}
.urgent .chrono{color:var(--jg-rate)}
[data-phase=bilan] .barre,[data-phase=bilan] .chrono{display:none}
.legende{position:absolute;bottom:10px;left:16px;display:flex;flex-wrap:wrap;gap:4px 16px;margin:0;font-size:14px;font-weight:800;pointer-events:none}
.legende span::before{content:"";display:inline-block;width:18px;height:4px;margin-right:6px;border-radius:2px;background:currentColor;vertical-align:middle}
.legende-toi{color:var(--trait)}
.legende-vrai{color:var(--vrai)}

.commandes{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:52px}
.valider{min-width:190px}
.gain{margin:0;color:var(--jg-encre);font-size:50px;line-height:1;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(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 path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.recap .petit-vrai{fill:rgba(43,182,115,.14);stroke:var(--vrai);stroke-width:1.5px}
.recap .petit-trait{stroke:var(--trait);stroke-width:2px}
.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 ×, the country's name 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}
  .demande-texte{display:none}
  .pays{max-width:100%;font-size:clamp(34px,10vw,48px)}
  .fin{padding-top:50px}
  .chrono{font-size:38px}
}
@media(max-width:600px){
  .recap{gap:10px}
  .recap li{flex-basis:calc(33.33% - 7px)}
  .recap span{font-size:13px}
  .total{font-size:clamp(58px,17vw,84px)}
  .gain{font-size:42px}
  .valider{min-width:150px}
}
/* Short landscape screens: the name on the first line, between the round and the ×. */
@media(max-height:520px){
  .jeu{padding-top:0;gap:6px}
  .demande{justify-content:center;min-height:48px}
  .demande-texte{display:none}
  .pays{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{min-height:48px}
  .gain{font-size:36px}
  .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}
}