/* The multipage site: page links and the phone sheet, the ink veil between pages, the home page's moon gates,
   the visit notes, and the temple fair with its five games. Builds on style.css. */

/* Entrance animations move transforms that hover effects also transition; while one plays the hover transition is
   off, or the two fight and the element settles part-way. */
.is-revealing { transition: none !important; }

/* ---------- the veil: lacquer sweeps up over the page on the way out and lifts off the next one ---------- */
html::after { content: ""; position: fixed; inset: 0; z-index: 280; pointer-events: none; background: radial-gradient(70% 60% at 50% 50%, #2a140d, var(--lacquer));
  clip-path: inset(100% 0 0 0); transition: clip-path .5s cubic-bezier(.7, 0, .3, 1); }
html.veil-out::after { clip-path: inset(0 0 0 0); pointer-events: auto; }
html.veil-in::after { clip-path: inset(0 0 0 0); transition: none; animation: veil-safety .85s cubic-bezier(.7, 0, .3, 1) 3s forwards; } /* lifts by itself if the scripts never arrive */
@keyframes veil-safety { to { clip-path: inset(0 0 100% 0); } }
html.veil-in.veil-lift::after { clip-path: inset(0 0 100% 0); transition: clip-path .85s cubic-bezier(.7, 0, .3, 1) .08s; }
.veil { position: fixed; inset: 0; z-index: 281; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .35s; }
html.veil-out .veil, html.veil-in:not(.veil-lift) .veil { opacity: 1; }
.veil__seal { width: 84px; height: 84px; font-size: 32px; transform: rotate(-6deg); }

/* ---------- nav: page links, the burger and the phone sheet ---------- */
.nav__links { gap: 26px; }
.nav__link { display: inline-flex; align-items: baseline; gap: 7px; }
.nav__link-cn { font-family: var(--brush); font-size: 17px; letter-spacing: 0; color: var(--seal); text-transform: none; transition: transform .4s var(--ease); }
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__link:hover .nav__link-cn { transform: translateY(-2px) rotate(-6deg); }
.nav__burger { display: none; }
.nav__burger span, .nav__burger span::before { display: block; width: 18px; height: 1.5px; background: currentColor; position: relative; transition: transform .4s var(--ease), background .2s; }
.nav__burger span::before { content: ""; position: absolute; left: 0; top: 6px; }
.nav__burger span { transform: translateY(-3px); }
.nav__burger[aria-expanded="true"] span { transform: translateY(0) rotate(45deg); }
.nav__burger[aria-expanded="true"] span::before { transform: translateY(-6px) rotate(-90deg); }
.nav-sheet { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; justify-content: center; gap: 28px;
  padding: calc(100px + env(safe-area-inset-top, 0px)) var(--gutter) calc(40px + env(safe-area-inset-bottom, 0px));
  background: radial-gradient(90% 60% at 80% 10%, rgba(200, 50, 31, .3), transparent 60%), var(--lacquer); overflow-y: auto; }
.nav-sheet nav { display: grid; }
.sheet__link { display: flex; align-items: center; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--brass-line); text-decoration: none;
  font-family: var(--display); font-weight: 900; font-size: clamp(40px, 11vw, 76px); line-height: .95; text-transform: uppercase; color: var(--paper); }
.sheet__link-cn { font-family: var(--brush); font-weight: 400; font-size: .36em; line-height: 1.05; color: var(--seal); writing-mode: vertical-rl; flex: none; width: 1.2em; }
.sheet__link[aria-current="page"] { color: var(--brass); }
.sheet__foot { margin: 0; font-family: var(--brush); font-size: 20px; letter-spacing: .3em; color: var(--brass); }
body.sheet-open .nav, body.sheet-open .nav.on-paper { color: var(--paper); background: none; transform: none; }
body.sheet-open .nav .lang, body.sheet-open .nav .icon-btn { border-color: var(--brass-line); }
@media (max-width: 1100px) { .nav__burger { display: grid; } }

/* ---------- footer page links ---------- */
.footer__pages { max-width: 1320px; margin: 0 auto 54px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 36px; }
.footer__pages a { font-family: var(--ui); font-weight: 700; font-size: 14px; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--mist); transition: color .3s; }
.footer__pages a:hover { color: var(--paper); }
.footer__pages span[lang] { font-family: var(--brush); font-size: 19px; letter-spacing: 0; color: var(--seal); margin-right: 4px; }

/* ---------- home: the moon gates ---------- */
.gates { position: relative; z-index: 2; padding: 170px var(--gutter) 150px; overflow: hidden;
  background: radial-gradient(60% 50% at 50% 0%, rgba(140, 40, 18, .3), transparent 70%), var(--lacquer); }
