/* ================================================
   RULES PAGE — LAYOUT
   ================================================ */

.rules-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 64px 32px 96px;
    position: relative;
    z-index: 3;
}

.rules-page-header {
    text-align: center;
    margin-bottom: 52px;
}

.rules-page-title {
    font-size: clamp(18px, 3.5vw, 32px);
    color: var(--color-white);
    letter-spacing: 4px;
    margin-bottom: 16px;
    text-shadow:
        4px 4px 0 var(--color-red),
        8px 8px 0 var(--color-red-dark);
}

.rules-page-sub {
    font-size: 8px;
    color: var(--color-red);
    letter-spacing: 3px;
}

/* Aktif nav linki */
.nav-active {
    color: var(--color-white) !important;
    border-color: var(--color-red) !important;
    background-color: var(--color-red-dark) !important;
}

/* ================================================
   RPG DİYALOG KUTUSU
   ================================================ */

.rpg-dialog {
    display: flex;
    align-items: stretch;
    max-width: 860px;
    margin: 0 auto 72px;
    border: 4px solid var(--color-white);
    box-shadow:
        8px 8px 0 0 var(--color-red-dark),
        inset 0 0 0 2px var(--color-red-dark);
    background: #06000a;
}

.rpg-dialog__portrait {
    width: 104px;
    flex-shrink: 0;
    background: var(--color-red-dark);
    border-right: 4px solid var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rpg-portrait {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* Piksel miğfer */
.rpg-portrait__helmet {
    width: 32px;
    height: 20px;
    background: var(--color-red-light);
    border: 3px solid var(--color-white);
    box-shadow:
        0 4px 0 0 var(--color-red-dark),
        inset 0 -4px 0 0 rgba(0,0,0,0.4);
}

.rpg-portrait__face {
    font-size: 16px;
    color: var(--color-white);
    animation: blink 2s step-end infinite;
}

.rpg-dialog__content {
    flex: 1;
    padding: 20px 28px;
    position: relative;
}

.rpg-dialog__name {
    display: block;
    font-size: 7px;
    color: var(--color-red-light);
    letter-spacing: 3px;
    margin-bottom: 14px;
    border-bottom: 2px solid var(--color-red-dark);
    padding-bottom: 10px;
}

.rpg-dialog__text {
    font-size: 8px;
    color: var(--color-off-white);
    line-height: 2.6;
    letter-spacing: 1px;
}

.rpg-dialog__arrow {
    position: absolute;
    bottom: 14px;
    right: 20px;
    font-size: 12px;
    color: var(--color-red);
    animation: blink 0.7s step-end infinite;
}

/* ================================================
   RULES GRID
   ================================================ */

.rules-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

/* ================================================
   RULE CARD
   ================================================ */

.rule-card {
    position: relative;
    background: #0c0000;
    display: flex;
    flex-direction: column;

    /* border-image: basamaklı çapraz çizgili pixel border */
    border: 4px solid transparent;
    border-image: repeating-linear-gradient(
        -45deg,
        var(--color-red)      0px 4px,
        var(--color-red-dark) 4px 8px
    ) 4;

    box-shadow: 6px 6px 0 0 var(--color-red-dark);
    image-rendering: pixelated;
    overflow: hidden;
    transition: none;
}

.rule-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 0 var(--color-red-dark);
}

/* ================================================
   ANİMASYON ALANI
   ================================================ */

.rule-anim-area {
    height: 112px;
    background: #050000;
    border-bottom: 3px solid var(--color-red-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    /* CRT scanline mini efekti */
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 2px,
        rgba(0,0,0,0.2) 2px,
        rgba(0,0,0,0.2) 4px
    );
}

/* ================================================
   KURAL GÖVDE
   ================================================ */

.rule-body {
    padding: 20px 18px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.rule-num {
    font-size: 7px;
    color: var(--color-red);
    letter-spacing: 4px;
}

.rule-name {
    font-size: 9px;
    color: var(--color-white);
    line-height: 1.8;
    letter-spacing: 1px;
}

.rule-desc {
    font-size: 7px;
    color: var(--color-off-white);
    line-height: 2.2;
    letter-spacing: 1px;
    flex: 1;
}

/* ================================================
   DETAY BUTONU (Checkbox Hack)
   ================================================ */

.tip-toggle {
    display: none;
}

.rule-detail-btn {
    display: block;
    margin: 0 18px 18px;
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--color-white);
    background: var(--color-red);
    border: 3px solid var(--color-white);
    padding: 11px 14px;
    letter-spacing: 2px;
    /* 3D piksel efekti */
    box-shadow: 4px 4px 0 0 var(--color-red-dark);
    cursor: pointer;
    text-align: center;
    transition: none;
    user-select: none;
}

.rule-detail-btn:hover {
    background: var(--color-red-light);
    box-shadow: 2px 2px 0 0 var(--color-red-dark);
    transform: translate(2px, 2px);
}

/* Butona basılma hissi — checkbox işaretlenince */
.tip-toggle:checked + .rule-detail-btn {
    transform: translate(4px, 4px);
    box-shadow: none;
    background: var(--color-red-dark);
}

/* ================================================
   PİKSEL TOOLTİP
   ================================================ */

.rule-tooltip {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(6, 0, 0, 0.97);
    border: 3px solid var(--color-red);
    padding: 14px 16px;
    flex-direction: column;
    gap: 12px;
    z-index: 10;
    overflow-y: auto;
    image-rendering: pixelated;
}

.tip-toggle:checked ~ .rule-tooltip {
    display: flex;
}

.tooltip-close {
    align-self: flex-end;
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    color: var(--color-red-light);
    cursor: pointer;
    padding: 6px 10px;
    border: 2px solid var(--color-red);
    background: transparent;
    letter-spacing: 1px;
    transition: none;
    user-select: none;
}

.tooltip-close:hover {
    background: var(--color-red-dark);
    color: var(--color-white);
}

.tooltip-title {
    font-size: 8px;
    color: var(--color-red-light);
    letter-spacing: 2px;
    border-bottom: 2px solid var(--color-red-dark);
    padding-bottom: 10px;
    line-height: 1.6;
}

.rule-tooltip p {
    font-size: 7px;
    color: var(--color-off-white);
    line-height: 2.6;
    letter-spacing: 1px;
}

.rule-tooltip strong {
    color: var(--color-red-light);
}

/* ================================================
   RETRO BOWL — DOWN ANİMASYONU (Kart 01)
   ================================================ */

.rb-field-scene {
    position: absolute;
    inset: 0;
    background: #001200;
    overflow: hidden;
}

/* Zemin bandı */
.rb-grass {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 26px;
    background: #002200;
    border-top: 3px solid #005500;
}

/* Yard çizgileri */
.rb-yl {
    position: absolute;
    bottom: 0;
    width: 2px;
    height: 26px;
    background: rgba(255, 255, 255, 0.2);
}
.rb-yl-1 { left: 25%; }
.rb-yl-2 { left: 50%; }
.rb-yl-3 { left: 75%; }

/* 1st down sarı çizgisi */
.rb-first-down {
    position: absolute;
    bottom: 0;
    left: 67%;
    width: 3px;
    height: 26px;
    background: rgba(255, 210, 0, 0.7);
}

/* ---- Savunma oyuncusu (gri, sabit) ---- */

.rb-def-wrap {
    position: absolute;
    bottom: 26px;
    left: 56%;
}

.rb-def-body {
    position: relative;
    width: 6px;
    height: 14px;
    background: #555;
    image-rendering: pixelated;
}

/* Kafa / kask */
.rb-def-body::before {
    content: '';
    position: absolute;
    top: -8px; left: -1px;
    width: 8px; height: 8px;
    background: #444;
}

/* Bacaklar — geniş duruş (hazır pozisyon) */
.rb-def-body::after {
    content: '';
    position: absolute;
    bottom: -7px; left: -5px;
    width: 6px; height: 7px;
    background: #555;
    box-shadow: 10px 0 0 0 #555;
}

/* ---- Koşucu (kırmızı, hareketli) ---- */

.rb-run-wrap {
    position: absolute;
    bottom: 26px;
    left: -14px;
    animation: rb-run-across 3.8s steps(30, end) infinite;
}

/* Koşu rotası:
   0 → 62%  : sol kenardan savunmacıya yaklaş
   62→ 70%  : çarpışma/durma (aynı pozisyonda kal)
   70→ 90%  : savunmacıyı geç, sağ kenara uç
   90→100%  : anında sol kenara resetle               */
@keyframes rb-run-across {
    0%        { transform: translateX(0px); }
    62%       { transform: translateX(185px); }
    70%       { transform: translateX(188px); }
    90%       { transform: translateX(340px); }
    91%, 100% { transform: translateX(0px); }
}

.rb-run-body {
    position: relative;
    width: 4px;
    height: 12px;
    background: var(--color-red);
    image-rendering: pixelated;
}

/* Kask */
.rb-run-body::before {
    content: '';
    position: absolute;
    top: -7px; left: -1px;
    width: 6px; height: 7px;
    background: #880000;
}

/* Bacaklar — koşu animasyonu, 2 kare steps() ile */
.rb-run-body::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: -3px;
    width: 4px; height: 6px;
    background: var(--color-red);
    box-shadow: 7px 0 0 0 var(--color-red);
    animation: rb-run-legs 0.22s steps(2, end) infinite;
}

