/* ============================================================
   Bara AlSalfa v2 — Shared Styles (Lobby + Game)
   ✅ One CSS for both pages
   ✅ Light/Dark theme + RTL/LTR + AR/EN friendly
   ✅ Premium "game UI" layout, mobile-first
============================================================ */

/* -----------------------
   Base + Theme Tokens
------------------------ */
:root{
  --font-ar: "Cairo", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-en: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --radius: 22px;
  --radius2: 16px;

  --shadow: 0 18px 45px rgba(0,0,0,.18);
  --shadow2: 0 10px 22px rgba(0,0,0,.12);

  --stroke: rgba(20,24,35,.12);
  --stroke2: rgba(20,24,35,.18);

  --blur: blur(12px);

  --ok: #28d17c;
  --warn: #ffb84d;
  --danger: #ff5a5a;

  --brand1: #ff5a2e;
  --brand2: #ffb24a;

  /* Light defaults */
  --bgA: #fff6ef;
  --bgB: #ffe3c7;
  --ink: #0f172a;
  --ink2: rgba(15,23,42,.74);

  --panel: rgba(255,255,255,.82);
  --panel2: rgba(255,255,255,.70);
  --chip: rgba(255,255,255,.66);

  --input: rgba(255,255,255,.92);
  --inputInk: #0f172a;

  --btnInk: #0f172a;

  --glow: rgba(255,90,46,.18);
  --glow2: rgba(255,178,74,.18);

  --focus: rgba(255,90,46,.35);
}

body.dark{
  --bgA: #0a1020;
  --bgB: #111a33;
  --ink: #e7ecff;
  --ink2: rgba(231,236,255,.78);

  --panel: rgba(16,23,42,.72);
  --panel2: rgba(16,23,42,.56);
  --chip: rgba(16,23,42,.55);

  --stroke: rgba(255,255,255,.12);
  --stroke2: rgba(255,255,255,.18);

  --input: rgba(12,18,38,.80);
  --inputInk: #e7ecff;

  --btnInk: #e7ecff;

  --glow: rgba(255,90,46,.18);
  --glow2: rgba(255,178,74,.14);

  --focus: rgba(255,178,74,.26);
}

/* -----------------------
   Global Reset
------------------------ */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--ink);
  background: radial-gradient(1200px 800px at 30% 20%, var(--bgB), var(--bgA));
  font-family: var(--font-ar);
  line-height:1.35;
  overflow-x:hidden;
}
body.ltr{ font-family: var(--font-en); }
a{ color:inherit; text-decoration:none; }
button, input, select{ font-family: inherit; }
:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 14px;
}

/* -----------------------
   Classic Sky Scene (background)
------------------------ */
.scene{
  position:fixed;
  inset:0;
  z-index:-2;
  overflow:hidden;
  pointer-events:none;
}
.sky{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 700px at 25% 15%, rgba(255,255,255,.70), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(140,200,255,.55), rgba(255,255,255,0) 55%),
    radial-gradient(900px 800px at 80% 0%, rgba(255,200,150,.35), rgba(255,255,255,0) 55%);
  filter: saturate(1.05);
  opacity:.95;
}
body.dark .sky{
  background:
    radial-gradient(900px 700px at 25% 15%, rgba(255,255,255,.08), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(40,70,140,.40), rgba(255,255,255,0) 55%),
    radial-gradient(900px 800px at 80% 0%, rgba(255,180,90,.12), rgba(255,255,255,0) 55%);
}

.sun{
  position:absolute;
  width:220px; height:220px;
  left:10%;
  top:6%;
  border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,210,120,.85), rgba(255,90,46,.25) 65%, rgba(255,90,46,0) 72%);
  filter: blur(.2px);
  opacity:.9;
}
body.dark .sun{ opacity:.35; }

.clouds, .clouds2{
  position:absolute;
  left:-20%;
  top:18%;
  width:140%;
  height:220px;
  background:
    radial-gradient(80px 30px at 20% 40%, rgba(255,255,255,.70), rgba(255,255,255,0) 70%),
    radial-gradient(120px 45px at 45% 35%, rgba(255,255,255,.60), rgba(255,255,255,0) 72%),
    radial-gradient(90px 35px at 70% 50%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%),
    radial-gradient(140px 50px at 88% 40%, rgba(255,255,255,.55), rgba(255,255,255,0) 72%);
  opacity:.55;
  filter: blur(0.3px);
  animation: drift 26s linear infinite;
}
.clouds2{
  top:26%;
  opacity:.35;
  animation-duration: 40s;
  transform: scale(1.05);
}
body.dark .clouds,
body.dark .clouds2{
  opacity:.18;
}
@keyframes drift{
  from{ transform: translateX(0); }
  to{ transform: translateX(10%); }
}

