*{
box-sizing:border-box;
margin:0;
padding:0;
}

html {
    touch-action: manipulation;
}

html,body{
width:100%;
height:100%;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial;

overscroll-behavior: none;
-webkit-overflow-scrolling: touch;

background-image:url("assets/course-bg.png");
background-size:cover;
background-position:center;
background-repeat:no-repeat;

color:white;
overflow:hidden;
}

/* ===== COURSE LIGHTING OVERLAY ===== */

body::before{
content:"";
position:fixed;
inset:0;

background:
linear-gradient(
to bottom,
rgba(0,0,0,.35),
rgba(0,0,0,.55)
),

radial-gradient(
circle at 20% 15%,
rgba(255,255,255,.12),
transparent 60%
),

radial-gradient(
circle at 80% 80%,
rgba(255,255,255,.08),
transparent 60%
);

pointer-events:none;
z-index:-1;
}

/* ================= HEADER ================= */

header{
position:fixed;
top:0;
left:0;
right:0;
height:calc(60px + env(safe-area-inset-top));
padding-top:env(safe-area-inset-top);
background:linear-gradient(#083a2b,#06281d);
display:flex;
align-items:center;
justify-content:center;
z-index:1000;
box-shadow:0 2px 8px rgba(0,0,0,.35);
}

header h1{
font-size:20px;
font-weight:600;
pointer-events:none;
}

/* iOS-style back pill */

#navBack{
position:fixed;
top:calc(12px + env(safe-area-inset-top));
left:12px;

display:none;
align-items:center;
gap:6px;

background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.25);
backdrop-filter:blur(6px);

color:white;
font-size:16px;
font-weight:500;

padding:6px 14px;
border-radius:18px;
cursor:pointer;

z-index:2000;
}

#navBack::before{
content:"‹";
font-size:26px;
line-height:0;
margin-top:-2px;
}

#navBack:active{
transform:scale(.92);
background:rgba(255,255,255,.22);
}
/* ================= LAYOUT ================= */

main{
padding-top:calc(60px + env(safe-area-inset-top));
height:calc(100dvh - 60px - env(safe-area-inset-top));

display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;

overflow:hidden;
}

section{
overflow:hidden;
}

#game-screen{
overflow-y:auto;
flex:1;
min-height:0;
}

/* All setup/flow screens need to scroll on small phones */
#step-game,
#step-style,
#step-teams,
#step-players,
#step-settings,
#dot-picker,
#round-play,
#rules-screen{
overflow-y:auto;
flex:1;
min-height:0;
-webkit-overflow-scrolling:touch;
}

#round-setup{
overflow-y:auto;

flex:1;
min-height:0;

-webkit-overflow-scrolling:touch;
}

#profile-screen{
overflow-y:auto;
-webkit-overflow-scrolling:touch;

flex:1;
min-height:0;
}

/* allow scrolling when modal open */
.modal{
pointer-events:auto;
}

.modal-box{
max-height:85vh;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
}

section{
width:100%;
max-width:420px;

padding:16px 20px;

margin:0 auto;
display:flex;
flex-direction:column;
align-items:center;

flex:1;
min-height:0;
}

.hidden{
display:none !important;
}

/* ================= INPUTS ================= */

input,select{
width:100%;
max-width:320px;
padding:14px;
margin:8px auto;
border-radius:18px;
border:none;
font-size:16px;
display:block;
}

/* ===== FIX CHECKBOX TOGGLES ===== */

input[type="checkbox"]{
width:auto;
max-width:none;
padding:0;
margin:0 6px 0 0;

appearance:auto;
-webkit-appearance:auto;

border-radius:0;
background:none;
}

button{
    width:100%;
    max-width:340px;
}

input[type="date"]{
    appearance: none;
    -webkit-appearance: none;
    height: 52px;
}

input,select{
background:#ffffff;
color: #000;
appearance:none;
-webkit-appearance:none;
border-radius:18px;
}

