/* ============ LOTTOTIC PITCH DECK v1.6.2 THEME TOKENS ============ */
/* AIS CI Bright Lime Green · Minimal / Cyber-glow / Modern Retro    */
:root, [data-theme="dark"]{
  --bg:#080D04; --bg-grad-a:rgba(18,26,10,.6); --bg-grad-b:rgba(8,13,4,.92);
  --panel:#0F160A; --panel2:#17220E; --line:#26351A;
  --lime:#C6FF00; --lime-hi:#DBFF4D; --lime-dk:#9BCB00; --lime-3d:#5d7a00; --lime-ink:#0B1400;
  --purple:#B36CFF; --purple-hi:#D9AFFF; --purple-dk:#7E3FD6; --purple-3d:#4d1f8f; --purple-ink:#1B0033;
  --magenta:#FF5CF0; --gold:#FFD34D; --gold-dk:#B98900; --gold-ink:#5c4300;
  --ink:#EFF6E6; --mut:#93A47E; --card-tx:#CFDCC0;
  --glow-lime:rgba(198,255,0,.45); --glow-lime-soft:rgba(198,255,0,.25);
  --glow-purple:rgba(179,108,255,.45); --glow-gold:rgba(255,211,77,.3);
  --shadow-card:none; --stars-op:.55; --scan-op:.05;
  --sheet-blur:rgba(3,8,1,.75); --phone-bg:#050902;
  --btn-shadow:0 0 22px var(--glow-lime), 0 6px 0 var(--lime-3d);
}
[data-theme="light"]{
  /* Warm Sunrise gradient — จากภาพอ้างอิง: ครีมอุ่น + พีชชมพู + เหลืองทอง */
  --bg:#FFF3E6; --bg-grad-a:rgba(255,251,243,.30); --bg-grad-b:rgba(255,240,225,.30);
  --panel:#FFFFFF; --panel2:#FFF4E4; --line:#F3DFC7;
  --lime:#B5E000; --lime-hi:#CDF23A; --lime-dk:#8FB800; --lime-3d:#7CA000; --lime-ink:#1A2600;
  --purple:#8E4DE0; --purple-hi:#B489F0; --purple-dk:#7136C0; --purple-3d:#5A2A9A; --purple-ink:#FFFFFF;
  --magenta:#E14FA0; --gold:#E8A200; --gold-dk:#C08600; --gold-ink:#5c4300;
  --ink:#43301C; --mut:#A98A62; --card-tx:#6E5638;
  --glow-lime:rgba(148,190,0,.32); --glow-lime-soft:rgba(148,190,0,.16);
  --glow-purple:rgba(142,77,224,.28); --glow-gold:rgba(232,162,0,.28);
  --shadow-card:0 3px 14px rgba(150,95,30,.10); --stars-op:0; --scan-op:0;
  --sheet-blur:rgba(80,50,20,.40); --phone-bg:#FFFBF4;
  --btn-shadow:0 4px 14px var(--glow-lime), 0 5px 0 var(--lime-3d);
}
[data-theme="light"] body{
  background:
    radial-gradient(58% 65% at 90% 6%, #FFDCCF 0%, rgba(255,220,207,0) 62%),
    radial-gradient(62% 70% at 4% 88%, #FBE9C4 0%, rgba(251,233,196,0) 60%),
    linear-gradient(135deg, #FFFBF3 0%, #FFF4E7 52%, #FFEBDC 100%);
  background-attachment:fixed;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Google Sans','Noto Sans Thai',sans-serif; background:var(--bg); color:var(--ink);
  overflow-x:hidden; -webkit-font-smoothing:antialiased; transition:background .35s,color .35s;
}
/* ── Layer 1: dense tiny stars (0.8px ~ 2px, random sizes) ── */
.stars{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:var(--stars-op);transition:opacity .4s;
  background-image:
    radial-gradient(.8px .8px at 3% 6%, rgba(255,255,255,.85) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 9% 18%, #C6FF00 50%, transparent 51%),
    radial-gradient(.6px .6px at 16% 4%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 23% 14%, rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(.9px .9px at 30% 8%, rgba(255,255,255,.65) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 38% 22%, #B36CFF 50%, transparent 51%),
    radial-gradient(.7px .7px at 46% 5%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(2px 2px at 54% 16%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 62% 28%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 70% 10%, #FFD34D 50%, transparent 51%),
    radial-gradient(.8px .8px at 78% 20%, rgba(255,255,255,.75) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 86% 6%, rgba(255,255,255,.85) 50%, transparent 51%),
    radial-gradient(.6px .6px at 93% 24%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 97% 12%, #FF5CF0 50%, transparent 51%),
    radial-gradient(.9px .9px at 6% 38%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1.7px 1.7px at 14% 48%, #C6FF00 50%, transparent 51%),
    radial-gradient(.7px .7px at 26% 34%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 35% 56%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(2px 2px at 44% 42%, #fff 50%, transparent 51%),
    radial-gradient(.8px .8px at 52% 66%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 60% 38%, #FFD34D 50%, transparent 51%),
    radial-gradient(.6px .6px at 68% 52%, rgba(255,255,255,.65) 50%, transparent 51%),
    radial-gradient(1.9px 1.9px at 76% 44%, #B36CFF 50%, transparent 51%),
    radial-gradient(1px 1px at 84% 60%, rgba(255,255,255,.75) 50%, transparent 51%),
    radial-gradient(.7px .7px at 92% 38%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 10% 72%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(.9px .9px at 20% 84%, #FF5CF0 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 32% 68%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(.7px .7px at 42% 80%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 54% 74%, #fff 50%, transparent 51%),
    radial-gradient(.8px .8px at 64% 88%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 74% 78%, #C6FF00 50%, transparent 51%),
    radial-gradient(.6px .6px at 82% 94%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 90% 84%, #B36CFF 50%, transparent 51%),
    radial-gradient(.9px .9px at 96% 72%, rgba(255,255,255,.65) 50%, transparent 51%);
  background-size:800px 800px;
  animation:driftSlow 200s linear infinite, pulseField 4.5s ease-in-out infinite alternate}
/* ── Layer 2: brighter mid-sized stars w/ glow effect ── */
.stars::before{content:"";position:absolute;inset:-15%;pointer-events:none;
  background-image:
    radial-gradient(2.5px 2.5px at 8% 18%, #fff 50%, transparent 51%),
    radial-gradient(3.2px 3.2px at 25% 8%, #C6FF00 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 42% 26%, rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(3.5px 3.5px at 58% 12%, #FFD34D 50%, transparent 51%),
    radial-gradient(2.2px 2.2px at 72% 22%, rgba(255,255,255,.85) 50%, transparent 51%),
    radial-gradient(3px 3px at 88% 32%, #B36CFF 50%, transparent 51%),
    radial-gradient(2.8px 2.8px at 15% 46%, #FF5CF0 50%, transparent 51%),
    radial-gradient(2px 2px at 33% 62%, rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(3.8px 3.8px at 50% 38%, #fff 50%, transparent 51%),
    radial-gradient(2.4px 2.4px at 66% 56%, #C6FF00 50%, transparent 51%),
    radial-gradient(3px 3px at 80% 68%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(2.6px 2.6px at 5% 78%, #FFD34D 50%, transparent 51%),
    radial-gradient(3.5px 3.5px at 22% 90%, #B36CFF 50%, transparent 51%),
    radial-gradient(2px 2px at 44% 76%, rgba(255,255,255,.85) 50%, transparent 51%),
    radial-gradient(2.8px 2.8px at 62% 86%, #fff 50%, transparent 51%),
    radial-gradient(3.2px 3.2px at 78% 80%, #FF5CF0 50%, transparent 51%),
    radial-gradient(2.5px 2.5px at 90% 62%, rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(3.6px 3.6px at 38% 14%, #C6FF00 50%, transparent 51%);
  background-size:700px 700px;
  animation:driftMed 140s linear infinite, shimmer 3.2s ease-in-out infinite alternate}
@keyframes driftSlow{from{background-position:0 0}to{background-position:-400px -800px}}
@keyframes driftMed{from{background-position:0 0}to{background-position:350px -500px}}
@keyframes pulseField{0%,100%{opacity:calc(var(--stars-op)*.75)}50%{opacity:var(--stars-op)}}
@keyframes shimmer{0%,100%{opacity:.55}50%{opacity:1}}
/* ── Moon ── cat symbol, purple-tinted glow ── */
.moon{position:fixed;top:6%;right:8%;width:72px;height:72px;border-radius:50%;pointer-events:none;z-index:0;
  opacity:var(--stars-op);transition:opacity .5s;
  background:radial-gradient(circle at 30% 28%,#FFFEF9,#F2ECCF 48%,#DDCEA8 80%,#C8B8A0);
  box-shadow:0 0 30px 8px rgba(220,200,160,.32),0 0 60px 16px rgba(180,150,210,.18),
    0 0 100px 30px rgba(150,120,195,.08),0 0 160px 50px rgba(130,100,180,.04);
  animation:moonGlow 4.5s ease-in-out infinite alternate}
@keyframes moonGlow{0%{box-shadow:0 0 28px 7px rgba(220,200,160,.3),0 0 55px 14px rgba(180,150,210,.15),
  0 0 90px 25px rgba(150,120,195,.06)}100%{box-shadow:0 0 38px 10px rgba(220,200,160,.38),
  0 0 70px 20px rgba(180,150,210,.24),0 0 120px 40px rgba(150,120,195,.12),
  0 0 180px 60px rgba(130,100,180,.06)}}
/* ── Shooting stars ── JS-driven, random direction per spawn ── */
.shooting-star{position:fixed;left:var(--sx);top:var(--sy);height:1.5px;pointer-events:none;z-index:0;
  border-radius:2px;transform:rotate(var(--angle));transform-origin:0 50%;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.04) 12%,var(--sc) 52%,#fff 82%);
  box-shadow:0 0 4px rgba(255,255,255,.5),0 0 10px var(--sc);
  animation:shoot var(--dur) ease-out var(--delay) both}
.shooting-star::after{content:"";position:absolute;right:-3px;top:50%;
  transform:translateY(-50%);width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle,#fff 25%,transparent 72%)}
@keyframes shoot{
  0%{width:0;opacity:0}
  14%{width:var(--tail);opacity:1}
  50%{opacity:.45}
  100%{width:calc(var(--tail) - 25px);opacity:0;transform:rotate(var(--angle)) translateX(var(--dist))}
}
.scan{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:var(--scan-op);transition:opacity .4s;
  background:repeating-linear-gradient(0deg,transparent 0 2px,#000 2px 4px);}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── Sun (light mode) ── */
.sun{position:fixed;top:5%;right:7%;width:88px;height:88px;border-radius:50%;pointer-events:none;z-index:0;
  opacity:0;transition:opacity .5s;
  background:radial-gradient(circle at 38% 35%,#FFFEF5,#FFEAB8 34%,#FFD58A 60%,#EDB050);
  box-shadow:0 0 45px 12px rgba(255,200,80,.34),0 0 85px 22px rgba(255,180,60,.2),
    0 0 140px 35px rgba(255,160,40,.09),0 0 210px 55px rgba(255,140,30,.04);
  animation:sunGlow 4s ease-in-out infinite alternate}
[data-theme="light"] .sun{opacity:1}
@keyframes sunGlow{0%{box-shadow:0 0 38px 9px rgba(255,200,80,.3),0 0 72px 18px rgba(255,180,60,.16),
  0 0 115px 28px rgba(255,160,40,.07)}100%{box-shadow:0 0 50px 14px rgba(255,200,80,.4),
  0 0 98px 26px rgba(255,180,60,.26),0 0 158px 42px rgba(255,160,40,.13),
  0 0 230px 65px rgba(255,140,30,.06)}}
/* ── Clouds (light mode, JS-driven, random direction & size) ── */
.cloud{position:fixed;z-index:0;pointer-events:none;opacity:0;transition:opacity .4s;
  border-radius:40%/50%;
  animation:cloudDrift var(--dur) linear var(--delay) forwards}
.cloud::before,.cloud::after{content:"";position:absolute;border-radius:50%;background:inherit}
.cloud::before{width:55%;height:115%;top:-65%;left:16%}
.cloud::after{width:40%;height:85%;top:-42%;right:14%}
[data-theme="light"] .cloud{opacity:1}
@keyframes cloudDrift{0%{left:var(--sx);top:var(--sy)}
  30%{top:calc(var(--sy) - 5px)}70%{top:calc(var(--sy) + 5px)}
  100%{left:var(--ex);top:var(--ey)}}
/* ── UFO (light mode, shooting-star trail + 🛸 head) ── */
.ufo{position:fixed;left:var(--sx);top:var(--sy);height:1.5px;pointer-events:none;z-index:0;opacity:0;
  border-radius:2px;transform:rotate(var(--angle));transform-origin:0 50%;
  background:linear-gradient(90deg,transparent 0%,rgba(180,255,200,.15) 25%,rgba(255,255,255,.55) 75%);
  box-shadow:0 0 4px rgba(200,255,220,.4),0 0 12px rgba(180,255,200,.25);
  animation:ufoShoot var(--dur) ease-out var(--delay) both}
.ufo::before{content:"🛸";position:absolute;right:-16px;top:50%;transform:translateY(-50%);
  font-size:24px;filter:drop-shadow(0 0 6px rgba(180,255,200,.7))}
.ufo::after{content:"";position:absolute;right:5px;top:50%;transform:translateY(-50%) rotate(45deg);
  width:6px;height:6px;background:radial-gradient(circle,#fff 20%,transparent 70%)}
[data-theme="light"] .ufo{opacity:.7}
@keyframes ufoShoot{0%{width:0;opacity:0}
  14%{width:var(--tail);opacity:1}
  50%{opacity:.45}
  100%{width:calc(var(--tail) - 30px);opacity:0;transform:rotate(var(--angle)) translateX(var(--dist))}
}

.app{position:relative;z-index:1;max-width:460px;margin:0 auto;min-height:100vh;
  display:flex;flex-direction:column;border-left:1px solid var(--line);border-right:1px solid var(--line);
  background:linear-gradient(180deg,var(--bg-grad-a),var(--bg-grad-b));transition:background .35s}

/* ===== journey stepper ===== */
.journey{position:sticky;top:0;z-index:20;background:var(--bg-grad-b);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);padding:10px 14px 8px;}
.journey .tag{font-family:'Google Sans','Noto Sans Thai',sans-serif;font-weight:700;font-size:10px;color:var(--lime-dk);letter-spacing:1px;
  margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}
.journey .tag span:nth-child(2){color:var(--mut)}
.mode-btn{border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;
  font-size:13px;border-radius:999px;width:30px;height:30px;display:grid;place-items:center;
  box-shadow:var(--shadow-card);transition:.25s;flex:none;margin-left:8px}
.mode-btn:hover{border-color:var(--lime)}
.steps{display:flex;gap:4px}
.step{flex:1;text-align:center;font-size:9.5px;color:var(--mut);position:relative;padding-top:8px}
.step::before{content:"";display:block;height:4px;border-radius:2px;background:var(--line);margin-bottom:5px;transition:.4s}
.step.done::before{background:var(--lime);box-shadow:0 0 8px var(--glow-lime)}
.step.now::before{background:linear-gradient(90deg,var(--lime),var(--magenta));box-shadow:0 0 10px var(--glow-lime)}
.step.now{color:var(--ink);font-weight:600}
.step.done{color:var(--lime-dk)}
[data-theme="light"] .journey{background:rgba(255,248,238,.85)}

/* ===== HUD ===== */
.hud{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px dashed var(--line)}
.mu{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--gold);
  border-radius:999px;padding:5px 14px 5px 8px;box-shadow:0 0 12px var(--glow-gold)}
.mu .coin{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF3B0,#FFD34D 60%,var(--gold-dk));
  display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--gold-ink);box-shadow:inset 0 -2px 0 var(--gold-dk)}
.mu b{font-size:15px;color:var(--gold)}
.mu small{font-size:10px;color:var(--mut)}
.badge{font-size:10px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);color:var(--mut);font-weight:600;letter-spacing:.5px;background:var(--panel)}
.badge.plat{border-color:var(--lime-dk);color:var(--lime-dk);box-shadow:0 0 10px var(--glow-lime-soft);background:var(--panel2)}

/* ===== screens ===== */
.screen{display:none;flex:1;padding:20px 18px 40px;animation:fade .35s ease}
.screen.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.logo{font-family:'Google Sans','Noto Sans Thai',sans-serif;font-weight:800;font-size:40px;text-align:center;margin-top:26px;
  color:var(--lime);text-shadow:0 0 18px var(--glow-lime);letter-spacing:2px}
.logo em{font-style:normal;color:var(--magenta);text-shadow:0 0 18px var(--glow-purple)}
[data-theme="light"] .logo{text-shadow:1px 2px 0 rgba(124,160,0,.35)}
[data-theme="light"] .logo em{text-shadow:1px 2px 0 rgba(142,77,224,.3)}
.sub{text-align:center;color:var(--mut);font-size:11.5px;letter-spacing:2.5px;margin-top:10px;text-transform:uppercase}
.sub b{color:var(--lime-dk)}
.duo{display:flex;justify-content:center;align-items:flex-end;gap:0;margin:26px 0 6px;position:relative}
.duo img{width:150px;image-rendering:pixelated;filter:drop-shadow(0 10px 22px rgba(0,0,0,.45))}
[data-theme="light"] .duo img{filter:drop-shadow(0 8px 16px rgba(40,56,10,.25))}
.duo .dog{transform:translateX(10px)}
.duo .cat{transform:translateX(-10px)}
.duo .vs{position:absolute;top:6px;left:50%;transform:translateX(-50%);
  font-family:'Google Sans','Noto Sans Thai',sans-serif;font-weight:700;letter-spacing:3px;font-size:11px;color:var(--gold);text-shadow:0 0 10px var(--glow-gold)}
.duo-names{display:flex;justify-content:center;gap:34px;font-size:12px;margin-bottom:4px}
.duo-names .n1{color:var(--lime-dk);font-weight:700}
.duo-names .n2{color:var(--purple);font-weight:700}
.pitch{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:18px 0;
  font-size:12.5px;color:var(--card-tx);line-height:1.75;box-shadow:var(--shadow-card)}
.pitch b{color:var(--lime-dk)}
.pitch i{color:var(--magenta);font-style:normal;font-weight:600}

.btn{display:block;width:100%;border:none;cursor:pointer;font-family:'Google Sans','Noto Sans Thai',sans-serif;
  font-size:16px;font-weight:700;color:var(--lime-ink);
  background:linear-gradient(180deg,var(--lime-hi),var(--lime) 55%,var(--lime-dk));
  padding:15px;border-radius:12px;box-shadow:var(--btn-shadow);
  transition:transform .08s, box-shadow .2s;letter-spacing:.3px}
.btn:active{transform:translateY(4px);box-shadow:0 0 14px var(--glow-lime-soft),0 2px 0 var(--lime-3d)}
.btn.ghost{background:transparent;color:var(--mut);box-shadow:none;border:1px dashed var(--line);font-weight:500;font-size:13px}
.btn.purple{background:linear-gradient(180deg,var(--purple-hi),var(--purple) 55%,var(--purple-dk));color:var(--purple-ink);
  box-shadow:0 0 22px var(--glow-purple),0 6px 0 var(--purple-3d)}
.btn.purple:active{box-shadow:0 0 14px var(--glow-purple),0 2px 0 var(--purple-3d)}
.btn:disabled{filter:grayscale(.8) brightness(.75);cursor:default;transform:none}
.note{font-size:10.5px;color:var(--mut);text-align:center;margin-top:10px;line-height:1.6}

h3.sec{font-size:13px;letter-spacing:1px;color:var(--ink);margin:22px 0 10px;display:flex;align-items:center;gap:8px}
h3.sec::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
h3.sec .px{font-family:'Google Sans','Noto Sans Thai',sans-serif;font-weight:800;font-size:10.5px;color:var(--lime-dk)}

.quest{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:11px 12px;margin-bottom:9px;transition:.25s;box-shadow:var(--shadow-card)}
.quest .ic{width:38px;height:38px;border-radius:10px;background:var(--panel2);display:grid;place-items:center;font-size:19px;flex:none}
.quest .tx{flex:1}
.quest .tx b{font-size:13px;display:block}
.quest .tx small{font-size:10.5px;color:var(--mut)}
.quest .pts{font-size:11px;color:var(--gold);font-weight:700;white-space:nowrap}
.quest button{border:none;cursor:pointer;font-family:'Google Sans','Noto Sans Thai',sans-serif;font-weight:700;font-size:12px;
  background:var(--lime);color:var(--lime-ink);border-radius:8px;padding:7px 13px;box-shadow:0 3px 0 var(--lime-3d)}
.quest button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--lime-3d)}
.quest.claimed{opacity:.55}
.quest.claimed button{background:var(--line);color:var(--mut);box-shadow:none;cursor:default}

.oracle{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ocard{border-radius:14px;padding:13px 12px;border:1px solid;position:relative;overflow:hidden;box-shadow:var(--shadow-card)}
.ocard img{width:64px;image-rendering:pixelated;float:right;margin:-4px -2px 4px 6px}
.ocard.o-dog{border-color:var(--lime-dk);background:linear-gradient(160deg,var(--panel2),var(--panel))}
.ocard.o-cat{border-color:var(--purple);background:linear-gradient(160deg,var(--panel2),var(--panel))}
.ocard h4{font-size:12.5px;margin-bottom:2px}
.ocard.o-dog h4{color:var(--lime-dk)} .ocard.o-cat h4{color:var(--purple)}
.ocard small{font-size:9.5px;color:var(--mut);display:block;margin-bottom:8px}
.ocard .val{font-family:'Google Sans','Noto Sans Thai',sans-serif;font-weight:800;font-size:21px;letter-spacing:3px;margin:6px 0}
.ocard.o-dog .val{color:var(--lime-dk);text-shadow:0 0 10px var(--glow-lime)}
.ocard.o-cat .val{color:var(--magenta);text-shadow:0 0 10px var(--glow-purple)}
.ocard p{font-size:11px;color:var(--card-tx);line-height:1.6}

.plat-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:14px;margin-bottom:10px;overflow:hidden;cursor:pointer;transition:.2s;box-shadow:var(--shadow-card)}
.plat-card:hover{border-color:var(--lime-dk)}
.plat-card h4{font-size:13.5px;display:flex;align-items:center;gap:8px;padding-right:96px}
.plat-card h4 .em{font-size:16px}
.plat-card p{font-size:11.5px;color:var(--mut);margin-top:5px;line-height:1.65}
.plat-card .blurbox{margin-top:10px;border-radius:8px;background:var(--panel2);padding:10px;
  font-family:'Google Sans','Noto Sans Thai',sans-serif;font-weight:800;font-size:15px;color:var(--lime-dk);letter-spacing:2px;
  filter:blur(5px);user-select:none}
.plat-card .lock{position:absolute;top:12px;right:12px;font-size:11px;color:var(--gold);
  border:1px solid var(--gold);border-radius:999px;padding:3px 10px;background:var(--panel2)}
.plat-card.unlocked{cursor:default}
.plat-card.unlocked .blurbox{filter:none}
.plat-card.unlocked .lock{color:var(--lime-dk);border-color:var(--lime-dk)}
.statbar{margin-top:8px}
.statbar .row{display:flex;align-items:center;gap:8px;font-size:10.5px;color:var(--mut);margin-bottom:5px}
.statbar .row b{width:34px;color:var(--ink);font-family:'Google Sans','Noto Sans Thai',sans-serif;font-weight:800;font-size:12px}
.statbar .bar{flex:1;height:7px;border-radius:4px;background:var(--panel2);overflow:hidden}
.statbar .bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--lime),var(--gold))}
.statbar .pc{width:34px;text-align:right;color:var(--gold);font-weight:600}

.modal{position:fixed;inset:0;z-index:60;display:none;align-items:flex-end;justify-content:center;
  background:var(--sheet-blur);backdrop-filter:blur(3px)}
.modal.on{display:flex}
.sheet{width:100%;max-width:460px;background:var(--panel);border:1px solid var(--line);border-bottom:none;
  border-radius:22px 22px 0 0;padding:20px 18px 26px;animation:up .3s ease;max-height:92vh;overflow-y:auto}
@keyframes up{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
.sheet .grab{width:44px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 14px}
.price{display:flex;align-items:baseline;justify-content:center;gap:6px;margin:8px 0 2px}
.price b{font-size:38px;color:var(--lime-dk);text-shadow:0 0 16px var(--glow-lime)}
.price span{color:var(--mut);font-size:13px}
.plist{margin:14px 0;font-size:12.5px;line-height:2;color:var(--card-tx)}
.plist li{list-style:none;padding-left:24px;position:relative}
.plist li::before{content:"◆";position:absolute;left:4px;color:var(--lime-dk);font-size:10px}

.phone{background:var(--phone-bg);border:2px solid var(--line);border-radius:18px;padding:16px 14px;margin-top:12px}
.phone .carrier{display:flex;justify-content:space-between;font-size:10px;color:var(--mut);margin-bottom:10px}
.phone .carrier b{color:var(--lime-dk)}
.ivrline{font-size:12.5px;line-height:1.8;color:var(--card-tx);min-height:66px}
.ivrline .sys{color:var(--gold)}
.cursor::after{content:"▊";color:var(--lime-dk);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.keypad button{font-family:'Google Sans','Noto Sans Thai',sans-serif;font-size:16px;font-weight:600;color:var(--ink);background:var(--panel2);
  border:1px solid var(--line);border-radius:10px;padding:10px 0;cursor:pointer}
.keypad button small{display:block;font-size:8px;color:var(--mut);font-weight:400;letter-spacing:1px}
.keypad button:active{background:var(--line)}
.keypad button.hot{border-color:var(--lime-dk);color:var(--lime-dk);box-shadow:0 0 10px var(--glow-lime-soft)}
.sms{background:var(--panel2);border-left:3px solid var(--lime-dk);border-radius:0 10px 10px 0;
  padding:10px 12px;font-size:11.5px;color:var(--card-tx);margin-top:12px;line-height:1.7;display:none}
.sms b{color:var(--lime-dk)}
.sms .from{font-size:9.5px;color:var(--mut);letter-spacing:1px;display:block;margin-bottom:3px}

.gachabox{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;text-align:center;box-shadow:var(--shadow-card)}
.gachabox .orb{width:96px;height:96px;margin:6px auto 10px;border-radius:50%;display:grid;place-items:center;font-size:44px;
  background:radial-gradient(circle at 35% 30%,var(--panel2),var(--panel) 70%);border:2px solid var(--purple);
  box-shadow:0 0 24px var(--glow-purple);transition:.2s}
.gachabox .orb.spin{animation:shake .5s ease infinite}
@keyframes shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg) scale(1.05)}75%{transform:rotate(8deg) scale(1.05)}}
.gachabox .result{font-size:12.5px;color:var(--card-tx);min-height:40px;line-height:1.6;margin-bottom:10px}
.gachabox .result b{color:var(--gold)}
.inv{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.inv span{font-size:22px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:6px 9px}

.toast{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);z-index:70;
  background:var(--panel2);border:1px solid var(--gold);color:var(--gold);font-size:13px;font-weight:600;
  padding:10px 18px;border-radius:999px;opacity:0;pointer-events:none;
  transition:.35s cubic-bezier(.34,1.56,.64,1);box-shadow:0 0 22px var(--glow-gold),0 0 60px 4px var(--glow-gold);
  overflow:visible}
.toast::before{content:"";position:absolute;inset:-1px;border-radius:999px;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.15) 44%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.15) 56%,transparent 62%);
  background-size:200% 100%;animation:sweep 2.2s ease-in-out infinite;pointer-events:none;z-index:-1}
@keyframes sweep{0%{background-position:200% 0}100%{background-position:-200% 0}}
.toast::after{content:"";position:absolute;inset:-28px;pointer-events:none;z-index:-1;
  background:
    radial-gradient(2px 2px at 12% 18%,var(--gold),transparent),
    radial-gradient(2.5px 2.5px at 88% 12%,var(--lime-hi),transparent),
    radial-gradient(1.5px 1.5px at 52% 3%,#fff,transparent),
    radial-gradient(2.5px 2.5px at 94% 68%,var(--magenta),transparent),
    radial-gradient(2px 2px at 4% 82%,var(--gold),transparent),
    radial-gradient(1.5px 1.5px at 78% 92%,#fff,transparent),
    radial-gradient(2px 2px at 22% 88%,var(--lime-hi),transparent),
    radial-gradient(2.5px 2.5px at 62% 8%,var(--magenta),transparent),
    radial-gradient(1.5px 1.5px at 38% 94%,var(--gold),transparent),
    radial-gradient(2px 2px at 92% 38%,#fff,transparent);
  opacity:0;transition:opacity .4s}
.toast.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.toast.on::after{opacity:1;animation:twinkle 1.4s ease-in-out infinite alternate}
@keyframes twinkle{0%{opacity:.35;transform:scale(.85)}100%{opacity:1;transform:scale(1.1)}}
.spark{position:fixed;border-radius:50%;pointer-events:none;z-index:72;
  animation:pop .9s ease-out forwards}
@keyframes pop{0%{transform:translate(-50%,-50%) scale(1);opacity:1}
  100%{transform:translate(-50%,-50%) translate(var(--sx),var(--sy)) scale(0);opacity:0}}

.kyc label{font-size:11.5px;color:var(--mut);display:block;margin:10px 0 4px}
.kyc input,.kyc select{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:9px;
  color:var(--ink);font-family:'Google Sans','Noto Sans Thai',sans-serif;font-size:13px;padding:9px 12px;outline:none;color-scheme:dark}
[data-theme="light"] .kyc input,[data-theme="light"] .kyc select{color-scheme:light}
.kyc input:focus,.kyc select:focus{border-color:var(--purple)}
.divider{text-align:center;color:var(--mut);font-size:10px;letter-spacing:2px;margin:14px 0 10px}
.cancel-note{font-size:10.5px;color:var(--mut);text-align:center;margin-top:12px;line-height:1.7}
.cancel-note b{color:var(--ink)}