/* puzzles.ar · the front door to every game. Tokens and fonts come from /shared/base.css.
   On purpose it does not look like a game page (narrow column, brand left, nav right): it is a
   newspaper front page — a centred nameplate, a dateline between rules, the games in columns. */

.sheet{max-width:960px; margin:0 auto; padding:30px 28px 28px;}
main{display:flex; flex-direction:column;}

/* ---------- masthead: nameplate + dateline between a thin and a double rule ---------- */
.masthead{text-align:center;}
.nameplate{margin:6px 0 30px; font-family:var(--serif); font-weight:600; font-size:clamp(58px,14vw,112px); line-height:.95; letter-spacing:-.025em;}
.nameplate a{color:var(--ink); text-decoration:none;}
.nameplate .mark{font-family:var(--mono); font-weight:600; font-size:.26em; letter-spacing:0; color:var(--accent); margin-left:.12em;}
.dateline{
  margin:0; display:grid; grid-template-columns:1fr auto 1fr; align-items:baseline; gap:12px;
  border-top:1px solid var(--ink); border-bottom:3px double var(--ink); padding:7px 2px 6px;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.dateline .side{text-align:left;}
.dateline .side.right{text-align:right;}
.dateline .center{color:var(--ink); font-weight:500;}

.lede{
  margin:34px auto 38px; max-width:24em; text-align:center; text-wrap:balance;
  font-family:var(--serif); font-size:clamp(21px,4.6vw,27px); line-height:1.3;
}

/* ---------- the games, in columns with a rule between them; the name's link covers the column ---------- */
.columns{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.game{position:relative; display:flex; flex-direction:column; gap:10px; padding:24px 26px 28px; cursor:pointer;}
.game:first-child{padding-left:0;}
.game:last-child{padding-right:0;}
.game + .game{border-left:1px solid var(--line);}
.section{margin:0; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:600;}
.game-name{margin:0; font-family:var(--serif); font-weight:600; font-size:clamp(30px,3.6vw,36px); line-height:1.05; white-space:nowrap; letter-spacing:-.01em;}
.game-link{color:var(--ink); text-decoration:none; outline:none;}
.game-link::after{content:""; position:absolute; inset:0;}
.game:has(.game-link:focus-visible){outline:2px solid var(--accent); outline-offset:-2px; border-radius:4px;}
.game-art{
  margin:6px 0 4px; height:150px; border-radius:6px; background:var(--well);
  display:grid; place-items:center; transition:background-color .15s;
}
.game-art svg{height:78px; width:auto; overflow:visible;}
.game-art .board{height:108px;}
.game:hover .game-art{background:color-mix(in srgb, var(--well) 70%, var(--line));}
.game-desc{margin:0; font-size:15.5px; line-height:1.55;}
.game-actions{margin:6px 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; font-size:13.5px;}
.cta{
  display:inline-block; padding:8px 16px; border-radius:999px; line-height:1.2;
  background:var(--ink); color:var(--bg); font-weight:500; transition:background-color .15s;
}
.game:hover .cta{background:var(--accent);}

/* each game keeps its own brand, as on its site */
.brand-criptico .mark{font-family:var(--mono); font-weight:600; font-size:.5em; color:var(--accent);}
.brand-escondidas{white-space:nowrap;}
.brand-escondidas .front{position:relative; z-index:1; background:var(--bg);}
.brand-escondidas .peek{
  position:relative; z-index:0; display:inline-block; margin-left:-.13em;
  color:var(--muted); transform:rotate(-12deg); transform-origin:50% 100%;
}
.brand-escondidas .after{position:relative; z-index:1;}
.game:hover .brand-escondidas .peek{color:var(--accent);}
.brand-sopa .circled{display:inline-block; padding:.02em .24em .08em; border:1.5px solid var(--accent); border-radius:999px; transform:rotate(-4deg);}
.game:hover .brand-sopa .circled{background:color-mix(in srgb, var(--accent) 12%, transparent);}

/* ---------- about: three short columns ---------- */
.about{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; padding:26px 0 8px;}
.about h3{margin:0 0 6px; font-family:var(--serif); font-size:17px; font-weight:600;}
.about p{margin:0; font-size:14.5px; line-height:1.55; color:var(--muted);}

/* ---------- colophon ---------- */
.colophon{margin-top:40px; padding-top:22px; border-top:1px solid var(--line); text-align:center; font-size:13px; line-height:1.6; color:var(--muted);}
.colophon p{margin:0 0 4px;}
.colophon strong{color:var(--ink); font-weight:500;}
.colophon a{color:var(--muted); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px;}
.colophon a:hover{color:var(--ink); text-decoration-color:var(--muted);}

/* ---------- 404 ---------- */
.nameplate.small{font-size:clamp(44px,10vw,64px); margin-bottom:20px;}
.lede a{color:var(--accent); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:4px;}
.back{margin:0; text-align:center; font-size:14px;}
.back a{color:var(--muted);}

/* ---------- phone: one column, rules between games ---------- */
@media (max-width:900px) and (min-width:721px){
  .game-name{font-size:28px;}
}
@media (max-width:720px){
  .sheet{padding:22px 16px 24px;}
  .dateline{grid-template-columns:1fr; text-align:center;}
  .dateline .side{display:none;}
  .lede{margin:26px auto 28px; font-size:21px;}
  .lede br{display:none;}
  .columns{grid-template-columns:1fr;}
  .game, .game:first-child, .game:last-child, .game + .game{padding:22px 0 26px; border-left:0;}
  .game + .game{border-top:1px solid var(--line);}
  .game-art{height:120px;}
  .game-art svg{height:64px;}
  .game-art .board{height:88px;}
  .nameplate{margin-bottom:20px;}
  .about{grid-template-columns:1fr; gap:18px;}
}