button{
position: relative;
z-index: 1;
width:100%;
max-width:340px;
margin-left: auto;
margin-right: auto;

padding:16px;
font-size:16px;

background: rgba(60,180,100,.85);
color:white;

font-weight:600;
cursor:pointer;
-webkit-tap-highlight-color: transparent;

border-radius:18px;
border:1px solid rgba(255,255,255,.25);

backdrop-filter:blur(8px);

box-shadow:
0 8px 20px rgba(0,0,0,.35),
inset 0 1px 0 rgba(255,255,255,.15);

transition:
transform .08s ease,
box-shadow .08s ease;
}





button:active{

transform:scale(.96);

box-shadow:
0 4px 10px rgba(0,0,0,.45),
inset 0 2px 6px rgba(0,0,0,.4);

}


/* ================= MONEY ================= */

.money-input{
display:flex;
align-items:center;
background:#ffffff;
border-radius:14px;
padding-left:12px;
margin:10px 0;
}

.money-input span{
color:black;
font-weight:600;
margin-right:6px;
}

.money-input input{
border:none;
background:transparent;
margin:0;
padding:14px 0;
width:100%;
}

/* ================= PROFILE ================= */

.profile-card{
background:rgba(255,255,255,.12);
border-radius:16px;
padding:16px;
margin:12px 0;
backdrop-filter:blur(4px);

display:flex;
flex-direction: column;
}

.profile-card h3{
margin-bottom:8px;
}

.game-card{

margin:6px auto;
width:100%;
max-width:340px;

background:rgba(255,255,255,.08);

border-radius:20px;

padding:20px;

backdrop-filter:blur(10px);

border:1px solid rgba(255,255,255,.18);

box-shadow:0 10px 25px rgba(0,0,0,.35);

display:flex;
flex-direction:column;
gap:12px;

}
/* ================= MODALS ================= */

.modal{
position:fixed;
inset:0;
background:rgba(0,0,0,.75);
display:flex;
align-items:center;
justify-content:center;
z-index:100;
touch-action:none;
}

.modal-box{
background:#06281d;
padding:20px;
border-radius:18px;
width:90%;
max-width:420px;
box-shadow:0 12px 30px rgba(0,0,0,.5);
display:flex;
flex-direction:column;
align-items:center;
}

.modal-box > *:not(button) {
width: 100%;
}

.modal{
    z-index: 5000;
}

#settleModal {
z-index: 5100;
}

#handleInputModal {
z-index: 5200;
}

/* ================= FLOATING SIDE BET ================= */

#sideBetBtn{
position:fixed;
bottom:80px;
right:12px;
width:auto;
padding:8px 18px;
border-radius:22px;
font-size:14px;
font-weight:600;
z-index:1500;
background:#2ecc71;
color:#fff;
border:none;
box-shadow:0 2px 8px rgba(0,0,0,0.3);
cursor:pointer;
}

/* ================ PREVENT LEADERBAORD CUTOFF =================== */

#leaderboard div{
animation:slideIn .22s cubic-bezier(.22,.8,.25,1);
}

#leaderboard div{
background:rgba(255,255,255,.08);
border-radius:12px;
padding:10px 14px;
margin-bottom:6px;
}

#game-screen{
overflow-y:auto;

flex:1;
min-height:0;

padding-top:50px;
padding-bottom:80px;

gap:12px;

-webkit-overflow-scrolling:touch;
}

/* ================= PAR BUTTONS ================= */
.par-btn{
flex:1;
background:#1faa59;
border-radius:14px;
padding:14px;
font-weight:600;
}

.par-btn.active{
background:#0f5132;
}

/* ================= ANIMATION ================= */

@keyframes slideIn{
from{
transform:translateX(30px);
opacity:0;
}
to{
transform:translateX(0);
opacity:1;
}
}
/* 🔒 FORCE BACK BUTTON SIZE — overrides all global button rules */
#navBack{
width:auto;
min-width:auto;
max-width:fit-content;
}

/* ================= ANIMATION HEADER ================= */
#appTitle{
transition:opacity .18s ease, transform .18s ease;
}
.title-swap{
opacity:0;
transform:translateY(-6px);
}

.score-buttons{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-bottom:12px;
}

.score-buttons button{
flex:1 1 22%;
padding:14px;
border-radius:14px;
font-size:18px;
font-weight:600;
background:#1f6f4a;
color:white;
border:none;
}

.score-buttons button.active{
background:#1faa59;
box-shadow:0 0 0 2px rgba(0,0,0,.35);
}