.ground{
  position:absolute; left:0; right:0; bottom:-40px; height:220px;
  background:
    radial-gradient(600px 240px at 20% 0%, rgba(255,180,90,.22), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(255,210,160,.25), rgba(255,255,255,0) 55%),
    radial-gradient(900px 340px at 70% 0%, rgba(255,90,46,.16), rgba(255,255,255,0) 75%);
  opacity:.9;
}
body.dark .ground{ opacity:.45; }

.vignette{
  position:absolute; inset:-1px;
  background: radial-gradient(1400px 900px at 50% 15%, rgba(255,255,255,0), rgba(0,0,0,.18));
  opacity:.55;
}
body.dark .vignette{ opacity:.85; }

/* -----------------------
   Nav
------------------------ */
.nav{
  position:sticky;
  top:0;
  z-index:10;
  padding: 14px 14px 0;
}
.nav-inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 14px;
  border-radius: 20px;
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  backdrop-filter: var(--blur);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}
.logo{
  width: 44px; height: 44px;
  display:grid;
  place-items:center;
  border-radius: 16px;
  font-weight: 900;
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.85), rgba(255,255,255,0) 40%),
    linear-gradient(135deg, var(--brand1), var(--brand2));
  color: #1a130c;
  box-shadow: 0 14px 30px rgba(255,90,46,.18);
}
.brand-text{ min-width:0; }
.brand-title{
  font-weight: 900;
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.brand-sub{
  font-size: 13px;
  color: var(--ink2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.nav-actions{ display:flex; gap:10px; }

/* -----------------------
   Chips
------------------------ */
.chip{
  border: 1px solid var(--stroke);
  background: var(--chip);
  color: var(--ink);
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 800;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  backdrop-filter: var(--blur);
}
.chip:hover{ transform: translateY(-1px); box-shadow: 0 14px 28px rgba(0,0,0,.10); }
.chip:active{ transform: translateY(0px) scale(.98); }

/* -----------------------
   Hero (Lobby page only)
------------------------ */
.hero{
  max-width: 1180px;
  margin: 18px auto 0;
  padding: 0 14px;
}
.hero-card{
  border-radius: 28px;
  padding: 26px 18px;
  background:
    radial-gradient(900px 380px at 20% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, rgba(255,90,46,.18), rgba(255,178,74,.14)),
    linear-gradient(180deg, var(--panel), var(--panel2));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  backdrop-filter: var(--blur);
}
.hero-card h1{
  margin:0 0 8px;
  font-size: clamp(22px, 2.2vw, 34px);
  font-weight: 900;
  letter-spacing:.2px;
}
.hero-card p{
  margin:0 0 16px;
  color: var(--ink2);
  font-weight:700;
}
.hero-cta{ display:flex; gap:10px; flex-wrap:wrap; }

/* -----------------------
   Sections + Layout
------------------------ */
.section{
  max-width: 1180px;
  margin: 18px auto;
  padding: 0 14px;
}
.section-head{
  margin: 0 0 14px;
}
.section-head h2{
  margin:0 0 6px;
  font-size: 22px;
  font-weight: 900;
}
.section-head p{
  margin:0;
  color: var(--ink2);
  font-weight: 700;
}

.grid3{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 880px){
  .grid3{ grid-template-columns: repeat(3, 1fr); }
}

/* -----------------------
   App two columns
------------------------ */
.app{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items:start;
}
@media (min-width: 980px){
  .app{ grid-template-columns: 420px 1fr; }
}

/* -----------------------
   Cards / Panels
------------------------ */
.card, .panel{
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  padding: 14px;
  backdrop-filter: var(--blur);
}
.card h3{
  margin:0 0 6px;
  font-weight: 900;
}
.card p{
  margin:0;
  color: var(--ink2);
  font-weight: 700;
}

/* Panel headers */
.topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.topline h3, .topline h4{
  margin:0;
  font-weight: 900;
}

/* Mini row */
.mini{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-bottom: 10px;
}

/* -----------------------
   Badges
------------------------ */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.50);
  color: var(--ink);
  font-weight: 900;
  font-size: 12px;
}
body.dark .badge{ background: rgba(16,23,42,.55); }

.phase{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: linear-gradient(135deg, rgba(255,90,46,.18), rgba(255,178,74,.14));
  font-weight: 900;
  font-size: 12px;
}
.timer{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.55);
  font-weight: 900;
  font-size: 12px;
}
body.dark .timer{ background: rgba(16,23,42,.55); }

