/* PIGY v0.1.1 — stylesheet หลัก: แยกเป็นกลุ่มเดียวเพื่อป้องกัน cascade ซ้อนกัน */
@font-face{font-family:"LINE Seed Sans TH";src:url("../LINESeedSansTH-Thin.woff2") format("woff2");font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:"LINE Seed Sans TH";src:url("../LINESeedSansTH-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"LINE Seed Sans TH";src:url("../LINESeedSansTH-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"LINE Seed Sans TH";src:url("../LINESeedSansTH-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"LINE Seed Sans TH";src:url("../LINESeedSansTH-Heavy.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}

:root{--pink:#f65b99;--berry:#d82b76;--ink:#402839;--muted:#8c7182;--dock-solid:#fff6fa;--dock-glass:rgba(255,246,250,.42);--violet:#8b5cf6}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:#fff8fb;font-family:"LINE Seed Sans TH",Tahoma,sans-serif}
button,input{font:inherit}button{cursor:pointer}.page-shell{overflow:hidden}

/* ส่วนหัวและ Hero */
.topbar{position:absolute;z-index:5;top:26px;left:50%;width:min(1280px,calc(100% - 64px));display:grid;grid-template-columns:1fr auto 1fr;align-items:center;transform:translateX(-50%)}
.brand{color:#fff;font-size:25px;font-weight:800;text-decoration:none}.top-links{display:flex;gap:34px}.top-links a{color:rgba(255,255,255,.85);text-decoration:none}
.auth-actions{display:flex;align-items:center;gap:8px}.login-button,.signup-button,.logout-button{min-height:38px;padding:0 14px;border-radius:13px;font-size:12px;font-weight:800}.login-button{border:1px solid rgba(255,255,255,.48);color:#fff;background:rgba(255,255,255,.12);backdrop-filter:blur(18px)}.signup-button{border:1px solid rgba(255,255,255,.65);color:#b82b6c;background:#fff;box-shadow:0 8px 18px rgba(111,25,70,.15)}.account-chip{display:flex;align-items:center;gap:7px;max-width:150px;padding:4px 9px 4px 5px;border:1px solid rgba(255,255,255,.45);border-radius:999px;color:#fff;background:rgba(255,255,255,.14);font-size:12px;font-weight:800;backdrop-filter:blur(18px)}.account-chip b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:#b82b6c;background:#fff}.account-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.logout-button{border:1px solid rgba(255,255,255,.38);color:#fff;background:rgba(70,25,50,.18)}
.hero{position:relative;min-height:820px;padding:170px max(7vw,48px) 120px;overflow:hidden;border-radius:0 0 58px 58px;background:radial-gradient(circle at 80% 24%,rgba(255,255,255,.28),transparent 25%),linear-gradient(135deg,#fa4d92,#f66aa3 46%,#e986b5)}
.hero:before{position:absolute;inset:0;content:"";background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(#000,transparent)}
.hero-copy{position:relative;z-index:2;width:48%;max-width:650px}.eyebrow{display:inline-flex;padding:9px 14px;border:1px solid rgba(255,255,255,.35);border-radius:99px;color:#fff;background:rgba(255,255,255,.15);backdrop-filter:blur(16px);font-size:12px;font-weight:700}
.hero h1{margin:25px 0 20px;color:#fff;font-size:clamp(62px,7vw,108px);line-height:.9;letter-spacing:-.06em}.hero h1 em{color:#fff1f7;font-style:normal}.lead{color:rgba(255,255,255,.84);font-size:18px;line-height:1.7}
.hero-actions{display:flex;gap:12px;margin-top:30px}.hero-actions a{display:flex;align-items:center;justify-content:center;min-height:54px;padding:0 22px;border-radius:17px;font-weight:700;text-decoration:none}.primary{gap:20px;color:var(--berry);background:#fff;box-shadow:0 18px 36px rgba(123,27,78,.18)}.primary span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;color:#fff;background:var(--pink)}.secondary{border:1px solid rgba(255,255,255,.4);color:#fff;background:rgba(255,255,255,.12)}
.hero-art{position:absolute;right:3vw;bottom:12px;width:53%;height:720px}.hero-art>img{position:absolute;z-index:2;right:9%;bottom:30px;height:690px;filter:drop-shadow(0 28px 34px rgba(113,25,72,.18))}

/* ฟองแก้ว: ชั้นสะท้อนแสงอยู่ในทรงเดิมและเคลื่อนไหวช้า */
.coin{position:absolute;z-index:3;display:grid;place-items:center;isolation:isolate;border:1px solid rgba(255,255,255,.62);border-radius:50%;color:#fff;background:radial-gradient(circle at 31% 22%,rgba(255,255,255,.78) 0 5%,rgba(255,255,255,.22) 17%,rgba(255,176,213,.2) 40%,rgba(213,38,123,.32) 72%,rgba(151,36,118,.38) 100%);box-shadow:inset 2px 3px 5px rgba(255,255,255,.58),inset -5px -8px 15px rgba(151,22,94,.25),inset 0 0 0 2px rgba(255,255,255,.1),0 14px 24px rgba(112,22,72,.18),0 2px 7px rgba(255,255,255,.2);animation:pigy-bubble-drift 14s cubic-bezier(.42,0,.28,1) infinite}
.coin:before{position:absolute;z-index:-1;left:14%;top:10%;width:35%;height:21%;border-radius:50%;content:"";background:radial-gradient(ellipse at center,rgba(255,255,255,.74),rgba(255,255,255,.1) 52%,transparent 72%);filter:blur(1px);transform:rotate(-22deg)}
.coin:after{position:absolute;z-index:-1;right:15%;bottom:13%;width:22%;height:12%;border:1px solid rgba(255,255,255,.28);border-radius:50%;content:"";filter:blur(.5px);transform:rotate(-30deg)}
.coin-a{top:130px;left:5%;width:82px;height:82px}.coin-b{top:190px;right:2%;width:58px;height:58px;animation-duration:17s;animation-delay:-6s}
.glass-card{position:absolute;z-index:4;width:220px;padding:14px;border:1px solid rgba(255,255,255,.72);border-radius:18px;background:rgba(255,255,255,.7);box-shadow:0 18px 44px rgba(104,27,69,.14);backdrop-filter:blur(22px)}.glass-card b,.glass-card small{display:block}.glass-card small{margin-top:4px;color:#9b7188}.card-a{right:0;top:330px}.card-b{left:1%;bottom:90px}

/* เนื้อหาส่วนกลาง */
.story{padding:120px max(6vw,40px);text-align:center}.story>small{color:var(--pink);font-weight:800;letter-spacing:.15em}.story>h2{margin:18px 0 60px;font-size:clamp(44px,5.2vw,76px);line-height:1.03;letter-spacing:-.05em}.story h2 em{color:var(--pink);font-style:normal}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1240px;margin:auto}.steps article{position:relative;min-height:320px;padding:34px;border:1px solid rgba(221,129,170,.25);border-radius:32px;background:linear-gradient(145deg,#fff,rgba(255,230,240,.6));box-shadow:0 26px 70px rgba(154,55,101,.08);text-align:left}.steps article i{position:absolute;top:28px;right:28px;color:#cda6b9;font-style:normal}.steps article>span{display:grid;place-items:center;width:72px;height:72px;margin-bottom:48px;border-radius:24px;color:#fff;background:linear-gradient(145deg,#ff8ab9,#e63a83);box-shadow:0 16px 30px rgba(213,44,112,.18);font-size:27px}.steps h3{font-size:23px}.steps p{color:var(--muted);line-height:1.7}
.creator{display:flex;align-items:flex-end;justify-content:space-between;max-width:1240px;margin:0 auto 220px;padding:70px;border-radius:42px;color:#fff;background:linear-gradient(135deg,#ef4d90,#bc4b96);box-shadow:0 30px 80px rgba(139,36,91,.17)}.creator h2{margin:15px 0;font-size:clamp(42px,5vw,64px);line-height:1}.creator p{max-width:600px;color:rgba(255,255,255,.76)}.creator a{display:flex;gap:20px;padding:18px 22px;border-radius:18px;color:var(--berry);background:#fff;font-weight:700;text-decoration:none}

/* Dock: geometry หนึ่งชุด ใช้ได้ทั้ง Glass และ Solid */
.dock-stage{position:fixed;z-index:20;left:50%;bottom:max(28px,env(safe-area-inset-bottom));width:min(1220px,94vw);height:150px;transform:translateX(-50%)}
.dock{position:relative;z-index:2;width:100%;height:106px;padding:14px 22px 4px;border:1px solid rgba(255,255,255,.52);border-radius:27px;background:var(--dock-glass);box-shadow:0 24px 62px rgba(122,52,92,.16),0 0 28px rgba(255,91,169,.14),0 0 58px rgba(139,92,246,.08),inset 0 1px rgba(255,255,255,.56),inset 0 -1px rgba(176,103,140,.13);transition:transform .42s cubic-bezier(.4,0,.2,1),opacity .22s ease;backdrop-filter:blur(30px) saturate(1.5);-webkit-backdrop-filter:blur(30px) saturate(1.5)}
body.solid .dock{border-color:transparent;background:var(--dock-solid);box-shadow:0 24px 62px rgba(122,52,92,.13),inset 0 1px #fff,inset 0 -1px rgba(176,103,140,.12);backdrop-filter:none;-webkit-backdrop-filter:none}
.menu-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(7,minmax(46px,1fr));gap:3px;padding:0 40px;overflow-x:auto;scrollbar-width:none}
.menu{position:relative;top:-5px;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:96px;padding:14px 5px 4px;border:0;outline:0;color:#684f62;background:transparent;font-weight:700;white-space:nowrap;transition:transform .3s,color .3s}.menu span{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(220,201,255,.72);border-radius:15px;background:rgba(244,237,255,.58);box-shadow:0 5px 14px rgba(91,53,150,.14),inset 0 1px rgba(255,255,255,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:.3s}.menu span img{display:block;width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(105,53,145,.2));transition:transform .3s cubic-bezier(.22,.85,.28,1)}.menu:nth-child(2) span img,.menu:nth-child(4) span img{width:32px;height:32px}.menu b,.menu.active b{font-weight:inherit;transform:translateY(-7px)}.menu:hover{color:#6f42db;transform:translateY(-2px)}.menu:hover span{border-color:#cdb7ff;background:#eadfff;box-shadow:0 7px 16px rgba(139,92,246,.2)}.menu:hover span img{transform:translateY(-1px) scale(1.06)}.menu.active{color:#c9226b;font-weight:800;text-shadow:0 0 13px rgba(255,95,164,.4)}.menu.active span{opacity:0;transform:translateY(-10px) scale(.72)}.menu:focus-visible span{outline:2px solid var(--violet);outline-offset:3px}
.active-island{position:absolute;z-index:3;left:0;top:-48px;width:200px;height:106px;opacity:0;pointer-events:none;transition:transform .44s cubic-bezier(.22,.85,.28,1)}.active-island.ready{opacity:1}.active-island:before{position:absolute;left:-1px;top:0;width:202px;height:48px;content:"";background:var(--dock-glass);clip-path:path("M 0 48 C 29 48 37 45 50 29 C 63 13 73 0 101 0 C 129 0 139 13 152 29 C 165 45 173 48 202 48 L 202 48 L 0 48 Z");-webkit-clip-path:path("M 0 48 C 29 48 37 45 50 29 C 63 13 73 0 101 0 C 129 0 139 13 152 29 C 165 45 173 48 202 48 L 202 48 L 0 48 Z");filter:drop-shadow(0 -1px 0 rgba(255,255,255,.42));backdrop-filter:blur(30px) saturate(1.5);-webkit-backdrop-filter:blur(30px) saturate(1.5)}
body.solid .active-island:before{background:var(--dock-solid);filter:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.active-island b{position:absolute;z-index:1;left:57px;top:23px;display:grid;place-items:center;width:86px;height:86px;border:1px solid rgba(220,201,255,.95);border-radius:50%;color:#fff;background:linear-gradient(145deg,#9b72ff 0%,#8b5cf6 48%,#6f42db 100%);box-shadow:0 14px 30px rgba(93,55,190,.3),inset 0 2px 3px rgba(255,255,255,.42)}.active-island b:before{position:absolute;inset:9px;border-radius:50%;content:"";background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(220,201,255,.86));box-shadow:inset 0 1px 2px #fff,0 3px 10px rgba(65,31,128,.16)}.active-island b img{position:relative;z-index:1;display:block;width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 4px 5px rgba(70,34,110,.22)) saturate(1.06) contrast(1.03)}.active-island.ready b{animation:pigy-orb-breathe 3.4s ease-in-out infinite}

/* ไฟ LED และสวิตช์ */
.brand-led{position:absolute;z-index:6;left:15px;top:22px;display:flex;flex-direction:column;justify-content:space-between;width:10px;height:56px;padding:5px 2px;overflow:hidden;border:1px solid rgba(255,255,255,.72);border-radius:8px;background:rgba(244,237,255,.3);box-shadow:0 0 11px rgba(255,94,169,.32),0 0 28px rgba(139,92,246,.16),inset 0 1px rgba(255,255,255,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.brand-led i{position:relative;z-index:1;display:block;width:4px;height:12px;border-radius:99px}.brand-led i:nth-child(1){background:#ff6baa;box-shadow:0 0 5px #fff,0 0 11px #ff5fa4,0 0 22px rgba(255,95,164,.78)}.brand-led i:nth-child(2){background:#8b5cf6;box-shadow:0 0 5px #fff,0 0 11px #8b5cf6,0 0 22px rgba(139,92,246,.72)}.brand-led i:nth-child(3){background:#ffc94d;box-shadow:0 0 5px #fff,0 0 11px #ffc94d,0 0 22px rgba(255,201,77,.7)}.brand-led b{position:absolute;inset:-18px 0 auto;height:18px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.95),transparent);animation:brand-led-scan 3.6s cubic-bezier(.4,0,.2,1) infinite}
.glass-switch{position:absolute;z-index:6;right:14px;top:17px;width:30px;height:66px;padding:0;border:1px solid rgba(255,255,255,.72);border-radius:15px;color:#fff;background:linear-gradient(180deg,#6d4664,#452d4c);box-shadow:0 0 12px rgba(255,112,181,.2),0 0 27px rgba(139,92,246,.13),inset 0 1px rgba(255,255,255,.3)}.glass-switch.on{background:linear-gradient(180deg,#ff75b6 0%,#e33d91 52%,#a34ad3 100%);box-shadow:0 0 13px rgba(255,105,180,.62),0 0 30px rgba(139,92,246,.32),inset 0 1px rgba(255,255,255,.48)}.glass-switch span{position:absolute;left:10px;top:7px;color:inherit;font-size:6.5px;font-weight:800;line-height:1;letter-spacing:.06em;writing-mode:vertical-rl;text-shadow:0 1px 2px rgba(73,33,68,.2);transform:rotate(180deg)}.glass-switch.on span{top:31px}.glass-switch i{position:absolute;left:4px;bottom:4px;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 18%,#fcf7ff 52%,#e8d8f3 100%);box-shadow:0 0 0 1px rgba(255,255,255,.92),0 0 9px rgba(255,255,255,.9),0 0 19px rgba(190,111,255,.42),inset 0 -2px 3px rgba(130,72,153,.13);transition:transform .38s cubic-bezier(.22,.85,.28,1)}.glass-switch.on i{transform:translateY(-36px)}.glass-switch:focus-visible{outline:2px solid #fff;outline-offset:3px;box-shadow:0 0 0 4px rgba(255,95,164,.42),0 0 24px rgba(139,92,246,.42)}
.dock-toggle{position:absolute;z-index:2;left:50%;top:110px;display:inline-flex;align-items:center;justify-content:center;gap:9px;width:106px;height:34px;padding:0 14px;border:1px solid rgba(192,118,153,.18);border-radius:18px;background:var(--dock-solid);box-shadow:0 10px 24px rgba(96,45,72,.11),inset 0 1px rgba(255,255,255,.92);color:#765b70;font-size:11px;font-weight:800;letter-spacing:.015em;transform:translateX(-50%);transition:transform .42s cubic-bezier(.22,.85,.28,1),box-shadow .25s ease,background .25s ease,color .25s ease}.dock-toggle:before{display:none}.dock-toggle span{line-height:1;white-space:nowrap}.dock-toggle i{width:8px;height:8px;margin-top:-3px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .38s cubic-bezier(.22,.85,.28,1)}body:not(.solid) .dock-toggle{border-color:rgba(255,255,255,.68);background:rgba(255,246,250,.7);box-shadow:0 10px 24px rgba(96,45,72,.1),inset 0 1px rgba(255,255,255,.86);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4)}.dock-toggle:hover{color:#6f42db;box-shadow:0 13px 28px rgba(96,45,72,.15),0 0 18px rgba(139,92,246,.12),inset 0 1px rgba(255,255,255,.94)}.dock-toggle:focus-visible{outline:2px solid var(--violet);outline-offset:3px}.dock-stage.hidden .dock{transform:translateY(155px);opacity:0;pointer-events:none}.dock-stage.hidden .dock-toggle{border-radius:18px}.dock-stage.hidden .dock-toggle i{margin-top:3px;transform:rotate(225deg)}

/* หน้าต่างบัญชี */
.auth-overlay{position:fixed;z-index:29;inset:0;background:rgba(36,17,30,.38);opacity:0;transition:opacity .24s;backdrop-filter:blur(8px)}.auth-overlay.show{opacity:1}.auth-dialog{position:fixed;z-index:30;left:50%;top:50%;width:min(430px,calc(100vw - 32px));padding:34px;overflow:hidden;border:1px solid rgba(255,255,255,.78);border-radius:30px;color:#3f2940;background:rgba(255,250,253,.96);box-shadow:0 28px 90px rgba(64,20,47,.3);opacity:0;transform:translate(-50%,-46%) scale(.96);transition:opacity .24s,transform .3s cubic-bezier(.22,.85,.28,1);backdrop-filter:blur(28px)}.auth-dialog.show{opacity:1;transform:translate(-50%,-50%) scale(1)}.auth-close{position:absolute;right:16px;top:16px;width:34px;height:34px;border:0;border-radius:50%;color:#836477;background:#f8e5ef;font-size:23px;line-height:1}.auth-mark{display:grid;place-items:center;width:54px;height:54px;margin-bottom:15px;border-radius:19px;background:linear-gradient(145deg,#ff8fc2,#e94f99);box-shadow:0 12px 24px rgba(221,57,130,.22);font-size:27px}.auth-kicker{margin:0;color:#ed4b96;font-size:10px;font-weight:800;letter-spacing:.16em}.auth-dialog h2{margin:5px 0;font-size:31px;letter-spacing:-.035em}.auth-subtitle{margin:0 0 22px;color:#8d7489;font-size:13px}.auth-dialog form{display:grid;gap:13px}.auth-dialog label{display:grid;gap:6px;color:#755b70;font-size:12px;font-weight:800}.auth-dialog input{width:100%;height:46px;padding:0 13px;border:1px solid #ecdbe6;border-radius:13px;outline:0;color:#3f2940;background:#fff;font:inherit;font-weight:400}.auth-dialog input:focus{border-color:#e65098;box-shadow:0 0 0 3px rgba(238,80,152,.13)}.auth-submit{height:48px;margin-top:4px;border:0;border-radius:14px;color:#fff;background:linear-gradient(135deg,#f9569e,#b95fea);box-shadow:0 12px 22px rgba(214,62,142,.24);font-weight:800}.auth-switch{margin:18px 0 5px;color:#8c7187;font-size:12px;text-align:center}.auth-switch button{border:0;color:#e54993;background:transparent;font-weight:800}.auth-note{display:block;color:#aa93a4;font-size:10px;line-height:1.45;text-align:center}body.ninja .auth-dialog{border-color:rgba(255,255,255,.1);color:#f2edf3;background:rgba(34,35,41,.97);box-shadow:0 28px 90px rgba(0,0,0,.5)}body.ninja .auth-subtitle,body.ninja .auth-switch{color:#c2afbc}body.ninja .auth-dialog label{color:#d3bdcb}body.ninja .auth-dialog input{border-color:rgba(255,255,255,.1);color:#f5eff4;background:#2b2c33}body.ninja .auth-close{color:#e6dce3;background:#34353d}body.ninja .auth-note{color:#9e8b98}

@keyframes pigy-bubble-drift{0%,100%{transform:translate3d(0,0,0) rotate(-1deg)}38%{transform:translate3d(2px,-5px,0) rotate(1deg)}72%{transform:translate3d(-2px,-8px,0) rotate(-.5deg)}}
@keyframes pigy-orb-breathe{0%,100%{box-shadow:0 12px 28px rgba(93,55,190,.24),0 0 0 0 rgba(139,92,246,0),inset 0 2px 3px rgba(255,255,255,.42)}50%{box-shadow:0 16px 34px rgba(93,55,190,.36),0 0 20px 7px rgba(139,92,246,.2),0 0 34px 11px rgba(255,107,170,.09),inset 0 2px 3px rgba(255,255,255,.5)}}
@keyframes brand-led-scan{0%,18%{transform:translateY(0);opacity:0}30%{opacity:.9}70%{opacity:.75}82%,100%{transform:translateY(76px);opacity:0}}

@media(max-width:900px){.topbar{grid-template-columns:1fr auto}.top-links{display:none}.hero{min-height:930px;padding-top:130px}.hero-copy{width:70%}.hero-art{right:-10%;width:68%;height:650px}.hero-art>img{height:610px}.steps{grid-template-columns:1fr}.creator{gap:30px;margin-inline:24px;padding:50px}}
@media(max-width:720px){.dock-stage{height:130px}.dock{height:90px;padding:9px 7px 3px}.menu-grid{gap:0;padding:0 36px;overflow:hidden}.menu{top:-3px;gap:4px;min-width:46px;padding:8px 1px 3px;font-size:10px;line-height:1.12}.menu span{width:32px;height:32px;border-radius:11px}.menu span img{width:25px;height:25px}.menu:nth-child(2) span img,.menu:nth-child(4) span img{width:24px;height:24px}.menu b{display:flex;align-items:flex-start;justify-content:center;min-height:24px;width:100%;text-align:center;white-space:normal}.active-island{top:-38px;width:140px;height:90px}.active-island:before{width:142px;height:38px;clip-path:path("M 0 38 C 20 38 26 35 35 23 C 44 11 51 0 71 0 C 91 0 98 11 107 23 C 116 35 122 38 142 38 L 142 38 L 0 38 Z");-webkit-clip-path:path("M 0 38 C 20 38 26 35 35 23 C 44 11 51 0 71 0 C 91 0 98 11 107 23 C 116 35 122 38 142 38 L 142 38 L 0 38 Z")}.active-island b{left:36px;top:18px;width:68px;height:68px}.active-island b:before{inset:7px}.active-island b img{width:46px;height:46px}.brand-led{left:7px;top:17px;width:8px;height:52px;padding-inline:1px}.brand-led i{width:4px;height:11px}.glass-switch{right:7px;top:14px;width:26px;height:60px}.dock-toggle,.dock-stage.hidden .dock-toggle{top:94px;width:94px;height:30px;border-radius:16px;font-size:10px}.dock-stage.hidden .dock-toggle{border-radius:16px}}
@media(max-width:680px){.topbar{width:calc(100% - 34px)}.auth-actions{gap:5px}.login-button,.signup-button{min-height:34px;padding:0 9px;font-size:10px}.account-chip{max-width:92px}.account-chip span{display:none}.logout-button{min-height:34px;padding:0 8px;font-size:10px}.hero{min-height:930px;padding:108px 22px;border-radius:0 0 38px 38px}.hero-copy{width:100%;text-align:center}.hero h1{font-size:58px}.hero-actions{justify-content:center}.hero-art{right:-4%;width:108%;height:470px}.hero-art>img{right:18%;height:455px}.glass-card{width:184px;padding:10px;font-size:12px}.card-a{right:1%;top:190px}.story{padding:84px 18px}.creator{display:block;margin:0 18px 180px;padding:36px 28px}.creator a{margin-top:26px}.dock-stage{width:96vw;bottom:20px}}
/* Pixel LED: ไฟทั้งสามวิ่งจากบนลงล่างอย่างช้า ๆ ในรางเดียวกัน */
.brand-led{display:block;width:14px;height:62px;padding:0;border:1px solid rgba(255,255,255,.82);border-radius:8px;background-image:linear-gradient(90deg,rgba(255,255,255,.38) 0 1px,transparent 1px 4px),linear-gradient(rgba(255,255,255,.26) 0 1px,transparent 1px 4px),repeating-linear-gradient(to bottom,#ff5fa4 0 10px,#8b5cf6 10px 20px,#ffc94d 20px 30px);background-size:4px 4px,4px 4px,100% 30px;background-position:0 0,0 0,0 0;box-shadow:0 0 0 3px rgba(255,123,184,.18),0 0 18px rgba(139,92,246,.18),inset 0 1px rgba(255,255,255,.7);animation:pigy-pixel-led-stream 2.4s linear infinite;image-rendering:pixelated}
.brand-led:after{position:absolute;inset:2px;pointer-events:none;border-radius:5px;content:"";box-shadow:inset 0 0 7px rgba(255,255,255,.42),inset 0 0 2px rgba(77,37,118,.25)}
.brand-led i,.brand-led b{display:none}
@keyframes pigy-pixel-led-stream{to{background-position:0 0,0 0,0 30px}}
@media(max-width:720px){.brand-led{left:7px;top:17px;width:12px;height:56px;border-radius:7px}.brand-led:after{border-radius:4px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}.coin,.active-island.ready b{animation:none!important}.brand-led{animation:pigy-pixel-led-stream 4.8s linear infinite!important}}

/* PIGY Ninja — พื้นผิวดำแบบ Apple โดยเก็บ pink เป็นสี accent */
.top-actions{display:flex;align-items:center;justify-self:end;gap:9px}.ninja-theme-toggle{position:relative;width:110px;height:54px;padding:0;overflow:hidden;border:2px solid #718896;border-radius:999px;background:linear-gradient(180deg,#4fb0e4 0%,#7fc9ed 58%,#c3edf9 100%);box-shadow:inset 0 2px 4px rgba(18,78,120,.34),inset 0 -2px 3px rgba(255,255,255,.8),0 3px 0 #94a8b3,0 7px 13px rgba(49,72,96,.24);transition:background .46s,box-shadow .46s,transform .3s}.ninja-theme-toggle:before{position:absolute;right:-8px;bottom:-7px;width:74px;height:36px;border-radius:55% 45% 0 0;content:"";background:radial-gradient(ellipse at 7% 100%,#dff4fb 0 24%,transparent 25%),radial-gradient(ellipse at 35% 100%,#fff 0 33%,transparent 34%),radial-gradient(ellipse at 68% 100%,#e5f7fc 0 32%,transparent 33%),radial-gradient(ellipse at 98% 100%,#f8fdff 0 25%,transparent 26%);opacity:1;transition:opacity .32s}.ninja-theme-toggle:after{position:absolute;z-index:1;right:18px;top:12px;width:3px;height:3px;border-radius:50%;content:"";background:#fff;box-shadow:-22px 12px 0 -1px #fff,-10px 29px 0 -1px rgba(255,255,255,.8),13px 20px 0 -1px #fff,23px 6px 0 -1px #fff;opacity:0;transition:opacity .32s}.ninja-theme-toggle:hover{transform:translateY(-2px)}.ninja-theme-toggle:focus-visible{outline:2px solid #fff;outline-offset:3px}.pig-theme-head{position:absolute;z-index:2;left:3px;top:3px;width:46px;height:46px;border:2px solid rgba(255,247,169,.92);border-radius:50%;background:radial-gradient(circle at 34% 26%,#fff8b8 0 9%,transparent 10%),linear-gradient(145deg,#ffe548,#ffd028);box-shadow:inset 0 -3px 4px rgba(201,133,0,.22),0 2px 5px rgba(61,80,88,.34);transition:transform .5s cubic-bezier(.22,.85,.28,1),border-radius .34s,background .46s,box-shadow .46s,border-color .46s,clip-path .34s}.pig-theme-head:before{position:absolute;left:11px;top:12px;width:20px;height:17px;border-radius:48% 48% 45% 45%;content:"";background:radial-gradient(circle at 31% 38%,#48263e 0 1.2px,transparent 1.7px),radial-gradient(circle at 69% 38%,#48263e 0 1.2px,transparent 1.7px),radial-gradient(ellipse at 50% 72%,#ffc4db 0 25%,transparent 27%),radial-gradient(circle at 18% 8%,#ff83b5 0 16%,transparent 17%),radial-gradient(circle at 82% 8%,#ff83b5 0 16%,transparent 17%),#ff83b5;box-shadow:inset 0 1px rgba(255,255,255,.5);transition:all .34s}.pig-theme-head:after{position:absolute;left:9px;top:8px;width:10px;height:6px;border-radius:50%;content:"";background:rgba(255,255,255,.52);transform:rotate(-34deg);transition:all .34s}.ninja-theme-toggle[aria-pressed="true"]{border-color:#263342;background:linear-gradient(90deg,#172032 0%,#172032 47%,#4e5765 48%,#707a88 100%);box-shadow:inset 0 2px 4px rgba(0,0,0,.48),inset 0 -1px rgba(255,255,255,.14),0 3px 0 #65717e,0 7px 13px rgba(0,0,0,.3)}.ninja-theme-toggle[aria-pressed="true"]:before{opacity:0}.ninja-theme-toggle[aria-pressed="true"]:after{opacity:1}.ninja-theme-toggle[aria-pressed="true"] .pig-theme-head{transform:translateX(55px);border:0;border-radius:0;background:linear-gradient(135deg,#ff91cb 0 16%,#2b2536 17% 43%,#bc6dff 44% 57%,#2b2536 58% 83%,#ff91cb 84%);box-shadow:0 2px 5px rgba(0,0,0,.42),0 0 0 1px rgba(255,189,226,.6);clip-path:polygon(50% 0,60% 31%,88% 12%,69% 40%,100% 50%,69% 60%,88% 88%,60% 69%,50% 100%,40% 69%,12% 88%,31% 60%,0 50%,31% 40%,12% 12%,40% 31%)}.ninja-theme-toggle[aria-pressed="true"] .pig-theme-head:before{left:16px;top:16px;width:14px;height:14px;border:2px solid #ffb5dc;border-radius:50%;background:radial-gradient(circle,#15141c 0 28%,#8e4fb4 30% 48%,#ff8fc8 50% 63%,#25202e 65%);box-shadow:0 0 0 1px rgba(255,255,255,.3)}.ninja-theme-toggle[aria-pressed="true"] .pig-theme-head:after{display:none}
body.ninja{--ink:#f2edf3;--muted:#b6a5b3;--dock-solid:#202126;--dock-glass:rgba(28,29,35,.72);color:var(--ink);background:radial-gradient(circle at 85% 8%,rgba(149,75,180,.16),transparent 26%),linear-gradient(145deg,#191a1f,#22232a)}body.ninja .manage-button{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.08)}body.ninja .steps article{border-color:rgba(255,255,255,.08);background:linear-gradient(145deg,#292a31,#202126);box-shadow:0 26px 70px rgba(0,0,0,.2)}body.ninja .steps p{color:#b8a8b5}body.ninja:not(.solid) .dock{border-color:rgba(255,255,255,.1);background:rgba(27,28,34,.72);box-shadow:0 24px 62px rgba(0,0,0,.32),0 0 28px rgba(255,91,169,.12),inset 0 1px rgba(255,255,255,.09),inset 0 -1px rgba(255,255,255,.04);backdrop-filter:blur(30px) saturate(1.2);-webkit-backdrop-filter:blur(30px) saturate(1.2)}body.ninja.solid .dock{background:#23242a;box-shadow:0 24px 62px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.08)}body.ninja:not(.solid) .active-island:before{background:rgba(27,28,34,.72);filter:drop-shadow(0 -1px 0 rgba(255,255,255,.1))}body.ninja.solid .active-island:before{background:#23242a}body.ninja .dock-toggle{border-color:rgba(255,255,255,.08);color:#eadde8;background:#25262d;box-shadow:0 10px 24px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.08)}body.ninja:not(.solid) .dock-toggle{background:rgba(37,38,45,.82)}body.ninja .menu{color:#c8bac4}body.ninja .menu span{border-color:rgba(211,184,255,.2);background:rgba(139,92,246,.15);box-shadow:0 5px 14px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.08)}body.ninja .menu:hover span{background:rgba(139,92,246,.28);border-color:rgba(232,191,255,.4)}body.ninja .menu.active{color:#ff75b6}body.ninja .brand-led{border-color:rgba(255,255,255,.22);box-shadow:0 0 0 3px rgba(255,123,184,.12),0 0 18px rgba(139,92,246,.15)}body.ninja .manager{background:rgba(35,36,43,.98);box-shadow:-30px 0 100px rgba(0,0,0,.4)}body.ninja .manager>p{color:#c3b3bf}body.ninja .editor-row input{border-color:rgba(255,255,255,.1);color:#f2edf3;background:#2c2d34}

/* จอแคบมาก (≤520px): บีบระยะขอบและขนาดปุ่มของแถวเมนู เพื่อให้เมนูที่ 7 ไม่ถูกตัด
   โดยยังเว้นที่ให้แถบ LED ด้านซ้ายและสวิตช์ GLASS/SOLID ด้านขวาเท่าเดิม */
@media(max-width:520px){
  .menu-grid{padding:0 30px 0 22px}
  .menu{min-width:0;padding-inline:0;font-size:9.5px}
  .menu span{width:28px;height:28px;border-radius:10px}
  .menu span img{width:22px;height:22px}
  .menu:nth-child(2) span img,.menu:nth-child(4) span img{width:21px;height:21px}
  .menu b{min-height:26px}
}