:root{
      --blue:#1267ff;
      --blue-dark:#0a47bc;
      --yellow:#ffd84d;
      --pink:#ff4f9a;
      --ink:#101828;
      --muted:#667085;
      --bg:#f5f8ff;
      --card:#fff;
      --line:#dce5f4;
      --shadow:0 12px 30px rgba(18,103,255,.12);
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}

    body{
      margin:0;
      min-height:100vh;
      font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      color:var(--ink);
      background:
        radial-gradient(circle at 10% 0%, rgba(255,216,77,.22), transparent 18%),
        radial-gradient(circle at 100% 10%, rgba(255,79,154,.18), transparent 24%),
        var(--bg);
    }

    .wrap{
      width:min(1240px,calc(100% - 28px));
      margin:auto;
    }

    header{
      display:flex;
      align-items:center;
      justify-content:center;
      padding:18px 0 8px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      font-weight:1000;
      font-size:1.18rem;
      letter-spacing:-.04em;
    }

    .brand-icon{
      width:48px;
      height:48px;
      object-fit:contain;
      display:block;
      filter:drop-shadow(3px 4px 0 var(--yellow));
    }

    main{padding:22px 0 42px}
.search-wrap{
      position:sticky;
      top:10px;
      z-index:20;
      width:min(680px,100%);
      margin:28px auto 30px;
    }

    .search-icon{
      position:absolute;
      left:18px;
      top:50%;
      transform:translateY(-50%);
      font-size:1.15rem;
      pointer-events:none;
    }

    #search{
      width:100%;
      height:58px;
      padding:0 18px 0 50px;
      border:2px solid var(--ink);
      border-radius:999px;
      background:#fff;
      color:var(--ink);
      font-size:1rem;
      font-weight:750;
      outline:none;
      box-shadow:5px 5px 0 var(--ink);
    }

    #search:focus{
      border-color:var(--blue);
      box-shadow:5px 5px 0 var(--yellow);
    }

    .grid{
      display:grid;
      grid-template-columns:repeat(5,minmax(0,1fr));
      gap:20px;
    }

    .prize{
      --accent:#1267ff;
      --tilt:-1deg;
      position:relative;
      display:flex;
      flex-direction:column;
      min-height:236px;
      padding:0;
      overflow:hidden;
      text-decoration:none;
      color:inherit;
      background:#fff;
      border:3px solid var(--ink);
      border-radius:25px;
      box-shadow:7px 8px 0 var(--ink);
      transform:rotate(var(--tilt));
      transition:transform .16s ease,box-shadow .16s ease;
      isolation:isolate;
    }

    .prize:nth-child(3n){--tilt:1deg}
    .prize:nth-child(4n){--tilt:-.45deg}

    .prize:hover{
      transform:translateY(-7px) rotate(0deg) scale(1.015);
      box-shadow:10px 13px 0 var(--yellow);
    }

    .prize::before,
    .prize::after{
      content:"";
      position:absolute;
      z-index:0;
      pointer-events:none;
    }

    .prize::before{
      inset:0 0 72px;
      background:
        radial-gradient(circle at 18% 22%,rgba(255,255,255,.85) 0 5px,transparent 6px),
        radial-gradient(circle at 83% 28%,rgba(255,216,77,.95) 0 7px,transparent 8px),
        radial-gradient(circle at 70% 78%,rgba(255,79,154,.9) 0 5px,transparent 6px),
        linear-gradient(145deg,color-mix(in srgb,var(--accent) 92%,white),var(--accent));
    }

    .prize::after{
      width:105px;
      height:22px;
      left:-19px;
      top:22px;
      background:var(--yellow);
      border:2px solid var(--ink);
      transform:rotate(-38deg);
    }

    .value{
      position:absolute;
      z-index:4;
      right:10px;
      top:10px;
      max-width:78%;
      padding:6px 10px;
      border:2px solid var(--ink);
      border-radius:10px;
      background:var(--yellow);
      color:var(--ink);
      box-shadow:3px 3px 0 var(--ink);
      font-size:.69rem;
      line-height:1;
      font-weight:1000;
      transform:rotate(2deg);
    }

    .logo{
      position:relative;
      z-index:2;
      min-height:164px;
      display:grid;
      place-items:center;
      padding:37px 18px 16px;
    }

    .logo-box{
      width:105px;
      height:105px;
      display:grid;
      place-items:center;
      border:3px solid var(--ink);
      border-radius:27px;
      background:#fff;
      box-shadow:6px 7px 0 rgba(16,24,40,.28);
      padding:19px;
      overflow:hidden;
      transform:rotate(-3deg);
    }

    .prize:nth-child(even) .logo-box{transform:rotate(3deg)}

    .logo-box img{
      width:100%;
      height:100%;
      object-fit:contain;
      display:block;
    }

    /* Asset-specific optical alignment */
    .logo-box img[alt="PlayStation Store logo"]{
      width:88%;
      height:88%;
      object-position:center;
      transform:translateY(1px);
    }

    .logo-box img[alt="Netflix logo"]{
      width:54%;
      height:88%;
      object-position:center;
      transform:translateX(1px);
    }

    .name{
      position:relative;
      z-index:3;
      min-height:72px;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:12px 10px 5px;
      text-align:center;
      background:#fff;
      border-top:3px solid var(--ink);
      font-weight:1000;
      font-size:1.02rem;
      line-height:1.08;
      letter-spacing:-.025em;
    }

    .hint{
      position:relative;
      z-index:3;
      padding:0 8px 11px;
      text-align:center;
      background:#fff;
      color:var(--muted);
      font-size:.72rem;
      line-height:1.1;
      font-weight:800;
    }

    .empty{
      display:none;
      text-align:center;
      padding:40px 10px;
      color:var(--muted);
      font-weight:850;
    }

    footer{
      padding:18px 0 30px;
      text-align:center;
      color:var(--muted);
      font-size:.76rem;
    }


    body.modal-open{overflow:hidden}

    .modal-backdrop{
      position:fixed;
      inset:0;
      z-index:100;
      display:none;
      align-items:center;
      justify-content:center;
      padding:20px;
      background:rgba(16,24,40,.68);
      backdrop-filter:blur(7px);
    }

    .modal-backdrop.open{display:flex}

    .modal{
      --modal-accent:var(--blue);
      position:relative;
      width:min(520px,100%);
      padding:28px;
      overflow:hidden;
      border:3px solid var(--ink);
      border-radius:28px;
      background:#fff;
      box-shadow:10px 12px 0 var(--yellow);
      animation:modal-pop .18s ease-out;
    }

    .modal::before{
      content:"";
      position:absolute;
      inset:0 0 auto;
      height:12px;
      background:var(--modal-accent);
      border-bottom:3px solid var(--ink);
    }

    @keyframes modal-pop{
      from{opacity:0;transform:translateY(10px) scale(.97)}
      to{opacity:1;transform:none}
    }

    .modal-close{
      position:absolute;
      top:20px;
      right:20px;
      width:40px;
      height:40px;
      border:2px solid var(--ink);
      border-radius:50%;
      background:#fff;
      color:var(--ink);
      box-shadow:3px 3px 0 var(--ink);
      font-size:1.2rem;
      font-weight:1000;
      cursor:pointer;
    }

    .modal-kicker{
      margin:12px 48px 8px 0;
      color:var(--modal-accent);
      font-size:.75rem;
      font-weight:1000;
      letter-spacing:.12em;
      text-transform:uppercase;
    }

    .modal h2{
      margin:0 48px 18px 0;
      font-size:clamp(1.6rem,5vw,2.3rem);
      line-height:1;
      letter-spacing:-.045em;
    }

    .code-label{
      margin:0 0 8px;
      color:var(--muted);
      font-size:.76rem;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.08em;
    }

    .code-box{
      padding:15px 13px;
      border:3px solid var(--ink);
      border-radius:15px;
      background:var(--bg);
      box-shadow:5px 5px 0 var(--ink);
      font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
      font-size:clamp(.94rem,4vw,1.18rem);
      font-weight:1000;
      letter-spacing:.045em;
      text-align:center;
      white-space:nowrap;
    }

    .task-note{
      margin:22px 0 18px;
      padding:15px 16px;
      border:2px dashed var(--ink);
      border-radius:16px;
      background:color-mix(in srgb,var(--yellow) 34%,white);
      font-size:.95rem;
      line-height:1.45;
      font-weight:800;
    }

    .locker-button{
      display:flex;
      align-items:center;
      justify-content:center;
      width:100%;
      min-height:56px;
      padding:12px 18px;
      border:3px solid var(--ink);
      border-radius:16px;
      background:var(--modal-accent);
      color:#fff;
      box-shadow:6px 7px 0 var(--ink);
      text-decoration:none;
      font-size:1rem;
      font-weight:1000;
      transition:transform .15s ease,box-shadow .15s ease;
    }

    .locker-button:hover{
      transform:translateY(-2px);
      box-shadow:8px 9px 0 var(--yellow);
    }

    .modal-fineprint{
      margin:14px 4px 0;
      color:var(--muted);
      text-align:center;
      font-size:.7rem;
      line-height:1.35;
      font-weight:750;
    }

    @media (max-width:540px){
      .modal{padding:24px 18px 20px;border-radius:23px}
      .modal-close{top:17px;right:17px}
      .code-box{padding:13px 8px;letter-spacing:.02em}
    }

    @media (max-width:1050px){
      .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
    }

    @media (max-width:760px){
      .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    }

    @media (max-width:540px){
      .wrap{width:min(100% - 20px,1240px)}
      header{padding-top:14px}
      main{padding-top:16px}
      h1{font-size:clamp(2.25rem,12vw,3.55rem)}
      .search-wrap{margin:24px auto}
      #search{height:54px}
      .grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
      }
      .prize{
        min-height:208px;
        border-radius:20px;
        box-shadow:5px 6px 0 var(--ink);
      }
      .logo{min-height:143px;padding:33px 12px 13px}
      .logo-box{
        width:88px;
        height:88px;
        border-radius:22px;
        padding:16px;
        box-shadow:5px 6px 0 rgba(16,24,40,.28);
      }
      .value{font-size:.62rem;right:8px;top:8px}
      .name{min-height:55px;font-size:.9rem;padding:9px 7px 3px}
      .hint{font-size:.66rem;padding-bottom:9px}
    }

    @media (prefers-reduced-motion:reduce){
      *{scroll-behavior:auto!important;transition:none!important}
    }


