:root{--bg:#050a0d;--card:#0d151a;--line:#29343a;--text:#f5f7f8;--muted:#9ba5ab;--green:#78ed32;--red:#ff3939;--gold:#ffc928}
*{box-sizing:border-box}html{background:#050a0d}body{margin:0;background:radial-gradient(circle at 50% 0,#102018 0,#071015 35%,#050a0d 75%);color:var(--text);font-family:Arial,Helvetica,sans-serif}
a{color:inherit;text-decoration:none}.topbar{height:74px;padding:0 max(20px,4vw);display:flex;align-items:center;justify-content:space-between;background:#030505;border-bottom:1px solid #17221b;position:sticky;top:0;z-index:20}
.brand{font-weight:900;font-size:23px;line-height:1}.brand b{display:block;color:var(--green);font-size:13px;margin:5px 0 0 31px}.topbar nav{display:flex;gap:34px}.topbar nav a{font-weight:800;font-size:13px}.topbar nav a:hover{color:var(--green)}
.hero{height:360px;background-image:linear-gradient(rgba(0,0,0,.08),rgba(0,0,0,.28)),url('/static/snooker_banner.jpg');background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #26332c}
.hero:before{display:none}.hero-overlay{text-align:center;text-shadow:0 5px 16px #000}.crown{color:var(--gold);font-size:44px}.hero h1{font-size:78px;line-height:.95;margin:0;font-weight:1000;letter-spacing:-1px}.hero p{margin:14px 0 0;color:var(--green);font-size:28px;font-weight:900;letter-spacing:7px}
.container{max-width:1280px;margin:0 auto;padding:18px}.narrow{max-width:1050px}.datebar{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(145deg,#10181d,#0b1216);border:1px solid var(--line);border-radius:11px;padding:15px 22px;margin-bottom:15px}
button,.outline-btn,input[type=date]{background:#091014;color:var(--green);border:1px solid #5aa62e;border-radius:7px;padding:12px 18px;font-weight:800}.date-main{font-size:34px;font-weight:900;text-align:center}.date-sub{font-size:12px;letter-spacing:3px;color:#c0c6c9;text-align:center;margin-top:3px}
.grid{display:grid;gap:15px;margin-bottom:15px}.grid.two{grid-template-columns:1fr 1fr}.grid.three{grid-template-columns:1fr 1.25fr .8fr}.card{background:linear-gradient(145deg,#0f181d,#091115);border:1px solid var(--line);border-radius:11px;padding:20px;box-shadow:0 14px 36px rgba(0,0,0,.22)}.card h2{font-size:18px;margin:0 0 18px}
.result-head,.result-row{display:grid;grid-template-columns:1.6fr .7fr .9fr;gap:10px;align-items:center}.result-head{font-size:11px;color:#b9c1c5;padding-bottom:9px;border-bottom:1px solid #2a343a}.result-row{padding:15px 0;border-bottom:1px solid #283239}.player{font-size:18px;font-weight:700}.pos{color:var(--green)!important}.neg{color:var(--red)!important}
.balance{display:grid;grid-template-columns:1fr auto auto;gap:20px;align-items:center;padding-top:14px}.badge{border-radius:5px;padding:7px 12px;font-size:12px}.okbg{border:1px solid #4c8f2d;color:var(--green)}.badbg{border:1px solid #8c2d2d;color:var(--red)}
.rank-row{display:grid;grid-template-columns:35px 1fr .8fr .8fr;gap:8px;padding:13px 0;border-bottom:1px solid #293239;align-items:center}.rank{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:1px solid #435159}.history-row{display:flex;justify-content:space-between;padding:15px 0;border-bottom:1px solid #293239}.history-row:hover{color:var(--green)}.outline-btn{display:block;text-align:center;margin-top:18px}
footer{border-top:1px solid #1c272d;margin-top:18px;padding:24px 4%;color:#7f8a90;font-size:12px;display:flex;justify-content:space-between}.flash-wrap{max-width:900px;margin:10px auto}.flash{background:#17241a;border:1px solid #3f6f38;color:#baf6a8;padding:12px;border-radius:7px}
.loginbox{max-width:480px;padding-top:80px;min-height:70vh}.form-card{display:flex;flex-direction:column;gap:15px}.form-card input{background:#070d10;border:1px solid #35424b;color:white;border-radius:6px;padding:14px;font-size:16px}.form-card button{cursor:pointer}.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;align-items:center}.admin-note{color:var(--muted);font-size:13px}.admin-title{display:flex;justify-content:space-between;align-items:center}.admin-title a{color:var(--green)}
.history-table{overflow:auto}.history-table-row{display:grid;grid-template-columns:130px repeat(5,1fr);min-width:760px;border-bottom:1px solid #283139;padding:13px 10px}.history-table-head{font-size:12px;color:#aab4ba;font-weight:700}
canvas{max-height:320px}
@media(max-width:900px){
 .topbar{height:82px;padding:0 16px}.brand{font-size:18px}.brand b{font-size:11px;margin-left:27px}.topbar nav{gap:20px}.topbar nav a{font-size:11px}
 .hero{height:330px;background-position:center}.hero h1{font-size:60px}.hero p{font-size:22px}
 .grid.two{grid-template-columns:1fr 1fr}.grid.three{grid-template-columns:1fr 1fr}.grid.three .card:last-child{grid-column:1/-1}
}
@media(max-width:650px){
 .topbar{position:relative;height:88px}.brand{font-size:17px}.brand b{font-size:10px}.topbar nav{gap:13px}.topbar nav a{font-size:10px}
 .hero{height:310px;background-position:center top}.crown{font-size:34px}.hero h1{font-size:52px}.hero p{font-size:20px;letter-spacing:5px}
 .container{padding:10px}.datebar{padding:13px 12px;gap:8px}.datebar button{font-size:11px;padding:11px 10px}.datebar input{width:132px;padding:10px 7px}.date-main{font-size:24px}
 .grid.two,.grid.three{grid-template-columns:1fr}.grid.three .card:last-child{grid-column:auto}.card{padding:16px}.card h2{font-size:17px}
 .result-head,.result-row{grid-template-columns:1.35fr .65fr .8fr}.player{font-size:16px}.rank-row{grid-template-columns:32px 1fr .75fr .75fr;font-size:13px}
 footer{flex-direction:column;gap:8px;text-align:center}.history-table-row{font-size:12px}
}
@media(max-width:430px){
 .topbar{padding:0 10px}.brand{font-size:15px}.brand b{font-size:9px;margin-left:23px}.topbar nav{gap:10px}.topbar nav a{font-size:9px}
 .hero{height:270px}.hero h1{font-size:45px}.hero p{font-size:17px}.datebar{flex-wrap:wrap}.datebar>div{order:-1;width:100%;margin-bottom:4px}.datebar button,.datebar input{width:48%}
}


/* ===== V2.1 MOBILE HERO FIX ===== */

/* The banner image already contains SNOOKER / GAME ON artwork.
   Hide the HTML overlay so mobile does not show duplicated text. */
.hero-overlay{
  display:none !important;
}

/* Keep the actual banner artwork readable without stretching it. */
.hero{
  background-image:url('/static/snooker_banner.jpg') !important;
  background-repeat:no-repeat !important;
  background-color:#050806 !important;
  background-position:center center !important;
  background-size:cover !important;
}

@media(max-width:650px){
  .hero{
    height:220px !important;
    background-position:center center !important;
    background-size:cover !important;
  }

  .topbar{
    height:78px !important;
    padding:0 12px !important;
  }

  .brand{
    font-size:16px !important;
  }

  .brand b{
    font-size:9px !important;
    margin-left:24px !important;
  }

  .topbar nav{
    gap:14px !important;
  }

  .topbar nav a{
    font-size:9px !important;
  }

  .datebar{
    margin-top:0 !important;
  }

  .grid.two,
  .grid.three{
    grid-template-columns:1fr !important;
  }

  .grid.three .card:last-child{
    grid-column:auto !important;
  }

  canvas{
    max-height:300px !important;
  }
}

@media(max-width:430px){
  .hero{
    height:205px !important;
    background-position:center center !important;
  }

  .topbar nav{
    gap:10px !important;
  }

  .date-main{
    font-size:23px !important;
  }
}


/* ===== V2.2 ADMIN + HISTORY MOBILE ===== */
@media(max-width:650px){
  .hero{height:190px !important;}
  .result-head,.result-row{grid-template-columns:1.45fr .65fr .65fr !important;}
  .result-head span:last-child{font-size:0;}
  .result-head span:last-child:after{content:"RM";font-size:11px;}
}
.eyebrow{font-size:10px;letter-spacing:2px;color:var(--green);font-weight:800;margin-bottom:6px}
.field-label{font-size:11px;color:#aab5ba;font-weight:800;letter-spacing:1px}
.date-input{width:100%;color:#fff !important}
.mobile-player-list{display:grid;gap:10px}
.player-input-card{display:grid;grid-template-columns:1fr 130px;align-items:center;gap:14px;background:#091115;border:1px solid #27343a;border-radius:9px;padding:13px 14px}
.player-input-card strong{display:block;font-size:17px}.player-input-card small{display:block;margin-top:5px;color:#87939a}
.player-input-card input{width:100%;font-size:22px !important;font-weight:900;text-align:center;padding:12px !important}
.balance-panel{display:flex;align-items:center;justify-content:space-between;border:1px solid #2b373d;background:#081014;border-radius:9px;padding:14px}
.balance-panel small{display:block;color:#929ea4;font-size:10px}.balance-panel strong{font-size:27px}.balance-state{font-weight:900;font-size:12px;border:1px solid;padding:9px 12px;border-radius:6px}.balanced{color:var(--green);border-color:#4c8f2d}.unbalanced{color:var(--red);border-color:#8c2d2d}
.save-big{font-size:15px;padding:15px !important}.save-big:disabled{opacity:.35;cursor:not-allowed}
.history-title{display:flex;align-items:center;justify-content:space-between}.mini-home{color:var(--green);font-size:12px;font-weight:900}
.history-cards{display:grid;gap:12px}.day-card{display:block;border:1px solid #2a363c;background:#091115;border-radius:10px;padding:15px}.day-card:hover{border-color:#5aa62e}
.day-card-date{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid #263139}.day-card-date strong{font-size:18px}.day-card-date span{font-size:10px;color:var(--green);font-weight:900}
.day-player-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding-top:13px}.day-player-grid small{display:block;color:#8f9aa0;font-size:9px;white-space:nowrap}.day-player-grid strong{display:block;margin-top:5px;font-size:16px}
.empty-history{padding:30px;text-align:center;color:#89949a}
@media(max-width:650px){
 .admin-mobile-wrap,.history-mobile-wrap{padding-top:18px}
 .admin-card{padding:16px}
 .player-input-card{grid-template-columns:1fr 110px}
 .day-player-grid{grid-template-columns:repeat(2,1fr)}
 .day-player-grid>div:last-child{grid-column:1/-1}
 .day-player-grid small{font-size:10px}.day-player-grid strong{font-size:18px}
}

/* ===== V2.3 TABLE COST ===== */
.table-fee-row{
  margin-top:14px;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
  background:rgba(255,255,255,.035);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.table-fee-row span{font-size:13px;font-weight:800;letter-spacing:.07em;color:#b9c2c8}
.table-fee-row strong{font-size:20px;color:#fff}
.history-table-mini{font-weight:800;color:#d9e1e5}
.table-entry-card{
  margin-top:14px;
  padding:16px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(61,213,124,.07),rgba(255,255,255,.025));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.table-entry-card>div:first-child{display:flex;flex-direction:column;gap:4px}
.table-entry-card strong{font-size:16px}
.table-entry-card small{font-size:10px;letter-spacing:.08em;color:#8f9ba1}
.table-money-input{
  display:flex;
  align-items:center;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:#0e1519;
  overflow:hidden;
}
.table-money-input span{padding:0 10px;color:#86e7aa;font-weight:800}
.table-money-input input{
  width:110px;
  margin:0;
  border:0!important;
  border-left:1px solid rgba(255,255,255,.1)!important;
  border-radius:0!important;
  background:transparent!important;
  text-align:right;
  font-size:18px!important;
  font-weight:800;
}
.history-table-label{display:block;margin-top:4px;color:#9fe3b8;font-size:11px;font-weight:800;letter-spacing:.03em}

@media(max-width:600px){
  .table-fee-row{padding:12px 14px}
  .table-fee-row strong{font-size:18px}
  .table-entry-card{padding:14px}
  .table-money-input input{width:88px}
  .history-table-mini{font-size:11px}
}

/* V2.4 Monthly Table Total */
.monthly-table-total { margin-top:18px; padding:16px; border:1px solid rgba(99,213,61,.28); border-radius:12px; background:rgba(99,213,61,.06); display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:center; }
.monthly-table-total span { font-weight:800; letter-spacing:.04em; }
.monthly-table-total strong { font-size:1.55rem; color:#63d53d; }
.monthly-table-total small { grid-column:1/-1; color:#8f9aa3; text-transform:uppercase; }
@media(max-width:700px){ .monthly-table-total { padding:14px; } .monthly-table-total strong { font-size:1.35rem; } }