/* =========================
   TagTeam Sports — Clean CSS
   ========================= */

/* ---------- Theme tokens ---------- */
:root{
  --bg:#0c0f17;
  --surface:#121626;
  --border:#232949;
  --fg:#ffffff;
  --muted:#9aa3b2;
  --accent:#6ea8ff;

  --ok:#29c76f;
  --bad:#dc3545;
}

html,body{height:100%}
html,body{overflow-x:hidden}  /* kill sideways pan/bump */

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
}

/* ---------- Header ---------- */
.tt-header{
  padding:18px 14px;
  border-bottom:1px solid var(--border);
  text-align:center;
}
.tt-header .sub{ color:var(--muted); }
.tt-header h1{ font-size:1.8rem; line-height:1.2; }
.tt-header h1 .subtitle{
  display:block; margin-top:4px;
  font-size:1.4rem; font-weight:600; color:var(--accent);
}

/* ---------- Layout wrappers ---------- */
.tt-main{
  max-width:900px;        /* roomier on desktop */
  margin:16px auto;
  padding:0 12px;         /* phone gutters */
}
.card{
  width:100%;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.hidden{ display:none !important; }

/* ---------- Mode buttons (if shown) ---------- */
.mode-bar{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:10px 0 12px;
}
@media (max-width:560px){ .mode-bar{ grid-template-columns:1fr; } }

.cta-big{
  display:flex; flex-direction:column; gap:6px;
  padding:14px;
  border-radius:12px;
  border:2px solid var(--border);
  background:linear-gradient(180deg,#171b2b,#121626);
  color:#fff;
  cursor:pointer;
}
.cta-big.active,
.cta-big[aria-pressed="true"]{
  border-color:var(--ok);
  outline:3px solid var(--ok);
}

/* ---------- Buttons ---------- */
.btn{
  padding:11px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:linear-gradient(180deg,#1b2241,#141a31);
  color:#fff;
  font-weight:700;
  cursor:pointer;
}
.btn-green{
  background:linear-gradient(180deg,#1e7b39,#135d28)!important;
  border-color:#2c8449!important;
}
.btn-lg{ padding:13px 16px; font-size:18px; }

/* Hide “Start a new TagTeam” for daily-only */
#newGame{ display:none !important; }

/* ---------- Roles / HUD / Messages ---------- */
.roles,.msg,.hud{
  text-align:center;
  color:var(--muted);
  margin:6px 0 10px;
}
.hud span{ font-weight:700; color:#cfd5e3; }

/* Roles: inline on desktop, stacked on mobile */
.roles{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:max-content;
  gap:10px;
  justify-content:center;
  align-items:center;
  font-size:13px;
}
.roles .role-item{ white-space:nowrap; }
.roles .role-sep{ opacity:.8; }
@media (max-width:560px){
  .roles{
    grid-auto-flow:row;
    grid-template-columns:1fr;
    gap:4px;
    text-align:center;
  }
  .roles .role-sep{ display:none; }
  .roles .role-item.you{ font-weight:700; color:#cfd5e3; }
}

/* ---------- Setup form ---------- */
.login-card .form-vertical{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:flex-start;   /* left-align labels/inputs */
  width:100%;
}
.login-card .form-vertical label{
  display:block;
  width:100%;
  max-width:320px;
  font-size:14px;
  color:var(--muted);
  margin:0;
}
.login-card .form-vertical label > input{
  display:block;
  width:100%;
  max-width:320px;
  height:42px;
  margin-top:6px;
  padding:6px 10px;
  font-size:16px;          /* avoids iOS zoom */
  color:#fff;
  background:#1c2236;      /* lighter field so it stands out */
  border:1px solid #3a4466;
  border-radius:8px;
  box-sizing:border-box;
}
.login-card .form-vertical label > input:focus{
  outline:none;
  border-color:var(--accent);
  background:#242c46;
}

/* Start button aligned with inputs; full width on phones */
#createBtn{
  margin-top:18px;
  width:100%;
  max-width:340px;
  display:block;
}
@media (max-width:560px){
  .login-card .form-vertical label > input,
  #createBtn{ max-width:100%; width:100%; }
}

/* ---------- Question block ---------- */
.qwrap{ display:grid; gap:10px; }

#qmeta{
  font-size:.95rem;
  color:#cfd5e3;
  margin-bottom:6px;
}

#qtext{
  font-size:clamp(1.1rem, 2.8vw, 1.6rem);
  line-height:1.35;
  margin:.5rem 0 .9rem;
}

/* Make Q/A span full card width */
#play.card{ width:100%; }
#qmeta, #qtext, #answers{ width:100%; max-width:none; }

/* Answers */
.answers{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.answers li{ margin:0; }
.answers li button{
  width:100%;
  display:block;
  text-align:left;
  padding:14px 12px;
  font-size:clamp(1rem, 2.6vw, 1.25rem);
  font-weight:700;
  border-radius:12px;
  border:1px solid var(--border);
  background:linear-gradient(180deg,#1b223f,#141a31);
  color:#fff;
  cursor:pointer;
}
.answers li button:hover{ filter:brightness(1.06); }
.answers li button:active{ transform:translateY(1px); }
.answers li button.correct{
  background:rgba(41,199,111,.22);
  border-color:var(--ok);
}
.answers li button.wrong{
  background:rgba(220,53,69,.25);
  border-color:var(--bad);
}

/* Tiny phones */
@media (max-width:380px){
  .tt-main{ padding:0 10px; }
  .answers li button{ padding:12px 10px; border-radius:10px; }
}

/* ---------- Footer (match Words TagTeam) ---------- */
.tt-footer{
  padding:18px 16px;
  color:#9aa3b2;
  text-align:center;
  border-top:1px solid #232949;
  margin-top:10px;
}
.tt-footer small{ display:inline-block; }
/* ================================
   TagTeam Sports — Mobile Fix Pack
   Full-width Q/A + anti right-bump
   ================================ */

/* 1) Absolutely prevent sideways scroll/bump */
html, body {
  width: 100%;
  overflow-x: hidden !important;
}
#play, .card, .tt-main {
  max-width: 100%;
  width: 100%;
  overflow-x: clip; /* modern, avoids scrollbars from inner elements */
}

/* 2) Make the play card span the screen nicely on mobile */
.tt-main {
  margin: 16px auto;
  padding: 0 12px;           /* comfy gutters */
}
#play.card {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* 3) Ensure the question & answers actually fill the card width */
#qmeta, #qtext, #answers {
  width: 100%;
  max-width: none;
}

/* 4) Buttons never force horizontal overflow */
#answers button {
  display: block;
  width: 100%;
  min-width: 0;              /* kill any intrinsic min widths */
  box-sizing: border-box;
  white-space: normal;       /* wrap long answers instead of stretching */
  word-break: break-word;
}

/* 5) Make Q/A visually dominant on phones (larger, clearer) */
#qtext {
  font-size: clamp(1.15rem, 4.6vw, 1.7rem); /* bigger headline */
  line-height: 1.35;
  margin: 0.6rem 0 1rem;
  font-weight: 800;
}
#answers {
  display: grid;
  gap: 12px;
}
#answers button {
  padding: 15px 14px;
  font-size: clamp(1.05rem, 4.2vw, 1.3rem);
  font-weight: 800;
  border-radius: 12px;
  border: 1px solid var(--border, #2e3558);
  background: linear-gradient(180deg,#1b223f,#141a31);
  color: #fff;
}
#answers button:hover { filter: brightness(1.06); }
#answers button:active { transform: translateY(1px); }

/* 6) Subhead (meta) a touch clearer but not competing */
#qmeta {
  font-size: 1rem;
  color: #cfd5e3;
  margin-bottom: 8px;
}

