/* Weekly quest board — illustrated materials with live, accessible HTML content. */
.quest-sidebar{
  --quest-blue:#174b80;
  --quest-ink:#51361d;
  position:relative;
  isolation:isolate;
  min-width:0;
}
.quest-board{
  position:relative;
  z-index:2;
  padding: 93px 34px 44px;
  color:var(--quest-ink);
  border:0;
  border-radius:0;
  background:url("../images/quest-parchment-cutout-v3.png") center/100% 100% no-repeat;
  box-shadow:none;
  filter:drop-shadow(0 8px 7px rgba(55,29,8,.28));
  clip-path:none;
}
.quest-board:before,.quest-board:after{content:none}

/* High-detail painted quest ribbon asset, with live title and exclamation mark. */
.quest-ribbon{
  position:absolute;
  top:14px;
  left:8px;
  right:8px;
  z-index:5;
  height:102px;
  min-height:0;
  display:block;
  padding:0;
  border:0;
  border-radius:0;
  background:url("../images/quest-ribbon-frame-v2.png") center/100% 100% no-repeat;
  box-shadow:none;
  transform:none;
}
.quest-ribbon:before,.quest-ribbon:after{content:none}
.quest-ribbon h2{
  position:absolute;
  z-index:3;
  left:19%;
  right:19%;
  top:35.16%;
  height:auto;
  display:block;
  margin:0;
  text-align:center;
  transform:translateY(-50%);
  color:#fff8e3;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:26px;
  font-weight:900;
  line-height:1.2;
  letter-spacing:.045em;
  white-space:nowrap;
  text-shadow:
    0 2px 0 #4d0c09,
    1px 0 0 #4d0c09,
    -1px 0 0 #4d0c09,
    0 4px 6px rgba(45,7,5,.45);
}
.quest-ribbon__medal{
  position:absolute;
  z-index:4;
  left:2px;
  top:4px;
  width:67px;
  height:67px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:0;
  color:#fff9e9;
  background:none;
  box-shadow:none;
  font:900 41px/.9 Georgia,serif;
  text-shadow:
    0 3px 0 #72100c,
    1px 0 0 #72100c,
    -1px 0 0 #72100c;
  transform:rotate(-4deg);
}
.quest-ribbon__medal:before,.quest-ribbon__medal:after{content:none}
.quest-ribbon__curl{display:none}

/* Intro */
.quest-board__lead{
  position:relative;
  z-index:2;
  margin:0 0 14px;
  text-align:center;
  color:#5c3b20;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:13px;
  font-weight:900;
  line-height:1.62;
  letter-spacing:.015em;
  text-shadow:0 1px rgba(255,249,225,.94);
}
.quest-board__list{
  position:relative;
  z-index:2;
  display:grid;
  gap:12px;
}

