body.calendar-game { background:#e7f4ef; color:#244e56; }
.calendar-game > header,.calendar-game > footer { display:none; }
.calendar-game #app { width:min(1100px,100%); max-width:1100px; min-height:100dvh; margin:auto; padding:0 18px 16px; background:#fffdf5; }
.ct-shell { font-family:Library,'Trebuchet MS',sans-serif; letter-spacing:0; }
.ct-shell * { box-sizing:border-box; }
.ct-shell h1,.ct-shell h2,.ct-shell h3 { font-family:inherit; }
.ct-shell button,.ct-shell input,.ct-shell a { font:inherit; }
.ct-shell button,.ct-shell a.ct-secondary { min-width:48px; min-height:48px; padding:10px 14px; border-radius:8px; font-weight:700; line-height:1.2; cursor:pointer; }
.ct-shell button:disabled { cursor:default; opacity:.7; }
.ct-shell :focus-visible { outline:3px solid #b36dc5; outline-offset:3px; }
.ct-primary { color:#fff; background:#247d83; border:2px solid #1e666c; box-shadow:0 3px 0 #185a61; }
.ct-primary:hover { background:#1e6971; }
.ct-secondary { display:inline-flex; align-items:center; justify-content:center; color:#305e64; background:#fffef7; border:1px solid #a8c7c4; text-decoration:none; }
.ct-secondary:hover { background:#e5f4ef; }
.ct-toolbar { display:flex; gap:9px; align-items:center; padding:8px 0; border-bottom:1px solid #cfe3da; }
.ct-toolbar > div { flex:1; min-width:0; }
.ct-toolbar h1 { font-size:18px; line-height:1.2; margin:0 0 3px; }
.ct-toolbar span { font-size:12px; }
.ct-toolbar > a { font-size:14px; white-space:nowrap; }
.ct-sound { width:48px; padding:4px!important; font-size:25px!important; }
.ct-effects { display:flex; gap:5px; align-items:center; font-size:12px; min-height:48px; }
.ct-effects input { accent-color:#247d83; width:18px; height:18px; }
.ct-stops { display:flex; justify-content:center; gap:22px; margin:4px 0; }
.ct-stops span { padding:5px 8px; font-size:14px; border-bottom:3px solid transparent; color:#738e8c; }
.ct-stops .ct-active { border-color:#edba45; color:#35616b; font-weight:800; }
.ct-mission { margin:6px 0 9px; padding:8px 13px; background:#fff0c8; border-left:4px solid #e9b84e; }
.ct-mission > span { font-size:12px; color:#8b5968; font-weight:800; }
.ct-mission h2 { font-size:20px; line-height:1.35; margin:3px 0 0; }
.ct-workspace { display:grid; grid-template-columns:300px minmax(0,1fr); gap:20px; align-items:center; min-height:365px; }
.ct-workspace > * { min-width:0; }
.ct-has-calendar { grid-template-columns:minmax(0,1fr) 440px; }
.ct-console { margin:0; min-width:0; }
.ct-cabin { align-self:start; display:flex; flex-direction:column; gap:8px; padding:12px; background:#d8efeb; border:3px solid #6caaa9; border-radius:8px; box-shadow:inset 0 0 0 4px #f2faf1; }
.ct-start-readout { display:flex; flex-direction:column; gap:3px; }
.ct-start-readout small { font-size:13px; }
.ct-start-readout strong { font-size:18px; line-height:1.3; }
.ct-window { height:160px; border:5px solid #e1b865; border-radius:8px; background:#f8f3dc; }
.ct-window img,.ct-window .ct-postcard { display:block; width:100%; height:150px; aspect-ratio:auto; object-fit:contain; }
.ct-has-calendar .ct-window { height:130px; }
.ct-has-calendar .ct-window img,.ct-has-calendar .ct-window .ct-postcard { height:120px; }
.ct-postcard { display:block; width:100%; aspect-ratio:300/170; }
.ct-arrival { display:flex; flex-direction:column; justify-content:center; gap:3px; min-height:76px; padding:8px 10px; background:#fffdf0; border:2px solid #d6be7a; border-radius:5px; }
.ct-arrival span { font-size:12px; font-weight:700; }
.ct-arrival strong { font-size:20px; line-height:1.25; }
.ct-calendar { width:100%; }
.ct-calendar-nav { display:grid; grid-template-columns:48px 1fr 48px; gap:8px; align-items:center; }
.ct-calendar-nav h3 { margin:0; font-size:21px; text-align:center; }
.ct-arrow { width:48px; height:48px; min-width:48px; padding:3px!important; border:1px solid #91b8b8; background:#edf6f2; color:#275f66; font-size:26px!important; }
.ct-daynames,.ct-dategrid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
.ct-daynames { text-align:center; margin:6px 0; font-size:13px; font-weight:800; }
.ct-dategrid > button { height:48px; min-width:0!important; min-height:48px; padding:2px!important; border:1px solid #bbd6cd; background:#fffef9; color:#2b5661; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.ct-dategrid button > span { font-size:19px; font-weight:800; line-height:1; }
.ct-dategrid button > small { display:block; height:13px; font-size:9px; line-height:13px; }
.ct-dategrid button:hover { background:#fff0c8; }
.ct-dategrid .ct-start { border:3px double #b36c7d; background:#fff2f2; }
.ct-dategrid .ct-picked { border:3px solid #247d83; background:#dcf3e7; }
.ct-stepper { display:grid; grid-template-columns:48px minmax(0,1fr) 48px; align-items:center; gap:5px; }
.ct-stepper > span { font-size:14px; text-align:center; font-weight:700; }
.ct-step-note { font-size:12px; margin:0; line-height:1.35; text-align:center; }
.ct-practice-note { font-size:14px; margin:0; line-height:1.4; }
.ct-scale { display:flex; flex-direction:column; gap:16px; }
.ct-scale > p { font-size:16px; text-align:center; margin:0; }
.ct-choices { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.ct-choices button { border:2px solid #99c8c1; background:#f0f8ec; color:#275e65; padding:9px 4px!important; min-width:0!important; font-size:16px; }
.ct-choices button[aria-pressed="true"],.ct-month-ring button[aria-pressed="true"] { border:3px solid #277b83; background:#ffe49c; }
.ct-parts { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ct-parts button { min-height:65px; }
.ct-day-cycle { display:block; width:100%; height:200px; margin:auto; font-family:inherit; }
.ct-fact .ct-console { display:grid; grid-template-columns:minmax(0,1fr) 185px; gap:12px; align-items:center; }
.ct-numeric { display:flex; flex-direction:column; gap:7px; align-items:center; }
.ct-numeric > label { font-size:16px; text-align:center; font-weight:700; }
.ct-numeric > input { height:54px; width:110px; border:2px solid #70aaa7; border-radius:5px; background:#fffef7; color:#285d64; font-size:28px; text-align:center; font-weight:800; }
.ct-keypad { display:grid; grid-template-columns:repeat(3,48px); gap:5px; }
.ct-keypad button { width:48px; height:48px; padding:4px!important; border:1px solid #b9b0d0; background:#f3eaf8; color:#5d5276; font-size:21px; }
.ct-week-list { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.ct-week-list li { border-left:4px solid #edbf56; background:#f5f2dc; padding:7px 10px; font-size:16px; }
.ct-month-ring { position:relative; width:100%; height:330px; }
.ct-month-ring::before { content:''; position:absolute; inset:9% 11%; border:15px solid #e2cfef; border-radius:50%; }
.ct-month-ring > span,.ct-month-ring > button { position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%); width:83px; min-height:48px; display:flex; justify-content:center; align-items:center; background:#fff4cc; border:1px solid #d8bf7c; border-radius:6px; padding:3px!important; font-size:13px; font-weight:800; color:#3d6871; }
.ct-ring-center { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:40px; font-weight:800; line-height:1.1; text-align:center; color:#916ba5; }
.ct-ring-center small { font-size:14px; }
.ct-feedback { display:flex; align-items:center; min-height:88px; margin:8px 0; padding:7px 12px; background:#f3eafa; border-left:4px solid #ad91bd; font-size:15px; line-height:1.35; }
.ct-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.ct-actions > .ct-primary { min-width:170px; }
.ct-cover { padding:24px 0 12px; text-align:center; }
.ct-cover h2 { font-size:34px; line-height:1.2; margin:10px 0 14px; }
.ct-cover > p:not(.ct-eyebrow) { max-width:700px; font-size:18px; line-height:1.5; margin:0 auto 18px; }
.ct-eyebrow { color:#9275a2; font-size:14px; }
.ct-cover img { display:block; width:min(700px,100%); aspect-ratio:3/2; object-fit:cover; border-radius:8px; margin:20px auto 12px; }
.ct-cover > span { font-size:14px; }
.ct-help { position:fixed; inset:0; width:min(540px,calc(100% - 24px)); max-height:calc(100dvh - 24px); margin:auto; z-index:20; background:#fffdf5; color:#285661; border:3px solid #87b6b4; border-radius:8px; padding:22px; box-shadow:0 0 0 100vmax #21495666; overflow:auto; }
.ct-help h2 { font-size:23px; margin:0 0 14px; }
.ct-help p { font-size:17px; line-height:1.5; }
.ct-finish { padding:18px 0; }
.ct-finish > h2 { font-size:30px; margin:0 0 8px; }
.ct-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:20px 0; }
.ct-summary > div { border-top:4px solid #e3b758; display:flex; flex-direction:column; gap:4px; padding:10px 0; }
.ct-summary strong { font-size:33px; color:#247d83; }
.ct-summary span { font-size:15px; }
.ct-album { margin:14px 0; }
.ct-album-main { display:grid; grid-template-columns:300px minmax(0,1fr); gap:20px; align-items:start; }
.ct-album-main h3 { font-size:21px; margin:0 0 8px; }
.ct-album-main p { font-size:16px; line-height:1.4; margin:8px 0; }
.ct-album-tabs { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0; }
.ct-album-tabs button { border:1px solid #9cbfb5; background:#eef4e6; color:#31636a; }
.ct-album-tabs [aria-pressed="true"] { background:#ffe7a8; border:3px solid #3a8586; }
.ct-finish details { padding:12px 0; border-bottom:1px solid #d1dfd3; }
.ct-finish summary { cursor:pointer; min-height:28px; font-weight:700; }
.ct-finish details p { font-size:16px; line-height:1.5; }
.ct-bonus { display:flex; gap:8px; }
.ct-bonus button { border:1px solid #87b2b2; background:#f3eafa; color:#3b626d; }
.ct-flying .ct-window { animation:ct-travel .65s ease-in-out; }
@keyframes ct-travel { 0%,100% { transform:translateY(0); } 30% { transform:translateY(-5px); box-shadow:0 0 0 5px #f0c960; } 60% { transform:translateY(3px); box-shadow:0 0 0 8px #c4a1da; } }
@media (min-width:901px) and (max-height:740px) { .ct-toolbar { padding:5px 0; } .ct-stops { margin:1px 0; } .ct-mission { margin:3px 0 6px; padding:6px 11px; } .ct-workspace { min-height:340px; } .ct-cabin { padding:9px; gap:6px; } .ct-window img { max-height:155px; } .ct-has-calendar .ct-window img { max-height:160px; } .ct-feedback { min-height:58px; margin:6px 0; } }
@media (max-width:1000px) { .ct-workspace { grid-template-columns:260px minmax(0,1fr); gap:12px; } .ct-has-calendar { grid-template-columns:minmax(0,1fr) 390px; } .ct-fact .ct-console { grid-template-columns:minmax(0,1fr) 160px; gap:5px; } .ct-month-ring > span,.ct-month-ring > button { width:73px; font-size:12px; } }
@media (max-width:800px) { .ct-toolbar { flex-wrap:wrap; } .ct-toolbar > div { min-width:240px; } .ct-effects { margin-left:auto; } .ct-workspace,.ct-has-calendar { grid-template-columns:minmax(0,1fr) 370px; align-items:start; } .ct-workspace:not(.ct-has-calendar) { grid-template-columns:1fr; } .ct-workspace:not(.ct-has-calendar) .ct-cabin { display:grid; grid-template-columns:1fr 1fr; } .ct-workspace:not(.ct-has-calendar) .ct-window { display:none; } .ct-practice-note { grid-column:1/-1; } .ct-fact .ct-console { grid-template-columns:minmax(0,1fr) 185px; } .ct-has-calendar .ct-window img { aspect-ratio:1; object-fit:cover; } .ct-month-ring { max-width:460px; margin:auto; } .ct-month-ring > span,.ct-month-ring > button { width:83px; font-size:13px; } .ct-choices { grid-template-columns:repeat(4,minmax(0,1fr)); } .ct-parts { grid-template-columns:repeat(2,minmax(0,1fr)); } .ct-feedback { min-height:76px; } }
@media (max-width:600px) { .calendar-game #app { padding:0 10px 16px; } .ct-toolbar { gap:6px; } .ct-toolbar > div { min-width:0; flex-basis:calc(100% - 160px); } .ct-toolbar h1 { font-size:16px; } .ct-toolbar > a { font-size:12px; padding:8px!important; } .ct-toolbar > button[data-ct-action="help"] { font-size:13px; } .ct-effects { margin-left:0; } .ct-stops { gap:4px; justify-content:space-between; } .ct-stops span { font-size:13px; padding:5px 7px; } .ct-mission h2 { font-size:18px; } .ct-workspace,.ct-has-calendar { grid-template-columns:1fr; gap:12px; min-height:0; } .ct-workspace .ct-cabin { display:grid; grid-template-columns:1fr 1fr; padding:8px; gap:7px; } .ct-window { display:none!important; } .ct-start-readout strong { font-size:16px; } .ct-arrival { min-height:72px; padding:6px; } .ct-arrival strong { font-size:17px; } .ct-cabin .ct-stepper,.ct-cabin .ct-step-note { grid-column:1/-1; } .ct-calendar { max-width:440px; margin:auto; } .ct-daynames,.ct-dategrid { gap:3px; } .ct-dategrid > button { height:48px; } .ct-dategrid button > small { font-size:8px; } .ct-fact .ct-console { display:flex; flex-direction:column; gap:10px; } .ct-fact .ct-month-ring { height:auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; } .ct-fact .ct-month-ring::before,.ct-fact .ct-ring-center { display:none; } .ct-fact .ct-month-ring > span { position:static; transform:none; width:auto; min-height:32px; font-size:13px; } .ct-interactive-ring { display:grid; height:auto; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-bottom:10px; } .ct-interactive-ring::before,.ct-interactive-ring .ct-ring-center { display:none; } .ct-interactive-ring > button { position:static; transform:none; width:auto; font-size:13px; } .ct-numeric { display:grid; grid-template-columns:minmax(0,1fr) 154px; gap:7px 15px; width:100%; } .ct-numeric > label { grid-column:1; } .ct-numeric > input { grid-column:1; justify-self:center; align-self:start; } .ct-keypad { grid-column:2; grid-row:1/3; } .ct-day-cycle { padding:8px; font-size:18px; } .ct-week-list { display:flex; flex-wrap:wrap; gap:4px; } .ct-week-list li { padding:5px; font-size:13px; } .ct-choices { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; } .ct-feedback { min-height:88px; padding:8px; font-size:14px; } .ct-actions > .ct-primary { flex:1; } .ct-actions button { font-size:14px; } .ct-cover { padding:14px 0; } .ct-cover h2 { font-size:28px; } .ct-cover > p:not(.ct-eyebrow) { font-size:16px; } .ct-cover img { margin:15px auto 10px; } .ct-album-main { grid-template-columns:1fr; gap:12px; } .ct-album-main svg { max-width:350px; margin:auto; } .ct-summary { gap:8px; } .ct-summary span { font-size:12px; } .ct-summary strong { font-size:28px; } }
@media (prefers-reduced-motion:reduce) { .ct-shell * { animation:none!important; scroll-behavior:auto!important; } }
.ct-still * { animation:none!important; }
@media (max-width:600px) { .ct-stops span { font-size:12px; padding:5px 3px; } }