/* Smashstarter TT-Quiz v1.1 — scoped to .ssq-wrap */
.ssq-wrap {
  --red:    #e8001a;
  --red-l:  #ff3a50;
  --navy:   #0d1b35;
  --navy2:  #162444;
  --blue:   #7ecfed;
  --blue-d: #4ab8de;
  --white:  #ffffff;
  --off:    #f4f6f9;
  --border: #dde3ef;
  --text:   #0d1b35;
  --muted:  #6b7a99;
  --shadow: 0 4px 20px rgba(13,27,53,.10);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--off);
  color: var(--text);
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  padding: 12px 12px 48px;
  position: relative;
  box-sizing: border-box;
}
.ssq-wrap *, .ssq-wrap *::before, .ssq-wrap *::after { box-sizing: border-box; }
.ssq-wrap .ssq-hidden { display: none !important; }

/* LOGO */
.ssq-logo { text-align: center; padding: 24px 0 18px; }
.ssq-badge { display: inline-block; background: var(--navy); color: #fff; font-weight: 900; font-size: clamp(1.4rem,6vw,2rem); letter-spacing: 3px; padding: 8px 22px; border-radius: 6px; }
.ssq-badge .r { color: var(--red); }
.ssq-badge .b { color: var(--blue); }
.ssq-sub { margin-top: 8px; font-size: .75rem; text-transform: uppercase; letter-spacing: 4px; color: var(--muted); }

/* CARD */
.ssq-card { background: var(--white); border-radius: 16px; padding: 18px; box-shadow: var(--shadow); margin-bottom: 12px; border: 1px solid var(--border); }
.ssq-card-title { font-weight: 900; font-size: .68rem; text-transform: uppercase; letter-spacing: 3px; color: var(--muted); margin-bottom: 14px; }

/* LANG TOGGLE */
.ssq-lang-toggle { display: flex; gap: 8px; }
.ssq-lang-btn { flex: 1; padding: 9px 8px; font-weight: 700; font-size: .9rem; border: 2px solid var(--border); border-radius: 10px; background: var(--off); color: var(--muted); cursor: pointer; transition: all .15s; }
.ssq-lang-btn:hover { border-color: var(--red); color: var(--red); }
.ssq-lang-btn.ssq-on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* FIELDS */
.ssq-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.ssq-field:last-child { margin-bottom: 0; }
.ssq-field label { font-size: .7rem; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; color: var(--muted); }
.ssq-field.ssq-ta label { color: var(--red); }
.ssq-field.ssq-tb label { color: var(--blue-d); }
.ssq-wrap input[type="text"] { background: var(--off); border: 2px solid var(--border); border-radius: 10px; padding: 11px 14px; font-size: 1rem; font-family: inherit; font-weight: 700; color: var(--text); width: 100%; outline: none; transition: border-color .2s, box-shadow .2s; }
.ssq-wrap input[type="text"]:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(232,0,26,.12); }

