/* playekoloko.com home (/) and phone login (/login/), 2026-10-24.
   Design: the owner's "homecoming v3" package — the original 2010 site chrome (lime, blue band,
   side palms, paper, torn footer), Arial for reading text, GanCLM only on slab buttons.
   The login keeps the original Flash login leaf, unchanged in colour, at its original angle. */
@font-face{font-family:GanCLM;src:url('/assets/gan-clm.woff2') format('woff2');font-weight:400 900;font-display:swap;unicode-range:U+0590-05FF,U+FB1D-FB4F,U+20AA}
@font-face{font-family:EkoSpacer;src:url('/assets/play2026/fonts/spacer.ttf') format('truetype');font-weight:400;font-display:swap;unicode-range:U+0590-05FF,U+FB1D-FB4F,U+20AA}
@font-face{font-family:EkoSpacer;src:url('/assets/play2026/fonts/spacer-bold.ttf') format('truetype');font-weight:700;font-display:swap;unicode-range:U+0590-05FF,U+FB1D-FB4F,U+20AA}
:root{--lime:#abd93f;--ink:#18384f;--ink-soft:#4a6076;--image-line:#a7b793;--paper-line:#dcd9b8;--band:#1b4762;--card:#fffef4;--leaf:#5f9a1c;--leaf-deep:#36571c;--foot:#24410f;--note:#fdf3d8;--note-line:#e8d49c;--error:#8d2b19;--band-grad:linear-gradient(180deg,#18384e,#295f83 10%,#326486 45%,#2c5a78 70%,#224d6a 88%,#1d435d)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:auto}
body{margin:0;min-width:260px;background:var(--lime) url('/assets/homecoming/bg_ext.jpg') repeat-x top center;color:var(--ink);font:15px/1.8 Arial,'Segoe UI',sans-serif}
a{color:#215b7d;text-underline-offset:3px}
button,input{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;color:inherit}
button:disabled{cursor:not-allowed}
img{display:block;max-width:100%;height:auto}
figure,p,h1,h2,h3{margin:0}
h1,h2{font-size:24px;line-height:1.3}
h3{font-size:17px;line-height:1.4}
h1,h2,h3{font-weight:700}
p+p{margin-top:10px}
bdi{unicode-bidi:isolate}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid var(--band);outline-offset:4px}
section[id]{scroll-margin-top:20px}
section[tabindex]:focus{outline:none}
main:focus{outline:none}
.skip-link{position:absolute;z-index:20;top:8px;right:8px;background:#fff;padding:10px 18px;transform:translateY(-150%)}
.skip-link:focus{transform:none}

/* ---------- header: logo, motto and the blue band ---------- */
.top{height:154px;background:url('/assets/homecoming/header_left.jpg') no-repeat calc(50% - 553.5px) top,url('/assets/homecoming/header_right.jpg') no-repeat calc(50% + 526.5px) top}
.top-in{max-width:1200px;height:100%;position:relative;margin:auto}
.top-logo{display:block;width:200px;position:absolute;top:4px;inset-inline-start:34px}
.top-logo img{width:100%;height:auto}
.top-memory{position:absolute;top:38px;inset-inline-end:170px;font-size:14px;font-style:oblique;color:var(--foot)}
.top-nav{position:absolute;top:87px;inset-inline-start:170px;inset-inline-end:150px;height:59px;display:flex;justify-content:center;align-items:center;gap:3px}
.top-nav a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 15px;text-decoration:none;font-size:16px;font-weight:700;color:#fff;white-space:nowrap;text-shadow:1px 2px #152d40}
.top-nav a:hover,.top-nav a[aria-current]{color:#ecf9bd;text-decoration:underline;text-underline-offset:7px}
.top-nav a:focus-visible{outline-color:#fff;outline-offset:0}

/* ---------- the paper between the palms ---------- */
.scene{max-width:1200px;margin:0 auto;display:grid;direction:ltr;grid-template-columns:143px 860px 197px;align-items:start}
.side-art{height:447px;background-repeat:no-repeat;background-size:100% auto}
.side-left{background-image:url('/assets/homecoming/back_left.jpg')}
.side-right{background-image:url('/assets/homecoming/back_right.jpg')}
.paper{direction:rtl;min-width:0;background:url('/assets/homecoming/main_iw.jpg') no-repeat top center,url('/assets/homecoming/tileable_iw.jpg') repeat-y top center;background-size:100% auto,100% auto}
.paper-in{padding:31px 48px 24px}
.paper-tear{height:40px;background:url('/assets/homecoming/footer_iw.jpg') no-repeat center bottom;background-size:100% 40px}

.welcome{display:flex;align-items:center;justify-content:flex-start;gap:44px;min-height:206px;padding:0 8px 20px}
.welcome-copy{position:relative}
.kicker{font-size:13px;color:#46651c;font-weight:700;margin-bottom:6px}
.welcome h1{font-size:26px;margin-bottom:10px}
.welcome-copy>p:not(.kicker):not(.svc){line-height:1.8}
.welcome-tuki{width:160px;flex:0 0 160px;height:auto;margin:0 0 0 24px}
.welcome-lead{font-size:16px}
.welcome-actions{display:flex;align-items:center;gap:18px;margin-top:13px}

.slab{display:inline-flex;align-items:center;justify-content:center;background-repeat:no-repeat;background-position:center;background-size:100% 100%;min-width:190px;width:190px;height:74px;padding:6px 12px 10px;font:700 20px/1 GanCLM,Arial,sans-serif;color:#fff;text-decoration:none;white-space:nowrap}
.slab-orange{background-image:url('/assets/homecoming/button-orange.png');text-shadow:1px 2px 1px #6a3c02}
.slab-green{background-image:url('/assets/homecoming/button-green.png');text-shadow:1px 2px 1px #3d5410}
.slab-small{width:176px;min-width:176px;height:62px;font-size:18px;padding:4px 10px 7px}
.slab:hover{filter:brightness(1.07)}
.slab:active{filter:brightness(.95);transform:translateY(1px)}
.quiet-link{font-size:14px}

.svc{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:12px;font-size:13px;line-height:1.5;color:var(--ink-soft)}
.svc-dot{width:10px;height:10px;border-radius:50%;background:#b7b7a4;flex:none}
.svc[data-state=up] .svc-dot{background:#4f9a1a}
.svc[data-state=down] .svc-dot{background:#c0392b}
.svc[data-state=down] .svc-text{color:var(--error);font-weight:700}
.svc-when{font-size:12px}

.village-view{border:1px solid var(--image-line);background:#eef6d8}
.village-view>img{width:100%;aspect-ratio:960/520;object-fit:cover;object-position:center 40%}
.village-view figcaption{padding:8px 12px;font-size:13px;text-align:center;color:#375324}

.perks{list-style:none;margin:18px 0 0;padding:12px 14px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;background:var(--card);border:1px solid var(--image-line);border-radius:10px}
.perks li{display:flex;align-items:center;gap:10px;font-size:13px;line-height:1.45;color:var(--ink-soft)}
.perks img{width:44px;height:44px;flex:none;object-fit:contain}
.perks strong{display:block;color:var(--ink);font-size:15px}

.paper-section{padding:30px 0;border-bottom:1px solid var(--paper-line)}
.section-heading{margin-bottom:18px}
.section-heading p{margin-top:6px;color:var(--ink-soft)}
.world-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.world-grid figure{min-width:0}
.image-link{position:relative;display:block;border:1px solid var(--image-line);background:#e7efd6}
.image-link img{width:100%;aspect-ratio:8/5;object-fit:cover}
.image-zoom{position:absolute;left:6px;bottom:6px;opacity:0;background:var(--card);color:var(--ink);font-size:12px;padding:2px 7px}
.image-link:hover .image-zoom,.image-link:focus-visible .image-zoom{opacity:1}
.world-grid figcaption,.memory-grid figcaption{padding-top:8px}
.world-grid figcaption strong,.world-grid figcaption span,.memory-grid figcaption strong,.memory-grid figcaption span{display:block}
.world-grid figcaption strong,.memory-grid figcaption strong{font-size:17px}
.world-grid figcaption span,.memory-grid figcaption span{font-size:13px;line-height:1.6;color:var(--ink-soft);margin-top:2px}
.map-link{display:inline-flex;align-items:center;min-height:44px;gap:8px;margin-top:12px;font-weight:700}

.friends-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;text-align:center}
.friend-art{height:170px;display:flex;justify-content:center;align-items:end}
.friend-art img{height:160px;width:auto;max-width:100%;object-fit:contain}
.friend figcaption{padding-top:10px}
.friend h3{font-size:16px}
.friend p{font-size:13px;color:var(--ink-soft);margin-top:2px}

/* ---------- downloads ---------- */
.platforms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.platform{display:flex;flex-direction:column;align-items:center;text-align:center;padding:18px 14px 14px;background:var(--card);border:1px solid var(--image-line);border-radius:10px}
.platform--web{background:#f3f9df;border-color:#9fc35a}
.platform-icon{width:40px;height:40px;margin-bottom:6px}
.platform-icon--app{width:44px;height:44px;border-radius:11px;box-shadow:0 1px 3px #18384f40}
.platform h3{font-size:19px}
.platform-tag{margin:2px 0 0;font-size:12px;font-weight:700;color:#46651c}
.platform-meta{margin:2px 0 0!important;font-size:12px;color:var(--ink-soft)}
.platform>p:not(.platform-tag):not(.platform-meta){flex:1;margin:8px 0 10px;font-size:14px;line-height:1.6}
.platform .slab{margin-top:auto}
.platform-note{margin:6px 0 0!important;min-height:36px;display:flex;align-items:center;font-size:12px;color:var(--ink-soft)}
.sha{width:100%;margin-top:6px;font-size:12px;color:var(--ink-soft);text-align:start}
.sha summary{display:inline-flex;align-items:center;min-height:36px;text-decoration:underline}
.sha p{margin:0 0 6px;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.sha .cmd{padding:6px 8px;background:#f2efd9;border:1px solid var(--paper-line);border-radius:4px;text-align:left}
.sha code{font:12px/1.6 Consolas,'Courier New',monospace;color:var(--ink)}
.more-platforms{margin-top:18px;font-size:14px;line-height:1.7}
.more-platforms .fine{font-size:13px;color:var(--ink-soft)}

.memory-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.memory-grid .image-link img{aspect-ratio:600/440;object-fit:contain;background:var(--card)}

/* ---------- parents and questions ---------- */
.checks{margin:0;padding:0;list-style:none}
.checks li{position:relative;padding-inline-start:26px;margin-bottom:6px}
.checks li::before{content:'';position:absolute;inset-inline-start:0;top:7px;width:16px;height:16px;border-radius:50%;background:var(--leaf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.parents .links{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:8px}
.parents .links a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.questions h2{margin-bottom:14px}
.faq details{border-top:1px solid var(--paper-line)}
.faq details:last-child{border-bottom:1px solid var(--paper-line)}
summary{cursor:pointer}
.faq summary{min-height:49px;display:flex;align-items:center;justify-content:space-between;font-size:16px;font-weight:700;list-style:none;gap:15px;padding:10px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:22px;color:#507627;font-weight:400}
.faq details[open] summary::after{content:'−'}
.faq details p{max-width:650px;margin:0 0 15px;font-size:15px;line-height:1.8;color:var(--ink-soft)}
.faq-more a{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;font-weight:700}
.return-line{text-align:center;padding-top:23px}
.return-line>p:first-child{font-size:17px;font-weight:700}
.return-line .slab{margin-top:3px}
.discord-line{margin-top:8px!important;font-size:14px;color:var(--ink-soft)}

.site-footer{max-width:860px;margin:20px auto 24px;text-align:center;padding:0 22px;color:var(--foot);font-size:13px}
.site-footer>p:first-child{font-size:15px}
.site-footer nav{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 16px}
.site-footer a{display:inline-flex;align-items:center;min-height:44px;color:var(--foot)}
.site-footer .copyright{max-width:620px;margin:7px auto 0;font-size:12px;line-height:1.7}

#image-dialog{width:min(850px,calc(100% - 24px));max-height:calc(100dvh - 32px);padding:14px 18px 18px;overflow:auto;background:#f0dfc7;border:2px solid #b7aea2;border-radius:12px;color:var(--ink);box-shadow:5px 5px 10px #0007}
#image-dialog::backdrop{background:#122c2dc7}
.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.dialog-head h2{font-size:22px}
.dialog-close{border:1px solid #c84a3d;background:#fff8ea;color:#ba3329;font:bold 30px Arial;min-width:44px;height:44px;border-radius:6px}
.dialog-close:hover{background:#ffe9dd}
#full-image{max-height:calc(100dvh - 190px);width:100%;object-fit:contain;background:var(--card)}
#image-caption{font-size:14px;margin-top:10px;text-align:center}

/* ---------- login: the original Flash login, leaf and all ---------- */
.entry-main{max-width:1000px;margin:auto;padding:14px 20px 0}
.entry-title{margin:0 12px 14px;font-size:24px;text-align:center}
.entry-stage{--leaf-w:600px;position:relative;isolation:isolate;min-height:600px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:70px 0 34px;overflow:hidden;background:url('/assets/play2026/art/bg-jungle.webp') center/cover no-repeat}
.entry-vignette{position:absolute;inset:0;z-index:-1;background:url('/assets/play2026/art/vignette.webp') center/100% 100% no-repeat;pointer-events:none}
.ml-leaf{position:relative;width:var(--leaf-w);flex:none}
.ml-leaf-art{position:absolute;left:50%;top:50%;width:calc(var(--leaf-w) * 1.02);max-width:none;height:auto;transform:translate(-50%,-50%) rotate(200.9deg);pointer-events:none;filter:drop-shadow(0 0 1.5px #2f4d12) drop-shadow(0 5px 6px #24410f70)}
.entry-tuki{position:absolute;z-index:2;width:118px;top:-78px;inset-inline-start:calc(50% - 52px);pointer-events:none}
.ml-leaf-content{--s:1.1;position:relative;z-index:1;width:calc(330px * var(--s));margin:0 auto;padding:calc(34px * var(--s)) 0 calc(26px * var(--s));color:#fff}
/* The form follows the original Flash login (loginScreen): label, flat olive field and
   "remember me" on one row; the yellow forgot link under the password label; the login slab
   left of centre; "new to Ekoloko?" and the register slab below it. Sizes are the stage
   pixels times --s. */
.ml-form{display:flex;flex-direction:column;align-items:flex-start}
.ml-row{display:grid;grid-template-columns:calc(116px * var(--s)) minmax(0,1fr) calc(80px * var(--s));align-items:center;column-gap:calc(8px * var(--s));width:100%;margin-bottom:calc(7px * var(--s))}
.ml-label,.ml-signup h2,.ml-remember,.ml-returning{text-shadow:1px 1px 1px #2f4b0ca6,0 0 2px #2f4b0c73}
.ml-label{font:700 calc(24px * var(--s))/1 EkoSpacer,Arial,sans-serif;white-space:nowrap;color:#fff}
.ml-input{display:block;width:100%;min-width:0;height:max(30px,calc(27px * var(--s)));border:0;border-radius:0;padding:0 8px;background:#5f7f1c;color:#fff;caret-color:#fff;box-shadow:inset 0 1px 0 #4f6d16,0 1px 0 #8fb344,0 0 5px 1px #a9cc5c80;font:700 16px/1.2 Arial,sans-serif;text-align:left}
.ml-input:hover{background:#5b7b1a}
.ml-input:focus{outline:2px solid #fecb00;outline-offset:1px}
.ml-input[aria-invalid=true]{outline:2px solid #ffcf7a;outline-offset:1px}
.ml-input:-webkit-autofill{-webkit-text-fill-color:#fff;-webkit-box-shadow:0 0 0 40px #5f7f1c inset}
.ml-password-wrap{position:relative;min-width:0}
.ml-password-wrap .ml-input{padding-right:44px}
.ml-visibility{position:absolute;inset-block:0;right:0;width:44px;padding:0;border:0;background:transparent;color:#dfeeb0;font:700 11px/1.2 Arial,sans-serif}
.ml-visibility:hover{color:#fff}
.ml-visibility:focus-visible{outline:2px solid #fecb00;outline-offset:-2px}
.ml-visibility[aria-pressed=true]{text-decoration:underline}
.ml-remember{display:flex;align-items:center;gap:5px;min-height:44px;font:400 calc(14px * var(--s))/1 EkoSpacer,Arial,sans-serif;color:#fff;cursor:pointer;white-space:nowrap}
.ml-remember input{appearance:none;-webkit-appearance:none;width:16px;height:16px;flex:none;margin:0;border:1px solid #4d6a14;background:#b4cc85;box-shadow:inset 1px 1px 0 #ffffff59;cursor:pointer}
.ml-remember input:checked{background:#b4cc85 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.6l3 3.2 7-8' fill='none' stroke='%23111' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}
.ml-remember input:focus-visible{outline:3px solid #fecb00;outline-offset:2px}
.ml-recover{min-height:36px;margin-top:calc(-2px * var(--s));padding:0;border:0;background:none;color:#fecb00;font:700 calc(18px * var(--s))/1 EkoSpacer,Arial,sans-serif;white-space:nowrap;text-shadow:0 0 3px #3b5710,1px 1px 1px #3b5710}
.ml-recover:hover{color:#fff}
.ml-recover:focus-visible{outline:3px solid #fff;outline-offset:3px}
.ml-art-button{display:block;padding:0;border:0;background:transparent;line-height:0;transition:filter .15s ease,transform .12s ease}
.ml-art-button img{display:block;width:100%;height:auto}
.ml-art-button:hover{filter:brightness(1.06)}
.ml-art-button:active{transform:translateY(2px)}
.ml-art-button:focus-visible{outline:3px solid #fffef4;outline-offset:4px;border-radius:6px}
.ml-art-button[aria-busy=true]{filter:grayscale(.35) brightness(.95);cursor:progress}
.ml-login-button{width:calc(140px * var(--s));margin-top:calc(4px * var(--s));margin-inline-start:calc(64% - 70px * var(--s))}
.ml-signup{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin-top:calc(12px * var(--s))}
.ml-signup h2{margin-inline-start:4%;font:700 calc(22px * var(--s))/1.1 EkoSpacer,Arial,sans-serif;color:#fff;white-space:nowrap}
.ml-register-button{width:calc(170px * var(--s));margin-top:calc(6px * var(--s));margin-inline-start:calc(43% - 85px * var(--s))}
.ml-returning{text-align:center;color:#fff}
.ml-returning h2{font:700 28px/1.25 EkoSpacer,Arial,sans-serif}
.ml-returning p{margin:6px 0;font:700 16px/1.5 Arial,sans-serif}
.ml-returning .ml-player{font-size:23px;overflow-wrap:anywhere}
.ml-returning .ml-continue{width:156px;margin:14px auto 6px}
.ml-text-action{display:block;min-height:44px;margin:0 auto;padding:6px 12px;border:0;background:transparent;color:#fff;font:700 16px/1.4 Arial,sans-serif;text-decoration:underline;text-underline-offset:4px}
.ml-text-action:hover{color:#ffd52b}
.ml-text-action:focus-visible{outline:3px solid #fffef4;outline-offset:2px}
.ml-signout{font-size:14px}
.ml-text-action:disabled{opacity:.65;cursor:progress}
.ml-notices{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:4px;width:min(100% - 32px,440px);margin-top:16px;text-align:center}
.ml-note{display:inline-block;max-width:100%;margin:0;padding:6px 12px;color:var(--error);background:var(--note);border:1px solid var(--note-line);border-radius:4px;font:700 14px/1.45 Arial,sans-serif;overflow-wrap:anywhere}
.ml-note--info{color:var(--leaf-deep)}
.ml-note--caps{color:var(--ink)}
.entry-help{max-width:780px;margin:14px auto 0;padding:0 12px;display:flex;flex-wrap:wrap;justify-content:center;gap:0 18px}
.entry-help a{display:inline-flex;align-items:center;min-height:44px;color:var(--foot);font-size:14px;font-weight:700}

.ml-dialog{position:fixed;inset:0;max-width:440px;width:calc(100% - 28px);max-height:calc(100dvh - 32px);margin:auto;padding:0 24px 22px;border:2px solid #b7aea2;border-top:7px solid var(--leaf);border-radius:8px;background:#f0dfc7;color:var(--ink);box-shadow:5px 5px 10px #0007;text-align:center;overflow-y:auto;overscroll-behavior:contain}
.ml-dialog::backdrop{background:#122c2dc7}
.ml-dialog-bar{position:sticky;top:0;display:flex;justify-content:flex-end;margin-inline:-16px;padding-top:6px;background:#f0dfc7}
.ml-dialog-close{display:grid;place-items:center;width:44px;height:44px;border:1px solid #c84a3d;border-radius:6px;background:#fff8ea;color:#ba3329;font:bold 30px/1 Arial,sans-serif}
.ml-dialog-close:hover{background:#ffe9dd}
.ml-dialog h2{margin:0 0 8px;font:700 22px/1.3 Arial,sans-serif}
.ml-dialog p{margin:0 0 10px;font-size:16px;line-height:1.7}
.ml-steps{margin:0 0 12px;padding:12px 16px 12px 12px;padding-inline-start:34px;background:var(--card);border:1px solid var(--paper-line);border-radius:6px;text-align:start;font-size:16px;line-height:1.7}
.ml-steps li+li{margin-top:4px}
.ml-safe{padding:8px 10px;background:var(--note);border:1px solid var(--note-line);border-radius:4px;color:var(--error);font-weight:700;font-size:15px!important}
.ml-dialog-go{display:flex;align-items:center;justify-content:center;width:210px;height:66px;margin:4px auto 8px;padding:4px 10px 8px;background:url('/assets/homecoming/button-green.png') center/100% 100% no-repeat;color:#fff;font:700 19px/1 GanCLM,Arial,sans-serif;text-decoration:none;text-shadow:1px 2px 1px #3d5410}
.ml-dialog-go:hover{filter:brightness(1.07)}
.ml-dialog-fine{font-size:14px!important;color:var(--ink-soft)}
body.ml-dialog-open{overflow:hidden}

/* ---------- smaller screens ---------- */
@media (max-width:1199px){
  .top{background-image:none}
  .top-logo{inset-inline-start:max(30px,calc((100% - 860px)/2))}
  .top-memory{inset-inline-end:max(30px,calc((100% - 860px)/2))}
  .top-nav{inset-inline:10px}
  .scene{display:block;max-width:860px}
  .side-art{display:none}
}
@media (max-width:899px){
  body{background:var(--lime)}
  .top{height:auto}
  .top-in{height:auto;padding-top:4px}
  .top-logo{position:static;width:174px;margin:0 auto 4px}
  .top-memory{display:none}
  .top-nav{position:static;min-height:48px;height:auto;flex-wrap:wrap;gap:0;background:var(--band-grad);padding:2px 8px}
  .top-nav a{padding:0 12px;font-size:15px}
  .paper-in{padding-top:24px}
  .welcome{padding-inline:0}
  .welcome-tuki{width:115px;flex-basis:115px;margin:0}
  .perks{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
  .platforms{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
  .entry-main{padding:16px 10px 0;max-width:780px}
}
@media (max-width:719px){
  .paper-in{padding:24px 25px 18px}
  .welcome h1{font-size:22px}
  .welcome{gap:10px;min-height:0;padding-bottom:17px}
  .welcome-tuki{width:92px;flex-basis:92px;align-self:flex-start;margin-top:30px}
  .welcome-actions{gap:8px 12px;flex-wrap:wrap;margin-top:8px}
  .welcome-actions .slab{width:175px;min-width:175px;height:68px;font-size:19px}
  .welcome-copy br{display:none}
  .quiet-link{font-size:13px}
  .village-view>img{aspect-ratio:8/5;object-fit:contain}
  .village-view figcaption{font-size:12px;padding:6px 8px}
  .paper-section{padding:24px 0}
  .world-grid{gap:14px;grid-template-columns:1fr}
  .world-grid figure{display:grid;grid-template-columns:46% 1fr;gap:14px;align-items:center}
  .world-grid figcaption{padding:0}
  .friends-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
  .friend-art{height:150px}
  .friend-art img{height:140px}
  .welcome-lead{font-size:14px}
  .memory-grid{gap:18px}
  .section-heading p{font-size:14px}
  .section-heading h2,.questions h2{font-size:22px}
  .entry-title{font-size:22px;margin-bottom:6px}
  .entry-stage{--leaf-w:450px;min-height:0;padding:88px 0 34px;background-size:auto 100%;background-position:center 20%}
  .ml-leaf-art{left:56%;top:43%}
  .entry-vignette{background-size:116% 112%}
  .ml-leaf-content{--s:.94;width:min(360px,calc(100vw - 24px))}
  .entry-tuki{width:92px;top:-64px}
}
@media (max-width:430px){
  .top-logo{width:150px}
  .top-nav{padding-inline:2px}
  .top-nav a{font-size:13px;padding:0 9px}
  .paper-in{padding:20px 19px 14px}
  .welcome{position:relative;display:block}
  .welcome h1{font-size:22px;max-width:240px}
  .welcome .kicker{font-size:12px}
  .welcome-copy>p:not(.kicker):not(.svc){max-width:230px;font-size:14px}
  .welcome-tuki{position:absolute;width:75px;top:64px;left:-5px;margin:0}
  .welcome-actions .slab{width:162px;min-width:162px;height:63px;font-size:18px}
  .perks{grid-template-columns:1fr 1fr;gap:10px}
  .perks{padding:10px}
  .perks li{font-size:12px;gap:8px}
  .perks img{width:36px;height:36px}
  .perks strong{font-size:14px}
  .section-heading h2,.questions h2{font-size:21px}
  .world-grid figure{grid-template-columns:44% 1fr;gap:10px}
  .world-grid figcaption strong{font-size:16px}
  .world-grid figcaption span{font-size:12px}
  .memory-grid{grid-template-columns:1fr;gap:20px}
  .faq summary{font-size:15px}
  .faq details p{font-size:14px}
  .site-footer{padding-inline:16px}
  .dialog-head h2{font-size:18px}
  #image-dialog{padding:12px}
  .entry-main{padding:12px 0 0}
  .entry-title{font-size:21px}
  .ml-leaf-content{--s:.92;width:calc(100vw - 20px)}
}
@media (max-width:350px){
  .top-nav a{padding-inline:7px;font-size:12px}
  .paper-in{padding-inline:16px}
  .welcome-tuki{width:59px;top:70px;left:-4px}
  .welcome-actions .slab{width:153px;min-width:153px;height:60px;font-size:17px}
  .ml-leaf-content{--s:.86}
}
/* Phones held sideways: a short stage, the same leaf. */
@media (max-height:500px) and (orientation:landscape){
  .login-page .top-in{display:flex;align-items:center;gap:8px;padding:0 10px;background:var(--band-grad)}
  .login-page .top-logo{width:96px;margin:2px 0}
  .login-page .top-nav{flex:1;min-height:52px;background:none;justify-content:flex-start}
  .login-page .entry-title{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .entry-main{padding-top:0}
  .entry-stage{--leaf-w:470px;min-height:0;padding:58px 0 14px}
  .ml-leaf-art{top:46%}
  .ml-leaf-content{--s:.8;width:340px;padding-top:20px;padding-bottom:10px}
  .entry-tuki{width:80px;top:-52px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media (forced-colors:active){
  .ml-remember input,.ml-remember input:checked{appearance:auto;-webkit-appearance:auto;background:none}
  .ml-label,.ml-signup h2,.ml-remember,.ml-recover{color:CanvasText;text-shadow:none}
  .ml-input{background:Field;color:FieldText;border:1px solid FieldText}
}