/**


 * Rollboard - Game-Specific Styles


 *


 * @author      Mike Fairbrother <mike@fairbrother.me>


 * @copyright   2024-2026 Mike Fairbrother. All rights reserved.


 * @license     PROPRIETARY - No rights to copy, modify, distribute, or reuse


 *              any part of this code without explicit written permission from the author.


 */





/* ---- Local Design Tokens ---- */


:root {


    --rb-die-size: 56px;


    --rb-die-bg: #faf8f5;


    --rb-die-held: var(--gp-accent);


    --rb-die-held-glow: var(--gp-accent-glow);


    --rb-die-pip: #2a2250;


    --rb-die-radius: 12px;


    --rb-card-bg: rgba(255, 255, 255, 0.06);


    --rb-card-hover: rgba(255, 255, 255, 0.12);


    --rb-card-used: rgba(255, 255, 255, 0.03);


    --rb-card-potential: rgba(62, 232, 130, 0.12);


    --rb-row-height: 38px;


}





/* ---- Menu Screen ---- */


.rb-logo {


    margin-bottom: 8px;


}


.rb-logo-dice {


    display: flex;


    gap: 10px;


    justify-content: center;


}


.rb-mini-die {


    width: 40px;


    height: 40px;


    background: var(--rb-die-bg);


    border-radius: 8px;


    position: relative;


    box-shadow: 0 3px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.8);


}


.rb-mini-die::after {


    content: '';


    position: absolute;


    inset: 0;


    background-repeat: no-repeat;


}


.rb-mini-die[data-face="3"] {


    background-image:


        radial-gradient(circle 4px at 28px 12px, var(--rb-die-pip) 3.5px, transparent 3.5px),


        radial-gradient(circle 4px at 20px 20px, var(--rb-die-pip) 3.5px, transparent 3.5px),


        radial-gradient(circle 4px at 12px 28px, var(--rb-die-pip) 3.5px, transparent 3.5px);


}


.rb-mini-die[data-face="5"] {


    background-image:


        radial-gradient(circle 4px at 11px 11px, var(--rb-die-pip) 3.5px, transparent 3.5px),


        radial-gradient(circle 4px at 29px 11px, var(--rb-die-pip) 3.5px, transparent 3.5px),


        radial-gradient(circle 4px at 20px 20px, var(--rb-die-pip) 3.5px, transparent 3.5px),


        radial-gradient(circle 4px at 11px 29px, var(--rb-die-pip) 3.5px, transparent 3.5px),


        radial-gradient(circle 4px at 29px 29px, var(--rb-die-pip) 3.5px, transparent 3.5px);


}


.rb-mini-die[data-face="6"] {


    background-image:


        radial-gradient(circle 4px at 13px 10px, var(--rb-die-pip) 3.5px, transparent 3.5px),


        radial-gradient(circle 4px at 27px 10px, var(--rb-die-pip) 3.5px, transparent 3.5px),


        radial-gradient(circle 4px at 13px 20px, var(--rb-die-pip) 3.5px, transparent 3.5px),


        radial-gradient(circle 4px at 27px 20px, var(--rb-die-pip) 3.5px, transparent 3.5px),


        radial-gradient(circle 4px at 13px 30px, var(--rb-die-pip) 3.5px, transparent 3.5px),


        radial-gradient(circle 4px at 27px 30px, var(--rb-die-pip) 3.5px, transparent 3.5px);


}





.rb-title {


    font-size: 48px;


    font-weight: 900;


    letter-spacing: -1px;


    line-height: 1;


    margin-bottom: 4px;


    color: #fff;


}


.rb-title-accent {


    color: var(--gp-accent);


}


.rb-subtitle {


    font-size: 14px;


    color: var(--gp-text-secondary);


    margin-bottom: 16px;


    letter-spacing: 1px;


    text-transform: uppercase;


    font-weight: 600;


}


.rb-menu-best {


    font-size: 16px;


    font-weight: 700;


    color: var(--gp-text-secondary);


    margin-bottom: 20px;


}


.rb-menu-best span {


    color: var(--gp-accent);


}





/* ---- Mode Selector ---- */


