/* ② マスターの忘れもの：謎の見た目 */

/* 1章 注文票 */
.slip{position:relative}
.slip h3{text-align:center;font-size:17px;letter-spacing:.3em;border-bottom:1px solid #b9a27e;padding-bottom:6px;margin-bottom:10px}
.slip ol{list-style:none;font-size:19px;line-height:2.2}
.slip li{display:flex;justify-content:space-between;border-bottom:1px dotted #c9b48e}
.slip li.out .nm{text-decoration:line-through;text-decoration-thickness:2px;color:#7a6650}
.slip li .tag{font-size:12px;color:#a2402e;border:1px solid #a2402e;border-radius:4px;padding:0 4px;margin-left:6px;line-height:1.6;align-self:center}
.blot{display:inline-block;width:1.05em;height:1.05em;border-radius:50%;vertical-align:-.15em;
  background:radial-gradient(circle at 45% 45%,#6d6152 0%,#8f8270 35%,rgba(160,145,120,.6) 60%,transparent 72%);filter:blur(.6px)}
.slip .foot{font-size:13px;margin-top:12px;color:#5c4a36}

/* 2章 窓 */
.window{position:relative;aspect-ratio:4/3;border:10px solid #3b2a1c;border-radius:6px;overflow:hidden;
  background:linear-gradient(180deg,#14202a 0%,#0b1218 60%,#1b140e 100%);box-shadow:inset 0 0 0 3px #5a412b;touch-action:none;user-select:none;-webkit-user-select:none}
.window::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:8px;margin-left:-4px;background:#3b2a1c}
.window .city{position:absolute;inset:auto 0 0 0;height:45%;background:
  linear-gradient(90deg,transparent 0 8%,#0a0f14 8% 20%,transparent 20% 26%,#0c1218 26% 41%,transparent 41% 55%,#091015 55% 72%,transparent 72% 80%,#0b1117 80% 95%,transparent 95%)}
.window .lamp{position:absolute;width:6px;height:6px;border-radius:50%;background:#f3c26a;box-shadow:0 0 12px 4px rgba(243,194,106,.6)}
.window .fog{position:absolute;inset:0;background:rgba(220,225,230,.0);transition:background .5s}
.window.fogged .fog{background:rgba(205,212,218,.55)}
.window .write{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.08em;
  font-family:"Hiragino Mincho ProN",serif;font-size:min(13vw,62px);color:rgba(40,52,62,.0);transition:color .5s;transform:scaleX(-1)}
.window.fogged .write{color:rgba(30,40,50,.75)}
.window .write span{display:inline-block}
.window .write span.ud{transform:rotate(180deg)}
.window .hold{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-size:12px;color:rgba(255,255,255,.55);font-family:"Hiragino Sans",sans-serif}
.window.fogged .hold{opacity:0}
.turn{transition:transform .6s}
.turn.flip{transform:rotate(180deg)}

/* 3章 棚 */
.shelf{background:linear-gradient(180deg,#2b1f15,#1d150e);border:6px solid #4a3523;border-radius:6px;padding:14px 10px 6px}
.shelf .tier{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-items:end;border-bottom:8px solid #5b4029;padding-bottom:4px;margin-bottom:14px}
.jar{display:flex;flex-direction:column;align-items:center}
.jar .cap{width:58%;height:14px;border-radius:4px 4px 2px 2px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
.jar .glass{width:74%;height:74px;border-radius:6px 6px 12px 12px;background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.22) 30%,rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center}
.jar .label{background:#efe3c8;color:#2b2016;border-radius:3px;padding:3px 2px;font-size:10.5px;white-space:nowrap;letter-spacing:-.02em;line-height:1.3;text-align:center;font-family:"Hiragino Mincho ProN",serif;width:92%}
.jar .dots{letter-spacing:2px;font-size:10px;color:#6b4a2c}
.scrap{margin-top:12px;transform:rotate(-2deg);padding:12px 14px}
.scrap .cols{display:flex;gap:12px;justify-content:center;margin:8px 0}
.scrap .cols i{width:26px;height:26px;border-radius:50%;display:block;border:2px solid rgba(0,0,0,.25)}
.real{font-size:12px;color:var(--sub);text-align:right;margin-top:6px}

/* 4章 判じ絵 */
.rebus{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rebus .pane{position:relative;aspect-ratio:3/4;border-radius:10px;background:#efe3c8;color:#2b2016;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:40px;overflow:hidden}
.rebus .pane small{font-size:12px;font-family:"Hiragino Mincho ProN",serif}
.rebus .pane .bar{font-size:30px;line-height:1;font-weight:700}
.rebus .pane.smoked::after{content:"";position:absolute;inset:-10%;background:radial-gradient(circle at 50% 55%,rgba(120,110,100,.92) 0%,rgba(150,140,128,.85) 40%,rgba(180,170,155,.4) 70%,transparent 80%)}

/* 5章 破れたページ */
.torn{position:relative;height:250px;border-radius:8px;background:#120e0b;overflow:hidden;border:1px solid var(--line)}
.half{position:absolute;left:50%;width:250px;height:110px;margin-left:-125px;background:#efe3c8;color:#2b2016;overflow:hidden;
  font-family:"Hiragino Mincho ProN",serif;font-size:78px;letter-spacing:.06em;box-shadow:0 6px 16px rgba(0,0,0,.5)}
.half .txt{position:absolute;left:0;right:0;top:22px;height:110px;text-align:center;line-height:220px}
.half.top{top:20px;clip-path:polygon(0 0,100% 0,100% 92%,88% 100%,74% 90%,60% 100%,45% 91%,30% 100%,15% 92%,0 100%)}
.half.bot .txt{top:-88px}
.half.bot{clip-path:polygon(0 8%,15% 0,30% 9%,45% 0,60% 10%,74% 0,88% 10%,100% 0,100% 100%,0 100%)}
.half.bot.mirror .txt{transform:scaleX(-1)}
.ctrl{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.ctrl input[type=range]{width:100%;accent-color:var(--amber)}
.book{margin-top:12px;padding:14px;text-align:center}
.book .rec{font-size:20px;letter-spacing:.06em}
.book .rec b{display:inline-block;min-width:3.2em;border-bottom:2px solid #8a6a42}
