#crown{color-scheme:dark;--bg:#141518;--panel:#1b1c21;--top:#1f2025;--card:#222328;--line:#2a2c32;--muted:#8b8e97;--txt:#fff;--gold:#f0a81c;--yel:#f7c51e;--blue:#4985bc;--hpy:#d9a646;--green:#3fae4b;--red:#e5323f}
#crown, #crown *{box-sizing:border-box}
#crown [hidden]{display:none!important}

#crown body{margin:0;background:var(--bg);color:#fff;font-family:"Chakra Petch","Rajdhani",system-ui,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased;overflow:hidden}
#crown button{font-family:inherit;cursor:pointer;color:inherit}
#crown button:focus-visible{outline:2px solid var(--yel);outline-offset:2px}
#crown .num{font-variant-numeric:tabular-nums}
#crown .gem{display:inline-block;width:14px;height:14px;flex:none;vertical-align:-2px}
/* shell */
#crown .app{display:grid;grid-template-columns:265px 1fr 255px;grid-template-rows:64px 1fr;height:100vh}
#crown .topbar{grid-column:1/-1;background:var(--top);display:flex;align-items:center;gap:12px;padding:0 16px 0 48px;border-bottom:1px solid #16171a}
#crown .logo{display:flex;align-items:center;gap:10px;font:700 26px "Chakra Petch",sans-serif;letter-spacing:.5px;margin-right:48px}
#crown .logo em{font-style:normal;color:var(--gold)}
#crown .tb{height:40px;padding:0 16px;border:0;border-radius:4px;background:#2a2c31;color:#a6a9b2;font:600 15px "Chakra Petch";display:flex;align-items:center;gap:8px}
#crown .tb:hover{background:#33363c}
#crown .tb.green{background:var(--green);color:#fff}#crown .tb.green:hover{background:#48c156}
#crown .tb.yel{background:var(--yel);color:#2a2000}#crown .tb.yel:hover{background:#ffd43a}
#crown .bal{margin:0 auto;display:flex;align-items:center;gap:10px;background:#1a1b1f;border-radius:4px;padding:0 6px 0 14px;height:40px;font:600 17px "Chakra Petch"}
#crown .bal small{background:#2c6a36;color:#b6f0c0;font-size:11px;padding:4px 8px;border-radius:3px}
/* chat */
#crown .chat{background:var(--panel);display:flex;flex-direction:column;min-height:0;border-right:1px solid #16171a}
#crown .rain{margin:14px 16px 6px;padding:10px 12px;border-radius:4px;background:linear-gradient(90deg,#3a2c12,#23201a);border-bottom:2px solid var(--gold);display:flex;align-items:center;gap:10px}
#crown .rain b{font-size:20px;display:block;line-height:1}
#crown .rain small{color:var(--gold);font-weight:700;font-size:12px;letter-spacing:.5px}
#crown .rain .j{margin-left:auto;background:var(--green);border:0;border-radius:3px;padding:5px 10px;font-weight:600}
#crown .msgs{flex:1;overflow:hidden;padding:4px 14px;display:flex;flex-direction:column;justify-content:flex-end;gap:14px}
#crown .msg{display:flex;gap:10px;animation:fin .3s ease-out}
@keyframes fin{from{opacity:0;transform:translateY(6px)}}
#crown .msg .av{width:36px;height:36px;border-radius:50%;flex:none}
#crown .msg b{font-size:14px}#crown .msg b i{font-style:normal;color:var(--yel);font-size:12px;margin-left:6px}
#crown .msg p{margin:2px 0 0;color:#9ea1aa;font-size:14px;line-height:1.4}
#crown .send{margin:10px 14px;height:44px;border-radius:4px;background:#16171b;border:1px solid #26282d;display:flex;align-items:center;padding:0 12px;color:#6c6f78;font-size:13px}
#crown .chatfoot{display:flex;gap:10px;align-items:center;padding:0 14px 14px;color:#a6a9b2;font-size:13px}
#crown .chatfoot .on{margin-left:auto;display:flex;align-items:center;gap:6px}#crown .chatfoot .on i{width:8px;height:8px;border-radius:50%;background:#3fcf5a}
/* feed */
#crown .feed{background:var(--panel);border-left:1px solid #16171a;display:flex;flex-direction:column;min-height:0}
#crown .ftabs{display:grid;grid-template-columns:1fr 1fr;margin:14px 16px;background:#16171b;border-radius:4px}
#crown .ftabs button{height:40px;border:0;background:transparent;color:#9ea1aa;font:600 15px "Chakra Petch";border-radius:4px}
#crown .ftabs button.on{background:#2b2618;color:var(--yel)}
#crown .drops{flex:1;overflow:hidden;display:flex;flex-direction:column;gap:3px}
#crown .drop{height:94px;display:flex;align-items:center;gap:14px;padding:0 14px;position:relative;animation:dropin .45s ease-out;flex:none}
@keyframes dropin{from{height:0;opacity:0}}
#crown .drop .im{width:78px;height:62px;flex:none}
#crown .drop small{color:#b2a9c0;font-size:12px;display:block}
#crown .drop b{font-size:14.5px;display:block;white-space:nowrap}
#crown .drop span{font-size:14px;display:flex;align-items:center;gap:6px;margin-top:2px}
#crown .dropwin{height:40px;display:flex;align-items:center;gap:8px;padding:0 16px;background:#211d2e;font-size:14px;flex:none}
#crown .dropwin em{font-style:normal;color:var(--yel);font-weight:700}
/* center */
#crown .main{overflow-y:auto;overflow-x:hidden;min-width:0;position:relative;background:
 radial-gradient(ellipse at 30% 30%,rgba(90,80,40,.18),transparent 55%),
 radial-gradient(ellipse at 70% 40%,rgba(50,60,40,.15),transparent 55%),#141518}
