/* Full-screen cards: start card, result card. */
/* full-screen cards */
.cover { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(5,8,14,.82); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); padding-block: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-bottom, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); overflow-y: auto; }
.file-card { box-sizing: border-box; width: 100%; max-width: 440px; background: var(--file); color: var(--file-ink); border-radius: 6px; padding: 26px 22px 22px; position: relative; box-shadow: 0 30px 70px rgba(0,0,0,.6); transform: rotate(-.8deg); }
.file-card::before { content: ""; position: absolute; left: 24px; top: -12px; width: 130px; height: 14px; background: var(--file-2); border-radius: 8px 8px 0 0; }
.stamp { position: absolute; right: 18px; top: 18px; font-family: var(--f-display); font-weight: 800; font-size: 15px; letter-spacing: .1em; color: #a3291b; border: 2.5px solid #a3291b; padding: 2px 8px; transform: rotate(8deg); opacity: .85; }
.file-card .no { font-family: var(--f-type); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--file-muted); }
.file-card h1 { font-family: var(--f-display); font-weight: 800; font-size: 46px; line-height: .92; text-transform: uppercase; margin: 6px 0 14px; letter-spacing: .01em; text-wrap: balance; }
.file-card p { font-family: var(--f-type); font-size: 15px; line-height: 1.55; margin: 0 0 12px; }
.stars { display: flex; gap: 6px; margin: 4px 0 12px; }
.stars svg { width: 38px; height: 38px; }
.chain { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; }
.small { font-size: 12px; color: var(--file-muted); margin-top: 10px; }
.share-box { font-family: var(--f-type); font-size: 13px; white-space: pre-wrap; background: rgba(255,255,255,.4); border-radius: 6px; padding: 10px 12px; margin-bottom: 12px; user-select: text; -webkit-user-select: text; }

@media (max-height: 760px) { .file-card p { margin-bottom: 8px; } }
.loading .file-card { visibility: hidden; }

/* start: the case card holds only the title, one teaser line and the button; everything else lives in settings */
.start-card h1 { margin: 22px 48px 12px 0; }
.start-card .intro-text { margin-bottom: 22px; }
.start-card .gear { position: absolute; right: 14px; top: 14px; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid rgba(43,33,21,.3); background: transparent; color: var(--file-ink); display: grid; place-items: center; }
.start-card .gear svg { width: 20px; height: 20px; }
.fbtn.go { width: 100%; min-height: 64px; font-size: 30px; }
.skip-tut { display: block; margin: 10px auto 0; min-height: 40px; padding: 0 12px; background: none; border: 0; color: var(--file-muted); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }
.legal-links a { color: var(--file-ink); min-height: 32px; display: inline-flex; align-items: center; }
.start-card .to-cases { text-decoration: none; display: inline-flex; align-items: center; position: absolute; left: 18px; top: 18px; background: none; border: 0; padding: 0; min-height: 32px; color: var(--file-muted); font-size: 13.5px; font-weight: 600; }