/* NGD Green Swing Invitational — Satisfaction Survey
   Stage is fixed 16:9 so all positions (% of stage) stay glued to the artwork. */

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

[hidden] { display: none !important; }

html, body {
  height: 100%;
  background: #06263f;
  overflow: hidden;
  font-family: "Prompt", "Segoe UI", "Noto Sans Thai", "Leelawadee UI", sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: manipulation;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Stage (16:9 canvas matching BG artwork 4000x2250) ---------- */
.stage {
  position: relative;
  width: min(100vw, 177.78vh);
  aspect-ratio: 16 / 9;
  background: url("assets/bg.jpg") center / cover no-repeat;
  overflow: hidden;
}

.stage.plain {
  background-image: url("assets/bg2.jpg");
}

/* ---------- Rating options ---------- */
/* Card occupies ~8%..92% x, ~30%..89% y of the artwork.
   Heading ends ~46%; Thai labels baseline ~83.5%; OK sits on the card edge ~91%. */
.ratings {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 49%;
  height: 34.5%;
  display: flex;
  align-items: flex-end;
}

.rate {
  flex: 1 1 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  outline-offset: -4px;
}

.rate img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
  filter: drop-shadow(0 .4vw .8vw rgba(2, 40, 60, .18));
}

/* rate5 composite is taller (stars on top): 834/741 -> 112.6% */
.rate-5 img { height: 112.6%; }

.rate:hover img,
.rate:focus-visible img {
  transform: translateY(-2.5%) scale(1.03);
}

.rate.selected img {
  transform: translateY(-2%) scale(1.1);
  filter:
    drop-shadow(0 0 1.4vw var(--c))
    drop-shadow(0 .6vw 1vw rgba(2, 40, 60, .3));
}

/* Once a score is picked, dim the rest so the choice reads clearly on a kiosk. */
.ratings.has-selection .rate:not(.selected) img {
  opacity: .45;
  filter: grayscale(.35) drop-shadow(0 .3vw .6vw rgba(2, 40, 60, .12));
}

/* ---------- OK button ----------
   Hangs just below the card's bottom edge (~89%), floating on the backdrop. */
.ok {
  position: absolute;
  left: 50%;
  top: 90%;
  width: 11%;
  transform: translateX(-50%);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: opacity .2s ease, transform .15s ease;
}

.ok img {
  width: 100%;
  display: block;
  filter: drop-shadow(0 .45vw .9vw rgba(0, 30, 60, .35));
}

.ok:disabled {
  opacity: .45;
  cursor: default;
}
.ok:disabled img {
  filter: grayscale(.85) drop-shadow(0 .3vw .6vw rgba(0, 30, 60, .25));
}

.ok:not(:disabled):hover { transform: translateX(-50%) scale(1.05); }
.ok:not(:disabled):active { transform: translateX(-50%) scale(.96); }

.ok.ready { animation: okPulse 1.6s ease-in-out infinite; }
@keyframes okPulse {
  0%, 100% { filter: drop-shadow(0 0 .2vw rgba(0, 200, 180, 0)); }
  50%      { filter: drop-shadow(0 0 1.3vw rgba(0, 200, 180, .65)); }
}

/* ---------- Fullscreen toggle (operator convenience, unobtrusive) ---------- */
.fs {
  position: absolute;
  right: 1.2%;
  bottom: 2%;
  width: 3.2%;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  color: #0a4d8c;
  font-size: 1.4vw;
  line-height: 1;
  cursor: pointer;
  opacity: .35;
  transition: opacity .2s;
}
.fs:hover { opacity: 1; }

/* ---------- Thank-you toast ---------- */
.toast {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 45, 80, .35);
  backdrop-filter: blur(.4vw);
  opacity: 0;
  transition: opacity .25s ease;
}
.toast.show { opacity: 1; }

.toast-card {
  background: #fff;
  border-radius: 2vw;
  padding: 2.2% 4%;
  text-align: center;
  box-shadow: 0 1.5vw 4vw rgba(0, 30, 60, .35);
  transform: translateY(4%) scale(.92);
  transition: transform .3s cubic-bezier(.2, 1.4, .4, 1);
}
.toast.show .toast-card { transform: translateY(0) scale(1); }

.toast-card img {
  height: 9vw;
  width: auto;
  margin-bottom: 2%;
}
.toast-th {
  font-size: 2.4vw;
  font-weight: 700;
  color: #0a4d8c;
  line-height: 1.25;
}
.toast-en {
  font-size: 1.5vw;
  font-weight: 500;
  color: #2e7d52;
  margin-top: .4%;
}

/* ---------- Results page ---------- */
.results-body { background: #06263f; }

.panel {
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
  width: 72%;
  background: rgba(255, 255, 255, .94);
  border-radius: 1.6vw;
  box-shadow: 0 1.2vw 3.5vw rgba(0, 30, 60, .25);
  padding: 1.8% 3% 2.2%;
}

.panel h1 {
  font-size: 2vw;
  color: #0a4d8c;
  text-align: center;
  font-weight: 700;
}
.panel .sub {
  text-align: center;
  color: #5b7a94;
  font-size: 1.05vw;
  margin-top: .2%;
}

.res-row {
  display: flex;
  align-items: flex-end;
  margin-top: 2.2%;
  gap: 2%;
}
.res-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55vw;
}
.res-col img { height: 4.6vw; width: auto; }
.res-col .n { font-size: 1.9vw; font-weight: 700; color: #16324a; line-height: 1; }
.res-col .lbl { font-size: .95vw; color: #5b7a94; }

.bar-track {
  width: 100%;
  height: .8vw;
  background: #e6eef4;
  border-radius: 1vw;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  width: 0;
  border-radius: 1vw;
  background: var(--c);
  transition: width .5s ease;
}

.res-summary {
  display: flex;
  justify-content: center;
  gap: 6%;
  margin-top: 2%;
  padding-top: 1.4%;
  border-top: 1px solid #e2ebf2;
  font-size: 1.15vw;
  color: #16324a;
}
.res-summary b { color: #0a4d8c; font-size: 1.5vw; }

.back-link {
  position: absolute;
  left: 1.5%;
  bottom: 2%;
  color: rgba(255, 255, 255, .75);
  text-decoration: none;
  font-size: 1vw;
}
.back-link:hover { color: #fff; }