/* Tens: cream number tiles on a marigold table, and a ten frame that fills as you add. */
:root{--bg:#f0a92b;--fg:#2b1d05;--tile:#fff6dc;--tile-lip:#c07f10;--ink:#2b1d05;--bad:#b3261e;--bar:#2b1d05;--bar-bg:#d48f17;--btn:#2b1d05;--btn-fg:#fff6dc;--go:#fff6dc;--go-fg:#2b1d05;--focus:#2b1d05}
.ten{display:flex;align-items:center;gap:14px;min-height:50px}
/* The ten frame: one counter for each one in the sum so far. */
.frame{flex:none;display:grid;grid-template-columns:repeat(5,20px);grid-auto-rows:20px;gap:4px;padding:5px;border-radius:9px;background:var(--bar-bg)}
.frame i{border-radius:50%;box-shadow:inset 0 0 0 2px #2b1d0540}
.frame i.on{background:var(--ink);box-shadow:none}
.frame.bust{animation:shake .3s}
.frame.bust i{background:var(--bad);box-shadow:none}
.ten .hint{font-weight:700;font-variant-numeric:tabular-nums}
.grid{--cols:5;--rows:6;--gap:8px;--cell:min(calc((100cqw - (var(--cols) - 1)*var(--gap))/var(--cols)),calc((100cqh - 6px - (var(--rows) - 1)*var(--gap))/var(--rows)),84px);display:grid;grid-template-columns:repeat(var(--cols),var(--cell));grid-auto-rows:var(--cell);gap:var(--gap);padding-bottom:6px}
@container (min-aspect-ratio:1/1){.grid{--cols:6;--rows:5}}
.tile{border-radius:22%;background:var(--tile);color:var(--ink);box-shadow:0 5px 0 var(--tile-lip);font-size:calc(var(--cell)*.5);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.tile.on{transform:translateY(4px);background:var(--ink);color:var(--tile);box-shadow:0 1px 0 var(--tile-lip)}
.tile.pop{animation:pop .18s forwards}
.tile.new{animation:land .2s}
.grid[data-state=over] .tile{opacity:.55}
@keyframes pop{to{transform:scale(.2);opacity:0}}
@keyframes land{from{transform:scale(.4);opacity:0}}
@keyframes shake{20%{transform:translateX(-6px)}45%{transform:translateX(5px)}70%{transform:translateX(-3px)}}
/* Held sideways, the frame sits above its words. */
@media(orientation:landscape) and (max-height:519px){.ten{flex-direction:column;align-items:flex-start;gap:8px}}
@media(prefers-reduced-motion:reduce){.tile.pop,.tile.new,.frame.bust{animation:none}.tile.pop{opacity:0}}