:root{
  --bg:#0e1325; --surface:#10172a; --card:#111a30; --ink:#e7eefc; --muted:#a8b3cf;
  --brand:#4ade80; --brand-ink:#052e16; --accent:#60a5fa; --danger:#ef4444; --ring:#93c5fd;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;background:
  radial-gradient(1200px 800px at 10% -10%, #17305f 0%, transparent 60%),
  radial-gradient(1000px 700px at 110% 10%, #1a3c2b 0%, transparent 55%),
  var(--bg);
color:var(--ink); -webkit-font-smoothing:antialiased;}

.page{min-height:100dvh;display:flex;flex-direction:column;gap:16px}
.hero{padding:24px 16px;text-align:center}
.brand{font-size:42px;filter:drop-shadow(0 6px 20px rgba(0,0,0,.35))}
.h1{font-size: clamp(22px, 6vw, 34px); margin:6px 0 8px; font-weight:800; letter-spacing:.2px}
.sub{color:var(--muted); margin:0 auto; max-width:520px}
.cta{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap}

.container{max-width:900px;margin:0 auto;padding:16px}
.card{background:
  linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0)),
  var(--card); border:1px solid rgba(255,255,255,.08);
border-radius:18px; padding:16px; box-shadow:0 12px 30px rgba(0,0,0,.35); margin-bottom:12px}

.card.soft{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0)), #0e1730}