/* Brand and interaction refinements */
header{padding:18px 0 2px}
.brand{gap:18px;font-size:clamp(2.25rem,5.6vw,3.8rem)}
.brand-icon{width:clamp(118px,15vw,174px);height:clamp(118px,15vw,174px);filter:none}
.brand-wordmark{display:flex;align-items:baseline;letter-spacing:-.065em;line-height:.9}
.brand-beast{color:var(--ink)}
.brand-prizes{color:var(--blue);text-shadow:4px 4px 0 var(--yellow)}
main{padding-top:8px}
.search-wrap{margin-top:18px}
.prize{appearance:none;width:100%;font:inherit;text-align:inherit;cursor:pointer}
.prize:focus-visible{outline:4px solid var(--blue);outline-offset:5px}
.prize[hidden],.empty[hidden]{display:none}
@media (max-width:560px){
  .brand{gap:10px;font-size:clamp(1.9rem,9vw,2.7rem)}
  .brand-icon{width:104px;height:104px}
  .brand-wordmark{font-size:inherit}
}


@media (max-width: 768px){
  body{
    background:
      radial-gradient(circle at 50% -12%, rgba(255,216,77,.12), transparent 12%),
      radial-gradient(circle at 100% 10%, rgba(255,79,154,.14), transparent 20%),
      var(--bg);
  }
}


