/* TagTeam — style.css (gameplay-optimized + tiny tile/keyboard tweaks) */

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

  /* Feedback colors (non-Wordle) */
  --ok:#4ea8ff;      /* correct place */
  --maybe:#f78c6c;   /* present elsewhere */
  --absent:#2f3344;  /* not in word */

  /* Tile sizing (JS updates --tilePx on phones so 6 rows fit) */
  --tilePx:56px;
  --tileInset:3px;   /* shave a few px so tiles never overrun the card */

  --gap:8px;
  --radius:12px;
  --shadow:0 10px 24px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.02) inset;
}

*{box-sizing:border-box}
html,body{height:100%}
/* Reserve gutter only on desktop to avoid mobile pan */
@supports (scrollbar-gutter: stable) {
  @media (hover: hover) and (pointer: fine) {
    html { scrollbar-gutter: stable both-edges; }
  }
}
/* Never allow horizontal overflow to cause sideways scroll/pan */
html, body { overflow-x: hidden; }

/* On mobile, never let modal logic add padding/margin to body */
@media (max-width: 900px) {
  body.modal-open,
  body.has-modal,
  body.showing-modal,
  body[style*="padding-right"],
  body[style*="margin-right"] {
    padding-right: 0 !important;
    margin-right: 0 !important;
  }
}

body{
  margin:0;
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:radial-gradient(1200px 800px at 70% -10%, #17203b 0%, transparent 60%), var(--bg);
  color:var(--fg);
  line-height:1.35;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none; /* avoid bouncy scroll on mobile */
}

/* ---------- Header ---------- */
.tt-header{
  padding:22px 16px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.04), transparent);
  text-align:center;
}
.tt-header h1{margin:0 0 6px;font-size:28px;letter-spacing:.4px}
.tt-header .sub{
  margin:0 auto;
  color:var(--muted);
  font-size:14px;
  max-width:460px;
}
.logo{
  max-width:260px;
  height:auto;
  display:block;
  margin:0 auto 12px;
  border-radius:10px;
}

/* Compact the header during play and hide the logo to reduce scroll */
body.playing .tt-header{ padding:10px 12px; }
body.playing .logo{ display:none; }

/* ---------- Layout ---------- */
.tt-main{max-width:820px;margin:16px auto;padding:0 14px}
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  margin-bottom:14px;
  box-shadow:var(--shadow);
  overflow-x: hidden; /* clip tiny inside bleeds */
}
.hidden{display:none!important}
.hint{color:var(--muted);font-size:13px;margin-top:10px}

.actions{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:12px}

