:root{--blue:#233ba9;--purple:#4226a0;--gold:#ffe37e;--lav:#d6c4ff;--cyan:#76e8ff;--box:#21145f;--line:#b49aff;color-scheme:dark}*{box-sizing:border-box}body{margin:0;min-width:320px;color:#fff;font-family:system-ui,-apple-system,"Noto Sans",Arial,sans-serif;background:radial-gradient(ellipse at 50% 0,#405ef5 0,#1c1555 70%,#100e3d 100%)}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #94e7ff;outline-offset:2px}.hidden{display:none!important}.site-shell{display:flex;justify-content:center;min-height:100vh}.game-frame{width:min(100%,520px);min-height:100vh;background:linear-gradient(160deg,rgba(15,32,115,.13),rgba(34,18,106,.38)),url(backdrop.webp) center/100% 100% no-repeat;position:relative;overflow:hidden;box-shadow:0 0 45px #05062388,0 0 5px #bdb8ff;isolation:isolate}.game-frame:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 28%,transparent 8%,rgba(15,38,174,.08) 75%)}.hero{position:relative;height:clamp(100px,21vw,140px);display:flex;align-items:center;justify-content:center}.header-image{display:block;width:100%;max-width:100%;height:auto;object-fit:contain;pointer-events:none}.avatar{position:absolute;right:3%;top:16%;height:45px;width:45px;border:2px solid #ffe69e;border-radius:50%;box-shadow:0 0 10px #e3aaff;background:linear-gradient(150deg,#6a3fae,#1d2785);color:#ffe6a3;font-size:24px;z-index:3}.stats-row{padding:0 2.6%;display:grid;grid-template-columns:1.1fr 1.1fr 1.06fr;gap:6px;margin:0 0 16px}.stat{min-width:0;height:44px;display:flex;justify-content:center;align-items:center;gap:3px;padding:0 5px;border-radius:40px;border:2px solid #e5a7eb;color:#fff;background:linear-gradient(180deg,#414fc5,#17155c 55%,#322078);box-shadow:inset 0 2px 4px #d9e6ff99,0 2px 0 #faac60,0 2px 12px #e6a8ff6b;font-size:clamp(9px,2.5vw,13px);font-weight:800;white-space:nowrap;text-shadow:0 2px 3px #030732}.stat b{font-size:clamp(10px,2.7vw,15px);white-space:nowrap}.medallion{display:flex;align-items:center;justify-content:center;min-width:28px;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 22%,#fffa91,#e7a11b 70%);border:2px solid #fff0b1;color:#fff;box-shadow:0 0 10px #ffc43a}.bnb-mark{font-size:21px;color:#facc35}.ratio{color:#ffe38b}.ratio b{font-size:clamp(9px,2.45vw,13px)}.demo-banner{margin:0 3% 12px;padding:7px 9px;background:#402170e6;border:1px solid #e8c790;border-radius:8px;text-align:center;color:#ffe69b;font-size:12px}.level-bar{margin:0 2.8% 16px;padding:10px 12px 10px 4px;display:grid;grid-template-columns:22% 1fr 18%;height:112px;align-items:center;gap:6px;border:2px solid #ab90ff;border-radius:23px;background:linear-gradient(180deg,#2d3ab1d9,#21145ebf);box-shadow:0 0 15px #62c6ff88,inset 0 1px 8px #a9c0ff70,0 3px 0 #b55add}.level-emblem{position:relative;height:92px;width:82px;margin:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2;background:linear-gradient(150deg,#a73eff,#391489 65%,#781de4);clip-path:polygon(50% 0,100% 18%,100% 76%,50% 100%,0 76%,0 18%);filter:drop-shadow(0 4px 4px #c595ff);text-shadow:0 3px 4px #320757}.level-emblem:before{content:"";position:absolute;inset:6px;background:linear-gradient(140deg,#913ce8,#392080);clip-path:inherit;z-index:-1}.level-emblem span{font-size:16px;font-weight:800}.level-emblem strong{font-size:37px}.level-goal{min-width:0}.goal-name{font-size:clamp(12px,3.4vw,18px);font-weight:900;color:#fff;text-shadow:1px 2px 4px #14145e}.goal-name span:last-child{white-space:nowrap;color:#fff3bd}.progress-track{height:20px;border:2px solid #e2b0ff;background:#252058;border-radius:50px;margin-top:12px;box-shadow:inset 0 2px 3px #170c3c;overflow:hidden}.progress-track span{display:block;height:100%;background:linear-gradient(#ffff99,#f7d339 50%,#f9a91a);border-radius:50px;box-shadow:0 0 12px #ffc442;transition:width .3s;width:0}.extra-goals{display:flex;flex-wrap:wrap;gap:3px;margin-top:5px;min-height:14px}.extra-goals span{font-size:9px;line-height:13px;padding:1px 4px;border:1px solid #8a83da;border-radius:6px;background:#171356aa}.level-steps{display:flex;flex-direction:column;align-items:center;line-height:1.12}.level-steps span{font-size:25px}.level-steps small{font-size:12px}.level-steps strong{font-size:32px;text-shadow:0 0 4px #f2bbff}.board-outline{position:relative;margin:0 2.8%;padding:8px 6px;border:3px solid #ffd993;border-radius:29px;background:linear-gradient(150deg,#282169,#1b1957 60%,#322374);box-shadow:0 0 0 2px #e186e7,0 0 18px #ffbafa,0 0 18px #9ebaff inset,0 0 30px #ffe0a330}.board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:2px}.tile{aspect-ratio:1/1;position:relative;min-width:0;min-height:0;padding:0;border:1px solid #4353b466;border-radius:9px;background:linear-gradient(140deg,#141a54,#263c85 65%,#1c1c62);display:flex;justify-content:center;align-items:center;touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .09s,background .12s}.tile:active,.tile.selected{background:#6b4ed8;outline:2px solid #ffe6a0;transform:scale(1.05);z-index:3}.tile img{width:108%;height:108%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 3px 4px #01093399) drop-shadow(0 0 4px #917bff66)}.tile.skin-diamond img{filter:drop-shadow(0 0 7px #7cf2ff) brightness(1.1) saturate(.8)}.tile.skin-gold img{filter:sepia(.2) drop-shadow(0 0 5px #ffe27b) brightness(1.18)}.tile.skin-galaxy img{filter:hue-rotate(24deg) drop-shadow(0 0 9px #fb8dff) saturate(1.4)}.tile.ice:after,.tile.wood:after,.tile.stone:after{content:'❄';position:absolute;bottom:0;right:0;font-size:11px;color:#ddf7ff;text-shadow:0 0 4px #fff}.tile.wood:after{content:'▦';color:#f4c97b}.tile.stone:after{content:'◆';color:#aaa}.board-spark{position:absolute;color:#ffe99b;font-size:28px;text-shadow:0 0 10px #ffffdb;pointer-events:none;animation:blink 2s ease-in-out infinite}.spark-one{left:4px;top:-15px}.spark-two{right:-3px;bottom:-13px;animation-delay:1s}@keyframes blink{50%{opacity:.2;transform:scale(.8)}}.hint{min-height:23px;text-align:center;font-size:12px;color:#ffedae;padding:4px 8px}.bottom-nav{display:flex;justify-content:space-between;gap:7px;padding:9px 3% 0;align-items:center}.bottom-nav button{height:47px;border-radius:36px;font-size:clamp(11px,3.4vw,18px);font-weight:900;white-space:nowrap}.bottom-nav button span:first-child{font-size:18px;margin-right:3px}.ghost-button{flex:1;border:2px solid #b7bbff;background:linear-gradient(180deg,#454fcb,#2b277e 55%,#5430a3);color:#fff;box-shadow:0 0 9px #bd8fff,inset 0 2px 5px #baceffbb}.gold-button{flex:1.52;color:#713010;border:2px solid #ffeb9c;background:linear-gradient(180deg,#fff8b8,#ffc83f 50%,#ed921d);box-shadow:0 2px 0 #ab4389,0 0 14px #ffcd72,inset 0 3px 3px #fff7ac}.graphic-footer{margin-top:10px}.graphic-footer img{display:block;width:100%;height:auto;object-fit:contain}.sub-footer{display:flex;justify-content:center;gap:20px;padding:8px 5px 22px;font-size:11px}.sub-footer button{border:0;color:#d8cef7;background:none}.veil{position:fixed;inset:0;background:#070927c7;backdrop-filter:blur(6px);z-index:20;display:flex;justify-content:center;align-items:center;padding:14px}.modal{position:relative;width:min(100%,445px);max-height:min(92vh,850px);overflow:auto;scrollbar-color:#8058ce #1e1c6b;border:2px solid #d5a6ff;border-radius:28px;background:linear-gradient(160deg,#3021a0f7,#1f1769 70%,#37209be8);box-shadow:0 0 0 4px #a459b852,0 0 45px #8a4cf7,inset 0 0 28px #6f7cff61;padding:17px 20px 26px}.modal:before{content:"";position:absolute;inset:0;background:url(backdrop.webp) center/cover;opacity:.18;pointer-events:none}.modal>*{position:relative}.modal-logo{display:block;width:80%;max-height:90px;object-fit:contain;margin:0 auto 5px}.close-modal{position:sticky;z-index:5;top:0;float:right;background:#322074;border:2px solid #dbb4ff;border-radius:50%;color:white;font-size:26px;width:36px;height:36px;line-height:26px}.modal h2{text-align:center;font-size:25px;text-shadow:0 2px 10px #c258ed;color:#ffeaa3;margin:14px 0}.modal p{line-height:1.6}.form-card{margin-top:18px;padding:20px 15px;border:2px solid #9f7aff;border-radius:24px;background:linear-gradient(140deg,#34279d88,#24115e8a);box-shadow:inset 0 0 10px #c4aaff64,0 0 13px #b97cff5a}.form-card label{display:block;font-size:13px;margin:12px 4px 6px;color:#e5dfff}.form-card input,.form-card select,.modal-input{width:100%;height:45px;background:#22216f;border:1.5px solid #9e8cff;border-radius:24px;padding:10px 17px;color:white;outline:none}.form-card input::placeholder{color:#bfb9e8}.form-card .gold-button,.modal .gold-button.action{width:100%;height:48px;display:block;margin-top:20px;font-size:18px}.text-links{display:flex;justify-content:center;gap:15px;margin-top:16px}.text-link{background:transparent;border:0;color:#ffe99b;text-decoration:underline;font-size:13px}.back-game{display:block;margin:15px auto 0;padding:10px 18px;color:#fff;border:1px solid #e6b5ff;border-radius:24px;background:#46309a}.panel{padding:13px 15px;background:linear-gradient(130deg,#3427a8,#201967);border:1.5px solid #a88aff;border-radius:16px;box-shadow:inset 0 0 7px #bc9aff66;margin:9px 0}.panel-row{display:flex;gap:12px;align-items:center;justify-content:space-between}.panel-label{font-size:14px}.panel-sub{font-size:11px;color:#d6cbff}.panel-value{color:#ffe87c;font-weight:900}.panel-link{width:100%;text-align:left;color:#fff;cursor:pointer}.panel-link span:last-child{margin-left:auto;color:#ffe67d}.grid-two{display:grid;grid-template-columns:1fr 1fr;gap:9px}.tabs{display:flex;gap:6px;margin-bottom:12px}.tabs button{flex:1;border:1px solid #b9a8ff;padding:9px 4px;color:#fff;border-radius:25px;background:#3c2c9f}.tabs button.active{color:#502900;background:linear-gradient(#fff6b9,#f4b228)}.notice{font-size:12px;color:#ffdfa3;background:#5a386baa;border:1px solid #b895a1;border-radius:12px;padding:10px;margin:8px 0}.soft{color:#d8d1fb;font-size:13px}.qr-wrap{display:flex;justify-content:center;margin:14px}.qr-wrap img{width:168px;background:white;border-radius:12px;padding:7px}.skin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.skin-item{border:1px solid #a98dff;border-radius:14px;padding:10px;text-align:center;background:#242071}.skin-item img{height:56px;width:56px;object-fit:contain}.skin-item button{border-radius:18px;border:1px solid #ffdf91;background:#6334b8;color:white;padding:5px 12px;margin-top:7px}.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:30;padding:12px 18px;border-radius:30px;background:#291c71;border:2px solid #fac967;color:white;box-shadow:0 0 20px #dbafff;max-width:90%;font-size:13px;text-align:center}.badge-small{padding:2px 6px;border:1px solid #aa92ff;border-radius:12px;font-size:11px;color:#ffedc1}.hidden-reward{font-size:12px;text-align:center;color:#efe6fb}.row-compact{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:8px 0}.row-compact .soft{font-size:12px}.modal ul{padding-left:21px;line-height:1.7}.modal h3{font-size:16px;color:#ffe6a2}.privacy-wrap{font-size:13px}@media(max-width:370px){.hero{height:95px}.stats-row{gap:3px}.stat{height:39px;padding:1px;font-size:9px}.stat b{font-size:10px}.level-bar{height:96px;padding:5px;grid-template-columns:23% 1fr 18%}.level-emblem{height:80px;width:70px}.level-emblem strong{font-size:29px}.level-emblem span{font-size:12px}.level-steps strong{font-size:27px}.level-steps span{font-size:20px}.board-outline{padding:5px 4px}.tile{border-radius:6px}.bottom-nav button{height:41px;font-size:11px}.gold-button span:first-child{display:none}}


/* V3.1 FOUR-SCREEN REFERENCE RETHEME — visual overrides only. */
:root{--frame-blue:#2748b5;--glass:#21156b;--gold:#ffe37a}
html{background:#131d70}body{background:radial-gradient(circle at 50% -10%,#2558c6 0,#253687 52%,#1d155d 100%);}
.site-shell{padding:8px 7px 12px;align-items:flex-start}
.game-frame{width:min(100%,445px);min-height:0;border-radius:34px;border:2px solid #aaa8ff;background:linear-gradient(180deg,#254dc19a,#22166d7e 62%,#252ba28c),url(backdrop.webp) center/100% 100% no-repeat;box-shadow:inset 0 0 0 2px #8b85ff65,0 0 14px #8099ff,0 16px 36px #0c0d488f;}
.game-frame:after{content:"";position:absolute;inset:2px;border-radius:32px;box-shadow:inset 0 0 16px #b5b9ff4a;pointer-events:none;z-index:2}
.hero{height:clamp(95px,26vw,120px);align-items:flex-start;padding-top:4px}
.header-image{width:100%;height:100%;object-fit:contain;object-position:50% 32%}
.stats-row{margin:-2px 11px 12px;padding:0;gap:5px;grid-template-columns:1.13fr 1.07fr 1.07fr}
.stat{height:39px;padding:0 4px;border:1.5px solid #f6b9f2;box-shadow:inset 0 1px 4px #fff8,0 0 7px #b476ff,0 2px 0 #b96e99;font-size:clamp(8px,2.3vw,12px);background:linear-gradient(180deg,#404bc3 0%,#26206e 60%,#3c2791 100%)}
.stat b{font-size:clamp(9px,2.5vw,13px)}
.medallion{width:27px;height:27px;min-width:27px;font-size:16px;background:radial-gradient(circle at 33% 25%,#fffdb8 0,#ffd54f 37%,#ce7a0f 92%);box-shadow:0 0 8px #ffd343}
.bnb-mark{font-size:19px;color:#ffda46;text-shadow:0 0 4px #e5a420}
.demo-banner{position:relative;z-index:2;margin:0 4% 7px;padding:3px 8px;border-radius:15px;background:#221762b9;border-color:#847ad1;color:#e6d8ff;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:16px}
.level-bar{margin:0 11px 13px;padding:4px 9px 4px 2px;height:85px;border-radius:21px;grid-template-columns:24% 1fr 18%;background:linear-gradient(180deg,#323fadcf,#23166acb);border:2px solid #9b8afa;box-shadow:0 1px 2px #f398e9,inset 0 1px 7px #d6caff88,0 0 13px #63ccff8c;gap:4px}
.level-emblem{width:77px;height:79px;filter:drop-shadow(0 0 9px #ea88ff);background:linear-gradient(125deg,#e56dff,#8036f5 33%,#3c1b94 68%,#c654ff);clip-path:polygon(50% 0,98% 17%,98% 77%,50% 100%,2% 77%,2% 17%)}
.level-emblem:before{inset:5px;background:linear-gradient(130deg,#cc66f6,#6931c8 35%,#2b166d 90%)}
.level-emblem span{font-size:14px}.level-emblem strong{font-size:31px}
.goal-name{font-size:clamp(11px,3.1vw,18px)}
.progress-track{height:17px;margin-top:9px;background:#2a165b;border-color:#d69af3;box-shadow:inset 0 0 6px #080c3e,0 0 5px #9665eb}
.progress-track span{background:linear-gradient(180deg,#fffcb4 0,#ffe54b 42%,#ec991f 95%);box-shadow:0 0 14px #ffef4e}
.level-steps span{font-size:20px}.level-steps small{font-size:11px}.level-steps strong{font-size:30px}
.board-outline{margin:0 11px;padding:7px 6px;border-radius:23px;border:2px solid #fff3b5;box-shadow:0 0 0 2px #e68fed,0 0 20px #eda4ff,0 0 20px #ffe47da6,inset 0 0 13px #99b5ff80;background:linear-gradient(135deg,#36308d,#1d1c64 65%,#33277c)}
.board{gap:2px}.tile{border-radius:8px;background:linear-gradient(145deg,#141952,#293978 62%,#17195a);border:1px solid #526bc855;}
.tile img{width:111%;height:111%;filter:drop-shadow(0 3px 2px #07072c) drop-shadow(0 0 3px #8e91ff92) saturate(1.12)}
.hint{height:17px;min-height:17px;padding:1px 8px;line-height:15px;font-size:10px;color:#ded6ff}
.bottom-nav{padding:9px 12px 0;gap:8px}.bottom-nav button{height:43px;border-radius:27px;font-size:clamp(11px,3.2vw,15px);letter-spacing:.2px;}
.ghost-button{border:1.5px solid #b4c9ff;background:linear-gradient(180deg,#5765df,#3436a9 45%,#3b1d85 100%);box-shadow:inset 0 1px 5px #cfddff,0 0 11px #aaa1ff,0 2px 0 #c279e7}
.gold-button{font-weight:900;border:2px solid #fff1ad;background:linear-gradient(180deg,#fffbbd 0%,#ffe65e 27%,#ffc22b 64%,#ff9c19 100%);text-shadow:0 1px 0 #fff9abcc;box-shadow:0 2px 0 #c86537,0 0 15px #ffcf53,inset 0 3px 3px #fffad1}
.graphic-footer{margin:7px -1px 0}.graphic-footer img{width:100%}
.sub-footer{padding:3px 8px 8px}.sub-footer button{font-size:9px;color:#cdc5ed}
.avatar{top:44px;right:9px;width:39px;height:39px;font-size:0;background:url(avatar_reference.webp) center/cover;border:2px solid #ffe5a1;box-shadow:0 0 10px #ffe29c,0 0 7px #d488fc}
/* Full-height themed screens for login, register, and the signed-in account. */
.veil.page-mode{padding:0;background:#151b64;backdrop-filter:none;align-items:flex-start;overflow:auto}
.veil.page-mode .modal{width:min(100%,440px);min-height:100dvh;max-height:none;margin:0 auto;padding:0 15px 185px;overflow:visible;border-radius:0;border:0;box-shadow:inset 0 0 0 1px #b6a7fc70;background:linear-gradient(180deg,#233eb485 0%,#3725ad9c 46%,#2540b17b 100%),url(backdrop.webp) center/100% 100% no-repeat;isolation:isolate}
.veil.page-mode .modal:before{inset:auto 0 0;height:158px;background:url(footer.webp) center bottom/100% auto no-repeat;opacity:1;z-index:-1;pointer-events:none}
.veil.page-mode .modal:after{content:"";position:absolute;inset:0;border-left:2px solid #abafff;border-right:2px solid #abafff;box-shadow:inset 0 0 22px #7da6ff88,0 0 15px #7974f9;pointer-events:none;z-index:-2}
.veil.page-mode .modal-logo{width:calc(100% + 30px);max-height:none;height:143px;object-fit:contain;margin:0 -15px 2px}
.veil.page-mode .close-modal{position:absolute;top:22px;right:16px;width:31px;height:31px;font-size:20px;line-height:22px;opacity:.84;box-shadow:0 0 8px #cc94ff}
.veil.page-mode .modal h2{font-size:23px;color:#fff;text-shadow:0 0 12px #ecacff;margin:0 0 12px}
.auth-crest{position:relative;height:66px;width:110px;margin:0 auto -15px;z-index:2;display:flex;align-items:center;justify-content:center;flex-direction:column;filter:drop-shadow(0 0 12px #a877ff)}
.auth-crest:before{content:"";position:absolute;inset:0 17px;background:linear-gradient(135deg,#df9dff,#8a49ed 40%,#29137b);clip-path:polygon(50% 0,100% 20%,94% 76%,50% 100%,6% 76%,0 20%);border-radius:10px;z-index:-1}
.auth-crest:after{content:"❧　　❧";position:absolute;white-space:nowrap;font-size:37px;line-height:1;color:#ffd763;text-shadow:0 1px 4px #bb7936;z-index:-2}
.auth-crest .auth-symbol{font-size:29px;line-height:28px;color:#fff4cc;text-shadow:0 0 4px #fff}
.auth-crest strong{font-size:12px;white-space:nowrap;text-shadow:0 1px 3px #210d6c}
.veil.page-mode .form-card{margin:0 6px;padding:57px 17px 20px;border:2px solid #f3b4fa;border-radius:29px;background:linear-gradient(135deg,#4540bea6,#261977eb 67%,#4533a9b3);box-shadow:inset 0 0 15px #cfb1ffa8,0 0 10px #c67eff,0 0 25px #7795ff6a}
.veil.page-mode .form-card label{display:none}
.veil.page-mode .form-card input{height:49px;margin:0 0 15px;padding:12px 21px 12px 44px;border:1.5px solid #a99dff;background:linear-gradient(180deg,#32349e,#25217d);box-shadow:inset 0 2px 7px #16145f80;color:#fff;font-size:15px}
.veil.page-mode .form-card input::placeholder{color:#f1e8ff;opacity:.94}
.veil.page-mode .form-card .gold-button.action{border-radius:30px;height:52px;margin-top:24px;font-size:20px}
.veil.page-mode .text-links{margin:19px 0 0;gap:9px;flex-wrap:wrap;align-items:center}
.veil.page-mode .text-link{font-size:13px;text-decoration:none;color:#fff7cc;font-weight:650}
.veil.page-mode .back-game{margin:22px auto 0;padding:10px 35px;background:linear-gradient(180deg,#5555c5,#2c207b);border:2px solid #c29dff;border-radius:28px;box-shadow:0 0 9px #be7cff;color:#fff;font-weight:700}
.auth-input-wrap{position:relative}.auth-input-wrap:before{content:"✉";position:absolute;left:16px;top:10px;color:#e6dcff;font-size:21px;z-index:2}.auth-input-wrap.password:before{content:"♙";font-size:23px}
.veil.page-mode .auth-form-title{text-align:center;margin:0 0 14px;font-size:19px;font-weight:900;text-shadow:0 1px 6px #e29ff7}
/* Signed-in screen adheres to reference's menu-oriented account card design. */
.profile-hero{display:flex;align-items:center;gap:13px;padding:12px 12px 10px;margin:4px 1px 12px;background:linear-gradient(140deg,#5543c2d9,#2a267dd9);border:2px solid #da9bff;border-radius:19px;box-shadow:inset 0 1px 9px #b6d6ff99,0 0 14px #e18aff}
.profile-portrait{height:64px;width:64px;min-width:64px;background:url(avatar_reference.webp) center/cover;border:2px solid #ffd782;box-shadow:0 0 12px #ffa9ff;border-radius:50%}
.profile-ident{overflow:hidden;flex:1}.profile-ident strong{font-size:17px;display:block;color:#fff;text-shadow:0 2px 5px #5125c0}.profile-ident small{font-size:11px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#e3d7ff;margin-top:3px}
.profile-stats{display:flex;gap:7px;justify-content:space-between;padding-top:9px}.profile-stats span{display:block;font-size:12px;font-weight:800;color:#ffe38a}
.profile-menu{display:flex;flex-direction:column;gap:7px}
.profile-menu .panel{margin:0;padding:9px 12px;min-height:53px;border:1.5px solid #af88f4;border-radius:15px;background:linear-gradient(180deg,#41369fcf,#25206eeb);box-shadow:inset 0 1px 6px #c4b8ff75,0 0 7px #906dff70}
.profile-menu .panel-link span:last-child{font-size:22px;font-weight:300;color:#fff}
.profile-menu .menu-icon{width:34px;font-size:26px;display:inline-flex;justify-content:center;align-items:center;margin-right:8px;filter:drop-shadow(0 0 4px #c792ff)}
.profile-menu .menu-title{font-weight:800;font-size:15px}.profile-menu .menu-sub{font-size:10px;color:#d7c6ff;margin-top:2px}
.profile-menu .panel-link .menu-meta{display:flex;align-items:center;flex:1;min-width:0}
.profile-corner{position:absolute;right:17px;top:144px;color:#f5d985;font-size:12px}
.veil.page-mode .profile-balance{margin:3px 2px 12px;padding:9px 13px;border:1.5px solid #e6a6f6;border-radius:18px;box-shadow:0 0 10px #a176ef;background:#362c9ce1}
.veil.page-mode .profile-balance .panel-value{font-size:16px}
.veil.page-mode .panel{border-color:#b392fa;background:linear-gradient(160deg,#3b35a5df,#221867ee);box-shadow:inset 0 2px 7px #aba1ff66,0 0 7px #9a65fc55}
@media(max-width:365px){.site-shell{padding:5px}.hero{height:94px}.stats-row{margin-bottom:9px;gap:3px}.stat{height:35px;font-size:9px}.stat b{font-size:9px}.level-bar{height:78px}.level-emblem{height:73px;width:70px}.level-emblem strong{font-size:27px}.bottom-nav{gap:4px}.bottom-nav button{font-size:10px;height:42px}.veil.page-mode .modal-logo{height:126px}}

/* V3.2: user provided four-screen reference: fixed matching proportions / no bleed-through */
body:has(.veil.page-mode:not(.hidden)) .site-shell { visibility:hidden; }
.veil.page-mode{background:#2b349c;overflow-y:auto;overscroll-behavior:contain}
.veil.page-mode .modal{background:linear-gradient(180deg,#2d3dba 0%,#3837a7 50%,#2738a7 100%);padding-bottom:158px;min-height:100dvh;box-shadow:inset 0 0 0 2px #8b8eff95,0 0 18px #8c93ff;border-left:1px solid #989cff;border-right:1px solid #989cff}
.veil.page-mode .modal:before{content:"";position:absolute;inset:auto 0 0;height:145px;z-index:0;background:url(footer.webp) center bottom / 100% auto no-repeat;opacity:1;pointer-events:none}
.veil.page-mode .modal:after{z-index:0;pointer-events:none}
.veil.page-mode .modal>*{position:relative;z-index:1}
.veil.page-mode .modal-logo{height:168px;margin:15px -15px 0;object-fit:contain;object-position:center}
.veil.page-mode .auth-crest{margin-top:12px;margin-bottom:-15px;height:66px}
.veil.page-mode .form-card{padding:64px 17px 32px;min-height:354px;background:linear-gradient(160deg,#3e36aa 0%,#231567 77%,#34229c 100%)}
.veil.page-mode .form-card input{height:51px;margin-bottom:20px;background:linear-gradient(180deg,#3434a3,#25227c);font-size:15px}
.veil.page-mode .form-card .gold-button.action{height:54px;margin-top:29px}
.veil.page-mode .form-card .text-links{margin-top:21px}
.veil.page-mode .back-game{margin-top:24px;box-shadow:inset 0 1px 7px #d8beff,0 0 10px #e6a1ff}
/* inner account menus: exactly eight primary rows, secondary features collapsed */
.veil.page-mode:has(.profile-hero) .modal-logo{height:126px;margin-top:0;margin-bottom:6px}
.veil.page-mode:has(.profile-hero) .profile-hero{margin:0 0 10px;padding:9px 10px 8px;min-height:111px;align-items:flex-start;flex-wrap:wrap;gap:7px}
.veil.page-mode:has(.profile-hero) .profile-ident{padding-top:4px}
.veil.page-mode:has(.profile-hero) .profile-stats{flex-basis:100%;width:100%;border-top:1px solid #aea9ff55;padding-top:7px;display:flex;gap:4px}
.veil.page-mode:has(.profile-hero) .profile-stats span{font-size:12px;font-weight:800;white-space:nowrap;background:#251c7cab;padding:4px 7px;border:1px solid #a996fc;border-radius:16px}
.veil.page-mode:has(.profile-hero) .profile-menu{gap:7px}
.veil.page-mode:has(.profile-hero) .profile-menu .panel{min-height:48px;padding:7px 10px;border-radius:14px}
.veil.page-mode:has(.profile-hero) .menu-title{font-size:14px}
.veil.page-mode:has(.profile-hero) .menu-sub{font-size:9px}
.veil.page-mode:has(.profile-hero) .menu-icon{font-size:23px;min-width:30px;width:30px;margin-right:7px}
.profile-more{border:1px solid #ac91ffab;border-radius:14px;margin-top:7px;padding:9px 6px 4px;background:#211a6aa8}
.profile-more summary{color:#fbe7b5;text-align:center;cursor:pointer;font-weight:700;font-size:13px;padding:3px}
.profile-more .panel{margin-top:7px!important}
@media(max-width:365px){.veil.page-mode .modal-logo{height:150px}.veil.page-mode .form-card{padding-top:53px;min-height:325px}.veil.page-mode .form-card input{margin-bottom:14px}.veil.page-mode .auth-crest{margin-top:8px}}

/* Final screenshot alignment: stretch top fantasy artwork to the reference aspect ratio. */
.hero{height:106px}
.header-image{height:100%;object-fit:fill;object-position:center}
.veil.page-mode .modal-logo{height:135px;margin:20px -15px 25px;object-fit:fill;object-position:center}
.veil.page-mode .auth-crest{margin-top:12px}
.veil.page-mode .modal:before{height:108px;background:url(footer_clean.webp) center bottom / 100% 100% no-repeat}
@media(max-width:365px){.hero{height:96px}.veil.page-mode .modal-logo{height:125px;margin-top:16px;margin-bottom:20px}}

/* Keep menu text beside its icon rather than auto-pushing it to the right. */
.profile-menu .panel-link .menu-meta>span:last-child{margin-left:0!important;color:#fff!important;font-size:inherit!important;font-weight:400!important;line-height:1.15;flex:1;min-width:0}
.profile-menu .panel-link .menu-title{font-size:14px!important;font-weight:800!important;color:#fff!important}
.profile-menu .panel-link .menu-sub{font-size:9px!important;font-weight:400!important;color:#d7c6ff!important}
.profile-menu .panel-link>span:last-child{font-size:22px!important;color:#fff!important;margin-left:auto!important}

/* Final screenshot alignment: stretch top fantasy artwork to the reference aspect ratio. */
.hero{height:106px}
.header-image{height:100%;object-fit:fill;object-position:center}
.veil.page-mode .modal-logo{height:135px;margin:20px -15px 25px;object-fit:fill;object-position:center}
.veil.page-mode .auth-crest{margin-top:12px}
.veil.page-mode .modal:before{height:108px;background:url(footer_clean.webp) center bottom / 100% 100% no-repeat}
@media(max-width:365px){.hero{height:96px}.veil.page-mode .modal-logo{height:125px;margin-top:16px;margin-bottom:20px}}

.veil.page-mode:has(.profile-hero) .modal-logo{height:112px}
.veil.page-mode:has(.profile-hero) .profile-menu{gap:5px}
.veil.page-mode:has(.profile-hero) .profile-menu .panel{min-height:45px;padding:5px 9px}

/* Final screenshot alignment: stretch top fantasy artwork to the reference aspect ratio. */
.hero{height:106px}
.header-image{height:100%;object-fit:fill;object-position:center}
.veil.page-mode .modal-logo{height:135px;margin:20px -15px 25px;object-fit:fill;object-position:center}
.veil.page-mode .auth-crest{margin-top:12px}
.veil.page-mode .modal:before{height:108px;background:url(footer_clean.webp) center bottom / 100% 100% no-repeat}
@media(max-width:365px){.hero{height:96px}.veil.page-mode .modal-logo{height:125px;margin-top:16px;margin-bottom:20px}}