@keyframes rb-run-legs {
    0%  { left: -3px; box-shadow:  7px 0 0 0 var(--color-red); }
    50% { left:  3px; box-shadow: -7px 0 0 0 var(--color-red); }
}

/* HUD: sağ üst köşe */
.rb-down-hud {
    position: absolute;
    top: 6px; right: 7px;
    font-size: 6px;
    color: var(--color-white);
    letter-spacing: 1px;
    background: rgba(0, 0, 0, 0.65);
    padding: 3px 6px;
    border: 1px solid var(--color-red-dark);
    animation: blink 1.8s step-end infinite;
}

/* ================================================
   RETRO BOWL — FIELD GOAL ANİMASYONU (Kart 02)
   ================================================ */

.rb-kick-scene {
    position: absolute;
    inset: 0;
    background: #050000;
    overflow: hidden;
}

/* ---- Kale Direği (Goal Post) ---- */

.rb-gp {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 84px;
    image-rendering: pixelated;
}

/* Sol ve sağ dikey kollar */
.rb-gp-lu,
.rb-gp-ru {
    position: absolute;
    top: 0;
    width: 4px;
    height: 32px;
    background: var(--color-off-white);
}
.rb-gp-lu { left: 6px; }
.rb-gp-ru { right: 6px; }

/* Yatay çubuk (crossbar) */
.rb-gp-bar {
    position: absolute;
    top: 32px;
    left: 6px; right: 6px;
    height: 4px;
    background: var(--color-off-white);
}

/* Ana dikey direk (stem) */
.rb-gp-pole {
    position: absolute;
    top: 36px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 48px;
    background: var(--color-off-white);
}

/* ---- Top — bezier kavis ile yukarı uçuş ---- */

.rb-kick-ball {
    position: absolute;
    bottom: 10px;
    left: 50%;
    width: 6px; height: 6px;
    background: #e0d0c0;
    image-rendering: pixelated;
    transform: translateX(-50%);
    animation: rb-ball-arc 2.8s cubic-bezier(0.22, 0.84, 0.48, 1) infinite;
}

/* Top, goalpost'un sol kolundan sağ koluna çapraz bir kavis çizer.
   steps() değil, cubic-bezier: hız önce hızlı, yukarıda yavaşlar — gerçekçi top fiziği. */
@keyframes rb-ball-arc {
    0%        { transform: translate(-50%,   0px); opacity: 1; }
    12%       { transform: translate(-40%,  -14px); }
    30%       { transform: translate(-28%,  -44px); }
    52%       { transform: translate(-16%,  -72px); opacity: 1; }
    68%       { transform: translate( -6%,  -90px); opacity: 0.8; }
    80%       { transform: translate(  4%,  -82px); opacity: 0.3; }
    82%       { transform: translate(-50%,   0px);  opacity: 0; }
    84%, 100% { transform: translate(-50%,   0px);  opacity: 1; }
}

/* ---- Puan göstergesi — top geçince belirir ---- */

.rb-score-pts {
    position: absolute;
    top: 8px;
    left: 50%;
    font-size: 11px;
    color: var(--color-white);
    letter-spacing: 3px;
    text-shadow: 3px 3px 0 var(--color-red-dark);
    transform: translateX(-50%) scale(0);
    opacity: 0;
    animation: rb-pts-pop 2.8s steps(1, end) infinite;
}

@keyframes rb-pts-pop {
    0%,  52% { opacity: 0; transform: translateX(-50%) scale(0.5); }
    54%, 78% { opacity: 1; transform: translateX(-50%) scale(1.1); }
    80%, 100%{ opacity: 0; transform: translateX(-50%) scale(0.5); }
}

/* ================================================
   PİKSEL ANİMASYONLAR (diğer kartlar)
   ================================================ */

/* ---- 1: DOWN — Top ilerliyor ---- */

.pa-down {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 85%;
}

.pa-down__field {
    position: relative;
    width: 100%;
    height: 18px;
    background: #001800;
    border: 2px solid #003300;
    overflow: hidden;
}

.pa-down__yard-line {
    position: absolute;
    top: 0; bottom: 0;
    width: 2px;
    background: rgba(255,255,255,0.18);
}

.pa-yl--1 { left: 33%; }
.pa-yl--2 { left: 66%; }

.pa-down__ball {
    position: absolute;
    top: 50%;
    left: 6%;
    transform: translateY(-50%);
    width: 10px;
    height: 7px;
    background: var(--color-red);
    image-rendering: pixelated;
    animation: ball-advance 3.2s ease-in-out infinite;
}

.pa-down__hud {
    font-size: 7px;
    color: var(--color-white);
    letter-spacing: 2px;
    animation: blink 1.6s step-end infinite;
}

@keyframes ball-advance {
    0%,  12% { left: 6%; }
    45%, 58% { left: 76%; }
    88%,100% { left: 6%; }
}

/* ---- 2: SKOR — Puan patlaması ---- */