.score-buttons button:active{
transform:scale(.96);
}

.stat-toggle{
flex:1;
min-width:160px;

display:flex;
align-items:center;
justify-content:center;
gap:6px;

background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.25);
border-radius:14px;

padding: 14px;

font-weight:700;
font-size:15px;

color:white;
cursor:pointer;
}

.stat-toggle.active{
background:#1faa59;
box-shadow:0 0 0 2px rgba(0,0,0,.35);
}


#holePutts,
#holePenalties{
flex:1;
text-align:center;
}

.modal-box table{
width:100%;
border-collapse:collapse;
}

.modal-box th,
.modal-box td{
padding:6px;
border-bottom:1px solid rgba(255,255,255,.15);
}

.delete-round-btn{
background:#a83232;
color:white;
border:none;
border-radius:10px;
width:34px;
height:34px;
font-size:18px;
line-height:34px;
padding:0;
box-shadow:0 3px 6px rgba(0,0,0,.35);
}

.delete-round-btn:active{
transform:scale(.9);
}

.diff-info{
margin-left:4px;
cursor:pointer;
opacity:.85;
}

.diff-info:active{
opacity:1;
transform:scale(.9);
}

.modal-box{
overflow-y:auto;
-webkit-overflow-scrolling:touch;
}

/* ===== KEEP ROUND HISTORY TABLE INSIDE SCREEN ===== */

.profile-card table{
table-layout:fixed;
width:100%;
}

.profile-card th,
.profile-card td{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

/* lock delete column narrow */
.profile-card td:last-child{
width:36px;
text-align:center;
}

.profile-card td button{
display:flex;
align-items:center;
justify-content:center;
}

#roundHistoryTable td{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.round-history-table{
width:100%;
border-collapse:collapse;
font-size:14px;
}

.round-history-table th,
.round-history-table td{
padding:8px 6px;
text-align:center;
white-space:nowrap;
}
.round-history-table th{
overflow:visible;
text-overflow:unset;
}

.round-history-table th span.diff-info{
white-space:normal;
overflow:visible;
text-overflow:unset;
display:inline-block;
margin-left:4px;
}

.round-history-table td:last-child {
    width: 60px;
    text-align: center;
}

#holePutts,
#holePenalties{
background:#ffffff;
color:black;
}

/* ===== PREMIUM ROUND HISTORY CARDS ===== */

.round-card{
display:flex;
justify-content:space-between;
align-items:center;
padding:16px;
margin-bottom:12px;
border-radius:18px;
background:rgba(255,255,255,.08);
backdrop-filter:blur(6px);
transition:all .15s ease;
cursor:pointer;
}

.round-card:active{
transform:scale(.98);
background:rgba(255,255,255,.14);
}

.round-card-title{
font-weight:600;
font-size:15px;
margin-bottom:6px;
}

.round-card-sub{
font-size:13px;
opacity:.8;
}

.score-under{
color:#2ecc71;
font-weight:600;
}

.score-over{
color:#e74c3c;
font-weight:600;
}

.score-even{
color:#ffffff;
font-weight:600;
}

/* ==== SCROLLABLE ROUND HISTORY ==== */
#roundHistoryTable{
max-height:320px; /* adjust if needed */
overflow-y:auto;
-webkit-overflow-scrolling:touch;
padding-right:4px;
}

#roundHistoryTable::after{
    content: "";
    position: sticky;
    bottom: 0;
    height: 20px;
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.4));
    pointer-events: none;
}
button{
    transition: all .12s ease;
}

button:active {
    transform: scale(.96);
}

section button{
margin-top:10px;
}

.round-course-main{
font-size:18px;
font-weight:700;
margin-top:4px;
}

.round-course-sub{
font-size:14px;
opacity:.75;
margin-top:2px;
}

#roundCourseHeader{
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.course-select-wrapper{
position:relative;
width:100%;
max-width:320px;
margin:auto;
}

.course-select-wrapper::before{
content:"🔍";
position:absolute;
left:12px;
top:50%;
transform:translateY(-50%);
opacity:.6;
pointer-events:none;
}

/* Hide pseudo emoji when using the row layout (has its own button) */
.course-select-wrapper:has(.course-search-row)::before{
display:none;
}

