/* Responsive layout for Urværkstedet. */
.clock-workshop-layout .mt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.clock-workshop-layout .cw-modes{display:none}
.clock-workshop-layout .mt-title,.clock-workshop-layout .mt-header .game-audio-button{display:none}
.clock-workshop-layout .mt-header{display:flex;align-items:center;gap:8px;min-height:52px;border-bottom:1px solid #35415a;padding:4px 0 8px;margin-bottom:8px}
.clock-workshop-layout .mt-brand{color:#25d7ff;font-size:19px;font-weight:900}.clock-workshop-layout .mt-brand span{color:#ff63da}
.clock-workshop-layout .mt-space{flex:1}
.clock-workshop-layout .mt-header button{display:flex;align-items:center;justify-content:center;gap:7px;min-width:44px;min-height:44px;padding:7px 10px}
.clock-workshop-layout .mt-header select{min-height:44px;max-width:100%;padding:8px 30px 8px 10px;border:1px solid #566178;border-radius:8px;background:#192138;color:#f6f7ff;font:700 15px Nunito,system-ui,sans-serif}
.clock-workshop-layout .mt-activity{min-width:0}
.clock-workshop-layout .mt-dialog{width:min(520px,calc(100% - 24px));max-height:calc(100svh - 24px);overflow:auto;background:#111526;color:#f6f7ff;border:1px solid #b968ff;border-radius:12px;padding:18px;font:inherit}
.clock-workshop-layout .mt-dialog::backdrop{background:rgb(0 0 0 / 65%)}
.clock-workshop-layout .mt-dialog-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.clock-workshop-layout .mt-dialog h2{margin:0;color:#25d7ff;font-size:21px}.clock-workshop-layout .mt-dialog-top button{min-width:44px}
.clock-workshop-layout .mt-dialog .cw-toolbar{display:grid;gap:14px}.clock-workshop-layout .mt-dialog .cw-toolbar-field{justify-content:space-between}
.clock-workshop-layout .mt-note,.clock-workshop-layout .mt-dialog p{line-height:1.5}.clock-workshop-layout .mt-note{font-size:14px;color:#c7cee8}
.clock-workshop-layout .mt-dialog .cw-day{margin-top:12px;padding-top:12px}
@media(orientation:landscape){
 body.clock-workshop-layout{padding-top:0}
 .clock-workshop-layout>.site-header,.clock-workshop-layout>footer,.clock-workshop-layout .site-footer{display:none}
 .clock-workshop-layout .ninabella-game-kicker,.clock-workshop-layout .ninabella-game-title,.clock-workshop-layout .ninabella-game-intro{display:none}
 .clock-workshop-layout .ninabella-game-page{padding:6px max(8px,env(safe-area-inset-right)) 6px max(8px,env(safe-area-inset-left));min-height:100svh}
 .clock-workshop-layout .ninabella-game-layout{width:min(1100px,100%)}
 .clock-workshop-layout .ninabella-game-panel{padding:6px 12px;border-radius:14px;min-height:calc(100svh - 12px)}
 .clock-workshop-layout .game-close-button,.clock-workshop-layout .game-mode-toggle{display:none!important}
 .clock-workshop-layout.game-mode-active .ninabella-game-content{padding:0;overflow:auto;scrollbar-gutter:auto}
 .clock-workshop-layout .cw-workspace{grid-template-columns:minmax(210px,.9fr) minmax(0,1.3fr);gap:20px;padding-top:0}
 .clock-workshop-layout .cw-clock-area{width:100%;display:flex;flex-direction:column;align-items:center;margin:0}
 .clock-workshop-layout .cw-clock{width:min(100%,calc(100svh - 110px),440px)}
 .clock-workshop-layout .cw-hand-picker{margin:0 0 8px;gap:18px;font-size:12px}.clock-workshop-layout .cw-hand-picker span{min-height:24px}.clock-workshop-layout .cw-hand-picker i{height:14px;width:7px}
 .clock-workshop-layout .cw-activity{padding:0;align-self:center}
 .clock-workshop-layout .cw-activity h2{font-size:20px;margin-bottom:6px}
 .clock-workshop-layout .cw-day-context{gap:8px;margin:0 0 6px}.clock-workshop-layout .cw-day-context img{width:34px;height:34px;flex-basis:34px}.clock-workshop-layout .cw-day-context p{font-size:15px;margin:0}.clock-workshop-layout .cw-day-context span{display:none}
 .clock-workshop-layout .cw-prompt{font-size:15px;line-height:1.35;min-height:0;margin:0 0 6px}
 .clock-workshop-layout .cw-time{display:flex;align-items:center;gap:14px;padding:4px 0;margin:0 0 7px;border:0}.clock-workshop-layout .cw-time output{font-size:36px}.clock-workshop-layout .cw-time p{font-size:17px;margin:0}
 .clock-workshop-layout .cw-period{margin-bottom:6px}.clock-workshop-layout .cw-period button{font-size:12px;padding:5px 8px;min-height:44px}
 .clock-workshop-layout .cw-adjust,.clock-workshop-layout .cw-presets{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:6px}
 .clock-workshop-layout .cw-adjust button,.clock-workshop-layout .cw-presets button{padding:5px 3px;font-size:13px;min-height:44px}
 .clock-workshop-layout .cw-feedback:empty,.clock-workshop-layout .cw-actions:empty{display:none}.clock-workshop-layout .cw-feedback{min-height:0;margin:4px 0;font-size:14px}
 .clock-workshop-layout .cw-actions{gap:6px}.clock-workshop-layout .cw-actions button{min-height:44px;padding:5px 12px}
 .clock-workshop-layout .cw-answer{margin-bottom:6px;gap:7px}.clock-workshop-layout .cw-answer label{gap:3px;font-size:13px}.clock-workshop-layout .cw-answer input{min-height:44px;width:70px;font-size:22px}.clock-workshop-layout .cw-answer>span{line-height:44px}
 .clock-workshop-layout #cwReadForm{display:flex;align-items:end;gap:12px}.clock-workshop-layout #cwReadForm>button{margin-bottom:6px}
 .clock-workshop-layout .cw-lesson{padding:12px}.clock-workshop-layout .cw-lesson-clock{width:150px;float:left;margin:0 16px 8px 0}.clock-workshop-layout .cw-lesson-copy{min-height:0}.clock-workshop-layout .cw-lesson-copy p{font-size:15px;margin-bottom:8px}.clock-workshop-layout .cw-lesson-actions{clear:both}
 .clock-workshop-layout .cw-page[data-lesson="true"] .cw-activity{max-width:720px}
}
@media(orientation:landscape) and (max-height:440px){
 .clock-workshop-layout .mt-header{margin-bottom:5px;padding-bottom:5px;min-height:50px}
 .clock-workshop-layout .cw-clock{width:min(100%,calc(100svh - 103px))}
 .clock-workshop-layout .cw-presets{display:none}
 .clock-workshop-layout .cw-activity h2{display:none}
 .clock-workshop-layout .cw-lesson h2{display:block}
 .clock-workshop-layout .mt-brand{font-size:16px}
}
@media(max-width:650px){.clock-workshop-layout .mt-brand{display:none}.clock-workshop-layout #mtSettings span{display:none}}

.clock-workshop-layout .mt-dialog .cw-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
/* The lesson uses the full landscape screen. */
@media(orientation:landscape){
 .clock-workshop-layout:has(.cw-page[data-lesson="true"]) .mt-header{display:none}
 .clock-workshop-layout .cw-page[data-lesson="true"] .cw-activity{width:100%;max-width:none;margin:0}
 .clock-workshop-layout .cw-lesson{max-width:none;width:100%;min-height:calc(100svh - 30px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);grid-template-rows:44px auto 1fr 44px;gap:8px 20px;padding:12px}
 .clock-workshop-layout .cw-lesson-heading{grid-column:2;grid-row:1;margin:0}
 .clock-workshop-layout .cw-lesson h2{grid-column:2;grid-row:2;margin:0}
 .clock-workshop-layout .cw-lesson-clock{grid-column:1;grid-row:1 / 5;float:none;align-self:center;justify-self:center;width:min(100%,calc(100svh - 60px),420px);margin:0}
 .clock-workshop-layout .cw-lesson-copy{grid-column:2;grid-row:3;align-self:center}
 .clock-workshop-layout .cw-lesson-actions{grid-column:2;grid-row:4;clear:none}
 .clock-workshop-layout .cw-lesson:has(.cw-lesson-dayparts:not([hidden])){display:block}
 .clock-workshop-layout .cw-lesson-dayparts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:12px 0}
 .clock-workshop-layout .cw-lesson-dayparts figure{margin:0;min-width:0}.clock-workshop-layout .cw-lesson-dayparts img{width:100%;max-width:100px;aspect-ratio:1;height:auto}.clock-workshop-layout .cw-lesson-dayparts strong,.clock-workshop-layout .cw-lesson-dayparts span{display:block;font-size:13px}.clock-workshop-layout .cw-lesson-dayparts p{font-size:12px;line-height:1.35}
}
/* Let the answer and help controls breathe when the landscape screen has room. */
@media(orientation:landscape){
 .clock-workshop-layout #cwReadForm{gap:20px;margin-top:14px;margin-bottom:16px;flex-wrap:wrap}
 .clock-workshop-layout #cwReadForm .cw-answer{gap:12px;margin-bottom:0}
 .clock-workshop-layout #cwReadForm>button{margin-bottom:0}
 .clock-workshop-layout .cw-actions{gap:12px;margin-top:10px}
 .clock-workshop-layout .cw-feedback:empty{margin:0}
}
@media(orientation:landscape) and (max-height:330px){
 .clock-workshop-layout #cwReadForm{margin-top:8px;margin-bottom:8px;gap:14px}
 .clock-workshop-layout .cw-actions{margin-top:6px}
}
/* Reserve room between labels and the input's outer focus ring. */
@media(orientation:landscape){
 .clock-workshop-layout #cwReadForm .cw-answer label{gap:12px}
}

/* Avoid double-tap zoom on controls; retain normal page pinch zoom. */
.clock-workshop-layout button,.clock-workshop-layout a,.clock-workshop-layout label,.clock-workshop-layout select,.clock-workshop-layout input{touch-action:manipulation}
.clock-workshop-layout select,.clock-workshop-layout input{font-size:16px}
/* On tablets, keep the desktop choices visible and give the clock half the screen. */
@media(orientation:landscape) and (min-width:960px) and (min-height:600px){
 .clock-workshop-layout .ninabella-game-layout{width:100%;max-width:none}
 .clock-workshop-layout .cw-layout{width:100%}
 .clock-workshop-layout .mt-header{margin-bottom:10px}
 .clock-workshop-layout .mt-activity,.clock-workshop-layout #mtSettings{display:none}
 .clock-workshop-layout .cw-modes{display:flex;flex-wrap:wrap;overflow:visible;margin-bottom:12px;padding:0;gap:12px}
 .clock-workshop-layout .cw-toolbar{display:flex;gap:24px;padding-bottom:14px;margin-bottom:14px}
 .clock-workshop-layout .cw-workspace{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}
 .clock-workshop-layout .cw-clock{width:min(100%,calc(100svh - 325px),680px)}
 .clock-workshop-layout .cw-face-picker{gap:12px;margin-bottom:12px}
 .clock-workshop-layout .cw-hand-picker{font-size:15px;margin-top:8px;gap:24px}
 .clock-workshop-layout .cw-activity h2{font-size:25px;margin-bottom:14px}
 .clock-workshop-layout .cw-prompt{font-size:19px;line-height:1.5;margin-bottom:14px}
 .clock-workshop-layout .cw-day-context{gap:16px;margin-bottom:14px}
 .clock-workshop-layout .cw-day-context img{width:80px;height:80px;flex-basis:80px}
 .clock-workshop-layout .cw-day-context p{font-size:21px}
 .clock-workshop-layout .cw-day-context span{display:block;font-size:15px}
 .clock-workshop-layout .cw-time{gap:20px;margin-bottom:18px;padding:10px 0}
 .clock-workshop-layout .cw-time output{font-size:48px}.clock-workshop-layout .cw-time p{font-size:23px}
 .clock-workshop-layout .cw-period,.clock-workshop-layout .cw-adjust,.clock-workshop-layout .cw-presets{gap:12px;margin-bottom:14px}
 .clock-workshop-layout .cw-adjust button,.clock-workshop-layout .cw-presets button,.clock-workshop-layout .cw-period button{font-size:15px;padding:10px 8px}
 .clock-workshop-layout .cw-page[data-lesson="true"] .cw-modes{display:none}
}

.clock-workshop-layout .mt-header .layout-fullscreen{font-size:25px;line-height:1;min-width:44px;min-height:44px}

/* Keep the shared game-close control in the header. */
.clock-workshop-layout .mt-header button.game-close-button,
.clock-workshop-layout button.mt-close-control {
    position: static;
    z-index: 5000;
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    display: grid!important;
    place-items: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 2px solid #d04ce0;
    border-radius: 14px;
    background: linear-gradient(145deg, #2b194c, #19112e);
    color: #fff;
    box-shadow: 0 0 22px rgb(208 76 224 / 24%), 0 10px 28px rgb(0 0 0 / 32%);
    cursor: pointer;
    touch-action: manipulation;
}

/* Portrait: one scrollable column, with the clock above its controls. */
@media (orientation:portrait) {
 body.clock-workshop-layout{padding-top:0}
 .clock-workshop-layout>.site-header,.clock-workshop-layout>.site-footer{display:none}
 .clock-workshop-layout .ninabella-game-kicker,.clock-workshop-layout .ninabella-game-title,.clock-workshop-layout .ninabella-game-intro{display:none}
 .clock-workshop-layout .ninabella-game-page{padding:12px max(12px,env(safe-area-inset-right)) 24px max(12px,env(safe-area-inset-left));min-height:100svh}
 .clock-workshop-layout .ninabella-game-layout{width:min(680px,100%)}
 .clock-workshop-layout .ninabella-game-panel{padding:14px;border-color:#b968ff;border-radius:18px;background:radial-gradient(ellipse at 50% 35%,#b968ff12,transparent 65%),#080b16}
 .clock-workshop-layout.game-mode-active .ninabella-game-content{padding:0;overflow:auto;scrollbar-gutter:auto}
 .clock-workshop-layout .mt-header{gap:8px;margin-bottom:18px;padding-bottom:12px}
 .clock-workshop-layout .mt-title{display:block;font-size:clamp(17px,4.7vw,26px);line-height:1.2;min-width:0}
 .clock-workshop-layout .mt-brand,.clock-workshop-layout .mt-activity,.clock-workshop-layout #mtSettings,.clock-workshop-layout .mt-header .layout-fullscreen,body.clock-workshop-layout .game-mode-toggle{display:none}
 .clock-workshop-layout .mt-header .game-audio-button{position:static;display:grid;width:44px;height:44px;flex:0 0 44px}
 .clock-workshop-layout .mt-header .game-audio-button>.ninabella-audio-icon{width:24px;height:24px}
 .clock-workshop-layout .mt-header #mtHelp{padding:0;flex:0 0 44px}
 .clock-workshop-layout .mt-header .game-close-button{flex:0 0 44px}
 .clock-workshop-layout .cw-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;overflow:visible;padding:0;margin:0 0 18px}
 .clock-workshop-layout .cw-modes>button{white-space:normal;min-width:0;min-height:54px;padding:10px;font-size:15px;line-height:1.3}
 .clock-workshop-layout .cw-modes>button[aria-pressed="true"]{background:#b968ff;border-color:#b968ff;color:#080b16}
 .clock-workshop-layout .cw-modes>a{grid-column:1 / -1;justify-content:center;min-height:44px;font-size:14px}
 .clock-workshop-layout .cw-toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 0 18px;margin-bottom:18px}
 .clock-workshop-layout .cw-toolbar-field{display:grid;gap:8px;align-content:start}
 .clock-workshop-layout .cw-toolbar-field label{font-size:14px}
 .clock-workshop-layout .cw-toolbar select{width:100%;font-size:16px;padding-left:8px}
 .clock-workshop-layout #cwProgress{grid-column:1 / -1;margin-left:0}
 .clock-workshop-layout .cw-workspace{grid-template-columns:minmax(0,1fr);gap:24px;padding-top:0}
 .clock-workshop-layout .cw-clock-area{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;width:100%;margin:0}
 .clock-workshop-layout .cw-face-picker{grid-column:1 / -1;grid-row:1;width:100%;gap:8px;margin-bottom:12px}
 .clock-workshop-layout .cw-face-picker button{flex:1;min-width:0;padding-inline:4px}
 .clock-workshop-layout .cw-clock{grid-column:1 / -1;grid-row:6;justify-self:center;width:min(100%,520px)}
 .clock-workshop-layout .cw-hand-picker{grid-column:1 / -1;grid-row:5;margin:0 0 8px;gap:20px;font-size:14px}
 .clock-workshop-layout .cw-hand-picker span{min-height:32px}
 .clock-workshop-layout .cw-activity{padding:18px;border:1px solid #566178;border-radius:14px;background:#111526;width:100%;box-sizing:border-box}
 .clock-workshop-layout .cw-activity h2{font-size:24px}
 .clock-workshop-layout .cw-prompt{font-size:17px;line-height:1.5;min-height:0}
 .clock-workshop-layout .cw-clock-copy{grid-column:1 / -1;grid-row:2;text-align:center}
 .clock-workshop-layout .cw-clock-copy h2{font-size:22px;color:#25d7ff;margin:0 0 8px}
 .clock-workshop-layout .cw-clock-copy .cw-prompt{margin-bottom:12px}
 .clock-workshop-layout .cw-day-context,.clock-workshop-layout .cw-time{display:contents}
 .clock-workshop-layout .cw-day-context>div{grid-column:1 / -1;grid-row:3;text-align:center;margin-bottom:8px}
 .clock-workshop-layout .cw-day-context img{grid-column:1;grid-row:7;width:64px;height:64px;justify-self:start;margin-top:10px}
 .clock-workshop-layout .cw-day-context p{font-size:18px;margin:0 0 4px}
 .clock-workshop-layout .cw-day-context span{font-size:14px}
 .clock-workshop-layout .cw-time output{grid-column:3;grid-row:7;justify-self:end;margin-top:10px;font-size:clamp(32px,10vw,54px);color:#f6f7ff;white-space:nowrap}
 .clock-workshop-layout .cw-time p{grid-column:2;grid-row:7;font-size:16px;text-align:center;margin:10px 8px 0;line-height:1.35}
 .clock-workshop-layout .cw-period,.clock-workshop-layout .cw-adjust{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px}
 .clock-workshop-layout .cw-period button{font-size:14px;padding:10px 6px}
 .clock-workshop-layout .cw-adjust button{padding:10px 4px;font-size:15px}
 .clock-workshop-layout .cw-presets{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:0}
 .clock-workshop-layout .cw-presets button{font-size:15px;padding:10px 4px}
 .clock-workshop-layout .cw-feedback:empty{display:none}
 .clock-workshop-layout .cw-answer{justify-content:center;gap:12px}
 .clock-workshop-layout .cw-answer label{min-width:0;gap:12px}
 .clock-workshop-layout .cw-answer input{width:90px}
 .clock-workshop-layout #cwReadForm>.cw-primary,.clock-workshop-layout #cwCheck{width:100%}
 .clock-workshop-layout .cw-actions{gap:12px;margin-top:16px}
 .clock-workshop-layout .cw-actions button{flex:1}
 .clock-workshop-layout .cw-page[data-lesson="true"] .cw-activity{max-width:none;padding:0;border:0;background:transparent}
 .clock-workshop-layout .cw-lesson{max-width:none;padding:16px}
 .clock-workshop-layout .cw-lesson-copy{min-height:0}
 .clock-workshop-layout .cw-lesson-dayparts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .clock-workshop-layout .cw-lesson-dayparts figure{margin:0;min-width:0}
 .clock-workshop-layout .cw-lesson-dayparts img{width:100%;height:auto;max-width:120px}
 .clock-workshop-layout .cw-lesson-dayparts strong,.clock-workshop-layout .cw-lesson-dayparts span{display:block}
}

@media (orientation:portrait) and (max-width:360px) {
 .clock-workshop-layout .mt-header{flex-wrap:wrap}
 .clock-workshop-layout .mt-title{flex-basis:100%}
}