/* ==========================================================================
   DoodleWood Games — doodlewoodgames.com
   ========================================================================== */

/* ── SELF HOSTED FONTS ─────────────────────────────────────────────────── */
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/Baloo2-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:800;font-display:swap;
  src:url('../fonts/Baloo2-800.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/Nunito-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/Nunito-600.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/Nunito-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ── TOKENS ────────────────────────────────────────────────────────────── */
:root{
  --wood-0:#170d05; --wood-1:#241505; --wood-2:#34200a; --wood-3:#4a2f11;
  --wood-4:#6b4423; --seam:rgba(0,0,0,.55);
  --gold:#e0a02c; --gold-lt:#f4cc5e; --gold-dk:#8a5a12;
  --leaf:#8fd420; --leaf-dk:#4a7a12; --leaf-lt:#b6ec55;
  --cream:#f0e2c4; --text:#d9c49a; --dim:#a08a63;
  --display:'Baloo 2','Trebuchet MS',cursive;
  --body:'Nunito','Segoe UI',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--text);background:var(--wood-0);
  overflow-x:hidden;line-height:1.65;-webkit-font-smoothing:antialiased;
  cursor:default;-webkit-user-select:none;user-select:none}
a{cursor:pointer}
/* the email address stays selectable so visitors can copy it */
.pick{-webkit-user-select:text;user-select:text;cursor:text}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--gold-lt);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;z-index:999;padding:12px 20px;
  background:var(--gold);color:var(--wood-1);font-family:var(--display);font-weight:800;border-radius:0 0 10px 0}
.skip:focus{left:0}

/* ── WOOD PLANK WORLD ──────────────────────────────────────────────────── */
.bg{position:fixed;inset:0;z-index:0}
.planks{position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg,transparent 0 158px,var(--seam) 158px 162px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.014) 0 7px,transparent 7px 19px),
    linear-gradient(100deg,var(--wood-1),var(--wood-2) 45%,var(--wood-1))}
.lantern{position:absolute;width:60vw;height:60vh;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(240,192,74,.13),transparent 65%)}
.lan-l{top:-14vh;left:-12vw}.lan-r{top:-10vh;right:-14vw}
.canopy{position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 30%,transparent 35%,rgba(0,0,0,.72) 100%)}
.fly{position:fixed;width:3px;height:3px;border-radius:50%;background:var(--gold-lt);
  box-shadow:0 0 8px 2px rgba(240,192,74,.5);z-index:1;pointer-events:none}
@keyframes drift{0%{transform:translate(0,0);opacity:0}
  25%{opacity:.9}50%{transform:translate(40px,-60px);opacity:.5}
  75%{opacity:.8}100%{transform:translate(-20px,-120px);opacity:0}}

/* ── CARVED TYPE ───────────────────────────────────────────────────────── */
.carved{font-family:var(--display);font-weight:800;color:var(--gold-lt);
  text-shadow:0 1px 0 var(--gold-dk),0 2px 0 #5e3c0c,0 3px 0 #3d2708,0 5px 8px rgba(0,0,0,.7);
  letter-spacing:.01em}

/* ── WOOD PANEL ────────────────────────────────────────────────────────── */
.panel{position:relative;border-radius:16px;
  background:linear-gradient(170deg,var(--wood-3),var(--wood-2) 60%,#2a1a08);
  box-shadow:
    inset 0 2px 0 rgba(255,214,140,.16),
    inset 0 -3px 0 rgba(0,0,0,.5),
    inset 3px 0 0 rgba(0,0,0,.22),
    inset -3px 0 0 rgba(0,0,0,.22),
    0 10px 30px rgba(0,0,0,.6);
  border:2px solid rgba(120,80,30,.5)}
.panel::after{content:'';position:absolute;inset:7px;border-radius:10px;
  border:1px solid rgba(255,214,140,.09);pointer-events:none}
.bolt{position:absolute;width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--gold-lt),var(--gold-dk) 70%,#3d2708);
  box-shadow:0 1px 2px rgba(0,0,0,.7)}
.bolt.tl{top:9px;left:9px}.bolt.tr{top:9px;right:9px}
.bolt.bl{bottom:9px;left:9px}.bolt.br{bottom:9px;right:9px}

/* ── NAV ───────────────────────────────────────────────────────────────── */
nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:100;
  display:flex;align-items:center;gap:4px;padding:7px 10px;border-radius:999px;
  background:linear-gradient(180deg,rgba(74,47,17,.96),rgba(36,21,5,.97));
  border:1px solid rgba(160,110,40,.45);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,214,140,.18),0 8px 24px rgba(0,0,0,.6)}
.nb{font-family:var(--display);font-weight:700;font-size:14px;
  padding:6px 16px;border-radius:999px;color:var(--dim);text-decoration:none;transition:.2s}
.nb:hover{color:var(--gold-lt);background:rgba(240,192,74,.1)}
.nb.on{color:var(--wood-1);background:linear-gradient(180deg,var(--gold-lt),var(--gold));
  box-shadow:0 2px 6px rgba(0,0,0,.4)}
