@import '_content/Carbles.Components/Carbles.Components.bx4hofnwld.bundle.scp.css';

/* /Pages/Play.razor.rz.scp.css */
.play[b-ou6tinllxr] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    /* The choice panels below overlay the board rather than sit in the column with it - see there. */
    position: relative;
}

.play__board[b-ou6tinllxr] {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
}

.pass-gate[b-ou6tinllxr] {
    max-width: 30rem;
    margin: 4rem auto;
    text-align: center;
    padding: 2rem;
    background-color: var(--color-surface);
    border-radius: 8px;
}

.pass-gate__confirm[b-ou6tinllxr] {
    margin-top: 1rem;
    background-color: var(--color-accent);
    color: var(--color-accent-text);
    border: none;
    border-radius: 4px;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    cursor: pointer;
}

/* Floated over the board, not stacked under it. As a flex item it took height from the board - the
   only shrinkable thing in the column - so the board visibly shrank the moment it opened and sprang
   back when it closed. Overlaying costs the board nothing, and this panel asks for nothing but a
   tap on one of its own buttons, so covering part of the board while it is up is the right trade. */
.disambiguation[b-ou6tinllxr] {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    z-index: 5;
    max-height: 60%;
}

/* The split builder keeps its place in the column instead: building a 7 means tapping marbles on
   the board between steps (§6), and floating this one over the board hid whichever marbles sat
   under it - a marble you cannot see is a marble you cannot pick. Its row costs the board height,
   which the board absorbs by scaling down (Board.razor.css sizes the grid to its container), so
   every marble stays visible and reachable for as long as the split is being built. */
.split-builder[b-ou6tinllxr] {
    flex: 0 0 auto;
    align-self: center;
    margin-top: 0.5rem;
    /* Never more than a share of the screen, however long the list of allocated steps grows: the
       board has to stay big enough to aim at. */
    max-height: 40%;
}

.split-builder[b-ou6tinllxr],
.disambiguation[b-ou6tinllxr] {
    width: min(28rem, calc(100% - 2rem));
    box-sizing: border-box;
    overflow-y: auto;
    padding: 1rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

/* Tightened from the page defaults: every line this panel saves is a line the board gets back. */
.split-builder h2[b-ou6tinllxr] {
    margin: 0 0 0.25rem;
    font-size: 1.15rem;
}

.split-builder p[b-ou6tinllxr] {
    margin: 0.25rem 0;
}

.split-builder__remaining[b-ou6tinllxr] {
    font-weight: 700;
}

.split-builder__steps[b-ou6tinllxr] {
    margin: 0.35rem 0;
    padding-left: 1.25rem;
    color: var(--color-text-muted);
}

/* The distances a 7 can still be split into, as a row of targets rather than a number field: each
   one is a legal continuation of the allocation so far, so tapping is the whole interaction. */
.split-builder__counts[b-ou6tinllxr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0;
}

.split-builder__count[b-ou6tinllxr] {
    flex: 0 0 auto;
    min-width: 2.75rem;
    min-height: 2.75rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background-color: var(--color-surface-raised);
    color: var(--color-text);
    font-weight: 700;
    cursor: pointer;
}

.split-builder__count:hover[b-ou6tinllxr] {
    border-color: var(--color-accent);
}

/* box-sizing so a full-width control's own padding stays inside the panel rather than pushing a
   horizontal scrollbar under the game (the same trap TurnBanner.razor.css documents). Direct
   children only: the split's distance chips live in their own row and are sized by that row. */
.disambiguation > button[b-ou6tinllxr],
.split-builder > button[b-ou6tinllxr] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    background-color: var(--color-surface-raised);
    color: var(--color-text);
    cursor: pointer;
}

.disambiguation button:focus-visible[b-ou6tinllxr],
.split-builder button:focus-visible[b-ou6tinllxr],
.pass-gate__confirm:focus-visible[b-ou6tinllxr] {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 2px;
}