/* Faltörő – megjelenés.
   A játéktér 5:3 arányú vászon, ami a rendelkezésre álló hely szűkebb
   oldalához igazodik. A vászonba rajzol a motor, minden más DOM. */

.ark-root {
    --brick-a: #e8514f;
    --brick-b: #f0913a;
    --brick-c: #f5c542;
    --brick-d: #5bbf6a;
    --brick-e: #3f8fd6;
    --brick-f: #9a63d6;
    --brick-strong2: #18b7a0;
    --brick-strong3: #5865e8;
    --brick-solid: #3a3f4f;
    --brick-bonus: #ffd23f;
    --brick-danger: #ff5470;
    --brick-a-svg: url('./assets/masonry.svg');
    --brick-b-svg: url('./assets/diagonal.svg');
    --brick-c-svg: url('./assets/sun.svg');
    --brick-d-svg: url('./assets/chevron.svg');
    --brick-e-svg: url('./assets/wave.svg');
    --brick-f-svg: url('./assets/lattice.svg');
    --brick-solid-svg: url('./assets/cracks.svg');
    --brick-bonus-svg: url('./assets/star.svg');
    --brick-danger-svg: url('./assets/bolt.svg');
    --brick-border: 6;
    --brick-radius: 7;
    --brick-inner-radius: 4;
    /* A perem világosítása a blokk saját színéhez képest. */
    --brick-lighten: .1;
    /* Az SVG minta világosítása. Külön áll a peremtől, hogy a minta halkítható
       legyen anélkül, hogy a keret is elhalványodna. */
    --brick-pattern-lighten: .07;
    --brick-filter: saturate(1.45) contrast(1.08);
    /* A fénymenet iránya CSS-logika szerint: 0 = felfelé, 90 = jobbra.
       180 = fentről lefelé, ez az eredeti függőleges menet. Az átlóshoz 135. */
    --brick-gloss-angle: 180;
    --brick-gloss-top: rgba(255, 255, 255, .25);
    --brick-gloss-mid: rgba(255, 255, 255, .03);
    --brick-gloss-bottom: rgba(20, 8, 38, .18);
    /* Meleg fehér fényfolt a blokk felületén: a közepén erős, a széle átlátszó.
       A bal felső sarokba pozicionálva, mintha onnan érkezne a fény. A hely a
       blokk saját méretének arányában, a sugár a hosszabb oldaléban. */
    --brick-light: rgba(255, 246, 226, .2);
    --brick-light-edge: rgba(255, 246, 226, 0);
    --brick-light-x: .14;
    --brick-light-y: .1;
    --brick-light-radius: .9;
    --brick-inner-shade: rgba(18, 8, 38, .08);
    --brick-texture-opacity: .42;
    --brick-pattern-opacity: 1;
    --brick-crack-opacity: .75;
    --brick-pattern-shadow: rgba(10, 6, 30, .18);
    --brick-pattern-blur: 5;
    --brick-pattern-offset-y: 2;
    --brick-bonus-pattern: #fff7d6;
    --brick-danger-pattern: #ffd166;
    --brick-hp-dot: rgba(255, 255, 255, .8);
    /* Villanás a blokkon, amikor a labda eltalálja. A részecskék mellé megy,
       nem helyettük. Az erőssége 0-ra állítva teljesen kikapcsolja. */
    --brick-flash: #fff4e2;
    --brick-flash-opacity: .55;
    --brick-flash-ms: 170;
    --capsule-life: #ff5470;
    --capsule-wide: #3f8fd6;
    --capsule-slow: #5bbf6a;
    --capsule-icon: #fff;
    /* A kapszula grafikája. Álló, 1:2 arányú SVG-t vár (viewBox="0 0 100 200",
       megadott width és height!). A rajz színe mindegy: az ikon a
       --capsule-icon, a háttérminta a kapszula saját színének világosabb
       változata lesz. Amíg a fájl nincs meg, a régi ♥ ↔ ↓ jel látszik. */
    --capsule-life-svg: url('./assets/capsule-life.svg');
    --capsule-wide-svg: url('./assets/capsule-wide.svg');
    --capsule-slow-svg: url('./assets/capsule-slow.svg');
    --capsule-pattern-svg: url('./assets/capsule-pattern.svg');
    --capsule-border: 3;
    --capsule-lighten: .22;
    --capsule-gloss-top: rgba(255, 255, 255, .38);
    --capsule-gloss-mid: rgba(255, 255, 255, .06);
    --capsule-gloss-bottom: rgba(20, 8, 38, .22);
    --capsule-pattern-opacity: .5;
    --capsule-icon-shadow: rgba(10, 6, 30, .35);
    --capsule-glow: rgba(255, 255, 255, .35);
    --capsule-blur: 8;
    --paddle-top: #fff;
    --paddle-mid: #b9a5ff;
    --paddle-bottom: #7051d5;
    --paddle-stroke: rgba(255, 255, 255, .9);
    --paddle-glow: rgba(147, 112, 255, .8);
    --paddle-blur: 16;
    --ball-trail-start: rgba(122, 82, 224, 0);
    --ball-trail-end: rgba(174, 142, 255, .42);
    --ball-trail-glow: rgba(151, 108, 255, .55);
    --ball-trail-blur: 18;
    --ball-top: #fff;
    --ball-mid: #eee9ff;
    --ball-bottom: #9474ed;
    --ball-stroke: rgba(255, 255, 255, .9);
    --ball-glow: rgba(151, 108, 255, .9);
    --ball-blur: 20;
    /* A gyökér maga rendezi a három sávot: fejléc, pálya, gombok – egymás
       alatt, normál folyamban. Szándékosan NINCS justify-content: ha a
       tartalom magasabb a doboznál, a középre igazítás mindkét végén kilökné,
       és a fejléc rácsúszna a vászonra. A pálya méretét a vászon saját
       korlátja adja, nem a szülő. */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: auto;
    color: #2d2440;
    text-align: center;
    background-color: #241b50;
    background-image: url('./assets/bg.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat
}

.game-engine-root.ark-root {
    min-height: auto
}

.ark-head {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

}

.ark-stat {
    padding: .45rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    font-weight: 900;
    font-size: clamp(.9rem, 2vw, 1.05rem);
    white-space: nowrap
}

.ark-lives {
    color: #e8514f;
    letter-spacing: .08em
}

.ark-timer {
    min-width: 5.4rem;
    color: #6f4fd1;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 16px rgba(151, 108, 255, .45)
}

/* A pálya a vászon köré simul, az üzenet pedig fölé úszik. Nem tölti ki a
   maradékot, csak zsugorodik, ha kevés a hely – így a fejléc és a gombok
   hozzátapadnak, nem szorulnak a képernyő szélére. A min-height: 0 nélkül a
   flex elem nem hajlandó a tartalma alá zsugorodni. */
.ark-board {
    position: relative;
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 12px auto;
    border-top: 2px solid rgba(255, 255, 255, 0.3);
    border-bottom: 2px solid rgba(255, 255, 255, 0.3); 
    width: 100%
}

/* FIGYELEM: ennek az aránynak egyeznie kell a constants.js FIELD_W/FIELD_H
   arányával (most 1500×900 = 5:3). Ha eltér, a motor NEM nyújtja szét a képet
   – arányt tart, és a különbség üres sávként jelenik meg a széleken. */
.ark-canvas {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 3;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    touch-action: none;
    cursor: none
}

/* Érintőgombok az ütőhöz, a pálya alatt */
.ark-controls {
    flex: 0 0 auto;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    margin: 0 auto
}

.ark-controls .button {
    display: inline-flex !important;
    flex: 0 0 76px !important;
    align-items: center;
    justify-content: center;
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    height: 64px;
    min-height: 64px;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 20px;
    touch-action: none;
    user-select: none
}

/* Amíg a TMX pálya betölt, illetve ha nem sikerült – a vászonra úszik rá */
.ark-load,
.ark-error {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 1rem 1.6rem;
    border-radius: 14px;
    background: rgba(45, 36, 64, .88);
    color: #fff;
    font-weight: 700;
    text-align: center;
    pointer-events: none
}

.ark-error {
    background: rgba(120, 28, 48, .9)
}

.ark-msg {
    position: absolute;
    left: 50%;
    bottom: 16%;
    transform: translateX(-50%);
    padding: .6rem 1.2rem;
    border-radius: 999px;
    background: rgba(45, 36, 64, .88);
    color: #fff;
    font-weight: 800;
    font-size: clamp(.85rem, 2vw, 1rem);
    white-space: nowrap;
    pointer-events: none;
    animation: ark-luktet 1.6s ease-in-out infinite
}

@keyframes ark-luktet {

    0%,
    100% {
        opacity: .75
    }

    50% {
        opacity: 1
    }
}

/* DOM-os brickminta a fejlesztői előnézethez; ugyanazt a témát használja, mint a canvas. */
.ark-brick {
    --brick-color: var(--brick-a);
    --brick-image: var(--brick-a-svg);
    --brick-edge: color-mix(in srgb, var(--brick-color), white calc(var(--brick-lighten) * 100%));
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    border: calc(var(--brick-border) * 1px) solid var(--brick-edge);
    border-radius: calc((var(--brick-radius) + 2) * 1px);
    background-color: var(--brick-color);
    background-image: var(--brick-image), linear-gradient(var(--brick-gloss-top), var(--brick-gloss-mid) 42%, var(--brick-gloss-bottom));
    background-size: 100% 100%;
    background-repeat: no-repeat;
    box-shadow: 0 calc(var(--brick-pattern-offset-y) * 1px) calc(var(--brick-pattern-blur) * 1px) var(--brick-pattern-shadow);
    filter: var(--brick-filter)
}

.ark-brick::after {
    content: attr(data-mark);
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: color-mix(in srgb, var(--brick-color), white 35%);
    font-size: 30px;
    font-weight: 900
}

.ark-brick-a {
    --brick-color: var(--brick-a);
    --brick-image: var(--brick-a-svg)
}

.ark-brick-b {
    --brick-color: var(--brick-b);
    --brick-image: var(--brick-b-svg)
}

.ark-brick-c {
    --brick-color: var(--brick-c);
    --brick-image: var(--brick-c-svg)
}

.ark-brick-d {
    --brick-color: var(--brick-d);
    --brick-image: var(--brick-d-svg)
}

.ark-brick-e {
    --brick-color: var(--brick-e);
    --brick-image: var(--brick-e-svg)
}

.ark-brick-f {
    --brick-color: var(--brick-f);
    --brick-image: var(--brick-f-svg)
}

.ark-brick-strong2 {
    --brick-color: var(--brick-strong2);
    --brick-image: none
}

.ark-brick-strong3 {
    --brick-color: var(--brick-strong3);
    --brick-image: none
}

.ark-brick-solid {
    --brick-color: var(--brick-solid);
    --brick-image: var(--brick-solid-svg)
}

.ark-brick-bonus {
    --brick-color: var(--brick-bonus);
    --brick-image: none
}

.ark-brick-bonus::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--brick-bonus-pattern);
    -webkit-mask: var(--brick-bonus-svg) center / 100% 100% no-repeat;
    mask: var(--brick-bonus-svg) center / 100% 100% no-repeat
}

