/* Layout: one centered column. Header (title, games, night/day, settings), score panel, a card on squared paper, the three
   options, the table of what was answered, then the footer.
   One typeface (Andika, drawn for early readers), self-hosted so the app works offline.
   First number blue, second number red, like the consonants and vowels of Cazasílabas; pencil yellow marks progress.
   Spacing: 16px between blocks and inside boxes, 12px inside groups, 8px between small items (12px and 8px on a computer
   screen too short for the options, at the end).
   Every control shares one corner radius and every box shares another. Night is the default; day is chosen with the header button.
   Every animation plays even when the device asks for reduced motion: the game is meant to look the same on every phone. */
@font-face{font-family:'Andika';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/andika-400.woff2) format('woff2')}
@font-face{font-family:'Andika';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/andika-700.woff2) format('woff2')}

:root{
  --ground:#0E1433;
  --paper:#19214F;
  --line:#2E3A7C;
  --track:#262F6B;
  --ink:#EEF2FF;
  --ink-soft:#A8B5E6;
  --first:#8DB4FF;
  --second:#FF8FA3;
  --rule:#3A4A98;
  --rule-strong:#5670CF;
  --margin:#C2566B;
  --ok:#3DD08A;
  --on-ok:#062414;
  --ok-edge:#1E8F5A;
  --edge:#0A0F29;
  --focus:#FFC635;
  --pencil:#FFC635;
  /* The outline of yellow tiles, chips and the points bar: invisible at night, darker by day (see below). */
  --pencil-edge:#FFC635;
  --pencil-shade:rgba(27,37,87,.16);
  --on-pencil:#1B2557;
  --scrim:rgba(14,20,51,.62);
  --font:'Andika','Verdana','Segoe UI',system-ui,sans-serif;
  --r-ctl:14px;
  --r-box:22px;
  --gap:16px;
  --gap-m:12px;
  --gap-s:8px;
  --lift:6px;
  /* The width of the sheet, and how many squares of the paper fit across it. */
  --sw:calc(min(560px,100vw - 32px) - 36px);
  --sqn:10;
  /* How many big squares a column sum leaves on its left, so it stays in the middle of a wide sheet. */
  --col0:0;
  color-scheme:dark;
}
/* Day: a school notebook. Warm white boxes on a cream page with tan outlines, squared in light blue with a red margin.
   Pencil yellow is as light as the page and the boxes, so yellow things get a darker pencil edge (3.4:1 on the boxes).
   Red text holds 4.5:1 on the page, and outlines are firm enough to find each control and each empty tile in the table. */
:root[data-mode="day"]{
  --ground:#F4EAD5;
  --paper:#FFFDF7;
  --line:#C2B08C;
  --track:#EDE3CE;
  --ink:#1B2557;
  --ink-soft:#5A5468;
  --first:#1C48BE;
  --second:#C0223C;
  --rule:#A9C3EB;
  --rule-strong:#7B9FDB;
  --margin:#E8778A;
  --ok:#0E8450;
  --on-ok:#FFFFFF;
  --ok-edge:#095E38;
  --edge:#D9C9A8;
  --focus:#1B2557;
  --pencil-edge:#B98000;
  color-scheme:light;
}
@media (min-width:480px){:root{--sqn:14;--col0:1}}
@media (min-width:560px){:root{--sqn:16}}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--ground);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.45;
  padding-top:calc(var(--gap) + env(safe-area-inset-top,0px));
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  -webkit-user-select:none;user-select:none;
}
button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:560px;margin-inline:auto;display:flex;flex-direction:column;gap:var(--gap)}
.wrap>*{min-width:0}

