/* ─────────────────────────────────────────────────────────────
   game.css — écran hôte (TV) et écran joueur (téléphone)
   ───────────────────────────────────────────────────────────── */

.opt-a { --opt-color: var(--opt-a); }
.opt-b { --opt-color: var(--opt-b); }
.opt-c { --opt-color: var(--opt-c); }
.opt-d { --opt-color: var(--opt-d); }

.screen {
  min-height: 100dvh; display: flex; flex-direction: column;
  padding: 20px clamp(16px, 4vw, 44px) 24px;
}
/* Chaque changement d'écran entre en fondu : la partie ne « saute » jamais. */
.screen-in { animation: screen-in .4s cubic-bezier(.2, .8, .2, 1); }
@keyframes screen-in { from { opacity: 0; transform: translateY(14px); } }

.host-bar, .play-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.host-actions { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 20px; }

/* ── Salon d'attente (écran hôte) ───────────────────────────── */
.lobby {
  flex: 1; display: grid; grid-template-columns: 1.1fr auto 1.2fr;
  gap: clamp(20px, 4vw, 56px); align-items: center;
}
.lobby-step {
  display: flex; align-items: center; gap: 10px;
  color: var(--text-dim); font-weight: 700; margin: 0 0 6px;
  font-size: clamp(.95rem, 1.4vw, 1.15rem);
}
.step-num {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--accent-soft); color: #a5d8ff; font-size: .85rem; font-weight: 900;
}
.lobby-url {
  font-size: clamp(1.2rem, 2.4vw, 2rem); font-weight: 800; margin: 0 0 22px;
  color: var(--text); word-break: break-all;
}
.lobby-code {
  font-size: clamp(3rem, 9vw, 6.5rem); font-weight: 900; letter-spacing: .1em;
  margin: 0 0 10px; line-height: 1;
  background: linear-gradient(120deg, #fff, var(--accent-2), #fff);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shine 5s linear infinite;
}
@keyframes shine { to { background-position: 250% 0; } }

.lobby-or .arrow { display: inline-block; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(6px); } }

