/* Ages Below, the working pages: each one a place in the game, built from ages.css's materials. The painting stays at the top and fades away;
   what the page is for sits on calm ground below it. Hairlines hold the data, cut stone is for doing something, gold says "here" or "go". */

.ages {
    --bar-h: 64px;
    --lintel: clamp(340px, 46vh, 460px);
    --column: 1180px;
    --up: #6fdc8c;
    --down: #ff8f8f;
}

/* numbers here are data, so they stand on the line: an old-style 0 reads as the letter o */
html.ages body { font-variant-numeric: lining-nums; }

.page { position: relative; display: flex; flex-direction: column; min-height: 100svh; }
main { position: relative; z-index: 1; flex: 1; }

/* the painting: lit on the right, dark on the left, gone by the time the page's work starts */
.painting { position: absolute; top: 0; right: 0; z-index: 0; width: min(100%, 1500px); height: var(--lintel); pointer-events: none; }
.painting img {
    width: 100%; height: 100%; object-fit: cover; object-position: right center;
    -webkit-mask-image: linear-gradient(to bottom, #000 48%, transparent 100%), linear-gradient(to right, transparent 12%, #000 52%);
    mask-image: linear-gradient(to bottom, #000 48%, transparent 100%), linear-gradient(to right, transparent 12%, #000 52%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
}

/* the bar */
.way { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px clamp(16px, 2.2vw, 30px); min-height: var(--bar-h); padding: 10px clamp(16px, 2vw, 28px); background: rgba(9, 9, 13, .92); }
.ticker-on .way { top: 24px; }
.way-home { display: flex; align-items: center; gap: 12px; flex: none; color: var(--bone); font: 400 1.3rem/1 var(--display); text-decoration: none; white-space: nowrap; }
.way-home:hover { color: var(--gold); }
.way-links { display: flex; flex: 1; align-items: center; gap: 12px clamp(16px, 2.2vw, 30px); min-width: 0; }
.way-links nav { display: flex; gap: clamp(14px, 1.8vw, 26px); }
.way-links nav a { padding: .4em 0 .3em; border-bottom: 2px solid transparent; color: var(--bone); font: 400 1.05rem/1.2 var(--display); text-decoration: none; white-space: nowrap; }
.way-links nav a:hover { color: var(--gold); }
.way-links nav a[aria-current] { border-color: var(--gold); color: var(--gold); }
.bar-floor { margin-left: auto; opacity: .9; }
.way-account-slot { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 24px); margin-left: auto; }
.bar-floor + .way-account-slot { margin-left: 0; }
.way-action { padding: .35em .1em; border: 0; background: none; color: var(--bone); font: 400 1.05rem/1.2 var(--display); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; white-space: nowrap; cursor: pointer; }
.way-action:hover { color: var(--gold); }
.way-name { color: var(--bone); font: 400 1.05rem/1.2 var(--display); }
.way-out { margin: 0; }
.way-toggle { display: none; padding: .45em .2em; border: 0; background: none; color: var(--bone); font: 400 1.05rem/1 var(--display); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; cursor: pointer; }
.way-toggle[aria-expanded="true"] { color: var(--gold); }

/* every control in the bar is a finger's size, on every page */
.way :is(.way-home, .way-action, .way-name), .way-links nav a, .way-account summary, .way .enter-small { display: inline-flex; align-items: center; min-height: 44px; }
.way-toggle { min-width: 44px; min-height: 44px; }
.way-home { min-width: 44px; justify-content: center; }
.way-panel a { display: flex; align-items: center; min-height: 44px; }

.way-account { position: relative; }
.way-account summary { display: flex; align-items: center; gap: 8px; padding: .35em .1em; color: var(--gold); font: 400 1.05rem/1.2 var(--display); white-space: nowrap; list-style: none; cursor: pointer; }
.way-account summary::-webkit-details-marker { display: none; }
.way-account summary::after { content: ""; border: 5px solid transparent; border-top-color: currentColor; border-bottom-width: 0; transition: transform .15s; }
.way-account[open] summary::after { transform: rotate(180deg); }
.way-panel { position: absolute; top: calc(100% + 12px); right: 0; z-index: 1000; display: grid; gap: 6px; min-width: 240px; max-height: calc(100svh - var(--bar-h) - 24px); padding: 14px 18px 16px; overflow-y: auto; background: #16161f; border-top: 2px solid var(--gold); box-shadow: 0 16px 36px rgba(0, 0, 0, .55); }
.way-group { margin-top: 8px; color: var(--ash); font: italic 400 1rem/1.2 var(--text); }
.way-panel a { padding: .3em 0; color: var(--bone); font: 400 1.1rem/1.2 var(--text); text-decoration: none; }
.way-panel a:hover { color: var(--gold); }

/* a page's head, on the painting's dark side */
.place { padding: calc(var(--lintel) - var(--bar-h) - 200px) var(--gutter) 0; min-height: calc(var(--lintel) - var(--bar-h) - 24px); }
.place h1 { text-shadow: 0 2px 14px rgba(0, 0, 0, .8); overflow-wrap: anywhere; }
.place-lede { margin-top: 12px; max-width: 27em; text-shadow: 0 1px 10px rgba(0, 0, 0, .75); }

/* the ground under it */
.ground { max-width: calc(var(--column) + 2 * var(--gutter)); padding: 22px var(--gutter) 76px; }
.ground-note { margin-top: 22px; max-width: 42em; color: var(--ash); font-size: 1.05rem; }
.ground-line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: 8px; color: var(--ash); }
.ground h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }

