[data-sealed]{display:none !important}

.seals{margin-top:clamp(28px,4vh,44px); display:grid; gap:14px;
  grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1040px){ .seals{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .seals{grid-template-columns:1fr} }

.seal{position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between; gap:26px;
  min-height:196px; padding:18px 20px 20px; border-radius:14px;
  border:1px solid rgba(61,224,138,.24); background:#040806;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .3s, transform .35s var(--ease), box-shadow .35s}
.seal:hover{border-color:rgba(102,240,168,.75); transform:translateY(-3px);
  box-shadow:0 22px 44px -22px #000, 0 0 36px -12px rgba(61,224,138,.6)}
.seal > canvas{position:absolute; inset:0; width:100%; height:100%; z-index:-2;
  image-rendering:pixelated}

.seal::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(4,8,6,.10) 0%, rgba(4,8,6,.55) 52%,
                                     rgba(4,8,6,.93) 100%)}

.seal::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply}

.seal-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.seal-n{font-family:var(--mono); font-size:13px; letter-spacing:.16em; color:var(--venom);
  text-shadow:0 0 10px rgba(61,224,138,.6)}
.seal-tag{display:inline-block; font-family:var(--mono); font-size:11px; line-height:1;
  letter-spacing:.2em; text-transform:uppercase; color:#04110A; background:var(--venom);
  padding:6px 8px 5px 10px; border-radius:5px;
  box-shadow:0 0 18px -3px rgba(61,224,138,.85)}
.seal:hover .seal-tag{animation:sealBlink .8s steps(2) 2}
@keyframes sealBlink{50%{background:var(--gold); box-shadow:0 0 18px -3px rgba(244,183,40,.9)}}

.seal-name{margin:0; font-family:var(--mono); font-weight:400; line-height:1.15;
  font-size:clamp(19px,1.5vw,23px); letter-spacing:.06em; color:var(--ink)}
.seal-line{margin:8px 0 0; font-size:15px; line-height:1.6; color:var(--body)}

.seal-wide{min-height:168px; margin-top:clamp(24px,3.5vh,36px); max-width:980px}
.seal-wide .seal-line{max-width:52ch}

@media (prefers-reduced-motion:reduce){
  .seal, .seal:hover{transform:none; transition:none}
  .seal:hover .seal-tag{animation:none}
}

.b-hint{font-family:var(--mono); font-size:13px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--faint)}

.mys{position:fixed; inset:0; z-index:520; display:grid;
  justify-items:center; align-items:center;
  background:rgba(2,3,4,.82); backdrop-filter:blur(4px); padding:18px;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  animation:fade .22s var(--ease)}
.mys > *{margin:auto 0}
@media (max-height:760px){ .mys{align-items:start} .mys > *{margin:0} }
.mys[hidden]{display:none}

.mys-card{position:relative; width:min(400px, calc(100vw - 36px)); max-width:100%;
  padding:26px; border:1px solid rgba(61,224,138,.32); border-radius:16px;
  background:#0A0C0D; animation:rise .3s var(--ease);
  box-shadow:0 40px 90px -24px #000, 0 0 48px -18px rgba(61,224,138,.45)}
.mys-card .bp-sq{margin-bottom:16px}
.mys-camo{position:relative; height:156px; margin:0 0 20px; border-radius:12px;
  overflow:hidden; border:1px solid rgba(61,224,138,.3); background:#040806}
.mys-camo canvas{display:block; width:100%; height:100%; image-rendering:pixelated}
.mys-camo::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.3) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply}
.mys-camo .seal-tag{position:absolute; top:12px; right:12px}
.mys-h{margin:0; font-family:var(--mono); font-weight:400; font-size:20px;
  line-height:1.3; letter-spacing:.05em; color:var(--ink)}
.mys-p{margin:12px 0 0; font-size:16px; line-height:1.7; color:var(--body)}
.mys-act{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.mys-act .btn{flex:1 1 auto}