/*!
* Copyright © RankMyRound. All Rights Reserved.
* Rank My Round (rankmyround.com) and all related code, design, features, and
* content are the property of Wield Limited. No part may be copied, modified,
* distributed, or used without prior written permission.
* For licensing, partnership, or usage inquiries, contact: info@rankmyround.com
*/

body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background-color: #cfdae0;
  text-align: center;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  touch-action: pan-y;
}
*, *::before, *::after {
  box-sizing: border-box;
}
img {
  -webkit-user-drag: none;
  user-drag: none;
}
a {
  text-decoration: none;
  color: #002b56;
}
/* Headings used on this page */
h2 {
  text-align: left !important;
  font-size: 16px;
  line-height: 1.2;
  margin: 0 0 10px 0;
  font-weight: 400 !important;
  color: #00193d !important;
}
/* Headings used on this page */
h3 {
  text-align: left;
  font-size: 16px;
  line-height: 1.2;
  margin: 0 0 10px 0;
  font-weight: 400 !important;
  color: #002b56 !important;
}
h6 {
  text-align: center;
  font-size: 24px;
  line-height: 1.1;
  margin: 0 0 20px 0;
  font-weight: 400 !important;
  color: #002b56 !important;
}
/* Layout used here */
#fixed-centre {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 750px;
  width: 90%;
  margin: 40px auto 0 auto;
  padding: 0 16px;
  text-align: center;
}
#fixed-centre h3 {
  font-weight: 200;
  line-height: 1.4;
  color: #002b56;
  text-align: center;
}
#fixed-centre img {
  width: 300px;
  max-width: 80vw;
  margin-bottom: 10px;
}
/* Image block on page */
.after-access-img { 
  margin-top: 20px; 
  text-align: center; 
}
.after-access-img img {
  display: inline-block;
  width: 100% !important;
  height: auto;
  border-radius: 12px;
}
#box1 {
  height: 1px;
  width: 90%;
  margin: 30px 5%;
  background: linear-gradient(to right, #cfdae0, #223f56, #cfdae0);
}
#box2 {
  height: 1px;
  width: 90%;
  margin: 10px 5%;
  background: linear-gradient(to right, #cfdae0, #223f56, #cfdae0);
}
/* ===============================
   NORMAL FLOW SHOT MAPPER
================================== */

#shot-map-container {
  width: 90%;
  height: 80vh;
  max-width: 750px;
  margin: 20px auto 60px auto;
  position: relative;
  background-color: #07353f;
  border-radius: 12px;
  aspect-ratio: 9 / 16;
}
#image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 12px;

  display: flex;
  align-items: flex-end;   /* anchor image to bottom */
  justify-content: center;
}
#course-image {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}
/* Marker layer sits exactly over image */
#marker-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Shot markers */
.shot-marker {
  position: absolute;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 400;
  color: #00193d;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
/* Second shot per hole */
.shot-marker.second-shot {
  background: #5fffa0;
  color: #00193d;
}
.shot-marker {
  flex-direction: column;
  font-weight: 400;
}
/* Par 5 fairway shots */
.shot-marker.par5-fairway {
  background: #00193d;
  color: #cfdae0;
}
.hole-num {
  font-size: 12px;
  line-height: 1;
}
.par-label {
  font-size: 8px;
  line-height: 1;
  margin-top: 1px;
}
/* ===============================
   DISTANCE LINES
================================== */

#distance-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.distance-line {
  position: absolute;
  left: 0;
  margin-left: 5%;
  width: 90%;
  border-top: 1px dashed #cfdae0;
}
.distance-line::after {
  color: #cfdae0;
  content: attr(data-label);
  position: absolute;
  right: 5px;
  font-size: 10px;
  padding: 0px 0px;
  border-radius: 10px;
}
button {
  font-size: 10px;
  padding: 10px 16px;
  margin-top: 5px;
  background-color: #cfdae0;
  color: #00193d;
  font-size: 14px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
}
/* ===============================
   PAR BUTTON GROUP
================================== */
.popup-hole-label {
  font-size: 16px;
  text-transform: none;
  font-weight: 400;
  text-align: center;
  margin-bottom: 10px;
  color: #cfdae0;
}
.par-options {
  display: flex;
  justify-content: center;
  gap: 1px; /* 1px separation */
}
.par-options button {
  flex: 1;
  margin: 0;
  height: 60px;
  border-radius: 0 !important; /* override global 50px */
}
/* Left button */
.par-options button:first-child {
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
}
/* Right button */
.par-options button:last-child {
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}
#box3 {
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
  height: 1px;
  width: 100%;
  background-color: #607f91;
}
/* =========================================================
   SHOT CONTROLS — RANKLAB PILL STYLE
   ========================================================= */
