:root {
  --cream: #f7f4ef;
  --paper: rgba(255, 255, 255, .90);
  --navy: #172c44;
  --ink: #10263f;
  --muted: #5e6d7c;
  --orange: #ff4f1f;
  --orange2: #ff6b2c;
  --blue: #245b9d;
  --teal: #008e97;
  --purple: #65408b;
  --green: #178b6c;
  --shadow: 0 18px 50px rgba(16, 38, 63, .12);
  --radius: 20px;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
html.start-scroll-lock, body.start-scroll-lock { overflow: hidden !important; height: 100vh !important; max-height: 100vh !important; }
body.start-scroll-lock { position: fixed !important; width: 100% !important; left: 0; right: 0; top: 0; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--cream) url('assets/genesys-wave-background.png') center/cover fixed no-repeat;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,.38);
  pointer-events: none;
  z-index: -1;
}
.bg-cover-badge {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 360px;
  height: 90px;
  background: linear-gradient(90deg, rgba(247,244,239,0), var(--cream) 38%);
  z-index: 0;
  pointer-events: none;
}
.event-chip {
  position: fixed;
  right: 28px;
  bottom: 22px;
  z-index: 3;
  padding: 10px 17px;
  border: 1px solid rgba(23,44,68,.15);
  background: rgba(255,255,255,.9);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(23,44,68,.12);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--navy);
}
.event-chip span { color: var(--orange); padding: 0 4px; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.game-shell {
  width: min(1560px, calc(100% - 32px));
  margin: 16px auto 90px;
  position: relative;
  z-index: 2;
}
.topbar {
  display: grid;
  grid-template-columns: 250px 1fr 48px;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--navy);
}
.genesys-full-logo { display:block; width:160px; height:auto; }
.stats {
  min-height: 88px;
  display: grid;
  grid-template-columns: 1.35fr .9fr;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(16,38,63,.08);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
  backdrop-filter: blur(14px);
}
.stat {
  position: relative;
  padding: 16px 22px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  border-left: 1px solid rgba(16,38,63,.08);
}
.stat:first-child { border-left: 0; }
.stat-label { width: 100%; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--muted); }
.stat strong { font-size: 32px; line-height: 1; color: var(--orange); letter-spacing: -.03em; }
.stat-sub { font-size: 13px; color: var(--muted); }
.timer-track { width: 100%; height: 5px; background: #e8e5df; border-radius: 99px; overflow: hidden; margin-top: 2px; }
.timer-track span { display: block; width: 100%; height: 100%; background: var(--orange); transition: width .3s linear; }
.icon-button {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(16,38,63,.12);
  background: rgba(255,255,255,.88); color: var(--navy); font-size: 19px; cursor: pointer; box-shadow: 0 8px 24px rgba(23,44,68,.1);
}
.content-grid {
  display: grid;
  grid-template-columns: minmax(820px, 1fr) 260px;
  gap: 14px;
  align-items: stretch;
}
.glass-card {
  background: var(--paper);
  border: 1px solid rgba(16,38,63,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}
.intro-panel { padding: 24px 20px; min-width: 0; }
.eyebrow { color: var(--orange); font-weight: 900; font-size: 11px; letter-spacing: .13em; margin: 0 0 10px; }
.intro-panel h1 { margin: 0; max-width: 100%; font-size: clamp(30px, 2.65vw, 43px); line-height: .88; letter-spacing: -.045em; color: var(--orange); overflow-wrap: normal; }
.intro-panel h1 span { color: var(--navy); }
.intro-copy { font-size: 15px; line-height: 1.5; margin: 22px 0; color: #25394e; }
.rule { display: flex; align-items: flex-start; gap: 11px; padding: 13px 0; border-top: 1px solid rgba(16,38,63,.08); }
.rule-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border: 1px solid rgba(255,79,31,.25); color: var(--orange); border-radius: 50%; font-weight: 900; }
.rule b { display: block; font-size: 12px; letter-spacing: .04em; }
.rule small { display: block; margin-top: 4px; font-size: 12px; line-height: 1.35; color: var(--muted); }
.streak-box { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px; background: rgba(255,79,31,.07); border-radius: 14px; }
.streak-box > span { font-size: 25px; }
.streak-box b, .streak-box small { display:block; }
.streak-box b { color: var(--orange); font-size: 13px; text-transform: uppercase; }
.streak-box small { margin-top: 3px; font-size: 11px; color: var(--muted); }
.play-panel { min-width: 0; padding: 16px 16px 10px; position: relative; overflow: hidden; }
.board-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding: 2px 6px 12px; }
.board-kicker { font-size: 10px; font-weight: 900; letter-spacing: .12em; color: var(--orange); }
.board-heading h2 { margin: 2px 0 0; font-size: 23px; letter-spacing: -.02em; }
.round-meta { display:flex; align-items:center; gap:12px; }
.hint-counter { min-width:76px; padding:7px 10px; border:1px solid rgba(255,79,31,.17); border-radius:12px; background:rgba(255,79,31,.055); text-align:center; }
.hint-counter span, .hint-counter b { display:block; }
.hint-counter span { font-size:8px; font-weight:900; letter-spacing:.08em; color:var(--orange); }
.hint-counter b { margin-top:3px; font-size:11px; color:var(--navy); }
.hint-counter.empty { opacity:.48; filter:grayscale(.4); }
.streak-counter { min-width:72px; padding:7px 10px; border:1px solid rgba(255,79,31,.14); border-radius:12px; background:rgba(255,79,31,.04); text-align:center; }
.streak-counter span, .streak-counter b { display:block; }
.streak-counter span { font-size:8px; font-weight:900; letter-spacing:.08em; color:var(--orange); }
.streak-counter b { margin-top:3px; font-size:11px; color:var(--navy); text-transform:uppercase; }
.round-info { text-align: right; }
.round-info span, .round-info b { display: block; }
.round-info span { font-size: 11px; color: var(--muted); }
.round-info b { margin-top: 4px; font-size: 12px; }
.doors {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  min-height: 370px;
  align-items: end;
}
.door {
  --door: var(--orange);
  position: relative;
  border: 0;
  background: transparent;
  border-radius: 12px;
  padding: 6px 4px 7px;
  color: var(--ink);
  cursor: default;
  min-width: 0;
  min-height: 370px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.door-work-automation { --door: #65408b; }
.door-agentic { --door: #ff4f1f; }
.door-copilot { --door: #8b4dc3; }
.door-process { --door: #008e97; }
.door-predictive { --door: #245b9d; }
.door-omnichannel { --door: #d54f73; }
.door-top { min-height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--door); }
.door-icon { width:31px; height:31px; margin-bottom:5px; display:grid; place-items:center; border-radius:9px; background:color-mix(in srgb, var(--door) 10%, white); border:1px solid color-mix(in srgb, var(--door) 20%, transparent); line-height:1; }
.door-icon img { width:19px; height:19px; object-fit:contain; }
.door-icon-fallback { display:none; font-size:19px; font-weight:900; color:var(--door); }
.door-face-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:14px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.2); }
.door-face-icon img { width:29px; height:29px; object-fit:contain; filter:brightness(0) invert(1); }
.door-face-icon .door-icon-fallback { color:#fff; font-size:27px; }
.door img.icon-error { display:none; }
.door img.icon-error + .door-icon-fallback { display:inline-flex; align-items:center; justify-content:center; }
.door b { font-size: 10px; line-height: 1.05; letter-spacing: .015em; }
.door > small { display: block; min-height: 28px; font-size: 8.2px; line-height: 1.25; color: var(--muted); }
.door-shape {
  position: absolute;
  left: 4px; right: 4px; bottom: 7px; height: 285px;
  background: linear-gradient(140deg, color-mix(in srgb, var(--door) 88%, white 12%), color-mix(in srgb, var(--door) 78%, black 22%));
  border-radius: 8px 8px 3px 3px;
  box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--door) 75%, white 25%), inset 0 0 24px rgba(0,0,0,.15), 0 12px 20px color-mix(in srgb, var(--door) 25%, transparent);
  color: #fff;
  display: grid;
  place-items: center;
}
.door-shape::before {
  content: ""; position: absolute; inset: 16px 14px 0; border: 2px solid rgba(255,255,255,.22); border-bottom: 0;
}
.door-face-content {
  position: relative;
  z-index: 1;
  width: calc(100% - 26px);
  padding: 12px 8px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
  text-shadow: 0 1px 5px rgba(0,0,0,.18);
}
.door-shape strong {
  font-size: 11.5px;
  line-height: 1.08;
  letter-spacing: .025em;
  color: #fff;
}
.door-shape small {
  display: block;
  font-size: 9px;
  line-height: 1.15;
  font-weight: 700;
  color: rgba(255,255,255,.82);
}
.door-shape i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff; right: 12px; top: 126px; box-shadow: 0 0 0 3px rgba(255,255,255,.14); }
.door.door-hover { transform: translateY(-5px) scale(1.02); background: transparent; box-shadow: 0 14px 30px color-mix(in srgb, var(--door) 20%, transparent); }
.door.correct-flash { animation: correctDoor .55s ease; }
.door.wrong-flash { animation: wrongDoor .45s ease; }
@keyframes correctDoor { 50% { transform: translateY(-6px) scale(1.035); box-shadow: 0 0 0 5px rgba(23,139,108,.25); } }
@keyframes wrongDoor { 25%,75% { transform: translateX(-5px); } 50% { transform: translateX(5px); box-shadow: 0 0 0 4px rgba(222,65,48,.2); } }
.customer-stage {
  position: relative;
  min-height: 300px;
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(5, minmax(120px,1fr));
  gap: 5px;
  align-items: end;
  padding: 3px 1px 8px;
}
.customer {
  --emotion-color: var(--orange);
  position: relative;
  min-width: 0;
  text-align: center;
  touch-action: none;
  cursor: grab;
  user-select: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 2;
}
.customer.customer-arriving { pointer-events:none; cursor:default; }
.customer.customer-arriving .speech,
.customer.customer-arriving .person-wrap,
.customer.customer-arriving .persona-name { visibility:hidden; opacity:0; }
.customer.customer-arrived .person-wrap { animation: arrivalSettle .52s cubic-bezier(.18,.9,.32,1.2) both; }
.customer.customer-arrived .speech { animation: speechArrival .48s .14s cubic-bezier(.18,.9,.32,1.18) both; }
.customer.customer-arrived .emotion { animation: emotionArrival .75s .28s cubic-bezier(.2,.9,.25,1.15) both; }
@keyframes arrivalSettle { 0% { transform:translateY(5px) scale(.96); } 55% { transform:translateY(-4px) scale(1.025); } 100% { transform:none; } }
@keyframes speechArrival { from { opacity:0; transform:translateY(10px) scale(.86); } to { opacity:1; transform:none; } }
@keyframes emotionArrival { 0% { transform:scale(.55) rotate(-8deg); } 45% { transform:scale(1.16) rotate(3deg); } 100% { transform:scale(1); } }
.customer:focus-visible { outline: 3px solid rgba(36,91,157,.35); outline-offset: 4px; border-radius: 12px; }
.customer.dragging { position: fixed !important; margin: 0; cursor: grabbing; z-index: 1000; filter: drop-shadow(0 18px 18px rgba(16,38,63,.25)); transition: none; }
.customer.resolved { opacity: 0; transform: translateY(-40px) scale(.7); pointer-events: none; }
.customer.wrong { animation: customerShake .4s ease; }
@keyframes customerShake { 25%,75% { transform: translateX(-8px); } 50% { transform: translateX(8px); } }
.speech {
  position: relative;
  width: min(150px, 94%);
  min-height: 126px;
  margin: 0 auto -10px;
  padding: 17px 9px 10px;
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(16,38,63,.1);
  border-top: 3px solid var(--emotion-color);
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(16,38,63,.1), 0 0 0 1px color-mix(in srgb, var(--emotion-color) 8%, transparent);
  z-index: 3;
}
.speech::after { content:""; position:absolute; bottom:-7px; left:50%; width:14px; height:14px; background:white; border-right:1px solid rgba(16,38,63,.1); border-bottom:1px solid rgba(16,38,63,.1); transform:translateX(-50%) rotate(45deg); }
.emotion {
  position:absolute;
  min-width:70px;
  height:29px;
  right:-7px;
  top:-11px;
  padding:0 8px 0 5px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  background:#fff;
  border:2px solid var(--emotion-color);
  box-shadow:0 5px 14px color-mix(in srgb, var(--emotion-color) 20%, transparent);
  color:var(--emotion-color);
  white-space:nowrap;
}
.emotion span { font-size:15px; line-height:1; }
.emotion b { font-size:7px; line-height:1; letter-spacing:.055em; }
.emotion-angry .speech, .emotion-frustrated .speech { box-shadow:0 9px 24px rgba(16,38,63,.11), 0 0 0 2px color-mix(in srgb, var(--emotion-color) 8%, transparent); }
.emotion-angry .person-art, .emotion-frustrated .person-art { filter:drop-shadow(0 11px 10px rgba(16,38,63,.16)) drop-shadow(0 0 6px color-mix(in srgb, var(--emotion-color) 18%, transparent)); }
.issue { margin: 4px 0 9px; font-size: 11px; line-height: 1.28; min-height: 45px; display:grid; place-items:center; }
.urgency { font-size: 9px; font-weight: 900; letter-spacing: .035em; text-transform: uppercase; color: var(--orange); }
.urgency.medium { color: var(--blue); }
.urgency.low { color: var(--purple); }

.customer-hint {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  margin-top:7px;
  padding:5px 8px;
  border:1px solid rgba(255,79,31,.22);
  border-radius:999px;
  background:rgba(255,79,31,.06);
  color:var(--orange);
  font:inherit;
  font-size:8px;
  font-weight:900;
  letter-spacing:.055em;
  cursor:pointer;
  touch-action:manipulation;
  position:relative;
  z-index:6;
}
.customer-hint small { font-size:7px; color:var(--muted); font-weight:800; }
.customer-hint:hover { background:rgba(255,79,31,.12); border-color:rgba(255,79,31,.38); }
.customer-hint:focus-visible { outline:2px solid rgba(255,79,31,.35); outline-offset:2px; }
.hint-reveal {
  margin-top:7px;
  padding:7px 8px;
  border-radius:9px;
  background:linear-gradient(135deg, rgba(255,238,172,.58), rgba(255,248,226,.92));
  border:1px solid rgba(211,153,0,.2);
  color:#5f4b10;
  text-align:left;
  font-size:8.5px;
  line-height:1.28;
}
.hint-reveal b { display:block; margin-bottom:2px; font-size:7px; letter-spacing:.09em; color:#a66b00; }
.hint-reveal span { display:block; }
.hint-reveal.visible { animation: hintPop .22s ease-out; }
@keyframes hintPop { from { opacity:0; transform:translateY(4px) scale(.97); } to { opacity:1; transform:none; } }

.person-wrap {
  position: relative;
  width: 116px;
  height: 205px;
  margin: 0 auto;
  perspective: 700px;
}
.person-art {
  width: 116px;
  height: 205px;
  overflow: visible;
  filter: drop-shadow(0 11px 10px rgba(16,38,63,.16));
  transform-origin: 50% 85%;
  transform: rotateY(-2deg) rotateX(1deg);
  transition: transform .18s ease, filter .18s ease;
}
.customer:hover .person-art {
  transform: translateY(-4px) rotateY(6deg) rotateX(1deg) scale(1.025);
  filter: drop-shadow(0 15px 13px rgba(16,38,63,.2));
}
.customer.dragging .person-art {
  transform: rotateY(4deg) rotateX(-2deg) scale(1.035);
  filter: drop-shadow(0 18px 14px rgba(16,38,63,.24));
}
.drag-ring { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 104px; height: 21px; border: 2px solid rgba(0,148,176,.38); border-radius: 50%; box-shadow: 0 0 10px rgba(0,148,176,.15); }
.drag-ring span { position:absolute; left:50%; top: 2px; transform:translate(-50%, 100%); padding: 2px 5px; background: rgba(255,255,255,.88); color: var(--teal); border-radius: 99px; font-size: 7px; font-weight: 900; letter-spacing: .08em; opacity: 0; transition: opacity .15s; }
.customer:hover .drag-ring span { opacity: 1; }
.persona-name { display:block; margin-top: 7px; font-size: 10px; color: var(--muted); }
.feedback-toast {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%) scale(.8); z-index: 50;
  padding: 13px 18px; border-radius: 999px; background: var(--navy); color:#fff; font-weight:900; font-size: 14px; opacity:0; pointer-events:none;
}
.feedback-toast.show { animation: toast .8s ease; }
.feedback-toast.good { background: var(--green); }
.feedback-toast.bad { background: #cf3f35; }
.feedback-toast.hint { background: #9a6b00; }
@keyframes toast { 0%{opacity:0; transform:translate(-50%,-50%) scale(.75)} 20%,70%{opacity:1; transform:translate(-50%,-50%) scale(1)} 100%{opacity:0; transform:translate(-50%,-60%) scale(.95)} }
.side-panel { display: flex; flex-direction: column; gap: 12px; }
.leaderboard { padding: 17px 15px; }
.panel-title { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.panel-title h3 { margin:0; font-size:13px; letter-spacing:.04em; }
.panel-title span { font-size:10px; color:var(--muted); }
.leaderboard ol { margin: 12px 0 0 26px; padding:0; }
.leaderboard li { padding: 7px 0; font-size: 12px; }
.leaderboard li .entry { display:flex; justify-content:space-between; gap:8px; }
.leaderboard li.you { color: var(--orange); font-weight: 900; }
.tip-card { padding: 14px; display:flex; gap:9px; align-items:flex-start; }
.tip-icon { font-size:20px; }
.tip-card b { font-size:10px; color:var(--orange); letter-spacing:.08em; }
.tip-card p { margin:4px 0 0; font-size:11px; line-height:1.4; color:var(--muted); }
.share-button { border:0; border-radius:16px; padding:14px; background: linear-gradient(120deg, var(--orange), #ff6b16); color:#fff; display:flex; gap:10px; align-items:center; text-align:left; cursor:pointer; box-shadow: 0 12px 30px rgba(255,79,31,.22); }
.share-button > span { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.18); font-size:18px; }
.share-button b, .share-button small { display:block; }
.share-button b { font-size:11px; letter-spacing:.04em; }
.share-button small { margin-top:3px; opacity:.85; font-size:10px; }
.modal-backdrop {
  position: fixed; inset:0; z-index:2000; display:grid; place-items:center; padding:20px; background:rgba(16,38,63,.38); backdrop-filter: blur(14px); opacity:0; pointer-events:none; transition: opacity .2s ease;
}
.modal-backdrop.active { opacity:1; pointer-events:auto; }
.modal-card { width:min(520px,100%); border-radius:26px; background:rgba(255,255,255,.97); box-shadow:0 30px 90px rgba(16,38,63,.28); padding:32px; border:1px solid rgba(255,255,255,.55); }
.mini-brand { display:flex; align-items:center; margin-bottom:24px; }
.genesys-full-logo-small { width:142px; }
.modal-card h2 { margin:4px 0 12px; font-size:42px; line-height:.98; letter-spacing:-.04em; color:var(--navy); }
.modal-card h2 span { color:var(--orange); }
.modal-card > p:not(.eyebrow):not(.result-message) { margin:0 0 20px; line-height:1.5; color:var(--muted); }
.modal-card label { display:block; margin:12px 0; font-size:10px; font-weight:900; letter-spacing:.08em; color:var(--navy); }
.modal-card label span { color:var(--muted); font-weight:500; }
.modal-card input { width:100%; margin-top:7px; padding:13px 14px; border-radius:12px; border:1px solid rgba(16,38,63,.14); outline:none; color:var(--navy); background:#fff; }
.modal-card input:focus { border-color:rgba(255,79,31,.7); box-shadow:0 0 0 3px rgba(255,79,31,.1); }
.primary-button, .secondary-button { border-radius:13px; padding:14px 17px; font-weight:900; font-size:12px; letter-spacing:.04em; cursor:pointer; }
.primary-button { width:100%; border:0; background:var(--orange); color:#fff; box-shadow:0 10px 25px rgba(255,79,31,.2); }
.primary-button span { float:right; }
.secondary-button { border:1px solid rgba(16,38,63,.14); background:#fff; color:var(--navy); }
.privacy-note { display:block; text-align:center; margin-top:11px; color:var(--muted); font-size:9px; }
.result-card { text-align:center; }
.result-card h2 { font-size:28px; margin-bottom:5px; }
.big-score { font-size:72px; line-height:1; color:var(--orange); font-weight:900; letter-spacing:-.06em; }
.result-rank { display:inline-block; margin-top:10px; border-radius:99px; background:rgba(255,79,31,.08); color:var(--orange); font-size:11px; font-weight:900; letter-spacing:.08em; padding:7px 12px; }
.result-grid { display:grid; grid-template-columns:repeat(3,1fr); margin:22px 0; border:1px solid rgba(16,38,63,.08); border-radius:14px; overflow:hidden; }
.result-grid div { padding:13px 8px; border-left:1px solid rgba(16,38,63,.08); }
.result-grid div:first-child { border-left:0; }
.result-grid span, .result-grid b { display:block; }
.result-grid span { font-size:9px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.result-grid b { margin-top:4px; font-size:15px; }
.result-message { color:var(--muted); font-size:13px; line-height:1.5; }
.result-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:18px; }
.result-actions .primary-button { width:auto; }
@media (max-width: 1180px) {
  .content-grid { grid-template-columns: minmax(620px,1fr) 230px; }
  .topbar { grid-template-columns:210px 1fr 48px; }
}
@media (max-width: 900px) {
  body { background-attachment: scroll; }
  .game-shell { width:min(100% - 18px, 760px); margin-top:9px; }
  .topbar { grid-template-columns:1fr 46px; }
  .brand { grid-column:1/2; }
  .genesys-full-logo { width:145px; }
  .stats { grid-column:1/-1; grid-row:2; }
  .content-grid { grid-template-columns:1fr; }
  .side-panel { display:none; }
  .doors { min-height:330px; }
  .door { min-height:330px; }
  .door-shape { height:235px; }
  .door > small { display:none; }
  .customer-stage { overflow-x:auto; grid-template-columns:repeat(5,145px); justify-content:start; min-height:285px; }
  .event-chip { display:none; }
}
@media (max-width: 580px) {
  .stats { grid-template-columns:1.2fr .9fr; min-height:74px; }
  .stat { padding:12px 10px; }
  .stat strong { font-size:25px; }
  .play-panel { padding:10px 7px 7px; }
  .doors { grid-template-columns:repeat(5, 126px); overflow-x:auto; min-height:315px; padding-bottom:4px; }
  .door { min-width:126px; min-height:310px; }
  .door-shape { height:225px; }
  .board-heading h2 { font-size:18px; }
  .round-meta { gap:6px; }
  .hint-counter { min-width:66px; padding:6px 7px; }
  .modal-card { padding:24px 20px; }
  .modal-card h2 { font-size:34px; }
}

@media (max-width: 900px) {
  .door-face-content { gap: 5px; padding: 8px 6px 12px; }
  .door-face-icon { font-size: 23px; }
  .door-shape strong { font-size: 10px; }
  .door-shape small { font-size: 7.5px; }
}

@media (min-width: 901px) and (max-width: 1180px) {
}

/* v1.6 articulated customer walking animation */
.customer.routing-out { pointer-events: none; }
.customer.routing-out .speech,
.customer.routing-out .persona-name,
.customer.routing-out .drag-ring {
  opacity: 0;
  transform: scale(.96);
  transition: opacity .16s ease, transform .16s ease;
}
.customer.routing-out .person-wrap { opacity: 0; }

.arrival-walker {
  z-index:1650;
}
.arrival-walker .arrival-mood {
  position:absolute;
  left:50%;
  top:-48px;
  transform:translateX(-50%);
  min-width:104px;
  padding:6px 9px 7px;
  border-radius:12px;
  background:rgba(255,255,255,.97);
  border:2px solid var(--emotion-color);
  box-shadow:0 10px 24px rgba(16,38,63,.18), 0 0 18px color-mix(in srgb, var(--emotion-color) 18%, transparent);
  text-align:center;
  color:var(--emotion-color);
  white-space:nowrap;
  animation:arrivalMoodPulse .75s ease-in-out infinite alternate;
}
.arrival-mood small, .arrival-mood strong { display:block; }
.arrival-mood small { font-size:6.5px; letter-spacing:.11em; color:#607087; font-weight:900; }
.arrival-mood strong { margin-top:2px; font-size:9px; letter-spacing:.035em; }
@keyframes arrivalMoodPulse { from { transform:translateX(-50%) translateY(0) scale(.98); } to { transform:translateX(-50%) translateY(-3px) scale(1.03); } }

.route-walker {
  position: fixed;
  z-index: 1600;
  pointer-events: none;
  transform-origin: 50% 92%;
  will-change: transform, opacity;
  overflow: visible;
}
.route-walker .drag-ring { display: none !important; }
.route-walker .person-art {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 14px 11px rgba(16,38,63,.22));
  transform-origin: 50% 90%;
}

/* The body rises and falls once per step, but the limbs do the real walking. */
.route-walker.is-walking .person-art {
  animation: walkBody .42s cubic-bezier(.45,.05,.55,.95) infinite;
}
.route-walker.is-walking .walk-arm-left,
.route-walker.is-walking .walk-arm-right,
.route-walker.is-walking .walk-leg-left,
.route-walker.is-walking .walk-leg-right {
  transform-box: fill-box;
  transform-origin: 50% 8%;
  will-change: transform;
}
.route-walker.is-walking .walk-arm-left { animation: walkArmLeft .42s ease-in-out infinite alternate; }
.route-walker.is-walking .walk-arm-right { animation: walkArmRight .42s ease-in-out infinite alternate; }
.route-walker.is-walking .walk-leg-left { animation: walkLegLeft .42s ease-in-out infinite alternate; }
.route-walker.is-walking .walk-leg-right { animation: walkLegRight .42s ease-in-out infinite alternate; }

@keyframes walkBody {
  0%,100% { transform: translateY(0) rotate(-.6deg); }
  25% { transform: translateY(-4px) rotate(.4deg); }
  50% { transform: translateY(0) rotate(.7deg); }
  75% { transform: translateY(-4px) rotate(-.3deg); }
}
@keyframes walkArmLeft {
  from { transform: rotate(15deg) translateY(1px); }
  to { transform: rotate(-17deg) translateY(-1px); }
}
@keyframes walkArmRight {
  from { transform: rotate(-17deg) translateY(-1px); }
  to { transform: rotate(15deg) translateY(1px); }
}
@keyframes walkLegLeft {
  from { transform: rotate(-10deg) translateY(0); }
  to { transform: rotate(12deg) translateY(-2px); }
}
@keyframes walkLegRight {
  from { transform: rotate(12deg) translateY(-2px); }
  to { transform: rotate(-10deg) translateY(0); }
}

.route-foot-shadow {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 2px;
  width: 66%;
  height: 11px;
  border-radius: 50%;
  background: rgba(16,38,63,.18);
  filter: blur(3px);
  transform: translateX(-50%);
  animation: walkShadow .21s ease-in-out infinite alternate;
}
@keyframes walkShadow {
  from { transform: translateX(-50%) scaleX(1); opacity:.26; }
  to { transform: translateX(-50%) scaleX(.72); opacity:.13; }
}

.door.arrival { z-index: 8; }
.door.arrival .door-shape { animation: doorArrival 1s ease both; }
.door.arrival .door-shape::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 5px 5px 2px 2px;
  background: radial-gradient(circle at 50% 55%, rgba(255,255,255,.72), rgba(255,255,255,.13) 42%, transparent 72%);
  animation: doorPortal 1s ease both;
  pointer-events: none;
}
@keyframes doorArrival {
  0% { transform: perspective(700px) rotateY(0deg); }
  40% { transform: perspective(700px) rotateY(-10deg) translateY(-3px); box-shadow: inset 0 0 0 4px rgba(255,255,255,.45), 0 0 34px color-mix(in srgb, var(--door) 48%, transparent); }
  78% { transform: perspective(700px) rotateY(5deg) translateY(-1px); }
  100% { transform: perspective(700px) rotateY(0deg); }
}
@keyframes doorPortal {
  0%,100% { opacity: 0; }
  34%,78% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .route-walker .person-art,
  .route-walker .walk-arm-left,
  .route-walker .walk-arm-right,
  .route-walker .walk-leg-left,
  .route-walker .walk-leg-right,
  .route-foot-shadow,
  .door.arrival .door-shape,
  .door.arrival .door-shape::after,
  .arrival-mood,
  .customer.customer-arrived .person-wrap,
  .customer.customer-arrived .speech,
  .customer.customer-arrived .emotion { animation: none !important; }
}

/* v1.7 right / wrong decision effects */
.decision-fx {
  position: fixed;
  z-index: 1900;
  width: 0;
  height: 0;
  pointer-events: none;
  overflow: visible;
}
.decision-fx .fx-ring {
  position: absolute;
  left: 0;
  top: 0;
  width: 92px;
  height: 92px;
  margin: -46px 0 0 -46px;
  border-radius: 50%;
  border: 5px solid rgba(255,255,255,.9);
  box-shadow: 0 0 0 4px rgba(23,139,108,.22), 0 0 35px rgba(255,181,38,.5);
  animation: successRing .72s ease-out forwards;
}
.decision-fx .fx-star {
  --tx: 0px;
  --ty: -80px;
  --rot: 0deg;
  --delay: 0ms;
  position: absolute;
  left: 0;
  top: 0;
  color: #ffb526;
  font-size: 25px;
  line-height: 1;
  text-shadow: 0 3px 8px rgba(116,73,0,.2);
  transform: translate(-50%,-50%) scale(.3);
  opacity: 0;
  animation: starBurst .9s cubic-bezier(.16,.84,.34,1) var(--delay) forwards;
}
.decision-fx .fx-star:nth-of-type(3n) { color: var(--orange); font-size: 19px; }
.decision-fx .fx-star:nth-of-type(4n) { color: #23a8ad; font-size: 17px; }
.decision-fx .fx-score {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%,-50%);
  white-space: nowrap;
  padding: 9px 14px;
  border-radius: 999px;
  background: #fff;
  color: var(--green);
  border: 1px solid rgba(23,139,108,.2);
  box-shadow: 0 12px 30px rgba(16,38,63,.18);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .02em;
  animation: scorePop .95s cubic-bezier(.16,.84,.34,1) forwards;
}
.decision-fx.wrong .fx-ring {
  border-color: rgba(255,255,255,.94);
  box-shadow: 0 0 0 5px rgba(207,63,53,.24), 0 0 34px rgba(207,63,53,.34);
  animation: wrongRing .58s ease-out forwards;
}
.decision-fx .fx-x {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%,-50%) scale(.35) rotate(-12deg);
  width: 66px;
  height: 66px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: #cf3f35;
  border: 4px solid #cf3f35;
  box-shadow: 0 12px 34px rgba(207,63,53,.25);
  font-size: 39px;
  font-weight: 900;
  animation: wrongX .72s cubic-bezier(.2,.9,.25,1) forwards;
}
.decision-fx .fx-shard {
  --tx: 0px;
  --ty: -55px;
  --rot: 0deg;
  position: absolute;
  left: 0;
  top: 0;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: #cf3f35;
  opacity: 0;
  transform: translate(-50%,-50%);
  animation: wrongShard .7s ease-out forwards;
}
.decision-fx .fx-try {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%,-50%);
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff;
  color: #cf3f35;
  border: 1px solid rgba(207,63,53,.2);
  box-shadow: 0 10px 26px rgba(16,38,63,.14);
  font-weight: 900;
  font-size: 12px;
  animation: wrongLabel .82s ease forwards;
}
.play-panel.fx-correct-pulse::after,
.play-panel.fx-wrong-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  border-radius: inherit;
}
.play-panel.fx-correct-pulse::after { animation: panelSuccess .55s ease; }
.play-panel.fx-wrong-pulse::after { animation: panelWrong .45s ease; }

@keyframes successRing {
  0% { transform: scale(.35); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: scale(1.75); opacity: 0; }
}
@keyframes starBurst {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.2) rotate(0deg); }
  18% { opacity: 1; }
  72% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.05) rotate(var(--rot)); }
}
@keyframes scorePop {
  0% { opacity: 0; transform: translate(-50%,-35%) scale(.65); }
  20% { opacity: 1; transform: translate(-50%,-75%) scale(1.08); }
  72% { opacity: 1; transform: translate(-50%,-110%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-145%) scale(.94); }
}
@keyframes wrongRing {
  0% { transform: scale(.4); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: scale(1.45); opacity: 0; }
}
@keyframes wrongX {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.3) rotate(-18deg); }
  28% { opacity: 1; transform: translate(-50%,-50%) scale(1.16) rotate(7deg); }
  62% { opacity: 1; transform: translate(-50%,-50%) scale(.95) rotate(-3deg); }
  100% { opacity: 0; transform: translate(-50%,-68%) scale(.88) rotate(0); }
}
@keyframes wrongShard {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.2) rotate(0deg); }
  18% { opacity: .95; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(.75) rotate(var(--rot)); }
}
@keyframes wrongLabel {
  0% { opacity: 0; transform: translate(-50%,-20%) scale(.7); }
  25%,70% { opacity: 1; transform: translate(-50%,-115%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-150%) scale(.94); }
}
@keyframes panelSuccess {
  0%,100% { box-shadow: inset 0 0 0 0 rgba(23,139,108,0); background: rgba(23,139,108,0); }
  45% { box-shadow: inset 0 0 0 4px rgba(23,139,108,.22); background: rgba(23,139,108,.035); }
}
@keyframes panelWrong {
  0%,100% { box-shadow: inset 0 0 0 0 rgba(207,63,53,0); background: rgba(207,63,53,0); }
  45% { box-shadow: inset 0 0 0 4px rgba(207,63,53,.2); background: rgba(207,63,53,.035); }
}

