:root{
  --lr-gold:#c79a4b;
  --lr-gold-soft:#e0bf7b;
  --scroll-ink:#3d1e0f;
  --scroll-paper:#e5bd7a;
}
*{box-sizing:border-box}
html{min-height:100%;background:#080b0f}
body.riassuntini-page{
  min-height:100vh;
  margin:0;
  color:#eee5d5;
  background:#080b0f;
  font-family:Georgia,"Times New Roman",serif
}
.riassuntini-bg{
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(rgba(5,8,11,.73),rgba(5,8,11,.88)),
    url("/legacy-v4/ravnica-background.jpg") center/cover fixed no-repeat
}
.riassuntini-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(199,154,75,.12),transparent 42%)
}
.riassuntini-shell{width:min(1080px,calc(100% - 28px));margin:0 auto;padding:22px 0 54px}
.riassuntini-header{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:28px}
.riassuntini-brand{display:block;width:min(440px,68vw)}
.riassuntini-brand img{display:block;width:100%;height:auto;filter:drop-shadow(0 12px 24px rgba(0,0,0,.38))}
.riassuntini-back,.episode-all{
  color:#d9bd84;
  text-decoration:none;
  font:800 11px/1 Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.09em;
  border:1px solid rgba(199,154,75,.3);
  border-radius:999px;
  padding:10px 12px;
  background:rgba(8,12,16,.74);
  white-space:nowrap
}
.riassuntini-back:hover,.episode-all:hover{border-color:rgba(199,154,75,.7);color:#f4dca9}
.riassuntini-main{display:block}
.riassuntini-intro,.episode-heading{text-align:center;max-width:820px;margin:0 auto 28px}
.riassuntini-eyebrow{
  color:var(--lr-gold);
  font:900 10px/1.2 Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.2em;
  margin-bottom:8px
}
.riassuntini-intro h1,.episode-heading h1{
  margin:0;
  color:#f2e4ce;
  font-size:clamp(36px,7vw,66px);
  line-height:1;
  letter-spacing:-.035em;
  text-shadow:0 5px 24px rgba(0,0,0,.65)
}
.riassuntini-intro p,.episode-heading p{
  margin:14px auto 0;
  max-width:700px;
  color:#bcb09e;
  font:400 15px/1.6 Arial,sans-serif
}
.episodes-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.episode-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:15px;
  align-items:center;
  padding:18px;
  min-height:108px;
  color:inherit;
  text-decoration:none;
  border:1px solid rgba(199,154,75,.25);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(26,23,19,.96),rgba(12,15,19,.97));
  box-shadow:0 15px 45px rgba(0,0,0,.28);
  transition:transform .2s ease,border-color .2s ease
}
.episode-card:hover{transform:translateY(-3px);border-color:rgba(199,154,75,.58)}
.episode-card-number{
  width:auto;min-width:60px;max-width:160px;height:60px;padding:0 12px;border-radius:14px;display:grid;place-items:center;text-align:center;
  background:radial-gradient(circle at 30% 20%,#8e6236,#422619 75%);
  border:1px solid rgba(225,190,120,.35);
  color:#f1d49c;font-size:23px;font-weight:800
}
.episode-card-copy strong{display:block;font-size:19px;color:#f0e3ce}
.episode-card-copy small{display:block;margin-top:6px;color:#a99d8b;font:12px/1.4 Arial,sans-serif}
.episode-card-arrow{color:var(--lr-gold);font-size:34px}
.episode-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
.episode-badge{
  color:#d8b879;
  border:1px solid rgba(199,154,75,.26);
  border-radius:999px;
  padding:8px 10px;
  background:rgba(199,154,75,.065);
  font:800 10px/1 Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.09em
}
.video-card,.parchment-card{
  margin:0 auto 22px;
  padding:18px;
  border-radius:21px;
  border:1px solid rgba(199,154,75,.24);
  background:linear-gradient(180deg,rgba(17,20,23,.96),rgba(8,11,15,.98));
  box-shadow:0 22px 60px rgba(0,0,0,.36)
}
.section-caption{display:flex;align-items:center;gap:11px;margin:0 2px 14px}
.section-caption>span{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  border:1px solid rgba(199,154,75,.25);background:rgba(199,154,75,.075);color:#d7b26b
}
.section-caption small{display:block;color:#9e907d;font:800 9px/1 Arial,sans-serif;text-transform:uppercase;letter-spacing:.12em;margin-bottom:4px}
.section-caption strong{display:block;color:#eee1cc;font-size:17px}
.video-frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:15px;
  background:#000;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)
}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.parchment-card{padding-bottom:26px}
.parchment-caption{max-width:720px;margin-left:auto;margin-right:auto}
.scroll-wrap{
  position:relative;
  width:min(680px,100%);
  margin:0 auto;
  cursor:pointer;
  user-select:none;
  outline:none;
  filter:drop-shadow(0 20px 25px rgba(0,0,0,.46));
  -webkit-tap-highlight-color:transparent
}
.scroll-wrap:focus-visible{filter:drop-shadow(0 0 0 rgba(0,0,0,0));outline:2px solid #ddb76d;outline-offset:9px;border-radius:14px}
.scroll-roller{
  position:relative;
  z-index:4;
  width:100%;
  height:72px;
  display:grid;
  grid-template-columns:58px minmax(0,1fr) 58px;
  align-items:center
}
.roller-body{
  display:block;
  height:48px;
  border-radius:16px;
  border:1px solid rgba(73,36,13,.8);
  background:
    linear-gradient(180deg,rgba(255,255,255,.18),transparent 18%,rgba(64,29,11,.18) 65%,rgba(48,22,8,.42)),
    repeating-linear-gradient(90deg,rgba(94,47,16,.12) 0 2px,transparent 2px 17px),
    linear-gradient(90deg,#b67b39,#e1b66c 10%,#c68c45 28%,#e0b36b 50%,#bc7c39 73%,#e0b26a 91%,#9e602b);
  box-shadow:inset 0 5px 7px rgba(255,255,255,.12),inset 0 -6px 9px rgba(55,24,8,.35),0 5px 10px rgba(0,0,0,.24)
}
.roller-cap{
  display:block;
  width:62px;
  height:62px;
  border-radius:50%;
  border:2px solid #4b2c16;
  background:
    radial-gradient(circle at 38% 32%,#b58a55 0 10%,#76502c 24%,#3c2718 55%,#1d1510 74%,#9d6b39 79%,#332116 86%);
  box-shadow:inset 0 0 0 5px rgba(20,11,5,.42),0 6px 11px rgba(0,0,0,.35)
}
.roller-cap.left{transform:translateX(8px)}
.roller-cap.right{transform:translateX(-8px)}
.scroll-roller-top{margin-bottom:-18px}
.scroll-roller-bottom{margin-top:-18px}
.scroll-paper{
  position:relative;
  z-index:2;
  max-height:0;
  overflow:hidden;
  margin:0 34px;
  color:var(--scroll-ink);
  background:
    radial-gradient(circle at 10% 12%,rgba(110,62,24,.08) 0 1px,transparent 2px),
    radial-gradient(circle at 73% 42%,rgba(110,62,24,.07) 0 1px,transparent 2px),
    radial-gradient(circle at 31% 77%,rgba(110,62,24,.06) 0 1px,transparent 2px),
    linear-gradient(90deg,rgba(116,63,22,.11),transparent 9%,transparent 91%,rgba(116,63,22,.11)),
    linear-gradient(180deg,#e4bd7e 0%,#f0d19a 5%,#e8c589 48%,#efcf97 94%,#dfb775 100%);
  box-shadow:inset 14px 0 18px rgba(110,56,19,.11),inset -14px 0 18px rgba(110,56,19,.11);
  transition:max-height 2.25s cubic-bezier(.18,.72,.2,1)
}
.scroll-paper::before,.scroll-paper::after{
  content:"";
  position:absolute;
  top:15px;
  bottom:15px;
  width:18px;
  opacity:.45;
  pointer-events:none;
  background:
    radial-gradient(ellipse at center,rgba(89,42,14,.2),transparent 67%)
}
.scroll-paper::before{left:-6px}
.scroll-paper::after{right:-6px}
.scroll-paper-inner{
  position:relative;
  padding:78px 58px 72px;
  opacity:.05;
  transform:translateY(-28px);
  transition:opacity .65s ease .35s,transform 1s ease .28s
}
.scroll-wrap.is-open .scroll-paper-inner{opacity:1;transform:translateY(0)}
.scroll-paper-inner::before{
  content:"";
  position:absolute;
  inset:38px 35px;
  border-left:1px solid rgba(92,42,14,.48);
  border-right:1px solid rgba(92,42,14,.48);
  pointer-events:none
}
.scroll-title-block{text-align:center;position:relative;z-index:1}
.scroll-episode{font-weight:800;font-size:clamp(30px,6vw,51px);line-height:1;color:#5e2411}
.scroll-title-block h2{margin:6px 0 18px;font-size:clamp(38px,7.5vw,64px);line-height:.98;color:#5a210f;font-weight:700;letter-spacing:-.035em}
.scroll-divider{display:flex;align-items:center;justify-content:center;gap:8px;margin:18px auto 34px;max-width:75%;color:#7a3d19}
.scroll-divider span{height:1px;background:#7a3d19;flex:1}
.scroll-divider b{font-size:22px;line-height:1}
.scroll-story{position:relative;z-index:1;font-size:clamp(18px,3.2vw,25px);line-height:1.36}
.scroll-story p{margin:0 0 28px}
.scroll-story ul{list-style:none;padding:0;margin:0 0 31px}
.scroll-story li{position:relative;padding-left:34px;margin:0 0 21px}
.scroll-story li::before{content:"◆";position:absolute;left:2px;top:.1em;font-size:.62em;color:#5e2712}
.scroll-story strong{font-weight:800}
.scroll-ornament{text-align:center;color:#6a3317;font-size:45px;line-height:1;position:relative;z-index:1}
.scroll-ornament-top{margin-bottom:22px}
.scroll-ornament-bottom{margin-top:28px}
.parchment-hint{
  position:absolute;
  z-index:7;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  gap:8px;
  min-width:max-content;
  padding:9px 13px;
  border-radius:999px;
  border:1px solid rgba(76,38,14,.42);
  background:rgba(239,204,143,.95);
  color:#452511;
  box-shadow:0 5px 18px rgba(0,0,0,.32);
  font:900 10px/1 Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.07em;
  transition:opacity .25s ease,top 1.1s ease,bottom 1.1s ease
}
.parchment-hint-icon{font-size:16px;line-height:1}
.scroll-wrap.is-open .parchment-hint{top:auto;bottom:31px;opacity:.82}
.episode-footer-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:24px}
.episode-primary,.episode-secondary{
  display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 15px;
  border-radius:11px;text-decoration:none;font:900 10px/1 Arial,sans-serif;text-transform:uppercase;letter-spacing:.08em
}
.episode-primary{color:#1c1208;background:linear-gradient(#d5ae68,#9b6d34);border:1px solid #d5ae68}
.episode-secondary{color:#d8c7aa;border:1px solid rgba(199,154,75,.27);background:rgba(11,15,20,.72)}
.auth-message{text-align:center;color:#aa9d8a;font:13px/1.5 Arial,sans-serif;padding:40px 0}
body.auth-ok .auth-message{display:none}
@media(max-width:700px){
  .riassuntini-shell{width:min(100% - 18px,1080px);padding-top:12px}
  .riassuntini-header{align-items:flex-start;margin-bottom:20px}
  .riassuntini-brand{width:min(310px,68vw)}
  .riassuntini-back{font-size:8px;padding:8px 9px}
  .video-card,.parchment-card{padding:10px;border-radius:15px}
  .episode-topbar{margin-bottom:16px}
  .episode-heading{margin-bottom:20px}
  .episode-heading h1{font-size:clamp(34px,12vw,50px)}
  .scroll-roller{grid-template-columns:43px minmax(0,1fr) 43px;height:58px}
  .roller-cap{width:48px;height:48px}
  .roller-body{height:37px}
  .scroll-roller-top{margin-bottom:-15px}
  .scroll-roller-bottom{margin-top:-15px}
  .scroll-paper{margin:0 23px}
  .scroll-paper-inner{padding:58px 30px 57px}
  .scroll-paper-inner::before{inset:27px 18px}
  .scroll-story{font-size:clamp(16px,4.7vw,21px)}
  .scroll-title-block h2{font-size:clamp(32px,10vw,48px)}
  .scroll-episode{font-size:clamp(25px,8vw,38px)}
}
@media(prefers-reduced-motion:reduce){
  .scroll-paper,.scroll-paper-inner,.episode-card,.parchment-hint{transition:none!important}
}
.uploaded-scroll-wrap{
  position:relative;
  width:min(680px,100%);
  margin:0 auto;
  cursor:pointer;
  outline:none;
  filter:drop-shadow(0 20px 25px rgba(0,0,0,.46));
  -webkit-tap-highlight-color:transparent
}
.uploaded-scroll-wrap[hidden]{display:none!important}
.uploaded-scroll-wrap:focus-visible{outline:2px solid #ddb76d;outline-offset:9px;border-radius:14px}
.uploaded-parchment-viewport{
  position:relative;
  width:100%;
  max-height:118px;
  overflow:hidden;
  border-radius:12px;
  transition:max-height 2.35s cubic-bezier(.18,.72,.2,1);
  background:#b98a4e
}
.uploaded-parchment-viewport img{
  display:block;
  width:100%;
  height:auto;
  user-select:none;
  -webkit-user-drag:none
}
.uploaded-roll-edge{
  position:absolute;
  left:2.5%;
  right:2.5%;
  bottom:0;
  height:38px;
  border-radius:50% 50% 12px 12px / 35% 35% 12px 12px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.16),transparent 20%,rgba(58,25,8,.4)),
    linear-gradient(90deg,#845325,#c79754 11%,#a66d31 31%,#d0a262 50%,#a3682e 71%,#c18d4c 90%,#73441f);
  box-shadow:0 7px 16px rgba(0,0,0,.35),inset 0 4px 5px rgba(255,255,255,.12);
  transition:opacity .35s ease 1.65s
}
.uploaded-scroll-wrap.is-open .uploaded-roll-edge{opacity:0}
.uploaded-scroll-wrap .parchment-hint{top:59px}
.uploaded-scroll-wrap.is-open .parchment-hint{top:auto;bottom:22px;opacity:.82}
@media(max-width:700px){
  .uploaded-parchment-viewport{max-height:92px}
  .uploaded-scroll-wrap .parchment-hint{top:46px}
}
@media(prefers-reduced-motion:reduce){
  .uploaded-parchment-viewport,.uploaded-roll-edge{transition:none!important}
}

.parchment-pdf-actions{
  width:min(680px,100%);
  max-height:0;
  margin:0 auto;
  opacity:0;
  overflow:hidden;
  transform:translateY(-8px);
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  transition:max-height .35s ease,opacity .28s ease,transform .28s ease,margin .28s ease
}
.parchment-pdf-actions[hidden]{display:none!important}
.parchment-pdf-actions.is-visible{
  max-height:130px;
  margin-top:18px;
  opacity:1;
  transform:translateY(0);
  pointer-events:auto
}
.parchment-pdf-actions>span{
  max-width:420px;
  color:#b8aa95;
  font:12px/1.5 Arial,sans-serif
}
.parchment-pdf-link{flex:0 0 auto}
@media(max-width:700px){
  .parchment-pdf-actions.is-visible{max-height:190px}
  .parchment-pdf-actions{flex-direction:column;text-align:center;gap:9px}
  .parchment-pdf-link{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .parchment-pdf-actions{transition:none!important}
}


.parchment-tabs{
  width:min(760px,100%);
  margin:0 auto 18px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center
}
.parchment-tabs[hidden]{display:none!important}
.parchment-tab{
  appearance:none;
  border:1px solid rgba(199,154,75,.24);
  background:rgba(255,255,255,.025);
  color:#b9ad9a;
  border-radius:12px;
  min-height:44px;
  padding:8px 12px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  cursor:pointer;
  font:800 11px/1 Arial,sans-serif;
  transition:border-color .2s ease,background .2s ease,color .2s ease,transform .2s ease
}
.parchment-tab:hover{border-color:rgba(199,154,75,.55);transform:translateY(-1px)}
.parchment-tab.is-active{
  color:#f0dfc1;
  border-color:rgba(218,177,101,.7);
  background:linear-gradient(180deg,rgba(199,154,75,.18),rgba(199,154,75,.07));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)
}
.parchment-tab small{
  color:#1c1208;
  background:#d5ae68;
  border-radius:999px;
  padding:3px 5px;
  font-size:8px;
  letter-spacing:.05em
}
@media(max-width:700px){
  .parchment-tabs{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding:0 1px 6px}
  .parchment-tab{flex:0 0 auto}
}
