:root {
    --pinly-amber: #e0912b;
    --pinly-amber-d: #c2790f;
    --pinly-indigo: #1b1f3b;
    --pinly-indigo-2: #262c52;

    --bs-primary: #d98211;
    --bs-primary-rgb: 217, 130, 17;
    --bs-link-color: #b96f0c;
    --bs-link-color-rgb: 185, 111, 12;
    --bs-link-hover-color: #8f5507;
    --bs-body-bg: #f4f5f8;
    --bs-body-color: #23262f;
}

body {
    min-height: 100vh;
}

/* Brand / navbar */
.navbar-pinly {
    background: var(--pinly-indigo);
    box-shadow: 0 6px 24px -18px rgba(0, 0, 0, .6);
}
.navbar-pinly .navbar-brand {
    color: #fff;
    font-weight: 800;
    letter-spacing: .01em;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}
.navbar-pinly .navbar-brand .pin { color: var(--pinly-amber); }
.navbar-pinly .nav-link { color: rgba(255, 255, 255, .82); }
.navbar-pinly .nav-link:hover,
.navbar-pinly .nav-link.active { color: #fff; }
.navbar-pinly .navbar-toggler { border-color: rgba(255, 255, 255, .25); }

.brand-ball {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 32%, #ffe08a, var(--pinly-amber) 60%, #7a4a06);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3);
}

/* Buttons in brand accent */
.btn-primary {
    --bs-btn-bg: var(--pinly-amber);
    --bs-btn-border-color: var(--pinly-amber);
    --bs-btn-hover-bg: var(--pinly-amber-d);
    --bs-btn-hover-border-color: var(--pinly-amber-d);
    --bs-btn-active-bg: var(--pinly-amber-d);
    --bs-btn-active-border-color: var(--pinly-amber-d);
    --bs-btn-disabled-bg: var(--pinly-amber);
    --bs-btn-disabled-border-color: var(--pinly-amber);
    --bs-btn-focus-shadow-rgb: 224, 145, 43;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}

.text-pinly { color: var(--pinly-amber) !important; }

.card {
    border: 1px solid #e6e8ef;
    border-radius: .7rem;
}

.auth-card {
    max-width: 430px;
    margin: 6vh auto;
}

/* Board-style scorecard (frame-by-frame like the scoreboard) */
.scorecard {
    font-variant-numeric: tabular-nums;
    border-collapse: collapse;
    width: 100%;
    min-width: 620px;
}
.scorecard th,
.scorecard td {
    border: 1px solid var(--bs-border-color, #d7dae6);
    text-align: center;
    padding: 2px 5px;
}
.scorecard thead th {
    font-size: .72rem;
    color: var(--pinly-amber);
    font-weight: 700;
}
.scorecard .name {
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
    padding-right: 10px;
}
.scorecard .marks {
    display: flex;
    gap: 6px;
    justify-content: center;
    min-height: 1.25em;
    font-weight: 600;
}
.scorecard .throws td { border-bottom: 0; }
.scorecard .cumul td {
    border-top: 0;
    font-size: .82rem;
    color: var(--bs-secondary-color, #5b6076);
    padding-top: 0;
}
.scorecard .mk-strike { color: #cc3a28; font-weight: 800; }
.scorecard .mk-spare { color: #12836a; font-weight: 800; }
.scorecard .total { font-weight: 800; font-size: 1.05rem; color: var(--pinly-amber); }

/* ===== Inline potvrzení u tlačítka (místo nativního confirm()) ===== */
.pin-confirm {
    position: absolute;
    z-index: 1080;
    min-width: 15rem;
    max-width: 20rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .65rem;
    box-shadow: 0 .6rem 1.6rem rgba(20, 24, 40, .2);
    padding: .8rem;
    animation: pin-confirm-in .12s ease-out;
}
@keyframes pin-confirm-in { from { opacity: 0; transform: translateY(-.25rem); } to { opacity: 1; transform: none; } }
.pin-confirm-msg { font-size: .85rem; line-height: 1.35; color: var(--bs-body-color, #212529); margin-bottom: .65rem; }
.pin-confirm-actions { display: flex; justify-content: flex-end; gap: .4rem; }
.pin-confirm-arrow {
    position: absolute;
    top: -6px;
    width: 11px;
    height: 11px;
    background: var(--bs-body-bg, #fff);
    border-left: 1px solid var(--bs-border-color, #dee2e6);
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    transform: translateX(-50%) rotate(45deg);
}
@media (prefers-reduced-motion: reduce) { .pin-confirm { animation: none; } }