body.siege-active{
    overflow:hidden;
}

body.siege-active #app{
    height:100dvh;
}

.siege-page{
    box-sizing:border-box;
    display:grid;
    grid-template-rows:auto minmax(0, 1fr) auto;
    gap:10px;
    width:100%;
    height:100dvh;
    padding:max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    background:
        radial-gradient(circle at 50% 0, rgba(75,163,255,.16), transparent 42%),
        linear-gradient(160deg, #071a2c, #020b16 64%);
}

.siege-game{ display:contents; }
.siege-game[hidden]{ display:none; }

.siege-menu{
    grid-row:1 / -1;
    display:grid;
    min-height:0;
    border:1px solid rgba(139,233,255,.16);
    border-radius:20px;
    background:
        radial-gradient(circle at 50% 8%, rgba(87,198,255,.18), transparent 34%),
        linear-gradient(rgba(2,11,22,.48), rgba(2,11,22,.85)),
        url("/assets/images/characters/playercastle.webp") center 18% / min(66vh, 620px) auto no-repeat,
        #04111f;
    place-items:center;
}

.siege-menu[hidden]{ display:none; }

.siege-menu-card{
    width:min(720px, calc(100% - 32px));
    padding:clamp(22px, 4vw, 42px);
    border:1px solid rgba(139,233,255,.3);
    border-radius:20px;
    background:rgba(3,15,27,.88);
    box-shadow:0 28px 80px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.06);
    backdrop-filter:blur(14px);
    text-align:center;
}

.siege-menu-kicker,
.siege-menu-card h1,
.siege-menu-intro{ margin:0; }

