/* r3: 読める長さで留まる、3枚のポップな乾杯カード。 */
.ritual { height:700svh; }
.ritual-reader { position:absolute; left:max(26px,calc(50% - 490px)); top:47%; transform:translateY(-50%); width:clamp(290px,28vw,365px); pointer-events:auto; }
.ritual-card-stack { position:relative; height:clamp(300px,43svh,370px); }
.ritual-reader .ritual-card { position:absolute; inset:0; width:100%; height:100%; padding:28px; border:2px solid #34212a; border-radius:27px 27px 27px 7px; background:#ffe071; color:#34212a; box-shadow:7px 8px 0 #34212a; backdrop-filter:none; will-change:auto; transform:rotate(-2deg); }
.ritual-reader .ritual-card[hidden] { display:none; }
.ritual-reader .ritual-card[data-ritual="1"] { background:#f3a9bf; transform:rotate(1.5deg); }
.ritual-reader .ritual-card[data-ritual="2"] { background:#badb78; transform:rotate(-1deg); }
.ritual-reader .ritual-card.is-active { animation:ritual-pop .34s cubic-bezier(.16,.7,.26,1); }
.ritual-card-top { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; }
.ritual-reader .step-number { font-family:Sora,sans-serif; font-size:76px; font-weight:800; letter-spacing:-7px; line-height:1; color:#34212a; opacity:1; }
.ritual-stamp { display:grid; place-items:center; width:78px; height:78px; border:2px solid #34212a; border-radius:50%; background:#b8b0f0; font:800 16px/.95 Sora,sans-serif; text-align:center; transform:rotate(13deg); box-shadow:3px 3px 0 #34212a; }
[data-ritual="1"] .ritual-stamp { background:#ffe071; transform:rotate(-11deg); }
[data-ritual="2"] .ritual-stamp { background:#f3a9bf; }
.ritual-reader .ritual-card h2 { font-size:29px; line-height:1.4; letter-spacing:-.025em; margin:0 0 16px; }
.ritual-reader .ritual-card p { font-size:18px; line-height:1.8; }
.ritual-card-rule { position:absolute; bottom:21px; left:28px; right:28px; height:7px; background:repeating-linear-gradient(120deg,#34212a 0 2px,transparent 2px 7px); }
.ritual-controls { display:flex; gap:6px; margin-top:23px; padding:7px; background:#fffaf0f2; border:1.5px solid #34212a; border-radius:40px; box-shadow:3px 3px 0 #34212a; }
.ritual-controls button { flex:1; padding:9px 5px; border-radius:30px; font-size:16px; line-height:1.3; white-space:nowrap; }
.ritual-controls button[aria-current="step"] { background:#34212a; color:#fff7e6; }
.ritual-read-all { display:block; margin:17px auto 0; padding:3px 10px; font-size:16px; line-height:1.5; color:#34212a; background:#fffaf0c9; border-radius:5px; border-bottom:1px solid #34212a; }
.ritual-reader button:hover { filter:brightness(.95); }
.ritual-reading { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:26px; }
.ritual-reading-card { position:relative; background:#ffe071; color:#34212a; border:2px solid #34212a; border-radius:20px 20px 20px 5px; box-shadow:5px 5px 0 #34212a; padding:24px 22px 36px; }
.ritual-reading-card:nth-child(2) { background:#f3a9bf; }
.ritual-reading-card:nth-child(3) { background:#badb78; }
.ritual-reading-card .step-number { opacity:1; color:#34212a; font-size:62px; }
.ritual-reading-card .ritual-stamp { width:65px; height:65px; font-size:14px; }
.ritual-reading-card h2 { font-size:24px; line-height:1.5; margin:16px 0; }
.ritual-reading-card p { font-size:18px; line-height:1.8; }
.ritual-reading-card .ritual-card-rule { display:none; }
@keyframes ritual-pop { from { opacity:0; translate:0 18px; scale:.96; } to { opacity:1; translate:0 0; scale:1; } }
.no-motion .ritual-reader .ritual-card.is-active { animation:none; }
@media(prefers-reduced-motion:reduce) { .ritual-reader .ritual-card.is-active { animation:none; } }
@media(min-width:761px) and (max-height:720px) {
  .ritual-reader { top:45%; }
  .ritual-reader .ritual-card { padding:22px 25px; }
  .ritual-reader .step-number { font-size:66px; }
  .ritual-stamp { width:67px; height:67px; font-size:14px; }
  .ritual-reader .ritual-card h2 { font-size:26px; margin-bottom:12px; }
  .ritual-reader .ritual-card p { font-size:17px; line-height:1.7; }
  .ritual-card-top { margin-bottom:12px; }
  .ritual-controls { margin-top:18px; }
  .ritual-read-all { margin-top:12px; }
}
@media(max-width:760px) {
  .ritual-reader { left:23px; right:23px; width:auto; top:86px; transform:none; }
  .ritual-card-stack { height:285px; }
  .ritual-reader .ritual-card { padding:22px 24px; pointer-events:auto; }
  .ritual-reader .step-number { font-size:66px; }
  .ritual-stamp { width:65px; height:65px; font-size:14px; }
  .ritual-card-top { margin-bottom:12px; }
  .ritual-reader .ritual-card h2 { font-size:25px; margin-bottom:12px; }
  .ritual-reader .ritual-card p { font-size:17px; line-height:1.65; }
  .ritual-controls { margin-top:18px; }
  .ritual-controls button { padding:9px 3px; }
  .ritual-read-all { margin-top:13px; }
  .ritual-reading { grid-template-columns:1fr; }
}
@media(max-width:360px), (max-width:760px) and (max-height:700px) {
  .ritual-reader { top:75px; left:18px; right:22px; }
  .ritual-card-stack { height:265px; }
  .ritual-reader .ritual-card { padding:18px 20px; }
  .ritual-reader .step-number { font-size:58px; letter-spacing:-5px; }
  .ritual-stamp { width:58px; height:58px; font-size:12px; }
  .ritual-reader .ritual-card h2 { font-size:23px; }
  .ritual-reader .ritual-card p { font-size:16px; line-height:1.65; }
  .ritual-card-rule { bottom:17px; left:20px; right:20px; }
  .ritual-controls { margin-top:17px; padding:5px; }
  .ritual-controls button { padding:8px 1px; }
  .ritual-read-all { margin-top:12px; }
}