/* a board: rows to read, nothing to get in the way */
.ledger { width: 100%; border-collapse: collapse; font-size: 1.15rem; font-variant-numeric: lining-nums tabular-nums; }
.ledger th { padding: .6em 1em .55em 0; border-bottom: 1px solid var(--rule); color: var(--ash); font: 400 1.02rem/1.2 var(--display); text-align: left; white-space: nowrap; }
.ledger td { padding: .55em 1em .55em 0; border-bottom: 1px solid rgba(236, 229, 213, .08); vertical-align: middle; }
.ledger :is(th, td):last-child { padding-right: 0; }
.ledger tbody tr:hover { background: rgba(236, 229, 213, .035); }
.ledger a { color: var(--bone); text-decoration-color: rgba(236, 229, 213, .4); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ledger a:hover { color: var(--gold); text-decoration-color: currentColor; }
.ledger .num { text-align: right; }
.ledger .rank { width: 3.2rem; color: var(--ash); font-size: 1.2rem; font-weight: 500; line-height: 1; }
.ledger tbody tr:nth-child(-n+3) .rank { color: var(--gold); font-size: 1.55rem; }
.ledger .hush { padding: 2em 0; color: var(--ash); text-align: center; }
.ledger .hush .enter { margin-top: 14px; }

/* a player in a row: their class's idle sprite, their name, their class */
.who { display: flex; align-items: center; gap: 10px; }
.portrait { flex: none; width: 52px; height: 52px; border: 1px solid var(--rule); background-color: #0a0a0f; background-repeat: no-repeat; background-size: 780px 130px; background-position: -39px -20px; }
.who-name { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; overflow-wrap: anywhere; }

/* tabs: the same line a class takes on the Welcome page when it is picked */
.tabs { display: flex; flex-wrap: wrap; gap: 4px clamp(18px, 3vw, 34px); margin-bottom: 10px; border-bottom: 1px solid var(--rule); }
.tab { display: inline-flex; align-items: center; gap: 8px; margin-bottom: -1px; padding: .5em .1em .55em; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ash); font: 400 1.2rem/1.1 var(--display); cursor: pointer; }
.tab:hover { color: var(--bone); }
.tab[aria-selected="true"] { border-color: var(--gold); color: var(--gold); }

/* small plaques: chamfered, never a pill */
.badge { display: inline-block; padding: .2em .55em .24em; font: 400 .92rem/1.1 var(--display); white-space: nowrap; clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px); }
.state { white-space: nowrap; }
.state-free { color: var(--up); }
.state-busy { color: #7fd6ff; }
.state-off { color: var(--ash); }

/* a form */
.field { width: 100%; min-height: 54px; padding: 0 .8em; border: 1px solid rgba(236, 229, 213, .42); border-radius: 0; background: rgba(8, 8, 12, .86); color: var(--bone); font: 400 1.2rem/1.2 var(--text); }
.field::placeholder { color: #a8a194; opacity: 1; }
.field:hover { border-color: rgba(236, 229, 213, .7); }

/* the Community page's search */
.seek { margin-top: 22px; max-width: 34rem; }
.seek label { display: block; margin-bottom: 6px; color: var(--bone); font: 400 1.05rem/1.2 var(--display); }
.seek-row { display: flex; gap: 10px; }
.seek-row .enter { flex: none; min-width: 7.4rem; text-align: center; }
.seek-error { margin-top: 8px; color: var(--down); font-size: 1.05rem; }
.found { padding: 26px var(--gutter) 0; max-width: calc(var(--column) + 2 * var(--gutter)); }
.found-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.found-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.found .way-action { font-size: 1.05rem; }

/* doors: each place on the Community page, seen through the gate's own shape */
.doors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px clamp(18px, 2.6vw, 34px); max-width: calc(var(--column) + 2 * var(--gutter)); padding: 34px var(--gutter) 84px; }
.door { display: block; color: var(--ash); font-size: 1.1rem; line-height: 1.4; text-decoration: none; }
.door img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; clip-path: polygon(50% 0, 100% 15%, 100% 100%, 0 100%, 0 15%); filter: brightness(.82); transition: filter .15s; }
.door strong { display: block; margin: 14px 0 4px; color: var(--bone); font: 400 1.4rem/1.2 var(--display); transition: color .15s; }
.door span { display: block; }
.door:hover img { filter: brightness(1.08); }
.door:hover strong { color: var(--gold); }