/* 7) Roles/message compact + non-intrusive */
.roles, .msg {
  text-align: center;
  margin: 6px 0 8px;
}
.roles .role-item.you { font-weight: 800; }

/* 8) Tiny screens polish */
@media (max-width: 380px){
  .tt-main { padding: 0 10px; }
  #answers button { padding: 13px 10px; border-radius: 10px; }
}

/* 9) Just in case: any inner scroller gets clipped (no horizontal wiggle) */
.qwrap, .quiz-body, .login-card, .actions {
  overflow-x: clip;
}
/* ===============================
   TagTeam Sports — Anti-bump hard clamp
   =============================== */

/* Use small viewport units to avoid iOS “rubber” width */
html, body {
  width: 100%;
  max-width: 100svw;
  overflow-x: clip !important; /* stronger than hidden for inner overflows */
}

/* Global guardrails */
*, *::before, *::after { box-sizing: border-box; }
img, svg, video { max-width: 100%; height: auto; }

/* Main shells must never exceed the small viewport width */
.tt-main, .card, #play {
  width: 100%;
  max-width: 100svw;
  margin-left: auto;
  margin-right: auto;
  overflow-x: clip;
}

/* Q/A blocks fill full width and wrap safely */
#qmeta, #qtext, #answers {
  width: 100%;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Answer buttons can never cause horizontal scroll */
#answers button {
  width: 100%;
  min-width: 0;
  white-space: normal;
  word-break: break-word;
}

/* Roles line: wrap long names & prevent max-content from pushing width */
.roles {
  grid-auto-columns: auto;   /* was max-content; can overflow on iOS */
  overflow-wrap: anywhere;
}
.roles .role-item { white-space: normal; }

/* Make Q/A visually dominant (a touch larger) */
#qtext {
  font-size: clamp(1.2rem, 5.2vw, 1.8rem);
  line-height: 1.35;
  margin: .7rem 0 1.05rem;
  font-weight: 800;
}
#answers { gap: 14px; }
#answers button {
  padding: 16px 14px;
  font-size: clamp(1.1rem, 4.6vw, 1.35rem);
  font-weight: 800;
}

/* Tiny phones polish */
@media (max-width: 380px){
  .tt-main { padding: 0 10px; }
  #answers button { padding: 14px 10px; border-radius: 10px; }
}
/* Brighter correct/wrong + smooth transitions */
#answers button{
  transition: background .18s ease, border-color .18s ease, transform .08s ease, box-shadow .18s ease;
}
#answers button.correct{
  background:#29c76f !important;
  border-color:#29c76f !important;
  color:#0b1426 !important;
  box-shadow:0 0 0 2px rgba(41,199,111,.28) inset, 0 6px 16px rgba(41,199,111,.18);
}
#answers button.wrong{
  background:#dc3545 !important;
  border-color:#dc3545 !important;
  color:#fff !important;
  box-shadow:0 0 0 2px rgba(220,53,69,.25) inset;
}

/* Small, snappy animations */
@keyframes tt-pop { from{transform:scale(.96)} to{transform:scale(1)} }
@keyframes tt-wiggle {
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-3px)}
  75%{transform:translateX(3px)}
}
#answers button.pop   { animation: tt-pop .12s ease-out; }
#answers button.shake { animation: tt-wiggle .18s ease; }
/* Make Start button exactly match the name field width */
.login-card .form-vertical label { max-width: 320px; }
.login-card .form-vertical label > input { max-width: 320px; }
#createBtn {
  width: 100%;
  max-width: 320px;    /* match inputs */
  display: block;
}
button.reveal { outline: 2px solid #22c55e; box-shadow: 0 0 0 2px #22c55e55 inset; }