/* header */
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--gap-m)}
.top-actions{display:flex;align-items:center;gap:var(--gap-s);margin-left:auto}
h1{margin:0;font-weight:700;font-size:clamp(1.3rem,6vw,1.9rem);line-height:1;color:var(--first)}
h1 .v{color:var(--second)}
/* "Cazanúmeros" is wider than "Cazasílabas": on the narrowest phones it would push the three buttons to a second row. */
@media (max-width:339px){h1{font-size:1.18rem}}
.icon-btn{width:44px;min-height:44px;display:grid;place-items:center;padding:0;border-radius:var(--r-ctl);border:2px solid var(--line);background:var(--paper);cursor:pointer}
.icon-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-btn[aria-expanded="true"]{background:var(--pencil);border-color:var(--pencil-edge);color:var(--on-pencil)}
/* The install button, on Android only (install.js): the game's own icon, the one it gets on the home screen, with a +
   on its corner. A hairline keeps the navy icon apart from the night button. */
.app-ico{position:relative;display:block;width:26px;height:26px}
.app-ico img{display:block;width:100%;height:100%;border-radius:6px;box-shadow:0 0 0 1px var(--line)}
.app-ico .add{position:absolute;right:-6px;bottom:-6px;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--ink);color:var(--paper);box-shadow:0 0 0 2px var(--paper)}
.app-ico svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round}

/* score */
.panel{display:grid;gap:var(--gap-m);padding:var(--gap);border:2px solid var(--line);border-radius:var(--r-box);background:var(--paper)}
.score-row{position:relative;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:var(--gap-m)}
.score-num{margin:0;flex:none;display:flex;align-items:baseline;gap:var(--gap-s);white-space:nowrap;color:var(--ink-soft)}
.score-num strong{font-weight:700;font-size:2.4rem;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.mini{min-height:44px;flex:none;margin-left:auto;padding:0 14px;border-radius:var(--r-ctl);border:2px solid var(--line);background:transparent;font-size:.9rem;font-weight:700;cursor:pointer}
.mini:disabled{opacity:.45;cursor:default}
@media (max-width:359px){.mini .wide{display:none}}
.plus{position:absolute;left:3.4rem;top:-4px;opacity:0;pointer-events:none;font-weight:700;font-size:1.7rem;color:var(--ok)}
.plus.go{animation:rise .8s ease-out}
@keyframes rise{0%{opacity:0;transform:translateY(10px) scale(.8)}20%{opacity:1}100%{opacity:0;transform:translateY(-20px) scale(1.15)}}
.bar{position:relative;height:24px;border-radius:999px;background:var(--track);overflow:hidden}
.fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:999px;overflow:hidden;background:var(--pencil);box-shadow:inset 0 0 0 2px var(--pencil-edge),inset 0 -6px 0 var(--pencil-shade);transition:width .35s ease}
/* A point lights up (app.js: lightUp): the piece of the bar just earned flashes white, a gleam runs along the filled part
   and the number glows pencil yellow, all within a second. Nothing moves from its place, only the light changes.
   The piece is --at, from 0, and a goal's share of the bar wide. */