@media (prefers-reduced-motion: reduce) {
  .decision-fx .fx-ring,
  .decision-fx .fx-star,
  .decision-fx .fx-score,
  .decision-fx .fx-x,
  .decision-fx .fx-shard,
  .decision-fx .fx-try,
  .play-panel.fx-correct-pulse::after,
  .play-panel.fx-wrong-pulse::after { animation-duration: .01ms !important; }
}


/* Dynamic scenario solution visual */
.tip-content { min-width: 0; flex: 1; }
.solution-visual {
  margin-top: 10px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(16,38,63,.10);
  background: #fff;
  box-shadow: 0 8px 20px rgba(16,38,63,.08);
}
.solution-visual[hidden] { display: none !important; }
.solution-visual img {
  display: block;
  width: 100%;
  max-height: 155px;
  object-fit: contain;
  background: #fff;
}

/* v2.3 dynamic Genesys solution labels */
.door-top b, .door-face-content strong {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  text-wrap: balance;
}
.door.long-solution .door-top b { font-size: 9.5px; line-height: 1.08; }
.door.long-solution .door-shape strong { font-size: 11px; line-height: 1.08; letter-spacing: .015em; }
.door.very-long-solution .door-top b { font-size: 8.5px; }
.door.very-long-solution .door-shape strong { font-size: 9.5px; line-height: 1.06; }