.rb-mode-selector {


    display: flex;


    gap: 0;


    background: rgba(255,255,255,0.06);


    border-radius: var(--gp-radius-md);


    padding: 3px;


    margin-bottom: 14px;


    width: 260px;


}


.rb-mode-btn {


    flex: 1;


    padding: 10px 8px;


    border: none;


    border-radius: calc(var(--gp-radius-md) - 2px);


    background: transparent;


    color: var(--gp-text-secondary);


    font-size: 14px;


    font-weight: 700;


    cursor: pointer;


    transition: all 0.2s ease;


    font-family: var(--gp-font-stack);


}


.rb-mode-btn.active {


    background: linear-gradient(135deg, #ffd93d, #ff9f43);


    color: #1a1640;


    box-shadow: 0 2px 10px rgba(255,217,61,0.25);


}





/* ---- Modern Options ---- */


.rb-modern-options {


    margin-bottom: 10px;


    transition: all 0.3s ease;


}


.rb-modern-options.hidden {


    display: none;


}


.rb-toggle-row {


    display: flex;


    align-items: center;


    gap: 10px;


    font-size: 14px;


    color: var(--gp-text-secondary);


    cursor: pointer;


    font-weight: 600;


}


.rb-toggle-row input[type="checkbox"] {


    display: none;


}


.rb-toggle-track {


    width: 40px;


    height: 22px;


    background: rgba(255,255,255,0.15);


    border-radius: 11px;


    position: relative;


    transition: background 0.2s ease;


}


.rb-toggle-thumb {


    position: absolute;


    top: 2px;


    left: 2px;


    width: 18px;


    height: 18px;


    background: #fff;


    border-radius: 50%;


    transition: transform 0.2s ease;


}


.rb-toggle-row input:checked + .rb-toggle-track {


    background: var(--gp-success);


}


.rb-toggle-row input:checked + .rb-toggle-track .rb-toggle-thumb {


    transform: translateX(18px);


}





.rb-settings-row {


    display: flex;


    gap: 12px;


    justify-content: center;


    margin-top: 14px;


}





/* ---- HUD ---- */


.rb-hud {


    flex-shrink: 0;


}





/* ---- Hot Streak Bar ---- */


.rb-streak-bar {


    height: 22px;


    background: rgba(255,255,255,0.06);


    position: relative;


    overflow: hidden;


    flex-shrink: 0;


}


.rb-streak-bar.hidden {


    display: none;


}


.rb-streak-fill {


    height: 100%;


    width: 0%;


    background: linear-gradient(90deg, #ff7e7e, #ffb05a, #ffe04a);


    transition: width 0.4s ease;


}


.rb-streak-text {


    position: absolute;


    inset: 0;


    display: flex;


    align-items: center;


    justify-content: center;


    font-size: 11px;


    font-weight: 700;


    color: #fff;


    text-shadow: 0 1px 3px rgba(0,0,0,0.5);


    letter-spacing: 0.5px;


}





/* ---- Dice Area ---- */


.rb-dice-area {


    display: flex;


    flex-direction: column;


    align-items: center;


    padding: 10px 12px 6px;


    gap: 8px;


    flex-shrink: 0;


}


.rb-dice-container {


    display: flex;


    gap: 8px;


    justify-content: center;


    min-height: calc(var(--rb-die-size) + 24px);


    align-items: center;


}





/* ---- Individual Die ---- */


.rb-die {


    width: var(--rb-die-size);


    height: var(--rb-die-size);


    border-radius: var(--rb-die-radius);


    background: var(--rb-die-bg);


    cursor: pointer;


    position: relative;


    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;


    box-shadow: 0 4px 14px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.9);


    border: 3px solid transparent;


    display: grid;


    place-items: center;


    flex-shrink: 0;


}


.rb-die:active {


    transform: scale(0.93);


}


.rb-die.held {


    border-color: var(--rb-die-held);


    box-shadow: 0 0 18px var(--rb-die-held-glow), 0 4px 14px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.9);


    transform: translateY(-4px);


}


