/* SUZ Files — a case page. The character's accent comes in as --a; .fp--{motif} sets its own backdrop. */
body.suz-file-page { background: #0a0908; }
body.suz-file-page .site-main { background: #0a0908; }
body.suz-file-page .site-foot { margin-top: 0; }
.fp { --ink: #0a0908; --txt: rgba(255, 255, 255, .88); --mute: rgba(255, 255, 255, .56);
	position: relative; color: var(--txt); overflow: hidden; isolation: isolate;
	background: radial-gradient(80% 60% at 75% 10%, color-mix(in srgb, var(--a) 24%, transparent), transparent 70%), radial-gradient(70% 50% at 10% 90%, color-mix(in srgb, var(--a) 12%, transparent), transparent 70%), var(--ink); }
.fp::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .9; -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); }
.fp-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }

/* Per-character backdrops */
.fp--cards::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23fff' fill-opacity='.05' font-family='serif' font-size='26'%3E%3Ctext x='10' y='34'%3E%E2%99%A0%3C/text%3E%3Ctext x='70' y='34'%3E%E2%99%A5%3C/text%3E%3Ctext x='40' y='94'%3E%E2%99%A6%3C/text%3E%3Ctext x='100' y='94'%3E%E2%99%A3%3C/text%3E%3C/g%3E%3C/svg%3E"); }
.fp--silk::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80'%3E%3Cpath d='M0 40 C40 10 80 70 120 40 S160 10 200 40' fill='none' stroke='%23fff' stroke-opacity='.06' stroke-width='1.2'/%3E%3Cpath d='M-40 60 C0 30 40 90 80 60 S120 30 160 60' fill='none' stroke='%23fff' stroke-opacity='.04'/%3E%3C/svg%3E"); }
.fp--grid::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 .5H64M.5 0V64' stroke='%23fff' stroke-opacity='.07'/%3E%3Ccircle cx='6' cy='6' r='1.6' fill='%23fff' fill-opacity='.1'/%3E%3C/svg%3E"); }
.fp--pinstripe::before { background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 22px); }
.fp--stars::before { background-image: radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, .6), transparent), radial-gradient(1px 1px at 70% 15%, rgba(255, 255, 255, .5), transparent), radial-gradient(1.5px 1.5px at 45% 65%, rgba(255, 255, 255, .45), transparent), radial-gradient(1px 1px at 85% 75%, rgba(255, 255, 255, .5), transparent), radial-gradient(1px 1px at 10% 85%, rgba(255, 255, 255, .4), transparent); background-size: 220px 220px; }
.fp--paper::before { background-image: repeating-linear-gradient(180deg, transparent 0 31px, rgba(255, 255, 255, .05) 31px 32px); }
.fp--chalk::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Ccircle cx='90' cy='90' r='70' fill='none' stroke='%23fff' stroke-opacity='.06' stroke-width='2' stroke-dasharray='6 4'/%3E%3C/svg%3E"); }
.fp--arabesque::before { background-image: var(--pattern); background-size: 96px 96px; }
.fp--film::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect x='14' y='12' width='12' height='16' rx='2' fill='none' stroke='%23fff' stroke-opacity='.06'/%3E%3C/svg%3E"); }
.fp--mist::before { background-image: radial-gradient(40% 30% at 20% 30%, rgba(255, 255, 255, .06), transparent 70%), radial-gradient(35% 25% at 80% 60%, rgba(255, 255, 255, .05), transparent 70%); }
.fp--candy::before { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .04) 0 14px, transparent 14px 28px); }
.fp--cipher::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='60'%3E%3Cg fill='%23fff' fill-opacity='.06' font-family='monospace' font-size='12'%3E%3Ctext x='4' y='16'%3E01 10%3C/text%3E%3Ctext x='46' y='40'%3E11 0%3C/text%3E%3Ctext x='10' y='56'%3E0 1%3C/text%3E%3C/g%3E%3C/svg%3E"); }

