@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

body.bigstep-3d-chess-page { background:#070a09!important; color:#f6f7f2; }
body.bigstep-3d-chess-page #content { background:#070a09!important; }
body.bigstep-3d-chess-page .haru-page-title,
body.bigstep-3d-chess-page .page-sidebar { display:none!important; }
body.bigstep-3d-chess-page .haru-page>.h-row { width:100%!important; max-width:none!important; margin:0!important; padding:0!important; }
body.bigstep-3d-chess-page .page-content,
body.bigstep-3d-chess-page .page-content.has-right-sidebar,
body.bigstep-3d-chess-page .page-content-wrap { width:100%!important; max-width:none!important; flex:0 0 100%!important; padding:0!important; }
body.bigstep-3d-chess-page .content-area,
body.bigstep-3d-chess-page .site-main { width:100%!important; max-width:none!important; margin:0!important; padding:0!important; }
body.bigstep-3d-chess-page .entry-header,
body.bigstep-3d-chess-page .entry-title { display:none!important; }
body.bigstep-3d-chess-page .entry-content { margin:0!important; }

.bs3c-app { --lime:#b7ff22; --graphite:#121212; --line:#303933; min-height:100vh; overflow:hidden; background:radial-gradient(circle at 70% 31%,rgba(183,255,34,.105),transparent 30%),linear-gradient(135deg,#070a09,#0c110d 58%,#080b09); font-family:Inter,Arial,sans-serif; color:#f6f7f2; }
.bs3c-app * { box-sizing:border-box; }
.bs3c-hero { width:min(1500px,calc(100% - 48px)); margin:0 auto; padding:52px 0 28px; display:flex; align-items:flex-end; justify-content:space-between; gap:42px; }
.bs3c-kicker,.bs3c-panel-kicker { display:inline-flex; align-items:center; gap:10px; color:var(--lime); font:700 12px/1 'Chakra Petch',sans-serif; letter-spacing:.14em; text-transform:uppercase; }
.bs3c-kicker::before,.bs3c-panel-kicker::before { content:''; width:34px; height:2px; background:var(--lime); box-shadow:12px 0 0 -0.5px rgba(183,255,34,.45); }
.bs3c-hero h1 { margin:18px 0 14px; max-width:850px; color:#f6f7f2!important; font:700 clamp(44px,4.1vw,72px)/.99 'Chakra Petch',sans-serif; letter-spacing:-.055em; }
.bs3c-hero h1 em,.bs3c-panel h2 em { color:var(--lime); font-style:normal; }
.bs3c-hero p { max-width:720px; margin:0; color:#adb5ae; font-size:16px; line-height:1.58; }
.bs3c-prize-strip { display:grid; grid-template-columns:repeat(2,minmax(130px,1fr)); gap:8px; width:min(430px,100%); }
.bs3c-prize-strip span { min-height:64px; padding:11px 14px; border:1px solid #2b342d; border-radius:12px; background:rgba(18,22,19,.78); color:#919a93; font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.bs3c-prize-strip b { display:block; margin-bottom:3px; color:#f7f8f3; font:700 21px/1 'Chakra Petch',sans-serif; }
.bs3c-prize-strip small { display:block; color:inherit; font-size:inherit; line-height:1.2; }
.bs3c-prize-strip span:last-child b { color:var(--lime); }

.bs3c-game { position:relative; width:min(1500px,calc(100% - 48px)); margin:0 auto 32px; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr); min-height:680px; border:1px solid #2a332c; border-radius:22px; overflow:hidden; background:linear-gradient(140deg,rgba(15,20,16,.94),rgba(8,11,9,.97)); box-shadow:0 34px 90px rgba(0,0,0,.42); }
.bs3c-game::before { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(rgba(183,255,34,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(183,255,34,.025) 1px,transparent 1px); background-size:38px 38px; mask-image:radial-gradient(circle at 35% 52%,#000,transparent 67%); }
.bs3c-board-shell { position:relative; min-width:0; min-height:680px; border-right:1px solid #344038; background:radial-gradient(circle at 50% 48%,#17201b 0,#0c120f 72%); isolation:isolate; }
.bs3c-board-shell::after { content:''; position:absolute; z-index:2; inset:0; pointer-events:none; box-shadow:inset 0 0 74px 12px rgba(0,0,0,.38); background:linear-gradient(180deg,rgba(2,4,3,.18),transparent 28%,transparent 78%,rgba(2,4,3,.2)); }
.bs3c-matchbar { position:absolute; z-index:4; top:18px; left:18px; right:18px; min-height:60px; padding:8px 12px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; border:1px solid rgba(132,145,135,.22); border-radius:14px; background:rgba(7,10,8,.7); backdrop-filter:blur(12px); }
.bs3c-matchbar>span { display:grid; grid-template-columns:34px 1fr; grid-template-rows:auto auto; align-items:center; column-gap:10px; min-width:0; }
.bs3c-matchbar>span:last-child { text-align:right; grid-template-columns:1fr 34px; }
.bs3c-matchbar>span:last-child i { grid-column:2; grid-row:1/3; }
.bs3c-matchbar>span:last-child b,.bs3c-matchbar>span:last-child small { grid-column:1; }
.bs3c-matchbar i { grid-row:1/3; width:32px; height:32px; border-radius:50%; border:1px solid rgba(255,255,255,.18); box-shadow:inset 0 0 12px rgba(255,255,255,.12); }
.bs3c-matchbar i.is-white { background:#eeeade; }
.bs3c-matchbar i.is-black { background:#121512; box-shadow:inset 0 0 0 1px rgba(183,255,34,.26); }
.bs3c-matchbar b { font:700 13px/1.2 'Chakra Petch',sans-serif; }
.bs3c-matchbar small { color:#737c75; font-size:10px; text-transform:uppercase; }
.bs3c-matchbar>strong { max-width:240px; color:var(--lime); font:600 12px/1.25 'Chakra Petch',sans-serif; text-align:center; letter-spacing:.04em; }
.bs3c-canvas { position:absolute; z-index:1; inset:0; cursor:grab; touch-action:none; }
.bs3c-canvas:active { cursor:grabbing; }
.bs3c-canvas canvas { width:100%!important; height:100%!important; display:block; }
.bs3c-thinking { position:absolute; z-index:5; left:50%; bottom:18px; transform:translateX(-50%); display:flex; align-items:center; gap:9px; padding:9px 14px; border:1px solid #3f5120; border-radius:999px; background:rgba(8,11,9,.88); color:#dce3dc; font-size:11px; backdrop-filter:blur(10px); }
.bs3c-thinking[hidden] { display:none; }
.bs3c-thinking i { width:9px; height:9px; border:2px solid rgba(183,255,34,.28); border-top-color:var(--lime); border-radius:50%; animation:bs3cSpin .7s linear infinite; }
@keyframes bs3cSpin { to { transform:rotate(360deg); } }
.bs3c-camera { position:absolute; z-index:6; left:18px; top:92px; display:flex; gap:5px; padding:5px; border:1px solid #303832; border-radius:12px; background:rgba(5,8,6,.84); backdrop-filter:blur(12px); }
.bs3c-camera button { min-width:58px; height:34px; padding:0 10px; appearance:none; border:1px solid transparent!important; border-radius:8px!important; background:transparent!important; color:#89928b!important; font:700 9px 'Chakra Petch',sans-serif!important; letter-spacing:.04em; cursor:pointer; box-shadow:none!important; transition:.18s ease; }
.bs3c-camera button:hover { border-color:#536044!important; background:#171d18!important; color:#f1f4ef!important; }
.bs3c-camera button.is-active,.bs3c-camera button.is-active:hover { border-color:rgba(183,255,34,.45)!important; background:rgba(183,255,34,.12)!important; color:var(--lime)!important; }
.bs3c-board-guide { position:absolute; z-index:5; left:50%; top:151px; width:min(430px,calc(100% - 36px)); padding:13px 16px; transform:translateX(-50%); border:1px solid rgba(183,255,34,.3); border-radius:12px; background:rgba(5,8,6,.85); box-shadow:0 18px 45px rgba(0,0,0,.46); backdrop-filter:blur(10px); text-align:center; pointer-events:none; }
.bs3c-board-guide[hidden] { display:none; }
.bs3c-board-guide b { display:block; margin-bottom:3px; color:var(--lime); font:700 10px 'Chakra Petch',sans-serif; letter-spacing:.08em; }
.bs3c-board-guide span { color:#a7afa9; font-size:10px; line-height:1.45; }

.bs3c-panel { position:relative; z-index:2; padding:38px 30px 30px; display:flex; flex-direction:column; background:linear-gradient(180deg,rgba(16,20,17,.9),rgba(8,11,9,.96)); }
.bs3c-panel h2 { margin:14px 0 22px; color:#f6f7f2!important; font:700 38px/1.02 'Chakra Petch',sans-serif; letter-spacing:-.045em; }
.bs3c-levels { display:grid; gap:8px; }
.bs3c-levels button { position:relative; min-height:70px; display:grid; grid-template-columns:42px 1fr auto; grid-template-rows:auto auto; align-items:center; column-gap:11px; padding:10px 12px; appearance:none; border:1px solid #303833!important; border-radius:12px!important; background:#121613!important; color:#f2f4ef!important; text-align:left; cursor:pointer; box-shadow:none!important; transition:.22s ease; }
.bs3c-levels button:hover { border-color:#68783a!important; background:#171d18!important; color:#fff!important; transform:translateX(-3px); }
.bs3c-levels button.is-active,.bs3c-levels button.is-active:hover { border-color:var(--lime)!important; background:linear-gradient(100deg,rgba(183,255,34,.13),rgba(18,22,19,.96))!important; color:#fff!important; box-shadow:0 0 0 1px rgba(183,255,34,.08),0 10px 28px rgba(0,0,0,.24)!important; }
.bs3c-levels button>span { grid-row:1/3; display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:#222925; color:#69716b; font:700 13px 'Chakra Petch',sans-serif; }
.bs3c-levels button.is-active>span { background:var(--lime); color:#111; }
.bs3c-levels b { font:700 14px/1.2 'Chakra Petch',sans-serif; }
.bs3c-levels small { grid-column:2; color:#747d76; font-size:10px; }
.bs3c-levels strong { grid-column:3; grid-row:1/3; color:#a9b1aa; font:700 11px 'Chakra Petch',sans-serif; }
.bs3c-levels button.is-active strong { color:var(--lime); }
.bs3c-levels button[data-free-only] { border-style:dashed; }
.bs3c-levels button[data-free-only] strong { color:#778078; }
.bs3c-app:not(.is-free-mode) .bs3c-levels button[data-free-only]::after { content:'LUYỆN TẬP'; position:absolute; top:6px; right:7px; color:#677068; font:700 7px 'Chakra Petch',sans-serif; letter-spacing:.08em; }
.bs3c-app.is-free-mode .bs3c-levels button[data-free-only] { border-color:#465348; }
.bs3c-mode { margin-top:14px; display:grid; grid-template-columns:1fr 1fr; padding:4px; border:1px solid #2d3530; border-radius:11px; background:#090c0a; }
.bs3c-mode button { min-height:38px; appearance:none; border:0!important; border-radius:8px!important; background:transparent!important; color:#6f7871!important; font:700 9px/1.2 'Chakra Petch',sans-serif!important; cursor:pointer; box-shadow:none!important; }
.bs3c-mode button:hover { background:#151a16!important; color:#dfe5df!important; }
.bs3c-mode button.is-active,.bs3c-mode button.is-active:hover { background:#202720!important; color:#f5f7f2!important; }
.bs3c-ready { margin:11px 0 -2px; display:flex; align-items:center; gap:8px; color:#8c968e; font-size:10px; }
.bs3c-ready i { width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 12px rgba(183,255,34,.72); }
.bs3c-ready b { color:#dce3dc; font-weight:600; }
.bs3c-level-label { margin:18px 0 9px; color:#69736b; font:700 9px 'Chakra Petch',sans-serif; letter-spacing:.1em; }
.bs3c-panel .bs3c-start { margin-top:12px; min-height:54px; padding:0 18px; display:flex; align-items:center; justify-content:space-between; border:0!important; border-radius:12px; background:var(--lime)!important; color:#0b0e0c!important; font:700 13px 'Chakra Petch',sans-serif; cursor:pointer; box-shadow:0 14px 32px rgba(183,255,34,.12); }
.bs3c-panel .bs3c-start:disabled { background:var(--lime)!important; color:#0b0e0c!important; opacity:.38; cursor:not-allowed; box-shadow:none; }
.bs3c-panel .bs3c-start:hover:not(:disabled) { background:#c6ff50!important; color:#070a08!important; transform:translateY(-1px); }
.bs3c-app.is-playing .bs3c-ready { display:none; }
.bs3c-start span { font-size:20px; }
.bs3c-panel .bs3c-reset { margin-top:12px; min-height:48px; appearance:none; border:1px solid var(--lime)!important; border-radius:12px!important; background:var(--lime)!important; color:#0b0e0c!important; font:700 12px 'Chakra Petch',sans-serif!important; cursor:pointer; box-shadow:0 12px 28px rgba(183,255,34,.12)!important; }
.bs3c-panel .bs3c-reset:hover,.bs3c-panel .bs3c-reset:focus-visible { border-color:#c6ff50!important; background:#c6ff50!important; color:#070a08!important; }
.bs3c-note { margin:auto 0 0; padding-top:18px; color:#687169; font-size:10px; line-height:1.55; }

.bs3c-how { width:min(1500px,calc(100% - 48px)); margin:0 auto 70px; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #283029; border-bottom:1px solid #283029; }
.bs3c-how>div { position:relative; padding:25px 28px 28px 62px; border-right:1px solid #283029; }
.bs3c-how>div:last-child { border:0; }
.bs3c-how b { position:absolute; left:20px; top:25px; color:var(--lime); font:700 12px 'Chakra Petch',sans-serif; }
.bs3c-how span { display:block; margin-bottom:7px; font:700 15px 'Chakra Petch',sans-serif; }
.bs3c-how p { margin:0; color:#778078; font-size:12px; line-height:1.5; }
.bs3c-seo { width:min(1240px,calc(100% - 48px)); margin:0 auto 80px; padding:44px; display:grid; grid-template-columns:.9fr 1.1fr; gap:38px 70px; border:1px solid #283029; border-radius:20px; background:linear-gradient(135deg,rgba(183,255,34,.035),rgba(18,23,19,.35)); }
.bs3c-seo h2 { margin:12px 0 0; color:#f5f7f2; font:700 clamp(31px,3vw,46px)/1.03 'Chakra Petch',sans-serif; letter-spacing:-.035em; }
.bs3c-seo h2 em { color:var(--lime); font-style:normal; }
.bs3c-seo-copy { padding-top:20px; }
.bs3c-seo-copy p { margin:0 0 14px; color:#9aa39c; font-size:14px; line-height:1.75; }
.bs3c-faq { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.bs3c-faq details { padding:17px 18px; border:1px solid #303932; border-radius:12px; background:#0d110e; }
.bs3c-faq summary { color:#e9ede9; font:700 12px 'Chakra Petch',sans-serif; cursor:pointer; }
.bs3c-faq p { margin:11px 0 0; color:#7f8981; font-size:11px; line-height:1.55; }

.bs3c-modal[hidden] { display:none; }
.bs3c-modal { position:fixed; z-index:10020; inset:0; display:grid; place-items:center; padding:20px; opacity:0; transition:.22s ease; }
.bs3c-modal.is-open { opacity:1; }
.bs3c-modal-bg { position:absolute; inset:0; background:rgba(2,4,3,.82); backdrop-filter:blur(14px); }
.bs3c-modal section { position:relative; width:min(520px,100%); padding:34px; border:1px solid #374139; border-radius:20px; background:linear-gradient(145deg,#131815,#090c0a); box-shadow:0 38px 100px rgba(0,0,0,.68); text-align:center; transform:translateY(14px) scale(.98); transition:.24s ease; }
.bs3c-modal.is-open section { transform:none; }
.bs3c-modal section>button[data-close] { position:absolute; top:12px; right:14px; width:34px; height:34px; border:0; background:transparent; color:#808980; font-size:27px; cursor:pointer; }
.bs3c-result-kicker { color:var(--lime); font:700 11px 'Chakra Petch',sans-serif; letter-spacing:.12em; }
.bs3c-modal h2 { margin:13px 0 9px; font:700 34px/1.06 'Chakra Petch',sans-serif; }
.bs3c-modal p { color:#9ca49e; font-size:13px; line-height:1.55; }
.bs3c-coupon { width:100%; min-height:58px; margin:14px 0 8px; padding:0 15px; display:flex; align-items:center; justify-content:space-between; border:1px dashed var(--lime); border-radius:11px; background:rgba(183,255,34,.06); color:#f4f6f1; cursor:pointer; }
.bs3c-coupon strong { font:700 17px 'Chakra Petch',sans-serif; letter-spacing:.08em; }
.bs3c-coupon span { color:var(--lime); font:700 10px 'Chakra Petch',sans-serif; }
[data-coupon]>small { display:block; color:#687169; font-size:10px; }
[data-coupon]>a { min-height:48px; margin-top:15px; display:grid; place-items:center; border-radius:10px; background:var(--lime)!important; color:#090c0a!important; font:700 12px 'Chakra Petch',sans-serif; text-decoration:none!important; }
.bs3c-again { width:100%; min-height:46px; margin-top:10px; border:1px solid var(--lime)!important; border-radius:10px; background:var(--lime)!important; color:#090c0a!important; font:700 11px 'Chakra Petch',sans-serif; cursor:pointer; box-shadow:0 12px 28px rgba(183,255,34,.12)!important; }
.bs3c-again:hover,.bs3c-again:focus-visible,[data-coupon]>a:hover,[data-coupon]>a:focus-visible { background:#c6ff50!important; color:#070a08!important; }
.bs3c-modal-status { min-height:18px; margin:10px 0 0!important; color:#ffb56b!important; }

@media (max-width:1100px) {
  .bs3c-hero { align-items:flex-start; }
  .bs3c-prize-strip { width:360px; }
  .bs3c-game { grid-template-columns:minmax(0,1.2fr) 340px; }
  .bs3c-panel { padding:30px 22px 24px; }
  .bs3c-panel h2 { font-size:32px; }
}

@media (max-width:820px) {
  .bs3c-hero { width:calc(100% - 28px); padding:30px 0 20px; display:block; }
  .bs3c-hero h1 { margin-top:14px; font-size:clamp(38px,9vw,56px); }
  .bs3c-hero p { font-size:13px; }
  .bs3c-prize-strip { width:100%; margin-top:20px; grid-template-columns:repeat(2,1fr); overflow:visible; }
  .bs3c-prize-strip span { min-width:0; }
  .bs3c-game { width:100%; margin:0 0 24px; min-height:0; display:flex; flex-direction:column; border-inline:0; border-radius:0; }
  .bs3c-board-shell { order:2; min-height:590px; border:0; scroll-margin-top:88px; }
  .bs3c-panel { order:1; padding:24px 14px 16px; border-bottom:1px solid #283029; }
  .bs3c-panel h2 { margin:11px 0 15px; font-size:30px; }
  .bs3c-levels { grid-template-columns:1fr 1fr; }
  .bs3c-levels button { min-height:66px; grid-template-columns:35px 1fr; padding:8px; column-gap:8px; }
  .bs3c-levels button>span { width:33px; height:33px; }
  .bs3c-levels strong { grid-column:2; grid-row:2; font-size:9px; }
  .bs3c-levels small { display:none; }
  .bs3c-note { margin-top:12px; padding-top:0; }
  .bs3c-matchbar { top:10px; left:10px; right:10px; min-height:54px; }
  .bs3c-matchbar>strong { font-size:10px; }
  .bs3c-matchbar i { width:27px; height:27px; }
  .bs3c-camera { left:50%; top:74px; width:max-content; max-width:calc(100% - 20px); transform:translateX(-50%); }
  .bs3c-camera button { min-width:53px; padding:0 8px; }
  .bs3c-board-guide { top:127px; }
  .bs3c-how { width:calc(100% - 28px); margin-bottom:45px; display:block; }
  .bs3c-how>div { border-right:0; border-bottom:1px solid #283029; }
  .bs3c-seo { width:calc(100% - 28px); margin-bottom:48px; padding:28px 20px; display:block; }
  .bs3c-seo-copy { padding-top:22px; }
  .bs3c-faq { margin-top:24px; display:block; }
  .bs3c-faq details+details { margin-top:8px; }
}

@media (max-width:480px) {
  .bs3c-hero h1 { font-size:36px; }
  .bs3c-kicker { font-size:10px; }
  .bs3c-prize-strip { padding-bottom:4px; }
  .bs3c-board-shell { min-height:450px; }
  .bs3c-matchbar { grid-template-columns:1fr 86px 1fr; padding:7px; gap:6px; }
  .bs3c-matchbar>span { grid-template-columns:26px 1fr; column-gap:6px; }
  .bs3c-matchbar>span:last-child { grid-template-columns:1fr 26px; }
  .bs3c-matchbar b { font-size:11px; }
  .bs3c-matchbar small { font-size:8px; }
  .bs3c-levels button { min-height:61px; }
  .bs3c-mode button { font-size:8px; }
  .bs3c-camera { top:70px; padding:4px; }
  .bs3c-camera button { min-width:48px; height:30px; padding:0 6px; font-size:8px!important; }
  .bs3c-modal section { padding:30px 20px 22px; }
  .bs3c-modal h2 { font-size:28px; }
}

@media (prefers-reduced-motion:reduce) {
  .bs3c-app * { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}

/* Keep all controls outside the interactive board, including on narrow phones. */
.bs3c-board-shell { display:flex; flex-direction:column; }
.bs3c-matchbar { position:relative; inset:auto; margin:12px 12px 0; flex:none; }
.bs3c-canvas { position:relative; inset:auto; width:100%; height:clamp(400px,43vw,640px); flex:1 0 400px; }
.bs3c-camera { position:relative; inset:auto; transform:none; width:max-content; max-width:calc(100% - 24px); margin:0 auto 12px; flex:none; }
.bs3c-camera button { min-height:44px; color:#b6c1ba!important; }
.bs3c-board-guide { position:relative; inset:auto; transform:none; margin:0 auto 12px; flex:none; box-shadow:none; }
.bs3c-thinking { bottom:76px; }
.bs3c-matchbar small { color:#a6b1aa; }
@media(max-width:820px) {
  .bs3c-board-shell { min-height:0; }
  .bs3c-canvas { height:clamp(360px,105vw,600px); flex:0 0 auto; }
  .bs3c-camera { inset:auto; transform:none; }
}
@media(max-width:480px) {
  .bs3c-canvas { height:clamp(340px,108vw,490px); }
  .bs3c-camera { inset:auto; padding:4px; }
  .bs3c-camera button { min-width:56px; min-height:44px; font-size:9px!important; }
}

/* Compact, board-first flow on phones. */
@media(max-width:820px) {
  .bs3c-hero { padding:22px 0 14px; }
  .bs3c-kicker { font-size:10px; line-height:1.35; letter-spacing:.1em; }
  .bs3c-hero h1 { margin:10px 0; font-size:clamp(32px,8.5vw,42px); line-height:1.02; letter-spacing:-.045em; }
  .bs3c-hero>div>p { max-width:34rem; margin:0; font-size:13px; line-height:1.55; }
  .bs3c-prize-strip { margin-top:14px; gap:7px; }
  .bs3c-prize-strip span { padding:11px 12px; }
  .bs3c-prize-strip b { font-size:18px; }
  .bs3c-prize-strip small { font-size:9px; }
  .bs3c-board-shell { order:2; }
  .bs3c-panel { order:1; padding:22px 14px 20px; }
  .bs3c-app.is-playing .bs3c-board-shell { order:1; }
  .bs3c-app.is-playing .bs3c-panel { order:2; }
  .bs3c-panel .bs3c-kicker { font-size:9px; }
  .bs3c-panel h2 { margin:9px 0 14px; font-size:28px; line-height:1.04; }
  .bs3c-panel .bs3c-panel-kicker { order:1; }
  .bs3c-panel h2 { order:2; }
  .bs3c-panel .bs3c-level-label { order:3; margin:4px 0 9px; }
  .bs3c-panel .bs3c-levels { order:4; }
  .bs3c-panel .bs3c-mode { order:5; margin-top:12px; }
  .bs3c-panel .bs3c-mode::before { content:'BƯỚC 2 · CHỌN CÁCH CHƠI'; position:absolute; left:0; top:-18px; color:#69736b; font:700 9px 'Chakra Petch',sans-serif; letter-spacing:.1em; }
  .bs3c-panel .bs3c-mode { position:relative; margin-top:30px; }
  .bs3c-panel .bs3c-ready { order:6; }
  .bs3c-panel .bs3c-start,.bs3c-panel .bs3c-reset { order:7; position:sticky; z-index:12; bottom:10px; }
  .bs3c-app:not(.is-playing) .bs3c-panel .bs3c-start { position:fixed; z-index:10010; left:14px; right:14px; bottom:max(12px,env(safe-area-inset-bottom)); width:auto; margin:0; box-shadow:0 10px 32px rgba(0,0,0,.5),0 0 0 1px rgba(183,255,34,.2)!important; }
  .bs3c-app:not(.is-playing) .bs3c-panel { padding-bottom:88px; }
  .bs3c-panel .bs3c-note { order:8; }
  .bs3c-canvas { height:clamp(330px,96vw,470px); }
  .bs3c-matchbar { margin:10px 10px 0; }
  .bs3c-camera { margin-bottom:8px; }
  .bs3c-board-guide { margin-bottom:10px; }
  .bs3c-levels b { font-size:12px; }
  .bs3c-levels strong { font-size:9px; }
  .bs3c-mode button,.bs3c-panel .bs3c-start,.bs3c-panel .bs3c-reset { font-size:11px!important; }
  .bs3c-note { font-size:10px; line-height:1.5; }
}
@media(max-width:480px) {
  .bs3c-hero h1 { font-size:32px; }
  .bs3c-prize-strip { grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; padding-bottom:0; }
  .bs3c-prize-strip span { min-height:52px; padding:8px 5px; border-radius:9px; }
  .bs3c-prize-strip b { margin-bottom:4px; font-size:15px; }
  .bs3c-prize-strip small { font-size:7px; line-height:1.1; letter-spacing:.025em; white-space:nowrap; }
  .bs3c-canvas { height:92vw; min-height:330px; max-height:390px; }
  .bs3c-matchbar b { font-size:10px; }
  .bs3c-matchbar small { font-size:8px; }
  .bs3c-camera button { min-width:54px; font-size:9px!important; }
}

/* Mobile game setup opens as a quick bottom sheet. */
@media(max-width:820px) {
  .bs3c-app:not(.is-playing)::before {
    content:'';
    position:fixed;
    z-index:10018;
    inset:0;
    background:rgba(2,5,3,.76);
    backdrop-filter:blur(8px);
  }
  .bs3c-app:not(.is-playing) .bs3c-panel {
    position:fixed;
    z-index:10019;
    left:50%;
    right:auto;
    bottom:0;
    width:min(560px,100%);
    max-height:min(82dvh,720px);
    padding:18px 16px max(16px,env(safe-area-inset-bottom));
    overflow-y:auto;
    overscroll-behavior:contain;
    transform:translateX(-50%);
    border:1px solid #334036;
    border-bottom:0;
    border-radius:22px 22px 0 0;
    background:linear-gradient(180deg,#151b17 0%,#090d0a 100%);
    box-shadow:0 -24px 70px rgba(0,0,0,.62);
  }
  .bs3c-app:not(.is-playing) .bs3c-panel::before {
    content:'';
    order:0;
    align-self:center;
    width:42px;
    height:4px;
    margin:-7px 0 11px;
    border-radius:999px;
    background:#465048;
  }
  .bs3c-app:not(.is-playing) .bs3c-panel .bs3c-panel-kicker { font-size:9px; }
  .bs3c-app:not(.is-playing) .bs3c-panel h2 {
    margin:7px 0 11px;
    font-size:20px;
    line-height:1.08;
  }
  .bs3c-app:not(.is-playing) .bs3c-level-label,
  .bs3c-app:not(.is-playing) .bs3c-mode::before { font-size:8px; }
  .bs3c-app:not(.is-playing) .bs3c-levels { gap:7px; }
  .bs3c-app:not(.is-playing) .bs3c-levels button { min-height:57px; }
  .bs3c-app:not(.is-playing) .bs3c-levels b { font-size:11px; }
  .bs3c-app:not(.is-playing) .bs3c-levels strong { font-size:8px; }
  .bs3c-app:not(.is-playing) .bs3c-levels button>span { font-size:12px; }
  .bs3c-app:not(.is-playing) .bs3c-mode { margin-top:27px; }
  .bs3c-app:not(.is-playing) .bs3c-mode button { font-size:9px!important; }
  .bs3c-app:not(.is-playing) .bs3c-ready,
  .bs3c-app:not(.is-playing) .bs3c-note { display:none; }
  .bs3c-app:not(.is-playing) .bs3c-panel .bs3c-start {
    position:sticky;
    z-index:2;
    left:auto;
    right:auto;
    bottom:0;
    width:100%;
    min-height:56px;
    margin:12px 0 0;
    font-size:11px!important;
    box-shadow:0 12px 30px rgba(0,0,0,.5),0 0 0 1px rgba(183,255,34,.18)!important;
  }
}