/* ===== Core palette (your colors) ===== */
:root{
  color-scheme: dark;
  --bg: #000000;
  --card: #201F20;
  --text: #EEF2F9;
  --sub:  #C6CCDA;
  --border: #4C5151;
  --muted:  #4C5151;
  --accent:    #73CDD9;
  --btnaccent:    #45E64E;
  --accent-ok: #40FE34;
  --warn:      #F47720;
  --attention: #F5D529;
  --danger:    #E01E25;
  --blue: 	    #0330fc;
  --grey-surface: #201F20;
  --shadow: 0 8px 22px rgba(0,0,0,.45);
  --radius-xl: 18px;
  --radius-lg: 14px;
  --radius: 12px;
  --header: 75px;
  --gap: 90px;    /* gap stays constant */

  --bar1: 30px;
  --bar2: 50px;
  --bar3: 70px;
  --bar4: 90px; 
}


/* Keep the layout from shifting when the page barely overflows */
html {
  /* Modern browsers: reserve scrollbar space even when not needed */
  scrollbar-gutter: stable both-edges;
}

/* Fallback for older browsers */
@supports not (scrollbar-gutter: stable both-edges) {
  html { overflow-y: scroll; } /* always show a vertical scrollbar “track” */
}


/* Base reset / layout */
* { box-sizing: border-box; }
html,body { 
height: 100%; 
width: 100%; 
display: flex; 
flex-direction: column; 
overflow-x: hidden; 
font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

body{
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  background:
    linear-gradient(
      to bottom,

      /* transparent down to header */
      transparent 0 var(--header),

      /* Bar 1 */
      #74CDD9 var(--header) calc(var(--header) + var(--bar1)),

      /* gap */
      transparent calc(var(--header) + var(--bar1)) 
                  calc(var(--header) + var(--bar1) + var(--gap)),

      /* Bar 2 */
      #F4D82D calc(var(--header) + var(--bar1) + var(--gap))
              calc(var(--header) + var(--bar1) + var(--gap) + var(--bar2)),

      /* gap */
      transparent calc(var(--header) + var(--bar1) + var(--gap) + var(--bar2))
                  calc(var(--header) + var(--bar1) + var(--gap) + var(--bar2) + var(--gap)),

      /* Bar 3 */
      #F37620 calc(var(--header) + var(--bar1) + var(--gap) + var(--bar2) + var(--gap))
              calc(var(--header) + var(--bar1) + var(--gap) + var(--bar2) + var(--gap) + var(--bar3)),

      /* gap */
      transparent calc(var(--header) + var(--bar1) + var(--gap) + var(--bar2) + var(--gap) + var(--bar3))
                  calc(var(--header) + var(--bar1) + var(--gap) + var(--bar2) + var(--gap) + var(--bar3) + var(--gap)),

      /* Bar 4 */
      #E21D25 calc(var(--header) + var(--bar1) + var(--gap) + var(--bar2) + var(--gap) + var(--bar3) + var(--gap))
              calc(var(--header) + var(--bar1) + var(--gap) + var(--bar2) + var(--gap) + var(--bar3) + var(--gap) + var(--bar4))
    ),
    #000;
	
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

/* Disable sticky footer when we explicitly opt out */
.app-footer.not-sticky { position: static; }

/* Header / container / footer */
.app-header{
  position: relative;
  background: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.6));
  
  padding: 0 0;
  display: flex;
  justify-content: center; align-items: center;
}
.app-header h1{ 
	font-size: clamp(18px, 4vw, 26px); 
	font-weight: 700; 
	letter-spacing: .3px;
}

.app-container{ flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 0 5px 5px; max-width: 760px; margin: 0 auto; }

.app-footer{
  position: relative;
  margin-top: auto;
  bottom: 0;
  z-index: 10;
  background: linear-gradient(0deg, #201F20, #000 70%);
  border-top: 1px solid var(--border);

}


/* Cards / Sections */
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  padding: 10px;
}

