:root {
            --cell-w: clamp(28px, 6.66vw, 120px);
            --cell-h: calc(var(--cell-w) / 1.17);
            --gap: 0px;
            --b: 1px;
            --chip-w: clamp(22px, 2.5vw, 34px);
            --chip-h: calc(var(--chip-w) * 1.09);
            --stack-offset: clamp(4px, 0.8vmin, 7px);
        }

        * {
            box-sizing: border-box;
        }

        html,
        body {
            height: 100%;
            margin: 0;
            font-family: Arial, sans-serif;
            background: #fff;
        }

        .app {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: clamp(12px, 4vw, 20px);
            height: 100dvh;
            overflow: auto;
        }

        .shell {
            max-width: 1720px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 30px;
        }

        .board { 
            display:flex; 
            flex-direction:column; 
            gap:0; 
        }

        .top { 
            display:flex; 
            gap:0; 
            align-items:stretch; 
            justify-content:center; 
        }

        .bot { 
            display:flex; 
            flex-direction:column; gap:0; 
            padding-left: calc(var(--cell-w) * 1.5); 
        }

        .nums {
            display:flex;
            flex-direction:column;
            gap:0;
        }

        .nums-row { 
            display:flex; 
            gap:0; 
        }

        .c21 { 
            display:flex; 
            flex-direction:column; 
            gap:0; 
        }

        .doz { 
            display:flex; 
            gap:0; 
        }
        .even { 
            display:flex; 
            gap:0; 
        }

        .cell.zero {
            width: calc(var(--cell-w) * 1.5);
            height: calc(var(--cell-h) * 3);
            display: flex;
            align-items: center;
            justify-content: center;
            background: #14a84a;
            color: #fff;
            font-size: calc(var(--cell-h) * 0.5);
            border-radius: 999px 0 0 999px;
            position: relative;
        }

        .cell {
            width: var(--cell-w);
            height: var(--cell-h);
            border: var(--b) solid #111;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            font-size: calc(var(--cell-h) * 0.42);
            position: relative;
            user-select: none;
            background: #000;
            color: #fff;
            overflow: visible;
        }

        .cell.red {
            background: #d40000;
        }

        .cell.black {
            background: #000;
        }

        .cell.white {
            background: #fff;
            color: #000;
            font-size: calc(var(--cell-h) * 0.35);
        }

        .stacks {
            position: absolute;
            inset: 2px;
            pointer-events: none;
            z-index: 10;
            display: block;
            overflow: visible;
        
            --dx-max: calc((100% - var(--chip-w)) / 2 - 2px);
            --dy-max: calc((100% - var(--chip-h)) / 2 - 2px);
            --dx: min(var(--dx-max), calc(var(--chip-w) * 0.55));
            --dy: min(var(--dy-max), calc(var(--chip-h) * 0.55));
        }

        .stack {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            height: calc(var(--chip-h) + 4 * var(--stack-offset));
        }

        .big-cell {
            height: calc(var(--cell-h));
            border: 1px solid #111;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: calc(var(--cell-h) * 0.38);
            font-weight: 500;
            background: #fff;
            color: #000;
            user-select: none;
            box-sizing: border-box;
            white-space: nowrap;
        }

        /* 4 клетки */
        .big-cell.w4 {
            width: calc(var(--cell-w) * 4);
        }

        /* 2 клетки */
        .big-cell.w2 {
            width: calc(var(--cell-w) * 2);
        }

        .cell,
        .zero,
        .big-cell {
            line-height: 1;
        }

        .actions {
            display: flex;
            gap: 20px;
            align-items: center;
        }

        .chips {
            display: flex;
            gap: 18px;
            align-items: center;
        }

        .chip-pick {
            width: 92px;
            height: 92px;
            background-image: url("../images/chips-sprite.webp");
            background-repeat: no-repeat;
            background-size: 300% 100%;
            background-position: 0% 0%;
            cursor: pointer;
            user-select: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 900;
            box-shadow: 0 6px 14px rgba(0, 0, 0, .25);
            position: relative;
            padding: 10px;
            border-radius: 999px;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
        }

        .chip-pick[data-val="1"] {
            background-position: 0% 0%;
        }

        .chip-pick[data-val="2"] {
            background-position: 50% 0%;
        }

        .chip-pick[data-val="5"] {
            background-position: 100% 0%;
        }

        .chip-pick::after {
            content: attr(data-val);
            position: absolute;
            inset: 0;
            display: grid;
            place-items: center;
            font-weight: 900;
            font-size: 28px;
            color: #111;
            pointer-events: none;
        }

        .chip-pick:active {
            transform: scale(0.96);
            filter: brightness(0.95);
        }

        .chip-pick.active::before {
            content: "";
            position: absolute;
            inset: 6px;
            border-radius: 999px;
            animation: chipPulse 1.2s infinite;
            pointer-events: none;
        }

        .chip-pick.active {
            transform: scale(1.08);
            box-shadow: 0 0 0 1px #111, 0 0 18px rgba(0, 0, 0, .25);
            position: relative;
        }

        @keyframes chipPulse {
            0% {
                box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7),
                    0 0 12px 6px rgba(255, 255, 255, 0.5);
            }

            100% {
                box-shadow: 0 0 0 16px rgba(255, 255, 255, 0),
                    0 0 24px 12px rgba(255, 255, 255, 0);
            }
        }

        .chip {
            position: absolute;
            left: 0;
            width: var(--chip-w);
            height: var(--chip-h);
            border-radius: 50%;
            background-image: url("../images/chips-small-sprite.webp");
            background-size: 300% 100%;
            background-repeat: no-repeat;
            background-position: 0% 0%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .chip.v1 {
            background-position: 0% 0%;
        }

        .chip.v2 {
            background-position: 50% 0%;
        }

        .chip.v5 {
            background-position: 100% 0%;
        }

        .chip-total {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) translateY(-1.5px);
            min-width: calc(var(--chip-w) * 0.70);
            height: calc(var(--chip-h) * 0.45);
            padding: 0 calc(var(--chip-w) * 0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 900;
            font-size: clamp(11px, 1vw, 14px);
            line-height: 1;
            color: #111;
            background: rgba(255, 255, 255, 0.92);
            border-radius: 999px;
            overflow: hidden;
            white-space: nowrap;
            pointer-events: none;
        }

        .chip-total.is-3 {
            font-size: clamp(9px, 1.5vmin, 12px);
        }

        .chip-total.is-4 {
            font-size: clamp(8px, 1.05vmin, 11px);
        }

        .btn {
            width: 60px;
            height: 60px;
            border: 0;
            background: transparent;
            cursor: pointer;
            background-image: url("../images/action-buttons.webp");
            background-repeat: no-repeat;
            background-size: 300% 100%;
        }

        .btn--clear {
            background-position: 0% 0%;
        }

        .btn--undo {
            background-position: 50% 0%;
        }

        .btn--x2 {
            background-position: 100% 0%;
        }

        .cell.drag-over,
        .big-cell.drag-over {
            outline: 2px dashed #0a7;
            outline-offset: -2px;
        }

        /* 1 колона */
        .stacks.cols-1 .stack:nth-child(1) {
            transform: translate(-50%, -50%);
        }

        /* 2 колони */
        .stacks.cols-2 .stack:nth-child(1) {
            transform: translate(calc(-50% - (var(--dx) * 0.9)), -50%);
        }

        .stacks.cols-2 .stack:nth-child(2) {
            transform: translate(calc(-50% + (var(--dx) * 0.9)), -50%);
        }

        /* 3 колони */
        .stacks.cols-3 .stack:nth-child(1) {
            z-index: 10;
            transform: translate(calc(-50% - (var(--dx) * 0.9)),
                    calc(-50% + (var(--dy) * 0.15)));
        }

        .stacks.cols-3 .stack:nth-child(2) {

            transform: translate(-50%,
                    calc(-50% - (var(--dy) * 3)));
        }

        .stacks.cols-3 .stack:nth-child(3) {
            z-index: 10;
            transform: translate(calc(-50% + (var(--dx) * 0.9)),
                    calc(-50% + (var(--dy) * 0.15)));
        }

        .cell,
        .big-cell {
            position: relative;
        }

        .cell.clickable,
        .big-cell.clickable {
            position: relative;
            transition: transform .08s ease, box-shadow .12s ease, outline-color .12s ease;
            cursor: pointer;
        }

        .cell.clickable:hover,
        .big-cell.clickable:hover {
            z-index: 10;
            outline: 2px solid rgba(255, 255, 255, .85);
            outline-offset: -2px;
            box-shadow: 0 0 0 3px rgba(0, 180, 255, .45), 0 0 18px rgba(0, 180, 255, .35);
            transform: translateY(-1px);
        }

       

        @media (max-width: 720px) and (orientation: portrait) {
            :root {
                --cell-h: clamp(22px, 10vw, 40px);
                --cell-w: calc(var(--cell-h) * 1.1);
            }
            
            .shell{
                flex-direction: row;
                align-items: center;
                gap: 30px;
                position: relative;
                margin: 0px;
                display: flex;
                justify-content: flex-start;
            }

            .board {
                flex-direction: row-reverse;
            }

            

            .actions {
                order: 3;
                width: 100%;
            }

            .chips{
                flex-direction: column;
                gap: 14px;
            }

            .cell.zero {
                width: calc(var(--cell-w) * 3);
                height: calc(var(--cell-h) * 1.5);
                border-radius: 999px 999px 0 0;
            }

            .c21 {
                flex-direction: row;
            } 
            
            .top{ flex-direction:column; }

            .bot {
                flex-direction: row-reverse;
                padding-top: calc(var(--cell-h) * 1.5);
                padding-left:0;
            }

            .nums { 
                flex-direction:row; 
            }

            .nums-row { 
                flex-direction:column; 
            }
            
            .doz,
            .even {
                flex-direction: column;
            } 

            .big-cell > span {
                writing-mode: vertical-rl;    
                text-orientation: mixed;
            }

            /* .big-cell .chip-total {
                writing-mode: horizontal-tb; 
            } */

            .big-cell.w4 {
                width: var(--cell-w);
                height: calc(var(--cell-h) * 4);
            }

            .big-cell.w2 {
                width: var(--cell-w);
                height: calc(var(--cell-h) * 2);
            }
        }

        @media (max-width: 932px) and (orientation: landscape) {
             .shell{
                gap: 15px;
             }

            .stacks {
                /*в landscape */
                --dx: min(var(--dx-max), calc(var(--chip-w) * 0.42));
                --dy: min(var(--dy-max), calc(var(--chip-h) * 0.42));
            }
        }