#courseSearch{
width:100%;
padding-left:34px;
}

.course-dropdown{
position:absolute;
width:100%;
background:#0f3f2e;
border-radius:12px;
margin-top:6px;
max-height:220px;
overflow-y:auto;
z-index:50;
box-shadow:0 8px 20px rgba(0,0,0,.4);
}

.course-dropdown div{
padding:12px;
cursor:pointer;
border-bottom:1px solid rgba(255,255,255,.06);
font-size: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}

.course-dropdown div:hover{
background:rgba(255,255,255,.08);
}

.course-row{
display:flex;
justify-content:space-between;
align-items:center;
padding:12px;
border-bottom:1px solid rgba(255,255,255,.06);
}

.course-row span:first-child{
cursor:pointer;
flex:1;
}

.course-delete{
opacity:.5;
cursor:pointer;
padding-left:10px;
}

.course-delete:hover{
opacity:1;
color:#ff6b6b;
}

/* ================= TEE MANAGER ================= */

#teeList{
display:flex;
flex-direction:column;
gap:10px;
margin-bottom:18px;
}

.tee-row{

display:flex;
justify-content:space-between;
align-items:center;
gap:12px;

background:rgba(255,255,255,.10);

padding:12px 14px;

border-radius:12px;

max-width:100%;

}

.tee-row strong{
font-size:16px;
}

.tee-row button{

background:#a83232;
border:none;
color:white;

width:40px;
height:40px;

min-width:40px;
max-width:40px;

padding:0;

display:flex;
align-items:center;
justify-content:center;

border-radius:10px;
font-size:18px;

flex:0 0 40px;

}

/* editable tee inputs */

.tee-edit-rating,
.tee-edit-slope{
    width: 60px;
    border: none;
    border-radius: 6px;
    padding: 4px;
    margin-left: 6px;
    text-align: center;
    background: #e6f5ee;
    color: black;
    font-size: 13px;
}

#teeManagerModal input{
margin:8px 0;
}

#teeManagerModal button{
width:100%;
margin-top:12px;
}

#teeManagerModal button:last-child{
background:#555;
margin-top:16px;
}

.course-dropdown{
animation:fadeDrop .18s ease;
}

@keyframes fadeDrop{
from{
opacity:0;
transform:translateY(-6px);
}
to{
opacity:1;
transform:translateY(0);
}
}

.tee-row{
backdrop-filter:blur(4px);
}

/* ================= ROUND HEADER CARD ================= */

.round-header-card{

background:rgba(255,255,255,.08);

border-radius:16px;

padding:14px;

margin-bottom:14px;

backdrop-filter:blur(6px);

}

.round-header-main{

font-size:18px;

font-weight:700;

}

.round-header-sub{

font-size:14px;

opacity:.75;

margin-top:4px;

}

.tee-row input{
width:70px !important;
flex:none;

margin-left:6px;

border-radius:6px;
border:none;
padding:4px;

text-align:center;

background:#ffffff;
color:black;
}

body.modal-open{
overflow: hidden;
position: fixed;
width: 100%;
}

body.modal-open main{
overflow: hidden;
}

/* ========== ROUND SETUP CARD ============ */

.round-setup-card{
background:rgba(255,255,255,.08);
border-radius:16px;
padding:16px;
margin-bottom:18px;
backdrop-filter:blur(6px);
width:100%;
max-width:360px;
}

/* ===== HOME DASHBOARD ===== */

.home-dashboard{

width:100%;
max-width:360px;

margin-top:40px;

padding:18px;

background:rgba(255,255,255,.10);

border-radius:20px;

backdrop-filter:blur(10px);

border:1px solid rgba(255,255,255,.18);

box-shadow:0 10px 25px rgba(0,0,0,.35);

}

#step-home{
display:flex;
flex-direction:column;
align-items:center;

flex:1;
min-height:0;
gap:18px;
padding-top:90px;
padding-bottom:80px;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
}

.home-dashboard h3{
margin-bottom:12px;
font-size:16px;
font-weight:600;
}

.dash-row{
display:flex;
justify-content:space-between;
padding:8px 0;
border-bottom:1px solid rgba(255,255,255,.1);
}

