/* Backgammon module styles, ported from the original index.html. Scoped under .bg-root. */
.bg-root {
    --frame: #2e1006; --felt: #1b5228; --felt2: #174d24;
    --tri-r: #9b1c1c; --tri-c: #e8d89a;
    --ck-w: #f2e8cc; --ck-wb: #c8a84a; --ck-b: #1a0d00; --ck-bb: #5a3510;
    --gold: #c8a030; --bar-bg: #3e1a06;
    --pt-w: 52px; --ch: 44px; --pt-h: 215px;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    font-family: 'Palatino Linotype', Palatino, 'Book Antiqua', serif;
    color: #f0e4c8;
    background: #180a02;
    border-radius: 10px;
    padding: 16px;
    user-select: none;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
}

/* Shrink the framework card to hug the felt panel and centre it on the page. */
#game-screen:has(.bg-root) { width: fit-content; max-width: 100%; }

.bg-root .bg-viewport { position: relative; }

.bg-root .top-bar {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; gap: 10px; flex-wrap: wrap;
}
.bg-root .top-bar h2 { font-size: 1.4rem; letter-spacing: 0.2em; color: var(--gold); white-space: nowrap; }
.bg-root #msg-box {
    background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.1);
    padding: 7px 14px; border-radius: 20px; font-size: 0.88rem;
    text-align: center; min-width: 0; min-height: 34px; flex: 1 1 140px;
    display: flex; align-items: center; justify-content: center;
}
.bg-root #new-btn {
    background: transparent; border: 1px solid rgba(255,255,255,0.3); color: #f0e4c8;
    padding: 7px 16px; border-radius: 6px; font-family: inherit; font-size: 0.82rem;
    cursor: pointer; letter-spacing: 0.08em;
}
.bg-root #new-btn:hover { background: rgba(255,255,255,0.12); }
.bg-root .bg-icon-btn {
    background: transparent; border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px; cursor: pointer; font-size: 1rem; line-height: 1;
    padding: 6px 10px; color: #f0e4c8;
}
.bg-root .bg-icon-btn:hover { background: rgba(255,255,255,0.12); }
.bg-root .bg-btns { display: flex; gap: 8px; align-items: center; }

/* Hint shown only on small portrait screens (see media query below). */
.bg-root .bg-rotate-hint {
    display: none;
    width: 100%; text-align: center;
    background: rgba(200,160,48,0.14); border: 1px solid rgba(200,160,48,0.35);
    color: var(--gold); border-radius: 8px; padding: 6px 10px; font-size: 0.8rem;
}

.bg-root .board-wrap {
    display: flex; align-items: stretch;
    width: max-content; /* hug the fixed board content; do NOT stretch to the scaled viewport */
    background: var(--frame); border: 6px solid var(--frame); border-radius: 8px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.8), inset 0 0 0 2px rgba(200,160,48,0.15);
}

.bg-root .bear-tray {
    width: 52px; background: #1a0800; border-radius: 4px;
    display: flex; flex-direction: column; align-items: center; padding: 8px 0; position: relative;
}
.bg-root .tray-label { font-size: 0.55rem; letter-spacing: 0.1em; opacity: 0.5; text-transform: uppercase; margin-bottom: 6px; }
.bg-root .bear-half { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 4px; }
.bg-root .bear-half.bot { justify-content: flex-end; }
.bg-root .bear-divider { width: 80%; height: 1px; background: rgba(200,160,48,0.3); margin: 4px 0; }

.bg-root .play-area { display: flex; flex-direction: column; }
.bg-root .half-board { display: flex; flex-direction: row; height: var(--pt-h); position: relative; }
.bg-root .quadrant { display: flex; flex-direction: row; }

.bg-root .bar-col { width: 46px; background: var(--bar-bg); display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; }
.bg-root .bar-half { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: relative; cursor: pointer; }
.bg-root .bar-half:hover { background: rgba(255,255,255,0.04); }
.bg-root .bar-half.bar-sel { background: rgba(255,210,0,0.12); }

