/* Free exercises on the numbers up to 999. Loaded after clock-exercise.css (pad and boxes), imparfait-exercise.css and phrases-exercise.css
   (the keyboard drawn in the page). */
/* A number or a decomposition is shown large; a number alone even larger. */
.n999-exercise .n999-display{font-size:22px;white-space:pre-line;font-variant-numeric:tabular-nums}
.n999-exercise .n999-display--number{font-size:34px;letter-spacing:.04em}
/* Plates of 100, bars of 10 and small cubes, drawn as the workbook does: one square of 9 px for each cube. */
.n999-blocks{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:16px;margin:0 0 18px;padding:14px;border-radius:16px;background:#f4f7ff}
.n999-group{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:6px;max-width:100%}
.n999-plaque,.n999-barre,.n999-cube{display:block;box-sizing:border-box}
.n999-plaque{width:92px;height:92px;border:2px solid #0b3bb8;border-radius:3px;background-color:#7ea4ff;
  background-image:linear-gradient(#0b3bb8 1px,transparent 1px),linear-gradient(90deg,#0b3bb8 1px,transparent 1px);background-size:10% 10%}
.n999-barre{width:11px;height:92px;border:2px solid #b8410b;border-radius:3px;background-color:#ffb27e;background-image:linear-gradient(#b8410b 1px,transparent 1px);background-size:100% 10%}
.n999-cube{width:11px;height:11px;border:2px solid #187a3e;border-radius:2px;background:#6fdc9d}
/* The boxes to fill: text, boxes and the table c d u, on one or two lines. */
.n999-entry{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px;margin-bottom:14px;font:700 24px Inter,sans-serif;color:#101052}
.n999-fixed{white-space:pre}
.n999-break{flex-basis:100%;height:0}
.n999-slot{width:52px;min-height:54px;padding:4px;font-size:26px}
.n999-slot--wide{width:92px}
.n999-cdu{display:grid;gap:0;border:2px solid #101052;border-radius:10px;overflow:hidden;background:#fff}
.n999-cdu-head{padding:4px 0;border-bottom:2px solid #101052;background:#e7eeff;font-size:20px;text-align:center}
.n999-cdu-head + .n999-cdu-head{border-left:2px solid #101052}
.n999-cdu .n999-slot{width:100%;min-height:54px;border:0;border-radius:0}
.n999-cdu .n999-slot + .n999-slot{border-left:2px solid #101052}
.n999-cdu .n999-slot.is-active{box-shadow:inset 0 0 0 3px #034cff}
/* The hyphen is a key of its own, easy to find: the workbook asks for it between all the words. */
.n999-exercise .n999-key--hyphen{max-width:72px;font-size:28px}
@media(max-width:560px){
 .n999-exercise .n999-display{font-size:19px}
 .n999-exercise .n999-display--number{font-size:30px}
 .n999-blocks{gap:10px;padding:10px;margin-bottom:12px}
 .n999-plaque{width:72px;height:72px}
 .n999-barre{width:9px;height:72px}
 .n999-cube{width:9px;height:9px}
 .n999-entry{gap:6px 6px;margin-bottom:10px;font-size:20px}
 .n999-slot{width:44px;min-height:46px;font-size:22px}
 .n999-slot--wide{width:76px}
 .n999-cdu .n999-slot{min-height:46px}
}