.lobby-qr { display: grid; place-items: center; }
.lobby-qr img {
  width: clamp(200px, 22vw, 320px); height: auto;
  border-radius: var(--r-lg); padding: 12px; background: #fff;
  box-shadow: var(--shadow-lg), 0 0 0 0 #22d3ee55;
  animation: qr-halo 3s ease-in-out infinite;
}
@keyframes qr-halo {
  50% { box-shadow: var(--shadow-lg), 0 0 0 14px #22d3ee00; }
}

.lobby-players { align-self: stretch; display: flex; flex-direction: column; padding-top: 20px; }
.lobby-players h2 { font-size: clamp(1.3rem, 2.4vw, 2rem); }

.player-chips {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0;
  align-content: flex-start; overflow: auto; max-height: 46vh;
}
.chip {
  padding: 9px 15px; border-radius: 999px; font-weight: 800;
  font-size: clamp(.9rem, 1.3vw, 1.05rem);
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-left: 4px solid var(--accent); cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
}
.chip:hover { border-color: var(--ko); transform: translateY(-2px); }
.chip-new { animation: chip-in .45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes chip-in {
  from { transform: scale(.4) translateY(10px); opacity: 0; }
  60%  { transform: scale(1.12); }
}
.chip small { color: var(--text-faint); font-weight: 600; }
.chip.team-rouge { border-left-color: #ef4444; }
.chip.team-bleu  { border-left-color: #3b82f6; }
.chip.team-vert  { border-left-color: #10b981; }
.chip.team-jaune { border-left-color: #f59e0b; }

/* ── Compte à rebours d'ouverture ───────────────────────────── */
.countdown { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.countdown-label { color: var(--text-dim); font-size: clamp(1rem, 2vw, 1.5rem); font-weight: 700; margin: 0; }
.countdown-num {
  font-size: clamp(5rem, 22vw, 16rem); font-weight: 900; line-height: 1;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.countdown-num.tick { animation: cd-tick .6s cubic-bezier(.2, .9, .3, 1); }
@keyframes cd-tick {
  from { transform: scale(2.2); opacity: 0; filter: blur(8px); }
  60%  { transform: scale(.92); opacity: 1; filter: blur(0); }
  to   { transform: scale(1); }
}

/* ── Progression ────────────────────────────────────────────── */
.progress-dots { display: flex; gap: 5px; align-items: center; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--surface-3); transition: all .3s ease; }
.dot.done { background: var(--accent); }
.dot.now  { background: var(--accent-2); width: 22px; border-radius: 4px; box-shadow: 0 0 10px var(--accent-2); }

/* ── Chronomètre ────────────────────────────────────────────── */
.timer { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.timer-fill {
  height: 100%; width: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .12s linear;
}
.timer-fill.is-low { background: linear-gradient(90deg, #f59e0b, #ef4444); }
.timer-value {
  text-align: center; font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 900;
  margin: 6px 0 0; color: var(--text-dim);
}
.timer-value.is-urgent, .timer-chip.is-urgent {
  color: #fca5a5; animation: urgent .6s ease-in-out infinite;
}
@keyframes urgent { 50% { transform: scale(1.18); } }

/* ── Question (écran hôte) ──────────────────────────────────── */
.question-zone {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  gap: clamp(16px, 3vh, 34px);
}
.question-text {
  font-size: clamp(1.6rem, 4vw, 3.2rem); text-align: center; margin: 0;
  animation: screen-in .5s cubic-bezier(.2, .8, .2, 1);
}

.question-media { display: grid; place-items: center; }
.question-media img   { max-height: 34vh; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.question-media video { max-height: 40vh; border-radius: var(--r-lg); }
.question-media audio { width: min(560px, 90vw); }

.options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.option {
  display: flex; align-items: center; gap: 14px;
  padding: clamp(14px, 2vh, 24px) 20px; border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--opt-color) 16%, var(--surface));
  border: 2px solid var(--opt-color);
  font-size: clamp(1rem, 1.9vw, 1.5rem); font-weight: 700;
}
.option-letter {
  width: clamp(34px, 3.2vw, 46px); height: clamp(34px, 3.2vw, 46px); flex: none;
  display: grid; place-items: center; border-radius: 12px;
  background: var(--opt-color); color: #fff; font-weight: 900;
}
.free-hint { text-align: center; font-size: 1.2rem; color: var(--text-dim); }

/* Entrée décalée : les options se posent une par une. */
.stagger { animation: stagger-in .45s cubic-bezier(.2, .9, .3, 1) both; animation-delay: var(--delay, 0ms); }
@keyframes stagger-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }

/* ── Révélation et analyse ──────────────────────────────────── */
.reveal-zone { flex: 1; display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: start; }
.reveal-question {
  color: var(--text-dim); font-size: clamp(.95rem, 1.5vw, 1.15rem);
  margin: 0 0 6px; font-weight: 600;
}
.reveal-answer {
  font-size: clamp(1.5rem, 3.2vw, 2.6rem); color: #86efac; margin: 0 0 8px;
  animation: answer-pop .5s cubic-bezier(.2, 1.3, .4, 1);
}
@keyframes answer-pop {
  from { transform: scale(.82); opacity: 0; }
  60%  { transform: scale(1.04); }
}
.reveal-explain {
  font-size: 1.05rem; max-width: 65ch; color: var(--text-dim);
  padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--surface-2);
  border-radius: 0 var(--r) var(--r) 0; margin: 0 0 8px;
  animation: stagger-in .5s .25s both;
}
.reveal-board h3 { margin-bottom: 10px; }

.dist { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.dist-title { color: var(--text-dim); font-weight: 700; margin: 0; font-size: .95rem; }
.dist-row { display: flex; align-items: center; gap: 12px; }

.dist-letter {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 10px;
  background: var(--opt-color, var(--surface-3)); color: #fff; font-weight: 900;
  opacity: .4; transition: opacity .3s ease, box-shadow .3s ease;
}
.dist-letter.is-correct { opacity: 1; box-shadow: 0 0 0 3px #22c55e88; }

.dist-mark {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border-radius: 10px; font-weight: 900;
}
.dist-mark.ok { background: #22c55e22; color: #86efac; }
.dist-mark.ko { background: #ef444422; color: #fca5a5; }

/* La barre porte le texte de l'option : une lettre seule ne dit rien de la réponse. */
.dist-bar {
  flex: 1; min-width: 0; position: relative;
  height: 44px; background: var(--surface-2); border-radius: 12px; overflow: hidden;
  border: 1px solid var(--border);
}
.dist-fill {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: color-mix(in srgb, var(--opt-color, var(--accent)) 45%, transparent);
  border-radius: 12px;
  animation: grow .8s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: var(--delay, 0ms);
}
.dist-fill.is-correct { background: color-mix(in srgb, var(--ok) 45%, transparent); }
.dist-fill.is-wrong   { background: color-mix(in srgb, var(--ko) 32%, transparent); }
@keyframes grow { from { width: 0; } to { width: var(--w, 0%); } }

.dist-label {
  position: absolute; inset: 0; display: flex; align-items: center;
  padding: 0 48px 0 14px; font-weight: 700; font-size: clamp(.9rem, 1.4vw, 1.1rem);
}
.dist-verdict {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-weight: 900; font-size: 1.2rem; color: var(--text-dim);
}
.dist-row.is-right .dist-verdict { color: #86efac; }
.dist-row.is-right .dist-bar { border-color: #22c55e77; box-shadow: 0 0 18px #22c55e22; }
.dist-count { min-width: 76px; text-align: right; color: var(--text-dim); font-weight: 700; font-size: .9rem; }

.reveal-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.fact, .highlight {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: .92rem; color: var(--text-dim);
  animation: stagger-in .5s .4s both;
}
.fact strong, .highlight strong { color: var(--text); }
.fact-ico { font-size: 1.05rem; }

/* Classement : progression et séries */
.rank-delta {
  font-size: .72rem; font-weight: 900; padding: 2px 6px; border-radius: 6px;
}
.rank-delta.up   { background: #22c55e22; color: #86efac; }
.rank-delta.down { background: #ef444422; color: #fca5a5; }
.rank-streak { font-size: .78rem; font-weight: 800; color: #fcd34d; }

.team-row { position: relative; overflow: hidden; }
.team-bar {
  position: absolute; inset: 0 auto 0 0; width: var(--w, 0%);
  background: currentColor; opacity: .12;
  animation: grow .9s cubic-bezier(.2, .8, .2, 1) both;
}
.team-name, .team-row .spacer, .team-row strong, .team-row .faint { position: relative; }

/* ── Fin : suspense ─────────────────────────────────────────── */
.suspense {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; text-align: center;
}
.suspense-ico { font-size: clamp(3.5rem, 9vw, 6rem); animation: drum .5s ease-in-out infinite; }
@keyframes drum { 25% { transform: rotate(-9deg) scale(1.04); } 75% { transform: rotate(9deg) scale(1.04); } }
.suspense-title { font-size: clamp(1.6rem, 4vw, 3rem); margin: 0; }
.suspense-line { color: var(--text-dim); font-size: 1.1rem; min-height: 1.6em; margin: 0; }
.fade-in { animation: fade-in .45s ease; }
@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } }

.suspense-bar {
  width: min(420px, 80vw); height: 8px; border-radius: 999px;
  background: var(--surface-2); overflow: hidden;
}
.suspense-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 3.6s linear;
}

/* ── Podium ─────────────────────────────────────────────────── */
.end-reveal { display: flex; flex-direction: column; flex: 1; animation: screen-in .5s ease; }
.end-title { text-align: center; margin-bottom: 20px; }
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 18px; margin-bottom: 26px; }
.podium-col {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: clamp(140px, 18vw, 230px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, 1.3, .4, 1);
}
.podium-col.is-masked { opacity: 0; transform: translateY(40px) scale(.9); }
.podium-col.is-empty { display: none; }
.podium-medal { font-size: clamp(2rem, 4vw, 3.4rem); }
.podium-name  { font-weight: 800; font-size: clamp(1rem, 1.6vw, 1.3rem); max-width: 100%; }
.podium-score { color: var(--text-dim); font-weight: 700; }
.podium-block {
  width: 100%; border-radius: 16px 16px 0 0; display: grid; place-items: center;
  font-size: 1.6rem; font-weight: 900; color: #ffffff22;
  background: linear-gradient(180deg, var(--surface-3), var(--surface));
  border: 1px solid var(--border); border-bottom: none;
}
.pos-1 .podium-block {
  height: clamp(130px, 18vh, 200px);
  background: linear-gradient(180deg, #facc1544, var(--surface));
  border-color: #facc1566; box-shadow: 0 -10px 40px #facc1522;
}
.pos-2 .podium-block { height: clamp(95px, 13vh, 150px); }
.pos-3 .podium-block { height: clamp(70px, 10vh, 115px); }
.pos-1 .podium-medal { animation: medal-float 2.4s ease-in-out infinite; }
@keyframes medal-float { 50% { transform: translateY(-8px) rotate(-5deg); } }

.highlights { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 22px; }

.end-board {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 26px; align-items: start;
  max-width: 1000px; margin: 0 auto; width: 100%;
}

/* ── Écran joueur (téléphone) ───────────────────────────────── */
.play-body { overscroll-behavior: none; }
.play-screen { max-width: 620px; margin: 0 auto; width: 100%; gap: 14px; }
.play-screen .brand { justify-content: center; margin-bottom: 20px; }

.join-form { width: 100%; }
.join-form h1 { font-size: 1.5rem; text-align: center; margin-bottom: 18px; }

.waiting {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 10px;
}
.waiting h1 { font-size: 1.6rem; margin: 0; }
.lobby-nick { font-size: 1.25rem; font-weight: 800; margin: 0; color: var(--accent-2); }

/* Logo en orbite pendant l'attente */
.orbit { position: relative; width: 120px; height: 120px; display: grid; place-items: center; margin-bottom: 8px; }
.orbit::before, .orbit::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--accent); opacity: .25;
  animation: orbit-pulse 2.6s ease-out infinite;
}
.orbit::after { animation-delay: 1.3s; }
@keyframes orbit-pulse {
  from { transform: scale(.55); opacity: .45; }
  to   { transform: scale(1.15); opacity: 0; }
}
.orbit-logo { border-radius: 20px; animation: float 3s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-9px); } }

.dots-loader { display: flex; gap: 7px; margin-top: 6px; }
.dots-loader span {
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent-2);
  animation: dot-bounce 1.2s ease-in-out infinite;
}
.dots-loader span:nth-child(2) { animation-delay: .15s; }
.dots-loader span:nth-child(3) { animation-delay: .3s; }
@keyframes dot-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-9px); opacity: 1; } }

/* Coche animée à l'envoi d'une réponse */
.sent-check svg { overflow: visible; }
.sent-circle {
  stroke: var(--accent-2); stroke-width: 3;
  stroke-dasharray: 145; stroke-dashoffset: 145;
  animation: draw .6s cubic-bezier(.2, .8, .2, 1) forwards;
}
.sent-tick {
  stroke: var(--ok); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 48; stroke-dashoffset: 48;
  animation: draw .4s .45s cubic-bezier(.2, .8, .2, 1) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.play-question { font-size: 1.15rem; font-weight: 700; text-align: center; margin: 14px 0 6px; }

.play-answers {
  flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  align-content: stretch; min-height: 44vh;
}
.answer-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 12px; border-radius: var(--r-lg); cursor: pointer;
  background: color-mix(in srgb, var(--opt-color) 22%, var(--surface));
  border: 2px solid var(--opt-color); color: var(--text);
  font: inherit; font-weight: 700; font-size: 1rem; text-align: center;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.answer-btn:active { transform: scale(.96); }
.answer-btn.is-picked {
  background: var(--opt-color); color: #fff;
  box-shadow: 0 0 0 4px #ffffff33, 0 10px 30px color-mix(in srgb, var(--opt-color) 40%, transparent);
}
.answer-btn.is-sent { animation: sent-flash .4s ease; }
@keyframes sent-flash { 50% { transform: scale(1.06); filter: brightness(1.5); } }
.answer-btn-letter {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px;
  background: var(--opt-color); color: #fff; font-weight: 900; font-size: 1.2rem;
}
.answer-btn.is-picked .answer-btn-letter { background: #ffffff33; }
.answer-btn-text { line-height: 1.25; }

.free-form { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.input-lg { font-size: 1.15rem; padding: 16px; text-align: center; }
.flash { animation: flash .5s ease; }
@keyframes flash { 50% { border-color: var(--accent-2); box-shadow: 0 0 0 5px var(--accent-soft); } }

/* Résultat d'une question */
.result {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 8px;
}
.result-icon { font-size: 4.5rem; animation: result-pop .5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes result-pop { from { transform: scale(0) rotate(-25deg); } 70% { transform: scale(1.15); } }
.result h1 { font-size: 1.8rem; margin: 0; }
.result-gain { font-size: 2.6rem; font-weight: 900; margin: 0; }
.result.is-ok .result-gain { color: #86efac; }
.result.is-ko .result-gain { color: #fca5a5; }

.result-bonus { display: flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: .9rem; margin: 0; }
.bonus-chip {
  padding: 3px 10px; border-radius: 999px; font-weight: 800;
  background: #f59e0b22; color: #fcd34d;
  animation: bonus-in .5s .2s both cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes bonus-in { from { transform: scale(0) translateX(-10px); opacity: 0; } }

.result-rank { display: flex; align-items: baseline; gap: 10px; }
.rank-big { font-size: 1.6rem; font-weight: 900; }
.rank-move { font-size: .9rem; font-weight: 900; padding: 3px 9px; border-radius: 999px; }
.rank-move.up   { background: #22c55e22; color: #86efac; animation: rise-in .5s .3s both; }
.rank-move.down { background: #ef444422; color: #fca5a5; animation: rise-in .5s .3s both; }
@keyframes rise-in { from { transform: translateY(10px); opacity: 0; } }

.end-badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.pop-in { animation: result-pop .6s cubic-bezier(.2, 1.4, .4, 1); }

/* ── Scanner de QR code ─────────────────────────────────────── */
.scan-overlay { position: fixed; inset: 0; z-index: 120; background: #000; }
.scan-video { width: 100%; height: 100%; object-fit: cover; }
.scan-ui {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 22px;
  padding: 24px; background: radial-gradient(circle at center, transparent 34%, #000000b3 72%);
}
.scan-frame {
  width: min(64vw, 260px); aspect-ratio: 1; border-radius: 26px;
  border: 3px solid var(--accent-2); box-shadow: 0 0 0 100vmax #00000055;
  animation: scan-pulse 1.8s ease-in-out infinite;
}
.scan-hint { color: #fff; font-weight: 700; text-align: center; margin: 0; text-shadow: 0 2px 8px #000; }
@keyframes scan-pulse { 50% { border-color: #ffffff; transform: scale(1.02); } }

/* ── Pseudo aléatoire ───────────────────────────────────────── */
.nick-row { display: flex; gap: 8px; }
.nick-row .input { flex: 1; }
.btn-dice { flex: none; width: 48px; font-size: 1.2rem; padding: 0; }
.btn-dice:active { transform: rotate(180deg); }

.join-sep {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0; color: var(--text-faint); font-size: .8rem; font-weight: 700;
}
.join-sep::before, .join-sep::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ── Adaptatif ──────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .lobby { grid-template-columns: 1fr; text-align: center; gap: 20px; }
  .lobby-step { justify-content: center; }
  .lobby-qr img { width: min(240px, 60vw); }
  .player-chips { justify-content: center; max-height: 28vh; }
  .reveal-zone, .end-board { grid-template-columns: 1fr; }
  .options { grid-template-columns: 1fr; }
  .dist-count { min-width: 62px; font-size: .8rem; }
  .dist-label { padding-right: 36px; }
}
@media (max-width: 420px) {
  .play-answers { grid-template-columns: 1fr; min-height: 0; }
  .answer-btn { flex-direction: row; justify-content: flex-start; gap: 14px; text-align: left; padding: 14px; }
  .podium { gap: 8px; }
  .podium-col { width: clamp(90px, 30vw, 140px); }
}