/* z-index keeps the dice + Roll/Pass above checkers that overflow a full point into the strip. */
.bg-root .mid-strip { height: 42px; background: var(--felt2); display: flex; align-items: center; justify-content: center; gap: 18px; position: relative; z-index: 6; }

.bg-root .point { width: var(--pt-w); height: var(--pt-h); position: relative; cursor: pointer; background: var(--felt); }
.bg-root .point::before { content: ''; position: absolute; left: 2px; right: 2px; z-index: 0; transition: filter 0.15s; }
.bg-root .top-half .point::before { top: 0; height: 100%; clip-path: polygon(5% 0%, 95% 0%, 50% 93%); }
.bg-root .bot-half .point::before { bottom: 0; height: 100%; clip-path: polygon(50% 7%, 5% 100%, 95% 100%); }
.bg-root .point.red::before { background: var(--tri-r); }
.bg-root .point.cream::before { background: var(--tri-c); }
.bg-root .point:hover::before { filter: brightness(1.15); }
.bg-root .point.pt-sel::before { filter: brightness(1.3); }
.bg-root .point.pt-sel { background: rgba(255,230,50,0.1); }
.bg-root .point.pt-dest { background: rgba(80,220,80,0.15); cursor: crosshair; }
.bg-root .point.pt-dest::after { content: ''; position: absolute; inset: 0; border: 2px solid rgba(80,220,80,0.55); pointer-events: none; z-index: 5; }

.bg-root .pt-num { position: absolute; font-size: 0.6rem; opacity: 0.35; width: 100%; text-align: center; z-index: 6; pointer-events: none; }
.bg-root .top-half .pt-num { bottom: 2px; }
.bg-root .bot-half .pt-num { top: 2px; }

.bg-root .ck {
    width: var(--ch); height: var(--ch); border-radius: 50%; position: absolute; left: 50%;
    transform: translateX(-50%); z-index: 3; display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: bold; box-shadow: 1px 2px 6px rgba(0,0,0,0.5);
}
.bg-root .ck-w, .ck.ck-w { background: radial-gradient(circle at 35% 30%, #fff8e8, var(--ck-w) 60%, #c8a048); border: 2px solid var(--ck-wb); color: #4a2a00; }
.bg-root .ck-b, .ck.ck-b { background: radial-gradient(circle at 35% 30%, #5a3010, var(--ck-b) 60%, #0a0500); border: 2px solid var(--ck-bb); color: #c8a048; }
.ck-sel { filter: drop-shadow(0 0 7px rgba(255,220,0,0.9)); z-index: 4; }
.bg-root .ck-mini { width: 16px; height: 16px; border-radius: 50%; }

.bg-root .dice-wrap { display: flex; gap: 8px; }
.bg-root .die {
    width: 36px; height: 36px; background: #f5f0e0; border-radius: 6px; border: 1.5px solid #c8b880;
    display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr);
    align-items: center; justify-items: center; box-shadow: 1px 2px 4px rgba(0,0,0,0.5); position: relative; transition: opacity 0.3s;
}
.bg-root .die.used { opacity: 0.3; }
.bg-root .die.rolling { animation: bgRollDie 0.5s ease-out; }
@keyframes bgRollDie {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-20deg) scale(1.15); }
    50% { transform: rotate(15deg) scale(0.9); }
    75% { transform: rotate(-8deg) scale(1.08); }
    100% { transform: rotate(0deg) scale(1); }
}
.bg-root .pip { width: 7px; height: 7px; background: #1a0a00; border-radius: 50%; }
.bg-root .pip.h { background: transparent; }

.bg-root #roll-btn, .bg-root #pass-btn {
    padding: 8px 22px; border: none; border-radius: 6px; font-family: inherit; font-size: 0.9rem;
    letter-spacing: 0.08em; cursor: pointer; transition: transform 0.1s, background 0.2s;
}
.bg-root #roll-btn { background: var(--gold); color: #180a02; }
.bg-root #roll-btn:hover { background: #e8b840; transform: translateY(-1px); }
.bg-root #roll-btn:disabled { opacity: 0.3; cursor: default; transform: none; }
.bg-root #pass-btn { background: rgba(255,255,255,0.1); color: #f0e4c8; border: 1px solid rgba(255,255,255,0.2); }
.bg-root #pass-btn:hover { background: rgba(255,255,255,0.18); }

.bg-root .bearoff-zone {
    width: 44px; height: 44px; border-radius: 50%; background: rgba(80,220,80,0.2);
    border: 2px dashed rgba(80,220,80,0.7); display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; color: #50dc50; cursor: pointer;
}
.bg-root .bearoff-zone:hover { background: rgba(80,220,80,0.35); }

.bg-root .score-row { display: flex; gap: 24px; margin-top: 4px; }
.bg-root .score-card { background: rgba(0,0,0,0.35); padding: 6px 18px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); text-align: center; min-width: 90px; }
.bg-root .sc-label { font-size: 0.65rem; opacity: 0.55; letter-spacing: 0.1em; text-transform: uppercase; }
.bg-root .sc-val { font-size: 1.6rem; color: var(--gold); line-height: 1.2; }
.bg-root .turn-ind { width: 14px; height: 14px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: middle; box-shadow: 0 0 8px currentColor; }
.bg-root .turn-ind.w { background: var(--ck-w); color: var(--ck-w); }
.bg-root .turn-ind.b { background: var(--ck-b); color: var(--ck-b); border: 1px solid var(--ck-bb); }

