:root{
  --ink:#e5e7eb;
  --paper:#0b1020;
  --panel:rgba(17,24,39,.88);
  --soft:rgba(11,18,32,.78);
  --ring:#1f2937;
  --ring2:#2a3850;
  --aqua:#7fffd4;
  --blue:#60a5fa;
  --brand-orange:#f2a43b;
  --brand-orange-dark:#b96710;
  --brand-orange-soft:#ffc56d;
  --shadow:0 18px 36px rgba(0,0,0,.34);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  min-height:100%;
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:url("/assets/images/background.png") center/cover no-repeat;
  opacity:.28;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 50% 16%,rgba(29,78,216,.13),transparent 34%),
    linear-gradient(180deg,rgba(11,16,32,.04),rgba(11,16,32,.74));
  pointer-events:none;
}
header{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:150px;
  padding:16px;
  background:linear-gradient(90deg,rgba(2,6,23,.88),rgba(15,23,42,.88));
  border-bottom:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(3px);
}
header img{
  display:block;
  width:auto;
  max-width:min(78vw,620px);
  height:clamp(84px,14vw,160px);
  object-fit:contain;
}
.exit{
  position:absolute;
  top:1rem;
  right:1rem;
  padding:8px 14px;
  color:#0f2a52;
  background:#fff;
  border:1px solid #0f2a52;
  border-radius:999px;
  font-weight:750;
  text-decoration:none;
}
main{
  width:min(1120px,94vw);
  margin:22px auto 46px;
}
.intro{
  max-width:900px;
  margin:0 auto 20px;
  text-align:center;
}
.intro h1{
  margin:0 0 8px;
  color:#fff;
  font-size:clamp(1.7rem,4vw,2.7rem);
}
.intro p{
  margin:0;
  color:#cbd5e1;
  line-height:1.65;
}
.carousel{
  isolation:isolate;
  touch-action:pan-y;
  overscroll-behavior-x:contain;
  position:relative;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  justify-items:center;
  gap:clamp(10px,3vw,34px);
  min-height:470px;
  overflow:visible;
  contain:layout;
}