.rb-die.held::after {


    content: 'HELD';


    position: absolute;


    bottom: -18px;


    left: 50%;


    transform: translateX(-50%);


    font-size: 9px;


    font-weight: 800;


    color: var(--gp-accent);


    letter-spacing: 1px;


}


.rb-die.rolling {


    animation: rb-die-roll 0.4s ease;


}





/* Pip layout inside die */


.rb-die-inner {


    width: 100%;


    height: 100%;


    display: grid;


    grid-template-columns: 1fr 1fr 1fr;


    grid-template-rows: 1fr 1fr 1fr;


    padding: 9px;


    gap: 0;


}


.rb-pip {


    width: 10px;


    height: 10px;


    border-radius: 50%;


    background: var(--rb-die-pip);


    box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);


    align-self: center;


    justify-self: center;


}





/* Pip positions for each face */


/* 1: center only */


.rb-face-1 .rb-pip:nth-child(1) { grid-area: 2 / 2; }





/* 2: top-right, bottom-left */


.rb-face-2 .rb-pip:nth-child(1) { grid-area: 1 / 3; }


.rb-face-2 .rb-pip:nth-child(2) { grid-area: 3 / 1; }





/* 3: top-right, center, bottom-left */


.rb-face-3 .rb-pip:nth-child(1) { grid-area: 1 / 3; }


.rb-face-3 .rb-pip:nth-child(2) { grid-area: 2 / 2; }


.rb-face-3 .rb-pip:nth-child(3) { grid-area: 3 / 1; }





/* 4: four corners */


.rb-face-4 .rb-pip:nth-child(1) { grid-area: 1 / 1; }


.rb-face-4 .rb-pip:nth-child(2) { grid-area: 1 / 3; }


.rb-face-4 .rb-pip:nth-child(3) { grid-area: 3 / 1; }


.rb-face-4 .rb-pip:nth-child(4) { grid-area: 3 / 3; }





/* 5: four corners + center */


.rb-face-5 .rb-pip:nth-child(1) { grid-area: 1 / 1; }


.rb-face-5 .rb-pip:nth-child(2) { grid-area: 1 / 3; }


.rb-face-5 .rb-pip:nth-child(3) { grid-area: 2 / 2; }


.rb-face-5 .rb-pip:nth-child(4) { grid-area: 3 / 1; }


.rb-face-5 .rb-pip:nth-child(5) { grid-area: 3 / 3; }





/* 6: two columns of 3 */


.rb-face-6 .rb-pip:nth-child(1) { grid-area: 1 / 1; }


.rb-face-6 .rb-pip:nth-child(2) { grid-area: 1 / 3; }


.rb-face-6 .rb-pip:nth-child(3) { grid-area: 2 / 1; }


.rb-face-6 .rb-pip:nth-child(4) { grid-area: 2 / 3; }


.rb-face-6 .rb-pip:nth-child(5) { grid-area: 3 / 1; }


.rb-face-6 .rb-pip:nth-child(6) { grid-area: 3 / 3; }





/* Emoji dice mode */


.rb-die.emoji-mode .rb-die-inner {


    display: flex;


    align-items: center;


    justify-content: center;


    font-size: 30px;


    padding: 0;


}





/* ---- Roll Button ---- */