.fill::after{content:"";position:absolute;inset:0;opacity:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%) no-repeat;background-size:50% 100%;background-position:-100% 0}
.fill.go::after{animation:shine .8s cubic-bezier(.35,0,.25,1) .18s}
@keyframes shine{from{opacity:1;background-position:-100% 0}to{opacity:1;background-position:200% 0}}
.spark{position:absolute;inset-block:0;left:calc(100% * var(--at,0) / var(--goal,30));width:calc(100% / var(--goal,30));opacity:0;background:#FFFFFF;pointer-events:none}
.spark.go{animation:spark .7s ease-out .12s}
@keyframes spark{0%{opacity:0}18%{opacity:.85}100%{opacity:0}}
.score-num strong.go{animation:glow .8s ease-out}
@keyframes glow{0%,25%{color:var(--pencil-edge);text-shadow:0 0 .35em rgba(255,198,53,.7)}100%{text-shadow:0 0 .35em transparent}}

/* goal reached: yellow pop up over a dimmed page, with confetti behind the card */
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;overflow-y:auto;overscroll-behavior:contain;background:var(--scrim);
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.confetti{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.confetti i{position:absolute;top:-20px;width:10px;height:16px;border-radius:2px;opacity:0;animation:fall linear forwards}
@keyframes fall{0%{opacity:1;transform:translate3d(0,0,0) rotate(0)}100%{opacity:1;transform:translate3d(var(--dx),115vh,0) rotate(var(--rot))}}
.win{position:relative;z-index:1;width:min(100%,380px);display:grid;justify-items:center;gap:var(--gap-s);padding:24px;text-align:center;border-radius:var(--r-box);border:4px solid var(--on-pencil);background:var(--pencil);color:var(--on-pencil);box-shadow:0 9px 0 var(--on-pencil);animation:win-in .45s cubic-bezier(.2,1.2,.4,1)}
@keyframes win-in{0%{opacity:0;transform:scale(.6) translateY(24px)}100%{opacity:1;transform:none}}
.trophy{width:124px;height:124px;animation:bob 1.2s ease-in-out .45s 2}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-10px) rotate(-5deg)}60%{transform:translateY(0) rotate(4deg)}}
.win h2{margin:0;font-weight:700;font-size:clamp(2rem,9vw,2.5rem);line-height:1;text-wrap:balance}
.win-sub{margin:0;font-size:1.2rem;font-weight:700}
.win-count{margin:0;padding:2px 14px;border-radius:var(--r-ctl);background:var(--on-pencil);color:var(--pencil);font-weight:700}
/* When the prize moves the game on, or brings the gold cup (app.js: renderReward), a star for each game done sits under the
   title: white on the yellow card, gold on the navy one. The title is longer there, so it is smaller. */
