/* Timer: eigene Teile. Grundlage (Kopf, Menü, Karten, Knöpfe, Rückmeldung) steht in assets/basis.css. */

:root {
  --side-w: clamp(260px, 27vw, 420px);
  --tone: #65a30d;
  --tone-deep: #4d7c0f;
  --tone-tint: #f4fbe6;
  --bar: #84cc16;
  --sand: #f4b942;
  --sand-edge: #dc9a2a;
  --wood: #e4a35c;
  --wood-deep: #cf8a45;
  --wood-light: #f3c88f;
}

.menu-narrow { width: min(400px, calc(100vw - 32px)); }

.sheet.is-up { grid-template-columns: minmax(0, 1fr); }
.sheet.is-up .card-set { display: none; }
@media (max-aspect-ratio: 1/1) { .sheet.is-up { grid-template-rows: minmax(0, 1fr); } }

.card-clock { --c: var(--tone); --tint: var(--tone-tint); grid-template-rows: minmax(0, 1fr); padding: clamp(10px, 2vh, 22px); }
.card-set { --c: var(--tone); --tint: var(--tone-tint); }

/* ---------- Uhr ---------- */

.clock {
  position: relative;
  container-type: size;
  display: grid;
  place-items: center;
  min-height: 0;
}

.ring { width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); overflow: visible; }
.ring-face { fill: #fff; }
.ring-rim { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.ring-track { fill: none; stroke: #eef0f5; stroke-width: 24; }
.ring-bar {
  fill: none;
  stroke: var(--bar);
  stroke-width: 24;
  stroke-linecap: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
  transform: rotate(-90deg);
  transform-origin: 110px 110px;
  transition: stroke .6s;
}
.ring-dots line { stroke: #c3c9d6; stroke-width: 1.6; stroke-linecap: round; }
.ring-dots line.is-five { stroke: var(--ink); stroke-width: 2.4; }

/* Roter Zeiger am Ende des Rings; lässt sich ziehen. Gerade Enden, damit der Ring genau am Zeiger aufhört. */
.sheet:not(.is-up) .ring { touch-action: none; }
.sheet:not(.is-up) .ring-bar { stroke-linecap: butt; }
.sheet.is-up .ring-hand { display: none; }
.ring-hand { cursor: grab; }
.clock.is-dragging .ring-hand { cursor: grabbing; }
.hand-hit { stroke: transparent; stroke-width: 26; stroke-linecap: round; pointer-events: stroke; }
.hand-halo { stroke: #fff; stroke-width: 8; stroke-linecap: round; }
.hand-line { stroke: #dc2626; stroke-width: 4; stroke-linecap: round; }
.hand-knob { fill: #dc2626; stroke: #fff; stroke-width: 2; }
.clock.is-dragging .hand-knob { r: 6.5; }

.readout {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  pointer-events: none;
}
.time {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: calc(min(100cqw, 100cqh) * .22);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  transform: translateY(.08em);
}
.time-sub { color: var(--muted); font-size: calc(min(100cqw, 100cqh) * .045); font-weight: 600; }

.clock.is-paused:not(.is-dragging) .time { animation: blink 1.2s steps(1) infinite; }
.clock.is-done .ring-bar { stroke: var(--rose); }
.clock.is-done .ring { animation: ring-pulse 1s ease-in-out 3; }
.clock.is-done .time { color: var(--rose); }

/* ---------- Zeit einstellen ---------- */

.set-body { display: grid; align-content: start; gap: 14px; min-height: 0; padding: 4px 2px; }
.card-set.is-locked .set-body { opacity: .45; pointer-events: none; }

.presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.preset {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .3em;
  min-height: clamp(48px, 8vh, 72px);
  padding: .1em 0 0;
  border: 2px solid var(--line);
  border-radius: 18px;
  background: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3.8vh, 2.2rem);
  font-weight: 800;
  line-height: 1;
  transition: background .15s, border-color .15s, transform .12s;
}
.preset small { color: var(--muted); font-family: var(--font); font-size: .5em; font-weight: 600; }
.preset:hover { background: var(--soft); }
.preset:active { transform: scale(.97); }
.preset[aria-pressed="true"] { border-color: var(--tone); background: var(--tone-tint); box-shadow: 0 0 0 3px rgba(101, 163, 13, .2); }

.nudges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.nudge {
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  background: var(--soft);
  font-size: clamp(.95rem, 2.2vh, 1.15rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.nudge:hover { background: #e7e9f0; }

@media (max-aspect-ratio: 1/1) {
  .sheet { grid-template-rows: minmax(0, 1.5fr) auto; }
  .presets { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nudges { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-height: 760px) {
  .presets { gap: 6px; }
  .set-body { gap: 10px; }
}

/* ---------- Sanduhr (Alex, 28.09.2026) ---------- */

.sand { display: none; }
.sheet.is-sand .ring,
.sheet.is-sand .readout { display: none; }
.sheet.is-sand .sand {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  gap: 2px;
}
.sheet.is-sand.hide-sand-time .sand-time { display: none; }

.glass { height: 100%; max-width: 100%; overflow: visible; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.glass-shadow { fill: var(--ink); opacity: .08; }
.glass-body { transform-box: view-box; transform-origin: 120px 170px; }
.post { fill: var(--wood-deep); stroke: var(--ink); stroke-width: 2.6; }
.cap { fill: var(--wood); stroke: var(--ink); stroke-width: 3; }
.cap-light { fill: var(--wood-light); }
.glass-fill { fill: #eef7fc; }
.glass-line { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.glass-shine { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; opacity: .85; }
/* Der Glanz kommt vom Licht, nicht vom Glas: beim Drehen kurz ausblenden, sonst spränge er auf die andere Seite */
.clock.is-flipping .glass-shine { opacity: 0; transition: opacity .15s; }
.glass-shine { transition: opacity .3s .1s; }
.sand-top,
.sand-bottom { fill: var(--sand); stroke: var(--sand-edge); stroke-width: 1.4; stroke-linejoin: round; }

/* Sandstrahl: eine feine Linie und darüber fallende Körner; kleine Körner springen am Kegel ab */
.stream-core,
.stream,
.splash { opacity: 0; transition: opacity .2s; }
.stream-core { stroke: var(--sand-edge); stroke-width: 1.3; }
.stream { stroke: var(--sand); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2.5 5.5; }
.splash circle { fill: var(--sand-edge); }
.sand.is-flowing .stream-core { opacity: .75; }
.sand.is-flowing .stream,
.sand.is-flowing .splash { opacity: 1; }
.sand.is-flowing .stream { animation: sand-fall .32s linear infinite; }
.sand.is-flowing .splash circle { animation: grain-left .7s ease-out infinite; }
.sand.is-flowing .splash circle:nth-child(2) { animation-name: grain-right; animation-delay: -.2s; }
.sand.is-flowing .splash circle:nth-child(3) { animation-delay: -.45s; animation-duration: .8s; }
.sand.is-flowing .splash circle:nth-child(4) { animation-name: grain-right; animation-delay: -.6s; animation-duration: .6s; }

.sand-time {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: calc(min(100cqw, 100cqh) * .085);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  padding-top: .1em;
}
.clock.is-paused:not(.is-flipping) .sand-time { animation: blink 1.2s steps(1) infinite; }
.clock.is-done .sand-time { color: var(--rose); }
.clock.is-done .glass { animation: glass-nudge 1s ease-in-out 3; transform-origin: 50% 90%; }

@media (prefers-reduced-motion: reduce) {
  .sand.is-flowing .stream,
  .sand.is-flowing .splash circle,
  .clock.is-done .glass { animation: none; }
}

@keyframes sand-fall { to { stroke-dashoffset: -16; } }
@keyframes grain-left {
  0% { transform: translate(0, 0); opacity: 1; }
  60% { transform: translate(-7px, -5px); opacity: 1; }
  100% { transform: translate(-11px, 2px); opacity: 0; }
}
@keyframes grain-right {
  0% { transform: translate(0, 0); opacity: 1; }
  60% { transform: translate(7px, -4px); opacity: 1; }
  100% { transform: translate(12px, 3px); opacity: 0; }
}
@keyframes glass-nudge { 0%, 100% { transform: none; } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }

@keyframes blink { 50% { opacity: .35; } }
@keyframes ring-pulse { 0%, 100% { transform: none; } 50% { transform: scale(1.025); } }