/* LUMINA PARK ui2.css — clay/toy UI reskin. Generated by gen_css.py; loaded last, overrides only. Assets: assets/ui/*.webp */
:root{--u2sh:drop-shadow(0 3px 0 rgba(34,48,107,.3)) drop-shadow(0 5px 6px rgba(34,48,107,.18));--u2sh1:drop-shadow(0 2px 0 rgba(34,48,107,.3))}
.u2i{display:inline-block;width:1.3em;height:1.3em;vertical-align:-.3em;background:url(assets/ui/icons.webp?v=f8212ff6) 0 0/800% 600% no-repeat;overflow:hidden;color:transparent;text-indent:-9em;white-space:nowrap;pointer-events:none;font-style:normal;line-height:1;text-shadow:none;flex:none}
.u2i[data-i=gift]{background-position:0% 0%}
.u2i[data-i=camera]{background-position:14.29% 0%}
.u2i[data-i=sound]{background-position:28.57% 0%}
.u2i[data-i=mute]{background-position:42.86% 0%}
.u2i[data-i=palette]{background-position:57.14% 0%}
.u2i[data-i=eye]{background-position:71.43% 0%}
.u2i[data-i=movie]{background-position:85.71% 0%}
.u2i[data-i=map]{background-position:100% 0%}
.u2i[data-i=chat]{background-position:0% 20%}
.u2i[data-i=smile]{background-position:14.29% 20%}
.u2i[data-i=firework]{background-position:28.57% 20%}
.u2i[data-i=jump]{background-position:42.86% 20%}
.u2i[data-i=close]{background-position:57.14% 20%}
.u2i[data-i=coin]{background-position:71.43% 20%}
.u2i[data-i=star]{background-position:85.71% 20%}
.u2i[data-i=ticket]{background-position:100% 20%}
.u2i[data-i=crown]{background-position:0% 40%}
.u2i[data-i=heart]{background-position:14.29% 40%}
.u2i[data-i=trophy]{background-position:28.57% 40%}
.u2i[data-i=gold]{background-position:42.86% 40%}
.u2i[data-i=silver]{background-position:57.14% 40%}
.u2i[data-i=bronze]{background-position:71.43% 40%}
.u2i[data-i=calendar]{background-position:85.71% 40%}
.u2i[data-i=tent]{background-position:100% 40%}
.u2i[data-i=lollipop]{background-position:0% 60%}
.u2i[data-i=telescope]{background-position:14.29% 60%}
.u2i[data-i=bench]{background-position:28.57% 60%}
.u2i[data-i=wave]{background-position:42.86% 60%}
.u2i[data-i=pin]{background-position:57.14% 60%}
.u2i[data-i=link]{background-position:71.43% 60%}
.u2i[data-i=flame]{background-position:85.71% 60%}
.u2i[data-i=handshake]{background-position:100% 60%}
.u2i[data-i=sun]{background-position:0% 80%}
.u2i[data-i=moon]{background-position:14.29% 80%}
.u2i[data-i=people]{background-position:28.57% 80%}
.u2i[data-i=shooting]{background-position:42.86% 80%}
.u2i[data-i=timer]{background-position:57.14% 80%}
.u2i[data-i=selfie]{background-position:71.43% 80%}
.u2i[data-i=drop]{background-position:85.71% 80%}
.u2i[data-i=zoom]{background-position:100% 80%}
.u2i[data-i=updown]{background-position:0% 100%}
.u2i[data-i=save]{background-position:14.29% 100%}
.u2i[data-i=share]{background-position:28.57% 100%}
.u2i[data-i=retry]{background-position:42.86% 100%}
.u2i[data-i=check]{background-position:57.14% 100%}
.u2i[data-i=lock]{background-position:71.43% 100%}
.u2i[data-i=music]{background-position:85.71% 100%}
.u2i[data-i=chest]{background-position:100% 100%}
#stat{border-style:solid;border-color:transparent;border-image:url(assets/ui/pill_cream.webp?v=88f0c8c7) 168 84 0 84/100% 22px 0 22px;background:#f4e2c8;background-clip:padding-box;border-radius:999px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;filter:var(--u2sh)}
#stat b{color:#b23a0e}
.lv{background:url(assets/ui/badge.webp?v=6f30eaa3) center/100% 100% no-repeat;border:0;width:38px;height:38px;margin:-4px;color:#fff6e4;text-shadow:0 1px 0 rgba(34,48,107,.7);font-size:15px}
.xpw{height:10px;background:#d9c5a3;box-shadow:inset 0 1.5px 0 rgba(34,48,107,.28);border:1.5px solid #22306b}.xpw i{background:linear-gradient(180deg,#9be0cb,#5cbfa4);border-radius:9px}
#stat .u2i{width:20px;height:20px;vertical-align:-4px}
#chips .pill{border-style:solid;border-color:transparent;border-image:url(assets/ui/pill_cream.webp?v=88f0c8c7) 168 84 0 84/100% 16.5px 0 16.5px;background:#f4e2c8;background-clip:padding-box;border-radius:999px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;line-height:19px;filter:var(--u2sh1);color:#22306b}
#chips #evchip.live{border-style:solid;border-color:transparent;border-image:url(assets/ui/pill_gold.webp?v=98ddfd14) 168 84 0 84/100% 16.5px 0 16.5px;background:#f5bf45;background-clip:padding-box;border-radius:999px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;}
#chips #tut{border-style:solid;border-color:transparent;border-image:url(assets/ui/pill_mint.webp?v=ea9f24c4) 168 84 0 84/100% 16.5px 0 16.5px;background:#7ccdb4;background-clip:padding-box;border-radius:999px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:#17304a}
#chips #wp{border-style:solid;border-color:transparent;border-image:url(assets/ui/pill_navy.webp?v=a78116f6) 168 84 0 84/100% 16.5px 0 16.5px;background:#3a4a7c;background-clip:padding-box;border-radius:999px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:#fff6e4}
#chips #buff{border-style:solid;border-color:transparent;border-image:url(assets/ui/pill_gold.webp?v=98ddfd14) 168 84 0 84/100% 16.5px 0 16.5px;background:#f5bf45;background-clip:padding-box;border-radius:999px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;}
#chips .pill .u2i{width:19px;height:19px;vertical-align:-4px}
.ib{background:url(assets/ui/rb_cream.webp?v=c6cf89ab) center/100% 100% no-repeat;border-color:transparent;box-shadow:none;filter:var(--u2sh1);transition:transform .08s}
.rb{background:url(assets/ui/rb_cream.webp?v=c6cf89ab) center/100% 100% no-repeat;border-color:transparent;box-shadow:none;filter:var(--u2sh);transition:transform .08s}
.rb.jump{background:url(assets/ui/rb_mint.webp?v=9b3a65fb) center/100% 100% no-repeat;border-color:transparent;box-shadow:none;}
body #bFp.on{background:url(assets/ui/rb_gold.webp?v=70fbbbe3) center/100% 100% no-repeat;border-color:transparent;box-shadow:none;}
body #bFp.ch{background:url(assets/ui/rb_mint.webp?v=9b3a65fb) center/100% 100% no-repeat;border-color:transparent;box-shadow:none;}
.ib:active,.rb:active{transform:translateY(2px) scale(.96);box-shadow:none;filter:brightness(.9)}
.ib .u2i{width:30px;height:30px;vertical-align:middle;display:block}.rb .u2i{width:40px;height:40px;display:block}.ib,.rb{line-height:1}
#mclose .u2i{width:24px;height:24px}
#joy{background:none;border-color:transparent}#joy::before{content:"";position:absolute;inset:-5px;background:url(assets/ui/joy.webp?v=9a54fc78) center/100% 100% no-repeat;opacity:.8;filter:var(--u2sh1);pointer-events:none}
#knob{background:url(assets/ui/knob.webp?v=048201ad) center/100% 100% no-repeat;border:0;box-shadow:none;filter:var(--u2sh);width:60px;height:60px;margin:-30px 0 0 -30px}
#mini{border-color:transparent;box-shadow:none}
#u2ring{position:absolute;right:4px;top:52px;width:128px;height:128px;background:url(assets/ui/ring.webp?v=f4a795ce) center/100% 100% no-repeat;pointer-events:none!important;display:none;filter:var(--u2sh)}#mini[style*=block]+#u2ring{display:block}
@media (max-height:520px){#u2ring{right:5px;top:53px;width:98px;height:98px}}
#act{border-style:solid;border-color:transparent;border-image:url(assets/ui/tk_coral.webp?v=c33a51cd) 168 56 0 56/100% 18.67px 0 18.67px;background:#ee736e;background-clip:content-box;border-radius:0;box-shadow:none;height:56px;padding:0 26px;line-height:50px;color:#fff6e4;text-shadow:0 1.5px 0 rgba(34,48,107,.55);filter:var(--u2sh)}
#act.exit{border-style:solid;border-color:transparent;border-image:url(assets/ui/tk_cream.webp?v=f43c20bf) 168 56 0 56/100% 18.67px 0 18.67px;background:#f6e4cb;background-clip:content-box;border-radius:0;box-shadow:none;color:#22306b;text-shadow:none}
#act:active{transform:translateX(-50%) translateY(3px);box-shadow:none;filter:brightness(.92)}#act .u2i{width:30px;height:30px;vertical-align:-8px;margin-right:2px}
#toast{border-style:solid;border-color:transparent;border-image:url(assets/ui/pill_cream.webp?v=88f0c8c7) 168 84 0 84/100% 23.5px 0 23.5px;background:#f4e2c8;background-clip:padding-box;border-radius:999px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;line-height:25px;filter:var(--u2sh);color:#22306b}
#toast .u2i{width:26px;height:26px;vertical-align:-6px}
#bn1{border-style:solid;border-color:transparent;border-image:url(assets/ui/ribbon.webp?v=ecc9b11d) 168 129 0 129/100% 43px 0 43px;background:none;box-shadow:none;height:56px;line-height:44px;padding:0 56px 7px;font-size:27px;width:fit-content;margin:0 auto;color:#fff6e4;text-shadow:0 2px 0 rgba(34,48,107,.75);filter:var(--u2sh)}
#bn2{border-style:solid;border-color:transparent;border-image:url(assets/ui/pill_navy.webp?v=a78116f6) 168 84 0 84/100% 15px 0 15px;background:#3a4a7c;background-clip:padding-box;border-radius:999px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;width:fit-content;margin:3px auto 0;line-height:20px;padding:3px 14px;border-width:2px;font-size:15px;color:#ffd76a;text-shadow:none}
#bn2:empty{display:none}
#bn1 .u2i,#bn2 .u2i{vertical-align:-.28em}
#log div{border-style:solid;border-color:transparent;border-image:url(assets/ui/panel.webp?v=57efc3bc) 73 fill/11px;background:none;box-shadow:none;border-width:2px;border-radius:10px;padding:5px 11px;color:#22306b}
#chatbar input{border-style:solid;border-color:transparent;border-image:url(assets/ui/pill_cream.webp?v=88f0c8c7) 168 84 0 84/100% 23px 0 23px;background:#f4e2c8;background-clip:padding-box;border-radius:999px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;height:46px;border-width:2.5px;color:#22306b}
#chatbar button{border-style:solid;border-color:transparent;border-image:url(assets/ui/tk_coral.webp?v=c33a51cd) 168 56 0 56/100% 15.33px 0 15.33px;background:#ee736e;background-clip:content-box;border-radius:0;box-shadow:none;border-width:2.5px;color:#fff6e4;text-shadow:0 1px 0 rgba(34,48,107,.55)}
#emo{border-style:solid;border-color:transparent;border-image:url(assets/ui/pill_cream.webp?v=88f0c8c7) 168 84 0 84/100% 33px 0 33px;background:#f4e2c8;background-clip:padding-box;border-radius:999px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;filter:var(--u2sh)}
#emo button{background:url(assets/ui/rb_cream.webp?v=c6cf89ab) center/100% 100% no-repeat;border-color:transparent;box-shadow:none;border:0;font-size:22px}
#emo button:active{transform:translateY(2px);filter:brightness(.9)}
.sheet{border-style:solid;border-color:transparent;border-image:url(assets/ui/panel.webp?v=57efc3bc) 73 fill/28px;background:none;box-shadow:none;border-radius:20px;box-shadow:0 6px 0 rgba(34,48,107,.3),0 14px 26px rgba(34,48,107,.28);color:#22306b}
#menu{padding:16px 16px 14px}#mclose{right:8px;top:8px}
#tabs{gap:4px;padding:1px 1px 3px;margin-right:40px}
#tabs button{border-style:solid;border-color:transparent;border-image:url(assets/ui/pill_cream.webp?v=88f0c8c7) 168 84 0 84/100% 17px 0 17px;background:#f4e2c8;background-clip:padding-box;border-radius:999px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-width:0;line-height:20px;padding:7px 10px;color:#4a5584}
#tabs button.on{border-style:solid;border-color:transparent;border-image:url(assets/ui/pill_navy.webp?v=a78116f6) 168 84 0 84/100% 17px 0 17px;background:#3a4a7c;background-clip:padding-box;border-radius:999px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:#fff6e4}
.seg button{border-style:solid;border-color:transparent;border-image:url(assets/ui/pill_cream.webp?v=88f0c8c7) 168 84 0 84/100% 18px 0 18px;background:#f4e2c8;background-clip:padding-box;border-radius:999px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-width:0;line-height:20px;color:#4a5584}
.seg button.on{border-style:solid;border-color:transparent;border-image:url(assets/ui/pill_navy.webp?v=a78116f6) 168 84 0 84/100% 18px 0 18px;background:#3a4a7c;background-clip:padding-box;border-radius:999px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:#fff6e4}
#tabs button:active,.seg button:active,.btn:not([disabled]):active,#invite:active,.hb:active,body .vb:active,body #pmtabs button:active,body #pmrow button:active{transform:translateY(2px);filter:brightness(.92)}
#invite{border-style:solid;border-color:transparent;border-image:url(assets/ui/tk_coral.webp?v=c33a51cd) 168 56 0 56/100% 16.67px 0 16.67px;background:#ee736e;background-clip:content-box;border-radius:0;box-shadow:none;line-height:24px;color:#fff6e4;text-shadow:0 1px 0 rgba(34,48,107,.55);box-shadow:none}
#invite .u2i{width:24px;height:24px;vertical-align:-6px}
.cal div{border-style:solid;border-color:transparent;border-image:url(assets/ui/tile.webp?v=73613f89) 73 fill/18px;background:none;box-shadow:none;}
.cal div.got{border-style:solid;border-color:transparent;border-image:url(assets/ui/tile_mint.webp?v=d8ad9381) 73 fill/18px;background:none;box-shadow:none;}
.cal div.today{border-style:solid;border-color:transparent;border-image:url(assets/ui/tile_gold.webp?v=20bd3bcc) 73 fill/18px;background:none;box-shadow:none;}
.q,.tt,.goal{border-style:solid;border-color:transparent;border-image:url(assets/ui/tile.webp?v=73613f89) 73 fill/18px;background:none;box-shadow:none;}
.tt.now{border-style:solid;border-color:transparent;border-image:url(assets/ui/tile_gold.webp?v=20bd3bcc) 73 fill/18px;background:none;box-shadow:none;}
.it{border-style:solid;border-color:transparent;border-image:url(assets/ui/tile.webp?v=73613f89) 73 fill/18px;background:none;box-shadow:none;}
.it.on{border-style:solid;border-color:transparent;border-image:url(assets/ui/tile_mint.webp?v=d8ad9381) 73 fill/18px;background:none;box-shadow:none;}
.alb div{border-style:solid;border-color:transparent;border-image:url(assets/ui/tile.webp?v=73613f89) 73 fill/18px;background:none;box-shadow:none;}
.alb div.got{border-style:solid;border-color:transparent;border-image:url(assets/ui/tile_gold.webp?v=20bd3bcc) 73 fill/18px;background:none;box-shadow:none;}
.cal div{color:#4a5584;border-width:2px}.cal div.got{color:#0d6b62}.cal div.today{color:#22306b}.cal div b .u2i{width:22px;height:22px;vertical-align:-5px}
.it{border-width:2px}.q small,.it .d,#mbody .sub,.sheet p,.sheet li{color:#4a5584}
.q .bar,.goal .bar{height:9px;background:#cdb894;box-shadow:inset 0 1.5px 0 rgba(34,48,107,.25);border:1.5px solid #22306b}.q .bar i,.goal .bar i{background:linear-gradient(180deg,#9be0cb,#5cbfa4)}.goal .bar i{background:linear-gradient(180deg,#ffd76a,#f0a93a)}
.btn{border-style:solid;border-color:transparent;border-image:url(assets/ui/pill_gold.webp?v=98ddfd14) 168 84 0 84/100% 21px 0 21px;background:#f5bf45;background-clip:padding-box;border-radius:999px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;line-height:20px;color:#22306b}
.btn.eq{border-style:solid;border-color:transparent;border-image:url(assets/ui/tk_mint.webp?v=2d776bd6) 168 56 0 56/100% 14px 0 14px;background:#74c5ab;background-clip:content-box;border-radius:0;box-shadow:none;color:#17304a}
.btn[disabled]{filter:grayscale(1) opacity(.55);color:#4a5584;border-color:transparent}.btn .u2i{width:20px;height:20px;vertical-align:-5px}
#mbody h3 .u2i{width:24px;height:24px;vertical-align:-5px}.tt.now,.tt.now b{color:#22306b}.lbr .rk .u2i{width:24px;height:24px;vertical-align:-6px}.lbr .rk{width:26px}.tt .e .u2i{width:26px;height:26px;vertical-align:-6px}
#mapc{border-color:#22306b;border-radius:14px}
#photo{border-style:solid;border-color:transparent;border-image:url(assets/ui/panel.webp?v=57efc3bc) 73 fill/28px;background:none;box-shadow:none;}
.prow button{border-style:solid;border-color:transparent;border-image:url(assets/ui/tk_gold.webp?v=24263cac) 168 56 0 56/100% 15.33px 0 15.33px;background:#f5bf45;background-clip:content-box;border-radius:0;box-shadow:none;line-height:20px;color:#22306b}
.prow button+button{border-style:solid;border-color:transparent;border-image:url(assets/ui/tk_cream.webp?v=f43c20bf) 168 56 0 56/100% 15.33px 0 15.33px;background:#f6e4cb;background-clip:content-box;border-radius:0;box-shadow:none;color:#22306b}
#start .card::before{content:"";position:absolute;left:-11px;right:-11px;top:-12px;bottom:-12px;z-index:-1;border:26px solid transparent;border-image:url(assets/ui/panel.webp?v=57efc3bc) 73 fill/26px;filter:drop-shadow(0 5px 0 rgba(34,48,107,.28)) drop-shadow(0 10px 14px rgba(34,48,107,.22));pointer-events:none}
#start .sub{border-style:solid;border-color:transparent;border-image:url(assets/ui/tk_cream.webp?v=f43c20bf) 168 56 0 56/100% 9.67px 0 9.67px;background:#f6e4cb;background-clip:content-box;border-radius:0;box-shadow:none;line-height:19px;padding:3px 16px;color:#22306b;filter:var(--u2sh1)}
#start label{color:#3b4678;font-family:"Jua","Noto Sans KR",sans-serif;letter-spacing:.2px}#start label::before{content:"";display:inline-block;width:13px;height:13px;margin-right:4px;vertical-align:-2px;background:url(assets/ui/icons.webp?v=f8212ff6) 85.71% 20%/800% 600% no-repeat}
#nick{border-style:solid;border-color:transparent;border-image:url(assets/ui/panel.webp?v=57efc3bc) 73 fill/15px;background:none;box-shadow:none;border-width:2.5px;border-radius:12px;color:#22306b}
#nick:focus{filter:drop-shadow(0 0 0 #ffc93c) drop-shadow(0 2px 0 rgba(240,80,58,.55))}
.hb{border-style:solid;border-color:transparent;border-image:url(assets/ui/pill_cream.webp?v=88f0c8c7) 168 84 0 84/100% 18px 0 18px;background:#f4e2c8;background-clip:padding-box;border-radius:999px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:#22306b;transition:transform .08s}
.hb.sel{border-style:solid;border-color:transparent;border-image:url(assets/ui/pill_gold.webp?v=98ddfd14) 168 84 0 84/100% 18px 0 18px;background:#f5bf45;background-clip:padding-box;border-radius:999px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;transform:translateY(-1px)}
.sw{position:relative;border:0;box-shadow:none;transition:transform .1s;filter:var(--u2sh1)}.sw::after{content:"";position:absolute;inset:-1px;background:url(assets/ui/rb_cream.webp?v=c6cf89ab) center/100% 100% no-repeat;mix-blend-mode:multiply;pointer-events:none}.sw.sel{transform:scale(1.1);box-shadow:0 0 0 2px #22306b}.sw.sel::before{content:"";position:absolute;right:-6px;top:-6px;width:16px;height:16px;z-index:1;background:url(assets/ui/icons.webp?v=f8212ff6) 85.71% 20%/800% 600% no-repeat;pointer-events:none}
#go{border-style:solid;border-color:transparent;border-image:url(assets/ui/tk_coral.webp?v=c33a51cd) 168 56 0 56/100% 20.67px 0 20.67px;background:#ee736e;background-clip:content-box;border-radius:0;box-shadow:none;line-height:32px;color:#fff6e4;text-shadow:0 2px 0 rgba(34,48,107,.6);filter:var(--u2sh);transform-origin:50% 60%}
html.u2:not(.u2bot) #go{animation:u2wob 3.4s ease-in-out infinite}
html.u2 #go:active{animation:none;transform:translateY(3px);box-shadow:none;filter:brightness(.92)}#go .u2i{width:32px;height:32px;vertical-align:-8px}
@keyframes u2wob{0%,100%{transform:rotate(-.7deg)}50%{transform:rotate(.7deg) translateY(-1.5px)}}@media (prefers-reduced-motion:reduce){html.u2 #go{animation:none!important}}
#start small{color:#4a5584}
@media (orientation:landscape) and (max-height:560px){html #start{place-items:center end;padding:14px max(18px,5vw) 14px 18px}html #start .logo{left:calc((100vw - 420px)/2)!important;top:50%!important;width:min(42vw,340px,100vw - 450px)!important;transform:translate(-50%,-54%)}html #start .logo .sub{white-space:normal;max-width:100%}}
body .vb{border-style:solid;border-color:transparent;border-image:url(assets/ui/pill_cream.webp?v=88f0c8c7) 168 84 0 84/100% 20.5px 0 20.5px;background:#f4e2c8;background-clip:padding-box;border-radius:999px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;line-height:21px;color:#22306b;filter:var(--u2sh1)}
body .vb.on{border-style:solid;border-color:transparent;border-image:url(assets/ui/pill_gold.webp?v=98ddfd14) 168 84 0 84/100% 20.5px 0 20.5px;background:#f5bf45;background-clip:padding-box;border-radius:999px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;}
body #lkx{border-style:solid;border-color:transparent;border-image:url(assets/ui/pill_coral.webp?v=4ca28ebd) 168 84 0 84/100% 20.5px 0 20.5px;background:#ee6e68;background-clip:padding-box;border-radius:999px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;background:#ee6e68 padding-box!important;color:#fff6e4!important;text-shadow:0 1px 0 rgba(34,48,107,.55)}
body .vb .u2i{width:22px;height:22px;vertical-align:-5px}
body #pmtabs button{border-style:solid;border-color:transparent;border-image:url(assets/ui/pill_cream.webp?v=88f0c8c7) 168 84 0 84/100% 16px 0 16px;background:#f4e2c8;background-clip:padding-box;border-radius:999px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-width:0;line-height:20px;color:#4a5584}
body #pmtabs button.on{border-style:solid;border-color:transparent;border-image:url(assets/ui/pill_navy.webp?v=a78116f6) 168 84 0 84/100% 16px 0 16px;background:#3a4a7c;background-clip:padding-box;border-radius:999px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:#fff6e4}
body #pmrow button{border-style:solid;border-color:transparent;border-image:url(assets/ui/tile.webp?v=73613f89) 73 fill/18px;background:none;box-shadow:none;border-width:2.5px;color:#22306b}
body #pmrow button.on{border-style:solid;border-color:transparent;border-image:url(assets/ui/tile_gold.webp?v=20bd3bcc) 73 fill/18px;background:none;box-shadow:none;}
body #pmshoot{background:url(assets/ui/shutter.webp?v=0e5824f0) center/100% 100% no-repeat;border:0;box-shadow:none;filter:var(--u2sh);width:72px;height:72px;margin-top:-2px;margin-bottom:-2px}body #pmshoot:active{transform:translateY(3px) scale(.96);box-shadow:none;filter:brightness(.9)}
body .pmsl span{background:url(assets/ui/rb_cream.webp?v=c6cf89ab) center/100% 100% no-repeat;border-color:transparent;box-shadow:none;border:0;width:30px;height:30px}
body .pmsl span .u2i{width:20px;height:20px;display:block}
body #pmhint{border-style:solid;border-color:transparent;border-image:url(assets/ui/pill_cream.webp?v=88f0c8c7) 168 84 0 84/100% 15.5px 0 15.5px;background:#f4e2c8;background-clip:padding-box;border-radius:999px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;line-height:19px;color:#22306b}
body #pmhint .u2i{width:18px;height:18px;vertical-align:-4px}
body #lktop .ti{border-style:solid;border-color:transparent;border-image:url(assets/ui/pill_cream.webp?v=88f0c8c7) 168 84 0 84/100% 21px 0 21px;background:#f4e2c8;background-clip:padding-box;border-radius:999px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;line-height:24px;filter:var(--u2sh1)}
body .lkl{border-style:solid;border-color:transparent;border-image:url(assets/ui/pill_cream.webp?v=88f0c8c7) 168 84 0 84/100% 13px 0 13px;background:#f4e2c8;background-clip:padding-box;border-radius:999px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;line-height:18px}
body .lkl.z{border-style:solid;border-color:transparent;border-image:url(assets/ui/pill_navy.webp?v=a78116f6) 168 84 0 84/100% 13px 0 13px;background:#3a4a7c;background-clip:padding-box;border-radius:999px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;line-height:18px;color:#fff6e4}
body #pmres .rw{gap:6px}body #pmres .vb{padding:8px 10px}body #pmres .vb .u2i{width:19px;height:19px;vertical-align:-4px}body #pmres img{border-radius:12px;box-shadow:0 0 0 2.5px #22306b,0 6px 0 2.5px rgba(34,48,107,.5),0 14px 30px rgba(0,0,0,.4)}
html.u2 .g2tabs button{border-style:solid;border-color:transparent;border-image:url(assets/ui/pill_cream.webp?v=88f0c8c7) 168 84 0 84/100% 17px 0 17px;background:#f4e2c8;background-clip:padding-box;border-radius:999px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-width:0;line-height:20px;color:#4a5584}
html.u2 .g2tabs button.on{border-style:solid;border-color:transparent;border-image:url(assets/ui/pill_navy.webp?v=a78116f6) 168 84 0 84/100% 17px 0 17px;background:#3a4a7c;background-clip:padding-box;border-radius:999px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:#fff6e4}
html.u2 #g2pass .x,html.u2 #g2res .x,html.u2 #g2bar .pz{background:url(assets/ui/rb_cream.webp?v=c6cf89ab) center/100% 100% no-repeat;border-color:transparent;box-shadow:none;filter:var(--u2sh1)}
html.u2 #g2pass .x .u2i,html.u2 #g2res .x .u2i{width:18px;height:18px;display:block;margin:auto}html.u2 #g2pass .x:active,html.u2 #g2res .x:active,html.u2 #g2bar .pz:active,html.u2 .g2tabs button:active{transform:translateY(2px);filter:brightness(.92)}
html.u2 .g2set button{border-style:solid;border-color:transparent;border-image:url(assets/ui/pill_cream.webp?v=88f0c8c7) 168 84 0 84/100% 15px 0 15px;background:#f4e2c8;background-clip:padding-box;border-radius:999px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;line-height:18px;color:#22306b}
html.u2 .g2set button.on{border-style:solid;border-color:transparent;border-image:url(assets/ui/pill_mint.webp?v=ea9f24c4) 168 84 0 84/100% 15px 0 15px;background:#7ccdb4;background-clip:padding-box;border-radius:999px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:#17304a}
html.u2 .g2q .r{border-style:solid;border-color:transparent;border-image:url(assets/ui/pill_gold.webp?v=98ddfd14) 168 84 0 84/100% 14px 0 14px;background:#f5bf45;background-clip:padding-box;border-radius:999px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;line-height:18px;color:#22306b}
html.u2 .g2q.done .r{border-style:solid;border-color:transparent;border-image:url(assets/ui/pill_mint.webp?v=ea9f24c4) 168 84 0 84/100% 14px 0 14px;background:#7ccdb4;background-clip:padding-box;border-radius:999px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:#17304a}
html.u2 .g2q .r .u2i{width:17px;height:17px;vertical-align:-4px}html.u2 #g2res .rwd .u2i{width:20px;height:20px;vertical-align:-5px}
html.u2 #hats.c2pick .hb{border-style:solid;border-color:transparent;border-image:url(assets/ui/tile.webp?v=73613f89) 73 fill/14px;background:none;box-shadow:none;border-width:2px;border-radius:12px;transform:none;font-size:11.5px;white-space:nowrap;padding:4px 0 7px;overflow:hidden}
html.u2 #hats.c2pick .hb.sel{border-style:solid;border-color:transparent;border-image:url(assets/ui/tile_gold.webp?v=20bd3bcc) 73 fill/14px;background:none;box-shadow:none;border-width:2px}
@media (max-width:430px){body #pmtop{justify-content:flex-end;row-gap:7px}body #pmhint{top:106px}}
/* ===== ux pass (round 1) ===== */
.uxno{position:fixed;z-index:40;width:44px;height:44px;margin:-22px 0 0 -22px;display:none;place-items:center;pointer-events:none;font:400 30px "Jua","Noto Sans KR",sans-serif;color:#fff;text-shadow:0 0 0 #f0503a,0 2px 0 #22306b;background:rgba(240,80,58,.9);border:3px solid #22306b;border-radius:50%;line-height:1}
.uxno.on{display:grid;animation:uxno .7s ease-out both}@keyframes uxno{0%{transform:scale(.4);opacity:0}25%{transform:scale(1.1);opacity:1}70%{transform:scale(1);opacity:1}100%{transform:scale(.9);opacity:0}}
:root{--sat:env(safe-area-inset-top,0px);--sar:env(safe-area-inset-right,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px)}
/* safe area: the whole HUD lives inside the notch / home-indicator insets (children are positioned against #hud) */
html #hud{inset:var(--sat) var(--sar) var(--sab) var(--sal)}
html #flash{position:fixed;inset:0}
html #g2bar{left:calc(10px + var(--sal));right:calc(62px + var(--sar));margin-top:var(--sat)}
html #g2chip{left:calc(10px + var(--sal));margin-top:var(--sat)}
html #g2res{margin-bottom:var(--sab)}
body #pmtop,body #lktop{margin-top:var(--sat);left:calc(10px + var(--sal));right:calc(10px + var(--sar))}
body #pmhint{margin-top:var(--sat)}
body #pmbot{padding-bottom:calc(16px + var(--sab));padding-left:calc(10px + var(--sal));padding-right:calc(10px + var(--sar))}
body #lkbot{bottom:calc(22px + var(--sab))}
body #pmslH{right:calc(-58px + var(--sar))}body #pmslZ{left:calc(-58px + var(--sal))}
html #start{padding-top:calc(18px + var(--sat));padding-bottom:calc(22px + var(--sab));padding-left:calc(18px + var(--sal));padding-right:calc(18px + var(--sar))}
html #start .logo{margin-top:var(--sat)}
/* touch targets: 44 px minimum */
html .ib{width:44px;height:44px}
html .btn,html .seg button,html #tabs button,body #pmtop .vb,body #pmtabs button,html.u2 .g2tabs button,html.u2 .g2set button{min-height:44px}
html #tut2 button{min-height:44px;min-width:44px}
html.u2 #g2bar{height:46px}html.u2 #g2bar .pz{width:44px;height:44px;margin:0 -4px 0 0}
html.u2 #g2pass .x,html.u2 #g2res .x{width:44px;height:44px;right:4px;top:4px}
/* menu tabs: all eight visible at once (the strip used to scroll and hid 랭킹/설정 off the edge) */
html #tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;overflow:visible;margin-right:44px}
html #tabs button{padding:6px 2px;font-size:14px;white-space:nowrap;text-align:center}
html #menu{height:min(84vh,680px)}
/* status pill never runs under the top buttons: xp bar moves to the pill's bottom edge */
html #stat{max-width:calc(100% - 172px);position:absolute}
html #stat .xpw{position:absolute;left:44px;right:18px;bottom:2px;width:auto;height:5px;border-width:1px}
@media (max-width:345px){html #stat{gap:5px;font-size:14px;padding-right:9px}html #stat #tod{display:none}}
/* toast: sits above the ride button instead of on top of the mission chips and the minimap; long lines wrap */
html #toast{top:auto;bottom:238px;white-space:normal;width:max-content;max-width:calc(100% - 28px);text-align:center;transform:translateX(-50%) translateY(6px)}
html #toast.show{transform:translateX(-50%)}
/* small text floor */
html.u2 #hats.c2pick .hb,html .hb{font-size:12px}html #start small{font-size:12px}
html #mbody .sub,html .it .d,html .cal div,html .q small{font-size:12.5px}
/* connection banner */
#uxnet{position:absolute;left:50%;top:60px;transform:translateX(-50%);z-index:3;display:none;max-width:calc(100% - 24px);padding:8px 16px;border-radius:999px;background:#f0503a;color:#fff6e4;border:2.5px solid #22306b;box-shadow:0 3px 0 #22306b;font-size:14.5px;line-height:1.3;text-align:center;white-space:normal;width:max-content;pointer-events:none!important}
#uxnet.on{display:block;animation:uxnet .3s ease-out}@keyframes uxnet{from{transform:translateX(-50%) translateY(-8px);opacity:0}}
/* keyboard card (no touch screen): replaces the joystick */
html.uxkb #joy{display:none}
#uxkeys{position:absolute;left:14px;bottom:18px;background:rgba(255,243,220,.94);border:2.5px solid #22306b;box-shadow:0 3px 0 #22306b;border-radius:16px;padding:9px 12px 8px;font-size:13.5px;color:#22306b;line-height:1.25}
#uxkeys .r{display:flex;gap:10px;align-items:center;margin:3px 0}#uxkeys .r b{font-weight:400;min-width:104px;background:#fff;border:1.5px solid #22306b;border-radius:7px;padding:2px 7px;text-align:center}
#uxkeys button{margin-top:5px;min-height:28px;border:0;background:none;color:#4a5584;font:400 13px "Jua","Noto Sans KR",sans-serif;cursor:pointer;padding:2px 4px;text-decoration:underline}
#uxkeys.min{padding:4px 10px}#uxkeys.min .r{display:none}#uxkeys.min button{margin:0;text-decoration:none;color:#22306b;font-size:14px;min-height:34px}
body.cine #uxkeys,body.cine #uxnet{display:none!important}
/* settings blocks */
.uxbox{margin:2px 0 14px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.6);border:2px solid rgba(43,33,64,.15)}
.uxh{font-weight:700;font-size:15px;margin-bottom:8px}.uxn{font-size:12.5px;opacity:.75;margin-top:6px;line-height:1.45}
.uxbox .seg{margin-bottom:0}.uxrow{display:flex;gap:8px;align-items:center}
#uxnick{flex:1;min-width:0;height:44px;border-radius:12px;border:2.5px solid #22306b;background:#fff;color:#22306b;padding:0 12px;font:400 16px "Jua","Noto Sans KR",sans-serif;outline:none;user-select:text;-webkit-user-select:text}
.uxwide{width:100%;margin-top:8px}.uxsnd{margin:2px 0 8px}
html #bSnd.off{filter:saturate(.35) brightness(.92)}html #bSnd.off::after{content:"";position:absolute;right:-1px;top:-1px;width:13px;height:13px;border-radius:50%;background:#f0503a;border:2px solid #fff}html #bSnd{position:relative}
/* ride button: pops in when you step into a boarding circle so it is noticed */
html.u2 #act{animation:uxact .4s cubic-bezier(.2,1.5,.4,1)}@keyframes uxact{from{transform:translateX(-50%) translateY(14px) scale(.7);opacity:0}to{transform:translateX(-50%);opacity:1}}
@media (prefers-reduced-motion:reduce){html.u2 #act,.uxno.on,#uxnet.on{animation:none}}
/* start screen on short phones: the logo shrinks instead of covering the nickname field */
@media (orientation:portrait){html #start .logo{width:min(88vw,400px,calc((100vh - 410px)*1.5))!important;min-width:150px}}
/* mission chips stop before the minimap and wrap instead of running under it */
html #chips{max-width:calc(100% - 148px)}html #chips .pill{white-space:normal;max-width:100%;line-height:17px;text-align:left;border-radius:18px}
/* landscape phone */
@media (orientation:landscape) and (max-height:560px){
html #menu{width:min(92%,680px);height:calc(100% - 16px);padding:10px 14px}html #tabs{grid-template-columns:repeat(8,1fr)}html #mbody{margin:8px 0 6px}html #invite{padding:4px 11px;min-height:44px}
html #act{bottom:22px}html #toast{bottom:86px}
html #start small{display:none}html #start label{margin-top:5px}html #go{margin-top:9px}
}
/* now-playing chip and chat log: clear of the joystick and the round buttons */
html #chips #bgmchip{position:static!important;transform:none!important;align-self:flex-start;max-width:100%;overflow:hidden;text-overflow:ellipsis;line-height:1.2!important;padding:5px 11px!important}
html.uxkb #log{bottom:214px}
/* tutorial card on phones: left-aligned so it never covers the minimap / side buttons */
@media (max-width:459px){html #tut2 .card{left:calc(10px + var(--sal));margin-left:0;width:calc(100% - 76px - var(--sal) - var(--sar))}}
@media (max-width:359px){html #tut2 .lumi{display:none}html #tut2 .tx{font-size:15.5px}}
/* mini-game bar: portrait phones keep it under the chips (the short-screen rule was meant for landscape) */
@media (max-height:600px) and (orientation:portrait){html #g2bar{top:186px;left:calc(10px + var(--sal));width:auto}html #g2chip{top:186px}}
@media (max-height:600px){html #g2res.on{transform:translate(-50%,-50%) scale(.92)}html.u2 #g2res .x{width:48px;height:48px}html.u2 #g2res .g2b{min-height:48px}}
html #g2res .g2b{min-height:44px}
html #chips .pill{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:999px;line-height:19px}
body.g2play #chips{display:none}
/* start card: 44 px swatches (two rows), character row scrolls sideways on very narrow phones, footnote drops on short screens */
html #colors{gap:7px}html .sw{width:44px;height:44px}
@media (max-width:389px){html #hats.c2pick{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;touch-action:pan-x;scrollbar-width:none;padding-bottom:2px}html #hats.c2pick .hb{flex:0 0 46px}}
@media (orientation:portrait) and (max-height:700px){html #colors{flex-wrap:nowrap;overflow-x:auto;touch-action:pan-x;scrollbar-width:none;padding:3px 2px 4px}html #colors .sw{flex:none}html #start small{display:none}html #start label{margin-top:6px}html #go{margin-top:10px}}
html #chips .pill:empty{display:none}
/* ===== ux pass (round 2) ===== */
/* landscape phone: side buttons become a row beside the minimap (the column ran into the chat/emote buttons) */
@media (max-height:520px){html #sidebtn{flex-direction:row;top:58px;right:112px}}
/* how-to card of a mini-game starts below the minimap on short portrait screens */
@media (orientation:portrait){html #g2how{margin-top:max(0px,calc(306px - 39vh))}}
/* landscape start card: one swatch row, tighter spacing so the enter button is fully on screen */
@media (orientation:landscape) and (max-height:560px){html #colors{flex-wrap:nowrap;overflow-x:auto;touch-action:pan-x;scrollbar-width:none;padding:3px 2px 4px}html #colors .sw{flex:none}html #start label{margin:4px 4px 3px}html #nick{padding:7px 14px}html #go{margin-top:7px;padding:9px}html #ldline{margin-top:3px}}
#uxkeys button{min-height:44px;min-width:44px}#uxkeys.min button{min-height:44px}
/* chat input open: the chips and the minimap step aside for the text field */
#hud:has(#chatbar[style*="flex"]) #chips,#hud:has(#chatbar[style*="flex"]) #mini,#hud:has(#chatbar[style*="flex"]) #u2ring{visibility:hidden}
/* star pass / photo result: text floor 12 px, buttons 44 px */
html.u2 #g2pass .nd,html.u2 #g2pass .nd small,html.u2 #g2pass small,html.u2 #g2pass .gm{font-size:12px}
body #pmres .vb{min-height:44px}
/* ===== ux pass (round 3) ===== */
/* connection banner sits just above the toast line, clear of chips / minimap / side buttons */
html #uxnet{top:auto;bottom:300px;max-width:calc(100% - 132px)}
@media (orientation:landscape) and (max-height:560px){html #uxnet{bottom:140px}}
/* short portrait screens: the toast stays between the side columns */
@media (orientation:portrait) and (max-height:700px){html #toast{max-width:calc(100% - 128px)}html #uxnet{bottom:296px}}
#hud:has(#chatbar[style*="flex"]) #sidebtn{visibility:hidden}
@media (orientation:landscape) and (max-height:560px){html #nick{padding:8px 14px;min-height:44px}}
html #banner{top:max(26%,252px)}html #banner.show{transform:translate(-50%,-50%) scale(var(--bk,1))}
@media (orientation:landscape) and (max-height:560px){html #banner{top:46%}}
html #uxnet{word-break:keep-all;text-wrap:balance}