.dash-row:last-child{
border-bottom:none;
}

/* ===== HOME SCREEN LAYOUT ===== */

.home-dashboard{
margin-top:30px;;
margin-bottom:30px;

width:100%;
max-width:360px;

padding:18px;

background:rgba(255,255,255,.10);
border-radius:20px;

backdrop-filter:blur(12px);

border:1px solid rgba(255,255,255,.18);

box-shadow:0 12px 28px rgba(0,0,0,.35);
}

.home-menu{
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
width: 100%;
max-width: 340px;
}

button:hover{
box-shadow:
0 10px 26px rgba(0,0,0,.45),
0 0 14px rgba(80,200,120,.25);
}

.undo-btn{
background:rgba(30,90,60,.9);
}

/* ===== PREMIUM BUTTON LIGHTING ===== */

button::after{
content:"";
position:absolute;
inset:0;
border-radius:18px;
background:linear-gradient(to bottom, rgba(255,255,255,.25), transparent 60%);
opacity:.35;
pointer-events:none;
z-index: -1;
}

@keyframes winFlash{
    0%{transform:scale(1);}
    40%{transform:scale(1.08);}
    100%{transform:scale(1);}
}

.leader-flash{
animation:winFlash .4s ease;
}

/* iOS style toggles */
input[type="checkbox"]{appearance:none;width:46px;height:26px;background:#bbb;border-radius:20px;position:relative;cursor:pointer;transition:.2s;}
input[type="checkbox"]::after{content:"";position:absolute;width:22px;height:22px;background:white;border-radius:50%;top:2px;left:2px;transition:.2s;}
input[type="checkbox"]:checked{background:#1faa59;}
input[type="checkbox"]:checked::after{left:22px;}
label{display:flex;align-items:center;gap:10px;margin-top:6px;}

#skinsBox label{
width:100%;
max-width:320px;
}

#skinsBox{
margin-bottom:8px;
}

#vegasBox button{
margin-top:12px;
}

#leaderboard{
margin-top:16px;
min-height:40px;
}

.hole-actions{
display:flex;
gap:10px;
width:100%;
max-width:320px;
}

.hole-actions button{
flex:1;
padding:12px;
background:#0f5132;
}

#tieBtn,
.hole-actions button{
background:#0f5132;
}

#sideBetModal .modal-box button{
margin-top:10px;
}

#sideBetModal .modal-box button.cancel-btn{
background:#b83232;
}

#skinsBox button{
display:flex;    
align-items:center;
justify-content:center;
text-align:center;
}

#nassauBox button{
max-width:320px;
margin-left:auto;
margin-right:auto;
}

#nassauWinners{
display:flex;
flex-direction:column;
align-items:center;
gap:12px;
width:100%;
}

#nassauWinners button{
width:100%;
max-width:320px;
margin:0 auto;
}

#nassauTieBtn{
background:#0f5132;
}

.hole-actions button:last-child{
background:#0f5132;
}

#leaderboardWrapper{
overflow:visible;
transform-origin:top;
will-change:transform;
transition:transform .28s cubic-bezier(.22,.8,.25,1), opacity .18s ease;
}

#leaderboardWrapper.collapsed{
transform:scaleY(0);
opacity:0;
}

#leaderboardHeader{
cursor:pointer;
}

.tie-undo-row{
display:flex;
gap:12px;
justify-content:center;
flex-wrap:nowrap;    
}

.tie-undo-row button{
flex:1;
max-width:160px;
}

.course-modal-buttons{
display:flex;
flex-direction:column;
gap:14px;
margin-top:18px;
}

.course-modal-buttons button{
width:100%;
}

.course-modal-buttons .cancel-btn{
background:#5aa16a;
opacity:.9;
}

.cancel-btn{
background:#b83232 !important;
}

/* ===== GAME ICON GRID ===== */

#gameCards{
display:grid;
grid-template-columns:repeat(2,1fr);
justify-items:center;
gap:14px;
width:100%;
max-width:340px;
margin:20px auto;
}

