/* KoSaju v2 overlay (Claude track) — tabs, past-hit badge, match invite, share.
   Uses the page's own tokens (--surface, --line, --jade, --gold, --han ...), so light/dark follow automatically. */
body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
.ktab-off{display:none!important}

#ktabs{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:repeat(4,1fr);
  max-width:560px;margin:0 auto;background:var(--surface);border-top:1px solid var(--line);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px))}
@media (min-width:600px){#ktabs{border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0}}
#ktabs button{font:inherit;font-size:12px;font-weight:700;color:var(--muted);background:none;border:0;border-radius:8px;
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;cursor:pointer}
#ktabs .g{font-family:var(--han);font-size:21px;line-height:1}
#ktabs button[aria-selected="true"]{color:var(--jade)}
#ktabs button[aria-selected="true"] .g{color:var(--gold)}

.kchips{display:flex;gap:6px;flex-wrap:wrap}
.kchips span{font-size:13px;border:1px solid var(--line);border-radius:999px;padding:2px 10px;color:var(--muted)}

.kcard{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px;display:flex;flex-direction:column;gap:10px}
.kcard h2{margin:0}
.kbadge{border-color:var(--gold)}
.kbadge .num{font-family:var(--display);font-size:42px;line-height:1.05;color:var(--gold);font-variant-numeric:tabular-nums}
.kbadge .num small{font-size:18px;color:var(--muted);margin-left:8px}
.krow{display:flex;gap:10px;flex-wrap:wrap}
.krow>*{flex:1 1 140px;font-size:15px;white-space:nowrap}
.kinvited{border-color:var(--jade)}
.kinvited b{color:var(--jade)}
.kempty{text-align:left}
.klink{font:inherit;font-size:13px;width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}

#ktoast{position:fixed;left:50%;bottom:calc(86px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
  background:var(--ink);color:var(--bg);padding:8px 16px;border-radius:999px;font-size:14px;z-index:60;max-width:90vw}

/* language select (replaces the 6 pills; 19 languages) */
.klang{font:inherit;font-size:14px;font-weight:700;color:var(--ink);background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:6px 30px 6px 12px;max-width:62vw;cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 15px) 55%,calc(100% - 10px) 55%;background-size:5px 5px;background-repeat:no-repeat}
[dir=rtl] .klang{padding:6px 12px 6px 30px;background-position:15px 55%,20px 55%}
/* RTL (Arabic, Urdu): text flows right-to-left, but the pillar board keeps its fixed hour·day·month·year order */
[dir=rtl] #board,[dir=rtl] .han,[dir=rtl] #ktabs .g,[dir=rtl] .kt-no{direction:ltr}
[dir=rtl] .kcard,[dir=rtl] .kempty{text-align:right}

/* K-Tarot */
.ktarot{align-items:stretch}
.kt-card{align-self:center;width:min(200px,62vw);aspect-ratio:2/3;border:0;padding:0;background:none;cursor:pointer;perspective:900px;font:inherit;color:inherit}
.kt-open .kt-card{cursor:default}
.kt-in{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d}
.kt-anim .kt-in{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){.kt-anim .kt-in{transition:none}}
.kt-open .kt-in{transform:rotateY(180deg)}
.kt-back,.kt-front{position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;padding:14px;border:1px solid var(--gold)}
.kt-back{background:repeating-linear-gradient(45deg,transparent 0 9px,color-mix(in srgb,var(--gold) 18%,transparent) 9px 10px),var(--surface);color:var(--gold)}
.kt-back:after{content:"";position:absolute;inset:8px;border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);border-radius:9px}
.kt-mark{font-size:44px;line-height:1}
.kt-brand{font-family:var(--display);font-size:13px;letter-spacing:.18em}
.kt-front{transform:rotateY(180deg);background:var(--surface);justify-content:space-between;padding:22px 14px}
.kt-front:after{content:"";position:absolute;inset:8px;border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);border-radius:9px;pointer-events:none}
.kt-no{font-family:var(--display);font-size:16px;color:var(--gold)}
.kt-g{font-size:clamp(64px,22vw,92px)!important;line-height:1}
.kt-name{font-family:var(--display);font-size:17px;text-align:center;line-height:1.25}
.kt-msg{font-size:18px;margin:0;text-align:center}
.kt-link{margin:0;padding:10px 12px;border-left:3px solid var(--jade);background:color-mix(in srgb,var(--jade) 8%,transparent);border-radius:4px}
[dir=rtl] .kt-link{border-left:0;border-right:3px solid var(--jade)}
.kt-once{font-size:13px;margin:0;text-align:center}

