:root {
  --bg: #04173f;
  --bg-alt: #0a2d76;
  --panel: rgba(10, 38, 98, 0.84);
  --panel-border: rgba(255, 255, 255, 0.12);
  --text: #f5f9ff;
  --muted: #d4e5ff;
  --primary: #8ec0ff;
  --primary-dark: #eef6ff;
  --accent: #6ea9ff;
  --accent-soft: rgba(153, 196, 255, 0.16);
  --warning: #9fcbff;
  --danger: #c2ddff;
  --quiz-a: #7ab3ff;
  --quiz-b: #3c75ea;
  --match-a: #8cc3ff;
  --match-b: #4a88f8;
  --drag-a: #9cc9ff;
  --drag-b: #5b94ff;
  --order-a: #b8d9ff;
  --order-b: #74abff;
  --truefalse-a: #d4e7ff;
  --truefalse-b: #89b8ff;
  --shadow: 0 18px 46px rgba(2, 12, 36, 0.28);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --font-ar: "Cairo", sans-serif;
  --font-fr: "Nunito", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  position: relative;
  background:
    radial-gradient(circle at 12% 20%, rgba(110, 169, 255, 0.2), transparent 28%),
    radial-gradient(circle at 90% 18%, rgba(53, 113, 235, 0.16), transparent 25%),
    radial-gradient(circle at 72% 82%, rgba(159, 203, 255, 0.14), transparent 26%),
    linear-gradient(180deg, var(--bg-alt), var(--bg));
  color: var(--text);
  font-family: var(--font-ar);
  overflow-x: hidden;
}

body.lang-fr {
  font-family: var(--font-fr);
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
  border: 0;
}

.page-bg {
  position: fixed;
  z-index: -1;
  border-radius: 999px;
  filter: blur(20px);
  opacity: 0.82;
}

.page-bg-a {
  width: 320px;
  height: 320px;
  top: -80px;
  left: -70px;
  background: rgba(110, 169, 255, 0.16);
}

.page-bg-b {
  width: 420px;
  height: 420px;
  right: -140px;
  bottom: 0;
  background: rgba(48, 97, 214, 0.18);
}

.confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 60;
}

.demo-overlay,
.demo-outro {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
}

.demo-overlay {
  display: grid;
  align-content: space-between;
  padding: 22px 20px 28px;
}

.demo-overlay-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.demo-mode-badge,
.demo-step-badge,
.demo-outro-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 34px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(16, 24, 56, 0.72);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 24px rgba(15, 21, 54, 0.2);
}

.demo-step-badge {
  background: rgba(115, 125, 255, 0.82);
}

.demo-overlay-copy {
  max-width: min(92vw, 520px);
  padding: 20px 22px;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(12, 18, 42, 0.82), rgba(35, 49, 116, 0.72));
  color: #fff;
  box-shadow: 0 18px 46px rgba(17, 22, 58, 0.26);
  backdrop-filter: blur(14px);
  animation: fade-up 0.35s ease both;
}

.demo-overlay-copy strong {
  display: block;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.1;
}

.demo-overlay-copy p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.86);
}

.demo-outro {
  display: grid;
  place-items: center;
  background: rgba(8, 12, 32, 0.22);
}

.demo-outro-card {
  width: min(88vw, 480px);
  padding: 28px 24px;
  border-radius: 32px;
  text-align: center;
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.2), transparent 40%),
    linear-gradient(135deg, rgba(104, 125, 255, 0.96), rgba(255, 108, 160, 0.92) 52%, rgba(68, 216, 182, 0.9));
  color: #fff;
  box-shadow: 0 28px 60px rgba(24, 31, 82, 0.28);
  animation: fade-up 0.5s ease both;
}

.demo-outro-card h2,
.demo-outro-card p,
.demo-outro-card strong {
  margin: 0;
}

.demo-outro-card h2 {
  margin-top: 12px;
  font-size: clamp(2rem, 6vw, 3rem);
}

.demo-outro-card p {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.92);
}

.demo-outro-card strong {
  display: block;
  margin-top: 16px;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
}

.confetti-piece {
  position: absolute;
  top: -14vh;
  width: 12px;
  height: 18px;
  border-radius: 4px;
  opacity: 0;
  animation: confetti-fall linear forwards;
}

