/* WHO THE FEED THINKS YOU ARE — two worlds: the loud feed, and Morrow's white lab. */
:root { --ink:#1c1424; --paper:#f4f4f2; --signal:#e5132b; --dim:#8a8a8a; --riku:#f2a541; --night:#0e1a2b; --feed:#0b0b0c; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; overflow:hidden; background:var(--feed); color:#fff;
  font:500 16px/1.4 system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif; -webkit-user-select:none; user-select:none; }
button { font:inherit; }

/* ── the feed ── */
.feed { position:fixed; inset:0; display:grid; grid-template-rows:auto auto 1fr auto; padding:max(10px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom));
  background:radial-gradient(90% 60% at 50% 45%, #1d1a26 0%, #0b0b0c 70%); }
.feed[hidden] { display:none; }
.bar { display:flex; align-items:center; gap:10px; height:40px; }
.brand { font:700 11px ui-monospace,Menlo,monospace; letter-spacing:.2em; opacity:.75; }
.brand b { color:var(--signal); }
.mute { margin-left:12px; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:#fff; font-size:16px; }
.timer { height:4px; border-radius:2px; background:rgba(255,255,255,.12); overflow:hidden; margin:6px 112px 14px 0; }
.timer i { display:block; height:100%; width:100%; background:var(--signal); transform-origin:left; box-shadow:0 0 12px var(--signal); }

/* Morrow's window: a small white lab panel watching you. */
.scan { position:fixed; z-index:6; right:14px; top:max(10px,env(safe-area-inset-top)); width:96px; padding:6px 6px 5px; border-radius:14px;
  background:var(--paper) linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px) 0 0/100% 10px; box-shadow:0 12px 30px rgba(0,0,0,.5); display:grid; justify-items:center; gap:2px; }
.scan canvas { width:84px; height:76px; display:block; }
.scan span { font:800 8.5px ui-monospace,Menlo,monospace; letter-spacing:.12em; color:var(--signal); white-space:nowrap; }
.scan.grow { animation:grow .38s cubic-bezier(.2,1.6,.4,1); }
@keyframes grow { 40% { transform:scale(1.14) rotate(-3deg); } }

.deck { position:relative; justify-self:center; align-self:center; width:min(84vw,380px); aspect-ratio:9/14; max-height:calc(100dvh - 210px); max-width:calc((100dvh - 210px) * 9 / 14); }
.post { position:absolute; inset:0; border-radius:24px; overflow:hidden; touch-action:none; cursor:grab; will-change:transform;
  background:
    radial-gradient(120% 70% at 25% 15%, color-mix(in srgb, var(--c) 40%, #fff) 0%, transparent 55%),
    radial-gradient(90% 60% at 90% 90%, color-mix(in srgb, var(--c) 60%, #000) 0%, transparent 70%),
    linear-gradient(165deg, var(--c), color-mix(in srgb, var(--c) 55%, #120a1c));
  background-color:var(--c);
  box-shadow:0 30px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.12); }
.post.under { transform:scale(.94) translateY(14px); filter:brightness(.7); transition:transform .25s, filter .25s; pointer-events:none; }
.post.fly { transition:transform .32s cubic-bezier(.3,.1,.6,1), opacity .32s; opacity:0; }
.post.back { transition:transform .28s cubic-bezier(.2,1.4,.4,1); }
.post::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 2px, transparent 2px 4px); pointer-events:none; }
.post::after { content:""; position:absolute; left:0; right:0; bottom:0; height:52%; background:linear-gradient(transparent, rgba(0,0,0,.72)); pointer-events:none; }
.prog { position:absolute; z-index:2; left:12px; right:12px; top:12px; height:3px; border-radius:2px; background:rgba(255,255,255,.3); overflow:hidden; }
.prog i { display:block; height:100%; background:#fff; animation:prog 6s linear infinite; transform-origin:left; }
@keyframes prog { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.sheen { position:absolute; inset:-40% -60%; z-index:1; pointer-events:none; background:linear-gradient(105deg, transparent 42%, rgba(255,255,255,.16) 49%, rgba(255,255,255,.04) 53%, transparent 58%); animation:sheen 4.6s ease-in-out infinite; }
@keyframes sheen { 0%,55% { transform:translateX(-40%); } 100% { transform:translateX(40%); } }
.post.under .sheen, .post.under .prog i { animation:none; }
@keyframes float { 50% { transform:rotate(-2deg) translateY(-10px) scale(1.03); } }
@keyframes bob { 50% { transform:rotate(14deg) translateY(8px); } }
.meta { position:absolute; z-index:2; left:16px; right:64px; bottom:18px; }
.handle { display:flex; align-items:center; gap:8px; font:800 14px system-ui,sans-serif; margin-bottom:6px; }
.handle i { width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,#fff,var(--c)); box-shadow:0 0 0 2px #fff; }
.cap { font:900 clamp(17px,5vw,21px)/1.22 system-ui,"Hiragino Sans",sans-serif; text-shadow:0 2px 10px rgba(0,0,0,.5); margin:0; }
.rail { position:absolute; z-index:2; right:12px; bottom:20px; display:grid; gap:16px; }
.rail svg { width:30px; height:30px; fill:#fff; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.mark { position:absolute; z-index:3; top:34px; padding:6px 14px; border:4px solid; border-radius:12px; font:900 30px/1 system-ui,"Hiragino Sans",sans-serif; letter-spacing:.04em; opacity:0; pointer-events:none; }
.mark.like { left:18px; color:#4dffa6; transform:rotate(-14deg); }
.mark.nope { right:18px; color:#ff4d6a; transform:rotate(14deg); }

.hand { position:fixed; z-index:7; left:50%; top:55%; width:64px; height:64px; margin:-32px; pointer-events:none; border-radius:50%;
  background:rgba(255,255,255,.9); box-shadow:0 0 0 10px rgba(255,255,255,.25), 0 10px 30px rgba(0,0,0,.4); animation:swipeDemo 2.2s ease-in-out infinite; }
.hand[hidden] { display:none; }
@keyframes swipeDemo { 0%,100% { transform:translateX(0); opacity:0; } 15% { opacity:1; } 40% { transform:translateX(90px); } 60% { opacity:1; } 75% { transform:translateX(-90px); opacity:0; } }
.timeUp { position:fixed; z-index:8; inset:0; display:grid; place-items:center; font:900 clamp(64px,22vw,140px)/1 system-ui,"Hiragino Sans",sans-serif; color:#fff; background:rgba(229,19,43,.88); letter-spacing:-.03em; animation:slamIn .5s cubic-bezier(.2,1.4,.4,1) both; }
.timeUp[hidden] { display:none; }

.controls { display:flex; justify-content:center; gap:34px; padding-top:12px; }
.ctl { width:64px; height:64px; border-radius:50%; border:0; background:#fff; display:grid; place-items:center; box-shadow:0 10px 24px rgba(0,0,0,.45); transition:transform .08s; }
.ctl:active { transform:scale(.9); }
.ctl svg { width:28px; height:28px; fill:none; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; }
.ctl.nope svg { stroke:#ff3b55; }
.ctl.like svg { stroke:#ff3b8b; fill:#ff3b8b; }
.ctl:focus-visible { outline:3px solid var(--riku); outline-offset:4px; }

/* ── overlays ── */
.overlay { position:fixed; inset:0; z-index:10; overflow:auto; -webkit-overflow-scrolling:touch; }
.overlay[hidden] { display:none; }
.intro { background:var(--paper) linear-gradient(rgba(0,0,0,.045) 1px,transparent 1px) 0 0/100% 28px; color:var(--ink); display:grid; align-content:center; gap:10px;
  padding:max(24px,env(safe-area-inset-top)) 22px max(24px,env(safe-area-inset-bottom)); }
.kicker { font:700 12px ui-monospace,Menlo,monospace; letter-spacing:.16em; color:var(--signal); margin:0; }
.intro h1 { font:900 clamp(42px,13.5vw,82px)/.9 system-ui,"Hiragino Sans",sans-serif; letter-spacing:-.045em; margin:6px 0 4px; max-width:9em; }
.sub { font-size:18px; font-weight:600; margin:0 0 16px; max-width:24em; }
.startBtn { justify-self:start; padding:18px 28px; border:0; border-radius:999px; background:var(--ink); color:#fff; font:800 18px system-ui,"Hiragino Sans",sans-serif; box-shadow:0 8px 0 #4a4152; }
.startBtn:active { transform:translateY(6px); box-shadow:0 2px 0 #4a4152; }
.privacy { font-size:12px; opacity:.6; margin-top:10px; }
.parade { width:100%; max-width:460px; height:clamp(120px,34vw,190px); display:block; margin:2px 0 6px; filter:drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff) drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff) drop-shadow(0 10px 14px rgba(28,20,36,.18)); }
.parade[hidden] { display:none; }
.friendFig { margin:6px 0 0; display:grid; grid-template-columns:120px 1fr; align-items:center; gap:12px; padding:10px; border-radius:18px; background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.08); max-width:420px; }
.friendFig[hidden] { display:none; }
.friendFig canvas { width:120px; height:120px; }
.friendFig figcaption { font:900 18px/1.1 system-ui,"Hiragino Sans",sans-serif; letter-spacing:-.02em; }
.friendFig figcaption small { display:block; font:700 10px ui-monospace,Menlo,monospace; letter-spacing:.14em; color:var(--signal); margin-bottom:4px; }

/* ── the reveal: a specimen in Morrow's lab ── */
.reveal { background:var(--paper); color:var(--ink); }
.lab { min-height:100%; padding:max(20px,env(safe-area-inset-top)) 18px 28px; max-width:560px; margin:0 auto;
  background:linear-gradient(rgba(0,0,0,.04) 1px,transparent 1px) 0 0/28px 28px, linear-gradient(90deg,rgba(0,0,0,.04) 1px,transparent 1px) 0 0/28px 28px; }
.specimen { font:700 11.5px ui-monospace,Menlo,monospace; letter-spacing:.14em; color:var(--signal); margin:4px 0 6px; min-height:1.4em; }
.plinth { position:relative; margin:0 auto; width:min(92vw,440px); aspect-ratio:1; border-radius:28px;
  background:radial-gradient(60% 55% at 50% 42%, #fff 0%, rgba(255,255,255,0) 70%), radial-gradient(70% 20% at 50% 96%, rgba(0,0,0,.08), transparent 70%); }
.plinth canvas { position:relative; width:100%; height:100%; display:block;
  filter:drop-shadow(4px 0 0 #fff) drop-shadow(-4px 0 0 #fff) drop-shadow(0 4px 0 #fff) drop-shadow(0 -4px 0 #fff) drop-shadow(0 16px 22px rgba(28,20,36,.22)); }
.rays { position:absolute; inset:4%; border-radius:50%; pointer-events:none; opacity:.55;
  background:repeating-conic-gradient(from 0deg, rgba(229,19,43,.07) 0deg 9deg, transparent 9deg 22deg);
  -webkit-mask-image:radial-gradient(circle, #000 20%, transparent 70%); mask-image:radial-gradient(circle, #000 20%, transparent 70%); animation:spinRays 40s linear infinite; }
@keyframes spinRays { to { transform:rotate(360deg); } }
.plinth.shake { animation:shake .38s; }
@keyframes shake { 20% { transform:translate(-7px,2px) rotate(-.6deg); } 45% { transform:translate(6px,-2px) rotate(.5deg); } 70% { transform:translate(-3px,1px); } }
.confetti { position:fixed; inset:0; width:100%; height:100%; z-index:20; pointer-events:none; }
.stamp { position:absolute; right:1%; top:5%; padding:5px 10px; border:4px solid var(--signal); border-radius:10px; color:var(--signal);
  font:900 17px/1 ui-monospace,Menlo,monospace; letter-spacing:.12em; transform:rotate(-8deg); background:rgba(244,244,242,.6); animation:stampIn .45s cubic-bezier(.2,1.5,.4,1) both; }
.stamp[hidden] { display:none; }
@keyframes stampIn { from { opacity:0; transform:rotate(-8deg) scale(2.4); } }
.name { font:900 clamp(34px,10.5vw,58px)/.95 system-ui,"Hiragino Sans",sans-serif; letter-spacing:-.04em; margin:10px 0 6px; min-height:.95em; }
.name:lang(ja) { font-size:clamp(26px,8vw,46px); line-height:1.1; letter-spacing:-.02em; word-break:keep-all; overflow-wrap:anywhere; }
.name.slam { animation:slamIn .55s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes slamIn { from { opacity:0; transform:scale(1.6) translateY(-10px); } }
.builtFrom { font:600 12px/1.5 ui-monospace,Menlo,monospace; color:#6c6570; margin:0 0 12px; }
.parts { list-style:none; margin:0 0 16px; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.parts li { display:flex; align-items:center; gap:7px; padding:7px 11px; border-radius:999px; background:#fff; border:1.5px solid var(--ink); font:700 12.5px/1.2 system-ui,"Hiragino Sans",sans-serif; animation:rise .35s cubic-bezier(.2,1.4,.4,1) both; }
.parts li i { width:10px; height:10px; border-radius:50%; flex:none; box-shadow:0 0 0 1.5px var(--ink); }
@keyframes rise { from { opacity:0; transform:translateY(10px) scale(.9); } }
.compare { margin:6px 0 18px; }
.compare[hidden] { display:none; }
.label { font:700 11px ui-monospace,Menlo,monospace; letter-spacing:.14em; color:var(--signal); margin:0 0 8px; }
.pair { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pair figure { margin:0; padding:8px; border-radius:18px; background:#fff; border:1.5px solid var(--ink); }
.pair canvas { width:100%; aspect-ratio:1; display:block; }
.pair figcaption { font:900 14px/1.1 system-ui,"Hiragino Sans",sans-serif; letter-spacing:-.01em; text-align:center; padding:4px 2px 2px; }
.pair figcaption small { display:block; font:700 9.5px ui-monospace,Menlo,monospace; letter-spacing:.12em; color:var(--signal); margin-bottom:3px; }
.findings { list-style:none; margin:0 0 14px; padding:0; display:grid; gap:10px; }
.findings li { padding:13px 14px; border-radius:14px; background:#fff; border-left:5px solid var(--signal); box-shadow:0 6px 18px rgba(0,0,0,.06); font:650 16px/1.4 system-ui,"Hiragino Sans",sans-serif; animation:rise .5s ease both; }
.rule { padding:14px 16px; border-radius:14px; background:var(--ink); color:#fff; margin:0 0 14px; animation:rise .5s ease both; }
.rule[hidden] { display:none; }
.rule b { font:700 11px ui-monospace,Menlo,monospace; letter-spacing:.16em; color:#ff6b78; }
.rule p { margin:6px 0 0; font:700 16px/1.4 system-ui,"Hiragino Sans",sans-serif; }
.moral { font:900 clamp(22px,6.4vw,30px)/1.15 system-ui,"Hiragino Sans",sans-serif; letter-spacing:-.02em; margin:8px 0 18px; }
.row { display:flex; gap:10px; flex-wrap:wrap; }
.row[hidden] { display:none; }
.primary, .ghostBtn { padding:15px 20px; border-radius:999px; font:800 16px system-ui,"Hiragino Sans",sans-serif; }
.primary { background:var(--ink); color:#fff; border:0; box-shadow:0 6px 0 #4a4152; }
.primary:active { transform:translateY(4px); box-shadow:0 2px 0 #4a4152; }
.ghostBtn { background:none; color:var(--ink); border:2px solid var(--ink); }
.doorBand { padding:26px 18px max(30px,env(safe-area-inset-bottom)); background:radial-gradient(120% 90% at 50% 0%, #1b2a40, var(--night) 70%); color:#f4efe6; animation:fadein 1.2s ease both; }
.doorBand[hidden] { display:none; }
.doorBand > * { max-width:524px; margin-left:auto; margin-right:auto; }
@keyframes fadein { from { opacity:0; } }
.riku { font:600 17px/1.5 system-ui,"Hiragino Sans",sans-serif; padding:14px 16px; border-radius:14px; background:rgba(242,165,65,.1); border:1px solid rgba(242,165,65,.45); margin:0 auto 14px; }
.door { display:block; width:fit-content; padding:15px 20px; border-radius:999px; background:var(--riku); color:var(--night); font:800 16px system-ui,"Hiragino Sans",sans-serif; text-decoration:none; }
.doorBand .ml-next { color:#f4efe6; }
.bootfail { background:var(--paper); color:var(--ink); padding:40px 22px; }
.bootfail code { display:block; font:11px ui-monospace,monospace; opacity:.6; word-break:keep-all; overflow-wrap:anywhere; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001s !important; animation-iteration-count:1 !important; transition:none !important; }
  .hand { display:none; }
}

/* ── v3: scenes, hooks, soak ── */
.soak { position:absolute; left:50%; top:48%; width:150vmax; height:150vmax; transform:translate(-50%,-50%); pointer-events:none;
  background-color:var(--soak,#1d1a26); opacity:.34; transition:background-color .7s ease;
  -webkit-mask-image:radial-gradient(circle, #000 0%, transparent 42%); mask-image:radial-gradient(circle, #000 0%, transparent 42%); }
.feed > .bar, .feed > .timer, .feed > .controls { position:relative; z-index:1; }
.deck { z-index:1; }
.scene { position:absolute; left:0; top:6%; width:100%; height:64%; display:block; pointer-events:none; }
.hk { position:absolute; z-index:3; pointer-events:none; font:900 13px/1 system-ui,"Hiragino Sans",sans-serif; letter-spacing:.03em; }
.hk.wait { left:50%; top:30px; transform:translateX(-50%); display:grid; justify-items:center; gap:7px; padding:10px 16px 9px; border-radius:16px; background:rgba(12,8,18,.72); color:#fff; font-size:17px; white-space:nowrap; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.hk.wait .ring { display:block; width:120px; height:4px; border-radius:2px; background:rgba(255,255,255,.25); overflow:hidden; }
.hk.wait .ring i { display:block; height:100%; background:#fff; transform-origin:left; transform:scaleX(0); }
.hk.wait.done { opacity:.8; font-size:15px; }
.hk.wait.done .ring { display:none; }
.hk.part { left:14px; top:26px; padding:6px 10px; border-radius:8px; background:#fff; color:#1c1424; font:800 12px ui-monospace,Menlo,monospace; box-shadow:0 4px 12px rgba(0,0,0,.25); }
.hk.sound { left:14px; bottom:120px; display:flex; align-items:flex-end; gap:3px; padding:7px 11px; border-radius:999px; background:rgba(12,8,18,.66); color:#fff; animation:throbS 1s ease-in-out infinite; }
.hk.sound em { width:4px; height:14px; border-radius:2px; background:#fff; transform-origin:bottom; animation:eq .5s ease-in-out infinite alternate; }
.hk.sound em:nth-child(2) { animation-delay:-.2s; } .hk.sound em:nth-child(3) { animation-delay:-.35s; } .hk.sound em:nth-child(4) { animation-delay:-.1s; }
.hk.sound b { margin-left:6px; font-size:12px; }
@keyframes eq { from { transform:scaleY(.25); } to { transform:scaleY(1); } }
@keyframes throbS { 50% { transform:scale(1.06); } }
.post.under .hk { visibility:hidden; }

/* ── v3: the specimen tube ── */
.plinth { border-radius:44% 44% 34px 34px / 22% 22% 34px 34px; margin-top:22px; margin-bottom:26px;
  background:
    linear-gradient(90deg, transparent 7%, rgba(255,255,255,.75) 10%, rgba(255,255,255,0) 17%, transparent 80%, rgba(255,255,255,.45) 88%, transparent 92%),
    linear-gradient(to top, color-mix(in srgb, var(--tint,#c9c9c4) 26%, transparent) 0%, transparent 38%),
    radial-gradient(60% 55% at 50% 42%, rgba(255,255,255,.9) 0%, rgba(255,255,255,.2) 70%);
  box-shadow: inset 0 0 0 3px rgba(28,20,36,.10), inset 14px 0 26px rgba(255,255,255,.7), inset -12px 0 24px rgba(28,20,36,.07), 0 24px 40px rgba(28,20,36,.10); }
.plinth::before, .plinth::after { content:""; position:absolute; z-index:2; border:3px solid #1c1424; background:linear-gradient(180deg,#eef1f4,#9aa3ad 55%,#d6dbe0); }
.plinth::before { top:-16px; left:14%; right:14%; height:26px; border-radius:12px; }
.plinth::after { bottom:-20px; left:6%; right:6%; height:34px; border-radius:14px; box-shadow:0 12px 24px rgba(28,20,36,.18); }
.bubbles { position:absolute; inset:0; overflow:hidden; border-radius:inherit; pointer-events:none; z-index:1; }
.bubbles b { position:absolute; bottom:-20px; width:10px; height:10px; border-radius:50%; border:2px solid rgba(255,255,255,.95); background:rgba(255,255,255,.25); animation:bub 4.5s linear infinite; }
.bubbles b:nth-child(1) { left:12%; animation-delay:0s; } .bubbles b:nth-child(2) { left:22%; width:6px; height:6px; animation-delay:-1.2s; }
.bubbles b:nth-child(3) { left:78%; animation-delay:-2.1s; } .bubbles b:nth-child(4) { left:86%; width:14px; height:14px; animation-delay:-3.3s; }
.bubbles b:nth-child(5) { left:30%; width:7px; height:7px; animation-delay:-2.7s; } .bubbles b:nth-child(6) { left:68%; width:8px; height:8px; animation-delay:-.6s; }
.bubbles b:nth-child(7) { left:50%; width:5px; height:5px; animation-delay:-3.9s; } .bubbles b:nth-child(8) { left:92%; width:6px; height:6px; animation-delay:-1.8s; }
@keyframes bub { 0% { transform:translate(0,0); opacity:0; } 10% { opacity:1; } 50% { transform:translate(6px,-230px); } 100% { transform:translate(-4px,-470px); opacity:0; } }
.plinth canvas { z-index:1; }

/* rarity */
.stamp[data-rarity="rare"] { color:#7b5cff; border-color:#7b5cff; }
.stamp[data-rarity="legendary"] { color:#1c1424; border-color:#1c1424; background:linear-gradient(110deg,#fff3b0 0%,#f2c230 30%,#fffbe0 45%,#f2c230 60%,#b8860b 100%); background-size:220% 100%; animation:stampIn .45s cubic-bezier(.2,1.5,.4,1) both, gold 2.2s linear infinite; }
@keyframes gold { to { background-position:-220% 0; } }
.plinth[data-rarity="legendary"] .rays { opacity:.8; background:repeating-conic-gradient(from 0deg, rgba(255,122,200,.18) 0deg 8deg, rgba(34,200,232,.18) 8deg 16deg, rgba(255,210,63,.2) 16deg 24deg, transparent 24deg 34deg); }
.plinth[data-rarity="rare"] .rays { background:repeating-conic-gradient(from 0deg, rgba(123,92,255,.12) 0deg 9deg, transparent 9deg 22deg); }

/* poke + clip */
.pokeHint { position:absolute; z-index:3; left:50%; bottom:9%; transform:translateX(-50%); padding:6px 12px; border-radius:999px; background:#1c1424; color:#fff; font:800 12px ui-monospace,Menlo,monospace; letter-spacing:.08em; animation:hint 1.3s ease-in-out infinite; white-space:nowrap; }
.pokeHint::before { content:"👆 "; }
.pokeHint[hidden] { display:none; }
@keyframes hint { 50% { transform:translate(-50%,-6px); } }
.plinth canvas { cursor:pointer; touch-action:manipulation; }
.clipBtn { border-color:#e5132b; color:#e5132b; }
.clipBtn:disabled { opacity:.6; }
/* the monster stands above the base cap; the poke hint sits under the tube */
.plinth canvas { height:90%; }
.pokeHint { bottom:auto; top:calc(100% + 26px); }
.pokeHint { top:16%; left:7%; bottom:auto; transform:none; animation:hint2 1.3s ease-in-out infinite; }
@keyframes hint2 { 50% { transform:translateY(-5px); } }

/* Codex visual QA: keep the specimen reveal crisp on touch devices. */
.startBtn,.primary,.ghostBtn,.ml-next,.pokeHint { transition:transform .18s ease,filter .18s ease,box-shadow .18s ease; }
.startBtn:hover,.primary:hover,.ml-next:hover { transform:translateY(-2px); filter:brightness(1.06); }
.startBtn:focus-visible,.primary:focus-visible,.ghostBtn:focus-visible,.ml-next:focus-visible { outline:3px solid var(--signal); outline-offset:4px; }
.plinth canvas { image-rendering:auto; }

/* SK-5 · Morrow's taunt: its own voice (red, monospace, a hard edge), never a friendly bubble */
.taunt { position:fixed; z-index:7; left:14px; right:122px; top:calc(max(10px,env(safe-area-inset-top)) + 62px); /* left of Morrow's scanner window */
  padding:8px 12px; border-radius:10px; background:rgba(12,8,18,.92); border:1.5px solid rgba(229,19,43,.85); color:#ff8a96; pointer-events:none;
  font:800 12.5px/1.35 ui-monospace,Menlo,"Hiragino Sans","Noto Sans Thai","Apple SD Gothic Neo",monospace; letter-spacing:.04em; text-transform:uppercase; text-align:left; box-shadow:0 10px 28px rgba(0,0,0,.45); }
.taunt[hidden] { display:none; }
.taunt.in { animation:tauntIn .42s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes tauntIn { from { opacity:0; transform:translateY(-14px) scale(.96); } }
:lang(th) .taunt { letter-spacing:0; }
/* SK-3 · Morrow's file: the second, smaller share (the unboxing video stays the big one) */
.fileBtn { border-color:#1c1424; }
.fileBtn::before { content:"▣ "; color:#e5132b; }