/* ===== Uprooted / Duggy — brand system =====
   Palette: green (leafy field), tan (potato skin), brown (earthy soil), sunflower yellow (accent)
   Type: Baloo 2 (chunky, rounded, toy-like display) + Nunito Sans (warm body copy)
*/
:root{
  --green-deep:#2f4d2a;
  --green:#4c7a3a;
  --green-light:#8fbf6a;
  --brown-deep:#3c2415;
  --brown:#6b4226;
  --brown-light:#9c6b42;
  --tan:#e8d3a4;
  --tan-light:#f6ecd2;
  --cream:#fdf8ec;
  --yellow:#f6b93b;
  --yellow-deep:#e0930f;
  --ink:#2c2114;
  --white:#fffdf7;
  --radius:22px;
  --shadow: 0 10px 30px rgba(60,36,21,.18);
  --shadow-sm: 0 4px 14px rgba(60,36,21,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:var(--cream);
  font-family:'Nunito Sans', system-ui, sans-serif;
  font-size:17px; line-height:1.6;
}
h1,h2,h3,h4{ font-family:'Baloo 2', system-ui, sans-serif; font-weight:700; color:var(--brown-deep); margin:0 0 .4em; line-height:1.15;}
h1{font-size:clamp(2.2rem,5vw,3.6rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h3{font-size:1.35rem}
p{margin:0 0 1em}
a{color:var(--green-deep); text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px}
ul{padding:0; margin:0; list-style:none}
button{font-family:inherit}

.video {
	border-radius: 24px;
    border: 3px solid var(--brown);
    box-shadow: var(--shadow);
    background: #000000;
}

.verifybtn {
    color: #ffffff;
    
    border: 2px solid #000;
    border-radius: 5px;
    padding: 10px;
    background: #976c5d;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding:14px 28px; border-radius:999px; font-weight:800; font-family:'Baloo 2',sans-serif;
  font-size:1.05rem; border:3px solid var(--brown-deep); cursor:pointer;
  background:var(--yellow); color:var(--brown-deep); box-shadow:var(--shadow-sm);
  transition:transform .15s ease, box-shadow .15s ease; text-align:center;
	display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    padding: 14px 28px;
    border-radius: 999px;
    font-weight: 800;
    font-family: 'Baloo 2', sans-serif;
    font-size: 1.05rem;
    border: 3px solid var(--brown-deep);
    cursor: pointer;
    background: var(--yellow);
    color: var(--brown-deep);
    box-shadow: var(--shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease;
    text-align: center;
    width: 100%;
    flex-flow: wrap;
    margin: 10px auto;
}
.btn:hover{ transform:translateY(-3px) rotate(-1deg); box-shadow:var(--shadow) }
.btn-green{ background:var(--green); color:var(--white); border-color:var(--green-deep) }
.btn-outline{ background:transparent; color:var(--brown-deep) }
.btn-sm{ padding:9px 18px; font-size:.9rem; border-width:2px }
.btn-danger{ background:#c0503a; color:#fff; border-color:#7a2f1f }

/* Topbar + header */
.topbar{ background:var(--brown-deep); color:var(--tan-light); font-size:.85rem; padding:6px 0 }
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.topbar-social{ display:flex; gap:10px; align-items:center; }
.topbar-social a{ color:var(--tan-light); display:flex }
.topbar-social a:hover{ color:var(--yellow) }
.site-header{ background:var(--cream); box-shadow:0 6px 18px rgba(60,36,21,.16); position:sticky; top:0; z-index:50 }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 24px }
.brand{ display:flex; flex-direction:column; line-height:1 }
.brand-mark{ font-family:'Baloo 2',sans-serif; font-weight:800; font-size:1.7rem; color:var(--green-deep) }
.brand-sub{ font-size:.72rem; color:var(--brown); font-weight:700; letter-spacing:.06em; text-transform:uppercase }
.main-nav{ display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end }
.main-nav a{ font-weight:700; padding:8px 12px; border-radius:10px; color:var(--brown-deep); font-size:.92rem }
.main-nav a:hover, .main-nav a.active{ background:var(--tan); color:var(--green-deep) }
.nav-toggle{ display:none; background:none; border:none; flex-direction:column; gap:5px; padding:6px }
.nav-toggle span{ width:26px; height:3px; background:var(--brown-deep); border-radius:2px }

/* Hero */
.hero{ position:relative; background:linear-gradient(180deg, var(--tan-light), var(--tan) 70%); overflow:hidden }
.hero-img-wrap{ width:100%; }
.hero-img-wrap img{ width:100%; height:auto; object-fit:cover; }
.hero-caption{ text-align:center; padding:18px 24px 6px }

.blindbox-panel{
  background:var(--white); border:3px solid var(--brown); border-radius:var(--radius);
  box-shadow:var(--shadow); max-width:880px; margin:-40px auto 60px; padding:34px 38px; position:relative; z-index:2;
}


.blindbox-panel h2{ align-items:center; gap:10px }
.blindbox-panel .badge{
  background:var(--yellow); color:var(--brown-deep); font-family:'Baloo 2',sans-serif; font-weight:800;
  font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; padding:4px 10px; border-radius:999px; border:2px solid var(--brown-deep);
}

/* Sections */
section{ padding:64px 0 }
.section-alt{ background:var(--tan-light) }
.section-green{ background:var(--green-deep); color:var(--tan-light) }
.section-green h2, .section-green h3{ color:var(--yellow) }
.section-head{ text-align:center; max-width:950px; margin:0 auto 40px }
.eyebrow{ font-family:'Baloo 2',sans-serif; text-transform:uppercase; letter-spacing:.1em; font-size:.8rem; color:var(--green); font-weight:700 }

/* Tabs (Editions) */
.tabs{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:36px }
.tab-btn{
  padding:10px 22px; border-radius:999px; border:3px solid var(--brown-deep); background:var(--white);
  font-family:'Baloo 2',sans-serif; font-weight:700; cursor:pointer; color:var(--brown-deep);
}
.tab-btn.active{ background:var(--green); color:var(--white) }
.tab-panel{ display:none }
.tab-panel.active{ display:block }

.figurine-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:22px }
.figurine-card{
  background:var(--white); border:3px solid var(--brown); border-radius:20px; padding:14px; text-align:center;
  box-shadow:var(--shadow-sm); transition:transform .2s;
}
.figurine-card:hover{ transform:translateY(-6px) rotate(-1deg) }
.figurine-card img{ border-radius:14px; aspect-ratio:1; object-fit:contain; padding: 10px; margin-bottom:10px; background:var(--tan-light) }
.figurine-card h4{ margin:0 0 4px; font-size:1rem }
.rarity{ font-size:.72rem; font-weight:800; text-transform:uppercase; padding:3px 10px; border-radius:999px; display:inline-block }
.rarity-Common{ background:var(--tan); color:var(--brown-deep) }
.rarity-Rare{ background:#cfe3c2; color:var(--green-deep) }
.rarity-Ultra-Rare{ background:#d9c4f2; color:#4b2e73 }
.rarity-Hyper-Rare{ background:#f7c4c4; color:#7a1f1f }
.rarity-Mystery{ background:var(--brown-deep); color:var(--yellow) }

/* Store / map */
.store-layout{ display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:start }
#storeMap{ height:480px; border-radius:var(--radius); border:3px solid var(--brown); overflow:hidden; background:var(--tan) }
.store-search{ display:flex; gap:10px; margin-bottom:18px;flex-wrap: wrap; }
.store-search input{ flex:1 }
.store-list{ max-height:480px; overflow:auto; display:flex; flex-direction:column; gap:14px; padding-right:6px }
.store-card{ background:var(--white); border:2px solid var(--tan); border-radius:16px; padding:14px; display:flex; gap:12px }
.store-card img{ width:70px; height:70px; object-fit:contain; border-radius:10px; flex-shrink:0 }
.store-card h4{ margin:0 0 2px; font-size:1rem }
.store-card p{ margin:0; font-size:.85rem; color:var(--brown) }

.product-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:22px; margin-top:20px }
.product-card{ background:var(--white); border:3px solid var(--brown); border-radius:20px; padding:16px; text-align:center; box-shadow:var(--shadow-sm) }
.product-card img{ border-radius:14px; aspect-ratio:1; object-fit:contain; margin-bottom:10px }
.price{ font-family:'Baloo 2',sans-serif; font-weight:800; color:var(--green-deep); font-size:1.2rem }

/* Forms */
label{ font-weight:700; display:block; margin-bottom:6px; color:var(--brown-deep) }
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=zip], input[type=password], input[type=file], textarea, select{
  width:100%; padding:12px 14px; border:2px solid var(--tan); border-radius:12px; font-family:inherit; font-size:1rem; background:var(--white);
}
input:focus, textarea:focus, select:focus{ outline:none; border-color:var(--green) }
.field{ margin-bottom:18px }
.form-card{ background:var(--white); border:3px solid var(--brown); border-radius:var(--radius); padding:34px; box-shadow:var(--shadow); max-width:640px; margin:0 auto }
.help-icon{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:var(--brown); color:#fff; font-size:.75rem; font-weight:800; cursor:help; margin-left:6px; position:relative }
.help-icon .tip{ display:none; position:absolute; bottom:130%; left:50%; transform:translateX(-50%); background:var(--brown-deep); color:#fff; font-weight:500; font-size:.8rem; padding:10px 12px; border-radius:10px; width:230px; z-index:10 }
.help-icon:hover .tip{ display:block }

/* FAQ accordion */
.faq-item{ background:var(--white); border:2px solid var(--tan); border-radius:16px; margin-bottom:14px; overflow:hidden }
.faq-q{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 22px; cursor:pointer; font-family:'Baloo 2',sans-serif; font-weight:700; color:var(--brown-deep) }
.faq-q .plus{ font-size:1.4rem; transition:transform .2s; color:var(--green) }
.faq-item.open .faq-q .plus{ transform:rotate(45deg) }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; padding:0 22px }
.faq-item.open .faq-a{ max-height:600px; padding-bottom:20px }
.faq-a img{ border-radius:12px; margin-top:10px; max-width:200px }

/* Games */
.game-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:26px }
.game-card{ background:var(--white); border:3px solid var(--brown); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-sm) }
.game-card img{ aspect-ratio:4/3; object-fit:cover }
.game-card .body{ padding:18px }
.coloring-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:20px }
.coloring-card{ background:var(--white); border:2px solid var(--tan); border-radius:16px; padding:12px; text-align:center }
.coloring-card img{ border-radius:10px; margin-bottom:10px }

/* Steps list (share a photo) */
.steps{ counter-reset:step; display:grid; gap:18px; max-width:640px; margin:0 auto }
.step{ display:flex; gap:16px; align-items:center; background:var(--white); border:2px solid var(--tan); border-radius:16px; padding:18px 20px }
.step::before{ counter-increment:step; content:counter(step); font-family:'Baloo 2',sans-serif; font-weight:800; background:var(--yellow); color:var(--brown-deep); width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; border:2px solid var(--brown-deep) }

/* Verify page */
.verify-alert{ border-radius:16px; padding:20px 24px; font-weight:700; margin-bottom:20px; display:none }
.verify-alert.fail{ background:#fbe1dc; color:#7a1f1f; border:2px solid #c0503a }
.verify-alert.success{ background:#e2f0d9; color:var(--green-deep); border:2px solid var(--green) }
.progress-wrap{ display:none; margin:24px 0; text-align:center }
.progress-bar-bg{ background:var(--tan); border-radius:999px; height:20px; overflow:hidden; border:2px solid var(--brown) }
.progress-bar-fill{ height:100%; background:linear-gradient(90deg,var(--green),var(--yellow)); width:0% }
.confetti-piece{ position:fixed; top:-20px; z-index:9999; pointer-events:none; border-radius:2px }

/* Modal */
.modal-overlay{ display:none; position:fixed; inset:0; background:rgba(44,33,20,.55); z-index:1000; align-items:center; justify-content:center; padding:20px }
.modal-overlay.open{ display:flex }
.modal-box{ background:var(--white); border-radius:var(--radius); border:3px solid var(--brown); max-width:520px; width:100%; padding:30px; max-height:90vh; overflow:auto }

/* Footer */
.site-footer{ background:var(--brown-deep); color:var(--tan-light); margin-top:40px }
.footer-inner{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; padding:44px 24px 24px }
.footer-brand p{ color:#fff}
.footer-social a{ color:var(--tan-light) }
.footer-links{ display:flex; flex-direction:column; gap:8px }
.footer-links a{ color:var(--tan-light); font-weight:700 }
.footer-links a:hover{ color:var(--yellow) }
.footer-legal{ border-top:1px solid rgba(255,255,255,.15); padding:16px 24px; font-size:.82rem; color:var(--tan) }
.footer-legal a{ color:var(--yellow); font-weight:700 }



/* Utility */
.text-center{text-align:center}
.mt-0{margin-top:0}
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center }
.alert-info{ background:#eef4e6; border:2px solid var(--green); border-radius:14px; padding:14px 18px; font-weight:600 }

@media (max-width: 900px){
  .store-layout, .grid-2{ grid-template-columns:1fr }
  .nav-toggle{ display:flex }
  .main-nav{ display:none; flex-direction:column; width:100%; background:var(--cream); position:absolute; top:100%; left:0; padding:14px 24px; box-shadow:0 6px 18px rgba(60,36,21,.16) }
  .main-nav.open{ display:flex }
  .header-inner{ position:relative; flex-wrap:wrap }
}

/* ===== Round 2 additions ===== */
.brand-logo{ height:46px; width:auto; display:block }
.footer-logo-chip{ border-radius:16px; padding:8px 14px; display:inline-block; margin-bottom:10px }
.footer-logo-chip img {
    height: 60px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
}

.section-head-flex{ display:flex; align-items:center; justify-content:center; gap:22px; max-width:950px; margin:0 auto 40px; flex-wrap:wrap; text-align:left }
.section-head-flex .shf-text{ text-align:left; flex:1; min-width:240px }
.section-head-flex .shf-img{ flex-shrink:0 }
/*.section-head-flex .shf-img img{ width:170px; height:170px; object-fit:cover; border-radius:0; border:4px solid var(--white); box-shadow:var(--shadow-sm); background:var(--tan-light) }*/
.section-head-flex .shf-img img{ height:250px; }*/
@media (max-width:640px){ .section-head-flex{ flex-direction:column; text-align:center } .section-head-flex .shf-text{ text-align:center } }

/* Sold out ribbon */
.product-card{ position:relative; overflow:hidden }
.sold-out-ribbon{
  position:absolute; top:16px; right:-38px; background:#c0503a; color:#fff; font-family:'Baloo 2',sans-serif; font-weight:800;
  font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; padding:6px 46px; transform:rotate(45deg); box-shadow:0 3px 8px rgba(0,0,0,.25); z-index:2;
}
.product-card.is-sold-out img{ filter:grayscale(45%) brightness(.85) }
.price-shipping{ font-size:.78rem; color:var(--brown); margin-top:-6px }

/* Home store showcase */
.home-store-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:22px; margin-top:24px }

/* Blind-box panel floated onto the hero image, right side, under Duggy */
.hero{ position:relative }
.blindbox-panel-hero {
    position: absolute;
    bottom: 5%;
    right: 5%;
    width: 60%;
    min-width: 400px;
    max-width: 700px;
    margin: 0;
    padding: 20px 22px;
    z-index: 3;
}
.blindbox-panel-hero h2{ font-size:1.3rem }
.blindbox-panel-hero p{ font-size:.92rem; margin-bottom:.8em }
.blindbox-panel-hero .btn{ padding:10px 20px; font-size:.92rem }
@media (max-width:900px){
  .blindbox-panel-hero{
    position:static; width:92%; max-width:none; margin:20px auto 50px; padding:28px 30px;
  }
}