.rb-roll-btn {


    padding: 10px 36px;


    border: none;


    border-radius: var(--gp-radius-md);


    background: linear-gradient(135deg, #ffd93d, #ff9f43);


    color: #1a1640;


    font-size: 18px;


    font-weight: 800;


    cursor: pointer;


    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;


    box-shadow: 0 4px 16px rgba(255,217,61,0.3);


    font-family: var(--gp-font-stack);


    letter-spacing: 0.5px;


}


.rb-roll-btn:active {


    transform: scale(0.95);


}


.rb-roll-btn:disabled {


    opacity: 0.35;


    cursor: default;


    transform: none;


}





/* ---- Scorecard ---- */


.rb-scorecard-wrapper {


    flex: 1;


    overflow-y: auto;


    overflow-x: hidden;


    padding: 0 8px 28px;


    -webkit-overflow-scrolling: touch;


}


.rb-scorecard {


    width: 100%;


    border-radius: var(--gp-radius-md);


    overflow: hidden;


    border: 1px solid rgba(255,255,255,0.06);


}





.rb-sc-row {


    display: flex;


    align-items: center;


    height: var(--rb-row-height);


    padding: 0 10px;


    border-bottom: 1px solid rgba(255,255,255,0.04);


    transition: background 0.15s ease;


    cursor: default;


}


.rb-sc-row:last-child {


    border-bottom: none;


}


.rb-sc-row.available {


    cursor: pointer;


    background: var(--rb-card-bg);


}


.rb-sc-row.available:active {


    background: var(--rb-card-hover);


}


.rb-sc-row.available.has-score {


    background: var(--rb-card-potential);


}


.rb-sc-row.used {


    background: var(--rb-card-used);


}


.rb-sc-row.header {


    background: rgba(255,255,255,0.04);


    height: 28px;


    font-size: 10px;


    font-weight: 700;


    text-transform: uppercase;


    letter-spacing: 1.2px;


    color: var(--gp-text-secondary);


    cursor: default;


}


.rb-sc-row.subtotal, .rb-sc-row.total {


    background: rgba(255,255,255,0.05);


    font-weight: 700;


    cursor: default;


}


.rb-sc-row.total {


    background: rgba(255,224,74,0.08);


    height: 44px;


}





.rb-sc-name {


    flex: 1;


    font-size: 13px;


    font-weight: 600;


    color: var(--gp-text-primary);


    white-space: nowrap;


    overflow: hidden;


    text-overflow: ellipsis;


}


.rb-sc-row.header .rb-sc-name {


    font-size: inherit;


    color: inherit;


}


.rb-sc-row.used .rb-sc-name {


    color: var(--gp-text-secondary);


}





.rb-sc-potential {


    font-size: 13px;


    font-weight: 700;


    color: var(--gp-success);


    min-width: 36px;


    text-align: right;


    opacity: 0.85;


}


.rb-sc-potential.zero {


    color: var(--gp-danger);


    opacity: 0.5;


}





.rb-sc-value {


    font-size: 14px;


    font-weight: 800;


    min-width: 36px;


    text-align: right;


    color: var(--gp-accent);


}


.rb-sc-row.used .rb-sc-value {


    color: var(--gp-text-secondary);


}


.rb-sc-row.used .rb-sc-value.is-zero {


    color: rgba(255,255,255,0.25);


}


.rb-sc-row.subtotal .rb-sc-value,


.rb-sc-row.total .rb-sc-value {


    color: var(--gp-accent);


}


.rb-sc-row.total .rb-sc-value {


    font-size: 18px;


}


.rb-sc-row.total .rb-sc-name {


    font-size: 16px;


    color: var(--gp-accent);


}





/* Bonus indicator */


.rb-bonus-indicator {


    font-size: 10px;


    font-weight: 700;


    color: var(--gp-text-secondary);


    margin-left: 6px;


    white-space: nowrap;


}


.rb-bonus-indicator.achieved {


    color: var(--gp-success);


}





/* Streak multiplier badge */


.rb-streak-badge {


    font-size: 10px;


    font-weight: 800;


    color: #1a1640;


    background: linear-gradient(135deg, #ff7e7e, #ffb05a);


    padding: 1px 6px;


    border-radius: 8px;


    margin-left: 6px;


}





/* ---- Dice Roll Animation ---- */


@keyframes rb-die-roll {


    0%   { transform: rotate(0deg) scale(0.8); }


    25%  { transform: rotate(90deg) scale(1.05); }


    50%  { transform: rotate(180deg) scale(0.95); }


    75%  { transform: rotate(270deg) scale(1.02); }


    100% { transform: rotate(360deg) scale(1); }


}





/* ---- Score Popup ---- */


.rb-score-popup {


    position: fixed;


    font-size: 20px;


    font-weight: 800;


    color: var(--gp-accent);


    text-shadow: 0 2px 6px rgba(0,0,0,0.5);


    pointer-events: none;


    z-index: 100;


    animation: rb-score-float 1s ease-out forwards;


    white-space: nowrap;


}


@keyframes rb-score-float {


    0%   { transform: translateY(0) scale(0.5); opacity: 0; }


    20%  { transform: translateY(-12px) scale(1.15); opacity: 1; }


    100% { transform: translateY(-60px) scale(0.85); opacity: 0; }


}





/* ---- Game Over ---- */


.rb-gameover-title {


    font-size: 32px;


    font-weight: 900;


    margin-bottom: 12px;


    color: #fff;


}


.rb-new-best {


    background: linear-gradient(135deg, #ffd93d, #ff9f43);


    color: #1a1640;


    padding: 6px 20px;


    border-radius: 20px;


    font-size: 16px;


    font-weight: 800;


    margin-bottom: 14px;


    animation: rb-badge-pop 0.5s ease-out;


}


.rb-new-best.hidden { display: none; }





.rb-final-score-block {


    display: flex;


    flex-direction: column;


    align-items: center;


    margin-bottom: 6px;


}


.rb-final-label {


    font-size: 12px;


    text-transform: uppercase;


    letter-spacing: 1.5px;


    color: var(--gp-text-secondary);


    font-weight: 700;


}


.rb-final-value {


    font-size: 52px;


    font-weight: 900;


    color: var(--gp-accent);


    line-height: 1.1;


    font-variant-numeric: tabular-nums;


}


.rb-final-value-sm {


    font-size: 24px;


    color: var(--gp-text-secondary);


}


.rb-final-best-block {


    display: flex;


    flex-direction: column;


    align-items: center;


    margin-bottom: 16px;


}





.rb-final-stats {


    display: flex;


    gap: 16px;


    justify-content: center;


    margin-bottom: 16px;


}


.rb-final-stat {


    display: flex;


    flex-direction: column;


    align-items: center;


}


.rb-final-stat.hidden { display: none; }


.rb-final-stat-num {


    font-size: 22px;


    font-weight: 800;


    color: #fff;


    font-variant-numeric: tabular-nums;


}


.rb-final-stat-label {


    font-size: 10px;


    color: var(--gp-text-secondary);


    text-transform: uppercase;


    letter-spacing: 0.8px;


    font-weight: 600;


}





.rb-final-breakdown {


    width: 100%;


    max-width: 280px;


    margin: 0 auto 16px;


    font-size: 12px;


    color: var(--gp-text-secondary);


    text-align: left;


}


.rb-final-breakdown-row {


    display: flex;


    justify-content: space-between;


    padding: 3px 0;


    border-bottom: 1px solid rgba(255,255,255,0.04);


}


.rb-final-breakdown-row:last-child { border-bottom: none; }


.rb-final-breakdown-row span:last-child { font-weight: 700; color: #fff; }





/* ---- Celebration Particles ---- */


.rb-confetti {


    position: fixed;


    width: 8px;


    height: 8px;


    border-radius: 2px;


    pointer-events: none;


    z-index: 200;


    animation: rb-confetti-fall 2.5s ease-out forwards;


}


@keyframes rb-confetti-fall {


    0%   { transform: translateY(0) rotate(0deg); opacity: 1; }


    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }


}





@keyframes rb-badge-pop {


    0%   { transform: scale(0); opacity: 0; }


    60%  { transform: scale(1.2); }


    100% { transform: scale(1); opacity: 1; }


}





/* ---- Help Modal Sections ---- */


.rb-help-section {


    margin-bottom: 16px;


    text-align: left;


}


.rb-help-section h4 {


    font-size: 15px;


    font-weight: 700;


    margin-bottom: 6px;


    color: var(--gp-accent);


}


.rb-help-section p {


    font-size: 13px;


    color: var(--gp-text-secondary);


    line-height: 1.55;


}


.rb-help-section.hidden { display: none; }





/* Hidden utility */


.hidden { display: none !important; }





/* ---- Responsive ---- */


@media (max-width: 360px) {


    :root {


        --rb-die-size: 48px;


        --rb-row-height: 34px;


    }


    .rb-title { font-size: 40px; }


    .rb-sc-name { font-size: 12px; }


    .rb-roll-btn { padding: 9px 28px; font-size: 16px; }


}





@media (min-height: 750px) {


    .rb-dice-area {


        padding: 14px 12px 10px;


        gap: 10px;


    }


}