@import url("../connect4/styles.css");

.brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.stage-actions {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 10px;
}

.stage-action-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.stage-action-row .ghost-button {
    font-size: .88rem;
    padding: 8px 16px;
    font-weight: 600;
}

.backgammon-board {
    --point-dark: #8a4f2a;
    --point-light: #dfbd82;
    --wood-a: #6d3f23;
    --wood-b: #b77a43;
    width: 100%;
    aspect-ratio: 1.62 / 1;
    display: grid;
    grid-template-columns: repeat(6, 1fr) 28px repeat(6, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: 0;
    padding: 6px;
    border: 3px solid #4f2e1c;
    border-radius: 12px;
    background:
        linear-gradient(90deg, rgba(0,0,0,.22), transparent 12%, transparent 88%, rgba(0,0,0,.2)),
        linear-gradient(135deg, var(--wood-a), var(--wood-b));
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.16), 0 26px 70px rgba(0,0,0,.34);
    position: relative;
}

.backgammon-board::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: calc(50% - 14px);
    width: 28px;
    border-radius: 10px;
    background: rgba(47, 25, 13, .72);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.13);
}

.bar-slot,
.off-slot,
.point {
    position: relative;
    min-width: 0;
    min-height: 0;
}

.bar-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    color: rgba(255,255,255,.72);
    font-weight: 800;
    z-index: 1;
    overflow: visible;
}

.bar-slot {
    grid-column: 7;
    grid-row: 1 / span 2;
    margin: 4px;
    border-radius: 12px;
    background: rgba(0,0,0,.2);
}

.off-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 8px;
    flex: 1;
    border-radius: 10px;
    background: rgba(0,0,0,.16);
    z-index: 1;
    cursor: pointer;
    min-height: 36px;
}

.off-slot.is-target,
.point.is-target {
    outline: 3px solid rgba(45, 212, 191, .75);
    outline-offset: -3px;
}

.point {
    display: flex;
    align-items: center;
    padding: 6px 3px;
    cursor: pointer;
    isolation: isolate;
}

.point::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    height: 88%;
    z-index: -1;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    background: var(--point-light);
    opacity: .96;
}

.point.is-dark::before {
    background: var(--point-dark);
}

.point.top {
    align-items: flex-start;
    flex-direction: column;
}

.point.top::before {
    top: 0;
}

.point.bottom {
    align-items: flex-end;
    flex-direction: column-reverse;
}

.point.bottom::before {
    bottom: 0;
    transform: rotate(180deg);
}

.point.is-source,
.bar-slot.is-source {
    outline: 3px solid rgba(45, 212, 191, .75);
    outline-offset: -3px;
}

.point-label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: .68rem;
    color: rgba(255,255,255,.72);
    text-shadow: 0 1px 2px rgba(0,0,0,.45);
}

.top .point-label {
    top: 5px;
}

.bottom .point-label {
    bottom: 5px;
}

.checker {
    width: min(76%, 42px);
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .72rem;
    font-weight: 900;
    box-shadow: inset 0 5px 10px rgba(255,255,255,.28), inset 0 -8px 12px rgba(0,0,0,.26), 0 3px 8px rgba(0,0,0,.32);
    z-index: 2;
    transition: box-shadow .18s ease;
}

.bar-slot .checker {
    width: 32px;
    max-width: none;
    margin: -3px 0;
}

.checker.white {
    background: #f5ead8;
    color: #51331f;
}

.checker.black {
    background: #1f2937;
    color: #f7d995;
}

.checker.compact {
    font-size: .65rem;
}

.board-meta-row {
    width: 100%;
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
    margin-top: 14px;
}

.board-command-row {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(120px, 1fr) minmax(120px, 1fr);
    align-items: stretch;
    gap: 12px;
    margin-bottom: 12px;
}

.board-command-row .primary-button {
    min-width: 150px;
}

/* ── Off-area strips above and below board ─────────────────────────── */
.off-area-row {
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: stretch;
    padding: 4px;
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(109, 63, 35, .45), rgba(183, 122, 67, .35));
    border: 1px solid rgba(79, 46, 28, .55);
}

.off-area-row .off-slot .checker {
    width: 34px;
    flex-shrink: 0;
}

.dice-roll-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-color: rgba(223, 189, 130, .8);
    background: linear-gradient(135deg, #8a4f2a, #dfbd82);
    color: #201209;
    box-shadow: 0 12px 28px rgba(138, 79, 42, .24);
}

