/* ================= THEME VARIABLES (overridden by /api/theme.php) ================ */
:root{
  --bg:#0b1220;
  --text:#eaf2ff;
  --card:#0f1630;
  --border:#223359;
  --primary:#1e67ff;
  --accent:#58b5ff;

  /* input controls (dark theme defaults) */
  --input-bg:#0f1830;
  --input-fg:#eaf2ff;
  --input-border:#2a3550;
}

/* Off-white preset variable overrides (set via html[data-theme="offwhite"]) */
html[data-theme="offwhite"]{
  --text:#111111;
  --card:#ffffff;
  --border:#e5e7ef;
  --input-bg:#ffffff;
  --input-fg:#111111;
  --input-border:#cfd4e0;
}

/* ========== Base & Layout ========== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; min-height:100vh; display:grid; place-items:center;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--text);
  -webkit-tap-highlight-color:transparent;
}
.container{width:min(96vw,1100px); margin:0 auto; padding:16px}

/* ========== Header (Game) ========== */
.header{text-align:center; margin-bottom:10px; position:relative}
.logo{height:64px; width:auto; object-fit:contain; margin-bottom:8px}
h1{margin:4px 0 6px; font-size:clamp(1.2rem,1.6rem + 1vw,2rem)}
.subtitle{margin:0; opacity:.9}

/* Redeem code badge must be off-white in the modal (requested) */
html[data-theme="offwhite"] #redeemCode{
  background:#fff !important;
  border-color:#e5e7ef !important;
  color:#111 !important;
}

