body { background: linear-gradient(to bottom, #1b103f, #090d28); }
    .tab-button { padding: 0.75rem 1.5rem; border-radius: 9999px; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 0 0 1px rgba(255,255,255,0.1); font-size: 1.1rem; }
    .active-tab { background: linear-gradient(to right, #7f5af0, #2cb67d); color: white; box-shadow: 0 0 10px rgba(127, 90, 240, 0.6);}
    .inactive-tab { background-color: #2e2e3a; color: #a0aec0;}
    .inactive-tab:hover { background-color: #3a3a4d; color: #ffffff;}
    .flag-tab { border-radius: 9999px; padding: 0.5rem 0.9rem; font-size: 1.85rem; background: #222; border: 2px solid transparent; margin: 0 0.25rem; transition: 0.2s; box-shadow: 0 2px 12px 0 rgba(90,90,120,0.06); outline: none; display: flex; align-items: center; justify-content: center; line-height: 1; height: 3.2rem; width: 3.7rem; }
    .flag-tab.selected { background: linear-gradient(to right, #7f5af0, #2cb67d); color: white; border-color: #fff; filter: brightness(1.15) drop-shadow(0 2px 8px #7f5af088);}
    .flag-img { width: 2.2rem; height: 1.6rem; border-radius: 0.4rem; object-fit: cover; display: block;}
    .wild-btn { margin-left: 0.75rem; background: linear-gradient(to right, #ffde57, #fc7e1e); color: #1b103f; font-weight: 700; border-radius: 2rem; padding: 0.7rem 1.3rem; font-size: 1.2rem; box-shadow: 0 2px 10px #0003; border: none; transition: 0.2s; }
    .wild-btn:hover { background: linear-gradient(to right, #fc7e1e, #ffde57); color: #111; }
    .overlay-spin {
      position: fixed; z-index: 100; inset: 0; background: rgba(26,18,48,0.94); display: flex; align-items: center; justify-content: center; flex-direction: column;
      animation: fadeIn 0.4s;
    }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    .spin-wheel {
      border: 8px solid #fff;
      border-radius: 50%;
      width: 130px; height: 130px;
      border-top: 8px solid #ffde57;
      border-right: 8px solid #2cb67d;
      border-bottom: 8px solid #7f5af0;
      border-left: 8px solid #fc7e1e;
      animation: spin 1s linear infinite;
      margin-bottom: 1.3rem;
    }
    @keyframes spin { 100% { transform: rotate(360deg);} }
    .wild-card-center {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 350px;
      grid-column: 1 / -1;
    }
    @media (max-width: 1024px) {
      .wild-card-center { min-height: 220px; }
    }
    /* Feedback Widget Styles */
    .feedback-widget-float { position:fixed; top:2rem; left:2rem; z-index:9999; }
    .feedback-form-panel { display:none; background:#18122b; border-radius:1em; box-shadow:0 2px 12px #0008; padding:1.5em 1.2em; width:350px; max-width:calc(100vw - 2em); margin-top:0.7em; }
    .feedback-form-panel.active { display:block; }
    .feedback-form-panel h3 { font-size:1.25em; font-weight:700; color:#7f5af0; margin-bottom:0.5em; }
    .feedback-form-panel label { font-size:1em; font-weight:600; color:#fff; margin-top:0.5em; }
    .feedback-form-panel textarea, .feedback-form-panel input[type="email"] {
      width:100%; margin-bottom:0.7em; border-radius:0.5em; padding:0.5em; border:none; background:#22263a; color:#fff;
    }
    .feedback-form-panel button[type="submit"] {
      background:linear-gradient(to right,#7f5af0,#2cb67d); color:#fff; padding:0.7em 1.2em; border-radius:1em; font-weight:700; border:none; cursor:pointer; width:100%;
    }
    .feedback-form-panel .feedback-form-close-btn { background:none; border:none; color:#aaa; font-size:1.3em; cursor:pointer; float:right; }
    .feedback-message { margin-top:0.7em; font-size:0.95em; min-height:1.3em; }
    /* Trailer Modal Styles */
    #trailer-modal-bg {
      display: none; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh;
      background: rgba(0,0,0,0.85); z-index: 10001; align-items: center; justify-content: center;
    }
    #trailer-modal-bg.active { display: flex; }
    #trailer-modal {
      background: #18122b; padding: 1.5em; border-radius: 1em; box-shadow: 0 2px 18px #000b; position: relative;
      max-width: 96vw; max-height: 90vh; display: flex; flex-direction: column; align-items: center;
    }
    #trailer-modal iframe {
      width: 80vw; max-width: 720px; height: 45vw; max-height: 405px; border-radius: 0.7em; background: #000;
    }
    #trailer-modal .close-btn {
      position: absolute; top: 0.9em; right: 1.2em; font-size: 2em; color: #fff; background: none; border: none; cursor: pointer;
      transition: color 0.2s;
    }
    #trailer-modal .close-btn:hover { color: #7f5af0; }
    #trailer-modal .no-trailer {
      color: #ff7171; font-weight: bold; margin-top: 1em; text-align: center;
    }

    .search-btn {
        margin-left: 0.75rem;
        background: linear-gradient(to right, #ffde57, #fc7e1e);
        color: #1b103f;
        font-weight: 700;
        border-radius: 2rem;
        padding: 0.7rem 1.3rem;
        font-size: 1.2rem;
        box-shadow: 0 2px 10px #0003;
        border: none;
        transition: 0.2s;
    }