@font-face{font-family:"GyeonggiTitle";src:url("assets/fonts/GyeonggiTitle-Light.woff2?v=1") format("woff2");font-weight:100 400;font-style:normal;font-display:swap}
@font-face{font-family:"GyeonggiTitle";src:url("assets/fonts/GyeonggiTitle-Medium.woff2?v=1") format("woff2");font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:"GyeonggiTitle";src:url("assets/fonts/GyeonggiTitle-Bold.woff2?v=1") format("woff2");font-weight:700 900;font-style:normal;font-display:swap}
:root{
  


  
  --ink:#141414; --ink-2:#202020;
  --panel:#292929; --panel-2:#383838;
  --line:#585858; --line-soft:#414141;
  --fg:#f0f0f0; --fg-mid:#b8b8b8; --fg-faint:#929292;
  


  --seal:#aaa; --seal-deep:#3c3c3c;
  
  --jeong:#5b93e0; --sa:#5fae62; --ma:#e05242; --yo:#a97cff; --hwang:#d4a843; --hyeol:#8c2f2f; --mudo:#8e8a9b;
  


  --jeong-e:#3f4c5f; --sa-e:#475748; --ma-e:#60413e; --yo-e:#493a64; --hwang-e:#5f5236; --hyeol-e:#5b4343; --mudo-e:#4e4d51;
  
  --chungi:#d4a843; --yeong:#a97cff; --jin:#7fd4b0;
  --ok:#6fcf97; --warn:#e8b45f; --danger:#e8695f; --ready:#4dffa0;
  

  --top-gap:max(env(safe-area-inset-top),20px);
  --bot-gap:env(safe-area-inset-bottom);
  
  --simma:#e05a3c; --myeong:#6f7fd8; --chukgi:#57c9a6;
  





  --say-size:calc(clamp(11px,round(calc(var(--app-w) * .03), 1px),13px) - var(--game-desktop-font-step));
  
  --sans:"GyeonggiTitle","Malgun Gothic",sans-serif;
  --serif:var(--sans);
  --mono:var(--sans);
  --num:var(--sans);
  --han:var(--sans);
  --story:var(--sans);
  --mjo:var(--sans);
  


  --game-desktop-font-step:-1px;
  --r-s:4px; --r-m:8px; --app-w:min(430px,100svw); --view-w:100svw;
  







  --pop:cubic-bezier(.34,1.56,.64,1);
  --press:cubic-bezier(.2,.8,.2,1);
  





  











  --app-h:100svh; --k:1;
  


  --sura-w:74px; --sura-gap:40px;
  







  --fxk:var(--k);
}











.card,.unit,.hcard,.gcard,.stg-card{--game-desktop-font-step:0px}





*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--fg);font-family:var(--sans);font-size:calc(14px - var(--game-desktop-font-step));line-height:1.55;-webkit-text-size-adjust:100%;
  
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}















html,body{-webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
  touch-action:manipulation;overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent}

input,textarea{font:inherit;color:inherit;-webkit-user-select:text;user-select:text}
:focus-visible{outline:2px solid var(--seal);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}





.stage{height:var(--vh-real,100svh);display:flex;justify-content:center;align-items:center;overflow:hidden;
  position:relative;isolation:isolate;
  
  --sans:"GyeonggiTitle","Malgun Gothic",sans-serif;
  --serif:var(--sans);--mono:var(--sans);--num:var(--sans);--han:var(--sans);
  --story:var(--sans);--mjo:var(--sans);font-family:var(--sans);
  background:var(--ink)}





.stage::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(90deg,#05070d66 0%,transparent 27%,transparent 73%,#05070d66 100%),
    url("assets/ui/bg_main_boat_wide_v1.webp?v=1") center/auto 100% no-repeat;
  filter:blur(2px)}



.stage:has(#s-title.on)::before{background:
    linear-gradient(90deg,#16486224 0%,transparent 25%,transparent 75%,#16486224 100%),
    url("assets/ui/bg_title_anime_master_v1.webp?v=1") center/auto 100% no-repeat;
  filter:blur(2px)}




.stage > .app{z-index:1}








.app{width:var(--app-w);height:var(--app-h);flex:none;zoom:var(--k);
  display:flex;flex-direction:column;
  background:var(--ink-2);border-inline:1px solid var(--line-soft);position:relative;overflow:hidden;
  box-shadow:0 0 72px 18px #03050ad9}
@supports not (zoom:2){
  .app{zoom:normal;transform:scale(var(--k));transform-origin:center center}
}

@media (max-width:519px){.stage::before{display:none}.app{box-shadow:none}}

.app.silk{background-color:var(--ink-2)}

.app.silk .tile{background:linear-gradient(160deg,#292929bf,#383838bf);backdrop-filter:blur(3px)}
.app.silk .tile:hover{background:linear-gradient(160deg,#292929d9,#383838d9)}
.app.silk .fbtn{background:#292929a8;backdrop-filter:blur(3px)}
.app.silk .fbtn.pri{background:color-mix(in srgb,var(--seal-deep) 82%,transparent)}
.app.silk .fbtn.dg{background:#241417a8}



.app.silk .fbtn[disabled],.app.silk .fbtn:disabled,
.app.silk .fbtn.pri[disabled],.app.silk .fbtn.pri:disabled{
  opacity:1;background:#241417;border-color:#5f2c26;color:#ff9a8e;cursor:default}
.app.silk .ubtn,.app.silk .chip,.app.silk .fsel,.app.silk .fq{background:#292929a0;backdrop-filter:blur(2px)}
.app.silk .chip.on{background:color-mix(in srgb,var(--seal-deep) 84%,transparent)}
.app.silk .topbar{background:#202020d9;backdrop-filter:blur(7px)}
.app.silk .ftog,.app.silk .askbox,.app.silk .jinbox,.app.silk .devbox{background:#242424c4;backdrop-filter:blur(3px)}
.app.silk .signin .si{background:#202020bf}

.app::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background:repeating-linear-gradient(90deg,#ffffff04 0 1px,transparent 1px 3px)}























.app.moonback::before{inset:-2%;opacity:1;filter:blur(4px);
  background:url("assets/ui/bg_main_boat_wide_v1.webp?v=1") center/auto 100% no-repeat}




.app.moonback.mainbg::before{animation:mainBackdropBlur 1.4s ease-out both}
@keyframes mainBackdropBlur{from{filter:blur(0)}to{filter:blur(4px)}}
@media (prefers-reduced-motion:reduce){.app.moonback.mainbg::before{animation-duration:.01ms}}
.app > *{position:relative;z-index:1}

.app.moonback #s-camp{background:transparent}
.app.moonback #s-camp .cmback,.app.moonback #s-camp .cmsilk{display:none}





















.glow{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  opacity:0;transition:opacity .7s ease}
.app.fog .glow{opacity:1}

.glow i{position:absolute;display:block;
  width:var(--gw,60%);aspect-ratio:1;
  left:var(--gx,20%);top:var(--gy,40%);
  














  background:radial-gradient(circle closest-side,
    #ffffff26 0%,#ffffff22 10%,#ffffff1b 22%,#ffffff14 34%,
    #ffffff0e 46%,#ffffff09 58%,#ffffff06 68%,#ffffff04 77%,
    #ffffff02 85%,#ffffff01 92%,#ffffff00 100%);
  will-change:transform,opacity;
  

  animation:var(--ga,glowdrift1) var(--gd,53s) ease-in-out infinite,
            glowbreathe var(--gb,29s) ease-in-out infinite}
.glow i:nth-child(1){--gw:66%;--gx:-12%;--gy:26%;--ga:glowdrift1;--gd:53s;--gb:29s}
.glow i:nth-child(2){--gw:52%;--gx: 46%;--gy: 4%;--ga:glowdrift2;--gd:71s;--gb:23s;animation-delay:-19s,-8s}
.glow i:nth-child(3){--gw:44%;--gx: 14%;--gy:58%;--ga:glowdrift3;--gd:37s;--gb:31s;animation-delay:-11s,-17s}


@keyframes glowdrift1{
  0%,100%{transform:translate(  0%,  0%) scale(1)}
  25%    {transform:translate( 46%,-18%) scale(1.10)}
  50%    {transform:translate( 88%, 22%) scale(.92)}
  75%    {transform:translate( 34%, 46%) scale(1.04)}}
@keyframes glowdrift2{
  0%,100%{transform:translate(  0%,  0%) scale(1)}
  30%    {transform:translate(-52%, 34%) scale(.94)}
  60%    {transform:translate( 18%, 78%) scale(1.12)}
  82%    {transform:translate(-26%, 28%) scale(1)}}
@keyframes glowdrift3{
  0%,100%{transform:translate(  0%,  0%) scale(1)}
  22%    {transform:translate( 62%, 26%) scale(1.06)}
  48%    {transform:translate(104%,-14%) scale(.9)}
  74%    {transform:translate( 40%,-38%) scale(1.08)}}

@keyframes glowbreathe{0%,100%{opacity:.62} 50%{opacity:1}}
@media (prefers-reduced-motion:reduce){ .glow i{animation:none;opacity:.7} }









@media (max-width:640px){
  .app.silk .tile{backdrop-filter:none;background:linear-gradient(160deg,#292929ef,#383838ef)}
  .app.silk .fbtn{backdrop-filter:none;background:#292929e6}
  .app.silk .ubtn,.app.silk .fsel,.app.silk .fq{backdrop-filter:none;background:#292929e0}
  .app.silk .chip{backdrop-filter:none;background:#292929e0}
  .app.silk .topbar{backdrop-filter:none;background:#202020f7}
  .app.silk .ftog,.app.silk .askbox,.app.silk .jinbox,.app.silk .devbox{backdrop-filter:none;background:#242424f0}
  

  .app .varr{backdrop-filter:none;background:#0b0908ef}
  
}











.frowbox{position:relative}
.castband{position:absolute;inset:-4px;z-index:7;display:none;align-items:center;justify-content:center;
  border:2px dashed var(--ok);border-radius:3px;background:#6fcf9720;cursor:pointer;
  box-shadow:inset 0 0 26px #6fcf9740,0 0 16px #6fcf9766;animation:sp 1.1s ease-in-out infinite}
.castband.on{display:flex}

.castband > span{padding:7px 22px;border-radius:4px;background:#0b0908d9;border:1px solid #6fcf9780;
  color:var(--ok);font-size:calc(17px - var(--game-desktop-font-step));font-weight:400;
  letter-spacing:.44em;text-indent:.44em;text-shadow:0 1px 4px #000}

.frowbox:has(.castband.on) .unit,.frowbox:has(.castband.on) .slot{filter:brightness(.8) saturate(.9)}
.castband.on:active{transform:scale(.995);animation:none;
  background:#6fcf9742;border-color:#b6f5cf;box-shadow:inset 0 0 18px #6fcf9766,0 0 14px #6fcf9780}
.rule{height:1px;flex:none;background:linear-gradient(90deg,transparent,var(--line) 12%,var(--fg-faint) 50%,var(--line) 88%,transparent);opacity:.7}



.app.battle-wide > .topbar{z-index:21;border-top:0;background:#0b0a0ceb}



.topbar{flex:none;position:relative;display:flex;align-items:center;gap:8px;
  height:calc(60px + var(--bot-gap));padding:0 16px var(--bot-gap);
  background:var(--panel);border-top:1px solid var(--line-soft)}


.backbtn{width:44px;height:40px;flex:none;margin-left:auto;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-s);color:var(--fg-mid);font-size:calc(20px - var(--game-desktop-font-step));-webkit-tap-highlight-color:transparent}
.backbtn img{display:block;width:40px;height:40px;pointer-events:none}



.screen-name{font-family:var(--mjo);font-weight:400;font-size:calc(14.5px - var(--game-desktop-font-step));letter-spacing:.06em;
  line-height:1.16;min-width:0;text-align:left;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  word-break:break-all;overflow-wrap:anywhere}

.whoami{position:relative;display:flex;align-items:center;gap:8px;min-width:0;padding:3px 6px;margin-left:-6px;margin-right:-4px;border-radius:2px}

.whoami .tface,.whoami .tag-mini{flex:none}
.whoami .screen-name{flex:0 1 auto}

.backbtn[hidden] + .whoami{margin-left:auto}
.whoami[hidden]{display:none}


@media (hover:hover) and (pointer:fine){ .whoami.live:hover{background:var(--panel-2)} }
.whoami:not(.live){pointer-events:none}




.whoami.asback{pointer-events:auto;cursor:pointer;
  padding:12px 34px 12px 8px;margin-left:-8px;margin-right:-26px;border-radius:var(--r-s)}


.whoami.asback:active,.whoami.asback:hover{background:none}
.backbtn:hover,.backbtn:active{background:none;color:var(--fg)}
.tface{width:26px;height:26px;flex:none;font-size:calc(13px - var(--game-desktop-font-step))}


.whoami .nudot{right:auto;left:26px;top:1px}




.whoami.asback .nudot{display:none}

.avatar .nudot{right:2px;top:2px;width:9px;height:9px}

.facepick{position:relative}
.facepick .nudot{right:-1px;top:-1px}
.tface[hidden]{display:none}
.tag-mini{font-size:calc(10.5px - var(--game-desktop-font-step));color:var(--fg-faint);font-variant-numeric:tabular-nums;margin-left:-4px}

.fsbtn.far{margin-left:0}
.fsbtn{width:34px;height:34px;flex:none;margin-left:-6px;margin-right:2px;
  display:flex;align-items:center;justify-content:center;border-radius:2px;
  font-size:calc(15px - var(--game-desktop-font-step));line-height:1;color:var(--fg-faint)}
.fsbtn:hover{background:var(--panel-2);color:var(--fg)}
.fsbtn.on{color:var(--seal)}

.purse{display:flex;gap:6px;font-family:var(--mono);font-size:calc(11.5px - var(--game-desktop-font-step));font-variant-numeric:tabular-nums}
.coin{display:flex;align-items:center;gap:4px;white-space:nowrap;padding:3px 3px;border-radius:var(--r-s)}
.coin:active{background:#ffffff14}



.tip{position:fixed;left:0;z-index:75;padding:12px 14px;border-radius:var(--r-s);
  background:#202020f2;border:1px solid var(--line);box-shadow:0 12px 30px -12px #000;
  transform-origin:left bottom;animation:tipFade .16s ease}
@keyframes tipFade{from{opacity:0}to{opacity:1}}





.tip.at{transform-origin:left top}
.tip.at::before{content:"";position:absolute;top:-5px;left:var(--tip-ax,18px);width:9px;height:9px;
  transform:translateX(-50%) rotate(45deg);background:#202020f2;
  border-left:1px solid var(--line);border-top:1px solid var(--line)}
.tip h4{margin:0 0 6px;font-family:var(--serif);font-size:calc(14px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.06em;
  display:flex;align-items:center;gap:7px}
.tip h4 .sig{font-family:var(--han);font-size:calc(17px - var(--game-desktop-font-step));color:var(--seal);margin-right:2px}
.tip p{margin:0;font-size:calc(12px - var(--game-desktop-font-step));line-height:1.75;color:var(--fg-mid)}
.tip p + p{margin-top:7px;color:var(--fg-faint)}
.tip b{color:var(--fg)}




.tip.awk{border-color:var(--awkl,var(--line));
  background:linear-gradient(180deg,var(--awkb,#202020) 0%,#202020f2 62%);
  box-shadow:0 12px 30px -12px #000,inset 0 1px 0 var(--awkl,transparent)}
.tip.awk h4{color:var(--awkc,var(--fg))}
.tip.awk h4 .sig{color:var(--awkc,var(--seal))}
.tip.awk.심마{--awkc:var(--simma);--awkl:#5c2620;--awkb:#33150fee}
.tip.awk.명경지수{--awkc:var(--myeong);--awkl:#22375c;--awkb:#131f33ee}
.tip.awk.축기{--awkc:var(--chukgi);--awkl:#1e4d3e;--awkb:#0f2a22ee}
.tip.awk.무아지경{--awkc:#c3a9e8;--awkl:#463a5c;--awkb:#2a2333ee}
.tip.awk.결의{--awkc:var(--chungi);--awkl:#5c4a1e;--awkb:#2e2410ee}
.token-img{display:inline-block;width:18px;height:18px;object-fit:contain;vertical-align:middle;filter:drop-shadow(0 1px 2px #000b)}
.mini-token{display:inline-block;width:15px;height:15px;object-fit:contain;vertical-align:-3px;margin-right:2px;filter:drop-shadow(0 1px 1px #000a)}
.tip h4 .token-img{width:25px;height:25px}
.coin.chungi{color:var(--chungi)} .coin.yeong{color:var(--yeong)} .coin.jin{color:var(--jin)}
.vpurse{grid-area:1/1;justify-self:start;margin-left:0;gap:9px;font-size:calc(11px - var(--game-desktop-font-step))}

.screens{flex:1;min-height:0;position:relative}
.screen{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(10px + var(--top-gap)) 16px 28px;display:none;flex-direction:column;gap:18px}
.screen.on{display:flex}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}












.screen.on{animation:mistin .3s ease}
.screen.on:not(#s-battle){animation:mistin-soft .28s cubic-bezier(.22,.8,.25,1)}





@keyframes mistin{
  from{opacity:0;transform:scale(1.03)}
  to{opacity:1;transform:none}}
@keyframes mistin-soft{
  from{opacity:0;transform:translateY(6px) scale(1.012)}
  to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .screen.on{animation:fade .18s ease}
}












.lowmy{position:absolute;inset:0;z-index:15;pointer-events:none;opacity:.26;
  box-shadow:inset 0 0 44px 10px rgba(150,20,30,.5), inset 0 0 110px 26px rgba(90,6,14,.45);
  animation:lowbeat 2.1s ease-in-out infinite}
@keyframes lowbeat{
  0%{opacity:.26} 10%{opacity:.78} 20%{opacity:.4}
  30%{opacity:.66} 46%{opacity:.26} 100%{opacity:.26}}

#myHp.lowmyn{color:#e06464;animation:lowhpn 2.1s ease-in-out infinite}
@keyframes lowhpn{0%,100%{transform:none}10%{transform:scale(1.18)}24%{transform:none}}

@media (prefers-reduced-motion:reduce){
  .lowmy,#myHp.lowmyn{animation-duration:.01ms}
}




.logo{display:flex;flex-direction:column;align-items:center}
.title{position:relative;display:flex;flex-direction:column;align-items:center;
  padding:26px 0 6px;isolation:isolate}








.t-main{position:relative;z-index:1;display:block;
  width:min(calc(var(--app-w) * .518),210px);height:auto;
  filter:brightness(0) invert(1)
         drop-shadow(0 2px 14px #000) drop-shadow(0 0 30px #a97cff2e);
  -webkit-user-select:none;user-select:none;pointer-events:none}

.brandfoot{flex:none;margin-top:-2px;text-align:center;
  font-family:var(--story);font-size:calc(12.5px - var(--game-desktop-font-step));letter-spacing:.06em;white-space:nowrap;
  color:#a49b8b;opacity:.62;text-shadow:0 1px 4px #000;
  -webkit-user-select:none;user-select:none;pointer-events:none}







#s-title.leaving{display:flex;z-index:30;pointer-events:none;animation:none}
#s-title.bye .signin,#s-title.bye .brandfoot{
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .42s ease,transform .42s ease}








.enterfoot{position:absolute;left:50%;bottom:6px;
  font-family:var(--story);font-size:calc(12.5px - var(--game-desktop-font-step));letter-spacing:.06em;white-space:nowrap;
  color:#a49b8b;text-shadow:0 1px 4px #000;
  opacity:0;transform:translate(-50%,12px);
  transition:opacity .42s ease,transform .42s ease;
  -webkit-user-select:none;user-select:none;pointer-events:none}
.enterfoot.on{opacity:.72;transform:translate(-50%,0)}

.signin{width:min(300px,100%);margin-top:46px;display:flex;flex-direction:column;gap:9px;
  transition:opacity .42s ease,transform .42s ease}
.signin .si{padding:11px 12px;font-size:calc(13px - var(--game-desktop-font-step));text-align:center}
.signin .fbtn{flex:none}
.sns-btn{position:relative;min-height:42px;display:flex;align-items:center;justify-content:center;
  font-weight:400;letter-spacing:.01em}
.sns-icon{display:block;width:24px;height:24px;object-fit:contain;flex:none}
.sns-btn .sns-icon{position:absolute;left:12px}
.sns-btn[data-auth="facebook"] .sns-icon{width:22px;height:22px}
.sns-btn[data-auth="x"] .sns-icon{width:20px;height:20px}

#s-title{overflow-y:auto}
@media(min-width:520px){#s-title{scrollbar-width:none}#s-title::-webkit-scrollbar{display:none}}
#s-title .signin{margin-top:35px}
.entry-fields{display:grid;gap:11px;text-align:left;margin:0 0 8px}
.entry-field{display:grid;gap:5px}
.entry-field label{justify-self:start;padding:3px 9px;border:1px solid #777a;border-radius:var(--r-s);background:#252525;color:var(--fg-mid);font:400 11px var(--sans);font-size:calc(11px - var(--game-desktop-font-step));letter-spacing:.04em;line-height:1.5}
.entry-field input{width:100%;height:41px;padding:0 12px;border:1px solid #7777;border-radius:var(--r-s);background:#1919198c;color:var(--fg);font:14px var(--sans);font-size:calc(14px - var(--game-desktop-font-step));outline:none;user-select:text;-webkit-user-select:text}
.entry-field input:hover,.entry-field input:focus{border-color:#aaaaaa}
.entry-field input:focus{box-shadow:0 0 0 2px #aaaaaa33}
.entry-login{min-height:43px}










#siGuest{position:relative;isolation:isolate;
  background:linear-gradient(135deg,#2e2744,#4b3f6e);border-color:#9b8fbb;color:#efeaf8}
#siGuest:hover{background:linear-gradient(135deg,#372e52,#5a4b84)}
#siGuest::before{content:"";position:absolute;inset:-2px;padding:2px;border-radius:calc(var(--r-s) + 2px);
  background:conic-gradient(from var(--toast-turn),transparent 0 8%,#8f7fc0 16%,#e6ddff 23%,#6b5d8c 30%,transparent 40% 58%,#5b4e85 67%,#c9bcea 75%,#7b6aad 82%,transparent 92%);
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
          mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;
  filter:drop-shadow(0 0 5px #9b8fbb);pointer-events:none;
  animation:toast-orbit 3.6s linear infinite}
@media (prefers-reduced-motion:reduce){#siGuest::before{animation:none}}





.freeopen .coin.yeong{display:none}
.freeopen #shopYeong{display:none}
.signup-link{align-self:center;min-width:130px;min-height:44px;padding:10px 15px;color:#d0d0d0;text-decoration:underline;text-decoration-color:#888;text-underline-offset:4px;font:400 12px var(--sans);font-size:calc(12px - var(--game-desktop-font-step));letter-spacing:.06em}
.signup-link:hover,.signup-link:focus-visible{color:#fff}
.entry-social-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.entry-social-row .fbtn{min-width:0}
.entry-social-row .sns-btn .sns-icon{position:static}

.google-mark{position:relative;display:block;width:25px;height:25px;overflow:hidden;border-radius:50%;background:#fff;flex:none}
.google-mark img{position:absolute;left:-4px;top:-4px;width:33px;height:33px;max-width:none}



.entry-links{display:flex;align-items:center;justify-content:center;gap:14px}


.mailn{word-break:keep-all}
@media(max-height:650px){#s-title{justify-content:flex-start;padding-top:12px}#s-title .signin{margin-top:15px}}

.linkb{margin-top:6px;padding:7px;font-size:calc(11px - var(--game-desktop-font-step));letter-spacing:.06em;color:var(--fg-faint)}
.linkb:hover{color:var(--danger)}







.mscene{flex:1;min-height:0;position:relative;isolation:isolate;display:flex;flex-direction:column;padding:0}






.mscene > *{position:relative;z-index:1}









.mtop{position:relative;z-index:5;flex:none;display:flex;align-items:center;gap:8px}
.mic{position:relative;flex:none;width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--r-s);background:#0d0b11a6;
  font-family:var(--han);font-size:calc(16px - var(--game-desktop-font-step));line-height:1;color:#cfc6b6;
  -webkit-tap-highlight-color:transparent;transition:border-color .14s,color .14s,opacity .14s}




.mtop .mic{border-color:transparent;background:none}
.mtop .mic:focus-visible{outline:1px solid var(--seal);outline-offset:2px}
.mtop .mic.more.on{border-color:transparent}
.mic:focus,.mic:focus-visible{outline:none}
.mic:active{border-color:var(--seal);color:var(--fg)}
.mic-pic{width:22px;height:22px;display:block;background:center/contain no-repeat;pointer-events:none}

#vEvent{background:radial-gradient(120% 80% at 50% 50%,#040508ed 0%,#040508ad 64%,#04050854 100%),#080a0c9e;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}

#vEvent .evbox{width:min(440px,100%);max-height:min(calc(var(--app-h) * .88),800px);display:flex;flex-direction:column;min-height:0;
  padding:18px 14px 14px;background:linear-gradient(155deg,#1b1f28,#0e1016);border:1px solid var(--line);
  box-shadow:0 18px 48px #0009;border-radius:8px}
#vEvent .evtop{display:flex;flex:none;align-items:center;justify-content:space-between;margin:0 2px 14px}
#vEvent .evtop h3{font-family:var(--serif);font-size:calc(19px - var(--game-desktop-font-step));margin:0;color:var(--fg)}
#vEvent .ev-close{width:28px;height:28px;border:1px solid var(--line);border-radius:3px;color:var(--fg-mid);font-size:calc(21px - var(--game-desktop-font-step));line-height:1}

#vEvent .hptabs{height:104px;min-height:104px;padding:6px 4px;margin-bottom:10px;flex:none;align-items:stretch;gap:0;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity}
#vEvent .ev-tab{position:relative;flex:1 0 90px;min-width:90px;display:flex;flex-direction:column;align-items:center;
  gap:4px;padding:10px 8px 8px;color:var(--fg-mid);font-size:calc(11px - var(--game-desktop-font-step));scroll-snap-align:center;text-align:center;cursor:pointer}
#vEvent .ev-tab::before{content:"";position:absolute;top:35px;left:0;right:0;border-top:1px solid #666;z-index:0}
#vEvent .ev-tab:first-child::before{left:50%}
#vEvent .ev-tab:last-child::before{right:50%}
#vEvent .ev-tab-mark{z-index:1;margin:6px auto 6px;box-shadow:0 0 0 3px #14161d,inset 0 1px 0 #ffffff1f,0 3px 10px #000a}
#vEvent .ev-tab-mark::before,#vEvent .ev-tab-mark::after{display:none}
#vEvent .ev-tab.on{color:var(--fg)}
#vEvent .ev-tab.on .ev-tab-mark{--og:#d8aa65;box-shadow:0 0 0 3px #14161d,inset 0 1px 0 #ffffff1f,0 0 13px #d8aa6577}
#vEvent .ev-tab-label{position:relative;z-index:1;white-space:nowrap}

#vEvent .ev-tab-mark .ev-tab-dot{left:calc(50% - 4px);top:-15px;right:auto;z-index:2}
#vEvent .evscroll{flex:1 1 auto;overflow-y:auto;min-height:0;padding:2px;scrollbar-width:thin;touch-action:pan-y}
#vEvent .ev-att-note{text-align:center;font-size:calc(12px - var(--game-desktop-font-step));color:#b8b8b8;line-height:1.65;margin:0 0 10px}
#vEvent .ev-att-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,2.2fr);
  grid-template-rows:auto auto;gap:clamp(6px,calc(var(--app-w) * .019),9px);align-items:stretch;margin:12px 0 16px}
#vEvent .ev-att-grid .a7c{min-width:0}
.ev-card{border:1px solid #505050;background:#242424;border-radius:var(--r-s);padding:15px;margin:0 0 12px}
.ev-card .ev-card{background:#1c1c1c;margin-top:10px}
.ev-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.ev-head strong{font-size:calc(14px - var(--game-desktop-font-step));color:var(--fg)}
.ev-sub{font-size:calc(11px - var(--game-desktop-font-step));color:#b8b8b8;line-height:1.65;margin:0 0 10px}
.ev-intro{margin:2px 2px 13px;color:#c6cbd8;font-size:calc(11px - var(--game-desktop-font-step));line-height:1.6}
.ev-intro p{margin:0 0 4px}
.ev-person{font-size:calc(13px - var(--game-desktop-font-step));color:var(--fg);margin:0 0 9px}
.ev-person-name{display:inline-flex;align-items:baseline;gap:3px;white-space:nowrap}
.ev-name{font-family:var(--mjo);font-size:calc(13px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.02em}
.ev-tag{font-size:calc(10px - var(--game-desktop-font-step));color:var(--fg-faint);font-variant-numeric:tabular-nums}
.ev-code{display:flex;align-items:center;gap:8px;min-width:0}
.ev-code code{font-size:calc(11px - var(--game-desktop-font-step));overflow-wrap:anywhere;color:var(--fg-mid);min-width:0;flex:1}
.ev-code .uidcopy{color:var(--fg-mid)}
.ev-input{display:flex;gap:6px}
.ev-input .fq{padding:10px;min-width:0}
.ev-input .fbtn{flex:none;width:auto;min-width:66px}
.ev-days{display:grid;gap:5px;margin-top:10px}
.ev-day{display:flex;align-items:center;gap:8px;padding:7px 8px;background:#232734;border:1px solid #333a4a;border-radius:3px;font-size:calc(11px - var(--game-desktop-font-step));color:var(--fg-mid)}
.ev-day b{margin-left:auto;color:var(--fg)}
.ev-day .ft-go{min-width:88px;padding:6px 9px;font-size:calc(11px - var(--game-desktop-font-step))}
.ev-day.done{opacity:.58}
.mic-pic.mail{background-image:url(assets/ui/icon_top_mail_anime_v1.webp?v=1)}
.mic-pic.chat{background-image:url(assets/ui/icon_chat.webp?v=2)}


.mic-pic.morepic{background-image:url(assets/ui/icon_music_anime_v1.webp?v=2);transition:filter .15s}


.mic.more.on .mic-pic.morepic{filter:brightness(1.18)}
.mic-pic.sound{background-image:url(assets/ui/icon_sound.webp?v=1)}

.mic-pic.help{background-image:url(assets/ui/icon_top_help_anime_v1.webp?v=1)}

.mic-pic.report{background-image:url(assets/ui/icon_report.webp?v=1)}


.mic-pic.flag{background-image:url(assets/ui/icon_lang_ko.png?v=1)}

.lang.en .mic-pic.flag{background-image:url(assets/ui/icon_lang_en.png?v=1)}




.mic.more.on{border-color:var(--seal);color:var(--fg)}


















.mmore{position:absolute;z-index:60;right:12px;top:56px;
  width:min(344px,calc(var(--app-w) - 24px));min-width:0;min-height:0;padding:10px;
  max-height:var(--mm-max,none);overflow:hidden;
  display:flex;flex-direction:column;gap:2px;transform-origin:top right;
  border:1px solid var(--line);border-radius:var(--r-s);
  






  background:#0d0b11f2;
  box-shadow:0 15px 36px #000c,inset 0 0 0 1px #ffffff0a}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .mmore{background:#0d0b11c7;
    -webkit-backdrop-filter:blur(17px) saturate(1.1);backdrop-filter:blur(17px) saturate(1.1)}
}
.mmore[hidden]{display:none}
.mmore.in{animation:mmorein .18s cubic-bezier(.2,.9,.3,1)}
@keyframes mmorein{from{opacity:0;transform:scale(.88) translateY(-7px)}to{opacity:1;transform:none}}
.mmore.out{animation:mmoreout .13s ease-in forwards}
@keyframes mmoreout{to{opacity:0;transform:scale(.93) translateY(-5px)}}
.mmi{display:flex;align-items:center;gap:9px;padding:8px 10px;border:0;border-radius:var(--r-s);
  background:none;color:var(--fg-mid);font-size:calc(12.5px - var(--game-desktop-font-step));text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background .14s,color .14s}




.mmi.doc{text-decoration:none}
.mmi:active{background:#ffffff12;color:var(--fg)}
.mmi .mic-pic{position:relative;width:19px;height:19px;flex:none}

.mmi.off .mic-pic{opacity:.3;filter:grayscale(1) brightness(.7)}
.mmi.off{color:var(--fg-faint)}



.mmi[hidden]{display:none}




.mm-wrap{display:flex;flex-direction:column;gap:6px;min-width:0;min-height:0}





.mm-foot{display:flex;justify-content:flex-end;gap:3px;
  margin-top:1px;padding-top:5px;border-top:1px solid var(--line)}
.mm-foot .mmi{padding:7px 10px;font-size:calc(11.5px - var(--game-desktop-font-step));min-width:0;flex:none}
.mm-foot .mmi-t{flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mm-h{margin:1px 0 0;padding:0 4px;font-family:var(--serif);font-size:calc(10.5px - var(--game-desktop-font-step));font-weight:400;
  letter-spacing:.08em;color:var(--fg-faint)}










.bgrow{display:flex;align-items:stretch;gap:10px;min-width:0;min-height:0;
  --bgi-h:28px; --bgi-rows:8;
  height:calc(var(--bgi-h) * var(--bgi-rows) + (var(--bgi-rows) - 1) * 1px)}
.bgrow .bgl{flex:1;min-width:0;max-height:none}

.bgl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.bgl::-webkit-scrollbar{display:none}






.bgi{width:100%;display:flex;align-items:center;gap:7px;padding:0 4px;border:0;
  height:var(--bgi-h,28px);flex:none;
  border-radius:var(--r-s);background:none;color:var(--fg-mid);
  font-family:var(--mjo);font-size:calc(11px - var(--game-desktop-font-step));font-weight:400;line-height:1.2;
  text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.bgi:active{background:#ffffff12}
.bgi-n{flex:none;width:12px;font-family:var(--mono);font-size:calc(10.5px - var(--game-desktop-font-step));font-weight:400;
  color:var(--fg-faint);font-variant-numeric:tabular-nums}



.bgi-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bgi.on{color:var(--fg)}
.bgi.on .bgi-n{color:var(--og-hi,#aaaaaa)}

.bgi-eq{flex:none;display:none;align-items:flex-end;gap:1.5px;height:11px}
.bgi.on .bgi-eq{display:flex}
.bgi-eq i{display:block;width:2px;height:3px;border-radius:1px;background:var(--og-hi,#aaaaaa)}
.bgi.go .bgi-eq i{animation:bgeq .9s ease-in-out infinite}
.bgi.go .bgi-eq i:nth-child(2){animation-delay:-.3s}
.bgi.go .bgi-eq i:nth-child(3){animation-delay:-.6s}

@keyframes bgeq{0%,100%{height:3px}50%{height:11px}}
@media (prefers-reduced-motion:reduce){ .bgi.go .bgi-eq i{animation:none;height:7px} }













.bgvols{flex:none;display:flex;gap:7px;align-items:stretch}
.bgvol{flex:none;width:42px;display:flex;flex-direction:column;align-items:center;gap:4px;
  cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;
  user-select:none;-webkit-user-select:none}
.bgvol:focus-visible{outline:2px solid var(--og-hi,#aaaaaa);outline-offset:3px;border-radius:21px}


.bv-h{flex:none;font-family:var(--mjo);font-size:calc(9.5px - var(--game-desktop-font-step));font-weight:400;line-height:1;
  letter-spacing:-.02em;white-space:nowrap;color:var(--fg-faint)}
.bgvol.live .bv-h{color:var(--fg-mid)}
.bv-n{flex:none;font-family:var(--mono);font-size:calc(9.5px - var(--game-desktop-font-step));line-height:1;
  font-variant-numeric:tabular-nums;color:var(--fg-faint);transition:color .12s}
.bgvol.live .bv-n{color:var(--og-hi,#aaaaaa)}

.bv-rail{position:relative;flex:1;min-height:60px;width:100%;border-radius:19px;
  background:#ffffff14;box-shadow:inset 0 0 0 1px #ffffff0f,inset 0 1px 6px #0007;
  overflow:hidden}
.bv-fill{position:absolute;left:0;right:0;bottom:0;height:100%;border-radius:19px;
  background:linear-gradient(180deg,var(--og-hi,#aaaaaa),#626b8d);
  box-shadow:0 0 12px #aaaaaa44}


.bv-ic{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);z-index:2;
  display:block;width:17px;height:17px;color:#f2ecdf;
  filter:drop-shadow(0 1px 2px #000a);transition:color .12s,opacity .12s}
.bv-ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.bv-ic svg .f{fill:currentColor;stroke:none}
.bgvol.lv0 .bv-ic{opacity:.34}
.bgvol.lv0 .bv-ic .w,.bgvol.lv1 .bv-ic .w2{opacity:0}
.bgvol.lv0 .bv-fill{background:#ffffff1f;box-shadow:none}

.bv-rail{transition:transform .1s cubic-bezier(.2,.9,.3,1)}
.bgvol.live .bv-rail{transform:scaleX(1.06)}
@media (prefers-reduced-motion:reduce){ .bv-rail{transition:none} .bgvol.live .bv-rail{transform:none} }

.bgbar{position:relative;height:3px;margin:1px 4px 0;border-radius:2px;
  background:#ffffff1c;overflow:hidden;pointer-events:none}
.bgbar i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--og,#666666),var(--og-hi,#aaaaaa))}
.bgtime{display:flex;justify-content:space-between;margin:0;padding:0 4px;
  font-family:var(--mono);font-size:calc(9.5px - var(--game-desktop-font-step));color:var(--fg-faint);font-variant-numeric:tabular-nums}

.bgctl{display:flex;align-items:center;justify-content:space-between;gap:2px;padding:1px 2px 2px}
.bgc{flex:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  padding:0;border:0;border-radius:50%;background:none;color:var(--fg-mid);cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:color .14s}
.bgc svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.bgc svg .f{fill:currentColor;stroke:none}
.bgc:active{color:var(--fg)}
.bgc.on{color:var(--og-hi,#aaaaaa)}





.bgc.tg{opacity:.34;filter:grayscale(1) brightness(.75)}
.bgc.tg.on{opacity:1;filter:none}
.bgc.big{width:34px;height:34px;color:var(--fg);
  background:linear-gradient(160deg,#262936,#131520);
  border:1px solid var(--og,#666666);box-shadow:inset 0 1px 0 #ffffff1f,0 2px 7px #0008}
.bgc.big svg{width:17px;height:17px}

.bgc .ic-pause,.bgc.on .ic-play{display:none}
.bgc.on .ic-pause{display:block}

.bgc #bgRepOne,.bgc svg text.one{fill:currentColor;stroke:none;font-size:calc(9px - var(--game-desktop-font-step));font-weight:400;
  text-anchor:middle;opacity:0;font-family:var(--mono)}
.bgc.on svg text.one{opacity:1}
.mmi-t{flex:1;min-width:0;white-space:nowrap}
.mic-pic.privacy{background-image:url(assets/ui/icon_privacy.webp?v=4)}
.mic-pic.terms{background-image:url(assets/ui/icon_terms.webp?v=4)}






.mmi.sound-toggle.off{color:var(--fg-faint)}
.mmi.sound-toggle.off .mic-pic{opacity:.3;filter:grayscale(1) brightness(.7)}






#s-mail .hptabs{gap:6px;margin-bottom:12px;flex:none}
#s-mail .hptab{flex:1;text-align:center;position:relative;padding:8px 6px;font-size:calc(12px - var(--game-desktop-font-step))}

.tabdot{position:absolute;right:5px;top:5px;width:5px;height:5px;border-radius:50%;
  background:var(--warn);box-shadow:0 0 6px #e8b34dcc}


.mllist{display:flex;flex-direction:column;gap:9px;padding-bottom:6px;flex:1 1 auto}





.mlnone{flex:1;min-height:calc(var(--app-h) * .4);display:flex;align-items:center;justify-content:center;
  margin:0;text-align:center;font-size:calc(12.5px - var(--game-desktop-font-step));letter-spacing:.02em;color:var(--fg-faint)}




.grid > .mlnone{grid-column:1 / -1}
.mlbox{border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel);
  padding:12px 13px;transition:border-color .16s,opacity .16s}

.mlbox.ok{border-color:var(--seal);background:linear-gradient(180deg,#221b2acc,var(--panel))}
.mlbox.off{opacity:.46}


.mlbox.ok,.mlbox.off{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:11px}
.ml-ico{flex:none;display:flex;align-items:center;justify-content:center;gap:2px;
  width:46px;height:46px;border-radius:var(--r-s);
  background:#0e0b14;border:1px solid var(--line-soft);box-shadow:inset 0 0 12px #0009}
.ml-ico img{width:26px;height:26px;object-fit:contain;filter:drop-shadow(0 1px 2px #000b)}

.ml-ico img + img{width:20px;height:20px;margin-left:-6px}
.ml-t{font-family:var(--serif);font-size:calc(13.5px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.02em;color:var(--fg);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ml-d{margin-top:3px;font-size:calc(11px - var(--game-desktop-font-step));line-height:1.5;color:var(--fg-mid);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.mlbox.reply .ml-d{display:block;overflow:visible;-webkit-line-clamp:unset;
  white-space:pre-wrap;overflow-wrap:anywhere}
.mlbox.reply{align-items:start}
.ml-f{display:flex;align-items:center;gap:8px;margin-top:6px}
.ml-pays{display:flex;align-items:center;gap:8px;min-width:0}


.ml-pay{display:inline-flex;align-items:center;gap:3px;
  font-family:var(--mono);font-size:calc(11px - var(--game-desktop-font-step));font-variant-numeric:tabular-nums;color:var(--fg-mid)}
.ml-pay.chungi{color:var(--chungi)} .ml-pay.yeong{color:var(--yeong)} .ml-pay.jin{color:var(--jin)}
.ml-pay .mini-token{margin:0}


.ml-act{flex:none;display:flex;flex-direction:column;align-items:center;gap:5px}

.ml-left{flex:none;text-align:center;white-space:nowrap;
  font-family:var(--mono);font-size:calc(10px - var(--game-desktop-font-step));letter-spacing:.04em;color:var(--fg-faint)}
.ml-left.soon{color:var(--warn)}
.ml-left.over{color:var(--danger)}

.ml-go{flex:none;min-width:62px;padding:9px 12px;border-radius:var(--r-s);
  border:1px solid var(--chungi);background:#2a2110;color:var(--chungi);
  font-family:var(--serif);font-size:calc(12px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.04em;
  box-shadow:0 0 10px -2px #d4a84355;-webkit-tap-highlight-color:transparent;transition:.14s}
.ml-go:not([disabled]):active{transform:scale(.97);background:#3a2d14}
.ml-go[disabled]{border-color:var(--line);border-style:dashed;background:var(--panel-2);
  color:var(--fg-faint);box-shadow:none}

.note-box{display:block}
.ml-h{display:flex;align-items:baseline;gap:9px;margin-bottom:7px;
  padding-bottom:7px;border-bottom:1px solid var(--line-soft)}
.ml-v{font-family:var(--mono);font-size:calc(12.5px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.06em;color:var(--seal)}

.ml-v.alt{font-family:var(--serif);font-size:calc(13.5px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.02em;color:var(--fg)}





.ml-greet{margin:0 0 10px;font-size:calc(11.5px - var(--game-desktop-font-step));line-height:1.75;color:var(--fg-mid)}
.ml-greet.end{margin:12px 0 0}
.ml-cat{margin:12px 0 5px;font-size:calc(11.5px - var(--game-desktop-font-step));font-weight:400;color:var(--fg);letter-spacing:.04em;
  padding-left:8px;border-left:2px solid var(--seal)}

.ml-new{font-size:calc(10px - var(--game-desktop-font-step));font-weight:400;line-height:1;padding:3px 6px 2px;border:1px solid var(--seal);border-radius:3px;
  color:var(--seal);background:#c9524a1a;letter-spacing:.08em;align-self:center}
.ml-date{margin-left:auto;font-family:var(--mono);font-size:calc(10px - var(--game-desktop-font-step));color:var(--fg-faint)}
.ml-li{margin:0;padding-left:15px;display:flex;flex-direction:column;gap:5px}
.ml-li li{font-size:calc(11.5px - var(--game-desktop-font-step));line-height:1.75;color:var(--fg-mid)}
.ml-li li::marker{color:var(--fg-faint)}



.ml-p{margin:0 0 7px;font-size:calc(11.5px - var(--game-desktop-font-step));line-height:1.75;color:var(--fg-mid);white-space:pre-line}
.ml-p:last-child{margin-bottom:0}




.ml-sec{margin:14px 0 8px;padding:5px 10px;border-left:3px solid var(--og,#666666);
  border-radius:0 3px 3px 0;background:#ffffff0a;
  font-family:var(--serif);font-size:calc(12.5px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.02em;color:var(--fg)}
.ml-sec:first-child{margin-top:2px}



.ml-more{margin:9px 0 0;padding-top:7px;border-top:1px dashed var(--line-soft);
  text-align:center;font-size:calc(10.5px - var(--game-desktop-font-step));letter-spacing:.06em;color:var(--fg-faint);
  pointer-events:none;user-select:none}
.note-box:not(.open)[data-note] .ml-h{margin-bottom:0;padding-bottom:0;border-bottom:0}
.note-box.open .ml-more{color:var(--fg-faint);opacity:.75}


.ml-sig{margin:11px 0 0;text-align:right;
  font-family:var(--serif);font-size:calc(11.5px - var(--game-desktop-font-step));letter-spacing:.04em;color:var(--fg-faint)}





.ftlist{display:flex;flex-direction:column;gap:9px;padding-bottom:6px}

.ftprog{flex:none;margin-bottom:12px;padding:12px 14px 10px;border:1px solid var(--line);
  border-radius:var(--r-s);background:linear-gradient(180deg,#1d1824e6,var(--panel))}
.fp-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.fp-t{font-family:var(--serif);font-size:calc(14px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.04em;color:var(--fg)}
.fp-p{font-family:var(--num);font-size:calc(15px - var(--game-desktop-font-step));font-weight:400;color:var(--chungi);font-variant-numeric:tabular-nums}

.fp-track{position:relative;margin:10px 26px 0 8px}
.fp-rws{position:relative;height:44px}
.fp-rw{position:absolute;bottom:4px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:2px;min-width:40px;padding:4px 3px 3px;
  border:1px dashed var(--line);border-radius:var(--r-s);background:var(--panel-2);
  font-family:var(--mono);font-size:calc(9.5px - var(--game-desktop-font-step));font-weight:400;color:var(--fg-faint);font-variant-numeric:tabular-nums;
  -webkit-tap-highlight-color:transparent;transition:.14s}
.fp-rw .mini-token{width:16px;height:16px;margin:0;filter:grayscale(1) opacity(.7)}

.fp-rw.ok{border:1px solid var(--chungi);color:var(--chungi);background:#2a2110;
  box-shadow:0 0 10px -1px #d4a84377;animation:fpglow 1.6s ease-in-out infinite}
.fp-rw.ok .mini-token{filter:none}
.fp-rw.ok:active{transform:translateX(-50%) scale(.95)}
@keyframes fpglow{50%{box-shadow:0 0 16px 1px #d4a843aa}}

.fp-rw.got{border-style:solid;border-color:#3d5a3f;opacity:.7}
.fp-ck{position:absolute;top:-6px;right:-6px;width:15px;height:15px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-style:normal;font-size:calc(10px - var(--game-desktop-font-step));
  background:#2f7d45;color:#fff;box-shadow:0 1px 3px #000a}
.fp-bar{position:relative;height:6px;border-radius:3px;background:#ffffff12;border:1px solid #2a2530;overflow:hidden}
.fp-bar > i{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,#8a6f3a,var(--chungi));transition:width .4s ease}
.fp-tks{position:relative;height:16px}
.fp-tk{position:absolute;top:-10px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.fp-tk::before{content:"";width:7px;height:7px;border-radius:2px;background:#4a4352;border:1px solid #0008}
.fp-tk.on::before{background:var(--chungi)}
.fp-tk b{margin-top:2px;font-family:var(--mono);font-size:calc(9.5px - var(--game-desktop-font-step));font-weight:400;color:var(--fg-faint)}
.fp-tk.on b{color:#e6dccb}
.ftbox{border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel);
  padding:12px 13px 11px;transition:border-color .16s,opacity .16s}

.ftbox.ok{border-color:var(--seal);background:linear-gradient(180deg,#221b2acc,var(--panel))}



.ftbox.done{filter:grayscale(1)}
.ft-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ft-n{font-family:var(--serif);font-size:calc(14.5px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.03em;color:var(--fg)}
.ft-t{font-family:var(--mono);font-size:calc(10px - var(--game-desktop-font-step));color:var(--fg-faint);white-space:nowrap;flex:none}
.ft-d{margin:4px 0 9px;font-size:calc(11.5px - var(--game-desktop-font-step));line-height:1.55;color:var(--fg-mid)}
.ft-bar{height:5px;border-radius:3px;background:#ffffff12;border:1px solid #2a2530;overflow:hidden}
.ft-bar > i{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,#6f5ba8,#b79bff);transition:width .3s ease}
.ftbox.ok .ft-bar > i{background:linear-gradient(90deg,#8a6f3a,var(--chungi))}
.ft-f{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px}
.ft-c{font-family:var(--mono);font-size:calc(11px - var(--game-desktop-font-step));font-variant-numeric:tabular-nums;color:var(--fg-mid)}


.ft-go{flex:none;min-width:88px;padding:7px 13px;border:1px solid var(--line);border-radius:var(--r-s);
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  font-family:var(--mono);font-size:calc(12px - var(--game-desktop-font-step));font-weight:400;font-variant-numeric:tabular-nums;
  color:var(--fg-faint);background:var(--panel-2);
  -webkit-tap-highlight-color:transparent;transition:.14s}
.ft-go .mini-token{width:14px;height:14px;margin:0;transition:filter .14s}

.ft-go:not(.off){border-color:var(--chungi);color:var(--chungi);background:#2a2110;
  box-shadow:0 0 10px -2px #d4a84355}
.ft-go:not(.off):active{transform:scale(.97);background:#3a2d14}

.ft-go.off{opacity:.42;border-style:dashed}
.ft-go.off .mini-token{filter:grayscale(1) opacity(.7)}

.mdk{position:relative}
.mdk-dot{position:absolute;right:calc(50% - 30px);top:-2px;width:7px;height:7px;border-radius:50%;
  background:var(--warn);box-shadow:0 0 7px #e8b34dcc;pointer-events:none}
.mdk-dot[hidden]{display:none}


.mbig .mdk-dot{right:8px;top:8px;width:8px;height:8px}

.buy span.free{color:var(--warn);font-weight:400;letter-spacing:.02em}











.buy .nudot{--nx:5px;--ny:5px}
.buy.freepick{border-color:var(--warn);
  animation:buyfree 1.9s cubic-bezier(.37,0,.63,1) infinite}
@keyframes buyfree{
  0%,100%{box-shadow:0 0 0 1px #e8b45f4d,0 0 12px 1px #e8b45f00}
  50%    {box-shadow:0 0 0 1px #e8b45fcc,0 0 18px 3px #e8b45f59}}
@media (prefers-reduced-motion:reduce){
  .buy.freepick{animation:none;box-shadow:0 0 0 1px var(--warn),0 0 12px 1px #e8b45f45} }




.nudot{position:absolute;right:var(--nx,-1px);top:var(--ny,-1px);
  width:7px;height:7px;border-radius:50%;
  background:var(--warn);box-shadow:0 0 7px #e8b34dcc;pointer-events:none;
  animation:nudotb 1.7s ease-in-out infinite}
.nudot[hidden]{display:none}
@keyframes nudotb{50%{box-shadow:0 0 12px 2px #e8b34d}}

.mic.off{opacity:.42;border-style:dashed;color:var(--fg-faint)}















.mmenu{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  
  container-type:size}






.mmg{
  --mgap:clamp(8px,calc(var(--app-w) * .026),14px);
  --arh:1.52;                 
  --arf:1;
  
  --fit:cover;
  
  --half:calc(min((100cqw - var(--mgap))/2,
             (100cqh - var(--mgap)*(1 + 1/var(--arh))) / (2/var(--arh) + 1/var(--arf))) * .93);
  display:grid;grid-template-columns:repeat(2,var(--half));gap:var(--mgap)}
.mbig{position:relative;min-width:0;padding:0;background:none;border:0;
  -webkit-tap-highlight-color:transparent;transition:transform .14s}
.mbig.hero{grid-column:1/-1;aspect-ratio:var(--arh)}
.mbig.half{aspect-ratio:var(--arf)}

.mstack{aspect-ratio:var(--arf);min-width:0;display:grid;grid-template-rows:1fr 1fr;gap:var(--mgap)}
.mbig.quarter{min-height:0}
.mbig.quarter .mb-n::after{margin-top:2px}
.mbig.quarter .mb-e{font-size:calc(clamp(6px,round(calc(var(--app-w) * .016), 1px),7.5px) - var(--game-desktop-font-step));letter-spacing:.1em;text-indent:.1em}


.mbig.lockd .mb-img{opacity:.66}

.mbig::before{content:"";position:absolute;inset:0;border-radius:var(--r-m);
  background:#14111c;
  box-shadow:0 6px 18px #0009;
  transition:box-shadow .14s}




.mb-img{position:absolute;inset:0;border-radius:var(--r-m);overflow:hidden;
  background:var(--img) var(--ipos,center)/var(--isz,var(--fit)) no-repeat;
  isolation:isolate;transition:filter .14s,transform .28s cubic-bezier(.2,.75,.25,1);pointer-events:none}


.mb-img::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--r-m);
  
  background:radial-gradient(120% 90% at 50% 50%,#0000007f 0%,#00000035 55%,#00000082 100%)}


.mb-img::before{content:"";position:absolute;inset:-18%;z-index:2;pointer-events:none;opacity:0}
#tPvp .mb-img::before{
  background:radial-gradient(ellipse 49% 27% at 25% 78%,#c94343ad 0%,#c9434300 100%),
             radial-gradient(ellipse 43% 24% at 76% 70%,#9c6595a1 0%,#9c659500 100%);
  will-change:transform,opacity;animation:mainBloodMist 14s ease-in-out infinite}
.mbig[data-go="shop"] .mb-img::before{
  
  inset:0;mix-blend-mode:screen;
  background:radial-gradient(ellipse 37% 32% at 52% 70%,#fff1bfed 0%,#f5ad6888 47%,#f5ad6800 100%),
             radial-gradient(ellipse 16% 23% at 35% 61%,#ffe5aeb8 0%,#e9a24f00 100%),
             radial-gradient(ellipse 16% 23% at 69% 61%,#ffe5aeb8 0%,#e9a24f00 100%);
  will-change:transform,opacity;animation:mainCardGlow 14s ease-in-out infinite}
.mbig[data-go="camp"] .mb-img::before{
  background:radial-gradient(ellipse 45% 18% at 24% 55%,#f4ecdfc9 0%,#f4ecdf00 100%),
             radial-gradient(ellipse 45% 17% at 67% 76%,#d7d5e5bf 0%,#d7d5e500 100%);
  will-change:transform,opacity;animation:mainMountainMist 14s ease-in-out infinite}
@keyframes mainBloodMist{
  0%,100%{transform:translate(-7%,3%);opacity:.32}
  50%{transform:translate(7%,-3%);opacity:.57}}
@keyframes mainCardGlow{
  0%,100%{transform:translateY(1%) scale(.98);opacity:.08}
  50%{transform:translateY(-1%) scale(1.02);opacity:.25}}
@keyframes mainMountainMist{
  0%,100%{transform:translate(-11%,2%);opacity:.25}
  50%{transform:translate(12%,-2%);opacity:.47}}
@media (prefers-reduced-motion:reduce){
  #tPvp .mb-img::before,.mbig[data-go="shop"] .mb-img::before,.mbig[data-go="camp"] .mb-img::before{
    animation:none;opacity:.35;transform:none}
  .mbig[data-go="shop"] .mb-img::before{opacity:.125}
  .mbig[data-go="camp"] .mb-img::before{opacity:.25}}
.mbig:focus,.mbig:focus-visible,.mdk:focus,.mdk:focus-visible{outline:none}


.mb-cap{position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:8px;pointer-events:none}


.mb-n{font-family:var(--mjo);font-size:calc(clamp(15px,round(calc(var(--app-w) * .044), 1px),20px) - var(--game-desktop-font-step));font-weight:400;line-height:1.12;
  letter-spacing:.2em;text-indent:.2em;color:#f6f0e4;
  
  text-shadow:0 1px 2px #000,0 2px 6px #000,0 3px 14px #000e,0 0 26px #000c;white-space:nowrap}


.mb-n::after{content:"";display:block;width:38%;height:1px;margin:2px auto 0;
  background:#ffffff8c;box-shadow:0 1px 3px #000c;pointer-events:none}
.mbig.hero .mb-n{font-size:calc(clamp(19px,round(calc(var(--app-w) * .058), 1px),26px) - var(--game-desktop-font-step))}

.mb-e{font-family:var(--mjo);font-size:calc(clamp(6.5px,round(calc(var(--app-w) * .018), 1px),8px) - var(--game-desktop-font-step));font-weight:400;line-height:1.3;
  letter-spacing:.1em;text-indent:.1em;color:#d6cab4;opacity:.72;
  text-shadow:0 1px 3px #000,0 2px 8px #000d;white-space:nowrap}
.mbig.hero .mb-e{font-size:calc(clamp(7px,round(calc(var(--app-w) * .02), 1px),8.5px) - var(--game-desktop-font-step))}

.mbig:active{transform:none}
.mbig:not(.lockd):active .mb-img{transition-duration:.10s}


.mbig:active .mb-img{filter:drop-shadow(0 0 4px var(--seal)) drop-shadow(0 0 12px #aaaaaa8c)}



@media (hover:hover) and (pointer:fine){
  .mbig:hover .mb-img{filter:drop-shadow(0 0 6px #ffffff45) drop-shadow(0 7px 16px #000c)} }

#tPvp .mb-img{opacity:.66}









.mdock{--dkn:5;flex:none;display:flex;justify-content:center;align-items:flex-end;gap:4px}

.mlive{font-family:var(--mono);font-size:calc(10px - var(--game-desktop-font-step));letter-spacing:.1em;
  color:var(--fg-faint);white-space:nowrap}
.mlive:empty{display:none}
.mlive b{color:var(--ok);font-weight:400;font-variant-numeric:tabular-nums}
.mdk{flex:0 0 calc((100% - (var(--dkn) - 1) * 4px) / var(--dkn));min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:0;-webkit-tap-highlight-color:transparent;transition:transform .14s}
.mdk-img{width:100%;max-width:58px;aspect-ratio:1;   
  background:var(--img) center/contain no-repeat;
  filter:drop-shadow(0 0 4px #ffffff20) drop-shadow(0 3px 8px #000a);
  transition:filter .14s}




.mdk[data-go="store"] .mdk-img{transform:translateY(-1px)}

.mdk-img.none{background:none;border:1px dashed #4a4455;border-radius:var(--r-s);opacity:.5}




.mdk.lockd .mdk-img{opacity:.34;filter:grayscale(.95) brightness(.72) drop-shadow(0 3px 8px #000a)}
.mdk.lockd .mdk-n{color:#9a93a6}


.mdk-lock{position:absolute;left:50%;top:calc(50% - 9px);transform:translate(-50%,-50%);
  width:30px;height:30px;border-radius:50%;pointer-events:none;
  

  background:url(assets/ui/icon_lock_anime_v1.webp?v=1) center/26px 26px no-repeat;
  filter:drop-shadow(0 1px 2px #2A4A7A66)}
.mdk-lock[hidden]{display:none}
.mdk-n{font-family:var(--mjo);font-size:calc(10.5px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.06em;text-indent:.06em;
  color:#e8e0d2;text-shadow:0 2px 6px #000;white-space:nowrap;pointer-events:none}
.mdk:active{transform:scale(.95)}
.mdk:active .mdk-img{filter:drop-shadow(0 0 3px var(--seal)) drop-shadow(0 0 11px #aaaaaaaa)}
@media (hover:hover) and (pointer:fine){ .mdk:hover .mdk-img{filter:drop-shadow(0 0 4px #ffffff40) drop-shadow(0 5px 12px #000b)} }
@media (max-width:360px){ .mdk-n{font-size:calc(9.5px - var(--game-desktop-font-step))} .mb-n{font-size:calc(16px - var(--game-desktop-font-step))} }


.tiles{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.tile{position:relative;min-height:98px;border:1px solid var(--line);border-radius:var(--r-s);
  background:linear-gradient(160deg,var(--panel),var(--panel-2));display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;overflow:hidden;transition:border-color .16s,transform .1s}

.tile.hero,.tile.wide{grid-column:1/-1;aspect-ratio:auto;flex-direction:row;justify-content:flex-start;
  gap:15px;padding:0 20px}
.tile.hero{min-height:126px}
.tile.wide{min-height:70px;gap:13px;padding:0 18px}
.t-txt{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.t-en{font-size:calc(9px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.3em;color:var(--fg-faint)}
.tile.hero .t-glyph{font-size:calc(52px - var(--game-desktop-font-step))} .tile.hero .t-name{font-size:calc(25px - var(--game-desktop-font-step));letter-spacing:.14em;margin:0}
.tile.t2 .t-txt,.tile.t3 .t-txt{align-items:center;gap:1px}
.tile.wide .t-glyph{font-size:calc(31px - var(--game-desktop-font-step))} .tile.wide .t-name{font-size:calc(17px - var(--game-desktop-font-step));margin:0}
.tile.hero::after{background:radial-gradient(56% 130% at 18% 120%,var(--tc),transparent 72%)}
.tile.wide::after{background:radial-gradient(48% 150% at 16% 130%,var(--tc),transparent 72%)}
.tile.hero{--tc:#e05a3c4d}
.tile::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 55% at 50% 118%,var(--tc,#a97cff33),transparent 70%)}
.tile:hover{border-color:var(--seal)} .tile:active{transform:translateY(1px)}
.tile.t1{--tc:#d4a84338} .tile.t2{--tc:#4fb39a38} .tile.t3{--tc:#aaaaaa38} .tile.t4{--tc:#e05a3c38}
.tile.t5{--tc:#c9a85c38} .tile.t6{--tc:#6f7fae38} .tile.t7{--tc:#c4453a38}
.t7 .t-glyph{color:var(--seal)}
.tile.t7{opacity:.62} .tile.t7 .t-en{color:var(--fg-faint)}
.t5 .t-glyph{color:#d8b96b} .t6 .t-glyph{color:#8fa0d0}
.tile.t5 .t-txt,.tile.t6 .t-txt{align-items:center;gap:1px}
.t-glyph{font-family:var(--han);font-size:calc(34px - var(--game-desktop-font-step));font-weight:400;line-height:1;opacity:.9}
.t1 .t-glyph{color:var(--chungi)} .t2 .t-glyph{color:var(--jeong)}
.t3 .t-glyph{color:var(--seal)} .t4 .t-glyph{color:var(--ma)}
.t-name{font-family:var(--serif);font-size:calc(15px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.1em;margin-top:4px}



#s-main{gap:0;padding-bottom:6px}


#s-main.on .mbrand,#s-main.on .mtop > .mic:not([hidden]),
#s-main.on .mmg > .mbig,#s-main.on .mstack > .mbig,#s-main.on .mdock > .mdk{
  animation:mainMenuRise .64s cubic-bezier(.22,1,.36,1) backwards;
  animation-delay:var(--main-in,0ms)}
#s-main.on .mbrand{--main-in:80ms}
#s-main.on .mtop > .mic:nth-child(1){--main-in:140ms}
#s-main.on .mtop > .mic:nth-child(2){--main-in:200ms}
#s-main.on .mtop > .mic:nth-child(4){--main-in:260ms}
#s-main.on .mtop > .mic:nth-child(5){--main-in:320ms}
#s-main.on .mmg > .mbig.hero{--main-in:340ms}
#s-main.on .mmg > .mbig.half{--main-in:470ms}
#s-main.on .mstack > .mbig:nth-child(1){--main-in:590ms}
#s-main.on .mstack > .mbig:nth-child(2){--main-in:710ms}
#s-main.on .mdock > .mdk:nth-child(1){--main-in:790ms}
#s-main.on .mdock > .mdk:nth-child(2){--main-in:870ms}
#s-main.on .mdock > .mdk:nth-child(3){--main-in:950ms}
#s-main.on .mdock > .mdk:nth-child(4){--main-in:1030ms}
#s-main.on .mdock > .mdk:nth-child(5){--main-in:1110ms}
@keyframes mainMenuRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#s-main.on .mbrand,#s-main.on .mtop > .mic:not([hidden]),
  #s-main.on .mmg > .mbig,#s-main.on .mstack > .mbig,#s-main.on .mdock > .mdk{animation:none}}




.mbig.press .mb-img,.mdk.press .mdk-img{
  filter:drop-shadow(0 0 3px var(--seal)) drop-shadow(0 0 11px #aaaaaa8c)}
.mdk.press .mdk-img.none{border-color:var(--seal);opacity:.9}

.fbtn.dg.out{margin-top:20px;padding:13px;color:#ff9a8e;border-color:#5f2c26;background:#241417}

#pHelpdesk{margin-top:20px;padding:13px}
#pHelpdesk + .fbtn.dg.out{margin-top:8px}
[hidden]{display:none!important}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:7px}


.note.none{grid-column:1/-1;margin:0;padding:22px 16px;text-align:center;line-height:1.85;
  border:1px dashed var(--line);border-radius:var(--r-s);background:#ffffff05}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.grid2 .prow,.grid3 .prow{flex-direction:column;align-items:flex-start;gap:2px;padding:10px 11px}
.grid3 .prow{align-items:center;text-align:center}
.grid3 .prow span{margin-top:1px}
#s-title{justify-content:safe center;align-items:center;text-align:center;gap:0;padding:26px}
.brand-en{margin-top:11px}
.brand{font-family:var(--serif);font-weight:400;font-size:calc(58px - var(--game-desktop-font-step));letter-spacing:.3em;line-height:1;color:var(--fg);
  text-indent:.24em;text-shadow:0 0 34px #c4453a2e}
.brand-han{font-family:var(--han);font-size:calc(15px - var(--game-desktop-font-step));letter-spacing:.7em;color:var(--seal);margin-top:14px;text-indent:.7em}
.brand-en{font-family:var(--mono);font-size:calc(9.5px - var(--game-desktop-font-step));letter-spacing:.36em;color:var(--fg-faint);margin-top:9px}
.seal{width:44px;height:44px;margin:26px 0 22px;border:2px solid var(--seal);border-radius:3px;
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:calc(19px - var(--game-desktop-font-step));font-weight:400;
  color:var(--seal);transform:rotate(-3deg);box-shadow:0 0 22px #c4453a33}
.han{font-family:var(--han)}
.epigraph{max-width:26ch;font-family:var(--han);font-size:calc(15px - var(--game-desktop-font-step));line-height:2;color:var(--fg-mid);text-wrap:balance}
.epigraph em{color:var(--fg);font-style:normal}
.start-btn{margin-top:30px;padding:12px 44px;border:1px solid var(--seal);border-radius:2px;
  font-family:var(--serif);font-size:calc(16px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.34em;text-indent:.34em;color:#f0e2dd;
  background:linear-gradient(180deg,#3a201c,#241412);transition:box-shadow .3s,transform .12s}
.start-btn:hover{box-shadow:0 0 26px #c4453a44}
.start-btn:active{transform:translateY(1px)}
.title-foot{margin-top:24px;font-family:var(--mono);font-size:calc(9.5px - var(--game-desktop-font-step));color:var(--fg-faint);letter-spacing:.1em}


.gate{display:flex;align-items:center;gap:13px;text-align:left;width:100%;padding:15px 14px;
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel);transition:border-color .18s,background .18s}
.gate:hover{border-color:var(--seal);background:var(--panel-2)}
.gate-mark{width:40px;height:40px;flex:none;border-radius:2px;display:flex;align-items:center;justify-content:center;
  font-family:var(--han);font-size:calc(18px - var(--game-desktop-font-step));font-weight:400;border:1px solid var(--line);background:var(--ink-2)}
.g1 .gate-mark{color:var(--chungi);border-color:#5c4a22}
.g2 .gate-mark{color:var(--jeong);border-color:#2f4f48}
.g3 .gate-mark{color:var(--yeong);border-color:#27505b}
.g4 .gate-mark{color:var(--seal);border-color:#5c2620}
.gate-body{flex:1;min-width:0}
.gate-name{font-family:var(--serif);font-size:calc(16px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.06em;display:block}
.gate-desc{font-size:calc(11.5px - var(--game-desktop-font-step));color:var(--fg-mid);margin-top:2px;display:block}
.gate-arrow{color:var(--fg-faint);flex:none}





.gates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px}
@media (min-width:400px){ .gates{grid-template-columns:repeat(4,minmax(0,1fr))} }

#s-help{gap:0}
.hpsearch{flex:none;position:relative;padding:2px 0 10px}
.hpq{width:100%;padding:11px 34px 11px 13px;font:inherit;font-size:calc(13.5px - var(--game-desktop-font-step));color:var(--fg);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-s);outline:none}
.hpq:focus{border-color:var(--seal)}
.hpq::-webkit-search-cancel-button{display:none}
.hpx{position:absolute;right:6px;top:2px;width:34px;height:44px;background:none;border:0;
  color:var(--fg-faint);font-size:calc(19px - var(--game-desktop-font-step));cursor:pointer}
.hpbody{flex:1;min-height:0;overflow-y:auto;padding-bottom:12px}
.hpn{font-family:var(--mono);font-size:calc(10px - var(--game-desktop-font-step));letter-spacing:.14em;color:var(--fg-faint);padding:2px 0 8px}
.hplist{display:flex;flex-direction:column;gap:7px;margin-bottom:13px}
.hpitem{border:1px solid var(--line-soft);border-radius:var(--r-s);background:#ffffff05;padding:10px 12px}
.hpk{font-family:var(--serif);font-size:calc(14px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.04em;color:var(--fg);margin-bottom:5px}
.hpt{font-size:calc(11.5px - var(--game-desktop-font-step));line-height:1.8;color:var(--fg-mid);white-space:pre-line}
.hpitem mark{background:#c4453a3d;color:var(--fg);border-radius:2px}
.head{display:flex;flex-direction:column;gap:3px}
.head h2{margin:0;font-family:var(--serif);font-size:calc(19px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.08em}
.head p{margin:0;font-size:calc(11.5px - var(--game-desktop-font-step));color:var(--fg-mid)}
.sec{font-family:var(--mono);font-size:calc(9.5px - var(--game-desktop-font-step));letter-spacing:.24em;color:var(--fg-faint);text-transform:uppercase;
  display:flex;align-items:center;gap:8px}
.sec::after{content:"";flex:1;height:1px;background:var(--line-soft)}
.note{font-size:calc(11px - var(--game-desktop-font-step));color:var(--fg-faint);line-height:1.7}






#s-camp{padding:0;gap:0}
































#s-camp{justify-content:center;overflow:hidden;background:#000}







#s-camp::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(to right,
    #000000e6 0%,#000000b3 10%,#0000005e 24%,#00000014 38%,
    transparent 48%,transparent 52%,
    #00000014 62%,#0000005e 76%,#000000b3 90%,#000000e6 100%)}




.cmprog{position:absolute;left:12px;right:12px;top:10px;z-index:4;
  margin:0;padding:9px 12px 8px;pointer-events:none;
  background:linear-gradient(180deg,#1d1824f0,#12101ae8)}
.cmprog .fp-track{margin:8px 2px 0}














.cmback{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--cmimg,none) center/cover no-repeat;
  opacity:0;transition:opacity .34s ease}
.cmback.on{opacity:1}



.cmback::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,#000000d1 0%,#00000047 16%,#00000000 48%,#00000056 84%,#000000d8 100%)}












.cmsilk{position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:var(--cmsilk,.8);
  





  background:url("assets/ui/bg_app_silk.webp") center top/cover no-repeat}








.cmrail{position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  
  



  

















  --cm8:clamp(168px,min(var(--app-w) * .46,var(--app-h) * .212),214px);
  --cmoff:calc(var(--cm8) * .261);
  --cmgap:calc(var(--cm8) * .117);
  gap:var(--cmgap);
  



  margin:0;padding:calc(var(--app-h)/2 - var(--cm8)/2) 12px;
  overflow-y:auto;overflow-x:hidden;scrollbar-width:none;
  








  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;
  height:100%}
.cmrail::-webkit-scrollbar{display:none}







.cmpath{position:absolute;left:0;top:0;z-index:0;pointer-events:none;overflow:visible}
.cmpath line{fill:none;stroke-linecap:round}


.cmpath line.yet{stroke:#6b6276;stroke-width:.8;stroke-dasharray:4 7;opacity:.42}


.cmpath line.go{stroke:color-mix(in srgb,var(--warn) 62%,#120d05);stroke-width:1.4;opacity:.92;
  filter:drop-shadow(0 0 2px #e8b45f3d)}









.cmcell{
  





  flex:none;position:relative;padding:0;border:0;background:none;
  width:var(--cm8);aspect-ratio:1;
  scroll-snap-align:center;    
  -webkit-tap-highlight-color:transparent;
  



  transform:scale(.66);
  transition:filter .15s}



.cmcell.zL{margin-right:calc(var(--cmoff) * 2)}
.cmcell.zR{margin-left:calc(var(--cmoff) * 2)}









.cmsay{position:absolute;z-index:6;pointer-events:none;
  


  width:min(var(--cmsay-fit, 300px), calc(var(--app-w) - 40px));
  text-align:left;opacity:0;transform:translate(-50%,calc(-50% + 7px));
  transition:opacity .24s cubic-bezier(.2,.9,.3,1),transform .24s cubic-bezier(.2,.9,.3,1)}
.cmsay[hidden]{display:none}
.cmsay.on{opacity:1;transform:translate(-50%,-50%)}

.cmsay-in{position:relative;display:block;padding:14px 18px 15px;
  border:1px solid #ac8c66;border-radius:17px;
  background:radial-gradient(110% 90% at 22% 0%,#7a685459,transparent 68%),
             linear-gradient(145deg,#2b2730fa,#17161ff7);
  box-shadow:0 12px 26px #000c,0 0 19px #af8a6340,inset 0 1px #ffffff1c;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cmsay-in::after{content:"";position:absolute;left:50%;bottom:-7px;width:13px;height:13px;
  transform:translateX(-50%) rotate(45deg);background:#1a1820;
  border-right:1px solid #ac8c66;border-bottom:1px solid #ac8c66}




.cmsay-t{display:block;position:relative;z-index:1}
.cmsay-t b{display:block;font-family:var(--mjo);font-weight:400;
  



  font-size:var(--say-size);line-height:1.6;color:#eee7de;
  word-break:keep-all;overflow-wrap:break-word;text-shadow:0 2px 6px #000}
.cmsay-t b + b{margin-top:7px}


















.cm8{position:absolute;left:50%;top:50%;width:70.71%;height:70.71%;
  transform:translate(-50%,-50%) rotate(45deg);border-radius:12px;
  background:transparent;
  
  box-shadow:0 6px 18px #0009}



.cm8-in{position:absolute;left:50%;top:50%;
  width:70.71%;height:70.71%;
  transform:translate(-50%,-50%) rotate(45deg);border-radius:12px;
  background:radial-gradient(76% 62% at 50% 34%,#252837,#13101a);
  overflow:hidden}

.cm8-in img{position:absolute;left:50%;top:50%;width:141.43%;height:141.43%;
  transform:translate(-50%,-50%) rotate(-45deg);
  object-fit:cover;display:block;pointer-events:none}



.cm8-in::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 50%,#0000007f 0%,#00000035 55%,#0000008a 100%);
  box-shadow:inset 0 0 13px 2px var(--cm-edge,#e8b45f30)}

.cmcell.noart .cm8-in img{display:none}












.cm8-fr{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:var(--r-m);
  background:var(--frame,none) center/100% 100% no-repeat;
  transition:filter .15s}

.cmcell.done .cm8-fr{filter:saturate(.62) brightness(.74)}
.cmcell.lock .cm8-fr{filter:grayscale(.82) brightness(.52)}








.cm8-cap{position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:34% 26%;pointer-events:none}




.cm8-n{font-family:var(--mjo);font-size:calc(clamp(12px,calc(var(--cm8) * .074),15px) - var(--game-desktop-font-step));font-weight:400;line-height:1.16;
  letter-spacing:.14em;text-indent:.14em;color:#f6f0e4;text-align:center;word-break:keep-all;
  text-shadow:0 1px 2px #000,0 2px 6px #000,0 3px 14px #000e,0 0 26px #000c}
.cm8-n::after{content:"";display:block;width:38%;height:1px;margin:3px auto 0;
  background:#ffffff8c;box-shadow:0 1px 3px #000c;pointer-events:none}
.cm8-e{font-family:var(--mono);font-size:calc(clamp(7px,calc(var(--cm8) * .0414),8.5px) - var(--game-desktop-font-step));font-weight:400;line-height:1.3;
  letter-spacing:.2em;text-indent:.2em;color:#d6cab4;opacity:.72;text-align:center;
  text-shadow:0 1px 3px #000,0 2px 8px #000d;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}






.cm8-no{position:absolute;z-index:3;left:50%;top:25%;transform:translateX(-50%);
  min-width:19px;height:17px;padding:0 5px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:calc(10.5px - var(--game-desktop-font-step));font-weight:400;font-variant-numeric:tabular-nums;
  color:var(--fg-faint);background:#12101ad9;border:1px solid var(--line)}
.cmcell.done .cm8-no{color:var(--pc)}









.cm8-done{position:absolute;z-index:3;left:50%;bottom:25%;transform:translateX(-50%);
  display:none;align-items:center;justify-content:center;pointer-events:none;white-space:nowrap}
.cmcell.done .cm8-done{display:flex}





.cm8-done i{font-style:normal;font-family:var(--serif);font-size:calc(10px - var(--game-desktop-font-step));font-weight:400;
  letter-spacing:.1em;padding:1px 7px 2px;border-radius:9px;
  color:#e8cf9e;background:#0b0804e0;border:1px solid color-mix(in srgb,var(--warn) 62%,#120d05);
  box-shadow:0 2px 8px #000a,inset 0 0 0 1px #0006;
  text-shadow:0 1px 3px #000,0 0 10px #000c}








.cmcell.done{--cm-edge:#e8b45f5c}
.cmcell.done .cm8-in::before{opacity:.32}




.cmcell.mid{filter:drop-shadow(0 7px 15px #000c)}



.cmcell.open{--cm-edge:#e8b45f80}
.cmcell.open{animation:cmcall 1.9s ease-in-out infinite}
@keyframes cmcall{
  0%,100%{filter:drop-shadow(0 0 2px #e8b45f40)}
  50%    {filter:drop-shadow(0 0 7px #e8b45f85)}}
@media (prefers-reduced-motion:reduce){
  .cmcell.open{animation:none;filter:drop-shadow(0 0 5px #e8b45f70)} }











.cm8-in::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:#05040a;opacity:0;transition:opacity .15s}




.cmcell.lock .cm8-in::before{opacity:.72}

.cmcell.lock{--cm-edge:#e8b45f25}
.cmcell.lock .cm8-n{color:var(--fg-mid)}


.cmcell:active{filter:brightness(1.18)}








.veil.stg{align-items:center;justify-content:center;padding:26px 18px;
  background:
    radial-gradient(118% 40% at 50% 50%,#040508e8 0%,#040508c4 38%,#04050866 72%,#04050800 100%),
    #0a080ca6;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.stgbox{width:100%;max-width:340px;max-height:80%;overflow-y:auto;scrollbar-width:none;
  text-align:center;padding:20px 18px 18px}











.veil.stg > .vxround{position:absolute;left:50%;bottom:max(18px,calc(var(--bot-gap) + 18px));
  transform:translateX(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;border:1px solid #ffffff2e;
  background:#14121ad9;backdrop-filter:blur(3px);color:#e7e0d4;
  font-size:calc(19px - var(--game-desktop-font-step));line-height:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 12px #0009;-webkit-tap-highlight-color:transparent}
.veil.stg:not(.on) > .vxround{display:none}
.veil.stg > .vxround:active{background:#241f2ee6;transform:translateX(-50%) scale(.94)}
.veil.stg > .vxround:focus-visible{outline:2px solid #d4a843;outline-offset:2px}
.veil.stg .stgbox{border:0;border-radius:0;box-shadow:none;background:none}
.stgbox::-webkit-scrollbar{display:none}


.veil.stg #stgBody{display:flex;flex-direction:column;overflow:hidden}
.stg-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:none;
  

  

  -webkit-mask-image:linear-gradient(180deg,#0000 0,#000 10px,#000 calc(100% - 10px),#0000 100%);
  mask-image:linear-gradient(180deg,#0000 0,#000 10px,#000 calc(100% - 10px),#0000 100%)}
.stg-scroll::-webkit-scrollbar{display:none}



.stg-foot{flex:none;padding-top:12px;margin-top:2px;
  border-top:1px solid #ffffff12}











.stg-hd{flex:none;padding:0 0 10px;
  box-shadow:0 8px 12px -8px #000a}
.stg-t{margin:0;font-family:var(--serif);font-size:calc(21px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.04em}


.stg-w{margin-top:5px;text-align:center;font-family:var(--serif);font-size:calc(12.5px - var(--game-desktop-font-step));font-weight:400;
  color:var(--seal);letter-spacing:.03em}






.stg-s{margin:14px 2px 0;font-size:calc(11.5px - var(--game-desktop-font-step));line-height:1.95;color:#ded6c8;white-space:pre-line;
  text-align:center}

.stg-go{width:100%;margin-top:0;padding:13px}

.stg-go.stg-lock{font-size:calc(12.5px - var(--game-desktop-font-step));letter-spacing:.02em;color:var(--fg-faint);
  background:#17141c;border-color:var(--line);cursor:default;opacity:1}




.stg-pay{margin-top:14px;padding:0;border:0;border-radius:0;background:none}

.stg-ph{display:block;text-align:center;
  font-family:var(--serif);font-size:calc(12px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.06em;color:var(--fg-mid)}


.stg-pay.done{opacity:.55;filter:saturate(.35)}
.stg-pay.done .stg-ph{opacity:1;filter:none;color:var(--ok)}



.stg-list{overflow:visible;flex-wrap:wrap;padding-top:10px;padding-bottom:2px}

button.gain-item{padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer}





.sthead{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--line);
  border-radius:var(--r-s);background:linear-gradient(140deg,var(--panel),var(--panel-2))}
.st-bar{flex:none;width:3px;align-self:stretch;border-radius:1px}
.st-no{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--ink-2);font-size:calc(12.5px - var(--game-desktop-font-step));font-weight:400;font-variant-numeric:tabular-nums}
.st-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.st-n{font-family:var(--serif);font-size:calc(14px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-s{font-size:calc(10.5px - var(--game-desktop-font-step));color:var(--fg-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

#s-store{justify-content:flex-start}

.mpass{position:relative;flex:none;display:flex;flex-direction:column;align-items:stretch;gap:10px;
  width:100%;padding:14px 15px 13px;margin-bottom:6px;text-align:left;
  border:1px solid #4a3a6e;border-radius:var(--r-s);
  background:radial-gradient(120% 90% at 50% 0%,#2a2140,transparent 70%),linear-gradient(160deg,var(--panel),var(--panel-2));
  -webkit-tap-highlight-color:transparent;transition:border-color .16s,transform .1s}
.mpass:hover{border-color:var(--yeong)}
.mpass:active{transform:scale(.99)}
.mp-left{position:absolute;top:10px;right:12px;z-index:1;padding:3px 8px;border-radius:999px;
  font-size:calc(10.5px - var(--game-desktop-font-step));letter-spacing:.03em;color:var(--fg-faint);background:#0d0b11c0;border:1px solid var(--line)}
.mp-left.on{color:var(--yeong);border-color:#6a4fb0}
.mp-art{display:flex;align-items:center;justify-content:center;height:clamp(104px,calc(var(--app-w) * .3),150px)}
.mp-img{max-width:100%;max-height:100%;object-fit:contain;
  filter:drop-shadow(0 0 16px #a97cff55) drop-shadow(0 5px 12px #000b)}
.mp-body{display:flex;flex-direction:column;gap:5px}
.mp-name{font-family:var(--serif);font-size:calc(16px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.05em;color:var(--fg)}
.mp-row{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:calc(12.5px - var(--game-desktop-font-step));color:var(--fg-mid)}
.mp-row b,.mp-sub b,.mp-p b{color:var(--yeong);font-variant-numeric:tabular-nums}
.mp-row .mini-token,.mp-sub .mini-token,.mp-p .mini-token{margin:0 2px 0 4px;vertical-align:-3px}
.mp-sub{font-size:calc(11px - var(--game-desktop-font-step));color:var(--fg-faint)}

.mpbox .mp-art{margin:12px 0 6px}
.mp-p{margin:8px 0 0;font-size:calc(12.5px - var(--game-desktop-font-step));line-height:1.75;color:#ded6c8}
.mp-p.warn{font-size:calc(11.5px - var(--game-desktop-font-step));color:var(--fg-faint)}
.mp-now{margin:12px 0 12px;font-size:calc(12px - var(--game-desktop-font-step));color:var(--yeong);text-align:right}
.ystack{display:flex;flex-direction:column;gap:9px}
.yrow{display:flex;align-items:center;gap:13px;padding:14px 15px;border:1px solid var(--line);
  border-radius:var(--r-s);background:linear-gradient(140deg,var(--panel),var(--panel-2));
  text-align:left;transition:border-color .16s,transform .1s}
.yrow:hover{border-color:var(--yeong);transform:translateY(-1px)}

.ygem{flex:none;width:84px;height:58px;object-fit:contain;
  filter:drop-shadow(0 0 12px #4fb3c855) drop-shadow(0 4px 9px #000a)}

.yrow.s .ygem{height:46px}
.yrow.m .ygem{height:55px}
.yrow.l .ygem{height:65px}
.yrow.x .ygem{height:78px;filter:drop-shadow(0 0 18px #4fb3c877) drop-shadow(0 5px 11px #000b)}
.ybody{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.yname{font-family:var(--serif);font-size:calc(15px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.06em}
.yamt{font-size:calc(12px - var(--game-desktop-font-step));color:var(--yeong);font-variant-numeric:tabular-nums}
.yprice{flex:none;font-size:calc(11.5px - var(--game-desktop-font-step));color:var(--fg-faint);letter-spacing:.08em}


.face{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;
  background:#161822 center 22% / cover no-repeat;
  box-shadow:inset 0 -2px 6px #00000055,inset 0 0 0 1px #ffffff12}

.face.none{display:flex;align-items:center;justify-content:center;
  font-family:var(--han);font-size:.62em;font-weight:400;color:#8d8397;background:#1d2029}

.facegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px 9px}
.facepick{display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:0;border:0;background:none;font-size:calc(22px - var(--game-desktop-font-step));-webkit-tap-highlight-color:transparent}
.facepick .face{aspect-ratio:1;height:auto;border:1px solid var(--line);transition:.14s}
.facepick.on .face{border-color:var(--seal);box-shadow:0 0 0 1px var(--seal),0 0 14px #c4453a44}

.fc-ck{position:absolute;right:-1px;bottom:15px;width:20px;height:20px;border-radius:50%;
  display:none;align-items:center;justify-content:center;pointer-events:none;
  background:var(--seal);color:#fff;border:2px solid #0d0b11;box-shadow:0 1px 4px #000a}
.fc-ck svg{width:12px;height:12px}
.facepick.on .fc-ck{display:flex}
@media (hover:hover) and (pointer:fine){ .facepick:not(.lock):hover .face{border-color:var(--seal)} }
.facepick:not(.lock):active .face{transform:scale(.95)}
.fc-n{font-size:calc(9.5px - var(--game-desktop-font-step));line-height:1.3;color:var(--fg-mid);text-align:center;
  width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.facepick.lock{position:relative}
.facepick.lock .face{filter:grayscale(1) brightness(.45);border-style:dashed}
.facepick.lock .fc-n{color:var(--fg-faint)}
.fc-lk{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);
  font-family:var(--mono);font-size:calc(8.5px - var(--game-desktop-font-step));letter-spacing:.1em;color:#cfc4b4;
  padding:2px 6px;border-radius:2px;background:#000000b3;pointer-events:none}


.facepick.lock.fc-sel .face{border-color:var(--warn)}
.facemsg{min-height:1px;margin-top:14px;text-align:center;line-height:1.7}
.facemsg:empty{display:none}
.fc-way{display:block;margin-top:5px;font-family:var(--mono);font-size:calc(10.5px - var(--game-desktop-font-step));
  letter-spacing:.08em;color:var(--seal)}

.avatar{position:relative;width:78px;height:78px;font-size:calc(34px - var(--game-desktop-font-step));flex:none;padding:0}
.avatar .edit{position:absolute;right:-2px;bottom:-2px;width:25px;height:25px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:calc(11px - var(--game-desktop-font-step));
  background:var(--panel);border:1px solid var(--line);color:var(--fg-mid)}
.avatar:hover .edit{border-color:var(--seal);color:var(--fg)}

.wrow{display:flex;gap:9px;width:100%;align-items:stretch}
.wside{flex:1;min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:7px}
.wcell{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:11px 6px;
  border:1px solid var(--line-soft);border-radius:var(--r-s);background:#ffffff05}
.wcell b{font-size:calc(26px - var(--game-desktop-font-step));font-weight:400;color:color-mix(in srgb,#aaaaaa calc(100% - var(--done,0%)),#58bd81 var(--done,0%));font-variant-numeric:tabular-nums;line-height:1}

.wside .wcell{flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:9px 3px;min-height:49px}
.wside .wcell b{font-size:calc(17px - var(--game-desktop-font-step))}
.wside .wcell span{font-size:calc(9.5px - var(--game-desktop-font-step));letter-spacing:0;white-space:nowrap}
.wcell small{font-size:calc(9px - var(--game-desktop-font-step));font-weight:400;color:var(--fg-faint);line-height:1.1;white-space:nowrap}
.wside .wcell small{font-size:calc(8px - var(--game-desktop-font-step))}

.wcell.gy{flex:0 0 34%;gap:6px;padding:13px 8px}
.wcell.gy .pg-em{--em:clamp(48px,calc(var(--app-w) * .15),62px)}
.wcell.gy .pg-ko{font-family:var(--serif);font-size:calc(13.5px - var(--game-desktop-font-step));font-weight:400;color:#f0e8da;letter-spacing:.04em}

.wcell.gy .pg-han{font-family:var(--han);font-size:calc(19px - var(--game-desktop-font-step));font-weight:400;color:#e6d9b8;letter-spacing:.02em}
.wcell span{font-size:calc(10.5px - var(--game-desktop-font-step));color:var(--fg-faint);letter-spacing:.1em}
.namebox{display:flex;flex-direction:column;align-items:center;gap:14px;padding:26px 16px;
  border:1px solid var(--line);border-radius:var(--r-s);background:linear-gradient(160deg,var(--panel),var(--panel-2))}
.namebox .ightop,.namebox .igbar{width:100%}
#s-prof{gap:10px;padding-bottom:10px}
#s-prof .namebox{gap:8px;padding:13px 14px}
#s-prof .avatar{width:58px;height:58px;font-size:calc(26px - var(--game-desktop-font-step))}
#s-prof .avatar .edit{width:21px;height:21px}
#s-prof .uname{font-size:calc(22px - var(--game-desktop-font-step))}
#s-prof .namebox .ightop{margin:0}
#s-prof .namebox .igbar{margin:0}
.prof-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;flex:none}
.prof-tab{position:relative;min-height:38px;border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--panel);color:var(--fg-mid);font-family:var(--serif);font-size:calc(13px - var(--game-desktop-font-step));font-weight:400;cursor:pointer}
.prof-tab[aria-selected="true"]{border-color:var(--seal);color:var(--fg);background:var(--panel-2)}
.prof-tab .nudot{--nx:9px;--ny:8px}
.prof-pane.ingwa{display:flex;flex:1 0 auto;flex-direction:column;gap:0;min-height:0}
.prof-pane.account{display:flex;flex-direction:column;gap:18px}
.prof-pane[hidden]{display:none}
.nameline{display:flex;align-items:baseline;gap:0}
.uname{font-family:var(--mjo);font-size:calc(27px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.08em}   
.utag{margin-left:-.08em;font-size:calc(13px - var(--game-desktop-font-step));color:var(--fg-faint);font-variant-numeric:tabular-nums}
.uidline{display:flex;align-items:center;justify-content:center;gap:6px;max-width:100%;min-width:0;
  padding:5px 9px;margin-top:-3px;border:1px solid #66666677;border-radius:var(--r-s);
  background:#17131d8c;color:var(--fg-mid);opacity:.88;transition:opacity .15s,border-color .15s}
.uidline[hidden]{display:none}
.uidline:hover,.uidline:focus-within{opacity:1;border-color:#aaaaaa}



.uidlabel{flex:none;font-family:var(--mono);font-size:calc(10px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.08em;
  padding:2px 6px;border:1px solid #8a7ba8aa;border-radius:var(--r-s);
  background:#232736;color:var(--fg-mid);line-height:1.5}
.uidvalue{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--mono);font-size:calc(11px - var(--game-desktop-font-step));font-variant-numeric:tabular-nums;user-select:text}
.uidcopy{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;padding:0;border:0;border-radius:var(--r-s);background:none;
  color:inherit;cursor:pointer}
.uidcopy svg{width:15px;height:15px;display:block}
.uidcopy:hover,.uidcopy:focus-visible{color:var(--fg)}
.uidcopy:focus-visible{outline:1px solid var(--seal);outline-offset:2px}
.namein{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--ink-2);color:var(--fg);font-family:inherit;font-size:calc(15px - var(--game-desktop-font-step));text-align:center}
.namein:focus{outline:none;border-color:var(--seal)}
.pkbar{display:flex;align-items:center;justify-content:space-between;gap:10px}








.pkbar .shopwing{min-width:0}
.pkname{font-family:var(--mjo);font-size:calc(14px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.06em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pkstage{position:relative;display:flex;align-items:center}







.pkrail{flex:1;min-width:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:14px 0;
  scrollbar-width:none;touch-action:pan-x pan-y}
.pkrail::-webkit-scrollbar{display:none}

.pkslide{flex:0 0 70%;scroll-snap-align:center;display:flex;justify-content:center;align-items:flex-start;
  gap:12px;padding:4px 6px;
  












  transform:scale(.88);transform-origin:center;
  transition:transform .18s ease}
.pkslide.mid{transform:scale(1)}


.pkcover{flex:0 0 min(88%,208px);display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:0;border:0;background:none;cursor:pointer}
.pkcover .packart{flex:none;width:100%}












.pkskin{position:relative;flex:none;align-self:stretch;display:flex;
  margin:14.14% 0 16.00%}
.pkskin::before{content:"";position:absolute;z-index:0;pointer-events:none;
  left:-8.53%;right:-8.80%;top:-10.58%;bottom:-11.98%;
  background:url(assets/ui/pack_hanji_anime_v1.webp?v=1) center/100% 100% no-repeat;
  filter:drop-shadow(0 12px 24px #000b)}











.pkslide.mid .pkskin::before{animation:pkcall 1.9s ease-in-out infinite}
@keyframes pkcall{
  0%,100%{filter:drop-shadow(0 12px 24px #000b) drop-shadow(0 0 2px #e8b45f4d)}
  50%    {filter:drop-shadow(0 12px 24px #000b) drop-shadow(0 0 6px #e8b45f8a)}}
@media (prefers-reduced-motion:reduce){
  .pkslide.mid .pkskin::before{animation:none;
    filter:drop-shadow(0 12px 24px #000b) drop-shadow(0 0 4px #e8b45f70)} }









body:has(#tGuide:not([hidden])) .pkslide.mid .pkskin::before{
  animation:none;
  filter:drop-shadow(0 12px 24px #000b) drop-shadow(0 0 4px #e8b45f70)}
.pkskin .packart{position:relative;z-index:1}
.pk-see{font-size:calc(11px - var(--game-desktop-font-step));letter-spacing:.06em;color:var(--fg-mid);
  padding:3px 10px;border:1px solid var(--line);border-radius:999px;background:#0e121880}




.pkslide:has(.pk-soon) .packart{filter:saturate(.72) brightness(.78)}
.pk-soon{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);
  white-space:nowrap;font-family:var(--mjo);font-size:calc(13px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.22em;
  text-indent:.22em;color:#f0e6cf;padding:5px 14px 6px;border-radius:3px;
  background:#0b0908d9;border:1px solid var(--line);
  box-shadow:0 2px 10px #000a,inset 0 0 0 1px #0006;
  text-shadow:0 1px 3px #000,0 0 10px #000c}
.pkcover:hover .pk-see{color:var(--fg);border-color:var(--seal)}



.parr{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:22px;height:40px;
  display:flex;align-items:center;justify-content:center;font-size:calc(12px - var(--game-desktop-font-step));color:var(--fg-mid);
  background:#0b0908cc;border:1px solid var(--line);border-radius:var(--r-s)}
.parr:hover{color:var(--fg);border-color:var(--seal)}
.parr.l{left:0} .parr.r{right:0}









.pkslide:first-child{margin-left:15%}
.pkslide:last-child{margin-right:15%}
.pkdots{display:flex;justify-content:center;gap:7px}
.pkdot{width:7px;height:7px;border-radius:50%;background:var(--line);padding:0;border:none}
.pkdot.on{background:var(--seal);box-shadow:0 0 8px #c4453a88}
.packbox{display:flex;flex-direction:column;align-items:center;gap:13px}

.packart{width:160px;aspect-ratio:375/501;border-radius:3px;position:relative;border:1px solid #5c4a22;
  background:radial-gradient(120% 70% at 50% 0%,#4a3a18 0%,transparent 60%),
             repeating-linear-gradient(122deg,#221c14 0 8px,#2a2218 8px 16px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;overflow:hidden;
  box-shadow:0 12px 30px -14px #000}
.packart::after{content:"";position:absolute;left:10%;right:10%;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,var(--chungi),transparent);box-shadow:0 0 14px 1px #d4a84366}












.packart.has-art{ --pk-dim:0; background:#0b0908; }
.packart.has-art::before{ content:""; display:block; position:absolute; inset:0; z-index:0;
  background:var(--art) center/cover no-repeat; opacity:1; }
.packart.has-art::after{ content:""; display:block; position:absolute; inset:0; z-index:1;
  left:0; right:0; top:0; height:auto;                      
  background:#000; box-shadow:none; opacity:var(--pk-dim); }

.packart .pk-n{position:absolute;left:8%;right:8%;bottom:0;padding-bottom:7%;z-index:2;text-align:center;
  font-family:var(--mjo);font-size:calc(16px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.2em;text-indent:.2em;
  color:#f6ecd6;text-shadow:0 2px 6px #000,0 0 14px #0009}




.packart .pk-n::before{content:"";position:absolute;left:-12%;right:-12%;bottom:0;top:-52%;z-index:-1;
  background:linear-gradient(180deg,transparent,#0b09087a 52%,#0b0908bf 100%)}
.pk-han{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--han);font-size:calc(66px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.06em;
  background:linear-gradient(120deg,var(--t1),var(--t2));-webkit-background-clip:text;
  background-clip:text;color:transparent;opacity:.5}
.packart::before{background:radial-gradient(70% 48% at 50% 34%,var(--t1,#d4a84333),transparent 70%)}
.pkslide .pk-s{font-family:var(--mono);font-size:calc(8.5px - var(--game-desktop-font-step));letter-spacing:.24em;color:#b39a5e;z-index:1}
.pack-meta{text-align:center}
.pack-meta h3{margin:0;font-family:var(--serif);font-size:calc(17px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.06em}
.pack-meta p{margin:5px 0 0;font-size:calc(11.5px - var(--game-desktop-font-step));color:var(--fg-mid);line-height:1.6}
.buys{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.buy{position:relative;border:1px solid var(--line);border-radius:var(--r-s);padding:11px 8px;background:var(--panel);
  display:flex;flex-direction:column;align-items:center;gap:4px;transition:.18s}
.buy:hover:not([disabled]){border-color:var(--seal);background:var(--panel-2)}
.buy[disabled]{opacity:.4;cursor:default}
.buy b{font-family:var(--serif);font-size:calc(14px - var(--game-desktop-font-step));font-weight:400}
.buy span{font-family:var(--mono);font-size:calc(11px - var(--game-desktop-font-step));font-variant-numeric:tabular-nums}
.buy.pg span{color:var(--chungi)} .buy.py span{color:var(--yeong)}
.links{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.tlink{font-size:calc(11.5px - var(--game-desktop-font-step));color:var(--fg-mid);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.tlink:hover{color:var(--seal)}
.tbl{border:1px solid var(--line-soft);border-radius:var(--r-s);overflow:hidden}
.trow{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;font-size:calc(12px - var(--game-desktop-font-step));border-bottom:1px solid var(--line-soft)}

.trow.sum{color:var(--fg);font-weight:400;background:#ffffff08}


.trow.sub{padding-left:26px;font-size:calc(11.5px - var(--game-desktop-font-step));color:var(--fg-mid);border-bottom-color:#ffffff0d}
.trow.sub .n{color:var(--fg-faint)}
.trow.sum .v{color:var(--fg)}
.trow:last-child{border-bottom:none}
.trow.h{background:var(--panel);font-family:var(--mono);font-size:calc(9.5px - var(--game-desktop-font-step));letter-spacing:.18em;color:var(--fg-faint);text-transform:uppercase}
.trow .v{font-family:var(--mono);font-variant-numeric:tabular-nums}
.trow.acc .n{color:var(--chungi)}

.trow.note-row{color:var(--fg-faint);font-size:calc(11px - var(--game-desktop-font-step));line-height:1.45}
.trow.note-row b{color:var(--fg);font-weight:400}














.card{aspect-ratio:63/88;border-radius:var(--card-r,4.5%);position:relative;overflow:hidden;border:0;
  background:transparent;font-size:calc(10px - var(--game-desktop-font-step));container-type:inline-size}


















.card,.dfull{--card-frame:url(assets/ui/cardframes/mudo_normal.png?v=2);--bz:5.6cqw;--art-in:5cqw}
:is(.card,.dfull)[style*="--pc:var(--ma-e)"]{--card-frame:url(assets/ui/cardframes/ma_normal.png?v=2)}
:is(.card,.dfull)[style*="--pc:var(--jeong-e)"]{--card-frame:url(assets/ui/cardframes/jeong_normal.png?v=2)}
:is(.card,.dfull)[style*="--pc:var(--sa-e)"]{--card-frame:url(assets/ui/cardframes/sa_normal.png?v=2)}
:is(.card,.dfull)[style*="--pc:var(--yo-e)"]{--card-frame:url(assets/ui/cardframes/yo_normal.png?v=2)}
:is(.card,.dfull)[style*="--pc:var(--hwang-e)"]{--card-frame:url(assets/ui/cardframes/hwang_normal.png?v=2)}
:is(.card,.dfull)[style*="--pc:var(--mudo-e)"]{--card-frame:url(assets/ui/cardframes/mudo_normal.png?v=2)}






.card::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--card-frame) center/100% 100% no-repeat}



.card.locked{filter:grayscale(1) brightness(.42) contrast(.95)}






.card.eng.locked{filter:none}
.card.eng.locked>*{filter:grayscale(1) brightness(.42) contrast(.95)}








.c-art{position:absolute;inset:var(--art-in,5cqw);background-size:cover;background-position:center;
  background-image:var(--th,none),radial-gradient(90% 62% at 50% 18%,color-mix(in srgb,var(--pc) 42%,#000) 0%,#000 100%)}
.c-art::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(118deg,#0000 0 6px,#ffffff07 6px 7px)}
.c-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

.c-img.cfull{opacity:0;transition:opacity .22s}
.c-img.cfull.on{opacity:1}
.c-sigil{position:absolute;left:0;right:0;top:27%;text-align:center;font-family:var(--han);font-weight:400;
  font-size:calc(clamp(26px,32cqw,58px) - var(--game-desktop-font-step));line-height:1;opacity:.2;color:#fff;pointer-events:none}
.c-tbd{position:absolute;left:0;right:0;bottom:38%;text-align:center;font-family:var(--mono);
  font-size:calc(clamp(5.5px,4.4cqw,7.5px) - var(--game-desktop-font-step));letter-spacing:.14em;color:#ffffff3d}

.c-veil{position:absolute;inset:var(--art-in,5cqw);background:linear-gradient(180deg,#00000059 0 9%,transparent 20% 40%,#000000d6 62%,#000000f2 100%)}
















.c-cost,.c-atk,.c-hp{position:absolute;border-radius:50%;display:flex;align-items:center;justify-content:center;
  z-index:2;isolation:isolate;
  


  font-family:var(--num);font-weight:700;font-variant-numeric:tabular-nums;
  width:clamp(16px,19cqw,27px);aspect-ratio:1;font-size:calc(clamp(8.3px,9.2cqw,12.6px) - var(--game-desktop-font-step));
  line-height:1;text-shadow:0 1px 2px #000c;
  


  padding-top:.069em}


.c-cost::before,.c-atk::before,.c-hp::before,.por .pf-hp::before{content:"";position:absolute;z-index:-1;
  left:50%;top:50%;width:var(--bs);height:var(--bs);transform:translate(-50%,-50%);
  pointer-events:none;background:var(--bimg) center/contain no-repeat}











.c-cost{top:var(--bz);left:var(--bz);color:#f4f2ec;
  --bs:91%;--bimg:url(assets/ui/badge_cost_qi_preview_v4.webp?v=1)}


.c-cost.dn{color:#7dffb4;text-shadow:0 0 7px #4dffa08c,0 1px 2px #000}
.c-cost.up{color:#ff9a8e;text-shadow:0 0 7px #e8695f8c,0 1px 2px #000}
.c-atk{bottom:var(--bz);left:var(--bz);color:#fff0e8;
  --bs:87%;--bimg:url(assets/ui/badge_atk_sword_preview_v7.webp?v=1)}


.c-hp{bottom:var(--bz);right:var(--bz);color:#effaf0;
  --bs:123%;--bimg:url(assets/ui/badge_hp_blood_preview_v4.webp?v=1)}


















.c-path{position:absolute;z-index:2;width:clamp(24px,27cqw,38px);aspect-ratio:1;
  top:calc(var(--bz) - (clamp(24px,27cqw,38px) - clamp(16px,19cqw,27px)) / 2);
  right:calc(var(--bz) - (clamp(24px,27cqw,38px) - clamp(16px,19cqw,27px)) / 2);
  display:flex;align-items:center;justify-content:center;color:#fff}
.c-path-img{display:block;width:100%;height:100%;object-fit:contain}







img[src^="assets/ui/path_mudo_anime"],img[src^="assets/ui/path_hwang_anime"]{
  transform:scale(.81);transform-origin:center}
img[src^="assets/ui/path_yo_anime"]{transform:scale(.84);transform-origin:center}
.c-sigil-img{width:92px;height:92px;object-fit:contain;opacity:.38}

.c-name{padding:0 3px;text-align:center;font-family:var(--mjo);font-weight:400;
  font-size:calc(clamp(7.5px,6.4cqw,12px) - var(--game-desktop-font-step));line-height:1.3;color:#fff;text-shadow:0 1px 3px #000;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}


.unit .c-name,.hcard .c-name{font-size:calc(clamp(6px,5.6cqw,10px) - var(--game-desktop-font-step));line-height:1.22}

.g5 .c-name{font-size:calc(clamp(7px,5.7cqw,11px) - var(--game-desktop-font-step))}
.unit .c-name::after,.hcard .c-name::after{margin-top:2px}












.c-name::after{content:"";display:block;width:25%;height:1px;margin:3px auto 0;
  background:#ffffff80;pointer-events:none}
.c-foot{position:absolute;left:7%;right:7%;bottom:calc(var(--bz) + clamp(16px,19cqw,27px) + 5px);
  display:flex;flex-direction:column;gap:2px;pointer-events:none;max-height:70%;overflow:hidden;z-index:2}


.c-type{position:absolute;top:var(--bz);left:50%;transform:translateX(-50%);z-index:2;max-width:42%;
  text-align:center;font-family:var(--mjo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:calc(clamp(5px,4.1cqw,7px) - var(--game-desktop-font-step));line-height:1.55;letter-spacing:.06em;text-indent:.06em;
  color:#efe6d6;padding:0 3px;border-radius:7px;background:#000000ab;text-shadow:0 1px 2px #000}




.c-text{font-size:calc(clamp(5.5px,4.4cqw,8px) - var(--game-desktop-font-step));line-height:1.45;min-height:1.45em;color:#e9e2d6;
  text-align:center;white-space:pre-line;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}


@container (max-width:95px){ .c-text{display:none} }

.c-eng{position:absolute;left:var(--bz);top:calc(var(--bz) + clamp(16px,19cqw,27px) + 1.6cqw);
  width:clamp(16px,19cqw,27px);text-align:center;font-family:var(--han);font-weight:400;
  font-size:calc(clamp(5.5px,4.9cqw,8.5px) - var(--game-desktop-font-step));letter-spacing:0;line-height:1.05;color:var(--chungi);
  text-shadow:0 1px 3px #000,0 0 7px #000a}


.c-own{position:absolute;left:50%;bottom:calc(var(--bz) + clamp(16px,19cqw,27px)/2);
  transform:translate(-50%,50%);padding:2px 6px;font-family:var(--mono);
  font-size:calc(clamp(8px,7cqw,10px) - var(--game-desktop-font-step));font-weight:400;white-space:nowrap;
  background:#000000cc;color:var(--fg);z-index:3;border-radius:9px;border:1px solid #ffffff1f}
.c-own.z{color:var(--fg-faint)}

[data-cid],[data-pkpool]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.pkcover[data-pkpool]{cursor:pointer}
.lp-on{outline:1px solid var(--seal);outline-offset:1px}


.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}



.filters{display:flex;flex-direction:column;gap:5px;font-family:var(--mjo)}
.filters .flab,.filters .ftog-t,.filters .ftog-s,.filters .chip,.filters .fsel,.filters .fq{font-family:var(--mjo)}
.fline{display:flex;align-items:center;gap:8px;min-width:0;min-height:0}
.flab{flex:none;width:28px;font-size:calc(10px - var(--game-desktop-font-step));letter-spacing:.14em;color:var(--fg-faint)}
.fchips{flex:1;min-width:0;display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;padding-bottom:1px}
.fchips::-webkit-scrollbar{display:none}







.fsels{flex:1;min-width:0;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.fsels .fsel{padding-inline:4px}
@media (min-width:430px){.fsels{grid-template-columns:repeat(4,1fr)}}



.ftog{width:100%;display:flex;align-items:center;gap:9px;padding:7px 10px;
  border:1px solid var(--line);border-radius:2px;background:var(--panel);text-align:left}
.ftog-t{flex:none;font-size:calc(10px - var(--game-desktop-font-step));letter-spacing:.14em;color:var(--fg-faint)}
.ftog-s{flex:1;min-width:0;font-size:calc(11.5px - var(--game-desktop-font-step));color:var(--fg-mid);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ftog-s.off{color:var(--fg-faint)}
.ftog-i{flex:none;font-size:calc(9px - var(--game-desktop-font-step));color:var(--fg-faint);transition:transform .18s}
.filters.open .ftog{border-color:var(--seal)}
.filters.open .ftog-i{transform:rotate(180deg)}
.fbody{display:flex;flex-direction:column;gap:5px;margin-top:6px}
.fq{flex:1;min-width:0;padding:6px 10px;border:1px solid var(--line);border-radius:2px;
  font-size:calc(12px - var(--game-desktop-font-step));color:var(--fg);background:var(--panel);font-family:inherit}
.fq::placeholder{color:var(--fg-faint)}
.fq:focus{outline:none;border-color:var(--seal)}
.fsel{min-width:0;padding:5px 6px;border:1px solid var(--line);border-radius:2px;font-size:calc(11px - var(--game-desktop-font-step));
  color:var(--fg-mid);background:var(--panel);font-family:inherit;appearance:none;text-align:center}
.fsel:focus{outline:none;border-color:var(--seal);color:var(--fg)}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:5px 11px;border:1px solid var(--line);border-radius:2px;font-size:calc(11.5px - var(--game-desktop-font-step));color:var(--fg-mid);white-space:nowrap}
.chip:hover{color:var(--fg)}
.chip.on{background:var(--seal-deep);border-color:var(--seal);color:#f3e4e1}


.chip.off{opacity:.3;pointer-events:none;text-decoration:line-through}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gcard{position:relative;cursor:pointer}

.poolgrid{margin-top:9px;gap:11px}
#plBody{gap:9px}
.tally{display:flex;justify-content:flex-end;font-family:var(--mono);font-size:calc(11px - var(--game-desktop-font-step));color:var(--fg-mid);font-variant-numeric:tabular-nums}
.legacy{border:1px solid #5c4a22;background:#231c10;border-radius:var(--r-s);padding:9px 11px;font-size:calc(11px - var(--game-desktop-font-step));color:var(--chungi);line-height:1.7}


.preset{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:12px 13px;
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel)}
.preset:hover{border-color:var(--seal)}
.preset.empty,.preset.locked{border-style:dashed;background:none}
.preset.locked{opacity:.62}
.p-no{font-family:var(--mono);font-size:calc(11px - var(--game-desktop-font-step));color:var(--fg-faint);width:14px;flex:none;text-align:center}
.p-body{flex:1;min-width:0}
.p-name{font-family:var(--serif);font-size:calc(14.5px - var(--game-desktop-font-step));font-weight:400;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-meta{font-size:calc(11px - var(--game-desktop-font-step));color:var(--fg-mid);margin-top:2px;display:block;font-family:var(--mono);font-variant-numeric:tabular-nums}
.p-meta.bad{color:var(--warn)}
.dots{display:flex;gap:3px;flex:none}
.dot{width:7px;height:7px;border-radius:50%}

#s-edit,#s-battle{padding:var(--top-gap) 0 0;gap:0}


.ed-head{flex:none;padding:7px 12px 6px;border-bottom:1px solid var(--line-soft);background:var(--panel);display:flex;flex-direction:column;gap:6px}
.ed-row{display:flex;gap:10px;align-items:center}





.ed-nm{flex:0 1 58%;min-width:0;display:flex;gap:10px;align-items:center}
.ed-name{flex:1 1 auto;min-width:0;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-s);
  padding:6px 9px;font-family:var(--mjo);font-size:calc(12px - var(--game-desktop-font-step));font-weight:400}   
.ed-cnt{margin-left:auto;font-family:var(--mono);font-size:calc(16.5px - var(--game-desktop-font-step));font-weight:400;font-variant-numeric:tabular-nums;
  flex:none;color:var(--fg);letter-spacing:.01em;line-height:1}
.ed-cnt.full{color:var(--ok)} .ed-cnt.over{color:var(--danger)}









.ed-mid{display:flex;gap:10px;align-items:stretch;height:155px}





.dkwrap.cvwrap{flex:1;min-width:0}


.curve{flex:1;min-height:0;display:flex;align-items:stretch;gap:3px;padding:0 6px 6px}
.cv{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px}
.cv-n{flex:none;font-family:var(--mono);font-size:calc(9.5px - var(--game-desktop-font-step));font-weight:400;
  color:var(--fg-mid);line-height:1;font-variant-numeric:tabular-nums}

.cv-t{flex:1;min-height:0;width:100%;border-radius:2px;background:#ffffff0d;overflow:hidden;
  display:flex;align-items:flex-end}




.cv-b{display:block;width:100%;border-radius:2px;--w:0;
  background:color-mix(in srgb,var(--seal) calc((.28 + .72*var(--w))*100%),#2a2733);
  transition:height .34s cubic-bezier(.32,.72,.3,1),background-color .34s ease-out}
.cv-b.z{background:transparent}
.cv-c{flex:none;height:11px;font-family:var(--mono);font-size:calc(9.5px - var(--game-desktop-font-step));color:var(--fg-faint);
  line-height:11px;font-variant-numeric:tabular-nums}
.ed-body{flex:1;min-height:0;overflow-y:auto;padding:11px 14px 16px;display:flex;flex-direction:column;gap:11px}

.dkwrap{flex:0 1 58%;min-width:0;display:flex;flex-direction:column;
  border:1px solid var(--line-soft);border-radius:var(--r-s);background:var(--ink-2);overflow:hidden}
.dkhead{flex:none;display:flex;justify-content:space-between;align-items:center;padding:5px 8px 3px;
  font-size:calc(9.5px - var(--game-desktop-font-step));letter-spacing:.14em;color:var(--fg-faint)}
.dkn{font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--fg-mid)}



.dklist{flex:1;min-height:0;overflow-y:auto;padding:0 6px 6px;display:flex;flex-direction:column;gap:3px;
  scrollbar-width:none}
.dklist::-webkit-scrollbar{display:none}
.dkrow{display:flex;align-items:center;gap:5px;width:100%;padding:4px 5px;border-radius:2px;
  background:var(--panel);border:1px solid transparent;text-align:left}
.dkrow:hover{border-color:var(--seal);background:var(--panel-2)}
.dkrow.miss{background:#221513;border-color:#5a3630}

.dkrow.ed-arrive{animation:ed-arrive .28s ease-out}
@keyframes ed-arrive{50%{background:#49352f;box-shadow:0 0 11px #d4a84377}}
.ed-flight{position:absolute;z-index:18;pointer-events:none;overflow:hidden;border:1px solid #b99a68;
  border-radius:4px;box-shadow:0 5px 13px #0009;transform-origin:center;will-change:transform,opacity}
.ed-flight img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%}
@media (prefers-reduced-motion:reduce){.dkrow.ed-arrive{animation:none}}




.dkc{flex:none;width:19px;height:19px;display:flex;align-items:center;justify-content:center;
  background:url(assets/ui/badge_cost_qi_preview_v4.webp?v=1) center/contain no-repeat;
  font-size:calc(9px - var(--game-desktop-font-step));font-weight:700;color:#f4f2ec;font-variant-numeric:tabular-nums;
  text-shadow:0 1px 2px #000}
.dkbar{flex:none;width:3px;align-self:stretch;border-radius:1px}
.dkn2{flex:1;min-width:0;font-family:var(--mjo);font-size:calc(10.5px - var(--game-desktop-font-step));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dkq{flex:none;font-size:calc(11px - var(--game-desktop-font-step));font-weight:400;color:var(--fg-mid);font-variant-numeric:tabular-nums}

.dkq.e{font-family:var(--mjo);font-size:calc(9.5px - var(--game-desktop-font-step));letter-spacing:-.01em;color:var(--chungi)}











@keyframes 눌림{0%{scale:1}38%{scale:1.07}100%{scale:1}}
.gcard.tap .card{animation:눌림 190ms cubic-bezier(.3,1.3,.6,1)}

@media (prefers-reduced-motion:reduce){.gcard.tap .card,.tapped{animation:none}}






.tapped{animation:눌림 190ms cubic-bezier(.3,1.3,.6,1)}
.chip.tapped,.coin.tapped,.gq.tapped,.mmi.tapped,.mic.tapped,.pkdot.tapped,.varr.tapped,.parr.tapped{
  animation-name:눌림작게}
@keyframes 눌림작게{0%{scale:1}38%{scale:1.13}100%{scale:1}}
.gcard.pickable{cursor:pointer}
.gcard.pickable:hover .card{box-shadow:0 0 0 1px var(--seal)}









.gcard.used .card{filter:saturate(.5) brightness(.82)}












.gcard.used .card::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background-image:repeating-linear-gradient(135deg,#00000045 0 .5px,#0000 .5px 2.5px);
  



  background-color:#00000040}









.gcard.used::before{content:"";position:absolute;left:50%;top:50%;z-index:7;pointer-events:none;
  width:34%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(45deg);
  background:#0b090894;border:1px solid #ffffff24;border-radius:3px;
  box-shadow:0 1px 6px #0000005c}




.gcard.used::after{content:"";position:absolute;left:50%;top:50%;z-index:8;pointer-events:none;
  width:15%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  


  border:2px solid var(--danger);
  background:linear-gradient(135deg,#0000 calc(50% - 1px),var(--danger) calc(50% - 1px),
    var(--danger) calc(50% + 1px),#0000 calc(50% + 1px));
  filter:drop-shadow(0 0 2px #00000096)}
.gcard.used .card.eng{filter:none}
.gcard.used .card.eng>*{filter:saturate(.5) brightness(.82)}


.gcard.used .card.locked{filter:grayscale(1) brightness(.42) contrast(.95)}
.gcard.used .card.eng.locked{filter:none}
.gcard.used .card.eng.locked>*{filter:grayscale(1) brightness(.42) contrast(.95)}





#edBody .c-own{border-color:var(--ok);color:var(--ok);background:#0b0908ee;font-weight:400}
#edBody .c-own.z{border-color:#ffffff1f;color:var(--fg-faint);font-weight:400}




.gq.gminus{width:26px;min-width:26px;height:26px;padding:0;border:0;border-radius:50%;font-size:0;line-height:1;cursor:pointer;
  color:transparent;background:transparent url(assets/ui/icon_deck_remove_anime_v1.webp?v=1) center/contain no-repeat;
  box-shadow:0 2px 6px #000a}
.gq.gminus:active{transform:scale(.9)}
.gq{position:absolute;top:3px;right:3px;z-index:5;
  min-width:24px;height:19px;padding:0 6px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:calc(11px - var(--game-desktop-font-step));font-weight:400;
  background:#0b0908ee;border:1px solid var(--ok);color:var(--ok);font-variant-numeric:tabular-nums}
.gcard.indeck .c-eng{display:none}



.gcard.indeck .card:not(.eng){box-shadow:0 0 0 1px var(--ok)}

.gcard.indeck.used .card:not(.eng){box-shadow:0 0 0 1px var(--line)}




.ed-foot{flex:none;display:flex;gap:8px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line-soft);background:var(--panel)}
.result .fbtn{flex:none;width:min(220px,72%)}

.screen > .fbtn{flex:none}
.fbtn{flex:1;padding:11px;border:1px solid var(--line);border-radius:var(--r-s);font-size:calc(13px - var(--game-desktop-font-step));text-align:center;transition:.16s}
.fbtn:hover{border-color:var(--seal)}







.fbtn{transition:transform .12s var(--press),border-color .16s,background .16s,color .16s,opacity .16s}
.fbtn:active:not([disabled]){transform:scale(.95);filter:brightness(.94);
  transition:transform .05s ease-out}
.fbtn.pri{background:var(--seal-deep);border-color:var(--seal);color:#f3e4e1;font-weight:400}
.fbtn[disabled]{opacity:.4;cursor:default;background:var(--panel-2);border-color:var(--line);color:var(--fg-mid);font-weight:400}





.warn:not(.tbar):not(.mclk){border:1px solid #5c4220;background:#231a0f;border-radius:var(--r-s);padding:9px 11px;font-size:calc(11.5px - var(--game-desktop-font-step));color:var(--warn);line-height:1.7}


.battle-shell{flex:1;min-height:0;display:grid;grid-template-columns:minmax(430px,560px);grid-template-areas:"arena";justify-content:center;background:transparent;overflow:hidden}   


.battle-arena{grid-area:arena;min-width:0;min-height:0;display:flex;flex-direction:column;
  box-shadow:0 0 36px #0009;position:relative;z-index:2;
  background:transparent}










#s-battle{background-color:#C6D9EF;
  background-image:linear-gradient(#00000000,#00000000),
    linear-gradient(180deg,
    #27374B2E 0%,#27374B14 7%,#27374B00 18%,#27374B00 33%,
    #27374B00 50%,
    #27374B00 67%,#27374B00 82%,#27374B14 93%,#27374B2E 100%),
    url(assets/ui/bg_sura_road_anime_v1.webp?v=1);
  background-size:100% 100%,100% 100%,cover;background-position:center,center,center;background-repeat:no-repeat}
.battle-side{min-width:0;padding:14px 12px;background:linear-gradient(180deg,#0a0a0bb3,#07070ad9);position:relative;z-index:1}   
.battle-side.clock-side{grid-area:clock;display:flex;flex-direction:column;align-items:flex-end}
.hud-label{width:100%;font-size:calc(9px - var(--game-desktop-font-step));line-height:1;letter-spacing:.2em;color:var(--fg-faint);text-align:left;margin-bottom:7px}
.clock-side .hud-label{text-align:right}
.battle-side .clock{width:86px;min-height:52px;flex-direction:column;gap:1px;padding:6px 10px;background:#0b0b0dd9}
.clock::before{content:"남은 시간";font-size:calc(8px - var(--game-desktop-font-step));letter-spacing:.12em;color:var(--fg-faint)}
.battle-side .ck-n{font-size:calc(24px - var(--game-desktop-font-step));line-height:1.1}






.battle-shell{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);grid-template-areas:"arena"}
.battle-side{padding:5px 8px;border-bottom:1px solid var(--line-soft)}
.battle-side.clock-side{align-items:flex-start;justify-content:center}
.hud-label{display:none}
.battle-side .clock{width:66px;min-height:31px;padding:2px 7px;flex-direction:row;gap:5px}
.clock::before{content:"시간";font-size:calc(7px - var(--game-desktop-font-step))}
.battle-side .ck-n{font-size:calc(16px - var(--game-desktop-font-step))}
.battle-arena{border-inline:0}
@media (max-width:360px){
  .tray{gap:5px;padding-inline:6px}
}
.cmdr{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:9px;
  padding:6px 12px;background:transparent;border-bottom:0}

.cm-c{grid-area:1/2;justify-self:center;display:flex;flex-direction:column;align-items:center;gap:3px}
.cmdr.mine{border:0}
.por{width:44px;height:44px;flex:none;border-radius:3px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  border:2px solid var(--line);position:relative;font-size:calc(17px - var(--game-desktop-font-step));font-weight:400;
  transition:box-shadow .16s,transform .1s}
.por:hover{transform:translateY(-1px)}
.pips{grid-area:1/3;justify-self:end}


.por.foe,.por.me{border:0;border-radius:50%;background-repeat:no-repeat;background-position:center;
  background-size:contain;width:50px;height:50px}
.por.foe{background-image:url(assets/ui/battle_core_enemy_anime_v1.webp?v=1);color:#f7dcd4;
  text-shadow:0 1px 3px #000,0 0 7px #0009}
.por.me{background-image:url(assets/ui/battle_core_player_anime_v1.webp?v=1);color:#dff3ea;
  text-shadow:0 1px 3px #000,0 0 7px #0009}






























.por .pf{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:62%;height:62%;border-radius:50%;object-fit:cover;z-index:1;filter:none}
.por .pf-hp{position:absolute;right:-9px;bottom:-5px;z-index:3;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  isolation:isolate;--bs:123%;--bimg:url(assets/ui/badge_hp_blood_preview_v4.webp?v=1);
  font-family:var(--num);font-weight:700;font-variant-numeric:tabular-nums;
  font-size:calc(14px - var(--game-desktop-font-step));line-height:1;
  padding-top:.069em;color:#effaf0;text-shadow:0 1px 2px #000c}
.por.foe .pf-hp{color:#ffeae4}
.por.hit{animation:shake .3s}


.cmdr:has(.por.hit){animation:core-hit-decay .32s ease-out both}
@keyframes core-hit-decay{
  0%,100%{transform:translateX(0)}
  16%{transform:translateX(-9px)}
  34%{transform:translateX(6px)}
  52%{transform:translateX(-4px)}
  70%{transform:translateX(2px)}
  86%{transform:translateX(-1px)}
}


.por.hit::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,#ff5242 0%,#c4271b 62%,#7a110900 100%);
  animation:bleedp .34s ease-out forwards}
@keyframes bleedp{0%{opacity:0}18%{opacity:.62}100%{opacity:0}}
.por>span{position:relative;z-index:2}

.corebreak{position:fixed;z-index:18;pointer-events:none;transform:translate(-50%,-50%)}
.corebreak img{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.corebreak img.on{opacity:1}
.cbflash{position:fixed;inset:0;z-index:18;pointer-events:none;
  background:radial-gradient(circle at var(--x) var(--y),#ffffffb0 0,#ffe7c466 9%,#ffffff00 34%)}

.cbdebris{position:fixed;z-index:19;pointer-events:none;transform:translate(-50%,-50%);overflow:visible}
.cbshard,.cbspark,.cbshock{position:absolute;display:block;pointer-events:none}







.cbboom{position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#fff 0%,#ffeec4 22%,#ffb45a66 46%,transparent 72%)}
.cbwave{position:absolute;border-radius:50%;pointer-events:none;
  border:2.5px solid #ffe3ae;box-shadow:0 0 16px #ffc67a99}
.cbshard{clip-path:polygon(12% 0,100% 24%,72% 100%,0 68%);
  box-shadow:0 0 2px #f5dcaa99,0 2px 4px #000c}
.cbshard:nth-child(3n){clip-path:polygon(48% 0,100% 100%,0 72%)}
.cbshard:nth-child(4n){clip-path:polygon(0 15%,86% 0,100% 72%,28% 100%)}
.cbspark{width:3px;height:3px;border-radius:50%;background:var(--spark);
  box-shadow:0 0 5px var(--spark),0 0 9px #fff5}
.cbshock{left:50%;top:50%;width:72%;height:72%;border-radius:50%;
  border:2px solid #ead39a99;box-shadow:0 0 8px #dcc07988,inset 0 0 7px #fff4}


















.porwrap{position:relative;z-index:0;flex:none;display:flex;align-items:center;justify-content:center}
.porwrap .por{position:relative;z-index:1}
.cm-halo{position:absolute;left:50%;top:50%;z-index:0;pointer-events:none;
  width:var(--halo,clamp(104px,calc(var(--app-w) * .32),134px));aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.4);opacity:0;
  background:url(assets/ui/battle_core_awakening_backplate_spin.png?v=1) center/contain no-repeat;
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,1.2,.35,1)}

.porwrap.awoke .cm-halo{opacity:.92;transform:translate(-50%,-50%) scale(1);
  animation:halospin 26s linear infinite}
@keyframes halospin{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to  {transform:translate(-50%,-50%) rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .porwrap.awoke .cm-halo{animation:none} }
.por span{transition:color .2s}
.lowhp{color:var(--danger)!important}
.rolling{display:inline-block;animation:rollp .44s cubic-bezier(.2,1.4,.4,1)}
@keyframes rollp{0%{transform:scale(1)}32%{transform:scale(1.26)}100%{transform:scale(1)}}
.dmgf{position:absolute;left:50%;top:-2px;transform:translate(-50%,0);pointer-events:none;z-index:6;
  font-size:calc(17px - var(--game-desktop-font-step));font-weight:400;color:var(--danger);text-shadow:0 2px 7px #000,0 0 14px #c9524a88;white-space:nowrap}
.dmgf.up{color:var(--ok);text-shadow:0 2px 7px #000,0 0 14px #5da16b88}
.dmgf.down{top:auto;bottom:-2px}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}





.cm-n{position:relative;z-index:1;
  font-family:var(--serif);font-size:calc(12.5px - var(--game-desktop-font-step));font-weight:400;white-space:nowrap;
  max-width:none;overflow:visible;text-align:center;
  text-shadow:0 1px 4px #000,0 0 10px #000b}


.cm-r{grid-area:1/3;justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.cm-r > *{flex:none}



.givebtn{flex:none;padding:3px 9px;border-radius:9px;border:1px solid var(--line);
  background:#0d0b10a8;font-family:var(--serif);font-size:calc(10.5px - var(--game-desktop-font-step));font-weight:400;
  letter-spacing:.1em;text-indent:.1em;color:var(--fg-faint);line-height:1.5;white-space:nowrap}
.givebtn:hover,.givebtn:active{color:var(--danger);border-color:#5c2620}
.homebtn:hover,.homebtn:active{color:var(--fg);border-color:var(--line-s,#5a5a6a)}

.homebtn.quit:hover,.homebtn.quit:active{color:var(--danger);border-color:#5c2620}
.givebtn[hidden]{display:none}





.tbar{position:relative;z-index:1;
  flex:none;display:flex;flex-direction:column;align-items:stretch;gap:2px;
  padding:3px 10px 2px;transition:opacity .2s}
.tb-n{align-self:flex-end;font-family:var(--mono);font-size:calc(11px - var(--game-desktop-font-step));font-weight:400;
  font-variant-numeric:tabular-nums;line-height:1;letter-spacing:.04em;
  

  color:var(--tc)}
.tb-g{height:3px;border-radius:2px;background:#ffffff14;overflow:hidden}
.tb-g > i{display:block;height:100%;width:100%;border-radius:2px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 55%,#000),var(--tc));
  transition:width .22s linear,background .25s}



.tbar{--tc:#7fdca0}
.tbar.foe{--tc:#8fb6f0}
.tbar.warn,.tbar.foe.warn{--tc:#f0d67e}
.tbar.hot,.tbar.foe.hot{--tc:#e8695f}
.tbar.hot .tb-n{animation:ckp 1s ease-in-out infinite}
.tbar.idle{opacity:.3}
@keyframes ckp{0%,100%{opacity:1}50%{opacity:.45}}





.cm-l{grid-area:1/1;justify-self:start;min-width:0;max-width:100%;
  display:flex;flex-direction:column;align-items:flex-start}
.cm-l .logfeed{grid-area:auto;width:100%}


.homebtn{flex:none;margin-right:auto;padding:7px 13px;min-height:34px;border-radius:var(--r-s);border:1px solid var(--line);
  background:#0d0b10a8;font-family:var(--serif);font-size:calc(11.5px - var(--game-desktop-font-step));font-weight:400;
  letter-spacing:.1em;text-indent:.1em;color:var(--fg-mid);line-height:1.5;white-space:nowrap;cursor:pointer}
.homebtn[hidden]{display:none}
.logfeed{grid-area:1/1;justify-self:start;min-width:0;max-width:100%;display:flex;flex-direction:column;
  gap:1px;overflow:hidden;text-align:left;padding:2px 4px;border-radius:var(--r-s);cursor:pointer}
.logfeed:hover{background:#ffffff08}







.lf{font-size:calc(10px - var(--game-desktop-font-step));line-height:1.55;color:var(--fg-mid);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:100%;font-weight:500}
.lf.me{color:#1F7A52} .lf.foe{color:#A8342A} .lf.sys{color:var(--fg-mid)}
.lf:nth-last-child(1){opacity:1} .lf:nth-last-child(2){opacity:.88}
.lf:nth-last-child(3){opacity:.74} .lf:nth-last-child(n+4){opacity:.62}





.cm-s{display:flex;gap:9px;height:22px;flex:none;justify-content:flex-end;align-items:center;
  font-family:var(--mono);font-size:calc(10px - var(--game-desktop-font-step));color:var(--fg-mid);font-variant-numeric:tabular-nums}



.simg{font-family:var(--serif);font-size:calc(10.5px - var(--game-desktop-font-step));padding:2px 7px;border-radius:2px;font-weight:400;
  border:1px solid;white-space:nowrap;animation:awkin .3s cubic-bezier(.2,1.3,.4,1);
  cursor:pointer;-webkit-tap-highlight-color:transparent;transition:filter .14s}
.simg:active{filter:brightness(1.35)}
@media (hover:hover) and (pointer:fine){ .simg:hover{filter:brightness(1.2)} }
@keyframes awkin{0%{opacity:0;transform:scale(.7)}100%{opacity:1;transform:scale(1)}}
.simg.심마{background:#33150f;color:var(--simma);border-color:#5c2620}
.simg.명경지수{background:#131f33;color:var(--myeong);border-color:#22375c}
.simg.축기{background:#0f2a22;color:var(--chukgi);border-color:#1e4d3e}
.simg.무아지경{background:#2a2333;color:#c3a9e8;border-color:#463a5c}
.simg.결의{background:#2e2410;color:var(--chungi);border-color:#5c4a1e}
.pips{display:flex;gap:3px;align-items:center;flex:none}
.pip{width:9px;height:9px;border-radius:50%;background:var(--line)}
.pip.x{background:#ffffff0d;box-shadow:inset 0 0 0 1px #ffffff12}

.pip.f{background:linear-gradient(145deg,#8fe0a8,#2f7f4e);box-shadow:0 0 5px #2f7f4e99}
.pip.b{background:linear-gradient(145deg,#eccb7a,#b8892f);box-shadow:0 0 5px #b8892f99}

#foePips .pip.f{background:linear-gradient(145deg,#f09a8f,#9e3b33);box-shadow:0 0 5px #9e3b3399}

@keyframes pipin{0%{transform:scale(0);opacity:0}
  58%{transform:scale(1.55);opacity:1}
  100%{transform:scale(1);opacity:1}}
.pip.new{animation:pipin .34s cubic-bezier(.3,1.5,.5,1) backwards}

@keyframes pipspend{0%,100%{opacity:1;transform:scale(1);filter:brightness(1)}
  50%{opacity:.28;transform:scale(.72);filter:brightness(.72) saturate(.55)}}
#myPips .pip.spend{animation:pipspend .68s ease-in-out infinite;outline:1px solid #ead99a66;outline-offset:1px}












.board{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;justify-content:safe center;gap:5px;padding:6px 8px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;
  

  background:transparent}
.board::-webkit-scrollbar{display:none}


.frow{display:flex;gap:var(--sura-gap);justify-content:center;min-height:72px;align-items:center;position:relative;z-index:1}
.board .rule{display:none}   










.slotbed{position:absolute;inset:0;z-index:0;pointer-events:none;
  display:flex;gap:var(--sura-gap);justify-content:center;align-items:center}












.slotbed > i{flex:1;max-width:var(--sura-w);aspect-ratio:63/88;border-radius:2px;
  border:1px solid #62809a66;background:#7290a518;box-shadow:inset 0 0 12px #4b688422}

.slot{flex:1;max-width:var(--sura-w);aspect-ratio:63/88;border-radius:2px;background:transparent}

.slot.open{opacity:1;border:1.5px dashed var(--ok);background:#6fcf972e;
  box-shadow:inset 0 0 12px #6fcf9733,0 0 6px #6fcf9740;animation:sp 1.1s ease-in-out infinite}
.slot.open::after{content:"＋";display:flex;align-items:center;justify-content:center;height:100%;color:var(--ok);font-size:calc(19px - var(--game-desktop-font-step));opacity:.95}
@keyframes sp{50%{background:#6fcf9759;border-color:#b6f5cf;box-shadow:inset 0 0 18px #6fcf9766,0 0 14px #6fcf9780}}





.unit{flex:1;max-width:var(--sura-w);position:relative;cursor:pointer;transition:transform .12s;border-radius:3px}











.unit[style*="fixed"]:not(.summon-ghost){max-width:calc(100px * var(--fxk))}


















.unit .c-name{font-size:calc(8px - var(--game-desktop-font-step));line-height:1.2}
.unit .c-name::after{margin-top:2px}
.unit .kb{font-size:calc(6.3px - var(--game-desktop-font-step));line-height:1.45;padding:0 4px;border-radius:7px}
.unit .c-type{font-size:calc(6.7px - var(--game-desktop-font-step));padding:0 4px;border-radius:7.5px}


.unit .c-cost,.unit .c-atk,.unit .c-hp{width:22px;font-size:calc(11.5px - var(--game-desktop-font-step))}
.unit .c-path{width:22px}
.unit .c-foot{left:4%;right:4%;bottom:calc(var(--bz) + 22px);gap:2px}


.unit .card{transition:box-shadow .18s}


.card.eng,.dfull.eng{box-shadow:none}





.card.eng,.dfull.eng{overflow:visible}
.card.eng > .c-art,.card.eng > .c-veil,.dfull.eng > .c-art,.dfull.eng > .c-veil{
  border-radius:calc(var(--card-r,4.5%) - var(--art-in,5cqw) * .5)}
@property --eng-turn{syntax:"<angle>";inherits:false;initial-value:0deg}





.card.eng>.engorbit,.dfull.eng>.engorbit{position:absolute;inset:-1px;z-index:4;pointer-events:none;
  border:0;border-radius:calc(var(--card-r,4.5%) + 1px);opacity:0}


@supports ((-webkit-mask-composite:xor) or (mask-composite:exclude)){
  .card.eng>.engorbit,.dfull.eng>.engorbit{opacity:1;padding:1px;
    background:conic-gradient(from var(--eng-turn),transparent 0 74%,#e8cf8f00 78%,#d4a84399 82%,#fff1c5 85%,#e8cf8fcc 88%,transparent 93% 100%);
    -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
            mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
    -webkit-mask-composite:xor;mask-composite:exclude;
    filter:drop-shadow(0 0 2px #d4a843);
    animation:engorbit 5.2s linear infinite}}
.unit .card.eng>.engorbit{inset:-.75px;padding:.75px}
.unit.sel .engorbit,.unit.ready .engorbit,.unit.tgt .engorbit,
.hcard.can .engorbit,.hcard.sel .engorbit,.summon-ghost.eng-await .engorbit{opacity:0}

.card.eng.locked>.engorbit,.gcard.used .card.eng>.engorbit,
.gcard.used .card.eng.locked>.engorbit{filter:drop-shadow(0 0 2px #d4a843)}
@keyframes engorbit{to{--eng-turn:360deg}}
@media (prefers-reduced-motion:reduce){.engorbit{animation:none}}

.unit.sel .card.eng,.unit.ready .card.eng{animation:none}
.unit.tgt .card.eng{animation:plr .62s ease-in-out infinite}
.unit.tgt.good .card.eng{animation:plg .62s ease-in-out infinite}





.tgtlab{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;
  pointer-events:none;
  font-family:var(--serif);font-size:calc(clamp(9px,round(calc(var(--app-w) * .027), 1px),11.5px) - var(--game-desktop-font-step));font-weight:400;letter-spacing:.02em;
  word-break:keep-all;text-align:center;color:#fff}
.tgtlab::before{content:"";position:absolute;left:8%;right:8%;top:38%;bottom:38%;border-radius:3px;
  background:#2a0d0ddd;border:1.5px solid #e2574e;
  box-shadow:0 0 10px #e2574e77,inset 0 0 8px #e2574e33}
.tgtlab.good::before{background:#07241add;border-color:#4fd08a;
  box-shadow:0 0 10px #4fd08a77,inset 0 0 8px #4fd08a33}





.fxpop.free,.fxpop.bind{border-radius:3px;padding:2px 7px;border:1.5px solid}
.fxpop.free{color:#eafff3;background:#07241ae0;border-color:#5fd8a0;
  box-shadow:0 0 10px #4fd08a66}
.fxpop.bind{color:#ffe6e2;background:#2a0d0de0;border-color:#e2574e;
  box-shadow:0 0 10px #e2574e66}
.tgtlab{animation:tgtlab 1.2s ease-in-out infinite}
@keyframes tgtlab{0%,100%{opacity:.86}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){ .tgtlab{animation:none} }











.unit.gang .c-veil::after{display:none;content:"";position:absolute;inset:0;pointer-events:none;
  

  box-shadow:inset 0 0 0 1.5px #ffffffd6,inset 0 0 10px 2px #ffffffa6,inset 0 0 20px 5px #dff3ff42;
  background:radial-gradient(ellipse 75% 68% at 50% 50%,transparent 58%,#ffffff17 80%,#ffffff33 100%);
  animation:gangb 2.1s ease-in-out infinite}
@keyframes gangb{50%{box-shadow:inset 0 0 0 1.5px #fffffff0,inset 0 0 13px 3px #ffffffc4,inset 0 0 26px 7px #dff3ff59}}














.fxplay{position:fixed;z-index:16;pointer-events:none;
  transform:translate(-50%,-50%);
  background-repeat:no-repeat;
  background-size:calc(var(--n) * var(--w)) var(--w);
  animation:fxrun var(--ms) steps(var(--n)) 1 forwards}
@keyframes fxrun{ from{background-position-x:0} to{background-position-x:calc(var(--n) * var(--w) * -1)} }

.fxplay.loop{animation:fxrun var(--ms) steps(var(--n)) infinite}



.fxplay.behind{position:absolute;left:50%;top:50%;z-index:0}


















.vhbox{position:fixed;left:4px;bottom:4px;z-index:97;max-width:96%;padding:6px 8px;border-radius:4px;
  background:#000c;color:#9f9;pointer-events:none;white-space:pre;text-shadow:0 1px 2px #000;
  font-family:var(--mono);font-size:11px;line-height:1.45}
.vhpin{position:fixed;top:0;left:0;width:1px;visibility:hidden;pointer-events:none}
.vhpin.svh{height:100svh} .vhpin.lvh{height:100lvh} .vhpin.dvh{height:100dvh}

























































html.kw-win > body > [style*="fixed"],
html.kw-win #tban{visibility:hidden !important}

.fxcss{position:fixed;z-index:16;pointer-events:none;transform:translate(-50%,-50%);overflow:visible}
.fxcss i,.fxcss b{position:absolute;display:block}




.fx-statup{--c1:#e8fbf0;--c2:#8fe0b0;--c3:#4fd08a;--dir:-1}
.fx-statdn{--c1:#efe6f5;--c2:#a893bd;--c3:#6b5f7d;--dir:1}
.fxcss .glow{left:50%;width:92%;height:38%;transform:translateX(-50%);
  background:radial-gradient(60% 80% at 50% 100%,var(--c2) 0%,color-mix(in srgb,var(--c3) 55%,transparent) 44%,transparent 74%);
  filter:blur(2px);opacity:0;animation:fxglow var(--ms) ease-out forwards}
.fx-statup .glow{bottom:-12%}   
.fx-statdn .glow{top:-4%;transform:translateX(-50%) scaleY(-1)}
@keyframes fxglow{0%{opacity:0}16%{opacity:.95}100%{opacity:0}}
.fxcss .wisp{left:calc(50% + var(--x));width:var(--w);height:78%;margin-left:calc(var(--w) / -2);
  background:linear-gradient(to top,transparent 2%,var(--c3) 16%,var(--c2) 42%,var(--c1) 66%,transparent 100%);
  border-radius:48% 52% 44% 56%/62% 58% 42% 38%;
  filter:blur(1.6px);opacity:0;
  animation:fxwisp var(--ms) cubic-bezier(.26,.66,.36,1) var(--d) forwards}
.fx-statup .wisp{bottom:-7%}    



.fx-statdn .wisp{top:0;
  background:linear-gradient(to bottom,transparent 2%,var(--c3) 16%,var(--c2) 42%,var(--c1) 66%,transparent 100%)}
@keyframes fxwisp{
  0%  {opacity:0;   transform:translateY(calc(var(--dir) * -4%))  scaleY(.3)  scaleX(.7)  skewX(0deg)}
  20% {opacity:.98}
  58% {              transform:translateY(calc(var(--dir) * 36%)) scaleY(1)   scaleX(1.06) skewX(5deg)}
  100%{opacity:0;   transform:translateY(calc(var(--dir) * 86%)) scaleY(1.18) scaleX(.62) skewX(-6deg)}}
.fxcss .mote{left:calc(50% + var(--x));width:var(--s);height:var(--s);border-radius:50%;
  background:radial-gradient(circle,#fff 0%,var(--c1) 40%,transparent 72%);
  opacity:0;animation:fxmote var(--ms) ease-out var(--d) forwards}
.fx-statup .mote{bottom:1%}
.fx-statdn .mote{top:8%}
@keyframes fxmote{
  0%  {opacity:0;transform:translate(0,0) scale(.5)}
  22% {opacity:1}
  100%{opacity:0;transform:translate(var(--sx),var(--fy)) scale(.25)}}




.fx-venom{--c1:#f2e9f7;--c2:#a21caf;--c3:#5d1160;--c4:#c3d98a}




.fxcss .vring{left:35%;top:35%;width:30%;height:30%;border-radius:50%;
  border:2px solid var(--c1);opacity:0;
  animation:fxvring calc(var(--ms) * .46) cubic-bezier(.12,.8,.3,1) forwards}
@keyframes fxvring{0%{opacity:.95;transform:scale(.3)}100%{opacity:0;transform:scale(3.1)}}
.fxcss .vcore{left:12%;top:12%;width:76%;height:76%;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,var(--c2) 22%,var(--c3) 48%,transparent 72%);
  filter:blur(1.4px);opacity:0;
  animation:fxvcore var(--ms) cubic-bezier(.1,.9,.3,1) forwards}
@keyframes fxvcore{
  0%{opacity:0;transform:scale(.2)} 8%{opacity:1;transform:scale(1.14)}
  22%{transform:scale(.92)} 100%{opacity:0;transform:scale(1.05)}}

.fxcss .varm{left:45%;top:4%;width:10%;height:46%;transform-origin:50% 100%;
  background:linear-gradient(to top,transparent 0%,var(--c3) 12%,var(--c4) 46%,transparent 94%);
  border-radius:50% 50% 40% 40%/70% 70% 30% 30%;
  filter:blur(1.2px);opacity:0;
  animation:fxvarm calc(var(--ms) * .8) cubic-bezier(.1,.75,.3,1) var(--d) forwards}
@keyframes fxvarm{
  0%  {opacity:0;  transform:rotate(var(--a)) translateY(28%) scale(.22)}
  12% {opacity:.98}
  55% {             transform:rotate(calc(var(--a) + 9deg)) translateY(-16%) scale(1)}
  100%{opacity:0;  transform:rotate(calc(var(--a) + 16deg)) translateY(-30%) scale(1.12)}}
.fxcss .vdrop{left:50%;top:50%;width:var(--s);height:var(--s);border-radius:50%;
  margin-left:calc(var(--s) / -2);margin-top:calc(var(--s) / -2);   
  background:radial-gradient(circle,var(--c1) 0%,var(--c2) 48%,transparent 74%);
  opacity:0;animation:fxvdrop calc(var(--ms) * .72) cubic-bezier(.1,.8,.4,1) var(--d) forwards}
@keyframes fxvdrop{
  0%  {opacity:0;transform:translate(0,0) scale(.4)}
  10% {opacity:1}
  100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(.2)}}




.fx-ki{--c1:#fff6dd;--c2:#f0c868;--c3:#c98f2a}
.fx-healCore{--c1:#eafff3;--c2:#7fe0b8;--c3:#2fae7a}
.fxcss .ring{left:50%;top:50%;width:100%;height:100%;margin-left:-50%;margin-top:-50%;
  border-radius:50%;border:2px solid var(--c2);opacity:0;
  box-shadow:0 0 10px var(--c3),inset 0 0 10px color-mix(in srgb,var(--c2) 60%,transparent);
  animation:fxring calc(var(--ms) * .8) cubic-bezier(.2,.7,.3,1) var(--d) forwards}
@keyframes fxring{0%{opacity:0;transform:scale(.62)}22%{opacity:.95}100%{opacity:0;transform:scale(1.42)}}
.fxcss .halo{left:-12%;top:-12%;width:124%;height:124%;border-radius:50%;opacity:0;
  background:radial-gradient(circle,transparent 42%,color-mix(in srgb,var(--c2) 55%,transparent) 58%,transparent 76%);
  filter:blur(2px);animation:fxhalo var(--ms) ease-out forwards}
@keyframes fxhalo{0%{opacity:0;transform:scale(.8)}24%{opacity:1}100%{opacity:0;transform:scale(1.2)}}







.fx-fire{--c1:#fff3d6;--c2:#ff9b3d;--c3:#e03b14;--c4:#7a1a06;opacity:.7}
.fxcss .fring{left:35%;top:35%;width:30%;height:30%;border-radius:50%;
  border:2px solid var(--c1);opacity:0;
  animation:fxvring calc(var(--ms) * .42) cubic-bezier(.12,.8,.3,1) forwards}
.fxcss .fcore{left:14%;top:14%;width:72%;height:72%;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,var(--c1) 14%,var(--c2) 36%,var(--c3) 58%,transparent 76%);
  filter:blur(1.3px);opacity:0;
  animation:fxvcore var(--ms) cubic-bezier(.1,.9,.3,1) forwards}
.fxcss .ftongue{left:44%;top:2%;width:12%;height:48%;transform-origin:50% 100%;
  background:linear-gradient(to top,transparent 0%,var(--c4) 10%,var(--c3) 34%,var(--c2) 62%,var(--c1) 84%,transparent 100%);
  border-radius:50% 50% 36% 36%/72% 72% 28% 28%;
  filter:blur(1px);opacity:0;
  animation:fxftongue calc(var(--ms) * .78) cubic-bezier(.12,.76,.3,1) var(--d) forwards}
@keyframes fxftongue{
  0%  {opacity:0;  transform:rotate(var(--a)) translateY(30%) scale(.2)}
  14% {opacity:1}
  56% {             transform:rotate(calc(var(--a) * .74)) translateY(-14%) scale(1)}
  100%{opacity:0;  transform:rotate(calc(var(--a) * .5))  translateY(-34%) scale(1.14)}}
.fxcss .ember{left:50%;top:50%;width:var(--s);height:var(--s);border-radius:50%;
  margin-left:calc(var(--s) / -2);margin-top:calc(var(--s) / -2);
  background:radial-gradient(circle,#fff 0%,var(--c2) 46%,transparent 74%);
  opacity:0;animation:fxvdrop calc(var(--ms) * .76) cubic-bezier(.1,.8,.4,1) var(--d) forwards}










.fx-juhwaipma{--c1:#ffd9d9;--c2:#c0202a;--c3:#2a0608}
.fxcss .jflash{left:-6%;top:-6%;width:112%;height:112%;border-radius:50%;opacity:0;
  background:radial-gradient(circle,color-mix(in srgb,var(--c2) 55%,transparent) 0%,transparent 64%);
  animation:fxjflash var(--ms) ease-out forwards}
@keyframes fxjflash{0%{opacity:0;transform:scale(.6)}12%{opacity:1}100%{opacity:0;transform:scale(1.1)}}
.fxcss .jcrack{left:50%;top:50%;width:var(--w);height:2.5px;transform-origin:0 50%;
  background:linear-gradient(90deg,var(--c1) 0%,var(--c2) 34%,var(--c3) 74%,transparent 100%);
  box-shadow:0 0 6px color-mix(in srgb,var(--c2) 70%,transparent);
  opacity:0;animation:fxjcrack var(--ms) cubic-bezier(.1,.85,.3,1) var(--d) forwards}
@keyframes fxjcrack{
  0%  {opacity:0;transform:rotate(var(--a)) scaleX(.06)}
  14% {opacity:1}
  46% {transform:rotate(var(--a)) scaleX(1)}
  100%{opacity:0;transform:rotate(var(--a)) scaleX(1)}}










.fx-draft{--c1:#fff6dc;--c2:#ffd98a;--c3:#c9972f;opacity:.7}







.fxcss .beam{left:18%;top:-46%;width:64%;height:116%;
  background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--c1) 70%,transparent) 18%,
             color-mix(in srgb,var(--c2) 52%,transparent) 62%,transparent 100%);
  clip-path:polygon(32% 0,68% 0,100% 100%,0 100%);
  filter:blur(1.5px);opacity:0;transform-origin:50% 0;
  animation:fxbeam var(--ms) cubic-bezier(.2,.8,.3,1) forwards}
@supports ((mask:radial-gradient(#000,#000)) or (-webkit-mask:radial-gradient(#000,#000))){
  


  .fxcss .beam{clip-path:none;filter:blur(3.4px);
    -webkit-mask:radial-gradient(56% 124% at 50% 108%,#000 18%,#0009 52%,transparent 86%);
            mask:radial-gradient(56% 124% at 50% 108%,#000 18%,#0009 52%,transparent 86%)}
}
@keyframes fxbeam{
  0%  {opacity:0;transform:scaleY(.1) scaleX(.7)}
  22% {opacity:1;transform:scaleY(1)  scaleX(1)}
  64% {opacity:.9}
  100%{opacity:0;transform:scaleY(1)  scaleX(.86)}}
.fxcss .pool{left:6%;bottom:2%;width:88%;height:26%;border-radius:50%;
  background:radial-gradient(50% 60% at 50% 50%,var(--c1) 0%,color-mix(in srgb,var(--c2) 60%,transparent) 44%,transparent 76%);
  filter:blur(2px);opacity:0;animation:fxpool var(--ms) ease-out forwards}
@keyframes fxpool{0%{opacity:0;transform:scale(.4)}26%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.1)}}




























.gangfx{position:absolute;inset:0;z-index:7;pointer-events:none;
  overflow:hidden;border-radius:3px}









.gangfx i{position:absolute;inset:2%;border-radius:50%;
  border:1.5px solid transparent;
  border-top-color:#fff6dc;border-bottom-color:#ffd98a;
  opacity:.52;
  animation:gangspin var(--d) linear infinite}
.gangfx i:nth-child(1){--d:2.6s;transform:rotate(0deg)}
.gangfx i:nth-child(2){--d:3.6s;inset:11% 3%;border-top-color:#ffeab4cc;border-bottom-color:#e8b45f99;
  animation-direction:reverse}
.gangfx i:nth-child(3){--d:4.8s;inset:4% 13%;border-top-color:#ffe9b099;border-bottom-color:#c9972f88}
@supports ((mask:radial-gradient(#000,#000)) or (-webkit-mask:radial-gradient(#000,#000))){
  .gangfx i{border:0;
    
    background:conic-gradient(from 0deg,
      transparent 0 3%, var(--g2) 13%, var(--g1) 23%, var(--g2) 33%, transparent 46%,
      transparent 53%, var(--g2) 63%, var(--g1) 73%, var(--g2) 83%, transparent 96% 100%);
    










    padding:1.6px;border-radius:3px;background:none;animation:none;overflow:hidden;
    -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
            mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
    -webkit-mask-composite:xor;mask-composite:exclude}
  .gangfx i::before{content:"";position:absolute;left:50%;top:50%;width:200%;height:200%;
    background:conic-gradient(from 0deg,
      transparent 0 3%, var(--g2) 13%, var(--g1) 23%, var(--g2) 33%, transparent 46%,
      transparent 53%, var(--g2) 63%, var(--g1) 73%, var(--g2) 83%, transparent 96% 100%);
    filter:blur(.9px);
    animation:gangrun var(--d) linear infinite}
  








  .gangfx i:nth-child(1){--g1:#fff6dc;--g2:#ffd98acc;inset:2%;opacity:.82}
  .gangfx i:nth-child(2){--g1:#ffeab4;--g2:#e8b45fa8;inset:7%;padding:1.2px;opacity:.58}
  .gangfx i:nth-child(3){--g1:#ffe9b0;--g2:#c9972f88;inset:12%;padding:1px;opacity:.38}
  .gangfx i:nth-child(2)::before{animation-direction:reverse}
}
@keyframes gangspin{to{transform:rotate(360deg)}}
@keyframes gangrun{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to  {transform:translate(-50%,-50%) rotate(360deg)}}


.gangfx b{position:absolute;inset:0;border-radius:3px;
  box-shadow:inset 0 0 10px 1px #ffd98a3d,inset 0 0 3px #fff6dc47;
  animation:gangbreath 2.2s ease-in-out infinite}
@keyframes gangbreath{0%,100%{opacity:.42}50%{opacity:.78}}
@media (prefers-reduced-motion:reduce){ .gangfx i,.gangfx i::before,.gangfx b{animation:none} }


.status-release{position:fixed;z-index:16;pointer-events:none;border-radius:3px}
.status-release.frz{box-shadow:inset 0 0 13px 2px #8cceffb0,0 0 11px #7ab6e777}
.status-release.sil{box-shadow:inset 0 0 13px 2px #d76770a8,0 0 11px #ae4a5d77}
.status-release .gangfx{position:absolute;inset:0}





.unit .c-cost,.unit .c-atk,.unit .c-hp,.unit .c-path{z-index:8}






.unit .c-foot{z-index:8}
.unit .tgtlab{z-index:9}






.dustmotes{position:absolute;inset:0;z-index:9;pointer-events:none;overflow:visible}
.dustmotes b{position:absolute;display:block;border-radius:50%;
  background:radial-gradient(circle,#d7d2c7 0%,#7d786f 46%,transparent 76%);
  opacity:0;animation:dustmote var(--ms) ease-out var(--d) forwards}
.dustmotes b.ash{background:radial-gradient(circle,#d7d2c7 0%,#847f76 48%,transparent 78%)}
.dustmotes b.ember{background:radial-gradient(circle,#fff3d0 0%,#ff9b3d 38%,#c2380c 66%,transparent 82%);
  box-shadow:0 0 5px #ff8a2e88}
@keyframes dustmote{
  0%  {opacity:0;transform:translate(0,0) scale(.7)}
  18% {opacity:.95}
  100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(.2)}}


@keyframes dust{
  0%  {opacity:1;filter:none}
  22% {opacity:.92;filter:blur(.5px) brightness(1.25) sepia(.55) saturate(2.6) hue-rotate(-14deg)}
  55% {opacity:.62;filter:blur(2px) brightness(1.05) sepia(.4) saturate(1.4) grayscale(.35)}
  100%{opacity:0;  filter:blur(8px) brightness(.9) grayscale(.9);transform:translateY(-16px) scale(.94)}}
@media (prefers-reduced-motion:reduce){
  .fxcss,.dustmotes{display:none} }




















.unit.gang::after{content:"";position:absolute;inset:0;z-index:7;pointer-events:none}
@media (prefers-reduced-motion:reduce){ .unit.gang::after{animation:none} }






.ripfx{position:fixed;z-index:15;pointer-events:none;border-radius:6px;opacity:0;
  border:2px solid #7dffb4;
  box-shadow:0 0 10px 1px #4dffa088,inset 0 0 8px #4dffa044}
.ripfx.foe{border-color:#ff8a8a;
  box-shadow:0 0 10px 1px #ff5a5a88,inset 0 0 8px #ff5a5a44}
.ripfx.foe.eng{border-color:#ffb27a;
  box-shadow:0 0 16px 3px #ff7a4fcc,0 0 30px 8px #d4634366,inset 0 0 12px #ff7a4f66}
.ripfx.eng{border:3px solid #ffe08a;
  box-shadow:0 0 16px 3px #ffd25fcc,0 0 30px 8px #d4a84366,inset 0 0 12px #ffd25f66}




.aurafx{position:fixed;z-index:16;pointer-events:none;transform:translate(-50%,-50%)}
.aurafx.heal{border:2px solid #7fe0a8;
  box-shadow:0 0 16px 4px #4fd08a80,0 0 34px 10px #4fd08a3d,inset 0 0 18px 4px #7fe0a84d;
  background:radial-gradient(closest-side,#4fd08a26,transparent 78%)}


.slot.land,.unit.land{animation:land .34s cubic-bezier(.2,1.5,.4,1)}
@keyframes land{0%{transform:scale(1.18)}100%{transform:scale(1)}}




.unit.ready .card{box-shadow:0 0 0 2px var(--ready),0 0 13px #4dffa055,inset 0 0 14px #4dffa01a;
  animation:readybreath 1.5s ease-in-out infinite}
@keyframes readybreath{
  0%,100%{box-shadow:0 0 0 2px var(--ready),0 0 10px #4dffa04d,inset 0 0 14px #4dffa01a}
  50%    {box-shadow:0 0 0 2px var(--ready),0 0 22px 3px #4dffa0cc,inset 0 0 16px #4dffa033}}
@media (prefers-reduced-motion:reduce){ .unit.ready .card{animation:none} }


.unit.queued{transform:translateY(-2px)}




.unit.queued .card{animation:none}
.unit.queued .card::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:#0a0a1433}


.unit.sel{transform:translateY(-5px)}
.unit.sel .card{box-shadow:0 0 0 2px var(--ok),0 0 14px #6fcf9777}





.unit.tgt .card{box-shadow:0 0 0 2px var(--danger),0 0 12px #c9524a99;animation:plr .62s ease-in-out infinite}




.unit.ready{touch-action:none}


.hand{touch-action:pan-x}




.atkline{position:fixed;inset:0;width:100%;height:100%;z-index:17;pointer-events:none;--hue:var(--danger);
  animation:atkbeat .62s ease-in-out infinite}
@keyframes atkbeat{50%{opacity:.5}}
@media (prefers-reduced-motion:reduce){.atkline{animation:none}}
.atkline line{stroke:var(--hue);stroke-width:3;stroke-linecap:round;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--hue) 70%,transparent)) drop-shadow(0 1px 2px #000c)}
.atkline polygon{fill:var(--hue);
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--hue) 70%,transparent)) drop-shadow(0 1px 2px #000c)}








.dropmark{position:fixed;z-index:17;width:calc(54px * var(--fxk));height:calc(54px * var(--fxk));margin:calc(-27px * var(--fxk)) 0 0 calc(-27px * var(--fxk));
  pointer-events:none;
  background-repeat:no-repeat;background-position:center;background-size:contain;
  filter:drop-shadow(0 0 5px var(--mk,#c9524a))
         drop-shadow(0 0 13px color-mix(in srgb,var(--mk,#c9524a) 75%,transparent))
         drop-shadow(0 2px 4px #000d);
  animation:mkpop .18s cubic-bezier(.2,1.4,.4,1)}
@keyframes mkpop{from{transform:scale(.55);opacity:0}to{transform:scale(1);opacity:1}}

.dropmark.bad {--mk:var(--danger)}
.dropmark.good{--mk:var(--ok)}
.dropmark.atk   {background-image:url(assets/ui/drag_mark_atk.webp?v=2)}
.dropmark.equip {background-image:url(assets/ui/drag_mark_equip.webp?v=1)}
.dropmark.cast,
.dropmark.sumtgt{background-image:url(assets/ui/drag_mark_cast.webp?v=1)}
.dropmark.summon{background-image:url(assets/ui/drag_mark_summon.webp?v=1)}
@media (prefers-reduced-motion:reduce){.dropmark{animation:none}}






















.dragghost{position:fixed;z-index:18;width:60px;pointer-events:none;
  transform:translate(-50%,-86%) rotate(-4deg) scale(calc(1.04 * var(--k,1)));transform-origin:50% 100%;
  filter:drop-shadow(0 6px 12px #000b) drop-shadow(0 0 10px #0008);
  animation:ghpick .16s cubic-bezier(.2,1.3,.4,1)}


@keyframes ghpick{from{transform:translate(-50%,-62%) rotate(0) scale(calc(.96 * var(--k,1)))}}

.hcard.lifted{opacity:.22}
.hcard.lifted .card{animation:none!important;box-shadow:none!important}
@media (prefers-reduced-motion:reduce){.dragghost{animation:none}}


body.atkdrag{user-select:none;-webkit-user-select:none}






img{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
.card img,.unit img,.hcard img,.gcard img,.stg-card img,.gain-ic img,#iBody img,#oBody img{pointer-events:none}

@keyframes plr{50%{box-shadow:0 0 0 4px #ff8a7e,0 0 26px #e8695fe6,inset 0 0 20px #c9524a5c;
  filter:brightness(1.22) saturate(1.1)}}
.unit.tgt.good .card{box-shadow:0 0 0 2px var(--ok),0 0 12px #6fcf9799;animation:plg .62s ease-in-out infinite}
@keyframes plg{50%{box-shadow:0 0 0 4px #b6f5cf,0 0 26px #6fcf97e6,inset 0 0 20px #6fcf975c;
  filter:brightness(1.2) saturate(1.1)}}



.por.tgt{animation:plrp .62s ease-in-out infinite}
@keyframes plrp{
  0%,100%{box-shadow:0 0 0 3px var(--danger),0 0 14px #c9524aaa;filter:none}
  50%{box-shadow:0 0 0 5px #ff8a7e,0 0 30px #e8695fe6;filter:brightness(1.24)}}
.orb.good{background:radial-gradient(circle,#fff 0%,#b6f5cf 40%,#6fcf9766 70%,transparent)}
.boom.good{background:radial-gradient(circle,#f2fff6 0%,#9fe7bd 28%,#6fcf9788 54%,transparent 72%);
  animation:rise .5s ease-out forwards}
@keyframes rise{to{transform:translateY(-26px) scale(1.5);opacity:0}}
.unit.hit{animation:shake .3s}

.unit.hid .card{filter:brightness(.6) saturate(.72)}
.unit.hid .card::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:#0a0712a1;mix-blend-mode:multiply}

.unit .c-text{display:none}




.c-kw{display:flex;justify-content:center;gap:2px;flex-wrap:wrap;z-index:2}

.kb{font-family:var(--mono);font-size:calc(clamp(5px,4.1cqw,7px) - var(--game-desktop-font-step));line-height:1.5;
  letter-spacing:.04em;text-indent:.04em;padding:0 4px;border-radius:7px;
  background:#0b0908d4;border:1px solid #ffffff33;
  color:#efe6d6;text-shadow:0 1px 2px #000;white-space:nowrap}
.kb.g{color:#96dfa0} .kb.s{color:#9fd6ff} .kb.y{color:#e0c98a}



















.ugain{--gh:13px;z-index:4;display:flex;flex-direction:row;flex-wrap:nowrap;
  align-items:center;justify-content:center;gap:2px;width:100%;
  height:var(--gh);overflow:hidden;margin-bottom:2px}
.ugain .kb{flex:none;height:var(--gh);box-sizing:border-box;display:flex;align-items:center;
  font-size:calc(7px - var(--game-desktop-font-step));line-height:1;padding:0 5px;border-color:#6fcf9799;background:#0b0908eb;
  max-width:100%;overflow:hidden;text-overflow:ellipsis}

.kb.d{color:#ff8f80;border-color:#7d3c39}








.unit{overflow:visible}
.uplus{position:absolute;top:50%;left:100%;transform:translate(-50%,-50%);
  width:22px;height:22px;padding:0;z-index:9;pointer-events:auto;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:calc(13px - var(--game-desktop-font-step));line-height:1;
  border-radius:50%;border:1px solid #62809a88;background:#f4f7fbee;color:#2A4A7A;
  box-shadow:0 2px 6px -2px #2A4A7A66}
.uplus:hover,.uplus:focus-visible{background:#fff;border-color:var(--kv-cyan,#1AA7E8);color:#1AA7E8}
.uplus:active{transform:translate(-50%,-50%) scale(.92)}

#yunMixPlus{left:auto;right:-11px;top:46%}



.uplus.inset{left:auto;right:-11px;top:46%}

.ulogpop{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  padding:16px;background:#0b141f55;backdrop-filter:blur(1.5px)}
.ulog-box{width:100%;max-width:320px;max-height:78%;overflow:auto;
  background:#FFFFFFF5;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 14px 34px -12px #2A4A7A88;padding:12px 13px 11px}
.ulog-h{font-family:var(--mjo);font-size:calc(14px - var(--game-desktop-font-step));color:var(--fg);margin-bottom:2px}
.ulog-s{font-size:calc(10.5px - var(--game-desktop-font-step));color:var(--fg-faint);
  letter-spacing:.04em;margin:9px 0 4px}
.ulog-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}

.ulog-i{border:1px solid var(--line);border-radius:8px;padding:5px 8px;background:#FFFFFF}
.ulog-i b{display:block;font-weight:400;font-family:var(--mjo);
  font-size:calc(12px - var(--game-desktop-font-step));color:var(--fg)}
.ulog-i span{display:block;margin-top:1px;
  font-size:calc(10.5px - var(--game-desktop-font-step));line-height:1.45;
  color:var(--fg-mid);word-break:keep-all}
.ulog-i.up{border-color:#8FD3AE}
.ulog-i.dn{border-color:#E9A79F}

.ulog-i.n{border-style:dashed;background:#FAFBFD}
.ulog-i.n b{color:var(--fg-mid)}
.ulog-i.dn b{color:var(--kv-red-ink,#B3362D)}
.ulog-x{display:block;width:100%;margin-top:10px;min-height:34px;border-radius:9px;
  border:1px solid var(--line);background:var(--kv-pale-2,#EEF3F9);color:var(--fg-mid);
  font-size:calc(12px - var(--game-desktop-font-step));cursor:pointer}
.ulog-x:hover{border-color:var(--kv-cyan,#1AA7E8);color:#1AA7E8}




.ugain.more{justify-content:flex-start;
  -webkit-mask-image:linear-gradient(90deg,#000 76%,transparent);mask-image:linear-gradient(90deg,#000 76%,transparent)}

button.kb{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:.14s}
button.kb:hover{background:#1a1613ee;border-color:#ffffff59}
button.kb.on{background:var(--seal-deep);border-color:var(--seal);color:#f3e4e1}

.kb.e{color:#cbb6ff}


.c-atk.up,.c-hp.up{color:#7dffb4;text-shadow:0 0 7px #4dffa08c,0 1px 2px #000}
.c-atk.dn,.c-hp.dn{color:#ff9a8e;text-shadow:0 0 7px #e8695f8c,0 1px 2px #000}
.c-hp.hurt{color:#ff6b5e;text-shadow:0 0 6px #00000099}


.c-new{position:absolute;left:var(--bz);top:calc(var(--bz) + clamp(16px,19cqw,27px) + 1.2cqw);z-index:7;
  width:clamp(16px,19cqw,27px);text-align:center;
  font-family:var(--mono);font-weight:400;line-height:1.1;
  font-size:calc(clamp(5.5px,4.8cqw,8.5px) - var(--game-desktop-font-step));letter-spacing:.04em;
  color:var(--chungi);text-shadow:0 1px 3px #000,0 0 8px #d4a84388;
  animation:newpulse 1.6s ease-in-out infinite}



.card > .c-cost,.card > .c-atk,.card > .c-hp,.card > .c-path,
.card > .c-eng,.card > .c-new{transform:scale(.9);transform-origin:center}
.card > .c-type{transform:translateX(-50%) scale(.9)}
.card > .c-foot{transform:scale(.9);transform-origin:center bottom}
.card > .c-own{transform:translate(-50%,50%) scale(.9)}


@keyframes newpulse{50%{opacity:.5}}
.c-ar{position:absolute;bottom:3.5%;left:50%;transform:translateX(-50%);z-index:2;
  font-size:calc(clamp(7px,7cqw,10px) - var(--game-desktop-font-step));font-weight:400;color:#9fd6ff;text-shadow:0 1px 3px #000}







.tray{position:relative;z-index:1;
  flex:none;display:flex;gap:7px;padding:4px 8px;background:transparent;align-items:flex-end}





.tray.mine{align-items:center}

.tray.foe{display:grid;grid-template-columns:1fr auto 1fr;align-items:start}
.tray.foe .pile.deck{grid-area:1/1;justify-self:start}

.tray.foe .ohwrap{grid-area:1/2;justify-self:center;min-width:0;display:flex;align-items:flex-start;gap:3px}
.tray.foe .ohand{justify-self:center}
.tray.foe .pile.grave{grid-area:1/3;justify-self:end}
.tray.foe{border-bottom:1px solid var(--line-soft);align-items:flex-start;padding:3px 8px}
.tray.mine{border:0}


.pile{flex:none;width:30px;aspect-ratio:63/88;border-radius:3px;position:relative;overflow:hidden;
  border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.tray.foe .pile{width:26px}
.pile::before{display:none}



.pile.deck{background-color:#E8EFF7;background-image:url(assets/ui/pile_deck_back_anime_v1.webp?v=2);
  background-position:center;background-size:cover;background-repeat:no-repeat;border-color:#5d5548}

.pile.grave{background-color:#C9D2DE;background-image:linear-gradient(#5668804d,#56688075),url(assets/ui/pile_deck_back_anime_v1.webp?v=2);
  background-position:center;background-size:cover;background-repeat:no-repeat;border-color:#413c3f}
.pile.empty{opacity:.42}
.pile.grave{cursor:pointer} .pile.grave:hover{border-color:var(--seal)}







.pl-n{position:relative;z-index:1;font-size:calc(13px - var(--game-desktop-font-step));font-weight:700;line-height:1;font-variant-numeric:tabular-nums;
  color:#FFFFFF;text-shadow:0 1px 0 #000,0 -1px 0 #000,1px 0 0 #000,-1px 0 0 #000,0 1px 4px #000A}
.tray.foe .pl-n{font-size:calc(12px - var(--game-desktop-font-step))}








.ohand{min-width:0;max-width:100%;display:flex;justify-content:center;align-items:flex-start;
  gap:1px;padding-top:1px;height:37px}


.hn{flex:none;min-width:14px;text-align:center;font-size:calc(11px - var(--game-desktop-font-step));line-height:37px;
  color:var(--fg-mid);font-variant-numeric:tabular-nums;text-shadow:0 1px 3px #000}


.oc{flex:none;width:21px;aspect-ratio:63/88;border-radius:2px;border:0;
  background-image:url(assets/ui/pile_deck_back_anime_v1.webp?v=2);
  background-size:cover;background-position:center}

.oc.shown{width:31px;border-color:#6b5a3a;background-image:none;cursor:pointer;
  box-shadow:0 0 0 1px #d4a84366,0 1px 5px #000a}
.oc.shown .card{width:100%;border-radius:1px}
.oc.shown .c-path,.oc.shown .c-type,.oc.shown .c-foot,.oc.shown .c-atk,.oc.shown .c-hp{display:none}

.hand{flex:1;min-width:0;display:flex;gap:5px;overflow-x:auto;padding:7px 6px 5px;
  margin:-7px -6px -3px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;cursor:grab}






.hand.full{outline:2px solid #e2564d;outline-offset:-1px;border-radius:3px;
  animation:handfull 1s ease-in-out infinite}
@keyframes handfull{
  50%{outline-color:#ff9a90;background:#e2564d1f;box-shadow:0 0 14px #e2564d5c}}
@media (prefers-reduced-motion:reduce){
  .hand.full{animation:none;background:#e2564d1a}}
.hand.grabbing{cursor:grabbing;scroll-snap-type:none}
.hand.grabbing .hcard{pointer-events:none}


.hand::-webkit-scrollbar{display:none}
.hcard{flex:none;width:60px;cursor:pointer;transition:transform .12s;position:relative;scroll-snap-align:center}

.hcard:first-child{scroll-snap-align:start}
.hcard:last-child{scroll-snap-align:end}
.hcard.sel{transform:translateY(-8px)}
.hcard.sel .card{box-shadow:0 0 0 2px var(--seal),0 0 16px #c4453a66}



.hcard.can .card{box-shadow:0 0 0 1.5px #6fcf97b0,0 0 10px #6fcf9755;animation:hcb 1.5s ease-in-out infinite}
@keyframes hcb{50%{box-shadow:0 0 0 2px var(--ok),0 0 15px #6fcf97a0}}
.hcard.sel.can .card{animation:none}


.hcard.no .card{filter:grayscale(.92) brightness(.72) contrast(.94);opacity:.9}
.hcard.no .card::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:#1a17204d}
.actbar{flex:none;display:flex;gap:8px;align-items:center;padding:11px 12px calc(11px + var(--bot-gap));
  background:var(--panel);border-top:1px solid var(--line-soft)}
.hint{flex:1;min-width:0;font-size:calc(11px - var(--game-desktop-font-step));color:var(--fg-mid);line-height:1.4}
.hint b{color:var(--seal)}




.endbtn{flex:none;margin-left:auto;margin-right:-4px;padding:9px 15px;min-height:38px;
  border:1px solid var(--seal);border-radius:var(--r-s);background:var(--seal-deep);
  color:#f3e4e1;font-size:calc(12.5px - var(--game-desktop-font-step));font-weight:400}
.endbtn[hidden]{display:none}

.endbtn.wait{opacity:.6}
.endbtn[disabled]{opacity:.42;background:var(--panel-2);border-color:var(--line);color:var(--fg-mid)}
.cbtn{flex:none;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-s);font-size:calc(12.5px - var(--game-desktop-font-step));color:var(--fg-mid)}
.logpane{position:absolute;left:0;right:0;bottom:0;max-height:52%;background:#100d0bf7;border-top:1px solid var(--line);z-index:12;display:none;flex-direction:column}
.logpane.on{display:flex}
.lh{display:flex;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line-soft)}
.lh span{font-family:var(--mono);font-size:calc(10px - var(--game-desktop-font-step));letter-spacing:.18em;color:var(--fg-faint)}
.loglist{flex:1;overflow-y:auto;padding:8px 12px 14px;display:flex;flex-direction:column;gap:3px}
.lg{font-size:calc(10px - var(--game-desktop-font-step));line-height:1.55;color:var(--fg-mid)}
.lg.me{color:#bfe0d2} .lg.foe{color:#e8c4bb} .lg.sys{color:var(--fg-faint)}

.fieldmsg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.95);z-index:14;
  padding:11px 20px;border-radius:var(--r-s);background:#1c1713f5;border:1px solid var(--line);
  font-size:calc(13px - var(--game-desktop-font-step));color:var(--fg);text-align:center;max-width:82%;line-height:1.5;pointer-events:none;
  opacity:0;transition:opacity .16s,transform .16s;box-shadow:0 10px 26px -10px #000}
.fieldmsg.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.fieldmsg b{color:var(--seal)}
.fieldmsg.w{border-color:#5c4220;color:var(--warn)}

.nsub{display:block;margin-top:7px;padding-top:7px;border-top:1px solid var(--line-soft);
  font-size:calc(11px - var(--game-desktop-font-step));line-height:1.6;color:var(--fg-mid);font-weight:400}














.turnban{position:fixed;left:50%;width:calc(var(--app-w) * var(--k));top:50%;z-index:70;
  display:flex;justify-content:center;
  pointer-events:none;opacity:0;transform:translate(-50%,-50%)}








.tbbx{position:relative;display:block;width:calc(min(var(--app-w) * .7,300px) * var(--fxk));aspect-ratio:3/1;
  background:url(assets/ui/turn_banner_mine.webp?v=3) center/100% 100% no-repeat;
  filter:drop-shadow(0 10px 26px #000a)}
.turnban.foe .tbbx{background-image:url(assets/ui/turn_banner_foe.webp?v=3)}

.tb-t{position:absolute;left:18%;right:18%;top:35%;bottom:24%;
  display:flex;align-items:center;justify-content:center;
  

  font-family:var(--mjo);font-weight:800;
  
  font-size:calc(clamp(14px,round(calc(var(--app-w) * .05), 1px),21px) - var(--game-desktop-font-step));letter-spacing:.16em;text-indent:.16em;line-height:1;
  color:#e9f2ef;text-shadow:0 2px 9px #000,0 0 14px #000}
.turnban.foe .tb-t{color:#f3ddd6}




.turnban.awk{padding:0}
.awkbx{position:relative;display:block;
  
  container-type:inline-size;
  

  width:min(96%,540px);aspect-ratio:2097/750;
  background:url(assets/ui/dialog_awakening.webp?v=1) center/100% 100% no-repeat;
  filter:drop-shadow(0 14px 34px #000c)}


.awkbx > span{position:absolute;display:flex;align-items:center;justify-content:center;
  text-align:center;white-space:nowrap}





.aw-cap{left:0;right:0;top:19.8%;height:10.3%;font-family:var(--serif);
  font-size:calc(clamp(8.5px,2.6cqw,12.5px) - var(--game-desktop-font-step));line-height:1;
  letter-spacing:.34em;text-indent:.34em;
  color:#f5e0ab;text-shadow:0 1px 4px #000,0 0 10px #d4a84366}

.aw-name{left:0;right:0;top:33%;height:22%;font-family:var(--serif);font-weight:400;
  font-size:calc(clamp(17px,5.6cqw,27px) - var(--game-desktop-font-step));letter-spacing:.14em;text-indent:.14em;
  color:#f8efdb;text-shadow:0 2px 10px #000,0 0 22px #d4a84366}

.aw-sub{left:12%;right:12%;top:60%;height:26%;
  font-size:calc(clamp(9.5px,3.1cqw,13.5px) - var(--game-desktop-font-step));line-height:1.42;white-space:normal;
  color:#dccfb6;text-shadow:0 1px 5px #000}


.turnban.awk.foe .aw-cap{color:#e8b2a6}
.turnban.awk.foe .aw-name{color:#f6ded6;text-shadow:0 2px 10px #000,0 0 22px #a8524466}









.fxpopw{position:fixed;z-index:18;pointer-events:none;
  transform:translate(-50%,calc(-50% - var(--row,0) * 27px * var(--fxk))) scale(var(--fxk));
  transition:transform .2s cubic-bezier(.2,.8,.3,1)}
.fxpopw.out{transition:transform .2s,opacity .2s;opacity:0}
.fxpop{font-size:calc(12.5px - var(--game-desktop-font-step));font-weight:400;white-space:nowrap;letter-spacing:.02em;
  padding:3px 10px;border-radius:11px;background:#0c0a09f0;border:1px solid var(--line);
  color:var(--fg);text-shadow:0 1px 3px #000;box-shadow:0 5px 16px -6px #000}
.fxpop.bad{color:#ff8f80;border-color:#5f2c26}
.fxpop.good{color:#8fe0a8;border-color:#2c5a3c}

.fxpop.heal{color:#7fe0a8;border-color:#2c5a3c;text-shadow:0 0 10px #4fd08a66}
.fxpop.ki{color:#eccb7a;border-color:#5f4a1f}

.fxpop.dim{color:#b6ada0;border-color:#3b3731;font-weight:400;font-size:calc(11px - var(--game-desktop-font-step))}
.boom{position:fixed;z-index:17;pointer-events:none;width:calc(74px * var(--fxk));height:calc(74px * var(--fxk));margin:calc(-37px * var(--fxk)) 0 0 calc(-37px * var(--fxk));border-radius:50%;
  background:radial-gradient(circle,#fff2e0 0%,#f0b070 26%,#c4453a88 52%,transparent 72%)}



.slashfx{position:fixed;z-index:17;pointer-events:none;overflow:visible}






.slashfx > i{position:absolute;right:0;top:0;height:10px;margin-top:-5px;display:block;
  transform-origin:100% 50%;
  background:linear-gradient(90deg,transparent 0,#cfe8ff 8%,#fff 50%,#cfe8ff 92%,transparent 100%);
  filter:drop-shadow(0 0 6px #ffffffee) drop-shadow(0 0 16px #bfe0ffcc) drop-shadow(0 0 30px #7fb4ee77);
  clip-path:polygon(0 50%,14% 30%,38% 6%,62% 6%,86% 30%,100% 50%,86% 70%,62% 94%,38% 94%,14% 70%)}

.slash-echo{position:absolute;right:0;top:0;height:4px;margin-top:-2px;display:block;
  transform-origin:100% 50%;
  background:linear-gradient(90deg,transparent,#e8f5ff 13%,#fff 48%,#a9d4ff 86%,transparent);
  filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 10px #8ec8ffcc);
  clip-path:polygon(0 50%,20% 18%,78% 18%,100% 50%,78% 82%,20% 82%)}

.slash-chip{position:absolute;left:50%;top:50%;width:8px;height:2px;margin:-1px 0 0 -4px;
  background:linear-gradient(90deg,#fff,#a9d4ff88,transparent);filter:drop-shadow(0 0 3px #d8edff);
  animation:slashChip .42s var(--delay) cubic-bezier(.12,.7,.25,1) both}
@keyframes slashChip{0%{opacity:0;transform:translate(0,0) scaleX(.25) rotate(var(--rot))}
  18%{opacity:.9}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scaleX(.75) rotate(var(--rot))}}
.slash-bloodmist{position:absolute;left:50%;top:50%;width:52px;height:34px;transform:translate(-50%,-50%) rotate(-18deg);
  border-radius:48% 56% 42% 61%;background:radial-gradient(ellipse,#a51f1c80 0 18%,#76110e52 38%,transparent 70%);
  filter:blur(1.2px);animation:slashBloodMist .48s ease-out forwards}
@keyframes slashBloodMist{0%,13%{opacity:0;transform:translate(-50%,-50%) rotate(-18deg) scale(.35)}
  28%{opacity:.75;transform:translate(-50%,-50%) rotate(-18deg) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) rotate(-18deg) scale(1.3)}}
.slash-bloodcut{position:absolute;left:50%;top:50%;height:5px;margin:-2.5px 0 0 0;display:block;
  transform-origin:50% 50%;transform:translate(-50%,-50%) rotate(var(--slash-deg));text-decoration:none;
  background:linear-gradient(90deg,transparent,#65100d 10%,#bd352b 42%,#7f1712 70%,transparent);
  filter:drop-shadow(0 1px 1px #260403);clip-path:polygon(0 52%,13% 28%,42% 8%,72% 26%,100% 48%,72% 72%,38% 94%,12% 72%);
  animation:slashBloodCut .52s ease-out forwards}
@keyframes slashBloodCut{0%,14%{opacity:0;transform:translate(-50%,-50%) rotate(var(--slash-deg)) scaleX(.35)}
  28%{opacity:.9;transform:translate(-50%,-50%) rotate(var(--slash-deg)) scaleX(1)}
  70%{opacity:.62}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--slash-deg)) scaleX(1.05)}}
.slash-blood{position:absolute;left:50%;top:50%;width:7px;height:3px;margin:-1.5px 0 0 -3.5px;border-radius:70% 25% 65% 30%;
  background:#b92e25;box-shadow:0 0 2px #4d0908;animation:slashBlood .43s var(--bdelay) cubic-bezier(.12,.68,.28,1) both}
.slash-blood:nth-of-type(even){width:4px;height:4px;border-radius:50%;background:#851713}
@keyframes slashBlood{0%{opacity:0;transform:translate(0,0) scale(.35) rotate(var(--brot))}
  20%{opacity:.92}100%{opacity:0;transform:translate(var(--bdx),var(--bdy)) scale(.72) rotate(var(--brot))}}


.bleed::after{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;border-radius:3px;
  
  background:radial-gradient(130% 95% at 50% 45%,#ff5242 0%,#c4271b 58%,#7a1109 100%);
  animation:bleedf .52s ease-out forwards}
@keyframes bleedf{0%{opacity:0}16%{opacity:.46}100%{opacity:0}}
.orb{position:fixed;z-index:17;pointer-events:none;width:calc(20px * var(--fxk));height:calc(20px * var(--fxk));margin:calc(-10px * var(--fxk)) 0 0 calc(-10px * var(--fxk));border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#9fd6ff 40%,#4e9cc466 70%,transparent)}



.formfx .card{box-shadow:0 0 0 2px var(--fc),0 0 22px 3px var(--fg2),0 10px 30px -10px #000;
  animation:formb 1.1s ease-in-out infinite}
.formfx.mine{--fc:#7fdca0c4;--fg2:#3f9e6366;--fc2:#bff3d4;--fg3:#3f9e6388}
.formfx.foe {--fc:#e8918ac4;--fg2:#a8342c66;--fc2:#f6c5c0;--fg3:#a8342c88}
@keyframes formb{50%{box-shadow:0 0 0 2px var(--fc2),0 0 30px 5px var(--fg3),0 10px 30px -10px #000}}





.formcap{position:absolute;left:50%;top:100%;transform:translateX(-50%);
  width:150px;margin-top:5px;text-align:center;pointer-events:none;
  display:flex;flex-direction:column;gap:2px}
.formcap b{font-family:var(--serif);font-size:calc(8.5px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.02em;
  color:var(--fc2,#e8dcc6);text-shadow:0 1px 3px #000,0 0 8px #000}




.formcap span{font-size:calc(7px - var(--game-desktop-font-step));line-height:1.45;color:#ddd3c2;
  word-break:keep-all;text-shadow:0 1px 3px #000,0 0 8px #000}
.cast-flight .formcap{width:190px;margin-top:7px}
.cast-flight .formcap b{font-size:calc(10px - var(--game-desktop-font-step))}
.cast-flight .formcap span{font-size:calc(9px - var(--game-desktop-font-step))}

.unit.firing .card{opacity:.22;filter:grayscale(.6)}
.unit.firing{box-shadow:inset 0 0 0 1px #ffffff2e}

.result{position:absolute;inset:0;z-index:30;background:#100d0bf7;display:flex;flex-direction:column;align-items:center;
  justify-content:safe center;gap:15px;padding:26px;text-align:center}









.tueye{position:fixed;inset:0;z-index:98;background:#000;pointer-events:none;overflow:hidden}
.tueye[hidden]{display:none}


.tueye::after{content:"";position:absolute;inset:0;z-index:1;opacity:0;
  background:radial-gradient(60% 42% at 50% 50%,#EADFC88C,#C9B99733 46%,#0000 72%);
  transition:opacity .62s ease}
.tueye.te-open::after{opacity:1}

.tueye .te-thread{position:absolute;left:-30%;top:50%;width:160%;height:2px;opacity:0;
  background:linear-gradient(90deg,#0000,#C23B3B55 18%,#E86A6A 50%,#C23B3B55 82%,#0000);
  transform:rotate(-13deg);filter:blur(.4px)}

.tueye .te-lid{position:absolute;left:0;right:0;height:52%;background:#000;z-index:2}
.tueye .te-top{top:0;transform:translateY(calc((var(--lid,1) - 1) * 100%))}
.tueye .te-bot{bottom:0;transform:translateY(calc((1 - var(--lid,1)) * 100%))}
.tueye .te-say{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  margin:0;width:min(86%,var(--app-w));text-align:center;opacity:0;
  font-family:var(--mjo);font-size:clamp(15px,calc(var(--app-w) * .046),21px);line-height:1.7;letter-spacing:.02em;
  color:#EDE6DA;text-shadow:0 0 10px #000,0 1px 3px #000}

.tueye.te-open .te-lid{transition:transform .62s cubic-bezier(.22,.9,.26,1)}
.tueye.te-blink .te-lid{transition:transform .34s ease-in-out}
.tueye.te-gone{transition:opacity .5s ease;opacity:0}



.tuto{position:fixed;inset:0;z-index:95;background:#05040788;
  cursor:pointer;-webkit-tap-highlight-color:transparent;overflow:hidden;
  
  

  --tu-bot:calc(var(--tu-bar,0px) + 6px); --tu-bw:min(var(--app-w),520px);
  

  --tg-bar:var(--tu-bar,0px)}
.tuto[hidden]{display:none}



.tu-face{position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(var(--tu-bot) + var(--tu-bw) * 0.30);
  width:min(calc(var(--app-w) * .86),400px);max-height:calc(var(--app-h) * .6);object-fit:contain;object-position:bottom;
  filter:brightness(.44) saturate(.6) contrast(1.04)
         drop-shadow(0 0 30px #aaaaaa3d) drop-shadow(0 14px 38px #000d);
  pointer-events:none}

.tu-bub{bottom:calc(var(--tu-bot) + 2px)}
.tg-text>span{display:block;width:100%}
.tu-next{position:absolute;right:5%;bottom:12%;z-index:4;font-size:calc(12px - var(--game-desktop-font-step));color:#d8c9a8;
  animation:tunext 1.2s ease-in-out infinite}
@keyframes tunext{50%{transform:translateY(4px);opacity:.45}}
@media (max-width:380px){ .tu-face{width:calc(var(--app-w) * .8)} }


.tguide{position:fixed;inset:0;z-index:96;pointer-events:none;--tg-bar:0px}
.tguide[hidden]{display:none}
.tg-shade{position:absolute;inset:0;z-index:0;background:transparent;pointer-events:auto}

.tguide.bare .tg-shade{background:#050407a8}


.tguide.hold .tg-shade{pointer-events:none}
.tg-focus,.tg-hit{position:fixed;border-radius:12px}


.tg-focus.glide,.tg-hand.glide{transition:left .3s cubic-bezier(.3,.8,.3,1),top .3s cubic-bezier(.3,.8,.3,1),
  width .3s cubic-bezier(.3,.8,.3,1),height .3s cubic-bezier(.3,.8,.3,1),opacity .22s ease-out .08s}










.tu-fade{pointer-events:none;opacity:1;transition:opacity .17s ease-in-out;z-index:3}
.tg-focus{z-index:2;border:2px solid #d7b465;
  box-shadow:0 0 0 9999px #050407b0,0 0 0 5px #d7b46528,0 0 24px 7px #d7b46578;
  animation:tgfocus 1.25s ease-in-out infinite;pointer-events:none}
.tg-hit{z-index:4;margin:0;padding:0;border:0;background:transparent;pointer-events:auto;
  -webkit-tap-highlight-color:transparent;cursor:pointer}
@keyframes tgfocus{50%{box-shadow:0 0 0 9999px #050407b0,0 0 0 8px #d7b46518,0 0 34px 10px #d7b465a0}}
.tg-hand{position:fixed;z-index:5;height:auto;pointer-events:none;
  filter:drop-shadow(0 8px 15px #000c) drop-shadow(0 0 8px #7966d999);
  animation:tghand .86s ease-in-out infinite}
@keyframes tghand{50%{transform:translate(-4px,6px)}}






.tg-hand.up{animation-name:tghandup}
@keyframes tghandup{50%{transform:translate(4px,-6px)}}
.tg-bubble{position:absolute;z-index:3;left:50%;bottom:calc(var(--tg-bar) + 8px);transform:translateX(-50%);
  width:var(--tg-bw);aspect-ratio:1400/467;padding:0;
  background:url(assets/ui/dialog_simannyeo.webp?v=1) center/100% 100% no-repeat;
  filter:drop-shadow(0 15px 22px #000d);pointer-events:none;
  


  --tg-bw:min(var(--app-w),520px); --tg-foot:calc(var(--tg-bw) * .0593)}
.tg-bubble::before{display:none}



.tg-bust{position:absolute;z-index:2;left:-12px;--tg-lift:8px;bottom:var(--tg-lift);
  width:150px;height:202px;object-fit:contain;object-position:bottom;
  clip-path:inset(0 0 calc(var(--tg-foot) - var(--tg-lift)) 0);
  filter:drop-shadow(0 9px 18px #000d)}
.tg-copy{position:absolute;z-index:3;left:29%;right:8%;top:20%;bottom:14%}
.tg-name{position:absolute;left:8%;top:-13%;display:flex;align-items:center;justify-content:center;min-width:86px;height:27px;padding:0 17px;
  border:1px solid #796544;clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px);
  background:linear-gradient(180deg,#211f22f8,#0d0d10f8);box-shadow:inset 0 0 0 1px #c2a9771f,0 3px 8px #000b;
  font-family:var(--serif);font-size:calc(clamp(10px,round(calc(var(--app-w) * .027), 1px),13px) - var(--game-desktop-font-step));font-weight:400;letter-spacing:.08em;color:#e7d4a8;text-shadow:0 2px 6px #000}


.tg-text{position:absolute;left:8%;right:0;top:20%;bottom:0;margin:0;display:flex;align-items:flex-start;padding-top:1px;
  font-family:var(--mjo);
  font-size:var(--say-size);line-height:1.6;color:#eee7de;text-shadow:0 2px 6px #000}

.tguide.say .tg-shade{cursor:pointer}








.tguide.in .tg-bubble{animation:tgbin .24s cubic-bezier(.2,.9,.3,1) both}
@keyframes tgbin{from{opacity:0;transform:translateX(-50%) translateY(10px)}
                 to  {opacity:1;transform:translateX(-50%) translateY(0)}}




@media (prefers-reduced-motion:reduce){
  .tguide.in .tg-bubble{animation:none}}
.tg-focus[hidden],.tg-hit[hidden],.tg-hand[hidden]{display:none}


.tg-bubble.top{top:calc(var(--top-gap) + 64px);bottom:auto}
.tg-bubble.top::before{display:none}


#tblock{position:fixed;inset:0;z-index:74;background:transparent;
  -webkit-tap-highlight-color:transparent;touch-action:none}
#tblock[hidden]{display:none}










#tfocus .tf-bub,#tfocus .tf-ban{zoom:var(--k,1)}

#tfocus .tf-bub{position:fixed;z-index:2}
#tfocus .tf-bub[hidden]{display:none}









#tfocus .tf-ban{position:fixed;z-index:4;left:50%;transform:translateX(-50%);
  top:calc(var(--top-gap) + 76px);
  width:min(calc(var(--app-w) - 24px),496px);min-height:calc(min(calc(var(--app-w) - 24px),496px) / 7.5);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:12px 18px;box-sizing:border-box;pointer-events:none;
  background:var(--ban-img,linear-gradient(180deg,#141a24f2,#0b0e14f2)) center/100% 100% no-repeat;
  border:1px solid #7fa7d84d;border-radius:4px;
  box-shadow:0 0 0 1px #0008,0 10px 26px #000a,inset 0 0 22px #4a7fb82e;
  animation:tfban .22s cubic-bezier(.2,.9,.3,1) both}
#tfocus .tf-ban.low{top:auto;bottom:calc(var(--tg-bar) + 12px)}
#tfocus .tf-ban[hidden]{display:none}
#tfocus .tf-ban>span{font-family:var(--mjo);font-weight:700;
  font-size:calc(clamp(14px,round(calc(var(--app-w) * .044), 1px),19px) - var(--game-desktop-font-step));
  line-height:1.35;letter-spacing:.01em;color:#eaf2ff;text-shadow:0 2px 8px #000c,0 0 14px #5b8fc74d}
@keyframes tfban{from{opacity:0;transform:translate(-50%,8px) scale(.97)}
                 to{opacity:1;transform:translate(-50%,0) scale(1)}}
@media (prefers-reduced-motion:reduce){ #tfocus .tf-ban{animation:none} }
@media (max-width:380px){
  .tg-bust{width:122px;height:164px;left:-8px;--tg-lift:5px}
  .tg-copy{left:30%;right:7%;top:19%}
  .tg-name{left:7%;top:-10%;min-width:76px;height:24px;padding:0 13px}
  .tg-text{top:20%}
}



.cveil{position:fixed;inset:0;z-index:87;background:#05040766;
  opacity:0;transition:opacity .24s;-webkit-tap-highlight-color:transparent}
.cveil[hidden]{display:none}
.cveil.in{opacity:1}
.cpane{position:fixed;z-index:88;left:0;right:0;bottom:0;
  height:min(calc(var(--app-h) * .65),620px);min-height:300px;
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line);border-bottom:0;border-radius:17px 17px 0 0;
  background:var(--panel);box-shadow:0 -18px 44px #000d;
  padding-bottom:var(--bot-gap);
  transform:translateY(100%);transition:transform .26s cubic-bezier(.2,.9,.3,1)}
.cpane[hidden]{display:none}
.cpane.in{transform:none}

.cgrip{flex:none;width:38px;height:4px;margin:7px auto 0;border-radius:2px;background:#ffffff26}
.ch{flex:none;display:flex;align-items:center;gap:8px;padding:9px 14px 8px}
.ch h3{margin:0;flex:1;font-family:var(--serif);font-size:calc(15px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.06em;color:var(--fg)}
.ch-x{flex:none;width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--r-s);background:#0d0b11a6;color:var(--fg-mid);
  font-size:calc(13px - var(--game-desktop-font-step));-webkit-tap-highlight-color:transparent}
.ch-x:active{border-color:var(--seal);color:var(--fg)}
.clog{flex:1;min-height:0;overflow-y:auto;padding:4px 14px 10px;
  display:flex;flex-direction:column;gap:12px}
.cnone{margin:auto;font-size:calc(12px - var(--game-desktop-font-step));color:var(--fg-faint)}
.cmsg{display:flex;gap:9px}

.clog .face{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--line)}
.cm-b{flex:1;min-width:0}
.cm-h{display:flex;align-items:baseline;gap:5px}



.cmsg .cm-n{font-size:calc(12.5px - var(--game-desktop-font-step));font-weight:400;color:var(--fg);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:46%}
.cm-g{font-family:var(--mono);font-size:calc(10px - var(--game-desktop-font-step));color:var(--fg-faint)}

.cm-t{margin-left:auto;flex:none;font-family:var(--mono);font-size:calc(9.5px - var(--game-desktop-font-step));color:var(--fg-faint);white-space:nowrap}
.cm-x{margin:3px 0 0;font-size:calc(13px - var(--game-desktop-font-step));line-height:1.65;color:var(--fg-mid);
  white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
.cmsg.me .cm-n{color:var(--seal)}

.cmsg.sys{justify-content:center;text-align:center;font-size:calc(11px - var(--game-desktop-font-step));line-height:1.6;color:var(--fg-faint)}
.cbar{flex:none;display:flex;align-items:flex-end;gap:8px;padding:9px 12px 10px;
  border-top:1px solid var(--line-soft)}
.cin{flex:1;min-width:0;max-height:76px;padding:9px 11px;resize:none;overflow-y:auto;
  border:1px solid var(--line);border-radius:12px;background:#0d0b11;color:var(--fg);
  font-family:inherit;font-size:calc(13px - var(--game-desktop-font-step));line-height:1.5}
.cin:focus{outline:none;border-color:var(--seal)}
.cin:disabled{opacity:.5}
.csend{flex:none;height:37px;padding:0 14px;border-radius:12px;border:1px solid var(--seal);
  background:#1a1119;color:#f0dcc8;font-size:calc(12.5px - var(--game-desktop-font-step));font-weight:400;
  -webkit-tap-highlight-color:transparent;transition:opacity .14s}
.csend:disabled{opacity:.38;border-color:var(--line);color:var(--fg-faint)}
.csend:not(:disabled):active{transform:scale(.96)}

.cnote{flex:none;margin:0;padding:0 14px 7px;text-align:center;
  font-size:calc(10.5px - var(--game-desktop-font-step));line-height:1.5;color:var(--warn)}
.cnote:empty{display:none}




.revwrap{position:fixed;z-index:16;pointer-events:none;
  transform:translate(-50%,-50%) scale(var(--fxk));
  display:flex;flex-direction:column;align-items:center;gap:9px}
.rev-card{width:96px}
.rev-lab{font-family:var(--serif);font-size:calc(15px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.2em;text-indent:.2em;
  padding:4px 13px;border-radius:2px;background:#0c0a10e8;border:1px solid var(--line);
  text-shadow:0 2px 7px #000}
.rev-lab.bad{color:#f0a89f;border-color:#7d3c39}
.rev-lab.good{color:#9fe0b6;border-color:#2f5c42}

.castlab{display:block;width:max-content;margin:6px auto 0}
.castlab.top{margin:0 auto 6px}


.backfly{position:fixed;z-index:15;pointer-events:none;width:calc(38px * var(--fxk));aspect-ratio:63/88;border-radius:2px;
  border:1px solid #2d2740;background-color:#11151b;
  background-image:url(assets/ui/pile_deck_back_anime_v1.webp?v=2);
  background-size:cover;background-position:center;box-shadow:0 3px 10px #000a}
.coinfly{position:fixed;z-index:16;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:4px;
  opacity:0;transform:translate(-50%,-46%) scale(.94);transition:opacity .18s ease,transform .22s ease}
.coinfly.entered{opacity:1;transform:translate(-50%,-50%) scale(1)}
.coinfly.leaving{opacity:0;transform:translate(-50%,-58%) scale(.96)}
.cf-wheel{display:flex;align-items:center;gap:clamp(8px,calc(var(--app-w) * .025),14px)}
.cf-choice{position:relative;width:clamp(82px,calc(var(--app-w) * .23),108px);aspect-ratio:1;opacity:.55;transform:scale(.91);
  filter:saturate(.58) brightness(.66);transition:opacity .07s linear,transform .07s ease,filter .07s linear}
.cf-choice img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 7px 8px #000b)}
.cf-choice.is-focus{opacity:1;transform:scale(1.045);filter:saturate(1.12) brightness(1.1)}
.cf-choice-good.is-focus{filter:saturate(1.15) brightness(1.12) drop-shadow(0 0 8px #d6bd68aa)}
.cf-choice-bad.is-focus{filter:saturate(1.12) brightness(1.08) drop-shadow(0 0 8px #a84d49aa)}
.cf-choice.is-final{transform:scale(1.09)}
.cf-result-ring{position:absolute;left:50%;top:50%;width:88%;height:88%;border:2px solid #dfc56a;border-radius:50%;
  opacity:0;transform:translate(-50%,-50%) scale(.72);box-shadow:0 0 13px #dfc56aaa,inset 0 0 10px #dfc56a55}
.cf-choice-bad .cf-result-ring{border-color:#b85a50;box-shadow:0 0 13px #b85a50aa,inset 0 0 10px #b85a5055}
.cf-choice.is-final .cf-result-ring{animation:cfresult .58s cubic-bezier(.14,.72,.24,1) .15s both}
@keyframes cfresult{0%{opacity:0;transform:translate(-50%,-50%) scale(.72)}35%{opacity:.95}100%{opacity:0;transform:translate(-50%,-50%) scale(1.48)}}
.cf-particle{position:absolute;left:50%;top:50%;width:3px;height:11px;border-radius:3px;background:#ead78a;
  box-shadow:0 0 6px currentColor;opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateY(-18px);
  animation:cfparticle .52s cubic-bezier(.15,.72,.25,1) both}
.cf-choice-bad .cf-particle{background:#c36b61}
@keyframes cfparticle{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateY(-18px) scaleY(.45)}25%{opacity:.9}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(-1 * var(--d))) scaleY(.16)}}
.cf-lab{min-height:22px;font-family:var(--serif);font-size:calc(14px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.06em;
  color:#f2e7d2;text-shadow:0 2px 8px #000;opacity:0;transform:translateY(4px)}
.coinfly.revealed .cf-lab{animation:cflabel .28s ease-out both}
@keyframes cflabel{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.coinfly.bad .cf-lab{color:#e5b7af}
.rwd{display:flex;align-items:center;gap:11px}
.coinbig{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 0 9px #d4a84366)}
.rwd-n{font-size:calc(27px - var(--game-desktop-font-step));font-weight:400;color:var(--chungi);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.rwd-l{margin:0;font-size:calc(11.5px - var(--game-desktop-font-step));color:var(--fg-faint);letter-spacing:.06em}


.result h2{margin:0;font-family:var(--story);font-size:calc(38px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.14em;text-indent:.14em;
  text-shadow:0 4px 22px #000c}
.result.w h2{color:var(--ok)} .result.l h2{color:var(--danger)} .result.d h2{color:var(--fg-mid)}

.result h2.han{font-family:var(--han);font-weight:400;letter-spacing:-.02em;text-indent:-.02em}
.result p{margin:0;font-size:calc(12px - var(--game-desktop-font-step));color:var(--fg-mid);font-family:var(--mono)}

.result p.rsay{margin:-4px 0 2px;font-size:calc(12px - var(--game-desktop-font-step));line-height:1.85;color:var(--fg-faint);font-family:var(--sans);letter-spacing:.03em;text-align:center}

.rguide{position:absolute;left:50%;transform:translateX(-50%);width:min(370px,calc(100% - 16px));
  text-align:center}
.rguide-head{display:flex;align-items:center;gap:10px;justify-content:center;margin:0 0 6px;
  color:var(--fg-mid);font-size:calc(11px - var(--game-desktop-font-step));letter-spacing:.08em;white-space:nowrap}
.rguide-head::before,.rguide-head::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,#73625e78)}
.rguide-head::after{transform:rotate(180deg)}

.rguide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.rguide-card{min-width:0;min-height:78px;padding:4px 2px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;text-align:center;
  border:1px solid #645049;background:linear-gradient(160deg,#292126,#17151a);border-radius:var(--r-s);
  box-shadow:inset 0 1px #ffffff12,0 4px 10px #0005;transition:transform .16s,border-color .16s,background .16s}
.rguide-card:hover,.rguide-card:focus-visible{border-color:#b59a6d;background:linear-gradient(160deg,#382b28,#211b20)}
.rguide-card:active{transform:scale(.97)}
.rguide-mark{width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.rguide-mark img{display:block;width:23px;height:23px;object-fit:contain;filter:drop-shadow(0 1px 2px #0009)}
.rguide-card strong{font-size:calc(11px - var(--game-desktop-font-step));font-weight:400;color:var(--fg)}
.rguide-card small{font-size:calc(clamp(8px,calc(var(--app-w) * .022),9px) - var(--game-desktop-font-step));line-height:1.25;letter-spacing:-.025em;color:var(--fg-mid);white-space:nowrap}




.mull{position:absolute;inset:0;z-index:25;background:#100d0bf7;display:flex;flex-direction:column;
  justify-content:center;
  padding:calc(10px + var(--top-gap)) 14px calc(16px + var(--bot-gap));gap:13px}
.mull h3{margin:0;font-family:var(--serif);font-size:calc(19px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.08em;text-align:center}




.mclk{--tc:#7fdca0;flex:none;width:min(210px,62%);margin:-4px auto 0;
  display:flex;flex-direction:column;align-items:stretch;gap:3px}
.mclk.warn{--tc:var(--warn)}
.mclk.hot {--tc:var(--danger)}
.mclk-n{align-self:center;font-family:var(--mono);font-size:calc(12px - var(--game-desktop-font-step));font-weight:400;
  font-variant-numeric:tabular-nums;line-height:1;letter-spacing:.06em;color:var(--tc)}
.mclk-g{height:3px;border-radius:2px;background:#ffffff1a;overflow:hidden}
.mclk-g > i{display:block;height:100%;width:100%;border-radius:2px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 55%,#000),var(--tc));
  transition:width .22s linear,background .25s}


.mturn{font-size:calc(27px - var(--game-desktop-font-step))!important;font-weight:800!important;letter-spacing:.26em!important;text-indent:.26em;
  color:var(--fg);text-shadow:0 2px 20px #0009}




.mgrid{flex:0 1 auto;min-height:0;overflow-y:auto;scrollbar-width:none;
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-content:center;
  padding:9px;margin:-9px}
.mgrid::-webkit-scrollbar{display:none}
.mcard{position:relative;cursor:pointer;transition:transform .12s,opacity .15s}








.mcard.fixed{cursor:pointer;opacity:.74}
.mcard.x{opacity:.4;transform:scale(.94)}
.mcard.fixed:active{transform:scale(.97)}
.mcard.fresh{animation:fresh 1s cubic-bezier(.2,1.5,.4,1) both}
@keyframes fresh{from{transform:translateY(18px) scale(.8);opacity:0}to{transform:none;opacity:1}}
.mcard.x::after,.mcard.fixed::after{content:"교체";position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:calc(13px - var(--game-desktop-font-step));font-weight:400;color:var(--seal);
  background:#000000a8;border:1px solid var(--seal);border-radius:3px}

.mcard.fixed::after{content:"교체 불가";font-size:calc(11.5px - var(--game-desktop-font-step));letter-spacing:.02em;font-weight:400;
  color:#cfc4b4;border-color:#4d4657;background:#0000007a;
  text-shadow:0 1px 3px #000}



.tireback{border-radius:4px;border:1px solid #4a4130;
  background:url(assets/ui/pile_deck_back_anime_v1.webp?v=2) center/cover no-repeat,#E8EFF7;
  box-shadow:0 10px 26px #000c,0 0 0 1px #00000080;
  filter:grayscale(.45) brightness(.72)}


.hptabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:0 0 2px;margin:0 0 4px}
.hptabs::-webkit-scrollbar{display:none}
.hptab{flex:none;padding:6px 12px;border:1px solid var(--line);border-radius:2px;
  font-size:calc(11.5px - var(--game-desktop-font-step));color:var(--fg-mid);white-space:nowrap;background:var(--panel);
  -webkit-tap-highlight-color:transparent}
.hptab:hover{color:var(--fg)}
.hptab.on{background:var(--seal-deep);border-color:var(--seal);color:#f3e4e1}




#vInfo{z-index:28}



#vPool.fight{z-index:27}
.veil{position:absolute;inset:0;z-index:20;background:#111111f7;display:none;flex-direction:column;
  padding:calc(10px + var(--top-gap)) 16px calc(20px + var(--bot-gap))}










.veil.on{display:flex;animation:fade .12s ease}
@keyframes veilRise{from{transform:translateY(14px);opacity:0} to{transform:none;opacity:1}}










.veil.on > *                 {animation:veilRise .2s var(--pop) .04s backwards}
.veil.on > *:nth-child(2)    {animation-delay:.09s}
.veil.on > *:nth-child(n+3)  {animation-delay:.13s}
.veil.on > .veil             {animation:none}
.vh{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin-bottom:13px;flex:none}
.vh h3{grid-area:1/2;justify-self:center;text-align:center;margin:0;font-family:var(--serif);
  font-size:calc(16px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.06em;
  max-width:calc(var(--app-w) * .52);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.veil.vfooted{padding-bottom:0}
.vfoot{flex:none;display:flex;align-items:center;gap:8px;margin:13px -16px 0;
  padding:15px 16px calc(15px + var(--bot-gap));
  background:var(--panel);border-top:1px solid var(--line-soft)}

.vclose{flex:1;min-height:38px;display:flex;align-items:center;justify-content:center;
  font-size:calc(13.5px - var(--game-desktop-font-step));letter-spacing:.2em;text-indent:.2em;color:var(--fg-mid)}   
.vclose:hover{color:var(--fg)}
.vx{grid-area:1/3;justify-self:end;color:var(--fg-mid);font-size:calc(13px - var(--game-desktop-font-step));padding:5px 9px;border:1px solid var(--line);border-radius:var(--r-s)}
.vx:hover{color:var(--fg);border-color:var(--seal)}


















.vb{position:relative;flex:1;min-height:0;
  overflow-y:auto;overflow-x:hidden;scrollbar-width:none;
  padding-inline:7px;margin-inline:-7px;
  padding-block:10px;margin-block:-10px;
  display:flex;flex-direction:column;gap:13px}
.vb::-webkit-scrollbar{display:none}






.veil.mid{justify-content:center}
.veil.mid .vb{flex:0 1 auto;scrollbar-width:none;padding:9px;margin:-9px}
.veil.mid .vb::-webkit-scrollbar{display:none}
.veil.mid .vb > .grid{align-content:center}


.vb > *{flex:none}

#iBody{touch-action:pan-y}
#iBody img{-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}

.varr{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:34px;height:52px;
  display:flex;align-items:center;justify-content:center;font-size:calc(13px - var(--game-desktop-font-step));color:var(--fg-mid);
  background:#0b0908cc;border:1px solid var(--line);border-radius:var(--r-s);backdrop-filter:blur(2px)}
.varr:hover{color:var(--fg);border-color:var(--seal)}
.varr.l{left:4px} .varr.r{right:4px}
.varr[hidden]{display:none}
@media (max-width:420px){.varr{width:28px;height:46px;opacity:.82}}
.rstage{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:15px}
.rone{width:min(208px,calc(var(--app-w) * .62));position:relative}










.rone .rback{position:absolute;inset:0;z-index:9;border-radius:3px;pointer-events:none;
  background:url(assets/ui/pile_deck_back_anime_v1.webp?v=2) center/100% 100% no-repeat,#E8EFF7;
  box-shadow:0 6px 22px #000000a6}
.rone .rback.engaura{box-shadow:0 0 0 2px #ffe9a8,0 0 13px 2px #ffd25fcc,0 0 30px 6px #fff3c866,0 6px 22px #000000a6}

.rone .rback.go{animation:rbackdown .56s cubic-bezier(.36,.02,.2,1) forwards}
@keyframes rbackdown{
  18%{transform:translateY(-5%) rotate(-.6deg)}
  100%{transform:translateY(124%) rotate(1.2deg);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .rone .rback.go{animation-duration:.2s}
  @keyframes rbackdown{100%{transform:translateY(124%);opacity:0}}}
.pop{animation:pop .42s cubic-bezier(.2,1.5,.4,1)}
@keyframes pop{from{transform:scale(.74) rotateY(20deg);opacity:0}to{transform:none;opacity:1}}
.eburst{animation:eb 1.1s ease-out}
@keyframes eb{0%{box-shadow:0 0 0 0 #d4a843cc}70%{box-shadow:0 0 42px 12px #d4a84300}100%{box-shadow:0 0 0 0 #d4a84300}}

.dust{animation:dust 1.1s ease-in forwards}

.dust.q{animation-duration:.6s}


.rcount{font-family:var(--mono);font-size:calc(11px - var(--game-desktop-font-step));letter-spacing:.18em;color:var(--fg-faint)}
.rhint{font-size:calc(11.5px - var(--game-desktop-font-step));color:var(--fg-mid);text-align:center;line-height:1.6}
.rstage #revEng,.rstage #revState{min-height:1.6em}
.rhint.concealed{visibility:hidden}
.rhint.jin{color:var(--jin)}


.rhint.tap{animation:revtap 1.5s ease-in-out infinite}
@keyframes revtap{50%{opacity:.34}}
@media (prefers-reduced-motion:reduce){.rhint.tap{animation:none}}
.trow.tap{width:100%;text-align:left;cursor:pointer}
.trow.tap:hover{background:#ffffff0a}


.trow.ofa{align-items:center;gap:10px}
.trow.ofa .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oface{flex:none;width:34px;height:34px;border-radius:var(--r-s);
  background:center 18%/150% no-repeat;border:1px solid var(--line-soft);
  background-color:#14111a}
.oface[data-none]{background-image:linear-gradient(150deg,#232733,#131520)}

.engaura{position:relative;border-radius:3px;
  box-shadow:0 0 0 2px #ffe9a8,0 0 13px 2px #ffd25fcc,0 0 30px 6px #fff3c866;
  animation:engglow 1.9s ease-in-out infinite}
@keyframes engglow{
  50%{box-shadow:0 0 0 2px #fffdf2,0 0 19px 4px #ffdf86,0 0 44px 10px #fff6d688}}
.engaura::after{content:"";position:absolute;inset:-5px;border-radius:5px;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 50%,#fff2c02e,transparent 72%)}
.gstamp{position:relative}
.tapz{position:absolute;inset:0;z-index:1}






.g5{display:grid;grid-template-columns:repeat(var(--g,5),minmax(0,1fr));gap:6px}
@media (max-width:380px){.g5{grid-template-columns:repeat(min(var(--g,5),4),minmax(0,1fr))}}
.jinbox{border:1px solid #4a4133;border-radius:var(--r-s);padding:10px 12px;background:#1f1a14}
.jinbox h4{margin:0 0 6px;font-family:var(--mono);font-size:calc(10px - var(--game-desktop-font-step));letter-spacing:.16em;color:var(--jin);text-transform:uppercase}
.jinbox ul{margin:0;padding-left:16px;font-size:calc(11.5px - var(--game-desktop-font-step));color:var(--fg-mid);line-height:1.8}
.jinbox b{color:var(--jin);font-family:var(--mono)}

.detail{display:flex;flex-direction:column;gap:13px;align-items:center}




.dfull{width:100%;max-width:300px;aspect-ratio:63/88;border-radius:var(--card-r,4.5%);overflow:hidden;
  border:0;position:relative;cursor:pointer;align-self:center;container-type:inline-size;
  background:transparent}






.dfull::before{content:"";position:absolute;inset:var(--art-in,5cqw);z-index:0;pointer-events:none;
  background:radial-gradient(90% 62% at 50% 22%,color-mix(in srgb,var(--pc) 42%,#000),#000)}


.dfull::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:var(--card-frame) center/100% 100% no-repeat}


.dthumb{position:absolute;inset:var(--art-in,5cqw);width:calc(100% - var(--art-in,5cqw) * 2);height:calc(100% - var(--art-in,5cqw) * 2);object-fit:cover;opacity:0}
.dthumb.on{opacity:1}
.dimg{position:absolute;inset:var(--art-in,5cqw);width:calc(100% - var(--art-in,5cqw) * 2);height:calc(100% - var(--art-in,5cqw) * 2);object-fit:cover;opacity:0;transition:opacity .22s}
.dimg.on{opacity:1}
.dmissing{position:absolute;inset:var(--art-in,5cqw);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px}

.dover{position:absolute;inset:0;pointer-events:none;container-type:inline-size;
  transition:opacity .18s}
.dfull.bare .dover{opacity:0}



.artfull{position:fixed;inset:0;z-index:90;background:#000;cursor:zoom-out;
  display:flex;flex-direction:column;align-items:stretch;
  padding:calc(var(--top-gap) + 8px) 12px calc(12px + var(--bot-gap))}
.af-stage{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at center,#211b26,#08080b 75%)}
.artfull img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.af-stage .af-low,.af-stage .af-hi{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.af-stage .af-hi{opacity:0;transition:opacity .22s}
.af-stage .af-hi.on{opacity:1}
.artfull .af-none{width:min(calc(var(--app-w) * .92),520px);max-height:100%;aspect-ratio:63/88;border-radius:3px}




.af-mark{align-self:flex-start;display:block;
  width:calc(clamp(72px,calc(var(--app-w) * .22),100px) * var(--k));height:auto;
  margin:calc((var(--top-gap) + 18px) * var(--k) - var(--top-gap) - 8px) 0 0
    calc((var(--view-w) - var(--app-w) * var(--k)) / 2 + 17px * var(--k) - 12px);
  opacity:.82;filter:brightness(0) invert(1)
    drop-shadow(0 1px 7px #000) drop-shadow(0 0 16px #a97cff22);
  pointer-events:none;user-select:none}


.af-x{flex:none;align-self:stretch;margin:12px -12px calc(-12px - var(--bot-gap)) -12px;
  min-height:38px;padding:15px 16px calc(15px + var(--bot-gap));
  display:flex;align-items:center;justify-content:center;
  background:var(--panel);border:0;border-top:1px solid var(--line-soft);
  font-size:calc(13.5px - var(--game-desktop-font-step));letter-spacing:.2em;text-indent:.2em;color:var(--fg-mid);transition:color .14s}
.af-x:hover,.af-x:active{color:var(--fg)}



.dover::before{content:"";position:absolute;inset:var(--art-in,5cqw);
  background:linear-gradient(180deg,#00000047 0 10%,transparent 22% 46%,#0000008c 72%,#000000bf 100%)}
.dover .c-cost,.dover .c-atk,.dover .c-hp{width:clamp(26px,10.5cqw,36px);font-size:calc(clamp(12px,5cqw,17px) - var(--game-desktop-font-step))}



.dover .c-path{width:clamp(38px,21.7cqw,65px);
  top:calc(var(--bz) - (clamp(38px,21.7cqw,65px) - clamp(32px,15.3cqw,46px)) / 2);
  right:calc(var(--bz) - (clamp(38px,21.7cqw,65px) - clamp(32px,15.3cqw,46px)) / 2)}
.dover .c-eng{left:var(--bz);top:calc(var(--bz) + clamp(26px,10.5cqw,36px) + 1.2cqw);
  width:clamp(26px,10.5cqw,36px);font-size:calc(clamp(11px,4.4cqw,15px) - var(--game-desktop-font-step))}

.dover .c-foot{left:8%;right:8%;bottom:calc(var(--bz) + clamp(26px,10.5cqw,36px) + 6px);gap:4px}
.dover .c-name{font-size:calc(clamp(15px,5.4cqw,22px) - var(--game-desktop-font-step));line-height:1.25}
.dover .c-name::after{margin-top:4px}
.dover .c-text{font-size:calc(clamp(11px,3.6cqw,14px) - var(--game-desktop-font-step));line-height:1.6;min-height:1.6em;-webkit-line-clamp:7}



.dover .c-type{top:var(--bz);max-width:44%;padding:2px 12px;border-radius:11px;
  font-family:var(--mjo);font-weight:400;font-size:calc(clamp(10px,3.2cqw,13px) - var(--game-desktop-font-step));
  letter-spacing:.14em;text-indent:.14em;line-height:1.5;
  color:#e7dfd1;background:#0b0908d9;border:1px solid var(--line);text-shadow:0 1px 3px #000}


.dover .c-kw{gap:5px;pointer-events:auto}
.dover .kb{font-size:calc(clamp(10px,3.1cqw,12.5px) - var(--game-desktop-font-step));padding:1px 10px;border-radius:11px;
  border-color:var(--line);background:#0b0908ee}
.craftb{box-sizing:border-box;display:flex;align-items:center;justify-content:center;
  width:min(100%,320px);min-height:46px;gap:12px;padding:12px 20px;
  border:1px solid var(--jin);border-radius:var(--r-s);background:#1c1a2699;color:var(--fg);transition:.16s}
.craftb:hover{background:#232735;box-shadow:0 0 16px #aaaaaa33}
.craftb.no{opacity:.45}
.cr-l{font-size:calc(13px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.04em}
.cr-v{font-size:calc(12.5px - var(--game-desktop-font-step));font-weight:400;color:var(--jin);font-variant-numeric:tabular-nums}
.craftn{margin:0;text-align:center;font-size:calc(11px - var(--game-desktop-font-step));color:var(--fg-faint)}

.crhave{display:flex;align-items:center;justify-content:center;gap:5px;position:relative;
  font-size:calc(11.5px - var(--game-desktop-font-step));color:var(--fg-mid)}

.crhave b{font-family:var(--mono);color:var(--jin);font-weight:400}
.crhave b.gold{color:var(--chungi)}
.craftn.short{color:var(--warn)}
.fbtn.no{opacity:.45}
.fout{position:absolute;left:50%;top:-2px;transform:translate(-50%,0);pointer-events:none;z-index:8;
  font-family:var(--mono);font-size:calc(13px - var(--game-desktop-font-step));font-weight:400;white-space:nowrap;
  color:var(--danger);text-shadow:0 2px 6px #000}
.fout.jin{color:var(--jin)}
.fout.up{color:var(--ok)}
.dkws{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}

.dkw{font-size:calc(12.5px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.06em;padding:0 14px;min-height:36px;border-radius:var(--r-s);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--seal);background:#c4453a18;border:1px solid #c4453a55;transition:.14s}

.dkw.up{border-color:#2f5c42;color:#9fe0b6;background:#12241a}
.dkw.dn{border-color:#5c3230;color:#e6a9a2;background:#241615}
.dbase{display:block;font-family:var(--sans);font-size:calc(10px - var(--game-desktop-font-step));color:var(--fg-faint);letter-spacing:.02em;margin-top:1px}

.linkbox{display:flex;flex-direction:column;gap:9px}
.social-links{display:flex;flex-direction:column;gap:8px}
.social-row{min-height:52px;display:flex;align-items:center;gap:10px;padding:8px 10px;
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel)}
.social-brand{min-width:0;display:flex;align-items:center;gap:10px;font-size:calc(13px - var(--game-desktop-font-step));color:var(--fg)}
.social-brand b{font-weight:400}
.social-row[data-provider="facebook"] .sns-icon{width:22px;height:22px}
.social-row[data-provider="x"] .sns-icon{width:20px;height:20px;margin:2px}
.social-link{flex:none;margin-left:auto;min-width:66px;padding:8px 12px;font-size:calc(12px - var(--game-desktop-font-step))}

.social-linked{margin-left:auto;min-width:0;font-size:calc(11px - var(--game-desktop-font-step));line-height:1.35;text-align:right;
  color:var(--fg-mid);overflow-wrap:anywhere}



.social-side{margin-left:auto;min-width:0;display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.social-side .social-linked{margin-left:0}





.fbtn.dg.undo{margin-top:3px;min-width:76px;padding:6px 12px;font-size:calc(11px - var(--game-desktop-font-step));line-height:1.25;
  


  color:#ff9a8e;border-color:#5f2c26;background:#241417}
.fbtn.dg.undo:hover{background:#2a1716;border-color:var(--danger);color:#ffd9d3}
.dkw[data-kw]{cursor:pointer} .dkw[data-kw]:hover{background:#c4453a30}
.dkw.on{background:var(--seal-deep);color:#f3e4e1}
.dkw.flat{opacity:.75;cursor:default}
.dkw.sm{font-size:calc(12px - var(--game-desktop-font-step));padding:0 12px;min-height:34px;margin:0 6px 6px 0}
.kwl{display:flex;flex-wrap:wrap}

.kwtip{margin:0 0 7px;padding:9px 11px;border-left:2px solid var(--seal);background:#ffffff0d;
  border-radius:0 2px 2px 0;font-size:calc(11.5px - var(--game-desktop-font-step));line-height:1.75;color:var(--fg-mid);animation:fade .16s ease;
  white-space:pre-line}

.kwtip.under{margin:7px 0 0}

.tword{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
  text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;
  text-decoration-color:var(--fg-faint)}
.tword:hover,.tword.on{color:var(--seal);text-decoration-color:var(--seal)}





.dcon b{font-weight:400;color:#efe4cf}





.dcon{margin:0;padding:10px 13px;text-align:center;background:#ffffff04;white-space:pre-line;
  font-family:var(--story);font-size:calc(12px - var(--game-desktop-font-step));line-height:1.9;color:var(--fg-faint)}
.dwarn{display:block;margin-top:6px;font-size:calc(10.5px - var(--game-desktop-font-step));color:var(--warn)}

.dkws .dwarn{display:inline-flex;align-items:center;margin:0 0 0 2px}
.dl{width:100%;display:flex;flex-direction:column;border:1px solid var(--line-soft);border-radius:var(--r-s);overflow:hidden}
.dl div{display:flex;gap:12px;padding:8px 12px;font-size:calc(12px - var(--game-desktop-font-step));border-bottom:1px solid var(--line-soft)}
.dl div:last-child{border-bottom:none}
.dl dt{flex:none;width:68px;color:var(--fg-faint);font-size:calc(11px - var(--game-desktop-font-step))}
.dl dd{margin:0;flex:1}
.dl dd.m{font-family:var(--mono);font-variant-numeric:tabular-nums}
.concept{font-family:var(--serif);font-size:calc(13px - var(--game-desktop-font-step));line-height:1.9;color:var(--fg-mid);text-align:center;max-width:32ch}
.codebox{width:100%;background:var(--ink);border:1px solid var(--line);border-radius:var(--r-s);padding:10px 11px;
  font-family:var(--mono);font-size:calc(11.5px - var(--game-desktop-font-step));line-height:1.7;color:var(--fg);resize:vertical;min-height:84px;word-break:break-all}
.btnrow{display:flex;gap:8px}

.fbtn.dg{border-color:#7d3c39;color:#e6a9a2}
.fbtn.dg:hover{background:#2a1716;border-color:var(--danger);color:#ffd9d3}
.veil.ask{align-items:center;justify-content:center;padding:24px}

.spend-h{margin:0;text-align:center;font-family:var(--mjo);font-size:calc(15px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.06em}
.spend-q{margin:0;text-align:center;font-size:calc(13px - var(--game-desktop-font-step));line-height:1.6;color:var(--fg-mid)}
.spend-go{display:inline-flex;align-items:center;justify-content:center;gap:5px}
.spend-go .mini-token{width:15px;height:15px}
.spend-go.yeong{color:var(--yeong)} .spend-go.chungi{color:var(--chungi)}
.askbox{width:min(340px,100%);display:flex;flex-direction:column;gap:18px;
  padding:22px 20px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel)}

















.gainwrap{display:flex;flex-direction:column;align-items:center;gap:clamp(12px,calc(var(--app-w) * .034),18px);
  width:min(460px,100%)}
.gain-act{width:min(300px,86%)}


.gain-act[hidden]{display:none}
.gain-act .fbtn{width:100%;padding:13px}













#vGain .gainbox,#vYunCard .gainbox{box-sizing:border-box;width:100%;text-align:center;display:flex;flex-direction:column;
  gap:clamp(7px,calc(var(--app-w) * .02),10px);overflow:hidden;padding:20px 18px;
  border:0;border-radius:0;box-shadow:none;background:none}


























.gain-mark,.stg-mark{--mk:38px;--mk-in:26px;
  display:block;position:relative;flex:none;width:var(--mk);height:var(--mk);margin:2px auto 8px;
  transform:rotate(45deg);border-radius:5px;
  background:linear-gradient(135deg,#262936,#131520);
  border:1px solid var(--og,#666666);
  box-shadow:0 0 0 1px #0008,inset 0 1px 0 #ffffff1f,0 3px 10px #000a}




.gain-mark::before,.gain-mark::after,.stg-mark::before,.stg-mark::after{content:"";position:absolute;left:50%;top:50%;
  height:1px;width:92px;transform-origin:0 50%}
.gain-mark::before,.stg-mark::before{transform:rotate(-45deg) translateX(calc(-92px - var(--mk-in)));
  background:linear-gradient(90deg,#0000,var(--og,#666666))}
.gain-mark::after,.stg-mark::after{transform:rotate(-45deg) translateX(var(--mk-in));
  background:linear-gradient(90deg,var(--og,#666666),#0000)}
.gain-mark svg,.stg-mark svg{position:absolute;left:50%;top:50%;
  width:calc(var(--mk) * 23 / 38);height:calc(var(--mk) * 23 / 38);
  transform:translate(-50%,-50%) rotate(-45deg)}




.gm-pg{fill:#6a6080;stroke:#13161f;stroke-width:.8}
.gm-rl{fill:var(--og-hi,#aaaaaa);stroke:#13161f;stroke-width:.7}












.gm-qi{filter:hue-rotate(44deg) drop-shadow(0 .5px .6px #0b0814b8)}

.gain-hint{flex:none;margin:0;font-size:calc(11px - var(--game-desktop-font-step));line-height:1.4;
  color:var(--fg-faint);letter-spacing:.01em}
.gain-hint[hidden]{display:none}
.gain-seal{position:relative;flex:none;width:58px;height:32px;margin:2px auto 0;
  filter:drop-shadow(0 2px 5px #000a)}



.gain-seal::before{content:"";position:absolute;left:7px;right:7px;top:3px;bottom:3px;
  background:
    linear-gradient(#0000 6px,#ffffff1f 6px,#ffffff1f 7px,#0000 7px),
    linear-gradient(#0000 12px,#ffffff17 12px,#ffffff17 13px,#0000 13px),
    linear-gradient(180deg,#6a6080,#3a3f55);
  border:1px solid #1a1626;box-shadow:inset 0 1px 0 #ffffff1c}

.gain-seal::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,var(--og-hi,#aaaaaa),var(--og,#666666) 44%,var(--og-lo,#333333)) left center/8px 100% no-repeat,
    linear-gradient(180deg,var(--og-hi,#aaaaaa),var(--og,#666666) 44%,var(--og-lo,#333333)) right center/8px 100% no-repeat;
  border-radius:3px}



.gain-d{margin:0;font-size:calc(12px - var(--game-desktop-font-step));line-height:1.5;color:var(--fg-mid);letter-spacing:.01em}
.gain-d:empty{display:none}




#vGain .gainbox.att7 .gain-seal{display:none}




#vGain .gainbox.att7{border:0;border-radius:0;box-shadow:none}



















#vGain .gainbox.lg{max-height:min(calc(var(--app-h) * .62),420px)}








#vGain,#vYunCard{background:
    radial-gradient(118% 40% at 50% 50%,#040508e8 0%,#040508c4 38%,#04050866 72%,#04050800 100%),
    #0a080ca6;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}


#vYunCard .yun-scene{position:absolute;top:calc(var(--top-gap) + 24px);left:50%;
  width:min(calc(var(--app-w) - 28px),402px);height:min(calc(var(--app-h) * .68),570px);
  object-fit:contain;object-position:center top;transform:translateX(-50%);
  opacity:.84;pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(to bottom,#000 0 67%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0 67%,transparent 100%)}
#vYunCard .yun-scene[hidden]{display:none}
#vYunCard .gainwrap{position:relative;z-index:1}

#vYunCard.yun-event{background:#09080cc2;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
#vYunCard .yun-scene.yun-npc-scene{top:calc(var(--top-gap) + 6px);
  width:min(calc(var(--app-w) * .88),460px);height:min(calc(var(--app-h) * .82),720px);
  object-position:center top;opacity:.95;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 0 62%,transparent 94%);
          mask-image:linear-gradient(to bottom,#000 0 62%,transparent 94%)}
#vYunCard.yun-event .gainwrap{z-index:1}
#vYunCard.yun-event #yunCardSub{padding:10px 13px;border-radius:var(--r-s);
  background:#0b0a10de;box-shadow:0 8px 28px #0008;text-align:left}
#vYunCard.yun-event .yunev{background:#0b0a10e6;border-color:#ffffff38;box-shadow:0 5px 18px #0007}
#vYunCard.yun-event .gain-h{text-shadow:0 2px 8px #000,0 1px 2px #000}


#vDoegop{z-index:32;background:
    radial-gradient(118% 40% at 50% 50%,#040508e8 0%,#040508c4 38%,#04050866 72%,#04050800 100%),
    #0a080ca6;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
#vDoegop{--og:#ac8241;--og-hi:#e1bf73;--seal:#b78d49;--seal-deep:#514126;--fg-mid:#b2a58e}

#vDoegop .doegop-box,#vPvpRise .doegop-box{box-sizing:border-box;width:100%;text-align:center;display:flex;flex-direction:column;
  gap:clamp(4px,calc(var(--app-w) * .012),6px);overflow:hidden;padding:20px 18px;
  border:0;border-radius:0;box-shadow:none;background:none}
.doegop-mark{background:linear-gradient(135deg,#514027,#241d18);border-color:#b78d49;
  box-shadow:0 0 0 1px #0008,inset 0 1px 0 #ffe2a326,0 0 14px #a77c3b3d}
.doegop-mark .doegop-bang-shadow{fill:#24180d;stroke:#24180d;stroke-width:1;stroke-linejoin:round}
.doegop-mark .doegop-bang{fill:#f1cf7f;filter:drop-shadow(0 0 3px #f6c96d8c)}
.doegop-visual{position:relative;width:clamp(146px,calc(var(--app-w) * .44),180px);
  height:clamp(146px,calc(var(--app-w) * .44),180px);margin:4px auto;pointer-events:none}
.doegop-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.doegop-visual .doegop-sigil{inset:15%;width:70%;height:70%;filter:drop-shadow(0 0 18px #d1a65a99)}
.doegop-visual .doegop-ink{opacity:0;mix-blend-mode:multiply}
.doegop-visual .doegop-flash{opacity:0;mix-blend-mode:screen}
#vDoegop .doegop-h{padding:0;text-shadow:0 2px 13px #dca55c6b}
.doegop-lead{font-size:calc(12px - var(--game-desktop-font-step))}
.doegop-d{max-width:334px;margin:0 auto;color:var(--fg-mid);
  font-size:calc(12px - var(--game-desktop-font-step));line-height:1.5;letter-spacing:.01em;white-space:pre-line;word-break:keep-all}
.doegop-act .fbtn.pri{background:linear-gradient(180deg,#65502c,#43351f);border-color:#b78d49;color:#f8eaca}
.doegop-act .fbtn.pri:hover{background:linear-gradient(180deg,#735c32,#4e3d22);border-color:#d9ad5b}
#vDoegop.on .doegop-sigil{animation:doegop-sigil .5s cubic-bezier(.24,.04,.22,1) both}
#vDoegop.on .doegop-ink{animation:doegop-ink .5s ease-in both}
#vDoegop.on .doegop-flash{animation:doegop-flash .5s ease-out both}
#vDoegop.on .doegop-h,#vDoegop.on .doegop-lead,
#vDoegop.on .doegop-d,#vDoegop.on .doegop-act{
  animation:doegop-copy .42s ease-out .45s both}
@keyframes doegop-sigil{0%{opacity:.65;transform:scale(1)}42%{opacity:1;transform:scale(.38) rotate(-12deg)}
  68%{transform:scale(1.18) rotate(3deg)}100%{transform:scale(1) rotate(0)}}
@keyframes doegop-ink{0%,16%{opacity:0;transform:scale(1.18) rotate(-8deg)}23%{opacity:.86}
  62%{opacity:.8;transform:scale(.27) rotate(18deg)}100%{opacity:0;transform:scale(.17) rotate(24deg)}}
@keyframes doegop-flash{0%,57%{opacity:0;transform:scale(.2)}70%{opacity:.9;transform:scale(1)}
  100%{opacity:0;transform:scale(1.25)}}
@keyframes doegop-copy{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#vDoegop.on .doegop-sigil,#vDoegop.on .doegop-ink,
  #vDoegop.on .doegop-flash,#vDoegop.on .doegop-h,
  #vDoegop.on .doegop-lead,#vDoegop.on .doegop-d,
  #vDoegop.on .doegop-act{animation:none}}

#vPvpRise{z-index:32;background:
    radial-gradient(118% 40% at 50% 50%,#040508e8 0%,#040508c4 38%,#04050866 72%,#04050800 100%),#0a080ca6;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  --og:#ac8241;--og-hi:#e1bf73;--seal:#b78d49;--seal-deep:#514126;--fg-mid:#b2a58e}
#vPvpRise.dn{background:
    radial-gradient(90% 44% at 50% 48%,#481216d4 0%,#210a0fc7 42%,#09050874 76%,#09050800 100%),#0b070ba6;
  --og:#9f3739;--og-hi:#e2827e;--seal:#a94a49;--seal-deep:#4f2024;--fg-mid:#d3aaa8}
#vPvpRise .doegop-h{padding:0;text-shadow:0 2px 13px #dca55c6b}
#vPvpRise.dn .doegop-h{color:#f0b3a9;text-shadow:0 2px 16px #e34b4b80}
#vPvpRise.dn .doegop-mark{background:linear-gradient(135deg,#5b2428,#291417);border-color:#c05a55;
  box-shadow:0 0 0 1px #0008,inset 0 1px 0 #ffaaa22b,0 0 16px #b432394f}
#vPvpRise.dn .doegop-bang{fill:#f1a098;filter:drop-shadow(0 0 4px #e1464b99)}
#vPvpRise .pvrise-icon{inset:15%;width:70%;height:70%;filter:drop-shadow(0 0 18px #d1a65a99)}
#vPvpRise.dn .pvrise-icon{filter:drop-shadow(0 0 16px #de4949aa)}
#vPvpRise.dn .doegop-ink{filter:sepia(1) saturate(8) hue-rotate(310deg)}
#vPvpRise.dn .doegop-flash{filter:sepia(1) saturate(8) hue-rotate(310deg)}
#vPvpRise .doegop-d{max-width:334px;margin:0 auto;color:var(--fg-mid);
  font-size:calc(12px - var(--game-desktop-font-step));line-height:1.5;letter-spacing:.01em;white-space:pre-line;word-break:keep-all}
#vPvpRise.dn .doegop-act .fbtn.pri{background:linear-gradient(180deg,#673034,#402024);
  border-color:#a94a49;color:#f5d3cc}
#vPvpRise.dn .doegop-act .fbtn.pri:hover{background:linear-gradient(180deg,#77383b,#4c2529)}
#vPvpRise .pvrise-hit{position:absolute;inset:0;opacity:0;pointer-events:none}
#vPvpRise .pvrise-hit::before,#vPvpRise .pvrise-hit::after{content:"";position:absolute;
  left:50%;top:50%;width:13px;height:150px;border-radius:100%;transform-origin:center;
  background:linear-gradient(180deg,#ffcbc500,#ff675aee 33%,#fff1d9 49%,#cf232dbb 62%,#b51f2500);
  box-shadow:0 0 14px #e53b43aa;transform:translate(-50%,-50%) rotate(43deg)}
#vPvpRise .pvrise-hit::after{height:116px;width:8px;transform:translate(-50%,-50%) rotate(-49deg)}
#vPvpRise.on.up .pvrise-icon{animation:doegop-sigil .5s cubic-bezier(.24,.04,.22,1) both}
#vPvpRise.on.up .doegop-ink{animation:doegop-ink .5s ease-in both}
#vPvpRise.on.up .doegop-flash{animation:doegop-flash .5s ease-out both}
#vPvpRise.on.dn .pvrise-icon{animation:doegop-sigil .5s cubic-bezier(.24,.04,.22,1) both}
#vPvpRise.on.dn .doegop-ink{animation:pvrise-red-ink .6s ease-out both}
#vPvpRise.on.dn .doegop-flash{animation:pvrise-red-flash .48s ease-out both}
#vPvpRise.on.dn .pvrise-hit{animation:pvrise-strike .5s ease-out both}
#vPvpRise.on.dn .doegop-box{animation:pvrise-shudder .38s ease-out both}
#vPvpRise.on .doegop-h,#vPvpRise.on .doegop-lead,#vPvpRise.on .doegop-d,
#vPvpRise.on .doegop-act{animation:doegop-copy .42s ease-out .45s both}
@keyframes pvrise-red-ink{0%,12%{opacity:0;transform:scale(.2)}
  28%{opacity:.88;transform:scale(.9)}100%{opacity:0;transform:scale(1.28)}}
@keyframes pvrise-red-flash{0%,16%{opacity:0;transform:scale(.35)}
  25%{opacity:.94;transform:scale(1)}100%{opacity:0;transform:scale(1.45)}}
@keyframes pvrise-strike{0%,13%{opacity:0;transform:scale(1.5)}
  23%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.82)}}
@keyframes pvrise-shudder{0%,20%,100%{transform:translateX(0)}
  28%{transform:translateX(-7px)}38%{transform:translateX(5px)}50%{transform:translateX(-3px)}}
@media(prefers-reduced-motion:reduce){#vPvpRise.on .pvrise-icon,#vPvpRise.on .doegop-ink,
  #vPvpRise.on .doegop-flash,#vPvpRise.on .pvrise-hit,#vPvpRise.on .doegop-box,
  #vPvpRise.on .doegop-h,#vPvpRise.on .doegop-lead,#vPvpRise.on .doegop-d,
  #vPvpRise.on .doegop-act{animation:none}}








#vGain.attv{background:
    radial-gradient(124% 66% at 50% 50%,#040508f4 0%,#040508e4 40%,#04050894 72%,#04050800 100%),
    #0a080cc9}

















#vGain .gainbox.att7{width:100%;padding-left:10px;padding-right:10px}
#vGain .gainbox.att7 .gain-h{display:block}








#vGain .gainbox.att7 .gain-list{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,2.2fr);
  grid-template-rows:auto auto;
  gap:clamp(7px,calc(var(--app-w) * .02),10px);align-items:stretch;overflow:visible;padding-bottom:clamp(10px,calc(var(--app-w) * .026),14px)}











.a7c{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}

.a7-d{flex:none;font-family:var(--serif);font-size:calc(clamp(9.5px,round(calc(var(--app-w) * .026), 1px),11px) - var(--game-desktop-font-step));font-weight:400;
  line-height:1.2;letter-spacing:.02em;color:var(--fg-faint);white-space:nowrap}
.a7c.now .a7-d{color:var(--warn)}

.a7-ic{position:relative;flex:none;width:100%;aspect-ratio:1;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  border-radius:6px;background:linear-gradient(160deg,#1a1d27,#110e17);
  border:1px solid var(--line-soft);box-shadow:inset 0 0 12px #0009}
.a7-ic img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 28%}

.a7c.big{grid-column:4;grid-row:1/3}
.a7c.big .a7-ic{flex:1 1 auto;aspect-ratio:auto;min-height:0;width:100%}







.a7-q{position:absolute;left:3px;right:3px;bottom:3px;z-index:2;
  font-family:var(--mono);font-size:calc(clamp(10.5px,round(calc(var(--app-w) * .03), 1px),12.5px) - var(--game-desktop-font-step));font-weight:400;
  font-variant-numeric:tabular-nums;color:var(--yeong);line-height:1.5;
  background:#0b0812c7;border-radius:4px;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 1px 2px #000}



.a7-q.chungi{color:var(--chungi)} .a7-q.yeong{color:var(--yeong)} .a7-q.jin{color:var(--jin)}
.a7-q.nm{font-family:var(--serif);font-weight:400;color:var(--fg);
  font-size:calc(clamp(11px,round(calc(var(--app-w) * .03), 1px),13px) - var(--game-desktop-font-step))}


.a7c.now .a7-ic{border-color:var(--warn);box-shadow:inset 0 0 12px #0009,0 0 13px 2px #e8b45f55}
.a7c.got .a7-ic{opacity:.46;filter:grayscale(.7)}
.a7c.got .a7-q{opacity:.46}






.a7c:nth-child(-n+3){padding-bottom:clamp(6px,calc(var(--app-w) * .018),9px);
  border-bottom:1px solid #ffffff2b}





.a7-got{position:absolute;inset:0;display:block;background:#0b0812a8}
.a7-got::after{content:"";position:absolute;left:50%;top:46%;
  width:32%;height:17%;box-sizing:border-box;
  border-left:2px solid #ecdfc2;border-bottom:2px solid #ecdfc2;
  transform:translate(-50%,-50%) rotate(-45deg);
  filter:drop-shadow(0 1px 2px #000)}













#vGain .gainbox.one,#vGain .gainbox.compact,#vGain .gainbox.sm,#vYunCard .gainbox.compact{
  

  justify-content:center;
  











  




  


  padding:20px 18px}




#s-title .signin{transition:opacity .26s ease}
#s-title.waiting .signin{opacity:0;pointer-events:none}
#s-title .login-status{position:absolute;left:8%;right:8%;bottom:12%;margin:0;color:var(--fg-mid);font-size:calc(13px - var(--game-desktop-font-step));line-height:1.5}
#s-title .login-status[hidden]{display:none}









.gain-h{flex:none;margin:0;text-align:center;font-family:var(--serif);
  font-size:calc(clamp(15px,round(calc(var(--app-w) * .042), 1px),19px) - var(--game-desktop-font-step));font-weight:400;letter-spacing:.04em;color:var(--fg);
  padding:2px 0 8px}






#vGain .gainbox.one .gain-h,#vGain .gainbox.compact .gain-h,#vGain .gainbox.sm .gain-h,
#vYunCard .gainbox.compact .gain-h{
  font-size:calc(clamp(12.5px,round(calc(var(--app-w) * .033), 1px),15px) - var(--game-desktop-font-step));padding:0 0 3px}
#vGain .gainbox.one,#vGain .gainbox.compact,#vGain .gainbox.sm,
#vYunCard .gainbox.compact{gap:clamp(5px,calc(var(--app-w) * .016),8px)}










.gain-list{flex:0 1 auto;min-height:0;
  
  display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;
  




  gap:clamp(8px,calc(var(--app-w) * .024),12px);padding:clamp(10px,calc(var(--app-w) * .026),14px) 2px clamp(16px,calc(var(--app-w) * .042),22px);
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  
  scrollbar-width:none}






.gain-list::-webkit-scrollbar{display:none}






#vGain .gainbox.sm .gain-list,#vGain .gainbox.one .gain-list,
#vGain .gainbox.compact .gain-list{flex:1 1 auto;min-height:0;overflow-y:auto}





#vGain .gainbox.sm .gain-none{font-size:calc(clamp(11.5px,round(calc(var(--app-w) * .031), 1px),13px) - var(--game-desktop-font-step));line-height:1.5}











.gain-item{flex:none;display:flex;flex-direction:column;align-items:center;gap:9px;
  width:clamp(62px,calc(var(--app-w) * .19),76px)}

.gain-ic{position:relative;flex:none;width:100%;aspect-ratio:1;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  border-radius:7px;background:linear-gradient(160deg,#1c1f2b,#120f18);
  border:1px solid var(--line-soft);
  box-shadow:inset 0 1px 0 #ffffff14,inset 0 0 14px #000a,0 2px 6px #0007}












.gain-ic img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 28%}

.gain-q{position:absolute;left:3px;right:3px;bottom:3px;
  font-family:var(--mono);font-size:calc(clamp(11px,round(calc(var(--app-w) * .031), 1px),13px) - var(--game-desktop-font-step));font-weight:400;
  font-variant-numeric:tabular-nums;color:var(--chungi);line-height:1.5;
  background:#0b0812c7;border-radius:4px;
  text-shadow:0 1px 2px #000}
.gain-q.jin{color:var(--jin)}








.gain-n{width:100%;min-width:0;font-size:calc(clamp(10.5px,round(calc(var(--app-w) * .029), 1px),12px) - var(--game-desktop-font-step));
  line-height:14px;height:14px;
  color:var(--fg);text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.gain-sub{display:block;font-size:calc(10px - var(--game-desktop-font-step));line-height:13px;height:13px;color:var(--fg-faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


.gain-item .gain-n:has(.gain-sub){height:27px}

.gain-item.tojin .gain-ic img,.gain-item.dim .gain-ic img{filter:grayscale(.85) brightness(.7)}
.gain-item.dim{opacity:.55}

.gain-item.now .gain-ic{border-color:var(--og,#666666);box-shadow:inset 0 1px 0 #ffffff1f,0 0 10px #66666655}


















#vGain .gainbox.one .gain-list,#vGain .gainbox.compact .gain-list,
#vGain .gainbox.sm .gain-list,#vGain .gainbox.lg .gain-list{flex:0 1 auto}



#vGain .gainbox.lg,#vGain .gainbox.one,
#vGain .gainbox.compact,#vGain .gainbox.sm,
#vYunCard .gainbox.compact{gap:clamp(3px,.calc(var(--app-w) * .09),5px)}
#vGain .gainbox.lg .gain-h{padding:0 0 1px}
#vGain .gainbox.one .gain-h,#vGain .gainbox.compact .gain-h,
#vGain .gainbox.sm .gain-h,#vYunCard .gainbox.compact .gain-h{padding:0 0 1px}







.gain-ic,.gain-q{animation:gainslam .4s cubic-bezier(.2,.85,.3,1) backwards;
  animation-delay:calc(var(--i,0) * .07s)}
@keyframes gainslam{
  0%  {opacity:0; transform:translateY(9px) scale(1.18)}
  60% {opacity:1; transform:translateY(0) scale(.97)}
  82% {           transform:scale(1.025)}
  100%{opacity:1; transform:scale(1)}
}


.gain-ic{position:relative}
.gain-ic::after{content:"";position:absolute;inset:0;border-radius:7px;
  pointer-events:none;
  animation:gainring .52s ease-out backwards;
  animation-delay:calc(var(--i,0) * .11s + .16s)}
@keyframes gainring{
  from{box-shadow:0 0 0 0 #d4a843bb,0 0 18px 4px #d4a84366}
  to  {box-shadow:0 0 0 16px #d4a84300,0 0 0 0 #d4a84300}
}
@media (prefers-reduced-motion:reduce){
  .gain-ic,.gain-q{animation:none}
  .gain-ic::after{animation:none}
}













.attbox{width:min(460px,100%);max-width:460px;aspect-ratio:1380/1260;text-align:center;
  border:0;border-radius:0;padding:clamp(44px,calc(var(--app-w) * .115),62px) clamp(30px,calc(var(--app-w) * .08),42px) clamp(16px,calc(var(--app-w) * .045),28px);
  background:transparent url(assets/ui/popup_attendance_7day.webp?v=3) center/100% 100% no-repeat;
  box-shadow:none;
  display:flex;flex-direction:column;overflow:hidden}
.attbox .stg-t{text-align:center;flex:none;font-size:calc(clamp(15px,round(calc(var(--app-w) * .044), 1px),21px) - var(--game-desktop-font-step))}




.attgrid{flex:1 1 auto;min-height:0;
  display:grid;gap:clamp(4px,calc(var(--app-w) * .014),7px);margin:clamp(7px,calc(var(--app-w) * .024),14px) auto 0;width:min(304px,100%);
  grid-template-columns:repeat(3,minmax(0,1fr)) 1.24fr;grid-template-rows:repeat(2,minmax(0,1fr))}
.attc{position:relative;min-width:0;min-height:0;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(2px,calc(var(--app-w) * .01),5px);
  padding:clamp(4px,calc(var(--app-w) * .016),9px) 4px;border:1px solid var(--line);border-radius:var(--r-s);background:#12101a;
  color:var(--fg-mid);-webkit-tap-highlight-color:transparent;transition:border-color .14s,opacity .14s}
.attc.big{grid-column:4;grid-row:1 / 3;gap:clamp(3px,calc(var(--app-w) * .014),8px);padding:clamp(6px,calc(var(--app-w) * .02),12px) 6px;
  background:#171122;border-color:#5c4a22}
.at-d{flex:none;font-family:var(--serif);font-size:calc(clamp(8.5px,round(calc(var(--app-w) * .025), 1px),10.5px) - var(--game-desktop-font-step));font-weight:400;
  letter-spacing:.04em;color:var(--fg-faint)}
.attc.big .at-d{font-size:calc(clamp(10px,round(calc(var(--app-w) * .031), 1px),13px) - var(--game-desktop-font-step));color:var(--chungi)}
.at-ic{flex:0 1 auto;min-height:0;width:auto;display:flex;align-items:center;justify-content:center}
.attc.big .at-ic{width:100%}
.at-ic img{width:auto;height:100%;max-height:clamp(18px,calc(var(--app-w) * .064),26px);aspect-ratio:1;object-fit:contain;
  filter:drop-shadow(0 1px 2px #000b)}

.at-ic.card{width:auto;height:auto}
.at-ic.card img{width:auto;height:100%;max-height:none;aspect-ratio:63/88;object-fit:cover;border-radius:2px;
  border:1px solid var(--line)}
.attc.big .at-ic.card img{width:auto;height:100%;max-width:100%;border-color:#6b5a3a;
  box-shadow:0 3px 12px #000a,0 0 14px #d4a84333}
.at-n{flex:none;font-size:calc(clamp(8px,round(calc(var(--app-w) * .024), 1px),9.5px) - var(--game-desktop-font-step));line-height:1.3;text-align:center;color:var(--fg-mid);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


.attc.big .at-n{font-size:calc(clamp(9px,round(calc(var(--app-w) * .029), 1px),11.5px) - var(--game-desktop-font-step));white-space:normal;word-break:keep-all;font-weight:400;color:var(--fg);line-height:1.3}
.at-s{flex:none;font-family:var(--mono);font-size:calc(clamp(7px,round(calc(var(--app-w) * .021), 1px),8.5px) - var(--game-desktop-font-step));letter-spacing:.06em;color:var(--fg-faint)}

.attc.got{opacity:.5}
.attc.got .at-s{color:var(--jin)}
.attc.miss{opacity:.34;border-style:dashed}
.attc.soon{opacity:.62}

.attc.now{cursor:pointer;border-color:var(--seal);color:var(--fg);
  animation:attblink 1.15s ease-in-out infinite}
.attc.now .at-s{color:var(--seal)}
.attc.now:active{transform:scale(.97)}
@keyframes attblink{
  0%,100%{box-shadow:0 0 0 1px var(--seal),0 0 13px #c4453a3d}
  50%    {box-shadow:0 0 0 2px var(--seal),0 0 24px #c4453a9e}}
@media (prefers-reduced-motion:reduce){ .attc.now{animation:none;box-shadow:0 0 0 2px var(--seal)} }










.gain-item.tojin .gain-ic img{filter:grayscale(1) brightness(.5);opacity:.55}
.gain-item.tojin .gain-ic{background:linear-gradient(160deg,#17141d,#0d0b12);border-color:#2a2533}
.gain-item.tojin .gain-n{color:var(--fg-faint)}

.gain-q .gq-ic{width:1.05em;height:1.05em;object-fit:contain;vertical-align:-.16em;margin-right:2px}

.gain-item.dim{opacity:.42}
.gain-item.now .gain-sub{color:var(--chungi)}


.gain-none{margin:0;font-size:calc(13.5px - var(--game-desktop-font-step));line-height:1.75;color:var(--fg-mid);text-align:center;
  word-break:keep-all;white-space:pre-line}


#s-report .hptabs{gap:6px;flex-wrap:wrap}
#s-report .hptab{flex:1 1 auto;min-width:78px;text-align:center;padding:8px 10px;font-size:calc(12px - var(--game-desktop-font-step))}



#s-report .fq,#s-report .fbtn{flex:none}
#s-report #rpTitle{padding:11px 12px;font-size:calc(13px - var(--game-desktop-font-step))}
.rp-body{flex:none;resize:none;height:168px;padding:11px 12px;font-size:calc(13px - var(--game-desktop-font-step));line-height:1.7}
.rp-note{margin:0;font-size:calc(10.5px - var(--game-desktop-font-step));line-height:1.6;color:var(--fg-faint)}
.rp-status{margin:0;min-height:1.4em;text-align:center;font-size:calc(12px - var(--game-desktop-font-step));font-weight:400;color:var(--warn)}


.ask-q{margin:0;text-align:center;font-size:calc(14.5px - var(--game-desktop-font-step));line-height:1.6;color:var(--fg);
  white-space:pre-line;word-break:keep-all}
.btnrow.one{justify-content:center}



.notebox{gap:11px;text-align:center}
.notebox .quit-h{text-align:center}
.note-t{margin:0;font-size:calc(13.5px - var(--game-desktop-font-step));line-height:1.7;color:var(--fg-mid);white-space:pre-line}



.drbox{gap:9px;text-align:center}
.drbox .quit-h{text-align:center;font-size:calc(17px - var(--game-desktop-font-step))}
.dr-sub{margin:0;font-size:calc(13px - var(--game-desktop-font-step));color:var(--fg-mid);letter-spacing:.02em}
.dr-sub:empty{display:none}
.dr-get{margin:5px 0 2px;font-size:calc(14px - var(--game-desktop-font-step));line-height:1.6}
.dr-get:empty{display:none}
.dr-get .dr-get{display:contents}
.dr-get b.dr-get,b.dr-get{font-family:var(--serif);font-size:calc(19px - var(--game-desktop-font-step));font-weight:400;color:var(--chungi);
  text-shadow:0 0 12px rgba(212,175,95,.35)}
.dr-full{font-size:calc(12.5px - var(--game-desktop-font-step));line-height:1.6;color:var(--fg-mid)}

.tip-day{margin-top:8px!important;padding-top:7px;border-top:1px solid var(--line);
  font-size:calc(12px - var(--game-desktop-font-step));color:var(--fg-faint)}
.tip-day b{color:var(--chungi);font-weight:400}



.quitbox{gap:13px;text-align:left}
.quit-h{margin:0;font-family:var(--serif);font-size:calc(15px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.04em;color:var(--fg)}
.quit-lead{margin:0;font-size:calc(13px - var(--game-desktop-font-step));line-height:1.6;color:var(--fg-mid)}
.quit-warn{margin:0;font-size:calc(12.5px - var(--game-desktop-font-step));line-height:1.65;color:var(--danger)}
.quit-list{margin:0;padding-left:17px;display:flex;flex-direction:column;gap:5px;
  font-size:calc(12.5px - var(--game-desktop-font-step));line-height:1.6;color:var(--fg-mid)}

.quit-ok{display:flex;gap:9px;align-items:flex-start;cursor:pointer;
  padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-s);background:#00000038;
  font-size:calc(12px - var(--game-desktop-font-step));line-height:1.55;color:var(--fg-mid)}
.quit-ok input{flex:0 0 auto;width:17px;height:17px;margin:1px 0 0;accent-color:var(--danger);cursor:pointer}
.quit-ok:has(input:checked){border-color:#7d3c39;color:var(--fg)}

#quitGo[disabled]{opacity:.38;cursor:default}




.docrow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:2px 4px;margin-top:34px;padding-bottom:4px}

.docrow .linkb{margin:0;padding:6px 4px;text-decoration:none}

.docrow .linkb + .linkb::before{content:"·";margin-right:8px;color:var(--line)}
.docrow .linkb:hover{color:var(--seal)}
.linkb.quit{margin-top:10px;color:var(--fg-faint)}
.linkb.quit:hover{color:var(--danger)}
.btnrow.one .fbtn{flex:none;min-width:min(220px,64%)}
































.ornate,
.veil.ask .askbox:not(.att7):not(.gainbox),
.stgbox{
  









  --og:#666;
  --og-hi:#aaa;
  --og-lo:#333;
  --ct:1px;                    
  --cl:9px;                    
  --ci:6px;                    
  position:relative;
  border:3px solid transparent;
  





  background:
    linear-gradient(var(--og-hi),var(--og-hi)) left  var(--ci) top    var(--ci)/var(--cl) var(--ct) no-repeat padding-box,
    linear-gradient(var(--og-hi),var(--og-hi)) left  var(--ci) top    var(--ci)/var(--ct) var(--cl) no-repeat padding-box,
    linear-gradient(var(--og-hi),var(--og-hi)) right var(--ci) top    var(--ci)/var(--cl) var(--ct) no-repeat padding-box,
    linear-gradient(var(--og-hi),var(--og-hi)) right var(--ci) top    var(--ci)/var(--ct) var(--cl) no-repeat padding-box,
    linear-gradient(var(--og-hi),var(--og-hi)) left  var(--ci) bottom var(--ci)/var(--cl) var(--ct) no-repeat padding-box,
    linear-gradient(var(--og-hi),var(--og-hi)) left  var(--ci) bottom var(--ci)/var(--ct) var(--cl) no-repeat padding-box,
    linear-gradient(var(--og-hi),var(--og-hi)) right var(--ci) bottom var(--ci)/var(--cl) var(--ct) no-repeat padding-box,
    linear-gradient(var(--og-hi),var(--og-hi)) right var(--ci) bottom var(--ci)/var(--ct) var(--cl) no-repeat padding-box,
    radial-gradient(120% 150% at 50% 0%,#242424f5,#101010f8 72%) padding-box,
    linear-gradient(180deg,var(--og-hi),var(--og) 38%,var(--og-lo)) border-box;
  box-shadow:
    inset 0 0 0 1px #000c,                  
    inset 0 1px 0 #ffffff0d,
    inset 0 -16px 28px -14px #000d,         
    0 0 0 1px #0b0910,                      
    0 8px 30px #000b;
}
.toast{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.94);z-index:40;
  padding:12px 20px;border-radius:8px;
  


  font-size:calc(13px - var(--game-desktop-font-step));line-height:1.5;color:var(--fg);pointer-events:none;opacity:0;
  text-shadow:0 1px 2px #0009;
  transition:opacity .2s,transform .2s;text-align:center;
  







  width:max-content;max-width:min(90%,420px);word-break:keep-all}
.toast.ornate,
.veil.ask .askbox:not(.att7):not(.gainbox),







#vEvent .evbox{isolation:isolate;border:1px solid #606060;border-radius:8px;
  background:radial-gradient(ellipse at 50% 0%,#252525f5 0%,#1a1a1af8 46%,#101010fa 100%);
  box-shadow:inset 0 0 0 1px #ffffff22,inset 0 0 18px #ffffff14,
    0 0 0 1px #090909,0 0 20px #ffffff24,0 12px 30px #000d}

@property --toast-turn{syntax:"<angle>";inherits:false;initial-value:0deg}
.toast.ornate::before,
.veil.ask .askbox:not(.att7):not(.gainbox)::before,
#vEvent .evbox::before{content:"";position:absolute;inset:-2px;padding:2px;border-radius:9px;
  background:conic-gradient(from var(--toast-turn),transparent 0 8%,#8e8e8e 16%,#f3f3f3 23%,#777 30%,transparent 40% 58%,#686868 67%,#d9d9d9 75%,#888 82%,transparent 92%);
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
          mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;
  filter:drop-shadow(0 0 5px #bdbdbd);pointer-events:none;
  animation:toast-orbit 3.6s linear infinite}
.toast.ornate::after,
.veil.ask .askbox:not(.att7):not(.gainbox)::after,
#vEvent .evbox::after{content:"";position:absolute;inset:4px;border-radius:4px;pointer-events:none;
  box-shadow:inset 0 0 0 1px #ffffff30,inset 0 0 13px #ffffff20}
@keyframes toast-orbit{to{--toast-turn:360deg}}
@media (prefers-reduced-motion:reduce){.toast.ornate::before,
  .veil.ask .askbox:not(.att7):not(.gainbox)::before,
  #vEvent .evbox::before{animation:none}}
.toast.on{opacity:1;transform:translate(-50%,-50%) scale(1)}




.toast.top{z-index:120}
.app.battle-wide .toast{top:auto;bottom:96px;transform:translate(-50%,6px) scale(.96)}
.app.battle-wide .toast.on{transform:translate(-50%,0) scale(1)}
.devbox{border:1px dashed var(--line);border-radius:var(--r-s);padding:11px 12px;display:flex;flex-direction:column;gap:9px}
.mini{padding:6px 11px;border:1px solid var(--line);border-radius:var(--r-s);font-size:calc(11.5px - var(--game-desktop-font-step));color:var(--fg-mid)}
.mini:hover{border-color:var(--seal);color:var(--fg)}
.mini.dg:hover{border-color:var(--danger);color:var(--danger)}

.pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px}
@media (min-width:400px){ .pick{grid-template-columns:repeat(4,minmax(0,1fr))} }











#s-pvp > .pvbtns{margin-top:auto}

.pvbtns .fbtn{
  padding-top:clamp(11px,calc(var(--app-h) * .017),13px);
  padding-bottom:clamp(11px,calc(var(--app-h) * .017),13px)}


.pvrail{display:flex;flex:none;align-items:center;gap:clamp(3px,calc(var(--app-w) * .012),8px);
  


  --pvw:clamp(78px,calc(var(--app-w) * .23),100px);
  



  









  --pvem:clamp(54px,calc(var(--app-h) * .102),96px);
  
  margin:calc(clamp(13px,calc(var(--app-h) * .030),26px) + var(--top-gap) - 14px) -16px 2px;
  padding:clamp(12px,calc(var(--app-h) * .026),28px) 44% clamp(10px,calc(var(--app-h) * .021),24px);
  

  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.pvrail::-webkit-scrollbar{display:none}
.pvcell{flex:none;width:var(--pvw);display:flex;flex-direction:column;align-items:center;gap:3px;
  opacity:.34;transition:opacity .2s}
.pvcell.past{opacity:.2}            
.pvcell.now{opacity:1}





.pvcell.mid:not(.now){opacity:.62}
.pvcell.mid:not(.now) .pv-em{--em:var(--pvem)}
.pvcell.mid:not(.now) .pv-ko{font-size:calc(clamp(13px,calc(var(--app-h) * .0218),18px) - var(--game-desktop-font-step));letter-spacing:.04em;color:#e6dccb}
.pvcell.mid:not(.now) .pv-dan{font-size:calc(10px - var(--game-desktop-font-step))}
.pvcell:not(.now) .pv-cap:empty{min-height:1em}   
.pv-cap{font-family:var(--mono);font-size:calc(8.5px - var(--game-desktop-font-step));letter-spacing:.2em;text-indent:.2em;color:var(--fg-faint)}
.pv-cap.dn{color:#e0928a} .pv-cap.up{color:#8fe0a8}

.pv-em{position:relative;display:flex;align-items:center;justify-content:center;
  width:var(--em,46px);height:var(--em,46px);border-radius:50%;
  transition:width .18s ease,height .18s ease;
  font-family:var(--han);font-size:calc(calc(var(--em,46px) * .34) - var(--game-desktop-font-step));line-height:1;color:#efe4cf;
  border:1px solid #5b5040;background:radial-gradient(70% 70% at 50% 34%,#252837,#15121c);
  box-shadow:inset 0 0 14px #0009,0 3px 10px #0008;
  text-align:center;padding:2px;word-break:keep-all}
.pv-em.big{--em:var(--pvem);border-color:var(--seal);color:#f6ecd8;
  box-shadow:inset 0 0 18px #0009,0 0 0 1px #00000080,0 6px 20px #000a,0 0 22px #a97cff1f}



.pv-em.art{border:0;background:none;box-shadow:none;padding:0;overflow:visible}
.pv-emi{width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 2px 6px #000a)}


.pv-em.art::before{content:"";position:absolute;inset:6%;border-radius:50%;pointer-events:none}




.pv-em.art.d3 .pv-emi{filter:saturate(.38) drop-shadow(0 2px 6px #000a)}
.pv-em.art.d3::before{border:1px solid #7a7480aa}

.pv-em.art.d2 .pv-emi{filter:saturate(.82) drop-shadow(0 2px 6px #000a)}
.pv-em.art.d2::before{border:1px solid #cdd6e0;
  box-shadow:0 0 7px #aab7c480,inset 0 0 9px #cdd6e024}

.pv-em.art.d1::before{border:2px solid #ffe9a8;
  box-shadow:0 0 12px 2px #ffd25fb0,0 0 26px 5px #fff3c855,inset 0 0 12px #ffdf8630;
  animation:engglow2 1.9s ease-in-out infinite}
@keyframes engglow2{
  50%{box-shadow:0 0 17px 4px #ffdf86,0 0 38px 9px #fff6d677,inset 0 0 16px #ffdf8644}}

.pvcell:not(.now) .pv-em.art.d1::before{animation:none}




.pvcell.now .pv-em.art::after{content:"";position:absolute;inset:-7%;border-radius:50%;pointer-events:none;
  box-shadow:0 0 20px 5px #a97cff38,inset 0 0 26px #a97cff24}
.pv-ko{font-family:var(--serif);font-size:calc(11px - var(--game-desktop-font-step));font-weight:400;color:#ddd3c2;white-space:nowrap;
  transition:font-size .18s ease,color .18s ease}
.pvcell.now .pv-ko{font-size:calc(clamp(13px,calc(var(--app-h) * .0218),18px) - var(--game-desktop-font-step));color:#f2ebdf;letter-spacing:.04em}
.pv-dan{font-family:var(--mono);font-size:calc(8.5px - var(--game-desktop-font-step));color:var(--fg-faint);letter-spacing:.06em}
.pvcell.now .pv-dan{font-size:calc(clamp(9px,calc(var(--app-h) * .0132),10px) - var(--game-desktop-font-step))}

.pvbarw{margin-bottom:clamp(6px,calc(var(--app-h) * .0125),16px);position:relative}
.pvbar{height:7px;border-radius:4px;background:#ffffff12;overflow:hidden;
  border:1px solid #2a2530}

.pvbar > i{display:block;height:100%;width:0;border-radius:4px;
  background:linear-gradient(90deg,#6f5ba8,#b79bff)}




.pvd{position:absolute;right:0;bottom:calc(100% + 3px);opacity:0;pointer-events:none;
  font-family:var(--mono);font-size:calc(12px - var(--game-desktop-font-step));font-weight:400;line-height:1.5;
  padding:1px 7px;border-radius:999px;border:1px solid transparent}
.pvd.up{color:#9ff0c4;background:rgba(47,125,79,.22);border-color:rgba(95,209,150,.55)}
.pvd.dn{color:#f0a8a3;background:rgba(125,47,51,.22);border-color:rgba(212,97,90,.55)}

.pvd.word{font-family:var(--sans);letter-spacing:.02em}






.pvbar{position:relative}
.pvbar > .pvgain{position:absolute;top:0;height:100%;width:0;border-radius:4px;
  opacity:0;transition:opacity .22s linear}
.pvbar > .pvgain.on{opacity:1}
.pvbar > .pvgain.up{background:linear-gradient(90deg,#2f7d4f,#5fd196)}
.pvbar > .pvgain.dn{background:linear-gradient(90deg,#7d2f33,#d4615a)}





.pvban{position:fixed;left:50%;top:58%;transform:translate(-50%,-50%);z-index:19;
  max-width:min(calc(var(--app-w) * .86),420px);padding:13px 20px;border-radius:10px;text-align:center;
  font-size:calc(14px - var(--game-desktop-font-step));line-height:1.5;letter-spacing:-.01em;pointer-events:none;
  background:linear-gradient(180deg,#161a20f2,#120f18f2);
  border:1px solid var(--pb,#6f5ba8);
  box-shadow:0 0 18px color-mix(in srgb,var(--pb,#6f5ba8) 45%,transparent),0 6px 22px #000a}
.pvban.up{--pb:#d8b25a;color:#f3e6c4}
.pvban.dn{--pb:#8d3a38;color:#e4c9c7}
.pvmeta{display:flex;justify-content:space-between;gap:10px;margin-top:5px;
  font-family:var(--mono);font-size:calc(10px - var(--game-desktop-font-step));color:var(--fg-faint)}
.pvmeta > span:last-child{text-align:right}
.pvmeta > span.bad{color:var(--warn)}















.pvbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:stretch}




.pvbtns.one{grid-template-columns:1fr}
.pvbtns .fbtn{box-sizing:border-box;min-width:0}
.pvdeckw{display:flex;flex-direction:column;align-items:center;
  gap:clamp(6px,calc(var(--app-h) * .0105),9px);
  margin:clamp(4px,calc(var(--app-h) * .008),8px) 0 clamp(8px,calc(var(--app-h) * .017),18px)}
.pvpick{margin:0;font-size:calc(clamp(11px,calc(var(--app-h) * .0155),11.5px) - var(--game-desktop-font-step));line-height:1.55;
  color:var(--fg-faint);text-align:center;max-width:86%}
.pvpick:empty{display:none}
.pvdeck{width:clamp(74px,calc(var(--app-h) * .138),118px);padding:0;background:none;border:0;
  -webkit-tap-highlight-color:transparent;transition:transform .12s}
.pvdeck:active{transform:scale(.96)}

.pvtop{position:absolute;z-index:2;top:calc(var(--top-gap) + 6px);left:16px;right:16px;
  display:flex;align-items:center;justify-content:space-between;gap:8px}
.pvleft{display:flex;align-items:center;gap:9px;min-width:0}
.pvsea{font-size:calc(11.5px - var(--game-desktop-font-step));color:var(--fg-mid);white-space:nowrap}
.pvrank{flex:none;height:32px;padding:0 13px;border:1px solid var(--seal);
  border-radius:var(--r-s);background:#0d0b11c0;color:var(--fg);font-family:var(--serif);
  font-size:calc(12px - var(--game-desktop-font-step));font-weight:400;-webkit-tap-highlight-color:transparent}
.pvrank:active{transform:scale(.95)}
.pvrwd{
  display:flex;align-items:center;gap:5px;height:32px;padding:0 10px 0 7px;
  border:1px solid #5c4a22;border-radius:var(--r-s);background:#0d0b11c0;
  font-family:var(--serif);font-size:calc(12px - var(--game-desktop-font-step));font-weight:400;color:var(--chungi);
  -webkit-tap-highlight-color:transparent;transition:transform .12s,border-color .14s}
.pvrwd img{width:18px;height:18px;object-fit:contain}
.pvrwd:active{transform:scale(.95);border-color:var(--chungi)}

.pbbox{display:flex;flex-direction:column;gap:11px;width:min(100%,420px);max-height:94%;overflow:hidden}
.pbtabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;flex:none}
.pbtab{height:36px;border:1px solid var(--line-soft);border-radius:var(--r-s);
  background:#ffffff08;color:var(--fg-mid);font-family:var(--mjo);font-size:calc(13px - var(--game-desktop-font-step));font-weight:400}
.pbtab.on{border-color:var(--seal);background:#aaaaaa2b;color:var(--fg)}
.pbscroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.pbnear{flex:none;max-height:calc(var(--app-h) * .38);overflow-y:auto;padding-top:10px;border-top:1px solid var(--line-soft)}
.pbnear .pbsec{margin-top:0}
.pbsec{margin:0 0 8px;font-family:var(--mjo);font-size:calc(13px - var(--game-desktop-font-step));color:var(--fg-mid)}
.pbsec:not(:first-child){margin-top:20px}
.pbsec-icon{width:20px;height:20px;object-fit:contain;vertical-align:middle;margin-right:5px}
.pbrow{display:grid;grid-template-columns:28px 38px minmax(0,1fr) auto;align-items:center;gap:8px;
  width:100%;min-height:56px;margin:0 0 5px;padding:7px 9px;text-align:left;
  background:#ffffff08;border:1px solid var(--line-soft);border-radius:var(--r-s);color:var(--fg)}
.pbrow.me{border-color:var(--seal);background:#aaaaaa2b;box-shadow:inset 3px 0 var(--seal)}
.pbrow:active{transform:scale(.985)}
.pbplace{font-family:var(--mono);font-size:calc(13px - var(--game-desktop-font-step));font-weight:400;text-align:center;color:var(--chungi)}
.pbmine{display:block;font-family:var(--mjo);font-size:calc(10px - var(--game-desktop-font-step));line-height:1;color:var(--fg)}
.pbrow .face{width:38px;height:38px}
.pbnear .pbrow{grid-template-columns:28px 32px minmax(0,1fr) auto;min-height:46px;padding:4px 9px}
.pbnear .pbrow .face{width:32px;height:32px}
.pbwho{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.pbname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mjo);font-weight:400}
.pbtag{font-size:calc(10px - var(--game-desktop-font-step));color:var(--fg-mid)}
.pbtier{display:inline-flex;align-items:center;gap:4px;font-family:var(--mjo);font-size:calc(11px - var(--game-desktop-font-step));white-space:nowrap;color:var(--fg-mid)}
.pbtier-icon{width:21px;height:21px;object-fit:contain;flex:none}
.pbnear .pbtier-icon{width:18px;height:18px}
.pbnone{margin:16px 0;color:var(--fg-mid);font-size:calc(12px - var(--game-desktop-font-step));text-align:center}


.pbwait{display:flex;align-items:center;justify-content:center;gap:9px;
  margin:28px 0;color:var(--fg-mid);font-size:calc(12px - var(--game-desktop-font-step))}
.pbspin{width:17px;height:17px;flex:none;border-radius:50%;
  border:2px solid var(--seal);border-top-color:transparent;
  animation:pbspin .8s linear infinite}
@keyframes pbspin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  .pbspin{animation:pbfade 1.2s ease-in-out infinite}
  @keyframes pbfade{0%,100%{opacity:1}50%{opacity:.35}}
}
.pbprof{padding:20px 13px}
.pbprof .avatar{display:block}

.ssbox{display:flex;flex-direction:column;max-height:84%;overflow:hidden}
.ss-d{margin:8px 0 12px;font-size:calc(12px - var(--game-desktop-font-step));line-height:1.7;color:var(--fg-mid)}
.sslist{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
  display:flex;flex-direction:column;gap:4px;margin:0 -6px 14px;padding:0 6px}
.ssrow{flex:none;display:grid;grid-template-columns:34px 76px 1fr auto;align-items:center;gap:8px;
  padding:5px 8px;border:1px solid transparent;border-radius:var(--r-s);background:#ffffff06}
.ssrow.now{border-color:#a97cff66;background:#a97cff14}
.ssrow .pv-em{--em:34px;font-size:calc(11px - var(--game-desktop-font-step))}
.ssrow .pv-em.art.d1::before{animation:none;box-shadow:0 0 6px 1px #ffd25f90}
.ss-n{font-family:var(--serif);font-size:calc(12.5px - var(--game-desktop-font-step));font-weight:400;color:#e6dccb;white-space:nowrap}
.ss-n i{margin-left:5px;font-style:normal;font-family:var(--mono);font-size:calc(8.5px - var(--game-desktop-font-step));letter-spacing:.12em;color:#b79bff}
.ss-g{height:6px;border-radius:3px;background:#ffffff10;overflow:hidden}
.ss-g > i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#8a6f3a,var(--chungi))}
.ss-p{display:flex;align-items:center;gap:3px;justify-content:flex-end;min-width:62px;
  font-family:var(--num);font-size:calc(12px - var(--game-desktop-font-step));font-weight:400;color:var(--chungi);font-variant-numeric:tabular-nums}

.veil.match{align-items:center;justify-content:center;background:#07060ae8}
.mbox{display:flex;flex-direction:column;align-items:center;gap:18px;max-width:390px;width:100%;padding:0 18px}








.mcharw{position:relative;flex:none;width:min(calc(var(--app-w) * .36),132px);height:min(calc(var(--app-w) * .36),132px);
  animation:mchar-breathe 3s ease-in-out infinite}
.mchar{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 12px 18px #0009)}
@keyframes mchar-breathe{50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.mcharw{animation:none}}

.mtx{margin:0;text-align:center;font-family:var(--serif);font-size:calc(13.5px - var(--game-desktop-font-step));line-height:1.7;color:#ddd3c2;
  white-space:nowrap;word-break:normal;overflow-wrap:normal;
  min-height:1.7em;display:flex;flex-direction:column;align-items:center;justify-content:center}


.mtx{transition:opacity .24s ease-in-out}
.mtx.fade{opacity:0}
.mbox .fbtn{flex:none;min-width:130px}


.msub{margin:0;text-align:center;font-size:calc(11.5px - var(--game-desktop-font-step));line-height:1.6;color:var(--fg-faint);
  letter-spacing:.02em}













.vsbox{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;align-items:center;
  gap:clamp(6px,calc(var(--app-w) * .025),12px);
  width:100%;max-width:320px;padding:0 8px}
.vsbox[hidden]{display:none}
.vs-side{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0}


.vs-foe{order:1;animation:vsin-down .52s cubic-bezier(.17,.84,.44,1) both}
.vs-mark{order:2}
.vs-me{order:3;animation:vsin-up .52s cubic-bezier(.17,.84,.44,1) both}
@keyframes vsin-down{from{opacity:0;transform:translateY(-46%)}to{opacity:1;transform:none}}
@keyframes vsin-up{from{opacity:0;transform:translateY(46%)}to{opacity:1;transform:none}}







.vs-face{flex:none;width:clamp(62px,calc(var(--app-w) * .19),84px);height:auto;aspect-ratio:1;
  border:1px solid var(--line);box-shadow:0 6px 18px #000a}

.vs-n{font-family:var(--mjo);font-size:calc(clamp(12px,round(calc(var(--app-w) * .036), 1px),15px) - var(--game-desktop-font-step));font-weight:400;letter-spacing:.04em;
  color:#f6f0e4;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 1px 3px #000,0 2px 8px #000c}

.vs-g{font-family:var(--serif);font-size:calc(clamp(9.5px,round(calc(var(--app-w) * .028), 1px),11.5px) - var(--game-desktop-font-step));font-weight:400;letter-spacing:.08em;
  color:#c7b68f;white-space:nowrap;text-shadow:0 1px 3px #000}

.vs-mark{flex:none;font-family:var(--serif);font-weight:400;letter-spacing:.04em;
  font-size:calc(clamp(26px,round(calc(var(--app-w) * .09), 1px),40px) - var(--game-desktop-font-step));line-height:1;color:#f0e2c0;
  text-shadow:0 2px 6px #000,0 0 18px #e8b45f66,0 0 34px #e8b45f33;
  animation:vsmark .42s .34s cubic-bezier(.2,1.5,.4,1) both}
@keyframes vsmark{from{opacity:0;transform:scale(.42)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .vs-me,.vs-foe,.vs-mark{animation:none} }




.dtile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;min-width:0;
  background:none;border:0;text-align:center;-webkit-tap-highlight-color:transparent;
  transition:transform .12s}
.dtile:active{transform:scale(.96)}
.dt-back{position:relative;width:100%;aspect-ratio:63/88;border-radius:4px;
  background:url(assets/ui/pile_deck_back_anime_v1.webp?v=2) center/cover no-repeat,#E8EFF7;
  border:1px solid #4a4130;box-shadow:0 6px 16px #0009,inset 0 0 22px #00000066;
  display:flex;align-items:center;justify-content:center;overflow:hidden}













.dt-back::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(13% 9% at 50% 49.5%,color-mix(in srgb,var(--pc,#8a7c5a) 42%,transparent),transparent 72%)}










.dt-sig{position:absolute;left:50%;top:49.5%;transform:translate(-50%,-50%);
  z-index:1;width:60%;display:flex;align-items:center;justify-content:center}

.dt-sig-img{width:100%;height:auto;object-fit:contain}
.dt-ok{position:absolute;right:4px;top:3px;z-index:2;width:18px;height:18px;font-size:calc(11px - var(--game-desktop-font-step));font-weight:400;
  text-shadow:0 1px 3px #000,0 0 8px #3f9e6388}
.dt-n{font-family:var(--mjo);font-size:calc(12px - var(--game-desktop-font-step));font-weight:400;line-height:1.25;
  width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.dt-m.yv{display:inline-flex;align-items:center;justify-content:center;gap:3px;color:var(--yeong)}
.dt-m.yv .mini-token{width:12px;height:12px}


.dt-m.chv{display:inline-flex;align-items:center;justify-content:center;gap:3px;color:var(--chungi)}
.dt-m.chv .mini-token{width:12px;height:12px}
.dt-m{font-family:var(--mono);font-size:calc(9.5px - var(--game-desktop-font-step));font-variant-numeric:tabular-nums;color:var(--fg-faint);
  line-height:1.2;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.dt-m.bad{color:var(--danger)}



.dtile.no .dt-back{filter:none}
.dtile.no .dt-back::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-backdrop-filter:grayscale(.7) brightness(.62);backdrop-filter:grayscale(.7) brightness(.62)}




.dt-sig-img.dt-x{filter:drop-shadow(0 0 12px #c4453a66)}






.dtile[disabled]{filter:grayscale(1);cursor:default}
.dtile[disabled]:active{transform:none}




.pick .dtile:not(.on):not(.empty):not(.lock){filter:grayscale(1)}
.pick .dtile.on{filter:none}




.pick.allcolor .dtile:not(.on):not(.empty):not(.lock){filter:none}


@media (hover:hover) and (pointer:fine){
  .dtile:not([disabled]):not(.empty):not(.lock):hover .dt-back{
    border-color:#4dffa055;box-shadow:0 0 0 1px #4dffa055,0 0 14px #4dffa04d,0 6px 16px #0009}
}
.dtile:not([disabled]):not(.empty):not(.lock):active .dt-back{
  border-color:var(--ready);box-shadow:0 0 0 2px var(--ready),0 0 18px #4dffa0aa,0 6px 16px #0009}
.dtile.on .dt-back{border-color:var(--seal);box-shadow:0 0 0 2px var(--seal),0 6px 18px #0009}



.dtile.on .dt-n{color:var(--fg)}

.dtile.empty .dt-back,.dtile.lock .dt-back{background:none;border-style:dashed;border-color:var(--line);box-shadow:none}
.dtile.empty .dt-back::before,.dtile.lock .dt-back::before{display:none}

.dtile.empty .dt-back{background:color-mix(in srgb,var(--seal) 13%,transparent);border-color:color-mix(in srgb,var(--seal) 55%,var(--line))}
.dtile.empty .dt-lock{color:var(--seal)}

.dtile.lock .dt-back{background:#000000b3}


.dtile.lock{filter:grayscale(1)}
.dt-lock{font-size:calc(22px - var(--game-desktop-font-step));color:var(--fg-faint);line-height:1;display:flex;align-items:center;justify-content:center}


.dt-lock.lockpic{width:34px;height:34px;
  background:url(assets/ui/icon_lock_anime_v1.webp?v=1) center/contain no-repeat}
@media (hover:hover) and (pointer:fine){
  .dtile:not([disabled]):hover .dt-back{border-color:var(--seal)}
}


.edsig{flex:none;display:flex;align-items:center;gap:5px;padding:6px 9px;
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--ink-2);
  font-size:calc(11px - var(--game-desktop-font-step));letter-spacing:.06em;color:var(--fg-mid);-webkit-tap-highlight-color:transparent}
.edsig:active{border-color:var(--seal);color:var(--fg)}


.edrec{flex:none;padding:6px 11px;border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--ink-2);font-size:calc(11px - var(--game-desktop-font-step));letter-spacing:.06em;color:var(--fg-mid);
  white-space:nowrap;-webkit-tap-highlight-color:transparent}
.edrec:active{border-color:var(--seal);color:var(--fg)}
.edsig-i{width:20px;height:20px;display:flex;align-items:center;justify-content:center}
.edsig-i .dt-sig-img{width:20px;height:20px}
.sigpick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 18px}   
#vIcon .btnrow{gap:10px}
.sigb{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px;
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel);
  font-size:calc(11px - var(--game-desktop-font-step));color:var(--fg-mid);-webkit-tap-highlight-color:transparent}
.sigb .dt-sig-img{width:34px;height:34px}
.sigb.on{border-color:var(--seal);background:var(--seal-deep);color:#f3e4e1}
.sigb.on .dt-sig-img{filter:drop-shadow(0 0 8px #c4453a88)}

.sigb.off{opacity:.26;pointer-events:none}
.sigb.off .dt-sig-img{filter:grayscale(1)}

.prow{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--panel);text-align:left;width:100%}
.prow:hover{border-color:var(--seal)}
.prow[disabled]{opacity:.38;cursor:default}
.prow.on{border-color:var(--seal);background:var(--panel-2)}
.prow b{font-family:var(--serif);font-size:calc(14px - var(--game-desktop-font-step));font-weight:400;display:block}
.prow span{font-size:calc(11px - var(--game-desktop-font-step));color:var(--fg-mid);display:block;margin-top:2px}




#tfocus{position:fixed;inset:0;z-index:75;pointer-events:none}
#tfocus[hidden]{display:none}
#tfocus .tf-p{position:fixed;background:#05040782;pointer-events:auto;transition:opacity .16s}
#tfocus .tf-ring{position:fixed;pointer-events:none;border-radius:6px;
  box-shadow:0 0 0 2px #f2e6c9cc,0 0 18px 4px #f2e6c966;animation:tfring 1.2s ease-in-out infinite}
@keyframes tfring{50%{box-shadow:0 0 0 3px #fff3d6,0 0 26px 7px #f2e6c999}}


.mic-pic.sound-bgm{background-image:url(assets/ui/icon_sound_bgm.webp?v=1)}
.mic-pic.sound-sfx{background-image:url(assets/ui/icon_sound_sfx.webp?v=4)}
.result .rstamp:has(img){text-indent:0;line-height:1.2}
.rstamp img{display:block;width:4em;height:1.57em;object-fit:contain}
.summon-ghost.unit{max-width:none;transition:none}

.summon-ghost.eng-await .card.eng{animation:none;box-shadow:none}


.cast-flight{isolation:isolate}
.cast-flight>.card.cast-echo{position:absolute;top:0;left:0;width:100%;z-index:0;opacity:0;
  pointer-events:none;filter:grayscale(1) brightness(1.7);mix-blend-mode:screen;
  box-shadow:0 0 12px #d7dfe277}
.cast-flight>.card:not(.cast-echo){z-index:1}
.cast-flight.split-on>.cast-echo-a{animation:cast-echo-a .78s ease-out both}
.cast-flight.split-on>.cast-echo-b{animation:cast-echo-b .78s ease-out both}
@keyframes cast-echo-a{
  0%{opacity:0;transform:translate(0,0) scale(1)}
  18%{opacity:.62;transform:translate(-16%,-2%) scale(1.025)}
  57%{opacity:.29;transform:translate(-7%,-1%) scale(1.01)}
  100%{opacity:0;transform:translate(0,0) scale(1)}
}
@keyframes cast-echo-b{
  0%{opacity:0;transform:translate(0,0) scale(1)}
  18%{opacity:.52;transform:translate(16%,2%) scale(1.025)}
  57%{opacity:.25;transform:translate(7%,1%) scale(1.01)}
  100%{opacity:0;transform:translate(0,0) scale(1)}
}












.mhanb{position:relative;display:flex;align-items:center;gap:7px;min-width:0;width:min(100%,210px);
  min-height:43px;padding:4px 0;border:1px solid transparent;border-radius:var(--r-s);
  background:none;color:var(--fg);cursor:pointer;-webkit-tap-highlight-color:transparent}
.mhanb:focus-visible{outline:1px solid var(--seal);outline-offset:2px}
.mhanb:active{transform:scale(.97)}
.mprof-face{position:relative;display:block;flex:none;width:32px;height:32px;font-size:calc(14px - var(--game-desktop-font-step))}
.mprof-face .nudot{--nx:-2px;--ny:-2px}
.mprof-copy{display:flex;flex:1;min-width:0;flex-direction:column;align-items:stretch;gap:2px}
.mprof-name{display:flex;align-items:baseline;gap:3px;max-width:100%;white-space:nowrap;
  font-family:var(--mjo);font-size:calc(12px - var(--game-desktop-font-step));font-weight:400;line-height:1.2;text-align:left}
.mprof-name #mProfName{min-width:0;overflow:hidden;text-overflow:ellipsis}
.mprof-tag{flex:none;color:var(--fg-faint);font-family:var(--mono);font-size:calc(10px - var(--game-desktop-font-step));font-weight:400}

.mig-row{display:flex;align-items:center;gap:5px;width:100%}
.mig-k{flex:none;
  font-family:var(--mono);font-size:calc(10.5px - var(--game-desktop-font-step));font-weight:400;font-variant-numeric:tabular-nums;
  color:var(--chungi);letter-spacing:.01em;text-shadow:0 1px 3px #000}

.mig-bar{flex:1;min-width:0;display:block;height:5px;border-radius:3px;overflow:hidden;
  background:#ffffff1f;border:1px solid #2a2530;box-sizing:border-box}



.mig-bar > i{display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,#8a6a2a,var(--chungi,#d4a843))}


.mhanb > .nudot{--nx:-3px;--ny:-3px}





.ightop{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:7px}
.igk{font-family:var(--serif);font-size:calc(clamp(17px,round(calc(var(--app-w) * .05), 1px),21px) - var(--game-desktop-font-step));font-weight:400;letter-spacing:.04em;
  color:#f2ebdf}
.igamt{font-family:var(--mono);font-size:calc(12px - var(--game-desktop-font-step));font-variant-numeric:tabular-nums;color:var(--fg-mid)}

.igbar{height:7px;border-radius:4px;background:#ffffff12;overflow:hidden;border:1px solid #2a2530;
  margin-bottom:11px}
.igbar > i{display:block;height:100%;width:0;border-radius:4px;
  background:linear-gradient(90deg,#8a6a2a,var(--chungi,#d4a843));transition:width .3s ease}



.igsay{margin:0 0 10px;min-height:2.2em;display:flex;align-items:center;justify-content:center;
  padding:0 6px;text-align:center;
  font-family:var(--serif);font-size:calc(12.5px - var(--game-desktop-font-step));line-height:1.5;letter-spacing:.01em;
  color:var(--fg-mid);text-shadow:0 1px 6px #000}











.igrail{--igw:116px;--mk:66px;--mk-in:47px;
  display:flex;align-items:center;gap:0;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  padding:2px calc(50% - var(--igw) / 2);margin-bottom:10px;
  overscroll-behavior-x:contain}
.igrail::-webkit-scrollbar{display:none}
.igcell{position:relative;flex:none;width:var(--igw);height:104px;padding:0;
  display:flex;align-items:center;justify-content:center;
  border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  
  transform:scale(0.62)}


.igcell::before,.igcell::after{content:"";position:absolute;top:50%;height:1px;pointer-events:none}
.igcell::before{left:0;right:calc(50% + var(--mk-in));
  background:linear-gradient(90deg,#0000,var(--og,#666666))}
.igcell::after{left:calc(50% + var(--mk-in));right:0;
  background:linear-gradient(90deg,var(--og,#666666),#0000)}
.igcell:first-child::before,.igcell:last-child::after{display:none}






.ig-dia{position:relative;display:flex;align-items:center;justify-content:center;
  width:var(--mk);height:var(--mk);transform:rotate(45deg);border-radius:6px;
  background:linear-gradient(135deg,
    color-mix(in srgb,#666666 calc(var(--g,0) * 46%),#212430),
    color-mix(in srgb,#232739 calc(var(--g,0) * 55%),#131520));
  border:1px solid color-mix(in srgb,var(--og-hi,#aaaaaa) calc(18% + var(--g,0) * 82%),#353a48);
  box-shadow:0 0 0 1px #0008,inset 0 1px 0 #ffffff1f,0 3px 10px #000a}




.ig-in{transform:rotate(-45deg);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;width:var(--mk-in);pointer-events:none}


.ig-face{width:26px;height:26px;border-radius:50%;object-fit:cover;display:block;
  filter:none;
  box-shadow:0 0 0 1px #ffffff2e,0 1px 4px #000}

.igc-k{font-family:var(--mono);font-size:calc(15px - var(--game-desktop-font-step));font-weight:400;font-variant-numeric:tabular-nums;
  color:#ddd3c2;line-height:1;text-shadow:0 1px 3px #000}



.igcell.past .ig-dia{opacity:.5}
.igcell.now .ig-dia{border-color:var(--chungi);box-shadow:0 0 0 1px #0008,inset 0 1px 0 #ffffff2a,0 0 12px #d4a84355}
.igcell.now .igc-k{color:#f2ebdf}

.igcell.pick .ig-dia{border-color:var(--og-hi,#aaaaaa);box-shadow:0 0 0 1px #0008,inset 0 1px 0 #ffffff2a,0 0 14px #aaaaaa66}
.igcell.mid .igc-k{color:#f2ebdf}









.igcell.done .ig-dia{filter:grayscale(1) brightness(.62)}
.igcell.done .igc-k{color:#9a948c}

.igc-chk{top:auto;right:16px;bottom:17px;width:18px;height:18px;font-size:calc(11px - var(--game-desktop-font-step))}
.igcell .nudot{--nx:22px;--ny:18px}








.ighow{margin:auto 0 0;padding:17px 8px 0;
  border-top:1px solid #ffffff0d;
  display:flex;flex-direction:column;gap:6px;text-align:center}







.ighow p{margin:0;font-family:var(--serif);font-size:calc(clamp(9.5px,round(calc(var(--app-w) * .027), 1px),10.5px) - var(--game-desktop-font-step));line-height:1.5;
  letter-spacing:-.012em;color:#565a70;word-break:keep-all;text-wrap:balance}
.igpane{display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:12px}
.ig-h{font-family:var(--serif);font-size:calc(12px - var(--game-desktop-font-step));font-weight:400;letter-spacing:.06em;
  color:var(--fg-mid);text-align:center}



.igpane.done .ig-list{opacity:1}
.igpane.done .ig-n{color:var(--fg-faint)}
.igpane.done .ig-ic img{filter:grayscale(1) brightness(.62)}
.igpane.done .ig-q{color:var(--fg-faint)}
.ig-got{z-index:2;top:-6px;right:-6px}



.ig-list{display:grid;grid-template-columns:repeat(3,clamp(60px,calc(var(--app-w) * .18),76px));
  justify-content:center;align-items:start;gap:12px 13px}
.ig-list.one{grid-template-columns:clamp(60px,calc(var(--app-w) * .18),76px)}
.ig-item{display:flex;flex-direction:column;align-items:center;gap:9px;min-width:0;
  
  padding:0;border:0;background:none;color:inherit;font:inherit;text-align:center}
.ig-item[data-pay]{cursor:pointer}
.ig-item[data-pay]:active{transform:scale(.96)}
.ig-ic{position:relative;flex:none;width:100%;aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  border-radius:7px;background:linear-gradient(160deg,#1c1f2b,#120f18);
  border:1px solid var(--line-soft);
  box-shadow:inset 0 1px 0 #ffffff14,inset 0 0 14px #000a,0 2px 6px #0007}


.ig-ic img{position:absolute;inset:0;width:100%;height:100%;border-radius:6px;
  object-fit:cover;object-position:center 28%}
.ig-q{position:absolute;left:3px;right:3px;bottom:3px;
  font-family:var(--mono);font-size:calc(clamp(11px,round(calc(var(--app-w) * .031), 1px),13px) - var(--game-desktop-font-step));font-weight:400;
  font-variant-numeric:tabular-nums;color:var(--chungi);line-height:1.5;
  background:#0b0812c7;border-radius:4px;text-shadow:0 1px 2px #000}

.ig-n{display:block;width:100%;font-size:calc(10.5px - var(--game-desktop-font-step));line-height:1.3;color:#ddd3c2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig-none{margin:0;font-size:calc(11.5px - var(--game-desktop-font-step));color:var(--fg-faint)}
.igpane .fbtn{margin-top:4px;min-width:150px}




.igpane.ig-enter .ig-ic,.igpane.ig-enter .ig-q{animation:gainslam .4s cubic-bezier(.2,.85,.3,1) backwards;
  animation-delay:calc(var(--i,0) * .07s)}
.igpane.ig-enter .ig-ic::after{content:"";position:absolute;inset:0;border-radius:7px;pointer-events:none;
  animation:igring .52s ease-out backwards;
  animation-delay:calc(var(--i,0) * .07s + .16s)}

@keyframes igring{
  from{box-shadow:0 0 0 1px #e8cf8fc4,0 0 6px 0 #d4a8435c}
  50%{box-shadow:0 0 0 1.4px #f4e4b4,0 0 10px 1px #d4a84388}
  to{box-shadow:0 0 0 1.4px #f4e4b400,0 0 10px 1px #d4a84300}
}
@media (prefers-reduced-motion:reduce){
  .igpane.ig-enter .ig-ic,.igpane.ig-enter .ig-q{animation:none}
  .igpane.ig-enter .ig-ic::after{animation:none}
}












.result p.rig{margin:0 0 2px;display:block;text-align:center;
  font-family:var(--sans);font-size:calc(12px - var(--game-desktop-font-step));line-height:1.85;letter-spacing:.03em;color:var(--fg-faint)}

.rig-n{font-family:var(--mono);font-weight:400;font-variant-numeric:tabular-nums;
  color:#c9b6ff;text-shadow:0 1px 6px #000;white-space:nowrap}



.rig-i{height:1em;width:auto;vertical-align:-.17em;margin-right:1px}

.rig-up{display:block;font-family:var(--serif);font-size:calc(11.5px - var(--game-desktop-font-step));letter-spacing:.04em;color:var(--chungi)}








.fkwtog{position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;min-width:0;padding-inline:13px;text-align:center}
.fkwsum{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fkwtog.on .fkwsum{color:var(--chungi)}
.fkwi{position:absolute;right:5px;top:50%;transform:translateY(-50%);
  flex:none;font-size:calc(9px - var(--game-desktop-font-step));opacity:.7;pointer-events:none}


.fkwbox{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:6px 0 0;padding:7px;
  border:1px solid var(--line-soft);border-radius:6px;background:#17131fb8}
.fkwopt{display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;border:1px solid var(--line-soft);border-radius:999px;
  font-size:calc(11.5px - var(--game-desktop-font-step));color:var(--fg-faint);cursor:pointer;user-select:none}
.fkwopt.on{color:var(--fg);border-color:var(--og-hi,#aaaaaa);background:#232738}
.fkwopt.off{opacity:.38;cursor:not-allowed}

.fkwopt input{position:absolute;opacity:0;width:0;height:0}
.fkwclr{flex:none;margin-left:auto;padding:3px 8px;font-size:calc(11px - var(--game-desktop-font-step));
  color:var(--fg-faint);text-decoration:underline;text-underline-offset:2px}


.igamt-i{height:1em;width:auto;vertical-align:-.16em;margin-right:3px}




.cm-c{position:relative}


.tbwrap{position:relative;flex:none;display:flex;flex-direction:column}
.saybub{position:absolute;left:50%;transform:translateX(-50%);z-index:22;
  display:flex;align-items:center;gap:7px;
  max-width:min(calc(var(--app-w) * .72),270px);width:max-content;
  padding:6px 9px;border-radius:13px;
  background:var(--say-bg);border:1px solid var(--say-edge);
  color:var(--fg);font-size:calc(12.5px - var(--game-desktop-font-step));line-height:1.35;text-align:left;
  box-shadow:0 3px 10px rgba(0,0,0,.45);pointer-events:none;
  animation:saypop .17s ease-out}
.saybub[hidden]{display:none}
.saybub .say-icon{flex:none;width:42px;height:42px}
.saybub-text{min-width:0;word-break:keep-all}





.saybub.foe{--say-bg:#28303d;--say-edge:#748da8;top:calc(100% + 5px)}
.saybub.me{--say-bg:#3b3025;--say-edge:#b4935d;bottom:calc(100% + 7px)}
.saybub::after{content:"";position:absolute;left:50%;margin-left:-5px;
  border:5px solid transparent}
.saybub.foe::after{bottom:100%;border-bottom-color:var(--say-edge)}
.saybub.me::after{top:100%;border-top-color:var(--say-edge)}
@keyframes saypop{from{opacity:0;transform:translateX(-50%) translateY(4px) scale(.94)}
                  to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
.saybub.bye{opacity:0;transition:opacity .25s}






.saypanel{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
  z-index:24;width:min(calc(var(--app-w) - 28px),320px);
  padding:10px;border-radius:18px;
  background:linear-gradient(150deg,#212632,#171a1f);border:1px solid #a88a6566;
  box-shadow:0 8px 28px rgba(0,0,0,.62)}
.saypanel::after{content:"";position:absolute;top:100%;left:50%;margin-left:-7px;
  border:7px solid transparent;border-top-color:#a88a65}
.say-head{display:flex;align-items:center;gap:6px;padding:1px 2px 8px;
  color:#f0dfbf;font-family:var(--serif);font-size:calc(13px - var(--game-desktop-font-step))}
.say-head strong{flex:1;font-weight:400}
.say-close{width:24px;height:24px;border:0;background:none;color:var(--fg-faint);
  font-size:calc(20px - var(--game-desktop-font-step));line-height:1;cursor:pointer}
.say-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;
  max-height:min(calc(var(--app-h) * .54),370px);overflow-y:auto}
.say-row .say-choice{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;min-height:151px;
  padding:5px 6px 8px;border-radius:17px 17px 17px 5px;text-align:center;
  border:1px solid #a88a6566;background:#2e2a2199;
  color:var(--fg);cursor:pointer;-webkit-user-select:none;user-select:none}
.say-row .say-choice::after{content:"";position:absolute;top:100%;left:11px;
  border:5px solid transparent;border-top-color:#4a4132}
.say-row .say-choice:hover,.say-row .say-choice:focus-visible{background:#4a4132;border-color:#d4b483;outline:none}
.say-row .say-choice:active{transform:scale(.98)}
.say-icon{flex:none;width:90px;height:90px;background-image:url("assets/ui/duel_say_stickers.webp?v=1");
  background-size:200% 200%;background-repeat:no-repeat}
.say-icon-0{background-position:0 0}.say-icon-1{background-position:100% 0}
.say-icon-2{background-position:0 100%}.say-icon-3{background-position:100% 100%}
.say-copy{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.say-copy strong{font-size:calc(12px - var(--game-desktop-font-step));color:#f0dfbf}
.say-copy span{font-size:calc(10.5px - var(--game-desktop-font-step));line-height:1.3;word-break:keep-all}

.saypanel.rest .say-row button{opacity:.38;pointer-events:none}
.say-mute{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin-top:7px;padding:5px 8px;
  border:1px solid #8a6d5966;border-radius:12px;background:#382e398c;color:#f0dfbf;
  font-size:calc(11.5px - var(--game-desktop-font-step));cursor:pointer}
.say-mute img{width:46px;height:46px;object-fit:contain;flex:none}
.say-mute:hover,.say-mute:focus-visible{background:#453d2c;border-color:#d4b483;outline:none}
.say-mute[aria-pressed="true"]{color:var(--warn);border-color:var(--warn)}

.por.me.sayable{cursor:pointer}
.por.me.sayable::after{content:"";position:absolute;right:-2px;bottom:-2px;
  width:7px;height:7px;border-radius:50%;background:var(--seal);
  box-shadow:0 0 0 1.5px var(--ink)}
@media (prefers-reduced-motion:reduce){
  .saybub{animation:none}
}











#s-yun.on ~ .mchar,
.app:has(#s-yun.on) .mchar{display:none}
#yunPickBust{display:none}


#yunPickBot .yunpickbub{padding-left:14px}
#s-yun{ padding:0 10px 90px; }

#s-yun.yun-walking{ padding:0; background-color:#e9ddc6; }





#yunPick{ position:relative; display:flex; flex-direction:column; align-items:center;
  padding-top:16px; }

.yunpickmid{ position:relative; z-index:1; width:100%; }









.yunstagew{ padding:8px 10px 2px; width:100%; max-width:100%; min-width:0; box-sizing:border-box; }
.yunstage-h{ font-family:var(--mjo); font-size:13px; color:#cfe0f5; text-shadow:0 2px 6px #000a;
  text-align:center; margin-bottom:6px; letter-spacing:.02em; }
.yunstages{ display:flex; gap:6px; overflow-x:auto; padding:2px 2px 8px; max-width:100%; min-width:0;
  scrollbar-width:none; -ms-overflow-style:none; }
.yunstages::-webkit-scrollbar{ display:none; }
.yunst{ flex:0 0 auto; width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border:1px solid #7fa7d84d; border-radius:4px; background:linear-gradient(180deg,#141a24e6,#0b0e14e6);
  font-family:var(--mjo); font-size:14px; font-weight:700; color:#eaf2ff;
  -webkit-tap-highlight-color:transparent; transition:transform .12s, border-color .12s; }
.yunst:active{ transform:scale(.94); }

.yunst.done{ border-color:#7fd8a8aa; color:#dff5e8; }

.yunst.chosen{ border-color:#eaf2ff; box-shadow:0 0 0 1px #eaf2ff66, 0 0 14px #5b8fc766; }

.yunst.lockd{ opacity:.38; border-color:#55607044; color:#9aa6b5; }
.yunpaths{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; padding:6px 2px; }
.yunpath{ display:flex; flex-direction:column; align-items:center; gap:6px;
  width:calc((100% - 16px)/3); max-width:116px;
  padding:12px 6px; border-radius:12px; cursor:pointer;
  border:1px solid color-mix(in srgb,var(--pc,#c9a86a) 45%,transparent);
  
  background:linear-gradient(180deg,color-mix(in srgb,var(--pc,#c9a86a) 14%,transparent),transparent 70%),
             #0a0910cc; }
.yunpath:active{ transform:translateY(1px); }





.yunpath.lockd{ cursor:default; border-color:#4a4653; }
.yunpath.lockd:active{ transform:none; }
.yunpath.lockd .yp-ic{ filter:grayscale(1) contrast(.86) brightness(.72) drop-shadow(0 2px 5px #000a); }
.yunpath.lockd .yp-n{ color:#9a93a6; }

.yunpath .yp-lock{ font-size:calc(12px - var(--game-desktop-font-step)); font-weight:400;
  color:#b9b0c2; letter-spacing:.02em; }



.yunlocknote{ margin:0 auto 8px; width:fit-content; max-width:100%;
  padding:5px 12px; border-radius:999px; background:#0a0910cc;
  text-align:center; color:#b9b0c2;
  font-size:calc(13px - var(--game-desktop-font-step)); font-weight:400; }

.yunpath .yp-ic{ width:36px; height:36px; object-fit:contain;
  filter:drop-shadow(0 2px 5px #000a); }

.yunpath .yp-n{ font-size:calc(16px - var(--game-desktop-font-step)); font-weight:400; color:var(--pc,#e8d9b5); }












.yunpickbot{ position:absolute; inset:0; z-index:40; pointer-events:none;
  --yp-bw:min(calc(var(--app-w) - 20px),520px); }
.yunpickbot[hidden]{ display:none; }


.yunpickface{ position:absolute; z-index:0; left:50%; bottom:calc(var(--tg-bar,0px) + 8px + var(--yp-bw) * .30);
  width:min(calc(var(--app-w) * .72),330px); margin-left:min(calc(var(--app-w) * -.36),-165px);
  max-height:calc(var(--app-h) * .46); object-fit:contain; object-position:bottom;
  

  filter:brightness(.34) saturate(.5) contrast(1.04)
         drop-shadow(0 0 30px #aaaaaa3d) drop-shadow(0 14px 38px #000d);
  pointer-events:none; }


.yunpickbub{ z-index:1; --tg-bw:var(--yp-bw); }













.yunend{ display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:34px 18px 26px; text-align:center; }
.yunend-h{ font-family:var(--sans); font-weight:800; letter-spacing:.01em; color:#171310;
  font-size:calc(21px - var(--game-desktop-font-step)); line-height:1.3; }
.yunend.win .yunend-h{ color:#7a5a16; }
.yunend-d{ margin:0; color:#3a322c; opacity:.86;
  font-size:calc(13px - var(--game-desktop-font-step)); line-height:1.6; }

.yunend-l{ margin:4px 0 0; width:100%; max-width:300px; display:grid; gap:1px;
  background:#17131014; border-radius:4px; overflow:hidden; }
.yunend-l>div{ display:flex; justify-content:space-between; gap:10px;
  padding:7px 11px; background:#fffaf0a8;
  font-size:calc(12px - var(--game-desktop-font-step)); }
.yunend-l dt{ color:#3a322c; opacity:.72; }
.yunend-l dd{ margin:0; color:#171310; font-weight:800; font-family:var(--sans); }

.yunend-go{ margin-top:6px; padding:11px 30px; border:1px solid #17131033; border-radius:4px;
  background:#171310; color:#f3ece0; font-family:var(--sans); font-weight:800;
  letter-spacing:.02em; font-size:calc(14px - var(--game-desktop-font-step)); }
.yunend-go:active{ transform:translateY(1px); }


#yunRun{ padding-top:0; }






.yunrow.yunbossrow{ display:flex; align-items:center; }
.yunbossrow .yuncell.boss{ flex:1 1 auto; }


.yunrow.yungaterow{ display:flex; align-items:center; gap:6px; }
.yungaterow .yunact,.yungaterow .yungive{ flex:0 0 76px; }
.yungaterow .yuncell.yungate{ flex:1 1 auto; }


.yunact{ font-family:var(--sans); font-weight:800; letter-spacing:.02em; color:#171310;
  font-size:calc(13px - var(--game-desktop-font-step)); text-align:left; }
.yungive{ font-family:var(--sans); font-weight:800; letter-spacing:.02em; color:#171310;
  font-size:calc(12px - var(--game-desktop-font-step)); text-align:right;
  padding:4px 0; border:0; background:transparent; opacity:.78; text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px; }
.yungive:active{ opacity:1; }



.yunact,.yungive{ background:#fffffff2; border:1px solid #1713101f; border-radius:7px;
  padding:6px 8px; text-align:center; box-shadow:0 1px 3px #00000024; }
.yungive{ text-decoration:none; opacity:1; }
.yungive:active{ background:#efe9dff2; }
























.yunmap[data-act="2"],.yunmap[data-act="3"]{ --yunmap-bg:none }
.yunmap{ --yunmap-inset:26px; --yunmap-bg:none;   
  display:flex; flex-direction:column-reverse; gap:0;
  padding:calc(58px + var(--top-gap)) var(--yunmap-inset) 58px;
  position:relative;
  
  background:var(--yunmap-bg,none) center/cover no-repeat;
  background-color:#e9ddc6; }













.yunrow{ display:grid; grid-template-columns:repeat(var(--yun-cols,5),1fr); gap:0; }







.yunlink{ height:50px; position:relative; z-index:0; }
.yunlink svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }








.yunlink line{ fill:none; stroke-linecap:round; vector-effect:non-scaling-stroke; }

.yunlink line.yet{ stroke:#171310; stroke-width:.9; stroke-dasharray:4 7; opacity:.72; }

.yunlink line.go{ stroke:#171310; stroke-width:1.5; opacity:.92; }

.yunlink line.was{ stroke:#171310; stroke-width:1.5; opacity:.42; }






.yuncell{min-height:48px;display:flex;align-items:center;justify-content:center;
  border:0;background:none;box-shadow:none;opacity:1;position:relative;z-index:1;padding-inline:5px}
.yuncell.blank{opacity:0}






.yuncell:not(.boss) .yc-ic{width:min(34px,62%);height:auto;aspect-ratio:1;object-fit:contain;display:block;
  pointer-events:none;filter:grayscale(1) contrast(.55) brightness(1.3) drop-shadow(0 1px 3px #0000003d)}
.yuncell.boss .yc-ic{height:auto;aspect-ratio:1;object-fit:contain;display:block;pointer-events:none}










@keyframes yun-can{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.22)} }
.yuncell.can{cursor:pointer}

.yuncell.can .yc-ic{filter:drop-shadow(0 2px 4px #0009);
  animation:yun-can 2.6s ease-in-out infinite;will-change:transform}
.yuncell.can:active .yc-ic{animation:none;transform:scale(.94)}
@media(prefers-reduced-motion:reduce){ .yuncell.can .yc-ic{animation:none} }

.yuncell.here .yc-ic{filter:drop-shadow(0 2px 4px #0009)}

.yuncell.done .yc-ic{filter:grayscale(1) contrast(.42) brightness(1.45) drop-shadow(0 1px 3px #00000030)}
.yuncell:focus-visible{outline:1px solid #3a332b;outline-offset:-2px;border-radius:8px}





.yuncell.boss{grid-column:1 / -1;min-height:96px}
.yuncell.boss .yc-ic{width:88px;height:88px;filter:drop-shadow(0 3px 7px #000000a6)}






.yuncell.yungate{grid-column:1 / -1;min-height:38px}

.yuncell.yungate::before{content:"";width:19px;height:19px;border:2px solid #171310;border-radius:50%;
  background:radial-gradient(circle,#4a443c 0 3px,#17140f 4px 100%);box-shadow:0 0 8px #0000005c}









.yunwrap,#vYunCard .gainwrap{ width:min(360px,100%); }
.yuncardbox{ max-width:min(calc(var(--app-w) * .94),420px); }



.yuncards{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:2px 0 0; }



.yunevs{ flex-direction:column; gap:7px; width:100%; }

.yunev{ display:flex; flex-direction:column; align-items:center; gap:3px; width:100%;
  padding:11px 13px; border-radius:var(--r-s); text-align:center;
  border:1px solid color-mix(in srgb,#fff 15%,transparent); background:#ffffff0a; color:var(--fg);
  font-family:var(--sans); font-size:calc(13px - var(--game-desktop-font-step)); }
.yunev b{ font-weight:600; letter-spacing:.01em; }

.yunev .yunev-d{ font-size:calc(11px - var(--game-desktop-font-step)); color:var(--fg-mid); letter-spacing:0; }




.yunev .ymoney{ display:inline-flex; align-items:center; gap:3px; color:#d9b268;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.yunev .ycoin{ width:1.15em; height:1.15em; object-fit:contain; display:block; flex:none; }
.yunev:active{ background:#ffffff16; }














.yunev.off{ background:#241417; border-color:#5f2c26; color:#ff9a8e; }
.yunev.off b{ color:#ff9a8e; }
.yunev.off .yunev-no{ color:#e6a9a2; }
.yunev.off .ymoney{ color:#e0968c; }
.yunev .yunev-no{ font-size:calc(11px - var(--game-desktop-font-step)); color:var(--fg-faint); letter-spacing:0; }


.yunev-heum{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.yunev-heum-t{ font-size:calc(11px - var(--game-desktop-font-step)); color:#e0968c;
  letter-spacing:0; white-space:nowrap; }

.yunev-who{ flex:1; min-width:0; }
.yunev-npc{ display:block; font-weight:600; color:var(--warn); letter-spacing:.02em;
  font-size:calc(12px - var(--game-desktop-font-step)); }


.yunev-act{ display:block; margin-top:4px; font-style:italic; color:var(--fg-faint);
  font-size:calc(11px - var(--game-desktop-font-step)); line-height:1.55; }
.yunev-say{ display:block; margin-top:5px; line-height:1.72; font-size:var(--say-size); }







.yunev{ flex-direction:row; align-items:center; gap:10px; }
.yunev-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.yunev.cur{ padding:9px 11px; }
.yunev-card{ flex:0 0 104px; width:104px; cursor:pointer; }
.yunev-card .card{ width:100%; }
.yuncards .gcard{ width:calc((100% - 12px)/3); max-width:104px; cursor:pointer; }
.yuncards .gcard:active{ transform:translateY(1px); }

.yuncards.many .gcard{ width:calc((100% - 18px)/4); max-width:86px; }


.yunbuy{ position:relative; }





.yunprice{ display:block; text-align:center; font-size:calc(11px - var(--game-desktop-font-step)); margin-top:3px; color:#e8d9b5; }
.yunbuy.poor .yunprice{ color:#e86a6a; }
.yunpurse{ font-size:calc(13px - var(--game-desktop-font-step)); opacity:.9; }
.yunmoney{display:inline-flex;align-items:center;gap:3px;vertical-align:middle;white-space:nowrap}
.yuncoin{width:16px;height:16px;object-fit:contain;vertical-align:middle;filter:drop-shadow(0 1px 2px #000a)}
.yunpurse .yuncoin{width:18px;height:18px}


#yunPick{position:absolute;inset:0;padding:0 10px;justify-content:center}
#yunPick .yunpickmid{width:100%}


#yunPick .yunstagew{width:100%}
#yunPick .yunpaths{column-gap:16px;row-gap:26px;padding:0 2px}
#yunPick .yunpath{position:relative;display:grid;place-items:center;width:calc((100% - 32px)/3);
  max-width:132px;height:132px;padding:4px;border:0;border-radius:0;background:none;box-shadow:none;
  animation:yun-item-in .45s both}
#yunPick .yunpath:nth-child(2){animation-delay:.10s}
#yunPick .yunpath:nth-child(3){animation-delay:.20s}
#yunPick .yunpath:nth-child(4){animation-delay:.30s}
#yunPick .yunpath:nth-child(5){animation-delay:.40s}
#yunPick .yunpath.lockd{border:0;background:none;cursor:default}
#yunPick .yunpath .yp-ic{width:min(100px,calc(var(--app-w) * .25));
  height:min(100px,calc(var(--app-w) * .25));object-fit:contain;
  filter:drop-shadow(0 3px 8px #000b)}
#yunPick .yunpath.lockd .yp-ic{filter:grayscale(1) brightness(.55)}
#yunPick .yunpath .yp-n{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  opacity:0;pointer-events:none;
  color:#ffe5a2;font-size:calc(17px - var(--game-desktop-font-step));font-weight:700;text-align:center;text-shadow:0 2px 5px #000,0 0 8px #000}
#yunPick .yunpath.chosen .yp-ic{filter:drop-shadow(0 0 9px #efc769) drop-shadow(0 0 18px #d99b34);
  animation:yun-focus-pulse 1.4s ease-in-out infinite}
#yunPick .yunpath.chosen .yp-n{opacity:1}
#yunPick .yunpath:focus-visible{outline:2px solid #f0c467;outline-offset:2px}
#yunPickBot .yunpickbub{pointer-events:auto;cursor:pointer}
#yunPickBot .yunpickbub:focus-visible{outline:2px solid #eac476;outline-offset:-6px}

#yunPickBot .tg-text{line-height:1.78;letter-spacing:.01em}
@keyframes yun-item-in{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@keyframes yun-focus-pulse{50%{filter:drop-shadow(0 0 15px #ffe7a0) drop-shadow(0 0 24px #eebc4e)}}


#vYunCard,#vYunCard.yun-event{background:#050608db;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
#vYunCard .yun-scene,#vYunCard .yun-scene.yun-npc-scene{top:50%;left:50%;
  width:min(calc(var(--app-w) - 24px),460px);height:min(calc(var(--app-h) * .78),720px);
  object-fit:contain;object-position:center;transform:translate(-50%,-50%);
  opacity:.95;-webkit-mask-image:linear-gradient(to bottom,#000 0 62%,transparent 96%);
  mask-image:linear-gradient(to bottom,#000 0 62%,transparent 96%)}
#vYunCard.yun-market .yun-scene{height:min(calc(var(--app-h) * .82),740px)}










#vYunCard .yun-scene.yun-npc-scene{
  top:calc(var(--top-gap) + 4px); transform:translateX(-50%);
  object-position:center top;
  height:min(calc(var(--app-h) * .86),780px)}
#vYunCard .yun-act{display:flex;flex-direction:column;align-items:stretch;width:100%;gap:8px}
#vYunCard .yun-act .fbtn{box-sizing:border-box;width:100%;min-width:0;max-width:none;
  flex:0 0 auto;white-space:normal;line-height:1.4}
#vYunCard.yun-event .yunev-npc{color:#f6f3ee}
#vYunCard.yun-event .yunev b{color:#e9c56f}
#vYunCard .gcard.yun-focused{outline:2px solid #f2c45a;outline-offset:2px;
  box-shadow:0 0 14px #efbd54b3;animation:yun-card-pulse 1.2s ease-in-out infinite}
@keyframes yun-card-pulse{50%{box-shadow:0 0 22px #ffe393;outline-color:#ffe393}}
#vYunCard .yuncards.many .yunprice{font-size:calc(11px - var(--game-desktop-font-step));margin-top:4px}









#vYunCard.yun-sequence .yun-scene:not([hidden]),#vYunCard.yun-sequence #yunCardH,
#vYunCard.yun-sequence #yunCardSub:not([hidden]),#vYunCard.yun-sequence #yunCards,
#vYunCard.yun-sequence .yun-act,#vYunCard.yun-sequence .yunev-npc,
#vYunCard.yun-sequence .yunev-act,#vYunCard.yun-sequence .yunev-say{opacity:0;pointer-events:none}
#vYunCard.yun-sequence .yun-scene.yun-in,#vYunCard.yun-sequence #yunCardH.yun-in,
#vYunCard.yun-sequence #yunCardSub.yun-in,#vYunCard.yun-sequence #yunCards.yun-in,
#vYunCard.yun-sequence .yun-act.yun-in,#vYunCard.yun-sequence .yunev-npc.yun-in,
#vYunCard.yun-sequence .yunev-act.yun-in,#vYunCard.yun-sequence .yunev-say.yun-in{
  opacity:1;pointer-events:auto;animation:yun-reveal .34s ease-out forwards}
@keyframes yun-reveal{from{opacity:0}to{opacity:1}}


#yunMap.yun-report{min-height:calc(var(--app-h) - 80px);display:flex;flex-direction:column;
  justify-content:center;background:var(--yunmap-bg) center/cover no-repeat}
#yunMap.yun-report::before{content:"";position:absolute;inset:0;background:#050608db;
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);z-index:0}
#yunMap.yun-report .yunend{position:relative;z-index:1;width:100%;color:#f6f3ee}
#yunMap.yun-report .yunend-h,#yunMap.yun-report .yunend.win .yunend-h{color:#f6f3ee}
#yunMap.yun-report .yunend-d,#yunMap.yun-report .yunend-l dt{color:#c7c4c0}
#yunMap.yun-report .yunend-l{background:#ffffff22}
#yunMap.yun-report .yunend-l>div{background:#111216d9}
#yunMap.yun-report .yunend-l dd{color:#f6f3ee}
#yunMap.yun-report .yunend-go{width:100%;max-width:300px;background:#27282c;color:#f6f3ee;
  border:1px solid #ffffff38}

#yunMap.yun-report-flow .yunend>*{opacity:0;pointer-events:none}
#yunMap.yun-report-flow .yunend>.yun-in{opacity:1;pointer-events:auto;animation:yun-reveal .34s ease-out forwards}
@media(prefers-reduced-motion:reduce){
  #yunPick .yunpath,#yunPick .yunpath.chosen .yp-ic,#vYunCard .gcard.yun-focused{animation:none}
  #vYunCard.yun-sequence .yun-scene:not([hidden]),#vYunCard.yun-sequence #yunCardH,
  #vYunCard.yun-sequence #yunCardSub:not([hidden]),#vYunCard.yun-sequence #yunCards,
  #vYunCard.yun-sequence .yun-act,#vYunCard.yun-sequence .yunev-npc,
  #vYunCard.yun-sequence .yunev-act,#vYunCard.yun-sequence .yunev-say,
  #yunMap.yun-report-flow .yunend>*{opacity:1;animation:none}
}







.yunwon{ margin:2px 0 7px; display:flex; align-items:center; justify-content:center; gap:5px;
  font-size:calc(12px - var(--game-desktop-font-step)); line-height:1.4; color:var(--fg-mid); letter-spacing:.01em; }
.yunwon[hidden]{ display:none; }
.yunwon .yw-ic{ width:17px; height:17px; object-fit:contain;
  filter:drop-shadow(0 1px 2px #000a); }
.yunwon b{ color:var(--chungi,#e8c06a); font-weight:400; }


b,strong{font-weight:400}
.c-name,.p-name,.pkname,.cm8-n,.ss-n{font-weight:600}
#s-main .mb-n,#s-main .mdk-n{font-weight:700}


.app.moonback.silk{--panel:#171b22d9;--panel-2:#252a32d9;--ink-2:#171b22d9}
.app.moonback.silk .tile{background:linear-gradient(160deg,#171b22dc,#252a32e6);border-color:#ffffff32}
.app.moonback.silk .tile:hover{background:linear-gradient(160deg,#20252ded,#303640ed)}
.app.moonback.silk .fbtn,.app.moonback.silk .ubtn,.app.moonback.silk .chip,
.app.moonback.silk .fsel,.app.moonback.silk .fq{background:#171b22c9;border-color:#ffffff30}
.app.moonback.silk .fbtn.pri{background:#343b46d9}
.app.moonback.silk .ftog,.app.moonback.silk .askbox,.app.moonback.silk .jinbox,
.app.moonback.silk .devbox{background:#171b22d9}
.app.moonback.silk #s-prof .namebox{background:linear-gradient(160deg,#161b24e8,#232932ed);border-color:#ffffff42}
.app.moonback.silk #s-prof .wcell{background:#141923da;border-color:#ffffff33}
.app.moonback.silk #s-prof .prof-tab{background:#171b22d9;border-color:#ffffff35}
.app.moonback.silk #s-prof .prof-tab[aria-selected="true"]{background:#303742e8;border-color:#ffffff80}
.app.moonback.silk #s-prof .uidline{background:#11161ed9}
.app.moonback.silk #vEvent .evbox{background:radial-gradient(ellipse at 50% 0%,#202630e8 0%,#151a22ed 46%,#0e1219f0 100%)}
.app.moonback.silk #vEvent .ev-card{background:#171d26d9;border-color:#ffffff35}
.app.moonback.silk #vEvent .ev-card .ev-card{background:#10151de0}
.app.moonback.silk .tip{background:#171b22e8;border-color:#ffffff3d}



.ybweek{display:flex;justify-content:space-between;gap:8px;align-items:baseline;
  margin:0 0 6px;font-size:calc(12px - var(--game-desktop-font-step));color:var(--ink-3)}
.ybweek .ybmine{color:var(--ink-1)}
.ybweek .ybmine b{font-weight:800}
.pbtier.ybscore{display:flex;flex-direction:column;align-items:flex-end;gap:1px;line-height:1.15}
.pbtier.ybscore b{font-weight:800;font-size:calc(14px - var(--game-desktop-font-step))}
.pbtier.ybscore span{font-size:calc(11px - var(--game-desktop-font-step));color:var(--ink-3)}
.yuntrial{position:absolute;top:16px;left:14px;z-index:2;display:block;width:auto;
  min-width:142px;flex:none;margin:0;padding:10px 14px;line-height:1.4;
  background:var(--panel);border-color:var(--line);box-shadow:0 8px 22px #0006}


.ypscore{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 2px 2px;font-size:calc(12px - var(--game-desktop-font-step));color:var(--ink-3)}
.ypscore b{font-weight:800;color:var(--ink-1);font-size:calc(13px - var(--game-desktop-font-step))}
#s-yunprof .pbsec{margin:14px 2px 8px}
.ypdeck{padding-bottom:12px}
























:root{
  
  --kv-white:#FFFFFF; --kv-pale:#F4F8FC; --kv-pale-2:#EAF1F9;          
  --kv-cyan:#1AA7E8;  --kv-cyan-deep:#0E86C9; --kv-cyan-soft:#DDF2FC;  
  --kv-lav:#C7CDF6;   --kv-lav-deep:#8C95E3;  --kv-lav-soft:#EEF0FD;   
  --kv-glass:#FFFFFFE0; --kv-glass-2:#F4F8FCE6;                        
  --kv-shadow:0 6px 18px -8px #2A4A7A40;                               
  --kv-dim:#16203AE0;                                                  

  
  --ink:var(--kv-pale); --ink-2:var(--kv-pale-2);
  --panel:var(--kv-white); --panel-2:#F2F6FC;
  --line:#C9D6E8; --line-soft:#DDE6F2;
  --fg:#1D2939; --fg-mid:#46566C; --fg-faint:#5F6E84;   


  --seal:var(--kv-cyan); --seal-deep:var(--kv-cyan-deep);
  
  --ink-1:var(--fg); --ink-3:var(--fg-mid);
}


.app{border-inline-color:var(--line-soft);box-shadow:0 0 60px 10px #8C95E333}
.app::before{background:repeating-linear-gradient(90deg,#1AA7E806 0 1px,transparent 1px 3px)}


.fbtn{background:var(--kv-white);border-color:var(--line);color:var(--fg);box-shadow:var(--kv-shadow)}
.fbtn:hover{border-color:var(--kv-cyan);color:var(--kv-cyan-deep)}


.fbtn.pri{background:linear-gradient(180deg,#1E98D8,#0A6BA8);border-color:#0A6BA8;color:#fff;
  text-shadow:0 1px 1px #063E6380}
.fbtn.dg{background:#FFF3F3;border-color:#F2BDBD;color:#B3362D}
.fbtn.dg:hover,.fbtn.dg.undo:hover{background:#FFE6E6;border-color:#E8695F;color:#A8322A}
.fbtn.dg.out,.fbtn.dg.undo{background:#FFF3F3;border-color:#F2BDBD;color:#B3362D}


.fbtn[disabled],.app.silk .fbtn[disabled],.app.moonback.silk .fbtn[disabled]{
  opacity:1;background:#E4E9F1;border-color:#D3DBE6;color:#8A96A8;box-shadow:none;text-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.chip{background:var(--kv-white);color:var(--fg-mid)}
.chip.on{background:var(--kv-cyan);border-color:var(--kv-cyan-deep);color:#fff}
.fq,.fsel{background:var(--kv-white);color:var(--fg)}


.app.silk .fbtn,.app.moonback.silk .fbtn{background:var(--kv-glass);border-color:var(--line);color:var(--fg);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.app.silk .fbtn.pri,.app.moonback.silk .fbtn.pri{background:linear-gradient(180deg,#1E98D8,#0A6BA8);color:#fff;border-color:#0A6BA8}
.app.silk .fbtn.dg,.app.moonback.silk .fbtn.dg{background:#FFF3F3E6;border-color:#F2BDBD;color:#B3362D}













.fbtn[disabled],.fbtn:disabled,
.app.silk .fbtn[disabled],.app.silk .fbtn:disabled,
.app.moonback.silk .fbtn[disabled],.app.moonback.silk .fbtn:disabled,
.app.silk .fbtn.pri[disabled],.app.silk .fbtn.pri:disabled,
.app.moonback.silk .fbtn.pri[disabled],.app.moonback.silk .fbtn.pri:disabled{
  opacity:1;background:#FFF3F3;border-color:#F2BDBD;color:#B3362D;
  box-shadow:none;text-shadow:none;cursor:default;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.app.silk .ubtn,.app.silk .chip,.app.silk .fsel,.app.silk .fq,
.app.moonback.silk .ubtn,.app.moonback.silk .chip,.app.moonback.silk .fsel,.app.moonback.silk .fq{
  background:var(--kv-glass);border-color:var(--line);color:var(--fg-mid)}
.app.silk .chip.on,.app.moonback.silk .chip.on{background:var(--kv-cyan);border-color:var(--kv-cyan-deep);color:#fff}


.tile,.app.silk .tile,.app.moonback.silk .tile{
  background:linear-gradient(160deg,var(--kv-glass),var(--kv-glass-2));border-color:var(--line);box-shadow:var(--kv-shadow)}
.tile:hover,.app.silk .tile:hover,.app.moonback.silk .tile:hover{
  background:linear-gradient(160deg,#FFFFFFF0,#EEF6FDF0);border-color:var(--kv-cyan)}
.app.silk .ftog,.app.silk .askbox,.app.silk .jinbox,.app.silk .devbox,
.app.moonback.silk .ftog,.app.moonback.silk .askbox,.app.moonback.silk .jinbox,.app.moonback.silk .devbox{
  background:var(--kv-glass);border-color:var(--line)}
.ftbox{background:var(--kv-white);box-shadow:var(--kv-shadow)}
.ftbox.ok{border-color:var(--kv-cyan);background:linear-gradient(180deg,var(--kv-cyan-soft),var(--kv-white))}
.app.silk .signin .si{background:var(--kv-white);color:var(--fg)}


.app.moonback.silk #s-prof .namebox{background:linear-gradient(160deg,var(--kv-glass),var(--kv-lav-soft));border-color:var(--kv-lav)}
.app.moonback.silk #s-prof .wcell{background:var(--kv-glass);border-color:var(--line)}
.app.moonback.silk #s-prof .prof-tab{background:var(--kv-glass);border-color:var(--line);color:var(--fg-mid)}
.app.moonback.silk #s-prof .prof-tab[aria-selected="true"]{background:var(--kv-cyan);border-color:var(--kv-cyan-deep);color:#fff}
.app.moonback.silk #s-prof .uidline{background:var(--kv-pale-2)}
.app.moonback.silk #vEvent .evbox,#vEvent .evbox{
  background:linear-gradient(180deg,#FFFFFFF5,#F1F6FCF5);border-color:var(--kv-lav)}
.app.moonback.silk #vEvent .ev-card,.ev-card{background:var(--kv-white);border-color:var(--line)}
.app.moonback.silk #vEvent .ev-card .ev-card,.ev-card .ev-card{background:var(--kv-pale)}
#vEvent .evtop h3{color:var(--fg)}
#vEvent .ev-close{color:var(--fg-mid);border-color:var(--line);background:var(--kv-white)}


.topbar,.app.silk .topbar,.app.battle-wide > .topbar{
  background:linear-gradient(180deg,#FFFFFFEB,#F2F7FDF2);border-top:1px solid var(--line);
  box-shadow:0 -6px 18px -10px #2A4A7A40;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

.coin.chungi{color:#8F6106} .coin.yeong{color:#6B42D2} .coin.jin{color:#0F7A59}

.tip-day b{color:#8F6106}

.backbtn img{content:url("assets/ui/back_arrow_chevron_light_v1.svg?v=1")}
.fsbtn:hover{background:var(--kv-cyan-soft)}


.tip,.app.moonback.silk .tip{background:#FFFFFFF7;border-color:var(--line);color:var(--fg);
  box-shadow:0 14px 34px -14px #2A4A7A66}
.tip.awk{background:linear-gradient(180deg,var(--kv-lav-soft) 0%,#FFFFFFF7 62%)}

.tip.at::before{background:#FFFFFFF7;border-color:var(--line)}
.mmore{background:#FFFFFFE6;border:1px solid var(--line);box-shadow:0 14px 34px -14px #2A4A7A55}
.mmi{color:var(--fg-mid)}
.mmi:active{background:var(--kv-cyan-soft);color:var(--kv-cyan-deep)}




.sec{color:var(--fg-mid);text-shadow:0 0 2px #FFFFFF,0 0 6px #FFFFFFE6,0 0 10px #FFFFFFB3}
.sec::after{background:linear-gradient(90deg,#1AA7E866,#C7CDF600)}


.tb-g{background:#1D293914}


.veil{background:var(--kv-dim)}
.veil.match{background:#16203AEB}


.battle-side{background:linear-gradient(180deg,#FFFFFFD9,#F2F7FDE6)}
.battle-side .clock{background:var(--kv-white);border:1px solid var(--line);color:var(--fg)}
.app .varr{background:#FFFFFFEF;color:var(--fg)}











.app.moonback.silk{--panel:var(--kv-glass);--panel-2:#F2F6FCE6;--ink-2:var(--kv-pale-2)}



#vEvent{background:linear-gradient(180deg,#E6EEF8D9,#D9E3F1E6);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ev-day{background:var(--kv-pale);border-color:var(--line-soft);color:var(--fg-mid)}
.uidlabel{background:var(--kv-cyan-soft);border-color:#A9DCF5;color:var(--kv-cyan-deep)}
.uidline{background:var(--kv-pale)}



.toast.ornate,
.veil.ask .askbox:not(.att7):not(.gainbox){
  background:linear-gradient(180deg,#FFFFFFF7,#F1F6FCF7);border-color:var(--kv-lav);color:var(--fg);
  box-shadow:0 0 0 1px #FFFFFF,0 14px 34px -14px #2A4A7A66}



.ft-go:not(.off),.ml-go:not([disabled]),.fp-rw.ok{
  background:linear-gradient(180deg,#FFF7E2,#FCE8B6);border-color:#DDB259;color:#7A5206}
.ft-go:not(.off):active,.ml-go:not([disabled]):active{background:#F8DE9E}

.ft-go.off{opacity:1;background:#EEF2F8;border-color:#D3DBE6;color:#8A96A8}
.ml-go[disabled]{background:#EEF2F8;color:#8A96A8}
.ml-ico{background:var(--kv-pale-2)}
.mlbox.ok{background:linear-gradient(180deg,var(--kv-cyan-soft),var(--kv-white))}


.ftprog{background:linear-gradient(180deg,#FFFFFFE6,#F2F7FDE6);border-color:var(--line);box-shadow:var(--kv-shadow)}
.fp-rw{background:var(--kv-white)}
.fp-rw.got{border-color:#9CCFA6}
.fp-p{color:#8F6106}

.fp-bar,.ft-bar{background:#1D293912;border-color:#C9D6E8}


.parr{background:#FFFFFFE6;border-color:var(--line);color:var(--kv-cyan-deep);box-shadow:var(--kv-shadow)}
.pk-see{background:#FFFFFFD9;border-color:var(--line);color:var(--fg-mid)}

.app .buy b{background:#FFFFFFD9;border-color:var(--line);color:var(--fg-mid)}






:root{--seal:#0B78B5; --seal-deep:#0A6BA8;
  --kv-on:linear-gradient(180deg,#1E98D8,#0A6BA8)}   
.hptab.on,.chip.on,.app.silk .chip.on,.app.moonback.silk .chip.on,
.app.moonback.silk #s-prof .prof-tab[aria-selected="true"]{
  background:var(--kv-on);border-color:#0A6BA8;color:#fff}
.uidlabel{color:#0A6BA8}













:root{--kv-dim:#DDE9F6EB;
  --kv-pink:#F4A9C8; --kv-pink-soft:#FDEEF4; --kv-pink-deep:#BE3F7C;   
  --kv-gold-ink:#8F6106;
  --kv-veil:linear-gradient(180deg,#E6F1FBEF,#F3EEFBF2)}
.veil,.veil.match,.veil.stg,#vGain,#vGain.attv,#vYunCard,#vYunCard.yun-event{
  background:var(--kv-veil);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#vDoegop,#vPvpRise{-webkit-backdrop-filter:none;backdrop-filter:none}
.veil.stg > .vxround{background:var(--kv-white);border-color:var(--line);color:var(--fg);box-shadow:var(--kv-shadow)}
.veil.stg > .vxround:active{background:var(--kv-cyan-soft)}
.veil.stg > .vxround:focus-visible{outline-color:var(--kv-cyan)}
.quit-warn{color:#B3362D}


.gain-mark,.stg-mark{background:linear-gradient(135deg,#FFFFFF,var(--kv-cyan-soft));--og:var(--kv-cyan);
  box-shadow:0 0 0 1px #FFFFFF,0 4px 12px -4px #2A4A7A55}


#vYunCard .yun-scene{opacity:1}
#vYunCard.yun-event #yunCardSub,#vYunCard.yun-market #yunCardSub{background:var(--kv-glass);border:1px solid var(--line);
  border-radius:var(--r-s);padding:10px 13px;box-shadow:var(--kv-shadow);color:var(--fg)}
#vYunCard .gain-h,#vYunCard.yun-event .gain-h{color:var(--fg);text-shadow:0 0 3px #FFFFFF,0 0 8px #FFFFFF}
.yunev,#vYunCard.yun-event .yunev{background:var(--kv-glass);border-color:var(--line);color:var(--fg);box-shadow:var(--kv-shadow)}
.yunev:active{background:var(--kv-cyan-soft)}
.yunev.off{filter:grayscale(1);background:#E4E9F1;border-color:#D3DBE6;color:#6D7A8E}
#vYunCard.yun-event .yunev-npc{color:var(--kv-pink-deep)}
#vYunCard.yun-event .yunev b{color:var(--fg)}
.yunev .ymoney{color:var(--kv-gold-ink)}
.yunprice{color:var(--fg);font-weight:700}
.yunbuy.poor .yunprice{color:#B3362D}
.yuncoin{filter:none}
#vYunCard .gcard.yun-focused{outline-color:var(--kv-cyan);box-shadow:0 0 14px #1AA7E899}
@keyframes yun-card-pulse{50%{box-shadow:0 0 20px #F4A9C8;outline-color:var(--kv-pink)}}
.yunwon{color:var(--fg)}

#vYunCard .gainbox{background:#FFFFFFD1;border:1px solid var(--line);border-radius:14px;box-shadow:var(--kv-shadow);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#vYunCard.yun-event .gainbox{background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
#vYunCard.yun-market #yunCardSub{background:none;border:0;box-shadow:none;padding:0}




.tg-bubble{background:none;filter:drop-shadow(0 10px 16px #2A4A7A40)}
.tg-bubble::before,.tg-bubble.top::before{display:block;content:"";position:absolute;inset:0 0 17.8% 0;border-radius:14px;
  background:linear-gradient(180deg,#FFFFFFF7,#F1F6FCF7);border:1px solid var(--kv-lav)}
.tg-name{background:var(--kv-on);border-color:#0A6BA8;color:#fff;box-shadow:0 3px 8px -3px #2A4A7A66;text-shadow:none}
.tg-text{color:var(--fg);text-shadow:none}
.tg-bust{filter:drop-shadow(0 6px 10px #2A4A7A40)}
#yunPick .yunpath .yp-ic{filter:drop-shadow(0 3px 6px #2A4A7A55)}
#yunPick .yunpath.lockd .yp-ic{filter:grayscale(1) opacity(.7)}
#yunPick .yunpath .yp-n{color:#fff;text-shadow:0 0 4px #0A4A7A,0 1px 3px #0A4A7A}
#yunPick .yunpath.chosen .yp-ic{filter:drop-shadow(0 0 8px var(--kv-cyan)) drop-shadow(0 0 16px var(--kv-pink))}
@keyframes yun-focus-pulse{50%{filter:drop-shadow(0 0 13px var(--kv-cyan)) drop-shadow(0 0 22px var(--kv-pink))}}
#yunPick .yunpath:focus-visible,#yunPickBot .yunpickbub:focus-visible{outline-color:var(--kv-cyan)}



.ig-dia{background:linear-gradient(135deg,#FFFFFF,var(--kv-lav-soft));box-shadow:0 0 0 1px #FFFFFF,0 4px 12px -4px #2A4A7A55}
.igcell.now .ig-dia{border-color:var(--kv-cyan);box-shadow:0 0 0 1px #FFFFFF,0 0 12px #1AA7E866}
.igcell.pick .ig-dia{box-shadow:0 0 0 1px #FFFFFF,0 0 14px #F4A9C8AA}
.igcell.past .ig-dia{opacity:.75}
.igcell.done .ig-dia{filter:grayscale(1)}
.igc-k,.igcell.now .igc-k,.igcell.mid .igc-k{color:var(--fg);text-shadow:none}
.igcell.done .igc-k{color:#6D7A8E}
.ig-face{box-shadow:0 0 0 1px var(--line)}
.igk,#igK,.mig-k,#migK{color:var(--kv-gold-ink);text-shadow:none}
.igsay,.ighow{background:var(--kv-glass);border:1px solid var(--line-soft);border-radius:var(--r-s);box-shadow:var(--kv-shadow)}
.igsay{color:var(--fg);text-shadow:none;padding:7px 12px}
.ighow{padding:10px 12px;margin-top:auto}
.ighow p{color:var(--fg-mid)}
.ig-h{color:var(--fg);text-shadow:0 0 3px #FFFFFF,0 0 8px #FFFFFF}
.ig-ic{background:linear-gradient(160deg,#FFFFFF,var(--kv-pale-2));border-color:var(--line);box-shadow:var(--kv-shadow)}
.ig-q{background:#FFFFFFE6;color:var(--kv-gold-ink);text-shadow:none;font-weight:700}
.ig-n{color:var(--fg);text-shadow:0 0 3px #FFFFFF,0 0 6px #FFFFFF}
.igpane.done .ig-n,.igpane.done .ig-q{color:#6D7A8E}
.igpane.done .ig-ic img{filter:grayscale(1)}
.rig-n{color:#6B42D2;text-shadow:none}
.result p.rig{color:var(--fg-mid)}


.social-row[data-provider="x"] .sns-icon,.social-row[data-provider="email"] .sns-icon{filter:brightness(0)}


.pvrank,.pvrwd{background:var(--kv-glass);box-shadow:var(--kv-shadow)}
.pvrank{border-color:var(--line);color:var(--fg)}
.pvrwd{border-color:#DDB259;color:var(--kv-gold-ink)}
.pv-ko,.pvcell.now .pv-ko,.pvcell.mid:not(.now) .pv-ko{color:var(--fg)}
.pv-cap.up{color:#0F7A59}.pv-cap.dn{color:#B3362D}
.dt-m.chv,.pbs-chv{color:var(--kv-gold-ink)}
.dt-m.yv{color:#6B42D2}


.a7-q,.gain-q,.toast,.dr-get,b.dr-get,.dt-ok,.pk-soon,.dkc{text-shadow:none}
.gain-q{color:var(--kv-gold-ink);background:#FFFFFFE6}
.gain-q.jin{color:#0F7A59}
.a7-q{color:var(--kv-gold-ink)}


:root{--warn:#8F6106;--kv-yeong-ink:#6B42D2;--kv-jin-ink:#0F7A59;--kv-red-ink:#B3362D}
.ml-pay.chungi,.spend-go.chungi,.a7-q.chungi,.gain-item.now .gain-sub,.attc.big .at-d,.pbplace,.ss-p,
.crhave b.gold,.rwd-n,.rig-up,.yunwon b,.fkwtog.on .fkwsum,.trow.acc .n{color:var(--kv-gold-ink)}
.ml-pay.yeong,.spend-go.yeong,.a7-q.yeong,.mp-left.on,.mp-row b,.mp-sub b,.mp-p b,.mp-now,.yamt{color:var(--kv-yeong-ink)}
.ml-pay.jin,.rhint.jin,.jinbox h4,.jinbox b,.cr-v,.crhave b,.a7-q.jin,.attc.got .at-s,.mlive b,.ed-cnt.full,.stg-pay.done .stg-ph{color:var(--kv-jin-ink)}
.ml-left.over,.ed-cnt.over,.dt-m.bad,.linkb:hover,.linkb.quit:hover,.mini.dg:hover,.givebtn:hover,.givebtn:active,.homebtn.quit:hover,.homebtn.quit:active{color:var(--kv-red-ink)}
.ft-go.off{color:#6D7A8E}

.wcell b{color:color-mix(in srgb,var(--fg-mid) calc(100% - var(--done,0%)),#0F7A59 var(--done,0%))}
.wcell.gy .pg-ko,.wcell.gy .pg-han{color:var(--fg)}

#vYunCard.yun-event .gain-h{align-self:center;width:fit-content;margin-inline:auto;padding:3px 14px;border-radius:999px;
  background:var(--kv-glass);border:1px solid var(--line);text-shadow:none}

.hpitem{background:#FFFFFFD1;border-color:var(--line);box-shadow:var(--kv-shadow);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hpt{color:var(--fg)}

.tlink,.pvsea,.pvpick,.pvmeta,.note.rp-note,.note.rp-status,#tOwn,.flab,.ig-h{background:#FFFFFFC7;border-radius:8px;
  color:var(--fg-mid);text-shadow:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.tlink,.pvsea,#tOwn,.flab,.ig-h{padding:2px 10px}
.pvpick,.pvmeta,.note.rp-note,.note.rp-status{padding:4px 10px}
.pv-ko,.pv-dan,.pv-cap{text-shadow:0 0 3px #FFFFFF,0 0 7px #FFFFFF}
.pv-dan{color:var(--fg-mid)}
.note.rp-status{color:var(--warn)}



.app .buy[disabled]{opacity:1}
.app .buy[disabled] > span:not(.nudot){filter:grayscale(1)}


.dtile{background:#FFFFFFB8;border-radius:10px;padding:5px 4px 7px;box-shadow:var(--kv-shadow)}

#yunMap.yun-report::before{background:linear-gradient(180deg,#EAF4FCD9,#F3EEFBE6)}
#yunMap.yun-report .yunend{color:var(--fg)}
#yunMap.yun-report .yunend-h,#yunMap.yun-report .yunend.win .yunend-h{color:var(--fg);text-shadow:none}
#yunMap.yun-report .yunend-d,#yunMap.yun-report .yunend-l dt{color:var(--fg-mid);opacity:1}
#yunMap.yun-report .yunend-l{background:var(--line-soft);border-radius:var(--r-s);overflow:hidden;box-shadow:var(--kv-shadow)}
#yunMap.yun-report .yunend-l>div{background:#FFFFFFEB}
#yunMap.yun-report .yunend-l dd{color:var(--fg)}
#yunMap.yun-report .yunend-go{background:var(--kv-on);color:#fff;border-color:#0A6BA8;text-shadow:none}


.gain-ic{background:linear-gradient(160deg,#FFFFFF,var(--kv-pale-2));border-color:var(--line);box-shadow:var(--kv-shadow)}
.gain-item.now .gain-ic{box-shadow:0 0 10px #1AA7E866}
.gain-n{color:var(--fg)}
.dcon b{color:var(--fg)}
.dcon{background:#FFFFFF8C}

.result,.mull{background:linear-gradient(180deg,#E9F3FBF7,#F3EEFBF9)}
.result h2,.mturn{text-shadow:none}
.result.w h2{color:#0F7A59}.result.l h2{color:var(--kv-red-ink)}
.mcard.x::after,.mcard.fixed::after{text-shadow:none;color:#fff;background:#16203A99}








:root{--cd-ink:#16202E;--cd-mid:#3A4A60;--cd-plate:#FFFFFFEB;--cd-line:#B9C8DC}
.c-veil{background:linear-gradient(180deg,#FFFFFF00 0 44%,#FFFFFFC7 58%,#FFFFFFF0 70%,#FFFFFFFA 100%)}
.c-name,.unit .c-name,.hcard .c-name{color:var(--cd-ink);text-shadow:none}
.c-name::after{background:#1D293966}
.c-text{color:var(--cd-mid)}
.c-type{color:var(--cd-ink);background:var(--cd-plate);border:1px solid var(--cd-line);text-shadow:none}
.c-eng{color:var(--kv-gold-ink);text-shadow:0 0 2px #FFFFFF,0 0 5px #FFFFFF}
.c-own{background:#FFFFFFF2;color:var(--cd-mid);border-color:var(--cd-line)}
.c-own.z{color:#6D7A8E}
#edBody .c-own{background:#FFFFFFF2;border-color:#0F7A59;color:#0F7A59}
#edBody .c-own.z{border-color:var(--cd-line);color:#6D7A8E}
.kb,.ugain .kb{background:var(--cd-plate);border-color:var(--cd-line);color:var(--cd-ink);text-shadow:none}
.kb.g{color:#0F7A59}.kb.s{color:#0B78B5}.kb.y{color:#8F6106}.kb.e{color:#6B42D2}
.kb.d{color:#B3362D;border-color:#E3A9A3}
.ugain .kb{border-color:#7FCDA6}
button.kb:hover{background:var(--kv-cyan-soft);border-color:var(--kv-cyan)}
button.kb.on{background:var(--kv-on);border-color:#0A6BA8;color:#fff}

.card.locked,.card.eng.locked>*{filter:grayscale(1)}
.card.eng.locked{filter:none}

.dover::before{background:linear-gradient(180deg,#FFFFFF00 0 46%,#FFFFFFB8 60%,#FFFFFFEB 74%,#FFFFFFF7 100%)}
.dover .c-type{color:var(--cd-ink);background:var(--cd-plate);border-color:var(--cd-line);text-shadow:none}
.dover .kb{background:var(--cd-plate);border-color:var(--cd-line)}
.c-new{text-shadow:0 0 2px #FFFFFF,0 0 5px #FFFFFF;color:var(--kv-gold-ink)}

.unit .c-veil{background:linear-gradient(180deg,#FFFFFF00 0 54%,#FFFFFFC7 66%,#FFFFFFF0 76%,#FFFFFFFA 100%)}



:root{--kv-dim:#BCD2E8C4;--kv-veil:linear-gradient(180deg,#BFD6ECC7,#CFCBECD1)}
.result,.mull{background:linear-gradient(180deg,#CFE0F0F2,#DBD8F0F4)}
#yunMap.yun-report::before{background:linear-gradient(180deg,#C6DAEDC7,#D2CEECD1)}
#vEvent{background:var(--kv-veil)}
























.c-veil{background:linear-gradient(180deg,#FFFFFF00 34%,#FFFFFF73 62%,#FFFFFF9E 82%,#FFFFFFAB 100%)}
.unit .c-veil{background:linear-gradient(180deg,#FFFFFF00 42%,#FFFFFF73 68%,#FFFFFF9E 85%,#FFFFFFAB 100%)}
.dover::before{background:linear-gradient(180deg,#FFFFFF00 34%,#FFFFFF66 62%,#FFFFFF91 82%,#FFFFFF9E 100%)}










.gm-pg{fill:#FFFFFF;stroke:#8FD0F0;stroke-width:.7}
.gm-rl{fill:#CDEBFA;stroke:#5DB7E6;stroke-width:.7}
.gm-qi{filter:none}
.gain-seal::before{background:linear-gradient(180deg,#FFFFFF,var(--kv-cyan-soft));border-color:#8FD0F0;box-shadow:none}


.a7-ic,.attc,.attc.big,.gain-item.tojin .gain-ic{background:linear-gradient(160deg,#FFFFFF,var(--kv-pale-2));border-color:var(--line);box-shadow:var(--kv-shadow)}
.a7c.now .a7-ic{box-shadow:0 0 12px #1AA7E866}
.a7-q,.gq{background:#FFFFFFE6;text-shadow:none}
.a7-got{background:#FFFFFFB3}
.gq{color:var(--kv-gold-ink)}
.attc.big .at-ic.card img{border-color:var(--line);box-shadow:var(--kv-shadow)}
.bgc.big{background:linear-gradient(160deg,#FFFFFF,var(--kv-lav-soft));border-color:var(--kv-lav);box-shadow:var(--kv-shadow);color:var(--fg)}
.bv-ic{color:var(--fg)}


.craftb{background:var(--kv-white);border-color:#7FCDA6;box-shadow:var(--kv-shadow)}
.craftb:hover{background:var(--kv-cyan-soft)}
.dkw{background:var(--kv-lav-soft);border-color:var(--kv-lav)}
.dkw[data-kw]:hover{background:var(--kv-cyan-soft)}
.dkw.up{background:#E7F7EF;border-color:#7FCDA6;color:#0F7A59}
.dkw.dn{background:#FFF3F3;border-color:#F2BDBD;color:#B3362D}
.dkw.on{background:var(--kv-on);color:#fff}
.dkrow.miss{background:#FFF3F3;border-color:#F2BDBD}



.dkc{color:#f4f2ec;text-shadow:none}
.legacy{background:#FFF7E2;border-color:#DDB259;color:var(--kv-gold-ink)}


.fc-ck{border-color:#FFFFFF;box-shadow:var(--kv-shadow)}
.fc-lk{background:#FFFFFFD9;color:var(--fg-mid)}
.fp-ck{box-shadow:var(--kv-shadow)}


.stg-go.stg-lock{background:#E4E9F1}
.stg-s,.mp-p{color:var(--fg-mid)}
.ev-intro{color:var(--fg-mid)}


.mpass{background:linear-gradient(180deg,var(--kv-lav-soft),var(--kv-white));border-color:var(--kv-lav)}
.mp-left{background:var(--kv-pale-2);color:var(--fg-mid)}
.mp-left.on{border-color:var(--kv-lav-deep)}
.rguide-card,.rguide-card:hover,.rguide-card:focus-visible{background:var(--kv-glass);border-color:var(--line);box-shadow:var(--kv-shadow);color:var(--fg)}
.rguide-card:hover,.rguide-card:focus-visible{border-color:var(--kv-cyan)}
.say-row .say-choice,.say-mute{background:var(--kv-glass);border-color:var(--line);color:var(--fg)}
.say-row .say-choice:hover,.say-row .say-choice:focus-visible,.say-mute:hover,.say-mute:focus-visible{background:var(--kv-cyan-soft);border-color:var(--kv-cyan)}


.pvban{background:linear-gradient(180deg,#FFFFFFF2,#F1F6FCF2);color:var(--fg)}
.pvban.up{color:var(--kv-gold-ink)}.pvban.dn{color:var(--kv-red-ink)}












































.unit .c-cost,.unit .c-atk,.unit .c-hp{
  width:calc(var(--sura-w) * .2667);
  font-size:calc(var(--sura-w) * .1383 - var(--game-desktop-font-step))}
.unit .c-path{width:calc(var(--sura-w) * .4);
  top:calc(var(--bz) - var(--sura-w) * .0667);
  right:calc(var(--bz) - var(--sura-w) * .0667)}
.unit .c-foot{bottom:calc(var(--bz) + var(--sura-w) * .2667 + var(--sura-w) * .0833)}
.dover .c-cost,.dover .c-atk,.dover .c-hp{width:clamp(32px,15.3cqw,46px);font-size:calc(clamp(16px,7.6cqw,23px) - var(--game-desktop-font-step))}
.dover .c-eng{top:calc(var(--bz) + clamp(32px,15.3cqw,46px) + 1.2cqw);width:clamp(32px,15.3cqw,46px)}
.dover .c-foot{bottom:calc(var(--bz) + clamp(32px,15.3cqw,46px) + 6px)}




.dover .c-cost,.dover .c-atk,.dover .c-hp{padding-top:calc(.069em + 2px)}












.mtop{align-items:flex-start;gap:6px}
.mwing{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:5px}
.mwing.right{align-items:flex-end;gap:2px}


.mwing .mic{width:40px;height:40px}
.mwing .mic-pic{width:30px;height:30px}



.mwing.left .purse{display:grid;grid-template-columns:minmax(0,max-content);gap:4px;justify-content:start;
  font-size:calc(14px - var(--game-desktop-font-step))}



.mwing.left .token-img{width:24px;height:24px}

.mbrand{flex:none;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.mbrand .mhanb{flex-direction:column;align-items:center;gap:4px;width:min(100%,150px)}

.mbrand .mprof-face{width:56px;height:56px;font-size:calc(24px - var(--game-desktop-font-step))}
.mbrand .mprof-copy{flex:none;width:100%;align-items:center;gap:3px}
.mbrand .mprof-name{justify-content:center;font-size:calc(14px - var(--game-desktop-font-step));font-weight:700}
.mbrand .mprof-tag{font-size:calc(11px - var(--game-desktop-font-step))}
.mbrand .mig-k{font-size:calc(12px - var(--game-desktop-font-step))}
.mbrand .mig-row{justify-content:center}
.mbrand .mlive{text-align:center}

.mbrand .mhanb > .nudot{right:auto;left:calc(50% + 21px);top:-1px}









.mmg > .mbig.half:last-child{grid-column:1/-1;justify-self:center;width:var(--half)}
.mmg{--half:calc(min((100cqw - var(--mgap))/2,
       (100cqh - var(--mgap)*(1 + 1/var(--arh))) / (2/var(--arh) + 1/var(--arf))) * .86)}












.mdock{position:relative;z-index:6;align-items:center;
  min-height:calc(66px + var(--bot-gap));padding:5px 10px calc(12px + var(--bot-gap));
  


  background:none;border-top:0}
.mdock[hidden]{display:none}






.mdock{transition:transform .22s cubic-bezier(.4,0,.2,1),opacity .22s ease}













.mdock.dock-down{transform:translateY(108%);opacity:0;pointer-events:none;
  position:absolute;left:0;right:0;bottom:0}
.mdock.dock-up{animation:dockrise .26s cubic-bezier(.17,.84,.44,1) both}
@keyframes dockrise{from{transform:translateY(108%);opacity:0}to{transform:none;opacity:1}}
















.mdock .mdk,
.mdock .yun-mini{transition:transform .22s cubic-bezier(.4,0,.2,1),opacity .22s ease}
.mdock.dock-side-down .mdk:not(.home),
.mdock.dock-side-down .yun-mini{transform:translateY(120%);opacity:0;pointer-events:none}
.mdock.dock-side-up .mdk:not(.home),
.mdock.dock-side-up .yun-mini{animation:dockrise .26s cubic-bezier(.17,.84,.44,1) both}
@media (prefers-reduced-motion:reduce){
  .mdock{transition:none}
  .mdock.dock-down{transform:none;opacity:0}
  .mdock.dock-up{animation:none}
  .mdock .mdk,.mdock .yun-mini{transition:none}
  .mdock.dock-side-down .mdk:not(.home),
  .mdock.dock-side-down .yun-mini{transform:none;opacity:0}
  .mdock.dock-side-up .mdk:not(.home),
  .mdock.dock-side-up .yun-mini{animation:none} }

.ydock .ydk-hole{visibility:hidden}


.mdock .mdk-img{max-width:52px}

.mdock .mdk-n{font-size:calc(11px - var(--game-desktop-font-step));line-height:1.2;color:var(--fg);
  text-shadow:0 1px 0 #fff,0 0 4px #fff,0 0 8px #ffffffcc}



.mdock .mdk.home .mdk-img{max-width:72px}
.mdock .mdk.home .mdk-n{font-size:calc(13.5px - var(--game-desktop-font-step));font-weight:700}
















.mdk.on .mdk-img{filter:drop-shadow(0 0 6px var(--seal)) drop-shadow(0 2px 6px #0006)}
.mdk.on .mdk-n{color:var(--seal-deep);font-weight:700}



.storesoon{display:flex;flex-direction:column;align-items:center;gap:10px;padding:34px 18px;text-align:center}
.ss-pic{width:clamp(96px,calc(var(--app-w) * .38),148px);height:auto;opacity:.92;
  filter:drop-shadow(0 6px 18px #2A4A7A33)}
.ss-h{margin:0;font-family:var(--mjo);font-size:calc(15px - var(--game-desktop-font-step));color:var(--fg)}
.ss-s{margin:0;font-size:calc(12px - var(--game-desktop-font-step));color:var(--fg-mid);line-height:1.7}













.mabove{--dkn:5;flex:none;display:flex;align-items:flex-end;justify-content:space-between;
  gap:4px;padding:0 10px;margin-bottom:2px}
.mabove[hidden]{display:none}

.mabove .mab-gy{flex:0 0 calc((100% - (var(--dkn) - 1) * 4px) / var(--dkn))}

.yeojeong{position:relative;z-index:6;flex:0 0 calc((100% - (var(--dkn) - 1) * 4px) / var(--dkn) * 3 + 8px);
  aspect-ratio:3;margin:0;padding:0;border:0;
  background:url(assets/ui/button_yeojeong_anime_v2.webp?v=1) center/100% 100% no-repeat;
  display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;transition:transform .14s}
.yeojeong:active{transform:scale(.97)}
.yeojeong[hidden]{display:none}




.yj-n{margin-left:24%;font-family:var(--mjo);font-weight:700;letter-spacing:.22em;text-indent:.22em;
  font-size:calc(clamp(15px,round(calc(var(--app-w) * .048), 1px),20px) - var(--game-desktop-font-step));
  color:#fff;text-shadow:0 1px 2px #1b4a6a99,0 0 10px #ffffff4d}




.app > .warp-ghost{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;will-change:transform;
  background:url("assets/ui/bg_main_boat_wide_v1.webp?v=1") center/auto 100% no-repeat}
.warp-ghost,.warp-ghost *{animation:none!important;transition:none!important}
.app > .warp-lines{position:absolute;inset:0;z-index:40;width:100%;height:100%}
.app.warping #s-battle{animation:none}





.tg-copy{left:38%}







.tu-bub .tg-bust{display:none}
.tu-bub .tg-copy{left:8%}





#yunPick{justify-content:flex-start;padding:calc(24px + var(--top-gap)) 10px 21px;gap:0}
#yunPick > *{width:100%}



#yunPick .yunguide{flex:1 1 auto;min-height:120px}
#yunPick > .pvbtns{margin-top:auto}

.igcell.lockd{cursor:default}
.igcell.lockd .ig-dia{filter:grayscale(1);opacity:.45}





#s-yun.yun-walking.yun-g{background:none}


.stage:has(#s-yun.on.yun-g)::before{
  display:block;
  background:url("assets/ui/bg_yun_blue_mist_ground_v1.webp?v=1") center/cover no-repeat;
  filter:none}

.app.moonback:has(#s-yun.on.yun-g){background:transparent;box-shadow:none}
.app.moonback:has(#s-yun.on.yun-g)::before{background:none}
.yunmap.yun-grid{background:none;display:flex;flex-direction:column;align-items:stretch;gap:10px;
  padding:calc(12px + var(--top-gap)) 10px 0}
.yunmap.yun-grid.yun-report{background:none}
.yg-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#fffffff2;border:1px solid var(--line);border-radius:9px;padding:7px 10px;color:var(--fg)}
.yg-st{font-family:var(--mjo);font-size:16px;font-weight:800}
.yg-hp{font-weight:800;font-size:14px}
.yg-head .yungive{margin-left:auto}
.yg-view{position:relative;overflow:hidden;
  height:calc(var(--app-h) - var(--top-gap) - 190px);min-height:280px}









.yg-grid{position:absolute;left:0;top:0;display:grid;
  grid-template-columns:repeat(var(--yg-cols,5),76px);grid-auto-rows:76px;
  row-gap:10px;column-gap:19px;
  will-change:left,top,transform;backface-visibility:hidden;
  transition:left .34s cubic-bezier(.22,.61,.36,1),top .34s cubic-bezier(.22,.61,.36,1),transform .22s ease-out}


.yg-links{position:absolute;left:0;top:0;pointer-events:none;z-index:0;overflow:visible}




.yg-link{stroke:#8A96A3B3;stroke-width:5;stroke-linecap:round}
.yg-link.can{stroke:var(--ready,#4dffa0);stroke-width:6}

















.ydk-purse{align-self:stretch;box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  gap:6px;padding:7px 8px;overflow:hidden;
  background:none;border:0;box-shadow:none}
.ycoin{display:flex;align-items:center;gap:5px;white-space:nowrap;
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:calc(12px - var(--game-desktop-font-step));color:var(--fg);
  
  text-shadow:0 1px 2px #FFFFFFCC,0 0 6px #FFFFFFAA}
.ycoin img{width:22px;height:22px;object-fit:contain;flex:none}
.ycoin b{font-weight:400}










#vYunCard.yun-event .yuncardbox{display:flex;flex-direction:column;
  max-height:calc(var(--app-h) - 168px)}
#vYunCard.yun-event .yuncardbox > .gain-mark,
#vYunCard.yun-event #yunWon,
#vYunCard.yun-event #yunCardH,
#vYunCard.yun-event #yunCardSub{flex:0 0 auto}




#vYunCard.yun-event #yunCards{flex:1 1 auto;min-height:0;overflow-y:auto;
  flex-wrap:nowrap;justify-content:flex-start;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#vYunCard.yun-event #yunCards > *{flex:0 0 auto}









#vYunCard.yun-event #yunCards{margin-top:7px}











.yun-purse-float{position:absolute;left:10px;bottom:10px;z-index:3;width:107px;height:84px}
.yun-purse-float:empty{display:none}






.yun-give{position:absolute;right:12px;top:calc(var(--top-gap) + 14px);z-index:12}


.yg-link.was{stroke:#FFFFFFE0;stroke-width:6}
.yg-cell{position:relative;z-index:1;border-radius:12px}



.yg-room{display:grid;place-items:center;border:0;background:none;box-shadow:none}












.yg-tile{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:var(--yg-tile,100%);height:var(--yg-tile,100%);object-fit:contain;
  pointer-events:none;z-index:0;filter:drop-shadow(0 3px 5px #2A4A7A4D)}







.yg-room.blocked .yg-tile{filter:grayscale(1) drop-shadow(0 3px 5px #2A4A7A4D)}
.yg-room.can{cursor:pointer}


.yg-room.can .yg-tile{opacity:1;filter:drop-shadow(0 0 5px var(--ready,#4dffa0)) drop-shadow(0 0 10px #4dffa066)}






@keyframes ygCanBreath{
  0%,100%{filter:drop-shadow(0 0 5px var(--ready,#4dffa0)) drop-shadow(0 0 10px #4dffa066)}
  50%    {filter:drop-shadow(0 0 11px var(--ready,#4dffa0)) drop-shadow(0 0 22px #4dffa0cc)}}
.yg-room.can .yg-tile{animation:ygCanBreath 1.25s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){ .yg-room.can .yg-tile{animation:none} }
.yg-room.can:active{transform:scale(.95)}



.yg-room.here .yg-tile{opacity:1;
  filter:drop-shadow(0 0 7px #19C98F) drop-shadow(0 0 16px #19C98FCC)}



.yg-ic{position:relative;z-index:1;width:52%;height:52%;object-fit:contain;pointer-events:none;
  filter:drop-shadow(0 0 2px #FFFFFF) drop-shadow(0 1px 3px #0B1A2FCC)}

.yg-room.done .yg-ic{filter:grayscale(1) drop-shadow(0 0 2px #FFFFFF) drop-shadow(0 1px 3px #0B1A2FCC)}
.yg-me{position:relative;z-index:2;width:46px;height:46px;border-radius:50%;object-fit:cover;pointer-events:none;
  box-shadow:0 0 0 2px #FFFFFF,0 2px 6px #2A4A7A66}














.app{border-inline-color:transparent}
.app.moonback::before{filter:none}
.app.moonback.mainbg::before{animation:none}








.mdock .mdk-n,
.mabove .mdk-n{
  background:#1D2939B8;color:#fff;border-radius:9px;padding:2px 9px;
  text-shadow:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.mdk.on .mdk-n{background:var(--seal-deep);color:#fff}



.mwing.left .coin{
  background:#1D2939B8;border-radius:9px;padding:2px 9px;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.mwing.left .coin b{color:#fff}
.mwing.left .token-img{width:22px;height:22px;filter:none}







.fxpop{background:#FFFFFFF2;border-color:var(--line);color:var(--fg);text-shadow:none;
  box-shadow:0 0 0 1px #FFFFFF,0 4px 12px -4px #2A4A7A66;font-weight:700}
.fxpop.bad{color:var(--kv-red-ink,#B3362D);border-color:#E9A79F}
.fxpop.good,.fxpop.heal{color:#1E7A4C;border-color:#8FD3AE;text-shadow:none}
.fxpop.ki{color:var(--kv-gold-ink);border-color:#DDB259}
.fxpop.free{color:#1E7A4C;background:#F1FBF5F2;border-color:#5FD8A0;box-shadow:0 0 10px #4FD08A44}
.fxpop.bind{color:var(--kv-red-ink,#B3362D);background:#FFF3F1F2;border-color:#E2574E;box-shadow:0 0 10px #E2574E44}

.cm-n{color:var(--fg);text-shadow:0 0 2px #FFFFFF,0 0 6px #FFFFFFE6,0 0 10px #FFFFFFB3}

.givebtn,.homebtn{background:#FFFFFFE0;border-color:var(--line);color:var(--fg-mid)}

.saybub{color:var(--fg)}
.saybub.foe{--say-bg:#F2F6FC;--say-edge:#748DA8}
.saybub.me{--say-bg:#FFF8EC;--say-edge:#B4935D}

.fieldmsg{background:#FFFFFFF5;color:var(--fg);box-shadow:0 10px 26px -10px #2A4A7A66}

.logpane{background:#FFFFFFF7}
.lg.me{color:#2E6B55} .lg.foe{color:#8A3B2E}

#s-battle{background-color:#C6D9EF}













.formcap{width:max-content;max-width:176px;margin-top:7px;gap:1px;
  padding:4px 10px;border-radius:9px;
  background:#FFFFFFE8;border:1px solid var(--line);
  box-shadow:0 6px 16px -6px #2A4A7A66}
.formcap b{color:var(--fg);text-shadow:none}
.formcap span{color:var(--fg-mid);text-shadow:none}
.formfx.mine .formcap{border-color:#8FD3AE}
.formfx.foe  .formcap{border-color:#E9A79F}
.cast-flight .formcap{width:max-content;max-width:210px}

.rev-lab{background:#FFFFFFE8;border-color:var(--line);color:var(--fg-mid);
  border-radius:9px;text-shadow:none}
.rev-lab.bad{color:var(--kv-red-ink,#B3362D);border-color:#E9A79F}
.rev-lab.good{color:#1E7A4C;border-color:#8FD3AE}



.yg-tok{position:absolute;z-index:3;width:46px;height:46px;border-radius:50%;object-fit:cover;
  pointer-events:none;box-shadow:0 0 0 2px #FFFFFF,0 6px 10px #2A4A7A55;will-change:transform}
.yg-reveal{position:absolute;left:50%;top:50%;width:92%;height:92%;object-fit:contain;
  pointer-events:none;z-index:2;transform:translate(-50%,-50%);opacity:0}
.yg-reveal.rv-fight{animation:ygRvFight .95s ease-out forwards}
.yg-reveal.rv-gi{animation:ygRvGi 1s ease-out forwards}
.yg-reveal.rv-calm{animation:ygRvCalm .8s ease-out forwards}
@keyframes ygRvFight{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}
  30%{opacity:1;transform:translate(-50%,-50%) scale(1.45)}
  42%{transform:translate(calc(-50% - 4px),-50%) scale(1.35)}
  52%{transform:translate(calc(-50% + 4px),-50%) scale(1.35)}
  62%{transform:translate(calc(-50% - 3px),-50%) scale(1.35)}
  75%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.9)}}
@keyframes ygRvGi{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(-90deg) scale(.2)}
  45%{opacity:1;transform:translate(-50%,-50%) rotate(8deg) scale(1.4)}
  70%{opacity:1;transform:translate(-50%,-50%) rotate(0deg) scale(1.3)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}}
@keyframes ygRvCalm{
  0%{opacity:0;transform:translate(-50%,-50%) translateY(10px) scale(.6)}
  45%{opacity:1;transform:translate(-50%,-50%) translateY(-6px) scale(1.25)}
  75%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}}


.yg-room.rv-fight .yg-tile{animation:ygRoomFight .95s ease-out}
.yg-room.rv-gi .yg-tile{animation:ygRoomGi 1s ease-out}
.yg-room.rv-calm .yg-tile{animation:ygRoomCalm .8s ease-out}
@keyframes ygRoomFight{30%{filter:drop-shadow(0 0 9px #E2574E) drop-shadow(0 0 20px #E2574ECC)}}
@keyframes ygRoomGi{45%{filter:drop-shadow(0 0 10px #1AA7E8) drop-shadow(0 0 22px #1AA7E8CC)}}
@keyframes ygRoomCalm{45%{filter:drop-shadow(0 0 8px #DDB259) drop-shadow(0 0 18px #DDB259CC)}}




.app:has(#s-battle.on #mull:not([hidden])) #topbar::after{content:"";position:absolute;inset:0;z-index:30;
  background:#DBD8F0F4;pointer-events:auto}





.mabove .mab-mu{flex:0 0 calc((100% - (var(--dkn) - 1) * 4px) / var(--dkn))}
.mabove .yeojeong{flex-shrink:1;min-width:0}



.mdk-dot,.nudot{background:#e8b45f}





.mwing.left .purse{gap:2px}
.mwing.left .coin{display:flex;align-items:center;box-sizing:border-box;height:34px;margin:3px 0;
  background:#FFFFFFE6;border:1px solid var(--line);box-shadow:0 2px 8px -3px #2A4A7A55}
.mwing.left .coin b{color:var(--fg)}




#s-edit.ed-myeong{padding-top:4px}







#s-main .mtop{display:grid;grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"brand purse" "brand icons";align-items:start;column-gap:10px;row-gap:10px}
#s-main .mtop > .mbrand{grid-area:brand;align-items:center}
#s-main .mtop > .mwing.left{grid-area:purse;align-items:flex-end}
#s-main .mtop > .mwing.right{grid-area:icons}

.mbrand .mhanb{width:auto;max-width:120px}
.mbrand .mig-row{display:none}

.mwing.left .purse{display:flex;flex-wrap:nowrap;gap:0;align-items:stretch;
  background:#FFFFFFE6;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 4px 12px -6px #2A4A7A66;padding:0 2px;max-width:100%}
.mwing.left .coin{height:34px;margin:0;padding:0 8px;background:none;border:0;border-radius:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;min-width:0}
.mwing.left .coin + .coin{border-left:1px solid var(--line)}
.mwing.left .coin b{color:var(--fg);font-variant-numeric:tabular-nums}
.mwing.left .token-img{width:20px;height:20px}

.mwing.right{gap:12px;padding-right:4px;padding-top:4px}
.mwing .mic{position:relative;width:40px;height:40px}
.mwing .mic::before{content:"";position:absolute;inset:5px;transform:rotate(45deg);border-radius:6px;
  background:linear-gradient(135deg,#FFFFFF,var(--kv-lav-soft));border:1px solid var(--line);
  box-shadow:0 0 0 1px #FFFFFF,0 4px 12px -4px #2A4A7A55;pointer-events:none}
.mwing .mic-pic{position:relative;z-index:1;width:24px;height:24px}
.mwing .mic .nudot{z-index:2}


.mabove{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"gy mu" ". yj";
  gap:10px 14px;padding:0 14px;margin-bottom:8px;align-items:stretch}
.mabove .mab-gy,.mabove .mab-mu,.mabove .yeojeong{flex:none;width:auto;min-width:0;margin:0}
.mabove .mab-gy{grid-area:gy}
.mabove .mab-mu{grid-area:mu}
.mabove .yeojeong{grid-area:yj}

.mabove .mab-gy,.mabove .mab-mu{flex-direction:row;align-items:center;justify-content:flex-start;gap:6px;
  height:60px;padding:0 12px 0 8px;border-radius:8px;transform:skewX(-8deg)}
.mabove .mab-gy > *,.mabove .mab-mu > *{transform:skewX(8deg)}
.mabove .mab-gy .mdk-img,.mabove .mab-mu .mdk-img{width:48px;max-width:48px;height:48px;flex:none}
.mab-t{font-family:var(--mjo);font-weight:800;letter-spacing:.14em;text-indent:.14em;
  font-size:calc(19px - var(--game-desktop-font-step));line-height:1}

.mabove .mab-gy{background:linear-gradient(135deg,#6AA8EE,#2F6BC9);border:1px solid #FFFFFFAA;
  box-shadow:0 8px 18px -8px #2F6BC9CC,inset 0 1px 0 #FFFFFF66}
.mabove .mab-gy .mab-t{color:#fff;text-shadow:0 1px 2px #1B3F7A88}

.mabove .mab-mu{background:#FFFFFFF2;border:1px solid var(--line);
  box-shadow:0 8px 18px -10px #2A4A7A88}
.mabove .mab-mu .mab-t{color:var(--fg)}

.mabove .yeojeong{height:64px;aspect-ratio:auto;border-radius:8px;transform:skewX(-8deg);
  background:linear-gradient(135deg,#FFF6E8F2,#FFE0B0EE);border:2px solid #E8A23A;
  box-shadow:0 8px 20px -8px #E8A23ACC,inset 0 1px 0 #FFFFFFAA}
.mabove .yeojeong:active{transform:skewX(-8deg) scale(.97)}
.mabove .yeojeong .yj-n{margin-left:0;transform:skewX(8deg);color:#B5600C;text-shadow:0 1px 0 #FFFFFFAA;
  font-size:calc(24px - var(--game-desktop-font-step))}





.mdock .mdk.home .mdk-img{max-width:52px}
.mdock .mdk.home .mdk-n{font-size:calc(11px - var(--game-desktop-font-step))}





#s-yun.yun-g #yunMap.yun-report{min-height:var(--app-h);background:none}

.yg-view{touch-action:none;cursor:grab}
.yg-view:active{cursor:grabbing}






#s-main .mtop > .mwing.left{align-items:stretch}
.mwing.left .purse{width:100%;padding:0 6px}
.mwing.left .coin{flex:1 1 0;justify-content:space-between;gap:10px;height:40px;padding:0 10px}
.mwing.left .coin b{font-size:calc(15px - var(--game-desktop-font-step))}
.mwing.left .token-img{width:24px;height:24px}

.mabove{grid-template-columns:1fr 1fr;grid-template-areas:"gy mu" "yj yj";gap:12px 14px;padding:0 12px}
.mabove .mab-gy,.mabove .mab-mu{height:calc(var(--app-w) * .25);padding:0 14px 0 10px;gap:10px}
.mabove .mab-gy .mdk-img,.mabove .mab-mu .mdk-img{width:calc(var(--app-w) * .18);max-width:none;height:calc(var(--app-w) * .18)}
.mab-t{font-size:calc(var(--app-w) * .062);letter-spacing:.1em;text-indent:.1em}
.mabove .yeojeong{justify-self:end;width:calc(var(--app-w) * .56);height:calc(var(--app-w) * .26)}
.mabove .yeojeong .yj-n{font-size:calc(var(--app-w) * .08);letter-spacing:.18em;text-indent:.18em}

#s-main .mtop{grid-template-areas:"purse purse" "brand icons"}

.mabove .mab-gy{justify-self:start;width:calc(var(--app-w) * .42)}
.mabove .mab-mu{justify-self:end;width:calc(var(--app-w) * .42)}



#s-main .mtop{grid-template-areas:"brand purse" "brand icons"}
.mwing.left .purse{padding:0 2px}
.mwing.left .coin{gap:4px;padding:0 6px}
.mwing.left .coin b{font-size:calc(14px - var(--game-desktop-font-step))}
.mwing.left .token-img{width:20px;height:20px}




#s-yun #yunMap.yun-report{min-height:var(--app-h);background:none}
#s-yun.yun-walking:has(#yunMap.yun-report){overflow:hidden;background:none}




:root{--m-w:min(var(--app-w),430px)}
.mabove .mab-gy,.mabove .mab-mu{height:calc(var(--m-w) * .25);width:calc(var(--m-w) * .42)}
.mabove .mab-gy .mdk-img,.mabove .mab-mu .mdk-img{width:calc(var(--m-w) * .18);height:calc(var(--m-w) * .18)}
.mab-t{font-size:calc(var(--m-w) * .062)}
.mabove .yeojeong{width:calc(var(--m-w) * .56);height:calc(var(--m-w) * .26)}
.mabove .yeojeong .yj-n{font-size:calc(var(--m-w) * .08)}











.mchar{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  

  --mch-w:calc(var(--app-w) * .95);    
  --mch-h:calc(var(--mch-w) * 1.4615); 
  --mch-hx:.46;  --mch-hy:.18;         
  
  --mch-tx:calc(var(--app-w) * .5);
  --mch-ty:211px}





.mwing.left .coin{justify-content:flex-start;gap:6px}






























.mwing.left{--purse-pad:7px}
.mwing.left .purse{display:flex;width:fit-content;margin-left:auto;padding:0}
.mwing.left .coin{flex:none;height:24px;margin:2px 0;padding:0 var(--purse-pad)}
.mwing.left .token-img{width:17px;height:17px}


.mwing.left .coin b{text-align:left;font-size:calc(min(var(--app-w),430px) * .032)}
.mwing.left .coin + .coin{border-left:0}








.mwing.left .coin + .coin::before{content:"/";flex:none;
  margin:0 calc(var(--purse-pad) - 6px) 0 calc(-1 * var(--purse-pad));
  color:var(--fg-faint);font-weight:400;opacity:.8}

.mchar > img{position:absolute;width:var(--mch-w);height:var(--mch-h);
  left:calc(var(--mch-tx) - var(--mch-w) * var(--mch-hx));
  top:calc(var(--mch-ty) - var(--mch-h) * var(--mch-hy));
  object-fit:contain;user-select:none;-webkit-user-drag:none;
  


  -webkit-mask-image:linear-gradient(180deg,#000 0 58%,#000c 76%,transparent 96%);
  mask-image:linear-gradient(180deg,#000 0 58%,#000c 76%,transparent 96%)}

.app:not(.mainbg) .mchar{display:none}




















#s-shop{gap:8px;padding-bottom:12px}
#s-shop .pkcover{flex-basis:min(78%,150px,calc((var(--app-h) - 486px) / 1.747))}
#s-shop .pkrail{padding:9px 0}














.mabove{--mw:min(var(--app-w),430px);
  display:block;position:relative;height:calc(var(--mw) * .64);
  padding:0;margin-bottom:4px;overflow:visible}
.mabove .mab-gy,.mabove .mab-mu,.mabove .yeojeong{
  position:absolute;flex:none;width:var(--d);height:var(--d);min-width:0;aspect-ratio:auto;
  margin:0;padding:0;border:0;background:none;box-shadow:none;border-radius:0;
  transform:translate(-50%,-50%);transition:transform .12s ease}
































.mabove .mab-gy{--d:calc(var(--mw) * .256);left:63.5%;top:18%}
.mabove .mab-mu{--d:calc(var(--mw) * .256);left:63%;top:82%}
.mabove .yeojeong{--d:calc(var(--mw) * .416);left:81%;top:50%;z-index:2}




.mabove .mab-gy > *,.mabove .mab-mu > *,.mabove .yeojeong > *{transform:none}
.mabove .mab-gy .mdk-img,.mabove .mab-mu .mdk-img,.mabove .yeojeong .mdk-img{
  position:absolute;left:0;top:0;width:100%;max-width:none;height:100%;
  filter:drop-shadow(0 6px 14px #2A4A7A55)}



.mabove .mab-t,.mabove .yj-n{display:none}

.mabove .mab-gy:active,.mabove .mab-mu:active,.mabove .yeojeong:active{
  transform:translate(-50%,-50%) scale(.95)}
.mabove .mab-gy:active .mdk-img,.mabove .mab-mu:active .mdk-img,.mabove .yeojeong:active .mdk-img{
  filter:drop-shadow(0 2px 6px #2A4A7A55)}
@media (hover:hover) and (pointer:fine){
  .mabove .mab-gy:hover .mdk-img,.mabove .mab-mu:hover .mdk-img,.mabove .yeojeong:hover .mdk-img{
    filter:drop-shadow(0 6px 14px #2A4A7A55) brightness(1.06)}}

.mabove .mab-gy .mdk-dot{position:absolute;right:-2%;top:40%;z-index:2}


.yg-room.reach{cursor:pointer}






.pip{width:15px;height:15px;border-radius:50%;flex:none;background:none;box-shadow:none}
.pip.f,#foePips .pip.f{background:url(assets/ui/battle_qi_filled_v2.webp?v=1) center/contain no-repeat;
  box-shadow:0 0 6px #2fbf8a88}
.pip.b{background:url(assets/ui/battle_qi_bonus_v2.webp?v=1) center/contain no-repeat;box-shadow:0 0 6px #e8b93a99}
.pip.e{background:url(assets/ui/battle_qi_filled_v2.webp?v=1) center/contain no-repeat;
  filter:grayscale(1) brightness(.92);opacity:.55}
.pip.x{background:none;box-shadow:inset 0 0 0 1px var(--line)}
@keyframes pipin{0%{transform:scale(.7);opacity:.55;filter:grayscale(1) brightness(.92)}
  55%{transform:scale(1.22);opacity:1;filter:grayscale(0) brightness(1.25)}
  100%{transform:scale(1);opacity:1;filter:none}}
.pip.new{animation:pipin .55s cubic-bezier(.3,1.35,.5,1) backwards}
@keyframes pipgone{0%{transform:scale(1);opacity:1;filter:none}
  40%{transform:scale(1.12);opacity:1;filter:brightness(1.3)}
  100%{transform:scale(1);opacity:.55;filter:grayscale(1) brightness(.92)}}
.pip.e.gone{animation:pipgone .6s ease-out backwards}
@media (prefers-reduced-motion:reduce){.pip.new,.pip.e.gone{animation:none}}




.pip.x{background:url(assets/ui/battle_qi_filled_v2.webp?v=1) center/contain no-repeat;box-shadow:none;
  filter:grayscale(1) brightness(.92);opacity:.55}

















.jeonsu{position:absolute;inset:0;z-index:70;overflow:hidden;pointer-events:none;
  background:#0B0F16;will-change:background-color}

.jeonsu-card{position:absolute;left:50%;top:50%;
  width:min(calc(var(--app-w) * .40),168px);
  transform:translate(-50%,-50%);will-change:transform,opacity,filter}
.jeonsu-card .card{width:100%}
.jeonsu-card.base{z-index:10}
.jeonsu-card.mat{z-index:20}











.jeonsu-lv{position:absolute;left:50%;top:50%;z-index:25;
  transform:translate(-50%,-50%);pointer-events:none;overflow:visible}
.jeonsu-lv b{position:absolute;display:block;opacity:0;border-radius:50%;
  background:radial-gradient(circle,#FFFFFF 0%,#D8F2FF 28%,#1AA7E8 58%,transparent 78%);
  animation:jeonsuKi var(--ms) ease-out var(--d) forwards}
.jeonsu-lv b.streak{border-radius:50%/30%;
  background:radial-gradient(ellipse at center,#FFFFFF 0%,#BFE9FF 26%,#1AA7E8 56%,transparent 78%)}
@keyframes jeonsuKi{
  0%  {opacity:0;transform:translateY(0) scale(.45)}
  16% {opacity:1}
  100%{opacity:0;transform:translateY(calc(var(--up) * -1)) scale(.16)}}




@keyframes jeonsuGang{
  0%  {filter:drop-shadow(0 0 0 #E8C879)}
  45% {filter:drop-shadow(0 0 10px #E8C879) drop-shadow(0 0 22px #1AA7E8AA)}
  100%{filter:drop-shadow(0 0 6px #E8C879CC) drop-shadow(0 0 14px #1AA7E866)}}
.jeonsu-card.gang{animation:jeonsuGang 1.4s ease-out forwards}

.jeonsu-pop{position:absolute;left:50%;top:50%;z-index:30;
  transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;
  pointer-events:none;will-change:transform,opacity}
.jeonsu-pop b{display:block;padding:4px 11px;border-radius:9px;white-space:nowrap;
  background:#FFFFFFF2;border:1px solid #8FD3AE;color:#1E7A4C;
  font-family:var(--sans);font-weight:700;
  font-size:calc(14px - var(--game-desktop-font-step));
  box-shadow:0 0 0 1px #FFFFFF,0 4px 12px -4px #2A4A7A66}

.jeonsu-say{position:absolute;left:16px;right:16px;bottom:calc(16px + var(--bot-gap));z-index:30;
  text-align:center;padding:9px 12px;border-radius:10px;
  background:var(--kv-glass,#FFFFFFE0);border:1px solid var(--line);color:var(--fg);
  font-size:calc(13px - var(--game-desktop-font-step));line-height:1.6;
  box-shadow:var(--kv-shadow);opacity:0;will-change:opacity}





.yunmix-done{position:relative;flex:0 0 auto;width:min(calc(var(--app-w) * .42),150px)}
.yunmix-done .card{width:100%;transform:scale(1.08);transform-origin:center}




.yunmix-done .uplus{left:auto;right:-44px;top:50%}

@keyframes uplusBeat{
  0%,100%{box-shadow:0 2px 6px -2px #2A4A7A66,0 0 0 0 #1AA7E800}
  55%    {box-shadow:0 2px 6px -2px #2A4A7A66,0 0 0 7px #1AA7E81F}}
.yunmix-done .uplus{animation:uplusBeat 1.6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){ .yunmix-done .uplus{animation:none} }

#vYunCard.yun-mix #yunCardH{color:var(--kv-gold-ink,#8F6106)}


#vInfo .vfoot{padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
#vInfo .vclose{background:var(--kv-on);border:1px solid #0A6BA8;border-radius:var(--r-s);color:#fff;
  font-family:var(--serif)}
#vInfo .vclose:hover{color:#fff;filter:brightness(1.06)}




#vPool .vfoot{padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
#vPool .vclose{background:var(--kv-on);border:1px solid #0A6BA8;border-radius:var(--r-s);color:#fff;
  font-family:var(--serif)}
#vPool .vclose:hover{color:#fff;filter:brightness(1.06)}


.yg-alert{position:absolute;z-index:4;left:50%;top:1%;width:82%;height:82%;
  object-fit:contain;pointer-events:none;transform:translate(-50%,-50%);opacity:0;
  filter:drop-shadow(0 2px 4px #16253780)}
.app > .yg-iris{position:absolute;inset:0;z-index:60;overflow:hidden;pointer-events:auto}


.app > .yg-iris.go-away{pointer-events:none}
.yg-iris-core{position:absolute;left:50%;top:50%;width:100px;height:100px;
  transform:translate(-50%,-50%) scale(.38);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  background:#171717;will-change:transform}
.yg-iris-core img{display:block;width:100%;height:100%;object-fit:contain}
.yg-iris-ink{position:absolute;inset:0;background:#171717;opacity:0;will-change:opacity}


#s-prof .igsay,#s-prof .linkb.quit,#s-prof .docrow .linkb{
  background:#FFFFFFC7;border:1px solid var(--line-soft);border-radius:999px;
  box-shadow:var(--kv-shadow);color:var(--fg-mid);text-shadow:none;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
#s-prof .igsay{padding:9px 14px;min-height:0}
#s-prof .linkb.quit{align-self:center;padding:8px 18px;min-height:34px}
#s-prof .docrow{gap:7px 8px}
#s-prof .docrow .linkb{padding:8px 12px;white-space:nowrap}
#s-prof .docrow .linkb + .linkb::before{content:none}


.app #s-pvp #pvGo:disabled{
  opacity:1;filter:grayscale(1);background:#E5E8EC;border-color:#858D97;
  color:#35404A;box-shadow:none;text-shadow:none}


#s-help .screen-close,#s-mail .screen-close{
  flex:none;width:100%;min-height:42px;margin-top:auto;
  background:var(--kv-on);border:1px solid #0A6BA8;border-radius:var(--r-s);
  color:#fff;font-family:var(--serif);cursor:pointer}
#s-help .screen-close:hover,#s-mail .screen-close:hover{color:#fff;filter:brightness(1.06)}


.formcap,.cast-flight .formcap{
  width:max-content;max-width:calc(min(310px, var(--app-w) - 28px) * var(--fxk));
  padding:7px 12px;gap:0;box-sizing:border-box}
.formcap span,.cast-flight .formcap span{
  font-size:calc(12.5px - var(--game-desktop-font-step));line-height:1.4;
  word-break:keep-all;overflow-wrap:break-word}


.yun-mini{position:absolute;right:12px;bottom:10px;z-index:11;box-sizing:border-box;
  width:118px;padding:4px;border:1px solid #B7C9D8;border-radius:9px;
  background:#18263BE0;box-shadow:0 4px 14px #18263B66;pointer-events:none}
.yun-mini[hidden]{display:none}







.yun-mini svg{display:block;width:100%;height:auto;max-height:188px;overflow:visible}
.ym-link{stroke:#73879D;stroke-width:2;stroke-linecap:round}
.ym-link.was{stroke:#DCEAF0;stroke-width:2.6}
.ym-room{fill:#273A51;stroke:#A8BBC9;stroke-width:1.8}
.ym-room.was{fill:#D5E3EA;stroke:#EEF7FA}
.ym-start{fill:#E8F3FA;stroke:#23445A;stroke-width:1.5}
.ym-end{fill:#EBC56D;stroke:#FFF4D6;stroke-width:1.9}
.ym-here-halo{fill:#3FDCB944;stroke:#74F6D6;stroke-width:2.2}
.ym-here{fill:#48E7C0;stroke:#FFFFFF;stroke-width:2.8}


#s-help,#s-mail{overflow:hidden;padding-bottom:0}
#s-mail{gap:0}
#s-help .hpbody,#s-mail .mllist{flex:1 1 auto;min-height:0;overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#s-help .screen-foot,#s-mail .screen-foot{
  flex:none;margin:0 -16px;padding:8px 12px calc(8px + var(--bot-gap));
  background:var(--panel);border-top:1px solid var(--line-soft)}
#s-help .screen-foot .screen-close,#s-mail .screen-foot .screen-close{
  flex:1;width:100%;min-height:38px;margin:0}




#yDock .yun-mini{right:10px;bottom:calc(10px + var(--bot-gap));z-index:7;
  width:calc((100% - (var(--dkn) - 1) * 4px) / var(--dkn) * 2 - 6px);
  padding:4px;background:#FFFFFFE8;border-color:#AEC6D9;
  box-shadow:0 3px 12px #55799C42;backdrop-filter:blur(5px)}
#yDock .ym-link{stroke:#9BB7C9}
#yDock .ym-link.was{stroke:#5E91AE}
#yDock .ym-room{fill:#E9F2F8;stroke:#88A9BF}
#yDock .ym-room.was{fill:#91B8D0;stroke:#5C8EAC}
#yDock .ym-start{fill:#FFFFFF;stroke:#5B809C}
#yDock .ym-end{fill:#E5B74E;stroke:#A77720}
#yDock .ym-here-halo{fill:#57DAC077;stroke:#3BBCA3}
#yDock .ym-here{fill:#26B99F;stroke:#FFFFFF}

.mabove .yeojeong{pointer-events:none}
.mabove .yeojeong::after{content:"";position:absolute;inset:0;
  clip-path:polygon(50% 3%,97% 50%,50% 97%,3% 50%);pointer-events:auto}