.row{ display: grid; gap: 8px; }
.grid-2{ display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }

/* Inputs & Labels */
label{ font-size: .92rem; color: var(--sub); display:block; margin-bottom: 6px; }
input[type="text"], input[type="number"]{
  width: 100%; 
  padding: .8rem; 
  background: #000; 
  color: var(--text);
  border: 1px solid var(--border); 
  border-radius: var(--radius); 
  font-size: 20px;
}
input[type="text"]:focus, input[type="number"]:focus{
  outline: none; box-shadow: 0 0 0 2px rgba(115,205,217,.25); border-color: #3aa7b4;
}
input[type="number"]{ -moz-appearance: textfield; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{ -webkit-appearance: none; margin:0; }


/* Buttons: base + variants */
.btn {
  width: 100%; 
  display: inline-flex; 
  justify-content: center; 
  align-items: center; 
  gap: 4px;
  border-radius: var(--radius-lg); 
  border: 1px solid var(--border);
  background: #000; 
  color: var(--text); 
  text-decoration: none; 
  font-size: clamp(15px, 4vw, 18px);
  font-weight: 500;
  text-align: center;
  
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn :active{ transform: translateY(1px); }

/* Buttons: base + variants */
.btn-leaderboard {
  width: 100%; 
  display: inline-flex; 
  align-items: center; 
  border-radius: var(--radius-lg); 
  border: 1px solid #FFD700;
  background: #000; 
  color: #FFD700; 
  text-decoration: none; 
  font-size: clamp(15px, 4vw, 18px);
  font-weight: 500;
  text-align: center;
}

#remove-player {
	border: 1px dashed var(--danger);
}

/* Primary CTA = TEAL */
.btn-primary, .btn-accent{ background: var(--btnaccent); border-color: #009407; color: #062c33; font-weight: 600;}

/* Secondary CTA = ORANGE (kept for future use) */
.btn-secondary{ background: var(--warn); border-color: #c56018; color: #1c0f00; }

/* Add Player = YELLOW */
.btn-attention{ background: var(--attention); border-color: #bfa51d; color: #1a1400; }

/* Destructive = RED */
.btn-danger{ background: #000; border-color: var(--danger); color: var(--danger); }

/* Ghost / Outline (Prev/Next/Back/Difficulty/Players) */
.btn-ghost{ background: transparent; border: 1px dashed var(--border); color: var(--text);}

/* Toolbar */
.toolbar{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Difficulty chips */
.chips{ 
display: flex; 
flex-direction: column; 
flex-wrap: wrap; 
gap: 8px; 
width: 100%;
}

.chips .chip { 
width: 100%; 
text-align: center; 
}

button.chip{
  appearance: none; -webkit-appearance: none; 
  cursor: pointer;
  background: #000; 
  border: 1px solid var(--border);
  color: var(--text); 
  border-radius: 999px; 
  font-size: clamp(15px, 3vw, 18px);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

/* Selected colors per difficulty */
/* Any course whose data-diff begins with "Green" */
.chips .chip.active[data-diff^="Green"],
.chips .chip[aria-pressed="true"][data-diff^="Green"]{
  background: var(--accent-ok);
  border-left: 6px solid #2dce89;
  border-color: #2dce89;
  color: #061b06;
}

.chips .chip.active[data-diff^="Orange"],
.chips .chip[aria-pressed="true"][data-diff^="Orange"]{
  background: var(--warn);
  border-left: 6px solid #C74C00;
  border-color: #C74C00;
  color: #fff3f3;
}

/* Any course whose data-diff begins with "Blue" */
.chips .chip.active[data-diff^="Blue"],
.chips .chip[aria-pressed="true"][data-diff^="Blue"]{
  background: var(--blue);
  border-left: 6px solid #4D9BFF;
  border-color: #4D9BFF;
  color: #fff3f3;
}

.chips .chip.active[data-diff="Carty Special"],
.chips .chip[aria-pressed="true"][data-diff="Carty Special"]{
  background: var(--danger); border-left: 6px solid #8F1600; border-color: #8F1600; color: #fff3f3;
}

.chips .chip.active[data-diff="GFQ Classics"],
.chips .chip[aria-pressed="true"][data-diff="GQF Classics"]{
  background: var(--danger); border-left: 6px solid #8F1600; border-color: #8F1600; color: #fff3f3;
}

/* Course Difficulty chips (Easy / Standard / Hard) */
.chips .chip.active[data-cdiff="Easy"],
.chips .chip[aria-pressed="true"][data-cdiff="Easy"]{
  background: var(--accent-ok); border-left: 6px solid #2dce89; border-color: #2dce89; color: #061b06;
}
.chips .chip.active[data-cdiff="Standard"],
.chips .chip[aria-pressed="true"][data-cdiff="Standard"]{
  background: var(--warn); border-left: 6px solid #C74C00; border-color: #C74C00; color: #fff3f3;
}
.chips .chip.active[data-cdiff="Hard"],
.chips .chip[aria-pressed="true"][data-cdiff="Hard"]{
  background: var(--danger); border-left: 6px solid #8F1600; border-color: #8F1600; color: #fff3f3;
}

/* ONLY the course chooser gets 2-per-row */
.chips.chips-2up{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.chips.chips-2up .chip{
  width: 100%;
  justify-content: center;
}

/* If odd count, last spans full width */
.chips.chips-2up .chip:last-child:nth-child(odd){
  grid-column: 1 / -1;
}
/* Leaderboard: highlight difficulty */
.lb-course.diff-easy .title{ border-left: 8px solid #2dce89; }
.lb-course.diff-standard .title{ border-left: 8px solid #C74C00; }
.lb-course.diff-hard .title{ border-left: 8px solid #8F1600; }

/* Accessible focus ring */
button.chip:focus-visible{
  outline: none; box-shadow: 0 0 0 3px rgba(115,205,217,.28); border-color: #3aa7b4;
}

/* Hole list */
.hole-list{ display: grid; gap: 8px; }
.hole-item{
  min-width: 0; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  gap: 10px;
  padding: clamp(6px, 3vw, 8px);
  background: var(--bg);
  border: 1px solid #636969; 
  border-radius: var(--radius);
}
.hole-item .name{
	flex: 1 1 auto; 
	min-width: 0; 
	font-weight: 600; 
	font-size: clamp(15px, 3.8vw, 17px);
	overflow: hidden; 
	text-overflow: ellipsis; 
	white-space: nowrap; 
}

/* Badge keeps natural width */
.hole-item .badge { flex: 0 0 auto; white-space: nowrap; }

/* Section headings */
.section-title{
  margin: 5px 4px 5px; 
  color: var(--sub); 
  font-weight: 700;
  letter-spacing: .4px; 
  text-transform: uppercase; 
  font-size: .82rem;

}

.range-wrap{
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;   /* clips the inner grid at corners */
  background: #000;
}

/* Ranges: bordered table (black background) */
.range-table{
  width: 100%; 
  table-layout: fixed;
  border-collapse: collapse; 
  border-spacing: 0;
  background: #000; 

}
.range-table td.range-label{ width: 72%; }
.range-table td.range-strokes{ width: 28%; }
.range-table td{
  background: #000;
  padding: clamp(6px, 3vh, 8px) clamp(6px, 3vw, 8px);
  vertical-align: middle;
  font-size: clamp(15px, 3vw, 17px);
  border-top: 1px solid var(--border); 
  border-left: 1px solid var(--border);
  color: var(--text);
  min-width: 0;  
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.range-table tr:first-child td{ border-top: none; }
.range-table td:first-child{ border-left: none; }
.range-table td.range-strokes{ text-align: right; font-weight: 700; color: var(--accent); font-size: clamp(15px, 2.5vw, 17px);}

/* Player inputs */
.player-row{ display: grid; grid-template-columns: 1fr 140px; gap: 10px; align-items: center; }
.player-name{ font-weight: 600;}

/* Hole status badges */
.badge{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; font-size: 0.85rem; font-weight: 700;
  border: 1px solid var(--border); background: #0f1524; color: var(--sub); white-space: nowrap;
}
.badge .dot{ width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.badge.saved{ background: rgba(64,254,52,0.12); border-color: rgba(64,254,52,0.35); color: var(--accent-ok); }
.badge.todo{ background: rgba(76,81,81,0.12); border-color: var(--border); color: var(--sub); }

/* Keep hole links plain */
.hole-list a.hole-item,
.hole-list a.hole-item:link,
.hole-list a.hole-item:visited { color: var(--text); text-decoration: none; }

/* When a hole is complete, make the link text green */
.hole-list a.hole-item.complete,
.hole-list a.hole-item.complete:link,
.hole-list a.hole-item.complete:visited { color: var(--accent-ok); }

/* =========================
   Results (mobile-safe grid)
   ========================= */

/* Header + rows share the exact same responsive columns */
.result-row,
.result-header{
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 64px 56px; /* Place | Player | Strokes | Holes */
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: var(--grey-surface);
  border: 1px solid #636969;
  border-radius: var(--radius);
}

/* Header styling */
.result-header{
  font-weight: 800;
  background: #201F20;
}

/* Keep all cells inside the card on narrow screens */
.result-header > div,
.result-row > div{
  min-width: 0;              /* critical: allows grid items to shrink */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Right-align numeric columns (Strokes + Holes) in BOTH header and rows */
.result-header > div:nth-child(3),
.result-header > div:nth-child(4),
.total,
.games{
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Place pill fits the smaller first column */
.place{
  width: 46px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #000;
  border: 1px solid #636969;
  color: var(--sub);
  font-weight: 900;
}

/* Winner highlight */
.result-row.winner .place{
  background: var(--accent-ok);
  border-color: #1fae17;
  color: #061b06;
}

/* Row values */
.total{ font-weight: 900; color: var(--accent); }
.games{ font-weight: 700; color: var(--text); }

/* Slightly tighter on very narrow phones */
@media (max-width: 360px){
  .result-row,
  .result-header{
    grid-template-columns: 50px minmax(0, 1fr) 58px 52px;
    gap: 6px;
    padding: 10px;
  }
  .place{ width: 42px; height: 30px; }
}

/* Utility */
.mt-8{ margin-top: clamp(8px, 2.5vw, 10px); } 
.mt-12{ 
	margin-top: clamp(10px, 2.5vw, 14px);
	margin-bottom: 0;
} 

.mt-20{ margin-top: clamp(12px, 2.5vw, 16px); }

.center{ text-align: center; }
.small{ font-size: .9rem; margin: 5px; color: var(--sub); }
.hidden{ display: none; }

/* Fingers-friendly */
button, .btn { 
min-height: clamp(48px, 7vh, 56px);
border-radius: 14px; 
}

/* iOS no-zoom on input tap */
input, select, textarea { font-size: 14px; }

/* Toast */
.toast{
  position: fixed; 
  bottom: 86px; 
  left: 50%; 
  transform: translateX(-50%);
  background: #201F20; 
  border: 1px solid var(--border); 
  color: var(--text);
  padding: 10px 14px; 
  border-radius: 999px; 
  box-shadow: var(--shadow); 
  font-weight: 700;
  opacity: 0; 
  animation: toast-pop 1.8s ease forwards; 
  z-index: 50;
}
@keyframes toast-pop{
  0%{ transform: translateX(-50%) translateY(8px); opacity:0; }
  10%{ transform: translateX(-50%) translateY(0); opacity:1; }
  85%{ opacity:1; }
  100%{ transform: translateX(-50%) translateY(8px); opacity:0; }
}

/* Stroke dropdown */
.stroke-select{
  width: 100%;
  padding: 10px;
  background: #000; 
  color: var(--text);
  border: 1px solid var(--border); 
  border-radius: var(--radius); 
  font-size: 15px !important; 
  outline: none;
}
.stroke-select:focus{ box-shadow: 0 0 0 2px rgba(115,205,217,.25); border-color: #3aa7b4; }


/* ---- Drop-in from top variant ---- */
.animation-pop.drop-in {
  position: fixed;
  top: 30%;                 /* target resting spot (can override via JS) */
  left: 50%;
  width: 200px;             /* can override via JS */
  z-index: 10000;
  pointer-events: none;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.45));

  /* Start above the viewport, fall to center, pause, then fade */
  transform: translate(-50%, -150%) scale(1);
  animation-name: dropIn;
  animation-duration: 2.2s;           /* can override via JS */
  animation-timing-function: cubic-bezier(.2,.8,.2,1);
  animation-fill-mode: forwards;
}

@keyframes dropIn {
  /* start off-screen above with 0 opacity */
  0%   { transform: translate(-50%, -150%) scale(1); opacity: 0; }
  /* falling in & appearing */
  15%  { opacity: 1; }
  /* reach the middle (resting spot) */
  60%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  /* brief pause while fully visible */
  80%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  /* fade out without moving */
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

.animation-pop {
  position: fixed;
  top: 30%;
  left: 50%;
  width: 200px;                 /* tweak size */
  transform: translate(-50%, -50%) scale(0.2);
  z-index: 10000;
  pointer-events: none;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.45));
  animation: animationZoom 2s ease-out forwards;
}

@keyframes animationZoom {
  0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
  20%  { transform: translate(-50%, -50%) scale(1.0); opacity: 1; }
  80%  { transform: translate(-50%, -50%) scale(1.8); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .animation-pop { animation: none; display: none; }
}

/* Wide layout: let pages use full screen width */
.layout-wide .app-container{ 
  max-width: 800px;      /* remove global max width */
  width: 100%;
  margin: 0 auto;
  padding-left: 16px;   /* keep a little breathing room */
  padding-right: 16px;
}

/* Make inner cards expand too */
.layout-wide .card { 
  max-width: none;
  width: 100%;
}

/* If you have any row/grid that had a fixed max-width, unlock it */
.layout-wide .row, 
.layout-wide .hole-list, 
.layout-wide .results {
  max-width: none;
}

/* Make a single child in .toolbar span both grid columns */
.toolbar > *:only-child {
  grid-column: 1 / -1;   /* span full grid width */
  width: 100%;           /* fill that span */
  justify-content: center;
}

/* 3 equal columns toolbar */
.toolbar.toolbar-3{
  grid-template-columns: repeat(3, 1fr);
}

/* leaderboard course colors */
.course-easy    .title { color: var(--accent-ok); }  /* green */
.course-medium  .title { color: var(--warn); }  /* orange */
.course-hard    .title { color: #4D9BFF; }  /* blue */
.course-carty-special .title { color: var(--danger); }  /* red */

.lb-course .title {
  font-weight: 700;
  font-size: clamp(16px, 2.5vw, 18px);
  text-align: center;   /* center the titles */
  margin-bottom: 8px;
}

.player-name .running-total {
  margin-left: 6px;
  font-weight: 600;
  font-size: clamp(14px, 2.5vw, 16px);
  color: var(--attention);
}

.p-tag{
  display: inline-block;
  min-width: clamp(32px, 2.5vw, 40px);
  font-size: clamp(14px, 2.5vw, 16px);
  font-weight: 800;
  color: var(--sub);
}

/* Prevent iOS zoom on focus */
.player-input input,
input[type="text"],
input[type="number"],
select{
  font-size: 16px !important;
}