.ark-brick-danger {
    --brick-color: var(--brick-danger);
    --brick-image: none
}

.ark-brick-danger::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--brick-danger-pattern);
    -webkit-mask: var(--brick-danger-svg) center / 100% 100% no-repeat;
    mask: var(--brick-danger-svg) center / 100% 100% no-repeat
}

@media (max-width: 650px) {
    .ark-root {
        padding: 8px
    }

    .ark-board {
        width: 100%
    }

    .ark-controls {
        width: 100%;
        gap: 12px;
        margin-top: 10px
    }

    .ark-controls .button {
        flex-basis: 68px !important;
        width: 68px !important;
        min-width: 68px !important;
        max-width: 68px !important;
        height: 58px;
        min-height: 58px
    }

    .ark-canvas {
        cursor: auto
    }
}

/* Mennyi függőleges hely megy el a vászon körül: az oldal fejléce, a játék
   fejléce, a gombsor és a belső margók. A vászon ennyivel kevesebbet kap a
   képernyő magasságából. Ez az egyetlen hangolható szám az elrendezésben –
   ha a fejléc vagy a gombok mérete változik, itt kell igazítani. */
.ark-root {
    --ark-chrome: 340px
}

/* Alacsony ablakban a fejléc és a gombok összehúzódnak, így kevesebb hely megy
   el a vászon körül – ezért lesz kisebb a keretérték is. */
