/* MIRROR — layered on games/monster/style.css (the engine's look). Only Mirror's own parts. */
[hidden] { display: none !important; }
.mirror .intro h1 { max-width: 10em; font-size: clamp(38px, 11.5vw, 74px); }
:lang(ja) .mirror .intro h1 { font-size: clamp(32px, 9.5vw, 60px); letter-spacing: -.01em; }
.mirror .kicker { color: var(--signal); }

/* 🔍 guess: three monsters, one is your friend */
.guessBox { display: grid; gap: 10px; }
.guessQ { margin: 0; font: 800 19px/1.3 system-ui, "Hiragino Sans", sans-serif; }
.lineup { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pick { position: relative; padding: 6px; border: 3px solid var(--ink); border-radius: 18px; background: #fff; cursor: pointer; box-shadow: 0 6px 0 #4a4152; transition: transform .18s ease; }
.pick:active { transform: translateY(4px); box-shadow: 0 2px 0 #4a4152; }
.pick canvas { display: block; width: 100%; aspect-ratio: 1; }
.pick.real { border-color: #1fae5b; box-shadow: 0 0 0 4px rgba(31,174,91,.25), 0 6px 0 #1b7f45; }
.pick.fake { opacity: .45; filter: grayscale(.6); }
.pick.picked.fake { opacity: .8; border-color: var(--signal); box-shadow: 0 6px 0 #9b0f22; }
.pick.real::after { content: '✓'; position: absolute; top: -12px; right: -8px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #1fae5b; color: #fff; font: 900 18px/1 system-ui; }
.guessResult { margin: 0; font: 900 20px/1.25 system-ui, "Hiragino Sans", sans-serif; }

/* 💞 compatibility */
.compat { margin: 22px 0 6px; padding: 16px; border-radius: 22px; background: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.08); text-align: center; }
.compat .label { margin: 0 0 8px; font: 800 12px ui-monospace, Menlo, monospace; letter-spacing: .16em; color: var(--signal); }
.pair3 { display: grid; grid-template-columns: 1fr 1.2fr 1fr; align-items: end; gap: 6px; }
.pair3 figure { margin: 0; }
.pair3 canvas { display: block; width: 100%; aspect-ratio: 1; }
.pair3 figcaption { font: 800 11px ui-monospace, Menlo, monospace; letter-spacing: .12em; color: var(--dim); }
.babyFig figcaption { color: #d6337a; }
.compatPct { margin: 8px 0 0; font: 900 clamp(54px, 18vw, 88px)/.95 system-ui; letter-spacing: -.04em; color: #d6337a; }
.compatLine { margin: 4px 0 0; font: 800 17px/1.3 system-ui, "Hiragino Sans", sans-serif; }
.compatDef { margin: 6px 0 0; font: 500 12.5px/1.4 system-ui, "Hiragino Sans", sans-serif; color: var(--dim); }

/* the three friend games: the main actions */
.friendGames { display: grid; gap: 10px; margin: 18px 0 8px; }
.fg { display: block; width: 100%; padding: 18px 20px; border: 3px solid var(--ink); border-radius: 20px; text-align: left; font: 900 19px/1.15 system-ui, "Hiragino Sans", sans-serif; cursor: pointer; color: var(--ink); box-shadow: 0 6px 0 var(--ink); transition: transform .18s ease; }
.fg:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.fg.guess { background: #ffe066; }
.fg.compatB { background: #ffc2dd; }
.fg.roastB { background: #ff8a5c; }

/* 🪞 the real-algorithm upgrade */
.realBox { margin: 18px 0 0; padding: 14px 16px; border-radius: 16px; border: 2px dashed rgba(28,20,36,.3); }
.realBtn { font: 800 16px system-ui, "Hiragino Sans", sans-serif; color: var(--ink); }
.realNote { margin: 6px 0 0; font: 500 13px/1.4 system-ui, "Hiragino Sans", sans-serif; color: var(--dim); }
.doorBody { font: 500 15px/1.5 system-ui, "Hiragino Sans", sans-serif; color: rgba(244,239,230,.82); margin: 0 auto 14px; }

/* 🔥 the roast */
.roast { z-index: 20; background: #1c1424; color: #fff4ea; display: grid; align-content: center; gap: 12px; padding: max(24px, env(safe-area-inset-top)) 22px max(24px, env(safe-area-inset-bottom)); }
.roast h2 { margin: 0; font: 900 clamp(34px, 10vw, 52px)/1 system-ui, "Hiragino Sans", sans-serif; letter-spacing: -.03em; color: #ff8a5c; }
.roastMon { width: min(62vw, 260px); aspect-ratio: 1; justify-self: center; filter: drop-shadow(0 0 30px rgba(255,138,92,.45)); }
.roastLines { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.roastLines li { padding: 14px 16px; border-radius: 16px; background: rgba(255,244,234,.08); font: 800 19px/1.35 system-ui, "Hiragino Sans", sans-serif; }
.roastNote { margin: 0; font: 600 13px system-ui, "Hiragino Sans", sans-serif; color: rgba(255,244,234,.55); }
.roast .ghostBtn { color: #fff4ea; border-color: #fff4ea; }
.roast .primary { background: #ff8a5c; color: #1c1424; box-shadow: 0 6px 0 #a4502f; }
.reveal > .lab > *, .reveal > .lab { flex-shrink: 0; }

/* painted posts (AAA layer) */
.post .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; z-index: 0; }
.post.has-photo .scene { visibility: hidden; }
.post.has-photo::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(transparent 55%, rgba(0,0,0,.7)); z-index: 0; pointer-events: none; }
.post.has-photo .meta, .post.has-photo .rail, .post.has-photo .prog, .post.has-photo .hk, .post.has-photo .mark { z-index: 1; }
.heroImg { width: 100%; max-width: 520px; display: block; margin: 0 auto; animation: fadein .6s ease both; }
/* v4 fixes: the shading layer covers the whole card (monster's ::after has height:52%) */
.post.has-photo::after { height: auto; top: 0; bottom: 0; }
/* the swipe hint reads as a blank disc over photos: make it a finger */
.mirror .hand { background: none !important; box-shadow: none !important; border: 0 !important; display: grid; place-items: center; font-size: 52px; filter: drop-shadow(0 6px 12px rgba(0,0,0,.5)); }
.mirror .hand::before { content: '👆'; }
.mirror .hand > * { display: none; }