/* ============================================================
   B1 (Be One) — theme tokens, fonts, shared utilities
   Cultural-tech ritual aesthetic. Chàm đêm base, vàng cổ accent.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Be+Vietnam+Pro:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap&subset=vietnamese,latin');

:root {
  /* surfaces */
  --ink:        #1B2A45;  /* chàm đêm — base, không đen thuần */
  --ink-soft:   #22355A;  /* raised surfaces / glow center */
  --ink-line:   #34507D;  /* hairlines on ink */
  --ink-glass:  rgba(34, 53, 90, 0.66);

  /* accent gold (desaturated, not tech-bright) */
  --gold:       #B89968;
  --gold-dim:   #8A7350;

  /* text on ink */
  --cream:      #EDE5D3;  /* primary text */
  --cream-dim:  #C8C0AE;  /* secondary text */

  /* signature + rare */
  --vermilion:  #A8413A;  /* son ấn — 1-2 elements only */
  --moss:       #5C6E54;  /* rare secondary */

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Be Vietnam Pro', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --r-lg: 8px;
  --r-md: 4px;
  --r-sm: 3px;
}

* { box-sizing: border-box; }

/* ---- screen base ---- */
.b1-screen {
  position: absolute; inset: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 400;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.b1-scroll { overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.b1-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* status-bar / home-indicator safe areas inside the frame */
.b1-safe-top    { padding-top: 56px; }
.b1-safe-bottom { padding-bottom: 30px; }

/* ---- type helpers ---- */
.b1-display { font-family: var(--font-display); font-weight: 500; line-height: 1.04; letter-spacing: 0.2px; }
.b1-mono    { font-family: var(--font-mono); font-weight: 400; letter-spacing: 0.04em; }
.b1-eyebrow {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold);
}
.b1-label   { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-dim); }

