/* =========================================================
   SHIN真Media v11 additions (loaded after v10.css)
   Labs: the café sample card (hover-scrubbed pour) ·
   the AHAZ chapter (pixel mode, resolving screen, live encounter) · scramble labels
   ========================================================= */
:root{
  --mist:#EDF1EA;--porcelain:#F8FAF5;--roast-ink:#271D17;--roast:#7A4529;--leaf:#4C7A43;
  --serif:"Shippori Mincho B1","Yu Mincho",Georgia,serif;--pixel:"Pixelify Sans",var(--mono);
  --px-cream:#f4ead0;--px-ink:#2b1d14;--px-orange:#f0a43a;--px-green:#4f9a3c;--px-night:#0b1410;
  --v-n:#5cc46a;--v-m:#e8c53a;--v-v:#f08a2a;--v-h:#e3402d;
}

/* ---------- shared ---------- */
.labs{padding-bottom:0}
.lab-kicker{display:flex;align-items:center;gap:12px;margin:0 0 20px;font:700 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.lab-kicker span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid currentColor;font-size:11px;letter-spacing:0}
.scramble{font-variant-numeric:tabular-nums}

/* =========================================================
   SAMPLE A — the café card
   ========================================================= */
.cafe-card{display:grid;grid-template-columns:1.25fr 1fr;margin-top:clamp(40px,6vw,72px);border-radius:var(--r);overflow:hidden;background:var(--mist);color:var(--roast-ink);border:1px solid var(--line);box-shadow:0 40px 100px rgba(0,0,0,.45);transition:transform .5s var(--ease)}
.cafe-card:hover{transform:translateY(-4px)}
.cafe-media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#dfe5dc}
.cafe-media img,.cafe-media canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cafe-media canvas{opacity:0;transition:opacity .3s}
.cafe-card.scrub .cafe-media canvas{opacity:1}
.cafe-hint{position:absolute;left:14px;bottom:14px;padding:7px 12px;border-radius:999px;background:rgba(248,250,245,.85);font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#5F6257;transition:opacity .3s}
.cafe-card.scrub .cafe-hint{opacity:0}
.cafe-info{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:clamp(26px,3.4vw,48px)}
.cafe-info .lab-kicker{margin:0;color:#5F6257}
.cafe-title{font:800 clamp(30px,3.4vw,46px)/1.05 var(--serif)}
.cafe-title em{font-style:normal;color:var(--roast)}
.cafe-lead{font-size:15px;line-height:1.6;color:#4a4a42}
.cafe-go{display:inline-flex;align-items:center;gap:10px;width:max-content;min-height:46px;padding:0 20px;border-radius:999px;background:var(--roast-ink);color:var(--mist);font:700 12px/1 var(--text);letter-spacing:.06em;text-transform:uppercase;transition:background .3s}
.cafe-card:hover .cafe-go{background:var(--roast)}
@keyframes lcblink{50%{opacity:.2}}

/* =========================================================
   CHAPTER B — AHAZ, pixel mode
   ========================================================= */
.lab-ahaz{position:relative;padding:clamp(110px,14vw,190px) 0 var(--sec);color:var(--px-cream);background:
  linear-gradient(180deg,transparent 0,var(--px-night) 140px,var(--px-night) calc(100% - 140px),transparent 100%)}
.lab-ahaz:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(244,234,208,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(244,234,208,.05) 1px,transparent 1px);background-size:24px 24px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent)}
.ahaz-grid{position:relative;display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,6vw,96px);align-items:center}
.ahaz-copy .lab-kicker{color:var(--px-orange)}
.ahaz-logo{width:min(380px,80%);height:auto;image-rendering:pixelated;margin:0 0 22px}
.ahaz-title{margin:0 0 18px;font:700 clamp(30px,3.6vw,50px)/1.08 var(--pixel);letter-spacing:.01em}
.ahaz-lead{margin:0 0 30px;max-width:520px;color:rgba(244,234,208,.72);font-size:17px}
.ahaz-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0 0 34px;padding:0;list-style:none;border:3px solid var(--px-cream);box-shadow:6px 6px 0 rgba(0,0,0,.5)}
.ahaz-stats li{padding:16px 12px;font:500 11px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(244,234,208,.7)}
.ahaz-stats li+li{border-left:3px solid var(--px-cream)}
.ahaz-stats b{display:block;margin-bottom:6px;font:700 30px/1 var(--pixel);color:var(--px-orange);letter-spacing:0}
.ahaz-cta{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.btn-pixel{border-radius:0;background:var(--px-orange);color:var(--px-ink);font:700 15px/1 var(--pixel);letter-spacing:.06em;box-shadow:inset -4px -4px 0 #c8741e,inset 4px 4px 0 #ffd27a,6px 6px 0 rgba(0,0,0,.55)}
.btn-pixel:hover{transform:translate(-2px,-2px);box-shadow:inset -4px -4px 0 #c8741e,inset 4px 4px 0 #ffd27a,8px 8px 0 rgba(0,0,0,.55)}
.btn-pixel:active{transform:translate(3px,3px);box-shadow:inset -4px -4px 0 #c8741e,inset 4px 4px 0 #ffd27a,2px 2px 0 rgba(0,0,0,.55)}
.ahaz-note{margin:0;font:500 11px/1.5 var(--mono);color:rgba(244,234,208,.45);max-width:420px}

.ahaz-stage{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:0;perspective:1400px}
/* handheld frame */
.gb{position:relative;z-index:1;width:clamp(210px,19vw,270px);padding:16px 14px 70px;border-radius:26px 26px 26px 60px;background:#2b2e2a;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.08),inset 0 -6px 0 rgba(0,0,0,.35),0 50px 90px rgba(0,0,0,.6);transform:rotateY(14deg) rotateZ(-3deg)}
.gb-screen{position:relative;aspect-ratio:412/880;border:8px solid #141613;border-radius:6px;overflow:hidden;background:#0b1410}
.gb-screen canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
.gb-scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 2px,transparent 2px 4px);mix-blend-mode:multiply}
.gb-pad{position:absolute;left:0;right:0;bottom:18px;display:flex;justify-content:space-between;padding:0 26px}
.gb-pad i{width:30px;height:30px;background:#141613;clip-path:polygon(33% 0,67% 0,67% 33%,100% 33%,100% 67%,67% 67%,67% 100%,33% 100%,33% 67%,0 67%,0 33%,33% 33%)}
.gb-pad i+i{width:24px;height:24px;border-radius:50%;clip-path:none;background:#b8402f;box-shadow:-32px 10px 0 #b8402f}
/* encounter window */
.enc{position:relative;z-index:2;margin-left:-38px;border:4px solid var(--px-ink);background:var(--px-cream);color:var(--px-ink);font-family:var(--pixel);
  box-shadow:0 0 0 4px var(--px-cream),0 0 0 8px var(--px-ink),10px 14px 0 8px rgba(0,0,0,.45);transform:rotateY(-6deg)}
.enc-scene{position:relative;height:200px;overflow:hidden;background:linear-gradient(180deg,#9fd3e8 0 55%,#79b851 55% 100%)}
.enc-scene:after{content:"";position:absolute;left:12%;right:38%;bottom:22px;height:26px;border-radius:50%;background:#5e9a3c;box-shadow:0 4px 0 #4a7f2e}
.enc-sprite{position:absolute;z-index:1;left:18%;bottom:30px;width:120px;height:120px;image-rendering:pixelated;transition:transform .35s steps(4),opacity .35s steps(4)}
.enc.swap .enc-sprite{transform:translateX(160px);opacity:0}
.enc-plate{position:absolute;z-index:2;right:12px;top:14px;min-width:54%;padding:8px 10px;background:var(--px-cream);border:3px solid var(--px-ink);box-shadow:4px 4px 0 rgba(43,29,20,.35)}
.enc-plate b{display:block;font-size:15px;line-height:1.15}
.enc-plate span{display:block;font:italic 500 11px/1.3 var(--text);color:#6b5a48;margin-top:2px}
.enc-venom{display:flex!important;align-items:center;gap:8px;margin-top:8px!important;font:700 10px/1 var(--pixel)!important;font-style:normal!important;letter-spacing:.06em;text-transform:uppercase;color:var(--px-ink)!important}
.enc-venom i{flex:0 0 46%;height:8px;border:2px solid var(--px-ink);background:linear-gradient(90deg,var(--vc,#5cc46a) var(--vw,25%),#e3d6b4 var(--vw,25%))}
.enc-hero{position:absolute;z-index:1;right:18%;bottom:14px;width:64px;height:64px}
.enc-hero canvas{width:100%;height:100%;image-rendering:pixelated}
.enc-box{min-height:96px;margin:0;padding:14px 16px;border-top:4px solid var(--px-ink);font:500 15px/1.45 var(--pixel)}
.enc-box:after{content:"▼";display:inline-block;margin-left:6px;font-size:10px;animation:lcblink 1s steps(2) infinite}
.enc-menu{display:grid;grid-template-columns:1fr 1fr;border-top:4px solid var(--px-ink)}
.enc-menu button{position:relative;min-height:48px;padding:0 14px 0 30px;text-align:left;font:700 14px/1 var(--pixel);letter-spacing:.06em;text-transform:uppercase;color:var(--px-ink)}
.enc-menu button:nth-child(odd){border-right:4px solid var(--px-ink)}
.enc-menu button:nth-child(-n+2){border-bottom:4px solid var(--px-ink)}
.enc-menu button:before{content:"▶";position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:11px;opacity:0}
.enc-menu button[aria-pressed="true"]:before,.enc-menu button:hover:before{opacity:1}
.enc-menu button[aria-pressed="true"]{background:#ead9ae}
.enc-menu button:focus-visible{outline:3px solid var(--px-orange);outline-offset:-6px}


/* ---------- mobile ---------- */
@media(max-width:980px){
  .ahaz-grid{grid-template-columns:1fr}
  .ahaz-stage{grid-template-columns:1fr;justify-items:center;gap:0}
  .gb{width:min(220px,52vw);transform:rotateZ(-3deg)}
  .enc{margin:-90px 0 0;width:min(440px,100%);transform:none}
}
@media(max-width:900px){
  .cafe-card{grid-template-columns:1fr}
  .ahaz-stats{grid-template-columns:repeat(2,1fr)}
  .ahaz-stats li:nth-child(3){border-left:0}
  .ahaz-stats li:nth-child(n+3){border-top:3px solid var(--px-cream)}
}
@media(max-width:420px){.enc-scene{height:170px}.enc-sprite{width:96px;height:96px}}
@media(prefers-reduced-motion:reduce){.enc-box:after{animation:none}}