#crown .main::before{content:"";position:absolute;left:0;right:0;top:0;height:900px;pointer-events:none;opacity:.35;
 background:repeating-radial-gradient(circle at 25% 30%,rgba(120,110,70,.06) 0 8px,transparent 8px 22px),repeating-radial-gradient(circle at 70% 55%,rgba(80,90,60,.06) 0 10px,transparent 10px 26px)}
#crown .arenaWrap{position:relative;width:100%;max-width:1180px;margin:0 auto;padding:0 20px}
#crown #arena{position:relative;width:1180px;height:580px;transform-origin:0 0}
#crown .hdr{position:absolute;left:0;right:0;top:40px;height:66px;display:flex;align-items:center}
#crown .hdr .t{font:600 17px "Chakra Petch";width:260px}
#crown .kcard{position:absolute;left:272px;width:638px;height:66px;background:linear-gradient(90deg,rgba(40,40,38,.92),rgba(40,40,38,.6));display:flex;align-items:center;padding:0 12px;gap:10px;overflow:hidden}
#crown .kcard::after{content:"";position:absolute;right:70px;top:-10px;width:80px;height:90px;background:
 linear-gradient(135deg,transparent 40%,rgba(240,168,28,.35) 40% 55%,transparent 55%),linear-gradient(45deg,transparent 45%,rgba(240,168,28,.25) 45% 60%,transparent 60%);transform:rotate(15deg);pointer-events:none}