/* v2.5 - one-customer-at-a-time stage */
.customer-stage {
  grid-template-columns: minmax(180px, 230px);
  justify-content: center;
  align-items: end;
  min-height: 330px;
  overflow: visible;
  padding-bottom: 12px;
}
.customer-stage .customer {
  width: 220px;
  max-width: 100%;
  justify-self: center;
}
.customer-stage .speech {
  width: min(205px, 96%);
  min-height: 118px;
  font-size: 12px;
}
.customer-stage .issue {
  font-size: 12px;
  line-height: 1.35;
}
.customer-stage .person-wrap {
  width: 132px;
  height: 226px;
}
.customer-stage .person-art {
  width: 132px;
  height: 226px;
}
.customer-stage .persona-name {
  font-size: 11px;
  font-weight: 800;
}
.arrival-mood {
  min-width: 124px;
  padding: 7px 10px !important;
  box-shadow: 0 10px 24px rgba(16,38,63,.18) !important;
}
.arrival-mood small { font-size: 7px !important; }
.arrival-mood strong { font-size: 10px !important; }

@media (max-width: 900px) {
  .customer-stage {
    grid-template-columns: minmax(170px, 220px) !important;
    justify-content: center !important;
    overflow: visible !important;
  }
}


/* v2.7 - business consequence system */
.impact-card { padding: 14px; }
.impact-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 11px;
}
.impact-metric {
  min-width: 0;
  padding: 9px 8px;
  border: 1px solid rgba(16,38,63,.08);
  border-radius: 11px;
  background: rgba(247,244,239,.66);
}
.impact-metric span, .impact-metric b, .impact-metric small { display: block; }
.impact-metric span { font-size: 7.5px; line-height: 1.15; font-weight: 900; letter-spacing: .055em; color: var(--muted); }
.impact-metric b { margin-top: 4px; font-size: 19px; line-height: 1; color: var(--navy); letter-spacing: -.03em; }
.impact-metric small { margin-top: 5px; min-height: 18px; font-size: 7px; line-height: 1.25; color: var(--muted); }
.metric-pop { animation: metricPop .42s cubic-bezier(.16,.84,.34,1); }
@keyframes metricPop { 0% { transform: scale(.82); color: var(--orange); } 55% { transform: scale(1.14); } 100% { transform: scale(1); } }

