*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --brand:#f59e0b;--brand-dark:#d97706;--brand-soft:#fef3c7;
  --ink:#1e293b;--bg:#fefce8;--surface:#ffffff;
  --border:3px solid #1e293b;
  --shadow:3px 3px 0 #1e293b;
  --shadow-hover:5px 5px 0 #1e293b;
  --radius:14px;--radius-lg:18px;
}
html{scroll-behavior:smooth}
body{
  font-family:'Patrick Hand','Nunito',system-ui,sans-serif;background:var(--bg);color:var(--ink);
  line-height:1.6;min-height:100vh;padding-bottom:0;
}
h1,h2,h3,h4{font-family:'Patrick Hand',cursive;font-weight:600;line-height:1.2}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input{font-family:inherit}
.container{max-width:1140px;margin:0 auto;padding:0 24px}

/* HEADER */
.site-header{position:sticky;top:0;z-index:100;background:var(--surface);border-bottom:3px solid var(--ink)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;cursor:pointer}
.brand-logo{
  width:40px;height:40px;background:var(--brand);border:var(--border);
  border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-family:'Patrick Hand';font-weight:700;font-size:20px;color:#fff;box-shadow:2px 2px 0 var(--ink);
}
.brand-name{font-family:'Patrick Hand';font-weight:600;font-size:18px}
.main-nav{display:flex;gap:6px;align-items:center}
.main-nav a{
  padding:8px 16px;font-family:'Patrick Hand';font-weight:500;font-size:15px;
  color:var(--ink);border-radius:10px;transition:all .15s;
}
.main-nav a:hover,.main-nav a.active{background:var(--brand-soft)}
.main-nav .nav-cta{background:var(--brand);color:#fff;border:2.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.main-nav .nav-cta:hover{background:var(--brand-dark)}
.menu-toggle{display:none;font-size:24px;padding:4px 8px}

/* HERO */
.hero{padding:56px 0 48px;text-align:center;background:#f59e0b}
.hero-badge{
  display:inline-block;background:#fef08a;padding:10px 22px;
  font-size:16px;font-weight:800;margin-bottom:28px;color:var(--ink);
  transform:rotate(-1.5deg);box-shadow:3px 3px 0 rgba(30,41,59,.25);
}
.hero h1{
  font-size:clamp(36px,6vw,60px);margin:0 auto 20px;display:table;
  clip-path:polygon(2% 0%,98% 0%,99% 7%,100% 15%,97% 25%,97% 35%,96% 44%,99% 54%,100% 61%,100% 71%,99% 80%,99% 87%,100% 97%,97% 100%,2% 100%,3% 93%,3% 85%,0% 77%,0% 67%,0% 58%,0% 48%,4% 41%,3% 35%,0% 28%,4% 21%,4% 12%,0% 3%,4% 0%);letter-spacing:-.5px;color:var(--ink);
  position:relative;display:inline-block;padding:28px 48px;background:#fef08a;
  transform:rotate(-2deg);
}
.h1-wrap{position:relative;display:table;margin:0 auto 20px;padding-top:30px;filter:drop-shadow(5px 5px 0 rgba(30,41,59,.25))}
.h1-wrap::before{
  content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%) rotate(20deg);
  width:56px;height:56px;z-index:5;
  background:url("/img/icon-pin.png") no-repeat center/contain;
}
.hero h1{margin-bottom:0 !important}
.hero h1 span{
  background:transparent;color:var(--ink);padding:0;
}
.hero-tag{display:block;font-size:15px;font-weight:700;color:var(--ink);margin-top:14px;letter-spacing:1px;background:none;opacity:.7}
.hero h1 span:not(.hero-tag){color:#fff;background:rgba(30,41,59,.15);padding:0 8px;border-radius:8px}
.hero-desc{color:#fff;font-size:20px;max-width:560px;margin:0 auto 32px;opacity:.98;text-shadow:1px 1px 0 rgba(30,41,59,.2)}

/* SEARCH */
.search-bar{
  max-width:620px;margin:0 auto;background:var(--surface);
  display:flex;align-items:stretch;overflow:visible;position:relative;
  border:var(--border);border-radius:16px;box-shadow:5px 5px 0 var(--ink);
}
.search-game{
  display:flex;align-items:center;gap:8px;padding:0 18px;
  border-right:3px solid var(--ink);cursor:pointer;white-space:nowrap;
  min-width:160px;position:relative;font-family:'Patrick Hand';font-weight:500;font-size:15px;
}
.search-game:hover{background:var(--brand-soft)}
.search-game-placeholder{color:#94a3b8;font-weight:400}
.search-level{
  flex:1;border:none;outline:none;padding:16px;font-size:16px;font-weight:700;
  background:transparent;color:var(--ink);min-width:0;
}
.search-level::placeholder{color:#94a3b8}
.search-btn{
  background:var(--brand);color:#fff;font-family:'Patrick Hand';font-weight:600;font-size:16px;
  padding:0 28px;border-left:3px solid var(--ink);transition:background .15s;
}
.search-btn:hover{background:var(--brand-dark)}

.game-dropdown{
  display:none;position:absolute;top:calc(100% + 10px);left:0;right:0;
  background:var(--surface);max-height:360px;overflow-y:auto;z-index:200;
  border:var(--border);border-radius:14px;box-shadow:5px 5px 0 var(--ink);
}
.game-dropdown.open{display:block}
.gd-search{padding:10px;border-bottom:2.5px dashed #cbd5e1}
.gd-search input{width:100%;padding:8px 12px;border:2px solid #cbd5e1;border-radius:10px;font-size:14px;outline:none}
.gd-search input:focus{border-color:var(--brand)}
.gd-item{display:flex;align-items:center;gap:12px;padding:10px 16px;cursor:pointer}
.gd-item:hover{background:var(--brand-soft)}
.gd-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;border:2px solid var(--ink);background:#fff}
.gd-name{font-weight:800;font-size:14px}
.gd-meta{font-size:12px;color:#94a3b8}

.hero-stats{display:flex;gap:32px;justify-content:center;margin-top:40px;flex-wrap:wrap}
.hero-stat{display:flex;align-items:center;gap:14px;text-align:left}
.hero-stat-icon{width:80px;height:80px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hero-stat-icon img{width:72px;height:72px;object-fit:contain}
.hero-stat-num{font-family:'Patrick Hand';font-weight:700;font-size:30px;color:#fff;line-height:1.1}
.hero-stat-label{font-size:13px;color:#fff;font-weight:700;opacity:.9}

/* SECTIONS */
.section{padding:56px 0}
.section-head{text-align:center;margin-bottom:36px}
.section-eyebrow{
  display:inline-block;background:var(--brand-soft);padding:4px 14px;
  color:var(--brand-dark);font-weight:800;font-size:13px;
  text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px;
  border:2.5px solid var(--ink);border-radius:20px;box-shadow:2px 2px 0 var(--ink);
  transform:rotate(-1deg);
}
.section-title{font-size:clamp(26px,3.5vw,38px);margin:8px 0}

/* CATEGORY */
.cat-filter{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:36px}
.cat-chip{
  padding:8px 18px;font-weight:800;font-size:14px;background:var(--surface);
  border:var(--border);cursor:pointer;color:var(--ink);border-radius:20px;
  box-shadow:2.5px 2.5px 0 var(--ink);transition:all .1s;
}
.cat-chip:hover{transform:translate(-1px,-1px);box-shadow:3.5px 3.5px 0 var(--ink)}
.cat-chip.active{background:var(--brand);color:#fff}

/* GAME GRID */
.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px}
.game-card{
  background:var(--surface);overflow:hidden;cursor:pointer;
  border:var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s;
}
.game-card:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-hover)}
.game-cover{height:130px;display:flex;align-items:center;justify-content:center}
.game-cover-emoji{
  width:70px;height:70px;background:rgba(255,255,255,.92);border:var(--border);
  border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:36px;
}
.game-body{padding:16px 20px 20px}
.game-cat{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}
.game-body h3{font-size:20px;margin-bottom:4px}
.game-body p{font-size:14px;color:#64748b;line-height:1.4;margin-bottom:14px}
.game-foot{display:flex;justify-content:space-between;align-items:center}
.game-count{font-size:14px;font-weight:800;color:var(--brand-dark)}
.game-arrow{
  width:32px;height:32px;background:var(--brand-soft);border:2.5px solid var(--ink);
  border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-weight:800;color:var(--brand-dark);
}
.game-card:hover .game-arrow{background:var(--brand);color:#fff}

/* cover gradients */
.c-amber{background:linear-gradient(135deg,#fde68a,#f59e0b)}
.c-pink{background:linear-gradient(135deg,#fbcfe8,#ec4899)}
.c-blue{background:linear-gradient(135deg,#bfdbfe,#3b82f6)}
.c-green{background:linear-gradient(135deg,#bbf7d0,#22c55e)}
.c-purple{background:linear-gradient(135deg,#ddd6fe,#8b5cf6)}
.c-red{background:linear-gradient(135deg,#fecaca,#ef4444)}
.c-teal{background:linear-gradient(135deg,#99f6e4,#14b8a6)}
.c-indigo{background:linear-gradient(135deg,#c7d2fe,#6366f1)}

/* FEATURES */
.features{
  background-color:#fffef5;
  border-top:3px solid var(--ink);
  border-bottom:3px solid var(--ink);
  position:relative;
}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feature{
  text-align:center;padding:36px 24px 24px;background:var(--bg);
  border:var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
  position:relative;
}
.feature-icon{
  width:60px;height:60px;margin:0 auto 14px;background:var(--brand-soft);
  border:var(--border);border-radius:16px;
  display:flex;align-items:center;justify-content:center;font-size:26px;
}
.feature h3{font-size:18px;margin-bottom:6px}
.feature p{font-size:14px;color:#64748b}

/* CTA */
.cta-card{
  background:var(--ink);color:#fff;padding:48px 32px;text-align:center;
  border:3px solid var(--ink);border-radius:var(--radius-lg);
  box-shadow:6px 6px 0 rgba(30,41,59,.3);
}
.cta-card h2{font-size:28px;margin-bottom:8px;color:var(--brand)}
.cta-card p{color:#cbd5e1;max-width:460px;margin:0 auto 24px;font-size:15px}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn-primary{
  background:var(--brand);color:#fff;padding:12px 30px;
  border:2.5px solid var(--ink);border-radius:12px;
  font-family:'Patrick Hand';font-weight:500;font-size:16px;box-shadow:3px 3px 0 var(--ink);
}
.btn-primary:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.btn-primary:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn-ghost{
  background:transparent;color:#fff;padding:12px 30px;
  border:2.5px dashed #fff;border-radius:12px;
  font-family:'Patrick Hand';font-weight:500;font-size:16px;
}

/* FAQ */
.faq-wrap{max-width:680px;margin:0 auto}
.faq-item{margin-bottom:12px}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  padding:16px 20px;background:var(--surface);font-family:'Patrick Hand';font-weight:500;
  font-size:16px;text-align:left;border:var(--border);border-radius:12px;
  box-shadow:2.5px 2.5px 0 var(--ink);
}
.faq-q:hover{background:var(--brand-soft)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s}
.faq-item.open .faq-a{max-height:220px}
.faq-a-inner{padding:16px 20px;font-size:14px;color:#64748b}
.faq-plus{font-size:20px;transition:transform .2s}
.faq-item.open .faq-plus{transform:rotate(45deg)}

/* FOOTER */
.site-footer{background:var(--ink);color:#94a3b8;margin-top:64px;padding:48px 0 24px;border-top:3px solid var(--ink)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:32px}
.footer-brand h3{color:var(--brand);font-size:18px;margin-bottom:8px;font-family:'Patrick Hand'}
.footer-brand p{font-size:13px;line-height:1.6;max-width:280px}
.footer-col h4{color:#fff;font-size:14px;margin-bottom:10px;font-family:'Patrick Hand'}
.footer-col a{display:block;font-size:13px;padding:3px 0;color:#94a3b8}
.footer-col a:hover{color:var(--brand)}
.footer-bottom{border-top:2px dashed #475569;padding-top:20px;font-size:12px;text-align:center}

/* BOTTOM NAV */
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:100;background:var(--surface);border-top:3px solid var(--ink);padding:6px 16px calc(6px + env(safe-area-inset-bottom))}
.bn-inner{display:flex;justify-content:space-around}
.bn-inner a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 12px;font-size:11px;font-weight:800;color:#94a3b8}
.bn-inner a.active,.bn-inner a:hover{color:var(--brand)}

/* LEVEL LIST */
.breadcrumb{display:flex;gap:6px;font-size:14px;font-weight:800;margin-bottom:16px;color:#64748b}
.breadcrumb a{color:var(--brand-dark)}
.page-head{margin-bottom:24px}
.page-head h1{font-size:30px;margin-bottom:4px}
.page-head p{color:#64748b;font-size:15px}
.toolbar{margin-bottom:24px}
.toolbar input{
  padding:10px 16px;border:var(--border);border-radius:10px;
  font-size:14px;outline:none;width:280px;background:var(--surface);box-shadow:2.5px 2.5px 0 var(--ink);
}
.toolbar input:focus{border-color:var(--brand)}
.level-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.level-card{
  background:var(--surface);overflow:hidden;cursor:pointer;
  border:var(--border);border-radius:var(--radius);box-shadow:2.5px 2.5px 0 var(--ink);
  transition:all .1s;
}
.level-card:hover{transform:translate(-2px,-2px);box-shadow:4.5px 4.5px 0 var(--ink)}
.level-thumb{
  aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
  font-family:'Patrick Hand';font-size:26px;font-weight:700;color:#fff;
  border-bottom:3px solid var(--ink);
}
.level-body{padding:10px 14px}
.level-body .ltag{font-size:11px;font-weight:800;color:var(--brand-dark)}
.level-body h4{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'Nunito'}

.pagination{display:flex;gap:8px;justify-content:center;margin-top:32px;flex-wrap:wrap}
.page-btn{
  min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border:2.5px solid var(--ink);background:var(--surface);
  font-weight:800;font-size:13px;cursor:pointer;padding:0 12px;border-radius:10px;
  box-shadow:2px 2px 0 var(--ink);
}
.page-btn:hover{background:var(--brand-soft)}
.page-btn.active{background:var(--brand);color:#fff}
.page-btn:disabled{opacity:.3;cursor:default;box-shadow:none}

/* DETAIL */
.detail-grid{display:grid;grid-template-columns:2fr 1fr;gap:24px}
.video-wrap{
  overflow:hidden;background:#000;border:3px solid var(--ink);
  border-radius:var(--radius);box-shadow:5px 5px 0 var(--ink);
}
.video-wrap iframe{width:100%;aspect-ratio:16/9;border:none;display:block}
.detail-title{padding:16px 20px;background:var(--surface);border-top:3px solid var(--ink)}
.detail-title h1{font-size:20px}
.share-row{display:flex;gap:8px;justify-content:center;padding:12px}
.share-btn{
  padding:8px 16px;border:2px solid var(--ink);border-radius:10px;
  font-weight:800;font-size:12px;cursor:pointer;background:var(--brand-soft);
  box-shadow:2px 2px 0 var(--ink);
}
.walk-card{
  background:var(--surface);padding:22px;margin-top:16px;
  border:var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
}
.walk-card h2{font-size:18px;margin-bottom:10px}
.tip{
  background:var(--brand-soft);border:2.5px solid var(--ink);border-radius:10px;
  padding:12px 14px;font-size:14px;margin:10px 0;
}
.walk-card ul{padding-left:20px;margin:8px 0}
.walk-card li{font-size:14px;color:#64748b;margin-bottom:4px}
.sidebar{display:flex;flex-direction:column;gap:16px}
.side-card{
  background:var(--surface);padding:18px;border:var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);
}
.side-card h3{font-size:15px;margin-bottom:10px}
.qj-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.qj-btn{
  aspect-ratio:1;border:2px solid var(--ink);background:var(--bg);
  font-weight:800;font-size:17px;cursor:pointer;border-radius:6px;
  display:flex;align-items:center;justify-content:center;line-height:1;
}
.qj-btn:hover{background:var(--brand-soft)}
.qj-btn.current{background:var(--brand);color:#fff}
.popular-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}

@media(max-width:860px){
  .main-nav{display:none}.menu-toggle{display:block}
  .main-nav.mobile-open{display:flex;flex-direction:column;position:absolute;top:64px;left:0;right:0;background:var(--surface);padding:16px;border-bottom:3px solid var(--ink)}
  .bottom-nav{display:block}.features-grid{grid-template-columns:1fr}
  .detail-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}
  .popular-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){body{padding-bottom:60px}}
@media(max-width:480px){
  .game-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr}
  .hero{padding:40px 0 32px}
  .search-bar{flex-wrap:wrap;border-radius:14px;box-shadow:4px 4px 0 var(--ink)}
  .search-game{border-right:none;border-bottom:3px solid var(--ink);width:100%;padding:12px 16px}
  .search-level{padding:12px}
  .search-btn{border-left:none;width:100%;padding:14px}
}

/* hand-drawn wobble filter */
.game-card,.level-card,.feature,.walk-card,.side-card,.search-bar,.cat-chip,.faq-q,.btn-primary,.hero-badge,.section-eyebrow,.game-dropdown,.share-btn,.page-btn,.qj-btn,.brand-logo,.video-wrap{filter:url(#hand-drawn)}
.cta-card{filter:url(#hand-drawn-strong)}

/* PAGE HERO per-game color */
.page-hero{padding:48px 0 40px;margin-bottom:32px;border-bottom:3px solid var(--ink)}
.page-hero .breadcrumb{margin-bottom:14px}
.page-hero h1{font-size:clamp(26px,3.5vw,38px);margin-bottom:8px}
.page-hero p{color:#475569;font-size:16px;font-weight:600}
.ph-amber{background:#fef3c7}
.ph-pink{background:#fce7f3}
.ph-blue{background:#dbeafe}
.ph-green{background:#dcfce7}
.ph-purple{background:#ede9fe}
.ph-red{background:#fee2e2}
.ph-teal{background:#ccfbf1}
.ph-indigo{background:#e0e7ff}