/* SUZ Files — shared game pieces (buttons, modals, reward) and the case board. */
.g-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 24px; border: 0; border-radius: 14px; background: var(--a, #d4b06a); color: #0a0908; font: 600 1rem var(--font-body); text-decoration: none; cursor: pointer; transition: transform .15s ease, filter .2s ease; }
.g-btn:hover { filter: brightness(1.08); }
.g-btn:active { transform: scale(.97); }
.g-btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .25); }
.g-btn--warn { background: #e0523f; color: #fff; }

/* Modals */
.g-modal { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 16px; }
.g-modal[hidden] { display: none; }
.g-modal__bg { position: absolute; inset: 0; background: rgba(5, 4, 3, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s ease; }
.g-modal__box { position: relative; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 26px 24px 22px; border-radius: 24px; color: rgba(255, 255, 255, .88);
	background: radial-gradient(90% 60% at 80% 0%, color-mix(in srgb, var(--a, #d4b06a) 22%, transparent), transparent 70%), #12100d; border: 1px solid color-mix(in srgb, var(--a, #d4b06a) 40%, transparent);
	box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .8); transform: translateY(20px) scale(.97); opacity: 0; transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .25s ease; }
.g-modal.is-open .g-modal__bg { opacity: 1; }
.g-modal.is-open .g-modal__box { transform: none; opacity: 1; }
.g-modal__k { margin: 0 0 4px; font: 600 .72rem var(--font-latin); letter-spacing: .3em; color: var(--a, #d4b06a); }
.g-modal h2 { margin: 0 0 14px; color: #fff; font-size: 1.6rem; }
.g-modal p { margin: 0 0 14px; line-height: 1.8; }
.g-rules { margin: 0 0 16px; padding: 0; list-style: none; counter-reset: r; display: grid; gap: 10px; }
.g-rules li { counter-increment: r; position: relative; padding-inline-start: 38px; line-height: 1.7; font-size: .95rem; }
.g-rules li::before { content: counter(r); position: absolute; inset-inline-start: 0; top: 1px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 .8rem var(--font-latin); color: #0a0908; background: var(--a, #d4b06a); }
.g-rules b { color: #fff; }
.g-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.g-tiers div { display: grid; justify-items: center; padding: 10px 6px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.g-tiers b { font: 600 1.4rem var(--font-latin); color: #fff; line-height: 1.1; }
.g-tiers span { font-size: .75rem; color: rgba(255, 255, 255, .55); }
.g-tiers em { font-style: normal; font: 600 1rem var(--font-latin); color: var(--a, #d4b06a); }
.g-modal__fine { font-size: .82rem; color: rgba(255, 255, 255, .55); }
.g-modal .g-btn { width: 100%; }
.g-modal__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.g-modal__box--warn { border-color: rgba(224, 82, 63, .5); }
.g-modal__box--warn .g-modal__k { color: #ff8f80; }

/* Reward */
.g-reward { position: relative; display: grid; gap: 16px; padding: 22px; border-radius: 24px; color: rgba(255, 255, 255, .88); background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .1); }
.g-reward__k { margin: 0; font: 600 .72rem var(--font-latin); letter-spacing: .3em; color: var(--a, #d4b06a); text-transform: uppercase; }
.g-reward h2 { margin: 2px 0 4px; color: #fff; font-size: clamp(1.3rem, 3vw, 1.8rem); }
.g-reward h2 span { font-family: var(--font-latin); color: var(--a, #d4b06a); }
.g-reward__next { margin: 0; color: rgba(255, 255, 255, .7); }
.g-meter { position: relative; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .1); margin: 18px 4px 30px; }
.g-meter__fill { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, #f3dfae, var(--a, #d4b06a)); transition: width 1s cubic-bezier(.22, 1, .36, 1); }
.g-meter__stop { position: absolute; top: 50%; inset-inline-start: var(--at); transform: translate(-50%, -50%); display: grid; justify-items: center; }
[dir="rtl"] .g-meter__stop, body:not(.lang-en) .g-meter__stop { transform: translate(50%, -50%); }
.g-meter__stop b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #1b1814; border: 2px solid var(--a, #d4b06a); color: #fff; font: 600 .74rem var(--font-latin); }
.g-meter__stop em { position: absolute; top: 30px; font-style: normal; font: 600 .78rem var(--font-latin); color: var(--a, #d4b06a); white-space: nowrap; }
.g-claim { display: grid; gap: 8px; }
.g-claim[hidden], .g-code[hidden] { display: none; }
.g-claim label { font-size: .92rem; color: rgba(255, 255, 255, .75); }
.g-claim__row { display: flex; gap: 8px; }
.g-claim input { flex: 1; min-width: 0; min-height: 50px; padding: 0 16px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: #fff; font: 500 1rem var(--font-latin); }
.g-claim input:focus { outline: none; border-color: var(--a, #d4b06a); }
.g-claim__msg { margin: 0; min-height: 1.2em; font-size: .86rem; }
.g-claim__msg.is-bad { color: #ff8f80; }
.g-code { display: grid; gap: 8px; justify-items: start; padding: 16px; border-radius: 18px; background: color-mix(in srgb, var(--a, #d4b06a) 14%, rgba(0, 0, 0, .3)); border: 1px dashed var(--a, #d4b06a); animation: gIn .6s cubic-bezier(.2, 1.4, .4, 1) both; }
.g-code p { margin: 0; }
.g-code b { color: #fff; }
.g-code__val { display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 12px; border: 0; background: #fff; color: #0a0908; font: 700 1.3rem var(--font-latin); letter-spacing: .08em; cursor: pointer; direction: ltr; }
.g-code__val i { font-style: normal; font: 500 .78rem var(--font-body); letter-spacing: 0; color: #6b6255; }
.g-code__fine { font-size: .8rem; color: rgba(255, 255, 255, .6); }
@keyframes gIn { from { transform: scale(.9); opacity: 0; } }

/* ===== Case board ===== */
body.page-template-default.page .sfh, .sfh { --a: #d4b06a; position: relative; overflow: hidden; color: rgba(255, 255, 255, .88);
	background: radial-gradient(70% 50% at 80% 0%, rgba(212, 176, 106, .16), transparent 70%), radial-gradient(60% 40% at 0% 60%, rgba(192, 22, 47, .1), transparent 70%), #0a0908; }
.sfh::before { content: ''; position: absolute; inset: 0; background-image: var(--pattern); background-size: 96px 96px; opacity: .8; pointer-events: none; }
.sfh__fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sfh > *:not(.sfh__fx):not(.g-modal) { position: relative; }
.sfh-hero { display: grid; justify-items: center; gap: 16px; text-align: center; padding-block: clamp(40px, 7vw, 90px) 28px; }
.sfh-stamp { 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; }
.sfh-title { margin: 0; font-family: 'Cinzel', var(--font-latin); font-weight: 600; font-size: clamp(3.4rem, 12vw, 8rem); line-height: .95; color: #fff; letter-spacing: .04em; direction: ltr; text-shadow: 0 0 60px rgba(212, 176, 106, .35); }
.sfh-title span:last-child { color: var(--a); }
.sfh-lead { margin: 0; max-width: 34em; font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.8; color: rgba(255, 255, 255, .75); }
.sfh-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sfh-steps { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sfh-steps li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); font-size: .88rem; }
.sfh-steps b { font: 600 .78rem var(--font-latin); color: var(--a); }
.sfh .g-reward { margin-block: 10px 28px; }

.sfh-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; padding-bottom: clamp(40px, 6vw, 72px); }
.sfh-case { position: relative; display: grid; grid-template-columns: 92px 1fr; gap: 14px; padding: 16px; padding-top: 22px; border-radius: 6px 22px 22px 22px; text-decoration: none; color: inherit;
	background: linear-gradient(160deg, color-mix(in srgb, var(--a) 16%, #16130f), #100e0b 70%); border: 1px solid color-mix(in srgb, var(--a) 35%, transparent); transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease, border-color .3s ease; }
.sfh-case:hover { transform: translateY(-4px); border-color: var(--a); box-shadow: 0 26px 50px -30px color-mix(in srgb, var(--a) 70%, transparent); }
.sfh-case__tab { position: absolute; top: -1px; inset-inline-start: 18px; transform: translateY(-50%); padding: 3px 12px; border-radius: 6px; background: var(--a); color: #0a0908; font: 700 .76rem var(--font-latin); letter-spacing: .12em; }
.sfh-case__img img { width: 92px; height: 150px; object-fit: cover; border-radius: 8px; box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .9); }
.sfh-case__body { display: grid; align-content: start; gap: 4px; min-width: 0; }
.sfh-case__name { font: 600 1.5rem 'Cinzel', var(--font-latin); color: #fff; letter-spacing: .04em; }
.sfh-case__traits { font-size: .8rem; color: var(--a); }
.sfh-case__log { font-size: .9rem; line-height: 1.6; color: rgba(255, 255, 255, .7); }
.sfh-case__status { justify-self: start; margin-top: 6px; padding: 4px 10px; border-radius: 99px; font-size: .76rem; background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .7); }
.sfh-case[data-st="solved"] .sfh-case__status { background: rgba(143, 211, 165, .16); color: #8fd3a5; }
.sfh-case[data-st="progress"] .sfh-case__status { background: color-mix(in srgb, var(--a) 22%, transparent); color: #fff; }
.sfh-case[data-st="locked"] .sfh-case__status { background: rgba(224, 82, 63, .15); color: #ff8f80; }
.sfh-case[data-st="skipped"] .sfh-case__status { background: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .45); }
.sfh-case[data-st="solved"]::after { content: 'SOLVED'; position: absolute; top: 14px; inset-inline-end: 14px; font: 700 .7rem var(--font-latin); letter-spacing: .2em; color: #8fd3a5; border: 1.5px solid currentColor; padding: 3px 7px; transform: rotate(6deg); border-radius: 3px; }
.sfh-shop { border-top: 1px solid rgba(255, 255, 255, .08); }
.sfh-shop__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-block: 28px 40px; }
.sfh-shop__in p { margin: 0; max-width: 36em; color: rgba(255, 255, 255, .7); }
body.page-suz-files, body.page-suz-files .site-main { background: #0a0908; }
@media (max-width: 520px) { .sfh-case { grid-template-columns: 78px 1fr; } .sfh-case__img img { width: 78px; height: 128px; } .sfh-case__name { font-size: 1.3rem; } }
@media (prefers-reduced-motion: reduce) { .g-modal__box, .g-modal__bg, .sfh-case { transition: none; } }