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

    :root {
      --pink: #FF2D78;
      --peach: #FF8C3A;
      --teal: #00D4FF;
      --purple: #7B2FBE;
      --yellow: #FFD500;
      --lime: #8FFF3A;
      --soft: #F3E8FF;
      --white: #fff;
      --text: #2D1253;
      --muted: #9B7EC8;
      --r: 22px;
      --shadow-pop: 0 8px 0 rgba(0, 0, 0, .18);
      --shadow-card: 0 6px 24px rgba(100, 30, 180, .15);
    }

    html,
    body {
      height: 100%;
      overflow: hidden
    }

    body {
      font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
      background: linear-gradient(145deg, #1a0533 0%, #2d0b5e 45%, #0d1a4a 100%);
      -webkit-tap-highlight-color: transparent;
      user-select: none
    }

    /* Fall Guys floating blobs + confetti dots on bg */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(ellipse 60% 40% at 20% 20%, rgba(255, 45, 120, .2) 0%, transparent 70%),
        radial-gradient(ellipse 50% 35% at 80% 75%, rgba(0, 212, 255, .17) 0%, transparent 65%),
        radial-gradient(ellipse 40% 30% at 60% 10%, rgba(255, 213, 0, .14) 0%, transparent 60%),
        radial-gradient(ellipse 30% 25% at 10% 80%, rgba(143, 255, 58, .1) 0%, transparent 60%),
        radial-gradient(ellipse 35% 28% at 90% 10%, rgba(123, 47, 190, .15) 0%, transparent 60%);
    }

    /* ── PWA 安装横幅 ── */
    #pwa-banner {
      position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
      background: linear-gradient(135deg, #1e0b3e, #2d0b5e);
      border-top: 1px solid rgba(255,45,120,.4);
      padding: 12px 16px 20px;
      display: flex; align-items: center; gap: 12px;
      box-shadow: 0 -4px 24px rgba(0,0,0,.5);
      transform: translateY(100%); transition: transform .35s ease;
    }
    #pwa-banner.show { transform: translateY(0); }
    #pwa-banner-icon { font-size: 32px; flex-shrink: 0; }
    #pwa-banner-text { flex: 1; min-width: 0; }
    #pwa-banner-text b { display: block; font-size: 14px; color: #fff; font-weight: 800; }
    #pwa-banner-text span { font-size: 12px; color: rgba(255,255,255,.55); line-height: 1.4; }
    #pwa-banner-btn {
      flex-shrink: 0; padding: 9px 16px; border-radius: 99px; border: none; cursor: pointer;
      background: linear-gradient(135deg, #FF2D78, #FF8C3A);
      color: #fff; font-size: 13px; font-weight: 800;
    }
    #pwa-banner-close {
      flex-shrink: 0; background: none; border: none; color: rgba(255,255,255,.4);
      font-size: 20px; cursor: pointer; padding: 4px; line-height: 1;
    }
    /* iOS 安装引导弹窗 */
    #pwa-ios-guide, .pwa-guide-wrap {
      position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.7);
      display: none; align-items: flex-end; justify-content: center;
    }
    #pwa-ios-guide.show, .pwa-guide-wrap.show { display: flex; }
    #pwa-ios-guide-box {
      background: linear-gradient(160deg, #1e1040, #0d0a2a);
      border: 1px solid rgba(255,255,255,.15); border-radius: 20px 20px 0 0;
      padding: 24px 20px 36px; width: 100%; max-width: 480px;
      display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
    }
    #pwa-ios-guide-box h3 { font-size: 17px; font-weight: 900; color: #fff; }
    .pwa-ios-step {
      display: flex; align-items: center; gap: 12px; width: 100%;
      background: rgba(255,255,255,.06); border-radius: 12px; padding: 10px 14px;
    }
    .pwa-ios-step-num {
      width: 26px; height: 26px; border-radius: 50%;
      background: #FF2D78; color: #fff; font-size: 13px; font-weight: 900;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .pwa-ios-step span { font-size: 13px; color: rgba(255,255,255,.8); text-align: left; line-height: 1.4; }
    .pwa-ios-step span b { color: #fff; }

    /* ── screens ── */
    .screen {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow-y: auto;
      padding-bottom: 32px;
      transition: transform .35s ease, opacity .35s ease
    }

    .screen.hidden {
      transform: translateX(100%);
      opacity: 0;
      pointer-events: none
    }

    .screen.slide-left {
      transform: translateX(-100%);
      opacity: 0;
      pointer-events: none
    }

    /* ── shared ── */
    .card {
      background: var(--white);
      border-radius: var(--r);
      box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
      padding: 20px;
      width: 100%;
      max-width: 400px
    }

    .sec-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--pink);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 6px
    }

    .form-input {
      width: 100%;
      padding: 11px 14px;
      border-radius: 10px;
      border: 1.5px solid #F0D0D8;
      font-size: 15px;
      background: var(--soft);
      color: var(--text);
      outline: none;
      transition: border-color .2s
    }

    .form-input:focus {
      border-color: var(--pink)
    }

    .btn-primary {
      width: 100%;
      max-width: 400px;
      padding: 16px;
      border-radius: var(--r);
      border: none;
      background: linear-gradient(135deg, var(--pink), #FF9B6B);
      color: var(--white);
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 8px 24px rgba(255, 107, 138, .35);
      transition: transform .15s
    }

    .btn-primary:active {
      transform: scale(.97)
    }

    /* ══════════════════════════════════════
       LIBRARY SCREEN
    ══════════════════════════════════════ */
    #screen-library {
      padding-top: 0
    }

    .lib-header {
      width: 100%;
      background: linear-gradient(135deg, #FF6B8A, #FF9B6B);
      padding: 40px 24px 24px;
      color: var(--white);
      border-radius: 0 0 28px 28px;
      margin-bottom: 20px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
    }

    .lib-title {
      font-size: 22px;
      font-weight: 700
    }

    .lib-subtitle {
      font-size: 13px;
      opacity: .85;
      margin-top: 4px
    }

    .add-btn {
      height: 40px;
      border-radius: 99px;
      background: rgba(255, 255, 255, .25);
      border: 2px solid rgba(255, 255, 255, .5);
      color: var(--white);
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      padding: 0 14px;
      white-space: nowrap;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background .2s;
    }

    .add-btn:active {
      background: rgba(255, 255, 255, .4)
    }

    .doll-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
      padding: 0 16px;
      width: 100%;
      max-width: 420px;
    }

    .doll-card {
      background: var(--white);
      border-radius: 20px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
      padding: 18px 12px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      position: relative;
      cursor: pointer;
      transition: transform .15s, box-shadow .15s;
    }

    .doll-card:active {
      transform: scale(.97);
      box-shadow: 0 2px 8px rgba(0, 0, 0, .08)
    }

    .doll-avatar {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      overflow: hidden;
      background: linear-gradient(135deg, #FFCDD8, #FFB4A2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 38px;
      border: 3px solid var(--soft);
    }

    .doll-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .doll-card-name {
      font-size: 15px;
      font-weight: 700;
      color: var(--text)
    }

    .doll-card-tag {
      font-size: 11px;
      color: var(--muted)
    }

    .doll-card-last {
      font-size: 10px;
      color: #ccc;
      min-height: 14px
    }

    .card-chat-btn {
      width: 100%;
      padding: 7px 0;
      border-radius: 99px;
      border: none;
      background: linear-gradient(135deg, var(--pink), #FF9B6B);
      color: var(--white);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
    }

    .tab-badge {
      display: inline-block;
      background: #ef4444;
      color: #fff;
      font-size: 10px;
      font-weight: 700;
      min-width: 16px;
      height: 16px;
      line-height: 16px;
      border-radius: 99px;
      padding: 0 4px;
      margin-left: 4px;
      vertical-align: middle;
    }
    #dollMsgStrip {
      margin: 8px 12px 0;
      background: var(--card, #fff);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 1px 6px rgba(0,0,0,.08);
    }
    .doll-msg-strip-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      user-select: none;
    }
    .doll-msg-strip-toggle { font-size: 12px; color: var(--muted); transition: transform .2s; }
    #dollMsgStrip.collapsed .doll-msg-strip-toggle { transform: rotate(-90deg); }
    .doll-msg-list { padding: 0 8px 8px; }
    #dollMsgStrip.collapsed .doll-msg-list { display: none; }
    .doll-msg-item {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      padding: 8px 6px;
      border-radius: 8px;
      cursor: pointer;
    }
    .doll-msg-item:active { background: rgba(0,0,0,.04); }
    .doll-msg-item.unread .doll-msg-content { font-weight: 600; }
    .doll-msg-avatar {
      width: 36px; height: 36px; border-radius: 50%;
      object-fit: cover; flex-shrink: 0;
      background: var(--muted, #ccc);
    }
    .doll-msg-body { flex: 1; min-width: 0; }
    .doll-msg-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; display: flex; align-items: center; gap: 6px; }
    .doll-msg-unread {
      background: #ef4444; color: #fff; font-size: 10px; font-weight: 700;
      min-width: 16px; height: 16px; line-height: 16px; border-radius: 99px;
      padding: 0 4px; text-align: center;
    }
    .doll-msg-content { font-size: 12px; color: var(--muted); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .doll-msg-item.has-unread .doll-msg-content { color: inherit; }
    .doll-msg-time { font-size: 11px; color: var(--muted); flex-shrink: 0; margin-top: 2px; }
    .doll-status-tag {
      font-size: 10px;
      padding: 2px 8px;
      border-radius: 99px;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }

    .doll-status-tag.idle {
      background: #F3F4F6;
      color: #9CA3AF
    }

    .doll-status-tag.studying {
      background: #EDE9FE;
      color: #7C3AED
    }

    .doll-status-tag.working {
      background: #DBEAFE;
      color: #2563EB
    }

    .doll-status-tag.playing {
      background: #D1FAE5;
      color: #059669
    }

    .doll-status-tag.resting {
      background: #FEF3C7;
      color: #D97706
    }

    /* 状态选择弹窗 */
    .status-picker-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .4);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      z-index: 200;
      opacity: 0;
      pointer-events: none;
      transition: opacity .25s;
    }

    .status-picker-backdrop.open {
      opacity: 1;
      pointer-events: all
    }

    .status-picker-sheet {
      background: var(--white);
      border-radius: 24px 24px 0 0;
      width: 100%;
      max-width: 440px;
      padding: 20px 20px 36px;
      transform: translateY(100%);
      transition: transform .3s ease;
    }

    .status-picker-backdrop.open .status-picker-sheet {
      transform: translateY(0)
    }

    .status-picker-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 14px
    }

    .status-options {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-bottom: 14px
    }

    .status-opt {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      padding: 12px 6px;
      border-radius: 14px;
      border: 2px solid transparent;
      background: var(--soft);
      cursor: pointer;
      transition: border-color .15s;
    }

    .status-opt.selected {
      border-color: var(--pink)
    }

    .status-opt-icon {
      font-size: 22px
    }

    .status-opt-label {
      font-size: 12px;
      font-weight: 600;
      color: var(--text)
    }

    .card-del-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: none;
      background: #F5F5F5;
      color: #ccc;
      font-size: 13px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .card-del-btn:active {
      background: #FFE0E0;
      color: var(--pink)
    }

    .lib-tab-bar {
      display: flex;
      gap: 6px;
      margin: 0 16px 16px;
      background: rgba(255, 255, 255, .7);
      border-radius: 99px;
      padding: 5px;
      width: calc(100% - 32px);
      max-width: 400px;
    }

    .lib-tab-btn {
      flex: 1;
      padding: 9px 0;
      border-radius: 99px;
      border: none;
      background: transparent;
      font-size: 14px;
      color: var(--muted);
      cursor: pointer;
      transition: background .2s, color .2s;
      font-weight: 500;
    }

    .lib-tab-btn.active {
      background: var(--white);
      color: var(--pink);
      font-weight: 700;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .08)
    }

    .empty-hint {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      padding: 40px 20px;
      color: var(--muted);
      font-size: 14px;
      text-align: center;
    }

    .empty-hint .big-icon {
      font-size: 56px
    }

    /* ══════════════════════════════════════
       SETUP SCREEN
    ══════════════════════════════════════ */
    #screen-setup {
      padding-top: 0
    }

    .setup-hero {
      width: 100%;
      background: linear-gradient(135deg, #FF6B8A, #FF9B6B);
      padding: 20px 24px 24px;
      color: var(--white);
      border-radius: 0 0 28px 28px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .back-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: none;
      background: rgba(255, 255, 255, .25);
      color: var(--white);
      font-size: 18px;
      cursor: pointer;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .setup-hero h1 {
      font-size: 18px;
      font-weight: 700
    }

    .tab-bar {
      display: flex;
      gap: 6px;
      margin: 0 16px 16px;
      background: rgba(255, 255, 255, .7);
      border-radius: 99px;
      padding: 5px;
      max-width: 400px;
      width: calc(100% - 32px)
    }

    .tab-btn {
      flex: 1;
      padding: 8px 0;
      border-radius: 99px;
      border: none;
      background: transparent;
      font-size: 13px;
      color: var(--muted);
      cursor: pointer;
      transition: background .2s, color .2s
    }

    .tab-btn.active {
      background: var(--white);
      color: var(--pink);
      font-weight: 600;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .08)
    }

    .panel {
      display: none;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      width: 100%;
      padding: 0 16px
    }

    .panel.active {
      display: flex
    }

    /* upload zone */
    .upload-zone {
      width: 100%;
      max-width: 400px;
      border: 2.5px dashed #FFB4A2;
      border-radius: var(--r);
      background: var(--soft);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 28px 16px;
      position: relative;
      overflow: hidden;
      transition: border-color .2s
    }

    .photo-src-btn {
      padding: 9px 20px;
      border: none;
      border-radius: 20px;
      background: var(--pink);
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: opacity .15s
    }

    .photo-src-btn:active { opacity: .75 }

    .photo-src-btn.regen-btn {
      background: linear-gradient(135deg, #7B2FBE, #FF2D78);
      width: 100%
    }

    #photoPreview {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      object-fit: cover;
      box-shadow: 0 6px 20px rgba(255, 107, 138, .3);
      display: none
    }

    .analyzing {
      display: none;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      color: var(--pink)
    }

    .spin {
      width: 20px;
      height: 20px;
      border: 3px solid #FFD4DC;
      border-top-color: var(--pink);
      border-radius: 50%;
      animation: spin .8s linear infinite
    }

    @keyframes spin {
      to {
        transform: rotate(360deg)
      }
    }

    .result-badge {
      display: inline-block;
      background: #FFF0F3;
      color: var(--pink);
      font-size: 11px;
      padding: 3px 10px;
      border-radius: 99px;
      margin-bottom: 12px
    }

    .reason-tip {
      font-size: 12px;
      color: var(--muted);
      background: #FFF8FA;
      border-left: 3px solid var(--peach);
      padding: 8px 12px;
      border-radius: 0 8px 8px 0;
      line-height: 1.6;
      margin-bottom: 14px
    }

    /* personality */
    .p-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      width: 100%
    }

    .p-card {
      border: 1.5px solid #F0D0D8;
      border-radius: 12px;
      padding: 10px 10px;
      cursor: pointer;
      background: var(--soft);
      transition: border-color .2s, background .2s;
      display: flex;
      align-items: center;
      gap: 8px
    }

    .p-card.sel {
      border-color: var(--pink);
      background: #FFE8EE
    }

    .p-card .p-icon {
      font-size: 22px;
      flex-shrink: 0
    }

    .p-card .p-info {
      min-width: 0
    }

    .p-card .p-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--text)
    }

    .p-card .p-desc {
      font-size: 11px;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    /* quirk chips */
    .quirk-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 7px
    }

    .quirk-chip {
      padding: 6px 12px;
      border-radius: 99px;
      border: 1.5px solid #F0D0D8;
      background: var(--soft);
      font-size: 12px;
      color: var(--text);
      cursor: pointer;
      transition: border-color .2s, background .2s, color .2s;
      line-height: 1.4
    }

    .quirk-chip.sel {
      border-color: var(--pink);
      background: #FFE8EE;
      color: var(--pink)
    }

    /* custom textarea */
    .custom-input {
      width: 100%;
      padding: 10px 14px;
      border-radius: 10px;
      border: 1.5px solid #F0D0D8;
      font-size: 14px;
      background: var(--soft);
      color: var(--text);
      outline: none;
      resize: none;
      min-height: 72px;
      font-family: inherit;
      transition: border-color .2s
    }

    .custom-input:focus {
      border-color: var(--pink)
    }

    /* setup chat */
    .setup-chat-area {
      width: 100%;
      max-width: 400px;
      min-height: 180px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 8px
    }

    .sc-msg {
      max-width: 85%;
      padding: 10px 14px;
      border-radius: 14px;
      font-size: 14px;
      line-height: 1.6
    }

    .sc-msg.ai {
      background: var(--white);
      border: 1.5px solid #FFE0E8;
      align-self: flex-start;
      border-bottom-left-radius: 4px
    }

    .sc-msg.user {
      background: linear-gradient(135deg, var(--pink), #FF9B6B);
      color: var(--white);
      align-self: flex-end;
      border-bottom-right-radius: 4px
    }

    .setup-chat-input-row {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 400px
    }

    .setup-chat-input {
      flex: 1;
      padding: 10px 14px;
      border-radius: 99px;
      border: 1.5px solid #F0D0D8;
      font-size: 14px;
      background: var(--soft);
      color: var(--text);
      outline: none;
      font-family: inherit
    }

    .setup-chat-input:focus {
      border-color: var(--pink)
    }

    .setup-send-btn {
      padding: 10px 18px;
      border-radius: 99px;
      border: none;
      background: var(--pink);
      color: var(--white);
      font-size: 14px;
      cursor: pointer;
      flex-shrink: 0
    }

    .config-preview {
      width: 100%;
      max-width: 400px;
      background: var(--white);
      border: 2px solid var(--pink);
      border-radius: var(--r);
      padding: 16px
    }

    .config-preview-title {
      font-size: 13px;
      color: var(--pink);
      font-weight: 600;
      margin-bottom: 10px
    }

    .config-tag {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 99px;
      background: #FFE8EE;
      color: var(--pink);
      font-size: 12px;
      margin: 2px
    }

    /* styles */
    .style-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 8px
    }

    .style-chip {
      padding: 7px 14px;
      border-radius: 99px;
      border: 1.5px solid #F0D0D8;
      background: var(--soft);
      font-size: 13px;
      color: var(--text);
      cursor: pointer;
      transition: border-color .2s, background .2s, color .2s
    }

    .style-chip.sel {
      border-color: var(--pink);
      background: #FFE8EE;
      color: var(--pink)
    }

    /* voice */
    .v-grid {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%
    }

    .v-group-title {
      font-size: 12px;
      font-weight: 700;
      color: var(--pink);
      margin: 7px 2px 1px;
      display: flex;
      align-items: center;
      gap: 5px
    }

    .v-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 12px;
      border: 1.5px solid #F0D0D8;
      background: var(--soft);
      cursor: pointer;
      transition: border-color .2s, background .2s
    }

    .v-card.sel {
      border-color: var(--pink);
      background: #FFE8EE
    }

    .v-icon {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: linear-gradient(135deg, #FFF0F3, #FFE4DC);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      flex-shrink: 0
    }

    .v-info {
      flex: 1;
      min-width: 0
    }

    .v-name {
      font-size: 14px;
      color: var(--text);
      font-weight: 600
    }

    .v-desc {
      font-size: 12px;
      color: var(--muted)
    }

    .v-tag {
      font-size: 11px;
      background: var(--pink);
      color: var(--white);
      padding: 2px 8px;
      border-radius: 99px
    }

    .v-preview {
      padding: 6px 12px;
      border-radius: 99px;
      border: 1.5px solid var(--peach);
      background: var(--white);
      color: var(--pink);
      font-size: 12px;
      cursor: pointer;
      flex-shrink: 0
    }

    .upload-audio-zone {
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 14px;
      border: 2px dashed #FFB4A2;
      border-radius: 12px;
      background: var(--soft);
      cursor: pointer;
      font-size: 14px;
      color: var(--pink)
    }

    .upload-audio-zone:active {
      background: #FFE4EA
    }

    /* cloud voice search */
    .cloud-search-row {
      display: flex;
      gap: 8px;
      margin: 8px 0 6px
    }

    .cloud-search-input {
      flex: 1;
      padding: 8px 12px;
      border-radius: 99px;
      border: 1.5px solid #F0D0D8;
      font-size: 13px;
      background: var(--soft);
      color: var(--text);
      outline: none;
      font-family: inherit
    }

    .cloud-search-input:focus {
      border-color: var(--pink)
    }

    .cloud-search-btn {
      padding: 8px 14px;
      border-radius: 99px;
      border: none;
      background: var(--pink);
      color: var(--white);
      font-size: 13px;
      cursor: pointer;
      white-space: nowrap
    }

    .cloud-results {
      max-height: 220px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    .clone-progress {
      font-size: 13px;
      color: var(--teal);
      margin-top: 6px;
      min-height: 18px;
      text-align: center
    }

    .cloned-card {
      margin-top: 8px;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 12px;
      border: 2px solid var(--pink);
      background: #FFF0F3;
      cursor: pointer
    }

    /* voice library */
    .lib-toggle-btn {
      padding: 5px 12px;
      border-radius: 99px;
      border: 1.5px solid var(--peach);
      background: var(--soft);
      color: var(--pink);
      font-size: 12px;
      cursor: pointer;
      white-space: nowrap
    }

    .lib-toggle-btn:active {
      background: #FFE4EA
    }

    .lib-add-form {
      background: var(--soft);
      border-radius: 12px;
      padding: 12px;
      margin-top: 8px;
      flex-direction: column;
      gap: 6px
    }

    .lib-voices {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 4px
    }

    /* selected voice banner */
    .voice-selected-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: 12px;
      margin-bottom: 10px;
      background: linear-gradient(135deg, #FFF0F3, #FFE8F5);
      border: 2px solid var(--pink)
    }

    .voice-selected-name {
      font-size: 14px;
      font-weight: 700;
      color: var(--pink);
      flex: 1
    }

    .voice-selected-sub {
      font-size: 11px;
      color: var(--muted)
    }

    /* collapsible voice sections */
    .v-section-toggle {
      width: 100%;
      text-align: left;
      padding: 7px 2px;
      background: none;
      border: none;
      font-size: 12px;
      color: var(--muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .v-section-toggle:active {
      color: var(--pink)
    }

    .v-section-body {
      overflow: hidden;
      transition: max-height .25s ease
    }

    .v-section-body.collapsed {
      max-height: 0 !important
    }

    /* field mic button */
    .field-row {
      display: flex;
      gap: 6px;
      align-items: flex-start;
      width: 100%
    }

    .field-row .form-input,
    .field-row .custom-input {
      flex: 1;
      min-width: 0
    }

    .field-mic {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1.5px solid #F0D0D8;
      background: var(--soft);
      color: var(--pink);
      font-size: 16px;
      cursor: pointer;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .15s
    }

    .field-mic.on {
      background: var(--pink);
      color: var(--white);
      border-color: var(--pink);
      animation: micPulse .9s ease-out infinite
    }

    .field-mic.textarea-mic {
      align-self: flex-end;
      margin-bottom: 2px
    }

    /* ══════════════════════════════════════
       CHAT SCREEN
    ══════════════════════════════════════ */
    #screen-chat {
      padding-top: 0;
      padding-bottom: 0;
      overflow: hidden;
      background: #fff;
      border-radius: 0;
      box-shadow: none;
    }

    #chatBg {
      position: absolute;
      inset: 0;
      z-index: 0;
      background-size: cover;
      background-position: center bottom;
      background-repeat: no-repeat;
      transition: background-image .6s ease;
      pointer-events: none;
    }
    #chatBg::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to bottom,
        rgba(255,255,255,.18) 0%,
        rgba(255,255,255,.08) 40%,
        rgba(255,255,255,.55) 75%,
        rgba(255,255,255,.88) 100%
      );
    }
    #screen-chat .chat-header,
    #screen-chat .avatar3d-wrap,
    #screen-chat .avatar-regen-panel,
    #screen-chat .status-badge,
    #screen-chat #unlockSoundBtn,
    #screen-chat .chat-area,
    #screen-chat .controls,
    #screen-chat #stickerPicker {
      position: relative;
      z-index: 1;
    }

    .chat-header {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px 10px;
      max-width: 480px
    }

    .chat-title {
      font-size: 18px;
      font-weight: 700;
      color: var(--pink)
    }

    .icon-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: none;
      background: rgba(255, 255, 255, .8);
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .06)
    }

    /* 3D avatar */
    .avatar3d-wrap {
      width: 100%;
      max-width: 420px;
      height: min(110px, 17vh);
      position: relative;
      flex-shrink: 0;
      margin-bottom: 0;
      overflow: visible;
    }

    .avatar2d-stage {
      position: absolute;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      perspective: 700px;
      pointer-events: none;
    }

    .avatar2d-core {
      position: relative;
      width: min(82%, 270px);
      height: 92%;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      transform-style: preserve-3d;
      animation: avatarFloat 4.2s ease-in-out infinite;
      filter: drop-shadow(0 18px 24px rgba(80, 40, 70, .18));
    }

    .avatar2d-img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      transform-origin: 50% 82%;
      animation: avatarBreath 3.2s ease-in-out infinite;
    }

    .avatar2d-shadow {
      position: absolute;
      left: 20%;
      right: 20%;
      bottom: 2px;
      height: 18px;
      border-radius: 50%;
      background: rgba(80, 40, 70, .14);
      filter: blur(6px);
      animation: avatarShadow 4.2s ease-in-out infinite;
    }

    .avatar2d-spark {
      position: absolute;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .9);
      box-shadow: 0 0 12px rgba(255, 107, 138, .45);
      opacity: .75;
      animation: sparkFloat 3s ease-in-out infinite;
    }

    .avatar2d-spark.s1 {
      left: 17%;
      top: 22%
    }

    .avatar2d-spark.s2 {
      right: 18%;
      top: 34%;
      animation-delay: .9s
    }

    .avatar2d-stage.speaking .avatar2d-core {
      animation-duration: 1.2s
    }

    .avatar2d-stage.speaking .avatar2d-img {
      animation: avatarTalk .34s ease-in-out infinite
    }

    .avatar2d-stage.thinking .avatar2d-core {
      transform: rotateZ(-2deg)
    }

    @keyframes avatarFloat {

      0%,
      100% {
        transform: translateY(0) rotateX(0deg)
      }

      50% {
        transform: translateY(-9px) rotateX(2deg)
      }
    }

    @keyframes avatarBreath {

      0%,
      100% {
        transform: scale(1)
      }

      50% {
        transform: scale(1.025, .985)
      }
    }

    @keyframes avatarTalk {

      0%,
      100% {
        transform: scale(1.01, .99) rotateZ(-.5deg)
      }

      50% {
        transform: scale(.99, 1.025) rotateZ(.5deg)
      }
    }

    @keyframes avatarShadow {

      0%,
      100% {
        transform: scale(1);
        opacity: .75
      }

      50% {
        transform: scale(.86);
        opacity: .45
      }
    }

    @keyframes sparkFloat {

      0%,
      100% {
        transform: translateY(0) scale(.8);
        opacity: .45
      }

      50% {
        transform: translateY(-10px) scale(1.1);
        opacity: .95
      }
    }

    .doll-fallback {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 80px;
      pointer-events: none;
    }

    .doll-fallback img {
      width: 86%;
      height: 86%;
      object-fit: contain;
      border-radius: 28px
    }

    .avatar-regen-btn {
      background: none;
      border: none;
      padding: 0;
      color: var(--pink);
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      opacity: .75;
      transition: opacity .15s;
      /* moved into header row — no flow space consumed */
    }
    .avatar-regen-btn:active { opacity: 1; }

    .avatar-regen-panel {
      width: 100%;
      max-width: 400px;
      background: var(--white);
      border-radius: 14px;
      padding: 14px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
      display: none;
      flex-direction: column;
      gap: 8px;
      margin-top: 4px;
    }

    .avatar-regen-panel.open {
      display: flex
    }

    .avatar-regen-hint {
      font-size: 11px;
      color: var(--muted)
    }

    .avatar-regen-input {
      width: 100%;
      border: 1.5px solid #F0D0D8;
      border-radius: 8px;
      padding: 8px 10px;
      font-size: 13px;
      background: #FFF5F8;
      outline: none;
      color: var(--text);
    }

    .avatar-regen-input:focus {
      border-color: var(--pink)
    }

    .avatar-regen-row {
      display: flex;
      gap: 6px
    }

    .avatar-regen-go {
      flex: 1;
      background: linear-gradient(135deg, var(--pink), #FF9B6B);
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
    }

    .avatar-regen-go:disabled {
      opacity: .6;
      cursor: default
    }

    .avatar-regen-cancel {
      background: #f5f5f5;
      color: #666;
      border: none;
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 13px;
      cursor: pointer;
    }

    .avatar3d-wrap::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      border-radius: 50%;
      box-shadow: inset 0 0 0 0 rgba(255, 107, 138, 0);
      transition: box-shadow .4s;
    }

    .avatar3d-wrap.speaking::after {
      box-shadow: 0 0 32px 6px rgba(255, 107, 138, .22);
    }

    @keyframes ringPulse {
      0% {
        transform: scale(.9);
        opacity: .6
      }

      100% {
        transform: scale(1.28);
        opacity: 0
      }
    }

    .status-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 12px;
      border-radius: 99px;
      font-size: 11px;
      background: var(--white);
      color: var(--muted);
      box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
      margin: 4px 0 4px;
      transition: background .3s, color .3s;
      min-width: 90px;
      justify-content: center;
      flex-shrink: 0
    }

    .status-badge.listening {
      background: var(--pink);
      color: var(--white)
    }

    .status-badge.thinking {
      background: var(--teal);
      color: var(--white)
    }

    .status-badge.speaking {
      background: #6BB5D6;
      color: var(--white)
    }

    .s-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: currentColor;
      flex-shrink: 0
    }

    .listening .s-dot {
      animation: blink .7s infinite
    }

    .thinking .s-dot {
      animation: spin 1s linear infinite
    }

    .speaking .s-dot {
      animation: blink .5s infinite
    }

    @keyframes blink {

      0%,
      100% {
        opacity: .3
      }

      50% {
        opacity: 1
      }
    }

    .chat-area {
      flex: 1;
      width: 100%;
      max-width: 420px;
      padding: 0 16px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 0
    }

    .msg-row {
      display: flex;
      flex-direction: column
    }

    .msg-row.user {
      align-items: flex-end
    }

    .msg-row.doll {
      align-items: flex-start
    }

    .msg-label {
      font-size: 11px;
      color: var(--muted);
      margin-bottom: 3px;
      padding: 0 4px
    }

    .bubble {
      max-width: 82%;
      padding: 11px 15px;
      border-radius: 16px;
      font-size: 15px;
      line-height: 1.65;
      word-break: break-word
    }

    .msg-row.user .bubble {
      background: linear-gradient(135deg, var(--pink), #FF9B6B);
      color: var(--white);
      border-bottom-right-radius: 4px
    }

    .msg-row.doll .bubble {
      background: var(--white);
      color: var(--text);
      border: 1.5px solid #FFE0E8;
      border-bottom-left-radius: 4px;
      box-shadow: 0 3px 10px rgba(255, 107, 138, .07)
    }

    .reactions {
      display: flex;
      gap: 6px;
      margin-top: 4px;
      padding: 0 4px
    }

    .react-btn {
      padding: 3px 10px;
      border-radius: 99px;
      border: 1.5px solid #F0D0D8;
      background: var(--white);
      font-size: 13px;
      cursor: pointer
    }

    .react-btn.done {
      background: var(--soft);
      border-color: var(--peach)
    }

    .thinking-dots span {
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--peach);
      margin: 0 2px;
      animation: dotB .9s infinite
    }

    .thinking-dots span:nth-child(2) {
      animation-delay: .15s
    }

    .thinking-dots span:nth-child(3) {
      animation-delay: .30s
    }

    .bubble.streaming::after {
      content: '▍'; display:inline-block;
      animation: cursorBlink .6s step-end infinite;
      color: rgba(255,255,255,.6); margin-left:1px;
    }
    @keyframes cursorBlink { 0%,100%{opacity:1} 50%{opacity:0} }

    @keyframes dotB {

      0%,
      80%,
      100% {
        transform: scale(.6);
        opacity: .5
      }

      40% {
        transform: scale(1.2);
        opacity: 1
      }
    }

    .controls {
      width: 100%;
      max-width: 420px;
      padding: 8px 16px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }

    .text-chat-row {
      width: 100%;
      display: flex;
      gap: 8px
    }

    .text-chat-input {
      flex: 1;
      min-width: 0;
      padding: 11px 14px;
      border-radius: 99px;
      border: 1.5px solid #F0D0D8;
      background: var(--white);
      color: var(--text);
      font-size: 14px;
      outline: none;
      font-family: inherit
    }

    .text-chat-input:focus {
      border-color: var(--pink)
    }

    .text-chat-send {
      width: 46px;
      height: 42px;
      border-radius: 50%;
      border: none;
      background: var(--pink);
      color: var(--white);
      font-size: 18px;
      cursor: pointer;
      flex-shrink: 0
    }

    .mic-btn {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      border: none;
      background: linear-gradient(135deg, var(--pink), #FF9B6B);
      color: var(--white);
      font-size: 22px;
      cursor: pointer;
      box-shadow: 0 6px 18px rgba(255, 107, 138, .4);
      touch-action: none
    }

    .mic-btn.active {
      transform: scale(.94);
      animation: micPulse 1s ease-out infinite
    }

    @keyframes micPulse {
      0% {
        box-shadow: 0 0 0 0 rgba(255, 107, 138, .55)
      }

      70% {
        box-shadow: 0 0 0 18px rgba(255, 107, 138, 0)
      }

      100% {
        box-shadow: 0 0 0 0 rgba(255, 107, 138, 0)
      }
    }

    .mic-hint {
      font-size: 13px;
      color: var(--muted)
    }

    .clear-btn {
      padding: 7px 24px;
      border: 1.5px solid #eee;
      border-radius: 99px;
      background: var(--white);
      color: #ccc;
      font-size: 13px;
      cursor: pointer
    }

    .play-reply-btn {
      display: none;
      padding: 8px 22px;
      border: none;
      border-radius: 99px;
      background: #6BB5D6;
      color: var(--white);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer
    }

    .unlock-sound-btn {
      display: none;
      padding: 8px 22px;
      border: none;
      border-radius: 99px;
      background: var(--teal);
      color: var(--white);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer
    }

    /* ── Sticker picker & messages ── */
    .sticker-cell {
      aspect-ratio: 1; border-radius: 14px; overflow: hidden; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      background: var(--soft); transition: transform .12s; position: relative;
    }
    .sticker-cell:active { transform: scale(.88); }
    .sticker-cell img { width: 100%; height: 100%; object-fit: contain; }
    .sticker-cell .sticker-placeholder { font-size: 10px; color: var(--muted); text-align: center; padding: 4px; line-height: 1.3; }
    .sticker-cell .sticker-label { position: absolute; bottom: 3px; left: 0; right: 0; text-align: center; font-size: 9px; font-weight: 700; color: var(--muted); }
    .chat-sticker { max-width: 100px; border-radius: 12px; display: block; }
    .chat-sticker-wrap { display: flex; margin-bottom: 10px; }
    .chat-sticker-wrap.user { justify-content: flex-end; }
    .chat-sticker-wrap.doll { justify-content: flex-start; padding-left: 12px; }

    .memory-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      color: #9B9B9B;
      background: rgba(255, 255, 255, .7);
      padding: 3px 10px;
      border-radius: 99px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, .05)
    }

    /* 身世记忆弹窗 */
    .memory-modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .45);
      z-index: 100;
      display: none;
      align-items: flex-end;
      justify-content: center;
    }

    .memory-modal-backdrop.open {
      display: flex
    }

    .memory-modal {
      width: 100%;
      max-width: 480px;
      max-height: 78vh;
      background: var(--white);
      border-radius: 24px 24px 0 0;
      padding: 20px 20px 36px;
      overflow-y: auto;
      animation: slideUp .28s ease;
    }

    @keyframes slideUp {
      from {
        transform: translateY(60px);
        opacity: 0
      }

      to {
        transform: none;
        opacity: 1
      }
    }

    .memory-modal-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px
    }

    .memory-modal-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--pink)
    }

    .memory-modal-close {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: none;
      background: #f5f5f5;
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .mem-section {
      margin-bottom: 14px
    }

    .mem-section-label {
      font-size: 11px;
      font-weight: 700;
      color: var(--pink);
      text-transform: uppercase;
      letter-spacing: .6px;
      margin-bottom: 5px
    }

    .mem-section-body {
      font-size: 14px;
      line-height: 1.7;
      color: var(--text);
      background: var(--soft);
      border-radius: 10px;
      padding: 10px 12px
    }

    .mem-empty {
      font-size: 13px;
      color: var(--muted);
      text-align: center;
      padding: 20px 0
    }

    /* toast */
    .toast {
      position: fixed;
      bottom: 44px;
      left: 50%;
      transform: translateX(-50%) translateY(16px);
      background: rgba(0, 0, 0, .72);
      color: var(--white);
      padding: 10px 20px;
      border-radius: 12px;
      font-size: 13px;
      opacity: 0;
      transition: opacity .3s, transform .3s;
      pointer-events: none;
      white-space: nowrap;
      z-index: 100
    }

    .toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0)
    }

    /* ══════════════════════════════════════
       AUTH SCREEN
    ══════════════════════════════════════ */
    #screen-auth {
      justify-content: center;
      padding: 24px 20px
    }

    .auth-logo {
      font-size: 52px;
      margin-bottom: 8px
    }

    .auth-app-name {
      font-size: 22px;
      font-weight: 800;
      color: var(--pink);
      margin-bottom: 4px
    }

    .auth-tagline {
      font-size: 13px;
      color: var(--muted);
      margin-bottom: 28px
    }

    .auth-card {
      background: var(--white);
      border-radius: 24px;
      box-shadow: 0 8px 32px rgba(255, 107, 138, .12);
      padding: 24px 20px;
      width: 100%;
      max-width: 380px
    }

    .auth-tabs {
      display: flex;
      background: var(--soft);
      border-radius: 99px;
      padding: 4px;
      margin-bottom: 20px;
      gap: 4px
    }

    .auth-tab {
      flex: 1;
      padding: 9px 0;
      border-radius: 99px;
      border: none;
      background: transparent;
      font-size: 14px;
      color: var(--muted);
      cursor: pointer;
      transition: background .2s, color .2s;
      font-weight: 500
    }

    .auth-tab.active {
      background: var(--white);
      color: var(--pink);
      font-weight: 700;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .08)
    }

    .auth-form {
      display: flex;
      flex-direction: column;
      gap: 12px
    }

    .auth-input {
      width: 100%;
      padding: 13px 16px;
      border-radius: 12px;
      border: 1.5px solid #F0D0D8;
      font-size: 15px;
      background: var(--soft);
      color: var(--text);
      outline: none;
      transition: border-color .2s;
      font-family: inherit
    }

    .auth-input:focus {
      border-color: var(--pink)
    }

    .auth-btn {
      width: 100%;
      padding: 15px;
      border-radius: 14px;
      border: none;
      background: linear-gradient(135deg, var(--pink), #FF9B6B);
      color: var(--white);
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 6px 20px rgba(255, 107, 138, .35);
      transition: transform .15s;
      margin-top: 4px
    }

    .auth-btn:active {
      transform: scale(.97)
    }

    .auth-error {
      font-size: 13px;
      color: #e53935;
      background: #FFF0F0;
      border-radius: 8px;
      padding: 8px 12px;
      display: none
    }

    .auth-error.show {
      display: block
    }

    .auth-hint {
      font-size: 12px;
      color: var(--muted);
      text-align: center;
      margin-top: 10px
    }

    /* ══════════════════════════════════════
       RECHARGE MODAL
    ══════════════════════════════════════ */
    .recharge-modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .45);
      z-index: 200;
      display: none;
      align-items: flex-end;
      justify-content: center;
    }

    .recharge-modal-backdrop.open {
      display: flex
    }

    .recharge-modal {
      width: 100%;
      max-width: 480px;
      background: var(--white);
      border-radius: 24px 24px 0 0;
      padding: 20px 20px 40px;
      animation: slideUp .28s ease;
    }

    .recharge-modal-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px
    }

    .recharge-modal-title {
      font-size: 17px;
      font-weight: 700;
      color: var(--pink)
    }

    .recharge-modal-close {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: none;
      background: #f5f5f5;
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .recharge-balance {
      font-size: 13px;
      color: var(--muted);
      margin-bottom: 16px
    }

    .credit-rules {
      background: #FFF8FA;
      border: 1px solid #FFE0E8;
      border-radius: 14px;
      padding: 12px 14px;
      margin-bottom: 16px
    }

    .credit-rules-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--pink);
      margin-bottom: 8px
    }

    .credit-rule {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 7px 0;
      border-top: 1px solid #FFE7EC;
      font-size: 12px;
      color: var(--text)
    }

    .credit-rule:first-of-type {
      border-top: none
    }

    .credit-rule-name {
      font-weight: 600
    }

    .credit-rule-desc {
      color: var(--muted);
      font-size: 11px;
      margin-top: 2px
    }

    .credit-rule-cost {
      color: var(--pink);
      font-weight: 700;
      white-space: nowrap
    }

    .pkg-grid {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 18px
    }

    .pkg-btn {
      padding: 14px 18px;
      border-radius: 14px;
      border: 1.5px solid #F0D0D8;
      background: var(--soft);
      text-align: left;
      cursor: pointer;
      font-size: 15px;
      font-weight: 600;
      color: var(--text);
      transition: border-color .2s, background .2s
    }

    .pkg-btn:hover,
    .pkg-btn:active {
      border-color: var(--pink);
      background: #FFE8EE;
      color: var(--pink)
    }

    .pay-info {
      background: var(--soft);
      border-radius: 14px;
      padding: 16px;
      font-size: 14px;
      color: var(--text);
      line-height: 1.8;
      margin-bottom: 14px;
      display: none
    }

    .pay-info.show {
      display: block
    }

    .pay-account {
      font-weight: 700;
      color: var(--pink)
    }

    .pay-done-btn {
      width: 100%;
      padding: 14px;
      border-radius: 14px;
      border: none;
      background: linear-gradient(135deg, var(--pink), #FF9B6B);
      color: var(--white);
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(255, 107, 138, .3);
      display: none
    }

    .pay-done-btn.show {
      display: block
    }

    .order-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 12px
    }

    .order-item {
      background: var(--soft);
      border-radius: 12px;
      padding: 10px 12px;
      font-size: 12px;
      color: var(--text);
      line-height: 1.6
    }

    .order-item strong {
      color: var(--pink)
    }

    .order-status {
      display: inline-flex;
      border-radius: 99px;
      padding: 2px 8px;
      background: #fff;
      color: var(--muted);
      margin-left: 6px
    }

    .logout-btn {
      padding: 5px 12px;
      border-radius: 99px;
      border: 1.5px solid rgba(255, 255, 255, .5);
      background: rgba(255, 255, 255, .2);
      color: var(--white);
      font-size: 12px;
      cursor: pointer;
      white-space: nowrap
    }

    .logout-btn:active {
      background: rgba(255, 255, 255, .35)
    }

    .credits-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 5px 10px;
      border-radius: 99px;
      border: 1.5px solid rgba(255, 255, 255, .55);
      background: rgba(255, 255, 255, .24);
      color: var(--white);
      font-size: 12px;
      cursor: pointer;
      white-space: nowrap
    }

    .credits-btn:active {
      background: rgba(255, 255, 255, .38)
    }

    .profile-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 10px;
      border-radius: 99px;
      border: 1.5px solid rgba(255, 255, 255, .55);
      background: rgba(255, 255, 255, .24);
      color: var(--white);
      font-size: 12px;
      cursor: pointer;
      white-space: nowrap
    }

    .profile-btn:active {
      background: rgba(255, 255, 255, .38)
    }

    .profile-avatar-sm {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #fff;
      color: var(--purple);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      overflow: hidden
    }

    .profile-avatar-sm img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .chat-credits-btn {
      border-color: #FFD3DC;
      background: var(--soft);
      color: var(--pink)
    }

    .chat-credits-btn:active {
      background: #FFE4EA
    }

    /* ══════════════════════════════════════
       GROUPS SCREEN
    ══════════════════════════════════════ */
    #screen-groups {
      padding-top: 0
    }

    .groups-header {
      width: 100%;
      background: linear-gradient(135deg, #7C6FD4, #A78BFA);
      padding: 40px 24px 24px;
      color: var(--white);
      border-radius: 0 0 28px 28px;
      margin-bottom: 20px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
    }

    .group-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 0 16px;
      width: 100%;
      max-width: 420px
    }

    .group-card {
      background: var(--white);
      border-radius: 16px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
      padding: 14px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      transition: transform .15s;
      position: relative;
    }

    .group-card:active {
      transform: scale(.98)
    }

    .group-icon {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      background: linear-gradient(135deg, #7C6FD4, #A78BFA);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      flex-shrink: 0
    }

    .group-info {
      flex: 1;
      min-width: 0
    }

    .group-name {
      font-size: 15px;
      font-weight: 700;
      color: var(--text)
    }

    .group-members {
      font-size: 12px;
      color: var(--muted);
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .group-del-btn {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: none;
      background: #F5F5F5;
      color: #ccc;
      font-size: 13px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .group-del-btn:active {
      background: #EDE9FE;
      color: #7C6FD4
    }

    .add-group-btn {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .25);
      border: 2px solid rgba(255, 255, 255, .5);
      color: var(--white);
      font-size: 24px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    /* ══════════════════════════════════════
       GROUP CHAT SCREEN
    ══════════════════════════════════════ */
    #screen-group-chat {
      padding-top: 0
    }

    .group-chat-header {
      width: 100%;
      max-width: 440px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 48px 16px 14px;
      flex-shrink: 0;
    }

    .group-chat-title {
      font-size: 17px;
      font-weight: 700;
      color: var(--text)
    }

    .group-chat-area {
      flex: 1;
      width: 100%;
      max-width: 440px;
      overflow-y: auto;
      padding: 0 16px 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .gc-msg-row {
      display: flex;
      align-items: flex-end;
      gap: 8px
    }

    .gc-msg-row.user-row {
      flex-direction: row-reverse
    }

    .gc-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      background: linear-gradient(135deg, #FFCDD8, #FFB4A2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, .1)
    }

    .gc-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .gc-bubble-col {
      display: flex;
      flex-direction: column;
      gap: 3px;
      max-width: 72%
    }

    .gc-bubble {
      padding: 10px 14px;
      border-radius: 16px;
      font-size: 15px;
      line-height: 1.55;
      word-break: break-word;
    }

    .gc-bubble.doll {
      background: var(--white);
      color: var(--text);
      box-shadow: 0 2px 8px rgba(0, 0, 0, .07);
      border-bottom-left-radius: 4px
    }

    .gc-bubble.user {
      background: linear-gradient(135deg, var(--pink), #FF9B6B);
      color: var(--white);
      border-bottom-right-radius: 4px;
      align-self: flex-end
    }

    .group-chat-controls {
      width: 100%;
      max-width: 440px;
      padding: 10px 16px 24px;
      display: flex;
      gap: 8px;
      flex-shrink: 0;
    }

    .gc-input {
      flex: 1;
      padding: 12px 14px;
      border-radius: 99px;
      border: 1.5px solid #F0D0D8;
      font-size: 15px;
      background: var(--soft);
      color: var(--text);
      outline: none
    }

    .gc-input:focus {
      border-color: #A78BFA
    }

    .gc-send-btn {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: none;
      flex-shrink: 0;
      background: linear-gradient(135deg, #7C6FD4, #A78BFA);
      color: var(--white);
      font-size: 18px;
      cursor: pointer;
    }

    .gc-auto-btn {
      padding: 10px 14px;
      border-radius: 99px;
      border: none;
      background: var(--soft);
      color: #7C6FD4;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
    }

    /* 群聊麦克风 */
    .gc-mic-row {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 6px 0 2px
    }

    .gc-mic-btn {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      border: none;
      background: linear-gradient(135deg, #7C6FD4, #A78BFA);
      color: var(--white);
      font-size: 22px;
      cursor: pointer;
      box-shadow: 0 6px 18px rgba(124, 111, 212, .4);
      touch-action: none
    }

    .gc-mic-btn.active {
      transform: scale(.93);
      animation: gcMicPulse 1s ease-out infinite
    }

    @keyframes gcMicPulse {
      0% {
        box-shadow: 0 0 0 0 rgba(124, 111, 212, .55)
      }

      70% {
        box-shadow: 0 0 0 16px rgba(124, 111, 212, 0)
      }

      100% {
        box-shadow: 0 0 0 0 rgba(124, 111, 212, 0)
      }
    }

    .gc-mic-hint {
      font-size: 12px;
      color: var(--muted)
    }

    .gc-name-label {
      font-size: 11px;
      color: var(--muted);
      padding: 0 2px;
      font-weight: 500
    }

    .gc-bubble.doll.playable {
      cursor: pointer
    }

    .gc-bubble.doll.playable:active {
      opacity: .7
    }

    .gc-play-badge {
      font-size: 10px;
      color: #A78BFA;
      margin-top: 4px;
      display: block
    }

    /* 创建群聊弹窗 */
    .create-group-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .4);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      z-index: 200;
      opacity: 0;
      pointer-events: none;
      transition: opacity .25s;
    }

    .create-group-backdrop.open {
      opacity: 1;
      pointer-events: all
    }

    .create-group-sheet {
      background: var(--white);
      border-radius: 24px 24px 0 0;
      width: 100%;
      max-width: 440px;
      padding: 24px 20px 36px;
      transform: translateY(100%);
      transition: transform .3s ease;
    }

    .create-group-backdrop.open .create-group-sheet {
      transform: translateY(0)
    }

    .create-group-title {
      font-size: 17px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 16px
    }

    .doll-select-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-bottom: 16px
    }

    .doll-select-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 10px 6px;
      border-radius: 12px;
      border: 2px solid transparent;
      background: var(--soft);
      cursor: pointer;
      transition: border-color .15s, background .15s;
    }

    .doll-select-item.selected {
      border-color: #7C6FD4;
      background: #EDE9FE
    }

    .doll-select-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      overflow: hidden;
      background: linear-gradient(135deg, #FFCDD8, #FFB4A2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px
    }

    .doll-select-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .doll-select-name {
      font-size: 11px;
      color: var(--text);
      font-weight: 600;
      text-align: center
    }

    /* ══════════════════════════════════════
       DOLL PLANET THEME
    ══════════════════════════════════════ */

    .screen {
      background: #fff;
      border-radius: 28px 28px 0 0;
      margin-top: 0;
      box-shadow: 0 -4px 20px rgba(0, 0, 0, .06)
    }

    /* ── Library Header — image-based ── */
    .lib-header {
      background: url('/bg-header.png') center top/cover no-repeat #87CEEB;
      height: 155px;
      min-height: 155px;
      padding: 12px 14px;
      align-items: flex-start;
      justify-content: flex-end;
      border-radius: 0;
      box-shadow: 0 4px 20px rgba(0, 0, 0, .1);
      overflow: hidden;
    }

    .hdr-logo {
      display: none
    }

    /* ── Buttons ── */
    .add-btn {
      background: rgba(255, 255, 255, .88);
      border: 1.5px solid rgba(255, 127, 161, .45);
      color: #D45080;
      font-weight: 800;
      box-shadow: 0 3px 0 rgba(200, 80, 120, .2);
      transition: transform .1s, box-shadow .1s;
      padding: 7px 13px;
      border-radius: 99px;
      font-size: 12px;
      white-space: nowrap
    }

    .add-btn:active {
      transform: translateY(2px);
      box-shadow: 0 1px 0 rgba(200, 80, 120, .2)
    }

    .back-btn {
      background: rgba(255, 255, 255, .85);
      border: 1.5px solid rgba(255, 255, 255, .7);
      color: #3D2B1F;
      box-shadow: 0 3px 0 rgba(0, 0, 0, .08)
    }

    .back-btn:active {
      transform: translateY(2px)
    }

    .credits-btn {
      background: rgba(255, 255, 255, .82);
      border: 1.5px solid rgba(255, 213, 100, .6);
      border-radius: 99px;
      color: #5D3A00;
      font-weight: 700;
      box-shadow: 0 2px 0 rgba(180, 130, 0, .18)
    }

    .logout-btn {
      background: rgba(255, 255, 255, .72);
      border: 1.5px solid rgba(255, 255, 255, .6);
      color: #3D2B1F;
      font-weight: 700;
      border-radius: 99px;
      box-shadow: 0 2px 0 rgba(0, 0, 0, .08)
    }

    #screen-library .lib-header {
      position: relative
    }

    /* ── 汉堡菜单按钮 ── */
    #libMenuBtn {
      position: absolute;
      top: 12px;
      right: 14px;
      z-index: 3;
      width: 36px; height: 36px; border-radius: 99px;
      background: rgba(255,255,255,.88);
      border: 1.5px solid rgba(255,127,161,.45);
      color: #D45080; font-size: 20px; font-weight: 900;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; box-shadow: 0 3px 0 rgba(200,80,120,.2);
      transition: transform .1s;
    }
    #libMenuBtn:active { transform: scale(.9); }

    /* ── 底部抽屉遮罩 ── */
    #libMenuBackdrop {
      position: fixed; inset: 0; z-index: 500;
      background: rgba(0,0,0,.45);
      display: none; align-items: flex-end; justify-content: center;
    }
    #libMenuBackdrop.open { display: flex; }

    /* ── 底部抽屉本体 ── */
    #libMenuSheet {
      width: 100%; max-width: 480px;
      background: #fff; border-radius: 24px 24px 0 0;
      padding: 12px 0 32px;
      transform: translateY(100%); transition: transform .3s cubic-bezier(.32,1,.6,1);
    }
    #libMenuBackdrop.open #libMenuSheet { transform: translateY(0); }

    .lib-menu-handle {
      width: 36px; height: 4px; background: #e5e7eb;
      border-radius: 2px; margin: 0 auto 16px;
    }
    .lib-menu-item {
      display: flex; align-items: center; gap: 14px;
      padding: 14px 24px; cursor: pointer;
      font-size: 16px; font-weight: 700; color: #2D1253;
      transition: background .15s;
    }
    .lib-menu-item:active { background: #f9f0ff; }
    .lib-menu-item-ico {
      width: 42px; height: 42px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center; font-size: 20px;
    }
    .lib-menu-sep { height: 1px; background: #f3e8ff; margin: 4px 24px; }
    .lib-menu-item.danger { color: #dc2626; }

    /* ── Header avatar circle ── */
    .header-profile-center {
      position: absolute;
      bottom: 16px;
      left: 14px;
      transform: none;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
    }

    .header-avatar-circle {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: linear-gradient(135deg, #FFCDD8, #C9B6FF);
      border: 3px solid rgba(255, 255, 255, .9);
      box-shadow: 0 4px 14px rgba(200, 80, 120, .35);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      font-weight: 900;
      color: #D45080;
      overflow: hidden;
      cursor: pointer;
      transition: transform .15s, box-shadow .15s;
      position: relative;
    }

    .header-avatar-circle img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .header-avatar-circle:active {
      transform: scale(.93);
      box-shadow: 0 2px 6px rgba(200, 80, 120, .25)
    }

    .header-avatar-edit {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      background: rgba(255, 255, 255, .92);
      border-radius: 99px;
      padding: 3px 10px;
      font-size: 11px;
      font-weight: 800;
      color: #D45080;
      border: 1.5px solid rgba(255, 127, 161, .4);
      box-shadow: 0 2px 6px rgba(200, 80, 120, .18);
      cursor: pointer;
      white-space: nowrap;
      transition: background .15s;
    }

    .header-avatar-edit:active {
      background: rgba(255, 230, 240, .95)
    }

    /* ── Profile modal avatar picker ── */
    .avatar-option-row {
      display: flex;
      gap: 10px;
      justify-content: center;
      margin: 10px 0 16px;
    }

    .avatar-opt-btn {
      flex: 1;
      max-width: 96px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      padding: 10px 6px;
      border-radius: 16px;
      border: 1.5px solid rgba(255, 127, 161, .25);
      background: #FFF8FA;
      cursor: pointer;
      font-size: 11px;
      font-weight: 700;
      color: #D45080;
      transition: border-color .15s, background .15s;
    }

    .avatar-opt-btn:hover {
      border-color: #FF8AB4;
      background: #FFE8F0
    }

    .avatar-opt-btn:active {
      transform: scale(.95)
    }

    .avatar-opt-icon {
      font-size: 24px
    }

    .avatar-gen-status {
      font-size: 12px;
      color: var(--muted);
      text-align: center;
      min-height: 16px;
      margin-top: -8px;
      margin-bottom: 8px
    }

    /* ── Doll Cards ── */
    .doll-card {
      border-radius: 20px;
      border: 1.5px solid rgba(255, 127, 161, .18);
      background: #fff;
      box-shadow: 0 4px 18px rgba(0, 0, 0, .07);
      transition: transform .12s cubic-bezier(.34, 1.56, .64, 1), box-shadow .12s
    }

    .doll-card:active {
      transform: scale(.94) rotate(-1deg);
      box-shadow: 0 2px 8px rgba(0, 0, 0, .06)
    }

    .doll-avatar {
      width: 76px;
      height: 76px;
      border: 3px solid rgba(255, 127, 161, .28);
      box-shadow: 0 3px 10px rgba(255, 127, 161, .18)
    }

    .doll-card-name {
      font-size: 15px;
      font-weight: 800;
      color: #3D2B1F
    }

    .doll-card-tag {
      font-size: 11px;
      font-weight: 600;
      color: #9A8A85
    }

    .card-chat-btn {
      background: linear-gradient(135deg, #FF8AB4, #FFB3CC);
      border-radius: 99px;
      font-weight: 800;
      font-size: 12px;
      box-shadow: 0 3px 0 rgba(200, 60, 100, .25);
      transition: transform .1s, box-shadow .1s
    }

    .card-chat-btn:active {
      transform: translateY(2px);
      box-shadow: 0 1px 0 rgba(200, 60, 100, .25)
    }

    /* ── Status tags ── */
    .doll-status-tag {
      font-weight: 700;
      font-size: 10px;
      border-radius: 99px;
      transition: opacity .15s
    }

    .doll-status-tag:hover {
      opacity: .75
    }

    .doll-status-tag.idle {
      background: #EEF6FF;
      color: #5B9BD5
    }

    .doll-status-tag.studying {
      background: #FFF0F5;
      color: #D45080
    }

    .doll-status-tag.working {
      background: #FFFAEE;
      color: #CC8800
    }

    .doll-status-tag.playing {
      background: #F0FFF5;
      color: #2A9D6F
    }

    .doll-status-tag.resting {
      background: #EFF9FF;
      color: #3A86B8
    }

    /* ── Tab bars ── */
    .lib-tab-bar,
    .tab-bar {
      background: rgba(255, 255, 255, .92);
      backdrop-filter: blur(8px);
      border: 1.5px solid rgba(255, 127, 161, .18);
      box-shadow: 0 2px 10px rgba(0, 0, 0, .05)
    }

    .lib-tab-btn.active,
    .tab-btn.active {
      background: linear-gradient(135deg, #FF8AB4, #FFB3CC);
      color: #fff;
      font-weight: 800;
      box-shadow: 0 3px 0 rgba(200, 60, 100, .25)
    }

    .lib-tab-btn {
      color: #C890A8;
      font-weight: 600
    }

    #screen-library .lib-tab-bar {
      position: relative;
      z-index: 10;
      margin-top: -10px !important;
      margin-bottom: 18px !important;
    }

    #screen-library #socialPanel {
      position: relative;
      z-index: 18;
    }

    /* ── Primary button ── */
    .btn-primary {
      background: linear-gradient(135deg, #FF8AB4, #FFB3CC);
      color: #fff;
      font-weight: 900;
      font-size: 17px;
      letter-spacing: .3px;
      border-radius: 99px;
      box-shadow: 0 5px 0 rgba(200, 60, 100, .28), 0 8px 22px rgba(255, 138, 180, .28);
      transition: transform .1s, box-shadow .1s
    }

    .btn-primary:active {
      transform: translateY(4px);
      box-shadow: 0 1px 0 rgba(200, 60, 100, .28)
    }

    /* ── Setup hero ── */
    .setup-hero {
      background: linear-gradient(135deg, #87CEEB 0%, #B8D8F0 50%, #FFB8C9 100%);
      border-radius: 0 0 28px 28px;
      box-shadow: 0 6px 0 rgba(100, 160, 200, .25), 0 10px 26px rgba(135, 206, 235, .25);
      position: relative;
      overflow: hidden
    }

    .setup-hero h1 {
      font-size: 20px;
      font-weight: 900;
      color: #fff;
      text-shadow: 0 2px 0 rgba(0, 0, 0, .1)
    }

    /* ── Groups header ── */
    .groups-header {
      background: linear-gradient(135deg, #87CEEB 0%, #B0D8F5 50%, #FFB8C9 100%);
      border-radius: 0 0 28px 28px;
      box-shadow: 0 6px 0 rgba(100, 160, 200, .25), 0 10px 26px rgba(135, 206, 235, .2);
      position: relative;
      overflow: hidden
    }

    /* ── Chat screen ── */
    .chat-header {
      padding-top: 52px
    }

    .chat-title {
      color: #D45080;
      font-weight: 900;
      font-size: 20px
    }

    .icon-btn {
      box-shadow: 0 3px 0 rgba(0, 0, 0, .08);
      font-weight: 700;
      background: #fff;
      border: 1.5px solid rgba(255, 127, 161, .2)
    }

    .icon-btn:active {
      transform: translateY(2px)
    }

    .mic-btn {
      background: linear-gradient(135deg, #FF8AB4, #FFB3CC) !important;
      box-shadow: 0 5px 0 rgba(200, 60, 100, .3), 0 8px 20px rgba(255, 138, 180, .28) !important;
      width: 52px !important;
      height: 52px !important;
      font-size: 22px !important
    }

    .mic-btn.active {
      box-shadow: 0 2px 0 rgba(200, 60, 100, .3) !important;
      transform: translateY(4px)
    }

    @keyframes micPulse {
      0% {
        box-shadow: 0 5px 0 rgba(200, 60, 100, .35), 0 0 0 0 rgba(255, 138, 180, .5)
      }

      70% {
        box-shadow: 0 5px 0 rgba(200, 60, 100, .35), 0 0 0 18px rgba(255, 138, 180, 0)
      }

      100% {
        box-shadow: 0 5px 0 rgba(200, 60, 100, .35), 0 0 0 0 rgba(255, 138, 180, 0)
      }
    }

    .gc-mic-btn {
      background: linear-gradient(135deg, #6BC5E3, #87CEEB) !important;
      box-shadow: 0 5px 0 rgba(60, 130, 170, .28), 0 8px 18px rgba(107, 197, 227, .22) !important
    }

    .gc-mic-btn.active {
      transform: translateY(3px);
      box-shadow: 0 2px 0 rgba(60, 130, 170, .28) !important
    }

    /* Chat bubbles */
    .bubble.ai,
    .sc-msg.ai {
      background: linear-gradient(135deg, #F0F8FF, #EEF5FF);
      border: 1.5px solid rgba(107, 197, 227, .22);
      box-shadow: 0 2px 8px rgba(107, 197, 227, .1)
    }

    .bubble.user,
    .sc-msg.user {
      background: linear-gradient(135deg, #FF8AB4, #FFB3CC) !important;
      box-shadow: 0 3px 10px rgba(255, 138, 180, .22)
    }

    /* Form inputs */
    .form-input,
    .custom-input,
    .setup-chat-input,
    .gc-input {
      border-radius: 14px !important;
      border: 2px solid rgba(255, 127, 161, .22) !important;
      background: #FFF8FA !important;
      color: #3D2B1F !important;
      font-weight: 500
    }

    .form-input:focus,
    .custom-input:focus,
    .setup-chat-input:focus,
    .gc-input:focus {
      border-color: #FF8AB4 !important;
      box-shadow: 0 0 0 3px rgba(255, 138, 180, .12) !important
    }

    /* Status / group sheets */
    .status-picker-sheet {
      border-radius: 28px 28px 0 0;
      border-top: 3px solid #FF8AB4
    }

    .status-picker-title {
      font-weight: 900;
      font-size: 18px;
      color: var(--text)
    }

    .status-opt {
      border-radius: 16px;
      border: 1.5px solid rgba(255, 127, 161, .18);
      background: #FFF5F8
    }

    .status-opt.selected {
      background: linear-gradient(135deg, #FF8AB4, #FFB3CC) !important;
      box-shadow: 0 3px 0 rgba(200, 60, 100, .25)
    }

    .status-opt.selected .status-opt-label {
      color: #fff
    }

    .status-opt.selected .status-opt-icon {
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25))
    }

    .create-group-sheet {
      border-radius: 28px 28px 0 0;
      border-top: 3px solid #6BC5E3
    }

    .create-group-title {
      font-weight: 900;
      font-size: 18px
    }

    /* Group cards */
    .group-card {
      border-radius: 18px;
      border: 1.5px solid rgba(107, 197, 227, .2);
      background: #fff;
      box-shadow: 0 3px 12px rgba(0, 0, 0, .06);
      transition: transform .12s cubic-bezier(.34, 1.56, .64, 1)
    }

    .group-card:active {
      transform: scale(.96)
    }

    .group-icon {
      background: linear-gradient(135deg, #6BC5E3, #87CEEB);
      border-radius: 14px
    }

    .group-chat-header {
      padding-top: 52px
    }

    .group-chat-title {
      font-weight: 900;
      font-size: 19px;
      color: #D45080
    }

    .gc-bubble.doll {
      background: linear-gradient(135deg, #F0F8FF, #EEF5FF);
      border: 1.5px solid rgba(107, 197, 227, .2);
      box-shadow: 0 2px 8px rgba(107, 197, 227, .08)
    }

    .gc-bubble.user {
      background: linear-gradient(135deg, #FF8AB4, #FFB3CC);
      box-shadow: 0 3px 10px rgba(255, 138, 180, .22)
    }

    .gc-send-btn {
      background: linear-gradient(135deg, #FF8AB4, #FFB3CC);
      box-shadow: 0 4px 0 rgba(200, 60, 100, .25);
      transition: transform .1s, box-shadow .1s
    }

    .gc-send-btn:active {
      transform: translateY(3px);
      box-shadow: 0 1px 0 rgba(200, 60, 100, .25)
    }

    .gc-auto-btn {
      background: linear-gradient(135deg, #FFD86F, #FFBD59);
      color: #5D3A00;
      font-weight: 800;
      box-shadow: 0 3px 0 rgba(180, 120, 0, .2)
    }

    /* Toast / memory chip / recharge */
    .toast {
      background: linear-gradient(135deg, #FF8AB4, #6BC5E3) !important;
      font-weight: 700 !important;
      box-shadow: 0 5px 0 rgba(0, 0, 0, .12), 0 8px 28px rgba(255, 138, 180, .3) !important;
      border-radius: 99px !important
    }

    .memory-chip {
      background: linear-gradient(135deg, #6BC5E3, #87CEEB);
      color: #fff;
      font-weight: 700;
      border-radius: 99px;
      padding: 6px 16px;
      font-size: 12px
    }

    .recharge-modal {
      border-radius: 28px 28px 0 0 !important;
      border-top: 3px solid #FF8AB4 !important
    }

    .recharge-modal-title {
      font-weight: 900 !important;
      font-size: 20px !important;
      color: var(--text) !important
    }

    .card-del-btn,
    .group-del-btn {
      background: rgba(255, 138, 180, .1);
      color: #D45080;
      border: none
    }

    .card-del-btn:active,
    .group-del-btn:active {
      background: #FF8AB4;
      color: #fff
    }

    /* ── Auth screen — DollVoice launch asset (1080×1920, 9:16)
       card sits inside the baked-in white panel. ── */
    #screen-auth {
      background: url('/launch_1080x1920_universal.jpg') center/cover no-repeat #87CEEB !important;
      margin-top: 0;
      border-radius: 0;
      box-shadow: none;
      overflow: hidden;
      height: 100dvh !important;
      min-height: 100dvh !important;
      justify-content: flex-start !important;
      align-items: center !important;
      padding: 29vh 0 0 !important
    }

    .auth-starburst,
    .auth-bolt,
    .auth-confetti,
    .auth-doll,
    .auth-logo,
    .auth-app-name,
    .auth-tagline {
      display: none !important
    }

    #screen-auth .auth-card {
      position: relative;
      z-index: 3
    }

    .auth-hint {
      display: none !important
    }

    .auth-card {
      background: transparent !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      border: none !important;
      width: min(32vw, 280px) !important;
      max-width: 280px !important;
      max-height: 44vh !important;
      overflow-y: auto !important;
      margin: 0 !important;
      padding: 10px 8px !important
    }

    /* Doll foreground layer — same image, positioned to show bottom dolls above card */
    .auth-dolls-fg {
      display: none !important
    }

    .auth-dolls-fg img {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      height: 100vh;
      width: auto
    }

    .auth-tabs {
      background: #F5EEF5 !important
    }

    .auth-tab.active {
      background: linear-gradient(135deg, #FF8AB4, #FFB3CC) !important;
      color: #fff !important;
      font-weight: 800 !important
    }

    .auth-btn {
      background: linear-gradient(135deg, #FF8AB4, #FFB3CC) !important;
      color: #fff !important;
      font-weight: 900 !important;
      font-size: 16px !important;
      border-radius: 99px !important;
      padding: 14px !important;
      border: none !important;
      width: 100% !important;
      cursor: pointer !important;
      box-shadow: 0 5px 0 rgba(200, 60, 100, .28), 0 8px 20px rgba(255, 138, 180, .22) !important;
      transition: transform .1s, box-shadow .1s !important
    }

    .auth-btn:active {
      transform: translateY(4px) !important;
      box-shadow: 0 1px 0 rgba(200, 60, 100, .28) !important
    }

    .auth-hint {
      color: rgba(80, 60, 70, .65) !important;
      font-weight: 500 !important
    }

    .auth-input {
      border-radius: 14px !important;
      border: 2px solid rgba(255, 127, 161, .22) !important;
      background: #FFF8FA !important;
      color: #3D2B1F !important;
      min-height: 48px !important;
      padding: 11px 14px !important;
      font-size: 13px !important
    }

    .auth-input:focus {
      border-color: #FF8AB4 !important;
      box-shadow: 0 0 0 3px rgba(255, 138, 180, .12) !important
    }

    .auth-tab,
    .lib-tab-btn,
    .tab-btn,
    .social-sub-btn {
      font-size: 13px !important;
      line-height: 1 !important;
      white-space: nowrap !important;
    }

    .auth-tab {
      padding: 6px 0 !important
    }

    .lib-tab-btn,
    .tab-btn,
    .social-sub-btn {
      padding: 7px 0 !important
    }

    .auth-tabs,
    .lib-tab-bar,
    .tab-bar,
    .social-sub-tabs {
      gap: 4px !important;
      padding: 4px !important;
    }

    #screen-auth .auth-form {
      gap: 14px !important
    }

    #screen-auth .auth-btn {
      min-height: 46px !important;
      padding: 12px 12px !important;
      font-size: 13px !important;
      box-shadow: 0 4px 0 rgba(200, 60, 100, .24), 0 7px 16px rgba(255, 138, 180, .18) !important;
    }

    #screen-auth .auth-tabs {
      margin-bottom: 16px !important
    }

    @media (max-height:740px) {
      #screen-auth {
        padding-top: 27.5vh !important
      }

      .auth-card {
        padding: 8px 10px !important;
        max-height: 40vh !important
      }

      .auth-input {
        min-height: 40px !important;
        padding: 8px 12px !important
      }

      .auth-btn {
        min-height: 42px !important;
        padding: 9px 10px !important
      }
    }

    @media (max-width:380px) {
      #screen-auth .auth-card {
        width: 38vw !important
      }

      .lib-tab-btn,
      .tab-btn,
      .social-sub-btn,
      .auth-tab {
        font-size: 12px !important
      }

      .lib-tab-bar,
      .tab-bar {
        width: calc(100% - 24px) !important;
        margin-left: 12px !important;
        margin-right: 12px !important
      }
    }

    @media (min-width:700px) {
      #screen-auth {
        background-size: auto 100% !important
      }

      .auth-card {
        width: 280px !important
      }
    }

    /* Desktop browser preview should keep the mobile app canvas.
       Real phones (<700px) still use the full device width. */
    @media (min-width:700px) {
      body {
        background: #F7F9FF !important;
      }

      .screen {
        width: 430px !important;
        max-width: 100vw !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 18px 60px rgba(40, 60, 120, .18) !important;
      }

      .screen.hidden {
        transform: translateX(calc(-50% + 100vw)) !important;
        opacity: 0 !important;
        pointer-events: none !important;
      }

      .screen.slide-left {
        transform: translateX(calc(-50% - 100vw)) !important;
        opacity: 0 !important;
        pointer-events: none !important;
      }

      .lib-header {
        height: 190px !important;
        min-height: 190px !important;
        background-position: center top !important;
      }
    }

    /* Header dolls hidden — characters are baked into bg-header.png */
    .hdr-doll {
      display: none
    }

    /* Bounce animation for new messages */
    @keyframes msgBounce {
      0% {
        transform: scale(.6) translateY(10px);
        opacity: 0
      }

      60% {
        transform: scale(1.08) translateY(-3px);
        opacity: 1
      }

      100% {
        transform: scale(1) translateY(0);
        opacity: 1
      }
    }

    .gc-msg-row,
    .bubble {
      animation: msgBounce .3s cubic-bezier(.34, 1.56, .64, 1) both
    }

    /* Toast */
    .toast {
      background: linear-gradient(135deg, #FF2D78, #7B2FBE) !important;
      font-weight: 700 !important;
      box-shadow: 0 6px 0 rgba(100, 0, 80, .3), 0 10px 32px rgba(255, 45, 120, .4) !important;
      border-radius: 99px !important
    }

    /* Memory chip */
    .memory-chip {
      background: linear-gradient(135deg, #7B2FBE, #00D4FF);
      color: #fff;
      font-weight: 700;
      border-radius: 99px;
      padding: 6px 16px;
      font-size: 12px
    }

    /* Recharge modal */
    .recharge-modal {
      border-radius: 28px 28px 0 0 !important;
      border-top: 4px solid #FFD500 !important
    }

    .recharge-modal-title {
      font-weight: 900 !important;
      font-size: 20px !important;
      color: var(--text) !important
    }

    /* Delete buttons */
    .card-del-btn,
    .group-del-btn {
      background: rgba(255, 45, 120, .1);
      color: #FF2D78;
      border: none
    }

    .card-del-btn:active,
    .group-del-btn:active {
      background: #FF2D78;
      color: #fff
    }

    /* Doll select in group creation */
    .doll-select-item.selected {
      border-color: #FF2D78;
      background: linear-gradient(135deg, #FFF0F7, #F3E8FF)
    }

    /* GC avatar ring */
    .gc-avatar {
      border: 3px solid transparent;
      background: linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, #FF2D78, #7B2FBE, #00D4FF) border-box;
    }

    /* ── Social / 交友 ── */
    .social-sub-tabs {
      display: flex;
      gap: 6px;
      margin-bottom: 14px;
      background: rgba(255, 255, 255, .7);
      border-radius: 99px;
      padding: 5px;
      position: relative;
      z-index: 20
    }

    .social-sub-btn {
      flex: 1;
      padding: 8px 0;
      border-radius: 99px;
      border: none;
      background: transparent;
      font-size: 13px;
      color: var(--muted);
      cursor: pointer;
      font-weight: 500
    }

    .social-sub-btn.active {
      background: linear-gradient(135deg, #FF2D78, #FF8C3A);
      color: #fff;
      font-weight: 800;
      box-shadow: 0 4px 0 rgba(180, 20, 80, .35)
    }

    .discover-card {
      background: #fff;
      border-radius: 18px;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 10px;
      border: 3px solid transparent;
      background: linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, #FF2D78, #7B2FBE) border-box;
      box-shadow: 0 4px 16px rgba(123, 47, 190, .12)
    }

    .discover-avatar {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      background: linear-gradient(135deg, #FFCDD8, #FFB4A2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px
    }

    .discover-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .discover-info {
      flex: 1;
      min-width: 0
    }

    .discover-name {
      font-size: 15px;
      font-weight: 800;
      color: var(--text)
    }

    .discover-intro {
      font-size: 12px;
      color: var(--muted);
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .discover-action {
      flex-shrink: 0
    }

    .friend-req-btn {
      padding: 7px 14px;
      border-radius: 99px;
      border: none;
      background: linear-gradient(135deg, #FF2D78, #FF8C3A);
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 3px 0 rgba(180, 20, 80, .35)
    }

    .friend-req-btn:disabled {
      background: #eee;
      color: #aaa;
      box-shadow: none
    }

    .persona-banner {
      background: linear-gradient(135deg, rgba(123, 47, 190, .15), rgba(0, 212, 255, .1));
      border-radius: 16px;
      padding: 12px 14px;
      margin-bottom: 12px;
      border: 2px solid rgba(123, 47, 190, .25)
    }

    .persona-banner-title {
      font-size: 12px;
      font-weight: 700;
      color: var(--purple);
      margin-bottom: 6px
    }

    .persona-tag {
      display: inline-block;
      background: rgba(123, 47, 190, .12);
      color: var(--purple);
      border-radius: 99px;
      padding: 3px 10px;
      font-size: 11px;
      font-weight: 600;
      margin: 2px 2px
    }

    .profile-modal-avatar {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: linear-gradient(135deg, #FFCDD8, #C9B6FF);
      color: #fff;
      font-size: 28px;
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      cursor: pointer;
      margin: 0 auto 12px
    }

    .profile-modal-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .profile-readonly-box {
      background: rgba(123, 47, 190, .08);
      border-radius: 14px;
      padding: 11px 12px;
      color: var(--text);
      font-size: 12px;
      line-height: 1.6;
      margin: 10px 0
    }

    .match-badge {
      display: inline-block;
      background: linear-gradient(135deg, #FFD500, #FF8C3A);
      color: #fff;
      border-radius: 99px;
      padding: 1px 8px;
      font-size: 10px;
      font-weight: 700;
      margin-left: 4px;
      vertical-align: middle
    }

    .discover-section-title {
      font-size: 11px;
      font-weight: 700;
      color: var(--muted);
      letter-spacing: .05em;
      margin: 10px 2px 6px;
      text-transform: uppercase
    }

    .friend-card {
      background: #fff;
      border-radius: 18px;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 10px;
      box-shadow: 0 4px 16px rgba(123, 47, 190, .1)
    }

    .visit-btn {
      padding: 7px 14px;
      border-radius: 99px;
      border: none;
      background: linear-gradient(135deg, #7B2FBE, #00D4FF);
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 3px 0 rgba(80, 0, 160, .3)
    }

    .accept-btn {
      padding: 6px 12px;
      border-radius: 99px;
      border: none;
      background: linear-gradient(135deg, #00C86F, #00D4FF);
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer
    }

    .reject-btn {
      padding: 6px 12px;
      border-radius: 99px;
      border: none;
      background: #F5F5F5;
      color: #aaa;
      font-size: 12px;
      cursor: pointer
    }

    .social-section-title {
      font-size: 13px;
      font-weight: 800;
      color: var(--purple);
      margin: 10px 0 8px;
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .visit-card {
      background: #fff;
      border-radius: 18px;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 10px;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(123, 47, 190, .1);
      transition: transform .12s
    }

    .visit-card:active {
      transform: scale(.97)
    }

    .social-pending-badge {
      background: #FF2D78;
      color: #fff;
      border-radius: 99px;
      font-size: 10px;
      font-weight: 800;
      padding: 2px 7px
    }

    /* ── Social feature cards ── */
    .letter-card, .gift-card, .moment-card, .mission-card {
      background: #fff; border-radius: 18px; padding: 14px 16px;
      display: flex; gap: 12px; align-items: flex-start;
      margin-bottom: 10px; box-shadow: 0 4px 16px rgba(123,47,190,.1);
    }
    .letter-card .lc-avatar, .gift-card .lc-avatar, .moment-card .lc-avatar {
      width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
      flex-shrink: 0; display: flex; align-items: center; justify-content: center;
      background: var(--soft); font-size: 22px;
    }
    .letter-card .lc-avatar img, .gift-card .lc-avatar img, .moment-card .lc-avatar img {
      width: 100%; height: 100%; object-fit: cover;
    }
    .lc-body { flex: 1; min-width: 0; }
    .lc-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
    .lc-name { font-size: 14px; font-weight: 800; color: var(--text); }
    .lc-time { font-size: 11px; color: var(--muted); }
    .lc-content { font-size: 13px; color: var(--text); line-height: 1.5; }
    .lc-meta { font-size: 12px; color: var(--muted); margin-top: 4px; }
    .unread-dot { width: 8px; height: 8px; border-radius: 50%; background: #FF2D78; flex-shrink: 0; margin-top: 4px; }
    .gift-emoji-big { font-size: 32px; flex-shrink: 0; }
    .reaction-text { font-size: 12px; color: var(--purple); background: var(--soft); border-radius: 10px; padding: 4px 10px; margin-top: 6px; }
    .moment-react-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
    .react-chip { background: var(--soft); border: none; border-radius: 99px; padding: 4px 10px; font-size: 13px; cursor: pointer; color: var(--text); }
    .react-chip:active { transform: scale(.92); }
    .react-comment { font-size: 12px; color: var(--purple); }
    .mission-progress { margin-top: 8px; }
    .mission-bar-wrap { background: #f0e8ff; border-radius: 99px; height: 6px; overflow: hidden; margin: 4px 0; }
    .mission-bar { background: linear-gradient(90deg,#7B2FBE,#FF2D78); height: 100%; border-radius: 99px; transition: width .4s; }
    .intimacy-badge { display: inline-flex; align-items: center; gap: 3px; background: var(--soft); border-radius: 99px; padding: 2px 8px; font-size: 11px; color: var(--purple); font-weight: 700; }
    .social-action-bar { display: flex; gap: 8px; margin-bottom: 12px; }
    .social-action-btn { flex: 1; padding: 10px 0; border-radius: 14px; border: none; background: linear-gradient(135deg,#FF2D78,#FF8C3A); color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; }
    /* PvP card grid */
    .pvp-card-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; padding: 8px 12px; overflow-y: auto; flex: 1; }
    .pvp-card-cell { aspect-ratio: 1; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 26px; cursor: pointer; transition: transform .15s; }
    .pvp-card-cell.back { background: linear-gradient(135deg,#7B2FBE,#FF2D78); }
    .pvp-card-cell.flipped { background: #fff; }
    .pvp-card-cell.matched { background: rgba(143,255,58,.15); border: 2px solid rgba(143,255,58,.5); cursor: default; }
    .pvp-card-cell:active:not(.matched) { transform: scale(.9); }
    @keyframes spin { to { transform: rotate(360deg); } }
    /* Gift type grid */
    .gift-type-cell { aspect-ratio: 1; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; border: 2px solid transparent; background: var(--soft); transition: border-color .15s; }
    .gift-type-cell.selected { border-color: #FF2D78; background: #fce7f3; }
    .gift-type-cell .gt-emoji { font-size: 24px; }
    .gift-type-cell .gt-cost { font-size: 10px; color: var(--muted); font-weight: 700; }
    /* Mission type list item */
    .mission-type-item { padding: 10px 14px; border-radius: 14px; border: 2px solid transparent; background: var(--soft); cursor: pointer; font-size: 13px; color: var(--text); font-weight: 600; transition: border-color .15s; }
    .mission-type-item.selected { border-color: #7B2FBE; background: #ede8ff; }
    /* Play badge */
    .gc-play-badge {
      color: #7B2FBE;
      font-weight: 700
    }

    .gc-name-label {
      color: #7B2FBE;
      font-weight: 700
    }

    /* Scrollbar */
    ::-webkit-scrollbar {
      width: 4px
    }

    ::-webkit-scrollbar-track {
      background: transparent
    }

    ::-webkit-scrollbar-thumb {
      background: rgba(123, 47, 190, .3);
      border-radius: 99px
    }

    /* ══ 打地鼠游戏 ══ */
    #screen-whack {
      background: linear-gradient(160deg, #ffe0ec, #ffc2d4, #ffafd0);
      padding: 0
    }
    .whack-doll-bubble{
      position:absolute;top:12px;left:50%;transform:translateX(-50%) translateY(-4px);
      background:rgba(255,255,255,.95);color:#3D2B1F;border-radius:99px;
      padding:6px 18px;font-size:14px;font-weight:800;white-space:nowrap;
      box-shadow:0 3px 10px rgba(0,0,0,.18);max-width:88%;
      pointer-events:none;z-index:5;
      opacity:0;transition:opacity .15s,transform .15s;
    }
    .whack-doll-bubble.visible{opacity:1;transform:translateX(-50%) translateY(0)}

    .whack-hdr {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 18px;
      background: rgba(255,255,255,.55);
      backdrop-filter: blur(8px);
      border-bottom: 1.5px solid rgba(255,150,180,.3);
      border-radius: 28px 28px 0 0;
    }
    .whack-hdr .back-btn {
      background: rgba(255,100,150,.15);
      color: #c0336a;
      border: 1.5px solid rgba(255,100,150,.3);
      border-radius: 99px; padding: 6px 14px;
      font-size: 14px; cursor: pointer; font-weight: 700;
    }
    .whack-stat { text-align: center }
    .whack-stat-val { font-size: 26px; font-weight: 900; color: #c0336a }
    .whack-stat-lbl { font-size: 11px; color: #e887a8; margin-top: 2px }
    .whack-meta {
      display: flex; justify-content: center;
      gap: 8px; padding: 10px 12px 0
    }
    .whack-pill {
      min-width: 78px; text-align: center;
      border-radius: 99px; padding: 6px 10px;
      background: rgba(255,255,255,.75);
      color: #c0336a;
      border: 1.5px solid rgba(255,150,180,.5);
      font-size: 12px; font-weight: 800;
    }
    .whack-timer-wrap {
      width: 100%; height: 6px;
      background: rgba(255,180,200,.35); border-radius: 3px;
    }
    .whack-timer-bar {
      height: 100%;
      background: linear-gradient(90deg, #FF2D78, #FF8AB4);
      border-radius: 3px; transition: width .1s linear;
    }

    .whack-arena {
      flex: 1;
      width: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px 20px
    }

    .whack-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      width: 100%;
      max-width: 340px
    }

    .whack-hole {
      aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(ellipse at 40% 40%, #d46090, #8a2050);
      box-shadow: inset 0 6px 20px rgba(100, 0, 40, .5), 0 4px 12px rgba(180, 60, 100, .25);
      position: relative;
      overflow: hidden;
      cursor: pointer;
      border: 3px solid rgba(255, 200, 220, .25)
    }

    .whack-hole-inner {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      overflow: hidden;
      transform: translateY(110%);
      transition: transform .18s cubic-bezier(.34,1.4,.64,1);
      filter: drop-shadow(0 -4px 8px rgba(255,138,180,.5));
      background: linear-gradient(160deg, #ffb3cc, #ff8ab4);
      display: flex; align-items: center; justify-content: center;
    }
    .whack-hole.up .whack-hole-inner { transform: translateY(0%) }
    .whack-hole.hit .whack-hole-inner {
      transform: translateY(110%);
      transition: transform .1s ease-in;
      filter: drop-shadow(0 0 18px #FFD500);
    }
    .wh-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
    .whack-hole.gold::before  { content:'⭐'; position:absolute; top:-4px; right:-4px; font-size:20px; z-index:4; }
    .whack-hole.bonus::before { content:'💖'; position:absolute; top:-4px; right:-4px; font-size:20px; z-index:4; }
    .whack-hole.bad::before   { content:'💤'; position:absolute; top:-4px; right:-4px; font-size:20px; z-index:4; }

    .whack-hole.bad .whack-hole-inner {
      filter: drop-shadow(0 -4px 8px rgba(0, 212, 255, .45))
    }

    .whack-hole.gold .whack-hole-inner {
      filter: drop-shadow(0 -4px 10px rgba(255, 213, 0, .75))
    }

    .whack-hole.bonus .whack-hole-inner {
      filter: drop-shadow(0 -4px 10px rgba(255, 45, 120, .75))
    }

    .whack-hole.miss {
      animation: whackShake .22s ease
    }

    .whack-hole.hit::after {
      content: '💥';
      position: absolute;
      top: 20%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 36px;
      animation: whackPop .4s ease-out forwards;
      pointer-events: none
    }

    .whack-hole.bad.hit::after {
      content: '💦'
    }

    .whack-hole.gold.hit::after {
      content: '✨'
    }

    .whack-hole.bonus.hit::after {
      content: '💖'
    }

    @keyframes whackShake {

      0%,
      100% {
        transform: translateX(0)
      }

      30% {
        transform: translateX(-4px)
      }

      65% {
        transform: translateX(4px)
      }
    }

    @keyframes whackPop {
      0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(.5)
      }

      60% {
        opacity: 1;
        transform: translate(-50%, -60%) scale(1.2)
      }

      100% {
        opacity: 0;
        transform: translate(-50%, -80%) scale(1)
      }
    }

    .whack-combo {
      position: fixed;
      top: 30%;
      left: 50%;
      transform: translateX(-50%);
      font-size: 28px;
      font-weight: 900;
      color: #FF2D78;
      pointer-events: none;
      animation: comboPop .6s ease-out forwards;
      white-space: nowrap
    }

    @keyframes comboPop {
      0% {
        opacity: 1;
        transform: translateX(-50%) scale(.8) translateY(0)
      }

      60% {
        opacity: 1;
        transform: translateX(-50%) scale(1.2) translateY(-20px)
      }

      100% {
        opacity: 0;
        transform: translateX(-50%) scale(1) translateY(-50px)
      }
    }

    .whack-result {
      position: absolute;
      inset: 0;
      background: linear-gradient(160deg, rgba(255,224,236,.98), rgba(255,180,210,.98));
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      z-index: 10;
      animation: fadeIn .3s ease
    }

    @keyframes fadeIn {
      from {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }

    .whack-result-score {
      font-size: 72px;
      font-weight: 900;
      color: #c0336a;
      text-shadow: 0 4px 18px rgba(255, 100, 150, .35)
    }

    .whack-result-label {
      font-size: 16px;
      color: #a05070
    }

    .whack-result-rank {
      font-size: 36px;
      margin-top: 4px
    }

    .whack-result-stats {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
      max-width: 310px
    }

    .whack-result-stats span {
      border-radius: 99px;
      padding: 6px 10px;
      background: rgba(255, 255, 255, .75);
      color: #c0336a;
      font-size: 12px;
      font-weight: 800;
      border: 1px solid rgba(255,150,180,.4)
    }

    .whack-doll-say {
      background: rgba(255, 255, 255, .8);
      border-radius: 18px;
      padding: 14px 20px;
      max-width: 280px;
      text-align: center;
      color: #3D2B1F;
      font-size: 14px;
      line-height: 1.6;
      border: 1px solid rgba(255, 150, 180, .4)
    }

    .whack-result-btns {
      display: flex;
      gap: 12px;
      margin-top: 8px
    }

    .whack-btn {
      padding: 12px 24px;
      border-radius: 99px;
      border: none;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer
    }

    .whack-btn-primary {
      background: linear-gradient(135deg, #FF8AB4, #FFB3CC);
      color: #fff;
      box-shadow: 0 5px 0 rgba(200, 60, 100, .3)
    }

    .whack-btn-secondary {
      background: rgba(255, 255, 255, .6);
      color: #c0336a;
      border: 1.5px solid rgba(255,150,180,.5)
    }

    .whack-start-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(160deg, rgba(255,224,236,.97), rgba(255,180,210,.97));
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20px;
      z-index: 10
    }

    .whack-start-title {
      font-size: 32px;
      font-weight: 900;
      color: #c0336a
    }

    .whack-start-sub {
      font-size: 14px;
      color: #a05070;
      text-align: center;
      line-height: 1.7;
      max-width: 260px
    }

    .whack-doll-pick {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
      max-width: 320px;
      max-height: 200px;
      overflow-y: auto
    }

    .whack-doll-option {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      cursor: pointer;
      padding: 6px;
      border-radius: 12px;
      border: 2px solid transparent;
      transition: all .2s
    }

    .whack-doll-option.selected {
      border-color: #FF8AB4;
      background: rgba(255, 138, 180, .2)
    }

    .whack-doll-option .doll-emoji {
      width: 44px;
      height: 44px;
      font-size: 26px;
      line-height: 44px;
      text-align: center;
      border-radius: 50%
    }

    .whack-doll-option .doll-nm {
      font-size: 10px;
      color: #a05070;
      max-width: 52px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center
    }

    /* 游戏选择面板 */
    #gamePanel {
      width: 100%;
      max-width: 420px;
      padding: 20px 16px
    }

    .game-card {
      background: #fff;
      border-radius: 20px;
      padding: 20px;
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 16px;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
      transition: transform .15s
    }

    .game-card:active {
      transform: scale(.97)
    }

    .game-card-icon {
      font-size: 48px;
      flex-shrink: 0
    }

    .game-card-name {
      font-size: 17px;
      font-weight: 800;
      color: #3D2B1F
    }

    .game-card-desc {
      font-size: 13px;
      color: #9B7EC8;
      margin-top: 4px
    }

    .game-card-badge {
      margin-left: auto;
      background: linear-gradient(135deg, #FF8AB4, #FFB3CC);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 99px
    }

    /* 斗地主 */
    #screen-doudizhu {
      background: linear-gradient(160deg, #14532d, #052e16, #1a2e1a);
      padding: 0; overflow: hidden;
      align-items: stretch;
    }
    .ddz-hdr {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 16px; background: rgba(0,0,0,.35);
      backdrop-filter: blur(6px); flex-shrink: 0;
      border-bottom: 1px solid rgba(255,255,255,.08);
      border-radius: 28px 28px 0 0;
    }
    /* ── opponents row ── */
    .ddz-opponents-row {
      display: flex; align-items: stretch;
      padding: 10px 10px 6px; gap: 8px; flex-shrink: 0;
    }
    .ddz-opp-box {
      background: rgba(0,0,0,.3); border-radius: 14px; padding: 8px 10px;
      display: flex; flex-direction: column; align-items: center; gap: 5px;
      flex: 1; border: 1px solid rgba(255,255,255,.08);
    }
    .ddz-opp-name { color: #fff; font-size: 13px; font-weight: 700; }
    .ddz-opp-cnt { color: #ffd700; font-size: 11px; font-weight: 600; }
    .ddz-opp-backs { display: flex; }
    .ddz-card-back {
      width: 20px; height: 30px; background: linear-gradient(135deg, #991b1b, #dc2626);
      border-radius: 4px; border: 1px solid rgba(255,255,255,.3); margin-right: -7px;
      flex-shrink: 0;
    }
    .ddz-opp-last {
      display: flex; flex-wrap: wrap; gap: 2px; justify-content: center;
      min-height: 24px; align-items: center; width: 100%;
    }
    .ddz-sm-card {
      font-size: 12px; font-weight: 800; padding: 2px 5px;
      background: #fff; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.3);
    }
    .ddz-sm-card.red { color: #dc2626; }
    /* ── hole cards (center of opponents row) ── */
    .ddz-hole-area {
      display: flex; flex-direction: column; align-items: center;
      justify-content: center; gap: 5px; flex-shrink: 0; min-width: 90px;
    }
    .ddz-hole-row { display: flex; gap: 4px; justify-content: center; }
    /* ── play zone ── */
    .ddz-play-zone {
      flex: 1; display: flex; flex-direction: column; align-items: center;
      justify-content: center; padding: 6px 16px; gap: 8px; min-height: 0;
      border-top: 1px solid rgba(255,255,255,.06);
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .ddz-last-play {
      display: flex; flex-wrap: wrap; gap: 4px;
      justify-content: center; align-items: center; min-height: 72px;
    }
    /* ── cards ── */
    .ddz-card {
      width: 44px; height: 64px; background: #fff; border-radius: 8px;
      border: 2px solid #e5e7eb; display: flex; align-items: center;
      justify-content: center; font-size: 15px; font-weight: 800;
      cursor: pointer; transition: transform .12s; flex-shrink: 0;
      user-select: none; box-shadow: 0 2px 8px rgba(0,0,0,.35);
    }
    .ddz-card.red { color: #dc2626; }
    .ddz-card.joker { color: #7c3aed; font-size: 11px; font-weight: 900; }
    .ddz-card.selected { transform: translateY(-16px); border-color: #f472b6; box-shadow: 0 6px 16px rgba(244,114,182,.55); }
    /* ── player area ── */
    .ddz-player-area { padding: 8px 12px 4px; flex-shrink: 0; }
    .ddz-player-info { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
    .ddz-hand-row {
      display: flex; padding: 10px 6px 22px; overflow-x: auto;
      scrollbar-width: none;
    }
    .ddz-hand-row::-webkit-scrollbar { display: none; }
    .ddz-hand-row .ddz-card { margin-right: -18px; }
    .ddz-hand-row .ddz-card:last-child { margin-right: 0; }
    .ddz-hand-row .ddz-card.selected { transform: translateY(-16px); }
    /* ── action bar ── */
    .ddz-action-bar {
      display: flex; gap: 10px; padding: 8px 14px 16px;
      background: rgba(0,0,0,.25); flex-shrink: 0;
    }
    .ddz-btn {
      flex: 1; padding: 13px 8px; border: none; border-radius: 14px;
      font-size: 16px; font-weight: 700; cursor: pointer; transition: opacity .1s;
    }
    .ddz-btn:active { opacity: .7; transform: scale(.97); }
    .ddz-btn-play { background: linear-gradient(135deg, #ff8ab4, #f43f5e); color: #fff; }
    .ddz-btn-pass { background: rgba(255,255,255,.15); color: #fff; }
    .ddz-btn-hint { background: rgba(255,215,0,.18); color: #ffd700; flex: 0.65; }
    .ddz-role-badge { padding: 2px 8px; border-radius: 99px; font-size: 10px; font-weight: 800; }
    .ddz-landlord { background: #dc2626; color: #fff; }
    .ddz-peasant { background: rgba(255,255,255,.2); color: rgba(255,255,255,.85); }
    /* ── overlays ── */
    .ddz-bid-overlay, .ddz-end-overlay {
      position: absolute; inset: 0; background: rgba(0,0,0,.82);
      display: flex; flex-direction: column; align-items: center;
      justify-content: center; gap: 16px; z-index: 20;
    }
    .ddz-bid-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
    .ddz-bid-btn {
      padding: 13px 20px; border: none; border-radius: 14px;
      font-size: 15px; font-weight: 700; cursor: pointer;
    }
    .ddz-bid-btn:disabled { opacity: .35; cursor: not-allowed; }
    .ddz-bid-pass { background: rgba(255,255,255,.18); color: #fff; }
    .ddz-bid-1 { background: #16a34a; color: #fff; }
    .ddz-bid-2 { background: #d97706; color: #fff; }
    .ddz-bid-3 { background: #dc2626; color: #fff; }

    /* ════ 狼人杀 ════ */
    #screen-werewolf {
      background: linear-gradient(160deg, #0f172a, #1e1b4b, #0f172a);
      padding: 0; overflow: hidden; align-items: stretch;
    }
    .wolf-hdr {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 16px; background: rgba(0,0,0,.4);
      backdrop-filter: blur(6px); flex-shrink: 0;
      border-bottom: 1px solid rgba(255,255,255,.08);
      border-radius: 28px 28px 0 0;
    }
    .wolf-phase-badge {
      font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: 99px;
      background: rgba(255,255,255,.1); color: rgba(255,255,255,.7);
    }
    .wolf-phase-badge.night { background: rgba(99,102,241,.35); color: #a5b4fc; }
    .wolf-phase-badge.day   { background: rgba(251,191,36,.25);  color: #fcd34d; }
    .wolf-player-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 7px; padding: 10px 10px 4px; flex-shrink: 0;
    }
    .wolf-pcard {
      background: rgba(255,255,255,.07); border-radius: 12px; padding: 8px 5px 7px;
      display: flex; flex-direction: column; align-items: center; gap: 4px;
      border: 2px solid transparent; transition: all .18s; position: relative;
    }
    .wolf-pcard.selectable { cursor: pointer; }
    .wolf-pcard.selectable:active { background: rgba(255,255,255,.13); }
    .wolf-pcard.selected { border-color: #f43f5e; background: rgba(244,63,94,.15); }
    .wolf-pcard.dead { opacity: .32; }
    .wolf-pcard.dead::after { content:'💀'; position:absolute; top:4px; right:5px; font-size:13px; }
    .wolf-pcard.wolf-highlight { border-color: #6366f1; background: rgba(99,102,241,.15); }
    .wolf-av {
      width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
      border: 2px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08);
      display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
    }
    .wolf-av img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
    .wolf-pname { color:#fff; font-size:11px; font-weight:700; text-align:center; line-height:1.2; }
    .wolf-prole { font-size:10px; padding:1px 7px; border-radius:99px; font-weight:700; margin-top:1px; }
    .wolf-role-wolf     { background:#dc2626; color:#fff; }
    .wolf-role-seer     { background:#7c3aed; color:#fff; }
    .wolf-role-witch    { background:#059669; color:#fff; }
    .wolf-role-villager { background:rgba(255,255,255,.13); color:rgba(255,255,255,.65); }
    .wolf-role-hidden   { background:rgba(255,255,255,.06); color:rgba(255,255,255,.3); }
    .wolf-you-tag {
      position:absolute; top:-5px; left:50%; transform:translateX(-50%);
      background:#f59e0b; color:#fff; font-size:8px; font-weight:900;
      padding:1px 6px; border-radius:99px; white-space:nowrap;
    }
    .wolf-main {
      flex:1; display:flex; flex-direction:column; align-items:center;
      padding:8px 14px; gap:8px; min-height:0; overflow-y:auto; width:100%;
      scrollbar-width:none;
    }
    .wolf-main::-webkit-scrollbar { display:none; }
    .wolf-announce {
      color:#fcd34d; font-size:16px; font-weight:800; text-align:center;
      padding:8px 0;
    }
    .wolf-log-entry {
      width:100%; background:rgba(255,255,255,.06); border-radius:10px;
      padding:8px 12px; color:rgba(255,255,255,.7); font-size:13px; line-height:1.5;
    }
    .wolf-speech {
      width:100%; background:rgba(255,255,255,.07); border-radius:12px;
      padding:10px 12px; display:flex; flex-direction:column; gap:3px;
      border-left:3px solid rgba(255,255,255,.15);
    }
    .wolf-speech-who { font-size:11px; color:rgba(255,255,255,.45); font-weight:700; }
    .wolf-speech-txt { font-size:13px; color:#fff; line-height:1.5; }
    .wolf-action-bar {
      display:flex; gap:10px; padding:8px 14px 16px;
      background:rgba(0,0,0,.25); flex-shrink:0; width:100%;
    }
    .wolf-btn {
      flex:1; padding:13px 8px; border:none; border-radius:14px;
      font-size:15px; font-weight:700; cursor:pointer; transition:opacity .1s,transform .1s;
    }
    .wolf-btn:active { opacity:.75; transform:scale(.97); }
    .wolf-btn:disabled { opacity:.3; cursor:not-allowed; transform:none; }
    .wolf-btn-primary  { background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; }
    .wolf-btn-danger   { background:linear-gradient(135deg,#ef4444,#dc2626); color:#fff; }
    .wolf-btn-gold     { background:linear-gradient(135deg,#f59e0b,#d97706); color:#fff; }
    .wolf-btn-secondary{ background:rgba(255,255,255,.12); color:#fff; }
    .wolf-btn-sm { flex:none; padding:10px 18px; font-size:14px; }
    /* mini player card for night pickers */
    .wolf-mini-grid {
      display:grid; grid-template-columns:repeat(3,1fr); gap:7px; width:100%;
    }
    .wolf-mini-card {
      background:rgba(255,255,255,.07); border-radius:10px; padding:8px 4px;
      display:flex; flex-direction:column; align-items:center; gap:4px;
      cursor:pointer; border:2px solid transparent; transition:all .15s;
    }
    .wolf-mini-card:active { background:rgba(255,255,255,.13); }
    .wolf-mini-card.selected { border-color:#f43f5e; background:rgba(244,63,94,.15); }
    .wolf-mini-card.good-selected { border-color:#6366f1; background:rgba(99,102,241,.15); }
    /* overlays */
    .wolf-overlay {
      position:absolute; inset:0; background:rgba(0,0,0,.88);
      display:flex; flex-direction:column; align-items:center;
      justify-content:center; gap:14px; z-index:20; padding:24px;
    }
    .wolf-night-overlay {
      position:absolute; inset:0;
      background:linear-gradient(160deg,rgba(10,15,30,.97),rgba(20,20,60,.97));
      display:flex; flex-direction:column; align-items:center;
      justify-content:flex-start; gap:12px; z-index:15;
      padding:20px 16px; overflow-y:auto; scrollbar-width:none;
    }
    .wolf-night-overlay::-webkit-scrollbar { display:none; }
    .wolf-night-title { font-size:22px; font-weight:900; color:#a5b4fc; text-align:center; letter-spacing:1px; }
    .wolf-night-sub { font-size:13px; color:rgba(165,180,252,.65); text-align:center; }
    .wolf-check-result {
      font-size:17px; font-weight:800; text-align:center;
      padding:12px 20px; border-radius:12px; background:rgba(255,255,255,.07); width:100%; max-width:300px;
    }
    .wolf-check-result.is-wolf { color:#f87171; }
    .wolf-check-result.is-good { color:#86efac; }
    .wolf-speech.you { border-left-color:#f59e0b; }
    .wolf-speech.you .wolf-speech-who { color:#fcd34d; }
    .wolf-user-input-wrap {
      width:100%; display:flex; flex-direction:column; gap:7px;
    }
    .wolf-user-input-row {
      display:flex; gap:7px; align-items:flex-end;
    }
    .wolf-user-ta {
      flex:1; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
      border-radius:10px; padding:8px 10px; color:#fff; font-size:13px;
      resize:none; outline:none; line-height:1.4; min-height:40px;
    }
    .wolf-user-ta::placeholder { color:rgba(255,255,255,.35); }
    .wolf-user-ta:focus { border-color:rgba(99,102,241,.6); }
    .wolf-mic-sm {
      width:40px; height:40px; border:none; border-radius:10px; flex-shrink:0;
      background:rgba(255,255,255,.12); color:#fff; font-size:18px; cursor:pointer;
    }
    .wolf-mic-sm.on { background:rgba(239,68,68,.4); }

    /* ════ 卡牌对战 ════ */
    #screen-cardgame {
      background:linear-gradient(160deg,#0d0a1a,#1a1035,#0a0d1a);
      padding:0; overflow:hidden; align-items:stretch;
    }
    .cg-phase-banner {
      position:absolute; inset:0; z-index:50; display:flex; align-items:center;
      justify-content:center; pointer-events:none;
    }
    .cg-phase-banner-box {
      padding:14px 40px; border-radius:18px; font-size:22px; font-weight:900;
      color:#fff; text-align:center;
      background:rgba(0,0,0,.85); border:2px solid rgba(255,255,255,.2);
      box-shadow:0 8px 32px rgba(0,0,0,.6);
      animation:cgBannerIn .3s ease-out forwards;
    }
    .cg-phase-banner.out .cg-phase-banner-box { animation:cgBannerOut .25s ease-in forwards; }
    @keyframes cgBannerIn { from{opacity:0;transform:scale(.7)} to{opacity:1;transform:scale(1)} }
    @keyframes cgBannerOut { from{opacity:1;transform:scale(1)} to{opacity:0;transform:scale(1.15)} }
    .cg-mulligan-wrap {
      position:absolute; inset:0; z-index:40; background:rgba(0,0,0,.93);
      display:flex; flex-direction:column; align-items:center;
      justify-content:center; gap:16px; padding:20px;
    }
    .cg-mulligan-title { font-size:18px; font-weight:900; color:#fff; }
    .cg-mulligan-sub { font-size:12px; color:rgba(255,255,255,.45); }
    .cg-mulligan-row { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
    .cg-mulligan-card {
      width:72px; border-radius:12px; padding:8px 5px 6px;
      display:flex; flex-direction:column; align-items:center; gap:3px;
      cursor:pointer; border:2px solid rgba(99,102,241,.5);
      background:linear-gradient(160deg,rgba(99,102,241,.25),rgba(139,92,246,.12));
      transition:all .2s; position:relative; user-select:none;
    }
    .cg-mulligan-card.swap {
      opacity:.38; border-color:rgba(239,68,68,.5);
      background:linear-gradient(160deg,rgba(239,68,68,.15),rgba(0,0,0,.1));
    }
    .cg-swap-badge {
      position:absolute; top:-7px; left:50%; transform:translateX(-50%);
      background:#ef4444; color:#fff; font-size:9px; font-weight:700;
      padding:1px 6px; border-radius:99px; display:none;
    }
    .cg-hero-row {
      display:flex; align-items:center; gap:8px; padding:5px 10px; flex-shrink:0;
      border-radius:10px; transition:background .2s;
    }
    .cg-hero-row.targetable {
      background:rgba(239,68,68,.2); cursor:pointer;
      box-shadow:0 0 14px rgba(239,68,68,.45); animation:cgPulse .8s infinite alternate;
    }
    .cg-hero-av {
      width:44px; height:44px; border-radius:50%; border:2px solid rgba(255,255,255,.2);
      background:rgba(255,255,255,.08); overflow:hidden; flex-shrink:0;
      display:flex; align-items:center; justify-content:center; font-size:22px;
    }
    .cg-hero-av img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
    .cg-hero-info { flex:1; min-width:0; }
    .cg-hero-name { font-size:12px; font-weight:700; color:rgba(255,255,255,.8); }
    .cg-hp-bar-wrap { display:flex; align-items:center; gap:5px; margin-top:2px; }
    .cg-hp-bar { flex:1; height:5px; background:rgba(255,255,255,.12); border-radius:3px; overflow:hidden; }
    .cg-hp-fill { height:100%; background:linear-gradient(90deg,#ef4444,#f97316); border-radius:3px; transition:width .4s; }
    .cg-hp-text { font-size:13px; font-weight:900; color:#fff; min-width:24px; text-align:right; }
    .cg-hp-btn {
      flex-shrink:0; border-radius:50%; border:2px solid rgba(255,255,255,.2);
      width:50px; height:50px; display:flex; flex-direction:column;
      align-items:center; justify-content:center; gap:1px;
      cursor:pointer; transition:all .15s; background:none; padding:0;
    }
    .cg-hp-btn.ready { border-color:#10b981; box-shadow:0 0 10px rgba(16,185,129,.5); background:rgba(16,185,129,.15); }
    .cg-hp-btn.used { opacity:.3; cursor:not-allowed; }
    .cg-hp-btn.targeting { border-color:#fbbf24; box-shadow:0 0 10px rgba(251,191,36,.5); animation:cgPulse .7s infinite alternate; }
    .cg-hp-btn-ico { font-size:18px; line-height:1; }
    .cg-hp-btn-cost { font-size:8px; color:rgba(255,255,255,.55); font-weight:700; }
    .cg-board {
      flex:1; display:flex; align-items:center; justify-content:center;
      gap:5px; padding:3px 8px; min-height:60px; max-height:110px; flex-wrap:nowrap;
    }
    .cg-minion {
      width:58px; min-width:58px; background:rgba(255,255,255,.09);
      border-radius:10px; border:2px solid rgba(255,255,255,.2);
      padding:3px 3px 4px;
      display:flex; flex-direction:column; align-items:center; gap:1px;
      cursor:pointer; transition:all .15s; position:relative; user-select:none;
      touch-action:manipulation;
    }
    .cg-minion.can-atk { border-color:#fbbf24; box-shadow:0 0 9px rgba(251,191,36,.55); }
    .cg-minion.sel { border-color:#818cf8; box-shadow:0 0 12px rgba(99,102,241,.7); transform:translateY(-6px); }
    .cg-minion.tgt { border-color:#ef4444; box-shadow:0 0 9px rgba(239,68,68,.55); animation:cgPulse .7s infinite alternate; }
    .cg-minion.has-taunt { border-color:#16a34a; box-shadow:0 0 0 2px #16a34a; }
    .cg-minion.zzz { opacity:.45; }
    .cg-m-art { font-size:18px; line-height:1; margin-top:1px; }
    .cg-m-name { font-size:6.5px; color:rgba(255,255,255,.8); text-align:center; line-height:1.2; font-weight:600; }
    .cg-m-stats { display:flex; justify-content:space-between; width:100%; padding:0 2px; margin-top:1px; }
    .cg-m-atk { font-size:13px; font-weight:900; color:#fbbf24; line-height:1; }
    .cg-m-hp { font-size:13px; font-weight:900; color:#4ade80; line-height:1; }
    .cg-m-hp.hurt { color:#f87171; }
    .cg-m-kw { display:flex; gap:2px; font-size:8px; min-height:10px; justify-content:center; }
    .cg-hand {
      display:flex; gap:4px 4px; padding:4px 6px 6px; flex-shrink:0;
      justify-content:center; flex-wrap:wrap; align-content:flex-start;
      overflow:hidden;
    }
    .cg-card {
      width:60px; flex-shrink:0; border-radius:12px; padding:6px 4px 5px;
      display:flex; flex-direction:column; align-items:center; gap:2px;
      cursor:pointer; transition:all .18s; position:relative; user-select:none;
      border:2px solid rgba(99,102,241,.5);
      background:linear-gradient(160deg,rgba(99,102,241,.22),rgba(139,92,246,.1));
      touch-action:manipulation;
    }
    .cg-card.excl { border-color:var(--cg-excl-border,rgba(251,191,36,.6)); background:linear-gradient(160deg,var(--cg-excl-bg,rgba(245,158,11,.2)),rgba(0,0,0,.1)); }
    .cg-card.sel { border-color:#fbbf24; transform:translateY(-6px); box-shadow:0 6px 20px rgba(251,191,36,.4); }
    .cg-card.dim { opacity:.35; cursor:not-allowed; }
    .cg-card:active:not(.dim) { transform:scale(.93); }
    .cg-card.sel:active { transform:translateY(-6px) scale(.96); }
    .cg-cost {
      position:absolute; top:-7px; left:-7px; width:20px; height:20px;
      border-radius:50%; background:#4f46e5; border:2px solid #818cf8;
      font-size:12px; font-weight:900; color:#fff;
      display:flex; align-items:center; justify-content:center;
    }
    .cg-card.excl .cg-cost { background:var(--cg-excl-cost,#b45309); border-color:var(--cg-excl-border,#fbbf24); }
    .cg-c-art { font-size:18px; margin-top:4px; line-height:1; }
    .cg-c-name { font-size:7px; color:#fff; text-align:center; font-weight:700; line-height:1.2; }
    .cg-c-stats { font-size:11px; font-weight:900; color:rgba(255,255,255,.9); }
    .cg-c-desc { font-size:6px; color:rgba(255,255,255,.42); text-align:center; line-height:1.3; }
    .cg-c-excl { font-size:6px; color:#fbbf24; font-weight:700; }
    .cg-center-row {
      display:flex; align-items:center; gap:8px; padding:0 12px; flex-shrink:0; height:22px;
    }
    .cg-center-line { flex:1; height:1px; background:rgba(255,255,255,.06); }
    .cg-crystal { width:14px; height:14px; border-radius:50%; border:1px solid rgba(255,255,255,.2); flex-shrink:0; }
    .cg-crystal.full { background:#6366f1; border-color:#818cf8; box-shadow:0 0 4px rgba(99,102,241,.55); }
    .cg-crystal.empty { background:rgba(255,255,255,.06); }
    .cg-mana-txt { font-size:10px; color:#a5b4fc; font-weight:700; margin:0 2px; }
    .cg-action-bar {
      display:flex; gap:8px; padding:5px 10px 12px; flex-shrink:0; align-items:center;
    }
    .cg-btn { border:none; border-radius:12px; font-size:13px; font-weight:700; cursor:pointer; transition:opacity .1s; }
    .cg-btn:active { opacity:.72; }
    .cg-btn:disabled { opacity:.28; cursor:not-allowed; }
    .cg-btn-end { flex:1; padding:12px; background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; }
    .cg-btn-end.yourturn { background:linear-gradient(135deg,#059669,#10b981); animation:cgPulse .9s infinite alternate; }
    .cg-btn-cancel { padding:12px 14px; background:rgba(255,255,255,.1); color:rgba(255,255,255,.65); }
    .cg-log { font-size:10px; color:rgba(255,255,255,.33); text-align:center;
      padding:1px 12px; flex-shrink:0; min-height:13px; line-height:1.3; }
    .cg-hint-bar {
      font-size:12px; font-weight:600; color:rgba(255,255,255,.85); text-align:center;
      padding:5px 14px; flex-shrink:0; min-height:24px; line-height:1.4;
      background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.05);
    }
    .cg-overlay {
      position:absolute; inset:0; background:rgba(0,0,0,.92);
      display:flex; flex-direction:column; align-items:center;
      justify-content:center; gap:14px; z-index:30; padding:24px;
    }
    .cg-end-result { font-size:24px; font-weight:900; }
    .cg-doll-say {
      background:rgba(255,255,255,.07); border-radius:12px; padding:12px 16px;
      font-size:13px; color:#fff; max-width:280px; text-align:center; line-height:1.5;
    }
    .cg-topbar {
      display:flex; align-items:center; gap:6px; padding:5px 12px; flex-shrink:0;
      background:rgba(0,0,0,.35); border-bottom:1px solid rgba(255,255,255,.06);
    }
    .cg-phase { font-size:11px; font-weight:700; padding:2px 10px; border-radius:99px;
      background:rgba(255,255,255,.1); color:rgba(255,255,255,.6); white-space:nowrap; }
    .cg-phase.pturn { background:rgba(16,185,129,.3); color:#6ee7b7; }
    .cg-phase.dturn { background:rgba(239,68,68,.25); color:#fca5a5; }
    .cg-deck-txt { font-size:10px; color:rgba(255,255,255,.3); white-space:nowrap; }
    @keyframes cgPulse { from{opacity:.8} to{opacity:1} }
    @keyframes cgAtkFlash { 0%{transform:scale(1)} 40%{transform:scale(1.18)} 100%{transform:scale(1)} }

    /* ── 小屏手机适配 (高度 < 700px) ── */
    @media (max-height: 700px) {
      .cg-hero-av { width:36px; height:36px; font-size:18px; }
      .cg-hero-row { padding:3px 8px; }
      .cg-board { min-height:48px; max-height:80px; padding:2px 6px; }
      .cg-minion { width:50px; min-width:50px; }
      .cg-m-art { font-size:15px; }
      .cg-hand { padding:3px 4px 4px; gap:3px 3px; }
      .cg-card { width:52px; }
      .cg-c-art { font-size:15px; }
      .cg-action-bar { padding:3px 8px 8px; gap:6px; }
      .cg-btn-end, .cg-btn-cancel { padding:9px 10px; font-size:12px; }
      .cg-hint-bar { padding:2px 10px; min-height:18px; font-size:11px; }
      .cg-center-row { height:18px; }
      .cg-hp-btn { width:42px; height:42px; }
      .cg-hp-btn-ico { font-size:15px; }
    }
    /* ── 极窄屏 (宽度 < 360px) ── */
    @media (max-width: 360px) {
      .cg-card { width:48px; }
      .cg-minion { width:46px; min-width:46px; }
      .cg-cost { width:18px; height:18px; font-size:10px; }
    }

    /* 规则弹窗 */
    .cg-rules-backdrop {
      position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.75);
      display:flex;align-items:center;justify-content:center;padding:20px;
    }
    .cg-rules-box {
      background:linear-gradient(160deg,#1e1040,#0d0a2a);
      border:1px solid rgba(255,255,255,.15);border-radius:20px;
      padding:24px 20px;width:100%;max-width:360px;max-height:85vh;overflow-y:auto;
      display:flex;flex-direction:column;gap:14px;
    }
    .cg-rules-title { font-size:18px;font-weight:900;color:#fff;text-align:center; }
    .cg-rules-section { font-size:12px;font-weight:800;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.05em;margin-top:4px; }
    .cg-rules-item { display:flex;align-items:flex-start;gap:10px;padding:8px 10px;background:rgba(255,255,255,.05);border-radius:10px; }
    .cg-rules-ico { font-size:20px;flex-shrink:0;line-height:1.2; }
    .cg-rules-text { flex:1; }
    .cg-rules-text b { display:block;font-size:13px;color:#fff;font-weight:800;line-height:1.3; }
    .cg-rules-text span { font-size:11px;color:rgba(255,255,255,.5);line-height:1.4; }
    .cg-rules-kw { display:inline-block;background:rgba(99,102,241,.3);border:1px solid rgba(99,102,241,.5);border-radius:6px;padding:1px 7px;font-size:10px;font-weight:700;color:#a5b4fc;margin:1px; }

    /* 记忆翻牌 */
    #screen-memory {
      background: linear-gradient(160deg, #1a0533, #2d0b5e, #0d1a4a);
      padding: 0
    }

    .mem-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      width: 100%;
      max-width: 360px
    }

    .mem-card {
      aspect-ratio: 1;
      border-radius: 14px;
      cursor: pointer;
      position: relative;
      transform-style: preserve-3d;
      transition: transform .35s ease
    }

    .mem-card.flipped,
    .mem-card.matched {
      transform: rotateY(180deg)
    }

    .mem-card-front,
    .mem-card-back {
      position: absolute;
      inset: 0;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      backface-visibility: hidden
    }

    .mem-card-back {
      background: linear-gradient(135deg, #FF8AB4, #FFB3CC);
      transform: rotateY(180deg);
      overflow: hidden;
      padding: 0
    }
    .mem-card-back img {
      width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block
    }

    .mem-card-front {
      background: rgba(255, 255, 255, .1);
      border: 2px solid rgba(255, 255, 255, .15);
      font-size: 22px
    }

    .mem-card.matched .mem-card-back {
      background: linear-gradient(135deg, #8FFF3A, #4CAF50);
      box-shadow: 0 0 16px rgba(143, 255, 58, .4)
    }