.cbc-game {
	--cbc-navy: #10233f;
	--cbc-blue: #2c67ef;
	--cbc-cyan: #27bedf;
	--cbc-yellow: #ffcd4a;
	--cbc-orange: #f58a38;
	--cbc-purple: #7048db;
	--cbc-green: #168565;
	--cbc-red: #ad3f3a;
	--cbc-ink: #1a2940;
	--cbc-muted: #65758a;
	--cbc-line: #dbe4ed;
	--cbc-soft: #f3f7fb;
	color: var(--cbc-ink);
	background: #edf5ff;
	font: 16px/1.58 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	overflow: hidden;
}

.cbc-game *, .cbc-game *::before, .cbc-game *::after { box-sizing: border-box; }
.cbc-game [hidden] { display: none !important; }
.cbc-game h2, .cbc-game h3, .cbc-game h4, .cbc-game p { margin-top: 0; }
.cbc-game h2, .cbc-game h3, .cbc-game h4 { color: var(--cbc-navy); line-height: 1.14; letter-spacing: -.025em; }
.cbc-game button, .cbc-game a { font: inherit; }
.cbc-game button:focus-visible, .cbc-game a:focus-visible, .cbc-game [tabindex="-1"]:focus-visible { outline: 4px solid rgba(255,205,74,.9); outline-offset: 3px; }
.cbc-game .cbc-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--cbc-blue); font-size: .74rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.cbc-game .cbc-kicker::before { content: ""; width: 21px; height: 3px; border-radius: 3px; background: var(--cbc-yellow); }
.cbc-game .cbc-button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 13px; padding: 12px 20px; color: #fff; background: linear-gradient(135deg,var(--cbc-blue),var(--cbc-purple)); box-shadow: 0 12px 26px rgba(44,103,239,.23); font-weight: 850; text-decoration: none; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.cbc-game .cbc-button:hover { transform: translateY(-2px); box-shadow: 0 15px 30px rgba(44,103,239,.3); }
.cbc-game .cbc-button-light { color: var(--cbc-blue); border: 2px solid #cad9f5; background: #fff; box-shadow: none; }

.cbc-game .cbc-hero { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 60px; min-height: 500px; padding: 72px max(24px, calc((100% - 1120px) / 2)); color: #fff; background: radial-gradient(circle at 82% 18%, rgba(39,190,223,.32), transparent 26%), linear-gradient(125deg,#0b1d34,#123858 60%,#18506d); }
.cbc-game .cbc-hero h2 { margin-bottom: 16px; color: #fff; font-size: clamp(3rem,7vw,5.7rem); }
.cbc-game .cbc-hero h2 span { display: block; color: #7ce2f3; }
.cbc-game .cbc-hero .cbc-kicker { color: #7ce2f3; }
.cbc-game .cbc-tagline { max-width: 650px; color: #d9e7f2; font-size: clamp(1.1rem,2.2vw,1.35rem); font-weight: 700; }
.cbc-game .cbc-safe-pill { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 99px; padding: 9px 13px; color: #dce9f4; background: rgba(255,255,255,.08); font-size: .78rem; font-weight: 700; }
.cbc-game .cbc-hero-art { position: relative; min-height: 350px; }
.cbc-game .cbc-chat-card { position: absolute; max-width: 255px; border: 1px solid rgba(255,255,255,.28); border-radius: 18px 18px 18px 5px; padding: 15px 17px; color: var(--cbc-navy); background: rgba(255,255,255,.96); box-shadow: 0 18px 40px rgba(0,0,0,.2); font-size: .88rem; font-weight: 750; }
.cbc-game .cbc-chat-card::after { content: ""; position: absolute; width: 9px; height: 9px; right: 13px; top: 13px; border-radius: 50%; background: #63d0b1; }
.cbc-game .cbc-chat-card.one { top: 30px; left: 5px; transform: rotate(-3deg); }
.cbc-game .cbc-chat-card.two { top: 130px; right: 0; border-radius: 18px 18px 5px 18px; transform: rotate(2deg); }
.cbc-game .cbc-chat-card.three { bottom: 40px; left: 35px; transform: rotate(-1deg); }
.cbc-game .cbc-shield { position: absolute; right: 28%; bottom: 100px; font-size: 6rem; filter: drop-shadow(0 18px 18px rgba(0,0,0,.22)); animation: cbc-float 3s ease-in-out infinite; }
@keyframes cbc-float { 50% { transform: translateY(-10px) rotate(3deg); } }
.cbc-game .cbc-urgent { padding: 13px 20px; color: #fff; background: #762936; text-align: center; }
.cbc-game .cbc-urgent strong { color: #fff; }

.cbc-game .cbc-shell { width: min(1060px,calc(100% - 40px)); margin: -42px auto 75px; position: relative; }
.cbc-game .cbc-screen { border: 1px solid rgba(16,35,63,.08); border-radius: 27px; padding: 42px; background: rgba(255,255,255,.98); box-shadow: 0 24px 70px rgba(16,35,63,.13); }
.cbc-game .cbc-welcome { text-align: center; }
.cbc-game .cbc-welcome h3, .cbc-game .cbc-complete h3 { margin-bottom: 13px; font-size: clamp(2rem,4.3vw,3.2rem); }
.cbc-game .cbc-intro { max-width: 760px; margin-inline: auto; color: var(--cbc-muted); font-size: 1.04rem; }
.cbc-game .cbc-role-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; margin: 31px 0 23px; }
.cbc-game .cbc-role { position: relative; display: flex; min-height: 230px; flex-direction: column; align-items: center; border: 2px solid var(--cbc-line); border-radius: 19px; padding: 24px 17px; color: var(--cbc-ink); background: var(--cbc-soft); cursor: pointer; transition: transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.cbc-game .cbc-role:hover { transform: translateY(-4px); border-color: #9eb7eb; box-shadow: 0 14px 28px rgba(16,35,63,.09); }
.cbc-game .cbc-role-icon { display: grid; width: 63px; height: 63px; margin-bottom: 13px; place-items: center; border-radius: 18px; background: #e1ebff; font-size: 2rem; }
.cbc-game .cbc-role:nth-child(2) .cbc-role-icon { background: #e3f7f0; }
.cbc-game .cbc-role:nth-child(3) .cbc-role-icon { background: #fff0d4; }
.cbc-game .cbc-role strong, .cbc-game .cbc-role small, .cbc-game .cbc-role b { display: block; }
.cbc-game .cbc-role strong { color: var(--cbc-navy); font-size: 1.08rem; }
.cbc-game .cbc-role small { margin: 6px 0 15px; color: var(--cbc-muted); }
.cbc-game .cbc-role b { margin-top: auto; border-radius: 99px; padding: 5px 9px; color: var(--cbc-blue); background: #e5edff; font-size: .68rem; text-transform: uppercase; }
.cbc-game .cbc-full-journey { width: min(480px,100%); }
.cbc-game .cbc-note { max-width: 700px; margin: 18px auto 0; color: #7b8797; font-size: .77rem; }

.cbc-game .cbc-play { padding: 28px; }
.cbc-game .cbc-toolbar { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; margin-bottom: 20px; }
.cbc-game .cbc-progress-area > span { display: block; margin-bottom: 6px; color: var(--cbc-muted); font-size: .77rem; font-weight: 700; }
.cbc-game .cbc-progress { overflow: hidden; height: 11px; border-radius: 99px; background: #e2e9f1; }
.cbc-game .cbc-progress i { display: block; width: 20%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--cbc-cyan),var(--cbc-blue)); transition: width .3s ease; }
.cbc-game .cbc-meter { display: flex; align-items: center; gap: 8px; min-width: 120px; border: 1px solid var(--cbc-line); border-radius: 13px; padding: 8px 11px; background: #fff; }
.cbc-game .cbc-meter > span { font-size: 1.6rem; }
.cbc-game .cbc-meter small, .cbc-game .cbc-meter strong { display: block; }
.cbc-game .cbc-meter small { color: var(--cbc-muted); font-size: .64rem; text-transform: uppercase; }
.cbc-game .cbc-meter strong { line-height: 1; }
.cbc-game .cbc-exit { min-height: 42px; border: 1px solid #cbd7e4; border-radius: 11px; padding: 8px 12px; color: var(--cbc-muted); background: #fff; font-size: .76rem; font-weight: 750; cursor: pointer; }
.cbc-game .cbc-stage { overflow: hidden; border: 1px solid var(--cbc-line); border-radius: 20px; background: var(--cbc-soft); }
.cbc-game .cbc-scenario-head { display: flex; align-items: center; gap: 14px; padding: 21px 25px; color: #fff; background: linear-gradient(120deg,var(--cbc-navy),#154d73); }
.cbc-game .cbc-scenario-head .cbc-kicker { margin-bottom: 4px; color: #7ce2f3; }
.cbc-game .cbc-scenario-head h3 { margin: 0; color: #fff; font-size: 1.65rem; }
.cbc-game .cbc-role-mini { display: grid; width: 55px; height: 55px; place-items: center; border-radius: 15px; background: rgba(255,255,255,.12); font-size: 1.9rem; }
.cbc-game .cbc-scenario-grid { display: grid; grid-template-columns: .88fr 1.12fr; align-items: start; gap: 22px; padding: 25px; }
.cbc-game .cbc-situation, .cbc-game .cbc-decision { border: 1px solid var(--cbc-line); border-radius: 17px; padding: 20px; background: #fff; }
.cbc-game .cbc-situation > p { color: var(--cbc-muted); font-size: .9rem; }
.cbc-game .cbc-phone { overflow: hidden; border: 7px solid var(--cbc-navy); border-radius: 22px; padding-bottom: 13px; background: #f2f6f9; }
.cbc-game .cbc-phone-bar { margin-bottom: 12px; padding: 9px 12px; color: #fff; background: var(--cbc-navy); font-size: .7rem; text-align: center; }
.cbc-game .cbc-phone-bar span { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #65d2b0; }
.cbc-game .cbc-message { display: flex; margin: 8px 11px; }
.cbc-game .cbc-message span { display: inline-block; max-width: 88%; border-radius: 13px 13px 13px 4px; padding: 8px 10px; color: #3c4d62; background: #fff; box-shadow: 0 3px 8px rgba(16,35,63,.06); font-size: .76rem; }
.cbc-game .cbc-message.other, .cbc-game .cbc-message.fake { justify-content: flex-end; }
.cbc-game .cbc-message.other span, .cbc-game .cbc-message.fake span { border-radius: 13px 13px 4px 13px; color: #65302c; background: #fff0ef; }
.cbc-game .cbc-message.system { justify-content: center; }
.cbc-game .cbc-message.system span { color: #758395; background: transparent; box-shadow: none; font-size: .65rem; }
.cbc-game .cbc-decision > h4 { margin-bottom: 5px; font-size: 1.2rem; }
.cbc-game .cbc-select-label { color: var(--cbc-muted); font-size: .8rem; }
.cbc-game .cbc-choices { display: grid; gap: 10px; }
.cbc-game .cbc-choices button { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 10px; width: 100%; border: 2px solid var(--cbc-line); border-radius: 13px; padding: 12px; color: var(--cbc-ink); background: #fff; text-align: left; cursor: pointer; transition: transform .16s ease,border-color .16s ease,background .16s ease; }
.cbc-game .cbc-choices button:hover:not(:disabled) { transform: translateY(-2px); border-color: #9db5e9; }
.cbc-game .cbc-choices button > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; color: var(--cbc-blue); background: #e9efff; font-weight: 900; }
.cbc-game .cbc-choices button.is-best { border-color: #94d0bd; }
.cbc-game .cbc-choices button.is-best::after { content: "Safer choice"; grid-column: 2; color: var(--cbc-green); font-size: .67rem; font-weight: 850; text-transform: uppercase; }
.cbc-game .cbc-choices button.is-selected-best { color: #105c47; background: #eaf8f3; box-shadow: inset 0 0 0 1px var(--cbc-green); }
.cbc-game .cbc-choices button.is-selected-partial { color: #6f5316; border-color: #e6c25e; background: #fff7dd; }
.cbc-game .cbc-choices button.is-selected-risky { color: #74332f; border-color: #e3aaa6; background: #fff1f0; }
.cbc-game .cbc-feedback { display: grid; grid-template-columns: auto 1fr; gap: 13px; margin-top: 15px; border-radius: 15px; padding: 16px; }
.cbc-game .cbc-feedback.score-100 { color: #105c47; background: #e8f8f2; }
.cbc-game .cbc-feedback.score-40 { color: #6f5316; background: #fff6d9; }
.cbc-game .cbc-feedback.score-0 { color: #71322e; background: #fff0ef; }
.cbc-game .cbc-feedback-icon { font-size: 2rem; }
.cbc-game .cbc-feedback h4 { margin-bottom: 5px; color: inherit; }
.cbc-game .cbc-feedback p { margin-bottom: 10px; font-size: .84rem; }
.cbc-game .cbc-lesson { margin-bottom: 13px; border-left: 3px solid currentColor; padding-left: 10px; font-size: .79rem; }
.cbc-game .cbc-next { min-height: 44px; padding: 9px 15px; font-size: .8rem; }

.cbc-game .cbc-complete { overflow: hidden; text-align: center; }
.cbc-game .cbc-celebrate { font-size: 3rem; animation: cbc-pop .6s ease-out; }
@keyframes cbc-pop { from { opacity: 0; transform: scale(.4); } 70% { transform: scale(1.12); } }
.cbc-game .cbc-complete-copy { max-width: 700px; margin-inline: auto; color: var(--cbc-muted); }
.cbc-game .cbc-score-result { display: inline-flex; align-items: baseline; gap: 8px; margin: 12px 0 22px; border-radius: 15px; padding: 13px 20px; color: #584100; background: #fff0b8; }
.cbc-game .cbc-score-result strong { font-size: 2.5rem; line-height: 1; }
.cbc-game .cbc-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 11px; }
.cbc-game .cbc-badges > div { min-width: 140px; border: 1px solid var(--cbc-line); border-radius: 14px; padding: 14px; background: var(--cbc-soft); }
.cbc-game .cbc-badges span, .cbc-game .cbc-badges strong { display: block; }
.cbc-game .cbc-badges span { font-size: 2rem; }
.cbc-game .cbc-badges strong { margin-top: 3px; font-size: .77rem; }
.cbc-game .cbc-remember { max-width: 760px; margin: 26px auto; border-radius: 17px; padding: 20px; background: #eef6ff; text-align: left; }
.cbc-game .cbc-remember h4 { text-align: center; }
.cbc-game .cbc-remember > div { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; }
.cbc-game .cbc-remember span { display: block; border-radius: 12px; padding: 12px; background: #fff; }
.cbc-game .cbc-remember b { display: grid; width: 30px; height: 30px; margin-bottom: 6px; place-items: center; border-radius: 50%; color: #fff; background: var(--cbc-blue); }
.cbc-game .cbc-remember strong, .cbc-game .cbc-remember small { display: block; }
.cbc-game .cbc-remember small { margin-top: 2px; color: var(--cbc-muted); }
.cbc-game .cbc-complete-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.cbc-game .cbc-privacy { display: flex; align-items: center; justify-content: center; gap: 11px; padding: 26px 20px; color: #d8e7f4; background: var(--cbc-navy); text-align: left; }
.cbc-game .cbc-privacy > span { font-size: 1.8rem; }
.cbc-game .cbc-privacy strong { color: #fff; }
.cbc-game .cbc-privacy p { margin: 2px 0 0; font-size: .78rem; }

@media (max-width: 880px) {
	.cbc-game .cbc-hero { grid-template-columns: 1fr; text-align: center; }
	.cbc-game .cbc-hero-copy { display: flex; flex-direction: column; align-items: center; }
	.cbc-game .cbc-hero-art { width: min(520px,100%); margin-inline: auto; }
	.cbc-game .cbc-role-grid { grid-template-columns: 1fr; }
	.cbc-game .cbc-role { min-height: 190px; }
	.cbc-game .cbc-scenario-grid { grid-template-columns: 1fr; }
	.cbc-game .cbc-remember > div { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
	.cbc-game .cbc-hero { padding: 58px 20px 72px; }
	.cbc-game .cbc-hero-art { min-height: 310px; }
	.cbc-game .cbc-chat-card { max-width: 220px; }
	.cbc-game .cbc-shield { right: 32%; font-size: 4.8rem; }
	.cbc-game .cbc-shell { width: calc(100% - 24px); margin-top: -28px; }
	.cbc-game .cbc-screen { padding: 24px 18px; border-radius: 20px; }
	.cbc-game .cbc-play { padding: 13px; }
	.cbc-game .cbc-toolbar { grid-template-columns: 1fr 1fr; }
	.cbc-game .cbc-progress-area { grid-column: 1 / -1; }
	.cbc-game .cbc-meter { justify-content: center; }
	.cbc-game .cbc-exit { height: 100%; }
	.cbc-game .cbc-scenario-head { padding: 17px; }
	.cbc-game .cbc-scenario-grid { padding: 13px; }
	.cbc-game .cbc-situation, .cbc-game .cbc-decision { padding: 15px; }
	.cbc-game .cbc-feedback { grid-template-columns: 1fr; }
	.cbc-game .cbc-remember > div { grid-template-columns: 1fr; }
	.cbc-game .cbc-complete-actions { flex-direction: column; }
	.cbc-game .cbc-complete-actions .cbc-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.cbc-game *, .cbc-game *::before, .cbc-game *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}