.nb-hire{color:var(--leaf-lt)}
.nb-hire.on,.nb-hire:hover{color:#1c3308;background:linear-gradient(180deg,var(--leaf-lt),var(--leaf))}
@media(max-width:520px){.nb{padding:6px 11px;font-size:13px}nav{gap:2px;padding:6px 8px}}

/* ── LAYOUT ────────────────────────────────────────────────────────────── */
.wrap{position:relative;z-index:10;max-width:1120px;margin:0 auto;padding:0 20px}
section{padding:70px 0 30px}
@media(max-width:640px){section{padding:52px 0 24px}}

/* ── HERO ──────────────────────────────────────────────────────────────── */
#top{padding-top:120px}
.studio-mark{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:26px}
.leafpair{display:block;width:44px;height:26px}
.dw-name{font-size:clamp(38px,8vw,84px);line-height:.95}
.dw-sub{display:flex;align-items:center;gap:14px;margin-top:2px}
.dw-sub .ln{width:52px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--leaf-dk),var(--leaf))}
.dw-sub .ln.r{background:linear-gradient(270deg,transparent,var(--leaf-dk),var(--leaf))}
.dw-games{font-family:var(--display);font-weight:700;font-size:clamp(15px,2.6vw,26px);
  letter-spacing:.34em;color:var(--leaf);text-shadow:0 2px 0 #2d5016,0 3px 6px rgba(0,0,0,.6)}
.hero-panel{padding:34px 34px 30px;text-align:center;max-width:800px;margin:0 auto}
.hero-kicker{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.22em;
  color:var(--leaf);text-transform:uppercase;margin-bottom:10px}
.hero-h1{font-size:clamp(26px,4.6vw,44px);line-height:1.15;margin-bottom:12px}
.hero-p{font-size:17px;color:var(--dim);max-width:560px;margin:0 auto 24px}
.btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{font-family:var(--display);font-weight:800;font-size:15px;text-decoration:none;
  padding:12px 28px;border-radius:11px;transition:transform .16s,box-shadow .16s;display:inline-block}
.btn-grn{color:#1c3308;background:linear-gradient(180deg,var(--leaf-lt),var(--leaf) 55%,var(--leaf-dk));
  box-shadow:0 4px 0 #2d5016,0 8px 18px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-grn:hover{transform:translateY(-2px);
  box-shadow:0 6px 0 #2d5016,0 12px 24px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-wd{color:var(--gold-lt);background:linear-gradient(180deg,var(--wood-4),var(--wood-3));
  box-shadow:0 4px 0 #241505,0 8px 18px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,214,140,.2)}
.btn-wd:hover{transform:translateY(-2px)}

/* ── FOUNDER CARD ──────────────────────────────────────────────────────── */
.founder{display:flex;align-items:center;gap:22px;padding:26px 28px;flex-wrap:wrap}
.f-photo{width:104px;height:104px;border-radius:20px;flex-shrink:0;
  display:block;overflow:hidden;position:relative;
  border:2px solid rgba(160,110,40,.55);
  box-shadow:inset 0 2px 0 rgba(255,214,140,.2),0 6px 18px rgba(0,0,0,.55)}
.f-photo img{width:100%;height:100%;object-fit:cover}
/* carved inner lip, matches the panel bevel */
.f-photo::after{content:'';position:absolute;inset:0;border-radius:18px;pointer-events:none;
  box-shadow:inset 0 2px 3px rgba(0,0,0,.5),inset 0 -1px 0 rgba(255,214,140,.14)}
.f-name{font-family:var(--display);font-weight:800;font-size:26px;color:var(--gold-lt);
  line-height:1.15;text-shadow:0 2px 0 var(--gold-dk),0 3px 6px rgba(0,0,0,.6)}
.f-role{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--leaf);margin-top:3px}
.f-note{font-size:15.5px;color:var(--dim);margin-top:7px;max-width:440px}

/* ── HANGING SECTION SIGN ──────────────────────────────────────────────── */
.sign-wrap{display:flex;flex-direction:column;align-items:center;margin-bottom:34px}
.chains{display:flex;justify-content:space-between;width:190px;height:22px}
.chain{width:3px;background:repeating-linear-gradient(180deg,var(--gold-dk) 0 4px,transparent 4px 7px)}
.sign{padding:13px 40px;border-radius:12px;text-align:center;
  background:linear-gradient(170deg,var(--wood-4),var(--wood-2));
  border:2px solid rgba(160,110,40,.5);
  box-shadow:inset 0 2px 0 rgba(255,214,140,.18),0 8px 22px rgba(0,0,0,.6)}
.sign h2{font-size:clamp(21px,3.4vw,30px);line-height:1.1}
.sign p{font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);font-weight:700;margin-top:2px}

