/* Little Breeder: Guppy Champion — เว็บไซต์ (G23 · 2026)
   ส่วนที่ 1: ฟอนต์ · ตัวแปรสี · ส่วนหัว · ปุ่ม · หัวข้อสไตล์ภาพหน้าร้าน · การ์ดมือถือ · ตัวละคร · เอฟเฟกต์ */
@font-face{font-family:'Kanit';src:url(../fonts/Kanit-Regular.ttf) format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Kanit';src:url(../fonts/Kanit-SemiBold.ttf) format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Kanit';src:url(../fonts/Kanit-Black.ttf) format('truetype');font-weight:900;font-display:swap}

:root{
  --font:'Kanit',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ink:#0B3B8C; --ink2:rgba(4,30,90,.45);
  --gold1:#FFF7B0; --gold2:#FFD83A; --gold3:#FFA21F;
  --cream:#FFF8EA; --cream2:#FCEBC9; --paper:#FFFDF6;
  --brown:#7A5230; --brown2:#4A2F1A; --wood:#B5793E;
  --text:#2A2740; --text2:#5D5872;
  --green:#5DB24A;
  --head:72px;
  --wrap:1180px;
  --r:28px;
}
html[lang=ja]{--font:'Kanit','Hiragino Maru Gothic ProN','Hiragino Kaku Gothic ProN','Yu Gothic UI','Yu Gothic','Meiryo','Noto Sans JP',sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px;-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{margin:0;font-family:var(--font);color:var(--text);background:#4A2F1A;line-height:1.6}
main>section{overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
.px{image-rendering:pixelated;image-rendering:crisp-edges}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(var(--wrap),100% - 32px);margin-inline:auto}

/* ---------- ส่วนหัว (ใสบนส่วนแรก · พื้นครีมเมื่อเลื่อน) ---------- */
.site-head{position:fixed;inset:0 0 auto;z-index:60;height:var(--head);display:flex;align-items:center;transition:background .3s,box-shadow .3s,height .3s}
.site-head .wrap{display:flex;align-items:center;gap:18px}
.site-head.solid{background:rgba(255,248,234,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 6px 24px rgba(20,30,80,.18);--head:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:900;font-size:20px;line-height:1;color:#fff;text-shadow:0 2px 0 var(--ink),0 0 10px rgba(4,30,90,.4)}
.site-head.solid .brand{color:var(--ink);text-shadow:none}
.brand img{width:40px;height:40px;border-radius:11px;box-shadow:0 3px 0 rgba(0,0,0,.18)}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{text-decoration:none;font-weight:600;font-size:15.5px;color:#fff;padding:8px 12px;border-radius:999px;text-shadow:0 2px 0 rgba(4,30,90,.55);transition:background .2s,transform .2s}
.nav a:hover{background:rgba(255,255,255,.22);transform:translateY(-2px)}
.site-head.solid .nav a{color:var(--text);text-shadow:none}
.site-head.solid .nav a:hover{background:rgba(11,59,140,.08)}
.langs{display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.25);box-shadow:inset 0 0 0 2px rgba(255,255,255,.45)}
.site-head.solid .langs{background:rgba(11,59,140,.07);box-shadow:inset 0 0 0 2px rgba(11,59,140,.12)}
.langs button{display:flex;align-items:center;gap:5px;border:0;background:transparent;cursor:pointer;padding:4px 9px 4px 6px;border-radius:999px;font-weight:600;font-size:13px;color:#fff;text-shadow:0 1px 0 rgba(4,30,90,.6);transition:background .2s,transform .15s}
.site-head.solid .langs button{color:var(--text);text-shadow:none}
.langs button img{width:22px;height:22px}
.langs button.on{background:#fff;color:var(--ink);text-shadow:none;box-shadow:0 2px 0 rgba(0,0,0,.15)}
.langs button:hover{transform:translateY(-1px)}
.head-cta{margin-left:4px}
@media (max-width:980px){.nav{display:none}.langs{margin-left:auto}}
@media (max-width:560px){.brand span{display:none}.head-cta{display:none}.langs button span{display:none}.langs button{padding:4px}}

/* ---------- ปุ่ม ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;text-decoration:none;font-weight:900;border-radius:999px;transition:transform .15s,filter .15s,box-shadow .15s}
.btn-gold{padding:10px 22px;font-size:16px;color:#fff;background:linear-gradient(180deg,#FFE27A 0%,#FFC93A 45%,#FF9F1C 100%);border:3px solid #fff;
  box-shadow:0 5px 0 #C26A06,0 10px 18px rgba(60,30,0,.28);text-shadow:0 2px 0 #B3530A,0 -1px 0 #B3530A,2px 0 0 #B3530A,-2px 0 0 #B3530A}
.btn-gold:hover{transform:translateY(-3px) scale(1.03);filter:brightness(1.05)}
.btn-gold:active{transform:translateY(3px);box-shadow:0 2px 0 #C26A06,0 4px 8px rgba(60,30,0,.25)}

/* ปุ่มร้านค้า (ยังไม่เปิด = ป้าย "เร็วๆ นี้") · เมื่อมีลิงก์จริง site.js เปลี่ยนเป็นป้ายทางการของร้าน */
.stores{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.store{position:relative;display:flex;align-items:center;gap:12px;min-width:200px;height:64px;padding:8px 20px 8px 14px;border-radius:16px;background:#111;color:#fff;text-decoration:none;
  border:2px solid rgba(255,255,255,.9);box-shadow:0 6px 0 rgba(0,0,0,.35),0 14px 26px rgba(0,0,0,.25);transition:transform .15s}
.store:hover{transform:translateY(-3px)}
.store .si{width:34px;height:34px;flex:none}
.store small{display:block;font-size:12px;font-weight:600;opacity:.85;line-height:1.1}
.store b{display:block;font-size:22px;font-weight:900;line-height:1.1;letter-spacing:.2px}
.soc{position:relative}
.store .soon,.soc .soon{position:absolute;top:-11px;right:-10px;padding:2px 10px;border-radius:999px;background:linear-gradient(180deg,#FFE27A,#FF9F1C);color:#6a2a00;font-size:12px;font-weight:900;font-style:normal;
  border:2px solid #fff;box-shadow:0 3px 0 rgba(0,0,0,.25);transform:rotate(6deg);line-height:1.5}
.store.live .soon{display:none}
.store img.badge{height:60px;width:auto}

/* ---------- หัวข้อสไตล์ภาพหน้าร้าน: ชั้นหลังขอบหนาสีหมึก + ชั้นหน้าขาว/ทอง ---------- */
.hl{position:relative;margin:0;font-weight:900;line-height:1.16;font-size:clamp(34px,4.6vw,62px);letter-spacing:.2px;--hink:var(--ink);--hink2:var(--ink2)}
.hl>span{display:block}
.hl .hl-b{position:absolute;inset:0;color:var(--hink);-webkit-text-stroke:.26em var(--hink);filter:drop-shadow(0 .12em 0 var(--hink2));z-index:0;user-select:none}
.hl .hl-f{position:relative;color:#fff;z-index:1}
.hl b{font-weight:900}
.hl .hl-f b{background:linear-gradient(180deg,var(--gold1) 8%,var(--gold2) 42%,var(--gold3) 92%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hl.center{text-align:center}
html[lang=ja] .hl{font-size:clamp(30px,4.1vw,56px)}
.tag{display:inline-flex;align-items:center;gap:8px;padding:6px 16px 6px 8px;border-radius:999px;background:#fff;color:var(--hink,var(--ink));font-weight:900;font-size:16px;box-shadow:0 5px 0 rgba(0,0,0,.12)}
.tag img{width:34px;height:34px;margin:-6px 0}
.lead{font-size:clamp(16px,1.6vw,19px);font-weight:600;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.18)}

/* ---------- มือถือแสดงภาพหน้าจอเกมจริง ---------- */
.phone{position:relative;width:var(--pw,300px);aspect-ratio:300/636;border-radius:46px;padding:12px;background:linear-gradient(150deg,#4a5578 0%,#1a2033 34%,#0c101c 100%);
  box-shadow:0 0 0 3px rgba(255,255,255,.75),0 40px 60px var(--shd,rgba(4,24,92,.45)),0 0 90px rgba(255,255,255,.35);transform-style:preserve-3d;transition:transform .25s ease-out}
.phone .scr{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:#000}
.phone .scr img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.phone::after{content:'';position:absolute;inset:12px;border-radius:36px;background:linear-gradient(118deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 28%);pointer-events:none}

/* ---------- ตัวละคร (PixelLab 8 เฟรม · แถบภาพ 512x96) · สัตว์เดิน (8 เฟรม · 256x32) ---------- */
.sprite8{background-repeat:no-repeat;background-size:800% 100%;image-rendering:pixelated;animation:sprite8 .9s steps(8) infinite}
@keyframes sprite8{from{background-position-x:0%}to{background-position-x:114.2857%}}
.stk{filter:drop-shadow(var(--o,4px) 0 0 #fff) drop-shadow(calc(var(--o,4px) * -1) 0 0 #fff) drop-shadow(0 var(--o,4px) 0 #fff) drop-shadow(0 calc(var(--o,4px) * -1) 0 #fff) drop-shadow(0 14px 12px rgba(10,20,60,.28))}
.char{position:absolute;width:calc(64px * var(--k,3));height:calc(96px * var(--k,3));cursor:pointer;transition:transform .2s}
.char.jump{animation:charjump .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes charjump{0%{transform:translateY(0)}35%{transform:translateY(-26%)}70%{transform:translateY(0) scaleY(.94)}100%{transform:none}}
.sticker{position:absolute;image-rendering:pixelated}
.bob{animation:bob 3.2s ease-in-out infinite}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -12px}}

/* ---------- ปรากฏตอนเลื่อนถึง ---------- */
.rv{opacity:0;transform:translateY(46px) scale(.96);transition:opacity .7s ease,transform .8s cubic-bezier(.2,1.25,.4,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}

/* ---------- ฟองอากาศตามเมาส์ (ทั้งหน้า) ---------- */
#trail{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:80}

/* ---------- ลดการเคลื่อนไหวตามที่ผู้ใช้ตั้งค่า ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sprite8,.bob,.char.jump{animation:none!important}
  .rv{opacity:1;transform:none;transition:none}
}