:root{
  --bg:#07040f;--bg2:#120a24;--ink:#fff4e6;--dim:#b9a8d9;--pink:#ff4f9a;--pink2:#ff9cc4;--cyan:#5ff3ff;--gold:#ffd35e;--violet:#8b5cff;--green:#7dffb2;--red:#ff3d5a;
  --panel:rgba(16,9,34,.82);--line:rgba(255,255,255,.12);
  --display:'Pixelify Sans','Chakra Petch',system-ui,sans-serif;--ui:'Chakra Petch','Noto Sans Thai',system-ui,sans-serif;--px:'Silkscreen','Pixelify Sans',monospace;
  --st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--ui);overflow:hidden;overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
.hidden{display:none!important}

/* ------------------------------------------------ fond animé */
.bgfx{position:fixed;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(ellipse 80% 50% at 50% -10%,rgba(139,92,255,.35),transparent 70%),
  radial-gradient(ellipse 60% 40% at 100% 100%,rgba(255,79,154,.18),transparent 70%),
  radial-gradient(ellipse 50% 40% at 0% 90%,rgba(95,243,255,.12),transparent 70%),var(--bg)}
.bgfx:before{content:'';position:absolute;inset:-50%;background-image:radial-gradient(1px 1px at 20px 30px,#fff8,transparent),radial-gradient(1px 1px at 90px 120px,#fff6,transparent),radial-gradient(1.5px 1.5px at 160px 60px,#ffd35eaa,transparent),radial-gradient(1px 1px at 230px 180px,#5ff3ff88,transparent);background-size:260px 220px;animation:drift 90s linear infinite;opacity:.6}
.bgfx:after{content:'';position:absolute;left:-10%;right:-10%;bottom:0;height:38%;background:linear-gradient(transparent,rgba(255,79,154,.08)),repeating-linear-gradient(90deg,rgba(95,243,255,.07) 0 1px,transparent 1px 48px),repeating-linear-gradient(0deg,rgba(95,243,255,.07) 0 1px,transparent 1px 28px);transform:perspective(300px) rotateX(55deg);transform-origin:bottom;mask-image:linear-gradient(transparent,#000 70%)}
.cyber .bgfx:after{background:linear-gradient(transparent,rgba(95,243,255,.1)),repeating-linear-gradient(90deg,rgba(255,79,154,.12) 0 1px,transparent 1px 48px),repeating-linear-gradient(0deg,rgba(255,79,154,.12) 0 1px,transparent 1px 28px);animation:gridmove 1.2s linear infinite}
@keyframes drift{to{transform:translate(260px,220px)}}
@keyframes gridmove{to{background-position:0 0,0 0,0 28px}}

/* ------------------------------------------------ structure */
#app{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;max-width:720px;margin:0 auto;padding-block:8px 10px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.top{display:flex;align-items:center;gap:10px;height:52px;flex:none;transition:opacity .5s}
.brand{display:flex;align-items:center;gap:6px;font:700 15px var(--display);letter-spacing:.5px;white-space:nowrap}
.brand b{color:var(--pink);margin-left:3px}
.beat{color:var(--pink);display:inline-block;animation:beat 1.1s infinite;text-shadow:0 0 10px var(--pink)}
@keyframes beat{0%,60%,100%{transform:scale(1)}10%{transform:scale(1.35)}30%{transform:scale(1.15)}}
.secret{flex:1;min-width:0;padding:5px 9px 6px;border-radius:10px;background:rgba(10,5,22,.7);border:1px solid rgba(95,243,255,.25);box-shadow:inset 0 0 18px rgba(95,243,255,.08)}
.secret.bump{animation:bump .9s cubic-bezier(.2,1.4,.4,1)}
@keyframes bump{0%{transform:scale(1);box-shadow:0 0 0 rgba(95,243,255,0)}25%{transform:scale(1.04);box-shadow:0 0 28px rgba(95,243,255,.7)}100%{transform:scale(1)}}
.secret-head{display:flex;justify-content:space-between;font:9px var(--px);color:var(--cyan);letter-spacing:1px;line-height:1}
.secret-pct{color:var(--gold)}
.secret-text{font:600 11px/1.35 var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:3px 0 4px;color:var(--ink);letter-spacing:.6px}
.secret-text i{font-style:normal;color:var(--violet);opacity:.75}
.secret-bar{height:3px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.secret-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--pink));box-shadow:0 0 8px var(--cyan);transition:width .9s cubic-bezier(.2,1,.3,1)}
.tools{display:flex;gap:6px}
.tool{width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:rgba(255,255,255,.06);display:grid;place-items:center;font:12px var(--px);transition:transform .15s,background .2s}
.tool:hover{background:rgba(255,255,255,.12)}.tool:active{transform:scale(.92)}
.tool svg{width:18px;height:18px;fill:currentColor}.tool.off .wave{opacity:0}.tool.off{color:var(--dim)}
.tool:focus-visible,.btn:focus-visible,.lang-chip:focus-visible,.skip:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

.console{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:12px}
.screen{position:relative;flex:none;width:min(100%,calc((100dvh - 290px - var(--st) - var(--sb)) * 4 / 3));aspect-ratio:4/3;margin:0 auto;border-radius:14px;overflow:hidden;background:#000;
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 0 0 4px rgba(10,5,22,.9),0 0 0 5px rgba(255,79,154,.35),0 20px 50px rgba(0,0,0,.6),0 0 60px rgba(139,92,255,.25);transition:all .7s cubic-bezier(.7,0,.2,1)}
.cyber .screen{box-shadow:0 0 0 1px rgba(255,255,255,.14),0 0 0 4px rgba(4,10,20,.9),0 0 0 5px rgba(95,243,255,.5),0 20px 50px rgba(0,0,0,.6),0 0 70px rgba(95,243,255,.25)}
#view{display:block;width:100%;height:100%;touch-action:none;cursor:pointer}
.crt{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 58%,rgba(5,2,12,.55) 100%);mix-blend-mode:multiply;animation:flicker 6s infinite}
.cyber .crt{background:repeating-linear-gradient(0deg,rgba(0,0,0,.24) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 50%,rgba(0,10,25,.65) 100%)}
@keyframes flicker{0%,97%,100%{opacity:1}98%{opacity:.85}}
.hud-top{position:absolute;left:8px;top:8px;display:flex;gap:6px;align-items:center;pointer-events:none;max-width:70%}
.hud-num,.hud-place{font:9px var(--px);letter-spacing:1px;padding:4px 7px;border-radius:6px;background:rgba(8,4,18,.72);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(4px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-num{color:var(--gold)}.hud-place{color:var(--ink);font-family:var(--ui);font-weight:600;font-size:10px}
.hud-place:empty,.hud-num:empty{display:none}
.skip{position:absolute;right:8px;top:8px;font:10px var(--px);letter-spacing:1px;padding:8px 11px;border-radius:8px;border:1px solid rgba(255,255,255,.3);background:rgba(8,4,18,.75);backdrop-filter:blur(4px);transition:background .2s}
.skip:hover{background:rgba(255,79,154,.5)}

/* carte de chapitre */
.card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,rgba(7,4,15,.82) 20%,rgba(7,4,15,.82) 80%,transparent);clip-path:inset(42% 0 42% 0);transition:opacity .25s,clip-path .45s cubic-bezier(.7,0,.2,1)}
.card.show{opacity:1;clip-path:inset(22% 0 22% 0)}
.card-bar{position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,var(--pink),transparent);box-shadow:0 0 12px var(--pink)}
.card.show .card-bar{animation:scanbar 2.2s ease-in-out}
@keyframes scanbar{0%{transform:translateY(-60px);opacity:0}20%{opacity:1}100%{transform:translateY(60px);opacity:0}}
.card-num{font:10px var(--px);letter-spacing:3px;color:var(--gold);transform:translateY(8px);opacity:0;transition:.5s .15s}
.card-title{position:relative;font:700 clamp(20px,6vw,34px)/1.05 var(--display);text-align:center;padding:0 16px;text-shadow:0 0 18px rgba(255,79,154,.7),2px 2px 0 #3a0f2a;transform:scale(1.25);opacity:0;transition:.55s .1s cubic-bezier(.2,1.3,.3,1)}
.card-place{font:600 12px var(--ui);letter-spacing:2px;color:var(--cyan);opacity:0;transform:translateY(-6px);transition:.5s .3s}
.card.show .card-num,.card.show .card-place{opacity:1;transform:none}
.card-route{display:flex;gap:4px;margin-top:6px;opacity:0;transition:opacity .4s .45s}
.card.show .card-route{opacity:1}
.card-route i{width:7px;height:7px;border-radius:2px;background:rgba(255,255,255,.18)}
.card-route i.done{background:var(--pink);box-shadow:0 0 6px rgba(255,79,154,.6)}
.card-route i.now{background:var(--gold);box-shadow:0 0 10px var(--gold);animation:beat 1s infinite}
.card.cyber .card-route i.done{background:var(--cyan);box-shadow:0 0 6px rgba(95,243,255,.6)}.card.show .card-title{opacity:1;transform:none}
.card.cyber .card-title{text-shadow:0 0 18px rgba(95,243,255,.8),-2px 0 0 rgba(255,79,154,.8),2px 0 0 rgba(95,243,255,.8);animation:jitter .25s steps(2) 3}
@keyframes jitter{50%{transform:translateX(2px) skewX(-6deg)}}

/* ------------------------------------------------ panneau de dialogue */
.panel{position:relative;flex:0 1 auto;min-height:170px;max-height:46dvh;display:flex;flex-direction:column;gap:9px;padding:12px;border-radius:16px;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 30px rgba(0,0,0,.35);overflow:auto;cursor:pointer}
.panel:before{content:'';position:absolute;inset:0;border-radius:16px;padding:1px;background:linear-gradient(135deg,rgba(255,79,154,.6),transparent 35%,transparent 65%,rgba(95,243,255,.5));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.objective{align-self:flex-start;font:600 12px/1.35 var(--ui);color:var(--ink);padding:6px 10px 6px 28px;border-radius:9px;background:linear-gradient(90deg,rgba(255,211,94,.16),rgba(255,211,94,.04));border:1px solid rgba(255,211,94,.35);position:relative;animation:slidein .4s cubic-bezier(.2,1,.3,1)}
.objective:before{content:'◎';position:absolute;left:9px;top:5px;color:var(--gold);animation:spin 3s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes slidein{from{opacity:0;transform:translateY(6px)}}
.dialog{display:flex;gap:11px;align-items:flex-start;min-height:74px}
.portrait{flex:none;width:58px;height:58px;border-radius:12px;padding:3px;background:linear-gradient(135deg,var(--pink),var(--violet));box-shadow:0 0 18px rgba(255,79,154,.35);opacity:0;transform:scale(.7)}
.talking .portrait{opacity:1;transform:none}
.portrait.pop{animation:pop .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(.6) rotate(-8deg)}}
.portrait[data-who=ai]{background:linear-gradient(135deg,var(--cyan),var(--violet));box-shadow:0 0 18px rgba(95,243,255,.45)}
.portrait[data-who=n]{background:linear-gradient(135deg,var(--gold),var(--pink))}
.portrait[data-who=goat]{background:linear-gradient(135deg,#efe2c0,#7dffb2)}
.portrait canvas{width:100%;height:100%;border-radius:9px;image-rendering:pixelated;display:block}
.bubble{flex:1;min-width:0;position:relative}
.speaker{font:10px var(--px);letter-spacing:1.5px;color:var(--pink);margin:2px 0 6px;min-height:12px}
.speaker[data-who=ai],.speaker[data-who=tower]{color:var(--cyan)}.speaker[data-who=n],.speaker[data-who=vendor]{color:var(--gold)}.speaker[data-who=narr]{color:var(--dim)}.speaker[data-who=goat]{color:#efe2c0}.speaker[data-who=driver],.speaker[data-who=officer]{color:#9ad0ff}
.text{font:600 15.5px/1.5 var(--ui);color:var(--ink);text-wrap:pretty;min-height:46px}
:lang(th) .text{font-size:16px;line-height:1.6}
.next{position:absolute;right:0;bottom:-4px;color:var(--gold);font-size:12px;animation:nudge .8s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(3px)}}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.actions:empty{display:none}

/* boutons */
.btn{position:relative;flex:1 1 140px;min-height:48px;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:12px;border:0;font:700 14px var(--ui);letter-spacing:.6px;color:#1a0b24;background:linear-gradient(180deg,#fff1b8,var(--gold));box-shadow:0 4px 0 #b3862a,0 8px 18px rgba(255,211,94,.25);transition:transform .12s,box-shadow .12s,filter .2s;text-transform:uppercase}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #b3862a}
.btn.primary{color:#fff;background:linear-gradient(180deg,#ff7db6,var(--pink));box-shadow:0 4px 0 #a3245d,0 8px 22px rgba(255,79,154,.35)}
.btn.primary:active{box-shadow:0 1px 0 #a3245d}
.btn.cyan{color:#04121a;background:linear-gradient(180deg,#b9fbff,var(--cyan));box-shadow:0 4px 0 #1b8a99,0 8px 22px rgba(95,243,255,.3)}
.btn.cyan:active{box-shadow:0 1px 0 #1b8a99}
.btn.ghost{color:var(--ink);background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--line)}
.btn[disabled]{opacity:.45;filter:grayscale(.6);pointer-events:none}
.btn .ico{font-size:19px;line-height:1}
.btn.big{min-height:56px;font-size:16px}
.btn:after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.45) 50%,transparent 60%);background-size:250% 100%;background-position:120% 0;transition:background-position .6s}
.btn:hover:after{background-position:-20% 0}

.toast{position:fixed;left:50%;bottom:calc(22px + var(--sb));transform:translate(-50%,16px);opacity:0;z-index:30;pointer-events:none;padding:10px 16px;border-radius:12px;background:rgba(16,9,34,.92);border:1px solid var(--pink);font:700 13px var(--ui);box-shadow:0 0 24px rgba(255,79,154,.4);transition:.25s;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ------------------------------------------------ mode « attract » : canvas plein cadre (titre, fin) */
.attract .top,.attract .panel{opacity:0;pointer-events:none}
.attract .screen{position:fixed;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0;z-index:2;box-shadow:none}
.attract #view{object-fit:cover}
.attract .hud-top,.attract .skip{display:none}

.title{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(ellipse at center,rgba(7,4,15,.2),rgba(7,4,15,.75));transition:opacity .7s,transform .7s}
.title.out{opacity:0;transform:scale(1.08);pointer-events:none}
.title-inner{width:min(100%,460px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.logo{display:flex;flex-direction:column;align-items:center;line-height:.85;font:700 clamp(56px,17vw,96px) var(--display);letter-spacing:2px;animation:float 4s ease-in-out infinite}
.logo span{position:relative;display:block}
.logo-a{color:#fff;text-shadow:0 0 22px rgba(255,79,154,.9),4px 4px 0 var(--pink),8px 8px 0 #4a1440}
.logo-b{color:var(--gold);text-shadow:0 0 22px rgba(255,211,94,.8),4px 4px 0 #ff7a3c,8px 8px 0 #4a1a10;font-size:.8em}
.logo span:before,.logo span:after{content:attr(data-text);position:absolute;inset:0;opacity:0}
.logo span:before{color:var(--cyan);animation:glitchA 5s infinite}.logo span:after{color:var(--pink);animation:glitchB 5s infinite}
@keyframes glitchA{0%,92%,100%{opacity:0;transform:none}93%{opacity:.8;transform:translate(-4px,1px);clip-path:inset(10% 0 55% 0)}95%{opacity:.8;transform:translate(3px,-1px);clip-path:inset(60% 0 10% 0)}}
@keyframes glitchB{0%,93%,100%{opacity:0;transform:none}94%{opacity:.8;transform:translate(4px,0);clip-path:inset(40% 0 30% 0)}96%{opacity:.8;transform:translate(-3px,1px);clip-path:inset(5% 0 70% 0)}}
@keyframes float{50%{transform:translateY(-6px)}}
.logo-sub{font:11px var(--px);letter-spacing:5px;color:var(--cyan);text-shadow:0 0 10px var(--cyan);padding:6px 12px;border:1px solid rgba(95,243,255,.4);border-radius:6px;background:rgba(7,4,15,.6)}
.tagline{font:600 15px/1.5 var(--ui);color:var(--ink);text-shadow:0 2px 8px #000;margin:4px 0 6px;max-width:380px}
.title-btns{display:flex;flex-direction:column;gap:12px;width:100%}
.title-btns .btn{flex:none}
.langs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.lang-chip{font:11px var(--px);letter-spacing:1px;padding:8px 11px;border-radius:999px;border:1px solid var(--line);background:rgba(7,4,15,.6);color:var(--dim);transition:.2s}
.lang-chip.on{color:#fff;border-color:var(--pink);box-shadow:0 0 14px rgba(255,79,154,.5);background:rgba(255,79,154,.18)}
.phones{font:600 12px var(--ui);color:var(--dim);margin:0;text-shadow:0 2px 6px #000}

/* ------------------------------------------------ fin */
.ending{position:fixed;inset:0;z-index:12;display:none;overflow-y:auto;background:linear-gradient(180deg,rgba(7,4,15,.15),rgba(7,4,15,.55) 50%,rgba(7,4,15,.9))}
.ending.show{display:block;animation:fadein 1.2s}
@keyframes fadein{from{opacity:0}}
.end-inner{min-height:100%;width:min(100%,520px);margin:0 auto;padding:calc(40px + var(--st)) 20px calc(40px + var(--sb));display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.end-title{position:relative;font:12px var(--px);letter-spacing:3px;color:var(--cyan);text-shadow:0 0 10px var(--cyan);padding:6px 12px;border:1px solid rgba(95,243,255,.4);border-radius:6px;background:rgba(7,4,15,.6)}
.end-lines{display:flex;flex-direction:column;gap:6px;margin-top:18vh}
.decode{font:700 clamp(22px,6.5vw,40px)/1.15 var(--display);color:#fff;text-shadow:0 0 20px rgba(255,79,154,.8),3px 3px 0 #4a1440;min-height:1.1em}
:lang(th) .decode{font-family:var(--ui)}
.decode i{font-style:normal;color:var(--cyan);opacity:.8}
.decode.l2{font:700 clamp(30px,9vw,56px)/1.1 var(--ui);letter-spacing:1px;color:var(--gold);text-shadow:0 0 26px rgba(255,211,94,.85),0 2px 0 #b8325f,0 4px 14px rgba(0,0,0,.6)}
.decode.l2.done{animation:glow 2.4s ease-in-out infinite}
@keyframes glow{50%{text-shadow:0 0 44px rgba(255,211,94,1),0 2px 0 #b8325f,0 4px 14px rgba(0,0,0,.6);transform:scale(1.03)}}
.end-real{font:700 18px var(--ui);color:var(--pink2);opacity:0;transform:translateY(10px);transition:1s}
.end-real.in{opacity:1;transform:none}
.end-more{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;opacity:0;transform:translateY(20px);transition:1.2s;margin-top:22vh}
.end-more.in{opacity:1;transform:none}
.countdown-wrap{padding:12px 16px;border-radius:14px;background:rgba(16,9,34,.8);border:1px solid rgba(255,211,94,.35);box-shadow:0 0 30px rgba(255,211,94,.15)}
.count-label{font:9px var(--px);letter-spacing:3px;color:var(--gold);margin-bottom:6px}
.countdown{font:700 30px var(--display);display:flex;align-items:baseline;justify-content:center;gap:4px}
.countdown small{font:12px var(--px);color:var(--dim);margin-right:8px}
.pass{width:100%;text-align:left;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,#fff7ea,#ffe4ef);color:#2a1030;box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 40px rgba(255,79,154,.3);position:relative}
.pass:before,.pass:after{content:'';position:absolute;top:58%;width:22px;height:22px;border-radius:50%;background:#0d0719}.pass:before{left:-11px}.pass:after{right:-11px}
.pass-head{display:flex;justify-content:space-between;align-items:center;padding:11px 16px;background:linear-gradient(90deg,var(--pink),#ff7a3c);color:#fff;font:10px var(--px);letter-spacing:2px}
.pass-route{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 6px}
.pass-route b{display:block;font:700 34px var(--display);line-height:1}.pass-route small{font:10px var(--px);letter-spacing:1px;color:#8a5a7a}
.pass-route div:last-child{text-align:right}
.pass-plane{font-size:24px;color:var(--pink);animation:fly 2.4s ease-in-out infinite}
@keyframes fly{50%{transform:translateX(8px)}}
.pass-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 12px;padding:10px 18px 14px;border-top:2px dashed rgba(42,16,48,.2)}
.pass-grid .wide{grid-column:span 2}
.pass-grid small{display:block;font:8px var(--px);letter-spacing:1px;color:#8a5a7a;margin-bottom:2px}
.pass-grid span{font:700 14px var(--ui)}
.pass-code{height:34px;margin:0 18px 14px;background:repeating-linear-gradient(90deg,#2a1030 0 2px,transparent 2px 4px,#2a1030 4px 5px,transparent 5px 8px,#2a1030 8px 11px,transparent 11px 12px)}
.letter{font:600 16px/1.6 var(--ui);color:var(--ink);margin:4px 0 0;text-wrap:pretty}
.sign{font:700 16px var(--display);color:var(--pink2);margin:0 0 6px;align-self:flex-end}
#replay{flex:none;width:100%}

/* ------------------------------------------------ paysage court : écran à gauche, panneau à droite */
@media (orientation:landscape) and (max-height:600px){
  #app{max-width:none;padding-block:6px}
  .top{height:42px}
  .console{flex-direction:row}
  .screen{width:auto;height:100%;max-width:62vw}
  .panel{min-height:0}
  .text{font-size:14px}
}
@media (min-width:900px) and (min-height:700px){
  .screen{width:min(100%,calc((100dvh - 300px) * 4 / 3))}
}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}