/* Integrated sponsor-offer claim flow */
.modal{width:min(680px,100%);max-height:min(88vh,860px);overflow:auto}
.offer-progress{margin:4px 0 14px;padding:13px 14px;border:3px solid var(--ink);border-radius:16px;background:var(--bg);font-size:.82rem;font-weight:800}
.offer-progress strong{font-size:1.05rem;color:var(--blue);margin-right:5px}
.progress-track{height:10px;margin-top:9px;border:2px solid var(--ink);border-radius:999px;background:#fff;overflow:hidden}
.progress-track span{display:block;width:0;height:100%;background:var(--yellow);transition:width .25s ease}
.offer-intro{margin:0 0 14px;color:var(--muted);font-size:.86rem;line-height:1.45;font-weight:750}
.offers{display:grid;gap:10px}
.offers-loading,.offers-error{padding:18px;border:2px dashed var(--line);border-radius:15px;text-align:center;color:var(--muted);font-weight:800}
.offer-card{display:grid;grid-template-columns:54px 1fr auto;gap:12px;align-items:center;padding:11px;border:2px solid var(--ink);border-radius:16px;background:#fff;box-shadow:4px 4px 0 var(--ink)}
.offer-card img{width:54px;height:54px;border-radius:12px;object-fit:cover;background:var(--bg)}
.offer-copy{min-width:0}.offer-copy strong{display:block;font-size:.9rem;line-height:1.2}.offer-copy span{display:block;margin-top:4px;color:var(--muted);font-size:.72rem;line-height:1.25;font-weight:700}
.offer-link{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:7px 11px;border:2px solid var(--ink);border-radius:11px;background:var(--blue);color:#fff;box-shadow:3px 3px 0 var(--yellow);text-decoration:none;font-size:.76rem;font-weight:1000;white-space:nowrap}
.claim-panel{margin-top:16px;padding:16px;border:3px solid var(--ink);border-radius:17px;background:color-mix(in srgb,var(--yellow) 24%,white);box-shadow:5px 5px 0 var(--ink)}
.claim-success{margin-bottom:9px;color:#157347;font-size:.82rem;font-weight:1000}.claim-panel label{display:block;margin-bottom:8px;font-size:.9rem;font-weight:1000}
.email-row{display:flex;gap:8px}.email-row input{min-width:0;flex:1;height:46px;padding:0 12px;border:2px solid var(--ink);border-radius:11px;font:inherit;font-size:.88rem;font-weight:700;outline:none}.email-row input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(18,103,255,.12)}
.email-row button{min-height:46px;padding:0 14px;border:2px solid var(--ink);border-radius:11px;background:var(--blue);color:#fff;box-shadow:3px 3px 0 var(--ink);font:inherit;font-size:.8rem;font-weight:1000;cursor:pointer}.email-row button:disabled{opacity:.55;cursor:wait}
.claim-message{min-height:1em;margin:9px 2px 0;color:var(--muted);font-size:.72rem;font-weight:800}
@media(max-width:560px){.modal{max-height:92vh}.offer-card{grid-template-columns:46px 1fr}.offer-card img{width:46px;height:46px}.offer-link{grid-column:1/-1;width:100%}.email-row{flex-direction:column}.email-row button{width:100%}}