.checker-body { background: var(--bg); min-height: 100vh; }
.checker-main { min-height: calc(100vh - 74px - 90px); display: flex; align-items: center; }
.checker-hero { width: 100%; padding: 170px 0 90px; }
.checker-wrap { max-width: 560px; text-align: center; }
.checker-wrap h1 { font-size: clamp(32px, 5vw, 48px); letter-spacing: -1.5px; margin: 0 0 16px; color: #fff; }
.checker-wrap .lede { margin-bottom: 12px; }
.mint-date { font-family: 'Courier New', monospace; font-weight: 700; color: var(--lime); letter-spacing: 1.5px; margin: 0 0 40px; font-size: 14px; }

/* ---- Mellow thumbnail carousel ---- */
.pal-carousel{
  position:relative;
  width:100%;
  overflow:hidden;
  margin:0 0 28px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.pal-carousel-track{
  display:flex;
  align-items:center;
  gap:14px;
  width:max-content;
  animation:pal-carousel-slide 16s linear infinite;
}
.pal-carousel:hover .pal-carousel-track{ animation-play-state:paused; }
.pal-carousel-track img{
  width:76px;
  height:76px;
  flex-shrink:0;
  border-radius:14px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 22px rgba(0,0,0,.4);
  background:#11140d;
}
@keyframes pal-carousel-slide{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (max-width: 520px) {
  .pal-carousel-track img{ width:58px; height:58px; border-radius:12px; }
  .pal-carousel-track{ gap:10px; }
}

.checker-card {
  background: var(--panel);
  border-radius: 22px;
  padding: 34px 32px;
  text-align: left;
  box-shadow: 0 25px 60px #0006;
}
.checker-card .wl-field { color: #4b515c; }
.checker-submit {
  position: relative;
  width: 100%;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.checker-submit .checker-spinner { display: none; }
.checker-submit.loading { cursor: progress; }
.checker-submit.loading .checker-submit-label { visibility: hidden; }
.checker-submit.loading .checker-spinner {
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(17, 20, 13, 0.35);
  border-top-color: #11140d;
  animation: wl-spin 0.7s linear infinite;
}
.checker-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.checker-result {
  margin-top: 28px;
  background: var(--panel);
  border-radius: 22px;
  padding: 40px 32px;
  color: var(--ink);
  box-shadow: 0 25px 60px #0006;
}
.checker-result-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  font-size: 28px;
  font-weight: 900;
}
.checker-result.is-eligible .checker-result-icon { background: rgba(185, 227, 61, 0.18); color: #5e8116; border: 1px solid rgba(185, 227, 61, 0.4); }
.checker-result.is-not-eligible .checker-result-icon { background: rgba(232, 117, 166, 0.15); color: #b3396c; border: 1px solid rgba(232, 117, 166, 0.4); }
.checker-result-title { font-size: 22px; letter-spacing: -0.5px; margin: 0 0 10px; }
.checker-result-copy { color: #6d7480; line-height: 1.6; margin: 0 auto 14px; max-width: 380px; }
.checker-result-address { font-family: 'Courier New', monospace; font-size: 13px; color: #8a8f99; margin: 0 0 22px; word-break: break-all; }
.checker-again {
  position:absolute;
  top:18px;
  right:18px;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid rgba(255,255,255,.75);
  border-radius:50%;
  background:rgba(0,0,0,.72);
  color:#fff;
  font-size:30px;
  font-weight:400;
  line-height:1;
  cursor:pointer;
  z-index:50;
  box-shadow:0 0 18px rgba(0,0,0,.35);
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.checker-again:hover {
  transform:scale(1.06);
  background:rgba(20,20,20,.92);
  border-color:#d7ff32;
}
.checker-result { position:relative; }
.pal-card-actions {
  margin-top:32px;
}
@media (max-width: 560px) {
  .checker-again {
    top:12px;
    right:12px;
    width:38px;
    height:38px;
    font-size:26px;
  }
  .pal-card-actions {
    margin-top:28px;
  }
}

.checker-result .button-outline {
  color: var(--ink);
  border-color: #d8d7cf;
  box-shadow: 0 3px 0 #c7c6bd;
}

@media (max-width: 520px) {
  .checker-hero { padding: 130px 0 60px; }
  .checker-card, .checker-result { padding: 26px 22px; }
}

/* ---- Whitelist identity card ---- */
/* Card is sized relative to its container (not the viewport), so it always
   fits proportionally inside the result panel instead of overflowing it.
   container-type below lets the text inside use cqw units, so it scales to
   the card's *actual* rendered width (which is smaller than the viewport
   once nested paddings are subtracted) instead of overflowing on mobile. */
.pal-card{
 position:relative;width:100%;max-width:460px;aspect-ratio:680/390;margin:8px auto 0;
 overflow:hidden;border-radius:22px;
 container-type:inline-size;
 background:
 radial-gradient(ellipse at 78% 52%,rgba(166,255,48,.18),transparent 30%),
 radial-gradient(ellipse at 52% 85%,rgba(35,255,150,.1),transparent 40%),
 linear-gradient(135deg,#020806,#07150e 40%,#0b2418 70%,#020806);
 border:1px solid rgba(205,255,75,.8);
 box-shadow:0 18px 36px rgba(0,0,0,.55),0 0 24px rgba(130,255,45,.14),
 inset 0 0 20px rgba(160,255,70,.08),inset 0 1px 0 rgba(255,255,255,.32);
}
.pal-card:before{
 content:"";position:absolute;z-index:-2;left:1.2%;top:2.3%;width:100%;height:100%;
 border-radius:23px;background:linear-gradient(145deg,#36423b,#111813 25%,#030504 58%,#101713);
}
.pal-card:after{
 content:"";position:absolute;inset:1px;z-index:30;pointer-events:none;border-radius:21px;
 background:linear-gradient(120deg,rgba(255,255,255,.12),transparent 18%,transparent 72%,rgba(200,255,80,.06));
}
@media (max-width: 520px) {
  .pal-card{
    box-shadow:0 10px 20px rgba(0,0,0,.45),0 0 14px rgba(130,255,45,.1),
    inset 0 0 14px rgba(160,255,70,.06),inset 0 1px 0 rgba(255,255,255,.28);
  }
}
/* ==========================================
   VISIBLE 3D BACKGROUND GRID
========================================== */
.pal-card .grid{
    position: absolute;

    z-index: 4;

    /*
       Make the grid large enough to completely
       cover the lower half of the card.
    */
    left: -20%;
    right: -20%;
    bottom: 0%;

    width: 140%;
    height: 85%;

    /*
       Vertical grid lines
    */
    background-image:
        repeating-linear-gradient(
            90deg,
            rgba(160, 255, 45, 0.65) 0px,
            rgba(160, 255, 45, 0.65) 1px,
            transparent 1px,
            transparent 6%
        ),

        /*
           Horizontal grid lines
        */
        repeating-linear-gradient(
            0deg,
            rgba(160, 255, 45, 0.65) 0px,
            rgba(160, 255, 45, 0.65) 1px,
            transparent 1px,
            transparent 15%
        );

    /*
       THIS is what creates the perspective.
    */
    transform:
        perspective(500px)
        rotateX(58deg);

    transform-origin:
        center bottom;

    /*
       Make the lines clearly visible.
    */
    opacity: 0.75;

    /*
       Green neon glow.
    */
    filter:
        drop-shadow(
            0 0 3px rgba(150, 255, 50, 0.7)
        );

    pointer-events: none;
}
.pal-card /* ==========================================
   EXTRA GLOW BEHIND THE GRID
========================================== */

.pal-card .grid-glow{
    position: absolute;

    z-index: 3;

    left: 0;
    right: 0;
    bottom: 0;

    height: 70%;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 50% 65%,
            rgba(160, 255, 50, 0.16),
            rgba(80, 255, 120, 0.05) 35%,
            transparent 72%
        );
}
.pal-card /* ==========================================
   HORIZON LINE
========================================== */

.pal-card .horizon{
    position: absolute;
display: none;
    z-index: 5;

    left: -5%;
    width: 110%;

    top: 48%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(150, 255, 50, 0.35) 15%,
            rgba(180, 255, 60, 0.9) 50%,
            rgba(150, 255, 50, 0.35) 85%,
            transparent 100%
        );

    box-shadow:
        0 0 8px rgba(150, 255, 50, 0.5),
        0 0 20px rgba(150, 255, 50, 0.2);

    pointer-events: none;
}
.pal-card .logo{position:absolute;top:8%;left:5.5%;z-index:20;display:flex;align-items:center;gap:8px;color:#fff;max-width:42%;}
.pal-card .logo-image{width:clamp(18px,4.8cqw,30px);height:clamp(16px,4.2cqw,27px);flex:0 0 auto;object-fit:contain;object-position:center;display:block;}
.pal-card .logo-name{font-size:clamp(9px,2.3cqw,14px);font-weight:900;letter-spacing:.5px;white-space:nowrap}
.pal-card .logo-subtitle{margin-top:4px;font-size:clamp(4.5px,1cqw,6px);letter-spacing:1.2px;color:rgba(255,255,255,.62);white-space:nowrap}
.pal-card .status{
 position:absolute;top:6.5%;right:4.5%;z-index:20;display:flex;align-items:center;gap:6px;
 padding:6px 12px;border:1px solid rgba(200,255,60,.72);border-radius:20px;
 background:rgba(85,130,25,.16);color:#d5ff35;font-size:clamp(6px,1.5cqw,9px);font-weight:700;letter-spacing:.6px;
 box-shadow:0 0 14px rgba(160,255,50,.08),inset 0 0 10px rgba(160,255,50,.06);white-space:nowrap
}
.pal-card .status-dot{width:6px;height:6px;flex-shrink:0;border-radius:50%;background:#d7ff32;box-shadow:0 0 8px #d7ff32,0 0 16px #d7ff32}
.pal-card .content{position:absolute;z-index:20;left:5.5%;top:37%;max-width:56%}
.pal-card .label{margin-bottom:6px;color:#d7ff32;font-size:clamp(7px,1.7cqw,10px);font-weight:800;letter-spacing:1.2px}
.pal-card .wallet{color:#fff;font-size:clamp(14px,5.5cqw,35px);line-height:1;font-weight:900;letter-spacing:-1.5px;text-shadow:0 3px 9px rgba(0,0,0,.75)}
.pal-card .description{margin-top:11px;color:rgba(255,255,255,.76);font-size:clamp(6px,1.3cqw,9px)}
.pal-card .allocation{margin-top:12px}
.pal-card .allocation-label{margin-bottom:5px;color:#d7ff32;font-size:clamp(5px,1.1cqw,7px);letter-spacing:1.3px;font-weight:700}
.pal-card .allocation-value{color:#fff;font-size:clamp(9px,2.1cqw,13px);font-weight:700;letter-spacing:1px}
.pal-card .valid-from{margin-top:8px;color:#d7ff32;font-family:'Courier New',monospace;font-size:clamp(5px,1.1cqw,7px);letter-spacing:1px;font-weight:700}
.pal-card .serial{position:absolute;z-index:20;left:5.5%;bottom:20%}
.pal-card .serial-label{margin-bottom:5px;color:rgba(255,255,255,.5);font-size:clamp(5px,1.1cqw,7px);letter-spacing:1.3px}
.pal-card .serial-number{color:#fff;font-size:clamp(9px,2.1cqw,13px);font-weight:700;letter-spacing:1px}
.pal-card .character-glow{
 position:absolute;z-index:4;width:46%;height:82%;right:1.8%;bottom:-9%;border-radius:50%;
 background:radial-gradient(circle,rgba(190,255,45,.34),rgba(90,255,150,.12) 35%,transparent 70%);
 filter:blur(16px)
}
.pal-card .character{
 position:absolute;z-index:8;width:44%;height:78%;right:2%;bottom:-4.5%;
 object-fit:contain;object-position:bottom;
 filter:brightness(1.5) contrast(1.15) drop-shadow(0 0 7px rgba(215,255,45,.55)) drop-shadow(0 12px 18px rgba(0,0,0,.5));
 opacity:.98
}
.pal-card .character-color{
 position:absolute;z-index:9;width:44%;height:78%;right:2%;bottom:-4.5%;
 background:linear-gradient(180deg,#eaff35,#d4ff38 22%,#96f06d 45%,#61dcb0 72%,#4ac9e5);
 -webkit-mask-image:url("/silhouette.PNG");
 mask-image:url("/silhouette.PNG");
 -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
 -webkit-mask-position:center bottom;mask-position:center bottom;
 -webkit-mask-size:contain;mask-size:contain;
 filter:drop-shadow(0 0 8px rgba(210,255,50,.45));opacity:.97
}
.pal-card .corner{position:absolute;width:clamp(11px,4cqw,18px);height:clamp(11px,4cqw,18px);z-index:25}
.pal-card .corner:before,.pal-card .corner:after{content:"";position:absolute;background:#d5ff32;box-shadow:0 0 8px rgba(210,255,40,.75),0 0 15px rgba(150,255,40,.25)}
.pal-card .corner:before{width:100%;height:clamp(1px,.45cqw,2px)}
.pal-card .corner:after{width:clamp(1px,.45cqw,2px);height:100%}
.pal-card .top-left{top:5.5%;left:3.2%}
.pal-card .top-right{top:5.5%;right:3.2%;transform:rotate(90deg)}
.pal-card .bottom-left{bottom:5.5%;left:3.2%;transform:rotate(270deg)}
.pal-card .bottom-right{bottom:5.5%;right:3.2%;transform:rotate(180deg)}
.pal-card .website{position:absolute;left:5.5%;bottom:6.7%;z-index:20;color:#d3ff32;font-size:clamp(5.5px,1.3cqw,8px);font-weight:700;letter-spacing:.5px}
.pal-card .secure{position:absolute;right:5.7%;bottom:7%;z-index:20;color:rgba(255,255,255,.58);font-size:clamp(5px,1.1cqw,7px);font-weight:700;letter-spacing:1.4px;white-space:nowrap}
.pal-card .scanline{position:absolute;z-index:14;left:0;right:0;top:54%;height:1px;background:linear-gradient(90deg,transparent,rgba(180,255,60,.42),transparent);box-shadow:0 0 10px rgba(150,255,50,.25)}

@container (max-width: 320px) {
  .pal-card .logo{gap:5px;max-width:48%;}
  .pal-card .logo-name{font-size:clamp(8px,2.5cqw,11px);}
  .pal-card .logo-subtitle{display:none;}
  .pal-card .status{padding:4px 7px;gap:4px;letter-spacing:.35px;}
  .pal-card .status-dot{width:4px;height:4px;}
  .pal-card .content{top:35%;max-width:60%;}
  .pal-card .description{display:none;}
  .pal-card .allocation{margin-top:8px;}
}
@container (max-width: 220px) {
  .pal-card .logo-name{font-size:8px;}
  .pal-card .content{top:34%;max-width:63%;}
  .pal-card .wallet{font-size:clamp(12px,5.5cqw,20px);letter-spacing:-.8px;}
  .pal-card .serial{bottom:19%;}
  .pal-card .secure{display:none;}
}


/* The congratulations card is a single canvas image. Hide the original
   HTML card layers after the canvas preview is installed, otherwise their
   text/images can overlap the canvas and appear scattered on mobile. */
.pal-card.is-canvas-card {
  aspect-ratio: 700 / 400;
  container-type: normal;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: hidden;
}
.pal-card.is-canvas-card > :not(.pal-card-canvas-preview) {
  display: none !important;
}
.pal-card-canvas-preview {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  border-radius: 22px;
}