:root{
  --sunset-top:#FF9A3C; --sunset-mid:#EA4E77; --sunset-bottom:#3B2566;
  --gold:#D4AF37; --silver:#9AA0A6; --bronze:#C0813F;
  --pill:#FFD98A; --pill-text:#3a2a10; --spotify:#1DB954;
  --ink:#16284F;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Segoe UI',system-ui,-apple-system,sans-serif;-webkit-text-size-adjust:100%}

/* ============ PUBLIC / TV VIEW ============ */
.tv-body{background:#15121f;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.2vmin}
.screen{width:100%;max-width:1900px;background:linear-gradient(160deg,var(--sunset-top) 0%,var(--sunset-mid) 48%,var(--sunset-bottom) 100%);
  border-radius:14px;overflow:hidden;position:relative;box-shadow:0 0 0 10px #15121f}
.banner{display:flex;align-items:flex-end;justify-content:space-between;padding:2.4vmin 3vmin 1.4vmin;position:relative}
.sun{position:absolute;right:24vmin;top:-7vmin;width:18vmin;height:18vmin;border-radius:50%;background:rgba(255,221,120,.45)}
.title{font-size:clamp(28px,5.2vmin,74px);font-weight:700;color:#fff;letter-spacing:.5px;line-height:1;position:relative}
.subtitle{font-size:clamp(13px,1.9vmin,26px);color:rgba(255,255,255,.85);margin-top:.6vmin;position:relative}
.champ{background:rgba(20,16,30,.5);border-radius:12px;padding:1.2vmin 1.8vmin;text-align:right;position:relative}
.champ .lbl{font-size:clamp(11px,1.3vmin,18px);color:rgba(255,255,255,.7)}
.champ .val{font-size:clamp(15px,2.2vmin,30px);font-weight:700;color:var(--pill)}

.sg-table{width:100%;border-collapse:collapse;table-layout:fixed;padding:0 2vmin}
.sg-wrap{padding:0 2vmin}
.sg-table th{font-size:clamp(11px,1.5vmin,20px);color:rgba(255,255,255,.85);text-align:center;padding:.6vmin .3vmin;font-weight:600}
.sg-table th.team-col,.sg-table td.team-col{text-align:left;padding-left:1vmin}
.game-pill{display:inline-block;font-size:clamp(10px,1.3vmin,17px);font-weight:600;color:var(--pill-text);background:var(--pill);border-radius:30px;padding:.4vmin 1vmin;line-height:1.2}
.lock-pill{display:inline-block;font-size:clamp(10px,1.3vmin,17px);color:rgba(255,255,255,.6);border:1px dashed rgba(255,255,255,.4);border-radius:30px;padding:.4vmin 1vmin}
.sg-table td{font-size:clamp(13px,2vmin,28px);color:#fff;text-align:center;padding:1vmin .3vmin;border-bottom:1px solid rgba(255,255,255,.1)}
.sg-table tr:last-child td{border-bottom:none}
.row-1{background:rgba(255,255,255,.16)} .row-2{background:rgba(255,255,255,.1)} .row-3{background:rgba(255,255,255,.06)}
.dot{display:inline-block;width:1.4vmin;height:1.4vmin;min-width:9px;min-height:9px;border-radius:50%;margin-right:1vmin;vertical-align:middle}
.rank-num{font-size:clamp(14px,2.1vmin,30px);color:rgba(255,255,255,.7)}
.medal{display:inline-flex;align-items:center;justify-content:center;width:3vmin;height:3vmin;min-width:22px;min-height:22px;
  border-radius:50%;color:#fff;font-weight:700;font-size:clamp(12px,1.7vmin,22px)}
.medal.gold{background:var(--gold)} .medal.silver{background:var(--silver)} .medal.bronze{background:var(--bronze)}
.team-name{font-weight:600}
.bonus-pos{color:#9FE1CB}
.total-cell{font-weight:700;font-size:clamp(15px,2.4vmin,34px)}
.total-leader{color:var(--pill)}

.spotify-bar{margin:1.4vmin 2vmin 2vmin;background:rgba(20,16,30,.5);border-radius:12px;padding:1.3vmin 1.8vmin;display:flex;align-items:center;gap:1.6vmin}
.spotify-bar .sp-ico{color:var(--spotify);font-size:clamp(18px,2.6vmin,34px)}
.sp-art{width:clamp(30px,4vmin,56px);height:clamp(30px,4vmin,56px);border-radius:6px;background:#5DCAA5;flex:none;background-size:cover;background-position:center}
.sp-title{font-size:clamp(13px,1.9vmin,26px);color:#fff;font-weight:600}
.sp-next{font-size:clamp(11px,1.5vmin,20px);color:rgba(255,255,255,.7);margin-top:.2vmin}
.eq{margin-left:auto;display:flex;align-items:flex-end;height:18px;gap:2px}
.eq span{display:inline-block;width:3px;background:var(--spotify);border-radius:2px;animation:eq .9s ease-in-out infinite}
.eq span:nth-child(2){animation-delay:.2s}.eq span:nth-child(3){animation-delay:.4s}.eq span:nth-child(4){animation-delay:.15s}
@keyframes eq{0%,100%{height:4px}50%{height:16px}}
.empty-state{color:#fff;text-align:center;padding:8vmin 2vmin;font-size:clamp(16px,2.4vmin,30px);opacity:.85}

/* ============ ADMIN (iPad) & HISTORY ============ */
.admin-body{background:#f4f1ea;color:var(--ink);min-height:100vh;padding:18px}
.wrap{max-width:860px;margin:0 auto}
.a-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.a-head h1{font-size:24px;margin:0;font-weight:700}
.a-head .nav a{color:var(--ink);text-decoration:none;font-size:15px;margin-left:14px;opacity:.7}
.card{background:#fff;border:1px solid #e4dfd3;border-radius:16px;padding:20px;margin-bottom:18px}
.card h2{font-size:19px;margin:0 0 14px;font-weight:700}
label{display:block;font-size:14px;font-weight:600;margin:0 0 6px;color:#4a5568}
input[type=text],input[type=number],select{width:100%;font-size:18px;padding:13px 14px;border:1px solid #cfc8b8;border-radius:11px;background:#fff;color:var(--ink);-webkit-appearance:none}
input:focus,select:focus{outline:none;border-color:#EA4E77;box-shadow:0 0 0 3px rgba(234,78,119,.18)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:18px;font-weight:700;padding:15px 22px;border-radius:13px;border:none;cursor:pointer;width:100%;text-decoration:none;text-align:center}
.btn-primary{background:linear-gradient(135deg,#FF9A3C,#EA4E77);color:#fff}
.btn-secondary{background:#fff;border:1px solid #cfc8b8;color:var(--ink)}
.btn-ghost{background:transparent;color:#EA4E77;width:auto;padding:8px 4px;font-size:15px}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-sm{width:auto;font-size:15px;padding:9px 14px}
.row{display:flex;gap:10px;align-items:center}
.row > *{flex:1}
.row .shrink{flex:0 0 auto}
.muted{color:#7a8290;font-size:14px}
.team-block{border:1px solid #e4dfd3;border-radius:13px;padding:14px;margin-bottom:12px;background:#fbfaf6}
.player-chip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #e0dac9;border-radius:30px;padding:6px 12px;font-size:14px;margin:4px 4px 0 0}
.game-row{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.pos-list{display:flex;flex-direction:column;gap:10px}
.pos-item{display:flex;align-items:center;gap:12px;background:#fbfaf6;border:1px solid #e4dfd3;border-radius:13px;padding:12px 14px}
.pos-item .pdot{width:14px;height:14px;border-radius:50%;flex:none}
.pos-item .pname{font-size:18px;font-weight:600;flex:1}
.pos-item input,.pos-item select{width:120px;flex:none}
.bigtag{display:inline-block;font-size:13px;font-weight:700;padding:5px 12px;border-radius:20px;background:#FFE7C4;color:#8a5a14;text-transform:uppercase;letter-spacing:.5px}
.flash{background:#e7f7ee;border:1px solid #b6e3c9;color:#1c6b40;padding:12px 14px;border-radius:11px;margin-bottom:16px}
.errors{background:#fdecec;border:1px solid #f3b9b9;color:#9b2c2c;padding:12px 14px;border-radius:11px;margin-bottom:16px;font-size:14px}

/* modal (add player) */
.modal-bg{position:absolute;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:50}
.modal{background:#fff;border-radius:16px;padding:22px;width:min(92vw,420px)}
.modal h3{margin:0 0 14px;font-size:18px}

/* history standings reuse the sunset screen but in a page */
.history-list a{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border:1px solid #e4dfd3;border-radius:13px;margin-bottom:10px;text-decoration:none;color:var(--ink);background:#fff;font-size:17px;font-weight:600}
.clickable-team{cursor:pointer;text-decoration:underline dotted rgba(255,255,255,.5)}