.app-shell {
  width: min(1320px, calc(100% - 24px));
  margin: 16px auto 28px;
  display: grid;
  gap: 18px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 60px rgba(2, 12, 36, 0.36);
}

.panel {
  border-radius: var(--radius-xl);
  padding: 24px;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.95fr);
  grid-template-areas:
    "copy showcase"
    "actions stats";
  gap: 18px;
  align-items: stretch;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.34), transparent 32%),
    radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.22), transparent 20%),
    linear-gradient(135deg, rgba(16, 66, 176, 0.98), rgba(11, 45, 118, 0.96) 44%, rgba(42, 101, 219, 0.94)),
    #0f49ba;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  position: relative;
}

.hero::after {
  content: "";
  position: absolute;
  inset-inline-end: -50px;
  top: -60px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 62%);
  z-index: -1;
}

.hero-copy h1 {
  margin: 10px 0 8px;
  font-size: clamp(2rem, 5vw, 3.35rem);
  line-height: 1.03;
  text-shadow: 0 8px 24px rgba(34, 35, 90, 0.22);
}

.hero-copy {
  grid-area: copy;
}

.hero-description {
  margin: 0;
  max-width: 740px;
  color: rgba(241, 247, 255, 0.94);
  font-size: 1.02rem;
}

.trust-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.trust-pill {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
}

.hero-actions {
  grid-area: actions;
  display: grid;
  gap: 10px;
  align-content: start;
}

.demo-start-btn {
  background: linear-gradient(135deg, #ffffff, #d9ebff);
  color: #09307e;
  box-shadow: 0 14px 30px rgba(0, 11, 39, 0.22);
  animation: demo-pulse 1.8s ease infinite;
}

.hero-badge,
.eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.hero-badge {
  background: rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}

.eyebrow {
  margin: 0 0 8px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}

.hero-stats {
  grid-area: stats;
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  gap: 12px;
  align-content: start;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-mark {
  width: 68px;
  height: 68px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.38), transparent 38%),
    linear-gradient(135deg, rgba(255,255,255,0.32), rgba(255,255,255,0.08));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.18),
    0 18px 30px rgba(52, 44, 128, 0.22);
}

.brand-copy {
  display: grid;
  gap: 8px;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
  font-size: 0.82rem;
  font-weight: 800;
}

.hero-proof-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.hero-proof-card {
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
  display: grid;
  gap: 6px;
}

.hero-proof-card strong {
  font-size: 0.98rem;
}

.hero-proof-card span {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.9rem;
}

.hero-showcase {
  grid-area: showcase;
  display: grid;
  gap: 14px;
  align-content: center;
}

.showcase-card {
  padding: 18px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.25), rgba(255,255,255,0.08)),
    rgba(255,255,255,0.14);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.16),
    0 18px 34px rgba(55, 46, 128, 0.2);
  display: grid;
  gap: 8px;
}

.showcase-card strong {
  font-size: 1.4rem;
  line-height: 1.15;
}

.showcase-card small,
.showcase-label {
  color: rgba(255, 255, 255, 0.84);
}