#crown .kcard .ka{width:38px;height:38px;border-radius:50%;flex:none;overflow:hidden}
#crown .kcard .kn{font:700 16px "Chakra Petch";line-height:1.1}
#crown .kcard .kn i{font-style:normal;color:var(--yel);font-size:12px;margin-left:6px}
#crown .kcard .kt{color:var(--gold);font:700 17px "Chakra Petch";letter-spacing:.5px}
#crown .earn{position:absolute;left:50%;transform:translateX(-50%);top:6px;display:flex;flex-direction:column;align-items:center}
#crown .earn b{font:700 26px "Chakra Petch";display:flex;align-items:center;gap:8px}
#crown .earn .tag{margin-top:4px;background:var(--green);color:#fff;font:700 13px "Chakra Petch";padding:3px 10px;clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 100%,0 100%)}
#crown .earn b.bump{animation:bump .5s ease-out}
@keyframes bump{40%{transform:scale(1.18);color:#7dff8a}}
#crown .how{position:absolute;right:12px;top:0;height:66px;display:flex;align-items:center;gap:6px;color:#b9bcc4;font:600 14px "Chakra Petch";background:none;border:0}
#crown .how:hover{color:#fff}
#crown .hbtns{position:absolute;right:0;display:flex;gap:8px}
#crown .hb{height:30px;border:1px solid #2e3036;background:#1c1d21;border-radius:4px;color:#b9bcc4;font:600 13px "Chakra Petch";display:flex;align-items:center;gap:8px;padding:0 10px}
#crown .hb:hover{color:#fff}
#crown .tip{position:absolute;right:-40px;top:66px;width:300px;padding:12px 14px;background:#1a1b1f;border:1px solid #2e3036;border-radius:4px;z-index:60;font:500 12.5px/1.45 Rajdhani,sans-serif;color:#c9ccd3;box-shadow:0 10px 30px rgba(0,0,0,.6)}
#crown .tip h4{margin:0 0 6px;font:700 14px "Chakra Petch";color:#fff}
#crown .tip ul{margin:0 0 10px;padding-left:16px}#crown .tip li{margin-bottom:3px}
/* kill feed */
#crown .kf{position:absolute;right:0;top:122px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;z-index:20}
#crown .kfr{height:34px;display:flex;align-items:center;gap:12px;padding:0 12px;background:rgba(30,10,12,.75);border:1.5px solid rgba(229,50,63,.85);border-radius:3px;font:700 14px "Chakra Petch";animation:kfin .3s ease-out;transition:opacity .4s}
#crown .kfr:nth-child(2){opacity:.75;border-color:rgba(229,50,63,.55)}
#crown .kfr:nth-child(3){opacity:.4;border-color:rgba(229,50,63,.35)}
#crown .kfr:nth-child(n+4){display:none}
@keyframes kfin{from{transform:translateX(30px);opacity:0}}
#crown .kfr .k{color:var(--gold)}#crown .kfr .c{color:#5aa0e6}
#crown .kfr svg.kfi{height:18px;width:auto;filter:brightness(0) invert(1) drop-shadow(0 0 1px rgba(0,0,0,.6))}
#crown .smoke{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:radial-gradient(circle,rgba(210,210,215,.75),rgba(180,180,185,0) 70%);pointer-events:none}
/* fighters */
#crown .ftr{position:absolute;width:180px;height:180px;margin:-90px 0 0 -90px}
#crown .glow{position:absolute;inset:-50px;border-radius:50%;background:radial-gradient(circle,rgba(240,150,30,.55),rgba(240,150,30,.18) 45%,transparent 68%);animation:glow 2.4s ease-in-out infinite;pointer-events:none}
@keyframes glow{50%{transform:scale(1.07);opacity:.8}}
#crown .rim{position:absolute;inset:0;border-radius:50%;background:#26282c;box-shadow:0 8px 24px rgba(0,0,0,.6)}
#crown .ftr.k .rim{background:conic-gradient(from 200deg,#6b5320,#3a3222,#6b5320,#3a3222,#6b5320)}
#crown .ftr.c .rim{background:conic-gradient(from 200deg,#2f4f6e,#26303b,#2f4f6e,#26303b,#2f4f6e)}
#crown .pic{position:absolute;inset:14px;border-radius:50%;overflow:hidden;background:#9a9a9a}
#crown .pic svg{width:100%;height:100%;display:block}
#crown .hitring{position:absolute;inset:-8px;border-radius:50%;border:5px solid rgba(229,50,63,0);pointer-events:none}
#crown .ftr.hit .hitring{animation:hr .6s ease-out}
@keyframes hr{0%{border-color:rgba(229,50,63,.95);box-shadow:0 0 30px rgba(229,50,63,.7)}100%{border-color:rgba(229,50,63,0);box-shadow:none}}
#crown .ftr.hit .pic{animation:shake .35s}
@keyframes shake{20%{transform:translate(-5px,2px)}40%{transform:translate(5px,-3px)}60%{transform:translate(-3px,3px)}80%{transform:translate(2px,-1px)}}
#crown .ftr.dead .pic{filter:grayscale(1) brightness(.35);transition:filter .6s}
#crown .crown{position:absolute;left:50%;top:-58px;width:56px;height:40px;margin-left:-28px;transition:opacity .3s}
#crown .crown.drop{animation:cdrop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes cdrop{from{transform:translateY(-40px);opacity:0}}
#crown .spin{position:absolute;inset:0;display:grid;place-items:center}
#crown .spin i{width:30px;height:30px;border-radius:50%;border:3px solid #3b76b0;border-right-color:transparent;animation:rot 1s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
#crown .empty .pic{background:#1a1b1e}
#crown .valp{position:absolute;transform:translateX(-50%);height:32px;padding:0 10px;border-radius:3px;background:rgba(40,40,40,.9);display:flex;align-items:center;gap:6px;font:700 17px "Chakra Petch"}
#crown .valp.dim{opacity:.45}
#crown .nrow{position:absolute;width:424px;display:flex;align-items:center;gap:8px;font:700 16px "Chakra Petch"}
#crown .nrow i{font-style:normal;color:var(--yel);font-size:12px}
#crown .nrow .hp{margin-left:auto;font:600 13px "Chakra Petch";color:#8b8e97}
#crown .nrow .hp b{color:var(--hpy)}#crown .nrow.c .hp b{color:#6aa6e0}
#crown .nrow.c{flex-direction:row}
#crown .bar{position:absolute;width:424px;height:14px;background:#1f2023;border-radius:1px;overflow:hidden}
#crown .bar .dmg{position:absolute;top:0;bottom:0;background:var(--red);transition:width .6s ease .35s,left .6s ease .35s}
#crown .bar .fill{position:absolute;top:0;bottom:0;transition:width .25s ease,left .25s ease}
#crown .bar.k .fill{left:0;background:linear-gradient(#e6b654,#c99432)}
#crown .bar.c .fill{right:0;background:linear-gradient(#5a98d2,#3b76b0)}
#crown .bar.c .dmg{right:auto}
/* timer */
#crown .timer{position:absolute;left:590px;top:300px;width:204px;height:204px;margin:-102px 0 0 -102px}
#crown .timer svg{position:absolute;inset:0}
#crown .timer .t{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
#crown .timer b{font:700 44px "Chakra Petch";color:var(--yel);line-height:1}
#crown .timer small{font:700 12px "Chakra Petch";color:#a6a9b2;letter-spacing:.6px;margin-top:6px}
#crown .timer.final b{color:var(--red);font-size:26px;text-align:center}
#crown .join{position:absolute;left:590px;top:487px;transform:translate(-50%,-50%);width:136px;height:48px;border:0;border-radius:2px;background:var(--yel);color:#2a2000;font:700 15px "Chakra Petch";box-shadow:0 3px 0 #b88e00}
#crown .join:hover{background:#ffd43a}
#crown .join:active{transform:translate(-50%,-48%)}
#crown .qinfo{position:absolute;left:590px;top:528px;transform:translateX(-50%);font:600 13px "Chakra Petch";color:#a6a9b2;white-space:nowrap}
#crown .qinfo b{color:var(--yel)}
/* fx */
#crown #fx{position:absolute;inset:0;pointer-events:none;z-index:30;overflow:visible}
#crown .wpn{position:absolute;transform-origin:50% 50%;will-change:transform;filter:drop-shadow(0 0 1px rgba(0,0,0,.9)) drop-shadow(0 8px 10px rgba(0,0,0,.65)) contrast(1.05) saturate(.9)}
#crown .dnum{position:absolute;font:700 30px "Chakra Petch";color:#ff3d4a;text-shadow:0 2px 0 #5a0a10,0 0 12px rgba(255,40,50,.5);pointer-events:none;animation:dn 1.1s ease-out forwards}
@keyframes dn{0%{transform:translate(0,10px) rotate(-8deg) scale(.6);opacity:0}15%{transform:translate(0,0) rotate(-8deg) scale(1.15);opacity:1}100%{transform:translate(18px,-46px) rotate(-8deg) scale(1);opacity:0}}
#crown .boom{position:absolute;width:150px;height:150px;margin:-75px 0 0 -75px;pointer-events:none}
#crown .banner{position:absolute;left:590px;top:180px;transform:translate(-50%,-50%);font:700 44px "Chakra Petch";letter-spacing:2px;color:#fff;text-shadow:0 4px 0 #000,0 0 30px rgba(247,197,30,.6);z-index:40;pointer-events:none;animation:ban 1.3s ease-out forwards;white-space:nowrap}
@keyframes ban{0%{transform:translate(-50%,-50%) scale(2.2);opacity:0}20%{transform:translate(-50%,-50%) scale(1);opacity:1}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-60%) scale(1)}}
/* items panel */
#crown .items{max-width:1180px;margin:10px auto 40px;background:#1c1d22;border-radius:4px;overflow:hidden}
#crown .ih{display:grid;grid-template-columns:1fr 1fr;height:62px;position:relative}
#crown .ih>div{display:flex;align-items:center;justify-content:center;gap:10px;font:700 17px "Chakra Petch"}
#crown .ih>div:first-child{background:linear-gradient(0deg,rgba(90,70,20,.35),rgba(40,38,30,.7))}
#crown .ih>div:last-child{background:linear-gradient(0deg,rgba(30,60,100,.3),rgba(30,34,40,.7))}
#crown .ih i{font-style:normal;color:var(--yel);font-size:12px}
#crown .ih .vs{position:absolute;left:50%;top:0;bottom:0;width:2px;background:#141518;transform:translateX(-50%)}
#crown .ih .vs svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
#crown .pill{height:30px;padding:0 10px;border-radius:3px;background:rgba(0,0,0,.35);display:flex;align-items:center;gap:6px}
#crown .ib{display:grid;grid-template-columns:1fr 1fr;min-height:180px}
#crown .ib>div{display:flex;flex-wrap:wrap;align-content:flex-start;gap:10px;padding:14px}
#crown .ib>div:first-child{border-right:2px solid #141518}
#crown .it{width:178px;height:176px;border-radius:3px;background:#23242a;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 6px 10px;text-align:center;position:relative;overflow:hidden;animation:fin .35s ease-out}
#crown .it::before{content:"";position:absolute;left:50%;top:14px;width:120px;height:90px;margin-left:-60px;border-radius:50%;background:radial-gradient(circle,var(--rc) 0,transparent 70%);opacity:.35}
#crown .it .im{position:absolute;top:18px;left:50%;width:120px;height:86px;margin-left:-60px}
#crown .it small{font:600 11px "Chakra Petch";color:var(--rc)}
#crown .it b{font:700 13px "Chakra Petch";margin-top:2px}
#crown .it em{font-style:normal;font:500 11px "Chakra Petch";color:#7b7e87}
#crown .it span{display:flex;align-items:center;gap:5px;font:700 13px "Chakra Petch";margin-top:4px}
#crown .it.st{background:linear-gradient(0deg,rgba(60,90,160,.25),#23242a)}
#crown .wait{color:#6c6f78;font:600 14px "Chakra Petch";padding:30px 0;width:100%;text-align:center}
#crown .queueRow{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:10px 0;color:#a6a9b2;font:600 13px "Chakra Petch"}
#crown .qchip{display:flex;align-items:center;gap:6px;height:30px;padding:0 10px 0 4px;border-radius:15px;background:#1f2025;color:#dcdfe6;animation:fin .3s}
#crown .qchip .av{width:22px;height:22px;border-radius:50%;overflow:hidden}
#crown .qchip.me{outline:1.5px solid var(--yel)}
/* modal */
#crown .modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:grid;place-items:center;z-index:100;padding:16px}
#crown .mb{width:min(980px,100%);max-height:88vh;display:flex;flex-direction:column;background:#1b1c21;border-radius:6px;border:1px solid #2a2c32;overflow:hidden}
#crown .mh{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid #2a2c32}
#crown .mh h3{margin:0;font:700 20px "Chakra Petch";flex:1}
#crown .mh small{color:#8b8e97;font:600 13px "Chakra Petch"}
#crown .mgrid{overflow:auto;padding:16px 20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
#crown .mgrid .it{width:auto;height:170px;cursor:pointer;border:2px solid transparent;animation:none}
#crown .mgrid .it:hover{background:#2a2b31}
#crown .mgrid .it.sel{border-color:var(--yel);background:#2b2818}
#crown .mgrid .it.sel::after{content:"✓";position:absolute;right:8px;top:6px;width:22px;height:22px;border-radius:50%;background:var(--yel);color:#2a2000;font:700 13px/22px sans-serif}
#crown .mf{display:flex;align-items:center;gap:12px;padding:14px 20px;border-top:1px solid #2a2c32;flex-wrap:wrap}
#crown .mf .tot{font:700 17px "Chakra Petch";display:flex;align-items:center;gap:6px}
#crown .mf .err{color:#ff6a74;font:600 13px "Chakra Petch"}
#crown .x{width:36px;height:36px;border:0;background:#2a2c31;border-radius:4px;font-size:20px}
#crown .toast{position:fixed;left:50%;top:80px;transform:translateX(-50%);z-index:120;padding:12px 18px;border-radius:4px;background:#23242a;border:1px solid #3a3c42;font:600 15px "Chakra Petch";box-shadow:0 10px 30px rgba(0,0,0,.6);opacity:0;transition:opacity .25s;pointer-events:none;white-space:nowrap}
#crown .toast.show{opacity:1}
#crown .payout{position:absolute;left:590px;top:300px;transform:translate(-50%,-50%);z-index:45;background:#1a1b1f;border:2px solid var(--yel);border-radius:6px;padding:20px 30px;text-align:center;box-shadow:0 0 60px rgba(247,197,30,.35),0 20px 40px rgba(0,0,0,.6);animation:fin .35s}
#crown .payout h4{margin:0;font:700 14px "Chakra Petch";color:#a6a9b2;letter-spacing:1px}
#crown .payout b{display:block;font:700 26px "Chakra Petch";margin:6px 0}
#crown .payout span{display:flex;align-items:center;justify-content:center;gap:8px;font:700 30px "Chakra Petch";color:var(--yel)}
#crown .chatbtn{position:fixed;right:270px;bottom:80px;width:56px;height:56px;border-radius:50%;border:0;background:var(--yel);display:grid;place-items:center;box-shadow:0 6px 16px rgba(0,0,0,.5);z-index:50}
@media (max-width:1300px){#crown .app{grid-template-columns:0 1fr 0}#crown .chat,#crown .feed{display:none}#crown .chatbtn{right:20px}}
@media (max-width:700px){#crown .topbar{padding:0 12px}#crown .logo{margin-right:8px;font-size:20px}#crown .tb.hidem{display:none}#crown .bal{margin:0 0 0 auto}}
@media (prefers-reduced-motion:reduce){#crown *{animation-duration:.01ms!important;transition-duration:.01ms!important}}