
.clock-puzzle{max-width:440px;margin:0 auto;text-align:center}
.clock-puzzle .clock-help{max-width:350px;margin:16px auto;font-size:14px;line-height:1.5;color:#bcb09a}
.clock-hand-selector{display:flex;justify-content:center;gap:8px;margin:16px 0 22px}
.clock-hand-selector button{min-height:44px;padding:10px 18px;border:1px solid #67573d;border-radius:4px}
.clock-hand-selector button[aria-pressed="true"]{background:#453721;border-color:#c1a572;color:#f6e5c3}
.clock-puzzle .clock-time-controls{display:flex;justify-content:center;gap:24px;margin:0;flex-wrap:wrap}
.clock-time-group{display:grid;gap:8px}
.clock-time-group>label{font-size:13px;letter-spacing:.06em;color:#cbb995;line-height:1.2}
.clock-stepper{display:grid;grid-template-columns:44px 64px 44px;gap:4px;align-items:center}
.clock-stepper button,.clock-stepper input{box-sizing:border-box;width:100%;height:46px;min-height:46px;margin:0;padding:0;border:1px solid #67573d;border-radius:4px;background:#211b14;color:#eadcc3;text-align:center;font:18px Georgia,serif;line-height:normal;touch-action:manipulation}
.clock-stepper input{appearance:textfield;-moz-appearance:textfield;background:#15120e;font-variant-numeric:tabular-nums}
.clock-stepper input::-webkit-inner-spin-button,.clock-stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.clock-puzzle button:focus-visible,.clock-stepper input:focus-visible{outline:2px solid #c1a572;outline-offset:3px}
.clock-puzzle #clockStatus{font-size:14px;line-height:1.4;margin:16px 0 0;min-height:0}
.clock-puzzle #clockStatus:empty{display:none}
.clock-puzzle #clockLatch{display:block;min-height:46px;min-width:180px;margin:24px auto 0;padding:12px 24px;border-radius:4px}
@media(max-width:420px){.clock-puzzle .clock-time-controls{gap:12px}.clock-stepper{grid-template-columns:44px 52px 44px}.clock-hand-selector{margin-bottom:18px}}

.clock-time-group>label{margin:0;padding:0}
.clock-puzzle .clock-help{margin:10px auto}
.clock-hand-selector{margin:12px 0 16px}
.clock-puzzle #clockLatch{margin-top:18px}
#modal:has(.clock-puzzle) #modalBody>h2{margin-top:0;margin-bottom:16px}
