/* =============================================================
   home.css — หน้าแรก Pixel Monster Online
   ============================================================= */
:root {
  --bg: #0f1424; --bg2: #161d33; --card: #1c2440; --line: #2c365a; --ink: #eef1f8; --mute: #a6b0c8;
  --gold: #ffcf4a; --red: #e5484d; --green: #3cc46a; --blue: #3d8ee2;
  --pix: 'Kanit UI', 'Kanit', sans-serif; --th: 'Kanit', 'Leelawadee UI', Tahoma, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: radial-gradient(1200px 600px at 70% -10%, #283a74 0, transparent 60%), var(--bg); color: var(--ink); font-family: var(--th); font-size: 16px; line-height: 1.55; }
a { color: var(--gold); }
img { image-rendering: pixelated; }
h2 { font-family: var(--pix); font-size: 18px; letter-spacing: 1px; margin: 0 0 6px; line-height: 1.5; }
html[lang="th"] h2 { font-family: var(--th); font-size: 28px; font-weight: 700; }
h3 { font-size: 19px; margin: 26px 0 10px; }
.sub { color: var(--mute); margin: 0 0 18px; }
.note { color: var(--mute); font-size: 14px; }
.hidden { display: none !important; }

.topbar { position: sticky; top: 0; z-index: 100002; display: flex; align-items: center; gap: 18px; padding: 10px 24px; background: rgba(15, 20, 36, .92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.logo { display: flex; flex-direction: column; text-decoration: none; line-height: 1.3; }
.logo .l1 { font-family: var(--pix); font-size: 12px; color: #fff; text-shadow: 2px 2px 0 #9c1f4e; }
.logo .l2 { font-family: var(--pix); font-size: 8px; color: var(--gold); letter-spacing: 6px; }
#nav { display: flex; gap: 16px; flex: 1; flex-wrap: wrap; }
#nav a { color: var(--ink); text-decoration: none; font-size: 15px; opacity: .85; }
#nav a:hover { color: var(--gold); opacity: 1; }
.top-actions { display: flex; gap: 8px; align-items: center; }
.auth-profile-control { position: relative; z-index: 100003; }
.auth-profile-control > summary { list-style: none; max-width: min(240px, 42vw); overflow: hidden; padding: 8px 13px; border: 1px solid rgba(100, 225, 203, .38); border-radius: 999px; background: linear-gradient(120deg, rgba(11, 37, 48, .98), rgba(15, 27, 46, .98)); color: #e7f7f3; font: 700 13px/1.2 var(--th); text-overflow: ellipsis; white-space: nowrap; box-shadow: 0 4px 18px rgba(0,0,0,.2); }
.auth-profile-control > summary::-webkit-details-marker { display: none; }
.auth-profile-control > summary::after { content: '⌄'; margin-left: 8px; color: #8ce8cd; }
.auth-profile-control > summary:hover, .auth-profile-control[open] > summary { border-color: rgba(100, 225, 203, .7); box-shadow: 0 0 18px rgba(100, 225, 203, .16); }
.auth-profile-control[open] > summary { color: #a8f2dc; }
.profile-menu-item { width: 100%; padding: 9px 11px; border: 1px solid rgba(141, 213, 214, .18); border-radius: 9px; background: rgba(255,255,255,.04); color: #dceced; text-align: left; font: 700 13px/1.35 var(--th); cursor: pointer; }
.profile-menu-item:hover { border-color: rgba(100, 225, 203, .55); background: rgba(100, 225, 203, .1); color: #a8f2dc; }
.profile-menu-panel { position: absolute; top: calc(100% + 8px); right: 0; display: grid; gap: 8px; min-width: 170px; padding: 10px; border: 1px solid rgba(100, 225, 203, .3); border-radius: 14px; background: #0c1c2b; box-shadow: 0 12px 32px #0009; }
.profile-menu-panel[hidden] { display: none !important; }
.profile-logout:hover { border-color: rgba(255, 132, 143, .55); color: #ffb6bd; }
.profile-logout:disabled, .profile-upgrade:disabled { opacity: .6; cursor: wait; }
.profile-settings-box { text-align: left; }
.profile-settings-list { display: grid; gap: 10px; margin: 18px 0 0; }
.profile-settings-list > div { padding: 10px 12px; border: 1px solid rgba(141, 213, 214, .18); border-radius: 10px; background: rgba(255,255,255,.035); }
.profile-settings-list dt { color: #91b6bd; font-size: 12px; }
.profile-settings-list dd { margin: 2px 0 0; color: #effafa; font-weight: 700; overflow-wrap: anywhere; }

.btn, .ghost { font-family: var(--th); font-weight: 700; font-size: 15px; border-radius: 10px; padding: 9px 16px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; border: 0; }
.btn.play { background: linear-gradient(180deg, #ffd860, #f0a020); color: #3a2400; box-shadow: 0 3px 0 #a86a08; }
.btn.play:hover { filter: brightness(1.08); }
.btn.alt { background: #2d2b5a; color: #fff; box-shadow: 0 3px 0 #17163a; }
.btn.big { font-size: 18px; padding: 14px 26px; }
.ghost { background: transparent; color: var(--ink); border: 2px solid var(--line); }
.ghost:hover { border-color: var(--gold); }

.hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: center; max-width: 1180px; margin: 0 auto; padding: 56px 24px 40px; }
.eyebrow { color: var(--gold); font-weight: 700; margin: 0; }
.hero h1 { font-family: var(--pix); font-size: clamp(26px, 4.2vw, 48px); line-height: 1.35; margin: 14px 0; color: #fff; text-shadow: 4px 4px 0 #9c1f4e; }
.hero h1 span { color: var(--gold); text-shadow: 4px 4px 0 #5a3a10; }
.lead { font-size: 19px; color: #d6dcec; max-width: 560px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 16px; }
.fb-link { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; background: #1877f2; padding: 9px 16px 9px 9px; border-radius: 10px; font-weight: 700; }
.fb-ic { width: 26px; height: 26px; border-radius: 6px; background: #fff; color: #1877f2; display: grid; place-items: center; font-family: Arial, sans-serif; font-weight: 900; font-size: 20px; }
.me-line { color: var(--mute); }
.hero-art { position: relative; height: 420px; }
.hero-art img { position: absolute; width: 160px; height: 160px; filter: drop-shadow(0 10px 0 rgba(0, 0, 0, .35)); animation: bob 3.2s ease-in-out infinite; }
.hero-art .f0 { left: 4%; top: 52%; } .hero-art .f1 { left: 32%; top: 8%; width: 220px; height: 220px; animation-delay: -.6s; }
.hero-art .f2 { left: 66%; top: 46%; animation-delay: -1.1s; } .hero-art .f3 { left: 74%; top: 6%; width: 110px; height: 110px; animation-delay: -1.7s; }
.hero-art .f4 { left: 40%; top: 66%; width: 120px; height: 120px; animation-delay: -2.2s; } .hero-art .f5 { left: 2%; top: 4%; width: 130px; height: 130px; animation-delay: -2.8s; }
@keyframes bob { 50% { transform: translateY(-14px); } }

.sec { max-width: 1180px; margin: 0 auto; padding: 40px 24px; border-top: 1px solid var(--line); }

.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.vid { margin: 0; background: var(--card); border: 2px solid var(--line); border-radius: 12px; overflow: hidden; }
.vid video { width: 100%; aspect-ratio: 4 / 3; background: #000; display: block; }
.vid figcaption { padding: 10px 12px; display: flex; flex-direction: column; }
.vid figcaption span { color: var(--mute); font-size: 14px; }

.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.item { display: flex; gap: 10px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.item img { width: 40px; height: 40px; flex: none; }
.item div { display: flex; flex-direction: column; font-size: 14px; }
.item b { font-size: 15px; } .item small { color: var(--gold); }
.table-wrap { overflow-x: auto; margin-top: 12px; }
.tbl { width: 100%; border-collapse: collapse; background: var(--card); border-radius: 10px; overflow: hidden; font-size: 15px; }
.tbl th, .tbl td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
.tbl th { background: #232c4d; }
.tbl td small { color: var(--mute); margin-left: 4px; font-size: 12px; }
.tbl td.it { text-align: left; display: flex; gap: 8px; align-items: center; } .tbl td.it img { width: 28px; height: 28px; }
.tbl.grade td:last-child { white-space: normal; text-align: left; font-size: 14px; color: #d6dcec; }
.pill { display: inline-block; background: var(--c); color: #fff; font-family: var(--pix); font-size: 8px; padding: 4px 6px; border-radius: 5px; text-shadow: 1px 1px 0 rgba(0, 0, 0, .3); }
.badges { display: flex; flex-wrap: wrap; gap: 10px; }
.badge { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 30px; padding: 6px 14px 6px 6px; }
.badge i { width: 22px; height: 22px; border-radius: 50%; border: 3px solid #fff3; box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .25); }

.counts { display: block; margin-top: 6px; } .counts .pill { margin-left: 8px; }
.mon-filter { display: flex; gap: 8px; margin: 18px 0 12px; flex-wrap: wrap; }
.mon-filter input, .mon-filter select { font-family: var(--th); font-size: 15px; background: var(--card); color: var(--ink); border: 2px solid var(--line); border-radius: 8px; padding: 7px 10px; }
.mon-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.chain { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
.mon { width: 128px; display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--card); border-radius: 10px; padding: 8px 6px; text-align: center; }
.mon img { width: 72px; height: 72px; } .mon b { font-size: 13px; letter-spacing: .5px; } .mon .no { color: var(--mute); font-size: 12px; }
.mon .types img { width: 13px; height: 13px; margin: 2px 1px 0; object-fit: contain; }
.mon.dim { opacity: .3; }
.arrow { color: var(--gold); display: flex; flex-direction: column; align-items: center; font-size: 18px; } .arrow small { font-size: 12px; color: var(--mute); }

.sys-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.sys { display: flex; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.sys img { width: 48px; height: 48px; flex: none; }
.sys b { font-size: 17px; } .sys p { margin: 4px 0 0; color: #cfd6e8; font-size: 14.5px; }

.sums { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
@media (min-width: 1100px) { .sums { grid-template-columns: repeat(7, 1fr); } }
.sum { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sum img { width: 96px; height: 96px; } .sum span { color: var(--gold); font-size: 13px; } .sum small { color: var(--mute); font-size: 13px; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.slot { background: var(--card); border: 2px solid var(--line); border-radius: 12px; padding: 12px; text-align: center; display: flex; flex-direction: column; }
.slot span { font-family: var(--pix); font-size: 10px; color: var(--gold); } .slot b { font-size: 34px; line-height: 1.2; } .slot i { font-style: normal; color: var(--green); letter-spacing: 2px; }
.exp { columns: 2; padding-left: 18px; } .exp b { color: var(--green); }

.packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.pack { background: linear-gradient(180deg, #2a2f63, #1c2440); border: 2px solid #3d4a8a; border-radius: 12px; padding: 14px; text-align: center; display: flex; flex-direction: column; }
.pack b { font-size: 26px; } .pack b small { color: var(--green); font-size: 14px; } .pack span { color: var(--mute); font-size: 13px; } .pack em { font-style: normal; color: var(--gold); font-weight: 700; font-size: 18px; }
.bundles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.bundle { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; font-size: 14px; }
.bundle img { width: 32px; height: 32px; } .bundle span { flex: 1; } .bundle b { color: #b7a6ff; }

.foot { text-align: center; padding: 30px 20px 50px; color: var(--mute); border-top: 1px solid var(--line); }

.auth { position: fixed; inset: 0; z-index: 50; background: rgba(5, 8, 18, .72); display: grid; place-items: center; padding: 16px; }
.auth-box { position: relative; width: min(420px, 100%); background: #f8f6f0; color: #1d2235; border-radius: 16px; padding: 22px; box-shadow: 0 0 0 4px #1d2235, 0 20px 50px rgba(0, 0, 0, .5); }
.auth-x { position: absolute; right: 10px; top: 6px; border: 0; background: none; font-size: 28px; cursor: pointer; color: #5d6b86; }
.auth-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.auth-tabs button { flex: 1; font-family: var(--th); font-weight: 700; font-size: 16px; padding: 8px; border-radius: 8px; border: 2px solid #cfd6e2; background: #fff; cursor: pointer; }
.auth-tabs button.on { background: #2d2b5a; color: #fff; border-color: #2d2b5a; }
#auth-form { display: flex; flex-direction: column; gap: 10px; }
#auth-form label { display: flex; flex-direction: column; font-size: 14px; color: #3a4458; gap: 3px; }
#auth-form input { font-family: var(--th); font-size: 16px; padding: 9px 10px; border-radius: 8px; border: 2px solid #cfd6e2; }
#auth-form input:focus { outline: none; border-color: var(--blue); }
.auth .only-reg { display: none !important; } .auth.reg .only-reg { display: flex !important; }
.auth-err { color: var(--red); min-height: 1.2em; margin: 0; font-size: 14px; }
#auth-form .btn { justify-content: center; }
.auth-or { text-align: center; color: #8a93a8; font-size: 13px; margin: 14px 0 8px; }
.social { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.soc { display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--bg); color: var(--fg); background: var(--bg); text-decoration: none; font-weight: 700; padding: 9px 6px; border-radius: 8px; border: 2px solid #cfd6e2; font-size: 14px; }
.soc { background: var(--bg, #fff); }
.soc i { font-style: normal; font-family: Arial, sans-serif; font-weight: 900; }
.soc.off { opacity: .45; }
.auth-note { font-size: 13px; color: #5d6b86; }
.guest { display: block; text-align: center; color: #2d2b5a; font-size: 14px; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding-top: 30px; }
  .hero-art { height: 260px; } .hero-art img { width: 110px; height: 110px; } .hero-art .f1 { width: 150px; height: 150px; }
  #nav { display: none; }
  .topbar { padding: 8px 14px; }
  .exp { columns: 1; }
}
@media (max-width: 560px) { .chain { flex-wrap: wrap; } .mon { width: 108px; } }

/* Modern HD 2D landing refresh: clean editorial layout around approved game art. */
:root {
  --bg: #071526; --bg2: #0e2033; --card: #10283b; --line: rgba(188, 220, 226, .18);
  --ink: #f3f8f4; --mute: #b4c6c9; --gold: #f6c86b; --red: #ef765d;
  --green: #83d4a2; --blue: #66cbd2; --pix: 'Kanit UI', 'Kanit', sans-serif;
}
html { scroll-padding-top: 88px; }
body { background: radial-gradient(900px 540px at 78% -10%, rgba(56, 132, 143, .26), transparent 68%), radial-gradient(720px 500px at 0 38%, rgba(63, 111, 106, .13), transparent 75%), var(--bg); color: var(--ink); }
img { image-rendering: auto; }
h2 { font-size: clamp(24px, 3vw, 34px); letter-spacing: -.5px; color: #f6faf6; }
html[lang="th"] h2 { font-size: clamp(26px, 3vw, 36px); }
h3 { color: #e8f4ef; }
.topbar { padding: 12px max(22px, calc((100vw - 1320px) / 2)); background: rgba(5, 18, 31, .9); border-color: rgba(188, 220, 226, .12); backdrop-filter: blur(16px); }
.logo { min-width: 150px; }
.logo .l1 { font-family: var(--th); font-size: 14px; letter-spacing: 1.4px; font-weight: 800; text-shadow: none; }
.logo .l2 { font-family: var(--th); color: var(--blue); font-size: 10px; font-weight: 700; letter-spacing: 4px; }
#nav { gap: clamp(9px, 1.4vw, 20px); justify-content: center; }
#nav a { font-size: 13px; color: #c5d6d8; transition: color .2s ease; }
#nav a:hover { color: var(--gold); }
.btn, .ghost { border-radius: 999px; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.btn:hover, .ghost:hover { transform: translateY(-2px); }
.btn.play { background: linear-gradient(120deg, #ffe2a0, #f5bc53); color: #202a25; box-shadow: 0 5px 18px rgba(246, 200, 107, .18); }
.btn.alt { background: rgba(142, 215, 197, .13); border: 1px solid rgba(142, 215, 197, .38); box-shadow: none; }
.ghost { border-width: 1px; border-color: rgba(188, 220, 226, .25); }
.hero { position: relative; isolation: isolate; grid-template-columns: minmax(0, .95fr) minmax(450px, 1.05fr); gap: clamp(20px, 4vw, 60px); max-width: 1320px; min-height: 610px; margin: 24px auto 20px; padding: clamp(38px, 6vw, 82px) clamp(28px, 6vw, 78px); border: 1px solid rgba(190, 225, 221, .16); border-radius: 34px; overflow: hidden; background: linear-gradient(112deg, rgba(9, 27, 42, .98) 0%, rgba(12, 37, 48, .94) 48%, rgba(19, 58, 62, .83) 100%); box-shadow: 0 32px 80px rgba(0, 0, 0, .24); }
.hero::before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 78% 48%, rgba(83, 194, 181, .17), transparent 44%), linear-gradient(90deg, transparent 45%, rgba(4, 16, 28, .12)); }
.hero-text { position: relative; z-index: 2; }
.eyebrow, .section-kicker { color: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; }
.hero h1 { font-family: var(--th); font-size: clamp(40px, 6vw, 72px); line-height: 1.04; letter-spacing: -2px; margin: 18px 0; text-shadow: none; }
.hero h1 span { color: #a8e5d0; text-shadow: none; }
.lead { color: #c6d9d8; font-size: clamp(17px, 1.7vw, 20px); line-height: 1.75; max-width: 560px; }
.hero-cta { margin-top: 28px; }
.btn.big { min-height: 54px; padding: 14px 28px; font-size: 16px; }
.fb-link { margin-top: 8px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13); padding: 8px 15px 8px 8px; font-size: 13px; }
.fb-ic { border-radius: 50%; }
.me-line { min-height: 1.3em; font-size: 13px; }
.hero-art { height: 440px; min-width: 0; overflow: visible; }
.hero-aura { position: absolute; width: min(88%, 440px); aspect-ratio: 1; left: 7%; top: 0; border-radius: 50%; background: radial-gradient(circle, rgba(116, 225, 202, .17) 0 20%, rgba(84, 194, 194, .07) 45%, transparent 70%); filter: blur(5px); animation: aura-pulse 6s ease-in-out infinite; }
.hero-aura::before, .hero-aura::after { content: ''; position: absolute; inset: 10%; border: 1px solid rgba(168, 229, 208, .18); border-radius: 50%; transform: rotate(-20deg) scaleY(.34); }
.hero-aura::after { inset: 18%; transform: rotate(40deg) scaleY(.44); border-color: rgba(246, 200, 107, .2); }
.hero-mon { position: absolute; z-index: 1; display: grid; justify-items: center; margin: 0; animation: bob 4.8s ease-in-out infinite; }
.hero-mon img { position: relative; width: 150px; height: 150px; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .38)); }
.hero-mon figcaption { display: grid; justify-items: center; gap: 0; margin-top: -8px; color: #f7faf5; text-shadow: 0 2px 10px #071526; }
.hero-mon figcaption b { font-size: 11px; letter-spacing: 1px; }
.hero-mon figcaption small { color: #c6dfd8; font-size: 10px; text-transform: uppercase; }
.mon-glow { position: absolute; width: 75%; aspect-ratio: 1; top: 20%; border-radius: 50%; background: radial-gradient(circle, rgba(131, 212, 162, .2), transparent 67%); filter: blur(9px); }
.hero-mon.f0 { left: 0; top: 39%; animation-delay: -.8s; }
.hero-mon.f1 { left: 29%; top: 3%; z-index: 3; animation-delay: -2.2s; }
.hero-mon.f1 img { width: 210px; height: 210px; }
.hero-mon.f2 { right: 0; top: 39%; animation-delay: -1.5s; }
.hero-mon.f3 { left: 6%; top: 4%; animation-delay: -3s; }
.hero-mon.f3 img, .hero-mon.f4 img, .hero-mon.f5 img { width: 120px; height: 120px; }
.hero-mon.f4 { right: 7%; top: 5%; animation-delay: -1s; }
.hero-mon.f5 { left: 41%; bottom: -1%; animation-delay: -2.7s; }
.hero-spark { position: absolute; z-index: 2; width: 7px; height: 7px; border-radius: 50%; background: #ffe5a1; box-shadow: 0 0 14px 5px rgba(255, 217, 139, .55); animation: spark-float 3.7s ease-in-out infinite; }
.spark-a { top: 14%; left: 57%; } .spark-b { right: 7%; top: 52%; animation-delay: -1.5s; background: #9ce7db; box-shadow: 0 0 14px 5px rgba(104, 224, 211, .45); }
.spark-c { left: 20%; bottom: 9%; animation-delay: -2.6s; }
@keyframes bob { 50% { transform: translateY(-10px); } }
@keyframes aura-pulse { 50% { opacity: .64; transform: scale(1.04); } }
@keyframes spark-float { 50% { transform: translate3d(6px, -15px, 0) scale(.72); opacity: .5; } }
.sec { max-width: 1320px; padding: 62px clamp(22px, 4vw, 48px); border-top-color: rgba(188, 220, 226, .12); }
.sec h2 { margin-top: 4px; }
.sub { max-width: 760px; color: var(--mute); }
.showcase-sec { padding-top: 58px; }
.world-preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.world-card { position: relative; margin: 0; overflow: hidden; border-radius: 20px; border: 1px solid rgba(213, 236, 222, .2); background: #0b1c2a; box-shadow: 0 14px 36px rgba(0, 0, 0, .18); }
.world-image { position: relative; aspect-ratio: 1.18; overflow: hidden; }
.world-image::after { content: ''; position: absolute; inset: 38% 0 0; background: linear-gradient(transparent, rgba(5, 17, 27, .56)); pointer-events: none; }
.world-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.world-card:hover .world-image img { transform: scale(1.045); }
.world-index { position: absolute; z-index: 1; left: 16px; top: 14px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; background: rgba(6, 22, 34, .55); color: #fff; font-size: 12px; font-weight: 800; backdrop-filter: blur(6px); }
.world-card figcaption { display: grid; gap: 3px; padding: 15px 18px 18px; }
.world-card figcaption small { color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: 1.4px; }
.world-card figcaption b { color: #f1f6ed; font-size: 18px; }
.world-card figcaption span { color: var(--mute); font-size: 12px; letter-spacing: 1.5px; }
.controls-note { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding: 16px 18px; border: 1px solid rgba(188, 220, 226, .14); border-radius: 16px; background: rgba(13, 36, 51, .66); }
.controls-icon { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 12px; background: rgba(102, 203, 210, .14); color: var(--blue); font-size: 22px; }
.controls-note b { color: #ecf4ec; font-size: 14px; }
.controls-note p { margin: 1px 0 0; color: var(--mute); font-size: 12px; }
.text-link { margin-left: auto; white-space: nowrap; color: var(--gold); text-decoration: none; font-size: 13px; font-weight: 800; }
.text-link:hover { color: #ffe5a1; }
.journey-sec { padding-top: 26px; }
.journey-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.journey-step { position: relative; display: flex; align-items: flex-start; gap: 14px; min-height: 88px; padding: 18px; border: 1px solid rgba(188, 220, 226, .13); border-radius: 16px; background: linear-gradient(130deg, rgba(16, 40, 59, .94), rgba(14, 32, 51, .64)); }
.journey-node { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: 50%; background: rgba(131, 212, 162, .14); color: #a9e6c0; font-size: 12px; font-weight: 800; }
.journey-step div { display: grid; gap: 4px; }
.journey-step b { color: #f2f7ef; font-size: 13px; letter-spacing: .6px; }
.journey-step small { color: var(--mute); font-size: 12px; }
.journey-link { position: absolute; right: -16px; top: 28px; z-index: 2; color: var(--gold); font-size: 20px; }
.item, .tbl, .sys, .sum, .slot, .bundle, .pack, .badge, .chain, .mon { background-color: rgba(16, 40, 59, .86); border-color: rgba(188, 220, 226, .14); }
.tbl th { background: #17364b; }
.mon-grid { gap: 12px; }
.chain { align-items: stretch; border-radius: 16px; padding: 9px; }
.mon { width: 132px; border-radius: 12px; padding: 10px 8px; }
.mon > img { width: 96px; height: 96px; object-fit: contain; }
.mon.dim { display: none; }
.mon .pill { font-family: var(--th); font-size: 10px; }
.arrow { align-self: center; color: var(--gold); }
.sum { border-radius: 16px; min-height: 206px; }
.sum img { object-fit: contain; }
.sum span { color: #a8e5d0; }
.sys { border-radius: 16px; }
.sys b { color: #eff7f1; }
.sys p { color: var(--mute); }
.packs .pack { background: linear-gradient(150deg, #17394d, #10283b); border-color: rgba(102, 203, 210, .2); }
.foot { color: var(--mute); border-color: rgba(188, 220, 226, .12); }
.auth { background: rgba(2, 10, 18, .78); backdrop-filter: blur(8px); }
.auth-box { border: 1px solid #d9e9e2; box-shadow: 0 24px 90px rgba(0, 0, 0, .4); }
@media (max-width: 940px) {
  .hero { grid-template-columns: 1fr; min-height: unset; }
  .hero-art { height: 360px; width: min(100%, 620px); margin: 4px auto 0; }
}
@media (max-width: 700px) {
  .topbar { gap: 8px; padding-inline: 14px; }
  .logo { min-width: 0; margin-right: auto; }
  .top-actions { gap: 5px; }
  .top-actions .ghost, .top-actions .btn { padding: 8px 11px; font-size: 12px; }
  .hero { margin: 12px 12px 0; padding: 30px 22px 16px; border-radius: 24px; }
  .hero h1 { font-size: clamp(38px, 12vw, 58px); }
  .hero-art { height: 300px; }
  .hero-mon img { width: 112px; height: 112px; }
  .hero-mon.f1 img { width: 156px; height: 156px; }
  .hero-mon.f3 img, .hero-mon.f4 img, .hero-mon.f5 img { width: 88px; height: 88px; }
  .world-preview { grid-template-columns: 1fr; }
  .world-image { aspect-ratio: 1.45; }
  .journey-cards { grid-template-columns: 1fr; }
  .journey-link { display: none; }
  .controls-note { flex-wrap: wrap; }
  .text-link { margin-left: 58px; }
  .sec { padding: 42px 18px; }
  .sums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .top-actions #login-btn { display: none; }
  .hero-art { height: 250px; }
  .hero-mon img { width: 92px; height: 92px; }
  .hero-mon.f1 img { width: 132px; height: 132px; }
  .hero-mon.f3 img, .hero-mon.f4 img, .hero-mon.f5 img { width: 72px; height: 72px; }
  .hero-mon figcaption b { font-size: 9px; }
  .mon-filter input { flex: 1 1 100%; }
  .chain { max-width: 100%; overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Landing-page polish: use the real town render as a quiet, atmospheric backdrop. */
body { position: relative; isolation: isolate; overflow-x: clip; background: #07131c; }
body::before { content: ''; position: fixed; z-index: -1; inset: 0; pointer-events: none; background-image: linear-gradient(180deg, rgba(5, 15, 23, .93), rgba(6, 17, 27, .97)), radial-gradient(ellipse at 50% 18%, rgba(31, 84, 82, .24), transparent 60%), var(--town-atmosphere-image, none); background-size: auto, auto, cover; background-position: center; background-attachment: fixed; }
#ambient-particles { position: fixed; z-index: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .42; }
.topbar, main, .foot { position: relative; z-index: 1; }

/* The farm-map background is deliberately subdued so foreground art and copy stay clear. */
.hero { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(16px, 2vw, 28px); background-color: #0b2029; background-image: none; }
.hero::after { content: ''; position: absolute; z-index: -2; inset: 0; pointer-events: none; background: url('/assets/maps/hd2d/world/mossForest.jpg') center 48% / cover no-repeat; opacity: .11; }
.hero::before { background: radial-gradient(ellipse at 78% 48%, rgba(83, 194, 181, .13), transparent 44%), linear-gradient(90deg, rgba(9, 27, 42, .2) 0%, rgba(9, 27, 42, .05) 55%, rgba(4, 16, 28, .18)); }
/* The original front artwork is a full transparent 256px image; keep the complete square frame. */
.hero-art { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(320px, 1fr)); align-items: center; justify-items: center; gap: 2px 24px; width: 100%; height: auto; min-height: 650px; overflow: visible; }
.hero-aura { z-index: 0; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(88%, 440px); }
.hero-mon { position: relative; inset: auto; z-index: 1; width: 100%; min-width: 0; display: grid; justify-items: center; align-content: center; margin: 0; padding: 4px 2px; animation: hero-float 5.4s ease-in-out infinite; }
.hero-mon.f0, .hero-mon.f1, .hero-mon.f2, .hero-mon.f3, .hero-mon.f4, .hero-mon.f5 { left: auto; right: auto; top: auto; bottom: auto; }
.hero-mon img { position: relative; z-index: 1; display: block; width: min(100%, 208px); height: auto; aspect-ratio: 1; object-fit: contain; object-position: center; overflow: visible; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .34)); }
.hero-mon.f0 img, .hero-mon.f1 img, .hero-mon.f2 img, .hero-mon.f3 img, .hero-mon.f4 img, .hero-mon.f5 img { width: min(100%, 208px); height: auto; }
.hero-mon figcaption { position: relative; z-index: 2; display: grid; justify-items: center; gap: 2px; width: 100%; margin: -2px 0 0; color: #f7faf5; text-shadow: 0 2px 10px #071526; text-align: center; }
.hero-mon figcaption b { max-width: 100%; overflow-wrap: anywhere; font-size: 21px; letter-spacing: .35px; line-height: 1.2; }
.hero-mon figcaption small { color: #c6dfd8; font-size: 18px; line-height: 1.25; text-transform: uppercase; }
.hero-mon .mon-glow { z-index: 0; width: 72%; max-width: 140px; top: 17%; pointer-events: none; }
.hero-mon.f3 img, .hero-mon.f4 img, .hero-mon.f5 img { transform: scale(1.24); transform-origin: center; margin-bottom: 34px; }
.hero-mon[data-species="terrachamp"] .mon-glow { background: radial-gradient(circle, rgba(255, 176, 70, .26), rgba(247, 118, 53, .10) 46%, transparent 70%); }
.hero-mon[data-species="voltcore"] .mon-glow { background: radial-gradient(circle, rgba(255, 220, 93, .30), rgba(255, 166, 47, .12) 46%, transparent 70%); }
.hero-mon[data-species="aurelune"] .mon-glow { background: radial-gradient(circle, rgba(192, 127, 255, .28), rgba(117, 101, 239, .11) 48%, transparent 70%); }
.hero-mon.f0, .hero-mon.f2, .hero-mon.f3, .hero-mon.f5 { margin-top: 14px; }
.hero-mon.f1, .hero-mon.f4 { margin-top: -12px; }
.hero-mon.f0 { animation-delay: -.6s; }
.hero-mon.f1 { animation-delay: -2.1s; }
.hero-mon.f2 { animation-delay: -1.4s; }
.hero-mon.f3 { animation-delay: -3s; }
.hero-mon.f4 { animation-delay: -1s; }
.hero-mon.f5 { animation-delay: -2.7s; }
@keyframes hero-float { 50% { translate: 0 -5px; } }

/* Auth gateway prompt and guest-entry controls. */
.guest-play { width: 100%; margin-top: 12px; padding: 13px 16px; border: 1px solid rgba(96, 238, 206, .48); border-radius: 12px; background: linear-gradient(110deg, rgba(12, 54, 61, .98), rgba(12, 34, 53, .98)); color: #b9fff0; font-family: inherit; font-size: 13px; font-weight: 800; line-height: 1.35; letter-spacing: .3px; cursor: pointer; box-shadow: inset 0 1px rgba(255,255,255,.06), 0 8px 28px rgba(0,0,0,.22); }
.guest-play:hover { border-color: #8fffe3; background: linear-gradient(110deg, #12464b, #153858); }
.guest-play:disabled { opacity: .6; cursor: wait; }
.guest-play[hidden] { display: none !important; }
.auth-notice { position: fixed; inset: 0; z-index: 100001; display: grid; place-items: center; padding: 18px; background: rgba(2, 8, 17, .78); backdrop-filter: blur(9px); }
.auth-notice.hidden { display: none; }
.auth-notice-box { width: min(100%, 460px); padding: clamp(24px, 5vw, 38px); border: 1px solid rgba(88, 235, 210, .42); border-radius: 20px; background: radial-gradient(ellipse at 85% 0%, rgba(32, 139, 153, .21), transparent 48%), linear-gradient(145deg, #102631, #091521 72%); color: #eaf6f5; text-align: center; box-shadow: 0 28px 100px rgba(0,0,0,.64), inset 0 1px rgba(255,255,255,.08); }
.auth-notice-mark { display: grid; place-items: center; width: 38px; height: 38px; margin: 0 auto 12px; border: 1px solid rgba(111, 244, 219, .55); border-radius: 50%; color: #7df4da; font-size: 22px; font-weight: 900; }
.auth-notice-box h2 { margin: 0; color: #f3fbff; font-size: clamp(19px, 4vw, 25px); }
.auth-notice-box p { margin: 10px 0 22px; color: #a8c5cf; }
.auth-notice-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.auth-notice-actions .ghost { padding: 10px 16px; border: 1px solid rgba(173, 210, 219, .25); border-radius: 999px; background: rgba(255,255,255,.04); color: #cfdae0; cursor: pointer; }
.me-line .text-link { border: 0; background: transparent; color: #88eedc; cursor: pointer; font: inherit; text-decoration: underline; }

.world-image { display: grid; place-items: center; aspect-ratio: 1.12; background: #07131b; }
.world-image::after { z-index: 0; inset: 58% 0 0; background: linear-gradient(transparent, rgba(5, 17, 27, .28)); }
.world-image .town-render { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: auto; }
.world-render-tag { position: absolute; z-index: 1; right: 12px; bottom: 11px; padding: 5px 8px; border: 1px solid rgba(208, 239, 226, .28); border-radius: 999px; background: rgba(5, 20, 30, .7); color: #d9f2e8; font-size: 8px; font-weight: 800; letter-spacing: 1px; }
.world-card:hover .town-render { transform: scale(1.025); transition: transform .55s cubic-bezier(.2, .7, .2, 1); }
.world-render-tag, .world-index { pointer-events: none; }

@media (max-width: 940px) {
  .hero-art { min-height: 650px; grid-template-rows: repeat(2, minmax(320px, 1fr)); }
}
@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; min-height: unset; }
  .hero-art { width: min(100%, 680px); margin: 8px auto 0; }
}
@media (max-width: 700px) {
  .hero-art { min-height: 750px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(250px, 1fr)); gap: 0 10px; }
  .hero-mon.f0 img, .hero-mon.f1 img, .hero-mon.f2 img, .hero-mon.f3 img, .hero-mon.f4 img, .hero-mon.f5 img { width: min(100%, 156px); }
  .hero-mon.f3 img, .hero-mon.f4 img, .hero-mon.f5 img { transform: scale(1.18); margin-bottom: 26px; }
  .hero-mon.f0, .hero-mon.f2, .hero-mon.f3, .hero-mon.f5, .hero-mon.f1, .hero-mon.f4 { margin-top: 0; }
  .world-image { aspect-ratio: 1.2; }
  .auth-profile-control > summary { max-width: 34vw; padding: 7px 9px; font-size: 11px; }
  .profile-menu-panel { min-width: 165px; }
}
@media (max-width: 420px) {
  .hero-art { min-height: 690px; grid-template-rows: repeat(3, minmax(230px, 1fr)); }
  .hero-mon.f0 img, .hero-mon.f1 img, .hero-mon.f2 img, .hero-mon.f3 img, .hero-mon.f4 img, .hero-mon.f5 img { width: min(100%, 132px); }
  .hero-mon.f3 img, .hero-mon.f4 img, .hero-mon.f5 img { transform: scale(1.14); margin-bottom: 22px; }
  .hero-mon figcaption b { font-size: 18px; }
  .hero-mon figcaption small { font-size: 15px; }
  .world-image { aspect-ratio: 1.05; }
}

/* NOC-style account gate: the session itself remains in a server-only HttpOnly cookie. */
.auth { z-index: 99999; padding: 18px; background: rgba(2, 8, 16, .82); backdrop-filter: blur(12px); }
.auth-box { width: min(440px, 100%); max-height: min(88vh, 760px); overflow-y: auto; padding: 26px; color: #d9f2ed; background: linear-gradient(155deg, rgba(12, 31, 43, .98), rgba(7, 20, 31, .99)); border: 1px solid rgba(91, 223, 198, .46); border-radius: 18px; box-shadow: 0 0 0 1px rgba(63, 180, 173, .12), 0 24px 90px rgba(0, 0, 0, .62), inset 0 1px rgba(225, 255, 247, .04); }
.auth-box::before { content: 'PLAYER ACCESS  /  SECURE SESSION'; display: block; margin: 2px 36px 17px 0; color: #63d6c1; font: 700 10px/1.4 var(--en); letter-spacing: 1.8px; }
.auth-x { color: #9bb8c2; }
.auth-tabs button { color: #a9c1c8; background: rgba(9, 25, 37, .9); border-color: rgba(137, 181, 188, .25); transition: color .18s, border-color .18s, background .18s; }
.auth-tabs button.on { color: #071923; background: #72e2c7; border-color: #72e2c7; box-shadow: 0 0 22px rgba(62, 218, 183, .16); }
#auth-form label { color: #a8c4ca; font: 600 13px/1.5 var(--en); }
#auth-form input { color: #e5f6f2; background: rgba(3, 14, 23, .82); border: 1px solid rgba(124, 176, 185, .32); border-radius: 9px; outline: none; }
#auth-form input:focus { border-color: #63d6c1; box-shadow: 0 0 0 3px rgba(99, 214, 193, .12); }
.auth-err { color: #ff969f; }
.auth-or { color: #8ba9b1; }
.soc { border-color: rgba(133, 177, 186, .24); }
.auth-note { color: #93adb5; }
.auth .btn.play { color: #09231f; background: linear-gradient(135deg, #8ce8cd, #54cbb4); border: 0; box-shadow: 0 7px 24px rgba(65, 204, 174, .18); }
@media (max-width: 520px) { .auth-box { padding: 21px 18px; } }