:root{font-family:Arial,Helvetica,sans-serif;color:#fff;background:#112d28;font-synthesis:none;color-scheme:dark}*{box-sizing:border-box}body{margin:0;min-height:100svh;display:grid;place-items:center;background:radial-gradient(ellipse at top,#47665b,#10261f)}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #e9bb6b;outline-offset:4px}[hidden]{display:none!important}#game{position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;max-width:580px;height:100svh;min-height:590px;overflow:hidden;background:#b8d0ce}#world,#scene,#photo,.shade{position:absolute;inset:0;width:100%;height:100%}#world{z-index:-1}#photo{background:url('couverture-rivrin.jpg') center 42%/cover;transition:opacity .5s,transform .35s;opacity:1}.shade{background:linear-gradient(180deg,#0d292c33 0%,transparent 35%,#061c23aa 64%,#061c23f5 100%);pointer-events:none}header{display:flex;justify-content:space-between;align-items:flex-start;padding:22px 24px 0;z-index:2}.brand{width:133px;height:94px;object-fit:contain;background:#fff;border-radius:2px;box-shadow:0 4px 30px #09212322}.headerRight{text-align:right;display:flex;flex-direction:column;align-items:end;gap:12px}.gameName{font-family:Impact,'Arial Narrow',sans-serif;font-size:29px;letter-spacing:.5px;text-shadow:0 2px 8px #0006}#sound{border:1px solid #ffffff55;background:#12372b99;backdrop-filter:blur(8px);color:#fff;border-radius:30px;padding:9px 12px;font-size:11px;letter-spacing:1px}#sound span{opacity:.65;margin-left:4px}#intro{flex:1;display:flex;align-items:end;z-index:1;padding:0 28px 22px}.introCopy{width:100%}.eyebrow{font-size:11px;letter-spacing:2.1px;color:#eed7a4;font-weight:700}h1{font-family:Impact,'Arial Narrow',sans-serif;font-size:clamp(72px,23vw,126px);line-height:.95;font-weight:400;letter-spacing:-2px;margin:15px 0 18px}h1 span{color:#f0f3e9}h1 i{display:block;font:500 15px/1.4 Arial;letter-spacing:7px;margin:10px 0 0 4px}#intro p{font-size:19px;line-height:1.4;color:#edf2e9;margin:0 0 22px}.introRule{border-left:2px solid #d6b376;padding-left:13px;margin-bottom:22px}.introRule b{display:block;font-size:15px;font-weight:500}.introRule span{display:block;color:#c5d2cc;font-size:12px;line-height:1.5;margin-top:5px}.primary{display:flex;justify-content:space-between;align-items:center;min-height:58px;width:100%;padding:16px 21px;background:#e8d4a3;color:#153b31;border:1px solid #f0dfb9;border-radius:3px;box-shadow:0 4px 20px #0002;font-size:14px;font-weight:800;letter-spacing:.7px}.primary span{font-size:24px;font-weight:400}.primary:hover{background:#f6e7c4}small{display:block;text-align:center;font-size:11px;color:#c0d0c6;margin-top:12px}footer{padding:0 24px max(14px,env(safe-area-inset-bottom));z-index:2}.bottom{display:flex;justify-content:space-between;gap:15px;border-top:1px solid #ffffff24;padding-top:13px;font-size:9px;font-weight:600;letter-spacing:1px;color:#c5d0c7}.keyboard{text-align:center;font-size:11px;color:#c5d0c7;margin-top:12px}.hud{display:flex;align-items:end;justify-content:space-between;margin:20px 24px 0;padding:17px 18px;background:#f5f5e9eb;border:1px solid #ffffff77;border-radius:3px;color:#143f35;backdrop-filter:blur(10px);box-shadow:0 5px 20px #1b3e3314}.label{display:block;letter-spacing:1.8px;font-size:10px;color:#48675e;margin-bottom:6px}#time{font:500 43px/1 monospace;letter-spacing:-2px;font-variant-numeric:tabular-nums}#time span{color:#899a79}.steps{text-align:right}.steps strong{font-size:33px;font-weight:500}.steps div>span{font-size:15px;color:#60796c}.course{margin:12px 24px 0}.track{height:3px;background:#fff5}.track>div{height:100%;width:0;background:#ead09a;transition:width .06s}.stage{display:flex;justify-content:space-between;gap:10px;padding-top:10px;font-size:10px;letter-spacing:1.3px;text-shadow:0 1px 5px #000;background:linear-gradient(#123b3933,transparent)}.stage b{font-weight:600}.stage span{color:#f1dba9}#game[data-state=running] footer,#game[data-state=ready] footer{margin-top:auto}.controlHelp{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#e3ece4;margin-bottom:12px}#reset{font-size:12px;color:#cad9cf;background:none;border:0;padding:6px;text-decoration:underline;text-underline-offset:3px}.pads{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:17px}.pad{touch-action:none;user-select:none;-webkit-user-select:none;min-height:92px;border:1px solid #e1ead96b;border-bottom:3px solid #0a241c;background:#244e40eb;color:#f5f3e5;border-radius:5px;display:flex;align-items:center;justify-content:center;gap:17px;backdrop-filter:blur(8px);transition:background .07s,transform .07s}.pad>span{font-size:30px;font-weight:400}.pad b{font-size:13px;font-weight:600;letter-spacing:2px}.pad.next{background:#e8dbc2;color:#184234;border-color:#f4e8d3}.pad.hit{background:#fff9dd;color:#113e2c;transform:translateY(2px)}.pad:disabled{opacity:.5}#cue{position:absolute;top:48%;left:20px;right:20px;text-align:center;font-family:Impact,'Arial Narrow',sans-serif;font-size:36px;letter-spacing:1px;color:#fff8df;text-shadow:0 2px 14px #092b30;pointer-events:none}#entryNote{position:absolute;left:0;right:0;bottom:220px;text-align:center;font-size:13px;text-shadow:0 2px 8px #000}#finish{flex:1;padding:25px 28px;display:flex;justify-content:end;flex-direction:column}h2{font-family:Impact,'Arial Narrow',sans-serif;font-size:72px;line-height:1.02;letter-spacing:-1px;font-weight:400;margin:16px 0}h2 em{font-style:normal;color:#ead39b}#result{font:500 55px/1.2 monospace;letter-spacing:-2px;color:#fff}#finish p{font-size:14px;color:#deeadf;margin:12px 0 25px}#game[data-state=running] .shade,#game[data-state=ready] .shade{background:linear-gradient(180deg,#173d3955,transparent 38%,transparent 60%,#102e23ed 90%)}#game[data-state=finished] #photo{background-image:url('arrivee-rivrin.jpg');background-position:center;opacity:1!important}#game[data-state=finished] .shade{background:linear-gradient(#0b292344,#0b2923c9 40%,#0b2923f5)}@media(min-width:700px){#game{margin:20px;height:calc(100svh - 40px);max-height:980px;border:1px solid #587566;border-radius:8px;box-shadow:0 20px 100px #0006}}@media(max-height:740px){header{padding-top:14px}.brand{width:100px;height:70px}.hud{margin-top:12px;padding:12px 15px}#time{font-size:35px}.steps strong{font-size:28px}h1{font-size:82px;margin:10px 0 15px}#intro p{font-size:17px;margin-bottom:16px}.introRule{margin-bottom:15px}.pad{min-height:76px}.keyboard{display:none}.primary{min-height:52px}#intro{padding-bottom:16px}#finish h2{font-size:56px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}


/* White brand artwork is blended onto the site, preserving the original mark. */
.brand{background:transparent;box-shadow:none;border-radius:0;filter:invert(1);mix-blend-mode:screen}
.gameName{font-size:23px}
h1 em{display:block;font:inherit;font-size:.50em;font-style:normal;color:#ecd6a0;letter-spacing:0;margin:8px 0 0 3px}
#game[data-state=finished]{height:100svh;min-height:560px;max-height:none;overflow:hidden}
#game[data-state=finished] header{padding-top:12px;flex-shrink:0}
#game[data-state=finished] .brand{width:100px;height:70px}
#game[data-state=finished] footer{position:static;margin-top:auto;padding-bottom:max(10px,env(safe-area-inset-bottom));flex-shrink:0}
#game[data-state=finished] .keyboard{display:none}
#finish{flex:1;min-height:0;justify-content:center;padding:12px 24px;gap:0}
.finishTop{display:flex;align-items:center;justify-content:space-between}
.finishTop .eyebrow{font-size:10px;letter-spacing:1.3px}
#finish h2{font-size:32px;line-height:1.1;margin:10px 0 15px}
.scoreRow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.scoreRow .label{color:#cbd9c9;font-size:10px}
#result{font-size:clamp(30px,9vw,43px);line-height:1.1;white-space:nowrap}
.scoreButtons{display:flex;gap:7px}
#again,#share{background:transparent;color:#f0ecd9;border:1px solid #dbe5cf70;border-radius:4px;padding:11px 10px;min-height:44px;font-size:12px;white-space:nowrap;width:auto;margin:0}
#share{background:#e6d6b2;color:#123c30;border-color:#e6d6b2}
#again:disabled,#share:disabled{opacity:.45;cursor:default}
#finish #recordMessage{margin:9px 0 13px;font-size:12px;color:#dde8d8}
.support{background:#efe1bd;border:1px solid #fff1ce;border-radius:6px;padding:18px;color:#183e30;box-shadow:0 5px 25px #0002}
.foundationName{font-size:12px;font-weight:800;letter-spacing:1.1px;color:#2a513e}
.support h3{font-size:25px;line-height:1.12;letter-spacing:-.5px;margin:10px 0}
#finish .support p{font-size:14px;line-height:1.35;margin:0 0 13px;color:#355841}
a.primary{text-decoration:none;font-size:12px}
#donate{background:#174735;color:#fff9e8;border-color:#174735;min-height:52px;padding:13px 15px;letter-spacing:.25px}
a[aria-disabled=true]{opacity:.55;pointer-events:none}
#finish .donationProvider{font-size:11px;text-align:center;margin:9px 0 0;color:#395941}
#finishHint{font-size:11px;margin:9px 0 0;min-height:13px;color:#cfdfcd}
#shareStatus{font-size:12px;color:#eedbaa;margin:0 0 6px}#shareStatus:empty{display:none}
#shareFallback label{display:block;font-size:12px;margin:8px 0}#shareLink{width:100%;padding:10px;background:#fff;color:#173c30;border:0;font-size:13px;resize:vertical;line-height:1.4}
#cue.milestone{background:#123a30eb;border:1px solid #e8d4a37a;border-radius:6px;padding:18px 13px;font-family:Arial,sans-serif;font-size:22px;line-height:1.45;font-weight:700;letter-spacing:0;white-space:pre-line;color:#f2e0b4;box-shadow:0 8px 25px #0003}
@media(min-width:700px){#game[data-state=finished]{height:calc(100svh - 40px);min-height:560px;max-height:980px}}
@media(max-width:370px){.scoreButtons{flex-direction:column;gap:5px}#again,#share{min-height:37px;padding:8px 12px}.support{padding:14px}.foundationName{font-size:11px}}
@media(max-height:680px){#finish{padding:8px 20px}#finish h2{font-size:27px;margin:7px 0 10px}.support{padding:13px 15px}.support h3{font-size:22px;margin:8px 0}#finish .support p{font-size:13px;margin-bottom:10px}#game[data-state=finished] .brand{width:85px;height:59px}#finish #recordMessage{margin:7px 0 10px}#donate{min-height:46px;padding:10px 12px}.scoreRow #result{font-size:34px}#finishHint{margin-top:7px}}
/* Keep enlarged text and unusually short landscape screens accessible. */
@media(max-height:559px){#game[data-state=finished]{height:auto;min-height:100svh;overflow:visible}#finish{flex:none}}

/* Bêta 8 — marque, collecte et records personnels */
:root{--brand-yellow:#ddaa17}
.brandCrop{display:block;position:relative;width:145px;height:100px;overflow:hidden;flex-shrink:0}
header .brand,#game[data-state=finished] header .brand{position:absolute;width:372.6px;height:123px;max-width:none;left:-227.6px;top:-23.1px;filter:none;mix-blend-mode:normal;object-fit:fill}
.primary,#share{background:var(--brand-yellow);border-color:var(--brand-yellow);color:#102d26}.primary:hover,#share:hover{background:#efbe36}
h1 em,h2 em,.eyebrow,.stage span{color:var(--brand-yellow)}
#donate{background:var(--brand-yellow);border-color:var(--brand-yellow);color:#102d26}
.betaTag{font-size:12px;letter-spacing:1px;display:block;margin-bottom:10px;color:#fff}
#intro .homeFoundation{font-size:14px;line-height:1.35;margin:12px 0 8px;color:#fff}
.homeFoundation a{color:#ffdd79;text-underline-offset:3px;display:inline-block;padding:5px 0}
#intro{padding-bottom:12px}h1{font-size:clamp(64px,18vw,104px);margin:9px 0 12px}
#intro p{font-size:17px;margin-bottom:12px}.introRule{margin-bottom:12px}
#photo{background-position:55% 37%}
#game[data-state=finished] #photo{background-position:center 22%}
#game[data-state=finished] .shade{background:linear-gradient(#0b292355,#0b2923bb 38%,#0b2923f2)}
#finish #finishPhrase{font-size:15px;line-height:1.35;margin:10px 0 4px;color:#fff1c1}
#finish #recordMessage{margin:5px 0 12px}
.support{padding:15px}.support h3{font-size:23px;margin:7px 0}
.utility{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:10px;align-items:center}
.utility button,.utility a{border:0;background:none;color:#fff;font:12px Arial;padding:4px 0;text-decoration:underline;text-underline-offset:3px}
#photoCredit{font-size:12px;text-align:center;color:#d7e1db;margin-top:8px}
.bottom{font-size:10px;letter-spacing:.3px}.keyboard{font-size:12px}.label{font-size:12px}
#recordsDialog{width:min(92vw,480px);max-height:85svh;overflow:auto;background:#153e35;color:white;border:1px solid #6b8b7c;border-radius:8px;padding:24px}
#recordsDialog::backdrop{background:#000a}#recordsDialog h2{font:700 26px Arial;margin:14px 0}#recordsDialog p{font-size:15px;line-height:1.5}#recordsDialog h3{color:#ffdd79;margin-bottom:8px}#recordsDialog li{padding:4px;font:20px monospace}
#recordsDialog button{padding:10px 12px;border:1px solid #90a79c;border-radius:4px;background:transparent;color:#fff;font-size:14px}.closeDialog{float:right}#eraseRecords{margin-top:18px}
#cue.milestone{font-size:19px;padding:14px;top:43%;line-height:1.35}
@media(max-height:740px){header{padding:12px 20px 0}.brandCrop{width:116px;height:80px}header .brand,#game[data-state=finished] header .brand{width:298px;height:98.4px;left:-182px;top:-18.5px}.betaTag{margin-bottom:5px}h1{font-size:66px}#intro .homeFoundation{font-size:13px}.introRule span,#loadHint{font-size:12px}#intro{padding-top:10px}.utility{margin-top:6px}#photoCredit{margin-top:5px}#finish h2{font-size:27px}.support{padding:12px}.support h3{font-size:21px}#finish .support p{font-size:13px;margin-bottom:8px}}
@media(max-height:660px){#game[data-state=intro],#game[data-state=finished]{height:auto;min-height:100svh;overflow:visible}#intro{padding-top:20px}#finish{flex:none;padding-top:16px}}

/* Bêta 9 : accueil allégé, consignes au départ uniquement. */
header .betaTag{font:12px/1.4 Arial,sans-serif;letter-spacing:0;text-align:right;color:#fff;text-shadow:0 1px 5px #000;margin:0}
#intro h1{font-family:Impact,'Arial Narrow',Arial,sans-serif;font-size:clamp(30px,8.8vw,52px);font-weight:700;line-height:1.15;letter-spacing:-1px;white-space:nowrap;margin:12px 0 18px}
#intro #start{justify-content:center;font-size:18px;text-transform:none;margin:20px auto 0}
#game[data-state=intro] .keyboard,#game[data-state=intro] .bottom{display:none}
#readyRules{margin:auto 24px;padding:20px;background:#102e27ed;border:1px solid #ddaa1770;border-radius:6px;text-align:center}
#readyRules h2{font:700 23px/1.2 Arial,sans-serif;letter-spacing:0;margin:0 0 12px;color:#ffdc74}
#readyRules p{font-size:16px;line-height:1.4;margin:8px 0}
#readyRules small{font-size:14px;line-height:1.4;color:#fff}
#game[data-state=ready] #entryNote{display:none}
#game[data-state=ready] .keyboard{display:none}
@media(max-height:660px){#game[data-state=ready]{height:auto;min-height:100svh;overflow:visible}#readyRules{margin:18px 24px} }