/* Watch (version 1.3): the children's video page, and the silent loop behind the home greeting. */
.wt-grid { display: grid; gap: calc(14px * var(--k)); grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(230px * var(--k))), 1fr)); }
.wt-card { display: flex; flex-direction: column; gap: 8px; padding: 10px; min-width: 0; text-align: left; cursor: pointer; color: var(--text); font: inherit; border-radius: var(--kr); background: linear-gradient(180deg, color-mix(in srgb, var(--c, var(--c-stories)) 22%, var(--panel)), var(--panel)); border: 2px solid color-mix(in srgb, var(--c, var(--c-stories)) 70%, var(--line)); box-shadow: 0 6px 0 color-mix(in srgb, var(--c, var(--c-stories)) 45%, #000); transition: transform .12s; }
.wt-card:hover { filter: brightness(1.1); } .wt-card:active { transform: translateY(3px); box-shadow: 0 2px 0 color-mix(in srgb, var(--c, var(--c-stories)) 45%, #000); }
.wt-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.wt-pic { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: calc(var(--kr) - 8px); overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--c, var(--c-stories)) 80%, #fff), color-mix(in srgb, var(--c, var(--c-stories)) 60%, #000)) center / cover no-repeat; }
.wt-nopic { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(44px * var(--k)); }
.wt-go { position: absolute; left: 50%; top: 50%; width: calc(58px * var(--k)); height: calc(58px * var(--k)); margin: calc(-29px * var(--k)) 0 0 calc(-29px * var(--k)); border-radius: 50%; display: grid; place-items: center; font-size: calc(24px * var(--k)); padding-left: 4px; box-sizing: border-box; color: #fff; background: rgba(5, 10, 36, .62); border: 3px solid #fff; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.wt-len { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; font-size: calc(12.5px * var(--k)); font-weight: 700; color: #fff; background: rgba(5, 10, 36, .78); }
.wt-name { font-weight: 800; font-size: calc(17px * var(--k)); line-height: 1.25; overflow-wrap: anywhere; }
.wt-card small { color: var(--muted); overflow-wrap: anywhere; }
.wt-foot { margin: calc(16px * var(--k)) 2px 0; }

.wt-player { margin-bottom: calc(16px * var(--k)); display: grid; gap: 10px; }
/* the cover picture is the background of the stage itself, so it shows before Play on every browser (some show nothing for a video that has no file yet); once the video runs, the stage is black */
.wt-stage { position: relative; background: #000 center / contain no-repeat; border-radius: calc(var(--kr) - 6px); overflow: hidden; display: grid; place-items: center; }
.wt-player.started .wt-stage { background-image: none !important; }
.wt-player.failed .wt-btn[disabled], .wt-player.failed .wt-seek[disabled] { opacity: .45; filter: none; cursor: default; }
.wt-stage video { display: block; width: 100%; height: auto; max-width: 100%; object-fit: contain; background: transparent; cursor: pointer; } .wt-player.started .wt-stage video { background: #000; }   /* the video's own shape; black bars when the screen's shape differs — never stretched */
.wt-stage video::cue { font-size: clamp(16px, 2.6vw, 30px); background: rgba(0,0,0,.72); color: #fff; }
.wt-big { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(84px, 16vw, 128px); height: clamp(84px, 16vw, 128px); border-radius: 50%; border: 5px solid #fff; background: color-mix(in srgb, var(--c-stories) 88%, #000); color: #fff; font-size: clamp(34px, 6.5vw, 54px); padding-left: 8px; cursor: pointer; display: grid; place-items: center; box-shadow: 0 8px 0 rgba(0,0,0,.35), 0 0 34px rgba(0,0,0,.5); }
.wt-big[hidden], .wt-end[hidden], .wt-msg[hidden] { display: none; }
.wt-big:focus-visible, .wt-btn:focus-visible, .wt-seek:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.wt-end, .wt-msg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 14px; background: rgba(5, 10, 36, .82); color: #fff; }
.wt-endin { display: grid; gap: 14px; } .wt-endin b { font-size: calc(26px * var(--k)); }
.wt-msg { font-weight: 700; font-size: calc(17px * var(--k)); }
.wt-line { display: flex; align-items: center; gap: 10px; }
.wt-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wt-btn { width: calc(54px * var(--k)); height: calc(54px * var(--k)); min-width: 48px; min-height: 48px; padding: 0; font-size: calc(22px * var(--k)); flex: none; display: grid; place-items: center; }
.wt-btn.on, .wt-btn[aria-pressed="true"] { outline: 3px solid var(--gold); outline-offset: 1px; }
.wt-seek { flex: 1 1 140px; min-width: 0; height: 48px; margin: 0; accent-color: var(--c-stories); cursor: pointer; }
.wt-time { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 5.6em; text-align: right; flex: none; }
.wt-info h2 { margin: 2px 0 2px; font-size: calc(22px * var(--k)); overflow-wrap: anywhere; } .wt-info p { margin: 0 0 4px; }
.wt-player.wait:not(.failed) .wt-stage::after { content: ""; position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 5px solid rgba(255,255,255,.35); border-top-color: #fff; animation: wt-spin 1s linear infinite; pointer-events: none; }
@keyframes wt-spin { to { transform: rotate(360deg); } }
body.calm .wt-player.wait:not(.failed) .wt-stage::after { animation: none; } body.calm .wt-card { transition: none; }
@media (prefers-reduced-motion: reduce) { .wt-player.wait:not(.failed) .wt-stage::after { animation: none; } .wt-card { transition: none; } }
@media (max-width: 480px) { .wt-bar { gap: 6px; } .wt-btn { width: 50px; height: 50px; font-size: 21px; } }   /* five buttons side by side on the narrowest phone */
/* full screen: the picture takes all the room, the buttons stay at the bottom */
.wt-player:fullscreen { margin: 0; border: 0; border-radius: 0; padding: 0; background: #0b1230; color: #fff; grid-template-rows: 1fr auto auto; gap: 0; width: 100vw; height: 100vh; height: 100dvh; }
.wt-player:fullscreen .wt-line { padding: 0 14px; }
.wt-player:fullscreen .wt-stage { border-radius: 0; min-height: 0; height: 100%; background: #000; } .wt-player:fullscreen .wt-stage video { width: 100% !important; height: 100%; }
.wt-player:fullscreen .wt-bar { padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: #0b1230; color: #fff; }
.wt-player:fullscreen .wt-info, .wt-player:fullscreen > .row { display: none; }
.wt-player:-webkit-full-screen { margin: 0; border: 0; border-radius: 0; padding: 0; background: #0b1230; color: #fff; grid-template-rows: 1fr auto auto; gap: 0; width: 100vw; height: 100vh; }
.wt-player:-webkit-full-screen .wt-line { padding: 0 14px; }
.wt-player:-webkit-full-screen .wt-stage { border-radius: 0; min-height: 0; height: 100%; } .wt-player:-webkit-full-screen .wt-stage video { width: 100% !important; height: 100%; }
.wt-player:-webkit-full-screen .wt-bar { padding: 8px 12px; background: #0b1230; color: #fff; }
.wt-player:-webkit-full-screen .wt-info, .wt-player:-webkit-full-screen > .row { display: none; }

/* the silent loop behind the home greeting (Admin → Set-up → Artwork → “Home — moving greeting card”) */
.kcard.wt-hasloop { overflow: hidden; isolation: isolate; }
.wt-loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; pointer-events: none; border-radius: inherit; }
.wt-loopveil { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: rgba(5, 10, 36, .5); border-radius: inherit; }
:root[data-theme="light"] .wt-loopveil { background: rgba(255, 255, 255, .62); }
:root[data-contrast="high"] .wt-loop, :root[data-contrast="high"] .wt-loopveil { display: none; }