:root {
      --hok-bg-deep: #0B1324;
      --hok-bg-card: #111D35;
      --hok-bg-panel: #162645;
      --hok-gold-light: #FFF3D1;
      --hok-gold-mid: #E6C17A;
      --hok-gold-dark: #B38738;
      --hok-gold-deep: #78551B;
      --hok-red: #FF3B4E;
      --hok-red-dark: #6E1423;
      --hok-blue: #00A8FF;
      --hok-blue-dark: #0C3B6E;
    }

    * {
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

    body {
      margin: 0;
      padding: 0;
      background-color: #050912;
      background-image: 
        radial-gradient(circle at 50% 0%, rgba(230, 193, 122, 0.16) 0%, transparent 55%),
        radial-gradient(circle at 15% 40%, rgba(255, 59, 78, 0.08) 0%, transparent 45%),
        radial-gradient(circle at 85% 60%, rgba(0, 168, 255, 0.08) 0%, transparent 45%);
      color: #F4EFE6;
      font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
      overflow-x: hidden;
    }

    /* Mobile App Shell */
    .app-shell {
      max-width: 460px;
      margin: 0 auto;
      min-height: 100vh;
      background: linear-gradient(180deg, #0B1324 0%, #091020 50%, #0B1324 100%);
      position: relative;
      box-shadow: 0 0 60px rgba(0, 0, 0, 0.9), 0 0 1px 1px rgba(230, 193, 122, 0.25);
      padding-bottom: 92px;
      overflow-x: hidden;
    }

    /* Hok Calligraphy & Metallic Text */
    .hok-title-gold {
      background: linear-gradient(180deg, #FFFFFF 0%, #FFE8B3 38%, #E6C17A 72%, #B38738 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-style: italic;
      font-weight: 900;
      letter-spacing: 0.04em;
      filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.85));
    }

    .hok-rank-1-text {
      background: linear-gradient(180deg, #FFFFFF 0%, #FFF099 35%, #FFB800 70%, #B86B00 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-style: italic;
      font-weight: 900;
      filter: drop-shadow(0 2px 8px rgba(255, 184, 0, 0.6));
    }

    /* Beveled Octagonal & Angled Shapes */
    .hok-oct-btn {
      clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
      position: relative;
      transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .hok-oct-btn:active:not(:disabled) {
      transform: scale(0.95);
    }

    .hok-gold-btn {
      background: linear-gradient(180deg, #FFE6B0 0%, #D9A74A 48%, #9E6B18 100%);
      color: #231402;
      font-weight: 900;
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8), 0 4px 14px rgba(230, 193, 122, 0.35);
      border: 1px solid #FFF2CC;
    }

    .hok-dark-btn {
      background: linear-gradient(180deg, #1E325C 0%, #101C36 100%);
      color: #E6C17A;
      border: 1px solid rgba(230, 193, 122, 0.45);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }

    .hok-dark-btn.active {
      background: linear-gradient(180deg, #E6C17A 0%, #B38738 100%);
      color: #1A1002;
      font-weight: 900;
      border-color: #FFF3D1;
      box-shadow: 0 0 15px rgba(230, 193, 122, 0.5);
    }

    /* Metallic Gold Frame Card */
    .hok-card {
      background: linear-gradient(165deg, rgba(24, 41, 74, 0.92) 0%, rgba(12, 22, 43, 0.96) 100%);
      border: 1px solid rgba(230, 193, 122, 0.32);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 243, 209, 0.15);
      position: relative;
      border-radius: 6px;
    }

    .hok-card::before {
      content: '';
      position: absolute;
      top: -1px; left: 12px; right: 12px; height: 2px;
      background: linear-gradient(90deg, transparent, #E6C17A, transparent);
      opacity: 0.75;
      pointer-events: none;
    }

    /* Supreme Top 3 Team Cards */
    .hok-team-top1 {
      background: linear-gradient(135deg, rgba(74, 42, 10, 0.95) 0%, rgba(28, 18, 8, 0.98) 50%, rgba(62, 32, 8, 0.95) 100%);
      border: 2px solid #FFD700;
      box-shadow: 0 0 28px rgba(255, 215, 0, 0.35), inset 0 0 20px rgba(255, 215, 0, 0.18);
    }
    .hok-team-top2 {
      background: linear-gradient(135deg, rgba(30, 48, 82, 0.95) 0%, rgba(15, 25, 48, 0.98) 50%, rgba(38, 58, 96, 0.95) 100%);
      border: 1.5px solid #E2E8F0;
      box-shadow: 0 0 22px rgba(148, 163, 184, 0.3), inset 0 0 16px rgba(226, 232, 240, 0.15);
    }
    .hok-team-top3 {
      background: linear-gradient(135deg, rgba(64, 32, 18, 0.95) 0%, rgba(26, 15, 12, 0.98) 50%, rgba(56, 28, 15, 0.95) 100%);
      border: 1.5px solid #F59E0B;
      box-shadow: 0 0 22px rgba(245, 158, 11, 0.28), inset 0 0 16px rgba(245, 158, 11, 0.14);
    }

    /* Corner Filigree Accents */
    .corner-gold {
      position: relative;
    }
    .corner-gold::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      background:
        linear-gradient(135deg, #E6C17A 4px, transparent 4px) 0 0,
        linear-gradient(225deg, #E6C17A 4px, transparent 4px) 100% 0,
        linear-gradient(315deg, #E6C17A 4px, transparent 4px) 100% 100%,
        linear-gradient(45deg, #E6C17A 4px, transparent 4px) 0 100%;
      background-size: 10px 10px;
      background-repeat: no-repeat;
      opacity: 0.85;
    }

    /* Red vs Blue Confrontation Bar */
    .vs-red-bg {
      background: linear-gradient(90deg, rgba(255, 59, 78, 0.28) 0%, rgba(255, 59, 78, 0.04) 100%);
      border-left: 3px solid #FF3B4E;
    }
    .vs-blue-bg {
      background: linear-gradient(270deg, rgba(0, 168, 255, 0.28) 0%, rgba(0, 168, 255, 0.04) 100%);
      border-right: 3px solid #00A8FF;
    }

    /* Shimmering Gold Sweep Animation */
    @keyframes goldSweep {
      0% { transform: translateX(-120%) skewX(-25deg); }
      100% { transform: translateX(220%) skewX(-25deg); }
    }
    .shimmer-sweep {
      position: relative;
      overflow: hidden;
    }
    .shimmer-sweep::after {
      content: '';
      position: absolute;
      top: 0; left: 0; width: 45%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 245, 210, 0.38), transparent);
      animation: goldSweep 3.2s infinite ease-in-out;
      pointer-events: none;
    }

    /* Live Pulse Animation */
    @keyframes livePulse {
      0%, 100% { opacity: 1; box-shadow: 0 0 8px #FF3B4E; }
      50% { opacity: 0.45; box-shadow: 0 0 2px #FF3B4E; }
    }
    .live-dot {
      animation: livePulse 1.4s infinite;
    }

    /* Aura Float Animation */
    @keyframes floatSlow {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-3px); }
    }
    .float-badge {
      animation: floatSlow 2.6s ease-in-out infinite;
    }

    /* Custom Scrollbar */
    ::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }
    ::-webkit-scrollbar-track {
      background: #0B1324;
    }
    ::-webkit-scrollbar-thumb {
      background: #B38738;
      border-radius: 2px;
    }

    /* Bottom Navigation Bar */
    .bottom-nav {
      max-width: 460px;
      margin: 0 auto;
      background: linear-gradient(180deg, rgba(16, 28, 52, 0.96) 0%, rgba(8, 15, 29, 0.99) 100%);
      border-top: 1.5px solid #C89B48;
      box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.85);
    }

    .nav-tab {
      position: relative;
      transition: all 0.2s ease;
      color: #7E92B8;
    }
    .nav-tab.active {
      color: #FFE6B0;
      background: radial-gradient(circle at 50% 100%, rgba(230, 193, 122, 0.28) 0%, transparent 72%);
    }
    .nav-tab.active::before {
      content: '';
      position: absolute;
      top: -1.5px;
      left: 20%;
      right: 20%;
      height: 3px;
      background: linear-gradient(90deg, transparent, #FFF3D1, #E6C17A, transparent);
      box-shadow: 0 2px 8px #E6C17A;
    }