/* Styles used only by the "centuries" lesson: parchment colours, time axis, crossed-out digits, time machine. */

:root {
  --bg: #fbf3e4; --line: #ead9b8;
  --tint: #fffaf0; --chip: #f7e9c8; --hover: #fff6e0; --done: #d6c090; --star-off: #dccba3;
  --topic-bg: var(--purple);
}

.box.bce { border-color: #c9b6fb; background: #f5f0ff; }
.box.ce { border-color: #9fd6bb; background: #f0fbf5; }
.cheat > div.bce { border-left-color: var(--purple); background: #f5f0ff; }
.cheat > div:not(.ce):not(.bce) { border-left-color: var(--accent); background: #fff3ec; }
.cheat.rules { font-size: 1em; gap: 12px; }
.cheat s { color: var(--red); }

/* --- time axis, one century, crossed-out digits ----------------------- */
.ax { width: 100%; max-width: 980px; height: auto; }
.ax text { font: 800 26px ui-rounded, "SF Pro Rounded", system-ui, sans-serif; fill: var(--ink); text-anchor: middle; }
.ax .rng { font-size: 19px; font-weight: 700; fill: var(--muted); }
.ax .side { font-size: 21px; }
.ax .pin text { font-size: 23px; fill: var(--red); }

.cbar { width: min(760px, 100%); position: relative; }
.cb-title { font-weight: 800; font-size: 1.1em; }
.cb-row { display: flex; position: relative; border-radius: 18px; border: 3px solid var(--green); overflow: visible; }
.cbar.bce .cb-row { border-color: var(--purple); }
.cb-h { flex: 1; padding: 8px 10px; display: flex; flex-direction: column; line-height: 1.25; }
.cb-h span { font-size: .8em; color: var(--muted); font-weight: 700; }
.cb-h.h1 { background: #e3f7ec; border-radius: 14px 0 0 14px; border-right: 3px dashed var(--green); }
.cb-h.h2 { background: #c9eedb; border-radius: 0 14px 14px 0; }
.cbar.bce .cb-h.h1 { background: #f5f0ff; border-right-color: var(--purple); }
.cbar.bce .cb-h.h2 { background: #e4d9ff; }
.cb-pin { position: absolute; top: -0.95em; transform: translateX(-50%); color: var(--red); font-style: normal; font-size: 1.1em; line-height: 1; z-index: 1; }

.tiles { display: flex; gap: 10px; justify-content: center; align-items: center; }
.tile {
  font: inherit; font-weight: 800; font-size: 2em; line-height: 1; color: var(--ink); padding: 0;
  width: 1.5em; height: 1.75em; border-radius: 16px; border: 3px solid var(--line); background: #fff;
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  box-shadow: 0 5px 0 var(--line);
}
button.tile { cursor: pointer; }
button.tile:hover { border-color: var(--accent); }
.tile.x { color: #c8b792; background: #fbf3e4; box-shadow: none; cursor: default; }
.tile.x::after {
  content: ""; position: absolute; left: 6%; right: 6%; top: calc(50% - 3px); height: 6px;
  background: var(--red); border-radius: 3px; transform: rotate(-24deg);
}
.tiles .era { font-weight: 800; font-size: 1.2em; color: var(--purple); margin-left: 6px; }
.calcline { font-weight: 800; font-size: 1.2em; min-height: 1.5em; }
.calcline small { font-weight: 700; color: var(--muted); font-size: .7em; }

.rom { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; width: min(760px, 100%); font-size: .8em; }
.rom span { background: #f7e9c8; border-radius: 12px; padding: 2px 4px; display: flex; flex-direction: column; line-height: 1.2; color: var(--muted); font-weight: 700; }
.rom b { color: var(--ink); font-size: 1.15em; }

.mach { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mstep { font-weight: 800; color: var(--purple); }
.mopts { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; min-height: 3.2em; }
.mopts .opt { min-width: 150px; }

.lab { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lab-in { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; }
.lab-in input {
  font: inherit; font-weight: 800; font-size: 1.7em; width: 5.2em; text-align: center; color: var(--ink);
  border: 3px solid var(--accent); border-radius: 18px; padding: 4px 8px; background: #fff;
}
.seg { display: flex; gap: 6px; }
.seg .opt { padding: 8px 16px; box-shadow: none; }
.seg .opt.on { background: var(--purple); border-color: var(--purple); color: #fff; }
.lab .chips button { font: inherit; font-weight: 700; border: 0; cursor: pointer; }
.lab-out { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 9em; }
.lab-res { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; }
.lab-res .big { font-size: 1.9em; line-height: 1.1; }

.drill { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dbar { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; font-weight: 800; font-size: .86em; }
.dbar span { border-radius: 999px; padding: 3px 16px; background: #fff; border: 3px solid var(--line); }
.dbar .streak.hot { border-color: var(--accent); background: #fff3ec; }
.dbar .streak.won { border-color: var(--yellow); background: #fffbea; }
.pips { display: flex; gap: 5px; }
.pips i { width: 16px; height: 16px; border-radius: 50%; background: var(--line); }
.pips i.on { background: var(--accent); }
.drill .item {
  border: 3px solid var(--line); border-radius: 22px; background: #fffaf0; padding: 10px 30px; min-width: 300px;
  display: flex; flex-direction: column; align-items: center; font-weight: 800;
}
.drill .item .big { font-size: 1.9em; line-height: 1.15; }
.drill .why { font-size: .86em; font-weight: 700; min-height: 1.4em; color: var(--green); }
.drill .why.no { color: var(--accent); }


@media (max-width: 700px) {
  .rom { grid-template-columns: repeat(4, 1fr); }
  .tile { font-size: 1.6em; }
}