[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.header-actions{gap:0}.icon-button{width:42px;height:42px;min-width:42px;border-width:0;background:radial-gradient(circle at center,#235a42 0 39%,#f3ce81 40% 44%,transparent 46%);box-shadow:none;font-size:17px}.brand{width:145px}.sound-slash{left:16px;top:9px}.avatar{display:inline-block;width:44px;height:44px;flex:0 0 auto;border-radius:50%;background-image:url('assets/avatars.webp');background-size:500% 400%;background-position:var(--ax,0%) var(--ay,0%);background-repeat:no-repeat;filter:drop-shadow(0 2px 3px #001c1c99)}#account-trigger .avatar{width:31px;height:31px;vertical-align:middle}.account-overlay{position:absolute;inset:0;z-index:20;display:grid;align-items:safe center;justify-items:center;padding:10px 5px;overflow:auto;background:#031c2bbb;backdrop-filter:blur(6px);overscroll-behavior:contain}.account-panel{position:relative;background:url('assets/popup-frame.webp') center/100% 100% no-repeat;width:96%;max-width:400px;padding:76px 28px 35px;filter:drop-shadow(0 10px 15px #001e27b3);color:#fff0c7;text-align:center;min-width:0}.account-panel h2{font:900 italic 24px/1.1 'Arial Black',Arial,sans-serif;color:#ffe3a0;text-shadow:0 2px 0 #975817;margin:10px 0 18px;overflow-wrap:anywhere}.account-panel .panel-close{position:absolute;right:16px;top:43px;width:44px;height:44px;border:0;background:radial-gradient(circle,#7f182d 0 35%,#eac67b 36% 42%,transparent 44%);font-size:24px;color:#fff1bd;cursor:pointer}.panel-intro{font-size:13px;line-height:1.6;margin:10px 0 18px;overflow-wrap:anywhere}.panel-note{font-size:11px;line-height:1.5;color:#c7d8c2;margin:13px 0 0}.panel-error{font-size:12px;line-height:1.5;color:#ffd8aa;overflow-wrap:anywhere;margin:8px 0 0}.panel-error:empty{display:none}.account-panel label{display:block;text-align:left;font-size:12px;font-weight:700;margin:10px 0 7px;color:#ffe7ad}.account-panel input:not([type=checkbox]),.account-panel textarea{display:block;width:100%;min-width:0;background:#032e29e6;color:#fff6dc;border:1px solid #f1cf8099;border-radius:10px;padding:13px 12px;font:16px Arial;box-shadow:inset 0 2px 6px #001e2699;outline-offset:3px}.account-panel input::placeholder,.account-panel textarea::placeholder{color:#b0c4b9}.code-input{text-align:center;font:700 25px monospace!important;letter-spacing:5px}.account-panel .play-button{font-size:17px;height:58px;min-height:58px;white-space:normal;line-height:1.1;margin-top:16px;padding:14px 17px 6px}.text-button{min-height:44px;border:0;background:none;color:#e9d39d;text-decoration:underline;font-size:12px;padding:10px;cursor:pointer}.minor-button{min-height:44px;border:1px solid #e5bd6aa6;border-radius:10px;background:linear-gradient(#24634c,#074130);color:#fff0bd;font:bold 12px Arial;padding:9px 12px;box-shadow:inset 0 1px 2px #fff3;cursor:pointer}.minor-button:hover,.minor-button.active{background:linear-gradient(#b1863b,#6e471b);color:#fff9df}.minor-button:disabled,.play-button:disabled{opacity:.55;cursor:wait}.menu-links{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.start-card{margin:auto}.start-card .card-foot{font-size:10px;line-height:1.4;margin-top:9px}.start-card p{font-size:12px;line-height:1.5}.card-bonuses span{font-size:10px}.start-card .eyebrow{font-size:11px}.result-stats{font-size:11px;line-height:1.6}.result-rival{display:flex;align-items:center;gap:10px;text-align:left;justify-content:center;margin:10px 0}.result-rival p{margin:0;font-size:12px}.result-rival .avatar{width:48px;height:48px}.result-rival strong{color:#ffe48b}#competition-result{padding-top:10px;font-size:12px}#competition-result>strong{font:900 italic 28px 'Arial Black',Arial;color:#ffe292}#competition-result>strong small{font:700 12px Arial}.avatar-label{font-size:12px;text-align:left;margin:14px 0 8px}.avatar-label b{display:block;color:#ffe095;margin-top:5px}.avatar-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.avatar-option{min-width:0;aspect-ratio:1;border:2px solid transparent;border-radius:50%;padding:2px;background:none;cursor:pointer;display:grid;place-items:center}.avatar-option .avatar{width:100%;height:100%;aspect-ratio:1}.avatar-option.selected{border-color:#fff2b5;box-shadow:0 0 13px #ffda7180;transform:scale(1.06)}.account-panel .shield-option{display:flex;align-items:center;gap:9px;font-size:12px;margin:17px 0 6px;min-height:40px}.shield-option input{width:20px;height:20px;accent-color:#efc879}.ranking-tabs{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:20px}.podium{display:grid;grid-template-columns:1fr 1.12fr 1fr;align-items:end;gap:6px;margin:8px -6px 20px}.podium-player{min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 3px;border:1px solid #dbba5f6b;border-radius:14px 14px 6px 6px;background:linear-gradient(#1c604a,#073527);box-shadow:0 4px 8px #001c1c66}.podium-player.place-1{padding-top:17px;border-color:#ffdf82;background:linear-gradient(#82642c,#264528);box-shadow:0 0 18px #e8b44733}.podium-player>.avatar{width:50px;height:50px}.podium-player.place-1>.avatar{width:59px;height:59px}.podium-player>b{font-size:19px;color:#ffe08c}.podium-player>span:not(.avatar){font-size:11px;font-weight:bold;overflow-wrap:anywhere;max-width:100%}.podium-player>strong{font-size:14px;color:#ffdf91;white-space:nowrap;letter-spacing:-.4px}.ranking-position{font-size:12px;line-height:1.5;color:#e1e9ca;margin:10px 0}.rank-list{display:flex;flex-direction:column;gap:7px;max-height:36vh;overflow:auto}.rank-row{display:grid;grid-template-columns:20px 32px minmax(0,1fr) auto;gap:7px;align-items:center;border:1px solid #c5d3ab27;background:#002e2799;border-radius:9px;padding:8px 7px;text-align:left;font-size:12px}.rank-row>.avatar{width:32px;height:32px}.rank-row>span:not(.avatar){overflow-wrap:anywhere;line-height:1.3}.rank-row small{display:block;font-size:9px;color:#ffe6a0}.rank-row>strong{color:#ffdf83;font-size:14px;white-space:nowrap}.rank-number{font-size:12px;color:#d5c58e;text-align:center}.rank-row.is-me{border-color:#e8c675;background:#87642740}.empty-state{font-size:35px;color:#ffe3a3;margin:24px 0}.empty-state h3{font-size:19px;margin:10px 0}.empty-state p{font-size:12px;line-height:1.6;color:#d4e2c7}.chat-list{height:32vh;min-height:170px;overflow:auto;background:#002b2466;border:1px solid #d8bd7733;border-radius:10px;padding:9px;scroll-behavior:smooth}.chat-message{display:flex;align-items:flex-start;gap:7px;text-align:left;margin-bottom:12px}.chat-message>.avatar{width:29px;height:29px}.chat-message>div{min-width:0;flex:1;background:#14503c;border-radius:0 9px 9px 9px;padding:8px}.chat-message.mine>div{background:#5b4d26}.chat-message b{font-size:11px;color:#ffe3a0}.chat-message time{float:right;font-size:9px;color:#adc2ae;margin:2px 0 0 6px}.chat-message p{font-size:13px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;margin:5px 0 0}.chat-compose{display:grid;grid-template-columns:1fr auto;gap:6px;margin-top:9px;align-items:stretch}.chat-compose textarea{font-size:13px;padding:10px;resize:vertical;min-height:55px;max-height:120px}.chat-compose button{font-size:11px;padding:7px}.online-strip{display:flex;gap:6px;overflow:auto;padding:3px 0 12px;text-align:left}.online-strip>p{font-size:11px;color:#afcbb4}.online-player{border:1px solid #9dd8a756;border-radius:9px;background:#0a4336;color:#f4e4bb;display:flex;gap:6px;align-items:center;padding:6px;flex-shrink:0;text-align:left;cursor:pointer;min-height:44px}.online-player .avatar{width:30px;height:30px}.online-player span:not(.avatar){font-size:11px;max-width:100px;overflow-wrap:anywhere}.online-player small{display:block;font-size:9px;line-height:1.6;color:#abe4b0}.online-player:disabled{opacity:.5;cursor:default}.online-trigger{position:absolute;right:12px;bottom:10px;z-index:1;border:1px solid #e1c7817a;border-radius:20px;background:#073b31c9;color:#b7e9b9;min-width:44px;min-height:38px;font-size:11px;padding:7px 10px;cursor:pointer}.shot-hint{left:5px;right:53px;font-size:9px;line-height:1.3;letter-spacing:0;bottom:20px}#splash-layer{position:absolute;inset:0;z-index:8;pointer-events:none;display:none}#splash-layer.active{display:block}.splash-caption{position:absolute;left:10%;right:10%;top:30%;text-align:center;color:#fff;font-size:15px;font-weight:900;text-shadow:0 2px 5px #003f73;animation:splash-caption 1.7s both}.splash-blob{position:absolute;left:25%;top:38%;width:50%;height:25%;border-radius:46% 54% 63% 37%/50% 43% 57% 50%;background:radial-gradient(ellipse at 30% 25%,#eeffff,#5bd4efdd 40%,#1186c5c9);border:3px solid #cbfaffaa;box-shadow:inset 0 0 25px #fff6,0 4px 15px #0562a25c;animation:splash-hit 1.7s both}#splash-layer>i{position:absolute;left:50%;top:50%;width:15px;height:20px;background:#8debffcf;border:1px solid #e5ffff;border-radius:50%;transform:rotate(calc(var(--drop)*40deg));animation:splash-drops 1.7s both;--dx:calc((var(--drop) - 4)*20px);--dy:calc((var(--drop) - 3)*17px)}.super-banner{top:30%;perspective:700px}.word-reveal{display:flex!important;justify-content:center;gap:1px;white-space:nowrap}.word-reveal>i{font-style:italic;display:inline-block;animation:letter-arrival .8s cubic-bezier(.2,.9,.3,1.4) both;animation-delay:calc(var(--letter)*.065s)}.super-banner>span{animation:super-heading .55s .2s both}.super-banner>b{animation:bonus-number .9s .7s cubic-bezier(.2,.8,.3,1.4) both}.super-banner:before{inset:-130px -40px;background:repeating-conic-gradient(from 10deg,#ffdd5b66 0deg 8deg,transparent 8deg 20deg);filter:drop-shadow(0 0 20px #ffe67f)}.super-banner:after{content:'✦  ✧  ✦  ✧  ✦';position:absolute;left:-5%;right:-5%;top:-40px;color:#fff8bd;font-size:26px;letter-spacing:13px;animation:star-shower 2.8s both;pointer-events:none}.rival{height:54px;padding:14px 15px 9px}.rival-copy{min-width:0;flex:1;row-gap:1px;grid-template-columns:22px minmax(0,1fr)}.rival small{font-size:10px;line-height:12px;letter-spacing:.3px}.rival b{font-size:13px;line-height:17px;white-space:normal;overflow-wrap:anywhere}.rival>strong{font-size:18px;line-height:24px;white-space:nowrap;flex-shrink:0}.rival>strong:after{display:none}.rival.at-top>strong{font-size:22px}.rival-track{height:3px;bottom:6px}.letter-collection{top:25px}.letter-collection>span{font-size:14px;width:22px;height:25px}.letter-collection>b{font-size:10px}.arena-top{font-size:9px;letter-spacing:0;top:8px}.toast{font-size:13px;max-width:94%;margin:auto;line-height:1.4}.effect-badge{font-size:10px;padding:6px 10px;top:66px}#score{padding-top:1px;padding-bottom:4px;line-height:1.05}.main-score>span{font-size:9px;line-height:11px}.stat.main-score{padding-top:16px;padding-bottom:3px}.card-bonuses{display:none}.start-card .card-foot:empty{display:none}
@keyframes splash-hit{0%{opacity:0;transform:scale(.05)}18%{opacity:1;transform:scale(1.2)}28%,65%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(90px) scale(.9)}}@keyframes splash-drops{0%{opacity:0;transform:translate(0,0) scale(0)}20%{opacity:1;transform:translate(var(--dx),var(--dy)) scale(1)}100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 120px)) scale(.5)}}@keyframes splash-caption{0%,10%{opacity:0;transform:translateY(10px)}20%,75%{opacity:1;transform:none}100%{opacity:0}}@keyframes letter-arrival{from{opacity:0;transform:translate3d(0,-100px,250px) rotateY(120deg) scale(2)}to{opacity:1;transform:none}}@keyframes bonus-number{0%{opacity:0;transform:translateY(30px) scale(.3)}60%{opacity:1;transform:translateY(-5px) scale(1.25)}100%{opacity:1;transform:none}}@keyframes super-heading{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}@keyframes star-shower{0%{opacity:0;transform:translateY(-80px) scale(.5)}25%{opacity:1}100%{opacity:0;transform:translateY(230px) rotate(18deg) scale(1.5)}}@media(max-width:350px){.brand{width:123px}.icon-button{width:40px;min-width:40px;height:44px}.account-panel{padding:65px 24px 27px}.account-panel h2{font-size:21px}.account-panel .play-button{font-size:15px}.avatar-grid{gap:5px}.rank-row{gap:5px;padding:7px 5px;font-size:11px}.rank-row>strong{font-size:12px}.podium-player>.avatar{width:43px;height:43px}.podium-player.place-1>.avatar{width:51px;height:51px}.podium-player>strong{font-size:12px}.podium-player>span:not(.avatar){font-size:10px}.letter-collection{gap:3px;padding:4px}.letter-collection>span{width:20px}.rival b{font-size:12px}.rival small{font-size:9px}}@media(prefers-reduced-motion:reduce){.word-reveal>i,.super-banner:after,.super-banner>b,.super-banner>span{animation:none!important}#splash-layer.active{opacity:.55}.splash-blob{animation:none!important}}
.account-panel{padding-left:44px;padding-right:44px}.account-panel h2{font-size:23px;line-height:1.12;max-width:230px;margin:10px auto 20px}.account-panel .panel-intro{font-size:12px;line-height:1.6}.account-panel .play-button{font-size:15px;padding-left:16px;padding-right:16px}.account-panel .panel-note{font-size:11px;margin-left:5px;margin-right:5px}.start-card{padding-left:35px;padding-right:35px}.account-panel.wide-panel{padding-left:36px;padding-right:36px}@media(max-width:350px){.account-panel,.account-panel.wide-panel{padding-left:34px;padding-right:34px}.account-panel h2{font-size:20px;max-width:185px}.account-panel .play-button{font-size:13px}.avatar-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.start-card{padding-left:31px;padding-right:31px}}
/* Keep the illustrated frame's cap at a fixed height, regardless of form length. */
.account-panel,.account-panel.wide-panel{background:none;border-style:solid;border-color:transparent;border-width:100px 30px 30px;border-image-source:url('assets/popup-frame.webp');border-image-slice:24% 9% 9% fill;border-image-repeat:stretch;padding:0 10px;isolation:isolate}.account-panel h2{margin:0 auto 18px}.account-panel .panel-close{top:-44px;right:-25px}.start-card,.phone[data-scene=forest] .start-card{background:none;border-style:solid;border-color:transparent;border-width:89px 28px 28px;border-image-source:url('assets/popup-frame.webp');border-image-slice:24% 9% 9% fill;border-image-repeat:stretch;padding:0 8px;min-height:0;isolation:isolate}.account-panel:before,.start-card:before{content:"";position:absolute;inset:-3px -5px;pointer-events:none;z-index:-1;opacity:.23;background-image:radial-gradient(circle at 12px 10px,#fff 1px,transparent 1.7px),radial-gradient(circle at 27px 35px,#c8f7e2 1.3px,transparent 2px),radial-gradient(circle at 45px 20px,#fff 1px,transparent 1.8px);background-size:67px 89px,109px 137px,151px 173px;animation:panel-snow 18s linear infinite;mask-image:linear-gradient(transparent,#000 12%,#000 85%,transparent)}@keyframes panel-snow{to{background-position:18px 178px,-15px 274px,12px 346px}}@media(max-width:350px){.account-panel,.account-panel.wide-panel{border-width:87px 25px 27px;padding:0 9px}.start-card,.phone[data-scene=forest] .start-card{border-width:82px 25px 26px;padding:0 7px}.account-panel .panel-close{right:-24px}}@media(max-height:690px){.start-card,.phone[data-scene=forest] .start-card{padding:0 8px}.account-panel{padding:0 9px}}@media(prefers-reduced-motion:reduce){.account-panel:before,.start-card:before{animation:none}}
/* The decorative artwork always keeps its original 720 × 900 ratio.
   Content lives inside its green safe area; it never stretches the image. */
html,body{height:100%;overflow:hidden}
.account-overlay{overflow:hidden;padding:8px 6px;align-items:center}
.account-panel,.account-panel.wide-panel{width:min(100%,400px,calc((100svh - 16px)*.8));max-width:100%;aspect-ratio:4/5;height:auto;min-height:0;border:0;border-image:none;padding:0;background:url('assets/popup-frame.webp') center/contain no-repeat;container-type:inline-size}
.account-panel .panel-body{position:absolute;inset:22% 11% 10%;display:flex;flex-direction:column;gap:7px;min-width:0;min-height:0;overflow:auto;scrollbar-width:thin;overscroll-behavior:contain}
.account-panel:before{inset:22% 11% 10%;z-index:0}
.account-panel h2{flex:none;font-size:clamp(18px,5.8cqw,23px);line-height:1.12;margin:0;max-width:100%;padding:0 3px}
.account-panel .panel-close{top:16%;right:8%;z-index:2}
.account-panel form{margin:0;min-width:0}
.account-panel label{font-size:12px;line-height:16px;margin:0 0 5px}
.account-panel input:not([type=checkbox]){height:44px;padding:10px}
.account-panel .panel-intro{font-size:12px;line-height:1.45;margin:0}
.account-panel .panel-note{font-size:11px;line-height:1.4;margin:0}
.account-panel .play-button{height:49px;min-height:49px;margin:8px 0 0;font-size:clamp(13px,4.4cqw,17px);padding:10px 15px 3px;flex:none}
.account-panel .text-button{padding:5px;font-size:11px;line-height:1.3;flex:none}
.account-panel .panel-error{margin:0;font-size:11px;line-height:1.3;flex:none}
.account-panel[data-view=profile] .panel-body,.account-panel[data-view=avatars] .panel-body{overflow:hidden;gap:6px}
.avatar-picker-trigger{display:flex;align-items:center;gap:9px;width:100%;min-height:56px;margin:9px 0 0;padding:4px 7px;border:1px solid #e0c27a77;border-radius:12px;background:#124b3acc;text-align:left;color:#fff0bd}
.avatar-picker-trigger>.avatar{width:44px;height:44px}
.avatar-picker-trigger>span:not(.avatar){min-width:0;flex:1;font-size:11px;line-height:1.3}
.avatar-picker-trigger b{display:block;margin-top:3px;font-size:12px;overflow-wrap:anywhere}
.avatar-picker-trigger>strong{font-size:11px;flex:none}
.avatar-current{font-size:12px;line-height:16px;margin:0;color:#ffe095}
.account-panel .avatar-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,1fr);width:min(100%,208px);margin:0 auto;gap:5px;flex:none}
.avatar-option{min-width:44px;min-height:44px;padding:2px}
.avatar-pages{display:flex;align-items:center;justify-content:center;gap:20px;margin:0;font-size:12px}
.avatar-pages .minor-button{width:44px;height:44px;padding:0;font-size:25px}
.account-panel[data-view=avatars] .play-button{margin:0;height:44px;min-height:44px}
.account-panel[data-view=avatars] .panel-body{gap:4px}
.account-panel[data-view=ranking] .panel-body,.account-panel[data-view=chat] .panel-body{overflow:hidden}
.ranking-tabs{margin:0;flex:none}.ranking-tabs .minor-button{padding:5px;font-size:11px}
#ranking-content{min-height:0;overflow:auto;overscroll-behavior:contain}.rank-list{max-height:none;overflow:visible}
.chat-list{height:auto;min-height:60px;flex:1}.chat-compose{margin:0;flex:none}.online-strip{max-height:65px;flex:none;padding:0}.chat-compose textarea{min-height:44px}
@media(max-width:350px){.account-panel .panel-body{gap:5px}.account-panel[data-view=profile] .panel-body{gap:4px}.avatar-picker-trigger{min-height:52px;margin-top:7px}.account-panel[data-view=profile] .play-button{height:44px;min-height:44px;margin-top:6px}.account-panel[data-view=profile] .text-button{min-height:38px}}
.account-panel[data-view=profile] form{display:flex;flex-direction:column;gap:7px;flex:1;min-height:0}
.account-panel[data-view=profile] label{margin:0}
.account-panel[data-view=profile] input{flex:none}
.account-panel[data-view=profile] .avatar-picker-trigger{margin:0;flex:none}
.account-panel[data-view=profile] .play-button{margin-top:auto}
@media(max-height:440px){.account-panel .panel-body{gap:4px}.account-panel h2{font-size:18px}.account-panel .avatar-grid{grid-template-rows:1fr;gap:4px}.account-panel[data-view=login] .panel-intro,.account-panel[data-view=code] .panel-intro{display:none}.account-panel[data-view=profile] form{gap:4px}.avatar-picker-trigger{min-height:44px;padding:0 3px;gap:4px}.avatar-picker-trigger>.avatar{width:36px;height:36px}.avatar-picker-trigger>strong{font-size:9px}.account-panel[data-view=profile] .play-button{height:44px;min-height:44px}.account-panel[data-view=profile]:has(#logout) .panel-body{overflow:auto}}
/* Game menus use the same undistorted artwork and safe interior. */
.phone>.overlay{inset:0;padding:8px 6px;overflow:hidden;z-index:10}
.start-card,.phone[data-scene=forest] .start-card{position:relative;width:min(100%,400px,calc((100svh - 16px)*.8));max-width:100%;aspect-ratio:4/5;height:auto;min-height:0;border:0;border-image:none;padding:0;background:url('assets/popup-frame.webp') center/contain no-repeat;container-type:inline-size}
.start-card:before{inset:22% 11% 10%;z-index:0}
.card-body{position:absolute;inset:22% 11% 10%;display:flex;flex-direction:column;gap:6px;min-height:0;overflow:auto;scrollbar-width:thin}
.start-card .card-star{display:none}.start-card .eyebrow{font-size:10px;line-height:13px;justify-content:center;letter-spacing:1px;flex:none}
.start-card h2{font-size:clamp(24px,7.5cqw,30px);line-height:1.05;margin:0;flex:none}
.start-card p{font-size:12px;line-height:1.4;margin:0;flex:none}
.start-card .play-button{min-height:49px;height:49px;font-size:20px;margin:0;padding:10px 16px 4px;flex:none}
.start-card .menu-links{margin:0;gap:7px;flex:none}.start-card .card-foot{font-size:10px;margin:0;line-height:1.35}
.result-stats{margin:0;padding:5px 2px;font-size:10px;line-height:1.35;flex:none}
.start-card:has(.result-stats:not([hidden])) .card-foot{display:none}
.start-card:has(#competition-result:not([hidden])) #card-copy{display:none}
#competition-result{padding:0;order:0;flex:none}.result-rival{margin:5px 0;gap:6px}.result-rival .avatar{width:36px;height:36px}.result-rival p{font-size:11px}
#competition-result>strong{font-size:19px;line-height:1.1;display:block}#competition-result p{font-size:11px;line-height:1.3}
@media(max-height:440px){.card-body{gap:4px}.start-card h2{font-size:20px}.start-card p{font-size:11px}.start-card .card-foot{display:none}}
/* Readable mobile type: adapt the layout, never shrink form text to fit. */
.account-panel h2{font-size:clamp(20px,5.8cqw,23px)}
.account-panel label,.account-panel .panel-intro,.account-panel .panel-note,.account-panel .panel-error,.account-panel .text-button{font-size:14px;line-height:1.35}
.account-panel .play-button{font-size:16px}
.avatar-picker-trigger>span:not(.avatar),.avatar-picker-trigger b,.avatar-picker-trigger>strong,.avatar-current,.avatar-pages{font-size:14px;line-height:1.3}
.avatar-picker-trigger>strong{max-width:68px}.avatar-picker-trigger{min-height:60px}
.account-panel[data-view=profile] .avatar-picker-trigger{margin:auto 0}
.account-panel[data-view=profile] .play-button{margin-top:0}
.account-panel[data-view=profile] .text-button{min-height:44px}
.account-panel[data-view=profile] .panel-body,.account-panel[data-view=avatars] .panel-body{overflow:auto}
@media(orientation:landscape) and (max-height:560px){.layout{padding:0}.phone{width:min(440px,100vw);height:100svh;border:0;border-radius:0}}
@media(max-height:440px){.account-panel[data-view=profile] .avatar-picker-trigger{min-height:44px;margin:0}.avatar-picker-trigger>.avatar{display:none}.avatar-picker-trigger>span:not(.avatar){font-size:0}.avatar-picker-trigger b{margin:0;font-size:14px}.avatar-picker-trigger>strong{font-size:14px}.account-panel .panel-body{left:10%;right:10%}.account-panel[data-view=avatars] .avatar-grid{width:100%;gap:3px}.account-panel[data-view=avatars] .panel-body{gap:3px}.account-panel .play-button{height:44px;min-height:44px}}
.card-body{justify-content:safe center;gap:5px}
.start-card p{font-size:14px;line-height:1.35}
.start-card .card-foot{font-size:12px;line-height:1.35}
.menu-links .minor-button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;font-size:14px;padding:7px 5px;background:linear-gradient(180deg,#276953,#0a4334);border:1px solid #e5c477;box-shadow:inset 0 1px 0 #fff3,0 3px 6px #001d2266}
.menu-icon{display:block;width:25px;height:25px;flex:none;filter:drop-shadow(0 2px 1px #001f2280)}
@media(max-width:350px){.card-body{gap:4px}.start-card h2{font-size:25px}.menu-links .minor-button{min-height:44px;gap:5px}.menu-icon{width:22px;height:22px}}
.start-card .card-foot{font-size:14px}
.account-panel .minor-button,.ranking-position,.rank-row,.rank-row>strong,.podium-player>span:not(.avatar),.podium-player>strong,.chat-message b,.chat-message p,.online-player span:not(.avatar),.online-strip>p,.empty-state p{font-size:14px}
.chat-message time,.online-player small,.rank-row small{font-size:12px}
.account-panel .chat-compose textarea{font-size:16px;padding:8px;resize:none}
.chat-compose button{font-size:14px;padding:5px}
.result-stats{font-size:12px}
#competition-result p,.result-rival p{font-size:14px;line-height:1.35}
.card-body>#play,.card-body>#retry-save{order:2}.card-body>#competition-result{order:1}.card-body>.menu-links{order:3}.card-body>.card-foot{order:4}
.start-card:has(.result-stats:not([hidden])) h2{font-size:34px;line-height:1.1}
.start-card:has(.result-stats:not([hidden])) h2 small{display:inline;font-size:14px;margin-left:7px;vertical-align:3px}
.rival b{font-size:14px;line-height:18px}.rival small{font-size:11px;line-height:13px}
/* Taller artwork, regenerated rather than stretched: natural ratio 2:3. */
.account-panel,.account-panel.wide-panel,.start-card,.phone[data-scene=forest] .start-card{aspect-ratio:2/3;width:min(100%,400px,calc((100svh - 16px)*.6666667));background-image:url('assets/popup-frame-tall.png');background-size:contain}
.account-panel .panel-body,.card-body{inset:18% 11% 8%}
.account-panel:before,.start-card:before{inset:18% 11% 8%}
.account-panel .panel-close{top:12%;right:8%}
@media(max-height:440px){.account-panel .panel-body,.card-body{inset:16% 10% 6%}.account-panel[data-view=avatars] .avatar-grid{grid-template-columns:repeat(2,44px);grid-template-rows:repeat(2,44px);width:91px;gap:3px}}
.account-panel[data-view=login] .panel-body,.account-panel[data-view=code] .panel-body,.account-panel[data-view=avatars] .panel-body{justify-content:safe center}