/* style.css — responsive upgrade tuned for iPhone and desktop */

.admin-editor,
.admin-player{
  border:1px solid rgba(39,49,75,.8);
  border-radius:12px;
  padding:12px;
  background:rgba(9,11,18,.45);
  margin-bottom:10px;
}

.admin-grid{
  display:grid;
  grid-template-columns:minmax(150px,1fr) minmax(150px,1fr) 90px 100px;
  gap:10px;
  align-items:end;
}

.active-check{
  min-height:44px;
  display:flex;
  gap:8px;
  align-items:center;
  color:var(--text);
}

.active-check input{
  width:20px;
  min-height:20px;
}

@media (max-width:720px){
  .admin-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:480px){
  .admin-grid{ grid-template-columns:1fr; }
}

:root{
  --bg: #0b0d12;
  --card: #121622;
  --card2: #0f1320;
  --text: #e9edf5;
  --muted: #a8b3c7;
  --line: #27314b;
  --good: #2be4a7;
  --bad: #ff4d6d;
  --warn: #ffd166;
  --primary: #7c5cff;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 16px;

  /* tap-friendly sizing */
  --tap: 44px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background:
    radial-gradient(1200px 800px at 10% 0%, rgba(124,92,255,.16), transparent 55%),
    radial-gradient(900px 700px at 90% 20%, rgba(43,228,167,.10), transparent 55%),
    var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px;
}

.top{
  position: sticky;
  top: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: linear-gradient(to bottom, rgba(11,13,18,.78), rgba(11,13,18,.30));
  border-bottom: 1px solid rgba(39,49,75,.55);
  z-index: 10;
}

/* iPhone safe areas */
@supports (padding: max(0px)){
  .top .wrap{
    padding-top: max(12px, env(safe-area-inset-top));
  }
  body{
    padding-bottom: env(safe-area-inset-bottom);
  }
}

.top .wrap{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
}

.brand{
  display:flex;
  gap: 14px;
  align-items:center;
  min-width: 0; /* allow text truncation */
}

.logo{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg, rgba(124,92,255,.9), rgba(43,228,167,.75));
  color:#0b0d12;
  font-weight: 900;
  letter-spacing: .5px;
  box-shadow: var(--shadow);
  flex: 0 0 auto;
}

.brandText{
  min-width: 0;
}