/* -----------------------
   Form elements
------------------------ */
.lbl{
  display:block;
  margin: 12px 0 8px;
  font-weight: 900;
  color: var(--ink);
}
.hint{
  margin-top: 10px;
  color: var(--ink2);
  font-weight: 700;
  font-size: 13px;
}

.inp, .sel{
  width:100%;
  border-radius: 16px;
  padding: 12px 12px;
  border: 1px solid var(--stroke2);
  background: var(--input);
  color: var(--inputInk);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
  outline: none;
  transition: border-color .12s ease, transform .06s ease, box-shadow .12s ease;
}
.inp:focus, .sel:focus{
  border-color: rgba(255,90,46,.40);
  box-shadow: 0 0 0 4px rgba(255,90,46,.12);
}
.inp.tiny{
  padding: 10px 10px;
  border-radius: 14px;
}
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }

/* Placeholders */
.inp::placeholder{ color: rgba(15,23,42,.45); }
body.dark .inp::placeholder{ color: rgba(231,236,255,.45); }

/* -----------------------
   Rows / Pills
------------------------ */
.row{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap:wrap;
  margin-top: 10px;
}
.row > *{ flex: 1 1 auto; }

.pill{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.50);
}
body.dark .pill{ background: rgba(16,23,42,.55); }
.pill span{ font-weight: 900; }
.pill .sel, .pill .inp{
  width: auto;
  min-width: 120px;
  flex: 1 1 auto;
}

/* -----------------------
   Buttons
------------------------ */
.btn{
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.62);
  color: var(--btnInk);
  padding: 12px 14px;
  border-radius: 18px;
  font-weight: 900;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  user-select:none;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,.12);
}
.btn:active{ transform: translateY(0px) scale(.985); }

.btn.primary{
  border-color: rgba(255,90,46,.25);
  background:
    radial-gradient(900px 380px at 20% 0%, rgba(255,255,255,.35), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, var(--brand1), var(--brand2));
  color: #1a130c;
  box-shadow: 0 16px 34px rgba(255,90,46,.20);
}
.btn.ghost{
  background: rgba(255,255,255,.55);
}
body.dark .btn.ghost{
  background: rgba(16,23,42,.55);
}
.btn.full{ width:100%; }

/* -----------------------
   Players list
------------------------ */
.players{
  display:grid;
  gap: 10px;
}
.player{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.52);
}
body.dark .player{ background: rgba(16,23,42,.55); }
.player .left{
  display:flex;
  gap: 10px;
  align-items:center;
  min-width:0;
}
.pdot{
  width: 12px; height: 12px;
  border-radius: 99px;
  background: linear-gradient(135deg, var(--brand1), var(--brand2));
  box-shadow: 0 10px 18px rgba(255,90,46,.20);
}
.pname{
  font-weight: 900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pmeta{
  font-size: 12px;
  color: var(--ink2);
  font-weight: 800;
}

/* -----------------------
   Manual box
------------------------ */
.manual{
  margin-top: 12px;
  padding: 12px;
  border-radius: 20px;
  border: 1px dashed rgba(255,90,46,.35);
  background: rgba(255,90,46,.08);
}
body.dark .manual{
  background: rgba(255,90,46,.10);
}

/* -----------------------
   QR section
------------------------ */
.qrWrap{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  border-radius: 22px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.48);
}
body.dark .qrWrap{ background: rgba(16,23,42,.55); }

.qrLeft{ flex: 1 1 auto; min-width:0; }
.shareRow{ display:flex; gap:10px; align-items:center; }
.shareRow .inp{ flex: 1 1 auto; }
.qrRight{
  width: 170px;
  display:grid;
  place-items:center;
}
#qrCanvas{
  width: 160px;
  height: 160px;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--stroke);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
body.dark #qrCanvas{ background: rgba(255,255,255,.90); }

/* -----------------------
   Game boxes
------------------------ */
.rolebox, .gamebox{
  border-radius: 22px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.55);
  padding: 12px;
  margin-bottom: 12px;
  min-height: 56px;
}
body.dark .rolebox,
body.dark .gamebox{ background: rgba(16,23,42,.55); }