.game-card{

background:linear-gradient(
180deg,
rgba(255,255,255,.14),
rgba(255,255,255,.05)
);

border-radius:20px;

padding:18px 12px;

backdrop-filter:blur(14px);

border:1px solid rgba(255,255,255,.25);

box-shadow:
0 12px 28px rgba(0,0,0,.45),
inset 0 1px 0 rgba(255,255,255,.2);

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

transition:transform .12s ease, box-shadow .12s ease;

backface-visibility:hidden;
transform: translateZ(0);

}

.game-card:active{
transform:scale(.97);
background:rgba(255,255,255,.15);
}

/* Only apply hover lift on devices that support true hover (not touch) */
@media (hover: hover) and (pointer: fine){
.game-card:hover{
transform:translateY(-3px);
box-shadow:
0 18px 36px rgba(0,0,0,.55),
inset 0 1px 0 rgba(255,255,255,.2);
}
}

.game-icon{
width:88px;
height:88px;

margin-bottom:14px;

border-radius:18px;

box-shadow:
0 8px 20px rgba(0,0,0,.55),
inset 0 1px 0 rgba(255,255,255,.25);

transform: translateZ(0);
will-change: transform;

transition: transform .15s ease;
}

.game-card:active .game-icon{
transform: scale(.94);
}

.game-title{
font-size:15px;
font-weight:600;
}

/* ================= BASEBALL SCOREBOARD ================= */

#baseballScoreboardTable table{
width:100%;
border-collapse:collapse;
text-align:center;
font-weight:600;
}

#baseballScoreboardTable th,
#baseballScoreboardTable td{
padding:8px;
border-bottom:1px solid rgba(255,255,255,.15);
}

#baseballScoreboardTable th{
opacity:.8;
}

#baseballScoreboardTable tr:first-child td{
color:#2ecc71;
}

#baseballScoreboardTable tr:last-child td{
color:#e74c3c;
}

.mlb-scoreboard{
display:grid;
gap:6px;
font-size:14px;
}

.mlb-row{
display:grid;
grid-template-columns:120px repeat(9,1fr) 40px;
align-items:center;
text-align:center;
padding:6px 0;
border-bottom:1px solid rgba(255,255,255,.15);
}

.mlb-row.header{
font-weight:700;
opacity:.8;
}

.team-name{
text-align:left;
font-weight:600;
padding-left:6px;
}

.runs{
font-weight:800;
color:#2ecc71;
}

.mlb-row div{
padding:6px 4px;
font-weight:600;
}

.mlb-row.header div{
opacity:.75;
font-size:13px;
}

.mlb-row .runs{
border-left:2px solid rgba(255,255,255,.2);
}

/* ===== MOBILE TAP SPEED BOOST ===== */

button,
.game-card,
.stat-toggle,
.par-btn{

touch-action: manipulation;
-webkit-tap-highlight-color: transparent;

}

button:active{

transform:scale(.96);
transition:transform .05s;

}
/* ===== END OF ROUND RESULTS ===== */

.winner-banner {
text-align: center;
padding: 16px 10px 20px;
margin-bottom: 14px;
}

.winner-crown {
font-size: 48px;
animation: crownPop 0.5s cubic-bezier(.2,1.6,.4,1) both;
display: block;
}

.winner-name {
font-size: 22px;
font-weight: 800;
color: #f1c40f;
animation: fadeSlideUp 0.4s 0.2s ease both;
}

.winner-sub {
font-size: 13px;
opacity: .7;
margin-top: 4px;
animation: fadeSlideUp 0.4s 0.35s ease both;
}

@keyframes crownPop {
0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
100% { transform: scale(1) rotate(0deg);   opacity: 1; }
}

@keyframes fadeSlideUp {
0%   { transform: translateY(12px); opacity: 0; }
100% { transform: translateY(0);    opacity: 1; }
}

.results-row {
display: flex;
justify-content: space-between;
padding: 10px 14px;
margin-bottom: 6px;
border-radius: 10px;
font-weight: 600;
opacity: 0;
animation: rowSlideIn 0.35s ease forwards;
}