.pa-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.pa-score__td {
    font-size: 11px;
    color: var(--color-red-light);
    letter-spacing: 5px;
    text-shadow: 0 0 12px var(--color-red);
    animation: score-pulse 1.4s ease-in-out infinite;
}

.pa-score__points {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.pa-score__plus {
    font-size: 12px;
    color: var(--color-red);
}

.pa-score__num {
    font-size: 22px;
    color: var(--color-white);
    text-shadow: 4px 4px 0 var(--color-red-dark);
    animation: score-pulse 1.4s ease-in-out infinite 0.25s;
}

.pa-score__stars {
    display: flex;
    gap: 8px;
    font-size: 10px;
    color: var(--color-red);
}

.pa-score__stars span:nth-child(1) { animation: blink 0.5s step-end infinite 0s; }
.pa-score__stars span:nth-child(2) { animation: blink 0.5s step-end infinite 0.18s; }
.pa-score__stars span:nth-child(3) { animation: blink 0.5s step-end infinite 0.36s; }

@keyframes score-pulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%       { transform: scale(1.2); opacity: 0.75; }
}

/* ---- 3: ALAN — Saha görünümü ---- */

.pa-field {
    display: flex;
    align-items: center;
    width: 90%;
    height: 64px;
    overflow: hidden;
}

.pa-field__endzone {
    width: 26px;
    flex-shrink: 0;
    height: 100%;
    background: rgba(139, 0, 0, 0.35);
    border: 2px solid var(--color-red-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    font-size: 6px;
    color: var(--color-red);
    letter-spacing: 2px;
}

.pa-field__grass {
    flex: 1;
    height: 100%;
    background: #001800;
    border-top: 2px solid #002800;
    border-bottom: 2px solid #002800;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    overflow: hidden;
}

.pa-field__line {
    width: 2px;
    background: rgba(255,255,255,0.14);
    animation: field-breathe 2.5s ease-in-out infinite;
}

.pa-field__line:nth-child(2) { animation-delay: -0.6s; }
.pa-field__line:nth-child(3) { animation-delay: -1.2s; }
.pa-field__line:nth-child(4) { animation-delay: -1.8s; }
.pa-field__line:nth-child(5) { animation-delay: -2.4s; }

@keyframes field-breathe {
    0%, 100% { opacity: 0.15; }
    50%       { opacity: 0.5;  }
}

/* ---- 4: TAKIM — Oyuncular ---- */

.pa-team {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
}

.pa-team__side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.pa-player {
    position: relative;
    width: 10px;
    height: 14px;
    image-rendering: pixelated;
}

/* Gövde */
.pa-player::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-red);
}

/* Kafa */
.pa-player::before {
    content: '';
    position: absolute;
    top: -7px; left: 1px;
    width: 8px; height: 7px;
    background: var(--color-red);
    z-index: 1;
}

.pa-player--def::after  { background: var(--color-gray); }
.pa-player--def::before { background: var(--color-gray); }

/* Sırayla zıplama */
.pa-team__side:first-child .pa-player:nth-child(1) { animation: player-bob 0.9s ease-in-out infinite 0s; }
.pa-team__side:first-child .pa-player:nth-child(2) { animation: player-bob 0.9s ease-in-out infinite 0.15s; }
.pa-team__side:first-child .pa-player:nth-child(3) { animation: player-bob 0.9s ease-in-out infinite 0.30s; }
.pa-team__side:last-child  .pa-player:nth-child(1) { animation: player-bob 0.9s ease-in-out infinite 0.10s; }
.pa-team__side:last-child  .pa-player:nth-child(2) { animation: player-bob 0.9s ease-in-out infinite 0.25s; }
.pa-team__side:last-child  .pa-player:nth-child(3) { animation: player-bob 0.9s ease-in-out infinite 0.05s; }

.pa-team__label {
    font-size: 6px;
    color: var(--color-red);
    letter-spacing: 2px;
}

.pa-team__vs {
    font-size: 9px;
    color: var(--color-white);
    text-shadow: 2px 2px 0 var(--color-red-dark);
    animation: blink 1.2s step-end infinite;
}

@keyframes player-bob {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-5px); }
}

/* ---- 5: CEZA — Bayrak uçuyor ---- */

.pa-penalty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
}

.pa-penalty__flag {
    width: 18px;
    height: 18px;
    background: #ffcc00;
    border: 2px solid #aa8800;
    image-rendering: pixelated;
    animation: flag-throw 2.8s ease-in-out infinite;
    flex-shrink: 0;
}

.pa-penalty__foul {
    font-size: 11px;
    color: #ffcc00;
    letter-spacing: 2px;
    text-shadow: 2px 2px 0 #aa8800;
    animation: blink 0.45s step-end infinite;
}

.pa-penalty__yards {
    font-size: 6px;
    color: var(--color-red-light);
    letter-spacing: 2px;
}

@keyframes flag-throw {
    0%         { transform: translate(0, 0)     rotate(0deg); }
    25%        { transform: translate(28px,-22px) rotate(-65deg); }
    50%        { transform: translate(44px, 2px) rotate(-100deg); }
    75%        { transform: translate(18px,-10px) rotate(-50deg); }
    100%       { transform: translate(0, 0)     rotate(0deg); }
}

/* ---- 6: UZATMA — Saat ---- */

.pa-overtime {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.pa-overtime__clock {
    width: 52px;
    height: 52px;
    border: 4px solid var(--color-red);
    box-shadow:
        3px 3px 0 0 var(--color-red-dark),
        inset 0 0 0 2px #1a0000;
    background: #040000;
    position: relative;
    image-rendering: pixelated;
}

/* Merkez noktası */
.pa-overtime__clock::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 4px; height: 4px;
    background: var(--color-red-light);
    z-index: 2;
}

/* Saat ibresi */
.pa-overtime__hand {
    position: absolute;
    bottom: 50%;
    left: 50%;
    width: 3px;
    height: 38%;
    background: var(--color-red-light);
    transform-origin: bottom center;
    transform: translateX(-50%);
    animation: clock-spin 2s steps(12, end) infinite;
}

.pa-overtime__label {
    font-size: 11px;
    color: var(--color-red-light);
    letter-spacing: 6px;
    text-shadow: 3px 3px 0 var(--color-red-dark);
    animation: blink 1s step-end infinite;
}

@keyframes clock-spin {
    from { transform: translateX(-50%) rotate(0deg); }
    to   { transform: translateX(-50%) rotate(360deg); }
}

/* ================================================
   RETRO BOWL — TOPDOWN SAHA ANİMASYONU (Kart 03)
   ================================================ */

.rb-topdown-scene {
    position: absolute;
    inset: 0;
    background: #001500;
    overflow: hidden;
    display: flex;
    align-items: stretch;
}

