*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:radial-gradient(ellipse at top,#f3fcff,#c4e8ed);color:#35564e;font-family:Arial,"Segoe UI",sans-serif}button{font:inherit;cursor:pointer;min-height:44px;touch-action:manipulation}button:focus-visible{outline:3px solid #126f95;outline-offset:4px}button:disabled{opacity:.5;cursor:default}[hidden]{display:none!important}.game{width:min(1024px,100%);aspect-ratio:1024/715;margin:auto;display:grid;grid-template-rows:97fr 504fr 114fr;overflow:hidden;border-radius:10px;background:#edf6df;box-shadow:0 12px 35px #315b6538;container-type:inline-size}.topbar{background:url('/games/clockTown/aasets/topbar.png') center/100% 100%;display:grid;grid-template-columns:21% 58% 21%;align-items:center;padding:8px 15px 14px;gap:0;direction:ltr}.level-info{display:flex;flex-direction:column;gap:4px;align-items:center;direction:rtl;color:#624e2d;font-size:clamp(12px,1.5cqw,16px)}.level-info small{font-size:12px}.mission{direction:rtl;text-align:center;background:#fffcf2;border-radius:9px;padding:7px 12px;box-shadow:inset 0 2px 5px #7c744d25;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:12px}.mission h1{font-size:clamp(16px,2cqw,21px);margin:0;width:100%}.mission p{font-size:clamp(12px,1.45cqw,15px);margin:5px 0 0}.target{font-size:12px;margin-top:5px}.target b{font-size:18px}.tools{display:flex;justify-content:flex-end;align-items:center;gap:8px}.icon-button{border:0;background:none;padding:0;width:44px;height:44px}.icon-button img{width:100%;height:100%;object-fit:contain;display:block}.icon-button:hover{filter:brightness(1.1)}.play-layout{display:grid;grid-template-columns:60% 40%;direction:ltr;min-height:0;padding:8px;gap:0;background:radial-gradient(ellipse at 90% 10%,#fff5ca,transparent 55%),linear-gradient(135deg,#dff1e9,#eaf4d8)}.town-panel{min-width:0;min-height:0;border-radius:12px;overflow:hidden;background:#e6f3e6}.town-panel svg{width:100%;height:100%;display:block}.clock-panel{direction:rtl;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 2px 0 10px}#clock{display:block;width:100%;max-width:390px;min-height:0;aspect-ratio:1;touch-action:none;user-select:none}#hour-hand,#minute-hand{cursor:grab}#hour-hand:active,#minute-hand:active{cursor:grabbing}.adjust{display:flex;direction:ltr;align-items:center;justify-content:center;gap:20px;margin:5px 0 0}.adjust button{width:44px;border:1px solid #cab080;border-radius:12px;background:linear-gradient(#fffdf4,#f6dfaf);color:#456350;font-size:25px;box-shadow:0 3px 0 #baa06c}.adjust output{font-size:26px;letter-spacing:3px;font-weight:bold;font-variant-numeric:tabular-nums}.bottom-bar{display:grid;grid-template-columns:21% 66% 13%;direction:ltr;align-items:center;gap:0;background:url('/games/clockTown/aasets/bottom_bar.png') center/100% 100%;padding:12px 14px;border-top:2px solid #d7b06b}.action-buttons{padding-right:12px;direction:rtl}.primary{border:1px solid #538c67;border-radius:12px;background:linear-gradient(#83c896,#4a8b61);color:#fff;padding:12px 15px;font-weight:bold;font-size:16px;box-shadow:0 3px 0 #386b47;line-height:1.4}.primary:hover{filter:brightness(1.06)}.action-buttons .primary{width:100%}.feedback-area{direction:rtl;align-self:stretch;display:flex;flex-direction:column;justify-content:center;text-align:center;background:url('/games/clockTown/aasets/hint_frame.png') center/100% 100%;padding:14px 22px;color:#355e69}.feedback-area p{margin:0;font-size:15px;line-height:1.4}.feedback-area .success{color:#326b42;font-weight:bold}#hint-text{margin-top:4px;font-weight:bold;color:#6a542e}.hint-button{justify-self:center;display:flex;flex-direction:column;align-items:center;gap:1px;background:transparent;border:0;color:#604e2f;font-weight:bold;padding:0 12px}.hint-button img{height:42px;width:auto;object-fit:contain}.hint-button[aria-expanded=true]{filter:drop-shadow(0 0 5px #fff8a1)}.door-light{opacity:0;transition:opacity .6s}.building.completed .door-light{opacity:1}.building.current{filter:url(#shadow) brightness(1.04)}#fox{transition:transform 1.3s ease-in-out}#celebration{transition:opacity .5s}dialog{direction:rtl;max-width:min(480px,90vw);border:3px solid #cba15c;border-radius:18px;padding:24px;background:#fffbed;color:#35564e;line-height:1.7}dialog::backdrop{background:#23474480}dialog h2{font-size:23px;margin-top:0}
@media(max-width:700px) and (orientation:portrait){.game{aspect-ratio:auto;grid-template-rows:auto auto auto;border-radius:0}.topbar{grid-template-columns:1fr 1fr;padding:10px 12px 15px;gap:9px}.level-info{align-items:flex-start;font-size:15px}.level-info small{font-size:12px}.mission{grid-row:2;grid-column:1/-1;padding:8px}.mission h1{font-size:19px}.mission p{font-size:14px}.tools{grid-column:2;grid-row:1}.play-layout{grid-template-columns:1fr;gap:10px;padding:8px}.town-panel{aspect-ratio:800/660;max-height:330px}.clock-panel{padding:0 8px 8px}#clock{width:min(100%,350px)}.bottom-bar{grid-template-columns:1fr 70px;padding:10px;gap:8px}.action-buttons{padding:0}.feedback-area{grid-row:2;grid-column:1/-1;min-height:90px;padding:17px 24px}.feedback-area p{font-size:14px}.hint-button{grid-column:2;grid-row:1}.hint-button img{height:34px}.adjust{margin-top:0}}
@media(max-width:850px) and (orientation:landscape){.topbar{padding:5px 10px 10px}.tools{gap:4px}.icon-button{width:36px;height:36px;min-height:36px}.level-info{gap:1px;font-size:12px}.level-info small{font-size:10px}.mission{padding:4px}.mission h1{font-size:15px}.mission p,.target{font-size:11px;margin-top:2px}.target b{font-size:14px}.adjust{gap:12px;margin:0}.adjust button{min-height:36px;width:36px}.adjust output{font-size:21px}#clock{max-height:calc(100% - 39px)}.primary{font-size:13px;padding:8px}.feedback-area p{font-size:12px}.bottom-bar{padding:8px}.hint-button img{height:30px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
/* Level navigation. */
.level-controls{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap}
/* Opening screen */
.welcome{width:min(1024px,100%);min-height:715px;margin:auto;display:grid;grid-template-columns:1fr 1fr;direction:ltr;border-radius:16px;overflow:hidden;background:#fffcf1;box-shadow:0 12px 35px #315b6538}
.welcome-art{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:32px 20px;background:linear-gradient(#dceee233,#dceee233),url('/games/clockTown/aasets/school-background-v2.png') center/cover;direction:rtl}
.welcome-art:after{content:'';position:absolute;inset:55% 0 0;background:linear-gradient(transparent,#244f46b0);z-index:-1}
.welcome-badge,.welcome-art-caption{background:#fff9e8ed;padding:12px 18px;border-radius:22px;text-align:center;font-weight:bold;color:#52694e;box-shadow:0 4px 15px #234c3820}
.welcome-art-caption{background:transparent;color:white;font-size:21px;text-shadow:0 2px 6px #21473c}
.welcome-rabbit{position:absolute;width:85%;height:76%;bottom:60px;filter:drop-shadow(0 12px 8px #244b4830);z-index:-1}
.welcome-content{direction:rtl;padding:38px 34px;align-self:center}.welcome-eyebrow{font-size:14px;font-weight:bold;color:#658264}.welcome-content h1{font-size:62px;line-height:1.03;letter-spacing:-2px;margin:12px 0 16px;color:#355e4e}.welcome-lead{font-size:18px;line-height:1.6;margin:0 0 24px}.welcome-levels{border:0;margin:0;padding:0;display:grid;gap:12px}.welcome-levels legend{font-weight:bold;padding:0;margin-bottom:12px}.level-card{display:flex;align-items:center;gap:10px;padding:15px 12px;border:2px solid #e0dfcc;border-radius:14px;background:white;cursor:pointer}.level-card:has(input:checked){border-color:#629570;background:#edf5e5;box-shadow:0 3px 0 #d4e4c9}.level-card input{accent-color:#497553;width:19px;height:19px;flex-shrink:0}.level-card strong,.level-card small{display:block}.level-card strong{font-size:16px}.level-card small{font-size:13px;line-height:1.5;margin-top:4px}.level-count{font-size:11px;white-space:nowrap;margin-inline-start:auto;color:#6c785d}.welcome-how{font-size:14px;line-height:1.8;margin:20px 0 16px}.welcome-start{width:100%;font-size:21px}.welcome-note{text-align:center;font-size:12px;color:#607360;margin:14px 0 0}#home-screen{min-height:28px;font-size:12px;border:1px solid #b79a6b;border-radius:7px;background:#fff6dc;color:#624e2d;padding:3px 7px}.leave-actions{display:flex;gap:12px;flex-wrap:wrap}.leave-actions>button{border-radius:10px;padding:10px 16px}input:focus-visible{outline:3px solid #126f95;outline-offset:4px}
@media(max-width:700px){.welcome{grid-template-columns:1fr;min-height:0;border-radius:0}.welcome-art{height:240px;padding:14px}.welcome-rabbit{height:210px;bottom:0;width:190px;left:12px}.welcome-badge{font-size:13px;align-self:flex-end;max-width:58%}.welcome-art-caption{font-size:15px;align-self:flex-end;max-width:58%}.welcome-content{padding:24px}.welcome-content h1{font-size:44px;margin:8px 0 12px}.welcome-content h1 br{display:none}.welcome-lead{font-size:16px;margin-bottom:18px}.level-card{padding:13px 10px}.welcome-how{margin:16px 0}.welcome-note{font-size:12px}}
/* Level-one completion */
.completion-art{background-image:linear-gradient(#dceee233,#dceee233),url('/games/clockTown/aasets/playground-background-v1.png')}.completion .welcome-content{padding:28px 30px}.completion .welcome-content h1{font-size:54px}.completion .welcome-lead{font-size:17px;margin-bottom:18px}.completion-stars{position:absolute;top:110px;color:#ffe3a0;font-size:40px;text-shadow:0 2px 5px #6b5927;animation:completion-sparkle 1.6s ease-out both}.completed-activities{list-style:none;padding:0;margin:0;display:grid;gap:8px}.completed-activities li{display:grid;grid-template-columns:38px 1fr 24px;column-gap:10px;align-items:center;padding:9px 12px;background:#eef5e7;border-radius:12px}.completed-activities li>span{grid-row:1/3;font-size:27px;text-align:center}.completed-activities strong{font-size:15px}.completed-activities small{grid-column:2;font-size:13px;line-height:1.5;color:#607360}.completed-activities b{grid-column:3;grid-row:1/3;color:#4c855e;font-size:23px}.completion-invite{font-size:14px;line-height:1.65;margin:16px 0}.completion-actions{display:flex;gap:10px;margin-top:14px}.completion-actions button{flex:1;border:1px solid #b8cbb1;border-radius:10px;background:#fffdf5;color:#456350;font-size:14px;padding:9px}.completion-actions button:hover{background:#edf5e5}@keyframes completion-sparkle{from{opacity:0;transform:translateY(14px) scale(.85)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:700px){.completion .welcome-content{padding:24px}.completion .welcome-content h1{font-size:42px}.completion-stars{top:100px;right:30px;font-size:30px}}
#complete-title:focus{outline:none}

.is-level-two .completion-actions{flex-direction:column}.is-level-two .completion-actions .primary{background:linear-gradient(#83c896,#4a8b61);color:#fff;border-color:#538c67;font-size:21px;padding:12px 15px}

/* Keep the target prominent within the existing top bar. */
.mission{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;text-align:right;padding:6px 10px}
.mission h1{grid-column:1;grid-row:1;font-size:clamp(15px,1.8cqw,19px)}
.mission p{grid-column:1;grid-row:2;margin:3px 0 0;font-size:clamp(12px,1.3cqw,14px)}
.target{grid-column:2;grid-row:1/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;margin:0;padding:3px 12px;border:1px solid #dfbd70;border-radius:10px;background:#fff0c9;color:#594623;font-size:15px;font-weight:bold;white-space:nowrap}
.target b{font-size:38px;line-height:1.05;letter-spacing:1px;font-variant-numeric:tabular-nums;color:#35564e}
.attention-cue{animation:action-nudge 1s ease-in-out 3}
@keyframes action-nudge{0%,100%{transform:scale(1);box-shadow:0 3px 0 #386b47,0 0 0 0 #e9bd5555}50%{transform:scale(1.045);box-shadow:0 3px 0 #386b47,0 0 0 7px #e9bd5540}}
@media(max-width:850px) and (orientation:landscape){.mission{column-gap:7px;padding:4px 7px}.target{font-size:13px;padding:2px 7px}.target b{font-size:30px}.mission h1{font-size:14px}.mission p{font-size:11px}}
@media(max-width:700px) and (orientation:portrait){.mission{column-gap:10px;padding:10px}.mission h1{font-size:17px}.mission p{font-size:13px}.target{font-size:14px;padding:5px 9px}.target b{font-size:36px}}
@media(prefers-reduced-motion:reduce){.attention-cue{animation:none;outline:3px solid #d9af4f;outline-offset:4px}}
.mission p{font-size:clamp(14px,1.55cqw,16px)}@media(max-width:850px) and (orientation:landscape){.mission p{font-size:12px}}@media(max-width:700px) and (orientation:portrait){.mission p{font-size:15px}}

.voice-trial-note{display:block;font-size:12px;line-height:1.5;margin-top:5px;color:#607360}

/* Matching analog/digital times in each completed activity. */
.completed-activities li{grid-template-columns:30px minmax(0,1fr) 60px 54px 20px;column-gap:8px;padding:7px 10px;min-height:68px}
.completed-activities li>span{grid-column:1;font-size:25px}
.completed-activities strong{grid-column:2;grid-row:1;align-self:end}
.completed-activities small{grid-column:2;grid-row:2;align-self:start}
.completed-activities b{grid-column:5}
.completion-digital{grid-column:3;grid-row:1/3;text-align:center;font-size:22px;font-weight:bold;font-variant-numeric:tabular-nums;color:#35564e;white-space:nowrap}
.completion-clock{grid-column:4;grid-row:1/3;display:block;width:54px;height:54px;direction:ltr}
@media(max-width:420px){.completed-activities li{grid-template-columns:24px minmax(0,1fr) 51px 46px 16px;column-gap:5px;padding:7px 8px}.completed-activities strong{font-size:14px}.completed-activities small{font-size:12px}.completion-digital{font-size:19px}.completion-clock{width:46px;height:46px}.completed-activities li>span{font-size:22px}}
/* Localized copy can wrap without squeezing the scene or hiding controls. */
body{font-family:Arial,"Segoe UI","Nirmala UI",sans-serif}
.welcome-content,.welcome-art,.level-info,.mission,.clock-panel,.action-buttons,.feedback-area,dialog{direction:var(--text-direction,rtl)}
.mission{text-align:start;min-width:0}.mission h1,.mission p{overflow-wrap:anywhere}
.game{aspect-ratio:auto;grid-template-rows:auto auto auto}
.topbar{min-height:97px}.play-layout{height:clamp(280px,49.22vw,504px)}
.bottom-bar{min-height:114px}.level-info{min-width:0;text-align:center}
.level-info>strong{overflow-wrap:anywhere}.level-controls{gap:4px}
#level-select{max-width:100%;font:inherit;font-size:12px;min-height:28px}
.action-buttons button{max-width:100%;overflow-wrap:anywhere}
#replay-scene{margin-top:5px;font-size:13px;border:1px solid #b8cbb1;border-radius:9px;background:#fffdf5;color:#456350;padding:6px}
.feedback-area{min-width:0}.feedback-area p{overflow-wrap:anywhere}
.target{white-space:normal;text-align:center;max-width:155px;min-width:108px;line-height:1.2}
.target b{white-space:nowrap}.hint-button{max-width:100%;overflow-wrap:anywhere}
.welcome-content{min-width:0}.welcome-content h1{font-size:clamp(36px,4.8vw,54px);line-height:1.13;letter-spacing:-1px;overflow-wrap:anywhere}
.level-card>span:not(.level-count){min-width:0}.level-count{white-space:normal;flex:0 0 52px;text-align:center}
.welcome-badge,.welcome-art-caption,.completed-activities strong,.completed-activities small{overflow-wrap:anywhere}
.completed-activities strong{line-height:1.3}.completion-actions button{min-width:0;overflow-wrap:anywhere}
dialog{width:480px;max-height:85dvh;overflow-y:auto;overflow-wrap:anywhere}dialog button{max-width:100%}
html[lang=si] .mission h1,html[lang=si] .welcome-content h1{line-height:1.5;letter-spacing:normal}
@media(max-width:850px) and (orientation:landscape){
  .topbar{grid-template-columns:22% 57% 21%}.mission p{display:none}.mission h1{grid-row:1/3}
  .target{max-width:130px;min-width:90px;font-size:12px}.target b{font-size:30px}
  .bottom-bar{grid-template-columns:25% 62% 13%}.feedback-area{padding:12px 18px}
}
@media(max-width:700px) and (orientation:portrait){
  .topbar{grid-template-columns:minmax(0,1fr) auto}.level-info{align-items:flex-start;text-align:start}
  .level-info>strong,#mission-number,.mission p,.welcome-note,.voice-trial-note{display:none}
  .mission h1{grid-row:1/3}.mission{column-gap:8px}.target{max-width:128px;min-width:102px}
  .play-layout{height:auto}.town-panel{max-height:250px}.clock-panel{padding-bottom:4px}
  #clock{width:min(100%,290px)}#adjust-help{text-align:center;font-size:12px}
  .feedback-area{min-height:78px}.bottom-bar{min-height:0}
  .welcome-content,.completion .welcome-content{padding:20px 16px}
  .welcome-content h1,.completion .welcome-content h1{font-size:36px;line-height:1.2}
  .welcome-start{font-size:19px}.completed-activities small{font-size:12px}
  .completed-activities li{min-height:68px}.welcome-how{line-height:1.6}
}
@media(max-width:360px){.completed-activities li{grid-template-columns:21px minmax(0,1fr) 48px 44px 14px;column-gap:4px;padding:7px 6px}.completion-clock{width:44px;height:44px}.completion-digital{font-size:18px}.completed-activities strong{font-size:13px}.level-count{flex-basis:42px}}
@media(max-width:700px) and (orientation:portrait){.town-panel{justify-self:center}}

/* Keep incomplete scene artwork hidden while the host displays its loader. */
html.clock-town-loading body > main { visibility: hidden; }