/* ===== Let's Meet bubble kit: pastel pink panels, navy type, baby-blue pills, gold coins, puffy two-colour wordmarks =====
   Loaded after style.css and island.css. The --ui-* tokens are re-pointed here so every existing panel follows along,
   then the kit components (.bb-*) and the screens built from them (sign-in, creator, home shop, phone, build mode). */
:root {
  --bb-navy: #1B2A6B; --bb-navy2: #2E3F80; --bb-muted: #6E77A3; --bb-ink-soft: #49558A;
  --bb-pink-bg: #FDEFF4; --bb-pink: #FBE4EC; --bb-pink2: #F8D9E4; --bb-pink-line: #F2C4D3; --bb-pink-deep: #E9A2BB; --bb-pink-shadow: #E6BFCC;
  --bb-card: #FFF9F7; --bb-card-line: #F2DEE5; --bb-cream: #FFFDFB;
  --bb-blue: #A9DCF8; --bb-blue-hi: #CDEDFE; --bb-blue-lo: #86C9F1; --bb-blue-rim: #64AEDF; --bb-blue-shadow: #5E9FCF; --bb-blue-bg: #E4F4FE; --bb-focus: #3E9FE6;
  --bb-gold-hi: #FFE68A; --bb-gold: #FFCB3D; --bb-gold-lo: #E9A615; --bb-gold-rim: #D58F0C;
  --bb-red: #EE6B6B; --bb-red-bg: #FFF1F1; --bb-red-line: #F3A3A3;
  --bb-font: 'Nunito', 'Noto Sans SC', system-ui, sans-serif; --bb-display: 'Fredoka', 'Nunito', 'Noto Sans SC', sans-serif; --bb-serif: 'Bree Serif', Georgia, 'Noto Sans SC', serif;
  --bb-ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* the existing theme follows the kit */
  --ui-bg: #FFF8FA; --ui-paper: #FCEEF3; --ui-paper2: #F8E0E9; --ui-paper3: #EFCCD9; --ui-line: #F2D2DE;
  --ui-text: var(--bb-navy); --ui-text2: var(--bb-ink-soft); --ui-muted: var(--bb-muted);
  --ui-teal: #8FD0F5; --ui-teal-hi: #A9DCF8; --ui-teal-lo: #5E9FCF; --ui-teal-bg: #E4F4FE;
  --ui-ribbon: #F59AB8; --ui-ribbon2: #E07C9E; --ui-yellow: #FFC93C; --ui-focus: #3E9FE6; --ui-red: #EE6B6B; --ui-green: #57B98A;
  --ui-coin: #FFD34D; --ui-btn3d: #E6BFCC;
  --ui-shadow: 0 10px 28px rgba(183, 104, 140, 0.18); --ui-shadow-sm: 0 2px 4px rgba(183, 104, 140, 0.1);
}

