:root{
  --night:#13161C; --night-2:#1B1F27; --ink:#161A20;
  --ink-soft:#4A525E; --dim:#79828F;
  --cold:#DCE9F2;  --cold-glow:#7FAECF;   /* 画面の光 */
  --mid:#E4E2DA;   --mid-glow:#A9A08C;    /* 台所の昼の光 */
  --warm:#F3E6C4;  --warm-glow:#D9A94E;   /* 庫内灯 */
  --mincho:"Shippori Mincho B1",serif;
  --hina:"Hina Mincho","Shippori Mincho B1",serif;
  --gothic:"Zen Kaku Gothic New",system-ui,sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--night);color:var(--cold);font-family:var(--gothic);
  -webkit-font-smoothing:antialiased;min-height:100vh;display:flex;
  justify-content:center;padding:32px 16px 80px;}
.wrap{width:100%;max-width:620px;}

.mark{font-family:var(--mincho);font-weight:600;font-size:clamp(56px,18vw,96px);
  line-height:1;letter-spacing:.08em;color:var(--cold);
  text-shadow:0 0 40px rgba(127,174,207,.35);}
.lede{font-family:var(--mincho);color:var(--dim);font-size:15px;line-height:2.1;
  margin:22px 0 40px;max-width:34em;}
.lede b{color:var(--cold);font-weight:400;}

.doors{display:grid;gap:14px;}
.door{position:relative;display:block;width:100%;text-align:left;border:0;
  cursor:pointer;padding:26px 24px 24px;background:var(--night-2);color:var(--cold);
  border-left:2px solid transparent;font-family:inherit;
  transition:background .35s ease,transform .35s ease;}