/* TEST checkout (STAGE only) */
.kpay{border:0;padding:0;width:min(440px,100vw);max-width:100vw;max-height:92vh;margin:auto auto 0;border-radius:16px 16px 0 0;background:var(--surface);color:var(--ink);overflow:auto}
@media (min-width:600px){.kpay{margin:auto;border-radius:16px}}
.kpay::backdrop{background:rgba(0,0,0,.5)}
.kp-rib{position:sticky;top:0;z-index:1;background:#B45309;color:#fff;font-size:13px;font-weight:700;text-align:center;padding:6px 12px}
.kp-body{display:flex;flex-direction:column;gap:12px;padding:18px 18px calc(18px + env(safe-area-inset-bottom,0px))}
.kp-plans,.kp-meth{display:flex;flex-direction:column;gap:8px}
.kp-plan,.kp-m{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:12px;cursor:pointer}
.kp-plan:has(input:checked),.kp-m:has(input:checked){border-color:var(--jade);box-shadow:0 0 0 1px var(--jade)}
.kp-plan input,.kp-m input,.kp-fail input{accent-color:var(--jade);width:18px;height:18px;flex:none}
.kp-pt{display:flex;flex-direction:column;flex:1;min-width:0}
.kp-pt small,.kp-pr small{color:var(--muted);font-size:13px}
.kp-best{align-self:flex-start;font-size:11px;font-weight:700;color:var(--surface);background:var(--gold);border-radius:4px;padding:0 6px;margin:2px 0}
.kp-pr{text-align:end;white-space:nowrap}.kp-pr b{font-size:18px}
.kp-h{margin:4px 0 0;font-size:13px;font-weight:700;color:var(--muted)}
.kp-get{margin:0;padding-inline-start:20px;display:flex;flex-direction:column;gap:4px;font-size:15px}
.kp-fail{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.kp-legal{font-size:12px;color:var(--muted);margin:0}
.kp-x{font:inherit;font-size:15px;background:none;border:0;color:var(--muted);padding:8px;cursor:pointer}
.kp-wait{display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px 0}
.kp-spin{width:36px;height:36px;border:3px solid var(--line);border-top-color:var(--jade);border-radius:50%;animation:kpspin .8s linear infinite}
@keyframes kpspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.kp-spin{animation-duration:2.4s}}
.kp-res{display:flex;flex-direction:column;align-items:stretch;gap:10px;text-align:center}
.kp-ic{align-self:center;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:700;color:#fff;background:var(--jade)}
.kp-no .kp-ic{background:var(--fire)}
.kp-rcpt{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;text-align:start;margin:4px 0;padding:12px;border:1px dashed var(--line);border-radius:8px;font-size:14px}
.kp-rcpt dt{color:var(--muted)}.kp-rcpt dd{margin:0;font-weight:700;overflow-wrap:anywhere}
.kp-badge{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;border:1px solid var(--gold);border-radius:8px;padding:8px 12px;color:var(--gold);font-size:14px}
.kp-price{cursor:pointer;align-self:flex-start;border-bottom:2px dashed var(--gold)}
.kp-price:after{content:"  💳";font-size:.8em}
.kpay[open]:not(:modal){position:fixed;inset:auto 0 0 0;z-index:100;box-shadow:0 -8px 40px rgba(0,0,0,.4)}
/* per-country TEST checkout (kosaju-pay.js) */
.kp-memo{border:1px dashed #B45309;border-radius:8px;padding:8px 10px;font-size:13px;background:color-mix(in srgb,#B45309 7%,transparent)}
.kp-memo summary{cursor:pointer;font-weight:700;color:#B45309}
.kp-memo ul{margin:6px 0 0;padding-inline-start:18px;display:flex;flex-direction:column;gap:4px}
.kp-getd summary{cursor:pointer;font-size:14px;font-weight:700;color:var(--muted)}
.kp-xpay{font:inherit;font-weight:700;font-size:17px;padding:14px;border:0;border-radius:10px;background:var(--ink);color:var(--bg);cursor:pointer}
.kp-saved{font:inherit;font-weight:700;font-size:15px;padding:12px;border:1px solid var(--jade);border-radius:10px;background:transparent;color:var(--jade);cursor:pointer}
.kp-m{flex-wrap:wrap}.kp-mn{flex:1;min-width:0}
.kp-tag{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 8px;white-space:nowrap}
.kp-tag.auto{color:var(--jade);border-color:var(--jade)}
.kp-card{position:relative;display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--bg)}
.kp-card.filled{border-color:var(--jade)}
.kp-f{display:flex;flex-direction:column;gap:2px;border-bottom:1px solid var(--line);padding:4px 0;min-height:44px}
.kp-f span{font-size:12px;color:var(--muted)}.kp-f .v{font-variant-numeric:tabular-nums;letter-spacing:.06em;min-height:1.4em;direction:ltr;text-align:start}
.kp-frow{display:flex;gap:8px}.kp-frow>*{flex:1}
.kp-scan,.kp-type{font:inherit;font-size:14px;font-weight:700;padding:10px;border:1px solid var(--gold);border-radius:8px;background:transparent;color:var(--gold);cursor:pointer}
.kp-scanning{position:absolute;inset:0;border-radius:10px;background:rgba(0,0,0,.82);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.kp-frame{width:70%;aspect-ratio:1.586;border:3px solid #7DC1A9;border-radius:10px;animation:kpscan 1.1s ease-in-out infinite alternate}
@keyframes kpscan{from{opacity:.4}to{opacity:1}}
.kp-note{font-size:12.5px;color:var(--muted);margin:0}
.kp-eu{display:flex;gap:8px;align-items:flex-start;font-size:14px;border:1px solid var(--line);border-radius:8px;padding:10px}
.kp-eu input{accent-color:var(--jade);width:18px;height:18px;flex:none;margin-top:2px}
.kp-err{color:var(--fire);font-weight:700;margin:0;font-size:14px}
.kp-bio{font-size:48px;line-height:1}
.kp-sim{display:flex;flex-direction:column;gap:8px;text-align:start;border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.kp-range{width:100%;accent-color:var(--jade)}
.kp-bar{position:relative;height:10px;border-radius:5px;background:var(--line);overflow:visible;direction:ltr}
.kp-bar .u{position:absolute;inset:0 auto 0 0;border-radius:5px;background:var(--gold)}
.kp-bar.back .u{background:var(--jade)}
.kp-bar .d{position:absolute;top:-4px;width:3px;height:18px;background:var(--ink);transform:translateX(-1px)}
.kp-out{display:flex;flex-direction:column;gap:4px}.kp-out p{margin:0}
.kp-refbox{font:inherit;font-weight:700;font-size:15px;padding:12px;border:1px dashed var(--gold);border-radius:10px;background:color-mix(in srgb,var(--gold) 9%,transparent);color:var(--gold);cursor:pointer;width:100%}
.kp-inv{margin:0;padding:8px 12px;border-radius:8px;background:color-mix(in srgb,var(--jade) 10%,transparent);color:var(--jade);font-weight:700;font-size:14px}
.kp-first{display:block;font-size:12px;font-weight:700;color:var(--jade)}
.kp-msg{text-align:center;text-decoration:none;display:block}
.kp-bl{display:flex;gap:12px}
/* Today's Korean */
.kko{border-color:var(--jade)}
.kko-h{font-family:var(--han);font-size:clamp(30px,9vw,40px);font-weight:600;color:var(--jade);line-height:1.2}
.kko-r{font-size:15px;color:var(--muted);font-style:italic;direction:ltr;text-align:start}
.kko-m{margin:0;font-size:17px}
[dir=rtl] .kko-h,[dir=rtl] .kko-r{text-align:right}
.kp-rknow{margin:0;font-weight:700;color:var(--gold)}
.kp-ladder{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.kp-ladder li{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.kp-ladder li.done{opacity:.6}
.kp-ladder li.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);background:color-mix(in srgb,var(--gold) 8%,transparent)}
.kp-rn b{font-family:var(--han);font-size:18px;margin-inline-end:6px}.kp-rn small{color:var(--muted)}
.kp-rp{font-size:13.5px}
.kp-korea{border-radius:10px;padding:12px;background:color-mix(in srgb,var(--jade) 10%,transparent);border:1px solid var(--jade)}
.kp-korea p{margin:4px 0 0;font-size:14px}