.results-row-winner {
background: linear-gradient(90deg, #0f5132, #1f7a4f);
box-shadow: 0 0 14px rgba(46,204,113,.4);
color: #2ecc71 !important;
}

@keyframes rowSlideIn {
0%   { transform: translateX(-16px); opacity: 0; }
100% { transform: translateX(0);     opacity: 1; }
}

/* ===== CONFETTI ===== */

.confetti-piece {
position: absolute;
top: -10px;
pointer-events: none;
animation: confettiFall linear forwards;
z-index: 10;
}

@keyframes confettiFall {
0%   { transform: translateY(0) rotate(0deg);    opacity: 1; }
100% { transform: translateY(500px) rotate(720deg); opacity: 0; }
}

/* Confetti containment */
#leaderboardModal .modal-box {
position: relative;
overflow: hidden;
}

/* ===== BINGO SELECTED BUTTON ===== */

button.bingo-selected {
background: linear-gradient(135deg, #1a7a4f, #2ecc71) !important;
box-shadow: 0 0 0 2px #2ecc71, 0 4px 14px rgba(46,204,113,.4) !important;
color: #fff !important;
transform: scale(1.04);
}

/* ===== DOT PICKER ===== */

.dot-picker-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 14px;
margin-bottom: 8px;
background: rgba(255,255,255,.06);
border-radius: 12px;
gap: 12px;
}

.dot-toggle {
width: 22px;
height: 22px;
min-width: 22px;
accent-color: #2ecc71;
cursor: pointer;
}

/* ===== COURSE SEARCH ROW ===== */

.course-search-row {
display: flex;
gap: 8px;
align-items: center;
}

.course-search-row input {
flex: 1;
min-width: 0;
}

.search-icon-btn {
flex-shrink: 0;
width: 44px;
height: 44px;
min-width: 44px;
padding: 0;
font-size: 18px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
}

/* ===== TEE MANAGER MODAL SCROLL ===== */

#teeManagerModal .modal-content {
max-height: 80vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}

/* ===== FLOATING END ROUND PILL ===== */

#endRoundBtn {
position: fixed;
bottom: 24px;
left: 12px;
width: auto;
padding: 8px 16px;
border-radius: 22px;
font-size: 13px;
font-weight: 700;
background: rgba(168, 50, 50, 0.85);
backdrop-filter: blur(8px);
z-index: 1500;
border: 1px solid rgba(255,255,255,.15);
}

#endRoundBtn:active {
transform: scale(.95);
}

/* ===== FLOATING END BET PILL ===== */

#endBetBtn {
position: fixed;
bottom: 24px;
left: 12px;
width: auto;
padding: 8px 16px;
border-radius: 22px;
font-size: 13px;
font-weight: 700;
background: rgba(168, 50, 50, 0.85);
backdrop-filter: blur(8px);
z-index: 1500;
border: 1px solid rgba(255,255,255,.15);
}

#endBetBtn:active {
transform: scale(.95);
}

/* ===== SAVED GROUPS ===== */

.group-card {
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.12);
border-radius: 14px;
padding: 12px 14px;
margin-bottom: 10px;
gap: 10px;
}

.group-card-info {
flex: 1;
min-width: 0;
}

