/* ===== ATC Monthly Journey : เกม 3 มิติ ===== */
.j-wrap{background:#081a14}
.j-stage{position:relative;height:clamp(600px,86vh,840px);overflow:hidden;perspective:1700px;perspective-origin:50% 32%;
  background:radial-gradient(ellipse 85% 65% at 50% 36%,#6a35a6 0%,#3b1766 42%,#160726 100%);
  touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;font-family:var(--sans)}
.j-stage.dragging{cursor:grabbing}
.j-stage::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.7;
  background-image:
   radial-gradient(1.6px 1.6px at 8% 14%,#fff,transparent 60%),radial-gradient(1.2px 1.2px at 22% 6%,#fff,transparent 60%),
   radial-gradient(1.4px 1.4px at 37% 22%,#cfe,transparent 60%),radial-gradient(1.2px 1.2px at 64% 9%,#fff,transparent 60%),
   radial-gradient(1.8px 1.8px at 81% 19%,#ffe9a8,transparent 60%),radial-gradient(1.2px 1.2px at 93% 7%,#fff,transparent 60%),
   radial-gradient(1.4px 1.4px at 4% 62%,#fff,transparent 60%),radial-gradient(1.2px 1.2px at 96% 58%,#cfe,transparent 60%),
   radial-gradient(1.6px 1.6px at 12% 88%,#ffe9a8,transparent 60%),radial-gradient(1.2px 1.2px at 88% 90%,#fff,transparent 60%)}
.j-world{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transition:left .8s ease,top .8s ease}
.j-stage.panel-open .j-world{left:62%}
.j-floor,.j-station,.j-lift,.j-box,.j-token,.j-bill,.j-deco,.j-start{transform-style:preserve-3d}

/* boxes */
.j-box{position:absolute;left:0;top:0}
.j-f{position:absolute;left:0;top:0;transform-origin:0 0;background:var(--c)}
.j-f::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--sh,0);pointer-events:none}
.j-f.front{--sh:.28}.j-f.back{--sh:.4}.j-f.side{--sh:.18}.j-f.side2{--sh:.1}
.j-f.top{background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(255,255,255,0) 60%),var(--c);box-shadow:inset 0 0 0 2px rgba(255,255,255,.3)}

/* board */
.j-floor{position:absolute;left:0;top:0;width:1000px;height:1000px}
.j-floor-top{position:absolute;inset:0;border-radius:4px;
  background:
   linear-gradient(90deg,transparent 69px,rgba(214,90,90,.4) 69px,rgba(214,90,90,.4) 71px,transparent 71px),
   repeating-linear-gradient(to bottom,transparent 0 39px,#e2d6ef 39px 40px),
   linear-gradient(160deg,#fefcff,#eee6f7)}
.j-slab{position:absolute;left:0;top:0;transform-origin:0 0;background:#3a1766}
.j-slab.s2{background:#260d45}.j-slab.s3{background:#2f1156}
.j-plate{position:absolute;left:770px;top:34px;width:210px;height:84px;transform:translateZ(1px);border:2px solid rgba(58,23,96,.22);border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;color:rgba(58,23,96,.5);text-align:center}
.j-plate b{font:700 30px/1 var(--serif);letter-spacing:.06em}
.j-plate small{font-size:12px;margin-top:4px}
.j-ribbon{position:absolute;left:0;top:0;width:1000px;height:1000px;overflow:visible;transform:translateZ(2px);pointer-events:none}
.j-under{fill:none;stroke:rgba(58,23,96,.12);stroke-width:58;stroke-linecap:round}
.j-seg{fill:none;stroke-width:44;stroke-linecap:round;opacity:.28;transition:opacity .8s}
.j-seg.on{opacity:1}
.j-dash{fill:none;stroke:#fff;stroke-width:3;stroke-dasharray:12 16;animation:jdash 1.1s linear infinite;opacity:.95}
@keyframes jdash{to{stroke-dashoffset:-28}}

/* stations */
.j-station,.j-start{position:absolute;width:120px;height:120px;cursor:pointer}
.j-ring{position:absolute;left:-50px;top:-50px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,var(--cg) 0%,transparent 66%);
  transform:translateZ(3px);opacity:0;transition:opacity .5s;pointer-events:none}
.j-station.on .j-ring{opacity:1;animation:jpulse 1.8s ease-in-out infinite}
@keyframes jpulse{50%{transform:translateZ(3px) scale(1.2)}}
.j-lift{position:absolute;inset:0;transition:transform .7s cubic-bezier(.3,1.5,.5,1)}
.j-station.on .j-lift{transform:translateZ(22px)}
.j-num{position:absolute;inset:0;display:grid;place-items:center;font:700 56px/1 var(--serif);color:rgba(255,255,255,.6)}
.j-station.done .j-f.top::before{content:"✓";position:absolute;right:8px;top:6px;width:26px;height:26px;border-radius:50%;background:#fff;color:var(--c);display:grid;place-items:center;font:700 16px/1 var(--sans)}
.j-bill{position:absolute;width:0;height:0;transform:translateZ(130px) rotateZ(calc(var(--rot) * -1deg)) rotateX(calc(var(--tilt) * -1deg))}
.j-bill-in{position:absolute;left:0;top:0;transform:translate(-50%,-100%);background:#fff;border-radius:12px;padding:9px 16px 11px;min-width:150px;text-align:center;white-space:nowrap;
  border-bottom:5px solid var(--c);box-shadow:0 12px 30px -10px rgba(0,0,0,.55);transition:box-shadow .4s}
.j-bill-in b{display:block;font:700 30px/1 var(--serif);color:var(--c)}
.j-bill-in span{display:block;font:600 14px/1.45 var(--sans);color:#3A1760;margin-top:4px}
.j-bill-in em{display:block;font:500 11px/1.3 var(--sans);font-style:normal;color:#7a7086}
.j-station.on .j-bill-in{box-shadow:0 0 0 4px var(--c),0 16px 40px -8px rgba(0,0,0,.65)}
.j-star{position:absolute;right:-12px;top:-12px;width:30px;height:30px;border-radius:50%;background:#FFC83D;color:#6d4300;font-style:normal;display:grid;place-items:center;
  font-size:17px;transform:scale(0);transition:transform .55s cubic-bezier(.3,1.7,.5,1);box-shadow:0 0 16px rgba(255,200,61,.9)}
.j-station.star .j-star{transform:scale(1)}

/* token */
.j-token{position:absolute;left:0;top:0;width:0;height:0}
.j-bill.j-tb{transform:rotateZ(calc(var(--rot) * -1deg)) rotateX(calc(var(--tilt) * -1deg))}
.j-tok-in{position:absolute;left:0;top:0;width:66px;transform:translate(-50%,-100%);filter:drop-shadow(0 0 14px rgba(255,214,102,.95))}
.j-tok-in svg{display:block;width:100%;height:auto}
.j-tshadow{position:absolute;left:0;top:0;width:80px;height:80px;margin:-40px 0 0 -40px;border-radius:50%;background:radial-gradient(circle,rgba(0,0,0,.38),transparent 70%);pointer-events:none}

/* decorations */
.j-deco{position:absolute;width:0;height:0;pointer-events:none}
.j-deco .j-bill{transform:translateZ(var(--bz)) rotateZ(calc(var(--rot) * -1deg)) rotateX(calc(var(--tilt) * -1deg))}
.j-float{position:absolute;left:0;top:0;animation:jfloat var(--d,4s) ease-in-out infinite}
@keyframes jfloat{0%,100%{transform:translate(-50%,-50%) translateY(0) rotate(-6deg)}50%{transform:translate(-50%,-50%) translateY(-16px) rotate(6deg)}}
.j-paper{width:34px;height:44px;border-radius:4px;background:#fff;box-shadow:0 6px 16px rgba(0,0,0,.3);
  background-image:repeating-linear-gradient(to bottom,transparent 0 9px,#e0d3ef 9px 11px);background-size:70% 100%;background-position:center 8px;background-repeat:no-repeat}
.j-coin{width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe9a0,#f0b429 55%,#b77900);color:#7a4a00;display:grid;place-items:center;font:700 18px/1 var(--sans);box-shadow:0 0 18px rgba(255,200,61,.55)}
.j-conf{position:absolute;left:0;top:0;width:9px;height:14px;margin:-7px 0 0 -4px;border-radius:2px;pointer-events:none}

/* HUD */
.j-hud{position:absolute;inset:0;pointer-events:none;z-index:5}
.j-ui{pointer-events:auto}
.j-top{position:absolute;left:16px;right:16px;top:16px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.j-pills{display:flex;gap:6px;background:rgba(26,8,44,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:7px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.12)}
.j-pill{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:600 12px/1 var(--sans);color:rgba(255,255,255,.55);border:2px solid rgba(255,255,255,.22);position:relative;transition:all .4s}
.j-pill.cur{border-color:var(--c);color:#fff;box-shadow:0 0 12px var(--c)}
.j-pill.done{background:var(--c);border-color:var(--c);color:#fff}
.j-pill.star::after{content:"★";position:absolute;top:-9px;right:-7px;font-size:14px;color:#FFC83D;text-shadow:0 0 6px rgba(0,0,0,.5)}
.j-tools{display:flex;gap:6px;flex-wrap:wrap}
.j-tbtn{background:rgba(26,8,44,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:7px 12px;font:500 14px/1.3 var(--sans);cursor:pointer;min-width:38px}
.j-tbtn:hover{background:rgba(255,255,255,.16)}
.j-hint{position:absolute;right:16px;bottom:14px;margin:0;color:rgba(255,255,255,.6);font-size:13px}

.j-panel{position:absolute;left:20px;bottom:20px;width:min(440px,calc(100% - 40px));max-height:calc(100% - 96px);overflow:auto;background:rgba(255,255,255,.97);
  border-radius:14px;border-top:6px solid var(--c,#3A1760);padding:18px 22px 20px;box-shadow:0 30px 60px -20px rgba(0,0,0,.65);color:#231A2E;
  transition:transform .45s ease,opacity .35s ease,visibility .45s}
.j-panel[hidden]{display:block;visibility:hidden;opacity:0;transform:translateY(26px);pointer-events:none}
.j-chip{display:inline-block;font-size:.8rem;font-weight:600;padding:3px 11px;border-radius:999px;background:var(--c,#3A1760);color:#fff}
.j-panel h3{font-size:1.35rem;margin:8px 0 6px;color:#3A1760;line-height:1.35}
.j-panel h3 span{color:var(--c);margin-right:6px}
.j-panel p,.j-panel li{font-size:.96rem;color:#4a4155;line-height:1.7}
.j-panel p{margin:0 0 .6em}
.j-panel ul,.j-panel ol{margin:0 0 .6em;padding-left:1.25em}
.j-q{margin-top:12px;padding-top:14px;border-top:1px dashed #dccdee}
.j-q strong{display:block;margin-bottom:10px;color:#3A1760;font-size:.98rem;line-height:1.5}
.j-ch{display:flex;gap:10px;align-items:center;width:100%;text-align:left;padding:10px 14px;margin-bottom:8px;border:1.5px solid #e0d3ef;border-radius:9px;background:#fff;font:500 .95rem/1.45 var(--sans);cursor:pointer;color:#231A2E}
.j-ch kbd{flex:none;width:24px;height:24px;border-radius:6px;background:#f1e9fa;display:grid;place-items:center;font:600 12px var(--sans);color:#6C6378}
.j-ch:hover:not(:disabled){border-color:var(--c);background:#f8f3fd}
.j-ch.right{border-color:#1e8a4c;background:#e7f6ed}
.j-ch.wrong{border-color:#d0433a;background:#fdecea;animation:jshake .4s}
.j-ch:disabled{cursor:default}
.j-ch:disabled:not(.right):not(.wrong){opacity:.55}
@keyframes jshake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.j-fb{font-size:.93rem;margin:4px 0 12px;line-height:1.6}
.j-fb.good{color:#1b7442}.j-fb.bad{color:#b3372f}
.j-go{display:inline-flex;align-items:center;justify-content:center;background:var(--c,#3A1760);color:#fff;border:0;border-radius:9px;padding:12px 20px;font:600 1rem/1.3 var(--sans);cursor:pointer;text-decoration:none}
.j-go:hover{filter:brightness(1.08)}
.j-go.gold{background:#FFC83D;color:#3a2600}
.j-go.ghost{background:transparent;border:1.5px solid rgba(255,255,255,.55);color:#fff}
.j-go.soft{background:#f1e9fa;color:#3A1760}
.j-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

.j-over{position:absolute;inset:0;z-index:8;display:grid;place-items:center;padding:24px;text-align:center;color:#E6EFEA;
  background:radial-gradient(ellipse at center,rgba(26,8,44,.3),rgba(26,8,44,.88))}
.j-over[hidden]{display:none}
.j-over-in{max-width:620px}
.j-bars{display:flex;justify-content:center;gap:6px;margin-bottom:22px}
.j-bars i{width:38px;height:6px;border-radius:3px}
.j-over h2{color:#fff;font-size:clamp(1.9rem,4.6vw,3.1rem);margin-bottom:.35em;text-shadow:0 4px 30px rgba(0,0,0,.5)}
.j-over p{max-width:50ch;margin:0 auto 1.5em;color:#d3e3da;font-size:1.05rem}
.j-over .j-row{justify-content:center}
.j-big{font:700 clamp(3.4rem,10vw,6rem)/1 var(--serif);color:#FFC83D;text-shadow:0 0 40px rgba(255,200,61,.5);margin-bottom:6px}
.j-stars{font-size:1.9rem;letter-spacing:.2em;color:#FFC83D;margin-bottom:10px}
.j-stars .off{color:rgba(255,255,255,.2)}

@media (max-width:760px){
  .j-stage{height:88vh;min-height:560px}
  .j-stage.panel-open .j-world{left:50%;top:40%}
  .j-panel{left:10px;right:10px;width:auto;bottom:10px;max-height:54%;padding:14px 16px 16px}
  .j-hint{display:none}
  .j-pill{width:28px;height:28px}
  .j-top{left:10px;right:10px;top:10px}
}
@media (prefers-reduced-motion:reduce){
  .j-dash,.j-float,.j-station.on .j-ring{animation:none}
}

/* page sections under the game */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.flow-item{background:#fff;border:1px solid var(--rule);border-top:6px solid var(--fc);border-radius:10px;padding:20px 22px}
.flow-item .n{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.flow-item .n b{font:700 2.1rem/1 var(--serif);color:var(--fc)}
.flow-item .n span{font-size:.85rem;color:var(--muted)}
.flow-item p,.flow-item li{color:var(--muted);font-size:.96rem}
.flow-item p{margin:0}
.flow-item ol,.flow-item ul{margin:0;padding-left:1.2em}
@media (max-width:900px){.flow{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.flow{grid-template-columns:1fr}}
.svc-cols{display:grid;grid-template-columns:1.35fr 1fr;gap:40px;align-items:start;margin-top:28px}
.svc-block{background:#fff;border:1px solid var(--rule);border-radius:12px;padding:26px 28px}
.svc-block h3{font-size:1.25rem;margin-bottom:14px}
.ticks{list-style:none;margin:0;padding:0;counter-reset:t}
.ticks li{counter-increment:t;display:grid;grid-template-columns:34px 1fr;gap:10px;padding:10px 0;border-top:1px solid var(--rule)}
.ticks li:first-child{border-top:0}
.ticks li::before{content:counter(t);width:28px;height:28px;border-radius:50%;background:var(--tint);color:var(--green);display:grid;place-items:center;font:600 .85rem/1 var(--sans);margin-top:2px}
.free{display:inline-block;background:#FFF3CD;color:#7a5300;font-size:.8rem;font-weight:600;padding:1px 8px;border-radius:999px;margin-left:6px}
@media (max-width:900px){.svc-cols{grid-template-columns:1fr}}

.j-bill-in{transition:box-shadow .4s,opacity .5s}
.j-stage.focusing .j-station:not(.on) .j-bill-in,.j-stage.focusing .j-start .j-bill-in{opacity:.14}
.j-stage.focusing .j-station:not(.on) .j-pole{opacity:.3}
.j-over-in{background:rgba(26,8,44,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:34px 34px 30px}
body.j-inview .callbar{display:none}
@media (max-width:760px){body.j-inview{padding-bottom:0}.j-over-in{padding:26px 20px 22px}}