@font-face{font-family:ClockYekan;src:url('../fonts/BYekan.ttf');font-display:swap}
body.clock-adventure .wrapper{background:#36be88 url('../assets/group-games/garden.jpg') center top/cover fixed!important}
#clockWorld,#clockWorld *{box-sizing:border-box;font-family:ClockYekan,Tahoma,sans-serif}
#clockWorld{max-width:1000px;width:calc(100% - 24px);margin:20px auto;padding:16px;background:#fff2c4ef;border:4px solid white;border-radius:28px;box-shadow:0 7px #d7a329;color:#4d386b}
#clockWorld [hidden]{display:none!important}
#clockWorld header{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;background:#11b5ac;border:3px solid #c4fff1;border-radius:18px;padding:10px;box-shadow:0 5px #058385}
#clockWorld h1{font-size:29px;color:white;text-shadow:0 3px #077a86;margin:0}
#clockWorld header>div{justify-self:end;color:white;white-space:nowrap}
#clockWorld button,#clockWorld header a{position:relative;border:2px solid white;border-radius:12px;padding:8px 14px;background:linear-gradient(#ffe37a,#ffb921);box-shadow:0 4px #cf8e15;color:#533b0c;font-size:16px;cursor:pointer;text-decoration:none;transition:transform .18s}
#clockWorld header a{justify-self:start;font-size:12px}
#clockWorld button:hover:not(:disabled){transform:translateY(-3px)}
#clockWorld button:disabled{opacity:.65;cursor:default}
#clockWorld button[aria-pressed=true]:not(#clockSound){outline:3px solid #ec419b;outline-offset:2px}
#clockSound{font-size:24px!important;padding:2px 10px!important}
#clockSound.muted:after{content:'';position:absolute;top:50%;left:5px;right:5px;height:3px;background:#d32961;transform:rotate(-45deg)}
#clockWorld .clock-settings{display:flex;justify-content:center;gap:14px;margin:18px 0 5px}
#clockWorld label{display:block;font-size:14px;text-align:center;min-width:0}
#clockWorld select{display:block;max-width:100%;padding:7px;border:2px solid #22b6a2;border-radius:10px;background:white;color:#4d386b;margin-top:4px}
#clockWorld .clock-guide{display:flex;align-items:center;justify-content:center;gap:10px;max-width:580px;margin:auto}
#clockBear{width:90px;height:90px;flex:0 0 90px;background:url('../assets/addition/bear-states.png') 0 0/300% 100%;filter:drop-shadow(0 3px 2px #76552244)}
#clockBear.happy{background-position:50% 0;animation:clockDance .55s 3}
#clockBear.thinking{background-position:100% 0;animation:clockThink .6s}
#clockPrompt{background:white;padding:10px 15px;border:2px solid #ffcf48;border-radius:17px;font-size:16px}
#clockWorld .clock-play{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center;direction:ltr;max-width:820px;margin:5px auto 15px}
#clockWorld .clock-house{background:#fa6855;border:4px solid #fff;border-radius:24px;padding:8px 13px;box-shadow:0 6px #c73d38;text-align:center;position:relative}
#clockWorld .clock-roof{background:#1977cc;border:3px solid #b8edff;border-radius:20px 20px 8px 8px;font-size:26px;margin:-5px 18px 6px;color:#ffe536}
#clockFace{display:block;width:100%;max-width:350px;margin:auto;user-select:none}
#clockFace.interactive{touch-action:none;cursor:grab}
#clockNumbers{fill:#5a3b76;font-size:23px;font-weight:bold}
#clockWorld .clock-legend{direction:rtl;background:white;border-radius:10px;padding:5px;font-size:12px;margin:7px 0 0}
#clockWorld .clock-legend span:first-child{color:#146cb3}#clockWorld .clock-legend span:last-child{color:#ba216c}
#clockWorld .clock-answer{direction:rtl;text-align:center;background:#fffef4;border:3px solid #ffcf4b;border-radius:22px;padding:18px 12px;min-width:0}
#clockTask{font-size:23px;line-height:1.7;margin:0 0 14px}
#clockRead{display:flex;direction:ltr;align-items:end;justify-content:center;gap:8px}
#clockRead input{display:block;width:90px;max-width:100%;border:2px solid #a36cdc;border-radius:12px;height:48px;text-align:center;font-size:23px;margin:5px 0 12px}
#clockRead b{font-size:28px;margin-bottom:15px}
#clockChoices{display:grid;gap:10px;margin:10px 0 18px}
#clockWorld #clockChoices button{font-size:17px;background:linear-gradient(#b7f873,#7cde38);box-shadow:0 4px #56a329;color:#25420c}
#clockWorld .clock-hand-choice{display:flex;gap:7px;justify-content:center;margin:12px 0}
#clockWorld .clock-hand-choice button{font-size:13px;padding:7px}
#clockWorld #clockPickHour{background:#248bd7;color:white;box-shadow:0 4px #16619b}
#clockWorld #clockPickMinute{background:#eb4d98;color:white;box-shadow:0 4px #b52869}
#clockWorld .clock-adjust{display:flex;align-items:center;justify-content:center;gap:10px;margin:15px 0}
#clockWorld .clock-adjust output{font-size:13px}
#clockWorld #clockCheck{background:linear-gradient(#32d9b4,#0baa84);box-shadow:0 4px #087d61;color:white;margin-top:12px;min-width:120px}
#clockFeedback{min-height:25px;margin:14px 0 0;font-size:16px}
#clockHintText{font-size:13px;line-height:1.9;margin-bottom:0}
#clockWorld nav{display:flex;justify-content:space-between;gap:10px;margin-top:18px}
#clockWorld #clockNext{background:linear-gradient(#bb90ff,#9660e4);box-shadow:0 4px #6936ac;color:white}
#clockWorld :focus-visible{outline:3px solid #8b3bce;outline-offset:3px}
@keyframes clockDance{40%{transform:translateY(-13px) rotate(-8deg)}75%{transform:rotate(8deg)}}
@keyframes clockThink{35%{transform:rotate(-7deg)}75%{transform:rotate(4deg)}}
@media(max-width:600px){body.clock-adventure .wrapper{background-attachment:scroll!important}#clockWorld{width:calc(100% - 12px);padding:9px;margin:10px 6px}#clockWorld header{gap:5px;padding:7px}#clockWorld h1{font-size:19px}#clockWorld header a{font-size:10px;padding:6px}#clockWorld header>div{font-size:11px}#clockWorld .clock-settings{gap:7px}#clockWorld select{font-size:12px}#clockWorld .clock-play{grid-template-columns:1fr;gap:15px}#clockWorld .clock-house{max-width:280px;width:100%;margin:auto}#clockBear{width:70px;height:70px;flex-basis:70px}#clockPrompt{font-size:13px}#clockWorld .clock-answer{padding:10px}#clockTask{font-size:20px;margin-bottom:7px}#clockChoices{grid-template-columns:1fr 1fr}#clockWorld #clockChoices button{font-size:14px}#clockWorld nav{margin-top:12px}}
#clockWorld .clock-control-row{display:grid;grid-template-columns:70px minmax(0,1fr) minmax(0,1fr);align-items:center;gap:9px;margin:16px 0;direction:rtl}
#clockWorld .clock-control-row button{font-size:15px;padding:9px 5px;min-height:44px;white-space:nowrap}
#clockWorld .clock-control-row button:first-child{font-weight:bold}
@media(max-width:360px){#clockWorld .clock-control-row{grid-template-columns:60px minmax(0,1fr) minmax(0,1fr);gap:6px}#clockWorld .clock-control-row button{font-size:13px}}
@media(prefers-reduced-motion:reduce){#clockWorld *{animation:none!important;transition:none!important}}