:root{color-scheme:dark;--lime:#d9f68d;--ink:#0b2526;--muted:#a5b9b4}*{box-sizing:border-box}body{margin:0;background:#091b1e;color:#f3f7ea;font-family:'DM Sans',sans-serif;min-height:100vh;background-image:radial-gradient(ellipse at 60% 0,#183e3d 0,transparent 65%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0;color:inherit;background:none;touch-action:manipulation}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid var(--lime);outline-offset:3px}header{max-width:1120px;margin:0 auto;padding:24px 24px 18px;display:flex;align-items:center;justify-content:space-between}.wordmark{text-decoration:none;color:inherit;display:flex;gap:12px;align-items:center}.wordmark span{font-size:11px;letter-spacing:3px;color:var(--lime);border-right:1px solid #536966;padding-right:14px}.wordmark strong{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:500}nav{display:flex;gap:8px}nav button{background:#ffffff09;border:1px solid #ffffff16;padding:9px 12px;border-radius:10px;font-size:12px}#fullscreen{font-size:20px;padding:4px 12px}main{max-width:1120px;margin:auto;padding:0 24px 30px}.game-shell{position:relative;border:1px solid #8db3a445;border-radius:22px;overflow:hidden;background:#18494c;aspect-ratio:8/5;box-shadow:0 25px 80px #0005;isolation:isolate}canvas{width:100%;height:100%;display:block;touch-action:none}.overlay{position:absolute;inset:0;background:linear-gradient(90deg,#071e25e8,#112e36b0 65%,#0f2c3140);padding:30px 6%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.overlay[hidden],*[hidden]{display:none!important}.brand{width:166px;height:130px;position:relative;overflow:hidden;background:#fbfbfd;border-radius:14px;margin-bottom:14px;box-shadow:0 4px 22px #0002}.brand img{position:absolute;width:173px;max-width:none;left:-3px;top:-126px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:3px;color:var(--lime);margin:0 0 10px}h1,h2{font-family:'Space Grotesk',sans-serif;letter-spacing:-1.5px;line-height:1.04;margin:0 0 14px}h1{font-size:clamp(28px,4.2vw,48px)}h2{font-size:36px}.intro{color:#cadbd4;font-size:14px;line-height:1.65;margin:0 0 20px}.primary{background:var(--lime);color:#14302b;border-radius:10px;padding:14px 20px;font-weight:700;display:flex;gap:36px;align-items:center;box-shadow:0 4px 0 #84a846;transition:filter .15s,transform .15s}.primary:hover{filter:brightness(1.08);transform:translateY(-1px)}.primary:active{transform:translateY(2px)}.text-button{font-size:12px;color:#d3e5dc;padding:14px 0}.controls{font-size:9px;letter-spacing:1px;color:#92aaa6;margin-top:10px}.hud{position:absolute;top:0;left:0;right:0;height:66px;background:linear-gradient(#061d2bea,#09232b88);display:flex;align-items:center;gap:12px;padding:10px 18px;pointer-events:none}.hud button{pointer-events:auto;width:36px;height:36px;border:1px solid #ffffff30;border-radius:10px;font-size:20px;background:#092a36b0}.hud small{display:block;color:#c2d3b5;font-size:9px;letter-spacing:2px;margin-bottom:4px}.hud strong{font-family:'Space Grotesk',sans-serif;font-size:16px}.hud-right{margin-left:auto;display:flex;gap:18px;align-items:center}.hud-right span{font-family:'Space Grotesk',sans-serif;font-size:26px;color:var(--lime)}#progress{position:absolute;top:66px;left:0;right:0;height:3px;background:#ffffff20}#progress i{height:100%;display:block;background:var(--lime);width:0}.compact{align-items:center;text-align:center;background:#081f2cce;backdrop-filter:blur(5px)}.compact h2{font-size:48px}.compact p:not(.eyebrow){color:#d2ded8;line-height:1.7}.compact #stars{color:#f5cd69;font-size:32px;letter-spacing:8px;margin:8px 0 24px}.start-hint{position:absolute;left:50%;top:73%;transform:translateX(-50%);background:#08232cdf;border:1px solid #ffffff30;padding:14px 24px;border-radius:12px;font-size:15px;white-space:nowrap;pointer-events:none}.start-hint span{color:var(--lime);margin-left:14px}footer{display:flex;justify-content:space-between;padding:18px 2px;color:#95aaa5;font-size:11px}footer b{color:#dce9e0}.legend{display:flex;justify-content:space-between;gap:14px;border-top:1px solid #ffffff13;padding-top:20px}.legend>div{display:flex;gap:12px;align-items:center}.legend span{font-size:25px}.legend p{margin:0;font-size:10px;line-height:1.7;color:#8fa9a2}.legend b{display:block;font-size:12px;color:#dde6da}#levels{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;width:100%;margin:8px 0}#map{background:#092832e8;padding:40px 5%}#levels button{text-align:left;padding:15px 10px;border:1px solid #709b8c50;border-radius:12px;background:#31564b40;min-height:90px}#levels button:hover:not(:disabled){border-color:var(--lime);background:#4d765a70}#levels button:disabled{opacity:.35;cursor:default}#levels .num{font-family:'Space Grotesk',sans-serif;color:var(--lime);font-size:23px;display:block}#levels .name{display:block;font-size:10px;margin-top:8px}#levels .rating{font-size:10px;color:#f1cd6b}.game-shell:fullscreen{width:100vw;height:100dvh;border:0;border-radius:0;aspect-ratio:auto;background:#091b1e}.game-shell:fullscreen canvas{object-fit:contain}.game-shell:fullscreen .overlay{padding:24px 7%}@media(max-width:700px){header{padding:16px}main{padding:0 12px 20px}.game-shell{aspect-ratio:4/5;border-radius:16px}canvas{object-fit:cover}.overlay{padding:22px 7%;background:#08232bcc}.brand{width:150px;height:118px}.brand img{width:157px;top:-115px}h1{font-size:34px}.intro{font-size:12px}.controls{font-size:8px}footer{gap:10px;font-size:9px}.legend{display:grid;grid-template-columns:1fr 1fr;gap:18px}.hud{padding:8px 10px}.hud strong{font-size:12px}.hud-right{gap:8px}.hud-right span{font-size:20px}#levels{grid-template-columns:repeat(2,1fr);gap:6px}#map{justify-content:flex-start;overflow:auto;padding:22px 6%}#map h2{font-size:27px}#map .intro{margin-bottom:8px}#levels button{min-height:58px;padding:8px 10px;display:grid;grid-template-columns:28px 1fr;gap:0 8px;align-items:center}#levels .name{margin:0;font-size:10px}#levels .rating{grid-column:2}.compact h2{font-size:36px}.start-hint{font-size:12px;padding:12px 18px}} .hud-logo{width:54px;height:42px;position:relative;overflow:hidden;background:#fbfbfd;border-radius:5px;flex-shrink:0}.hud-logo img{position:absolute;width:56px;max-width:none;left:-1px;top:-41px}@media(max-width:700px){.hud-logo{width:45px;height:35px}.hud-logo img{width:47px;top:-34px}.hud{gap:7px}} .byline{font-family:'Space Grotesk',sans-serif;font-size:20px;color:var(--lime);margin:-4px 0 18px}.wordmark strong{font-size:24px}.wordmark span{font-size:9px;letter-spacing:2px}@media(max-width:700px){.wordmark{gap:8px}.wordmark span{font-size:8px;letter-spacing:1px;padding-right:8px}.wordmark strong{font-size:18px}.byline{font-size:16px}.brand{margin-bottom:16px}} .player-form{margin-top:10px;margin-bottom:2px;max-width:300px;width:100%}.player-form label{font-size:11px;color:#cfddd2;display:block;margin-bottom:5px}.player-form>div{display:flex;gap:6px}.player-form input{min-width:0;width:100%;background:#092c35;border:1px solid #729a89;border-radius:8px;color:#fff;font:inherit;padding:8px 10px;font-size:12px}.player-form button{background:#315c49;border-radius:8px;padding:0 12px}.player-form small{font-size:9px;color:#acc4b7;display:block;margin-top:5px}.controls{margin-top:0}.overlay{padding-top:18px;padding-bottom:18px}#leaderboard{background:#092832f2;overflow:auto}#leaderboard h2{font-size:30px}:is(#ranktable,#rankmoretable){width:100%;border-collapse:collapse;font-size:13px;margin-top:12px}:is(#ranktable,#rankmoretable) th{text-align:left;color:#a6bfaf;font-size:10px;text-transform:uppercase;letter-spacing:1px}:is(#ranktable,#rankmoretable) th,:is(#ranktable,#rankmoretable) td{padding:9px 6px;border-bottom:1px solid #ffffff15}:is(#ranktable,#rankmoretable) td:nth-child(3){color:var(--lime);font-weight:700}#rankstatus,#myscore{font-size:12px;color:#c6d9ce}#installhelp{background:#153e3b;border:1px solid #7aa78a;border-radius:12px;padding:18px;margin-top:15px;font-size:13px;line-height:1.6}#installhelp button{color:var(--lime);font-weight:700}nav{flex-wrap:wrap;justify-content:flex-end}@media(max-width:700px){header{gap:6px}.wordmark{display:block}.wordmark span{display:block;border:0}.wordmark strong{font-size:15px}nav{gap:4px}nav button{padding:7px;font-size:10px}#fullscreen{padding:3px 8px}.byline{margin-bottom:10px}.game-shell{min-height:540px;aspect-ratio:4/5}.game-shell canvas{object-fit:fill}.game-shell:fullscreen{min-height:0}#leaderboard h2{font-size:25px}:is(#ranktable,#rankmoretable) th,:is(#ranktable,#rankmoretable) td{padding:8px 3px}.intro{font-size:11px}.primary{padding:12px 16px}.text-button{padding:11px 0}} .brand,.hud-logo{background:transparent;box-shadow:none;overflow:visible}.brand img,.hud-logo img{position:static;width:100%;height:100%;max-width:100%;object-fit:contain}.mission{position:absolute;top:76px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;color:#f5edc7;background:#173b38d9;border:1px solid #668f7650;border-radius:8px;padding:7px 12px;pointer-events:none}.overlay #rewards{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:8px}.reward{background:#183a36;border:1px solid #396258;border-radius:8px;padding:12px;font-size:12px;color:#819991}.reward.earned{color:#e7f3c5;border-color:#a0bc61}#album{background:#082c32f0;overflow:auto}#albumopen{padding-bottom:2px}#albumopen+#routes{padding-top:6px}#installhelp{position:fixed;inset:auto 18px 25px;z-index:20;box-shadow:0 12px 80px #000a}.game-shell:fullscreen{border:0;width:100vw;height:100dvh}.game-shell:fullscreen canvas{object-fit:fill}@media(max-width:700px){html,body{height:100%;overflow:hidden}body{background:#091b1e}main{padding:0;max-width:none;height:100dvh}.game-shell{border:0;border-radius:0;width:100vw;height:100dvh;min-height:0;aspect-ratio:auto;box-shadow:none}.game-shell canvas{width:100%;height:100%;object-fit:fill}body>header{position:fixed;top:max(8px,env(safe-area-inset-top));right:10px;padding:0;z-index:6;max-width:95%}.wordmark{display:none}body[data-scene="intro"]>header,body[data-scene="running"]>header,body[data-scene="ready"]>header,body[data-scene="dead"]>header,body[data-scene="won"]>header{display:none}footer,.legend{display:none}.overlay{padding:48px 8% 20px}.hud{padding-top:calc(10px + env(safe-area-inset-top));height:calc(66px + env(safe-area-inset-top))}#progress{top:calc(66px + env(safe-area-inset-top))}.mission{top:calc(75px + env(safe-area-inset-top));font-size:10px;max-width:96%;white-space:normal;text-align:center}.overlay .primary{min-height:46px}.intro{font-size:12px}#map,#album,#leaderboard{padding-top:58px}#map h2,#album h2{font-size:27px}#rewards .reward{font-size:11px;padding:11px}.compact{padding-top:40px}} .authlink{font-size:11px;color:var(--lime);margin:9px 0;text-decoration:underline} .hud{height:132px;padding:12px 16px;background:linear-gradient(#092932f2,#123b43dc);gap:16px;border-bottom:1px solid #a5c99d55}.hud-logo{width:120px;height:95px;background:transparent;border-radius:0}.hud-logo img{width:100%;height:100%;object-fit:contain;position:static}.hud-title{display:flex;flex-direction:column;gap:6px}.hud .game-title{font-family:Georgia,serif;font-size:36px;color:#edf4c6;letter-spacing:-1px;line-height:1}.hud .hud-title>strong:last-child{font-size:14px;color:#b9d7d1}.hud small{font-size:9px;letter-spacing:1.4px}.hud #home{width:27px;font-size:16px;border:0}.hud-right{flex-direction:column;gap:8px}.hud-right span{font-size:25px;color:#ffdc79}#progress{top:132px}.mission{top:145px;background:#09323ade;max-width:92%;white-space:normal;text-align:center}.game-shell canvas{object-fit:contain!important}@media(max-width:700px){.hud{padding:calc(10px + env(safe-area-inset-top)) 12px 10px;height:calc(132px + env(safe-area-inset-top));gap:10px}.hud-logo{width:112px;height:92px}.hud .game-title{font-size:27px;white-space:nowrap}.hud .hud-title>strong:last-child{font-size:12px}.hud #home{width:20px}.hud-right{gap:6px}.hud-right span{font-size:20px}.hud-right button{width:28px;height:28px;font-size:16px}#progress{top:calc(132px + env(safe-area-inset-top))}.mission{top:calc(144px + env(safe-area-inset-top));font-size:10px}.overlay{padding-top:45px}.game-shell canvas{object-fit:fill!important}} .hud{display:grid;grid-template-columns:28px 120px minmax(0,1fr) 40px}.hud-title{min-width:0}.hud-right{margin-left:0}.hud .game-title{white-space:normal}.mission{font-size:11px;max-width:84%}body[data-victory="yes"] #result{justify-content:flex-end;inset:58% 0 0;background:linear-gradient(#0a282ee8,#081c25);backdrop-filter:none;padding:20px 7% 24px}body[data-victory="yes"] #result h2{font-size:29px}body[data-victory="yes"] #result #stars{margin:0 0 12px;font-size:23px}body[data-victory="yes"] #result p{margin:8px 0} @media(max-width:700px){.hud{grid-template-columns:20px 104px minmax(0,1fr) 30px;gap:8px}.hud-logo{width:104px}.hud .game-title{font-size:27px;line-height:1.04}.hud small{letter-spacing:.7px;font-size:8px}.hud-title{gap:5px}body[data-victory="yes"] #result{inset:58% 0 0;padding:15px 7% 22px}body[data-victory="yes"] #result h2{font-size:27px}.mission{max-width:88%}} .music-volume{display:flex;align-items:center;gap:10px;font-size:10px;color:#bad2c7;margin:8px 0}.music-volume input{width:85px;accent-color:#d9f68d} #quiz{inset:58% 0 0;justify-content:center;background:#09262ff2;backdrop-filter:none;padding:18px 7%}#quiz h2{font-size:25px;line-height:1.15}#quiz p:not(.eyebrow){font-size:11px;margin:5px 0 12px}#quizanswers{display:grid;gap:7px;width:100%;max-width:400px}#quizanswers button{background:#285447;border:1px solid #96ba7d;border-radius:8px;padding:10px 14px;font-size:14px}#quizanswers button:hover{background:#426c50}body[data-scene="quiz"]>header{display:none} .groupmark{position:relative;overflow:hidden;aspect-ratio:6.2057;display:block;height:auto!important;width:100%;min-height:0!important;line-height:0!important}.groupmark img{position:absolute;width:100%;height:auto;left:0;top:-37.14%}.hud .game-title.groupmark{min-width:0;width:100%;overflow:hidden}.hud .hud-title{justify-content:center}@media(max-width:700px){.hud{grid-template-columns:18px 94px minmax(0,1fr) 30px;gap:6px}.hud-logo{width:94px}.hud .game-title.groupmark{width:100%;margin-bottom:7px}.hud .hud-title>strong:last-child{font-size:13px}.hud-title small{font-size:8px}} @media(max-width:700px){.hud{grid-template-columns:18px 100px minmax(0,1fr) 30px;grid-template-rows:45px 65px;height:calc(140px + env(safe-area-inset-top));gap:4px 7px}.hud-title{display:contents}.hud .game-title.groupmark{grid-column:2/4;grid-row:1;width:100%;margin:0;align-self:center}.hud-logo{grid-column:2;grid-row:2;width:100px;height:72px;align-self:center}.hud #home{grid-column:1;grid-row:1/3}.hud-right{grid-column:4;grid-row:1/3}.hud-title small{grid-column:3;grid-row:2;align-self:start;margin-top:14px}.hud-title>strong:last-child{grid-column:3;grid-row:2;align-self:end;margin-bottom:12px;font-size:15px!important}.hud-right span{font-size:23px}#progress{top:calc(140px + env(safe-area-inset-top))}.mission{top:calc(149px + env(safe-area-inset-top))}} /* Arcade art direction follows the supplied Madeira platformer references. */ body,button,input{font-family:monospace}.overlay{font-family:monospace;background:linear-gradient(90deg,#061c38c9,#0b2b4380)}.primary{border-radius:2px;background:#ffcf46;color:#192d48;border:3px solid #fff09c;border-bottom-color:#8d621b;border-right-color:#aa8028;box-shadow:4px 5px #071a32;font-size:16px;text-shadow:none;min-height:48px}.primary:hover{background:#ffe678}.text-button{font-size:12px;color:#fff1a7;text-shadow:2px 2px #09283f;padding:10px 0}.player-form{max-width:290px;margin-top:18px}.player-form label{color:#fff2a6;font-size:12px;letter-spacing:1px;text-transform:uppercase;margin-bottom:7px}.player-form input{background:#fff1b5;color:#233248;border:3px solid #dba232;border-radius:1px;font-size:15px;padding:9px 12px;box-shadow:2px 3px #092038}.player-form button{background:#76b54c;color:#122a3b;border:3px solid #c6e48e;border-radius:1px;box-shadow:2px 3px #092038;font-weight:bold}.player-form small{font-size:9px;color:#fff7d5;line-height:1.3;margin-top:7px}.controls{color:#fff1a7;font-size:9px;letter-spacing:.5px}.music-volume{color:#f8eeb9;margin-top:4px}nav button{border-radius:2px;background:#1c526c;border:2px solid #64a6b4;color:#ffefaa;font-family:monospace}.hud{background:linear-gradient(#07162df7,#092c43e8);border-bottom:3px solid #9eb451}.hud .hud-title>strong:last-child{color:#ffde63}.mission{background:#082847d9;border-radius:2px;color:#fff3b5;font-family:monospace}.compact h2,#map h2,#album h2,#leaderboard h2{font-family:monospace;color:#ffdf70;letter-spacing:-1px}#map,#album,#leaderboard{background:#0b2949ed}#levels button{border-radius:1px;border:2px solid #8ba85d;background:#204e55;color:#fff9db}#quizanswers button{border-radius:2px;background:#22536b;border:3px solid #95b760;color:#fff5bd}#quiz{background:#0b2948f0} @media(max-height:600px) and (min-width:700px){.hud{height:78px;grid-template-columns:28px 100px minmax(0,1fr) 40px;padding:6px 14px}.hud-logo{width:100px;height:64px}.hud .game-title.groupmark{width:280px}.hud-title{gap:2px}.hud-title small{margin:0}.hud .hud-title>strong:last-child{font-size:12px}#progress{top:78px}.mission{top:86px;font-size:10px}.hud-right{flex-direction:row;gap:12px}} canvas{image-rendering:pixelated}#quiz{inset:auto!important;left:50%!important;top:26%!important;transform:translate(-50%,-20%);width:min(560px,88%);min-height:260px;justify-content:center;align-items:center;padding:25px!important;background:#153f60f7;border:5px solid #eec768;border-bottom-color:#825c30;border-right-color:#a67a38;border-radius:0;box-shadow:0 0 0 5px #092036,8px 12px 0 #05152490;text-shadow:2px 2px #081c35;z-index:10}#quiz::before{content:'✿ ÎLE DE MADÈRE ✿';font-size:11px;letter-spacing:2px;color:#ffd469;margin-bottom:14px}#quiz h2{font-size:22px;color:#ffedb5}#quizanswers{max-width:none;gap:10px}#quizanswers button{min-height:44px;text-align:left;padding:10px 16px;border-color:#cece7b;background:#285371;font-family:monospace;font-weight:bold}#quizanswers button:disabled{opacity:.45;pointer-events:none}#drop{display:none;position:absolute;right:16px;bottom:24px;z-index:5;border:3px solid #d5ce87;background:#193b59cc;color:#fff0ac;padding:12px;font:13px monospace}body[data-scene="running"] #drop{display:block}body[data-scene="quiz"] #hud,body[data-scene="quiz"] #mission,body[data-scene="quiz"] #progress{display:none!important}@media(max-height:600px) and (min-width:700px){#quiz{top:14%!important;transform:translateX(-50%);min-height:240px;width:min(600px,78%);padding:18px!important}#quizanswers{grid-template-columns:repeat(3,1fr)}#quizanswers button{min-height:70px;text-align:center}#quiz h2{font-size:20px}} /* Landscape-first full-screen layout; HUD columns reserve space for scoring. */ html,body{width:100%;height:100%;overflow:hidden}body{margin:0}main{padding:0;max-width:none;width:100%;height:100dvh}.game-shell{position:fixed;inset:0;width:100%;height:100dvh;min-height:0;border:0;border-radius:0;aspect-ratio:auto;box-shadow:none}.game-shell canvas{width:100%;height:100%;object-fit:fill!important}body>header{position:fixed;top:max(8px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));padding:0;z-index:6}.wordmark,footer,.legend{display:none}body[data-scene="intro"]>header,body[data-scene="running"]>header,body[data-scene="ready"]>header,body[data-scene="dead"]>header,body[data-scene="won"]>header,body[data-scene="quiz"]>header{display:none} .hud{display:grid;grid-template-columns:28px 76px minmax(100px,1fr) minmax(170px,auto);grid-template-rows:1fr;height:calc(48px + env(safe-area-inset-top));padding:calc(3px + env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 3px max(10px,env(safe-area-inset-left));gap:8px;align-items:center;z-index:4;overflow:visible}.hud #home{grid-column:1;grid-row:1;width:28px;height:32px}.hud-logo{grid-column:2;grid-row:1;width:76px;height:40px}.hud-title{display:flex;grid-column:3;grid-row:1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:3px 8px;min-width:0}.hud .game-title.groupmark{grid-column:auto;grid-row:auto;align-self:auto;width:min(200px,100%);margin:0;flex-basis:100%;max-height:24px}.hud-title small{grid-column:auto;grid-row:auto;align-self:auto;margin:0;font-size:8px}.hud-title>strong:last-child{grid-column:auto;grid-row:auto;align-self:auto;margin:0;font-size:10px!important}.hud-right{grid-column:4;grid-row:1;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;gap:12px;margin:0;min-width:170px}.hud-right .scorebox,.hud-right .leftbox{display:flex;flex-direction:column;align-items:center;gap:0}.hud-right small{font-size:8px;color:#fff2be;margin:0;letter-spacing:1px}.hud-right span{font-size:24px;line-height:26px;color:#ffdf64;font-weight:bold;font-variant-numeric:tabular-nums}.hud-right b{font-size:13px;color:#fcf4c9;white-space:nowrap}.hud-right button{width:30px;height:32px;font-size:18px}#progress{top:calc(48px + env(safe-area-inset-top));z-index:4;height:3px}.mission{top:calc(54px + env(safe-area-inset-top));font-size:10px;left:50%;max-width:85%;padding:4px 8px;white-space:nowrap;margin:0;z-index:3}#rotate{display:none;position:fixed;inset:0;background:#102b45;z-index:100;place-content:center;justify-items:center;gap:14px;color:#ffdd68;text-align:center;padding:24px}#rotate b{font-size:80px}#rotate strong{font-size:24px}#rotate span{font-size:13px;color:#f8eeca}@media(orientation:portrait) and (hover:none) and (pointer:coarse){#rotate{display:grid}} @media(orientation:landscape) and (max-height:450px){.primary{min-height:40px;padding:8px 14px}#map,#album,#leaderboard{padding:24px 6%;overflow:auto}#map h2,#album h2,#leaderboard h2{font-size:23px}#levels{gap:5px}#levels button{padding:10px}#drop{padding:8px;bottom:12px;right:max(12px,env(safe-area-inset-right))}#quiz{top:15%!important;width:74%;min-height:0;padding:14px!important}#quiz::before{margin-bottom:8px}#quiz h2{font-size:17px;margin-bottom:8px}#quizguide{font-size:11px;margin:5px 0}#quizanswers{grid-template-columns:repeat(3,1fr)}#quizanswers button{min-height:56px;font-size:12px}body[data-victory="yes"] #result{inset:52% 0 0;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto auto;align-content:center;justify-items:center;padding:8px 7%;gap:2px 10px}#result .eyebrow{display:none}body[data-victory="yes"] #result h2{grid-column:1;font-size:22px;margin:0}body[data-victory="yes"] #result #resultinfo{grid-column:1;font-size:11px;margin:0}body[data-victory="yes"] #result #stars{grid-column:1;font-size:17px;margin:0}#result #again{grid-column:2;grid-row:1/3}#result #resultmap{grid-column:2;grid-row:3;padding:2px}} #help{background:#0a2947f5;align-items:center;justify-content:center;padding:22px 6%;overflow:auto}#help h2{font:24px monospace;color:#ffdc69;margin-bottom:12px}.helpgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;max-width:880px}.helpgrid p{font-size:12px;line-height:1.45;color:#fcf1cf;margin:0 0 12px}.helpgrid b{color:#ffdd72}#helpback{margin-top:8px}@media(max-height:360px){#help{padding:12px 5%}.helpgrid p{font-size:10px;margin-bottom:8px}#help h2{font-size:19px;margin:0 0 8px}#helpback{font-size:12px;min-height:32px;padding:4px 12px}} #records{display:none;position:absolute;top:calc(52px + env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));justify-content:space-between;gap:12px;font:10px monospace;color:#fdf0b5;z-index:4;pointer-events:none;text-shadow:1px 1px #071c30}#records span{background:#102d49d9;padding:4px 8px;border:1px solid #a2ab69}#records b{font-size:14px;color:#ffde5f;font-variant-numeric:tabular-nums}body[data-scene="ready"] #records,body[data-scene="running"] #records,body[data-scene="paused"] #records,body[data-scene="dead"] #records{display:flex}.mission{top:calc(80px + env(safe-area-inset-top));font-size:9px;padding:3px 8px} #online-record{display:none}body[data-scene="dead"] #online-record{display:block}#records{justify-content:flex-end}body[data-scene="dead"] #records{justify-content:space-between}#quitpause{color:#ffd39a} /* Arcade score is drawn in the game canvas: same bitmap grid at every resolution. */ #hud{background:none!important;height:60px!important;pointer-events:none}.hud-logo,.hud-title,.scorebox,.leftbox{display:none!important}#home,#pause{position:absolute;top:12px;pointer-events:auto;background:#112a3cdd;border-radius:3px}#home{left:max(8px,env(safe-area-inset-left))}#pause{right:max(8px,env(safe-area-inset-right))}#records{display:none!important}body[data-scene="dead"] #records{display:block!important;top:auto;bottom:12px}body[data-scene="dead"] #records>span:last-child{display:none}#mission,#progress{display:none!important} /* Paint to every physical edge; safe-area spacing applies only to controls. */ html,body{background:#091b1e!important;margin:0!important;padding:0!important} .game-shell:fullscreen,.game-shell{inset:0!important;margin:0!important;padding:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important} .game-shell::backdrop{background:#091b1e}canvas{outline:none} /* Game launcher: the landscape stays visible, with one clear action panel. */ /* The home screen stays simple; secondary controls are behind Options. */ #menuoptions{position:absolute;inset:5% 20%;z-index:12;overflow:auto;background:#174a38;border:3px solid #dff3b0;border-radius:24px;padding:24px;display:flex;flex-wrap:wrap;gap:12px;align-content:center;justify-content:center;box-shadow:0 12px 50px #0008} #menuoptions h2{width:100%;font-size:25px;margin:0 0 10px;color:#ffdf60} #menuoptions .panel-layout>button:not(#optionsclose){padding:10px 14px;border-radius:14px;background:#2c7052;border:1px solid #99be91;font-size:14px} #menuoptions #optionsclose{position:absolute;right:14px;top:10px;font-size:23px} #menuoptions .player-form{max-width:300px;width:100%;margin:8px 0} /* Hidden means absent from both rendering and touch input, including ID rules. */ #shell [hidden]{display:none!important} :is(#ranktable,#rankmoretable){font-size:19px}:is(#ranktable,#rankmoretable) td:nth-child(3){font-size:27px;font-weight:900}#myscore{font-size:23px;font-weight:800;color:#ffdf66}#records b{font-size:28px}#records span{font-size:14px} @font-face{font-family:MadeiraArcade;src:url('assets/madeira-arcade-v24.ttf') format('truetype');font-display:swap} body[data-scene="intro"] canvas{image-rendering:auto} #quiz{top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;width:min(820px,92%)!important;max-height:calc(100dvh - 24px);min-height:0!important;padding:20px 24px!important;overflow:auto;background:linear-gradient(#244c73,#0c223e)!important;border:4px solid #ffdc75;border-right-color:#ad742e;border-bottom-color:#ad742e;box-shadow:0 0 0 3px #07182e,7px 9px 0 #0008;gap:8px} #quiz::before{content:'QUIZ · MADÈRE';font:18px/1.35 MadeiraArcade,monospace;color:#ffdc75;text-shadow:3px 3px #08162e;letter-spacing:1px;margin:0 0 4px} #quiz .eyebrow{display:none} #quiz #quizquestion{font:clamp(18px,2.2vw,26px)/1.55 MadeiraArcade,monospace;color:#fff3c5;letter-spacing:0;text-transform:uppercase;text-shadow:3px 3px #061629;margin:0;max-width:100%} #quiz #quizguide{font:12px/1.5 MadeiraArcade,monospace;color:#b2d7eb;letter-spacing:0;margin:2px 0 8px} #quiz #quizanswers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:none;gap:12px} #quiz #quizanswers button{font:clamp(14px,1.65vw,20px)/1.5 MadeiraArcade,monospace;text-transform:uppercase;min-height:78px;padding:12px 10px;text-align:center;color:#fff6cf;border:3px solid #73c7e4;border-right-color:#1c557e;border-bottom-color:#1c557e;background:linear-gradient(#2b6987,#17466d);box-shadow:3px 4px 0 #061528;text-shadow:2px 2px #071b32;white-space:normal;overflow-wrap:anywhere;transition:transform .1s,background .1s} #quiz #quizanswers button:not(:disabled):hover,#quiz #quizanswers button:focus-visible{background:linear-gradient(#6c6435,#494b30);border-color:#ffe187;outline:2px solid #ffe187;outline-offset:2px;color:#fff5b1} #quiz #quizanswers button:not(:disabled):active{transform:translate(2px,3px);box-shadow:1px 1px 0 #061528} @media(max-height:400px){#quiz{padding:10px 18px!important;gap:5px}#quiz::before{font-size:14px}#quiz #quizquestion{font-size:17px;line-height:1.4}#quiz #quizguide{font-size:10px;margin:0 0 4px}#quiz #quizanswers button{min-height:60px;font-size:13px;padding:8px}} @media(orientation:portrait){#quiz #quizanswers{grid-template-columns:1fr}} #jump,#gamesound{display:none;position:absolute;bottom:24px;z-index:6;border:3px solid #d5ce87;background:#193b59e8;color:#fff0ac;min-height:48px;padding:12px;font:bold 13px MadeiraArcade,monospace;touch-action:none}#jump{right:16px;min-width:120px}#gamesound{left:max(16px,env(safe-area-inset-left));min-width:100px}body[data-scene="running"] #jump,body[data-scene="running"] #gamesound,body[data-scene="paused"] #gamesound{display:block}#drop{right:152px;min-height:48px} /* Arcade result cards retain the landscape rather than replacing it with a table. */ body[data-scene="dead"] #result{inset:10% 12%;border:4px solid #ffdf79;border-right-color:#937139;border-bottom-color:#937139;box-shadow:0 0 0 4px #0b2033,8px 10px #0006;background:linear-gradient(145deg,#143e53ef,#082737ed);backdrop-filter:none;padding:22px 5%;gap:8px;overflow:auto} body[data-scene="dead"] #result .eyebrow{font:14px/1.4 MadeiraArcade,monospace;color:#a9df9b;letter-spacing:1px;margin:0} body[data-scene="dead"] #result h2{font:clamp(32px,5vw,62px)/1.3 MadeiraArcade,monospace;color:#ffdd6e;text-shadow:4px 5px #071524;letter-spacing:1px;margin:0} body[data-scene="dead"] #result #resultinfo{font:900 clamp(18px,2.3vw,28px)/1.4 Arial,sans-serif;color:#fff3c4;margin:3px 0;text-shadow:2px 3px #081c31} body[data-scene="dead"] #result #resultscore{font:700 16px/1.5 Arial,sans-serif;color:#bce3dc;margin:0 0 8px} body[data-scene="dead"] #result #stars{display:none} body[data-scene="dead"] #result #again{font:17px/1.3 MadeiraArcade,monospace;min-height:56px;padding:12px 26px} body[data-scene="dead"] #result #resultmap{font:12px/1.4 MadeiraArcade,monospace;padding:10px;color:#dbefda} body[data-victory="yes"] #resultscore{display:none} /* Thumb controls shaped like raised buttons on an arcade pad. */ #jump,#gamesound{width:76px;height:76px;min-width:0;min-height:0;padding:0;border-radius:50%;border:3px solid #d9ecbb;border-bottom:6px solid #375335;background:radial-gradient(circle at 35% 25%,#76af66,#367344 70%);box-shadow:0 0 0 4px #142d3bbd,0 7px 0 #102433a6,inset 0 2px 3px #e3ffd39c;color:#fff7cf;text-shadow:1px 2px #23362d;font:11px/1.2 MadeiraArcade,monospace;bottom:22px;z-index:6;align-items:center;justify-content:center;flex-direction:column;gap:4px;touch-action:none} #jump{right:max(24px,env(safe-area-inset-right));background:radial-gradient(circle at 35% 25%,#f6d570,#b88332 70%);border-color:#ffe7a0;border-bottom-color:#755022;box-shadow:0 0 0 4px #142d3bbd,0 7px 0 #102433a6,inset 0 2px 3px #fff3c19c} #jump::before{content:'↑';font:900 31px/1 Arial,sans-serif} #gamesound::before{content:'♪';font:900 29px/1 Arial,sans-serif} #gamesound[aria-pressed="false"]::before{content:'×';color:#ffc7ac} #jump:active,#gamesound:active{transform:translateY(4px);box-shadow:0 0 0 4px #142d3bbd,inset 0 2px 4px #0004} body[data-scene="running"] #jump,body[data-scene="running"] #gamesound,body[data-scene="paused"] #gamesound{display:flex} #drop{right:112px;bottom:35px} @media(max-height:390px){#jump,#gamesound{width:64px;height:64px;bottom:17px;font-size:9px}#jump::before,#gamesound::before{font-size:25px}body[data-scene="dead"] #result{inset:5% 12%;gap:5px;padding:12px 5%}body[data-scene="dead"] #result h2{font-size:30px}body[data-scene="dead"] #result #resultscore{font-size:13px}} /* Corner controls never overlap the canvas logo. */ #home,#pause{top:max(6px,env(safe-area-inset-top));width:40px!important;height:40px!important;border-radius:50%;border:2px solid #a0c0b7;box-shadow:0 3px 0 #081924;background:#1b3c4df2;font:bold 21px Arial,sans-serif} #home{left:max(12px,env(safe-area-inset-left))} #pause{right:max(12px,env(safe-area-inset-right))} body[data-scene="dead"] #records{display:none!important} body[data-scene="dead"] #result{inset:17% 12% 3%;padding:16px 5%;gap:6px} @media(max-height:390px){body[data-scene="dead"] #result{inset:17% 10% 3%;padding:10px 4%;gap:4px}body[data-scene="dead"] #result .eyebrow{font-size:11px}body[data-scene="dead"] #result h2{font-size:27px}body[data-scene="dead"] #result #resultinfo{font-size:19px;margin:0}body[data-scene="dead"] #result #resultscore{font-size:12px;margin:0}body[data-scene="dead"] #result #again{min-height:46px;font-size:14px;padding:10px 18px}body[data-scene="dead"] #result #resultmap{font-size:10px;padding:8px}} /* Keep the brand alone in the left corner; all navigation stays on the right. */ #home{left:auto!important;right:max(68px,calc(env(safe-area-inset-right) + 56px))!important}#pause{right:max(12px,env(safe-area-inset-right))} /* Landscape adventure buttons, with room for thumbs and recognizable places. */ #map{align-items:center;justify-content:center;background:linear-gradient(120deg,#071923ed,#183e40dc);padding:24px 4%!important}#map h2{font-family:MadeiraArcade,monospace;color:#fff3c2;text-align:center;font-size:32px;text-shadow:3px 3px #102433;margin:0 0 8px}#map .eyebrow{color:#ffce63}#map .intro{text-align:center;margin:0 0 20px;font-weight:700}#levels{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px!important;width:100%;max-width:1100px}#levels .route-card{position:relative;isolation:isolate;overflow:hidden;display:flex!important;flex-direction:column;align-items:center;justify-content:flex-end;min-height:218px;padding:14px 8px!important;border:3px solid var(--route-accent)!important;border-radius:22px!important;background:#152f3d;box-shadow:0 7px 0 #071924,0 0 0 2px #284452,inset 0 1px 0 #fff6;transform:rotate(-1deg);transition:transform .13s,filter .13s}#levels .route-card:nth-child(even){transform:rotate(1deg)}#levels .route-card:active{transform:translateY(5px);box-shadow:0 2px 0 #071924}#levels .route-card:hover{filter:brightness(1.1)}.route-scene{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(0deg,#071e2ff5 5%,#071e2f33 70%),var(--route-art);background-size:cover;background-position:center}.route-number{position:absolute;top:10px;left:10px;background:var(--route-accent);color:#122e3a;border:2px solid #fff6;border-radius:50%;width:38px;height:38px;display:grid;place-items:center;font:900 20px Arial,sans-serif;box-shadow:0 3px #081a2a}.route-name{font:900 17px Arial,sans-serif;color:white;text-align:center;min-height:40px;display:grid;place-items:center;text-shadow:0 2px 3px #071b25}.route-stars{height:23px;color:#ffd767;font-size:20px;letter-spacing:2px}.route-launch{display:block;background:linear-gradient(#fff3bd,var(--route-accent));color:#10303a;border:2px solid #fff6;border-radius:13px;padding:11px 4px;width:100%;font:900 13px Arial,sans-serif;box-shadow:0 3px 0 #1b5761}.route-locked{filter:grayscale(.7);opacity:.7}.route-locked .route-launch{background:#2b4552;color:#d2dcde;font-size:10px} @media(orientation:landscape) and (max-height:450px){#map{padding:14px 4%!important}#map h2{font-size:24px}#map .intro{font-size:11px;margin-bottom:12px}#levels{gap:10px!important}#levels .route-card{min-height:155px;padding:8px 7px!important;border-radius:18px!important}.route-number{width:29px;height:29px;font-size:16px;top:7px;left:7px}.route-name{font-size:13px;min-height:32px}.route-stars{height:19px;font-size:16px}.route-launch{font-size:11px;padding:8px 3px}#map #back{padding:12px 0 0}} @font-face{font-family:MadeiraArcadeSoft;src:url('assets/madeira-arcade-v34.ttf') format('truetype');font-display:swap} body,button,input,.intro,.eyebrow,#map h2,#quiz h2,#quizanswers button,#result h2,#resultinfo,#resultscore,.route-number,.route-name,.route-launch,#home,#pause,#jump,#gamesound{font-family:MadeiraArcadeSoft,monospace!important;font-weight:normal!important}#map h2{font-size:39px}.route-name{font-size:21px}.route-launch{font-size:17px}#result h2{font-size:43px}#resultinfo,#resultscore{font-size:20px}#quiz h2{font-size:27px}#quizanswers button{font-size:20px}.eyebrow{font-size:15px}#home,#pause{font-family:Arial,sans-serif!important} @media(orientation:landscape) and (max-height:450px){#map h2{font-size:30px}.route-name{font-size:17px}.route-launch{font-size:14px}#quiz h2{font-size:22px}#quizanswers button{font-size:17px}#resultinfo,#resultscore{font-size:17px}} /* A single arcade type family across every screen. */ h1,h2,h3,h4,p,small,strong,span,label,th,td,a{font-family:MadeiraArcadeSoft,monospace!important;font-weight:normal!important} #menuoptions{inset:4% 12%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;align-content:start;background:radial-gradient(ellipse at top,#305f75,#142841 80%);border:4px solid #ffd776;box-shadow:0 0 0 3px #13253a,0 12px 0 #071625,0 18px 45px #0009;padding:24px 28px;border-radius:25px;text-shadow:2px 2px #142841} #menuoptions h2{grid-column:1/-1;font-size:36px;color:#ffe67c;text-shadow:3px 3px #162a43;margin:0 0 12px;text-align:center}#menuoptions .panel-layout>button:not(#optionsclose){--face:#68cee0;--edge:#286685;min-height:63px;font-size:18px;padding:12px 9px;background:linear-gradient(#ffffff44,transparent 48%),var(--face);color:#132c43;border:3px solid #fff7;border-bottom-color:var(--edge);border-radius:17px;box-shadow:0 5px 0 var(--edge),0 7px 0 #07182c;text-shadow:0 1px #ffffff55;transition:transform .12s,filter .12s}#menuoptions .panel-layout>button:nth-of-type(3n){--face:#ffd873;--edge:#996232}#menuoptions .panel-layout>button:nth-of-type(3n+1){--face:#a7dd85;--edge:#4a7953}#menuoptions .panel-layout>button:active{transform:translateY(4px);box-shadow:0 1px 0 var(--edge)}#menuoptions .panel-layout>button:hover{filter:brightness(1.08)}#menuoptions #optionsclose{top:12px;right:14px;width:39px;height:39px;border-radius:50%;background:#e77f8e;border:3px solid #ffe3da;color:#301d34;box-shadow:0 3px #813e59;font:22px Arial!important}#menuoptions .player-form{grid-column:1/-1;max-width:420px;justify-self:center;padding:12px 17px;background:#081c2d70;border:2px solid #88b9c5;border-radius:16px}#menuoptions .player-form label{font-size:16px;color:#ffdc7b}#menuoptions .player-form input{border-radius:9px;font-size:20px}#menuoptions .player-form button{border-radius:10px;font-size:22px}#menuoptions #quitmenu{--face:#ed9aaa;--edge:#894b6c} #bootloader{position:absolute;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#255864,#091b30);gap:20px;text-align:center;padding:30px}#bootloader img{width:180px;height:140px;object-fit:contain}#bootstatus{font-size:22px;color:#ffe483}#bootretry{padding:16px 24px;border:3px solid #fff2b0;border-radius:15px;background:#ffcf61;color:#153044;box-shadow:0 5px #9b6d32} @media(max-height:500px){#menuoptions{inset:3% 10%;padding:17px 23px;gap:11px}#menuoptions h2{font-size:29px;margin:0 0 5px}#menuoptions .panel-layout>button:not(#optionsclose){min-height:52px;font-size:16px}#menuoptions .player-form{margin:2px 0;padding:9px 13px}} @media(max-width:650px) and (orientation:portrait){#menuoptions{inset:3% 6%;grid-template-columns:repeat(2,minmax(0,1fr));padding:20px 18px}} /* Shared playful arcade panels and controls, including pause/results/help/album. */.overlay h2{color:#ffe07b}.overlay .eyebrow{color:#99e2e7}.overlay .primary,.overlay .text-button,#helpback,#rankback,#albumback,#back{display:inline-flex;align-items:center;justify-content:center;text-align:center;border:3px solid #fff4af;border-radius:18px;padding:13px 22px;background:linear-gradient(#ffe78f,#efbc4f);color:#173c4c;font-size:20px;box-shadow:0 5px 0 #95642f,0 7px 0 #071c30;text-shadow:0 1px #fff7;min-height:52px;margin:6px 0}.overlay .text-button{background:linear-gradient(#90dbe1,#51a9c3);border-color:#c4f2ef;box-shadow:0 5px #286382,0 7px #071c30}.overlay button:active{transform:translateY(4px)}#quiz{border-radius:24px!important;background:radial-gradient(ellipse at top,#346481,#18354e)!important;border-color:#ffdb7d!important}#quizanswers button{border-radius:17px!important;border:3px solid #c4f4ed!important;background:linear-gradient(#8ed8db,#56a5c1)!important;color:#12374a;box-shadow:0 5px #286482;text-shadow:0 1px #fff6;padding:13px 18px;font-size:20px}#quizanswers button:nth-child(2){background:linear-gradient(#f2de88,#dcb45f)!important;border-color:#fff0b0!important;box-shadow:0 5px #957143}#quizanswers button:nth-child(3){background:linear-gradient(#b7df94,#7bb16e)!important;border-color:#def4b6!important;box-shadow:0 5px #426c4b}#paused,#result{gap:9px}#resultscore{color:#8fe2e6}:is(#ranktable,#rankmoretable){border-collapse:separate;border-spacing:0 7px}:is(#ranktable,#rankmoretable) td{background:#234958;padding:12px;color:#fff2c7}:is(#ranktable,#rankmoretable) td:first-child{border-radius:12px 0 0 12px;color:#ffd96d}:is(#ranktable,#rankmoretable) td:last-child{border-radius:0 12px 12px 0}:is(#ranktable,#rankmoretable) th{color:#94deea}#installhelp{border:3px solid #ffd66f;border-radius:22px;background:#214459;color:#fff2c5}#installhelp button{border-radius:15px;background:#f4cd6e;color:#18374b;padding:12px 22px} /* One fixed speaker, above every overlay. */ #shell #gamesound{display:flex!important;position:absolute;top:13px;right:122px;left:auto;bottom:auto;width:43px;height:43px;min-width:43px;min-height:43px;z-index:120;border:2px solid #b7ecdf;border-bottom:4px solid #28667a;box-shadow:0 3px #09253b;background:linear-gradient(#77c7d9,#3d8fac);border-radius:13px;padding:7px;color:#fff7d2}#gamesound::before{display:none!important}#gamesound svg{width:27px;height:27px;overflow:visible}#gamesound svg path{fill:currentColor}#gamesound svg .sound-waves,#gamesound svg .sound-cross{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round}#gamesound .sound-cross{display:none}#gamesound[aria-pressed="false"] .sound-waves{display:none}#gamesound[aria-pressed="false"] .sound-cross{display:block;color:#ffe0b2}#gamesound[aria-pressed="false"]{background:linear-gradient(#9b7b9f,#655175)!important;border-color:#e6bed0!important} #shell #mission{display:none!important} /* Smooth heavy letters, arcade outlines and larger route titles. */ body,button,input{font-size:18px}#map h2{font-size:36px}#map .intro{font-size:20px}.route-name{font-size:25px!important;line-height:1.15;min-height:62px;padding:4px 2px;text-shadow:0 2px 2px #071b25,1px 0 #071b25,-1px 0 #071b25}.route-launch{font-size:19px!important}.route-number{font-size:22px!important}#menuoptions .panel-layout>button:not(#optionsclose){font-size:20px!important}#quiz h2{font-size:28px!important;line-height:1.3}#quizanswers button{font-size:22px!important}#menuoptions h2{font-size:34px!important} @media(max-height:500px){.route-name{font-size:23px!important;min-height:57px}#map .intro{font-size:18px;margin-bottom:12px}} /* Start screen: one layout, sized to the actual shell, no inherited grid rows. */ #menu:not([hidden]){display:flex!important;flex-direction:column;align-items:center;justify-content:center;inset:0;padding:58px max(22px,env(safe-area-inset-right)) 18px max(22px,env(safe-area-inset-left));overflow:hidden;background:linear-gradient(90deg,#07312666,#07312622);text-align:center;text-shadow:0 2px 3px #102b35} #menu .wordmark{display:none!important} #menu .menu-layout{display:grid;grid-template-columns:1.1fr 1fr;grid-template-rows:auto;align-items:center;gap:clamp(20px,5vw,70px);width:100%;max-width:1000px;flex:none;transform:scale(var(--menu-scale,1));transform-origin:center center} #menu .menu-copy,#menu .menu-controls{display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:center;min-width:0;width:100%;padding:0;gap:clamp(7px,2vh,14px)} #menu .brand{position:relative;width:clamp(150px,24vw,270px);height:clamp(72px,calc(var(--shell-height,400px)*.25),145px);margin:0;flex:none;background:transparent;box-shadow:none;overflow:visible} #menu .brand img{position:static;inset:auto;width:100%;height:100%;object-fit:contain;max-width:100%} #menu .guide-slogan{font-size:clamp(17px,calc(var(--shell-height,400px)*.055),24px);line-height:1.25;margin:0;color:#fff1ba;max-width:340px} #menu .community-name{font-size:clamp(15px,calc(var(--shell-height,400px)*.044),20px);line-height:1.25;margin:0;padding:7px 12px;color:#b9f0e9;text-decoration:none;background:#0d425bad;border:2px solid #99d5d280;border-radius:14px;max-width:340px} #menu .byline{font-size:clamp(19px,calc(var(--shell-height,400px)*.063),29px);line-height:1.15;color:#ffdb68;margin:0;letter-spacing:0;max-width:350px} #menu .menu-controls{max-width:360px;justify-self:center;gap:clamp(10px,2.8vh,20px)} #menu #play{display:flex;align-items:center;justify-content:center;width:100%;min-height:62px;padding:12px 18px;font-size:clamp(30px,calc(var(--shell-height,400px)*.10),43px);line-height:1.15;background:linear-gradient(#fff2a1,#ffda57 55%,#efba45);color:#21462d;border:4px solid #fff5b2;border-radius:26px;box-shadow:0 7px #a06c2c,0 10px #113246;text-shadow:0 1px #fff7;letter-spacing:0} #menu #chooseRoute{width:100%;padding:10px 12px;min-height:44px;background:linear-gradient(#a7e79e,#6fc18b);border:2px solid #d5f6bb;border-radius:17px;box-shadow:0 4px #346e56;font-size:clamp(17px,calc(var(--shell-height,400px)*.05),22px);line-height:1.2;color:#153a3c;text-shadow:0 1px #fff6} #menu .menu-tip{margin:0;font-size:clamp(15px,calc(var(--shell-height,400px)*.04),18px);line-height:1.25;color:#fff3d5} #menu .menu-links{display:flex;align-items:center;justify-content:center;gap:18px} #menu .menu-links button{min-height:44px;padding:8px 16px;background:linear-gradient(#8fdaeb,#5db2ca);color:#12384a;border:3px solid #c6f5f2;border-radius:17px;font-size:19px;line-height:1.2;box-shadow:0 4px #2e6d83;text-shadow:0 1px #fff6} #menu #optionsopen{width:52px;padding:8px;font:25px Arial!important} #menu button:active{transform:translateY(4px)} @media(orientation:portrait){#menu .menu-layout{grid-template-columns:1fr;gap:20px;max-width:420px}#menu .brand{height:105px}#menu .menu-copy{gap:9px}} @media(max-height:340px) and (orientation:landscape){#menu:not([hidden]){padding-top:54px;padding-bottom:12px}#menu .menu-copy{gap:6px}#menu .menu-controls{gap:10px}#menu .brand{height:72px}#menu #play{min-height:54px;padding:9px 16px;font-size:30px}} /* Persistent sound control in the requested lower-left corner. */ #shell #gamesound{top:auto;right:auto;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));width:38px;height:38px;min-width:38px;min-height:38px;padding:6px;border-radius:11px} #gamesound svg{width:23px;height:23px} /* Same arcade control styling for both upper-right game controls. */ #shell #home,#shell #pause{width:42px;height:42px;min-width:42px;min-height:42px;display:flex;align-items:center;justify-content:center;padding:8px;border:2px solid #c6f5f2;border-bottom:4px solid #28667a;border-radius:13px;background:linear-gradient(#8fdaeb,#5db2ca);box-shadow:0 3px #123043;color:#12384a;text-shadow:0 1px #fff6;font:25px Arial!important} #shell #home{left:auto;right:66px;top:14px}#shell #pause{right:14px;top:14px}#home svg,#pause svg{width:22px;height:22px;fill:currentColor}#home:active,#pause:active{transform:translateY(3px)} /* Small screens can scroll complete panels without losing their first line. */ #map{justify-content:flex-start!important;overflow:auto;padding-top:22px!important;padding-bottom:18px!important} #map>*{flex-shrink:0}#map::before,#map::after{content:''}#map::before{margin-top:auto}#map::after{margin-bottom:auto} #levels{grid-template-columns:repeat(5,minmax(148px,1fr))!important;overflow-x:auto;padding:8px 4px 15px;scroll-snap-type:x proximity} #levels .route-card{scroll-snap-align:start}.route-name{font-size:clamp(18px,2.2vw,25px)!important;line-height:1.18} #help,#album,#leaderboard,#paused{justify-content:safe center;overflow-y:auto;overscroll-behavior:contain} /* Only the speaker is shown at the bottom; the landscape itself handles jumping. */ #shell #jump,#shell #drop{display:none!important;pointer-events:none!important} #shell #home,#shell #pause{width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;max-width:28px!important;max-height:28px!important;padding:4px!important;border-radius:9px!important;border-bottom-width:3px!important;box-shadow:0 2px #123043!important} #shell #home{left:auto!important;right:max(50px,calc(env(safe-area-inset-right) + 50px))!important;top:12px!important} #shell #pause{right:max(12px,env(safe-area-inset-right))!important;top:12px!important} #shell #home svg,#shell #pause svg{width:16px!important;height:16px!important} /* Stationary, fully visible pause and route panels. */ #shell #paused,#shell #map{display:flex;align-items:center;justify-content:center!important;overflow:hidden!important;overscroll-behavior:none;padding:76px max(24px,env(safe-area-inset-right)) 20px max(24px,env(safe-area-inset-left));gap:0} #shell #map{padding-top:20px!important;padding-bottom:20px!important} #map::before,#map::after{display:none!important} #paused .panel-layout,#map .panel-layout{flex:none;width:100%;transform:scale(var(--panel-scale,1));transform-origin:center center} #paused .panel-layout{display:grid;grid-template-columns:1fr 1fr;max-width:620px;gap:14px 18px;align-items:center} #paused .eyebrow,#paused h2{grid-column:1/-1;margin:0;text-align:center} #paused h2{font-size:36px;line-height:1.15;margin-bottom:4px} #paused button{width:100%;min-height:48px;margin:0;padding:10px 12px;font-size:19px;line-height:1.2;border-radius:16px} #map .panel-layout{display:flex;flex-direction:column;align-items:center;max-width:1100px;gap:12px} #map h2,#map .eyebrow,#map .intro{margin:0;line-height:1.2} #map h2{font-size:30px}#map .intro{font-size:17px} #shell #levels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))!important;width:100%;overflow:hidden!important;gap:12px!important;padding:4px 4px 9px;margin:0} #levels .route-card{min-width:0;min-height:165px!important;padding:10px 6px!important} #levels .route-name{font-size:19px!important;min-height:48px!important;line-height:1.2} #levels .route-number{font-size:16px!important}#levels .route-launch{font-size:16px!important;padding:8px 2px!important} #map #back{margin:0;padding:8px 20px;min-height:40px;font-size:18px} @media(orientation:portrait){#shell #levels{grid-template-columns:repeat(2,minmax(0,1fr))!important}#paused .panel-layout{grid-template-columns:1fr}#paused .eyebrow,#paused h2{grid-column:1}} /* Quiet header icons blend into the HUD, while retaining clear symbols. */ #shell #home,#shell #pause{background:#132634!important;color:#c1d3d2!important;border:1px solid #47616b!important;box-shadow:none!important;text-shadow:none!important;opacity:.88} #shell #home:hover,#shell #pause:hover,#shell #home:focus-visible,#shell #pause:focus-visible{background:#243e4d!important;color:#fff2bc!important;opacity:1} /* Equal corner insets and a discreet speaker, including its muted state. */ #shell #gamesound{width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;padding:5px!important;border:1px solid #47616b!important;box-shadow:none!important;border-radius:8px!important;background:#132634!important;color:#c1d3d2!important;left:max(10px,env(safe-area-inset-left),env(safe-area-inset-bottom))!important;bottom:max(10px,env(safe-area-inset-left),env(safe-area-inset-bottom))!important;opacity:.88} #shell #gamesound svg{width:16px!important;height:16px!important} #shell #gamesound[aria-pressed="false"]{background:#132634!important;border-color:#47616b!important;color:#a6b7bc!important} #shell #gamesound[aria-pressed="false"] .sound-cross{color:#b9bdad!important} /* Brand, game title and optional community link have separate visual roles. */ #menu .menu-copy{gap:16px}#menu .menu-layout{column-gap:clamp(24px,6vw,80px);row-gap:18px} #menu .game-name{margin:0 0 4px;color:#ffe788;font-family:MadeiraArcadeSoft,monospace!important;font-size:clamp(30px,calc(var(--shell-height,400px)*.10),46px);line-height:1.08;letter-spacing:-.8px;text-align:center;text-shadow:0 3px 0 #82542d,0 5px 0 #153b43,-2px 0 #153b43,2px 0 #153b43} #menu .game-name span{display:block}#menu .game-name span:last-child{color:#fff5c5} #menu .community-name{grid-column:1/-1;justify-self:center;margin:0;padding:3px 8px;max-width:none;font-size:14px;line-height:1.2;color:#bcdbd4;background:none;border:0;border-radius:0;box-shadow:none;text-shadow:0 1px 2px #102b35} #menu .guide-slogan{max-width:300px} #menu .menu-controls{gap:clamp(9px,2vh,14px)} @media(max-height:340px) and (orientation:landscape){#menu .game-name{font-size:28px}#menu .menu-layout{row-gap:12px}#menu .community-name{font-size:13px}} @media(orientation:portrait){#menu .menu-layout{gap:16px}#menu .game-name{font-size:34px}} #menu .menu-copy .community-name{font-size:13px;max-width:300px;line-height:1.3;margin-top:4px;opacity:.82;align-self:center} #shell #hudcontrols{position:absolute;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));display:flex;align-items:center;justify-content:center;gap:10px;height:28px;z-index:20;pointer-events:auto} #shell #hudcontrols #home,#shell #hudcontrols #pause{position:static!important;inset:auto!important;margin:0!important;align-self:center!important;transform:none!important;flex:0 0 28px;line-height:1!important;vertical-align:middle} /* Every game panel is stationary. Scale the complete composition when needed. */ #shell .overlay{overflow:hidden!important;overscroll-behavior:none!important} #shell .overlay .panel-layout{flex:none;min-width:0;width:100%;max-width:100%;transform:scale(var(--panel-scale,1));transform-origin:center center} #shell #help,#shell #album,#shell #leaderboard,#shell #result,#shell #quiz{display:flex;flex-direction:column;justify-content:center!important;align-items:center;padding:68px max(24px,env(safe-area-inset-right)) 20px max(24px,env(safe-area-inset-left))} #help .panel-layout,#album .panel-layout,#leaderboard .panel-layout,#result .panel-layout,#quiz .panel-layout{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:860px!important} #help h2,#album h2,#leaderboard h2,#result h2,#quiz h2{margin:0;font-size:30px!important;line-height:1.15} #help p,#album p,#leaderboard p,#result p,#quiz p{margin:0;line-height:1.3} #help .helpgrid{gap:12px;grid-template-columns:1fr 1fr}#help .helpgrid p{font-size:15px;line-height:1.3} #quizanswers{gap:10px}#quizanswers button{min-height:42px;font-size:18px!important;padding:9px 12px!important} #result button,#helpback,#albumback,#rankback{margin:0;min-height:38px;padding:8px 16px;font-size:18px} :is(#ranktable,#rankmoretable){width:100%;max-width:680px;border-spacing:0 2px;font-size:14px;line-height:1.1} :is(#ranktable,#rankmoretable) th,:is(#ranktable,#rankmoretable) td{padding:4px 8px;line-height:1.1} #leaderboard .intro,#rankstatus,#myscore{font-size:14px;line-height:1.2} #rewards{gap:10px}#rewards .reward{font-size:14px;padding:9px} #shell #menuoptions{overflow:hidden!important;position:absolute;inset:20px max(20px,env(safe-area-inset-right)) 20px max(20px,env(safe-area-inset-left));width:auto;max-width:none;max-height:none;height:auto;margin:0;padding:42px 22px 16px;display:flex;align-items:center;justify-content:center} #menuoptions .panel-layout{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;max-width:720px!important} #menuoptions h2{grid-column:1/-1;margin:0;text-align:center;font-size:30px!important} #menuoptions .panel-layout>button:not(#optionsclose){min-height:38px;font-size:17px!important;padding:8px 12px;margin:0} #menuoptions .player-form{grid-column:1/-1;margin:0;padding:8px 12px;max-width:520px;width:100%} #menuoptions .player-form label{font-size:14px;margin-bottom:4px}#menuoptions .player-form input{font-size:16px;padding:6px 10px} #menuoptions .player-form small{font-size:11px;line-height:1.2;margin-top:4px} #shell #installhelp{overflow:hidden!important;max-height:none;height:auto;inset:20px;padding:28px} #installhelp .panel-layout{display:flex;flex-direction:column;gap:10px;align-items:center} @media(orientation:portrait){#help .helpgrid{grid-template-columns:1fr}#menuoptions .panel-layout{grid-template-columns:1fr 1fr}} /* Remove old half-screen positions and scrolling quiz/result sheets. */ #shell #quiz,#shell #result{inset:0!important;top:0!important;left:0!important;right:0!important;bottom:0!important;transform:none!important;width:100%!important;height:100%!important;max-height:none!important;max-width:none!important} #shell #quiz{padding:68px max(24px,env(safe-area-inset-right)) 20px max(24px,env(safe-area-inset-left))!important;border-radius:0!important;border:0!important} body[data-victory="yes"] #shell #result{justify-content:flex-end!important;padding:14px 24px 20px!important;background:linear-gradient(0deg,#102c42e6,transparent 68%)} #shell #result .panel-layout{gap:6px;max-width:780px!important} /* Six route cards still form one stationary composition. */ #shell #levels{grid-template-columns:repeat(6,minmax(0,1fr))!important} @media(orientation:portrait){#shell #levels{grid-template-columns:repeat(2,minmax(0,1fr))!important}} /* The title is a curved, rounded vector wordmark, separate from the guide brand. */ #menu .game-name{width:100%;line-height:0;margin:0 0 2px} #menu .game-name img{display:block;width:100%;height:auto;max-height:146px;object-fit:contain} #menu .brand-group{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:4px;transform:translateY(-10px)} #menu .brand{height:clamp(95px,calc(var(--shell-height,400px)*.30),174px)} #menu .menu-copy .community-name{margin-top:22px} @media(max-height:340px) and (orientation:landscape){#menu .brand{height:87px}#menu .brand-group{gap:8px;transform:translateY(-5px)}#menu .menu-copy .community-name{margin-top:12px}#menu .game-name img{max-height:105px}} @media(orientation:portrait){#menu .brand{height:126px}#menu .brand-group{transform:none}#menu .menu-copy .community-name{margin-top:15px}} #menu .player-form{margin:0;width:100%;max-width:360px;text-align:left} #menu .player-form label{font-size:15px;color:#fff0ae;margin-bottom:5px} #menu .player-form input{font-size:19px;line-height:1.1;padding:8px 12px;border:2px solid #a9e4d2;border-radius:14px;background:#143c4be8;color:#fff7d6} #menu .player-form button{min-width:44px;border:2px solid #e0f8b9;border-radius:13px;background:linear-gradient(#b8e296,#74b77b);color:#173c42;font-size:22px;box-shadow:0 3px #30614c} #menu .player-form small{font-size:11px;line-height:1.2;max-width:100%;min-height:13px;color:#cce6d9} :is(#ranktable,#rankmoretable) tr[data-rank="1"] td{background:#64512d;color:#ffe68e} :is(#ranktable,#rankmoretable) tr[data-rank="2"] td{background:#415765;color:#e6f4ff} :is(#ranktable,#rankmoretable) tr[data-rank="3"] td{background:#664638;color:#ffd6a0} :is(#ranktable,#rankmoretable) tr[data-rank="1"] td:first-child,:is(#ranktable,#rankmoretable) tr[data-rank="2"] td:first-child,:is(#ranktable,#rankmoretable) tr[data-rank="3"] td:first-child{font-weight:900;font-size:20px} #shell #fullscreen{position:absolute;z-index:9;right:max(86px,calc(env(safe-area-inset-right) + 86px));top:12px;width:28px;height:28px;min-width:28px;min-height:28px;padding:0;border:1px solid #59717b66;border-radius:8px;background:#102637b3;color:#afc1c7;font:22px/1 Arial,sans-serif;box-shadow:none} #shell #fullscreen:hover{color:#fff1bb;background:#294452} #shell #fullscreen:focus-visible{outline:2px solid #ffdf79;outline-offset:3px} #levels [data-route="1"] .route-scene{background-size:cover,auto 165%;background-position:center,7% 55%} #levels [data-route="4"] .route-scene{background-size:cover,auto 115%;background-position:center,82% 40%} #levels [data-route="5"] .route-scene{background-image:linear-gradient(0deg,#071e2ff5 5%,#071e2f22 70%),url('assets/fanal-trees-v38.webp'),var(--route-art);background-size:cover,auto 200%,cover;background-position:center,10% 0%,center;background-repeat:no-repeat} :root{--safe-left:env(safe-area-inset-left,0px)} @media(orientation:portrait) and (hover:hover) and (pointer:fine){.game-shell,#shell{height:56.25vw!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)}} #menu .game-name img{max-height:118px} #menu .menu-copy>.player-form{max-width:310px} @media(max-height:340px) and (orientation:landscape){#menu .game-name img{max-height:90px}#menu .player-form small{font-size:10px}#menu .menu-copy{gap:10px}} #menu > .copyright{position:absolute;bottom:max(7px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);font-family:Arial,sans-serif;font-size:10px;line-height:1.2;font-weight:400;letter-spacing:.15px;color:#c4d2c8;text-shadow:0 1px 3px #071e18;white-space:nowrap;pointer-events:none} #menu .susana-social{display:flex;justify-content:center;gap:12px;margin-top:18px}#menu .susana-social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#173f36c9;border:1px solid #b9d69b70;color:#f1dfad;box-shadow:0 2px 0 #082b25;text-decoration:none}#menu .susana-social svg{width:22px;height:22px}#menu .susana-social a:hover,#menu .susana-social a:focus-visible{background:#326350;outline:2px solid #e5d084;outline-offset:2px} body[data-rotate="yes"] #rotate{display:grid!important;z-index:2147483647;background:radial-gradient(ellipse at top,#235a43,#081e29);font-family:MadeiraArcadeSoft,Arial,sans-serif}body[data-rotate="yes"] main{visibility:hidden}body[data-rotate="yes"] #rotate strong{font-size:clamp(24px,7vw,40px)} /* Paint to the screen edges; safe-area spacing belongs only to controls, never the canvas. */ html,body,main{padding:0!important;margin:0!important;border:0;max-width:none;background-color:#091b1e} #shell{padding:0!important;margin:0!important;left:0!important;right:0!important;width:100vw!important;max-width:none!important} #shell canvas{padding:0!important;margin:0!important;width:100%!important;height:100%!important;object-fit:fill!important} #shell:fullscreen,#shell:-webkit-full-screen{inset:0!important;width:100vw!important;height:100dvh!important;max-height:none!important;transform:none!important;top:0!important;background:#091b1e} #shell #fullscreenmenu{min-height:36px;padding:7px 15px;border:2px solid #ffeaa1;border-radius:12px;background:linear-gradient(#457858,#265840);color:#fff0ac;font-size:17px;white-space:nowrap;box-shadow:0 3px 0 #102e2a} /* Mouse controls remain discreet, with a larger desktop click target. */ @media (hover:hover) and (pointer:fine) and (min-width:900px){ #shell #hudcontrols{height:40px;top:8px;gap:8px} #shell #hudcontrols #home,#shell #hudcontrols #pause{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;max-width:40px!important;max-height:40px!important;flex-basis:40px;padding:8px!important} #shell #hudcontrols #home svg,#shell #hudcontrols #pause svg{width:22px!important;height:22px!important} #shell #fullscreen{right:112px;top:14px} } #shell #fullscreenmenu:hover{filter:brightness(1.15)} #bootloader[hidden]{display:none!important}#bootloader #bootstatus{margin:0;font-size:clamp(20px,4vh,30px)}#bootprogress{appearance:none;width:min(380px,75vw);height:18px;border:2px solid #abbd86;border-radius:12px;overflow:hidden;background:#102c30}#bootprogress::-webkit-progress-bar{background:#102c30}#bootprogress::-webkit-progress-value{background:linear-gradient(90deg,#85bd6a,#ffe387);border-radius:9px}#bootprogress::-moz-progress-bar{background:linear-gradient(90deg,#85bd6a,#ffe387)}#bootdetail{color:#ecf1d5;font-size:clamp(13px,2.6vh,18px);max-width:85vw}#bootloader{gap:12px}#bootloader img{height:min(140px,24vh)} /* Gameplay taps must never trigger iOS selection, image callouts or zoom. */ #shell,#shell *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent} #game{touch-action:none;-webkit-user-drag:none} #shell button,#shell a{touch-action:manipulation} #shell input,#shell textarea,#shell [contenteditable="true"]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default;touch-action:auto} /* The canvas owns the HUD divider; the transparent DOM HUD has no border. */ #shell #hud{border:0!important;box-shadow:none!important;background:none!important} @media (hover:hover) and (pointer:fine) and (min-width:900px){ #shell #result #again,#shell #result #resultmap{display:flex;align-items:center;justify-content:center;width:clamp(280px,30vw,480px);min-height:clamp(56px,7vh,80px);padding:12px 24px;font-size:clamp(22px,2vw,32px);line-height:1.2;border-radius:18px;flex-shrink:0} #shell #result #resultmap{margin-top:12px;background:linear-gradient(#a7e79e,#6fc18b);border:2px solid #d5f6bb;box-shadow:0 4px #346e56;color:#153a3c;text-shadow:none} #shell #result .panel-layout{width:min(720px,90%);gap:clamp(10px,2vh,20px)} } @media (hover:hover) and (pointer:fine) and (min-width:900px){ #shell #result h2{font-size:clamp(42px,6vh,76px)!important;line-height:1.15} #shell #result #resultinfo{font-size:clamp(24px,3.3vh,40px)!important} #shell #result #resultscore{font-size:clamp(18px,2.5vh,30px)!important} #shell #result .eyebrow{font-size:clamp(16px,2vh,24px)!important} } #rankpodium{display:flex;align-items:flex-end;justify-content:center;gap:10px;width:100%;max-width:680px;min-height:0}#rankpodium:empty{display:none}.podium-place{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:1;min-width:0;padding:8px 6px;border:2px solid #b6d6d7;border-radius:15px 15px 8px 8px;background:linear-gradient(#3e697b,#204254);color:#edf6ef}.podium-place[data-place="1"]{background:linear-gradient(#b38e3b,#675529);border-color:#ffe593;padding-top:15px;padding-bottom:15px;color:#fff0bd}.podium-place[data-place="3"]{background:linear-gradient(#8c6351,#533b37);border-color:#e3b695}.podium-trophy{font:26px/1.1 Arial,sans-serif!important}.podium-nickname{font-size:16px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.podium-achievement{font-size:13px;color:#fff2b5}.podium-points{font-size:12px}#leaderboard .panel-layout{gap:7px!important} @media (hover:hover) and (pointer:fine) and (min-width:900px){#shell #leaderboard .panel-layout{max-width:1000px!important}#shell #leaderboard h2{font-size:clamp(32px,4vh,54px)!important}:is(#ranktable,#rankmoretable){max-width:900px;font-size:clamp(17px,2vh,24px)}:is(#ranktable,#rankmoretable) th,:is(#ranktable,#rankmoretable) td{padding:6px 12px}#rankpodium{max-width:900px}.podium-nickname{font-size:clamp(20px,2.7vh,32px)}.podium-achievement{font-size:clamp(17px,2.2vh,25px)}.podium-points{font-size:clamp(16px,2vh,23px)}.podium-trophy{font-size:clamp(32px,4vh,48px)!important}} /* v56: adventure title and readable ranking, within a stationary screen. */ #menu .menu-layout{max-width:1240px;grid-template-columns:.95fr 1.2fr;column-gap:clamp(20px,4vw,60px)} #menu .menu-controls{max-width:560px} #menu .game-name{width:100%;margin-bottom:8px} #menu .game-name img{width:100%;height:auto;max-height:none!important;filter:drop-shadow(0 5px 3px #071d2680)} #menu #play,#menu #chooseRoute{max-width:380px} #shell #leaderboard{padding:clamp(12px,3vh,32px) max(18px,env(safe-area-inset-right)) clamp(14px,3vh,32px) max(18px,env(safe-area-inset-left))} #shell #leaderboard .panel-layout{width:100%;max-width:1120px!important;gap:clamp(4px,1vh,10px)!important} #shell #leaderboard h2{font-size:clamp(24px,4.6vh,50px)!important} #shell :is(#ranktable,#rankmoretable){width:100%;max-width:1120px;font-size:clamp(14px,2.6vh,27px);margin-top:4px;border-spacing:0 clamp(2px,.5vh,5px)} #shell :is(#ranktable,#rankmoretable) th{font-size:clamp(11px,1.7vh,18px)} #shell :is(#ranktable,#rankmoretable) td,#shell :is(#ranktable,#rankmoretable) th{padding:clamp(3px,.65vh,7px) clamp(6px,1vw,14px)} #shell #rankpodium{max-width:900px;gap:clamp(6px,1vw,14px)} #shell .podium-place{gap:3px;padding:clamp(4px,1vh,10px) 8px} #shell .podium-place[data-place="1"]{padding-top:clamp(8px,1.5vh,16px);padding-bottom:clamp(8px,1.5vh,16px)} #shell .podium-nickname{font-size:clamp(15px,2.5vh,27px)} #shell .podium-trophy{font-size:clamp(22px,3.5vh,38px)!important} #shell .podium-achievement,#shell .podium-points,#shell #leaderboard .intro,#shell #rankstatus,#shell #myscore{font-size:clamp(11px,1.7vh,18px)} #shell #rankback{min-height:clamp(32px,4.6vh,50px);font-size:clamp(15px,2.3vh,24px);padding:6px 20px} @media(orientation:portrait){#menu .menu-layout{grid-template-columns:1fr;max-width:500px}} @media(max-height:420px) and (orientation:landscape){#menu .menu-controls{gap:10px}#menu .game-name{margin-bottom:0}#menu .game-name img{max-height:128px!important}#shell #leaderboard .eyebrow{display:none}#shell #leaderboard .intro{display:none}#shell #rankpodium{max-width:640px}} /* v57: assistance visible before gameplay, without relying on JavaScript. */ #rotate{gap:12px;padding:max(20px,env(safe-area-inset-top)) 24px max(20px,env(safe-area-inset-bottom));align-content:center} #rotate .browser-help{width:min(100%,390px);margin-top:22px;padding-top:20px;border-top:1px solid #ffe08c44;color:#f7efd6} #rotate .browser-help strong{font-size:18px;color:#ffe08c} #rotate .browser-help p{font:16px/1.5 system-ui,sans-serif;margin:10px 0 16px} #rotate .browser-help p b{font-size:inherit;color:inherit} #rotate .browser-help a{display:inline-block;padding:12px 18px;border-radius:14px;background:#f7d975;color:#153c38;font:bold 16px/1.3 system-ui,sans-serif;text-decoration:none} #rotate .browser-help small{display:block;margin-top:12px;font:13px/1.4 system-ui,sans-serif;color:#d2e0d6} @media(max-height:650px) and (orientation:portrait){#rotate>b{font-size:55px}#rotate .browser-help{margin-top:8px;padding-top:12px}} /* v59: truthful external-browser guidance; no same-page pseudo-open button. */ #rotate{gap:10px}#rotate>b{font-size:58px}#rotate>span{font:16px/1.4 system-ui,sans-serif}#rotate>span b{font-size:inherit} #rotate .browser-help{width:min(100%,420px);margin-top:10px;padding-top:14px} #rotate .browser-help p{font-size:14px;line-height:1.4;margin:8px 0} #rotate .browser-help ol{padding-left:22px;margin:10px 0 14px;text-align:left;font:15px/1.45 system-ui,sans-serif} #rotate .browser-help li+li{margin-top:8px}#rotate .browser-help li b{font-size:inherit} #rotate #gamelink{display:block;width:100%;min-width:0;margin:9px 0;padding:9px 7px;border:1px solid #f2d78466;border-radius:8px;background:#102b2f;color:#fff8da;text-align:center;font:14px/1.4 system-ui,sans-serif;box-sizing:border-box;user-select:text;-webkit-user-select:text} #rotate #copygamelink{min-height:40px;padding:8px 18px;border:1px solid #dce8cf;border-radius:12px;background:#517963;color:white;font:bold 15px/1.3 system-ui,sans-serif} #rotate #openchrome[hidden]{display:none!important}#rotate #browsercopystatus:empty{display:none} @media(max-height:650px) and (orientation:portrait){#rotate{gap:7px;padding:12px 20px}#rotate>b{font-size:42px}#rotate>strong{font-size:22px}#rotate .browser-help{margin-top:4px;padding-top:10px}#rotate .browser-help ol{font-size:14px;margin:8px 0}#rotate .browser-help small{margin-top:8px;font-size:12px}#rotate .browser-help a{padding:9px 14px}} #rotate .rotate-game-logo{width:min(320px,84vw);height:auto;max-height:108px;object-fit:contain;filter:drop-shadow(0 5px 3px #071c2680)} #rotate .rotate-game-brand{font:13px/1.35 system-ui,sans-serif;color:#e0ead5;max-width:340px;margin:0 0 5px}#rotate>b{font-size:38px} @media(max-height:720px) and (orientation:portrait){#rotate{gap:6px;padding:12px 18px}#rotate .rotate-game-logo{max-height:76px;width:240px}#rotate .rotate-game-brand{font-size:12px;margin:0}#rotate>b{font-size:30px}#rotate>strong{font-size:22px}#rotate .browser-help{margin-top:4px;padding-top:9px}#rotate .browser-help strong{font-size:16px}#rotate .browser-help p{margin:5px 0;font-size:13px}#rotate .browser-help ol{font-size:13px;margin:7px 0}#rotate .browser-help li+li{margin-top:5px}#rotate .browser-help small{font-size:12px;margin-top:7px}#rotate #gamelink{margin:7px 0;padding:6px}#rotate .browser-help a,#rotate #copygamelink{padding:8px 12px;min-height:35px;font-size:14px}} /* Precise launch screen and uncluttered podium. */ #rotate{overflow-y:auto;box-sizing:border-box;isolation:isolate;align-content:center;gap:10px;padding:22px max(18px,env(safe-area-inset-right)) 22px max(18px,env(safe-area-inset-left));background:#102f39!important} #rotate::before{content:"";position:fixed;inset:0;z-index:-2;background:url("assets/ribeiro-v7.webp") center/cover no-repeat;opacity:.25;pointer-events:none} #rotate::after{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(#0a23392b,#0623297a);pointer-events:none} #rotate .launch-brand{position:relative;width:min(340px,88vw);height:137px;margin-top:0} #rotate .launch-susana{position:absolute;left:50%;top:0;transform:translateX(-50%);width:74px;height:95px;background:url("assets/susana-run-v31.webp") -6.26px -3.03px/384.8px 198.83px no-repeat;z-index:0} #rotate .rotate-game-logo{position:absolute;left:0;bottom:0;width:100%;max-height:none;height:auto;z-index:1;filter:drop-shadow(0 5px 5px #0008)} #rotate .rotate-game-brand{font:12px/1.3 system-ui,sans-serif;margin:0;color:#e5eddc} .language-choice{display:flex;align-items:center;justify-content:center;gap:8px;font:12px/1.3 system-ui,sans-serif;color:#e5eddc;margin:2px 0} .game-language{font:600 12px/1.2 system-ui,sans-serif;color:#fff6d9;background:#123e42;border:1px solid #ffe69a88;border-radius:10px;padding:7px 10px;max-width:170px} #rotate .rotate-callout{display:flex;align-items:center;justify-content:center;gap:12px;width:min(100%,390px);box-sizing:border-box;padding:18px 10px;margin:9px 0 0;border-top:2px solid #ffdd75;border-bottom:2px solid #ffdd75;background:#0b272b99} #rotate .rotate-callout>b{font:56px/1 system-ui,sans-serif;color:#ffdd75} body[data-rotate="yes"] #rotate .rotate-callout>strong,#rotate .rotate-callout>strong{font:800 clamp(25px,7vw,34px)/1.13 system-ui,sans-serif;color:#ffeb9f;max-width:270px;text-shadow:0 2px 3px #000a} #rotate .rotate-instruction{font:15px/1.4 system-ui,sans-serif;color:#fff9e9;width:min(100%,350px)} #rotate .browser-help{width:min(100%,390px);margin-top:18px;padding-top:0;border:0} body[data-rotate="yes"] #rotate .browser-help>strong,#rotate .browser-help>strong{font:700 17px/1.3 system-ui,sans-serif;color:#fff4d4} #rotate .launch-buttons{display:grid;gap:9px;margin-top:12px} #rotate .launch-buttons button,#rotate .launch-buttons a{box-sizing:border-box;display:block;width:100%;border-radius:14px;min-height:47px;padding:12px 14px;font:700 15px/1.35 system-ui,sans-serif;text-decoration:none;cursor:pointer} #rotate #launchretry{background:#ffdc75;color:#143936;border:1px solid #ffeeb4} #rotate #openchrome{background:#10444c;color:#f8f2df;border:1px solid #bde4dd88} #rotate details{margin-top:14px;font:13px/1.45 system-ui,sans-serif;color:#d8e7df} #rotate summary{cursor:pointer;padding:7px}#rotate details p{font:13px/1.45 system-ui,sans-serif;margin:6px 0} #rotate #gamelink{font-size:13px}#rotate #browsercopystatus{font:12px/1.4 system-ui,sans-serif} #rankpodium{display:flex;align-items:flex-end;justify-content:center;gap:14px;padding:4px 10px 0;margin:5px auto 15px;max-width:560px;width:100%;box-sizing:border-box} #rankpodium .podium-place{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:flex-end;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;min-height:0!important;max-width:175px;overflow:visible;gap:8px;transform:none!important} #rankpodium .podium-trophy{display:block;font:62px/1.05 system-ui,sans-serif;filter:drop-shadow(0 4px 3px #071e3680);margin:0} #shell #rankpodium .podium-trophy{font:62px/1.05 system-ui,sans-serif!important} #shell #rankpodium [data-place="1"] .podium-trophy{font-size:78px!important} #rankpodium .podium-block{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;padding:12px 8px 9px;width:100%;box-sizing:border-box;border-radius:12px 12px 3px 3px;background:linear-gradient(130deg,#6dada5,#315d62);border:1px solid #b6e4d3;box-shadow:inset 0 4px 0 #ffffff30,0 6px 8px #071a2e60;min-height:115px} #rankpodium [data-place="1"] .podium-block{min-height:142px;background:linear-gradient(130deg,#e2b94e,#8b642b);border-color:#ffdf77} #rankpodium [data-place="3"] .podium-block{min-height:99px;background:linear-gradient(130deg,#b88963,#675049);border-color:#e8b287} #rankpodium .podium-nickname{font:700 15px/1.2 system-ui,sans-serif;color:#fffbe4;max-width:100%;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #rankpodium .podium-points{font:700 13px/1.2 system-ui,sans-serif;color:#fff1c3} #rankpodium .podium-achievement{font:11px/1.2 system-ui,sans-serif;color:#eff0d9} #rankpodium .podium-rank{font:900 27px/1.1 system-ui,sans-serif;color:#fff4c1;margin-top:auto} @media(max-height:720px) and (orientation:portrait){#rotate{gap:7px;padding-top:15px;padding-bottom:15px}.launch-brand,#rotate .launch-brand{height:119px;width:290px}#rotate .launch-susana{width:65px;height:83px;background-position:-5.49px -2.65px;background-size:337.33px 174.30px}#rotate .rotate-callout{padding:12px 8px;margin-top:5px}#rotate .rotate-callout>b{font-size:43px}#rotate .rotate-callout>strong{font-size:27px!important}#rotate .browser-help{margin-top:10px}#rotate .launch-buttons{gap:7px;margin-top:8px}#rotate .launch-buttons a,#rotate .launch-buttons button{min-height:42px;padding:10px 12px}#rotate details{margin-top:8px}} @media(max-height:560px) and (orientation:landscape){#rankpodium{max-width:500px;gap:12px;margin-bottom:10px}#shell #rankpodium .podium-trophy{font-size:49px!important}#shell #rankpodium [data-place="1"] .podium-trophy{font-size:65px!important}#rankpodium .podium-block{min-height:90px;padding:8px 6px;gap:3px}#rankpodium [data-place="1"] .podium-block{min-height:110px}#rankpodium [data-place="3"] .podium-block{min-height:78px}#rankpodium .podium-rank{font-size:23px}} #shell #rankpodium [data-place="2"] .podium-trophy{filter:grayscale(1) brightness(1.25) drop-shadow(0 4px 3px #071e3680)} #shell #rankpodium [data-place="3"] .podium-trophy{filter:sepia(.55) saturate(.8) brightness(.85) drop-shadow(0 4px 3px #071e3680)} /* Separate Susana Tours signature on the phone launch screen. */ #rotate .rotate-sponsor-logo{display:block;width:86px;height:60px;object-fit:contain;margin:0 auto 4px;filter:drop-shadow(0 2px 2px #0005)}@media(max-height:720px) and (orientation:portrait){#rotate .rotate-sponsor-logo{width:66px;height:46px;margin-bottom:2px}} /* Readable labelled settings without an emoji-dependent glyph. */ #menu #optionsopen{width:auto!important;min-width:100px;display:inline-flex;align-items:center;justify-content:center;gap:7px;font:inherit!important}#menu #optionsopen svg{width:25px;height:25px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}#menu #optionsopen span{font-family:MadeiraArcadeSoft,Arial,sans-serif;font-size:17px}#rankretry[hidden]{display:none!important}#rankretry{font-size:17px;padding:8px 18px} @media(max-height:500px){#menu .menu-links{gap:9px}#menu #optionsopen{min-width:84px;padding:6px 8px}#menu #optionsopen svg{width:21px;height:21px}#menu #optionsopen span{font-size:14px}} /* Clearer language choice, with a comfortable phone touch target. */ .language-choice{font-size:14px;gap:10px}.game-language{font-size:15px;max-width:205px;min-height:38px;padding:8px 12px}#rotate .language-choice{font-size:15px;margin:3px 0}#rotate .game-language{font-size:16px;min-height:44px;padding:10px 14px;max-width:220px} /* Parenthetical phone rotation guidance. */ #rotate .rotate-note{display:block;max-width:360px;margin:2px auto 0;color:#e5eddc;font:14px/1.35 system-ui,sans-serif} @media(max-height:720px) and (orientation:portrait){#rotate .rotate-note{font-size:13px;max-width:340px}} /* Opening the external browser is the primary recovery action. */ #rotate #openchrome{background:linear-gradient(135deg,#ffe18a,#f8c65c);color:#173a38;border:2px solid #fff1bc;font-weight:800;box-shadow:0 0 0 2px #ffdc7524,0 4px 18px #ffdc7538}#rotate #launchretry{background:#10444c;color:#f8f2df;border:1px solid #bde4dd88;box-shadow:none} /* Consistent aligned menu controls; icon-only settings. */ #menu .menu-links{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:12px} #menu .menu-links>button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:48px;min-height:48px;margin:0;padding:8px 13px;font-size:17px;line-height:1;vertical-align:middle} #menu .menu-links>#optionsopen{width:48px!important;min-width:48px!important;height:48px;padding:9px;flex:0 0 48px;gap:0} #menu #optionsopen svg{width:27px;height:27px;stroke-width:2} #menu .player-form label{font-size:14px;line-height:1.25} #shell #hudcontrols #home,#shell #hudcontrols #pause{color:#fff4cf!important;background:#122f3ed9!important;border:1px solid #e4efdca6!important;box-shadow:0 2px 3px #04161b66!important} #shell #hudcontrols #home svg,#shell #hudcontrols #pause svg{fill:currentColor;stroke:currentColor;stroke-width:.65;filter:drop-shadow(0 1px 1px #06191c)} @media(max-height:500px){#menu .menu-links{gap:9px}#menu .menu-links>button{height:44px;min-height:44px;padding:6px 10px;font-size:14px}#menu .menu-links>#optionsopen{width:44px!important;min-width:44px!important;height:44px;flex-basis:44px;padding:8px}#menu #optionsopen svg{width:25px;height:25px}#menu .player-form label{font-size:12px}} /* Shared center axes for labels, fields, social links and overlay content. */ #menu .menu-copy,#menu .menu-controls{justify-self:center;align-items:center;text-align:center} #menu .brand-group{width:100%;align-items:center;text-align:center} #menu .player-form{margin-left:auto;margin-right:auto;text-align:center} #menu .player-form label,#menu .player-form small{text-align:center;margin-left:auto;margin-right:auto} #menu .player-form>div{justify-content:center;align-items:stretch;width:100%} #menu .player-form input{text-align:center} #menu .susana-social{width:100%;align-self:center;align-items:center;justify-content:center;margin-left:auto;margin-right:auto} #menu .menu-links{width:100%;align-self:center} #shell .overlay .panel-layout{margin-left:auto;margin-right:auto;text-align:center} #shell #quizanswers{margin-left:auto;margin-right:auto} #shell #menuoptions .player-form{justify-self:center;text-align:center} /* v78: stable aligned route frames, art loading never looks like a broken card. */ #levels .route-card,#levels .route-card:nth-child(even){transform:none;flex-shrink:0} #levels .route-card:active{transform:translateY(3px)} .route-scene{transition:opacity .18s ease} .route-art-loading .route-scene,.route-art-failed .route-scene{opacity:0} .route-art-loading:before{content:'…';position:absolute;top:22%;left:0;right:0;text-align:center;font-size:32px;color:var(--route-accent);pointer-events:none} .route-art-failed{background:linear-gradient(145deg,#244b43,#102b37)!important} /* Podium names are compact; trophies and the three steps remain prominent. */ #rankpodium{max-width:450px;gap:12px} #rankpodium .podium-place{max-width:136px} #rankpodium .podium-block{min-height:75px;padding:8px 6px;gap:4px;border-radius:8px 8px 3px 3px} #rankpodium [data-place="1"] .podium-block{min-height:97px} #rankpodium [data-place="3"] .podium-block{min-height:62px} #rankpodium .podium-nickname{font-size:13px} #rankpodium .podium-rank{font-size:25px} @media(max-height:560px) and (orientation:landscape){#rankpodium .podium-block{min-height:59px}#rankpodium [data-place="1"] .podium-block{min-height:77px}#rankpodium [data-place="3"] .podium-block{min-height:49px}} /* v87: restore the title above the right-hand controls; modest increase only. */ #menu .game-name{width:110%;max-width:396px;margin:0 0 4px;line-height:0} #menu .game-name img{display:block;width:100%;height:auto;max-height:145px!important;object-fit:contain} @media(max-height:420px) and (orientation:landscape){#menu .game-name img{max-height:135px!important}} /* Compact portrait logo with Susana visible only above her waist. */ #rotate .launch-brand{width:min(310px,86vw);height:calc(min(310px,86vw) * .366667 + 52px);flex-shrink:0} #rotate .launch-susana{top:0;width:85px;height:66px;overflow:hidden;background-position:-7.19px -3.49px;background-size:442.37px 228.8px} #rotate .rotate-game-logo{width:100%;bottom:0} @media(max-height:720px) and (orientation:portrait){#rotate .launch-brand{width:min(275px,86vw);height:calc(min(275px,86vw) * .366667 + 45px)}#rotate .launch-susana{width:75px;height:58px;background-position:-6.35px -3.08px;background-size:390.33px 201.88px}} /* Numbers belong on the cups; podium blocks contain only player names. */ #rankpodium .podium-trophy{position:relative} #rankpodium .podium-trophy-rank{position:absolute;left:50%;top:20%;transform:translateX(-50%);font-family:Arial,sans-serif!important;font-size:.28em!important;font-weight:900!important;line-height:1!important;color:#72400b;text-shadow:0 1px 0 #fff1a0} /* v92: keep the familiar two-column composition close together. */ @media(orientation:landscape){ #menu .menu-layout{max-width:1040px;grid-template-columns:1.1fr 1fr;column-gap:clamp(18px,2.2vw,30px)} #menu .menu-copy{max-width:480px;justify-self:end} #menu .menu-controls{max-width:420px;justify-self:start} } @media(hover:hover) and (pointer:fine) and (min-width:900px){ #shell #leaderboard .panel-layout{max-width:1080px!important} #shell :is(#ranktable,#rankmoretable){font-size:clamp(20px,2.8vh,29px)} #shell :is(#ranktable,#rankmoretable) th{font-size:clamp(14px,1.9vh,20px)} #shell :is(#ranktable,#rankmoretable) td,#shell :is(#ranktable,#rankmoretable) th{padding:clamp(5px,.8vh,9px) 14px} #shell #rankpodium{max-width:540px;gap:16px} #shell #rankpodium .podium-place{max-width:165px} #shell #rankpodium .podium-nickname{font-size:18px} #shell #rankstatus,#shell #myscore{font-size:clamp(15px,1.9vh,20px)} } /* Mobile browser bars change the visible viewport without changing the game world. */ body[data-mobile-viewport="yes"] main{width:var(--game-visible-width,100vw)!important;height:var(--game-visible-height,100dvh)!important} body[data-mobile-viewport="yes"] #shell{position:fixed!important;inset:0 auto auto 0!important;top:0!important;transform:none!important;width:var(--game-visible-width,100vw)!important;height:var(--game-visible-height,100dvh)!important;min-height:0!important;min-width:0!important} @media(hover:none) and (pointer:coarse){#shell #fullscreen{width:44px;height:44px;min-width:44px;min-height:44px;top:max(5px,env(safe-area-inset-top));right:max(98px,calc(env(safe-area-inset-right) + 98px));font-size:27px}} #shell #installhelp{z-index:30;background:linear-gradient(#20483b,#102f32);border:2px solid #bad99d;border-radius:18px;color:#fff5d8;box-shadow:0 12px 80px #000a} #shell #installhelp .panel-layout{transform:scale(var(--panel-scale,1));transform-origin:center;justify-content:center;width:100%;height:100%;gap:8px} #shell #installhelp p{margin:4px 0;font:16px/1.4 system-ui,sans-serif;max-width:670px} #shell #installhelp b{font-size:23px}#shell #installhelp button{min-height:44px;padding:10px 22px;border:2px solid #fff0a2;border-radius:12px;background:#f1ce68;color:#183b35;font:700 17px system-ui} /* Winner names occupy the centre of each podium step. */ #shell #rankpodium .podium-block{justify-content:center;align-items:center} #shell #rankpodium .podium-nickname{font-weight:900;font-size:clamp(16px,2.2vh,21px);line-height:1.25;text-shadow:0 2px 2px #16363188} @media(hover:hover) and (pointer:fine) and (min-width:900px){#shell #rankpodium .podium-nickname{font-size:clamp(20px,2.6vh,27px)}} #menu .browser-assist{font:12px/1.3 system-ui,sans-serif;color:#fff3b8;padding:5px 10px;min-height:36px;border:1px solid #f4dda780;border-radius:9px;background:#153c35;max-width:380px} #menu .browser-assist[hidden]{display:none!important} /* v98: enlarge the familiar start composition, with viewport-bounded fitting. */ #menu .menu-layout{width:80%;max-width:1040px} #menu .player-form label{font-size:16px!important;line-height:1.25} #menu .player-form small{font-size:12px!important;line-height:1.25} #menu .player-form input{font-size:20px} #shell #rankpodium .podium-nickname{font-weight:900!important} @media(orientation:portrait){#menu .menu-layout{max-width:420px}} /* The original logo replaces the ranking title within a bounded header. */ #shell #leaderboard h2.ranking-brand{display:flex;align-items:center;justify-content:center;width:100%;max-width:480px;height:clamp(88px,12vh,128px);min-height:88px;margin:0 auto 5px!important;line-height:0!important;flex:none} #leaderboard .ranking-brand img{display:block;width:auto;height:100%;max-width:100%;object-fit:contain} @media(max-height:420px){#shell #leaderboard h2.ranking-brand{height:70px;min-height:70px;margin-bottom:2px!important}} /* The game title leads; the tour brand stays secondary. */ #menu .brand{width:clamp(132px,21vw,238px);height:clamp(84px,calc(var(--shell-height,400px)*.264),153px)} #menu .game-name{width:114%;max-width:475px} #menu .game-name img{max-height:174px!important} @media(max-height:420px) and (orientation:landscape){#menu .brand{height:77px}#menu .game-name img{max-height:150px!important}} @media(orientation:portrait){#menu .brand{height:111px}} /* Large, undistorted entry points for ranking and settings. */ #menu .menu-links>#ranking{min-width:148px;height:64px;min-height:64px;gap:10px;font-size:21px;padding:10px 17px;flex-shrink:0} #menu .menu-links>#optionsopen{width:64px!important;min-width:64px!important;height:64px;min-height:64px;flex:0 0 64px;padding:10px;aspect-ratio:1} #menu #optionsopen svg{width:40px;height:40px;min-width:40px;flex-shrink:0;stroke-width:1.6;aspect-ratio:1} #menu #ranking svg{width:34px;height:34px;min-width:34px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;aspect-ratio:1} @media(max-height:500px),(max-width:700px){#menu .menu-links>#ranking{min-width:128px;height:54px;min-height:54px;font-size:18px;padding:8px 12px;gap:8px}#menu .menu-links>#optionsopen{width:54px!important;min-width:54px!important;height:54px;min-height:54px;flex-basis:54px;padding:8px}#menu #optionsopen svg{width:34px;height:34px;min-width:34px}#menu #ranking svg{width:30px;height:30px;min-width:30px}} /* Fullscreen belongs after pause; reserve its width in the canvas HUD. */ #shell #hudcontrols{height:44px;gap:8px;top:max(8px,env(safe-area-inset-top))} #shell #hudcontrols #home,#shell #hudcontrols #pause{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;max-width:44px!important;max-height:44px!important;flex:0 0 44px!important;padding:10px!important;border-radius:9px} #shell #hudcontrols #fullscreen{position:static!important;inset:auto!important;display:inline-flex!important;align-items:center;justify-content:center;gap:6px;width:112px!important;min-width:112px!important;height:44px!important;min-height:44px!important;flex:0 0 112px;margin:0!important;padding:8px!important;color:#fff4cf!important;background:#122f3ed9!important;border:1px solid #e4efdca6!important;border-radius:9px;box-shadow:0 2px 3px #04161b66!important;font:700 12px Arial,sans-serif!important;line-height:1} #shell #hudcontrols #fullscreen svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} #shell #hudcontrols #fullscreen[hidden]{display:none!important} /* Start actions share one centered row and the same height. */ #menu .menu-links{display:flex;align-items:center;justify-content:center;width:100%;gap:12px} #menu .menu-links>#fullscreenmenu,#menu .menu-links>#ranking,#menu .menu-links>#optionsopen{height:64px;min-height:64px;max-height:64px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;margin:0;line-height:1.1;vertical-align:middle} #menu .menu-links>#fullscreenmenu{min-width:148px;flex:0 0 auto;padding:10px 17px;font-size:21px;white-space:nowrap} @media(max-height:500px),(max-width:700px){#menu .menu-links{gap:9px}#menu .menu-links>#fullscreenmenu,#menu .menu-links>#ranking,#menu .menu-links>#optionsopen{height:54px;min-height:54px;max-height:54px}#menu .menu-links>#fullscreenmenu{min-width:128px;padding:8px 12px;font-size:18px}} /* Equal result actions on mobile and desktop. */ #shell #result #again,#shell #result #resultmap{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:min(100%,clamp(240px,30vw,480px));height:clamp(54px,7vh,80px);min-height:0;margin:12px auto 0;padding:10px 20px;border-radius:18px;font-size:clamp(20px,2vw,32px);line-height:1.15;flex-shrink:0} #shell #result #resultmap{background:linear-gradient(#a7e79e,#6fc18b);border:2px solid #d5f6bb;box-shadow:0 4px #346e56;color:#153a3c;text-shadow:none} /* v120: 150% mobile footer; at least 400% on spacious desktop displays. */ #shell #menu > .copyright{font-size:9px;line-height:1.25;max-width:calc(100% - 24px);text-align:center;white-space:normal;display:flex;flex-direction:column;gap:2px} #shell #menu > .copyright > span{display:block} #shell #menu > .copyright .game-version{font-size:7.5px} @media(max-height:560px){#shell #menu > .copyright{font-size:8.25px}#shell #menu > .copyright .game-version{font-size:6.75px}} @media(min-width:1100px) and (min-height:600px){#shell #menu > .copyright{font-size:clamp(24px,1.25vw,64px);line-height:1.2;bottom:max(12px,env(safe-area-inset-bottom));gap:4px}#shell #menu > .copyright .game-version{font-size:clamp(20px,1.042vw,53.34px)}} /* v125: discreet footer, with a readable normal-weight sans-serif. */ #shell #menu > .copyright,#shell #menu > .copyright > span{font-family:Arial,sans-serif!important;font-weight:400!important;color:#b9d9c7!important;text-shadow:0 1px 2px #092c2766!important;letter-spacing:.15px!important} #shell #menu > .copyright{font-size:10px;line-height:1.3;bottom:max(20px,calc(env(safe-area-inset-bottom) + 12px));gap:3px} #shell #menu > .copyright .game-version{font-size:9px} @media(min-width:1100px) and (min-height:600px){#shell #menu > .copyright{font-size:clamp(18px,.9vw,36px);bottom:max(24px,calc(env(safe-area-inset-bottom) + 12px));gap:3px}#shell #menu > .copyright .game-version{font-size:clamp(15px,.75vw,30px)}} #shell #menu .guide-slogan{color:#ffffff!important} #shell #menu .copyright,#shell #menu .game-version{color:#cee4d8!important} #shell #leaderboard{overflow-y:auto!important;overscroll-behavior:contain!important;justify-content:flex-start!important;touch-action:pan-y!important;align-items:center!important} #shell #leaderboard .panel-layout{transform:none!important;margin:auto 0!important} #shell #rankmore{width:100%;text-align:center;margin:10px 0} #shell #rankmore summary{display:inline-block;cursor:pointer;list-style:none;color:#d2eee3;background:#234b50;border:2px solid #93cfc1;border-radius:12px;padding:12px 20px;font:18px MadeiraArcadeSoft,monospace} #shell #rankmore summary:focus-visible{outline:3px solid #ffe080;outline-offset:4px} #shell #rankmore summary::-webkit-details-marker{display:none} #shell #rankmore summary::after{content:' ▾'}#shell #rankmore[open] summary::after{content:' ▴'} #shell #rankmoretable{width:100%;margin-top:14px} #shell .rank-top-ten td{font-weight:700;border-bottom:1px solid #bce1c344} #shell .rank-other td{font-weight:400} #shell .rank-top-ten td{font-weight:700!important} #shell #hudlogolink{position:absolute;top:0;left:var(--safe-left,0px);z-index:21;display:block;cursor:pointer;border-radius:6px;touch-action:manipulation;background:transparent}#shell #hudlogolink:focus-visible{outline:2px solid #ffe080;outline-offset:-3px} /* v134: preserve the familiar menu; correct only fitting in short visible viewports. */ #shell[data-short-menu="yes"] #menu:not([hidden]){padding:10px max(18px,env(safe-area-inset-right)) 10px max(18px,env(safe-area-inset-left));overflow-y:auto;overflow-x:hidden;touch-action:pan-y;overscroll-behavior:contain} #shell[data-short-menu="yes"] #menu[data-menu-scroll="yes"]{justify-content:flex-start} #shell[data-short-menu="yes"] #menu .menu-layout{width:96%;max-width:1040px;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:20px;padding:0;transform:none!important;top:0!important} #shell[data-short-menu="yes"] #menu .menu-copy,#shell[data-short-menu="yes"] #menu .menu-controls{max-width:100%;width:100%;justify-self:center;gap:6px} #shell[data-short-menu="yes"] #menu .brand-group{padding:0;gap:6px;transform:none} #shell[data-short-menu="yes"] #menu .brand{width:70%;height:clamp(54px,calc(var(--shell-height,400px)*.16),88px)} #shell[data-short-menu="yes"] #menu .guide-slogan{font-size:16px;max-width:100%;line-height:1.2} #shell[data-short-menu="yes"] #menu .game-name{width:100%;max-width:100%;margin:0} #shell[data-short-menu="yes"] #menu .game-name img{width:100%;max-height:clamp(66px,calc(var(--shell-height,400px)*.20),110px)!important} #shell[data-short-menu="yes"] #menu .player-form{max-width:100%;margin:0} #shell[data-short-menu="yes"] #menu .player-form label{font-size:16px!important;line-height:1.2;margin:0 0 6px} #shell[data-short-menu="yes"] #menu .player-form input{font-size:20px;min-height:44px;padding:6px 10px;box-sizing:border-box} #shell[data-short-menu="yes"] #menu .player-form button{min-height:44px;min-width:44px;font-size:20px} #shell[data-short-menu="yes"] #menu .player-form small{font-size:12px!important;min-height:0;margin-top:4px} #shell[data-short-menu="yes"] #menu .player-form small:empty{display:none} #shell[data-short-menu="yes"] #menu .language-choice{font-size:15px;margin:0;gap:8px} #shell[data-short-menu="yes"] #menu .game-language{font-size:16px;max-width:100%;min-height:32px;padding:4px 8px} #shell[data-short-menu="yes"] #menu #play{max-width:100%;min-height:46px;font-size:30px;padding:4px 12px} #shell[data-short-menu="yes"] #menu #chooseRoute{max-width:100%;font-size:18px;min-height:40px;padding:4px 8px} #shell[data-short-menu="yes"] #menu .menu-tip{font-size:14px;line-height:1.2} #shell[data-short-menu="yes"] #menu .browser-assist{font-size:13px;min-height:24px;padding:3px 6px;max-width:100%} #shell[data-short-menu="yes"] #menu .menu-links{gap:8px;width:100%} #shell[data-short-menu="yes"] #menu .menu-links>:is(#fullscreenmenu,#ranking,#optionsopen){height:48px;min-height:48px;max-height:48px;min-width:0;flex:1 1 0;font-size:17px;padding:6px 8px} #shell[data-short-menu="yes"] #menu .menu-links>#optionsopen{width:48px!important;min-width:48px!important;flex:0 0 48px} #shell[data-short-menu="yes"] #menu #optionsopen svg,#shell[data-short-menu="yes"] #menu #ranking svg{width:30px;height:30px;min-width:0} #shell[data-short-menu="yes"] #menu .susana-social{margin:0;gap:10px;flex-wrap:nowrap} #shell[data-short-menu="yes"] #menu .susana-social a{width:72px;height:58px;min-width:44px;min-height:44px;gap:3px;box-sizing:border-box} #shell[data-short-menu="yes"] #menu .susana-social svg{width:21px;height:21px} #shell[data-short-menu="yes"] #menu .susana-social a span{font-size:13px} #shell[data-short-menu="yes"] #menu>.copyright{position:static;transform:none;flex:none;width:100%;margin:14px 0 0;font-size:11px;line-height:1.2;gap:3px} #shell[data-short-menu="yes"] #menu>.copyright .game-version{font-size:10px} /* v135: restore compact centred proportions after the short-viewport fix. */ #shell[data-short-menu="yes"] #menu .menu-layout{width:66%;max-width:800px;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:20px} #shell[data-short-menu="yes"] #menu .menu-copy{max-width:380px;justify-self:end} #shell[data-short-menu="yes"] #menu .menu-controls{max-width:360px;justify-self:start} #shell[data-short-menu="yes"] #menu .player-form{max-width:310px} #shell[data-short-menu="yes"] #menu .menu-links{gap:6px} #shell[data-short-menu="yes"] #menu .menu-links>#fullscreenmenu{font-size:13px;white-space:normal;line-height:1.15;padding:4px} #shell[data-short-menu="yes"] #menu .menu-links>#ranking{font-size:15px;gap:5px;padding:4px} #shell[data-short-menu="yes"] #menu #ranking svg{width:23px;height:23px;flex-shrink:0} #shell[data-short-menu="yes"] #menu .menu-links>#optionsopen{width:44px!important;min-width:44px!important;flex-basis:44px} /* Social links are square icon-only controls; accessible names stay on the links. */ #shell #menu .susana-social a span{display:none!important} #shell #menu .susana-social a{width:44.8px;height:44.8px;min-width:44.8px;min-height:44.8px;border-radius:8.4px;padding:5.6px;box-sizing:border-box;gap:0;flex-direction:row} #shell #menu .susana-social svg{width:23.8px;height:23.8px} #shell[data-short-menu="yes"] #menu .susana-social a{width:36.4px;height:36.4px;min-width:36.4px;min-height:36.4px;padding:4.9px;border-radius:7px} #shell[data-short-menu="yes"] #menu .susana-social svg{width:21px;height:21px} /* Defeat summary: route objective first, run points second, saved total third. */ #resultfruit{display:none} body[data-scene="dead"] #result #resultfruit{display:block;font:normal clamp(27px,3.6vh,42px)/1.2 MadeiraArcadeSoft,monospace!important;color:#ffdf70;margin:4px 0;text-shadow:2px 3px #081c31} body[data-scene="dead"] #result #resultinfo{font-size:clamp(19px,2.5vh,28px)!important;margin:2px 0} @media(max-height:390px){body[data-scene="dead"] #result #resultfruit{font-size:24px!important;margin:2px 0}body[data-scene="dead"] #result #resultinfo{font-size:18px!important}} #logoplay{display:block;width:100%;height:auto;padding:0;border:0;background:none;border-radius:0;box-shadow:none;transform:none;cursor:pointer}#logoplay:focus-visible{outline:2px solid #ffe88c;outline-offset:4px} /* Original result button artwork; remove only the extruded side shadow. */ #shell #result #again,#shell #result #again:active,#shell #result #resultmap,#shell #result #resultmap:active{box-shadow:none!important;transform:none!important} #levels .route-card[data-route="1"] .route-scene,#levels .route-card[data-route="2"] .route-scene{background-position:right center} #logoplay{display:block;width:100%;height:auto;padding:0;border:0;background:none;border-radius:0;box-shadow:none;transform:none;cursor:pointer}#logoplay:focus-visible{outline:2px solid #ffe88c;outline-offset:4px} /* Fit the whole phone start panel into the visible viewport, including every button. */ #shell[data-phone-menu="yes"] #menu:not([hidden]){overflow:hidden;justify-content:center;padding:8px max(18px,env(safe-area-inset-right)) 8px max(18px,env(safe-area-inset-left));touch-action:manipulation} #shell[data-phone-menu="yes"] #menu .menu-layout{transform:scale(var(--menu-scale,1))!important;top:var(--menu-top,0px)!important;transform-origin:center center;column-gap:18px} #shell[data-phone-menu="yes"] #menu .menu-copy,#shell[data-phone-menu="yes"] #menu .menu-controls{gap:4px} #shell[data-phone-menu="yes"] #menu .brand{height:clamp(48px,calc(var(--shell-height,400px)*.14),74px)} #shell[data-phone-menu="yes"] #menu .guide-slogan{font-size:14px} #shell[data-phone-menu="yes"] #menu .game-name img{max-height:clamp(56px,calc(var(--shell-height,400px)*.17),88px)!important} #shell[data-phone-menu="yes"] #menu .player-form label{font-size:14px!important;margin-bottom:4px} #shell[data-phone-menu="yes"] #menu .player-form input{font-size:18px;min-height:38px} #shell[data-phone-menu="yes"] #menu .player-form button{min-height:38px;min-width:38px;font-size:18px} #shell[data-phone-menu="yes"] #menu .language-choice{font-size:13px} #shell[data-phone-menu="yes"] #menu .game-language{font-size:14px;min-height:28px;padding:3px 6px} #shell[data-phone-menu="yes"] #menu #play{min-height:40px;font-size:26px} #shell[data-phone-menu="yes"] #menu #chooseRoute{min-height:34px;font-size:16px} #shell[data-phone-menu="yes"] #menu .menu-tip{font-size:13px} #shell[data-phone-menu="yes"] #menu .browser-assist{font-size:11px;min-height:20px;padding:2px 4px} #shell[data-phone-menu="yes"] #menu .menu-links>:is(#fullscreenmenu,#ranking,#optionsopen){height:40px;min-height:40px;max-height:40px} #shell[data-phone-menu="yes"] #menu .susana-social a{width:30.8px;height:30.8px;min-width:30.8px;min-height:30.8px;padding:4.2px} #shell[data-phone-menu="yes"] #menu .susana-social svg{width:19.6px;height:19.6px} #shell[data-phone-menu="yes"] #menu>.copyright{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);margin:0;width:100%;font-size:11px} /* Quiz artwork is taken from the current route, under a legible translucent tint. */ #shell #quiz{background-image:linear-gradient(110deg,#09262bc9,#09262bb3),var(--quiz-art,url("assets/ribeiro-v7.webp"))!important;background-position:center!important;background-size:cover!important;background-color:#123c3c!important} @media(hover:hover) and (pointer:fine) and (min-width:900px) and (min-height:600px){#shell #quiz{width:min(1000px,88%)!important}#shell #quiz #quizquestion{font-size:clamp(28px,2.6vw,36px);line-height:1.4}#shell #quiz #quizanswers button{font-size:clamp(20px,1.8vw,25px)}} /* Restore the requested discreet start artwork and clear footer. */ #shell #menu .copyright,#shell #menu .game-version{color:#fff!important} /* v207: quieter name guidance, separated from the guide's slogan. */ #shell #menu .player-form{margin-top:24px} #shell #menu .player-form label{font-size:12px!important;line-height:1.35;letter-spacing:0;text-transform:none;max-width:310px} #shell #menu .susana-social{justify-content:center;align-items:center;gap:8.4px} #shell[data-short-menu="yes"] #menu .player-form{margin-top:18px} #shell[data-short-menu="yes"] #menu .player-form label{font-size:12px!important;line-height:1.3} #shell[data-short-menu="yes"] #menu .susana-social{gap:7px} #shell[data-phone-menu="yes"] #menu .player-form{margin-top:18px} #shell[data-phone-menu="yes"] #menu .player-form label{font-size:10.5px!important;line-height:1.3} /* v208: reading panels use the available width instead of shrinking text. */ #shell :is(#help,#releaseinfo){overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;touch-action:pan-y!important;justify-content:flex-start!important;align-items:center!important;padding:40px max(22px,env(safe-area-inset-right)) 24px max(22px,env(safe-area-inset-left))} #shell :is(#help,#releaseinfo) .panel-layout{position:relative;transform:none!important;width:min(960px,100%);max-width:960px!important;height:auto!important;margin:auto 0!important;gap:18px;flex:none} #shell #help .helpgrid{display:grid;width:100%;grid-template-columns:1fr 1fr;gap:24px 32px} #shell #help .helpgrid p{font-size:16px!important;line-height:1.5!important;text-align:left} #shell #help .helpgrid b{display:block;margin-bottom:6px} #shell :is(#help,#releaseinfo) h2{font-size:30px!important;line-height:1.2;margin:0 38px 8px;text-align:center} #shell :is(#help,#releaseinfo) .reading-close{position:absolute;right:0;top:0;display:grid;place-items:center;width:36px;height:36px;border:1px solid #bad6c7;border-radius:9px;background:#173e3b;color:#fff7d5;font:22px system-ui;padding:0} #shell #releaseinfo{background:#0b2948f5} #shell #releaseinfo section{width:100%;text-align:left;border-top:1px solid #a7c9bd55;padding-top:16px} #shell #releaseinfo h3{font:700 20px system-ui;margin:0 0 10px;color:#ffdf70} #shell #releaseinfo ul{font:16px/1.5 system-ui;margin:0;padding-left:22px} #shell #releaseinfo li+li{margin-top:7px} #shell :is(#releaseback,#helpback){align-self:center;margin-top:8px} @media(max-width:650px){#shell #help .helpgrid{grid-template-columns:1fr;gap:22px}#shell #help .helpgrid p,#shell #releaseinfo ul{font-size:15px!important}} /* Full-screen arcade quiz: one scene, no side panel or reaction behind it. */ #shell #quiz{inset:0!important;transform:none!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:max(22px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left))!important;overflow:auto;background-image:radial-gradient(ellipse at 50% 28%,#0b294865,#07182ed9),var(--quiz-art)!important;background-color:#0b2948!important;justify-content:safe center!important} #shell #quiz::before{display:none!important} #shell #quiz .panel-layout{width:min(1120px,100%)!important;max-width:1120px!important;gap:20px;transform:none!important;align-items:stretch;position:relative} #shell #quiz .quiz-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;color:#fbe28f} #shell #quiz .quiz-title{font:clamp(24px,3.5vw,46px)/1.1 MadeiraArcadeSoft,monospace;letter-spacing:1px;color:#ffdf70;text-shadow:0 4px #6b4428,2px 0 #183044,-2px 0 #183044;margin:0} #shell #quiz .quiz-route{font:16px/1.3 MadeiraArcadeSoft,monospace;color:#b9f0e8;background:#123d4d;border:2px solid #82c5bd;border-radius:12px;padding:9px 14px;white-space:nowrap} #shell #quiz #quizquestion{width:100%;font:clamp(23px,2.7vw,36px)/1.3 MadeiraArcadeSoft,monospace!important;text-transform:none!important;letter-spacing:0;text-align:center;color:#fff6d9;padding:clamp(20px,3vw,34px);margin:0;background:linear-gradient(135deg,#1b4d63ed,#0d293fe8);border:3px solid #ffdf82;border-radius:24px;box-shadow:0 7px #806037,0 10px #07192b;text-shadow:0 2px #07182e} #shell #quiz #quizguide{font:16px/1.4 MadeiraArcadeSoft,monospace!important;text-align:center;margin:0;color:#d7f6ef} #shell #quiz #quizanswers{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:100%;margin:4px 0 0} #shell #quiz #quizanswers button{display:grid;grid-template-columns:66px minmax(0,1fr);align-items:center;gap:13px;text-align:left!important;font:clamp(18px,1.9vw,25px)/1.25 MadeiraArcadeSoft,monospace!important;text-transform:none!important;min-height:128px;padding:18px 16px!important;border:3px solid var(--answer-color)!important;border-radius:22px!important;background:linear-gradient(#214c65,#12334a)!important;color:#fff6df!important;box-shadow:0 6px #061b2c,inset 0 2px #ffffff1c;text-shadow:0 2px #07182e;transition:transform .15s,border-color .15s,box-shadow .15s} #shell #quiz #quizanswers button:nth-child(1){--answer-color:#ffd875}#shell #quiz #quizanswers button:nth-child(2){--answer-color:#80e7df}#shell #quiz #quizanswers button:nth-child(3){--answer-color:#f6a6be} #shell #quiz .quiz-token{display:grid;place-items:center;width:66px;height:72px;clip-path:polygon(20% 0,80% 0,100% 25%,100% 75%,80% 100%,20% 100%,0 75%,0 25%);background:linear-gradient(#fff5cf,var(--answer-color));color:#17344a;font:44px/1 MadeiraArcadeSoft,monospace!important;text-shadow:0 2px #ffffff85;filter:drop-shadow(0 4px #07192b)} #shell #quiz .quiz-answer-text{overflow-wrap:anywhere;min-width:0} #shell #quiz #quizanswers button:disabled{opacity:1!important;filter:saturate(.65)} #shell #quiz #quizanswers button:not(:disabled):hover,#shell #quiz #quizanswers button:focus-visible{transform:translateY(-4px);background:linear-gradient(#306c83,#1a4359)!important;box-shadow:0 10px #061b2c,0 0 18px #9ee6e533;outline:3px solid #fff6cf;outline-offset:3px} #shell #quiz #quizanswers button:not(:disabled):active{transform:translateY(3px);box-shadow:0 2px #061b2c} body[data-scene="quiz"] #hudlogolink{display:none!important} body[data-scene="won"][data-victory="yes"] #shell #result{justify-content:center!important;align-items:flex-end!important;padding:96px 5vw 26px!important;background:linear-gradient(90deg,#102c4230,#102c42b3)!important} body[data-scene="won"][data-victory="yes"] #shell #result .panel-layout{width:52%!important;max-width:650px!important;margin-left:auto!important;margin-right:0!important;gap:10px;padding:20px;background:#0d2d43e8;border:2px solid #efcf82;border-radius:22px} @media(max-height:480px) and (orientation:landscape){#shell #quiz{padding:14px 22px!important}#shell #quiz .panel-layout{gap:12px}#shell #quiz .quiz-title{font-size:26px}#shell #quiz #quizquestion{font-size:22px!important;padding:16px 20px}#shell #quiz #quizanswers{gap:12px}#shell #quiz #quizanswers button{min-height:88px;font-size:18px!important;padding:10px 12px!important;grid-template-columns:48px minmax(0,1fr);gap:9px}#shell #quiz .quiz-token{width:48px;height:54px;font-size:34px!important}#shell #quiz #quizguide{font-size:13px!important}body[data-scene="won"][data-victory="yes"] #shell #result .panel-layout{padding:12px;gap:5px}body[data-scene="won"] #result h2{font-size:27px!important}body[data-scene="won"] #resultinfo{font-size:17px!important}} @media(orientation:portrait),(max-width:650px){#shell #quiz .quiz-heading{flex-wrap:wrap;justify-content:center}#shell #quiz #quizanswers{grid-template-columns:1fr;gap:12px}#shell #quiz #quizanswers button{min-height:88px}#shell #quiz .panel-layout{gap:16px}body[data-scene="won"][data-victory="yes"] #shell #result{justify-content:flex-end!important;align-items:center!important;padding:16px!important}body[data-scene="won"][data-victory="yes"] #shell #result .panel-layout{width:100%!important}} @media(prefers-reduced-motion:reduce){#shell #quiz #quizanswers button{transition:none}} /*215: shared footer row aligns social and utility controls exactly. */ #shell #menu .menu-layout{grid-template-rows:auto auto;row-gap:18px!important} #shell #menu .menu-copy{grid-row:1;grid-column:1} #shell #menu .menu-controls{grid-row:1;grid-column:2} #shell #menu .susana-social{grid-row:2;grid-column:1;width:100%;max-width:480px;justify-self:center;align-self:center;justify-content:center;align-items:center;margin:0!important;gap:14px!important} #shell #menu .menu-links{grid-row:2;grid-column:2;width:100%;max-width:420px;justify-self:center;align-self:center;margin:0!important} #shell[data-short-menu="yes"] #menu .menu-layout{row-gap:12px!important} #shell[data-short-menu="yes"] #menu .susana-social{max-width:380px;justify-self:end;gap:11px!important} #shell[data-short-menu="yes"] #menu .menu-links{max-width:360px;justify-self:start} #shell[data-phone-menu="yes"] #menu .menu-layout{row-gap:8px!important} #shell[data-phone-menu="yes"] #menu .susana-social{gap:10px!important} /* Reading panels: one consistent left edge and no scaled/overlapping copy. */ #shell :is(#help,#releaseinfo) .panel-layout{align-items:stretch!important;min-width:0;max-width:960px!important;gap:18px} #shell :is(#help,#releaseinfo) :is(p,li,section){text-align:left!important;white-space:normal!important;overflow-wrap:break-word;word-break:normal;hyphens:auto;min-width:0} #shell :is(#help,#releaseinfo) h2{text-align:left!important;width:100%;margin:0 0 8px;padding-right:44px} #shell #help .helpgrid{grid-template-columns:minmax(0,1fr)!important;gap:22px} #shell #help .helpgrid p{margin:0!important;line-height:1.6!important} #shell #help .helpgrid b+br{display:none} #shell #releaseinfo section{margin:0;min-width:0} #shell #releaseinfo :is(ul,li){line-height:1.6} #shell :is(#help,#releaseinfo,#menuoptions) [data-options-copy]{display:contents!important;font:inherit!important;color:inherit!important;letter-spacing:inherit!important;text-transform:inherit!important} #shell :is(#help,#releaseinfo) :is(p,li,section){hyphens:none} /* Bonus uses the same arcade font, gold counters and dark panels as the route HUD. */ #bananaBonusOverlay[hidden]{display:none!important} #shell #quiz #quizguide{max-width:900px;font-size:clamp(12px,1.6vw,16px)!important} /* Owner317: tour brand +15% on main menu only; HUD uses original game logo. */ #menu .brand img{transform:scale(1.15);transform-origin:center center}