/* index.html: a day in the life, the toys, the boss roster, questions, and Gribble the narrator */

body[data-bg="cream"] { --bg: #f4e2bb; }
.sec[data-ink="dark"] .mega { color: var(--ink); text-shadow: 0 .06em 0 rgba(255, 250, 240, .7); }
.sec[data-ink="dark"] .mega .wobble { color: #b8321f; }

/* ---------- shared section heads ---------- */
.day__head, .play__head, .bosses__head { text-align: center; padding: 0 16px; margin-bottom: clamp(30px, 5vw, 56px); }
.day__head p, .play__head p, .bosses__head p { margin: 14px auto 0; max-width: 40ch; font-size: 1.15rem; }
.day__head p, .bosses__head p { color: var(--ink); }
.play__head p { color: var(--cream); }

/* ---------- a day in the life ---------- */
.day { padding: 130px clamp(16px, 5vw, 80px) 120px; }
.comic { list-style: none; margin: 0 auto; padding: 0; max-width: 1240px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }
.panel {
  position: relative;
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: 6px;
  padding: 10px 10px 16px;
  box-shadow: 8px 8px 0 var(--ink);
  transform: rotate(var(--t));
  transition: transform .35s var(--ease-spring);
}
.panel:hover { transform: rotate(0) scale(1.04); z-index: 2; }
.panel:nth-child(5) { grid-column: span 2; }
.panel:nth-child(5) .panel__media { aspect-ratio: 16 / 7.4; }
.panel__media { aspect-ratio: 4 / 3; overflow: hidden; border: 3px solid var(--ink); background: var(--ink); }
.panel__media img, .panel__media video { width: 100%; height: 100%; object-fit: cover; }
.panel__time {
  position: absolute;
  top: 0;
  left: 18px;
  margin: 0;
  translate: 0 -55%;
  font: 400 1rem/1 "Lilita One", sans-serif;
  color: var(--ink);
  background: var(--gold);
  border: 3px solid var(--ink);
  padding: .35em .6em .3em;
  box-shadow: 3px 3px 0 var(--ink);
}
.panel h3 { margin: 12px 4px 4px; font: 400 1.4rem/1 "Lilita One", sans-serif; text-transform: uppercase; color: var(--ink); }
.panel p:last-child { margin: 0 4px; font-size: .96rem; line-height: 1.4; color: #5a3d27; }
.panel__fan { position: relative; width: 100%; height: 100%; background: #2a1d4f; }
.panel__fan img { position: absolute; width: 36%; top: 12%; left: 32%; border-radius: 6px; transform-origin: 50% 120%; }
.panel__fan img:nth-child(1) { transform: rotate(-18deg) translateX(-30%); }
.panel__fan img:nth-child(3) { transform: rotate(18deg) translateX(30%); }
@media (max-width: 980px) { .comic { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .comic { grid-template-columns: 1fr; gap: 26px; } .panel:nth-child(5) { grid-column: auto; } .panel:nth-child(5) .panel__media { aspect-ratio: 4 / 3; } }

/* ---------- stats: skip button ---------- */
.stats__skip { position: absolute; z-index: 6; right: clamp(40px, 4vw, 70px); bottom: clamp(16px, 4vh, 36px); font-size: .85rem; }

/* ---------- have a go ---------- */
.play { padding: 130px clamp(16px, 5vw, 80px) 130px; }
.toys { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.toy {
  background: var(--paper);
  color: var(--ink);
  border: 4px solid var(--ink);
  border-radius: 30px;
  padding: 22px;
  box-shadow: 0 10px 0 rgba(36, 21, 12, .4);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 10px;
  min-width: 0;
}
.toy h3 { margin: 0; font: 400 1.8rem/1 "Lilita One", sans-serif; text-transform: uppercase; }
.toy__sub { margin: 0; color: #5a3d27; font-size: .98rem; }
.toy__btns, .toy__rows { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
@media (max-width: 860px) { .toys { grid-template-columns: 1fr; } }

/* dodge the slam */
.dodge {
  position: relative;
  height: 300px;
  border: 3px solid var(--ink);
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(#3a1a1a, #6a2a14 55%, #3b2314 55%);
  outline: none;
  touch-action: manipulation;
}
.dodge:focus-visible { box-shadow: 0 0 0 4px var(--gold); }
.dodge.shake { animation: quake .4s steps(5); }
.dodge__boss { position: absolute; left: 50%; top: 6px; width: 132px; translate: -50% 0; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .4)); transition: transform .3s var(--ease-spring); }
.dodge__boss.windup { transform: translateY(-8px) scale(1.08) rotate(-6deg); }
.dodge__boss.hurt { animation: hurt .4s; }
@keyframes hurt { 30% { transform: translateX(-8px) rotate(6deg); filter: brightness(2) drop-shadow(0 6px 0 rgba(0, 0, 0, .4)); } 60% { transform: translateX(6px); } }
.dodge__floor { position: absolute; left: 0; right: 0; bottom: 18px; height: 120px; }
.dodge__ring {
  position: absolute;
  left: calc(50% + var(--pos, 0) * 30%);
  bottom: 4px;
  width: 26%;
  aspect-ratio: 2.4;
  translate: -50% 0;
  border-radius: 50%;
  border: 3px solid var(--col, #ff7a2a);
  background: color-mix(in srgb, var(--col, #ff7a2a) 18%, transparent);
  opacity: 0;
}
.dodge__ring span { position: absolute; inset: 0; border-radius: 50%; background: var(--col, #ff7a2a); transform: scale(0); opacity: .75; }
.dodge__ring.filling { opacity: 1; }
.dodge__ring.filling span { animation: fill var(--dur, 1.5s) linear forwards; }
@keyframes fill { to { transform: scale(1); } }
.dodge__ring.hit { opacity: 1; animation: slam .45s ease-out forwards; }
.dodge__ring.hit span { transform: scale(1); opacity: 1; }
@keyframes slam { 0% { transform: scale(1); } 40% { transform: scale(1.25); filter: brightness(1.8); } 100% { transform: scale(1.4); opacity: 0; } }
.dodge__hero { position: absolute; left: calc(50% + var(--pos, 0) * 30%); bottom: 14px; width: 78px; translate: -50% 0; transition: left .22s var(--ease-out); transform-origin: 50% 100%; }
.dodge__hero.rolling { animation: roll .26s ease-out; }
@keyframes roll { 50% { transform: rotate(180deg) scale(.8); } 100% { transform: rotate(360deg); } }
.dodge__hero.squashed { transform: scaleY(.25) scaleX(1.5); transition: transform .12s; }
.dodge__msg { position: absolute; left: 0; right: 0; top: 150px; margin: 0; text-align: center; font: 400 1.25rem/1.1 "Lilita One", sans-serif; color: var(--cream); text-shadow: 0 3px 0 var(--ink); padding: 0 12px; }
.dodge__score { position: absolute; left: 12px; top: 10px; margin: 0; font-weight: 900; font-size: .85rem; color: var(--cream); background: rgba(0, 0, 0, .45); border-radius: 999px; padding: .3em .7em; }

/* build your hero */
.maker { display: grid; justify-items: center; align-content: end; min-height: 300px; background: radial-gradient(60% 50% at 50% 90%, #ffe7a8, transparent 70%), linear-gradient(#bfe3ff, #e8f6ff); border: 3px solid var(--ink); border-radius: 20px; padding: 14px; }
.maker__img { height: 210px; width: auto; filter: drop-shadow(0 8px 0 rgba(36, 21, 12, .3)); transform-origin: 50% 100%; }
.maker__img.pop { animation: popin .4s var(--ease-spring); }
@keyframes popin { from { transform: scale(.6) translateY(10%); } to { transform: none; } }
.maker__intro { margin: 10px 0 0; font: 400 1.2rem/1.15 "Lilita One", sans-serif; text-align: center; }
.maker__intro b { color: #b8321f; font-weight: 400; }
.pick { display: flex; align-items: center; gap: 8px; }
.pick .pill { padding: .55em .8em .5em; }
.pick__val { min-width: 9.5em; text-align: center; font: 400 1.05rem/1 "Lilita One", sans-serif; text-transform: uppercase; }

/* open a pack */
.mypack { position: relative; min-height: 300px; border: 3px solid var(--ink); border-radius: 20px; background: radial-gradient(70% 60% at 50% 50%, #3a2a7a, #241a4d 70%); overflow: hidden; display: grid; place-items: center; }
.mypack__pack { border: 0; background: none; padding: 0; cursor: pointer; width: 150px; transition: transform .3s var(--ease-spring); animation: drift 3s ease-in-out infinite alternate; }
.mypack__pack img { width: 100%; height: auto; border-radius: 8px; }
.mypack__pack:hover { transform: scale(1.08) rotate(-4deg); }
.mypack.open .mypack__pack { opacity: 0; transform: translateY(-120%) rotate(20deg); pointer-events: none; transition: transform .5s ease-in, opacity .4s; }
.mypack__cards { position: absolute; inset: 14px; display: flex; justify-content: center; align-items: center; gap: 1.5%; pointer-events: none; }
.mypack.open .mypack__cards { pointer-events: auto; }
.mycard { position: relative; flex: 0 1 19%; aspect-ratio: 750 / 1050; border: 0; padding: 0; background: none; cursor: pointer; perspective: 600px; animation: dealin .5s var(--ease-spring) both; animation-delay: calc(var(--i) * 90ms + 250ms); }
@keyframes dealin { from { transform: translateY(80%) scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
.mycard__in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .55s var(--ease-out); transform: rotateY(180deg); }
.mycard.flipped .mycard__in { transform: rotateY(0); }
.mycard__face, .mycard__back { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 6px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.mycard__back { transform: rotateY(180deg); }
.mycard:hover .mycard__in { translate: 0 -6px; }
.mycard__rar { position: absolute; left: 50%; bottom: -26px; translate: -50% 0; white-space: nowrap; font: 400 .72rem/1 "Lilita One", sans-serif; text-transform: uppercase; letter-spacing: .05em; color: var(--ink); background: var(--cream); border: 2px solid var(--ink); border-radius: 999px; padding: .3em .55em; opacity: 0; transition: opacity .3s .3s; }
.mycard.flipped .mycard__rar { opacity: 1; }
.mycard.r-rare .mycard__rar { background: #4ab8ff; }
.mycard.r-epic .mycard__rar { background: #b46bff; color: var(--cream); }
.mycard.r-legendary .mycard__rar, .mycard.r-mythic .mycard__rar { background: var(--gold); }
.mycard.flipped.r-legendary .mycard__face, .mycard.flipped.r-mythic .mycard__face { box-shadow: 0 0 0 2px #ffd34a, 0 0 22px 6px rgba(255, 205, 70, .8); animation: legend-pulse 1.6s ease-in-out infinite; }
.mycard.flipped.r-mythic .mycard__face { box-shadow: 0 0 0 2px #ff7ad0, 0 0 26px 8px rgba(255, 120, 210, .8); }
.mypack__msg { margin: 0; text-align: center; font: 400 1.1rem/1.2 "Lilita One", sans-serif; }

/* roll a world */
.worldcard { min-height: 300px; display: grid; align-content: center; gap: 8px; padding: 22px; border: 3px solid var(--ink); border-radius: 20px; background: linear-gradient(135deg, #fff6dc, #ffe6a8); }
.worldcard.rolled { animation: rolled .45s var(--ease-spring); }
@keyframes rolled { 30% { transform: rotate(-1.5deg) scale(.98); } }
.worldcard__seed { margin: 0 0 6px; font: 400 .95rem/1 "Lilita One", sans-serif; text-transform: uppercase; letter-spacing: .06em; color: #0a7a46; }
.worldcard__seed b { font-weight: 400; font-variant-numeric: tabular-nums; }
.worldcard__line { margin: 0; font: 400 clamp(1.15rem, 1.8vw, 1.45rem)/1.25 "Lilita One", sans-serif; }
.worldcard__line b { font-weight: 400; color: #b8321f; display: inline-block; }
.worldcard__line b.new { animation: popin .4s var(--ease-spring); }
.worldcard__line--hero { margin-top: 6px; }

/* ---------- meet the bosses ---------- */
.bosses { padding: 130px clamp(16px, 5vw, 80px) 120px; }
.roster { max-width: 1180px; margin: 0 auto; }
.roster__stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(20px, 4vw, 60px); background: var(--paper); border: 4px solid var(--ink); border-radius: 34px; padding: clamp(18px, 3vw, 34px); box-shadow: 0 12px 0 rgba(36, 21, 12, .4); }
.roster__stage.swap .roster__art img, .roster__stage.swap .roster__info { animation: popin .45s var(--ease-spring); }
.roster__art { position: relative; aspect-ratio: 1; display: grid; place-items: center; border-radius: 26px; background: radial-gradient(circle at 50% 60%, #ffe58a, #ffc21a 70%); border: 3px solid var(--ink); overflow: hidden; }
.roster__art img { width: 92%; height: 92%; object-fit: contain; filter: drop-shadow(0 12px 0 rgba(36, 21, 12, .3)); position: relative; z-index: 1; }
.roster__art video { position: absolute; right: 12px; bottom: 12px; width: 46%; aspect-ratio: 16 / 10; object-fit: cover; border: 3px solid var(--ink); border-radius: 12px; z-index: 2; display: none; box-shadow: 0 6px 0 rgba(36, 21, 12, .4); }
.roster__stage.has-clip .roster__art video { display: block; }
.roster__el { margin: 0; display: inline-block; font: 400 .9rem/1 "Lilita One", sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--cream); background: var(--ink); border-radius: 999px; padding: .45em .8em .4em; }
.roster__name { margin: 14px 0 10px; font: 400 clamp(1.8rem, 3.6vw, 3.2rem)/1 "Lilita One", sans-serif; text-transform: uppercase; color: var(--ink); }
.roster__how { margin: 0; font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.5; color: #4a3020; }
.roster__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.boss-tab { display: grid; justify-items: center; gap: 6px; width: 112px; padding: 8px 6px 10px; border: 3px solid var(--ink); border-radius: 18px; background: var(--paper); cursor: pointer; box-shadow: 0 5px 0 var(--ink); transition: transform .25s var(--ease-spring), background .2s; font: 400 .8rem/1.05 "Lilita One", sans-serif; text-transform: uppercase; color: var(--ink); }
.boss-tab img { width: 76px; height: 76px; object-fit: contain; }
.boss-tab:hover { transform: translateY(-4px) rotate(-2deg); }
.boss-tab.on { background: var(--ink); color: var(--gold); transform: translateY(-4px); }
@media (max-width: 760px) {
  .roster__stage { grid-template-columns: 1fr; }
  .boss-tab { width: 84px; } .boss-tab img { width: 56px; height: 56px; }
}

/* ---------- questions + follow ---------- */
.faq { padding: 120px clamp(16px, 5vw, 80px) 120px; display: grid; justify-items: center; gap: 36px; }
.faq__list { width: min(820px, 100%); display: grid; gap: 14px; }
.faq details { background: var(--paper); color: var(--ink); border: 4px solid var(--ink); border-radius: 22px; box-shadow: 0 6px 0 rgba(0, 0, 0, .35); overflow: hidden; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 22px; font: 400 1.3rem/1.1 "Lilita One", sans-serif; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.6rem; line-height: 1; transition: transform .3s var(--ease-spring); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 22px 20px; font-size: 1.08rem; line-height: 1.55; color: #4a3020; }
.follow { text-align: center; }
.follow__title { margin: 0 0 14px; font: 400 1.4rem/1 "Lilita One", sans-serif; text-transform: uppercase; }
.follow__links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.follow__soon { cursor: default; opacity: .8; }
.follow__soon:hover { transform: none; box-shadow: 0 4px 0 rgba(59, 35, 20, .45); }

/* ---------- Gribble the narrator ---------- */
.narrator { position: fixed; z-index: 60; left: clamp(10px, 2vw, 24px); bottom: clamp(10px, 2vw, 22px); display: flex; align-items: flex-end; gap: 6px; pointer-events: none; transition: transform .45s var(--ease-spring), opacity .3s; }
.narrator.away, .narrator.by-foot { transform: translateY(130%); opacity: 0; }
.narrator__face { pointer-events: auto; width: 74px; height: 74px; border-radius: 50%; border: 3px solid var(--ink); background: var(--gold); padding: 0; overflow: hidden; cursor: pointer; box-shadow: 0 5px 0 var(--ink); display: grid; place-items: start center; }
.narrator__face img { width: 118%; max-width: none; margin-top: 4%; }
.narrator__bubble { pointer-events: auto; position: relative; max-width: min(300px, 64vw); margin: 0 0 30px; padding: 10px 14px 11px; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 16px 16px 16px 4px; box-shadow: 0 5px 0 var(--ink); font-weight: 800; font-size: .95rem; line-height: 1.35; transform-origin: 0 100%; }
.narrator__who { display: block; font: 400 .8rem/1 "Lilita One", sans-serif; text-transform: uppercase; letter-spacing: .06em; color: #2f7a25; margin-bottom: 3px; }
.narrator.talk .narrator__bubble { animation: popin .45s var(--ease-spring); }
.narrator.quiet .narrator__bubble { display: none; }
.narrator.quiet .narrator__face { filter: grayscale(.6); }
@media (max-width: 560px) { .narrator__face { width: 56px; height: 56px; } .narrator__bubble { font-size: .85rem; margin-bottom: 22px; } }

@media (prefers-reduced-motion: reduce) {
  .narrator { transition: none; }
}
@media (max-width: 560px) {
  .dodge { height: 280px; }
  .dodge__boss { width: 104px; }
  .dodge__hero { width: 50px; }
  .dodge__msg { top: 108px; font-size: 1.05rem; }
  .dodge__floor { height: 96px; }
  /* phones: Gribble pipes up at each section, then tucks his bubble away */
  .narrator:not(.talk) .narrator__bubble { opacity: 0; transform: scale(.6); pointer-events: none; }
  .narrator__bubble { transition: opacity .3s, transform .3s; }
}
@media (max-width: 860px) { .stats__skip { top: 74px; bottom: auto; right: 12px; font-size: .72rem; } }