/* the gate, on a page with a bar over it */
.page .gate { min-height: calc(100svh - var(--bar-h)); margin-top: calc(-1 * var(--bar-h)); padding-top: var(--bar-h); }
.page .gate-copy h1 { margin-top: 18px; font-size: clamp(2.3rem, 3.8vw, 3.4rem); }
.gate-logo { width: min(190px, 56%); height: auto; }

/* a sheet over the page */
dialog.sheet { width: min(420px, calc(100vw - 32px)); padding: 22px 24px 24px; border: 0; border-top: 2px solid var(--gold); background: #1b1b24; color: var(--bone); }
dialog.sheet::backdrop { background: rgba(5, 5, 8, .72); }
/* only the dialogs: the Dungeon's Skills panel wears a bare `sheet` class of its own on Play. :where keeps these rules at the weight they had, so no page's cascade moves */
:where(dialog).sheet h2 { font-size: 1.7rem; }
:where(dialog).sheet p { margin-top: 10px; }
:where(dialog).sheet small { display: block; margin-top: 6px; color: var(--ash); font-size: 1rem; }
.sheet-then { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* a short word in the corner, the Welcome page's find card in another job */
.notice { position: fixed; right: clamp(16px, 2vw, 28px); bottom: 18px; z-index: 1100; width: min(340px, calc(100vw - 32px)); padding: 12px 16px 14px; background: rgba(8, 7, 9, .96); border-top: 2px solid var(--c, var(--gold)); font-size: 1.05rem; line-height: 1.3; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s, transform .25s, visibility .25s; }
.notice.on { opacity: 1; visibility: visible; transform: none; }
.notice strong { display: block; color: var(--c, var(--gold)); font: 400 1.25rem/1.2 var(--display); }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the broadcasts sit under the bar, never on it */
html.ages body #herald-container { top: calc(var(--bar-h) + 12px); }
html.ages body.ticker-on #herald-container { top: calc(var(--bar-h) + 36px); }

@media (max-width: 1180px) {
    .bar-floor { display: none; }
    .way-account-slot { margin-left: auto; }
}

@media (max-width: 900px) {
    .way-home span { display: none; }
    .way > .enter { margin-left: auto; }
    .way-toggle { display: block; }
    .way-links { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; max-height: calc(100svh - var(--bar-h)); padding: 6px 16px 20px; overflow-y: auto; background: #101017; border-top: 1px solid var(--rule); box-shadow: 0 18px 30px rgba(0, 0, 0, .6); }
    .way.open .way-links { display: flex; }
    .way-links nav { flex-direction: column; gap: 0; }
    .way-links nav a { padding: .7em 0; border-bottom: 1px solid var(--rule); font-size: 1.2rem; }
    .way-links nav a[aria-current] { border-color: var(--rule); }
    .way-account-slot { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
    .way-account summary { padding: .9em 0 .2em; pointer-events: none; }
    .way-account summary::after { display: none; }
    .way-panel { position: static; min-width: 0; max-height: none; padding: 0 0 6px; overflow: visible; background: none; border: 0; box-shadow: none; }
    .way-panel a { padding: .5em 0; font-size: 1.15rem; }
    .way-action { width: 100%; padding: .8em 0; font-size: 1.2rem; text-align: left; }
    .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .ages { --bar-h: 58px; --lintel: 300px; }
    .painting img {
        -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
        -webkit-mask-composite: source-over; mask-composite: add;
    }
    .place { padding-top: 130px; min-height: 0; }
    .place-lede { margin-top: 8px; }
    .ground { padding-top: 18px; padding-bottom: 56px; }
    .ledger { font-size: 1.08rem; }
    .ledger td, .ledger th { padding-right: .6em; }
    .ledger .rank { width: 2.2rem; }
    .seek-row .enter { min-width: 0; padding-left: 1em; padding-right: 1em; }
    .doors { gap: 22px 14px; padding-top: 26px; padding-bottom: 56px; }
    .door { font-size: 1.02rem; }
    .door strong { margin-top: 10px; font-size: 1.22rem; }
    .gate-logo { width: 130px; }
    .page .gate-copy h1 { margin-top: 10px; }
    .notice { bottom: calc(14px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
    .way-account summary::after, .door img, .door strong, .notice { transition: none; }
}