/* ---- buttons ---- */
.b1-btn {
  font-family: var(--font-body); font-weight: 500; font-size: 15px;
  border: none; cursor: pointer; border-radius: var(--r-md);
  padding: 16px 22px; display: inline-flex; align-items: center; justify-content: center;
  gap: 9px; transition: transform .12s ease, background .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.b1-btn:active { transform: scale(0.975); }
.b1-btn-primary   { background: var(--gold); color: #15100A; font-weight: 600; box-shadow: 0 8px 24px -8px rgba(184,153,104,.6), inset 0 1px 0 rgba(255,255,255,.24); }
.b1-btn-primary:hover { filter: brightness(1.08); }
.b1-btn-vermilion { background: var(--vermilion); color: #FBEDE9; box-shadow: 0 8px 26px -12px rgba(168,65,58,.85); }
.b1-btn-vermilion:hover { background: #b54a42; }
.b1-btn-ghost     { background: transparent; color: var(--cream-dim); border: 1px solid var(--ink-line); }
.b1-btn-ghost:hover { color: var(--cream); border-color: var(--gold-dim); }
.b1-btn-soft      { background: var(--ink-soft); color: var(--cream); border: 1px solid var(--ink-line); }
.b1-btn:disabled  { opacity: .42; cursor: not-allowed; }
.b1-btn:disabled:active { transform: none; }

/* ---- inputs ---- */
.b1-input {
  width: 100%; font-family: var(--font-body); font-size: 16px; color: var(--cream);
  background: var(--ink-soft); border: 1px solid var(--ink-line);
  border-radius: var(--r-md); padding: 15px 16px; outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.b1-input::placeholder { color: rgba(200,192,174,.45); }
.b1-input:focus { border-color: var(--gold-dim); box-shadow: 0 0 0 3px rgba(184,153,104,.14); }

/* ---- chips ---- */
.b1-chip {
  font-family: var(--font-body); font-size: 13px; font-weight: 400;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--cream-dim);
  border: 1px solid var(--ink-line); transition: all .16s ease;
  -webkit-tap-highlight-color: transparent; white-space: nowrap;
}
.b1-chip:hover { border-color: var(--gold-dim); color: var(--cream); }
.b1-chip.is-on { background: var(--gold); color: #1B1408; border-color: var(--gold); font-weight: 500; }

/* ---- striped image placeholder ---- */
.b1-placeholder {
  position: relative; overflow: hidden;
  background-color: var(--ink-soft);
  background-image: repeating-linear-gradient(
    -45deg, transparent 0 11px, rgba(184,153,104,.07) 11px 22px);
}
.b1-placeholder-label {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  color: rgba(200,192,174,.55); text-transform: uppercase; text-align: center;
  white-space: nowrap;
}

/* ---- divider with seal dot ---- */
.b1-rule { height: 1px; background: var(--ink-line); border: none; }

/* ---- range thumb ---- */
.b1-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--cream); border: 3px solid var(--gold);
  box-shadow: 0 2px 5px rgba(0,0,0,.35); cursor: pointer;
}
.b1-range::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--cream); border: 3px solid var(--gold); cursor: pointer;
}

/* ============================================================
   Engine animations — flying items, danmu, particles, seal
   ============================================================ */
@keyframes b1-float-up {
  0%   { transform: translateY(0) scale(.6); opacity: 0; }
  12%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { transform: translateY(var(--rise, -560px)) scale(1); opacity: 0; }
}
@keyframes b1-sway {
  0%   { transform: translateX(0) rotate(-6deg); }
  50%  { transform: translateX(var(--sway, 26px)) rotate(6deg); }
  100% { transform: translateX(0) rotate(-6deg); }
}
@keyframes b1-mote {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  20%  { opacity: .5; }
  80%  { opacity: .5; }
  100% { transform: translateY(-90px) translateX(var(--drift, 12px)); opacity: 0; }
}
/* particle variants */
@keyframes b1-rise {
  0%   { transform: translate3d(0,0,0) scale(.9); opacity: 0; }
  18%  { opacity: var(--op,.4); }
  82%  { opacity: var(--op,.4); }
  100% { transform: translate3d(var(--drift,20px), var(--rise,-620px), 0) scale(1.1); opacity: 0; }
}
@keyframes b1-fall {
  0%   { transform: translate3d(0,-30px,0) rotate(0deg); opacity: 0; }
  12%  { opacity: var(--op,.55); }
  88%  { opacity: var(--op,.55); }
  100% { transform: translate3d(var(--drift,0px), var(--fall,680px), 0) rotate(var(--rot,0deg)); opacity: 0; }
}
.b1-particle { position: absolute; pointer-events: none; will-change: transform, opacity; }
@keyframes b1-seal-in {
  0%   { transform: rotate(-14deg) scale(1.5); opacity: 0; }
  60%  { transform: rotate(4deg) scale(.92); opacity: 1; }
  100% { transform: rotate(-3deg) scale(1); opacity: 1; }
}
@keyframes b1-rise-in {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes b1-pulse-mic {
  0%,100% { transform: scaleY(.4); }
  50%     { transform: scaleY(1); }
}
@keyframes b1-glow {
  0%,100% { box-shadow: 0 0 0 0 rgba(168,65,58,.5); }
  50%     { box-shadow: 0 0 0 7px rgba(168,65,58,0); }
}
@keyframes b1-blink {
  0%,100% { opacity: 1; }
  50%     { opacity: .35; }
}

.b1-fly-item {
  position: absolute; bottom: 0; pointer-events: none;
  will-change: transform, opacity;
  animation: b1-float-up var(--dur, 6s) ease-out forwards;
}
.b1-fly-item > span {
  display: inline-block;
  animation: b1-sway var(--swaydur, 2.4s) ease-in-out infinite;
}
.b1-mote {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: rgba(184,153,104,.6); pointer-events: none;
  animation: b1-mote var(--dur, 7s) linear infinite;
}
.b1-danmu {
  position: absolute; left: 100%; white-space: nowrap; pointer-events: none;
  font-family: var(--font-body); font-size: 14px; font-weight: 400;
  color: var(--cream); text-shadow: 0 1px 6px rgba(0,0,0,.6);
  will-change: transform;
}
.b1-danmu .av { color: var(--gold); font-weight: 500; }

[data-motes="off"] .b1-mote { display: none; }

@media (prefers-reduced-motion: reduce) {
  .b1-fly-item, .b1-fly-item > span, .b1-mote { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}