.door:hover,.door:focus-visible{background:#212630;transform:translateX(3px);}
.door:focus-visible{outline:2px solid var(--cold-glow);outline-offset:3px;}
.door.cold{border-left-color:var(--cold-glow);}
.door.mid{border-left-color:var(--mid-glow);}
.door.warm{border-left-color:var(--warm-glow);}
.door .eyebrow{font-size:11px;letter-spacing:.3em;color:var(--dim);}
.door .name{font-family:var(--mincho);font-size:23px;margin:8px 0 6px;letter-spacing:.06em;}
.door.mid .name{color:var(--mid);}
.door.warm .name{color:var(--warm);}
.door .sub{font-size:12.5px;color:var(--ink-soft);line-height:1.8;}
.door .seen{position:absolute;top:22px;right:22px;font-size:11px;letter-spacing:.15em;
  color:var(--dim);border:1px solid #333A45;border-radius:999px;padding:3px 9px;}

.panel{padding:34px 26px 30px;color:var(--ink);font-family:var(--gothic);
  animation:wake .5s ease-out both;}
.panel.cold{background:var(--cold);box-shadow:0 0 60px rgba(127,174,207,.22);}
.panel.mid{background:var(--mid);box-shadow:0 0 60px rgba(169,160,140,.20);}
.panel.warm{background:var(--warm);box-shadow:0 0 60px rgba(217,169,78,.20);}
@keyframes wake{0%{opacity:0;filter:brightness(2.4);}40%{opacity:1;filter:brightness(1.15);}
  55%{filter:brightness(.9);}100%{opacity:1;filter:brightness(1);}}
@media (prefers-reduced-motion:reduce){.panel{animation:none;}.door{transition:none;}}

.p-head{display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:1px solid rgba(22,26,32,.22);padding-bottom:12px;margin-bottom:26px;}
.p-head .t{font-family:var(--mincho);font-size:16px;letter-spacing:.14em;}
.p-head .n{font-size:11px;letter-spacing:.14em;color:rgba(22,26,32,.5);}

.q{margin-bottom:30px;}
.q .num{font-size:10.5px;letter-spacing:.28em;color:rgba(22,26,32,.45);}
.q .text{font-family:var(--mincho);font-size:18px;line-height:1.7;margin:6px 0 14px;}
.opts{display:grid;gap:7px;}
.opt{text-align:left;font-family:inherit;font-size:14px;line-height:1.6;padding:13px 15px;
  cursor:pointer;color:var(--ink);background:rgba(22,26,32,.05);
  border:1px solid rgba(22,26,32,.14);transition:background .15s;}
.opt:hover{background:rgba(22,26,32,.1);}
.opt:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.opt[aria-pressed="true"]{background:var(--ink);color:var(--cold);border-color:var(--ink);}
.panel.warm .opt[aria-pressed="true"]{color:var(--warm);}
.panel.mid .opt[aria-pressed="true"]{color:var(--mid);}

.act{margin-top:34px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.btn{font-family:var(--mincho);font-size:15px;letter-spacing:.16em;padding:14px 30px;
  cursor:pointer;border:1px solid var(--ink);background:var(--ink);color:var(--cold);}
.panel.warm .btn{color:var(--warm);} .panel.mid .btn{color:var(--mid);}
.btn[disabled]{opacity:.28;cursor:not-allowed;}
.panel.cold .btn.ghost,.panel.mid .btn.ghost,.panel.warm .btn.ghost{
  background:transparent;color:var(--ink);border-color:rgba(22,26,32,.5);}
.link{background:none;border:0;font-family:inherit;font-size:12.5px;
  color:rgba(22,26,32,.55);cursor:pointer;text-decoration:underline;padding:0;}

.title{font-family:var(--mincho);font-size:clamp(30px,9vw,42px);letter-spacing:.1em;margin:4px 0 10px;}
.title-sub{font-family:var(--mincho);font-size:14.5px;line-height:2;color:rgba(22,26,32,.68);
  border-bottom:1px solid rgba(22,26,32,.2);padding-bottom:22px;margin-bottom:26px;}
.read{font-family:var(--mincho);font-size:15px;line-height:2.15;margin:0 0 20px;}
.read .cue{display:block;font-family:var(--gothic);font-size:11px;letter-spacing:.2em;
  color:rgba(22,26,32,.45);margin-bottom:5px;}
.sting{border-left:2px solid var(--ink);padding:2px 0 2px 16px;margin:30px 0;}
.sting .cue{color:rgba(22,26,32,.6);}
.close{font-family:var(--mincho);font-size:16.5px;line-height:2.1;margin-top:30px;
  padding-top:22px;border-top:1px solid rgba(22,26,32,.2);}
.memo{font-family:var(--gothic);font-size:12.5px;line-height:1.9;
  background:rgba(22,26,32,.07);padding:14px 16px;margin:26px 0 0;}
.memo b{font-weight:500;}
.cross{margin-top:26px;padding:20px 18px;background:rgba(22,26,32,.09);}
.cross .cue{font-size:11px;letter-spacing:.2em;color:rgba(22,26,32,.5);}
.cross p{font-family:var(--mincho);font-size:15px;line-height:2.1;margin:8px 0 0;}
.foot{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap;}

/* 総鑑 */
.door.seal{background:#0E1116;border-left-color:#B9A46A;}
.door.seal .name{color:#E7D9AC;}
.soukan{background:#0E1116;padding:30px 24px 34px;
  box-shadow:0 0 70px rgba(185,164,106,.14);animation:wake .6s ease-out both;}
.soukan .cap{font-size:11px;letter-spacing:.34em;color:var(--dim);text-align:center;}
.soukan canvas,.soukan img{display:block;width:100%;max-width:420px;height:auto;
  margin:14px auto 6px;}
.soukan .hint{font-size:11px;letter-spacing:.1em;color:var(--dim);text-align:center;margin:0 0 4px;}
.soukan .sig{font-family:var(--hina);font-size:14px;letter-spacing:.24em;
  color:var(--dim);text-align:center;margin:0 0 26px;}
.soukan .cap{font-family:var(--hina);}
.soukan .faces{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:#232830;margin:0 0 26px;}
.soukan .face{background:#0E1116;padding:14px 8px;text-align:center;}
.soukan .face .l{font-size:10px;letter-spacing:.24em;color:var(--dim);}
.soukan .face .v{font-family:var(--mincho);font-size:15px;margin-top:6px;color:var(--cold);}
.soukan .body{font-family:var(--mincho);font-size:15px;line-height:2.15;color:#C8D2DC;margin:0 0 22px;}
.soukan .fin{font-family:var(--mincho);font-size:16px;line-height:2.15;color:var(--cold);
  border-top:1px solid #232830;padding-top:22px;}
.soukan .btn{border-color:#B9A46A;background:#B9A46A;color:#0E1116;}
.soukan .btn.ghost{background:transparent;color:#B9A46A;}

/* 花 — 各面の鑑。締めの後に罫線を挟んで一輪 */
.flower{margin-top:26px;padding-top:24px;border-top:1px solid rgba(22,26,32,.2);
  display:flex;gap:20px;align-items:center;}
.flower img{width:128px;height:128px;flex:0 0 128px;object-fit:contain;}
.flower .cue{display:block;font-size:11px;letter-spacing:.2em;
  color:rgba(22,26,32,.45);margin-bottom:7px;}
.flower b{font-family:var(--mincho);font-size:16.5px;font-weight:600;letter-spacing:.08em;}
.flower p{font-family:var(--mincho);font-size:14px;line-height:2.05;
  color:rgba(22,26,32,.78);margin:7px 0 0;}
@media (max-width:480px){.flower{gap:14px;}.flower img{width:96px;flex-basis:96px;}}

/* 総鑑 — 香りの見立て */
.oils{margin:26px 0 0;padding:20px 18px 18px;background:rgba(220,233,242,.045);}
.oils>.cue{font-size:11px;letter-spacing:.24em;color:var(--dim);}
.oil{display:flex;gap:16px;margin-top:16px;}
.oil .layer{flex:0 0 7.8em;white-space:nowrap;font-size:10.5px;letter-spacing:.14em;
  color:var(--dim);padding-top:5px;}
@media (max-width:400px){
  .oil{display:block;}
  .oil .layer{padding:0 0 3px;}
}
.oil .name{font-family:var(--mincho);font-size:15px;letter-spacing:.06em;color:var(--cold);}
.oil p{font-family:var(--mincho);font-size:13px;line-height:1.95;color:#9FB0BE;margin:4px 0 0;}
.oil-bonus{font-family:var(--mincho);font-size:13.5px;line-height:2;color:#E7D9AC;margin:18px 0 0;}
.oil-note{font-size:11.5px;line-height:1.9;color:var(--dim);margin:18px 0 0;
  padding-top:14px;border-top:1px solid #232830;}

/* 総鑑 — 花束。クリーム背景のまま、暗い面に額縁のように置く */
.hanataba{margin:30px 0 0;}
.hanataba .hint{margin:0;}

/* 総鑑 — 合成した一枚の置き場（押されるまで空） */
.card-out:not(:empty){margin-top:26px;padding-top:24px;border-top:1px solid #232830;}
.card-out .hint{margin:0;}

/* ============================================================
   トップ画面の背景 — 六十四の印を薄く巡らせる
   画像は持たず drawSeal が描く。円形マスクは飾りではなく必須で、
   drawSeal は背景ごと塗るため、掛けないと四角い板が浮いて見える
   ============================================================ */
#bg-seal{
  position:fixed;bottom:-60px;z-index:0;pointer-events:none;
  /* 画面の右端ではなく「内容の列」に寄せる。右端基準だと画面が広いほど
     印がメニューから離れて隅に取り残される。.wrap は中央620pxなので、
     その右辺(50%+310px)から60px重ねた位置に左辺を置く。
     狭い画面では画面外へ行ってしまうので、200pxは残るよう頭を押さえる */
  left:min(calc(50% + 250px),calc(100% - 200px));
  width:clamp(320px,34vw,520px);height:clamp(320px,34vw,520px);
  opacity:0;transition:opacity 1.2s ease;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 46%,transparent 72%);
  mask-image:radial-gradient(circle at 50% 50%,#000 46%,transparent 72%);
}
#bg-seal.on{opacity:.12;}
.wrap,.upstairs{position:relative;z-index:1;}
@media (prefers-reduced-motion:reduce){#bg-seal{transition:none;}}

body{flex-wrap:wrap;align-content:flex-start;}
.upstairs{flex:0 0 100%;margin:64px 0 0;text-align:center;}
.upstairs a{font-family:var(--hina);font-size:13px;letter-spacing:.16em;
  color:var(--ink-soft);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color .35s ease,border-color .35s ease;}
.upstairs a:hover,.upstairs a:focus-visible{color:var(--cold-glow);
  border-bottom-color:rgba(127,174,207,.45);}