.showcase-label {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.showcase-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.showcase-chip {
  min-height: 68px;
  padding: 14px 16px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #fff;
  box-shadow: 0 16px 28px rgba(56, 51, 126, 0.18);
}

.showcase-quiz {
  background: linear-gradient(135deg, #77afff, #3d76eb);
}

.showcase-match {
  background: linear-gradient(135deg, #8cc3ff, #4a88f8);
}

.showcase-drag {
  background: linear-gradient(135deg, #9dcaff, #5d96ff);
}

.showcase-order {
  background: linear-gradient(135deg, #b5d8ff, #73aaff);
}

.showcase-truefalse {
  background: linear-gradient(135deg, #d7eaff, #89b8ff);
  color: #0a347d;
}

.stat-pill {
  padding: 16px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.12);
  display: grid;
  gap: 6px;
}

.stat-pill span {
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.84);
}

.stat-pill strong {
  font-size: 1.45rem;
}

.landing {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr);
  gap: 18px;
  align-items: center;
  background:
    radial-gradient(circle at top right, rgba(169, 205, 255, 0.16), transparent 24%),
    radial-gradient(circle at bottom left, rgba(110, 169, 255, 0.18), transparent 24%),
    radial-gradient(circle at 55% 18%, rgba(124, 174, 255, 0.14), transparent 20%),
    linear-gradient(180deg, rgba(10, 38, 98, 0.96), rgba(6, 27, 75, 0.96));
  animation: fade-up 0.6s ease both;
}

.landing h2 {
  margin: 0 0 8px;
  font-size: clamp(1.7rem, 3vw, 2.35rem);
}

.landing-subtitle {
  margin: 0;
  color: rgba(234, 243, 255, 0.9);
}

.landing-highlight {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  padding: 16px;
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(142, 192, 255, 0.14), rgba(255, 255, 255, 0.06)),
    rgba(255,255,255,0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.landing-highlight strong {
  display: block;
  margin-bottom: 6px;
}

.landing-highlight p {
  margin: 0;
  color: rgba(234, 243, 255, 0.9);
}

.landing-highlight-mark {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #7db3ff, #3d76eb);
  box-shadow: 0 14px 28px rgba(2, 12, 36, 0.24);
}

.landing-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.benefit-card {
  padding: 16px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.06));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
  display: grid;
  gap: 8px;
  animation: fade-up 0.7s ease both;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.benefit-card:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.16),
    0 18px 28px rgba(2, 12, 36, 0.22);
}

.benefit-card:nth-child(1) {
  background: linear-gradient(145deg, rgba(134, 189, 255, 0.14), rgba(255,255,255,0.06));
}

.benefit-card:nth-child(2) {
  background: linear-gradient(145deg, rgba(110, 169, 255, 0.14), rgba(255,255,255,0.06));
}

.benefit-card:nth-child(3) {
  background: linear-gradient(145deg, rgba(184, 217, 255, 0.14), rgba(255,255,255,0.06));
}

.benefit-card span {
  color: rgba(234, 243, 255, 0.88);
}

.app-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(310px, 0.82fr);
  gap: 18px;
  align-items: start;
}

.sidebar-stack {
  display: grid;
  gap: 18px;
}

.panel-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.panel-heading h2 {
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 1.85rem);
}

.chip-row,
.cta-row,
.score-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.builder-form,
.field,
.examples-block,
.summary-box,
.recent-activities,
.picker-summary,
.result-details,
.landing-copy,
.demo-strip {
  display: grid;
  gap: 14px;
}

.hero-copy,
.landing-copy,
.game-card,
.benefit-card,
.example-btn,
.demo-option,
.summary-item,
.recent-item,
.video-demo-panel {
  min-width: 0;
}

.control-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.field span {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
}

select,
input,
textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

select:focus,
input:focus,
textarea:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow: 0 0 0 4px rgba(142, 192, 255, 0.14);
}

textarea {
  min-height: 210px;
  resize: vertical;
  line-height: 1.7;
}

.field-textarea textarea {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.07));
}

.demo-strip,
.examples-block {
  padding: 18px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
}

.demo-strip {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.4fr);
  align-items: center;
}

.demo-selector,
.examples-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.example-btn,
.demo-option,
.ghost-btn,
.secondary-btn,
.primary-btn {
  border-radius: 16px;
  min-height: 50px;
  padding: 12px 18px;
  font-weight: 800;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.hero-actions button,
.cta-row button,
.video-demo-actions button,
.start-game-btn {
  min-height: 54px;
}

.example-btn:hover,
.demo-option:hover,
.ghost-btn:hover,
.secondary-btn:hover,
.primary-btn:hover {
  transform: translateY(-1px);
}

.primary-btn {
  background: linear-gradient(135deg, #ffffff, #d9ebff);
  color: #0b347d;
  box-shadow: 0 12px 28px rgba(2, 12, 36, 0.22);
}

.secondary-btn {
  background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.08));
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.12);
}

.ghost-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.1);
}

.example-btn,
.demo-option {
  text-align: start;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.example-btn {
  min-height: 90px;
}

.demo-option.is-selected {
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 12px 24px rgba(2, 12, 36, 0.18);
}

.example-btn strong,
.demo-option strong,
.recent-item strong {
  display: block;
  overflow-wrap: anywhere;
}

.example-btn small,
.demo-option small,
.recent-item small,
.summary-box p,
.picker-summary p,
.summary-list span,
.recent-empty,
.empty-note,
.game-note,
.feedback-subtle {
  color: var(--muted);
}

.summary-box,
.recent-activities {
  min-height: 180px;
}

.summary-list {
  display: grid;
  gap: 12px;
}

.summary-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
}

