/* ============================================================
   VBunny Go — "Sketchbook" draft design system
   Hand-drawn sketchbook aesthetic. Every graphic is a pencil-sketch
   slot that drops in when art lands; until then an elegant pencil
   placeholder stands in (looks intentional, like a wireframe).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Caveat:wght@500;600;700&display=swap');

:root{
  --paper:#FBF7EF;        /* sketchbook cream */
  --paper-2:#F3ECDD;      /* slightly deeper cream */
  --ink:#2B2B33;          /* graphite */
  --ink-soft:#5b5b66;
  --line:#3a3a44;         /* pencil line */
  --purple:#8B43E6;
  --pink:#E86984;
  --yellow:#F0C74A;
  --accent:var(--purple);
  --hand:'Caveat', cursive;
  --ui:'Baloo 2','Comic Sans MS',system-ui,sans-serif;
  /* the classic "hand-drawn box" radius */
  --rough:255px 12px 235px 14px/14px 235px 12px 255px;
  --rough-2:18px 240px 16px 250px/250px 16px 240px 18px;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth; overflow-x:clip; max-width:100%;}
body{
  font-family:var(--ui); color:var(--ink);
  background-color:var(--paper);
  /* faint sketchbook grid + paper grain */
  background-image:
    linear-gradient(rgba(43,43,51,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,43,51,.035) 1px, transparent 1px),
    radial-gradient(rgba(139,67,230,.04) 1px, transparent 1px);
  background-size:26px 26px, 26px 26px, 13px 13px;
  overflow-x:hidden;
  max-width:100vw;
  min-height:100vh;
  animation:page-in .5s ease both;
}
.scene{max-width:min(1400px,100vw);}
.sk-note{overflow-wrap:anywhere;}
@keyframes page-in{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

a{color:inherit;}
img{display:block; max-width:100%;}

/* ---------- DRAFT ribbon ---------- */
.draft-tag{
  position:fixed; top:10px; right:-46px; z-index:200;
  transform:rotate(40deg);
  background:var(--yellow); color:var(--ink);
  font-family:var(--hand); font-size:18px; font-weight:700;
  padding:5px 56px; box-shadow:0 2px 8px rgba(0,0,0,.18);
  border:2px solid var(--ink); pointer-events:none; opacity:.94;
}

/* ============================================================
   HEADER (light sketchbook bar)
   ============================================================ */
.sk-header{
  display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap;
  padding:10px 16px; position:sticky; top:0; z-index:80;
  background:rgba(251,247,239,.92); backdrop-filter:blur(4px);
  border-bottom:2.5px solid var(--ink);
}
.sk-logo{
  flex:0 0 auto; height:42px; min-width:110px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--hand); font-weight:700; font-size:24px; color:var(--ink);
  text-decoration:none; position:relative;
}
.sk-nav{display:flex; gap:6px; flex-wrap:wrap; flex:1 1 auto; justify-content:center; min-width:0;}
.sk-nav a{
  text-decoration:none; color:var(--ink); font-weight:700; font-size:13px;
  padding:5px 13px; border:2px solid var(--ink); border-radius:var(--rough);
  background:var(--paper); transition:transform .12s ease, background .12s ease, color .12s ease;
}
.sk-nav a:hover,.sk-nav a:focus-visible{background:var(--purple); color:#fff; transform:translateY(-2px) rotate(-1deg); outline:none;}
.sk-nav a[aria-current]{background:var(--pink); color:#fff;}
.sk-actions{margin-left:auto; display:flex; align-items:center; gap:8px; flex:0 0 auto;}
.sk-ico{
  width:36px; height:36px; border-radius:50%; border:2px solid var(--ink);
  background:var(--paper); display:flex; align-items:center; justify-content:center;
  font-size:16px; color:var(--ink); text-decoration:none; transition:transform .12s ease, background .12s ease;
}
.sk-ico:hover{transform:translateY(-2px) rotate(6deg); background:var(--yellow);}
.sk-login{
  border:2px solid var(--ink); border-radius:var(--rough); background:var(--pink); color:#fff;
  font-weight:700; font-size:13px; padding:6px 15px; text-decoration:none;
  transition:transform .12s ease;
}
.sk-login:hover{transform:translateY(-2px) rotate(-1deg);}

/* the "sub-banner" line under the header */
.sk-note{
  text-align:center; font-family:var(--hand); font-size:18px; color:var(--ink);
  background:var(--paper-2); padding:5px 12px; border-bottom:2px dashed rgba(43,43,51,.4);
}

/* ============================================================
   SLOTS — pencil placeholders that become art when it drops in
   Each .slot has placeholder styling; an <img> (or bg) covers it when present.
   ============================================================ */
.slot{
  position:absolute; display:flex; align-items:center; justify-content:center;
  flex-direction:column; text-align:center; overflow:hidden;
  border:2.5px solid var(--line); border-radius:var(--rough);
  background-color:var(--paper);
  /* light pencil hatch so empty slots read as "to be drawn" */
  background-image:repeating-linear-gradient(45deg, rgba(43,43,51,.05) 0 2px, transparent 2px 9px);
  color:var(--ink); text-decoration:none; padding:4px;
  box-shadow:1px 2px 0 rgba(43,43,51,.12);
}
.slot .label{font-family:var(--hand); font-weight:700; font-size:clamp(14px,1.7vw,22px); line-height:1; color:var(--ink);}
.slot .sub{font-family:var(--hand); font-size:clamp(11px,1.2vw,15px); color:var(--purple); margin-top:1px;}
.slot .pencil{position:absolute; top:5px; right:7px; font-size:12px; opacity:.5;}
/* the drop-in image: fills the slot, hidden if it 404s (onerror) */
.slot > img.art{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  border-radius:inherit; background:var(--paper);
}
.slot.contain > img.art{object-fit:contain;}

/* clickable slots (characters / furniture / nav) */
a.slot{cursor:pointer; transition:transform .14s ease, box-shadow .14s ease;}
a.slot:hover,a.slot:focus-visible{transform:translateY(-3px) scale(1.02) rotate(-.6deg); box-shadow:2px 5px 0 rgba(139,67,230,.3); outline:none;}
a.slot:hover .sub{text-decoration:underline;}

/* ============================================================
   THE WORLD / ROOM scene — a big drawn stage with a sketch backdrop
   ============================================================ */
.scene{
  position:relative; width:100%; max-width:1400px; margin:0 auto;
  height:calc(100svh - 150px); min-height:430px;
  border-radius:var(--rough-2); overflow:hidden;
  border:3px solid var(--ink);
  background-color:var(--paper-2);
  background-size:cover; background-position:center;
  box-shadow:0 6px 0 rgba(43,43,51,.12);
}
/* when no backdrop image, show a soft "scene to be drawn" wash via hatch */
.scene.empty{
  background-image:repeating-linear-gradient(45deg, rgba(43,43,51,.04) 0 2px, transparent 2px 11px);
}

/* invisible-until-hover CLICK ZONES drawn over a scene (furniture, characters) */
.zone{
  position:absolute; display:flex; align-items:flex-end; justify-content:center;
  text-decoration:none; border-radius:var(--rough);
  border:2.5px dashed transparent; transition:border-color .15s ease, background .15s ease, transform .15s ease;
  padding-bottom:6px;
}
.zone .ztag{
  font-family:var(--hand); font-weight:700; font-size:clamp(11px,1.25vw,16px);
  color:var(--ink); background:rgba(251,247,239,.92); border:2px solid var(--ink);
  border-radius:var(--rough); padding:1px 8px; opacity:0; transform:translateY(6px);
  transition:opacity .15s ease, transform .15s ease;
  white-space:normal; text-align:center; line-height:1.05; max-width:min(42vw,210px);
}
.zone:hover,.zone:focus-visible{
  border-color:var(--purple); background:rgba(139,67,230,.08); outline:none;
  transform:scale(1.01);
}
.zone:hover .ztag,.zone:focus-visible .ztag{opacity:1; transform:translateY(0);}

/* ============================================================
   HOVER-REVEAL buttons (VB's homepage idea) — hand-drawn
   ============================================================ */
.btn-sketch{
  font-family:var(--ui); font-weight:800; font-size:clamp(12px,1.3vw,17px);
  color:var(--ink); background:var(--yellow); border:2.5px solid var(--ink);
  border-radius:var(--rough); text-decoration:none; padding:7px 4px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  box-shadow:1px 3px 0 rgba(43,43,51,.25);
}

/* ============================================================
   FACES STRIP (bottom nav) — round hand-drawn avatars
   ============================================================ */
.strip{
  position:fixed; bottom:0; left:0; right:0; z-index:90;
  display:flex; gap:14px; justify-content:center; align-items:flex-end;
  padding:8px 10px 9px; overflow-x:auto;
  background:rgba(251,247,239,.95); border-top:2.5px solid var(--ink); backdrop-filter:blur(4px);
}
.hop{display:flex; flex-direction:column; align-items:center; gap:3px; text-decoration:none; color:var(--ink); font-family:var(--hand); font-weight:700; font-size:14px; flex:0 0 auto; transition:transform .14s ease;}
.hop:hover{transform:translateY(-3px);}
.hop .face{
  position:relative; width:46px; height:46px; border-radius:50%; overflow:hidden;
  border:2.5px solid var(--ink); background:var(--paper);
  background-image:repeating-linear-gradient(45deg, rgba(43,43,51,.06) 0 2px, transparent 2px 8px);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--hand); font-size:13px; color:var(--ink-soft);
  box-shadow:1px 2px 0 rgba(43,43,51,.18);
}
.hop .face img.art{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.hop[aria-current] .face{border-color:var(--purple); box-shadow:0 0 0 3px rgba(139,67,230,.25); background:var(--paper-2);}
.hop[aria-current]{color:var(--purple);}

/* ============================================================
   GAME "coming soon" stub page
   ============================================================ */
.stage{
  flex:1; margin:20px; padding:28px; min-height:60vh;
  border:3px solid var(--ink); border-radius:var(--rough-2);
  background:var(--paper);
  background-image:repeating-linear-gradient(45deg, rgba(43,43,51,.04) 0 2px, transparent 2px 11px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
}
.stage h1{font-family:var(--ui); font-weight:800; font-size:clamp(24px,4vw,38px); margin-bottom:6px;}
.stage p{font-family:var(--hand); font-size:clamp(17px,2.2vw,22px); color:var(--ink-soft); max-width:440px; line-height:1.35;}
.stage .tag{
  margin-top:16px; font-family:var(--hand); font-weight:700; font-size:18px;
  background:var(--yellow); color:var(--ink); border:2px solid var(--ink);
  border-radius:var(--rough); padding:5px 16px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:640px){
  .sk-header{flex-wrap:wrap; padding:8px 10px; gap:6px 8px;}
  .sk-logo{order:1; flex:1 1 auto; font-size:21px; min-width:auto;}
  .sk-actions{order:2; flex:0 0 auto; margin-left:auto;}
  .sk-nav{order:3; flex:0 0 100%; width:100%; flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; gap:6px; padding-bottom:2px; -webkit-overflow-scrolling:touch;}
  .sk-nav a{padding:4px 11px; font-size:12.5px; flex:0 0 auto;}
  .sk-note{font-size:15px; line-height:1.2;}
  .scene{height:calc(100svh - 176px); min-height:380px;}
  .draft-tag{font-size:15px; padding:4px 50px; right:-48px;}
  .strip{gap:9px;}
  .hop .face{width:40px; height:40px;}
  .hop{font-size:12px;}
}

/* ============================================================
   DROP-IN MECHANICS — art appears when a sketch lands, graceful before
   ============================================================ */
/* scene backdrop image fills the stage; sits behind everything */
.scene .scene-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; border-radius:inherit;}
.scene .zone,.scene .slot,.scene .mansion-zone,.scene .btn-sketch{z-index:1;}

/* furniture/character zone labels: VISIBLE by default (reads as a wireframe),
   become hover-only once the room sketch has dropped in */
.zone .ztag{opacity:.96; transform:none;}
.scene.has-art .zone .ztag{opacity:0; transform:translateY(6px);}
.scene.has-art .zone:hover .ztag,.scene.has-art .zone:focus-visible .ztag{opacity:1; transform:translateY(0);}

/* empty room: a gentle centered hint so it reads as "art coming", auto-hidden once the sketch lands */
.room-scene:not(.has-art)::after{
  content:"✏️ the room sketch drops in here"; position:absolute; left:50%; top:44%;
  transform:translate(-50%,-50%); width:80%; text-align:center; pointer-events:none; z-index:0;
  font-family:var(--hand); font-size:clamp(16px,2.1vw,26px); color:var(--ink-soft); opacity:.55;
}

/* FIGURE slots = transparent standing characters drawn over a scene */
.slot.figure{border-style:dashed; border-color:rgba(43,43,51,.42); background-color:transparent; background-image:none; box-shadow:none;}
.slot.figure > img.art{object-fit:contain; background:transparent;}
.slot.figure.has-art{border-color:transparent;}
.slot.figure.has-art .label,.slot.figure.has-art .sub,.slot.figure.has-art .pencil{display:none;}

/* accessibility: respect reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important;}
}