/* =========================
   Bonus System UI – Dark + Orange + Glass
   Palette:
   - Accent: #FF740F
   - Dark:   #111318
   - Light:  #F0F0F0
   ========================= */

   :root{
    --bg: #0d0f13;
    --panel: rgba(17, 19, 24, 0.72); /* glass surface */
    --panel-2: rgba(17, 19, 24, 0.55);
    --stroke: rgba(255, 255, 255, 0.08);
    --stroke-strong: rgba(255, 255, 255, 0.14);
  
    --text: #f0f0f0;
    --muted: rgba(240,240,240,0.72);
    --muted-2: rgba(240,240,240,0.55);
  
    --accent: #ff740f;
    --accent-2: #ff9a3d;
    --danger: #ff3636;
    --success: #33d17a;
  
    --shadow: 0 14px 40px rgba(0,0,0,0.55);
    --shadow-soft: 0 10px 26px rgba(0,0,0,0.38);
  
    --r-lg: 22px;
    --r-md: 16px;
    --r-sm: 12px;
  
    --blur: 14px;
    --gap: 12px;
  
    --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  }
  
  *{ box-sizing: border-box; }
  html, body{ height:100%; }
  body{
    margin:0;
    font-family: var(--font);
    color: var(--text);
    background:
      radial-gradient(1200px 700px at 10% 15%, rgba(255,116,15,0.22), transparent 55%),
      radial-gradient(900px 600px at 88% 22%, rgba(255,154,61,0.14), transparent 58%),
      radial-gradient(1200px 800px at 55% 115%, rgba(255,116,15,0.10), transparent 60%),
      linear-gradient(180deg, #0b0d11, var(--bg));
    overflow-x:hidden;
  }
  
  /* subtle grain (optional feel of “premium”) */
  body:before{
    content:"";
    position: fixed;
    inset:0;
    pointer-events:none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
    opacity: .05;
    mix-blend-mode: overlay;
  }
  
  /* Layout */
  .container{
    max-width: 1180px;
    margin: 0 auto;
    padding: 20px 18px 34px;
  }
  
  .grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  @media (max-width: 980px){
    .grid{ grid-template-columns: 1fr; }
  }
  
  /* Topbar */
  .topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    padding: 14px 14px;
    margin-bottom: 14px;
  
    border: 1px solid var(--stroke);
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, rgba(17,19,24,0.75), rgba(17,19,24,0.55));
    backdrop-filter: blur(var(--blur));
    box-shadow: var(--shadow-soft);
    position: sticky;
    top: 10px;
    z-index: 30;
  }
  
  .brand{
    display:flex;
    align-items:center;
    gap: 12px;
    min-width: 220px;
  }
  .brand h1{
    font-size: 16px;
    margin:0;
    letter-spacing: .2px;
    font-weight: 700;
    opacity: .95;
  }
  .logo{
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display:grid;
    place-items:center;
    background:
      radial-gradient(18px 18px at 30% 30%, rgba(255,255,255,0.22), transparent 65%),
      linear-gradient(135deg, rgba(255,116,15,0.95), rgba(255,154,61,0.85));
    box-shadow: 0 10px 20px rgba(255,116,15,0.16);
  }
  
  .nav{
    display:flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content:flex-end;
  }
  .nav a{
    text-decoration:none;
    color: var(--muted);
    font-size: 13px;
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.03);
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
  }
  .nav a:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.10);
  }
  .nav a.active{
    color: var(--text);
    border-color: rgba(255,116,15,0.40);
    background: rgba(255,116,15,0.14);
  }
  
  /* Cards */
  .card{
    border-radius: var(--r-lg);
    border: 1px solid var(--stroke);
    background: linear-gradient(180deg, rgba(17,19,24,0.72), rgba(17,19,24,0.50));
    backdrop-filter: blur(var(--blur));
    box-shadow: var(--shadow);
    overflow:hidden;
  }
  
  .hd{
    padding: 16px 16px 12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background:
      radial-gradient(900px 240px at 18% 0%, rgba(255,116,15,0.12), transparent 55%),
      linear-gradient(180deg, rgba(17,19,24,0.65), rgba(17,19,24,0.42));
  }
  .hd h2{
    margin:0;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .15px;
  }
  .bd{
    padding: 14px 16px 16px;
  }
  
  .hr{
    height:1px;
    background: rgba(255,255,255,0.07);
    margin: 14px 0;
  }
  
  /* Typography helpers */
  .small{
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.45;
  }
  .title{
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .1px;
  }
  .meta{
    color: var(--muted-2);
    font-size: 12px;
    margin-top: 2px;
  }
  
  /* Rows / lists */
  .row{
    display:flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items:center;
  }
  
  .list{ display:flex; flex-direction:column; gap: 10px; }
  
  .item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    padding: 12px 12px;
  
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.06);
    background:
      radial-gradient(420px 120px at 20% 0%, rgba(255,116,15,0.08), transparent 55%),
      rgba(255,255,255,0.03);
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
  }
  .item:hover{
    transform: translateY(-1px);
    border-color: rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
  }
  
  /* Badges / chips */
  .badge{
    font-size: 11.5px;
    padding: 3px 10px;
    border-radius: 999px;
    color: rgba(255,255,255,0.92);
    border: 1px solid rgba(255,116,15,0.35);
    background: rgba(255,116,15,0.14);
  }
  
  .chip{
    display:inline-flex;
    align-items:center;
    gap: 8px;
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--text);
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
  }
  
  /* Inputs */
  .input, select, textarea{
    width:100%;
    color: var(--text);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px;
    padding: 11px 12px;
    outline: none;
    font-size: 13px;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  }
  .input:focus, select:focus, textarea:focus{
    border-color: rgba(255,116,15,0.55);
    box-shadow: 0 0 0 4px rgba(255,116,15,0.14);
    background: rgba(255,255,255,0.05);
  }
  ::placeholder{ color: rgba(240,240,240,0.38); }
  
  /* Buttons */
  .btn{
    appearance:none;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    color: var(--text);
    padding: 10px 12px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 13px;
    cursor:pointer;
    transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
    user-select:none;
  }
  .btn:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.16);
  }
  .btn:active{ transform: translateY(0px); }
  
  .btn.primary{
    border-color: rgba(255,116,15,0.45);
    background:
      radial-gradient(22px 22px at 25% 20%, rgba(255,255,255,0.26), transparent 70%),
      linear-gradient(135deg, rgba(255,116,15,0.98), rgba(255,154,61,0.84));
    box-shadow: 0 12px 24px rgba(255,116,15,0.18);
  }
  .btn.primary:hover{
    box-shadow: 0 14px 28px rgba(255,116,15,0.22);
  }
  
  .btn.danger{
    border-color: rgba(255,54,54,0.45);
    background: rgba(255,54,54,0.14);
  }
  .btn.danger:hover{ background: rgba(255,54,54,0.18); }
  
  /* Avatars */
  .avatar{
    width: 48px;
    height: 48px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.10);
    background:
      radial-gradient(18px 18px at 30% 30%, rgba(255,255,255,0.14), transparent 65%),
      rgba(255,255,255,0.03);
    display:grid;
    place-items:center;
    overflow:hidden;
  }
  .avatar img{
    width:100%;
    height:100%;
    object-fit: cover;
  }
  .avatar.mini{
    width: 38px;
    height: 38px;
    border-radius: 14px;
  }
  
  /* Full season block wrapper */
  .fullseason{
    border-radius: var(--r-lg);
    border: 1px solid rgba(255,255,255,0.06);
    background:
      radial-gradient(700px 260px at 20% 0%, rgba(255,116,15,0.12), transparent 55%),
      rgba(255,255,255,0.02);
    padding: 14px;
  }
  
  /* Stickers grid 10 + 10 */
  .sticker-grid{
    display:grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 12px;
    justify-items:center;
  }
  @media (max-width: 900px){
    .sticker-grid{ grid-template-columns: repeat(5, 1fr); }
  }
  @media (max-width: 520px){
    .sticker-grid{ grid-template-columns: repeat(4, 1fr); }
  }
  
  /* Sticker circle */
  .sticker{
    width: 54px;
    height: 54px;
    border-radius: 999px;
    position: relative;
    border: 1px solid rgba(255,255,255,0.10);
    background:
      radial-gradient(20px 20px at 30% 30%, rgba(255,255,255,0.14), transparent 70%),
      rgba(255,255,255,0.04);
    box-shadow: 0 12px 26px rgba(0,0,0,0.36);
    overflow:hidden;
    transform: translateZ(0);
  }
  .sticker:hover{
    border-color: rgba(255,116,15,0.30);
  }
  
  /* Watermark + fox layers (used by your HTML) */
  .sticker .wm, .sticker .fox{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    opacity:0;
    transform: scale(.98);
    transition: opacity .18s ease, transform .18s ease;
  }
  .sticker.earned .wm,
  .sticker.earned .fox{
    opacity: 1;
    transform: scale(1);
  }
  .sticker.pending .wm,
  .sticker.pending .fox{
    opacity: 1;
    transform: scale(1);
  }
  .sticker.pending .fox{
    filter: grayscale(1) brightness(.9);
    opacity: .78;
  }
  
  /* Modals (with scroll fix) */
  .modal{
    position: fixed;
    inset: 0;
    display:none;
    align-items:center;
    justify-content:center;
    padding: 18px;
    z-index: 50;
    background: rgba(5,6,8,0.62);
    backdrop-filter: blur(10px);
    overflow:auto;
  }
  .modal.open{ display:flex; }
  
  .modal .panel{
    width: min(920px, 100%);
    max-height: calc(100vh - 36px);
    display:flex;
    flex-direction:column;
  
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.10);
    background:
      radial-gradient(900px 420px at 20% 0%, rgba(255,116,15,0.14), transparent 58%),
      rgba(17,19,24,0.72);
    box-shadow: 0 22px 70px rgba(0,0,0,0.65);
  }
  
  .modal .panel .hd{
    position: sticky;
    top: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(17,19,24,0.98), rgba(17,19,24,0.86));
    backdrop-filter: blur(var(--blur));
  }
  
  .modal .panel .bd{
    overflow:auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 18px;
  }
  
  /* Optional: nicer scrollbars */
  *::-webkit-scrollbar{ width: 10px; height: 10px; }
  *::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,0.10);
    border-radius: 999px;
    border: 2px solid rgba(0,0,0,0);
    background-clip: padding-box;
  }
  *::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,0.16); }
  
  /* Split helper */
  .split{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  @media (max-width: 900px){
    .split{ grid-template-columns: 1fr; }
  }
  
  /* Links inside cards */
  a.btn{ display:inline-flex; align-items:center; justify-content:center; }
  
  /* Selection */
  ::selection{
    background: rgba(255,116,15,0.35);
    color: var(--text);
  }