.fortune-section{padding:30px clamp(22px,5vw,84px) 48px;background:linear-gradient(180deg,#080b0c 0%,#0b0d0d 100%)}
.fortune-bar.fortune-scene{width:min(1440px,100%);height:248px;min-height:0;margin:auto;padding:0;display:grid;grid-template-columns:24% 52% 24%;gap:0;align-items:stretch;overflow:hidden;border:1px solid rgba(210,174,108,.3);border-radius:3px;background-image:linear-gradient(90deg,rgba(4,7,7,.84) 0%,rgba(4,7,7,.42) 23%,rgba(4,7,7,.03) 43%,rgba(4,7,7,.04) 61%,rgba(4,7,7,.66) 79%,rgba(4,7,7,.93) 100%),url('./assets/fortune-stage-v2.png');background-size:cover;background-position:center 54%;box-shadow:0 30px 70px rgba(0,0,0,.38),inset 0 0 70px rgba(0,0,0,.22);position:relative}
.fortune-bar.fortune-scene::before{content:'';position:absolute;inset:0;border:1px solid rgba(238,211,157,.07);pointer-events:none}
.fortune-bar.fortune-scene::after{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(226,194,129,.62),transparent);pointer-events:none}
.fortune-intro,.fortune-outro{position:relative;z-index:3;display:flex;flex-direction:column;justify-content:center}
.fortune-intro{padding:24px 12px 20px 38px}
.fortune-intro small{color:#d7b777;font:11px/1.2 var(--serif);letter-spacing:.18em}
.fortune-intro h2{margin:15px 0 8px;color:#ead5a9;font:500 25px/1.1 var(--serif);letter-spacing:.12em}
.fortune-intro p{margin:0;color:#c6beb0;font:13px/1.8 var(--serif)}
.fortune-intro i{margin-top:17px;color:#777064;font:8px/1.4 var(--latin);font-style:normal;letter-spacing:.28em}
.fortune-paper{position:relative;z-index:4;align-self:center;justify-self:center;width:min(535px,88%);height:112px;margin-top:-8px;padding:14px 22px 14px 19px;display:grid;grid-template-columns:48px 51px 1px minmax(0,1fr);align-items:center;gap:13px;overflow:hidden;border:1px solid rgba(89,54,31,.5);border-radius:2px;background:linear-gradient(100deg,rgba(232,211,173,.92),rgba(246,226,188,.96) 45%,rgba(223,198,155,.92));color:#3c281d;box-shadow:0 13px 27px rgba(0,0,0,.46),inset 0 0 25px rgba(100,57,23,.12);transform:perspective(650px) rotateX(1deg) rotate(-.6deg);cursor:pointer;transition:filter .3s,transform .3s}
.fortune-paper:hover{filter:brightness(1.045);transform:perspective(650px) rotateX(1deg) rotate(-.6deg) translateY(-2px)}
.paper-index{font:11px var(--serif);writing-mode:vertical-rl;letter-spacing:.16em;color:#6e4c33}
.paper-level{font:600 24px/1 var(--serif);writing-mode:vertical-rl;letter-spacing:.08em;color:#872822}
.paper-rule{height:70px;background:rgba(92,59,34,.25)}
.fortune-message{position:absolute;z-index:3;left:24%;top:50%;width:39%;min-width:0;display:flex;flex-direction:column;align-items:flex-start;text-align:left;transform:translateY(-50%);transition:opacity .25s,filter .25s,transform .25s}
.fortune-message small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#6f4e36;font:10px/1.3 var(--serif)}
.fortune-message small b{color:#782e27;font-weight:500}
.fortune-message strong{margin:7px 0 5px;color:#382319;font:600 24px/1.08 var(--serif);letter-spacing:.1em}
.fortune-message em{color:#765a42;font:12px/1.5 var(--serif);font-style:normal}
.fortune-message.changing{opacity:0;filter:blur(4px);transform:translateY(calc(-50% + 4px))}
.paper-heritage-image{position:absolute;z-index:1;inset:0 0 0 auto;width:61%;height:100%;object-fit:cover;object-position:center;opacity:.84;filter:sepia(.28) saturate(.78) contrast(.96);mix-blend-mode:multiply;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.22) 10%,rgba(0,0,0,.72) 33%,#000 58%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.22) 10%,rgba(0,0,0,.72) 33%,#000 58%);transition:opacity .28s,filter .28s}
.fortune-message.changing~.paper-heritage-image{opacity:.18;filter:sepia(.5) saturate(.35) blur(4px)}
.paper-stamp{position:absolute;z-index:3;right:13px;bottom:12px;width:24px;height:24px;display:grid;place-items:center;border:1px solid rgba(132,40,32,.65);background:rgba(239,215,174,.45);color:#8a2a2a;font:14px var(--serif);transform:rotate(3deg)}
.fortune-outro{padding:24px 30px 20px 14px;align-items:flex-start}
.fortune-outro>p{margin:0 0 18px;color:#ddd0bd;font:17px/1.65 var(--serif);letter-spacing:.08em}
.fortune-actions{display:flex;gap:10px;position:relative;z-index:2}
.fortune-actions button,.fortune-actions a{height:37px;min-width:99px;padding:0 16px;justify-content:center;border:1px solid rgba(205,171,108,.5);border-radius:3px;background:rgba(5,7,7,.42);color:#d5c8b3;font:12px var(--serif);letter-spacing:.08em;backdrop-filter:blur(6px)}
.fortune-actions a{background:linear-gradient(100deg,rgba(104,27,28,.94),rgba(76,19,20,.94));border-color:rgba(204,144,80,.68);color:#f0dfc5}
.fortune-outro>small{margin-top:20px;color:#787166;font:9px var(--serif);letter-spacing:.16em}
.fortune-bar.drawing .fortune-paper{animation:fortunePaperShake .72s ease}
@keyframes fortunePaperShake{20%{transform:rotate(-1.3deg) translateX(-3px)}40%{transform:rotate(.3deg) translateX(3px)}60%{transform:rotate(-1deg) translateX(-2px)}80%{transform:rotate(-.2deg) translateX(1px)}}
@media(max-width:1080px){.fortune-bar.fortune-scene{grid-template-columns:27% 48% 25%;height:238px}.fortune-intro{padding-left:25px}.fortune-paper{width:94%;grid-template-columns:39px 43px 1px minmax(0,1fr);gap:9px}.fortune-outro{padding-right:18px}.fortune-outro>p{font-size:15px}.fortune-actions button,.fortune-actions a{min-width:84px;padding:0 11px}}
@media(max-width:760px){.fortune-section{padding:24px 14px 38px}.fortune-bar.fortune-scene{height:auto;min-height:390px;padding:20px;display:flex;flex-direction:column;justify-content:space-between;background-position:center;background-size:auto 100%}.fortune-intro{padding:0}.fortune-intro h2{margin:9px 0 5px;font-size:22px}.fortune-intro p{font-size:12px}.fortune-intro i{display:none}.fortune-paper{width:100%;height:108px;margin:15px 0;padding:12px;grid-template-columns:31px 38px 1px minmax(0,1fr);gap:7px}.paper-index{font-size:9px}.paper-level{font-size:19px}.fortune-message{left:23%;width:46%}.fortune-message strong{font-size:18px}.fortune-message em{max-width:90%;font-size:11px}.paper-heritage-image{width:58%}.fortune-outro{padding:0;align-items:flex-end;text-align:right}.fortune-outro>p{margin:0 0 10px;font-size:14px}.fortune-outro>small{margin-top:11px;font-size:8px}.fortune-actions button,.fortune-actions a{height:35px;min-width:92px}}
@media(prefers-reduced-motion:reduce){.fortune-bar.drawing .fortune-paper{animation:none}}

/* Keep the vertical fortune grade clear of the central title. */
.fortune-paper .paper-level{
  position:absolute;
  z-index:4;
  left:22%;
  top:50%;
  transform:translate(-50%,-50%);
}
.fortune-paper .fortune-message{
  left:33%;
  width:30%;
}
.fortune-paper .paper-rule{
  position:absolute;
  z-index:4;
  left:28%;
  top:50%;
  width:1px;
  height:64%;
  transform:translateY(-50%);
  background:rgba(92,59,34,.28);
}
.fortune-paper .paper-cylinder{
  position:absolute;
  z-index:4;
  left:1%;
  bottom:-24px;
  width:102px;
  height:148px;
  object-fit:contain;
  object-position:center bottom;
  mix-blend-mode:screen;
  filter:saturate(.78) sepia(.12) drop-shadow(0 8px 8px rgba(52,26,12,.22));
  pointer-events:none;
}
.fortune-bar.drawing .paper-cylinder{animation:fortuneCylinder 0.72s ease}
@keyframes fortuneCylinder{
  25%{transform:rotate(-3deg)}
  50%{transform:rotate(3deg) translateY(-3px)}
  75%{transform:rotate(-2deg)}
}
@media(max-width:760px){
  .fortune-paper .paper-cylinder{left:-1%;width:76px;height:122px;bottom:-18px}
  .fortune-paper .paper-level{left:24%}
  .fortune-paper .fortune-message{left:35%;width:34%}
  .fortune-paper .paper-rule{left:30%}
}

/* Favor the upper part of portraits so faces are not cropped by the shallow paper. */
.fortune-paper .paper-heritage-image{object-position:center 36%}