html, body { overscroll-behavior: none; }
    body {
      background: #0a0807;
      color: #e8d9b4;
      font-family: 'Inter', system-ui, sans-serif;
      background-image:
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(139, 26, 26, 0.10) 0%, transparent 60%),
        radial-gradient(ellipse 80% 50% at 50% 100%, rgba(201, 160, 74, 0.05) 0%, transparent 60%);
      min-height: 100vh;
    }
    .serif { font-family: 'Cinzel', Georgia, serif; letter-spacing: 0.04em; }
    h1, h2, h3 { font-family: 'Cinzel', Georgia, serif; letter-spacing: 0.04em; }
    .scroll-area::-webkit-scrollbar { width: 6px; height: 6px; }
    .scroll-area::-webkit-scrollbar-track { background: #16110c; }
    .scroll-area::-webkit-scrollbar-thumb { background: #4a3820; border-radius: 3px; }
    .ornament { background: linear-gradient(90deg, transparent, #c9a04a 50%, transparent); height: 1px; }
    .gold-glow { box-shadow: 0 0 24px rgba(201, 160, 74, 0.18); }
    .blood-glow { box-shadow: 0 0 16px rgba(139, 26, 26, 0.35); }
    .panel-edge { box-shadow: inset 0 1px 0 rgba(201,160,74,0.08), inset 0 0 0 1px rgba(58,44,24,0.6); }
    input, textarea, select {
      background: #0f0c09;
      border: 1px solid #3a2c18;
      color: #e8d9b4;
      border-radius: 6px;
      padding: 8px 10px;
      width: 100%;
      font-size: 14px;
    }
    input:focus, textarea:focus, select:focus {
      outline: none;
      border-color: #c9a04a;
      box-shadow: 0 0 0 3px rgba(201,160,74,0.15);
    }
    button { -webkit-tap-highlight-color: transparent; }
    .btn-primary {
      background: linear-gradient(180deg, #c9a04a 0%, #8a6c30 100%);
      color: #1a1208;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      font-size: 13px;
      padding: 10px 16px;
      border-radius: 4px;
      border: 1px solid #6a4e1e;
      box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 -1px 0 rgba(0,0,0,0.3) inset;
    }
    .btn-primary:active { transform: translateY(1px); }
    .btn-blood {
      background: linear-gradient(180deg, #8b1a1a 0%, #5b1010 100%);
      color: #f8e8c0;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      font-size: 13px;
      padding: 10px 16px;
      border-radius: 4px;
      border: 1px solid #6b1010;
      box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 -1px 0 rgba(0,0,0,0.3) inset;
    }
    .btn-ghost {
      background: transparent;
      color: #e8d9b4;
      border: 1px solid #3a2c18;
      padding: 10px 14px;
      border-radius: 4px;
      font-size: 13px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      font-weight: 600;
    }
    .btn-ghost:hover { border-color: #c9a04a; color: #e6c068; }
    .chip {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
      padding: 3px 8px; border-radius: 999px; font-weight: 600;
      border: 1px solid #3a2c18; color: #b8a880; background: rgba(58,44,24,0.3);
    }
    .chip-gold { border-color: #8a6c30; color: #e6c068; background: rgba(138,108,48,0.15); }
    .chip-blood { border-color: #6b1010; color: #f08080; background: rgba(139,26,26,0.2); }
    .corner-deco::before, .corner-deco::after {
      content: ""; position: absolute; width: 12px; height: 12px;
      border-color: #c9a04a; border-style: solid; border-width: 0;
    }
    .corner-deco::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
    .corner-deco::after { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }
    @keyframes pulseGold {
      0%, 100% { box-shadow: 0 0 0 0 rgba(201,160,74,0.5); }
      50% { box-shadow: 0 0 0 8px rgba(201,160,74,0); }
    }
    .pulse-gold { animation: pulseGold 2.4s infinite; }
    .hp-bar { background: linear-gradient(90deg, #8b1a1a, #c93030); }
    .no-tap { -webkit-touch-callout: none; user-select: none; }