@font-face{font-family:Fredoka;src:url('./assets/fonts/fredoka-bold.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
/* Keep long presses on the game from selecting labels or opening iOS callouts. */
html,body,body *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,[contenteditable="true"]{-webkit-user-select:text;user-select:text}
img,canvas{-webkit-user-drag:none}
:root{font-family:Fredoka,ui-rounded,system-ui,-apple-system,sans-serif;font-weight:700;color:#24445b;background:#bad2de;font-synthesis:none;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);--blue:#13a9dc;--shadow:#1682ae;--green:#88ce35;--green-shadow:#5b9622}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{width:100%;height:100%;min-height:0;margin:0;overflow:hidden;overscroll-behavior:none}html{position:fixed;inset:0;height:100%}body{position:fixed;inset:var(--game-top,0px) auto auto var(--game-left,0px);width:var(--game-width,100%);height:var(--game-height,100%);touch-action:none}body{display:grid;place-items:center;background:radial-gradient(ellipse at 50% 15%,#edf6f9,#b4d0de)}button{font:inherit;cursor:pointer;border:0;touch-action:manipulation;user-select:none}button:focus-visible,#board:focus-visible{outline:3px solid #fff;outline-offset:4px}button:disabled{cursor:default;opacity:.42;filter:saturate(.6)}button :is(svg,img.button-icon){width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}button:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--shadow)}.hidden{display:none!important}
/* Logical portrait coordinates. Only viewport.js changes the outer scale. */
#game{width:390px;height:694px;min-height:0;max-height:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--portrait-scale,1));transform-origin:center;display:flex;flex-direction:column;isolation:isolate;padding:0 16px 14px;background:radial-gradient(ellipse at 30% 0%,#e6f0f4 0%,#d4e2e9 52%,#cbdfe7 100%);overflow:hidden;box-shadow:0 0 90px #456f8430}
#hud{flex-shrink:0;z-index:2}.hud-row{display:grid;grid-template-columns:1fr 1.25fr 1fr;align-items:center;gap:8px}.tools{display:flex;gap:9px}.icon-button{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;color:white;border:1px solid #ffffff70;box-shadow:0 3px 0 var(--shadow),inset 0 2px 0 #ffffff60;transition:transform .1s}.blue{background:linear-gradient(#39c6ef,#0ba4d9);--shadow:#2187ac}.pale{background:linear-gradient(#acd7e6,#85bbd2);--shadow:#77a8bd}.small{width:35px;height:35px;border-radius:11px}.small :is(svg,img.button-icon){width:19px;height:19px}.level-label{text-align:center;display:flex;align-items:center;flex-direction:column;gap:5px}#level-number{display:inline-block;min-width:112px;padding:7px 14px 8px;border-radius:12px;background:linear-gradient(#35c9f1,#079fd6);color:#fff;font-size:17px;font-weight:1000;letter-spacing:.035em;text-shadow:0 2px 0 #2786b3;box-shadow:0 3px 0 #65abc8,inset 0 2px 0 #ffffff8c}#level-name{font-size:12px;font-weight:800;white-space:nowrap;color:#668393}.coin-counter{justify-self:end;display:flex;align-items:center;gap:7px;background:linear-gradient(#fff9,#e9e5ea);height:33px;min-width:72px;padding:0 10px 0 0;border-radius:20px;color:#976132;border:1px solid #bfc9d8;box-shadow:0 2px 0 #a8b8c6;font-size:15px}.coin{display:inline-grid;place-items:center;width:32px;height:32px;background:linear-gradient(130deg,#fff288,#ffc72c 60%,#ee9b18);border:3px solid #f4af28;border-radius:50%;font-size:18px;line-height:1;font-weight:1000;color:#cf8712;text-shadow:0 1px 0 #ffef9b;box-shadow:inset 0 0 0 1px #fff096,0 2px 0 #dc9c2a;flex-shrink:0}.progress-row{display:flex;justify-content:space-between;align-items:center;margin:17px 4px 8px}.timer{display:flex;align-items:center;gap:6px;font-size:18px;font-weight:900;font-variant-numeric:tabular-nums}.timer :is(svg,img.button-icon){width:21px;height:21px;stroke:#42819e;stroke-width:2;fill:none;stroke-linecap:round}#rescue-count{font-size:12px;color:#68828e;letter-spacing:.06em;font-weight:800}#rescue-count b{color:#2b5164;font-size:15px;letter-spacing:0;margin-right:5px}#time-track{height:5px;border-radius:5px;background:#b9cfd9;overflow:hidden}#time-fill{width:100%;height:100%;background:linear-gradient(90deg,#44c5cc,#22a8d7);border-radius:5px;transition:width .5s linear}.timer.urgent{color:#de5263}.timer.urgent :is(svg,img.button-icon){stroke:#de5263}.tip{text-align:center;background:#ffffff65;color:#557587;box-shadow:0 1px 0 #b5cbd350;font-size:13px;font-weight:700;line-height:1.4;border-radius:12px;padding:9px 12px;margin:15px 12px 0;min-height:36px;flex-shrink:0}
#board{position:relative;flex:1 1 0;min-width:0;min-height:0;overflow:hidden;touch-action:none;user-select:none;cursor:grab;margin:5px -8px 0;outline:none}#board.dragging{cursor:grabbing}#board canvas{position:absolute;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;display:block;touch-action:none}#toast{position:absolute;bottom:85px;left:50%;transform:translate(-50%,15px);padding:10px 16px;background:#24445bed;color:white;font-size:13px;font-weight:700;text-align:center;border-radius:14px;z-index:10;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;max-width:90%;width:max-content}#toast.visible{opacity:1;transform:translate(-50%,0)}
.screen{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:26px}.backdrop{background:#1b486f82;backdrop-filter:blur(7px)}.panel{position:relative;width:100%;max-width:380px;padding:34px 24px 23px;text-align:center;background:linear-gradient(#f4fcff,#d9edf6);border:3px solid #f6ffff;border-radius:28px;box-shadow:0 8px 0 #80b2c9,0 20px 50px #0f3d6335;animation:pop .3s ease-out}.eyebrow{font-size:12px;font-weight:1000;letter-spacing:.12em;color:#6297ac;margin:3px 0 9px}h1{font-size:38px;line-height:1.04;margin:0 0 16px;font-weight:1000;letter-spacing:-1.4px;color:#315d76}.subtext{font-size:14px;line-height:1.55;color:#6c8a9a;margin:10px 0 19px}.big-button{display:flex;align-items:center;justify-content:center;gap:17px;min-height:57px;width:100%;border-radius:17px;border:2px solid #ffffff63;font-size:18px;font-weight:1000;letter-spacing:.025em;color:#fff;box-shadow:0 5px 0 var(--shadow),inset 0 2px 0 #ffffff5a;text-shadow:0 2px 1px #347b6a4d;margin:14px 0 0;transition:transform .1s}.green{background:linear-gradient(#b2e74f,#7eca31);--shadow:#68a731}.text-button{color:#608499;font-size:14px;font-weight:800;background:none;padding:19px 12px 9px;margin-top:3px;box-shadow:none!important}.text-button span{margin-left:8px;font-size:21px}.pause-mark{font-size:34px;font-weight:1000;color:#35b5df;margin-bottom:14px}.stars{color:#ffcb30;font-size:47px;letter-spacing:3px;white-space:nowrap;text-shadow:0 3px 0 #e89f17,0 0 20px #ffdc8955;line-height:1.1;margin:-5px 0 20px}.stars .empty{color:#a7c8d8;text-shadow:0 2px 0 #87adbd}.reward{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:#fff9;min-width:105px;border:1px solid #d3e4ea;border-radius:20px;padding:7px 13px;color:#ce9520;font-size:22px}.reward .coin{width:28px;height:28px;font-size:16px}.result-panel h1{color:#269cbb}.result-panel{border-color:#fff}.close-button{position:absolute;right:14px;top:12px;color:#6f99ae;background:#d3e7f0;border:2px solid white;width:34px;height:34px;border-radius:50%;font-size:27px;line-height:24px;box-shadow:0 2px 0 #b5d1dd}.levels-panel{padding:36px 19px 14px}.levels-panel h1{font-size:34px}.levels-panel .subtext{font-size:12px}#level-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 10px;margin:24px 0}.level-button{position:relative;border:2px solid #fff9;border-radius:15px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:0;background:linear-gradient(#50c6ed,#26a6d6);color:#fff;box-shadow:0 4px 0 #338caf;font-size:23px;font-weight:1000}.level-button.current{background:linear-gradient(#b6e850,#80c937);box-shadow:0 4px 0 #75a02b}.level-button small{font-size:12px;color:#ffdc4a;letter-spacing:1px}.level-button:disabled{background:#c4dbe6;box-shadow:0 4px 0 #a9c4d1;opacity:1;color:#95b6c7}.level-button:disabled :is(svg,img.button-icon){width:22px;height:22px;stroke:#98b7c7;fill:none;stroke-width:2.5}
.menu{pointer-events:none;padding:0;background:linear-gradient(#d9edf7 0%,#d9edf7 18%,transparent 35%,transparent 65%,#d8eaf3 82%,#d8eaf3 100%);justify-content:space-between}.brand{display:flex;flex-direction:column;align-items:center;line-height:.86;transform:rotate(-4deg);font-weight:1000;user-select:none}.menu .brand{margin-top:35px}.brand-gecko{font-size:59px;letter-spacing:-3px;color:#a2e642;-webkit-text-stroke:2px #f4ffe4;paint-order:stroke fill;text-shadow:0 5px 0 #66a32a,0 8px 0 #2c7385,3px 9px 0 #2c7385,-3px 9px 0 #2c7385}.brand-trails{font-size:51px;letter-spacing:3px;color:#ffdc47;-webkit-text-stroke:2px #ffffe4;paint-order:stroke fill;text-shadow:0 4px 0 #e9a22b,0 7px 0 #2c7385,3px 8px 0 #2c7385,-3px 8px 0 #2c7385;margin-top:8px}.menu-actions{width:100%;padding:0 45px 21px;text-align:center;pointer-events:auto}.menu-instruction{font-size:16px;font-weight:800;color:#62869a;margin:0 0 18px}.menu-note{font-size:12px;color:#7293a5;margin:13px 0 0}.menu .big-button{max-width:320px;margin:auto}.menu .text-button{padding-top:18px}.loading{background:linear-gradient(155deg,#dff5fa,#bbddeb);z-index:50}.loading .brand{margin-bottom:55px}.loading-track{width:210px;height:14px;border-radius:10px;border:3px solid #fff;background:#96bdce;box-shadow:0 2px 0 #7fabbe;overflow:hidden}#loading-fill{height:100%;width:5%;background:linear-gradient(#b9ee62,#8dce35);border-radius:10px;transition:width .25s}#loading-text{font-size:13px;color:#6f93a4;font-weight:800;margin-top:20px}
body.menu-open #hud,body.menu-open .tip{visibility:hidden}body.menu-open #board{pointer-events:none;transform:scale(.74);transform-origin:50% 40%}body.menu-open #game{background:#d9eaf2}
@keyframes pop{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Reference-style pause/settings screen. The whole panel scales to fit. */
#pause-screen.settings-screen{padding:0;background:rgba(19,17,62,.86);backdrop-filter:none;overflow:hidden;--settings-scale:.5}
.settings-card{position:absolute;left:50%;top:50%;width:660px;height:1280px;flex:none;transform:translate(-50%,-50%) scale(var(--settings-scale));transform-origin:center;background:linear-gradient(135deg,#6550ff 0%,#5845ff 58%,#592aff 100%);border:5px solid #4930c0;border-radius:42px;box-shadow:inset 5px 6px 7px #b19aff70,inset -5px -7px 8px #3113ab90,0 6px 12px #100b4180;font-family:ui-rounded,'Trebuchet MS',system-ui,sans-serif;color:#fff}
.settings-card:before{content:'';position:absolute;left:12px;top:13px;width:16px;height:6px;border-radius:100%;background:#fff;transform:rotate(-42deg);box-shadow:0 0 5px #fff}
.settings-title-plate{position:absolute;left:63px;right:63px;top:-18px;height:117px;background:linear-gradient(#715bff 0%,#5939f8 70%,#5123e5);border:5px solid #3e249f;border-radius:25% 25% 48% 48% / 15% 15% 30% 30%;box-shadow:inset 0 4px 3px #9b84ff,inset 0 -10px 0 #744af5,0 7px 4px #38209070}
.settings-title-plate:after{content:'';position:absolute;inset:8px 12px 14px;border:5px solid #5732d9;border-top:0;border-radius:0 0 45% 45% / 0 0 30% 30%;pointer-events:none}
.settings-title-plate h1{position:relative;z-index:1;font-size:66px;line-height:1.2;margin:8px 0 0;color:#fffee4;text-align:center;letter-spacing:0;font-weight:1000;-webkit-text-stroke:7px #2f2757;paint-order:stroke fill;text-shadow:0 5px 0 #211d44}
.settings-close{position:absolute;right:-3px;top:5px;width:64px;height:64px;border:3px solid #991835;border-radius:50%;color:#fff;background:radial-gradient(ellipse at 40% 22%,#ff8790,#ff334d 55%,#df1236);box-shadow:inset 0 4px 3px #ffbcc0,0 4px 2px #2c166a;z-index:3;display:grid;place-items:center}
.settings-close :is(svg,img.button-icon){width:39px;height:39px;stroke-width:5.5;filter:drop-shadow(0 3px 1px #963643)}
.settings-toggles{position:absolute;top:118px;left:132px;width:386px;height:164px;display:flex;align-items:center;justify-content:center;gap:46px;border-radius:38px;background:#39259d85}
.settings-toggle{position:relative;width:133px;height:133px;border-radius:36px;border:3px solid #63980b;background:radial-gradient(ellipse at 35% 12%,#c1fa03,#8ddd00 48%,#66bc00 90%);box-shadow:inset 4px 5px 6px #e5ff7a99,inset -4px -6px 8px #3388009c,0 4px 4px #2a207590;color:white;display:grid;place-items:center}
.settings-toggle:before,.settings-action:before,.settings-social:before{content:'';position:absolute;top:8px;left:11px;width:13px;height:5px;border-radius:100%;background:#fff;transform:rotate(-35deg);opacity:.85}
.settings-toggle :is(svg,img.button-icon){width:90px;height:90px;stroke-width:5;filter:drop-shadow(0 4px 1px #53842d)}
.settings-card :is(svg,img.button-icon){fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}.settings-card :is(svg,img.button-icon) .solid{fill:currentColor;stroke:none}.settings-card .icon-cutout{fill:#088ba7;stroke:none}
.settings-toggle[aria-pressed=false]{background:linear-gradient(#a4acd6,#707899);border-color:#525378;box-shadow:inset 0 4px 6px #d1d8ee88,0 4px 4px #2a207590}.settings-toggle[aria-pressed=false]:after{content:'';position:absolute;width:88px;height:9px;border-radius:5px;background:#ff4665;transform:rotate(-45deg);box-shadow:0 2px 0 #713245}
.settings-divider{position:absolute;top:298px;left:122px;width:410px;height:4px;background:#412ab455;box-shadow:0 3px 0 #9f86ff45;border-radius:50%}
.settings-action-list{position:absolute;top:319px;left:118px;width:420px;display:flex;flex-direction:column;gap:13px}
.settings-action{position:relative;display:flex;align-items:center;gap:15px;width:100%;height:110px;padding:0 19px;border-radius:30px;border:3px solid #2074b0;background:linear-gradient(#09eeed 0%,#12d5e7 40%,#0cafd7 100%);box-shadow:inset 4px 4px 5px #85ffffa8,inset -3px -6px 6px #1770aa80,0 5px 4px #3a237a9c;color:#fff;font-size:43px;line-height:1;letter-spacing:0;font-weight:1000;text-shadow:0 3px 2px #267b9b;white-space:nowrap;text-align:left}
.settings-action :is(svg,img.button-icon){width:67px;height:67px;flex:none;stroke-width:5;filter:drop-shadow(0 4px 1px #247b9b)}
.settings-action.remove-ads{background:linear-gradient(#d55cff,#c440f6 55%,#a421ee);border-color:#7829aa;box-shadow:inset 4px 4px 6px #f2acff99,inset -3px -6px 6px #7920b780,0 5px 4px #3a237a9c;font-size:41px;text-shadow:0 3px 2px #8549ad}
.ads-icon{position:relative;display:grid;place-items:center;width:69px;height:69px;border-radius:50%;background:#529bee;border:7px solid #f32750;box-shadow:0 0 0 2px #943077,0 4px 2px #743176;font-size:28px;color:white;-webkit-text-stroke:1px #2e457d;paint-order:stroke fill;flex:none}
.ads-icon:after{content:'';position:absolute;width:66px;height:6px;border-radius:4px;background:#ff3155;transform:rotate(-50deg);box-shadow:0 1px 1px #9d1a3f}
.settings-action.exit-game{background:linear-gradient(#ff4851,#fa242b 55%,#e80b16);border-color:#a51d41;box-shadow:inset 4px 4px 6px #ff9197aa,inset -3px -6px 6px #a7173c88,0 5px 4px #3a237a9c;text-shadow:0 3px 2px #a23a4a}
.settings-action.exit-game :is(svg,img.button-icon){filter:drop-shadow(0 4px 1px #a13b50)}
.settings-socials{position:absolute;top:940px;left:72px;width:512px;display:grid;grid-template-columns:1fr 1fr;gap:13px 14px}
.settings-social{position:relative;display:flex;align-items:center;gap:10px;height:112px;padding:8px 15px;color:white;border:3px solid #2278ac;border-radius:31px;background:linear-gradient(#15f4f1,#0bccdf 50%,#09aed4);box-shadow:inset 3px 4px 5px #94ffffa8,inset -3px -6px 6px #1770aa80,0 5px 4px #3a237a9c}
.social-logo{display:grid;place-items:center;width:62px;height:62px;flex:none;border-radius:15px}.instagram{background:radial-gradient(circle at 22% 95%,#ffdb41,#fa4d31 35%,#f00aa7 65%,#9825ca)}.instagram :is(svg,img.button-icon){width:60px;height:60px;stroke-width:4.5}.facebook{background:linear-gradient(#4489ff,#285ddb);font:900 76px Arial,sans-serif;line-height:80px;overflow:hidden;padding:10px 0 0 9px}.tiktok{background:#080913;font-size:67px;line-height:1;text-shadow:-3px -2px #02e4e8,3px 2px #ff2864}
.social-copy{font-size:36px;line-height:1.02;font-weight:1000;-webkit-text-stroke:3px #315b84;paint-order:stroke fill;text-shadow:0 2px 0 #315b84}.social-copy small{display:flex;align-items:center;justify-content:center;gap:4px;font-size:35px;line-height:1.2;color:#2167a1;-webkit-text-stroke:0;text-shadow:none;font-weight:1000}
.settings-coin{display:inline-grid;place-items:center;width:35px;height:35px;border-radius:50%;border:4px solid #ffc832;background:#ed9f13;box-shadow:0 1px 0 #b87300,inset 0 0 0 2px #fff28a;font-size:21px;font-style:normal;color:#ffed87}
.tiktok-button{grid-column:1/-1;width:249px;justify-self:center}
.settings-version{position:absolute;bottom:25px;left:0;width:100%;text-align:center;font-size:23px;font-weight:900;color:#eeeaff;text-shadow:0 2px 0 #312078}
.settings-info{position:absolute;z-index:5;inset:320px 30px auto;padding:35px 30px;background:linear-gradient(#6c54f7,#4a29ba);border:4px solid #ad91ff;border-radius:28px;box-shadow:0 0 0 1000px #17113ebf;text-align:center}.settings-info h2{font-size:43px;margin:0 0 24px}.settings-info p{font-size:29px;line-height:1.5;margin:0 0 26px}.settings-info .settings-action{justify-content:center;height:85px;font-size:35px}
.settings-card button:active{transform:translateY(3px);filter:brightness(.96)}

/* Fixed-game default; profile.css allows panning only in the avatar list. */
html,body,#game,#game *{touch-action:none;-webkit-text-size-adjust:100%}
html,body{scroll-behavior:auto}

/* The main menu follows the supplied portrait game lobby. */
#menu.menu{top:0;bottom:0;padding:0;display:block;pointer-events:auto;background:transparent;overflow:hidden}
.lobby-shell{position:absolute;left:50%;top:50%;width:470px;height:980px;transform:translate(-50%,-50%) scale(var(--lobby-scale,.7));transform-origin:center}
.lobby-top{position:absolute;top:calc(16px + var(--lobby-header-shift,0px));left:9px;right:9px;height:77px;display:grid;grid-template-columns:72px 1fr 1fr 43px;gap:15px;align-items:center;z-index:4}
.lobby-avatar{width:73px;height:73px;padding:8px;border:5px solid #e6e9fb;border-radius:19px;background:linear-gradient(#528e41,#92d557);box-shadow:inset 0 3px 4px #2e6a3c,0 0 0 1px #8499b6,0 3px 3px #366fa181;color:#ffdc4d}
.lobby-avatar :is(svg,img.button-icon){width:49px;height:49px;stroke-width:5;filter:drop-shadow(0 2px 0 #ba6c17)}.lobby-avatar :is(svg,img.button-icon) .bolt{fill:white;stroke:none}
.lobby-counter{position:relative;display:flex;align-items:center;justify-content:flex-end;width:100%;height:40px;padding:0 10px 0 35px;border:2px solid #b2b4d1;border-radius:17px;background:linear-gradient(#fff,#f0edf8 60%,#cbc9df);box-shadow:inset 0 2px 1px white,0 2px 2px #63789d;color:#8e3f24}
.lobby-counter strong{font-size:23px;font-weight:1000;white-space:nowrap}.lobby-plus{position:absolute;left:13px;bottom:-8px;display:grid;place-items:center;width:26px;height:26px;background:linear-gradient(#ade459,#60b221);border:1px solid #529337;border-radius:50%;color:white;font:1000 31px/1 Arial;font-style:normal;text-shadow:0 2px #578632;box-shadow:inset 0 2px 2px #eaffb4}
.lobby-heart{position:absolute;left:-15px;top:-7px;width:46px;height:48px;transform:rotate(-7deg)}.lobby-heart :is(svg,img.button-icon){width:48px;height:48px;fill:#ec375a;stroke:#a52040;stroke-width:2;filter:drop-shadow(0 2px 1px #5d527d)}.lobby-heart b{position:absolute;left:11px;top:11px;color:white;font:900 26px Arial;text-shadow:0 2px 0 #892335}
.lobby-gold{position:absolute;left:-12px;top:-5px;width:44px;height:44px;border:4px solid #ffe472;border-radius:50%;background:linear-gradient(135deg,#ffe976,#ffce31,#eea324);box-shadow:0 0 0 1px #c59028,inset 0 0 0 2px #efa928,0 2px 2px #88785e;font-size:28px;line-height:37px;font-weight:1000;color:#ce8512}
.lobby-gear{display:grid;place-items:center;width:44px;height:44px;border-radius:15px;background:linear-gradient(135deg,#fff,#c0c9e2);border:1px solid #9ca9c1;box-shadow:inset 0 2px 1px white,0 3px 2px #7598bd;color:#8190ac}.lobby-gear :is(svg,img.button-icon){width:29px;height:29px;fill:#8999b0;stroke:#f5f9ff;stroke-width:1.6;filter:drop-shadow(0 2px 1px #66748c)}
.lobby-world{position:absolute;left:2px;top:137px;width:466px;height:566px}.lobby-world img{width:100%;height:100%;object-fit:contain;display:block;user-select:none;pointer-events:none;filter:drop-shadow(0 10px 9px #187dcc33)}
.lobby-nameplate{position:absolute;left:146px;bottom:2px;width:177px;height:55px;display:grid;place-items:center;background:linear-gradient(#ffe76a,#f5bf3d 55%,#e59b29);border:4px solid #f5c342;border-radius:12% 12% 30% 30%;box-shadow:inset 0 3px 0 #fff387,0 4px 0 #b37924;color:#fff;font-size:31px;font-weight:1000;-webkit-text-stroke:3px #96592b;paint-order:stroke fill;text-shadow:0 2px 0 #845229;transform:rotate(2deg)}
.lobby-noads{position:absolute;right:12px;top:119px;width:77px;height:86px;background:none;z-index:3;padding:0;color:#f2f5ff}.lobby-noads span{position:absolute;top:0;left:3px;width:72px;height:72px;display:grid;place-items:center;background:linear-gradient(140deg,#426fd8,#244399);border:6px solid #ed4751;outline:2px solid #f3f6ff;border-radius:50%;font-size:28px;font-weight:1000;-webkit-text-stroke:2px #25365a;paint-order:stroke fill;box-shadow:inset 0 2px 3px white,0 3px 2px #295a94}.lobby-noads span:after{content:'';position:absolute;height:6px;width:65px;background:#ed4751;transform:rotate(-48deg);z-index:-1}.lobby-noads b{position:absolute;left:0;bottom:0;width:78px;height:26px;background:linear-gradient(#7585f5,#4b49c5);border:2px solid #c9cced;border-radius:0 0 40% 40%;font-size:15px;line-height:20px;text-shadow:0 2px #26377c;box-shadow:0 2px 1px #3977b0}
.lobby-play{position:absolute;top:719px;left:124px;width:223px;height:98px;border-radius:27px;background:linear-gradient(#c8ef4c,#9dd838 55%,#78bd2e);border:2px solid #48762b;box-shadow:inset 0 4px 6px #efff9999,inset 0 -5px 5px #4d912a80,0 4px 3px #2e8ca366;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}.lobby-play:before{content:'';position:absolute;left:9px;top:8px;width:11px;height:5px;transform:rotate(-38deg);background:white;border-radius:50%}.lobby-play strong{font-size:43px;font-weight:1000;line-height:1.1;-webkit-text-stroke:3px #326d27;paint-order:stroke fill;text-shadow:0 2px #286024}.lobby-play span{font-size:26px;line-height:1.2;color:#337017;font-weight:1000}
.lobby-nav{position:absolute;left:0;right:0;bottom:0;height:104px;background:linear-gradient(#60bdf4,#4398d2);border-top:9px solid #e8ebff;box-shadow:0 -2px 1px #979bc4,inset 0 3px 0 #8edcfc;display:grid;grid-template-columns:repeat(5,1fr);z-index:4}.lobby-nav button{position:relative;min-width:0;padding:8px 0 6px;background:none;border-left:2px solid #a4e4fb77;border-right:2px solid #287ab044;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;gap:3px;color:#fff;font-weight:900;font-size:13px;text-shadow:0 2px 0 #235881}.lobby-nav button>:is(svg,img.button-icon){width:53px;height:57px;stroke-width:3;filter:drop-shadow(0 3px 1px #30698a)}.lobby-nav .nav-heart{fill:#f34c67;stroke:#a42f52}.lobby-nav .nav-shop{fill:#f64435;stroke:#ffd441}.lobby-nav .nav-shop circle{fill:#ffcf3f;stroke:#e5961c}.lobby-nav .nav-cards{fill:#2763b6;stroke:#ffce3f}.lobby-nav .nav-collection{fill:#a8663d;stroke:#723f2e}.lobby-nav .nav-collection path+path{fill:#f8c647;stroke:#ffd765}.lobby-nav .active{background:#48a5d9}.lobby-nav .active>span:last-child{font-size:20px;line-height:1.1}.nav-home-medallion{position:absolute;top:-25px;left:50%;transform:translateX(-50%);width:76px;height:78px;display:grid;place-items:center;border:2px solid #d6f8ff;border-radius:50% 50% 25% 25%;background:radial-gradient(ellipse at 35% 20%,#b4eeff,#188de3 70%);box-shadow:0 0 0 1px #1a446a,0 7px 0 #f2b62e,0 9px 2px #ac6a20}.nav-home-medallion :is(svg,img.button-icon){width:52px;height:52px;fill:#a6e552;stroke:#43a7d0;stroke-width:4;filter:drop-shadow(0 3px 0 #399753)}
body.menu-open #board{visibility:hidden;transform:none}
/* Fill the menu, including safe areas, without adding a scrolling image. */
html.menu-open{background:#a5dbfb url('./assets/menu-background.webp') center / cover no-repeat}
html.menu-open body,body.menu-open #game{background:transparent;box-shadow:none}
#lobby-info{z-index:30}#lobby-info-content{max-height:220px;overflow:hidden;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;font-size:26px;color:#ffc531}#lobby-info .panel{max-width:370px}#lobby-info .subtext{font-size:15px;white-space:pre-line}

/* Scaling the portrait artwork must not create invisible scrollable space.
   Hidden is the fallback; clip also blocks focus-driven/programmatic scrolling. */
@supports(overflow:clip){html,body,#game,#menu.menu,#pause-screen.settings-screen{overflow:clip}}

/* Let the viewport-anchored menu header occupy portrait letterboxing. */
body.menu-open #game,body.menu-open #menu.menu{overflow:visible}