@font-face {
  font-family: 'Oswald';
  src: url('fonts/Oswald.ttf') format('truetype');
  font-weight: 200 700;
  font-display: block;
}
:root { --digit: #f2efe8; --muted: #9a978f; --bg: #141416; }
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; }
body.idle { cursor: none; }

#stage {
  position: absolute; left: 50%; top: 50%;
  width: 1280px; height: 720px;
  transform-origin: 50% 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px;
  font-family: 'Oswald', 'Arial Narrow', sans-serif; color: #e9e6df;
}
#title { font-size: 24px; letter-spacing: 0.4em; font-weight: 500; color: var(--muted); text-align: center; }
.done #title { font-size: 40px; letter-spacing: 0.2em; color: var(--digit); }

#grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 64px; row-gap: 36px; }
.group { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.digits { display: flex; gap: 10px; }
.label { font-size: 20px; letter-spacing: 0.3em; font-weight: 500; color: var(--muted); }

#footer { display: flex; align-items: center; gap: 32px; font-size: 18px; letter-spacing: 0.15em; color: var(--muted); }
#footer-text { display: flex; flex-direction: column; align-items: center; gap: 6px; }
#workdays:empty { display: none; }
#progress { display: flex; align-items: center; gap: 14px; padding-left: 32px; border-left: 1px solid #34343a; }
#progress[hidden] { display: none; }
#pct { font-size: 26px; font-weight: 500; letter-spacing: 0.04em; color: #e9e6df; line-height: 1.1; }
#pct-label { font-size: 13px; letter-spacing: 0.25em; }
#progress .cap { fill: #6f6c66; }
#progress .sand { fill: var(--digit); opacity: 0.9; }
#progress .stream { stroke: var(--digit); stroke-width: 0.8; opacity: 0.7; }
#progress .glass { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linejoin: round; }
.done #progress .stream { display: none; }

/* Klappkarte */
.card { position: relative; width: 124px; height: 194px; }
.leaf { position: absolute; height: 180px; border-radius: 10px; }
.leaf2 { left: 8px; right: 8px; top: 14px; background: #111113; box-shadow: 0 10px 18px rgba(0,0,0,0.55); }
.leaf1 { left: 4px; right: 4px; top: 7px; background: #1b1b1e; box-shadow: inset 0 -1px 0 rgba(255,255,255,0.05); }
.face {
  position: absolute; left: 0; right: 0; top: 0; height: 180px;
  border-radius: 10px; overflow: hidden; background: #26262a; perspective: 520px;
  box-shadow: 0 20px 34px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.6);
}
.half, .flap { position: absolute; left: 0; right: 0; height: 90px; overflow: hidden; backface-visibility: hidden; }
.half.top, .flap.top { top: 0; background: linear-gradient(180deg, #3d3d43 0%, #2d2d32 100%); }
.half.bottom, .flap.bottom { top: 90px; background: linear-gradient(180deg, #1c1c20 0%, #29292d 100%); }
.half span, .flap span {
  position: absolute; left: 0; right: 0; height: 180px;
  display: flex; align-items: center; justify-content: center;
  font-size: 150px; font-weight: 600; line-height: 1; color: var(--digit);
  text-shadow: 0 2px 0 rgba(0,0,0,0.35), 0 4px 10px rgba(0,0,0,0.45);
}
.top span { top: 0; }
.bottom span { top: -90px; }

.flap { display: none; z-index: 3; }
.flap.top { transform-origin: 50% 100%; }
.flap.bottom { transform-origin: 50% 0; transform: rotateX(90deg); }
.flipping .flap { display: block; }
.flipping .flap.top { animation: flip-top 0.3s ease-in forwards; }
.flipping .flap.bottom { animation: flip-bottom 0.3s ease-out 0.3s forwards; }
@keyframes flip-top { from { transform: rotateX(0); filter: brightness(1); } to { transform: rotateX(-90deg); filter: brightness(0.55); } }
@keyframes flip-bottom { from { transform: rotateX(90deg); filter: brightness(1.4); } to { transform: rotateX(0); filter: brightness(1); } }

.shade-top { position: absolute; left: 0; right: 0; top: 70px; height: 19px; z-index: 2; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.28) 100%); }
.shade-bottom { position: absolute; left: 0; right: 0; top: 91px; height: 24px; z-index: 2; background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%); }
.hinge { position: absolute; left: 0; right: 0; top: 89px; height: 2px; z-index: 4; background: #060607; box-shadow: 0 1px 0 rgba(255,255,255,0.06); }
.pin { position: absolute; top: 81px; width: 6px; height: 18px; z-index: 4; }
.pin.left { left: 0; background: linear-gradient(90deg, #050506, #2a2a2e); border-radius: 0 3px 3px 0; }
.pin.right { right: 0; background: linear-gradient(270deg, #050506, #2a2a2e); border-radius: 3px 0 0 3px; }

@media (prefers-reduced-motion: reduce) { .flipping .flap { display: none; } }