.consequence-card {
  position: absolute;
  z-index: 70;
  left: 50%;
  top: 48%;
  width: min(470px, calc(100% - 34px));
  transform: translate(-50%,-50%) scale(.8);
  opacity: 0;
  pointer-events: none;
  padding: 15px 16px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(16,38,63,.12);
  box-shadow: 0 20px 55px rgba(16,38,63,.22);
  backdrop-filter: blur(12px);
}
.consequence-card.show { animation: consequenceIn 1.9s cubic-bezier(.16,.84,.34,1) both; }
.consequence-card.good { border-top: 4px solid var(--green); }
.consequence-card.bad { border-top: 4px solid #cf3f35; }
.consequence-head { display: flex; align-items: center; gap: 9px; }
.consequence-head > span {
  width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center;
  border-radius: 50%; font-size: 18px; font-weight: 900;
}
.consequence-card.good .consequence-head > span { color: var(--green); background: rgba(23,139,108,.10); }
.consequence-card.bad .consequence-head > span { color: #cf3f35; background: rgba(207,63,53,.10); }
.consequence-head b, .consequence-head small { display:block; }
.consequence-head b { font-size: 12px; letter-spacing: .065em; color: var(--navy); }
.consequence-head small { margin-top: 2px; font-size: 9px; color: var(--muted); }
.consequence-card > p { margin: 9px 0 11px; font-size: 11px; line-height: 1.35; color: #34485d; font-weight: 700; }
.consequence-metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 7px; }
.consequence-metric { padding: 8px 5px; border-radius: 10px; text-align:center; background: rgba(16,38,63,.035); border: 1px solid rgba(16,38,63,.06); }
.consequence-metric span, .consequence-metric b { display:block; }
.consequence-metric span { font-size: 6.8px; line-height: 1.15; font-weight: 900; letter-spacing: .045em; color: var(--muted); }
.consequence-metric b { margin-top: 4px; font-size: 12px; white-space: nowrap; }
.consequence-metric.good b { color: var(--green); }
.consequence-metric.bad b { color: #cf3f35; }
@keyframes consequenceIn {
  0% { opacity:0; transform:translate(-50%,-45%) scale(.75); }
  12% { opacity:1; transform:translate(-50%,-50%) scale(1.035); }
  20%,77% { opacity:1; transform:translate(-50%,-50%) scale(1); }
  100% { opacity:0; transform:translate(-50%,-57%) scale(.96); }
}

.result-impact-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  margin: -10px 0 20px;
  border: 1px solid rgba(16,38,63,.08);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(247,244,239,.58);
}
.result-impact-grid div { padding: 10px 6px; border-left: 1px solid rgba(16,38,63,.08); }
.result-impact-grid div:first-child { border-left: 0; }
.result-impact-grid span, .result-impact-grid b { display:block; }
.result-impact-grid span { font-size: 7.5px; text-transform: uppercase; letter-spacing: .055em; color: var(--muted); }
.result-impact-grid b { margin-top: 4px; font-size: 14px; color: var(--navy); }

@media (max-width: 580px) {
  .consequence-card { top: 53%; padding: 12px; }
  .consequence-metrics { grid-template-columns: repeat(2,1fr); }
  .result-impact-grid { grid-template-columns: repeat(2,1fr); }
  .result-impact-grid div:nth-child(3) { border-left: 0; border-top: 1px solid rgba(16,38,63,.08); }
  .result-impact-grid div:nth-child(4) { border-top: 1px solid rgba(16,38,63,.08); }
}

@media (prefers-reduced-motion: reduce) {
  .consequence-card.show, .metric-pop { animation-duration: .01ms !important; }
}

/* v2.8 - shared live leaderboard */
.leaderboard li .entry { align-items: center; }
.leader-person { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.leader-person > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.leader-person small { display: block; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 8px; font-weight: 600; }
.leaderboard li.you .leader-person small { color: rgba(255,79,31,.72); }
.leaderboard li.you { background: rgba(255,79,31,.055); margin-left: -8px; margin-right: -6px; padding-left: 8px; padding-right: 6px; border-radius: 9px; }
.leaderboard-empty { list-style: none; margin-left: -25px; color: var(--muted); }
.leaderboard-empty .entry span { line-height: 1.3; }

/* v2.9 - shareable CX performance result */
.modal-card.result-card {
  width: min(720px, 100%);
  max-height: calc(100vh - 24px);
  overflow: auto;
  padding: 22px 24px 20px;
  text-align: left;
  background:
    radial-gradient(circle at 92% 7%, rgba(255,79,31,.12), transparent 27%),
    linear-gradient(160deg, rgba(255,255,255,.995), rgba(250,248,244,.985));
  border: 1px solid rgba(255,255,255,.86);
}
.result-brandline { display:flex; align-items:center; gap:8px; margin-bottom:13px; color:var(--navy); }
.result-brandline > span:last-child { margin-left:auto; font-size:8px; font-weight:850; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; }
.genesys-full-logo-result { width:122px; }
.share-result-card { position:relative; overflow:hidden; padding:20px; border:1px solid rgba(16,38,63,.08); border-radius:24px; background:rgba(255,255,255,.86); box-shadow:0 18px 44px rgba(16,38,63,.07); text-align:center; }
.share-result-card::after { content:''; position:absolute; width:260px; height:260px; right:-150px; top:-160px; border:36px solid rgba(255,79,31,.09); border-radius:50%; pointer-events:none; }
.result-completion { position:relative; z-index:1; display:inline-flex; align-items:center; gap:6px; margin:0 auto 5px; padding:6px 11px; border-radius:999px; background:rgba(23,139,108,.09); color:var(--green); font-size:9px; font-weight:950; letter-spacing:.095em; }
.result-completion::before { content:'✦'; }
.result-completion.result-alert { background:rgba(207,63,53,.09); color:#cf3f35; }
.result-completion.result-alert::before { content:'⚠'; }
.result-card h2 { position:relative; z-index:1; margin:0 0 12px; font-size:clamp(20px,3.3vw,28px); letter-spacing:-.035em; }
.result-score-showcase { position:relative; display:flex; align-items:baseline; justify-content:center; gap:9px; width:min(510px,100%); margin:0 auto 19px; padding:13px 18px 11px; border-radius:20px; background:var(--navy); color:#fff; overflow:hidden; }
.result-score-showcase::after { content:''; position:absolute; width:180px; height:180px; right:-98px; bottom:-117px; border:25px solid rgba(255,79,31,.45); border-radius:50%; }
.result-trophy { position:relative; z-index:1; align-self:center; font-size:28px; filter:drop-shadow(0 3px 8px rgba(0,0,0,.15)); }
.result-score-showcase .big-score { position:relative; z-index:1; font-size:clamp(54px,9vw,76px); line-height:.92; color:#fff; letter-spacing:-.065em; }
.points-label { position:relative; z-index:1; font-size:10px; font-weight:950; letter-spacing:.12em; color:rgba(255,255,255,.68); }
.result-section-title.centered { display:block; margin:0 0 8px; text-align:center; }
.result-section-title.centered span { font-size:10px; font-weight:950; letter-spacing:.13em; color:var(--navy); }
.result-performance-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.performance-tile { position:relative; padding:13px 7px 11px; border-radius:14px; background:#faf8f4; border:1px solid rgba(16,38,63,.065); overflow:hidden; }
.performance-tile::before { content:''; position:absolute; left:0; top:0; right:0; height:3px; background:var(--orange); }
.performance-tile.positive::before { background:#1a9a74; }
.performance-tile.caution::before { background:#e95b48; }
.performance-tile.time::before { background:#3b7fd6; }
.performance-tile span,.performance-tile b,.performance-tile small { display:block; }
.performance-tile span { min-height:19px; font-size:7.6px; font-weight:900; text-transform:uppercase; letter-spacing:.055em; color:var(--muted); }
.performance-tile b { margin-top:5px; font-size:clamp(20px,3vw,28px); line-height:1; color:var(--navy); }
.performance-tile small { margin-top:5px; font-size:6.6px; line-height:1.2; color:var(--muted); }
.result-title-block { margin:18px 0 8px; }
.result-title-block > span { display:block; font-size:8px; font-weight:950; letter-spacing:.12em; color:var(--muted); }
.result-title-block .result-rank { display:block; margin:7px auto 0; padding:0; background:none; border:0; color:var(--orange); font-size:clamp(19px,4vw,29px); font-weight:950; letter-spacing:-.025em; }
.result-leap-rank { display:inline-flex; align-items:center; justify-content:center; min-height:38px; margin-top:1px; padding:8px 17px; border-radius:999px; background:rgba(255,79,31,.095); border:1px solid rgba(255,79,31,.18); color:var(--navy); font-size:clamp(14px,2.7vw,20px); font-weight:950; letter-spacing:.02em; }
.result-leap-detail { display:block; margin-top:6px; color:var(--muted); font-size:7.5px; }
.result-meta-strip { display:grid; grid-template-columns:repeat(3,1fr); width:min(470px,100%); margin:14px auto 0; border-top:1px solid rgba(16,38,63,.07); padding-top:10px; }
.result-meta-strip div { border-left:1px solid rgba(16,38,63,.07); }
.result-meta-strip div:first-child { border-left:0; }
.result-meta-strip span,.result-meta-strip b { display:block; }
.result-meta-strip span { font-size:6.8px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.result-meta-strip b { margin-top:3px; font-size:12px; color:var(--navy); }
.result-card .result-message { margin:11px 0 0; padding:10px 12px; border-left:3px solid var(--orange); border-radius:0 9px 9px 0; background:rgba(255,79,31,.04); color:#4f6071; font-size:10.5px; line-height:1.45; }
.result-card .result-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:11px; }
.result-card .result-actions button { min-height:46px; }
.result-card .result-actions .secondary-button { color:var(--orange); border-color:rgba(255,79,31,.22); }
.result-sync { display:block; margin-top:8px; text-align:center; color:var(--muted); font-size:8px; }

@media (max-width:620px) {
  .modal-card.result-card { padding:17px 13px; }
  .result-brandline > span:last-child { display:none; }
  .share-result-card { padding:16px 12px; border-radius:20px; }
  .result-performance-grid { grid-template-columns:repeat(2,1fr); }
  .performance-tile { min-height:92px; }
  .result-card .result-actions { grid-template-columns:1fr; }
  .result-meta-strip span { font-size:6px; }
  .result-meta-strip b { font-size:11px; }
}



/* v3.0 sound design */
#soundToggle { transition: transform .18s ease, opacity .18s ease, background .18s ease; }
#soundToggle:hover { transform: translateY(-1px) scale(1.04); }
#soundToggle.muted { opacity: .58; filter: saturate(.55); }
#soundToggle #soundIcon { display: inline-grid; place-items: center; min-width: 1.1em; }

/* v3.3 - six fixed Genesys capability doors */
@media (max-width: 760px) {
  .doors { grid-template-columns: repeat(6, 126px); justify-content: start; overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; scrollbar-width: thin; }
  .door { min-height: 330px; }
  .door-shape { height: 240px; }
}

/* v3.4 - visible customer queue + impatience after 2 seconds */
.customer-stage {
  grid-template-columns: minmax(205px, 240px) minmax(360px, 1fr) !important;
  justify-content: stretch !important;
  align-items: end !important;
  column-gap: 24px !important;
  min-height: 350px !important;
  overflow: visible !important;
  padding: 4px 8px 12px !important;
}
.customer-stage > .customer {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  justify-self: center;
}
.waiting-line {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  min-height: 285px;
  align-self: end;
  position: relative;
  padding: 12px 12px 10px;
  border-radius: 18px;
  border: 1px solid rgba(16,38,63,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.73), rgba(247,244,239,.7));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 10px 28px rgba(16,38,63,.06);
  overflow: hidden;
}
.queue-heading {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  margin-bottom: 2px;
}
.queue-heading div { min-width: 0; }
.queue-heading b,
.queue-heading small { display:block; }
.queue-heading b { font-size: 10px; letter-spacing: .11em; color: var(--navy); }
.queue-heading small { margin-top: 3px; font-size: 7.5px; line-height: 1.25; color: var(--muted); }
.queue-count {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255,79,31,.08);
  border: 1px solid rgba(255,79,31,.16);
  color: var(--orange);
  font-size: 8px;
  font-weight: 900;
  white-space: nowrap;
}
.queue-track {
  position: relative;
  min-height: 230px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: clamp(3px, 1.2vw, 14px);
  padding: 6px 5px 0;
}
.queue-track::before {
  content: "";
  position: absolute;
  left: 1%; right: 1%; bottom: 26px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,79,31,.32), rgba(36,91,157,.20), rgba(16,38,63,.08));
  box-shadow: 0 4px 12px rgba(16,38,63,.08);
}
.queue-track::after {
  content: "QUEUE";
  position: absolute;
  right: 7px;
  bottom: 34px;
  color: rgba(16,38,63,.26);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .16em;
}
.waiting-person {
  --anger-delay: 0ms;
  position: relative;
  z-index: 2;
  width: clamp(72px, 8.6vw, 105px);
  min-width: 0;
  text-align: center;
  transform-origin: 50% 100%;
  transition: transform .35s ease, opacity .3s ease, filter .3s ease;
}
.waiting-person:nth-child(2) { transform: scale(.94); opacity:.94; }
.waiting-person:nth-child(3) { transform: scale(.88); opacity:.88; }
.waiting-person:nth-child(4) { transform: scale(.82); opacity:.82; }
.queue-person-art {
  display: block;
  width: 100%;
  height: 188px;
  margin: 0 auto -3px;
  filter: drop-shadow(0 9px 8px rgba(16,38,63,.12));
}
.waiting-person strong {
  display:block;
  max-width: 100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--navy);
  font-size:9px;
  line-height:1.15;
}
.queue-status {
  display:inline-flex;
  margin-top:3px;
  padding:3px 6px;
  border-radius:999px;
  background:rgba(16,38,63,.06);
  color:var(--muted);
  font-size:6.5px;
  font-weight:900;
  letter-spacing:.08em;
}
.queue-next .queue-status {
  background:rgba(255,79,31,.1);
  color:var(--orange);
  box-shadow:0 0 0 1px rgba(255,79,31,.14);
}
.queue-current-preview {
  filter: saturate(1.03);
}
.queue-current-preview.departing {
  opacity: 0;
  transform: translateX(-26px) scale(.88);
}
.queue-anger {
  position:absolute;
  z-index:8;
  left:50%;
  top:2px;
  display:flex;
  gap:2px;
  opacity:0;
  transform:translate(-50%, 8px) scale(.55);
  pointer-events:none;
}
.queue-anger span {
  display:grid;
  place-items:center;
  width:29px;
  height:29px;
  border-radius:50%;
  background:#fff;
  border:2px solid rgba(217,67,67,.34);
  box-shadow:0 7px 16px rgba(217,67,67,.2);
  font-size:17px;
}
.queue-impatient .waiting-person .queue-anger {
  animation: queueAngerPop .52s cubic-bezier(.18,.9,.22,1.28) var(--anger-delay) forwards,
             queueAngerBob .58s ease-in-out calc(var(--anger-delay) + 520ms) infinite alternate;
}
.queue-impatient .waiting-person {
  animation: queueImpatientShuffle .8s ease-in-out calc(var(--anger-delay) + 80ms) infinite alternate;
}
.queue-impatient .queue-count {
  background:rgba(217,67,67,.1);
  border-color:rgba(217,67,67,.2);
  color:#d94343;
}
.queue-advancing .waiting-person {
  animation: queueAdvance .72s cubic-bezier(.18,.85,.25,1.14) both;
}
.queue-advancing .waiting-person:nth-child(2) { animation-delay:70ms; }
.queue-advancing .waiting-person:nth-child(3) { animation-delay:120ms; }
.queue-advancing .waiting-person:nth-child(4) { animation-delay:170ms; }
@keyframes queueAngerPop {
  0% { opacity:0; transform:translate(-50%, 10px) scale(.4) rotate(-8deg); }
  65% { opacity:1; transform:translate(-50%, -10px) scale(1.16) rotate(4deg); }
  100% { opacity:1; transform:translate(-50%, -7px) scale(1); }
}
@keyframes queueAngerBob {
  from { transform:translate(-50%, -7px) rotate(-2deg); }
  to { transform:translate(-50%, -13px) rotate(3deg); }
}
@keyframes queueImpatientShuffle {
  from { translate: 0 0; }
  to { translate: 0 -3px; }
}
@keyframes queueAdvance {
  0% { transform:translateX(0) scale(var(--advance-scale,1)); }
  45% { transform:translateX(-17px) translateY(-3px) scale(1.03); }
  100% { transform:translateX(-7px) scale(1); }
}

@media (max-width: 1000px) {
  .customer-stage {
    grid-template-columns: minmax(185px, 220px) minmax(285px, 1fr) !important;
    column-gap: 12px !important;
  }
  .waiting-line { padding-inline: 8px; }
  .queue-person-art { height: 165px; }
  .queue-track { min-height: 208px; }
}
@media (max-width: 760px) {
  .customer-stage {
    grid-template-columns: minmax(170px, 205px) minmax(220px, 1fr) !important;
    column-gap: 8px !important;
  }
  .queue-heading small { display:none; }
  .queue-track { gap:1px; }
  .waiting-person { width: clamp(58px, 14vw, 78px); }
  .queue-person-art { height: 142px; }
  .queue-track { min-height: 184px; }
  .queue-anger span { width:24px; height:24px; font-size:14px; }
}

@media (prefers-reduced-motion: reduce) {
  .queue-impatient .waiting-person,
  .queue-impatient .waiting-person .queue-anger,
  .queue-advancing .waiting-person { animation:none !important; }
  .queue-impatient .waiting-person .queue-anger { opacity:1; transform:translate(-50%,-7px) scale(1); }
}

/* v3.5 - persistent queue: existing people remain mounted between rounds */
.waiting-line {
  contain: layout paint;
}
.waiting-person.queue-new {
  animation: queueJoinBack .42s cubic-bezier(.2,.82,.28,1) both;
}
@keyframes queueJoinBack {
  from { opacity:0; translate: 22px 0; }
  to { opacity:1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .waiting-person.queue-new { animation:none !important; }
}


/* v3.6 - Genesys Crisis start screen, localization, configurable settings and flips */
.start-screen-backdrop { background: rgba(247,244,239,.94); backdrop-filter: blur(8px); display:block; padding:0; overflow:hidden; }
.start-screen-backdrop.active { pointer-events:auto; }
.start-screen-card { min-height:100vh; background:linear-gradient(115deg,#fbfaf8 0%,#f7f4ef 58%,#fff 100%); position:relative; overflow:hidden; }
.start-screen-card::after { content:''; position:absolute; width:56vw; height:56vw; right:-18vw; top:38%; border-radius:50%; background:radial-gradient(circle at center, rgba(255,79,31,.08), rgba(255,79,31,0) 65%); pointer-events:none; }
.start-nav { height:84px; padding:0 42px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(16,38,63,.08); background:rgba(255,255,255,.82); position:relative; z-index:2; }
.start-brand img { width:190px; }
.start-nav-actions { display:flex; align-items:center; gap:14px; }
.start-context { color:#617286; font-size:11px; font-weight:800; letter-spacing:.02em; white-space:nowrap; }
.language-switch { display:flex; border:1px solid rgba(16,38,63,.12); border-radius:12px; padding:2px; background:#fff; }
.language-switch button { border:0; background:transparent; color:#6d7c8d; min-width:33px; height:30px; border-radius:9px; font-size:10px; font-weight:900; cursor:pointer; }
.language-switch button.active { background:var(--navy); color:#fff; }
.language-switch.compact { transform:scale(.9); transform-origin:right center; }
.top-leaderboard { text-decoration:none; padding:10px 15px; border:1px solid rgba(16,38,63,.12); border-radius:999px; color:var(--navy); font-size:10px; font-weight:900; background:#fff; }
.start-content { width:min(1460px, calc(100% - 140px)); margin:0 auto; min-height:calc(100vh - 84px); display:grid; grid-template-columns:1.1fr .9fr; gap:78px; align-items:center; position:relative; z-index:1; padding:50px 0; }
.start-copy { padding:10px 0; }
.start-kicker { color:var(--orange); font-weight:950; letter-spacing:.14em; font-size:12px; }
.start-chip { display:inline-flex; margin:94px 0 30px; padding:8px 14px; border:1px solid rgba(16,38,63,.1); border-radius:999px; background:#fff; color:var(--navy); font-size:9px; font-weight:950; letter-spacing:.09em; box-shadow:0 8px 24px rgba(16,38,63,.05); }
.start-chip::before { content:'•'; color:var(--orange); margin-right:7px; }
.start-copy h1 { margin:0; max-width:670px; font-size:clamp(68px,8vw,108px); line-height:.9; letter-spacing:-.065em; color:var(--navy); }
.start-copy h1 span { color:var(--orange); }
.start-copy > p { max-width:720px; margin:30px 0 34px; color:#667789; font-size:20px; line-height:1.42; }
.start-features { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:800px; }
.start-features div { border-top:1px solid rgba(16,38,63,.12); padding-top:16px; display:flex; gap:13px; align-items:flex-start; }
.start-features b { color:var(--orange); font-size:10px; letter-spacing:.08em; }
.start-features span { color:var(--navy); font-size:12px; font-weight:850; line-height:1.35; }
.participant-card { background:rgba(255,255,255,.95); border:1px solid rgba(16,38,63,.09); border-radius:28px; box-shadow:0 30px 90px rgba(16,38,63,.14); padding:34px; width:min(100%,610px); justify-self:end; position:relative; }
.participant-head { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.logged-pill { padding:8px 12px; border:1px solid rgba(16,38,63,.08); border-radius:999px; color:#8491a0; background:#f8f9fa; font-size:9px; font-weight:900; letter-spacing:.06em; }
.participant-card h2 { margin:8px 0 24px; font-size:27px; letter-spacing:-.035em; color:var(--navy); }
.participant-card label { display:block; margin:16px 0; }
.participant-card label > span { display:block; color:var(--orange); font-size:10px; font-weight:950; letter-spacing:.08em; }
.participant-card input { margin-top:8px; width:100%; height:55px; padding:0 16px; border-radius:12px; border:1px solid rgba(16,38,63,.15); color:var(--navy); background:#fff; outline:none; font-size:14px; }
.participant-card input:focus { border-color:rgba(255,79,31,.6); box-shadow:0 0 0 4px rgba(255,79,31,.08); }
.profile-note { display:block; color:#8190a0; font-size:10px; line-height:1.4; margin:4px 0 16px; }
.start-actions { display:grid; grid-template-columns:1.6fr 1fr; gap:10px; }
.start-actions .primary-button, .start-actions .secondary-button { min-height:55px; display:flex; align-items:center; justify-content:center; text-decoration:none; }
.start-board-button { font-size:11px; }
.start-ready { display:inline-flex; align-items:center; gap:8px; margin-top:10px; color:#178b6c; font-size:11px; font-weight:800; }
.top-actions { display:flex; gap:8px; align-items:center; justify-self:end; }
.topbar .top-actions + .icon-button { grid-column:4; }
.door { perspective:1100px; }
.door-shape { transform-style:preserve-3d; transition:transform .55s cubic-bezier(.2,.8,.2,1); }
.door.is-flipped .door-shape { transform:rotateY(180deg); }
.door-flip-control { position:absolute; right:8px; bottom:10px; z-index:4; padding:4px 6px; border-radius:999px; background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.28); font-size:7px; font-weight:950; letter-spacing:.06em; cursor:pointer; backface-visibility:hidden; }
.door-details { position:absolute; inset:18px 14px 18px; z-index:3; transform:rotateY(180deg); backface-visibility:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; padding:10px; color:#fff; }
.door-details[hidden] { display:none; }
.door-details p { margin:0; font-size:9px; line-height:1.45; opacity:.92; }
.door-video { color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,.5); border-radius:999px; padding:7px 10px; font-size:8px; font-weight:950; }
.customer { position:relative; }
.card-flip-control { position:absolute; right:8px; top:7px; z-index:8; border:0; background:rgba(16,38,63,.06); color:var(--navy); border-radius:999px; padding:4px 7px; font-size:7px; font-weight:950; cursor:pointer; }
.card-details { position:absolute; inset:50px 12px 12px; display:flex; flex-direction:column; gap:7px; padding:12px; border-radius:14px; background:rgba(247,244,239,.94); color:var(--navy); box-shadow:inset 0 0 0 1px rgba(16,38,63,.08); z-index:6; }
.card-details b { font-size:9px; color:var(--orange); letter-spacing:.08em; }
.card-details span { font-size:10px; line-height:1.4; color:#56697c; }
.customer.card-flipped .speech { filter:drop-shadow(0 12px 22px rgba(16,38,63,.1)); }
.customer.card-flipped .issue, .customer.card-flipped .urgency, .customer.card-flipped .customer-hint { visibility:hidden; }
.wording-tabs { display:flex; gap:6px; margin:0 0 12px; padding:4px; border:1px solid rgba(16,38,63,.08); border-radius:12px; background:#f8f9fa; }
.wording-tabs button { flex:1; border:0; background:transparent; border-radius:9px; padding:10px; color:#667789; font-size:10px; font-weight:900; cursor:pointer; }
.wording-tabs button.active { background:var(--navy); color:#fff; }
.wording-panel { display:none; }
.wording-panel.active { display:block; }
.settings-card { margin-bottom:18px; }
.video-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media (max-width:1000px){ .start-content{grid-template-columns:1fr;gap:28px}.participant-card{justify-self:stretch}.start-chip{margin-top:30px}.start-copy h1{font-size:clamp(56px,12vw,84px)}.start-features{grid-template-columns:1fr}.start-nav{padding:0 20px}.start-context{display:none}.video-grid{grid-template-columns:1fr}.topbar .top-actions{position:absolute;right:72px;top:12px}.topbar{position:relative}.topbar .top-actions + .icon-button{grid-column:4}}
@media (max-width:620px){.start-nav-actions{gap:6px}.top-leaderboard{padding:9px 10px}.start-brand img{width:145px}.start-content{width:min(100% - 30px,620px);padding:25px 0}.participant-card{padding:24px}.start-actions{grid-template-columns:1fr}.start-copy>p{font-size:17px}.video-grid{grid-template-columns:1fr}}

.start-ready-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:10px}.start-logout{margin-left:auto;text-transform:uppercase;letter-spacing:.08em}.start-logout:hover{color:var(--orange)}

/* v3.7 - login/start page aligned to Genesys Journey Game reference */
.start-screen-backdrop { background: rgba(247,244,239,.94); backdrop-filter: blur(8px); display:block; padding:0; overflow:hidden; }
.start-screen-backdrop.active { pointer-events:auto; }
.journey-style-start { min-height:100vh; background:radial-gradient(circle at 86% 20%, rgba(255,79,31,.06), transparent 25%), radial-gradient(circle at 12% 82%, rgba(104,71,166,.05), transparent 24%), linear-gradient(180deg,#fbfbfa 0%,#f1f3f6 100%); position:relative; overflow:hidden; }
.journey-style-start::after { content:""; position:absolute; width:56vw; height:56vw; right:-19vw; top:35%; border-radius:50%; background:radial-gradient(circle at center, rgba(255,79,31,.075), rgba(255,79,31,0) 66%); pointer-events:none; }
.journey-start-nav { height:84px; padding:0 42px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(16,38,63,.08); background:rgba(255,255,255,.84); position:relative; z-index:2; }
.journey-start-brand img { width:190px; display:block; }
.journey-start-nav-actions { display:flex; align-items:center; gap:14px; }
.journey-start-context { color:#657489; font-size:11px; font-weight:800; letter-spacing:.02em; white-space:nowrap; }
.journey-top-leaderboard { text-decoration:none; padding:10px 15px; border:1px solid rgba(16,38,63,.12); border-radius:999px; color:var(--navy); font-size:10px; font-weight:900; background:#fff; }
.journey-start-content { width:min(1460px, calc(100% - 140px)); margin:0 auto; min-height:calc(100vh - 84px); display:grid; grid-template-columns:1.1fr .9fr; gap:78px; align-items:center; position:relative; z-index:1; padding:50px 0; }
.journey-start-copy { padding:10px 0; }
.journey-start-copy .start-chip { margin:94px 0 30px; }
.journey-start-copy h1 { margin:0; max-width:700px; font-size:clamp(68px,8vw,108px); line-height:.9; letter-spacing:-.065em; color:var(--navy); }
.journey-start-copy h1 span { color:var(--orange); }
.journey-start-copy > p { max-width:720px; margin:30px 0 34px; color:#667789; font-size:20px; line-height:1.42; }
.journey-participant-wrap { position:relative; width:min(100%,610px); justify-self:end; }
.journey-participant-backdrop { position:absolute; inset:-28px -35px 28px 35px; border-radius:30px; background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(255,255,255,.16)); border:1px solid rgba(255,255,255,.72); box-shadow:0 24px 55px rgba(20,42,72,.07); transform:rotate(2.2deg); }
.journey-participant-wrap .participant-card { position:relative; z-index:1; width:100%; justify-self:auto; padding:32px; }
.journey-participant-wrap .participant-card h2 { margin:8px 0 24px; font-size:27px; letter-spacing:-.035em; }
.journey-participant-wrap .participant-card label { display:block; margin:16px 0; }
.journey-participant-wrap .participant-card label > span { display:block; }
.journey-participant-wrap .participant-card input { height:55px; font-size:14px; border-radius:12px; }
.journey-participant-wrap .profile-note { margin:4px 0 16px; }
.journey-participant-wrap .start-actions { display:grid; grid-template-columns:1.6fr 1fr; gap:10px; }
.journey-participant-wrap .start-actions .primary-button,
.journey-participant-wrap .start-actions .secondary-button { min-height:55px; display:flex; align-items:center; justify-content:center; text-decoration:none; }
.journey-participant-wrap .start-ready-row { margin-top:10px; }
@media (max-width:1000px){
  .journey-start-content{grid-template-columns:1fr;gap:28px;width:min(100% - 44px,900px)}
  .journey-start-copy{text-align:center}
  .journey-start-copy .start-chip{margin:30px auto}
  .journey-start-copy h1{font-size:clamp(56px,12vw,84px);margin-left:auto;margin-right:auto}
  .journey-start-copy>p{margin-left:auto;margin-right:auto}
  .journey-participant-wrap{justify-self:center}
  .journey-start-nav{padding:0 20px}
  .journey-start-context{display:none}
}
@media (max-width:620px){
  .journey-start-nav-actions{gap:6px}
  .journey-top-leaderboard{padding:9px 10px}
  .journey-start-brand img{width:145px}
  .journey-start-content{width:min(100% - 30px,620px);padding:25px 0}
  .journey-participant-wrap .participant-card{padding:24px}
  .journey-participant-backdrop{display:none}
  .journey-participant-wrap .start-actions{grid-template-columns:1fr}
  .journey-start-copy>p{font-size:17px}
}
html[lang="ar"] .journey-start-copy{text-align:right}
html[lang="ar"] .journey-start-copy>p{direction:rtl}
html[lang="ar"] .journey-start-copy .start-features{direction:rtl}

/* v3.8 - exact Journey Game-inspired start page, adapted only for CX Crisis */
.start-screen-backdrop { position:fixed !important; inset:0 !important; padding:0 !important; margin:0 !important; display:block !important; overflow:hidden !important; background:rgba(255,255,255,.98) !important; z-index:2000 !important; }
.start-screen-backdrop.active { pointer-events:auto; }
.journey-reference-start { width:100vw; height:100vh; min-height:100vh; overflow:hidden; position:relative; background:linear-gradient(115deg,#f8f9fb 0%,#f4f6f8 60%,#f9f7f8 100%); color:var(--navy); }
.journey-reference-start::before { content:""; position:absolute; width:760px; height:760px; right:-250px; top:120px; border-radius:50%; background:radial-gradient(circle at 44% 44%, rgba(255,79,31,.07), rgba(255,79,31,0) 68%); pointer-events:none; }
.journey-reference-nav { height:84px; padding:0 42px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(16,38,63,.10); background:#fff; position:relative; z-index:5; }
.journey-reference-logo { width:220px; display:block; }
.journey-reference-nav-actions { display:flex; align-items:center; gap:14px; white-space:nowrap; }
.journey-reference-nav-actions .language-switch { display:flex; border:1px solid #d9e0e8; border-radius:12px; padding:3px; background:#f7f9fb; }
.journey-reference-nav-actions .language-switch button { min-width:34px; height:30px; padding:0 8px; border:0; background:transparent; color:#6c7a8e; border-radius:9px; font-size:10px; font-weight:900; cursor:pointer; }
.journey-reference-nav-actions .language-switch button.active { background:var(--navy); color:#fff; box-shadow:0 2px 6px rgba(16,38,63,.12); }
.journey-reference-leaderboard { text-decoration:none; padding:10px 18px; border:1px solid #d9e0e8; border-radius:999px; color:var(--navy); font-size:10px; font-weight:900; letter-spacing:.04em; background:#fff; box-shadow:0 2px 8px rgba(16,38,63,.04); }
.journey-reference-context { color:#657489; font-size:12px; font-weight:700; letter-spacing:.01em; }
.journey-reference-body { width:min(1450px,calc(100vw - 140px)); height:calc(100vh - 84px); margin:0 auto; display:grid; grid-template-columns:1.06fr .94fr; gap:72px; align-items:center; position:relative; z-index:2; }
.journey-reference-copy { padding-top:16px; }
.journey-reference-kicker { color:var(--orange); font-weight:950; letter-spacing:.15em; font-size:12px; }
.journey-reference-chip { display:inline-flex; align-items:center; gap:8px; margin:94px 0 30px; padding:8px 14px; border:1px solid #dfe4eb; border-radius:999px; background:#fff; color:var(--navy); font-size:9px; font-weight:950; letter-spacing:.09em; box-shadow:0 8px 24px rgba(16,38,63,.05); }
.journey-reference-chip::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 5px rgba(255,79,31,.10); }
.journey-reference-copy h1 { margin:0; max-width:760px; font-size:clamp(70px,6.25vw,100px); line-height:.9; letter-spacing:-.065em; color:var(--navy); }
.journey-reference-copy h1 span { color:var(--orange); }
.journey-reference-copy > p { max-width:760px; margin:28px 0 34px; color:#65768a; font-size:20px; line-height:1.46; }
.journey-reference-features { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:790px; }
.journey-reference-features > div { border-top:1px solid #d7dee7; padding-top:14px; display:flex; flex-direction:column; gap:8px; }
.journey-reference-features b { color:var(--orange); font-size:10px; letter-spacing:.10em; }
.journey-reference-features strong { color:var(--navy); font-size:12px; line-height:1.35; }
.journey-reference-participant { position:relative; width:min(100%,610px); justify-self:end; }
.journey-reference-backdrop { position:absolute; inset:-34px -32px 28px 36px; border-radius:30px; background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(255,255,255,.24)); border:1px solid rgba(255,255,255,.94); box-shadow:0 22px 58px rgba(16,38,63,.08); transform:rotate(2deg); }
.journey-reference-participant .participant-card { position:relative; z-index:1; width:100%; max-width:none; margin:0; padding:32px; background:#fff; border:1px solid #d8e0e8; border-radius:28px; box-shadow:0 30px 80px rgba(16,38,63,.12); }
.journey-reference-participant .participant-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.journey-reference-participant .participant-head .journey-reference-kicker { font-size:10px; }
.journey-reference-participant .participant-card h2 { margin:7px 0 24px; font-size:27px; line-height:1.1; letter-spacing:-.035em; }
.journey-reference-participant .participant-card label { display:block; margin:15px 0; }
.journey-reference-participant .participant-card label > span { display:block; color:var(--orange); font-size:10px; font-weight:950; letter-spacing:.08em; }
.journey-reference-participant .participant-card input { margin-top:8px; width:100%; height:55px; padding:0 16px; border:1px solid #d4dce6; border-radius:12px; background:#fff; color:var(--navy); font-size:14px; outline:none; }
.journey-reference-participant .participant-card input:focus { border-color:rgba(255,79,31,.6); box-shadow:0 0 0 4px rgba(255,79,31,.08); }
.journey-reference-participant .profile-note { display:block; margin:4px 0 16px; color:#8190a0; font-size:9px; }
.journey-reference-participant .start-actions { display:grid; grid-template-columns:1.6fr 1fr; gap:10px; }
.journey-reference-participant .start-actions .primary-button,.journey-reference-participant .start-actions .secondary-button { min-height:55px; display:flex; align-items:center; justify-content:center; text-decoration:none; }
.journey-reference-participant .start-actions .primary-button { font-size:12px; }
.journey-reference-participant .start-board-button { font-size:10px; }
.journey-reference-participant .start-ready-row { display:flex; align-items:center; gap:14px; margin-top:8px; }
.journey-reference-participant .start-ready { display:inline-flex; align-items:center; gap:8px; color:#178b6c; font-size:11px; font-weight:800; }

@media(max-width:1100px){ .journey-reference-body{width:min(100% - 50px,900px);grid-template-columns:1fr;gap:26px;height:calc(100vh - 84px);overflow:hidden;padding:24px 0}.journey-reference-copy{text-align:center}.journey-reference-chip{margin:26px auto 24px}.journey-reference-copy h1{font-size:clamp(56px,10vw,84px);margin:0 auto}.journey-reference-copy>p{margin-left:auto;margin-right:auto}.journey-reference-features{margin-left:auto;margin-right:auto}.journey-reference-participant{justify-self:center}.journey-reference-context{display:none}}
@media(max-width:680px){ .journey-reference-nav{padding:0 16px}.journey-reference-logo{width:165px}.journey-reference-nav-actions{gap:6px}.journey-reference-leaderboard{padding:9px 10px;font-size:8px}.journey-reference-body{width:min(100% - 28px,620px);padding:22px 0}.journey-reference-copy h1{font-size:48px}.journey-reference-copy>p{font-size:16px}.journey-reference-features{grid-template-columns:1fr;text-align:left}.journey-reference-participant .participant-card{padding:22px}.journey-reference-participant .start-actions{grid-template-columns:1fr}.journey-reference-backdrop{display:none}}
html[lang="ar"] .journey-reference-copy{text-align:right} html[lang="ar"] .journey-reference-copy>p{direction:rtl} html[lang="ar"] .journey-reference-features{direction:rtl}


/* v3.12 - robust 3D door flip: keep front/back faces isolated */
.door-shape {
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  isolation: isolate;
}
.door-face-content,
.door-details {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  box-sizing: border-box;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.door-face-content {
  z-index: 2;
  transform: rotateY(0deg);
  padding: 20px 18px 34px;
}
.door-details {
  z-index: 3;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 18px 34px;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 5px rgba(0,0,0,.18);
  opacity: 1;
}
.door-details[hidden] { display: flex; }
.door.is-flipped .door-face-content,
.door:not(.is-flipped) .door-details {
  visibility: hidden;
}
.door.is-flipped .door-details,
.door:not(.is-flipped) .door-face-content {
  visibility: visible;
}
.door-flip-control {
  z-index: 10;
  pointer-events: auto;
}
.door-face-content strong,
.door-details .door-detail-title,
.door-details .door-detail-copy,
.door-details .door-video {
  position: relative;
  z-index: 2;
}
.door-details .door-detail-title {
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: .03em;
}
.door-details .door-detail-copy {
  max-width: 90%;
}
.door-details::before {
  content: "";
  position: absolute;
  inset: 16px 14px 0;
  border: 2px solid rgba(255,255,255,.22);
  border-bottom: 0;
  pointer-events: none;
}
.door-details::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  right: 12px;
  top: 126px;
  box-shadow: 0 0 0 3px rgba(255,255,255,.14);
  pointer-events: none;
}

/* v3.12 - customer card details: never alter the layout while flipping */
.card-details {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
}
.customer.card-flipped .card-details {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.customer.card-flipped .issue,
.customer.card-flipped .urgency,
.customer.card-flipped .customer-hint {
  visibility: hidden;
}


/* v3.12 - isolate 3D door faces so flipped doors never bleed front content */
.door { perspective: 1100px; }
.door-shape {
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  isolation: isolate;
  overflow: hidden;
}
.door-face-content,
.door-details {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.door-face-content {
  z-index: 2;
  transform: rotateY(0deg);
  justify-content: center;
  align-items: center;
  padding: 22px 18px 36px;
}
.door-details {
  z-index: 3;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 18px 36px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 5px rgba(0,0,0,.18);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.door:not(.is-flipped) .door-face-content { visibility: visible; opacity: 1; }
.door:not(.is-flipped) .door-details { visibility: hidden; opacity: 0; }
.door.is-flipped .door-face-content { visibility: hidden; opacity: 0; }
.door.is-flipped .door-details { visibility: visible; opacity: 1; pointer-events: auto; }
.door-details[hidden] { display: flex; }
.door-details .door-detail-title { position: relative; z-index: 2; font-size: 12px; line-height: 1.1; letter-spacing: .03em; }
.door-details .door-detail-copy { position: relative; z-index: 2; margin: 0; max-width: 88%; font-size: 9px; line-height: 1.45; }
.door-details .door-video { position: relative; z-index: 2; }
.door-flip-control {
  z-index: 10;
  pointer-events: auto;
}


/* v3.13 - stable door flip: only the two door faces rotate; the control stays fixed */
.door { overflow: visible; }
.door-shape {
  perspective: 1100px;
  transform-style: flat;
  overflow: hidden;
}
.door-face-content,
.door-details {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .15s ease;
}
.door-face-content {
  transform: rotateY(0deg);
  z-index: 2;
  opacity: 1;
  visibility: visible;
}
.door-details {
  transform: rotateY(180deg);
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 18px 38px;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.door.is-flipped .door-face-content {
  transform: rotateY(180deg);
  opacity: 0;
  visibility: hidden;
}
.door.is-flipped .door-details {
  transform: rotateY(0deg);
  opacity: 1;
  visibility: visible;
}
.door-details .door-detail-title { font-size: 13px; font-weight: 950; line-height: 1.1; position:relative; z-index:2; }
.door-details .door-detail-copy { max-width: 88%; margin: 0; font-size: 9px; line-height: 1.5; opacity: .96; position:relative; z-index:2; }
.door-details .door-video { position:relative; z-index:2; color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,.55); border-radius:999px; padding:7px 10px; font-size:8px; font-weight:950; }
.door-details::before { content:""; position:absolute; inset:18px 14px 8px; border:2px solid rgba(255,255,255,.22); pointer-events:none; }
.door-details::after { content:""; position:absolute; width:6px; height:6px; border-radius:50%; background:#fff; right:12px; top:126px; box-shadow:0 0 0 3px rgba(255,255,255,.14); pointer-events:none; }
.door-flip-control {
  position:absolute; right:8px; bottom:16px; z-index:20; padding:5px 8px; border-radius:999px;
  background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.34);
  font-size:7px; font-weight:950; letter-spacing:.06em; cursor:pointer;
  line-height:1; user-select:none;
}
.door.is-flipped .door-flip-control { background:rgba(255,255,255,.22); }

/* v3.13 - clean customer-card details overlay; no content bleed or overlap */
.customer .speech { position:relative; overflow:hidden; }
.customer .card-details {
  position:absolute; inset:0; margin:0; border-radius:18px; padding:48px 16px 16px;
  background:#fff; z-index:30; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease;
}
.customer.card-flipped .card-details { opacity:1; visibility:visible; pointer-events:auto; }
.customer.card-flipped .issue,
.customer.card-flipped .urgency,
.customer.card-flipped .emotion,
.customer.card-flipped .hint-reveal { visibility:hidden; }
.customer .card-details b { font-size:10px; color:var(--orange); letter-spacing:.08em; }
.customer .card-details .clue-detail { font-size:10px; line-height:1.45; color:#56697c; text-align:center; }
.customer .card-flip-control { z-index:40; }


/* v3.13 - final flip cleanup: the door control stays outside the rotating surface and the two faces never overlap */
.door-shape { transform-style: flat !important; perspective: none !important; }
.door-face-content, .door-details {
  transform-style: preserve-3d;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  will-change: transform, opacity;
}
.door-face-content { transform: rotateY(0deg) !important; opacity:1 !important; visibility:visible !important; pointer-events:none; }
.door-details { transform: rotateY(180deg) !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; display:flex !important; }
.door.is-flipped .door-face-content { transform: rotateY(180deg) !important; opacity:0 !important; visibility:hidden !important; }
.door.is-flipped .door-details { transform: rotateY(0deg) !important; opacity:1 !important; visibility:visible !important; pointer-events:auto !important; }
.door-flip-control { pointer-events:auto !important; transform:none !important; }

/* Customer cards: flip details are a solid replacement surface, never a transparent overlay. */
.customer .speech { position:relative; overflow:hidden; }
.customer .card-details {
  position:absolute !important; inset:0 !important; z-index:50 !important;
  background:#fff !important; border-radius:18px !important;
  display:none !important; opacity:1 !important; visibility:visible !important;
  pointer-events:none; box-sizing:border-box; padding:52px 16px 16px !important;
  flex-direction:column; align-items:center; justify-content:center; gap:8px;
}
.customer.card-flipped .card-details { display:flex !important; pointer-events:auto; }
.customer.card-flipped .issue,
.customer.card-flipped .urgency,
.customer.card-flipped .emotion,
.customer.card-flipped .hint-reveal,
.customer.card-flipped .customer-hint { display:none !important; }
.customer .card-flip-control { z-index:60 !important; }

/* v3.14: language containment and Arabic RTL hardening */
html[dir='rtl'] .customer .speech, html[dir='rtl'] .consequence-card, html[dir='rtl'] .tip-card, html[dir='rtl'] .queue-heading, html[dir='rtl'] .queue-count { direction: rtl; text-align: right; }
html[dir='rtl'] .customer .speech, html[dir='rtl'] .customer .issue, html[dir='rtl'] .customer .urgency, html[dir='rtl'] .card-details, html[dir='rtl'] .hint-reveal { unicode-bidi: plaintext; overflow-wrap: anywhere; word-break: normal; }
html[dir='rtl'] .customer .speech { min-width: 0; max-width: 100%; }
html[dir='rtl'] .customer .issue { line-height: 1.55; }
html[dir='rtl'] .door-top, html[dir='rtl'] .door-face-content, html[dir='rtl'] .door-details { direction: rtl; text-align: center; }
html[dir='rtl'] .door-top b, html[dir='rtl'] .door-face-content strong, html[dir='rtl'] .door-face-content small, html[dir='rtl'] .door-details p { overflow-wrap: anywhere; }
html[dir='rtl'] .panel-title, html[dir='rtl'] .impact-metrics, html[dir='rtl'] .result-performance-grid, html[dir='rtl'] .result-meta-strip, html[dir='rtl'] .feedback-toast, html[dir='rtl'] .result-message { direction: rtl; }
html[dir='rtl'] .result-message, html[dir='rtl'] .feedback-toast { text-align: right; }
html[lang='ar'] .customer-hint, html[lang='ar'] .card-flip-control, html[lang='ar'] .urgency, html[lang='ar'] .emotion { white-space: normal; }

/* v3.16: robust French/Arabic wrapping and direction */
html[lang='ar'] .customer .speech, html[lang='ar'] .card-details, html[lang='ar'] .hint-reveal, html[lang='ar'] .consequence-card, html[lang='ar'] .tip-card, html[lang='ar'] .result-card { direction: rtl; text-align: right; }
html[lang='ar'] .customer .speech, html[lang='ar'] .issue, html[lang='ar'] .clue-detail, html[lang='ar'] .hint-copy, html[lang='ar'] .consequence-card p { unicode-bidi: plaintext; overflow-wrap:anywhere; word-break:normal; }
html[lang='fr'] .customer .speech, html[lang='fr'] .issue, html[lang='fr'] .clue-detail, html[lang='fr'] .hint-copy, html[lang='fr'] .consequence-card p { overflow-wrap:anywhere; word-break:normal; }
html[lang='ar'] .customer .speech, html[lang='fr'] .customer .speech { min-width:0; }
.primary-button.already-played { background:#e9edf0 !important; color:#607087 !important; box-shadow:none !important; cursor:not-allowed !important; }