*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#0d0710;color:#f3e9d2;font-family:-apple-system,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;touch-action:none}
button,input,select{font:inherit;color:inherit}
#cv{position:fixed;inset:0;width:100%;height:100%;display:block}
.hide{display:none!important}
button{background:#3a2a4a;border:1px solid #6b5280;border-radius:10px;padding:9px 12px;cursor:pointer;touch-action:manipulation}
button:active{filter:brightness(1.25)}
button:disabled{opacity:.45}
button.pri{background:#b8860b;border-color:#e6b422;color:#fff;font-weight:700}
button.red{background:#8a1c2a;border-color:#c0394d}
button.grn{background:#1f6b3a;border-color:#38a463}
input,select{background:#1b1224;border:1px solid #5a4670;border-radius:10px;padding:9px 11px;width:100%;outline:none}
input:focus,select:focus{border-color:#e6b422}

#hud{position:fixed;top:0;left:0;right:0;padding:calc(env(safe-area-inset-top) + 6px) 8px 6px;display:flex;gap:6px;align-items:center;pointer-events:none;z-index:5}
#hud>*{pointer-events:auto}
#me{max-width:430px;background:#000a;border:1px solid #6b5280;border-radius:12px;padding:6px 10px;font-size:14px;line-height:1.25;flex:1;min-width:0}
#me b{color:#ffd76a}
#me small{color:#b9a6d0}
.ibtn{padding:8px 10px;font-size:16px}
#duBar{position:fixed;top:calc(env(safe-area-inset-top) + 58px);left:50%;transform:translateX(-50%);background:#3b2a00ee;border:1px solid #e6b422;border-radius:12px;padding:8px 10px;z-index:6;display:flex;gap:8px;align-items:center;font-size:13px;max-width:96vw}
#feed{position:fixed;top:calc(env(safe-area-inset-top) + 56px);left:8px;right:8px;z-index:4;pointer-events:none;display:flex;flex-direction:column;gap:3px;align-items:flex-start}
#duBar:not(.hide)~#feed{top:calc(env(safe-area-inset-top) + 108px)}
#feed div{background:#000b;border-radius:8px;padding:4px 9px;font-size:12px;max-width:92vw;animation:fade 14s forwards}
@keyframes fade{0%,85%{opacity:1}100%{opacity:0}}
#toast{position:fixed;left:50%;bottom:150px;transform:translateX(-50%);background:#000d;border:1px solid #e6b422;border-radius:12px;padding:9px 14px;z-index:30;max-width:90vw;font-size:14px;text-align:center}
#act{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 70px);transform:translateX(-50%);z-index:6;font-size:16px;padding:12px 20px;box-shadow:0 0 18px #e6b42277}
#chatbox{position:fixed;left:8px;bottom:calc(env(safe-area-inset-bottom) + 8px);width:min(300px,60vw);z-index:6}
#chatlog{max-height:96px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;font-size:12px;margin-bottom:4px;pointer-events:none}
#chatlog div{background:#0009;border-radius:6px;padding:2px 7px;margin-top:2px;width:fit-content;max-width:100%;word-break:break-all}
#chatlog b{color:#ffd76a}
#chatin{padding:7px 10px;font-size:13px;background:#1b1224cc}

.modal{position:fixed;inset:0;background:#000b;z-index:20;display:flex;align-items:center;justify-content:center;padding:10px}
.card-box{background:#1a1122;border:1px solid #8a6fb0;border-radius:16px;width:min(460px,100%);max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);overflow:auto;padding:14px;touch-action:pan-y}
.card-box h2{margin:0 0 8px;font-size:18px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.row{display:flex;gap:8px;margin:8px 0;flex-wrap:wrap}
.row>*{flex:1;min-width:70px}
.chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.chips button{padding:6px 9px;font-size:12px;flex:none}
.res{background:#0f0a15;border:1px solid #4a3a60;border-radius:12px;padding:10px;margin-top:10px;font-size:14px;line-height:1.55}
.res .t{font-weight:700;color:#ffd76a;margin-bottom:4px}
.dim{color:#a995c0;font-size:12px}
.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.cell{background:#241833;border-radius:8px;text-align:center;font-size:26px;padding:6px 0;min-height:44px}
.spin .cell{animation:bl .12s infinite alternate}
@keyframes bl{from{opacity:.55}to{opacity:1}}
.mine{padding:12px 0;font-size:18px}
.mine.safe{background:#1f6b3a}
.mine.bomb{background:#8a1c2a}
.card{display:inline-block;background:#fff;color:#111;border-radius:6px;padding:5px 7px;margin:2px;font-weight:700;font-size:16px;min-width:38px;text-align:center}
.card.red{color:#c0192b}
.card.back{background:#5a3a8a;color:#fff}
.hist{display:flex;gap:3px;flex-wrap:wrap;margin:6px 0}
.hist span{width:22px;height:22px;border-radius:50%;font-size:12px;display:flex;align-items:center;justify-content:center;font-weight:700}
.hP{background:#2a64c8}.hB{background:#c0394d}.hT{background:#2a9a54}
table{width:100%;border-collapse:collapse;font-size:13px}
td,th{padding:4px 5px;border-bottom:1px solid #3a2a4a;text-align:left}
#auth{z-index:40;background:radial-gradient(circle at 50% 30%,#3a1038,#0d0710)}
#auth h1{text-align:center;margin:0 0 4px;color:#ffd76a;letter-spacing:2px}
.tabs{display:flex;gap:6px;margin:10px 0}
.tabs button{flex:1}
.tabs button.on{background:#b8860b;border-color:#e6b422}
.err{color:#ff7b8a;min-height:20px;font-size:13px;margin-top:6px}
.tomb{font-size:30px;text-align:center}
.dsp{width:40px;height:44px;margin:34px auto 14px;background:url(human.png) -178px -146px no-repeat;transform:scale(3);transform-origin:center}
.pl{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:6px 0;border-bottom:1px solid #3a2a4a}
.pl span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#conn{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:50;background:#000d;padding:14px 20px;border-radius:12px;border:1px solid #e6b422}

.skgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-height:230px;overflow:auto;padding:2px}
.sk{background:#241833;border:2px solid transparent;border-radius:10px;padding:4px 2px;text-align:center;font-size:11px;line-height:1.25;cursor:pointer;color:#f3e9d2;position:relative}
.sk img{height:58px;max-width:100%;object-fit:contain;display:block;margin:0 auto 2px}
.sk small{display:block;color:#a995c0;font-size:9px}
.sk.on{border-color:#ffd76a;background:#3b2a00}
.sk.lock img{filter:grayscale(1) brightness(.45)}
.sk.lock::after{content:"🔒";position:absolute;top:2px;right:4px;font-size:11px}
.sk.worn::before{content:"착용 중";position:absolute;top:2px;left:3px;background:#b8860b;color:#fff;border-radius:6px;padding:0 4px;font-size:9px}

.gift{background:#3b2a00;border:1px solid #e6b422;border-radius:10px;padding:8px 10px;font-size:12px;margin:6px 0;line-height:1.45}
.skprev{border:2px solid #6b5280;border-radius:16px;background:radial-gradient(circle at 50% 35%,#3b2a58,#190f24);height:200px;width:62%;margin:8px auto;display:flex;align-items:center;justify-content:center;overflow:hidden}
.skprev img{height:158px;max-width:92%;object-fit:contain;animation:skfloat 2.2s ease-in-out infinite}
@keyframes skfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.spname{text-align:center;font-size:14px;margin-top:2px}
.spnav{display:flex;justify-content:center;align-items:center;gap:14px;margin:4px 0 8px}
.spnav button{padding:5px 14px}
.skgrid5{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;max-height:260px;overflow:auto;padding:2px}
.sk5{background:#241833;border:2px solid #3b2a58;border-radius:10px;padding:3px;min-height:68px;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;text-align:center;font-size:11px;line-height:1.3;color:#f3e9d2}
.sk5 img{height:60px;max-width:100%;object-fit:contain;display:block}
.sk5.on{border-color:#ffd76a;box-shadow:0 0 8px #ffd76a66;background:#3b2a00}
.sk5.lock img{filter:grayscale(1) brightness(.4)}
.sk5.lock::after{content:"🔒";position:absolute;top:1px;right:3px;font-size:11px}
.sk5.base{font-weight:700;color:#ffd76a}

.svact{position:absolute;right:16px;bottom:calc(env(safe-area-inset-bottom) + 26px);width:86px;height:86px;border-radius:50%;z-index:3;border:3px solid #6b5280;background:conic-gradient(#000c var(--cd,0%),#3a2a4a 0);font-size:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;touch-action:none;padding:0;line-height:1.1}
.svact small{font-size:10px;color:#cfc2e6}
.svact.ready{border-color:#ffd76a;box-shadow:0 0 16px #ffd76a99}
.svlayer{position:absolute;inset:0;background:#000b;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:5;padding:12px;overflow:auto}
.svct{font-size:20px;font-weight:700;color:#ffd76a;margin-bottom:12px;text-align:center}
.svcrow{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:720px}
.svcard{width:200px;max-width:92vw;background:#1a1122;border:2px solid #6b5280;border-radius:14px;padding:12px 10px;text-align:center;color:#f3e9d2}
.svcard:active{filter:brightness(1.3)}
.svcard.fus{border-color:#ffd76a;background:#3b2a00;box-shadow:0 0 18px #ffd76a88}
.svcard .ci{font-size:34px}.svcard .cn{font-weight:700;margin:4px 0}.svcard .cl{font-size:11px;color:#ffd76a}.svcard .cd{font-size:12px;color:#cfc2e6;margin-top:4px;line-height:1.4}
.svendbox{background:#1a1122;border:2px solid #8a6fb0;border-radius:16px;padding:18px;text-align:center;min-width:260px;max-width:92vw}
.svbig{font-size:22px;font-weight:700;color:#ffd76a;margin-bottom:6px}
.svscore{font-size:38px;font-weight:700;margin:6px 0;color:#fff}.svscore small{font-size:14px;color:#cfc2e6}
.svheroes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.svhero{background:#241833;border:2px solid #3b2a58;border-radius:12px;padding:10px 4px;text-align:center;line-height:1.35;color:#f3e9d2}
.svhero .hi{font-size:34px}.svhero b{display:block;margin:2px 0}.svhero.on{border-color:#ffd76a;background:#3b2a00;box-shadow:0 0 12px #ffd76a77}

.clsrow{display:block;width:100%;text-align:left;margin:5px 0;padding:8px 10px;background:#241833;border:2px solid #3b2a58;border-radius:10px;line-height:1.4;color:#f3e9d2}
.clsrow small{display:block;color:#a995c0;font-size:11px;margin-top:2px;font-weight:400}
.clsrow.on{border-color:#ffd76a;background:#3b2a00}.clsrow.lock{opacity:.5}

#me .lvb{background:#b8860b;color:#fff;border-radius:6px;padding:0 6px;font-size:12px}
.bar{position:relative;height:15px;background:#000a;border:1px solid #6b5280;border-radius:8px;margin:3px 0;overflow:hidden}
.bar i{position:absolute;left:0;top:0;bottom:0}.bar.hp i{background:linear-gradient(#e0405a,#a01830)}.bar.xp i{background:linear-gradient(#4fb0ff,#2a6ad0)}
.bar span{position:relative;display:block;text-align:center;font-size:10px;line-height:13px;color:#fff;text-shadow:0 0 3px #000}
#skbar{position:fixed;left:8px;bottom:calc(env(safe-area-inset-bottom) + 8px);z-index:6;display:flex;gap:6px;align-items:flex-end}
#skSlots{display:grid;grid-template-columns:repeat(3,44px);gap:4px}
.skbtn{position:relative;width:44px;height:44px;border-radius:10px;padding:0;font-size:20px;background:conic-gradient(#000c var(--cd,0%),#3a2a4a 0);border:2px solid #6b5280;display:flex;align-items:center;justify-content:center;touch-action:none}
.skbtn.big{width:70px;height:70px;border-radius:50%;font-size:30px}.skbtn.rdy{border-color:#ffd76a}
.skbtn small{position:absolute;right:3px;bottom:0;font-size:9px;color:#cfc2e6}.skbtn i{display:none}
.skcfg{width:30px;height:30px;padding:0;border-radius:50%;align-self:flex-start;font-size:14px}
#partyhud{position:fixed;left:8px;top:calc(env(safe-area-inset-top) + 128px);z-index:5;background:#000a;border:1px solid #3a8a5a;border-radius:10px;padding:5px 9px;font-size:12px;line-height:1.5;pointer-events:none}
#chatbox{left:auto!important;right:8px;width:min(190px,44vw)!important;bottom:calc(env(safe-area-inset-bottom) + 8px)!important}
#act{bottom:calc(env(safe-area-inset-bottom) + 96px)!important}

#skbar{right:8px!important;left:auto!important;flex-direction:row-reverse}
#chatbox{left:8px!important;right:auto!important;top:calc(env(safe-area-inset-top) + 150px)!important;bottom:auto!important;width:min(200px,46vw)!important}
#partyhud{top:calc(env(safe-area-inset-top) + 100px)!important}
#joy{position:fixed;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;border:2px solid rgba(255,255,255,.4);background:rgba(255,255,255,.12);z-index:7;pointer-events:none;display:none}
#joy i{position:absolute;left:50%;top:50%;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.5);box-shadow:0 0 10px #fff8;transform:translate(-50%,-50%)}
#zonetag{position:fixed;top:calc(env(safe-area-inset-top) + 92px);left:50%;transform:translateX(-50%);z-index:8;background:#000b;border:1px solid #e6b422;color:#ffe9a0;padding:6px 16px;border-radius:20px;font-weight:700;pointer-events:none;opacity:0}
@keyframes zonefade{0%{opacity:0;transform:translateX(-50%) translateY(-8px)}12%{opacity:1;transform:translateX(-50%)}80%{opacity:1}100%{opacity:0}}
.cgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.cgame{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px;border-radius:14px;background:linear-gradient(#4a1030,#2a0a1c);border:2px solid #c9a43a;color:#ffe9b0;box-shadow:inset 0 0 14px #ff2a8a33}
.cgame .ci{font-size:30px}.cgame small{color:#cfa;font-size:11px}
.backbtn{display:block;margin:0 0 6px;padding:5px 10px;font-size:12px}
.eqrow{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:6px 0}
.eqslot{background:#241833;border:2px solid #3b2a58;border-radius:10px;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;color:#8a7aa0}
.eqslot.on{border-color:#ffd76a;background:#3b2a00}.eqslot img{height:32px;image-rendering:pixelated}

/* ---- 슬롯 ---- */
.slotbox{position:relative;margin:8px auto;padding:10px 10px 6px;max-width:330px;background:linear-gradient(#7a1030,#3a0a20);border:4px solid #e6b422;border-radius:18px;box-shadow:0 0 18px #ff2a8a66,inset 0 0 18px #0008;overflow:hidden}
.slotbox.winbox{animation:winpulse .5s 4}.slotbox.bigwin{animation:winpulse .25s 10}
@keyframes winpulse{0%,100%{box-shadow:0 0 18px #ff2a8a66,inset 0 0 18px #0008}50%{box-shadow:0 0 36px #ffe27a,inset 0 0 30px #ffe27a88}}
.slotlights{display:flex;justify-content:space-between;padding:0 4px}.slotlights i{width:8px;height:8px;border-radius:50%;background:#ffd76a;box-shadow:0 0 6px #ffd76a;animation:blink 1s infinite}.slotlights i:nth-child(odd){animation-delay:.5s}
@keyframes blink{50%{opacity:.25}}
.slotmarq{text-align:center;font-weight:900;letter-spacing:3px;color:#ffe9a0;text-shadow:0 0 8px #ff2a8a;margin:4px 0}
.reels{position:relative;display:flex;gap:4px;justify-content:center;background:#05050a;padding:6px;border-radius:10px;border:2px solid #000}
.reel{width:52px;height:144px;overflow:hidden;background:linear-gradient(#cfcfd8,#fff 18%,#fff 82%,#cfcfd8);border-radius:6px;position:relative;box-shadow:inset 0 0 8px #0006}
.strip{position:absolute;left:0;top:0;width:100%;will-change:transform}
.sym{height:48px;display:flex;align-items:center;justify-content:center;font-size:30px}
.payline{position:absolute;left:4px;right:4px;top:50%;height:2px;margin-top:-1px;background:#ff2a4acc;box-shadow:0 0 6px #ff2a4a;pointer-events:none}
.slotbase{height:10px;margin-top:6px;border-radius:6px;background:linear-gradient(#e6b422,#8a6a10)}
.confetti{position:absolute;bottom:20%;animation:rise 1.8s ease-out forwards;pointer-events:none;z-index:5}
@keyframes rise{0%{transform:translate(0,0) scale(.6);opacity:1}100%{transform:translate(var(--dx),-170px) scale(1.2) rotate(180deg);opacity:0}}
/* ---- 동전 던지기 ---- */
.coinbox{position:relative;height:190px;display:flex;align-items:flex-end;justify-content:center;margin:6px 0;background:radial-gradient(#3a2a58,#150d22);border-radius:14px;overflow:hidden;border:2px solid #6b5280}
.coin{position:absolute;bottom:34px;width:76px;height:76px;transform-style:preserve-3d;perspective:400px}
.cf{position:absolute;inset:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:900;color:#6a4a00;background:radial-gradient(circle at 35% 30%,#fff3b0,#e6b422 55%,#a87a10);border:4px solid #8a6a10;box-shadow:0 0 14px #ffd76a88;backface-visibility:hidden}
.cf.back{transform:rotateX(180deg)}
.coin.toss{animation:tossup 1.7s cubic-bezier(.3,.7,.4,1) forwards}
@keyframes tossup{0%{bottom:34px;transform:rotateX(0) scale(1)}45%{bottom:150px;transform:rotateX(1080deg) scale(1.25)}78%{bottom:34px;transform:rotateX(1800deg) scale(1)}88%{bottom:52px;transform:rotateX(1800deg)}100%{bottom:34px;transform:rotateX(1800deg)}}
.coinshadow{position:absolute;bottom:22px;width:60px;height:12px;border-radius:50%;background:#000a;filter:blur(3px)}
.coinshadow.toss{animation:shad 1.7s cubic-bezier(.3,.7,.4,1) forwards}
@keyframes shad{0%,78%,100%{transform:scale(1);opacity:.7}45%{transform:scale(.5);opacity:.3}}
.coinres{position:absolute;top:10px;font-weight:900;font-size:20px;animation:pop .5s}.coinres.w{color:#ffe27a;text-shadow:0 0 10px #ffd76a}.coinres.l{color:#ff8aa0}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
/* ---- 바카라 ---- */
.bcfelt{position:relative;margin:6px 0;padding:10px 8px;border-radius:16px;background:radial-gradient(#1f7a5a,#0e3a2c);border:4px solid #c9a43a;box-shadow:inset 0 0 20px #0008;overflow:hidden}
.bcrow{display:flex;align-items:center;gap:6px;min-height:84px;padding:4px 6px;border-radius:10px}.bcrow.winr{background:#ffe27a22;box-shadow:0 0 14px #ffe27a88}
.bclab{width:56px;font-size:11px;font-weight:900;letter-spacing:1px;color:#ffe9a0}.bcrow.pl .bclab{color:#9fd0ff}.bcrow.bk .bclab{color:#ff9aa8}
.bctot{margin-left:auto;font-size:24px;font-weight:900;color:#fff;text-shadow:0 0 8px #000}.bcfelt.anim .bctot{opacity:0;animation:fadein .4s forwards}
@keyframes fadein{to{opacity:1}}
.pcard{width:46px;height:68px;perspective:300px}
.pcard.dealt{animation:dealin .45s cubic-bezier(.2,.8,.3,1) both}
@keyframes dealin{from{transform:translate(140px,-120px) rotate(40deg) scale(.6);opacity:0}to{transform:none;opacity:1}}
.cardin{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:flipin .5s both}
@keyframes flipin{from{transform:rotateY(180deg)}to{transform:rotateY(0)}}
.cardin .front,.cardin .back{position:absolute;inset:0;border-radius:6px;backface-visibility:hidden;border:1px solid #888}
.cardin .front{background:#fffdf4;color:#111;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:20px;line-height:1.1}.cardin .front.red{color:#d01830}.cardin .front i{font-style:normal;font-size:22px}
.cardin .back{transform:rotateY(180deg);background:repeating-linear-gradient(45deg,#7a1030,#7a1030 4px,#a02050 4px,#a02050 8px);border:2px solid #fff}
.bcwin{text-align:center;font-weight:900;font-size:18px;margin-top:6px;color:#ffe27a;text-shadow:0 0 10px #ffd76a}.bcfelt.anim .bcwin{opacity:0;animation:fadein .5s forwards}
/* ---- 섯다 ---- */
.sdtable{background:radial-gradient(#3a1a50,#150a22);border:3px solid #c9a43a;border-radius:16px;padding:10px;margin-bottom:8px}
.sdpot{text-align:center;color:#ffe9a0;margin-bottom:8px}
.sdseats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.sdseat{background:#0004;border:2px solid #3b2a58;border-radius:12px;padding:6px 2px;text-align:center}.sdseat.turn{border-color:#ffd76a;box-shadow:0 0 12px #ffd76a88}.sdseat.mine{background:#3b2a0044}
.sdname{font-size:12px;font-weight:700;margin-bottom:4px}.sdcards{display:flex;justify-content:center;gap:3px;min-height:60px}
.hwatu{width:36px;height:56px;border-radius:5px;background:#fffdf0;border:2px solid #222;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;color:#111;animation:dealin .45s both}
.hwatu b{font-size:16px;color:#c01020}.hwatu i{font-style:normal;font-size:16px}
.hwatu.hb{background:repeating-linear-gradient(45deg,#7a1030,#7a1030 4px,#a02050 4px,#a02050 8px);border-color:#fff}.hwatu.hb span{color:#ffe9a0;font-weight:900}
.sdlog{font-size:12px;color:#cfc2e6;background:#0005;border-radius:8px;padding:6px;margin:6px 0;min-height:36px}

.admgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:6px 0}.admgrid button{padding:9px 4px;font-size:12px}

@media (max-width:560px){#hud{flex-wrap:wrap;gap:6px;max-width:calc(100vw - 16px)}#me{flex:1 1 100%;min-width:0}}

.monrow{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:6px 0}
.monc{background:#241833;border:2px solid #3b2a58;border-radius:10px;padding:4px 2px;text-align:center;font-size:11px;line-height:1.3}.monc.boss{border-color:#ffd76a;background:#3b2a00}
.monc img{height:44px;max-width:100%;object-fit:contain;image-rendering:pixelated;display:block;margin:0 auto 2px}.monc small{display:block;color:#a995c0;font-size:10px}

#qslots{position:fixed;right:8px;bottom:calc(env(safe-area-inset-bottom) + 166px);z-index:6;display:flex;gap:6px}
.qbtn{position:relative;width:52px;height:52px;border-radius:12px;border:2px solid #5aa8ff;background:#142a4a;font-size:22px;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.qbtn small{font-size:10px;color:#cfe0ff;margin-top:1px}.qbtn.empty{opacity:.55;border-color:#6b5280}
#pickbtn{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 150px);transform:translateX(-50%);z-index:9;padding:10px 16px;border-radius:20px;background:#b8860b;color:#fff;font-weight:700;border:2px solid #ffe27a;box-shadow:0 0 16px #ffd76a;animation:blink 1s infinite}

/* ---- 낚시/채광 무대 ---- */
.fxwrap{position:relative;margin:6px 0;border-radius:14px;overflow:hidden;border:2px solid #6b5280;background:#10182a}
#fxstage{display:block;width:100%;height:auto;image-rendering:auto}
.fxmsg{position:absolute;left:0;right:0;top:6px;text-align:center;font-weight:700;font-size:13px;color:#fff;text-shadow:0 0 4px #000,0 0 4px #000;white-space:pre-line;padding:0 8px;pointer-events:none}
/* ---- 연금술 ---- */
.alchbox{position:relative;height:210px;margin:6px 0;border-radius:14px;overflow:hidden;background:radial-gradient(#3a2a50,#120a1e);border:2px solid #6b5280}
.alcauldron{position:absolute;left:50%;bottom:48px;width:130px;height:84px;margin-left:-65px;border-radius:0 0 65px 65px;background:radial-gradient(circle at 35% 30%,#555566,#1a1a24);border-top:8px solid #2a2a34}
.alliquid{position:absolute;left:8px;right:8px;top:-10px;height:20px;border-radius:50%;background:#44e08a;box-shadow:0 0 14px #44e08a}
.alliquid i{position:absolute;bottom:8px;width:10px;height:10px;border-radius:50%;background:#c8ffd8;animation:bubup 1.1s infinite}
@keyframes bubup{0%{transform:translateY(0);opacity:.9}100%{transform:translateY(-50px);opacity:0}}
.alfire{position:absolute;left:50%;bottom:22px;margin-left:-50px;width:100px;display:flex;justify-content:space-around;font-size:24px}
.alfire span{animation:flick .35s infinite alternate}.alfire span:nth-child(2){animation-delay:.12s}
@keyframes flick{from{transform:scale(1)}to{transform:scale(1.3) translateY(-4px)}}
.alchbox.boomy .alcauldron,.alchbox.goody .alcauldron,.alchbox.fizzy .alcauldron{animation:rattle 1.1s}
@keyframes rattle{0%{transform:translateX(0)}20%{transform:translateX(-3px)}40%{transform:translateX(3px)}60%{transform:translateX(-5px) rotate(-2deg)}80%{transform:translateX(5px) rotate(2deg)}100%{transform:translateX(0)}}
.alchbox.boomy .alliquid{animation:liqred 1.1s forwards}@keyframes liqred{to{background:#ff5a3a;box-shadow:0 0 22px #ff3a10}}
.alboom{position:absolute;left:50%;top:44%;width:10px;height:10px;margin:-5px;border-radius:50%;background:radial-gradient(#fff,#ffb030 40%,#ff3a10 70%,transparent 72%);opacity:0;animation:boom .7s 1.1s forwards}
.alboom b{position:absolute;left:-14px;top:-18px;font-size:30px;opacity:.9}
@keyframes boom{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(26)}}
.alchbox.boomy{animation:alshake .45s 1.1s 2}@keyframes alshake{0%,100%{transform:translate(0)}25%{transform:translate(-6px,3px)}75%{transform:translate(6px,-3px)}}
.alsmoke{position:absolute;left:50%;bottom:120px;width:90px;height:90px;margin-left:-45px;border-radius:50%;background:radial-gradient(#777,#3338);filter:blur(8px);opacity:0;animation:smoke 1.2s 1.3s forwards}
@keyframes smoke{0%{opacity:.9;transform:translateY(0) scale(.5)}100%{opacity:0;transform:translateY(-90px) scale(2.2)}}
.alglow{position:absolute;left:50%;top:40%;width:20px;height:20px;margin:-10px;border-radius:50%;background:radial-gradient(#fff,#ffe27a 50%,transparent 70%);opacity:0;animation:glow .9s 1.1s forwards}
@keyframes glow{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(16)}}
.alpot{position:absolute;left:50%;bottom:110px;margin-left:-18px;font-size:38px;opacity:0;animation:potup 1.2s 1.1s forwards}
@keyframes potup{0%{opacity:0;transform:translateY(40px) scale(.5)}40%{opacity:1}100%{opacity:1;transform:translateY(-60px) scale(1.3)}}
.alstar{position:absolute;left:0;right:0;top:20px;text-align:center;font-size:26px;opacity:0;animation:fadein .5s 1.4s forwards}
.alfizz{position:absolute;left:50%;bottom:130px;margin-left:-14px;font-size:30px;opacity:0;animation:potup 1s 1.1s forwards}
.alres{position:absolute;left:0;right:0;top:10px;text-align:center;font-size:22px;font-weight:900;animation:pop .5s}.alres.w{color:#ffe27a;text-shadow:0 0 10px #ffd76a}.alres.l{color:#ff7a7a}.alres.h{color:#bbb}
/* ---- 상자 ---- */
.giftwrap{position:relative;height:220px;display:flex;align-items:flex-end;justify-content:center;background:radial-gradient(#3a2a58,#150d22);border-radius:14px;border:2px solid #6b5280;margin:6px 0;overflow:hidden}
.gbox{position:relative;width:120px;height:110px;margin-bottom:26px}
.gbody{position:absolute;bottom:0;left:0;right:0;height:66px;background:linear-gradient(#d02a4a,#8a1030);border-radius:6px;box-shadow:0 6px 12px #0008}.gbody i{position:absolute;left:50%;top:0;bottom:0;width:20px;margin-left:-10px;background:linear-gradient(#ffe27a,#c9a43a)}
.glid{position:absolute;left:-7px;right:-7px;bottom:66px;height:32px;background:linear-gradient(#e83a5a,#a01838);border-radius:6px;transform-origin:left bottom}.glid b{position:absolute;left:50%;top:0;bottom:0;width:20px;margin-left:-10px;background:linear-gradient(#ffe27a,#c9a43a)}
.glid::after{content:'🎀';position:absolute;left:50%;top:-22px;margin-left:-14px;font-size:28px}
.giftwrap.opening .gbox{animation:gshake .9s}@keyframes gshake{0%{transform:translateX(0) rotate(0)}15%{transform:translateX(-6px) rotate(-4deg)}30%{transform:translateX(6px) rotate(4deg)}45%{transform:translateX(-8px) rotate(-5deg)}60%{transform:translateX(8px) rotate(5deg)}80%{transform:translateX(-3px)}100%{transform:none}}
.giftwrap.opening .glid{animation:glid 2.1s forwards}@keyframes glid{0%,42%{transform:none}58%{transform:translate(-28px,-110px) rotate(-55deg)}100%{transform:translate(-70px,-200px) rotate(-85deg);opacity:0}}
.gbeam{position:absolute;left:50%;bottom:76px;width:90px;height:150px;margin-left:-45px;background:linear-gradient(#fff9,#ffe27a00);clip-path:polygon(35% 100%,65% 100%,100% 0,0 0);opacity:0}
.giftwrap.opening .gbeam{animation:beam 2.1s forwards}@keyframes beam{0%,45%{opacity:0}60%{opacity:1}100%{opacity:.25}}
.gitem{position:absolute;bottom:92px;font-size:46px;opacity:0}.giftwrap.opening .gitem{animation:gitem 2.1s forwards}@keyframes gitem{0%,50%{opacity:0;transform:translateY(0) scale(.3)}70%{opacity:1;transform:translateY(-70px) scale(1.4)}100%{opacity:1;transform:translateY(-62px) scale(1.2)}}
.giftwrap.opened .glid{transform:translate(-70px,-120px) rotate(-85deg);opacity:0}.giftwrap.opened .gitem{opacity:1;transform:translateY(-62px) scale(1.2)}
.giftwrap.bomby.opening .gbox{animation:gshake .9s,gbomb .5s 1.2s forwards}@keyframes gbomb{to{transform:scale(1.5);opacity:0;filter:brightness(3)}}
.giftwrap.legendy.opening{animation:winpulse .3s 1s 4}
.gres{position:absolute;left:0;right:0;top:10px;text-align:center;font-size:20px;font-weight:900;animation:pop .5s}.gres.w{color:#ffe27a;text-shadow:0 0 10px #ffd76a}.gres.l{color:#ff8aa0}
/* ---- 뽑기 이펙트 ---- */
.gachafx{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#000a;pointer-events:none;animation:gfade 2.6s forwards}
@keyframes gfade{0%{opacity:0}8%{opacity:1}85%{opacity:1}100%{opacity:0}}
.gcap{font-size:84px;animation:gcap 1.1s forwards}@keyframes gcap{0%{transform:rotate(0)}15%{transform:rotate(-14deg)}30%{transform:rotate(14deg)}45%{transform:rotate(-18deg) scale(1.1)}60%{transform:rotate(18deg) scale(1.15)}80%{transform:rotate(0) scale(1.3);opacity:1}100%{transform:scale(.2);opacity:0}}
.gflash{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px;border-radius:50%;background:#fff;opacity:0;animation:gflash .5s 1s forwards}@keyframes gflash{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(50)}}
.gpop{position:absolute;font-size:96px;opacity:0;animation:gpop .9s 1.05s forwards}@keyframes gpop{0%{opacity:0;transform:scale(.2) rotate(-30deg)}60%{opacity:1;transform:scale(1.35) rotate(8deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.gtxt{position:absolute;bottom:26%;color:#fff;font-weight:900;font-size:18px;text-align:center;max-width:88%;text-shadow:0 0 8px #000;opacity:0;animation:fadein .5s 1.5s forwards}
.gachafx u{position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:2px;opacity:0;animation:gburst 1s 1.05s forwards}@keyframes gburst{0%{opacity:1;transform:rotate(var(--a)) translateX(0)}100%{opacity:0;transform:rotate(var(--a)) translateX(calc(var(--d) * 2.6))}}
.gachafx.gtop{background:radial-gradient(#ff7ab044,#000c)}.gachafx.gtop .gpop{filter:drop-shadow(0 0 24px #ffd76a)}.gachafx.gblank .gpop{filter:grayscale(1)}

#skDash{position:fixed;right:14px;bottom:calc(env(safe-area-inset-bottom) + 104px);z-index:6;width:52px;height:52px}

.res.sk.got{opacity:.65}.warn{color:#ff9a9a}

.winfx{position:fixed;inset:0;z-index:45;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(#ffd76a55,#000a);pointer-events:none;animation:gfade 2.2s forwards}
.wbig{font-size:clamp(64px,22vw,140px);font-weight:900;color:#ffe27a;-webkit-text-stroke:4px #8a4a00;text-shadow:0 0 30px #ffb000,0 6px 0 #8a4a00;animation:wpop .7s cubic-bezier(.2,1.6,.4,1) both}
.wsmall{font-size:28px;font-weight:900;color:#fff;text-shadow:0 0 12px #000;margin-top:6px;animation:fadein .4s .5s both}
@keyframes wpop{0%{transform:scale(.2) rotate(-12deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
.winfx u{position:absolute;left:50%;top:46%;width:9px;height:9px;border-radius:2px;opacity:0;animation:gburst 1.2s .35s forwards}
#chatlog{max-height:132px;overflow-y:auto;pointer-events:auto}

.qchg{position:absolute;right:-4px;top:-6px;font-size:11px;background:#5a3aa0;color:#fff;border-radius:8px;padding:0 4px;font-style:normal;text-decoration:none;border:1px solid #cdb8ff}

#arenahud{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top) + 6px);z-index:9;display:flex;gap:6px;align-items:flex-start;justify-content:center;padding:0 6px;pointer-events:none}
.ahb{flex:1;max-width:240px}.ahb b{display:block;font-size:12px;color:#fff;text-shadow:0 0 4px #000;text-align:left}.ahb.r b{text-align:right}
.ahbar{position:relative;height:16px;background:#000a;border:2px solid #fff;border-radius:9px;overflow:hidden}.ahbar i{position:absolute;left:0;top:0;bottom:0}.ahb.r .ahbar i{left:auto;right:0}.ahbar span{position:absolute;inset:0;text-align:center;font-size:11px;font-weight:700;color:#fff;text-shadow:0 0 3px #000;line-height:12px}
.ahmid{text-align:center;color:#ffe27a;font-weight:900;font-size:22px;min-width:46px;text-shadow:0 0 8px #000}.ahmid small{display:block;font-size:11px;color:#fff}
#arenaq{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 100px);transform:translateX(-50%);z-index:9;background:#3a2a58;color:#ffe9a0;border:2px solid #ffd76a;border-radius:18px;padding:6px 14px;font-weight:700}

#minimap{position:fixed;right:6px;top:62px;width:96px;height:96px;z-index:5;border-radius:10px;opacity:.92;box-shadow:0 0 8px #000a;pointer-events:none}
@media(max-width:560px){#minimap{top:134px;width:84px;height:84px}}

.npcbox{display:flex;gap:10px;align-items:flex-start;margin:6px 0}.npcport{flex:0 0 96px;height:110px;background:radial-gradient(#3a2a58,#150d22);border:2px solid #6b5280;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:44px;overflow:hidden}.npcport img{max-width:100%;max-height:100%;image-rendering:pixelated}
.npcsay{flex:1;min-height:96px;background:#0007;border:2px solid #c9a43a;border-radius:12px;padding:10px;font-size:14px;line-height:1.5;color:#fff;text-align:left}

.eqrow7{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin:6px 0}.eqrow7 .eqslot{min-height:54px;font-size:9px;padding:2px 0}.eqrow7 .eqslot.sel{outline:2px solid #6aff9a}.eqrow7 .eqslot img{height:28px;image-rendering:pixelated}
.pgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;margin:6px 0}.pslot{min-height:58px;padding:2px;font-size:10px;background:#241833;border:2px solid #3b2a58;border-radius:8px;color:#fff;line-height:1.2}.pslot.on{border-color:#6aa8ff;background:#14284a}.pslot small{display:block;font-size:8px;color:#cfe0ff}
.mini{padding:1px 6px;font-size:11px;border-radius:8px}

.stbtns{display:flex;gap:4px}.stbtns button{padding:4px 8px;font-size:12px}