:root {
    --wood-1:#f2bd75;
    --wood-2:#b66f35;
    --wood-3:#6e3618;
    --wood-4:#2d180f;
    --sand:#f7d88e;
    --sun:#fff1b2;
    --stone:#4b403a;
    --ink:#342013;
    --gold:#ffbf28;
}

.kingdom-body {
    min-height:100vh;
    margin:0;
    color:#f5e4c7;
    background:#211813;
    font-family:Georgia, "Times New Roman", serif;
}

.mobile-arena {
    position:relative;
    width:min(100%, 480px);
    min-height:100vh;
    margin:0 auto;
    overflow:hidden;
    background:
        radial-gradient(circle at 20% 15%,rgba(255,255,255,.04) 0 2px,transparent 3px),
        linear-gradient(#4d3526,#251a15 72%);
    box-shadow:0 0 45px rgba(0,0,0,.65);
}

.kingdom-topbar {
    position:relative;
    z-index:20;
    display:grid;
    grid-template-columns:42px 42px minmax(120px,1fr) auto;
    gap:7px;
    align-items:center;
    height:58px;
    padding:6px 10px;
    border-bottom:4px ridge #b27633;
    background:linear-gradient(180deg,#33231a,#1f1612);
}

.icon-button,.top-actions button,.coin-balance button {
    border:0;
    color:#ffd05b;
    background:transparent;
    font-size:24px;
    font-weight:900;
}
.profile-orb {
    display:grid;
    width:40px;height:40px;
    place-items:center;
    border:3px solid #8d5b25;
    border-radius:50%;
    color:#ddc4ff;
    background:radial-gradient(circle,#493062,#171423 70%);
    box-shadow:0 0 0 2px #20140c;
    font-size:25px;
}
.coin-balance {
    display:flex;
    align-items:center;
    gap:7px;
    min-width:0;
    color:#fff2bd;
    font-family:system-ui,sans-serif;
}
.coin-balance strong { overflow:hidden;text-overflow:ellipsis; }
.coin {
    display:grid;
    width:28px;height:28px;
    place-items:center;
    flex:none;
    border:2px solid #ffe16c;
    border-radius:50%;
    color:#7a4200;
    background:radial-gradient(circle at 35% 30%,#fff589,#ffc400 55%,#a75b00);
    font-size:9px;font-weight:900;
    box-shadow:0 2px 4px #000;
}
.coin-balance button {
    display:grid;width:22px;height:22px;place-items:center;
    border:2px solid #9a642f;border-radius:3px;
    color:#392113;background:#dca55e;font-size:18px;line-height:1;
}
.top-actions { display:flex;gap:4px; }
.top-actions button { color:#cbbfb0;font-size:21px; }

.kingdom-lobby {
    position:relative;
    min-height:calc(100vh - 128px);
    padding:230px 19px 115px;
    overflow:hidden;
    background:linear-gradient(180deg,#e9b75f 0 38%,#7b4a2c 38% 55%,#211914 73%);
}
.kingdom-lobby::after {
    content:"";position:absolute;inset:55% 0 0;z-index:0;opacity:.28;
    background:radial-gradient(circle at 15px 15px,transparent 0 11px,#6c4934 12px 13px,transparent 14px) 0 0/42px 42px;
}
.sun-disc {
    position:absolute;z-index:0;top:18px;left:50%;
    width:270px;height:270px;
    transform:translateX(-50%);
    border-radius:50%;
    background:radial-gradient(circle,#fff6c9 0 55%,#ffe79d 72%,rgba(255,226,139,.25) 73%);
    box-shadow:0 0 60px #fff1b7;
}
.mountain { position:absolute;z-index:1;top:125px;width:240px;height:230px;background:#b77b4b; }
.mountain-left { left:-115px;clip-path:polygon(0 100%,35% 30%,55% 52%,72% 20%,100% 100%); }
.mountain-right { right:-120px;clip-path:polygon(0 100%,22% 26%,50% 56%,72% 15%,100% 100%);background:#a66c43; }

.castle-scene { position:absolute;z-index:2;top:65px;left:16px;right:16px;height:260px; }
.castle-emblem {
    position:absolute;right:4px;top:-20px;
    display:flex;align-items:end;gap:1px;
    color:#2f65bd;font-size:31px;
    filter:drop-shadow(0 4px 2px rgba(0,0,0,.45));
}
.castle-emblem b { color:#ffbd16;font-size:44px; }
.tower {
    position:absolute;bottom:26px;display:grid;align-content:start;justify-items:center;
    width:70px;height:145px;
    border:3px solid #9f6837;border-bottom:0;
    background:linear-gradient(90deg,#d19b60,#fff0c0 45%,#c58b51);
    box-shadow:inset 0 0 0 2px #fff1c3,0 8px 7px rgba(0,0,0,.35);
}
.tower i { width:calc(100% + 14px);height:24px;margin-top:-20px;background:#f9dfaa;clip-path:polygon(0 0,20% 0,20% 40%,40% 40%,40% 0,60% 0,60% 40%,80% 40%,80% 0,100% 0,100% 100%,0 100%); }
.tower strong { margin-top:25px;color:#8d5a39;font-size:53px;text-shadow:1px 1px #fff; }
.tower-left { left:12px;height:122px;transform:skewY(-5deg); }
.tower-mid-left { left:86px;width:60px;height:154px; }
.tower-center { left:50%;width:78px;height:185px;transform:translateX(-50%); }
.tower-mid-right { right:86px;width:60px;height:150px; }
.tower-right { right:12px;height:120px;transform:skewY(5deg); }
.castle-base { position:absolute;left:0;right:0;bottom:0;height:48px;border:5px ridge #ad7135;border-radius:22px 22px 5px 5px;background:linear-gradient(#e8b66c,#7c421e); }

.lobby-controls { position:relative;z-index:6;display:grid;gap:8px; }
.wood-button,.round-wood,.dialog-button {
    position:relative;
    border:4px ridge #b87938;
    color:#4b2a17;
    background:linear-gradient(#efc382,#bc7538 52%,#8f4d25);
    box-shadow:inset 0 0 0 3px #f2c987,inset 0 -8px 10px rgba(72,31,10,.22),0 5px 0 #3b2115,0 8px 9px rgba(0,0,0,.45);
    font:700 18px Georgia,serif;
    text-shadow:0 1px #f8d69d;
    cursor:pointer;
}
.wood-button { width:min(82%,350px);min-height:53px;margin:0 auto;border-radius:25px; }
.wood-button::before { content:"";position:absolute;inset:5px;border:2px solid #70421f;border-radius:19px;pointer-events:none; }
.wood-button span { margin-right:6px; }
.primary-action { transform:scale(1.04); }
.side-actions { display:grid;grid-template-columns:56px 1fr 56px;gap:9px;align-items:center;margin-top:8px; }
.side-actions .wood-button { width:100%; }
.round-wood { width:55px;height:55px;border-radius:50%;font-size:21px; }
.wood-button:active,.round-wood:active,.dialog-button:active { transform:translateY(3px);box-shadow:inset 0 0 0 3px #efc380,0 2px 0 #3b2115; }

.tournament-zone { position:relative;z-index:4;display:grid;place-items:center;margin-top:24px; }
.tournament-cup { position:relative;border:0;color:#ffe5a1;background:transparent;text-align:center;cursor:pointer; }
.tournament-cup .cup { display:block;font-size:69px;filter:drop-shadow(0 6px 2px #2b1105); }
.tournament-cup strong,.tournament-cup small { display:block;text-shadow:0 2px #000; }
.tournament-cup strong { font-size:17px; }
.tournament-cup small { color:#d89e42; }
.alert-badge {
    position:absolute;z-index:2;top:0;left:18px;display:grid;width:24px;height:24px;place-items:center;
    border:2px solid white;border-radius:50%;color:white;background:#e20d18;font:800 14px system-ui;
}

.kingdom-bottom-nav {
    position:absolute;z-index:30;right:0;bottom:0;left:0;
    display:grid;grid-template-columns:repeat(5,1fr);
    height:76px;border-top:4px ridge #9b642e;background:linear-gradient(#3b291f,#201712);
}
.kingdom-bottom-nav button {
    position:relative;border:0;color:#cda873;background:transparent;font-family:Georgia,serif;
}
.kingdom-bottom-nav span { display:block;font-size:27px;filter:sepia(.65); }
.kingdom-bottom-nav small { display:block;font-size:11px; }
.kingdom-bottom-nav .active { color:#ffd372;background:rgba(255,190,60,.08); }
.kingdom-bottom-nav b {
    position:absolute;top:4px;right:11px;display:grid;width:20px;height:20px;place-items:center;border-radius:50%;color:white;background:#e20d18;font:700 11px system-ui;
}

/* Dialogs */
.arena-modal[hidden] { display:none; }
.arena-modal { position:fixed;z-index:1000;inset:0;display:grid;place-items:center;padding:16px; }
.modal-backdrop { position:absolute;inset:0;background:rgba(12,8,6,.78);backdrop-filter:blur(2px); }
.stone-dialog {
    position:relative;z-index:1;width:min(100%,410px);max-height:90vh;padding:50px 16px 18px;overflow:auto;
    border:5px ridge #7f674f;border-radius:10px;color:#e8d8c4;
    background:linear-gradient(135deg,#51443b,#2b2521);
    box-shadow:0 20px 50px #000,inset 0 0 25px rgba(0,0,0,.6);
}
.dialog-title {
    position:absolute;top:9px;left:48px;right:48px;padding:8px;border:3px ridge #6c5745;border-radius:7px;
    color:#d9c7b8;background:#26211f;text-align:center;font-size:18px;font-weight:700;
}
.dialog-close {
    position:absolute;z-index:2;top:7px;right:7px;width:38px;height:38px;border:4px ridge #9a7e5c;border-radius:50%;
    color:#3b2a20;background:#c5ad8e;font-size:25px;font-weight:900;line-height:1;
}
.invite-stats { display:flex;flex-wrap:wrap;gap:7px 13px;margin-bottom:12px;color:#ffe5a1;font:13px system-ui; }
.challenger-card { display:grid;justify-items:center;padding:16px;border:1px solid #5f5148;background:rgba(0,0,0,.22); }
.challenger-avatar { display:grid;width:78px;height:78px;place-items:center;border:4px solid #d39737;border-radius:50%;background:#2d1d43;font-size:48px; }
.challenger-card small { color:#b8a593; }
.invite-link-label { display:block;margin:12px 0 5px;color:#bca995;font-size:12px; }
.invite-link { display:grid;grid-template-columns:1fr auto; }
.invite-link input { min-width:0;padding:10px;border:1px solid #665444;color:#b8aa9f;background:#211c19; }
.invite-link button { border:0;color:#2d1e14;background:#d49a55;font-weight:700; }
.dialog-actions { display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px; }
.dialog-button { display:grid;min-height:43px;place-items:center;border-width:2px;border-radius:5px;text-decoration:none;font-size:15px; }
.dialog-button.play { background:linear-gradient(#f0bf77,#9e5d2d); }
.dialog-copy { margin:10px 0 0;color:#d0c0b2;line-height:1.65; }
.setting-block { margin-bottom:16px; }
.setting-block h3 { margin:5px 0 8px;color:#bda99b;text-align:center;text-transform:uppercase;font-size:16px; }
.step-control { display:grid;grid-template-columns:48px 1fr 48px;gap:10px;align-items:center; }
.step-control>div { display:grid;padding:10px;border:3px ridge #746254;background:#2a2522;text-align:center; }
.step-control small { color:#ad9e93; }
.step-control strong { color:#f5d48d; }
.step-control em { color:#bfaa98;font-size:12px; }
.step-control button,.duration-row button { width:44px;height:38px;border:3px ridge #a88d73;color:#493425;background:#c2a78d;font-size:24px;font-weight:900; }
.duration-row { display:grid;grid-template-columns:45px 1fr 45px;gap:8px;align-items:center;margin:7px 0; }
.duration-row strong { padding:9px;border:3px ridge #66564a;background:#221e1c;text-align:center;font-size:14px; }
.create-table-button { width:150px;margin:8px auto 0; }
.room-grid { display:grid;grid-template-columns:1fr 1fr;gap:7px; }
.room-card {
    display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto;padding:8px;border:2px solid transparent;border-radius:4px;
    color:white;background:#2e2925;text-align:left;
}
.room-card:hover,.room-card:focus { border-color:#bd2f2f; }
.room-card span { grid-row:1/3;font-size:31px; }
.room-card strong { font-size:13px; }
.room-card small { color:#d4ad74;font:11px system-ui; }

@media (min-width:700px) {
    .kingdom-body { padding:20px 0; }
    .mobile-arena { min-height:850px;border:6px ridge #795022;border-radius:12px; }
}
@media (max-width:380px) {
    .kingdom-lobby { padding-right:12px;padding-left:12px; }
    .wood-button { width:88%;font-size:16px; }
    .room-grid { grid-template-columns:1fr; }
}


/* Medieval battle board */
.battle-arena { min-height:100vh;background:#241914; }
.battle-topbar { grid-template-columns:42px 1fr auto auto; }
.battle-topbar .back-button { display:grid;place-items:center;text-decoration:none; }
.match-label { color:#d7b47b;font:700 12px system-ui;letter-spacing:.14em; }
.battle-main {
    min-height:calc(100vh - 58px);
    padding:10px 10px 28px;
    background:
        radial-gradient(circle at 16px 16px,transparent 0 10px,rgba(117,75,49,.22) 11px 12px,transparent 13px) 0 0/45px 45px,
        linear-gradient(#33241c,#211713);
}
.versus-card {
    display:grid;grid-template-columns:1fr 78px 1fr;align-items:center;
    padding:8px;border:4px ridge #7d461e;border-radius:10px;
    color:#f4dfc0;background:linear-gradient(#8f3113,#4f1e12);
    box-shadow:inset 0 0 18px rgba(0,0,0,.55),0 4px 8px #000;
}
.fighter { display:grid;justify-items:center;min-width:0;text-align:center; }
.fighter-avatar {
    display:grid;width:62px;height:62px;place-items:center;
    border:4px solid #ce8e28;border-radius:50%;
    background:radial-gradient(circle,#51336e,#171523 70%);
    font-size:42px;box-shadow:0 3px 5px #000;
}
.black-fighter .fighter-avatar { color:#b9d3dd;background:radial-gradient(circle,#365169,#0c1722 72%); }
.fighter strong { max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px; }
.fighter small { color:#d5aa78;font:10px system-ui; }
.fighter b { margin-top:3px;padding:2px 8px;border-radius:4px;color:#ffdb61;background:#351b11;font:700 13px system-ui; }
.fighter b.clock-low {
    color:#fff;
    background:#9d1f18;
    box-shadow:0 0 0 2px rgba(255,99,76,.35),0 0 14px rgba(255,54,35,.55);
    animation:clock-danger-pulse .9s ease-in-out infinite alternate;
}
@keyframes clock-danger-pulse { to { transform:scale(1.05);filter:brightness(1.2); } }
.stake-panel { display:grid;justify-items:center;color:#ffe178;text-align:center;font-family:system-ui; }
.stake-panel span { font-size:11px; }
.stake-panel strong { color:#fff0c5;font:900 25px Georgia; }
.stake-panel small { color:#d3a46e;font-size:9px; }
.battle-status { padding:8px 3px 5px;text-align:center; }
.battle-status small { color:#bb8c55;font:700 9px system-ui;letter-spacing:.16em; }
.battle-status h1 { margin:1px 0;color:#f3dcad;font-size:17px; }
.battle-status p { margin:0;color:#9f8b78;font:11px system-ui; }
.hidden-player { display:none; }

.royal-board-frame {
    position:relative;width:100%;aspect-ratio:1;
    padding:10px;border:5px ridge #8c4b20;border-radius:5px;
    background:linear-gradient(135deg,#4c210f,#b36a2c 45%,#3a190d);
    box-shadow:inset 0 0 0 3px #251008,0 12px 18px rgba(0,0,0,.58);
}
.royal-board-frame .chessboard { border:2px solid #4a1d0b;box-shadow:inset 0 0 12px rgba(0,0,0,.45); }
.royal-board-frame .square.light { background:linear-gradient(135deg,#f2dfa1,#d8ba6a); }
.royal-board-frame .square.dark { background:linear-gradient(135deg,#a95324,#7e3218); }
.board-coins {
    position:absolute;z-index:9;top:-14px;left:50%;display:flex;align-items:center;gap:6px;
    transform:translateX(-50%);padding:1px 9px;border:2px ridge #a8662e;border-radius:10px;
    color:#ecd49c;background:#351c11;font-size:12px;
}
.board-coins b { color:#ffcb36;font:800 9px system-ui; }

.battle-tools { display:grid;grid-template-columns:repeat(4,58px);gap:10px;justify-content:center;margin-top:18px; }
.battle-tools .round-wood { color:#4b2915;font-size:23px; }
.battle-tools .danger-tool { color:#5c170e;background:linear-gradient(#e8a567,#a3452f); }
.battle-history { margin-top:15px;padding:12px;border:4px ridge #725038;border-radius:8px;background:#2b2420; }
.battle-history .move-history { max-height:150px; }

@media (max-width:380px) {
    .versus-card { grid-template-columns:1fr 65px 1fr; }
    .fighter-avatar { width:52px;height:52px;font-size:35px; }
    .royal-board-frame { padding:7px; }
    .battle-tools { grid-template-columns:repeat(4,51px);gap:7px; }
    .battle-tools .round-wood { width:51px;height:51px; }
}


/* Native mobile viewport: keep every primary control visible without page scrolling. */
@media (max-width: 699.98px) {
    html, body.kingdom-body {
        width:100%;
        height:100%;
        min-height:0;
        overflow:hidden;
        overscroll-behavior:none;
    }
    .mobile-arena {
        width:100%;
        height:100vh;
        height:100dvh;
        min-height:0;
        overflow:hidden;
    }
    .kingdom-topbar {
        position:absolute;
        top:0;right:0;left:0;
        height:54px;
    }
    .kingdom-lobby {
        position:absolute;
        top:54px;right:0;bottom:66px;left:0;
        min-height:0;
        padding:198px 12px 6px;
        overflow:hidden;
    }
    .castle-scene {
        top:24px;
        height:220px;
        transform:scale(.78);
        transform-origin:top center;
    }
    .sun-disc {
        top:8px;
        width:220px;
        height:220px;
    }
    .mountain { top:90px;height:180px; }
    .lobby-controls { gap:4px; }
    .wood-button {
        min-height:44px;
        border-width:3px;
        font-size:16px;
    }
    .wood-button::before { inset:4px;border-width:1px; }
    .side-actions {
        grid-template-columns:48px 1fr 48px;
        gap:7px;
        margin-top:3px;
    }
    .round-wood { width:48px;height:48px;border-width:3px;font-size:18px; }
    .tournament-zone { margin-top:8px; }
    .tournament-cup .cup { font-size:49px; }
    .tournament-cup strong { font-size:14px; }
    .tournament-cup small { font-size:10px; }
    .alert-badge { left:13px;width:20px;height:20px;font-size:11px; }
    .kingdom-bottom-nav {
        height:66px;
    }
    .kingdom-bottom-nav span { font-size:23px; }
    .kingdom-bottom-nav small { font-size:9px; }

    .battle-arena { height:100vh;height:100dvh; }
    .battle-main {
        position:absolute;
        top:54px;right:0;bottom:0;left:0;
        display:flex;
        flex-direction:column;
        min-height:0;
        padding:6px 7px;
        overflow:hidden;
    }
    .versus-card {
        flex:0 0 auto;
        min-height:91px;
        padding:4px 7px;
    }
    .fighter-avatar { width:47px;height:47px;border-width:3px;font-size:31px; }
    .fighter strong { font-size:11px; }
    .fighter small { font-size:8px; }
    .fighter b { margin-top:1px;font-size:11px; }
    .stake-panel strong { font-size:20px; }
    .battle-status { flex:0 0 auto;padding:3px 2px; }
    .battle-status h1 { margin:0;font-size:14px; }
    .battle-status p { overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:9px; }
    .royal-board-frame {
        flex:0 1 auto;
        width:min(100%, calc(100dvh - 232px));
        max-width:100%;
        min-width:0;
        margin:0 auto;
        padding:6px;
        border-width:4px;
    }
    .battle-tools {
        flex:0 0 auto;
        grid-template-columns:repeat(4,45px);
        gap:8px;
        margin-top:8px;
    }
    .battle-tools .round-wood { width:45px;height:45px; }
    .battle-history {
        position:absolute;
        z-index:20;
        right:10px;
        bottom:10px;
        left:10px;
        max-height:38vh;
        overflow:auto;
        margin:0;
    }
}

@media (max-width:699.98px) and (max-height:700px) {
    .kingdom-topbar { height:48px;padding-top:3px;padding-bottom:3px; }
    .kingdom-lobby { top:48px;bottom:58px;padding-top:171px; }
    .castle-scene { top:14px;transform:scale(.66); }
    .sun-disc { width:190px;height:190px; }
    .mountain { top:75px;height:150px; }
    .wood-button { min-height:39px;font-size:14px; }
    .side-actions { grid-template-columns:42px 1fr 42px;margin-top:1px; }
    .round-wood { width:42px;height:42px;font-size:16px; }
    .tournament-zone { margin-top:4px; }
    .tournament-cup .cup { font-size:39px; }
    .tournament-cup strong { font-size:12px; }
    .tournament-cup small { display:none; }
    .kingdom-bottom-nav { height:58px; }
    .kingdom-bottom-nav span { font-size:19px; }
    .kingdom-bottom-nav small { font-size:8px; }

    .battle-main { top:48px;padding:4px 6px; }
    .versus-card { min-height:78px; }
    .fighter-avatar { width:40px;height:40px;font-size:27px; }
    .battle-status { padding:1px; }
    .royal-board-frame { width:min(100%, calc(100dvh - 196px));padding:4px; }
    .battle-tools { grid-template-columns:repeat(4,38px);gap:7px;margin-top:5px; }
    .battle-tools .round-wood { width:38px;height:38px;font-size:17px; }
}

@media (max-width:360px) {
    .kingdom-lobby { padding-right:8px;padding-left:8px; }
    .wood-button { width:91%; }
}


/* Premium lobby finish and animated tournament arena */
.mobile-arena {
    border-right:2px solid #6f431d;
    border-left:2px solid #6f431d;
    background:
        radial-gradient(circle at 50% 24%,rgba(255,213,112,.08),transparent 36%),
        linear-gradient(#4b2d1e,#1b120f 76%);
    box-shadow:
        0 0 45px rgba(0,0,0,.7),
        inset 0 0 0 1px rgba(255,207,102,.2);
}
.kingdom-topbar {
    border-bottom-color:#c38a3c;
    background:
        linear-gradient(90deg,transparent,rgba(255,205,102,.08),transparent),
        linear-gradient(180deg,#3d281c,#1c120e);
    box-shadow:inset 0 1px rgba(255,220,148,.18),0 4px 12px rgba(0,0,0,.4);
}
.kingdom-lobby {
    box-shadow:inset 0 0 45px rgba(41,15,5,.24);
}
.castle-scene {
    filter:drop-shadow(0 9px 7px rgba(52,22,8,.34));
}
.tower {
    border-color:#b47a42;
    background:
        linear-gradient(90deg,rgba(98,51,22,.12),transparent 25% 70%,rgba(98,51,22,.16)),
        repeating-linear-gradient(0deg,transparent 0 25px,rgba(141,93,52,.12) 26px 27px),
        linear-gradient(90deg,#d8a86c,#fff0bd 45%,#c88f51);
}
.castle-base {
    border-color:#c88b43;
    background:linear-gradient(#efc57e,#9b5728 62%,#5b2c18);
    box-shadow:inset 0 2px rgba(255,240,191,.6),0 8px 12px rgba(54,20,7,.38);
}
.wood-button,.round-wood {
    border-color:#c58a48;
    background:
        linear-gradient(90deg,rgba(67,29,10,.14),transparent 18% 82%,rgba(67,29,10,.16)),
        linear-gradient(#f1c783,#bb7337 53%,#84431f);
    box-shadow:
        inset 0 0 0 2px #f6d393,
        inset 0 -8px 10px rgba(61,25,8,.26),
        0 4px 0 #321b11,
        0 8px 12px rgba(0,0,0,.4);
}
.wood-button::after {
    content:"";
    position:absolute;
    top:8px;right:15%;left:15%;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,240,186,.7),transparent);
    pointer-events:none;
}

/* Compact magical tournament centerpiece */
.tournament-zone {
    min-height:154px;
    margin-top:10px;
}
.premium-tournament {
    position:relative;
    display:grid;
    width:168px;
    height:154px;
    margin:0 auto;
    padding:0;
    place-items:center;
    isolation:isolate;
    border:0;
    color:#ffeab2;
    background:transparent;
    overflow:visible;
}
.tournament-rune {
    position:absolute;
    z-index:-3;
    width:136px;
    height:136px;
    border:1px solid rgba(207,145,57,.36);
    border-radius:50%;
    background:
        repeating-conic-gradient(from 8deg,rgba(230,165,67,.22) 0 1deg,transparent 1deg 18deg),
        radial-gradient(circle,rgba(154,90,30,.15) 0 36%,transparent 37% 50%,rgba(194,128,52,.12) 51% 52%,transparent 53%);
    box-shadow:inset 0 0 26px rgba(230,145,40,.12),0 0 24px rgba(255,131,18,.08);
    animation:rune-breathe 3.4s ease-in-out infinite;
}
.flame-orbit {
    position:absolute;
    z-index:-2;
    width:126px;
    height:126px;
    border-radius:50%;
    pointer-events:none;
    will-change:transform,filter;
}
.flame-orbit::before,
.flame-orbit::after {
    content:"";
    position:absolute;
    border-radius:50%;
}
.flame-orbit::before {
    inset:4px;
    border:4px solid transparent;
}
.flame-orbit::after {
    width:13px;
    height:28px;
    filter:blur(.25px);
}
.flame-orbit-fire {
    filter:drop-shadow(0 0 5px #ff7300);
    animation:flame-orbit-clockwise 4.8s linear infinite;
}
.flame-orbit-fire::before {
    border-top-color:#ffb21c;
    border-left-color:#ff6412;
    box-shadow:inset 10px 4px 12px rgba(255,64,0,.14);
}
.flame-orbit-fire::after {
    top:2px;
    left:21px;
    transform:rotate(-32deg);
    background:radial-gradient(ellipse at 50% 80%,#fff3a2 0 13%,#ff9d0b 35%,#ff3c0b 68%,transparent 72%);
}
.flame-orbit-arcane {
    width:116px;
    height:116px;
    filter:drop-shadow(0 0 5px #199cff);
    animation:flame-orbit-counter 3.9s linear infinite;
}
.flame-orbit-arcane::before {
    inset:5px;
    border-right-color:#22a8ff;
    border-bottom-color:#385eff;
    box-shadow:inset -8px -4px 12px rgba(35,101,255,.14);
}
.flame-orbit-arcane::after {
    right:15px;
    bottom:1px;
    transform:rotate(42deg);
    background:radial-gradient(ellipse at 50% 80%,#d8fbff 0 13%,#22b9ff 36%,#294cff 68%,transparent 72%);
}
.tournament-cup-art {
    position:absolute;
    z-index:2;
    top:24px;
    width:78px;
    height:78px;
    object-fit:contain;
    pointer-events:none;
    user-select:none;
    filter:drop-shadow(0 6px 3px rgba(25,9,2,.65)) drop-shadow(0 0 9px rgba(255,183,42,.36));
    animation:trophy-float 2.8s ease-in-out infinite;
}
.premium-tournament .alert-badge {
    z-index:6;
    top:17px;
    left:50%;
    width:21px;
    height:21px;
    transform:translateX(-50%);
    animation:badge-pulse 1.8s ease-in-out infinite;
}
.tournament-title {
    position:absolute;
    z-index:5;
    right:16px;
    bottom:5px;
    left:16px;
    padding:4px 8px 3px;
    border:2px ridge #aa6f2d;
    border-radius:8px;
    color:#ffe8a3;
    background:linear-gradient(180deg,rgba(66,39,24,.96),rgba(29,19,15,.98));
    box-shadow:inset 0 0 0 1px rgba(250,203,105,.2),0 4px 8px rgba(0,0,0,.4);
}
.tournament-title strong {
    font-size:14px;
    line-height:1.05;
}
.tournament-title small {
    margin-top:1px;
    color:#d9a449;
    font:9px system-ui,sans-serif;
}
.ember-field {
    position:absolute;
    z-index:-1;
    inset:10px;
    pointer-events:none;
}
.ember-field i {
    position:absolute;
    width:3px;
    height:3px;
    border-radius:50%;
    background:#ffc13b;
    box-shadow:0 0 6px #ff7a00;
    opacity:0;
    animation:ember-rise 2.4s ease-out infinite;
}
.ember-field i:nth-child(1){left:18%;bottom:20%;animation-delay:.1s}
.ember-field i:nth-child(2){left:31%;bottom:11%;animation-delay:.8s}
.ember-field i:nth-child(3){left:44%;bottom:18%;animation-delay:1.5s}
.ember-field i:nth-child(4){right:38%;bottom:12%;animation-delay:.45s;background:#69d9ff;box-shadow:0 0 6px #168cff}
.ember-field i:nth-child(5){right:24%;bottom:20%;animation-delay:1.2s;background:#69d9ff;box-shadow:0 0 6px #168cff}
.ember-field i:nth-child(6){right:14%;bottom:14%;animation-delay:1.9s}

@keyframes flame-orbit-clockwise {
    to { transform:rotate(360deg); }
}
@keyframes flame-orbit-counter {
    to { transform:rotate(-360deg); }
}
@keyframes rune-breathe {
    0%,100% { opacity:.55;transform:scale(.96) rotate(0); }
    50% { opacity:1;transform:scale(1.02) rotate(5deg); }
}
@keyframes trophy-float {
    0%,100% { transform:translateY(1px) scale(.98); }
    50% { transform:translateY(-4px) scale(1.015); }
}
@keyframes badge-pulse {
    0%,100% { transform:translateX(-50%) scale(1);box-shadow:0 0 0 0 rgba(255,42,42,.4); }
    50% { transform:translateX(-50%) scale(1.09);box-shadow:0 0 0 6px rgba(255,42,42,0); }
}
@keyframes ember-rise {
    0% { opacity:0;transform:translate(0,0) scale(.7); }
    25% { opacity:1; }
    100% { opacity:0;transform:translate(7px,-46px) scale(.15); }
}

@media (prefers-reduced-motion:reduce) {
    .flame-orbit,.tournament-rune,.tournament-cup-art,
    .premium-tournament .alert-badge,.ember-field i {
        animation:none !important;
    }
}

@media (max-width:699.98px) {
    .tournament-zone {
        min-height:142px;
        margin-top:3px;
    }
    .premium-tournament {
        width:154px;
        height:140px;
    }
    .tournament-rune { width:123px;height:123px; }
    .flame-orbit { width:114px;height:114px; }
    .flame-orbit-arcane { width:105px;height:105px; }
    .tournament-cup-art { top:23px;width:70px;height:70px; }
    .tournament-title { right:14px;bottom:3px;left:14px; }
}

@media (max-width:699.98px) and (max-height:700px) {
    .tournament-zone {
        min-height:101px;
        margin-top:0;
    }
    .premium-tournament {
        width:120px;
        height:99px;
    }
    .tournament-rune { width:87px;height:87px; }
    .flame-orbit { width:82px;height:82px; }
    .flame-orbit-arcane { width:74px;height:74px; }
    .tournament-cup-art { top:13px;width:51px;height:51px; }
    .premium-tournament .alert-badge { top:8px;width:17px;height:17px;font-size:9px; }
    .tournament-title { right:6px;bottom:0;left:6px;padding:2px 5px; }
    .tournament-title strong { font-size:11px; }
    .tournament-title small { display:block;font-size:7px; }
}


/* Premium 3D castle and carved lobby controls */
.premium-castle-scene {
    top:18px;
    right:8px;
    left:8px;
    height:226px;
    display:grid;
    place-items:end center;
    filter:none;
    pointer-events:none;
}
.castle-halo {
    position:absolute;
    z-index:-1;
    top:-6px;
    left:50%;
    width:245px;
    height:245px;
    transform:translateX(-50%);
    border-radius:50%;
    background:radial-gradient(circle,#fff6c6 0 37%,rgba(255,220,127,.78) 56%,rgba(255,191,65,.13) 72%,transparent 73%);
    box-shadow:0 0 42px rgba(255,224,145,.72);
}
.premium-castle-art {
    display:block;
    width:100%;
    max-width:430px;
    height:auto;
    margin:auto auto 0;
    pointer-events:none;
    user-select:none;
    -webkit-user-drag:none;
    filter:drop-shadow(0 10px 5px rgba(49,19,7,.42)) drop-shadow(0 1px 1px rgba(255,231,172,.34));
}

.lobby-controls {
    gap:10px;
}
.lobby-controls > .wood-button {
    width:min(88%,370px);
}
.wood-button {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    overflow:hidden;
    border:3px solid #7c431e;
    outline:2px solid #e5ad5c;
    outline-offset:-6px;
    color:#f7d99a;
    background:
        linear-gradient(100deg,transparent 0 14%,rgba(255,225,163,.12) 28%,transparent 42% 100%),
        repeating-linear-gradient(4deg,rgba(70,27,9,.08) 0 2px,transparent 2px 8px),
        linear-gradient(180deg,#8d4f28 0%,#c27b3d 18%,#8e4b24 48%,#5d2c18 76%,#8a4a26 100%);
    box-shadow:
        inset 0 2px 0 rgba(255,228,171,.75),
        inset 0 -6px 8px rgba(52,18,5,.42),
        inset 0 0 0 1px #3d1c10,
        0 4px 0 #3b1b10,
        0 7px 11px rgba(22,8,3,.55);
    text-shadow:
        0 1px 0 #2a130a,
        0 2px 2px rgba(25,8,2,.8);
}
.wood-button::before {
    inset:4px;
    border:1px solid rgba(255,210,127,.65);
    box-shadow:inset 0 0 0 2px rgba(58,25,11,.55);
}
.wood-button::after {
    top:7px;
    right:13%;
    left:13%;
    height:2px;
    background:linear-gradient(90deg,transparent,rgba(255,236,190,.8),transparent);
}
.control-icon {
    display:inline-grid;
    min-width:18px;
    margin:0 !important;
    place-items:center;
    color:#f4c56b;
    font-size:.82em;
    filter:drop-shadow(0 2px 1px #32160a);
}
.control-label {
    position:relative;
    z-index:1;
    letter-spacing:.01em;
}
.primary-action {
    transform:scale(1.035);
    background:
        linear-gradient(100deg,transparent 0 12%,rgba(255,229,169,.18) 28%,transparent 43% 100%),
        repeating-linear-gradient(3deg,rgba(70,27,9,.08) 0 2px,transparent 2px 8px),
        linear-gradient(180deg,#a35d2e,#d08a47 20%,#995329 53%,#633019 80%,#985229);
}
.round-wood {
    overflow:hidden;
    border:3px solid #70401f;
    outline:2px solid #e2ab60;
    outline-offset:-6px;
    color:#f2c777;
    background:
        radial-gradient(circle at 35% 25%,rgba(255,237,190,.34),transparent 28%),
        repeating-radial-gradient(circle at 50% 50%,transparent 0 8px,rgba(67,26,9,.08) 9px 10px),
        linear-gradient(145deg,#b66d35,#713719 65%,#4a2213);
    box-shadow:
        inset 0 0 0 2px #3b1a0e,
        inset 0 2px 0 rgba(255,224,159,.65),
        0 4px 0 #30150c,
        0 7px 10px rgba(22,7,2,.52);
    text-shadow:0 2px 1px #311408;
}
.wood-button:hover,.round-wood:hover {
    filter:brightness(1.08) saturate(1.04);
}
.wood-button:active,.round-wood:active {
    transform:translateY(3px);
    box-shadow:
        inset 0 3px 8px rgba(45,15,5,.42),
        inset 0 0 0 2px #3b1a0e,
        0 1px 0 #30150c;
}
.primary-action:active {
    transform:translateY(3px) scale(1.035);
}

@media (max-width:699.98px) {
    .premium-castle-scene {
        top:5px;
        right:7px;
        left:7px;
        height:205px;
        transform:none;
    }
    .castle-halo {
        top:-5px;
        width:218px;
        height:218px;
    }
    .premium-castle-art {
        width:100%;
        max-width:390px;
    }
    .lobby-controls {
        gap:6px;
    }
    .lobby-controls > .wood-button {
        width:88%;
    }
    .wood-button {
        min-height:45px;
        font-size:16px;
    }
    .side-actions {
        grid-template-columns:48px 1fr 48px;
    }
}

@media (max-width:699.98px) and (max-height:700px) {
    .premium-castle-scene {
        top:0;
        right:14px;
        left:14px;
        height:181px;
        transform:none;
    }
    .castle-halo {
        width:188px;
        height:188px;
    }
    .premium-castle-art {
        width:94%;
    }
    .lobby-controls {
        gap:3px;
    }
    .wood-button {
        min-height:39px;
        font-size:14px;
    }
    .lobby-controls > .wood-button {
        width:87%;
    }
    .side-actions {
        grid-template-columns:42px 1fr 42px;
        gap:6px;
    }
}


/* Live captured-piece trays */
.fighter-capture-row {
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:4px;
    align-items:center;
    width:100%;
    min-height:20px;
    margin-top:3px;
    padding:2px 4px;
    border:1px solid rgba(218,154,65,.38);
    border-radius:5px;
    background:rgba(24,10,6,.5);
    box-shadow:inset 0 1px 4px rgba(0,0,0,.45);
}
.fighter-capture-row > span:first-child {
    color:#d9a668;
    font:700 7px system-ui,sans-serif;
    letter-spacing:.04em;
    text-transform:uppercase;
}
.captured-piece-tray {
    display:flex;
    min-width:0;
    min-height:18px;
    align-items:center;
    justify-content:flex-end;
    gap:2px;
}
.captured-piece-group {
    position:relative;
    display:inline-flex;
    min-width:19px;
    height:19px;
    align-items:flex-end;
    justify-content:center;
    flex:0 0 auto;
}
.captured-piece-image {
    display:block;
    width:18px;
    height:18px;
    object-fit:contain;
    pointer-events:none;
    user-select:none;
    -webkit-user-drag:none;
    filter:drop-shadow(0 1px 1px rgba(0,0,0,.7));
}
.captured-piece-group b {
    position:absolute;
    right:-2px;
    bottom:-2px;
    display:grid;
    min-width:11px;
    height:10px;
    padding:0 2px;
    place-items:center;
    border:1px solid #9b612a;
    border-radius:6px;
    color:#fff1c2;
    background:#51240f;
    font:800 7px/1 system-ui,sans-serif;
    box-shadow:0 1px 2px rgba(0,0,0,.5);
}
.no-captures {
    color:#8f684d;
    font:700 11px system-ui,sans-serif;
}

@media (max-width:699.98px) {
    .fighter-capture-row {
        grid-template-columns:1fr;
        min-height:18px;
        margin-top:1px;
        padding:1px 2px;
    }
    .fighter-capture-row > span:first-child {
        position:absolute;
        width:1px;
        height:1px;
        overflow:hidden;
        clip:rect(0 0 0 0);
        white-space:nowrap;
    }
    .captured-piece-tray {
        min-height:16px;
        justify-content:center;
        gap:1px;
    }
    .captured-piece-group {
        min-width:17px;
        height:17px;
    }
    .captured-piece-image {
        width:16px;
        height:16px;
    }
    .captured-piece-group b {
        right:-2px;
        bottom:-1px;
        min-width:10px;
        height:9px;
        font-size:6px;
    }
}

@media (max-width:699.98px) and (max-height:700px) {
    .fighter-avatar {
        width:36px;
        height:36px;
        font-size:24px;
    }
    .fighter-capture-row {
        min-height:15px;
    }
    .captured-piece-tray {
        min-height:14px;
    }
    .captured-piece-group {
        min-width:15px;
        height:15px;
    }
    .captured-piece-image {
        width:14px;
        height:14px;
    }
}


/* Individual captured pieces in chronological order */
.captured-piece-tray {
    min-height:34px;
    max-height:36px;
    justify-content:flex-start;
    align-content:center;
    flex-wrap:wrap;
    gap:0 1px;
    overflow:visible;
}
.captured-piece-tray > .captured-piece-image {
    width:16px;
    height:16px;
    flex:0 0 16px;
}
.fighter-capture-row {
    min-height:38px;
}

@media (max-width:699.98px) {
    .fighter-capture-row {
        min-height:29px;
    }
    .captured-piece-tray {
        min-height:26px;
        max-height:28px;
        justify-content:center;
        gap:0;
    }
    .captured-piece-tray > .captured-piece-image {
        width:13px;
        height:13px;
        flex-basis:13px;
    }
}

@media (max-width:699.98px) and (max-height:700px) {
    .fighter-capture-row {
        min-height:25px;
    }
    .captured-piece-tray {
        min-height:22px;
        max-height:24px;
    }
    .captured-piece-tray > .captured-piece-image {
        width:11px;
        height:11px;
        flex-basis:11px;
    }
}


/* Keep match status clear of the board badge */
.battle-status {
    position:relative;
    z-index:12;
    overflow:visible;
}
.battle-status h1 {
    line-height:1.25;
    padding-bottom:2px;
    overflow:visible;
}
@media (max-width:699.98px) {
    .battle-status {
        padding:3px 2px 10px;
    }
    .royal-board-frame {
        margin-top:2px;
    }
}
@media (max-width:699.98px) and (max-height:700px) {
    .battle-status {
        padding:1px 1px 7px;
    }
    .battle-status h1 {
        line-height:1.2;
        padding-bottom:1px;
    }
    .royal-board-frame {
        margin-top:1px;
    }
}


/* Final premium lobby balance */
.coin {
    font-size:16px;
    text-shadow:0 1px rgba(255,244,155,.8),0 2px 2px rgba(95,48,0,.38);
}
.premium-tournament::before {
    content:"";
    position:absolute;
    z-index:-4;
    left:50%;
    bottom:-7px;
    width:194px;
    height:45px;
    transform:translateX(-50%);
    border:1px solid rgba(220,151,56,.45);
    border-radius:50%;
    background:
        radial-gradient(ellipse,rgba(255,183,51,.28) 0 18%,rgba(125,75,30,.22) 38%,rgba(27,17,13,.72) 70%);
    box-shadow:
        inset 0 0 0 3px rgba(177,108,38,.14),
        0 0 20px rgba(255,153,26,.18);
}
.flame-orbit-fire::before {
    inset:0;
    border:0;
    background:conic-gradient(
        from -8deg,
        #ffcf3d 0deg,
        #ff6a0b 82deg,
        #ffb51f 170deg,
        #56cfff 190deg,
        #245dff 276deg,
        #2dbdff 350deg,
        #ffcf3d 360deg
    );
    -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));
    mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));
    box-shadow:none;
}
.flame-orbit-arcane {
    opacity:.68;
}
.tournament-title {
    right:6px;
    left:6px;
}
.kingdom-bottom-nav button {
    color:#e1bd82;
    text-shadow:0 1px 2px #130906;
}
.kingdom-bottom-nav .active {
    color:#ffe08a;
}

@media (max-width:699.98px) {
    .kingdom-lobby {
        padding-top:220px;
    }
    .premium-castle-scene {
        height:205px;
    }
    .tournament-zone {
        min-height:151px;
        margin-top:6px;
    }
    .premium-tournament {
        width:166px;
        height:149px;
    }
    .tournament-rune {
        width:132px;
        height:132px;
    }
    .flame-orbit {
        width:124px;
        height:124px;
    }
    .flame-orbit-arcane {
        width:114px;
        height:114px;
    }
    .tournament-cup-art {
        top:25px;
        width:76px;
        height:76px;
    }
    .premium-tournament .alert-badge {
        top:18px;
    }
    .premium-tournament::before {
        width:184px;
        height:42px;
    }
    .kingdom-bottom-nav span {
        filter:sepia(.35) brightness(1.12);
    }
}

@media (max-width:699.98px) and (max-height:700px) {
    .kingdom-lobby {
        padding-top:194px;
    }
    .premium-castle-scene {
        height:181px;
    }
    .tournament-zone {
        min-height:124px;
        margin-top:3px;
    }
    .premium-tournament {
        width:143px;
        height:121px;
    }
    .tournament-rune {
        width:108px;
        height:108px;
    }
    .flame-orbit {
        width:102px;
        height:102px;
    }
    .flame-orbit-arcane {
        width:94px;
        height:94px;
    }
    .tournament-cup-art {
        top:17px;
        width:62px;
        height:62px;
    }
    .premium-tournament .alert-badge {
        top:11px;
        width:18px;
        height:18px;
        font-size:10px;
    }
    .tournament-title {
        right:4px;
        bottom:0;
        left:4px;
        padding:3px 5px 2px;
    }
    .tournament-title strong {
        font-size:12px;
    }
    .tournament-title small {
        display:block;
        font-size:8px;
    }
    .premium-tournament::before {
        bottom:-5px;
        width:154px;
        height:34px;
    }
}


/* Guaranteed clearance between the 3D castle base and lobby controls */
@media (max-width:699.98px) {
    .kingdom-lobby {
        padding-top:232px;
    }
    .lobby-controls {
        position:relative;
        z-index:8;
    }
}
@media (max-width:699.98px) and (max-height:700px) {
    .kingdom-lobby {
        padding-top:236px;
    }
}


/* Rewards Vault */
.rewards-modal {
    padding:8px;
}
.rewards-dialog {
    display:flex;
    width:min(96%,390px);
    height:min(500px,calc(100dvh - 82px));
    max-height:calc(100dvh - 82px);
    flex-direction:column;
    gap:7px;
    padding:47px 10px 10px;
    overflow:hidden;
    border-color:#a46d31;
    color:#f3ddb1;
    background:
        linear-gradient(90deg,rgba(255,202,102,.04),transparent 16% 84%,rgba(255,202,102,.04)),
        repeating-linear-gradient(4deg,rgba(255,255,255,.012) 0 2px,transparent 2px 8px),
        linear-gradient(145deg,#4a2c1d,#211713 70%);
    box-shadow:0 18px 48px #000,inset 0 0 0 2px #2a130c,inset 0 0 24px rgba(0,0,0,.58);
}
.rewards-title {
    top:7px;
    left:55px;
    right:55px;
    padding:7px 5px;
    border-color:#a86e2d;
    color:#f9dfa0;
    background:
        linear-gradient(180deg,rgba(107,63,29,.96),rgba(35,22,17,.98));
    text-shadow:0 2px #281108;
}
.rewards-close {
    top:6px;
    right:7px;
}
.wheel-section {
    display:grid;
    flex:1 1 auto;
    min-height:0;
    justify-items:center;
    align-content:start;
    padding:5px 7px 6px;
    border:2px solid rgba(176,111,44,.64);
    border-radius:8px;
    background:rgba(27,16,12,.46);
    box-shadow:inset 0 0 18px rgba(0,0,0,.45);
}
.wheel-section h3 {
    margin:0 0 4px;
    color:#edc985;
    font-size:14px;
    text-shadow:0 2px #2b1208;
}
.reward-wheel-wrap {
    position:relative;
    display:grid;
    width:184px;
    height:184px;
    place-items:center;
}
.wheel-pointer {
    position:absolute;
    z-index:5;
    top:-1px;
    left:50%;
    width:20px;
    height:31px;
    transform:translateX(-50%);
    background:linear-gradient(90deg,#9a5319,#ffd36a 48%,#a55a19);
    clip-path:polygon(0 0,100% 0,50% 100%);
    filter:drop-shadow(0 2px 2px #2a0f05);
}
.reward-wheel {
    position:relative;
    width:168px;
    height:168px;
    border:6px ridge #d19a43;
    border-radius:50%;
    background:conic-gradient(
        #553274 0 45deg,#263f67 45deg 90deg,#315a38 90deg 135deg,#723728 135deg 180deg,
        #263f67 180deg 225deg,#603170 225deg 270deg,#3d623b 270deg 315deg,#744024 315deg 360deg
    );
    box-shadow:inset 0 0 0 3px #44220f,0 5px 10px rgba(0,0,0,.56),0 0 14px rgba(255,181,52,.16);
    transition:transform 4.2s cubic-bezier(.12,.68,.16,1);
}
.reward-wheel::after {
    content:"";
    position:absolute;
    inset:50%;
    width:44px;
    height:44px;
    transform:translate(-50%,-50%);
    border:4px ridge #cf9340;
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#ffe78a,#bd721e 64%,#4b250e);
    box-shadow:0 2px 5px #1c0904;
}
.reward-wheel i {
    position:absolute;
    z-index:2;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    color:#552506;
    font-size:24px;
    font-style:normal;
}
.reward-wheel span {
    position:absolute;
    z-index:1;
    top:50%;
    left:50%;
    width:34px;
    margin:-8px 0 0 -17px;
    color:#fff0b0;
    font:800 11px system-ui,sans-serif;
    text-align:center;
    text-shadow:0 1px 2px #160806;
}
.reward-wheel span:nth-of-type(1){transform:rotate(22.5deg) translateY(-59px) rotate(-22.5deg)}
.reward-wheel span:nth-of-type(2){transform:rotate(67.5deg) translateY(-59px) rotate(-67.5deg)}
.reward-wheel span:nth-of-type(3){transform:rotate(112.5deg) translateY(-59px) rotate(-112.5deg)}
.reward-wheel span:nth-of-type(4){transform:rotate(157.5deg) translateY(-59px) rotate(-157.5deg)}
.reward-wheel span:nth-of-type(5){transform:rotate(202.5deg) translateY(-59px) rotate(-202.5deg)}
.reward-wheel span:nth-of-type(6){transform:rotate(247.5deg) translateY(-59px) rotate(-247.5deg)}
.reward-wheel span:nth-of-type(7){transform:rotate(292.5deg) translateY(-59px) rotate(-292.5deg)}
.reward-wheel span:nth-of-type(8){transform:rotate(337.5deg) translateY(-59px) rotate(-337.5deg)}
.reward-action {
    min-height:35px;
    border:3px ridge #bc7e35;
    border-radius:8px;
    color:#4a250e;
    background:linear-gradient(#f2c777,#b66c31);
    box-shadow:inset 0 0 0 2px rgba(255,225,153,.48),0 3px 0 #38180d,0 5px 8px rgba(0,0,0,.35);
    font:800 13px Georgia,serif;
    text-transform:uppercase;
    text-shadow:0 1px rgba(255,231,173,.8);
}
.reward-action:disabled {
    cursor:not-allowed;
    filter:grayscale(.45);
    opacity:.68;
}
.spin-button {
    width:160px;
    margin-top:2px;
}
.spin-note,.spin-result,.invite-reward-status {
    margin:3px 0 0;
    min-height:12px;
    color:#cfad79;
    font:10px system-ui,sans-serif;
    text-align:center;
}
.spin-result {
    color:#ffe27b;
    font-weight:800;
}
.invite-reward-card {
    position:relative;
    display:grid;
    grid-template-columns:42px 1fr 35px;
    gap:6px;
    align-items:center;
    flex:0 0 auto;
    padding:8px;
    border:3px ridge #a67538;
    border-radius:8px;
    color:#f3dfb2;
    background:
        radial-gradient(circle at 8% 30%,rgba(73,133,230,.28),transparent 34%),
        linear-gradient(135deg,#183d72,#102543 68%,#251a15);
    box-shadow:inset 0 0 18px rgba(0,0,0,.46);
}
.facebook-mark {
    display:grid;
    width:39px;
    height:39px;
    place-items:end center;
    border-radius:50%;
    color:white;
    background:#2374d8;
    font:900 38px/35px Arial,sans-serif;
    box-shadow:0 2px 5px rgba(0,0,0,.46);
}
.invite-reward-copy h3 {
    margin:0;
    color:#ffd47e;
    font-size:14px;
}
.invite-reward-copy p {
    margin:2px 0 0;
    color:#d8c7ad;
    font:9px/1.25 system-ui,sans-serif;
}
.invite-gift {
    font-size:28px;
    filter:drop-shadow(0 2px 2px #0a101a);
}
.facebook-invite-button {
    grid-column:1/-1;
    width:100%;
    min-height:32px;
    border-color:#9f793e;
    color:#fff0c8;
    background:linear-gradient(#347dd3,#174c91);
    text-shadow:0 1px #092e60;
}
.invite-reward-status {
    grid-column:1/-1;
    margin:0;
    min-height:0;
    color:#9fc5f7;
    font-size:8px;
}

@media (max-width:699.98px) and (max-height:650px) {
    .rewards-dialog {
        height:calc(100dvh - 66px);
        max-height:calc(100dvh - 66px);
        gap:4px;
        padding:43px 8px 7px;
    }
    .rewards-title {
        padding:5px;
        font-size:16px;
    }
    .rewards-close {
        width:32px;
        height:32px;
        font-size:21px;
    }
    .wheel-section {
        padding:3px 5px;
    }
    .wheel-section h3 {
        margin-bottom:1px;
        font-size:12px;
    }
    .reward-wheel-wrap {
        width:154px;
        height:154px;
    }
    .reward-wheel {
        width:142px;
        height:142px;
    }
    .reward-wheel span:nth-of-type(n) {
        font-size:9px;
    }
    .reward-wheel span:nth-of-type(1){transform:rotate(22.5deg) translateY(-48px) rotate(-22.5deg)}
    .reward-wheel span:nth-of-type(2){transform:rotate(67.5deg) translateY(-48px) rotate(-67.5deg)}
    .reward-wheel span:nth-of-type(3){transform:rotate(112.5deg) translateY(-48px) rotate(-112.5deg)}
    .reward-wheel span:nth-of-type(4){transform:rotate(157.5deg) translateY(-48px) rotate(-157.5deg)}
    .reward-wheel span:nth-of-type(5){transform:rotate(202.5deg) translateY(-48px) rotate(-202.5deg)}
    .reward-wheel span:nth-of-type(6){transform:rotate(247.5deg) translateY(-48px) rotate(-247.5deg)}
    .reward-wheel span:nth-of-type(7){transform:rotate(292.5deg) translateY(-48px) rotate(-292.5deg)}
    .reward-wheel span:nth-of-type(8){transform:rotate(337.5deg) translateY(-48px) rotate(-337.5deg)}
    .spin-button {
        min-height:30px;
    }
    .invite-reward-card {
        grid-template-columns:34px 1fr 29px;
        padding:5px 7px;
    }
    .facebook-mark {
        width:32px;
        height:32px;
        font-size:31px;
        line-height:29px;
    }
    .invite-gift {
        font-size:23px;
    }
    .invite-reward-copy p {
        font-size:8px;
    }
    .facebook-invite-button {
        min-height:28px;
        font-size:11px;
    }
}


/* Premium three-spin Lucky Wheel */
.wheel-section {
    border-color:#bd813a;
    background:
        radial-gradient(circle at 50% 42%,rgba(255,187,58,.1),transparent 43%),
        repeating-linear-gradient(5deg,rgba(255,255,255,.014) 0 2px,transparent 2px 8px),
        linear-gradient(145deg,rgba(78,43,23,.88),rgba(24,14,11,.94));
}
.reward-wheel-wrap {
    width:194px;
    height:194px;
    isolation:isolate;
}
.reward-wheel-wrap::before {
    content:"✦  ♜  ✧  ♞  ✦  ♛  ✧  ♝";
    position:absolute;
    z-index:-1;
    inset:1px;
    display:grid;
    place-items:center;
    border:2px solid rgba(210,144,50,.44);
    border-radius:50%;
    color:rgba(244,191,85,.5);
    font:10px/1 Georgia,serif;
    letter-spacing:7px;
    word-spacing:2px;
    background:repeating-conic-gradient(from 0deg,rgba(244,184,70,.14) 0 1deg,transparent 1deg 22.5deg);
    box-shadow:inset 0 0 12px rgba(0,0,0,.55),0 0 14px rgba(255,172,35,.18);
    animation:reward-runes 18s linear infinite;
}
.reward-wheel-wrap::after {
    content:"";
    position:absolute;
    z-index:4;
    top:20px;
    left:25px;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#fff3a7;
    box-shadow:0 0 7px #ffc43c,128px 33px 0 -2px #fff1a3,28px 130px 0 -2px #72cfff;
    animation:reward-sparkle 2.1s ease-in-out infinite;
    pointer-events:none;
}
.reward-wheel {
    width:174px;
    height:174px;
    border-width:8px;
    background:
        repeating-conic-gradient(from 0deg,rgba(255,220,133,.88) 0 1.1deg,transparent 1.1deg 45deg),
        conic-gradient(
            #633786 0 45deg,#264b79 45deg 90deg,#356740 90deg 135deg,#7b3e29 135deg 180deg,
            #2b4f80 180deg 225deg,#6f3882 225deg 270deg,#416f43 270deg 315deg,#824827 315deg 360deg
        );
    box-shadow:
        inset 0 0 0 3px #3a1a0b,
        inset 0 0 16px rgba(255,213,104,.18),
        0 5px 0 #3c1d0d,
        0 9px 14px rgba(0,0,0,.62),
        0 0 18px rgba(255,181,52,.24);
}
.reward-wheel::before {
    content:"";
    position:absolute;
    z-index:1;
    inset:6px;
    border-radius:50%;
    background:conic-gradient(from 230deg,transparent 0 46%,rgba(255,255,255,.28) 49%,transparent 52% 100%);
    mix-blend-mode:screen;
    animation:wheel-glint 3.2s linear infinite;
    pointer-events:none;
}
.reward-wheel::after {
    width:48px;
    height:48px;
    border-width:5px;
    background:
        radial-gradient(circle at 34% 27%,#fff4a7 0 7%,transparent 8%),
        radial-gradient(circle at 35% 30%,#ffe78a,#c47a1f 62%,#4b250e);
}
.reward-wheel span::before {
    content:"₹";
    display:grid;
    width:14px;
    height:14px;
    margin:0 auto 1px;
    place-items:center;
    border:1px solid #ffe27c;
    border-radius:50%;
    color:#6a3409;
    background:radial-gradient(circle at 35% 30%,#fff08b,#e9a51e 62%,#9b5410);
    box-shadow:0 1px 2px rgba(0,0,0,.5);
    font:900 8px/1 system-ui,sans-serif;
}
.wheel-pointer {
    top:-3px;
    width:23px;
    height:35px;
    background:linear-gradient(90deg,#71330e,#ffd96e 45%,#fff1a4 54%,#995016);
    filter:drop-shadow(0 3px 2px #210b03) drop-shadow(0 0 4px rgba(255,198,72,.6));
}
.spin-tickets {
    display:flex;
    gap:7px;
    min-height:21px;
    align-items:center;
    justify-content:center;
    margin-top:-1px;
}
.spin-tickets span {
    display:grid;
    width:20px;
    height:20px;
    place-items:center;
    border:2px solid #ffe184;
    border-radius:50%;
    color:#6e3508;
    background:radial-gradient(circle at 35% 30%,#fff3a3,#e7a426 58%,#9a5011);
    box-shadow:0 2px 3px rgba(0,0,0,.48),0 0 7px rgba(255,184,43,.2);
    transition:filter .2s ease,opacity .2s ease,transform .2s ease;
}
.spin-tickets span::before {
    content:"₹";
    font:900 10px system-ui,sans-serif;
}
.spin-tickets span.used {
    opacity:.32;
    filter:grayscale(1);
    transform:scale(.88);
}
.spin-button {
    background:
        linear-gradient(100deg,transparent 0 30%,rgba(255,245,186,.44) 47%,transparent 63%),
        linear-gradient(#f4d187,#b86e30);
    background-size:220% 100%,100% 100%;
    animation:spin-button-glint 3s ease-in-out infinite;
}

@keyframes reward-runes {
    to { transform:rotate(360deg); }
}
@keyframes reward-sparkle {
    0%,100% { opacity:.35;transform:scale(.75); }
    50% { opacity:1;transform:scale(1.15); }
}
@keyframes wheel-glint {
    to { transform:rotate(360deg); }
}
@keyframes spin-button-glint {
    0%,55%,100% { background-position:130% 0,0 0; }
    75% { background-position:-40% 0,0 0; }
}

@media (max-width:699.98px) and (max-height:650px) {
    .reward-wheel-wrap {
        width:160px;
        height:160px;
    }
    .reward-wheel {
        width:146px;
        height:146px;
        border-width:7px;
    }
    .spin-tickets {
        min-height:16px;
        gap:5px;
    }
    .spin-tickets span {
        width:16px;
        height:16px;
        border-width:1px;
    }
    .spin-tickets span::before {
        font-size:8px;
    }
}
@media (prefers-reduced-motion:reduce) {
    .reward-wheel-wrap::before,
    .reward-wheel-wrap::after,
    .reward-wheel::before,
    .spin-button {
        animation:none !important;
    }
}


/* Reward coin rain and wallet credit */
.coin-rain-layer {
    position:fixed;
    z-index:2200;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}
.coin-rain-particle {
    position:absolute;
    top:0;
    left:0;
    display:grid;
    width:23px;
    height:23px;
    place-items:center;
    border:2px solid #ffe77c;
    border-radius:50%;
    color:#6c3508;
    background:
        radial-gradient(circle at 33% 27%,#fff9bb 0 8%,transparent 9%),
        radial-gradient(circle at 35% 30%,#fff090,#e8a31e 59%,#9b500e 100%);
    box-shadow:inset 0 0 0 2px rgba(117,59,8,.3),0 3px 5px rgba(0,0,0,.48),0 0 8px rgba(255,187,44,.35);
    font:900 12px/1 system-ui,sans-serif;
    will-change:transform,opacity;
}
.wallet-reward-message {
    position:fixed;
    z-index:2250;
    top:16%;
    left:50%;
    display:grid;
    min-width:min(84vw,310px);
    padding:10px 18px;
    transform:translate(-50%,-12px) scale(.9);
    border:3px ridge #c18839;
    border-radius:12px;
    opacity:0;
    color:#fff0bd;
    background:
        radial-gradient(circle at 50% 0,rgba(255,204,76,.2),transparent 55%),
        linear-gradient(145deg,rgba(83,45,22,.98),rgba(28,18,14,.98));
    box-shadow:inset 0 0 0 2px rgba(255,216,130,.16),0 10px 28px rgba(0,0,0,.65),0 0 18px rgba(255,169,31,.22);
    text-align:center;
    pointer-events:none;
    transition:opacity .24s ease,transform .28s cubic-bezier(.2,.8,.2,1);
}
.wallet-reward-message.show {
    transform:translate(-50%,0) scale(1);
    opacity:1;
}
.wallet-reward-message strong {
    color:#ffe09a;
    font:700 14px Georgia,serif;
    text-shadow:0 2px #301307;
}
.wallet-reward-message b {
    margin:2px 0;
    color:#ffca3b;
    font:900 24px system-ui,sans-serif;
    text-shadow:0 2px #4d2207,0 0 9px rgba(255,186,38,.45);
}
.wallet-reward-message span {
    color:#dec49b;
    font:10px system-ui,sans-serif;
}
.coin-balance.reward-credit {
    animation:wallet-credit-pulse .9s ease-out;
}
@keyframes wallet-credit-pulse {
    0% { transform:scale(1);filter:none; }
    28% { transform:scale(1.16);filter:brightness(1.35); }
    55% { transform:scale(.97);filter:brightness(1.12); }
    100% { transform:scale(1);filter:none; }
}
@media (max-width:380px) {
    .coin-rain-particle {
        width:19px;
        height:19px;
        font-size:10px;
    }
    .wallet-reward-message {
        top:13%;
        padding:8px 13px;
    }
}
@media (prefers-reduced-motion:reduce) {
    .wallet-reward-message {
        transform:translate(-50%,0);
        transition:opacity .15s linear;
    }
    .coin-balance.reward-credit {
        animation:none;
    }
}


/* Landing-page Mystery Box and development rewarded ad */
.mystery-box-launch {
    position:absolute;
    z-index:30;
    right:8px;
    bottom:63px;
    display:grid;
    width:68px;
    min-height:82px;
    padding:0;
    place-items:center;
    border:0;
    color:#ffeab0;
    background:transparent;
    filter:drop-shadow(0 5px 5px rgba(0,0,0,.6));
    cursor:pointer;
    isolation:isolate;
}
.mystery-rays {
    position:absolute;
    z-index:-1;
    top:0;
    left:50%;
    width:64px;
    height:64px;
    transform:translateX(-50%);
    border-radius:50%;
    opacity:.72;
    background:repeating-conic-gradient(from 0deg,rgba(255,211,77,.58) 0 5deg,transparent 5deg 18deg);
    -webkit-mask:radial-gradient(circle,transparent 0 27%,#000 29% 69%,transparent 71%);
    mask:radial-gradient(circle,transparent 0 27%,#000 29% 69%,transparent 71%);
    animation:mystery-rays-spin 8s linear infinite;
}
.mystery-box-art {
    position:relative;
    display:block;
    width:52px;
    height:53px;
    margin-top:3px;
    animation:mystery-box-float 2.1s ease-in-out infinite;
}
.mystery-lid,.mystery-case {
    position:absolute;
    display:block;
    border:2px solid #6f310e;
    background:
        linear-gradient(90deg,transparent 0 38%,#ffdb4e 39% 57%,transparent 58%),
        linear-gradient(180deg,#f6a62e,#a94713);
    box-shadow:inset 0 2px 0 rgba(255,235,138,.65),inset 0 -3px 0 rgba(93,30,7,.45),0 3px 4px rgba(0,0,0,.5);
}
.mystery-lid {
    z-index:2;
    top:5px;
    left:2px;
    width:48px;
    height:15px;
    transform:perspective(50px) rotateX(-8deg);
    border-radius:7px 7px 3px 3px;
    animation:mystery-lid-peek 2.1s ease-in-out infinite;
}
.mystery-case {
    top:18px;
    left:5px;
    width:42px;
    height:32px;
    border-radius:3px 3px 8px 8px;
}
.mystery-box-art b {
    position:absolute;
    z-index:3;
    top:24px;
    left:50%;
    display:grid;
    width:18px;
    height:18px;
    transform:translateX(-50%);
    place-items:center;
    border:1px solid #69300e;
    border-radius:50%;
    color:#6d2d0b;
    background:radial-gradient(circle at 35% 30%,#fff1a0,#f2ba2f 65%,#a85d12);
    font:900 13px/1 Georgia,serif;
    text-shadow:0 1px rgba(255,245,174,.8);
}
.mystery-box-launch strong {
    margin-top:-2px;
    padding:2px 5px;
    border:1px solid rgba(229,157,48,.68);
    border-radius:6px;
    color:#ffdc72;
    background:rgba(39,20,12,.9);
    box-shadow:0 2px 4px rgba(0,0,0,.45);
    font:900 10px/1.1 system-ui,sans-serif;
}
.mystery-box-launch small {
    margin-top:1px;
    color:#e9c894;
    font:8px/1 system-ui,sans-serif;
    text-shadow:0 1px 2px #120805;
}
.mystery-box-launch:active .mystery-box-art {
    transform:translateY(2px) scale(.95);
}

.ad-reward-modal {
    padding:9px;
}
.ad-reward-dialog {
    display:flex;
    width:min(94%,360px);
    max-height:calc(100dvh - 70px);
    flex-direction:column;
    gap:9px;
    align-items:center;
    padding:51px 13px 13px;
    overflow:hidden;
    border-color:#a76b2d;
    color:#f5dfb2;
    background:
        radial-gradient(circle at 50% 25%,rgba(255,185,45,.14),transparent 34%),
        repeating-linear-gradient(5deg,rgba(255,255,255,.012) 0 2px,transparent 2px 9px),
        linear-gradient(145deg,#4a2a1b,#1d1411 72%);
    box-shadow:0 18px 48px #000,inset 0 0 0 2px #281109,inset 0 0 25px rgba(0,0,0,.62);
}
.ad-reward-title {
    top:7px;
    right:53px;
    left:53px;
    padding:7px 5px;
    color:#ffe4a0;
    background:linear-gradient(#71401e,#2c1a13);
}
.development-ad-badge {
    padding:3px 8px;
    border:1px solid #8e6832;
    border-radius:12px;
    color:#d8bf95;
    background:#251914;
    font:700 8px/1 system-ui,sans-serif;
    letter-spacing:.65px;
}
.ad-preview-stage {
    position:relative;
    display:grid;
    width:100%;
    min-height:172px;
    place-content:center;
    overflow:hidden;
    border:3px ridge #a87534;
    border-radius:9px;
    background:
        linear-gradient(145deg,rgba(255,255,255,.07),transparent 38%),
        radial-gradient(circle at 50% 44%,#76521e 0 8%,#253b54 28%,#101a25 68%);
    box-shadow:inset 0 0 25px rgba(0,0,0,.7),0 4px 8px rgba(0,0,0,.42);
    text-align:center;
}
.ad-preview-stage::before,.ad-preview-stage::after {
    content:"♞";
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    color:rgba(245,190,80,.25);
    font-size:55px;
}
.ad-preview-stage::before { left:18px; }
.ad-preview-stage::after { right:18px;transform:translateY(-50%) scaleX(-1); }
.ad-preview-glow {
    position:absolute;
    top:50%;
    left:50%;
    width:110px;
    height:110px;
    transform:translate(-50%,-50%);
    border:2px solid rgba(255,196,66,.35);
    border-radius:50%;
    box-shadow:0 0 24px rgba(255,174,36,.2),inset 0 0 22px rgba(255,187,49,.12);
    animation:ad-preview-pulse 1.8s ease-in-out infinite;
}
.ad-preview-crown {
    position:relative;
    z-index:2;
    color:#ffc84f;
    font:62px/1 Georgia,serif;
    text-shadow:0 4px #5b2709,0 0 14px rgba(255,184,45,.5);
}
.ad-preview-stage strong,.ad-preview-stage small {
    position:relative;
    z-index:2;
    display:block;
}
.ad-preview-stage strong {
    margin-top:7px;
    color:#ffe09a;
    font:800 13px Georgia,serif;
    letter-spacing:.8px;
}
.ad-preview-stage small {
    margin-top:2px;
    color:#c8b694;
    font:9px system-ui,sans-serif;
}
.ad-preview-stage.playing .ad-preview-crown {
    animation:ad-crown-turn 2.4s linear infinite;
}
.ad-reward-offer {
    display:flex;
    gap:9px;
    align-items:center;
    justify-content:center;
}
.ad-offer-coin {
    display:grid;
    width:38px;
    height:38px;
    place-items:center;
    border:3px ridge #d6a23f;
    border-radius:50%;
    color:#713707;
    background:radial-gradient(circle at 34% 27%,#fff3a0,#edaa22 60%,#9a500e);
    box-shadow:0 3px 5px rgba(0,0,0,.45);
    font:900 20px system-ui,sans-serif;
}
.ad-reward-offer div {
    display:grid;
}
.ad-reward-offer small {
    color:#cdb386;
    font:8px system-ui,sans-serif;
}
.ad-reward-offer strong {
    color:#ffd35e;
    font:900 20px/1.05 system-ui,sans-serif;
    text-shadow:0 2px #3c1707;
}
.ad-progress-track {
    width:100%;
    height:8px;
    overflow:hidden;
    border:1px solid #6e431f;
    border-radius:5px;
    background:#170f0c;
    box-shadow:inset 0 1px 3px #000;
}
.ad-progress-track span {
    display:block;
    width:0;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,#c47625,#ffd65e);
    box-shadow:0 0 7px rgba(255,192,55,.55);
    transition:width .25s linear;
}
.ad-reward-status {
    min-height:16px;
    margin:0;
    color:#ddc396;
    font:10px/1.3 system-ui,sans-serif;
    text-align:center;
}
.ad-watch-button {
    width:min(100%,220px);
}
.ad-provider-note {
    margin:0;
    color:#927c66;
    font:8px/1.25 system-ui,sans-serif;
    text-align:center;
}

@keyframes mystery-rays-spin { to { transform:translateX(-50%) rotate(360deg); } }
@keyframes mystery-box-float {
    0%,100% { transform:translateY(0); }
    50% { transform:translateY(-5px); }
}
@keyframes mystery-lid-peek {
    0%,72%,100% { transform:perspective(50px) rotateX(-8deg) translateY(0); }
    82% { transform:perspective(50px) rotateX(-18deg) translateY(-4px); }
}
@keyframes ad-preview-pulse {
    0%,100% { transform:translate(-50%,-50%) scale(.92);opacity:.5; }
    50% { transform:translate(-50%,-50%) scale(1.08);opacity:1; }
}
@keyframes ad-crown-turn { to { transform:rotateY(360deg); } }

@media (max-width:380px) {
    .mystery-box-launch {
        right:5px;
        bottom:60px;
        transform:scale(.9);
        transform-origin:right bottom;
    }
    .ad-preview-stage {
        min-height:145px;
    }
}
@media (max-width:699.98px) and (max-height:650px) {
    .mystery-box-launch {
        width:60px;
        bottom:57px;
        transform:scale(.82);
        transform-origin:right bottom;
    }
    .ad-reward-dialog {
        gap:5px;
        padding-top:46px;
    }
    .ad-preview-stage {
        min-height:118px;
    }
    .ad-preview-crown {
        font-size:45px;
    }
}
@media (prefers-reduced-motion:reduce) {
    .mystery-rays,.mystery-box-art,.mystery-lid,.ad-preview-glow,.ad-preview-stage.playing .ad-preview-crown {
        animation:none !important;
    }
}


/* Raised Mystery Box and Royal Coin Shop */
.mystery-box-launch {
    bottom:82px;
}
.coin-shop-launch {
    position:absolute;
    z-index:30;
    bottom:82px;
    left:8px;
    display:grid;
    width:72px;
    min-height:84px;
    padding:0;
    place-items:center;
    border:0;
    color:#ffe8a2;
    background:transparent;
    filter:drop-shadow(0 5px 5px rgba(0,0,0,.62));
    cursor:pointer;
    isolation:isolate;
}
.shop-sparkles {
    position:absolute;
    z-index:-1;
    top:0;
    left:50%;
    width:66px;
    height:62px;
    transform:translateX(-50%);
    background:
        radial-gradient(circle at 12% 35%,#fff0a0 0 2px,transparent 3px),
        radial-gradient(circle at 85% 22%,#ffd247 0 2px,transparent 3px),
        radial-gradient(circle at 76% 78%,#fff2a6 0 1px,transparent 2px),
        radial-gradient(circle at 20% 82%,#ffb72b 0 1px,transparent 2px);
    animation:shop-sparkle-dance 1.8s ease-in-out infinite;
}
.shop-bag-art {
    position:relative;
    display:grid;
    width:51px;
    height:51px;
    margin-top:2px;
    place-items:center;
    border:3px solid #70350d;
    border-radius:46% 46% 35% 35% / 32% 32% 48% 48%;
    color:#703306;
    background:
        radial-gradient(circle at 34% 25%,rgba(255,255,255,.48),transparent 12%),
        linear-gradient(145deg,#ffe176,#e8a529 58%,#9d5010);
    box-shadow:inset 0 0 0 3px rgba(255,233,139,.32),inset 0 -6px 8px rgba(116,48,6,.3),0 5px 6px rgba(0,0,0,.5),0 0 13px rgba(255,184,38,.3);
    animation:shop-bag-bounce 2.2s ease-in-out infinite;
}
.shop-bag-art::before {
    content:"";
    position:absolute;
    top:-8px;
    left:50%;
    width:27px;
    height:15px;
    transform:translateX(-50%);
    border:5px solid #9a5614;
    border-bottom:0;
    border-radius:15px 15px 0 0;
}
.shop-bag-art i {
    display:grid;
    width:27px;
    height:27px;
    place-items:center;
    border:2px ridge #b8751b;
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#fff3a2,#e8a326 66%,#a45a12);
    font:900 17px/1 system-ui,sans-serif;
    font-style:normal;
    text-shadow:0 1px rgba(255,244,170,.8);
}
.coin-shop-launch strong {
    margin-top:-1px;
    padding:2px 5px;
    border:1px solid rgba(230,159,46,.7);
    border-radius:6px;
    color:#ffdc72;
    background:rgba(39,20,12,.92);
    box-shadow:0 2px 4px rgba(0,0,0,.46);
    font:900 9px/1.1 system-ui,sans-serif;
}
.coin-shop-launch small {
    margin-top:1px;
    color:#efc981;
    font:8px/1 system-ui,sans-serif;
    text-shadow:0 1px 2px #120805;
}
.coin-shop-launch:active .shop-bag-art {
    transform:translateY(2px) scale(.95);
}

.coin-shop-modal {
    padding:8px;
}
.coin-shop-dialog {
    display:flex;
    width:min(95%,370px);
    max-height:calc(100dvh - 70px);
    flex-direction:column;
    gap:8px;
    padding:50px 11px 12px;
    overflow:hidden;
    border-color:#a8732e;
    color:#f4dfb0;
    background:
        radial-gradient(circle at 50% 12%,rgba(255,196,60,.15),transparent 30%),
        repeating-linear-gradient(5deg,rgba(255,255,255,.013) 0 2px,transparent 2px 9px),
        linear-gradient(145deg,#4d2d1b,#211611 73%);
    box-shadow:0 18px 48px #000,inset 0 0 0 2px #2b1309,inset 0 0 26px rgba(0,0,0,.6);
}
.coin-shop-title {
    top:7px;
    right:53px;
    left:53px;
    padding:7px 5px;
    color:#ffe39a;
    background:linear-gradient(#76451f,#2d1a12);
}
.coin-shop-hero {
    display:flex;
    gap:10px;
    width:100%;
    align-items:center;
    justify-content:center;
    padding:8px;
    border:2px solid rgba(188,124,43,.52);
    border-radius:8px;
    background:radial-gradient(circle at 20% 50%,rgba(255,194,55,.18),transparent 38%),rgba(31,19,13,.58);
    box-shadow:inset 0 0 13px rgba(0,0,0,.45);
}
.coin-shop-vault {
    display:grid;
    width:43px;
    height:43px;
    place-items:center;
    border:4px ridge #ce9438;
    border-radius:50%;
    color:#713607;
    background:radial-gradient(circle at 35% 28%,#fff3a5,#eba822 63%,#9b500d);
    box-shadow:0 3px 5px rgba(0,0,0,.48),0 0 10px rgba(255,184,39,.25);
    font:900 22px system-ui,sans-serif;
}
.coin-shop-hero div {
    display:grid;
}
.coin-shop-hero strong {
    color:#ffdb78;
    font:700 16px Georgia,serif;
    text-shadow:0 2px #351407;
}
.coin-shop-hero small {
    margin-top:2px;
    color:#cdb58d;
    font:9px system-ui,sans-serif;
}
.coin-package-list {
    display:grid;
    width:100%;
    gap:6px;
}
.coin-package {
    position:relative;
    display:grid;
    min-height:47px;
    grid-template-columns:36px 1fr auto;
    gap:8px;
    align-items:center;
    padding:5px 9px;
    overflow:visible;
    border:2px solid #8f5927;
    border-radius:8px;
    color:#f4dbac;
    background:
        linear-gradient(110deg,rgba(255,216,120,.11),transparent 38%),
        linear-gradient(#5b3823,#382319);
    box-shadow:inset 0 1px rgba(255,229,159,.2),0 3px 5px rgba(0,0,0,.4);
    cursor:pointer;
}
.coin-package:hover,.coin-package:focus-visible {
    border-color:#d59b42;
    filter:brightness(1.12);
}
.coin-package:disabled {
    cursor:wait;
    opacity:.65;
}
.package-coin {
    display:grid;
    width:31px;
    height:31px;
    place-items:center;
    border:2px ridge #d19b39;
    border-radius:50%;
    color:#6d3307;
    background:radial-gradient(circle at 35% 28%,#fff1a0,#e9a321 65%,#98500e);
    box-shadow:0 2px 4px rgba(0,0,0,.42);
    font:900 15px system-ui,sans-serif;
}
.coin-package strong {
    color:#ffe2a0;
    font:700 14px Georgia,serif;
    text-align:left;
}
.coin-package b {
    min-width:52px;
    padding:6px 8px;
    border:2px ridge #c28a37;
    border-radius:7px;
    color:#4f260d;
    background:linear-gradient(#f3ca78,#b96f32);
    box-shadow:inset 0 1px rgba(255,238,179,.5),0 2px 3px rgba(0,0,0,.4);
    font:900 13px system-ui,sans-serif;
}
.coin-package em {
    position:absolute;
    z-index:2;
    top:-6px;
    right:7px;
    padding:2px 5px;
    border:1px solid #f3ca65;
    border-radius:5px;
    color:#5b2708;
    background:#ffd65e;
    box-shadow:0 2px 3px rgba(0,0,0,.38);
    font:900 7px/1 system-ui,sans-serif;
    font-style:normal;
}
.coin-package.popular {
    border-color:#a67936;
}
.coin-package.best-value {
    border-color:#d09a3e;
    background:
        linear-gradient(110deg,rgba(255,224,118,.19),transparent 42%),
        linear-gradient(#684020,#3d2618);
}
.coin-package.royal {
    border-color:#8a62a8;
    background:
        linear-gradient(110deg,rgba(216,168,255,.15),transparent 42%),
        linear-gradient(#593462,#30203a);
}
.coin-shop-status {
    min-height:16px;
    margin:0;
    color:#e0c28c;
    font:10px/1.3 system-ui,sans-serif;
    text-align:center;
}
.coin-shop-note {
    margin:0;
    color:#927b63;
    font:8px/1.25 system-ui,sans-serif;
    text-align:center;
}

@keyframes shop-sparkle-dance {
    0%,100% { opacity:.35;transform:translateX(-50%) scale(.88) rotate(-4deg); }
    50% { opacity:1;transform:translateX(-50%) scale(1.08) rotate(4deg); }
}
@keyframes shop-bag-bounce {
    0%,100% { transform:translateY(0) rotate(-2deg); }
    50% { transform:translateY(-5px) rotate(2deg); }
}
@media (max-width:380px) {
    .mystery-box-launch {
        bottom:78px;
    }
    .coin-shop-launch {
        bottom:78px;
        left:5px;
        transform:scale(.9);
        transform-origin:left bottom;
    }
    .coin-shop-dialog {
        gap:6px;
    }
}
@media (max-width:699.98px) and (max-height:650px) {
    .mystery-box-launch {
        bottom:72px;
    }
    .coin-shop-launch {
        bottom:72px;
        width:62px;
        transform:scale(.82);
        transform-origin:left bottom;
    }
    .coin-shop-dialog {
        gap:4px;
        padding-top:45px;
    }
    .coin-shop-hero {
        padding:5px;
    }
    .coin-package-list {
        gap:4px;
    }
    .coin-package {
        min-height:39px;
        padding:3px 7px;
    }
}
@media (prefers-reduced-motion:reduce) {
    .shop-sparkles,.shop-bag-art {
        animation:none !important;
    }
}


/* Shared medieval sound settings */
.sound-settings-modal {
    padding:10px;
}
.sound-settings-dialog {
    display:flex;
    width:min(92%,340px);
    flex-direction:column;
    gap:11px;
    align-items:center;
    padding:52px 13px 15px;
    border-color:#a46d2c;
    color:#f3ddb0;
    background:
        radial-gradient(circle at 50% 22%,rgba(255,193,52,.13),transparent 35%),
        repeating-linear-gradient(5deg,rgba(255,255,255,.013) 0 2px,transparent 2px 9px),
        linear-gradient(145deg,#4b2c1c,#211611 72%);
    box-shadow:0 18px 48px #000,inset 0 0 0 2px #2a1309,inset 0 0 25px rgba(0,0,0,.6);
}
.sound-settings-title {
    top:7px;
    right:53px;
    left:53px;
    padding:7px 5px;
    color:#ffe39a;
    background:linear-gradient(#74431e,#2d1a12);
}
.sound-crest {
    display:grid;
    width:58px;
    height:58px;
    place-items:center;
    border:5px ridge #c78c35;
    border-radius:50%;
    color:#633008;
    background:
        radial-gradient(circle at 34% 26%,#fff3a5,#e9a523 62%,#96500f);
    box-shadow:0 4px 7px rgba(0,0,0,.5),0 0 16px rgba(255,184,38,.2);
    font:900 31px/1 Georgia,serif;
    text-shadow:0 1px rgba(255,244,177,.78);
}
.sound-intro {
    margin:0;
    color:#cdb58d;
    font:10px/1.35 system-ui,sans-serif;
    text-align:center;
}
.sound-setting-row {
    display:flex;
    width:100%;
    min-height:58px;
    align-items:center;
    justify-content:space-between;
    padding:8px 10px;
    border:2px solid #805027;
    border-radius:9px;
    background:
        linear-gradient(110deg,rgba(255,222,139,.08),transparent 45%),
        linear-gradient(#553522,#342118);
    box-shadow:inset 0 1px rgba(255,230,164,.15),0 3px 5px rgba(0,0,0,.36);
    cursor:pointer;
}
.sound-setting-row span {
    display:grid;
    gap:3px;
}
.sound-setting-row b {
    color:#f8d994;
    font:700 14px Georgia,serif;
}
.sound-setting-row small {
    color:#ad977a;
    font:8px system-ui,sans-serif;
}
.sound-setting-row input {
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
}
.sound-setting-row i {
    position:relative;
    width:48px;
    height:26px;
    flex:0 0 auto;
    border:2px solid #603416;
    border-radius:15px;
    background:#221611;
    box-shadow:inset 0 2px 5px rgba(0,0,0,.68);
    transition:background .2s ease,border-color .2s ease;
}
.sound-setting-row i::after {
    content:"";
    position:absolute;
    top:3px;
    left:3px;
    width:16px;
    height:16px;
    border:2px solid #6f3c14;
    border-radius:50%;
    background:linear-gradient(#d2a164,#895021);
    box-shadow:0 2px 3px rgba(0,0,0,.52);
    transition:transform .22s ease,background .2s ease;
}
.sound-setting-row input:checked + i {
    border-color:#c38a34;
    background:linear-gradient(90deg,#8f501a,#d5962c);
}
.sound-setting-row input:checked + i::after {
    transform:translateX(21px);
    background:linear-gradient(#fff0a0,#eab02e);
}
.sound-setting-row input:focus-visible + i {
    outline:2px solid #ffe184;
    outline-offset:3px;
}
.sound-current-status {
    min-height:14px;
    margin:0;
    color:#ffd26d;
    font:700 10px system-ui,sans-serif;
}
.sound-note {
    margin:0;
    color:#907a63;
    font:8px system-ui,sans-serif;
}
@media (max-width:380px) {
    .sound-settings-dialog {
        gap:8px;
    }
}


/* Full player-controlled audio mixer */
.top-actions [data-volume-button] {
    width:27px;
    padding:0;
    font-size:17px;
}
.sound-settings-dialog {
    max-height:calc(100dvh - 64px);
    gap:7px;
    overflow:auto;
    scrollbar-width:thin;
}
.sound-crest {
    width:48px;
    height:48px;
    border-width:4px;
    font-size:26px;
}
.sound-setting-row {
    min-height:50px;
    padding:6px 9px;
}
.sound-volume-panel {
    display:grid;
    width:100%;
    gap:7px;
    padding:9px;
    border:2px solid #805027;
    border-radius:9px;
    background:
        linear-gradient(110deg,rgba(255,222,139,.07),transparent 45%),
        rgba(38,23,16,.78);
    box-shadow:inset 0 2px 8px rgba(0,0,0,.5);
}
.sound-volume-row {
    display:grid;
    gap:4px;
}
.sound-volume-row span {
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.sound-volume-row b {
    color:#efd194;
    font:700 10px Georgia,serif;
}
.sound-volume-row output {
    min-width:36px;
    color:#ffd45f;
    font:800 9px system-ui,sans-serif;
    text-align:right;
}
.sound-volume-row input[type="range"] {
    width:100%;
    height:18px;
    margin:0;
    border:0;
    outline:0;
    background:transparent;
    accent-color:#e6a82f;
    cursor:pointer;
}
.sound-volume-row input[type="range"]::-webkit-slider-runnable-track {
    height:6px;
    border:1px solid #683b18;
    border-radius:5px;
    background:linear-gradient(90deg,#8e4d18,#efb63a);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.55);
}
.sound-volume-row input[type="range"]::-webkit-slider-thumb {
    width:18px;
    height:18px;
    margin-top:-7px;
    -webkit-appearance:none;
    border:2px solid #7b410f;
    border-radius:50%;
    background:radial-gradient(circle at 35% 28%,#fff2a1,#eaa62a 62%,#9a5010);
    box-shadow:0 2px 4px rgba(0,0,0,.5);
}
.sound-volume-row input[type="range"]::-moz-range-track {
    height:6px;
    border:1px solid #683b18;
    border-radius:5px;
    background:linear-gradient(90deg,#8e4d18,#efb63a);
}
.sound-volume-row input[type="range"]::-moz-range-thumb {
    width:16px;
    height:16px;
    border:2px solid #7b410f;
    border-radius:50%;
    background:#eaa62a;
}
@media (max-width:699.98px) and (max-height:650px) {
    .sound-settings-dialog {
        gap:4px;
        padding-top:45px;
    }
    .sound-crest {
        width:38px;
        height:38px;
        font-size:21px;
    }
    .sound-intro {
        font-size:8px;
    }
    .sound-setting-row {
        min-height:42px;
        padding:4px 7px;
    }
    .sound-volume-panel {
        gap:4px;
        padding:6px 8px;
    }
}


/* Animated checkmate winner celebration */
.checkmate-modal {
    z-index:2600;
    padding:10px;
}
.checkmate-backdrop {
    background:
        radial-gradient(circle at 50% 38%,rgba(255,184,37,.18),transparent 35%),
        rgba(10,6,5,.88);
    backdrop-filter:blur(3px);
}
.checkmate-dialog {
    display:flex;
    width:min(92%,350px);
    min-height:390px;
    flex-direction:column;
    gap:8px;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:24px 14px 18px;
    border:4px ridge #c38a34;
    color:#f8e1ad;
    background:
        radial-gradient(circle at 50% 36%,rgba(255,196,62,.2),transparent 34%),
        repeating-conic-gradient(from 0deg at 50% 35%,rgba(255,215,106,.035) 0 8deg,transparent 8deg 18deg),
        linear-gradient(155deg,#54301a,#241610 70%);
    box-shadow:
        0 22px 58px #000,
        inset 0 0 0 2px #2b1308,
        inset 0 0 32px rgba(0,0,0,.62),
        0 0 28px rgba(255,178,38,.2);
    text-align:center;
}
.checkmate-label {
    position:relative;
    z-index:5;
    margin:0;
    color:#ffdb70;
    font:900 14px/1 Georgia,serif;
    letter-spacing:3px;
    text-shadow:0 2px #431a07,0 0 9px rgba(255,187,47,.42);
}
.victory-rays {
    position:absolute;
    z-index:0;
    top:53px;
    left:50%;
    width:260px;
    height:260px;
    transform:translateX(-50%);
    border-radius:50%;
    opacity:.55;
    background:repeating-conic-gradient(from 0deg,rgba(255,218,101,.55) 0 5deg,transparent 5deg 16deg);
    -webkit-mask:radial-gradient(circle,transparent 0 25%,#000 27% 70%,transparent 72%);
    mask:radial-gradient(circle,transparent 0 25%,#000 27% 70%,transparent 72%);
}
.victory-trophy {
    position:relative;
    z-index:4;
    width:154px;
    height:165px;
    margin:-4px 0 -3px;
    transform:scale(.72) translateY(18px);
    opacity:0;
}
.trophy-cup {
    position:absolute;
    z-index:3;
    top:31px;
    left:50%;
    transform:translateX(-50%);
    font-size:105px;
    line-height:1;
    filter:drop-shadow(0 7px 4px rgba(0,0,0,.58)) drop-shadow(0 0 10px rgba(255,184,39,.5));
}
.trophy-crown {
    position:absolute;
    z-index:4;
    top:7px;
    left:50%;
    transform:translateX(-50%) rotate(-7deg);
    color:#ffe27c;
    font:58px/1 Georgia,serif;
    text-shadow:0 4px #6c2d08,0 0 10px rgba(255,202,69,.75);
}
.trophy-glow {
    position:absolute;
    z-index:1;
    top:20px;
    left:50%;
    width:130px;
    height:130px;
    transform:translateX(-50%);
    border:3px solid rgba(255,218,101,.56);
    border-radius:50%;
    box-shadow:0 0 22px rgba(255,184,39,.55),inset 0 0 20px rgba(255,189,47,.22);
}
.checkmate-dialog h2 {
    position:relative;
    z-index:5;
    margin:0;
    color:#ffe49b;
    font:900 27px/1.1 Georgia,serif;
    text-shadow:0 3px #431807,0 0 10px rgba(255,185,39,.3);
}
.checkmate-dialog > p:not(.checkmate-label) {
    position:relative;
    z-index:5;
    margin:0;
    color:#d9c19a;
    font:11px/1.35 system-ui,sans-serif;
}
.checkmate-actions {
    position:relative;
    z-index:6;
    display:grid;
    width:100%;
    max-width:255px;
    gap:8px;
    margin-top:6px;
}
.checkmate-actions .dialog-button {
    display:grid;
    min-height:40px;
    place-items:center;
    text-decoration:none;
}
.checkmate-play-again {
    color:#4e260d;
    background:linear-gradient(#f6ce7b,#bd7030);
    animation:rematch-button-glow 1.6s ease-in-out infinite;
}
.checkmate-lobby-button {
    color:#f1d6a2;
    background:linear-gradient(#654127,#392419);
}
.victory-confetti {
    position:absolute;
    z-index:2;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}
.victory-confetti i {
    position:absolute;
    top:-20px;
    width:8px;
    height:14px;
    border-radius:2px;
    opacity:0;
    background:#ffd34f;
}
.victory-confetti i:nth-child(1){left:8%;background:#ffca38;animation-delay:.05s}
.victory-confetti i:nth-child(2){left:16%;background:#e84d45;animation-delay:.32s}
.victory-confetti i:nth-child(3){left:25%;background:#5ec8ff;animation-delay:.16s}
.victory-confetti i:nth-child(4){left:34%;background:#ffe779;animation-delay:.48s}
.victory-confetti i:nth-child(5){left:43%;background:#9dde58;animation-delay:.24s}
.victory-confetti i:nth-child(6){left:52%;background:#ff9d2e;animation-delay:.58s}
.victory-confetti i:nth-child(7){left:61%;background:#d481ff;animation-delay:.11s}
.victory-confetti i:nth-child(8){left:69%;background:#ffe05d;animation-delay:.39s}
.victory-confetti i:nth-child(9){left:77%;background:#52d0d4;animation-delay:.2s}
.victory-confetti i:nth-child(10){left:85%;background:#ef5b4f;animation-delay:.53s}
.victory-confetti i:nth-child(11){left:92%;background:#ffc82e;animation-delay:.28s}
.victory-confetti i:nth-child(12){left:47%;background:#fff0a0;animation-delay:.67s}

.celebration-active .victory-rays {
    animation:victory-rays-turn 12s linear infinite;
}
.celebration-active .victory-trophy {
    animation:trophy-arrive .8s cubic-bezier(.18,.82,.25,1.2) forwards,trophy-float 2.4s .85s ease-in-out infinite;
}
.celebration-active .trophy-crown {
    animation:crown-shine 1.6s .75s ease-in-out infinite;
}
.celebration-active .trophy-glow {
    animation:trophy-glow-pulse 1.4s .6s ease-in-out infinite;
}
.celebration-active .victory-confetti i {
    animation-name:victory-confetti-fall;
    animation-duration:2.3s;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
}

@keyframes trophy-arrive {
    0% { transform:scale(.35) translateY(90px) rotate(-14deg);opacity:0; }
    65% { transform:scale(1.1) translateY(-7px) rotate(4deg);opacity:1; }
    100% { transform:scale(1) translateY(0) rotate(0);opacity:1; }
}
@keyframes trophy-float {
    0%,100% { transform:translateY(0) rotate(-1deg); }
    50% { transform:translateY(-7px) rotate(1deg); }
}
@keyframes crown-shine {
    0%,100% { filter:brightness(1); }
    50% { filter:brightness(1.55) drop-shadow(0 0 7px #ffd75b); }
}
@keyframes trophy-glow-pulse {
    0%,100% { transform:translateX(-50%) scale(.9);opacity:.48; }
    50% { transform:translateX(-50%) scale(1.1);opacity:1; }
}
@keyframes victory-rays-turn {
    to { transform:translateX(-50%) rotate(360deg); }
}
@keyframes victory-confetti-fall {
    0% { transform:translate3d(0,-20px,0) rotate(0deg);opacity:0; }
    10% { opacity:1; }
    100% { transform:translate3d(22px,430px,0) rotate(720deg);opacity:.8; }
}
@keyframes rematch-button-glow {
    0%,100% { box-shadow:inset 0 0 0 2px rgba(255,232,165,.42),0 3px 0 #40190a,0 0 0 rgba(255,188,48,0); }
    50% { box-shadow:inset 0 0 0 2px rgba(255,242,191,.62),0 3px 0 #40190a,0 0 15px rgba(255,188,48,.52); }
}
@media (max-width:699.98px) and (max-height:650px) {
    .checkmate-dialog {
        min-height:350px;
        padding:17px 12px 13px;
    }
    .victory-trophy {
        width:130px;
        height:137px;
    }
    .trophy-cup {
        font-size:86px;
    }
    .trophy-crown {
        font-size:48px;
    }
    .trophy-glow {
        width:108px;
        height:108px;
    }
}
@media (prefers-reduced-motion:reduce) {
    .celebration-active .victory-rays,
    .celebration-active .victory-trophy,
    .celebration-active .trophy-crown,
    .celebration-active .trophy-glow,
    .celebration-active .victory-confetti i,
    .checkmate-play-again {
        animation:none !important;
    }
    .celebration-active .victory-trophy {
        transform:none;
        opacity:1;
    }
}


/* Honourable draw handshake celebration */
.draw-dialog {
    min-height:365px;
    background:
        radial-gradient(circle at 50% 38%,rgba(94,205,185,.18),transparent 36%),
        linear-gradient(155deg,#102c2d,#1f1710 58%,#321b10);
    border-color:#b99a58;
}
.draw-dialog .checkmate-label {
    color:#aee5d3;
    text-shadow:0 2px #173536,0 0 10px rgba(89,218,190,.38);
}
.draw-handshake-stage {
    position:relative;
    z-index:4;
    display:grid;
    width:174px;
    height:160px;
    margin:-2px 0 0;
    place-items:center;
}
.draw-handshake-glow {
    position:absolute;
    width:132px;
    height:132px;
    border:2px solid rgba(123,231,207,.46);
    border-radius:50%;
    opacity:0;
    background:radial-gradient(circle,rgba(105,229,200,.25),rgba(43,135,126,.08) 48%,transparent 70%);
    box-shadow:0 0 24px rgba(74,218,186,.34),inset 0 0 20px rgba(89,211,185,.17);
}
.draw-handshake-icon {
    position:relative;
    z-index:3;
    display:block;
    transform:scale(.25) translateY(28px);
    opacity:0;
    font-size:98px;
    line-height:1;
    filter:drop-shadow(0 8px 5px rgba(0,0,0,.58)) drop-shadow(0 0 8px rgba(255,207,100,.28));
}
.draw-spark {
    position:absolute;
    z-index:4;
    color:#d9fff4;
    opacity:0;
    font:900 19px/1 Georgia,serif;
    text-shadow:0 0 9px #6ee4cc;
}
.draw-spark-one { top:25px;left:14px; }
.draw-spark-two { top:17px;right:18px; }
.draw-spark-three { right:5px;bottom:30px; }
.draw-result-copy,
.draw-actions {
    opacity:0;
}
.draw-celebration-active .draw-handshake-icon {
    animation:draw-handshake-arrive 1.1s cubic-bezier(.18,.78,.25,1.12) forwards,
        draw-handshake-idle 1.8s 1.15s ease-in-out infinite;
}
.draw-celebration-active .draw-handshake-glow {
    animation:draw-handshake-glow 1.3s .28s ease-in-out infinite;
}
.draw-celebration-active .draw-spark {
    animation:draw-sparkle 1.15s .35s ease-in-out 2;
}
.draw-celebration-active .draw-spark-two { animation-delay:.5s; }
.draw-celebration-active .draw-spark-three { animation-delay:.66s; }
.draw-celebration-active .draw-result-copy,
.draw-celebration-active .draw-actions {
    animation:draw-result-reveal .42s 1.02s ease-out forwards;
}
@keyframes draw-handshake-arrive {
    0% { opacity:0;transform:scale(.25) translateY(40px) rotate(-9deg); }
    48% { opacity:1;transform:scale(1.12) translateY(-5px) rotate(5deg); }
    66% { transform:scale(.96) translateY(3px) rotate(-5deg); }
    82% { transform:scale(1.04) translateY(-2px) rotate(3deg); }
    100% { opacity:1;transform:scale(1) translateY(0) rotate(0); }
}
@keyframes draw-handshake-idle {
    0%,100% { transform:translateY(0) rotate(-2deg); }
    25% { transform:translateY(-3px) rotate(3deg); }
    50% { transform:translateY(1px) rotate(-3deg); }
    75% { transform:translateY(-2px) rotate(2deg); }
}
@keyframes draw-handshake-glow {
    0%,100% { opacity:.45;transform:scale(.86); }
    50% { opacity:1;transform:scale(1.09); }
}
@keyframes draw-sparkle {
    0%,100% { opacity:0;transform:scale(.35) rotate(0); }
    45% { opacity:1;transform:scale(1.2) rotate(110deg); }
}
@keyframes draw-result-reveal {
    from { opacity:0;transform:translateY(13px); }
    to { opacity:1;transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce) {
    .draw-celebration-active .draw-handshake-icon,
    .draw-celebration-active .draw-handshake-glow,
    .draw-celebration-active .draw-spark,
    .draw-celebration-active .draw-result-copy,
    .draw-celebration-active .draw-actions {
        animation:none !important;
        opacity:1;
        transform:none;
    }
}


/* Connection recovery and safe-refresh controls */
.connection-recovery {
    position:fixed;
    z-index:2450;
    top:58px;
    left:50%;
    display:grid;
    width:min(calc(100% - 20px),420px);
    grid-template-columns:auto minmax(0,1fr);
    gap:7px 9px;
    align-items:center;
    transform:translateX(-50%);
    padding:9px 10px;
    border:2px solid #b9823d;
    border-radius:10px;
    color:#f6dfb0;
    background:linear-gradient(145deg,rgba(49,26,14,.98),rgba(27,15,11,.98));
    box-shadow:0 8px 24px rgba(0,0,0,.52),inset 0 0 12px rgba(255,190,74,.08);
    font-family:system-ui,sans-serif;
}
.connection-recovery[hidden] { display:none; }
.connection-state-dot {
    grid-row:1 / span 2;
    width:13px;
    height:13px;
    border:2px solid rgba(255,255,255,.52);
    border-radius:50%;
    background:#e6a338;
    box-shadow:0 0 10px #e6a338;
}
.connection-recovery-copy {
    min-width:0;
}
.connection-recovery-copy strong,
.connection-recovery-copy small {
    display:block;
}
.connection-recovery-copy strong {
    font-size:12px;
    line-height:1.2;
}
.connection-recovery-copy small {
    margin-top:2px;
    color:#d5bc91;
    font-size:9px;
    line-height:1.25;
}
.connection-recovery-actions {
    grid-column:1 / -1;
    display:flex;
    gap:6px;
    justify-content:flex-end;
}
.connection-recovery-actions button {
    min-height:28px;
    padding:4px 10px;
    border:1px solid #b77a35;
    border-radius:6px;
    color:#f9e5b7;
    background:linear-gradient(#6a4326,#3f2718);
    font:800 9px/1 system-ui,sans-serif;
    cursor:pointer;
}
.connection-recovery-actions button:last-child {
    color:#4b270f;
    background:linear-gradient(#f0ca79,#b96b2d);
}
.connection-recovery[data-state="offline"] {
    border-color:#d45035;
    background:linear-gradient(145deg,rgba(78,23,16,.98),rgba(32,13,11,.98));
}
.connection-recovery[data-state="offline"] .connection-state-dot {
    background:#ff4935;
    box-shadow:0 0 12px #ff4935;
    animation:connection-danger-pulse .9s ease-in-out infinite;
}
.connection-recovery[data-state="reconnecting"] .connection-state-dot {
    animation:connection-retry-pulse .75s ease-in-out infinite;
}
.connection-recovery[data-state="online"],
.connection-recovery[data-state="restored"] {
    border-color:#4db58e;
    background:linear-gradient(145deg,rgba(18,60,50,.98),rgba(20,30,23,.98));
}
.connection-recovery[data-state="online"] .connection-state-dot,
.connection-recovery[data-state="restored"] .connection-state-dot {
    background:#55d39c;
    box-shadow:0 0 11px #55d39c;
}
@keyframes connection-danger-pulse {
    0%,100% { opacity:.58;transform:scale(.8); }
    50% { opacity:1;transform:scale(1.18); }
}
@keyframes connection-retry-pulse {
    0%,100% { opacity:.5;transform:scale(.72); }
    50% { opacity:1;transform:scale(1.14); }
}
@media (max-width:380px) {
    .connection-recovery { top:54px;width:calc(100% - 12px);padding:7px 8px; }
    .connection-recovery-actions button { padding-inline:8px; }
}
@media (prefers-reduced-motion:reduce) {
    .connection-recovery .connection-state-dot { animation:none !important; }
}


/* In-game player actions: surrender, draw offer and protected kick */
.fighter { position:relative; }
.fighter-action-trigger {
    position:absolute;
    z-index:8;
    top:0;
    display:grid;
    width:24px;
    height:24px;
    place-items:center;
    padding:0;
    border:1px solid #c99245;
    border-radius:50%;
    color:#ffe3a3;
    background:linear-gradient(#72411f,#351b10);
    box-shadow:0 2px 4px rgba(0,0,0,.55);
    font:900 18px/1 system-ui,sans-serif;
    cursor:pointer;
}
.white-fighter .fighter-action-trigger { left:0; }
.black-fighter .fighter-action-trigger { right:0; }
.fighter-action-trigger:focus-visible {
    outline:2px solid #ffe07a;
    outline-offset:2px;
}
.match-action-modal { z-index:2550; }
.match-action-dialog {
    display:flex;
    width:min(92%,340px);
    min-height:310px;
    flex-direction:column;
    gap:10px;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:22px 17px 17px;
    border:4px ridge #b77a34;
    color:#f5dfb2;
    background:
        radial-gradient(circle at 50% 17%,rgba(255,190,63,.14),transparent 32%),
        linear-gradient(155deg,#4a2817,#20140f 68%);
    box-shadow:inset 0 0 28px rgba(0,0,0,.6),0 12px 30px rgba(0,0,0,.62);
    text-align:center;
}
.match-action-dialog h2 {
    margin:0;
    color:#ffe09a;
    font:900 23px/1.1 Georgia,serif;
    text-shadow:0 2px #4a1e0b;
}
.match-action-dialog p {
    max-width:280px;
    margin:0;
    color:#d9c29b;
    font:11px/1.42 system-ui,sans-serif;
}
.match-action-list {
    display:grid;
    width:100%;
    max-width:265px;
    gap:7px;
}
.match-action-option,
.match-confirm-button {
    display:grid;
    min-height:40px;
    grid-template-columns:28px 1fr;
    gap:7px;
    align-items:center;
    padding:7px 11px;
    border:2px ridge #9d642f;
    border-radius:7px;
    color:#f8e1b0;
    background:linear-gradient(#724225,#3d2417);
    box-shadow:0 3px 0 #241108;
    font:800 11px/1 system-ui,sans-serif;
    text-align:left;
    cursor:pointer;
}
.match-action-option span { font-size:19px; }
.match-action-option.draw-action {
    border-color:#4f9f83;
    background:linear-gradient(#306d5d,#1d3e37);
}
.match-action-option.kick-action {
    border-color:#6e7d89;
    color:#d4d8d9;
    background:linear-gradient(#3d4a51,#222b30);
}
.match-action-option.surrender-action {
    border-color:#bf543a;
    background:linear-gradient(#833823,#4b2017);
}
.match-action-close {
    min-height:32px;
    padding:5px 17px;
    border:1px solid #997047;
    border-radius:6px;
    color:#e4c99b;
    background:#38251a;
    font:800 10px system-ui,sans-serif;
}
.match-confirm-actions {
    display:grid;
    width:100%;
    max-width:265px;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:4px;
}
.match-confirm-actions .match-confirm-button {
    display:grid;
    min-height:40px;
    grid-template-columns:1fr;
    place-items:center;
    text-align:center;
}
.match-confirm-button.confirm-danger {
    border-color:#d45c3c;
    color:#fff0d0;
    background:linear-gradient(#9a4028,#551f17);
}
.match-confirm-button.confirm-draw {
    border-color:#5ab596;
    color:#eafff7;
    background:linear-gradient(#347966,#1d493f);
}
.match-notice-icon {
    display:grid;
    width:105px;
    height:105px;
    place-items:center;
    border:3px solid rgba(244,203,107,.55);
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,207,96,.18),rgba(37,23,16,.12) 65%);
    box-shadow:0 0 22px rgba(255,190,55,.24),inset 0 0 17px rgba(255,205,96,.12);
    font-size:60px;
}
.match-notice-modal.notice-active .match-notice-icon {
    animation:match-notice-arrive .7s cubic-bezier(.18,.82,.25,1.18) forwards,
        match-notice-idle 2s .75s ease-in-out infinite;
}
@keyframes match-notice-arrive {
    0% { opacity:0;transform:scale(.25) rotate(-18deg); }
    65% { opacity:1;transform:scale(1.13) rotate(6deg); }
    100% { opacity:1;transform:scale(1) rotate(0); }
}
@keyframes match-notice-idle {
    0%,100% { transform:translateY(0); }
    50% { transform:translateY(-5px); }
}
@media (max-width:380px), (max-height:650px) {
    .fighter-action-trigger { width:20px;height:20px;font-size:15px; }
    .match-action-dialog { min-height:285px;padding:16px 13px 13px; }
}
@media (prefers-reduced-motion:reduce) {
    .match-notice-modal.notice-active .match-notice-icon { animation:none !important; }
}