@media (max-height: 760px) {
    .ark-root {
        --ark-chrome: 300px
    }

    .ark-head {
        gap: 6px;
        margin-bottom: 6px
    }

    .ark-stat {
        padding: .3rem .8rem
    }

    .ark-controls {
        margin-top: 8px
    }

    .ark-controls .button {
        height: 52px;
        min-height: 52px
    }
}

@media (prefers-reduced-motion: reduce) {

    .ark-msg {
        animation: none
    }
}
/* ── Mini pályaelőnézet a pályaválasztóban ─────────────────────────────
   Az emoji helyett a pálya téglafala. A rácsméret pályánként változik
   (11x10, 12x10 vagy 15x10), ezért az oszlop- és sorszám a mini-icon.js-ből
   érkezik egyedi tulajdonságként. Ugyanaz a felépítés, mint a mahjong
   .mahjong-mini-grid megoldásánál. */

.arkanoid-mini-wall {
    display: grid;
    grid-template-columns: repeat(var(--cols, 12), 1fr);
    grid-template-rows: repeat(var(--rows, 10), 1fr);
    gap: 1px;
    width: 92px;
    aspect-ratio: var(--cols, 12) / var(--rows, 10);
    margin: 0 auto 10px auto;
    pointer-events: none;
}

.arkanoid-mini-brick {
    background-color: transparent;
    border-radius: 1px;
}

.arkanoid-mini-brick.is-on {
    background-color: var(--brick);
    box-shadow: inset 0 0 1px rgba(0, 0, 0, .28);
}

.level-button:hover .arkanoid-mini-brick.is-on {
    filter: brightness(1.12) saturate(1.06);
}

@media (max-width: 480px) {
    .arkanoid-mini-wall {
        width: 74px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .level-button:hover .arkanoid-mini-brick.is-on {
        filter: none;
    }
}