/**
 * Journey Map — P3 "Vương Quốc Cờ". Bright, friendly, Duolingo-adjacent.
 * Pure CSS path (alternating node offsets), no canvas. Transform/opacity
 * animations only; honors prefers-reduced-motion.
 */

.ck-journey {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 16px 60px;
  font-family: 'Inter', system-ui, sans-serif;
  background:
    radial-gradient(circle at 15% 20%, rgba(167, 243, 208, 0.35), transparent 40%),
    radial-gradient(circle at 85% 60%, rgba(191, 219, 254, 0.35), transparent 45%),
    #f6fdf4;
  border-radius: 18px;
}

/* ---- Header ---- */
.ckj-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.ckj-title { margin: 0; font-size: 24px; font-weight: 800; color: #14532d; }
.ckj-sub { color: #4d7c0f; font-size: 13px; font-weight: 600; margin-top: 4px; }
.ckj-head-side { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ckj-total { display: flex; gap: 10px; background: #fff; border: 2px solid #fde68a; border-radius: 999px; padding: 8px 14px; font-weight: 800; font-size: 13px; }
.ckj-total-stars { color: #d97706; }
.ckj-total-progress { color: #166534; }
.ckj-classic-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; background: #fff; border: 1px solid #d1d5db; border-radius: 12px; color: #374151; font-size: 13px; font-weight: 700; text-decoration: none; }
.ckj-classic-link:hover { border-color: #6366f1; color: #4338ca; }

.ckj-empty { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 40px 20px; text-align: center; color: #64748b; font-weight: 600; }

/* ---- Land (topic) ---- */
.ckj-land { margin-bottom: 8px; }
.ckj-land-head {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, #fef9c3, #fef3c7);
  border: 2px solid #fcd34d;
  border-radius: 14px;
  padding: 10px 16px;
  margin: 18px 0 8px;
}
.ckj-land-flag { font-size: 24px; }
.ckj-land-title { margin: 0; font-size: 17px; font-weight: 800; color: #92400e; flex: 1; }
.ckj-land-progress { font-size: 12px; font-weight: 800; color: #b45309; font-variant-numeric: tabular-nums; }
.ckj-land.is-complete .ckj-land-head { background: linear-gradient(135deg, #dcfce7, #bbf7d0); border-color: #4ade80; }
.ckj-land.is-complete .ckj-land-title, .ckj-land.is-complete .ckj-land-progress { color: #166534; }

/* ---- Winding path: alternating horizontal offsets ---- */
.ckj-path { list-style: none; margin: 0; padding: 8px 0; display: flex; flex-direction: column; gap: 26px; }
.ckj-step { display: flex; flex-direction: column; align-items: center; position: relative; }
.ckj-step:nth-child(4n+1) { transform: translateX(-17%); }
.ckj-step:nth-child(4n+2) { transform: translateX(9%); }
.ckj-step:nth-child(4n+3) { transform: translateX(17%); }
.ckj-step:nth-child(4n+4) { transform: translateX(-9%); }
/* dotted connector to the next step */
.ckj-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 100%;
  width: 4px;
  height: 26px;
  background-image: linear-gradient(#d6d3d1 55%, transparent 55%);
  background-size: 4px 10px;
  border-radius: 2px;
}

/* ---- Node ---- */
.ckj-node {
  position: relative;
  width: 64px;
  height: 64px;
  border: none;
  border-radius: 50%;
  background: #e7e5e4;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease;
  box-shadow: 0 4px 0 #d6d3d1;
}
.ckj-node:active { transform: translateY(2px); box-shadow: 0 2px 0 #d6d3d1; }
.ckj-ring { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); transform: rotate(-90deg); }
.ckj-ring-bg { fill: none; stroke: #e2e8f0; stroke-width: 5; }
.ckj-ring-fill { fill: none; stroke: #22c55e; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 201; stroke-dashoffset: 201; transition: stroke-dashoffset 0.5s ease; }
.ckj-node-core { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; color: #78716c; }
.ckj-node-lock, .ckj-node-gold, .ckj-node-crown { display: none; }
.ckj-node-title {
  margin-top: 8px;
  max-width: 150px;
  font-size: 12px;
  font-weight: 700;
  color: #57534e;
  text-align: center;
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ckj-stars { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); display: flex; gap: 1px; background: #fff; border-radius: 999px; padding: 1px 6px; box-shadow: 0 1px 4px rgba(0,0,0,0.12); }
.ckj-star { font-style: normal; font-size: 11px; color: #d6d3d1; }
.ckj-star.is-on { color: #f59e0b; }

/* Node states (JS-applied) */
.ckj-node.is-available { background: #4ade80; box-shadow: 0 4px 0 #16a34a; }
.ckj-node.is-available .ckj-node-core { color: #fff; }
.ckj-node.is-current { background: #22c55e; box-shadow: 0 4px 0 #15803d; }
.ckj-node.is-current .ckj-node-core { color: #fff; }
.ckj-node.is-current::before {
  content: "BẮT ĐẦU";
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: #16a34a;
  border: 2px solid #4ade80;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.5px;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  animation: ckjBounce 1.4s ease-in-out infinite;
}
@keyframes ckjBounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-4px); } }
.ckj-node.is-passed { background: #86efac; box-shadow: 0 4px 0 #22c55e; }
.ckj-node.is-passed .ckj-node-core { color: #14532d; }
.ckj-node.is-complete { background: #fbbf24; box-shadow: 0 4px 0 #d97706; }
.ckj-node.is-complete .ckj-node-core { color: #fff; }
.ckj-node.is-perfect { background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: 0 4px 0 #b45309, 0 0 14px rgba(251, 191, 36, 0.65); }
.ckj-node.is-perfect .ckj-node-num { display: none; }
.ckj-node.is-perfect .ckj-node-crown { display: inline; font-size: 24px; }
.ckj-node.is-locked-progress { background: #e7e5e4; cursor: not-allowed; opacity: 0.75; }
.ckj-node.is-locked-progress .ckj-node-num { display: none; }
.ckj-node.is-locked-progress .ckj-node-lock { display: inline; font-size: 20px; filter: grayscale(1); opacity: 0.7; }
.ckj-node.is-locked-licence { background: #fef3c7; box-shadow: 0 4px 0 #fcd34d; }
.ckj-node.is-locked-licence .ckj-node-num { display: none; }
.ckj-node.is-locked-licence .ckj-node-gold { display: inline; font-size: 20px; }
.ckj-node.is-unplayable { background: #f5f5f4; cursor: not-allowed; opacity: 0.5; }
.ckj-node.ckj-shake { animation: ckjNodeShake 0.3s ease-in-out; }
@keyframes ckjNodeShake { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-5px); } 60% { transform: translateX(5px); } }

/* Locked tooltip bubble */
.ckj-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 10px;
  white-space: nowrap;
  z-index: 20;
  animation: ckjTipPop 1.8s ease forwards;
}
@keyframes ckjTipPop { 0% { opacity: 0; } 10%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* ---- CTA (guest / not-owned) ---- */
.ckj-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #eef2ff, #e0e7ff);
  border: 2px solid #a5b4fc;
  border-radius: 16px;
  padding: 16px 20px;
  margin: 20px 0;
}
.ckj-cta-text { display: flex; flex-direction: column; gap: 2px; }
.ckj-cta-text strong { color: #3730a3; font-size: 16px; }
.ckj-cta-text span { color: #4f46e5; font-size: 13px; font-weight: 600; }
.ckj-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  background: #6366f1;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 0 #4338ca;
  transition: transform 0.15s ease;
}
.ckj-cta-btn:hover { transform: scale(1.04); color: #fff; }
.ckj-cta-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #4338ca; }

.ckj-finish { text-align: center; font-size: 16px; font-weight: 800; color: #92400e; background: #fef3c7; border: 2px dashed #fcd34d; border-radius: 14px; padding: 14px; margin-top: 26px; }

/* ---- Mobile ---- */
@media (max-width: 480px) {
  .ck-journey { padding: 14px 10px 44px; border-radius: 0; }
  .ckj-title { font-size: 20px; }
  .ckj-node { width: 56px; height: 56px; }
  .ckj-step:nth-child(4n+1) { transform: translateX(-12%); }
  .ckj-step:nth-child(4n+2) { transform: translateX(7%); }
  .ckj-step:nth-child(4n+3) { transform: translateX(12%); }
  .ckj-step:nth-child(4n+4) { transform: translateX(-7%); }
  .ckj-node-title { max-width: 120px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .ckj-node.is-current::before { animation: none; }
  .ckj-node.ckj-shake { animation: none; }
  .ckj-ring-fill { transition: none; }
}

/* ---------------------------------------------------------------------
   Onboarding tour 3 bước (P6 — theory-journey-tour.js). Highlight bằng
   ring box-shadow trên mục tiêu, thẻ hướng dẫn cố định đáy màn hình. */

.ckjt-focus {
  position: relative;
  z-index: 9951;
  box-shadow: 0 0 0 5px #fbbf24, 0 0 0 10px rgba(251, 191, 36, 0.35);
  border-radius: 50%;
}

a.ckj-classic-link.ckjt-focus {
  border-radius: 999px;
}

.ckjt-card {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 9952;
  width: min(420px, calc(100vw - 24px));
  background: #ffffff;
  border: 2px solid #fcd34d;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.25);
  font-family: 'Inter', system-ui, sans-serif;
}

.ckjt-step {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #d97706;
  margin-bottom: 4px;
}

.ckjt-text {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.45;
  margin-bottom: 12px;
}

.ckjt-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.ckjt-next {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  padding: 10px 22px;
  min-height: 48px;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(249, 115, 22, 0.35);
}

.ckjt-next:hover { filter: brightness(1.06); }

.ckjt-skip {
  border: 0;
  background: none;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  min-height: 48px;
  padding: 0 8px;
}


/* ==== P11 JOURNEY SCENE (candy-land backdrop + soft-bright restyle) ==== */
/* =====================================================================
   CANDY-LAND SCENE  —  full-bleed storybook world behind the path.
   Injected once inside .ck-journey as <div class="ckj-scene">.
   The backdrop lives on .ck-journey itself (so it tiles the WHOLE
   scrollable height, any node count); .ckj-scene holds the props.
   All decorative, pointer-events:none, sits UNDER .ckj-land (z-index).
   ===================================================================== */

/* .ck-journey becomes the world canvas: clip the scene, stack context,
   and paint the sky + hills + path band + repeating candy texture that
   covers the ENTIRE column so a 50-node map never shows dead ground. */
.ck-journey {
  position: relative;
  isolation: isolate;
  overflow: hidden;                 /* clip props that peek past the rounded frame */
  /* Layer order (top paints first):
     1-2  white sprinkle dots  — tile X+Y down the WHOLE column
     3    rolling-hill horizon — two soft green mounds under the sky
     4    green candy ground   — solid fill from the horizon down, tiles forever
     5    sky gradient         — tall blue->mint fade pinned to the top band     */
  background-color: #8ad863;        /* candy-grass fallback so tall maps never show white */
  background-image:
    radial-gradient(circle at 14px 12px, rgba(255,255,255,0.6) 2px, transparent 2.7px),
    radial-gradient(circle at 44px 40px, rgba(255,255,255,0.42) 1.7px, transparent 2.3px),
    radial-gradient(140% 150px at 22% 250px, #93e372 0 46%, transparent 48%),
    radial-gradient(150% 160px at 80% 292px, #7ed957 0 46%, transparent 48%),
    linear-gradient(180deg, #7ec8f2 0, #96d6f4 96px, #bce8ee 176px, #ddf3e2 232px);
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;
  background-size:
    58px 58px, 58px 58px,          /* sprinkle tiles (repeat down full height) */
    100% 260px, 100% 300px,        /* hill mounds pinned near the horizon */
    100% 300px;                    /* sky band, top 300px only */
  background-position:
    0 0, 29px 29px,
    0 0, 0 0,
    0 0;
}

/* The prop layer: full height of the (scrollable) journey column. */
.ckj-scene {
  position: absolute;
  inset: 0;
  z-index: 0;                       /* under .ckj-land (z-index:1) */
  pointer-events: none;
  overflow: hidden;
  /* On the scene layer:
     - a soft CREAM PATH band down the centre (the winding road the nodes ride)
     - larger pastel confetti that repeats the FULL height so a long map keeps a
       lively candy floor everywhere (starts below the sky band). */
  background-image:
    linear-gradient(90deg, transparent calc(50% - 168px), rgba(255,243,220,0.85) calc(50% - 156px), rgba(255,248,232,0.92) 50%, rgba(255,243,220,0.85) calc(50% + 156px), transparent calc(50% + 168px)),
    radial-gradient(circle at 30px 22px, rgba(255,120,170,0.15) 3px, transparent 3.6px),
    radial-gradient(circle at 96px 74px, rgba(110,194,242,0.15) 2.4px, transparent 3px),
    radial-gradient(circle at 62px 116px, rgba(255,227,107,0.17) 2.6px, transparent 3.2px);
  background-size: 100% 100%, 132px 142px, 132px 142px, 132px 142px;
  background-repeat: no-repeat, repeat, repeat, repeat;
  background-position: 0 0, 0 240px, 40px 300px, 84px 360px;
}

/* Common prop rules -------------------------------------------------- */
.ckj-scene .ckj-prop { position: absolute; line-height: 0; }
.ckj-scene .ckj-prop svg { display: block; overflow: visible; filter: drop-shadow(0 4px 5px rgba(76, 60, 90, 0.18)); }

/* --- HERO props: two staggered edge columns framing the path. All start
   BELOW the first land banner (~y262) so nothing collides with the header
   or banner. Deliberately spaced down the top band so they never pile up. */

/* Rainbow first: painted lowest (arcs up from the ground on the right). */
.ckj-rainbow  { top: 262px; right: 6px;  width: 128px; opacity: 0.9; }
.ckj-rainbow svg { width: 128px; height: auto; }

/* LEFT edge column (top -> down) */
.ckj-castle   { top: 276px; left: -10px; width: 118px; }
.ckj-castle svg { width: 118px; height: auto; }
.ckj-truck    { top: 452px; left: -16px; width: 128px; }
.ckj-truck svg { width: 128px; height: auto; }
.ckj-tree-pink  { top: 616px; left: 2px;  width: 60px; }
.ckj-tree-pink svg { width: 60px; height: auto; }
.ckj-lolli-a  { top: 470px; left: 92px; width: 40px; }   /* small accent by truck */
.ckj-lolli-a svg { width: 40px; height: auto; }
.ckj-cane-a   { top: 636px; left: 92px; width: 36px; }
.ckj-cane-a svg { width: 36px; height: auto; }

/* RIGHT edge column (top -> down) */
.ckj-ginger   { top: 306px; right: -10px; width: 110px; }
.ckj-ginger svg { width: 110px; height: auto; }
.ckj-cupcake  { top: 486px; right: 16px;  width: 58px; }
.ckj-cupcake svg { width: 58px; height: auto; }
.ckj-cone     { top: 470px; right: 82px;  width: 50px; }  /* small accent by cupcake */
.ckj-cone svg { width: 50px; height: auto; }
.ckj-gumdrops { top: 626px; right: 14px;  width: 76px; }
.ckj-gumdrops svg { width: 76px; height: auto; }
.ckj-cane-b   { top: 300px; right: 96px;  width: 36px; }
.ckj-cane-b svg { width: 36px; height: auto; }

/* Second-land accents (lower band, framing land 2's nodes) */
.ckj-tree-green { top: 900px; left: 2px;  width: 64px; }
.ckj-tree-green svg { width: 64px; height: auto; }
.ckj-lolli-b  { top: 940px; right: 8px;  width: 40px; }
.ckj-lolli-b svg { width: 40px; height: auto; }

/* Clouds (drift horizontally, transform-only) — live in the top sky band */
.ckj-cloud svg { filter: drop-shadow(0 3px 4px rgba(90,120,150,0.14)); }
.ckj-cloud-a { top: 18px;  left: 6%;   width: 116px; animation: ckjDriftA 26s linear infinite; }
.ckj-cloud-a svg { width: 116px; height: auto; }
.ckj-cloud-b { top: 60px;  right: 8%;  width: 96px;  animation: ckjDriftB 32s linear infinite; }
.ckj-cloud-b svg { width: 96px; height: auto; }
.ckj-cloud-c { top: 120px; left: 40%;  width: 84px;  animation: ckjDriftA 38s linear infinite; }
.ckj-cloud-c svg { width: 84px; height: auto; }

/* --- Mid-scroll ANCHORED fillers: placed further down (percentage of
   the tall column) so a long map keeps props past the hero band without
   needing to know node count. On short maps they simply fall off-canvas
   (clipped) — harmless. --------------------------------------------- */
.ckj-lolli-c    { top: 40%; left: 6px;   width: 40px; }
.ckj-lolli-c svg { width: 40px; height: auto; }
.ckj-tree-mid   { top: 58%; right: -6px; width: 64px; }
.ckj-tree-mid svg { width: 64px; height: auto; }
.ckj-gumdrops-mid { top: 76%; left: 30%; width: 78px; }
.ckj-gumdrops-mid svg { width: 78px; height: auto; }

/* Cloud drift keyframes — transform only, tiny travel so they never
   escape the clipped frame awkwardly. */
@keyframes ckjDriftA { 0% { transform: translateX(0); } 50% { transform: translateX(18px); } 100% { transform: translateX(0); } }
@keyframes ckjDriftB { 0% { transform: translateX(0); } 50% { transform: translateX(-16px); } 100% { transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) {
  .ckj-cloud-a, .ckj-cloud-b, .ckj-cloud-c { animation: none; }
}

/* Everything the journey renders (header, lands, path, CTA, finish)
   must float ABOVE the scene. They are direct children of .ck-journey. */
.ck-journey > .ckj-head,
.ck-journey > .ckj-land,
.ck-journey > .ckj-cta,
.ck-journey > .ckj-finish,
.ck-journey > .ckj-empty { position: relative; z-index: 1; }

/* On phones the world is narrower — shrink hero props + hug the edges (keep
   the SAME vertical positions as desktop so nothing collides with header/
   banner). Drop a few small accents to avoid crowding the slimmer path. */
@media (max-width: 480px) {
  .ckj-castle  { width: 92px;  left: -12px; }
  .ckj-castle svg { width: 92px; }
  .ckj-rainbow { width: 96px;  right: -4px; opacity: 0.85; }
  .ckj-rainbow svg { width: 96px; }
  .ckj-ginger  { width: 88px;  right: -16px; }
  .ckj-ginger svg { width: 88px; }
  .ckj-truck   { width: 100px; left: -20px; }
  .ckj-truck svg { width: 100px; }
  .ckj-gumdrops { width: 62px; right: -8px; }
  .ckj-gumdrops svg { width: 62px; }
  .ckj-tree-pink { left: -6px; width: 52px; }
  .ckj-tree-pink svg { width: 52px; }
  .ckj-tree-green { width: 54px; left: -6px; }
  .ckj-tree-green svg { width: 54px; }
  /* small accents that would crowd the narrow centre road: hide */
  .ckj-cupcake, .ckj-cone, .ckj-cane-a, .ckj-cane-b, .ckj-lolli-a { display: none; }
}


/* =====================================================================
   CANDY RESTYLE  —  softer, rounder, brighter, glossier "candy" look.
   Pure visual overrides layered on the existing journey rules. Every
   original selector keeps working; node states, ring, stars, locks and
   the winding-path geometry are all preserved. Contrast on node number
   + node title stays legible (dark text on light, white on saturated).
   ===================================================================== */

/* ---- Header: playful candy banner --------------------------------- */
.ck-journey > .ckj-head {
  background: linear-gradient(135deg, rgba(255,255,255,0.86), rgba(255,247,237,0.72));
  border: 2px solid #ffffff;
  border-radius: 22px;
  padding: 12px 16px;
  box-shadow: 0 8px 22px rgba(80, 110, 150, 0.16), inset 0 1px 0 rgba(255,255,255,0.9);
}
.ckj-title {
  color: #b23a76;
  text-shadow: 0 2px 0 #ffffff, 0 3px 6px rgba(178, 58, 118, 0.18);
  letter-spacing: 0.2px;
}
.ckj-sub { color: #4f8f2e; font-weight: 700; }
.ckj-total {
  background: linear-gradient(180deg, #ffffff, #fff6e6);
  border: 2px solid #ffd98a;
  box-shadow: 0 4px 10px rgba(217, 119, 6, 0.14);
}
.ckj-classic-link {
  background: linear-gradient(180deg, #ffffff, #f3f7ff);
  border: 2px solid #cfe0ff;
  border-radius: 14px;
  color: #3f61c4;
  box-shadow: 0 3px 8px rgba(80, 110, 200, 0.14);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.ckj-classic-link:hover { transform: translateY(-1px); border-color: #a9c6ff; color: #2f49b4; }

/* ---- Land banner: rounded candy plaque ---------------------------- */
.ckj-land-head {
  background: linear-gradient(135deg, #fff0f6, #ffe1ee);
  border: 2.5px solid #ffffff;
  border-radius: 20px;
  padding: 11px 18px;
  box-shadow: 0 8px 20px rgba(214, 51, 132, 0.14), inset 0 1px 0 rgba(255,255,255,0.9);
}
.ckj-land-flag {
  font-size: 26px;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.12));
}
.ckj-land-title { color: #b23a76; text-shadow: 0 1px 0 rgba(255,255,255,0.7); }
.ckj-land-progress {
  color: #b45309;
  background: rgba(255,255,255,0.75);
  border-radius: 999px;
  padding: 2px 10px;
}
.ckj-land.is-complete .ckj-land-head {
  background: linear-gradient(135deg, #e7fbe1, #ccf5c2);
  border-color: #ffffff;
  box-shadow: 0 8px 20px rgba(34, 197, 94, 0.16), inset 0 1px 0 rgba(255,255,255,0.9);
}
.ckj-land.is-complete .ckj-land-title { color: #1f8a44; }
.ckj-land.is-complete .ckj-land-progress { color: #166534; }

/* ---- Path connector: soft candy dashes ---------------------------- */
.ckj-step:not(:last-child)::after {
  width: 6px;
  background-image: linear-gradient(rgba(255,255,255,0.95) 55%, transparent 55%);
  background-size: 6px 12px;
  opacity: 0.9;
  filter: drop-shadow(0 1px 1px rgba(120,110,90,0.18));
}

/* ---- Node: glossy rounded candy platform -------------------------- */
.ckj-node {
  width: 66px;
  height: 66px;
  border-radius: 24px;                    /* squircle candy button, not flat circle */
  background:
    radial-gradient(120% 90% at 50% 22%, rgba(255,255,255,0.85), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #f4f1ee, #e2ddd8);
  box-shadow:
    0 6px 0 #cfc7bf,                       /* chunky candy base */
    0 10px 16px rgba(90, 80, 70, 0.22),    /* soft drop */
    inset 0 2px 3px rgba(255,255,255,0.9), /* top gloss */
    inset 0 -4px 6px rgba(0,0,0,0.06);     /* bottom cavity */
  transition: transform 0.16s cubic-bezier(.34,1.56,.64,1), box-shadow 0.16s ease;
}
.ckj-node:hover { transform: translateY(-2px); }
.ckj-node:active { transform: translateY(3px); box-shadow: 0 3px 0 #cfc7bf, 0 5px 8px rgba(90,80,70,0.2), inset 0 2px 3px rgba(255,255,255,0.9); }
.ckj-node-core {
  font-size: 24px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.14);
}
/* keep the ring hugging the new squircle */
.ckj-ring { inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); }
.ckj-ring-bg { stroke: rgba(255,255,255,0.7); stroke-width: 5.5; }
.ckj-ring-fill { stroke: #ffd23f; stroke-width: 5.5; filter: drop-shadow(0 0 4px rgba(255,210,63,0.7)); }

/* Node title: crisp readable pill-free label with a soft white halo */
.ckj-node-title {
  color: #5b4636;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(255,255,255,0.85), 0 2px 4px rgba(255,255,255,0.6);
}

/* Stars: brighter candy chip */
.ckj-stars {
  background: linear-gradient(180deg, #ffffff, #fff4e0);
  border: 1.5px solid #ffe1a6;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.2);
  padding: 1px 7px;
}
.ckj-star.is-on { color: #ffb020; text-shadow: 0 0 4px rgba(255,176,32,0.5); }

/* ---- Node states: candy-fied, glossier, same semantics ------------ */
.ckj-node.is-available {
  background:
    radial-gradient(120% 90% at 50% 20%, rgba(255,255,255,0.9), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #7ef0a0, #43d17a);
  box-shadow: 0 6px 0 #23b85f, 0 10px 16px rgba(22,163,74,0.28), inset 0 2px 3px rgba(255,255,255,0.85), inset 0 -4px 6px rgba(0,80,40,0.12);
}
.ckj-node.is-available .ckj-node-core { color: #ffffff; }

.ckj-node.is-current {
  background:
    radial-gradient(120% 90% at 50% 18%, rgba(255,255,255,0.95), rgba(255,255,255,0) 52%),
    linear-gradient(180deg, #62e58c, #22c55e);
  /* NO transform animation on the node itself — it's the tap target; an
     infinite transform makes it never "stable" (clicks time out) + moves the
     kid's target. The bouncing "BẮT ĐẦU" pill (::before) is the attention cue;
     the node gets a static outer glow instead. */
  box-shadow: 0 6px 0 #159447, 0 12px 20px rgba(21,128,61,0.34), 0 0 16px rgba(52,211,120,0.55), inset 0 2px 4px rgba(255,255,255,0.9), inset 0 -4px 7px rgba(0,70,35,0.14);
}
.ckj-node.is-current .ckj-node-core { color: #ffffff; }
/* bouncy candy "BẮT ĐẦU" tag */
.ckj-node.is-current::before {
  background: linear-gradient(180deg, #ffffff, #eafff1);
  color: #12924a;
  border: 2px solid #7ef0a0;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(18,146,74,0.3);
  font-weight: 900;
}

.ckj-node.is-passed {
  background:
    radial-gradient(120% 90% at 50% 22%, rgba(255,255,255,0.85), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #b6f5c8, #86e0a4);
  box-shadow: 0 6px 0 #4fc47a, 0 9px 14px rgba(34,197,94,0.24), inset 0 2px 3px rgba(255,255,255,0.85);
}
.ckj-node.is-passed .ckj-node-core { color: #16663a; }

.ckj-node.is-complete {
  background:
    radial-gradient(120% 90% at 50% 20%, rgba(255,255,255,0.9), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #ffdf7a, #fbbf24);
  box-shadow: 0 6px 0 #de9412, 0 10px 16px rgba(217,119,6,0.28), inset 0 2px 3px rgba(255,255,255,0.85);
}
.ckj-node.is-complete .ckj-node-core { color: #ffffff; }

.ckj-node.is-perfect {
  background:
    radial-gradient(120% 90% at 50% 18%, rgba(255,255,255,0.95), rgba(255,255,255,0) 52%),
    linear-gradient(180deg, #ffe487, #f5a623);
  box-shadow: 0 6px 0 #c9820f, 0 10px 18px rgba(245,166,35,0.36), 0 0 20px rgba(255,208,63,0.7), inset 0 2px 4px rgba(255,255,255,0.9);
}
.ckj-node.is-perfect .ckj-node-crown { font-size: 26px; filter: drop-shadow(0 2px 2px rgba(180,120,0,0.35)); }

.ckj-node.is-locked-progress {
  background:
    radial-gradient(120% 90% at 50% 22%, rgba(255,255,255,0.6), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #efece9, #ddd6d0);
  box-shadow: 0 6px 0 #c7bfb7, 0 8px 12px rgba(90,80,70,0.16), inset 0 2px 3px rgba(255,255,255,0.7);
  opacity: 0.82;
}
.ckj-node.is-locked-progress .ckj-node-lock { filter: none; opacity: 0.8; }

.ckj-node.is-locked-licence {
  background:
    radial-gradient(120% 90% at 50% 20%, rgba(255,255,255,0.85), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #fff1c8, #ffe08a);
  box-shadow: 0 6px 0 #f0c24d, 0 9px 14px rgba(240,180,50,0.26), inset 0 2px 3px rgba(255,255,255,0.85);
}

/* ---- CTA: candy button ------------------------------------------- */
.ck-journey > .ckj-cta {
  background: linear-gradient(135deg, #fff0f6, #ffe0ef);
  border: 2.5px solid #ffffff;
  border-radius: 22px;
  box-shadow: 0 10px 24px rgba(214, 51, 132, 0.16), inset 0 1px 0 rgba(255,255,255,0.9);
}
.ckj-cta-text strong { color: #b23a76; }
.ckj-cta-text span { color: #c2568f; }
.ckj-cta-btn {
  background: linear-gradient(180deg, #ff8fbf, #ff5d95);
  box-shadow: 0 6px 0 #e03e78, 0 10px 18px rgba(224,62,120,0.34), inset 0 2px 3px rgba(255,255,255,0.5);
  transition: transform 0.15s cubic-bezier(.34,1.56,.64,1);
}
.ckj-cta-btn:hover { transform: translateY(-2px) scale(1.03); color: #fff; }
.ckj-cta-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 #e03e78, 0 5px 8px rgba(224,62,120,0.3), inset 0 2px 3px rgba(255,255,255,0.5); }

/* ---- Finish banner ------------------------------------------------ */
.ck-journey > .ckj-finish {
  background: linear-gradient(135deg, #fff7db, #ffe9a8);
  border: 2.5px dashed #ffcf5c;
  border-radius: 20px;
  color: #b06a12;
  box-shadow: 0 8px 20px rgba(217, 119, 6, 0.14);
}

@media (max-width: 480px) {
  .ckj-node { width: 58px; height: 58px; border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .ckj-node.is-current { animation: none; }
  .ckj-node:hover, .ckj-cta-btn:hover { transform: none; }
}


/* ---- P11 integration overrides (main-session) ------------------------ */
/* Title pill: guarantees the label reads over ANY prop/grass behind it. */
.is-mini-board {} /* no-op guard */
.ck-journey .ckj-node-title {
  background: rgba(255, 255, 255, 0.78);
  border-radius: 10px;
  padding: 3px 9px;
  box-shadow: 0 1px 4px rgba(90, 80, 70, 0.14);
  -webkit-backdrop-filter: none;
}
/* Soft dashed candy centre-line so the winding road reads as a path. */
.ckj-path { position: relative; }

/* ---- P13 "Kho Giao Diện": nhân vật đứng trên chặng hiện tại ---------- */
/* Trang trí thuần, KHÔNG tương tác (pointer-events:none) → không cản click
   node như bài học P11 (không animate transform của chính node). */
.ckj-character {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 12px);
  width: 62px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 5;
  filter: drop-shadow(0 6px 7px rgba(70, 50, 20, 0.22));
  transform-origin: 50% 100%;
  animation: ckjCharBob 2.6s ease-in-out infinite;
}
.ckj-character svg,
.ckj-character-img {
  display: block;
  width: 100%;
  height: auto;
}
.ckj-character-img {
  max-height: 86px;
  object-fit: contain;
}
@keyframes ckjCharBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-6px); }
}
@media (max-width: 480px) {
  .ckj-character { width: 52px; bottom: calc(100% - 10px); }
}
@media (prefers-reduced-motion: reduce) {
  .ckj-character { animation: none; }
}

/* ---- P9 "Ván Cờ Vàng" — node vàng của ngày -------------------------- */
.ckj-node.is-golden {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #fbbf24, 0 6px 18px rgba(245, 158, 11, 0.55);
}
.ckj-golden-badge {
  position: absolute;
  top: -14px;
  right: -10px;
  font-size: 20px;
  pointer-events: none;
  z-index: 6;
  filter: drop-shadow(0 2px 3px rgba(120, 80, 0, 0.35));
  animation: ckjGoldenPulse 2s ease-in-out infinite;
}
@keyframes ckjGoldenPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.72; }
}
@media (prefers-reduced-motion: reduce) {
  .ckj-golden-badge { animation: none; }
}

/* ---- P9 "Lớn rồi!" — chế độ bé lớn: ẩn cảnh kẹo/nhân vật (bản đồ) ---- */
.ck-age-big .ckj-scene { display: none !important; }
.ck-age-big .ckj-character { display: none !important; }
.ck-age-big .ckms { display: none !important; }

/* ---- P15: landmark đầu/cuối bản đồ (theme đổi được) ------------------ */
.ckj-landmark { display: flex; justify-content: center; position: relative; z-index: 1; pointer-events: none; }
.ckj-landmark img { max-width: 260px; max-height: 240px; width: auto; height: auto; filter: drop-shadow(0 10px 14px rgba(60, 40, 20, 0.3)); }
.ckj-landmark-start { margin: 4px 0 10px; }
.ckj-landmark-end { margin: 14px 0 6px; }
@media (max-width: 480px) { .ckj-landmark img { max-width: 190px; max-height: 180px; } }