/* críptico · styles shared by every page (index, archivo, privacidad, como-se-juega) */

/* fonts:start — self-hosted; regenerate with `node tools/fetch-fonts.mjs` */
@font-face { font-display: swap; font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; src: url(/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(/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(/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(/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;
  --def:#1F3F73;                          /* definition */
  --ind:#8A5E12;                          /* indicator */
  --given:#8C2438; --given-soft:rgba(140,36,56,.11);   /* revealed letters */
  --ok:#3E6B47;    --ok-soft:rgba(62,107,71,.12);      /* solved */
  --panel:#F5F3EE; --veil:rgba(27,25,21,.45);          /* modal surface + backdrop */
  --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;
    --def:#8FB0E6; --ind:#D7AC58;
    --given:#E37287; --given-soft:rgba(227,114,135,.15);
    --ok:#83B98D;    --ok-soft:rgba(131,185,141,.15);
    --panel:#2A2924; --veil:rgba(0,0,0,.62);
  }
}
:root[data-theme="dark"]{
  --bg:#1A1916; --ink:#ECE9E1; --muted:#9B968C; --line:#3B3932; --well:#25241F;
  --def:#8FB0E6; --ind:#D7AC58;
  --given:#E37287; --given-soft:rgba(227,114,135,.15);
  --ok:#83B98D;    --ok-soft:rgba(131,185,141,.15);
  --panel:#2A2924; --veil:rgba(0,0,0,.62);
}

/* ---------- 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;
}

/* ---------- header ---------- */
.header{display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:34px;}
.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 .count{font-family:var(--mono); font-weight:600; font-size:.52em; color:var(--def);}
a.brand{color:var(--ink); text-decoration:none;}   /* on subpages the brand links back to the game */
a.brand:hover{color:var(--def);}
.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{color:var(--ink);}
.nav-link[aria-current="page"]{color:var(--ink);}
.nav-link:focus-visible{outline:2px solid var(--def); outline-offset:3px; border-radius:2px;}
.badge{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); font-weight:500; font-variant-numeric:tabular-nums;
}

/* ---------- clue ---------- */
.main{display:flex; flex-direction:column; gap:24px;}
/* the day's puzzles: date on the left, one number per puzzle on the right */
.day-bar{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:-10px;}
.day-nav{display:inline-flex; gap:4px;}
.day-nav button{
  font-family:var(--mono); font-size:12.5px; font-weight:500; color:var(--muted);
  background:none; border:0; border-bottom:2px solid transparent; cursor:pointer;
  min-width:22px; padding:2px 4px 1px; line-height:1.2;
}
.day-nav button:hover{color:var(--ink);}
.day-nav button.solved{color:var(--ok);}
.day-nav button.current{border-bottom-color:var(--def);}
.day-nav button.current:not(.solved){color:var(--ink);}   /* solved stays green even while current */
.day-nav button.current.solved{border-bottom-color:var(--ok);}
.day-nav button:focus-visible{outline:2px solid var(--def); outline-offset:1px; border-radius:2px;}
.clue{
  font-family:var(--serif); font-size:clamp(22px,5.8vw,29px); line-height:1.5;
  margin:0; text-wrap:pretty;
}
.enum{font-family:var(--mono); font-size:.55em; color:var(--muted); white-space:nowrap;}
/* Marks are underlines, not bands: they add no height and break on spaces,
   so two marked words in a row don't merge. Shared by the clue and the help example. */
.seg{
  text-decoration-line:none; text-decoration-thickness:max(2px,.08em);
  text-underline-offset:.16em; text-decoration-skip-ink:auto;
  transition:text-decoration-color .3s;
}
.seg.def{text-decoration-line:underline; text-decoration-style:solid;  text-decoration-color:var(--def);}
.seg.ind{text-decoration-line:underline; text-decoration-style:dashed; text-decoration-color:var(--ind);}
.seg.fod{text-decoration-line:underline; text-decoration-style:dotted; text-decoration-color:var(--muted);}

/* ---------- legend ---------- */
.legend{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted);}
.legend span{display:flex; align-items:center; gap:9px;}
/* swatches: same three strokes as the marks, plus the revealed-letter box */
.swatch{display:block; width:22px; height:0; flex:none; border-bottom:2px solid;}
.swatch.def{border-color:var(--def);}
.swatch.ind{border-bottom-style:dashed; border-color:var(--ind);}
.swatch.fod{border-bottom-style:dotted; border-color:var(--muted);}
.swatch.given{height:12px; border:1.5px solid var(--given); border-radius:3px; background:var(--given-soft);}

/* ---------- answer boxes ---------- */
.boxes{display:flex; flex-wrap:wrap; gap:7px;}
.box{
  width:clamp(32px,9vw,48px); height:clamp(42px,11.5vw,58px);
  font-family:var(--mono); font-weight:600; font-size:clamp(18px,4.6vw,24px);
  text-align:center; text-transform:uppercase; color:var(--ink);
  background:var(--well); border:0; border-bottom:2px solid var(--line);
  border-radius:5px 5px 0 0; padding:0; caret-color:var(--def);
}
.box:focus{outline:none; border-bottom-color:var(--def); background:var(--bg);}
.box.given{color:var(--given); border-bottom-color:var(--given); background:var(--given-soft);}
.boxes.solved .box{color:var(--ok); border-bottom-color:var(--ok); background:var(--ok-soft);}
.boxes.shake{animation:shake .34s;}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.boxes.shake{animation:none} .seg{transition:none}}