.summary-item strong {
  font-size: 1.05rem;
}

.recent-item {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.recent-item button {
  justify-self: start;
}

.picker-screen,
.game-screen,
.result-screen {
  min-height: calc(100vh - 64px);
}

.picker-summary {
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.06));
  margin-bottom: 18px;
}

.video-demo-panel {
  padding: 18px;
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(142, 192, 255, 0.14), transparent 26%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.05));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}

.video-demo-copy {
  display: grid;
  gap: 8px;
}

.video-demo-copy p,
.video-export-note {
  margin: 0;
  color: var(--muted);
}

.video-demo-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.video-demo-actions button {
  min-width: 170px;
}

.game-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.game-cards-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.game-cards-five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.game-card {
  padding: 20px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: grid;
  gap: 14px;
  overflow: hidden;
  position: relative;
}

.game-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 7px;
}

.game-card.quiz-mode::before {
  background: linear-gradient(90deg, var(--quiz-a), var(--quiz-b));
}

.game-card.matching-mode::before {
  background: linear-gradient(90deg, var(--match-a), var(--match-b));
}

.game-card.drag-mode::before {
  background: linear-gradient(90deg, var(--drag-a), var(--drag-b));
}

.game-card.order-mode::before {
  background: linear-gradient(90deg, var(--order-a), var(--order-b));
}

.game-card.truefalse-mode::before {
  background: linear-gradient(90deg, var(--truefalse-a), var(--truefalse-b));
}

.game-card.quiz-mode {
  background: linear-gradient(180deg, rgba(122,179,255,0.14), rgba(255,255,255,0.06));
}

.game-card.matching-mode {
  background: linear-gradient(180deg, rgba(140,195,255,0.14), rgba(255,255,255,0.06));
}

.game-card.drag-mode {
  background: linear-gradient(180deg, rgba(156,201,255,0.14), rgba(255,255,255,0.06));
}

.game-card.order-mode {
  background: linear-gradient(180deg, rgba(184,217,255,0.16), rgba(255,255,255,0.06));
}

.game-card.truefalse-mode {
  background: linear-gradient(180deg, rgba(212,231,255,0.16), rgba(255,255,255,0.06));
}

.game-card h3,
.game-card p {
  margin: 0;
}

.game-icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #7ab3ff, #3c75ea);
  box-shadow: 0 14px 28px rgba(2, 12, 36, 0.22);
}

.game-heading {
  align-items: center;
}

.score-strip span {
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.game-feedback {
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 14px;
  box-shadow: 0 10px 24px rgba(2, 12, 36, 0.12);
}

.game-feedback.success {
  background: rgba(223, 248, 243, 0.92);
  border-color: rgba(22, 184, 154, 0.28);
}

.game-feedback.error {
  background: rgba(255, 238, 241, 0.92);
  border-color: rgba(239, 95, 120, 0.28);
}

.game-body {
  min-height: calc(100vh - 300px);
  display: grid;
  align-content: start;
  gap: 18px;
  overflow-x: clip;
}

.question-card,
.matching-board,
.drag-board,
.drop-zone,
.quiz-option,
.match-item,
.draggable-chip,
.order-source,
.order-answer,
.order-slot,
.order-chip {
  border-radius: var(--radius-lg);
}

.question-title,
.question-help,
.game-note,
.quiz-option,
.match-item,
.draggable-chip,
.order-chip,
.summary-item strong,
.benefit-card span,
.video-demo-copy p {
  overflow-wrap: anywhere;
}

.question-card {
  padding: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.06));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

.question-title {
  margin: 0;
  font-size: clamp(1.45rem, 4vw, 2rem);
}

.question-help {
  margin: 8px 0 0;
  color: var(--muted);
}

.quiz-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.quiz-option,
.match-item {
  text-align: start;
  padding: 18px;
  min-height: 86px;
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.08));
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 14px 30px rgba(2, 12, 36, 0.12);
}

.quiz-option:hover,
.match-item:hover,
.draggable-chip:hover,
.order-chip:hover,
.order-slot:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 16px 28px rgba(90, 108, 255, 0.14);
}