/* ===== Theme vars (compat shim) ===== */
:root{
  --font:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
body { background: var(--bg); font-family: var(--font); }

/* top language bar */
.lang-bar{ width:min(1100px,96vw); margin:12px auto 4px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.logo-sm{ height:36px; width:auto; object-fit:contain; }
.select.compact{ padding:8px 10px; border:1px solid var(--input-border); border-radius:10px; background:var(--input-bg); color:var(--input-fg); }

/* buttons inherit accent */
.btn, .name-form button, .play-again { background: var(--accent); color:#fff; }

/* label helper */
.label{ display:block; margin:4px 2px 4px; font-weight:600; opacity:.9; }

/* phone input combo */
.phone-wrap{ position:relative; display:flex; gap:8px; align-items:center; }

/* Country code button — now uses input variables so text is black in offwhite */
.cc-btn{
  display:flex; align-items:center; gap:6px; padding:10px 12px;
  background:var(--input-bg); color:var(--input-fg);
  border:1px solid var(--input-border); border-radius:10px; cursor:pointer;
  white-space:nowrap;
}
.cc-btn svg{ opacity:.8 }

/* Country dropdown */
.cc-menu{
  position:absolute; left:0; top:100%; margin-top:6px; background:var(--card); border:1px solid var(--border);
  border-radius:12px; width:360px; max-height:300px; overflow:auto; z-index:2000; box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.cc-search{ display:flex; gap:8px; align-items:center; padding:8px 10px; border-bottom:1px solid var(--border); }
.cc-search input{ flex:1; background:var(--input-bg); color:var(--input-fg); border:1px solid var(--input-border); border-radius:8px; padding:8px 10px; }
.cc-list{ list-style:none; margin:0; padding:0; }
.cc-item{ display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; padding:10px 12px; cursor:pointer; }
.cc-item:hover{ background:rgba(255,255,255,.06); }
.flag{ width:24px; height:16px; border-radius:2px; background:#777; display:inline-block; }

/* table sticky head (single) */
.table{ width:100%; border-collapse:separate; border-spacing:0; background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.table thead th{ position:sticky; top:60px; background:#121d3f; z-index:5; }
.table th, .table td{ padding:10px; border-bottom:1px solid var(--border); vertical-align:top; text-align:left; }
.table tr:hover{ background:#0e1a3b; }

/* admin kpi / cards keep using var(--card) */
.card{ background:var(--card); }

/* inputs use theme variables */
.input,.select,.textarea,
.name-form input,
#playerPhone{
  background:var(--input-bg); color:var(--input-fg);
  border:1px solid var(--input-border);
  border-radius:10px;
}

/* responsive tweak */
@media (max-width:900px){
  .table thead th{ position:static; }
}

/* front language bar (always available) */
.lang-bar{
  position:absolute; right:0; top:0; display:flex; gap:8px;
}
.lang-btn{
  padding:6px 10px; border:1px solid var(--border); border-radius:10px;
  background:var(--card); color:var(--text); cursor:pointer;
}

/* PHONE PICKER (stacked under name) */
.phone-picker{
  display:grid; grid-template-columns: 1fr; align-items: stretch; gap:8px; position:relative;
}
.cc-btn{ width:auto; }

/* Hide internal thead when using "with-custom-head" wrapper to avoid duplicate headers */
.with-custom-head table thead { display: none; }

/* ========== Game Area ========== */
.game-area{display:grid; place-items:center; gap:12px}
.name-form{
  display:flex; flex-wrap:wrap; gap:8px;
  justify-content:center; align-items:center; margin:10px 0 18px;
}
.name-form input{
  padding:10px 12px; min-width:260px; max-width:360px;
  outline:none;
}
.name-form input:focus{border-color:var(--accent); box-shadow:0 0 0 3px #58b5ff22}
.name-form button,.play-again,.btn{
  padding:10px 16px; border:0; border-radius:10px; cursor:pointer;
  background:var(--primary); color:#fff; font-weight:600;
  transition:transform .06s ease, filter .15s ease; text-decoration:none; display:inline-block;
}
.name-form button:active,.play-again:active,.btn:active{transform:translateY(1px)}
.name-form button:disabled,.play-again:disabled,.btn:disabled{filter:saturate(.4) brightness(.8); cursor:not-allowed}
.btn.alt{background:#2a3550; color:var(--text)}

/* ========== Fancy PHONE PICKER ========== */
.phone-picker{display:flex; align-items:center; gap:8px; position:relative}
.cc-flag{font-size:18px}
.cc-dial{font-family:monospace}
.cc-caret{opacity:.8}
.cc-panel{
  position:absolute; left:0; top:52px; width:320px; max-height:280px; overflow:auto; z-index:9999;
  background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.5);
}
.cc-panel.hidden{display:none}
.cc-search{padding:10px 12px; border:0; border-bottom:1px solid var(--border); width:100%; background:var(--input-bg); color:var(--input-fg)}
.cc-item{
  display:flex; align-items:center; justify-content:space-between; padding:10px 12px; cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.cc-item:hover{background:#0e1a3b}
.cc-left{display:flex; align-items:center; gap:10px}
.cc-name{white-space:nowrap}

/* ========== Scratch Card Wrapper ========== */
.scratch-card{
  width:min(92vw,480px); background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:14px 14px 18px; box-shadow:0 10px 30px #00000050, inset 0 1px 0 #ffffff10;
}
.instructions{margin:8px 0 6px; opacity:.9; text-align:center; font-size:.95rem}
#scratchCanvas{width:100%; height:auto; display:block; border-radius:12px}

/* ========== Grid (Game) ========== */
.symbols.grid-3x3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; width:100%; margin:10px auto 6px}
.cell{
  position:relative; aspect-ratio:1/1; border-radius:14px; overflow:hidden; display:grid; place-items:center;
  background:#0e1220; border:1px solid #273456;
  box-shadow:inset 0 0 0 1px #ffffff08, 0 2px 6px #00000060; user-select:none;
}
html[data-theme="offwhite"] .cell{
  background:#f7f7fb; border:1px solid #e5e7ef; box-shadow:inset 0 0 0 1px #ffffff, 0 2px 6px rgba(0,0,0,.06);
}
.cell:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.cell .label{opacity:0; transition:opacity .25s ease; padding:8px; text-align:center; font-weight:700; color:#b8ffe9; text-shadow:0 1px 0 #000; line-height:1.2}
html[data-theme="offwhite"] .cell .label{ color:#0f1630; text-shadow:none; }
.cover{position:absolute; inset:0; background:linear-gradient(180deg,#cfcfcf,#b6b6b6); box-shadow:inset 0 0 12px #00000033; transition:opacity .25s ease}
.cover .peel{position:absolute; right:10px; bottom:10px; width:34px; height:34px; border-radius:5px; background:#ececec; box-shadow:0 2px 4px rgba(0,0,0,.35); transform:rotate(-8deg)}
.cell.open .label{opacity:1}
.cell.open .cover{opacity:0; pointer-events:none}

/* ========== Result & Actions ========== */
.result-message{text-align:center; font-size:1.05rem; font-weight:700; margin-top:8px; min-height:1.5em}
.play-again{display:inline-block; margin:10px auto 0}

/* ========== Footer (Game) ========== */
.footer{text-align:center; opacity:.8; margin-top:10px}

/* ========== Utilities ========== */
.hidden{display:none !important}

/* Responsive tweaks */
@media (max-width:420px){
  .scratch-card{padding:12px}
  .symbols.grid-3x3{gap:10px}
  .name-form input{min-width:220px}
}
@media (pointer:coarse){.cover .peel{width:40px; height:40px; right:8px; bottom:8px}}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}

/* ====================================================================== */
/* ============================  ADMIN  ================================= */
/* ====================================================================== */
.admin-header{background:#101935; width:100%; position:sticky; top:0; z-index:1000; border-bottom:1px solid var(--border)}
.admin-bar{max-width:1200px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.admin-title{margin:0; font-size:1.1rem}
.admin-actions{display:flex; gap:8px}
.admin-main{width:min(1200px,96vw); margin:16px auto}
.card{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:12px}
.kpi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:8px}
.kpi-card{text-align:center}
.kpi-title{opacity:.85}
.kpi-value{font-size:1.6rem; font-weight:800}
.toolbar{display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; margin:10px 0 14px}
.input,.select,.textarea{width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--input-bg); color:var(--input-fg)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px #58b5ff22; outline:none}

/* TABLE with pinned header using duplicate head strip */
.table{width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden}
.table th,.table td{padding:10px; border-bottom:1px solid var(--border); vertical-align:top; text-align:left}
.table tr:hover{background:#0e1a3b}
.table-wrap{max-height:520px; overflow:auto}
.table-head{display:grid; gap:0; background:#121d3f; border-bottom:1px solid var(--border); position:sticky; top:60px; z-index:6; padding:10px; border-top-left-radius:12px; border-top-right-radius:12px}
.row-actions{display:flex; gap:8px; flex-wrap:wrap}
.badge{display:inline-block; padding:3px 8px; border-radius:999px; background:#2a3550; color:var(--text); font-size:.85rem}
.right{text-align:right}
.center{text-align:center}
.muted{opacity:.85}
@media (max-width:900px){.kpi-grid{grid-template-columns:1fr} .table-head{position:static; border-radius:12px 12px 0 0}}
@media (max-width:640px){.admin-bar{flex-wrap:wrap; gap:10px} .admin-actions{width:100%; justify-content:flex-end} .table{font-size:.95rem}}

/* ===== Modal ===== */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.6); display:grid; place-items:center; z-index:9999}
.modal.hidden{display:none !important}
.modal-dialog{width:min(92vw,420px); background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px; box-shadow:0 12px 40px rgba(0,0,0,.5); position:relative}
.modal-close{position:absolute; top:8px; right:8px; background:#2a3550; color:var(--text); border:0; border-radius:8px; padding:6px 10px; cursor:pointer}
.modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:10px}

/* ================= Mobile phone row: keep one line & LTR digits ================= */
.phone-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;          /* prevent line break */
}
#ccBtn{
  flex:0 0 auto;
  white-space:nowrap;
  max-width:45vw;
  background:var(--input-bg);
  color:var(--input-fg);      /* black in offwhite */
  border:1px solid var(--input-border);
}
#ccDial{
  direction:ltr;
  unicode-bidi:isolate;
}
#playerPhone{
  flex:1 1 auto;
  min-width:0;               /* allow shrinking instead of wrapping */
  width:100%;
  direction:ltr;             /* digits stay LTR in KU/AR too */
  unicode-bidi:plaintext;    /* isolate number direction from page dir */
  text-align:left;
  white-space:nowrap;
  hyphens:none;
}
html[dir="rtl"] #playerPhone{
  text-align:left;
  direction:ltr;
  unicode-bidi:plaintext;
}
#ccMenu{
  width:100%;
  max-width:360px;
}
@media (max-width:380px){
  #ccBtn{ padding:8px 10px; }
}

/* Autofill fix so inputs don’t look off in Chrome autofill */
input:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px var(--input-bg) inset !important;
  -webkit-text-fill-color:var(--input-fg) !important;
}