/* Hero */
.fp-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 72px); align-items: center; padding-block: clamp(36px, 6vw, 80px); }
.fp-card { justify-self: center; display: grid; justify-items: center; gap: 12px; perspective: 1200px; cursor: pointer; outline: none; }
.fp-card__in { position: relative; width: min(62vw, 300px); aspect-ratio: 1 / 2; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.22, 1, .36, 1); animation: fpFloat 5s ease-in-out infinite; }
.fp-card.is-flipped .fp-card__in { transform: rotateY(180deg); animation: none; }
@keyframes fpFloat { 50% { transform: translateY(-10px) rotateY(-6deg); } }
.fp-card__face { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 50px 80px -30px rgba(0, 0, 0, .8), 0 0 60px -10px color-mix(in srgb, var(--a) 45%, transparent); }
.fp-card__back { transform: rotateY(180deg); }
.fp-card__hint { font-size: .8rem; color: var(--mute); }
.fp-intro { display: grid; gap: 12px; align-content: center; }
.fp-stamp { justify-self: start; margin: 0; font: 600 .74rem var(--font-latin); letter-spacing: .3em; color: #d23a2e; border: 1.5px solid currentColor; padding: 6px 12px 5px; transform: rotate(-2deg); border-radius: 3px; direction: ltr; }
.fp-name { font-family: 'Cinzel', var(--font-latin); font-weight: 600; font-size: clamp(3.4rem, 9vw, 7rem); line-height: .95; color: #fff; direction: ltr; text-align: start; letter-spacing: .02em; text-shadow: 0 0 50px color-mix(in srgb, var(--a) 50%, transparent); margin: 0; }
.fp-traits { margin: 0; font-size: .95rem; letter-spacing: .02em; color: var(--a); }
.fp-log { font-family: var(--font-display); font-size: clamp(1.25rem, 2.6vw, 1.8rem); line-height: 1.5; color: #fff; margin: 0; max-width: 22em; }
.fp-status { margin: 0; justify-self: start; font-size: .82rem; padding: 4px 12px; border-radius: 99px; background: rgba(255, 255, 255, .07); color: var(--mute); }
.fp-status:empty { display: none; }
.fp-status[data-st="solved"] { background: rgba(143, 211, 165, .16); color: #8fd3a5; }
.fp-status[data-st="locked"] { background: rgba(224, 82, 63, .15); color: #ff8f80; }
.fp-price { font-size: 1.3rem; color: #fff; margin: 0; }
.fp-price del { color: var(--mute); }
.fp-tag { font: 500 .82rem var(--font-body); color: var(--mute); }
.fp-notify { display: grid; gap: 8px; max-width: 460px; }
.fp-notify label { font-size: .9rem; color: var(--mute); }
.fp-notify__row { display: flex; gap: 8px; }
.fp-notify input[type="tel"] { flex: 1; min-width: 0; min-height: 50px; padding: 0 16px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); color: #fff; font: 500 1rem var(--font-latin); }
.fp-notify input[type="tel"]:focus { outline: none; border-color: var(--a); }
.fp-notify button { min-height: 50px; padding: 0 22px; border: 0; border-radius: 14px; background: var(--a); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.fp-notify__msg { margin: 0; min-height: 1.2em; font-size: .86rem; }
.fp-notify__msg.is-ok { color: #8fd3a5; } .fp-notify__msg.is-bad { color: #ff8f80; }
.fp-start { justify-self: start; color: var(--a); text-decoration: none; font-weight: 600; padding-block: 6px; border-bottom: 1px solid color-mix(in srgb, var(--a) 50%, transparent); }
.fp .buy { background: rgba(255, 255, 255, .96); color: var(--ink); }
@media (max-width: 820px) {
	.fp-hero { grid-template-columns: 1fr; text-align: center; padding-top: 28px; }
	.fp-card__in { width: min(46vw, 210px); }
	.fp-intro { justify-items: center; }
	.fp-name { text-align: center; }
	.fp-stamp, .fp-start, .fp-status { justify-self: center; }
	.fp-notify { margin-inline: auto; width: 100%; }
}

/* The case */
.fp-case { display: grid; gap: 16px; padding-block: clamp(24px, 5vw, 56px); }
.fp-case__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; }
.fp-case__k { margin: 0; font: 600 .72rem var(--font-latin); letter-spacing: .3em; color: var(--a); }
.fp-case__head h2 { font-size: clamp(2rem, 4vw, 3rem); color: #fff; margin: 2px 0 4px; }
.fp-case__head p { color: var(--mute); margin: 0; }
.fp-case__tools { display: flex; align-items: center; gap: 12px; }
.fp-lives { display: flex; gap: 6px; }
.fp-lives i { width: 30px; height: 30px; border-radius: 50%; display: block; background: color-mix(in srgb, var(--a) 22%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='5.5'/%3E%3Cpath d='m15 15 4.5 4.5'/%3E%3C/svg%3E") center/16px no-repeat; border: 1px solid color-mix(in srgb, var(--a) 60%, transparent); transition: opacity .4s ease, transform .4s ease; }
.fp-lives i.is-lost { opacity: .2; transform: scale(.85); filter: grayscale(1); }
.fp-rules-btn { min-height: 38px; padding: 0 14px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .2); background: transparent; color: #fff; font: 500 .86rem var(--font-body); cursor: pointer; }
.fp-alert { padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); line-height: 1.7; }
.fp-alert[hidden] { display: none; }
.fp-alert.is-bad { background: rgba(224, 82, 63, .1); border-color: rgba(224, 82, 63, .35); }
.fp-alert b { color: #fff; }
.fp-chapters { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fp-ch { border-radius: 22px; padding: 20px 22px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .07); transition: border-color .6s ease, background .6s ease, opacity .6s ease; scroll-margin-top: 90px; }
.fp-ch__head { display: flex; align-items: center; gap: 12px; }
.fp-ch__head h3 { margin: 0; font-size: 1.15rem; color: #fff; flex: 1; }
.fp-ch__n { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--a) 50%, transparent); font: 600 .8rem 'Cinzel', serif; color: var(--a); flex: 0 0 36px; }
.fp-ch__state { font-size: .78rem; color: var(--mute); }
.fp-ch.is-solved .fp-ch__state { color: #8fd3a5; font-weight: 600; }
.fp-ch__body { margin: 12px 0 0; font-size: 1.06rem; line-height: 2; color: var(--txt); }
.fp-ch.is-locked { opacity: .45; }
.fp-ch.is-locked .fp-ch__body, .fp-ch.is-locked .fp-q { filter: blur(6px); user-select: none; pointer-events: none; }
.fp-ch.is-open { border-color: color-mix(in srgb, var(--a) 55%, transparent); background: color-mix(in srgb, var(--a) 7%, transparent); }
.fp-ch.is-solved { border-color: rgba(143, 211, 165, .25); }
.fp-ch.is-skipped .fp-q { display: none; }
.fp-ch.is-shake { animation: fpShake .45s ease; }
@keyframes fpShake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.fp-q { margin-top: 16px; padding-top: 16px; border-top: 1px dashed rgba(255, 255, 255, .12); }
.fp-q__t { margin: 0 0 12px; font-weight: 600; color: #fff; font-size: 1.02rem; }
.fp-q__opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.fp-opt { display: grid; justify-items: center; gap: 8px; padding: 12px 6px 10px; border-radius: 18px; border: 1.5px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); color: #fff; font: 500 .86rem var(--font-body); cursor: pointer; transition: transform .2s ease, border-color .2s ease, background .2s ease, opacity .3s ease; }
.fp-opt img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: #f3ede3; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .8); }
.fp-ch.is-open .fp-opt:hover { border-color: var(--a); transform: translateY(-2px); }
.fp-opt:disabled, .fp-ch.is-solved .fp-opt { cursor: default; }
.fp-opt.is-wrong { border-color: rgba(224, 82, 63, .7); background: rgba(224, 82, 63, .12); opacity: .55; }
.fp-opt.is-right { border-color: #8fd3a5; background: rgba(143, 211, 165, .14); }
.fp-ch.is-solved .fp-opt:not(.is-right) { opacity: .3; }
.fp-ch.is-busy .fp-opt { pointer-events: none; }
@media (max-width: 560px) {
	.fp-ch { padding: 16px; }
	.fp-ch__body { font-size: 1rem; line-height: 1.95; }
	.fp-q__opts { grid-template-columns: repeat(2, 1fr); }
	.fp-opt img { width: 54px; height: 54px; }
}

.fp-solved { text-align: center; display: grid; gap: 10px; justify-items: center; padding: 30px 20px; border-radius: 24px; background: color-mix(in srgb, var(--a) 12%, rgba(0, 0, 0, .4)); border: 1px solid color-mix(in srgb, var(--a) 50%, transparent); animation: gIn .8s cubic-bezier(.22, 1, .36, 1) both; }
.fp-solved[hidden] { display: none; }
.fp-solved__k { margin: 0; font: 600 .78rem var(--font-latin); letter-spacing: .3em; color: #8fd3a5; }
.fp-solved h3 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.6rem); color: #fff; }
.fp-solved p { margin: 0; color: var(--mute); }
.fp-next { margin-top: 6px; padding: 12px 22px; border-radius: 99px; background: var(--a); color: var(--ink); text-decoration: none; font-weight: 600; }

/* Sealed notes */
.fp-notes { padding-block: 8px clamp(24px, 4vw, 40px); }
.fp-notes h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 14px; }
.fp-sealed { position: relative; display: grid; justify-items: center; gap: 8px; padding: 30px 20px; text-align: center; border-radius: 24px; overflow: hidden;
	background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 12px, transparent 12px 24px), rgba(0, 0, 0, .35); border: 1px dashed color-mix(in srgb, var(--a) 50%, transparent); }
.fp-sealed[hidden] { display: none; }
.fp-sealed svg { width: 40px; height: 40px; fill: none; stroke: var(--a); stroke-width: 1.6; }
.fp-sealed__k { margin: 0; font: 700 .8rem var(--font-latin); letter-spacing: .32em; color: #d23a2e; }
.fp-sealed p { margin: 0; color: var(--mute); }
.fp-skip { margin-top: 6px; border: 0; background: none; color: var(--mute); font: 500 .86rem var(--font-body); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.fp-skip:hover { color: #fff; }
.fp-notes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; animation: gIn .7s cubic-bezier(.22, 1, .36, 1) both; }
.fp-notes__grid[hidden] { display: none; }
.fp .notes__tier { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); color: #fff; }
.fp .notes__label b { color: #fff; }
.fp .note { color: rgba(255, 255, 255, .85); }
@media (max-width: 760px) { .fp-notes__grid { grid-template-columns: 1fr; } }

.fp-reward-wrap { padding-bottom: 24px; }
.fp-files { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 24px 48px; border-top: 1px solid rgba(255, 255, 255, .08); flex-wrap: wrap; }
.fp-files a { color: var(--txt); text-decoration: none; font: 500 .95rem var(--font-latin); }
.fp-files__all { padding: 10px 18px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .2); font-family: var(--font-body) !important; }
.fp-files a:hover { color: var(--a); }
@media (prefers-reduced-motion: reduce) { .fp *, .fp *::before { animation: none !important; transition: none !important; } }