/* Ages Below, the shared materials: the type, the colours, the cut stone, the gate and the foot. Welcome, the public pages and the Play page's
   login sheet and loading screen all read this one file.
   Everything hangs under .ages (the <html> of a public page; the sheet's own element on Play), so loading it beside the game's stylesheets
   changes nothing in the game. The element rules use :where(), so any class rule still beats them. */

@font-face { font-family: "Marcellus"; src: url("fonts/marcellus-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("fonts/alegreya-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("fonts/alegreya-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("fonts/alegreya-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

.ages {
    --pit: #0f0f15;
    --gold: #ffd34d;
    --ember: #ff9a4b;
    --bone: #ece5d5;
    --ash: #b9b2a3;
    --daylight: #ddd6c6;
    --ink: #1c1814;
    --ground: #14141c;
    --rule: rgba(236, 229, 213, .16);

    --display: "Marcellus", "Palatino Linotype", Palatino, serif;
    --text: "Alegreya", Georgia, serif;

    --gutter: clamp(16px, 8vw, 150px);
}

html.ages { background: var(--pit); -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: no-preference) { html.ages { scroll-behavior: smooth; } }
html.ages body { margin: 0; background: var(--pit); }
html.ages body, .ages:not(html) { color: var(--bone); font: 400 1.25rem/1.6 var(--text); }

:where(.ages), :where(.ages) *, :where(.ages) *::before, :where(.ages) *::after { box-sizing: border-box; }
:where(.ages) :is(img, canvas) { display: block; max-width: 100%; }
:where(.ages) :is(h1, h2, h3, p, ol, dl, dd, ul) { margin: 0; padding: 0; }
:where(.ages) :is(ol, ul) { list-style: none; }
:where(.ages) :is(h1, h2) { font: 400 clamp(2.5rem, 5.4vw, 4.75rem)/1.06 var(--display); letter-spacing: -.005em; text-wrap: balance; }
:where(.ages) a { color: inherit; }
:where(.ages) :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.skip { position: fixed; top: -80px; left: 16px; z-index: 40; padding: .4em .9em; background: var(--gold); color: var(--ink); }
.skip:focus { top: 12px; }

/* the one button: a cut stone, not a pill. The stone is a pseudo-element, because a clip on the button itself would clip its focus ring away too */
.enter {
    --fill: var(--gold);
    --cut: 10px;
    position: relative; isolation: isolate; display: inline-block; padding: .72em 1.5em .78em; border: 0; background: none; color: #1a1007;
    font: 400 1.25rem/1 var(--display); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.enter::before {
    content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fill); transition: background-color .15s;
    clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.enter:hover { --fill: #ffe58a; }
.enter-small { --cut: 7px; padding: .6em 1em .64em; font-size: 1rem; }
.enter-dark { --fill: #1a0d05; color: var(--gold); }
.enter-dark:hover { --fill: #000; }
/* the quieter stone, for what is not the page's main action */
.enter-quiet { --fill: #2b2b36; color: var(--bone); }
.enter-quiet:hover { --fill: #3a3a48; }
.enter:disabled { cursor: default; opacity: .6; }

/* the mark and the floor's name, in every bar */
.bar-mark { display: block; }
.bar-floor { font: italic 400 1.05rem/1 var(--text); color: var(--bone); white-space: nowrap; }

/* the gate: the key art with a dark third to stand in */
.gate { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: #08080c; }
.gate-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.gate::after { content: ""; position: absolute; inset: auto 0 0 0; height: 26vh; background: linear-gradient(to bottom, transparent, #14141c); }
.gate-copy { position: relative; z-index: 1; width: min(30rem, 40vw); margin-left: clamp(24px, 6vw, 110px); padding-top: 40px; }
.gate-copy h1 img { width: min(340px, 100%); height: auto; margin-left: -18px; }
.gate-copy p { margin: 18px 0 30px; max-width: 26em; color: var(--bone); }
.gate-then { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.gate-back { color: var(--bone); font-size: 1.1rem; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.gate-back:hover { color: var(--gold); }

/* the foot */
.foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding: 26px var(--gutter) calc(26px + env(safe-area-inset-bottom)); background: var(--ink); color: var(--ash); font-size: 1.05rem; }
.foot ul { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-left: auto; }
.foot a:hover { color: var(--gold); }

/* Playtest 1 lane J1 (L-9): 44 px to press, on a phone. The desktop's stays as it is */
@media (max-width: 760px), (pointer: coarse) {
    .foot a, .gate-back { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 760px) {
    .ages { --gutter: 16px; }
    html.ages body, .ages:not(html) { font-size: 1.15rem; }
    :where(.ages) :is(h1, h2) { font-size: clamp(2.05rem, 9.4vw, 2.9rem); }

    .gate { align-items: flex-end; }
    .gate-art img { object-position: 50% 0; }
    .gate::after { height: 62%; background: linear-gradient(to bottom, transparent, rgba(12, 11, 15, .94) 46%, #14141c); }
    .gate-copy { width: 100%; margin: 0; padding: 0 16px 34px; }
    .gate-copy h1 img { width: 190px; margin: 0 0 0 -10px; }
    .gate-copy p { margin: 10px 0 20px; }
    .gate-copy .enter { display: block; text-align: center; }
    .gate-then { flex-direction: column; align-items: stretch; text-align: center; }

    .foot ul { margin-left: 0; }
}

@media (max-height: 560px) {
    .gate-copy h1 img { width: 150px; }
    .gate-copy p { margin: 8px 0 12px; font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
    .enter::before { transition: none; }
}