/* BracketMaker — styles.css (distinctive neon theme, accessible, responsive)
   Author: You + ChatGPT
   Notes: Pure CSS, no frameworks. Tailored to index.html structure. */

/* =============================
   Root theme & base reset
   ============================= */
   :root{
      --bg-0:#070a19;            /* deep space */
      --bg-1:#0a1140;            /* dark indigo */
      --panel:#10163c;           /* panel base */
      --card:#121b52;            /* cards base */
      --text:#eaf2ff;            /* main text */
      --muted:#a8b8ff;           /* secondary text */
      --hint:#93a3e6;            /* helper */
      --accent:#67ffe7;          /* mint neon */
      --accent-2:#6aa3ff;        /* blue neon */
      --accent-3:#ff8bd1;        /* pink punch */
      --border:#26357a;          /* borders */
      --border-2:#2e3c8c;        /* focus border */
      --bad:#ff6b88;             /* danger */
      --good:#4ef0b0;            /* success */
      --radius:18px;
      --radius-sm:12px;
      --shadow:0 12px 32px rgba(0,0,0,.36);
    }
    
    *{box-sizing:border-box}
    html,body{height:100%}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
      color:var(--text);
      /* Layered animated background */
      background:
        radial-gradient(1200px 600px at 10% 0%, rgba(106,163,255,.20), transparent 60%),
        radial-gradient(900px 600px at 90% 100%, rgba(103,255,231,.16), transparent 60%),
        linear-gradient(130deg,var(--bg-0) 0%, var(--bg-1) 55%, var(--bg-0) 100%);
      background-attachment: fixed;
      animation:bgShift 28s ease-in-out infinite alternate;
    }
    @keyframes bgShift{0%{background-position:0 0,0 0,0 0}100%{background-position:10% -6%,-8% 12%,0 0}}
    
    .no-js{background:#201; color:#fff; padding:12px; text-align:center}
    
    /* =============================
       Topbar
       ============================= */
    .topbar{position:sticky; top:0; z-index:10; backdrop-filter:blur(8px);}
    .topbar::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,15,40,.75), rgba(10,15,40,.6)); border-bottom:1px solid rgba(110,170,255,.2)}
    .topbar__inner{position:relative; max-width:1200px; margin:auto; display:flex; gap:12px; align-items:center; padding:12px 16px}
    .brand{font-weight:800; letter-spacing:.2px}
    .brand span{color:var(--accent); text-shadow:0 0 18px rgba(103,255,231,.35)}
    .nav{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
    
    /* =============================
       Buttons
       ============================= */
    .btn{border-radius:12px; border:1px solid var(--border); background:#12205b; color:var(--text); padding:10px 12px; font-weight:700; cursor:pointer; box-shadow:var(--shadow); transition:.15s; text-shadow:0 0 10px rgba(146,210,255,.35)}
    .btn:hover{transform:translateY(-1px); border-color:#3d55b1; box-shadow:0 14px 30px rgba(0,0,0,.42), 0 0 18px rgba(120,200,255,.22)}
    .btn:active{transform:translateY(0)}
    .btn.ghost{background:transparent}
    .btn.accent{background:linear-gradient(135deg,var(--accent-2),var(--accent)); border:0; color:#00112a; box-shadow:0 0 24px rgba(106,163,255,.35), 0 0 40px rgba(103,255,231,.22)}
    
    /* =============================
       Layout
       ============================= */
    .app{max-width:1200px; margin:18px auto; padding:0 16px; display:grid; gap:18px}
    .panel{background:var(--panel); border:1px solid rgba(110,170,255,.18); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
    .panel__title{margin:0; padding:14px 16px; border-bottom:1px solid rgba(110,170,255,.18); background:linear-gradient(180deg,#0e1538,#0b1232)}
    .panel__content{padding:14px 16px}
    
    /* Full-bleed bracket panel */
    .panel--bracket{margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); border-radius:0; border-inline:0}
    .panel--bracket .panel__content{padding:0}
    
    /* =============================
       Form / Inputs
       ============================= */
    .form{display:grid; gap:14px}
    .row{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-start} /* align fix */
    .field{display:grid; gap:6px; min-width:220px; flex:1}
    .field label{font-size:.95rem; color:var(--muted); min-height:1.2rem} /* label height for alignment */
    .field input,.field textarea,.field select{width:100%; padding:11px 12px; border-radius:12px; background:#0c1340; border:1px solid var(--border-2); color:var(--text); -webkit-text-fill-color:var(--text); box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
    .field input::placeholder,.field textarea::placeholder{color:#c6d4ff}
    .field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:#7ed5ff; box-shadow:0 0 0 2px rgba(110,210,255,.25), 0 0 22px rgba(110,210,255,.18)}
    .hint{font-size:.87rem; color:var(--hint)}
    
    /* Bulk paste */
    .bulk{border:1px dashed #3a458a; padding:12px; border-radius:12px; background:rgba(30,40,110,.35)}
    .bulk textarea{min-height:120px}
    
    /* Toolbar */
    .toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
    .toolbar.between{justify-content:space-between}
    .toolbar.end{justify-content:flex-end}
    .pill{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:#0f1538; border:1px solid #27306a; color:var(--muted); font-size:.88rem}
    
    /* =============================
       Item cards in Create panel
       ============================= */
    .items{display:grid; gap:12px}
    .item-card{display:grid; grid-template-columns:72px 1fr auto; gap:12px; align-items:center; background:linear-gradient(180deg,#11194f,#0f143c); border:1px solid #2b3e8a; border-radius:14px; padding:10px; position:relative; animation:rise .25s ease-out}
    .thumb{width:72px; height:72px; border-radius:12px; object-fit:cover; background:#0c1130; border:1px solid #2b3e8a; aspect-ratio:1/1} /* keep square even if dimensions shift */
    .item-card__body{display:grid; gap:8px}
    .item-card input{background:#0d1444}
    .trash{background:transparent; color:#ffd0d6; border:1px solid #5a2b3a; border-radius:10px; padding:8px 10px; cursor:pointer}
    .trash:hover{box-shadow:0 0 12px rgba(255,120,150,.25)}
    
    /* =============================
       Play view — head-to-head cards
       ============================= */
    .vs{display:grid; grid-template-columns:1fr 40px 1fr; gap:16px; align-items:stretch}
    .or{display:flex; align-items:center; justify-content:center; color:var(--muted)}
    .card{border:1px solid #2a3f8c; background:linear-gradient(180deg,var(--card),#11163f); border-radius:16px; padding:14px; display:grid; gap:10px; cursor:pointer; transition:transform .15s ease,border-color .15s ease, box-shadow .15s ease; animation:fadeIn .25s ease-out; box-shadow:var(--shadow), 0 0 0 1px rgba(255,255,255,.02)}
    .card:hover{transform:translateY(-2px) scale(1.01); border-color:#3c4aa0; box-shadow:0 14px 30px rgba(0,0,0,.42), 0 0 22px rgba(106,163,255,.22)}
    .card__media{width:100%; height:320px; border-radius:12px; border:1px solid #2a3f8c; background:#0c1130; display:flex; align-items:center; justify-content:center; color:#6a7bd8}
    .card__title{margin:0; font-size:1.15rem}
    .card__desc{margin:0; color:var(--muted); font-size:.95rem}
    @media (max-width:900px){.card__media{height:240px}}
    
    /* selection animations (to be toggled via JS) */
    @keyframes winPulse{0%{transform:scale(1)}50%{transform:scale(1.03) translateY(-2px)}100%{transform:scale(1)}}
    @keyframes loseFade{to{opacity:.4; filter:saturate(.6) blur(.3px)}}
    .card.winPulse{animation:winPulse .42s ease both; box-shadow:0 0 22px rgba(103,255,231,.3)}
    .card.loseFade{animation:loseFade .42s ease forwards}
    
    /* “extra mile”: show a soft fallback text when there is no image */
    .card__media.fallback{position:relative}
    .card__media.fallback::after{
      content:"No image";
      font-weight:700; letter-spacing:.3px;
      color:#7fa2ff; opacity:.85;
      text-shadow:0 0 18px rgba(127,162,255,.25);
    }
    
    /* Winner box */
    .winner{display:flex; gap:14px; align-items:center; padding:12px; background:#0e1332; border:1px solid #2b3e8a; border-radius:14px; margin-top:8px}
    .winner img{width:70px; height:70px; object-fit:cover; border-radius:12px; border:1px solid #2b3e8a}
    .winner__label{opacity:.75; font-size:.95rem}
    .winner__name{font-weight:800; font-size:1.25rem}
    .winner__desc{color:var(--muted)}
    .winner.champion{box-shadow:0 0 30px rgba(103,255,231,.35),0 0 60px rgba(106,163,255,.25); animation:champion 1.2s ease-in-out infinite alternate; border-color:#4ad7ff}
    @keyframes champion{from{transform:translateY(0)}to{transform:translateY(-2px)}}
    
    /* =============================
       Bracket view (symmetric tree)
       ============================= */
    .bracket-wrap{position:relative; overflow:auto; display:flex; justify-content:center; align-items:center; min-height:62vh; height:88vh; background:linear-gradient(180deg,#0b1030 0%, #0a0f2b 100%)}
    .svg-lines{position:absolute; inset:0; pointer-events:none}
    .svg-lines path{stroke:var(--accent-2); stroke-width:2.5; fill:none; stroke-linecap:square; stroke-linejoin:miter}
    
    .bracket{display:grid; gap:18px; padding:18px; align-items:center; min-width:900px}
    .round-col{display:grid; gap:12px; align-content:center}
    .round-col h4{margin:0; color:var(--muted); font-weight:700; text-align:center}
    .match{position:relative; background:#12163f; border:1px solid rgba(120,150,255,.35); border-radius:14px; padding:8px 10px; min-width:230px; box-shadow:var(--shadow)}
    .slot{display:flex; align-items:center; gap:10px; padding:6px; border-radius:10px; transition:background .2s ease, opacity .2s ease, transform .2s ease}
    .slot .dot{width:8px; height:8px; border-radius:999px; background:#3a4d9a}
    .slot .name{font-weight:700}
    .slot.win{outline:2px solid var(--accent); background:#0e1f2a; box-shadow:0 0 14px rgba(103,255,231,.35)}
    .slot.win .dot{background:var(--accent)}
    .slot.los{opacity:.6}
    
    /* =============================
       Effects host
       ============================= */
    #fx{position:fixed; inset:0; pointer-events:none; z-index:40}
    
    /* =============================
       Animations: common
       ============================= */
    @keyframes fadeIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
    @keyframes rise{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
    
    /* =============================
       Responsive tweaks
       ============================= */
    @media (max-width:1100px){
      .app{padding:0 12px}
    }
    @media (max-width:900px){
      .match{min-width:200px}
      .bracket{min-width:700px}
    }
    
    .i-name {
      color: grey;
    }

    .i-img {
      color: grey;
    }

    .i-desc {
      color: grey;
    }