.group-card-name {
font-weight: 700;
font-size: 15px;
margin-bottom: 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.group-card-sub {
font-size: 12px;
opacity: .6;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.group-card-actions {
display: flex;
gap: 8px;
flex-shrink: 0;
}

.group-quick-btn {
background: linear-gradient(135deg, #1a7a4f, #2ecc71);
border: none;
color: #fff;
font-weight: 700;
font-size: 13px;
padding: 8px 14px;
border-radius: 20px;
white-space: nowrap;
width: auto;
}

.group-del-btn {
background: rgba(168,50,50,.6);
border: none;
color: #fff;
font-size: 14px;
width: 36px;
height: 36px;
border-radius: 50%;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
min-width: 36px;
}

/* ===== PROFILE TAB ACTIVE STATE ===== */

.profile-tab {
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.15);
transition: background .15s ease, border-color .15s ease, transform .1s ease;
}

.profile-tab.active {
background: linear-gradient(135deg, #1a7a4f, #2ecc71);
border-color: transparent;
box-shadow: 0 4px 14px rgba(46,204,113,.35);
color: #fff;
font-weight: 700;
}

.profile-tab:not(.active):active {
transform: scale(.97);
}

/* ===== PREMIUM SYSTEM ===== */

/* Tier Cards */
.premium-card {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.15);
border-radius: 16px;
padding: 18px;
margin-bottom: 14px;
position: relative;
transition: transform .15s ease;
}

.premium-card-highlight {
transform: scale(1.02);
border-width: 2px;
}

.premium-badge {
position: absolute;
top: -10px;
right: 16px;
padding: 3px 12px;
border-radius: 20px;
font-size: 11px;
font-weight: 700;
color: #041a13;
}

.premium-card-name {
font-size: 20px;
font-weight: 800;
margin-bottom: 4px;
}

.premium-card-price {
font-size: 26px;
font-weight: 800;
margin-bottom: 12px;
}

.premium-card-period {
font-size: 14px;
font-weight: 400;
opacity: .7;
}

.premium-card-features {
font-size: 13px;
line-height: 1.9;
opacity: .85;
margin-bottom: 14px;
}

.premium-subscribe-btn {
width: 100%;
border-radius: 12px;
font-weight: 700;
font-size: 15px;
padding: 12px;
border: none;
color: #041a13;
}

/* Lock Banner */
.premium-lock-banner {
display: flex;
align-items: center;
gap: 14px;
background: rgba(255,255,255,.06);
border: 1px dashed rgba(255,255,255,.2);
border-radius: 12px;
padding: 14px;
cursor: pointer;
transition: background .15s ease;
}

.premium-lock-banner:active {
background: rgba(255,255,255,.1);
}

/* Advanced Stat Grid */
.premium-stat-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 4px;
}

.premium-stat {
background: rgba(255,255,255,.06);
border-radius: 12px;
padding: 12px;
text-align: center;
}

.premium-stat-val {
font-size: 20px;
font-weight: 800;
line-height: 1.1;
}

.premium-stat-label {
font-size: 11px;
opacity: .6;
margin-top: 4px;
}

/* PvP Rows */
.pvp-row {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid rgba(255,255,255,.07);
font-size: 14px;
}

.pvp-row:last-child {
border-bottom: none;
}

/* Betting History Cards */
.bet-history-card {
background: rgba(255,255,255,.06);
border-radius: 12px;
padding: 12px 14px;
margin-bottom: 10px;
cursor: pointer;
transition: background .1s ease;
}

.bet-history-card:active {
background: rgba(255,255,255,.1);
}

/* Ad Slot */
.ad-slot {
width: 100%;
min-height: 60px;
background: rgba(255,255,255,.04);
border: 1px dashed rgba(255,255,255,.12);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
opacity: .4;
margin: 12px 0;
}

/* ===== PROFILE SCREEN LAYOUT ===== */

#profile-screen {
align-items: stretch;
}

#profile-screen h2 {
text-align: center;
width: 100%;
}

#profile-screen > div:first-of-type {
display: flex;
justify-content: center;
width: 100%;
}

.profile-tabs {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
margin-bottom: 16px;
}

.profile-tab {
width: 100%;
max-width: 100%;
text-align: center;
}

/* ===== SETTLE UP ===== */

.settle-card {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
border-radius: 14px;
padding: 14px;
margin-bottom: 12px;
}

.settle-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}

.settle-btn-row {
display: flex;
gap: 8px;
}

#settleModal .modal-box button:last-child {
margin-left: auto;
margin-right: auto;
display: block;
}

.settle-app-btn {
border-radius: 10px;
border: none;
color: #fff;
cursor: pointer;
text-align: center;
line-height: 1.3;
}

/* Breathing room between stacked modal buttons */
#leaderboardFinishBtn {
margin-top: 8px;
}

/* ===== LEADERBOARD MODAL BUTTON SPACING ===== */
#settleUpBtn {
margin-bottom: 12px;
}

#leaderboardFinishBtn {
margin-top: 4px;
}

/* ===== AUTH MODAL ===== */

.auth-tab {
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.15);
font-size: 14px;
padding: 10px;
transition: background .15s, border-color .15s;
}

.auth-tab.active {
background: linear-gradient(135deg, #1a7a4f, #2ecc71);
border-color: transparent;
font-weight: 700;
}

#authModal input {
width: 100%;
margin-bottom: 10px;
}

#authSignupExtra input {
margin-bottom: 10px;
}