/* Shared frame for every page: tokens, the four game colours, header, footer, buttons.
   Game pages draw their own world below the slim header (.site-bar). */
:root {
    --ink: #161616;
    --muted: #5F5F5A;
    --soft: #4D4D48;
    --paper: #FFFFFF;
    --ground: #ECEEF2;
    --dot: #C3C8D2;
    --line: 1.5px solid var(--ink);

    --jade: #7AD9B6;
    --jade-tint: #E2F6EE;
    --coral: #FF8E7A;
    --mustard: #FFD15C;
    --lavender: #C2B0FF;
    --alarm: #E5482E;

    --sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    line-height: 1.6;
    letter-spacing: -0.01em;
    /* Korean wraps between words, not inside them. */
    word-break: keep-all;
    overflow-wrap: break-word;
}

a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* Dotted board the home page and game pages sit on. Only the main area gets it, so whatever comes
   after the footer (AdSense pads the page end for its bottom anchor) stays white like the footer. */
.site-dots .site-main {
    background-color: var(--ground);
    background-image: radial-gradient(var(--dot) 1.3px, transparent 1.5px);
    background-size: 22px 22px;
}

.site-main { flex: 1; width: 100%; }

/* Header: full height on the home page, slim (.site-bar) on game pages. */
.site-header { background: var(--paper); border-bottom: var(--line); }
.site-header-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 32px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
/* 632 = the 600px game page plus padding, so the brand lines up with the page edge. */
.site-bar .site-header-inner { height: 48px; padding: 0 16px; max-width: 632px; }

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 900;
    /* Looser than the headings: "마야's Game" mixes Hangul and Latin. */
    letter-spacing: -0.015em;
    text-decoration: none;
}
.site-bar .site-brand { font-size: 15px; gap: 7px; }

/* The four game colours in one 2x2 mark. */
.site-mark {
    display: grid;
    grid-template-columns: repeat(2, 12px);
    grid-template-rows: repeat(2, 12px);
    border: var(--line);
    border-radius: 5px;
    overflow: hidden;
}
.site-mark > span:nth-child(1) { background: var(--jade); }
.site-mark > span:nth-child(2) { background: var(--coral); }
.site-mark > span:nth-child(3) { background: var(--mustard); }
.site-mark > span:nth-child(4) { background: var(--lavender); }
.site-bar .site-mark { grid-template-columns: repeat(2, 8px); grid-template-rows: repeat(2, 8px); border-radius: 3px; }

.site-nav { font-size: 14px; font-weight: 700; color: var(--muted); }
.site-nav a, a.site-nav { color: var(--ink); text-decoration: none; }
.site-bar .site-nav { font-size: 13px; }

.site-footer { background: var(--paper); border-top: var(--line); }
.site-footer-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 26px 32px 36px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--muted);
}
.site-footer b { color: var(--ink); font-weight: 900; letter-spacing: -0.01em; }
.site-footer p { margin: 0; }
.site-footer p + p { margin-top: 4px; }
.site-footer a { color: var(--ink); text-underline-offset: 3px; }
/* Game pages: one line, lined up with the 600px page like .site-bar. */
.site-footer.is-slim .site-footer-inner { max-width: 632px; padding: 14px 16px 18px; font-size: 12px; }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    padding: 0 22px;
    border: var(--line);
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}
.btn:disabled { opacity: 0.35; cursor: default; }
.btn-line { background: var(--paper); color: var(--ink); }

/* Result card preview (assets/share-card.js) where the share sheet can't take an image. */
.share-dialog {
    width: min(420px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    padding: 16px;
    border: var(--line);
    border-radius: 18px;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 5px 6px 0 var(--ink);
}
.share-dialog::backdrop { background: rgba(22, 22, 22, 0.55); }
.share-dialog-card { display: block; width: 100%; height: auto; border: var(--line); border-radius: 10px; }
.share-dialog-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.share-dialog-close {
    display: block;
    margin: 10px auto 0;
    padding: 4px 10px;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.tabular { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 640px) {
    .site-header-inner { height: 58px; padding: 0 18px; }
    .site-brand { font-size: 20px; gap: 8px; }
    .site-mark { grid-template-columns: repeat(2, 10px); grid-template-rows: repeat(2, 10px); border-radius: 4px; }
    .site-footer-inner { padding: 20px 18px 30px; font-size: 12px; }
}