:root{
  --bg:#14121a;
  --ink:#e8e2d6;
  --dim:#9a8f86;
  --accent:#B8674A;          /* 弁柄。線と封蝋 */
  --accent-ink:#DE9C80;      /* 弁柄を文字に使うときの明るい側（背景とのコントラスト確保） */
  --line:rgba(184,103,74,.28);
  --serif:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
}

*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:2;
}

.wrap{max-width:640px;margin:0 auto;padding:40px 22px 80px;}

.eyebrow{
  color:var(--dim);font-size:11px;letter-spacing:.24em;margin:0 0 6px;
}

.head h1{
  font-family:var(--serif);
  font-size:30px;
  letter-spacing:.3em;
  margin:0;
  font-weight:600;
}

.sub{color:var(--dim);font-size:13px;letter-spacing:.14em;margin:10px 0 0;}

.foot{
  margin-top:70px;padding-top:26px;
  border-top:1px solid var(--line);
  color:var(--dim);font-size:12px;line-height:1.9;
}

.sr-only{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}

/* --- 部品 --- */
section{margin-top:44px;}

p{margin:0 0 18px;}

.lead{font-size:15px;}

.lead b{color:var(--accent-ink);font-weight:500;}

.note{color:var(--dim);font-size:13px;line-height:1.9;}

.omen{
  font-family:var(--serif);
  font-size:19px;line-height:2.1;
  border-left:2px solid var(--accent);
  padding:4px 0 4px 20px;
  margin:26px 0;
}

.label{
  display:block;color:var(--dim);
  font-size:12px;letter-spacing:.14em;margin-bottom:10px;
}

input[type=text]{
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:3px;
  color:var(--ink);
  font-family:inherit;
  font-size:16px;
  padding:14px;
}

input[type=text]:focus-visible,button:focus-visible,a:focus-visible{
  outline:2px solid var(--accent-ink);
  outline-offset:2px;
}

.choices{display:flex;flex-direction:column;gap:10px;margin:0 0 26px;}

button{
  appearance:none;-webkit-appearance:none;
  background:none;
  border:1px solid var(--line);
  border-radius:3px;
  color:var(--ink);
  cursor:pointer;
  font-family:inherit;
  font-size:15px;
  min-height:48px;
  padding:12px 18px;
  transition:border-color .3s ease,color .3s ease;
}

button:hover{border-color:var(--accent);color:var(--accent-ink);}

button.on{border-color:var(--accent);color:var(--accent-ink);}

button.quiet{
  border:0;color:var(--dim);font-size:13px;min-height:40px;padding:8px 2px;
}

button.quiet:hover{color:var(--accent-ink);}

/* --- 封（封蝋の封筒）---
   すべて二次元の動き（scaleY / translate / rotate）。三次元の回転は使わない。
   状態は4つ：sealing（封をする）/ sealed（封のまま）/ cracked（覗いたので蝋が割れている）/ opening（開く）
   アニメーションはすべて fill:both。動きを止める設定のときは、最後の形がそのまま出る。 */
.env{
  position:relative;
  width:300px;max-width:100%;
  height:290px;
  margin:18px auto 6px;
  pointer-events:none;
}
/* 閉じている封筒は、ふたを開くための上の余白を詰める */
.env.sealed,.env.cracked{height:206px;}
.env.sealed>*,.env.cracked>*{margin-top:-84px;}

/* 紙の地は ChatGPT が描いた一枚（assets/paper.webp。端がつながる）。明るさの違いは上に重ねるグラデーションで付ける */
.env-body{
  position:absolute;left:0;top:110px;width:300px;height:180px;z-index:3;
  background:
    linear-gradient(170deg,rgba(255,250,240,.10),rgba(60,40,20,.10)),
    url(assets/paper.webp?v=1) 0 0/256px 256px,
    #d7cbb3;
  border-radius:3px;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 14px 34px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.3);
}
/* 封筒の裏の、下から上がる合わせ目（紙の重なりを少し明るく、端に細い影） */
.env-body::before{
  content:"";position:absolute;inset:0;border-radius:3px;
  background:
    linear-gradient(180deg,rgba(255,250,240,.12),rgba(60,40,20,.06)),
    url(assets/paper.webp?v=1) 64px 32px/256px 256px;
  clip-path:polygon(0 100%,50% 40%,100% 100%);
  filter:drop-shadow(0 -1px 1px rgba(60,40,20,.25));
}
.env-body::after{
  content:"";position:absolute;inset:0;border-radius:3px;
  background:linear-gradient(180deg,rgba(60,40,20,.06),rgba(60,40,20,.16));
  clip-path:polygon(0 0,50% 40%,100% 0,100% 100%,50% 40%,0 100%);
}

.env-flap{
  position:absolute;left:0;top:110px;width:300px;height:118px;z-index:4;
  background:
    linear-gradient(180deg,rgba(60,40,20,.10),rgba(60,40,20,.24)),
    url(assets/paper.webp?v=1) 128px 0/256px 256px,
    #c9bca2;
  clip-path:polygon(0 0,100% 0,50% 100%);
  transform-origin:top center;
}

