/* Mimi Online's own title art and live HTML controls; gameplay HUD is untouched. */
body[data-screen="login"] .veil,
body[data-screen="menu"] .veil{
 background:linear-gradient(180deg,#09204024 0%,transparent 37%,#07172b30 67%,#07152dcc 100%),url('/assets/mimi-title-peach-v1.webp') center center/cover no-repeat;
}
body[data-screen="login"] .brand,
body[data-screen="menu"] .brand{
 z-index:3;left:50%;top:9%;transform:translateX(-50%);width:max-content;max-width:94vw;
 display:flex;flex-direction:column;align-items:center;gap:0;text-align:center;filter:drop-shadow(0 8px 9px #072a50a6);
}
body[data-screen="login"] .brand>div,
body[data-screen="menu"] .brand>div{display:flex;flex-direction:column;align-items:center}
body[data-screen="login"] .brand .crest,
body[data-screen="menu"] .brand .crest{width:64px;height:64px;border:2px solid #ffe3a1;background:radial-gradient(circle,#86eaff,#145ca8 55%,#091c50);box-shadow:0 0 0 5px #a9753eaa,0 0 22px #e7fbff;border-radius:50%;font-size:37px;color:white;margin-bottom:-9px}
body[data-screen="login"] .brand strong,
body[data-screen="menu"] .brand strong{font-family:Georgia,'Times New Roman',serif;font-size:clamp(53px,8vw,118px);font-weight:900;line-height:1;letter-spacing:-.06em;white-space:nowrap;color:#fff2bf;-webkit-text-stroke:1.5px #663716;text-shadow:0 3px 0 #a95f21,0 7px 0 #3d260f,0 10px 0 #102c5f,0 13px 10px #001537}
body[data-screen="login"] .brand em,
body[data-screen="menu"] .brand em{color:#ffe7a5}
body[data-screen="login"] .brand small,
body[data-screen="menu"] .brand small{display:inline-block;margin-top:14px;padding:6px 28px;border:1px solid #e5bb72;border-radius:100px;background:linear-gradient(90deg,#061c51ed,#143a79ed,#061c51ed);box-shadow:0 3px 0 #9c6c32;color:#fff6d8;font-size:clamp(12px,1.4vw,17px);letter-spacing:.04em}
body[data-screen="login"] .brand .beta,
body[data-screen="menu"] .brand .beta{position:absolute;right:-32px;top:4px;background:#102a5b;color:#fff2c3;border-color:#d6ae60;transform:rotate(8deg)}
.title-panel{position:absolute;inset:0;left:0;top:0;bottom:0;right:0;width:100%;max-height:none;transform:none;padding:0;overflow:visible;pointer-events:none;z-index:4}
.title-panel .title-main{position:absolute;left:50%;bottom:21%;transform:translateX(-50%);width:min(540px,90vw);text-align:center;pointer-events:auto}
.title-panel .eyebrow{display:block;margin-bottom:11px;color:#fff1ca;font-weight:700;font-size:clamp(15px,2vw,22px);text-shadow:0 2px 6px #081b40,0 0 18px #071a42}
.title-panel .title-start{display:block;width:100%;min-height:76px;border:3px solid #ffdc8b;border-radius:12px;background:linear-gradient(180deg,#1556a4,#0a2f78 65%,#061a4a);box-shadow:inset 0 0 0 4px #083063,inset 0 0 0 6px #74c5ff8c,0 8px 0 #704417,0 14px 24px #00142b9c;color:#fff5d3;font:700 clamp(25px,3.2vw,38px) Georgia,serif;text-shadow:0 2px 2px #001335;letter-spacing:.02em}
.title-panel .title-start:hover{background:linear-gradient(180deg,#2e7ed0,#12489b 65%,#092a67)}
.title-panel .title-start span{color:#f6d070}
.title-nav{position:absolute;bottom:max(3.5%,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;justify-content:center;gap:clamp(8px,1.5vw,22px);width:min(760px,94vw);pointer-events:auto}
.title-nav button{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;min-height:77px;padding:7px 8px;border:2px solid #e6bb75;border-radius:14px;background:linear-gradient(#204d85ee,#102d60f4);box-shadow:inset 0 0 0 3px #0b254d,0 5px 0 #765019,0 9px 13px #001a37a8;color:#fff1cd;font-size:clamp(12px,1.4vw,16px);font-weight:700;text-shadow:0 2px 2px #061a35}
.title-nav button:hover{background:linear-gradient(#2d70b6,#153c7c)}
.title-nav button span{font-size:clamp(22px,2.6vw,32px);line-height:1;color:#ffe49e}
#menu .title-nav{max-width:410px}
#menu .title-main small{color:#fff2d4;text-shadow:0 2px 6px #07142e;font-size:14px;margin-top:16px}
.title-dialog{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(410px,calc(100vw - 28px));max-height:min(90dvh,730px);overflow:auto;padding:24px;border:2px solid #f0ce8e;border-radius:20px;background:linear-gradient(155deg,#183e70,#0c244b 64%,#102b47);box-shadow:0 0 0 100vmax #06142bc2,0 26px 60px #000a,inset 0 0 0 4px #17325d;color:#fff2d6;text-align:left;pointer-events:auto;z-index:8}
.title-dialog h1{font:bold 29px Georgia,'Leelawadee UI',serif;color:#ffe2a0;margin:2px 0 8px;text-shadow:0 2px 2px #09112b}
.title-dialog p{color:#e7e7df;font-size:14px;margin:8px 0 14px}
.title-dialog label{color:#fff0cf}
.title-dialog input{background:#071c3e;color:white;border-color:#d7b37a}
.title-dialog form>button{width:100%}
.title-dialog form>button.primary{background:#e6b866}
.title-dialog small{font-size:12px;color:#d7dced}
.title-dialog>button:first-child{position:absolute;right:15px;top:12px;width:36px;height:36px;min-height:36px;padding:0;border-radius:50%;font-size:25px}
@media(max-width:700px){
 body[data-screen="login"] .brand,body[data-screen="menu"] .brand{top:9%;max-width:95vw}
 body[data-screen="login"] .brand strong,body[data-screen="menu"] .brand strong{font-size:clamp(43px,10vw,72px);-webkit-text-stroke:1px #5c3218}
 body[data-screen="login"] .brand .crest,body[data-screen="menu"] .brand .crest{width:45px;height:45px;font-size:26px}
 body[data-screen="login"] .brand small,body[data-screen="menu"] .brand small{margin-top:10px;padding:5px 12px;font-size:11px}
 body[data-screen="login"] .brand .beta,body[data-screen="menu"] .brand .beta{right:-13px;top:-11px;font-size:9px}
 .title-panel .title-main{bottom:31%;width:min(400px,90vw)}
 .title-panel .title-start{min-height:62px;font-size:25px}
 .title-nav{bottom:max(4%,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(2,1fr);width:min(410px,92vw);gap:10px}
 .title-nav button{min-height:58px;flex-direction:row;gap:9px;font-size:14px}
 .title-nav button span{font-size:23px}
 #menu .title-nav{width:min(410px,92vw)}
}
@media(max-height:540px){body[data-screen="login"] .brand,body[data-screen="menu"] .brand{top:2%}body[data-screen="login"] .brand strong,body[data-screen="menu"] .brand strong{font-size:clamp(35px,7vh,58px)}body[data-screen="login"] .brand .crest,body[data-screen="menu"] .brand .crest{display:none}body[data-screen="login"] .brand small,body[data-screen="menu"] .brand small{margin-top:3px}.title-panel .title-main{bottom:27%}.title-panel .title-start{min-height:54px}.title-nav{bottom:3%}.title-nav button{min-height:49px}.title-nav button span{font-size:21px}}