:root{
  /* WORLD CUP theme: stadium green + trophy gold + white */
  --bg:#04130b;
  --bg2:#072014;
  --card:#0b2c1b;
  --card2:#0f3823;
  --line:#1f5a3a;
  --txt:#f3fff8;
  --muted:#8fc5a6;
  --green:#16c66a;
  --green2:#39e08a;
  --gold:#ffd23d;
  --gold2:#ffe27a;
  --red:#ff5566;
  --blue:#3aa0ff;
  --pink:#ff3d8b; /* small accent only */
  --shadow:0 10px 30px rgba(0,0,0,.5);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1100px 560px at 18% -10%, rgba(22,198,106,.28), transparent 60%),
    radial-gradient(1000px 520px at 100% 0%, rgba(255,210,61,.18), transparent 55%),
    linear-gradient(180deg,var(--bg),var(--bg2));
  color:var(--txt);
  font-family:"Noto Sans Lao","Phetsarath OT",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Apple Color Emoji","Noto Color Emoji",sans-serif;
  min-height:100vh;
  padding-bottom:88px; /* space for bottom nav */
  -webkit-font-smoothing:antialiased;
}
a{color:var(--green2)}

/* pitch stripes accent on body top */
.hero{
  position:relative;
  padding:24px 18px 16px;
  text-align:center;
  overflow:hidden;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 28px, transparent 28px 56px);
}
.hero h1{
  margin:0;
  font-size:30px;
  line-height:1.08;
  font-weight:900;
  letter-spacing:.3px;
  background:linear-gradient(90deg,var(--gold),var(--green2),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 26px rgba(22,198,106,.25);
}
.hero p{margin:8px 0 0;color:var(--muted);font-size:13px;font-weight:600}
.hero .flames{font-size:24px;letter-spacing:6px;filter:drop-shadow(0 0 8px rgba(255,210,61,.6))}

/* ---------- COUNTDOWN ---------- */
.countdown{
  margin:14px auto 0;max-width:560px;
  background:linear-gradient(160deg,var(--card2),var(--card));
  border:1px solid var(--gold);border-radius:16px;padding:10px 12px;
  box-shadow:var(--shadow);
}
.countdown .cd-label{font-size:11px;color:var(--gold2);font-weight:800;letter-spacing:.3px}
.countdown .cd-teams{font-size:14px;font-weight:800;margin:3px 0 6px}
.countdown .cd-clock{display:flex;gap:8px;justify-content:center}
.cd-cell{background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:10px;padding:6px 0;min-width:54px}
.cd-cell .v{font-size:22px;font-weight:900;color:var(--gold);line-height:1}
.cd-cell .u{font-size:9px;color:var(--muted);text-transform:uppercase;margin-top:3px}
.countdown.live{border-color:var(--red)}
.countdown.live .cd-clock{display:none}
.cd-live{display:none;font-size:18px;font-weight:900;color:var(--red);animation:pulse 1.1s infinite}
.countdown.live .cd-live{display:block}

.potbar{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  margin:12px auto 0;max-width:560px;
}
.pot{
  flex:1 1 30%;min-width:96px;
  background:linear-gradient(160deg,var(--card2),var(--card));
  border:1px solid var(--line);border-radius:16px;padding:10px 8px;
  box-shadow:var(--shadow);
}
.pot .n{font-size:18px;font-weight:900;color:var(--gold)}
.pot .l{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
.pot.green .n{color:var(--green2)}
.pot.red .n{color:var(--red)}

/* ---------- LAYOUT ---------- */
main{max-width:620px;margin:0 auto;padding:6px 14px 30px}
.tab{display:none;animation:fade .25s ease}
.tab.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.section-title{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:18px 2px 12px;font-size:16px;font-weight:800;letter-spacing:.2px;
  color:var(--green2);
}
.section-title small{color:var(--muted);font-weight:600;font-size:12px}

/* ---------- CARDS ---------- */
.card{
  background:linear-gradient(160deg,var(--card2),var(--card));
  border:1px solid var(--line);border-radius:18px;padding:14px;
  margin-bottom:12px;box-shadow:var(--shadow);
}

/* ---------- AVATAR + PENDING HEAD BADGE ---------- */
.ava{
  position:relative;width:44px;height:44px;border-radius:50%;
  flex:0 0 auto;display:grid;place-items:center;font-weight:800;color:#04130b;
  background:linear-gradient(135deg,var(--green2),var(--gold));
  box-shadow:0 0 0 2px rgba(255,255,255,.08);overflow:visible;
}
.ava img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.ava.lg{width:62px;height:62px;font-size:20px}
.ava .head{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  font-size:8px;font-weight:900;white-space:nowrap;
  padding:2px 6px;border-radius:8px;line-height:1;
  letter-spacing:.2px;box-shadow:var(--shadow);
}
.ava .head.pending{background:var(--red);color:#fff;animation:pulse 1.3s infinite}
.ava .head.paid{background:var(--green);color:#03190e}
.ava .head.safe{background:#1d4a6b;color:#cfe7ff}
.ava .head.king{background:var(--gold);color:#3a2c00}
@keyframes pulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.12)}}

/* ---------- PLAYER ROWS ---------- */
.player-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.player-row:last-child{border-bottom:0}
.player-row .info{flex:1;min-width:0}
.player-row .nm{font-weight:800;font-size:15px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.player-row .tm{font-size:13px;color:var(--muted);margin-top:1px}
.player-row .amt{text-align:right;font-weight:900;font-size:15px;white-space:nowrap}
.player-row .rk{font-size:18px;font-weight:900;width:26px;text-align:center;flex:0 0 auto;color:var(--muted)}
.amt.owe{color:var(--red)}
.amt.zero{color:var(--green2)}
.tag{font-size:10px;font-weight:800;padding:3px 7px;border-radius:999px;letter-spacing:.2px}
.tag.alive{background:rgba(22,198,106,.16);color:var(--green2)}
.tag.out{background:rgba(255,85,102,.16);color:var(--red)}
.tag.champ{background:rgba(255,210,61,.2);color:var(--gold)}

/* ---------- MATCH CARDS ---------- */
.match-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.match-when{font-size:11px;color:var(--muted);font-weight:700}
.badge-round{font-size:10px;font-weight:900;background:var(--green);color:#03190e;padding:3px 8px;border-radius:999px;letter-spacing:.5px}
.vs{display:flex;align-items:stretch;gap:8px}
.side{
  flex:1;background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:14px;padding:10px;text-align:center;position:relative;
}
.side.win{border-color:var(--green2);box-shadow:0 0 0 1px var(--green2) inset}
.side.lose{opacity:.7}
.side .flag{font-size:26px}
.side .tn{font-weight:800;font-size:14px;margin-top:2px}
.side .rate{font-size:11px;margin-top:4px;font-weight:800}
.rate.hot{color:var(--gold)}
.rate.flat{color:var(--muted)}
.side .fine{font-size:11px;color:var(--red);font-weight:800;margin-top:2px}
.vs-mid{display:grid;place-items:center;width:34px;font-weight:900;color:var(--gold)}
.pickers{display:flex;flex-wrap:wrap;gap:10px 6px;margin-top:8px}
.picker{display:flex;flex-direction:column;align-items:center;gap:3px;width:52px}
.picker .ava{width:38px;height:38px;font-size:13px}
.picker .pn{font-size:9px;color:var(--muted);max-width:52px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
.nopick-note{font-size:11px;color:var(--muted);margin-top:8px}
.nopick-note b{color:var(--red)}
.empty{color:var(--muted);font-size:13px;text-align:center;padding:18px}

/* ---------- HALL OF FAME ---------- */
.hof-top{display:flex;justify-content:center;align-items:flex-end;gap:10px;margin:6px 0 6px}
.podium{display:flex;flex-direction:column;align-items:center;gap:6px;width:32%}
.podium .ava{width:64px;height:64px;font-size:22px}
.podium .pname{font-weight:800;font-size:13px;text-align:center}
.podium .pamt{font-weight:900;font-size:13px;color:var(--red)}
.podium .stand{width:100%;border-radius:12px 12px 0 0;display:grid;place-items:center;font-size:26px;font-weight:900;color:#03190e}
.podium.p1 .stand{height:96px;background:linear-gradient(180deg,var(--gold),var(--gold2))}
.podium.p2 .stand{height:74px;background:linear-gradient(180deg,#c9d2dd,#9aa6b5)}
.podium.p3 .stand{height:58px;background:linear-gradient(180deg,#e0a468,#b9783f)}
.crown{font-size:26px;line-height:1}

/* ---------- BANK ---------- */
.bank-card{text-align:center}
.qr-wrap{background:#fff;border-radius:18px;padding:14px;display:inline-block;margin:6px auto 12px}
.qr-wrap img{display:block;width:220px;height:220px;max-width:60vw;max-height:60vw}
.bank-line{font-size:14px;margin:4px 0}
.bank-line b{color:var(--gold)}
.bank-note{font-size:12px;color:var(--muted);margin-top:10px}

/* ---------- BUTTONS / NAV ---------- */
.btn{
  appearance:none;border:0;cursor:pointer;font-weight:800;
  background:linear-gradient(135deg,var(--green),var(--green2));color:#03190e;
  padding:10px 14px;border-radius:12px;font-size:13px;
}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--txt)}
.btn.sm{padding:6px 10px;font-size:12px;border-radius:10px}

.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;justify-content:space-around;
  background:rgba(4,16,9,.93);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);padding:8px 4px calc(8px + env(safe-area-inset-bottom));
}
.nav-btn{
  background:none;border:0;color:var(--muted);font-weight:700;
  font-size:10px;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:4px 4px;cursor:pointer;flex:1;
}
.nav-btn .ic{font-size:20px;line-height:1}
.nav-btn.active{color:var(--green2)}
.nav-btn.active .ic{filter:drop-shadow(0 0 8px rgba(22,198,106,.8))}

/* ---------- ADMIN ---------- */
.admin-bar{
  position:sticky;top:0;z-index:40;background:rgba(7,24,14,.97);
  border:1px solid var(--gold);border-radius:14px;padding:10px;margin:8px 0;
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
}
.admin-bar .t{font-weight:900;color:var(--gold);font-size:13px}
.admin-bar small{color:var(--muted);font-size:11px;flex:1}
.adm-grid{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;margin:4px 0}
.adm-grid label{font-size:13px}
select,input[type=number],input[type=text]{
  background:var(--bg2);color:var(--txt);border:1px solid var(--line);
  border-radius:10px;padding:7px 9px;font-size:13px;font-family:inherit;
}
.chip-toggle{cursor:pointer;user-select:none}
.hint{font-size:11px;color:var(--muted);margin:4px 2px 0}
hr.sep{border:0;border-top:1px solid var(--line);margin:14px 0}
.footer-note{text-align:center;color:var(--muted);font-size:11px;padding:18px 10px 4px;line-height:1.6}

/* ---------- LOCK BUTTON + LOGIN MODAL ---------- */
.lock-btn{
  position:fixed;top:10px;right:10px;z-index:60;
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:rgba(7,24,14,.7);color:var(--gold);font-size:15px;cursor:pointer;
  display:grid;place-items:center;backdrop-filter:blur(6px);
}
.modal-back{
  position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.66);
  display:grid;place-items:center;padding:20px;backdrop-filter:blur(3px);
  animation:fade .2s ease;
}
.modal-box{
  width:100%;max-width:340px;background:linear-gradient(160deg,var(--card2),var(--card));
  border:1px solid var(--gold);border-radius:18px;padding:18px;box-shadow:var(--shadow);
}
.modal-t{font-weight:900;font-size:16px;color:var(--gold);margin-bottom:14px;text-align:center}
.modal-box input{width:100%;margin-bottom:10px}
.li-err{color:var(--red);font-size:12px;font-weight:700;min-height:16px;text-align:center}