/* ── GAME CRATES ───────────────────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px}
.crate{overflow:hidden;transition:transform .25s}
.crate:hover{transform:translateY(-6px)}
.shot{position:relative;margin:12px 12px 0;border-radius:9px;overflow:hidden;aspect-ratio:2/1;
  background:#0d0803;box-shadow:inset 0 0 0 2px rgba(0,0,0,.55),0 3px 10px rgba(0,0,0,.5)}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .4s;filter:saturate(1.05)}
.crate:hover .shot img{transform:scale(1.05)}
.shot::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(23,13,5,.85),transparent 55%)}
.chip{position:absolute;z-index:2;font-family:var(--display);font-weight:700;font-size:11px;
  padding:4px 10px;border-radius:7px;letter-spacing:.05em}
.chip-live{top:10px;left:10px;color:#1c3308;background:linear-gradient(180deg,var(--leaf-lt),var(--leaf));
  box-shadow:0 2px 6px rgba(0,0,0,.5);display:flex;align-items:center;gap:5px}
.dot{width:6px;height:6px;border-radius:50%;background:#1c3308;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.chip-beta{top:10px;left:10px;color:#2a1a02;background:linear-gradient(180deg,var(--gold-lt),var(--gold));
  box-shadow:0 2px 6px rgba(0,0,0,.5);display:flex;align-items:center;gap:5px}
.chip-beta .dot{background:#2a1a02}
.chip-store{top:10px;left:10px;color:#2a1a02;background:linear-gradient(180deg,var(--gold-lt),var(--gold));
  box-shadow:0 2px 6px rgba(0,0,0,.5)}
.chip-plat{top:10px;right:10px;color:var(--gold-lt);background:rgba(23,13,5,.85);
  border:1px solid rgba(160,110,40,.5)}
.crate-body{padding:14px 20px 22px}
.crate h3{font-family:var(--display);font-weight:800;font-size:20px;color:var(--cream);line-height:1.2}
.role{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--leaf);margin:3px 0 8px}
.crate p{font-size:15px;color:var(--dim);margin-bottom:12px}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.tag{font-size:11px;font-weight:700;letter-spacing:.05em;padding:3px 9px;border-radius:6px;
  color:var(--dim);background:rgba(0,0,0,.3);border:1px solid rgba(160,110,40,.28)}
.play{font-family:var(--display);font-weight:800;font-size:14px;color:var(--leaf-lt);
  text-decoration:none;display:inline-flex;align-items:center;gap:7px;transition:gap .2s}
.play:hover{gap:12px;color:#d4f78a}

/* ── STUDIO ────────────────────────────────────────────────────────────── */
.two{display:grid;grid-template-columns:1.15fr 1fr;gap:22px}
@media(max-width:820px){.two{grid-template-columns:1fr}}
.pad{padding:26px 28px}
.pad h3{font-family:var(--display);font-weight:800;font-size:21px;color:var(--cream);margin-bottom:12px}
.pad p{font-size:16px;color:var(--dim);margin-bottom:12px}
.skills{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.sk{font-family:var(--display);font-weight:700;font-size:13px;padding:6px 13px;border-radius:8px;
  color:var(--gold-lt);background:linear-gradient(180deg,rgba(107,68,35,.75),rgba(52,32,10,.8));
  border:1px solid rgba(160,110,40,.4);box-shadow:inset 0 1px 0 rgba(255,214,140,.12)}

/* ── CONTACT ───────────────────────────────────────────────────────────── */
.links{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:4px}
@media(max-width:640px){.links{grid-template-columns:1fr}}
.lnk{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:11px;text-decoration:none;
  background:linear-gradient(170deg,rgba(107,68,35,.5),rgba(36,21,5,.6));
  border:1px solid rgba(160,110,40,.3);transition:.2s}
.lnk:hover{border-color:var(--gold);transform:translateX(4px);
  background:linear-gradient(170deg,rgba(107,68,35,.8),rgba(52,32,10,.8))}
.lnk-ic{width:36px;height:36px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:var(--gold-lt);
  background:linear-gradient(180deg,var(--wood-4),var(--wood-2));
  border:1px solid rgba(160,110,40,.4);box-shadow:inset 0 1px 0 rgba(255,214,140,.15);
  transition:color .2s,border-color .2s}
.lnk-ic svg{width:19px;height:19px;fill:currentColor;display:block;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.55))}
.lnk:hover .lnk-ic{color:#ffe08a;border-color:rgba(224,160,44,.7)}
.lnk-t{font-family:var(--display);font-weight:700;font-size:14px;color:var(--cream);letter-spacing:.03em}
.lnk-v{font-size:13px;color:var(--dim)}

/* ── FOOTER ────────────────────────────────────────────────────────────── */
footer{position:relative;z-index:10;text-align:center;padding:34px 20px 40px;margin-top:30px;
  border-top:1px solid rgba(160,110,40,.2)}
.fm{font-family:var(--display);font-weight:800;font-size:16px;color:var(--gold);letter-spacing:.06em}
.fs{font-size:13px;color:#7a6547;margin-top:4px}

/* ── MOTION PREFERENCE ─────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .fly{display:none}
}