.shot-controls button {
  margin-top: 15px;
  margin-left: 5px;
  margin-right: 5px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: Poppins, sans-serif;
  font-size: 12px;
  padding: 6px 18px;
  border-radius: 20px;
  cursor: pointer;
  background: rgba(255,59,81,0.15);
  border: 1px solid #ff3b51;
  color: #ff3b51;
}
#par-popup {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
#par-popup.hidden {
  display: none;
}
.par-confirm-box {
  width: 80%;
  max-width: 600px;
  margin: 0 auto;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  padding: 20px;
  /* frosted glass */
  background-color: rgba(0, 43, 86, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(207, 218, 224, 0.15);
  color: #002b56;
  border-radius: 20px;
  max-height: 65vh;
  display: flex;
  flex-direction: column;
  gap: 15px;
  animation: scaleUp 0.3s ease-out;
  transform-origin: center;
}
#line-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#line-layer line {
  stroke-width: 2;
}
#ranklab-par-stats {
  width: 100%;
  max-width: 800px;
  margin: 20px 0;
  padding: 18px;
  box-sizing: border-box;
  border-radius: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  text-align: center;
}
/* Each row inside */
.par-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.par-row label {
  display: block;
  font-weight: 400;
  margin-bottom: 6px;
}
/* Reorder elements inside each Par block */
.par-row label {
  order: 1;
}
.par-row .par-meter {
  order: 2;
}
.par-row select {
  order: 3;
}
.par-row .stats-bits {
  order: 4;
}
.par-clear-btn {
  grid-column: span 3;
  justify-self: center;
}
/* Pill select style */
#ranklab-par-stats select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: rgba(186,198,204,0.5);
  border: 1px solid #97a4aa;
  color: #002b56;
  font-family: Poppins, sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 6px 34px 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  outline: none;
  width: 100%;
  text-align: center;
  margin-bottom: 0px;
}
#ranklab-par-stats select:focus {
  outline: none;
  box-shadow: none;
}
.average{
font-variant-numeric: tabular-nums;
}
/* Clear button */
.par-clear-btn {
  margin-top: 10px;
  background: rgba(255,59,81,0.15);
  border: 1px solid #ff3b51;
  color: #ff3b51;
  font-family: Poppins, sans-serif;
  font-size: 12px;
  padding: 6px 18px;
  border-radius: 20px;
  cursor: pointer;
}
/* =========================================================
   PAR COLOUR CODING
   ========================================================= */

.par-row[data-par="3"] label,
.par-row[data-par="3"] .average,
.par-row[data-par="3"] .count {
  color: #002b56;
}
.par-row[data-par="4"] label,
.par-row[data-par="4"] .average,
.par-row[data-par="4"] .count {
  color: #002b56;
}
.par-row[data-par="5"] label,
.par-row[data-par="5"] .average,
.par-row[data-par="5"] .count {
  color: #002b56;
}

/* ===============================
   PAR PERFORMANCE METER
================================== */

.par-meter {
  position: relative;
  width: 100%;
  height: 16px;
  margin-top: 25px;
}
/* gradient bar */
.par-meter-bar {
  width: 100%;
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(
    to right,
    #ff3b51 0%,
    #cfdae0 50%,
    #0092ff 100%
  );
}
/* Arrow container */
.par-meter-arrow {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 8px solid #002b56;
  transition: left 0.5s ease;
}
/* Avg label above arrow */
.par-meter-arrow .average {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 600;
  color: #002b56;
  white-space: nowrap;
}

/* ===============================
   GIR TRACKER
================================== */

.gir-row {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 4px;
  width: 100%;
  max-width: 100%;     /* IMPORTANT */
  margin: 5px 0;      /* remove auto centering */
  box-sizing: border-box;
}
.gir-hole {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid rgba(0,43,86,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(10px, 2vw, 14px);
  color: #002b56;
  cursor: pointer;
}
/* states */
.gir-green {
  background: #59b259;
  color: #fff;
}
.gir-red {
  background: #ff3b51;
  color: #fff;
}
.gir-orange {
  background: #8ec641;
  color: #00193d;
}
.gir-clear-btn {
  margin-top: 15px;
  background: rgba(255,59,81,0.15);
  border: 1px solid #ff3b51;
  color: #ff3b51;
  font-family: Poppins, sans-serif;
  font-size: 12px;
  padding: 6px 18px;
  border-radius: 20px;
  cursor: pointer;
}
.stats-bits{
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #002b56;
  font-weight: 400;
  margin-top: 5px;
}
#par-thru {
  grid-column: span 3;
  text-align: center;
  width: 100%;
  margin-bottom: 5px;
}
/* ===============================
   FAIRWAY TRACKER
================================== */

.fairway-hit {
  background: repeating-linear-gradient(
    -30deg,
    #59b259,
    #59b259 6px,
    #30a34f 6px,
    #30a34f 12px
  );
  color: #fff;
}
.fairway-miss {
  background: #ff3b51;
  color: #fff;
}
/* ===============================
   PUTTS
================================== */

.putt-1{
background:#59b259;
color:#fff;
}

.putt-2{
background:#59b259;
color:#fff;
}

.putt-3{
background:#ff3b51;
color:#fff;
}

.putt-4{
background:#ff3b51;
color:#fff;
}
#ranklab-insights{
  width:100%;
  max-width:750px;
  margin:20px auto;
  padding:18px;
  border-radius:14px;
  background:rgba(0,43,86,0.05);
  border:1px solid rgba(0,43,86,0.15);
}

#insights-output{
  font-size:14px;
  line-height:1.6;
  color:#002b56;
}