/* puzzles · base styles shared by every game (tokens, page, header, links, cards, stats, footer, text pages).
   Each game loads this first and then its own styles.css, which may override the tokens (accent colours). */

/* fonts:start — self-hosted (latin subset, the same files críptico uses) */
@font-face { font-display: swap; font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; src: url(/shared/fonts/IBMPlexMono-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-display: swap; font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; src: url(/shared/fonts/IBMPlexMono-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-display: swap; font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 500; font-stretch: 100%; src: url(/shared/fonts/IBMPlexSans-400-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-display: swap; font-family: 'Literata'; font-style: normal; font-weight: 400 600; src: url(/shared/fonts/Literata-400-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* fonts:end */

/* ---------- tokens: "Birome" palette (warm newsprint, ink, ballpoint blue) ---------- */
:root{
  --bg:#ECEAE4; --ink:#1B1915; --muted:#6B675F; --line:#CFCAC0; --well:#E1DDD4;
  --accent:#1F3F73;                      /* ballpoint blue: focus, links, the main mark */
  --accent-2:#8A5E12;                    /* ochre: the second mark */
  --given:#8C2438; --given-soft:rgba(140,36,56,.11);
  --ok:#3E6B47;    --ok-soft:rgba(62,107,71,.12);
  --serif:"Literata",Georgia,serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#1A1916; --ink:#ECE9E1; --muted:#9B968C; --line:#3B3932; --well:#25241F;
    --accent:#8FB0E6; --accent-2:#D7AC58;
    --given:#E37287; --given-soft:rgba(227,114,135,.15);
    --ok:#83B98D;    --ok-soft:rgba(131,185,141,.15);
  }
}
:root[data-theme="dark"]{
  --bg:#1A1916; --ink:#ECE9E1; --muted:#9B968C; --line:#3B3932; --well:#25241F;
  --accent:#8FB0E6; --accent-2:#D7AC58;
  --given:#E37287; --given-soft:rgba(227,114,135,.15);
  --ok:#83B98D;    --ok-soft:rgba(131,185,141,.15);
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.55;}
[hidden]{display:none !important;}

.page{
  max-width:620px; min-height:100%; margin:0 auto;
  padding-inline:22px; padding-block:26px 28px;
  display:flex; flex-direction:column; gap:26px;
}
.main{display:flex; flex-direction:column; gap:22px;}

/* ---------- header: brand left, nav right ---------- */
.header{display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:24px;}
.brand{
  margin:0; font-family:var(--serif); font-weight:600; font-size:22px; letter-spacing:-.005em;
  display:inline-flex; align-items:baseline; gap:.28em; line-height:1; white-space:nowrap;
}
.brand .mark{font-family:var(--mono); font-weight:600; font-size:.52em; color:var(--accent);}
a.brand{color:var(--ink); text-decoration:none;}
a.brand:hover{color:var(--accent);}
.nav{display:inline-flex; align-items:baseline; gap:18px;}
.nav-link{font:inherit; font-size:13px; color:var(--muted); background:none; border:0; padding:0; cursor:pointer; white-space:nowrap; text-decoration:none;}
.nav-link:hover,.nav-link[aria-current="page"]{color:var(--ink);}
.nav-link:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px;}
@media (max-width:420px){.nav{gap:12px;} .header{margin-bottom:14px;}}

/* ---------- controls ---------- */
.pill{
  flex:none; font:inherit; font-size:13px; font-weight:500; cursor:pointer;
  color:var(--ink); background:var(--well); border:1px solid var(--line);
  border-radius:999px; padding:6px 13px; line-height:1.2;
  transition:border-color .15s, background-color .15s;
}
.pill:hover:not(:disabled){border-color:var(--muted); background:var(--bg);}
.pill:active:not(:disabled){transform:translateY(1px);}
.pill:disabled{opacity:.4; cursor:default;}
.pill:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.link{font:inherit; font-size:13.5px; color:var(--muted); background:none; border:0; padding:0; cursor:pointer; border-bottom:1px solid var(--line); text-decoration:none;}
.link:hover{color:var(--ink); border-bottom-color:var(--muted);}
.link:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}

/* ---------- the result card ---------- */
.card{display:flex; flex-direction:column; gap:10px; border:1px solid var(--line); border-radius:10px; padding:16px 18px 14px;}
.card .label{font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:600;}
.card .actions{display:flex; flex-wrap:wrap; gap:6px 18px;}

/* stats inside the card: one line plus four thin bars (help used: 0, 1, 2, 3+) — see core.js */
.stats{display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--line); padding-top:10px; margin-top:2px;}
.stats-line{margin:0; font-size:13px; color:var(--muted);}
.stats-line b{color:var(--ink); font-weight:500;}
.stats-line .totals{display:block; margin-top:4px;}
.stats-bars{display:grid; grid-template-columns:repeat(4, 34px); gap:6px;}
.stats-bar{display:flex; flex-direction:column; align-items:center; gap:4px; font-family:var(--mono); font-size:11px; color:var(--muted); text-align:center;}
.stats-bar .track{height:32px; display:flex; align-items:flex-end; justify-content:center;}
.stats-bar .fill{width:10px; min-height:2px; background:var(--line); border-radius:3px;}
.stats-bar.mine .fill{background:var(--accent);}
.stats-bar.mine{color:var(--ink);}

/* ---------- footer ---------- */
.footer{margin-top:auto; padding-top:16px; border-top:1px solid var(--line); font-size:13px; line-height:1.55; color:var(--muted);}
.footer p{margin:0 0 8px;}
.footer strong{color:var(--ink); font-weight:500;}
.footer a{color:var(--muted); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px;}
.footer a:hover{color:var(--ink); text-decoration-color:var(--muted);}

/* ---------- text pages (archivo, cómo se juega, privacidad) ---------- */
.page-title{font-family:var(--serif); font-size:22px; font-weight:600; margin:0 0 6px; line-height:1.2;}
.prose{display:flex; flex-direction:column; gap:10px; font-size:15.5px; line-height:1.6;}
.prose p,.prose li{margin:0; max-width:60ch; color:var(--ink);}
.prose ul{margin:0; padding-left:1.2em; display:flex; flex-direction:column; gap:4px;}
.prose h3{margin:14px 0 0; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600;}
.prose a{color:var(--accent); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px;}
.prose a:hover{text-decoration-color:var(--accent);}
.prose .fine{font-size:13px; color:var(--muted); margin-top:8px;}

.archive{display:flex; flex-direction:column; gap:14px;}
.archive h3{margin:14px 0 4px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600;}
.archive h3:first-of-type{margin-top:0;}
.archive ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;}
.archive-item{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  color:var(--ink); text-decoration:none; padding:10px 12px; margin:0 -12px; border-radius:8px;
}
.archive-item:hover{background:var(--well);}
.archive-item:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
.archive-item .title{font-family:var(--serif); font-size:17px; line-height:1.45;}
.archive-item .state{flex:none; font-size:13px; color:var(--muted);}
.archive-item .state.done{color:var(--ok);}
.archive-empty{margin:0; font-size:15px; color:var(--muted);}