/* End Zone blokları */
.rb-td-ez {
    flex-shrink: 0;
    width: 28px;
    background: rgba(139, 0, 0, 0.4);
    border-right: 2px solid var(--color-red-dark);
    border-left: 2px solid var(--color-red-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5px;
    color: var(--color-red);
    letter-spacing: 1px;
    text-align: center;
    line-height: 2;
    writing-mode: vertical-rl;
}

/* Saha alanı */
.rb-td-field {
    flex: 1;
    background: #002000;
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    overflow: hidden;
}

/* Yard çizgileri */
.rb-td-yl {
    width: 2px;
    background: rgba(255, 255, 255, 0.13);
    align-self: stretch;
}

/* 50 yard etiketi */
.rb-td-50 {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 5px;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 1px;
}

/* TD Koşucusu */
.rb-td-runner-wrap {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 8px;
    animation: rb-td-run 3.4s steps(26, end) infinite;
}

@keyframes rb-td-run {
    0%        { left: 8px; }
    72%       { left: calc(100% - 16px); }
    73%, 100% { left: 8px; }
}

/* Top-down oyuncu (kırmızı nokta + gölge halkası) */
.rb-td-run-body {
    position: relative;
    width: 8px; height: 8px;
    background: var(--color-red);
    image-rendering: pixelated;
}

.rb-td-run-body::before {
    content: '';
    position: absolute;
    top: -3px; left: -3px;
    width: 14px; height: 14px;
    border: 2px solid rgba(204, 17, 17, 0.35);
}

/* Touchdown flaşı */
.rb-td-run-body::after {
    content: 'TD!';
    position: absolute;
    top: -20px; left: -6px;
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--color-white);
    white-space: nowrap;
    opacity: 0;
    animation: rb-td-flash 3.4s steps(1, end) infinite;
}

@keyframes rb-td-flash {
    0%, 70%   { opacity: 0; }
    72%, 88%  { opacity: 1; }
    89%, 100% { opacity: 0; }
}

/* 120 YD etiketi */
.rb-td-hud {
    position: absolute;
    bottom: 5px; right: 6px;
    font-size: 5px;
    color: var(--color-off-white);
    letter-spacing: 1px;
    background: rgba(0, 0, 0, 0.55);
    padding: 2px 5px;
    border: 1px solid var(--color-red-dark);
}

/* ================================================
   RETRO BOWL — SNAP ANİMASYONU (Kart 04)
   ================================================ */

.rb-snap-scene {
    position: absolute;
    inset: 0;
    background: #001200;
    overflow: hidden;
}

.rb-snap-grass {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 28px;
    background: #002200;
    border-top: 3px solid #004400;
}

/* Vuruş çizgisi */
.rb-los {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 2px;
    height: 28px;
    background: rgba(255, 255, 255, 0.45);
}