.env-letter{
  position:absolute;left:22px;top:128px;width:256px;height:150px;z-index:2;
  background:
    linear-gradient(rgba(255,252,245,.45),rgba(255,252,245,.45)),
    url(assets/paper.webp?v=1) 30px 90px/256px 256px,
    #efe7d6;
  box-shadow:0 -2px 8px rgba(0,0,0,.18);
  border-radius:2px;
  padding:14px 12px;
  text-align:center;
  color:#2a241c;
  font-family:var(--serif);
  line-height:1.7;
}
.env-letter small{display:block;font-size:11px;letter-spacing:.2em;color:#7d6f5f;}
.env-letter span{display:block;font-size:19px;font-weight:600;margin-top:4px;}

.wax{
  position:absolute;left:112px;top:186px;width:76px;height:76px;z-index:5;
  filter:drop-shadow(1px 3px 2px rgba(40,15,5,.45)) drop-shadow(0 6px 10px rgba(0,0,0,.25));
}
.wax img{display:block;width:100%;height:100%;}
.wax-l{clip-path:inset(0 50% 0 0);}
.wax-r{clip-path:inset(0 0 0 50%);}

/* 封をする：ふたが上から下りて、蝋が押される */
.env.sealing .env-flap{animation:flapclose .55s ease both;}
.env.sealing .wax{animation:press .4s cubic-bezier(.3,1.4,.5,1) .5s both;}

/* 覗いたあと：蝋は割れたまま戻らない */
.env.cracked .wax-l{transform:translate(-3px,2px) rotate(-8deg);}
.env.cracked .wax-r{transform:translate(3px,-1px) rotate(7deg);}

/* 開く：蝋が割れて落ち、ふたが上がり、中の紙が出てくる */
.env.opening .wax-l{transform:translate(-48px,46px) rotate(-38deg);opacity:0;animation:waxl .5s ease-in both;}
.env.opening .wax-r{transform:translate(48px,40px) rotate(34deg);opacity:0;animation:waxr .5s ease-in both;}
.env.opening .env-flap{transform:scaleY(-1);z-index:1;animation:flapopen .5s ease .4s both;}
.env.opening .env-letter{transform:translateY(-96px);animation:letter .6s ease .9s both;}

@keyframes flapclose{
  0%{transform:scaleY(-1);z-index:1}
  49%{z-index:1}
  50%{z-index:4}
  100%{transform:scaleY(1);z-index:4}
}
@keyframes flapopen{
  0%{transform:scaleY(1);z-index:4}
  49%{z-index:4}
  50%{z-index:1}
  100%{transform:scaleY(-1);z-index:1}
}
@keyframes press{
  from{transform:scale(1.7);opacity:0}
  to{transform:scale(1);opacity:1}
}
@keyframes waxl{
  0%{transform:translate(0,0) rotate(0);opacity:1}
  25%{transform:translate(-4px,1px) rotate(-9deg);opacity:1}
  100%{transform:translate(-48px,46px) rotate(-38deg);opacity:0}
}
@keyframes waxr{
  0%{transform:translate(0,0) rotate(0);opacity:1}
  25%{transform:translate(4px,-1px) rotate(8deg);opacity:1}
  100%{transform:translate(48px,40px) rotate(34deg);opacity:0}
}
@keyframes letter{
  from{transform:translateY(0)}
  to{transform:translateY(-96px)}
}

.seal-line{text-align:center;color:var(--dim);font-size:13px;margin:0 0 8px;}
.seal-line b{color:var(--ink);font-weight:500;}

/* --- 数字は一拍置いて出す --- */
.tally{animation:rise .6s ease .8s both;}
/* 数字を読ませてから封を開ける */
.late{animation:rise .6s ease 1.8s both;}
.late .env.opening .wax-l,.late .env.opening .wax-r{animation-delay:2.2s;}
.late .env.opening .env-flap{animation-delay:2.6s;}
.late .env.opening .env-letter{animation-delay:3.1s;}
@keyframes rise{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}

/* --- 帳面 --- */
.ledger{border-left:1px solid var(--line);padding-left:18px;margin-top:26px;}

.slip{
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:16px 0;font-size:13px;line-height:1.9;
}

.slip:first-child{animation:drop .5s ease both;}
@keyframes drop{from{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}

.slip b{display:block;font-family:var(--serif);font-size:15px;font-weight:600;}

.slip span{color:var(--dim);}

.tend{color:var(--ink);font-size:14px;margin-top:24px;}

.back-portal{display:inline-block;margin-top:20px;padding:9px 18px;
  border:1px solid currentColor;border-radius:2px;
  font-size:12px;letter-spacing:.08em;text-decoration:none;
  color:inherit;opacity:.8;transition:opacity .3s ease;}
.back-portal:hover,.back-portal:focus-visible{opacity:1;}

/* 足元の導線：この占いが選ばれるまで（drafts/） */
.drafts-link{margin:22px 0 0;}
.drafts-link a{color:var(--accent-ink);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;}
.drafts-link a:hover,.drafts-link a:focus-visible{border-bottom-color:var(--accent-ink);}

/* 足元のコピーライト。ページの控えめな色に合わせる（薄くしすぎない） */
.copyright{color:var(--dim);}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;}
}

@media (max-width:480px){
  .wrap{padding:28px 16px 60px;}
  .head h1{font-size:25px;}
  .omen{font-size:17px;padding-left:16px;}
}