.board-frame { position:relative; width:fit-content; max-width:100%; }
.board-resize-handle { display:none; }
.board-resize-value { position:absolute; right:18px; bottom:22px; padding:3px 7px; border-radius:6px; background:var(--bg-white); color:var(--text-muted); box-shadow:var(--shadow-soft); font-size:12px; line-height:1.4; opacity:0; pointer-events:none; white-space:nowrap; }
@media (min-width:1025px) {
    .game-container > .container { container-type:inline-size; }
    .game-layout {
        --board-scale:1;
        --board-base-cell:90px;
        --board-width-factor:6.2;
        --board-height-factor:7.3333333333;
        --board-gutter:clamp(16px,2cqw,28px);
        --board-available:calc(100cqw - 440px - 2 * var(--board-gutter));
        --board-fit-cell:min(calc(var(--board-available) / var(--board-width-factor)),calc(min(960px,120vh) / var(--board-height-factor)));
        --board-natural-cell:min(var(--board-base-cell),var(--board-fit-cell));
        --board-cell:min(max(36px,calc(var(--board-natural-cell) * var(--board-scale))),var(--board-fit-cell),calc(var(--board-natural-cell) * 1.35),128px);
        display:grid;
        grid-template-columns:minmax(220px,1fr) max-content minmax(220px,1fr)!important;
        gap:var(--board-gutter)!important;
    }
    .game-layout > :is(.game-left,.game-right) { min-width:0; overflow-wrap:anywhere; }
    .game-layout .game-center { min-width:0; position:static; }
    .game-layout .board-frame { max-width:none; }
    .game-layout .board-frame .game-grid { width:max-content; max-width:none; padding:calc(var(--board-cell) / 3)!important; gap:calc(var(--board-cell) * 2 / 15)!important; border-radius:calc(var(--board-cell) * 8 / 45); }
    .game-layout .board-frame .grid-row { gap:calc(var(--board-cell) * 2 / 15)!important; }
    .game-layout .board-frame .game-grid .cell {
        flex:none;
        width:var(--board-cell)!important;
        height:var(--board-cell)!important;
        font-size:calc(var(--board-cell) * 23 / 45)!important;
        border-radius:calc(var(--board-cell) * 2 / 15)!important;
        border-width:calc(var(--board-cell) / 30);
        transition-property:background-color,border-color,box-shadow,transform,color;
    }
    .game-layout .game-right .feedback-actions { flex-wrap:wrap; }
    .game-layout .game-right .feedback-btn { flex-basis:120px; }
}
@media (min-width:1025px) and (any-pointer:fine) {
    .board-frame[data-resizable] .board-resize-handle {
        display:grid; place-items:center;
        position:absolute; right:-5px; bottom:-5px; z-index:2;
        width:28px; height:28px; padding:0; border:1px solid var(--gray-light); border-radius:9px;
        background:var(--bg-white); color:var(--text-muted); cursor:nwse-resize; touch-action:none;
    }
    .board-resize-handle svg { width:16px; height:16px; pointer-events:none; }
    .board-resize-handle:is(:hover,:focus-visible), .board-frame[data-resizing] .board-resize-handle { color:var(--blue); border-color:var(--blue); }
    .board-resize-handle:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
    .board-resize-handle[aria-disabled="true"] { cursor:default; opacity:.5; }
    .board-frame:has(.board-resize-handle:is(:hover,:focus-visible)) .board-resize-value,
    .board-frame[data-resizing] .board-resize-value { opacity:1; }
    html.board-resizing, html.board-resizing * { cursor:nwse-resize!important; user-select:none!important; }
    .board-frame[data-resizing] .cell { transition:none; }
}