.level-stars{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;justify-content:center;gap:0 10px;width:100%;margin:2px 0 4px;padding:0;list-style:none}
.level-stars li{display:grid;justify-items:center;gap:2px;font-weight:700;font-size:.86rem}
@media (max-width:359px){.level-stars li{font-size:.78rem}}
.level-stars svg{width:38px;height:38px}
.level-stars polygon{fill:#FFFFFF;stroke:var(--on-pencil);stroke-width:1.7;stroke-linejoin:round}
.next-level .win h2,.champ .win h2{font-size:clamp(1.6rem,7.4vw,2.2rem)}
.redeem{margin-top:var(--gap-s);min-height:56px;padding:8px 24px;line-height:1.2;text-wrap:balance;border-radius:var(--r-ctl);border:2px solid var(--on-pencil);background:var(--on-pencil);color:var(--pencil);font-weight:700;font-size:1.25rem;cursor:pointer;box-shadow:0 5px 0 var(--pencil-shade)}
.redeem:active{transform:translateY(4px);box-shadow:0 1px 0 var(--pencil-shade)}
.redeem:focus-visible{outline-color:var(--on-pencil)}
/* The first goal of Operaciones (app.js: renderReward) brings the gold cup: the card turns navy with a gold border that
   glows, and the cup and the stars go gold. */
.champ .win{background:var(--on-pencil);color:var(--pencil);border-color:var(--pencil);box-shadow:0 9px 0 #B98000,0 0 0 7px rgba(255,198,53,.16),0 0 52px 10px rgba(255,198,53,.32)}
.champ .trophy{color:#FFF3C4}
.champ .trophy path:first-child,.champ .trophy rect{fill:var(--pencil)}
.champ .level-stars polygon{fill:var(--pencil);stroke:#FFF3C4}
.champ .win-count{background:var(--pencil);color:var(--on-pencil)}
.champ .redeem{background:var(--pencil);color:var(--on-pencil);border-color:var(--pencil);box-shadow:0 5px 0 #B98000}
.champ .redeem:focus-visible{outline-color:var(--pencil)}

/* the card */
.card{position:relative;display:grid;gap:var(--gap-m);justify-items:center;margin-bottom:var(--lift);padding:var(--gap);border:2px solid var(--line);border-radius:var(--r-box);background:var(--paper);box-shadow:0 var(--lift) 0 var(--edge)}
.cap{margin:0;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
/* The sheet: squared paper with the red margin of a notebook, the same height in every game, so the options stay in place
   from one card to the next. Its squares fit it exactly: --sqn across and 6 down, and the card of a column sum has squares
   twice as big, a digit in each. */
.sheet{--sq0:calc((var(--sw) - 15px) / var(--sqn));--sq:var(--sq0);--sh:calc(var(--sq0) * 6);position:relative;width:100%;height:var(--sh);display:grid;align-content:center;justify-items:center;overflow:hidden;padding:0 8px 0 24px;
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);background-size:var(--sq) var(--sq);background-position:15px 0;outline:1px solid var(--rule);outline-offset:-1px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.sheet::before{content:"";position:absolute;inset-block:0;left:14px;width:2px;background:var(--margin);opacity:.85;z-index:2;pointer-events:none}
.sheet.col{--sq:calc(var(--sq0) * 2);padding:0;justify-items:start}
.pop{animation:pop .3s ease-out}
@keyframes pop{0%{transform:scale(.84);opacity:.2}60%{transform:scale(1.05);opacity:1}100%{transform:scale(1)}}
/* What sounds lights up, and the rest of the sheet fades (app.js: light). */
.sheet [data-say]{transition:opacity .35s,transform .3s ease-out}
.sheet [data-say]:focus{outline:0}
.sheet [data-say]:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.sheet.speaking .sumline>:not(.lit),.sheet.speaking .band>:not(.lit){opacity:.28;transition:opacity .12s}
.sumline .lit{transform:scale(1.14);transition-duration:.12s}
.band .lit{box-shadow:inset 0 0 0 3px var(--pencil-edge)}
.frame.lit{box-shadow:0 0 0 3px var(--pencil-edge)}
.sheet.speaking .frame i:not(.lit)::after{opacity:.3}
.sheet.speaking .frame.lit i::after{opacity:1}

/* ten-frames: each is 5 × 2 squares. Up to two across and up to five down, and the squares take the room there is, as far as
   the size of the frames of a sum. A frame is wide and the sheet is not, so stacking them is what keeps them big. */
.frames{--g:5px;--w:calc(var(--sw) - 32px);--h:calc(var(--sh) - 12px);--cell:min(28px,calc((var(--w) - (var(--cols) - 1) * var(--g) - var(--cols) * 3px) / (5 * var(--cols))),calc((var(--h) - (var(--rows) - 1) * var(--g) - var(--rows) * 3px) / (2 * var(--rows))));display:grid;grid-template-columns:repeat(var(--cols),max-content);gap:var(--g);justify-content:center}
.frame{display:grid;grid-template-columns:repeat(5,var(--cell));grid-auto-rows:var(--cell);border:1.5px solid var(--rule-strong);border-radius:3px;background:var(--paper);overflow:hidden;transition:box-shadow .12s}
.frame i{position:relative;display:block;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.frame i:nth-child(5n){border-right:0}
.frame i:nth-child(n+6){border-bottom:0}
.frame i.a::after,.frame i.b::after{content:"";position:absolute;inset:12%;border-radius:50%;background:var(--first);transition:opacity .12s}
.frame i.b::after{background:var(--second)}
/* What a subtraction takes away: the red dots, crossed out as in the notebook. */
.frame i.x::after{opacity:.6}
.frame i.x::before{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(to top right,transparent calc(50% - 1.6px),var(--ink) calc(50% - 1.6px),var(--ink) calc(50% + 1.6px),transparent calc(50% + 1.6px))}
/* The frames of a sum sit under it, in one row, at a size that does not change from one sum to the next. */
.frames.small{--g:6px;--cols:2;--rows:1;--cell:min(calc((var(--sw) - 38px - var(--g)) / 10),28px)}
.frames.small.one{grid-template-columns:max-content}

/* the numbers of Sigue: a strip of a number band, with the gap in pencil yellow */
.band{--fn:min(calc(var(--sw) / 5.4),4.9rem);display:grid;grid-auto-flow:column;grid-auto-columns:minmax(1.5em,max-content);font-size:var(--fn);font-weight:700;line-height:1;border:2px solid var(--rule-strong);border-radius:8px;background:var(--paper);overflow:hidden}
.band span{display:grid;place-items:center;height:1.56em;padding:0 .12em;color:var(--first);border-left:2px solid var(--rule-strong);font-variant-numeric:tabular-nums}
.band span:first-child{border-left:0}
.band .gap{min-width:1.5em;color:var(--ok);outline:2px dashed var(--pencil-edge);outline-offset:-6px}
.band .gap.full{outline-color:transparent}

/* a card of one digit, across: first number blue, second red, and the gap for the result */
.sumline{--fs1:min(calc(var(--sw) / 4.9),4.9rem);display:flex;align-items:center;justify-content:center;gap:.14em;font-size:var(--fs1);font-weight:700;line-height:1;font-variant-numeric:tabular-nums;margin:0}
/* The first number of a subtraction can have two digits. */
.sumline.sub{--fs1:min(calc(var(--sw) / 5.6),4.4rem)}
.sumline .a{color:var(--first)}
.sumline .b{color:var(--second)}
.sumline .op{color:var(--ink-soft);font-weight:400}
.sumline .res{display:grid;place-items:center;min-width:1.25em;height:1.16em;border-radius:6px;border:2px dashed var(--pencil-edge);background:var(--paper);color:var(--ok)}
.sumline .res.full{border-color:transparent;background:transparent}
.sumstack{display:grid;gap:10px;justify-items:center}

/* A card of 2 or 3 digits: five squares across, in the same two colors. The first is the room of the thousands of a result,
   and the units are always in the fourth. */
.column{display:grid;grid-template-columns:repeat(5,var(--sq));grid-auto-rows:var(--sq);margin-left:calc(15px + var(--col0) * var(--sq));font-size:calc(var(--sq) * .86);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.column b{display:grid;place-items:center;font-weight:700;transition:background .2s}
.column .a{color:var(--first)}
.column .b{color:var(--second)}
.column .op{color:var(--ink-soft);font-weight:400}
.column .under{box-shadow:0 2px 0 var(--ink),inset 0 -1px 0 var(--ink)}
.column .r{color:var(--ok)}
.column .lit{background:var(--pencil);color:var(--on-pencil)}

/* Escucha: the speaker takes the sheet. Until the first tap of the visit it asks for one. */
.ear{display:grid;place-items:center;width:calc(var(--sh) * .66);height:calc(var(--sh) * .66);padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--first) 15%,var(--paper));color:var(--first);cursor:pointer}
.ear svg{width:62%;height:62%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ear svg path:first-child{fill:currentColor}
.ear.lit,.ear.call{animation:ear 1s ease-in-out infinite}
@keyframes ear{50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--first) 22%,transparent)}}

/* While the child thinks (app.js: think). 2 seconds after a card shows, it breathes once every 4 seconds until it is answered:
   a soft light rises around the card and its lift, fades out again and rests for the last fifth of the breath. Only the
   light changes: nothing moves, speeds up or grows, so it never looks like a countdown. Under the prize (main is inert) the
   card rests, and when the prize closes the breath starts over, with its 2 quiet seconds.
   The light is pencil yellow, by night and by day. */
.card::after{content:"";position:absolute;inset:-2px -2px calc(-2px - var(--lift));border-radius:var(--r-box);box-shadow:0 0 0 2px var(--pencil),0 0 22px 5px rgba(255,198,53,.45);opacity:0;pointer-events:none}
.card.think::after{animation:breathe 4s ease-in-out 2s infinite}
main[inert] .card::after{animation:none}
@keyframes breathe{0%,80%,100%{opacity:0}40%{opacity:1}}
/* Escuchar and Siguiente share the row under the sheet. */
.card-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap-s)}
.listen{display:inline-flex;align-items:center;gap:var(--gap-s);min-height:44px;padding:0 14px;border-radius:var(--r-ctl);border:2px solid var(--line);background:transparent;font-weight:700;cursor:pointer}
.listen svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* the three options, in one row at every width */
.answer-block{display:grid;gap:var(--gap-s)}
.answers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-m);margin-bottom:var(--lift)}
.btn{min-height:68px;padding:0 var(--gap-m);border-radius:var(--r-ctl);border:2px solid var(--ink);font-weight:700;font-size:clamp(1.1rem,5vw,1.3rem);cursor:pointer;transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(5px)}
.btn-ok{background:var(--ok);color:var(--on-ok);border-color:var(--ok-edge);box-shadow:0 var(--lift) 0 var(--ok-edge)}
.btn-ok:active{box-shadow:0 1px 0 var(--ok-edge)}
.btn-opt{min-width:0;padding:0 6px;background:var(--paper);color:var(--ink);border-color:var(--rule-strong);box-shadow:0 var(--lift) 0 var(--rule-strong);font-size:clamp(1.65rem,8.2vw,2.2rem);line-height:1;font-variant-numeric:tabular-nums;transition:transform .08s,box-shadow .08s,background-color .18s,border-color .18s,color .18s,opacity .18s}
.btn-opt:active{box-shadow:0 1px 0 var(--rule-strong)}
/* The answer: the right option goes green and grows for an instant, the wrong one soft red with a small shake, and the third
   one steps back. */
