:root{--fxst-run:#4f8dff;--fxst-run-bg:rgba(20,32,70,.95);--fxst-ok-bg:#22b45a;--fxst-fail-bg:#5d6278;--fxst-fail:#d6d9e3;--lg-ink:rgba(236,238,251,.88);--lg-p1-bg:rgba(47,110,255,.30);--lg-p1-line:#4f8dff;--lg-p1-ink:#8fb8ff;--lg-p2-bg:rgba(255,70,150,.27);--lg-p2-line:#ff5ca8;--lg-p2-ink:#ff9cc8;--lg-sys-bg:rgba(110,116,140,.16);--lg-sys-line:#5d6278;--lg-fail:#ffb35c;--lg-why:#ffc9b8;--go-better:#3ee07a;--go-row:rgba(255,255,255,.045);--go-head:#9aa3c7;--go-chip-bg:rgba(255,255,255,.07);--rfl-shield:#6f4bff;--rfl-shield-hi:#a98bff;--rfl-edge:#fff;--rfl-arrow:#fff;--rfl-head:#ffb23f;--rfl-glow:rgba(150,110,255,.75);--tk-gold-hi:#fff1b8;--tk-gold:#f2c14e;--tk-gold-lo:#b8841a;--tk-gold-edge:#8f6512;--tk-head:#ffd23f;--tk-tail:#aeb6cf;--tk-bg:#070b22;--fxb-white:#fff;--fxb-ink:#141824;--fxb-ok:#22b45a;--fxb-fail:#ff9a2e;--fxb-cancel:#ff4d4d;--fxb-hold-ring:rgba(110,170,255,.55);--fxb-hold-sub:#3b5c8f;--fxb-miss:#7a8094;--hpk-shade:rgba(4,6,14,.45);--hpk-atk:#e5484d;--hpk-hp:#22b45a;--hpk-type:#6b7194;--hpk-fx-bg:rgba(14,16,36,.92);--note-ink:#ffe2a8;--note-bg:rgba(242,193,78,.12);--note-line:rgba(242,193,78,.45);color-scheme:dark;--bg:#14151f;--surface:#1c1e2b;--surface-2:#21232f;--ink:#eceefb;--ink-dim:#9297b0;--line:#31344a;--accent:#8b7bff;--accent-ink:#14151f;--aktif:#6d9bff;--aktif-bg:#1b2440;--menang:#4fd394;--menang-bg:#122a20;--hp-bonus:#ffd23f;--kalah:#f08a80;--kalah-bg:#3a1815;--sokongan:#e3ac52;--sokongan-bg:#332508;--deck:#9297b0;--deck-bg:#20222e;--osom:#c49bff;--osom-bg:#2a2140;--hand:#7fc6ea;--hand-bg:#132833;--p2-tint:#251a20;--p1-tint:#16241f;--badge-p2-bg:#ff5c96;--badge-p2-ink:#3a0a1f;--badge-p1-bg:#2fe0c8;--badge-p1-ink:#04302a;--elem-api:#ff6b4a;--elem-air:#4fa3ff;--elem-daun:#4ecb6c;--shadow:0 1px 1px rgba(0,0,0,.2),0 4px 10px -10px rgba(0,0,0,.35);--stage-ready:#ff9838;--stage-ready-ink:#241200;--stage-locked:#9297b0;--stage-locked-bg:rgba(50,53,66,.92);--stage-cond:#ff8a80;--stage-cond-bg:rgba(120,30,30,.92);--stage-cond-ring:rgba(255,138,128,.3);--sokwave-p1:#39f0d2;--sokwave-p2:#ff5c96;--bf-bronze:#cd8a4b;--bf-silver:#b9c3d6;--bf-gold:#ffd23f;--bf-master:#c49bff;--bf-rim-bronze:linear-gradient(135deg,#ffd2a1 0%,#a8622c 22%,#f0b077 45%,#6b3a17 70%,#e0a066 100%);--bf-rim-silver:linear-gradient(135deg,#ffffff 0%,#8d96a8 24%,#eef2f8 48%,#5b6374 72%,#d6dce8 100%);--bf-rim-gold:linear-gradient(135deg,#fff6c2 0%,#c08a12 22%,#ffe066 46%,#8a5d06 72%,#f7d24c 100%);--bf-rim-master:linear-gradient(135deg,#fff6c2 0%,#e0a91a 18%,#b98cff 40%,#ffe066 58%,#7a3fe0 80%,#f7d24c 100%);--bf-fill-bronze:#2a1d16;--bf-fill-silver:#20242e;--bf-fill-gold:#2a2412;--bf-fill-master:#2b1b47;--matt-deep:#0b121e;--matt-base:#1b2a41;--matt-mid:#23364f;--matt-hi:#2d4463;--matt-line:rgba(160,185,220,.16);--matt-accent:rgba(110,170,255,.32);--matt-rail:rgba(11,18,30,.2);--matt-band:#0f1826;--matt-bg-a:#23364f;--matt-bg-b:#1b2a41;--matt-bg-c:#0b121e;--nude-deep:#5a463b;--nude-base:#9b7f6d;--nude-mid:#b19280;--nude-hi:#c6a893;--nude-line:rgba(70,45,30,.22);--nude-accent:rgba(120,70,40,.35);--nude-rail:rgba(70,45,30,.14);--nude-band:#7a6152;--nude-bg-a:#8c7262;--nude-bg-b:#6e584b;--nude-bg-c:#3d302a;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}
body{margin:0;background:#0a0e28;color:var(--ink);font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;padding-inline:16px;font-variant-numeric:tabular-nums;padding-block:20px calc(20px + var(--bottomnav-h,64px) + env(safe-area-inset-bottom,0px))}
h1,h2,h3,.disp{font-family:"Lexend",system-ui,sans-serif}
.wrap{max-width:980px;margin:0 auto}
#bottomNav{position:fixed;left:0;right:0;z-index:600;display:flex;justify-content:center;pointer-events:none}
.bottom-nav-inner{pointer-events:auto;width:100%;max-width:980px;margin:0 auto;display:flex;align-items:stretch;gap:4px;background:var(--surface)}
.bottom-nav-btn{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:none;border:none;cursor:pointer;font-family:"Lexend",sans-serif;color:var(--ink-dim);border-radius:13px;transition:background .12s,color .12s}
.bottom-nav-btn:hover{color:var(--ink);background:var(--bg)}
.bottom-nav-btn.active{color:var(--accent);background:var(--aktif-bg)}
.bottom-nav-btn .bn-icon{line-height:1}
.bottom-nav-btn .bn-label{font-weight:700;letter-spacing:.01em;white-space:nowrap}
.placeholder-view{padding:60px 16px;text-align:center;color:var(--ink-dim)}
.placeholder-view .ph-icon{font-size:2.4rem;display:block;margin-bottom:10px}
.placeholder-view h2{margin:0 0 6px;font-size:1.1rem;color:var(--ink)}
.placeholder-view p{margin:0;font-size:.82rem}
header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.info-toggle-btn{flex:none;width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink-dim);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s}
.info-toggle-btn:hover{color:var(--ink);border-color:var(--accent)}
.info-toggle-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.settings-wrap{position:relative}
.settings-panel{position:absolute;top:40px;left:0;z-index:50;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:0 8px 22px rgba(0,0,0,.2);min-width:340px;max-width:min(92vw,400px)}
.settings-panel-title{font-size:.7rem;font-weight:700;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.04em;margin:0 0 10px 2px}
.settings-row + .settings-row{border-top:1px solid var(--line)}
.settings-row-label{font-size:.78rem}
.settings-row-btn{font-size:.72rem;padding:4px 9px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer;white-space:nowrap}
.settings-row-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.settings-cardmode-controls .settings-row-btn{text-align:left}
.settings-zoom-controls{display:flex;align-items:center;gap:6px}
.settings-zoom-btn{font-size:.9rem;font-weight:700;width:24px;height:24px;line-height:1;border-radius:7px;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.settings-zoom-btn:hover{border-color:var(--accent);color:var(--accent)}
.settings-zoom-btn:disabled{opacity:.4;cursor:not-allowed}
.settings-zoom-btn:disabled:hover{border-color:var(--line);color:var(--ink)}
.settings-zoom-pct{font-size:.7rem;font-weight:700;color:var(--ink-dim);min-width:34px;text-align:center}
.motion-list{width:300px;max-height:320px;overflow-y:auto;margin-top:4px;padding-top:4px;border-top:1px solid var(--line)}
.motion-row{display:grid;grid-template-columns:16px 1fr;column-gap:6px;row-gap:0;align-items:start;padding:5px 4px;border-radius:6px;cursor:pointer}
.motion-row:hover{background:var(--bg)}
.motion-row input[type="checkbox"]{grid-row:1 / span 3;width:13px;height:13px;margin:2px 0 0}
.motion-mother-row{margin-top:4px}
.motion-mother-row .motion-num{color:var(--accent)}
.motion-sub-row{margin-left:9px;padding-left:12px;border-left:2px solid var(--line);width:calc(100% - 9px)}
.motion-num{font-size:.6rem;font-weight:700;color:var(--ink-dim);letter-spacing:.02em}
.motion-name{font-size:.73rem;font-weight:600}
.motion-code{font-size:.6rem;color:var(--ink-dim);font-family:ui-monospace,"SF Mono",Consolas,monospace;word-break:break-word}
.title-box{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 14px;box-shadow:0 1px 0 rgba(0,0,0,.03);margin-bottom:8px}
.title-box h1{font-size:1.3rem;margin:0;letter-spacing:-.01em}
.title-box p{margin:2px 0 0;color:var(--ink-dim);font-size:.82rem}
.target{display:inline-block;margin-top:6px;font-size:.76rem;color:var(--ink-dim);background:var(--bg,transparent);border:1px solid var(--line);border-radius:999px;padding:5px 12px;white-space:nowrap}
.target b{color:var(--accent)}
.tab-bar{display:flex;gap:8px;justify-content:flex-end;flex:none}
.tab-btn{font-family:"Lexend",sans-serif;font-size:.8rem;font-weight:700;padding:9px 16px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink-dim);cursor:pointer;transition:all .12s}
.tab-btn:hover{color:var(--ink);border-color:var(--accent)}
.tab-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.hidden{display:none !important}
.scorepips{display:flex;align-items:center;gap:7px}
.scorepips-name,.scorepips-brik{font-family:"Lexend",sans-serif;font-size:.68rem;font-weight:700;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.03em}
.scorepips-row{display:flex;align-items:center;gap:6px}
.pips{display:flex;gap:4px}
.pip{width:12px;height:12px;border-radius:4px;background:var(--surface-2);border:1px solid var(--line)}
.pip.on.p1{background:var(--badge-p1-bg);border-color:var(--badge-p1-bg)}
.pip.on.p2{background:var(--badge-p2-bg);border-color:var(--badge-p2-bg)}
.avatar-frame{width:24px;height:24px;border-radius:50%;flex:0 0 auto;border:2px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.avatar-frame.p1{border-color:var(--badge-p1-bg)}
.avatar-frame.p2{border-color:var(--badge-p2-bg)}
.hand-pips-hover{position:absolute;top:4px;z-index:5;opacity:0;pointer-events:none;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:3px 8px;box-shadow:var(--shadow)}
.hand-pips-hover.p1{left:6px}
.hand-pips-hover.p2{right:6px}
.zone[data-z="hand"]:hover .hand-pips-hover{opacity:1}
.hand-pips-hover .scorepips-name{border-radius:6px;padding:1px 6px;font-weight:800}
.hand-pips-hover.p1 .scorepips-name{background:var(--badge-p1-bg);color:var(--badge-p1-ink)}
.hand-pips-hover.p2 .scorepips-name{background:var(--badge-p2-bg);color:var(--badge-p2-ink)}
.banner{border-radius:14px;padding:12px 16px;margin-bottom:14px;font-weight:600;font-size:.88rem;display:none}
.banner.show{display:block;background:var(--menang-bg);color:var(--menang);border:1px solid var(--menang)}
@keyframes arenaHintBannerFx{
  0%{opacity:0;transform:translate(calc(-50% - 60px),-50%)}
  18%{opacity:1;transform:translate(-50%,-50%)}
  78%{opacity:1;transform:translate(-50%,-50%)}
  100%{opacity:0;transform:translate(calc(-50% + 60px),-50%)}
}
.arena-hint-banner{position:absolute;left:50%;top:50%;z-index:75;border-radius:14px;padding:10px 16px;margin:0;font-weight:600;font-size:.82rem;text-align:center;max-width:min(92%,420px);white-space:nowrap;background:var(--menang-bg);color:var(--menang);border:1px solid var(--menang);animation-name:arenaHintBannerFx;animation-timing-function:ease;animation-fill-mode:both;pointer-events:none}
.gameover-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(6,7,12,.74);backdrop-filter:blur(10px);animation:gameoverFadeIn .35s ease both}
.gameover-overlay.show{display:flex}
@keyframes gameoverFadeIn{
  0%{opacity:0}
  100%{opacity:1}
}
.gameover-card{background:var(--surface);border-radius:18px;padding:28px 26px 24px;box-shadow:0 20px 60px -10px rgba(0,0,0,.6);max-width:360px;width:100%;box-sizing:border-box;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;animation:gameoverPopIn .4s cubic-bezier(.2,.85,.32,1.15) both}
@keyframes gameoverPopIn{
  0%{opacity:0;transform:scale(.75) translateY(18px)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}
.gameover-title{font-size:1.5rem;font-weight:800;line-height:1.2}
.gameover-title.win{color:var(--menang)}
.gameover-title.lose{color:var(--kalah)}
.gameover-mvp-card{width:150px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.45))}
.gameover-mvp-card .card{width:100%}
.gameover-mvp-name{font-weight:700;font-size:.92rem}
.gameover-mvp-atk{font-weight:700;color:var(--kalah);margin-left:4px}
.gameover-restart-btn{margin-top:4px;font:inherit;font-weight:700;font-size:.9rem;border:none;border-radius:11px;padding:11px 26px;background:var(--accent);color:var(--accent-ink);cursor:pointer;box-shadow:var(--shadow)}
.gameover-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:4px}
.gameover-btns .gameover-restart-btn{margin-top:0}
.gameover-alt-btn{font:inherit;font-weight:700;font-size:.9rem;border:1px solid var(--line);border-radius:11px;padding:11px 20px;background:var(--surface-2);color:var(--ink);cursor:pointer}
.gameover-card.mini .gameover-alt-btn{padding:9px 14px;font-size:.85rem}
@media (max-width:640px){
  .gameover-card{max-width:88vw;padding:22px 18px 20px;gap:10px}
  .gameover-title{font-size:1.2rem}
  .gameover-mvp-card{width:120px}
}
.table{border-radius:18px;overflow:hidden;margin-bottom:6px;transition:filter .25s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease}
.table.latar-papan-on{padding:9px;border:1px solid var(--line);box-shadow:var(--shadow);background:radial-gradient(circle at 16% 8%, rgba(110,120,180,.35), transparent 52%), radial-gradient(circle at 88% 90%, rgba(90,60,140,.32), transparent 58%), radial-gradient(circle at 92% 6%, rgba(150,90,150,.18), transparent 50%), linear-gradient(160deg,#181a29,#131420 55%,#0f1019)}
#arenaView{position:relative}
.osom-overlay-title{font-family:"Lexend",sans-serif;font-weight:800;color:var(--osom);font-size:1.35rem;letter-spacing:.02em;text-align:center;text-shadow:0 1px 3px rgba(255,255,255,.85);background:rgba(255,255,255,.92);padding:7px 20px;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.14);position:relative;z-index:2}
.osom-pick-row{display:flex}
.osom-pick-card{aspect-ratio:2/3;border-radius:16px;background:var(--surface);border:2px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;box-shadow:0 8px 18px -8px rgba(0,0,0,.5)}
.osom-pick-card:hover,.osom-pick-card:focus-visible{transform:translateY(-14px) scale(1.05);box-shadow:0 18px 30px -10px rgba(0,0,0,.55);border-color:var(--accent);outline:none}
.osom-pick-card .ico{font-size:2.6rem;line-height:1}
.osom-pick-card .lbl{font-family:"Lexend",sans-serif;font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-dim)}
@keyframes osomCardZoomIn{
  0%{opacity:0;transform:scale(1.6)}
  70%{opacity:1;transform:scale(.92)}
  100%{opacity:1;transform:scale(1)}
}
.osom-pick-card.card-intro{animation:osomCardZoomIn .4s cubic-bezier(.22,1,.36,1) both}
.osom-pick-card.card-intro:nth-child(1){animation-delay:.12s}
.osom-pick-card.card-intro:nth-child(2){animation-delay:.26s}
.osom-pick-card.card-intro:nth-child(3){animation-delay:.40s}
.osom-pick-card.picking{pointer-events:none}
.osom-pick-zoomclone{position:fixed;z-index:445;pointer-events:none;border-radius:16px;background:var(--surface);border:2px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;box-shadow:0 30px 70px -14px rgba(0,0,0,.55);transform-origin:center center;will-change:transform,opacity;overflow:hidden}
.osom-pick-zoomclone-white{position:absolute;inset:0;background:#fff;pointer-events:none}
.osom-pick-zoomclone .ico{font-size:2.6rem;line-height:1}
.osom-pick-zoomclone .lbl{font-family:"Lexend",sans-serif;font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-dim)}
.osom-pick-zoomclone.elem-api,.osom-pick-zoomclone.elem-air,.osom-pick-zoomclone.elem-daun{background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important}
.osom-pick-zoomclone.elem-api .ico,.osom-pick-zoomclone.elem-api .lbl,.osom-pick-zoomclone.elem-air .ico,.osom-pick-zoomclone.elem-air .lbl,.osom-pick-zoomclone.elem-daun .ico,.osom-pick-zoomclone.elem-daun .lbl{opacity:0!important}
.osom-pick-zoomclone.elem-daun{background-image:url("ui/osom-daun.webp")!important}
.osom-pick-zoomclone.elem-api{background-image:url("ui/osom-api.webp")!important}
.osom-pick-zoomclone.elem-air{background-image:url("ui/osom-air.webp")!important}
.osom-duelfx-overlay{position:fixed;inset:0;z-index:450;background:rgba(4,6,10,.82);backdrop-filter:blur(14px) saturate(1.05);will-change:opacity}
.osom-duelfx-row{position:absolute;display:flex;align-items:center;justify-content:center;gap:6px;perspective:1200px;will-change:transform}
.osom-duelfx-card{will-change:transform,opacity;backface-visibility:visible;position:relative;flex:0 0 auto;width:min(34vw,190px);aspect-ratio:2/3;border-radius:18px;background:var(--surface);border:2px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;box-shadow:0 34px 80px -16px rgba(0,0,0,.65);transform-origin:center center;transform-style:preserve-3d;backface-visibility:hidden;will-change:transform,opacity}
.osom-duelfx-card .ico{font-size:3rem;line-height:1}
.osom-duelfx-card .lbl{font-family:"Lexend",sans-serif;font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-dim)}
.osom-duelfx-card.elem-api,.osom-duelfx-card.elem-air,.osom-duelfx-card.elem-daun{background-repeat:no-repeat}
.osom-duelfx-card.elem-api .ico,.osom-duelfx-card.elem-api .lbl,.osom-duelfx-card.elem-air .ico,.osom-duelfx-card.elem-air .lbl,.osom-duelfx-card.elem-daun .ico,.osom-duelfx-card.elem-daun .lbl{opacity:0}
.osom-duelfx-card.elem-daun{background-image:url("ui/osom-daun.webp")}
.osom-duelfx-card.elem-api{background-image:url("ui/osom-api.webp")}
.osom-duelfx-card.elem-air{background-image:url("ui/osom-air.webp")}
.osom-duelfx-card.pre-reveal{box-shadow:0 0 46px 14px rgba(255,255,255,.85),0 34px 80px -16px rgba(0,0,0,.65)}
.osom-duelfx-card.pre-reveal.elem-api,.osom-duelfx-card.pre-reveal.elem-air,.osom-duelfx-card.pre-reveal.elem-daun{background-image:none!important;background-color:#fff!important}
.osom-duelfx-winlabel-wrap{position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px;will-change:transform,opacity}
.osom-duelfx-winlabel{font-family:"Lexend",sans-serif;font-weight:800;font-size:clamp(1.3rem,5.2vw,2.3rem);letter-spacing:.02em;white-space:nowrap}
.osom-duelfx-winlabel.win{color:#ffe27a;text-shadow:1px 1px 0 #c9930f,2px 2px 0 #b3830d,3px 3px 0 #9c730c,4px 4px 0 #86630a,5px 5px 10px rgba(0,0,0,.6)}
.osom-duelfx-winlabel.lose{color:#ff9a86;text-shadow:1px 1px 0 #a8331f,2px 2px 0 #922c1b,3px 3px 0 #7c2517,4px 4px 0 #661e13,5px 5px 10px rgba(0,0,0,.6)}
.osom-duelfx-winlabel.tie{color:#e6e9f0;text-shadow:1px 1px 0 #6b7280,2px 2px 0 #565d6e,3px 3px 0 #414653,4px 4px 0 #2c2f38,5px 5px 10px rgba(0,0,0,.6)}
.osom-duelfx-winsub{font-family:"Lexend",sans-serif;font-weight:600;font-size:clamp(.72rem,2.6vw,.95rem);color:#f4f4f8;text-shadow:0 2px 6px rgba(0,0,0,.55);white-space:nowrap}
.osom-hand-pickover.picking-lock .osom-pick-card:not(.picking){opacity:.32;pointer-events:none;transition:opacity .18s ease}
.osom-pick-card.elem-api,.osom-pick-card.elem-air,.osom-pick-card.elem-daun{background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important}
.osom-pick-card.elem-api .ico,.osom-pick-card.elem-api .lbl,.osom-pick-card.elem-air .ico,.osom-pick-card.elem-air .lbl,.osom-pick-card.elem-daun .ico,.osom-pick-card.elem-daun .lbl{opacity:0!important}
.osom-pick-card.elem-daun{background-image:url("ui/osom-daun.webp")!important}
.osom-pick-card.elem-api{background-image:url("ui/osom-api.webp")!important}
.osom-pick-card.elem-air{background-image:url("ui/osom-air.webp")!important}
.osom-hand-pickover.fade-lock{pointer-events:none}
.osom-hand-pickover.fade-lock .osom-pick-card{transition:none!important;transform:none!important}
@keyframes osomDomeGrowIn{
  0%{opacity:0;transform:translateX(-50%) scale(.4)}
  65%{opacity:1;transform:translateX(-50%) scale(1.06)}
  100%{opacity:1;transform:translateX(-50%) scale(1)}
}
.osom-hand-pickover{position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);transform-origin:50% 100%;width:min(94%,480px);max-height:46vh;overflow:hidden;z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;padding:30px 18px 18px;background:var(--surface);border-radius:220px 220px 18px 18px;box-shadow:0 22px 34px -14px rgba(0,0,0,.45),0 2px 0 rgba(0,0,0,.05);opacity:0;animation:osomDomeGrowIn .42s cubic-bezier(.34,1.56,.64,1) forwards}
.osom-hand-pickover.no-intro{animation:none;opacity:1;transform:translateX(-50%) scale(1)}
.osom-hand-pickover.osom-dome-dismiss{animation:osomDomeDismissDown .38s cubic-bezier(.5,0,.75,0) forwards!important;pointer-events:none}
@keyframes osomDomeDismissDown{
  0%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
  100%{opacity:0;transform:translateX(-50%) translateY(60px) scale(.9)}
}
.osom-title-main{font-family:"Lexend",sans-serif;font-weight:900;font-size:1.55rem;letter-spacing:.08em;color:var(--osom);line-height:1}
.osom-title-sub{font-family:"Lexend",sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.05em;color:var(--ink-dim);text-transform:uppercase}
@keyframes osomBubbleBlink{
  0%,100%{opacity:1}
  50%{opacity:.4}
}
.osom-pick-bubble{background:#fff;color:var(--osom);border:2px solid var(--osom);font-family:"Lexend",sans-serif;font-weight:700;font-size:.78rem;padding:5px 16px;border-radius:999px;box-shadow:0 3px 10px rgba(0,0,0,.14);animation:osomBubbleBlink 1.15s ease-in-out infinite}
.osom-duel-overlay{position:absolute;inset:-40px -2px;z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:40px 10px;background:rgba(255,255,255,.68);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:none;border-radius:10px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,black 40px,black calc(100% - 40px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,black 40px,black calc(100% - 40px),transparent 100%);perspective:700px}
.osom-duel-row{display:flex;align-items:center;justify-content:center}
.osom-duel-card{width:84px;aspect-ratio:2/3;border-radius:14px;background:var(--surface);border:2px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;position:relative;box-shadow:0 8px 18px -8px rgba(0,0,0,.5);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.osom-duel-card .ico{font-size:2.1rem;line-height:1}
.osom-duel-card .lbl{font-family:"Lexend",sans-serif;font-weight:700;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-dim)}
.osom-duel-card .lbl2{font-family:"Lexend",sans-serif;font-weight:700;font-size:.6rem;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-dim)}
.osom-duel-card.player{margin-left:-21px}
.osom-duel-card .blank-ico{opacity:.5;filter:grayscale(1)}
.osom-duel-card.winner{z-index:5;transform:scale(1.1);border-color:var(--menang);box-shadow:0 16px 30px -8px rgba(0,0,0,.6)}
.osom-duel-card.loser{z-index:1;filter:grayscale(.35) brightness(.82)}
@keyframes winnerPopUp{
  0%{transform:scale(.7);opacity:.5}
  55%{transform:scale(1.22) translateY(-10px);opacity:1}
  80%{transform:scale(1.04) translateY(-2px)}
  100%{transform:scale(1.1) translateY(-4px)}
}
.osom-duel-card.landed.winner{animation:winnerPopUp .45s cubic-bezier(.34,1.56,.64,1)}
.osom-duel-card.landed.motion-off-1-3{animation:none}
.osom-duel-card.landed.winner.motion-off-1-2{animation:none}
@media (prefers-reduced-motion: reduce){
  .osom-pick-card,.osom-duel-card{transition:none}
  .osom-duel-card.landed.winner{animation:none}
}
@media (max-width:640px){
  .osom-overlay-title{font-size:1.05rem;padding:6px 14px}
  .osom-title-main{font-size:1.2rem}
  .osom-title-sub{font-size:.64rem}
  .osom-pick-bubble{font-size:.7rem;padding:4px 12px}
  .osom-pick-row{gap:10px}
  .osom-pick-card .ico{font-size:2rem}
  .osom-pick-card .lbl{font-size:.68rem}
  .osom-hand-pickover{width:min(96%,340px);max-height:44vh;padding:22px 12px 14px;border-radius:160px 160px 14px 14px;gap:6px}
  .osom-duel-overlay{inset:-26px -2px;padding:26px 8px}
  .osom-duel-card{width:66px}
  .osom-duel-card .ico{font-size:1.6rem}
  .osom-duel-card.player{margin-left:-16px}
}
.side{padding:10px;display:flex;flex-direction:column;gap:8px;border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow)}
.side.p2{background:linear-gradient(180deg,var(--p2-tint),var(--surface) 85%);border-color:var(--badge-p2-bg)}
.side.p1{background:linear-gradient(180deg,var(--p1-tint),var(--surface) 85%);border-color:var(--badge-p1-bg)}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;align-items:start}
.zone{display:flex;flex-direction:row;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}
.zone-head{order:2;flex:0 0 22px;flex-direction:column;align-items:center;justify-content:space-between;padding:6px 1px;gap:3px;font-size:.64rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.zone-head>span:first-child{writing-mode:vertical-rl;white-space:nowrap;opacity:0}
.zone-head .count{writing-mode:vertical-rl;font-weight:800;font-size:.6rem;background:var(--surface);border-radius:6px;padding:2px 3px;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.zone-head{background:var(--surface-2);border-left:3px solid var(--line)}
.zone[data-z="deck"] .zone-head{color:var(--deck);border-left-color:var(--deck)}
.zone[data-z="aktif"] .zone-head{color:var(--aktif);border-left-color:var(--aktif)}
.zone[data-z="sokongan"] .zone-head{color:var(--sokongan);border-left-color:var(--sokongan)}
.zone[data-z="menang"] .zone-head{color:var(--menang);border-left-color:var(--menang)}
.zone[data-z="kalah"] .zone-head{color:var(--kalah);border-left-color:var(--kalah)}
.zone[data-z="hand"] .zone-head{color:var(--hand);border-left-color:var(--hand)}
.deck-count-badge{position:absolute;top:-8px;right:-8px;min-width:22px;height:22px;padding:0 4px;border-radius:50%;background:var(--deck);color:#fff;font-size:.66rem;font-weight:800;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.35);z-index:5;pointer-events:none}
.zone[data-z="botmood"]{overflow:visible}
.zone[data-z="botmood"] .zone-body{width:auto;height:100%;aspect-ratio:1/1;border-radius:50%;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.bot-mood-emoji{font-size:1.7rem;line-height:1;text-align:center;transition:transform .15s ease}
.bot-mood-excited .bot-mood-emoji{animation:botMoodPop .5s ease}
.bot-mood-sad .bot-mood-emoji{animation:botMoodDroop .5s ease}
.bot-mood-excited .bot-mood-emoji.motion-off-5-1{animation:none}
.bot-mood-sad .bot-mood-emoji.motion-off-5-2{animation:none}
@keyframes botMoodPop{
  0%{transform:scale(.7) rotate(0)}
  50%{transform:scale(1.3) rotate(-8deg)}
  100%{transform:scale(1) rotate(0)}
}
@keyframes botMoodDroop{
  0%{transform:translateY(0)}
  50%{transform:translateY(3px) rotate(4deg)}
  100%{transform:translateY(0)}
}
.bot-mood-label{font-size:.6rem;text-align:center;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.03em;font-weight:700;margin-top:2px}
.bot-mood-excited .bot-mood-label{color:var(--menang)}
.bot-mood-sad .bot-mood-label{color:var(--kalah)}
@media (prefers-reduced-motion: reduce){
  .bot-mood-emoji{animation:none !important}
}
.zone-body{order:1;flex:1 1 auto;min-height:0;padding:6px;display:flex;flex-direction:column;gap:5px;overflow-y:auto}
.zone-body.empty{color:var(--ink-dim);font-size:.72rem;text-align:center}
.zone[data-z="hand"]{overflow:visible;z-index:8}
.zone[data-z="hand"]:has(.card.peek,.card.expanded){z-index:460}
.zone[data-z="hand"] .zone-head{border-radius:0 11px 11px 0}
.zone[data-z="hand"] .zone-body{flex-direction:row;gap:0}
.zone[data-z="hand"] .zone-body .hand-slot{overflow:visible}
.zone[data-z="hand"] .card{position:absolute;transition:transform .18s ease,box-shadow .18s ease}
@keyframes cardDealIn{
  0%{opacity:0;transform:translateY(52px) scale(.7) rotate(-7deg)}
  60%{opacity:1;transform:translateY(-6px) scale(1.04) rotate(1deg)}
  100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}
}
.zone[data-z="deck"]{overflow:visible;z-index:4}
@keyframes deckCardExitDown{
  0%{opacity:0;transform:translateX(-50%) translateY(calc(-1 * min(var(--si,0),6) * 3px)) scale(.9)}
  10%{opacity:1;transform:translateX(-50%) translateY(calc(-1 * min(var(--si,0),6) * 3px)) scale(1)}
  26%{opacity:1;transform:translateX(-50%) translateY(calc(-1 * min(var(--si,0),6) * 3px - 5px)) scale(1.14)}
  100%{opacity:0;transform:translateX(-50%) translateY(calc(-1 * min(var(--si,0),6) * 3px + 170px)) scale(1.04)}
}
@keyframes deckCardExitUp{
  0%{opacity:0;transform:translateX(-50%) translateY(calc(-1 * min(var(--si,0),6) * 3px)) scale(.9)}
  10%{opacity:1;transform:translateX(-50%) translateY(calc(-1 * min(var(--si,0),6) * 3px)) scale(1)}
  26%{opacity:1;transform:translateX(-50%) translateY(calc(-1 * min(var(--si,0),6) * 3px + 5px)) scale(1.14)}
  100%{opacity:0;transform:translateX(-50%) translateY(calc(-1 * min(var(--si,0),6) * 3px - 170px)) scale(1.04)}
}
.stack-slot.deck-exit-ghost{z-index:40;pointer-events:none;animation-duration:calc(.6s * var(--deal-speed-mult,1));animation-timing-function:cubic-bezier(.4,0,.7,1);animation-fill-mode:both;animation-delay:var(--ghost-delay,0ms)}
.stack-slot.deck-exit-ghost.ghost-exit-down{animation-name:deckCardExitDown}
.stack-slot.deck-exit-ghost.ghost-exit-up{animation-name:deckCardExitUp}
@keyframes dealCoverFade{
  0%{opacity:0;filter:blur(0px)}
  4%{opacity:1;filter:blur(0px)}
  46%{opacity:1;filter:blur(0px)}
  72%{opacity:1;filter:blur(9px)}
  100%{opacity:0;filter:blur(14px)}
}
.zone[data-z="hand"] .card.card-deal-in .deal-cover{position:absolute;inset:0;background:#fff;animation-name:dealCoverFade;animation-duration:calc(.75s * var(--deal-speed-mult,1));animation-fill-mode:both;animation-delay:var(--deal-delay,0ms);pointer-events:none;z-index:6}
.zone[data-z="aktif"] .zone-body,.zone[data-z="sokongan"] .zone-body{perspective:900px}
.aktif-flip-ghost{position:fixed;pointer-events:none;z-index:9999;animation:aktifFlipHop var(--aktif-flip-ms,650ms) cubic-bezier(.3,.05,.34,1) both}
.aktif-flip-stage{width:100%;height:100%;perspective:900px}
.aktif-flip-card{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:aktifFlipRotate var(--aktif-flip-ms,650ms) cubic-bezier(.3,.05,.34,1) both}
.aktif-flip-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:10px;overflow:hidden}
.aktif-flip-face .card{width:100%;height:100%}
.aktif-flip-face.aktif-flip-back{transform:rotateY(180deg)}
@keyframes aktifFlipHop{
  0%{transform:translateY(0) scale(1)}
  40%{transform:translateY(-14px) scale(1.08)}
  100%{transform:translateY(0) scale(1)}
}
@keyframes aktifFlipRotate{
  0%{transform:rotateY(180deg)}
  60%{transform:rotateY(-4deg)}
  100%{transform:rotateY(0deg)}
}
.zone[data-z="aktif"] .card.aktif-flip-hide,.zone[data-z="sokongan"] .card.aktif-flip-hide{visibility:hidden}
@media (prefers-reduced-motion: reduce){
  .aktif-flip-ghost,.aktif-flip-card{animation:none}
  .aktif-flip-ghost{opacity:0}
}
@keyframes cr7AttackSwing{
  0%{transform:translate(0,0) scale(1)}
  10%{animation-timing-function:cubic-bezier(.11,.7,.3,1);transform:translate(0,calc(-14px * var(--atk-pwr,1))) scale(calc(1.10 * (1 + .04 * (var(--atk-pwr,1) - 1))))}
  12%{animation-timing-function:cubic-bezier(.55,0,1,.45);transform:translate(calc(var(--atk-tx,0px) * -0.15), calc(var(--atk-ty,0px) * -0.15)) scale(calc(1.10 * (1 + .04 * (var(--atk-pwr,1) - 1))))}
  22%{transform:translate(var(--atk-tx,0px), var(--atk-ty,0px)) scale(calc(1.10 * (1 + .1 * (var(--atk-pwr,1) - 1))))}
  27%{transform:translate(0,0) scale(1)}
}
.zone[data-z="aktif"]:has(.card-attack-swing){z-index:300}
.zone[data-z="aktif"] .card.card-attack-swing{animation:cr7AttackSwing 1.5s cubic-bezier(.3,.6,.25,1) both;position:relative;z-index:220}
@keyframes cr7HitShake{
  0%,100%{transform:translate(0,0)}
  5%{transform:translate(0,var(--hit-ty,0px))}
  10%{transform:translate(0,0)}
}
.zone[data-z="aktif"] .card.card-hit-shake{animation:cr7HitShake 1s ease both;position:relative;z-index:210}
.kalah-flip-ghost{position:fixed;pointer-events:none;z-index:9999;animation:kalahFlipMove var(--kalah-flip-ms,900ms) cubic-bezier(.3,.05,.34,1) both}
.kalah-flip-stage{width:100%;height:100%;perspective:900px}
.kalah-flip-card{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:kalahFlipRotate var(--kalah-flip-ms,900ms) cubic-bezier(.3,.05,.34,1) both}
.kalah-flip-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:10px;overflow:hidden}
.kalah-flip-face .card{width:100%;height:100%}
.kalah-flip-face.kalah-flip-back{transform:rotateY(180deg)}
@keyframes kalahFlipMove{
  0%{transform:translate(0,0) scale(1)}
  22%{transform:translate(calc(var(--kalah-tx,0px)*.16),calc(var(--kalah-ty,0px)*.16 - 34px)) scale(1.14)}
  100%{transform:translate(var(--kalah-tx,0px),var(--kalah-ty,0px)) scale(var(--kalah-scale,.6))}
}
@keyframes kalahFlipRotate{
  0%{transform:rotateY(0deg)}
  60%{transform:rotateY(184deg)}
  100%{transform:rotateY(180deg)}
}
@media (prefers-reduced-motion: reduce){
  .kalah-flip-ghost,.kalah-flip-card{animation:none}
  .kalah-flip-ghost{opacity:0}
}
.menang-jump-ghost{position:fixed;pointer-events:none;z-index:9999;animation:menangJumpMove var(--menang-jump-ms,850ms) cubic-bezier(.3,.05,.34,1) both}
.menang-jump-ghost .card{width:100%;height:100%}
@keyframes menangJumpMove{
  0%{transform:translate(0,0) scale(1)}
  22%{transform:translate(calc(var(--menang-tx,0px)*.16),calc(var(--menang-ty,0px)*.16 - 34px)) scale(1.08)}
  100%{transform:translate(var(--menang-tx,0px),var(--menang-ty,0px)) scale(var(--menang-scale,.6))}
}
@media (prefers-reduced-motion: reduce){
  .menang-jump-ghost{animation:none;opacity:0}
}
.zone[data-z="menang"] .hand-slot.menang-pending-hide{opacity:0}
.buang-pop-ghost{position:fixed;pointer-events:none;z-index:9999;animation:buangPopFadeOut var(--buang-pop-ms,480ms) ease-out both}
.buang-pop-ghost .card{width:100%;height:100%}
@keyframes buangPopFadeOut{
  0%{transform:translateY(0) scale(1);opacity:1}
  35%{transform:translateY(-14px) scale(1.08);opacity:1}
  100%{transform:translateY(-26px) scale(.92);opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .buang-pop-ghost{animation:none;opacity:0}
}
.zone[data-z="kalah"] .stack-slot.buang-kalah-arrive{animation:buangKalahFadeIn var(--buang-fade-ms,420ms) ease-out both}
/* Kad Sokongan mendarat di Zon Kalah: kad baharu menekan tindanan sedikit (turun & mendatar), kad di bawahnya ikut bergoyang kecil — tindanan kekal kemas */
.zone[data-z="kalah"] .kalah-fan .hand-slot.sok-kalah-land{animation:kalahLandPress .38s cubic-bezier(.3,.9,.35,1) both}
.zone[data-z="kalah"] .kalah-fan:has(.sok-kalah-land) .hand-slot:not(.sok-kalah-land){animation:kalahStackNudge .38s ease-out both}
@keyframes kalahLandPress{0%{transform:none}40%{transform:translateY(1.2%) scale(.99)}100%{transform:none}}
@keyframes kalahStackNudge{0%{transform:none}40%{transform:translateY(2.5%)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.zone[data-z="kalah"] .kalah-fan .hand-slot.sok-kalah-land,.zone[data-z="kalah"] .kalah-fan:has(.sok-kalah-land) .hand-slot{animation:none}}
@keyframes buangKalahFadeIn{
  0%{opacity:0;transform:scale(.7)}
  100%{opacity:1;transform:scale(1)}
}
@media (prefers-reduced-motion: reduce){
  .zone[data-z="kalah"] .stack-slot.buang-kalah-arrive{animation:none}
}
@keyframes boardShake{
  0%,100%{transform:translate(0,0)}
  6.7%{animation-timing-function:ease-in-out;transform:translate(calc(1.25% * var(--board-shake-mult,1)),0)}
  13.3%{animation-timing-function:ease-in-out;transform:translate(calc(-.85% * var(--board-shake-mult,1)),calc(.78% * var(--board-shake-mult,1)))}
  20%{animation-timing-function:ease-in-out;transform:translate(calc(.09% * var(--board-shake-mult,1)),calc(-1.05% * var(--board-shake-mult,1)))}
  26.7%{animation-timing-function:ease-in-out;transform:translate(calc(.58% * var(--board-shake-mult,1)),calc(.75% * var(--board-shake-mult,1)))}
  33.3%{animation-timing-function:ease-in-out;transform:translate(calc(-.84% * var(--board-shake-mult,1)),calc(-.15% * var(--board-shake-mult,1)))}
  40%{animation-timing-function:ease-in-out;transform:translate(calc(.63% * var(--board-shake-mult,1)),calc(-.4% * var(--board-shake-mult,1)))}
  46.7%{animation-timing-function:ease-in-out;transform:translate(calc(-.17% * var(--board-shake-mult,1)),calc(.63% * var(--board-shake-mult,1)))}
  53.3%{animation-timing-function:ease-in-out;transform:translate(calc(-.28% * var(--board-shake-mult,1)),calc(-.53% * var(--board-shake-mult,1)))}
  60%{animation-timing-function:ease-in-out;transform:translate(calc(.52% * var(--board-shake-mult,1)),calc(.19% * var(--board-shake-mult,1)))}
  66.7%{animation-timing-function:ease-in-out;transform:translate(calc(-.46% * var(--board-shake-mult,1)),calc(.19% * var(--board-shake-mult,1)))}
  73.3%{animation-timing-function:ease-in-out;transform:translate(calc(.19% * var(--board-shake-mult,1)),calc(-.41% * var(--board-shake-mult,1)))}
  80%{animation-timing-function:ease-in-out;transform:translate(calc(.12% * var(--board-shake-mult,1)),calc(.38% * var(--board-shake-mult,1)))}
  86.7%{animation-timing-function:ease-in-out;transform:translate(calc(-.26% * var(--board-shake-mult,1)),calc(-.15% * var(--board-shake-mult,1)))}
  93.3%{animation-timing-function:ease-in-out;transform:translate(calc(.2% * var(--board-shake-mult,1)),calc(-.04% * var(--board-shake-mult,1)))}
}
.table.board-shake{animation:boardShake .49s ease-in-out both}
/* Hentakan kad kuat (flip kad kuat / serangan kuat bergegar): setiap kad di papan terangkat BERASINGAN — tinggi, condong,
   tempoh & kelewatan berbeza ikut zon (--sl-z), sisi (--sl-s) dan kedudukan dalam tindanan (--sl-h/--sl-r/--sl-dd/--sl-t).
   Dek terangkat sebagai satu tindanan. Kad Aktif hanya bila disenarai dalam data-sl-ak (cth. kad Aktif lawan yang baru masuk).
   Guna sifat translate/scale/rotate berasingan supaya tidak mengganggu transform sedia ada. */
.table.stomp-lift .zone:is([data-z="menang"],[data-z="kalah"],[data-z="sokongan"]) .zone-body > :not(.empty-card-ph),
.table.stomp-lift .zone[data-z="deck"] .zone-body,
.table.stomp-lift[data-sl-ak~="p1"] .side.p1 .zone[data-z="aktif"] .zone-body > :not(.empty-card-ph),
.table.stomp-lift[data-sl-ak~="p2"] .side.p2 .zone[data-z="aktif"] .zone-body > :not(.empty-card-ph){animation:stompLift var(--sl-t,.8s) cubic-bezier(.3,.6,.4,1) calc(var(--sl-z,0ms) + var(--sl-s,0ms) + var(--sl-dd,0ms)) both}
.table.stomp-lift .side.p2{--sl-s:45ms}
.table.stomp-lift .zone[data-z="deck"]{--sl-z:0ms}
.table.stomp-lift .zone[data-z="menang"]{--sl-z:25ms}
.table.stomp-lift .zone[data-z="aktif"]{--sl-z:35ms}
.table.stomp-lift .zone[data-z="sokongan"]{--sl-z:55ms}
.table.stomp-lift .zone[data-z="kalah"]{--sl-z:80ms}
/* Angkat tidak sekata: setiap kad berpaksi pada satu bucu bawah (kiri/kanan berselang) — satu sisi terangkat lebih tinggi,
   condong, kemudian turun & mendap; tiada lantunan spring */
.table.stomp-lift .zone-body > :nth-child(odd){transform-origin:12% 100%;--sl-r:-4.2deg;--sl-x:.5cqw}
.table.stomp-lift .zone-body > :nth-child(even){transform-origin:88% 100%;--sl-r:3.6deg;--sl-x:-.5cqw}
.table.stomp-lift .zone-body > :nth-child(3n+1){--sl-h:2.6cqw;--sl-dd:0ms;--sl-t:.78s}
.table.stomp-lift .zone-body > :nth-child(3n+2){--sl-h:1.7cqw;--sl-dd:60ms;--sl-t:.7s}
.table.stomp-lift .zone-body > :nth-child(3n){--sl-h:3.2cqw;--sl-dd:110ms;--sl-t:.86s}
.table.stomp-lift .zone[data-z="deck"] .zone-body{transform-origin:25% 100%;--sl-h:1.6cqw;--sl-r:-2.4deg;--sl-x:.3cqw;--sl-t:.72s}
.table.stomp-lift .side.p2 .zone-body > :nth-child(odd){--sl-r:-3deg}
.table.stomp-lift .side.p2 .zone-body > :nth-child(even){--sl-r:4.4deg}
@keyframes stompLift{0%{translate:0 0;rotate:0deg}18%{translate:var(--sl-x,0) calc(var(--sl-h,2.6cqw) * -1);rotate:var(--sl-r,3deg)}42%{translate:calc(var(--sl-x,0) * .6) calc(var(--sl-h,2.6cqw) * -.7);rotate:calc(var(--sl-r,3deg) * 1.15)}78%{translate:0 .15cqw;rotate:calc(var(--sl-r,3deg) * -.12)}100%{translate:0 0;rotate:0deg}}
@media (prefers-reduced-motion:reduce){.table.stomp-lift .zone .zone-body,.table.stomp-lift .zone .zone-body > *{animation:none}}
@media (prefers-reduced-motion: reduce){
  .card.card-attack-swing,.card.card-hit-shake{animation:none}
  .table.board-shake{animation:none}
}
/* Letak kad (startPickAnim / pickJumpFly): kad di Tangan terus kosong (hantu .pj-card yang melompat), ruangnya ditutup
   selepas pickOutMs; kad tertutup di zon tersembunyi sehingga hantu mendarat (pickInDelayMs, delay sebaris) lalu "tap" kecil. */
.zone[data-z="hand"] .card.card-pick-out{visibility:hidden;pointer-events:none}
@keyframes cardPickLand{
  0%{opacity:0;transform:scale(1)}
  1%{opacity:1;transform:scale(1)}
  40%{opacity:1;transform:scale(.95)}
  100%{opacity:1;transform:scale(1)}
}
.card.card-pick-in{animation-name:cardPickLand;animation-duration:calc(.3s * var(--pick-speed-mult,1));animation-timing-function:cubic-bezier(.3,1.2,.5,1);animation-fill-mode:both;z-index:35}
.pj-card{position:fixed;z-index:28600;pointer-events:none;margin:0;perspective:900px;transform-origin:50% 50%;will-change:transform}
.pj-inner{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.pj-face{position:absolute;inset:0;border-radius:8% / 5.33%;outline:1px solid rgba(255,255,255,.55);outline-offset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--surface) center/cover no-repeat;box-shadow:0 16px 34px rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center}
.pj-face img{width:100%;height:100%;object-fit:cover;display:block}
.pj-back{transform:rotateY(180deg)}
.pj-nm{font:700 12px/1.2 "Lexend",system-ui,sans-serif;color:#fff;text-align:center;padding:6px}
.zone[data-z="aktif"].pick-in-run,.zone[data-z="sokongan"].pick-in-run{z-index:30}
@media (prefers-reduced-motion: reduce){
  .card.card-pick-out,.card.card-pick-in{animation:none}
}
.zone[data-z="hand"] .zone-body:hover .hand-slot,.zone[data-z="hand"] .zone-body:focus-within .hand-slot{overflow:visible}
.zone[data-z="hand"] .zone-body:hover .card,.zone[data-z="hand"] .zone-body:focus-within .card{top:auto;bottom:0;transform:translateY(-34px);z-index:10;box-shadow:0 10px 22px -8px rgba(0,0,0,.35)}
.zone[data-z="hand"] .zone-body:hover .card:hover,.zone[data-z="hand"] .zone-body .card.peek,.zone[data-z="hand"] .zone-body .card:active{top:auto;bottom:0;transform:translateY(-54px) scale(1.12);z-index:20;box-shadow:0 14px 28px -10px rgba(0,0,0,.42)}
.zone[data-z="hand"].hand-settled .card:not(.card-pick-out),.zone[data-z="hand"].hand-settled .hand-slot{transition:none!important}
.zone[data-z="hand"].hand-settled .zone-body{pointer-events:none}
.zone[data-z="hand"] .card.expanded{top:auto;bottom:0;max-height:min(320px,60vh)}
.zone[data-z="hand"] .hand-slot:has(.card.expanded){overflow:visible;z-index:16}
.hand-slot{flex:0 0 auto;width:112px;height:74px;position:relative;overflow:clip;overflow-clip-margin:26px;transition:margin .18s ease}
.hand-slot:hover,.hand-slot:focus-within{overflow:visible;z-index:15}
.zone-body[data-hand-count="1"] .hand-slot{margin:0 2px}
.zone-body[data-hand-count="4"] .hand-slot{margin:0 -14px}
.zone-body[data-hand-count="5"] .hand-slot{margin:0 -20px}
.zone-body[data-hand-count="6"] .hand-slot{margin:0 -26px}
.zone[data-z="aktif"],.zone[data-z="sokongan"],.zone[data-z="menang"]{overflow:visible}
.zone[data-z="aktif"] .zone-body,.zone[data-z="sokongan"] .zone-body{flex-direction:row;gap:5px}
.zone[data-z="aktif"] .card.uniform,.zone[data-z="sokongan"] .card.uniform{height:calc(100% - 14px);width:auto;aspect-ratio:2/3;flex:0 0 auto;overflow:hidden;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;text-align:left;padding:6px 5px}
.zone[data-z="aktif"] .card.uniform .stats,.zone[data-z="sokongan"] .card.uniform .stats{white-space:normal;line-height:1.25}
.zone[data-z="aktif"] .card.uniform.expanded,.zone[data-z="sokongan"] .card.uniform.expanded{aspect-ratio:auto;height:auto;max-height:100%;overflow-y:auto}
.zone[data-z="aktif"] .card.uniform.has-img,.zone[data-z="sokongan"] .card.uniform.has-img{padding:0}
.zone[data-z="aktif"] .card.uniform.has-img.expanded,.zone[data-z="sokongan"] .card.uniform.has-img.expanded{aspect-ratio:2/3;height:calc(100% - 14px);overflow:hidden}
.zone[data-z="aktif"] .aktif-hostage-stack{position:relative;height:calc(100% - 14px);width:auto;aspect-ratio:2/3;flex:0 0 auto}
.aktif-hostage-stack .hostage-behind{position:absolute;inset:0;transform:translate(9px,9px) scale(.93);z-index:1;filter:brightness(.65) saturate(.75);pointer-events:none}
.aktif-hostage-stack .hostage-front{position:absolute;inset:0;z-index:2}
.zone[data-z="aktif"] .aktif-hostage-stack .hostage-behind .card.uniform,.zone[data-z="aktif"] .aktif-hostage-stack .hostage-front .card.uniform{height:100%;width:100%}
.aktif-hostage-stack .hostage-tag{position:absolute;top:-7px;left:50%;transform:translateX(-50%);z-index:3;background:#c0392b;color:#fff;font-size:9px;font-weight:700;padding:1px 7px;border-radius:8px;letter-spacing:.03em;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.4);pointer-events:none}
.zone[data-z="aktif"] .card.closed-card,.zone[data-z="sokongan"] .card.closed-card{height:calc(100% - 14px);width:auto;min-width:0;aspect-ratio:2/3;flex:0 0 auto;overflow:visible;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6px 5px}
.zone[data-z="kalah"] .zone-body.kalah-stack{position:relative;overflow:hidden;padding:2px;display:block}
.stack-slot{position:absolute;left:50%;top:50%;aspect-ratio:2/3;z-index:calc(var(--si,0) + 1)}
.zone[data-z="kalah"] .stack-slot{transition:opacity .28s ease}
.zone[data-z="kalah"] .stack-slot.kalah-pending-hide{opacity:0}
.stack-slot .card{height:100%;width:100%;overflow:hidden}
.stack-slot .card.uniform.expanded{aspect-ratio:auto;height:auto;max-height:220px;overflow-y:auto;z-index:50}
.card.deck-stack-card{display:flex;align-items:center;justify-content:center;font-size:1.3rem;background:var(--deck-bg,var(--surface))}
.card.deck-empty-card{background:transparent;color:var(--ink-dim);font-size:.62rem;line-height:1.25;padding:4px;text-align:center}
.cardback-classic,.cardback-emblem,.cardback-collage,.cardback-manga{background-size:114% 110%!important;background-position:center!important;background-repeat:no-repeat!important;border-color:rgba(0,0,0,.35)!important;border-radius:8% / 5.33%!important}
.cardback-classic .deck-closed-back,.cardback-classic .closed-back,.cardback-classic .blank-ico,.cardback-emblem .deck-closed-back,.cardback-emblem .closed-back,.cardback-emblem .blank-ico,.cardback-collage .deck-closed-back,.cardback-collage .closed-back,.cardback-collage .blank-ico,.cardback-manga .deck-closed-back,.cardback-manga .closed-back,.cardback-manga .blank-ico{opacity:0!important}
.cardback-classic{background-image:url("ui/cardback-classic.webp")!important}
.cardback-emblem{background-image:url("ui/cardback-emblem.webp")!important}
.cardback-collage{background-image:url("ui/cardback-collage.webp")!important}
.cardback-manga{background-image:url("ui/cardback-manga.webp")!important}
.osomback-daun,.osomback-api,.osomback-air{background-size:114% 110%!important;background-position:center!important;background-repeat:no-repeat!important;border-color:rgba(0,0,0,.35)!important;border-radius:8% / 5.33%!important}
.osomback-daun .deck-closed-back,.osomback-daun .closed-back,.osomback-daun .blank-ico,.osomback-api .deck-closed-back,.osomback-api .closed-back,.osomback-api .blank-ico,.osomback-air .deck-closed-back,.osomback-air .closed-back,.osomback-air .blank-ico{opacity:0!important}
.osomback-daun{background-image:url("ui/osom-daun.webp")!important}
.osomback-api{background-image:url("ui/osom-api.webp")!important}
.osomback-air{background-image:url("ui/osom-air.webp")!important}
.zone[data-z="menang"] .zone-body{flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;justify-content:safe center;gap:0;overflow-x:auto;overflow-y:visible;max-height:none;padding:6px 14px 6px 4px}
.zone[data-z="menang"] .hand-slot{width:auto;aspect-ratio:2/3}
.zone[data-z="menang"] .card{position:absolute;width:100%}
.zone[data-z="menang"] .zone-body:hover .hand-slot,.zone[data-z="menang"] .zone-body:focus-within .hand-slot{overflow:visible}
#wrap:not(.papan-kotak) .zone[data-z="menang"] .zone-body:hover .card,#wrap:not(.papan-kotak) .zone[data-z="menang"] .zone-body:focus-within .card{transform:translateY(-10px);z-index:10;box-shadow:0 8px 16px -8px rgba(0,0,0,.35)}
#wrap:not(.papan-kotak) .zone[data-z="menang"] .zone-body:hover .card:hover,#wrap:not(.papan-kotak) .zone[data-z="menang"] .zone-body .card.peek,#wrap:not(.papan-kotak) .zone[data-z="menang"] .zone-body .card:active{transform:translateY(-16px) scale(1.1);z-index:20;box-shadow:0 10px 20px -8px rgba(0,0,0,.4)}
.zone[data-z="menang"] .hand-slot:has(.card.peek){overflow:visible;z-index:15}
.zone[data-z="menang"] .card.expanded{top:auto;bottom:0;max-height:min(220px,55vh);z-index:25}
.zone[data-z="menang"] .hand-slot:has(.card.expanded){overflow:visible;z-index:16}
.zone[data-z="deck"] .zone-body.empty,.zone[data-z="aktif"] .zone-body.empty,.zone[data-z="sokongan"] .zone-body.empty,.zone[data-z="menang"] .zone-body.empty,.zone[data-z="kalah"] .zone-body.empty{flex-direction:row}
.empty-card-ph{height:calc(100% - 14px);width:auto;aspect-ratio:2/3;border:1.5px dotted var(--line);border-radius:9px;display:flex;align-items:center;justify-content:center;text-align:center;padding:6px;color:var(--ink-dim);font-size:.68rem;line-height:1.3}
.donebar{flex-basis:100%;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.done-btn{font:inherit;font-weight:700;font-size:.8rem;border:none;border-radius:9px;padding:9px 16px;background:var(--menang);color:#fff;cursor:pointer}
.zone.box-blink{animation:boxBlink .4s ease-in-out 3}
.zone.box-blink.elem-api{--blinkcolor:var(--elem-api)}
.zone.box-blink.elem-air{--blinkcolor:var(--elem-air)}
.zone.box-blink.elem-daun{--blinkcolor:var(--elem-daun)}
@keyframes boxBlink{
  0%,100%{box-shadow:0 0 0 0 var(--blinkcolor,var(--accent));border-color:var(--line)}
  50%{box-shadow:0 0 0 6px var(--blinkcolor,var(--accent));border-color:var(--blinkcolor,var(--accent))}
}
.zone.brik-blink{animation:brikBlink .4s ease-in-out 5}
@keyframes brikBlink{
  0%,100%{box-shadow:0 0 0 0 var(--kalah);border-color:var(--line)}
  50%{box-shadow:0 0 0 6px var(--kalah);border-color:var(--kalah)}
}
@keyframes iconPop{
  0%{transform:scale(.7)}
  60%{transform:scale(1.2)}
  100%{transform:scale(1)}
}
.osom-duel-card.landed{animation:iconPop .35s ease}
@media (prefers-reduced-motion: reduce){
  .zone.box-blink,.zone.brik-blink,.osom-duel-card.landed{animation:none}
}
.thinking .dots span{opacity:0;animation:dotfade 1.2s infinite}
.thinking .dots span:nth-child(1){animation-delay:0s}
.thinking .dots span:nth-child(2){animation-delay:.2s}
.thinking .dots span:nth-child(3){animation-delay:.4s}
.thinking.dots-static .dots span{opacity:1;animation:none}
@keyframes dotfade{
  0%,80%,100%{opacity:0}
  40%{opacity:1}
}
@media (prefers-reduced-motion: reduce){
  .thinking .dots span{animation:none;opacity:1}
}
.zone[data-z="botmood"] .zone-body{padding:10px 8px;align-items:center;justify-content:center;text-align:center;font-size:.72rem}
.card{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--line);border-radius:9px;padding:7px 8px;position:relative;font-size:.78rem}
.card.closed-hand-card{border-left-width:1px}
#wrap:not(.cardfx-off) .card[data-t="S"],#wrap:not(.cardfx-off) .card[data-t="AR"],#wrap:not(.cardfx-off) .card[data-t="SR"]{isolation:isolate}
#wrap:not(.cardfx-off) .card[data-t="S"]{box-shadow:0 0 12px 3px rgba(255,214,0,.55)}
#wrap:not(.cardfx-off) .card[data-t="S"]::before{padding:3px;background:conic-gradient(from 0deg,#fff6c8,#e8c000,#fffbe0,#e8c000,#fff6c8)}
#wrap:not(.cardfx-off) .card[data-t="AR"]{box-shadow:0 0 14px 3px rgba(255,255,255,.5),0 0 24px 7px rgba(212,175,55,.5)}
#wrap:not(.cardfx-off) .card[data-t="AR"]::before{padding:4px;background:conic-gradient(from 0deg,#fff8dc,#d4af37,#ffffff,#d4af37,#fff8dc)}
#wrap:not(.cardfx-off) .card[data-t="SR"]{box-shadow:0 0 18px 4px rgba(255,224,102,.65),0 0 30px 9px rgba(255,179,0,.6)}
#wrap:not(.cardfx-off) .card[data-t="SR"]::before{padding:5px;background:conic-gradient(from 0deg,#fff2a8,#ffcc33,#fffbe0,#ffb300,#fff2a8)}
#wrap:not(.cardfx-off) .card[data-t="S"]::before,#wrap:not(.cardfx-off) .card[data-t="AR"]::before,#wrap:not(.cardfx-off) .card[data-t="SR"]::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;box-sizing:border-box;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;display:none}
@keyframes hpGlowGold{
  0%,100%{box-shadow:0 0 0 0 rgba(232,180,0,0)}
  50%{box-shadow:0 0 16px 5px rgba(255,205,60,.9)}
}
@keyframes hpGlowRed{
  0%,100%{box-shadow:0 0 0 0 rgba(201,48,47,0)}
  50%{box-shadow:0 0 16px 5px rgba(230,60,60,.9)}
}
.card.hp-glow-up{animation:hpGlowGold .75s ease-in-out 3}
.card.hp-glow-down{animation:hpGlowRed .6s steps(2,jump-end) 3}
.card .row1{display:flex;justify-content:space-between;gap:6px;align-items:baseline}
.card .nm{font-weight:600;font-size:.8rem}
.card .nmwrap{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.cond-badge{font-family:"Lexend",sans-serif;font-size:.56rem;font-weight:700;letter-spacing:.03em;color:#ffd27a;background:#4a3410;border:1px solid #e0a63c;border-radius:5px;padding:1px 5px;white-space:nowrap;border-color:#8a6a24}
.cond-badge.locked{color:#ff9d9d;background:#3a1818;border-color:#7a3a3a}
.bersyarat-note{font-size:.62rem;color:var(--ink-dim);margin-top:3px;line-height:1.3}
.bersyarat-note.met{color:#1a9d63}
.bersyarat-note.unmet{color:#c9463a}
.card .stats{font-size:.68rem;color:var(--ink-dim);white-space:nowrap}
.card .type{font-size:.62rem;color:var(--ink-dim);margin-top:1px}
.card .fx{font-size:.68rem;color:var(--ink-dim);margin-top:4px;line-height:1.35}
.card.uniform{display:flex;flex-direction:column;overflow:hidden}
.card.uniform .fx{display:none}
.card.uniform.expanded{aspect-ratio:auto;overflow:visible}
.card.uniform.expanded .fx{display:block}
.card.uniform.has-img{padding:0;background-size:cover;background-position:center;background-repeat:no-repeat;aspect-ratio:2/3!important}
.card.uniform.has-img.expanded{aspect-ratio:2/3!important;overflow:hidden}
.card.uniform.has-img .activate-btn{bottom:8px}
.card-expand-btn{position:absolute;right:4px;bottom:4px;width:19px;height:19px;border-radius:50%;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);cursor:pointer;font-size:.6rem;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;z-index:6}
.card.uniform.expanded .card-expand-btn{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.card .actions{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.card .actions button,.card .actions select{font:inherit;font-size:.64rem;border-radius:6px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);padding:3px 6px;cursor:pointer}
.card.uniform.has-img:hover,.card.uniform.has-img.peek{transform:scale(1.16);z-index:12;box-shadow:0 12px 26px -8px rgba(0,0,0,.45)}
.closed-label{display:none}
.card.stageable{cursor:pointer;position:relative;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;padding-bottom:14px}
.card.stageable:hover,.card.stageable.peek{transform:scale(1.07);box-shadow:0 10px 22px -8px rgba(0,0,0,.35);border-color:var(--stage-ready);border-width:2px;z-index:5}
.card.stageable .activate-btn{position:absolute;left:50%;bottom:6px;transform:translateX(-50%) translateY(6px);opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease;background:var(--stage-ready);color:var(--stage-ready-ink);border:none;border-radius:8px;padding:5px 14px;font-weight:700;font-size:.68rem;cursor:pointer;white-space:nowrap}
.card.stageable:hover .activate-btn,.card.stageable.peek .activate-btn{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.card.hand-locked-support:hover{border-color:var(--stage-locked);border-width:2px}
.card.hand-locked-cond:hover{border-color:var(--stage-cond);border-width:2px;box-shadow:0 0 0 4px var(--stage-cond-ring)}
.card.hand-locked-cond:hover,.card.hand-locked-cond.peek,.card.hand-locked-support:hover,.card.hand-locked-support.peek{overflow:visible}
.card.hand-locked-cond .cond-btn,.card.hand-locked-support .cond-btn{position:absolute;left:50%;bottom:6px;transform:translateX(-50%) translateY(6px);opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease;color:#fff;border:none;border-radius:8px;padding:5px 14px;font-weight:700;font-size:.68rem;text-align:center;white-space:nowrap;cursor:not-allowed;z-index:6}
.card.hand-locked-cond .cond-btn{background:var(--stage-cond)}
.card.hand-locked-support .cond-btn{background:var(--stage-locked)}
.card.hand-locked-cond:hover .cond-btn,.card.hand-locked-cond.peek .cond-btn,.card.hand-locked-support:hover .cond-btn,.card.hand-locked-support.peek .cond-btn{opacity:1;transform:translateX(-50%) translateY(0)}
.card.hand-locked-cond .cond-note,.card.hand-locked-support .cond-note{position:absolute;left:50%;width:176px;max-width:82vw;transform:translateX(calc(-50% + var(--dx,0px))) translateY(0);color:#fff;border-radius:8px;padding:6px 9px;font-size:.56rem;font-weight:600;line-height:1.32;text-align:center;opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease;z-index:25;box-shadow:0 8px 16px -6px rgba(0,0,0,.45)}
.card.hand-locked-cond .cond-note{background:var(--stage-cond-bg)}
.card.hand-locked-support .cond-note{background:var(--stage-locked-bg)}
.card.hand-locked-cond .cond-note::before,.card.hand-locked-support .cond-note::before{content:"";position:absolute;left:calc(50% - var(--dx,0px));transform:translateX(-50%);border-left:6px solid transparent;border-right:6px solid transparent}
.card.hand-locked-cond:hover .cond-note,.card.hand-locked-cond.peek .cond-note,.card.hand-locked-support:hover .cond-note,.card.hand-locked-support.peek .cond-note{opacity:1;transform:translateX(calc(-50% + var(--dx,0px))) translateY(4px)}
@media (max-width:640px){
  .card.hand-locked-cond .cond-note,.card.hand-locked-support .cond-note{width:150px;font-size:.52rem}
}
.efek-badge{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;font-size:.62rem;line-height:1;font-weight:700;color:#fff;margin-left:4px;vertical-align:middle;cursor:help}
.efek-badge.e1{background:var(--accent)}
.efek-badge.e2{background:var(--menang)}
.efek-badge.e3{background:var(--kalah)}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;max-height:420px;overflow-y:auto;margin-top:10px}
.card.pick-card{cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.card.pick-card:hover{transform:scale(1.05);box-shadow:0 8px 18px -8px rgba(0,0,0,.35);border-color:var(--accent);border-width:2px;z-index:5}
.card.pick-card.unselectable{cursor:not-allowed;filter:grayscale(1) blur(1.2px);opacity:.5}
.card.pick-card.unselectable:hover{transform:none;box-shadow:none;border-color:var(--line)}
.pick-note{margin-top:4px;font-size:.62rem;font-weight:700;color:var(--kalah);text-transform:uppercase;letter-spacing:.03em}
.card.pick-card.has-img{padding:0;aspect-ratio:2/3;background-size:cover;background-position:center;background-repeat:no-repeat;position:relative}
.card.pick-card.has-img .pick-note{position:absolute;left:0;right:0;bottom:0;margin:0;padding:4px 6px;background:rgba(0,0,0,.72);color:#fff;text-align:center}
.hpbar{display:flex;height:6px;border-radius:4px;background:var(--surface-2);overflow:hidden;margin:5px 0 3px;border:1px solid var(--line)}
.hpbar > i{display:block;height:100%;background:var(--menang)}
.hpbar.low > i{background:var(--kalah)}
.hpbar > b{display:block;height:100%;background:var(--hp-bonus);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.hp-bonus-tag{color:var(--hp-bonus);font-weight:700}
.stat-effect-badge{font-weight:700;margin-left:3px;cursor:help;font-size:.9em}
.stat-effect-badge.neg{color:var(--kalah)}
.stat-effect-badge.pos{color:var(--menang)}
.stat-value.neg{color:var(--kalah);font-weight:700}
.stat-value.pos{color:var(--menang);font-weight:700}
.strip-status{display:inline-block;font-family:"Lexend",sans-serif;font-weight:700;font-size:.68rem;color:var(--ink-dim);letter-spacing:.05em;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:4px 12px;box-shadow:var(--shadow)}
.strip-status-box{display:flex;align-items:center;justify-content:center;width:100%}
.effect-pick-overlay{position:absolute;left:-4px;right:-4px;top:-4px;height:min(460px,76vh);z-index:97;display:flex;flex-direction:column;padding:44px 14px 40px;background:rgba(78,26,150,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:none;border-radius:12px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,black 40px,black calc(100% - 40px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,black 40px,black calc(100% - 40px),transparent 100%);animation:effectPickPopIn .22s ease-out}
@keyframes effectPickPopIn{
  from{opacity:0;transform:translateY(-10px)}
  to{opacity:1;transform:translateY(0)}
}
.effect-pick-overlay h3{margin:0 0 4px;font-size:.8rem;color:#fff;text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.effect-pick-overlay .hint{font-size:.64rem;color:#e6d8fb;text-align:center;margin-bottom:8px}
.effect-pick-overlay .pick-grid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));max-height:none;overflow-y:auto;margin-top:0;flex:1;min-height:0;padding-right:2px}
.effect-pick-overlay .fade-confirm{display:flex;align-items:center;justify-content:center;flex:1;font-family:"Lexend",sans-serif;font-weight:700;color:#fff;font-size:.9rem;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.effect-pick-overlay.fading{animation:none;pointer-events:none}
.effect-pick-overlay.motion-off-4-1{animation:none}
@media (prefers-reduced-motion: reduce){
  .effect-pick-overlay{animation:none}
}
.strip-main{display:flex;align-items:center;justify-content:center;gap:10px;width:100%}
.strip-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:1;min-width:0}
.battlestrip .scorepips{flex-direction:column;gap:3px;align-items:center}
.battlestrip .pips{flex-direction:row;gap:3px}
.battlestrip .pip{width:15px;height:15px;border-radius:3px}
.battlestrip .avatar-frame{width:26px;height:26px}
.battlerow{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.statgroup{display:flex;gap:4px;width:140px}
.badge{flex:0 0 auto;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:var(--shadow);border:2px solid var(--surface);padding:4px 8px;gap:2px}
.badge.atk{width:auto;height:auto}
.badge .statline{display:flex;align-items:baseline;justify-content:center;gap:4px;white-space:nowrap;width:100%}
.badge .lbl{font-family:"Lexend",sans-serif;font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;opacity:.85;line-height:1}
.badge .val{font-family:"Lexend",sans-serif;font-size:.76rem;font-weight:700;line-height:1.1}
.badge.p2{background:var(--badge-p2-bg);color:var(--badge-p2-ink)}
.badge.p1{background:var(--badge-p1-bg);color:var(--badge-p1-ink)}
.badge.empty{background:var(--surface);color:var(--ink-dim);border-color:var(--line)}
.badge.hp{flex:1;min-width:0;padding:4px 8px;background:linear-gradient(to right, var(--hpring,var(--menang)) calc(var(--hppct,100)*1%), rgba(20,22,32,.55) 0);transition:background .35s ease}
.badge.hp .lbl,.badge.hp .val,.badge.hp .hp-bonus-tag{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.55)}
.badge.hp.empty{background:var(--surface)}
.badge.hp.empty .lbl,.badge.hp.empty .val{color:var(--ink-dim);text-shadow:none}
@media (prefers-reduced-motion: reduce){
  .badge.hp{transition:none}
}
.aktif-stat-circle{width:50px;height:50px;flex:0 0 auto;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid var(--surface);box-shadow:var(--shadow)}
.aktif-stat-circle.atk{background:var(--kalah)}
.aktif-stat-circle.hp{background:var(--menang)}
.aktif-stat-circle.e1{background:var(--accent)}
.aktif-stat-circle.e2{background:var(--menang)}
.aktif-stat-circle.e3{background:var(--kalah)}
.aktif-stat-circle .circle-ico{font-size:.5rem;line-height:1}
.aktif-stat-circle .circle-val{font-size:1rem;font-weight:800;color:#fff;line-height:1.15;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.aktif-stat-circle.e1 .circle-val,.aktif-stat-circle.e2 .circle-val,.aktif-stat-circle.e3 .circle-val{font-size:1.7rem}
.zone-body.aktif-body-detached{gap:14px}
.aktif-hp-efek-col{display:flex;flex-direction:column;align-items:center;gap:10px;flex:0 0 auto}
@media (max-width:640px){
  .aktif-stat-circle{width:36px;height:36px}
  .aktif-stat-circle .circle-ico{font-size:.34rem}
  .aktif-stat-circle .circle-val{font-size:.7rem}
  .aktif-stat-circle.e1 .circle-val,.aktif-stat-circle.e2 .circle-val,.aktif-stat-circle.e3 .circle-val{font-size:1.2rem}
  .zone-body.aktif-body-detached{gap:8px}
  .aktif-hp-efek-col{gap:6px}
}
.zone[data-z="aktif"] .aktif-hostage-stack.shell-hit-shake{animation:cr7HitShake 1s ease both;z-index:210}
@media (prefers-reduced-motion: reduce){
  .aktif-hostage-stack.shell-hit-shake{animation:none}
}
.control{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:var(--shadow);margin-bottom:14px}
.control h3{margin:0 0 6px;font-size:.9rem}
.control .hint{font-size:.8rem;color:var(--ink-dim);margin-bottom:10px}
.fxblock{border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-bottom:8px;background:var(--surface-2)}
.fxblock .who{font-size:.68rem;font-weight:700;text-transform:uppercase;color:var(--ink-dim);letter-spacing:.05em}
.fxblock .txt{font-size:.8rem;margin-top:3px}
.fxblock .none{font-size:.78rem;color:var(--ink-dim);font-style:italic}
.picks{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
body.arena-cmd-dock{padding-bottom:calc(20px + var(--bottomnav-h,64px) + 64px + env(safe-area-inset-bottom,0px)) !important}
.reset-btn{font:inherit;font-size:.8rem;font-weight:700;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:9px;padding:9px 16px;cursor:pointer}
.reset-btn.start{font-weight:700;font-size:.9rem;background:var(--accent);color:var(--accent-ink);border:none;padding:11px 22px;border-radius:11px;box-shadow:var(--shadow);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.reset-btn.circle-x{width:38px;height:38px;flex:0 0 auto;padding:0;border-radius:9px;border:2px solid #d33a2f;background:#fdecea;color:#c81e1e;font-size:1.05rem;font-weight:700;line-height:1;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(211,58,47,.25)}
body.arena-game-live #bottomNav{display:none}
.nota-wrap{position:relative;flex:0 0 auto}
.nota-btn{font:inherit;font-size:1rem;font-weight:600;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:9px;padding:0;width:38px;min-height:38px;cursor:pointer;white-space:nowrap;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}
.nota-btn.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.nota-dialog{position:absolute;left:0;bottom:calc(100% + 8px);width:min(260px,84vw);max-width:min(260px,84vw);max-height:min(60vh,440px);overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:10px 26px 10px 12px;z-index:550}
.nota-dialog .control{background:none;border:none;box-shadow:none;padding:0;margin:0}
.nota-dialog .control h3{font-size:.78rem;margin:0 0 4px}
.nota-dialog .control .hint{font-size:.68rem;margin:0}
.nota-dialog .fxblock{font-size:.62rem;padding:5px 6px;margin-top:6px}
.nota-dialog-close{position:absolute;top:5px;right:6px;font:inherit;font-size:.72rem;border:none;background:transparent;color:var(--ink-dim);cursor:pointer;line-height:1;padding:3px}
.nota-dialog-close:hover{color:var(--ink)}
.card.closed-hand-card{aspect-ratio:2/3;display:flex;align-items:center;justify-content:center}
.closed-back{font-size:1.3rem}
.zone[data-z="deck"]:has(.deck-list){background:var(--surface) !important;overflow:hidden;position:relative;z-index:12}
.zone-body.deck-list{max-height:220px;overflow-y:auto;padding:4px;gap:0}
.deck-row{display:flex;flex-direction:column;gap:1px;padding:4px 6px;border-bottom:1px dashed var(--line);font-size:.66rem}
.deck-row:last-child{border-bottom:none}
.deck-row-idx{font-family:"Lexend",sans-serif;font-weight:700;font-size:.6rem;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.03em}
.deck-row-name{font-weight:700}
.deck-row-meta{color:var(--ink-dim);font-size:.62rem}
.deck-row.next-draw{background:var(--osom-bg);border-radius:8px;border-bottom:none}
.deck-row.next-draw .deck-row-idx{color:var(--osom)}
.zone[data-z="log"] .zone-head{background:var(--surface-2);color:var(--ink-dim)}
.zone-body.log-body{padding:6px;position:relative}
.zone-body.log-body ul{margin:0;padding-left:6px;list-style:none;max-height:150px;overflow-y:auto;font-size:.68rem;color:var(--ink-dim);display:flex;flex-direction:column}
.zone-body.log-body ul > li{padding:2px 0}
.zone-body.log-body ul > li:last-child{color:var(--ink);font-weight:500}
.log-fx-ok{color:var(--menang);font-weight:700}
.log-fx-fail{color:var(--kalah);font-weight:700}
.log-dialog-overlay{position:fixed;inset:0;z-index:560;background:rgba(10,10,20,.6);display:flex;align-items:flex-start;justify-content:center;padding:26px 14px;overflow-y:auto}
.log-dialog-overlay.hidden{display:none}
.log-dialog{width:min(480px,92vw);max-height:88vh;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
.log-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);flex:none}
.log-dialog-head h3{margin:0;font-size:.86rem;font-family:"Lexend",sans-serif}
.log-dialog-fontctrl{display:flex;align-items:center;gap:4px;flex:none}
.log-font-btn{font:inherit;font-weight:700;width:26px;height:26px;line-height:1;border-radius:7px;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.log-font-btn:hover{border-color:var(--accent);color:var(--accent)}
.log-font-btn:disabled{opacity:.4;cursor:not-allowed}
.log-dialog-close{font:inherit;font-size:.9rem;font-weight:700;border:none;background:transparent;color:var(--ink-dim);cursor:pointer;padding:4px 6px;line-height:1}
.log-dialog-close:hover{color:var(--ink)}
.log-dialog-body{overflow-y:auto;padding:10px 14px;flex:1 1 auto}
.log-dialog-body ul{margin:0;padding-left:6px;list-style:none;display:flex;flex-direction:column;gap:5px}
.log-dialog-body ul > li{padding:2px 0;line-height:1.5;color:var(--ink-dim)}
.log-dialog-body ul > li:last-child{color:var(--ink);font-weight:600}
.log-dialog-body .hint{color:var(--ink-dim)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.koleksi-wrap{display:flex;flex-direction:column;gap:12px}
.koleksi-section{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px}
.deck-panel-inline{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.koleksi-section h2{font-size:1rem;margin:0 0 8px;font-weight:700}
.pack-tab-bar{display:flex;gap:clamp(5px,1vw,8px);margin-bottom:10px;flex-wrap:wrap;padding:5px 0 0 5px}
.pack-tab-btn{font-family:"Lexend",sans-serif;font-size:.74rem;font-weight:700;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink-dim);cursor:pointer}
.pack-tab-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.pack-tab-btn.pack-multi{display:inline-flex;align-items:center;gap:5px}
.pack-tab-btn .pk-tick{font-size:.95em;opacity:.8}
.pack-tab-btn.active .pk-tick{opacity:1}
.pack-tab-btn.pk-has-logo{position:relative;padding:2px clamp(4px,1vw,8px);border-radius:clamp(6px,1.3vw,10px);height:clamp(16px,3.5vw,26px);justify-content:center;background:rgba(255,255,255,.035)}
.pack-tab-btn.pk-has-logo.pk-logo-big{height:clamp(20px,4.5vw,34px)}
.pack-tab-btn.pk-has-logo .pk-logo{display:block;height:clamp(9px,2.3vw,18px);width:auto;max-width:clamp(32px,8vw,62px);object-fit:contain;opacity:.45;filter:grayscale(.65);transition:opacity .18s,filter .18s,transform .18s}
.pack-tab-btn.pk-has-logo.pk-logo-big .pk-logo{height:clamp(14px,3.5vw,27px);max-width:clamp(46px,12vw,93px)}
.pack-tab-btn.pk-has-logo:hover .pk-logo{opacity:.8;filter:none}
.pack-tab-btn.pk-has-logo.active{background:rgba(255,255,255,.06);color:#fff;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 14px -2px var(--accent)}
.pack-tab-btn.pk-has-logo.active .pk-logo{opacity:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.55));transform:scale(1.04)}
.pack-tab-btn.pk-has-logo .pk-tick{position:absolute;top:-5px;left:-5px;width:clamp(12px,2.2vw,17px);height:clamp(12px,2.2vw,17px);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:clamp(.5rem,1.4vw,.68rem);line-height:1;background:var(--bg);border:1px solid var(--line);color:#fff;z-index:1}
.pack-tab-btn.pk-has-logo.active .pk-tick{background:var(--accent);border-color:var(--accent)}
.koleksi-subtab-bar{display:flex;gap:8px;margin:14px 0}
.koleksi-subtab-bar.koleksi-maintab-bar{margin:0 0 10px}
.koleksi-subtab-bar.koleksi-art-bar{margin:0 0 10px}
.koleksi-section.koleksi-edit-section{margin-top:10px}
.koleksi-subtab-btn{flex:1;font-family:"Lexend",sans-serif;font-size:.78rem;font-weight:700;padding:10px 8px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink-dim);cursor:pointer;text-align:center;transition:all .12s}
.koleksi-subtab-btn:hover{color:var(--ink);border-color:var(--accent)}
.koleksi-subtab-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.koleksi-scroll-box{aspect-ratio:2/3;overflow-y:auto;box-sizing:content-box;padding:14px 2px 10px}
.koleksi-filter-btn{flex:none;width:34px;height:34px;margin-left:auto;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink-dim);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s}
.koleksi-filter-btn:hover{color:var(--ink);border-color:var(--accent)}
.koleksi-filter-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.koleksi-filter-panel{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:10px}
.koleksi-filter-opt{display:block;width:100%;text-align:left;font-family:"Lexend",sans-serif;font-size:.76rem;font-weight:600;padding:7px 8px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--ink-dim);cursor:pointer;margin-bottom:2px;transition:all .12s}
.koleksi-filter-opt:hover{color:var(--ink);border-color:var(--line)}
.koleksi-filter-opt.active{background:var(--accent);color:#fff}
.koleksi-filter-subhead{font-size:.64rem;font-weight:700;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.04em;margin:8px 0 4px 2px}
.koleksi-filter-chip-row{display:flex;gap:6px;flex-wrap:wrap}
.koleksi-filter-count{opacity:.65;font-weight:600}
.koleksi-filter-chip{font-family:"Lexend",sans-serif;font-size:.72rem;font-weight:700;padding:6px 10px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink-dim);cursor:pointer;transition:all .12s}
.koleksi-filter-chip:hover{color:var(--ink);border-color:var(--accent)}
.koleksi-filter-chip.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.koleksi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.koleksi-card{position:relative;width:100%;cursor:pointer}
.koleksi-card .card{height:100%;border-radius:14px;transition:transform .16s ease,box-shadow .16s ease}
.koleksi-grid .koleksi-card:hover .card{transform:translateY(-10px);z-index:20;box-shadow:0 16px 30px -10px rgba(0,0,0,.45)}
.koleksi-add-btn{position:absolute;z-index:30;right:4px;top:50%;transform:translateY(-50%);max-width:48px;font-size:.52rem;font-weight:700;line-height:1.15;padding:5px 4px;border-radius:7px;border:none;background:rgba(74,63,209,.6);color:#fff;cursor:pointer;font-family:"Lexend",sans-serif;box-shadow:0 1px 4px rgba(0,0,0,.18);text-align:center}
.koleksi-add-btn.in-deck{background:rgba(192,57,42,.6)}
.koleksi-add-btn:disabled{opacity:.5;cursor:not-allowed;background:rgba(120,124,140,.55)}
.koleksi-in-badge{position:absolute;top:-6px;left:-6px;background:var(--menang,#1f8a4c);color:#fff;font-size:.58rem;font-weight:700;border-radius:999px;padding:1px 6px;box-shadow:0 1px 3px rgba(0,0,0,.3);white-space:nowrap}
.koleksi-special-head{margin:16px 0 8px;padding-top:12px;border-top:1px dashed var(--line,rgba(255,255,255,.2));font-weight:800;font-size:13px;letter-spacing:.4px;color:#f5c542}
.koleksi-special-head span{opacity:.75;font-weight:600}
.kf-search-row{display:flex;gap:6px;align-items:center;margin:2px 0 6px}
.kf-search{flex:1;min-width:0;box-sizing:border-box;height:36px;padding:0 12px;border-radius:10px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);color:inherit;font:inherit;font-size:13px;outline:none}
.kf-search:focus{border-color:#f5c542;box-shadow:0 0 0 2px rgba(245,197,66,.25)}
.kf-toggle{flex:0 0 36px;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);color:inherit;font-size:14px;cursor:pointer}
.kf-toggle.open{background:#f5c542;color:#2a1a00;border-color:#f5c542}
.kf-suggest{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;max-height:180px;overflow-y:auto;padding:4px;margin-bottom:6px;border-radius:10px;background:rgba(245,197,66,.07);border:1px dashed rgba(245,197,66,.35)}
.kf-suggest .koleksi-filter-chip{width:100%;margin:0;white-space:normal;text-align:left;font-size:11.5px;padding:5px 6px;line-height:1.25;overflow-wrap:anywhere}
.kf-empty{font-size:12px;opacity:.75;margin:0 0 6px 2px}
.kf-picked{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:0 0 8px}
.kf-picked-lbl{font-size:11.5px;opacity:.75;margin-right:2px}
.kf-picked-chip{border:0;border-radius:99px;padding:4px 10px;font:inherit;font-size:12px;background:#f5c542;color:#2a1a00;cursor:pointer}
.kf-picked-chip b{margin-left:3px}
.kf-name-scroll{box-sizing:border-box;max-height:400px;overflow-y:auto;overscroll-behavior:contain;padding:2px 4px 6px 0;margin-bottom:6px;border-radius:10px;background:rgba(255,255,255,.04)}
.kf-letter{position:sticky;top:0;z-index:1;font-weight:800;font-size:12px;letter-spacing:.5px;padding:5px 8px;margin-top:4px;background:rgba(20,26,70,.96);color:#f5c542;border-radius:6px}
.kf-name-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px 2px}
.kf-name-grid .koleksi-filter-chip{width:100%;min-width:0;margin:0;white-space:normal;text-align:left;line-height:1.25;font-size:11.5px;padding:5px 6px;overflow-wrap:anywhere}
.kf-fx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin-bottom:6px}
.kf-fx-grid .koleksi-filter-chip{width:100%;margin:0;white-space:normal;text-align:left;font-size:11.5px;padding:6px 7px}
/* Badge EFEK pada gambar kad versi asal (collection.js koleksiEfekBadge): bawah ATK, bucu kanan atas — tempat ikon EFEK kad baharu */
.kol-efek{position:absolute;right:6.5%;top:36%;width:15%;aspect-ratio:1;border-radius:50%;container-type:size;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.55);cursor:help;z-index:2}
.kol-efek small{font:700 20cqw/1 "Lexend",system-ui,sans-serif;letter-spacing:.02em;opacity:.92}
.kol-efek b{font:800 50cqw/1 "Lexend",system-ui,sans-serif}
.kol-efek.e1{background:var(--accent)}
.kol-efek.e2{background:var(--menang)}
.kol-efek.e3{background:var(--kalah)}
.kol-efek:hover{filter:brightness(1.12)}
.card.in-deck-card{border-color:var(--menang,#1f8a4c)}
.card-zoom-overlay{position:fixed;inset:0;background:rgba(10,10,20,.6);display:flex;align-items:center;justify-content:center}
.card-zoom-box{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px 22px;max-width:380px;width:100%;box-shadow:0 14px 44px rgba(0,0,0,.45)}
.card-zoom-box .zoom-close-btn{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;border:none;background:var(--bg);color:var(--ink);font-size:1.15rem;line-height:1;cursor:pointer}
.card-zoom-box .zoom-card-img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:26px;border:1px solid var(--line);margin-bottom:14px}
.card-zoom-box .zoom-nm{font-family:"Lexend",sans-serif;font-size:1.3rem;font-weight:700;padding-right:34px}
.card-zoom-box .zoom-type{font-size:.85rem;color:var(--ink-dim);margin-top:6px}
.card-zoom-box .zoom-stats{font-size:1.05rem;font-weight:700;margin-top:14px;color:var(--ink)}
.card-zoom-box .zoom-fx{font-size:.88rem;line-height:1.5;margin-top:14px;color:var(--ink)}
.card-zoom-box .zoom-action-btn{font-family:"Lexend",sans-serif;font-size:.85rem;font-weight:700;border:none;border-radius:10px;padding:9px 22px;width:100%;box-sizing:border-box;text-align:center;cursor:pointer}
.card-zoom-box .zoom-action-btn.ready{background:var(--stage-ready);color:var(--stage-ready-ink)}
.card-zoom-box .zoom-action-btn.cond{background:var(--stage-cond);color:#fff;cursor:not-allowed}
.card-zoom-box .zoom-action-btn.locked{background:var(--stage-locked);color:#fff;cursor:not-allowed}
.deck-back-btn{font-size:.72rem;font-weight:700;padding:6px 12px;border-radius:9px;border:1px solid var(--line);background:var(--surface-2,var(--bg));color:var(--ink);cursor:pointer;font-family:"Lexend",sans-serif}
.deck-name-input{font-family:"Lexend",sans-serif;font-size:.85rem;font-weight:700;padding:6px 10px;border-radius:9px;border:1px solid var(--line);background:var(--bg);color:var(--ink);min-width:120px;flex:1}
.deck-saya-header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.deck-slot-hint{font-size:.76rem;color:var(--ink-dim);margin:0 0 10px}
.deck-slot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.deck-slot-card{position:relative;background:var(--bg);border:2px solid var(--line);border-radius:12px;padding:8px 6px;cursor:pointer;transition:border-color .12s,box-shadow .12s,border-width .12s;text-align:center}
.deck-slot-card:hover{border-color:var(--accent);box-shadow:0 2px 10px rgba(0,0,0,.08)}
.deck-slot-card.active{border-width:3px;border-color:var(--menang,#1f8a4c);background:var(--surface);padding:7px 5px}
.deck-slot-card.selected{box-shadow:0 0 0 3px rgba(74,63,209,.35)}
.deck-slot-icon{font-size:1.25rem;line-height:1;margin-bottom:3px}
.deck-slot-name{font-family:"Lexend",sans-serif;font-weight:700;font-size:.72rem;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deck-slot-meta{font-size:.56rem;color:var(--ink-dim);line-height:1.25}
.deck-slot-count-box{margin-top:4px;font-family:"Lexend",sans-serif;font-weight:700;font-size:.6rem;border-radius:7px;padding:3px 4px;background:var(--bg);border:1px solid var(--line);color:var(--ink-dim)}
.deck-slot-count-box.full{background:#14532d;color:#fff;border-color:transparent}
.deck-slot-count-box.empty{background:#6b7280;color:#fff;border-color:transparent}
.deck-slot-status{margin-top:3px;font-size:.54rem;font-weight:700;color:var(--ink-dim)}
.deck-slot-status.full{color:#14532d}
.deck-slot-actions-row{display:flex;gap:4px;margin-top:6px}
.deck-slot-actions-row .deck-aktif-btn{flex:1;font-size:.56rem;font-weight:700;padding:4px 2px;border-radius:999px;border:1.5px solid transparent;background:#9aa1af;color:#fff;cursor:pointer;font-family:"Lexend",sans-serif;transition:border-color .12s,box-shadow .12s}
.deck-slot-actions-row .deck-aktif-btn:hover{border-color:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,.3)}
.deck-slot-card.active .deck-slot-actions-row .deck-aktif-btn{background:var(--accent)}
.deck-slot-actions-row .deck-gear-btn{flex:none;width:26px;font-size:.72rem;padding:4px 2px;border-radius:6px;border:1px solid var(--line);background:var(--surface-2,var(--surface));color:var(--ink);cursor:pointer}
.deck-saya-meter{position:relative;flex:none;width:120px;height:28px;border-radius:9px;overflow:hidden;background:#6b7280}
.deck-saya-meter-fill{position:absolute;top:0;left:0;bottom:0;background:#14532d;transition:width .15s}
.deck-saya-meter-label{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;height:100%;font-family:"Lexend",sans-serif;font-size:.7rem;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.deck-clear-btn{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--surface-2,var(--bg));color:var(--ink-dim);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .12s,border-color .12s}
.deck-clear-btn:hover{color:#dc2626;border-color:#dc2626}
.confirm-overlay{position:fixed;inset:0;background:rgba(10,10,20,.6);z-index:41000;display:flex;align-items:center;justify-content:center;padding:24px}
.pwa-update{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);z-index:42000;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);padding:8px 8px 8px 14px;border-radius:12px;background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.5);font:600 .85rem/1.2 "Lexend",system-ui,sans-serif}
.pwa-update-btn{border:0;border-radius:8px;padding:7px 12px;background:var(--accent);color:var(--accent-ink);font:inherit;cursor:pointer}
.pwa-update-x{border:0;background:none;color:var(--ink-dim);font:inherit;padding:6px 8px;cursor:pointer}
.confirm-box{position:relative;background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:22px 20px;max-width:320px;width:100%;box-shadow:0 14px 44px rgba(0,0,0,.45);text-align:center}
.confirm-msg{font-family:"Lexend",sans-serif;font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:16px}
.confirm-sub{font-size:.78rem;line-height:1.4;color:var(--ink-dim);margin:-8px 0 16px}
.confirm-actions{display:flex;gap:10px;justify-content:center}
.confirm-actions button{flex:1;font-size:.85rem;font-weight:700;padding:8px 10px;border-radius:9px;border:1px solid transparent;cursor:pointer;font-family:"Lexend",sans-serif}
.confirm-yes-btn{background:#dc2626;color:#fff}
.confirm-no-btn{background:var(--bg);color:var(--ink);border-color:var(--line)}
.login-overlay{position:fixed;inset:0;background:rgba(10,10,20,.78);z-index:900;display:flex;align-items:center;justify-content:center;padding:24px}
.login-box{position:relative;background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:26px 22px;max-width:340px;width:100%;box-shadow:0 14px 44px rgba(0,0,0,.45);text-align:center}
.login-box h2{margin:0 0 6px;font-size:1.05rem;font-family:"Lexend",sans-serif}
.login-sub{margin:0 0 16px;font-size:.72rem;color:var(--ink-dim);line-height:1.4}
.login-box input{width:100%;box-sizing:border-box;padding:10px 12px;font-size:.9rem;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);margin-bottom:8px;font-family:inherit}
.login-err{color:#dc2626;font-size:.7rem;margin-bottom:8px;min-height:1em}
.login-submit-btn{width:100%;padding:10px;border-radius:10px;border:none;background:var(--accent);color:#fff;font-weight:700;font-size:.86rem;cursor:pointer;font-family:"Lexend",sans-serif}
.login-recent{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.login-recent-chip{font-size:.7rem;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer}
.player-badge{align-items:center;gap:6px;font-size:.72rem;color:var(--ink-dim);white-space:nowrap}
.player-badge button{font-size:.62rem;padding:3px 8px;border-radius:8px;border:1px solid var(--line);background:var(--bg);cursor:pointer;color:var(--ink)}
.bot-lock-badge{font-size:.68rem;margin-left:4px;opacity:.8}
.bot-deck-card{border-style:dashed}
.deck-bot-subblock{margin-top:14px}
.cardback-picker-block{margin-top:14px}
.cardback-picker-block:first-of-type{margin-top:0}
.cardback-comingsoon-note{margin:0 0 10px;font-size:.72rem;color:var(--ink-dim);font-style:italic}
.cardback-pick-row{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding:2px 2px 6px}
.cardback-pick-tile{position:relative;flex:1 1 0;min-width:80px;scroll-snap-align:start;background:var(--bg);border:2px solid var(--line);border-radius:12px;padding:8px 6px;cursor:pointer;text-align:center;transition:border-color .12s,box-shadow .12s}
.cardback-pick-tile:hover{border-color:var(--accent)}
.cardback-pick-tile.active{border-width:3px;border-color:var(--menang,#1f8a4c);background:var(--surface);padding:7px 5px}
.cardback-pick-preview.papanbg-scifi{background:#0d1e33 url("bg-tall.webp") center/cover no-repeat}
.cardback-pick-preview.papanbg-klasik{background:#646465 url("papan-kotak-v8.jpg") center/cover no-repeat}
.cardback-pick-preview.papanbg-matt{background:linear-gradient(90deg,transparent 4%,var(--matt-deep) 4%,var(--matt-deep) 12%,transparent 12%,transparent 88%,var(--matt-deep) 88%,var(--matt-deep) 96%,transparent 96%) 0 50%/100% 82% no-repeat,radial-gradient(110% 65% at 50% 50%,var(--matt-hi),var(--matt-base));box-shadow:inset 0 0 0 1px rgba(170,195,230,.18),inset 0 0 0 5px #0f1826,inset 0 0 0 6px var(--matt-line)}
.cardback-pick-preview.papanbg-nude{background:linear-gradient(90deg,transparent 4%,var(--nude-rail) 4%,var(--nude-rail) 12%,transparent 12%,transparent 88%,var(--nude-rail) 88%,var(--nude-rail) 96%,transparent 96%) 0 50%/100% 82% no-repeat,radial-gradient(110% 65% at 50% 50%,var(--nude-hi),var(--nude-base));box-shadow:inset 0 0 0 1px rgba(255,240,225,.25),inset 0 0 0 5px var(--nude-band),inset 0 0 0 6px var(--nude-line)}
.cardback-pick-preview{width:100%;aspect-ratio:2/3;border-radius:9px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:var(--deck-bg,var(--surface));margin:0 auto 6px}
.cardback-pick-name{font-family:"Lexend",sans-serif;font-weight:700;font-size:.68rem;margin-bottom:2px}
.cardback-pick-desc{font-size:.58rem;color:var(--ink-dim);line-height:1.25}
.deck-slot-subhead{margin:0 0 6px;font-size:.86rem;font-weight:700;color:var(--ink-dim);font-family:"Lexend",sans-serif}
.deck-saya-status{font-size:.76rem;color:var(--ink-dim);margin-bottom:8px}
.deck-saya-status.ready{color:var(--menang,#1f8a4c);font-weight:600}
.deck-view-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.deck-view-name{font-family:"Lexend",sans-serif;font-weight:700;font-size:.9rem;color:var(--ink)}
.deck-view-count{font-size:.78rem;font-weight:700;color:var(--ink-dim)}
.deck-carousel-scroll{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding:6px 2px 12px;margin-top:6px}
.deck-carousel-scroll .carousel-card{flex:none;width:92px;display:flex;flex-direction:column;align-items:center;scroll-snap-align:start;cursor:pointer}
.deck-carousel-scroll .carousel-card .card{width:100%;margin:0;padding:5px 5px;font-size:.6rem}
.deck-carousel-scroll .carousel-card .card .nm{font-size:.62rem}
.deck-carousel-scroll .carousel-card .card .type{font-size:.48rem}
.deck-carousel-scroll .carousel-card .card .stats{font-size:.52rem}
.deck-carousel-scroll .carousel-card .card .fx{font-size:.5rem;line-height:1.2}
.carousel-remove-btn{width:100%;margin-top:5px;font-size:.56rem;font-weight:700;padding:4px 3px;border-radius:7px;border:1px solid var(--line);background:var(--kalah,#c0392b);color:#fff;cursor:pointer;font-family:"Lexend",sans-serif}
.deck-carousel-empty{color:var(--ink-dim);font-size:.8rem;padding:14px;text-align:center}
@media (max-width:640px){
  body{padding-inline:8px;padding-block:12px calc(12px + var(--bottomnav-h,58px) + env(safe-area-inset-bottom,0px))}
  :root{--bottomnav-h:58px}
  .bottom-nav-inner{gap:2px}
  .bottom-nav-btn{border-radius:11px}
  .title-box h1{font-size:1.05rem}
  .title-box p{font-size:.72rem}
  .target{font-size:.68rem;padding:4px 9px}
  .title-box{padding:8px 10px}
  .tab-bar{gap:5px}
  .tab-btn{font-size:.66rem;padding:7px 8px}
  .koleksi-subtab-bar{gap:5px}
  .koleksi-subtab-btn{font-size:.66rem;padding:8px 4px}
  .pack-tab-btn{font-size:.6rem;padding:3px 8px}
  .info-toggle-btn{width:30px;height:30px;font-size:.85rem}
  .row3{gap:4px}
  .side{padding:7px;gap:6px}
  .zone-head{flex-basis:20px;padding:5px 2px;font-size:.6rem}
  .zone-body{gap:3px}
  .zone[data-z="botmood"] .zone-body{padding:6px 4px;font-size:.64rem}
  .bot-mood-emoji{font-size:1.3rem}
  .bot-mood-label{font-size:.52rem}
  .zone-body.deck-list{max-height:150px}
  .deck-row{font-size:.58rem;padding:3px 5px}
  .deck-row-idx{font-size:.52rem}
  .deck-row-meta{font-size:.54rem}
  .card{padding:5px 6px;font-size:.66rem}
  .card .nm{font-size:.68rem}
  .card .stats{font-size:.58rem}
  .card .type{font-size:.56rem}
  .card .fx{font-size:.58rem}
  .card .actions button,.card .actions select{font-size:.58rem;padding:2px 5px}
  .cond-badge{font-size:.5rem;padding:1px 4px}
  .bersyarat-note{font-size:.56rem}
  .zone-body[data-hand-count="1"] .hand-slot{margin:0 1px}
  .zone-body[data-hand-count="4"] .hand-slot{margin:0 -16px}
  .zone-body[data-hand-count="5"] .hand-slot{margin:0 -21px}
  .zone-body[data-hand-count="6"] .hand-slot{margin:0 -26px}
  .strip-status{font-size:.6rem}
  .strip-main{gap:5px}
  .statgroup{width:110px}
  .nota-dialog{padding:8px 22px 8px 10px}
  .nota-dialog .control h3{font-size:.68rem}
  .nota-dialog .control .hint{font-size:.6rem}
  .zone-body.log-body ul{max-height:110px;font-size:.56rem}
  .log-dialog{width:94vw;max-height:92vh}
  .log-dialog-head h3{font-size:.76rem}
  .log-font-btn{width:23px;height:23px}
  .badge.atk{width:auto;height:auto}
  .badge{padding:3px 6px}
  .badge .lbl{font-size:.48rem}
  .badge .val{font-size:.64rem}
  .battlerow{gap:5px}
  .battlestrip .scorepips-name,.battlestrip .scorepips-brik{font-size:.5rem}
  .battlestrip .pip{width:11px;height:11px}
  .battlestrip .avatar-frame{width:19px;height:19px}
  .scorepips-row{gap:4px}
  .pick-note{font-size:.56rem}
  .koleksi-grid{gap:6px}
  .koleksi-filter-btn{width:30px;height:30px;font-size:.85rem}
  .koleksi-filter-opt{font-size:.68rem;padding:6px 7px}
  .koleksi-filter-subhead{font-size:.58rem}
  .koleksi-filter-chip{font-size:.64rem;padding:5px 8px}
  .koleksi-add-btn{font-size:.48rem;max-width:42px;padding:4px 3px}
  .card-zoom-box{padding:18px 16px;max-width:320px}
  .card-zoom-box .zoom-nm{font-size:1.05rem}
  .card-zoom-box .zoom-type{font-size:.74rem}
  .card-zoom-box .zoom-stats{font-size:.9rem}
  .card-zoom-box .zoom-fx{font-size:.78rem}
  .koleksi-section h2{font-size:.88rem}
  .deck-saya-meter{width:90px;height:24px}
  .deck-saya-meter-label{font-size:.6rem}
  .deck-slot-grid{gap:6px}
  .deck-slot-card{padding:6px 4px}
  .deck-slot-icon{font-size:1rem}
  .deck-slot-name{font-size:.6rem}
  .deck-slot-meta{font-size:.48rem}
  .deck-slot-count-box{font-size:.54rem}
  .deck-slot-status{font-size:.48rem}
  .deck-slot-actions-row .deck-aktif-btn{font-size:.5rem;padding:3px 2px}
  .deck-slot-actions-row .deck-gear-btn{width:22px;font-size:.62rem;padding:3px 2px}
  .deck-carousel-scroll .carousel-card{width:78px}
  .deck-carousel-scroll .carousel-card .card{padding:4px 4px}
  .deck-carousel-scroll .carousel-card .card .nm{font-size:.56rem}
  .deck-carousel-scroll .carousel-card .card .type{font-size:.42rem}
  .deck-carousel-scroll .carousel-card .card .stats{font-size:.46rem}
  .deck-carousel-scroll .carousel-card .card .fx{font-size:.44rem}
  .carousel-remove-btn{font-size:.56rem;padding:4px 6px}
  .deck-name-input{font-size:.76rem;min-width:90px}
}
#wrap.papan-kotak{background:transparent;--kc1:12.422%;--kc2:38.159%;--kc3:63.896%;--kw:23.593%;--kr1:16.327%;--kr2:31.186%;--kr3:55.357%;--kr4:70.217%;--kh:13.457%;--kcard-h:16.14cqw;--khand-h:33.6cqw;--khand-w:22.4cqw}
body:has(#wrap.papan-kotak){background:#0d1e33 !important}
body:has(#wrap.papan-kotak.bg-klasik){background:#5f5f61 !important}
/* Latar sci-fi: ::before = salinan kabur penuh skrin (isi tepi), ::after = gambar tajam dikunci pada .table (kedudukan dikira oleh syncLatarPapanBg) */
body[data-tab="arena"]:has(#wrap.papan-kotak:not(.bg-klasik):not(.bg-matt))::before,body[data-tab="arena"]:has(#wrap.papan-kotak:not(.bg-klasik):not(.bg-matt))::after{content:"";position:fixed;inset:0;pointer-events:none;background-color:#0d1e33;background-image:url("bg-tall.webp");background-repeat:no-repeat}
body[data-tab="arena"]:has(#wrap.papan-kotak:not(.bg-klasik):not(.bg-matt))::before{z-index:-2;inset:-40px;background-size:cover;background-position:center;filter:blur(22px) brightness(.5)}
body[data-tab="arena"]:has(#wrap.papan-kotak:not(.bg-klasik):not(.bg-matt)){position:relative}
body[data-tab="arena"]:has(#wrap.papan-kotak:not(.bg-klasik):not(.bg-matt))::after{position:absolute;inset:0;min-height:100vh;z-index:-1;background-color:transparent;background-size:var(--bg-w,cover);background-position:var(--bg-x,50%) var(--bg-y,50%)}
@media (orientation:landscape){body[data-tab="arena"]:has(#wrap.papan-kotak:not(.bg-klasik):not(.bg-matt))::before,body[data-tab="arena"]:has(#wrap.papan-kotak:not(.bg-klasik):not(.bg-matt))::after{background-image:url("bg-wide.webp")}}
/* Latar Matt (CSS sahaja, tiada gambar): ::before body = gradient matt + bintik halus; bingkai papan dilukis oleh .table::before (papak, jalur tepi, jalur tengah) */
body[data-tab="arena"]:has(#wrap.papan-kotak.bg-matt)::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/160px 160px,radial-gradient(120% 75% at 50% 42%,var(--matt-bg-a) 0%,var(--matt-bg-b) 48%,var(--matt-bg-c) 100%);background-blend-mode:soft-light,normal;opacity:1}
/* Reka bentuk 2 · Nude: struktur Matt (kelas bg-matt) dengan palet nude (kelas bg-nude) — tukar token warna sahaja */
body[data-tab="arena"]:has(#wrap.papan-kotak.bg-nude){--matt-bg-a:var(--nude-bg-a);--matt-bg-b:var(--nude-bg-b);--matt-bg-c:var(--nude-bg-c)}
#wrap.papan-kotak.bg-nude{--matt-deep:var(--nude-deep);--matt-base:var(--nude-base);--matt-mid:var(--nude-mid);--matt-hi:var(--nude-hi);--matt-line:var(--nude-line);--matt-accent:var(--nude-accent);--matt-rail:var(--nude-rail);--matt-band:var(--nude-band)}
#wrap.papan-kotak.bg-matt{--tw-gutter:22px}
#wrap.papan-kotak.bg-matt #arenaView .table::before,#wrap.papan-kotak.bg-matt #arenaView .table::after{content:"";position:absolute;pointer-events:none;z-index:-1}
#wrap.papan-kotak.bg-matt #arenaView .table::before{left:-2.4cqw;right:-2.4cqw;top:4.5%;bottom:4.5%;border-radius:4.5cqw;background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 25%,transparent 75%,rgba(0,0,0,.2)),radial-gradient(110% 65% at 50% 50%,var(--matt-hi) 0%,var(--matt-mid) 45%,var(--matt-base) 100%);box-shadow:inset 0 0 0 1px rgba(170,195,230,.16),inset 0 0 0 1.4cqw var(--matt-band),inset 0 0 0 calc(1.4cqw + 1px) var(--matt-line),inset 0 0 4cqw rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.55),0 4cqw 9cqw -3cqw rgba(0,0,0,.75)}
/* Jalur tepi: ::after = jalur kiri (bawah log); jalur kanan = salinan box-shadow yang dianjak 90.2cqw (= 100 − 2×1.2 − 7.4) di bawah butang giliran */
/* Jalur tepi nipis: tinggi dari atas zon Sokongan P2 (--kr1) hingga kaki zon Sokongan P1 (--kr4 + --kh) */
#wrap.papan-kotak.bg-matt #arenaView .table::after{left:1.2cqw;width:7.4cqw;top:var(--kr1);bottom:calc(100% - var(--kr4) - var(--kh));border-radius:2.6cqw;background:linear-gradient(var(--matt-rail),var(--matt-rail)),linear-gradient(var(--matt-line),var(--matt-line));box-shadow:0 0 0 1px var(--matt-line),90.2cqw 0 0 0 var(--matt-rail),90.2cqw 0 0 1px var(--matt-line)}
/* Tangan P1 cermin Tangan P2: tepi atas kad tepat di garis zon Tangan (91.019%), sama seperti tepi bawah kad P2 di 8.981% — kad bertindih bingkai sama banyak di atas & bawah */
#wrap.papan-kotak #arenaView .side.p1 .zone[data-z="hand"]{transform:translateY(-1.1cqw)}
#wrap.papan-kotak #arenaView .table{position:relative;--tw:min(100%, calc((100dvh - var(--bottomnav-h,64px) - 70px) / 1.74));width:var(--tw);min-width:300px;aspect-ratio:1119/1568;margin:calc(var(--tw) * .19) auto calc(var(--tw) * .25);background:transparent !important;border-radius:12px;overflow:visible;box-shadow:none;padding:0 !important;container-type:inline-size}
#wrap.papan-kotak #arenaView .side,#wrap.papan-kotak #arenaView .row3{display:contents}
#wrap.papan-kotak #arenaView .zone{position:absolute;aspect-ratio:auto !important;background:transparent !important;border:none !important;box-shadow:none !important;border-radius:6px;margin:0}
#wrap.papan-kotak #arenaView .zone-head{display:none}
#wrap.papan-kotak #arenaView .zone:not([data-z="hand"]):not([data-z="log"]):not([data-z="botmood"]) .zone-body{padding:0;align-items:center;justify-content:center;width:100%;height:100%;overflow:visible}
#wrap.papan-kotak:not(.bg-klasik):not(.bg-matt) #arenaView .zone:not([data-z="hand"]):not([data-z="log"]):not([data-z="botmood"]) .zone-body{border:3px solid rgba(190,200,215,.3);border-radius:10px;background:transparent}
#wrap.papan-kotak.bg-matt #arenaView .zone:not([data-z="hand"]):not([data-z="log"]):not([data-z="botmood"]) .zone-body{border:2px solid var(--matt-line);border-radius:10px;background:rgba(5,9,16,.2);box-shadow:inset 0 2px 8px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.03)}
/* Bayang antara kad bertindih (Tangan, Menang, Kalah, Aktif, Sokongan): setiap kad selepas yang pertama membayangi kad di bawahnya */
#wrap.papan-kotak #arenaView .zone:is([data-z="hand"],[data-z="menang"],[data-z="kalah"],[data-z="aktif"],[data-z="sokongan"]) .zone-body > .hand-slot + .hand-slot{filter:drop-shadow(-.9cqw 0 .8cqw rgba(0,0,0,.55));transition:filter .45s ease-out}
/* Kad yang masih dalam perjalanan ke tindanan (tersorok) tiada bayang; bila kad mendarat, bayang fade in (transition di atas) */
#wrap.papan-kotak #arenaView .zone:is([data-z="hand"],[data-z="menang"],[data-z="kalah"],[data-z="aktif"],[data-z="sokongan"]) .zone-body > .hand-slot + .hand-slot:is(.kalah-pending-hide,.menang-pending-hide,.fx-buang-hold,:has(> .card.fx-seq-hide),:has(> .card.aktif-flip-hide)){filter:drop-shadow(-.9cqw 0 .8cqw rgba(0,0,0,0));transition:none}
/* Kad di Zon Kalah/Aktif/Menang: hover = timbul sedikit & condong ikut tetikus (--tlt-x/--tlt-y), dengan pantulan cahaya (.tilt-sheen).
   Dikawal oleh pendengar tetikus di hujung events.js. Klik (zum kad) kekal berfungsi. */
#wrap.papan-kotak #arenaView .zone:is([data-z="kalah"],[data-z="aktif"],[data-z="menang"]) .card{transition:transform .38s cubic-bezier(.2,.9,.3,1),box-shadow .3s ease;transform-style:preserve-3d}
#wrap.papan-kotak #arenaView .zone:is([data-z="kalah"],[data-z="aktif"],[data-z="menang"]) .card.tilt-on{transform:perspective(70cqw) translateY(-6%) scale(1.08) rotateX(var(--tlt-y,0deg)) rotateY(var(--tlt-x,0deg));transition:transform .1s linear,box-shadow .2s ease;box-shadow:0 2.4cqw 4cqw -1cqw rgba(0,0,0,.6);z-index:25}
#wrap.papan-kotak #arenaView .zone:is([data-z="kalah"],[data-z="aktif"],[data-z="menang"]) .hand-slot:has(.card.tilt-on){z-index:24;filter:none}
.tilt-sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:7;opacity:0;transition:opacity .25s ease;background:radial-gradient(circle at var(--tlt-gx,50%) var(--tlt-gy,30%),rgba(255,255,255,.42),rgba(255,255,255,.08) 38%,rgba(255,255,255,0) 62%),linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.14) 48%,rgba(255,255,255,0) 62%);mix-blend-mode:screen}
.card.tilt-on .tilt-sheen{opacity:1}
@media (prefers-reduced-motion:reduce){#wrap.papan-kotak #arenaView .zone:is([data-z="kalah"],[data-z="aktif"],[data-z="menang"]) .card.tilt-on{transform:translateY(-4%) scale(1.04)}}
#wrap.papan-kotak #arenaView .empty-card-ph{border:none;height:var(--kcard-h)}
#wrap.papan-kotak .side.p2 .zone[data-z="deck"]{left:var(--kc1);top:var(--kr1);width:var(--kw);height:var(--kh)}
#wrap.papan-kotak .side.p2 .zone[data-z="sokongan"]{left:var(--kc2);top:var(--kr1);width:var(--kw);height:var(--kh)}
#wrap.papan-kotak .side.p2 .zone[data-z="botmood"]{left:var(--kc3);top:var(--kr1);width:var(--kw);height:var(--kh);align-items:center;justify-content:center}
#wrap.papan-kotak .side.p2 .zone[data-z="menang"]{left:var(--kc1);top:var(--kr2);width:var(--kw);height:var(--kh)}
#wrap.papan-kotak .side.p2 .zone[data-z="aktif"]{left:var(--kc2);top:var(--kr2);width:var(--kw);height:var(--kh)}
#wrap.papan-kotak .side.p2 .zone[data-z="kalah"]{left:var(--kc3);top:var(--kr2);width:var(--kw);height:var(--kh)}
#wrap.papan-kotak .side.p1 .zone[data-z="kalah"]{left:var(--kc1);top:var(--kr3);width:var(--kw);height:var(--kh)}
#wrap.papan-kotak .side.p1 .zone[data-z="aktif"]{left:var(--kc2);top:var(--kr3);width:var(--kw);height:var(--kh)}
#wrap.papan-kotak .side.p1 .zone[data-z="menang"]{left:var(--kc3);top:var(--kr3);width:var(--kw);height:var(--kh)}
#wrap.papan-kotak .side.p1 .zone[data-z="log"]{left:var(--kc1);top:var(--kr4);width:var(--kw);height:var(--kh)}
#wrap.papan-kotak .side.p1 .zone[data-z="sokongan"]{left:var(--kc2);top:var(--kr4);width:var(--kw);height:var(--kh)}
#wrap.papan-kotak .side.p1 .zone[data-z="deck"]{left:var(--kc3);top:var(--kr4);width:var(--kw);height:var(--kh)}
#wrap.papan-kotak #arenaView .zone:is([data-z="aktif"],[data-z="sokongan"]) .card.uniform,#wrap.papan-kotak #arenaView .zone:is([data-z="aktif"],[data-z="sokongan"]) .card.closed-card,#wrap.papan-kotak #arenaView .zone:is([data-z="aktif"],[data-z="sokongan"]) .card.uniform.has-img.expanded,#wrap.papan-kotak #arenaView .zone[data-z="aktif"] .aktif-hostage-stack{height:var(--kcard-h) !important;width:auto !important;aspect-ratio:2/3 !important;max-height:none !important;flex:0 0 auto}
#wrap.papan-kotak #arenaView .zone[data-z="sokongan"] .zone-body{gap:0}
#wrap.papan-kotak #arenaView .zone[data-z="sokongan"] .zone-body > .card + .card{margin-left:-5.89cqw}
#wrap.papan-kotak #arenaView .stack-slot{height:var(--kcard-h)}
#wrap.papan-kotak #arenaView .zone:is([data-z="deck"],[data-z="kalah"]) .zone-body{display:block !important;position:relative}
#wrap.papan-kotak #arenaView .zone[data-z="menang"] .hand-slot{height:var(--kcard-h);margin:0 var(--fm,-3.7cqw) !important} /* dipulihkan 31 Okt 2026 */
#wrap.papan-kotak #arenaView .zone[data-z="menang"] .zone-body[data-n] .hand-slot:first-child{margin-left:0 !important}
#wrap.papan-kotak #arenaView .deck-count-badge{top:-1.01cqw;right:-1.01cqw}
#wrap.papan-kotak .side.p2 .zone[data-z="botmood"] .zone-body{background:rgba(40,40,44,.55);border:1px solid rgba(255,255,255,.35);color:#fff}
#wrap.papan-kotak .side.p2 .zone[data-z="botmood"] .bot-mood-emoji{font-size:5.04cqw}
#wrap.papan-kotak .side.p2 .zone[data-z="botmood"] .bot-mood-label{font-size:1.85cqw;color:#fff}
#wrap.papan-kotak .side.p1 .zone[data-z="log"] .zone-body{height:100%;border-radius:8px}
#wrap.papan-kotak .zone-body.log-body ul{max-height:100%;color:rgba(255,255,255,.72);font-size:.62rem}
#wrap.papan-kotak .zone-body.log-body ul > li:last-child{color:#fff}
#wrap.papan-kotak .side.p2 .zone[data-z="hand"]{left:10.28%;width:79.45%}
#wrap.papan-kotak .side.p1 .zone[data-z="hand"]{left:10.28%;width:79.45%}
#wrap.papan-kotak #arenaView .zone[data-z="hand"] .zone-body{height:100%;padding:0 1.84cqw;align-items:flex-start;justify-content:center;overflow:visible !important}
#wrap.papan-kotak #arenaView .zone[data-z="hand"] .hand-slot{width:var(--khand-w);height:var(--khand-h);align-self:flex-start;margin:0 calc(-3.37cqw * var(--khand-s,1));padding-top:1.10cqw;box-sizing:content-box}
#wrap.papan-kotak #arenaView .zone[data-z="hand"] .zone-body[data-hand-count="1"] .hand-slot{margin:0 !important}
#wrap.papan-kotak #arenaView .zone[data-z="hand"] .zone-body[data-hand-count="5"] .hand-slot{margin:0 calc(-5.40cqw * var(--khand-s,1)) !important}
#wrap.papan-kotak #arenaView .zone[data-z="hand"] .zone-body[data-hand-count="6"] .hand-slot{margin:0 calc(-6.57cqw * var(--khand-s,1)) !important}
#wrap.papan-kotak #arenaView .zone[data-z="hand"] .card{height:var(--khand-h);top:1.10cqw}
#wrap.papan-kotak #arenaView .side.p1 .zone[data-z="hand"] .zone-body .card{transform:none;transform-origin:50% 100%;transition:transform .2s cubic-bezier(.3,1.3,.5,1),box-shadow .2s ease}
/* Tangan P1 sama saiz Tangan P2; bila ada kad dihover/disentuh (.peek), seluruh tangan membesar 1.5× & naik, kad itu lebih besar & tinggi */
#wrap.papan-kotak #arenaView .side.p1 .zone[data-z="hand"] > .zone-body{transform-origin:50% 0;transition:transform .22s cubic-bezier(.3,1.25,.5,1)}
#wrap.papan-kotak #arenaView .side.p1 .zone[data-z="hand"] > .zone-body:has(.card.peek){transform:translateY(-17.35cqw) scale(1.5)} /* -17.35cqw = tepi bawah kad kekal di tempat asal (0.5 × 34.7cqw), supaya tetikus tidak terkeluar & masuk semula (papan bergegar) */
#wrap.papan-kotak #arenaView .side.p1 .zone[data-z="hand"] .zone-body .card.peek{transform:translateY(-9%) scale(1.1) !important;z-index:40;box-shadow:0 1.38cqw 2.76cqw rgba(0,0,0,.55)}
#wrap.papan-kotak #arenaView .side.p1 .zone[data-z="hand"] .hand-slot:has(.card.peek),#wrap.papan-kotak #arenaView .side.p1 .zone[data-z="hand"] .hand-slot.peek-slot{z-index:40}
#wrap.papan-kotak #arenaView .side.p1 .zone[data-z="hand"] .hand-slot.peek-leave{z-index:39}
#wrap.papan-kotak #arenaView .side.p1 .zone[data-z="hand"].hand-settled .zone-body{pointer-events:auto}
#wrap.papan-kotak #arenaView .side.p1 .zone[data-z="hand"] .activate-btn,#wrap.papan-kotak #arenaView .side.p1 .zone[data-z="hand"] .cond-btn{font-size:2.85cqw;padding:1.20cqw 2.58cqw;bottom:auto;top:52%}
#wrap.papan-kotak .hand-pips-hover.p1{top:auto;bottom:calc(100% + 0.92cqw)}
#wrap.papan-kotak .hand-pips-hover.p2{top:calc(100% + 0.92cqw)}
#wrap.papan-kotak #arenaView .card.deck-empty-card{visibility:hidden}
#wrap.papan-kotak #arenaView .strip-status:empty,#wrap.papan-kotak #arenaView .strip-status-box:has(.strip-status:empty){display:none}
.vlog{position:absolute;left:1.5%;width:6.8%;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:1.84cqw;padding:1.38cqw 0;overflow:hidden;z-index:30;pointer-events:auto}
/* Log Mini v3: setiap kad berbingkai (bingkai warna pemain + garis dalam putih) */
.vlog-card{position:relative;flex:0 0 auto;width:4.23cqw;height:6.35cqw;border-radius:.7cqw;background:#1c1e2b center/cover no-repeat;border:.35cqw solid var(--lg-p1-line);cursor:pointer;box-shadow:inset 0 0 0 .18cqw rgba(255,255,255,.6),0 .3cqw .8cqw rgba(0,0,0,.5);animation:vlogIn .45s cubic-bezier(.3,1.4,.5,1) both;transition:transform .12s}
.vlog-card:hover{transform:scale(1.12)}
.vlog-card.p2{border-color:var(--lg-p2-line)}
.vlog-card .vlog-nm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.8.28cqw;line-height:1.05;color:#fff;padding:.1.84cqw;overflow:hidden}
.vlog-ico{position:absolute;right:-1.47cqw;top:-0.92cqw;width:2.76cqw;height:2.76cqw;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#20222e;border:.23.01cqw solid rgba(255,255,255,.85);box-shadow:0 .1.84cqw .5.52cqw rgba(0,0,0,.5)}
.vlog-ico svg{height:70%}
.vlog-card.atk .vlog-ico{background:#e8720c}
.vlog-card.hit .vlog-ico{background:#fff}
.vlog-card.cancel .vlog-ico{background:#5c6178}
.vlog-dmg{position:absolute;left:50%;transform:translateX(-50%);font:700 1.29cqw/1 "Lexend",system-ui,sans-serif;color:#fff;background:#c62d24;white-space:nowrap}
@keyframes vlogIn{
  0%{transform:translateY(-8cqw) scale(.9);opacity:0}
  35%{opacity:.7}
  100%{transform:none;opacity:1}
}
@media (prefers-reduced-motion: reduce){
  .vlog-card{animation:none}
}
/* Log Mini v3: butiran log (pada <body>, lebar = lebar papan supaya cqw sama dengan Log penuh) */
#vlogPop{position:fixed;z-index:29400;pointer-events:none;container-type:inline-size;display:none}
#vlogPop.on{display:block}
.vlp-box{position:relative;pointer-events:auto;width:64cqw;max-height:70vh;overflow:auto;margin-left:1.2cqw;padding:1cqw;border-radius:2cqw;background:rgba(22,24,36,.97);border:1px solid rgba(255,255,255,.18);box-shadow:0 1.8cqw 5cqw rgba(0,0,0,.6);transform-origin:left center}
.vlp-box.in{animation:vlpIn .22s cubic-bezier(.2,.9,.3,1.2) both}
.vlp-box .klog-row{margin:0}
.vlp-box .klog-row + .klog-row{margin-top:1cqw}
.vlp-tip{position:absolute;left:-1.2cqw;top:2cqw;width:0;height:0;border-top:1.2cqw solid transparent;border-bottom:1.2cqw solid transparent;border-right:1.2cqw solid rgba(22,24,36,.97)}
@keyframes vlpIn{0%{opacity:0;transform:translateX(-3cqw) scaleX(.85)}100%{opacity:1;transform:none}}
#wrap.papan-kotak #arenaView .battlestrip{position:absolute;display:flex;flex-direction:column;align-items:stretch;background:transparent;border:none;padding:0;z-index:40}
#wrap.papan-kotak #arenaView .strip-main{flex:0 0 auto}
#wrap.papan-kotak #arenaView .strip-status{background:rgba(35,35,40,.8) !important;color:#fff !important;border:1px solid rgba(255,255,255,.35) !important;font-size:1.77cqw;padding:.2.52cqw 1.51cqw;white-space:nowrap}
.kotak-hud{gap:0.84cqw}
.kotak-hud .hud-atk{flex:0 0 auto;width:4.04cqw;height:4.04cqw;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 35% 30%,#ff7a6b,#c62d24 70%);border:.29.44cqw solid rgba(255,255,255,.85);box-shadow:0 .3.36cqw 0.84cqw rgba(0,0,0,.4);color:#fff;font:700 1.68cqw/1 "Lexend",system-ui,sans-serif;letter-spacing:-.02em}
.kotak-hud .hud-hp-num{flex:0 0 auto;min-width:6.22cqw;text-align:center;color:#fff;font:700 3.53cqw/1 "Lexend",system-ui,sans-serif;letter-spacing:-.03em;text-shadow:0 .2.52cqw .6.73cqw rgba(0,0,0,.55),0 0 1px #000;font-variant-numeric:tabular-nums}
.kotak-hud .hud-hp-num small{font-size:1.60cqw;opacity:.75;margin-left:.3.36cqw;letter-spacing:0}
.kotak-hud .hud-bar{position:relative;flex:1 1 auto;background:rgba(20,20,24,.7);overflow:hidden}
.kotak-hud .hud-bar-lag{position:absolute;top:0;bottom:0;background:#ffe3a3;opacity:.85;transition:width .9s ease .45s}
.kotak-hud .hud-bar-fill{position:absolute;top:0;bottom:0;background:linear-gradient(180deg,#7dffb0,#1fbf66 55%,#12954c)}
.kotak-hud .hud-bar-fill.low{background:linear-gradient(180deg,#ff9b8f,#e0443a 55%,#b22a22)}
.kotak-hud .hud-bar-fill.bonus{background:linear-gradient(180deg,#fff2a8,#f2c230 55%,#c9961a)}
.kotak-hud .hud-bar-fill::after{content:"";position:absolute;left:0;right:0;top:12%;height:30%;background:rgba(255,255,255,.35)}
.kotak-hud.empty{opacity:.45}
.kotak-hud.hit .hud-hp-num{animation:hudNumHit .5s ease}
.kotak-hud.hit .hud-bar{animation:hudBarHit .5s ease}
@keyframes hudNumHit{
  0%{transform:scale(1);color:#fff}
  25%{transform:scale(1.25);color:#ff6b5e}
  100%{transform:scale(1);color:#fff}
}
@keyframes hudBarHit{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-.5.04cqw)}
  45%{transform:translateX(.4.21cqw)}
  70%{transform:translateX(-.2.52cqw)}
}
.aktif-aura{position:fixed;pointer-events:none;z-index:500}
/* Gelombang besar Kad Sokongan (spawnSokWave, MOTION 8.2) — titik tengah di Zon Sokongan, cincin hingga 1.5× papan */
.sok-wave{position:fixed;width:0;height:0;pointer-events:none;z-index:24700}
.sok-wave i,.sok-wave b{position:absolute;left:0;top:0;width:var(--wd);height:var(--wd);margin:calc(var(--wd) / -2) 0 0 calc(var(--wd) / -2);border-radius:50%;opacity:0;transform:scale(.06)}
.sok-wave i{border:.9vmin solid var(--wave);box-shadow:0 0 3vmin var(--wave),inset 0 0 4vmin color-mix(in srgb,var(--wave) 45%,transparent);animation:sokWaveRing 1.3s cubic-bezier(.16,.72,.3,1) both}
.sok-wave i:nth-of-type(2){animation-delay:.16s;border-width:.6vmin}
.sok-wave i:nth-of-type(3){animation-delay:.32s;border-width:.35vmin}
.sok-wave b{background:radial-gradient(circle,color-mix(in srgb,var(--wave) 55%,transparent) 0,color-mix(in srgb,var(--wave) 18%,transparent) 28%,transparent 55%);animation:sokWaveFlash 1s ease-out both}
@keyframes sokWaveRing{0%{opacity:0;transform:scale(.06)}8%{opacity:1}55%{opacity:.75}100%{opacity:0;transform:scale(1)}}
@keyframes sokWaveFlash{0%{opacity:0;transform:scale(.1)}18%{opacity:1;transform:scale(.45)}100%{opacity:0;transform:scale(.9)}}
@media (prefers-reduced-motion:reduce){.sok-wave{display:none}}
.aktif-aura i{position:absolute;inset:0;border-radius:8%;border:3px solid var(--aura,#39f0d2);box-shadow:0 0 12px var(--aura,#39f0d2),inset 0 0 10px var(--aura,#39f0d2);opacity:0;animation:auraWave 1.1s cubic-bezier(.2,.7,.3,1) both}
.aktif-aura i:nth-child(2){animation-delay:.22s}
.aktif-aura i:nth-child(3){animation-delay:.44s}
.aktif-aura b{position:absolute;inset:-4%;border-radius:10%;background:radial-gradient(closest-side,transparent 55%,var(--aura,#39f0d2) 100%);opacity:0;animation:auraGlow 1.5s ease-out both}
@keyframes auraWave{
  0%{transform:scale(1);opacity:.95}
  100%{transform:scale(1.55);opacity:0}
}
@keyframes auraGlow{
  0%{opacity:0}
  20%{opacity:.7}
  100%{opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .aktif-aura{display:none}
}
#wrap.papan-kotak .side.p2 .zone[data-z="botmood"] .zone-body{flex:0 0 auto;height:82%}
#wrap.papan-kotak #arenaView .zone[data-z="kalah"] .stack-slot{transform:translate(-50%,calc(-50% - min(var(--si,0),6) * 2px))}
.hand-pips-hover{transition:none !important}
#wrap,#wrap *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#wrap img{-webkit-user-drag:none;user-drag:none}
#wrap input,#wrap textarea{-webkit-user-select:text;user-select:text}
#wrap.papan-kotak .hand-pips-hover{display:none}
.kotak-hud{position:relative}
.kotak-stars{position:absolute;top:50%;transform:translateY(-50%);display:flex;gap:.32.22cqw;white-space:nowrap}
.kotak-hud.p1 .kotak-stars{left:calc(100% + 1.47cqw)}
.kotak-hud.p2 .kotak-stars{right:calc(100% + 1.47cqw);flex-direction:row-reverse}
.kotak-stars .st{width:2.30cqw;height:2.30cqw;display:block}
.kotak-stars .st path{fill:rgba(20,20,24,.45);stroke:rgba(255,255,255,.55);stroke-width:1.4}
.kotak-stars .st.on path{fill:#ffd23f;stroke:#fff6c8}
.kotak-stars .st.on{filter:drop-shadow(0 0 .4.60cqw rgba(255,210,63,.7))}
.tl-row{flex:1 1 0;min-height:0}
.turn-light{flex:1 1 0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7cqw;box-sizing:border-box;border-radius:2.6cqw;background:rgba(20,20,24,.45);border:.22cqw solid rgba(255,255,255,.18);color:rgba(255,255,255,.5);overflow:hidden}
.turn-light i{flex:0 0 auto;width:2.2cqw;height:2.2cqw;border-radius:50%;background:#7c828f;box-shadow:inset 0 .2cqw .3cqw rgba(0,0,0,.4)}
.turn-light span{writing-mode:vertical-rl;transform:rotate(180deg);font:700 2.25cqw/1 "Lexend",system-ui,sans-serif;white-space:nowrap;letter-spacing:.04em}
.tl-row.p1 .turn-light.on,.tl-row.p1 .turn-light.done{color:#fff;background:rgba(30,90,220,.55);border-color:#4f8dff}
.tl-row.p1 .turn-light.on i,.tl-row.p1 .turn-light.done i{background:#4f8dff;box-shadow:0 0 1cqw #4f8dff,0 0 2cqw rgba(79,141,255,.6)}
.tl-row.p2 .turn-light.on,.tl-row.p2 .turn-light.done{color:#fff;background:rgba(200,40,50,.5);border-color:#ff5a5a}
.tl-row.p2 .turn-light.on i,.tl-row.p2 .turn-light.done i{background:#ff5a5a;box-shadow:0 0 1cqw #ff5a5a,0 0 2cqw rgba(255,90,90,.6)}
.turn-light.on{animation:turnBlink 1.6s ease-in-out infinite}
@keyframes turnBlink{
  0%,100%{opacity:1}
  50%{opacity:.45}
}
@media (prefers-reduced-motion: reduce){
  .turn-light.on{animation:none}
}
.kstars-board{position:absolute;z-index:30;pointer-events:none}
/* 5 bintang kemenangan dalam kotak Zon Menang, di ruang antara kad & bingkai zon: P1 di atas kad, P2 di bawah kad (menghadap tengah papan). Hover zon Menang = bintang membesar */
.kstars-board{transform:translate(-50%,-50%);padding:1cqw 1.6cqw;border-radius:99px;transition:transform .22s cubic-bezier(.3,1.4,.5,1),background-color .18s ease}
.kstars-board.p2{left:calc(var(--kc1) + var(--kw) / 2);top:calc(var(--kr2) + var(--kh) * .75 + var(--kcard-h) / 4)}
.kstars-board.p1{left:calc(var(--kc3) + var(--kw) / 2);top:calc(var(--kr3) + var(--kh) / 4 - var(--kcard-h) / 4)}
#table:has(.side.p2 .zone[data-z="menang"]:hover) .kstars-board.p2,#table:has(.side.p1 .zone[data-z="menang"]:hover) .kstars-board.p1{z-index:31;transform:translate(-50%,-50%) scale(1.35);background-color:rgba(8,12,22,.82);box-shadow:0 .8cqw 2.4cqw rgba(0,0,0,.5)}
.kstars-board .kotak-stars{position:static;transform:none;gap:.5cqw}
.kstars-board.p1 .kotak-stars{flex-direction:row-reverse}
.kstars-board .kotak-stars .st{width:2.5cqw;height:2.5cqw}
.vlog-card.evt{background:linear-gradient(160deg,#4f8dff,#1d3fae);display:flex;align-items:center;justify-content:center}
.vlog-card.evt.p2{background:linear-gradient(160deg,#ff6b6b,#a3212b)}
.vlog-evt-ico{width:70%;height:70%;display:flex}
.vz-evt{width:44%;margin:4px auto 12px;aspect-ratio:2/3;border-radius:16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#4f8dff,#1d3fae);border:2px solid rgba(255,255,255,.7)}
.vz-evt.p2{background:linear-gradient(160deg,#ff6b6b,#a3212b)}
.vz-evt svg{width:55%;height:55%}
.klog-panel{display:flex;cursor:pointer}
.klog-box{flex:1;display:flex;flex-direction:column;background:rgba(22,24,36,.97);border:1px solid rgba(255,255,255,.15);border-radius:2.76cqw;box-shadow:0 1.84cqw 5.52cqw rgba(0,0,0,.5);overflow:hidden;cursor:default}
.klog-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.1);font:700 2.95cqw/1 "Lexend",system-ui,sans-serif;color:#fff}
.klog-close{width:7.36cqw;height:7.36cqw;border-radius:50%;border:none;background:#d33a2f;color:#fff;font-size:3.68cqw;font-weight:700;cursor:pointer;align-items:center;justify-content:center;box-shadow:0 .5.52cqw 1.47cqw rgba(0,0,0,.4)}
.klog-list{flex:1;overflow-y:auto;padding:1.47cqw 1.84cqw;overscroll-behavior:contain}
.klog-row{display:flex;gap:2.4cqw;align-items:flex-start;margin:1cqw 0;padding:1.8cqw 2cqw;border-radius:1.6cqw;background:var(--lg-sys-bg);border-left:.8cqw solid var(--lg-sys-line);font-size:3.9cqw;line-height:1.42;color:var(--lg-ink);font-weight:300}
/* Log v3: satu baris = satu pihak. Warna lapisan: biru = Anda (P1), merah jambu = Lawan (P2), kelabu gelap = sistem */
.klog-row.p1{background:var(--lg-p1-bg);border-left-color:var(--lg-p1-line)}
.klog-row.p2{background:var(--lg-p2-bg);border-left-color:var(--lg-p2-line)}
.lg3-left{flex:0 0 auto}
.lg3-card{position:relative;flex:0 0 auto;width:7.4cqw;height:11.1cqw;border-radius:.9cqw;background:#1c1e2b center/cover no-repeat;border:.35cqw solid var(--lg-sys-line);box-shadow:0 .4cqw 1.2cqw rgba(0,0,0,.45);cursor:pointer;overflow:visible}
.lg3-card.p1{border-color:var(--lg-p1-line)}
.lg3-card.p2{border-color:var(--lg-p2-line)}
.lg3-card.main{width:9.6cqw;height:14.4cqw;border-radius:1.1cqw}
.lg3-card.back{background:linear-gradient(135deg,#2a3170,#121845);cursor:default}
.lg3-flow .lg3-card.back + .lg3-card.back{margin-left:-3.2cqw;box-shadow:-.6cqw 0 1cqw rgba(0,0,0,.5)}
.lg3-card .lg3-nm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:.4cqw;font-size:1.9cqw;line-height:1.1;color:#fff;overflow:hidden}
.lg3-card .lg3-back{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:5cqw;opacity:.8;color:#fff}
.lg3-sym{position:relative;width:9.6cqw;height:14.4cqw;border-radius:1.1cqw;background:linear-gradient(160deg,var(--lg-sys-line),#2a2e3d);border:.35cqw solid rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;box-shadow:0 .4cqw 1.2cqw rgba(0,0,0,.45)}
.lg3-sym.p1{background:linear-gradient(160deg,var(--lg-p1-line),#1d3fae)}
.lg3-sym.p2{background:linear-gradient(160deg,var(--lg-p2-line),#a3215f)}
.lg3-sym .g{font-size:5.4cqw;font-weight:700;color:#fff;line-height:1}
.lg3-sym .g.osom{width:5.6cqw;height:5.6cqw;border-radius:50%;border:.9cqw solid #fff}
.lg3-sym .g.dot{width:1.8cqw;height:1.8cqw;border-radius:50%;background:#fff}
.lg3-sym .g.ok{color:#7dffb5}
.lg3-sym .g.fail{color:var(--lg-fail)}
.lg3-body{flex:1;min-width:0}
.lg3-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3cqw 1.4cqw}
.lg3-no{font-weight:700;color:#fff}
.lg3-no.p1{color:var(--lg-p1-ink)}
.lg3-no.p2{color:var(--lg-p2-ink)}
.lg3-who{font-weight:700;font-style:italic;color:var(--lg-p1-ink)}
.lg3-who.p2{color:var(--lg-p2-ink)}
.lg3-title{font-weight:600;color:#fff}
.s-ok .lg3-title{color:var(--menang)}
.s-fail .lg3-title{color:var(--lg-fail)}
.s-cancel .lg3-title{color:var(--kalah)}
.s-win .lg3-title,.s-over .lg3-title{color:var(--hp-bonus)}
.lg3-detail{margin-top:.4cqw}
.lg3-why{margin-top:.4cqw;color:var(--lg-why)}
.klog-row b.lg-card{font-weight:600;color:#fff}
.klog-row b.lg-num{font-weight:600;color:#fff}
.lg3-chips{display:flex;flex-direction:column;align-items:flex-start;gap:.8cqw;margin-top:.8cqw}
/* HP di atas, ATK di bawah */
.lg3-hpatk{display:flex;flex-direction:column;margin-top:.3cqw}
.lg3-hpatk b{font-weight:600;color:#fff}
.lg3-hpatk .hp b{color:#4fd394}
.lg3-stat{display:inline-flex;align-items:baseline;gap:.9cqw;padding:.4cqw 1.6cqw;border-radius:99px;background:rgba(0,0,0,.28);font-variant-numeric:tabular-nums}
.lg3-stat b{font-weight:600}
.lg3-stat .neg{color:#ff5f6d}
.lg3-stat .pos{color:#7dffb5}
.lg3-stat .arr{opacity:.6}
.lg3-stat .res{font-weight:700;color:#4fd394}
.lg3-stat .res.zero{color:#ff5f6d}
.lg3-ko{font-weight:700;color:#ff5f6d}
.lg3-chips .lg3-hits{display:inline-flex;align-items:center}
.lg3-die{display:inline-flex;align-items:center;justify-content:center;width:4.2cqw;height:4.2cqw;margin-right:1cqw;border-radius:.9cqw;background:#fff;color:#141824;font-weight:700;font-size:2.8cqw;vertical-align:middle;box-shadow:0 .3cqw .8cqw rgba(0,0,0,.45)}
.lg3-flow{display:flex;flex-wrap:wrap;align-items:center;gap:1.2cqw;margin-top:1.2cqw}
.lg3-rel{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:6.4cqw;height:6.4cqw;font-size:4.8cqw;line-height:1}
.lg3-rel.duo .b{position:absolute;right:-.2cqw;bottom:-.2cqw;font-size:3.4cqw;filter:drop-shadow(0 .2cqw .4cqw rgba(0,0,0,.6))}
.lg3-boxes{position:relative;width:5.2cqw;height:5.2cqw}
.lg3-boxes i{position:absolute;width:3.6cqw;height:3.6cqw;border-radius:.6cqw;border:.5cqw solid #fff;background:rgba(255,255,255,.12)}
.lg3-boxes i:first-child{left:0;top:0}
.lg3-boxes i:last-child{right:0;bottom:0;background:rgba(110,170,255,.45)}
/* Bar pembahagi pusingan (tidak dilipat) */
.klog-div{display:flex;align-items:center;gap:1.6cqw;margin:3cqw 0 2.4cqw;font-size:3.4cqw}
.kd-line{flex:1;height:.35cqw;border-radius:9px;background:var(--lg-sys-line)}
.kd-lbl{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:.4cqw 1.6cqw;padding:1cqw 2.6cqw;border-radius:99px;background:var(--lg-sys-bg);border:.3cqw solid var(--lg-sys-line);color:#fff;font-weight:300;text-align:center}
.kd-lbl b{font-weight:700;letter-spacing:.04em}
.klog-legend{display:flex;align-items:center;gap:1cqw;font-weight:300;font-size:.78em;color:rgba(255,255,255,.7)}
.klog-legend i{width:2.4cqw;height:2.4cqw;border-radius:.6cqw;margin-left:1.2cqw;background:var(--lg-sys-line)}
.klog-legend i.p1{background:var(--lg-p1-line)}
.klog-legend i.p2{background:var(--lg-p2-line)}
.klog-empty{color:rgba(255,255,255,.6);padding:3.68cqw;text-align:center}
.hz-stage{display:flex;align-items:center;justify-content:center;width:100%;will-change:transform}
.card-zoom-box.hand-zoom{flex:0 0 auto;width:min(380px,72vw);max-height:92vh;overflow-y:auto}
.hz-side{flex:0 0 auto;width:min(200px,34vw);margin:0 -24vw;opacity:.42;transform:scale(.86);cursor:pointer;transition:opacity .15s;z-index:0}
.hz-side.left{margin-right:3vw}
.hz-side.right{margin-left:3vw}
@media (min-width:700px){
  .hz-side{margin:0 -60px}
  .hz-side.left{margin-right:16px}
  .hz-side.right{margin-left:16px}
}
.hz-side:hover{opacity:.7}
.hz-side.empty{visibility:hidden}
.hz-side img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:18px}
.card-zoom-box.hand-zoom{position:relative;z-index:1}
.swipe-reject{animation:swipeReject .6s cubic-bezier(.3,1.4,.5,1) both !important}
@keyframes swipeReject{
  0%{transform:translateY(0)}
  35%{transform:translateY(-18%)}
  100%{transform:translateY(0)}
}
.swipe-warn{position:fixed;left:50%;top:42%;transform:translateX(-50%);z-index:9600;pointer-events:none;background:#c62d24;color:#fff;font:700 1rem/1.2 "Lexend",system-ui,sans-serif;padding:12px 20px;border-radius:14px;border:2px solid #fff;box-shadow:0 10px 30px rgba(0,0,0,.5);white-space:nowrap;animation:warnBlink .45s ease-in-out 4}
@keyframes warnBlink{
  0%,100%{opacity:1}
  50%{opacity:.25}
}
.vlog-zoom-desc{margin-top:8px;padding:9px 11px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font-size:.8rem;line-height:1.45;font-weight:300;color:rgba(236,238,251,.8);text-align:left}
.vlog-zoom-desc b{font-weight:700;color:#fff}
.vlog-zoom-no{display:inline-block;font-weight:800;color:#fff;background:#4a3fd1;border-radius:6px;padding:0 6px;margin-right:6px}
.vlog-zoom-desc .vz-q{font-style:italic;color:#ffe3a3;font-weight:400}
.log-dialog-body li .lg-no{font-weight:800;color:var(--ink);margin-right:4px}
.log-dialog-body li .lg-body{font-weight:300;opacity:.78}
.log-dialog-body li .lg-body b.lg-key{font-weight:700;opacity:1;color:var(--ink)}
.win-banner{position:fixed;left:0;right:0;top:38%;display:flex;justify-content:center;pointer-events:none;animation:wbIn .45s cubic-bezier(.3,1.4,.5,1) both}
.win-banner.out{animation:wbOut .45s ease both}
.wb-inner{min-width:260px;padding:14px 26px 16px;border-radius:18px;text-align:center;background:linear-gradient(180deg,rgba(24,26,40,.95),rgba(10,12,22,.95));border:2px solid #39f0d2;box-shadow:0 12px 40px rgba(0,0,0,.55),0 0 24px rgba(57,240,210,.35)}
.win-banner.p2 .wb-inner{border-color:#ff5c96;box-shadow:0 12px 40px rgba(0,0,0,.55),0 0 24px rgba(255,92,150,.35)}
.wb-title{font:800 1.6rem/1.1 "Lexend",system-ui,sans-serif;color:#fff;letter-spacing:.01em;margin-bottom:10px;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.win-banner.p1 .wb-title{color:#7dffe9}
.win-banner.p2 .wb-title{color:#ff9cc0}
.wb-row{display:flex;gap:8px;justify-content:center}
.wb-box{width:34px;height:34px;border-radius:8px;border:2px solid rgba(255,255,255,.35);background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center}
.wb-box svg{width:24px;height:24px}
.wb-box svg path{fill:transparent}
.wb-box.on svg path{fill:#ffd23f}
.wb-box.new{border-color:#ffd23f}
.wb-box.new svg path{fill:#ffd23f}
.wb-box.new svg{animation:wbStar .5s ease .35s both, wbBlink .7s ease-in-out .85s 3}
@keyframes wbIn{
  0%{transform:translateY(-20px) scale(.8);opacity:0}
  100%{transform:none;opacity:1}
}
@keyframes wbOut{
  0%{opacity:1}
  100%{transform:translateY(-12px);opacity:0}
}
@keyframes wbStar{
  0%{transform:scale(0) rotate(-90deg)}
  70%{transform:scale(1.35) rotate(10deg)}
  100%{transform:scale(1)}
}
@keyframes wbBlink{
  0%,100%{opacity:1;filter:drop-shadow(0 0 6px #ffd23f)}
  50%{opacity:.3;filter:none}
}
.gameover-reason{margin:4px 0 10px;font-size:.85rem;color:rgba(236,238,251,.8)}
:root{--bottomnav-h:92px;--nav-lift:14px}
#bottomNav{bottom:calc(var(--nav-lift) + env(safe-area-inset-bottom,0px));padding:0 10px}
.bottom-nav-inner{border-radius:22px !important;border:1px solid var(--line) !important;padding:9px 10px !important;box-shadow:0 8px 26px -6px rgba(0,0,0,.45) !important}
.bottom-nav-btn{padding:12px 2px 10px}
.bottom-nav-btn .bn-icon{font-size:1.45rem}
.bottom-nav-btn .bn-label{font-size:.78rem}
.footer-row{bottom:calc(var(--bottomnav-h) + var(--nav-lift) + 6px + env(safe-area-inset-bottom,0px)) !important;left:10px !important;right:10px !important;border-radius:22px !important;border:1px solid var(--line) !important;padding:14px 16px !important;min-height:70px;box-sizing:border-box;box-shadow:0 8px 26px -6px rgba(0,0,0,.45) !important;flex-wrap:nowrap !important}
body.arena-game-live{padding-bottom:calc(24px + 70px + var(--nav-lift) + env(safe-area-inset-bottom,0px)) !important}
.footer-row #actionFrame{min-width:0;justify-content:center}
.footer-row #actionFrame .hint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.card-zoom-overlay{padding:16px 0;overflow:hidden}
.kotak-hud .hud-track-wrap{flex:1 1 auto;min-width:0;display:flex;align-items:center}
.kotak-hud .hud-bar-box{position:relative;transition:width .6s ease}
.kotak-hud .hud-bar{width:100%}
.kotak-hud .hud-bar .hud-hp-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;min-width:0;font:800 2.5cqw/1 "Lexend",system-ui,sans-serif;letter-spacing:-.02em;z-index:2;text-shadow:0 .2cqw .5cqw rgba(0,0,0,.85),0 0 1px #000}
.kotak-hud.hit .hud-bar .hud-hp-num{animation:hudNumHit .5s ease}
.hud-shields{position:absolute;top:50%;transform:translateY(-50%);display:flex;gap:.2cqw;z-index:3}
.hud-shield{filter:drop-shadow(0 .2cqw .4cqw rgba(0,0,0,.6))}
.hud-shield svg{width:100%;height:100%;display:block}
.hud-shield path{fill:#6b6f7c;stroke:#c9ccd6;stroke-width:1.2}
.hud-shield path.sh-in{fill:#8d91a0;stroke:none}
.hud-shield.on path{fill:#f2b705;stroke:#fff3b0}
.hud-shield.on path.sh-in{fill:#ffd84a}
.hud-shield.on{animation:shieldGlow 1.8s ease-in-out infinite}
@keyframes shieldGlow{
  0%,100%{filter:drop-shadow(0 0 .3cqw rgba(255,210,63,.4))}
  50%{filter:drop-shadow(0 0 1cqw rgba(255,210,63,.95))}
}
.epk-frame{position:absolute;left:9.6%;width:80.8%;z-index:350;box-sizing:border-box;display:flex;flex-direction:column;background:rgba(14,16,28,.94);border:.45cqw solid #4f8dff;border-radius:3cqw;padding:2cqw;box-shadow:0 1.5cqw 5cqw rgba(0,0,0,.6);animation:epkIn .34s cubic-bezier(.2,1,.35,1) both}
.epk-frame.p2{top:.6%;height:49%;border-color:#ff5a5a}
.epk-frame.p1{top:50.4%;height:49%}
/* Besar 2x: zon lawan (atas) memanjang ke bawah; zon sendiri (bawah) memanjang ke atas */
.epk-frame{transition:top .32s cubic-bezier(.2,.9,.3,1),height .32s cubic-bezier(.2,.9,.3,1)}
.epk-frame.p2.big{height:98.8%}
.epk-frame.p1.big{top:.6%;height:98.8%}
/* Butang bingkai pilih kad: di luar bingkai, bawah tepi kanan (ikut saiz bingkai). Dari kanan: ⬇/⬆, −, +. Biru = zon Anda, merah = zon lawan. */
.epk-side{position:absolute;top:calc(100% + 1.4cqw);right:0;z-index:2;display:flex;flex-direction:row;align-items:center;gap:1.6cqw;padding:1cqw 1.4cqw;border-radius:99px;background:rgba(14,16,28,.94);border:1px solid var(--epk-c);box-shadow:0 .8cqw 2.4cqw rgba(0,0,0,.45);--epk-c:#4f8dff}
.epk-side.p2{--epk-c:#ff5a5a}
.epk-frame.closing .epk-side{opacity:0}
.epk-side-btn{width:max(26px,5.4cqw);height:max(26px,5.4cqw);border-radius:50%;border:.3cqw solid var(--epk-c);background:color-mix(in srgb,var(--epk-c) 22%,transparent);color:#fff;font:700 max(14px,3.2cqw)/1 "Lexend",system-ui,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.epk-side-btn:disabled{opacity:.35;cursor:default}
.epk-side-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.epk-side-btn.grow span{display:block;animation:epkBeat 1s ease-in-out infinite}
.epk-side-btn.grow.down:not(.on) span,.epk-side-btn.grow.up.on span{--beat:.6cqw}
.epk-side-btn.grow.up:not(.on) span,.epk-side-btn.grow.down.on span{--beat:-.6cqw}
@keyframes epkBeat{0%,100%{transform:translateY(0)}50%{transform:translateY(var(--beat,.6cqw))}}
.epk-reopen{position:absolute;left:calc(var(--kc2) + var(--kw) / 2);top:calc(var(--kr3) + var(--kh));transform:translate(-50%,-50%);z-index:350;white-space:nowrap;padding:1.6cqw 3.4cqw;border-radius:99px;border:.35cqw solid #8fc4ff;background:rgba(14,16,28,.95);color:#fff;font:700 2.9cqw/1 "Lexend",system-ui,sans-serif;cursor:pointer;animation:epkReopenPulse 1.1s ease-in-out infinite}
@keyframes epkReopenPulse{0%,100%{box-shadow:0 0 .6cqw .15cqw rgba(140,200,255,.55),0 0 2cqw .5cqw rgba(120,180,255,.25);border-color:#6fa9ff}50%{box-shadow:0 0 1.4cqw .4cqw rgba(200,230,255,.95),0 0 4cqw 1.2cqw rgba(120,180,255,.5);border-color:#fff}}
@media (prefers-reduced-motion:reduce){.epk-side-btn.grow span,.epk-reopen{animation:none}}
.epk-frame.fading{animation:none;align-items:center;justify-content:center}
.epk-done{font:800 4cqw/1 "Lexend",system-ui,sans-serif;color:#fff}
.epk-head{display:flex;align-items:center;justify-content:space-between;font:800 3.1cqw/1.1 "Lexend",system-ui,sans-serif;color:#fff;margin-bottom:1cqw}
.epk-frame.p1 .epk-zone{color:#8fb6ff}
.epk-frame.p2 .epk-zone{color:#ff9c9c}
.epk-prog{font-size:2.4cqw;opacity:.8}
.epk-hint{font-size:2.2cqw;line-height:1.35;color:rgba(236,238,251,.75);font-weight:300;margin-bottom:1.6cqw}
.epk-hint b{font-weight:700;color:#fff}
.epk-grid{flex:1;min-height:0;overflow-y:auto;display:grid;align-content:start;overscroll-behavior:contain;padding:.4cqw}
.epk-grid .card.pick-card{width:100%;aspect-ratio:2/3;height:auto;margin:0;padding:.8cqw;border-radius:1.4cqw;position:relative;overflow:hidden;background-size:cover;background-position:center;font-size:1.5cqw;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.epk-grid .card.pick-card.has-img{padding:0}
.epk-grid .card.pick-card:not(.unselectable):hover{transform:translateY(-.6cqw) scale(1.04);box-shadow:0 0 0 .35cqw #ffd23f,0 1cqw 2cqw rgba(0,0,0,.5)}
.epk-grid .card.pick-card:not(.unselectable){box-shadow:0 0 0 .25cqw rgba(255,210,63,.7)}
.epk-grid .card.pick-card.unselectable{filter:grayscale(1) brightness(.5);opacity:.55;cursor:not-allowed}
.epk-grid .pick-note{position:absolute;left:0;right:0;bottom:0;font-size:1.4cqw;background:rgba(0,0,0,.7);color:#fff;text-align:center;padding:.4cqw}
.epk-empty{color:rgba(255,255,255,.6);grid-column:1/-1;text-align:center;padding:4cqw}
@keyframes epkIn{
  0%{opacity:0;transform:scale(.06)}
  60%{opacity:1}
  100%{opacity:1;transform:none}
}
/* Bingkai pilih kad menutup kembali ke zon asal (transform-origin = zon asal, diset dlm effectPickFrameMarkup) */
.epk-frame.closing{animation:epkOut .38s cubic-bezier(.5,0,.75,.4) both;pointer-events:none}
@keyframes epkOut{0%{opacity:1;transform:none}100%{opacity:0;transform:scale(.06)}}
#wrap.papan-kotak #arenaView .side.p1 .zone[data-z="hand"] .card .cond-note{margin-top:0}
@media (prefers-reduced-motion: reduce){
  .hz-stage *{animation:none !important}
}
.turn-light i{display:none !important}
.turn-light{width:5.2cqw !important;padding:.8cqw 0 !important}
.osom-halfshade{position:absolute;top:47%;bottom:-16%;z-index:7;pointer-events:none;border-radius:0 0 14px 14px;animation:halfShadeIn .35s ease both}
@keyframes halfShadeIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes halfShadeOut{
  from{opacity:1}
  to{opacity:0}
}
.hud-shields{left:calc(100% + .6cqw)}
.hud-shield{width:2.3cqw;height:2.7cqw}
#wrap.papan-kotak #arenaView .side.p1 .zone[data-z="hand"] .card .cond-note{bottom:calc(100% + 2.6cqw)}
#wrap.papan-kotak #arenaView .side.p1 .zone[data-z="hand"] .card.peek .cond-note{animation:noteBob 1.3s ease-in-out infinite}
#wrap.papan-kotak #arenaView .side.p1 .zone[data-z="hand"] .card .cond-note::before{top:100%;border-bottom:none}
#wrap.papan-kotak #arenaView .side.p1 .zone[data-z="hand"] .card.hand-locked-cond .cond-note::before{border-top:7px solid var(--stage-cond-bg)}
#wrap.papan-kotak #arenaView .side.p1 .zone[data-z="hand"] .card.hand-locked-support .cond-note::before{border-top:7px solid var(--stage-locked-bg)}
@keyframes noteBob{
  0%,100%{translate:0 0;opacity:1}
  50%{translate:0 -5px;opacity:.72}
}
.hit-burst{position:fixed;pointer-events:none;z-index:480}
.hit-burst .hb-star{position:absolute;inset:18%;width:64%;height:64%;animation:hbStar .8s cubic-bezier(.2,1.4,.4,1) both}
.hit-burst .hb-star path{fill:#fff6b0;stroke:#ffb400;stroke-width:3;stroke-linejoin:round}
.hit-burst .hb-star2{position:absolute;inset:30%;width:40%;height:40%;animation:hbStar2 .8s ease-out both}
.hit-burst .hb-star2 path{fill:#fff}
.hit-burst .hb-rays i{position:absolute;left:50%;top:50%;width:26%;height:3%;margin:-1.5% 0 0 0;border-radius:4px;transform-origin:0 50%;background:linear-gradient(90deg,rgba(255,255,255,0),#fff 40%,#ffd23f);transform:rotate(var(--a)) translateX(10%) scaleX(.2);opacity:0;animation:hbRay .8s cubic-bezier(.2,.9,.3,1) var(--d) both}
.hit-burst .hb-swoosh{position:absolute;inset:8%;border-radius:50%;border:4px solid transparent;border-top-color:#fff;border-right-color:rgba(255,210,63,.9);animation:hbSwoosh .8s cubic-bezier(.3,.8,.3,1) both}
@keyframes hbStar{
  0%{transform:scale(.1) rotate(-40deg);opacity:0}
  18%{transform:scale(1.15) rotate(8deg);opacity:1}
  45%{transform:scale(1) rotate(0);opacity:1}
  100%{transform:scale(1.35) rotate(18deg);opacity:0}
}
@keyframes hbStar2{
  0%{transform:scale(0);opacity:0}
  20%{transform:scale(1.2);opacity:1}
  100%{transform:scale(.4) rotate(-30deg);opacity:0}
}
@keyframes hbRay{
  0%{opacity:0;transform:rotate(var(--a)) translateX(10%) scaleX(.2)}
  25%{opacity:1}
  100%{opacity:0;transform:rotate(var(--a)) translateX(95%) scaleX(1)}
}
@keyframes hbSwoosh{
  0%{transform:rotate(-120deg) scale(.5);opacity:0}
  25%{opacity:1}
  100%{transform:rotate(200deg) scale(1.25);opacity:0}
}
.win-banner{z-index:20000 !important}
.klog-toggle{position:absolute;left:1.9%;width:6%;bottom:15.9%;height:5.4cqw;z-index:450;border-radius:1.6cqw;border:.25cqw solid rgba(255,255,255,.35);background:rgba(30,32,46,.92);color:#fff;font-size:2.6cqw;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 .5cqw 1.4cqw rgba(0,0,0,.45);padding:0}
/* Label Pusingan: di luar tepi kiri papan, tengah menegak; bila skrin sempit, diletak serapat mungkin ke tepi skrin */
.kround{position:absolute;top:50%;left:max(calc(-2.4cqw - 6.4cqw - 6px),calc((100cqw - 100vw) / 2 + 2px));width:6.4cqw;min-width:20px;padding:2.2cqw 0;transform:translateY(-50%);z-index:36;display:flex;flex-direction:column;align-items:center;gap:1.2cqw;border-radius:3.2cqw;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;font-family:"Lexend",system-ui,sans-serif;box-shadow:0 .8cqw 2.4cqw rgba(0,0,0,.45)}
.kround span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:max(9px,2.1cqw);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);white-space:nowrap}
.kround b{font-weight:700;color:var(--ink);letter-spacing:0;font-variant-numeric:tabular-nums}
.kround:hover,.kround:focus-visible{border-color:var(--accent);outline:none}
#wrap:not(.papan-kotak) .kround{display:none}
.klog-toggle.on{background:#d33a2f;border-color:#fff}
#wrap.papan-kotak .osom-hand-pickover{background:transparent !important;box-shadow:none !important;border-radius:0 !important}
#wrap.papan-kotak .osom-hand-pickover .osom-title-main,#wrap.papan-kotak .osom-hand-pickover .osom-title-sub{color:#fff !important;text-shadow:0 .3cqw 1cqw rgba(0,0,0,.7)}
.table.osom-lock .side.p1 .zone[data-z="hand"] > .zone-body{pointer-events:none !important}
.table.osom-lock .side.p1 .zone[data-z="hand"] .card{transition:none !important}
.osom-hand-pickover .osom-pick-card{transition:none !important}
.osom-hand-pickover.picking-lock .osom-pick-card{pointer-events:none !important}
#wrap.papan-kotak #arenaView .side.p1 .deck-count-badge{top:50% !important;right:-1.6cqw !important;left:auto !important;transform:translateY(-50%)}
#wrap.papan-kotak #arenaView .side.p2 .deck-count-badge{top:50% !important;left:-1.6cqw !important;right:auto !important;transform:translateY(-50%)}
#wrap.papan-kotak #arenaView .strip-main,#wrap.papan-kotak #arenaView .strip-status-box{display:none !important}
#wrap.papan-kotak #arenaView .zone[data-z="kalah"] .zone-body.kalah-fan{display:flex !important;flex-direction:row}
#wrap.papan-kotak #arenaView .zone[data-z="kalah"] .kalah-fan .hand-slot{position:relative;height:var(--kcard-h);aspect-ratio:2/3;flex:0 0 auto;margin:0 var(--fm,0) !important;transition:opacity .28s ease} /* --fm = tindanan (fanMarginStyle); dipulihkan 31 Okt 2026 — terbuang dalam kemas CSS v570 */
#wrap.papan-kotak #arenaView .zone[data-z="kalah"] .kalah-fan .hand-slot .card{position:absolute;width:100%;height:100%}
#wrap.papan-kotak #arenaView .zone[data-z="kalah"] .kalah-fan .hand-slot.kalah-pending-hide{opacity:0}
.tl-row{position:absolute;left:91.7%;width:6.8%;height:28.3%;display:flex;flex-direction:column;align-items:center;gap:1.4cqw;z-index:30;pointer-events:none;box-sizing:border-box;padding:.8cqw 0}
.tl-row.p2{top:16.33%}
.tl-row.p1{top:55.36%}
.table.osom-lock .vlog,.table.osom-lock .klog-toggle,.table.osom-lock .kround,.table.osom-lock .tl-row,.table.osom-lock .knext-btn{opacity:0 !important;visibility:hidden !important;pointer-events:none !important}
.osom-halfshade{left:-4%;right:-4%;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(3,4,10,.86) 14%,rgba(3,4,10,.96) 100%)}
.osom-halfshade.out{animation:halfShadeOut .52s ease both}
.knext-btn{position:absolute;z-index:440;cursor:pointer;color:#fff;writing-mode:vertical-rl;transform:rotate(180deg)}
.knext-btn:active{filter:brightness(.9)}
.knext-btn:disabled{cursor:default}
#wrap:not(.papan-kotak) .knext-btn{display:none}
.epk-grid{grid-template-columns:repeat(var(--epk-cols,4),minmax(0,1fr)) !important;gap:1.8cqw 1.4cqw !important}
.epk-tile{display:flex;flex-direction:column;align-items:center;gap:.8cqw;min-width:0}
.epk-card{width:100%;aspect-ratio:2/3;border-radius:1.2cqw;background:#23283a center/cover no-repeat;border:.25cqw solid rgba(255,255,255,.25);cursor:zoom-in;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6cqw;padding:.6cqw;box-sizing:border-box;text-align:center;overflow:hidden}
.epk-card .epk-nm{font:700 1.7cqw/1.2 "Lexend",system-ui,sans-serif;color:#fff}
.epk-card .epk-st{font-size:1.4cqw;color:rgba(255,255,255,.7)}
.epk-tile.off .epk-card{filter:grayscale(1) brightness(.55)}
.epk-pick-btn{border:0;border-radius:99px;padding:.8cqw 2.4cqw;background:#ffd23f;color:#1b1b1b;font:800 1.9cqw/1 "Lexend",system-ui,sans-serif;cursor:pointer;box-shadow:0 .4cqw 1cqw rgba(0,0,0,.4)}
.epk-pick-btn:active{transform:scale(.95)}
.epk-rgrid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.2cqw;align-content:start;padding:.4cqw 0}
.epk-rtile{position:relative;display:flex;flex-direction:column;align-items:center;gap:.8cqw;min-width:0;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.epk-rtile.dragging{z-index:5;cursor:grabbing;filter:drop-shadow(0 1.2cqw 1.6cqw rgba(0,0,0,.6));transition:none}
.epk-rtile.drop-before .epk-card{box-shadow:-.9cqw 0 0 #ffd23f}
.epk-rtile.drop-after .epk-card{box-shadow:.9cqw 0 0 #ffd23f}
.epk-rnum{position:absolute;top:-.6cqw;left:-.4cqw;z-index:3;min-width:3.6cqw;height:3.6cqw;border-radius:99px;background:#ffd23f;color:#1b1b1b;font:800 2.3cqw/3.6cqw "Lexend",system-ui,sans-serif;text-align:center}
.epk-rarrows{display:flex;gap:.8cqw}
.epk-rarrow{border:0;border-radius:99px;width:4cqw;height:3.2cqw;background:rgba(255,255,255,.14);color:#fff;font-size:1.8cqw;cursor:pointer}
.epk-rarrow:disabled{opacity:.3;cursor:default}
.epk-actions{display:flex;justify-content:center;gap:1.6cqw;padding-top:1.2cqw}
.epk-zone-btn{border:.25cqw solid rgba(255,255,255,.35);border-radius:99px;padding:1cqw 2.6cqw;background:rgba(255,255,255,.08);color:#fff;font:700 2cqw/1 "Lexend",system-ui,sans-serif;cursor:pointer}
.epk-zone-btn.on{background:#ffd23f;color:#1b1b1b;border-color:#ffd23f}
.epk-zone-btn:disabled{opacity:.35;cursor:not-allowed}
.epk-pick-no{font-size:1.9cqw;line-height:1;padding:.8cqw 0;color:rgba(255,255,255,.3)}
.card-zoom-overlay{z-index:30000}
.table.osom-lock .zone[data-z="log"]{visibility:hidden !important}
.knext-btn{left:calc(91.7% + 3.4% - 2.6cqw) !important;width:5.2cqw !important;top:calc(49.995% - 6.9cqw) !important;height:13.8cqw !important;border-radius:2.6cqw !important;border:.22cqw solid #58e59a !important;padding:0 !important;background:rgba(22,150,80,.6) !important;font:700 2.25cqw/1 "Lexend",system-ui,sans-serif !important;letter-spacing:.04em !important;box-shadow:0 0 1.2cqw rgba(60,220,130,.35) !important;display:flex;align-items:center;justify-content:center}
.knext-btn:disabled{background:rgba(20,20,24,.45) !important;border-color:rgba(255,255,255,.18) !important;color:rgba(255,255,255,.4) !important;box-shadow:none !important}
.kotak-hud.hud-hidden{visibility:hidden}
.kotak-hud.hud-intro .hud-atk{animation:hudAtkPop .38s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(700ms + var(--hia,0ms));position:relative;z-index:2}
.kotak-hud.hud-intro .hud-bar-box{transform-origin:0 50%;animation:hudBarGrow .6s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(1050ms + var(--hia,0ms))}
@keyframes hudAtkPop{
  0%{opacity:0;transform:scale(0)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes hudBarGrow{
  0%{opacity:0;transform:translateX(-4cqw) scaleX(0)}
  25%{opacity:1}
  100%{opacity:1;transform:none}
}
#wrap.papan-kotak #arenaView .zone[data-z="kalah"] .kalah-fan .hand-slot{width:calc(var(--kcard-h) * 2 / 3);min-width:0}
#wrap.papan-kotak #arenaView .zone[data-z="aktif"]{z-index:2}
.kcrack-host{position:absolute;width:var(--kw);height:var(--kh);left:var(--kc2);pointer-events:none}
.kcrack-host.p2{top:var(--kr2)}
.kcrack-host.p1{top:var(--kr3)}
.kcrack{position:absolute;inset:-4%;width:108%;height:108%;overflow:visible;animation:kcrackLife 13s linear both;filter:drop-shadow(0 0 .25cqw rgba(0,0,0,.6))}
.kcrack path{fill:none;stroke:rgba(20,18,22,.88);stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-width:.45cqw}
.kcrack path.br{stroke-width:.28cqw}
.kcrack path.ring{stroke-width:.3cqw;stroke:rgba(255,255,255,.35)}
@keyframes kcrackLife{
  0%{opacity:0;transform:scale(.6)}
  1.5%{opacity:1;transform:scale(1.04)}
  3%{transform:scale(1)}
  23%{opacity:1}
  100%{opacity:0;transform:scale(1)}
}
.kefek,.ksok-efek{position:absolute;z-index:3;width:4.8cqw;height:6.6cqw;transform:translate(-50%,-50%);border-radius:1.2cqw;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2cqw;color:#fff;pointer-events:auto;border:.25cqw solid rgba(255,255,255,.85);box-shadow:0 .4cqw 1cqw rgba(0,0,0,.45);animation:kefekIn .4s cubic-bezier(.34,1.56,.64,1) .75s both}
.kefek small,.ksok-efek small{font:700 1.05cqw/1 "Lexend",system-ui,sans-serif;letter-spacing:.04em;opacity:.9}
.kefek b,.ksok-efek b{font:800 3cqw/1 "Lexend",system-ui,sans-serif}
.kefek.e1,.ksok-efek.e1{background:var(--accent,#5b4bdb)}
.kefek.e2,.ksok-efek.e2{background:var(--menang,#1aa35a)}
.kefek.e3,.ksok-efek.e3{background:var(--kalah,#d8434a)}
.kefek.p1{left:41.37%}
.kefek.p2{left:58.55%}
@keyframes kefekIn{
  0%{opacity:0;transform:translate(-50%,-50%) scale(0)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
/* Badge 🔒 efek dinafikan: hentak (stomp) dari besar ke saiz asal dengan gelang debu — papan TIDAK bergegar */
@keyframes kefekStomp{
  0%{opacity:0;transform:translate(-50%,-50%) scale(2.8);box-shadow:0 .4cqw 1cqw rgba(0,0,0,.45),0 0 0 0 rgba(255,255,255,0)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(.82);box-shadow:0 .4cqw 1cqw rgba(0,0,0,.45),0 0 0 0 rgba(255,255,255,.75)}
  72%{transform:translate(-50%,-50%) scale(1.1)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1);box-shadow:0 .4cqw 1cqw rgba(0,0,0,.45),0 0 0 2.6cqw rgba(255,255,255,0)}
}
.sok-show{position:fixed;z-index:25000;pointer-events:none;animation:sokShow 1.6s linear both}
.sok-show-shade{position:fixed;inset:0;z-index:24999;pointer-events:none;background:radial-gradient(circle at 50% 44%,rgba(0,0,0,.25),rgba(0,0,0,.7));animation:sokShade 1.6s ease both}
@keyframes sokShade{
  0%{opacity:0}
  15%,78%{opacity:1}
  100%{opacity:0}
}
.card.sok-fail{animation:sokFail 1.9s ease both !important;animation-delay:var(--sfa,0ms) !important}
@keyframes sokFail{
  0%,34%{filter:none;box-shadow:none}
  48%{filter:brightness(1.35);box-shadow:0 0 1.4cqw .5cqw #ffe07a,0 0 3cqw 1cqw rgba(255,224,122,.6)}
  70%{filter:brightness(1.1) saturate(.7);box-shadow:0 0 .8cqw .2cqw rgba(255,224,122,.5)}
  100%{filter:saturate(.15) brightness(.82) contrast(.9);box-shadow:none}
}
@media (prefers-reduced-motion: reduce){
  .sok-show,.sok-show-shade,.kcrack{animation-duration:.01s !important}
}
.osom-duelfx-tint{position:absolute;inset:0}
.osom-duelfx-tint.blue{background:radial-gradient(circle at 50% 45%,rgba(40,110,255,.9),rgba(10,40,150,.95))}
.osom-duelfx-tint.red{background:radial-gradient(circle at 50% 45%,rgba(235,60,80,.9),rgba(130,15,30,.95))}
.osom-duelfx-winlabel-wrap{z-index:5}
.kcrack-host{z-index:auto !important}
.kcrack-host .kcrack-img{position:absolute;inset:auto;width:48.4cqw;height:48.4cqw;max-width:none;filter:drop-shadow(0 0 .3cqw rgba(0,0,0,.35));left:calc(50% - 24.2cqw - .92cqw);top:calc(50% - 24.2cqw + .32cqw);transform-origin:calc(50% + .92cqw) calc(50% - .32cqw)}
.aktif-flip-ghost,.aktif-flip-card{animation-delay:var(--afd,0ms) !important}
.aktif-flip-ghost.power{animation-name:aktifFlipPower !important;animation-timing-function:linear !important;z-index:26000}
.aktif-flip-ghost.power .aktif-flip-card{animation-name:aktifFlipPowerRot !important;animation-timing-function:linear !important}
.aktif-flip-ghost.glow .aktif-flip-stage{animation:aktifFlipGlow var(--aktif-flip-ms,1700ms) linear var(--afd,0ms) both;border-radius:10px}
@keyframes aktifFlipGlow{
  0%,16%{filter:none}
  30%{filter:drop-shadow(0 0 10px #ffe07a) drop-shadow(0 0 26px #ffb52e)}
  45%{filter:drop-shadow(0 0 16px #fff2b0) drop-shadow(0 0 40px #ffb52e) brightness(1.15)}
  62%{filter:drop-shadow(0 0 12px #ffe07a) drop-shadow(0 0 30px #ffb52e)}
  74%,100%{filter:none}
}
.ktimer{white-space:nowrap;pointer-events:none}
.ktimer.idle{opacity:.75}
.ktimer b{font-weight:800;font-variant-numeric:tabular-nums}
.ktimer.low{border-color:#ff5a5a;color:#ffd2d2;animation:ktimerBlink 1s ease-in-out infinite}
@keyframes ktimerBlink{
  50%{background:rgba(160,20,30,.85)}
}
#wrap.papan-kotak .side.p1 .zone[data-z="hand"] .osom-hand-pickover{bottom:-5.5cqw !important}
#wrap.papan-kotak #arenaView .zone[data-z="aktif"]:has(.card-attack-swing){z-index:300 !important}
@keyframes aktifFlipPowerRot{
  0%{transform:rotateY(180deg);animation-timing-function:cubic-bezier(.3,.6,.4,1)}
  10%{transform:rotateY(180deg)}
  30%{transform:rotateY(-8deg)}
  38%{transform:rotateY(0deg)}
  100%{transform:rotateY(0deg)}
}
.power-flip-shade{position:fixed;inset:0;z-index:25500;pointer-events:none;background:radial-gradient(circle at 50% 44%,rgba(0,0,0,.25),rgba(0,0,0,.72));animation:powerShade var(--aktif-flip-ms,1700ms) ease var(--afd,0ms) both}
@keyframes powerShade{
  0%{opacity:0}
  18%,64%{opacity:1}
  76%,100%{opacity:0}
}
@keyframes aktifFlipPower{
  0%{transform:translate(var(--tx0),var(--ty0)) scale(var(--is));animation-timing-function:cubic-bezier(.2,.9,.3,1.15)}
  22%{transform:translate(0,0) scale(1);animation-timing-function:ease-in-out}
  46%{transform:translate(0,-2.5vh) scale(1.04);animation-timing-function:ease-in-out}
  62%{transform:translate(0,-1.5vh) scale(1.07);animation-timing-function:cubic-bezier(.75,0,1,.55)}
  74%{transform:translate(var(--tx0),var(--ty0)) scale(var(--is))}
  79%{transform:translate(var(--tx0),var(--ty0)) scale(calc(var(--is) * 1.1),calc(var(--is) * .9))}
  86%{transform:translate(var(--tx0),var(--ty0)) scale(calc(var(--is) * .97),calc(var(--is) * 1.03))}
  100%{transform:translate(var(--tx0),var(--ty0)) scale(var(--is))}
}
.aktif-flip-ghost.power .aktif-flip-face{border-radius:2.2vh}
@keyframes sokShow{
  0%{transform:translate(var(--tx0),var(--ty0)) scale(var(--is)) rotateY(180deg);animation-timing-function:cubic-bezier(.2,.9,.3,1.2)}
  15%{transform:translate(0,0) scale(1) rotateY(0deg);animation-timing-function:ease-in-out}
  48%{transform:translate(0,-2.5vh) scale(1.04);animation-timing-function:ease-in-out}
  80%{transform:translate(0,-1vh) scale(1.06);animation-timing-function:cubic-bezier(.6,0,.9,.4)}
  100%{transform:translate(var(--tx0),var(--ty0)) scale(var(--is))}
}
#wrap.papan-kotak .arena-hint-banner{max-width:none !important;width:auto;font:700 3cqw/1.1 "Lexend",system-ui,sans-serif !important;border-radius:99px !important;box-shadow:0 0 2cqw rgba(60,220,130,.45),0 .8cqw 2cqw rgba(0,0,0,.4);z-index:80 !important}
.kstatfx-col{position:absolute;z-index:3;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:.8cqw;pointer-events:auto}
.kstatfx-col.p1{left:58.55%}
.kstatfx-col.p2{left:41.37%}
.kstatfx{width:4.8cqw;border-radius:1.2cqw;padding:.5cqw 0 .4cqw;display:flex;flex-direction:column;align-items:center;gap:.1cqw;background:rgba(14,16,24,.85);border:.25cqw solid;box-shadow:0 .4cqw 1cqw rgba(0,0,0,.45);animation:kstatIn .35s cubic-bezier(.34,1.56,.64,1) both}
@keyframes kstatIn{
  0%{opacity:0;transform:scale(0)}
  100%{opacity:1;transform:scale(1)}
}
.kstatfx.up{border-color:#3ee07a}
.kstatfx.down{border-color:#ff5a5a}
.kstatfx svg{width:3.6cqw;height:3.3cqw}
.kstatfx b{font:800 1.45cqw/1 "Lexend",system-ui,sans-serif}
.kstatfx.up b{color:#7dffae}
.kstatfx.down b{color:#ff9a9a}
#wrap.papan-kotak .zone[data-z="log"] .ktimer{position:static !important;flex:0 0 auto;align-self:stretch;text-align:center;margin:0 0 .6cqw;padding:.5cqw 0;border-radius:.9cqw;background:rgba(0,0,0,.35);border:none;color:#fff;font:800 2.6cqw/1 "Lexend",system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.04em;animation:none}
#wrap.papan-kotak .zone[data-z="log"] .ktimer.w5{animation:ktBlink 1.6s ease-in-out infinite}
#wrap.papan-kotak .zone[data-z="log"] .ktimer.w3{animation:ktBlink .9s ease-in-out infinite}
#wrap.papan-kotak .zone[data-z="log"] .ktimer.w1{animation:ktBlink .45s ease-in-out infinite}
@keyframes ktBlink{
  0%,100%{background:rgba(0,0,0,.35);color:#fff}
  50%{background:rgba(220,60,70,.55);color:#ffd6d6}
}
#wrap.papan-kotak #arenaView .side.p2 .zone[data-z="hand"] .card{transform-origin:50% 0%}
@keyframes cardDealInP2{
  0%{opacity:0;transform:translateY(-60px) scale(.75)}
  45%{opacity:1;transform:translateY(10px) scale(1.03)}
  65%{transform:translateY(-4px) scale(.99)}
  82%{transform:translateY(3px) scale(1)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
.gameover-overlay{z-index:40000}
#wrap.papan-kotak .arena-hint-banner.hint-aktif{color:#fff !important;background:linear-gradient(180deg,#ffb23e,#e87412) !important;border-color:#ffe0a6 !important;letter-spacing:.04em;box-shadow:0 0 2.4cqw rgba(255,170,60,.6),0 .8cqw 2cqw rgba(0,0,0,.4) !important}
#wrap.papan-kotak .arena-hint-banner.hint-osom{color:#fff !important;background:linear-gradient(180deg,#8b6bff,#5a36d8) !important;border-color:#d6cbff !important;font-size:5cqw !important;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 0 2.6cqw rgba(140,110,255,.65),0 .8cqw 2cqw rgba(0,0,0,.4) !important}
.ktimer{position:absolute !important;left:.894% !important;top:14.9% !important;width:8.4%;height:3.6%;box-sizing:border-box;padding:0 !important;display:flex;align-items:center;justify-content:center;border-radius:1cqw !important;background:rgba(0,0,0,.45) !important;border:none !important;color:#fff;font:800 2.25cqw/1 "Lexend",system-ui,sans-serif !important;font-variant-numeric:tabular-nums;letter-spacing:.02em;z-index:45;animation:none}
.ktimer.w5{animation:ktBlink 1.6s ease-in-out infinite !important}
.ktimer.w3{animation:ktBlink .9s ease-in-out infinite !important}
.ktimer.w1{animation:ktBlink .45s ease-in-out infinite !important}
.table.osom-lock .ktimer{opacity:1 !important;visibility:visible !important}
.kaura-host{position:absolute;left:var(--kc2);width:var(--kw);height:var(--kh);z-index:1;pointer-events:none}
.kaura-host.p2{top:var(--kr2)}
.kaura-host.p1{top:var(--kr3)}
.kaura-host.sok.p2{top:var(--kr1)}
.kaura-host.sok.p1{top:var(--kr4)}
.aktif-aura.kaura{position:absolute !important;z-index:auto !important;left:50%;top:50%;width:calc(var(--kcard-h) * 2 / 3);height:var(--kcard-h);transform:translate(-50%,-50%)}
.aktif-aura.kaura i{animation-delay:var(--ad,0ms)}
.aktif-aura.kaura i:nth-child(2){animation-delay:calc(var(--ad,0ms) + .22s)}
.aktif-aura.kaura i:nth-child(3){animation-delay:calc(var(--ad,0ms) + .44s)}
.aktif-aura.kaura b{animation-delay:var(--ad,0ms)}
.table.osom-lock,.table.osom-hand-hide{pointer-events:none}
.table.osom-lock .osom-hand-pickover,.table.osom-hand-hide .osom-hand-pickover{pointer-events:auto}
.card.kalah-fading{filter:saturate(.12) brightness(.72) contrast(.9) !important;transition:none !important;filter:none;animation:kalahFade 1.1s ease forwards !important;animation-delay:var(--kfa,0ms) !important}
@keyframes kalahFade{
  from{filter:none}
  to{filter:saturate(.12) brightness(.72) contrast(.9)}
}
#wrap.papan-kotak #arenaView .card{border-radius:8% / 5.33%}
.aktif-flip-face,.kalah-flip-face{border-radius:8% / 5.33% !important}
.table.osom-lock .side.p1 .zone[data-z="hand"] > .zone-body{opacity:1 !important;filter:brightness(.16) saturate(.6)}
.table.osom-lock .battlestrip{z-index:5 !important}
.knext-btn:not(:disabled){animation:knextPulse 1.8s ease-in-out infinite}
@keyframes knextPulse{
  0%,100%{box-shadow:0 0 .6cqw rgba(60,220,130,.25);filter:brightness(1)}
  50%{box-shadow:0 0 2.2cqw .4cqw rgba(60,220,130,.75);filter:brightness(1.25)}
}
.osom-pick-card,.osom-pick-zoomclone,.osom-duelfx-card{border-radius:8% / 5.33%;overflow:hidden}
.osom-pick-card.elem-api,.osom-pick-card.elem-air,.osom-pick-card.elem-daun,.osom-pick-zoomclone.elem-api,.osom-pick-zoomclone.elem-air,.osom-pick-zoomclone.elem-daun,.osom-duelfx-card.elem-api,.osom-duelfx-card.elem-air,.osom-duelfx-card.elem-daun{background-size:114% 110% !important;background-position:center !important}
.osom-pick-zoomclone-white{border-radius:inherit}
.kalah-flip-ghost.kfg2,.kalah-flip-ghost.kfg2 .kalah-flip-card{animation:none !important}
.kalah-flip-ghost.kfg2{transform-origin:50% 50%;will-change:transform}
.kfg2-shadow{position:absolute;left:8%;right:8%;bottom:-7%;height:14%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.55) 0%,rgba(0,0,0,.25) 45%,rgba(0,0,0,0) 72%);filter:blur(2px);pointer-events:none;z-index:-1}
.kalah-flip-ghost.kfg2 .kalah-flip-face{box-shadow:none;overflow:visible !important}
.osom-pick-row{flex-wrap:nowrap !important;width:100%;gap:clamp(6px,2.4%,18px) !important;justify-content:center;align-items:flex-end}
.osom-pick-card{flex:0 1 auto !important;min-width:0;width:min(128px,calc((100% - 2 * clamp(6px,2.4%,18px)) / 3),15vh) !important}
@media (max-width:640px){
  .osom-pick-card{width:min(92px,calc((100% - 2 * clamp(6px,2.4%,18px)) / 3),14vh) !important}
}
#wrap.papan-kotak #arenaView .zone:is([data-z="aktif"],[data-z="sokongan"],[data-z="menang"],[data-z="kalah"]) .card:not(.empty-card-ph){box-shadow:0 .55cqw 1.1cqw rgba(0,0,0,.42),0 .15cqw .3cqw rgba(0,0,0,.35)}
#wrap.papan-kotak #arenaView .zone[data-z="deck"] .stack-slot:last-child .card{box-shadow:0 .55cqw 1.1cqw rgba(0,0,0,.42),0 .15cqw .3cqw rgba(0,0,0,.35)}
#wrap.papan-kotak:not(.cardfx-off) #arenaView .zone:is([data-z="aktif"],[data-z="sokongan"],[data-z="menang"],[data-z="kalah"]) .card[data-t="S"]{box-shadow:0 0 12px 3px rgba(255,214,0,.55),0 .55cqw 1.1cqw rgba(0,0,0,.42)}
#wrap.papan-kotak:not(.cardfx-off) #arenaView .zone:is([data-z="aktif"],[data-z="sokongan"],[data-z="menang"],[data-z="kalah"]) .card[data-t="SR"]{box-shadow:0 0 18px 4px rgba(255,224,102,.65),0 0 30px 9px rgba(255,179,0,.6),0 .55cqw 1.1cqw rgba(0,0,0,.42)}
#wrap.papan-kotak:not(.cardfx-off) #arenaView .zone:is([data-z="aktif"],[data-z="sokongan"],[data-z="menang"],[data-z="kalah"]) .card[data-t="AR"]{box-shadow:0 0 14px 3px rgba(255,255,255,.5),0 0 24px 7px rgba(212,175,55,.5),0 .55cqw 1.1cqw rgba(0,0,0,.42)}
.sok-show.sok-show2{animation:sokPop2 var(--sok-ms,2000ms) linear var(--sok-delay,0ms) both !important}
.sok-show2 .sok-show-stage{position:relative;width:100%;height:100%;perspective:1100px}
.sok-show2 .sok-show-card{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:sokFlip2 var(--sok-ms,2000ms) linear var(--sok-delay,0ms) both}
.sok-show2 .sok-show-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:2.2vh;overflow:hidden}
.sok-show2 .sok-show-face > .card{position:relative !important;inset:auto !important;width:100% !important;height:100% !important;margin:0 !important;transform:none !important;border-radius:2.2vh !important}
.sok-show2 .sok-show-front{transform:rotateY(0deg);animation:sokGlow2 var(--sok-ms,2000ms) ease var(--sok-delay,0ms) both}
.sok-show2 .sok-show-back{transform:rotateY(180deg)}
.sok-show2 .sok-show-floor{position:absolute;left:6%;right:6%;bottom:-9%;height:12%;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,0,0,.6) 0%,rgba(0,0,0,.2) 50%,rgba(0,0,0,0) 72%);filter:blur(3px);animation:sokFloor2 var(--sok-ms,2000ms) linear var(--sok-delay,0ms) both}
.sok-show2-shade{animation:sokShade2 var(--sok-ms,2000ms) ease var(--sok-delay,0ms) both !important}
.sok-show2.fail .sok-show-front{animation-name:sokGlow2Fail}
@keyframes sokPop2{
  0%{transform:translate(var(--tx0),var(--ty0)) scale(var(--is));animation-timing-function:cubic-bezier(.2,.9,.3,1.25)}
  16%{transform:translate(0,0) scale(1);animation-timing-function:ease-in-out}
  30%{transform:translate(0,-1.2vh) scale(1.02);animation-timing-function:ease-in-out}
  42%{transform:translate(0,-2.4vh) scale(1.04);animation-timing-function:ease-out}
  60%{transform:translate(0,-2.8vh) scale(1.06);animation-timing-function:ease-in-out}
  74%{transform:translate(0,-1.6vh) scale(1.05);animation-timing-function:cubic-bezier(.6,0,.9,.4)}
  88%{transform:translate(var(--tx0),var(--ty0)) scale(calc(var(--is) * 1.08),calc(var(--is) * .9));animation-timing-function:ease-out}
  94%{transform:translate(var(--tx0),calc(var(--ty0) - .8vh)) scale(calc(var(--is) * .98),calc(var(--is) * 1.03));animation-timing-function:ease-in}
  100%{transform:translate(var(--tx0),var(--ty0)) scale(var(--is))}
}
@keyframes sokFlip2{
  0%{transform:rotateY(180deg) rotateZ(0deg)}
  16%{transform:rotateY(180deg) rotateZ(0deg);animation-timing-function:ease-in-out}
  22%{transform:rotateY(162deg) rotateZ(-2deg);animation-timing-function:ease-in-out}
  28%{transform:rotateY(184deg) rotateZ(1deg);animation-timing-function:ease-in-out}
  34%{transform:rotateY(152deg) rotateZ(-3deg);animation-timing-function:ease-in-out}
  40%{transform:rotateY(186deg) rotateZ(1deg);animation-timing-function:cubic-bezier(.5,0,.25,1)}
  54%{transform:rotateY(-10deg) rotateZ(0deg);animation-timing-function:ease-out}
  60%{transform:rotateY(0deg) rotateZ(0deg)}
  100%{transform:rotateY(0deg) rotateZ(0deg)}
}
@keyframes sokGlow2{
  0%,50%{box-shadow:0 0 0 0 transparent;filter:none}
  56%{box-shadow:0 0 2.2vh .7vh var(--glow),0 0 6vh 1.6vh var(--glow);filter:brightness(1.35)}
  70%{box-shadow:0 0 1.6vh .4vh var(--glow),0 0 4.5vh 1.1vh var(--glow);filter:brightness(1.08)}
  86%,100%{box-shadow:0 0 0 0 transparent;filter:none}
}
@keyframes sokGlow2Fail{
  0%,50%{box-shadow:0 0 0 0 transparent;filter:none}
  56%{box-shadow:0 0 1.6vh .4vh var(--glow);filter:brightness(1.2)}
  80%{box-shadow:0 0 .6vh .1vh var(--glow);filter:saturate(.6)}
  100%{box-shadow:0 0 0 0 transparent;filter:none}
}
@keyframes sokFloor2{
  0%{opacity:.7;transform:scale(.8)}
  16%{opacity:.3;transform:translateY(40%) scale(1.1)}
  60%{opacity:.22;transform:translateY(60%) scale(1.18)}
  88%{opacity:.75;transform:scale(.95)}
  94%{opacity:.5;transform:translateY(10%) scale(1.02)}
  100%{opacity:.7;transform:scale(1)}
}
@keyframes sokShade2{
  0%{opacity:0}
  14%,74%{opacity:1}
  90%,100%{opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .sok-show2,.sok-show2 *,.sok-show2-shade{animation-duration:.01s !important}
}
#wrap.papan-kotak #arenaView .zone[data-z="kalah"]{overflow:visible;z-index:5}
/* ===== HOME tab (templat) ===== */
#homeView{position:fixed;inset:0;z-index:590;overflow:hidden}
#homeView .home-bg{position:absolute;inset:0;background:none;background-size:cover;background-position:center}
#homeView .home-profile{position:absolute;left:calc(14px + env(safe-area-inset-left,0px));top:calc(14px + env(safe-area-inset-top,0px));display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;width:min(64vw,260px);box-sizing:border-box;border-radius:99px;background:rgba(20,21,31,.72);border:1px solid var(--line);box-shadow:0 6px 18px rgba(0,0,0,.35);font-family:"Lexend",system-ui,sans-serif;color:var(--ink)}
#homeView .hp-avatar{flex:0 0 auto;width:48px;height:48px;border-radius:50%;background:var(--surface-2);border:2px solid var(--accent);box-sizing:border-box}
#homeView .hp-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
#homeView .hp-name{font-weight:700;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#homeView .hp-lvrow{display:flex;align-items:center;gap:7px}
#homeView .hp-lv{flex:0 0 auto;font-weight:700;font-size:11px;line-height:1;color:var(--accent-ink);background:var(--accent);border-radius:6px;padding:3px 6px}
#homeView .hp-bar{flex:1 1 auto;height:7px;border-radius:99px;background:var(--bg);border:1px solid var(--line);overflow:hidden}
#homeView .hp-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--osom))}
#homeView .hp-exp{font-size:10.5px;line-height:1;color:var(--ink-dim)}
#homeView .home-battle-btn{position:absolute;left:50%;bottom:calc(100% * 3 / 9);transform:translate(-50%,50%);appearance:none;border:0;cursor:pointer;min-width:min(62vw,280px);padding:20px 34px;border-radius:20px;font:900 clamp(22px,6vw,32px)/1 "Lexend",system-ui,sans-serif;letter-spacing:.12em;color:#2a1a00;background:linear-gradient(180deg,#ffe07a,#f3a91a);box-shadow:0 7px 0 #9b6a06,0 16px 34px rgba(0,0,0,.35);transition:transform .08s,box-shadow .08s}
#homeView .home-disclaimer{position:absolute;left:50%;bottom:calc(108px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(92vw,420px);margin:0;text-align:center;font:500 11px/1.4 "IBM Plex Sans",system-ui,sans-serif;color:var(--ink-dim);opacity:.85;pointer-events:none}
#homeView .home-battle-btn:hover{filter:brightness(1.05)}
#homeView .home-battle-btn:active{transform:translate(-50%,calc(50% + 4px));box-shadow:0 3px 0 #9b6a06,0 10px 22px rgba(0,0,0,.3)}
#homeView .home-battle-btn:focus-visible{outline:3px solid #fff;outline-offset:4px}
/* ===== V7: Dadu Galaksi dalam panel HP Marker ===== */
.hpm-box.gd-box{width:min(420px,100%);padding:16px 14px 14px}
.gd-frame{position:relative;margin:4px 0 10px;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:#f6f6f9;display:flex;flex-direction:column;--gd-red:#d9262c;--gd-blue:#1d5fd8;--gd-die:clamp(48px,15vw,64px);--gd-r:calc(var(--gd-die)*.10);--gd-k:calc(var(--gd-r)*.30)}
.gd-side{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;position:relative;z-index:2;text-align:left}
.gd-side.red{background:#fdecec;color:var(--gd-red);border-bottom:3px solid var(--gd-red)}
.gd-side.blue{background:#eaf1fd;color:var(--gd-blue);border-top:3px solid var(--gd-blue)}
.gd-who{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.gd-name{font:800 12px "Lexend",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gd-dir{font-size:11px;color:#7a7a88}
.gd-last,.gd-total{display:flex;flex-direction:column;align-items:center;gap:1px}
.gd-last small,.gd-total small{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#7a7a88}
.gd-n{font:900 22px/1 "Lexend",Impact,system-ui,sans-serif;font-variant-numeric:tabular-nums}
.gd-badge{position:absolute;left:50%;transform:translateX(-50%);font:800 10px "Lexend",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#fff;border-radius:999px;padding:3px 10px;opacity:0;transition:opacity .25s;white-space:nowrap}
.gd-side.red .gd-badge{background:var(--gd-red);bottom:-11px}
.gd-side.blue .gd-badge{background:var(--gd-blue);top:-11px}
.gd-side.win .gd-badge{opacity:1}
.gd-stage-slot{position:relative;height:min(38vh,280px);min-height:200px}
.gd-stage{position:absolute;inset:0;overflow:hidden;perspective:1200px;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#fff}
.gd-shadow,.gd-wrap,.gd-ring{position:absolute;left:0;top:0;will-change:transform}
.gd-shadow{width:var(--gd-die);height:var(--gd-die);margin:calc(var(--gd-die)/-2) 0 0 calc(var(--gd-die)/-2);border-radius:var(--gd-r);background:rgba(0,0,0,.42);filter:blur(3px);transform-origin:50% 50%}
.gd-wrap{width:var(--gd-die);height:var(--gd-die);margin:calc(var(--gd-die)/-2) 0 0 calc(var(--gd-die)/-2);transform-style:preserve-3d}
.gd-die{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.gd-die.red{--c:var(--gd-red)}
.gd-die.blue{--c:var(--gd-blue)}
.gd-face{position:absolute;inset:0;border-radius:var(--gd-r);box-sizing:border-box;background:radial-gradient(circle at 30% 25%,#fff,#fbfaf6 55%,#ebe7da);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),inset -3px -4px 8px rgba(0,0,0,.09);display:flex;align-items:center;justify-content:center;font:900 calc(var(--gd-die)*.56)/1 "Lexend",Impact,system-ui,sans-serif;color:var(--c);backface-visibility:hidden}
.gd-face b{font-weight:900;position:relative;top:.02em}
.gd-f6 b{text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.08em}
.gd-f1{transform:translateZ(calc(var(--gd-die)/2))}
.gd-f6{transform:rotateY(180deg) translateZ(calc(var(--gd-die)/2))}
.gd-f3{transform:rotateY(90deg) translateZ(calc(var(--gd-die)/2))}
.gd-f4{transform:rotateY(-90deg) translateZ(calc(var(--gd-die)/2))}
.gd-f2{transform:rotateX(90deg) translateZ(calc(var(--gd-die)/2))}
.gd-f5{transform:rotateX(-90deg) translateZ(calc(var(--gd-die)/2))}
.gd-in{position:absolute;left:var(--gd-k);top:var(--gd-k);width:calc(var(--gd-die) - 2*var(--gd-k));height:calc(var(--gd-die) - 2*var(--gd-k));background:#ebe7da;border-radius:calc(var(--gd-r)*.5)}
.gd-i1{transform:translateZ(calc(var(--gd-die)/2 - var(--gd-k)))}
.gd-i6{transform:rotateY(180deg) translateZ(calc(var(--gd-die)/2 - var(--gd-k)))}
.gd-i3{transform:rotateY(90deg) translateZ(calc(var(--gd-die)/2 - var(--gd-k)))}
.gd-i4{transform:rotateY(-90deg) translateZ(calc(var(--gd-die)/2 - var(--gd-k)))}
.gd-i2{transform:rotateX(90deg) translateZ(calc(var(--gd-die)/2 - var(--gd-k)))}
.gd-i5{transform:rotateX(-90deg) translateZ(calc(var(--gd-die)/2 - var(--gd-k)))}
.gd-ring{width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;border:2px solid var(--gd-red);opacity:0;pointer-events:none}
.gd-ring.blue{border-color:var(--gd-blue)}
/* ===== V7: Tahan-intai kad Tangan ===== */
/* Tahan-intai kad Tangan: latar belakang kabur + gelap, kad besar sedikit ke atas dengan bayang tebal,
   di bawahnya gelembung ATK (merah) · HP (hijau) · EFEK n (warna ikut level) dan teks efek */
#handPeekPop{position:fixed;inset:0;z-index:30500;pointer-events:none;display:none}
/* Lapisan kabur pada ::before (bukan pada kad intai): bahagian bawah (kad Tangan) hampir jelas supaya mudah swipe kiri/kanan */
#handPeekPop::before{content:"";position:absolute;inset:0;background:var(--hpk-shade);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.45) 0,rgba(0,0,0,.45) 20vh,#000 26vh);mask-image:linear-gradient(to top,rgba(0,0,0,.45) 0,rgba(0,0,0,.45) 20vh,#000 26vh);animation:hpkShadeIn .2s ease both} /* animasi pada ::before — animasi opacity pada induk akan mematikan backdrop-filter */
#handPeekPop.show{display:block}
#handPeekPop .hpk-card{position:absolute;left:0;right:0;margin:0 auto;bottom:calc(36vh + env(safe-area-inset-bottom,0px));width:min(86vw,340px);display:flex;flex-direction:column;align-items:center;animation:hpkIn .2s cubic-bezier(.2,1.4,.4,1) both}
#handPeekPop .hpk-card.out{animation:hpkOut .18s ease-in both}
#handPeekPop .hpk-card.quick{animation:none}
#handPeekPop .hpk-cond{margin-bottom:8px;padding:4px 12px;border-radius:99px;background:var(--stage-cond-bg);border:1px solid var(--stage-cond);color:#fff;font:800 .74rem/1.2 "Lexend",system-ui,sans-serif;letter-spacing:.04em;box-shadow:0 3px 10px rgba(0,0,0,.45)}
#handPeekPop .hpk-cond.ok{background:var(--hpk-hp);border-color:rgba(255,255,255,.4)}
#handPeekPop img,#handPeekPop .hpk-txt{width:min(54vw,250px,24vh);aspect-ratio:2/3;border-radius:8% / 5.33%;display:block;object-fit:cover;background:#1c1f3a}
#handPeekPop .hpk-txt{display:flex;align-items:center;justify-content:center;padding:10%;box-sizing:border-box;text-align:center;font:800 1.05rem/1.2 "Lexend",system-ui,sans-serif;color:#fff}
#handPeekPop .hpk-name{margin-top:10px;max-width:100%;color:#fff;font:800 .86rem/1.2 "Lexend",system-ui,sans-serif;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 2px 6px rgba(0,0,0,.7)}
#handPeekPop .hpk-pills{margin-top:6px;display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
#handPeekPop .hpk-pill{padding:4px 11px;border-radius:99px;color:#fff;font:800 .76rem/1.2 "Lexend",system-ui,sans-serif;box-shadow:0 3px 10px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.25)}
#handPeekPop .hpk-pill.atk{background:var(--hpk-atk)}
#handPeekPop .hpk-pill.hp{background:var(--hpk-hp)}
#handPeekPop .hpk-pill.type{background:var(--hpk-type)}
#handPeekPop .hpk-pill.e1{background:var(--accent,#5b4bdb)}
#handPeekPop .hpk-pill.e2{background:var(--menang,#1aa35a)}
#handPeekPop .hpk-pill.e3{background:var(--kalah,#d8434a)}
#handPeekPop .hpk-fx{margin-top:8px;max-width:100%;box-sizing:border-box;padding:8px 12px;border-radius:12px;background:var(--hpk-fx-bg);border:1px solid rgba(255,255,255,.16);color:#e8eaf6;font:500 .74rem/1.4 "Lexend",system-ui,sans-serif;text-align:center;box-shadow:0 6px 18px rgba(0,0,0,.45)}
#handPeekPop .hpk-fx.none{color:#9297b0}
@keyframes hpkShadeIn{from{opacity:0}to{opacity:1}}
@keyframes hpkIn{
  0%{transform:scale(.55) translateY(40px);opacity:0}
  100%{transform:none;opacity:1}
}
@keyframes hpkOut{
  0%{transform:none;opacity:1}
  100%{transform:scale(.8) translateY(26px);opacity:0}
}
/* ===== V7: sorotan papan kekunci ===== */
.osom-pick-card.kb-focus{outline:4px solid #fff !important;outline-offset:4px;box-shadow:0 0 0 8px rgba(245,197,66,.55),0 0 34px rgba(245,197,66,.8) !important;transform:translateY(-8px) scale(1.06)}
.epk-tile.kb-focus{outline:3px solid #f5c542;outline-offset:3px;border-radius:10px}
.kb-press{filter:brightness(1.25);transform:scale(.96) !important;transition:transform .1s,filter .1s}
/* ===== V8: Papan langsing (kotak zon 4:5) — dijana drpd peta geometri ===== */
html body #wrap.papan-kotak{--kr1:10.558%;--kr2:28.683%;--kr3:54.325%;--kr4:72.450%;--kh:16.992%;--kcard-h:22.6cqw}
html body #wrap.papan-kotak.bg-klasik #arenaView .table{background:#646465 url("papan-kotak-v8.jpg") center/100% 100% no-repeat !important;box-shadow:0 10px 30px -12px rgba(0,0,0,.6)}
html body #wrap.papan-kotak #arenaView .table{aspect-ratio:1119/1942 !important;--tw:min(calc(100% - var(--tw-gutter,0px)), calc((100dvh - var(--bottomnav-h,64px) - 70px) / 2.17)) !important}
html body #wrap.papan-kotak .side.p2 .zone[data-z="hand"]{top:0 !important;height:8.981%}
html body #wrap.papan-kotak .side.p1 .zone[data-z="hand"]{top:91.019%;height:8.981%}
html body #wrap.papan-kotak #arenaView .battlestrip{top:44.913% !important;height:10.173% !important}
html body #wrap.papan-kotak .vlog{top:14.6% !important;height:65.4% !important}
html body #wrap.papan-kotak .klog-toggle{bottom:calc(100% - var(--kr4) - var(--kh) + 1.2cqw)}
html body #wrap.papan-kotak .tl-row{height:35.103% !important}
html body #wrap.papan-kotak .tl-row.p2{top:10.561% !important}
html body #wrap.papan-kotak .tl-row.p1{top:54.328% !important}
html body #wrap.papan-kotak .kefek.p1,html body #wrap.papan-kotak .kstatfx-col.p1{top:62.828%}
html body #wrap.papan-kotak .kefek.p2,html body #wrap.papan-kotak .kstatfx-col.p2{top:37.172%}
html body #wrap.papan-kotak .ktimer{top:9.406% !important;height:2.904%}
html body #wrap.papan-kotak .osom-halfshade{top:47.578% !important}
/* ===== V8: Mobile — papan penuh selebar skrin (kad Tangan lawan boleh terkeluar di atas) ===== */
@media (max-width:600px){
  body.arena-cmd-dock{padding-inline:0 !important}
  body.arena-game-live{padding-bottom:0 !important}
  html body.arena-game-live #wrap.papan-kotak #arenaView .table{--tw:min(calc(100vw - var(--tw-gutter,0px)), calc((100dvh - 10px) / 2.17)) !important;border-radius:0 !important;box-shadow:none !important}
  html body:not(.arena-game-live) #wrap.papan-kotak #arenaView .table{--tw:min(calc(100vw - var(--tw-gutter,0px)), calc((100dvh - var(--bottomnav-h,64px) - 40px) / 2.17)) !important}
  /* Ruang tegak = papan 1.7355·tw + kad Tangan P2 terkeluar di atas (.18) + kad Tangan P1 terkeluar di bawah (.18) + ruang longgar bawah kad P1 (.06) ≈ 2.17·tw */
  html body #wrap.papan-kotak #arenaView .table{min-width:0 !important;margin:calc(var(--tw) * .19) auto calc(var(--tw) * .25) !important}
}
@media (min-width:601px){
  html body.arena-game-live #wrap.papan-kotak #arenaView .table{--tw:min(calc(100% - var(--tw-gutter,0px)), calc((100dvh - 36px) / 2.17)) !important}
}
/* V8: tindanan Menang/Kalah dipusatkan & kekal dalam kotak */
html body #wrap.papan-kotak #arenaView .zone[data-z="menang"] .zone-body[data-n] .hand-slot:first-child{margin-left:var(--fm,0) !important}
html body #wrap.papan-kotak #arenaView .zone:is([data-z="menang"],[data-z="kalah"]) > .zone-body{justify-content:center !important;overflow:visible !important;padding:0 !important;gap:0 !important}
/* V8: Log penuh — tulisan 2.5x & panel berhenti di atas butang tindakan bawah */
html body #wrap.papan-kotak .klog-panel{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px)) !important;align-items:flex-start !important;padding-top:calc(12px + env(safe-area-inset-top,0px)) !important}
html body #wrap.papan-kotak .klog-panel .klog-box{max-height:100%}
html body #wrap.papan-kotak .klog-head{font-size:3.8cqw;padding:2.2cqw 2.8cqw}
html body #wrap.papan-kotak .klog-done{font-size:3.6cqw;padding:2cqw 4.6cqw}
html body #wrap.papan-kotak .klog-empty{font-size:4cqw}
/* OSOM Auto tick box */
/* OSOM Auto tick box */
.osom-auto-tick{display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none;-webkit-user-select:none;padding:11px 14px;border-radius:14px;background:rgba(20,22,40,.9);border:1px solid rgba(255,255,255,.2);color:#eceefb;font:700 .9rem "Lexend",system-ui,sans-serif;box-shadow:0 6px 18px rgba(0,0,0,.45)}
.osom-auto-tick input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.osom-auto-tick .oat-box{font-size:1.15em;line-height:1;opacity:.8}
.osom-auto-tick.on{border-color:#4fd394;background:rgba(18,60,40,.92)}
.osom-auto-tick.on .oat-box{opacity:1;color:#4fd394}
.osom-auto-tick .oat-cd{min-width:0;font-variant-numeric:tabular-nums;color:#f5c542}
.osom-auto-tick .oat-cd:empty{display:none}
.footer-row.corner-mode #actionFrame .donebar .osom-auto-tick{order:-1}
/* Tangguh → "Kad Sokongan" (kuning berkedip) bila ada Kad Sokongan di Tangan */
.footer-row.corner-mode #actionFrame .reset-btn.tangguh-sok,.reset-btn.tangguh-sok{background:#f5c542 !important;color:#2a1a00 !important;border:1px solid #ffe28a !important;font-weight:800 !important;animation:tangguhSokBlink 1s ease-in-out infinite}
@keyframes tangguhSokBlink{
  0%,100%{box-shadow:0 0 0 0 rgba(245,197,66,.0),0 6px 18px rgba(0,0,0,.45);filter:brightness(1)}
  50%{box-shadow:0 0 0 5px rgba(245,197,66,.45),0 0 22px rgba(245,197,66,.85);filter:brightness(1.18)}
}
@media (prefers-reduced-motion:reduce){
  .reset-btn.tangguh-sok{animation:none}
}
/* Pilih kad Tangan utk dibuang (Fang SD Gentar) */
#hdpOverlay{position:fixed;inset:0;z-index:99990;display:none;align-items:center;justify-content:center;background:rgba(6,8,30,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);padding:16px;box-sizing:border-box}
#hdpOverlay.show{display:flex}
.hdp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:4px 0 10px}
.hdp-card{position:relative;appearance:none;border:0;padding:0;cursor:pointer;border-radius:8%/5.33%;aspect-ratio:2/3;background:#2a3170;overflow:hidden;box-shadow:0 0 0 2px rgba(255,255,255,.18),0 6px 14px rgba(0,0,0,.45);transition:transform .12s,box-shadow .12s}
.hdp-card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.hdp-card .hdp-nm{display:flex;align-items:center;justify-content:center;height:100%;padding:8%;box-sizing:border-box;color:#fff;font:800 .78rem/1.2 "Lexend",system-ui,sans-serif;text-align:center}
.hdp-card.on{transform:translateY(-4px);box-shadow:0 0 0 3px #f5c542,0 0 18px rgba(245,197,66,.75)}
.hdp-card:not(.on) img{filter:saturate(.8) brightness(.85)}
.hdp-tick{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;color:#2a1a00;background:#f5c542;opacity:0;transition:opacity .12s}
.hdp-card.on .hdp-tick{opacity:1}
.hdp-sum{font-size:13px;margin:0 0 12px;color:#eceefb}
.hdp-sum b{color:#f5c542}
/* ===== V9: kad lebih tajam & bersih ===== */
/* #1 Zon Menang/Kalah: bayang kad tidak lagi dipotong slot (tiada tepi bersegi tajam), tiada bingkai gelap */
html body #wrap.papan-kotak #arenaView .zone:is([data-z="menang"],[data-z="kalah"]) .hand-slot{overflow:visible !important}
html body #wrap.papan-kotak #arenaView .zone:is([data-z="menang"],[data-z="kalah"]) .hand-slot > .card{border-color:transparent !important;box-shadow:0 .35cqw 1cqw rgba(0,0,0,.38) !important;background-clip:border-box}
/* Kad bergambar di papan: tiada garis bingkai gelap di sekeliling seni kad */
html body #wrap.papan-kotak #arenaView .card.has-img{border-color:transparent !important}
/* #2 Kad masuk Tangan: glow lembut ikut bentuk kad, tiada bingkai tebal */
html body .card.fx-glow-white{box-shadow:0 0 1.2cqw .35cqw rgba(255,255,255,.85),0 0 3.6cqw 1.2cqw rgba(255,255,255,.4) !important;border-color:transparent !important}
html body .zone[data-z="hand"] .card.card-deal-in .deal-cover{border-radius:inherit;box-shadow:0 0 1.4cqw .4cqw rgba(255,255,255,.8)}
/* #4 Zon Dek: tindanan kad sebenar — setiap lapisan kad penuh, sedikit ke bawah-kanan, kad teratas di tengah;
   satu bayang lembut di bawah tindanan sahaja */
html body #wrap.papan-kotak #arenaView .zone[data-z="deck"] .stack-slot:not(.deck-exit-ghost){--off:calc((var(--sn,1) - 1 - var(--si,0)) * .32cqw);transform:translate(calc(-50% + var(--off) * .55 - (var(--sn,1) - 1) * .088cqw), calc(-50% + var(--off) - (var(--sn,1) - 1) * .16cqw))}
html body #wrap.papan-kotak #arenaView .zone[data-z="deck"] .stack-slot:not(.deck-exit-ghost) .card{box-shadow:none;filter:brightness(calc(1 - (var(--sn,1) - 1 - var(--si,0)) * .06))}
html body #wrap.papan-kotak #arenaView .zone[data-z="deck"] .stack-slot:first-child:not(.deck-exit-ghost) .card{box-shadow:0 .5cqw 1.2cqw rgba(0,0,0,.45) !important}
/* ===== V10 ===== */
/* #1 Kad kemas: bucu melengkung, TIADA bingkai dalam (kelabu/hitam), SATU bingkai nipis di luar kad sahaja */
html body .card:is(.has-img,.deck-stack-card,.closed-card,.uniform,.fx-ghost),
html body .hzc-slide, html body .epk-card, html body .hdp-card, html body .hand-drag-clone{border:0 !important;outline:1.5px solid rgba(255,255,255,.55) !important;outline-offset:0 !important;background-origin:border-box}
html body .card:is(.has-img,.deck-stack-card,.closed-card,.uniform,.fx-ghost)::after{content:none !important}
html body #wrap.papan-kotak #arenaView .zone[data-z="deck"] .stack-slot:not(.deck-exit-ghost) .card{border:0}
html body .hand-drag-clone{box-shadow:0 22px 44px rgba(0,0,0,.55) !important}
#handPeekPop img,#handPeekPop .hpk-txt{outline:1.5px solid rgba(255,255,255,.55);box-shadow:0 26px 60px rgba(0,0,0,.8),0 8px 18px rgba(0,0,0,.55) !important}
/* #2 Dek P1 serong ke kanan (cermin P2) */
html body #wrap.papan-kotak #arenaView .side.p1 .zone[data-z="deck"] .stack-slot:not(.deck-exit-ghost){transform:translate(calc(-50% - var(--off) * .55 + (var(--sn,1) - 1) * .088cqw), calc(-50% + var(--off) - (var(--sn,1) - 1) * .16cqw))}
/* #3 Tarik kad: kad terbang dari Dek (JS) — matikan animasi lama "naik dari bawah" & hantu dek lama */
html body .zone[data-z="deck"] .stack-slot.deck-exit-ghost{display:none}
/* #4 Dek dikocok — 2 saat */
@keyframes deckShufA{
  0%,100%{translate:0 0;rotate:0deg}
  20%{translate:-62% -3%;rotate:-9deg}
  45%{translate:0 0;rotate:0deg}
  70%{translate:62% -3%;rotate:9deg}
}
@keyframes deckShufB{
  0%,100%{translate:0 0;rotate:0deg}
  20%{translate:62% -3%;rotate:9deg}
  45%{translate:0 0;rotate:0deg}
  70%{translate:-62% -3%;rotate:-9deg}
}
html body #wrap.papan-kotak #arenaView .zone[data-z="deck"].deck-shuffling .stack-slot:not(.deck-exit-ghost):nth-child(odd){animation:deckShufA 1s ease-in-out 2 both;animation-delay:var(--shuf-delay,0ms)}
html body #wrap.papan-kotak #arenaView .zone[data-z="deck"].deck-shuffling .stack-slot:not(.deck-exit-ghost):nth-child(even){animation:deckShufB 1s ease-in-out 2 both;animation-delay:var(--shuf-delay,0ms)}
html body #wrap.papan-kotak #arenaView .zone[data-z="deck"].deck-shuffling{z-index:30}
@media (prefers-reduced-motion:reduce){
  html body #wrap.papan-kotak #arenaView .zone[data-z="deck"].deck-shuffling .stack-slot{animation:none !important}
}
/* Gambar kad belum siap dimuat → kad bercahaya putih (bukan hitam) */
@keyframes imgPendGlow{
  0%,100%{opacity:.82;filter:blur(0)}
  50%{opacity:1;filter:blur(1px)}
}
html body .card.img-pending,html body .fx-ghost.face.img-pending,html body .hzc-slide.img-pending{background-color:#f4f7ff !important;box-shadow:0 0 1.4cqw .4cqw rgba(255,255,255,.85),0 0 4cqw 1.2cqw rgba(200,225,255,.45) !important}
html body .card.img-pending::after,html body .fx-ghost.face.img-pending::after,html body .hzc-slide.img-pending::after{content:"" !important;position:absolute;inset:0;border-radius:inherit;z-index:8;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,#fff 0%,#f2f6ff 55%,#dfe8ff 100%);box-shadow:none !important;animation:imgPendGlow 1.1s ease-in-out infinite}
/* Kilat putih bila kad mendarat di Tangan */
@keyframes revealGlowK{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
  25%{box-shadow:0 0 1.6cqw .6cqw rgba(255,255,255,.95),0 0 4.5cqw 1.6cqw rgba(200,225,255,.55)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}
@keyframes revealFlashK{
  0%{opacity:.95}
  100%{opacity:0}
}
html body .card.reveal-glow{animation:revealGlowK .75s ease-out both !important}
html body .card.reveal-glow:not(.img-pending)::after{content:"" !important;position:absolute;inset:0;border-radius:inherit;z-index:8;pointer-events:none;background:#fff;box-shadow:none !important;animation:revealFlashK .6s ease-out both}
/* Retak Zon Aktif baharu (bukan segi empat): sederhana = crack2x, besar = crack5x — saiz kanvas sama,
   jadi retak serangan sederhana nampak lebih kecil secara semula jadi */
html body .kcrack-host .kcrack-img{width:60cqw !important;height:auto !important;aspect-ratio:760/633;left:calc(50% - 30cqw - .9cqw) !important;top:calc(50% - 24.99cqw) !important;transform-origin:50% 50% !important;filter:drop-shadow(0 0 .25cqw rgba(255,255,255,.25)) !important}
html body .fx-ghost.shine{box-shadow:0 0 22px 8px rgba(255,255,255,.7),0 0 60px 22px rgba(170,205,255,.35) !important;transition:box-shadow .25s ease}
/* Kad diagih: matikan sepenuhnya animasi lama (P2 berpusing/terbalik & ukuran sasaran tersasar) */
html body #wrap.papan-kotak #arenaView .side:is(.p1,.p2) .zone[data-z="hand"] .card.card-deal-in{animation:none !important;transform:none !important;visibility:hidden !important}
/* Hantu kad P1: putih bercahaya semasa naik, didedahkan di tengah */
.deal-ghost{position:fixed;z-index:29000;pointer-events:none;border-radius:8% / 5.33%;overflow:hidden;background:#fff;transform-origin:50% 50%;will-change:transform;outline:1.5px solid rgba(255,255,255,.6);box-shadow:0 0 26px 8px rgba(255,255,255,.75),0 0 70px 24px rgba(180,210,255,.4),0 18px 40px rgba(0,0,0,.45);transition:box-shadow .5s ease}
.deal-ghost img{width:100%;height:100%;object-fit:cover;display:block}
.deal-ghost .dg-nm{display:flex;align-items:center;justify-content:center;height:100%;padding:10%;box-sizing:border-box;text-align:center;font:800 1rem/1.2 "Lexend",system-ui,sans-serif;color:#1c1e2b}
.deal-ghost .dg-white{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,#fff 0%,#f4f7ff 60%,#e3ebff 100%)}
.deal-ghost.calm{box-shadow:0 14px 30px rgba(0,0,0,.45)}
.deal-ghost .dg-back{position:absolute !important;inset:0;width:100% !important;height:100% !important;margin:0 !important;padding:0 !important;border-radius:inherit;opacity:0;outline:0 !important}
.deal-ghost .dg-back .deck-closed-back{display:none}
.deal-ghost.back .dg-back{opacity:1}
.deal-ghost.back{box-shadow:0 14px 30px rgba(0,0,0,.45)}
/* Tangan P2: kad dipapar dalam orientasi sebenar (tidak terbalik 180°), kedudukan kekal sama */
html body #wrap.papan-kotak #arenaView .side.p2 .zone[data-z="hand"] .zone-body.lawan-hand-flip{align-items:flex-end}
html body #wrap.papan-kotak #arenaView .side.p2 .zone[data-z="hand"] .zone-body.lawan-hand-flip > .hand-slot{align-self:flex-end}
/* V11 — Animasi dedah Zon Aktif: cincin elektrik (sprite 25 bingkai) menggantikan gelombang segi empat */
.aktif-aura.spr i,.aktif-aura.spr b{display:none !important}
.aktif-aura.spr{overflow:visible}
.aktif-aura.spr s{position:absolute;left:50%;top:50%;width:235%;height:238%;transform:translate(-50%,-50%);pointer-events:none;background:url("aura-reveal.webp") 0 0 / 2500% 100% no-repeat;animation:auraSprK .9s steps(25, jump-none) both;animation-delay:var(--ad,0ms);text-decoration:none}
.aktif-aura.spr.p2 s{filter:hue-rotate(148deg) saturate(1.25)}
@keyframes auraSprK{
  from{background-position:0 0}
  to{background-position:100% 0}
}
html body .kaura-host{z-index:6 !important}
/* V11 — Asap hentaman (sprite 10 bingkai) di antara bintang kuning & kad */
.hit-burst .hb-smoke{position:absolute;inset:-12%;pointer-events:none;text-decoration:none;z-index:0;background:url("hit-smoke.webp") 0 0 / 1000% 100% no-repeat;animation:hbSmokeK .5s steps(10, jump-none) both}
.hit-burst .hb-star,.hit-burst .hb-star2,.hit-burst .hb-rays,.hit-burst .hb-swoosh{z-index:1}
@keyframes hbSmokeK{
  from{background-position:0 0}
  to{background-position:100% 0}
}
/* Perisai hex — serangan tidak berkesan (sprite 5x5, 25 frame) */
.shield-barrier{position:fixed;pointer-events:none;z-index:481;background:url("shield-barrier.webp") 0 0 / 500% 500% no-repeat;animation:shieldBarrierK 0.72s step-end both;filter:drop-shadow(0 0 8px rgba(90,205,255,.95)) drop-shadow(0 0 22px rgba(40,140,255,.8)) drop-shadow(0 0 46px rgba(30,110,255,.55))}
/* Glow biru lebar di belakang perisai supaya kesannya nampak lebih luas */
.shield-barrier::before{content:"";position:absolute;inset:-70% -28%;z-index:-1;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse at center,rgba(110,210,255,.42) 0%,rgba(55,150,255,.3) 30%,rgba(30,100,255,.14) 54%,rgba(20,80,255,0) 72%);mix-blend-mode:screen;opacity:0;transform-origin:50% 50%;animation:shieldGlowK 0.72s ease-out both}
@keyframes shieldGlowK{
  0%{opacity:0;transform:scale(.55)}
  14%{opacity:.9;transform:scale(.95)}
  60%{opacity:.8;transform:scale(1.06)}
  100%{opacity:0;transform:scale(1.15)}
}
@keyframes shieldBarrierK{
  0.000%{background-position:0% 0%}
  5.556%{background-position:25% 0%}
  11.111%{background-position:50% 0%}
  16.667%{background-position:75% 0%}
  22.222%{background-position:100% 0%}
  27.778%{background-position:0% 25%}
  33.333%{background-position:25% 25%}
  38.889%{background-position:50% 25%}
  44.444%{background-position:75% 25%}
  50.000%{background-position:100% 25%}
  55.556%{background-position:0% 50%}
  61.111%{background-position:25% 50%}
  66.667%{background-position:50% 50%}
  72.222%{background-position:75% 50%}
  77.778%{background-position:25% 100%}
  83.333%{background-position:50% 100%}
  88.889%{background-position:75% 100%}
  94.444%{background-position:100% 100%}
}
/* Pad hex neon — serangan terkena diri sendiri (sprite 5x5, 25 frame) */
.selfhit-hex{position:fixed;pointer-events:none;z-index:481;background:url("selfhit-hex.webp") 0 0 / 500% 500% no-repeat;animation:selfHitHexK 0.80s step-end both;filter:drop-shadow(0 0 5px rgba(150,240,255,.95)) drop-shadow(0 0 16px rgba(40,190,255,.85)) drop-shadow(0 0 38px rgba(20,120,255,.6))}
.selfhit-hex.flip{transform:scaleY(-1)}
.shield-barrier.flip{transform:scaleY(-1)}
@keyframes selfHitHexK{
  0.000%{background-position:0% 25%}
  5.000%{background-position:25% 25%}
  10.000%{background-position:50% 25%}
  15.000%{background-position:75% 25%}
  20.000%{background-position:100% 25%}
  25.000%{background-position:0% 50%}
  30.000%{background-position:25% 50%}
  35.000%{background-position:50% 50%}
  40.000%{background-position:75% 50%}
  45.000%{background-position:100% 50%}
  50.000%{background-position:0% 75%}
  55.000%{background-position:25% 75%}
  60.000%{background-position:50% 75%}
  65.000%{background-position:75% 75%}
  70.000%{background-position:100% 75%}
  75.000%{background-position:0% 100%}
  80.000%{background-position:25% 100%}
  85.000%{background-position:50% 100%}
  90.000%{background-position:75% 100%}
  95.000%{background-position:100% 100%}
}
/* ===== Badge 🔒 (serangan tidak berkesan) di bawah Badge Efek ===== */
.kefek-lock{position:absolute;z-index:3;transform:translate(-50%,-50%);width:4.4cqw;height:4.4cqw;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.5cqw;line-height:1;background:rgba(36,40,72,.94);border:.25cqw solid rgba(255,255,255,.85);box-shadow:0 .4cqw 1cqw rgba(0,0,0,.45);cursor:help;pointer-events:auto;animation:kefekStomp .55s cubic-bezier(.55,0,.45,1) .75s both}
.kefek-lock.p1,.kfx-st.aktif.p1{left:41.37%;top:calc(62.828% + 6.2cqw)}
.kefek-lock.p2,.kfx-st.aktif.p2{left:58.55%;top:calc(37.172% + 6.2cqw)}
.ksok-efek.p1,.ksok-lock.p1,.kfx-st.sok.p1{left:41.37%}
.ksok-efek.p2,.ksok-lock.p2,.kfx-st.sok.p2{left:58.55%}
.ksok-efek.p1{top:calc(var(--kr4) + var(--kh) / 2)}
.ksok-efek.p2{top:calc(var(--kr1) + var(--kh) / 2)}
.ksok-lock{position:absolute;z-index:3;transform:translate(-50%,-50%);width:4.4cqw;height:4.4cqw;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.5cqw;line-height:1;background:rgba(36,40,72,.94);border:.25cqw solid rgba(255,255,255,.85);box-shadow:0 .4cqw 1cqw rgba(0,0,0,.45);cursor:help;pointer-events:auto;animation:kefekStomp .55s cubic-bezier(.55,0,.45,1) both}
.ksok-lock.p1,.kfx-st.sok.p1{top:calc(var(--kr4) + var(--kh) / 2 + 6.2cqw)}
.ksok-lock.p2,.kfx-st.sok.p2{top:calc(var(--kr1) + var(--kh) / 2 + 6.2cqw)}
/* Badge status efek (render.js kotakFxStatusMarkup): 🔄 biru berputar = sedang berjalan / menunggu, ⚡ hijau = berjaya, ⚡ kelabu = gagal */
.kfx-st{position:absolute;z-index:3;transform:translate(-50%,-50%);width:4.4cqw;height:4.4cqw;border-radius:50%;display:flex;align-items:center;justify-content:center;border:.25cqw solid rgba(255,255,255,.85);box-shadow:0 .4cqw 1cqw rgba(0,0,0,.45);cursor:help;pointer-events:auto;animation:kefekIn .4s cubic-bezier(.34,1.56,.64,1) both}
.kfx-st svg{height:66%}
.kfx-st.run{background:var(--fxst-run-bg);color:var(--fxst-run);border-color:var(--fxst-run)}
.kfx-st.run svg{animation:kfxSpin 1.6s linear infinite}
.kfx-st.ok{background:var(--fxst-ok-bg);color:#fff}
.kfx-st.fail{background:var(--fxst-fail-bg);color:var(--fxst-fail)}
.kfx-st.ktip:hover{filter:brightness(1.15)}
@keyframes kfxSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.kfx-st.run svg{animation:none}}
.klock-host{position:absolute;left:var(--kc2);width:var(--kw);height:var(--kh);z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none}
.klock-host.p1{top:var(--kr4)}
.klock-host.p2{top:var(--kr1)}
.klock-ghost{height:var(--kcard-h);aspect-ratio:2/3;border-radius:1cqw;background:#e9ecf5 center/cover no-repeat;pointer-events:auto;cursor:help;position:relative;display:flex;align-items:center;justify-content:center;text-align:center;font:700 1.5cqw/1.2 "Lexend",system-ui,sans-serif;color:#2a2f45;padding:.6cqw;box-sizing:border-box;opacity:.78;filter:brightness(1.25) saturate(.3) contrast(.85);box-shadow:0 0 0 .25cqw rgba(255,255,255,.9),0 0 1.8cqw .4cqw rgba(255,255,255,.55);animation:klockIn .5s ease-out both}
.klock-ghost::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(255,255,255,.38);pointer-events:none}
@keyframes klockIn{
  0%{opacity:0;transform:scale(.9)}
  100%{opacity:.78;transform:scale(1)}
}
.klock-badge{position:absolute;z-index:3;transform:translate(-50%,-50%);width:4.4cqw;height:4.4cqw;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.5cqw;line-height:1;background:linear-gradient(180deg,#ffd75e,#f0a91c);border:.25cqw solid rgba(255,255,255,.9);box-shadow:0 .4cqw 1cqw rgba(0,0,0,.45);cursor:help;pointer-events:auto}
.klock-badge.p1{left:58.55%;top:calc(var(--kr4) + var(--kh) / 2)}
.klock-badge.p2{left:41.37%;top:calc(var(--kr1) + var(--kh) / 2)}
.kzlock{position:absolute;z-index:3;transform:translate(-50%,-50%);padding:.35cqw 1.2cqw;border-radius:99px;background:linear-gradient(180deg,#ffd75e,#f0a91c);color:#2a1a00;font:800 1.45cqw/1 "Lexend",system-ui,sans-serif;letter-spacing:.08em;white-space:nowrap;box-shadow:0 0 0 .2cqw rgba(255,255,255,.85),0 .3cqw .8cqw rgba(0,0,0,.45);cursor:help;pointer-events:auto}
.kzlock.p2.menang{left:calc(var(--kc1) + var(--kw) / 2);top:calc(var(--kr2) + var(--kh) - 1.1cqw)}
.kzlock.p2.kalah{left:calc(var(--kc3) + var(--kw) / 2);top:calc(var(--kr2) + var(--kh) - 1.1cqw)}
.kzlock.p1.kalah{left:calc(var(--kc1) + var(--kw) / 2);top:calc(var(--kr3) + var(--kh) - 1.1cqw)}
.kzlock.p1.menang{left:calc(var(--kc3) + var(--kw) / 2);top:calc(var(--kr3) + var(--kh) - 1.1cqw)}
.lock-note{position:fixed;z-index:99995;max-width:min(260px,calc(100vw - 16px));padding:8px 12px;border-radius:10px;background:rgba(24,27,52,.97);border:1px solid rgba(255,255,255,.3);color:#fff;font:600 12.5px/1.3 "Lexend",system-ui,sans-serif;box-shadow:0 10px 26px rgba(0,0,0,.55);pointer-events:none}
/* ===================================================================
   V11 — Buang kad dicincang · Badge Tiru/Pinjam · Badge LOCK · Dadu gaya OSOM
   =================================================================== */
/* (1) Buang kad */
.fx-buang-hold{display:none !important}
.fx-buang-arrive{animation:fxBuangArrive .46s cubic-bezier(.25,.8,.3,1) both}
.fx-dust{position:fixed;z-index:28750;pointer-events:none;border-radius:50%;background:radial-gradient(circle,#0b0b10 0%,#16161e 55%,rgba(10,10,14,0) 100%);box-shadow:0 0 4px 1px rgba(0,0,0,.55)}
.fx-dust-form{animation:fxDustForm .5s ease-out both}
@keyframes fxDustForm{
  0%{opacity:0;filter:brightness(0) blur(2px)}
  45%{opacity:1;filter:brightness(.15) blur(1px)}
  100%{opacity:1;filter:none}
}
@keyframes fxBuangArrive{
  0%{opacity:0;transform:scale(.78);filter:brightness(1.6)}
  60%{opacity:1;transform:scale(1.05)}
  100%{opacity:1;transform:scale(1);filter:none}
}
.fx-ghost.fx-shred{position:fixed !important;z-index:28700}
.fx-ghost.fx-shred .fx-shred-red{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(160deg,rgba(255,60,60,.85),rgba(170,0,10,.9));mix-blend-mode:multiply;opacity:0;transition:opacity .18s ease;pointer-events:none;z-index:3}
.fx-ghost.fx-shred.red .fx-shred-red{opacity:1}
.fx-ghost.fx-shred.red{box-shadow:0 0 0 2px rgba(255,90,90,.9),0 0 26px 8px rgba(255,30,30,.55) !important}
.fx-ghost.fx-shred .fx-shred-slash{position:absolute;left:50%;width:150%;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,#fff 18%,#fff 82%,transparent);box-shadow:0 0 8px 2px rgba(255,255,255,.9),0 0 18px 4px rgba(255,80,80,.7);transform:translate(-50%,-50%) rotate(var(--sa,0deg)) scaleX(0);transform-origin:50% 50%;z-index:4;pointer-events:none}
/* (2)+(4) Lapisan badge */
#fxBadgeLayer{position:fixed;inset:0;pointer-events:none;z-index:585}
body:not(.arena-game-live) #fxBadgeLayer{display:none}
#fxBadgeLayer > button{pointer-events:auto;position:fixed;margin:0;padding:0;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;font-family:inherit}
.cpb{border-radius:8px;background:rgba(14,18,48,.92);box-shadow:0 0 0 2px var(--cpb-c,#2fe0c8),0 4px 12px rgba(0,0,0,.5);animation:cpbIn .35s cubic-bezier(.3,.9,.3,1.2) both}
.cpb.p1{--cpb-c:#2fe0c8}
.cpb.p2{--cpb-c:#ff5c96}
.cpb .cpb-ico{position:absolute;inset:0}
.cpb .cpb-ico::before,.cpb .cpb-ico::after{content:"";position:absolute;width:44%;height:44%;border:2px solid var(--cpb-c);border-radius:3px;box-sizing:border-box}
.cpb .cpb-ico::before{left:20%;top:20%}
.cpb .cpb-ico::after{left:36%;top:36%;background:rgba(14,18,48,.95);box-shadow:0 0 6px var(--cpb-c)}
.cpb:hover,.cpb:focus-visible{outline:none;transform:scale(1.1)}
@keyframes cpbIn{
  0%{opacity:0;transform:scale(.3)}
  100%{opacity:1;transform:scale(1)}
}
.lock-badge{transform:translate(-50%,-50%);display:flex;align-items:center;gap:5px;padding:6px 11px 6px 9px !important;border-radius:999px;background:linear-gradient(180deg,#ffd75e,#f0a91c);color:#2a1a00;font:800 12px/1 "Lexend",system-ui,sans-serif;letter-spacing:.12em;box-shadow:0 0 0 2px rgba(255,255,255,.85),0 0 18px 4px rgba(255,190,40,.55),0 6px 14px rgba(0,0,0,.45);animation:lockPulse 2.2s ease-in-out infinite}
.lock-badge .lb-ico{font-size:13px;letter-spacing:0}
@keyframes lockPulse{
  0%,100%{box-shadow:0 0 0 2px rgba(255,255,255,.85),0 0 14px 3px rgba(255,190,40,.45),0 6px 14px rgba(0,0,0,.45)}
  50%{box-shadow:0 0 0 2px rgba(255,255,255,.95),0 0 26px 8px rgba(255,190,40,.75),0 6px 14px rgba(0,0,0,.45)}
}
#fxTip{position:fixed;z-index:30000;max-width:min(280px,calc(100vw - 16px));box-sizing:border-box;padding:10px 12px;border-radius:12px;background:rgba(18,22,52,.97);border:1px solid rgba(245,197,66,.55);color:#eceefb;font:500 12.5px/1.4 "IBM Plex Sans",system-ui,sans-serif;box-shadow:0 12px 30px rgba(0,0,0,.55);opacity:0;pointer-events:none;transform:translateY(4px);transition:opacity .15s ease,transform .15s ease;left:-999px;top:-999px}
#fxTip.show{opacity:1;transform:none}
#fxTip b{display:block;margin-bottom:4px;font:800 12px/1.2 "Lexend",system-ui,sans-serif;color:#f5c542;letter-spacing:.03em}
#fxTip::after{content:"";position:absolute;left:var(--ax,50%);bottom:-6px;width:10px;height:10px;transform:translateX(-50%) rotate(45deg);background:rgba(18,22,52,.97);border-right:1px solid rgba(245,197,66,.55);border-bottom:1px solid rgba(245,197,66,.55)}
#fxTip.below::after{bottom:auto;top:-6px;border:0;border-left:1px solid rgba(245,197,66,.55);border-top:1px solid rgba(245,197,66,.55)}
/* (5) Dadu HP Marker gaya OSOM */
#hpmOverlay.dice-osom{display:block;padding:0;background:#000;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background .5s ease;overflow:hidden;touch-action:none;--gd-red:#e0262f;--gd-blue:#1d62e6;--gd-die:clamp(60px,17vw,88px);--gd-r:calc(var(--gd-die)*.10);--gd-k:calc(var(--gd-r)*.30)}
#hpmOverlay.dice-osom.win-p1{background:radial-gradient(120% 90% at 50% 60%,#2a6bff 0%,#0d3fb8 45%,#061c5c 100%)}
#hpmOverlay.dice-osom.win-p2{background:radial-gradient(120% 90% at 50% 40%,#ff3b4a 0%,#b4101e 45%,#4c040c 100%)}
#hpmOverlay.dice-osom.res-tie{background:radial-gradient(120% 90% at 50% 50%,#2a2c38 0%,#0b0b10 70%)}
.dz-root{position:absolute;inset:0;color:#fff;font-family:"Lexend",system-ui,sans-serif;transition:opacity .25s ease}
.dz-stage{position:absolute;inset:0;perspective:1200px;overflow:hidden}
.dz-stage .gd-face{background:radial-gradient(circle at 30% 25%,#fff,#f6f4ee 55%,#e3dfd2)}
.dz-shadow{background:rgba(0,0,0,.6) !important}
#hpmOverlay.win-p1 .dz-shadow,#hpmOverlay.win-p2 .dz-shadow{background:rgba(0,0,0,.45) !important}
.dz-ring.red{border-color:#ff5a64}
.dz-ring.blue{border-color:#5d95ff}
.dz-top{position:absolute;left:16px;right:16px;top:calc(12px + env(safe-area-inset-top,0px));text-align:center;pointer-events:none;z-index:3}
.dz-title{font:800 13px/1.2 "Lexend",system-ui,sans-serif;letter-spacing:.06em;color:rgba(255,255,255,.88)}
.dz-sub{margin:4px auto 0;max-width:520px;font:500 11.5px/1.35 "IBM Plex Sans",system-ui,sans-serif;color:rgba(255,255,255,.6);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dz-round{margin-top:6px;display:inline-block;font:700 11px/1 "Lexend",system-ui,sans-serif;color:#f5c542}
.dz-round:empty{display:none}
.dz-name{position:absolute;left:calc(16px + env(safe-area-inset-left,0px));display:grid;grid-template-columns:auto auto;column-gap:10px;align-items:center;z-index:3;pointer-events:none}
.dz-name b{font:800 13px/1.1 "Lexend",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;max-width:44vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dz-name small{grid-column:1;font-size:10.5px;letter-spacing:.08em;color:rgba(255,255,255,.55)}
.dz-name .dz-val{grid-column:2;grid-row:1 / span 2;font:900 30px/1 "Lexend",Impact,system-ui,sans-serif;font-variant-numeric:tabular-nums}
.dz-name .dz-wins{grid-column:1 / span 2;font:700 10.5px/1.4 "Lexend",system-ui,sans-serif;color:#f5c542}
.dz-name .dz-wins:empty{display:none}
.dz-p2{top:calc(78px + env(safe-area-inset-top,0px))}
.dz-p2 b{color:#ff6b74}
.dz-p1{bottom:calc(64px + env(safe-area-inset-bottom,0px))}
.dz-p1 b{color:#6fa2ff}
#hpmOverlay.win-p1 .dz-p1 b,#hpmOverlay.win-p2 .dz-p2 b{color:#fff}
.dz-word{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;pointer-events:none;opacity:0;font:900 clamp(56px,16vw,132px)/1 "Lexend",Impact,system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#fff;text-shadow:0 4px 0 rgba(0,0,0,.25),0 0 40px rgba(255,255,255,.35)}
.dz-word.on{opacity:1}
.dz-word.tie{color:#e9e9f2}
.dz-msg{position:absolute;left:calc(16px + env(safe-area-inset-left,0px));right:150px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:3;pointer-events:none;font:500 11.5px/1.35 "IBM Plex Sans",system-ui,sans-serif;color:rgba(255,255,255,.62)}
.dz-ctrl{position:absolute;right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:4;display:flex;align-items:flex-end;gap:10px}
.dz-back{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;font:700 20px/1 system-ui,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
.dz-back:hover{background:rgba(255,255,255,.18)}
.dz-back:disabled{opacity:.35;cursor:default}
.dz-swipe{--lv:0;position:relative;width:60px;height:min(46vh,320px);min-height:190px;border-radius:32px;background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.22);overflow:hidden;touch-action:none;cursor:grab;outline:none;user-select:none;-webkit-user-select:none;transition:border-color .2s ease,opacity .2s ease}
.dz-swipe:focus-visible{border-color:#f5c542}
.dz-swipe.drag{cursor:grabbing;border-color:rgba(255,255,255,.5)}
#hpmOverlay:not(.can-throw) .dz-swipe{opacity:.35;pointer-events:none}
.dz-ticks{position:absolute;inset:8px 12px 58px;display:flex;flex-direction:column-reverse;justify-content:space-between;pointer-events:none}
.dz-ticks i{display:block;height:2px;border-radius:2px;background:rgba(255,255,255,.22);width:calc(40% + var(--i)*6%);margin:0 auto}
.dz-fill{position:absolute;left:0;right:0;bottom:0;height:calc(28px + var(--lv)*(100% - 28px));background:linear-gradient(0deg,rgba(47,224,200,.55),rgba(79,163,255,.55) 60%,rgba(255,210,63,.75));opacity:calc(.25 + var(--lv)*.75);pointer-events:none;transition:height .05s linear}
.dz-swipe:not(.drag) .dz-fill{transition:height .3s ease,opacity .3s ease}
.dz-swipe.hot .dz-fill{box-shadow:0 0 22px 4px rgba(255,210,63,.6) inset}
.dz-knob{position:absolute;left:50%;bottom:calc(4px + var(--lv)*(100% - 58px));width:50px;height:50px;margin-left:-25px;border-radius:50%;background:linear-gradient(180deg,#fff,#d9e3ff);color:#1d3a8a;display:flex;align-items:center;justify-content:center;font:900 20px/1 system-ui,sans-serif;box-shadow:0 4px 12px rgba(0,0,0,.45);pointer-events:none}
.dz-swipe:not(.drag) .dz-knob{transition:bottom .3s cubic-bezier(.3,.8,.3,1)}
#hpmOverlay.can-throw .dz-swipe:not(.drag) .dz-knob{animation:dzNudge 1.5s ease-in-out infinite}
@keyframes dzNudge{
  0%,60%,100%{transform:translateY(0)}
  30%{transform:translateY(-16px)}
}
.dz-lvl{position:absolute;left:0;right:0;top:10px;text-align:center;font:800 8.5px/1 "Lexend",system-ui,sans-serif;letter-spacing:.16em;color:rgba(255,255,255,.55);pointer-events:none}
.dz-kbd{position:absolute !important;left:0;bottom:0;width:1px !important;height:1px !important;min-width:0 !important;padding:0 !important;margin:0 !important;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);border:0 !important;box-shadow:none !important;opacity:0}
.dz-return{display:none}
#hpmOverlay.dice-osom.peek{background:transparent !important;pointer-events:none}
#hpmOverlay.dice-osom.peek .dz-root{opacity:0;pointer-events:none}
#hpmOverlay.dice-osom.peek .dz-return{display:block;position:fixed;left:50%;bottom:calc(110px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);pointer-events:auto;border:0;border-radius:999px;padding:13px 22px;font:800 14px/1 "Lexend",system-ui,sans-serif;background:#000;color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.35),0 10px 26px rgba(0,0,0,.55);cursor:pointer}
@media (max-width:420px){
  .dz-swipe{width:54px}
  .dz-knob{width:44px;height:44px;margin-left:-22px}
  .dz-msg{right:130px}
}
/* ===== V12 — Badge Mirror sebaris + nota semua badge ===== */
.ktip{pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.kmirror{position:relative;z-index:3;flex:none;width:4.8cqw;height:4.4cqw;border-radius:1.1cqw;background:rgba(14,18,48,.94);border:.25cqw solid rgba(255,255,255,.85);box-shadow:0 0 0 .2cqw var(--mc,#2fe0c8),0 .4cqw 1cqw rgba(0,0,0,.45);animation:kstatIn .4s cubic-bezier(.34,1.56,.64,1) both}
.kmirror.p1{--mc:#2fe0c8}
.kmirror.p2{--mc:#ff5c96}
.kmirror .cpb-ico{position:absolute;inset:0}
.kmirror .cpb-ico::before,.kmirror .cpb-ico::after{content:"";position:absolute;width:44%;height:44%;border:.3cqw solid var(--mc);border-radius:.4cqw;box-sizing:border-box}
.kmirror .cpb-ico::before{left:18%;top:18%}
.kmirror .cpb-ico::after{left:38%;top:38%;background:rgba(14,18,48,.95);box-shadow:0 0 .8cqw var(--mc)}
.kmirror:hover,.kefek.ktip:hover,.kefek-lock.ktip:hover,.kstatfx.ktip:hover{filter:brightness(1.15)}
#fxTip.has-img{max-width:min(300px,calc(100vw - 16px))}
#fxTip .fxtip-card{display:flex;flex-direction:column;align-items:center;gap:5px;margin:4px 0 8px}
#fxTip .fxtip-card img{width:120px;border-radius:8px;box-shadow:0 0 0 2px rgba(245,197,66,.8),0 8px 18px rgba(0,0,0,.5);display:block}
#fxTip .fxtip-card em,#fxTip .fxtip-sub{font:700 11px/1.2 "Lexend",system-ui,sans-serif;color:#f5c542;font-style:normal;display:block;margin-bottom:4px}
/* ===== V12 — Perisai: P1 biru, P2 merah ===== */
.shield-barrier.red{filter:hue-rotate(165deg) saturate(1.6) brightness(1.05) drop-shadow(0 0 8px rgba(255,90,100,.95)) drop-shadow(0 0 22px rgba(255,40,60,.8)) drop-shadow(0 0 46px rgba(230,20,40,.55))}
.shield-barrier.red::before{background:radial-gradient(ellipse at center,rgba(255,120,120,.42) 0%,rgba(255,60,70,.3) 30%,rgba(230,30,40,.14) 54%,rgba(200,20,30,0) 72%)}
.selfhit-hex.red{filter:hue-rotate(165deg) saturate(1.6) brightness(1.05) drop-shadow(0 0 10px rgba(255,60,70,.85))}
.selfhit-hex.blue{filter:drop-shadow(0 0 10px rgba(70,160,255,.85))}
/* ===== V12 — Aura neon hentakan kad power ===== */
.power-stomp-ring{position:fixed;pointer-events:none;z-index:470;border-radius:10%;box-sizing:border-box;border:3px solid var(--ps,#39f0d2);box-shadow:0 0 18px 4px var(--ps,#39f0d2),inset 0 0 18px 2px var(--ps,#39f0d2);opacity:0}
.power-stomp-flash{position:fixed;pointer-events:none;z-index:469;border-radius:50%;background:radial-gradient(circle,var(--ps,#39f0d2) 0%,transparent 65%);mix-blend-mode:screen;opacity:0}
#fxTip .fxtip-card img{aspect-ratio:2/3;object-fit:cover;background:#1c1f3a}
/* V13 — tanda ATK pada kad Tangan (Team Bubadibako) */
.hand-atk-chip{position:absolute;z-index:6;pointer-events:none;white-space:nowrap;border-radius:99px;background:#d8434a;color:#fff;font:800 1.5cqw/1 "Lexend",system-ui,sans-serif;box-shadow:0 0 0 .2cqw rgba(255,255,255,.9),0 .3cqw .8cqw rgba(0,0,0,.45);left:4%;top:5%;bottom:auto;transform:none;font-size:1.7cqw;padding:.4cqw .7cqw}
/* ===== (dipindah dari <style> dalam index.html) ===== */
#hpmOverlay{position:fixed;inset:0;z-index:99990;display:none;align-items:center;justify-content:center;background:rgba(6,8,30,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);padding:16px;box-sizing:border-box}
#hpmOverlay.show{display:flex}
.hpm-box{width:min(440px,100%);max-height:calc(100vh - 32px);overflow:auto;background:linear-gradient(160deg,#1b2160,#0e1238);border:2px solid #f5c542;border-radius:18px;box-shadow:0 0 0 4px rgba(245,197,66,.15),0 18px 50px rgba(0,0,0,.6);padding:18px 16px 16px;color:#eceefb;text-align:center;font-family:inherit}
.hpm-title{font-weight:800;font-size:18px;letter-spacing:.5px;color:#f5c542;margin:0 0 4px}
.hpm-sub{font-size:12.5px;line-height:1.4;opacity:.9;margin:0 0 12px}
.hpm-round{display:inline-block;font-size:11px;font-weight:700;background:rgba(245,197,66,.18);color:#f5c542;border-radius:99px;padding:2px 10px;margin-bottom:10px}
.hpm-dice{display:flex;justify-content:center;gap:28px;margin:6px 0 10px}
.hpm-side{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:96px}
.hpm-name{font-size:12px;font-weight:700;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hpm-die{width:76px;height:76px;border-radius:16px;background:#fff;box-shadow:inset 0 -5px 0 rgba(0,0,0,.15),0 6px 14px rgba(0,0,0,.45);display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:10px;box-sizing:border-box;transition:transform .2s}
.hpm-die.p1{border:3px solid #4fa3ff}
.hpm-die.p2{border:3px solid #ff5a6a}
.hpm-die i{width:13px;height:13px;border-radius:50%;background:#141413;place-self:center;visibility:hidden}
.hpm-die i.on{visibility:visible}
.hpm-die.rolling{animation:hpmRoll .18s linear infinite}
.hpm-die.win{box-shadow:0 0 0 4px #f5c542,0 0 24px #f5c542}
@keyframes hpmRoll{
  0%{transform:rotate(-14deg) scale(.95)}
  50%{transform:rotate(14deg) scale(1.05)}
  100%{transform:rotate(-14deg) scale(.95)}
}
.hpm-score{font-size:11px;opacity:.8}
.hpm-msg{min-height:20px;font-weight:700;font-size:14px;margin:4px 0 12px}
.hpm-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.hpm-btn{appearance:none;border:0;border-radius:12px;padding:12px 18px;font:800 15px inherit;font-family:inherit;cursor:pointer;background:linear-gradient(180deg,#ffd75e,#f0a91c);color:#2a1a00;box-shadow:0 4px 0 #9b6a06;min-width:150px}
.hpm-btn:active{transform:translateY(2px);box-shadow:0 2px 0 #9b6a06}
.hpm-btn[disabled]{opacity:.45;cursor:default}
.hpm-card{margin:2px auto 14px;display:flex;flex-direction:column;align-items:center;gap:6px;animation:hpmPop .35s ease-out}
.hpm-card img{width:150px;border-radius:10px;box-shadow:0 0 0 3px #f5c542,0 10px 26px rgba(0,0,0,.55)}
.hpm-card-ph{width:150px;height:210px;border-radius:10px;background:#2a3170;display:flex;align-items:center;justify-content:center;padding:10px;box-sizing:border-box;font-weight:800;box-shadow:0 0 0 3px #f5c542}
.hpm-card-stat{font-weight:800;font-size:13px;color:#f5c542}
.hpm-card-fx{font-size:11.5px;line-height:1.35;opacity:.85;max-width:320px}
@keyframes hpmPop{
  0%{transform:scale(.6);opacity:0}
  100%{transform:scale(1);opacity:1}
}
.hpm-btn.alt{background:linear-gradient(180deg,#7fd0ff,#2f8fe0);color:#06223d;box-shadow:0 4px 0 #1b5c96}
.card.fx-glow-white{box-shadow:0 0 0 2px #fff,0 0 16px 6px rgba(255,255,255,.95),0 0 38px 16px rgba(255,255,255,.55),0 0 70px 26px rgba(200,225,255,.3)!important;position:relative;z-index:6}
/* Kad sedang menjalankan efek: cahaya bergelombang pada BINGKAI (bukan atas gambar) — cincin conic berputar + denyut cahaya luar */
@property --fxw-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.card.fx-wave{animation:fxWavePulse 1.6s ease-in-out infinite}
.fx-wave-ring{position:absolute;inset:0;border-radius:inherit;padding:max(2px,.7cqw);pointer-events:none;z-index:9;background:conic-gradient(from var(--fxw-a),rgba(120,190,255,0) 0deg,rgba(150,210,255,.9) 40deg,#fff 70deg,rgba(150,210,255,.9) 100deg,rgba(120,190,255,0) 150deg,rgba(120,190,255,0) 180deg,rgba(150,210,255,.9) 220deg,#fff 250deg,rgba(150,210,255,.9) 280deg,rgba(120,190,255,0) 330deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:fxWaveSpin 1.8s linear infinite}
@keyframes fxWaveSpin{to{--fxw-a:360deg}}
@keyframes fxWavePulse{0%,100%{box-shadow:0 0 .6cqw .15cqw rgba(140,200,255,.55),0 0 2cqw .5cqw rgba(120,180,255,.25)}50%{box-shadow:0 0 1.2cqw .35cqw rgba(200,230,255,.9),0 0 3.6cqw 1cqw rgba(120,180,255,.45)}}
/* Gelembung status efek (dilampir pada <body>, kedudukan dikira dari .table): putih → hijau (berjaya) / oren & pecah (gagal) / merah & pecah (dibatalkan) */
.fx-bubble{--fxb-bg:var(--fxb-white);position:fixed;z-index:24800;pointer-events:none;transform:translate(-50%,-50%);max-width:var(--fxb-w,140px);padding:.55em 1.1em;border-radius:99px;background:var(--fxb-bg);color:var(--fxb-ink);font:800 clamp(11px,3.4vw,15px)/1.1 "Lexend",system-ui,sans-serif;white-space:nowrap;text-align:center;box-shadow:0 0 0 3px rgba(255,255,255,.35),0 8px 22px rgba(0,0,0,.45);animation:fxbIn .32s cubic-bezier(.3,1.5,.5,1) both;transition:background-color .2s ease,color .2s ease}
.fx-bubble .fxb-tail{position:absolute;left:50%;margin-left:-.55em;border-left:.55em solid transparent;border-right:.55em solid transparent;transition:opacity .15s ease}
.fx-bubble.up .fxb-tail{bottom:calc(100% - 1px);border-bottom:.7em solid var(--fxb-bg)}
.fx-bubble.down .fxb-tail{top:calc(100% - 1px);border-top:.7em solid var(--fxb-bg)}
.fx-bubble.burst .fxb-tail{opacity:0}
.fx-bubble.ok{--fxb-bg:var(--fxb-ok);color:var(--fxb-white);box-shadow:0 0 0 3px rgba(79,211,148,.45),0 0 18px rgba(79,211,148,.6)}
.fx-bubble.done{animation:fxbDone .36s ease-out both}
.fx-bubble.fail,.fx-bubble.cancel{background:transparent;box-shadow:none}
.fx-bubble.fail{color:var(--fxb-fail);text-shadow:0 0 8px rgba(255,154,46,.6),0 2px 3px rgba(0,0,0,.7)}
.fx-bubble.cancel{color:var(--fxb-cancel);text-shadow:0 0 8px rgba(255,77,77,.6),0 2px 3px rgba(0,0,0,.7)}
.fx-bubble.burst::before,.fx-bubble.burst::after{content:"";position:absolute;inset:-4px;border-radius:99px;border:3px dashed #fff;opacity:0;animation:fxbBurst .5s ease-out both}
.fx-bubble.burst::after{inset:-10px;border:2px dotted #fff;animation-delay:.05s}
.fx-bubble.burst .fxb-txt{display:inline-block;animation:fxbShake .4s ease-out both}
.fx-bubble.hold{display:flex;flex-direction:column;align-items:center;gap:.2em;padding:.45em 1em;border-radius:1.1em;box-shadow:0 0 0 3px var(--fxb-hold-ring),0 8px 22px rgba(0,0,0,.45);transition:opacity .25s ease}
.fx-bubble.hold .fxb-sub{font-size:.78em;font-weight:700;color:var(--fxb-hold-sub)}
.fx-bubble.hold.tick{animation:fxbDone .36s ease-out both}
.fx-bubble.hold.rest{opacity:0}
.fx-bubble.finish{animation:fxbDone .4s ease-out both}
.fx-bubble.out{animation:fxbOut .3s ease-in both}
/* Efek pencetus Osom gagal (tiada kad dicari): gelembung bertukar kelabu lalu pudar */
.fx-bubble.miss{--fxb-bg:var(--fxb-miss);color:var(--fxb-white);box-shadow:0 6px 16px rgba(0,0,0,.4);animation:fxbMiss 1.3s ease both}
@keyframes fxbMiss{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}15%{transform:translate(-50%,-50%) scale(.94)}55%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.9)}}
/* 🔒 terbang dari gelembung "Efek dibatalkan" ke badge kunci (akibat efek pembatal) */
.fx-lock-fly{position:fixed;z-index:24850;pointer-events:none;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;line-height:1;background:rgba(36,40,72,.94);border:2px solid rgba(255,255,255,.85);box-shadow:0 0 14px var(--fxb-cancel)}
/* Efek berterusan pada kad (render.js fxLastingOn): guna bingkai berputar .fx-wave-ring yang sama seperti efek sedang berjalan (span .fx-wave-ring.fx-last-ring) */
/* Tiada gelembung efek kelihatan semasa skrin OSOM (pilih / duel) dibuka */
body:has(.osom-hand-pickover, .osom-duel-overlay, #table .epk-frame) .fx-bubble{visibility:hidden} /* juga semasa bingkai pilih kad dibuka */
/* "Efek dibatalkan": gelembung merah dipotong tetakan serong (.fxb-cut) lalu patah dua — separuh atas & bawah terpisah dan jatuh */
.fx-bubble.slash{padding:0;background:transparent;box-shadow:none;animation:none;color:var(--fxb-white);text-shadow:none}
.fx-bubble.slash .fxb-half{display:block;padding:.55em 1.1em;border-radius:99px;background:var(--fxb-cancel);color:var(--fxb-white);box-shadow:0 6px 16px rgba(0,0,0,.4)}
.fx-bubble.slash .fxb-half.a{clip-path:polygon(0 0,100% 0,100% 38%,0 62%);animation:fxbHalfA .9s cubic-bezier(.4,0,.6,1) .32s both}
.fx-bubble.slash .fxb-half.b{position:absolute;inset:0;clip-path:polygon(0 62%,100% 38%,100% 100%,0 100%);animation:fxbHalfB .9s cubic-bezier(.4,0,.6,1) .32s both}
.fx-bubble.slash .fxb-cut{position:absolute;left:-12%;top:50%;width:124%;height:3px;border-radius:3px;background:var(--fxb-white);box-shadow:0 0 8px var(--fxb-white),0 0 16px var(--fxb-cancel);transform:rotate(-9deg) scaleX(0);transform-origin:0 50%;animation:fxbCut .5s ease-out both}
@keyframes fxbCut{0%{transform:rotate(-9deg) scaleX(0);opacity:1}45%{transform:rotate(-9deg) scaleX(1);opacity:1}100%{transform:rotate(-9deg) scaleX(1);opacity:0}}
@keyframes fxbHalfA{0%{transform:none;opacity:1}30%{transform:translate(-4%,-18%) rotate(-4deg);opacity:1}100%{transform:translate(-12%,-70%) rotate(-12deg);opacity:0}}
@keyframes fxbHalfB{0%{transform:none;opacity:1}30%{transform:translate(4%,18%) rotate(3deg);opacity:1}100%{transform:translate(10%,110%) rotate(10deg);opacity:0}}
@keyframes fxbIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes fxbDone{0%{transform:translate(-50%,-50%) scale(1)}45%{transform:translate(-50%,-50%) scale(1.15)}100%{transform:translate(-50%,-50%) scale(1)}}
@keyframes fxbBurst{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
@keyframes fxbShake{0%,100%{transform:none}20%{transform:translateX(-4px) rotate(-3deg)}50%{transform:translateX(4px) rotate(3deg)}75%{transform:translateX(-2px)}}
@keyframes fxbOut{to{opacity:0;transform:translate(-50%,-60%) scale(.9)}}
@media (prefers-reduced-motion:reduce){.fx-bubble,.fx-bubble *,.fx-bubble::before,.fx-bubble::after{animation:none !important}}
@media (prefers-reduced-motion:reduce){.card.fx-wave,.fx-wave-ring{animation:none}}
.menang-jump-ghost.kfg2{transform-origin:50% 50%;will-change:transform;animation:none!important}
.vlog-card.move .vlog-ico{background:#2f8fe0}
.card-zoom-overlay.hzc-mode{flex-direction:column !important;justify-content:center !important;align-items:center !important;gap:14px;padding:0 !important;background:rgba(6,8,22,.4) !important;backdrop-filter:blur(14px) saturate(1.25);-webkit-backdrop-filter:blur(14px) saturate(1.25)}
.hzc-close{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:12px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font-size:18px;cursor:pointer;z-index:2}
.hzc-viewport{position:relative;width:100%;overflow:hidden;touch-action:pan-y;cursor:grab;flex:0 0 auto;padding:calc(var(--hzc-w,300px) * .35) 0;margin:calc(var(--hzc-w,300px) * -.35) 0}
.hzc-viewport::before{content:"";position:absolute;left:50%;top:50%;width:calc(var(--hzc-w,300px) * 2.2);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(0,0,0,.78),rgba(0,0,0,.5) 55%,rgba(0,0,0,0))}
.hzc-viewport:active{cursor:grabbing}
.hzc-track{position:relative;display:flex;gap:var(--hzc-gap,18px);width:max-content;will-change:transform}
.hzc-slide{flex:0 0 var(--hzc-w);width:var(--hzc-w);aspect-ratio:2/3;border-radius:8% / 5.33%;overflow:hidden;background:#1c1f3a;box-shadow:0 18px 40px rgba(0,0,0,.55);opacity:.5;transform:scale(.94);transition:opacity .3s ease,transform .3s ease}
.hzc-slide.cur{opacity:1;transform:none}
.hzc-slide img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none}
.hzc-txt{display:flex;align-items:center;justify-content:center;height:100%;padding:10%;box-sizing:border-box;text-align:center;font:800 1.1rem/1.2 "Lexend",system-ui,sans-serif;color:#fff}
.hzc-bubble{position:relative;width:min(92vw,440px);box-sizing:border-box;background:rgba(24,27,52,.96);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:12px 14px 10px;color:#eceefb;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.hzc-bubble::before{content:"";position:absolute;top:-8px;left:50%;width:14px;height:14px;transform:translateX(-50%) rotate(45deg);background:rgba(24,27,52,.96);border-left:1px solid rgba(255,255,255,.14);border-top:1px solid rgba(255,255,255,.14)}
.hzc-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-size:.72rem;color:rgba(236,238,251,.7)}
.hzc-meta b{font-size:.82rem;color:#fff}
.hzc-stat{margin-left:auto;font-weight:700;color:#f5c542}
.hzc-fx{margin-top:8px;font:600 1rem/1.4 "IBM Plex Sans",system-ui,sans-serif;color:#fff;max-height:30vh;overflow-y:auto}
.hzc-fx.none{opacity:.6;font-weight:400;font-size:.9rem}
.hzc-note{margin-top:8px;padding:6px 9px;border:1px solid var(--note-line);border-radius:8px;background:var(--note-bg);color:var(--note-ink);font:500 .78rem/1.4 "IBM Plex Sans",system-ui,sans-serif}
.hzc-actions{margin-top:10px;display:flex;justify-content:center}
.hzc-actions .zoom-action-btn{margin:0}
.hzc-cond{font-size:.78rem;font-weight:700;padding:7px 10px;border-radius:10px;text-align:center}
.hzc-cond.cond{background:rgba(196,42,42,.85);color:#fff}
.hzc-cond.locked{background:rgba(90,94,110,.9);color:#fff}
.hzc-dots{display:flex;justify-content:center;gap:5px;margin-top:9px}
.hzc-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.28)}
.hzc-dots i.on{background:#f5c542}
@media (max-height:700px){
  .hzc-fx{font-size:.9rem;max-height:22vh}
}
#settingsPanel.settings-panel{position:fixed;top:auto;right:auto;left:14px;bottom:calc(88px + env(safe-area-inset-bottom,0px));width:min(460px, calc(100vw - 28px));min-width:0;max-width:none;max-height:calc(100vh - 110px);overflow-y:auto;z-index:900;padding:12px 14px;box-shadow:0 14px 40px rgba(0,0,0,.6)}
body:not(.arena-game-live) #settingsPanel.settings-panel{bottom:calc(var(--bottomnav-h) + var(--nav-lift) + 70px + env(safe-area-inset-bottom,0px)) !important;max-height:calc(100vh - var(--bottomnav-h) - 120px) !important}
#settingsPanel .settings-row{display:flex !important;flex-direction:row;align-items:center;justify-content:space-between !important;gap:10px;padding:7px 0 !important}
#settingsPanel .settings-row > .settings-row-label:first-child{min-width:0;line-height:1.2}
#settingsPanel .settings-cardmode-controls{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;gap:4px !important;justify-content:flex-end !important;flex:0 0 auto;width:auto !important;margin:0 !important}
#settingsPanel .cardmode-btn{width:auto !important;flex:0 0 auto !important;margin:0 !important;padding:5px 8px 5px 6px !important;font-size:.72rem !important;line-height:1.1 !important;white-space:nowrap !important;border-radius:8px !important;background:rgba(255,255,255,.05) !important;color:rgba(236,238,251,.8) !important;border:1px solid rgba(255,255,255,.16) !important;display:inline-flex;align-items:center;gap:4px}
#settingsPanel .cardmode-btn::before{content:"☐";font-size:.95em;opacity:.7}
#settingsPanel .cardmode-btn.active{background:rgba(139,123,255,.22) !important;color:#fff !important;border-color:#8b7bff !important}
#settingsPanel .cardmode-btn.active::before{content:"☑";opacity:1;color:#b9adff}
@media (max-width:520px){
  #settingsPanel.settings-panel{left:10px !important;width:calc(100vw - 20px) !important;bottom:calc(80px + env(safe-area-inset-bottom,0px)) !important}
  #settingsPanel .settings-row > .settings-row-label:first-child{font-size:.72rem}
  #settingsPanel .cardmode-btn{font-size:.66rem !important;padding:4px 6px 4px 5px !important;gap:3px}
}
.footer-row.corner-mode{position:fixed !important;left:0 !important;right:0 !important;bottom:calc(26px + env(safe-area-inset-bottom,0px)) !important;max-width:none !important;margin:0 !important;background:none !important;border:none !important;box-shadow:none !important;border-radius:0 !important;min-height:0 !important;padding:0 calc(22px + env(safe-area-inset-right,0px)) 0 calc(22px + env(safe-area-inset-left,0px)) !important;display:flex !important;justify-content:space-between !important;align-items:flex-end !important;gap:10px;pointer-events:none;z-index:590;flex-wrap:nowrap !important}
body.arena-game-live .footer-row.corner-mode{bottom:calc(26px + env(safe-area-inset-bottom,0px)) !important}
body:not(.arena-game-live) .footer-row.corner-mode{bottom:calc(var(--bottomnav-h) + var(--nav-lift) + 8px + env(safe-area-inset-bottom,0px)) !important}
.footer-row.corner-mode > *{pointer-events:auto}
.corner-left{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.corner-left .nota-btn,.corner-left .reset-btn.circle-x{width:48px !important;height:48px !important;min-width:48px;min-height:48px;padding:0 !important;border-radius:14px !important;font-size:1.2rem !important;background:rgba(20,22,40,.88) !important;border:1px solid rgba(255,255,255,.18) !important;box-shadow:0 6px 18px rgba(0,0,0,.45) !important;display:flex;align-items:center;justify-content:center}
.corner-left .reset-btn.circle-x{color:#ff5a5a}
.corner-left #resetBtn.hide-empty{display:none !important}
.corner-right{flex:0 1 auto;min-width:0;display:flex;justify-content:flex-end}
.footer-row.corner-mode #actionFrame{flex:0 1 auto !important;display:block}
.footer-row.corner-mode #actionFrame .donebar{justify-content:flex-end;flex-wrap:nowrap !important}
.footer-row.corner-mode #actionFrame .done-btn,.footer-row.corner-mode #actionFrame .reset-btn{box-shadow:0 6px 18px rgba(0,0,0,.45);font-size:.95rem !important;padding:13px 20px !important;border-radius:14px !important;line-height:1.2}
.footer-row.corner-mode #actionFrame .reset-btn{background:rgba(20,22,40,.9) !important;color:#eceefb !important;border:1px solid rgba(255,255,255,.2) !important}
#wrap.papan-kotak .side.p1 .zone[data-z="log"] .zone-body.note-body{align-items:center;justify-content:center;padding:1.2cqw;text-align:center;background:rgba(20,22,40,.72);border:1px solid rgba(245,197,66,.45)}
.game-note{font:700 2.45cqw/1.25 "Lexend",system-ui,sans-serif;color:#fff;overflow-wrap:anywhere}
.game-note small{display:block;margin-top:.6cqw;font:500 1.95cqw/1.25 "IBM Plex Sans",system-ui,sans-serif;color:rgba(236,238,251,.75)}
.game-note .gn-tag{display:block;width:max-content;margin:0 auto .8cqw;padding:.25cqw 1.2cqw;border-radius:99px;font:700 1.6cqw/1.3 "Lexend",system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);background:var(--gn-tag,var(--sokongan))}
.game-note .gn-tag.wait{--gn-tag:var(--ink-dim)}
.game-note .gn-tag.good{--gn-tag:var(--menang)}
.game-note .gn-tag.bad{--gn-tag:var(--kalah)}
.table.osom-lock .zone[data-z="log"]{opacity:0 !important}
/* ===== SERET KAD TANGAN ===== */
#wrap.papan-kotak #arenaView .side.p1 .zone[data-z="hand"] .hand-slot > .card{touch-action:none}
#wrap.papan-kotak #arenaView .side.p1 .zone[data-z="hand"] .hand-slot{transition:width .34s cubic-bezier(.3,1.35,.5,1),margin .34s cubic-bezier(.3,1.35,.5,1),padding .34s ease !important}
#wrap.papan-kotak #arenaView .side.p1 .zone[data-z="hand"] .hand-slot.drag-out{width:0 !important;min-width:0 !important;margin:0 !important;padding-left:0 !important;padding-right:0 !important}
#wrap.papan-kotak #arenaView .side.p1 .zone[data-z="hand"] .hand-slot.drag-out > .card{visibility:hidden !important}
#wrap.papan-kotak #arenaView .side.p1 .zone[data-z="hand"] .hand-slot.drag-gap > .card{visibility:hidden !important}
.hand-drag-clone{box-shadow:0 22px 44px rgba(0,0,0,.55),0 0 0 2px rgba(255,255,255,.35) !important;cursor:grabbing;will-change:transform}
.hand-drag-clone .card-expand-btn{display:none !important}
.drag-landing-hide{visibility:hidden !important}
#wrap.papan-kotak #arenaView .side.p1 .zone.drop-ok{box-shadow:0 0 0 3px #4fd394,0 0 26px 6px rgba(79,211,148,.55) !important;border-radius:10px;z-index:8}
#wrap.papan-kotak #arenaView .side.p1 .zone.drop-bad{box-shadow:0 0 0 3px #ff5a5a,0 0 22px 4px rgba(255,90,90,.45) !important;border-radius:10px;z-index:8}
/* PEMBETULAN — kad masuk Zon Menang/Kalah licin: tiada peralihan jidar/opacity berasingan (satu gerakan sahaja, dikawal JS);
   hanya bayang tindanan (filter) yang fade in bila kad mendarat */
#wrap.papan-kotak #arenaView .zone:is([data-z="menang"],[data-z="kalah"]) .hand-slot{transition:filter .45s ease-out !important}
.footer-row.corner-mode #actionFrame .back-btn{width:48px;min-width:48px;align-self:stretch;min-height:44px;padding:0 !important;font-size:1.25rem !important;display:inline-flex;align-items:center;justify-content:center}
@media (max-width:520px){
  .footer-row.corner-mode #actionFrame .back-btn{width:42px;min-width:42px;font-size:1.1rem !important}
}
@media (max-width:520px){
  .corner-left{gap:6px}
  .corner-left .nota-btn,.corner-left .reset-btn.circle-x{width:42px !important;height:42px !important;min-width:42px;min-height:42px;font-size:1.05rem !important;border-radius:12px !important}
  .footer-row.corner-mode{padding:0 calc(18px + env(safe-area-inset-right,0px)) 0 calc(18px + env(safe-area-inset-left,0px)) !important}
  .footer-row.corner-mode #actionFrame .donebar{gap:6px}
  .footer-row.corner-mode #actionFrame .done-btn,.footer-row.corner-mode #actionFrame .reset-btn{font-size:.8rem !important;padding:10px 12px !important;border-radius:12px !important}
}
.zone[data-z="botmood"]{isolation:isolate;contain:layout style}
.zone[data-z="botmood"] .bot-mood-emoji{will-change:transform;backface-visibility:hidden}
.side.p1 .zone[data-z="hand"]{isolation:isolate}
.side.p1 .zone[data-z="hand"] .hand-slot > .card{will-change:transform;backface-visibility:hidden}
.osom-hand-pickover,.osom-duelfx-overlay,.osom-pick-zoomclone,.osom-halfshade{will-change:transform,opacity}
@keyframes botMoodPulse{
  0%,100%{transform:scale(1) rotate(0)}
  50%{transform:scale(1.28) rotate(-8deg)}
}
.bot-mood-excited .bot-mood-emoji:not(.motion-off-5-1){animation-name:botMoodPulse !important;animation-duration:1s !important;animation-timing-function:ease-in-out !important;animation-iteration-count:infinite !important}
.bot-mood-sad .bot-mood-emoji:not(.motion-off-5-2){animation-name:botMoodDroop !important;animation-duration:1s !important;animation-timing-function:ease-in-out !important;animation-iteration-count:infinite !important}
@keyframes cardDealInP2Mirror{
  0%{opacity:0;transform:translateY(-52px) scale(.7) rotate(7deg)}
  60%{opacity:1;transform:translateY(6px) scale(1.04) rotate(-1deg)}
  100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}
}
#wrap.papan-kotak #arenaView .side.p2 .zone[data-z="hand"] .card.card-deal-in{animation-name:cardDealInP2Mirror!important;animation-timing-function:cubic-bezier(.22,.85,.32,1.1)!important;animation-duration:calc(.75s * var(--deal-speed-mult,1))!important;transform-origin:50% 0%!important}
.gameover-card{position:relative;color:var(--ink)}
.gameover-close-btn{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#eceefb;font-size:16px;line-height:1;cursor:pointer}
.gameover-close-btn:hover{background:rgba(255,255,255,.18)}
.gameover-overlay.mini{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;pointer-events:none;animation:none}
.gameover-overlay.mini .gameover-card.mini{pointer-events:auto;max-width:240px;padding:14px 16px 14px;gap:8px;background:rgba(20,22,40,.94);border:1px solid rgba(245,197,66,.55);box-shadow:0 10px 30px rgba(0,0,0,.55)}
.gameover-card.mini .gameover-title{font-size:1.05rem}
.gameover-mini-score{font-size:.85rem;font-weight:700;color:#f5c542}
.gameover-mini-btns{display:flex;gap:8px;align-items:center}
.gameover-card.mini .gameover-restart-btn{margin-top:0;padding:9px 16px;font-size:.85rem}
.gameover-expand-btn{width:36px;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#eceefb;font-size:16px;cursor:pointer}
body:has(.klog-panel) .gameover-overlay.mini{display:none!important}
.vlog-card.hidden-card{background:linear-gradient(135deg,#2a3170,#121845)!important}
.vlog-card.hidden-card .vlog-nm{font-size:1.6em;opacity:.85}
/* ===== MENU SUDUT KIRI (satu butang → , buka menegak, ❌ paling atas) ===== */
.cmenu{position:relative;display:flex;flex-direction:column;align-items:center}
.cmenu-items{position:absolute;left:0;bottom:calc(100% + 10px);display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;transform:translateY(14px) scale(.9);transform-origin:50% 100%;pointer-events:none;visibility:hidden;transition:opacity .2s ease,transform .26s cubic-bezier(.3,1.4,.5,1),visibility 0s linear .26s}
.cmenu.open .cmenu-items{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .2s ease,transform .26s cubic-bezier(.3,1.4,.5,1),visibility 0s}
.cmenu-items > *{opacity:0;transform:translateY(10px);transition:opacity .18s ease,transform .22s ease}
.cmenu.open .cmenu-items > *{opacity:1;transform:none}
.cmenu.open .cmenu-items > *:nth-last-child(1){transition-delay:.02s}
.cmenu.open .cmenu-items > *:nth-last-child(2){transition-delay:.06s}
.cmenu.open .cmenu-items > *:nth-last-child(3){transition-delay:.10s}
.cmenu-toggle span{font-weight:800;font-size:1.25rem;line-height:1;transition:transform .26s cubic-bezier(.3,1.4,.5,1)}
.cmenu.open .cmenu-toggle span{transform:rotate(90deg)}
.cmenu.open .cmenu-toggle{background:rgba(60,64,110,.95) !important}
.corner-left .cmenu .nota-btn,.corner-left .cmenu .reset-btn.circle-x{flex:0 0 auto}
.footer-row.corner-mode .nota-dialog{position:fixed;left:14px;bottom:calc(88px + env(safe-area-inset-bottom,0px));z-index:900;width:min(300px,calc(100vw - 28px));max-width:none}
/* ===== PAPAN BETUL-BETUL DI TENGAH: tiada ruang/bar halimunan di bawah ===== */
html body.arena-game-live{padding-bottom:0 !important}
/* ===== Butang tindakan: satu baris, tebal sama ===== */
.footer-row.corner-mode #actionFrame .done-btn,.footer-row.corner-mode #actionFrame .reset-btn:not(.back-btn){white-space:nowrap;max-width:none}
/* ===== HUD: P1 = ATK · Dadu · HP ; P2 = HP · Dadu · ATK — dadu di TENGAH, berhadapan ===== */
#wrap.papan-kotak .kotak-hud{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center}
#wrap.papan-kotak .kotak-hud > .hud-dice{grid-column:2;grid-row:1}
#wrap.papan-kotak .kotak-hud.p1 > .hud-atk{grid-column:1;grid-row:1;justify-self:end}
#wrap.papan-kotak .kotak-hud.p1 > .hud-track-wrap{grid-column:3;grid-row:1;justify-content:flex-start}
#wrap.papan-kotak .kotak-hud.p2 > .hud-track-wrap{grid-column:1;grid-row:1;justify-content:flex-end}
#wrap.papan-kotak .kotak-hud.p2 > .hud-atk{grid-column:3;grid-row:1;justify-self:start}
#wrap.papan-kotak .kotak-hud .hud-dice{flex:0 0 auto;width:4.4cqw;height:4.4cqw;box-sizing:border-box;border-radius:1.1cqw;display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,#ffffff 0%,#e9ebf5 60%,#c9cde0 100%);border:.25cqw solid rgba(255,255,255,.95);box-shadow:0 .35cqw .9cqw rgba(0,0,0,.45),inset 0 -.35cqw 0 rgba(0,0,0,.12);color:#1b1e33;font:800 2.4cqw/1 "Lexend",system-ui,sans-serif;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
#wrap.papan-kotak .kotak-hud .hud-dice.wide{font-size:1.9cqw}
#wrap.papan-kotak .kotak-hud .hud-dice.empty{background:none;border:none;box-shadow:none}
#wrap.papan-kotak .kotak-hud .hud-dice.roll{animation:hudDiceRoll .6s cubic-bezier(.3,1.4,.5,1) both}
@keyframes hudDiceRoll{
  0%{transform:rotate(-200deg) scale(.4);opacity:.3}
  60%{transform:rotate(12deg) scale(1.18);opacity:1}
  100%{transform:none;opacity:1}
}
#wrap.papan-kotak .kotak-hud.p2 .hud-bar-lag,#wrap.papan-kotak .kotak-hud.p2 .hud-bar-fill{left:auto;right:0}
#wrap.papan-kotak .kotak-hud.p2 .hud-shields{flex-direction:row-reverse;left:auto !important;right:calc(100% + .6cqw) !important}
#wrap.papan-kotak .kotak-hud.hud-intro .hud-dice:not(.empty):not(.roll){animation:hudAtkPop .38s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(800ms + var(--hia,0ms))}
#wrap.papan-kotak .kotak-hud.p2.hud-intro .hud-bar-box{transform-origin:100% 50%}
/* ===== HUD BESAR: nombor ATK/HP 2x, bar setebal dadu ===== */
#wrap.papan-kotak #arenaView .battlestrip{left:calc(var(--kc2) - var(--kw) * .17);width:calc(var(--kw) * 1.34)}
#wrap.papan-kotak .kotak-hud{height:5cqw;column-gap:.9cqw}
/* 2 baris HUD dirapatkan — dadu berhadapan rapat di tengah */
#wrap.papan-kotak #arenaView .battlestrip{justify-content:center !important;gap:.9cqw}
#wrap.papan-kotak .kotak-hud .hud-atk{width:auto;min-width:4.4cqw;height:4.4cqw;padding:0 .75cqw;border-radius:2.2cqw;font-size:3.36cqw;letter-spacing:-.04em}
#wrap.papan-kotak .kotak-hud .hud-bar-box{min-width:9.5cqw}
#wrap.papan-kotak .kotak-hud .hud-bar{height:4.4cqw !important;border-radius:1.3cqw !important}
#wrap.papan-kotak .kotak-hud .hud-bar .hud-hp-num{font-size:3.7cqw !important}
#wrap.papan-kotak .kotak-hud .hud-bar-fill::after{border-radius:1.3cqw}
/* Banner petunjuk di tengah papan — lebih nipis */
#wrap.papan-kotak .arena-hint-banner{padding:.7cqw 2.6cqw !important;font-size:2.6cqw !important;line-height:1 !important;border-width:.2cqw !important}
#wrap.papan-kotak .arena-hint-banner.hint-aktif{font-size:3.2cqw !important}
/* ===== HUD: nombor ATK & HP tidak bold ===== */
#wrap.papan-kotak .kotak-hud .hud-atk,#wrap.papan-kotak .kotak-hud .hud-bar .hud-hp-num{font-weight:500 !important}
/* ===== OSOM: semasa swipe, tajuk/arahan hilang supaya kad bebas naik ===== */
.osom-hand-pickover.osom-fs.osom-dragging > :not(.osom-pick-row){opacity:0 !important;transition:opacity .18s ease}
/* ===== Log: X lama dibuang, butang Tutup bawah kanan, butang papan tidak tembus ===== */
#wrap.papan-kotak .klog-panel{z-index:29500;position:fixed;inset:0 !important;border-radius:0;background:rgba(6,8,16,.62);padding:calc(16px + env(safe-area-inset-top,0px)) 14px calc(16px + env(safe-area-inset-bottom,0px));justify-content:center !important}
#wrap.papan-kotak .klog-panel .klog-box{flex:0 1 auto;width:min(560px,100%)}
#table:has(.klog-panel) .klog-toggle,#table:has(.klog-panel) .knext-btn{visibility:hidden;pointer-events:none}
/* Log penuh terbuka: .table ialah stacking context (container-type), jadi Log tidak boleh naik atas elemen yang dilampir terus pada <body>
   (hantu kad animasi, lencana efek, tooltip, aura). Sorok semua itu selagi Log terbuka; kotak interaktif permainan (dadu, teka, buang kad) kekal. */
body:has(#table .klog-panel) > :not(#wrap):not(#hpmOverlay):not(.guess-ov):not(#hdpOverlay):not(script){visibility:hidden}
.klog-close{display:none !important}
.klog-foot{display:flex;justify-content:flex-end;padding:1.6cqw 2.2cqw;border-top:1px solid rgba(255,255,255,.1)}
.klog-done{font:600 2.6cqw/1 "Lexend",system-ui,sans-serif;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);border-radius:1.6cqw;padding:1.6cqw 3.6cqw;cursor:pointer}
.klog-done:hover{background:rgba(255,255,255,.18)}
/* ===== OSOM/keputusan OSOM: 🔎 log & butang papan tidak muncul di atas skrin gelap ===== */
#table:has(> .osom-hand-pickover.osom-fs, > .osom-duelfx-overlay) :is(.klog-toggle,.knext-btn){visibility:hidden !important;pointer-events:none !important}
/* ===== Gerakan kad efek ===== */
.fx-seq-hide{visibility:hidden !important}
.fx-ghost{position:fixed !important;z-index:28500;pointer-events:none;margin:0 !important;box-sizing:border-box;border-radius:8% / 5.33% !important;overflow:hidden;transform-origin:50% 50%;will-change:transform,opacity,filter;box-shadow:0 14px 30px rgba(0,0,0,.5);background:var(--surface,#1c1e2b);display:flex;align-items:center;justify-content:center;padding:0 !important}
.fx-ghost.face img{width:100%;height:100%;object-fit:cover;display:block}
.fx-ghost .fx-ghost-nm{font:700 12px/1.2 "Lexend",system-ui,sans-serif;color:#fff;text-align:center;padding:6px}
.fx-ghost.shine{box-shadow:0 0 0 2px rgba(255,255,255,.85),0 0 34px 12px rgba(255,255,255,.55),0 0 70px 24px rgba(160,200,255,.35) !important}
/* ===== Mechadetective: teka kad ===== */
.guess-ov{position:fixed;inset:0;z-index:31500;display:flex;align-items:center;justify-content:center;padding:calc(16px + env(safe-area-inset-top,0px)) 14px calc(16px + env(safe-area-inset-bottom,0px));background:rgba(4,6,10,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;transition:opacity .3s ease}
.guess-ov.show{opacity:1}
.guess-ov.hide{opacity:0}
.guess-box{display:flex;flex-direction:column;align-items:center;gap:12px;width:min(520px,100%);text-align:center;color:#fff}
.guess-title{font:800 clamp(1.15rem,3.4vh,1.6rem)/1.1 "Lexend",system-ui,sans-serif;letter-spacing:.02em}
.guess-sub{font:500 .85rem/1.35 "IBM Plex Sans",system-ui,sans-serif;color:rgba(236,238,251,.8)}
.guess-card{width:min(42vw,190px,24vh);aspect-ratio:2/3;perspective:1000px;margin:6px 0}
.guess-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,.7,.3,1)}
.guess-card.flipped .guess-inner{transform:rotateY(180deg)}
.guess-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:8% / 5.33%;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 18px 40px rgba(0,0,0,.6);background:#1c1e2b;border:2px solid rgba(255,255,255,.18)}
.guess-face.guess-front{transform:rotateY(180deg)}
.guess-face.guess-front img{width:100%;height:100%;object-fit:cover}
.guess-card.flipped .guess-front{box-shadow:0 0 0 2px rgba(255,255,255,.7),0 0 36px 10px rgba(255,255,255,.4)}
.guess-result{min-height:1.4em;font:700 .95rem/1.3 "Lexend",system-ui,sans-serif}
.guess-result.ok{color:#4fd394}
.guess-result.bad{color:#ff6b5e}
.guess-opts{display:flex;gap:10px;width:100%;justify-content:center}
.guess-opt{flex:1 1 0;max-width:150px;min-height:64px;border-radius:14px;border:2px dashed rgba(255,255,255,.4);background:rgba(255,255,255,.06);color:#fff;font:700 .9rem/1.2 "Lexend",system-ui,sans-serif;cursor:pointer;padding:10px 8px;transition:transform .15s ease,background .2s,opacity .2s,border-color .2s}
.guess-opt:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.guess-opt.chosen{border-style:solid;border-color:#f5c542;background:rgba(245,197,66,.18)}
.guess-opt.dim{opacity:.4}
.guess-opt.answer{border-style:solid;border-color:#4fd394;opacity:1;background:rgba(79,211,148,.2)}
/* ===== Nombor serangan / tambah HP atas kad ===== */
.hp-pop{position:fixed;z-index:31000;pointer-events:none;font-family:"Lexend",system-ui,sans-serif;font-weight:900;line-height:1;letter-spacing:-.04em;white-space:nowrap;transform:translate(-50%,-50%) rotate(-10deg);-webkit-text-stroke:2px rgba(0,0,0,.55);paint-order:stroke fill;will-change:transform,opacity}
.hp-pop.dmg{color:#ff3b30;text-shadow:0 4px 0 #7a0d08,0 8px 22px rgba(0,0,0,.6)}
.hp-pop.heal{color:#3ee07a;text-shadow:0 4px 0 #0c5a2a,0 8px 22px rgba(0,0,0,.6)}
.hp-pop.atk-up{color:#ffd23f;text-shadow:0 3px 0 #7a5a06,0 8px 22px rgba(0,0,0,.6)}
.hp-pop.atk-down{color:#ff9a3c;text-shadow:0 3px 0 #6e2d05,0 8px 22px rgba(0,0,0,.6)}
/* ===== OSOM PILIH KAD: skrin penuh (macam keputusan OSOM), kad lebih besar, swipe ke atas ===== */
#wrap.papan-kotak .osom-hand-pickover.osom-fs,.osom-hand-pickover.osom-fs{position:fixed !important;inset:0 !important;left:0 !important;right:0 !important;top:0 !important;bottom:0 !important;transform:none !important;width:auto !important;max-height:none !important;height:auto !important;border-radius:0 !important;margin:0 !important;padding:calc(18px + env(safe-area-inset-top,0px)) 14px calc(96px + env(safe-area-inset-bottom,0px)) !important;background:rgba(4,6,10,.82) !important;-webkit-backdrop-filter:blur(14px) saturate(1.05);backdrop-filter:blur(14px) saturate(1.05);box-shadow:none !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;gap:clamp(8px,1.6vh,16px) !important;z-index:440 !important;overflow:hidden !important;animation:osomFsIn .3s ease both !important;opacity:1}
#wrap.papan-kotak .osom-hand-pickover.osom-fs.no-intro,.osom-hand-pickover.osom-fs.no-intro{animation:none !important;opacity:1}
#wrap.papan-kotak .osom-hand-pickover.osom-fs.osom-dome-dismiss,.osom-hand-pickover.osom-fs.osom-dome-dismiss{animation:osomFsOut .36s ease forwards !important;pointer-events:none}
@keyframes osomFsIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes osomFsOut{
  from{opacity:1}
  to{opacity:0}
}
.osom-hand-pickover.osom-fs .osom-title-main{font-size:clamp(2rem,6.5vh,3.2rem) !important;color:#fff !important;letter-spacing:.12em;text-shadow:0 4px 18px rgba(139,123,255,.6)}
.osom-hand-pickover.osom-fs .osom-title-sub{font-size:clamp(.72rem,1.8vh,.95rem) !important;color:rgba(236,238,251,.85) !important}
.osom-hand-pickover.osom-fs .osom-pick-bubble{font-size:clamp(.78rem,1.9vh,.95rem);padding:6px 18px}
.osom-hand-pickover.osom-fs .osom-pick-row{width:auto !important;max-width:100%;gap:clamp(10px,3vw,26px) !important;align-items:center !important}
.osom-hand-pickover.osom-fs .osom-pick-card{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:grab;box-shadow:0 22px 40px -12px rgba(0,0,0,.7);width:min(29vw,200px,20vh) !important}
.osom-hand-pickover.osom-fs .osom-pick-card.osp-drag-src{visibility:hidden !important}
.osom-swipe-hint{margin-top:clamp(4px,1.6vh,16px);font:600 clamp(.7rem,1.7vh,.88rem)/1.2 "Lexend",system-ui,sans-serif;color:rgba(236,238,251,.7);display:flex;align-items:center;gap:6px}
.osom-swipe-hint .osh-arrow{display:inline-block;animation:oshBob 1.2s ease-in-out infinite;color:#f5c542}
@keyframes oshBob{
  0%,100%{transform:translateY(2px)}
  50%{transform:translateY(-4px)}
}
.osom-hand-pickover.osom-fs.picking-lock .osom-swipe-hint,.osom-hand-pickover.osom-fs.picking-lock .osom-pick-bubble{opacity:0;transition:opacity .2s}
.osom-swipe-clone{box-shadow:0 26px 50px rgba(0,0,0,.6),0 0 0 2px rgba(255,255,255,.35) !important;cursor:grabbing;will-change:transform}
.osom-swipe-clone.osom-swipe-ready{box-shadow:0 26px 50px rgba(0,0,0,.6),0 0 0 3px #f5c542,0 0 34px 8px rgba(245,197,66,.55) !important}
/* OSOM: kad di bahagian bawah 2/5 skrin (capaian ibu jari) */
#wrap.papan-kotak .osom-hand-pickover.osom-fs:not(.osom-bridge),.osom-hand-pickover.osom-fs:not(.osom-bridge){justify-content:flex-end !important;padding-bottom:max(calc(88px + env(safe-area-inset-bottom,0px)), calc(42.857vh - 1.5 * min(29vw, 200px, 20vh))) !important}
.osom-hand-pickover.osom-fs .osom-pick-row{order:5;margin-top:clamp(2px,1vh,10px) !important}
.osom-hand-pickover.osom-fs .osom-swipe-hint{order:4;margin-top:0 !important}
#wrap.papan-kotak .osom-halfshade,.osom-halfshade{display:none !important}
.osom-hand-pickover.osom-fs.osom-bridge{pointer-events:none;z-index:439 !important}
.osom-hand-pickover.osom-fs.osom-bridge .osom-title-sub{animation:osomBridgeBlink 1s ease-in-out infinite}
@keyframes osomBridgeBlink{
  0%,100%{opacity:.5}
  50%{opacity:1}
}

/* ===== BOT FIGHT: menu Battle, Lawan Deck, Level, keputusan EXP ===== */
.bf-lv{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bf-lv-chip{font:700 .85rem "Lexend",sans-serif;color:var(--accent-ink);background:var(--accent);border-radius:8px;padding:4px 9px;white-space:nowrap}
.bf-lv-main{flex:1 1 140px;min-width:0;display:flex;flex-direction:column;gap:3px}
.bf-lv-bar{height:8px;border-radius:99px;background:var(--bg);border:1px solid var(--line);overflow:hidden}
.bf-lv-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--osom));transition:width .3s ease}
.bf-lv-txt{font-size:.72rem;color:var(--ink-dim)}
.bf-rank-chip{font-size:.7rem;color:var(--ink-dim);border:1px dashed var(--line);border-radius:8px;padding:3px 8px;white-space:nowrap}
.bf-menu{position:relative;background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:22px 18px 18px;max-width:380px;width:100%;box-shadow:0 14px 44px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:12px}
/* Roda Deck Master (gaya mesin 777): tetingkap 3 baris, baris tengah ditanda, jalur nama dek bergerak ke atas */
.bf-roll{position:relative;background:var(--surface);border:2px solid var(--bf-gold);border-radius:18px;padding:20px 18px 18px;max-width:360px;width:100%;box-shadow:0 0 0 4px rgba(255,210,63,.12),0 16px 48px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:14px;text-align:center}
.bf-roll-head{font:800 1.15rem "Lexend",sans-serif;color:var(--bf-gold);letter-spacing:.04em}
.bf-roll-win{position:relative;height:144px;overflow:hidden;border-radius:12px;background:linear-gradient(#0b0d18,#161a2a 50%,#0b0d18);border:1px solid var(--line);-webkit-mask:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.bf-roll-strip{will-change:transform}
.bf-roll-item{height:48px;display:flex;align-items:center;justify-content:center;padding:0 12px;font:700 1.05rem "Lexend",sans-serif;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bf-roll-item.hit{color:var(--bf-gold);animation:bfRollHit .5s ease-out 2}
.bf-roll-line{position:absolute;left:8px;right:8px;top:48px;height:48px;border-top:2px solid var(--bf-gold);border-bottom:2px solid var(--bf-gold);border-radius:8px;pointer-events:none;box-shadow:0 0 14px rgba(255,210,63,.25) inset}
.bf-roll-foot{font-size:.9rem;color:var(--ink-dim);min-height:1.4em}
.bf-roll-foot b{color:var(--ink)}
.bf-roll-tier{font-weight:700}
.bf-roll-tier.bronze{color:var(--bf-bronze)}.bf-roll-tier.silver{color:var(--bf-silver)}.bf-roll-tier.gold{color:var(--bf-gold)}.bf-roll-tier.master{color:var(--bf-master)}
@keyframes bfRollHit{50%{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){.bf-roll-item.hit{animation:none}}
.bf-close{position:absolute;top:8px;right:10px;appearance:none;background:none;border:0;color:var(--ink-dim);font-size:1.1rem;line-height:1;padding:6px;cursor:pointer}
.bf-menu-head{font:700 1.05rem "Lexend",sans-serif;color:var(--ink);text-align:center}
.bf-mode{appearance:none;display:flex;flex-direction:column;gap:3px;text-align:left;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);cursor:pointer;font-family:inherit}
.bf-mode b{font:700 .95rem "Lexend",sans-serif}
.bf-mode span{font-size:.78rem;line-height:1.35;color:var(--ink-dim)}
.bf-mode:hover{border-color:var(--accent)}
.bf-mode:focus-visible,.bf-deck:focus-visible,.bf-back:focus-visible,.bf-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bf-page{display:flex;flex-direction:column;gap:12px;padding-block:4px}
.bf-page-head{display:flex;align-items:center;gap:12px}
.bf-back{appearance:none;font:600 .85rem "Lexend",sans-serif;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:7px 12px;cursor:pointer}
.bf-page-title{margin:0;font:700 1.2rem "Lexend",sans-serif}
.bf-page-help{margin:0;font-size:.8rem;color:var(--ink-dim)}
.bf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px}
.bf-group{display:flex;flex-direction:column;gap:8px}
.bf-group-title{margin:0;padding-top:6px;font:700 .8rem "Lexend",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim);border-bottom:1px solid var(--line);padding-bottom:6px}
.bf-deck{appearance:none;position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:5px 4px 6px;border-radius:10px;border:2px solid transparent;background:linear-gradient(180deg,var(--tf,var(--surface)),var(--surface)) padding-box,var(--rim,linear-gradient(var(--line),var(--line))) border-box;box-shadow:inset 0 0 0 1px rgba(0,0,0,.55),inset 0 1px 0 1px rgba(255,255,255,.07),0 2px 6px rgba(0,0,0,.35);color:var(--ink);cursor:pointer;font-family:inherit;text-align:center;transition:transform .15s,box-shadow .15s}
.bf-deck:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.55),inset 0 1px 0 1px rgba(255,255,255,.07),0 0 14px -2px var(--tc,var(--accent))}
.bf-deck-tier{position:absolute;top:5px;left:50%;transform:translateX(-50%);font:800 .6rem "Lexend",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--tc,var(--ink-dim));white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.bf-deck-name{font:600 .74rem/1.2 "Lexend",sans-serif;overflow-wrap:anywhere;min-height:40px;display:flex;align-items:center}
.bf-deck-logos{width:100%;height:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.bf-deck-logos img{max-width:94%;max-height:32px;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.bf-deck-logos.n2 img{max-height:17px}
.bf-deck-logos i{font:800 .5rem/1 "Lexend",sans-serif;font-style:normal;color:var(--tc,var(--ink-dim));margin:0}
.bf-deck-bar{width:88%;height:5px;border-radius:3px;background:rgba(0,0,0,.45);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);overflow:hidden}
.bf-deck-bar i{display:block;height:100%;border-radius:3px;background:var(--rim,var(--tc));transition:width .3s}
.bf-deck.master .bf-deck-bar i{box-shadow:0 0 6px var(--bf-master)}
.bf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.bf-deck-note{font-size:.62rem;color:var(--ink-dim);line-height:1.25}
.bf-deck.bronze{--tc:var(--bf-bronze);--rim:var(--bf-rim-bronze);--tf:var(--bf-fill-bronze)}
.bf-deck.silver{--tc:var(--bf-silver);--rim:var(--bf-rim-silver);--tf:var(--bf-fill-silver)}
.bf-deck.gold{--tc:var(--bf-gold);--rim:var(--bf-rim-gold);--tf:var(--bf-fill-gold)}
.bf-deck.master{--tc:var(--bf-master);--rim:var(--bf-rim-master);--tf:var(--bf-fill-master);box-shadow:inset 0 0 0 1px rgba(0,0,0,.55),inset 0 0 14px rgba(185,140,255,.28),0 0 12px -3px var(--bf-master)}
.bf-deck.master .bf-deck-tier{background:linear-gradient(90deg,var(--bf-gold),var(--bf-master));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.bf-pips{display:flex;flex-direction:column;gap:3px;align-items:center}
.bf-seg{display:flex;gap:3px}
.bf-seg i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--sc);background:transparent}
.bf-seg i.on{background:var(--sc)}
.bf-seg.bronze{--sc:var(--bf-bronze)}
.bf-seg.silver{--sc:var(--bf-silver)}
.bf-seg.gold{--sc:var(--bf-gold)}
.bf-result{display:flex;flex-direction:column;gap:4px;align-items:center;padding:8px 10px;border-radius:10px;background:var(--surface-2);width:100%}
.bf-result-exp{font:700 1.1rem "Lexend",sans-serif;color:var(--menang)}
.bf-result-line{font-size:.8rem;color:var(--ink)}
.bf-result-line.dim{color:var(--ink-dim)}
.bf-result-line.up{color:var(--hp-bonus);font-weight:600}
@media (max-width:420px){
  .bf-grid{gap:6px}
  .bf-deck{padding-inline:3px}
  .bf-deck-name{font-size:.64rem}
  .bf-group-title{font-size:.74rem}
  .bf-rank-chip{display:none}
}
@media (prefers-reduced-motion:reduce){.bf-lv-bar i{transition:none}}
/* ===== Token MGC (21 Okt 2026): tetingkap baling syiling kepala/ekor dalam #hpmOverlay (TokenMGC dalam events.js) ===== */
#hpmOverlay.token-mgc{display:block;padding:0;background:radial-gradient(120% 90% at 50% 50%,#14195a 0%,var(--tk-bg) 75%);backdrop-filter:none;-webkit-backdrop-filter:none;transition:background .5s ease;overflow:hidden;touch-action:none;--tk-coin:clamp(110px,32vw,180px);--tk-t:calc(var(--tk-coin)*.075)}
#hpmOverlay.token-mgc.res-head{background:radial-gradient(120% 90% at 50% 50%,#6b4f00 0%,#2e2100 55%,var(--tk-bg) 100%)}
#hpmOverlay.token-mgc.res-tail{background:radial-gradient(120% 90% at 50% 50%,#2a2f45 0%,#10131f 60%,var(--tk-bg) 100%)}
.tk-root{position:absolute;inset:0;color:#fff;font-family:"Lexend",system-ui,sans-serif}
.tk-stage{position:absolute;inset:0;perspective:1400px;overflow:hidden}
.tk-shadow,.tk-wrap{position:absolute;left:0;top:0;width:var(--tk-coin);height:var(--tk-coin);margin:calc(var(--tk-coin)/-2) 0 0 calc(var(--tk-coin)/-2);will-change:transform}
.tk-shadow{border-radius:50%;background:rgba(0,0,0,.55);filter:blur(4px)}
.tk-wrap{transform-style:preserve-3d}
.tk-coin{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.tk-layer{position:absolute;inset:0;border-radius:50%;background:linear-gradient(90deg,var(--tk-gold-edge),var(--tk-gold-lo) 40%,var(--tk-gold) 50%,var(--tk-gold-lo) 60%,var(--tk-gold-edge))}
.tk-face{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:radial-gradient(circle at 32% 28%,var(--tk-gold-hi),var(--tk-gold) 45%,var(--tk-gold-lo) 100%);box-shadow:inset 0 0 0 calc(var(--tk-coin)*.035) var(--tk-gold-lo),inset 0 0 0 calc(var(--tk-coin)*.05) var(--tk-gold),inset 0 0 0 calc(var(--tk-coin)*.058) var(--tk-gold-edge);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--tk-coin)*.02);color:var(--tk-gold-edge)}
.tk-face svg{width:44%;height:44%;filter:drop-shadow(0 1px 0 rgba(255,255,255,.55))}
.tk-face span{font:900 calc(var(--tk-coin)*.11)/1 "Lexend",Impact,system-ui,sans-serif;letter-spacing:.04em;text-shadow:0 1px 0 rgba(255,255,255,.55)}
.tk-head{transform:translateZ(calc(var(--tk-t)/2))}
.tk-tail{transform:rotateX(180deg) translateZ(calc(var(--tk-t)/2))}
.tk-top{position:absolute;left:16px;right:16px;top:calc(12px + env(safe-area-inset-top,0px));text-align:center;pointer-events:none;z-index:3}
.tk-title{font:800 13px/1.2 "Lexend",system-ui,sans-serif;letter-spacing:.06em;color:rgba(255,255,255,.9)}
.tk-sub{margin:4px auto 0;max-width:520px;font:500 11.5px/1.35 "IBM Plex Sans",system-ui,sans-serif;color:rgba(255,255,255,.62);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tk-name{position:absolute;left:calc(16px + env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:2px;z-index:3;pointer-events:none;opacity:.45;transition:opacity .2s ease}
.tk-name b{font:800 13px/1.1 "Lexend",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;max-width:60vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-name small{font-size:10.5px;letter-spacing:.08em;color:rgba(255,255,255,.55)}
.tk-p2{top:calc(84px + env(safe-area-inset-top,0px))}
.tk-p2 b{color:#ff6b74}
.tk-p1{bottom:calc(72px + env(safe-area-inset-bottom,0px))}
.tk-p1 b{color:#6fa2ff}
#hpmOverlay.owner-p1 .tk-p1,#hpmOverlay.owner-p2 .tk-p2{opacity:1}
.tk-word{position:absolute;left:50%;transform:translateX(-50%);z-index:2;pointer-events:none;opacity:0;font:900 clamp(48px,14vw,112px)/1 "Lexend",Impact,system-ui,sans-serif;letter-spacing:.04em;text-shadow:0 4px 0 rgba(0,0,0,.3),0 0 40px rgba(255,255,255,.25)}
.tk-word.at-top{top:18%}
.tk-word.at-bottom{bottom:20%}
.tk-word.on{opacity:1}
.tk-word.head{color:var(--tk-head)}
.tk-word.tail{color:var(--tk-tail)}
.tk-tally{position:absolute;right:calc(16px + env(safe-area-inset-right,0px));top:calc(84px + env(safe-area-inset-top,0px));z-index:3;font:800 12px/1 "Lexend",system-ui,sans-serif;color:var(--tk-head);pointer-events:none}
.tk-msg{position:absolute;left:calc(16px + env(safe-area-inset-left,0px));right:200px;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:3;pointer-events:none;font:500 11.5px/1.35 "IBM Plex Sans",system-ui,sans-serif;color:rgba(255,255,255,.65)}
.tk-ctrl{position:absolute;right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:4}
.tk-btn[hidden]{display:none}
#hpmOverlay.token-mgc:not(.tossing) .tk-btn:not([disabled]){animation:tkPulse 1.4s ease-in-out infinite}
@keyframes tkPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){#hpmOverlay.token-mgc .tk-btn{animation:none}}

/* Hover kad Tangan P1 membesar 1.5x boleh terkeluar dari tepi skrin — jangan biar halaman jadi lebih lebar (seluruh papan beranjak). 22 Okt 2026 */
html,body{overflow-x:clip}

/* Badge PANTULAN di tepi ATK (hudReflectMarkup, render.js) — perisai + anak panah membelok 90°: serangan lawan terkena diri sendiri. 22 Okt 2026 */
#wrap.papan-kotak .kotak-hud .hud-atk{position:relative}
.kotak-hud .hud-reflect{position:absolute;top:50%;width:4.6cqw;height:4.6cqw;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2a2350,#120e2a 75%);border:.25cqw solid rgba(255,255,255,.55);box-shadow:0 .3cqw .9cqw rgba(0,0,0,.45);opacity:.72;z-index:3}
.kotak-hud.p1 .hud-reflect{right:calc(100% + .6cqw)}
.kotak-hud.p2 .hud-reflect{left:calc(100% + .6cqw)}
.kotak-hud .hud-reflect svg{width:82%;height:82%;overflow:visible}
.kotak-hud .hud-reflect .rf-shield{fill:var(--rfl-shield);stroke:var(--rfl-edge);stroke-width:1.3;stroke-linejoin:round}
.kotak-hud .hud-reflect .rf-in{fill:none;stroke:var(--rfl-arrow);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.kotak-hud .hud-reflect .rf-head{fill:var(--rfl-head);stroke:var(--rfl-head);stroke-width:.8;stroke-linejoin:round}
.kotak-hud .hud-reflect.on{opacity:1;border-color:var(--rfl-edge);box-shadow:0 0 0 .2cqw var(--rfl-glow),0 0 1.6cqw .3cqw var(--rfl-glow);animation:hudReflectPulse 1.6s ease-in-out infinite}
.kotak-hud .hud-reflect.on .rf-shield{fill:var(--rfl-shield-hi)}
.kotak-hud .hud-reflect b{position:absolute;right:-.6cqw;bottom:-.6cqw;min-width:2.4cqw;height:2.4cqw;border-radius:1.2cqw;background:var(--rfl-head);color:#1a1200;font-size:1.7cqw;line-height:2.4cqw;text-align:center;font-weight:800}
@keyframes hudReflectPulse{0%,100%{transform:translateY(-50%) scale(1)}50%{transform:translateY(-50%) scale(1.08)}}
@media (prefers-reduced-motion:reduce){.kotak-hud .hud-reflect.on{animation:none}}

/* Statistik prestasi dalam tetingkap Menang/Kalah/Seri (gameOverStatsMarkup, render.js): MVP kiri, data kanan. 22 Okt 2026 */
#gameoverOverlay:not(.mini) .gameover-card{max-width:620px}
.go-body{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:16px;width:100%;align-items:start;text-align:left}
.go-body.no-stats{grid-template-columns:1fr;justify-items:center}
.go-mvp{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.go-mvp .gameover-mvp-card{width:100%;max-width:170px}
.go-mvp-tag{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#f5c542}
.go-mvp-none{font-size:.8rem;color:var(--go-head);padding:24px 6px}
.go-stats{display:flex;flex-direction:column;gap:8px;min-width:0}
.go-chips{display:flex;flex-wrap:wrap;gap:6px}
.go-chip{font-size:.72rem;font-weight:700;padding:4px 8px;border-radius:999px;background:var(--go-chip-bg);white-space:nowrap}
.go-table{width:100%;border-collapse:collapse;font-size:.78rem;font-variant-numeric:tabular-nums}
.go-table thead th{font-size:.64rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--go-head);padding:0 6px 4px;text-align:right}
.go-table thead th:first-child{text-align:left;padding-left:0}
.go-table tbody tr:nth-child(odd){background:var(--go-row)}
.go-table tbody th{font-weight:600;text-align:left;padding:4px 6px 4px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:0;width:70%}
.go-table td{text-align:right;padding:4px 6px;font-weight:700;width:15%}
.go-table td.go-better{color:var(--go-better)}
.go-ic{display:inline-block;width:1.4em}
@media (max-width:640px){
  #gameoverOverlay:not(.mini) .gameover-card{max-height:92dvh;overflow-y:auto}
  .go-body{gap:10px;grid-template-columns:minmax(0,34%) minmax(0,1fr)}
  .go-table{font-size:.7rem}
  .go-table thead th{font-size:.58rem;padding:0 3px 3px}
  .go-table td{padding:3px 3px}
  .go-table tbody th{padding:3px 3px 3px 2px}
  .go-chip{font-size:.64rem;padding:3px 6px}
}
/* ===== Koleksi Pek: slider 3×3 + Kad Besar | Senarai Kad Dek + Pilihan Deck (31 Okt 2026) ===== */
.pack-tab-bar{gap:clamp(4px,.8vw,6px);margin-bottom:8px}
.kb-top{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:10px;align-items:start}
.kb-left{min-width:0}
.kb-track{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.kb-track::-webkit-scrollbar{display:none}
.kb-page{flex:0 0 100%;min-width:0;align-self:flex-start;scroll-snap-align:start;scroll-snap-stop:always;box-sizing:border-box;padding:4px 2px}
.kb-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.kb-grid .koleksi-card{min-width:0}
.kb-grid .koleksi-card .card .stats{white-space:normal;line-height:1.2}
.kb-grid .koleksi-card .card{aspect-ratio:2/3;height:auto;min-height:0;border-radius:9px;padding:5px;overflow:hidden}
.kb-grid .koleksi-card .card .row1 .nm{font-size:.56rem}
.kb-grid .koleksi-card .card .type,.kb-grid .koleksi-card .card .fx{display:none}
.kb-grid .koleksi-card .card .stats{font-size:.5rem}
.kb-grid .koleksi-card:hover .card{transform:none;box-shadow:none}
.kb-grid .koleksi-card.kb-sel .card{outline:2px solid var(--accent);outline-offset:1px;box-shadow:0 0 12px -2px var(--accent)}
.kb-grid .koleksi-in-badge{font-size:.42rem;padding:1px 4px}
.kb-grid .kol-efek{transform:scale(.7);transform-origin:top right}
.kb-grid .koleksi-add-btn{font-size:0;width:22px;height:22px;max-width:none;padding:0;border-radius:50%;top:auto;bottom:4px;right:4px;transform:none;display:flex;align-items:center;justify-content:center;background:rgba(74,63,209,.9)}
.kb-grid .koleksi-add-btn::before{content:"+";font-size:15px;font-weight:800;line-height:1}
.kb-grid .koleksi-add-btn.in-deck{background:rgba(192,57,42,.9)}
.kb-grid .koleksi-add-btn.in-deck::before{content:"−"}
.kb-grid .koleksi-add-btn:disabled{display:none}
.kb-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-top:8px;padding:0 4px}
.kb-dot{width:8px;height:8px;padding:0;border-radius:50%;border:none;background:var(--line);cursor:pointer;transition:background .15s,transform .15s}
.kb-dot.active{background:var(--accent);transform:scale(1.35)}
.kb-page-lbl{text-align:center;font-size:.6rem;font-weight:700;color:var(--ink-dim);margin-top:4px}
.kb-detail{min-width:0;position:sticky;top:8px;display:flex;flex-direction:column;gap:6px;padding:4px 0}
.kb-dt-empty{font-size:.7rem;color:var(--ink-dim);text-align:center;padding:30px 6px;border:1px dashed var(--line);border-radius:10px}
.kb-dt-img{aspect-ratio:2/3;border-radius:11px;background-size:cover;background-position:center;background-color:var(--surface-2);cursor:zoom-in;box-shadow:0 8px 20px -8px rgba(0,0,0,.6)}
.kb-dt-noimg{display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;border:1px solid var(--line);font-family:"Lexend",sans-serif;font-weight:800;font-size:.85rem}
.kb-bottom{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.kb-deckcards{flex:1 1 auto;min-width:0}
.kb-dk-empty{font-size:.7rem;color:var(--ink-dim);padding:14px 4px}
.kb-side{flex:0 0 clamp(80px,21vw,130px);display:flex;flex-direction:column;gap:6px}
.kb-side-head{font-family:"Lexend",sans-serif;font-size:.58rem;font-weight:800;letter-spacing:.06em;color:var(--ink-dim);padding:0 2px}
.kb-decks{display:flex;flex-direction:column;gap:5px}
.kb-deck-btn{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:7px 7px;border-radius:9px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer;font-family:"Lexend",sans-serif;text-align:left;min-width:0}
.kb-deck-btn:hover{border-color:var(--accent)}
.kb-deck-nm{font-size:.66rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.kb-deck-meta{font-size:.56rem;font-weight:600;color:var(--ink-dim)}
.kb-deck-btn.active{border-color:var(--menang)}
.kb-deck-btn.active .kb-deck-meta{color:var(--menang)}
.kb-deck-btn.selected{background:var(--aktif-bg);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.kb-dr-head{display:flex;align-items:center;gap:5px;margin-bottom:6px;flex-wrap:wrap}
.kb-dr-title{flex:1;font-family:"Lexend",sans-serif;font-weight:800;font-size:.85rem}
.kb-dr-name{flex:1 1 90px;min-width:0;font-family:"Lexend",sans-serif;font-size:.76rem;font-weight:700;padding:6px 8px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.kb-dr-count{flex:none;font-size:.66rem;font-weight:800;padding:5px 8px;border-radius:999px;background:var(--bg);border:1px solid var(--line)}
.kb-dr-count.full{color:var(--menang);border-color:var(--menang)}
.kb-dr-aktif{flex:none;font-family:"Lexend",sans-serif;font-size:.64rem;font-weight:700;padding:6px 10px;border-radius:999px;border:none;background:var(--accent);color:#fff;cursor:pointer}
.kb-dr-aktif.on{background:var(--menang-bg);color:var(--menang);border:1px solid var(--menang)}
.kb-dr-clear{flex:none;width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink-dim);cursor:pointer;font-size:.8rem}
.kb-dr-clear:disabled{opacity:.4;cursor:default}
.kb-dr-note{font-size:.62rem;color:var(--ink-dim);margin:0 2px 8px;line-height:1.35}
.kb-dr-cols{max-height:min(60vh,520px);overflow-y:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.kb-dr-col{min-width:0;display:flex;flex-direction:column;gap:5px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:6px 4px}
.kb-dr-col[data-j="bersyarat"]{border-color:rgba(255,138,128,.35)}
.kb-dr-col[data-j="sokongan"]{border-color:rgba(227,172,82,.35)}
.kb-dr-col[data-j="kekal"]{border-color:rgba(196,155,255,.4)}
.kb-dr-col-head{font-family:"Lexend",sans-serif;font-size:.54rem;font-weight:800;color:var(--ink-dim);display:flex;justify-content:space-between;flex-wrap:wrap;gap:2px;padding:2px 0 4px}
.kb-dr-col-head span{color:var(--ink)}
.kb-dr-col-list{display:flex;flex-direction:column;gap:0}
.kb-dr-col-empty{font-size:.7rem;color:var(--ink-dim);text-align:center;padding:8px 0;opacity:.6}
.kb-mini{position:relative;cursor:pointer}
.kb-mini-img{aspect-ratio:2/3;border-radius:6px;background-size:cover;background-position:center;background-color:var(--surface-2)}
.kb-mini-txt{display:flex;flex-direction:column;gap:2px;padding:5px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);aspect-ratio:2/3;overflow:hidden;box-shadow:0 -2px 6px rgba(0,0,0,.35)}
.kb-mini-txt .nm{font-size:.54rem;font-weight:700;line-height:1.15;word-break:break-word;padding-right:12px}
.kb-mini-txt .st{font-size:.48rem;color:var(--ink-dim)}
.kb-mini-x{position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;border:none;background:rgba(192,57,42,.85);color:#fff;font-size:.5rem;line-height:1;cursor:pointer;padding:0}
@media (max-width:480px){
  .kb-top{gap:6px}
  .kb-grid{gap:4px}
  .kb-grid .koleksi-add-btn{width:18px;height:18px;bottom:3px;right:3px}
  .kb-grid .koleksi-add-btn::before{font-size:12px}
  .kb-bottom{gap:6px}
  .kb-side{flex-basis:76px}
  .kb-deck-btn{padding:6px 5px}
  .kb-deck-nm{font-size:.6rem}
  .kb-dr-cols{gap:3px}
  .kb-dr-col{padding:5px 3px}
  .kb-dr-col-head{font-size:.5rem}
}
/* --- Kad Besar: tindanan EFEK / SYARAT / NOTA, penanda tergantung di bawah (31 Okt 2026) --- */
.kb-top{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
.kb-detail{position:relative !important;top:auto !important;z-index:5}
.kb-fx-stack{position:relative;z-index:2;margin-right:10px;min-height:40px}
.kb-fx-stack.single{margin-right:0}
.kb-fx-card{position:absolute;inset:0;font-size:.62rem;line-height:1.4;padding:6px 8px;border-radius:9px;background:var(--bg);border:1px solid var(--line);color:var(--ink);overflow:hidden;cursor:default;transition:transform .25s ease,opacity .25s ease,filter .25s ease,box-shadow .2s}
.kb-fx-card[data-k="fx"]{border-color:rgba(139,123,255,.55)}
.kb-fx-card[data-k="cond"]{border-color:rgba(255,138,128,.55)}
.kb-fx-card[data-k="nota"]{border-color:rgba(242,193,78,.55)}
.kb-fx-card.front{z-index:3;box-shadow:0 4px 12px -4px rgba(0,0,0,.55)}
.kb-fx-card.back{opacity:.6;filter:brightness(.75);pointer-events:none}
.kb-fx-card.back1{z-index:2;transform:translate(5px,4px) rotate(1.2deg)}
.kb-fx-card.back2{z-index:1;transform:translate(10px,8px) rotate(2.4deg);opacity:.45}
.kb-fx-card.has-more{cursor:pointer}
.kb-fx-more{display:none;position:absolute;right:0;bottom:0;padding:8px 7px 3px 22px;font-size:.56rem;font-weight:800;color:var(--accent);background:linear-gradient(to right,transparent,var(--bg) 45%);border-bottom-right-radius:9px}
.kb-fx-card[data-k="cond"] .kb-fx-more{color:var(--stage-cond)}
.kb-fx-card[data-k="nota"] .kb-fx-more{color:#f2c14e}
.kb-fx-card.has-more .kb-fx-more{display:block}
.kb-fx-card.expanded{bottom:auto;height:auto;min-height:100%;max-height:60vh;overflow-y:auto;z-index:60;box-shadow:0 14px 34px -6px rgba(0,0,0,.75);padding-bottom:8px}
.kb-fx-card.expanded .kb-fx-more{display:none}
.kb-nota + .kb-nota{margin-top:6px;padding-top:6px;border-top:1px dashed var(--line)}
.kb-nota b{display:block;font-size:.54rem;font-weight:800;margin-bottom:1px;color:#7fc6ea}
.kb-nota[data-j="ralat"] b{color:var(--kalah)}
.kb-nota[data-j="sementara"] b{color:#f2c14e}
.kb-nota em{display:block;font-style:normal;font-size:.54rem;color:var(--ink-dim);margin-top:1px}
.kb-fx-tabs{position:absolute;left:8px;top:calc(100% - 3px);display:flex;gap:4px;z-index:0}
.kb-fx-tab{font-family:"Lexend",sans-serif;font-size:.48rem;font-weight:800;letter-spacing:.05em;padding:7px 7px 5px;border-radius:0 0 7px 7px;border:1px solid var(--line);border-top:none;background:var(--surface-2);color:var(--ink-dim);cursor:pointer;line-height:1}
.kb-fx-tab[data-k="fx"].on{background:var(--accent);color:#fff;border-color:var(--accent)}
.kb-fx-tab[data-k="cond"].on{background:var(--stage-cond);color:#2a0b08;border-color:var(--stage-cond)}
.kb-fx-tab[data-k="nota"].on{background:#f2c14e;color:#241200;border-color:#f2c14e}
span.kb-fx-tab{cursor:default}
.kb-grid .koleksi-card{touch-action:manipulation}
/* --- Logo pek: tanpa bingkai, glow bila dipilih, grid seragam; ALL = pil bulat --- */
.pack-tab-btn.pk-all{padding:5px 0;width:100%;max-width:64px;border-radius:999px;font-size:.66rem;letter-spacing:.06em;justify-content:center;text-align:center}
.pack-tab-btn.pk-all.active{box-shadow:0 0 12px -2px var(--accent)}
.pack-tab-btn.pk-has-logo,.pack-tab-btn.pk-has-logo.pk-logo-big,.pack-tab-btn.pk-has-logo.active{border:none !important;background:none !important;box-shadow:none !important;padding:2px !important;height:clamp(20px,4.6vw,32px) !important;width:100%;display:flex;align-items:center;justify-content:center;border-radius:0}
.pack-tab-btn.pk-has-logo .pk-logo,.pack-tab-btn.pk-has-logo.pk-logo-big .pk-logo{height:100% !important;width:auto;max-width:100% !important;object-fit:contain;opacity:.4;filter:grayscale(.8);transition:opacity .18s,filter .18s,transform .18s}
.pack-tab-btn.pk-has-logo:hover .pk-logo{opacity:.75;filter:none}
.pack-tab-btn.pk-has-logo.active .pk-logo{opacity:1;transform:scale(1.08);filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px var(--accent)) drop-shadow(0 0 14px var(--accent))}
/* --- Seret kad ke Dek + kad dlm dek jadi hitam putih --- */
.kb-grid .koleksi-card{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.kb-grid .card.in-deck-card{filter:grayscale(1) brightness(.8);opacity:.55}
.kb-grid .koleksi-card.kb-dragging .card{filter:grayscale(1) brightness(.7);opacity:.35}
.kb-drag-ghost{position:fixed !important;z-index:3000;pointer-events:none;margin:0;transform:scale(1.07) rotate(-2deg);box-shadow:0 16px 34px rgba(0,0,0,.65);border-radius:9px;aspect-ratio:auto}
.kb-drag-ghost.kb-ghost-back{transition:left .26s ease,top .26s ease,transform .26s ease;transform:none}
.kb-drag-ghost.kb-ghost-fly{transition:left .34s ease,top .34s ease,transform .34s ease,opacity .34s ease}
body.kb-drag-live{-webkit-user-select:none;user-select:none;cursor:grabbing}
.kb-bottom{position:relative;border-radius:12px;transition:background .15s}
body.kb-drag-live .kb-bottom{outline:2px dashed var(--accent);outline-offset:4px}
.kb-bottom.kb-drop-ok{background:rgba(139,123,255,.14)}
.kb-bottom.kb-drop-no{outline-color:var(--kalah) !important;background:rgba(240,138,128,.12)}
.kb-bottom.kb-drop-no::after{content:attr(data-drop-msg);position:absolute;left:50%;top:40px;transform:translateX(-50%);z-index:5;font-family:"Lexend",sans-serif;font-size:.7rem;font-weight:800;padding:7px 12px;border-radius:999px;background:var(--kalah-bg);color:var(--kalah);border:1px solid var(--kalah);white-space:nowrap;pointer-events:none}
/* --- Susunan dek: kad bertindan rapat, tekan lajur = renggang sikit --- */
.kb-dr-col{cursor:pointer}
.kb-dr-col .kb-mini{transition:margin-top .22s ease}
.kb-dr-col .kb-mini + .kb-mini{margin-top:calc(-150% + 18px)}
.kb-dr-col.open .kb-mini + .kb-mini{margin-top:calc(-150% + 46px)}
.kb-dr-col.open{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.kb-dr-col:not(.open) .kb-mini-x{display:none}
.kb-mini-img{box-shadow:0 -2px 6px rgba(0,0,0,.35)}
/* ===== 4 Nov 2026: logo pek berpasangan, toolbar ALL/FILTER/+−, Pilihan Deck 3 tab, susun atur PC ===== */
.pack-logo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(50px,13vw,84px),1fr));gap:10px 6px;padding:4px 2px 0}
.pk-pair{display:flex;flex-direction:column;gap:7px;min-width:0}
.pk-pair .pack-tab-btn{margin:0}
.pack-tab-btn.pk-txt{font-size:.56rem;padding:4px 6px;border-radius:999px}
.kb-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:10px 0 8px}
.kb-toolbar .pack-tab-btn.pk-all{width:auto;max-width:none;padding:6px 16px;margin:0}
.kb-toolbar .koleksi-filter-btn{margin-left:0;width:34px;height:30px}
.kb-size{display:flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--line);border-radius:999px;background:var(--bg)}
.kb-size-btn{width:28px;height:26px;border:none;border-radius:999px;background:var(--surface-2);color:var(--ink);font-size:1rem;font-weight:800;line-height:1;cursor:pointer}
.kb-size-btn:hover:not(:disabled){background:var(--accent);color:#fff}
.kb-size-btn:disabled{opacity:.35;cursor:default}
.kb-size-lbl{font-size:.6rem;font-weight:800;color:var(--ink-dim);min-width:30px;text-align:center}
.kb-grid{grid-template-columns:repeat(var(--kb-cols,3),minmax(0,1fr)) !important}
.kb-side{flex:0 0 clamp(112px,31vw,190px)}
.kb-dtabs{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-bottom:6px}
.kb-dtab{font-family:"Lexend",sans-serif;font-size:.52rem;font-weight:800;padding:5px 2px;border-radius:7px;border:1px solid var(--line);background:var(--bg);color:var(--ink-dim);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kb-dtab.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.kb-dtab-full{display:none}
.kb-tlist{display:flex;flex-direction:column;gap:5px;max-height:min(62vh,560px);overflow-y:auto;padding-right:2px;scrollbar-width:thin}
.kb-trow{display:flex;flex-direction:column;gap:4px;padding:5px;border-radius:9px;background:var(--bg);border:1.5px solid var(--line)}
.kb-trow.sel{border-color:var(--accent);background:var(--aktif-bg)}
.kb-trow-logo{display:flex;align-items:center;justify-content:center;gap:4px;height:clamp(16px,3.6vw,24px)}
.kb-trow-logo img{height:100%;width:auto;max-width:48%;object-fit:contain}
.kb-trow-logo img:only-child{max-width:90%}
.kb-trow-logo span{font-size:.5rem;font-weight:700}
.kb-trow-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.kb-slot{display:flex;flex-direction:column;align-items:center;gap:0;padding:3px 0;border-radius:6px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-dim);cursor:pointer;font-family:"Lexend",sans-serif;line-height:1.1}
.kb-slot b{font-size:.62rem;font-weight:800;color:var(--ink)}
.kb-slot small{font-size:.48rem;font-weight:700}
.kb-slot.has small{color:var(--ink)}
.kb-slot.active{border-color:var(--menang)}
.kb-slot.selected{background:var(--accent);border-color:var(--accent)}
.kb-slot.selected b,.kb-slot.selected small{color:#fff}
@media (min-width:1000px){
  body[data-tab="koleksi"] .wrap{max-width:1600px}
  .kb-top{grid-template-columns:minmax(220px,300px) minmax(0,1fr) !important;gap:14px}
  .kb-top.has-filter{grid-template-columns:minmax(200px,270px) minmax(0,1fr) minmax(280px,340px) !important}
  .kb-filter-side{min-width:0}
  .kb-filter-side .koleksi-filter-panel{margin:0;max-height:calc(100vh - 200px);overflow-y:auto;position:sticky;top:10px}
  .pack-logo-grid{grid-template-columns:repeat(11,minmax(0,1fr));gap:12px 10px}
  .pack-tab-btn.pk-has-logo,.pack-tab-btn.pk-has-logo.pk-logo-big,.pack-tab-btn.pk-has-logo.active{height:30px !important}
  .kb-side{flex-basis:250px}
  .kb-dtab{font-size:.62rem;padding:6px 4px}
  .kb-dtab-full{display:inline}.kb-dtab-short{display:none}
  .kb-tlist{max-height:none}
}
.kb-dt-img{width:100%;margin:0 auto;max-width:100%;flex:none}
/* ===== 4 Nov 2026 (b): filter 2 frame, Pilihan Deck penanda + kotak tanda, saiz & lengkung kad seragam ===== */
/* Filter: Kosongkan di tepi ▼; 2 frame (telefon memanjang, landskap/PC bersebelahan) */
.kf-clear-all{flex:none;font-family:"Lexend",sans-serif;font-size:.6rem;font-weight:700;padding:0 9px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink-dim);cursor:pointer;white-space:nowrap}
.kf-clear-all:hover{color:var(--kalah);border-color:var(--kalah)}
.kf-search-row{display:flex;gap:6px;align-items:stretch}
.kf-frames{display:grid;grid-template-columns:1fr;gap:10px}
.kf-frame{min-width:0;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.kf-frame > .koleksi-filter-subhead:first-child{margin-top:0}
.kf-frame .koleksi-filter-chip-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.kf-frame .koleksi-filter-chip-row::-webkit-scrollbar{display:none}
.kf-frame .koleksi-filter-chip{flex:none;padding:5px 8px}
@media (min-width:640px){ .kf-frames{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
@media (min-width:1000px){
  .kb-top.has-filter{grid-template-columns:minmax(200px,260px) minmax(0,1fr) minmax(480px,600px) !important}
  .kb-filter-side .koleksi-filter-panel{max-height:none;overflow:visible;position:static}
  .kf-frame{max-height:calc(100vh - 230px);overflow-y:auto}
}
/* Pilihan Deck: tab gaya penanda (bookmark) melekat pada bingkai senarai */
.kb-dtabs{display:flex !important;gap:2px;margin:0 0 -1px !important;padding:0 4px;position:relative;z-index:1}
.kb-dtab{flex:1;border-radius:9px 9px 0 0 !important;border:1px solid var(--line) !important;border-bottom:none !important;background:var(--surface-2) !important;color:var(--ink-dim) !important;padding:6px 2px 5px !important;opacity:.75}
.kb-dtab.on{background:var(--bg) !important;color:var(--ink) !important;opacity:1;box-shadow:inset 0 3px 0 var(--accent);padding-top:8px !important;margin-top:-2px}
.kb-dpanel{border:1px solid var(--line);border-radius:0 0 10px 10px;background:var(--bg);padding:6px}
/* Kotak tanda dek Aktif */
.kb-tick{flex:none;width:24px;height:24px;padding:0;border-radius:6px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-dim);font-size:.95rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.kb-tick.on{background:var(--menang-bg);color:var(--menang);border-color:var(--menang)}
.kb-deck-btn{flex-direction:row !important;align-items:center !important;gap:6px;padding:5px 6px !important}
.kb-deck-pick{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;background:none;border:none;padding:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.kb-trow{background:var(--surface-2) !important}
.kb-trow-slots{display:flex !important;flex-direction:column;gap:3px}
.kb-slot{flex-direction:row !important;align-items:center;justify-content:space-between;gap:4px;padding:2px 3px 2px 6px !important}
.kb-slot-pick{flex:1;min-width:0;background:none;border:none;padding:3px 0;color:var(--ink);font-family:"Lexend",sans-serif;font-size:.64rem;font-weight:800;text-align:left;cursor:pointer;white-space:nowrap}
.kb-slot-pick small{font-size:.56rem;font-weight:700;color:var(--ink-dim)}
.kb-slot.selected .kb-slot-pick,.kb-slot.selected .kb-slot-pick small{color:#fff}
.kb-slot .kb-tick{width:20px;height:20px;font-size:.8rem}
.kb-slot.selected .kb-tick:not(.on){background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.4)}
@media (min-width:1000px){ .kb-trow-slots{flex-direction:row !important} .kb-slot{flex:1} }
/* Panel dek: 💾 di kiri nama */
.kb-dr-save{flex:none;width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--bg);cursor:pointer;font-size:.85rem;transition:background .15s}
.kb-dr-save.saved{background:var(--menang-bg);border-color:var(--menang)}
span.kb-dr-aktif{cursor:default}
/* Lengkung kad ikut saiz (seragam: kecil & besar) */
.kb-grid .koleksi-card .card{border-radius:7% / 4.67% !important}
.kb-grid .koleksi-card.kb-sel .card{outline-offset:1px}
.kb-dt-img{border-radius:7% / 4.67% !important}
.kb-mini-img,.kb-mini-txt{border-radius:7% / 4.67% !important}
/* Tindanan EFEK: tiada kotak senget; teks lebih besar di PC */
.kb-fx-card.back1{transform:translate(0,5px) !important}
.kb-fx-card.back2{transform:translate(0,10px) !important}
@media (min-width:1000px){ .kb-fx-card{font-size:.93rem;line-height:1.45;padding:9px 11px} .kb-fx-more{font-size:.75rem} .kb-fx-stack{margin-right:0} }
/* Susunan dek: saiz kad = saiz kad slider; bayang bila bertindan */
.kb-dr-cols{grid-template-columns:repeat(4,calc(var(--kb-tile-w,62px) + 10px)) !important;overflow-x:auto;justify-content:start}
.kb-dr-col-list{width:var(--kb-tile-w,62px)}
.kb-dr-col .kb-mini{width:100%}
.kb-dr-col .kb-mini + .kb-mini .kb-mini-img,.kb-dr-col .kb-mini + .kb-mini .kb-mini-txt{box-shadow:0 -6px 12px -2px rgba(0,0,0,.7),0 -1px 0 rgba(255,255,255,.08) !important}
.kb-dr-col .kb-mini + .kb-mini{margin-top:calc(-150% + 20%) !important}
.kb-dr-col.open .kb-mini + .kb-mini{margin-top:calc(-150% + 45%) !important}
.kb-mini-txt .nm{font-size:clamp(.5rem, calc(var(--kb-tile-w,62px) * .085), .7rem)}
.kf-frame .koleksi-filter-chip{padding:4px 7px;font-size:.64rem}
.kf-frame .koleksi-filter-chip .koleksi-filter-count{font-size:.85em}
@media (min-width:640px){ .kf-frames{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)} }
@media (min-width:1000px){ .kb-top.has-filter{grid-template-columns:minmax(200px,250px) minmax(0,1fr) minmax(560px,640px) !important} }
/* ===== 4 Nov 2026 (c): Kad Zoom & FILTER terapung (PC), tab SD, baris versi dek, lajur dek penuh ===== */
.kb-top{grid-template-columns:minmax(0,1fr) !important}
.kb-top.has-detail{grid-template-columns:minmax(0,2fr) minmax(0,3fr) !important}
.kb-detail{position:relative}
.kb-detail-body{display:flex;flex-direction:column;gap:6px;min-height:0}
.kb-float-x{position:absolute;top:6px;right:6px;z-index:12;width:28px;height:28px;padding:0;border-radius:50%;border:1px solid var(--line);background:rgba(12,14,24,.85);color:var(--ink);font-size:.8rem;font-weight:800;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.kb-float-x:hover{background:var(--kalah);border-color:var(--kalah);color:#fff}
.kb-float-head{display:none}
:root{--kbfl-dw:min(340px,24vw);--kbfl-fw:min(620px,38vw)}
@media (min-width:1000px){
  .kb-top,.kb-top.has-detail{grid-template-columns:minmax(0,1fr) !important}
  body[data-tab="koleksi"].kb-fl-detail{padding-left:calc(var(--kbfl-dw) + 32px)}
  body[data-tab="koleksi"].kb-fl-filter{padding-right:calc(var(--kbfl-fw) + 32px)}
  .kb-float{position:fixed !important;top:16px;bottom:calc(var(--bottomnav-h,64px) + var(--nav-lift,0px) + 14px);z-index:520;background:var(--surface);border:1px solid var(--accent);border-radius:16px;box-shadow:0 18px 40px -10px rgba(0,0,0,.7);padding:12px;display:flex;flex-direction:column;animation:kbFloatIn .2s ease-out}
  @keyframes kbFloatIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .kb-float-detail{left:16px;width:var(--kbfl-dw)}
  .kb-float-detail .kb-float-x{top:10px;right:10px}
  .kb-float-filter{right:16px;width:var(--kbfl-fw);overflow-y:auto}
  .kb-float-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px;position:relative}
  .kb-float-head span{font-family:"Lexend",sans-serif;font-size:.7rem;font-weight:800;letter-spacing:.06em;color:var(--ink-dim)}
  .kb-float-head .kb-float-x{position:static}
  .kb-float-filter .koleksi-filter-panel{border:none;background:none;padding:0;margin:0}
  .kb-float-filter .kf-frame{max-height:none;overflow:visible}
  .kb-float-filter .kf-frames{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
}
/* Pilihan Deck: 4 penanda (Open / Tema / SD / Tournament) */
.kb-dtab{font-size:.5rem !important}
@media (min-width:1000px){ .kb-dtab{font-size:.6rem !important} }
/* Baris dek Tema / SD / Tournament: logo kiri, versi 1 2 3 memanjang; setiap versi: nombor atas, (bil) bawah, ☑ kanan tengah */
.kb-trow{flex-direction:row !important;align-items:center;gap:8px !important;padding:6px 8px !important}
.kb-trow-logo{flex:0 0 clamp(62px,15vw,92px);height:auto !important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.kb-trow-logo img{width:auto !important;max-width:100% !important;height:clamp(16px,3.6vw,24px) !important;object-fit:contain}
.kb-trow-logo.n2 img,.kb-trow-logo.n3 img{height:clamp(13px,3vw,19px) !important}
.kb-trow-slots{flex:1;min-width:0;display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:5px !important;flex-direction:initial !important}
.kb-slot{display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:space-between;gap:4px;padding:4px 5px 4px 8px !important;border-radius:8px !important}
.kb-slot-pick{display:flex !important;flex-direction:column;align-items:center;gap:1px;padding:0 !important;line-height:1.1}
.kb-slot-pick b{font-size:.82rem;font-weight:800}
.kb-slot-pick small{font-size:.58rem}
.kb-side{flex:0 0 clamp(300px,36vw,420px) !important}
/* Susun ikut lebar frame Koleksi (bukan skrin): sempit → Pilihan Deck di atas, kad dek di bawah */
.koleksi-section{container-type:inline-size}
@container (max-width:760px){
  .kb-side{flex:0 0 48% !important}
  .kb-dtabs{display:grid !important;grid-template-columns:1fr 1fr;row-gap:2px}
  .kb-tlist{max-height:min(70vh,620px)}
}
/* 4 lajur susunan dek memenuhi ruang; saiz kad kekal = saiz kad slider (dihadkan lebar lajur) */
.kb-dr-cols{grid-template-columns:repeat(4,minmax(0,1fr)) !important;overflow-x:visible !important}
.kb-dr-col-list{width:min(var(--kb-tile-w,62px),100%) !important;margin:0 auto}
@media (min-width:1000px){
  .kb-float{top:16px !important}
  .kb-float-detail .kb-detail-body{flex:1;min-height:0}
  .kb-float-filter .kf-frames{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
}
/* ===== 4 Nov 2026 (d): filter PC bersusun ke bawah; baris dek logo atas + 1 2 3 bawah; panel terapung dlm frame ===== */
@media (min-width:1000px){
  :root{--kbfl-fw:min(400px,28vw)}
  .kb-float{bottom:auto !important}
  .kb-float-filter .kf-frames{grid-template-columns:minmax(0,1fr) !important}
}
.kb-trow{flex-direction:column !important;align-items:stretch !important;gap:6px !important;padding:7px 8px !important}
.kb-trow-logo{flex:none !important;width:auto !important;flex-direction:row !important;justify-content:center;gap:8px !important;height:clamp(18px,3.8vw,26px) !important}
.kb-trow-logo img{height:100% !important;max-width:none !important}
.kb-trow-logo.n2 img,.kb-trow-logo.n3 img{height:100% !important;max-width:32% !important}
.kb-trow-slots{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important}
@media (min-width:1000px){ :root{--kbfl-fw:var(--kbfl-dw)} }
/* ===== 4 Nov 2026 (e): logo pek tertutup, butang ✅ ===== */
.pack-logo-grid.pk-collapsed{display:flex !important;flex-wrap:wrap;gap:10px;justify-content:flex-start}
.pack-logo-grid.pk-collapsed .pk-pair{width:clamp(60px,15vw,96px)}
.kb-logo-done{height:30px;padding:0 10px;border-radius:999px;border:1px solid var(--menang);background:var(--menang-bg);font-size:.85rem;cursor:pointer}
.kb-toolbar .pk-all + .kb-logo-done{margin-left:-2px}
@container (max-width:760px){
  .kb-dtab-full{display:none !important}.kb-dtab-short{display:inline !important}
  .kb-trow-logo.n3 img{max-width:30% !important}
}
@container (max-width:760px){
  .kb-trow{padding:6px 5px !important}
  .kb-trow-slots{gap:3px !important}
  .kb-slot{padding:3px 3px 3px 5px !important;gap:2px}
  .kb-slot-pick b{font-size:.72rem}
  .kb-slot-pick small{font-size:.5rem}
  .kb-slot .kb-tick{width:16px;height:16px;font-size:.66rem;border-radius:4px}
}
/* ===== 6 Nov 2026: grid logo pek lebih kecil; tab dek telefon Open|Tour / Tema|SD; slot tanpa kotak tanda (glow hijau) ===== */
.pack-logo-grid{grid-template-columns:repeat(auto-fill,minmax(clamp(38px,9.5vw,62px),1fr)) !important;gap:7px 5px !important}
.pk-pair{gap:5px !important}
.pack-tab-btn.pk-has-logo,.pack-tab-btn.pk-has-logo.pk-logo-big,.pack-tab-btn.pk-has-logo.active{height:clamp(15px,3.4vw,23px) !important}
@media (min-width:1000px){
  .pack-logo-grid{grid-template-columns:repeat(11,minmax(0,1fr)) !important;gap:8px 8px !important;max-width:760px}
  .pack-tab-btn.pk-has-logo,.pack-tab-btn.pk-has-logo.pk-logo-big,.pack-tab-btn.pk-has-logo.active{height:22px !important}
}
@container (max-width:760px){
  .kb-dtab[data-t="open"]{order:1}.kb-dtab[data-t="tour"]{order:2}.kb-dtab[data-t="tema"]{order:3}.kb-dtab[data-t="sd"]{order:4}
}
.kb-trow .kb-slot{justify-content:center !important;padding:4px 2px !important;background:var(--surface-2);border:1px solid var(--line) !important;transition:box-shadow .15s,border-color .15s}
.kb-trow .kb-slot-pick{width:100%;align-items:center}
.kb-trow .kb-slot.active{border-color:var(--menang) !important;background:var(--menang-bg) !important;box-shadow:0 0 0 1px var(--menang),0 0 12px -1px var(--menang)}
.kb-trow .kb-slot.active .kb-slot-pick,.kb-trow .kb-slot.active .kb-slot-pick b{color:var(--menang)}
.kb-trow .kb-slot.active .kb-slot-pick small{color:var(--ink)}
.kb-trow .kb-slot.selected:not(.active){background:var(--surface-2) !important}
.kb-trow .kb-slot.selected .kb-slot-pick b{text-decoration:underline;text-underline-offset:2px}