/* ---------- Setup form (mobile-first) ---------- */
.grid2{
  display:grid;
  grid-template-columns:1fr;   /* stack on phones */
  gap:12px;
}
@media (min-width: 560px){
  .grid2{ grid-template-columns: 1fr 1fr; } /* side by side on wider screens */
}
label{display:grid;gap:6px;font-size:14px;color:var(--muted)}
input{
  padding:12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2);
  color:var(--fg);
  outline:none;
  font-size:16px; /* ≥16px prevents iOS zoom */
}
input::placeholder{color:#8d96a7}
input:focus{border-color:#35407a; box-shadow:0 0 0 3px rgba(110,168,255,.18)}

/* Big green primary for the create button */
#createBtn{
  margin-top:14px;
  background:linear-gradient(180deg,#1e7b39,#135d28);
  border-color:#2c8449;
}
#createBtn:hover{ filter:brightness(1.06); }

/* ---------- Buttons ---------- */
.btn{
  padding:11px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:linear-gradient(180deg,#1b2241,#141a31);
  color:#fff;
  cursor:pointer;
  font-weight:700;
  letter-spacing:.2px;
}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(1px)}
.btn.secondary{background:linear-gradient(180deg,#142634,#0f1c29)}
.btn.linklike{
  background:transparent;border-color:transparent;color:var(--accent);
  text-decoration:underline;text-underline-offset:3px;
}

/* ---------- Roles / Messages ---------- */
.roles{margin-bottom:10px;font-size:13px;color:var(--muted);text-align:center}
.msg{min-height:22px;margin:6px 0 10px;text-align:center}

/* ---------- Board (uses JS-driven --tilePx, with slight inset) ---------- */
.board{
  width:100%;
  display:grid;
  grid-template-rows: repeat(6, calc(var(--tilePx) - var(--tileInset)));
  gap:var(--gap);
  justify-content:center;
  padding:6px 0;
}
.row{
  display:grid;
  grid-template-columns: repeat(5, calc(var(--tilePx) - var(--tileInset)));
  gap:var(--gap);
}
.tile{
  display:grid;place-items:center;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2);
  color:#fff;
  font-weight:800;
  font-size: clamp(20px, 5.4vw, 24px);
  letter-spacing:.5px;
  text-transform:uppercase;
  transition:transform .12s ease, background .15s ease, border-color .15s ease;
}
.tile.pop{animation:pop .1s ease-out}
@keyframes pop{from{transform:scale(.96)}to{transform:scale(1)}}

/* Feedback states */
.tile.correct{
  background: linear-gradient(180deg, rgba(78,168,255,.22), rgba(78,168,255,.30));
  border-color: var(--ok);
  box-shadow: 0 0 0 1px rgba(78,168,255,.25) inset, 0 6px 14px rgba(78,168,255,.12);
  color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.tile.present{
  position: relative;
  background:
    linear-gradient(180deg, rgba(247,140,108,.12), rgba(247,140,108,.18)),
    repeating-linear-gradient(135deg, rgba(247,140,108,.20) 0px, rgba(247,140,108,.20) 4px, transparent 4px, transparent 10px);
  border-color: rgba(247,140,108,.65);
  color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.tile.present::after{
  content:'';
  position:absolute; right:6px; bottom:6px;
  width:8px; height:8px; border-radius:50%;
  background: var(--maybe);
  box-shadow: 0 0 0 2px rgba(0,0,0,.28);
}
.tile.absent{
  background: var(--absent);
  border-color: var(--absent);
  color: #8f97a7;
}

/* Invalid wiggle (for bad word) */
@keyframes wiggle{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-5px)}
  75%{transform:translateX(5px)}
}
.row.invalid .tile{animation:wiggle .2s ease}

/* ---------- Keyboard (edge-to-edge look without page overflow) ---------- */
/* ---------- Keyboard (edge-to-edge, no overflow) ---------- */
.keyboard{
  width:100%;
  margin:12px 0 0 0;   /* no negative margins */
  padding:0;           /* let keys touch the card edges via small row gaps */
  display:grid;
  gap:6px;
  max-width:unset;
}
.krow{
  display:flex;
  gap:6px;
  justify-content:center;
  padding:0 2px;       /* faint “bleed” look without changing layout width */
}
.key{
  flex:1 1 0;
  padding:12px 6px;
  min-width:0;
  border-radius:8px;
  border:1px solid var(--border);
  background:linear-gradient(180deg,#1b223f,#141a31);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  text-align:center;
  font-size:16px;
}
.key.enter,.key.back{ flex:1.6 1 0 }

.key:active{transform:translateY(1px)}
.key.correct{ background: var(--ok); border-color: var(--ok); color:#0b1426; }
.key.present{
  background:
    repeating-linear-gradient(135deg, rgba(247,140,108,.18) 0px, rgba(247,140,108,.18) 4px, rgba(20,26,49,1) 4px, rgba(20,26,49,1) 10px);
  border-color: rgba(247,140,108,.65);
  color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.25);
}
.key.absent{ background: var(--absent); border-color: var(--absent); color:#8f97a7; }
.keyboard.disabled .key, .key:disabled{opacity:.5;cursor:not-allowed}

/* ---------- Footer ---------- */
.tt-footer{
  padding:18px 16px;
  color:var(--muted);
  text-align:center;
  border-top:1px solid var(--border);
  margin-top:10px
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 560px){
  .tt-main{ padding:0 10px; }
  .card{ border-radius:10px; padding:14px; }
  .keyboard{ padding:0 2px; gap:6px; }
  .krow{ gap:6px; }
  .key{ padding:12px 5px; }
}

@media (max-width: 380px){
  .keyboard{ padding:0 1px; }
  .krow{ gap:5px; }
  .key{ padding:11px 4px; font-size:15px; }
}

/* Optional tiny pop animation used by JS when typing */
@keyframes pop { from{transform:scale(.96)} to{transform:scale(1)} }

/* =========================
   Big Mode Buttons (homepage)
   ========================= */
.mode-card{ padding:18px; }
.mode-title{
  margin:0 0 12px;
  font-size:20px;
  letter-spacing:.2px;
}
.center{ text-align:center; }

.mode-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
@media (min-width: 700px){
  .mode-grid{ grid-template-columns:1fr 1fr; }
}

.cta-big{
  display:grid;
  grid-template-rows:auto auto auto;
  gap:6px;
  padding:16px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  text-decoration:none;
  color:#fff;
  box-shadow: var(--shadow);
  transition: transform .06s ease, filter .12s ease, border-color .12s ease;
  min-height: 120px;
}
.cta-big:hover{ filter:brightness(1.06); }
.cta-big:active{ transform: translateY(1px); }

.cta-eyebrow{
  font-weight:800;
  letter-spacing:.3px;
  opacity:.95;
  font-size:14px;
}
.cta-headline{
  font-size:18px;
  font-weight:800;
}
.cta-sub{
  color:#cfd5e3;
  font-size:14px;
  line-height:1.35;
}

/* Daily = greenish; Quickplay = blue/purple */
.cta-daily{
  background: linear-gradient(180deg, rgba(30,123,57,.35), rgba(19,93,40,.35));
  border-color: #2c8449;
}
.cta-quick{
  background: linear-gradient(180deg, rgba(78,168,255,.30), rgba(49,86,160,.35));
  border-color: #4ea8ff;
}

/* Buttons: green + large (for your Start Game) */
.btn-green{
  background:linear-gradient(180deg,#1e7b39,#135d28)!important;
  border-color:#2c8449!important;
  color:#fff!important;
}
.btn-lg{
  padding:13px 16px!important;
  font-size:18px!important;
  border-radius:12px!important;
}

/* Active state highlight for mode buttons */
.cta-big.active{
  outline: 3px solid currentColor;
  box-shadow: 0 0 0 3px rgba(110,168,255,.18), var(--shadow);
}

/* Tint outline to match each variant */
.cta-daily.active { outline-color:#2c8449; }
.cta-quick.active { outline-color:#4ea8ff; }

/* Keyboard accessibility */
.cta-big:focus-visible{
  outline:3px solid currentColor;
  box-shadow:0 0 0 3px rgba(110,168,255,.22), var(--shadow);
}

/* ===== Mode picker visibility & selection ===== */
.mode-bar.hidden { display: none !important; }
.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; }
}

/* Base card look (gray outline by default) */
.cta-big{
  display:flex; flex-direction:column; gap:6px;
  padding:14px;
  background:linear-gradient(180deg,#171b2b,#121626);
  border:2px solid var(--border);
  border-radius:14px;
  color:#fff; text-decoration:none; cursor:pointer;
  box-shadow:var(--shadow);
  transition:border-color .18s ease, box-shadow .18s ease, transform .06s ease;
}
.cta-big:active{ transform: translateY(1px); }
.cta-big h3{ margin:0; font-size:1.1rem; letter-spacing:.2px; }
.cta-big p{ margin:0; color:#cfd5e3; font-size:.95rem; }

/* Unselected (explicit) – keep border gray */
.cta-big:not(.active){ border-color: var(--border); }

/* Selected state highlight + color tint */
.cta-big.active{
  box-shadow:0 0 0 3px rgba(110,168,255,.18), var(--shadow);
  outline:3px solid currentColor; /* keyboard focus friendly */
}

/* Daily (green) */
.cta-daily.active{
  border-color:#2c8449;
  outline-color:#2c8449;
  background:linear-gradient(180deg,#0f2319,#0d1b15);
}

/* Quick (blue) */
.cta-quick.active{
  border-color:#4ea8ff;
  outline-color:#4ea8ff;
  background:linear-gradient(180deg,#0e1a2b,#0b1424);
}

/* Keyboard accessibility */
.cta-big:focus-visible{
  outline:3px solid currentColor;
  box-shadow:0 0 0 3px rgba(110,168,255,.22), var(--shadow);
}

/* Stronger selected look */
.cta-big { position: relative; }
.cta-big.active {
  border-width: 2px;
  box-shadow: 0 0 0 3px rgba(110,168,255,.18), var(--shadow);
  transform: translateY(-1px);
}
.cta-daily.active{
  border-color:#29c76f;
  outline-color:#29c76f;
  background:linear-gradient(180deg,#0f261a,#0d1b15);
}
.cta-quick.active{
  border-color:#4ea8ff;
  outline-color:#4ea8ff;
  background:linear-gradient(180deg,#0e1f38,#0b1424);
}
/* little glow badge top-right */
.cta-big.active::after{
  content:"";
  position:absolute; top:10px; right:10px;
  width:10px; height:10px; border-radius:50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}
.cta-daily.active{ color:#a8ffcf; }
.cta-quick.active{ color:#d2e9ff; }
/* Make mode cards centered and let aria-pressed act like .active (fallback if JS lags) */
.cta-big { text-align:center; align-items:center; justify-content:center; }

/* Treat aria-pressed="true" the same as .active */
.cta-big.active,
.cta-big[aria-pressed="true"]{
  border-width: 2px;
  box-shadow: 0 0 0 3px rgba(110,168,255,.18), var(--shadow);
  transform: translateY(-1px);
}
/* Daily (green) */
.cta-daily.active,
.cta-daily[aria-pressed="true"]{
  border-color:#29c76f;
  outline-color:#29c76f;
  background:linear-gradient(180deg,#0f261a,#0d1b15);
  color:#a8ffcf;
}
/* Quick (blue) */
.cta-quick.active,
.cta-quick[aria-pressed="true"]{
  border-color:#4ea8ff;
  outline-color:#4ea8ff;
  background:linear-gradient(180deg,#0e1f38,#0b1424);
  color:#d2e9ff;
}
.cta-big { text-align: center; }

/* Hide site header during active play so the board stays tall */
body.playing .cb-header { display:none; }
/* Hide Daily/Quickplay picker while playing */
body.playing #modeBar { display: none !important; }

/* No-shift scroll lock (use instead of padding-right hacks) */
body.lock-scroll {
  position: fixed;
  width: 100%;
  overflow: hidden;
  top: var(--lock-scroll-top, 0);
  left: 0; right: 0;
}
/* --- Hard-stop any sideways nudge on mobile --- */
html, body { overflow-x: clip; }  /* clip is stricter than hidden in modern Safari */

/* Make sure main containers never exceed the viewport width */
.tt-main, .card, .board, .keyboard, .krow, #roles, #message {
  max-width: 100%;
}

/* Center grid children defensively */
#board, #keyboard { margin-inline: auto; }

/* If a long URL/string lands in message or modal, wrap it instead of pushing layout */
#message, .tt-modal p, .tt-modal #tt-share-summary {
  overflow-wrap: anywhere;       /* modern, soft wrap */
  word-break: break-word;        /* fallback */
}

/* Ensure keyboard rows never cause overflow on tight devices */
.krow { flex-wrap: nowrap; max-width: 100%; }
.key  { min-width: 0; }

/* Pull focus outlines inward so they don't create 'phantom width' */
.cta-big:focus-visible,
.cta-big.active,
.cta-big[aria-pressed="true"] {
  outline-offset: -3px;
}

/* Extra safety: prevent any child from leaking horizontally out of cards */
.card > * { max-width: 100%; }


/* === TagTeam — adopt Thinkle keyboard layout/look ===
   (maps Thinkle's .keyboard-row to TagTeam's .krow)
   Drop this at the END of /tagteam/style.css
------------------------------------------------------------------ */

/* Container padding like Thinkle */
#keyboard.keyboard { padding-inline: 10px !important; }

/* Rows: full-width grid, centered, comfy gaps */
.krow {
  display: grid !important;
  width: 100%;
  column-gap: 6px !important;
  row-gap: 10px !important;
  justify-content: center;
  padding: 0 !important;     /* override any prior padding */
}

/* Column counts per row (same pattern as Thinkle) */
#keyboard .krow:nth-child(1) { grid-template-columns: repeat(10, 1fr) !important; }
#keyboard .krow:nth-child(2) { grid-template-columns: repeat(9, 1fr) !important; }
#keyboard .krow:nth-child(3) { grid-template-columns: 1.6fr repeat(7, 1fr) 1.6fr !important; } /* ENTER / letters / ⌫ */

/* Subtle stagger for rows 2–3 on mobile (iOS vibe) */
@media (max-width: 900px){
  #keyboard .krow:nth-child(2) { padding-left: 4.5% !important; }
  #keyboard .krow:nth-child(3) { padding-left: 2% !important; }
}

/* Keys: classic iPhone-style rectangle, ≥16px text to avoid iOS zoom */
.key{
  display:flex; align-items:center; justify-content:center;
  width: 100%; min-width: 0;
  min-height: 48px;
  padding: 0 .5rem !important;
  border-radius: 6px !important;
  border: 1px solid #545454 !important;
  background:#333 !important;
  color:#fff !important;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.35);
  font-size: 16px; line-height: 1;
  white-space: nowrap; user-select: none; cursor: pointer;
  transform: none !important;                 /* remove hover pop from TagTeam */
}
.key:hover { background:#3a3a3c !important; }

/* Keep your TagTeam states, applied on the new key shape */
.key.correct { background: var(--ok, #06b6d4) !important; border-color: var(--ok, #06b6d4) !important; color:#082a2f !important; box-shadow:none !important; }
.key.present {
  background: var(--maybe, #8b5cf6) !important;
  border-color: var(--maybe, #8b5cf6) !important;
  color:#1b1030 !important;
  box-shadow:none !important;
}
.key.absent  { background: var(--absent, #0b0b0b) !important; border-color: var(--absent, #0b0b0b) !important; color:#7a7a7a !important; filter:none !important; }

/* ENTER / BACK sizing (TagTeam uses .enter and .back) */
.key.enter { font-size: 15px !important; letter-spacing:.01em; }
.key.back, .key.backspace { font-size: 18px !important; }

/* Mobile comfort sizing */
@media (max-width: 600px){
  #keyboard.keyboard { padding-left: 4px !important; padding-right: 4px !important; }
  .krow { margin-bottom: 6px !important; }
  .key{
    min-height: clamp(50px, 13.5vw, 60px) !important;
    font-size: clamp(16px, 4.4vw, 18px) !important;
    padding: 0 .45rem !important;
  }
  .key.enter { font-size: clamp(14px, 3.8vw, 16px) !important; }
  .key.back, .key.backspace { font-size: clamp(18px, 5vw, 22px) !important; }
  /* Slight row indents for iOS look */
  #keyboard .krow:nth-child(2){ padding-left: 3% !important; }
  #keyboard .krow:nth-child(3){ padding-left: 1.5% !important; }
}

/* Desktop/tablet tidy */
@media (min-width: 900px){
  #keyboard.keyboard { max-width: 520px !important; margin-inline:auto; }
  .key { min-height: 44px !important; font-size: 15px !important; }
}
/* Before (example)
.board { grid-template-rows: repeat(6, calc(var(--tilePx) - var(--tileInset))); }
.row   { grid-template-columns: repeat(5, calc(var(--tilePx) - var(--tileInset))); }
*/

/* After */
.board {
  grid-template-rows: repeat(var(--rows, 8), calc(var(--tilePx) - var(--tileInset)));
}
.row {
  grid-template-columns: repeat(var(--cols, 6), calc(var(--tilePx) - var(--tileInset)));
}