.btn-opt.right{background:var(--ok);color:var(--on-ok);border-color:var(--ok-edge);box-shadow:0 var(--lift) 0 var(--ok-edge);animation:opt-right .36s ease-out}
.btn-opt.wrong{background:color-mix(in srgb,var(--second) 20%,var(--paper));border-color:var(--second);box-shadow:0 var(--lift) 0 var(--second);animation:opt-wrong .36s ease-out}
.btn-opt.rest{opacity:.45}
.answers.done .btn-opt{pointer-events:none}
@keyframes opt-right{0%{transform:scale(1)}45%{transform:scale(1.07)}100%{transform:scale(1)}}
@keyframes opt-wrong{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}60%{transform:translateX(3px)}}

/* the games screen: four big cards, and the install button on Android */
.games-screen{display:grid;gap:var(--gap)}
.games{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-m);margin-bottom:var(--lift)}
.game{position:relative;display:grid;gap:6px;justify-items:center;min-width:0;padding:12px 10px 14px;border:2px solid var(--line);border-radius:var(--r-box);background:var(--paper);box-shadow:0 var(--lift) 0 var(--edge);cursor:pointer;text-align:center;transition:transform .08s,box-shadow .08s}
.game:active{transform:translateY(5px);box-shadow:0 1px 0 var(--edge)}
.game[data-current]{border-color:var(--pencil-edge);box-shadow:0 0 0 2px var(--pencil-edge),0 var(--lift) 0 var(--edge)}
.game-art{--sq:14px;display:grid;place-items:center;width:100%;height:clamp(84px,27vw,112px);overflow:hidden;border-radius:10px;background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);background-size:var(--sq) var(--sq);background-position:center;outline:1px solid var(--rule);outline-offset:-1px;font-weight:700;font-size:clamp(2.1rem,10.5vw,2.8rem);line-height:1}
.game-name{font-weight:700;font-size:clamp(1.02rem,5.3vw,1.3rem);line-height:1.1;color:var(--ink)}
.game-pts{font-size:.95rem;line-height:1;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.game-bar{display:block;width:100%;height:10px;margin-top:2px;border-radius:999px;background:var(--track);overflow:hidden}
.game-bar i{display:block;height:100%;width:0;border-radius:999px;background:var(--pencil);box-shadow:inset 0 0 0 1.5px var(--pencil-edge)}
.game-art .frames{--cols:1;--rows:1;--cell:clamp(18px,5.4vw,22px)}
.game-art .band{--fn:clamp(1.3rem,7.2vw,2.05rem)}
.game-art .band span{height:1.6em}
.game-art .ear{width:clamp(66px,21vw,88px);height:clamp(66px,21vw,88px)}
.game-art .sumstack{gap:2px}
.game-art .sumline{font-size:.8em}
.install-wide{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:0 14px;border-radius:var(--r-ctl);border:2px solid var(--line);background:transparent;font-weight:700;cursor:pointer}
/* While the games screen or the settings are open they are all the page shows between the header and the footer: the
   button that opened them stays to close them. */
.only-games>:not(.top):not(.games-screen):not(.foot),.only-settings>:not(.top):not(.settings):not(.foot){display:none}

/* the tables */
.book{display:grid;gap:var(--gap-m)}
.book-top{display:grid;gap:4px}
.book-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px var(--gap-m)}
.book h2{margin:0;font-weight:700;font-size:1.4rem}
.book-count{margin:0;font-size:.95rem;color:var(--ink-soft)}
.book-hint{margin:0;font-size:.9rem;color:var(--ink-soft)}
.grid{display:grid;gap:var(--gap-s)}
.tile{display:grid;place-items:center;min-height:44px;border-radius:var(--r-ctl);border:2px dashed var(--line);font-weight:700;font-size:clamp(1rem,4.6vw,1.25rem);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.tile.on{border:2px solid var(--pencil-edge);background:var(--pencil);color:var(--on-pencil)}
.tile.off{opacity:.45}
button.tile{appearance:none;padding:0;background:transparent;cursor:pointer}
@media (hover:hover){button.tile:not(:disabled):hover{border-style:solid;border-color:var(--rule-strong);color:var(--ink)}}
button.tile:focus-visible{outline-offset:1px}
.tile.now{border:2px solid var(--second);color:var(--second);cursor:default}
/* Mis números: a number chart of ten columns */
.grid.nums{grid-template-columns:repeat(10,minmax(0,1fr));gap:4px}
.grid.nums .tile{min-height:0;aspect-ratio:1;border-radius:8px;border-width:1.5px;font-size:clamp(.75rem,3.5vw,1rem)}
/* The list of the round. --k is the widest card in ems, so each tile fits it. */
.grid.list{grid-template-columns:repeat(auto-fill,minmax(calc(var(--k,5.4) * 16px + 24px),1fr))}
.grid.list .tile{padding:0 6px;font-size:1.05rem}

/* settings: a title with the game, then a group for that game and another for all of them, split by a rule. Each group is named
   small and spaced out, each setting by name in bold above its control, with soft help text below. The save button closes
   the box at the bottom right. */
.settings{display:grid;gap:var(--gap);padding:var(--gap);border:2px dashed var(--line);border-radius:var(--r-box);background:var(--paper)}
.settings-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px var(--gap-m)}
.settings h2{margin:0;font-weight:700;font-size:1.4rem}
.settings-for{margin:0;font-size:.95rem;color:var(--ink-soft)}
.group,.settings-foot{padding-top:var(--gap);border-top:2px solid var(--line)}
.group{display:grid;gap:var(--gap)}
.group-h{margin:0;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.field{display:grid;gap:var(--gap-s);min-width:0}
.lbl{font-weight:700}
.help{margin:0;font-size:.9rem;color:var(--ink-soft)}
/* The link to the landing's "Cómo funciona" sits left of the save button, small, for the adult. */
.settings-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-m)}
.how-link{font-weight:700;font-size:.95rem;color:var(--ink-soft);text-underline-offset:.2em}
.how-link:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.save{min-height:48px;padding:0 28px;border-radius:var(--r-ctl);border:2px solid var(--ok-edge);background:var(--ok);color:var(--on-ok);font-weight:700;font-size:1.05rem;cursor:pointer;box-shadow:0 4px 0 var(--ok-edge);transition:transform .08s,box-shadow .08s}
.save:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ok-edge)}
.step{display:flex;align-items:center;gap:var(--gap-m)}
.round{width:44px;height:44px;border-radius:var(--r-ctl);border:2px solid var(--line);background:transparent;font-size:1.5rem;font-weight:700;line-height:1;cursor:pointer}
.round:disabled{opacity:.45;cursor:default}
.stepval{min-width:3ch;text-align:center;font-weight:700;font-size:1.8rem;font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:var(--gap-s)}
.chip{min-width:44px;min-height:44px;padding:0 10px;border-radius:var(--r-ctl);border:2px solid var(--line);background:transparent;font-weight:700;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--pencil);border-color:var(--pencil-edge);color:var(--on-pencil)}
.seg{display:inline-grid;grid-auto-flow:column;width:max-content;max-width:100%;border:2px solid var(--line);border-radius:var(--r-ctl);overflow:hidden}
.seg button{min-height:40px;padding:0 var(--gap);border:0;background:transparent;font-weight:700;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--pencil);color:var(--on-pencil)}
/* On the narrowest phones a little less room around each word keeps the four music buttons inside the box. */
@media (max-width:340px){.seg button{padding:0 var(--gap-m)}}

