/* ============================================================
   DailyDraft.lol — styles
   Extracted from index.html to keep the markup file manageable.
   Loaded via <link rel="stylesheet" href="styles.css"> in index.html.
   ============================================================ */

    body {
      background-color: #04070d;
      background-image:
        radial-gradient(circle at 50% 0%, rgba(10, 200, 185, 0.12) 0%, transparent 60%),
        radial-gradient(circle at 50% 100%, rgba(200, 170, 110, 0.08) 0%, transparent 50%),
        linear-gradient(to bottom, rgba(6, 10, 18, 0.90), rgba(4, 7, 13, 0.98));
      font-family: 'Inter', sans-serif;
      user-select: none;
    }

    /* Hextech Golden Frame Glow */
    .hextech-border {
      position: relative;
      border: 1px solid #c8aa6e;
      box-shadow: 0 0 15px rgba(200, 170, 110, 0.15), inset 0 0 15px rgba(200, 170, 110, 0.08);
    }

    /* Corner accents for Hextech styling */
    .hex-corner {
      position: relative;
    }
    .hex-corner::before, .hex-corner::after {
      content: '';
      position: absolute;
      width: 6px;
      height: 6px;
      border-color: #f0e6d2;
      pointer-events: none;
      z-index: 10;
    }
    .hex-corner::before {
      top: -1px;
      left: -1px;
      border-top: 2px solid #f0e6d2;
      border-left: 2px solid #f0e6d2;
    }
    .hex-corner::after {
      bottom: -1px;
      right: -1px;
      border-bottom: 2px solid #f0e6d2;
      border-right: 2px solid #f0e6d2;
    }

    /* Pulse Glows */
    @keyframes goldPulse {
      0%, 100% { box-shadow: 0 0 12px rgba(200, 170, 110, 0.3); border-color: #c8aa6e; }
      50% { box-shadow: 0 0 28px rgba(240, 230, 210, 0.7); border-color: #f0e6d2; }
    }
    .animate-gold-pulse {
      animation: goldPulse 2s infinite ease-in-out;
    }

    /* ===== Champion Select splash panels ===== */
    .splash-panel {
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }
    .splash-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 20%;
      background-color: #0a1220;
      opacity: 0;
      transform: scale(1.06);
      transition: opacity 0.5s ease, transform 3s ease;
      z-index: 0;
    }
    .splash-bg.is-loaded {
      opacity: 1;
      transform: scale(1);
    }
    .splash-fallback {
      position: absolute;
      inset: 0;
      z-index: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 42px;
      opacity: 0.25;
    }
    /* Scrim sits only behind the text block (bottom) so the portrait itself stays vivid up top,
       matching how the League client keeps splash art clear and only darkens near labels. */
    .splash-scrim-blue {
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(to top, rgba(3,8,16,0.95) 0%, rgba(3,8,16,0.78) 22%, rgba(3,8,16,0.25) 48%, rgba(3,8,16,0.15) 65%, rgba(3,8,16,0.35) 100%),
        linear-gradient(105deg, rgba(3,8,16,0.55) 0%, rgba(3,8,16,0.05) 55%);
    }
    .splash-scrim-red {
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(to top, rgba(18,4,7,0.95) 0%, rgba(18,4,7,0.78) 22%, rgba(18,4,7,0.25) 48%, rgba(18,4,7,0.15) 65%, rgba(18,4,7,0.35) 100%),
        linear-gradient(255deg, rgba(18,4,7,0.55) 0%, rgba(18,4,7,0.05) 55%);
    }

    /* Phase bar team-tinted backdrop */
    .phase-bar {
      background:
        linear-gradient(90deg, rgba(10,40,70,0.55) 0%, rgba(10,20,30,0.4) 45%, rgba(10,20,30,0.4) 55%, rgba(70,15,20,0.55) 100%),
        #0a1220;
    }

    /* Role select icon buttons (mimics client position-select) */
    .role-icon-btn {
      width: 38px;
      height: 38px;
      border-radius: 9999px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s ease;
      border: 1px solid #1e282d;
      background: #0a1220;
    }
    .role-icon-btn img {
      width: 19px;
      height: 19px;
      opacity: 0.7;
    }
    .role-icon-btn:hover {
      border-color: rgba(200,170,110,0.5);
    }
    .role-icon-btn:hover img { opacity: 1; }
    .role-icon-btn.active {
      background: linear-gradient(180deg, #c8aa6e, #785a28);
      border-color: #f0e6d2;
      box-shadow: 0 0 12px rgba(200,170,110,0.5);
    }
    .role-icon-btn.active img {
      opacity: 1;
      filter: brightness(0) saturate(100%);
    }
    .role-icon-btn .all-badge {
      font-size: 9px;
      font-weight: 900;
      color: #8a97a8;
    }
    .role-icon-btn.active .all-badge { color: #04070d; }

    /* Champion-select team columns (Top / Jungle / Mid / Bot / Support rows per side) */
    .team-column {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 4px;
    }
    .team-slot {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 4px 2px;
      border-radius: 8px;
      opacity: 0.3;
      filter: grayscale(85%);
      transition: opacity 0.35s ease, filter 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
    }
    .team-slot.active-lane {
      opacity: 1;
      filter: grayscale(0%);
    }
    .team-slot-blue.active-lane {
      background: rgba(10, 45, 75, 0.4);
      box-shadow: inset 0 0 0 1px rgba(10, 200, 185, 0.5);
    }
    .team-slot-red.active-lane {
      background: rgba(65, 12, 16, 0.4);
      box-shadow: inset 0 0 0 1px rgba(232, 64, 87, 0.5);
    }
    .team-slot-avatar {
      width: 34px;
      height: 34px;
      border-radius: 6px;
      background: #0a1220;
      border: 1px solid #1e282d;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
      flex-shrink: 0;
    }
    .team-slot-blue.active-lane .team-slot-avatar { border-color: #0ac8b9; }
    .team-slot-red.active-lane .team-slot-avatar { border-color: #e84057; }
    .team-slot-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .team-slot-qmark { font-size: 12px; color: #4b5563; font-weight: 800; }
    .team-slot-role-icon {
      width: 15px;
      height: 15px;
      filter: brightness(0) saturate(100%) invert(60%);
      opacity: 0.7;
    }
    .team-slot.active-lane .team-slot-role-icon { opacity: 1; }
    @media (min-width: 1024px) {
      .team-slot-avatar { width: 42px; height: 42px; }
      .team-slot-role-icon { width: 17px; height: 17px; }
    }

    /* Champion grid icon size — set here directly (not as a Tailwind
       arbitrary-value class) since the browser-based Tailwind JIT compiler
       doesn't reliably parse bracket syntax containing commas like
       grid-cols-[repeat(auto-fill,36px)]. Change the 36px below to resize
       every icon in the selection grid. */
    #champion-grid {
      grid-template-columns: repeat(auto-fill, 52px);
    }

    /* Tight champ-select style grid cells */
    .champ-cell {
      aspect-ratio: 1 / 1;
      border-radius: 6px;
      position: relative;
      cursor: pointer;
      overflow: hidden;
      transition: transform 0.12s ease, box-shadow 0.12s ease;
      border: 1px solid #1e282d;
      background: #0a1220;
    }
    .champ-cell:not(.locked):hover {
      transform: translateY(-2px) scale(1.04);
      border-color: #c8aa6e;
      z-index: 5;
    }
    .champ-cell.selected {
      border-color: #0ac8b9;
      box-shadow: 0 0 0 2px rgba(10,200,185,0.6), 0 0 14px rgba(10,200,185,0.45);
    }
    .champ-cell.locked {
      opacity: 0.28;
      cursor: not-allowed;
      filter: grayscale(60%);
    }
    .champ-cell .champ-name-tag {
      position: absolute;
      left: 0; right: 0; bottom: 0;
      font-size: 8.5px;
      text-align: center;
      padding: 1.5px 1px;
      background: linear-gradient(to top, rgba(0,0,0,0.92), transparent);
      color: #e8e2d4;
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Custom Scrollbar */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    ::-webkit-scrollbar-track {
      background: #060a12;
    }
    ::-webkit-scrollbar-thumb {
      background: #1e282d;
      border: 1px solid #785a28;
      border-radius: 3px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #c8aa6e;
    }