/* Kidoville for grown-ups: the same app in a calmer, more serious look whenever a grown-up's character is signed in (body[data-who="grownup"], set in app.js),
   and on the "I'm a grown-up" sign-in screens. Kids never see it. It is only a re-skin of the design tokens and a few shapes: navy and teal, a plain system
   typeface, flat cards with thin borders, a dark navy sidebar. Games run in their own canvas and are not touched. */
body[data-who="grownup"] {
  --bg: #eef1f6; --bg2: #e4e9f1; --surface: #ffffff; --surface2: #f5f7fb; --surface3: #e9eef5;
  --ink: #0d1b34; --ink2: #2a3b5c; --muted: #576783; --faint: #8794ab; --edge: #c5cfdf;
  --line: #e4e9f1; --line2: #d3dbe8; --fill: rgba(13, 27, 52, .05); --fill2: rgba(13, 27, 52, .09);
  --coral: #0f7c8a; --sun: #d9a93a; --mint: #2a9d8f; --sky: #2f6fb7; --grape: #4a5aa8; --pink: #8a7aa8; --orange: #b9772e;
  --coral-soft: #d9eef0; --sun-soft: #f7ecd0; --mint-soft: #d6efeb; --sky-soft: #dbe8f6; --grape-soft: #e2e6f4; --pink-soft: #ece7f3; --orange-soft: #f3e4d0;
  --good: #12806a; --bad: #c0392b; --warn: #8f6200;
  --r-sm: 8px; --r: 10px; --r-lg: 14px; --r-xl: 18px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --display: var(--font);
  --pop: 0 1px 2px rgba(13, 27, 52, .14); --shadow: 0 12px 32px -14px rgba(13, 27, 52, .35); --soft: 0 10px 26px -16px rgba(13, 27, 52, .3);
  --navy: #0d1b34; --navy2: #14284a;
  background-image: none; letter-spacing: 0;
}
body[data-who="grownup"] h1, body[data-who="grownup"] h2, body[data-who="grownup"] h3, body[data-who="grownup"] h4 { font-weight: 650; letter-spacing: -.005em; }
body[data-who="grownup"] ::selection { background: #bfe3e7; color: var(--ink); }
body[data-who="grownup"] :focus-visible { outline-color: var(--coral); }

/* buttons: flat, small radius, no toy shadow */
body[data-who="grownup"] .btn { border-width: 1px; border-color: rgba(13, 27, 52, .2); border-radius: 10px; font-family: var(--font); font-weight: 600; font-size: 15px; letter-spacing: 0; min-height: 44px; padding: 0 18px; box-shadow: 0 1px 2px rgba(13, 27, 52, .12); }
body[data-who="grownup"] .btn:hover { transform: none; box-shadow: 0 3px 10px -4px rgba(13, 27, 52, .35); filter: brightness(1.06); }
body[data-who="grownup"] .btn:active { transform: none; box-shadow: 0 1px 2px rgba(13, 27, 52, .2); filter: brightness(.96); }
body[data-who="grownup"] .btn-lg { min-height: 52px; font-size: 17px; border-radius: 12px; }
body[data-who="grownup"] .btn-sm { min-height: 36px; font-size: 14px; border-radius: 9px; box-shadow: 0 1px 2px rgba(13, 27, 52, .12); }
body[data-who="grownup"] .btn-sm:hover { box-shadow: 0 3px 8px -4px rgba(13, 27, 52, .35); } body[data-who="grownup"] .btn-sm:active { transform: none; }
body[data-who="grownup"] .btn-primary, body[data-who="grownup"] .btn-sky, body[data-who="grownup"] .btn-grape, body[data-who="grownup"] .btn-mint { border-color: transparent; }
body[data-who="grownup"] .btn-mint { --c: #fff; }
body[data-who="grownup"] .btn-sun { --c: #2d2000; border-color: transparent; }
body[data-who="grownup"] .btn-ghost { --b: #fff; }

/* containers */
body[data-who="grownup"] .card { border: 1px solid var(--line2); box-shadow: 0 1px 2px rgba(13, 27, 52, .06); border-radius: var(--r-lg); }
body[data-who="grownup"] .pill { font-weight: 600; background: var(--surface3); }
body[data-who="grownup"] .kicker { font-weight: 700; letter-spacing: .12em; }
body[data-who="grownup"] .input, body[data-who="grownup"] select.input, body[data-who="grownup"] .tsearch-in { border-width: 1px; border-radius: 10px; font-weight: 500; background: #fff; }
body[data-who="grownup"] .tsearch-in { border-radius: 10px; }
body[data-who="grownup"] .tsearch-in:focus, body[data-who="grownup"] .input:focus { border-color: var(--coral); box-shadow: 0 0 0 3px var(--coral-soft); }
body[data-who="grownup"] .seg, body[data-who="grownup"] .tabs { border-radius: 10px; }
body[data-who="grownup"] .modal, body[data-who="grownup"] .drawer { border-radius: 16px; border: 1px solid var(--line2); box-shadow: var(--shadow); }
body[data-who="grownup"] .switch.on { background: var(--coral); }

/* the logo: a quieter mark (the house in a shield) and a "Grown-ups" tag */
.logo-mark.grown, .logo-tag { display: none; }
body[data-who="grownup"] .logo-mark:not(.grown) { display: none; }
body[data-who="grownup"] .logo-mark.grown { display: block; }
body[data-who="grownup"] .logo { font-family: var(--font); font-weight: 700; font-size: 23px; letter-spacing: -.01em; }
body[data-who="grownup"] .logo-text span { color: var(--coral); }
body[data-who="grownup"] .logo:hover .logo-mark { transform: none; }
body[data-who="grownup"] .logo-tag { display: inline-block; align-self: center; margin-left: 2px; white-space: nowrap; padding: 2px 6px; font-size: 9px; border-radius: 6px; background: var(--navy); color: #fff; font: 700 10px/1.5 var(--font); letter-spacing: .1em; text-transform: uppercase; }

/* the sidebar and tab bar: dark navy */
body[data-who="grownup"] .sidebar { background: var(--navy); border: 0; box-shadow: 0 10px 30px -14px rgba(13, 27, 52, .6); border-radius: 20px; color: #dfe7f5; }
body[data-who="grownup"] .sidebar .logo { color: #fff; font-size: 19px; gap: 7px; } body[data-who="grownup"] .sidebar .logo-tag { font-size: 8px; padding: 2px 5px; letter-spacing: .08em; } body[data-who="grownup"] .sidebar .logo-text span { color: #5fd0db; } body[data-who="grownup"] .sidebar .logo-mark { width: 34px; height: 36px; } body[data-who="grownup"] .sidebar .logo-tag { background: var(--coral); }
body[data-who="grownup"] .snav { font-family: var(--font); font-weight: 600; font-size: 16px; color: #b9c6dd; border-radius: 12px; }
body[data-who="grownup"] .snav:hover { background: rgba(255, 255, 255, .07); color: #fff; }
body[data-who="grownup"] .snav.on { background: rgba(255, 255, 255, .12); border-color: transparent; box-shadow: none; color: #fff; }
body[data-who="grownup"] .snav-ic { background: rgba(255, 255, 255, .1); color: #dbe5f6; border: 0; border-radius: 10px; transform: none; width: 38px; height: 38px; }
body[data-who="grownup"] .snav:hover .snav-ic, body[data-who="grownup"] .snav.on .snav-ic { transform: none; }
body[data-who="grownup"] .snav.on .snav-ic { background: var(--coral); color: #fff; }
body[data-who="grownup"] .side-friends { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; color: #dfe7f5; }
body[data-who="grownup"] .sf-head { font-family: var(--font); font-size: 15px; } body[data-who="grownup"] .sf-count { background: rgba(255, 255, 255, .12); color: #fff; }
body[data-who="grownup"] .sf-row { background: rgba(255, 255, 255, .06); border: 1px solid transparent; border-radius: 10px; }
body[data-who="grownup"] .sf-row:hover { border-color: rgba(255, 255, 255, .25); }
body[data-who="grownup"] .sf-txt small, body[data-who="grownup"] .sf-empty { color: #9fb0cc; }
body[data-who="grownup"] .side-friends .btn { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .15); box-shadow: none; }
body[data-who="grownup"] .sidebar .me-txt, body[data-who="grownup"] .sidebar .me-txt small { color: #dfe7f5; }
body[data-who="grownup"] .mechip { background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; } body[data-who="grownup"] .mechip:hover, body[data-who="grownup"] .mechip.on { border-color: rgba(255, 255, 255, .35); }
body[data-who="grownup"] .mechip .me-txt, body[data-who="grownup"] .mechip .mename { color: #fff; } body[data-who="grownup"] .mechip .me-txt small { color: #9fb0cc; }
body[data-who="grownup"] .side-me .iconbtn { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .15); color: #fff; }
body[data-who="grownup"] .tabbar { background: var(--navy); border: 0; border-radius: 16px; box-shadow: 0 10px 30px -10px rgba(13, 27, 52, .6); }
body[data-who="grownup"] .tab-item { color: #b9c6dd; } body[data-who="grownup"] .tab-item.on { color: #fff; }
body[data-who="grownup"] .topbar { background: color-mix(in srgb, var(--bg) 90%, transparent); }
body[data-who="grownup"] .stars-pill, body[data-who="grownup"] .iconbtn { border-width: 1px; box-shadow: none; }