/* ---------- wordmarks: pink first word, blue second word, white outline, soft drop ---------- */
.bb-word { margin: 0; font-family: var(--bb-display); font-weight: 700; line-height: 1.02; letter-spacing: -0.01em; white-space: nowrap; text-align: center; font-size: 56px; }
.bb-word > span { position: relative; display: inline-block; isolation: isolate; padding: 0 0.04em; }
.bb-word > span::before { content: attr(data-t); position: absolute; inset: 0 0.04em; z-index: -1; color: #fff; -webkit-text-stroke: 0.2em #fff;
  text-shadow: 0 0.08em 0 #F1BCCD, 0 0.13em 0.18em rgba(196, 96, 140, 0.32); }
.bb-word .w1 { color: #F69BBB; -webkit-text-fill-color: #F69BBB; -webkit-text-stroke: 0.024em #E07CA0; }
.bb-word .w2 { color: #86CDF3; -webkit-text-fill-color: #86CDF3; -webkit-text-stroke: 0.024em #5DAEE0; }
.bb-word > span::after { content: attr(data-t); position: absolute; inset: 0 0.04em; z-index: 1; pointer-events: none; -webkit-text-stroke: 0; color: transparent; -webkit-text-fill-color: transparent;
  background: linear-gradient(180deg, rgba(255, 255, 255, .92) 4%, rgba(255, 255, 255, .5) 30%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 72%, rgba(198, 64, 118, .2) 100%); -webkit-background-clip: text; background-clip: text; }
.bb-word .w2::after { background: linear-gradient(180deg, rgba(255, 255, 255, .92) 4%, rgba(255, 255, 255, .5) 30%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 72%, rgba(40, 110, 180, .2) 100%); -webkit-background-clip: text; background-clip: text; }
.bb-word .w2::before { text-shadow: 0 0.08em 0 #B9DDF2, 0 0.13em 0.18em rgba(70, 130, 190, 0.3); }
.bb-word .w3 { color: #B9A3F3; -webkit-text-fill-color: #B9A3F3; -webkit-text-stroke: 0.024em #8C72D8; }
.bb-word .w3::before { text-shadow: 0 0.08em 0 #D6CBF4, 0 0.13em 0.18em rgba(120, 90, 200, 0.3); }
.bb-word .w3::after { background: linear-gradient(180deg, rgba(255, 255, 255, .92) 4%, rgba(255, 255, 255, .5) 30%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 72%, rgba(100, 70, 190, .2) 100%); -webkit-background-clip: text; background-clip: text; }
.bb-word.logo3 > span { padding: 0 0.03em; }
.bb-cclogo { position: absolute; top: max(6px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); z-index: 3; pointer-events: none; }
.bb-cclogo .bb-word { font-size: 34px; }
@media (max-width: 1400px) { .bb-cclogo { display: none; } }
.bb-word.stack { white-space: normal; } .bb-word.stack > span { display: block; }
.bb-sub { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 6px 0 0; font: 400 22px/1.15 var(--bb-serif); color: var(--bb-navy); }
.bb-sub i { width: 46px; height: 2.5px; border-radius: 2px; background: currentColor; opacity: .8; flex: none; }
.bb-sub span { text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff; }
.bb-sub.light { color: #fff; } .bb-sub.light span { text-shadow: 0 2px 0 #3E5FA8, 0 0 6px rgba(30, 50, 110, .55), 2px 0 0 #3E5FA8, -2px 0 0 #3E5FA8, 0 -2px 0 #3E5FA8; }
.bb-serif { margin: 6px 0 14px; text-align: center; font: 400 26px/1.15 var(--bb-serif); color: var(--bb-navy); text-shadow: 0 0 3px #fff, 0 0 6px #fff, 0 2px 0 #fff; }

/* ---------- buttons ---------- */
.bb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; border: 2.5px solid var(--bb-pink-line); background: var(--bb-cream); color: var(--bb-navy);
  font: 800 18px/1.1 var(--bb-font); padding: 12px 26px; cursor: pointer; box-shadow: inset 0 2px 0 #fff, 0 4px 0 var(--bb-pink-shadow), 0 6px 14px rgba(183, 104, 140, .12);
  transition: transform .15s var(--bb-ease), box-shadow .15s var(--bb-ease), background .15s; }
.bb-btn:hover { transform: translateY(-1px); } .bb-btn:active { transform: translateY(3px); box-shadow: inset 0 2px 0 #fff, 0 1px 0 var(--bb-pink-shadow); }
.bb-btn.blue { background: linear-gradient(180deg, var(--bb-blue-hi) 0%, var(--bb-blue) 55%, var(--bb-blue-lo) 100%); border-color: var(--bb-blue-rim); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), 0 4px 0 var(--bb-blue-shadow), 0 7px 16px rgba(70, 140, 200, .22); }
.bb-btn.blue:active { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), 0 1px 0 var(--bb-blue-shadow); }
.bb-btn.grey, .bb-btn:disabled { background: #ECE9EF; border-color: #DCD7E0; color: #8C90AA; box-shadow: inset 0 2px 0 #fff; cursor: default; transform: none; }
.bb-btn.big { width: 100%; padding: 14px 20px; font-size: 22px; }
.bb-btn.sm { padding: 8px 16px; font-size: 15px; }
.bb-btn.sq { width: 50px; height: 50px; padding: 0; border-radius: 16px; }
.bb-btn .bb-arr { width: 22px; height: 22px; flex: none; }
.bb-btn svg { flex: none; }
.bb-link { background: none; border: 0; padding: 2px 2px; color: var(--bb-navy2); font: 800 16px var(--bb-font); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
.bb-link:hover { color: var(--bb-focus); }

/* ---------- fields ---------- */
.bb-label { display: block; margin: 12px 4px 6px; font: 800 18px var(--bb-font); color: var(--bb-navy2); }
.bb-field { width: 100% !important; box-sizing: border-box; border-radius: 16px !important; border: 2.5px solid #E3D8DE !important; background: #F7F3F5 !important; color: var(--bb-navy) !important;
  font: 700 18px var(--bb-font) !important; padding: 12px 18px !important; box-shadow: inset 0 2px 3px rgba(150, 110, 130, .08); transition: border-color .15s, box-shadow .15s; }
.bb-field::placeholder { color: #A3A6BC; font-weight: 700; }
.bb-field:focus { outline: none; border-color: var(--bb-focus) !important; background: #fff !important; box-shadow: 0 0 0 4px rgba(62, 159, 230, .18); }
.bb-field.bad { border-color: var(--bb-red) !important; background: var(--bb-red-bg) !important; }
.bb-field:disabled { background: #E9E7EE !important; color: #9EA2B8 !important; }
textarea.bb-field { resize: none; line-height: 1.3; }
.bb-pass { position: relative; } .bb-pass .bb-field { padding-right: 56px !important; }
.bb-eye { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; background: none; color: #8A90B0; cursor: pointer; padding: 6px; border-radius: 50%; }
.bb-eye svg { width: 100%; height: 100%; } .bb-eye.on { color: var(--bb-focus); }
.bb-err { margin: 8px 4px 0; color: #D24D4D; font: 800 15px var(--bb-font); } .bb-err:empty { display: none; }
.bb-note { margin: 8px 2px 0; padding: 9px 14px; border-radius: 14px; background: var(--bb-blue-bg); color: var(--bb-navy2); font: 700 14.5px/1.35 var(--bb-font); }
.bb-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 2px 4px; }
.bb-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: 800 17px var(--bb-font); color: var(--bb-navy2); }
.bb-check input { position: absolute; opacity: 0; pointer-events: none; }
.bb-check i { width: 26px; height: 26px; border-radius: 8px; border: 2.5px solid #D6CCD3; background: #fff; display: grid; place-items: center; flex: none; transition: background .15s, border-color .15s; }
.bb-check input:checked + i { background: var(--bb-focus); border-color: var(--bb-focus); }
.bb-check input:checked + i::after { content: ""; width: 7px; height: 13px; border: solid #fff; border-width: 0 3.5px 3.5px 0; transform: translate(0, -1px) rotate(45deg); }
.bb-check input:focus-visible + i { outline: 3px solid var(--bb-focus); outline-offset: 2px; }
.bb-checkrow { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; padding: 5px 4px; cursor: pointer; font: 700 16px var(--bb-font); color: var(--bb-navy); text-align: left; }
.bb-checkrow i { width: 24px; height: 24px; border-radius: 7px; border: 2.5px solid #D6CCD3; background: #fff; display: grid; place-items: center; flex: none; }
.bb-checkrow.on i { background: var(--bb-focus); border-color: var(--bb-focus); }
.bb-checkrow.on i::after { content: ""; width: 6px; height: 12px; border: solid #fff; border-width: 0 3px 3px 0; transform: translate(0, -1px) rotate(45deg); }
.bb-radio { width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid #C9C3D2; background: #fff; display: inline-grid; place-items: center; flex: none; }
.bb-radio.on { background: var(--bb-focus); border-color: #fff; box-shadow: 0 0 0 2.5px var(--bb-focus); color: #fff; } .bb-radio svg { width: 20px; height: 20px; }
.bb-toggle { position: relative; display: inline-flex; align-items: center; gap: 8px; width: 96px; height: 38px; border-radius: 999px; border: 2px solid #E3DDE6; background: #EEEBF1; padding: 0 10px 0 42px; cursor: pointer; transition: background .2s; }
.bb-toggle i { position: absolute; left: 4px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(60, 60, 100, .25); transition: left .2s var(--bb-ease); }
.bb-toggle b { font: 800 16px var(--bb-font); color: var(--bb-muted); }
.bb-toggle.on { background: linear-gradient(180deg, #7FC7F2, #4FA8E6); border-color: #4FA8E6; padding: 0 42px 0 14px; } .bb-toggle.on i { left: calc(100% - 34px); } .bb-toggle.on b { color: #fff; }
.bb-select { position: relative; display: inline-block; } .bb-select select { appearance: none; -webkit-appearance: none; width: 100%; border-radius: 14px; border: 2.5px solid #E3D8DE; background: #fff; color: var(--bb-navy); font: 800 17px var(--bb-font); padding: 9px 40px 9px 14px; }
.bb-select::after { content: ""; position: absolute; right: 15px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border: solid var(--bb-navy); border-width: 0 3px 3px 0; transform: rotate(45deg); pointer-events: none; }
.bb-select.bad select { border-color: var(--bb-red); background: var(--bb-red-bg); }
.bb-hr { border: 0; height: 2px; background: #E9DCE3; margin: 16px 6px 10px; }
.bb-chip { display: inline-block; border-radius: 999px; border: 2px solid #CFE6F6; background: linear-gradient(180deg, #F1FAFF, #DCEFFC); color: var(--bb-navy2); font: 800 17px var(--bb-font); font-style: normal; padding: 6px 16px; }
.bb-chiptitle { display: inline-block; margin: -2px 0 8px; border-radius: 999px; padding: 6px 22px; background: linear-gradient(180deg, #E3F4FE, #C3E5FA); color: var(--bb-navy); font: 800 20px var(--bb-font); box-shadow: inset 0 2px 0 #fff; }
.bb-cardtitle { margin: 0 0 4px; font: 800 22px var(--bb-font); color: var(--bb-navy); }
.bb-fine { display: block; margin: 6px 4px 0; color: var(--bb-muted); font: 700 13px var(--bb-font); }

/* coin pill */
.bb-coin { display: inline-flex; align-items: center; gap: 6px; padding: 3px 18px 3px 4px; border-radius: 999px; background: linear-gradient(180deg, var(--bb-gold-hi), var(--bb-gold) 55%, #F8B92A); border: 2px solid var(--bb-gold-rim);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), 0 3px 0 #C98309; color: var(--bb-navy); font: 800 17px var(--bb-font); white-space: nowrap; }
.bb-coin .bb-coinic { width: 26px; height: 26px; flex: none; } .bb-coin b { font-weight: 800; }
.bb-coin.big { font-size: 26px; padding: 4px 26px 4px 6px; } .bb-coin.big .bb-coinic { width: 38px; height: 38px; }

/* panels and cards */
.bb-panel { position: relative; background: var(--bb-pink-bg); border: 4px solid var(--bb-pink-line); border-radius: 40px; box-shadow: inset 0 0 0 4px #FFF7FA, 0 0 0 3px rgba(255, 255, 255, .55), 0 22px 50px rgba(176, 86, 130, .25); }
.bb-card { background: var(--bb-card); border: 2px solid var(--bb-card-line); border-radius: 24px; box-shadow: inset 0 2px 0 #fff, 0 3px 0 rgba(233, 196, 210, .55); }

/* steps */
.bb-steps { list-style: none; display: flex; align-items: center; justify-content: center; gap: 0; margin: 12px 0 0; padding: 0; }
.bb-steps li { display: flex; align-items: center; }
.bb-step { display: inline-flex; align-items: center; gap: 12px; border-radius: 999px; border: 2.5px solid #EBDDE3; background: linear-gradient(180deg, #FFFDFC, #F7EEF2); color: var(--bb-navy); font: 800 19px var(--bb-font);
  padding: 6px 28px 6px 6px; box-shadow: inset 0 2px 0 #fff, 0 3px 0 rgba(225, 190, 205, .6); cursor: pointer; }
.bb-step b { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2.5px solid #D9D2DC; color: var(--bb-navy); font: 800 17px var(--bb-font); }
.bb-step b svg { width: 20px; height: 20px; color: var(--bb-focus); }
.bb-step.on { background: linear-gradient(180deg, #D3EFFF, #9FD6F6); border-color: var(--bb-blue-rim); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), 0 3px 0 var(--bb-blue-shadow); }
.bb-step.on b { background: var(--bb-focus); border-color: #fff; color: #fff; box-shadow: 0 0 0 2px var(--bb-focus); }
.bb-step:disabled { cursor: default; color: #5F6890; }
.bb-line { width: 70px; height: 4px; border-radius: 4px; background: #D8D1DC; } .bb-line.done { background: linear-gradient(90deg, #7CC6F0, #4FA8E6); }

/* progress & spinner (kit) */
.bb-progress { height: 22px; border-radius: 999px; background: #FBF6F8; border: 2.5px solid #E6D9E0; overflow: hidden; box-shadow: inset 0 2px 3px rgba(150, 110, 130, .1); }
.bb-progress > s { display: block; height: 100%; border-radius: 999px; background: linear-gradient(180deg, #8AD1F7, #3E9FE6); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45); }
.bb-spin { width: 46px; height: 46px; border-radius: 50%; border: 6px solid #E6E3EC; border-top-color: #5C6890; animation: bb-spin 1s linear infinite; }
@keyframes bb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bb-spin { animation-duration: 3s; } }

/* ===================== the whole game picks up the kit ===================== */
.sign { background: var(--bb-pink-bg); border: 4px solid var(--bb-pink-line); border-radius: 36px; box-shadow: inset 0 0 0 4px #FFF7FA, 0 22px 50px rgba(176, 86, 130, .25); color: var(--bb-ink-soft); }
.sign-head h2 { background: linear-gradient(180deg, #FFFDFC, #F7EEF2) !important; color: var(--bb-navy) !important; clip-path: none !important; transform: none !important; filter: none !important;
  border: 2.5px solid #EBDDE3; border-radius: 999px !important; box-shadow: inset 0 2px 0 #fff, 0 4px 0 rgba(225, 190, 205, .7) !important; font-family: var(--bb-font); }
.sign-head p { color: var(--bb-muted); }
.sign button, .app button, .phone button:not(.exit-tab):not(.back):not(.papp):not(.ptab) { background: linear-gradient(180deg, var(--bb-blue-hi), var(--bb-blue) 55%, var(--bb-blue-lo)); color: var(--bb-navy);
  border: 2px solid var(--bb-blue-rim); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), 0 3px 0 var(--bb-blue-shadow); font-weight: 800; }
.sign button:hover, .app button:hover { background: linear-gradient(180deg, #DDF3FF, var(--bb-blue-hi) 55%, var(--bb-blue)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), 0 4px 0 var(--bb-blue-shadow); }
.sign button.ghost, .app button.ghost, .phone button.ghost { background: var(--bb-cream) !important; color: var(--bb-navy) !important; border: 2px solid var(--bb-pink-line) !important; box-shadow: inset 0 2px 0 #fff, 0 3px 0 var(--bb-pink-shadow) !important; }
.sign button.chip, .app button.chip { background: var(--bb-cream); color: var(--bb-ink-soft); border: 2px solid var(--bb-pink-line); box-shadow: none; }
.sign button.chip.on, .app button.chip.on { background: linear-gradient(180deg, #D3EFFF, #9FD6F6); color: var(--bb-navy); border-color: var(--bb-blue-rim); }
.sign button:disabled, .app button:disabled { background: #ECE9EF !important; border-color: #DCD7E0 !important; color: #8C90AA !important; box-shadow: none !important; }
.sign button.armed, .app button.armed { background: linear-gradient(180deg, #FFB3B3, var(--bb-red)) !important; color: #fff !important; border-color: #D85555 !important; }
.sign .exit-tab, .phone .exit-tab { background: var(--bb-cream) !important; border: 3px solid var(--bb-pink-line) !important; box-shadow: 0 4px 0 var(--bb-pink-shadow) !important; }
.row { background: var(--bb-card); border: 2px solid var(--bb-card-line); }
.price { background: linear-gradient(180deg, var(--bb-gold-hi), var(--bb-gold)); border: 2px solid var(--bb-gold-rim); color: var(--bb-navy); }
input[type=number], input[type=text], input[type=password], input[type=email], select, textarea { border-radius: 14px; border-color: #E3D8DE; background: #fff; color: var(--bb-navy); }
input:focus, select:focus, textarea:focus { border-color: var(--bb-focus); }

/* toasts: Saved / Added to bag (blue), Connection lost (red) */
.toast { background: linear-gradient(180deg, #E8F6FF, #CBE9FB) !important; color: var(--bb-navy) !important; border: 2.5px solid #8CC9EF !important; border-radius: 22px !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), 0 6px 18px rgba(70, 130, 190, .2) !important; font: 800 16px var(--bb-font); padding: 10px 20px !important; }
.toast.ok { background: linear-gradient(180deg, #E8F6FF, #CBE9FB) !important; color: var(--bb-navy) !important; }
.toast.ok::before { content: ""; display: inline-block; width: 9px; height: 16px; border: solid var(--bb-navy); border-width: 0 3.5px 3.5px 0; transform: translateY(-2px) rotate(45deg); margin: 0 14px 0 4px; vertical-align: middle; }
.toast.err { background: #FFF4F4 !important; color: var(--bb-navy) !important; border-color: var(--bb-red-line) !important; box-shadow: 0 6px 18px rgba(220, 90, 90, .18) !important; }
.toast.err::before { content: "!"; display: inline-grid; place-items: center; width: 24px; height: 22px; margin: 0 12px 0 0; color: #fff; background: var(--bb-red); clip-path: polygon(50% 0, 100% 100%, 0 100%); font: 900 13px/1 var(--bb-font); padding-top: 5px; box-sizing: border-box; vertical-align: middle; }

/* HUD bits that use the old teal */
#prompt { background: linear-gradient(180deg, #D3EFFF, #9FD6F6) !important; color: var(--bb-navy) !important; border: 2.5px solid var(--bb-blue-rim); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), 0 4px 0 var(--bb-blue-shadow) !important; }
#prompt kbd { background: #fff !important; color: var(--bb-navy) !important; }
#prompt q { background: #fff; color: var(--bb-navy); }
#money { background: linear-gradient(180deg, var(--bb-gold-hi), var(--bb-gold) 55%, #F8B92A); border: 2px solid var(--bb-gold-rim); color: var(--bb-navy); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), 0 3px 0 #C98309; }
.need s, .bar s { background: linear-gradient(180deg, #8AD1F7, #3E9FE6); }
.need b, .bar { background: #F7EFF3; box-shadow: inset 0 0 0 2px #EAD9E1; }

/* ===================== sign-in, reset, verify ===================== */
#auth.bb-on { padding: 0; display: block !important; place-items: unset; background: #F8DCE6; overflow: hidden auto; isolation: isolate; font-family: var(--bb-font); }
#auth.bb-on::before, #auth.bb-on::after { content: none; display: none; }
.bb-auth { position: relative; width: 100%; min-height: 100vh; min-height: 100dvh; box-sizing: border-box; }
.bb-scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #F8DCE6; }
.bb-scene::before { content: ""; position: absolute; inset: -40px; background: url("/img/ui/login_bg.jpg") right center / cover no-repeat; filter: blur(16px) saturate(1.12) brightness(1.04); }
.bb-scene img { position: absolute; left: 0; top: 0; height: 100%; width: auto; min-width: 64%; object-fit: cover; object-position: left center; -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent); mask-image: linear-gradient(90deg, #000 80%, transparent); }
.bb-scene.soft img { width: 100%; filter: blur(2.5px) saturate(1.05); -webkit-mask-image: none; mask-image: none; }
.bb-scene.soft::after { content: ""; position: absolute; inset: 0; background: rgba(255, 228, 238, .22); }
.bb-brand { position: absolute; left: 0; top: max(10px, 2vh); width: 63%; text-align: center; pointer-events: none; }
.bb-brand .bb-word.logo { font-size: clamp(44px, 5.8vw, 96px); }
.bb-brand .bb-sub { margin-top: 2px; font-size: clamp(18px, 2.2vw, 32px); }
.bb-brand .bb-sub i { background: #fff; box-shadow: 0 1px 0 #3E5FA8; opacity: 1; width: 40px; }
.bb-langdd { position: fixed; top: max(14px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); z-index: 5; }
.bb-langdd select { appearance: none; -webkit-appearance: none; border-radius: 999px; border: 2.5px solid #F0D4DE; background: #FFFDFC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231B2A6B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") right 16px center / 14px no-repeat;
  color: var(--bb-navy); font: 800 20px var(--bb-font); padding: 8px 44px 8px 22px; min-width: 150px; width: auto; box-shadow: 0 4px 0 var(--bb-pink-shadow), 0 8px 18px rgba(176, 86, 130, .18); cursor: pointer; }
.bb-authcard { position: relative; box-sizing: border-box; width: min(520px, 34vw); min-width: 400px; margin: 0 max(3vw, 24px) 0 auto; top: max(84px, 11vh); padding: 18px 38px 22px;
  background: var(--bb-pink-bg); border: 4px solid var(--bb-pink-line); border-radius: 40px; box-shadow: inset 0 0 0 4px #FFF7FA, 0 22px 50px rgba(176, 86, 130, .28); animation: bb-pop .35s var(--bb-ease) both; }
.bb-authcard > .bb-word.card { font-size: 72px; margin: -64px -30px 0; }
.bb-authcard > .bb-word.card.stack { margin-top: -82px; font-size: 62px; line-height: .92; }
.bb-authcard .bb-btn.big { margin-top: 14px; }
.bb-alt { margin: 14px 0 0; text-align: center; font: 800 17px var(--bb-font); color: var(--bb-navy2); }
.bb-alt.links { display: flex; justify-content: center; gap: 14px; align-items: center; } .bb-alt.links span { color: var(--bb-muted); }
.bb-or { display: flex; align-items: center; gap: 14px; margin: 16px 0 12px; font: 800 17px var(--bb-font); color: var(--bb-navy2); }
.bb-or i { flex: 1; height: 2.5px; background: #3E5FA8; border-radius: 2px; opacity: .8; }
.bb-google { background: #fff !important; border-color: #E4DCE2 !important; font-size: 20px !important; gap: 14px; }
.bb-google svg { width: 30px; height: 30px; }
.bb-legal { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 16px 0 0; } .bb-legal span { color: var(--bb-navy2); font-weight: 900; }
.bb-legal .bb-link { text-decoration: none; font-size: 16px; }
.bb-msg { margin: 14px 4px 0; text-align: center; font: 700 17px/1.35 var(--bb-font); color: var(--bb-navy2); } .bb-msg.strong { font-weight: 800; font-size: 19px; color: var(--bb-navy); }
.bb-envelope { display: block; width: 120px; height: auto; margin: 4px auto 0; filter: drop-shadow(0 6px 8px rgba(120, 140, 190, .25)); }
.bb-masked { margin: 10px 0 0; padding: 10px 14px; border-radius: 14px; border: 2.5px solid #E3D8DE; background: #fff; text-align: center; font: 800 21px var(--bb-font); color: var(--bb-navy); }
.bb-inline { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; } .bb-inline .bb-label { grid-column: 1 / -1; }
.bb-authcard .bb-btn.grey { margin-top: 12px; font-size: 19px; }
@keyframes bb-pop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bb-authcard, .bb-panel.bb-enter { animation: none; } }

/* ===================== creator ===================== */
.bb-create { display: flex; justify-content: center; padding: 64px max(16px, env(safe-area-inset-right)) 22px max(16px, env(safe-area-inset-left)); }
.bb-panel.bb-cc { width: min(1300px, 100%); box-sizing: border-box; padding: 0 30px 20px; display: flex; flex-direction: column; background: var(--bb-pink-bg); }
.bb-panel.bb-enter { animation: bb-pop .35s var(--bb-ease) both; }
.bb-cchead { text-align: center; }
.bb-cchead .bb-word.title { font-size: 64px; margin: -50px 0 0; }
.bb-cchead .bb-sub { margin-top: 2px; font-size: 22px; }
.bb-ccmain { padding: 16px 0 10px; flex: 1; min-height: 0; }
.bb-foot { display: flex; align-items: center; gap: 20px; padding-top: 8px; }
.bb-foot .bb-btn { font-size: 22px; padding: 13px 34px; }
.bb-foot .bb-btn.white { min-width: 200px; }
.bb-foot #a-go { margin-left: auto; min-width: 300px; }
.bb-foot .bb-gap { flex: 1; }
.bb-hint { flex: 1; display: flex; align-items: center; gap: 16px; margin: 0; color: var(--bb-muted); font: 700 16px var(--bb-font); }
.bb-hint::before, .bb-hint::after { content: ""; flex: 1; height: 2px; background: #E2D3DB; border-radius: 2px; } .bb-hint span { flex: none; max-width: 70%; text-align: center; }
.bb-chibi { position: fixed; bottom: 0; z-index: 2; height: min(46vh, 430px); width: auto; pointer-events: none; filter: drop-shadow(0 10px 14px rgba(120, 60, 100, .25)); }
.bb-chibi.girl { left: max(0px, env(safe-area-inset-left)); } .bb-chibi.boy { right: max(0px, env(safe-area-inset-right)); }
.bb-create.has-chibi .bb-panel.bb-cc { width: min(1260px, 78vw); }
.bb-create.has-chibi .bb-foot { padding-left: 70px; padding-right: 70px; }

/* step 1 in pink: presets | preview | tabs (reuses the cc-* layout) */
#auth .bb-cc .cc-s1 { height: min(540px, calc(100vh - 290px)); min-height: 430px; }
#auth .bb-cc .cc-bub { background: var(--bb-card); border: 2px solid var(--bb-card-line); border-radius: 26px; box-shadow: inset 0 2px 0 #fff, 0 3px 0 rgba(233, 196, 210, .55); }
#auth .bb-cc .cc-preset { background: #FFFDFC; border: 2.5px solid #F0E1E7; }
#auth .bb-cc .cc-preset-tag { background: linear-gradient(180deg, #D3EFFF, #9FD6F6); color: var(--bb-navy); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8); }
#auth .bb-cc .cc-preset.on { border: 3px solid var(--bb-focus); box-shadow: 0 0 0 4px rgba(62, 159, 230, .15); }
#auth .bb-cc .cc-check { background: var(--bb-focus); }
#auth .bb-cc .cc-name .cc-label { color: var(--bb-navy); }
#auth .bb-cc .cc-name .bb-field { padding: 10px 14px !important; }
#auth .bb-cc .cc-name .bb-btn.sm { align-self: stretch; padding: 0 20px; font-size: 17px; border-radius: 14px; }
#auth .bb-cc .cc-turn { color: var(--bb-navy); font-family: var(--bb-font); }
#auth .bb-cc .cc-turn .bb-btn.sq { color: var(--bb-navy); }
#auth .bb-cc .cc-pedestal { background: #F3D4DF; } #auth .bb-cc .cc-pedestal::before { background: radial-gradient(ellipse at 50% 38%, #FFFFFF 0%, #FFF4F8 62%, #F8DDE7 100%); }
#auth .bb-cc .cc-pill { background: linear-gradient(180deg, #FFFDFC, #F7EEF2); border: 2.5px solid #EBDDE3; color: var(--bb-navy); box-shadow: inset 0 2px 0 #fff, 0 3px 0 rgba(225, 190, 205, .6); }
#auth .bb-cc .cc-pill.on { background: linear-gradient(180deg, #D3EFFF, #9FD6F6); border-color: var(--bb-blue-rim); color: var(--bb-navy); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), 0 3px 0 var(--bb-blue-shadow); }
#auth .bb-cc .cc-tile { background: #FFFDFC; border: 2.5px solid #F0E1E7; color: var(--bb-navy); }
#auth .bb-cc .cc-tile.on { border: 3px solid var(--bb-focus); background: #F4FAFF; }
#auth .bb-cc .cc-tile:hover { border-color: #9FD0F0; }
#auth .bb-cc .cc-sub { color: var(--bb-navy2); }
#auth .bb-cc .cc-well { background: #FBF1F5; border: 2px solid #F2E1E8; }
#auth .bb-cc .cc-dot.on { box-shadow: 0 0 0 3px var(--bb-focus), inset 0 -3px 0 rgba(0, 0, 0, .12); }
#auth .bb-cc .bb-err { margin-top: 4px; }

/* home, page 1: neighbourhoods */
.bb-nbgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 26px; }
.bb-nb { position: relative; display: flex; align-items: center; gap: 22px; padding: 12px 20px 12px 12px; border-radius: 28px; border: 3px solid #F0E1E7; background: linear-gradient(180deg, #FFFDFC, #FBF3F6); cursor: pointer; text-align: left;
  box-shadow: inset 0 2px 0 #fff, 0 4px 0 rgba(230, 196, 210, .6); transition: transform .15s var(--bb-ease), border-color .15s; }
.bb-nb:hover { transform: translateY(-2px); }
.bb-nb.on { border-color: var(--bb-focus); box-shadow: 0 0 0 4px rgba(62, 159, 230, .18), 0 4px 0 rgba(94, 159, 207, .5); }
.bb-nbpic { flex: none; width: 56%; aspect-ratio: 316 / 192; border-radius: 18px; overflow: hidden; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); }
.bb-nbpic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-nbtxt { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.bb-nbtxt strong { font: 800 32px/1.05 var(--bb-font); color: var(--bb-navy); }
.bb-nbtxt .bb-chip { font-size: 17px; }
.bb-tick { position: absolute; top: 10px; left: calc(56% - 34px); width: 44px; height: 44px; border-radius: 50%; display: none; place-items: center; background: var(--bb-focus); color: #fff; box-shadow: 0 0 0 3px #fff, 0 3px 6px rgba(40, 90, 150, .3); }
.bb-tick svg { width: 26px; height: 26px; } .bb-nb.on .bb-tick { display: grid; }
.bb-infobar { display: flex; align-items: center; justify-content: center; gap: 18px; width: fit-content; max-width: 100%; margin: 22px auto 4px; padding: 12px 34px; border-radius: 22px; background: #FFFDFE; border: 2px solid #E3E6F2; box-shadow: 0 3px 0 rgba(200, 205, 230, .5); }
.bb-infobar svg { width: 44px; height: 44px; color: var(--bb-navy2); flex: none; }
.bb-infobar b { display: block; font: 800 21px var(--bb-font); color: var(--bb-navy); } .bb-infobar small { display: block; font: 700 15px var(--bb-font); color: var(--bb-muted); text-align: center; }

/* home, page 2: studio layouts + door picker */
.bb-studio { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: stretch; }
.bb-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bb-plancard { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 12px 14px; border-radius: 28px; border: 3px solid #F0E1E7; background: linear-gradient(180deg, #FFFDFC, #FBF3F6); cursor: pointer;
  box-shadow: inset 0 2px 0 #fff, 0 4px 0 rgba(230, 196, 210, .6); transition: transform .15s var(--bb-ease); }
.bb-plancard:hover { transform: translateY(-2px); }
.bb-plancard.on { border-color: var(--bb-focus); background: linear-gradient(180deg, #E9F6FF, #D3ECFC); box-shadow: 0 0 0 4px rgba(62, 159, 230, .16), 0 4px 0 rgba(94, 159, 207, .5); }
.bb-plantitle { display: flex; align-items: center; gap: 12px; font: 800 24px var(--bb-font); color: var(--bb-navy); white-space: nowrap; }
.bb-plancard img { width: 100%; height: auto; border-radius: 16px; }
.bb-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.bb-chips em { font-style: normal; border-radius: 999px; padding: 5px 14px; background: #FFFDFC; border: 2px solid #EBDDE3; font: 800 17px var(--bb-font); color: var(--bb-navy); }
.bb-plandetail { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 4px 0 24px; border-left: 2px solid #EADDE3; }
.bb-plandetail img { width: 100%; max-width: 330px; height: auto; border-radius: 16px; }
.bb-plandetail h3 { margin: 8px 0 2px; font: 800 36px var(--bb-font); color: var(--bb-navy); }
.bb-plandetail p { margin: 0 0 12px; font: 700 18px var(--bb-font); color: var(--bb-navy2); }
.bb-selects { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; }
.bb-selects label { display: flex; flex-direction: column; gap: 4px; align-items: stretch; text-align: left; font: 800 19px var(--bb-font); color: var(--bb-navy); }
.bb-selects select { appearance: none; -webkit-appearance: none; border-radius: 14px; border: 2.5px solid #E3D8DE; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231B2A6B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") right 14px center / 14px no-repeat;
  font: 800 22px var(--bb-font); color: var(--bb-navy); padding: 9px 38px 9px 16px; }
.bb-loc { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; margin-top: 14px; padding: 10px 16px; border-radius: 16px; border: 2.5px solid #E3D8DE; background: #fff; font: 800 18px var(--bb-font); color: var(--bb-navy); }
.bb-loc svg { width: 24px; height: 24px; color: #4F87C9; flex: none; }
.bb-plandetail .bb-hr { width: 80%; } .bb-plandetail small { font: 700 15px var(--bb-font); color: var(--bb-navy2); }

/* step 3: summary + account */
.bb-start { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; max-width: 980px; margin: 0 auto; align-items: start; }
.bb-sum { display: flex; align-items: center; gap: 20px; padding: 18px 22px; }
.bb-sum .cc-sum-pic { width: 150px; height: 190px; border-radius: 20px; background: radial-gradient(ellipse 60% 18% at 50% 90%, #F6D9E3, transparent 70%), #FFF6F9; flex: none; }
.bb-sumtxt { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; font: 700 16px var(--bb-font); color: var(--bb-navy2); }
.bb-sumtxt strong { font: 800 30px var(--bb-font); color: var(--bb-navy); }
.bb-sumtxt span { display: inline-flex; align-items: center; gap: 6px; } .bb-sumtxt svg { width: 20px; height: 20px; color: #4F87C9; }
.bb-acct { padding: 18px 24px 20px; }
.bb-acct .bb-label { margin-top: 8px; font-size: 16px; }
.bb-acct .bb-field { padding: 10px 16px !important; font-size: 17px !important; }

/* creator fit: one screen tall at desktop sizes, no page scroll */
.bb-create { padding-top: 58px; padding-bottom: 12px; }
#auth .bb-cc .cc-s1 { height: min(540px, calc(100vh - 300px)); min-height: 380px; }
#auth .bb-cc .cc-name { flex-wrap: wrap; gap: 6px 10px; } #auth .bb-cc .cc-name .cc-label { flex-basis: 100%; margin: 0 2px; font-size: 15px; }
#auth .bb-cc .cc-name .bb-field { flex: 1; min-width: 0; }
.bb-create.page-studio .bb-panel.bb-cc { width: min(1320px, 88vw); }
.bb-create.page-studio .bb-chibi { height: min(32vh, 300px); }
.bb-plans { align-items: start; }
.bb-plantitle { font-size: 20px; gap: 10px; }
.bb-chips { flex-wrap: nowrap; } .bb-chips em { font-size: 15px; padding: 4px 12px; }
.bb-plandetail img { width: auto; max-width: 100%; max-height: min(230px, 27vh); }
.bb-plandetail h3 { font-size: 30px; } .bb-plandetail p { font-size: 15px; margin-bottom: 8px; }
.bb-loc { font-size: 16px; white-space: nowrap; } .bb-loc span { overflow: hidden; text-overflow: ellipsis; }

/* ===================== home shop ===================== */
#modal .mall.bb-shop { position: relative; width: min(1600px, 96vw); height: min(860px, 90vh); overflow: visible; background: var(--bb-pink-bg); border: 4px solid var(--bb-pink-line); border-radius: 44px;
  box-shadow: inset 0 0 0 4px #FFF7FA, 0 24px 60px rgba(176, 86, 130, .3); margin-top: 40px; }
.bb-shop .bb-peek { position: absolute; top: -118px; height: 132px; width: auto; z-index: 3; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(150, 70, 110, .2)); }
.bb-shop .bb-peek.g { left: 70px; } .bb-shop .bb-peek.b { left: 230px; }
.bb-shophead { display: flex; align-items: center; gap: 18px; padding: 14px 26px 4px 380px; background: none !important; color: var(--bb-navy) !important; min-height: 74px; }
.bb-shophead .bb-word.shop { font-size: 78px; margin: -70px 0 0; text-align: left; flex: none; }
.bb-shophead .bb-sub { margin: 0; font-size: 28px; flex: none; }
.bb-shophead .sp { flex: 1; }
.bb-vsep { width: 2.5px; height: 46px; background: #E4CFD8; border-radius: 2px; }
.bb-x { width: 62px !important; height: 62px !important; border-radius: 50% !important; border: 3px solid #F0D7E0 !important; background: #FFFDFC !important; color: var(--bb-navy) !important; display: grid !important; place-items: center; padding: 0 !important; box-shadow: 0 4px 0 var(--bb-pink-shadow) !important; margin: 0 !important; }
.bb-x svg { width: 30px; height: 30px; }
.bb-shop .mall-body { grid-template-columns: 220px minmax(0, 1fr) 400px; gap: 22px; padding: 10px 26px 24px; }
.bb-shop .mcats { gap: 14px; overflow-y: auto; }
.bb-shop .mcats button { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 22px; background: linear-gradient(180deg, #FFFDFC, #F6EEF1); color: var(--bb-navy); border: 2.5px solid #EEDFE5;
  font: 800 22px var(--bb-font); box-shadow: inset 0 2px 0 #fff, 0 4px 0 rgba(225, 190, 205, .7); text-align: left; }
.bb-shop .mcats button .ic { width: 50px; height: 50px; margin: 0; object-fit: contain; flex: none; }
.bb-shop .mcats button.on { background: linear-gradient(180deg, #D3EFFF, #9FD6F6); border-color: var(--bb-blue-rim); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), 0 4px 0 var(--bb-blue-shadow); }
.bb-shop .mmain { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.bb-shop .mtools { display: flex; gap: 16px; }
.bb-shop .msearch { flex: 1; display: flex; align-items: center; gap: 12px; padding: 0 20px; border-radius: 999px; border: 2.5px solid #E7DBE1; background: #FFFDFE; box-shadow: inset 0 2px 3px rgba(150, 110, 130, .08); }
.bb-shop .msearch svg { width: 30px; height: 30px; color: var(--bb-navy); flex: none; }
.bb-shop .msearch input { flex: 1; width: auto; border: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0; font: 700 22px var(--bb-font); color: var(--bb-navy); padding: 12px 0; outline: none; min-width: 0; }
.bb-shop #mall-sort { appearance: none; -webkit-appearance: none; border-radius: 999px; border: 2.5px solid #E7DBE1; background: #FFFDFE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 6 5-6z' fill='%231B2A6B'/%3E%3C/svg%3E") right 20px center / 16px no-repeat;
  font: 800 22px var(--bb-font); color: var(--bb-navy); padding: 12px 54px 12px 26px; }
.bb-shop .mgrid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 16px; overflow-y: auto; padding: 4px; }
.bb-shop .mtile { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; padding: 10px 8px 12px; border-radius: 24px; border: 2.5px solid #F0E3E8; background: linear-gradient(180deg, #FFFDFC, #FBF4F7);
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 rgba(230, 196, 210, .6); min-height: 0; }
.bb-shop .mtile .mpic { flex: 1 1 auto; min-height: 0; width: 100%; display: grid; place-items: center; }
.bb-shop .mtile .mpic .ic { width: auto; height: 100%; max-height: 130px; max-width: 100%; aspect-ratio: 1; margin: 0; }
.bb-shop .mtile b { font: 800 21px/1.1 var(--bb-font); color: var(--bb-navy); text-align: center; }
.bb-shop .mtile .bb-coin { font-size: 22px; padding: 2px 22px 2px 4px; } .bb-shop .mtile .bb-coin .bb-coinic { width: 30px; height: 30px; }
.bb-shop .mtile.on { border: 3px solid var(--bb-focus); box-shadow: 0 0 0 3px rgba(62, 159, 230, .15), 0 3px 0 rgba(94, 159, 207, .4); }
.bb-shop .mtile.on::after { content: ""; position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%; background: var(--bb-focus) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat; box-shadow: 0 0 0 3px #fff; }
.bb-shop .mown { position: absolute; top: 8px; right: 8px; z-index: 1; border-radius: 999px; padding: 3px 12px; background: linear-gradient(180deg, #A9DCF8, #7EC2EF); color: #fff; font: 800 15px var(--bb-font); text-shadow: 0 1px 0 rgba(40, 90, 150, .4); }
.bb-shop .mtile.on .mown { right: 48px; }
.bb-shop .mpager { display: flex; align-items: center; justify-content: center; gap: 30px; font: 800 26px var(--bb-font); color: var(--bb-navy); }
.bb-shop .mpager button { width: 64px; height: 46px; border-radius: 999px; border: 2.5px solid #EBDDE3; background: #FFFDFC; color: var(--bb-navy); display: grid; place-items: center; box-shadow: 0 3px 0 rgba(225, 190, 205, .7); padding: 0; }
.bb-shop .mpager button svg { width: 26px; height: 26px; } .bb-shop .mpager button:disabled { opacity: .45; }
.bb-shop .mdetail { gap: 10px; padding: 20px 22px 22px; border-radius: 30px; background: linear-gradient(180deg, #FFFDFC, #FBF3F6); border: 2.5px solid #F0E1E7; box-shadow: inset 0 2px 0 #fff; }
.bb-shop .mbig { width: 100%; display: grid; place-items: center; } .bb-shop .mbig .ic { width: 230px; height: 230px; margin: 0; }
.bb-shop .mdetail h3 { font: 800 40px/1.05 var(--bb-font); color: var(--bb-navy); }
.bb-shop .mdetail small { font: 700 19px var(--bb-font); color: var(--bb-navy2); }
.bb-shop .mdetail .bb-coin.big { margin: 4px 0; padding: 4px 40px 4px 6px; }
.bb-shop .mdetail button { width: 100%; font-size: 24px !important; padding: 14px !important; border-radius: 999px !important; }
.bb-shop .mdetail .note { color: var(--bb-muted); font-size: 13px; }
/* header like the mockup: chibis peek over the top-left corner, the wordmark sits centred on the top edge, coins + close on the right */
.bb-shophead { position: relative; padding: 14px 26px 4px; min-height: 84px; }
.bb-shophead .bb-word.shop { position: absolute; left: 50%; top: -60px; transform: translateX(-50%); margin: 0; font-size: 76px; }
.bb-shophead .bb-sub { position: absolute; left: 50%; top: 32px; transform: translateX(-50%); white-space: nowrap; font-size: 26px; }
.bb-shop.mall .mdetail button { background: linear-gradient(180deg, var(--bb-blue-hi), var(--bb-blue) 55%, var(--bb-blue-lo)); color: var(--bb-navy); border: 2.5px solid var(--bb-blue-rim); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), 0 4px 0 var(--bb-blue-shadow); }
.bb-shop.mall .mdetail button.ghost { background: #FFFDFC; color: var(--bb-navy); border: 2.5px solid #EBDDE3; box-shadow: inset 0 2px 0 #fff, 0 4px 0 var(--bb-pink-shadow); }
.bb-shop #mall-sort { width: auto; min-width: 230px; }
/* colour swatches on clothes that come in several colours; "Goes to your furniture storage" under Buy */
.bb-shop .msw { display: flex; justify-content: center; gap: 5px; margin: -2px 0 1px; }
.bb-shop .msw i, .bb-shop .mswbig i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); border: 2px solid #fff; box-shadow: 0 0 0 1.5px #D9C8D0; cursor: pointer; }
.bb-shop .msw i.on, .bb-shop .mswbig i.on { box-shadow: 0 0 0 2.5px var(--bb-focus); }
.bb-shop .mswatch { display: flex; align-items: center; gap: 12px; font: 800 17px var(--bb-font); color: var(--bb-navy2); }
.bb-shop .mswbig { display: flex; gap: 9px; } .bb-shop .mswbig i { width: 28px; height: 28px; border-width: 3px; }
.bb-shop .mstore, .bb-confirm .mstore { display: block; margin: -2px 0 2px; text-align: center; font: 700 14px var(--bb-font); color: var(--bb-navy2); }
.bb-confirm .mstore { text-align: left; margin-top: 6px; }
/* confirm purchase */
.bb-confirm-back { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; background: rgba(255, 236, 244, .55); border-radius: 40px; backdrop-filter: blur(2px); }
.bb-confirm { position: relative; width: min(500px, 90%); padding: 22px 26px 22px; background: var(--bb-pink-bg); border: 4px solid var(--bb-pink-line); border-radius: 34px; box-shadow: inset 0 0 0 4px #FFF7FA, 0 20px 40px rgba(176, 86, 130, .3); animation: bb-pop .25s var(--bb-ease) both; }
.bb-confirm .bb-word.sm { font-size: 46px; margin: -52px 0 6px; }
.bb-confirm-body { display: flex; align-items: center; gap: 18px; padding: 8px 6px 14px; }
.bb-confirm-pic .ic { width: 150px; height: 150px; margin: 0; }
.bb-confirm-body p { margin: 0 0 10px; font: 800 22px var(--bb-font); color: var(--bb-navy); }
.bb-confirm-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bb-confirm-btns .bb-btn { font-size: 22px !important; padding: 12px !important; color: var(--bb-navy) !important; }
.bb-confirm-btns .bb-btn.white { background: #FFFDFC !important; border: 2.5px solid #EBDDE3 !important; box-shadow: inset 0 2px 0 #fff, 0 4px 0 var(--bb-pink-shadow) !important; }

/* ===================== My life phone ===================== */
#modal .phone.dark.bb-phone { background: #FCE7EF; color: var(--bb-navy); border-radius: 56px; border: 4px solid #F3C9D7; box-shadow: 0 0 0 14px #3A3E52, 0 0 0 17px #262938, 0 30px 60px rgba(40, 30, 60, .45); padding: 22px 22px 18px; width: min(520px, 92vw); }
.bb-phone .ptab { position: absolute; top: -66px; right: 34px; display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(180deg, #D3EFFF, #9FD6F6) !important; color: var(--bb-navy) !important; border: 2.5px solid var(--bb-blue-rim) !important;
  border-radius: 999px !important; padding: 10px 26px !important; font: 800 22px var(--bb-font); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), 0 4px 0 var(--bb-blue-shadow) !important; }
.bb-phone .ptab svg { width: 22px; height: 22px; }
.bb-phone .phone-top { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.bb-phone .ptime { font: 800 30px var(--bb-font); color: var(--bb-navy); }
.bb-phone .bb-coin.big { font-size: 26px; }
.bb-phone .ptitle { display: flex; align-items: center; gap: 14px; margin: 6px 0 12px; }
.bb-phone .ptitle::before, .bb-phone .ptitle::after { content: ""; flex: 1; height: 2.5px; background: #4F6AAE; border-radius: 2px; opacity: .8; }
.bb-phone .bb-word.phonew { font-size: 56px; }
.bb-phone .phone-top .bb-coin, .bb-phone .phone-top .ptime { flex: none; }
#modal .phone.dark.bb-phone { width: min(450px, 92vw); }
#modal .bb-phone .papp i { width: 74px; height: 74px; border-radius: 20px; } #modal .bb-phone .papp span { font-size: 17px; margin-top: 4px; } #modal .bb-phone .papp { padding: 7px 4px 6px !important; }
#modal .bb-phone .apps2 { gap: 10px; }
#modal .bb-phone .pbar span { white-space: nowrap; font-size: 15px; }
.bb-phone .pbar span button { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 2px !important; font-size: 15px !important; }
.bb-phone .apps2 { gap: 16px; }
.bb-phone .papp { background: linear-gradient(180deg, #FFFDFC, #F7EFF2) !important; border: 2.5px solid #F2E2E8 !important; border-radius: 22px !important; padding: 12px 6px 10px !important; color: var(--bb-navy) !important; box-shadow: inset 0 2px 0 #fff, 0 3px 0 rgba(228, 196, 210, .6) !important; }
.bb-phone .papp i { width: 100px; height: 100px; border-radius: 26px; background: linear-gradient(180deg, #B8E2FA, #8CCBF3); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(80, 140, 190, .3); overflow: hidden; }
.bb-phone .papp i img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-phone .papp span { font: 800 22px var(--bb-font); color: var(--bb-navy); margin-top: 6px; }
.bb-phone .pmore button { background: #FFFDFC !important; color: var(--bb-navy) !important; border: 2px solid #F0DCE4 !important; box-shadow: none !important; font: 800 14px var(--bb-font); }
.bb-phone .pbar { background: #FFF8FA; border: 2px solid #F2E2E8; border-radius: 22px; padding: 8px 10px; }
.bb-phone .pbar span { color: var(--bb-navy); }
.bb-phone .pbar span button { color: var(--bb-navy) !important; font: 800 18px var(--bb-font) !important; }
.bb-phone .pbar i { background: #4F6AAE; opacity: .5; }
.bb-phone .pbar .pill { color: var(--bb-navy) !important; border: 2.5px solid #E2D7DD !important; background: #FFFDFC !important; font: 800 20px var(--bb-font) !important; padding: 8px 22px !important; }
.bb-phone .pbar .pill.on { background: linear-gradient(180deg, #D3EFFF, #9FD6F6) !important; border-color: var(--bb-blue-rim) !important; }
#modal .phone:not(.dark) { background: #FCEEF3; border: 4px solid #F3C9D7; box-shadow: 0 0 0 10px #3A3E52, 0 24px 50px rgba(40, 30, 60, .4); }

/* optional personal profile (phone app) */
.pf { display: flex; flex-direction: column; gap: 12px; }
.pf-sec { padding: 12px 14px 14px; }
.pf-sec .bb-label { margin: 4px 2px 6px; font-size: 16px; }
.pf-dob { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr; gap: 8px; } .pf-dob .bb-select select { font-size: 16px; padding: 8px 32px 8px 12px; }
.pf-age { display: flex; align-items: center; gap: 12px; margin-top: 10px; font: 800 16px var(--bb-font); color: var(--bb-navy); }
.bb-ro { min-width: 64px; text-align: center; border-radius: 12px; padding: 6px 12px; background: #E9EEF7; border: 2px solid #D7DFEE; font: 800 22px var(--bb-font); color: var(--bb-navy); }
.pf-eth { display: grid; grid-template-columns: 1fr; gap: 0; padding: 6px 8px; border-radius: 16px; border: 2px solid #E3E6F2; background: #fff; margin: 6px 0 4px; }
.pf-tog { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 2px; font: 800 17px var(--bb-font); color: var(--bb-navy); }
.pf-prevs { display: grid; gap: 10px; }
.pf-prev { border-radius: 18px; border: 2px solid #EADDE3; background: #fff; overflow: hidden; }
.pf-prev.shared { border-color: #8CC9EF; box-shadow: 0 0 0 2px rgba(62, 159, 230, .15); }
.pf-prev h5 { margin: 0; padding: 7px 12px; text-align: center; font: 800 16px var(--bb-font); color: var(--bb-navy); background: #FBF3F6; }
.pf-prev.shared h5 { background: linear-gradient(180deg, #E1F3FE, #C3E5FA); }
.pf-prev > div { display: flex; gap: 10px; align-items: center; padding: 10px 12px; }
.pf-prev canvas { width: 72px; height: 82px; border-radius: 14px; background: #E4F4FE; flex: none; }
.pf-prev b { display: block; font: 800 20px var(--bb-font); color: var(--bb-navy); } .pf-prev small { display: block; font: 700 13px var(--bb-font); color: var(--bb-muted); } .pf-prev p { margin: 4px 0 0; font: 700 14px/1.3 var(--bb-font); color: var(--bb-navy2); }
.pf-btns { display: grid; gap: 8px; }

/* ===================== build mode ===================== */
#build-top { gap: 14px !important; top: max(12px, env(safe-area-inset-top)) !important; left: max(16px, env(safe-area-inset-left)) !important; right: max(16px, env(safe-area-inset-right)) !important; transform: none !important; justify-content: space-between; align-items: center; }
#build-top .bt-where { display: flex; flex-direction: column; align-items: center; padding: 8px 26px; border-radius: 26px; background: #FFFDFC; border: 2.5px solid #F2D9E2; box-shadow: 0 4px 0 var(--bb-pink-shadow), 0 8px 18px rgba(176, 86, 130, .15); color: var(--bb-navy); }
#build-top .bt-where b { font: 800 26px var(--bb-font); } #build-top .bt-where span { font: 800 20px var(--bb-font); }
#build-top .bt-mid { flex: 1; text-align: center; min-width: 0; }
#build-top .bb-word.build { font-size: 64px; }
#build-top .bb-sub { margin-top: -2px; font-size: 24px; }
#build-top .bt-count { border-radius: 999px; padding: 8px 22px; background: #FFFDFC; border: 2.5px solid #DFE7F5; color: var(--bb-navy); font: 800 26px var(--bb-font); box-shadow: 0 3px 0 rgba(180, 195, 225, .6); }
#build-top .bt-done { border-radius: 999px; padding: 10px 40px; background: linear-gradient(180deg, var(--bb-blue-hi), var(--bb-blue) 55%, var(--bb-blue-lo)); border: 2.5px solid var(--bb-blue-rim); color: var(--bb-navy); font: 800 28px var(--bb-font);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), 0 4px 0 var(--bb-blue-shadow); cursor: pointer; }
#build-top .bt-set { width: 64px; height: 64px; border-radius: 50%; border: 2.5px solid #F2D9E2; background: #FFFDFC; color: #5A5F75; display: grid; place-items: center; box-shadow: 0 4px 0 var(--bb-pink-shadow); cursor: pointer; padding: 0; }
#build-top .bt-set svg { width: 34px; height: 34px; }
#build { background: var(--bb-pink-bg) !important; border: 4px solid var(--bb-pink-line) !important; border-radius: 36px !important; box-shadow: inset 0 0 0 4px #FFF7FA, 0 -6px 30px rgba(176, 86, 130, .18) !important; padding: 14px 20px 16px !important; bottom: max(10px, env(safe-area-inset-bottom)) !important; }
#build .bhead { gap: 16px !important; }
#build .btitle { display: inline-flex; align-items: center; gap: 12px; padding-right: 18px; border-right: 2.5px solid #E4CFD8; color: var(--bb-navy); }
#build .btitle svg { width: 50px; height: 36px; } #build .btitle b { font: 800 34px var(--bb-font); color: var(--bb-navy); }
#build .bsearch { border-radius: 999px !important; border: 2.5px solid #E7DBE1 !important; background: #FFFDFE !important; }
#build .bsearch input { font: 700 20px var(--bb-font) !important; color: var(--bb-navy) !important; }
#build .btabs { margin-left: auto; display: flex; gap: 14px; }
#build .btabs button { border-radius: 999px; padding: 9px 34px; background: #FFFDFC; border: 2.5px solid #EBDDE3; color: var(--bb-navy); font: 800 24px var(--bb-font); box-shadow: inset 0 2px 0 #fff, 0 3px 0 rgba(225, 190, 205, .7); cursor: pointer; }
#build .btabs button.on { background: linear-gradient(180deg, var(--bb-blue-hi), var(--bb-blue) 55%, var(--bb-blue-lo)); border-color: var(--bb-blue-rim); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), 0 3px 0 var(--bb-blue-shadow); }
#build .btabs button i { font-style: normal; font-size: 15px; background: #fff; border-radius: 999px; padding: 0 8px; margin-left: 4px; }
.bchips { gap: 14px !important; padding: 4px 2px 6px !important; }
.bchips button { border-radius: 999px !important; padding: 7px 30px !important; background: #FFFDFC !important; border: 2.5px solid #EBDDE3 !important; color: var(--bb-navy) !important; font: 800 21px var(--bb-font) !important; box-shadow: inset 0 2px 0 #fff, 0 3px 0 rgba(225, 190, 205, .7) !important; }
.bchips button.on { background: linear-gradient(180deg, var(--bb-blue-hi), var(--bb-blue) 55%, var(--bb-blue-lo)) !important; border-color: var(--bb-blue-rim) !important; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), 0 3px 0 var(--bb-blue-shadow) !important; }
#build .bgrid { grid-auto-columns: 176px !important; height: 196px !important; gap: 14px !important; padding: 4px 4px 6px; }
#build .btile { display: flex !important; flex-direction: column; align-items: center; justify-content: space-between; padding: 8px 8px 10px !important; border-radius: 24px !important; background: linear-gradient(180deg, #FFFDFC, #FBF4F7) !important; border: 2.5px solid #F0E3E8; box-shadow: inset 0 2px 0 #fff, 0 3px 0 rgba(230, 196, 210, .6) !important; overflow: visible; min-height: 0; }
#build .btile .bpic { flex: 1 1 auto; min-height: 0; width: 100%; display: grid; place-items: center; }
#build .btile .bpic .ic { width: auto !important; height: 100% !important; max-height: 130px; aspect-ratio: 1; margin: 0; }
#build .btile em { flex: none; display: inline-flex; align-items: center; gap: 4px; margin: 6px 0 0 !important; border-radius: 999px !important; font: 800 18px var(--bb-font) !important; font-style: normal !important; line-height: 1.2; white-space: nowrap; }
#build .btile em.own { background: #FFFDFC !important; color: var(--bb-navy) !important; border: 2.5px solid #EBDDE3; box-shadow: none !important; padding: 3px 18px !important; }
#build .btile em.coin { background: linear-gradient(180deg, var(--bb-gold-hi), var(--bb-gold)) !important; border: 2px solid var(--bb-gold-rim); color: var(--bb-navy) !important; padding: 2px 16px 2px 3px !important; }
#build .btile em.coin svg { width: 24px; height: 24px; }
#build .btile.on { border: 3px solid var(--bb-focus) !important; box-shadow: 0 0 0 3px rgba(62, 159, 230, .15) !important; }
#build .btile.on::after { content: ""; position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 50%; background: var(--bb-focus) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; box-shadow: 0 0 0 3px #fff; }
#build-card { background: var(--bb-pink-bg) !important; border: 3px solid var(--bb-pink-line) !important; border-radius: 26px !important; color: var(--bb-navy) !important; }
#build-tip { background: #FFFDFC !important; color: var(--bb-navy) !important; border: 2.5px solid #EADDE3 !important; border-radius: 22px !important; font: 800 24px var(--bb-font) !important; padding: 8px 24px !important; box-shadow: 0 6px 16px rgba(176, 86, 130, .18) !important; }
#build-tip::after { border-top-color: #FFFDFC !important; }
#build-tip.bad { background: #FFF4F4 !important; color: #C24444 !important; border-color: var(--bb-red-line) !important; } #build-tip.bad::after { border-top-color: #FFF4F4 !important; }
.btools { background: #FFFDFC !important; border: 2.5px solid #F0DDE5; border-radius: 34px !important; padding: 8px !important; gap: 8px !important; box-shadow: 0 6px 18px rgba(176, 86, 130, .2) !important; }
.btools button { width: 58px !important; height: 58px !important; background: #fff !important; color: var(--bb-navy2) !important; border: 2.5px solid #EAE3EC !important; box-shadow: 0 3px 0 rgba(200, 190, 210, .7) !important; display: grid !important; place-items: center; }
.btools button svg { width: 32px; height: 32px; }
.btools button.del { color: #E0453E !important; }
.btools button.sell.armed { background: #FFE9E9 !important; border-color: var(--bb-red-line) !important; }
#build-bar .bok { width: 70px !important; height: 70px !important; border-radius: 50% !important; background: linear-gradient(180deg, #8FD3F7, #3E9FE6) !important; color: var(--bb-navy) !important; border: 3px solid #fff !important; box-shadow: 0 0 0 2.5px var(--bb-blue-rim), 0 4px 0 var(--bb-blue-shadow) !important; display: grid !important; place-items: center; }
#build-bar .bok svg { width: 38px; height: 38px; color: var(--bb-navy); }
#build-bar .bok:disabled { background: #ECE9EF !important; box-shadow: 0 0 0 2.5px #DCD7E0 !important; }
#build-bar .bprice { background: linear-gradient(180deg, var(--bb-gold-hi), var(--bb-gold)); border: 2px solid var(--bb-gold-rim); color: var(--bb-navy); border-radius: 999px; padding: 3px 14px; font: 800 16px var(--bb-font); }

/* ===================== in-game HUD (gameplay concept): light cream cards, navy type, 3D prop pictures ===================== */
img.ic { object-fit: contain; vertical-align: middle; }
:root { --hud: rgba(255, 252, 246, .96); --hud-line: #F2E6DA; --hud-text: var(--bb-navy); --hud-sub: #6B7396; --hud-shadow: 0 2px 0 rgba(232, 214, 200, .55), 0 8px 22px rgba(120, 90, 80, .12);
  --pc: #FFFBF3; --pc-line: #EFE1CF; --pc-dash: #E2CDB4; --pc-tape1: rgba(166, 214, 242, .72); --pc-tape2: rgba(246, 176, 200, .72); --pc-ink: rgba(104, 118, 168, .62); }
#loc, #goal, #needs, #dock, #hint, #life-shop, #money, #topright button, #chat-toggle, #chat { border: 1.5px solid var(--hud-line) !important; box-shadow: var(--hud-shadow) !important; font-family: var(--bb-font); }
#loc { top: 12px; left: 12px; gap: 8px; padding: 6px 26px 6px 8px; border-radius: 18px; background: var(--hud); }
#loc-ic { width: 40px; height: 40px; background: none; border-radius: 0; } #loc-ic .ic { width: 40px; height: 40px; }
#loc-name { font: 800 19px/1.15 var(--bb-font); color: var(--hud-text); }
#clock { font: 700 11.5px/1.25 var(--bb-font); color: var(--hud-sub); }
#goal { top: 74px; left: 12px; gap: 8px; padding: 6px 10px 6px 8px !important; border-radius: 18px !important; background: var(--hud) !important; max-width: 300px; }
#goal .gl-ic { width: 36px; height: 36px; background: none; border-radius: 0; } #goal .gl-ic .ic { width: 36px; height: 36px; }
#goal span { flex: 1; min-width: 0; }
#goal b { font: 800 13.5px/1.2 var(--bb-font); color: var(--hud-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#goal small { font: 700 11px/1.25 var(--bb-font); color: var(--hud-sub); }
#goal em { gap: 2px; margin-left: 6px; padding: 2px 9px 2px 4px; border-radius: 999px; background: #FFF0C4; border: 1px solid #F5DB8E; color: var(--hud-text); font: 800 12.5px var(--bb-font); }
#goal em .ic { width: 18px; height: 18px; }
#topright { top: 12px; right: 12px; gap: 8px; align-items: center; }
#money { height: 42px; box-sizing: border-box; gap: 4px; padding: 0 16px 0 5px; border-radius: 999px; background: linear-gradient(180deg, #FFF6D6, #FFEAA8); border-color: #F6DA8C !important; color: var(--hud-text); font: 800 19px var(--bb-font); }
#money .ic { width: 30px; height: 30px; }
#money.neg { background: #FFE9EE; color: #C2405E; }
#topright button { width: 44px; height: 44px; box-sizing: border-box; border-radius: 15px; background: rgba(255, 250, 246, .78); display: grid; place-items: center; padding: 0; backdrop-filter: blur(4px); }
#topright button .ic { width: 32px; height: 32px; }
#topright #mood-btn { background: rgba(250, 226, 236, .82); }
#topright button:hover { transform: translateY(-1px); background: #FFFCF6; } #topright button:active { transform: translateY(2px); }
#needs { top: 66px; right: 12px; width: 178px; box-sizing: border-box; padding: 8px 12px 10px; gap: 4px; border-radius: 18px; background: var(--hud); }
.st-head { margin-bottom: 1px; } .st-head b { font: 700 12px var(--bb-font); color: var(--hud-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-head .ic { width: 24px; height: 24px; flex: none; }
#needs .need { grid-template-columns: 20px auto 1fr; gap: 6px; }
#needs .need .ic { width: 20px; height: 20px; }
#needs .need span { font: 800 11.5px var(--bb-font); color: var(--hud-text); min-width: 44px; }
#needs .need b { height: 5px; border-radius: 999px; background: #EFEAE6; box-shadow: none; }
#needs .need s { border-radius: 999px; background: #6CC79A; }
#needs .need.energy s { background: #F2C64E; }
#needs .need.mood s, #needs .need.fun s { background: #EE8FAE; }
#needs .need.low s { background: #F4A54A; } #needs .need.crit s { background: var(--bb-red); }
#dock { bottom: 12px; gap: 2px; padding: 5px 8px; border-radius: 22px; background: var(--hud); }
#dock button { width: 60px; padding: 4px 0 3px; border-radius: 16px; color: var(--hud-text); font: 800 12px var(--bb-font); gap: 1px; }
#dock button .ic { width: 36px; height: 36px; }
#dock button:hover { background: #FBF1EC; }
#dock button.on { background: linear-gradient(180deg, #E4F4FE, #CBE9FB); box-shadow: inset 0 0 0 1.5px #A9D8F4; color: #24427F; }
#hint { left: 12px; bottom: 12px; gap: 6px; padding: 5px 14px 5px 7px; border-radius: 999px; background: var(--hud); color: var(--hud-text); font: 800 11.5px var(--bb-font); letter-spacing: 0; }
#hint .ic { width: 22px; height: 22px; }
#life-shop { right: 12px; bottom: 12px; gap: 6px; padding: 5px 16px 5px 7px; border-radius: 16px; background: var(--hud); color: var(--hud-text); font: 800 13px var(--bb-font); }
#life-shop .ic { width: 30px; height: 30px; }
#prompt { font-family: var(--bb-font); }

/* ---------- postcard dressing, shared by the chat, dialogs, the player card and confirm windows ---------- */
.pc { position: relative; }
.pc-tape { position: absolute; z-index: 3; width: 58px; height: 18px; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .28) 0 3px, transparent 3px 7px), var(--pc-tape1);
  clip-path: polygon(0 8%, 4% 0, 96% 0, 100% 10%, 97% 30%, 100% 50%, 97% 70%, 100% 90%, 96% 100%, 4% 100%, 0 92%, 3% 70%, 0 50%, 3% 30%); }
.pc-tape.a { left: -16px; top: 6px; transform: rotate(-38deg); }
.pc-tape.b { right: -16px; bottom: 8px; transform: rotate(-38deg); background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .28) 0 3px, transparent 3px 7px), var(--pc-tape2); }
.pc-stamp { position: absolute; z-index: 2; top: 8px; right: 10px; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--pc-ink); display: grid; place-items: center; transform: rotate(-12deg); pointer-events: none;
  outline: 1px dashed var(--pc-ink); outline-offset: -5px; }
.pc-stamp b { font: 800 10px/1 var(--bb-font); color: var(--pc-ink); letter-spacing: .02em; }
.pc-stamp::after { content: ""; position: absolute; left: -18px; top: 50%; width: 16px; height: 8px; margin-top: -4px; border-top: 1.5px solid var(--pc-ink); border-bottom: 1.5px solid var(--pc-ink); border-radius: 50%; opacity: .7; }
/* dialogs (shop / clerk / place windows, the player card) */
.sign.pc { overflow: visible; }
.sign.pc::after { content: ""; position: absolute; inset: 9px; border: 2px dashed rgba(226, 178, 198, .85); border-radius: 28px; pointer-events: none; z-index: 1; }
.sign.pc > .sign-head, .sign.pc > .sign-body { position: relative; z-index: 2; }
.sign.pc .pc-tape { width: 74px; height: 22px; } .sign.pc .pc-tape.a { left: -30px; top: 2px; } .sign.pc .pc-tape.b { right: -24px; bottom: 10px; }
.sign.pc .pc-stamp { top: 20px; right: 84px; width: 44px; height: 44px; opacity: .8; z-index: 3; } .sign.pc .pc-stamp b { font-size: 12px; }
.bb-confirm.pc::after { content: ""; position: absolute; inset: 8px; border: 2px dashed rgba(226, 178, 198, .85); border-radius: 26px; pointer-events: none; }
.bb-confirm .pc-stamp { top: 12px; right: 16px; width: 42px; height: 42px; } .bb-confirm .pc-stamp b { font-size: 12px; }
.bb-confirm > *:not(.pc-tape):not(.pc-stamp) { position: relative; z-index: 2; }

/* ---------- chat postcard ---------- */
#chat { left: 12px; bottom: 98px; width: min(250px, calc(100vw - 24px)); border-radius: 16px; background: var(--pc) !important; border-color: var(--pc-line) !important; color: var(--hud-text); backdrop-filter: none; overflow: visible; }
#chat .pc-stamp { top: 7px; right: 9px; width: 26px; height: 26px; outline-offset: -4px; } #chat .pc-stamp b { font-size: 8.5px; } #chat .pc-stamp::after { display: none; }
#chat .pc-tape.a { left: -14px; top: -2px; } #chat .pc-tape.b { right: -14px; bottom: -4px; }
.chat-tabs { align-items: center; gap: 4px; margin: 0; padding: 8px 40px 6px 10px; border: 0; }
.chat-badge { width: 24px; height: 24px; flex: none; margin-right: 4px; border-radius: 50%; background: #F9E6EC; border: 1.5px solid #F0D2DC; display: flex; align-items: center; justify-content: center; gap: 2px; }
.chat-badge s { width: 3.5px; height: 3.5px; border-radius: 50%; background: #C98AA2; text-decoration: none; }
.chat-tabs button { border-radius: 999px; padding: 3px 12px; color: var(--hud-sub); font: 800 12px var(--bb-font); background: transparent; }
.chat-tabs button.on { background: #FADCE6; color: #B24A73; box-shadow: inset 0 0 0 1px #F3C3D3; }
#chat-log { box-sizing: border-box; height: 92px; margin: 0 10px 8px; padding: 6px 10px; border: 1.5px dashed var(--pc-dash); border-radius: 10px; background: #FFFDF8; color: var(--hud-text); font: 600 12px/1.35 var(--bb-font); }
#chat .msg { margin: 0 0 6px; } #chat .msg:last-child { margin-bottom: 0; }
#chat .msg b { display: inline-block; margin: 0 4px 0 0; font: 800 11.5px var(--bb-font); color: #3E86C2; }
#chat .msg span.raw { display: block; color: var(--hud-text); }
#chat .msg.who1 b { color: #C9578A; } #chat .msg.who2 b { color: #2E9A93; } #chat .msg.who3 b { color: #8A63C9; }
#chat .msg i { background: #E4F4FE; color: #3E86C2; font-size: 10px; border-radius: 999px; padding: 0 6px; }
#chat .msg.news span { color: #A7801C; }
.chat-field { position: relative; margin: 0 10px 10px; }
#chat-input { box-sizing: border-box; width: 100%; margin: 0; border: 1.5px solid #D9E7F2 !important; border-radius: 10px; background: #fff; color: var(--hud-text); font: 600 12px var(--bb-font); padding: 6px 34px 6px 10px; }
#chat-input::placeholder { color: #8A90AA; }
#chat-input:focus { outline: none; border-color: var(--bb-focus) !important; }
.chat-enter { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 22px; height: 18px; padding: 0; border: 1px solid #BFE0F5; border-radius: 6px; background: #E4F4FE; color: #3E86C2; display: grid; place-items: center; cursor: pointer; }
.chat-enter svg { width: 13px; height: 13px; }
#chat-toggle { left: 12px; bottom: 50px; width: 36px; height: 36px; border-radius: 50% !important; background: var(--pc) !important; display: grid !important; place-items: center; padding: 0; }
#chat-toggle::before { content: ""; position: absolute; left: 7px; top: 8px; width: 22px; height: 16px; border-radius: 9px; background: #F9E6EC; border: 1.5px solid #F0D2DC; box-sizing: border-box; }
#chat-toggle i { position: relative; z-index: 1; display: inline-block; width: 3.5px; height: 3.5px; margin: 0 1px; border-radius: 50%; background: #C98AA2; transform: translateY(-2px); }
#chat-toggle { display: flex !important; align-items: center; justify-content: center; }
#chat-toggle:hover { background: #FFFDF8 !important; }

/* ---------- name tags, speech balloons, the player pill ---------- */
.tag-name { background: rgba(255, 252, 246, .94); color: var(--bb-navy); font: 800 11px var(--bb-font); padding: 2px 9px; border-radius: 999px; text-shadow: none; box-shadow: 0 1px 0 rgba(220, 200, 185, .8), 0 2px 6px rgba(60, 40, 40, .15); border: 1px solid #F2E6DA; }
.tag-name.me { color: #C9578A; }
.tag-bubble { background: var(--pc); color: var(--bb-navy); font: 700 12px/1.35 var(--bb-font); border: 1.5px solid var(--pc-line); border-radius: 14px; padding: 6px 11px; box-shadow: inset 0 0 0 3px var(--pc), inset 0 0 0 4.5px rgba(226, 205, 180, .9), 0 3px 10px rgba(60, 40, 40, .18); }
.tag-bubble::after { border-top-color: var(--pc); }
.pp-wrap { pointer-events: none; }
.pp { pointer-events: auto; display: flex; align-items: center; gap: 4px; padding: 4px 6px; transform: translateY(46px); border-radius: 14px; background: var(--pc); border: 1.5px solid var(--pc-line); box-shadow: inset 0 0 0 2.5px var(--pc), inset 0 0 0 4px rgba(226, 205, 180, .8), 0 6px 16px rgba(60, 40, 40, .2); font-family: var(--bb-font); white-space: nowrap; }
.pp kbd { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: #E4F4FE; border: 1px solid #BFE0F5; color: var(--bb-navy); font: 800 11px var(--bb-font); margin: 0 2px; }
.pp button { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 5px; border: 0; border-radius: 10px; background: transparent; color: var(--bb-navy); font: 800 12.5px var(--bb-font); cursor: pointer; }
.pp button .ic { width: 22px; height: 22px; }
.pp button:hover { background: #FBF0EB; }
.pp .pp-chat { background: #FADCE6; box-shadow: inset 0 0 0 1px #F3C3D3; }

/* ===================== rotate-your-phone (portrait phones) ===================== */
#rotate { position: fixed; inset: 0; z-index: 9999; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; text-align: center;
  background: radial-gradient(ellipse at 50% 35%, #FFF6FA, #FBDDE8); font-family: var(--bb-font); color: var(--bb-navy); }
#rotate .bb-word { font-size: clamp(30px, 10vw, 48px); }
#rotate svg { width: 130px; height: 130px; }
#rotate p { margin: 0; font: 800 20px/1.35 var(--bb-font); max-width: 300px; }
#rotate .rot-phone { transform-origin: 50% 50%; animation: bb-rot 2.4s var(--bb-ease) infinite; }
@keyframes bb-rot { 0%, 25% { transform: rotate(0); } 55%, 100% { transform: rotate(-90deg); } }
@media (prefers-reduced-motion: reduce) { #rotate .rot-phone { animation: none; transform: rotate(-90deg); } }
@media (orientation: portrait) and (max-width: 820px) and (pointer: coarse) { #rotate { display: flex; } }

/* ===================== desktop sizes between phone and full HD ===================== */
@media (max-width: 1400px) {
  .bb-shophead .bb-word.shop { font-size: 66px; top: -52px; } .bb-shophead .bb-sub { font-size: 22px; top: 30px; }
  .bb-shop .mall-body { grid-template-columns: 190px minmax(0, 1fr) 330px; }
  .bb-shop .mcats button { font-size: 19px; } .bb-shop .mtile b { font-size: 18px; } .bb-shop .mdetail h3 { font-size: 32px; } .bb-shop .mbig .ic { width: 180px; height: 180px; }
  #build-top .bb-word.build { font-size: 52px; }
}

/* ===================== phones and small windows in landscape: everything shrinks to fit the height, nothing scrolls the page ===================== */
@media (max-height: 520px) and (orientation: landscape) {
  .bb-word { font-size: 34px; } .bb-sub { font-size: 14px; gap: 8px; } .bb-sub i { width: 22px; }
  .bb-label { font-size: 13px; margin: 6px 2px 3px; }
  .bb-field { font-size: 14px !important; padding: 7px 12px !important; border-radius: 12px !important; }
  .bb-btn { font-size: 14px; padding: 7px 16px; gap: 6px; } .bb-btn.big { font-size: 16px; padding: 8px 14px; } .bb-btn .bb-arr { width: 16px; height: 16px; } .bb-btn.sq { width: 36px; height: 36px; border-radius: 12px; }
  .bb-check { font-size: 13px; } .bb-check i { width: 20px; height: 20px; } .bb-link { font-size: 13px; }
  .bb-coin { font-size: 13px; padding: 2px 12px 2px 3px; } .bb-coin .bb-coinic { width: 18px; height: 18px; } .bb-coin.big { font-size: 16px; padding: 2px 14px 2px 3px; } .bb-coin.big .bb-coinic { width: 24px; height: 24px; }
  .bb-chip { font-size: 12px; padding: 3px 10px; }
  .bb-step { font-size: 13px; padding: 3px 14px 3px 3px; gap: 6px; } .bb-step b { width: 22px; height: 22px; font-size: 12px; } .bb-step b svg { width: 14px; height: 14px; } .bb-line { width: 26px; height: 3px; }
  .bb-steps { margin-top: 4px; }
  /* sign-in cards: card on the right, scrolls inside itself when the screen is very short */
  #auth.bb-on { overflow: hidden; }
  .bb-auth.bb-login { height: 100vh; height: 100dvh; min-height: 0; }
  .bb-brand { width: 56%; top: max(6px, env(safe-area-inset-top)); left: max(0px, env(safe-area-inset-left)); } .bb-brand .bb-word.logo { font-size: clamp(26px, 5vw, 46px); } .bb-brand .bb-sub { font-size: 13px; }
  .bb-langdd select { min-width: 100px; font-size: 13px; padding: 4px 30px 4px 12px; background-position: right 10px center; background-size: 10px; }
  .bb-authcard { position: absolute; top: 34px; bottom: max(6px, env(safe-area-inset-bottom)); right: max(10px, env(safe-area-inset-right)); margin: 0; width: min(380px, 44vw); min-width: 0; padding: 10px 18px 10px; border-radius: 26px; border-width: 3px; overflow-y: auto; scrollbar-width: none; }
  .bb-authcard > .bb-word.card { font-size: 32px; margin: -2px -10px 0; } .bb-authcard > .bb-word.card.stack { margin-top: 0; font-size: 28px; }
  .bb-serif { font-size: 15px; margin: 2px 0 4px; }
  .bb-row { margin: 6px 2px 0; } .bb-alt { font-size: 13px; margin-top: 6px; } .bb-or { margin: 6px 0; font-size: 12px; } .bb-legal { margin-top: 6px; } .bb-legal .bb-link { font-size: 12px; }
  .bb-google svg { width: 20px; height: 20px; } .bb-google { font-size: 14px !important; }
  .bb-msg { font-size: 13px; margin-top: 6px; } .bb-msg.strong { font-size: 14px; } .bb-envelope { width: 60px; } .bb-masked { font-size: 15px; padding: 5px 10px; margin-top: 4px; } .bb-authcard .bb-btn.big { margin-top: 8px; }
  .bb-note { font-size: 12px; padding: 5px 10px; } .bb-err { font-size: 12px; }
  /* creator: one panel that fills the screen; the middle scrolls inside */
  .bb-create { height: 100vh; height: 100dvh; box-sizing: border-box; padding: 22px max(10px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
  .bb-panel.bb-cc { height: 100%; padding: 0 14px 8px; border-radius: 24px; border-width: 3px; }
  .bb-cchead { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
  .bb-cchead .bb-word.title { font-size: 28px; margin: -18px 0 0; flex-basis: 100%; }
  .bb-cchead .bb-sub { display: none; }
  .bb-ccmain { padding: 6px 0 4px; overflow-y: auto; scrollbar-width: none; }
  .bb-foot { gap: 10px; padding-top: 4px; } .bb-foot .bb-btn { font-size: 14px; padding: 7px 16px; } .bb-foot .bb-btn.white { min-width: 0; } .bb-foot #a-go { min-width: 0; }
  .bb-hint { font-size: 11px; gap: 8px; }
  .bb-chibi { display: none; } .bb-create.has-chibi .bb-panel.bb-cc { width: 100%; } .bb-create.has-chibi .bb-foot { padding-left: 0; padding-right: 0; }
  #auth .bb-cc .cc-s1 { height: 100%; min-height: 0; grid-template-columns: minmax(0, .9fr) minmax(0, .7fr) minmax(0, 1.2fr); grid-template-areas: "left center right"; align-items: stretch; gap: 10px; }
  #auth .bb-cc .cc-bub { border-radius: 16px; padding: 6px; }
  #auth .bb-cc .cc-left { gap: 6px; } #auth .bb-cc .cc-presets { gap: 6px; }
  #auth .bb-cc .cc-preset { padding: 4px; border-radius: 14px; } #auth .bb-cc .cc-preset-tag { font-size: 11px; padding: 3px 0; border-radius: 9px; } #auth .bb-cc .cc-preset-pic { margin-top: 2px; transform: none; }
  #auth .bb-cc .cc-name { padding: 6px; gap: 6px; } #auth .bb-cc .cc-name .cc-label { font-size: 11px; } #auth .bb-cc .cc-name .bb-btn.sm { padding: 0 8px; font-size: 12px; }
  #auth .bb-cc .cc-stagebox { max-height: calc(100% - 44px); }
  #auth .bb-cc .cc-turn { margin-top: 2px; gap: 8px; font-size: 12px; }
  #auth .bb-cc .cc-tabs2 { gap: 4px; } #auth .bb-cc .cc-pill { font-size: 12px; padding: 4px 0; }
  #auth .bb-cc .cc-body { margin-top: 6px; }
  #auth .bb-cc .cc-grid.heads { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-bottom: 6px; }
  #auth .bb-cc .cc-grid.heads .cc-tile { padding: 2px; border-radius: 12px; }
  #auth .bb-cc .cc-wells { gap: 5px; } #auth .bb-cc .cc-well { padding: 4px 6px; border-radius: 12px; } #auth .bb-cc .cc-well.row { gap: 6px; } #auth .bb-cc .cc-well.row .cc-dot, #auth .bb-cc .cc-well .cc-dot { width: 22px; height: 22px; }
  .bb-nbgrid { gap: 8px 10px; } .bb-nb { gap: 10px; padding: 6px 10px 6px 6px; border-radius: 16px; border-width: 2.5px; } .bb-nbtxt { gap: 4px; } .bb-nbtxt strong { font-size: 17px; } .bb-nbpic { border-radius: 10px; width: 50%; }
  .bb-tick { width: 26px; height: 26px; top: 4px; left: calc(50% - 20px); } .bb-tick svg { width: 16px; height: 16px; }
  .bb-infobar { margin: 8px auto 0; padding: 5px 14px; gap: 8px; border-radius: 14px; } .bb-infobar svg { width: 24px; height: 24px; } .bb-infobar b { font-size: 12px; } .bb-infobar small { font-size: 10px; }
  .bb-studio { grid-template-columns: minmax(0, 1fr) minmax(170px, 30%); gap: 10px; }
  .bb-plans { gap: 8px; } .bb-plancard { padding: 6px; gap: 4px; border-radius: 16px; border-width: 2.5px; } .bb-plantitle { font-size: 12px; gap: 5px; } .bb-radio { width: 18px; height: 18px; border-width: 2px; } .bb-radio svg { width: 12px; height: 12px; }
  .bb-plancard img { border-radius: 10px; } .bb-chips em { font-size: 10px; padding: 2px 6px; } .bb-chips { gap: 4px; }
  .bb-plandetail { padding-left: 10px; } .bb-plandetail img { max-width: 150px; border-radius: 10px; } .bb-plandetail h3 { font-size: 17px; margin: 2px 0 0; } .bb-plandetail p { font-size: 11px; margin-bottom: 4px; }
  .bb-selects { gap: 6px; } .bb-selects label { font-size: 11px; } .bb-selects select { font-size: 14px; padding: 4px 24px 4px 8px; border-radius: 10px; background-size: 10px; background-position: right 8px center; }
  .bb-loc { margin-top: 6px; padding: 4px 8px; font-size: 11px; gap: 4px; border-radius: 10px; } .bb-loc svg { width: 14px; height: 14px; } .bb-plandetail .bb-hr { margin: 6px; } .bb-plandetail small { font-size: 10px; }
  .bb-start { gap: 10px; } .bb-sum { padding: 8px; gap: 8px; } .bb-sum .cc-sum-pic { width: 80px; height: 100px; } .bb-sumtxt { font-size: 12px; gap: 3px; } .bb-sumtxt strong { font-size: 18px; } .bb-acct { padding: 8px 12px; } .bb-cardtitle { font-size: 15px; } .bb-fine { font-size: 10px; }
  /* home shop */
  #modal .mall.bb-shop { width: calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right)); height: calc(100dvh - 40px); margin-top: 26px; border-radius: 24px; border-width: 3px; }
  .bb-shop .bb-peek { height: 50px; top: -44px; } .bb-shop .bb-peek.g { left: 18px; } .bb-shop .bb-peek.b { left: 76px; }
  .bb-shophead { padding: 4px 10px 0; min-height: 34px; gap: 8px; } .bb-shophead .bb-word.shop { font-size: 30px; top: -20px; } .bb-shophead .bb-sub { display: none; } .bb-vsep { height: 26px; }
  .bb-shop #mall-sort { min-width: 0; }
  .bb-x { width: 36px !important; height: 36px !important; } .bb-x svg { width: 18px; height: 18px; }
  .bb-shop .mall-body { grid-template-columns: 112px minmax(0, 1fr) 190px; gap: 8px; padding: 4px 10px 8px; overflow: hidden; }
  .bb-shop .mcats { gap: 5px; flex-direction: column; overflow-x: hidden; overflow-y: auto; } .bb-shop .mcats button { flex: none; } .bb-shop .mcats button { font-size: 12px; padding: 4px 6px; gap: 5px; border-radius: 12px; } .bb-shop .mcats button .ic { width: 24px; height: 24px; }
  .bb-shop .mtools { gap: 6px; } .bb-shop .msearch { padding: 0 10px; gap: 6px; } .bb-shop .msearch svg { width: 16px; height: 16px; } .bb-shop .msearch input { font-size: 13px; padding: 5px 0; } .bb-shop #mall-sort { font-size: 12px; padding: 5px 26px 5px 10px; background-position: right 9px center; background-size: 10px; }
  .bb-shop .mgrid { gap: 6px; grid-auto-rows: 110px; } .bb-shop .mtile { border-radius: 14px; padding: 4px; gap: 2px; } .bb-shop .mtile b { font-size: 11px; } .bb-shop .mtile .bb-coin { font-size: 11px; padding: 1px 8px 1px 2px; } .bb-shop .mtile .bb-coin .bb-coinic { width: 14px; height: 14px; }
  .bb-shop .mtile.on::after { width: 20px; height: 20px; background-size: 13px; top: 4px; right: 4px; } .bb-shop .mown { font-size: 10px; padding: 1px 6px; top: 4px; right: 4px; }
  .bb-shop .mpager { gap: 14px; font-size: 14px; } .bb-shop .mpager button { width: 40px; height: 28px; } .bb-shop .mpager button svg { width: 16px; height: 16px; }
  .bb-shop .mdetail { order: 0; flex-direction: column; flex-wrap: nowrap; padding: 6px 8px; gap: 4px; border-radius: 16px; overflow-y: auto; } .bb-shop .mbig .ic { width: 80px; height: 80px; } .bb-shop .mdetail h3 { font-size: 16px; width: auto; } .bb-shop .mdetail small { font-size: 11px; }
  .bb-shop .mdetail button { font-size: 13px !important; padding: 6px !important; } .bb-shop .mdetail .note { display: none; }
  .bb-shop .msw { gap: 3px; } .bb-shop .msw i { width: 9px; height: 9px; border-width: 1.5px; } .bb-shop .mswatch { font-size: 11px; gap: 6px; } .bb-shop .mswbig { gap: 5px; } .bb-shop .mswbig i { width: 18px; height: 18px; border-width: 2px; } .bb-shop .mstore, .bb-confirm .mstore { font-size: 10px; margin: 0; }
  .bb-confirm { padding: 10px 14px; border-radius: 20px; } .bb-confirm .bb-word.sm { font-size: 24px; margin: -26px 0 2px; } .bb-confirm-pic .ic { width: 70px; height: 70px; } .bb-confirm-body { padding: 4px; gap: 10px; } .bb-confirm-body p { font-size: 14px; margin-bottom: 4px; } .bb-confirm-btns .bb-btn { font-size: 15px !important; padding: 6px !important; }
  /* phone: a short wide phone in landscape — two rows of six */
  #modal .phone.dark.bb-phone { width: min(720px, calc(100vw - 60px)); max-height: calc(100dvh - 44px); border-radius: 28px; padding: 8px 14px 8px; box-shadow: 0 0 0 8px #3A3E52, 0 16px 30px rgba(40, 30, 60, .4); display: flex; flex-direction: column; gap: 4px; margin-top: 22px; }
  .bb-phone .ptab { top: -34px; right: 20px; padding: 3px 14px !important; font-size: 13px; } .bb-phone .ptab svg { width: 14px; height: 14px; }
  .bb-phone .ptime { font-size: 16px; } .bb-phone .ptitle { margin: -26px 0 0; pointer-events: none; } .bb-phone .bb-word.phonew { font-size: 26px; }
  #modal .bb-phone .apps2 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; flex: 1; min-height: 0; overflow-y: auto; }
  #modal .bb-phone .papp { padding: 4px 2px !important; border-radius: 14px !important; } #modal .bb-phone .papp i { width: 52px; height: 52px; border-radius: 14px; } #modal .bb-phone .papp span { font-size: 11px; margin-top: 2px; }
  #modal .bb-phone .pbar span, .bb-phone .pbar span button { font-size: 12px !important; }
  .bb-phone .pmore { gap: 4px; } .bb-phone .pmore button { font-size: 11px; padding: 2px 8px; }
  .bb-phone .pbar { padding: 3px 6px; border-radius: 14px; gap: 6px; } .bb-phone .pbar .pill { font-size: 12px !important; padding: 3px 12px !important; } .bb-phone .pbar span button { font-size: 12px !important; }
  /* build mode */
  #build-top { top: max(6px, env(safe-area-inset-top)) !important; gap: 6px !important; }
  #build-top .bt-where { padding: 3px 12px; border-radius: 14px; } #build-top .bt-where b { font-size: 13px; } #build-top .bt-where span { font-size: 11px; }
  #build-top .bb-word.build { font-size: 24px; } #build-top .bb-sub { display: none; }
  #build-top .bt-count { font-size: 13px; padding: 3px 10px; } #build-top .bt-done { font-size: 14px; padding: 5px 16px; } #build-top .bt-set { width: 34px; height: 34px; } #build-top .bt-set svg { width: 20px; height: 20px; } #build-top .bt-coin { display: none; }
  #build { padding: 6px 10px 8px !important; border-radius: 20px !important; border-width: 3px !important; left: max(8px, env(safe-area-inset-left)) !important; right: max(8px, env(safe-area-inset-right)) !important; gap: 4px !important; }
  #build .btitle svg { width: 28px; height: 20px; } #build .btitle b { font-size: 15px; } #build .btitle { padding-right: 8px; gap: 6px; }
  #build .bsearch input { font-size: 13px !important; } #build .btabs { gap: 6px; } #build .btabs button { font-size: 13px; padding: 3px 14px; }
  .bchips { gap: 6px !important; padding: 2px !important; } .bchips button { font-size: 12px !important; padding: 3px 12px !important; }
  #build .bgrid { grid-auto-columns: 96px !important; height: 104px !important; gap: 6px !important; }
  #build .btile { border-radius: 14px !important; padding: 3px !important; } #build .btile .bpic .ic { max-height: 64px; } #build .btile em { font-size: 11px !important; margin-top: 2px !important; } #build .btile em.own { padding: 1px 8px !important; } #build .btile em.coin svg { width: 14px; height: 14px; }
  #build-tip { font-size: 14px !important; padding: 4px 12px !important; }
  .btools button { width: 38px !important; height: 38px !important; } .btools button svg { width: 22px; height: 22px; } #build-bar .bok { width: 46px !important; height: 46px !important; } #build-bar .bok svg { width: 26px; height: 26px; }
}
@media (max-height: 400px) and (orientation: landscape) {
  .bb-chibi { display: none; }
  .bb-cchead .bb-word.title { font-size: 24px; }
  #auth .bb-cc .cc-grid.heads { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ===================== HUD on landscape phones: smaller cards, compact dock and needs, chat folded into the "..." bubble ===================== */
@media (max-height: 520px) and (orientation: landscape) {
  #loc { top: calc(6px + var(--st)); left: calc(8px + var(--sl)); max-width: 40vw; gap: 5px; padding: 3px 14px 3px 5px; border-radius: 14px; }
  #loc-ic, #loc-ic .ic { width: 26px; height: 26px; }
  #loc-name { font-size: 14px; } #clock { font-size: 9.5px; }
  #goal { top: calc(46px + var(--st)); left: calc(8px + var(--sl)); max-width: 38vw; gap: 5px; padding: 3px 6px 3px 5px !important; border-radius: 12px !important; }
  #goal .gl-ic, #goal .gl-ic .ic { width: 22px; height: 22px; } #goal b { font-size: 11px; } #goal small { display: none; }
  #goal em { font-size: 10.5px; padding: 1px 6px 1px 2px; margin-left: 2px; } #goal em .ic { width: 14px; height: 14px; }
  #topright { top: calc(6px + var(--st)); right: calc(8px + var(--sr)); gap: 5px; }
  #money { height: 30px; font-size: 13px; padding: 0 10px 0 3px; } #money .ic { width: 22px; height: 22px; }
  #topright button { width: 30px; height: 30px; border-radius: 10px; } #topright button .ic { width: 22px; height: 22px; }
  #topright #set-btn { display: grid; }
  #needs { grid-template-columns: 1fr; top: calc(42px + var(--st)); right: calc(8px + var(--sr)); width: 128px; padding: 4px 8px 5px; gap: 1px; border-radius: 12px; }
  .st-head { justify-content: flex-end; margin-bottom: -2px; } .st-head b { display: none; } .st-head .ic { width: 16px; height: 16px; }
  #needs .need { grid-template-columns: 14px auto 1fr; gap: 4px; } #needs .need .ic { width: 14px; height: 14px; } #needs .need span { font-size: 9.5px; min-width: 0; } #needs .need b { height: 4px; }
  #dock { left: 50%; right: auto; transform: translateX(-50%); bottom: calc(5px + var(--sb)); justify-content: center; gap: 0; padding: 2px 5px; border-radius: 16px; }
  #dock button { width: 48px; flex: none; padding: 2px 0 1px; border-radius: 11px; font-size: 9.5px; gap: 0; } #dock button .ic { width: 24px; height: 24px; }
  #hint { display: none; }
  #life-shop { right: calc(8px + var(--sr)); bottom: calc(5px + var(--sb)); padding: 3px; border-radius: 12px; } #life-shop span { display: none; } #life-shop .ic { width: 28px; height: 28px; }
  #chat-toggle { left: calc(8px + var(--sl)); right: auto; bottom: calc(6px + var(--sb)); width: 34px; height: 34px; }
  #chat-toggle::before { left: 6px; top: 7px; }
  #chat { left: calc(8px + var(--sl)); right: auto; bottom: calc(46px + var(--sb)); width: min(260px, 38vw); }
  #chat-log { height: 56px; font-size: 11px; margin-bottom: 5px; } .chat-tabs { padding: 5px 36px 4px 8px; } .chat-tabs button { font-size: 11px; padding: 2px 9px; } .chat-badge { width: 20px; height: 20px; }
  #chat-input { font-size: 16px; padding: 3px 32px 3px 8px; } .chat-field { margin: 0 8px 7px; }
  #joy { left: calc(16px + var(--sl)); bottom: calc(48px + var(--sb)); width: 104px; height: 104px; } #joy i { left: 29px; top: 29px; }
  #prompt { left: auto; right: calc(52px + var(--sr)); transform: none; bottom: calc(48px + var(--sb)); font-size: 13px; padding: 6px 14px 6px 6px; }
  #activity { top: calc(6px + var(--st)); } #toasts { top: calc(46px + var(--st)); }
  .pp { transform: translateY(36px); padding: 3px 4px; gap: 2px; } .pp button { font-size: 11px; padding: 2px 7px 2px 3px; } .pp button .ic { width: 18px; height: 18px; }
  .sign.pc::after { inset: 6px; border-radius: 18px; } .sign.pc .pc-tape { width: 46px; height: 14px; } .sign.pc .pc-stamp { width: 30px; height: 30px; top: 10px; right: 56px; } .sign.pc .pc-stamp b { font-size: 9px; }
}
/* build mode brings its own top bar (place, coins, settings): the walking HUD steps aside */
body.building #loc, body.building #topright, body.building #goal, body.building #needs { display: none !important; }