/* footer, on both pages: a band of paper from edge to edge that closes the page, with the name, a question and a button
   with the address. The border image paints it past the column with no sideways scroll, a line first and then the paper,
   and it runs on under the phone's home bar. The game's text can't be selected, but this can: a computer with no mail
   program opens nothing, and the address has to be copied. */
.foot{display:grid;gap:var(--gap-m);margin-top:24px;padding-block:22px calc(24px + env(safe-area-inset-bottom,0px));border-image:linear-gradient(var(--line) 0 2px,var(--paper) 2px) fill 0//0 100vmax;-webkit-user-select:text;user-select:text}
.foot-txt{display:grid;gap:4px;min-width:0}
.foot-brand{margin:0;font-weight:700;font-size:1.3rem;line-height:1;color:var(--first)}
.foot-brand .v{color:var(--second)}
.foot-ask{margin:0;font-size:.95rem;color:var(--ink-soft)}
.foot-link{font-weight:700;color:var(--ink);text-underline-offset:.2em}
.foot-link:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.foot-mail{display:inline-flex;align-items:center;justify-content:center;gap:var(--gap-s);min-height:48px;padding:0 14px;border-radius:var(--r-ctl);border:2px solid var(--rule-strong);font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap}
.foot-mail:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.foot-mail svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* From the width of the full column there is room for the button beside the text. */
@media (min-width:592px){.foot{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--gap)}}
/* On the narrowest screens a little less room around the address keeps it inside the button. */
@media (max-width:300px){.foot-mail{padding:0 8px;font-size:.9rem}}

