/* One responsive doorway: real account controls live inside the red gate. */
#dialog:has(.gate-login){width:100%;max-width:none;max-height:100dvh;min-height:100dvh;margin:0;padding:0;border:0;border-radius:0;background:#f6f5ef;box-shadow:none;color:#243e36}
#dialog:has(.gate-login)::backdrop{background:#f6f5ef}
#dialog:has(.gate-login)>.modal-close{position:fixed;top:12px;right:16px;z-index:20;background:#ffffffed;color:#285c49;border:1px solid #d9dfd4}
.gate-login{padding:0!important;min-height:100dvh;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 65%,#e8eddf 0,transparent 60%),#f6f5ef}
.gate-topbar{display:flex;align-items:center;gap:12px;padding:20px clamp(20px,4vw,64px) 8px}
.gate-topbar>img{width:30px;height:34px;flex-shrink:0}.gate-topbar>span{min-width:0}.gate-topbar strong{font-size:1rem;letter-spacing:.08em}.gate-topbar small{display:block;font-size:.625rem;letter-spacing:.3em;color:#596b61;margin-top:4px}
.gate-layout{width:min(940px,100%);margin:auto;padding:0 32px 12px}
.gate-scene{min-width:0;text-align:center}.gate-scene-heading{position:relative;z-index:1}
.gate-eyebrow{display:none}
.gate-scene h1{font-family:"STSong","SimSun",serif;font-size:clamp(1.5rem,2.4vw,2rem);font-weight:600;line-height:1.45;letter-spacing:.08em;margin:4px 0 6px;color:#285c49}
.gate-scene h1 br{display:none}.gate-scene-heading>p{font-size:.8125rem;margin:0 0 8px;color:#596b61}
.gate-stage{position:relative;width:100%;padding:8px 164px 32px;margin:0 auto;isolation:isolate}
.gate-sun{position:absolute;width:36%;aspect-ratio:1;border-radius:50%;background:#f3e5bd;left:32%;top:6%;z-index:-1}
.gate-cloud{position:absolute;border-top:1px solid #c6cdbb;border-radius:50%;width:18%;height:5%;top:17%}.gate-cloud:after{content:"";position:absolute;width:55%;height:75%;left:30%;top:-50%;border-top:1px solid #c6cdbb;border-radius:50%}
.gate-cloud-left{left:5%;top:22%}.gate-cloud-right{right:2%;top:34%;width:14%}
.gate-wall{position:absolute;bottom:13%;height:34%;width:28%;background:linear-gradient(#f8f5e9,#e5e7d8);border-top:6px solid #657e68;border-radius:3px 3px 0 0;z-index:-1}
.gate-wall:after{content:"";position:absolute;top:16%;width:34%;aspect-ratio:1;left:32%;border:4px solid #c0c8b4;border-radius:50%;background:repeating-linear-gradient(90deg,transparent 0 8px,#c0c8b4 8px 10px),repeating-linear-gradient(0deg,transparent 0 8px,#c0c8b4 8px 10px)}
.gate-wall-left{left:3%;transform:skewY(-4deg)}.gate-wall-right{right:3%;transform:skewY(4deg)}
.gate-building{position:absolute;width:58%;height:85%;left:21%;bottom:11%;z-index:1}
.gate-roof{position:absolute;width:123%;height:28%;left:-11.5%;top:-1%;z-index:5;overflow:visible}
.gate-plaque{position:absolute;top:18%;left:19%;width:62%;height:17%;display:flex;justify-content:center;align-items:center;flex-direction:column;z-index:6;background:#285c49;border:3px double #d6ae61;color:#ffeac0;font:600 clamp(15px,1.65vw,23px)/1.4 "STSong","SimSun",serif;letter-spacing:.14em;box-shadow:0 3px 0 #193f33}
.gate-plaque span{font:8px/1.4 system-ui,sans-serif;letter-spacing:.27em;margin-top:3px}
.gate-frame{position:absolute;inset:28% 5% 3%;border:10px solid #713629;border-top-width:13px;background:#f3e1bb;perspective:850px;box-shadow:0 0 0 3px #c8ad83,7px 10px 0 #254d3920;transform-style:preserve-3d}
.gate-leaf{position:absolute;width:50%;height:100%;top:0;z-index:3;background:linear-gradient(100deg,#b4543e,#a54836 72%,#914030);border:2px solid #823727;box-sizing:border-box;backface-visibility:hidden;transform-style:preserve-3d}
.gate-leaf-left{left:0;transform-origin:left center}.gate-leaf-right{right:0;transform-origin:right center;background:linear-gradient(100deg,#a54836,#b4543e)}
.gate-panel{position:absolute;inset:7% 12% 10%;border:2px solid #c46e4c;box-shadow:inset 0 0 0 3px #883a2a;pointer-events:none}
.gate-studs{position:absolute;display:grid;grid-template-columns:repeat(3,1fr);gap:12px 8px;left:21%;right:21%;top:19%}
.gate-studs i{width:6px;height:6px;background:#dab268;border-radius:50%;box-shadow:1px 2px 0 #63361e}
.gate-knocker{position:absolute;width:23px;height:26px;top:52%;border:4px solid #e2bb6c;border-radius:50%;box-shadow:1px 3px 2px #642e28, inset 0 1px 1px #693322}
.gate-knocker:before{content:"";position:absolute;width:13px;height:13px;border-radius:50%;background:#d6ae61;top:-10px;left:1px;box-shadow:0 1px 0 #9d7436}
.gate-leaf-left .gate-knocker{right:16%}.gate-leaf-right .gate-knocker{left:16%}
.gate-step{position:absolute;bottom:0;left:-2%;width:104%;height:5%;background:#c6c7b5;border-top:4px solid #e6e2cd;box-shadow:0 7px 0 #a6b2a0;border-radius:2px}
.gate-inside{position:absolute;inset:0;overflow:hidden;background:linear-gradient(#fcf3d3 35%,#edf0d9 70%);display:flex;align-items:center;flex-direction:column;padding-top:20%}
.gate-inner-sun{position:absolute;top:5%;left:35%;width:30%;aspect-ratio:1;border-radius:50%;background:#f3d686}
.gate-garden{position:absolute;width:50%;height:60%;bottom:-8%;border-radius:50% 50% 0 0;background:#849d6b}.gate-garden-left{left:-20%;transform:rotate(12deg)}.gate-garden-right{right:-20%;transform:rotate(-12deg);background:#5d8461}
.gate-path{position:absolute;width:80%;height:40%;background:#f6e5ba;bottom:-5%;clip-path:polygon(40% 0,60% 0,100% 100%,0 100%)}
.gate-book{position:relative;display:flex;width:54%;height:27%;margin-top:8%;filter:drop-shadow(0 5px 2px #285c491f)}.gate-book span{flex:1;background:#fffdf1;border:2px solid #d2b572;border-radius:5px 0 0 5px;transform:skewY(8deg)}.gate-book span+span{border-radius:0 5px 5px 0;transform:skewY(-8deg)}.gate-book span:after{content:"";position:absolute;inset:22% 20%;background:repeating-linear-gradient(0deg,transparent 0 8px,#c7c8af 8px 9px)}
.gate-inside-copy{position:relative;color:#285c49;font-size:1rem;line-height:1.6;letter-spacing:.1em;margin-top:12%}
.gate-lion{position:absolute;width:34%;bottom:5%;z-index:6}.gate-lion-left{left:-1%}.gate-lion-right{right:-1%}.gate-lion img{display:block;width:100%;height:auto;position:relative;z-index:1;transform-origin:center 90%}
.gate-plinth{position:absolute;height:11%;width:66%;left:17%;bottom:2%;border-radius:6px;background:#d3d8c6;border-top:7px solid #e9eadc;box-shadow:0 4px 0 #b0bca6;z-index:0}
.gate-bubble{position:absolute;bottom:98%;left:50%;transform:translate(-50%,8px);opacity:0;padding:9px 16px;white-space:nowrap;font-size:1rem;font-weight:600;background:#fffdf5;border:1px solid #d6d8c3;border-radius:16px 16px 16px 3px;color:#285c49;box-shadow:0 4px 16px #285c4910}
.gate-ground{position:absolute;left:0;right:0;bottom:3%;height:7%;background:#cdd5bf;border-radius:50%;z-index:-1;opacity:.5}
.gate-scene .gate-caption{margin:0;color:#596b61;font-size:0.75rem;letter-spacing:.08em}.gate-caption span{padding:0 10px;color:#7d8a76}

/* Intrinsic form height keeps the architecture usable with large text or errors. */
.gate-building{position:relative;width:100%;height:auto;left:auto;bottom:auto;padding-top:76px}
.gate-roof{top:-2px;left:-12%;width:124%;height:118px}
.gate-plaque{top:62px;left:50%;width:max(60%,13rem);max-width:calc(100% - 12px);height:auto;min-height:3.625rem;transform:translateX(-50%);font-size:1.25rem;letter-spacing:.1em;white-space:nowrap}
.gate-frame{position:relative;inset:auto;min-height:0}
.gate-leaf{background:linear-gradient(100deg,#a54836,#983e2e);transition:transform .85s cubic-bezier(.22,.68,.2,1)}
.gate-leaf-right{background:linear-gradient(100deg,#983e2e,#a54836)}
.gate-panel{inset:5% 12%}.gate-studs{top:5%;gap:10px 8px}.gate-knocker{top:49%}.gate-leaf-left .gate-knocker{right:5%}.gate-leaf-right .gate-knocker{left:5%}
.gate-entry-slot{position:relative;z-index:4;transition:opacity .18s,visibility .18s}
.gate-step{position:relative;left:-2%;width:104%;height:12px;bottom:auto}
.gate-inside{padding-top:14%}.gate-inside-copy{font-size:1.25rem;margin-top:10%}
.gate-book{max-width:210px}
.gate-sun{width:45%;left:27.5%;top:4%}
.gate-wall{bottom:44px;height:29%;width:22%}
.gate-lion{width:190px;bottom:20px;z-index:6}.gate-lion-left{left:0}.gate-lion-right{right:0}
.gate-ground{bottom:12px;height:5%}.gate-scene .gate-caption{display:none}
.gate-form-panel{position:relative;padding:3.375rem 28px 16px;min-width:0;text-align:left;background:transparent;border:0;border-radius:0;box-shadow:none}
.gate-form-panel .gate-kicker{display:none}
.gate-login .gate-form-panel h2{font-size:1.5rem;line-height:1.4;text-align:center;color:#fff4da;margin:0 0 4px}
.gate-login #account-entry-copy{font-size:.8125rem;line-height:1.6;text-align:center;margin:0 0 16px;color:#fff4da}
.gate-login label{margin-top:12px;font-size:.875rem;font-weight:600;color:#fff4da;line-height:1.6}
.gate-login input{min-height:50px;margin-top:6px;font-weight:400;font-size:1rem;color:#243e36;background:#fffdf8}
.gate-login .password-control{margin-top:6px;background:#fffdf8;border-color:#eadfca}.gate-login .password-control input{margin:0;background:#fffdf8}
.gate-login .password-control .text-button{color:#285c49;margin:0 4px;min-height:44px}
.gate-login #parent-login-error{font-size:.875rem;line-height:1.6;margin:10px 0 0;padding:10px;border-radius:8px;background:#fff9e9;color:#a13a2d}
.gate-login #parent-login-error:empty{display:none}
.gate-login .primary{width:100%;min-height:52px;font-size:1rem;letter-spacing:.08em;margin-top:18px;background:#ffedc2;color:#243e36;border-color:#ffedc2}
.gate-login .primary:hover:not(:disabled){background:#fff7df}.gate-login .primary:active{transform:translateY(1px)}
.gate-login .gate-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;margin-top:8px}
.gate-login .gate-links .text-button{font-size:.8125rem;white-space:normal;max-width:100%;margin:0;min-height:44px;padding:8px 0;color:#fff4da}
.gate-login .gate-links .text-button:hover{background:#6d291f}
.gate-sound-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 16px;margin:4px auto 0}
.gate-login .gate-sound{position:relative;display:flex;align-items:center;gap:8px;margin:0;padding:8px 0 8px 38px;min-height:44px;color:#596b61;font-size:.75rem}
.gate-sound:before{content:"";position:absolute;left:0;width:22px;height:12px;border-radius:8px;background:#285c49;border:3px solid #285c49;box-sizing:content-box}
.gate-sound:after{content:"";position:absolute;left:14px;width:10px;height:10px;border-radius:50%;background:#fff}
.gate-sound[aria-pressed="false"]:before{background:#b2bcad;border-color:#b2bcad}.gate-sound[aria-pressed="false"]:after{left:4px}
.gate-sound-row>small{font-size:.75rem;color:#596b61}
.gate-login .gate-skip{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);width:min(320px,calc(100% - 40px));min-height:48px;padding:10px;color:#285c49;background:#fffdf8;margin:0;border:1px solid #285c49;border-radius:12px;box-shadow:0 5px 20px #285c491f;z-index:12;white-space:normal}
.gate-login .gate-skip[hidden]{display:none}
.gate-status{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.gate-footer{display:block;text-align:center;padding:8px 24px 16px;font-size:.75rem;color:#596b61;letter-spacing:.06em;border:0;background:transparent}
.gate-login :focus-visible{outline:3px solid #285c49;outline-offset:3px}.gate-entry-slot .text-button:focus-visible,.gate-entry-slot .primary:focus-visible{outline-color:#fff4da}
.gate-login[data-gate-state="opening"] .gate-entry-slot{opacity:0;visibility:hidden;pointer-events:none}
.gate-login[data-gate-state="opening"] .gate-leaf-left{transform:rotateY(108deg)}
.gate-login[data-gate-state="opening"] .gate-leaf-right{transform:rotateY(-108deg)}
.gate-login[data-gate-state="opening"] .gate-bubble{opacity:1;transform:translate(-50%,0);transition:opacity .2s,transform .2s}
.gate-login[data-gate-state="opening"] .gate-lion img{animation:gate-lion-nod .55s .08s ease both}
@keyframes gate-lion-nod{0%,100%{transform:translateY(0) rotate(0)}45%{transform:translateY(5px) rotate(-2deg)}}
@media(max-width:680px){
 .gate-topbar{padding:14px 20px 6px}.gate-topbar>img{width:26px;height:30px}
 .gate-layout{padding:0 12px 8px;max-width:430px}
 .gate-scene h1{font-size:1.5rem;margin:6px 0 8px}.gate-scene-heading>p{display:none}
 .gate-stage{padding:0 2px 88px}
 .gate-building{padding-top:68px}
 .gate-roof{width:108%;left:-4%;height:108px;top:-3px}
 .gate-plaque{top:53px;min-height:3.125rem;font-size:1.1rem;width:max(66%,13rem)}
 .gate-frame{border-width:7px;border-top-width:10px}
 .gate-form-panel{padding:2.875rem 18px 12px}
 .gate-login .gate-form-panel h2{font-size:1.375rem}
 .gate-login #account-entry-copy{font-size:.75rem;margin-bottom:12px}
 .gate-login label{margin-top:10px}
 .gate-login .primary{margin-top:14px}
 .gate-lion{width:112px;bottom:2px}.gate-lion-left{left:6px}.gate-lion-right{right:6px}
 .gate-bubble{font-size:.8125rem;padding:7px 10px;bottom:94%}
 .gate-ground{bottom:0;height:4%}.gate-wall{display:none}
 .gate-sun{top:0;width:74%;left:13%}
 .gate-knocker{width:18px;height:22px;border-width:3px}
 .gate-inside-copy{font-size:1rem}
 .gate-sound-row{gap:0 10px;margin:2px 0}.gate-sound-row>small{font-size:.6875rem}
 .gate-footer{font-size:.6875rem;padding-bottom:12px}
}
@media(max-width:360px){.gate-form-panel{padding-left:14px;padding-right:14px}.gate-lion{width:100px}.gate-stage{padding-bottom:78px}.gate-login .gate-links{gap:4px 8px}}
@media(prefers-reduced-motion:reduce){.gate-login *{animation:none!important;transition:none!important}.gate-login[data-gate-state="opening"] .gate-leaf{visibility:hidden}.gate-login[data-gate-state="opening"] .gate-bubble{opacity:1}}