:root {
      /* Colors */
      --gold: #c9a84c;
      --gold-bright: #f0c858;
      --neon-cyan: #00f5ff;
      --neon-pink: #ff2d78;
      --neon-purple: #b44fff;

      --dark: #06060e;
      --dark-2: #0c0c1e;
      --dark-3: #10101f;

      --card-bg: rgba(255, 255, 255, 0.04);
      --border: rgba(201, 168, 76, 0.22);

      /* Typography */
      --font-heading: 'Orbitron', monospace;
      --font-body: 'Rajdhani', sans-serif;

      --transition-fast: 0.25s ease;
      --transition-normal: 0.4s ease;
    }

    ::-webkit-scrollbar {
      width: 2px;
    }
    ::-webkit-scrollbar-track {
      background: var(--dark);
    }
    ::-webkit-scrollbar-thumb {
      background: var(--neon-cyan);
    }

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

    html {
      scroll-behavior: smooth;
    }

    body {
      background: var(--dark);
      color: #e8e0cc;
      font-family: var(--font-body);
      overflow-x: hidden;
      position: relative;
    }

    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
      pointer-events: none;
      z-index: 0;
      opacity: 0.5;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 44px;
    }

    /* ================= NAV ================= */
    nav {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 200;
      padding: 15px 60px 20px 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      filter: drop-shadow(0px 0px 8px rgba(255, 46, 241, 0.6)) drop-shadow(0px 0px 2px #ff2ef1);
    }

    nav::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(rgba(20, 20, 25, 0.98), rgba(15, 16, 20, 0.98)), url('pattern.jpg');
      background-size: cover;
      background-position: center;
      z-index: -1;
      /* Центральная «ступенька» симметрична 50% — ссылки центрируются через .nav-links (absolute). */
      clip-path: polygon(
        0 0,
        100% 0,
        100% 100%,
        calc(100% - 300px) 100%,
        calc(100% - 320px) calc(100% - 15px),
        calc(50% + 150px) calc(100% - 15px),
        calc(50% + 130px) 100%,
        calc(50% - 130px) 100%,
        calc(50% - 150px) calc(100% - 15px),
        320px calc(100% - 15px),
        300px 100%,
        0 100%
      );
    }

    .nav-logo {
      display: flex;
      align-items: center;
      text-decoration: none;
      position: relative;
      z-index: 10;
      transform: translateY(3px);
      gap: 10px;
    }

    .nav-logo img {
      max-height: 24px;
      width: auto;
      border-radius: 4px;
    }

    .nav-logo-text {
      font-family: var(--font-heading);
      font-size: 1.4rem;
      font-weight: 900;
      color: #fff;
      letter-spacing: 2px;
    }

    .nav-links {
      display: flex;
      gap: 40px;
      position: absolute;
      left: 50%;
      z-index: 10;
      transform: translate(-50%, 3px);
    }

    .nav-links a {
      position: relative;
      display: inline-block;
      padding-bottom: 10px;
      font-size: 0.9rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.6);
      text-decoration: none;
      font-weight: 600;
      transition: all var(--transition-fast);
    }

    .nav-links a::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 3px;
      background: var(--neon-cyan);
      box-shadow: 0 0 8px var(--neon-cyan);
      border-radius: 2px;
      transform: scaleX(0);
      transform-origin: center;
      transition: transform var(--transition-fast);
    }

    .nav-links a.active::after {
      transform: scaleX(1);
    }

    .nav-links a:hover {
      color: #fff;
      text-shadow: 0 0 8px var(--neon-pink), 0 0 15px var(--neon-cyan);
    }

    /* ================= BUTTONS ================= */
    .btn-primary {
      padding: 14px 32px;
      background: rgba(201, 168, 76, 0.1);
      color: var(--gold-bright);
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 0.95rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      border: 1px solid var(--gold-bright);
      cursor: pointer;
      text-decoration: none;
      clip-path: polygon(15px 0%, 100% 0%, calc(100% - 15px) 100%, 0% 100%);
      transition: transform var(--transition-fast), box-shadow var(--transition-fast);
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .btn-primary:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 30px rgba(201, 168, 76, 0.4);
    }

    .btn-primary.cyan-variant {
      background: rgba(0, 245, 255, 0.1);
      color: var(--neon-cyan);
      border-color: var(--neon-cyan);
    }

    .btn-primary.cyan-variant:hover {
      box-shadow: 0 10px 30px rgba(0, 245, 255, 0.4);
    }

    .nav-play-btn {
      background: var(--neon-pink);
      color: #fff !important;
      font-family: var(--font-body);
      font-weight: 800;
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 2px;
      text-decoration: none;
      padding: 10px 24px;
      border-radius: 4px;
      box-shadow: 0 0 15px var(--neon-pink);
      transform: skewX(-20deg) translateY(3px);
      display: inline-block;
      transition: all 0.3s ease;
      position: relative;
      z-index: 10;
    }

    .nav-play-btn:hover {
      background: #fff;
      color: var(--neon-pink) !important;
      box-shadow: 0 0 25px var(--neon-pink);
    }

    .nav-play-btn span {
      display: block;
      transform: skewX(20deg);
      /* Counter skew for text */
    }

    .btn-ghost {
      padding: 14px 40px;
      background: transparent;
      color: #fff;
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 0.95rem;
      letter-spacing: 3px;
      text-transform: uppercase;
      border: 1px solid rgba(255, 255, 255, 0.2);
      cursor: pointer;
      text-decoration: none;
      clip-path: polygon(15px 0%, 100% 0%, calc(100% - 15px) 100%, 0% 100%);
      transition: border-color var(--transition-fast), color var(--transition-fast);
      display: inline-flex;
      align-items: center;
    }

    .btn-ghost:hover {
      border-color: var(--neon-cyan);
      color: var(--neon-cyan);
      box-shadow: inset 0 0 15px rgba(0, 245, 255, 0.2);
    }

    /* ================= HERO SECTION ================= */
    .hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      z-index: 1;
    }

    .hero-bg-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: -2;
      opacity: 0.8;
    }

    .hero-gradient-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, rgba(6, 6, 14, 0.3) 0%, rgba(6, 6, 14, 0.95) 100%);
      z-index: -1;
      pointer-events: none;
    }

    .hero-gradient-bg {
      position: absolute;
      inset: 0;
      z-index: -1;
      background: radial-gradient(circle at 50% 100%, rgba(201, 168, 76, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 100% 20%, rgba(0, 245, 255, 0.1) 0%, transparent 40%);
    }

    .hero-grid-floor {
      position: absolute;
      inset: 0;
      z-index: 1;
      background-image: linear-gradient(rgba(201, 168, 76, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 168, 76, 0.1) 1px, transparent 1px);
      background-size: 60px 60px;
      transform: perspective(600px) rotateX(45deg) translateY(40%) scale(2.5);
      transform-origin: center bottom;
      animation: gridMove 8s linear infinite;
    }

    @keyframes gridMove {
      from {
        background-position: 0 0;
      }

      to {
        background-position: 0 60px;
      }
    }

    .orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(100px);
      pointer-events: none;
      animation: orbFloat 10s ease-in-out infinite alternate;
      opacity: 0.5;
    }

    .orb-gold {
      width: 450px;
      height: 450px;
      background: var(--gold);
      top: 10%;
      right: -100px;
      animation-delay: -3s;
    }

    .orb-cyan {
      width: 350px;
      height: 350px;
      background: var(--neon-cyan);
      bottom: 10%;
      left: 10%;
      animation-delay: -6s;
    }

    @keyframes orbFloat {
      0% {
        transform: translateY(0) scale(1);
      }

      100% {
        transform: translateY(-40px) scale(1.1);
      }
    }

    .hero-content {
      position: relative;
      z-index: 3;
      text-align: center;
      max-width: 900px;
      padding: 0 24px;
    }

    .hero-eyebrow {
      font-size: 0.9rem;
      letter-spacing: 6px;
      text-transform: uppercase;
      color: var(--neon-cyan);
      margin-bottom: 24px;
      font-weight: 700;
      animation: fadeUp 1s ease both;
    }

    .hero-title {
      font-family: var(--font-heading);
      font-size: clamp(3rem, 7vw, 6rem);
      font-weight: 900;
      line-height: 0.95;
      margin-bottom: 28px;
      animation: fadeUp 1s ease 0.15s both;
    }

    .hero-title .t1 {
      color: #fff;
      display: block;
    }

    @keyframes neonFlicker {
      0% {
        text-shadow: 0 0 15px rgba(0, 245, 255, 0.5);
        opacity: 1;
      }

      90% {
        text-shadow: 0 0 15px rgba(0, 245, 255, 0.5);
        opacity: 1;
      }

      92% {
        text-shadow: none;
        opacity: 0.6;
      }

      94% {
        text-shadow: 0 0 20px rgba(0, 245, 255, 0.8), 0 0 40px rgba(0, 245, 255, 0.4);
        opacity: 1;
      }

      96% {
        text-shadow: none;
        opacity: 0.8;
      }

      98% {
        text-shadow: 0 0 15px rgba(0, 245, 255, 0.5);
        opacity: 1;
      }

      100% {
        text-shadow: 0 0 25px rgba(0, 245, 255, 0.8);
        opacity: 1;
      }
    }

    .hero-title .t2 {
      display: block;
      color: transparent;
      -webkit-text-stroke: 1px var(--neon-cyan);
      text-shadow: 0 0 15px rgba(0, 245, 255, 0.5);
      animation: neonFlicker 4s infinite alternate;
    }

    .hero-sub {
      font-size: 1.4rem;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.7);
      margin-bottom: 50px;
      font-weight: 300;
      animation: fadeUp 1s ease 0.3s both;
    }

    .hero-sub span {
      color: var(--neon-pink);
      font-weight: 700;
    }

    .hero-btns {
      display: flex;
      gap: 24px;
      justify-content: center;
      flex-wrap: wrap;
      animation: fadeUp 1s ease 0.45s both;
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ================= PROBLEMS SECTION (Based on presentation) ================= */
    .problems {
      padding: 120px 0;
      background: var(--dark-2);
      position: relative;
      z-index: 2;
      border-top: 1px solid rgba(201, 168, 76, 0.1);
    }

    .section-header {
      text-align: center;
      margin-bottom: 30px;
    }

    .section-tag {
      font-size: 0.75rem;
      letter-spacing: 5px;
      text-transform: uppercase;
      color: var(--neon-cyan);
      font-weight: 600;
      display: block;
    }

    .section-title {
      font-family: var(--font-heading);
      font-size: clamp(2rem, 4vw, 3.2rem);
      font-weight: 700;
      color: #fff;
      line-height: 1.2;
    }

    .section-title em {
      font-style: normal;
      color: var(--gold);
    }

    .problems-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
    }

    .problem-card {
      background: var(--card-bg);
      padding: 40px 30px;
      border: 1px solid var(--border);
      position: relative;
      overflow: hidden;
      transition: all var(--transition-normal);
    }

    .problem-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, transparent, var(--neon-pink), transparent);
      opacity: 0;
      transition: opacity var(--transition-normal);
    }

    .problem-card:hover {
      background: rgba(255, 45, 120, 0.05);
      transform: translateY(-5px);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }

    .problem-card:hover::before {
      opacity: 1;
    }

    .problem-icon {
      font-size: 2.5rem;
      color: var(--neon-pink);
      margin-bottom: 20px;
      display: block;
    }

    .problem-card h3 {
      font-family: var(--font-heading);
      font-size: 1.2rem;
      font-weight: 700;
      color: #fff;
      margin-bottom: 12px;
      letter-spacing: 1.5px;
    }

    .problem-card p {
      font-size: 1rem;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.6);
    }


    /* ================= AVATARS & VIDEOS SECTION ================= */
    .avatars {
      padding: 0px 0px 60px 0px;
      background: var(--dark-3);
      position: relative;
      z-index: 2;
      border-top: 1px solid var(--border);
    }

    .roster-container {
      display: flex;
      flex-direction: column;
      gap: 40px;
    }

    .avatar-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
      gap: 30px;
    }

    .avatar-card {
      background: var(--dark-2);
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
      position: relative;
      transition: all var(--transition-normal);
    }

    .avatar-card:hover {
      border-color: var(--neon-cyan);
      box-shadow: 0 0 30px rgba(0, 245, 255, 0.2);
      transform: translateY(-5px);
    }

    .avatar-card.waifu:hover {
      border-color: var(--neon-pink);
      box-shadow: 0 0 30px rgba(255, 45, 120, 0.2);
    }

    .avatar-card.jp:hover {
      border-color: var(--neon-purple);
      box-shadow: 0 0 30px rgba(180, 79, 255, 0.2);
    }

    .video-wrapper {
      position: relative;
      width: 100%;
      aspect-ratio: 3/4;
      background: #000;
      overflow: hidden;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .video-wrapper video {
      width: 100%;
      height: 100%;
      object-fit: contain;
      transition: transform var(--transition-normal);
    }

    .avatar-card.waifu .video-wrapper video {
      object-fit: cover;
    }

    .avatar-card:hover .video-wrapper video {
      transform: scale(1.05);
    }

    .avatar-info {
      padding: 25px;
    }

    .avatar-tag {
      font-size: 0.7rem;
      letter-spacing: 3px;
      text-transform: uppercase;
      font-weight: 700;
      margin-bottom: 10px;
      display: inline-block;
      padding: 4px 10px;
      border-radius: 4px;
    }

    .tag-base {
      background: rgba(0, 245, 255, 0.1);
      color: var(--neon-cyan);
    }

    .tag-fan {
      background: rgba(255, 45, 120, 0.1);
      color: var(--neon-pink);
    }

    .tag-special {
      background: rgba(180, 79, 255, 0.1);
      color: var(--neon-purple);
    }

    .avatar-name {
      font-family: var(--font-heading);
      font-size: 1.5rem;
      font-weight: 700;
      color: #fff;
      margin-bottom: 15px;
    }

    .avatar-desc {
      font-size: 0.95rem;
      color: rgba(255, 255, 255, 0.6);
      line-height: 1.5;
    }


    /* ================= INTERACTION SECTION ================= */
    .interaction {
      padding: 0px 0px 60px 0px;
      background: var(--dark);
      border-top: 1px solid rgba(0, 245, 255, 0.1);
    }

    /* ================= ROADMAP SECTION ================= */
    .roadmap {
      padding: 0px 0px 60px 0px;
      background: var(--dark-2);
      border-top: 1px solid var(--border);
    }

    .timeline {
      display: flex;
      flex-direction: column;
      gap: 30px;
      position: relative;
    }

    .timeline::before {
      content: '';
      position: absolute;
      left: 22px;
      top: 0;
      bottom: 0;
      width: 2px;
      background: linear-gradient(to bottom, var(--neon-cyan), var(--neon-purple));
    }

    .milestone {
      position: relative;
      padding-left: 60px;
    }

    .milestone::before {
      content: '';
      position: absolute;
      left: 14px;
      top: 5px;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--dark);
      border: 2px solid var(--neon-cyan);
      box-shadow: 0 0 10px var(--neon-cyan);
      z-index: 2;
    }

    .milestone.active::before {
      background: var(--gold-bright);
      border-color: var(--gold-bright);
      box-shadow: 0 0 15px var(--gold-bright);
    }

    .milestone-tag {
      font-family: var(--font-heading);
      font-size: 1rem;
      color: var(--gold-bright);
      letter-spacing: 2px;
      margin-bottom: 8px;
    }

    .milestone h3 {
      font-size: 1.4rem;
      color: #fff;
      margin-bottom: 10px;
    }

    .milestone p {
      color: rgba(255, 255, 255, 0.6);
      line-height: 1.6;
    }

    /* ================= CTA SECTION ================= */
    .cta-section {
      padding: 60px 0;
      text-align: center;
      background: linear-gradient(to bottom, var(--dark-3), var(--dark));
      position: relative;
      overflow: hidden;
      border-top: 1px solid rgba(255, 45, 120, 0.15);
    }

    .cta-grid-bg {
      position: absolute;
      inset: 0;
      background-image: linear-gradient(rgba(201, 168, 76, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 168, 76, 0.05) 1px, transparent 1px);
      background-size: 40px 40px;
      opacity: 0.5;
    }

    .cta-inner {
      position: relative;
      z-index: 2;
    }

    .cta-section h2 {
      font-family: var(--font-heading);
      font-size: clamp(2.5rem, 6vw, 4.5rem);
      font-weight: 900;
      color: #fff;
      margin-bottom: 24px;
    }

    .cta-section h2 em {
      font-style: normal;
      background: linear-gradient(130deg, var(--gold), var(--gold-bright));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .cta-section .btn-primary {
      margin-bottom: 50px;
    }

    /* ================= FOOTER ================= */
    footer {
      padding: 40px 60px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      background: var(--dark-3);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 20px;
    }

    .footer-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
    }

    .footer-logo img {
      max-height: 24px;
      border-radius: 4px;
      filter: grayscale(100%) opacity(50%);
      transition: all var(--transition-fast);
    }

    .footer-logo-text {
      font-family: var(--font-heading);
      font-size: 1.1rem;
      font-weight: 900;
      color: rgba(255, 255, 255, 0.5);
      letter-spacing: 2px;
      transition: all var(--transition-fast);
    }

    .footer-logo:hover img {
      filter: grayscale(0%) opacity(100%);
    }

    .footer-logo:hover .footer-logo-text {
      color: #fff;
      text-shadow: 0 0 10px var(--neon-cyan);
    }

    footer p {
      font-size: 0.8rem;
      color: rgba(255, 255, 255, 0.4);
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    /* ================= UTILITIES ================= */
    .reveal {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ================= RESPONSIVE ================= */
    @media (max-width: 900px) {
      nav {
        padding: 16px 24px;
      }

      .nav-links {
        display: none;
      }

      .container {
        padding: 0 24px;
      }

      footer {
        padding: 30px 24px;
        flex-direction: column;
        text-align: center;
        justify-content: center;
      }
    }

    :root {
      --cyber-bg: #030712;
      --cyber-panel: #080f1e;
      --cyber-card: #0a1628;
      --cyber-border: rgba(0, 240, 255, 0.2);
      --cyber-cyan: var(--neon-cyan);
      --cyber-cyan-dim: rgba(0, 240, 255, 0.6);
      --cyber-purple: var(--neon-purple);
      --cyber-purple-dim: rgba(191, 0, 255, 0.5);
      --cyber-pink: var(--neon-pink);
      --cyber-gold: var(--gold-bright);
      --cyber-green: #00ff88;
      --cyber-green-dim: rgba(0, 255, 136, 0.4);
      --cyber-red: #ff3b3b;
      --neon-glow-cyan: 0 0 10px var(--neon-cyan), 0 0 20px rgba(0, 240, 255, 0.4), 0 0 40px rgba(0, 240, 255, 0.15);
      --neon-glow-purple: 0 0 10px var(--neon-purple), 0 0 20px rgba(191, 0, 255, 0.4);
      --neon-glow-green: 0 0 10px #00ff88, 0 0 20px rgba(0, 255, 136, 0.4);
      --font-display: 'Orbitron', monospace;
      --font-body: 'Rajdhani', sans-serif;
      --font-mono: 'Share Tech Mono', monospace;
    }

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

    body {
      background: var(--dark);
      color: #e0e8ff;
      font-family: var(--font-body);
      overflow-x: hidden;
    }

    /* ─── SECTION WRAPPER ─── */
    .poker-section {
      min-height: 100vh;
      background: var(--dark);
      position: relative;
      overflow: hidden;
    }

    /* Grid background */
    .poker-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(0, 240, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 240, 255, 0.04) 1px, transparent 1px);
      background-size: 40px 40px;
      pointer-events: none;
    }

    /* Scanlines overlay */
    .poker-section::after {
      content: '';
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(0deg,
          transparent,
          transparent 2px,
          rgba(0, 0, 0, 0.08) 2px,
          rgba(0, 0, 0, 0.08) 4px);
      pointer-events: none;
      z-index: 1;
    }

    /* ─── SECTION HEADER ─── */
    .section-header {
      position: relative;
      z-index: 10;
      padding: 60px 60px 40px;
      display: flex;
      align-items: center;
      gap: 24px;
    }

    .section-eyebrow {
      font-family: var(--font-mono);
      font-size: 14px;
      color: var(--neon-cyan);
      letter-spacing: 4px;
      text-transform: uppercase;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .section-eyebrow::before {
      content: '';
      width: 24px;
      height: 1px;
      background: var(--neon-cyan);
      box-shadow: var(--neon-glow-cyan);
    }

    .section-title {
      font-family: var(--font-display);
      font-size: clamp(28px, 4vw, 48px);
      font-weight: 900;
      line-height: 1;
      letter-spacing: -1px;
      color: #fff;
    }

    .section-title span {
      color: var(--neon-cyan);
      /* text-shadow: var(--neon-glow-cyan); */
    }

    .section-badge {
      display: inline-flex;
      align-items: center;
      gap: clamp(8px, 1vw, 14px);
      padding: clamp(8px, 1.1vw, 12px) clamp(14px, 2vw, 22px);
      margin-left: auto;
      background: linear-gradient(180deg, #1a1016 0%, #120a10 42%, #140c11 100%);
      border: none;
      border-top: 1px solid #ff2d55;
      border-bottom: 1px solid #ff2d55;
      border-radius: 0;
      box-shadow: inset 0 0 24px rgba(255, 45, 85, 0.06);
      white-space: nowrap;
    }

    .section-badge__dot {
      flex-shrink: 0;
      width: clamp(6px, 0.55vw, 9px);
      height: clamp(6px, 0.55vw, 9px);
      border-radius: 50%;
      background: #ff2d55;
      box-shadow:
        0 0 0 1px rgba(255, 45, 85, 0.35),
        0 0 12px rgba(255, 45, 85, 0.65);
    }

    .section-badge__text {
      font-family: var(--font-mono), ui-monospace, monospace;
      font-size: clamp(9px, 0.72vw, 16px);
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #ff2d55;
      line-height: 1.2;
    }

    /* ─── MAIN LAYOUT ─── */
    /* Секция выбора предметов (отдельно от стола) */
    .poker-skills-section {
      position: relative;
      z-index: 10;
      padding: 48px 60px 56px;
      background: var(--dark);
    }

    /* До выбора предмета игровая комната со столом скрыта; после старта — скрыт shop */
    body:not(.poker-game-started) .poker-section {
      display: none;
    }

    body.poker-game-started .poker-skills-section {
      display: none;
    }

    .poker-skills-section__inner {
      position: relative;
      z-index: 0;
      max-width: 1280px;
      margin: 0 auto;
      width: 100%;
    }

    .poker-skills-section--overlay-active .poker-skills-section__inner {
      pointer-events: none;
      user-select: none;
    }

    .poker-skills-section > .shop-block-overlay {
      position: absolute;
      inset: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: auto;
    }

    /* ─── ITEM SHOP (как в макете: шапка, тулбар, сетка + превью слева) ─── */
    .item-shop-header {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 20px 40px;
      margin: 0 -60px 4px;
      padding: 26px 60px 20px;
      background: #050505;
      box-sizing: border-box;
    }

    .item-shop-header__brand {
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-width: 0;
    }

    .item-shop-header__aside {
      display: flex;
      align-items: center;
      flex: 0 1 auto;
      min-width: 0;
    }

    .item-shop-eyebrow {
      font-family: var(--font-body);
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0.22em;
      color: #00d1ff;
      text-transform: uppercase;
    }

    .item-shop-title {
      margin: 0;
      font-family: var(--font-display);
      font-size: 48px;
      font-weight: 900;
      letter-spacing: 0.04em;
      line-height: 1;
      color: var(--gold);
    }

    .item-shop-intro {
      margin: 0;
      max-width: 380px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 4px;
      font-family: var(--font-body);
      font-size: 20px;
      font-weight: 500;
      line-height: 24px;
      color: rgba(255, 255, 255, 0.88);
      text-align: right;
    }

    .item-shop-intro__line {
      display: block;
    }

    .item-shop-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      justify-content: space-between;
      gap: 16px 20px;
      padding: 0;
      margin-bottom: 14px;
      background: transparent;
      border: none;
      box-shadow: none;
    }

    .item-shop-start-alert {
      display: block;
      margin: 18px 0 22px;
      padding: 12px 16px;
      border-radius: 8px;
      border: 1px solid rgba(255, 82, 82, 0.55);
      background: linear-gradient(165deg, rgba(48, 12, 18, 0.97), rgba(18, 6, 10, 0.98));
      color: #ffc9c9;
      font-family: var(--font-body);
      font-size: 0.95rem;
      font-weight: 600;
      line-height: 1.45;
      letter-spacing: 0.02em;
      box-shadow:
        0 0 24px rgba(255, 60, 60, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    .item-shop-start-alert[hidden] {
      display: none !important;
    }

    .item-shop-start-alert.item-shop-start-alert--visible {
      animation: shopAlertIn 0.25s ease-out;
    }

    @keyframes shopAlertIn {
      from {
        opacity: 0;
        transform: translateY(-6px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .item-shop-toolbar-panel {
      border-top: 2px solid rgba(0, 255, 255, 0.72);
      border-bottom: 2px solid rgba(0, 255, 255, 0.72);
      background: rgba(2, 6, 12, 0.94);
      padding: 12px 16px;
      border-radius: 2px;
      box-sizing: border-box;
      height: 48px;
    }

    .item-shop-balance {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex: 1 1 200px;
      max-width: 300px;
      min-width: 0;
      border-color: rgb(235, 12, 205);
      background: #d30dc21a;
    }

    .item-shop-balance__label {
      font-family: var(--font-body);
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0.14em;
      color: #e607ee;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .item-shop-balance__value {
      display: inline-flex;
      align-items: baseline;
      gap: 8px;
      font-family: var(--font-display);
      font-size: 24px;
      line-height: 24px;
      font-weight: 700;
    }

    .item-shop-currency {
      margin-right: 0;
      color: #29ec0f;
      text-shadow:
        0 0 8px rgba(49, 214, 8, 0.85),
        0 0 16px rgba(25, 212, 19, 0.45);
    }

    .item-shop-balance__amount {
      color: #ffffff;
      text-shadow: none;
    }

    .item-shop-balance__value .hud-val {
      color: #ffffff;
      font-weight: 700;
    }

    .item-shop-energy-hud {
      display: flex;
      align-items: center;
      margin-left: 100px;
      flex: 1 1 220px;
      max-width: 220px;
      min-width: 0;
      padding: 0 16px;
      justify-content: space-between;
      flex-wrap: wrap;
      background: #2FEAFF1A;
    }

    .item-shop-energy-hud__label {
      font-family: var(--font-body);
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0.16em;
      color: #5cf4ff;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .item-shop-energy-track {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 3px;
      flex-shrink: 1;
      padding: 4px 6px;
      border: none;
      border-radius: 2px;
    }

    .item-shop-energy-track.error {
      animation: shake 0.3s;
      outline: 2px solid rgba(255, 59, 59, 0.85);
      outline-offset: 2px;
      border-radius: 4px;
    }

    .item-shop-energy-seg {
      height: 24px;
      width: 12px;
      min-height: 12px;
      border-radius: 2px;
      box-sizing: border-box;
      border: 1px solid rgba(0, 245, 255, 0.38);
      background: rgba(8, 18, 28, 0.75);
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.25);
      transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .item-shop-energy-seg.item-shop-energy-seg--on {
      border-color: rgba(110, 251, 245, 0.65);
      background: linear-gradient(180deg, #6efbf5, #1ab9c2);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    .item-shop-energy-hud__text {
      font-family: var(--font-mono);
      font-size: 0.85rem;
      color: rgba(255, 255, 255, 0.75);
      white-space: nowrap;
    }

    .item-shop-energy-cap {
      color: rgba(255, 255, 255, 0.42);
      font-weight: 500;
    }

    .item-shop-start-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 1 240px;
      min-width: min(100%, 250px);
    }

    .item-shop-start-btn {
      display: block;
      width: 100%;
      margin: 0;
      padding: 0;
      cursor: pointer;
      border: none;
      background: transparent;
      font: inherit;
      transition: filter 0.15s ease;
    }

    .item-shop-start-btn__inner {
      display: flex;
      align-items: stretch;
      justify-content: space-between;
      min-height: 44px;
      transform: skewX(-11deg);
      background: linear-gradient(95deg, #1cf0ff 0%, #7a00ff 52%, #c400ff 100%);
      box-shadow:
        0 0 18px rgba(0, 240, 255, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
      transition:
        box-shadow 0.15s ease,
        filter 0.15s ease;
    }

    .item-shop-start-btn__stripes {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 8px;
      flex-shrink: 0;
    }

    .item-shop-start-btn__stripes span {
      display: block;
      width: 6px;
      height: 100%;
      background: #070707;
      box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.9);
    }

    .item-shop-start-btn__label {
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: 18px;
      font-weight: 800;
      font-style: italic;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #fff;
      transform: skewX(11deg);
      text-shadow: 0 0 3px #FFE8F2, 0 0 16px #C392FF;
      white-space: nowrap;
    }

    .item-shop-start-btn:hover .item-shop-start-btn__inner,
    .item-shop-start-btn:focus-visible .item-shop-start-btn__inner {
      filter: brightness(1.08);
      box-shadow:
        0 0 26px rgba(0, 240, 255, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    }

    .item-shop-start-btn:focus-visible {
      outline: 2px solid rgba(0, 255, 255, 0.65);
      outline-offset: 3px;
    }

    .item-shop-start-btn.item-shop-start-btn--needs-selection .item-shop-start-btn__inner {
      filter: grayscale(0.35) brightness(0.78);
      opacity: 0.88;
      box-shadow:
        0 0 12px rgba(0, 240, 255, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    }

    .item-shop-start-btn.item-shop-start-btn--needs-selection:hover .item-shop-start-btn__inner,
    .item-shop-start-btn.item-shop-start-btn--needs-selection:focus-visible .item-shop-start-btn__inner {
      filter: grayscale(0.22) brightness(0.88);
    }

    .item-shop-start-btn.error {
      animation: shake 0.35s;
    }

    .item-shop-start-btn.error .item-shop-start-btn__inner {
      box-shadow:
        0 0 0 2px rgba(255, 59, 59, 0.95),
        0 0 18px rgba(255, 59, 59, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }

    .poker-skills-section .skills-pick--grid-3x3 {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .poker-skills-section .shop-layout.shop-layout--skills-grid {
      flex-direction: row;
      align-items: stretch;
      gap: 22px;
      margin-top: 4px;
      padding-bottom: 8px;
    }

    .poker-skills-section .skills-modal__shop-host .shop-side-avatar {
      flex: 0 0 min(500px, 28vw);
      position: relative;
      top: auto;
      align-self: stretch;
      order: -1;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid rgba(255, 45, 120, 0.35);
      box-shadow: 0 0 32px rgba(255, 45, 120, 0.15);
    }

    .poker-skills-section .skills-modal__shop-host .shop-side-avatar video {
      width: 100%;
      height: 100%;
      min-height: min(720px);
      object-fit: cover;
      display: block;
    }

    .poker-skills-section .shop-catalog--skills-pick {
      flex: 1;
      min-width: 0;
    }

    @media (max-width: 1100px) {
      .item-shop-intro {
        text-align: left;
        max-width: none;
        align-items: flex-start;
      }

      .item-shop-toolbar {
        flex-direction: column;
        align-items: stretch;
      }

      .item-shop-balance {
        max-width: none;
      }

      .item-shop-energy-hud {
        margin-left: 0;
        justify-content: flex-start;
        width: 100%;
      }

      .item-shop-start-wrap {
        flex: 1 1 auto;
        width: 100%;
        max-width: none;
        margin: 0;
      }

      .item-shop-start-btn {
        width: 100%;
      }

      .poker-skills-section .shop-layout.shop-layout--skills-grid {
        flex-direction: column;
      }

      .poker-skills-section .skills-modal__shop-host .shop-side-avatar {
        flex: 0 0 auto;
        max-width: 420px;
        margin: 0 auto;
        width: 100%;
      }

      .poker-skills-section .skills-modal__shop-host .shop-side-avatar video {
        min-height: min(380px, 45vh);
      }

      .poker-skills-section .skills-pick--grid-3x3 {
        grid-template-columns: 1fr;
      }
    }

    .poker-room-layout {
      position: relative;
      z-index: 10;
      display: flex;
      gap: 0;
      padding: 0 clamp(16px, 4vw, 60px) clamp(28px, 4vw, 60px);
      align-items: stretch;
      height: min(900px, 95vw);
      min-height: min(900px, 95vw);
    }

    .poker-skills-dock {
      display: flex;
      flex-direction: column;
      min-height: 0;
      border-radius: 16px;
      overflow: hidden;
    }

    .poker-skills-dock__head {
      flex-shrink: 0;
      padding: 10px 14px 8px;
      border-bottom: 1px solid rgba(0, 240, 255, 0.12);
    }

    .poker-skills-dock__title {
      margin: 0;
      color: #fff;
      font-family: var(--font-display);
      letter-spacing: 1px;
      font-size: clamp(0.95rem, 1.4vw, 1.25rem);
    }

    .poker-skills-dock__scroll {
      flex: 1;
      min-height: 0;
      max-height: none;
      overflow: visible;
      padding: 16px 18px 20px;
      -webkit-overflow-scrolling: touch;
    }

    /* Карточки скилов: cyber / неон (фон превью — текущие Chips.jpg / video) */
    .poker-skills-section .shop-catalog--skills-pick .shop-card {
      --cc-purple: #9d32ff;
      --cc-neon-green: #00ff9d;
      --skills-card-face-scale: 0.986;
      position: relative;
      box-sizing: border-box;
      min-width: 0;
      max-width: none;
      width: 100%;
      padding: 10px 14px 10px;
      overflow: visible;
      border: none;
      border-radius: 0;
      isolation: isolate;
      background: transparent;
      clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
      box-shadow: none;
      gap: 10px;
    }

    .poker-skills-section .shop-catalog--skills-pick .shop-card::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      clip-path: inherit;
      background: linear-gradient(145deg, rgb(200 130 255), rgb(130 55 210));
      pointer-events: none;
    }

    .poker-skills-section .shop-catalog--skills-pick .shop-card::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 1;
      clip-path: inherit;
      background-image: linear-gradient(155deg, rgba(8, 15, 30, 0.97), rgba(18, 10, 46, 0.94));
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      box-shadow: none;
      transform: scale(var(--skills-card-face-scale));
      transform-origin: center center;
      pointer-events: none;
    }

    .poker-skills-section .shop-catalog--skills-pick .shop-card > * {
      position: relative;
      z-index: 2;
    }

    /* Недоступно по энергии: затемнение снизу, lock.svg сверху — иконка не смешивается с градиентом */
    .poker-skills-section .shop-catalog--skills-pick .shop-card > .shop-card-lock-overlay {
      display: none;
      position: absolute;
      inset: 0;
      z-index: 12;
      pointer-events: none;
      clip-path: inherit;
      box-sizing: border-box;
      background-image:
        url('lock.svg'),
        linear-gradient(155deg, rgba(6, 10, 22, 0.72), rgba(12, 8, 28, 0.68));
      background-position: center, center;
      background-size: 100%, 100% 100%;
      background-repeat: no-repeat, no-repeat;
    }

    .poker-skills-section .shop-catalog--skills-pick .shop-card.shop-card--energy-locked > .shop-card-lock-overlay {
      display: block;
    }

    .poker-skills-section .shop-catalog--skills-pick .shop-card:hover {
      transform: translateY(-3px);
      /* box-shadow:
        0 0 0 1px rgba(180, 79, 255, 0.85),
        0 0 26px rgba(157, 50, 255, 0.45),
        inset 0 0 36px rgba(157, 50, 255, 0.08); */
    }

    /* Пульсирующее неоновое свечение выбранной карточки */
    @keyframes skills-shop-card-neon-pulse {
      0%,
      100% {
        box-shadow:
          inset 0 0 0 2px rgba(120, 255, 245, 0.52),
          inset 0 0 28px rgba(0, 255, 230, 0.2),
          inset 0 0 68px rgba(0, 140, 160, 0.24),
          inset 0 -18px 40px rgba(0, 0, 0, 0.35);
        filter:
          drop-shadow(0 12px 28px rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 20px rgba(0, 235, 215, 0.48))
          drop-shadow(0 0 44px rgba(0, 170, 195, 0.38));
      }

      50% {
        box-shadow:
          inset 0 0 0 2px rgba(185, 255, 250, 0.95),
          inset 0 0 46px rgba(0, 255, 245, 0.4),
          inset 0 0 92px rgba(0, 210, 225, 0.4),
          inset 0 -18px 40px rgba(0, 0, 0, 0.3);
        filter:
          drop-shadow(0 12px 28px rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 38px rgba(0, 255, 245, 0.95))
          drop-shadow(0 0 68px rgba(0, 230, 255, 0.68))
          drop-shadow(0 0 100px rgba(130, 255, 250, 0.3));
      }
    }

    @keyframes skills-shop-card-neon-rim {
      0%,
      100% {
        filter: brightness(1) saturate(1);
      }

      50% {
        filter: brightness(1.14) saturate(1.18);
      }
    }

    @keyframes skills-shop-card-neon-inner {
      0%,
      100% {
        box-shadow:
          inset 0 0 48px rgba(0, 255, 220, 0.16),
          inset 0 0 100px rgba(0, 60, 90, 0.3),
          inset 0 6px 28px rgba(0, 0, 0, 0.45);
      }

      50% {
        box-shadow:
          inset 0 0 68px rgba(0, 255, 235, 0.34),
          inset 0 0 124px rgba(0, 100, 130, 0.4),
          inset 0 6px 28px rgba(0, 0, 0, 0.4);
      }
    }

    @keyframes skills-shop-item-neon-glow {
      0%,
      100% {
        opacity: 0.9;
        filter: blur(12px) brightness(1);
      }

      50% {
        opacity: 1;
        filter: blur(11px) brightness(1.22);
      }
    }

    /* Внешний box-shadow обрезается clip-path у карточки — свечение снаружи через drop-shadow */
    .poker-skills-section .shop-catalog--skills-pick .shop-card.selected {
      --skills-shop-neon-dur: 2.35s;
      z-index: 2;
      box-shadow:
        inset 0 0 0 2px rgba(120, 255, 245, 0.55),
        inset 0 0 32px rgba(0, 255, 230, 0.22),
        inset 0 0 72px rgba(0, 140, 160, 0.28),
        inset 0 -18px 40px rgba(0, 0, 0, 0.35);
      filter:
        drop-shadow(0 12px 28px rgba(0, 0, 0, 0.55))
        drop-shadow(0 0 22px rgba(0, 235, 215, 0.55))
        drop-shadow(0 0 48px rgba(0, 170, 195, 0.42));
      animation: skills-shop-card-neon-pulse var(--skills-shop-neon-dur) ease-in-out infinite;
    }

    .poker-skills-section .shop-catalog--skills-pick .shop-card.selected::before {
      background: linear-gradient(145deg, rgb(160 255 255), rgb(0 175 190));
      animation: skills-shop-card-neon-rim var(--skills-shop-neon-dur) ease-in-out infinite;
    }

    .poker-skills-section .shop-catalog--skills-pick .shop-card.selected::after {
      background-image: linear-gradient(155deg, rgba(8, 15, 30, 0.97), rgba(18, 10, 46, 0.94));
      background-size: 111%;
      background-position: center;
      background-repeat: no-repeat;
      box-shadow:
        inset 0 0 48px rgba(0, 255, 220, 0.18),
        inset 0 0 100px rgba(0, 60, 90, 0.32),
        inset 0 6px 28px rgba(0, 0, 0, 0.45);
      animation: skills-shop-card-neon-inner var(--skills-shop-neon-dur) ease-in-out infinite;
    }

    @media (prefers-reduced-motion: reduce) {
      .poker-skills-section .shop-catalog--skills-pick .shop-card.selected,
      .poker-skills-section .shop-catalog--skills-pick .shop-card.selected::before,
      .poker-skills-section .shop-catalog--skills-pick .shop-card.selected::after,
      .poker-skills-section .shop-catalog--skills-pick .shop-card.selected .shop-item-wrapper::before {
        animation: none;
      }
    }

    .poker-skills-section .shop-catalog--skills-pick .shop-card__spec {
      --spec-chamfer: 6px;
      --spec-border: 2px;
      --spec-inner-cut: calc(var(--spec-chamfer) - var(--spec-border));
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      isolation: isolate;
      min-height: 22px;
      padding: 4px 10px;
      border: none;
      border-radius: 0;
      font-size: 0 !important;
      line-height: 0 !important;
      letter-spacing: 0.1em;
      font-family: var(--font-display);
      font-weight: 700;
      clip-path: polygon(
        var(--spec-chamfer) 0,
        calc(100% - var(--spec-chamfer)) 0,
        100% var(--spec-chamfer),
        100% calc(100% - var(--spec-chamfer)),
        calc(100% - var(--spec-chamfer)) 100%,
        var(--spec-chamfer) 100%,
        0 calc(100% - var(--spec-chamfer)),
        0 var(--spec-chamfer)
      );
      position: absolute;
      bottom: -10px;
      z-index: 10;
    }

    /* Внутренняя заливка: «рамка» = фон span между двумя одинаковыми по форме контурами */
    .poker-skills-section .shop-catalog--skills-pick .shop-card__spec::before {
      content: '';
      position: absolute;
      inset: var(--spec-border);
      z-index: 0;
      pointer-events: none;
      background: rgba(8, 15, 30, 0.96);
      clip-path: polygon(
        var(--spec-inner-cut) 0,
        calc(100% - var(--spec-inner-cut)) 0,
        100% var(--spec-inner-cut),
        100% calc(100% - var(--spec-inner-cut)),
        calc(100% - var(--spec-inner-cut)) 100%,
        var(--spec-inner-cut) 100%,
        0 calc(100% - var(--spec-inner-cut)),
        0 var(--spec-inner-cut)
      );
    }

    .poker-skills-section .shop-catalog--skills-pick .shop-card__spec::after {
      position: relative;
      z-index: 1;
      font-size: 9px;
      line-height: 1;
      letter-spacing: 0.14em;
    }

    .poker-skills-section .shop-catalog--skills-pick .shop-card[data-skill-type="active"] .shop-card__spec {
      color: #ff3ad8;
      background: #ff3ad8;
      filter: drop-shadow(0 0 12px rgba(255, 58, 216, 0.35));
    }

    .poker-skills-section .shop-catalog--skills-pick .shop-card[data-skill-type="active"] .shop-card__spec::after {
      content: 'ACTION';
      color: inherit;
    }

    .poker-skills-section .shop-catalog--skills-pick .shop-card[data-skill-type="passive"] .shop-card__spec {
      color: var(--cc-neon-green);
      background: var(--cc-neon-green);
      filter: drop-shadow(0 0 12px rgba(0, 255, 157, 0.35));
    }

    .poker-skills-section .shop-catalog--skills-pick .shop-card[data-skill-type="passive"] .shop-card__spec::after {
      content: 'PASSIVE';
      color: inherit;
    }

    .poker-skills-section .shop-catalog--skills-pick .shop-card[data-skill-type="info"] .shop-card__spec {
      color: #4deeea;
      background: #4deeea;
      filter: drop-shadow(0 0 12px rgba(77, 238, 234, 0.35));
    }

    .poker-skills-section .shop-catalog--skills-pick .shop-card[data-skill-type="info"] .shop-card__spec::after {
      content: 'REVEAL';
      color: inherit;
    }

    .poker-skills-section .shop-catalog--skills-pick .shop-card[data-skill-type="reaction"] .shop-card__spec {
      color: #ffb347;
      background: #ffb347;
      filter: drop-shadow(0 0 12px rgba(255, 179, 71, 0.35));
    }

    .poker-skills-section .shop-catalog--skills-pick .shop-card[data-skill-type="reaction"] .shop-card__spec::after {
      content: 'REACT';
      color: inherit;
    }

    .poker-skills-section .shop-catalog--skills-pick .shop-card[data-skill-type="risk"] .shop-card__spec {
      color: #ff5c5c;
      background: #ff5c5c;
      filter: drop-shadow(0 0 12px rgba(255, 92, 92, 0.35));
    }

    .poker-skills-section .shop-catalog--skills-pick .shop-card[data-skill-type="risk"] .shop-card__spec::after {
      content: 'RISK';
      color: inherit;
    }

    .poker-skills-section .shop-catalog--skills-pick .shop-item-wrapper {
      position: relative;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto auto;
      align-items: stretch;
      margin-bottom: 8px;
    }

    /* Свечение в той же ячейке сетки, что и картинка — строго за предметом по центру */
    .poker-skills-section .shop-catalog--skills-pick .shop-item-wrapper::before {
      content: '';
      grid-row: 2;
      grid-column: 1;
      align-self: stretch;
      width: 100%;
      min-height: 0;
      z-index: 0;
      pointer-events: none;
      background: radial-gradient(
        ellipse 68% 70% at 50% 50%,
        rgba(180, 100, 255, 0.55),
        rgba(120, 40, 200, 0.22) 46%,
        transparent 72%
      );
      filter: blur(16px);
      opacity: 0.88;
      transition: opacity 0.35s ease, filter 0.35s ease, background 0.35s ease;
    }

    .poker-skills-section .shop-catalog--skills-pick .shop-card:hover .shop-item-wrapper::before {
      opacity: 1;
      filter: blur(14px);
      background: radial-gradient(
        ellipse 72% 74% at 50% 50%,
        rgba(200, 130, 255, 0.65),
        rgba(140, 60, 220, 0.28) 50%,
        transparent 74%
      );
    }

    .poker-skills-section .shop-catalog--skills-pick .shop-card.selected .shop-item-wrapper::before {
      opacity: 1;
      filter: blur(12px);
      background: radial-gradient(
        ellipse 74% 76% at 50% 50%,
        rgba(0, 235, 215, 0.45),
        rgba(0, 140, 180, 0.22) 52%,
        transparent 76%
      );
      transition: none;
      animation: skills-shop-item-neon-glow var(--skills-shop-neon-dur, 2.35s) ease-in-out infinite;
    }

    .poker-skills-section .shop-catalog--skills-pick .shop-item-img,
    .poker-skills-section .shop-catalog--skills-pick .shop-item-text {
      position: relative;
      z-index: 1;
    }

    .poker-skills-section .shop-catalog--skills-pick .shop-item-text {
      grid-row: 1;
      grid-column: 1;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: flex-start;
      gap: 8px;
      width: 100%;
      min-width: 0;
      padding-bottom: 12px;
      padding-top: 12px;
      box-sizing: content-box;
    }

    .poker-skills-section .shop-catalog--skills-pick .shop-card h3 {
      font-family: var(--font-display);
      font-size: 0.95rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      color: #fff;
      text-shadow: none;
      line-height: 1.2;
      margin: 0;
      flex: 1;
      min-width: 0;
    }

    .poker-skills-section .shop-catalog--skills-pick .shop-item-img {
      grid-row: 2;
      grid-column: 1;
      width: 100%;
      max-width: 100%;
      border-radius: 10px;
      object-fit: contain;
    }

    .poker-skills-section .shop-catalog--skills-pick .shop-card > p:not(.shop-card__spectacle) {
      font-size: 14px;
      line-height: 1.4;
      color: rgba(235, 238, 255, 0.82);
      margin: 0 0 6px 0;
      font-weight: 500;
      overflow-wrap: anywhere;
      word-wrap: break-word;
    }

    .poker-skills-section .shop-catalog--skills-pick .shop-card > p:not(.shop-card__spectacle) strong {
      color: rgba(255, 255, 255, 0.95);
      font-weight: 700;
    }

    .poker-skills-section .shop-catalog--skills-pick .shop-card > p:not(.shop-card__spectacle) .shop-card__hl {
      color: var(--cc-neon-green);
      font-weight: 700;
    }

    .poker-skills-section .shop-catalog--skills-pick .shop-card__spectacle {
      font-size: 0.68rem !important;
      font-style: italic;
      color: rgba(255, 255, 255, 0.38) !important;
      margin: 0 0 8px 0 !important;
      line-height: 1.3 !important;
      overflow-wrap: anywhere;
      word-wrap: break-word;
    }

    .poker-skills-section .shop-catalog--skills-pick .shop-cost {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      margin-top: auto;
      padding-top: 10px;
      border-top: 1px solid rgba(157, 50, 255, 0.2);
      font-family: var(--font-display);
    }

    .poker-skills-section .shop-catalog--skills-pick .shop-cost__price {
      display: none;
    }

    .poker-skills-section .shop-cost__price {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 1.05rem;
      font-weight: 700;
      color: #fff;
    }

    .poker-skills-section .shop-cost__gem {
      filter: none;
      font-size: 1rem;
      line-height: 1;
    }

    .poker-skills-section .shop-cost__amount {
      text-shadow: none;
      letter-spacing: 0.03em;
    }

    .poker-skills-section .shop-cost__energy {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 2px;
      flex-shrink: 0;
      padding: 2px;
      border: 1px solid rgba(0, 245, 255, 0.35);
      border-radius: 4px;
      background: rgba(0, 0, 0, 0.35);
      box-shadow: none;
    }

    .poker-skills-section .shop-cost__energy .item-shop-energy-seg {
      height: 18px;
      width: 12px;
    }

    /* Как основной счётчик: 6 ячеек, «заполнены» справа налево; стоимость 3 = три правых сегмента */
    .poker-skills-section .shop-cost__energy .item-shop-energy-seg:nth-child(n + 4) {
      border-color: rgba(110, 251, 245, 0.65);
      background: linear-gradient(180deg, #6efbf5, #1ab9c2);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    /* Предмет вне сценария: data-energy = 6 — все 6 сегментов подсвечены */
    .poker-skills-section .shop-catalog--skills-pick .shop-card--off-scenario-energy .shop-cost__energy .item-shop-energy-seg {
      border-color: rgba(110, 251, 245, 0.65);
      background: linear-gradient(180deg, #6efbf5, #1ab9c2);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    /* ─── POKER TABLE CONTAINER ─── */
    /* Старт раздачи: блюр по столу + «Game Started» (~2 с) */
    .poker-game-start-overlay {
      position: absolute;
      inset: 0;
      z-index: 40;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.35s ease, visibility 0.35s ease;
    }

    .poker-game-start-overlay--visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .poker-game-start-overlay__blur {
      position: absolute;
      inset: 0;
      background: rgba(4, 12, 26, 0.52);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    .poker-game-start-overlay__label {
      position: relative;
      z-index: 1;
      margin: 0;
      font-family: var(--font-display);
      font-size: clamp(1.75rem, 5.5vw, 3.25rem);
      font-weight: 900;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #fff;
      text-align: center;
      text-shadow:
        0 0 36px rgba(0, 245, 255, 0.55),
        0 0 72px rgba(180, 80, 255, 0.4),
        0 2px 24px rgba(0, 0, 0, 0.6);
    }

    @media (prefers-reduced-motion: reduce) {
      .poker-game-start-overlay {
        transition: opacity 0.15s ease, visibility 0.15s ease;
      }
    }

    .poker-table-container {
      flex: 1;
      position: relative;
      min-height: 0;
      align-self: stretch;
      /* Высота = колонка родителя (.poker-room-layout); отдельно не тянем по vh */
      background: linear-gradient(rgba(10, 22, 40, 0.4), rgba(6, 13, 26, 0.8)), url('TableBackground.jpg');
      background-size: cover;
      background-position: center;
      border: 1px solid var(--border);
      border-left: none;
      border-radius: 0 16px 16px 0;
      border-right: 1px solid var(--border);
      overflow: hidden;
    }

    /* Один блок координат: картинка стола и .table-overlay совпадают по размеру (без flex-центрирования слоёв отдельно) */
    .table-felt-wrapper {
      position: absolute;
      /* Фиксированные отступы от края контейнера стола (не vh — зона сукна не «прыгает») */
      top: 250px;
      bottom: 220px;
      left: clamp(8px, 3.5vw, 100px);
      right: clamp(8px, 3.5vw, 100px);
      min-height: 0;
    }

    .table-scene {
      /* Эталон 887×491 px. Сжатие начинается при вьюпорте уже 1500px: ниже — scale(100vw/1500), от 1500px — max 887px */
      --tw: min(887px, max(260px, calc(100vw * 887 / 1500)));
      --ts: calc(var(--tw) / 887px);
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: var(--tw);
      aspect-ratio: 887 / 491;
      height: auto;
      z-index: 1;
    }

    .table-svg-container {
      position: absolute;
      inset: 0;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      filter:
        drop-shadow(calc(-15px * var(--ts)) 0 calc(25px * var(--ts)) rgba(0, 240, 255, 0.4))
        drop-shadow(calc(15px * var(--ts)) 0 calc(25px * var(--ts)) rgba(191, 0, 255, 0.4));
      pointer-events: none;
    }

    .table-svg-container img {
      width: 100%;
      height: 100%;
      object-fit: fill;
      display: block;
    }

    .table-overlay {
      position: absolute;
      inset: 0;
      z-index: 2;
      width: 100%;
      height: 100%;
      max-width: none;
    }

    /* Corner accents */
    .poker-table-container::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--neon-cyan), var(--neon-purple), transparent);
      box-shadow: 0 0 20px rgba(0, 240, 255, 0.6);
      z-index: 5;
    }

    /* Панель активного предмета — правый верх контейнера стола */
    .table-active-item-panel {
      position: absolute;
      top: clamp(10px, 2.2vw, 22px);
      right: clamp(10px, 2.2vw, 22px);
      z-index: 40;
      width: min(288px, calc(100% - 20px));
      max-width: 92vw;
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-8px) scale(0.98);
      transition:
        opacity 0.28s ease,
        visibility 0.28s ease,
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .table-active-item-panel.table-active-item-panel--visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }

    /* С 1400px ширина карточки предмета уменьшается пропорционально экрану (288px при 1400px) */
    @media (max-width: 1400px) {
      .table-active-item-panel {
        width: min(
          calc(100% - 20px),
          92vw,
          clamp(176px, calc(100vw * 288 / 1400), 288px)
        );
        max-width: none;
        top: clamp(8px, calc(100vw * 22 / 1400), 22px);
        right: clamp(8px, calc(100vw * 22 / 1400), 22px);
      }
    }

    /**
     * Рамка по контуру clip-path: градиент + padding дают «кольцо» и на скосах
     * (обычный border при clip-path даёт прозрачные фаски).
     */
    .table-active-item-panel__border {
      --tap-chamfer: 12px;
      --tap-ring: 1px;
      padding: var(--tap-ring);
      box-sizing: border-box;
      background: linear-gradient(
        135deg,
        rgba(176, 38, 255, 0.98) 0%,
        rgba(110, 40, 190, 0.95) 42%,
        rgba(77, 238, 234, 0.55) 100%
      );
      clip-path: polygon(
        0% 0%,
        calc(100% - var(--tap-chamfer)) 0%,
        100% var(--tap-chamfer),
        100% 100%,
        var(--tap-chamfer) 100%,
        0% calc(100% - var(--tap-chamfer))
      );
      box-shadow:
        0 0 0 1px rgba(0, 240, 255, 0.18),
        0 0 28px rgba(176, 38, 255, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }

    .table-active-item-panel__inner {
      position: relative;
      padding: clamp(12px, 2vw, 16px) clamp(14px, 2.2vw, 18px) clamp(14px, 2.2vw, 18px);
      background: linear-gradient(165deg, rgba(28, 8, 48, 0.96) 0%, rgba(10, 6, 22, 0.98) 100%);
      border: none;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
      /* Внутренний контур: на --tap-ring уже чем внешний — видно цветное кольцо, включая скосы */
      clip-path: polygon(
        var(--tap-ring) var(--tap-ring),
        calc(100% - var(--tap-chamfer) - var(--tap-ring)) var(--tap-ring),
        calc(100% - var(--tap-ring)) calc(var(--tap-chamfer) + var(--tap-ring)),
        calc(100% - var(--tap-ring)) calc(100% - var(--tap-ring)),
        calc(var(--tap-chamfer) + var(--tap-ring)) calc(100% - var(--tap-ring)),
        var(--tap-ring) calc(100% - var(--tap-chamfer) - var(--tap-ring))
      );
    }

    .table-active-item-panel__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
    }

    .table-active-item-panel__title {
      margin: 0;
      font-family: var(--font-display), var(--font-body), system-ui, sans-serif;
      font-size: clamp(14px, 1.35vw, 17px);
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: none;
      color: #f4f2ff;
      text-shadow: 0 0 18px rgba(176, 38, 255, 0.45);
    }

    .table-active-item-panel__reveal {
      flex-shrink: 0;
      font-family: var(--font-display), var(--font-body), system-ui, sans-serif;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #4deeea;
      background: rgba(0, 0, 0, 0.35);
      border: 1px solid rgba(77, 238, 234, 0.75);
      border-radius: 4px;
      padding: 6px 10px;
      cursor: pointer;
      box-shadow: 0 0 12px rgba(77, 238, 234, 0.25);
      transition:
        background 0.2s ease,
        box-shadow 0.2s ease,
        color 0.2s ease;
    }

    .table-active-item-panel__reveal:hover {
      background: rgba(77, 238, 234, 0.12);
      box-shadow: 0 0 18px rgba(77, 238, 234, 0.45);
    }

    .table-active-item-panel__reveal:focus-visible {
      outline: 2px solid rgba(77, 238, 234, 0.8);
      outline-offset: 2px;
    }

    .table-active-item-panel--revealed .table-active-item-panel__reveal {
      color: #b026ff;
      border-color: rgba(176, 38, 255, 0.75);
      box-shadow: 0 0 14px rgba(176, 38, 255, 0.35);
    }

    .table-active-item-panel__art {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: clamp(100px, 16vw, 132px);
      margin-bottom: 10px;
      border-radius: 10px;
      background: radial-gradient(ellipse at 50% 30%, rgba(176, 38, 255, 0.18), transparent 62%);
    }

    .table-active-item-panel__img {
      max-width: 88%;
      max-height: clamp(96px, 15vw, 124px);
      height: auto;
      object-fit: contain;
      filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55));
    }

    .table-active-item-panel__desc {
      margin: 0;
      font-family: var(--font-body), system-ui, sans-serif;
      font-size: clamp(11px, 1.05vw, 13px);
      line-height: 1.45;
      color: rgba(230, 228, 240, 0.88);
    }

    .table-active-item-panel__extra {
      margin: 10px 0 0;
      font-size: clamp(10px, 0.98vw, 12px);
      line-height: 1.4;
      color: rgba(77, 238, 234, 0.92);
      text-shadow: 0 0 12px rgba(77, 238, 234, 0.25);
      min-width: 0;
      max-width: 100%;
      overflow-wrap: anywhere;
      word-wrap: break-word;
      hyphens: auto;
    }

    .table-active-item-panel__extra[hidden] {
      display: none !important;
    }

    /* Доп. строка (REVEAL): читаемость и переносы на узких экранах */
    @media (max-width: 900px) {
      .table-active-item-panel__extra:not([hidden]) {
        font-size: clamp(11px, 2.4vw, 13px);
        line-height: 1.5;
        margin-top: 8px;
      }
    }

    @media (max-width: 600px) {
      .table-active-item-panel__extra:not([hidden]) {
        font-size: clamp(11px, 3.1vw, 13px);
        line-height: 1.55;
        margin-top: 6px;
        padding-top: 8px;
        border-top: 1px solid rgba(77, 238, 234, 0.22);
        max-height: min(42vh, 240px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(77, 238, 234, 0.35) rgba(0, 0, 0, 0.2);
      }

      .table-active-item-panel__extra:not([hidden])::-webkit-scrollbar {
        width: 5px;
      }

      .table-active-item-panel__extra:not([hidden])::-webkit-scrollbar-thumb {
        background: rgba(77, 238, 234, 0.35);
        border-radius: 4px;
      }
    }

    @media (max-width: 400px) {
      .table-active-item-panel__extra:not([hidden]) {
        max-height: min(48vh, 280px);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .table-active-item-panel {
        transition: opacity 0.15s ease, visibility 0.15s ease;
        transform: none;
      }

      .table-active-item-panel.table-active-item-panel--visible {
        transform: none;
      }
    }

    .flashbang-grenade-fx {
      pointer-events: none;
      user-select: none;
      filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 10px rgba(255, 220, 120, 0.35));
    }

    /* EMP: розовый неоновый луч между центрами аватаров */
    .emp-neon-beam-fx-wrap {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 78;
      overflow: visible;
    }

    .emp-neon-beam-ray {
      position: absolute;
      left: 0;
      top: 0;
      height: 6px;
      border-radius: 3px;
      transform-origin: 0 50%;
      opacity: 0.98;
      background: linear-gradient(
        90deg,
        rgba(255, 130, 215, 0.4) 0%,
        rgba(255, 45, 175, 1) 32%,
        rgba(255, 215, 255, 1) 50%,
        rgba(255, 45, 175, 1) 68%,
        rgba(255, 130, 215, 0.4) 100%
      );
      box-shadow:
        0 0 10px 2px rgba(255, 95, 205, 0.95),
        0 0 24px 7px rgba(255, 50, 165, 0.65),
        0 0 42px 12px rgba(255, 120, 210, 0.38),
        inset 0 0 10px rgba(255, 255, 255, 0.45);
      will-change: width;
    }

    .emp-neon-beam-impact {
      position: absolute;
      width: 30px;
      height: 30px;
      margin-left: -15px;
      margin-top: -15px;
      border-radius: 50%;
      pointer-events: none;
      background: radial-gradient(
        circle at 50% 50%,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 170, 235, 0.55) 38%,
        rgba(255, 65, 185, 0.28) 58%,
        transparent 72%
      );
      box-shadow:
        0 0 20px 9px rgba(255, 120, 215, 0.88),
        0 0 40px 14px rgba(255, 55, 165, 0.45);
      animation: emp-beam-impact-pop 360ms ease-out forwards;
    }

    @keyframes emp-beam-impact-pop {
      0% {
        transform: scale(0.35);
        opacity: 1;
      }

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

    /* Ослепляющий взрыв в точке попадания + краткая засветка зоны стола */
    .flashbang-burst {
      position: absolute;
      width: 220px;
      height: 220px;
      margin-left: -110px;
      margin-top: -110px;
      z-index: 67;
      pointer-events: none;
      user-select: none;
    }

    .flashbang-burst__hot {
      position: absolute;
      inset: 50% auto auto 50%;
      width: 24px;
      height: 24px;
      margin: -12px 0 0 -12px;
      border-radius: 50%;
      background: radial-gradient(circle, #fff 0%, #fff 18%, rgba(255, 248, 200, 0.95) 42%, rgba(255, 200, 80, 0.4) 65%, transparent 72%);
      box-shadow:
        0 0 20px 10px rgba(255, 255, 255, 0.95),
        0 0 45px 22px rgba(0, 245, 255, 0.55),
        0 0 80px 36px rgba(255, 255, 255, 0.35);
      animation: flashbang-hot-pulse 0.75s ease-out forwards;
    }

    .flashbang-burst__ring {
      position: absolute;
      inset: 50% auto auto 50%;
      width: 32px;
      height: 32px;
      margin: -16px 0 0 -16px;
      border-radius: 50%;
      border: 3px solid rgba(255, 255, 255, 0.95);
      box-shadow:
        0 0 12px rgba(0, 245, 255, 0.8),
        inset 0 0 10px rgba(255, 255, 255, 0.6);
      animation: flashbang-ring-expand 0.8s ease-out forwards;
    }

    .flashbang-burst__rays {
      position: absolute;
      inset: 0;
      background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 255, 255, 0.15) 8deg,
        transparent 16deg,
        transparent 30deg,
        rgba(255, 255, 255, 0.2) 38deg,
        transparent 46deg,
        transparent 60deg,
        rgba(255, 255, 255, 0.12) 68deg,
        transparent 76deg,
        transparent 88deg,
        rgba(255, 255, 255, 0.18) 95deg,
        transparent 103deg
      );
      border-radius: 50%;
      animation: flashbang-rays-spin 0.65s linear forwards;
      mask-image: radial-gradient(circle, #000 12%, transparent 68%);
    }

    .flashbang-burst__sparks {
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 50%, transparent 35%, rgba(255, 255, 255, 0.25) 50%, transparent 58%);
      animation: flashbang-sparks 0.7s ease-out forwards;
    }

    @keyframes flashbang-hot-pulse {
      0% {
        transform: scale(0.2);
        opacity: 1;
      }
      35% {
        transform: scale(2.2);
        opacity: 1;
      }
      100% {
        transform: scale(4.5);
        opacity: 0;
      }
    }

    @keyframes flashbang-ring-expand {
      0% {
        transform: scale(0.4);
        opacity: 1;
      }
      100% {
        transform: scale(9);
        opacity: 0;
      }
    }

    @keyframes flashbang-rays-spin {
      0% {
        transform: rotate(0deg) scale(0.3);
        opacity: 1;
      }
      100% {
        transform: rotate(120deg) scale(2.8);
        opacity: 0;
      }
    }

    @keyframes flashbang-sparks {
      0% {
        transform: scale(0.5);
        opacity: 0.9;
      }
      100% {
        transform: scale(2.2);
        opacity: 0;
      }
    }

    .flashbang-burst-screen {
      position: absolute;
      inset: 0;
      z-index: 66;
      pointer-events: none;
      background: radial-gradient(circle at var(--fb-x, 50%) var(--fb-y, 45%), rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.35) 18%, rgba(0, 245, 255, 0.08) 45%, transparent 72%);
      animation: flashbang-screen-blind 0.55s ease-out forwards;
    }

    /* Версия на document.body: не режется overflow у стола / секции */
    .flashbang-burst--viewport {
      position: fixed;
    }

    .flashbang-burst-screen--viewport {
      position: fixed;
    }

    @keyframes flashbang-screen-blind {
      0% {
        opacity: 0;
      }
      12% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }

    .skills-modal {
      position: fixed;
      inset: 0;
      z-index: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.25s ease, visibility 0.25s ease;
    }

    .skills-modal.open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    /* Финал демо: экран победы (портрет, лента WINNER, CTA Deposit) */
    .poker-winner-reveal {
      position: fixed;
      inset: 0;
      z-index: 540;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(12px, 3vw, 28px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.4s ease, visibility 0.4s ease;
    }

    .poker-winner-reveal--open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .poker-winner-reveal__backdrop {
      position: absolute;
      inset: 0;
      background:
        repeating-linear-gradient(
          -28deg,
          transparent 0,
          transparent 4px,
          rgba(255, 255, 255, 0.028) 4px,
          rgba(255, 255, 255, 0.028) 5px
        ),
        radial-gradient(ellipse 85% 55% at 50% 28%, rgba(160, 70, 220, 0.28) 0%, transparent 58%),
        radial-gradient(ellipse 55% 40% at 72% 72%, rgba(255, 50, 160, 0.14) 0%, transparent 52%),
        #0b0f1a;
    }

    .poker-winner-reveal__glow {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(ellipse 70% 50% at 50% 22%, rgba(200, 80, 255, 0.18) 0%, transparent 55%);
      mix-blend-mode: screen;
      opacity: 0.9;
    }

    .poker-winner-reveal__inner {
      position: relative;
      z-index: 1;
      text-align: center;
      max-height: min(92vh, 900px);
      opacity: 0;
    }

    .poker-winner-reveal--open .poker-winner-reveal__inner {
      animation: poker-winner-reveal-pop 0.65s cubic-bezier(0.22, 0.82, 0.28, 1) forwards;
    }

    .poker-winner-reveal__hero {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 8px;
    }

    .poker-winner-reveal__hero::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 36%;
      transform: translate(-50%, -50%);
      width: min(420px, 88vw);
      height: min(420px, 118vw);
      max-height: 85vh;
      z-index: 0;
      pointer-events: none;
      background: radial-gradient(
        ellipse 72% 68% at 50% 48%,
        rgba(255, 120, 210, 0.75) 0%,
        rgba(255, 70, 180, 0.4) 34%,
        rgba(200, 60, 220, 0.2) 54%,
        transparent 72%
      );
      filter: blur(24px);
      opacity: 0.92;
    }

    .poker-winner-reveal__portrait-ring {
      position: relative;
      z-index: 1;
      width: clamp(200px, 78vw, 300px);
      max-width: calc(100vw - 32px);
      box-sizing: border-box;
      border-radius: 18px;
      overflow: hidden;
    }

    .poker-winner-reveal__portrait {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 3 / 4;
      object-fit: cover;
    }

    .poker-winner-reveal__ribbon-wrap {
      position: absolute;
      bottom: 0;
      transform: translateY(50%);
      z-index: 3;
      display: flex;
      justify-content: center;
    }

    .poker-winner-reveal__winner-label {
      display: block;
      width: min(460px, calc(100vw - 24px));
      height: auto;
      margin: 0 auto;
      object-fit: contain;
      filter:
        drop-shadow(0 8px 22px rgba(0, 232, 255, 0.32))
        drop-shadow(0 4px 16px rgba(255, 46, 196, 0.28));
      pointer-events: none;
      user-select: none;
    }

    .poker-winner-reveal__name {
      font-family: var(--font-display);
      font-size: clamp(1.35rem, 4.5vw, 2rem);
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin: 10px 0 6px;
      color: #fff;
      line-height: 1.15;
      text-shadow: 0 0 24px rgba(255, 100, 220, 0.35);
    }

    .poker-winner-reveal__amount {
      font-family: var(--font-mono);
      font-size: clamp(1.85rem, 7vw, 3rem);
      font-weight: 800;
      margin: 0 0 10px;
      line-height: 1;
      letter-spacing: 0.03em;
      background: linear-gradient(120deg, #9dffc6 0%, #5ae8ff 35%, #d894ff 70%, #ff5ed2 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      filter: drop-shadow(0 4px 20px rgba(0, 240, 255, 0.35));
    }

    .poker-winner-reveal__sub {
      margin: 0 0 18px;
      font-size: clamp(0.72rem, 2vw, 0.88rem);
      color: rgba(255, 255, 255, 0.55);
      line-height: 1.45;
    }

    .poker-winner-reveal__cta {
      margin-top: 100px;
      text-align: center;
      padding: 20px 120px 22px;
      border-radius: 16px;
      border: 1px solid rgba(190, 100, 255, 0.5);
      background: linear-gradient(180deg, rgba(99, 38, 205, 0.00) -3.73%, rgba(181, 71, 255, 0.30) 100%), #1C0F3F;
      box-shadow: 0 0 28px 0 rgba(147, 10, 239, 0.40);
    }

    .poker-winner-reveal__cta-title {
      margin: 0 0 8px;
      font-family: var(--font-display);
      font-size: clamp(1.05rem, 3.2vw, 1.35rem);
      font-weight: 800;
      color: #fff;
      letter-spacing: 0.04em;
    }

    .poker-winner-reveal__cta-lead {
      margin: 0 0 16px;
      font-size: clamp(0.88rem, 2.4vw, 1.02rem);
      color: rgba(255, 255, 255, 0.88);
      line-height: 1.45;
    }

    .poker-winner-reveal__deposit {
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      padding: 14px min(48px, 10vw);
      border: none;
      cursor: pointer;
      position: relative;
      isolation: isolate;
      overflow: visible;
      transform: skewX(-11deg);
      background: transparent;
      transition: filter 0.15s ease, transform 0.15s ease;
    }

    /* Одна полоса: горизонтальный градиент (фон карточки → зелёный → лайм → фон), без маски — сплошной переход как на макете */
    .poker-winner-reveal__deposit::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: clamp(-56px, -10vw, -36px);
      right: clamp(-56px, -10vw, -36px);
      z-index: 0;
      pointer-events: none;
      background: linear-gradient(90deg, #00DE7E 0%, #59FF59 100%);
    }

    .poker-winner-reveal__deposit:hover {
      filter: brightness(1.06);
    }

    .poker-winner-reveal__deposit:focus-visible {
      outline: 2px solid rgba(0, 255, 200, 0.8);
      outline-offset: 3px;
    }

    .poker-winner-reveal__deposit-inner {
      position: relative;
      z-index: 1;
      display: block;
      transform: skewX(11deg);
      font-family: var(--font-display);
      font-size: clamp(0.95rem, 2.8vw, 1.15rem);
      font-weight: 900;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #2e1a5e;
    }

    .poker-winner-reveal__hint {
      margin: 14px 0 0;
      font-size: clamp(0.62rem, 1.6vw, 0.75rem);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.32);
    }

    @keyframes poker-winner-reveal-pop {
      from {
        transform: scale(0.9) translateY(18px);
        opacity: 0;
      }

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

    @media (prefers-reduced-motion: reduce) {
      .poker-winner-reveal--open .poker-winner-reveal__inner {
        animation: none;
        transform: none;
        opacity: 1;
      }
    }

    /* Промпт депозита (как финал игры, без аватара) */
    .poker-winner-reveal--deposit-prompt .poker-winner-reveal__cta--deposit-prompt {
      margin-top: 0;
      padding: clamp(28px, 5vw, 40px) clamp(24px, 6vw, 72px) clamp(26px, 4vw, 36px);
      width: 40vw;
    }

    .poker-winner-reveal__deposit-prompt-text {
      margin: 0 0 18px;
      font-family: var(--font-display);
      font-size: clamp(1.1rem, 3.5vw, 1.5rem);
      font-weight: 800;
      color: #fff;
      letter-spacing: 0.04em;
      line-height: 1.35;
    }

    .skills-modal__backdrop {
      position: absolute;
      inset: 0;
      background: rgba(2, 8, 14, 0.66);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .skills-modal__panel {
      position: relative;
      width: min(1280px, calc(100vw - 24px));
      height: calc(100vh - 24px);
      background: linear-gradient(180deg, rgba(7, 18, 30, 0.95), rgba(5, 10, 20, 0.98));
      border: 1px solid rgba(0, 240, 255, 0.35);
      border-radius: 14px;
      box-shadow: 0 0 32px rgba(0, 240, 255, 0.2);
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 16px;
      overflow: hidden;
    }

    .skills-modal__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .skills-modal__header h3 {
      margin: 0;
      color: #fff;
      font-family: var(--font-display);
      letter-spacing: 1px;
      font-size: clamp(1rem, 1.6vw, 1.35rem);
    }

    .skills-modal__close {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      background: rgba(255, 255, 255, 0.06);
      color: #fff;
      cursor: pointer;
      font-size: 1.35rem;
      line-height: 1;
    }

    .skills-modal__content {
      flex: 1;
      min-height: 0;
      overflow: auto;
    }

    .skills-modal__shop-host {
      min-height: 100%;
    }

    .shop-block-overlay__blur {
      position: absolute;
      inset: 0;
      z-index: 0;
      background: rgba(5, 8, 16, 0.42);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      pointer-events: none;
    }

    .shop-block-overlay__start {
      position: relative;
      z-index: 1;
      width: min(92%, 320px);
      flex-shrink: 0;
      pointer-events: auto;
      border: none;
      cursor: pointer;
      -webkit-appearance: none;
      appearance: none;
      font-size: 20px;
    }

    /* Явное скрытие блока с блюром (класс + [hidden] в JS) */
    .shop-block-overlay.shop-block-overlay--hidden,
    .shop-block-overlay[hidden] {
      display: none !important;
      visibility: hidden;
      pointer-events: none;
      opacity: 0;
    }

    .skills-modal__shop-host .container {
      max-width: none;
      padding: 0;
    }

    .skills-modal__shop-host .shop-side-avatar {
      position: sticky;
      top: 8px;
      align-self: flex-start;
      z-index: 2;
      flex: 0 0 min(300px, 28vw);
    }

    .skills-modal__shop-host .shop-side-avatar video {
      height: min(560px, calc(100vh - 200px));
    }

    .skills-modal-shop-intro__lead {
      color: rgba(255, 255, 255, 0.6);
      max-width: 640px;
      margin: 10px auto 0;
      font-size: 1rem;
      line-height: 1.5;
    }

    .skills-modal__shop-host .shop-layout--skills-grid {
      display: flex;
      flex-direction: row;
      gap: 20px;
      padding-bottom: 8px;
      margin-top: 0;
      align-items: flex-start;
    }

    .skills-modal__shop-host .shop-catalog--skills-pick {
      width: 100%;
      min-width: 0;
    }

    .skills-pick {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .skills-pick__group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .skills-pick__label {
      font-family: var(--font-header);
      font-size: 0.72rem;
      color: rgba(255, 255, 255, 0.52);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin: 0;
      line-height: 1.35;
    }

    .skills-pick__split-labels {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 10px;
      align-items: end;
    }

    .skills-pick__label--span2 {
      grid-column: 1;
    }

    .skills-pick__label--span1 {
      grid-column: 2;
    }

    .skills-pick__row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      overflow: visible;
      padding-bottom: 0;
      scroll-snap-type: none;
    }

    .skills-modal__shop-host .skills-pick__row .shop-card {
      min-width: 0;
      max-width: none;
      width: 100%;
    }

    .skills-modal__shop-host .shop-card__spectacle {
      font-size: 0.68rem;
      font-style: italic;
      color: rgba(255, 255, 255, 0.38);
      margin: 0 0 6px 0 !important;
      line-height: 1.25;
    }

    @media (max-width: 900px) {
      .skills-modal__shop-host .shop-layout--skills-grid {
        flex-direction: column;
        align-items: stretch;
      }

      .skills-modal__shop-host .shop-side-avatar {
        position: relative;
        top: auto;
        flex: 0 0 auto;
        max-width: 400px;
        margin: 0 auto;
        width: 100%;
      }

      .skills-modal__shop-host .shop-side-avatar video {
        height: min(420px, 55vh);
      }

      .skills-pick__row {
        grid-template-columns: 1fr;
      }

      .skills-pick__split-labels {
        grid-template-columns: 1fr;
      }

      .skills-pick__label--span2,
      .skills-pick__label--span1 {
        grid-column: auto;
      }
    }

    .skills-modal__footer {
      border-top: 1px solid rgba(0, 240, 255, 0.2);
      padding-top: 16px;
      display: flex;
      justify-content: center;
    }

    .skills-modal__start-btn {
      align-self: stretch;
      min-height: 50px;
      padding: 0px 40px;
      border-radius: 10px;
      border: 1px solid rgba(0, 240, 255, 0.55);
      background: linear-gradient(90deg, rgba(0, 240, 255, 0.23), rgba(191, 0, 255, 0.25));
      color: #fff;
      font-size: 1.2rem;
      font-family: var(--font-display);
      letter-spacing: 1px;
      text-transform: uppercase;
      cursor: pointer;
    }

    .skills-modal--prompt {
      z-index: 520;
    }

    .skills-modal--prompt .skills-modal__panel {
      width: min(440px, calc(100vw - 32px));
      height: auto;
      max-height: min(360px, 86vh);
      padding: 22px 20px 20px;
      gap: 14px;
    }

    .skills-modal__header--prompt {
      justify-content: center;
      padding-bottom: 4px;
      border-bottom: 1px solid rgba(0, 240, 255, 0.18);
    }

    .skills-modal__header--prompt h3 {
      text-align: center;
      width: 100%;
    }

    .skills-modal__content--prompt {
      flex: 0 1 auto;
      text-align: center;
      color: rgba(255, 255, 255, 0.78);
      font-size: clamp(0.9rem, 1.5vw, 1.05rem);
      line-height: 1.55;
    }

    .skills-modal__content--prompt p {
      margin: 0;
    }

    .skills-modal--prompt .skills-modal__footer {
      padding-top: 12px;
    }

    /* HUD top bar */
    .table-hud {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 52px;
      background: rgba(3, 7, 18, 0.9);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      z-index: 20;
      backdrop-filter: blur(10px);
    }

    .hud-left {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .hand-info {
      font-family: var(--font-mono);
      font-size: 11px;
      color: rgba(0, 245, 255, 0.6);
      letter-spacing: 1px;
    }

    .hand-badge {
      background: rgba(0, 240, 255, 0.08);
      border: 1px solid rgba(0, 240, 255, 0.2);
      border-radius: 3px;
      padding: 3px 10px;
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--neon-cyan);
    }

    .mini-tables {
      display: flex;
      gap: 6px;
    }

    .mini-table-slot {
      width: 64px;
      height: 36px;
      background: rgba(0, 240, 255, 0.06);
      border: 1px solid rgba(0, 240, 255, 0.15);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-mono);
      font-size: 8px;
      color: rgba(0, 240, 255, 0.4);
      position: relative;
      overflow: hidden;
    }

    .mini-table-slot.active {
      background: rgba(0, 240, 255, 0.12);
      border-color: rgba(0, 240, 255, 0.4);
      color: var(--neon-cyan);
    }

    .mini-table-slot::before {
      content: '♠A';
      font-size: 12px;
    }

    .hud-right {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    /* Jackpot */
    .jackpot-display {
      background: linear-gradient(90deg, #04003d, #06085a, #030a70, #04003d);
      border: 1px solid rgba(180, 100, 255, 0.3);
      border-radius: 20px;
      padding: 6px 20px 6px 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      position: relative;
      overflow: hidden;
    }

    .jackpot-display::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(191, 0, 255, 0.08), transparent);
      animation: jackpot-shimmer 3s linear infinite;
    }

    @keyframes jackpot-shimmer {
      0% {
        transform: translateX(-100%);
      }

      100% {
        transform: translateX(100%);
      }
    }

    .jackpot-label {
      font-family: var(--font-display);
      font-size: 7px;
      font-weight: 700;
      color: #e57dff;
      letter-spacing: 2px;
      line-height: 1;
    }

    .jackpot-title {
      font-family: var(--font-display);
      font-size: 11px;
      font-weight: 900;
      color: var(--gold-bright);
      text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
      line-height: 1;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .jackpot-amount {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 900;
      background: linear-gradient(180deg, #ffe08f, #ed9227);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: none;
      filter: drop-shadow(0 0 8px rgba(255, 180, 0, 0.5));
    }

    .hud-btn {
      width: 34px;
      height: 34px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.6);
      transition: all 0.2s;
      position: relative;
      overflow: hidden;
    }

    .hud-btn:hover {
      background: rgba(0, 240, 255, 0.1);
      border-color: var(--neon-cyan);
      color: var(--neon-cyan);
      box-shadow: var(--neon-glow-cyan);
    }

    /* ─── TABLE FELT ─── */
    /* The layout wrapper handles positioning while the inner SVG gives the exact visual shape */
    /* ... SVG styles applied inline via script ... */

    /* Table logo */
    .table-logo {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 900;
      color: rgba(0, 240, 255, 0.08);
      letter-spacing: 4px;
      text-transform: uppercase;
      white-space: nowrap;
      text-shadow: 0 0 30px rgba(0, 240, 255, 0.3);
    }

    /* Community cards */
    .community-cards {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      gap: calc(6px * var(--ts, 1));
      align-items: flex-start;
    }

    .community-card-slot {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: calc(4px * var(--ts, 1));
      flex-shrink: 0;
    }

    .community-card-street-hint {
      width: calc(38px * var(--ts, 1));
      min-height: calc(12px * var(--ts, 1));
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      gap: calc(2px * var(--ts, 1));
    }

    .community-card-street-hint img {
      max-width: 100%;
      max-height: calc(14px * var(--ts, 1));
      width: auto;
      height: auto;
      object-fit: contain;
      filter: drop-shadow(0 calc(1px * var(--ts, 1)) calc(4px * var(--ts, 1)) rgba(0, 0, 0, 0.65));
    }

    .community-card {
      width: calc(38px * var(--ts, 1));
      height: calc(52px * var(--ts, 1));
      background: white;
      border-radius: calc(4px * var(--ts, 1));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: clamp(10px, calc(16px * var(--ts, 1)), 16px);
      font-weight: 700;
      box-shadow:
        0 calc(4px * var(--ts, 1)) calc(12px * var(--ts, 1)) rgba(0, 0, 0, 0.5),
        0 0 calc(8px * var(--ts, 1)) rgba(0, 240, 255, 0.2);
      position: relative;
      overflow: hidden;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    .community-card.has-face {
      background-color: transparent;
      color: transparent;
      font-size: 0;
    }

    .community-card--placeholder {
      background-color: #0a0e18;
      background-image: url('cardback.svg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      color: transparent;
      font-size: 0;
    }

    .community-card.red {
      color: #cc0000;
    }

    .community-card.black {
      color: #111;
    }

    .community-card::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 1;
      border: 1px solid rgba(0, 240, 255, 0.3);
      border-radius: calc(4px * var(--ts, 1));
      box-shadow: inset 0 0 calc(8px * var(--ts, 1)) rgba(0, 240, 255, 0.1);
      pointer-events: none;
    }

    /* Terminal Hack: шире ряда карт; по высоте только карта; полосы разной толщины в цикле */
    .terminal-hack-scan-fx--board {
      --th-card-h: calc(52px * var(--ts, 1));
      /* Шире ряда карт: полоски и свечение выходят за края карт по горизонтали */
      --th-board-pad-x: calc(36px * var(--ts, 1));
      position: absolute;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
      width: calc(100% + var(--th-board-pad-x));
      height: var(--th-card-h);
      z-index: 14;
      pointer-events: none;
      overflow: visible;
    }

    .terminal-hack-scan-fx__stripes {
      --th-stripe: 48px;
      --th-half: 24px;
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0.88;
      /* Один цикл 48px: линии ~1px, 3px, 1px, 2px, 1px, 4px — разная «ширина» штриха */
      background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 3px,
        rgba(0, 255, 160, 0.38) 3px,
        rgba(0, 255, 235, 0.92) 4px,
        rgba(0, 255, 160, 0.38) 4px,
        transparent 5px,
        transparent 7px,
        rgba(0, 255, 160, 0.42) 7px,
        rgba(0, 255, 235, 0.95) 10px,
        rgba(0, 255, 160, 0.42) 10px,
        transparent 11px,
        transparent 14px,
        rgba(0, 255, 160, 0.36) 14px,
        rgba(0, 255, 235, 0.9) 15px,
        rgba(0, 255, 160, 0.36) 15px,
        transparent 16px,
        transparent 19px,
        rgba(0, 255, 160, 0.4) 19px,
        rgba(0, 255, 235, 0.93) 21px,
        rgba(0, 255, 160, 0.4) 21px,
        transparent 22px,
        transparent 25px,
        rgba(0, 255, 160, 0.35) 25px,
        rgba(0, 255, 235, 0.88) 26px,
        rgba(0, 255, 160, 0.35) 26px,
        transparent 27px,
        transparent 30px,
        rgba(0, 255, 160, 0.45) 30px,
        rgba(0, 255, 235, 0.96) 34px,
        rgba(0, 255, 160, 0.45) 34px,
        transparent 35px,
        transparent 48px
      );
      background-size: 100% var(--th-stripe);
      background-repeat: repeat;
      filter: drop-shadow(0 0 calc(4px * var(--ts, 1)) rgba(0, 255, 170, 0.85))
        drop-shadow(0 0 calc(12px * var(--ts, 1)) rgba(0, 220, 130, 0.45));
    }

    /* Горизонтальное сужение к краям + вертикальное чередование направлений */
    .terminal-hack-scan-fx__stripes--down {
      -webkit-mask-image:
        repeating-linear-gradient(
          to bottom,
          #fff 0,
          #fff var(--th-half),
          transparent var(--th-half),
          transparent var(--th-stripe)
        ),
        linear-gradient(
          to right,
          transparent 0%,
          rgba(255, 255, 255, 0.35) 2%,
          #fff 8%,
          #fff 92%,
          rgba(255, 255, 255, 0.35) 98%,
          transparent 100%
        );
      -webkit-mask-size: 100% var(--th-stripe), 100% 100%;
      -webkit-mask-repeat: repeat, no-repeat;
      -webkit-mask-composite: source-in;
      mask-image:
        repeating-linear-gradient(
          to bottom,
          #fff 0,
          #fff var(--th-half),
          transparent var(--th-half),
          transparent var(--th-stripe)
        ),
        linear-gradient(
          to right,
          transparent 0%,
          rgba(255, 255, 255, 0.35) 2%,
          #fff 8%,
          #fff 92%,
          rgba(255, 255, 255, 0.35) 98%,
          transparent 100%
        );
      mask-size: 100% var(--th-stripe), 100% 100%;
      mask-repeat: repeat, no-repeat;
      mask-composite: intersect;
      animation: terminal-hack-stripes-scroll-down 0.52s linear infinite;
      animation-delay: -0.12s;
    }

    .terminal-hack-scan-fx__stripes--up {
      -webkit-mask-image:
        repeating-linear-gradient(
          to bottom,
          transparent 0,
          transparent var(--th-half),
          #fff var(--th-half),
          #fff var(--th-stripe)
        ),
        linear-gradient(
          to right,
          transparent 0%,
          rgba(255, 255, 255, 0.35) 2%,
          #fff 8%,
          #fff 92%,
          rgba(255, 255, 255, 0.35) 98%,
          transparent 100%
        );
      -webkit-mask-size: 100% var(--th-stripe), 100% 100%;
      -webkit-mask-repeat: repeat, no-repeat;
      -webkit-mask-composite: source-in;
      mask-image:
        repeating-linear-gradient(
          to bottom,
          transparent 0,
          transparent var(--th-half),
          #fff var(--th-half),
          #fff var(--th-stripe)
        ),
        linear-gradient(
          to right,
          transparent 0%,
          rgba(255, 255, 255, 0.35) 2%,
          #fff 8%,
          #fff 92%,
          rgba(255, 255, 255, 0.35) 98%,
          transparent 100%
        );
      mask-size: 100% var(--th-stripe), 100% 100%;
      mask-repeat: repeat, no-repeat;
      mask-composite: intersect;
      animation: terminal-hack-stripes-scroll-up 0.68s linear infinite;
      animation-delay: -0.28s;
    }

    @keyframes terminal-hack-stripes-scroll-down {
      from {
        background-position: 0 0;
      }

      to {
        background-position: 0 48px;
      }
    }

    @keyframes terminal-hack-stripes-scroll-up {
      from {
        background-position: 0 0;
      }

      to {
        background-position: 0 -48px;
      }
    }

    /* Pot — та же схема, что у .player-bet-pile: фишки + сумма под ними */
    .pot-display {
      position: absolute;
      top: 22%;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: max-content;
      min-width: calc(72px * var(--ts, 1));
      max-width: calc(150px * var(--ts, 1));
      z-index: 12;
      pointer-events: none;
      overflow: visible;
    }

    .pot-display .player-bet-chips-inner {
      position: relative;
      width: calc(132px * var(--ts, 1));
      height: calc(76px * var(--ts, 1));
      margin: 0 auto;
    }

    .pot-display .player-bet-amount {
      transform: translateX(0);
    }

    .pot-display--empty .player-bet-amount {
      display: none;
    }

    /* ─── PLAYERS ─── */
    .player {
      position: absolute;
      z-index: 5;
    }

    .player-panel {
      position: relative;
      padding-top: calc(26px * var(--ts, 1));
    }

    .player-row {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: calc(8px * var(--ts, 1));
      position: relative;
    }

    /* Игроки справа от центра стола: предмет снаружи, справа от аватара */
    .player-row--mirror {
      flex-direction: row-reverse;
    }

    .player-column {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      flex-shrink: 0;
    }

    .player.dealer {
      z-index: 30;
    }

    /* Фишка дилера — над блоком имени/стека */
    .player.dealer .player-info::before {
      content: 'D';
      position: absolute;
      top: calc(30px * var(--ts, 1));
      left: 0%;
      transform: translateX(-50%);
      width: calc(22px * var(--ts, 1));
      height: calc(22px * var(--ts, 1));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: clamp(8px, calc(11px * var(--ts, 1)), 11px);
      font-weight: 900;
      color: #111;
      background: radial-gradient(circle at 30% 30%, #fff7b0, #f3c94c 60%, #b68618);
      border: 1px solid rgba(255, 233, 140, 0.9);
      box-shadow: 0 0 calc(12px * var(--ts, 1)) rgba(255, 215, 0, 0.65);
      text-shadow: none;
      pointer-events: none;
      z-index: 14;
    }

    .player-avatar {
      width: calc(105px * var(--ts, 1));
      height: calc(115px * var(--ts, 1));
      border: none;
      background: none;
      display: block;
      box-shadow: none;
      position: relative;
      overflow: visible;
      flex-shrink: 0;
    }

    .player-avatar-img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: calc(12px * var(--ts, 1));
      position: relative;
      z-index: 1;
    }

    /* Ghost Scan: полупрозрачная копия поверх аватара (карты — z-index выше) */
    .player-ghost-scan-echo {
      position: absolute;
      left: 15px;
      top: 20px;
      width: 100%;
      height: 100%;
      z-index: 2;
      pointer-events: none;
      border-radius: calc(12px * var(--ts, 1));
      overflow: hidden;
      opacity: 0;
      box-sizing: border-box;
      transform: translate(calc(-10px * var(--ts, 1)), calc(-12px * var(--ts, 1))) scale(1.09);
      will-change: transform, opacity, clip-path;
    }

    .player-ghost-scan-echo::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      z-index: 3;
      pointer-events: none;
      opacity: 0;
      background:
        radial-gradient(
          ellipse 95% 75% at 18% 22%,
          rgba(255, 95, 210, 0.55) 0%,
          rgba(255, 60, 180, 0.22) 38%,
          transparent 58%
        ),
        radial-gradient(
          ellipse 80% 70% at 86% 76%,
          rgba(90, 240, 255, 0.5) 0%,
          rgba(40, 200, 255, 0.2) 42%,
          transparent 55%
        ),
        radial-gradient(
          ellipse 110% 85% at 48% 108%,
          rgba(180, 95, 255, 0.48) 0%,
          rgba(130, 70, 255, 0.18) 45%,
          transparent 62%
        ),
        radial-gradient(
          circle at 72% 18%,
          rgba(255, 180, 255, 0.35) 0%,
          transparent 45%
        );
      mix-blend-mode: screen;
    }

    .player-ghost-scan-echo--active::before {
      opacity: 0.72;
      animation: ghost-scan-echo-neon-blobs 2.4s ease-in-out infinite;
    }

    .player-ghost-scan-echo--out::before {
      opacity: 0 !important;
      animation: none !important;
    }

    .player-ghost-scan-echo__img {
      position: relative;
      z-index: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border-radius: inherit;
      opacity: 0.58;
      filter: saturate(1.35) contrast(1.1);
    }

    .player-ghost-scan-echo__glitch {
      position: absolute;
      inset: 0;
      z-index: 1;
      border-radius: inherit;
      pointer-events: none;
      background:
        repeating-linear-gradient(
          0deg,
          rgba(255, 255, 255, 0) 0px,
          rgba(255, 255, 255, 0) 2px,
          rgba(160, 255, 255, 0.075) 2px,
          rgba(160, 255, 255, 0.075) 3px
        ),
        repeating-linear-gradient(
          90deg,
          transparent 0%,
          transparent 42%,
          rgba(255, 40, 200, 0.14) 50%,
          transparent 58%,
          transparent 100%
        );
      background-size: 100% 100%, 200% 100%;
      mix-blend-mode: soft-light;
      opacity: 0.95;
      animation: ghost-scan-echo-glitch-layer 0.26s steps(2) infinite;
    }

    .player-ghost-scan-echo--active {
      animation:
        ghost-scan-echo-enter 0.42s cubic-bezier(0.22, 0.82, 0.28, 1) forwards,
        ghost-scan-echo-glitch 0.4s steps(6, end) infinite 0.08s,
        ghost-scan-echo-neon-rim 2s ease-in-out infinite;
    }

    .player-ghost-scan-echo--active .player-ghost-scan-echo__img {
      animation: ghost-scan-echo-chroma 0.18s steps(2) infinite;
    }

    .player-ghost-scan-echo--out {
      animation: ghost-scan-echo-exit 0.44s ease-in forwards !important;
    }

    .player-ghost-scan-echo--out .player-ghost-scan-echo__img {
      animation: none !important;
    }

    .player-ghost-scan-echo--out .player-ghost-scan-echo__glitch {
      animation: none;
      opacity: 0;
    }

    @keyframes ghost-scan-echo-enter {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    @keyframes ghost-scan-echo-exit {
      to {
        opacity: 0;
        transform: translate(calc(-6px * var(--ts, 1)), calc(-7px * var(--ts, 1))) scale(0.94);
        filter: blur(7px);
      }
    }

    @keyframes ghost-scan-echo-glitch {
      0%,
      100% {
        transform: translate(calc(-10px * var(--ts, 1)), calc(-12px * var(--ts, 1))) scale(1.09);
        clip-path: inset(0 0 0 0);
      }

      11% {
        transform: translate(calc(-16px * var(--ts, 1)), calc(-8px * var(--ts, 1))) scale(1.11) skewX(-3deg);
        clip-path: inset(6% 0 74% 0);
      }

      22% {
        transform: translate(calc(-6px * var(--ts, 1)), calc(-17px * var(--ts, 1))) scale(1.06) skewX(2.4deg);
        clip-path: inset(36% 0 32% 0);
      }

      33% {
        transform: translate(calc(-17px * var(--ts, 1)), calc(-10px * var(--ts, 1))) scale(1.1);
        clip-path: inset(0 14% 0 10%);
      }

      44% {
        transform: translate(calc(-8px * var(--ts, 1)), calc(-14px * var(--ts, 1))) scale(1.08) skewX(-1.8deg);
        clip-path: inset(52% 0 15% 0);
      }

      55% {
        transform: translate(calc(-13px * var(--ts, 1)), calc(-9px * var(--ts, 1))) scale(1.095);
        clip-path: inset(0 0 0 0);
      }

      66% {
        transform: translate(calc(-10px * var(--ts, 1)), calc(-15px * var(--ts, 1))) scale(1.07) skewX(2.8deg);
        clip-path: inset(18% 0 54% 0);
      }

      77% {
        transform: translate(calc(-15px * var(--ts, 1)), calc(-11px * var(--ts, 1))) scale(1.1);
        clip-path: inset(0 26% 0 6%);
      }

      88% {
        transform: translate(calc(-11px * var(--ts, 1)), calc(-10px * var(--ts, 1))) scale(1.085);
        clip-path: inset(68% 0 4% 0);
      }
    }

    @keyframes ghost-scan-echo-glitch-layer {
      0%,
      100% {
        transform: translateX(0);
        opacity: 0.88;
      }

      50% {
        transform: translateX(5%);
        opacity: 1;
      }
    }

    @keyframes ghost-scan-echo-chroma {
      0%,
      100% {
        filter:
          saturate(1.45) contrast(1.14)
          drop-shadow(calc(3px * var(--ts, 1)) 0 0 rgba(255, 65, 195, 0.58))
          drop-shadow(calc(-3px * var(--ts, 1)) 0 0 rgba(70, 235, 255, 0.5))
          drop-shadow(0 calc(2px * var(--ts, 1)) calc(8px * var(--ts, 1)) rgba(160, 85, 255, 0.45));
      }

      50% {
        filter:
          saturate(1.6) contrast(1.2)
          drop-shadow(calc(-5px * var(--ts, 1)) 0 0 rgba(255, 80, 210, 0.68))
          drop-shadow(calc(5px * var(--ts, 1)) 0 0 rgba(100, 245, 255, 0.55))
          drop-shadow(0 calc(-3px * var(--ts, 1)) calc(12px * var(--ts, 1)) rgba(190, 100, 255, 0.55));
      }
    }

    @keyframes ghost-scan-echo-neon-rim {
      0%,
      100% {
        box-shadow:
          inset 0 0 calc(28px * var(--ts, 1)) rgba(255, 70, 190, 0.32),
          inset 0 0 calc(48px * var(--ts, 1)) rgba(70, 220, 255, 0.22),
          inset 0 0 calc(72px * var(--ts, 1)) rgba(150, 85, 255, 0.18),
          inset 0 calc(2px * var(--ts, 1)) 0 rgba(255, 200, 255, 0.12);
      }

      34% {
        box-shadow:
          inset 0 0 calc(36px * var(--ts, 1)) rgba(80, 235, 255, 0.38),
          inset 0 0 calc(52px * var(--ts, 1)) rgba(170, 95, 255, 0.26),
          inset 0 0 calc(64px * var(--ts, 1)) rgba(255, 90, 200, 0.2),
          inset calc(3px * var(--ts, 1)) 0 0 rgba(180, 255, 255, 0.14);
      }

      67% {
        box-shadow:
          inset 0 0 calc(32px * var(--ts, 1)) rgba(175, 95, 255, 0.36),
          inset 0 0 calc(56px * var(--ts, 1)) rgba(255, 85, 195, 0.28),
          inset 0 0 calc(68px * var(--ts, 1)) rgba(90, 230, 255, 0.2),
          inset calc(-2px * var(--ts, 1)) 0 0 rgba(220, 160, 255, 0.12);
      }
    }

    @keyframes ghost-scan-echo-neon-blobs {
      0%,
      100% {
        transform: scale(1) translate(0, 0);
        opacity: 0.68;
      }

      28% {
        transform: scale(1.04) translate(3%, -2%);
        opacity: 0.82;
      }

      52% {
        transform: scale(0.98) translate(-2%, 2%);
        opacity: 0.74;
      }

      76% {
        transform: scale(1.02) translate(2%, 1%);
        opacity: 0.78;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .player-ghost-scan-echo--active {
        animation: ghost-scan-echo-enter 0.35s ease-out forwards;
        box-shadow:
          inset 0 0 calc(24px * var(--ts, 1)) rgba(255, 70, 190, 0.22),
          inset 0 0 calc(44px * var(--ts, 1)) rgba(70, 220, 255, 0.16),
          inset 0 0 calc(60px * var(--ts, 1)) rgba(150, 85, 255, 0.14);
      }

      .player-ghost-scan-echo--active::before {
        opacity: 0.5;
        animation: none;
        transform: none;
      }

      .player-ghost-scan-echo--active .player-ghost-scan-echo__img {
        animation: none;
        filter:
          saturate(1.35) contrast(1.1)
          drop-shadow(calc(2px * var(--ts, 1)) 0 0 rgba(255, 65, 195, 0.4))
          drop-shadow(calc(-2px * var(--ts, 1)) 0 0 rgba(70, 235, 255, 0.35))
          drop-shadow(0 0 calc(8px * var(--ts, 1)) rgba(160, 85, 255, 0.35));
      }

      .player-ghost-scan-echo__glitch {
        animation: none;
        opacity: 0.35;
      }

      .player-ghost-scan-echo--out {
        animation: ghost-scan-echo-exit 0.35s ease-in forwards !important;
      }
    }

    /* Neural Shield: оверлей shield.png; ряд + аватар поднимаем над плашкой имени и player-action */
    .table-overlay .player.player-neural-shield-active .player-row {
      position: relative;
      z-index: 22;
    }

    .table-overlay .player.player-neural-shield-active .player-avatar {
      z-index: 25;
    }

    /* Neural Shield: оверлей shield.png поверх аватара при активации */
    .player-neural-shield-fx {
      position: absolute;
      left: 50%;
      top: 56%;
      z-index: 5;
      width: 134%;
      height: 134%;
      max-width: none;
      pointer-events: none;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: translate(-50%, -50%) scale(0.32);
      opacity: 0;
      filter: drop-shadow(0 0 calc(10px * var(--ts, 1)) rgba(120, 220, 255, 0.55));
      will-change: transform, opacity;
    }

    .player-neural-shield-fx__img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      user-select: none;
      -webkit-user-drag: none;
    }

    .player-neural-shield-fx--appear {
      animation: neural-shield-fx-appear var(--neural-shield-appear, 780ms) cubic-bezier(0.22, 0.82, 0.28, 1) forwards;
    }

    .player-neural-shield-fx--lock {
      animation: neural-shield-fx-lock var(--neural-shield-lock, 520ms) cubic-bezier(0.33, 1, 0.36, 1) forwards;
    }

    .player-neural-shield-fx.player-neural-shield-fx--exit {
      animation: neural-shield-fx-vanish var(--neural-shield-vanish, 780ms) cubic-bezier(0.78, 0.12, 0.22, 0.82) forwards;
      pointer-events: none;
    }

    @keyframes neural-shield-fx-vanish {
      0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }

      100% {
        opacity: 0.12;
        transform: translate(-50%, -50%) scale(0.28);
      }
    }

    @keyframes neural-shield-fx-appear {
      0% {
        opacity: 0.12;
        transform: translate(-50%, -50%) scale(0.28);
      }

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

    /* Во всех кадрах opacity: 1 — иначе при смене анимации с appear на lock непрозрачность падает на базовое .player-neural-shield-fx { opacity: 0 } */
    @keyframes neural-shield-fx-lock {
      0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
      }

      12% {
        opacity: 1;
        transform: translate(calc(-50% + 5px), calc(-50% - 4px)) scale(1.04) rotate(-2.2deg);
      }

      28% {
        opacity: 1;
        transform: translate(calc(-50% - 6px), calc(-50% + 3px)) scale(0.97) rotate(2.4deg);
      }

      44% {
        opacity: 1;
        transform: translate(calc(-50% + 4px), calc(-50% + 4px)) scale(1.02) rotate(-1.1deg);
      }

      62% {
        opacity: 1;
        transform: translate(calc(-50% - 3px), calc(-50% - 2px)) scale(0.99) rotate(0.8deg);
      }

      82% {
        opacity: 1;
        transform: translate(calc(-50% + 1px), calc(-50% + 1px)) scale(1.005) rotate(-0.3deg);
      }

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

    @media (prefers-reduced-motion: reduce) {
      .player-neural-shield-fx--appear {
        animation: none;
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }

      .player-neural-shield-fx--lock {
        animation: none;
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }

      .player-neural-shield-fx.player-neural-shield-fx--exit {
        animation: none;
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.28);
      }
    }

    .player.active .player-avatar {
      border: none;
      box-shadow: none;
    }

    .table-overlay .player.current-turn {
      overflow: visible;
    }

    .player.current-turn {
      z-index: 25;
      filter: drop-shadow(0 0 calc(14px * var(--ts, 1)) rgba(209, 10, 239, 0.35));
    }

    .player.current-turn .player-avatar {
      border: none;
      box-shadow: none;
    }

    /* Подсветка «чей ход»: SVG на панели — не обрезается сверху (у ::before на колонке с z-index:-1 гасился верх) */
    .table-overlay .player.current-turn .player-panel {
      overflow: visible;
    }

    .table-overlay .player.current-turn .player-row {
      position: relative;
      z-index: 1;
      overflow: visible;
    }

    @keyframes current-player-sheen {
      0% {
        background-position: 50% 125%;
      }

      100% {
        background-position: 50% -25%;
      }
    }

    /* Подсветка хода: статичный арт */
    .table-overlay .player.current-turn .player-panel::before {
      content: '';
      position: absolute;
      left: 78%;
      top: calc(100px * var(--ts, 1));
      width: calc(150px * var(--ts, 1));
      height: calc(250px * var(--ts, 1));
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 0;
      background: url('current-player.svg') center / contain no-repeat;
    }

    /*
     * Бегущая полоса только по форме SVG (шевроны): градиент + mask = тот же current-player.svg
     */
    .table-overlay .player.current-turn .player-panel::after {
      content: '';
      position: absolute;
      left: 78%;
      top: calc(100px * var(--ts, 1));
      width: calc(150px * var(--ts, 1));
      height: calc(250px * var(--ts, 1));
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 0;
      background-image: linear-gradient(
        to top,
        transparent 0%,
        rgba(255, 180, 255, 0) 38%,
        rgba(255, 248, 255, 0.78) 50%,
        rgba(200, 140, 255, 0) 62%,
        transparent 100%
      );
      background-size: 110% 200%;
      background-position: 50% 125%;
      background-repeat: no-repeat;
      -webkit-mask-image: url('current-player.svg');
      mask-image: url('current-player.svg');
      -webkit-mask-size: contain;
      mask-size: contain;
      -webkit-mask-position: center;
      mask-position: center;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      animation: current-player-sheen 2.35s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
    }

    @media (prefers-reduced-motion: reduce) {
      .table-overlay .player.current-turn .player-panel::after {
        animation: none;
        opacity: 0;
      }
    }

    /* Справа от центра стола — row-reverse [колонка | бейдж], центр подсветки смещён влево под аватар */
    .table-overlay .player.current-turn.player-top .player-panel::before,
    .table-overlay .player.current-turn.player-top-right .player-panel::before,
    .table-overlay .player.current-turn.player-bottom-right .player-panel::before,
    .table-overlay .player.current-turn.player-top .player-panel::after,
    .table-overlay .player.current-turn.player-top-right .player-panel::after,
    .table-overlay .player.current-turn.player-bottom-right .player-panel::after {
      left: 20%;
    }

    .player.current-turn .player-info {
      border-color: rgba(191, 79, 255, 0.78);
      box-shadow:
        0 0 calc(12px * var(--ts, 1)) rgba(191, 0, 255, 0.42),
        0 0 calc(24px * var(--ts, 1)) rgba(127, 4, 221, 0.32),
        inset 0 0 calc(10px * var(--ts, 1)) rgba(209, 10, 239, 0.1);
    }

    .player-info {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 10;
      width: calc(105px * var(--ts, 1));
      max-width: calc(105px * var(--ts, 1));
      background: linear-gradient(135deg, rgba(6, 10, 22, 0.88), rgba(10, 18, 34, 0.82));
      border: 1px solid rgba(47, 234, 255, 0.40);
      border-radius: calc(6px * var(--ts, 1));
      padding: calc(5px * var(--ts, 1)) calc(8px * var(--ts, 1));
      text-align: left;
      backdrop-filter: blur(calc(10px * var(--ts, 1)));
    }

    /* Герой (.active): яркий зелёный неон на блоке имени/стека */
    .player.active .player-info {
      border-color: rgba(57, 255, 20, 0.72);
      box-shadow:
        0 0 calc(10px * var(--ts, 1)) rgba(0, 255, 120, 0.45),
        0 0 calc(22px * var(--ts, 1)) rgba(0, 255, 80, 0.28),
        inset 0 0 calc(12px * var(--ts, 1)) rgba(0, 255, 102, 0.966);
    }

    /* Во время хода героя — рамка имени в фиолетовом неоне (как у остальных), зелёный остаётся у .active без хода */
    .player.active.current-turn .player-info {
      border-color: rgba(210, 120, 255, 0.9);
      box-shadow:
        0 0 calc(16px * var(--ts, 1)) rgba(191, 0, 255, 0.5),
        0 0 calc(32px * var(--ts, 1)) rgba(127, 4, 221, 0.38),
        inset 0 0 calc(12px * var(--ts, 1)) rgba(209, 10, 239, 0.14);
    }

    .player-name {
      font-family: var(--font-body);
      font-size: clamp(10px, calc(14px * var(--ts, 1)), 14px);
      color: cyan;
      line-height: 1.25;
    }

    .player.active .player-name {
      color: #8fff9a;
      text-shadow:
        0 0 calc(8px * var(--ts, 1)) rgba(57, 255, 20, 0.75),
        0 0 calc(16px * var(--ts, 1)) rgba(0, 255, 100, 0.35);
    }

    .player-stack {
      font-family: var(--font-mono);
      font-size: clamp(10px, calc(14px * var(--ts, 1)), 14px);
      font-weight: 700;
      color: #fff;
      line-height: 1.25;
    }

    .player-action {
      position: absolute;
      top: 0;
      right: 8%;
      z-index: 12;
      font-family: var(--font-body), system-ui, sans-serif;
      font-size: clamp(10px, calc(14px * var(--ts, 1)), 14px);
      font-weight: 700;
      padding: calc(2px * var(--ts, 1)) calc(9px * var(--ts, 1));
      min-width: calc(66px * var(--ts, 1));
      text-align: center;
      border-radius: calc(4px * var(--ts, 1));
      text-transform: uppercase;
      letter-spacing: 0.1em;
      border: 1px solid transparent;
      box-sizing: border-box;
      /* ожидание хода */
      background: rgba(22, 28, 38, 0.92);
      color: rgba(255, 255, 255, 0.45);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    }

    /* Места с row-reverse: вместо right: 8% (у края бейджа предмета) — по центру панели над аватаром */
    .table-overlay .player.player-top .player-action,
    .table-overlay .player.player-top-right .player-action,
    .table-overlay .player.player-bottom-right .player-action {
      right: auto;
      left: 8%;
    }

    .player-action.all-in {
      background: #ffe033;
      color: #0a0a0a;
      border-color: rgba(255, 200, 40, 0.6);
      box-shadow:
        0 0 12px rgba(255, 220, 60, 0.85),
        0 0 24px rgba(255, 200, 40, 0.45);
    }

    .player-action.raise {
      background: #00e676;
      color: #0a0a0a;
      border-color: rgba(0, 220, 120, 0.5);
      box-shadow:
        0 0 12px rgba(0, 255, 140, 0.75),
        0 0 22px rgba(0, 230, 120, 0.4);
    }

    /* Call / Check — как CALL на референсе */
    .player-action.call,
    .player-action.check {
      background: #26e0ff;
      color: #0a0a0a;
      border-color: rgba(0, 200, 240, 0.45);
      box-shadow:
        0 0 12px rgba(38, 224, 255, 0.8),
        0 0 22px rgba(0, 210, 255, 0.45);
    }

    .player-action.fold {
      background: #ff3b3b;
      color: #0a0a0a;
      border-color: rgba(255, 80, 80, 0.45);
      box-shadow:
        0 0 12px rgba(255, 70, 70, 0.8),
        0 0 22px rgba(255, 50, 50, 0.4);
    }

    /* Ожидание хода (между раздачами и до действия) */
    .player-action.waiting {
      background: rgba(16, 22, 32, 0.94);
      color: rgba(140, 190, 210, 0.88);
      border: 1px solid rgba(58, 232, 255, 0.28);
      box-shadow:
        0 0 10px rgba(0, 200, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
      font-weight: 700;
    }

    /* SB / BB — контур, как BB на референсе */
    .player-action.bb {
      background: rgba(12, 18, 28, 0.75);
      color: #3ae8ff;
      border: 1px solid rgba(58, 232, 255, 0.75);
      box-shadow:
        0 0 10px rgba(58, 232, 255, 0.45),
        0 0 20px rgba(0, 200, 255, 0.2);
    }

    /* Использование предмета — тот же бейдж, что и действие */
    .player-action.item-use {
      --item-use-shine-w: 55%;
      color: #fff;
      border: 1px solid rgba(255, 160, 255, 0.55);
      letter-spacing: 0.08em;
      min-width: calc(78px * var(--ts, 1));
      box-shadow:
        0 0 14px rgba(176, 38, 255, 0.65),
        0 0 26px rgba(176, 38, 255, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
      background-image:
        linear-gradient(
          100deg,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0) 38%,
          rgba(255, 255, 255, 0.92) 50%,
          rgba(255, 255, 255, 0) 62%,
          rgba(255, 255, 255, 0) 100%
        ),
        linear-gradient(180deg, #c44cff 0%, #8b1fd4 52%, #6a0cb8 100%);
      background-size: var(--item-use-shine-w) 100%, 100% 100%;
      background-position: -85% 0, 0 0;
      background-repeat: no-repeat;
      animation: player-action-item-use-shine 1.35s ease-in-out 2 forwards;
    }

    @keyframes player-action-item-use-shine {
      0% {
        background-position: -90% 0, 0 0;
      }

      100% {
        background-position: 190% 0, 0 0;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .player-action.item-use {
        animation: none;
        background-image: linear-gradient(180deg, #c44cff 0%, #8b1fd4 52%, #6a0cb8 100%);
        background-size: 100% 100%;
        background-position: 0 0;
      }
    }

    .player.current-turn .player-action {
      filter: brightness(1.06);
    }

    /* Кучка фишек + сумма под ней; смещение к центру стола — отдельно по месту */
    .player-bet-pile {
      position: absolute;
      display: none;
      flex-direction: column;
      align-items: center;
      width: max-content;
      min-width: calc(72px * var(--ts, 1));
      max-width: calc(120px * var(--ts, 1));
      z-index: 15;
      pointer-events: none;
      overflow: visible;
    }

    .player-bet-pile.visible {
      display: flex;
    }

    .player-bet-chips-inner {
      position: relative;
      width: calc(72px * var(--ts, 1));
      height: calc(52px * var(--ts, 1));
      flex-shrink: 0;
    }

    .player-bet-amount {
      transform: translateX(-10%);
      margin-top: calc(2px * var(--ts, 1));
      padding: 0 calc(4px * var(--ts, 1));
      font-family: var(--font-mono), ui-monospace, monospace;
      font-size: clamp(10px, calc(16px * var(--ts, 1)), 16px);
      font-weight: 700;
      line-height: 1.2;
      color: yellow;
      background: rgba(0, 0, 0, 0.60);
      text-align: center;
      white-space: nowrap;
      padding: calc(2px * var(--ts, 1)) calc(4px * var(--ts, 1));
      border-radius: calc(4px * var(--ts, 1));
    }

    /* Верхний левый — к центру вниз-вправо */
    .player-top-left .player-bet-pile {
      left: 80%;
      bottom: calc(-80px * var(--ts, 1));
      transform: translateX(-42%);
    }

    /* Верхний правый (место top-right) — к центру вниз-влево */
    .player-top-right .player-bet-pile {
      left: -10%;
      bottom: 0;
      transform: translateX(-70%);
    }

    /* Середина справа (3ч) — к центру влево */
    .player-top .player-bet-pile {
      left: 50%;
      bottom: calc(-80px * var(--ts, 1));
      transform: translateX(-50%);
    }

    /* Нижний правый — к центру влево-вверх */
    .player-bottom-right .player-bet-pile {
      left: 55%;
      top: -5%;
      transform: translateX(-55%);
    }

    /* Нижний левый — к центру вправо-вверх */
    .player-bottom-left .player-bet-pile {
      right: -50%;
      top: 50%;
      transform: translateX(-45%);
    }

    /* Середина слева (9ч), герой — к центру вправо */
    .player-bottom .player-bet-pile {
      left: 110%;
      top: -5%;
      transform: translateX(-40%);
    }

    .player-bet-chips-inner .player-bet-chip {
      position: absolute;
      width: calc(30px * var(--ts, 1));
      height: auto;
      transform-origin: 50% 50%;
      filter:
        drop-shadow(0 calc(2px * var(--ts, 1)) calc(6px * var(--ts, 1)) rgba(0, 0, 0, 0.55))
        drop-shadow(0 0 calc(8px * var(--ts, 1)) rgba(0, 240, 255, 0.12));
    }

    /*
     * Шесть мест вокруг овала: верхние углы, середины по бокам (3ч / 9ч), нижние углы.
     * player-top = середина справа, player-bottom = середина слева (герой).
     */
    .player-top {
      top: -5%;
      right: 30%;
      left: auto;
      bottom: auto;
      transform: translate(50%, -50%);
    }

    .player-bottom {
      top: 85%;
      left: 25%;
      right: auto;
      bottom: auto;
      transform: translate(-50%, -50%);
    }

    .player-top-left {
      top: -5%;
      left: 25%;
      transform: translate(-50%, -50%);
    }

    .player-bottom-left {
      top: 0%;
      left: 0%;
      transform: translate(-50%, 50%);
    }

    .player-top-right {
      top: 40%;
      right: 0%;
      transform: translate(50%, -50%);
    }

    .player-bottom-right {
      top: 47%;
      right: 30%;
      transform: translate(50%, 50%);
    }

    /* Карты по центру аватара (нижняя зона, как на макете) */
    .player-avatar .player-cards {
      position: absolute;
      left: 50%;
      bottom: calc(-15px * var(--ts, 1));
      transform: translateX(-50%);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 0;
      z-index: 4;
      width: max-content;
    }

    .player .player-cards .mini-card {
      transform-origin: 50% 100%;
      border-radius: calc(7px * var(--ts, 1));
    }

    .player .player-cards .mini-card:nth-child(1) {
      transform: rotate(-12deg);
      z-index: 1;
    }

    .player .player-cards .mini-card:nth-child(2) {
      transform: rotate(6deg);
      z-index: 2;
      margin-left: calc(-16px * var(--ts, 1));
    }

    /* Предмет у игрока: фаски, верх — иконка, низ — бирка (как HAND ANALYZER) */
    .player-skill-badge {
      transform: translate(15%, 53%);
      flex-shrink: 0;
      pointer-events: none;
      z-index: 2;
      filter: drop-shadow(0 calc(2px * var(--ts, 1)) calc(6px * var(--ts, 1)) rgba(0, 0, 0, 0.45));
    }

    .player-row--mirror .player-skill-badge {
      transform: translate(-15%, 50%);
    }

    .player-skill-badge__plate {
      display: flex;
      flex-direction: column;
      width: 100%;
      min-width: max-content;
      min-height: calc(92px * var(--ts, 1));
      overflow: hidden;
      clip-path: polygon(
        calc(10px * var(--ts, 1)) 0%,
        100% 0%,
        100% calc(100% - (10px * var(--ts, 1))),
        calc(100% - (10px * var(--ts, 1))) 100%,
        0% 100%,
        0% calc(10px * var(--ts, 1))
      );
      background: url('skill-plate.svg') center/100% no-repeat;
      transform: scale(0.8);
    }

    .table-overlay .player[data-shop-skill='flashbang'] .player-skill-badge__plate {
      background-image: url('skill-plate-flashbang.svg');
    }

    .table-overlay .player[data-shop-skill='emp'] .player-skill-badge__plate {
      background-image: url('skill-plate-emp.svg');
    }

    .table-overlay .player[data-shop-skill='mirror'] .player-skill-badge__plate {
      background-image: url('skill-plate-mirror.svg');
    }

    .table-overlay .player[data-shop-skill='neural-shield'] .player-skill-badge__plate {
      background-image: url('skill-plate-neural-shield.svg');
    }

    .table-overlay .player[data-shop-skill='terminal-hack'] .player-skill-badge__plate {
      background-image: url('skill-plate-terminal-hack.svg');
    }

    .table-overlay .player[data-shop-skill='ghost-scan'] .player-skill-badge__plate {
      background-image: url('skill-plate-ghost-scan.svg');
    }

    .table-overlay .player[data-shop-skill='flashbang'] .player-skill-badge__label {
      background: linear-gradient(180deg, #ff5cff 0%, #ff00e0 48%, #c800c8 100%);
    }

    .table-overlay .player[data-shop-skill='emp'] .player-skill-badge__label {
      background: linear-gradient(180deg, #ff6b6b 0%, #ff3131 48%, #c41e1e 100%);
    }

    .table-overlay .player[data-shop-skill='mirror'] .player-skill-badge__label {
      background: linear-gradient(180deg, #5cffb2 0%, #00ff85 48%, #00b86b 100%);
    }

    .table-overlay .player[data-shop-skill='neural-shield'] .player-skill-badge__label {
      background: linear-gradient(180deg, #ffff66 0%, #ffff00 48%, #c4c400 100%);
      color: #0a0a0c;
    }

    .table-overlay .player[data-shop-skill='terminal-hack'] .player-skill-badge__label,
    .table-overlay .player[data-shop-skill='ghost-scan'] .player-skill-badge__label {
      background: linear-gradient(180deg, #38ecff 0%, #00d1ff 48%, #00a8d4 100%);
    }

    .player-skill-badge__art {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: calc(58px * var(--ts, 1));
      padding: 0 calc(4px * var(--ts, 1));
    }

    .player-skill-badge__art .player-skill-img {
      width: 100%;
      max-height: calc(52px * var(--ts, 1));
      height: auto;
      object-fit: contain;
      display: block;
    }

    .player-skill-badge__label {
      flex-shrink: 0;
      font-family: var(--font-display), var(--font-body), system-ui, sans-serif;
      font-size: clamp(7px, calc(10px * var(--ts, 1)), 10px);
      font-weight: 700;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      text-align: center;
      color: #0a0a0c;
      padding: calc(2px * var(--ts, 1)) calc(10px * var(--ts, 1));
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(180deg, #38ecff 0%, #00c2e8 48%, #00a8d4 100%);
      box-sizing: border-box;
      white-space: nowrap;
    }

    .player-skill-badge.skill-item-used .player-skill-badge__plate {
      filter: grayscale(50%) brightness(0.68);
      transition: filter 0.4s ease;
    }

    .shop-card.skill-item-used {
      filter: grayscale(100%) brightness(0.68);
      transition: filter 0.4s ease;
    }

    .mini-card {
      width: 38px;
      height: 52px;
      background: url('card.jpg') center/140% no-repeat;
      border: 1px solid rgba(0, 240, 255, 0.3);
      border-radius: 4px;
      position: relative;
      /* Volume, Glow & Shadow */
      box-shadow:
        1px 1px 0px rgba(0, 240, 255, 0.2),
        2px 2px 0px rgba(0, 0, 0, 0.4),
        0 4px 15px rgba(0, 0, 0, 0.6),
        0 0 10px rgba(0, 240, 255, 0.1);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .table-overlay .mini-card {
      width: calc(38px * var(--ts, 1));
      height: calc(52px * var(--ts, 1));
      border-radius: calc(4px * var(--ts, 1));
      box-shadow:
        calc(1px * var(--ts, 1)) calc(1px * var(--ts, 1)) 0 rgba(0, 240, 255, 0.2),
        calc(2px * var(--ts, 1)) calc(2px * var(--ts, 1)) 0 rgba(0, 0, 0, 0.4),
        0 calc(4px * var(--ts, 1)) calc(15px * var(--ts, 1)) rgba(0, 0, 0, 0.6),
        0 0 calc(10px * var(--ts, 1)) rgba(0, 240, 255, 0.1);
    }

    /* Light Reflection Effect */
    .mini-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%, rgba(0, 0, 0, 0.1) 100%);
      pointer-events: none;
      z-index: 2;
    }

    /* Открытая карта — фон из PNG */
    .mini-card.face-up {
      border: 1px solid rgba(0, 240, 255, 0.35);
      font-size: 0;
      color: transparent;
      background-color: #0a1220;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    .mini-card.face-up::before {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, transparent 42%, rgba(0, 0, 0, 0.08) 100%);
    }

    /* ─── ACTION BAR ─── */
    .action-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 150px;
      background: linear-gradient(180deg, rgba(3, 7, 18, 0) 0%, rgba(3, 7, 18, 0.97) 30%);
      padding: 0 20px 16px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      gap: 8px;
      z-index: 20;
    }

    .raise-controls {
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: flex-end;
    }

    .raise-preset-group {
      display: flex;
      gap: 1px;
    }

    .raise-preset {
      padding: 6px 14px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.7);
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s;
      letter-spacing: 0.5px;
    }

    .raise-preset:first-child {
      border-radius: 6px 0 0 6px;
    }

    .raise-preset:last-child {
      border-radius: 0 6px 6px 0;
    }

    .raise-preset:hover {
      background: rgba(0, 240, 255, 0.1);
      border-color: rgba(0, 240, 255, 0.3);
      color: var(--neon-cyan);
    }

    .raise-slider-box {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 6px;
      padding: 4px 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 200px;
    }

    .raise-amount {
      background: rgba(255, 255, 255, 0.1);
      border: none;
      border-radius: 4px;
      color: #fff;
      font-family: var(--font-mono);
      font-size: 12px;
      padding: 4px 8px;
      width: 80px;
      text-align: center;
    }

    .neon-slider {
      flex: 1;
      -webkit-appearance: none;
      height: 4px;
      background: linear-gradient(90deg, var(--cyber-green), var(--neon-cyan) 60%, rgba(255, 255, 255, 0.2));
      border-radius: 2px;
      outline: none;
    }

    .neon-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: radial-gradient(circle, #fff 30%, var(--neon-cyan));
      cursor: pointer;
      box-shadow: 0 0 8px var(--neon-cyan), 0 0 16px rgba(0, 240, 255, 0.4);
      border: 2px solid rgba(0, 240, 255, 0.5);
    }

    .action-buttons {
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: flex-end;
    }

    .timebank-btn {
      padding: 0 16px;
      height: 48px;
      background: linear-gradient(180deg, #3e3f43, #28282c);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      color: rgba(255, 255, 255, 0.7);
      font-family: var(--font-body);
      font-size: 11px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1px;
      transition: all 0.2s;
    }

    .timebank-btn .tb-label {
      font-size: 9px;
      color: rgba(255, 255, 255, 0.5);
    }

    .timebank-btn .tb-time {
      font-size: 14px;
      color: #fff;
      font-weight: 700;
    }

    .action-btn {
      height: 48px;
      padding: 0 24px;
      border-radius: 8px;
      border: none;
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.2s;
      position: relative;
      overflow: hidden;
      min-width: 120px;
      justify-content: center;
    }

    .action-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 0.2s;
      background: rgba(255, 255, 255, 0.1);
    }

    .action-btn:hover::before {
      opacity: 1;
    }

    .btn-fold {
      background: linear-gradient(135deg, rgba(238, 49, 49, 0.3) 0%, rgba(120, 20, 20, 0.5) 100%);
      border: 1px solid rgba(238, 49, 49, 0.4);
      color: #fff;
    }

    .btn-fold:hover {
      border-color: rgba(238, 49, 49, 0.8);
      box-shadow: 0 0 15px rgba(238, 49, 49, 0.3);
    }

    .btn-call {
      background: linear-gradient(135deg, rgba(0, 137, 64, 0.4) 0%, rgba(0, 80, 40, 0.6) 100%);
      border: 1px solid rgba(0, 137, 64, 0.5);
      color: #fff;
    }

    .btn-call:hover {
      border-color: var(--cyber-green);
      box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
    }

    .btn-raise {
      background: linear-gradient(135deg, rgba(177, 122, 36, 0.5) 0%, rgba(120, 80, 20, 0.6) 100%);
      border: 1px solid rgba(177, 122, 36, 0.5);
      color: #fff;
    }

    .btn-raise:hover {
      border-color: var(--gold-bright);
      box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
    }

    /* Checkboxes */
    .checkboxes-panel {
      position: absolute;
      left: 20px;
      bottom: 80px;
      display: flex;
      flex-direction: column;
      gap: 0;
      z-index: 25;
    }

    .cyber-checkbox {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 0;
      cursor: pointer;
      font-family: var(--font-body);
      font-size: 12px;
      color: rgba(255, 255, 255, 0.6);
      transition: color 0.2s;
    }

    .cyber-checkbox:hover {
      color: rgba(255, 255, 255, 0.9);
    }

    .cb-box {
      width: 16px;
      height: 16px;
      border: 1.5px solid rgba(255, 255, 255, 0.35);
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.2s;
    }

    .cb-box.checked {
      background: #18a748;
      border-color: #18a748;
      box-shadow: 0 0 8px rgba(24, 167, 72, 0.5);
    }

    .cb-box.checked::after {
      content: '✓';
      color: #fff;
      font-size: 10px;
      font-weight: 700;
    }

    /* ─── AI CHAT SIDEBAR ─── */
    .ai-chat-sidebar {
      /* Эталон колонки 340px; сжатие при вьюпорте уже 1500px (как стол); --cs не больше 1 */
      --cw: min(340px, max(240px, calc(100vw * 340 / 1500)));
      --cs: min(1, calc(var(--cw) / 340px));
      width: var(--cw);
      min-width: 0;
      flex-shrink: 1;
      background: linear-gradient(180deg, #060c1c 0%, #08102a 100%);
      border: 1px solid var(--border);
      border-left: none;
      border-right: 1px solid var(--border);
      border-left: none;
      border-left: 1px solid var(--border);
      border-right: none;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
    }

    .ai-chat-sidebar::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 1px;
      height: 100%;
      background: linear-gradient(180deg, var(--neon-cyan), var(--neon-purple), transparent);
      opacity: 0.4;
    }

    /* AI Avatar Header */
    .chat-header {
      border-bottom: 1px solid rgba(0, 240, 255, 0.1);
      background: transparent;
      position: relative;
      display: grid;
      overflow: hidden;
    }

    /* Full background wrapper for the AI video */
    .chat-header-video-bg {
      grid-area: 1 / 1;
      width: 100%;
      z-index: 0;
      display: flex;
    }

    .chat-header-video-bg video {
      width: 100%;
      height: auto;
      object-fit: cover;
      opacity: 0.9;
      display: block;
    }

    .chat-header>* {
      z-index: 2;
      /* Keep content above background */
    }

    .chat-header::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
      opacity: 0.4;
      z-index: 3;
    }

    .ai-avatar-wrap {
      display: none;
      /* Hide the old small avatar wrapper since video fills the section */
    }

    .ai-info {
      flex: 1;
      position: relative;
      z-index: 2;
      margin-top: calc(50px * var(--cs, 1));
    }

    .ai-name {
      font-family: var(--font-display);
      font-size: clamp(11px, calc(13px * var(--cs, 1)), 13px);
      font-weight: 700;
      color: var(--neon-cyan);
      text-shadow: var(--neon-glow-cyan);
      letter-spacing: 1px;
    }

    .ai-subtitle {
      font-family: var(--font-mono);
      font-size: clamp(8px, calc(9px * var(--cs, 1)), 9px);
      color: rgba(0, 240, 255, 0.5);
      letter-spacing: 2px;
      margin-top: 2px;
    }

    .ai-stats {
      display: flex;
      gap: 12px;
      margin-top: 6px;
    }

    .ai-stat {
      display: flex;
      align-items: center;
      gap: calc(4px * var(--cs, 1));
      font-family: var(--font-mono);
      font-size: clamp(8px, calc(9px * var(--cs, 1)), 9px);
      color: rgba(255, 255, 255, 0.4);
    }

    .ai-stat-dot {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--cyber-green);
      box-shadow: 0 0 4px var(--cyber-green);
    }

    .chat-mode-toggle {
      display: flex;
      gap: 4px;
      flex-direction: column;
      align-items: flex-end;
    }

    .mode-label {
      font-family: var(--font-mono);
      font-size: 8px;
      color: rgba(0, 240, 255, 0.4);
      letter-spacing: 1px;
    }

    .mode-pills {
      display: flex;
      gap: 3px;
    }

    .mode-pill {
      padding: 3px 8px;
      border-radius: 12px;
      font-family: var(--font-mono);
      font-size: 8px;
      cursor: pointer;
      border: 1px solid rgba(0, 240, 255, 0.2);
      color: rgba(0, 240, 255, 0.4);
      transition: all 0.2s;
    }

    .mode-pill.active {
      background: rgba(0, 240, 255, 0.15);
      border-color: var(--neon-cyan);
      color: var(--neon-cyan);
    }

    /* Chat messages */
    .chat-messages {
      flex: 1;
      overflow-y: auto;
      padding: calc(16px * var(--cs, 1)) calc(14px * var(--cs, 1));
      display: flex;
      flex-direction: column;
      gap: calc(12px * var(--cs, 1));
      scrollbar-width: thin;
      scrollbar-color: rgba(0, 240, 255, 0.2) transparent;
    }

    .chat-messages::-webkit-scrollbar {
      width: 3px;
    }

    .chat-messages::-webkit-scrollbar-track {
      background: transparent;
    }

    .chat-messages::-webkit-scrollbar-thumb {
      background: rgba(0, 240, 255, 0.2);
      border-radius: 2px;
    }

    /* AI message bubble */
    .msg-ai {
      display: flex;
      gap: calc(8px * var(--cs, 1));
      align-items: flex-start;
    }

    .msg-ai-avatar {
      width: calc(28px * var(--cs, 1));
      height: calc(28px * var(--cs, 1));
      border-radius: calc(6px * var(--cs, 1));
      background: linear-gradient(135deg, #0a1628, #1a0a3a);
      border: 1px solid rgba(0, 240, 255, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: clamp(11px, calc(14px * var(--cs, 1)), 14px);
      flex-shrink: 0;
    }

    .msg-chat-avatar {
      width: calc(28px * var(--cs, 1));
      height: calc(28px * var(--cs, 1));
      border-radius: calc(6px * var(--cs, 1));
      object-fit: cover;
      border: 1px solid rgba(0, 240, 255, 0.35);
      flex-shrink: 0;
      background: #0a1628;
    }

    .msg-chat-avatar--user {
      border-color: rgba(191, 0, 255, 0.35);
    }

    .msg-ai-body {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: calc(4px * var(--cs, 1));
    }

    .msg-chat-header {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: calc(6px * var(--cs, 1));
      font-family: var(--font-mono);
      font-size: clamp(8px, calc(9px * var(--cs, 1)), 9px);
      letter-spacing: 0.06em;
    }

    .msg-chat-name {
      color: var(--neon-cyan);
      font-weight: 700;
      text-transform: uppercase;
    }

    .msg-chat-header .msg-tag {
      margin-bottom: 0;
    }

    .msg-user-body {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: calc(4px * var(--cs, 1));
      max-width: min(100%, calc(240px * var(--cs, 1)));
    }

    .msg-chat-header--user {
      width: 100%;
      justify-content: flex-end;
    }

    .msg-chat-name--user {
      color: rgba(220, 180, 255, 0.95);
    }

    .msg-bubble-ai {
      background: linear-gradient(135deg, rgba(0, 240, 255, 0.06), rgba(0, 240, 255, 0.02));
      border: 1px solid rgba(0, 240, 255, 0.15);
      border-radius: 0 calc(10px * var(--cs, 1)) calc(10px * var(--cs, 1)) calc(10px * var(--cs, 1));
      padding: calc(10px * var(--cs, 1)) calc(14px * var(--cs, 1));
      max-width: min(100%, calc(240px * var(--cs, 1)));
      position: relative;
    }

    .msg-bubble-ai::before {
      content: '';
      position: absolute;
      top: 0;
      left: -1px;
      width: 2px;
      height: 30px;
      background: linear-gradient(180deg, var(--neon-cyan), transparent);
    }

    .msg-tag {
      background: rgba(0, 240, 255, 0.1);
      border: 1px solid rgba(0, 240, 255, 0.2);
      border-radius: 2px;
      padding: 1px 4px;
      font-size: 7px;
      letter-spacing: 1px;
    }

    .msg-text {
      font-family: var(--font-body);
      font-size: clamp(11px, calc(13px * var(--cs, 1)), 13px);
      color: rgba(255, 255, 255, 0.85);
      line-height: 1.5;
    }

    .msg-highlight {
      color: var(--neon-cyan);
      font-weight: 600;
    }

    .msg-time {
      font-family: var(--font-mono);
      font-size: clamp(7px, calc(8px * var(--cs, 1)), 8px);
      color: rgba(255, 255, 255, 0.2);
      margin-top: 4px;
    }

    /* User message */
    .msg-user {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-end;
      gap: calc(8px * var(--cs, 1));
    }

    .msg-bubble-user {
      background: linear-gradient(135deg, rgba(191, 0, 255, 0.12), rgba(191, 0, 255, 0.06));
      border: 1px solid rgba(191, 0, 255, 0.2);
      border-radius: calc(10px * var(--cs, 1)) 0 calc(10px * var(--cs, 1)) calc(10px * var(--cs, 1));
      padding: calc(10px * var(--cs, 1)) calc(14px * var(--cs, 1));
      max-width: min(100%, calc(220px * var(--cs, 1)));
    }

    .msg-text-user {
      font-family: var(--font-body);
      font-size: clamp(11px, calc(13px * var(--cs, 1)), 13px);
      color: rgba(255, 255, 255, 0.85);
      line-height: 1.5;
    }

    /* AI thinking */
    .ai-thinking {
      display: flex;
      gap: calc(8px * var(--cs, 1));
      align-items: center;
      padding: 4px 0;
    }

    .thinking-dots {
      display: flex;
      gap: 4px;
      align-items: center;
    }

    .thinking-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--neon-cyan);
      animation: thinking 1.4s ease-in-out infinite;
    }

    .thinking-dot:nth-child(2) {
      animation-delay: 0.2s;
    }

    .thinking-dot:nth-child(3) {
      animation-delay: 0.4s;
    }

    @keyframes thinking {

      0%,
      60%,
      100% {
        opacity: 0.2;
        transform: scale(0.8);
      }

      30% {
        opacity: 1;
        transform: scale(1.2);
        box-shadow: 0 0 6px var(--neon-cyan);
      }
    }

    .thinking-label {
      font-family: var(--font-mono);
      font-size: 10px;
      color: rgba(0, 240, 255, 0.4);
      letter-spacing: 1px;
      animation: blink 1.5s step-end infinite;
    }

    @keyframes blink {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0.3;
      }
    }

    /* Analysis card */
    .analysis-card {
      background: rgba(0, 0, 0, 0.4);
      border: 1px solid rgba(0, 240, 255, 0.15);
      border-radius: calc(8px * var(--cs, 1));
      padding: calc(12px * var(--cs, 1));
      margin-top: calc(6px * var(--cs, 1));
    }

    .analysis-title {
      font-family: var(--font-mono);
      font-size: clamp(8px, calc(9px * var(--cs, 1)), 9px);
      color: var(--neon-cyan);
      letter-spacing: 2px;
      margin-bottom: calc(8px * var(--cs, 1));
      display: flex;
      align-items: center;
      gap: calc(6px * var(--cs, 1));
    }

    .analysis-title::before {
      content: '';
      width: calc(16px * var(--cs, 1));
      height: 1px;
      background: var(--neon-cyan);
      opacity: 0.5;
    }

    .analysis-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: calc(4px * var(--cs, 1)) 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      font-family: var(--font-body);
      font-size: clamp(10px, calc(12px * var(--cs, 1)), 12px);
    }

    .analysis-row:last-child {
      border-bottom: none;
    }

    .analysis-label {
      color: rgba(255, 255, 255, 0.4);
    }

    .analysis-value {
      font-family: var(--font-mono);
      font-size: clamp(9px, calc(11px * var(--cs, 1)), 11px);
      color: #fff;
    }

    .analysis-value.positive {
      color: var(--cyber-green);
    }

    .analysis-value.negative {
      color: var(--neon-pink);
    }

    .analysis-value.warning {
      color: var(--gold-bright);
    }

    .win-bar {
      height: 3px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 2px;
      margin-top: 6px;
      overflow: hidden;
    }

    .win-bar-fill {
      height: 100%;
      border-radius: 2px;
      background: linear-gradient(90deg, var(--cyber-green), var(--neon-cyan));
      box-shadow: 0 0 6px var(--cyber-green);
      transition: width 1s ease;
    }

    /* Quick actions */
    .quick-actions {
      display: flex;
      gap: calc(6px * var(--cs, 1));
      flex-wrap: wrap;
      margin-top: calc(8px * var(--cs, 1));
    }

    .quick-btn {
      padding: calc(4px * var(--cs, 1)) calc(10px * var(--cs, 1));
      background: rgba(0, 240, 255, 0.06);
      border: 1px solid rgba(0, 240, 255, 0.2);
      border-radius: calc(12px * var(--cs, 1));
      font-family: var(--font-mono);
      font-size: clamp(8px, calc(9px * var(--cs, 1)), 9px);
      color: rgba(0, 240, 255, 0.7);
      cursor: pointer;
      transition: all 0.2s;
      letter-spacing: 0.5px;
    }

    .quick-btn:hover {
      background: rgba(0, 240, 255, 0.12);
      color: var(--neon-cyan);
      box-shadow: 0 0 8px rgba(0, 240, 255, 0.2);
    }

    /* Chat input */
    .chat-input-area {
      padding: calc(14px * var(--cs, 1)) calc(16px * var(--cs, 1));
      border-top: 1px solid rgba(0, 240, 255, 0.1);
      background: rgba(0, 0, 0, 0.3);
      display: flex;
      flex-direction: column;
      gap: calc(10px * var(--cs, 1));
    }

    .chat-quick-pills {
      display: flex;
      gap: calc(6px * var(--cs, 1));
      overflow-x: auto;
      scrollbar-width: none;
      padding-bottom: 2px;
    }

    .chat-quick-pills::-webkit-scrollbar {
      display: none;
    }

    .quick-pill {
      padding: calc(4px * var(--cs, 1)) calc(12px * var(--cs, 1));
      border-radius: calc(12px * var(--cs, 1));
      background: rgba(191, 0, 255, 0.08);
      border: 1px solid rgba(191, 0, 255, 0.2);
      font-family: var(--font-mono);
      font-size: clamp(8px, calc(9px * var(--cs, 1)), 9px);
      color: rgba(191, 0, 255, 0.7);
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.2s;
      flex-shrink: 0;
    }

    .quick-pill:hover {
      background: rgba(191, 0, 255, 0.15);
      color: var(--neon-purple);
      box-shadow: 0 0 8px rgba(191, 0, 255, 0.2);
    }

    .input-row {
      display: flex;
      gap: calc(8px * var(--cs, 1));
      align-items: center;
    }

    .chat-input {
      flex: 1;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(0, 240, 255, 0.15);
      border-radius: calc(8px * var(--cs, 1));
      padding: calc(10px * var(--cs, 1)) calc(14px * var(--cs, 1));
      color: #e0e8ff;
      font-family: var(--font-body);
      font-size: clamp(11px, calc(13px * var(--cs, 1)), 13px);
      outline: none;
      transition: all 0.2s;
      caret-color: var(--neon-cyan);
    }

    .chat-input::placeholder {
      color: rgba(255, 255, 255, 0.2);
    }

    .chat-input:focus {
      border-color: rgba(0, 240, 255, 0.4);
      box-shadow: 0 0 12px rgba(0, 240, 255, 0.1), inset 0 0 8px rgba(0, 240, 255, 0.03);
    }

    .send-btn {
      width: calc(38px * var(--cs, 1));
      height: calc(38px * var(--cs, 1));
      background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(0, 240, 255, 0.1));
      border: 1px solid rgba(0, 240, 255, 0.4);
      border-radius: calc(8px * var(--cs, 1));
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s;
      font-size: clamp(12px, calc(16px * var(--cs, 1)), 16px);
      color: var(--neon-cyan);
      flex-shrink: 0;
    }

    .send-btn:hover {
      background: rgba(0, 240, 255, 0.25);
      box-shadow: var(--neon-glow-cyan);
    }

    /* Divider between table and sidebar */
    .cyber-divider {
      width: 1px;
      background: linear-gradient(180deg,
          transparent 0%,
          rgba(0, 240, 255, 0.4) 20%,
          rgba(191, 0, 255, 0.4) 50%,
          rgba(0, 240, 255, 0.4) 80%,
          transparent 100%);
      position: relative;
      flex-shrink: 0;
    }

    @media (max-width: 1100px) {
      .poker-room-layout {
        flex-direction: column;
        align-items: stretch;
        height: auto;
        min-height: 0;
        padding: 0 clamp(12px, 4vw, 28px) clamp(24px, 5vw, 48px);
      }

      .ai-chat-sidebar {
        width: 100%;
        max-width: min(560px, 100%);
        margin-inline: auto;
        --cw: min(560px, calc(100vw - 32px));
        --cs: min(1, calc(var(--cw) / 340px));
        min-height: 320px;
        max-height: 480px;
      }

      .cyber-divider {
        width: 100%;
        height: 1px;
        min-height: 1px;
        background: linear-gradient(90deg,
            transparent 0%,
            rgba(0, 240, 255, 0.35) 20%,
            rgba(191, 0, 255, 0.35) 50%,
            rgba(0, 240, 255, 0.35) 80%,
            transparent 100%);
      }

      .poker-table-container {
        flex: 1;
        min-height: 520px;
      }
    }

    /* ─── DECORATIVE CORNERS ─── */
    .corner-accent {
      position: absolute;
      width: 20px;
      height: 20px;
      border-color: var(--neon-cyan);
      border-style: solid;
      border-width: 0;
    }

    .corner-tl {
      top: 0;
      left: 0;
      border-top-width: 2px;
      border-left-width: 2px;
    }

    .corner-tr {
      top: 0;
      right: 0;
      border-top-width: 2px;
      border-right-width: 2px;
    }

    .corner-bl {
      bottom: 0;
      left: 0;
      border-bottom-width: 2px;
      border-left-width: 2px;
    }

    .corner-br {
      bottom: 0;
      right: 0;
      border-bottom-width: 2px;
      border-right-width: 2px;
    }

    /* ─── BOTTOM INFO BAR ─── */
    .bottom-left-controls {
      position: absolute;
      left: 20px;
      bottom: 16px;
      display: flex;
      gap: 8px;
      align-items: center;
      z-index: 25;
    }

    .emotion-btn {
      width: 46px;
      height: 46px;
      background: linear-gradient(180deg, #3e3f43, #28282c);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 22px;
      transition: all 0.2s;
      box-shadow: inset 0 0 3px 1px rgba(255, 255, 255, 0.06);
    }

    .emotion-btn:hover {
      border-color: var(--neon-cyan);
      box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
      transform: scale(1.05);
    }

    /* ─── ANIMATIONS ─── */
    @keyframes scan-line {
      0% {
        top: -2px;
      }

      100% {
        top: 100%;
      }
    }

    .scan-line {
      position: absolute;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.15), transparent);
      animation: scan-line 8s linear infinite;
      pointer-events: none;
      z-index: 30;
    }

    /* Glitch effect on title */
    @keyframes glitch {

      0%,
      92%,
      100% {
        clip-path: none;
        transform: none;
      }

      93% {
        clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%);
        transform: translateX(3px);
      }

      94% {
        clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%);
        transform: translateX(-3px);
      }

      95% {
        clip-path: none;
        transform: none;
      }
    }

    .section-title {
      animation: glitch 8s ease-in-out infinite;
    }

    /* Floating particles */
    .particle {
      position: absolute;
      width: 2px;
      height: 2px;
      background: var(--neon-cyan);
      border-radius: 50%;
      box-shadow: 0 0 4px var(--neon-cyan);
      animation: float-particle linear infinite;
      pointer-events: none;
      opacity: 0;
    }

    @keyframes float-particle {
      0% {
        opacity: 0;
        transform: translateY(0) scale(0);
      }

      10% {
        opacity: 0.8;
        transform: translateY(-20px) scale(1);
      }

      90% {
        opacity: 0.3;
      }

      100% {
        opacity: 0;
        transform: translateY(-120px) scale(0.5);
      }
    }

    /* ─── ITEM SHOP STYLES ─── */
    .shop-hud {
      display: inline-flex;
      align-items: center;
      gap: 30px;
      padding: 10px 25px;
      background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 20, 40, 0.8));
      border: 1px solid var(--neon-cyan);
      border-radius: 8px;
      box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);
      margin-bottom: 10px;
      font-family: var(--font-mono);
      font-size: 1.2rem;
      color: #fff;
    }

    .hud-val {
      color: var(--neon-cyan);
      font-weight: bold;
    }

    .hud-val.error {
      color: #ff3b3b;
      animation: shake 0.3s;
    }

    @keyframes shake {

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

      25% {
        transform: translateX(-5px);
      }

      75% {
        transform: translateX(5px);
      }
    }

    /* 2 columns layout */
    .shop-layout {
      display: flex;
      padding-bottom: 20px;
      gap: 30px;
      align-items: flex-start;
      margin-top: 5px;
      position: relative;
    }

    .shop-side-avatar {
      flex: 0 0 350px;
      position: relative;
      border-radius: 12px;
      border: 1px solid rgba(255, 45, 120, 0.3);
      overflow: hidden;
      box-shadow: 0 0 30px rgba(255, 45, 120, 0.2);
    }

    .shop-side-avatar video {
      width: 100%;
      height: 600px;
      object-fit: cover;
      display: block;
    }

    /* Киберпанк-лоадер при загрузке превью в магазине */
    .shop-video-loader {
      position: absolute;
      inset: 0;
      z-index: 4;
      pointer-events: none;
      overflow: hidden;
      background: #050a14;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.4s ease, visibility 0.4s;
    }

    .shop-video-loader.shop-video-loader--visible {
      opacity: 1;
      visibility: visible;
    }

    .shop-side-avatar--video-loading video {
      filter: blur(0.5px);
    }

    .shop-video-loader__bloom {
      position: absolute;
      inset: -12%;
      filter: blur(10px);
      transform-origin: 50% 60%;
      animation: shopLoaderBloomPulse 2.6s ease-in-out infinite;
    }

    .shop-video-loader__scan {
      position: absolute;
      inset: 0;
      background:
        repeating-linear-gradient(
          to bottom,
          transparent 0 2px,
          rgba(0, 0, 0, 0.4) 2px 3px
        ),
        repeating-linear-gradient(
          to bottom,
          transparent 0 18px,
          rgba(0, 242, 255, 0.12) 18px 19px,
          transparent 19px 36px
        );
      opacity: 0.92;
      animation: shopLoaderScanDrift 5.5s linear infinite;
    }

    /* Полосы, непрерывно уходящие снизу вверх (доп. к сканлайнам) */
    .shop-video-loader__streaks {
      position: absolute;
      inset: 0;
      z-index: 2;
      overflow: hidden;
      pointer-events: none;
    }

    .shop-video-loader__streaks::before,
    .shop-video-loader__streaks::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      width: 100%;
      height: 200%;
      will-change: transform;
    }

    .shop-video-loader__streaks::before {
      background: repeating-linear-gradient(
        to bottom,
        transparent 0 4px,
        rgba(0, 242, 255, 0) 4px 6px,
        rgba(0, 242, 255, 0.24) 6px 7px,
        rgba(0, 242, 255, 0.06) 7px 8px,
        transparent 8px 20px
      );
      background-size: 100% 20px;
      opacity: 0.8;
      animation: shopLoaderScanDrift2 5.5s linear infinite;
    }

    @keyframes shopLoaderScanDrift {
      0% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(24px);
      }
      100% {
        transform: translateY(0);
      }
    }

    @keyframes shopLoaderScanDrift2 {
      0% {
        transform: translateY(24px);
      }
      50% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(24px);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .shop-video-loader__bloom,
      .shop-video-loader__scan,
      .shop-video-loader__streaks::before,
      .shop-video-loader__streaks::after,
      .shop-video-loader__glow,
      .shop-video-loader__frame {
        animation: none;
      }
    }

    .error-sticker {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
      background: #ff3b3b;
      color: #fff;
      font-family: var(--font-header);
      font-size: 2rem;
      padding: 10px 20px;
      border-radius: 8px;
      box-shadow: 0 0 30px #ff3b3b;
      text-transform: uppercase;
      opacity: 0;
      transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      z-index: 10;
    }

    .error-sticker.show {
      transform: translate(-50%, -50%) scale(1) rotate(-10deg);
      opacity: 1;
    }

    .shop-catalog {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .shop-category {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .category-title {
      font-family: var(--font-header);
      font-size: 1rem;
      color: rgba(255, 255, 255, 0.6);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin: 0 0 5px 0;
    }

    .shop-category-row {
      display: flex;
      overflow-x: auto;
      gap: 12px;
      padding-bottom: 5px;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      /* Hide scrollbar for aesthetics */
    }

    .shop-category-row::-webkit-scrollbar {
      display: none;
    }

    .shop-card {
      max-width: 230px;
      background: linear-gradient(135deg, rgba(8, 15, 30, 0.95), rgba(10, 22, 40, 0.9));
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 12px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      transition: all 0.3s ease;
      cursor: pointer;
      position: relative;
      scroll-snap-align: start;
    }

    .shop-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
      border-color: rgba(255, 255, 255, 0.12);
    }

    .shop-card.selected {
      transform: translateY(-3px);
      box-shadow:
        inset 0 0 0 2px rgba(157, 50, 255, 0.45),
        inset 0 0 28px rgba(157, 50, 255, 0.14),
        inset 0 0 56px rgba(0, 0, 0, 0.35),
        0 8px 24px rgba(0, 0, 0, 0.45),
        0 0 22px rgba(157, 50, 255, 0.4),
        0 0 40px rgba(120, 60, 220, 0.22);
      border-color: rgba(180, 120, 255, 0.35);
    }

    .shop-item-wrapper {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 8px;
      position: relative;
    }

    .shop-item-img {
      width: 100%;
      height: 100px;
      border-radius: 6px;
      object-fit: cover;
      overflow: hidden;
      order: 2;
    }

    .shop-item-text {
      display: flex;
      flex-direction: column;
      gap: 4px;
      order: 1;
      max-height: 26px;
    }

    .shop-cost {
      display: flex;
      justify-content: space-between;
      margin-top: auto;
      padding-top: 8px;
      border-top: 1px dashed rgba(255, 255, 255, 0.1);
      font-family: var(--font-mono);
      font-size: 0.75rem;
      color: rgba(255, 255, 255, 0.8);
    }

    .shop-badge {
      align-self: flex-start;
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      padding: 3px 8px;
      border-radius: 4px;
      box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    }

    .shop-badge.passive {
      background: rgba(0, 255, 136, 0.1);
      color: #00ff88;
      border: 1px solid rgba(0, 255, 136, 0.3);
    }

    .shop-badge.active {
      background: rgba(255, 0, 127, 0.1);
      color: #ff007f;
      border: 1px solid rgba(255, 0, 127, 0.3);
    }

    .shop-badge.reaction {
      background: rgba(255, 153, 0, 0.1);
      color: #ff9900;
      border: 1px solid rgba(255, 153, 0, 0.3);
    }

    .shop-badge.risk {
      background: rgba(255, 59, 59, 0.1);
      color: #ff3b3b;
      border: 1px solid rgba(255, 59, 59, 0.3);
    }

    .shop-badge.meta {
      background: rgba(180, 79, 255, 0.1);
      color: #b44fff;
      border: 1px solid rgba(180, 79, 255, 0.3);
    }

    .shop-badge.info {
      background: rgba(0, 212, 255, 0.1);
      color: #00d4ff;
      border: 1px solid rgba(0, 212, 255, 0.3);
    }

    .shop-card h3 {
      font-family: var(--font-header);
      font-size: 1rem;
      color: #fff;
      margin: 0;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }

    .shop-card p {
      color: rgba(255, 255, 255, 0.7);
      font-family: var(--font-body);
      font-size: 0.75rem;
      line-height: 1.2;
      margin: 0 0 8px 0;
    }

    /* ================= CHARACTER PROGRESS SECTION ================= */
    .char-progress {
      --char-bg: #0a0614;
      --char-panel: #120a1c;
      --char-purple: rgba(140, 80, 200, 0.35);
      position: relative;
      z-index: 2;
      background: var(--char-bg);
      padding: 48px 0 56px;
    }

    .char-progress__header {
      max-width: 1280px;
      margin: 0 auto 28px;
      padding: 0 44px 8px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 20px 40px;
    }

    .char-progress__header-brand {
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-width: 0;
    }

    .char-progress__eyebrow {
      font-family: var(--font-body);
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0.22em;
      color: var(--neon-cyan);
      text-transform: uppercase;
    }

    .char-progress__title {
      margin: 0;
      font-family: var(--font-heading);
      font-size: clamp(1.75rem, 4vw, 48px);
      font-weight: 900;
      letter-spacing: 0.04em;
      line-height: 1.05;
      color: #fff;
    }

    .char-progress__title em {
      font-style: normal;
      color: var(--gold);
    }

    .char-progress__header-aside {
      display: flex;
      align-items: center;
      flex: 0 1 auto;
      min-width: 0;
    }

    .char-progress__intro {
      margin: 0;
      max-width: 380px;
      font-family: var(--font-body);
      font-size: 15px;
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.5);
      text-align: right;
    }

    .char-progress__inner {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 44px;
      display: grid;
      grid-template-columns: 403px 1fr;
      gap: 28px;
      align-items: stretch;
    }

    /* --- Left: Roster --- */
    .char-progress__roster {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .char-roster-card {
      display: block;
      width: 320px;
      height: 128px;
      margin: 0;
      padding: 0;
      border: none;
      cursor: pointer;
      font: inherit;
      color: inherit;
      background: transparent;
      text-align: left;
      transition: transform 0.2s ease, box-shadow 0.25s ease;
    }

    .char-roster-card__body {
      width: 100%;
      height: 100%;
      --roster-edge: rgba(167, 110, 220, 0.92);
      --roster-stroke: 2px;
      --roster-chamfer: 12px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: stretch;
      justify-content: space-between;
      gap: 14px;
      min-height: 72px;
      padding: 14px 16px 14px 18px;
      background: #1C0F3F;
      border: none;
      isolation: isolate;
      /* Скосы: верхний правый и нижний левый */
      clip-path: polygon(
        0 0,
        calc(100% - var(--roster-chamfer)) 0,
        100% var(--roster-chamfer),
        100% 100%,
        var(--roster-chamfer) 100%,
        0 calc(100% - var(--roster-chamfer))
      );
    }

    .char-roster-card__body > * {
      position: relative;
      z-index: 2;
    }

    .char-roster-card__body::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      clip-path: polygon(
        0 0,
        calc(100% - var(--roster-chamfer)) 0,
        100% var(--roster-chamfer),
        100% 100%,
        var(--roster-chamfer) 100%,
        0 calc(100% - var(--roster-chamfer))
      );
      background: var(--roster-edge);
    }

    .char-roster-card__body::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      clip-path: polygon(
        var(--roster-stroke) var(--roster-stroke),
        calc(100% - var(--roster-chamfer) - var(--roster-stroke)) var(--roster-stroke),
        calc(100% - var(--roster-stroke)) calc(var(--roster-chamfer) + var(--roster-stroke)),
        calc(100% - var(--roster-stroke)) calc(100% - var(--roster-stroke)),
        calc(var(--roster-chamfer) + var(--roster-stroke)) calc(100% - var(--roster-stroke)),
        var(--roster-stroke) calc(100% - var(--roster-chamfer) - var(--roster-stroke))
      );
      background: linear-gradient(135deg, #1a0f28 0%, #12081c 100%);
    }

    .char-roster-card__text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 4px;
      min-width: 0;
    }

    .char-roster-card__id {
      font-family: var(--font-heading);
      font-size: 24px;
      font-weight: 700;
      letter-spacing: 0.12em;
      color: #fff;
    }

    .char-roster-card__meta {
      font-family: var(--font-body);
      font-size: 20px;
      font-weight: 500;
      color: cyan;
    }

    .char-roster-card__meta--locked {
      color: rgba(255, 255, 255, 0.35);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-size: 0.72rem;
    }

    .char-roster-card__portrait {
      position: absolute;
      right: 2%;
      bottom: 0;
      width: 128px;
      height: 128px;
      flex-shrink: 0;
      overflow: hidden;
      background: none;
    }

    .char-roster-card__portrait .char-roster-card__avatar {
      position: absolute;
      inset: 0;
      z-index: 2;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .char-roster-card--active .char-roster-card__portrait {
      --portrait-edge: #8F45E9;
      width: 165px;
      height: 165px;
      overflow: visible;
    }

    .char-roster-card--active .char-roster-card__portrait::before {
      content: '';
      position: absolute;
      inset: -18%;
      z-index: 0;
      pointer-events: none;
      /* Подсветка за головой и плечами, как на референсе */
      background:
        radial-gradient(
          ellipse 55% 48% at 52% 32%,
          rgba(255, 200, 255, 0.95) 0%,
          rgba(230, 140, 255, 0.65) 28%,
          rgba(190, 90, 255, 0.35) 52%,
          transparent 72%
        ),
    }

    .char-roster-card__avatar {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .char-roster-card__lock {
      position: absolute;
      inset: 0;
      z-index: 3;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .char-roster-card__lock img {
      width: 156px;
      height: auto;
      display: block;
      filter: drop-shadow(0 0 8px rgba(255, 28, 206, 0.5));
    }

    .char-roster-card--active {
      width: 403px;
      height: 165px;
      flex-shrink: 0;
    }

    .char-roster-card--active .char-roster-card__body {
      --roster-edge: #8F15E9;
    }

    .char-roster-card--active .char-roster-card__body::after {
      background:
        radial-gradient(
          ellipse 78% 120% at 76% 48%,
          rgba(210, 120, 255, 0.42) 0%,
          rgba(160, 80, 230, 0.2) 38%,
          transparent 62%
        ),
        radial-gradient(
          ellipse 55% 90% at 82% 52%,
          rgba(190, 100, 255, 0.28) 0%,
          transparent 55%
        ),
        linear-gradient(100deg, #141028 0%, #0f0a18 42%, #120a1e 100%);
    }

    .char-roster-card:not(.char-roster-card--locked):not(.char-roster-card--active):hover .char-roster-card__body {
      --roster-edge: rgba(0, 245, 255, 0.55);
    }

    .char-roster-card--locked {
      opacity: 0.72;
      cursor: not-allowed;
    }

    .char-roster-card--locked .char-roster-card__body {
      --roster-edge: rgba(210, 120, 255, 0.22);
    }

    .char-roster-card--locked .char-roster-card__avatar {
      filter: grayscale(0.65) brightness(0.55);
    }

    /* --- Right: Main --- */
    .char-progress__main {
      display: flex;
      flex-direction: column;
      gap: 18px;
      min-width: 0;
      min-height: 0;
      height: 100%;
      align-self: stretch;
    }

    .char-progress__topbar {
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
      padding: 20px 0 18px;
      box-shadow: 0 0 24px rgba(0, 0, 0, 0.45);
    }

    .char-progress__topbar-row {
      display: flex;
      align-items: flex-start;
      gap: 20px;
    }

    .char-progress__topbar-main {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding-top: 4px;
    }

    .char-progress__topbar-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }

    .char-progress__level-badge {
      --level-badge-chamfer: 8px;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: start;
      min-width: 124px;
      height: 124px;
      padding: 8px 10px;
      background: #f5f5f5;
      color: #0a0614;
      clip-path: polygon(
        0 0,
        calc(100% - var(--level-badge-chamfer)) 0,
        100% var(--level-badge-chamfer),
        100% 100%,
        var(--level-badge-chamfer) 100%,
        0 calc(100% - var(--level-badge-chamfer))
      );
      filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
    }

    .char-progress__level-badge-label {
      font-family: var(--font-body);
      font-size: 18px;
      font-weight: 900;
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }

    .char-progress__level-badge-num {
      font-family: var(--font-heading);
      font-size: 72px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: 0.04em;
    }

    .char-progress__neural-title {
      margin: 0;
      width: 100%;
      font-family: var(--font-heading);
      font-size: 48px;
      font-weight: 800;
      letter-spacing: 0.06em;
      color: #fff;
      text-transform: capitalize;
      text-align: left;
      line-height: 1.15;
    }

    .char-progress__buy-link {
      flex-shrink: 0;
      font-size: 20px;
      font-weight: 800;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      color: #ff3dcb;
      text-decoration: underline;
      text-underline-offset: 3px;
      text-shadow: 0 0 24px rgba(255, 61, 203, 0.85);
      transition: color 0.2s ease, filter 0.2s ease;
    }

    .char-progress__buy-link:hover {
      color: #ff7ee8;
      filter: brightness(1.1);
    }

    .char-progress__bar-track {
      --bar-slant: 12px;
      width: 100%;
      height: 16px;
      background: rgba(40, 40, 52, 0.95);
      border-radius: 0;
      overflow: hidden;
      box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.55);
      clip-path: polygon(0 0, 100% 0, calc(100% - var(--bar-slant)) 100%, 0 100%);
    }

    .char-progress__bar-fill {
      height: 100%;
      width: 0%;
      min-width: 0;
      background: var(--neon-cyan);
      transition: width 0.5s ease;
      box-shadow: 0 0 14px rgba(0, 245, 255, 0.65);
      clip-path: polygon(0 0, 100% 0, calc(100% - var(--bar-slant)) 100%, 0 100%);
    }

    .char-progress__hands-line {
      margin: 0;
      font-size: 20px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.88);
      flex: 1;
      min-width: 0;
    }

    /* --- Slider --- */
    .char-progress__slider-area {
      position: relative;
      overflow: hidden;
      min-height: 0;
      display: flex;
      flex-direction: column;
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
    }

    .char-progress__slides {
      display: flex;
      width: 400%;
      flex: 1 1 auto;
      min-height: 0;
      align-items: stretch;
      transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .char-level-slide {
      display: grid;
      grid-template-columns: minmax(200px, 295px) 1fr;
      gap: 24px;
      min-height: 360px;
      height: 100%;
      width: 25%;
      flex-shrink: 0;
      box-sizing: border-box;
    }

    .char-level-slide__video {
      position: relative;
      overflow: hidden;
      border: 0.59px solid rgba(179, 9, 195, 0.00);
      width: 295px;
      max-height: 496px;
      box-sizing: border-box;
    }

    .char-level-slide__video-media {
      width: 100%;
      height: 100%;
      min-height: 280px;
      overflow: hidden;
    }

    .char-level-slide__video-media video {
      width: 100%;
      height: 100%;
      min-height: 280px;
      object-fit: cover;
      display: block;
    }

    .char-level-slide__video-lock {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 8px;
      background: transparent;
      box-sizing: border-box;
      pointer-events: none;
    }

    .char-level-slide__video--locked .char-level-slide__video-lock {
      display: flex;
    }

    .char-level-slide__video-lock img {
      width: 196px;
      height: auto;
      display: block;
      flex-shrink: 0;
      filter:
        drop-shadow(0 0 10px rgba(255, 45, 180, 0.75))
        drop-shadow(0 0 22px rgba(200, 60, 220, 0.45));
    }

    .char-level-slide__video-lock-label {
      font-family: var(--font-body);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #fff;
      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
    }

    .char-level-slide__video--locked {
      border: 1px solid rgba(180, 90, 210, 0.55);
      box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.35),
        0 0 14px rgba(140, 60, 180, 0.2);
    }

    .char-level-slide__info {
      --info-accent: var(--neon-cyan);
      --stat-green: #2ee59a;
      --stat-green-bright: #5cffb0;
      margin-left: 2px;
      display: flex;
      flex-direction: column;
      justify-content: start;
      overflow-y: auto;
      gap: 0;
    }

    .char-level-slide__energy {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 10px 16px;
      margin-bottom: 32px;
      border-top: 2px solid rgba(0, 255, 255, 0.72);
      border-bottom: 2px solid rgba(0, 255, 255, 0.72);
    }

    .char-level-slide__energy-label {
      font-family: var(--font-heading);
      font-size: 16px;
      font-weight: 800;
      letter-spacing: 0.22em;
      color: cyan;
      text-transform: uppercase;
      flex-shrink: 0;
      text-shadow: 0 0 12px rgba(0, 245, 255, 0.35);
    }

    .char-level-slide__energy-track {
      display: flex;
      gap: 5px;
      flex: 1;
      max-width: 280px;
      justify-content: flex-end;
    }

    .char-level-slide__energy-seg {
      height: 24px;
      width: 12px;
      min-height: 12px;
      border-radius: 2px;
      box-sizing: border-box;
      border: 1px solid rgba(0, 245, 255, 0.38);
      background: rgba(8, 18, 28, 0.75);
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.25);
      transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .char-level-slide__energy-seg--on {
      border-color: rgba(110, 251, 245, 0.65);
      background: linear-gradient(180deg, #6efbf5, #1ab9c2);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    .char-level-slide__title {
      font-family: var(--font-heading);
      font-size: 24px;
      font-weight: 800;
      color: #fff;
      margin: 0 0 16px;
      letter-spacing: 0.04em;
      line-height: 1.2;
    }

    .char-level-slide__desc {
      font-family: var(--font-body);
      font-size: 16px;
      color: rgba(200, 205, 220, 0.72);
      line-height: 1.55;
      margin: 0 0 24px;
      max-width: 42em;
    }

    .char-level-slide__stats {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-bottom: 22px;
    }

    .char-level-slide__stat {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 6px;
    }

    .char-level-slide__stat-label {
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0.12em;
      color: #fff;
      text-transform: uppercase;
    }

    .char-level-slide__stat-track {
      --stat-slant: 11px;
      position: relative;
      height: 11px;
      width: 100%;
      background: rgba(38, 42, 54, 0.98);
      overflow: hidden;
      box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.55);
      clip-path: polygon(0 0, 100% 0, calc(100% - var(--stat-slant)) 100%, 0 100%);
    }

    .char-level-slide__stat-fill {
      height: 100%;
      width: 0%;
      min-width: 0;
      background: linear-gradient(90deg, #1bb86e 0%, var(--stat-green) 40%, var(--stat-green-bright) 100%);
      box-shadow: 0 0 12px rgba(46, 229, 154, 0.45);
      transition: width 0.4s ease;
      clip-path: polygon(0 0, 100% 0, calc(100% - var(--stat-slant)) 100%, 0 100%);
    }

    .char-level-slide__perks-title {
      font-family: var(--font-heading);
      font-size: 24px;
      font-weight: 700;
      white-space: nowrap;
      color: var(--neon-cyan);
      margin: 0 0 12px;
      text-transform: uppercase;
      text-shadow: 0 0 12px rgba(0, 245, 255, 0.3);
    }

    .char-level-slide__perks {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .char-level-slide__perks li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-family: var(--font-body);
      font-size: 0.9rem;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.92);
      line-height: 1.35;
    }

    .char-level-slide__perks li::before {
      content: '';
      flex-shrink: 0;
      margin-top: 0.2em;
      width: 16px;
      height: 16px;
      background: url('arrow.svg') center / contain no-repeat;
      filter: drop-shadow(0 0 4px rgba(0, 245, 255, 0.45));
    }

    /* --- Level tabs --- */
    .char-progress__level-tabs {
      display: flex;
      width: 100%;
      flex-shrink: 0;
      gap: 0;
      padding: 0;
      margin:  24px 0  0;
      background: rgba(0, 0, 0, 0.35);
      border-top: 1px solid rgba(0, 245, 255, 0.08);
    }

    .char-level-tab {
      flex: 1;
      position: relative;
      margin: 0;
      padding: 4px 8px;
      border: none;
      cursor: pointer;
      font: inherit;
      background: #151018;
      color: rgba(255, 255, 255, 0.38);
      clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
      margin-left: -12px;
      transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }

    .char-level-tab:first-child {
      margin-left: 0;
      clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
    }

    .char-level-tab span {
      display: block;
      font-family: var(--font-heading);
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      transform: skewX(-8deg);
    }

    .char-level-tab:hover:not(.char-level-tab--active) {
      color: rgba(255, 255, 255, 0.55);
      background: #1c1424;
    }

    .char-level-tab--active {
      background: #f2f2f2;
      color: #0a0614;
      z-index: 2;
      box-shadow: 0 -4px 20px rgba(0, 245, 255, 0.12);
    }

    .char-level-tab--active span {
      transform: skewX(-8deg);
    }

    .char-level-tab:focus-visible {
      outline: 2px solid var(--neon-cyan);
      outline-offset: -2px;
    }

    /* --- Play CTA --- */
    .char-progress__play-wrap {
      margin-top: auto;
      display: flex;
      justify-content: center;
    }

    .char-progress__play-btn {
      display: block;
      width: 100%;
      max-width: max-content;
      margin: 0;
      padding: 0;
      cursor: pointer;
      border: none;
      background: transparent;
      font: inherit;
      transition: filter 0.15s ease;
      text-decoration: none;
    }

    .char-progress__play-btn__inner {
      display: flex;
      align-items: stretch;
      justify-content: space-between;
      min-height: 52px;
      max-width: max-content;
      transform: skewX(-15deg);
      background: linear-gradient(90deg, #00ffff 0%, #00c8e8 35%, #d020ff 72%, #ff2d78 100%);
      box-shadow:
        0 0 22px rgba(0, 255, 255, 0.35),
        0 0 32px rgba(255, 45, 120, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
      transition: filter 0.15s ease, box-shadow 0.15s ease;
    }

    .char-progress__play-btn__stripes {
      display: flex;
      align-items: stretch;
      justify-content: center;
      gap: 7px;
      padding: 0 12px;
      flex-shrink: 0;
    }

    .char-progress__play-btn__stripes span {
      display: block;
      width: 5px;
      align-self: stretch;
      min-height: 100%;
      background: rgba(8, 6, 14, 0.88);
      box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.9);
    }

    .char-progress__play-btn__label {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 67px;
      font-size: 24px;
      font-weight: 700;
      text-transform: uppercase;
      color: #fff;
      transform: skewX(10deg);
      text-shadow: 0 0 12px rgba(0, 0, 0, 0.45);
      text-align: center;
      line-height: 1.25;
    }

    .char-progress__play-btn:hover .char-progress__play-btn__inner,
    .char-progress__play-btn:focus-visible .char-progress__play-btn__inner {
      filter: brightness(1.06);
      box-shadow:
        0 0 28px rgba(0, 255, 255, 0.45),
        0 0 36px rgba(255, 45, 120, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }

    .char-progress__play-btn:focus-visible {
      outline: 2px solid rgba(0, 255, 255, 0.65);
      outline-offset: 3px;
    }

    /* --- Responsive --- */
    @media (max-width: 900px) {
      .char-progress__header {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 20px;
        padding: 0 24px 12px;
      }
      .char-progress__intro {
        text-align: left;
        max-width: none;
      }
      .char-progress__inner {
        grid-template-columns: 1fr;
        padding: 0 24px;
      }
      .char-progress__roster {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 6px;
      }
      .char-roster-card {
        min-width: 240px;
      }
      .char-progress__topbar-row {
        flex-direction: column;
        align-items: stretch;
      }
      .char-progress__topbar-foot {
        flex-direction: column;
        align-items: flex-start;
      }
      .char-level-slide {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 14px;
      }
      .char-level-slide__video-media,
      .char-level-slide__video-media video {
        min-height: 200px;
      }
      .char-level-slide__info {
        padding: 16px 12px 18px 20px;
        margin-left: 0;
        border-top: 1px solid rgba(0, 245, 255, 0.12);
        border-left: 2px solid var(--neon-cyan);
      }
      .char-progress__level-tabs {
        flex-wrap: wrap;
      }
      .char-level-tab {
        flex: 1 1 42%;
        margin-left: 0;
        clip-path: none;
      }
      .char-level-tab:first-child {
        clip-path: none;
      }
    }