/* Dice 3D — content pages (404, Shortcuts, Unlock)
--------------------------------------
Shared by every standalone page in public/, each of which links this
with <link rel="stylesheet" href="/pages.css" />. See pages.js for the
matching shared script.
*/

/* Fixed black background / white text on every standalone page,
   regardless of whatever theme is active in the main app — these
   pages read the same either way, rather than looking inconsistent
   depending on what the visitor last had selected. (A previous
   version synced these to the main app's theme via localStorage —
   deliberately dropped in favor of this fixed pairing.) */
:root {
    --background-color: #000;
    --foreground-color: #fff;
}

@font-face {
    font-family: "Inter";
    src:
        local("Inter Regular"),
        url("/fonts/inter-regular-subset.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Inter";
    src:
        local("Inter Bold"),
        url("/fonts/inter-bold-subset.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

* {
    font-family: "Inter", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    touch-action: manipulation;
    box-sizing: border-box;
}

body {
    background-color: var(--background-color);
    color: var(--foreground-color);
    text-align: center;
    margin: 0;
    padding: 0;
    line-height: 1.5;
    transition: 0.3s;
    animation: fade 0.6s;
}

/* Matches Pro Counter's content pages exactly (same duration, same
   keyframes) — a one-time fade-in on load, not a transition, since
   there's no "before" state to transition from on first paint. */
@keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.screen {
    position: absolute;
    width: 100%;
    min-height: 100vh;
    top: 0;
    left: 0;
    display: grid;
    grid-template-rows: 1fr auto;
    overflow: hidden;
}

.flex-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.flex-center > div:first-child {
    padding: 2em 0;
}

a {
    color: var(--foreground-color);
    text-underline-offset: 5px;
    text-decoration-style: dotted;
    text-decoration-color: var(--foreground-color);
    transition: opacity 0.3s;
}

a:hover {
    opacity: 0.4;
}

button {
    background: 0;
    cursor: pointer;
}

.content {
    font-size: clamp(1rem, 0.8214rem + 0.5714vw, 1.25rem);
}

/* Back button
-------------------------- */

#page-back-button {
    position: absolute;
    top: 1em;
    left: 1em;
    width: 3em;
    height: 3em;
    padding: 0.5em;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: transform 0.3s;
    will-change: transform;
}

#page-back-button svg {
    width: 100%;
    height: 100%;
    fill: var(--foreground-color);
}

@media (hover: hover) {
    #page-back-button:hover {
        transform: scale(1.1);
    }
}

/* Long-form content pages (About, Help, Privacy, Terms, Contact)
-------------------------- */

/* Font size, weight, line-height, and heading spacing here match
   Pro Counter's pages.css exactly: a responsive base size on the
   container (not customized per heading — h1/h2/h3 use the browser's
   own default scale off that base, same as Pro Counter), bold
   h1/h2/h3/b, p { line-height: 1.3 } (scoped to p so it can't inherit
   into unrelated elements), and h2/h3's margin-top-only adjustments. */
.article {
    /*max-width: 42em;*/
    max-width: 840px;
    margin: 0 auto;
    padding: 5.5em 1.5em 2em;
    text-align: left;
    font-size: clamp(1rem, 0.8214rem + 0.5714vw, 1.125rem);
}

.article h1,
.article h2,
.article h3,
.article b {
    font-weight: 700;
}

.article h2 {
    margin-top: 2em;
}

.article h3 {
    display: flex;
    align-items: center;
    margin-top: 1.25em;
}

.article p {
    line-height: 1.3;
}

.article p,
.article ul,
.article ol,
.article table {
    margin: 0 0 1em;
}

.article ul,
.article ol {
    padding-left: 1.25em;
}

.article table {
    border-collapse: collapse;
}

.article td {
    padding: 0.5em 0.75em;
    line-height: 1.3;
    /*border: 2px solid var(--background-color);*/
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Keyboard Shortcuts table (Help page) — the key-name column reads
   better centered, since its contents (SPACE, X, ←→, 1 - 6, …) are
   short and uneven in length; the description column stays
   left-aligned, matching the rest of .article's text. overflow:
   hidden clips the corner cells' sharp right-angle borders/background
   to the table's own rounded corners — border-radius alone doesn't
   do that with border-collapse: collapse. With border-collapse, the
   <table> itself carries no border of its own by default — only its
   <td>s do, and a cell's border is a straight rectangle that gets
   clipped away right where the corner curves, so the border looked
   like it vanished there. Giving the table its own border (which
   always follows its own border-radius correctly) traces the rounded
   corners properly, on top of the cell borders handling the internal
   grid lines. */
.shortcuts-table {
    /*border-radius: 1em;
    border: 1px solid rgba(255, 255, 255, 0.3);*/
    /*background: rgba(255, 255, 255, 0.1);*/
    overflow: hidden;
    font-size: 0.813em;
}

.shortcuts-table td:first-child {
    text-align: center;
    font-weight: 700;
}

/* Generic outline button — matches Pro Counter's .outline-button
   exactly (buttons-and-icons.css), used anywhere a button or link on
   these pages should read as a secondary/outline action. opacity: 1
   on hover is the one addition beyond Pro Counter's version: the
   generic a:hover { opacity: 0.4 } rule above would otherwise fight
   the scale/border-color hover here when this is used on an <a>. */
.outline-button {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid var(--foreground-color);
    padding: 1em 1.125em;
    border-radius: 0.5em;
    margin: 1em auto 0;
    font-size: 0.938em;
    text-decoration: none;
    will-change: transform;
    transition:
        transform 0.3s,
        border-color 0.3s;
}

.page-footer .outline-button {
    margin-bottom: 3em;
}

.outline-button svg {
    width: 24px;
    height: 24px;
    margin-right: 0.5em;
    fill: currentColor;
}

@media (hover: hover) and (pointer: fine) {
    .outline-button:hover {
        transform: scale(1.1);
        border-color: var(--foreground-color);
        opacity: 1;
    }
}

/* Centered pages (Contact) — content centered both horizontally and
   vertically on the viewport, footer pinned to the very bottom,
   matching Pro Counter's .centered-page/.centered-container exactly. */

body.centered-page {
    height: 100%;
    overflow: hidden;
}

.article.centered-container {
    display: flex;
    flex-direction: column;
    width: 88%;
    max-width: 24em;
    height: 100vh;
    margin: 0 auto;
    padding: 0;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    animation: fade 0.6s;
}

.article.centered-container h1 {
    margin-top: 0;
    /*margin-bottom: 0;*/
}

body.centered-page .page-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

/* Shared footer nav (About, Privacy, Terms, Contact, Help all
   cross-link to each other, same set, same order) — styling matches
   Pro Counter's pages.css footer exactly. The "Back to Dice 3D" link
   itself now uses the generic .outline-button (above) instead of its
   own launch-link class. */

.page-footer {
    font-size: clamp(1rem, 0.9107rem + 0.2857vw, 1.125rem);
    padding: 4em 0 1em;
    text-align: center;
    font-weight: 400;
}

.page-footer nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 0.813em;
}

.page-footer nav a {
    display: inline-block;
    border-radius: 0.25em;
    padding: 0.25em 0.35em;
    text-decoration: none;
    transition: opacity 0.3s;
    margin: 0 2px;
}

@media (hover: hover) and (pointer: fine) {
    .page-footer nav a:hover {
        opacity: 0.5;
    }
}

/* Scrollbars
---------------------------------------*/

:root {
    --border-color: rgba(255, 255, 255, 0.3);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

*::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--foreground-color);
}