:root{--bg:#0d0a14;--panel:#171122;--panel2:#1f1830;--line:#33264d;--txt:#ece6f6;--dim:#9a8db3;--acc:#ff3d81;--acc2:#8a5cff;--ok:#52d6a0}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);font:15px/1.5 "Segoe UI",system-ui,sans-serif}
#app{min-height:100vh;display:flex;flex-direction:column}
button{font:inherit;color:var(--txt);background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 12px;cursor:pointer;transition:.12s}
button:hover{border-color:var(--acc);background:#2a1f42}
button.on,button.primary{background:linear-gradient(135deg,var(--acc),var(--acc2));border-color:transparent;color:#fff}
.dim{color:var(--dim)}.small{font-size:12.5px}
em{color:#c9b6ff}
/* title + create */
.title{margin:auto;text-align:center;padding:40px 20px;max-width:640px}
.title h1{display:inline-block;padding:0 .14em .12em 0;line-height:1.2;font-size:clamp(34px,7vw,64px);margin:0 0 8px;letter-spacing:1px;background:linear-gradient(135deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.tbtns{display:flex;gap:12px;justify-content:center;margin:26px 0}.tbtns button{padding:12px 26px;font-size:17px}
.create{max-width:900px;margin:0 auto;padding:24px}
.cols{display:grid;grid-template-columns:240px 1fr;gap:24px}
.form label{display:block;margin-bottom:12px}.form input{width:100%;padding:8px;background:var(--panel);border:1px solid var(--line);border-radius:8px;color:var(--txt);font:inherit}
.row{display:flex;gap:8px;align-items:center;margin:10px 0}.row.wrap{flex-wrap:wrap}.row>span:first-child{width:90px;color:var(--dim)}
.sw{width:28px;height:28px;border-radius:50%;border:2px solid var(--line);cursor:pointer}.sw.on{border-color:#fff}
/* header */
header{display:flex;align-items:center;gap:18px;padding:8px 16px;background:var(--panel);border-bottom:1px solid var(--line)}
.logo{font-weight:700;background:linear-gradient(135deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.clock{flex:1;text-align:center;color:var(--dim)}
.stats{display:flex;gap:16px;align-items:center}.en i{display:inline-block;width:90px;height:8px;background:#2b2140;border-radius:5px;vertical-align:middle}.en b{display:block;height:100%;background:var(--ok);border-radius:5px}
main{flex:1;display:grid;grid-template-columns:1fr 360px;min-height:0}
.stage{padding:18px 22px;display:flex;flex-direction:column;gap:12px;background-size:cover;background-position:center;overflow:auto;height:calc(100vh - 49px)}
.locname{font-size:18px;font-weight:600}.mini{font-size:11px;padding:2px 8px;margin-left:8px;opacity:.6}
.who{display:flex;gap:14px;flex-wrap:wrap}.wc{text-align:center}.wn{font-size:13px;color:var(--dim)}
.text{background:#120d1dcc;border:1px solid var(--line);border-radius:12px;padding:12px 16px}.text p{margin:6px 0}
.btns{display:flex;flex-wrap:wrap;gap:8px}
.card{background:#0f0a19;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:6px}
.fb{font-size:12.5px;padding:2px 8px;border-radius:10px}.fb.win{background:#1c3d31}.fb.meh{background:#3a3520}.fb.fail{background:#44202c}
.bar{display:flex;align-items:center;gap:8px;font-size:12px;margin:3px 0}.bar span{width:70px;color:var(--dim)}.bar i{flex:1;height:7px;background:#2b2140;border-radius:4px;overflow:hidden}.bar b{display:block;height:100%}
.bar .b{background:#4aa3ff}.bar .p{background:#ff3d81}.bar .r{background:#ff5252}.bar .y{background:#ffc94a}.bar .g{background:#52d6a0}
/* sidebar */
aside{background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;height:calc(100vh - 49px)}
.tabs{display:flex;border-bottom:1px solid var(--line)}.tabs button{flex:1;border:0;border-radius:0;background:transparent;padding:10px 4px}.tabs button.on{background:var(--panel2);color:var(--acc);border-bottom:2px solid var(--acc)}
.tabbody{padding:10px;overflow:auto;flex:1}
.badge{background:var(--acc);border-radius:9px;padding:0 6px;font-size:11px}
.prow{display:flex;gap:10px;align-items:center;padding:6px;border-radius:8px;cursor:pointer}.prow:hover{background:var(--panel2)}
.hearts{color:var(--acc);font-size:11px}
.map{display:grid;grid-template-columns:1fr 1fr;gap:8px}.map button{text-align:center;padding:10px 4px}
.msg{background:var(--panel2);border-radius:8px;padding:8px 10px;margin:6px 0}
h4{margin:14px 0 6px;color:var(--dim);font-size:12px;text-transform:uppercase;letter-spacing:1px}
.you{display:flex;gap:12px;align-items:center}
/* portraits */
.pimg{border-radius:12px;overflow:hidden;background:#1a1328;border:1px solid var(--line);flex:none}
.pimg img,.pimg svg{display:block;width:100%;height:100%;object-fit:cover}
.pimg.sm{width:44px;height:55px}.pimg.mid{width:88px;height:110px}.pimg.big{width:140px;height:175px}
.prev .pimg.big{width:220px;height:275px}
.exwrap{max-width:320px}.ex,.exph{display:block;width:100%;max-width:320px;border-radius:10px;border:1px solid var(--line)}
.pill{display:inline-block;background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:2px 10px;margin:2px;cursor:pointer}.pill:hover{border-color:var(--acc)}
.exq{width:100%;padding:8px;background:var(--panel);border:1px solid var(--line);border-radius:8px;color:var(--txt);font:inherit;margin:6px 0}
.exres{display:flex;flex-wrap:wrap;gap:4px;min-height:8px}.mini2{padding:3px 10px;font-size:13px}
@media(max-width:900px){main{grid-template-columns:1fr}.stage,aside{height:auto}.cols{grid-template-columns:1fr}}
.pimg img.tall{object-position:50% 0;transform:scale(2.1);transform-origin:50% 6%}
/* the phone */
.phonebtn{font-size:18px;padding:2px 10px;border-radius:16px}.phonebtn.on{border-color:var(--acc)}
#phone{position:fixed;right:22px;bottom:14px;z-index:50;display:none}
#phone.show{display:block;animation:phup .22s ease-out}
@keyframes phup{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.phframe{position:relative;width:340px;height:660px;max-height:calc(100vh - 70px);background:#06060a;border:9px solid #1d1b26;border-radius:44px;box-shadow:0 18px 60px #000c,0 0 0 2px #3a3650;display:flex;flex-direction:column;overflow:hidden}
.phnotch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:110px;height:22px;background:#06060a;border-radius:0 0 16px 16px;z-index:3}
.phstatus{display:flex;justify-content:space-between;padding:8px 22px 4px;font-size:12px;color:#d6cff0;z-index:2}
.phscr{flex:1;overflow:hidden;display:flex;flex-direction:column;background:#120d1d;min-height:0}
.phscr.phhome{background:linear-gradient(160deg,#2a1450,#0f1730 55%,#3a1030)}
.phbar{height:26px;display:flex;align-items:center;justify-content:center;background:#06060a}
.homebtn{width:110px;height:5px;border-radius:3px;background:#8a82a8;border:0;padding:0}
.phclose{position:absolute;top:4px;right:10px;width:24px;height:24px;padding:0;border-radius:50%;font-size:12px;z-index:4;background:#1d1b26}
.phclock{text-align:center;font-size:44px;font-weight:300;padding:34px 0 18px;color:#fff;line-height:1}.phclock small{display:block;font-size:13px;color:#b9b0d6;margin-top:6px}
.appgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 6px;padding:8px 14px}
.app{display:flex;flex-direction:column;align-items:center;position:relative}.an{font-size:11px;color:#d6cff0;margin-top:4px}
.appbtn{position:relative;width:54px;height:54px;border-radius:14px;padding:0;background:linear-gradient(135deg,#3a2a66,#1d1b3a);border:1px solid #4a3f78;font-size:26px}
.appbtn .badge{position:absolute;top:-6px;right:-6px}
.aphead{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line);background:#171122}.aphead b{flex:1;text-align:center}
.abk{padding:2px 10px;font-size:20px;border-radius:14px}
.chathead{justify-content:flex-start}.chathead .pimg.sm{width:36px;height:44px}.who2{line-height:1.2;flex:1}
.phlist{overflow:auto;flex:1}.ph-row{border-bottom:1px solid #241a3a;border-radius:0}.udot{color:var(--acc);font-size:10px}
.chatlog{flex:1;overflow:auto;padding:10px 10px 4px;display:flex;flex-direction:column;gap:6px;min-height:0}
.bub{max-width:80%;padding:7px 11px;border-radius:16px;font-size:14px;line-height:1.35;word-wrap:break-word}
.bub.me{align-self:flex-end;background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;border-bottom-right-radius:4px}
.bub.them{align-self:flex-start;background:#2a2140;border-bottom-left-radius:4px}
.bt{display:block;font-size:10px;opacity:.6;margin-top:3px}
.bub .ex,.bub .exph{max-width:210px;margin-top:6px;border-radius:10px}
.sysmsg{align-self:center;text-align:center;font-size:12px;color:var(--dim);max-width:90%}
.composer{border-top:1px solid var(--line);background:#171122;padding:6px;max-height:42%;overflow:auto}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}.chips button{font-size:12.5px;padding:5px 10px;border-radius:14px}.chips .back{opacity:.7}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px;overflow:auto}.tile{height:84px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:24px}.tile small{font-size:11px}
.phphoto{padding:8px;overflow:auto}.phphoto .ex,.phphoto .exph{width:100%}
@media(max-width:700px){#phone{right:0;left:0;bottom:0;display:none}#phone.show{display:flex;justify-content:center}.phframe{max-height:calc(100vh - 20px)}}
.phscr.phhome{position:relative;background:#120d1d}
.wpimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.wpshade{position:absolute;inset:0;background:linear-gradient(#0008,#0003 40%,#0009);z-index:1}
.phhome .phclock,.phhome .appgrid{position:relative;z-index:2}
.wpgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:10px;overflow:auto}
.wpopt{display:flex;flex-direction:column;gap:5px}.wpthumb{position:relative;height:130px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}.wpthumb .wpimg{position:absolute}
.wpopt button,.wpup{font-size:12.5px;padding:5px 8px}
.typing{display:flex;gap:4px;align-items:center;padding:10px 14px}.typing i{width:7px;height:7px;border-radius:50%;background:#9a8db3;animation:tp 1s infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
#toasts{position:fixed;top:56px;right:16px;z-index:60;display:flex;flex-direction:column;gap:8px}
.toast{background:#241a3d;border:1px solid var(--acc);border-radius:12px;padding:8px 12px;min-width:200px;max-width:280px;font-size:13px;cursor:pointer;box-shadow:0 6px 24px #000a;animation:phup .25s ease-out}
.memeimg{display:block;width:100%;max-width:230px;border-radius:10px;margin-top:4px}
.rstat{align-self:flex-end;font-size:11px;color:var(--dim);margin:-3px 4px 0 0}

/* ---- mini-games ---- */
#mini{position:fixed;inset:0;z-index:9000;background:rgba(5,3,12,.86);display:flex;align-items:center;justify-content:center;padding:16px}
.minibox{width:min(420px,100%);background:#15101f;border:1px solid #3a2a5c;border-radius:16px;padding:20px;text-align:center;box-shadow:0 10px 60px #000a}
.minititle{font-size:20px;font-weight:700}.minisub{margin:4px 0 14px;color:#b9a9d6;font-size:14px}.minihint{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:99px;background:#2a1f45;color:#ffb3d0;font-size:12px}
.mbar{position:relative;height:38px;border-radius:19px;background:#241a3d;overflow:hidden;margin:6px 0 12px}
.mzone{position:absolute;top:0;bottom:0;background:rgba(70,220,140,.45);border-left:2px solid #46dc8c;border-right:2px solid #46dc8c;transition:left .15s}
.mmark{position:absolute;top:0;bottom:0;width:6px;margin-left:-3px;background:#fff;box-shadow:0 0 10px #fff}
.mmark.hit{background:#46dc8c;box-shadow:0 0 14px #46dc8c}.mmark.miss{background:#ff4d6d;box-shadow:0 0 14px #ff4d6d}
.mdots{display:flex;gap:8px;justify-content:center;margin:10px 0}.mdots i{width:12px;height:12px;border-radius:50%;background:#3a2a5c}.mdots i.ok{background:#46dc8c}.mdots i.no{background:#ff4d6d}
.mgo{font-size:17px;padding:10px 26px;border-radius:12px;border:0;background:#ff3d81;color:#fff;cursor:pointer}.mgo small{opacity:.7}
.qarrow{font-size:64px;line-height:90px;height:90px;color:#fff;transition:color .1s}.qarrow.ok{color:#46dc8c}.qarrow.no{color:#ff4d6d}
.qtime{height:8px;border-radius:4px;background:#241a3d;margin:6px 0 12px;overflow:hidden}.qtime div{height:100%;width:100%;background:#ff3d81}
.qpad{display:flex;flex-direction:column;align-items:center;gap:6px}.qpad>div{display:flex;gap:6px}
.qpad button{width:56px;height:46px;border-radius:10px;border:1px solid #3a2a5c;background:#241a3d;color:#fff;font-size:20px;cursor:pointer}.qpad button:active{background:#ff3d81}
/* ---- campus map ---- */
.campusmap{position:relative;width:100%;aspect-ratio:100/64;border-radius:12px;overflow:hidden;border:1px solid #3a2a5c;background:#0f0b1a}
.campusmap .mapsvg{position:absolute;inset:0;width:100%;height:100%}
.pin{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:0;padding:0;cursor:pointer;color:#ece6f6}
.pin .pico{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#1c1432;border:2px solid #4a3d70;font-size:18px;box-shadow:0 2px 8px #0008;transition:transform .12s,border-color .12s}
.pin:hover .pico{transform:scale(1.18);border-color:#ff3d81}
.pin .plbl{font-size:11px;white-space:nowrap;text-shadow:0 1px 3px #000,0 0 6px #000;font-weight:600}
.pin.busy .pico{border-color:#ffd166}
.pin.here .pico{border-color:#ff3d81;background:#3a1030;box-shadow:0 0 14px #ff3d81aa}
.pin .pcount{position:absolute;top:-4px;right:calc(50% - 26px);min-width:16px;height:16px;border-radius:8px;background:#ffd166;color:#201400;font-size:10px;line-height:16px;text-align:center;padding:0 3px}
.pin .pring{position:absolute;top:0;left:50%;width:34px;height:34px;margin-left:-17px;border-radius:50%;border:2px solid #ff3d81;animation:pring 1.6s infinite;pointer-events:none}
@keyframes pring{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.1);opacity:0}}
.campusmap.mini .plbl{display:none}.campusmap.mini .pin .pico{width:24px;height:24px;font-size:13px}.campusmap.mini .pin .pring{width:24px;height:24px;margin-left:-12px}.campusmap.mini .pcount{right:calc(50% - 20px);min-width:13px;height:13px;font-size:9px;line-height:13px}
.campusmap.mini .zonelbl{display:none}
#mapov{position:fixed;inset:0;z-index:8500;background:rgba(5,3,12,.82);display:flex;align-items:center;justify-content:center;padding:14px}
.mapbox{width:min(1100px,100%);max-height:100%;overflow:auto;background:#15101f;border:1px solid #3a2a5c;border-radius:16px;padding:14px;box-shadow:0 10px 60px #000a}
.maphead{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap}.maphead b{font-size:18px}.mapx{margin-left:auto;background:#241a3d;border:1px solid #3a2a5c;color:#fff;border-radius:8px;padding:4px 10px;cursor:pointer}
.maplegend{display:flex;gap:16px;margin-top:10px;flex-wrap:wrap}.lg{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px;border:2px solid #4a3d70}.lg.here{border-color:#ff3d81}.lg.busy{border-color:#ffd166}
.mapbtn{font-size:16px}
/* ---------- modal windows, 18+ gate, menu, survey, toasts ---------- */
.modal{position:fixed;inset:0;background:#000c;z-index:2147482000;display:flex;align-items:center;justify-content:center;padding:14px}
.mbox{background:var(--panel);border:1px solid var(--line);border-radius:14px;max-width:460px;width:100%;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 12px 50px #000c}
.modal.wide .mbox{max-width:680px}
.mhead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:17px}
.mx{padding:2px 9px;border-radius:8px}
.mbody{padding:12px 16px 16px;overflow:auto}
.mbody label{display:block;margin:12px 0 4px;color:var(--txt)}
.mbody label.chk{display:flex;gap:8px;align-items:flex-start;margin:12px 0}
.mbody select,.mbody textarea,.mbody input[type=text],.mbody input:not([type]){width:100%;box-sizing:border-box;padding:8px;background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--txt);font:inherit}
.mbody input[type=checkbox]{margin-top:4px;flex:none}
.mbody h4{margin-top:18px}
.mbody ul{padding-left:20px}
.codebox{font:600 20px/1.4 Consolas,monospace;letter-spacing:2px;background:var(--bg);border:1px dashed var(--acc2);border-radius:10px;padding:10px;text-align:center;user-select:all}
.codebox.inline{font-size:16px;padding:6px 10px;display:inline-block;margin:0}
.warn{color:#ffb86b}
.stars button{font-size:26px;padding:0 6px;background:transparent;border:0;color:#5a4d73}.stars button.on{color:#ffcf4a}
.stoast{position:fixed;left:16px;bottom:16px;z-index:2147481000;background:#241a3d;border:1px solid var(--acc);border-radius:12px;padding:10px 14px;max-width:290px;box-shadow:0 6px 24px #000a;animation:phup .25s ease-out}
.gtoast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:2147483100;background:#241a3d;border:1px solid var(--ok);border-radius:20px;padding:8px 16px}
.btnlink{display:inline-block;text-decoration:none;color:#fff;background:linear-gradient(135deg,#ff424d,#ff7a59);border-radius:8px;padding:8px 14px;font-weight:600}
.btnlink:hover{filter:brightness(1.1)}
.foot{margin-top:30px;border-top:1px solid var(--line);padding-top:16px}
.foot a,.mbody a,.modal a{color:var(--acc)}
button.mini{font-size:12px;padding:3px 8px}
.foot a.btnlink,.mbody a.btnlink,a.btnlink{color:#fff}
.title .tlogo{display:block;margin:0 auto 6px;width:min(520px,82vw);height:auto;filter:drop-shadow(0 6px 30px #8a1c4a66)}
.logo{display:flex;align-items:center;gap:8px}.logo .hlogo{height:28px;width:auto;-webkit-text-fill-color:initial}
#tbg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% 35%,#8a1640 0%,#661032 45%,#380819 100%)}
#tbg .s{position:absolute;inset:-6%;background-size:cover;background-repeat:no-repeat;opacity:0;will-change:transform,opacity}
#tbg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,#7a143877 0%,#1c040eaa 100%)}
#app{position:relative;z-index:1}
.title .dim,.title .foot,.title .foot a{text-shadow:0 1px 5px #000c}
.foot a:not(.btnlink),.mbody a:not(.btnlink),.modal a:not(.btnlink){color:#6cb4ff}
.foot a:not(.btnlink):hover,.mbody a:not(.btnlink):hover{color:#a6d2ff}
#tmute{position:fixed;right:14px;bottom:14px;z-index:5;border-radius:50%;width:42px;height:42px;padding:0;font-size:18px;background:#1c040e99;border:1px solid #ffffff33}
.newdot{background:#ff3d81;color:#fff;border-radius:8px;padding:0 6px;font-size:10px;margin-left:4px;vertical-align:1px}
.tsub{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.ynote{color:#ffd23f;font-weight:700}
h4.ynote2{color:#ffd23f}ul.ynote2{font-weight:600;color:#ffd23f}