:root{
            --page-pad: clamp(3px, .8dvh, 8px);
            --gap: clamp(2px, .55dvh, 6px);
            --player-hand-target: 25dvh;

            --slot-w: clamp(
                30px,
                min(
                    calc((100vw - 38px) / 4),
                    calc((100dvh - var(--player-hand-target) - 135px) / 8.8)
                ),
                94px
            );

            --slot-h: calc(var(--slot-w) * 1.424);

            --enemy-card-h: clamp(38px, 6.6dvh, 70px);
            --enemy-card-w: calc(var(--enemy-card-h) * .702);

            --player-card-h: clamp(94px, calc(var(--player-hand-target) - 28px), 238px);
            --player-card-w: calc(var(--player-card-h) * .702);

            --player-card-shift: clamp(
                -92px,
                calc((100vw - (var(--page-pad) * 2) - (var(--player-card-w) * 5) - 8px) / 4),
                8px
            );
        }

        *{
            box-sizing:border-box;
            -webkit-tap-highlight-color:transparent;
            user-select:none;
        }

        html,
        body{
            margin:0;
            width:100%;
            height:100%;
            overflow:hidden;
            background:
                radial-gradient(circle at top, rgba(139,89,39,.28), transparent 35%),
                linear-gradient(180deg, #120d09 0%, #1b120b 52%, #120d09 100%);
            color:#f8e8c8;
            font-family:Arial, sans-serif;
            overscroll-behavior:none;
            touch-action:none;
            -ms-touch-action:none;
            -webkit-text-size-adjust:100%;
        }

        body{
            position:fixed;
            inset:0;
            width:100vw;
            height:100vh;
            height:100dvh;
            touch-action:none;
        }

        .loading-screen{
            position:fixed;
            inset:0;
            z-index:99;
            display:flex;
            align-items:center;
            justify-content:center;
            background:
                radial-gradient(circle at center, rgba(90,55,24,.95), rgba(10,7,5,.98));
            padding:24px;
            transition:.25s ease;
        }

        .loading-screen.hide{
            opacity:0;
            pointer-events:none;
        }

        .loading-box{
            width:100%;
            max-width:420px;
            text-align:center;
            background:rgba(26,18,12,.92);
            border:1px solid rgba(230,190,112,.45);
            border-radius:20px;
            padding:24px;
            box-shadow:0 20px 70px rgba(0,0,0,.55);
        }

        .loading-title{
            font-size:22px;
            font-weight:bold;
            color:#ffd27a;
            margin-bottom:8px;
        }

        .loading-sub{
            font-size:14px;
            color:#d9c39d;
            margin-bottom:18px;
        }

        .progress-wrap{
            width:100%;
            height:14px;
            border-radius:999px;
            overflow:hidden;
            background:rgba(255,255,255,.12);
            border:1px solid rgba(255,255,255,.12);
        }

        .progress-bar{
            width:0%;
            height:100%;
            background:linear-gradient(90deg, #9d6125, #ffd27a);
            transition:.15s linear;
        }

        .progress-text{
            margin-top:12px;
            font-size:28px;
            font-weight:bold;
            color:#fff4d6;
        }

        .duel-message{
            position:relative;
            z-index:45;
            width:min(760px, calc(100vw - 20px));
            max-width:100%;
            margin:clamp(3px, .55dvh, 7px) auto 0;
            padding:clamp(6px, .9dvh, 9px) 12px;
            border-radius:14px;
            background:rgba(20,14,9,.88);
            border:1px solid rgba(255,210,122,.38);
            color:#ffe7a8;
            font-size:clamp(10px, 2.3vw, 13px);
            line-height:1.25;
            text-align:center;
            box-shadow:0 10px 35px rgba(0,0,0,.45);
            opacity:0;
            pointer-events:none;
            transition:.18s ease;
        }

        .duel-message.show{
            opacity:1;
        }


        .hp-layer{
            position:fixed;
            left:50%;
            top:clamp(40px, 6.5dvh, 58px);
            transform:translateX(-50%);
            z-index:82;
            width:calc(100vw - 18px);
            max-width:760px;
            display:flex;
            justify-content:space-between;
            gap:8px;
            pointer-events:none;
        }

        .hp-panel{
            min-width:96px;
            padding:6px 10px;
            border-radius:999px;
            background:rgba(20,14,9,.82);
            border:1px solid rgba(255,210,122,.34);
            box-shadow:0 8px 24px rgba(0,0,0,.36);
            color:#ffe7a8;
            font-size:clamp(10px, 2vw, 13px);
            font-weight:bold;
            line-height:1;
            text-align:center;
            white-space:nowrap;
        }

        .hp-panel span{
            color:#fff4d6;
            font-size:1.12em;
        }

        .hp-panel.low-hp{
            border-color:rgba(255,80,65,.7);
            color:#ffd0c4;
            animation:hpWarningPulse .9s infinite ease-in-out;
        }

        @keyframes hpWarningPulse{
            0%{ box-shadow:0 0 0 rgba(255,70,70,0); }
            50%{ box-shadow:0 0 18px rgba(255,70,70,.55); }
            100%{ box-shadow:0 0 0 rgba(255,70,70,0); }
        }

        .game-over-layer{
            position:fixed;
            inset:0;
            z-index:200;
            display:none;
            align-items:center;
            justify-content:center;
            padding:20px;
            background:rgba(0,0,0,.74);
        }

        .game-over-layer.show{
            display:flex;
        }

        .game-over-box{
            width:100%;
            max-width:420px;
            border-radius:22px;
            padding:24px;
            text-align:center;
            background:rgba(29,20,13,.97);
            border:1px solid rgba(255,210,122,.48);
            box-shadow:0 25px 90px rgba(0,0,0,.72);
        }

        .game-over-title{
            margin-bottom:10px;
            font-size:26px;
            font-weight:bold;
            color:#ffd27a;
        }

        .game-over-text{
            margin-bottom:18px;
            color:#f4ddb1;
            font-size:14px;
            line-height:1.5;
        }

        .game-over-actions{
            display:flex;
            justify-content:center;
            gap:10px;
            flex-wrap:wrap;
        }

        .game-over-actions button,
        .game-over-actions a{
            border:0;
            border-radius:999px;
            padding:11px 16px;
            font-size:13px;
            font-weight:bold;
            text-decoration:none;
            cursor:pointer;
        }

        .btn-restart{
            background:#d9a441;
            color:#1b1008;
        }

        .btn-exit-duel{
            background:#3a2b20;
            color:#f5dfb8;
            border:1px solid rgba(255,255,255,.15) !important;
        }

        .placement-actions,
        .battle-actions{
            position:fixed;
            left:50%;
            transform:translateX(-50%);
            z-index:96;
            display:none;
            gap:8px;
            padding:6px;
            border-radius:999px;
            background:rgba(20,14,9,.88);
            border:1px solid rgba(255,210,122,.35);
            box-shadow:0 12px 35px rgba(0,0,0,.48);
        }

        .placement-actions{
            bottom:calc(var(--player-hand-target) + 10px);
        }

        .battle-actions{
            bottom:10px;
        }

        .placement-actions.show{
            display:flex;
        }

        .battle-actions.show{
            display:block;
        }

        .placement-actions button,
        .battle-actions button{
            border:0;
            border-radius:999px;
            padding:9px 13px;
            font-size:12px;
            font-weight:bold;
            cursor:pointer;
        }

        .btn-discard{
            background:#8d3328;
            color:#ffe8d8;
        }

        .btn-cancel-place{
            background:#3a2b20;
            color:#f5dfb8;
            border:1px solid rgba(255,255,255,.14) !important;
        }

        .battle-actions button{
            background:#d9a441;
            color:#1b1008;
        }

        .duel-shell{
            width:100%;
            height:100vh;
            height:100dvh;
            max-width:1080px;
            margin:0 auto;
            padding:var(--page-pad);
            display:flex;
            flex-direction:column;
            gap:var(--gap);
            overflow:hidden;
            position:relative;

            opacity:.18;
            transform:scale(.985);
            filter:blur(1px);
            pointer-events:none;
            transition:.25s ease;
        }

        body.duel-ready .duel-shell{
            opacity:1;
            transform:scale(1);
            filter:none;
            pointer-events:auto;
        }

        .duel-header{
            flex:0 0 auto;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:8px;
            padding:clamp(4px, .65dvh, 8px) 9px;
            background:rgba(35,25,17,.78);
            border:1px solid rgba(219,178,98,.28);
            border-radius:11px;
            min-height:0;
        }

        .duel-title{
            font-size:clamp(12px, 1.9vw, 17px);
            font-weight:bold;
            color:#ffd27a;
            line-height:1.05;
        }

        .duel-subtitle{
            font-size:clamp(8px, 1.3vw, 11px);
            color:#d9c39d;
            margin-top:2px;
            line-height:1.05;
        }

        .duel-meta{
            font-size:clamp(8px, 1.35vw, 11px);
            color:#d9c39d;
            text-align:right;
            line-height:1.2;
            white-space:nowrap;
        }

        .hand-area{
            flex:0 0 auto;
            width:100%;
            border-radius:12px;
            background:rgba(255,255,255,.04);
            border:1px solid rgba(255,255,255,.08);
            overflow:hidden;
        }

        .hand-label{
            display:flex;
            justify-content:space-between;
            align-items:center;
            font-size:clamp(8px, 1.4vw, 11px);
            color:#e8d4aa;
            letter-spacing:.25px;
            text-transform:uppercase;
            line-height:1;
            white-space:nowrap;
        }

        .enemy-hand{
            padding:clamp(3px, .45dvh, 5px);
        }

        .enemy-hand .hand-label{
            margin-bottom:clamp(2px, .3dvh, 4px);
        }

        .enemy-hand .hand-row{
            height:var(--enemy-card-h);
            display:flex;
            justify-content:center;
            align-items:center;
            gap:clamp(3px, .7vw, 7px);
        }

        .enemy-hand .hand-card{
            width:var(--enemy-card-w);
            height:var(--enemy-card-h);
        }

        .player-hand{
            position:relative;
            z-index:30;
            overflow:visible;

            flex:0 0 var(--player-hand-target);
            height:var(--player-hand-target);
            padding:clamp(5px, .8dvh, 8px);
            display:flex;
            flex-direction:column;
            background:
                radial-gradient(circle at top, rgba(255,210,122,.11), transparent 42%),
                rgba(255,255,255,.055);
            border-color:rgba(255,210,122,.22);
        }

        .player-hand .hand-label{
            flex:0 0 auto;
            margin-bottom:clamp(3px, .45dvh, 6px);
        }

        .player-hand .hand-row{
            flex:1 1 auto;
            min-height:0;
            display:flex;
            justify-content:center;
            align-items:flex-end;
            overflow:visible;
            padding:0 4px clamp(2px, .4dvh, 6px);
        }

        .hand-card{
            border-radius:clamp(5px, 1.1vw, 10px);
            overflow:hidden;
            position:relative;
            background:#2d2117;
            border:1px solid rgba(255,220,150,.32);
            box-shadow:0 5px 12px rgba(0,0,0,.35);
            flex:0 0 auto;
        }

        .player-hand .hand-card{
            width:var(--player-card-w);
            height:var(--player-card-h);
            border:1px solid rgba(255,225,160,.55);
            box-shadow:0 8px 18px rgba(0,0,0,.48);
            transform-origin:bottom center;
            cursor:pointer;
            pointer-events:auto;
            transition:
                transform .18s ease,
                box-shadow .18s ease,
                border-color .18s ease,
                filter .18s ease,
                opacity .18s ease;
        }

        .player-hand .hand-card:not(:first-child){
            margin-left:var(--player-card-shift);
        }

        .player-hand .hand-card:nth-child(1){
            z-index:1;
            transform:rotate(-4deg) translateY(3px);
        }

        .player-hand .hand-card:nth-child(2){
            z-index:2;
            transform:rotate(-2deg) translateY(0);
        }

        .player-hand .hand-card:nth-child(3){
            z-index:3;
            transform:rotate(0deg) translateY(-3px);
        }

        .player-hand .hand-card:nth-child(4){
            z-index:4;
            transform:rotate(2deg) translateY(0);
        }

        .player-hand .hand-card:nth-child(5){
            z-index:5;
            transform:rotate(4deg) translateY(3px);
        }

        .player-hand .hand-card.is-selected{
            z-index:999 !important;
            transform:translateY(-8px) scale(1.08) !important;
            border-color:#ffd27a !important;
            box-shadow:
                0 0 0 2px rgba(255,210,122,.75),
                0 14px 35px rgba(0,0,0,.68) !important;
            filter:saturate(1.12) brightness(1.08);
        }

        .hand-card img{
            width:100%;
            height:100%;
            object-fit:cover;
            display:block;
            pointer-events:none;
        }

        .card-stat-box{
            position:absolute;
            left:50%;
            top:clamp(2px, .45dvh, 5px);
            transform:translateX(-50%);
            z-index:7;
            min-width:54%;
            max-width:88%;
            padding:clamp(2px, .35dvh, 4px) clamp(3px, .65vw, 7px);
            border-radius:999px;
            background:rgba(0,0,0,.62);
            border:1px solid rgba(255,210,122,.45);
            color:#fff4d6;
            text-align:center;
            line-height:1.05;
            text-shadow:0 1px 2px rgba(0,0,0,.95);
            box-shadow:0 2px 8px rgba(0,0,0,.38);
            pointer-events:none;
        }

        .card-stat-stars{
            display:block;
            white-space:nowrap;
            font-size:clamp(7px, 1.35vw, 12px);
            letter-spacing:-1px;
        }

        .card-stat-power{
            display:block;
            margin-top:1px;
            font-size:clamp(8px, 1.45vw, 13px);
            font-weight:bold;
            letter-spacing:.2px;
        }

        .player-hand .card-stat-box{
            min-width:58%;
            padding:clamp(3px, .45dvh, 5px) clamp(5px, .85vw, 9px);
        }

        .player-hand .card-stat-stars{
            font-size:clamp(11px, 2.2vw, 18px);
            letter-spacing:-2px;
        }

        .player-hand .card-stat-power{
            font-size:clamp(12px, 2.35vw, 20px);
        }

        .field-card .card-stat-box{
            min-width:60%;
            max-width:92%;
        }

        .enemy-slot .field-card[data-face="down"] .card-stat-box{
            display:none !important;
        }

        .hand-card.closed{
            background:#25170f;
        }

        .hand-card .mini-name{
            position:absolute;
            left:0;
            right:0;
            bottom:0;
            padding:3px 2px;
            font-size:clamp(7px, 1vw, 9px);
            line-height:1.05;
            text-align:center;
            color:#fff4d6;
            background:linear-gradient(180deg, transparent, rgba(0,0,0,.82));
            text-shadow:0 1px 2px #000;
            pointer-events:none;
        }

        .player-hand .hand-card .mini-name{
            font-size:clamp(8px, 1.2vw, 11px);
            padding:5px 3px 4px;
        }

        /* UI clean mode: nama kartu di hand tidak ditampilkan di atas gambar. */
        .hand-card .mini-name{
            display:none !important;
        }

        .battle-board{
            flex:1 1 auto;
            min-height:0;
            width:100%;
            display:flex;
            flex-direction:column;
            justify-content:center;
            align-items:center;
            gap:var(--gap);
            overflow:visible;
            position:relative;
            z-index:10;
            transition:transform .18s ease, filter .18s ease;
            transform-origin:center center;
        }

        .battle-board.placement-mode{
            transform:scale(1.08);
            z-index:35;
            filter:brightness(1.08);
        }

        .arena{
            width:100%;
            display:grid;
            grid-template-columns:repeat(4, var(--slot-w));
            grid-auto-rows:var(--slot-h);
            justify-content:center;
            gap:var(--gap);
            overflow:visible;
        }

        .enemy-arena{
            grid-template-areas:
                "edeck  eback1  eback2  eback3"
                "egrave efront1 efront2 efront3";
        }

        .player-arena{
            grid-template-areas:
                "pfront1 pfront2 pfront3 pgrave"
                "pback1  pback2  pback3  pdeck";
        }

        .slot{
            width:var(--slot-w);
            height:var(--slot-h);
            border:1px solid rgba(0,0,0,.82);
            border-radius:clamp(4px, .9vw, 10px);
            position:relative;
            overflow:hidden;
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:center;
            text-align:center;
            box-shadow:
                inset 0 0 0 1px rgba(255,255,255,.06),
                0 4px 9px rgba(0,0,0,.18);
        }

        .slot.front{
            background:
                linear-gradient(180deg, rgba(178,230,238,.72), rgba(115,184,199,.58));
        }

        .slot.back{
            background:
                linear-gradient(180deg, rgba(222,151,140,.76), rgba(189,101,88,.62));
        }

        .slot.grave{
            background:
                linear-gradient(180deg, rgba(164,132,136,.78), rgba(122,88,93,.68));
        }

        .slot.deck{
            background:
                linear-gradient(180deg, rgba(188,188,188,.8), rgba(132,132,132,.7));
        }

        .slot::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                linear-gradient(135deg, rgba(255,255,255,.12), transparent 36%),
                radial-gradient(circle at top right, rgba(255,255,255,.12), transparent 38%);
            pointer-events:none;
        }

        .monster-slot.is-selectable-slot{
            cursor:pointer;
            outline:2px solid rgba(255,210,122,.75);
            outline-offset:2px;
            animation:slotPulse 1s infinite ease-in-out;
        }

        .monster-slot.is-tribute-slot{
            outline:2px solid rgba(255,120,88,.9);
            outline-offset:2px;
            animation:tributePulse 1s infinite ease-in-out;
        }

        .monster-slot.is-stack-slot{
            outline:2px solid rgba(90,220,160,.95);
            outline-offset:2px;
            animation:stackPulse 1s infinite ease-in-out;
        }

        @keyframes slotPulse{
            0%{
                box-shadow:
                    inset 0 0 0 1px rgba(255,255,255,.06),
                    0 0 0 rgba(255,210,122,0);
            }
            50%{
                box-shadow:
                    inset 0 0 0 1px rgba(255,255,255,.06),
                    0 0 18px rgba(255,210,122,.55);
            }
            100%{
                box-shadow:
                    inset 0 0 0 1px rgba(255,255,255,.06),
                    0 0 0 rgba(255,210,122,0);
            }
        }

        @keyframes tributePulse{
            0%{
                box-shadow:
                    inset 0 0 0 1px rgba(255,255,255,.06),
                    0 0 0 rgba(255,120,88,0);
            }
            50%{
                box-shadow:
                    inset 0 0 0 1px rgba(255,255,255,.06),
                    0 0 20px rgba(255,120,88,.65);
            }
            100%{
                box-shadow:
                    inset 0 0 0 1px rgba(255,255,255,.06),
                    0 0 0 rgba(255,120,88,0);
            }
        }

        @keyframes stackPulse{
            0%{
                box-shadow:
                    inset 0 0 0 1px rgba(255,255,255,.06),
                    0 0 0 rgba(90,220,160,0);
            }
            50%{
                box-shadow:
                    inset 0 0 0 1px rgba(255,255,255,.06),
                    0 0 20px rgba(90,220,160,.7);
            }
            100%{
                box-shadow:
                    inset 0 0 0 1px rgba(255,255,255,.06),
                    0 0 0 rgba(90,220,160,0);
            }
        }

        .slot-badge{
            position:absolute;
            top:clamp(2px, .45dvh, 5px);
            left:clamp(2px, .45dvh, 5px);
            min-width:clamp(14px, 2.4vw, 20px);
            height:clamp(14px, 2.4vw, 20px);
            display:flex;
            align-items:center;
            justify-content:center;
            padding:0 4px;
            border-radius:999px;
            background:rgba(0,0,0,.45);
            color:#fff3d1;
            font-size:clamp(7px, 1.25vw, 9px);
            font-weight:bold;
            z-index:2;
        }

        .slot-title{
            position:relative;
            z-index:2;
            font-size:clamp(7px, 1.35vw, 10px);
            font-weight:bold;
            color:rgba(0,0,0,.78);
            text-transform:uppercase;
            letter-spacing:.2px;
            text-shadow:0 1px rgba(255,255,255,.25);
            line-height:1.05;
        }

        .slot-sub{
            position:relative;
            z-index:2;
            margin-top:2px;
            font-size:clamp(7px, 1.2vw, 9px);
            color:rgba(0,0,0,.62);
            font-weight:bold;
            line-height:1.05;
        }

        /* Arena dibuat clean: label lane/baris disembunyikan.
           Hanya Deck dan Kuburan yang tetap menampilkan teks dan jumlah kartu. */
        .slot-badge{
            display:none !important;
        }

        .monster-slot .slot-title,
        .monster-slot .slot-sub{
            display:none !important;
        }

        .deck-card-icon{
            width:40%;
            aspect-ratio:5 / 7.12;
            margin-bottom:clamp(2px, .45dvh, 5px);
            border-radius:clamp(3px, .7vw, 5px);
            background:#25170f url("/img/unknown_111.png") center center / cover no-repeat;
            border:1px solid rgba(0,0,0,.55);
            box-shadow:0 3px 7px rgba(0,0,0,.24);
            position:relative;
            z-index:2;
        }

        .field-card{
            position:absolute;
            inset:0;
            z-index:5;
            background:#23170f;
        }

        .field-card img{
            width:100%;
            height:100%;
            display:block;
            object-fit:cover;
        }

        .field-card-name{
            display:none !important;
        }

        .center-zone{
            flex:0 0 auto;
            width:100%;
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:center;
            padding:0 6px;
            gap:0;
        }

        .center-status{
            width:100%;
            display:flex;
            align-items:center;
            justify-content:center;
            gap:6px;
            color:#ffd27a;
            font-size:clamp(8px, 1.45vw, 11px);
            font-weight:bold;
            text-align:center;
            line-height:1;
            padding:0;
            white-space:nowrap;
        }

        .center-status::before,
        .center-status::after{
            content:"";
            height:1px;
            flex:1;
            max-width:180px;
            background:linear-gradient(90deg, transparent, rgba(255,210,122,.42), transparent);
        }

        .area-edeck{ grid-area:edeck; }
        .area-egrave{ grid-area:egrave; }
        .area-eback1{ grid-area:eback1; }
        .area-eback2{ grid-area:eback2; }
        .area-eback3{ grid-area:eback3; }
        .area-efront1{ grid-area:efront1; }
        .area-efront2{ grid-area:efront2; }
        .area-efront3{ grid-area:efront3; }

        .area-pdeck{ grid-area:pdeck; }
        .area-pgrave{ grid-area:pgrave; }
        .area-pback1{ grid-area:pback1; }
        .area-pback2{ grid-area:pback2; }
        .area-pback3{ grid-area:pback3; }
        .area-pfront1{ grid-area:pfront1; }
        .area-pfront2{ grid-area:pfront2; }
        .area-pfront3{ grid-area:pfront3; }

        .confirm-layer{
            position:fixed;
            inset:0;
            z-index:120;
            display:none;
            align-items:center;
            justify-content:center;
            padding:18px;
            background:rgba(0,0,0,.55);
        }

        .confirm-layer.show{
            display:flex;
        }

        .confirm-box{
            width:100%;
            max-width:380px;
            padding:18px;
            border-radius:18px;
            background:rgba(29,20,13,.97);
            border:1px solid rgba(255,210,122,.42);
            box-shadow:0 20px 70px rgba(0,0,0,.65);
            text-align:center;
        }

        .confirm-title{
            margin-bottom:8px;
            font-size:18px;
            font-weight:bold;
            color:#ffd27a;
        }

        .confirm-text{
            margin-bottom:16px;
            color:#f4ddb1;
            font-size:13px;
            line-height:1.45;
        }

        .confirm-actions{
            display:flex;
            gap:10px;
            justify-content:center;
        }

        .confirm-actions button{
            min-width:90px;
            border:0;
            border-radius:999px;
            padding:11px 14px;
            font-weight:bold;
            cursor:pointer;
            font-size:13px;
        }

        .btn-no{
            background:#3a2b20;
            color:#f5dfb8;
            border:1px solid rgba(255,255,255,.15) !important;
        }

        .btn-yes{
            background:#d9a441;
            color:#1b1008;
        }

        .field-card.is-battle-selected{
            outline:3px solid rgba(255,210,122,.9);
            outline-offset:-3px;
            box-shadow:0 0 22px rgba(255,210,122,.72);
        }

        .field-card.has-attacked{
            filter:brightness(.42) grayscale(.25);
        }

        .monster-slot.is-attack-target{
            outline:3px solid rgba(255,70,70,.92);
            outline-offset:2px;
            animation:attackTargetPulse 1s infinite ease-in-out;
            cursor:pointer;
        }

        .monster-slot.is-move-target{
            outline:3px solid rgba(82,190,255,.95);
            outline-offset:2px;
            animation:moveTargetPulse 1s infinite ease-in-out;
            cursor:pointer;
        }

        .monster-slot.is-attacker-ready{
            outline:2px solid rgba(255,210,122,.82);
            outline-offset:2px;
            cursor:pointer;
        }

        @keyframes attackTargetPulse{
            0%{ box-shadow:0 0 0 rgba(255,70,70,0); }
            50%{ box-shadow:0 0 24px rgba(255,70,70,.7); }
            100%{ box-shadow:0 0 0 rgba(255,70,70,0); }
        }

        @keyframes moveTargetPulse{
            0%{ box-shadow:0 0 0 rgba(82,190,255,0); }
            50%{ box-shadow:0 0 24px rgba(82,190,255,.7); }
            100%{ box-shadow:0 0 0 rgba(82,190,255,0); }
        }

        .battle-vs-layer{
            position:fixed;
            inset:0;
            z-index:200;
            display:none;
            align-items:center;
            justify-content:center;
            background:rgba(0,0,0,.72);
            pointer-events:none;
        }

        .battle-vs-layer.show{
            display:flex;
        }

        .battle-vs-wrap{
            width:min(920px, 96vw);
            display:grid;
            grid-template-columns:1fr auto 1fr;
            align-items:center;
            gap:clamp(10px, 3vw, 30px);
        }

        .battle-vs-card{
            justify-self:center;
            width:clamp(110px, 26vw, 230px);
            aspect-ratio:5 / 7.12;
            border-radius:14px;
            overflow:hidden;
            background:#24170f;
            border:2px solid rgba(255,210,122,.75);
            box-shadow:0 22px 60px rgba(0,0,0,.75);
            transform:scale(.72);
            opacity:0;
            transition:transform .28s ease, opacity .28s ease, filter .45s ease;
            position:relative;
        }

        .battle-vs-layer.show .battle-vs-card{
            transform:scale(1);
            opacity:1;
        }

        .battle-vs-card img{
            width:100%;
            height:100%;
            object-fit:cover;
            display:block;
        }

        .battle-vs-text{
            color:#ffd27a;
            font-size:clamp(24px, 7vw, 64px);
            font-weight:bold;
            text-shadow:0 5px 18px rgba(0,0,0,.85);
            transform:scale(.8);
            opacity:0;
            transition:transform .24s ease .12s, opacity .24s ease .12s;
        }

        .battle-vs-layer.show .battle-vs-text{
            transform:scale(1);
            opacity:1;
        }

        .battle-vs-card.burn{
            animation:burnLose .9s ease forwards;
        }

        .battle-vs-card.burn::after{
            content:"";
            position:absolute;
            inset:-20%;
            background:
                radial-gradient(circle at 50% 85%, rgba(255,210,62,.95), transparent 22%),
                radial-gradient(circle at 35% 75%, rgba(255,86,24,.9), transparent 25%),
                radial-gradient(circle at 65% 72%, rgba(255,42,14,.85), transparent 28%);
            mix-blend-mode:screen;
            opacity:0;
            animation:fireOverlay .9s ease forwards;
        }

        @keyframes fireOverlay{
            0%{ opacity:0; transform:translateY(20%) scale(.8); }
            35%{ opacity:1; transform:translateY(0) scale(1); }
            100%{ opacity:0; transform:translateY(-20%) scale(1.25); }
        }

        @keyframes burnLose{
            0%{ filter:brightness(1); transform:scale(1); opacity:1; }
            45%{ filter:brightness(1.35) saturate(1.5); transform:scale(1.05) rotate(-1deg); opacity:1; }
            100%{ filter:brightness(.15) grayscale(1); transform:scale(.82) translateY(24px) rotate(4deg); opacity:0; }
        }


        .karma-badge{
            position:absolute;
            right:4px;
            top:4px;
            z-index:8;
            min-width:18px;
            height:18px;
            padding:0 5px;
            border-radius:999px;
            display:flex;
            align-items:center;
            justify-content:center;
            background:rgba(255,210,122,.92);
            color:#1b1008;
            font-size:11px;
            font-weight:bold;
            line-height:1;
            box-shadow:0 2px 8px rgba(0,0,0,.55);
        }


        .battle-vs-layer.direct-attack .battle-vs-text{
            font-size:clamp(22px, 6vw, 58px);
            color:#ffdf7a;
        }

        .battle-vs-layer.direct-attack #battleVsRight::after{
            content:"HP";
            position:absolute;
            inset:0;
            display:flex;
            align-items:center;
            justify-content:center;
            border-radius:inherit;
            background:radial-gradient(circle, rgba(255,210,122,.28), rgba(60,28,12,.88));
            color:#fff4d6;
            font-size:clamp(22px, 5vw, 46px);
            font-weight:bold;
            letter-spacing:1px;
            text-shadow:0 2px 8px rgba(0,0,0,.8);
        }

        .battle-vs-layer.direct-attack #battleVsRight img{
            opacity:.18;
        }

        .field-card.karma-burn{
            animation:karmaBurnLose .95s ease forwards;
        }

        .field-card.karma-burn::after{
            content:"";
            position:absolute;
            inset:-20%;
            background:
                radial-gradient(circle at 50% 85%, rgba(255,210,62,.95), transparent 22%),
                radial-gradient(circle at 35% 75%, rgba(255,86,24,.9), transparent 25%),
                radial-gradient(circle at 65% 72%, rgba(255,42,14,.85), transparent 28%);
            mix-blend-mode:screen;
            opacity:0;
            animation:karmaFireOverlay .95s ease forwards;
        }

        @keyframes karmaFireOverlay{
            0%{ opacity:0; transform:translateY(20%) scale(.8); }
            35%{ opacity:1; transform:translateY(0) scale(1); }
            100%{ opacity:0; transform:translateY(-20%) scale(1.25); }
        }

        @keyframes karmaBurnLose{
            0%{ filter:brightness(1); transform:scale(1); opacity:1; }
            45%{ filter:brightness(1.35) saturate(1.55); transform:scale(1.04) rotate(-1deg); opacity:1; }
            100%{ filter:brightness(.15) grayscale(1); transform:scale(.8) translateY(22px) rotate(4deg); opacity:0; }
        }


        .slot.deck.is-direct-attack-target{
            cursor:pointer;
            outline:3px solid rgba(255,210,122,.95);
            outline-offset:3px;
            animation:directAttackPulse 1s infinite ease-in-out;
        }

        .slot.deck.is-direct-attack-target .deck-card-icon{
            filter:brightness(1.35) saturate(1.2);
        }


        .monster-slot.front.is-direct-attack-target{
            cursor:pointer;
            outline:3px solid rgba(255,210,122,.95);
            outline-offset:3px;
            animation:directAttackPulse 1s infinite ease-in-out;
        }

        .monster-slot.front.is-direct-attack-target::after{
            content:"DIRECT";
            position:absolute;
            left:50%;
            top:50%;
            transform:translate(-50%, -50%);
            z-index:9;
            padding:3px 7px;
            border-radius:999px;
            background:rgba(255,210,122,.95);
            color:#241407;
            font-size:clamp(7px, 1.2vw, 10px);
            font-weight:bold;
            letter-spacing:.4px;
            box-shadow:0 3px 10px rgba(0,0,0,.35);
            pointer-events:none;
        }

        @keyframes directAttackPulse{
            0%{ box-shadow:0 0 0 rgba(255,210,122,0); }
            50%{ box-shadow:0 0 28px rgba(255,210,122,.8); }
            100%{ box-shadow:0 0 0 rgba(255,210,122,0); }
        }

        .image-missing img{
            display:none;
        }

        .image-missing::after{
            content:"IMG";
            position:absolute;
            inset:auto 4px 4px 4px;
            padding:3px;
            border-radius:5px;
            background:rgba(0,0,0,.5);
            color:#ffd27a;
            font-size:9px;
            text-align:center;
        }


        .slot.grave{
            cursor:pointer;
        }

        .grave-pile-card{
            position:absolute;
            width:48%;
            aspect-ratio:5 / 7.12;
            left:50%;
            top:50%;
            transform:translate(-50%, -50%);
            border-radius:clamp(3px, .7vw, 6px);
            overflow:hidden;
            background:#24170f;
            border:1px solid rgba(255,210,122,.55);
            box-shadow:0 4px 10px rgba(0,0,0,.45);
            z-index:4;
            pointer-events:none;
        }

        .grave-pile-card img{
            width:100%;
            height:100%;
            display:block;
            object-fit:cover;
        }

        .grave-pile-card:nth-last-child(1){
            transform:translate(-50%, -50%) rotate(0deg);
        }

        .grave-modal-layer{
            position:fixed;
            inset:0;
            z-index:260;
            display:none;
            background:rgba(0,0,0,.88);
            color:#f8e8c8;
            overflow:hidden;
        }

        .grave-modal-layer.show{
            display:flex;
            flex-direction:column;
        }

        .grave-modal-head{
            flex:0 0 auto;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            padding:calc(12px + env(safe-area-inset-top)) 14px 10px;
            background:rgba(20,14,9,.96);
            border-bottom:1px solid rgba(255,210,122,.28);
        }

        .grave-modal-title{
            font-size:16px;
            font-weight:bold;
            color:#ffd27a;
            line-height:1.2;
        }

        .grave-modal-sub{
            margin-top:2px;
            font-size:11px;
            color:#d9c39d;
            font-weight:normal;
        }

        .grave-modal-close{
            flex:0 0 auto;
            width:38px;
            height:38px;
            border:1px solid rgba(255,255,255,.18);
            border-radius:999px;
            background:#3a2b20;
            color:#fff4d6;
            font-size:22px;
            line-height:1;
            font-weight:bold;
            cursor:pointer;
        }

        .grave-modal-body{
            flex:1 1 auto;
            min-height:0;
            overflow:auto;
            padding:14px 14px calc(18px + env(safe-area-inset-bottom));
            -webkit-overflow-scrolling:touch;
        }

        .grave-card-grid{
            display:grid;
            grid-template-columns:repeat(auto-fill, minmax(92px, 1fr));
            gap:12px;
            max-width:860px;
            margin:0 auto;
        }

        .grave-modal-card{
            position:relative;
            aspect-ratio:5 / 7.12;
            border-radius:10px;
            overflow:hidden;
            background:#24170f;
            border:1px solid rgba(255,210,122,.42);
            box-shadow:0 10px 28px rgba(0,0,0,.45);
        }

        .grave-modal-card img{
            width:100%;
            height:100%;
            display:block;
            object-fit:cover;
        }

        .grave-modal-empty{
            max-width:420px;
            margin:34px auto 0;
            padding:20px;
            text-align:center;
            border-radius:18px;
            background:rgba(35,25,17,.8);
            border:1px solid rgba(255,210,122,.24);
            color:#d9c39d;
            line-height:1.45;
        }

        .grave-order-badge{
            position:absolute;
            left:5px;
            top:5px;
            z-index:8;
            min-width:22px;
            height:22px;
            padding:0 6px;
            border-radius:999px;
            display:flex;
            align-items:center;
            justify-content:center;
            background:rgba(0,0,0,.72);
            border:1px solid rgba(255,210,122,.44);
            color:#fff4d6;
            font-size:11px;
            font-weight:bold;
            line-height:1;
        }

        html.battle-mode,
        body.battle-mode,
        html.arena-zoom-mode,
        body.arena-zoom-mode{
            --player-hand-target:0px;
            --gap:clamp(3px, .8dvh, 10px);
            --slot-w:clamp(
                50px,
                min(
                    calc((100vw - 26px) / 4),
                    calc((100dvh - 64px) / 5.7)
                ),
                170px
            );
            --slot-h:calc(var(--slot-w) * 1.424);
        }

        body.battle-mode .duel-header,
        body.battle-mode .enemy-hand,
        body.battle-mode .player-hand,
        body.battle-mode .placement-actions,
        body.arena-zoom-mode .duel-header,
        body.arena-zoom-mode .enemy-hand,
        body.arena-zoom-mode .player-hand,
        body.arena-zoom-mode .placement-actions{
            display:none !important;
            visibility:hidden !important;
            height:0 !important;
            min-height:0 !important;
            max-height:0 !important;
            flex:0 0 0 !important;
            padding:0 !important;
            margin:0 !important;
            border:0 !important;
            overflow:hidden !important;
        }

        body.battle-mode .duel-shell,
        body.arena-zoom-mode .duel-shell{
            width:100vw !important;
            height:100vh !important;
            height:100dvh !important;
            max-width:none !important;
            padding:clamp(3px, .8dvh, 8px) !important;
            gap:0 !important;
            display:flex !important;
            flex-direction:column !important;
            justify-content:center !important;
            overflow:hidden !important;
        }

        body.battle-mode .battle-board,
        body.arena-zoom-mode .battle-board{
            flex:1 1 auto !important;
            width:100% !important;
            height:100% !important;
            min-height:0 !important;
            display:flex !important;
            flex-direction:column !important;
            justify-content:center !important;
            align-items:center !important;
            gap:var(--gap) !important;
            transform:none !important;
            filter:none !important;
            overflow:visible !important;
        }

        body.battle-mode .arena,
        body.arena-zoom-mode .arena{
            grid-template-columns:repeat(4, var(--slot-w)) !important;
            grid-auto-rows:var(--slot-h) !important;
            gap:var(--gap) !important;
        }

        body.battle-mode .slot,
        body.arena-zoom-mode .slot{
            width:var(--slot-w) !important;
            height:var(--slot-h) !important;
        }

        body.battle-mode .center-zone,
        body.arena-zoom-mode .center-zone{
            flex:0 0 auto !important;
            padding:clamp(3px, .7dvh, 7px) 6px !important;
        }

        body.battle-mode .center-status,
        body.arena-zoom-mode .center-status{
            font-size:clamp(11px, 2.3vw, 17px) !important;
            padding:0 !important;
            line-height:1 !important;
        }

        body.player-battle-mode .battle-actions.show{
            display:block !important;
        }

        body:not(.player-battle-mode) .battle-actions{
            display:none !important;
        }

        body.battle-mode .duel-message,
        body.arena-zoom-mode .duel-message{
            position:relative !important;
            left:auto !important;
            top:auto !important;
            transform:none !important;
            z-index:45 !important;
            width:min(760px, calc(100vw - 20px)) !important;
            margin-top:clamp(4px, .7dvh, 8px) !important;
        }

        @media(max-height:700px){
            :root{
                --player-hand-target: 25dvh;

                --slot-w: clamp(
                    26px,
                    min(
                        calc((100vw - 28px) / 4),
                        calc((100dvh - var(--player-hand-target) - 82px) / 8.7)
                    ),
                    94px
                );

                --enemy-card-h: clamp(32px, 6dvh, 50px);
                --player-card-h: clamp(82px, calc(var(--player-hand-target) - 12px), 170px);
            }

            .duel-header{
                display:none;
            }

            .hand-label{
                display:none;
            }

            .enemy-hand{
                padding:2px;
            }

            .player-hand{
                padding:4px;
            }

            .center-status{
                font-size:8px;
                padding:0;
            }

            .player-hand .hand-row{
                padding-bottom:1px;
            }

            .hand-card .mini-name{
                display:none;
            }

            .duel-message{
                padding:6px 10px;
            }


            .hp-layer{
                top:34px;
            }

            .hp-panel{
                min-width:78px;
                padding:5px 8px;
            }

            .placement-actions{
                bottom:calc(var(--player-hand-target) + 5px);
            }
        }

        @media(max-width:380px){
            :root{
                --slot-w: clamp(
                    25px,
                    min(
                        calc((100vw - 24px) / 4),
                        calc((100dvh - var(--player-hand-target) - 96px) / 8.8)
                    ),
                    94px
                );

                --enemy-card-h: clamp(32px, 6.1dvh, 54px);
                --player-card-h: clamp(88px, calc(var(--player-hand-target) - 22px), 178px);

                --player-card-shift: clamp(
                    -82px,
                    calc((100vw - (var(--page-pad) * 2) - (var(--player-card-w) * 5) - 6px) / 4),
                    5px
                );
            }

            .duel-shell{
                padding:3px;
            }
        }

        @media(min-width:900px) and (min-height:760px){
            :root{
                --slot-w: clamp(
                    52px,
                    min(
                        calc((100vw - 80px) / 4),
                        calc((100dvh - var(--player-hand-target) - 150px) / 8.7)
                    ),
                    94px
                );

                --enemy-card-h: clamp(50px, 6.8dvh, 74px);
                --player-card-h: clamp(150px, calc(var(--player-hand-target) - 32px), 240px);
            }
        }

        .slot.grave.is-discard-slot{
            cursor:pointer;
            outline:3px solid rgba(255,70,70,.96);
            outline-offset:3px;
            animation:discardGravePulse 1s infinite ease-in-out;
        }

        .slot.grave.is-discard-slot::after{
            content:"BUANG";
            position:absolute;
            left:50%;
            top:50%;
            transform:translate(-50%, -50%);
            z-index:12;
            padding:4px 9px;
            border-radius:999px;
            background:rgba(180,35,28,.96);
            color:#fff2e8;
            font-size:clamp(8px, 1.35vw, 12px);
            font-weight:bold;
            letter-spacing:.4px;
            box-shadow:0 4px 14px rgba(0,0,0,.42);
            pointer-events:none;
        }

        @keyframes discardGravePulse{
            0%{ box-shadow:0 0 0 rgba(255,70,70,0); }
            50%{ box-shadow:0 0 26px rgba(255,70,70,.78); }
            100%{ box-shadow:0 0 0 rgba(255,70,70,0); }
        }


        .duel-hp-row{
            width:100%;
            display:flex;
            align-items:center;
            justify-content:center;
            padding:clamp(2px, .45dvh, 5px) 4px;
            pointer-events:none;
            position:relative;
            z-index:18;
        }

        .duel-hp-row{
            flex:0 0 auto;
            width:100%;
            display:flex;
            align-items:center;
            justify-content:center;
            padding:clamp(3px, .55dvh, 6px) clamp(6px, 1.2vw, 10px);
            border-radius:12px;
            background:rgba(255,255,255,.045);
            border:1px solid rgba(255,210,122,.16);
            box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);
            position:relative;
            z-index:22;
        }

        .enemy-hp-row{
            margin-top:calc(var(--gap) * -0.15);
            margin-bottom:calc(var(--gap) * .25);
        }

        .player-hp-row{
            margin-top:calc(var(--gap) * .25);
            margin-bottom:calc(var(--gap) * -0.15);
        }

        .duel-hp-stars{
            width:100%;
            max-width:760px;
            display:flex;
            align-items:center;
            justify-content:center;
            flex-wrap:wrap;
            gap:clamp(0px, .18vw, 2px);
            line-height:1;
            font-size:clamp(10px, 2.4vw, 18px);
            letter-spacing:clamp(-3px, -.4vw, -1px);
            text-align:center;
            color:#fff4d6;
            text-shadow:0 1px 4px rgba(0,0,0,.85);
            filter:drop-shadow(0 2px 4px rgba(0,0,0,.55));
        }

        .duel-hp-stars.low-hp{
            animation:hpStarWarningPulse .9s infinite ease-in-out;
        }

        @keyframes hpStarWarningPulse{
            0%{ transform:scale(1); filter:drop-shadow(0 2px 4px rgba(0,0,0,.55)); }
            50%{ transform:scale(1.05); filter:drop-shadow(0 0 8px rgba(255,70,70,.8)); }
            100%{ transform:scale(1); filter:drop-shadow(0 2px 4px rgba(0,0,0,.55)); }
        }


        .grave-modal-body{
            overflow-y:auto !important;
            overflow-x:hidden !important;
            -webkit-overflow-scrolling:touch;
            overscroll-behavior:contain;
            touch-action:pan-y !important;
        }

        .grave-modal-layer.show{
            overflow:hidden !important;
        }

/* =========================================================
   FORCE TEST UKURAN ARENA
   Ubah hanya angka --slot-w di bawah untuk test cepat.
   Contoh: 90px, 100px, 110px, 120px.
   Section ini sengaja diletakkan paling bawah agar mengalahkan
   clamp() dan @media yang ada di atas.
   ========================================================= */
:root,
html,
body{
    --slot-w:64px !important;
    --slot-h:calc(var(--slot-w) * 1.424) !important;
}

.arena,
body.battle-mode .arena,
body.arena-zoom-mode .arena{
    grid-template-columns:repeat(4, var(--slot-w)) !important;
    grid-auto-rows:var(--slot-h) !important;
}

.slot,
body.battle-mode .slot,
body.arena-zoom-mode .slot{
    width:var(--slot-w) !important;
    height:var(--slot-h) !important;
}