.quiz-option.correct,
.match-item.correct,
.drop-zone.correct,
.order-slot.correct {
  border-color: rgba(22, 184, 154, 0.55);
  background: rgba(223, 248, 243, 0.9);
}

.quiz-option.wrong,
.match-item.wrong,
.drop-zone.wrong,
.order-slot.wrong {
  border-color: rgba(239, 95, 120, 0.45);
  background: rgba(255, 238, 241, 0.92);
}

.matching-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.match-column {
  display: grid;
  gap: 12px;
}

.match-item.active {
  border-color: rgba(255, 255, 255, 0.36);
  background: rgba(142, 192, 255, 0.16);
}

.drag-board {
  display: grid;
  gap: 18px;
}

.drag-source,
.order-source,
.order-answer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.05));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

.draggable-chip,
.order-chip {
  padding: 12px 16px;
  min-width: 130px;
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.08));
  border: 2px solid rgba(255, 255, 255, 0.1);
  font-weight: 700;
  text-align: center;
  user-select: none;
  touch-action: none;
  box-shadow: 0 10px 24px rgba(2, 12, 36, 0.12);
}

.draggable-chip.dragging,
.order-chip.dragging {
  opacity: 0.45;
}

.draggable-chip.is-selected,
.order-chip.is-selected {
  border-color: rgba(47, 111, 237, 0.56);
  box-shadow: 0 0 0 4px rgba(47, 111, 237, 0.12);
  transform: translateY(-1px);
}

.drop-zones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.drop-zone {
  min-height: 180px;
  padding: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.06));
  border: 2px dashed rgba(255, 255, 255, 0.18);
  display: grid;
  align-content: start;
  gap: 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

.drop-zone.is-over {
  border-color: rgba(22, 184, 154, 0.56);
  background: rgba(223, 248, 243, 0.9);
}

.drop-zone-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.drop-zone h3,
.drop-zone p {
  margin: 0;
}

.drop-zone-target {
  font-size: 0.9rem;
  color: var(--muted);
}

.drop-zone-body {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.drop-zone .draggable-chip {
  min-width: auto;
}

.order-board {
  display: grid;
  gap: 16px;
}

.order-answer {
  min-height: 110px;
}

.order-slot {
  min-width: 120px;
  min-height: 62px;
  padding: 12px 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.08));
  border: 2px dashed rgba(255, 255, 255, 0.16);
  font-weight: 700;
}

.result-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

.result-screen {
  background:
    radial-gradient(circle at top right, rgba(110, 169, 255, 0.18), transparent 26%),
    radial-gradient(circle at bottom left, rgba(142, 192, 255, 0.14), transparent 22%),
    linear-gradient(180deg, rgba(10,38,98,0.96), rgba(6,27,75,0.96));
}

.result-score-ring {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at center, #0a2d76 45%, transparent 46%),
    conic-gradient(#d4e7ff 0deg, #7ab3ff 140deg, #3c75ea 260deg, rgba(255,255,255,0.14) 260deg);
  color: #ffffff;
  border-radius: 999px;
  box-shadow: 0 24px 45px rgba(96, 94, 205, 0.18);
}

.result-score-ring strong {
  font-size: 2.65rem;
}

.result-score-ring span {
  color: var(--muted);
  font-weight: 700;
}

.result-score-ring small {
  color: #dcecff;
  font-weight: 800;
}

.result-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 10px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.08));
  color: #ffffff;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.result-signoff {
  margin-top: 12px;
  padding: 16px 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.result-product-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
}

.prodevapp-logo {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.38), transparent 32%),
    linear-gradient(135deg, #7ab3ff, #3c75ea 55%, #9ecbff);
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.04em;
  box-shadow: 0 18px 30px rgba(88, 98, 196, 0.18);
}

.result-product-copy strong,
.result-powered-by strong {
  display: block;
}

.result-product-copy p {
  margin: 4px 0 0;
  color: var(--muted);
}

.result-powered-by {
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.result-powered-by span {
  display: block;
  color: var(--muted);
  font-size: 0.84rem;
}

.result-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.metric-box {
  padding: 18px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.08);
  display: grid;
  gap: 6px;
}

.metric-box strong {
  font-size: 1.85rem;
}