/* OFF / DEF etiketleri */
.rb-snap-label {
    position: absolute;
    top: 6px;
    font-size: 6px;
    letter-spacing: 2px;
    background: rgba(0,0,0,0.55);
    padding: 2px 5px;
    border: 1px solid var(--color-red-dark);
}
.rb-snap-label--off { left: 10%; color: var(--color-red); }
.rb-snap-label--def { right: 10%; color: #888; }

/* Offense grubu (sola hizalı, snap'te sağa yürür) */
.rb-snap-off {
    position: absolute;
    bottom: 28px;
    left: 8%;
    display: flex;
    gap: 8px;
    animation: rb-off-move 3.6s steps(14, end) infinite;
}

@keyframes rb-off-move {
    0%, 28%   { transform: translateX(0); }
    32%, 60%  { transform: translateX(64px); }
    61%, 100% { transform: translateX(0); }
}

/* Defense grubu (sağa hizalı, snap'te sola yürür) */
.rb-snap-def {
    position: absolute;
    bottom: 28px;
    right: 8%;
    display: flex;
    gap: 8px;
    animation: rb-def-move 3.6s steps(14, end) infinite;
}

@keyframes rb-def-move {
    0%, 28%   { transform: translateX(0); }
    32%, 60%  { transform: translateX(-54px); }
    61%, 100% { transform: translateX(0); }
}

/* Oyuncu sprite */
.rb-snap-player {
    position: relative;
    width: 4px;
    height: 12px;
    background: var(--color-red);
    image-rendering: pixelated;
}

.rb-snap-player::before {
    content: '';
    position: absolute;
    top: -6px; left: -1px;
    width: 6px; height: 6px;
    background: #880000;
}

.rb-snap-player--def       { background: #555; }
.rb-snap-player--def::before { background: #333; }

/* QB biraz daha önde (pas pozisyonu) */
.rb-snap-qb {
    margin-left: 4px;
}

/* Snap topu */
.rb-snap-ball {
    position: absolute;
    bottom: 32px;
    left: calc(50% - 3px);
    width: 6px; height: 4px;
    background: #c09060;
    image-rendering: pixelated;
    animation: rb-ball-snap 3.6s steps(14, end) infinite;
}

@keyframes rb-ball-snap {
    0%, 28%   { left: calc(50% - 3px); opacity: 1; }
    30%       { left: calc(28% - 3px); }
    32%, 60%  { left: calc(22% - 3px); opacity: 1; }
    61%, 100% { left: calc(50% - 3px); opacity: 1; }
}

/* SNAP! etiketi */
.rb-snap-hud {
    position: absolute;
    top: 28px; left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    color: var(--color-white);
    letter-spacing: 2px;
    text-shadow: 2px 2px 0 var(--color-red-dark);
    opacity: 0;
    animation: rb-snap-show 3.6s steps(1, end) infinite;
}

@keyframes rb-snap-show {
    0%, 26%   { opacity: 0; }
    28%, 58%  { opacity: 1; }
    59%, 100% { opacity: 0; }
}

/* ================================================
   RETRO BOWL — HAKEM + BAYRAK ANİMASYONU (Kart 05)
   ================================================ */

.rb-ref-scene {
    position: absolute;
    inset: 0;
    background: #001200;
    overflow: hidden;
}

.rb-ref-grass {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 28px;
    background: #002200;
    border-top: 3px solid #004400;
}

/* Hakem gövdesi (çizgili, siyah-beyaz) */
.rb-ref-wrap {
    position: absolute;
    bottom: 28px;
    left: 22%;
}

.rb-ref-body {
    position: relative;
    width: 6px;
    height: 16px;
    background: repeating-linear-gradient(
        to bottom,
        #111 0px, #111 4px,
        #ddd 4px, #ddd 8px
    );
    image-rendering: pixelated;
}

/* Kep */
.rb-ref-body::before {
    content: '';
    position: absolute;
    top: -8px; left: -1px;
    width: 8px; height: 8px;
    background: #111;
}

/* Kol — fırlatma animasyonu */
.rb-ref-body::after {
    content: '';
    position: absolute;
    top: 3px; right: -9px;
    width: 9px; height: 4px;
    background: #ddd;
    transform-origin: left center;
    animation: rb-arm-raise 2.6s steps(4, end) infinite;
}

@keyframes rb-arm-raise {
    0%,  18% { transform: rotate(10deg); }
    20%, 40% { transform: rotate(-55deg); }
    42%, 60% { transform: rotate(-110deg); }
    62%, 100%{ transform: rotate(10deg); }
}

/* Bayrak */
.rb-flag-wrap {
    position: absolute;
    bottom: 42px;
    left: 28%;
    opacity: 0;
    animation: rb-flag-arc 2.6s steps(8, end) infinite;
}

@keyframes rb-flag-arc {
    0%,  18% { transform: translate(0, 0)      rotate(0deg);    opacity: 0; }
    20%      { transform: translate(0, 0)       rotate(0deg);   opacity: 1; }
    30%      { transform: translate(18px,-14px) rotate(-35deg); opacity: 1; }
    45%      { transform: translate(48px, -4px) rotate(-65deg); opacity: 1; }
    58%      { transform: translate(72px, 10px) rotate(-50deg); opacity: 0.5; }
    62%, 100%{ transform: translate(0, 0)       rotate(0deg);   opacity: 0; }
}

.rb-flag {
    width: 10px; height: 10px;
    background: #ffcc00;
    border: 2px solid #aa8800;
    image-rendering: pixelated;
}

/* FOUL! */
.rb-foul-label {
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: #ffcc00;
    letter-spacing: 3px;
    text-shadow: 2px 2px 0 #885500;
    opacity: 0;
    animation: rb-foul-pop 2.6s steps(1, end) infinite;
}

/* -10 YD */
.rb-yds-label {
    position: absolute;
    top: 32px; left: 50%;
    transform: translateX(-50%);
    font-size: 7px;
    color: var(--color-red-light);
    letter-spacing: 2px;
    opacity: 0;
    animation: rb-foul-pop 2.6s steps(1, end) infinite 0.15s;
}

@keyframes rb-foul-pop {
    0%,  40%  { opacity: 0; }
    42%, 68%  { opacity: 1; }
    70%, 100% { opacity: 0; }
}

/* ================================================
   RETRO BOWL — OVERTIME ANİMASYONU (Kart 06)
   ================================================ */

.rb-ot-scene {
    position: absolute;
    inset: 0;
    background: #060008;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Skor tablosu */
.rb-scoreboard {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    border: 3px solid var(--color-red-dark);
    background: #0a0012;
    padding: 6px 18px;
    box-shadow: 4px 4px 0 0 var(--color-red-dark);
}

.rb-sb-score {
    font-size: 11px;
    color: var(--color-white);
    letter-spacing: 4px;
    text-shadow: 2px 2px 0 var(--color-red-dark);
}

.rb-sb-clock {
    font-size: 7px;
    color: var(--color-red);
    letter-spacing: 3px;
    animation: blink 0.55s step-end infinite;
}

/* Para (coin flip) */
.rb-coin-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.rb-coin {
    width: 18px; height: 18px;
    background: #d4a800;
    border: 3px solid #f0c000;
    box-shadow: 3px 3px 0 0 #806000;
    image-rendering: pixelated;
    animation: rb-coin-flip 1.5s steps(4, end) infinite;
}

/* Madeni para çevirme: scaleX 1→0→-1→0→1 (iki yüz görünümü) */
@keyframes rb-coin-flip {
    0%   { transform: scaleX(1)    translateY(0px);  }
    25%  { transform: scaleX(0.1)  translateY(-10px); }
    50%  { transform: scaleX(-1)   translateY(-16px); background: #c09800; }
    75%  { transform: scaleX(0.1)  translateY(-10px); }
    100% { transform: scaleX(1)    translateY(0px);  }
}

/* OVERTIME etiketi */
.rb-ot-text {
    font-size: 8px;
    color: var(--color-red-light);
    letter-spacing: 4px;
    text-shadow: 2px 2px 0 var(--color-red-dark);
    animation: blink 1.1s step-end infinite;
}

/* ================================================
   RETRO BOWL — PUNT & FAIR CATCH ANİMASYONU (Kart 06)
   ================================================ */

.rb-punt-scene {
    position: absolute;
    inset: 0;
    background: #001200;
    overflow: hidden;
}

.rb-punt-grass {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 28px;
    background: #002200;
    border-top: 3px solid #004400;
}

.rb-punter-wrap {
    position: absolute;
    bottom: 28px;
    left: 14%;
}

.rb-punter-body {
    position: relative;
    width: 6px;
    height: 16px;
    background: var(--color-red);
    image-rendering: pixelated;
}

.rb-punter-body::before {
    content: '';
    position: absolute;
    top: -8px; left: -1px;
    width: 8px; height: 8px;
    background: #880000;
}

.rb-punter-body::after {
    content: '';
    position: absolute;
    bottom: -2px; right: -8px;
    width: 8px; height: 3px;
    background: var(--color-red);
    transform-origin: left center;
    animation: rb-kick-leg 2.8s steps(5, end) infinite;
}

@keyframes rb-kick-leg {
    0%, 30%  { transform: rotate(20deg);  }
    35%, 55% { transform: rotate(-60deg); }
    60%, 100%{ transform: rotate(20deg);  }
}

.rb-punt-ball {
    position: absolute;
    bottom: 44px;
    left: 18%;
    width: 8px; height: 5px;
    background: #c09060;
    image-rendering: pixelated;
    opacity: 0;
    animation: rb-punt-arc 2.8s steps(20, end) infinite;
}

@keyframes rb-punt-arc {
    0%, 30%  { left: 18%; bottom: 44px; opacity: 0; }
    35%      { left: 24%; bottom: 54px; opacity: 1; }
    45%      { left: 44%; bottom: 72px; opacity: 1; }
    56%      { left: 64%; bottom: 58px; opacity: 1; }
    65%      { left: 76%; bottom: 44px; opacity: 1; }
    70%, 100%{ left: 18%; bottom: 44px; opacity: 0; }
}

.rb-fc-wrap {
    position: absolute;
    bottom: 28px;
    right: 14%;
}

.rb-fc-body {
    position: relative;
    width: 6px;
    height: 16px;
    background: #555;
    image-rendering: pixelated;
}

.rb-fc-body::before {
    content: '';
    position: absolute;
    top: -8px; left: -1px;
    width: 8px; height: 8px;
    background: #333;
}

.rb-fc-body::after {
    content: '';
    position: absolute;
    top: 1px; left: -10px;
    width: 10px; height: 3px;
    background: #555;
    transform-origin: right center;
    animation: rb-fc-arm 2.8s steps(5, end) infinite;
}

@keyframes rb-fc-arm {
    0%, 58%  { transform: rotate(20deg);  }
    60%, 90% { transform: rotate(-75deg); }
    91%, 100%{ transform: rotate(20deg);  }
}

.rb-punt-hud {
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    font-size: 6px;
    color: #ffcc00;
    letter-spacing: 2px;
    white-space: nowrap;
    text-shadow: 2px 2px 0 #885500;
    opacity: 0;
    animation: rb-punt-show 2.8s steps(1, end) infinite;
}

@keyframes rb-punt-show {
    0%, 58%  { opacity: 0; }
    60%, 90% { opacity: 1; }
    91%, 100%{ opacity: 0; }
}

/* ================================================
   RETRO BOWL — PAS ANİMASYONU (Kart 07)
   ================================================ */

.rb-pass-scene {
    position: absolute;
    inset: 0;
    background: #001200;
    overflow: hidden;
}

.rb-pass-grass {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 28px;
    background: #002200;
    border-top: 3px solid #004400;
}

.rb-qb-wrap {
    position: absolute;
    bottom: 28px;
    left: 14%;
}

.rb-qb-body {
    position: relative;
    width: 6px;
    height: 16px;
    background: var(--color-red);
    image-rendering: pixelated;
}

.rb-qb-body::before {
    content: '';
    position: absolute;
    top: -8px; left: -1px;
    width: 8px; height: 8px;
    background: #880000;
}

.rb-qb-body::after {
    content: '';
    position: absolute;
    top: 0; right: -10px;
    width: 10px; height: 3px;
    background: var(--color-red);
    transform-origin: left center;
    animation: rb-throw-arm 2.8s steps(5, end) infinite;
}

@keyframes rb-throw-arm {
    0%, 25%  { transform: rotate(-60deg); }
    30%, 50% { transform: rotate(20deg);  }
    55%, 100%{ transform: rotate(-60deg); }
}

.rb-pass-ball {
    position: absolute;
    bottom: 48px;
    left: 20%;
    width: 8px; height: 5px;
    background: #c09060;
    image-rendering: pixelated;
    opacity: 0;
    animation: rb-pass-fly 2.8s steps(18, end) infinite;
}

@keyframes rb-pass-fly {
    0%, 28%  { left: 20%; bottom: 48px; opacity: 0; }
    30%      { left: 26%; bottom: 56px; opacity: 1; }
    46%      { left: 54%; bottom: 60px; opacity: 1; }
    58%      { left: 74%; bottom: 46px; opacity: 1; }
    62%, 100%{ left: 20%; bottom: 48px; opacity: 0; }
}

.rb-wr-wrap {
    position: absolute;
    bottom: 28px;
    right: 14%;
}

.rb-wr-body {
    position: relative;
    width: 6px;
    height: 16px;
    background: #555;
    image-rendering: pixelated;
}

.rb-wr-body::before {
    content: '';
    position: absolute;
    top: -8px; left: -1px;
    width: 8px; height: 8px;
    background: #333;
}

.rb-wr-body::after {
    content: '';
    position: absolute;
    top: 1px; right: -10px;
    width: 10px; height: 3px;
    background: #555;
    transform-origin: left center;
    animation: rb-catch-arm 2.8s steps(5, end) infinite;
}

@keyframes rb-catch-arm {
    0%, 55%  { transform: rotate(-30deg); }
    60%, 80% { transform: rotate(-70deg); }
    85%, 100%{ transform: rotate(-30deg); }
}

.rb-catch-hud {
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    font-size: 7px;
    color: var(--color-white);
    letter-spacing: 2px;
    text-shadow: 2px 2px 0 var(--color-red-dark);
    opacity: 0;
    animation: rb-catch-show 2.8s steps(1, end) infinite;
}

@keyframes rb-catch-show {
    0%, 58%  { opacity: 0; }
    60%, 88% { opacity: 1; }
    90%, 100%{ opacity: 0; }
}

/* ================================================
   RETRO BOWL — FUMBLE ANİMASYONU (Kart 10)
   ================================================ */

.rb-fumble-scene {
    position: absolute;
    inset: 0;
    background: #001200;
    overflow: hidden;
}

.rb-fumb-grass {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 28px;
    background: #002200;
    border-top: 3px solid #004400;
}

.rb-carrier-wrap {
    position: absolute;
    bottom: 28px;
    left: 28%;
    animation: rb-carrier-fall 3s steps(6, end) infinite;
}

@keyframes rb-carrier-fall {
    0%, 38%  { transform: rotate(0deg);   }
    42%, 70% { transform: rotate(-22deg); }
    74%, 100%{ transform: rotate(0deg);   }
}

.rb-carrier-body {
    position: relative;
    width: 6px;
    height: 16px;
    background: var(--color-red);
    image-rendering: pixelated;
}

.rb-carrier-body::before {
    content: '';
    position: absolute;
    top: -8px; left: -1px;
    width: 8px; height: 8px;
    background: #880000;
}

.rb-loose-ball {
    position: absolute;
    bottom: 30px;
    left: 36%;
    width: 8px; height: 5px;
    background: #c09060;
    image-rendering: pixelated;
    opacity: 0;
    animation: rb-loose-bounce 3s steps(10, end) infinite;
}

@keyframes rb-loose-bounce {
    0%, 38%  { left: 36%; bottom: 30px; opacity: 0; }
    42%      { left: 44%; bottom: 42px; opacity: 1; }
    50%      { left: 54%; bottom: 30px; opacity: 1; }
    58%      { left: 62%; bottom: 40px; opacity: 1; }
    65%      { left: 70%; bottom: 30px; opacity: 1; }
    70%, 100%{ left: 36%; bottom: 30px; opacity: 0; }
}

.rb-fumble-hud {
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    color: #ffcc00;
    letter-spacing: 3px;
    text-shadow: 2px 2px 0 #885500;
    white-space: nowrap;
    animation: blink 0.4s step-end infinite;
}

/* ================================================
   RETRO BOWL — PASS INTERFERENCE ANİMASYONU (Kart 13)
   ================================================ */

.rb-pi-scene {
    position: absolute;
    inset: 0;
    background: #001200;
    overflow: hidden;
}

.rb-pi-grass {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 28px;
    background: #002200;
    border-top: 3px solid #004400;
}

.rb-pi-wr {
    position: absolute;
    bottom: 28px;
    left: 32%;
}

.rb-pi-wr-body {
    position: relative;
    width: 6px;
    height: 16px;
    background: #555;
    image-rendering: pixelated;
}

.rb-pi-wr-body::before {
    content: '';
    position: absolute;
    top: -8px; left: -1px;
    width: 8px; height: 8px;
    background: #333;
}

.rb-pi-cb {
    position: absolute;
    bottom: 28px;
    left: 44%;
    animation: rb-pi-push 2.8s steps(5, end) infinite;
}

@keyframes rb-pi-push {
    0%, 35%  { transform: translateX(0);   }
    40%, 65% { transform: translateX(-5px); }
    70%, 100%{ transform: translateX(0);   }
}

.rb-pi-cb-body {
    position: relative;
    width: 6px;
    height: 16px;
    background: var(--color-red);
    image-rendering: pixelated;
}

.rb-pi-cb-body::before {
    content: '';
    position: absolute;
    top: -8px; left: -1px;
    width: 8px; height: 8px;
    background: #880000;
}

.rb-pi-cb-body::after {
    content: '';
    position: absolute;
    top: 2px; left: -9px;
    width: 9px; height: 3px;
    background: var(--color-red);
    transform-origin: right center;
    animation: rb-pi-arm 2.8s steps(5, end) infinite;
}

@keyframes rb-pi-arm {
    0%, 35%  { transform: rotate(10deg);  }
    40%, 65% { transform: rotate(-20deg); }
    70%, 100%{ transform: rotate(10deg);  }
}

.rb-pi-hud {
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: #ffcc00;
    letter-spacing: 3px;
    text-shadow: 2px 2px 0 #885500;
    opacity: 0;
    animation: rb-pi-show 2.8s steps(1, end) infinite;
}

@keyframes rb-pi-show {
    0%, 36%  { opacity: 0; }
    38%, 68% { opacity: 1; }
    70%, 100%{ opacity: 0; }
}

.rb-pi-sub {
    position: absolute;
    top: 32px; left: 50%;
    transform: translateX(-50%);
    font-size: 5px;
    color: var(--color-red-light);
    letter-spacing: 2px;
    white-space: nowrap;
    opacity: 0;
    animation: rb-pi-show 2.8s steps(1, end) infinite 0.1s;
}

/* ================================================
   RETRO BOWL — EKİPMAN ANİMASYONU (Kart 16)
   ================================================ */

.rb-equip-scene {
    position: absolute;
    inset: 0;
    background: #040006;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.rb-helmet {
    position: relative;
    width: 38px;
    height: 30px;
    background: var(--color-red);
    border: 3px solid #aa0000;
    image-rendering: pixelated;
    box-shadow: 4px 4px 0 0 #440000;
    flex-shrink: 0;
}

.rb-helmet::before {
    content: '';
    position: absolute;
    bottom: -8px; left: 4px;
    width: 30px; height: 8px;
    background: transparent;
    border-left: 3px solid #888;
    border-right: 3px solid #888;
    border-bottom: 3px solid #888;
}

.rb-helmet::after {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    width: 3px; height: 100%;
    background: rgba(255,255,255,0.25);
    transform: translateX(-50%);
}

.rb-equip-label {
    font-size: 6px;
    color: var(--color-red-light);
    letter-spacing: 3px;
    animation: blink 1.2s step-end infinite;
    margin-top: 6px;
}

.rb-equip-sub {
    font-size: 5px;
    color: var(--color-gray);
    letter-spacing: 1px;
    text-align: center;
    line-height: 2.4;
}

/* ================================================
   RETRO BOWL — TOP ÖZELLİKLERİ ANİMASYONU (Kart 17)
   ================================================ */

.rb-ball-scene {
    position: absolute;
    inset: 0;
    background: #040006;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.rb-football {
    position: relative;
    width: 42px;
    height: 26px;
    background: #7a3a0e;
    border: 3px solid #5a2a06;
    image-rendering: pixelated;
    box-shadow: 3px 3px 0 0 #2a0e02;
    flex-shrink: 0;
    animation: rb-football-spin 2.4s steps(8, end) infinite;
}

@keyframes rb-football-spin {
    0%   { transform: rotate(0deg)   scaleX(1); }
    25%  { transform: rotate(18deg)  scaleX(0.8); }
    50%  { transform: rotate(-4deg)  scaleX(1); }
    75%  { transform: rotate(-18deg) scaleX(0.8); }
    100% { transform: rotate(0deg)   scaleX(1); }
}

.rb-football::before {
    content: '';
    position: absolute;
    top: 50%; left: 10%;
    width: 80%; height: 2px;
    background: rgba(255,255,255,0.5);
    transform: translateY(-50%);
}

.rb-football::after {
    content: '';
    position: absolute;
    top: 10%; left: 50%;
    width: 2px; height: 80%;
    background: rgba(255,255,255,0.3);
    transform: translateX(-50%);
}

.rb-ball-label {
    font-size: 6px;
    color: var(--color-red-light);
    letter-spacing: 3px;
}

.rb-ball-stats {
    font-size: 5px;
    color: var(--color-off-white);
    letter-spacing: 1px;
    text-align: center;
    line-height: 2.6;
    opacity: 0.85;
}

/* ================================================
   RETRO BOWL — ÖZEL OYUNLAR ANİMASYONU (Kart 18)
   ================================================ */

.rb-special-scene {
    position: absolute;
    inset: 0;
    background: #001200;
    overflow: hidden;
}

.rb-sp-grass {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 28px;
    background: #002200;
    border-top: 3px solid #004400;
}

.rb-sp-player-a {
    position: absolute;
    bottom: 28px;
    left: 20%;
    animation: rb-sp-left 3s steps(10, end) infinite;
}

@keyframes rb-sp-left {
    0%, 25%  { transform: translateX(0);    }
    30%, 65% { transform: translateX(-22px); }
    70%, 100%{ transform: translateX(0);    }
}

.rb-sp-player-b {
    position: absolute;
    bottom: 28px;
    right: 20%;
    animation: rb-sp-right 3s steps(10, end) infinite;
}

@keyframes rb-sp-right {
    0%, 25%  { transform: translateX(0);   }
    30%, 65% { transform: translateX(22px); }
    70%, 100%{ transform: translateX(0);   }
}

.rb-sp-body {
    position: relative;
    width: 6px;
    height: 16px;
    background: var(--color-red);
    image-rendering: pixelated;
}

.rb-sp-body::before {
    content: '';
    position: absolute;
    top: -8px; left: -1px;
    width: 8px; height: 8px;
    background: #880000;
}

.rb-sp-body--def { background: #555; }
.rb-sp-body--def::before { background: #333; }

.rb-sp-arrow-l {
    position: absolute;
    bottom: 52px;
    left: 16%;
    font-size: 10px;
    color: var(--color-red);
    opacity: 0;
    animation: rb-sp-blink-l 3s steps(1, end) infinite;
}

.rb-sp-arrow-r {
    position: absolute;
    bottom: 52px;
    right: 16%;
    font-size: 10px;
    color: #555;
    opacity: 0;
    animation: rb-sp-blink-r 3s steps(1, end) infinite;
}

@keyframes rb-sp-blink-l {
    0%, 28%  { opacity: 0; }
    30%, 68% { opacity: 1; }
    70%, 100%{ opacity: 0; }
}

@keyframes rb-sp-blink-r {
    0%, 28%  { opacity: 0; }
    30%, 68% { opacity: 1; }
    70%, 100%{ opacity: 0; }
}

.rb-sp-ball {
    position: absolute;
    bottom: 40px;
    left: 47%;
    width: 8px; height: 5px;
    background: #c09060;
    image-rendering: pixelated;
    animation: rb-sp-ball-move 3s steps(10, end) infinite;
}

@keyframes rb-sp-ball-move {
    0%, 28%  { left: 47%; opacity: 1; }
    36%      { left: 30%; opacity: 1; }
    50%      { left: 14%; opacity: 1; }
    62%      { left: 47%; opacity: 0; }
    70%, 100%{ left: 47%; opacity: 1; }
}

.rb-sp-hud {
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    font-size: 6px;
    color: var(--color-white);
    letter-spacing: 2px;
    white-space: nowrap;
    text-shadow: 2px 2px 0 var(--color-red-dark);
    opacity: 0;
    animation: rb-sp-show 3s steps(1, end) infinite;
}

@keyframes rb-sp-show {
    0%, 28%  { opacity: 0; }
    30%, 68% { opacity: 1; }
    70%, 100%{ opacity: 0; }
}

/* ================================================
   AI HAKEM CHAT WIDGET
   ================================================ */

#ai-chat-widget {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    pointer-events: none;
}

#ai-chat-widget > * {
    pointer-events: auto;
}

/* ── FAB toggle button ── */
.ai-chat-toggle {
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    color: var(--color-white);
    background-color: var(--color-red);
    border: 3px solid var(--color-white);
    padding: 12px 16px;
    cursor: pointer;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 4px 4px 0 0 #000, 0 0 20px rgba(204,17,17,0.5);
    line-height: 1;
    transition: none;
}

.ai-chat-toggle-icon  { font-size: 14px; }
.ai-chat-toggle-label { letter-spacing: 2px; }

.ai-chat-toggle:hover {
    background-color: var(--color-red-light);
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 0 #000, 0 0 24px rgba(204,17,17,0.6);
}

.ai-chat-toggle:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 0 #000;
}

.ai-chat-toggle--active {
    background-color: var(--color-red-dark);
    box-shadow: 2px 2px 0 0 #000;
}

/* ── Chat panel ── */
.ai-chat-panel {
    width: 320px;
    background-color: #080000;
    border: 3px solid var(--color-red-dark);
    box-shadow: 8px 8px 0 0 #000, inset 0 0 0 1px #1a0000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: ai-panel-open 0.12s steps(3, end) both;
}

.ai-chat-panel[hidden] { display: none; }

@keyframes ai-panel-open {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* Panel header */
.ai-chat-header {
    font-size: 7px;
    color: var(--color-white);
    letter-spacing: 2px;
    padding: 10px 14px;
    background-color: var(--color-red-dark);
    border-bottom: 2px solid var(--color-red);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.ai-chat-header-icon  { font-size: 12px; }

.ai-chat-header-badge {
    font-size: 5px;
    color: var(--color-gray);
    letter-spacing: 1px;
    border: 1px solid #550000;
    padding: 2px 6px;
}

.ai-chat-close {
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    color: #ffffff;
    background: #880000;
    border: 2px solid #ffffff;
    cursor: pointer;
    margin-left: auto;
    padding: 4px 8px;
    line-height: 1;
    flex-shrink: 0;
}

.ai-chat-close:hover {
    background: #cc1111;
    box-shadow: 2px 2px 0 #000;
}

/* ── Message feed ── */
.ai-chat-messages {
    height: 300px;
    overflow-y: auto;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ai-chat-messages::-webkit-scrollbar       { width: 4px; }
.ai-chat-messages::-webkit-scrollbar-track { background: #0a0000; }
.ai-chat-messages::-webkit-scrollbar-thumb { background: var(--color-red-dark); }

/* ── Message bubbles ── */
.ai-msg {
    max-width: 90%;
    font-size: 6px;
    letter-spacing: 0.5px;
    line-height: 2.2;
    animation: ai-msg-in 0.1s steps(2, end) both;
}

@keyframes ai-msg-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);   }
}

.ai-msg p {
    padding: 8px 11px;
    border: 2px solid;
    position: relative;
    margin: 0;
}

/* Bot — left aligned */
.ai-msg--bot                   { align-self: flex-start; color: var(--color-off-white); }
.ai-msg--bot p                 { border-color: var(--color-red-dark); background-color: #0f0000; }
.ai-msg--bot p::before         { content: '▶'; position: absolute; left: -11px; top: 8px; font-size: 7px; color: var(--color-red-dark); }

/* User — right aligned */
.ai-msg--user                  { align-self: flex-end; color: var(--color-white); }
.ai-msg--user p                { border-color: #3a0000; background-color: #160000; }
.ai-msg--user p::after         { content: '◀'; position: absolute; right: -11px; top: 8px; font-size: 7px; color: #3a0000; }

/* Typing indicator */
.ai-msg--typing p {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 44px;
}

.ai-msg--typing span {
    display: inline-block;
    width: 5px;
    height: 5px;
    background-color: var(--color-red);
    flex-shrink: 0;
    animation: ai-dot 1s steps(2, end) infinite;
}

.ai-msg--typing span:nth-child(2) { animation-delay: 0.25s; }
.ai-msg--typing span:nth-child(3) { animation-delay: 0.5s;  }

@keyframes ai-dot {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.15; }
}

/* ── Compose bar ── */
.ai-chat-compose {
    border-top: 2px solid var(--color-red-dark);
    padding: 10px 12px;
    display: flex;
    gap: 8px;
    background-color: #060000;
    flex-shrink: 0;
}

.ai-chat-input {
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    color: var(--color-white);
    background-color: #0d0000;
    border: 2px solid var(--color-gray);
    padding: 8px 10px;
    flex: 1;
    outline: none;
    letter-spacing: 1px;
    min-width: 0;
}

.ai-chat-input:focus        { border-color: var(--color-red-dark); }
.ai-chat-input::placeholder { color: var(--color-gray); opacity: 1; }

.ai-chat-send {
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    color: var(--color-white);
    background-color: var(--color-red);
    border: 2px solid var(--color-white);
    padding: 8px 13px;
    cursor: pointer;
    line-height: 1;
    box-shadow: 3px 3px 0 0 var(--color-red-dark);
    flex-shrink: 0;
    transition: none;
}

.ai-chat-send:hover  { transform: translate(1px, 1px); box-shadow: 2px 2px 0 0 var(--color-red-dark); }
.ai-chat-send:active { transform: translate(3px, 3px); box-shadow: none; }
.ai-chat-send:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── Mobile ── */
@media (max-width: 480px) {
    #ai-chat-widget    { bottom: 16px; right: 16px; }
    .ai-chat-panel     { width: calc(100vw - 32px); }
    .ai-chat-messages  { height: 260px; }
}

/* ================================================
   ANLATICI (NARRATOR) BUTONU
   ================================================ */

.rule-narrate-btn {
    display: block;
    width: calc(100% - 36px);
    margin: 0 18px 18px;
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: #000;
    background: #00ccff;
    border: 3px solid var(--color-white);
    padding: 10px 14px;
    letter-spacing: 2px;
    box-shadow: 4px 4px 0 0 #005577;
    cursor: pointer;
    text-align: center;
    transition: none;
    user-select: none;
}

.rule-narrate-btn:hover {
    background: #33ddff;
    box-shadow: 2px 2px 0 0 #005577;
    transform: translate(2px, 2px);
}

.rule-narrate-btn.narrating {
    background: #ff6600;
    color: #fff;
    box-shadow: 2px 2px 0 0 #882200;
    transform: translate(2px, 2px);
    animation: narrate-pulse 0.9s ease-in-out infinite alternate;
}

@keyframes narrate-pulse {
    from { opacity: 1; }
    to   { opacity: 0.65; }
}

/* ================================================
   MOBILE RESPONSIVE — Kurallar Sayfası
   ================================================ */

@media (max-width: 768px) {

    .rules-main {
        padding: 40px 20px 64px;
    }

    /* RPG dialog: yatay → dikey */
    .rpg-dialog {
        flex-direction: column;
        margin-bottom: 48px;
    }

    .rpg-dialog__portrait {
        width: 100%;
        height: 80px;
        border-right: none;
        border-bottom: 4px solid var(--color-white);
        flex-direction: row;
        justify-content: center;
        gap: 16px;
    }

    .rpg-dialog__content {
        padding: 16px 20px;
    }

    /* Kurallar grid: 3 sütun → 1 sütun */
    .rules-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* Orta boyutlarda 2 sütun */
@media (min-width: 480px) and (max-width: 768px) {
    .rules-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}