/* THE SMISHCREANT FAN CLUB — page styles. Builds on /assets/shared.css */
.fc{max-width:1020px;margin:0 auto;padding:12px 10px 40px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tiny{font-size:12px;opacity:.85}
.center{text-align:center}
.nowrap{white-space:nowrap}
:focus-visible{outline:3px dashed var(--yel);outline-offset:2px}

/* ---------------- 2005 PROFILE PAGE ---------------- */
.ms{background:#e5ecf9;color:#000;font-family:Verdana,Arial,sans-serif;font-size:13px;border:3px solid #036;box-shadow:6px 6px 0 var(--hot);margin-top:10px}
.ms a{color:#039}
.ms-banner{background:#036;color:#fff;display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;padding:6px 10px;align-items:center}
.ms-logo{font:bold 16px/1 var(--font-fun);letter-spacing:-.5px}
.ms-logo b{color:var(--yel)}
.ms-search{font-size:11px}
.ms-fake-input{display:inline-block;background:#fff;color:#888;padding:2px 6px;border:1px inset #999;font-style:italic}
.ms-grid{display:grid;grid-template-columns:minmax(0,40%) minmax(0,60%);gap:14px;padding:12px}
.ms-name{font:bold 22px/1.1 var(--font-fun);margin:0 0 8px;color:#000;text-shadow:2px 2px 0 var(--cyan)}
.ms-pic-row{display:flex;gap:10px;align-items:flex-start}
.ms-pic{flex:none;border:2px solid #000;line-height:0;transform:rotate(-2deg);box-shadow:3px 3px 0 #000}
.ms-facts{list-style:none;margin:0;padding:0;font-size:12px;line-height:1.5;min-width:0;overflow-wrap:anywhere}
.ms-online{color:#090;font-weight:bold}
.ms-online .blink{color:#0c0}
.ms-mood{font-size:12px;margin:10px 0}
.ms-box{border:1px solid #6699cc;background:#fff;margin:10px 0}
.ms-h{margin:0;background:#6699cc;color:#fff;font-size:13px;padding:4px 6px}
.ms-h-alt{background:#ffcc99;color:#c60}
.ms-box>*:not(.ms-h){margin-left:8px;margin-right:8px}
.ms-box p{line-height:1.5}
.ms-sub{color:#c60;font-size:13px;margin:10px 8px 0}
.ms-contact{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:8px 0}
.ms-cbtn{display:block;font-size:12px;padding:6px;background:#f0f4ff;border:1px solid #bcd;text-decoration:none;font-weight:bold}
.ms-cbtn:hover{background:var(--yel)}
.ms-details{border-collapse:collapse;width:calc(100% - 16px);margin:6px 8px 8px;font-size:12px}
.ms-details th{text-align:left;background:#d5e8fb;color:#036;padding:4px;width:40%;vertical-align:top}
.ms-details td{background:#f5f9ff;padding:4px}
.ms-details tr+tr>*{border-top:2px solid #fff}
.ms-network{border:2px solid #6699cc;padding:10px;font:bold 16px/1.2 Verdana,sans-serif;text-align:center;background:#fff}
.ms-friendcount{font-size:12px}
.player{display:flex;gap:8px;align-items:center;padding:8px 0}
.player-btn{min-width:72px;font-weight:bold}
.player-info{flex:1;min-width:0;font-size:11px}
.player-title{font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-artist{color:#666}
.player-bar{height:6px;background:#ccd;margin-top:4px;border:1px inset #999}
.player-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--hot),var(--cyan))}

/* top 8 */
.top8{list-style:none;padding:8px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.t8{display:flex;flex-direction:column;align-items:center;text-decoration:none;font-size:11px;font-weight:bold;text-align:center;color:#039;position:relative}
.t8-pic{display:grid;place-items:center;width:100%;aspect-ratio:1;font-size:clamp(28px,7vw,44px);background:radial-gradient(circle at 30% 30%,#fff,var(--c2) 40%,var(--c1));border:2px solid #000;box-shadow:2px 2px 0 #000;transition:transform .15s}
.t8:hover .t8-pic,.t8:focus-visible .t8-pic{transform:rotate(-4deg) scale(1.06)}
.t8-rank{position:absolute;top:-6px;left:-4px;background:var(--hot);color:#fff;border:1px solid #000;font-size:10px;padding:0 4px;z-index:1;transform:rotate(-8deg)}
.t8-name{margin-top:4px;line-height:1.15}
.top8-drama{font-style:italic}

/* comments */
.comments{padding-bottom:8px}
.cmt{display:grid;grid-template-columns:84px 1fr;gap:8px;border-top:1px dashed #bcd;padding:8px 0}
.cmt-who{display:flex;flex-direction:column;align-items:center;text-align:center;font-size:10px;color:#039}
.cmt-pic{display:grid;place-items:center;width:48px;height:48px;font-size:28px;background:radial-gradient(circle,var(--c2,#eee),var(--c1,#ccc));border:1px solid #000;margin-bottom:2px}
.cmt-body{background:#f5f9ff;padding:6px;border:1px solid #d5e8fb}
.cmt-when{font-size:10px;color:#888}
.cmt-body p{margin:4px 0 0}
.cmt-mod .cmt-body{background:#fff0f0;border-color:#f99;color:#a00;font-style:italic}

/* ---------------- PSA ---------------- */
.psa{margin:28px auto;max-width:760px;transform:rotate(-.6deg)}
.psa .win-body{font-size:14px;line-height:1.5}
.tells{padding-left:22px;margin:6px 0}
.tells li{margin:4px 0}
.psa-7726{background:var(--yel);border:2px dashed #000;padding:8px;margin:10px 0 0}
.win.shake{animation:shake .4s}
@keyframes shake{20%,60%{translate:-6px 0}40%,80%{translate:6px 0}}

/* ---------------- SECTIONS ---------------- */
.sect{margin:40px 0}
.sect-h{text-align:center;font:900 clamp(24px,6vw,42px)/1.1 Impact,"Arial Black",var(--font-fun);letter-spacing:1px;margin:0 0 8px;color:var(--yel);text-shadow:3px 3px 0 var(--hot),6px 6px 0 #000}
.sect-h .rainbow{text-shadow:none;filter:drop-shadow(3px 3px 0 #000)}
.tiny-h{display:block;font:14px var(--font-fun);color:var(--cyan);text-shadow:none;letter-spacing:0}
.sect-sub{text-align:center;max-width:680px;margin:0 auto 14px;line-height:1.5;color:#eee}
.rarity-key{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:18px;font:bold 12px var(--font-sys)}
.rk{padding:3px 8px;border:2px solid #000;color:#000}
.rk.r-common{background:#ddd}
.rk.r-rare{background:#9cf}
.rk.r-ultra{background:#d9a8ff}
.rk.r-holo{background:linear-gradient(90deg,#f6c,#6ff,#ff6,#6f6)}
.rk.r-secret{background:linear-gradient(135deg,#a67c00,#ffd700,#fff6c0,#ffd700,#a67c00)}

/* ---------------- TRADING CARDS ---------------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:26px 18px;justify-items:center}
.card-slot{width:100%;max-width:300px}
.lore{font-size:13px;line-height:1.4;color:#ddd;margin:10px 4px 0}
.lore b{color:var(--lime)}

.tcard{
  --mx:50%;--my:50%;--rx:0deg;--ry:0deg;--hyp:0;
  --frame:#e8e8e8;
  position:relative;width:100%;max-width:300px;aspect-ratio:63/88;border-radius:14px;
  transform:perspective(800px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .3s;
  transform-style:preserve-3d;will-change:transform;
  box-shadow:0 8px 20px rgba(0,0,0,.6),0 0 0 2px #000;
  touch-action:pan-y;user-select:none;-webkit-user-select:none;
  color:#000;font-family:var(--font-sys);isolation:isolate;container-type:inline-size;
}
.tcard.is-active{transition:transform .08s linear,box-shadow .3s;box-shadow:0 18px 40px rgba(0,0,0,.7),0 0 0 2px #000,0 0 30px var(--c1)}
.tcard:focus-visible{outline:3px solid var(--yel);outline-offset:4px}
.tc-inner{position:absolute;inset:0;border-radius:14px;overflow:hidden;padding:4.5cqw 4.5cqw 3cqw;display:flex;flex-direction:column;gap:2cqw;
  background:linear-gradient(160deg,var(--c2),#fff 40%,var(--c2));border:3.5cqw solid var(--frame)}
.r-rare{--frame:#7fb7ff}
.r-ultra{--frame:#b77dff}
.r-holo{--frame:#c9c9c9}
.r-secret{--frame:#e6b800}
.r-holo .tc-inner{border-image:linear-gradient(135deg,#f6c,#6ff,#ff6,#6f6,#f6c) 1;border-radius:0}
.r-holo .tc-inner,.r-holo{border-radius:6px}
.r-secret .tc-inner{background:linear-gradient(160deg,#fff6c0,#ffe680 30%,#fff 50%,#ffe680 70%,#fff6c0)}

.tc-top{display:flex;justify-content:space-between;align-items:baseline;gap:4px}
.tc-name{font:bold 5.6cqw/1.05 var(--font-fun);letter-spacing:-.2px}
.tc-hp{font-size:3.6cqw;color:#c00;white-space:nowrap}
.tc-hp b{font-size:5.4cqw}
.tc-art{position:relative;flex:0 0 34%;border:1.2cqw solid #000;background:radial-gradient(circle at 50% 60%,#fff 0,var(--c2) 30%,var(--c1) 75%);overflow:hidden;display:grid;place-items:center;box-shadow:inset 0 0 0 1cqw rgba(255,255,255,.6)}
.tc-burst{position:absolute;inset:-50%;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.55) 0 8deg,transparent 8deg 20deg);animation:spin 18s linear infinite}
.tc-emoji{position:relative;font-size:19cqw;line-height:1;filter:drop-shadow(1cqw 1cqw 0 rgba(0,0,0,.35))}
.tc-phone{position:absolute;right:3cqw;bottom:2cqw;font-size:8cqw;transform:rotate(18deg)}
@keyframes spin{to{transform:rotate(360deg)}}
.tc-type{display:flex;justify-content:space-between;font-size:3.3cqw;font-weight:bold;background:rgba(0,0,0,.08);padding:.6cqw 2cqw;border-radius:4cqw}
.tc-rar{white-space:nowrap}
.r-common .tc-rar{color:#555}.r-rare .tc-rar{color:#0059c9}.r-ultra .tc-rar{color:#7a00cc}.r-holo .tc-rar{color:#c0008c}.r-secret .tc-rar{color:#8a6500}
.tc-move{background:rgba(255,255,255,.8);border:.6cqw solid rgba(0,0,0,.3);padding:1.4cqw 2cqw;font-size:3.3cqw;line-height:1.3}
.tc-move-h{font-size:3.9cqw}
.tc-smish{margin:1cqw 0 0;font-family:var(--font-fun);font-size:3.15cqw;line-height:1.25}
.smish-link{color:#00e;text-decoration:underline;word-break:break-all}
.smish-link:visited{color:#551a8b}
.tc-stats{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:.6cqw 3cqw;font-size:3cqw}
.st{display:flex;flex-direction:column}
.st dt{font-weight:bold;letter-spacing:.2px}
.st dd{margin:0;display:flex;align-items:center;gap:1.5cqw}
.bar{flex:1;height:2.2cqw;background:#0002;border:.4cqw solid #0006}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--lime),var(--yel),var(--hot))}
.tc-weak{font-size:3.1cqw;border-top:.5cqw dashed #0005;padding-top:1cqw}
.tc-weak span{color:#c00;font-weight:bold}
.tc-tells{font-size:2.9cqw;line-height:1.25;color:#333}
.tc-tells span{font-weight:bold;color:#a00}
.tc-foot{margin-top:auto;display:flex;justify-content:space-between;font-size:2.6cqw;opacity:.7;font-style:italic}

/* shine layers */
.tc-shine,.tc-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2}
.tc-glare{background:radial-gradient(farthest-corner circle at var(--mx) var(--my),rgba(255,255,255,.75) 0%,rgba(255,255,255,.15) 30%,rgba(0,0,0,.25) 90%);mix-blend-mode:overlay;opacity:0;transition:opacity .3s}
.tcard.is-active .tc-glare{opacity:1}
.tc-shine{opacity:0;transition:opacity .3s;mix-blend-mode:color-dodge;
  background:
    repeating-linear-gradient(115deg,
      hsl(0 100% 70%) 0%,hsl(50 100% 65%) 5%,hsl(120 100% 65%) 10%,hsl(190 100% 65%) 15%,hsl(270 100% 72%) 20%,hsl(330 100% 70%) 25%,hsl(0 100% 70%) 30%);
  background-size:300% 300%;
  background-position:var(--mx) var(--my);
  filter:brightness(.6) contrast(1.4) saturate(1.3)}
.r-rare.is-active .tc-shine{opacity:.25}
.r-ultra .tc-shine{opacity:.12}
.r-ultra.is-active .tc-shine{opacity:.5}
.r-holo .tc-shine{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='%23fff'%3E%3Cpath d='M10 2l1.5 5 5 1.5-5 1.5L10 15 8.5 10 3.5 8.5l5-1.5z'/%3E%3Cpath d='M30 22l1 3.5 3.5 1-3.5 1-1 3.5-1-3.5-3.5-1 3.5-1z'/%3E%3C/g%3E%3C/svg%3E"),
    repeating-linear-gradient(115deg,hsl(0 100% 70%) 0%,hsl(50 100% 65%) 5%,hsl(120 100% 65%) 10%,hsl(190 100% 65%) 15%,hsl(270 100% 72%) 20%,hsl(330 100% 70%) 25%,hsl(0 100% 70%) 30%);
  background-size:40px 40px,300% 300%;
  background-position:calc(var(--mx) * .3) calc(var(--my) * .3),var(--mx) var(--my);
  opacity:.35;animation:holoIdle 6s ease-in-out infinite}
.r-holo.is-active .tc-shine{opacity:.85;animation:none}
@keyframes holoIdle{0%,100%{background-position:0 0,0% 0%}50%{background-position:20px 20px,100% 100%}}
.r-secret .tc-shine{
  background:
    radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.9),transparent 35%),
    repeating-radial-gradient(circle at 30% 30%,#fff0 0 3px,#ffd70066 3px 4px),
    conic-gradient(from 0deg at var(--mx) var(--my),#ffd700,#ff6ad5,#6ff,#ffd700,#c6f,#ffd700);
  mix-blend-mode:color-dodge;opacity:.35;animation:secretHue 4s linear infinite;filter:brightness(.7) contrast(1.3)}
.r-secret.is-active .tc-shine{opacity:.75}
.r-secret{box-shadow:0 8px 20px rgba(0,0,0,.6),0 0 0 2px #000,0 0 18px #ffd70099}
@keyframes secretHue{to{filter:brightness(.7) contrast(1.3) hue-rotate(360deg)}}

/* ---------------- BOOSTER ---------------- */
.booster{background:repeating-linear-gradient(-45deg,#1a0030 0 18px,#2a0050 18px 36px);border:4px ridge var(--hot);padding:20px 10px;border-radius:4px}
.booster-stage{display:flex;flex-direction:column;align-items:center;gap:14px}
.pack{appearance:none;background:none;border:0;padding:0;cursor:pointer;position:relative;width:min(190px,48vw);filter:drop-shadow(0 10px 18px rgba(255,0,204,.5));animation:packBob 2.4s ease-in-out infinite}
.pack-svg{display:block;width:100%;height:auto}
.pack-cta{position:absolute;top:44%;left:-18%;background:var(--yel);color:#000;font:bold 13px var(--font-sys);padding:4px 8px;border:2px solid #000;transform:rotate(-14deg);animation:blink 1s steps(2,start) infinite}
.pack.ripping{animation:packShake .65s ease-in-out}
.pack.ripped{animation:none;width:min(110px,30vw);opacity:.65}
.pack.ripped .pack-cta{display:none}
@keyframes packBob{50%{transform:translateY(-8px) rotate(2deg)}}
@keyframes packShake{0%,100%{transform:none}15%{transform:rotate(-8deg) scale(1.05)}30%{transform:rotate(8deg) scale(1.1)}45%{transform:rotate(-10deg) scale(1.15)}60%{transform:rotate(10deg) scale(1.2)}80%{transform:scale(1.35);opacity:.6}}

.pull-row{display:flex;gap:16px;width:100%;justify-content:center;overflow-x:auto;scroll-snap-type:x mandatory;padding:16px 12px 14px;-webkit-overflow-scrolling:touch}
.pull-row:empty{display:none}
.flip{flex:0 0 min(240px,78vw);scroll-snap-align:center;perspective:1000px}
.flip-in{position:relative;aspect-ratio:63/88;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,1.4,.5,1);transform:rotateY(180deg)}
.flip.flipped .flip-in{transform:rotateY(0)}
.flip-back,.flip-front{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip-back{transform:rotateY(180deg)}
.flip-front .tcard{max-width:none}
.cb{height:100%;border-radius:14px;border:8px solid #fff;box-shadow:0 0 0 2px #000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:radial-gradient(circle at 50% 45%,var(--yel) 0 18%,var(--hot) 19% 34%,var(--navy) 35% 52%,var(--cyan) 53% 58%,#000 59%)}
.cb-logo{font:900 26px/0.95 Impact,"Arial Black",sans-serif;color:var(--yel);text-align:center;-webkit-text-stroke:1.5px #000;transform:rotate(-8deg);background:var(--hot);padding:6px 10px;border:3px solid #000}
.cb-warn{font:bold 11px var(--font-sys);background:#000;color:var(--lime);padding:3px 6px}
.new-badge,.dupe-badge{position:absolute;top:-10px;right:-8px;z-index:5;font:bold 14px var(--font-sys);padding:4px 8px;border:2px solid #000;transform:rotate(12deg)}
.new-badge{background:var(--lime);color:#000;animation:blink 1s steps(2,start) 3}
.dupe-badge{background:#bbb;color:#333}
.pull-react{text-align:center;font-size:14px;margin:8px 0 0;color:var(--yel);opacity:0;transition:opacity .4s .5s}
.flip.flipped .pull-react{opacity:1}
.booster-ctl{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin:12px 0 20px}
.big98{font-size:18px !important;font-weight:bold;padding:8px 18px !important}
.big98:disabled{color:#808080;text-shadow:1px 1px #fff;cursor:wait}
.pack-stats{font:13px var(--font-sys);color:#ddd}

.binder-win{max-width:880px;margin:0 auto}
.binder-pct{font-size:12px}
.binder-meter{height:16px;border:2px inset #fff;background:#fff;padding:2px}
.binder-meter span{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--navy) 0 10px,transparent 10px 12px);transition:width .6s}
.binder-msg{font-weight:bold;margin:8px 0}
.binder{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;padding:10px;background:#fff;border:2px inset #fff;
  background-image:linear-gradient(#e8e8e8 1px,transparent 1px);background-size:100% 22px}
.bslot{position:relative;aspect-ratio:63/88;border:2px solid #000;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4px;font-size:10px;text-decoration:none;color:#000}
.bslot.have{background:radial-gradient(circle at 50% 40%,#fff,var(--c2) 40%,var(--c1));box-shadow:2px 2px 0 #000}
.bslot.have.r-holo,.bslot.have.r-secret{background:linear-gradient(135deg,#f6c,#6ff,#ff6,#6f6,#f6c);background-size:300% 300%;animation:holoIdle 4s ease-in-out infinite}
.bslot.have.r-secret{background:linear-gradient(135deg,#a67c00,#ffd700,#fff6c0,#ffd700,#a67c00);background-size:300% 300%}
.bslot.miss{background:repeating-linear-gradient(45deg,#ddd 0 6px,#ccc 6px 12px);border-style:dashed;color:#666}
.bs-no{position:absolute;top:2px;left:4px;font-size:9px;font-weight:bold}
.bs-emo{font-size:30px;line-height:1.1}
.bslot.miss .bs-emo{filter:grayscale(1);opacity:.5}
.bs-name{font-weight:bold;line-height:1.1;margin-top:2px}
.bs-x{position:absolute;bottom:2px;right:4px;font-weight:bold;background:#000;color:var(--lime);padding:0 3px}
.binder-ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.binder-win.complete{box-shadow:0 0 0 3px var(--yel),0 0 30px var(--hot)}

/* ---------------- STAN WALL ---------------- */
.stan-wall{columns:3 260px;column-gap:14px}
.post{break-inside:avoid;background:#fff;color:#222;font-family:Helvetica,Arial,sans-serif;border-radius:6px;margin:0 0 14px;padding:12px;box-shadow:0 0 0 3px var(--c1),5px 5px 0 3px #000;display:inline-block;width:100%}
.post-h{display:flex;align-items:center;gap:6px;font-size:13px;color:#36465d}
.post-av{display:grid;place-items:center;width:34px;height:34px;border-radius:4px;background:linear-gradient(135deg,var(--c1),var(--c2));font-size:20px;flex:none}
.reblog{color:#888;font-weight:normal;font-size:11px}
.post-body{font-size:16px;line-height:1.4;margin:10px 0;font-family:var(--font-fun)}
.post-tags{font-size:12px;color:#999;display:flex;flex-wrap:wrap;gap:4px 8px}
.post-f{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:12px;font-weight:bold;color:#555;border-top:1px solid #eee;padding-top:8px}
.heart{background:none;border:0;font-size:18px;cursor:pointer;color:#d00;padding:0 4px;line-height:1}
.heart.on{animation:pop .3s}
@keyframes pop{50%{transform:scale(1.6)}}

/* ---------------- OATH ---------------- */
.oath .scroll{max-width:720px;margin:0 auto;color:#3a2200;padding:30px clamp(16px,5vw,48px);
  background:radial-gradient(ellipse at center,#fff6d8 0%,#f3dca0 70%,#d8b46a 100%);
  border-radius:6px;box-shadow:0 0 0 6px #8b5a14,0 0 0 9px var(--yel),10px 10px 0 9px #000;font-family:Georgia,"Times New Roman",serif;position:relative}
.oath-h{text-align:center;font:italic bold clamp(24px,5vw,34px)/1.1 Georgia,serif;margin:0 0 6px;color:#6b0000}
.oath-intro{text-align:center;font-style:italic;margin:0 0 14px}
.oath-list{list-style:none;margin:0;padding:0}
.oath-list li{margin:0 0 6px;border-radius:4px;transition:background .3s}
.oath-list label{display:flex;gap:10px;align-items:flex-start;padding:8px;cursor:pointer;line-height:1.45;font-size:16px}
.oath-list input{flex:none;width:22px;height:22px;margin-top:2px;accent-color:#c00}
.oath-list li.sworn{background:rgba(255,255,255,.55)}
.oath-txt{flex:1;min-width:0}
.oath-list li.sworn label::after{content:"✓ sworn";flex:none;margin-left:auto;font:bold 11px var(--font-sys);color:#fff;background:#c00;padding:2px 5px;transform:rotate(6deg);align-self:center}
.oath-seal{display:flex;gap:14px;align-items:center;margin-top:16px;padding:12px;background:#fff;border:3px double #6b0000}
.oath-seal[hidden]{display:none}
.oath-seal.pop{animation:sealIn .6s cubic-bezier(.3,1.6,.5,1)}
.seal{flex:none;width:70px;height:70px;border-radius:50%;display:grid;place-items:center;font-size:36px;color:#fff;background:radial-gradient(circle,#e00,#900);box-shadow:0 0 0 4px #900,inset 0 0 0 4px #f66}
@keyframes sealIn{from{transform:scale(.3) rotate(-30deg);opacity:0}}

/* ---------------- MERCH ---------------- */
.merch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
.merch{background:#fff;color:#000;border:3px solid #000;padding:10px;box-shadow:6px 6px 0 var(--cyan);transform:rotate(var(--tilt));transition:transform .2s;display:flex;flex-direction:column}
.merch:hover{transform:rotate(0) scale(1.03)}
.merch-art{position:relative;background:repeating-linear-gradient(45deg,#ffe8fb 0 12px,#fff 12px 24px);border:2px dashed #f0c;aspect-ratio:1}
.merch-svg{width:100%;height:100%;display:block}
.merch-sticker{position:absolute;top:6px;right:6px;width:58px;height:58px;border-radius:50%;background:var(--yel);border:2px solid #000;display:grid;place-items:center;text-align:center;font:900 11px/1 Impact,sans-serif;transform:rotate(14deg)}
.merch-sticker.s2{background:var(--lime)}
.merch-name{font:bold 16px/1.2 var(--font-fun);margin:8px 0 2px}
.merch-why{font-size:13px;margin:0;color:#444;flex:1}
.merch-price{font:bold 15px var(--font-sys);color:#c00;margin:6px 0}
.merch-btn{align-self:flex-start}

/* ---------------- MEMBERSHIP ---------------- */
.member-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:22px;align-items:start}
.member-form .win-body{display:flex;flex-direction:column;gap:6px}
.nick-label{font-weight:bold;font-size:14px;margin-top:4px}
.nick-help{font-size:12px;line-height:1.45;margin:0;background:#ffffe1;border:1px solid #000;padding:6px}
#nick,#fave{font:16px var(--font-sys);padding:6px;border:2px inset #fff;background:#fff;color:#000;width:100%}
.nick-warn{color:#c00;font-weight:bold;font-size:13px;margin:0;min-height:1em}
.member-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}

.mcard{--c1:#ff00cc;--c2:#00ffff;--mx:50%;--my:50%;--rx:0deg;--ry:0deg;
  position:relative;aspect-ratio:85.6/54;max-width:460px;margin:0 auto;border-radius:16px;overflow:hidden;color:#fff;padding:5% 6%;
  display:flex;flex-direction:column;justify-content:space-between;
  background:
    radial-gradient(circle at 85% 15%,rgba(255,255,255,.35),transparent 40%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 8px,transparent 8px 16px),
    linear-gradient(135deg,var(--navy),var(--c1) 60%,var(--c2));
  box-shadow:0 12px 28px rgba(0,0,0,.6),0 0 0 3px #fff,0 0 0 5px #000;
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s;
  touch-action:pan-y;font-family:var(--font-sys);container-type:inline-size}
.mcard.is-active{transition:transform .08s linear}
.mcard.made{animation:mcardIn .7s cubic-bezier(.3,1.5,.5,1)}
@keyframes mcardIn{0%{transform:perspective(900px) rotateY(-180deg) scale(.6)}}
.mcard-shine{position:absolute;inset:0;pointer-events:none;mix-blend-mode:color-dodge;opacity:.35;
  background:linear-gradient(115deg,transparent 20%,hsl(300 100% 75%) 35%,hsl(180 100% 70%) 45%,hsl(60 100% 70%) 55%,transparent 70%);
  background-size:250% 250%;background-position:var(--mx) var(--my);animation:holoIdle 5s ease-in-out infinite}
.mcard.is-active .mcard-shine{animation:none;opacity:.6}
.mcard>*:not(.mcard-shine){position:relative}
.mcard-top{display:flex;justify-content:space-between;align-items:center}
.mcard-org{font:900 clamp(12px,5.2cqw,22px)/1 Impact,"Arial Black",sans-serif;letter-spacing:1px;text-shadow:2px 2px 0 #000}
.mcard-chip{width:13cqw;aspect-ratio:1.3;border-radius:6px;background:linear-gradient(135deg,#fff3b0,#d4a017 50%,#fff3b0);border:1px solid #8a6500;
  background-image:linear-gradient(90deg,transparent 30%,#8a650088 30% 34%,transparent 34% 66%,#8a650088 66% 70%,transparent 70%),linear-gradient(135deg,#fff3b0,#d4a017 50%,#fff3b0)}
.mcard-mid{display:flex;gap:4cqw;align-items:center}
.mcard-avatar{flex:none;width:18cqw;aspect-ratio:1;display:grid;place-items:center;font-size:11cqw;background:#fff;border-radius:50%;border:3px solid #000;box-shadow:0 0 0 3px var(--yel)}
.mcard-label{font-size:2.8cqw;letter-spacing:3px;opacity:.85}
.mcard-nick{font:bold clamp(16px,6.6cqw,30px)/1.05 var(--font-fun);text-shadow:2px 2px 0 #000;word-break:break-word}
.mcard-rank{font-size:3.2cqw;font-weight:bold;color:var(--yel);text-shadow:1px 1px 0 #000}
.mcard-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2cqw;margin:0;background:rgba(0,0,0,.35);border-radius:6px;padding:1.5cqw 2cqw}
.mcard-stats dt{font-size:2.3cqw;opacity:.85;text-transform:uppercase}
.mcard-stats dd{margin:0;font-weight:bold;font-size:3.4cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcard-bot{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mcard-no{font:bold 3.4cqw monospace;letter-spacing:1px;text-shadow:1px 1px 0 #000}
.mcard-barcode{width:30cqw;height:7cqw;background:#fff repeating-linear-gradient(90deg,#000 0 2px,transparent 2px 4px,#000 4px 5px,transparent 5px 8px,#000 8px 11px,transparent 11px 12px);border:2px solid #fff}
.mcard-fine{font-size:2.1cqw;opacity:.75;text-align:center}

/* ---------------- WEBRING / BADGES ---------------- */
.webring{text-align:center}
.ring{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;background:#000;border:3px outset var(--hot);padding:8px 14px;font-family:var(--font-sys)}
.badges{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:12px}
.b1{background:var(--hot);color:#fff}.b2{background:#000;color:var(--lime)}.b3{background:#fff;color:#000}.b4{background:var(--yel);color:#000}.b5{background:linear-gradient(90deg,var(--cyan),var(--hot));color:#000}

/* ---------------- MODAL ---------------- */
.modal{position:fixed;inset:0;z-index:1000;background:rgba(0,0,40,.6);display:grid;place-items:center;padding:16px}
.modal[hidden]{display:none}
.modal-win{max-width:440px;width:100%;animation:sealIn .35s cubic-bezier(.3,1.5,.5,1)}
.modal-win .win-body{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.modal-icon{font-size:40px;line-height:1}
.modal-text{font-size:14px;line-height:1.5}
.modal-text p{margin:0 0 8px}
.modal-btns{grid-column:1/-1;text-align:center}
.modal-btns .btn98{min-width:100px;font-weight:bold}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:720px){
  .ms-grid{grid-template-columns:minmax(0,1fr)}
  .member-wrap{grid-template-columns:minmax(0,1fr)}
  .ms-name{font-size:20px}
  .card-grid{grid-template-columns:minmax(0,320px);justify-content:center}
  .card-slot{max-width:320px}
  .tcard{max-width:320px}
  .pull-row{justify-content:flex-start}
  .psa{transform:none}
}
@media (max-width:420px){
  .top8{grid-template-columns:repeat(4,1fr);gap:6px}
  .t8-name{font-size:9.5px}
  .cmt{grid-template-columns:62px 1fr}
  .ms-contact{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .tc-burst,.pack,.pack-cta,.r-holo .tc-shine,.r-secret .tc-shine,.mcard-shine,.bslot.have,.new-badge{animation:none !important}
  .tcard,.mcard,.flip-in{transition:none}
  .modal-win,.mcard.made,.win.shake,.heart.on,.oath-seal.pop{animation:none !important}
  .merch,.merch:hover,.t8-pic{transition:none}
  .pull-react{transition:none}
}