.dice-roll-button.can-roll:hover {
    background: linear-gradient(135deg, #9c5c32, #efd09a);
    box-shadow: 0 14px 32px rgba(138, 79, 42, .32);
}

.dice-roll-button:disabled {
    border-color: rgba(79, 46, 28, .55);
    background: rgba(79, 46, 28, .32);
    color: rgba(223, 189, 130, .48);
    box-shadow: none;
    cursor: not-allowed;
    opacity: .72;
}

.dice-roll-button .dice-icon-pair {
    display: none;
    align-items: center;
    gap: 5px;
}

.dice-roll-button.can-roll .dice-icon-pair {
    display: inline-flex;
}

.dice-roll-button.can-roll .dice-roll-label {
    display: inline;
}

.dice-face {
    width: 24px;
    aspect-ratio: 1;
    border-radius: 6px;
    background: #f8fafc;
    box-shadow: inset 0 -2px 4px rgba(15, 23, 42, .22), 0 3px 8px rgba(0,0,0,.24);
    position: relative;
}

.dice-face::before,
.dice-face::after {
    content: "";
    position: absolute;
    width: 5px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #0f172a;
}

.dice-face-one::before {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.dice-face-one::after {
    display: none;
}

.dice-face-two::before {
    left: 6px;
    top: 6px;
}

.dice-face-two::after {
    right: 6px;
    bottom: 6px;
}

.compact-action-row {
    margin-top: 18px;
}

.off-display-box {
    width: 100%;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.05);
    color: var(--text);
    text-align: left;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.off-display-box:disabled {
    cursor: default;
    opacity: .9;
}

.dice-box {
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.05);
}

.dice-box span {
    display: block;
    color: var(--muted);
    font-size: .75rem;
}

.dice-box strong {
    display: block;
    margin-top: 4px;
    font-size: 1.05rem;
}

.history-entry {
    cursor: pointer;
}

.history-entry.is-reviewing,
.history-entry.review-live-entry {
    border-color: rgba(223, 189, 130, .85);
    background: rgba(223, 189, 130, .12);
}

.dice-value-box strong {
    font-size: .78rem;
    color: var(--muted);
}

.dice-value-box {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 8px;
}

.dice-value-box > span {
    grid-column: 1 / -1;
}

.dice-value-box strong {
    min-width: 0;
}

.dice-visual {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.real-die {
    width: 30px;
    aspect-ratio: 1;
    border-radius: 7px;
    background: #f8ead0;
    box-shadow: inset 0 -3px 6px rgba(80, 46, 28, .24), 0 4px 10px rgba(0,0,0,.2);
    position: relative;
    display: block;
}

.real-die .pip {
    display: none;
    position: absolute;
    width: 5px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #3f2617;
}

.real-die .pip-1 { left: 6px; top: 6px; }
.real-die .pip-2 { left: 50%; top: 6px; transform: translateX(-50%); }
.real-die .pip-3 { right: 6px; top: 6px; }
.real-die .pip-4 { left: 6px; top: 50%; transform: translateY(-50%); }
.real-die .pip-5 { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.real-die .pip-6 { right: 6px; top: 50%; transform: translateY(-50%); }
.real-die .pip-7 { left: 6px; bottom: 6px; }
.real-die .pip-8 { left: 50%; bottom: 6px; transform: translateX(-50%); }
.real-die .pip-9 { right: 6px; bottom: 6px; }

.real-die-1 .pip-5,
.real-die-2 .pip-1,
.real-die-2 .pip-9,
.real-die-3 .pip-1,
.real-die-3 .pip-5,
.real-die-3 .pip-9,
.real-die-4 .pip-1,
.real-die-4 .pip-3,
.real-die-4 .pip-7,
.real-die-4 .pip-9,
.real-die-5 .pip-1,
.real-die-5 .pip-3,
.real-die-5 .pip-5,
.real-die-5 .pip-7,
.real-die-5 .pip-9,
.real-die-6 .pip-1,
.real-die-6 .pip-3,
.real-die-6 .pip-4,
.real-die-6 .pip-6,
.real-die-6 .pip-7,
.real-die-6 .pip-9 {
    display: block;
}

.legal-footer {
    display: block;
    margin-top: 40px;
    padding: 20px 16px 28px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .78rem;
    font-weight: 400;
    text-align: center;
    width: 100%;
}

.legal-footer__links {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.legal-footer__links a {
    color: var(--muted);
    font-weight: 400;
}

.mobile-screen-toggle {
    display: none;
}

.popup.result-popup.is-visible {
    display: flex !important;
    animation: result-popup-fade .2s ease-out;
}

.result-popup.is-visible .result-popup-card {
    animation: result-popup-rise .28s ease-out;
}

.result-popup-card {
    overflow: hidden;
}

.result-popup-card.result-variant-win::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 214, 102, .75) 0 4px, transparent 5px),
        radial-gradient(circle at 78% 22%, rgba(45, 212, 191, .38) 0 5px, transparent 6px),
        linear-gradient(120deg, transparent 42%, rgba(255,255,255,.16) 48%, transparent 54%);
    animation: resultSpark 900ms ease-out forwards;
}

@keyframes result-popup-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes result-popup-rise {
    from { opacity: .55; transform: translateY(18px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes resultSpark {
    from { opacity: 0; transform: translateX(-18px); }
    35% { opacity: 1; }
    to { opacity: 0; transform: translateX(18px); }
}

@media (max-width: 820px) {
    body {
        padding-bottom: 176px;
    }

    .stage-actions {
        align-items: stretch;
        width: 100%;
    }

    .stage-action-row {
        align-items: stretch;
        flex-direction: row;
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .stage-action-row .ghost-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 100%;
        min-width: 0;
    }

    .backgammon-board {
        aspect-ratio: 1.62 / 1;
        grid-template-columns: repeat(6, 1fr) 18px repeat(6, 1fr);
        padding: 3px;
        border-width: 2px;
        border-radius: 12px;
    }

    .board-command-row {
        grid-template-columns: auto minmax(0, .9fr) minmax(0, .9fr);
        gap: 6px;
        margin-bottom: 8px;
        align-items: stretch;
    }

    .board-command-row .primary-button {
        min-width: 0;
        padding: 8px 7px;
        font-size: .74rem;
        white-space: nowrap;
    }

    .checker {
        width: min(88%, 28px);
        font-size: .58rem;
    }

    .bar-slot .checker {
        width: 20px;
        max-width: none;
        margin: -2px 0;
    }

    .backgammon-board::before {
        top: 3px;
        bottom: 3px;
        left: calc(50% - 9px);
        width: 18px;
    }

    .point {
        padding: 4px 1px;
    }

    .point-label {
        font-size: .55rem;
    }

    .board-meta-row {
        grid-template-columns: 1fr;
    }

    .dice-roll-button {
        gap: 5px;
    }

    .dice-roll-button .dice-roll-label {
        display: none;
    }

    .dice-roll-button.can-roll .dice-roll-label {
        display: none;
    }

    .dice-face {
        width: 18px;
        border-radius: 5px;
    }

    .dice-face::before,
    .dice-face::after {
        width: 4px;
    }

    .dice-face-two::before {
        left: 5px;
        top: 5px;
    }

    .dice-face-two::after {
        right: 5px;
        bottom: 5px;
    }

    .dice-box {
        padding: 9px 9px;
        border-radius: 12px;
        min-width: 0;
    }

    .dice-box span {
        font-size: .68rem;
    }

    .dice-box strong {
        font-size: .88rem;
        line-height: 1.1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dice-value-box strong {
        font-size: .88rem;
    }

    .dice-visual {
        gap: 5px;
        margin-top: 2px;
        flex-wrap: nowrap;
    }

    .real-die {
        width: 29px;
        border-radius: 6px;
    }

    .real-die .pip {
        width: 5px;
    }

    .real-die .pip-1 { left: 6px; top: 6px; }
    .real-die .pip-2 { top: 6px; }
    .real-die .pip-3 { right: 6px; top: 6px; }
    .real-die .pip-7 { left: 6px; bottom: 6px; }
    .real-die .pip-8 { bottom: 6px; }
    .real-die .pip-9 { right: 6px; bottom: 6px; }

    .play-surface {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .controls-shell,
    .board-column,
    .move-history-panel {
        border-radius: 24px;
    }

    .board-and-info {
        gap: 16px;
    }

    body.mobile-pre-game .board-and-info {
        display: none;
    }

    body.mobile-in-game .controls-shell {
        display: none;
    }

    body.mobile-in-game .stage-header {
        margin-bottom: 10px;
    }

    body.mobile-in-game .mini-stats-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mobile-screen-toggle {
        position: fixed;
        right: 12px;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 86px);
        z-index: 38;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px 16px;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: linear-gradient(135deg, var(--accent), #9d74ff);
        color: #fff;
        box-shadow: 0 14px 28px rgba(124, 92, 255, 0.28);
        font: inherit;
    }
}