/* Shared look for the text pages (rules / reglas): the game's painted paper, but calm and readable. */
:root {
  --ink: #1d1612; --paper: #f4e8cc; --cream: #f1e4c4; --mustard: #e3b93f;
  --jade: #2f8a6b; --cobalt: #2b56a6; --terracotta: #c4553a;
  --display: 'Lilita One', 'Arial Rounded MT Bold', 'Trebuchet MS', system-ui, sans-serif;
  --hand: 'Gochi Hand', 'Comic Sans MS', 'Chalkboard SE', cursive;
  --body: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.6; }
.wrap { max-width: 760px; margin: 0 auto; padding: 18px 18px 60px; }
header.top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 0 6px; }
header.top .brand { font-family: var(--display); font-size: 30px; color: var(--terracotta); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; text-shadow: 2px 3px 0 var(--ink); text-decoration: none; }
header.top nav { margin-left: auto; display: flex; gap: 10px; font-family: var(--display); font-size: 16px; }
header.top nav a { color: var(--ink); text-decoration: none; border-bottom: 3px solid var(--mustard); }
h1 { font-family: var(--display); font-weight: normal; font-size: clamp(32px, 6vw, 46px); line-height: 1.05; margin: 14px 0 6px; color: var(--jade); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 3px 4px 0 var(--ink); }
h2 { font-family: var(--display); font-weight: normal; font-size: 28px; margin: 34px 0 8px; }
h3 { font-family: var(--display); font-weight: normal; font-size: 21px; margin: 22px 0 4px; }
.lede { font-family: var(--hand); font-size: 22px; line-height: 1.35; margin: 6px 0 18px; }
p, li { max-width: 68ch; }
a { color: #1c4f8c; }
.card { background: var(--cream); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 4px 5px 0 var(--ink); padding: 16px 18px; margin: 18px 0; }
.card h2, .card h3 { margin-top: 0; }
.play { display: inline-block; font-family: var(--display); font-size: 24px; text-decoration: none; color: var(--ink); background: var(--mustard); border: 4px solid var(--ink); border-radius: 14px; box-shadow: 4px 5px 0 var(--ink); padding: 8px 26px; margin: 6px 0; }
.play:hover { transform: translateY(-2px); }
table { border-collapse: collapse; width: 100%; margin: 10px 0 4px; font-size: 16px; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 2px solid rgba(29, 22, 18, 0.25); vertical-align: top; }
th { font-family: var(--display); font-weight: normal; border-bottom: 3px solid var(--ink); }
td b { font-weight: normal; font-family: var(--display); }
.tw { overflow-x: auto; }
dl.faq dt { font-family: var(--display); font-size: 19px; margin-top: 16px; }
dl.faq dd { margin: 2px 0 0; }
footer { margin-top: 44px; padding-top: 14px; border-top: 3px solid var(--ink); font-size: 15px; display: flex; flex-wrap: wrap; gap: 8px 16px; }
footer a { color: var(--ink); }
.note { font-family: var(--hand); font-size: 19px; }
@media (max-width: 520px) { body { font-size: 16px; } .wrap { padding: 12px 14px 48px; } }