/* ============================================================
   VBunny Go SITE THEME (the real design system, 2026-07-16)
   Style law: everything matches the mansion on the front page
   (assets/homepage/mansion-home.png) and the bubble-letter logo
   (assets/site/vbgo-logo.png). Kid-first, iPad-first.

   Palette sampled from the two brand anchors:
     mansion: white walls, pink scalloped roof, cyan sky/ocean,
                grass green, sandy stone path, dark lantern ink
     logo: glossy bubble letters, pink -> yellow -> purple -> blue,
                black outline, halftone dots, confetti dashes

   Self-hosted / system fonts only (no CDN; site CSP is 'self').
   New pages link this file; Valerie's live pages keep sketch.css.
   ============================================================ */

:root{
  /* ---- ink + paper ---- */
  --vb-ink:#2E2138;          /* outline plum-black (logo linework) */
  --vb-ink-soft:#5C4E6B;
  --vb-cream:#FFF8FB;        /* mansion wall white */
  --vb-paper:#FFFDF9;

  /* ---- the logo gradient, in letter order V-B-UNN-YG ---- */
  --vb-pink:#F2699F;         /* V + roof scales */
  --vb-pink-deep:#E04E8A;
  --vb-pink-soft:#FBD7E7;    /* house trim */
  --vb-yellow:#FFC93E;       /* B + sunshine */
  --vb-yellow-deep:#F0AB1B;
  --vb-purple:#8F5BEB;       /* UNN */
  --vb-purple-deep:#7440D4;
  --vb-blue:#2AA4F0;         /* YG */
  --vb-blue-deep:#1B85D4;

  /* ---- the world around the house ---- */
  --vb-sky:#2F9FE8;
  --vb-sky-light:#A8E4FA;
  --vb-aqua:#29B9DF;         /* ocean */
  --vb-grass:#7CC24C;
  --vb-grass-deep:#5FA636;
  --vb-sand:#EBDDB6;

  --vb-logo-grad:linear-gradient(100deg,var(--vb-pink) 0%,var(--vb-yellow) 30%,var(--vb-purple) 62%,var(--vb-blue) 100%);
  --vb-sky-grad:linear-gradient(180deg,#4FB6F2 0%,#A8E4FA 78%,#C9F0FD 100%);

  /* ---- shape + depth ---- */
  --vb-radius:26px;
  --vb-radius-sm:16px;
  --vb-border:3px solid var(--vb-ink);
  --vb-shadow:0 6px 0 rgba(46,33,56,.14);
  --vb-shadow-float:0 12px 26px rgba(46,33,56,.18);

  /* ---- type: rounded bubble stack, no downloads ---- */
  --vb-display:'Baloo 2','Arial Rounded MT Bold',ui-rounded,'SF Pro Rounded','Hiragino Maru Gothic ProN','Comic Sans MS',system-ui,sans-serif;
  --vb-body:'Baloo 2','Arial Rounded MT Bold',ui-rounded,'SF Pro Rounded','Trebuchet MS',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:clip;}
body{
  margin:0; min-height:100vh;
  font-family:var(--vb-body); color:var(--vb-ink);
  background:var(--vb-cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{display:block; max-width:100%;}
a{color:inherit;}

/* Present to assistive tech, invisible on screen. Used for the homepage <h1>,
   whose visible form is the logo artwork. */
.vbt-sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Halftone dot texture from the logo letters. Sprinkle on hero bands */
.vbt-dots{
  background-image:radial-gradient(rgba(255,255,255,.30) 1.6px, transparent 2px);
  background-size:16px 16px;
}

/* ============================================================
   HEADER CHROME
   ============================================================ */
.vbt-chrome{
  position:sticky; top:0; z-index:90;
  display:flex; align-items:center; gap:10px 18px; flex-wrap:wrap;
  padding:10px clamp(12px,3vw,26px);
  background:rgba(255,248,251,.94); backdrop-filter:blur(6px);
  border-bottom:var(--vb-border);
}
.vbt-chrome .vbt-logo{flex:0 0 auto; display:flex; align-items:center; text-decoration:none;}
.vbt-chrome .vbt-logo img{height:clamp(36px,4.5vw,50px); width:auto;}
.vbt-nav{display:flex; gap:8px; flex-wrap:wrap; flex:1 1 auto; justify-content:center; min-width:0;}
.vbt-nav a{
  font-family:var(--vb-display); font-weight:800; font-size:clamp(14px,1.6vw,17px);
  text-decoration:none; color:var(--vb-ink);
  min-height:44px; display:inline-flex; align-items:center;
  padding:6px 16px; border:var(--vb-border); border-radius:999px;
  background:#fff; box-shadow:0 3px 0 rgba(46,33,56,.14);
  transition:transform .14s ease, background .14s ease, color .14s ease;
}
.vbt-nav a:hover,.vbt-nav a:focus-visible{background:var(--vb-purple); color:#fff; transform:translateY(-2px);}
.vbt-nav a[aria-current="page"]{background:var(--vb-pink); color:var(--vb-ink);}
.vbt-nav a:focus-visible{outline:3px solid var(--vb-yellow); outline-offset:2px;}

/* ============================================================
   HEADLINES — real-brand register (Hambone 7/16: the rainbow
   bubble-gradient was cheesy; the LOGO is the only rainbow
   element on any page). Solid ink, kid-friendly rounded face.
   ============================================================ */
.vbt-title{
  display:inline-block;
  font-family:var(--vb-display); font-weight:800;
  font-size:clamp(34px,5.5vw,56px); line-height:1.05; letter-spacing:.01em;
  color:var(--vb-ink);
  margin:0;
}
.vbt-title--sm{font-size:clamp(24px,3.4vw,38px);}

/* Plain section headings */
.vbt-h{
  font-family:var(--vb-display); font-weight:800;
  font-size:clamp(22px,3.4vw,34px); line-height:1.1; margin:0 0 12px;
}
.vbt-sub{
  font-family:var(--vb-body); font-weight:600;
  font-size:clamp(15px,2vw,19px); color:var(--vb-ink-soft); margin:6px 0 0;
}

/* ============================================================
   CANDY BUTTONS: big, pressable, glossy like the letters
   ============================================================ */
.vbt-btn{
  --btn-bg:var(--vb-pink); --btn-deep:var(--vb-pink-deep);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:12px 28px;
  font-family:var(--vb-display); font-weight:800; font-size:clamp(16px,2vw,20px);
  /* ink text on the candy colors: white fails WCAG contrast on pink/blue/green */
  color:var(--vb-ink); text-decoration:none; cursor:pointer;
  background:var(--btn-bg);
  border:var(--vb-border); border-radius:999px;
  box-shadow:0 6px 0 var(--btn-deep), 0 9px 0 rgba(46,33,56,.22);
  transition:transform .14s ease, box-shadow .14s ease;
  user-select:none; -webkit-tap-highlight-color:transparent;
  overflow:hidden;
}
.vbt-btn::after{ /* gloss swoosh, like the highlight on every logo letter */
  content:""; position:absolute; left:10%; top:7%; width:26%; height:20%;
  background:rgba(255,255,255,.38); border-radius:999px;
  transform:rotate(-8deg); pointer-events:none;
}
.vbt-btn:hover,.vbt-btn:focus-visible{transform:translateY(-3px); box-shadow:0 9px 0 var(--btn-deep), 0 13px 0 rgba(46,33,56,.20);}
.vbt-btn:active{transform:translateY(3px); box-shadow:0 2px 0 var(--btn-deep), 0 4px 0 rgba(46,33,56,.22);}
.vbt-btn:focus-visible{outline:3px solid var(--vb-yellow); outline-offset:3px;}
.vbt-btn--blue{--btn-bg:var(--vb-blue); --btn-deep:var(--vb-blue-deep);}
.vbt-btn--purple{--btn-bg:var(--vb-purple); --btn-deep:var(--vb-purple-deep); color:#fff;}
.vbt-btn--yellow{--btn-bg:var(--vb-yellow); --btn-deep:var(--vb-yellow-deep);}
.vbt-btn--green{--btn-bg:var(--vb-grass); --btn-deep:var(--vb-grass-deep);}
.vbt-btn--ghost{--btn-bg:#fff; --btn-deep:rgba(46,33,56,.25); color:var(--vb-ink);}
.vbt-btn--big{min-height:64px; padding:16px 36px; font-size:clamp(18px,2.4vw,24px);}

/* ============================================================
   CARDS + TILES
   ============================================================ */
.vbt-card{
  background:#fff; border:var(--vb-border); border-radius:var(--vb-radius);
  box-shadow:var(--vb-shadow); padding:clamp(16px,2.5vw,26px);
}
.vbt-card--soft{background:var(--vb-paper);}

/* the pink scalloped roof, as a divider strip */
.vbt-scallop{
  height:20px; margin:0; border:0; pointer-events:none;
  background:radial-gradient(circle at 50% 0, var(--vb-pink) 0 62%, transparent 64%) repeat-x;
  background-size:30px 20px;
}
.vbt-scallop--aqua{background:radial-gradient(circle at 50% 0, var(--vb-aqua) 0 62%, transparent 64%) repeat-x; background-size:30px 20px;}

/* GAME TILE */
.vbt-tile{
  position:relative; display:flex; flex-direction:column; gap:10px;
  background:#fff; border:var(--vb-border); border-radius:var(--vb-radius);
  box-shadow:var(--vb-shadow); padding:12px 12px 14px;
  text-decoration:none; color:var(--vb-ink);
  transition:transform .16s ease, box-shadow .16s ease;
}
a.vbt-tile:hover,a.vbt-tile:focus-visible{
  transform:translateY(-5px) rotate(-.4deg);
  box-shadow:var(--vb-shadow-float), 0 0 0 4px rgba(242,105,159,.28);
}
a.vbt-tile:focus-visible{outline:3px solid var(--vb-yellow); outline-offset:3px;}
.vbt-tile .thumb{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  border:var(--vb-border); border-radius:var(--vb-radius-sm);
  background:var(--tile-grad,linear-gradient(160deg,var(--vb-sky-light),var(--vb-pink-soft)));
}
.vbt-tile .thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.vbt-tile .thumb .ph{ /* placeholder face until real art lands, never a broken image */
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:clamp(40px,6vw,58px);
  background-image:radial-gradient(rgba(255,255,255,.32) 1.6px, transparent 2px);
  background-size:15px 15px;
  text-shadow:0 4px 0 rgba(46,33,56,.18);
}
.vbt-tile .name{
  font-family:var(--vb-display); font-weight:800; font-size:clamp(16px,1.8vw,19px);
  line-height:1.15; text-align:center;
}
.vbt-tile .meta{display:flex; justify-content:center;}

/* per-character / per-game placeholder gradients */
.t-pink  {--tile-grad:linear-gradient(160deg,#FBD7E7,#F2699F);}
.t-blue  {--tile-grad:linear-gradient(160deg,#BFE9FC,#2AA4F0);}
.t-purple{--tile-grad:linear-gradient(160deg,#E2D4FB,#8F5BEB);}
.t-yellow{--tile-grad:linear-gradient(160deg,#FFEDB8,#FFC93E);}
.t-green {--tile-grad:linear-gradient(160deg,#D8F2C0,#7CC24C);}
.t-aqua  {--tile-grad:linear-gradient(160deg,#C9F0FD,#29B9DF);}

/* badges */
.vbt-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--vb-display); font-weight:800; font-size:13px; letter-spacing:.04em;
  padding:4px 12px; border:2.5px solid var(--vb-ink); border-radius:999px;
  background:var(--vb-grass); color:var(--vb-ink); text-transform:uppercase;
}
.vbt-badge--ext{background:var(--vb-blue);}
.vbt-badge--soon{background:var(--vb-yellow); color:var(--vb-ink);}

/* ART TILES: the thumbnail IS the tile — titles live inside the art
   (Hambone 7/16). Accessible name goes on the tile via aria-label. */
.vbt-tile--art{padding:0; gap:0;}
.vbt-tile--art .thumb{
  border:0; border-radius:calc(var(--vb-radius) - 3px);
  aspect-ratio:4/3;
}
.vbt-tile--art .corner{
  position:absolute; right:10px; top:10px; z-index:2;
  box-shadow:0 3px 0 rgba(46,33,56,.25);
}

/* coming-soon tiles don't pretend to be playable */
.vbt-tile--soon{opacity:.96;}
.vbt-tile--soon .thumb{filter:saturate(.85);}
.vbt-tile--soon .thumb::after{
  content:"COMING SOON";
  position:absolute; left:-38%; top:14%; width:180%;
  transform:rotate(-14deg);
  text-align:center; padding:5px 0;
  font-family:var(--vb-display); font-weight:800; font-size:14px; letter-spacing:.12em;
  background:rgba(255,201,62,.94); color:var(--vb-ink);
  border-top:2.5px solid var(--vb-ink); border-bottom:2.5px solid var(--vb-ink);
}

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.vbt-wrap{max-width:1180px; margin:0 auto; padding:0 clamp(14px,3vw,28px);}
.vbt-section{padding:clamp(30px,5vw,64px) 0;}
.vbt-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:clamp(14px,2vw,22px);}
.vbt-grid--wide{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));}
.vbt-row{display:flex; flex-wrap:wrap; gap:14px; align-items:center;}
.vbt-center{text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px;}
@media (max-width:520px){
  .vbt-grid{grid-template-columns:repeat(2,1fr); gap:12px;}
  .vbt-grid--wide{grid-template-columns:1fr;}
}

/* ============================================================
   FORMS (grown-ups page)
   ============================================================ */
.vbt-input{
  font-family:var(--vb-body); font-weight:600; font-size:17px; color:var(--vb-ink);
  min-height:54px; padding:12px 18px; width:100%;
  background:#fff; border:var(--vb-border); border-radius:999px;
  box-shadow:inset 0 3px 0 rgba(46,33,56,.08);
}
.vbt-input:focus{outline:3px solid var(--vb-yellow); outline-offset:2px;}
.vbt-input::placeholder{color:var(--vb-ink-soft); opacity:.7;}
.vbt-field{display:flex; flex-direction:column; gap:6px; text-align:left;}
.vbt-field label{font-family:var(--vb-display); font-weight:800; font-size:15px;}

/* ============================================================
   OWN MODAL (never native browser dialogs)
   ============================================================ */
.vbt-modal{position:fixed; inset:0; z-index:200; display:none;}
.vbt-modal.open{display:block;}
.vbt-modal .scrim{position:absolute; inset:0; background:rgba(46,33,56,.5);}
.vbt-modal .box{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(92vw,440px); max-height:84vh; overflow:auto;
  background:#fff; border:var(--vb-border); border-radius:var(--vb-radius);
  box-shadow:var(--vb-shadow-float); padding:26px; text-align:center;
}
.vbt-modal .box h3{font-family:var(--vb-display); font-weight:800; font-size:24px; margin:0 0 8px;}
.vbt-modal .box p{margin:0 0 18px; color:var(--vb-ink-soft); font-weight:600;}

/* ============================================================
   FOOTER
   ============================================================ */
.vbt-footer{margin-top:clamp(30px,5vw,60px);}
.vbt-footer .inner{
  background:var(--vb-pink-soft); border-top:var(--vb-border);
  padding:clamp(22px,4vw,40px) 0 clamp(26px,4vw,44px);
}
.vbt-footer .cols{
  display:flex; flex-wrap:wrap; gap:20px 40px; align-items:center; justify-content:space-between;
}
.vbt-footer .links{display:flex; flex-wrap:wrap; gap:8px 18px;}
.vbt-footer a{
  font-family:var(--vb-display); font-weight:800; font-size:15px; color:var(--vb-ink);
  text-decoration:none; min-height:44px; display:inline-flex; align-items:center;
}
.vbt-footer a:hover,.vbt-footer a:focus-visible{color:var(--vb-purple-deep); text-decoration:underline;}
.vbt-footer .fine{font-size:13px; font-weight:600; color:var(--vb-ink-soft);}

/* ============================================================
   IDLE LIFE: gentle, always-on, killed by reduced-motion
   ============================================================ */
@keyframes vbt-bob{0%,100%{transform:translateY(0);} 50%{transform:translateY(-7px);}}
@keyframes vbt-sway{0%,100%{transform:rotate(-1.4deg);} 50%{transform:rotate(1.4deg);}}
@keyframes vbt-drift{from{transform:translateX(-12vw);} to{transform:translateX(112vw);}}
@keyframes vbt-twinkle{0%,100%{opacity:.15; transform:scale(.8);} 50%{opacity:.95; transform:scale(1.15);}}
@keyframes vbt-shimmer{0%,100%{opacity:.10;} 50%{opacity:.34;}}
.vbt-bob{animation:vbt-bob 3.6s ease-in-out infinite;}
.vbt-sway{animation:vbt-sway 5s ease-in-out infinite; transform-origin:50% 100%;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important;}
  html{scroll-behavior:auto;}
}

/* Touch screens: no hover states to discover, keep affordances visible */
@media (hover:none){
  a.vbt-tile{box-shadow:var(--vb-shadow), 0 0 0 3px rgba(242,105,159,.14);}
}

/* Phone chrome: ONE row, always (his round-5 fix; wrapped pills collided
   with the quest HUD on the live deploy). Logo + a single horizontal-scroll
   pill row, 44px targets, no wrap at any device width. */
@media (max-width:560px){
  .vbt-chrome{padding:4px 10px; gap:8px; flex-wrap:nowrap;}
  /* Logo readable on phones (Hambone 7/23: "the logo should be bigger");
     bar stays one compact row because the 44px pills set its height. */
  .vbt-chrome .vbt-logo img{height:40px;}
  .vbt-nav{
    flex:1 1 auto; min-width:0; flex-wrap:nowrap; justify-content:flex-start;
    gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding:2px 0 3px;
  }
  .vbt-nav::-webkit-scrollbar{display:none;}
  .vbt-nav a{
    flex:0 0 auto; white-space:nowrap;
    min-height:44px; padding:5px 13px; font-size:13px;
    box-shadow:0 2px 0 rgba(46,33,56,.14);
  }
}