/* DBT Arcade — course-based games (arcade.php + assets/js/arcade-courses.js).
   Extends arcade.css: tiles for the "games by course" catalogue and the boards
   for the choice / duel / buckets / match / order / sql mechanics. */
.ar-course-tile{--tone:#147d6e;--shade:#0b3d56;--glow:#69e3d0;position:relative;display:flex;flex-direction:column;min-width:0;aspect-ratio:1.55;overflow:hidden;isolation:isolate;padding:20px;border-radius:20px;background:radial-gradient(circle at 68% 30%,var(--glow),transparent 52%),linear-gradient(145deg,var(--tone),var(--shade));border:1px solid rgba(255,255,255,.25);color:#fff;text-decoration:none;box-shadow:0 1px 2px rgba(7,20,42,.07),0 12px 28px #102c4626;transition:transform .2s,box-shadow .2s}
.ar-course-tile::after{content:"";position:absolute;inset:44% 0 0;z-index:-1;background:linear-gradient(transparent,rgba(7,12,35,.85))}
.ar-course-tile:hover{transform:translateY(-5px);box-shadow:0 1px 2px rgba(7,20,42,.07),0 22px 42px rgba(16,44,70,.32)}
.ar-course-tile[data-tone=teal]{--tone:#118c88;--shade:#073d59;--glow:#7be9d2}.ar-course-tile[data-tone=blue]{--tone:#1979c9;--shade:#193b88;--glow:#8bdcff}.ar-course-tile[data-tone=violet]{--tone:#854dd6;--shade:#352178;--glow:#d8a7ff}.ar-course-tile[data-tone=amber]{--tone:#d78a23;--shade:#7e3d22;--glow:#ffe49a}.ar-course-tile[data-tone=rose]{--tone:#d94b83;--shade:#722659;--glow:#ffb7cc}.ar-course-tile[data-tone=purple]{--tone:#9d50d0;--shade:#4e2683;--glow:#edb5ff}.ar-course-tile[data-tone=indigo]{--tone:#4a6be1;--shade:#27377d;--glow:#a6d5ff}.ar-course-tile[data-tone=red]{--tone:#d65168;--shade:#772b59;--glow:#ffb0a2}
/* Tones for the four newer games (estimate · cipher · grid · branch). */
.ar-course-tile[data-tone=green]{--tone:#1f8a5b;--shade:#0b3f2e;--glow:#7ce8b0}.ar-course-tile[data-tone=cyan]{--tone:#0e8ea8;--shade:#0a3d52;--glow:#7fe4f5}.ar-course-tile[data-tone=orange]{--tone:#c86a1c;--shade:#6b3210;--glow:#ffc487}.ar-course-tile[data-tone=slate]{--tone:#4a5a6e;--shade:#1d2836;--glow:#b7c8da}
.ar-course-free{align-self:flex-start;z-index:1;background:#fff;color:#176358;border-radius:20px;padding:4px 11px;font-size:11px;font-weight:800;box-shadow:0 1px 2px rgba(7,20,42,.07),0 4px 12px #0002}
.ar-course-art{position:absolute;inset:0;z-index:-1;display:grid;place-items:center;pointer-events:none}
.ar-course-art::before,.ar-course-art::after{content:"";position:absolute;width:59%;aspect-ratio:1;border:8px solid #ffffff36;border-radius:50%;transform:rotate(-18deg) scaleX(1.2);box-shadow:0 0 26px #fff4}
.ar-course-art::after{width:37%;border-width:3px;transform:rotate(25deg) scaleX(1.5)}
.ar-course-emoji{font-size:clamp(72px,8vw,118px);line-height:1;filter:drop-shadow(0 14px 8px #14224582);transform:translateY(-14%) rotate(-8deg)}
.ar-course-star{position:absolute;color:#fff2b0;text-shadow:0 0 14px #fff;font-size:28px}.ar-course-star-one{top:22%;left:17%}.ar-course-star-two{top:33%;right:15%}
.ar-course-best{position:absolute;top:16px;right:16px;z-index:1;font:800 11px Manrope,sans-serif;color:#fff;background:#111827b8;border-radius:14px;padding:4px 9px;display:inline-flex;align-items:center;gap:6px}
.ar-course-best i{font-style:normal;letter-spacing:1px}.ar-course-best i span{color:#cbd5e1}.ar-course-best i span.is-on{color:#e99028}
.ar-course-copy{display:grid;gap:2px;margin-top:auto;z-index:1;text-shadow:0 2px 7px #071322a8}
.ar-course-copy strong{font-size:clamp(19px,1.7vw,25px);line-height:1.3;color:#fff}
.ar-course-copy small{font-size:12px;line-height:1.45;color:#f1f6ff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ar-course-play{align-self:flex-end;display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:7px 12px;border-radius:20px;background:#111827e8;color:#fff;font-weight:800;font-size:12px}
.ar-course-play .icon{width:16px;height:16px}

/* ---- game section ---- */
.ar-course-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.8fr);gap:24px;align-items:start}
.ar-course-based{background:var(--ar-soft);border:1px solid var(--ar-line);border-radius:14px;padding:16px 18px;margin-bottom:22px}
.ar-course-based .ar-kicker{margin-bottom:8px}
.ar-course-based ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ar-course-based li{display:flex;gap:10px;align-items:baseline;font-size:14px}
.ar-course-based li b{font:700 12px Manrope,sans-serif;color:var(--ar-teal-deep);min-width:88px}
.ar-course-based-side{margin-bottom:18px}
.ar-course-based-side .ar-text{padding:8px 0 0;display:inline-block}
.ar-course-others{background:var(--ar-surface);border:1px solid var(--ar-line);border-radius:14px;padding:16px 18px}
.ar-course-others ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.ar-course-others a{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;padding:8px 6px;border-radius:8px;font-size:14px;color:var(--ar-ink);text-decoration:none}
.ar-course-others a:hover{background:var(--ar-soft)}
.ar-course-others a span{font-size:20px}.ar-course-others a small{font:700 11px Manrope,sans-serif;color:var(--ar-muted)}.ar-course-others small i{font-style:normal}.ar-course-others small i span{color:#cbd5e1}.ar-course-others small i span.is-on{color:#e99028}
.ar-cg-timer{font:800 13px Manrope,sans-serif;color:var(--ar-muted)}
.ar-cg-instruction{margin:-8px 0 16px}
.ar-cg-stars{font-size:34px;letter-spacing:4px;margin:6px 0 4px}.ar-cg-stars span{color:#d5dde6}.ar-cg-stars span.is-on{color:#e99028;text-shadow:0 4px 14px rgba(233,144,40,.35)}
.ar-cg-recap{margin:10px 0 0;padding-left:18px;font-size:14px;line-height:1.7}
.ar-course-stage .ar-feedback-label{margin-bottom:6px}

/* charts + figures */
.ar-cg-figure{background:var(--ar-soft);border:1px solid var(--ar-line);border-radius:14px;padding:12px;margin:0 0 18px;max-width:440px}
.ar-cg-figure svg{width:100%;height:auto;display:block}
.cg-axis{stroke:#9fb4c9;stroke-width:1.5}.cg-tick{font:600 9px Manrope,sans-serif;fill:#6b7f93;text-anchor:end}.cg-label{font:600 9px Manrope,sans-serif;fill:#52687b;text-anchor:middle}.cg-node{font:800 11px Manrope,sans-serif;fill:#fff;text-anchor:middle}
.ar-cg-options.has-charts{grid-template-columns:repeat(2,minmax(0,1fr))}
.ar-option-chart{flex-direction:column;align-items:stretch;gap:8px;padding:12px}
.ar-option-chart kbd{align-self:flex-start}
.ar-option-chart .ar-cg-mini{display:block;background:#fff;border-radius:8px;border:1px solid #e6edf3}
.ar-option-chart .ar-cg-mini svg{width:100%;height:auto;display:block}
.ar-option-chart>span:last-child{font-size:14px;font-weight:700;text-align:center}

/* code */
.ar-cg-code{position:relative;background:#0f1a2b;color:#e6edf3;border-radius:14px;padding:14px 16px 14px 8px;font:14px/1.7 ui-monospace,Consolas,"SFMono-Regular",monospace;overflow:auto;margin:0 0 18px;tab-size:4;white-space:pre}
.ar-cg-code[data-lang]::before{content:attr(data-lang);position:absolute;top:8px;right:12px;font:700 10px Manrope,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#7fa3c7}
.ar-cg-ln{display:inline-block;width:32px;text-align:right;margin-right:14px;color:#5d7591;user-select:none}
.ar-cg-lines{display:grid;padding:10px 6px;white-space:normal}
.ar-cg-line{display:flex;align-items:center;width:100%;text-align:left;background:transparent;border:1.5px solid transparent;border-radius:4px;padding:4px 10px 4px 0;color:inherit;font:inherit;cursor:pointer;white-space:pre}
.ar-cg-line:hover{background:rgba(255,255,255,.07);border-color:#31507a}
.ar-cg-line.is-correct{background:rgba(27,148,133,.25);border-color:#1b9485}
.ar-cg-line.is-wrong{background:rgba(224,85,61,.25);border-color:#e0553d}
.ar-cg-line:disabled{cursor:default}

/* duel */
.ar-cg-duel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ar-cg-duel-card{position:relative;display:flex;flex-direction:column;gap:10px;background:#fff;border:2px solid #d9e3ed;border-radius:14px;padding:14px;cursor:pointer;font:inherit;color:inherit;text-align:left;transition:border-color .15s,transform .15s,box-shadow .15s}
.ar-cg-duel-card:hover:not(:disabled){transform:translateY(-3px);border-color:#327ba9;box-shadow:0 1px 2px rgba(7,20,42,.07),0 14px 30px rgba(16,44,70,.12)}
.ar-cg-duel-card.is-correct{border-color:#1b9485;background:#e6f8f3}.ar-cg-duel-card.is-wrong{border-color:#e0553d;background:#fff0ec}
.ar-cg-duel-card:disabled{cursor:default}
.ar-cg-duel-tag{position:absolute;top:-12px;left:14px;background:var(--ar-navy);color:#fff;font:800 12px Manrope,sans-serif;border-radius:14px;padding:4px 12px}
.ar-cg-duel-card.is-correct .ar-cg-duel-tag{background:#1b9485}.ar-cg-duel-card.is-wrong .ar-cg-duel-tag{background:#e0553d}
.ar-cg-duel-mock{display:block;background:#f3f6f9;border:1px solid #e3e9ef;border-radius:8px;padding:16px;min-height:150px;display:grid;place-items:center}
.ar-cg-duel-pick{font-size:13px;font-weight:700;color:var(--ar-muted);text-align:center}
/* mock-up primitives (UX duel) */
.mk{width:100%;max-width:240px;font-family:"IBM Plex Sans Thai",sans-serif;font-size:12px;color:#1c2530;display:grid;gap:6px;justify-items:center}
.mk-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border-radius:8px;font-weight:700;font-size:13px}
.mk-btn.mk-sm{padding:7px 12px;font-size:11px}
.mk-form{justify-items:stretch;gap:5px;text-align:left}
.mk-form b{font-size:11px;color:#1c2530}
.mk-input{display:block;border:1px solid #cbd5e1;border-radius:4px;padding:7px 9px;background:#fff;color:#9aa5b1;font-style:normal;font-size:11px}
.mk-input.mk-filled{color:#1c2530}.mk-input.mk-bad{border-color:#d13b4d;box-shadow:0 0 0 2px rgba(209,59,77,.15)}
.mk-err{font-style:normal;font-size:10px;color:#d13b4d}.mk-err.mk-help{background:#fdecee;border-radius:4px;padding:5px 8px}
.mk-tiny{display:flex;flex-wrap:wrap;gap:2px 8px;font-size:9px;justify-content:flex-start}.mk-tiny a{color:#2f6fb0;text-decoration:underline;line-height:1.2}
.mk-big{display:grid;gap:6px;justify-items:stretch}.mk-big span{display:block;background:#fff;border:1px solid #cbd5e1;border-radius:8px;padding:11px 12px;font-weight:600;font-size:12px}
.mk-card{justify-items:start;text-align:left;background:#fff;border:1px solid #e3e9ef;border-radius:8px;padding:10px 12px;gap:4px}
.mk-nav{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}.mk-nav i{font-style:normal;font-size:9px;background:#fff;border:1px solid #dfe7ef;border-radius:4px;padding:3px 6px;white-space:nowrap}
.mk-nav-few i{font-size:11px;padding:6px 10px;font-weight:600}
.mk-spin{width:11px;height:11px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:mk-spin .8s linear infinite}
@keyframes mk-spin{to{transform:rotate(360deg)}}
.mk-progress{display:block;width:100%;height:6px;border-radius:4px;background:#dfe7ef;overflow:hidden}.mk-progress b{display:block;width:60%;height:100%;background:#2f6fb0;border-radius:4px}
.mk-dialog{background:#fff;border:1px solid #e3e9ef;border-radius:8px;padding:12px;gap:10px;box-shadow:0 1px 2px rgba(7,20,42,.07),0 8px 20px rgba(11,37,69,.08)}.mk-dialog>span{font-size:11px;line-height:1.5;text-align:center}.mk-dialog>div{display:flex;gap:6px;justify-content:center}
.mk-text{justify-items:stretch;text-align:left;font-size:10px;line-height:1.55}.mk-text p{margin:0;word-break:break-all}.mk-text b{font-size:12px}.mk-text ul{margin:0;padding-left:16px}
.mk-hero{width:100%;min-height:110px;border-radius:8px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px;text-align:center;position:relative;overflow:hidden;background:repeating-linear-gradient(45deg,var(--brand-pink-tint) 0 8px,#ffd166 8px 16px,#72e3d0 16px 24px,#8ab8f0 24px 32px)}
.mk-hero span{position:relative;padding:6px 10px}
.mk-hero-overlay::before{content:"";position:absolute;inset:0;background:rgba(11,37,69,.6)}

/* buckets */
.ar-cg-item{min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--ar-soft);border:2px solid var(--ar-line);border-radius:14px;padding:22px;margin:0 0 14px;text-align:center;transition:border-color .15s,background .15s}
.ar-cg-item span{font:700 11px Manrope,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ar-muted)}
.ar-cg-item strong{font-size:clamp(20px,3vw,28px);letter-spacing:-.01em}
.ar-cg-item.is-correct{border-color:#1b9485;background:#e6f8f3}.ar-cg-item.is-wrong{border-color:#e0553d;background:#fff0ec;animation:cg-shake .35s}
.ar-cg-toast{margin:0 0 14px;font-size:14px;color:#a3482a;background:#fff0ec;border:1px solid #f4c9bb;border-radius:8px;padding:10px 14px}
.ar-cg-buckets{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.ar-cg-bucket{display:flex;flex-direction:column;align-items:flex-start;gap:4px;background:#fff;border:1.5px solid #d9e3ed;border-radius:14px;padding:12px 14px;font:inherit;color:var(--ar-ink);cursor:pointer;text-align:left;transition:border-color .15s,background .15s,transform .15s}
.ar-cg-bucket:hover{border-color:#327ba9;transform:translateY(-2px)}
.ar-cg-bucket kbd{font:800 11px Manrope,sans-serif;background:#e8eef4;border-radius:4px;padding:2px 7px;color:#3a556d}
.ar-cg-bucket b{font-size:15px}.ar-cg-bucket small{font-size:11px;color:var(--ar-muted);line-height:1.45}
.ar-cg-bucket.is-correct{border-color:#1b9485;background:#e6f8f3}.ar-cg-bucket.is-wrong{border-color:#e0553d;background:#fff0ec}

/* match */
.ar-cg-match{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:14px}
.ar-cg-col{display:grid;gap:8px;align-content:start}
.ar-cg-term,.ar-cg-def{background:#fff;border:1.5px solid #d9e3ed;border-radius:8px;padding:12px 14px;font:inherit;font-size:14px;line-height:1.5;color:var(--ar-ink);text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.ar-cg-term{font-weight:800;font-family:Manrope,"IBM Plex Sans Thai",sans-serif}
.ar-cg-term:hover,.ar-cg-def:hover{border-color:#327ba9}
.ar-cg-term.is-active{border-color:var(--ar-navy);background:#e9f3fa;box-shadow:0 0 0 3px rgba(16,44,70,.12)}
.ar-cg-term.is-done,.ar-cg-def.is-done{border-color:#1b9485;background:#e6f8f3;color:#146b5e;cursor:default}
.ar-cg-term.is-wrong,.ar-cg-def.is-wrong{border-color:#e0553d;background:#fff0ec;animation:cg-shake .35s}

/* order */
.ar-cg-sequence{list-style:none;counter-reset:seq;margin:0 0 16px;padding:0;display:grid;gap:6px}
.ar-cg-sequence li{counter-increment:seq;display:flex;align-items:center;gap:12px;min-height:44px;border:1.5px dashed #c9d5e1;border-radius:8px;padding:8px 12px;font-size:14px;color:var(--ar-muted)}
.ar-cg-sequence li::before{content:counter(seq);font:800 12px Manrope,sans-serif;width:26px;height:26px;border-radius:50%;background:#e8eef4;color:#3a556d;display:grid;place-items:center;flex:none}
.ar-cg-sequence li.is-filled{border-style:solid;border-color:#1b9485;background:#e6f8f3;color:#146b5e;font-weight:600}
.ar-cg-sequence li.is-filled::before{background:#1b9485;color:#fff}
.ar-cg-pool{display:flex;flex-wrap:wrap;gap:8px}
.ar-cg-step{background:#fff;border:1.5px solid #d9e3ed;border-radius:20px;padding:10px 16px;font:inherit;font-size:14px;font-weight:600;color:var(--ar-ink);cursor:pointer;transition:border-color .15s,opacity .2s}
.ar-cg-step:hover:not(:disabled){border-color:#327ba9}
.ar-cg-step.is-done{opacity:.25;cursor:default}
.ar-cg-step.is-wrong{border-color:#e0553d;background:#fff0ec;animation:cg-shake .35s}

/* sql */
.ar-cg-source{margin:0 0 18px;overflow-x:auto;background:var(--ar-soft);border:1px solid var(--ar-line);border-radius:14px;padding:10px 14px}
.ar-cg-source summary{cursor:pointer;font-weight:700;font-size:14px}
.ar-cg-source code,.ar-cg-sql-line code,.ar-cg-answer{font:600 13px ui-monospace,Consolas,monospace;background:#e8eef4;border-radius:4px;padding:2px 6px}
.ar-cg-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:10px;background:#fff;border-radius:8px;overflow:hidden}
.ar-cg-table th{text-align:left;font:700 11px Manrope,sans-serif;letter-spacing:.06em;text-transform:uppercase;background:#e8eef4;color:#3a556d;padding:7px 10px}
.ar-cg-table td{padding:6px 10px;border-top:1px solid #edf1f5}
.ar-cg-table td.is-empty{color:var(--ar-muted);font-style:italic;text-align:center}
.ar-cg-table.is-ok th{background:#d7f2ea;color:#146b5e}.ar-cg-table.is-bad th{background:#fde0d8;color:#a3482a}.ar-cg-table.is-expected th{background:#e0edff;color:#2366ad}
.ar-cg-query{display:flex;flex-wrap:wrap;align-items:center;gap:6px 4px;background:#0f1a2b;color:#e6edf3;border-radius:14px;padding:16px 18px;font:15px/1.6 ui-monospace,Consolas,monospace;margin:0 0 12px}
.ar-cg-blank{display:inline-flex;gap:3px;background:rgba(255,255,255,.08);border:1px dashed #5d7591;border-radius:8px;padding:3px}
.ar-cg-chip{background:transparent;border:1px solid transparent;border-radius:4px;padding:3px 9px;font:inherit;font-size:14px;color:#c9d7e5;cursor:pointer;transition:background .15s,color .15s}
.ar-cg-chip:hover:not(:disabled){background:rgba(255,255,255,.12);color:#fff}
.ar-cg-chip.is-active{background:var(--ar-teal);color:var(--ar-navy);font-weight:700}
.ar-cg-chip:disabled{cursor:default}
.ar-cg-sql-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.ar-cg-sql-actions .ar-hint{margin:0}
.ar-cg-results{background:var(--ar-soft);border:1px solid var(--ar-line);border-radius:14px;padding:12px 14px}
.ar-cg-sql-line{margin:0 0 8px;font-size:13px;overflow-wrap:anywhere}
.ar-cg-result-grid{display:grid;grid-template-columns:1fr;gap:12px}
.ar-cg-result-grid>div{min-width:0;overflow-x:auto}
.ar-cg-result-grid b{font-size:12px;font-family:Manrope,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ar-muted)}

@keyframes cg-shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media(max-width:960px){.ar-course-layout{grid-template-columns:1fr}.ar-course-based-side{display:none}}
@media(max-width:650px){.ar-course-tile{aspect-ratio:1.65}.ar-cg-duel{grid-template-columns:1fr}.ar-cg-match{grid-template-columns:1fr}.ar-cg-options.has-charts{grid-template-columns:1fr}.ar-cg-code{font-size:12.5px}.ar-cg-buckets{grid-template-columns:repeat(2,1fr)}.ar-cg-query{font-size:13px}}
@media(prefers-reduced-motion:reduce){.ar-cg-item.is-wrong,.ar-cg-term.is-wrong,.ar-cg-def.is-wrong,.ar-cg-step.is-wrong{animation:none}}

/* ---- dark mode ---- */
[data-theme="dark"] body[data-page="arcade"] .ar-course-tile{color:#fff;border-color:rgba(255,255,255,.25)}
[data-theme="dark"] body[data-page="arcade"] .ar-course-based,[data-theme="dark"] body[data-page="arcade"] .ar-course-others,[data-theme="dark"] body[data-page="arcade"] .ar-cg-figure,[data-theme="dark"] body[data-page="arcade"] .ar-cg-source,[data-theme="dark"] body[data-page="arcade"] .ar-cg-results,[data-theme="dark"] body[data-page="arcade"] .ar-cg-item{background:var(--dm-surface-2);border-color:var(--dm-border)}
[data-theme="dark"] body[data-page="arcade"] .ar-course-based li b{color:#7fe0cf}
[data-theme="dark"] body[data-page="arcade"] .ar-cg-duel-card,[data-theme="dark"] body[data-page="arcade"] .ar-cg-bucket,[data-theme="dark"] body[data-page="arcade"] .ar-cg-term,[data-theme="dark"] body[data-page="arcade"] .ar-cg-def,[data-theme="dark"] body[data-page="arcade"] .ar-cg-step,[data-theme="dark"] body[data-page="arcade"] .ar-cg-table,[data-theme="dark"] body[data-page="arcade"] .ar-option-chart .ar-cg-mini{background:var(--dm-surface);border-color:var(--dm-border);color:var(--dm-text)}
[data-theme="dark"] body[data-page="arcade"] .ar-cg-duel-mock{background:#f3f6f9;color:#1c2530}
[data-theme="dark"] body[data-page="arcade"] .ar-cg-bucket kbd,[data-theme="dark"] body[data-page="arcade"] .ar-cg-sequence li::before,[data-theme="dark"] body[data-page="arcade"] .ar-cg-source code,[data-theme="dark"] body[data-page="arcade"] .ar-cg-sql-line code,[data-theme="dark"] body[data-page="arcade"] .ar-cg-answer{background:rgba(255,255,255,.1);color:var(--dm-text)}
[data-theme="dark"] body[data-page="arcade"] .ar-cg-table th{background:rgba(255,255,255,.08);color:var(--dm-text-muted)}
[data-theme="dark"] body[data-page="arcade"] .ar-cg-table td{border-color:var(--dm-border)}
[data-theme="dark"] body[data-page="arcade"] .ar-cg-term.is-active{background:rgba(114,227,208,.15);border-color:#72e3d0}
[data-theme="dark"] body[data-page="arcade"] .ar-cg-term.is-done,[data-theme="dark"] body[data-page="arcade"] .ar-cg-def.is-done,[data-theme="dark"] body[data-page="arcade"] .ar-cg-sequence li.is-filled,[data-theme="dark"] body[data-page="arcade"] .ar-cg-item.is-correct,[data-theme="dark"] body[data-page="arcade"] .ar-cg-bucket.is-correct,[data-theme="dark"] body[data-page="arcade"] .ar-cg-duel-card.is-correct{background:rgba(27,148,133,.2);color:#7fe0cf}
[data-theme="dark"] body[data-page="arcade"] .ar-cg-item.is-wrong,[data-theme="dark"] body[data-page="arcade"] .ar-cg-bucket.is-wrong,[data-theme="dark"] body[data-page="arcade"] .ar-cg-term.is-wrong,[data-theme="dark"] body[data-page="arcade"] .ar-cg-def.is-wrong,[data-theme="dark"] body[data-page="arcade"] .ar-cg-step.is-wrong,[data-theme="dark"] body[data-page="arcade"] .ar-cg-duel-card.is-wrong{background:rgba(224,85,61,.2)}
[data-theme="dark"] body[data-page="arcade"] .ar-cg-toast{background:rgba(224,85,61,.15);border-color:rgba(224,85,61,.4);color:#fdba74}
[data-theme="dark"] body[data-page="arcade"] .ar-cg-sequence li{border-color:var(--dm-border);color:var(--dm-text-muted)}
[data-theme="dark"] body[data-page="arcade"] .cg-axis{stroke:#6b7f93}[data-theme="dark"] body[data-page="arcade"] .cg-tick,[data-theme="dark"] body[data-page="arcade"] .cg-label{fill:var(--dm-text-muted)}
[data-theme="dark"] body[data-page="arcade"] .ar-cg-stars span{color:rgba(255,255,255,.15)}[data-theme="dark"] body[data-page="arcade"] .ar-cg-stars span.is-on{color:#ffd166}

/* ── Estimate (Ballpark) ─────────────────────────────────────────────────── */
.ar-cg-estimate{display:grid;gap:18px;justify-items:center;margin-top:24px}
.ar-cg-est-value{font:700 clamp(2.6rem,7vw,4.2rem)/1 Manrope,sans-serif;letter-spacing:-.04em;color:var(--tone,#147d6e)}
.ar-cg-est-value small{font-size:.38em;margin-left:.15em;letter-spacing:0;opacity:.72}
.ar-cg-est-range{width:min(560px,100%);accent-color:var(--tone,#147d6e);height:34px;cursor:pointer}
.ar-cg-est-range:disabled{opacity:.55;cursor:default}
.ar-cg-est-scale{width:min(560px,100%);display:flex;justify-content:space-between;font:600 .74rem Manrope,sans-serif;color:var(--muted)}
.ar-cg-est-readout{margin:0 0 10px;font-size:.92rem}
.ar-cg-est-readout b{color:var(--tone,#147d6e)}

/* ── Cipher Lab ──────────────────────────────────────────────────────────── */
.ar-cg-cipher{display:grid;gap:16px;justify-items:center;margin-top:22px}
.ar-cg-cipher-given code{display:inline-block;padding:14px 26px;border-radius:8px;background:#0b1f3a;color:#8fe3d4;
  font:700 clamp(1.3rem,3.6vw,2rem)/1.3 "SFMono-Regular",Consolas,monospace;letter-spacing:.08em}
.ar-cg-cipher-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;width:min(520px,100%)}
.ar-cg-cipher-input{flex:1;min-width:200px;padding:13px 16px;border:2px solid var(--line);border-radius:8px;
  font:600 1.05rem/1.3 "IBM Plex Sans Thai",sans-serif;background:#fff;color:var(--ink)}
.ar-cg-cipher-input:focus-visible{outline:none;border-color:var(--tone,#147d6e)}

/* ── Dirty Data grid ─────────────────────────────────────────────────────── */
.ar-cg-grid-wrap{margin-top:18px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.ar-cg-grid{width:100%;min-width:420px;border-collapse:collapse;background:#fff;font-size:.92rem}
.ar-cg-grid th{padding:11px 13px;text-align:left;background:#0b1f3a;color:#fff;font:700 .74rem/1.3 Manrope,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.ar-cg-grid td{padding:0;border:1px solid var(--line)}
.ar-cg-cell{width:100%;min-height:46px;padding:11px 13px;border:0;background:transparent;text-align:left;
  font:inherit;color:inherit;cursor:pointer;transition:background .18s ease}
.ar-cg-cell:hover:not(:disabled){background:#eef4fb}
.ar-cg-cell:focus-visible{outline:2px solid var(--tone,#147d6e);outline-offset:-2px}
.ar-cg-cell:disabled{cursor:default}
.ar-cg-cell.is-correct{background:#0f7a5a;color:#fff;font-weight:700}
.ar-cg-cell.is-wrong{background:#fde7ec;color:#9b1b36;text-decoration:line-through}

/* ── Pivot Path (branching scenario) ─────────────────────────────────────── */
.ar-cg-meters{display:grid;gap:10px;margin-bottom:20px}
.ar-cg-meter{display:grid;grid-template-columns:minmax(0,1fr) 120px auto;gap:12px;align-items:center;font-size:.86rem}
.ar-cg-meter i{display:block;height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.ar-cg-meter i b{display:block;height:100%;border-radius:999px;background:#1f8a5b;transition:width .45s var(--ease,ease)}
.ar-cg-meter[data-meter-tone=warn] i b{background:#c98a1a}
.ar-cg-meter[data-meter-tone=low] i b{background:#b8354f}
.ar-cg-meter strong{font:700 .92rem Manrope,sans-serif;min-width:48px;text-align:right}
.ar-cg-situation{margin:0 0 20px;font-size:1.02rem;line-height:1.75;max-width:60ch}
.ar-cg-branch{display:grid;gap:12px}
.ar-cg-branch-option{display:grid;gap:8px;text-align:left}
.ar-cg-branch-label{font-weight:600;line-height:1.5}
.ar-cg-branch-delta{display:flex;flex-wrap:wrap;gap:12px;font:700 .78rem Manrope,sans-serif}
.ar-cg-branch-delta i{font-style:normal}
.ar-cg-branch-delta i.is-up{color:#0f7a5a}
.ar-cg-branch-delta i.is-down{color:#b8354f}

@media(max-width:600px){
  .ar-cg-meter{grid-template-columns:minmax(0,1fr) 72px auto;gap:8px;font-size:.78rem}
  .ar-cg-grid{min-width:340px;font-size:.84rem}
  .ar-cg-cipher-given code{font-size:1.2rem;padding:11px 18px}
}