/* Q/A log panel */
.turnsPanel{ margin-top: 12px; }
.turnsLog{
  margin-top: 12px;
  display:grid;
  gap: 10px;
}
.turn{
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.52);
}
body.dark .turn{ background: rgba(16,23,42,.55); }
.turn .q{ font-weight: 900; }
.turn .a{ color: var(--ink2); font-weight: 800; margin-top: 4px; }

/* Chat */
.chatbox{
  margin-top: 12px;
  border-radius: 22px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.48);
  overflow:hidden;
}
body.dark .chatbox{ background: rgba(16,23,42,.55); }

.chatlog{
  max-height: 240px;
  overflow:auto;
  padding: 12px;
  display:grid;
  gap: 10px;
}
.chatmsg{
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.55);
}
body.dark .chatmsg{ background: rgba(12,18,38,.70); }

.chatrow{
  display:flex;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid var(--stroke);
}
.chatrow .inp{ flex:1 1 auto; }

/* -----------------------
   Footer note
------------------------ */
.footnote{
  margin: 12px 0 6px;
  text-align:center;
  color: var(--ink2);
  font-weight: 800;
  font-size: 12px;
  opacity:.9;
}

/* -----------------------
   RTL/LTR helpers
------------------------ */
body.rtl{ direction: rtl; }
body.ltr{ direction: ltr; }

/* Make select arrows nicer in RTL/LTR */
select.sel{ appearance: none; background-image:
  linear-gradient(45deg, transparent 50%, var(--ink2) 50%),
  linear-gradient(135deg, var(--ink2) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-inline-end: 34px;
}
body.rtl select.sel{
  background-position:
    18px 50%,
    12px 50%;
  padding-inline-end: 12px;
  padding-inline-start: 34px;
}

/* Hide [hidden] properly */
[hidden]{ display:none !important; }
/* ============================================================
   ✅ GAME UI PATCH: Vote + Guess designed + Q/A log item fix
   Add this at the END of styles.css
============================================================ */

/* nicer text helpers (your JS uses these) */
.turnItem .muted{ color: var(--ink2); font-weight: 800; }
.turnItem .meta{ font-weight: 950; margin-bottom: 6px; }

/* Fix: JS creates .turnItem (not .turn) */
.turnItem{
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.52);
  display: grid;
  gap: 6px;
}
body.dark .turnItem{ background: rgba(16,23,42,.55); }

/* Make player rows consistent */
.player .name{ font-weight: 950; }
.player .score{
  font-weight: 950;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.55);
}
body.dark .player .score{ background: rgba(12,18,38,.65); }

/* Q/A row: when log is OFF -> hide inputs, keep button */
#qaInputRow.qa-log-off input{
  display:none !important;
}
#qaInputRow.qa-log-off{
  justify-content: flex-end;
}
#qaInputRow.qa-log-off > *{
  flex: 0 0 auto;
}

/* =======================
   VOTE LIST (Beautiful)
======================= */
.voteItem{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 12px 14px;
  border-radius: 18px;

  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.52);
  cursor: pointer;

  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
  text-align: start;
}
body.dark .voteItem{ background: rgba(16,23,42,.55); }

.voteItem:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(0,0,0,.12);
  border-color: rgba(255,178,74,.35);
}
.voteItem:active{ transform: translateY(0px) scale(.99); }

.voteName{
  font-weight: 950;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.voteMeta{
  min-width: 46px;
  height: 34px;
  display: grid;
  place-items: center;

  border-radius: 999px;
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.62);
  font-weight: 950;
}
body.dark .voteMeta{ background: rgba(12,18,38,.70); }

.voteItem.is-selected{
  border-color: rgba(40,209,124,.45);
  box-shadow: 0 18px 38px rgba(40,209,124,.10), 0 14px 26px rgba(0,0,0,.12);
  background:
    radial-gradient(900px 380px at 20% 0%, rgba(255,255,255,.22), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, rgba(40,209,124,.18), rgba(255,178,74,.12)),
    rgba(255,255,255,.52);
}
body.dark .voteItem.is-selected{
  background:
    radial-gradient(900px 380px at 20% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, rgba(40,209,124,.14), rgba(255,178,74,.10)),
    rgba(16,23,42,.55);
}

