/*
Theme Name: Sprite Hunters Test Theme
Theme URI: https://www.spritehunters.com/
Author: Sprite Hunters
Description: Test conversion of the current Sprite Hunters interactive HTML prototype into an installable WordPress theme.
Version: 0.1.0
Text Domain: sprite-hunters
*/


  :root{
    --bg:#071a2f;
    --bg2:#0b2b50;
    --panel:#102c4c;
    --panel2:#153a63;
    --sky:#36bdf6;
    --sky2:#79d7ff;
    --ink:#f7fbff;
    --muted:#a9c2d8;
    --red:#ff2a2a;
    --red2:#ff5b5b;
    --yellow:#ffd95a;
    --green:#5ee39b;
    --purple:#ba8cff;
    --line:rgba(255,255,255,.11);
    --shadow:0 16px 40px rgba(0,0,0,.28);
    --radius:22px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;background:
    radial-gradient(circle at 10% 0%, rgba(54,189,246,.24), transparent 28%),
    radial-gradient(circle at 90% 10%, rgba(186,140,255,.18), transparent 22%),
    linear-gradient(180deg,var(--bg2),var(--bg));color:var(--ink);min-height:100vh}
  button,input,select{font:inherit}
  .shell{max-width:1500px;margin:0 auto;padding:0 22px 56px}
  .topbar{position:sticky;top:0;z-index:40;background:rgba(7,26,47,.82);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
  .topbar-inner{max-width:1500px;margin:auto;padding:14px 22px;display:flex;align-items:center;gap:18px}
  .brand{display:flex;align-items:center;gap:12px;min-width:max-content}
  .brand img{width:58px;height:44px;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(0,0,0,.35))}
  .brand-text{line-height:.92}
  .brand-text b{display:block;font-size:22px;letter-spacing:.6px}
  .brand-text span{font-size:11px;color:var(--muted);letter-spacing:2.5px;text-transform:uppercase}
  nav{display:flex;gap:8px;flex:1;justify-content:center;flex-wrap:wrap}
  .navbtn{border:0;color:#dcecff;background:transparent;padding:9px 12px;border-radius:12px;cursor:pointer;font-weight:700}
  .navbtn:hover,.navbtn.active{background:rgba(255,255,255,.09);color:white}
  .top-actions{display:flex;gap:10px;min-width:max-content}
  .btn{border:0;border-radius:13px;padding:11px 15px;font-weight:800;cursor:pointer;transition:.18s transform,.18s filter;background:#f4f8fb;color:#0c2440}
  .btn:hover{transform:translateY(-1px);filter:brightness(1.04)}
  .btn.primary{background:linear-gradient(135deg,var(--red),#ff6a3d);color:white;box-shadow:0 8px 24px rgba(255,42,42,.28)}
  .btn.ghost{background:rgba(255,255,255,.08);color:white;border:1px solid var(--line)}

  .hero{margin-top:24px;position:relative;overflow:hidden;border-radius:30px;padding:34px;background:
    linear-gradient(90deg,rgba(5,37,66,.92) 0%,rgba(5,37,66,.78) 50%,rgba(5,37,66,.16) 100%),
    linear-gradient(135deg,#41c8ff,#1e88d9 54%,#7b70f1);box-shadow:var(--shadow);min-height:275px}
  .hero:after{content:"";position:absolute;right:-90px;bottom:-190px;width:580px;height:580px;border-radius:50%;background:rgba(255,255,255,.12);filter:blur(1px)}
  .hero:before{content:"";position:absolute;right:170px;top:-90px;width:210px;height:210px;border-radius:50%;background:rgba(255,255,255,.15)}
  .hero-content{position:relative;z-index:2;max-width:760px}
  .eyebrow{font-size:12px;letter-spacing:2.2px;text-transform:uppercase;font-weight:900;color:#d9f4ff}
  .hero h1{font-size:clamp(42px,6vw,84px);line-height:.86;margin:13px 0 16px;letter-spacing:-3px;text-transform:uppercase;text-shadow:0 5px 0 rgba(0,0,0,.13)}
  .hero p{font-size:18px;max-width:680px;color:#e7f7ff;line-height:1.5;margin:0 0 24px}
  .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
  .hero-badge{position:absolute;right:26px;bottom:24px;z-index:3;width:200px;aspect-ratio:1;border-radius:38px;background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.28);display:grid;place-items:center;transform:rotate(3deg);box-shadow:var(--shadow)}
  .hero-badge img{width:75%;filter:drop-shadow(0 15px 18px rgba(0,0,0,.28))}


  .featured-guides{margin:18px 0 18px;padding:14px;border:1px solid var(--line);border-radius:22px;background:rgba(10,31,54,.72);box-shadow:0 10px 28px rgba(0,0,0,.16)}
  .featured-guides-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
  .featured-guides-head h3{margin:0;font-size:18px}
  .featured-guides-head p{margin:3px 0 0;color:var(--muted);font-size:13px}
  .featured-guides-link{border:0;background:transparent;color:#dff6ff;font-weight:800;cursor:pointer;padding:7px 8px;border-radius:10px}
  .featured-guides-link:hover{background:rgba(255,255,255,.07)}
  .featured-guides-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .featured-guide-card{display:grid;grid-template-columns:122px 1fr;gap:11px;align-items:center;padding:9px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);cursor:pointer;transition:.18s ease}
  .featured-guide-card:hover{transform:translateY(-2px);background:rgba(255,255,255,.075);border-color:rgba(121,215,255,.35)}
  .featured-guide-thumb{height:72px;border-radius:12px;position:relative;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,#2bc4ff,#7569ff)}
  .featured-guide-card:nth-child(2) .featured-guide-thumb{background:linear-gradient(135deg,#ffbf43,#ff6375)}
  .featured-guide-card:nth-child(3) .featured-guide-thumb{background:linear-gradient(135deg,#8ce7ff,#8f73ff)}
  .featured-guide-thumb:before{content:"";position:absolute;width:90px;height:90px;border-radius:50%;background:rgba(255,255,255,.18);right:-26px;top:-30px}
  .featured-guide-play{position:relative;width:34px;height:34px;border-radius:50%;background:rgba(7,26,47,.78);display:grid;place-items:center;font-size:14px;border:1px solid rgba(255,255,255,.3)}
  .featured-guide-copy{min-width:0}
  .featured-guide-copy b{display:block;font-size:14px;line-height:1.25;margin-bottom:5px}
  .featured-guide-copy small{color:var(--muted);font-size:11px}
  .featured-guide-cta{display:inline-flex;margin-top:7px;color:#fff;font-size:11px;font-weight:900;letter-spacing:.3px;text-transform:uppercase}

  .stats{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:14px;margin:18px 0 26px}
  .stat{background:linear-gradient(180deg,rgba(21,58,99,.94),rgba(13,43,75,.94));border:1px solid var(--line);border-radius:18px;padding:16px 18px;box-shadow:0 10px 24px rgba(0,0,0,.14)}
  .stat small{display:block;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:1px;font-size:10px}
  .stat strong{display:block;font-size:28px;margin-top:5px}
  .progress-wrap{display:flex;align-items:center;gap:14px}
  .progress{height:13px;flex:1;background:rgba(0,0,0,.22);border-radius:999px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
  .progress i{display:block;height:100%;width:42%;background:linear-gradient(90deg,var(--red),var(--yellow));border-radius:inherit}

  .section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:30px 0 15px}
  .section-head h2{font-size:32px;letter-spacing:-1px;margin:0;text-transform:uppercase}
  .section-head p{margin:4px 0 0;color:var(--muted)}
  .filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  .pill{border:1px solid var(--line);background:rgba(255,255,255,.06);color:#dff2ff;padding:9px 12px;border-radius:999px;cursor:pointer;font-weight:800}
  .pill.active{background:white;color:#0f2d4b}
  .search{background:rgba(255,255,255,.08);border:1px solid var(--line);color:white;padding:10px 12px;border-radius:12px;outline:none;min-width:190px}
  .search::placeholder{color:#aac0d4}

  .sprite-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .sprite-card{position:relative;background:linear-gradient(180deg,#163a61,#0f2d4c);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 12px 25px rgba(0,0,0,.18);transition:.18s transform,.18s box-shadow}
  .sprite-card:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(0,0,0,.25)}
  .art{height:230px;display:flex;align-items:flex-end;justify-content:center;position:relative;overflow:hidden;background:
      radial-gradient(circle at 50% 80%, rgba(255,255,255,.24), transparent 32%),
      linear-gradient(180deg,var(--cardA),var(--cardB));}
  .art:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 34%,rgba(0,0,0,.16));}
  .sprite-blob{position:relative;z-index:2;width:120px;height:140px;border-radius:52% 48% 44% 56%/45% 44% 56% 55%;background:linear-gradient(135deg,var(--blob1),var(--blob2));box-shadow:inset -14px -20px 32px rgba(0,0,0,.15),0 18px 25px rgba(0,0,0,.25);margin-bottom:30px}
  .sprite-blob:before,.sprite-blob:after{content:"";position:absolute;top:48px;width:18px;height:22px;border-radius:50%;background:#0a2440;box-shadow:inset 0 0 0 5px rgba(255,255,255,.84)}
  .sprite-blob:before{left:28px}.sprite-blob:after{right:28px}
  .ear{position:absolute;width:48px;height:58px;border-radius:60% 40% 55% 45%;background:inherit;top:-24px;z-index:-1;filter:brightness(.98)}
  .ear.one{left:10px;transform:rotate(-25deg)}.ear.two{right:10px;transform:rotate(25deg)}
  .duckbill{position:absolute;width:52px;height:18px;border-radius:50%;background:#ffcf4a;left:34px;top:77px;display:none}
  .duck .ear{display:none}.duck .duckbill{display:block}.duck{border-radius:55% 45% 50% 50%/45% 48% 52% 55%}
  .card-topline{position:absolute;top:12px;left:12px;right:12px;z-index:3;display:flex;justify-content:space-between;align-items:center}
  .tag{font-size:10px;font-weight:900;letter-spacing:.8px;text-transform:uppercase;background:rgba(6,26,47,.7);backdrop-filter:blur(8px);padding:7px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.12)}
  .tag.new{background:rgba(255,42,42,.92)}
  .card-body{padding:15px}
  .name-row{display:flex;justify-content:space-between;gap:12px;align-items:start}
  .name-row h3{margin:0;font-size:21px}.name-row span{color:var(--muted);font-size:12px;font-weight:800}
  .deck-btn{margin-top:12px;width:100%;display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.07);border:1px solid var(--line);color:white;border-radius:12px;padding:10px 12px;font-weight:850;cursor:pointer}
  .deck{display:none;margin-top:10px;grid-template-columns:repeat(4,1fr);gap:8px}
  .deck.open{display:grid}
  .variant{border:1px solid var(--line);background:rgba(255,255,255,.05);color:white;border-radius:11px;padding:8px 5px;cursor:pointer;text-align:center}
  .variant b{display:block;width:34px;height:34px;border-radius:10px;margin:0 auto 5px;background:linear-gradient(135deg,var(--v1),var(--v2));box-shadow:inset 0 0 0 2px rgba(255,255,255,.14)}
  .variant small{font-size:9px;font-weight:850;color:#dbe8f2}
  .variant{position:relative;overflow:visible}
  .variant.active{outline:2px solid rgba(255,255,255,.78);background:rgba(255,255,255,.11)}
  .mini-crown{position:absolute;right:-5px;top:-8px;width:25px;height:21px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.45));animation:crownPop .34s cubic-bezier(.2,.9,.2,1.25)}
  .master-crown{position:absolute;right:18px;top:54px;z-index:6;width:58px;height:48px;filter:drop-shadow(0 7px 8px rgba(0,0,0,.42));animation:crownPop .4s cubic-bezier(.2,.9,.2,1.35)}
  .master-crown .spark{transform-origin:center;animation:crownSpark 1.6s ease-in-out infinite}
  @keyframes crownPop{0%{transform:scale(.1) rotate(-18deg);opacity:0}68%{transform:scale(1.18) rotate(5deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
  @keyframes crownSpark{0%,100%{opacity:.45}50%{opacity:1}}
  .status-row{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}
  .status{border:1px solid var(--line);background:rgba(255,255,255,.05);color:#dcecff;border-radius:11px;padding:9px 7px;cursor:pointer;font-size:11px;font-weight:900;text-transform:uppercase}
  .status.on.owned{background:rgba(94,227,155,.18);border-color:rgba(94,227,155,.5);color:#8ff6bd}
  .status.on.mastered{background:rgba(255,217,90,.16);border-color:rgba(255,217,90,.5);color:#ffe68e}
  .status.on.wanted{background:rgba(186,140,255,.16);border-color:rgba(186,140,255,.5);color:#d7baff}
  .status.on.trade{background:rgba(54,189,246,.17);border-color:rgba(54,189,246,.5);color:#8bdfff}

  .two-col{display:grid;grid-template-columns:1.4fr .8fr;gap:18px;margin-top:32px}
  .panel{background:linear-gradient(180deg,rgba(21,58,99,.9),rgba(12,39,67,.95));border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:0 12px 28px rgba(0,0,0,.18)}
  .panel h3{font-size:24px;margin:0 0 5px;text-transform:uppercase}.panel p{color:var(--muted);margin:0 0 18px;line-height:1.5}
  .video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
  .video{border-radius:16px;overflow:hidden;background:#0a2743;border:1px solid var(--line)}
  .thumb{aspect-ratio:16/9;background:linear-gradient(135deg,#60d8ff,#875fff);display:grid;place-items:center;position:relative}
  .play{width:54px;height:54px;border-radius:50%;background:white;color:#102f4e;display:grid;place-items:center;font-weight:950;font-size:21px;box-shadow:0 8px 20px rgba(0,0,0,.25)}
  .video div:last-child{padding:12px}.video h4{margin:0 0 4px}.video small{color:var(--muted)}
  .vault-row{display:flex;gap:10px;overflow:auto;padding-bottom:5px}
  .vault-item{min-width:150px;border:1px solid var(--line);background:rgba(255,255,255,.05);border-radius:16px;padding:12px}
  .vault-mini{height:85px;border-radius:12px;background:linear-gradient(135deg,#7e8fa3,#364a61);display:grid;place-items:center;margin-bottom:10px;color:#d2dbe4;font-size:30px}
  .vault-item b{display:block}.vault-item small{color:var(--muted)}

  .admin-preview{margin-top:32px;border:1px dashed rgba(255,255,255,.28);border-radius:22px;padding:20px;background:rgba(255,255,255,.035)}
  .admin-preview h3{margin:0 0 8px}.admin-preview p{margin:0 0 15px;color:var(--muted)}
  .admin-tools{display:flex;gap:10px;flex-wrap:wrap}

  .footer{margin-top:38px;padding:25px 0 10px;display:flex;justify-content:space-between;gap:16px;color:#8eacc6;border-top:1px solid var(--line);font-size:13px}

  .modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(1,10,19,.72);z-index:100;padding:20px}
  .modal.open{display:grid}
  .modal-card{width:min(760px,100%);max-height:90vh;overflow:auto;background:#102f50;border:1px solid rgba(255,255,255,.16);border-radius:24px;padding:22px;box-shadow:0 30px 70px rgba(0,0,0,.4)}
  .modal-head{display:flex;justify-content:space-between;gap:16px;align-items:center}.modal-head h3{margin:0;font-size:27px}.x{background:rgba(255,255,255,.08);border:0;color:white;border-radius:10px;padding:8px 11px;cursor:pointer}
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:17px}
  .field{display:flex;flex-direction:column;gap:6px}.field.full{grid-column:1/-1}.field label{font-size:11px;text-transform:uppercase;letter-spacing:.8px;font-weight:900;color:#b8cee1}.field input,.field select,.field textarea{background:#0b2540;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:11px 12px;color:white;outline:none}.field textarea{min-height:90px;resize:vertical}
  .dropzone{border:1px dashed rgba(255,255,255,.28);background:rgba(255,255,255,.04);border-radius:15px;padding:23px;text-align:center;color:#bad0e2}
  .variant-list{display:grid;gap:8px}.variant-edit{display:grid;grid-template-columns:1fr 1fr auto;gap:8px}.variant-edit input{min-width:0}

  @media(max-width:1080px){.sprite-grid{grid-template-columns:repeat(3,1fr)}.stats{grid-template-columns:1fr 1fr}.hero-badge{width:160px}.two-col{grid-template-columns:1fr}}
  @media(max-width:900px){.featured-guides-grid{grid-template-columns:1fr}.featured-guide-card{grid-template-columns:110px 1fr}}
  @media(max-width:760px){.topbar-inner{align-items:flex-start;flex-wrap:wrap}.brand{flex:1}.top-actions{margin-left:auto}nav{order:3;width:100%;justify-content:flex-start;overflow:auto;flex-wrap:nowrap}.sprite-grid{grid-template-columns:repeat(2,1fr)}.hero{padding:26px 22px;min-height:360px}.hero h1{font-size:52px}.hero-badge{width:130px;right:16px;bottom:14px}.stats{grid-template-columns:1fr 1fr}.video-grid{grid-template-columns:1fr}.section-head{align-items:flex-start;flex-direction:column}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}}
  @media(max-width:520px){.shell{padding-left:14px;padding-right:14px}.topbar-inner{padding-left:14px;padding-right:14px}.sprite-grid{grid-template-columns:1fr}.stats{grid-template-columns:1fr}.hero h1{font-size:44px}.hero-badge{opacity:.45}.top-actions .btn.ghost{display:none}.brand-text b{font-size:18px}.art{height:250px}}

  .share-current{display:none;align-items:center;gap:8px;background:linear-gradient(135deg,#ff4a4a,#df1717);color:white;border:0;border-radius:999px;padding:10px 15px;font-weight:900;cursor:pointer;box-shadow:0 8px 20px rgba(255,42,42,.2)}
  .share-current.show{display:inline-flex}
  .collection-share-tools{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:10px}
  .collection-share-label{font-size:10px;font-weight:900;letter-spacing:.85px;text-transform:uppercase;color:var(--muted);margin-right:2px}
  .collection-share-btn{border:1px solid rgba(54,189,246,.22);background:#111515;color:#eaf7ff;border-radius:3px;padding:8px 10px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.35px;cursor:pointer}
  .collection-share-btn:hover{background:#36bdf6;color:#071a2f;border-color:#36bdf6}
  .share-modal{position:fixed;inset:0;background:rgba(2,11,22,.82);backdrop-filter:blur(10px);z-index:250;display:none;align-items:center;justify-content:center;padding:20px}
  .share-modal.open{display:flex}
  .share-dialog{width:min(1050px,100%);max-height:94vh;overflow:auto;background:#0d2947;border:1px solid rgba(255,255,255,.16);border-radius:26px;box-shadow:0 32px 80px rgba(0,0,0,.5);padding:20px}
  .share-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px}
  .share-dialog-head h3{font-size:28px;margin:0}.share-dialog-head p{margin:6px 0 0;color:var(--muted)}
  .share-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
  .share-preview-wrap{background:#06182c;border:1px solid var(--line);border-radius:22px;padding:14px;display:flex;justify-content:center}
  #shareCanvas{width:min(100%,540px);height:auto;border-radius:18px;box-shadow:0 18px 45px rgba(0,0,0,.35);background:#0c2f54}
  .share-side{background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:18px;padding:16px}
  .share-side h4{margin:0 0 7px;font-size:18px}.share-side p{color:var(--muted);font-size:14px;line-height:1.5;margin:0 0 14px}
  .share-side .btn{width:100%;justify-content:center;margin-top:9px}
  .share-format{display:flex;gap:8px;margin:10px 0 4px}.share-format button{flex:1;border:1px solid var(--line);background:#143858;color:#dfefff;border-radius:10px;padding:8px;font-weight:800;cursor:pointer}.share-format button.active{background:#ec3131;color:white}
  @media(max-width:800px){.share-layout{grid-template-columns:1fr}.share-side{order:-1}}

  .live-badge{display:inline-flex;align-items:center;gap:6px;background:#e72323;color:#fff;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:900;letter-spacing:.04em;box-shadow:0 0 0 3px rgba(231,35,35,.12)}
  .live-dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:pulseLive 1.2s infinite}
  @keyframes pulseLive{0%,100%{opacity:1}50%{opacity:.35}}
  .featured-guide-card.live-card{border-color:#e72323;box-shadow:0 0 0 2px rgba(231,35,35,.16),0 14px 34px rgba(0,0,0,.24)}
  .featured-guide-card.live-card .featured-guide-thumb{background:linear-gradient(135deg,#281313,#7b1212)}
  .featured-guide-copy .live-line{display:flex;align-items:center;gap:8px;margin-bottom:5px}
  .video-library{margin-top:28px;background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:24px;padding:20px}
  .library-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
  .library-head h3{margin:0 0 6px}.library-head p{margin:0;color:var(--muted)}
  .video-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 18px}
  .video-tab{border:1px solid var(--line);background:#143858;color:#dfefff;border-radius:999px;padding:9px 13px;font-weight:800;cursor:pointer}
  .video-tab.active{background:#fff;color:#0c2944}
  .library-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .library-card{background:#102f4c;border:1px solid var(--line);border-radius:16px;overflow:hidden;cursor:pointer;transition:.18s transform,.18s border-color}.library-card:hover{transform:translateY(-2px);border-color:#71b7ff}
  .library-thumb{aspect-ratio:16/9;background:linear-gradient(135deg,#1f5e9b,#7a43c3);display:grid;place-items:center;position:relative}.library-thumb.alt{background:linear-gradient(135deg,#bc7b18,#c44c69)}.library-thumb.live{background:linear-gradient(135deg,#3d0f0f,#971919)}
  .library-thumb .play{font-size:28px}.library-card-body{padding:12px}.library-card-body h4{margin:0 0 5px;font-size:15px}.library-card-body small{color:var(--muted)}
  .stream-state{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line);font-size:13px;color:var(--muted)}
  .stream-state button{margin-left:auto;border:1px solid var(--line);background:#143858;color:#fff;padding:7px 10px;border-radius:10px;font-weight:800;cursor:pointer}
  @media(max-width:1000px){.library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:600px){.library-grid{grid-template-columns:1fr}}


/* Vaulting demo additions */
.vault-tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.vault-btn{background:#24243d;color:#fff;border:1px solid rgba(255,255,255,.2);padding:8px 11px;border-radius:10px;font-weight:800;cursor:pointer}
.vault-btn:hover{filter:brightness(1.12)}
.vault-btn.active{background:#7b5cff;border-color:#9a86ff}
.vault-badge{position:absolute;top:10px;left:10px;background:rgba(20,20,34,.92);color:#fff;border:1px solid rgba(255,255,255,.22);padding:5px 8px;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:.03em;z-index:4}
.variant-vaulted{opacity:.5;filter:saturate(.55)}
.variant-row-wrap{display:flex;align-items:center;gap:8px;width:100%}
.variant-row-wrap .variant-btn{flex:1}
.variant-vault-toggle{border:1px solid rgba(255,255,255,.2);background:#25253d;color:white;border-radius:8px;padding:7px 9px;cursor:pointer;font-size:11px;font-weight:800}
.variant-vault-toggle.active{background:#7b5cff}
.vault-note{font-size:12px;color:#bfc0d6;margin-top:7px;line-height:1.35}

/* Clean Vault Manager concept */
.vault-manage-btn{width:100%;margin-top:9px;border:1px solid rgba(255,255,255,.15);background:rgba(10,18,34,.42);color:#eef5ff;border-radius:12px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:850;cursor:pointer}
.vault-manage-btn:hover{background:rgba(255,255,255,.08)}
.vault-manage-btn .vault-left{display:flex;align-items:center;gap:8px}.vault-manage-btn .vault-icon{width:25px;height:25px;border-radius:8px;background:rgba(186,140,255,.18);display:grid;place-items:center}
.vault-manage-btn .vault-count{font-size:11px;color:#c6b5ff;background:rgba(186,140,255,.13);border:1px solid rgba(186,140,255,.28);padding:4px 7px;border-radius:999px}
.vault-manager{display:none;margin-top:9px;border:1px solid rgba(186,140,255,.28);background:rgba(6,15,30,.62);border-radius:14px;padding:10px}
.vault-manager.open{display:block}.vault-manager-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.vault-manager-head b{font-size:12px}.vault-manager-head small{font-size:10px;color:var(--muted)}
.vault-all-mini{border:0;background:rgba(186,140,255,.17);color:#e9deff;border-radius:9px;padding:7px 9px;font-weight:850;font-size:10px;cursor:pointer}
.vault-options{display:grid;gap:6px}.vault-option{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:10px;background:rgba(255,255,255,.045)}
.vault-swatch{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--v1),var(--v2));flex:0 0 auto;border:1px solid rgba(255,255,255,.18)}
.vault-option-copy{min-width:0;flex:1}.vault-option-copy b{display:block;font-size:11px}.vault-option-copy small{display:block;color:var(--muted);font-size:9px;margin-top:1px}
.vault-toggle{border:1px solid rgba(255,255,255,.16);background:#17283d;color:#fff;border-radius:8px;padding:6px 8px;font-size:10px;font-weight:900;cursor:pointer}.vault-toggle.on{background:#6f52e8;border-color:#9b88ff}
.vaulted-current-pill{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:900;color:#dfd5ff;background:rgba(123,92,255,.2);border:1px solid rgba(154,134,255,.4);padding:4px 7px;border-radius:999px}
.variant.vaulted{opacity:.5;filter:saturate(.55)}.variant .variant-vault-dot{position:absolute;right:5px;bottom:21px;width:7px;height:7px;border-radius:50%;background:#9b88ff;box-shadow:0 0 0 2px rgba(9,21,39,.75)}
.vault-concept-note{margin:12px 0 0;color:#c9c2e9;font-size:12px;line-height:1.4;padding:10px 12px;border-radius:12px;background:rgba(186,140,255,.08);border:1px solid rgba(186,140,255,.15)}


/* Seasons menu + season-grouped Vault preview */
.season-nav{position:relative;display:inline-flex;align-items:center}
.season-nav-trigger{display:flex;align-items:center;gap:6px}
.season-nav-trigger .chev{font-size:10px;opacity:.8}
.season-dropdown{display:none;position:absolute;top:calc(100% + 10px);left:0;min-width:230px;background:#102c4c;border:1px solid rgba(255,255,255,.13);box-shadow:0 16px 34px rgba(0,0,0,.32);padding:7px;z-index:80}
.season-dropdown.open{display:block}
.season-dropdown button{width:100%;border:0;background:transparent;color:#eaf7ff;text-align:left;padding:10px 11px;border-radius:4px;font-weight:750;cursor:pointer}
.season-dropdown button:hover,.season-dropdown button.current{background:rgba(54,189,246,.14);color:#fff}
.season-dropdown small{display:block;color:#8fb1cb;font-size:10px;margin-top:2px;font-weight:600}
.season-vault-wrap{margin-top:14px;display:grid;gap:14px}
.season-vault-card{border:1px solid rgba(121,215,255,.18);background:rgba(255,255,255,.035);padding:14px;border-radius:8px}
.season-vault-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.season-vault-title{display:flex;align-items:center;gap:10px}
.season-chip{font-size:10px;text-transform:uppercase;letter-spacing:.9px;font-weight:900;background:rgba(54,189,246,.16);border:1px solid rgba(54,189,246,.3);color:#dff6ff;padding:6px 8px;border-radius:3px}
.season-vault-title b{font-size:16px}
.season-vault-title small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.season-sprite-list{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.season-sprite{border:1px solid rgba(255,255,255,.09);background:rgba(4,18,35,.42);padding:10px;border-radius:6px}
.season-sprite strong{display:block;font-size:12px;margin-bottom:7px}
.season-variants{display:flex;gap:5px;flex-wrap:wrap}
.season-variant-pill{font-size:9px;font-weight:850;color:#dcd6ff;background:rgba(186,140,255,.13);border:1px solid rgba(186,140,255,.25);padding:4px 6px;border-radius:999px}
.vault-season-filter{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.vault-season-filter label{font-size:11px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.7px}
.vault-season-filter select{background:#071a2f;color:white;border:1px solid rgba(121,215,255,.22);padding:9px 10px;border-radius:4px}
@media(max-width:850px){.season-sprite-list{grid-template-columns:1fr}.season-dropdown{right:0;left:auto}.topbar-inner{flex-wrap:wrap}.season-nav{position:static}.season-dropdown{top:auto;margin-top:42px}}

  /* Account / signup preview */
  .account-modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(1,10,19,.78);z-index:130;padding:20px}
  .account-modal.open{display:grid}
  .account-card{width:min(560px,100%);max-height:92vh;overflow:auto;background:linear-gradient(180deg,#12385e,#0d2947);border:1px solid rgba(255,255,255,.16);border-radius:24px;padding:24px;box-shadow:0 30px 80px rgba(0,0,0,.46)}
  .account-logo{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--sky),var(--purple));font-weight:1000;font-size:23px;margin-bottom:14px}
  .account-card h3{margin:0 0 6px;font-size:30px}.account-card .account-sub{margin:0 0 20px;color:var(--muted);font-size:14px}
  .google-btn{width:100%;border:1px solid rgba(255,255,255,.18);background:#fff;color:#13263b;border-radius:13px;padding:13px 16px;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px}
  .google-g{font-size:20px;font-weight:1000;color:#4285f4}
  .or-row{display:flex;align-items:center;gap:12px;color:#91aac1;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:1px;margin:18px 0}.or-row:before,.or-row:after{content:"";height:1px;background:rgba(255,255,255,.13);flex:1}
  .account-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.account-form .full{grid-column:1/-1}.account-form label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.75px;font-weight:900;color:#bed0df;margin-bottom:6px}.account-form input{width:100%;background:#09213a;border:1px solid rgba(255,255,255,.14);color:#fff;border-radius:12px;padding:12px 13px;outline:none}.account-form input:focus{border-color:var(--sky)}
  .preference-box{grid-column:1/-1;margin-top:2px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11);border-radius:16px;padding:14px}.preference-box b{display:block;margin-bottom:4px}.preference-box small{display:block;color:var(--muted);line-height:1.45;margin-bottom:12px}
  .opt-row{display:flex;align-items:flex-start;gap:11px;padding:10px 0;border-top:1px solid rgba(255,255,255,.08)}.opt-row:first-of-type{border-top:0}.opt-row input{width:18px;height:18px;margin-top:2px;accent-color:#36bdf6}.opt-copy{flex:1}.opt-copy strong{display:block;font-size:14px}.opt-copy span{display:block;color:var(--muted);font-size:12px;margin-top:2px;line-height:1.4}
  .create-account{width:100%;margin-top:14px;border:0;border-radius:13px;padding:13px 16px;background:linear-gradient(90deg,var(--sky),#7c7cff);color:#fff;font-weight:1000;cursor:pointer}
  .account-foot{text-align:center;color:var(--muted);font-size:12px;margin:14px 0 0}.account-foot button{border:0;background:none;color:var(--sky2);font-weight:900;cursor:pointer;padding:0}
  .account-x{float:right;background:rgba(255,255,255,.08);border:0;color:white;border-radius:10px;padding:8px 11px;cursor:pointer}
  .privacy-note{grid-column:1/-1;color:#8fa8bd;font-size:11px;line-height:1.45;margin-top:0}
  @media(max-width:640px){.account-form{grid-template-columns:1fr}.account-form .full,.preference-box,.privacy-note{grid-column:1}.top-actions{gap:7px}.top-actions .btn{padding:9px 10px;font-size:12px}}




/* Pubzi-inspired layout with the original Sprite Hunters blue/purple color palette.
   All existing Sprite Hunters functionality and content remain intact. */
:root{
  --bg:#071a2f;
  --bg2:#0b2b50;
  --panel:#102c4c;
  --panel2:#153a63;
  --sky:#36bdf6;
  --sky2:#79d7ff;
  --ink:#f7fbff;
  --muted:#a9c2d8;
  --red:#ff2a2a;
  --red2:#ff5b5b;
  --yellow:#ffd95a;
  --green:#36bdf6;
  --purple:#ba8cff;
  --line:rgba(54,189,246,.18);
  --shadow:0 18px 46px rgba(0,0,0,.42);
  --radius:9px;
}
body{
  background:
    linear-gradient(rgba(54,189,246,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(54,189,246,.025) 1px,transparent 1px),
    radial-gradient(circle at 12% 0%,rgba(54,189,246,.08),transparent 24%),
    linear-gradient(180deg,#0b2b50 0%,#071a2f 60%,#061526 100%);
  background-size:42px 42px,42px 42px,auto,auto;
  color:var(--ink);
}
.topbar{background:rgba(7,9,9,.94);border-bottom:1px solid rgba(54,189,246,.2);box-shadow:0 8px 22px rgba(0,0,0,.28)}
.brand-text b,.hero h1,.section-head h2,.panel h3,.library-head h3{font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;letter-spacing:.9px}
.brand-text span{color:#79d7ff}
.navbtn{border-radius:3px;text-transform:uppercase;font-size:12px;letter-spacing:.7px}
.navbtn:hover,.navbtn.active{background:#36bdf6;color:#071a2f}
.btn{border-radius:3px;text-transform:uppercase;letter-spacing:.4px}
.btn.primary{background:#36bdf6;color:#071a2f;box-shadow:none}
.btn.ghost{background:#102c4c;color:#f7fbff;border-color:rgba(54,189,246,.22)}
.hero{
  border-radius:8px;
  min-height:300px;
  border:1px solid rgba(54,189,246,.22);
  background:
    linear-gradient(105deg,rgba(7,9,9,.98) 0%,rgba(7,9,9,.95) 46%,rgba(7,9,9,.35) 72%,rgba(7,9,9,.78) 100%),
    repeating-linear-gradient(135deg,rgba(54,189,246,.16) 0 2px,transparent 2px 24px),
    linear-gradient(135deg,#153a63,#0d2948 58%,#4a3e8b);
  box-shadow:0 22px 55px rgba(0,0,0,.45);
  clip-path:polygon(0 0,97% 0,100% 12%,100% 100%,3% 100%,0 88%);
}
.hero:before{width:260px;height:260px;right:12%;top:-115px;background:transparent;border:38px solid rgba(54,189,246,.08)}
.hero:after{width:520px;height:520px;right:-150px;bottom:-300px;background:transparent;border:65px solid rgba(54,189,246,.10)}
.eyebrow{color:#36bdf6}
.hero h1{color:#f7fbff;text-shadow:none;letter-spacing:1px}
.hero h1::after{content:"";display:block;width:92px;height:7px;background:#36bdf6;margin-top:18px}
.hero p{color:#dcecff}
.hero-badge{border-radius:7px;background:#102c4c;border:1px solid rgba(54,189,246,.35);transform:rotate(0deg);clip-path:polygon(0 0,88% 0,100% 14%,100% 100%,12% 100%,0 86%)}
.featured-guides,.video-library,.panel,.admin-preview{background:#0d2948;border-color:rgba(54,189,246,.14);border-radius:7px;box-shadow:none}
.featured-guides{border-left:4px solid #36bdf6}
.featured-guide-card,.library-card,.video{border-radius:5px;background:#12355a;border-color:rgba(255,255,255,.07)}
.featured-guide-card:hover,.library-card:hover{border-color:#36bdf6;background:#173f6a}
.featured-guide-thumb,.featured-guide-card:nth-child(2) .featured-guide-thumb,.featured-guide-card:nth-child(3) .featured-guide-thumb,.thumb,.library-thumb,.library-thumb.alt{
  background:linear-gradient(135deg,#202827,#0c100f 65%,#93be25);
  border-radius:4px;
}
.featured-guide-play,.play{background:#36bdf6;color:#071a2f;border:none}
.featured-guide-cta,.featured-guides-link{color:#36bdf6}
.stats{gap:10px}
.stat{background:#111515;border:1px solid rgba(54,189,246,.13);border-radius:5px;box-shadow:none;position:relative;overflow:hidden}
.stat:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#36bdf6}
.stat small{color:#929a95}.stat strong{color:#f7f8f2}
.progress{background:#050707;border-radius:2px}.progress i{background:#36bdf6;border-radius:0}
.section-head{border-bottom:1px solid rgba(54,189,246,.14);padding-bottom:12px}
.section-head h2{letter-spacing:1.3px}.section-head h2::first-letter{color:#36bdf6}
#collection .section-head h2::first-letter{color:#f7fbff}
.pill,.video-tab{border-radius:2px;background:#111515;color:#d7dcd8;border-color:rgba(54,189,246,.16);text-transform:uppercase;font-size:12px;letter-spacing:.35px}
.pill.active,.video-tab.active{background:#36bdf6;color:#090b0b;border-color:#36bdf6}
.search{background:#0d2948;border-color:rgba(54,189,246,.18);border-radius:2px}
.sprite-grid{gap:13px}
.sprite-card{background:#111515;border:1px solid rgba(54,189,246,.13);border-radius:6px;box-shadow:0 12px 28px rgba(0,0,0,.32);clip-path:polygon(0 0,94% 0,100% 7%,100% 100%,6% 100%,0 93%)}
.sprite-card:hover{box-shadow:0 18px 40px rgba(0,0,0,.48);border-color:rgba(54,189,246,.48)}
.art{background:radial-gradient(circle at 50% 78%,rgba(54,189,246,.16),transparent 34%),linear-gradient(180deg,#242b2a,#101414)!important}
.art:before{background:linear-gradient(180deg,rgba(54,189,246,.05),transparent 38%,rgba(0,0,0,.28))}
.card-content{background:linear-gradient(180deg,#151a19,#101313)}
.status{border-radius:3px;background:#0c1010;border-color:rgba(255,255,255,.09);text-transform:uppercase;font-size:11px;letter-spacing:.25px}
.status.on,.status.on.owned,.status.on.mastered,.status.on.wanted,.status.on.trade{background:rgba(54,189,246,.14);border-color:#36bdf6;color:#dfff83}
.deck-btn,.vault-manager-btn,.vault-btn,.variant-vault-toggle{border-radius:3px;background:#141918;border-color:rgba(54,189,246,.18)}
.deck-btn:hover,.vault-manager-btn:hover,.vault-btn:hover{border-color:#36bdf6}
.vault-manager-btn{margin-top:9px;color:#b9c0bc}
.vault-manager-btn .vault-icon{color:#36bdf6}
.vault-count{background:rgba(54,189,246,.12);color:#dfff84;border-color:rgba(54,189,246,.25)}
.deck{background:#0b2b50;border-top-color:rgba(54,189,246,.12)}
.variant-btn{background:#121616;border-color:rgba(255,255,255,.07);border-radius:3px}
.variant-btn.active{border-color:#36bdf6;box-shadow:inset 0 0 0 1px #36bdf6}
.master-crown{filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.vault-badge{background:#0b2b50;border-color:#36bdf6;color:#dfff83;border-radius:3px}
.share-current{background:#36bdf6;color:#080a09;border-radius:3px;box-shadow:none;text-transform:uppercase}
.share-dialog,.modal-card{background:#0d2948;border-color:rgba(54,189,246,.25);border-radius:7px}
.share-preview-wrap,.share-side{background:#071a2f;border-color:rgba(54,189,246,.12);border-radius:5px}
.share-format button{border-radius:2px;background:#131817;border-color:rgba(54,189,246,.15)}
.share-format button.active{background:#36bdf6;color:#080a0a}
.library-card-body,.video div:last-child{background:#121616}
.live-badge{background:#36bdf6;color:#090b0b;border-radius:2px;box-shadow:none}
.live-dot{background:#090b0b}
.featured-guide-card.live-card{border-color:#36bdf6;box-shadow:0 0 0 1px rgba(54,189,246,.35)}
.featured-guide-card.live-card .featured-guide-thumb,.library-thumb.live{background:linear-gradient(135deg,#242b19,#0d100d 70%,#36bdf6)}
.stream-state{background:#101414;border-color:rgba(54,189,246,.12);border-radius:4px}
.stream-state button{background:#36bdf6;color:#080a0a;border:0;border-radius:2px}
.footer{border-top-color:rgba(54,189,246,.14);color:#87908a}
.admin-preview{border-style:solid;border-left:4px solid #36bdf6}
.dropzone{border-color:rgba(54,189,246,.25);background:#0c1010;border-radius:4px}
.field input,.field select,.field textarea{background:#071a2f;border-color:rgba(54,189,246,.15);border-radius:3px}
.x{border-radius:2px;background:#171c1b}
/* decorative esports corner marks */
.featured-guides-head h3,.panel h3,.library-head h3{position:relative;padding-left:14px}
.featured-guides-head h3:before,.panel h3:before,.library-head h3:before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:4px;background:#36bdf6;transform:skew(-12deg)}



.sh-upgraded-hero{
  padding:28px;
  overflow:hidden;
}
.sh-hero-grid{
  display:grid;
  grid-template-columns:minmax(260px,.95fr) minmax(460px,1.45fr);
  gap:28px;
  align-items:center;
}
.sh-hero-brand{
  text-align:center;
  padding-right:28px;
  border-right:1px solid rgba(255,255,255,.12);
}
.sh-main-logo{
  display:block;
  width:min(100%,430px);
  max-height:245px;
  object-fit:contain;
  margin:8px auto 10px;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.35));
}
.sh-hero-tagline{
  font-size:12px;
  font-weight:900;
  letter-spacing:.11em;
  color:#e5e1ff;
}
.sh-hero-tagline span{color:#8d7cff;margin:0 5px;}
.sh-stat-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(150px,1fr));
  gap:12px;
}
.sh-stat{
  background:rgba(8,13,28,.72);
  border:1px solid rgba(101,93,184,.34);
  border-radius:8px;
  padding:15px 16px;
}
.sh-stat-label{
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.09em;
  color:#a9a7c0;
  font-weight:900;
}
.sh-stat-value{
  font-size:31px;
  line-height:1;
  font-weight:1000;
  color:#fff;
  margin:7px 0 5px;
}
.mastered-value{color:#ffd157;}
.wanted-value{color:#a99aff;}
.trade-value{color:#4ed6ff;}
.sh-stat-sub{
  font-size:12px;
  color:#85839c;
}
.sh-progress-wrap{margin-top:17px;}
.sh-progress-label{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:12px;
  color:#b9b7cf;
  margin-bottom:7px;
}
.sh-progress-label strong{color:#fff;}
.sh-progress-track{
  height:10px;
  background:#08101f;
  border:1px solid rgba(101,93,184,.3);
  border-radius:999px;
  overflow:hidden;
}
.sh-progress-bar{
  width:43%;
  height:100%;
  background:linear-gradient(90deg,#745fff,#846dff,#46c9ff);
}
.sh-hero-actions{margin-top:18px;}
@media (max-width:850px){
  .sh-hero-grid{grid-template-columns:1fr;}
  .sh-hero-brand{
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.12);
    padding-right:0;
    padding-bottom:22px;
  }
}
@media (max-width:520px){
  .sh-stat-grid{grid-template-columns:1fr 1fr;}
  .sh-upgraded-hero{padding:20px;}
  .sh-stat-value{font-size:26px;}
}



/* LIVE state — intentionally bright red so it reads immediately as live */
#liveBtn{
  border-color:#ff3b3b !important;
  color:#fff !important;
  background:linear-gradient(135deg,#d90018,#ff2738) !important;
  box-shadow:0 0 0 1px rgba(255,35,55,.22),0 0 24px rgba(255,20,40,.35) !important;
}
#liveBtn:hover{
  background:linear-gradient(135deg,#ee001d,#ff4050) !important;
  box-shadow:0 0 30px rgba(255,20,40,.55) !important;
}
.live-card{
  border-color:rgba(255,45,55,.72) !important;
  box-shadow:0 0 0 1px rgba(255,30,45,.16),0 0 28px rgba(255,20,40,.22) !important;
}
.live-card .live-badge,
.live-badge,
.badge-live{
  background:#ff172f !important;
  color:#fff !important;
  border-color:#ff5363 !important;
  box-shadow:0 0 18px rgba(255,20,40,.55) !important;
}



.header-sprite-logo{
  width:58px !important;
  height:58px !important;
  object-fit:contain !important;
  display:block !important;
  flex:0 0 58px !important;
}
@media(max-width:700px){
  .header-sprite-logo{width:50px !important;height:50px !important;flex-basis:50px !important;}
}



/* ===== Sprite Hunters side collection control concept ===== */
.sh-collection-layout{
  display:grid;
  grid-template-columns:285px minmax(0,1fr);
  gap:18px;
  align-items:start;
}
.sh-filter-panel{
  position:sticky;
  top:14px;
  background:linear-gradient(180deg,#221556 0%,#161237 100%);
  border:1px solid rgba(130,106,255,.45);
  border-radius:14px;
  padding:16px;
  box-shadow:0 14px 40px rgba(0,0,0,.22);
  color:#fff;
}
.sh-filter-section{margin-bottom:18px;}
.sh-filter-section:last-child{margin-bottom:0;}
.sh-filter-kicker{
  font-size:10px;
  font-weight:1000;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#918eb3;
  margin-bottom:8px;
}
.sh-filter-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}
.sh-filter-row .value{color:#d9d7ee;}
.sh-meter{
  height:6px;
  margin-top:8px;
  background:#0d0b23;
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  overflow:hidden;
}
.sh-meter > span{
  display:block;height:100%;
  width:var(--pct,0%);
  background:linear-gradient(90deg,#6c74ff,#9e61ff,#91ff6a);
}
.sh-master-box{
  border:1px solid rgba(255,206,56,.34);
  background:rgba(255,210,50,.06);
  border-radius:10px;
  padding:12px;
}
.sh-master-box .sh-meter > span{background:linear-gradient(90deg,#ffb900,#ffe04a);}
.sh-rare-list{display:grid;gap:10px;}
.sh-rare-item{cursor:pointer;}
.sh-rare-label{
  display:flex;justify-content:space-between;align-items:center;
  gap:8px;font-size:11px;font-weight:900;text-transform:uppercase;
}
.sh-dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:-1px;}
.sh-rare-item[data-rarity="Rare"] .sh-dot{background:#68a4ff;box-shadow:0 0 10px #68a4ff;}
.sh-rare-item[data-rarity="Epic"] .sh-dot{background:#bd35ff;box-shadow:0 0 10px #bd35ff;}
.sh-rare-item[data-rarity="Legendary"] .sh-dot{background:#ffd11e;box-shadow:0 0 10px #ffd11e;}
.sh-rare-item[data-rarity="Mythic"] .sh-dot{background:#ff5b52;box-shadow:0 0 10px #ff5b52;}
.sh-rare-item[data-rarity="Rare"] .sh-meter > span{background:#557dff;}
.sh-rare-item[data-rarity="Epic"] .sh-meter > span{background:#b700ff;}
.sh-rare-item[data-rarity="Legendary"] .sh-meter > span{background:#ffd400;}
.sh-rare-item[data-rarity="Mythic"] .sh-meter > span{background:#ff5a54;}
.sh-segmented{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  border:1px solid rgba(122,104,255,.65);
  border-radius:8px;
  overflow:hidden;
  background:#0d0b23;
}
.sh-segmented button{
  border:0;border-right:1px solid rgba(255,255,255,.08);
  background:transparent;color:#c8c4e4;
  font-size:10px;font-weight:1000;text-transform:uppercase;
  padding:9px 3px;cursor:pointer;
}
.sh-segmented button:last-child{border-right:0;}
.sh-segmented button.active{
  background:linear-gradient(135deg,#5d83ff,#865cff);
  color:#fff;
}
.sh-filter-select{
  width:100%;
  margin-top:8px;
  background:#0d0b23;
  color:#fff;
  border:1px solid rgba(130,106,255,.55);
  border-radius:8px;
  padding:10px 11px;
  font-size:11px;
  font-weight:800;
}
.sh-switch-row{
  display:flex;align-items:center;gap:9px;
  font-size:10px;font-weight:900;text-transform:uppercase;
  color:#b6b2d0;margin-top:8px;
}
.sh-switch-row input{accent-color:#65e0ba;}
.sh-filter-summary{
  margin-top:12px;
  font-size:10px;
  color:#9b97b7;
  line-height:1.45;
}
.sh-collection-main{min-width:0;}
.sh-filter-toast{
  margin-bottom:12px;
  padding:10px 12px;
  border:1px solid rgba(115,98,255,.35);
  background:rgba(115,98,255,.08);
  border-radius:8px;
  font-size:11px;
  color:#cfcbe9;
}
@media(max-width:900px){
  .sh-collection-layout{grid-template-columns:1fr;}
  .sh-filter-panel{position:static;}
}



/* Original Sprite Hunters "Hunter Controls" treatment */
.sh-collection-layout{grid-template-columns:310px minmax(0,1fr);gap:22px}
.sh-hunter-controls{
  background:linear-gradient(180deg,#102f51 0%,#101a3b 52%,#171335 100%) !important;
  border:1px solid rgba(90,184,255,.32) !important;
  border-radius:20px !important;
  padding:18px !important;
}
.sh-control-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}
.sh-control-title small{display:block;color:#71d6ff;font-size:9px;font-weight:900;letter-spacing:.16em}
.sh-control-title strong{display:block;font-size:18px;letter-spacing:.04em;margin-top:2px}
.sh-control-mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#536dff,#9a5cff);color:#fff}
.sh-snapshot{background:rgba(4,12,31,.45);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:13px;margin-bottom:12px}
.sh-snapshot-top,.sh-snapshot-foot{display:flex;justify-content:space-between;gap:10px;align-items:center}
.sh-snapshot-top{font-size:11px;font-weight:900;text-transform:uppercase}.sh-snapshot-top b{font-size:13px}
.sh-snapshot-foot{font-size:9px;color:#91a7bd;margin-top:7px}
.sh-big-meter{height:9px;background:#071325;border-radius:999px;overflow:hidden;margin-top:9px;border:1px solid rgba(255,255,255,.08)}
.sh-big-meter span{display:block;height:100%;background:linear-gradient(90deg,#45a7ff,#756aff,#b467ff)}
.sh-mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:18px}
.sh-mini-stat{border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.045);color:#fff;border-radius:12px;padding:9px 5px;cursor:pointer}
.sh-mini-stat:hover{border-color:#6bbdf2;background:rgba(91,174,255,.09)}
.sh-mini-stat span,.sh-mini-stat b,.sh-mini-stat small{display:block}.sh-mini-stat span{font-size:16px}.sh-mini-stat b{font-size:17px;margin:2px 0}.sh-mini-stat small{font-size:8px;color:#91a7bd;text-transform:uppercase;font-weight:900}
.sh-filter-group{border-top:1px solid rgba(255,255,255,.09);padding-top:15px;margin-top:15px}
.sh-group-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;color:#9ab2ca;font-size:9px;font-weight:1000;letter-spacing:.12em}
.sh-group-title button{border:0;background:transparent;color:#68d4ff;font-size:9px;font-weight:900;cursor:pointer}
.sh-status-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.sh-status-grid button{text-align:left;border:1px solid rgba(255,255,255,.09);background:#0b1930;color:#fff;border-radius:11px;padding:9px 10px;cursor:pointer}
.sh-status-grid button b,.sh-status-grid button small{display:block}.sh-status-grid button b{font-size:11px}.sh-status-grid button small{font-size:8px;color:#8298ae;margin-top:2px}
.sh-status-grid button.active{background:linear-gradient(135deg,#275f9b,#5b4dcc);border-color:#75c9ff;box-shadow:inset 3px 0 #71dcff}
.sh-rarity-buttons{display:grid;gap:6px}
.sh-rarity-buttons button{display:grid;grid-template-columns:12px 1fr auto;gap:8px;align-items:center;border:1px solid transparent;background:rgba(6,16,34,.46);color:#dfefff;border-radius:9px;padding:8px 9px;cursor:pointer;text-align:left}
.sh-rarity-buttons button:hover,.sh-rarity-buttons button.active{border-color:rgba(101,197,255,.42);background:rgba(74,116,194,.16)}
.sh-rarity-buttons i{width:8px;height:8px;border-radius:50%;background:#7c8aa0}.sh-rarity-buttons i.rare{background:#67a9ff}.sh-rarity-buttons i.epic{background:#c54aff}.sh-rarity-buttons i.legendary{background:#ffd12b}.sh-rarity-buttons i.mythic{background:#ff6259}
.sh-rarity-buttons span{font-size:10px;font-weight:900}.sh-rarity-buttons b{font-size:9px;color:#91a7bd}
.sh-field-label{display:block;font-size:9px;color:#91a7bd;font-weight:900;text-transform:uppercase;margin-top:8px}
.sh-filter-select{margin-top:5px !important;background:#08172c !important;border-color:rgba(93,171,235,.34) !important;border-radius:10px !important}
.sh-filter-summary{background:rgba(95,90,220,.1);border:1px solid rgba(111,106,255,.2);padding:10px;border-radius:10px;margin-top:15px !important;color:#b9c9da !important}
.sh-filter-toast{background:linear-gradient(90deg,rgba(73,150,255,.12),rgba(126,82,255,.09)) !important;border-color:rgba(87,177,255,.24) !important}
.sh-no-results{grid-column:1/-1;padding:50px 20px;text-align:center;border:1px dashed rgba(107,190,255,.32);border-radius:18px;background:rgba(255,255,255,.025)}
.sh-no-results b,.sh-no-results span{display:block}.sh-no-results span{color:#91a7bd;margin-top:5px;font-size:12px}
@media(max-width:900px){.sh-collection-layout{grid-template-columns:1fr}.sh-hunter-controls{position:static !important}}



/* Keep decorative hero pseudo-elements from intercepting clicks. */
.hero::before,.hero::after{pointer-events:none}
.sh-hero-grid{position:relative;z-index:2}
.sh-hero-share-actions{position:relative;z-index:3;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sh-hero-share-box{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:8px 10px;background:rgba(8,13,28,.58);border:1px solid rgba(54,189,246,.18);border-radius:4px}
.sh-hero-share-box .collection-share-label{margin-right:1px;color:#c8d8e6}
.sh-hero-share-box .collection-share-btn{padding:7px 9px}
@media(max-width:700px){.sh-hero-share-box{width:100%}}