.clock-status{text-align:center;max-width:34em;min-height:2.6em;margin:0 auto 8px;font-size:14px}.clock-face{aspect-ratio:1;--card:clamp(34px, 11.5%, 70px);background:radial-gradient(circle at 50% 40%,#6c8a70,#2d4a39 72%);border-radius:50%;width:min(100%,620px,78vh);margin:0 auto;position:relative;box-shadow:inset 0 0 0 6px #d8ddb8,inset 0 0 0 9px #2a4635,0 6px #1f3327}.clock-pile{left:var(--x);top:var(--y);width:var(--card);aspect-ratio:.68;cursor:pointer;background:0 0;border:0;border-radius:8px;padding:0;position:absolute;transform:translate(-50%,-50%)}.clock-pile:disabled{cursor:default}.clock-hour{color:#d8ddb899;border:2px dashed #d8ddb866;border-radius:8px;place-items:center;font-size:clamp(11px,2.4vw,16px);font-weight:700;display:grid;position:absolute;inset:0}.clock-back,.clock-card{box-shadow:0 calc(var(--n,1) * 1.5px) 0 #16261c, 0 1px 3px #0006;border-radius:8px;place-items:center;display:grid;position:absolute;inset:0}.clock-back{color:#edf0d2;background-color:#2a4635;background-image:repeating-linear-gradient(45deg,#0000 0 6px,#aec49733 6px 7px),repeating-linear-gradient(-45deg,#0000 0 6px,#aec49733 6px 7px);border:2px solid #d2d9b4;font-size:clamp(10px,2vw,13px);font-weight:700}.clock-card{color:#1d2a20;background:#fffdf5;border:1px solid #b9c3a3;grid-template-rows:auto auto;align-content:center;line-height:1;transform:translate(34%,-22%)rotate(7deg)}.clock-pile:not(:has(.clock-back)) .clock-card{transform:none}.clock-card.is-red{color:#b3261e}.clock-card b{font-size:clamp(13px,3vw,22px)}.clock-card i{font-size:clamp(12px,2.6vw,20px);font-style:normal}.clock-pile.is-full .clock-card{box-shadow:0 0 0 3px #e3c65b,0 2px 4px #0006}.clock-pile.is-active .clock-back,.clock-pile.is-tuck .clock-back{border-color:#f4e08a;box-shadow:0 0 0 3px #f4e08a,0 0 14px 4px #f4e08a99}.clock-pile.is-active .clock-back{animation:1.2s ease-in-out infinite clock-pulse}.clock-pile:focus-visible{outline-offset:3px;outline:3px solid #fff}@keyframes clock-pulse{50%{box-shadow:0 0 0 3px #f4e08a,0 0 4px 1px #f4e08a55}}@media (prefers-reduced-motion:reduce){.clock-pile.is-active .clock-back{animation:none}}