/* =======================
   OUTSIDER GUESS OPTIONS
======================= */
.optgrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 740px){
  .optgrid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.opt{
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 12px;

  padding: 12px 12px;
  border-radius: 18px;

  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.52);
  cursor: pointer;
  text-align: start;

  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
body.dark .opt{ background: rgba(16,23,42,.55); }

.opt:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(0,0,0,.12);
  border-color: rgba(255,178,74,.35);
}
.opt:active{ transform: translateY(0px) scale(.99); }

.opt .id{
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 14px;

  display: grid;
  place-items: center;

  font-weight: 950;
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.70), rgba(255,255,255,0) 40%),
    linear-gradient(135deg, var(--brand1), var(--brand2));
  color: #1a130c;
  box-shadow: 0 14px 26px rgba(255,90,46,.14);
}

.opt .txt{
  font-weight: 950;
  line-height: 1.2;
  word-break: break-word;
}

.opt.is-picked{
  border-color: rgba(255,178,74,.60);
  box-shadow: 0 18px 38px rgba(255,178,74,.12), 0 14px 26px rgba(0,0,0,.12);
}
.opt.is-disabled,
.opt:disabled{
  opacity: .6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
:root{
  --bg1:#8fd3ff;
  --bg2:#eaf7ff;
  --ink:#0f172a;
  --ink2:rgba(15,23,42,.75);
  --panel:rgba(255,255,255,.86);
  --panel2:rgba(255,255,255,.72);
  --stroke:rgba(15,23,42,.12);
  --shadow:0 20px 60px rgba(0,0,0,.18);
  --radius:22px;
  --brand:#ff6a2a;
  --brand2:#ffbf4a;
}

body.dark{
  --bg1:#071226;
  --bg2:#0b1b35;
  --ink:#e5e7eb;
  --ink2:rgba(229,231,235,.75);
  --panel:rgba(15,23,42,.72);
  --panel2:rgba(15,23,42,.55);
  --stroke:rgba(255,255,255,.12);
  --shadow:0 20px 60px rgba(0,0,0,.45);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: "Cairo","Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--ink);
  background: linear-gradient(180deg,var(--bg1),var(--bg2));
  overflow-x:hidden;
}
body.ltr{ direction:ltr; }
body.rtl{ direction:rtl; }

a{ color:inherit; text-decoration:none; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }

/* ===== background scene ===== */
.scene{ position:fixed; inset:0; z-index:-1; overflow:hidden; }
.sky{ position:absolute; inset:0; background:linear-gradient(180deg,var(--bg1),var(--bg2)); }
.sun{
  position:absolute; width:220px; height:220px; border-radius:50%;
  left:10%; top:10%;
  background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,.15) 55%, rgba(255,255,255,0) 70%);
  filter: blur(.2px);
  opacity:.85;
}
.clouds, .clouds2{
  position:absolute; inset:-20% -20% auto -20%;
  height:50%;
  background:
    radial-gradient(circle at 10% 60%, rgba(255,255,255,.85) 0 18%, transparent 20%),
    radial-gradient(circle at 30% 45%, rgba(255,255,255,.8) 0 22%, transparent 24%),
    radial-gradient(circle at 55% 65%, rgba(255,255,255,.75) 0 20%, transparent 22%),
    radial-gradient(circle at 80% 50%, rgba(255,255,255,.82) 0 24%, transparent 26%);
  opacity:.65;
  animation: drift 28s linear infinite;
}
.clouds2{
  top:18%;
  opacity:.45;
  filter: blur(1px);
  animation-duration: 42s;
}
@keyframes drift{
  from{ transform: translateX(-10%); }
  to{ transform: translateX(10%); }
}
.ground{
  position:absolute; left:0; right:0; bottom:-20px; height:220px;
  background: radial-gradient(1200px 220px at 50% 0%, rgba(0,0,0,.18), transparent 60%),
              linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.14));
  opacity:.25;
}
.vignette{
  position:absolute; inset:0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.18));
  pointer-events:none;
}