.brandText h1{
  font-size: 18px;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brandText p{
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
}

.statusCard{
  background: rgba(18,22,34,.7);
  border: 1px solid rgba(39,49,75,.65);
  border-radius: var(--radius);
  padding: 12px 14px;
  min-width: 260px;
  flex: 0 0 auto;
}

.statusRow{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
}
.statusLabel{
  color: var(--muted);
  font-size: 12px;
}
.statusValue{
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.main{
  padding-top: 16px;
}

.card{
  background: linear-gradient(180deg, rgba(18,22,34,.92), rgba(15,19,32,.92));
  border: 1px solid rgba(39,49,75,.65);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
}

.cardHeader{
  display:flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.cardHeader h2{
  margin:0;
  font-size: 16px;
}

.hint{
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  max-width: 520px;
  text-align: right;
}

.formRow{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:flex-end;
}

.field{
  display:flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 220px;
  min-width: 180px;
}

label{
  font-size: 12px;
  color: var(--muted);
}

input, select{
  background: rgba(9,11,18,.65);
  border: 1px solid rgba(39,49,75,.8);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
  min-height: var(--tap);
  font-size: 16px; /* IMPORTANT: prevents iOS zoom-on-focus */
  width: 100%;
}

select{
  min-width: 110px;
}

#playerSelect{
  min-height:56px;
  font-size:18px;
  font-weight:750;
  padding:12px 44px 12px 14px;
}

input:focus, select:focus{
  border-color: rgba(124,92,255,.9);
  box-shadow: 0 0 0 4px rgba(124,92,255,.20);
}

.btn{
  border: 1px solid rgba(39,49,75,.9);
  background: rgba(9,11,18,.55);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 900;
  min-height: var(--tap);
  line-height: 1;
  transition: transform .05s ease, opacity .15s ease, background .15s ease;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn:active{ transform: translateY(1px); }

.btn:disabled{
  opacity: .45;
  cursor: not-allowed;
}

.btn.primary{
  background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(124,92,255,.55));
  border-color: rgba(124,92,255,.95);
}
.btn.ghost{ background: transparent; }

.btn.danger{
  background: linear-gradient(135deg, rgba(255,77,109,.95), rgba(255,77,109,.55));
  border-color: rgba(255,77,109,.95);
  color: #0b0d12;
}

/* Tiny buttons still tap-friendly on mobile */
.btn.tiny{
  padding: 10px 12px;
  border-radius: 11px;
  font-size: 13px;
  min-height: var(--tap);
}

.notice{
  display:none;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(39,49,75,.8);
  background: rgba(9,11,18,.55);
  font-size: 13px;
}

.notice[data-type="error"]{
  border-color: rgba(255,77,109,.75);
  box-shadow: 0 0 0 4px rgba(255,77,109,.16);
}
.notice[data-type="ok"]{
  border-color: rgba(43,228,167,.65);
  box-shadow: 0 0 0 4px rgba(43,228,167,.14);
}

.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}

.actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.tableWrap{
  overflow:auto;
  border-radius: 12px;
  border: 1px solid rgba(39,49,75,.65);
  -webkit-overflow-scrolling: touch;
}

.table{
  width:100%;
  border-collapse: collapse;
  min-width: 520px; /* desktop */
}

.table th, .table td{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(39,49,75,.45);
  font-size: 13px;
  white-space: nowrap;
}

.table thead th{
  position: sticky;
  top: 0;
  background: rgba(18,22,34,.98);
  z-index: 1;
  text-align: left;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .2px;
}

.table td.right, .table th.right{ text-align: right; }

tr.dead{ opacity: .55; }
tr.dead td{ color: rgba(233,237,245,.75); }

.matches{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.matchCard{
  border: 1px solid rgba(39,49,75,.65);
  background: rgba(9,11,18,.35);
  border-radius: 14px;
  padding: 12px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}

.matchTop{
  display:flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.matchTitle{
  font-weight: 950;
  letter-spacing: .2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.matchMeta{
  color: var(--muted);
  font-size: 12px;
}

.matchActions{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items:center;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  border: 1px solid rgba(39,49,75,.8);
  background: rgba(9,11,18,.55);
  min-height: var(--tap);
}

.badge.ok{
  border-color: rgba(43,228,167,.6);
}

.empty{
  color: var(--muted);
  font-size: 13px;
  padding: 10px 2px;
}

.footerCard{
  margin-top: 14px;
  opacity: .95;
}

.footerRow{
  display:flex;
  gap: 12px;
  align-items:center;
}

.pill{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(39,49,75,.7);
  background: rgba(9,11,18,.45);
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  min-height: var(--tap);
  display:inline-flex;
  align-items:center;
}

.footerText{
  font-size: 13px;
  color: rgba(233,237,245,.85);
  line-height: 1.35;
}

/* -----------------------------
   Mobile-first overrides
   iPhone 13 Pro: 390px wide
-------------------------------- */
@media (max-width: 520px){
  .wrap{
    padding: 14px;
  }

  .top .wrap{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .statusCard{
    min-width: 0;
    width: 100%;
  }

  .brandText h1{
    font-size: 16px;
  }
  .brandText p{
    font-size: 12px;
  }

  .card{
    padding: 12px;
  }

  .cardHeader{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .hint{
    text-align: left;
    max-width: 100%;
  }

  .actions{
    justify-content: flex-start;
  }

  .formRow{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .field{
    min-width: 0;
    flex: 1 1 auto;
  }

  .btn{
    width: 100%;
  }

  /* Keep Start/Next side-by-side only if there's room */
  .actions .btn{
    width: auto;
  }

  .grid{
    grid-template-columns: 1fr;
  }

  /* Tables on iPhone: allow horizontal scroll, reduce min width */
  .table{
    min-width: 620px; /* forces scroll, avoids squishing columns to unreadable */
  }

  .matchCard{
    flex-direction: column;
    align-items: stretch;
  }

  .matchActions{
    justify-content: stretch;
  }

  .matchActions .btn,
  .matchActions .badge{
    width: 100%;
    justify-content: center;
  }

  .footerRow{
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Super-tight screens (old iPhones / small webviews) */
@media (max-width: 380px){
  .logo{
    width: 42px;
    height: 42px;
    border-radius: 13px;
  }
  .brandText h1{ font-size: 15px; }
  .statusCard{ padding: 10px 12px; }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce){
  .btn{ transition: none; }
}

/* ===== MOBILE FIXES (iPhone first) ===== */
@media (max-width: 768px) {

  body {
    font-size: 16px;
    background: #0b0f1a;
  }

  .container,
  .app,
  .main {
    padding: 12px;
    max-width: 100%;
  }

  /* Kill side-by-side layouts */
  .grid,
  .row,
  .layout {
    display: block !important;
  }

  /* Cards */
  .card {
    margin-bottom: 16px;
    padding: 16px;
    border-radius: 14px;
    background: #12182a;
  }

  /* Headings */
  h1, h2, h3 {
    font-size: 20px;
    color: #ffffff;
  }

  label {
    font-size: 14px;
    color: #cfd6ff;
  }

  /* Inputs */
  input, select {
    font-size: 16px;
    padding: 14px;
    border-radius: 12px;
  }

  /* Buttons = big + obvious */
  button {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
    border-radius: 14px;
    margin-top: 10px;
  }

  .btn-primary {
    background: linear-gradient(135deg, #7b6cff, #5a4bff);
    color: #fff;
  }

  /* Players list – NO TABLES */
  table {
    display: none;
  }

  .player-card {
    background: #1a2140;
    padding: 14px;
    border-radius: 12px;
    margin-bottom: 10px;
  }

  .player-card strong {
    font-size: 16px;
    color: #fff;
  }

  .player-meta {
    font-size: 14px;
    opacity: 0.85;
    margin-top: 6px;
  }

  /* Matches */
  .match {
    padding: 14px;
    border-radius: 12px;
    background: #161d33;
    margin-bottom: 12px;
  }
}


/* ===== ChipTracker 2026 add-ons ===== */
.hidden{ display:none !important; }
/* make "Next Round blocked" go red */
.btn-danger{
  background: linear-gradient(135deg, #ff4d6d, #ff2d55) !important;
  color: #0b0f1a !important;
  border-color: rgba(255,77,109,.95) !important;
}
.notice{ display:none; } /* ensure hidden by default; JS toggles */


/* ===== ChipTracker 2026 winner/loser styling ===== */
.btn-win{
  background: linear-gradient(135deg, rgba(25,195,125,0.95), rgba(79,209,197,0.95)) !important;
  color: #07110c !important;
  border-color: rgba(25,195,125,0.95) !important;
}
.btn-lose{
  background: linear-gradient(135deg, rgba(229,72,77,0.95), rgba(255,77,109,0.95)) !important;
  color: #140507 !important;
  border-color: rgba(229,72,77,0.95) !important;
}

/* ===== Pool-ball button theme ===== */
button[class*="pool-ball-"]{
  --ball-color:#f4c430;
  --ball-dark:#9c7000;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:3px solid rgba(255,255,255,.88) !important;
  border-radius:999px !important;
  min-height:54px;
  padding:13px 22px !important;
  color:#101522 !important;
  font-weight:900 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.7);
  background:
    radial-gradient(circle at 30% 16%, rgba(255,255,255,.92) 0 3%, rgba(255,255,255,.28) 9%, transparent 23%),
    linear-gradient(145deg,var(--ball-color),var(--ball-dark)) !important;
  box-shadow:
    inset -8px -10px 16px rgba(0,0,0,.34),
    inset 6px 7px 12px rgba(255,255,255,.18),
    0 5px 12px rgba(0,0,0,.35) !important;
}

button[class*="pool-ball-"]::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:8px;
  bottom:8px;
  left:13%;
  right:13%;
  border-radius:999px;
  background:linear-gradient(180deg,#fff,#e9edf4);
  border:1px solid rgba(0,0,0,.22);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.15);
}

button[class*="pool-ball-"]:active{
  transform:translateY(2px) scale(.99);
  box-shadow:inset -5px -7px 12px rgba(0,0,0,.35),0 2px 5px rgba(0,0,0,.3) !important;
}

button[class*="pool-ball-"]:disabled{
  filter:grayscale(.85);
  opacity:.48;
}

.pool-ball-1{--ball-color:#f5cf24;--ball-dark:#b68000}
.pool-ball-2{--ball-color:#1675d1;--ball-dark:#083a86}
.pool-ball-3{--ball-color:#e33b35;--ball-dark:#8f1518}
.pool-ball-4{--ball-color:#7b3dbb;--ball-dark:#421a73}
.pool-ball-5{--ball-color:#f28a24;--ball-dark:#a94b00}
.pool-ball-6{--ball-color:#2c9b58;--ball-dark:#126235}
.pool-ball-7{--ball-color:#8f2637;--ball-dark:#4c0f1c}
.pool-ball-8{--ball-color:#252a32;--ball-dark:#050608}
.pool-ball-9{--ball-color:#f5cf24;--ball-dark:#b68000}
.pool-ball-10{--ball-color:#1675d1;--ball-dark:#083a86}
.pool-ball-11{--ball-color:#e33b35;--ball-dark:#8f1518}
.pool-ball-12{--ball-color:#7b3dbb;--ball-dark:#421a73}
.pool-ball-13{--ball-color:#f28a24;--ball-dark:#a94b00}
.pool-ball-14{--ball-color:#2c9b58;--ball-dark:#126235}
.pool-ball-15{--ball-color:#8f2637;--ball-dark:#4c0f1c}

@media (max-width:480px){
  button[class*="pool-ball-"]{min-height:56px;padding-left:18px !important;padding-right:18px !important}
  button[class*="pool-ball-"]::before{left:10%;right:10%}
}

/* Match results: winner is always the green 6-ball; loser is always the red 3-ball. */
button.btn-win[class*="pool-ball-"]{
  --ball-color:#2c9b58;
  --ball-dark:#126235;
}

button.btn-lose[class*="pool-ball-"]{
  --ball-color:#e33b35;
  --ball-dark:#8f1518;
}

/* Read-only viewers cannot click results, but completed result colors must remain visible. */
button.btn-win[class*="pool-ball-"]:disabled,
button.btn-lose[class*="pool-ball-"]:disabled{
  filter:none;
  opacity:1;
  cursor:default;
}


/* Layout classes extracted from index.html */
.layout-1{display:flex; gap:12px; align-items:center;}
.layout-2{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#7b6cff,#4fd1c5);display:flex;align-items:center;justify-content:center;font-weight:900;color:#0b0f1a;}
.layout-3{margin:0;}
.layout-4{margin-top:12px;}
.layout-5{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.layout-6{opacity:.75; font-size:13px;}
.layout-7{font-weight:800;}
.layout-8{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;}
.layout-9{width:auto; flex:1; min-width:140px;}
.layout-10{margin-top:8px;}
.layout-11{margin-top:0;}
.layout-12{margin-bottom:10px;}
.layout-13{display:flex; gap:10px; flex-wrap:wrap;}
.layout-14{flex:1; min-width:220px;}
.layout-15{margin-top:6px;}
.layout-16{width:160px; min-width:160px;}
.layout-17{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px;}
.layout-18{width:auto; flex:1; min-width:160px;}
.layout-19{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;}
.layout-20{width:auto;}
.layout-21{margin-top:12px; overflow:auto;}
.layout-22{width:100%; border-collapse:separate; border-spacing:0 8px;}
.layout-23{text-align:left; opacity:.75; font-size:13px;}
.layout-24{padding:8px 10px;}
.layout-25{padding:8px 10px; width:70px;}
.layout-26{padding:8px 10px; width:80px;}
.layout-27{padding:8px 10px; width:110px;}
.layout-28{display:flex;justify-content:space-between;gap:10px;align-items:center;}
.layout-29{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.layout-30{display:flex;gap:10px;flex-wrap:wrap;}
.layout-31{flex:1;min-width:180px;}
.layout-32{margin-top:10px;width:100%;}
.layout-33{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.layout-34{margin-top:8px;display:block;}
.layout-35{padding:10px; border-top-left-radius:12px; border-bottom-left-radius:12px; font-weight:800;}
.layout-36{padding:10px;}
.layout-37{padding:10px; border-top-right-radius:12px; border-bottom-right-radius:12px;}
.layout-38{opacity:.8;}
.layout-39{margin-top:10px; opacity:.9;}
.layout-40{opacity:.7;}
.layout-41{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.layout-42{font-weight:900;}
.layout-43{margin-top:10px; font-weight:800;}
.layout-44{opacity:.75; font-size:13px; margin-top:6px;}
.layout-45{display:flex;gap:8px;margin-top:8px;}
.layout-46{width:100%;}
.layout-47{width:100%;text-align:left;margin-bottom:6px;}