.carousel::before{
  content:"";
  position:absolute;
  left:50%;
  top:52%;
  width:360px;
  height:360px;
  transform:translate(-50%,-50%);
  border:1px solid rgba(244,197,106,.14);
  border-radius:50%;
  box-shadow:0 0 90px rgba(244,197,106,.08);
  pointer-events:none;
}
.card{
  position:relative;
  appearance:none;
  border:0;
  padding:0;
  background:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  cursor:pointer;
  opacity:.60;
  transition:transform .30s cubic-bezier(.22,.8,.28,1), opacity .30s ease, filter .30s ease;
}
.card img{
  display:block;
  height:auto;
  object-fit:contain;
  image-rendering:auto;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  filter:drop-shadow(0 16px 24px rgba(0,0,0,.45));
  transition:filter .20s ease;
}
.card.center{
  z-index:2;
  width:auto;
  justify-self:center;
  opacity:1;
  cursor:default;
}
.card.center img{width:240px}
.card.side{
  justify-self:center;
  filter:saturate(.76) brightness(.82);
}
.card.side img{width:155px}
.card.side:hover,
.card.side:focus-visible{
  opacity:.85;
  outline:none;
}
.mobile-hint{
  display:none;
  margin:0;
  color:#7f8a9c;
  text-align:center;
  font-size:.8rem;
}
.content{
  max-width:930px;
  margin:0 auto;
  padding:26px 28px;
  background:var(--panel);
  border:1px solid var(--ring);
  border-radius:18px;
  box-shadow:var(--shadow);
  transition:opacity .22s ease,transform .22s ease;
}
.content.is-changing{
  opacity:.35;
  transform:none;
}
.loading{margin:0;color:#cbd5e1}
.content-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:20px;
}
.content-head h2{
  margin:0;
  color:#fff;
  font-size:clamp(2.4rem,7vw,5rem);
  line-height:.92;
  letter-spacing:.03em;
}
.lead{
  margin:0 0 20px;
  color:#d7deea;
  font-size:1.03rem;
  line-height:1.7;
}
.meanings{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.meaning{
  padding:18px;
  background:var(--soft);
  border:1px solid var(--ring2);
  border-radius:15px;
}
.meaning small{
  display:block;
  margin-bottom:7px;
  color:var(--blue);
  font-size:.77rem;
  font-weight:850;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.meaning.secondary small{color:var(--brand-orange-soft)}
.meaning h3{
  margin:0 0 8px;
  color:#fff;
  font-size:1.25rem;
}
.meaning p{
  margin:0;
  color:#cbd5e1;
  line-height:1.58;
}
.prompt{
  margin:18px 0 0;
  padding:16px 18px;
  color:#e8edf7;
  background:rgba(29,78,216,.12);
  border-radius:13px;
  line-height:1.62;
}
.word-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}
.word-list span{
  padding:6px 10px;
  color:#dce8ff;
  background:#172238;
  border:1px solid #2d405f;
  border-radius:999px;
  font-size:.88rem;
}
.note{
  margin:18px 0 0;
  padding-top:15px;
  color:#aeb8c8;
  border-top:1px solid rgba(255,255,255,.07);
  font-size:.88rem;
  line-height:1.55;
}
.unlocks{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:20px;
}
.unlock{
  padding:15px 16px;
  background:rgba(17,24,39,.76);
  border:1px solid var(--ring);
  border-radius:13px;
}
.unlock.locked{
  color:#17120a;
  background:linear-gradient(180deg,var(--brand-orange-soft),var(--brand-orange));
  border-color:var(--brand-orange-dark);
  box-shadow:0 8px 20px rgba(242,164,59,.20);
}
.unlock strong{
  display:block;
  margin-bottom:5px;
  color:#17120a;
  font-size:.95rem;
}
.unlock span{
  color:#4a2b08;
  font-size:.8rem;
  font-weight:700;
}
.section-block{
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.08);
}
.section-block h3{
  margin:0 0 12px;
  color:#fff;
  font-size:1.15rem;
}
.vocab-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.vocab-group{
  padding:15px;
  background:rgba(11,18,32,.72);
  border:1px solid var(--ring2);
  border-radius:14px;
}
.vocab-group h4{
  margin:0 0 10px;
  color:#dbeafe;
}
.vocab-group ul{
  margin:0;
  padding-left:18px;
  color:#cbd5e1;
  line-height:1.55;
}
.resource-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.resource-item{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  min-height:92px;
  padding:18px 54px 18px 22px;
  color:#111827;
  background:linear-gradient(180deg,#ffd36a,#f4a53a);
  border:1px solid #d68b1e;
  border-radius:16px;
  text-align:left;
  text-decoration:none;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
}
.resource-item::after{
  content:"›";
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-52%);
  color:#111827;
  font-size:2rem;
  font-weight:400;
  line-height:1;
}
.resource-item:hover,
.resource-item:focus-visible{
  transform:translateY(-2px);
  filter:brightness(1.04);
  box-shadow:0 12px 22px rgba(0,0,0,.24);
  outline:none;
}
.resource-item strong{
  display:block;
  width:100%;
  margin:0 0 6px;
  color:#111827;
  font-size:1.02rem;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.resource-item span{
  display:block;
  width:100%;
  color:#4b3a12;
  font-size:.84rem;
  line-height:1.35;
}
footer{
  padding:20px 16px 30px;
  color:#8995a8;
  text-align:center;
  font-size:.84rem;
}


/* Edge bounce */
@keyframes vaultBounceLeft{
  0%{transform:translateX(0)}
  35%{transform:translateX(36px)}
  100%{transform:translateX(0)}
}
@keyframes vaultBounceRight{
  0%{transform:translateX(0)}
  35%{transform:translateX(-36px)}
  100%{transform:translateX(0)}
}
.carousel.bounce-left{animation:vaultBounceLeft .28s ease-out}
.carousel.bounce-right{animation:vaultBounceRight .28s ease-out}

@media(max-width:760px){
  .carousel{
  touch-action:pan-y;
  overscroll-behavior-x:contain;
    grid-template-columns:72px auto 72px;
    justify-items:center;
    gap:0;
    min-height:390px
  }
  .card.center img{width:205px}
  .card.side img{width:108px}
    .meanings{grid-template-columns:1fr}
  .unlocks{grid-template-columns:1fr}
  .vocab-grid,.resource-list{grid-template-columns:1fr}
}
@media(max-width:520px){
  header{min-height:150px;padding-top:58px}
  .exit{top:13px;right:13px}
  .carousel{
    touch-action:pan-y;
    overscroll-behavior-x:contain;
    grid-template-columns:82px auto 82px;
    justify-items:center;
    gap:0;
    min-height:340px;
    padding-inline:2px;
  }
  .carousel::before{width:260px;height:260px}
  .card.center img{width:185px}
  .card.side img{
    width:78px;
    max-width:100%;
  }
  .mobile-hint{display:block}
  .content{padding:20px 18px}
}

@media(max-width:360px){
  .carousel{
    grid-template-columns:66px auto 66px;
  }
  .card.center img{width:172px}
  .card.side img{width:62px}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .card,.content{transition:none}
  .carousel.bounce-left,.carousel.bounce-right{animation:none}
}


.vocabulary-grid .resource-item{
  background:#93c5fd;
  border:1px solid #bfdbfe;
}


.carousel-top-card{
  z-index:4 !important;
}
.carousel-incoming-card{
  z-index:2 !important;
}


/* True carousel animation layer */
.carousel-animation-layer{
  position:absolute;
  inset:0;
  z-index:20;
  pointer-events:none;
  overflow:visible;
}
.carousel-animation-card{
  position:absolute;
  display:block;
  object-fit:contain;
  margin:0;
  padding:0;
  border:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:left,top,width,height,opacity;
  filter:drop-shadow(0 16px 24px rgba(0,0,0,.45));
}


.intro p{
  text-align:justify;
  text-align-last:left;
  hyphens:none;
  -webkit-hyphens:none;
  word-break:normal;
  overflow-wrap:normal;
}