:root{color-scheme:dark;--green:#b8f6d5;--muted:#8fa4ad;--white:#eef5f1}*{box-sizing:border-box}body{margin:0;background:#030811;color:var(--white);font:14px Arial,Helvetica,sans-serif;min-height:100dvh;display:grid;place-items:center}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible{outline:2px solid #b8f6d5;outline-offset:3px}.game-frame{width:min(100vw,56.25dvh);min-height:100dvh;aspect-ratio:9/16;container-type:inline-size;background:radial-gradient(ellipse at 100% 0,#193b3c66,transparent 50%),#0a1220;display:flex;flex-direction:column;box-shadow:0 0 100px #0009}.banner{position:relative;isolation:isolate;display:flex;align-items:center;gap:3cqw;min-height:43cqw;padding:5cqw 4cqw;overflow:hidden;border-bottom:1px solid #8ed6bb44}.banner:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#0a1220 0%,#07121b22 70%),url('images/banner.svg') center 46%/cover}.banner:after{content:'';position:absolute;z-index:-1;width:80%;height:15cqw;left:24%;bottom:1cqw;border-top:1px solid #d1ffe6;border-radius:50%;box-shadow:0 -2px 9px #7dffb766,0 -5px 1px #ff656d66;transform:rotate(-12deg)}.official-logo{width:27cqw;height:27cqw;object-fit:contain;border-radius:50%;box-shadow:0 0 22px #90ffc519}.banner-title{flex:1}.eyebrow{font-size:1.8cqw;letter-spacing:.6cqw;color:#b6d6cc}h1{font-family:'Trebuchet MS',Arial,sans-serif;font-size:7cqw;line-height:1.17;letter-spacing:-.22cqw;margin:2.5cqw 0 0;font-weight:900;color:#edfff7;text-shadow:0 2px #37745f,0 0 13px #91ffd44d}main{padding:0 3cqw;flex:1;display:flex;align-items:center}.game{width:100%}.game-toolbar{display:flex;align-items:center;justify-content:space-between;height:15cqw;font-size:2.7cqw;color:#97acb6;gap:2cqw}.game-toolbar strong{margin-left:1.3cqw;font-size:4cqw;color:#e8fff2;font-weight:500;font-variant-numeric:tabular-nums}.game-toolbar small{font-size:2.7cqw;color:#7d999b;margin-left:.4cqw}.restart{border:1px solid #395454;background:#142b3044;border-radius:1.5cqw;padding:2cqw 2.6cqw;font-size:2.6cqw}.restart:hover{background:#274b49}.picture-board{position:relative;width:100%;aspect-ratio:1;overflow:hidden;border-radius:2cqw;background:#070d17;box-shadow:0 12px 35px #0005}#scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.board{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:0}.board[hidden]{display:none}.card{position:relative;min-width:0;min-height:0;padding:0;border:3px solid #0a1220;background:#0a1220;perspective:800px;touch-action:manipulation;transition:opacity .55s;opacity:1}.card.cleared{opacity:0;pointer-events:none}.card-inner{display:block;width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .38s cubic-bezier(.2,.7,.3,1)}.card.revealed .card-inner{transform:rotateY(180deg)}.card-back,.card-front{position:absolute;inset:0;backface-visibility:hidden;border-radius:1.5cqw;border:1px solid #355151;overflow:hidden;background:#000;display:flex;align-items:center;justify-content:center}.card-front{transform:rotateY(180deg);background:#0b1722}.card img{width:100%;height:100%;object-fit:contain;object-position:center}.card-back-image{padding:2px}.card:hover:not(.revealed) .card-back{border-color:#c2ffdf}.card.matched .card-front{border-color:#a4ffcd;box-shadow:0 0 12px #a4ffcd55}.match-check{display:none}.game-bottom{min-height:15cqw;display:flex;align-items:center;justify-content:center;text-align:center;color:#9eb8bc;font-size:2.6cqw;line-height:1.5}.win{text-align:center;padding:4cqw 0 0}.win[hidden]{display:none}h2{font-size:5cqw;margin:0;font-weight:500;letter-spacing:-.1cqw;color:#d6ffe7}.primary{background:#bbf5d5;color:#0b2925;border:0;border-radius:1.5cqw;padding:2.7cqw 5cqw;margin-top:3cqw;font-size:3cqw}.win:not([hidden])~.game-bottom{min-height:9cqw;font-size:2.2cqw}footer{display:flex;align-items:center;justify-content:center;gap:2cqw;padding:3cqw 4cqw 5cqw;color:#728d99;font-size:2.4cqw}footer button{background:none;border:0;font-size:4cqw;color:#9fc5b6}dialog{background:#111f30;color:#eef5f1;border:1px solid #41536c;border-radius:16px;max-width:510px;width:calc(100% - 36px);padding:30px}dialog::backdrop{background:#030917cc}dialog h2{font-size:25px}dialog .eyebrow{font-size:10px}dialog p{line-height:1.6;color:#9db0c2;font-size:13px}.close{position:absolute;right:14px;top:9px;background:none;border:0;font-size:25px}#image-inputs{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:20px 0}#image-inputs label{display:flex;align-items:center;gap:10px;background:#1b2940;border:1px solid #35415a;border-radius:7px;padding:9px;font-size:12px;cursor:pointer}#image-inputs img{width:34px;height:34px;object-fit:contain}#image-inputs input{position:absolute;width:1px;height:1px;opacity:0}dialog .restart{font-size:12px;padding:10px}.image-error{color:#b8f6d5}@media(max-width:620px){.game-frame{width:100%;min-height:max(100dvh,177.778vw)}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Reserve room for the inline celebration inside the portrait frame. */
.banner{min-height:34cqw}.game-toolbar{height:12cqw}.game-bottom{min-height:12cqw}footer{padding:2cqw 4cqw 3cqw}.game:has(.win:not([hidden])) .game-bottom{display:none}

/* Display the supplied banner and illustrations in full. */
.banner{display:block;min-height:0;padding:0;overflow:visible;background:#000}
.banner:before,.banner:after{content:none}
.banner h1{margin:0;line-height:0;font-size:inherit;letter-spacing:normal}
.banner-image{display:block;width:100%;height:auto;object-fit:contain}
#scene{object-fit:contain;object-position:center;background:#080e22}
.game-frame{min-height:0;height:auto;aspect-ratio:9/16}
@media(max-width:620px){.game-frame{width:min(100vw,56.25dvh);min-height:0}}
/* Celestial cabinet stays fixed while matched cards reveal the scene. */
body{background:#000;font-family:Bahnschrift,Consolas,monospace}
.game-frame{isolation:isolate;background:#080e22;border:1px solid #3a435e;box-shadow:0 0 35px #13234655;overflow:hidden}
.banner{flex:none;border-bottom:1px solid #8295c04d}main{padding:0 3.8cqw;align-items:center}
.game-toolbar{height:14cqw;gap:1.5cqw;color:#ffedc4;font-size:2.5cqw;font-weight:700;letter-spacing:.04em}
.counter{display:flex;align-items:center;justify-content:center;flex:1;height:8cqw;white-space:nowrap;text-transform:uppercase;background:linear-gradient(#33415c,#101b30 25%,#080f20 75%,#1c304a);border:1px solid #a79164;border-radius:1cqw;box-shadow:inset 0 0 0 2px #111a2c,inset 0 3px 0 #b5d3f03d,0 3px 0 #02050c,0 0 0 2px #35496866}
.game-toolbar strong{margin-left:1.4cqw;font-family:Consolas,monospace;font-size:4.3cqw;font-weight:700;color:#fff6da}.game-toolbar small{color:#f1e4c8;font-size:2.9cqw}
.game-toolbar .restart{display:flex;align-items:center;justify-content:center;gap:1cqw;flex:1.05;height:8cqw;padding:0 .8cqw;white-space:nowrap;font-weight:700;font-size:2.7cqw;border:1px solid #ff5367;border-radius:1cqw;background:linear-gradient(#ba283f,#4c071c 23%,#210919 70%,#750e28);box-shadow:inset 0 0 0 2px #390818,inset 0 3px 1px #ffb0b088,inset 0 -3px 1px #f84d6344,0 3px 0 #130611,0 0 9px #ff244f55;transition:transform .09s,filter .12s;text-shadow:0 1px 2px #000}
.restart svg{width:3.8cqw;height:3.8cqw;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.game-toolbar :is(#sound,#music){flex:1.2;border-color:#607f7b;background:linear-gradient(#344c50,#102c2c 23%,#091d23 70%,#203d3f);box-shadow:inset 0 0 0 2px #091b24,inset 0 3px 1px #b5dbd344,0 3px 0 #030d16;color:#c5d4cf}
.game-toolbar :is(#sound,#music)[aria-pressed=true]{border-color:#54ff9b;color:#ecfff2;background:linear-gradient(#16864f,#063a29 23%,#051f22 70%,#075439);box-shadow:inset 0 0 0 2px #052f28,inset 0 3px 1px #c4ffe688,inset 0 -3px 1px #25ff8744,0 3px 0 #021810,0 0 11px #18ff7c66}
#sound .sound-waves{display:none}#sound[aria-pressed=true] .sound-waves{display:block}#sound[aria-pressed=true] .sound-slash{display:none}
.game-toolbar button:hover{filter:brightness(1.2)}.game-toolbar button:active,.primary:active{transform:translateY(2px);filter:brightness(.85)}
.picture-board{overflow:visible;border-radius:1.5cqw;box-shadow:0 0 0 1px #83a9cb99,0 0 0 3px #0b1427,0 0 0 4px #586f9766,0 0 14px #6b9fe52e}
#scene{border-radius:1.5cqw}.board{overflow:hidden;border-radius:1.5cqw}.card{border:.6cqw solid #0b1426;background:#0b1426}.card-back,.card-front{border-color:#5b788b;border-radius:1.3cqw;box-shadow:inset 0 1px 2px #d9edff55}
.game-bottom{margin:4cqw 3cqw 0;min-height:8cqw;padding:1.7cqw 2cqw;background:linear-gradient(#1b2c45,#080f20 35%,#080f20 75%,#20314a);border:1px solid #ab9162;border-radius:1cqw;box-shadow:0 0 0 2px #192b49,0 3px 0 #0007,inset 0 0 0 2px #0c1426;color:#ffefca;font-weight:700;font-size:2.5cqw;text-transform:uppercase;letter-spacing:.05em;line-height:1.5}
footer{flex:none;min-height:15cqw;padding:2cqw 4cqw 3cqw;color:#f2dfb3;font-size:2.35cqw;letter-spacing:.08em;text-transform:uppercase;font-weight:700}footer button{color:#d4dcbd}
.win{padding:2cqw 0 0}.win h2{font-size:3.5cqw}.win .primary{padding:1.5cqw 4cqw;margin-top:1.5cqw}

/* User landscape: keep the whole sky and mountains visible, separate from reveal scenes. */
.game-frame{background:#080e22}
.cabinet{isolation:isolate;flex:1;display:flex;flex-direction:column;padding-top:12cqw;background:url('images/cadre-etoile.png') center/100% 100% no-repeat}
.cabinet main{background:transparent}
.game,.game-toolbar,.board{background:transparent}
.picture-board{width:84%;margin:0 auto;background:transparent;box-shadow:none}
.card{background:transparent;border-color:transparent}
.game-toolbar{height:13cqw;font-size:clamp(10px,2.7cqw,16px);letter-spacing:0}
.counter{background:linear-gradient(#253043,#0b0c18 30%,#0b0c18 75%,#263044);color:#fff3da}
.game-toolbar strong{color:#fff5df}.game-toolbar small{color:#fff0d4}
.game-bottom{font-size:clamp(10px,2.7cqw,16px);color:#fff3da;background:linear-gradient(#253043,#0b0c18 28%,#0b0c18 75%,#263044)}
.game-toolbar .restart{position:relative;border-radius:0;clip-path:polygon(10% 0,90% 0,100% 18%,100% 82%,90% 100%,10% 100%,0 82%,0 18%);height:9cqw;font-size:clamp(10px,2.7cqw,16px);border:0;background:linear-gradient(#f98d9b,#9c1939 9%,#5c102b 44%,#250917 80%,#120610);box-shadow:inset 0 2px 0 #ffe1d7,inset 3px 0 0 #c43c59,inset -3px 0 0 #761329,inset 0 -4px 0 #08050c;color:#fff3df}
.game-toolbar .restart:before{content:'';position:absolute;inset:3px;pointer-events:none;border-top:1px solid #ffdcc2aa;border-bottom:1px solid #e1506b66;clip-path:inherit}
.game-toolbar :is(#sound,#music){border:0;color:#d7e8de;background:linear-gradient(#6c9d8a,#315848 9%,#18392f 44%,#10231f 80%,#07120f);box-shadow:inset 0 2px 0 #c2ddce88,inset 3px 0 0 #497c65,inset -3px 0 0 #264b3d,inset 0 -4px 0 #060d0a}
.game-toolbar :is(#sound,#music)[aria-pressed=true]{color:#fff5df;background:linear-gradient(#a0f4c4,#238c59 9%,#0c5838 44%,#063324 80%,#03180f);box-shadow:inset 0 2px 0 #e1ffed,inset 3px 0 0 #34b775,inset -3px 0 0 #146d46,inset 0 -4px 0 #02120b}
.game-toolbar :is(#sound,#music):before{border-top-color:#c4ffe1aa;border-bottom-color:#4bad7b66}
.game-toolbar button:active{transform:translateY(2px);box-shadow:inset 0 3px 5px #000b;filter:brightness(.85)}
footer{min-height:16cqw;padding-bottom:5cqw;font-size:clamp(9px,2.35cqw,14px)}
@media(max-width:620px){.game-frame{width:100vw;min-height:100dvh;aspect-ratio:9/16}}
@media(max-width:620px){.game-frame{width:min(100vw,56.25dvh);min-height:0;aspect-ratio:9/16}}


/* Two compact rows keep both audio commands readable on phones. */
.game-toolbar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));height:23cqw;gap:1.5cqw;align-content:center}
.game-toolbar .counter,.game-toolbar #restart{grid-column:span 2}
.game-toolbar #sound,.game-toolbar #music{grid-column:span 3}

/* Scale the reference composition as one portrait canvas. */
.game-frame{width:min(100vw,56.25dvh);height:auto;min-height:0;aspect-ratio:9/16;border:0;position:relative}
.banner{height:26.5cqw;border:0;overflow:hidden}
.banner-image{height:100%;width:100%;object-fit:cover}
.cabinet{padding:0;display:block;position:relative;background:url('images/cadre-etoile.png') center/100% 100% no-repeat}
main{display:block;padding:0 3.9cqw}
.game-toolbar{height:35cqw;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:17cqw 9.7cqw;align-content:start;align-items:center;gap:4.8cqw 1.15cqw}
.game-toolbar .counter{grid-column:span 3;height:auto;border:0;background:none;box-shadow:none;font:italic 900 3.6cqw Bahnschrift,'Arial Black',sans-serif;color:#faf8ff;letter-spacing:.08cqw;justify-content:flex-end;padding-right:4.5cqw;align-self:end;line-height:5.5cqw;position:relative}
.game-toolbar .counter:nth-child(2){justify-content:flex-start;padding:0 0 0 3.5cqw}
.game-toolbar .counter:first-child:after{content:'';position:absolute;right:0;top:.5cqw;height:4cqw;border-right:.2cqw solid white}
.game-toolbar strong{font:italic 900 5.5cqw Bahnschrift,'Arial Black',sans-serif;color:#fff;margin-left:2cqw;letter-spacing:.25cqw}
.game-toolbar small{font:inherit;color:inherit;margin:0}
.game-toolbar #restart,.win #again,.game-toolbar #sound,.game-toolbar #music,.game-toolbar #sound[aria-pressed=true],.game-toolbar #music[aria-pressed=true]{grid-column:span 2;flex:none;height:9.7cqw;border:0;border-radius:0;clip-path:none;box-shadow:none;background:url('images/control-frame.svg') center/100% 100% no-repeat;color:#f9f8ff;padding:0 1.3cqw;font:italic 900 3cqw Bahnschrift,'Arial Black',sans-serif;gap:1cqw;text-transform:uppercase;filter:drop-shadow(0 .5cqw .4cqw #000)}
.game-toolbar .restart:before{content:none}
.game-toolbar #sound:after,.game-toolbar #music:after{content:'';width:1.7cqw;height:1.7cqw;flex:none;border-radius:50%;background:#717d87}
.game-toolbar #sound[aria-pressed=true]:after,.game-toolbar #music[aria-pressed=true]:after{background:#20ff35;box-shadow:0 0 1cqw #18ff45,inset 0 .2cqw .3cqw #e7ffdb}
.restart svg{width:4.4cqw;height:4.4cqw;stroke-width:1.8}
#sound .sound-slash{display:none}#sound .sound-waves{display:block}
.picture-board{width:100%;aspect-ratio:870/900;margin:0;box-shadow:none;border-radius:0}
.board{gap:1.5cqw;overflow:visible;border-radius:0}
.card{border:0;background:transparent;border-radius:2cqw}
.card-back,.card-front{border-radius:2cqw;border:0;box-shadow:0 .3cqw .5cqw #0008}
.card-back-image{padding:0}
.card-front{border:.2cqw solid #b0ddff;background:#071327}
.game-bottom,.win #win-title{margin:5.4cqw 0 0;min-height:10cqw;padding:0;border:0;border-radius:0;background:none;box-shadow:none;font:italic 900 4.1cqw Bahnschrift,'Arial Black',sans-serif;letter-spacing:.15cqw;line-height:1.1;color:#faf8ff;text-shadow:0 .2cqw .3cqw #304c76;text-transform:uppercase}
footer{position:absolute;right:.5cqw;bottom:.3cqw;min-height:0;padding:0;opacity:.5}footer span{display:none}footer button{font-size:2.5cqw}
.win{padding:1cqw}.win .primary{font-size:3cqw}
@media(max-width:620px){.game-frame{width:min(100vw,56.25dvh);min-height:0;aspect-ratio:9/16}}

/* Desktop scenery belongs only to the outer margins of the portrait game. */
@media(min-width:621px) and (min-aspect-ratio:1/1){
 body::before,body::after{content:'';position:fixed;top:0;bottom:0;width:calc((100vw - 56.25dvh)/2);background-repeat:no-repeat;background-size:100% 100%;pointer-events:none;z-index:-1}
 body::before{left:0;background-image:url('images/decor-left.webp')}
 body::after{right:0;background-image:url('images/decor-right.webp')}
 body{isolation:isolate}
}

/* Victory uses the same arcade caption and control as the game. */
.win{padding:2cqw 0 0;text-align:center}
.win #win-title{margin:0;min-height:0;padding:0}
.win #again{display:flex;align-items:center;justify-content:center;width:30cqw;margin:1.5cqw auto 0}
.win #again:hover{filter:drop-shadow(0 .5cqw .4cqw #000) brightness(1.2)}
.win #again:before{content:none}
.home{min-height:130cqw;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5cqw;padding-bottom:10cqw}.home[hidden]{display:none}
.home h2{font:italic 900 5cqw Bahnschrift,'Arial Black',sans-serif;text-transform:uppercase;text-align:center;margin:0 0 3cqw}
.home .restart,.win #change-difficulty{background:url('images/control-frame.svg') center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none;color:#f9f8ff;font:italic 900 3cqw Bahnschrift,'Arial Black',sans-serif;text-transform:uppercase;height:11cqw;width:62cqw;padding:0 3cqw;filter:drop-shadow(0 .5cqw .4cqw #000)}
.home .restart:hover,.win #change-difficulty:hover{filter:brightness(1.2)}
.is-home .game-toolbar .counter,.is-home #restart,.is-home .picture-board,.is-home .game-bottom{display:none}
.is-home .game-toolbar{height:15cqw;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:10cqw;gap:2cqw}.is-home .game-toolbar #sound,.is-home .game-toolbar #music{grid-column:span 1}
.win #change-difficulty{display:block;width:44cqw;height:9.7cqw;margin:1.5cqw auto 2cqw}
.game-frame[data-level=easy] .picture-board{aspect-ratio:3/4}.game-frame[data-level=hard] .picture-board{aspect-ratio:4/6}
.game-frame[data-level=hard],.game-frame[data-level=easy]{padding-bottom:5cqw}

/* Size the complete cabinet to the viewport without clipping its content. */
body{min-height:100dvh;height:auto;overflow:visible}
.game-frame{width:min(100vw,56.25dvh);height:100dvh;min-height:0;aspect-ratio:auto;overflow:visible;padding-bottom:0!important}
.cabinet{flex:1;min-height:0;padding-bottom:0}
.game-frame .picture-board{width:var(--board-width,100%);height:var(--board-height,auto);aspect-ratio:auto;margin-inline:auto}
.game-frame .card{min-width:0;min-height:0}
.game-bottom{margin-top:3cqw;min-height:10cqw}
.home{min-height:0;height:125cqw}
@media(max-width:620px){body{display:grid}.game-frame{width:min(100vw,56.25dvh);height:100dvh;min-height:0;aspect-ratio:auto}.cabinet{min-height:0;padding-bottom:0}}

/* Cover the central cabinet, preserving desktop scenery. */
#enlarge-photo{display:none;position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:zoom-in}
.game:has(.win:not([hidden])) #enlarge-photo{display:block}
.enlarge-hint{margin:0 0 1cqw;color:#b5c3d4;font:2.4cqw Arial,sans-serif;line-height:1.2}
#photo-viewer{position:fixed;inset:0;margin:auto;width:min(100vw,56.25dvh);height:100dvh;max-width:none;max-height:none;padding:0;border:0;border-radius:0;background:#03050a;overflow:hidden}
#photo-viewer::backdrop{background:transparent}
#close-photo{position:relative;display:block;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:zoom-out}
#close-photo img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
#close-photo span{position:absolute;bottom:max(18px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);padding:6px 12px;border-radius:20px;background:#0009;color:#d0d7e2;font:12px Arial,sans-serif;white-space:nowrap;pointer-events:none}
@media(max-width:620px){#photo-viewer{width:100vw}}