/* ---------- below the boxes: message left, hint button right ---------- */
.toolbar{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-top:-8px;}
.message{font-size:14px; color:var(--muted); min-height:1.4em; margin:0; flex:1;}
.message.error{color:var(--def);}
.message.success{color:var(--ok);}
/* the hint pill is the only button-shaped control on the page */
.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(--def); 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);
}
.link:hover{color:var(--ink); border-bottom-color:var(--muted);}
.link:focus-visible{outline:2px solid var(--def); outline-offset:3px;}

/* ---------- solution card: the only card on the page ---------- */
.solution{
  display:flex; flex-direction:column; gap:10px;
  border:1px solid var(--line); border-radius:10px; padding:16px 18px 14px;
}
.solution .label{font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:600;}
.solution .answer{font-family:var(--mono); font-size:15px; font-weight:600; letter-spacing:.04em;}
.solution .breakdown{font-family:var(--mono); font-size:13.5px; color:var(--muted); overflow-x:auto;}

/* stats inside the solution card: one line plus four thin bars (hints used: 0, 1, 2, 3+) */
.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-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(--def);}
.stats-bar.mine{color:var(--ink);}
.stats-bar .pct{font-size:10.5px;}

/* ---------- 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);}

/* ---------- help modal ---------- */
.modal{
  border:1px solid var(--line); border-radius:14px; background:var(--panel); color:var(--ink);
  padding:26px 12px 22px 24px; width:100%; max-width:min(540px, calc(100vw - 32px));
  box-shadow:0 30px 70px -30px rgba(0,0,0,.6);
  margin-top:max(24px, 6vh);                              /* anchored near the top, room to grow */
  max-height:calc(100vh - max(24px, 6vh) - 24px); overflow:hidden;
}
.modal::backdrop{background:var(--veil);}
/* scrolling happens inside, away from the rounded border, with a thin bar */
.modal-body{
  display:flex; flex-direction:column; gap:12px;
  max-height:calc(100vh - max(24px, 6vh) - 24px - 48px); overflow-y:auto;
  padding-right:12px; scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.modal-body::-webkit-scrollbar{width:8px;}
.modal-body::-webkit-scrollbar-track{background:transparent;}
.modal-body::-webkit-scrollbar-thumb{background:var(--line); border-radius:8px;}
.modal-header{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:-6px 0 0;}
.modal-header h2{
  margin:0; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
.close{
  flex:none; width:34px; height:34px; margin-right:-8px;
  border-radius:50%; border:0; background:none; color:var(--muted);
  font:inherit; font-size:24px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0 0 2px;
}
.close:hover{background:var(--well); color:var(--ink);}
.close:focus-visible{outline:2px solid var(--def); outline-offset:2px;}
.help{font-size:14px; color:var(--muted);}
.help p{margin:0;}
.help strong{color:var(--ink);}
.help h3{
  margin:8px 0 -4px; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
.help .example{font-family:var(--serif); font-size:17px; line-height:1.6; color:var(--ink);}
.parts{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
.parts li{display:grid; grid-template-columns:22px 1fr; gap:10px; align-items:start;}
.parts .swatch{margin-top:9px;}
.games{margin:0; display:flex; flex-direction:column; gap:8px;}
.games div{display:grid; grid-template-columns:112px 1fr; gap:2px 12px;}
@media (max-width:520px){.games div{grid-template-columns:1fr;}}
.games dt{font-weight:600; color:var(--ink);}
.games dd{margin:0;}
.games em{font-style:normal; font-family:var(--serif); color:var(--ink);}

/* ---------- subpages (archivo, privacidad, cómo se juega): one column of text ---------- */
.archive{display:flex; flex-direction:column; gap:14px;}
.prose{gap:10px; font-size:15.5px; line-height:1.6;}
.prose p{margin:0; max-width:60ch; color:var(--ink);}
.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(--def); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px;}
.prose a:hover{text-decoration-color:var(--def);}
.prose .fine{font-size:13px; color:var(--muted); margin-top:8px;}
.page-title{font-family:var(--serif); font-size:22px; font-weight:600; margin:0 0 6px; line-height:1.2;}
.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;
  font:inherit; text-align:left; color:var(--ink); background:none; border:0; cursor:pointer;
  padding:10px 12px; margin:0 -12px; border-radius:8px; width:calc(100% + 24px);
}
.archive-item:hover{background:var(--well);}
.archive-item:focus-visible{outline:2px solid var(--def); outline-offset:-2px;}
.archive-item .archive-clue{font-family:var(--serif); font-size:17px; line-height:1.45;}
.archive-item .archive-clue .enum{font-size:.7em;}
.archive-item .archive-answer{flex:none; font-family:var(--mono); font-size:13px; color:var(--ok); letter-spacing:.04em;}
.archive-item .archive-pending{flex:none; font-size:13px; color:var(--muted);}
.archive-empty{margin:0; font-size:15px; color:var(--muted);}

/* ---------- the help text as a page of its own (same rules as inside the modal) ---------- */
.help.page-help{max-height:none; overflow:visible; padding-right:0; font-size:15.5px; color:var(--ink);}
.help.page-help p{max-width:60ch; color:var(--ink);}
.help.page-help h3{margin-top:14px;}
.help.page-help .games dd,.help.page-help .parts span{color:var(--ink);}