/* =====================================================================
   40 · COVER  —  the front page: title, signature, frame, pills, title block
   All sizes and positions come from 00-settings.css (FRONT PAGE block).
   ===================================================================== */

.cover { touch-action: none; }

.cover__title { position: absolute; left: var(--cover-title-x); top: var(--cover-title-y); font-size: var(--cover-title-size); z-index: 3; pointer-events: none; }
.cover__sig { position: absolute; right: var(--cover-sig-right); bottom: var(--cover-sig-bottom); width: var(--cover-sig-w); max-height: var(--cover-sig-maxh); object-fit: contain; object-position: right bottom; z-index: 2; pointer-events: none; }
.cover__hint { position: absolute; left: calc(var(--cover-title-x) + .2vw); top: calc(var(--cover-title-y) + var(--cover-title-size) * var(--cover-hint-gap)); z-index: 4; font-size: var(--cover-hint-fs); color: var(--muted); max-width: var(--cover-hint-w); line-height: 1.45; pointer-events: none; }
.cover__hint b { color: #fff; font-weight: 700; }
.hint-touch { display: none; }
@media (hover: none) { .hint-fine { display: none; } .hint-touch { display: inline; } }

/* Drawing frame with the numbers 1-8 and letters A-F. The pills fall inside it. */
.frame { position: absolute; inset: calc(var(--top) + 4px) var(--frame) calc(var(--frame) + var(--cover-foot) + env(safe-area-inset-bottom, 0px)); border: 1px solid var(--line); pointer-events: none; }
.frame__cols, .frame__rows { position: absolute; display: var(--cover-ticks); font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,.72); }
.frame__cols { left: 0; right: 0; grid-template-columns: repeat(8, 1fr); height: 18px; }
.frame__cols--top { top: -20px; } .frame__cols--bottom { bottom: -20px; }
.frame__rows { top: 0; bottom: 0; grid-template-rows: repeat(6, 1fr); width: 18px; }
.frame__rows--left { left: -20px; } .frame__rows--right { right: -20px; }
.frame__cols span, .frame__rows span { position: relative; display: flex; align-items: center; justify-content: center; }
.frame__cols span::before { content: ""; position: absolute; left: 0; width: 1px; background: var(--line); }
.frame__cols--top span::before { bottom: -2px; height: 8px; } .frame__cols--bottom span::before { top: -2px; height: 8px; }
.frame__rows span::before { content: ""; position: absolute; top: 0; height: 1px; background: var(--line); }
.frame__rows--left span::before { right: -2px; width: 8px; } .frame__rows--right span::before { left: -2px; width: 8px; }

/* The three tag pills start here, hidden. The physics copy them and let them fall. */
.pill-origin { position: absolute; left: var(--cover-tags-x); bottom: calc(var(--cover-tags-y) + var(--cover-foot)); width: var(--cover-tags-w); display: flex; flex-wrap: wrap; gap: 10px; visibility: hidden; }

/* Physics layer */
.world { position: absolute; inset: 0; z-index: 7; touch-action: none; }
.slot { position: absolute; z-index: 1; border-radius: 999px; pointer-events: none; }
.slot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.slot rect { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.5; stroke-dasharray: 7 5; animation: ants 1.4s linear infinite; }
.slot.is-filled rect { stroke: var(--blue); stroke-dasharray: none; animation: none; opacity: .7; }
@keyframes ants { to { stroke-dashoffset: -24; } }
.body { position: absolute; left: 0; top: 0; will-change: transform; transform-origin: center; }
.body--pill { cursor: grab; }
.body--pill .pill { pointer-events: none; }
.body--pill.is-nav .pill { background: #000; }
.body.is-held { cursor: grabbing; }
.body.is-home .pill { background: #fff; color: #000; }
.body--img { cursor: pointer; }
.body--img img { width: 100%; height: 100%; object-fit: cover; outline: 1px solid rgba(255,255,255,.18); outline-offset: -1px; background: #111; pointer-events: none; }
.body--img.is-fading { transition: opacity 400ms ease; opacity: 0; }

/* Title block in the corner */
.cover__tb { position: absolute; right: calc(var(--frame) - 1px); bottom: calc(var(--frame) + var(--cover-foot) - 1px + env(safe-area-inset-bottom, 0px)); z-index: 6; }
.cover__tb .tb { width: var(--cover-tb-w); }

.reaction { position: absolute; left: 50%; top: 50%; width: var(--cover-reaction); z-index: 40; transform: translate(-50%, -50%) scale(.6) rotate(-8deg); opacity: 0; pointer-events: none; transition: transform 420ms var(--ease-out), opacity 300ms ease; }
.reaction.show { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-8deg); }

/* Copyright line under the frame */
.cover__copy { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 6px); z-index: 6; margin: 0; text-align: center; font: 400 9.5px/1 var(--mono); letter-spacing: .06em; color: rgba(255,255,255,.55); pointer-events: none; }