/* ============================================================
   Medieval Solutions — the title screen: the centre of the world.
   Rules hang off the left edge, the Example off the right (see
   js/world.js); the council table sits in the middle.
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-ui); }
body { overflow-x: hidden; }

.title {
    max-width: 520px; margin: 0 auto; padding: 22px 24px 40px;
    display: flex; flex-direction: column; align-items: center; text-align: center;
}
.logo-h { margin: 0; line-height: 0; font-size: 1rem; }   /* the page's one heading is the logo itself */
.logo { width: min(100%, 380px); height: auto; image-rendering: pixelated; }
.tagline { margin: 10px 0 0; font-size: 1.05rem; line-height: 1.4; color: var(--ink2); }
.tagline b { color: var(--red); font-family: var(--font-pixel); font-weight: normal; }

/* The council chamber: three councillors behind the table and two in front,
   the ones on the left turned to face the middle. The table sprite is 25×16 (×9). */
.chamber { position: relative; width: 320px; max-width: 100%; height: 200px; margin: 16px 0 4px; }
.chamber .table {
    position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
    width: 225px; height: 144px; image-rendering: pixelated; z-index: 2;
    view-transition-name: council-table;   /* carried into Host / Join (see .council-table) */
}
/* A round in progress on the table top: the trouble, and a solution slapped down either side. */
.table-cards { position: absolute; left: 50%; bottom: 66px; translate: -50% 0; z-index: 2; display: flex; align-items: flex-end; pointer-events: none; }
.table-cards .site-card { width: 40px; }
.table-cards .site-card .card { border-width: 1.5px; box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.table-cards .site-card + .site-card { margin-left: -6px; }
.table-cards .site-card.trouble { width: 46px; margin-bottom: 6px; z-index: 1; }
.table-cards .site-card.trouble .card { border-color: var(--red); }
html:not(.arrived) .table-cards .site-card { animation: deal-in .5s cubic-bezier(.3, 1.35, .5, 1) backwards; }
html:not(.arrived) .table-cards .site-card:nth-child(1) { animation-delay: 1s; }
html:not(.arrived) .table-cards .site-card:nth-child(2) { animation-delay: .85s; }
html:not(.arrived) .table-cards .site-card:nth-child(3) { animation-delay: 1.15s; }
@media (prefers-reduced-motion: reduce) { .table-cards .site-card { animation: none !important; } }
.seats { position: absolute; inset: 0; pointer-events: none; }  /* no stacking context: seats layer around the table */
.seat { position: absolute; animation: bob 2.6s ease-in-out infinite; }
.seat .av { --av: 46px; }
.seat.swap .av { animation: pop .5s ease; }
.seat:nth-child(1) { left: 2px;   bottom: 18px;  animation-delay: -.4s; }
.seat:nth-child(2) { left: 62px;  bottom: 128px; animation-delay: -1.3s; }
.seat:nth-child(3) { left: calc(50% - 23px); bottom: 138px; animation-delay: -2.2s; }
.seat:nth-child(4) { right: 62px; bottom: 128px; animation-delay: -2s; }
.seat:nth-child(5) { right: 2px;  bottom: 18px;  animation-delay: -.9s; }
.seat:nth-child(2), .seat:nth-child(3), .seat:nth-child(4) { z-index: 1; }   /* behind the table */
.seat:nth-child(1), .seat:nth-child(5) { z-index: 3; }                       /* in front of it */

/* The easter egg (js/title.js grabbable): councillors can be grabbed, pulled and thrown out. */
.seat .av { pointer-events: auto; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.seat.held { animation-play-state: paused; z-index: 10 !important; }
.seat.held .av { cursor: grabbing; scale: 1.15; box-shadow: 0 8px 0 rgba(0, 0, 0, .18); }
.seat.stretched .av { box-shadow: 0 0 0 3px var(--red), 0 8px 0 rgba(0, 0, 0, .18); }
.av.hop { animation: hop .4s cubic-bezier(.3, 1.6, .5, 1); }
.av.startle { animation: startle .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hop { 40% { translate: 0 -12px; scale: 1.08 .92; } }
@keyframes startle { 30% { translate: 0 -16px; rotate: -8deg; } 60% { rotate: 6deg; } }
.chamber .quip {
    position: absolute; left: 50%; bottom: calc(100% - 14px); translate: -50% 0; z-index: 12; width: max-content; max-width: 260px; margin: 0;
    padding: 6px 12px; font-size: .88rem; line-height: 1.3; color: var(--ink); text-align: center;
    background: #fff; border: 2px solid var(--ink); border-radius: 12px; box-shadow: 0 3px 0 var(--tan);
    animation: quip-in .3s cubic-bezier(.3, 1.6, .5, 1) both; pointer-events: none; transition: opacity .4s;
}
.chamber .quip::after { content: ''; position: absolute; left: 50%; bottom: -8px; translate: -50% 0; border: 7px solid transparent; border-top-color: var(--ink); border-bottom: 0; }
.chamber .quip.gone { opacity: 0; }
@keyframes quip-in { from { opacity: 0; scale: .6; } }
@media (prefers-reduced-motion: reduce) { .av.hop, .av.startle, .chamber .quip { animation: none; } }

/* A staggered entrance when the page loads on its own; arriving mid-pan
   (html.arrived, see world.js) the camera move is entrance enough. */
html:not(.arrived) .title > * { animation: title-in .6s cubic-bezier(.2, .8, .3, 1) backwards; }
html:not(.arrived) .title > :nth-child(2) { animation-delay: .08s; }
html:not(.arrived) .title > :nth-child(3) { animation-delay: .16s; }
html:not(.arrived) .title > :nth-child(4) { animation-delay: .26s; }
html:not(.arrived) .title > :nth-child(5) { animation-delay: .34s; }
html:not(.arrived) .title > :nth-child(n+6) { animation-delay: .42s; }
html:not(.arrived) .seat { animation: seat-in .5s cubic-bezier(.3, 1.5, .5, 1) backwards, bob 2.6s ease-in-out infinite; }
html:not(.arrived) .seat:nth-child(1) { animation-delay: .35s, -.4s; }
html:not(.arrived) .seat:nth-child(2) { animation-delay: .45s, -1.3s; }
html:not(.arrived) .seat:nth-child(3) { animation-delay: .55s, -2.2s; }
html:not(.arrived) .seat:nth-child(4) { animation-delay: .65s, -2s; }
html:not(.arrived) .seat:nth-child(5) { animation-delay: .75s, -.9s; }
@keyframes title-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes seat-in  { from { opacity: 0; transform: translateY(24px) scale(.6); } }
@media (prefers-reduced-motion: reduce) { .title > *, .seat { animation: none !important; } }

.pitch { max-width: 380px; margin: 8px 0 0; font-size: .95rem; line-height: 1.45; color: var(--ink2); }

.ways-in { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 320px; margin-top: 20px; }
.ways-in a { text-align: center; padding: 12px 20px; font-size: 1.15rem; }
.ways-in a:active { transform: translateY(2px); }

.credit { margin-top: 30px; font-size: .85rem; color: var(--ink2); }
.credit p { margin: 0 0 8px; }
.credit a { color: var(--red); }
.credit img { width: 190px; image-rendering: pixelated; }


.credit .tm { max-width: 380px; margin: 0 auto 10px; font-size: .78rem; color: var(--ink3); }

/* One big door: Play online (hub: demo / host / join). */
.ways-in .play-big { padding: 18px 20px; font-size: 1.6rem; box-shadow: 0 5px 0 #3b0000; }
.ways-in .try-demo { padding: 10px 8px; font-size: .95rem; color: var(--red); text-decoration: underline; text-underline-offset: 3px; }

/* The big door glints now and then, and lifts when you reach for it. */
.ways-in .play-big { position: relative; overflow: hidden; transition: translate .15s, box-shadow .15s; }
.ways-in .play-big:hover { translate: 0 -2px; box-shadow: 0 7px 0 #3b0000; }
.ways-in .play-big:active { translate: 0 4px; box-shadow: 0 1px 0 #3b0000; transform: none; }
.ways-in .play-big::after {
    content: ''; position: absolute; inset: -20% auto -20% -40%; width: 30%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
    transform: skewX(-18deg); animation: glint 5s ease-in-out 1.6s infinite; pointer-events: none;
}
@keyframes glint { 0% { left: -40%; } 22%, 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .ways-in .play-big::after { display: none; } }

/* On a big screen the chamber is the size of a room, not a phone. */
@media (min-width: 900px) and (min-height: 640px) {
    .title { max-width: 680px; padding-top: 34px; }
    .logo { width: 470px; }
    .tagline { font-size: 1.25rem; max-width: 560px; }
    .chamber { zoom: 1.3; margin-top: 18px; }
    .pitch { font-size: 1.1rem; max-width: 500px; }
    .ways-in { max-width: 380px; }
    .chamber-scroll { margin-top: 48px; }
    .chamber-scroll section { padding: 40px 4px 44px; }
    .chamber-scroll h2 { font-size: 2.1rem; }
    .chamber-scroll p { max-width: 520px; font-size: 1.08rem; }
    .chamber-scroll .site-fan .site-card { width: 112px; }
    .chamber-scroll .site-fan.small .site-card { width: 78px; }
    .taste { max-width: 560px; }
    .taste-trouble .site-card { width: 104px !important; }
    .doors { max-width: 560px; }
    .deck-photo { max-width: 560px; }
}

/* On a laptop the scroll uses the room: words on one side, cards or the photo on the other,
   the four doors in a row. The title stays a centred column; it is the middle of the world. */
@media (min-width: 1000px) and (min-height: 640px) {
    .title { max-width: 1080px; }
    .title .chamber-scroll section {
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px;
        align-items: center; justify-items: start; text-align: left; padding: 60px 12px 64px;
    }
    .title .chamber-scroll section > * { grid-column: 1; }
    .title .chamber-scroll h2 { font-size: 2.4rem; }
    .title .chamber-scroll p { max-width: 470px; font-size: 1.12rem; }
    .title .chamber-scroll .small { font-size: 1rem; }

    .title .scroll-hook .site-fan { grid-column: 2; grid-row: 1 / span 5; justify-self: center; margin: 0; }
    .title .chamber-scroll .scroll-hook .site-fan .site-card { width: 150px; }
    .title .chamber-scroll .scroll-hook .site-fan .site-card + .site-card { margin-left: -26px; }

    .title .scroll-demo > .small:first-child { grid-row: 1; }
    .title .scroll-demo .taste { grid-row: 2 / span 4; max-width: none; margin: 0; }
    .title .scroll-demo .taste-trouble .site-card { width: 130px !important; }
    .title .scroll-demo .taste .bubble { font-size: 1.08rem; }
    .title .scroll-demo > :not(.taste):not(:first-child) { grid-column: 2; justify-self: center; text-align: center; }
    .title .chamber-scroll .scroll-demo .site-fan.small .site-card { width: 96px; }

    .title .chamber-scroll .scroll-play { display: flex; justify-items: center; text-align: center; }
    .title .scroll-play .doors { grid-template-columns: repeat(4, 1fr); max-width: 940px; gap: 14px; margin-top: 18px; }
    .title .scroll-play .door { padding: 20px 12px 18px; }
    .title .scroll-play .door .icon { width: 52px; height: 52px; }
    .title .scroll-play .door b { font-size: 1.3rem; }
    .title .scroll-play .door span { font-size: .92rem; }

    .title .scroll-deck .deck-photo { grid-row: 1 / span 9; max-width: none; margin: 0; align-self: start; position: sticky; top: 28px; }
    .title .scroll-deck > :not(.deck-photo) { grid-column: 2; }
    .title .scroll-deck .badges.row, .title .scroll-deck .deck-ways { justify-content: flex-start; }
    .title .scroll-deck .deck-proof { max-width: 470px; }
    .title .scroll-deck .mail-fallback { margin-left: 0; text-align: left; }

    .title .to-hall { max-width: 760px; }
    .title .hall-door b { font-size: 1.8rem; }
    .title .hall-rooms .door b { font-size: 1.2rem; }
    .title .hall-rooms .door span { font-size: .85rem; }
}

@media (min-width: 1000px) and (min-height: 860px) { .title .chamber { zoom: 1.45; } }   /* tall enough to keep Play online on the first screen */

/* The foot, under the stairs: one small row (QR, gav.fi, address, email, maker)
   and the small print. The QR code opens big when tapped. */
.credit { width: 100%; margin-top: 34px; padding-top: 18px; border-top: 2px dashed var(--tan); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.foot-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
.foot-links { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; font-size: .8rem; color: var(--ink3); }
.credit .foot-links .weburl img { width: 150px; display: block; }
.credit .foot-row .gavfi { margin: 0; }
.credit .foot-row .gavfi img { width: 44px; height: 44px; }
.credit .tm { margin: 0 auto; max-width: 400px; font-size: .72rem; }

.home-qr {
    margin: 0; padding: 3px; border: 2px solid var(--tan); border-radius: 8px; background: #fff; cursor: zoom-in;
    transition: translate .15s, border-color .15s;
}
.home-qr:hover { translate: 0 -2px; border-color: var(--red); }
.home-qr .mavqr { display: block; width: 50px; height: 50px; margin: 0; border-radius: 4px; }
.home-qr .qr-caption { display: none; }
/* Opened: the whole screen becomes the code, big enough to scan from across a table. */
.home-qr.open {
    position: fixed; inset: 0; z-index: 1000; width: 100%; border: none; border-radius: 0; padding: 24px; cursor: zoom-out; translate: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    background: rgba(243, 239, 237, .94); backdrop-filter: blur(3px);
}
.home-qr.open .mavqr { width: min(78vw, 60vh, 380px); height: auto; padding: 10px; background: #fff; border: 2px solid #000; border-radius: 14px; box-shadow: 0 6px 0 var(--tan); animation: qr-pop .35s cubic-bezier(.3, 1.5, .5, 1); }
.home-qr.open .qr-caption { display: block; font-family: var(--font-ui); font-size: 1rem; color: var(--ink2); }
@keyframes qr-pop { from { transform: scale(.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .home-qr.open .mavqr { animation: none; } }

/* ── The floor: stairs down to the hall ──
   A wide door with a stairwell in it; the hall's own rooms (teachers,
   leaders, partners) open off it. Scrolling past the end fills the door
   from the top (--pull, js/title.js) and walks you down. */
.to-hall { width: 100%; max-width: 440px; margin-top: 8px; display: flex; flex-direction: column; align-items: center; }
/* A stairwell seen from above: each step narrower and darker as it goes down. */
.hall-door .steps { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: 8px; }
.hall-door .steps i { display: block; height: 9px; background: var(--tan); border-radius: 2px; margin-top: 3px; }
.hall-door .steps i:nth-child(1) { width: 62%; opacity: .45; }
.hall-door .steps i:nth-child(2) { width: 46%; opacity: .7; }
.hall-door .steps i:nth-child(3) { width: 30%; opacity: 1; background: #8a6a2c; }
.hall-door {
    --pull: 0;
    position: relative; overflow: hidden; width: 100%;
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 16px 14px;
    background: var(--parch); border: 2px solid var(--parch-brd); border-radius: 14px; box-shadow: 0 4px 0 var(--tan);
    text-decoration: none; color: var(--ink); transition: translate .15s, box-shadow .15s;
}
.hall-door::before {   /* the walk down: fills from the top as you keep scrolling */
    content: ''; position: absolute; inset: 0 0 auto; height: calc(var(--pull) * 100%);
    background: linear-gradient(#e9cf98, #dcb873); z-index: 0; transition: height .12s linear;
}
.hall-door > * { position: relative; z-index: 1; }
.hall-door:hover { translate: 0 2px; box-shadow: 0 2px 0 var(--tan); }
.hall-door .icon { width: 52px; height: 52px; image-rendering: pixelated; }
.hall-door b { font-family: var(--font-pixel); font-weight: normal; color: var(--red); font-size: 1.45rem; }
.hall-door span { font-size: .9rem; color: var(--ink2); }
.hall-door .pull-hint { font-style: normal; font-size: .8rem; color: var(--ink3); margin-top: 4px; }
.hall-door .pull-hint { animation: bob 1.6s ease-in-out infinite; }
.hall-door.pulling .pull-hint { color: var(--red); }
.hall-rooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; margin-top: 10px; }
.hall-rooms .door { padding: 10px 6px 9px; gap: 2px; }
.hall-rooms .door .icon { width: 30px; height: 30px; }
.hall-rooms .door b { font-size: 1rem; }
.hall-rooms .door span { font-size: .74rem; line-height: 1.2; }
/* No more page under the stairs: just the room to keep scrolling into them. */
.title:has(.to-hall) { padding-bottom: 28px; }
@media (min-width: 900px) and (min-height: 640px) { .to-hall { max-width: 560px; } }
@media (prefers-reduced-motion: reduce) { .hall-door .pull-hint { animation: none; } }

/* At a glance, under the big door: who, how long, how young. */
.facts { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; font-size: .88rem; color: var(--ink2); }
.facts li { padding: 4px 11px; border: 2px solid var(--tan); border-radius: 999px; background: #fff; }
.facts b { font-family: var(--font-pixel); font-weight: normal; color: var(--red); margin-right: 2px; }

/* The title screen makes no sound, so it has no mute button; it floated over the text on phones. */
html[data-world="title"] .mute-btn { display: none; }