/* Four-corner RPG quest rows. */
.quest-card{
  position:relative;
  min-height:79px;
  display:grid;
  grid-template-columns:88px minmax(0,1fr) 15px;
  align-items:center;
  gap:12px;
  padding:18px 18px 18px 18px;
  overflow:visible;
  isolation:isolate;
  color:var(--quest-blue);
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transition:transform .16s ease,filter .16s ease;
}
.quest-card:before{
  content:"";
  position:absolute;
  z-index:3;
  inset:0;
  pointer-events:none;
  background:url("../images/quest-card-ornaments-v3.png") center/100% 100% no-repeat;
}
.quest-card:after{
  content:"";
  position:absolute;
  z-index:0;
  inset:4px 5px;
  pointer-events:none;
  background:linear-gradient(100deg,rgba(255,254,247,.94) 0%,rgba(255,250,240,.91) 65%,rgba(245,232,204,.9) 100%);
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);
  box-shadow:0 2px 3px rgba(78,45,14,.13);
}
.quest-card:hover{transform:translateX(2px);filter:brightness(1.025) saturate(1.04)}
.quest-card__image{
  position:relative;
  z-index:2;
  width:88px;
  height:62px;
  overflow:hidden;
  border:2px solid #9a6724;
  border-radius:4px;
  background:#cae6f0;
  box-shadow:
    inset 0 0 0 1px #fff4c7,
    0 2px 3px rgba(65,38,13,.3);
}
.quest-card__image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  filter:saturate(.93) contrast(1.02);
}
.quest-card__copy{
  position:relative;
  z-index:4;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
}
.quest-card__title{
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:12px;
  font-weight:900;
  line-height:1.48;
  letter-spacing:.005em;
  text-shadow:0 1px 0 #fff;
}
.quest-card__new{
  position:relative;
  z-index:4;
  display:inline-block;
  margin:0 0 6px;
  padding:1px 7px 2px;
  color:#fff8ef;
  border:1px solid #8d1716;
  border-radius:2px;
  background:linear-gradient(#df4639,#a41317);
  box-shadow:inset 0 1px rgba(255,255,255,.35),0 1px 2px rgba(83,27,15,.25);
  font:900 9px/1.2 ui-sans-serif,sans-serif;
  letter-spacing:.06em;
}
.quest-card__arrow{
  position:relative;
  z-index:4;
  color:#5d3b1b;
  font:900 28px/1 Georgia,serif;
  text-shadow:0 1px 0 #fff7dd;
  transform:translateY(-1px);
}

/* High-detail painted wood CTA asset, with live label and arrow. */
.quest-board__cta{
  position:relative;
  z-index:2;
  width:calc(100% - 44px);
  min-height:60px;
  display:grid;
  grid-template-columns:1fr 30px;
  align-items:center;
  gap:2px;
  margin:19px auto 0;
  padding:8px 16px 9px 28px;
  color:#fff6df;
  border:0;
  outline:0;
  border-radius:0;
  background:url("../images/quest-cta-frame-v2.png") center/100% 100% no-repeat;
  box-shadow:none;
  clip-path:none;
  filter:drop-shadow(0 4px 3px rgba(66,32,8,.28));
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:16.5px;
  font-weight:900;
  letter-spacing:.06em;
  text-shadow:
    0 2px 0 #351304,
    1px 0 0 #351304,
    -1px 0 0 #351304;
}
.quest-board__cta:before,.quest-board__cta:after{content:none}
.quest-board__cta span{position:relative;text-align:center}
.quest-board__cta span:before{content:none}
.quest-board__cta b{
  display:grid;
  place-items:center;
  width:26px;
  height:27px;
  color:#f5d487;
  font:900 20px/1 Georgia,serif;
  text-shadow:0 2px 0 #351304;
}
.quest-board__cta:hover{filter:brightness(1.08) saturate(1.03) drop-shadow(0 4px 3px rgba(66,32,8,.28))}
.quest-card:focus-visible,.quest-board__cta:focus-visible{
  outline:3px solid #fff0a2;
  outline-offset:3px;
  box-shadow:0 0 0 5px #124c78;
}

@media(min-width:1241px){
  .portal-grid{grid-template-columns:390px minmax(0,1fr) 280px}
}
@media(max-width:1240px) and (min-width:761px){
  .quest-board{padding:93px 24px 44px}
  .quest-ribbon{left:7px;right:7px}
  .quest-ribbon h2{font-size:22px}
  .quest-ribbon__medal{left:1px;width:61px;height:61px;font-size:37px}
  .quest-card{grid-template-columns:79px minmax(0,1fr) 13px;gap:10px;padding-inline:16px}
  .quest-card__image{width:79px;height:59px}
  .quest-card__title{font-size:11.4px}
  .quest-board__cta{width:calc(100% - 34px);padding-left:23px;font-size:14.5px}
}
@media(max-width:760px){
  .quest-sidebar{max-width:420px;margin:0 auto 20px}
  .quest-board{padding:93px 32px 44px}
  .quest-card{grid-template-columns:94px minmax(0,1fr) 16px}
  .quest-card__image{width:94px;height:66px}
  .quest-card__title{font-size:13px}
}
@media(max-width:380px){
  .quest-board{padding:90px 22px 38px}
  .quest-ribbon{top:11px;left:5px;right:5px;height:96px}
  .quest-ribbon h2{font-size:20px}
  .quest-ribbon__medal{left:0;top:4px;width:59px;height:59px;font-size:35px}
  .quest-card{grid-template-columns:76px minmax(0,1fr) 12px;gap:10px;min-height:92px;padding:16px 14px}
  .quest-card__image{width:76px;height:56px}
  .quest-card__title{font-size:11.1px}
  .quest-board__cta{width:calc(100% - 24px);min-height:56px;padding-left:19px;font-size:14.5px}
}
/* Overlay the status badge so it never adds a text row to the card. */
.quest-card .quest-card__image .quest-card__new{
  position:absolute;top:3px;right:3px;left:auto;
  margin:0;padding:2px 4px;
  font-size:10px;line-height:1.2;letter-spacing:.02em;
}