/* Focused timeline game surface: no external fonts, graphics or dependencies. */
.timeline-page{--history:#6654e8;--history-warm:#ffc06e;background:#f5f5fb;padding:28px 0 64px;min-height:calc(100vh - 76px)}
.timeline-page [hidden]{display:none!important}
.timeline-page .timeline-shell{max-width:980px}
.timeline-page .timeline-back{display:inline-flex;align-items:center;min-height:44px;color:#666680}
.timeline-page .timeline-intro{margin:26px 0 32px;gap:32px;position:relative}
.timeline-page .timeline-intro-copy{max-width:590px;position:relative;z-index:1}
.timeline-page .eyebrow{color:#706987;letter-spacing:1.2px;font-size:11px}
.timeline-page .timeline-intro h1{font-family:inherit;font-size:clamp(42px,6vw,68px);line-height:1.02;font-weight:850;letter-spacing:-2.8px;color:#20213d;margin:0 0 20px}
.timeline-page .timeline-intro h1 span{color:#6654e8}
.timeline-page .timeline-intro p{max-width:470px;color:#65657b;font-size:16px;line-height:1.6}
.timeline-visual{position:relative;flex:0 0 280px;height:245px;isolation:isolate}
.timeline-orbit{position:absolute;width:235px;height:235px;inset:0 10px auto auto;border:1px dashed #c9bfea;border-radius:50%;transform:rotate(-15deg)}
.timeline-visual-card{position:absolute;border-radius:22px;display:flex;flex-direction:column;align-items:flex-start;box-shadow:0 15px 25px #25213a15}
.timeline-visual-card svg{width:30px;height:30px}
.visual-card-back{background:#ffc06e;color:#5c361e;width:135px;height:166px;left:5px;top:20px;transform:rotate(-14deg);padding:20px;justify-content:space-between;font-weight:800}
.visual-card-front{background:#20213d;color:#fff;width:154px;height:186px;right:12px;top:25px;transform:rotate(9deg);padding:20px}
.visual-card-front svg{color:#d9f56f;width:25px;height:25px}
.visual-card-front strong{font-size:62px;line-height:1.15;letter-spacing:-3px}
.visual-card-front span{font-size:10px;font-weight:700}
.timeline-visual-chip{position:absolute;bottom:10px;left:23px;background:#d9f56f;color:#28301b;font-size:11px;font-weight:800;border-radius:999px;padding:9px 14px;display:flex;align-items:center;gap:7px;box-shadow:0 6px 18px #28301b0d;transform:rotate(-5deg)}
.timeline-visual-chip svg{width:17px;height:17px}
.timeline-page .timeline-setup,.timeline-page .timeline-game,.timeline-page .timeline-finish{padding:32px;border:1px solid #e4e3ef;border-radius:26px;box-shadow:0 12px 32px #29234606}
.timeline-setup-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}
.timeline-page .timeline-setup h2,.timeline-page .timeline-game h2,.timeline-page .timeline-finish h2{font-family:inherit;font-size:27px;font-weight:800;letter-spacing:-.8px;color:#20213d}
.timeline-page .timeline-setup-heading p{margin:7px 0 0;color:#6b697e;font-size:13px}
.timeline-page .timeline-stat{display:flex;align-items:center;gap:12px;flex-shrink:0;text-align:left;min-width:160px;padding:14px 18px;border-radius:17px;background:#fff4e2;box-shadow:none}
.timeline-page .timeline-stat>svg{width:26px;height:26px;color:#9a640a}
.timeline-page .timeline-stat strong{font-family:inherit;font-size:25px;font-weight:800;line-height:1.15;color:#20213d}
.timeline-page .timeline-stat span{font-size:10px;letter-spacing:.1px;color:#7a653e;text-transform:none}
.timeline-page .timeline-rules{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:25px 0}
.timeline-page .timeline-rules>div{background:#f7f6fc;border:1px solid #efedf7;border-radius:15px;padding:16px;text-align:left}
.timeline-page .timeline-rules strong{font-family:inherit;font-size:27px;line-height:1.2;color:#20213d}
.timeline-page .timeline-rules strong small{font-size:14px}
.timeline-page .timeline-rules span{display:block;padding:0;background:none;text-align:left;font-size:11px;font-weight:600;text-transform:none;color:#706e84;margin-top:5px}
.timeline-page .timeline-setup form{gap:14px}
.timeline-page .timeline-setup label{font-size:12px;color:#44445f;gap:8px}
.timeline-page .timeline-setup select{width:100%;min-width:0;background:#fff;border:1px solid #d9d8e8;border-radius:12px;min-height:48px;color:#33334f}
.timeline-page .timeline-primary{background:#6654e8;color:#fff;gap:10px;box-shadow:0 5px 12px #6654e821;border-radius:13px;min-height:50px}
.timeline-page .timeline-primary svg{width:20px;height:20px}
.timeline-page .timeline-primary:hover:not(:disabled){background:#5542d1}
.timeline-page .timeline-primary:disabled{cursor:wait;opacity:.65;transform:none}
.timeline-page .timeline-setup form>.button{margin-top:6px;min-height:54px}
.timeline-page .timeline-setup-tip{display:flex;align-items:flex-start;gap:10px;margin:20px 0 0;font-size:12px;color:#66657d;line-height:1.6}
.timeline-setup-tip svg{width:20px;height:20px;flex-shrink:0;color:#6654e8;margin-top:1px}
.timeline-page .timeline-timer-note{font-size:11px;color:#75738a;margin:10px 0 0 30px}
.timeline-page.is-playing .timeline-intro{display:none}
.timeline-page.is-playing .timeline-back{margin-bottom:16px}
.timeline-page .timeline-game{scroll-margin-top:14px}
.timeline-page .timeline-game-head{gap:16px;background:#fff;z-index:5}
.timeline-page .timeline-game-head h2{font-size:29px}
.timeline-page .timeline-clock{width:76px;height:76px;flex-shrink:0;border:4px solid #cfc7fd;background:#f6f3ff;color:#6654e8;transition:none}
.timeline-page .timeline-clock strong{font-size:28px;line-height:1.1;font-variant-numeric:tabular-nums}
.timeline-page .timeline-clock span{font-size:9px;letter-spacing:.2px;color:#78708f}
.timeline-page .timeline-clock.urgent{transform:none;background:#fff0ea;border-color:#ed735e;color:#ae3d29}
.timeline-page .timeline-clock.urgent span{color:#a4493d}
.timeline-round-track{display:flex;align-items:center;max-width:170px;gap:7px;margin:20px 0 0}
.timeline-round-track span{border-radius:50%;width:25px;height:25px;display:grid;place-items:center;font-size:11px;font-weight:800;color:#8a879f;background:#f2f0f8}
.timeline-round-track span.is-current{background:#6654e8;color:#fff;box-shadow:0 0 0 4px #efecff}
.timeline-round-track span.is-done{background:#e4efbb;color:#4b6223}
.timeline-round-track i{height:2px;background:#e8e5f3;width:26px}
.timeline-page .timeline-progress{margin:15px 0;background:#efedf8;height:4px}
.timeline-page .timeline-progress span{background:#6654e8}
.timeline-page .timeline-instruction{font-size:12px;color:#75718a;line-height:1.5}
.timeline-page .timeline-cards{margin:20px 0;gap:10px}
.timeline-page .timeline-card{position:relative;grid-template-columns:34px minmax(0,1fr) auto;gap:14px;background:#fff;border:1px solid #e1deee;border-radius:15px;padding:14px;box-shadow:0 4px 0 #f3f1fa;transition:border-color .15s,box-shadow .15s;outline-offset:3px}
.timeline-page .timeline-card:hover{border-color:#b6a8ec;box-shadow:0 4px 0 #eeebfa}
.timeline-page .timeline-card.dragging{opacity:.4;border-color:#6654e8;background:#f2efff}
.timeline-page .timeline-card[draggable=false]{cursor:default}
.timeline-page .timeline-position{width:32px;height:32px;border-radius:10px;background:#f0ecff;color:#6654e8;font-family:inherit;font-size:15px;font-weight:800}
.timeline-page .timeline-card h3{font-family:inherit;font-size:16px;line-height:1.3;color:#292945;font-weight:800;letter-spacing:-.25px;margin:0 0 5px}
.timeline-page .timeline-card p{font-size:12px;line-height:1.45;color:#737086;margin:0}
.timeline-page .timeline-controls{display:flex;flex-direction:column;gap:4px}
.timeline-page .timeline-controls button{width:44px;height:34px;background:#f2f0fa;border:1px solid #eae6f6;border-radius:9px;color:#55439e;font-size:19px;line-height:1;font-weight:700;touch-action:manipulation}
.timeline-page .timeline-controls button:hover:not(:disabled){background:#e7e0ff}
.timeline-page .timeline-controls button:disabled{opacity:.35;cursor:default}
.timeline-submit-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:4px}
.timeline-submit-bar>span{display:flex;align-items:center;gap:8px;color:#7a758d;font-size:11px}
.timeline-submit-bar>span svg{width:16px;height:16px;flex-shrink:0}
.timeline-loading{display:grid;place-content:center;gap:12px;text-align:center;min-height:250px;font-size:13px;color:#79738e}
.timeline-page .timeline-result{border:0;margin-top:20px;padding-top:0}
.timeline-page .timeline-result-heading{font-family:inherit;gap:15px;background:#f2efff;padding:20px;border:1px solid #e5defc;border-radius:16px}
.timeline-result-heading h3{font-size:18px;line-height:1.3;color:#34304f;margin:0;font-weight:800}
.timeline-page .timeline-result-heading strong{font-family:inherit;font-size:22px;white-space:nowrap;color:#6654e8}
.timeline-page .timeline-result.perfect .timeline-result-heading{background:#eef7d7;border-color:#dcebb6}
.timeline-page .timeline-result.perfect .timeline-result-heading strong{color:#4a6a1f}
.timeline-page .timeline-result-note{color:#756d87;font-size:12px;margin:12px 2px 23px}
.timeline-order-label{font-size:11px;letter-spacing:.5px;text-transform:uppercase;font-weight:800;color:#756d88}
.timeline-page .timeline-correct-order{list-style:none;padding:0;gap:12px;counter-reset:correct-order;margin:13px 0 18px}
.timeline-page .timeline-correct-order li{position:relative;background:#faf8fe;border:1px solid #e6e0f1;border-left:3px solid #afa0d4;border-radius:12px;padding:14px 16px 14px 49px;counter-increment:correct-order}
.timeline-page .timeline-correct-order li:before{content:counter(correct-order);position:absolute;left:15px;top:15px;font-size:14px;font-weight:800;color:#847096}
.timeline-page .timeline-correct-order li.was-correct{background:#f6faef;border-color:#e2ebcf;border-left-color:#8fab56}
.timeline-page .timeline-correct-order li.was-correct:before{color:#617f35}
.timeline-page .timeline-reveal-top strong{color:#3c3650;font-size:14px}
.timeline-page .timeline-reveal-top span{color:#6d5786;background:#ece6f4;padding:2px 7px;border-radius:5px;align-self:flex-start;font-size:11px}
.timeline-page .timeline-correct-order p{color:#746b80;font-size:12px;line-height:1.5;margin-top:6px}
.timeline-placement{display:block;margin-top:7px;font-size:10px;font-weight:700;color:#8d6793}
.was-correct .timeline-placement{color:#5d782f}
.timeline-pair-note{font-size:11px;color:#7d758e;margin:15px 0 20px}
.timeline-page .timeline-finish{max-width:770px;margin:12px auto 0;padding:44px;scroll-margin-top:20px}
.timeline-finish-emblem{display:grid;place-items:center;width:76px;height:76px;margin:0 auto 18px;border-radius:24px;background:#d9f56f;color:#344424;font-size:34px;transform:rotate(-7deg);box-shadow:0 6px 0 #c1df51}
.timeline-page .timeline-rank{background:#f0ecff;color:#6b55ad;font-size:10px;font-weight:800;letter-spacing:.9px;padding:6px 12px}
.timeline-page .timeline-finish h2{font-family:inherit;font-size:72px;line-height:1.15;color:#20213d;margin:16px 0 0;letter-spacing:-3px}
.timeline-page .timeline-finish h2>span{font-size:22px;letter-spacing:-.5px;color:#79738e}
.timeline-page .timeline-finish>p{font-size:14px;color:#7b758b;max-width:510px;margin:12px auto}
.timeline-page .timeline-finish-stats{gap:10px;margin:28px 0}
.timeline-page .timeline-finish-stats div{background:#f7f5fc;border:1px solid #efebf8;border-radius:16px;padding:19px 10px}
.timeline-page .timeline-finish-stats strong{font-family:inherit;font-size:29px;color:#584ca0}
.timeline-page .timeline-finish-stats span{font-size:10px;color:#7c748d}
.timeline-page .timeline-finish .timeline-finish-note{font-size:12px;line-height:1.6;margin-bottom:25px}
.timeline-page .timeline-finish-actions{gap:12px}
.timeline-page .timeline-error p{margin:0}
.timeline-page .timeline-error button{margin-top:12px}
.timeline-page :is(button,select,a,[tabindex="0"]):focus-visible{outline:3px solid #8a76ed;outline-offset:3px}
.timeline-page [tabindex="-1"]:focus{outline:none}
.timeline-page .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:760px){
  .timeline-page .timeline-intro{align-items:center;flex-direction:row}
  .timeline-visual{flex-basis:190px;transform:scale(.78);transform-origin:right center;margin-left:-25px}
  .timeline-page .timeline-intro h1{font-size:48px}
  .timeline-page .timeline-setup-heading{align-items:flex-start}
  .timeline-page .timeline-setup,.timeline-page .timeline-game{padding:24px}
  .timeline-page .timeline-stat{min-width:135px;padding:12px}
}
@media(max-width:620px){
  .timeline-page{padding-top:12px}
  .timeline-page .timeline-intro{margin:17px 0 25px;align-items:flex-start;gap:12px}
  .timeline-page .timeline-intro h1{font-size:45px;letter-spacing:-2px;margin-bottom:13px}
  .timeline-page .timeline-intro p{font-size:13px;max-width:280px}
  .timeline-page .timeline-intro .eyebrow{font-size:9px;letter-spacing:.7px}
  .timeline-visual{display:none}
  .timeline-page .timeline-setup,.timeline-page .timeline-game,.timeline-page .timeline-finish{padding:20px;border-radius:21px}
  .timeline-setup-heading{flex-direction:column;gap:16px}
  .timeline-page .timeline-setup h2{font-size:24px}
  .timeline-page .timeline-stat{align-self:auto;gap:10px;padding:10px 13px;width:100%;justify-content:flex-start}
  .timeline-page .timeline-stat>svg{width:21px;height:21px}
  .timeline-page .timeline-stat>div{display:flex;align-items:baseline;gap:9px}
  .timeline-page .timeline-stat strong{font-size:19px}
  .timeline-page .timeline-stat span{font-size:11px}
  .timeline-page .timeline-rules{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:20px 0}
  .timeline-page .timeline-rules>div{padding:13px}
  .timeline-page .timeline-rules strong{font-size:25px}
  .timeline-page .timeline-rules span{font-size:10px}
  .timeline-page .timeline-setup form{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .timeline-page .timeline-setup label:nth-of-type(3){grid-column:1/-1}
  .timeline-page .timeline-setup select{font-size:16px;padding:10px}
  .timeline-page .timeline-setup-tip{font-size:11px}
  .timeline-page .timeline-timer-note{font-size:10px;margin-left:0}
  .timeline-page .timeline-game{padding:16px;scroll-margin-top:10px}
  .timeline-page .timeline-game-head{position:sticky;top:0;padding:10px 0;margin-top:0;box-shadow:0 2px 0 #fff}
  .timeline-page .timeline-game-head h2{font-size:22px;max-width:220px;line-height:1.2}
  .timeline-page .timeline-game-head .eyebrow{font-size:10px;margin-bottom:6px}
  .timeline-page .timeline-clock{width:61px;height:61px;border-width:3px}
  .timeline-page .timeline-clock strong{font-size:24px}
  .timeline-page .timeline-clock span{font-size:8px}
  .timeline-round-track{margin-top:10px}
  .timeline-page .timeline-progress{margin:12px 0}
  .timeline-page .timeline-instruction{font-size:11px}
  .timeline-page .timeline-cards{gap:10px;margin:15px 0}
  .timeline-page .timeline-card{grid-template-columns:23px minmax(0,1fr) 44px;gap:8px;padding:10px 8px;border-radius:12px}
  .timeline-page .timeline-position{width:23px;height:27px;font-size:12px;border-radius:7px}
  .timeline-page .timeline-card h3{font-size:14px;letter-spacing:-.2px;margin-bottom:4px}
  .timeline-page .timeline-card p{font-size:12px;line-height:1.35}
  .timeline-page .timeline-controls{grid-column:auto;gap:4px}
  .timeline-page .timeline-controls button{width:44px;height:44px;font-size:21px;border-radius:8px}
  .timeline-submit-bar{position:sticky;bottom:0;z-index:4;display:block;background:#fffffff5;border-top:1px solid #efebf7;margin:0 -3px -4px;padding:10px 3px calc(5px + env(safe-area-inset-bottom))}
  .timeline-submit-bar>span{display:none}
  .timeline-submit-bar>.button{width:100%;min-height:48px;font-size:13px}
  .timeline-page .timeline-result-heading{align-items:flex-start;padding:15px;gap:10px;flex-direction:column}
  .timeline-result-heading h3{font-size:17px}
  .timeline-page .timeline-result-heading strong{font-size:21px}
  .timeline-page .timeline-correct-order li{padding:12px 12px 12px 38px}
  .timeline-page .timeline-correct-order li:before{left:12px;top:12px}
  .timeline-page .timeline-reveal-top{gap:5px}
  .timeline-page .timeline-reveal-top strong{font-size:13px}
  .timeline-page .timeline-correct-order p{font-size:12px}
  .timeline-page .timeline-finish{padding:28px 18px}
  .timeline-page .timeline-finish h2{font-size:62px}
  .timeline-page .timeline-finish-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .timeline-page .timeline-finish-stats div{padding:14px 5px;border-radius:12px}
  .timeline-page .timeline-finish-stats strong{font-size:24px}
  .timeline-page .timeline-finish-stats span{font-size:11px;line-height:1.4;display:block;margin-top:4px}
  .timeline-page .timeline-finish-actions{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){.timeline-page *{transition:none!important;animation:none!important;scroll-behavior:auto!important}}