@media (orientation: portrait) and (max-width: 560px) {
    .bg-root .bg-rotate-hint { display: block; order: -1; }
}

@media (max-width: 560px) {
    .bg-root { padding: 10px; gap: 8px; }
    .bg-root .top-bar { justify-content: center; }
    .bg-root .top-bar h2 { font-size: 1.05rem; letter-spacing: 0.12em; }
    .bg-root #msg-box { order: 3; flex-basis: 100%; font-size: 0.8rem; }
    .bg-root #new-btn { padding: 6px 12px; font-size: 0.78rem; }
    .bg-root .score-row { gap: 14px; }
    .bg-root .score-card { padding: 5px 14px; min-width: 76px; }
    .bg-root .sc-val { font-size: 1.3rem; }
}

/*
 * Landscape phones (short + wide): a 1.5:1 board on a short screen is height-limited, so it can
 * never fill the width — it just leaves big empty side margins. Instead of stacking the info bar
 * above and the score row below (which eats the little vertical space we have), lay the board in
 * the centre and move the info panel into the LEFT margin and the scores into the RIGHT margin.
 * The board is then free to grow to almost the full screen height, and the previously-wasted side
 * space now carries the title, message, controls and scores. fitBoard() detects this row layout
 * and sizes the board accordingly.
 */
@media (orientation: landscape) and (max-height: 600px) {
    body:has(.bg-root) { padding: 4px; }
    #game-screen:has(.bg-root) { padding: 6px; }

    .bg-root {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 6px;
    }

    /* Info panel -> left margin, stacked vertically. */
    .bg-root .top-bar {
        order: 1;
        flex: 0 0 auto;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        width: clamp(118px, 20vw, 178px);
        gap: 8px;
    }
    .bg-root .top-bar h2 { font-size: 1rem; letter-spacing: 0.1em; text-align: center; white-space: normal; }
    .bg-root #msg-box { order: 0; flex: 0 0 auto; min-height: 0; font-size: 0.78rem; padding: 6px 10px; }
    .bg-root .bg-btns { flex-direction: column; }
    .bg-root .bg-btns > * { width: 100%; }
    .bg-root #new-btn { text-align: center; }

    /* Board stays in the middle. */
    .bg-root .bg-viewport { order: 2; }

    /* Scores -> right margin, stacked vertically. */
    .bg-root .score-row {
        order: 3;
        flex: 0 0 auto;
        flex-direction: column;
        gap: 10px;
        margin-top: 0;
        width: clamp(82px, 14vw, 118px);
    }
    .bg-root .score-card { width: 100%; min-width: 0; padding: 6px 8px; }
    .bg-root .sc-val { font-size: 1.4rem; }
}