/* ===== nav ===== */
.nav{
  position:sticky; top:0;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.32);
  border-bottom:1px solid rgba(255,255,255,.25);
  z-index:10;
}
body.dark .nav{ background: rgba(0,0,0,.18); border-bottom-color: rgba(255,255,255,.08); }
.nav-inner{
  max-width:1100px; margin:0 auto;
  padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.logo{
  width:42px; height:42px; border-radius:14px;
  display:grid; place-items:center;
  font-weight:900;
  background: linear-gradient(135deg,var(--brand),var(--brand2));
  color:#111;
  box-shadow: var(--shadow);
}
.brand-title{ font-weight:900; }
.brand-sub{ font-size:12px; color:var(--ink2); }

.nav-actions{ display:flex; gap:8px; }
.chip{
  border:1px solid var(--stroke);
  background: var(--panel2);
  color: var(--ink);
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
  font-weight:800;
}
body.dark .chip{ color: var(--ink); }

/* ===== hero ===== */
.hero{
  max-width:1100px; margin: 18px auto 0;
  padding: 0 16px;
}
.hero-card{
  border:1px solid var(--stroke);
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 18px;
}
.hero-card h1{ margin:0 0 6px; font-size:28px; }
.hero-card p{ margin:0 0 14px; color:var(--ink2); }

.hero-cta{ display:flex; gap:10px; flex-wrap:wrap; }

/* ===== sections ===== */
.section{
  max-width:1100px; margin: 22px auto;
  padding: 0 16px;
}
.section-head h2{ margin:0 0 6px; }
.section-head p{ margin:0; color:var(--ink2); }

.grid3{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}
@media (max-width: 900px){
  .grid3{ grid-template-columns: 1fr; }
}

.card{
  border:1px solid var(--stroke);
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:14px;
}
.card h3{ margin:0 0 6px; }
.card p{ margin:0; color:var(--ink2); }

/* ===== app layout ===== */
.app{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:12px;
  align-items:start;
}
@media (max-width: 980px){
  .app{ grid-template-columns: 1fr; }
}

.panel{
  border:1px solid var(--stroke);
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:14px;
}

.lbl{ display:block; font-weight:900; margin:10px 0 6px; }
.inp, .sel{
  width:100%;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.55);
  color: var(--ink);
  padding:12px 12px;
  border-radius: 14px;
  outline:none;
}
body.dark .inp, body.dark .sel{ background: rgba(0,0,0,.22); }

.inp.tiny{ padding:10px 10px; width: 92px; }
.row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.hint{ margin-top:8px; font-size:12px; color: var(--ink2); white-space:pre-line; }

.btn{
  border:1px solid var(--stroke);
  background: var(--panel2);
  color: var(--ink);
  padding: 11px 14px;
  border-radius: 14px;
  cursor:pointer;
  font-weight:900;
}
.btn.primary{
  border: none;
  background: linear-gradient(135deg,var(--brand),var(--brand2));
  color:#111;
}
.btn.ghost{ background: transparent; }
.btn.full{ width:100%; margin-top:10px; }

.pill{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px;
  border:1px solid var(--stroke);
  border-radius: 16px;
  background: rgba(255,255,255,.4);
  flex:1;
  min-width: 180px;
}
body.dark .pill{ background: rgba(0,0,0,.18); }

.topline{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.badge{
  padding:6px 10px;
  border-radius: 999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.55);
  font-weight:900;
}
body.dark .badge{ background: rgba(0,0,0,.22); }

.mini{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.phase, .timer{
  font-size:12px;
  padding:6px 10px;
  border-radius: 999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.45);
}
body.dark .phase, body.dark .timer{ background: rgba(0,0,0,.18); }

.players{ margin-top:10px; display:grid; gap:8px; }
.player{
  display:flex; justify-content:space-between; align-items:center;
  border:1px solid var(--stroke);
  border-radius: 16px;
  background: rgba(255,255,255,.42);
  padding:10px 12px;
}
body.dark .player{ background: rgba(0,0,0,.18); }
.player .name{ font-weight:900; }
.player .score{ font-weight:900; opacity:.85; }

.manual{ margin-top:10px; padding-top:10px; border-top:1px dashed var(--stroke); }

.qrWrap{
  margin-top:12px;
  display:grid;
  grid-template-columns: 1fr 180px;
  gap:10px;
  align-items:center;
}
@media (max-width: 700px){
  .qrWrap{ grid-template-columns: 1fr; }
}
.shareRow{ display:flex; gap:10px; margin-top:8px; }
.qrRight{
  display:grid; place-items:center;
  padding:10px;
  border:1px solid var(--stroke);
  border-radius: 18px;
  background: rgba(255,255,255,.5);
}
body.dark .qrRight{ background: rgba(0,0,0,.18); }

.footnote{
  margin-top:10px;
  text-align:center;
  color: var(--ink2);
  font-size: 12px;
}