.siege-menu-kicker{
    color:var(--secondary);
    font-size:.7rem;
    font-weight:800;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.siege-menu-card h1{
    margin-top:5px;
    color:var(--primary-light);
    font-family:"Cinzel Decorative", "Times New Roman", serif;
    font-size:clamp(2.2rem, 6vw, 4.5rem);
    line-height:1;
    text-shadow:0 5px 30px rgba(58,164,255,.35);
}

.siege-menu-intro{
    max-width:540px;
    margin:12px auto 22px;
    color:var(--text-muted);
    line-height:1.5;
}

.siege-menu-difficulties{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:9px;
    margin:0;
    padding:0;
    border:0;
}

.siege-menu-difficulties legend{
    width:100%;
    margin-bottom:8px;
    color:#e9f7ff;
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.siege-menu-difficulties button,
.siege-menu-actions button,
.siege-menu-back,
.siege-tutorial-actions button{
    border:1px solid rgba(139,233,255,.2);
    border-radius:11px;
    background:rgba(255,255,255,.055);
    color:var(--text);
    font:inherit;
    cursor:pointer;
}

.siege-menu-difficulties button{
    display:grid;
    gap:5px;
    min-height:78px;
    padding:11px;
}

.siege-menu-difficulties button strong{ color:var(--primary-light); font-size:.9rem; }
.siege-menu-difficulties button span{ color:var(--text-muted); font-size:.65rem; line-height:1.35; }
.siege-menu-difficulties button[aria-pressed="true"]{
    border-color:var(--secondary);
    background:linear-gradient(145deg, rgba(40,117,207,.38), rgba(43,215,224,.12));
    box-shadow:0 0 0 2px rgba(92,190,255,.2), 0 10px 26px rgba(0,0,0,.25);
    transform:translateY(-2px);
}

.siege-menu-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:18px;
}

.siege-menu-actions button{ min-height:48px; font-weight:800; }
.siege-menu-play{ background:linear-gradient(135deg, var(--primary), #2875cf) !important; box-shadow:var(--shadow-button); }
.siege-menu-tutorial{ color:var(--primary-light) !important; }
.siege-menu-back{ margin-top:14px; padding:7px 12px; border-color:transparent; background:transparent; color:var(--text-muted); font-size:.72rem; }

.siege-tutorial{
    position:absolute;
    inset:0;
    z-index:20;
    display:grid;
    padding:20px;
    border-radius:20px;
    background:rgba(1,7,14,.78);
    backdrop-filter:blur(10px);
    place-items:center;
}

.siege-tutorial[hidden]{ display:none; }
.siege-tutorial-card{
    width:min(680px, 100%);
    min-height:390px;
    padding:26px;
    border:1px solid rgba(139,233,255,.32);
    border-radius:18px;
    background:linear-gradient(150deg, #0a263c, #040f1c);
    box-shadow:0 25px 80px rgba(0,0,0,.65);
}

.siege-tutorial-count{ margin:0; color:var(--secondary); font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.siege-tutorial-step{ text-align:center; }
.siege-tutorial-step h2{ margin:8px 0; color:var(--primary-light); font-family:"Cinzel Decorative", serif; }
.siege-tutorial-step > p{ max-width:560px; margin:0 auto; color:var(--text-muted); line-height:1.6; }
.siege-tutorial-mark{ display:block; margin-top:12px; color:#a9efff; font-size:3.2rem; line-height:1; }
.siege-tutorial kbd{ padding:2px 7px; border:1px solid rgba(255,255,255,.25); border-radius:5px; background:rgba(255,255,255,.08); font:inherit; font-weight:800; }
.siege-tutorial-keys{ display:block; margin-top:28px; color:#fff; font-size:1.05rem; }
.siege-tutorial-obstacles{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px; }
.siege-tutorial-obstacles span{ display:grid; grid-template-columns:34px 1fr; align-items:center; padding:7px; border-radius:9px; background:rgba(255,255,255,.05); font-size:.72rem; text-align:left; }
.siege-tutorial-obstacles img,.siege-tutorial-slime{ grid-row:1 / 3; width:30px; height:30px; object-fit:contain; }
.siege-tutorial-obstacles small{ color:var(--text-muted); font-size:.62rem; }
.siege-tutorial-slime{ border-radius:50%; background:radial-gradient(circle at 35% 25%, #e1a6ff, #772ea2 55%, #3d185a); }
.siege-tutorial-actions{ display:flex; justify-content:center; gap:8px; margin-top:24px; }
.siege-tutorial-actions button{ min-width:94px; padding:9px 14px; }

.siege-topbar,
.siege-controls,
.siege-fighter{
    border:1px solid rgba(139,233,255,.17);
    background:rgba(5,20,34,.88);
    box-shadow:0 16px 42px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.045);
    backdrop-filter:blur(12px);
}

.siege-topbar{
    display:grid;
    grid-template-columns:auto minmax(170px, 1fr) auto auto auto auto;
    align-items:center;
    gap:14px;
    min-height:58px;
    padding:7px 10px;
    border-radius:15px;
}

.siege-difficulty{
    display:grid;
    gap:2px;
    color:var(--text-muted);
    font-size:.58rem;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.siege-difficulty select{
    min-width:86px;
    padding:5px 25px 5px 8px;
    border:1px solid rgba(139,233,255,.22);
    border-radius:8px;
    background:#0c2236;
    color:var(--text);
    font:inherit;
    font-size:.7rem;
    font-weight:700;
    text-transform:none;
}

.siege-back,
.siege-button,
.siege-music button{
    min-height:40px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:11px;
    background:rgba(255,255,255,.065);
    color:var(--text);
    font:inherit;
    font-weight:700;
    cursor:pointer;
    transition:transform .18s, filter .18s, opacity .18s, border-color .18s;
}

.siege-back{
    padding:8px 13px;
    color:var(--primary-light);
}

.siege-back:hover,
.siege-button:hover:not(:disabled),
.siege-music button:hover{
    transform:translateY(-1px);
    border-color:rgba(139,233,255,.52);
    filter:brightness(1.12);
}

.siege-button{
    padding:8px 16px;
}

.siege-button--primary{
    min-width:170px;
    border-color:transparent;
    border-radius:999px;
    background:linear-gradient(135deg, var(--primary), #2875cf);
    box-shadow:var(--shadow-button);
}

.siege-button:disabled{
    opacity:.42;
    cursor:not-allowed;
}

.siege-title p,
.siege-title h1{
    margin:0;
}

.siege-title p{
    color:var(--secondary);
    font-size:.62rem;
    font-weight:700;
    letter-spacing:.15em;
    text-transform:uppercase;
}

.siege-title h1{
    color:var(--primary-light);
    font-family:"Cinzel Decorative", "Times New Roman", serif;
    font-size:clamp(1.25rem, 2.4vw, 2rem);
    line-height:1.05;
}

.siege-match-hud{
    display:flex;
    gap:8px;
}

.siege-match-hud div{
    min-width:92px;
    padding:6px 10px;
    border-radius:9px;
    background:rgba(255,255,255,.045);
}

.siege-match-hud span,
.siege-match-hud strong{
    display:block;
}

.siege-match-hud span{
    color:var(--text-muted);
    font-size:.6rem;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.siege-match-hud strong{
    margin-top:2px;
    font-size:.86rem;
}

.siege-arena{
    display:grid;
    grid-template-columns:minmax(225px, 260px) minmax(440px, 1fr) minmax(185px, 230px);
    gap:10px;
    min-height:0;
}

.siege-fighter{
    box-sizing:border-box;
    overflow:hidden auto;
    min-height:0;
    padding:11px;
    border-radius:16px;
    scrollbar-width:thin;
}

.siege-fighter--eris{
    border-color:rgba(230,194,113,.25);
    background:linear-gradient(180deg, rgba(56,42,79,.9), rgba(10,15,29,.94));
}

.siege-fighter-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}

.siege-fighter-heading span{
    color:var(--text-muted);
    font-size:.62rem;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.siege-fighter-name{
    margin:0;
    color:var(--secondary);
    font-family:"Cinzel Decorative", "Times New Roman", serif;
    font-size:1rem;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.siege-fighter--eris .siege-fighter-name{
    color:#f0d080;
}

.siege-character{
    display:block;
    width:min(140px, 100%);
    aspect-ratio:1;
    margin:2px auto;
}

.siege-character--eris{
    width:min(112px, 72%);
}

.siege-fighter--aqua .siege-character{
    width:min(102px, 72%);
}

.siege-build-palette{
    display:grid;
    gap:5px;
    margin-top:9px;
}

.siege-build-option,
.siege-rotate{
    box-sizing:border-box;
    width:100%;
    border:1px solid rgba(139,233,255,.13);
    border-radius:9px;
    background:rgba(2,11,22,.5);
    color:var(--text);
    font:inherit;
}

.siege-build-option{
    display:grid;
    grid-template-columns:38px minmax(0, 1fr) auto;
    align-items:center;
    gap:7px;
    min-height:43px;
    padding:4px 7px;
    text-align:left;
    cursor:pointer;
    transition:border-color .16s, background .16s, box-shadow .16s, transform .16s;
}

.siege-build-option:hover,
.siege-build-option.is-selected{
    border-color:rgba(117,211,255,.78);
    background:rgba(40,117,207,.2);
}

.siege-build-option.is-selected{
    box-shadow:0 0 0 2px rgba(92,190,255,.22), inset 3px 0 var(--secondary);
    transform:translateX(2px);
}

.siege-build-option span:nth-child(2){ min-width:0; }

.siege-build-option strong,
.siege-build-option small{
    display:block;
}

.siege-build-option strong{
    overflow:hidden;
    font-size:.67rem;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.siege-build-option small{
    overflow:hidden;
    margin-top:2px;
    color:var(--text-muted);
    font-size:.56rem;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.siege-build-option b{
    color:var(--secondary);
    font-size:.78rem;
}

.siege-build-option.is-unaffordable:not(.is-selected){ opacity:.62; }
.siege-build-option.is-unaffordable b{ color:#ff8d96; }
.siege-build-option.is-at-limit:not(.is-selected){ opacity:.52; }
.siege-build-option.is-at-limit b{ color:#ff8d96; }

.siege-build-option i{ font-style:normal; }

.siege-build-icon{
    position:relative;
    display:grid;
    overflow:hidden;
    width:32px;
    height:32px;
    border-radius:8px;
    background:rgba(255,255,255,.07);
    place-items:center;
}

.siege-build-icon img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}

[data-siege-obstacle="wall"] .siege-build-icon img{
    transform:scale(2.8);
}

.siege-build-icon--slime::before{
    width:29px;
    height:20px;
    border:2px solid rgba(234,185,255,.72);
    border-radius:48% 55% 44% 50%;
    background:radial-gradient(circle at 34% 28%, #e1a6ff 0 12%, #8c48bd 35%, #4f216f 100%);
    box-shadow:inset -4px -3px 7px rgba(34,7,55,.45), 0 3px 7px rgba(145,63,195,.35);
    content:"";
    transform:skewX(-7deg);
}

.siege-rotate{
    min-height:34px;
    padding:5px 8px;
    color:var(--primary-light);
    font-size:.65rem;
    font-weight:700;
    cursor:pointer;
}

.siege-rotate:disabled{
    opacity:.35;
    cursor:not-allowed;
}

.siege-rotate kbd{
    padding:1px 4px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:4px;
    background:rgba(255,255,255,.08);
    font:inherit;
}

.siege-fighter-stats{
    display:grid;
    gap:5px;
}

.siege-fighter-stats div{
    display:flex;
    justify-content:space-between;
    gap:7px;
    padding:6px 7px;
    border-radius:8px;
    background:rgba(2,11,22,.46);
    font-size:.72rem;
}

.siege-fighter-stats span,
.siege-rock-hp{
    color:var(--text-muted);
}

.siege-fighter-stats .siege-current-money{
    display:grid;
    gap:2px;
    padding:8px 9px;
    border:1px solid rgba(255,216,106,.25);
    background:linear-gradient(135deg, rgba(255,201,73,.13), rgba(40,117,207,.12));
}

.siege-current-money span{
    font-size:.58rem;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.siege-current-money strong{
    color:#ffe28a;
    font-size:.94rem;
}

.siege-current-money i{ color:#ffd05b; font-style:normal; }

.siege-boulder-label{
    min-height:27px;
    margin:8px 0 4px;
    font-size:.68rem;
    font-weight:700;
    line-height:1.3;
    text-align:center;
    text-transform:uppercase;
}

.siege-progress{
    overflow:hidden;
    height:7px;
    border-radius:999px;
    background:rgba(2,11,22,.72);
}

.siege-progress i{
    display:block;
    width:0;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg, #2875cf, var(--secondary));
    transition:width .12s linear;
}

.siege-progress--eris i{
    background:linear-gradient(90deg, #7c5cad, #f0d080);
}

.siege-rock-hp{
    margin:5px 0 0;
    font-size:.68rem;
    text-align:center;
}

.siege-scrying-glass{
    position:relative;
    overflow:hidden;
    width:min(184px, 112%);
    aspect-ratio:1;
    margin:8px auto 0;
    border:2px solid rgba(240,208,128,.52);
    border-radius:50%;
    background:#071421;
    box-shadow:0 0 0 3px rgba(122,91,172,.2), 0 0 18px rgba(240,208,128,.16);
}

#siegeErisMonitor{
    display:block;
    width:100%;
    height:100%;
}

.siege-stage{
    position:relative;
    overflow:hidden;
    min-width:0;
    min-height:0;
    border:1px solid rgba(129,197,255,.28);
    border-radius:17px;
    background:#06131f;
    box-shadow:inset 0 0 45px rgba(0,0,0,.5);
}

#siegeCanvas{
    display:block;
    width:100%;
    height:100%;
    min-height:360px;
    cursor:grab;
    touch-action:none;
}

#siegeCanvas.is-panning{ cursor:grabbing; }

.siege-build-tooltip{
    position:absolute;
    z-index:4;
    display:grid;
    gap:2px;
    min-width:132px;
    padding:7px 9px;
    border:1px solid rgba(117,211,255,.55);
    border-radius:9px;
    background:rgba(3,16,29,.94);
    box-shadow:0 8px 24px rgba(0,0,0,.42);
    pointer-events:none;
}

.siege-build-tooltip[hidden]{ display:none; }
.siege-build-tooltip strong{ color:var(--primary-light); font-size:.7rem; }
.siege-build-tooltip span{ color:var(--text-muted); font-size:.63rem; }
.siege-build-tooltip.is-insufficient{ border-color:rgba(255,92,105,.72); }
.siege-build-tooltip.is-insufficient strong,
.siege-build-tooltip.is-insufficient span{ color:#ff9ca4; }

.siege-message{
    position:absolute;
    right:12px;
    bottom:11px;
    left:12px;
    z-index:2;
    width:max-content;
    max-width:calc(100% - 24px);
    margin:0 auto;
    padding:8px 14px;
    border:1px solid rgba(139,233,255,.22);
    border-radius:999px;
    background:rgba(2,11,22,.84);
    box-shadow:0 8px 24px rgba(0,0,0,.32);
    font-size:.78rem;
    text-align:center;
}

.siege-game[data-result="VICTORY"] .siege-stage{
    border-color:rgba(255,226,138,.86);
    animation:siege-victory-glow 1.2s ease-in-out infinite alternate;
}

.siege-game[data-result="VICTORY"] .siege-stage::after{
    position:absolute;
    inset:0;
    z-index:3;
    display:grid;
    background:radial-gradient(circle, rgba(255,221,116,.2), rgba(6,19,31,.5) 72%);
    color:#fff0af;
    content:"VICTORY";
    font-family:"Cinzel Decorative", "Times New Roman", serif;
    font-size:clamp(2.4rem, 7vw, 5.8rem);
    font-weight:900;
    letter-spacing:.08em;
    pointer-events:none;
    place-items:center;
    text-shadow:0 0 16px #e8bb4f, 0 5px 28px rgba(0,0,0,.8);
}

@keyframes siege-victory-glow{
    from{ box-shadow:inset 0 0 45px rgba(0,0,0,.5), 0 0 10px rgba(255,213,92,.28); }
    to{ box-shadow:inset 0 0 25px rgba(255,220,104,.18), 0 0 34px rgba(255,213,92,.72); }
}

.siege-controls{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:12px;
    min-height:56px;
    padding:7px 10px;
    border-radius:15px;
}

.siege-control-help{
    grid-column:1 / -1;
    display:flex;
    justify-content:center;
    gap:8px;
    margin:0;
    color:rgba(225,240,255,.7);
    font-size:.7rem;
    line-height:1.2;
    text-align:center;
}

.siege-control-group{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:4px 8px;
    border:1px solid transparent;
    border-radius:7px;
    transition:background .18s, border-color .18s, color .18s;
}

.siege-control-group b{
    color:var(--text-muted);
    font-size:.58rem;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.siege-control-group kbd{
    min-width:17px;
    padding:1px 4px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:4px;
    background:rgba(255,255,255,.08);
    color:var(--text);
    font:inherit;
    font-weight:800;
}

.siege-control-group.is-active{
    border-color:rgba(117,211,255,.35);
    background:rgba(40,117,207,.17);
    color:#eef9ff;
}

.siege-control-group.is-active b{ color:var(--secondary); }

.siege-build-info{
    display:flex;
    flex-wrap:wrap;
    gap:8px 15px;
    color:var(--text-muted);
    font-size:.72rem;
}

.siege-build-info strong{
    color:var(--text);
}

.siege-music{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
}

.siege-music button{
    display:grid;
    width:34px;
    min-height:34px;
    padding:0;
    place-items:center;
    color:var(--primary-light);
}

.siege-music [data-playing="true"] .siege-play-icon,
.siege-music [data-playing="false"] .siege-pause-icon{
    display:none;
}

.siege-music label{
    display:flex;
    align-items:center;
    gap:6px;
    color:var(--primary-light);
}

.siege-music input{
    --siege-volume:38%;
    width:82px;
    height:18px;
    margin:0;
    appearance:none;
    -webkit-appearance:none;
    background:transparent;
    cursor:pointer;
}

.siege-music input::-webkit-slider-runnable-track{
    height:4px;
    border-radius:999px;
    background:linear-gradient(to right, var(--secondary) 0 var(--siege-volume), rgba(255,255,255,.16) var(--siege-volume) 100%);
}

.siege-music input::-webkit-slider-thumb{
    width:14px;
    height:14px;
    margin-top:-5px;
    appearance:none;
    -webkit-appearance:none;
    border:2px solid #d9f5ff;
    border-radius:50%;
    background:var(--primary);
}

.siege-music input::-moz-range-track{
    height:4px;
    border-radius:999px;
    background:linear-gradient(to right, var(--secondary) 0 var(--siege-volume), rgba(255,255,255,.16) var(--siege-volume) 100%);
}

.siege-music input::-moz-range-thumb{
    width:11px;
    height:11px;
    border:2px solid #d9f5ff;
    border-radius:50%;
    background:var(--primary);
}

@media (max-width:1000px){
    body.siege-active{
        overflow:auto;
    }

    body.siege-active #app,
    .siege-page{
        height:auto;
        min-height:100dvh;
    }

    .siege-page{
        grid-template-rows:auto auto auto;
    }

    .siege-topbar{
        grid-template-columns:auto 1fr auto;
    }

    .siege-match-hud{
        grid-column:1 / -1;
        grid-row:2;
    }

    .siege-match-hud div{
        flex:1;
    }

    .siege-arena{
        grid-template-columns:220px minmax(0, 1fr);
        grid-template-rows:auto minmax(480px, 68vh);
    }

    .siege-fighter--eris{
        grid-column:1 / -1;
        display:grid;
        grid-template-columns:110px 1fr minmax(180px, 260px);
        gap:8px 14px;
        align-items:center;
    }

    .siege-fighter--eris .siege-fighter-heading,
    .siege-fighter--eris .siege-character{
        grid-column:1;
    }

    .siege-fighter--eris .siege-fighter-stats,
    .siege-fighter--eris .siege-boulder-label,
    .siege-fighter--eris .siege-progress,
    .siege-fighter--eris .siege-rock-hp{
        grid-column:2;
    }

    .siege-scrying-glass{
        grid-column:3;
        grid-row:1 / span 5;
        margin:0;
    }
}

@media (max-width:650px){
    .siege-topbar{
        grid-template-columns:1fr auto;
    }

    .siege-title{
        display:none;
    }

    .siege-arena{
        grid-template-columns:1fr;
        grid-template-rows:auto 520px auto;
    }

    .siege-fighter--aqua,
    .siege-fighter--eris{
        display:grid;
        grid-template-columns:92px 1fr;
        gap:6px 12px;
        align-items:center;
    }

    .siege-fighter-heading{
        grid-column:1 / -1;
    }

    .siege-character,
    .siege-character--eris{
        grid-column:1;
        grid-row:2 / span 4;
        width:92px;
    }

    .siege-fighter-stats,
    .siege-build-palette,
    .siege-boulder-label,
    .siege-progress,
    .siege-rock-hp,
    .siege-fighter--eris .siege-fighter-stats,
    .siege-fighter--eris .siege-boulder-label,
    .siege-fighter--eris .siege-progress,
    .siege-fighter--eris .siege-rock-hp{
        grid-column:2;
    }

    .siege-build-palette{
        grid-column:1 / -1;
    }

    .siege-scrying-glass{
        grid-column:1 / -1;
        grid-row:auto;
        width:min(340px, 100%);
        margin:6px auto 0;
    }

    .siege-controls{
        grid-template-columns:1fr;
    }

    .siege-build-info,
    .siege-music{
        justify-content:center;
    }

    .siege-button--primary{
        width:100%;
    }
}