.result-actions .ghost-btn,
.result-actions .secondary-btn,
.result-actions .primary-btn {
  min-width: 180px;
}

.hidden {
  display: none !important;
}

.toast {
  position: fixed;
  inset-inline-start: 20px;
  bottom: 20px;
  z-index: 50;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(4, 23, 63, 0.96);
  color: #fff;
  box-shadow: var(--shadow);
}

.demo-focus-target,
.demo-tap-target {
  position: relative;
  z-index: 75 !important;
  box-shadow:
    0 0 0 4px rgba(255,255,255,0.66),
    0 0 0 10px rgba(114, 130, 255, 0.22),
    0 24px 48px rgba(81, 90, 195, 0.24) !important;
  animation: demo-pulse 1.15s ease infinite;
}

.demo-tap-target {
  transform: scale(1.03);
}

body.demo-video-mode {
  background:
    radial-gradient(circle at 50% 0%, rgba(122, 179, 255, 0.18), transparent 24%),
    radial-gradient(circle at 100% 100%, rgba(60, 117, 234, 0.16), transparent 22%),
    linear-gradient(180deg, #08255e, #04173f);
}

body.demo-video-mode .app-shell {
  width: min(430px, calc(100vw - 12px));
  margin: 8px auto 18px;
  gap: 14px;
}

body.demo-video-mode .landing,
body.demo-video-mode .sidebar-stack {
  display: none;
}

body.demo-video-mode .app-grid,
body.demo-video-mode .hero,
body.demo-video-mode .result-layout {
  grid-template-columns: 1fr;
}

body.demo-video-mode .hero {
  grid-template-areas:
    "copy"
    "actions"
    "stats"
    "showcase";
  min-height: calc(100vh - 18px);
}

body.demo-video-mode .hero-proof-grid,
body.demo-video-mode .hero-stats,
body.demo-video-mode .showcase-stack,
body.demo-video-mode .game-cards,
body.demo-video-mode .game-cards-four,
body.demo-video-mode .game-cards-five,
body.demo-video-mode .quiz-options,
body.demo-video-mode .matching-board,
body.demo-video-mode .drop-zones,
body.demo-video-mode .result-metrics {
  grid-template-columns: 1fr;
}

body.demo-video-mode .game-screen,
body.demo-video-mode .picker-screen,
body.demo-video-mode .result-screen,
body.demo-video-mode .builder-screen {
  min-height: calc(100vh - 18px);
}

body.demo-video-mode .game-body {
  min-height: auto;
  gap: 14px;
}

body.demo-video-mode .hero-actions button,
body.demo-video-mode .cta-row button,
body.demo-video-mode .chip-row button,
body.demo-video-mode .result-actions button {
  width: 100%;
}

body.demo-video-mode .result-score-ring {
  width: min(72vw, 260px);
  margin-inline: auto;
}

body.classroom-mode .app-shell {
  width: min(100vw - 12px, 1460px);
  margin: 6px auto 14px;
}

body.classroom-mode .panel {
  padding: 18px;
}

body.classroom-mode .game-screen,
body.classroom-mode .picker-screen,
body.classroom-mode .result-screen {
  min-height: calc(100vh - 14px);
}

body.classroom-mode .game-body {
  min-height: calc(100vh - 240px);
  gap: 14px;
}

body.classroom-mode .question-title {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
}

body.classroom-mode .quiz-option,
body.classroom-mode .match-item,
body.classroom-mode .draggable-chip,
body.classroom-mode .order-chip,
body.classroom-mode .order-slot {
  min-height: 92px;
  font-size: 1.22rem;
}

body[data-game-mode="quiz"] .game-screen,
body[data-game-mode="quiz-result"] .result-screen {
  background: linear-gradient(180deg, rgba(124,140,255,0.1), rgba(177,141,255,0.06) 42%, rgba(255,255,255,0.95));
}

body[data-game-mode="matching"] .game-screen,
body[data-game-mode="matching-result"] .result-screen {
  background: linear-gradient(180deg, rgba(56,211,159,0.11), rgba(120,224,118,0.06) 42%, rgba(255,255,255,0.95));
}

body[data-game-mode="drag"] .game-screen,
body[data-game-mode="drag-result"] .result-screen {
  background: linear-gradient(180deg, rgba(255,178,92,0.12), rgba(255,210,122,0.07) 42%, rgba(255,255,255,0.95));
}

body[data-game-mode="order"] .game-screen,
body[data-game-mode="order-result"] .result-screen {
  background: linear-gradient(180deg, rgba(255,136,177,0.12), rgba(255,154,123,0.07) 42%, rgba(255,255,255,0.95));
}

body[data-game-mode="quiz"] .question-card,
body[data-game-mode="quiz"] .game-feedback {
  border-color: rgba(107,124,255,0.2);
}

body[data-game-mode="matching"] .question-card,
body[data-game-mode="matching"] .game-feedback {
  border-color: rgba(17,191,143,0.22);
}

body[data-game-mode="drag"] .question-card,
body[data-game-mode="drag"] .game-feedback {
  border-color: rgba(255,154,61,0.22);
}

body[data-game-mode="order"] .question-card,
body[data-game-mode="order"] .game-feedback {
  border-color: rgba(255,95,141,0.22);
}

body.classroom-mode .score-strip span,
body.classroom-mode .game-actions button {
  font-size: 1.08rem;
  min-height: 56px;
}

.print-sheet {
  display: none;
}

@media (max-width: 1180px) {
  .hero,
  .landing,
  .app-grid,
  .result-layout {
    grid-template-columns: 1fr;
  }

  .hero {
    grid-template-areas:
      "copy"
      "showcase"
      "actions"
      "stats";
  }

  .hero-stats,
  .landing-benefits,
  .game-cards-four,
  .game-cards-five {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .app-shell {
    width: min(100% - 16px, 1320px);
  }

  .panel {
    padding: 18px;
    border-radius: 22px;
  }

  .control-grid,
  .quiz-options,
  .matching-board,
  .result-metrics,
  .demo-strip,
  .landing-benefits {
    grid-template-columns: 1fr;
  }

  .hero-proof-grid,
  .showcase-stack {
    grid-template-columns: 1fr;
  }

  .game-cards,
  .game-cards-four,
  .game-cards-five {
    grid-template-columns: 1fr;
  }

  .game-body,
  body.classroom-mode .game-body {
    min-height: auto;
  }

  .picker-screen,
  .game-screen,
  .result-screen,
  body.classroom-mode .picker-screen,
  body.classroom-mode .game-screen,
  body.classroom-mode .result-screen {
    min-height: auto;
  }
}

@media (max-width: 560px) {
  .hero-copy h1 {
    font-size: 2rem;
  }

  .trust-pills {
    display: grid;
    grid-template-columns: 1fr;
  }

  .chip-row,
  .cta-row,
  .score-strip,
  .hero-actions {
    width: 100%;
  }

  .chip-row button,
  .cta-row button,
  .hero-actions button,
  .start-game-btn,
  .example-btn,
  .demo-option,
  .result-actions button,
  .video-demo-actions button {
    width: 100%;
  }

  .hero-stats,
  .landing-benefits,
  .drop-zones {
    grid-template-columns: 1fr;
  }
}

@media print {
  body * {
    visibility: hidden !important;
  }

  .print-sheet,
  .print-sheet * {
    visibility: visible !important;
  }

  .print-sheet {
    display: block !important;
    position: absolute;
    inset: 0;
    padding: 20px 24px;
    background: #fff;
    color: #000;
    font-family: Arial, sans-serif;
    direction: rtl;
  }

  .print-sheet.lang-fr {
    direction: ltr;
  }

  .print-head {
    margin-bottom: 18px;
    border-bottom: 2px solid #000;
    padding-bottom: 10px;
  }

  .print-head h1,
  .print-head h2,
  .print-head p,
  .print-section h3,
  .print-section p {
    margin: 0 0 8px;
  }

  .print-meta {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
  }

  .print-grid {
    display: grid;
    gap: 12px;
  }

  .print-section {
    margin-bottom: 16px;
    page-break-inside: avoid;
  }

  .print-list,
  .print-list ol,
  .print-list ul {
    margin: 8px 0 0;
    padding-inline-start: 20px;
  }

  .print-answer {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px dashed #000;
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes demo-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
}

@keyframes confetti-fall {
  0% {
    opacity: 0;
    transform: translateY(-12vh) rotate(0deg);
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 0.95;
    transform: translateY(110vh) rotate(520deg);
  }
}