.flow > * + *{margin-top:10px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.col{flex:1 min(260px,100%)}
.foot{display:flex;justify-content:center;padding:8px 0 20px}

.btn{
  appearance:none;border:0;border-radius:999px;padding:13px 18px;font-weight:800;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0)) , var(--brand);
  color:var(--brand-ink); cursor:pointer; box-shadow:0 10px 24px rgba(0,0,0,.35);
  transition: transform .06s ease, box-shadow .2s ease; text-decoration:none;
}
a.btn:link, a.btn:visited { text-decoration:none; color:inherit }
.btn:active{transform:translateY(1px)}
.btn.ghost{background:#1f2a44;color:var(--ink);border:1px solid rgba(255,255,255,.12); text-decoration:none}
.btn.mini{padding:10px 14px}
.btn.danger{background: var(--danger); color: #fff}
.btn.square{border-radius:14px}
.btn.block{height:100%}
.mini.ghost{background:transparent;border:1px solid rgba(255,255,255,.2);padding:6px 10px;border-radius:999px;color:#cbd5e1;text-decoration:none;font-size:12px}

.input, select{
  width:100%;padding:13px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.12);
  background:#0c1328;color:var(--ink);font-size:16px;
}
.input.code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; letter-spacing: 2px; text-align:center; font-weight:800}
.label{display:block;margin:.5rem 0 .25rem;color:var(--muted);font-size:14px}
.label-inline{color:var(--muted);margin-right:8px}

.badge{display:inline-block;background:#0b1020;border:1px solid rgba(255,255,255,.15);
  padding:.35rem .7rem;border-radius:999px;color:#cbd5e1}
.badge.big{font-size:20px;padding:.5rem .9rem}

.h2{font-size: clamp(18px, 4.5vw, 24px); margin:0 0 4px; font-weight:800}
.muted{color:var(--muted);margin:0}

.kpi{display:flex;gap:12px;align-items:center}
.kpi .num{font-size: clamp(24px, 6vw, 34px); font-weight:800}

.table{display:grid;gap:12px}
.rowline{display:grid;grid-template-columns:1fr .9fr .8fr;gap:10px;align-items:center}
.rowline .btn{width:100%}
.fieldgroup{display:grid;grid-template-columns:1fr auto;gap:8px}

.codefield{display:flex;align-items:center;gap:8px}
.codefield .input{max-width:170px}

.choiceList{display:grid;gap:10px;margin-top:10px}
.choiceItem{display:flex;align-items:center;gap:10px;background:#0c1328;border:1px solid rgba(255,255,255,.12);padding:12px;border-radius:14px}
.choiceFooter{margin-top:12px}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;padding:16px;z-index:50}
.modal .panel{background:var(--card);border:1px solid rgba(255,255,255,.1);border-radius:16px;max-width:900px;width:100%;max-height:90dvh;overflow:auto;padding:16px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal .panel .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}

.headbar{position:sticky;top:0;z-index:5;background:rgba(17,26,48,.9);backdrop-filter:blur(6px);border-radius:14px;padding:10px;margin-bottom:12px}
.headbar .actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.navwrap{display:flex;justify-content:center;align-items:center}
.navholes{display:flex;gap:8px;align-items:center}
.navholes .btn{min-width:44px}

:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.sr{position:absolute;left:-9999px}
.pname{font-size: clamp(18px, 5.5vw, 22px); font-weight: 700; margin: 4px 0 4px}
.line{margin: 4px 0}

/* Superadmin Login spacing */
.loginForm .row{gap:14px;flex-wrap:wrap}
.loginForm .row.fields{gap:14px}
.loginForm .row.btnrow{margin-top:14px}
.loginForm .input{min-width:220px}

@media (min-width:720px){
  .container{padding:24px}
  .rowline{grid-template-columns:1.2fr .7fr .6fr}
}

.notice{background:#0b1226;border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:10px;margin:10px 0}
.notice .msg{margin:0 0 8px;color:#cbd5e1}

.ruleRow{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start}
.badge.num{min-width:36px;text-align:center;background:#0b1020;border:1px solid rgba(255,255,255,.15);padding:.4rem .6rem;border-radius:10px;font-weight:800}
.posinput{width:56px;text-align:center}

.prewrap{white-space:pre-wrap}

#rulesAdmin[data-collapsed="1"] #ruleList{display:none}
#rulesAdmin[data-collapsed="1"] #ruleAdd{display:none}
#rulesAdmin .toggle{margin-left:auto}

/* Player current hole box */
.infoBox{background:#0c1328;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:10px;margin:8px 0}
.infoRow{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center}
.infoBadge{min-width:38px;text-align:center;background:#0b1020;border:1px solid rgba(255,255,255,.15);padding:.45rem .6rem;border-radius:10px;font-weight:800}

/* QR layout */
.qrWrap{display:flex;flex-direction:column;align-items:center;gap:10px}

/* Podium */
.podium{display:flex;justify-content:center;gap:10px;align-items:flex-end;margin:10px 0 16px}
.podium .col{display:flex;flex-direction:column;align-items:center;gap:6px}
.podium .bar{width:90px;border-radius:12px 12px 0 0;background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0)), #1e293b;border:1px solid rgba(255,255,255,.1);position:relative;display:flex;align-items:flex-end;justify-content:center}

.podium .name{font-weight:800}
.podium .bar.first{height:160px;background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)), #f5c542}
.podium .bar.second{height:130px;background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)), #c0c0c0}
.podium .bar.third{height:110px;background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)), #cd7f32}

/* Reveal animation */
.hiddenReveal{visibility:hidden;opacity:0;transform:translateY(10px);transition:all .5s ease}
.hiddenReveal.show{visibility:visible;opacity:1;transform:translateY(0)}

/* Confetti */
.confetti{z-index:9999; position:fixed;inset:0;pointer-events:none;overflow:visible}
@keyframes confettiFall{
  0%{transform:translate(var(--x), -10vh) rotate(0deg); opacity:1}
  100%{transform:translate(calc(var(--x) + 10px), 110vh) rotate(360deg); opacity:0}
}
.confetti-piece{position:absolute;top:0;left:50%;width:8px;height:12px;background:#fff;animation: confettiFall linear forwards;opacity:.9}

.lbRow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lbRow .who{min-width:0;overflow:visible;text-overflow:clip;white-space:normal}
.lbBadges{display:flex;align-items:center;gap:6px;flex-shrink:0}
.badge{background:#0b1020;border:1px solid rgba(255,255,255,.15);padding:.25rem .5rem;border-radius:999px;font-size:.85rem}
.badge.big{font-size:.95rem;font-weight:800}

.podium .bar .place{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:42px; 
  color:rgba(0,0,0,.35); text-shadow:0 1px 0 rgba(255,255,255,.35);
}