/* homepage */
@keyframes tape{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tape{animation:tape 80s linear infinite}
.tape:hover{animation-play-state:paused}
.tapelink{font-family:'Space Mono',monospace;font-weight:700;font-size:14px;color:var(--blue);padding:12px 18px;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;gap:4px;transform-origin:0 50%;will-change:transform,filter,opacity}
.tapelink:hover{color:var(--blue);text-decoration:underline;text-underline-offset:4px}
@keyframes gulp{0%{transform:scaleX(1)}35%{transform:scaleX(1.7) scaleY(1.06)}70%{transform:scaleX(.85)}100%{transform:scaleX(1)}}
@keyframes inkdot{0%{opacity:0;transform:translate(0,0) scale(.4)}30%{opacity:1}100%{opacity:0;transform:translate(9px,var(--dy)) scale(1)}}
.inkmouth{transform-origin:0 50%}
.inkmouth .inkdot1,.inkmouth .inkdot2{opacity:0;transform-box:fill-box}
.inkmouth.gulp{animation:gulp .42s cubic-bezier(.3,1.4,.5,1)}
.inkmouth.gulp .inkdot1{--dy:-5px;animation:inkdot .5s ease-out}
.inkmouth.gulp .inkdot2{--dy:5px;animation:inkdot .5s .06s ease-out}

/* hero "lie." ink splat (starts once the page is ready) */
@keyframes splat{0%{transform:scale(0) rotate(-25deg);opacity:0}55%{transform:scale(1.14) rotate(4deg);opacity:1}100%{transform:scale(1) rotate(0)}}
@keyframes drip{from{stroke-dashoffset:70}to{stroke-dashoffset:0}}
.splat{transform-box:fill-box;transform-origin:center;animation:splat .55s .9s cubic-bezier(.2,1.5,.4,1) both}
.spatter{transform-box:fill-box;transform-origin:center;animation:pop .25s 1.15s ease-out both}
.drip{stroke-dasharray:70;stroke-dashoffset:70;animation:drip 1.5s 1.4s cubic-bezier(.5,0,.8,.6) forwards}
.drop{transform-box:fill-box;transform-origin:center;animation:pop .3s 2.7s ease-out both}
@keyframes inkfade{0%{opacity:1;filter:blur(0)}100%{opacity:0;filter:blur(3px)}}
.inkspill{animation:inkfade .9s 5s ease-in forwards}
@keyframes splatB{0%{transform:scale(0) rotate(-25deg);opacity:0}55%{transform:scale(1.14) rotate(4deg);opacity:1}100%{transform:scale(1) rotate(0)}}
@keyframes popB{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes dripB{from{stroke-dashoffset:70}to{stroke-dashoffset:0}}
@keyframes inkfadeB{0%{opacity:1;filter:blur(0)}100%{opacity:0;filter:blur(3px)}}
.inkh:hover .inkspill{animation:inkfadeB .9s 4.2s ease-in forwards}
.inkh:hover .splat{animation:splatB .55s .05s cubic-bezier(.2,1.5,.4,1) both}
.inkh:hover .spatter{animation:popB .25s .3s ease-out both}
.inkh:hover .drip{animation:dripB 1.5s .55s cubic-bezier(.5,0,.8,.6) forwards}
.inkh:hover .drop{animation:popB .3s 1.85s ease-out both}

/* pinned cards */
.pcard{position:absolute;left:50%;top:20px;width:80%;margin-left:-40%;background:#FFFFFF;border-radius:14px;padding:6px 6px 10px;box-shadow:0 16px 32px rgba(0,0,0,.28);text-decoration:none;transition:transform .8s cubic-bezier(.3,1.25,.4,1),opacity .6s ease}
.margin-note{display:block}
@media (max-width: 860px){.margin-note{display:none}}

/* quiz */
@keyframes stamp{0%{transform:scale(2.2) rotate(-14deg);opacity:0}60%{transform:scale(.94) rotate(-8deg);opacity:1}100%{transform:scale(1) rotate(-8deg)}}
.stamp{animation:stamp .35s ease-out both}
@keyframes inkpop{0%{transform:scale(0) rotate(-20deg);opacity:0}55%{transform:scale(1.15) rotate(3deg);opacity:1}100%{transform:scale(1) rotate(0)}}
.inkpop{animation:inkpop .45s cubic-bezier(.2,1.5,.4,1) both}
@keyframes inkdrip{from{stroke-dashoffset:40}to{stroke-dashoffset:0}}
.inkdrip{stroke-dasharray:40;stroke-dashoffset:40;animation:inkdrip .9s .35s ease-in forwards}
.inkdrop{transform-box:fill-box;transform-origin:center;animation:pop .25s 1.2s ease-out both}
@keyframes autobar{from{width:0}to{width:100%}}
.autobar{width:0;animation:autobar 3.2s linear forwards}
@keyframes inkpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.6)}}
.inkpulse{transform-box:fill-box;transform-origin:center;animation:inkpulse 1.4s ease-in-out infinite}
.qbtn{font-family:'Space Mono',monospace;font-weight:700;font-size:15px;border:2px solid #111111;border-radius:999px;padding:0 16px;min-height:52px;cursor:pointer;color:#111111;background:#FFFFFF}
.qsmall{font-family:'Space Mono',monospace;font-weight:700;font-size:13px;color:#111111;background:#FFFFFF;border:2px solid #111111;border-radius:999px;padding:0 18px;min-height:44px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.power{width:64px;height:64px;border-radius:50%;border:2px solid #111111;background:#FFFFFF;display:flex;align-items:center;justify-content:center;cursor:pointer}
.power:disabled{opacity:.35;cursor:default}
.lane{font-family:'Space Mono',monospace;font-weight:700;font-size:13px;border:1.5px solid var(--blue);border-radius:999px;padding:0 16px;min-height:40px;cursor:pointer;background:#FFFFFF;color:var(--blue)}
.lane[aria-pressed="true"]{background:var(--blue);color:#FFFFFF}

/* player card (quiz) */
.player{background:#F7F6F2;border:2px solid #111111;border-radius:32px;padding:22px 24px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative}
.p-top{width:100%;display:flex;align-items:center;justify-content:space-between}
.p-lvup{position:absolute;top:54px;right:22px;font-size:24px;background:#FFFFFF;border:2px solid;border-radius:999px;padding:2px 12px;z-index:2}
.p-avatar{position:relative;width:230px;height:230px;margin-top:6px;max-width:100%;flex:none}
.p-info{width:100%}
.p-name{margin:4px 0 0;font-size:40px;line-height:1}
.p-lv{margin:6px 0 0;font-size:13px;color:#3A3A40}
.p-rank-m{display:none}
.p-bar{width:100%;height:16px;border:2px solid #111111;border-radius:999px;margin-top:16px;overflow:hidden;background:#FFFFFF}
.p-barlbl{width:100%;display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:#3A3A40}
.p-powers{display:flex;justify-content:center;gap:14px;margin-top:18px}
.p-power{display:flex;flex-direction:column;align-items:center;gap:4px}
.p-power span{font-size:10px;color:#3A3A40}
.power svg{width:30px;height:30px}

/* phone: compact player strip so the question stays in view */
@media (max-width: 700px){
  .player{flex-direction:row;flex-wrap:wrap;align-items:center;text-align:left;gap:4px 14px;padding:14px 16px 16px;border-radius:26px}
  .p-top{display:none}
  .p-rank-m{display:inline}
  .p-avatar{width:92px;height:92px;margin:0}
  .p-stars{display:none}
  .p-info{flex:1 1 0;min-width:0}
  .p-name{font-size:30px;margin:0}
  .p-lv{font-size:12px;margin-top:2px}
  .p-bar{height:12px;margin-top:8px}
  .p-barlbl{font-size:10px;margin-top:4px}
  .p-powers{width:100%;justify-content:space-between;gap:8px;margin-top:10px}
  .p-power{flex:1;flex-direction:row;justify-content:center;gap:6px;border:2px solid #111111;border-radius:999px;background:#FFFFFF;padding:2px 10px 2px 2px}
  .p-power:has(.power:disabled){opacity:.4}
  .p-power .power{width:40px;height:40px;border:0;background:transparent}
  .p-power .power:disabled{opacity:1}
  .power svg{width:24px;height:24px}
  .p-power span{font-size:11px;color:#111111;font-weight:700}
  .p-lvup{top:10px;right:12px;font-size:18px}
  #qpanel{border-radius:26px}
}

#pins{height:400px}
.pc-title{font-size:17px}
@media (max-width: 1000px){#pins{height:340px}.pc-title{font-size:15px}}
@media (max-width: 520px){#pins{height:250px}}
@media (max-width: 860px){
  .hero-row{gap:8px !important;margin-top:44px !important}
  .pins-wrap{padding:12px 4px 0 !important;width:100%}
  .hero{padding-bottom:30px !important}
}
@media (max-width: 860px){
  .pins-wrap{padding-top:46px !important}
  .pins-wrap p.margin-note{display:block;right:14px !important;top:2px !important;font-size:22px !important}
  .pins-wrap svg.margin-note{display:block;width:44px;height:33px;right:150px !important;top:14px !important}
}