.gates__head { max-width: 1320px; margin: 0 auto 72px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: 16px 60px; align-items: end; }
.gates__head .title { margin: 0; }
.gates__row { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 26px; }
.gate { display: flex; flex-direction: column; gap: 24px; text-decoration: none; color: var(--paper); }
/* a whitewashed garden wall under a tiled coping, with the round doorway cut through it */
.gate__ring { position: relative; aspect-ratio: 4 / 5; border-radius: 3px; overflow: hidden; transition: transform .8s var(--ease), box-shadow .8s var(--ease);
  background:
    linear-gradient(#211a17, #211a17) top / 100% 6% no-repeat,
    repeating-linear-gradient(90deg, #463a33 0 9px, #2a221e 9px 18px) 0 6% / 100% 5% no-repeat,
    linear-gradient(rgba(0, 0, 0, .28), transparent) 0 11% / 100% 8% no-repeat,
    radial-gradient(120% 90% at 30% 20%, #efe8da, #d8cdb8 80%);
  box-shadow: 0 50px 80px -46px #000, inset 0 -30px 40px -30px rgba(60, 40, 20, .35); }
.gate__ring::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .06' numOctaves='3' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .42 0 0 0 0 .32 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23w)'/%3E%3C/svg%3E"); }
.gate__view { position: absolute; left: 13%; right: 13%; top: 25%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; clip-path: circle(50% at 50% 50%); background: #120a07;
  box-shadow: inset 0 10px 30px rgba(0, 0, 0, .65); outline: 7px solid #c9bea9; outline-offset: 0; }
.gate__view > * { transition: transform 1.2s var(--ease); }
.gate:hover .gate__ring { transform: translateY(-8px); box-shadow: 0 60px 90px -46px #000, inset 0 -30px 40px -30px rgba(60, 40, 20, .35); }
.gate:hover .gate__view > * { transform: scale(1.08); }
.gate__view--menu { background: radial-gradient(circle at 50% 42%, #6b3119, #1a0d08 74%); }
.gate__view--menu img { width: 100%; height: 100%; object-fit: contain; padding: 4%; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .55)); }
.gate__view--story svg { width: 100%; height: 100%; display: block; }
.gate__view--play { display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #7a1d10, #1a0806 72%); }
.gate__fu { width: 52%; aspect-ratio: 1; display: grid; place-items: center; background: var(--seal); transform: rotate(45deg);
  box-shadow: inset 0 0 0 4px #9c2414, inset 0 0 0 6px rgba(255, 214, 150, .7), 0 18px 30px -12px rgba(0, 0, 0, .7); }
.gate__fu b { font-family: var(--brush); font-weight: 400; font-size: clamp(40px, 5vw, 72px); line-height: 1; color: #1b0e0a; transform: rotate(135deg); } /* upside down: fortune has arrived */
.gate__view--visit { background: radial-gradient(circle at 50% 30%, #2c3550, #10131e 75%); }
.gate__view--visit svg { width: 100%; height: 100%; display: block; }
.gate__clock circle { fill: none; stroke: var(--brass); stroke-width: 2; }
.gate__clock circle + circle { stroke-opacity: .5; }
.gate__clock line, .gate__clock path { stroke: var(--brass); stroke-width: 2; stroke-linecap: round; fill: none; }
.gate__seals rect { fill: var(--seal); }
.gate__seals text { font-family: var(--brush); font-size: 22px; fill: #fff1dc; text-anchor: middle; }
.gate__num { margin: 0 0 8px; font-family: var(--brush); font-size: 18px; letter-spacing: .1em; color: var(--brass); }
.gate__title { margin: 0 0 10px; font-family: var(--display); font-weight: 900; font-size: clamp(34px, 3vw, 46px); line-height: .9; text-transform: uppercase; }
.gate__text { margin: 0; font-size: 16px; color: var(--mist); }
.gate__title::after { content: " →"; color: var(--seal); display: inline-block; transition: transform .5s var(--ease); }
.gate:hover .gate__title::after { transform: translateX(8px); }

/* ---------- home: house favourites ---------- */
.favs { padding: 150px var(--gutter) 140px; }
.favs__head { max-width: 1320px; margin: 0 auto 60px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; }
.favs__head .title { margin: 0; }
.favs__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.favs .dish--signature { grid-column: auto; display: flex; }
.favs .dish--signature .dish__name { font-size: 28px; }

/* ---------- visit: notes ---------- */
.visit__more { max-width: 1320px; margin: 70px auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 36px; }
.vm { display: flex; gap: 18px; padding-top: 22px; border-top: 2px solid var(--ink); }
.vm__cn { font-family: var(--brush); font-size: 56px; line-height: .9; color: var(--seal); flex: none; }
.vm h2 { margin: 2px 0 10px; font-family: var(--display); font-weight: 900; font-size: 26px; line-height: 1; text-transform: uppercase; }
.vm p { margin: 0; font-size: 16px; color: var(--ink-soft); }

/* ---------- menu: the pinned filter bar ---------- */
/* Pinned, the bar sits just under the nav; when the nav slides away on the way down, the bar rises to the top edge.
   A strip of paper behind it (.menu__shade, pinned the same way) hides the dishes scrolling past above. */
.menu__pin { height: 0; }
.menu__bar { transition: top .5s var(--ease), box-shadow .4s; }
body.nav-hidden .menu__bar { top: calc(12px + env(safe-area-inset-top, 0px)); }
.menu__shade { position: sticky; top: calc(78px + env(safe-area-inset-top, 0px)); z-index: 9; height: 0; transition: top .5s var(--ease); }
body.nav-hidden .menu__shade { top: calc(12px + env(safe-area-inset-top, 0px)); }
/* reaches down behind the bar's top half too, so nothing shows past its rounded ends */
.menu__shade::before { content: ""; position: absolute; left: calc(50% - 50vw); width: 100vw; bottom: -24px; height: 180px; pointer-events: none;
  opacity: 0; transition: opacity .3s;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .3 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23p)'/%3E%3C/svg%3E"), var(--paper);
  background-blend-mode: multiply; }
.menu__shade.is-on::before { opacity: 1; }
@media (max-width: 760px) { .menu__shade { top: calc(66px + env(safe-area-inset-top, 0px)); } .menu__shade::before { bottom: -20px; } }
.menu__bar.is-stuck { box-shadow: 0 14px 34px -16px rgba(27, 19, 16, .5); }

/* ---------- page heads ---------- */
.phead { position: relative; max-width: 1320px; margin: 0 auto 64px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 52px; align-items: end; }
.phead__glyphs { margin: 0; display: flex; flex-direction: column; font-family: var(--brush); font-size: clamp(96px, 11vw, 170px); line-height: .9; color: var(--seal); text-shadow: 0 0 70px rgba(200, 50, 31, .35); }
.phead__glyph { display: block; }
.phead .title { margin-bottom: 18px; }

/* ---------- the temple fair ---------- */
.fair { position: relative; z-index: 2; padding: 170px var(--gutter) 150px; overflow: hidden;
  background: radial-gradient(110% 55% at 50% 0%, rgba(170, 42, 20, .42), transparent 62%), var(--lacquer); }
.fair > :not(.fair__lanterns) { position: relative; }
/* a string of red lanterns across the top of the page */
.fair__lanterns { position: absolute; top: 0; left: 0; right: 0; height: 240px; display: flex; justify-content: space-around; pointer-events: none; }
.fair__lanterns i { position: relative; width: 38px; height: 46px; margin-top: 70px; border-radius: 45% / 50%; transform-origin: 50% -70px; animation: sway 6s ease-in-out infinite;
  background: radial-gradient(circle at 50% 38%, #ffb36b, #e04428 46%, #8d1b10 80%); box-shadow: 0 0 46px rgba(255, 110, 50, .55), inset 0 0 0 1px rgba(0, 0, 0, .15); }
.fair__lanterns i::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 120px; background: rgba(201, 160, 82, .45); }
.fair__lanterns i::after { content: ""; position: absolute; left: 50%; top: 100%; width: 3px; height: 16px; margin-left: -1.5px; background: linear-gradient(#d9a22e, rgba(217, 162, 46, 0)); }
.fair__lanterns i:nth-child(2n) { margin-top: 40px; animation-delay: -1.5s; }
.fair__lanterns i:nth-child(3n) { margin-top: 96px; animation-delay: -3s; transform: scale(.8); }
.fair__lanterns i:nth-child(4n+1) { animation-duration: 7.5s; }
@keyframes sway { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }

/* the fair card: one seal per booth */
.faircard { max-width: 1320px; margin: 0 auto 90px; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 22px 44px; align-items: center;
  padding: 30px 34px; border-radius: 18px; background: var(--paper); color: var(--ink); box-shadow: 0 40px 80px -46px #000; transition: box-shadow .6s; }
.faircard::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .55; mix-blend-mode: multiply;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .3 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23p)'/%3E%3C/svg%3E"); }
.faircard > * { position: relative; }
.faircard.is-full { box-shadow: 0 0 0 2px var(--brass), 0 0 60px rgba(201, 160, 82, .35), 0 40px 80px -46px #000; }
.faircard .kicker { color: var(--seal-deep); margin-bottom: 8px; }
.faircard__count { margin: 0 0 6px; font-family: var(--display); font-weight: 900; font-size: 36px; line-height: 1; text-transform: uppercase; }
.faircard__note { margin: 0; font-size: 15px; color: var(--ink-soft); }
.faircard__slots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.slot { display: grid; justify-items: center; gap: 10px; text-align: center; cursor: pointer; }
.slot__seal { width: 100%; max-width: 88px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px; border: 2px dashed rgba(27, 19, 16, .24);
  font-family: var(--brush); font-size: 34px; line-height: 1; color: rgba(27, 19, 16, .28); transition: transform .4s var(--ease), border-color .3s; }
.slot:hover .slot__seal { border-color: var(--seal); transform: rotate(-4deg); }
.slot.is-stamped .slot__seal { position: relative; border: 0; background: var(--seal); color: #fbeee0; font-size: 19px; writing-mode: vertical-rl; transform: rotate(-6deg);
  box-shadow: inset 0 0 0 3px rgba(255, 236, 214, .32), inset 0 0 0 6px var(--seal); }
.slot.is-stamped .slot__seal b { font-weight: 400; font-size: 1.35em; color: #ffd9a8; }
.slot__name { font-family: var(--ui); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }

/* the booths: striped awnings, a swinging lantern each */
.hall { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 46px 22px; }
.booth { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 78px 22px 24px; border-radius: 6px 6px 14px 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 30%, #1a100c), #140c09 72%); border: 1px solid rgba(201, 160, 82, .2);
  box-shadow: inset 0 1px 0 rgba(255, 220, 180, .08), 0 40px 70px -40px #000; transition: transform .7s var(--ease); }
.booth:hover { transform: translateY(-8px); }
.booth::before { content: ""; position: absolute; left: -8px; right: -8px; top: -16px; height: 38px; border-radius: 8px 8px 3px 3px;
  background: repeating-linear-gradient(90deg, var(--tint) 0 22px, #f1e2c4 22px 44px); box-shadow: 0 10px 18px -8px rgba(0, 0, 0, .7); }
.booth::after { content: ""; position: absolute; left: -8px; right: -8px; top: 22px; height: 12px;
  background: radial-gradient(circle at 11px 0, var(--tint) 10.5px, transparent 11px) 0 0 / 44px 12px repeat-x,
              radial-gradient(circle at 33px 0, #f1e2c4 10.5px, transparent 11px) 0 0 / 44px 12px repeat-x; }
.booth__lantern { position: absolute; top: 34px; right: 16px; width: 44px; height: 54px; display: grid; place-items: center; border-radius: 44% / 50%; transform-origin: 50% -14px;
  background: radial-gradient(circle at 50% 38%, #ffb36b, #e04428 46%, #8d1b10 82%); box-shadow: 0 0 34px rgba(255, 110, 50, .5); animation: sway 5s ease-in-out infinite; }
.booth:nth-child(2n) .booth__lantern { animation-delay: -2s; }
.booth__lantern i { position: absolute; bottom: 100%; left: 50%; width: 1px; height: 14px; background: #d9a22e; }
.booth__lantern::before, .booth__lantern::after { content: ""; position: absolute; left: 22%; right: 22%; height: 5px; border-radius: 2px; background: #d9a22e; }
.booth__lantern::before { top: -2px; }
.booth__lantern::after { bottom: -2px; }
.booth__lantern span { font-family: var(--brush); font-size: 24px; color: #ffe2b0; text-shadow: 0 0 10px rgba(255, 200, 120, .8); }
.booth__num { margin: 0; font-family: var(--brush); font-size: 22px; color: var(--brass); }
.booth__title { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(28px, 2.3vw, 36px); line-height: .92; text-transform: uppercase; text-wrap: balance; }
.booth__kicker { margin: 0; font-family: var(--ui); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
.booth__desc { margin: 4px 0 10px; flex: 1; font-size: 16px; line-height: 1.5; color: var(--mist); }
.booth__play { width: 100%; }
.booth__play span { font-family: var(--brush); font-size: 20px; letter-spacing: 0; }

/* ---------- the arena: a game, full screen ---------- */
.arena { position: fixed; inset: 0; z-index: 100; }
.arena__panel { position: absolute; inset: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  background: radial-gradient(100% 60% at 50% 0%, color-mix(in srgb, var(--tint, #c8321f) 30%, transparent), transparent 70%), var(--lacquer); }
.arena__head { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 16px; padding: calc(14px + env(safe-area-inset-top, 0px)) var(--gutter) 14px;
  background: rgba(14, 9, 7, .82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--brass-line); }
.arena__head .seal { width: 52px; height: 52px; font-size: 20px; }
.arena__titles { flex: 1; min-width: 0; }
.arena__titles .kicker { margin: 0 0 4px; font-size: 11px; }
#arenaTitle { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(26px, 3vw, 40px); line-height: .95; text-transform: uppercase; }
.arena__body { flex: 1; display: flex; flex-direction: column; padding: 26px var(--gutter) calc(40px + env(safe-area-inset-bottom, 0px)); }
.arena__loading { margin: auto; font-family: var(--brush); font-size: 64px; color: var(--seal); }
.arena .btn { height: 50px; padding: 0 22px; font-size: 14px; }
.arena .btn--ghost.on-paper, .gq__slip .btn--ghost, .gz__out .btn--ghost, .gm__end .btn--ghost { border-color: rgba(27, 19, 16, .3); color: var(--ink); }

/* ---------- game: the pull ---------- */
.gp { position: relative; flex: 1; min-height: min(76vh, 780px); border-radius: 20px; overflow: hidden; background: #1a120d; isolation: isolate; }
.gp__stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer; touch-action: manipulation; }
.gp__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(14, 9, 7, .55), transparent 24%, transparent 62%, rgba(14, 9, 7, .7)); }
.gp__hud { position: absolute; top: 20px; left: 24px; right: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 20px; pointer-events: none; }
.gp__count { margin: 0; font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .85; }
.gp__num { display: inline-block; font-size: clamp(64px, 9vw, 120px); font-variant-numeric: tabular-nums; }
.gp__unit { font-size: 22px; letter-spacing: .08em; color: var(--brass); }
.gp__folds { list-style: none; display: flex; gap: 6px; margin: 8px 0 0; padding: 0; }
.gp__folds li { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--brass-line); font-family: var(--brush); font-size: 15px; color: var(--mist); transition: background .3s, color .3s, border-color .3s; }
.gp__folds li.is-done { background: var(--seal); border-color: var(--seal); color: #fff3e6; }
.gp__lives { margin: 8px 0 0; display: flex; align-items: center; gap: 10px; font-family: var(--ui); font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--mist); }
.gp__hearts { display: flex; gap: 6px; }
.gp__hearts i { width: 14px; height: 17px; border-radius: 45% / 50%; background: radial-gradient(circle at 50% 38%, #ffb36b, #e04428 50%, #8d1b10); box-shadow: 0 0 12px rgba(255, 110, 50, .6); transition: opacity .4s, filter .4s; }
.gp__hearts i.is-lost { opacity: .25; filter: grayscale(1); box-shadow: none; }
.gp__dial { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(440px, calc(100% - 32px)); display: grid; justify-items: center; gap: 4px; }
.gp__dial svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .7)); }
.gp__track { fill: none; stroke: rgba(14, 9, 7, .6); stroke-width: 20; stroke-linecap: round; }
.gp__tick { stroke: rgba(239, 229, 208, .45); stroke-width: 1.5; }
.gp__zone { fill: none; stroke: var(--seal); stroke-width: 20; }
.gp__sweet { fill: none; stroke: #ffcf7a; stroke-width: 20; }
.gp__needle { transform-box: view-box; transform-origin: 150px 156px; }
.gp__needle line { stroke: var(--paper); stroke-width: 4; stroke-linecap: round; }
.gp__needle circle { fill: var(--brass); }
.gp__call { position: absolute; left: 0; right: 0; top: 26%; margin: 0; min-height: 1.1em; text-align: center; pointer-events: none;
  font-family: var(--display); font-weight: 900; font-size: 32px; letter-spacing: .04em; text-transform: uppercase; text-shadow: 0 4px 20px rgba(0, 0, 0, .8); }
.gp__call[data-kind="perfect"] { color: #ffcf7a; }
.gp__call[data-kind="miss"] { color: #ff7a5e; }
.gp__strike { min-width: 210px; }
.gp__strike span { font-family: var(--brush); font-size: 22px; letter-spacing: 0; }
.gp__card { position: absolute; inset: 0; z-index: 3; margin: auto; width: min(470px, calc(100% - 32px)); height: fit-content; display: grid; justify-items: center; gap: 14px;
  padding: 34px 30px; border-radius: 18px; text-align: center; background: rgba(14, 9, 7, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--brass-line); }
.gp__big { margin: 0; font-family: var(--brush); font-size: 110px; line-height: .9; color: var(--seal); text-shadow: 0 0 50px rgba(200, 50, 31, .4); }
.gp__how { margin: 0; font-size: 16px; color: var(--mist); }
.gp__grade { width: 96px; height: 96px; font-size: 34px; }
.gp__grade.is-torn { background: #4a3a33; box-shadow: inset 0 0 0 2px rgba(255, 236, 214, .2), inset 0 0 0 5px #4a3a33; }
.gp__end-title { margin: 0; font-family: var(--display); font-weight: 900; font-size: 34px; line-height: .95; text-transform: uppercase; }
.gp__end-text { margin: 0; color: var(--mist); font-size: 16px; }
.gp__end-acts, .gm__end-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ---------- game: the brush ---------- */
.gb { width: 100%; max-width: 1120px; margin: 0 auto; display: grid; gap: 20px; }
.gb__pick { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.gb__chip { width: 58px; height: 58px; border-radius: 12px; border: 1px solid var(--brass-line); font-family: var(--brush); font-size: 32px; line-height: 1; transition: background .3s, color .3s, border-color .3s; }
.gb__chip:hover { border-color: var(--brass); }
.gb__chip[aria-checked="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.gb__desk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 34px; align-items: start; }
.gb__sheet { position: relative; justify-self: center; width: min(100%, 64vh, 620px); aspect-ratio: 1; border-radius: 4px;
  box-shadow: 0 0 0 10px #3a2418, 0 0 0 11px rgba(201, 160, 82, .4), 0 50px 80px -30px #000; }
.gb__paper, .gb__ink { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
.gb__ink { touch-action: none; cursor: crosshair; }
.gb__grade { position: absolute; right: 7%; top: 7%; width: 76px; height: 76px; font-size: 26px; pointer-events: none; }
.gb__grade.is-low { background: #5a4a40; box-shadow: inset 0 0 0 2px rgba(255, 236, 214, .2), inset 0 0 0 5px #5a4a40; }
.gb__side { display: grid; gap: 12px; }
.gb__char { margin: 0; font-family: var(--brush); font-size: 100px; line-height: .9; color: var(--seal); }
.gb__py { margin: 0; font-family: var(--ui); font-weight: 700; font-size: 18px; letter-spacing: .2em; color: var(--brass); }
.gb__about { margin: 0; color: var(--mist); }
.gb__tip { margin: 0; font-size: 15px; font-style: italic; color: rgba(239, 229, 208, .55); }
.gb__score { margin: 0; min-height: 1.1em; font-family: var(--display); font-weight: 900; font-size: 28px; line-height: 1; text-transform: uppercase; }
.gb__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.gb__acts .btn { height: 46px; padding: 0 18px; font-size: 13px; }

/* ---------- game: pairs ---------- */
/* sized so all sixteen cards fit on one screen */
.gm { width: 100%; max-width: max(320px, min(660px, calc((100svh - 270px) * .75))); margin: 0 auto; display: grid; gap: 16px; }
.gm__bar { display: flex; align-items: center; gap: 22px; }
.gm__stat { margin: 0; font-family: var(--ui); font-weight: 700; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); font-variant-numeric: tabular-nums; }
.gm__new { margin-left: auto; }
.arena .gm__new { height: 42px; padding: 0 16px; font-size: 12px; }
.gm__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; perspective: 1200px; }
.pc { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; }
.pc__in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .65s var(--ease); }
.pc.is-up .pc__in { transform: rotateY(180deg); }
.pc:not(.is-up):hover .pc__in { transform: rotateY(12deg) translateY(-3px); }
.pc__back, .pc__front { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* the back: a red window lattice with a paper medallion */
.pc__back { background:
    repeating-linear-gradient(45deg, transparent 0 13px, rgba(255, 214, 150, .32) 13px 15px),
    repeating-linear-gradient(-45deg, transparent 0 13px, rgba(255, 214, 150, .32) 13px 15px), var(--seal);
  box-shadow: inset 0 0 0 4px #8d1b10, inset 0 0 0 6px rgba(255, 214, 150, .55), 0 14px 24px -14px #000; }
.pc__back i { width: 52%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--seal-deep); box-shadow: 0 0 0 3px rgba(255, 214, 150, .6);
  font-family: var(--brush); font-style: normal; font-size: clamp(20px, 4vw, 32px); color: #fff1dc; }
.pc__front { transform: rotateY(180deg); background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(27, 19, 16, .15), 0 14px 24px -14px #000; }
.pc__front img { width: 86%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.pc__front--word { align-content: center; gap: 6px; padding: 6px; text-align: center; }
.pc__front--word b { font-family: var(--brush); font-weight: 400; font-size: clamp(22px, 5vw, 38px); line-height: 1.05; color: var(--seal); }
.pc__front--word small { font-family: var(--ui); font-weight: 700; font-size: 12px; letter-spacing: .06em; color: var(--ink-soft); }
.pc.is-done .pc__front { box-shadow: inset 0 0 0 3px var(--jade), 0 0 24px rgba(79, 125, 106, .5); }
.gm__learnt { margin: 0; min-height: 1.6em; text-align: center; color: var(--mist); }
.gm__learnt b { font-family: var(--brush); font-weight: 400; font-size: 24px; color: var(--seal); margin-right: 6px; }
.gm__end { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: start; padding: 26px 28px; border-radius: 16px; background: var(--paper); color: var(--ink); }
.gm__grade { width: 86px; height: 86px; font-size: 30px; }
.gm__end-title { margin: 0 0 6px; font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1; text-transform: uppercase; }
.gm__end-text { margin: 0; color: var(--ink-soft); }
.gm__words { list-style: none; margin: 14px 0 18px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px 14px; }
.gm__words li { display: grid; }
.gm__words b { font-family: var(--brush); font-weight: 400; font-size: 26px; line-height: 1.1; color: var(--seal); }
.gm__words span { font-family: var(--ui); font-weight: 700; font-size: 13px; letter-spacing: .06em; }
.gm__words small { font-size: 13px; color: var(--ink-soft); }
.gm__end-acts { justify-content: flex-start; }

/* ---------- game: fortune sticks ---------- */
.gq { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }
.gq__altar { position: relative; min-height: 480px; display: grid; place-items: end center; border-radius: 22px; overflow: hidden;
  background: radial-gradient(55% 45% at 50% 42%, rgba(200, 50, 31, .3), transparent 70%), linear-gradient(transparent 70%, rgba(0, 0, 0, .35)); }
.gq__altar::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: 46px; height: 24px; border-radius: 4px; background: linear-gradient(#6a3420, #2c150e); box-shadow: 0 24px 30px -12px #000, inset 0 1px 0 rgba(255, 200, 150, .25); }
.gq__tube { position: relative; z-index: 1; width: 124px; height: 250px; margin-bottom: 68px; transform-origin: 50% 100%; cursor: pointer; }
.gq__body { position: absolute; left: 0; right: 0; bottom: 0; height: 172px; display: grid; place-items: center; border-radius: 12px 12px 18px 18px;
  background: linear-gradient(90deg, #5e1007, #b52a17 26%, #e2563c 42%, #a3220f 68%, #4f0c05);
  box-shadow: inset 0 12px 0 -5px #d9a22e, inset 0 -14px 0 -5px #d9a22e, 0 24px 34px -12px rgba(0, 0, 0, .75); }
.gq__body::before { content: ""; position: absolute; left: 0; right: 0; top: -11px; height: 22px; border-radius: 50%; background: radial-gradient(#140604, #2c0a05); box-shadow: inset 0 0 0 3px #d9a22e; }
.gq__body b { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; border: 2px solid rgba(255, 217, 168, .6); font-family: var(--brush); font-weight: 400; font-size: 52px; color: #ffd9a8; }
.gq__sticks { position: absolute; left: 50%; bottom: 152px; width: 0; height: 100px; }
.gq__sticks i, .gq__drop { border-radius: 3px 3px 1px 1px; background: linear-gradient(90deg, #b48a4e, #ecd4a4 50%, #b48a4e); box-shadow: inset 0 16px 0 -6px #c8321f; }
.gq__sticks i { position: absolute; bottom: 0; left: var(--x); width: 7px; height: calc(64px + var(--h)); margin-left: -3.5px; transform: rotate(var(--r)); transform-origin: 50% 100%; }
.gq__drop { position: absolute; left: 50%; bottom: 150px; z-index: 2; width: 9px; height: 120px; margin-left: -4.5px; opacity: 0; pointer-events: none; }
.gq__drop b { position: absolute; top: 32px; left: 50%; transform: translateX(-50%); writing-mode: vertical-rl; font-family: var(--brush); font-weight: 400; font-size: 11px; color: var(--seal-deep); }
/* a stick of incense smoking beside the tube */
.gq__smoke { position: absolute; left: 20%; bottom: 70px; width: 4px; height: 90px; border-radius: 2px; background: linear-gradient(#ff8a3c 0 4px, #7a2a14 4px); }
.gq__smoke i { position: absolute; bottom: 88px; left: -10px; width: 24px; height: 120px; border-radius: 50%; background: radial-gradient(closest-side, rgba(239, 229, 208, .2), transparent); filter: blur(6px);
  animation: smoke 5s ease-in infinite; opacity: 0; }
.gq__smoke i:nth-child(2) { animation-delay: -1.7s; }
.gq__smoke i:nth-child(3) { animation-delay: -3.4s; }
@keyframes smoke { 0% { opacity: 0; transform: translate(0, 40px) scale(.5); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(14px, -80px) scale(1.4, 1.8); } }
.gq__side { display: grid; justify-items: start; gap: 16px; }
.gq__ask { margin: 0; max-width: 44ch; font-size: 18px; color: var(--mist); }
.gq__slip { position: relative; width: 100%; display: grid; gap: 10px; padding: 28px 30px; border-radius: 4px; background: #f3e6c8; color: var(--ink);
  box-shadow: inset 0 0 0 7px #f3e6c8, inset 0 0 0 8px rgba(200, 50, 31, .55), 0 40px 70px -36px #000; }
.gq__slip header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gq__no { font-family: var(--brush); font-size: 28px; color: var(--seal-deep); }
.gq__rank { writing-mode: horizontal-tb; padding: 8px 10px; font-size: 18px; }
.gq__idiom { margin: 0; font-family: var(--brush); font-size: clamp(40px, 5vw, 66px); line-height: 1.05; }
.gq__py { margin: 0; font-family: var(--ui); font-weight: 700; font-size: 14px; letter-spacing: .1em; color: var(--seal-deep); }
.gq__mean { margin: 0; font-size: 18px; line-height: 1.5; }
.gq__dish { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-top: 8px; padding-top: 16px; border-top: 1px dashed rgba(27, 19, 16, .28); }
.gq__dish img { width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(60, 30, 15, .3)); }
.gq__dish-k { margin: 0; font-family: var(--ui); font-weight: 700; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--seal-deep); }
.gq__dish-name { margin: 3px 0 0; font-family: var(--display); font-weight: 900; font-size: 21px; line-height: 1; text-transform: uppercase; }
.gq__dish .btn { height: 44px; padding: 0 16px; font-size: 12px; }

/* ---------- game: the zodiac wheel ---------- */
.gz { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.gz__wheel svg { display: block; width: min(100%, 520px); margin: 0 auto; overflow: visible; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .65)); }
.gz__rim { fill: #1d120d; stroke: var(--brass); stroke-width: 2; }
.gz__band { fill: none; stroke: rgba(201, 160, 82, .16); stroke-width: 44; }
.gz__spoke { stroke: rgba(201, 160, 82, .3); stroke-width: 1; }
.gz__branch { font-family: var(--cn); font-size: 15px; fill: var(--brass); text-anchor: middle; dominant-baseline: central; }
.gz__animal { font-family: var(--brush); font-size: 31px; fill: var(--paper); text-anchor: middle; dominant-baseline: central; }
.gz__hub { fill: var(--seal); stroke: #ffd9a8; stroke-opacity: .5; stroke-width: 2; }
.gz__centre { font-family: var(--brush); font-size: 66px; fill: #fbeee0; text-anchor: middle; dominant-baseline: central; }
.gz__pointer { fill: var(--seal); stroke: #ffd9a8; stroke-width: 1.5; }
.gz__form { display: grid; gap: 16px; align-content: start; }
.gz__form .field input { height: 74px; font-family: var(--display); font-weight: 900; font-size: 44px; letter-spacing: .04em; }
.gz__early { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--mist); cursor: pointer; }
.gz__early input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--seal); }
.gz__form > .btn { justify-self: start; }
.gz__out { display: grid; gap: 8px; padding: 26px 28px; border-radius: 16px; background: var(--paper); color: var(--ink); }
.gz__gz { margin: 0; font-family: var(--brush); font-size: 32px; color: var(--seal-deep); }
.gz__name { margin: 0; font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1; text-transform: uppercase; }
.gz__trait { margin: 0; font-size: 18px; }
.gz__year { margin: 0; font-size: 16px; font-style: italic; color: var(--ink-soft); }

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
  .hall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .gates__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .favs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .gates__head, .phead, .faircard { grid-template-columns: minmax(0, 1fr); }
  .phead__glyphs { flex-direction: row; }
  .visit__more { grid-template-columns: minmax(0, 1fr); }
  .hall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gb__desk, .gq, .gz { grid-template-columns: minmax(0, 1fr); }
  /* phones: the sheet first, the buttons and score right under it, the notes after */
  .gb__side { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 16px; }
  .gb__score { order: -2; }
  .gb__acts { order: -1; margin-bottom: 14px; }
  .gb__char { grid-row: span 2; font-size: 72px; }
  .gb__about, .gb__tip, .gb__score, .gb__acts { grid-column: 1 / -1; }
  .gq__altar { min-height: 400px; }
  .gz__wheel svg { width: min(100%, 380px); }
}
@media (max-width: 600px) {
  .gates { padding: 120px var(--gutter) 110px; }
  .gates__row { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .gate { flex-direction: row; align-items: center; gap: 20px; }
  .gate__ring { width: 42%; flex: none; }
  .gate__title { font-size: 32px; }
  .gate__text { font-size: 15px; }
  .favs { padding: 110px var(--gutter) 100px; }
  .fair { padding: 120px var(--gutter) 110px; }
  .fair__lanterns i:nth-child(n+6) { display: none; }
  .faircard { padding: 24px 20px; }
  .faircard__slots { gap: 8px; }
  .slot__seal { font-size: 26px; }
  .slot.is-stamped .slot__seal { font-size: 14px; }
  .slot__name { font-size: 9px; letter-spacing: .08em; }
  .hall { grid-template-columns: minmax(0, 1fr); }
  .arena__head { gap: 12px; }
  .arena__head .seal { width: 42px; height: 42px; font-size: 17px; }
  .arena__body { padding-top: 16px; }
  .gp { min-height: calc(100svh - 120px); border-radius: 14px; }
  .gp__hud { top: 14px; left: 16px; right: 16px; }
  .gp__folds li { width: 22px; height: 22px; font-size: 12px; }
  .gp__call { font-size: 24px; }
  .gm__grid { gap: 7px; }
  .gm__end { grid-template-columns: minmax(0, 1fr); }
  .gq__dish { grid-template-columns: 60px minmax(0, 1fr); }
  .gq__dish img { width: 60px; height: 60px; }
  .gq__dish .btn { grid-column: 1 / -1; }
  .gq__slip { padding: 22px 20px; }
}
/* short windows: the scroll hint would sit on the hero buttons */
@media (max-height: 760px) { .hero__scroll { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .fair__lanterns i, .booth__lantern, .gq__smoke i { animation: none; }
  html::after { transition: none; }
}