/* Short computer screens. With a mouse or a trackpad and the column at its full width, a window under 633px tall left the
   options below its edge: they need 617px down to their lift. A 1366×768 laptop shows some 633px in Chrome, a 1280×720 one
   585px, and the browser's zoom shortens any screen. Only there the gaps get a little tighter and the sheet takes the room
   left down to 12px under the options, never taller than on a taller screen nor shorter than on the narrowest phone. The
   rest of the page takes 394px with those gaps. Phones, tablets and every taller screen keep their layout. */
@media (hover:hover) and (pointer:fine) and (min-width:592px) and (max-height:632px){
  :root{--gap:12px;--gap-m:8px}
  .sheet{--sh:max(142px,min(191px,100vh - 394px));--sq0:calc(var(--sh) / 6)}
  .sumline{--fs1:calc(var(--sh) * .36)}
  .sumline.sub{--fs1:calc(var(--sh) * .32)}
  .frames.small{--cell:calc(var(--sh) * .13)}
}
/* Under 536px even the shortest sheet leaves the options below the edge (a 1366×768 laptop with a 125% zoom shows some
   506px). There they stay at the bottom of the window, over the end of the card, which fades out under them. */
@media (hover:hover) and (pointer:fine) and (min-width:592px) and (max-height:535px){
  .answer-block{position:sticky;bottom:0;z-index:3;padding-bottom:var(--gap-s);background:var(--ground)}
  .answer-block::before{content:"";position:absolute;inset-inline:0;bottom:100%;height:28px;background:linear-gradient(transparent,var(--ground));pointer-events:none}
}