/* SETTINGS */
.ssq-settings-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ssq-setting-block { display: flex; flex-direction: column; gap: 7px; }
.ssq-setting-label { font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; color: var(--navy); margin-bottom: 4px; }
.ssq-setting-sublabel { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); }
.ssq-pills { display: flex; gap: 5px; flex-wrap: wrap; }
.ssq-pill { padding: 6px 13px; border-radius: 20px; border: 2px solid var(--border); background: var(--off); font-weight: 700; font-size: .85rem; color: var(--muted); cursor: pointer; transition: all .15s; }
.ssq-pill:hover { border-color: var(--red); color: var(--red); }
.ssq-pill.ssq-on { background: var(--red); border-color: var(--red); color: #fff; }

/* MODE TOGGLE */
.ssq-mode-toggle { display: flex; border: 2px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.ssq-mode-btn { flex: 1; padding: 10px 8px; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; border: none; background: transparent; color: var(--muted); cursor: pointer; transition: all .15s; }
.ssq-mode-btn.ssq-on { background: var(--navy); color: #fff; }
.ssq-mode-btn:first-child { border-right: 1px solid var(--border); }

/* CAT GRID */
.ssq-cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ssq-cat-btn { background: var(--off); border: 2px solid var(--border); border-radius: 10px; padding: 10px 8px; font-weight: 700; font-size: .82rem; font-family: inherit; color: var(--text); cursor: pointer; transition: all .15s; text-align: center; }
.ssq-cat-btn:hover { border-color: var(--red); color: var(--red); background: #fff5f5; }
.ssq-cat-btn.ssq-on { border-color: var(--red); background: var(--red); color: #fff; }

/* BUTTONS */
.ssq-btn { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 14px 20px; font-family: inherit; font-weight: 900; font-size: .92rem; letter-spacing: 1.5px; text-transform: uppercase; border: none; border-radius: 10px; cursor: pointer; transition: all .15s; }
.ssq-btn + .ssq-btn { margin-top: 10px; }
.ssq-btn:active { transform: scale(.97); }
.ssq-btn-red   { background: var(--red);   color: #fff; box-shadow: 0 4px 16px rgba(232,0,26,.28); }
.ssq-btn-red:hover   { background: var(--red-l); }
.ssq-btn-navy  { background: var(--navy);  color: #fff; box-shadow: 0 4px 16px rgba(13,27,53,.25); }
.ssq-btn-navy:hover  { background: var(--navy2); }
.ssq-btn-blue  { background: var(--blue);  color: var(--navy); box-shadow: 0 4px 14px rgba(126,207,237,.35); }
.ssq-btn-blue:hover  { background: #a0ddf5; }
.ssq-btn-ghost { background: transparent; border: 2px solid var(--border); color: var(--muted); box-shadow: none; }
.ssq-btn-ghost:hover { border-color: var(--navy); color: var(--navy); }
.ssq-btn-sm { width: auto; padding: 10px 16px; font-size: .8rem; flex-shrink: 0; border-radius: 8px; margin-top: 0 !important; }

/* SCOREBOARD */
.ssq-scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 16px 0 12px; }
.ssq-score-panel { background: var(--white); border-radius: 14px; padding: 14px 10px; text-align: center; box-shadow: var(--shadow); border: 1px solid var(--border); }
.ssq-score-panel.ssq-ta { border-top: 4px solid var(--red); }
.ssq-score-panel.ssq-tb { border-top: 4px solid var(--blue-d); }
.ssq-score-name { font-weight: 900; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ssq-score-panel.ssq-ta .ssq-score-name { color: var(--red); }
.ssq-score-panel.ssq-tb .ssq-score-name { color: var(--blue-d); }
.ssq-score-num { font-size: 2.6rem; font-weight: 900; line-height: 1; color: var(--navy); margin-top: 2px; }
.ssq-score-vs { font-weight: 900; font-size: 1rem; color: var(--muted); }

/* SLOT */
.ssq-slot-lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: 3px; color: var(--muted); margin-bottom: 8px; font-weight: 700; }
.ssq-slot-disp { font-weight: 900; font-size: clamp(1rem,4.5vw,1.5rem); color: var(--red); background: var(--off); border: 2px solid var(--border); border-radius: 10px; padding: 12px 16px; min-height: 50px; display: flex; align-items: center; justify-content: center; letter-spacing: 1px; }
.ssq-slot-disp.spin { color: var(--blue-d); border-color: var(--blue); }
.ssq-slot-disp.land { border-color: var(--red); animation: ssqBounce .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes ssqBounce { 0%{transform:scale(.88);opacity:.5} 100%{transform:scale(1);opacity:1} }

/* PUZZLE */
.ssq-puzzle-panel { background: var(--white); border-radius: 14px; padding: 16px; border: 1px solid var(--border); box-shadow: var(--shadow); margin-bottom: 10px; }
.ssq-puzzle-panel.ssq-ta { border-left: 4px solid var(--red); }
.ssq-puzzle-panel.ssq-tb { border-left: 4px solid var(--blue-d); }
.ssq-puzzle-lbl { font-size: .68rem; font-weight: 900; text-transform: uppercase; letter-spacing: 2.5px; margin-bottom: 10px; }
.ssq-puzzle-panel.ssq-ta .ssq-puzzle-lbl { color: var(--red); }
.ssq-puzzle-panel.ssq-tb .ssq-puzzle-lbl { color: var(--blue-d); }
.ssq-word-row { font-weight: 700; font-size: clamp(1rem,4vw,1.4rem); letter-spacing: 4px; margin-bottom: 12px; min-height: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 1px; line-height: 1.5; }
.ssq-ltr { display: inline-block; transition: color .2s; color: #ccd1de; }
.ssq-ltr.shown { color: var(--navy); }
.ssq-ltr.pop { animation: ssqPop .35s cubic-bezier(.34,1.56,.64,1) forwards; color: var(--red) !important; }
.ssq-ltr.done { color: var(--red); }
.ssq-ltr.space { color: transparent; letter-spacing: 0; margin: 0 3px; }
@keyframes ssqPop { 0%{transform:scale(0);opacity:0} 100%{transform:scale(1);opacity:1} }
.ssq-input-row { display: flex; gap: 8px; }

/* WINNER */
.ssq-winner-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* MSG */
.ssq-msg { border-radius: 10px; padding: 12px 16px; font-weight: 900; font-size: .95rem; text-align: center; margin-bottom: 10px; }
.ssq-msg.ok  { background: #e8f8e8; color: #1a7a1a; border: 1.5px solid #a8e0a8; }
.ssq-msg.bad { background: #fff0f0; color: var(--red); border: 1.5px solid #ffc0c0; }

/* CONFETTI */
#ssqConfetti { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 99999; }

/* ── SOLUTION OVERLAY ── */
.ssq-solution-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13,27,53,0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: ssqFadeIn .3s ease;
}
@keyframes ssqFadeIn { from{opacity:0} to{opacity:1} }

.ssq-solution-box {
  background: #fff;
  border-radius: 20px;
  padding: 28px 24px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(13,27,53,.35);
  text-align: center;
  animation: ssqSlideUp .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes ssqSlideUp { from{transform:translateY(30px);opacity:0} to{transform:translateY(0);opacity:1} }

.ssq-solution-title {
  font-size: 1.4rem;
  font-weight: 900;
  color: #0d1b35;
  margin-bottom: 4px;
}
.ssq-solution-subtitle {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #6b7a99;
  margin-bottom: 24px;
}

.ssq-solution-row {
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  text-align: left;
}
.ssq-solution-row.ssq-ta { background: #fff5f5; border: 2px solid rgba(232,0,26,.2); }
.ssq-solution-row.ssq-tb { background: #f0faff; border: 2px solid rgba(74,184,222,.3); }

.ssq-solution-team {
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 4px;
}
.ssq-solution-row.ssq-ta .ssq-solution-team { color: #e8001a; }
.ssq-solution-row.ssq-tb .ssq-solution-team { color: #4ab8de; }

.ssq-solution-word {
  font-size: clamp(1.3rem, 5vw, 1.7rem);
  font-weight: 900;
  color: #0d1b35;
  letter-spacing: 1px;
  word-break: break-word;
}

#ssqSolNextBtn { margin-top: 8px; }